Design Tokens Core Changelog

@cfa/design-tokens-core

2.0.0

Major Changes

• #2411 b60c8aa Thanks @stevegreco! - Replaced selection, action, calendar, and tag tokens with the updated Figma set.

  • Selection states now use selectable semantic tokens (default, hover, selected, and selected-subtle) instead of surface hover, active, and selected backgrounds.
  • Action colors and button border widths are split by variant (primary, secondary, tertiary, destructive). The shared --ds-components-button-border-width token is removed.
  • Calendar day tokens moved from date-picker-calendar-day to calendar-calendar-day. Selected days use a solid selected fill and selected content color, and background-selected-subtle is the range track. Selected-hover calendar and form-field tokens are removed.
  • Tag selected styling uses background-selected and border-selected. Active tag tokens are removed. Data viz token names drop the beta segment (background-data-viz-beta-* → background-data-viz-*).

  Update custom styles that reference the old token names.

• #2307 9855ed5 Thanks @stevegreco! - Renamed semantic color tokens to clarify brand vs accent usage and foreground/background pairings.

  • *-background-primary → *-background-brand (including -active, -hover, -knockout)
  • *-border-primary → *-border-brand
  • *-background-brand-{color} → *-background-accent-{color} (palette accents)
  • *-content-primary → *-content-on-brand
  • *-content-primary-knockout → *-content-brand
  • Removed per-accent *-knockout background tokens and content-brand-deprecated-* tokens
  • Added data viz beta semantic color tokens

  Update any custom styles or theme overrides that reference the old token names. Color values are unchanged. This is a naming migration only.

• #2355 db8fe23 Thanks @stevegreco! - Renamed semantic background tokens and Tailwind surface utilities.

  • color.background.default is now page gray. White surfaces use color.background.surface.
  • Replace bg-raised-default with bg-surface, bg-raised-hover with bg-surface-hover, and bg-raised-active with bg-surface-active.
  • Replace bg-overlay-backdrop-default with bg-overlay. Overlay panels use bg-surface.
  • Removed bg-sunken-default and overflow shadow utilities.
  • React Core components use the new tokens internally. Built-in component appearance is unchanged.

  Update custom CSS or Tailwind classes that used the old names. See packages/react-core/V2-MIGRATION-GUIDE.md.

Minor Changes

• #2083 862a9e6 Thanks @stevegreco! - Added programmatic query APIs and an MCP server so agents can look up CFA components, props, tokens, and icons without reading source.

  • @cfa/design-system-mcp ships the cfa-design-system-mcp server with list_components, get_component_props, get_component_guidance, search_tokens, suggest_token, search_icons, and get_icon.
  • @cfa/react-core/query exports listComponents, getComponentProps, and getComponentGuidance.
  • @cfa/design-tokens-core/query exports searchTokens and suggestTokens.
  • @cfa/icons/query exports searchIcons and getIcon.

• #2229 d5e4b85 Thanks @stevegreco! - Changed the default design token theme from cfa-red to experimental-red.

  • :root styling now uses experimental-red tokens when no data-theme attribute is set.
  • Aligns default styling with v2 component specs (e.g. 1px component border widths).
  • Added composite elevation tokens for experimental-red and experimental-navy themes.

  If you rely on the default theme, review visual output after upgrading.

• #2260 b669351 Thanks @stevegreco! - Added --ds-semantic-size-xs and updated button surface tokens to support v2 IconButton sizing and styling.

  • Added --ds-semantic-size-xs (24px) for extra-small interactive targets.
  • Updated tertiary and secondary button background hover/active tokens in the experimental default themes used by icon button variants.

  If you rely on the default theme, review visual output after upgrading.

