@wordpress/theme 0.3.1-next.6deb34194.0 → 0.4.1-next.738bb1424.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 0.4.0-next.0 (2025-12-22)
+
+### New Features
+
+-   Expose `ThemeProvider` TypeScript type from package. While the component is still experimental, this makes it easier to use TypeScript typings in your code, which would otherwise be inaccessible. ([#74011](https://github.com/WordPress/gutenberg/pull/74011))

package/README.md

@@ -6,46 +6,110 @@ This package is still experimental. “Experimental” means this is an early im
 
 A theming package that's part of the WordPress Design System. It has two parts:
 
--   **Design Tokens**: A comprehensive system of design tokens for colors, spacing, typography, and more
--   **Theme System**: A flexible theming provider for consistent theming across applications
+-   **Design Tokens**: A comprehensive system of design tokens for colors, spacing, typography, and more.
+-   **Theme System**: A flexible theming provider for consistent theming across applications.
 
 ## Design Tokens
 
 In the **[Design Tokens Reference](docs/ds-tokens.md)** document there is a complete reference of all available design tokens including colors, spacing, typography, and more.
 
-### Color Tokens
+### Architecture
 
-The design system defines color tokens using the following naming scheme:
+Internally, the design system uses a tiered token architecture:
+
+- **Primitive tokens**: Raw values like hex colors or pixel dimensions which are what the browsers eventually interpret. These live in the `/tokens` directory as JSON source files and are an internal implementation detail.
+- **Semantic tokens**: Purpose-driven tokens with meaningful names that reference primitives and describe their intended use. These are what get exported as CSS custom properties.
+
+This separation allows the design system to maintain consistency while providing flexibility, since primitive values can be updated without changing the semantic token names that developers use in their code.
+
+### Design Tokens
+
+Design tokens are the visual design atoms of a design system. They are named entities that store visual design attributes like colors, spacing, typography, and shadows. They serve as a single source of truth that bridges design and development, ensuring consistency across platforms and making it easy to maintain and evolve the visual language of an application.
+
+Rather than hardcoding values like `#3858e9` or `16px` throughout your code, tokens provide semantic names like `--wpds-color-bg-interactive-brand-strong` or `--wpds-dimension-padding-surface-md` that describe the purpose and context of the value. This makes code more maintainable and allows the design system to evolve. When a token's value changes, all components using that token automatically reflect the update.
+
+#### Structure
+
+The design system follows the [Design Tokens Community Group (DTCG)](https://design-tokens.github.io/community-group/format/) specification and organizes tokens into distinct types based on what kind of visual property they represent. Token definitions are stored as JSON files in the `/tokens` directory:
+
+| File              | Description                                                                                                                      |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `color.json`      | Color palettes including primitive color ramps and semantic color tokens for backgrounds, foregrounds, strokes, and focus states |
+| `dimension.json`  | Spacing scale and semantic spacing tokens for padding, margins, and sizing                                                       |
+| `typography.json` | Font family stacks, font sizes, and line heights                                                                                 |
+| `border.json`     | Border radius and width values                                                                                                   |
+| `elevation.json`  | Shadow definitions for creating depth and layering                                                                               |
+
+Each JSON file contains both primitive and semantic token definitions in a hierarchical structure. These files are the source of truth for the design system and are processed during the build step to generate CSS custom properties and other output formats in `/src/prebuilt`.
+
+#### Token Naming
+
+Semantic tokens follow a consistent naming pattern:
 
 ```
---wpds-<element>-<tone>[-<emphasis>][-<state>]
+--wpds-<type>-<property>-<target>[-<modifier>]
 ```
 
-**Element** specifies what the color is applied to.
+**Type** indicates what kind of value it represents, usually mapping to a DTCG token type.
+
+| Value       | Description                                                                    |
+| ----------- | ------------------------------------------------------------------------------ |
+| `color`     | Color values for backgrounds, foregrounds, and strokes                         |
+| `dimension` | Spacing, sizing, and other measurable lengths (e.g., padding, margins, widths) |
+| `border`    | Border properties like radius and width                                        |
+| `elevation` | Shadow definitions for layering and depth                                      |
+| `font`      | Typography properties like family, size, and line-height                       |
+
+**Property** is the specific design property being defined.
 
-| Value                | Description                                                                                 |
-| -------------------- | ------------------------------------------------------------------------------------------- |
-| `bg-surface`         | Backgrounds of layout or container surfaces.                                                |
-| `bg-interactive`     | Backgrounds of interactive elements such as buttons, inputs, and toggles.                   |
-| `bg-track`           | Backgrounds of track components like scrollbars and slider tracks.                          |
-| `bg-thumb`           | Backgrounds of thumb components like scrollbar thumbs and slider thumbs.                    |
-| `fg-content`         | Foreground color for text and icons in static content.                                      |
-| `fg-interactive`     | Foreground color for text and icons in interactive elements such as links and buttons.      |
-| `stroke-surface`     | Decorative borders and dividers for non-interactive surfaces.                               |
-| `stroke-interactive` | Accessible borders for interactive controls.                                                |
-| `stroke-focus`       | Stroke color specifically for focus rings.                                                  |
+| Value    | Description                        |
+| -------- | ---------------------------------- |
+| `bg`     | Background color                   |
+| `fg`     | Foreground color (text and icons)  |
+| `stroke` | Border and outline color           |
+| `padding`| Internal spacing within an element |
+| `gap`    | Spacing between elements           |
+| `radius` | Border radius for rounded corners  |
+| `width`  | Border width                       |
+| `size`   | Font size                          |
+| `family` | Font family                        |
+
+**Target** is the component or element type the token applies to.
+
+| Value         | Description                                               |
+| ------------- | --------------------------------------------------------- |
+| `surface`     | Container or layout backgrounds and borders               |
+| `interactive` | Interactive elements like buttons, inputs, and controls   |
+| `content`     | Static content like text and icons                        |
+| `track`       | Track components like scrollbars and slider tracks        |
+| `thumb`       | Thumb components like scrollbar thumbs and slider handles |
+| `focus`       | Focus indicators and rings                                |
+
+**Modifier** is an optional size or intensity modifier.
+
+| Value                               | Description          |
+| ----------------------------------- | -------------------- |
+| `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | Size scale modifiers |
+
+#### Color Token Modifiers
+
+Color tokens extend the base pattern with additional modifiers for tone, emphasis, and state:
+
+```
+--wpds-color-<property>-<target>-<tone>[-<emphasis>][-<state>]
+```
 
 **Tone** defines the semantic intent of the color.
 
-| Value     | Description                                                                              |
-| --------- | ---------------------------------------------------------------------------------------- |
-| `neutral` | Neutrally toned UI elements.                                                             |
-| `brand`   | Brand-accented or primary action colors.                                                 |
-| `success` | Positive or completed states.                                                            |
-| `info`    | Informational or system-generated context.                                               |
-| `caution` | Heads-up or low-severity issues; “proceed carefully.”                                    |
-| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors. |
-| `error`   | Blocking issues, validation failures, or destructive actions.                            |
+| Value     | Description                                                                             |
+| --------- | --------------------------------------------------------------------------------------- |
+| `neutral` | Neutrally toned UI elements                                                             |
+| `brand`   | Brand-accented or primary action colors                                                 |
+| `success` | Positive or completed states                                                            |
+| `info`    | Informational or system-generated context                                               |
+| `caution` | Heads-up or low-severity issues; “proceed carefully”                                    |
+| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors |
+| `error`   | Blocking issues, validation failures, or destructive actions                            |
 
 > [!NOTE]
 > `caution` and `warning` represent two escalation levels of non-error severity.
@@ -53,17 +117,17 @@ The design system defines color tokens using the following naming scheme:
 
 **Emphasis** adjusts color strength relative to the base tone, if specified. The default is a normal emphasis.
 
-| Value                | Description                                 |
-| -------------------- | ------------------------------------------- |
-| `strong`             | Higher contrast and/or elevated emphasis.   |
-| `weak`               | Subtle variant for secondary or muted elements. |
+| Value                | Description                                    |
+| -------------------- | ---------------------------------------------- |
+| `strong`             | Higher contrast and/or elevated emphasis       |
+| `weak`               | Subtle variant for secondary or muted elements |
 
 **State** represents the interactive state of the element, if specified. The default is an idle state.
 
-| Value      | Description                              |
-| ---------- | ---------------------------------------- |
-| `active`   | Hovered, pressed, or selected state.     |
-| `disabled` | Unavailable or inoperable state.         |
+| Value      | Description                         |
+| ---------- | ----------------------------------- |
+| `active`   | Hovered, pressed, or selected state |
+| `disabled` | Unavailable or inoperable state     |
 
 ## Theme Provider
 
@@ -74,7 +138,7 @@ import { ThemeProvider } from '@wordpress/theme';
 
 function App() {
 	return (
-		<ThemeProvider color={ { primary: 'blue' } }>
+		<ThemeProvider color={ { primary: 'blue' } } density="compact">
 			{ /* Your app content */ }
 		</ThemeProvider>
 	);
@@ -83,11 +147,21 @@ function App() {
 
 The `color` prop accepts an object with the following optional properties:
 
--   `primary`: The primary/accent seed color (default: `'#3858e9'`)
--   `bg`: The background seed color (default: `'#f8f8f8'`)
+-   `primary`: The primary/accent seed color (default: `'#3858e9'`).
+-   `bg`: The background seed color (default: `'#f8f8f8'`).
 
 Both properties accept any valid CSS color value. The theme system automatically generates appropriate color ramps and determines light/dark mode based on these seed colors.
 
+The `density` prop controls the spacing scale throughout the UI:
+
+-   `'default'`: Standard spacing for general use.
+-   `'compact'`: Reduced spacing for information-dense interfaces like data tables or dashboards.
+-   `'comfortable'`: Increased spacing for focused experiences like modals, dialogs, or full-screen settings panels.
+
+The density setting adjusts dimension tokens like gaps and paddings to maintain consistent spacing throughout the UI. Changing the density automatically updates spacing of all components that use these tokens.
+
+When the `color` or `density` prop is omitted, the theme inherits the value from the closest parent `ThemeProvider`, or uses the default value if none is inherited.
+
 ### Nesting Providers
 
 The provider can be used recursively to override or modify the theme for a specific subtree.
@@ -95,10 +169,10 @@ The provider can be used recursively to override or modify the theme for a speci
 ```tsx
 <ThemeProvider color={ { bg: 'white' } }>
 	{ /* light-themed UI components */ }
-	<ThemeProvider color={ { bg: '#1e1e1e' } }>
-		{ /* dark-themed UI components */ }
+	<ThemeProvider color={ { bg: '#1e1e1e' } } density="compact">
+		{ /* dark-themed UI components with compact spacing */ }
 		<ThemeProvider color={ { primary: 'red' } }>
-			{ /* dark-themed with red accent */ }
+			{ /* dark-themed with red accent, inheriting compact density */ }
 		</ThemeProvider>
 	</ThemeProvider>
 	{ /* light-themed UI components */ }

package/build/color-ramps/{index.js → index.cjs}

@@ -26,13 +26,13 @@ __export(color_ramps_exports, {
 });
 module.exports = __toCommonJS(color_ramps_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./lib/register-color-spaces");
-var import_lib = require("./lib/index");
-var import_utils = require("./lib/utils");
-var import_ramp_configs = require("./lib/ramp-configs");
-var import_color_utils = require("./lib/color-utils");
-var import_constants = require("./lib/constants");
-var import_constants2 = require("./lib/constants");
+var import_register_color_spaces = require("./lib/register-color-spaces.cjs");
+var import_lib = require("./lib/index.cjs");
+var import_utils = require("./lib/utils.cjs");
+var import_ramp_configs = require("./lib/ramp-configs.cjs");
+var import_color_utils = require("./lib/color-utils.cjs");
+var import_constants = require("./lib/constants.cjs");
+var import_constants2 = require("./lib/constants.cjs");
 function buildBgRamp(seed) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");
@@ -115,4 +115,4 @@ function checkAccessibleCombinations({
   buildBgRamp,
   checkAccessibleCombinations
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/color-ramps/lib/{color-utils.js → color-utils.cjs}

@@ -25,7 +25,7 @@ __export(color_utils_exports, {
 });
 module.exports = __toCommonJS(color_utils_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
 function getColorString(color) {
   return (0, import_fn.serialize)((0, import_fn.to)(color, import_fn.sRGB), { format: "hex", inGamut: true });
 }
@@ -41,4 +41,4 @@ function clampToGamut(c) {
   getColorString,
   getContrast
 });
-//# sourceMappingURL=color-utils.js.map
+//# sourceMappingURL=color-utils.cjs.map

package/build/color-ramps/lib/{constants.js → constants.cjs}

@@ -31,7 +31,7 @@ __export(constants_exports, {
 });
 module.exports = __toCommonJS(constants_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
 var WHITE = (0, import_fn.to)("white", import_fn.OKLCH);
 var BLACK = (0, import_fn.to)("black", import_fn.OKLCH);
 var UNIVERSAL_CONTRAST_TOPUP = 0.02;
@@ -95,4 +95,4 @@ var DEFAULT_SEED_COLORS = {
   WHITE,
   WHITE_TEXT_CONTRAST_MARGIN
 });
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.cjs.map

package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs}

@@ -217,4 +217,4 @@ var DEFAULT_RAMPS = {
 0 && (module.exports = {
   DEFAULT_RAMPS
 });
-//# sourceMappingURL=default-ramps.js.map
+//# sourceMappingURL=default-ramps.cjs.map

package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs}

@@ -23,11 +23,11 @@ __export(find_color_with_constraints_exports, {
 });
 module.exports = __toCommonJS(find_color_with_constraints_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
-var import_utils = require("./utils");
-var import_constants = require("./constants");
-var import_color_utils = require("./color-utils");
-var import_taper_chroma = require("./taper-chroma");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
+var import_utils = require("./utils.cjs");
+var import_constants = require("./constants.cjs");
+var import_color_utils = require("./color-utils.cjs");
+var import_taper_chroma = require("./taper-chroma.cjs");
 function cdiff(c1, c2) {
   return Math.log(c1 / c2);
 }
@@ -107,4 +107,4 @@ function findColorMeetingRequirements(reference, seed, target, direction, {
 0 && (module.exports = {
   findColorMeetingRequirements
 });
-//# sourceMappingURL=find-color-with-constraints.js.map
+//# sourceMappingURL=find-color-with-constraints.cjs.map

package/build/color-ramps/lib/{index.js → index.cjs}

@@ -23,11 +23,11 @@ __export(lib_exports, {
 });
 module.exports = __toCommonJS(lib_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
-var import_color_utils = require("./color-utils");
-var import_find_color_with_constraints = require("./find-color-with-constraints");
-var import_utils = require("./utils");
-var import_constants = require("./constants");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
+var import_color_utils = require("./color-utils.cjs");
+var import_find_color_with_constraints = require("./find-color-with-constraints.cjs");
+var import_utils = require("./utils.cjs");
+var import_constants = require("./constants.cjs");
 function calculateRamp({
   seed,
   sortedSteps,
@@ -226,4 +226,4 @@ function buildRamp(seedArg, config, {
 0 && (module.exports = {
   buildRamp
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs}

@@ -313,4 +313,4 @@ var ACCENT_RAMP_CONFIG = {
   ACCENT_RAMP_CONFIG,
   BG_RAMP_CONFIG
 });
-//# sourceMappingURL=ramp-configs.js.map
+//# sourceMappingURL=ramp-configs.cjs.map

package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs}

@@ -4,4 +4,4 @@ import_fn.ColorSpace.register(import_fn.sRGB);
 import_fn.ColorSpace.register(import_fn.OKLCH);
 import_fn.ColorSpace.register(import_fn.P3);
 import_fn.ColorSpace.register(import_fn.HSL);
-//# sourceMappingURL=register-color-spaces.js.map
+//# sourceMappingURL=register-color-spaces.cjs.map

package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs}

@@ -23,7 +23,7 @@ __export(taper_chroma_exports, {
 });
 module.exports = __toCommonJS(taper_chroma_exports);
 var import_fn = require("colorjs.io/fn");
-var import_register_color_spaces = require("./register-color-spaces");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
 function taperChroma(seed, lTarget, options = {}) {
   const gamut = options.gamut ?? import_fn.sRGB;
   const alpha = options.alpha ?? 0.65;
@@ -138,4 +138,4 @@ function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
 0 && (module.exports = {
   taperChroma
 });
-//# sourceMappingURL=taper-chroma.js.map
+//# sourceMappingURL=taper-chroma.cjs.map

package/build/color-ramps/lib/{types.js → types.cjs}

@@ -15,4 +15,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/theme/src/color-ramps/lib/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.cjs.map

package/build/color-ramps/lib/{utils.js → utils.cjs}

@@ -27,9 +27,9 @@ __export(utils_exports, {
   stepsForStep: () => stepsForStep
 });
 module.exports = __toCommonJS(utils_exports);
-var import_register_color_spaces = require("./register-color-spaces");
-var import_constants = require("./constants");
-var import_color_utils = require("./color-utils");
+var import_register_color_spaces = require("./register-color-spaces.cjs");
+var import_constants = require("./constants.cjs");
+var import_color_utils = require("./color-utils.cjs");
 function buildDependencyGraph(config) {
   const dependencies = /* @__PURE__ */ new Map();
   const dependents = /* @__PURE__ */ new Map();
@@ -163,4 +163,4 @@ function solveWithBisect(calculateC, calculateValue, initLowerL, initLowerValue,
   sortByDependency,
   stepsForStep
 });
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.cjs.map

package/build/{context.js → context.cjs}

@@ -32,4 +32,4 @@ var ThemeContext = (0, import_element.createContext)({
 0 && (module.exports = {
   ThemeContext
 });
-//# sourceMappingURL=context.js.map
+//# sourceMappingURL=context.cjs.map

package/build/{index.js → index.cjs}

@@ -22,9 +22,9 @@ __export(index_exports, {
   privateApis: () => import_private_apis.privateApis
 });
 module.exports = __toCommonJS(index_exports);
-var import_private_apis = require("./private-apis");
+var import_private_apis = require("./private-apis.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   privateApis
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { privateApis } from './private-apis';\nexport type * from './prebuilt/ts/token-types';\nexport { type ThemeProvider } from './theme-provider';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;",
+  "names": []
+}

package/build/{lock-unlock.js → lock-unlock.cjs}

@@ -33,4 +33,4 @@ var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnl
   lock,
   unlock
 });
-//# sourceMappingURL=lock-unlock.js.map
+//# sourceMappingURL=lock-unlock.cjs.map

package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs}

@@ -64,6 +64,15 @@ var design_tokens_default = [
   "--wpds-color-bg-interactive-brand-weak",
   "--wpds-color-bg-interactive-brand-weak-active",
   "--wpds-color-bg-interactive-brand-weak-disabled",
+  "--wpds-color-bg-interactive-error",
+  "--wpds-color-bg-interactive-error-active",
+  "--wpds-color-bg-interactive-error-disabled",
+  "--wpds-color-bg-interactive-error-strong",
+  "--wpds-color-bg-interactive-error-strong-active",
+  "--wpds-color-bg-interactive-error-strong-disabled",
+  "--wpds-color-bg-interactive-error-weak",
+  "--wpds-color-bg-interactive-error-weak-active",
+  "--wpds-color-bg-interactive-error-weak-disabled",
   "--wpds-color-bg-track-neutral-weak",
   "--wpds-color-bg-track-neutral",
   "--wpds-color-bg-thumb-neutral-weak",
@@ -97,6 +106,12 @@ var design_tokens_default = [
   "--wpds-color-fg-interactive-brand-strong",
   "--wpds-color-fg-interactive-brand-strong-active",
   "--wpds-color-fg-interactive-brand-strong-disabled",
+  "--wpds-color-fg-interactive-error",
+  "--wpds-color-fg-interactive-error-active",
+  "--wpds-color-fg-interactive-error-disabled",
+  "--wpds-color-fg-interactive-error-strong",
+  "--wpds-color-fg-interactive-error-strong-active",
+  "--wpds-color-fg-interactive-error-strong-disabled",
   "--wpds-color-stroke-surface-neutral",
   "--wpds-color-stroke-surface-neutral-weak",
   "--wpds-color-stroke-surface-neutral-strong",
@@ -116,7 +131,8 @@ var design_tokens_default = [
   "--wpds-color-stroke-interactive-neutral-strong",
   "--wpds-color-stroke-interactive-brand",
   "--wpds-color-stroke-interactive-brand-active",
-  "--wpds-color-stroke-interactive-brand-disabled",
+  "--wpds-color-stroke-interactive-error",
+  "--wpds-color-stroke-interactive-error-active",
   "--wpds-color-stroke-interactive-error-strong",
   "--wpds-color-stroke-focus-brand",
   "--wpds-dimension-base",
@@ -151,4 +167,4 @@ var design_tokens_default = [
   "--wpds-font-line-height-x-large",
   "--wpds-font-line-height-2x-large"
 ];
-//# sourceMappingURL=design-tokens.js.map
+//# sourceMappingURL=design-tokens.cjs.map

package/build/prebuilt/js/design-tokens.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/prebuilt/js/design-tokens.js"],
+  "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-surface-xs',\n\t'--wpds-border-radius-surface-sm',\n\t'--wpds-border-radius-surface-md',\n\t'--wpds-border-radius-surface-lg',\n\t'--wpds-border-width-surface-xs',\n\t'--wpds-border-width-surface-sm',\n\t'--wpds-border-width-surface-md',\n\t'--wpds-border-width-surface-lg',\n\t'--wpds-border-width-interactive-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-disabled',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-strong-disabled',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-interactive-error-weak-disabled',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-brand-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-disabled',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-fg-interactive-error-strong-disabled',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\n];\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
+  "names": []
+}

package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs}

@@ -25,19 +25,19 @@ module.exports = __toCommonJS(color_tokens_exports);
 var color_tokens_default = {
   "primary-bgFill1": ["bg-interactive-brand-strong"],
   "primary-fgFill": [
-    "fg-interactive-brand-strong-active",
-    "fg-interactive-brand-strong"
+    "fg-interactive-brand-strong",
+    "fg-interactive-brand-strong-active"
   ],
   "primary-bgFill2": ["bg-interactive-brand-strong-active"],
   "primary-surface2": ["bg-interactive-brand-active"],
   "primary-surface4": ["bg-interactive-brand-weak-active"],
   "primary-fgSurface3": [
-    "fg-interactive-brand-active",
-    "fg-interactive-brand"
+    "fg-interactive-brand",
+    "fg-interactive-brand-active"
   ],
   "primary-stroke3": [
-    "bg-thumb-brand-active",
     "bg-thumb-brand",
+    "bg-thumb-brand-active",
     "stroke-focus-brand",
     "stroke-interactive-brand",
     "stroke-surface-brand-strong"
@@ -63,23 +63,44 @@ var color_tokens_default = {
   "warning-fgSurface3": ["fg-content-warning-weak"],
   "warning-stroke3": ["stroke-surface-warning-strong"],
   "warning-stroke1": ["stroke-surface-warning"],
-  "error-surface2": ["bg-surface-error-weak"],
-  "error-surface4": ["bg-surface-error"],
+  "error-bgFill1": ["bg-interactive-error-strong"],
+  "error-fgFill": [
+    "fg-interactive-error-strong",
+    "fg-interactive-error-strong-active"
+  ],
+  "error-bgFill2": ["bg-interactive-error-strong-active"],
+  "error-surface2": [
+    "bg-interactive-error-active",
+    "bg-surface-error-weak"
+  ],
+  "error-surface4": [
+    "bg-interactive-error-weak-active",
+    "bg-surface-error"
+  ],
   "error-fgSurface4": ["fg-content-error"],
-  "error-fgSurface3": ["fg-content-error-weak"],
+  "error-fgSurface3": [
+    "fg-content-error-weak",
+    "fg-interactive-error",
+    "fg-interactive-error-active"
+  ],
   "error-stroke3": [
+    "stroke-interactive-error",
     "stroke-interactive-error-strong",
     "stroke-surface-error-strong"
   ],
+  "error-stroke4": ["stroke-interactive-error-active"],
   "error-stroke1": ["stroke-surface-error"],
   "bg-surface2": ["bg-surface-neutral"],
   "bg-surface6": [
     "bg-interactive-brand-strong-disabled",
+    "bg-interactive-error-strong-disabled",
     "bg-interactive-neutral-strong-disabled"
   ],
   "bg-surface5": [
     "bg-interactive-brand-disabled",
     "bg-interactive-brand-weak-disabled",
+    "bg-interactive-error-disabled",
+    "bg-interactive-error-weak-disabled",
     "bg-interactive-neutral-disabled",
     "bg-interactive-neutral-weak-disabled"
   ],
@@ -90,17 +111,19 @@ var color_tokens_default = {
   "bg-surface3": ["bg-surface-neutral-strong"],
   "bg-fgSurface4": [
     "fg-content-neutral",
-    "fg-interactive-neutral-active",
-    "fg-interactive-neutral"
+    "fg-interactive-neutral",
+    "fg-interactive-neutral-active"
   ],
   "bg-fgSurface3": [
     "fg-content-neutral-weak",
     "fg-interactive-brand-strong-disabled",
+    "fg-interactive-error-strong-disabled",
     "fg-interactive-neutral-strong-disabled",
     "fg-interactive-neutral-weak"
   ],
   "bg-fgSurface2": [
     "fg-interactive-brand-disabled",
+    "fg-interactive-error-disabled",
     "fg-interactive-neutral-disabled",
     "fg-interactive-neutral-weak-disabled"
   ],
@@ -117,7 +140,6 @@ var color_tokens_default = {
   "bg-stroke2": [
     "bg-thumb-brand-disabled",
     "bg-track-neutral",
-    "stroke-interactive-brand-disabled",
     "stroke-interactive-neutral-disabled",
     "stroke-surface-neutral"
   ],
@@ -125,8 +147,8 @@ var color_tokens_default = {
   "bg-bgFillInverted2": ["bg-interactive-neutral-strong-active"],
   "bg-bgFillInverted1": ["bg-interactive-neutral-strong"],
   "bg-fgFillInverted": [
-    "fg-interactive-neutral-strong-active",
-    "fg-interactive-neutral-strong"
+    "fg-interactive-neutral-strong",
+    "fg-interactive-neutral-strong-active"
   ],
   "bg-surface1": ["bg-surface-neutral-weak"],
   "caution-surface2": ["bg-surface-caution-weak"],
@@ -134,4 +156,4 @@ var color_tokens_default = {
   "caution-fgSurface4": ["fg-content-caution"],
   "caution-fgSurface3": ["fg-content-caution-weak"]
 };
-//# sourceMappingURL=color-tokens.js.map
+//# sourceMappingURL=color-tokens.cjs.map