Design Tokens changelog

3.0.0 (2026-09-18)

🚀 Features

• design-tokens: add elevation (shadow) tokens — base geometry (offset-x/y, blur, spread per level), semantic shadow colour per level (default UI and Alta UI), and composed —r-shadow- tokens ready to use as box-shadow. Shadows are an Alta-only effect: transparent in default UI, visible under [data-r-ui=“alta”].
• design-tokens: publish the brandable semantic token list as lib/brandable-tokens.json.

⚠️ Breaking Changes

• tokens: remove the deprecated v1 aliases that were kept for the v2 migration.

  BREAKING CHANGE: the 25 tokens in the legacy alias set no longer resolve, as custom properties or as Sass variables — --r-background-brand-vanguard, --r-background-brand-vanguard-softest, --r-background-interactive-activated, --r-background-interactive-hovered, --r-background-interactive-hovered-inverse, --r-background-interactive-pressed, --r-background-interactive-pressed-inverse, --r-background-interactive-softer, --r-background-interactive-softest, --r-background-interactive-strong, --r-background-modal, --r-border-brand-vanguard, --r-dark-azure-400, --r-dark-blue-300, --r-dark-blue-600, --r-dark-green-400, --r-dark-orange-400, --r-dark-red-600, --r-dark-rustyorange-500, --r-icon-brand-vanguard, --r-icon-warning, --r-logo-brand-vanguard, --r-text-onbrand, --r-text-softer and --r-text-warning. Each was a straight alias, so every replacement resolves to the identical value and the swap is mechanical. Their $description already announced removal in v3. Run node node_modules/@riverty/design-tokens/bin/migration-audit.mjs for the full mapping, or see the v3 migration guide. The audit now reports these as renamed rather than as optional cleanup, so they appear under “Must fix” with their replacement. The deprecated-alias finding status is gone from both the text and --json output, and nothing is left pending removal in a future major.

• theming: separate the UI axis from the mode axis, so a UI variant such as data-r-ui="alta" applies independently of light/dark. Mode now resolves through color-scheme and light-dark() rather than duplicated [data-theme] blocks, and UI overrides are emitted as a single flat selector instead of being paired with [data-theme]. A new data-theme="inverse" lets a small surface use inverse semantic-token values without a runtime observer.

  Mode-independent semantic tokens are declared once at :root instead of once per mode. This also fixes a variant bug: [data-theme="dark"] and [data-r-ui="alta"] share (0,1,0) specificity, so a data-theme element nested below a data-r-ui element used to reset the variant’s radius back to the default scale. BREAKING CHANGE: hand-authored UI-variant stylesheets built from the old paired [data-theme][data-r-ui] template must be rewritten as one flat [data-r-ui] selector using light-dark(). BREAKING CHANGE: the internal --r-internal-theme-state custom property is removed, together with the last prefers-color-scheme block in tokens.css. It existed only to let a runtime StyleObserver read the resolved mode; components now express inverse surfaces through data-theme="inverse" CSS. Anything reading --r-internal-theme-state (or the Sass $r-internal-theme-state) should read color-scheme, or set data-theme="inverse" instead.

• tokens: ship radius as a themeable token category. A base step scale (--r-border-radius-*) feeds semantic tokens (--r-radius-none|xs|s|m|l|xl|full) that are square in the default UI and rounded under data-r-ui="alta", so a component’s corners follow the active UI without a component-specific theme. Alta ships as generated [data-r-ui="alta"] overrides in tokens.css instead of hand-written CSS.

  The token import now reports Figma modes and categories that no token set claims, and variables Figma no longer provides, so a silently removed token surfaces before release rather than after. BREAKING CHANGE: base border radius tokens follow Figma’s step scale and the t-shirt names are removed — --r-border-radius-none -> --r-border-radius-0, -s -> -4, -m -> -8, -l -> -12, -xl -> -16. The values themselves are unchanged, and the scale gains new -2 and -40 steps. Prefer the semantic --r-radius-* tokens, which follow the active UI. Run node node_modules/@riverty/design-tokens/bin/migration-audit.mjs to find and replace usages. BREAKING CHANGE: --r-background-interactive-regular is no longer a deprecated alias of --r-background-regular. Figma now provides it as a live semantic token, so its value changes to var(--r-charcoal-400) in light and var(--r-haze-200) in dark.

2.2.0 (2026-07-14)

🚀 Features

• themes: add new theme token and CSS framework support for modern and tiktok theme variants, including generated theme assets for consumer usage.

2.1.0 (2026-06-10)

🚀 Features

• design-tokens: add new color token r-icon-inverse-static with value r-neutral-white to be used for icons that are used on inverse backgrounds.
• design-tokens: add new skill rty-design-tokens-usage with usage guidance for Riverty Design Tokens when styling UI with CSS Custom Properties. This skill includes principles on when to use it, how to select and apply tokens, and best practices for working with the @riverty/design-tokens library effectively in projects.

🩹 Fixes

• design-tokens: remove internal source format section from README.

2.0.0 (2026-05-22)

🩹 Fixes