• #2238 0774f0c Thanks @stevegreco! - Updated selection and chip design tokens.

  • Added a semantic background token for selected (non-pressed) states.
  • Added switcher background tokens for toggle/switcher UI patterns.
  • Renamed chip background tokens from neutral to gray. If you reference chip background tokens directly, update neutral paths to gray (for example, --ds-components-chip-color-background-gray-subtle).

  Review chip and selection styling after upgrading if you consume these tokens outside react-core.

• #2327 d9d764a Thanks @stevegreco! - Added Tailwind v4 theme and semantic utility CSS to @cfa/design-tokens-core.

  • Import @cfa/design-tokens-core/css/tailwind-theme.css and @cfa/design-tokens-core/css/tailwind-utilities.css to use CFA tokens as Tailwind classes. Examples: bg-brand, text-default, border-subtle, type-body-default, rounded-lg, shadow-raised.
  • Colors are custom utilities, not @theme colors. CFA background, content, and border tokens stay as separate values. They are not one Tailwind color with bg-*, text-*, and border-* all pointing at the same value.
  • tailwind-theme.css turns off Tailwind’s default color scale, so classes like bg-blue-500 are not available. Import tailwind-utilities.css as a plain CSS import, not inside layer(utilities).
  • Token variables still come from @cfa/design-tokens-core/css/themes.css, or from @cfa/react-core/index.css if you already import it.

  @import "@cfa/design-tokens-core/css/tailwind-theme.css" layer(theme);
  @import "@cfa/design-tokens-core/css/tailwind-utilities.css";

Patch Changes

• #2269 0c07914 Thanks @stevegreco! - Updated the default hover background color to a neutral gray across all themes.

  • --ds-semantic-color-background-default-hover now resolves to #f8f9f9 instead of theme-tinted hover colors.
  • Affects hover states on components that use the default background hover token across CFA Red, CFA Navy, and experimental themes.

• #2399 39e5545 Thanks @stevegreco! - Refined subtle content color and removed deprecated component tokens from the generated theme output.

  • Updated --ds-semantic-color-content-subtle from #6c6d6d to #5b6770 across all themes.
  • Removed deprecated Chip bold background tokens (--ds-components-chip-color-background-*) superseded by the subtle variant tokens.
  • Removed deprecated IconButton variant tokens (--ds-components-icon-button-{brand,dark,light}-*) no longer used by v2 components.

  If you reference the removed tokens directly in custom styles, switch to the corresponding subtle Chip tokens or semantic button tokens.

• #2406 be66491 Thanks @stevegreco! - Restored Tailwind keyword color utilities after the palette reset in tailwind-theme.css.

  • bg-transparent, text-current, border-inherit, and related keyword utilities work again after importing tailwind-theme.css.
  • Tailwind’s default palette classes such as bg-blue-500 remain unavailable.
  • black and white are not restored.

2.0.0-beta.7

Patch Changes

• #2399 39e5545 Thanks @stevegreco! - Refined subtle content color and removed deprecated component tokens from the generated theme output.

  • Updated --ds-semantic-color-content-subtle from #6c6d6d to #5b6770 across all themes.
  • Removed deprecated Chip bold background tokens (--ds-components-chip-color-background-*) superseded by the subtle variant tokens.
  • Removed deprecated IconButton variant tokens (--ds-components-icon-button-{brand,dark,light}-*) no longer used by v2 components.

  If you reference the removed tokens directly in custom styles, switch to the corresponding subtle Chip tokens or semantic button tokens.

• #2406 be66491 Thanks @stevegreco! - Restore Tailwind keyword color utilities after the palette reset in tailwind-theme.css.

  • bg-transparent, text-current, border-inherit, and related keyword utilities work again after importing tailwind-theme.css.
  • Tailwind’s default palette classes such as bg-blue-500 remain unavailable.
  • black and white are not restored.

2.0.0-beta.6

Major Changes

• #2355 db8fe23 Thanks @stevegreco! - Renamed semantic background tokens and Tailwind surface utilities.

  • color.background.default is now page gray. White surfaces use color.background.surface.
  • Replace bg-raised-default with bg-surface, bg-raised-hover with bg-surface-hover, and bg-raised-active with bg-surface-active.
  • Replace bg-overlay-backdrop-default with bg-overlay. Overlay panels use bg-surface.
  • Removed bg-sunken-default and overflow shadow utilities.
  • React Core components use the new tokens internally. Built-in component appearance is unchanged.

  Update custom CSS or Tailwind classes that used the old names. See V2-MIGRATION-GUIDE.md.

2.0.0-beta.5

Minor Changes

• #2083 862a9e6 Thanks @stevegreco! - Add programmatic query APIs and an MCP server so agents and tooling can discover CFA components, props, tokens, and icons without reading source.

  • @cfa/design-system-mcp: New MCP server (cfa-design-system-mcp) exposing list_components, get_component_props, get_component_guidance, search_tokens, suggest_token, search_icons, and get_icon.
  • @cfa/react-core/query: listComponents, getComponentProps, and getComponentGuidance for component catalog, prop contracts, and generated usage docs.
  • @cfa/design-tokens-core/query: searchTokens and suggestTokens for token lookup and CSS-property-based suggestions.
  • @cfa/icons/query: searchIcons and getIcon for icon discovery and raw SVG retrieval.

• #2327 d9d764a Thanks @stevegreco! - Add Tailwind v4 theme and semantic utility CSS to @cfa/design-tokens-core.

  • Import @cfa/design-tokens-core/css/tailwind-theme.css and @cfa/design-tokens-core/css/tailwind-utilities.css to use CFA tokens as Tailwind classes (bg-brand, text-default, border-subtle, type-body-default, rounded-lg, shadow-raised).
  • Colors are custom utilities, not @theme colors. CFA background, content, and border tokens are separate values, and Tailwind’s color palette would otherwise generate bg-*, text-*, and border-* from a single color.
  • tailwind-theme.css disables Tailwind’s default color scale, so classes like bg-blue-500 are not available. Import tailwind-utilities.css as a plain CSS import, not inside layer(utilities).
  • Token variables still come from @cfa/design-tokens-core/css/themes.css, or from @cfa/react-core/index.css if you already import it.

  @import "@cfa/design-tokens-core/css/tailwind-theme.css" layer(theme);
  @import "@cfa/design-tokens-core/css/tailwind-utilities.css";

1.0.0-beta.3

Major Changes

• #2307 9855ed5 Thanks @stevegreco! - Renamed semantic color tokens to clarify brand vs accent usage and foreground/background pairings.

  • *-background-primary → *-background-brand (including -active, -hover, -knockout)
  • *-border-primary → *-border-brand
  • *-background-brand-{color} → *-background-accent-{color} (palette accents)
  • *-content-primary → *-content-on-brand
  • *-content-primary-knockout → *-content-brand
  • Removed per-accent *-knockout background tokens and content-brand-deprecated-* tokens
  • Added data viz beta semantic color tokens

  Update any custom styles or theme overrides that reference the old token names. Color values are unchanged — this is a naming migration only.

0.3.0-beta.2

Minor Changes

• #2260 b669351 Thanks @stevegreco! - Added --ds-semantic-size-xs and updated button surface tokens to support v2 IconButton sizing and styling.

  • Added --ds-semantic-size-xs (24px) for extra-small interactive targets.
  • Updated tertiary and secondary button background hover/active tokens in the experimental default themes used by icon button variants.

  If you rely on the default theme, review visual output after upgrading.

Patch Changes

• #2269 0c07914 Thanks @stevegreco! - Updated the default hover background color to a neutral gray across all themes.

  • --ds-semantic-color-background-default-hover now resolves to #f8f9f9 instead of theme-tinted hover colors.
  • Affects hover states on components that use the default background hover token across CFA Red, CFA Navy, and experimental themes.

0.3.0-beta.1

Minor Changes