• design-tokens: fix generated SCSS spacing tokens to output rem values instead of px values.
• design-tokens: prevent internal version-checker artifacts from being included in published package files.

⚠️ Breaking Changes

• Introduce modernized colors to support a more expressive visual languange. Restructure to make the experience better for designers and developers. Remove deprecated legacy tokens.

  Provide migration audit script to help check for removed and deprecated token usage. Located at @riverty/design-tokens/bin/migration-audit.mjs. Source token source files are now using DTCG format.

1.4.0 (2026-04-14)

🚀 Features

• tokens: add new base tokens --r-dark-vanguard-100, --r-dark-vanguard-200, and --r-dark-vanguard-300. Update value of --r-background-brand-vanguard-softest for dark mode.

1.3.0 (2026-03-12)

🩹 Fixes

• Fixed integration issue in the other codebases.

1.2.2 (2026-03-05)

🩹 Fixes

• fix: include all missed files in the patched packages

1.2.1 (2026-03-04)

🩹 Fixes

• chore: update contributing guidelines and package configuration

1.2.0 (2025-11-19)

🚀 Features

• New color tokens for hover and active states have been added for inverse themes.

1.1.4 (2025-11-05)

🩹 Fixes

• Base color tokens --r-red-400, --r-dark-red-500, --r-orange-400, --r-blue-400, and --r-dark-blue-300 have been updated with new colors to ensure proper color contrast, and semantic tokens --r-status-error-regular, --r-status-warning-regular, --r-status-info-regular have been updated accordingly.

1.1.3 (2025-10-23)

🩹 Fixes

• design-token: change value for r-link-enabled token for better color contrast in light and dark modes

1.1.2 (2025-07-11)

🚀 Features

• ⚠️ checkbox: updates according to Figma [DSYS-1407]

🩹 Fixes

• add internal-only theme state token

⚠️ Breaking Changes

• checkbox: checkbox new view (block, paddings, focus)

1.1.1 (2025-03-21)

🩹 Fixes

• cursor appearance [DSYS-1256]

1.1.0 (2025-02-28)

🚀 Features

• button: support aria-label, fix link button accessibility, ensure rClick always emitted
• colors: update color token values, update color of hint and toast component [DSYS-1152]

1.0.3 (2024-10-18)

Dependency upgrade only. No change for package users.

1.0.2 (2024-06-25)

Published to address that 1.0.1 included one extra file it shouldn’t have. No other changes.

1.0.1 (2024-06-25)

🩹 Fixes

• ensure base SCSS variables are exposed as intended. Please note that you should use variables from lib/tokens-light.scss or lib/tokens-dark.scss.

1.0.0 (2024-06-25)

Introducing semantic color tokens and support for dark mode.

Read mode about the color structure on riverty.design.

[0.6.0] - 2024-01-09

Added r-color-semantic-focus-blue as more specific name of r-color-focus-blue.

[0.5.0] - 2023-10-04

Added r-color-focus-blue in support of new focus styles.

[0.4.0] - 2023-09-08

❗Breaking change: Remove --r-icon-sizes-* tokens. Replace with --r-icon-size-s, --r-icon-size-m, and --r-icon-size-l that align with the overall UI icons.

[0.3.0] - 2023-02-03

❗Breaking change: Remove ember color shades other than default. r-color-orange-ember/r-color-orange-ember-400 remain, while 200, 300, 500, and 600 have been removed.

[0.2.0] - 2022-10-26

❗Breaking change: New naming structure for font size tokens. We recommend you update all references to use the new names. You may also include this mapping to keep compatibility with old names:

--r-font-size-desktop-xxl: var(--r-font-size-desktop-900);
--r-font-size-desktop-xl: var(--r-font-size-desktop-800);
--r-font-size-desktop- … : var(--r-font-size-desktop- …);
…

[0.1.14] - 2022-09-06

• Changed: refine font stacks.
  • --r-font-family-text now specifies system-ui as default (which has good browser support). It has fewer named fallback options, but keeps Segoe UI and Roboto to align with the Figma UI kit.
  • --r-font-family-heading now has explicit fallback values, including ui-serif (also in the CSS Fonts Module Level 4 draft, but only Safari supports)

[0.1.12] - 2022-08-24

• Changed: used descriptive names for font-size tokens (like --r-font-size-mobile-xl and --r-font-size-desktop-xl). Remove --r-font-size-56 tokens.

[0.1.10]

lo* Changed: spacing token specified as rem rather than em.

[0.1.9]

• Add semantic colors

[0.1.6] - 2022-08-12

• Add font family tokens.

[0.1.5] - 2022-07-06

• Add spacing tokens.
• Use rem unit for font sizes.
• Adjust spacing token names.

[0.1.4] - 2022-07-05

• Add font weight tokens.
• Add line height tokens.
• Adjust font size token names.

[0.1.3] - 2022-07-04

• Add font size tokens

[0.1.0] - 2022-06-29

[0.1.9] - 2022-08-17

• Add semantic colors

[0.1.11] - 2022-08-18

• Add icon sizes

Added

• Initial release of formats: CSS Custom Properties, Sass variables.
• Initial release of token types: colors.