• #2238 0774f0c Thanks @stevegreco! - Updated selection and chip design tokens.

  • Added a semantic background token for selected (non-pressed) states.
  • Added switcher background tokens for toggle/switcher UI patterns.
  • Renamed chip background tokens from neutral to gray. If you reference chip background tokens directly, update neutral paths to gray (for example, --ds-components-chip-color-background-gray-subtle).

  Review chip and selection styling after upgrading if you consume these tokens outside react-core.

0.3.0-beta.0

Minor Changes

• #2229 d5e4b85 Thanks @stevegreco! - Changed the default design token theme from cfa-red to experimental-red.

  • :root styling now uses experimental-red tokens when no data-theme attribute is set.
  • Aligns default styling with v2 component specs (e.g. 1px component border widths).
  • Added composite elevation tokens for experimental-red and experimental-navy themes.

  If you rely on the default theme, review visual output after upgrading.

0.2.1

Patch Changes

• #2101 6e7207e Thanks @stevegreco! - Corrected chip default background color tokens that were incorrectly set to subtle tints.

  • Updated default (non-subtle) chip background tokens for blue, light orange, neutral, orange, pink, and purple to their intended brand colors.
  • Subtle chip background tokens are unchanged; filled Chip styling in @cfa/react-core is unaffected.

0.2.1-beta.0

Patch Changes

• #2101 6e7207e Thanks @stevegreco! - Corrected chip default background color tokens that were incorrectly set to subtle tints.

  • Updated default (non-subtle) chip background tokens for blue, light orange, neutral, orange, pink, and purple to their intended brand colors.
  • Subtle chip background tokens are unchanged; filled Chip styling in @cfa/react-core is unaffected.

0.2.0

Minor Changes

• #2010 c93883a Thanks @stevegreco! - Synced the latest Figma token export and updated React components to stay aligned with the published token set.
  • Updated the published token files in @cfa/design-tokens-core to match the latest Figma source of truth.
  • Removed deprecated spacing and button sizing token entries from @cfa/design-tokens-core; consumers using those token names should migrate to the replacement semantic size and spacing tokens.
  • Updated Button and PageLoader in @cfa/react-core to use the replacement tokens so their default sizing and spacing continue to render correctly after the token sync.

Patch Changes

• #2025 e1ce933 Thanks @stevegreco! - provided experimental themes in beta state

0.2.0-beta.0

Minor Changes

• #2010 c93883a Thanks @stevegreco! - Synced the latest Figma token export and updated React components to stay aligned with the published token set.
  • Updated the published token files in @cfa/design-tokens-core to match the latest Figma source of truth.
  • Removed deprecated spacing and button sizing token entries from @cfa/design-tokens-core; consumers using those token names should migrate to the replacement semantic size and spacing tokens.
  • Updated Button and PageLoader in @cfa/react-core to use the replacement tokens so their default sizing and spacing continue to render correctly after the token sync.

Patch Changes

• #2025 e1ce933 Thanks @stevegreco! - provided experimental themes in beta state

0.1.0

Minor Changes

• #1950 c291cc2 Thanks @stevegreco! - Synced the exported Figma token set and realigned several consumer-facing token contracts across all generated token formats.
  • Renamed the button component token groups from filled, outlined, and text to primary, secondary, and tertiary, and added explicit transparent background tokens for the secondary and tertiary variants.
  • Remapped semantic primary content tokens so content.primary now resolves to the on-primary/knockout text color and content.primary-knockout now resolves to the themed primary brand color. If you reference these semantic tokens directly, verify branded text and accent treatments after upgrading.
  • Restructured elevation color tokens under explicit color.background namespaces, added overlay backdrop, date picker segment focus, and generic track background tokens, and updated the default switch track color.
  • Deprecated the legacy semantic brand content tokens under content.brand-deprecated-* and removed several previously exported raw tokens, including primary knockout hover and active variants, transparent background aliases, and the cream knockout border token. Consumers reading token names directly from the CSS, JS, JSON, SCSS, or React Native outputs should update those references before upgrading.

Patch Changes

• #1876 ac04fcd Thanks @stevegreco! - Synced tokens from Figma

  • Added new component level table tokens

• #1919 8f9b50c Thanks @stevegreco! - Corrected exported dark green chip background token values across the design token outputs.

  • Updated the dark green chip background token for the navy theme to use the intended dark green value.
  • Updated the dark green subtle chip background token for the red and navy themes.
  • These changes flow through the package’s CSS, SCSS, JSON, JS, React Native, and theme exports without requiring adopter code changes.

• #1898 445af1c Thanks @stevegreco! - Synced latest destructive and negative semantic token values from Figma exports.

0.1.0-beta.1

Minor Changes

• #1950 c291cc2 Thanks @stevegreco! - Synced the exported Figma token set and realigned several consumer-facing token contracts across all generated token formats.
  • Renamed the button component token groups from filled, outlined, and text to primary, secondary, and tertiary, and added explicit transparent background tokens for the secondary and tertiary variants.
  • Remapped semantic primary content tokens so content.primary now resolves to the on-primary/knockout text color and content.primary-knockout now resolves to the themed primary brand color. If you reference these semantic tokens directly, verify branded text and accent treatments after upgrading.
  • Restructured elevation color tokens under explicit color.background namespaces, added overlay backdrop, date picker segment focus, and generic track background tokens, and updated the default switch track color.
  • Deprecated the legacy semantic brand content tokens under content.brand-deprecated-* and removed several previously exported raw tokens, including primary knockout hover and active variants, transparent background aliases, and the cream knockout border token. Consumers reading token names directly from the CSS, JS, JSON, SCSS, or React Native outputs should update those references before upgrading.

Patch Changes

• #1919 8f9b50c Thanks @stevegreco! - Corrected exported dark green chip background token values across the design token outputs.
  • Updated the dark green chip background token for the navy theme to use the intended dark green value.
  • Updated the dark green subtle chip background token for the red and navy themes.
  • These changes flow through the package’s CSS, SCSS, JSON, JS, React Native, and theme exports without requiring adopter code changes.

0.0.9-beta.0

Patch Changes

• #1876 ac04fcd Thanks @stevegreco! - Synced tokens from Figma

  • Added new component level table tokens

• #1898 445af1c Thanks @stevegreco! - Synced latest destructive and negative semantic token values from Figma exports.

0.0.8

Patch Changes

• #1851 2558eeb Thanks @stevegreco! - Added new script to generate a combined themes.css file that contains both the red and navy themes

0.0.7

Patch Changes

• #1843 34ac035 Thanks @stevegreco! - - Updated mobile typography tokens
  • Added new semantic spacing tokens
  • Added tokens for the loading indicator

0.0.6

Patch Changes

• #1791 a33e243 Thanks @stevegreco! - Adjusted the tokens for React Native
  • Removed objects in favor of just return the numbers for spacing related tokens
  • Added px to the box-shadow tokens
  • Added composite tokens for box-shadow, this is an experimental feature

0.0.5

Patch Changes

• #1790 ee6bba5 Thanks @stevegreco! - Fixed issue with casing for the primitives.font-style-italic token, making it lowercase

0.0.4

Patch Changes

• #1784 aec6bb7 Thanks @stevegreco! - Fixed issue with build output

0.0.3

Patch Changes

• #1780 58a588a Thanks @stevegreco! - Fixed issues with exports

  • Updated json exports to use with instead of assert
  • Added file extensions to CSS/SCSS/JSON direct exports

• #1783 215db53 Thanks @stevegreco! - Updated types for js files to make them literals instead of primitive types

0.0.2

Patch Changes

• #1778 d6c9cde Thanks @stevegreco! - Initial deployment of the beta version of this package