@workday/canvas-tokens-web 4.3.0-beta.2 → 4.3.0

package/dist/common-js/component/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 22:00:59 GMT
+ * Generated on Tue, 28 Apr 2026 18:05:05 GMT
  */
 
 "use strict";
@@ -34,3 +34,33 @@ exports.systemIcon = {
     "xl": "--cnvs-component-system-icon-size-xl"
   }
 };
+exports.legacy = {
+  "expressiveIcon": {
+    "color": {
+      "accent": "var(--cnvs-component-expressive-icon-color-accent, oklch(0.0847 0 0 / 0.17))",
+      "fill": "var(--cnvs-component-expressive-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))"
+    },
+    "size": {
+      "xs": "var(--cnvs-component-expressive-icon-size-xs, var(--cnvs-sys-space-x10, 2.5rem))",
+      "sm": "var(--cnvs-component-expressive-icon-size-sm, 3rem)",
+      "md": "var(--cnvs-component-expressive-icon-size-md, var(--cnvs-sys-space-x14, 3.5rem))",
+      "lg": "var(--cnvs-component-expressive-icon-size-lg, var(--cnvs-sys-space-x16, 4rem))",
+      "xl": "var(--cnvs-component-expressive-icon-size-xl, 6rem)"
+    }
+  },
+  "systemIcon": {
+    "color": {
+      "accent": "var(--cnvs-component-system-icon-color-accent, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))",
+      "fill": "var(--cnvs-component-system-icon-color-fill, var(--cnvs-sys-color-fg-default, oklch(0.3523 0 0 / 1)))",
+      "background": "var(--cnvs-component-system-icon-color-background, transparent)"
+    },
+    "size": {
+      "xxs": "var(--cnvs-component-system-icon-size-xxs, 0.875rem)",
+      "xs": "var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem))",
+      "sm": "var(--cnvs-component-system-icon-size-sm, 1.125rem)",
+      "md": "var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem))",
+      "lg": "var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem))",
+      "xl": "var(--cnvs-component-system-icon-size-xl, var(--cnvs-sys-space-x8, 2rem))"
+    }
+  }
+};

package/dist/common-js/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 22:00:59 GMT
+ * Generated on Tue, 28 Apr 2026 18:05:05 GMT
  */
 
 import * as base from "./base";

package/dist/common-js/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 22:00:59 GMT
+ * Generated on Tue, 28 Apr 2026 18:05:05 GMT
  */
 
 "use strict";

package/dist/common-js/system/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 22:00:59 GMT
+ * Generated on Tue, 28 Apr 2026 18:05:05 GMT
  */
 
 export declare const breakpoints: {
@@ -295,9 +295,9 @@ export declare const space: {
    * 
    * **CSS Var**: `--cnvs-sys-space-x6`
    * 
-   * • Padding around card content
-   * • Related elements where more space between them can be afforded
-   * • Separate section headings or titles from body text or inputs
+   * - Padding around card content
+   * - Related elements where more space between them can be afforded
+   * - Separate section headings or titles from body text or inputs
    * 
    * @deprecated Use semantic padding and gap values instead
    */
@@ -307,9 +307,9 @@ export declare const space: {
    * 
    * **CSS Var**: `--cnvs-sys-space-x8`
    * 
-   * • Standard spacing between cards
-   * • Used to separate groups of content 
-   * • Separate section headings or titles from body text or inputs
+   * - Standard spacing between cards
+   * - Used to separate groups of content 
+   * - Separate section headings or titles from body text or inputs
    * 
    * @deprecated Use semantic padding and gap values instead
    */
@@ -319,8 +319,8 @@ export declare const space: {
    * 
    * **CSS Var**: `--cnvs-sys-space-x10`
    * 
-   * • Used for outer margins on the overall page content 
-   * • Used for inner margins on large items such as page sections
+   * - Used for outer margins on the overall page content 
+   * - Used for inner margins on large items such as page sections
    * 
    * @deprecated Use semantic padding and gap values instead
    */
@@ -4419,7 +4419,7 @@ export declare const opacity: {
    */
   "zero": "--cnvs-sys-opacity-zero",
   /**
-   * **value**: `{base.opacity.400}` (40rem | 640px)
+   * **value**: `{base.opacity.400}` (0.4rem | 6.4px)
    * 
    * **CSS Var**: `--cnvs-sys-opacity-disabled`
    * 
@@ -4427,7 +4427,7 @@ export declare const opacity: {
    */
   "disabled": "--cnvs-sys-opacity-disabled",
   /**
-   * **value**: `{base.opacity.640}` (64rem | 1024px)
+   * **value**: `{base.opacity.640}` (0.64rem | 10.24px)
    * 
    * **CSS Var**: `--cnvs-sys-opacity-overlay`
    * 
@@ -4435,7 +4435,7 @@ export declare const opacity: {
    */
   "overlay": "--cnvs-sys-opacity-overlay",
   /**
-   * **value**: `{base.opacity.840}` (84rem | 1344px)
+   * **value**: `{base.opacity.840}` (0.84rem | 13.44px)
    * 
    * **CSS Var**: `--cnvs-sys-opacity-contrast`
    * 
@@ -4452,7 +4452,7 @@ export declare const opacity: {
   "full": "--cnvs-sys-opacity-full",
   "shadow": {
     /**
-     * **value**: `{base.opacity.120}` (12rem | 192px)
+     * **value**: `{base.opacity.120}` (0.12rem | 1.92px)
      * 
      * **CSS Var**: `--cnvs-sys-opacity-shadow-first`
      * 
@@ -4460,7 +4460,7 @@ export declare const opacity: {
      */
     "first": "--cnvs-sys-opacity-shadow-first",
     /**
-     * **value**: `{base.opacity.80}` (8rem | 128px)
+     * **value**: `{base.opacity.80}` (0.08rem | 1.28px)
      * 
      * **CSS Var**: `--cnvs-sys-opacity-shadow-second`
      * 
@@ -4470,7 +4470,7 @@ export declare const opacity: {
   },
   "surface": {
     /**
-     * **value**: `{base.opacity.100}` (8rem | 128px)
+     * **value**: `{base.opacity.100}` (0.08rem | 1.28px)
      * 
      * **CSS Var**: `--cnvs-sys-opacity-surface-hover`
      * 
@@ -4478,7 +4478,7 @@ export declare const opacity: {
      */
     "hover": "--cnvs-sys-opacity-surface-hover",
     /**
-     * **value**: `{base.opacity.180}` (18rem | 288px)
+     * **value**: `{base.opacity.180}` (0.18rem | 2.88px)
      * 
      * **CSS Var**: `--cnvs-sys-opacity-surface-pressed`
      * 
@@ -4488,7 +4488,7 @@ export declare const opacity: {
   },
   "accent": {
     /**
-     * **value**: `{base.opacity.180}` (18rem | 288px)
+     * **value**: `{base.opacity.180}` (0.18rem | 2.88px)
      * 
      * **CSS Var**: `--cnvs-sys-opacity-accent-hover`
      * 
@@ -4496,7 +4496,7 @@ export declare const opacity: {
      */
     "hover": "--cnvs-sys-opacity-accent-hover",
     /**
-     * **value**: `{base.opacity.360}` (36rem | 576px)
+     * **value**: `{base.opacity.360}` (0.36rem | 5.76px)
      * 
      * **CSS Var**: `--cnvs-sys-opacity-accent-pressed`
      * 
@@ -4775,3 +4775,376 @@ export declare const fontWeight: {
    */
   "bold": "--cnvs-sys-font-weight-bold",
 };
+
+/**
+ * Temporary legacy object including fallback values to older versions of the tokens
+ * for internal use only, will be removed in the future
+ */
+export declare const legacy: {
+  "breakpoints": {
+    "sm": "var(--cnvs-sys-breakpoints-sm, var(--cnvs-sys-breakpoints-s, 320px))",
+    "md": "var(--cnvs-sys-breakpoints-md, var(--cnvs-sys-breakpoints-m, 768px))",
+    "lg": "var(--cnvs-sys-breakpoints-lg, var(--cnvs-sys-breakpoints-l, 1024px))"
+  },
+  "shape": {
+    "none": "var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0))",
+    "sm": "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem))",
+    "md": "var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem))",
+    "lg": "var(--cnvs-sys-shape-lg, 0.75rem)",
+    "xl": "var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem))",
+    "xxl": "var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem))",
+    "xxxl": "var(--cnvs-sys-shape-xxxl, 2rem)",
+    "full": "var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem))"
+  },
+  "fontSize": {
+    "subtext": {
+      "sm": "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))",
+      "md": "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))",
+      "lg": "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))"
+    },
+    "body": {
+      "sm": "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))",
+      "md": "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))",
+      "lg": "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))"
+    },
+    "heading": {
+      "sm": "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))",
+      "md": "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))",
+      "lg": "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))"
+    },
+    "title": {
+      "sm": "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))",
+      "md": "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))",
+      "lg": "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))"
+    }
+  },
+  "lineHeight": {
+    "subtext": {
+      "sm": "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))",
+      "md": "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))",
+      "lg": "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))"
+    },
+    "body": {
+      "sm": "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))",
+      "md": "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))",
+      "lg": "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))"
+    },
+    "heading": {
+      "sm": "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))",
+      "md": "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))",
+      "lg": "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))"
+    },
+    "title": {
+      "sm": "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))",
+      "md": "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))",
+      "lg": "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))"
+    }
+  },
+  "type": {
+    "subtext": {
+      "sm": {
+        "fontFamily": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
+        "fontWeight": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
+        "lineHeight": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
+        "fontSize": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))",
+        "letterSpacing": "var(--cnvs-sys-type-subtext-sm, var(--cnvs-sys-type-subtext-small))"
+      },
+      "md": {
+        "fontFamily": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
+        "fontWeight": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
+        "lineHeight": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
+        "fontSize": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))",
+        "letterSpacing": "var(--cnvs-sys-type-subtext-md, var(--cnvs-sys-type-subtext-medium))"
+      },
+      "lg": {
+        "fontFamily": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
+        "fontWeight": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
+        "lineHeight": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
+        "fontSize": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))",
+        "letterSpacing": "var(--cnvs-sys-type-subtext-lg, var(--cnvs-sys-type-subtext-large))"
+      }
+    },
+    "body": {
+      "sm": {
+        "fontFamily": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
+        "fontWeight": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
+        "lineHeight": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
+        "fontSize": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))",
+        "letterSpacing": "var(--cnvs-sys-type-body-sm, var(--cnvs-sys-type-body-small))"
+      },
+      "md": {
+        "fontFamily": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))",
+        "fontWeight": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))",
+        "lineHeight": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))",
+        "fontSize": "var(--cnvs-sys-type-body-md, var(--cnvs-sys-type-body-medium))"
+      },
+      "lg": {
+        "fontFamily": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))",
+        "fontWeight": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))",
+        "lineHeight": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))",
+        "fontSize": "var(--cnvs-sys-type-body-lg, var(--cnvs-sys-type-body-large))"
+      }
+    },
+    "heading": {
+      "sm": {
+        "fontFamily": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))",
+        "fontWeight": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))",
+        "lineHeight": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))",
+        "fontSize": "var(--cnvs-sys-type-heading-sm, var(--cnvs-sys-type-heading-small))"
+      },
+      "md": {
+        "fontFamily": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))",
+        "fontWeight": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))",
+        "lineHeight": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))",
+        "fontSize": "var(--cnvs-sys-type-heading-md, var(--cnvs-sys-type-heading-medium))"
+      },
+      "lg": {
+        "fontFamily": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))",
+        "fontWeight": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))",
+        "lineHeight": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))",
+        "fontSize": "var(--cnvs-sys-type-heading-lg, var(--cnvs-sys-type-heading-large))"
+      }
+    },
+    "title": {
+      "sm": {
+        "fontFamily": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))",
+        "fontWeight": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))",
+        "lineHeight": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))",
+        "fontSize": "var(--cnvs-sys-type-title-sm, var(--cnvs-sys-type-title-small))"
+      },
+      "md": {
+        "fontFamily": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))",
+        "fontWeight": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))",
+        "lineHeight": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))",
+        "fontSize": "var(--cnvs-sys-type-title-md, var(--cnvs-sys-type-title-medium))"
+      },
+      "lg": {
+        "fontFamily": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))",
+        "fontWeight": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))",
+        "lineHeight": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))",
+        "fontSize": "var(--cnvs-sys-type-title-lg, var(--cnvs-sys-type-title-large))"
+      }
+    }
+  },
+  "color": {
+    "fg": {
+      "info": {
+        "default": "var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)))",
+        "strong": "var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)))"
+      },
+      "danger": {
+        "default": "var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))",
+        "strong": "var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)))"
+      },
+      "warning": {
+        "default": "var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1))",
+        "strong": "var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1))"
+      },
+      "success": {
+        "default": "var(--cnvs-sys-color-fg-success-default, oklch(0.5069 0.1569 145.56 / 1))",
+        "strong": "var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1))"
+      }
+    },
+    "border": {
+      "input": {
+        "hover": "var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)))"
+      },
+      "default": "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))",
+      "strong": "var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)))",
+      "info": {
+        "default": "var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)))"
+      },
+      "danger": "var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)))",
+      "warning": "var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)))",
+      "inverse": {
+        "default": "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))",
+        "strong": "var(--cnvs-sys-color-border-inverse-strong, oklch(1 0 0 / 0.67))"
+      }
+    },
+    "shadow": {
+      "base": "var(--cnvs-sys-color-shadow-base, oklch(0.3057 0.079 256.22 / 0.13))",
+      "ambient": "var(--cnvs-sys-color-shadow-ambient, oklch(0.3337 0.0688 250.79 / 0.09))"
+    },
+    "surface": {
+      "default": "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
+      "navigation": "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))",
+      "popover": "var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
+      "modal": "var(--cnvs-sys-color-surface-modal, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
+      "raised": "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))",
+      "alt": {
+        "default": "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))",
+        "strong": "var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)))"
+      },
+      "loading": "var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13))",
+      "info": {
+        "default": "var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)))",
+        "strong": "var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)))"
+      },
+      "danger": {
+        "default": "var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04))",
+        "strong": "var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1))"
+      },
+      "warning": {
+        "default": "var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)))",
+        "strong": "var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)))"
+      },
+      "success": {
+        "default": "var(--cnvs-sys-color-surface-success-default, oklch(0.8695 0.2801 143.52 / 0.08))",
+        "strong": "var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15))"
+      },
+      "ai": {
+        "default": "var(--cnvs-sys-color-surface-ai-default, var(--cnvs-sys-color-bg-ai-default, oklch(0.6225 0.2064 255.9 / 0.17)))",
+        "hover": "var(--cnvs-sys-color-surface-ai-hover, var(--cnvs-sys-color-bg-ai-strong, oklch(0.6048 0.2166 257.21 / 0.31)))",
+        "pressed": "var(--cnvs-sys-color-surface-ai-pressed, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.708 0.1549 255.41 / 1)))"
+      },
+      "transparent": "var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)))",
+      "inverse": "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))",
+      "contrast": {
+        "default": "var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)))",
+        "strong": "var(--cnvs-sys-color-surface-contrast-strong, var(--cnvs-sys-color-bg-contrast-strong, oklch(0.0672 0 0 / 0.89)))"
+      },
+      "overlay": {
+        "hover": {
+          "default": "var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05))",
+          "inverse": "var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16))"
+        },
+        "mixin": "var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1))",
+        "pressed": {
+          "default": "var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09))",
+          "inverse": "var(--cnvs-sys-color-surface-overlay-pressed-inverse, oklch(1 0 0 / 0.26))"
+        },
+        "scrim": "var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36))"
+      }
+    },
+    "accent": {
+      "ai": "var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)))",
+      "info": "var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)))",
+      "danger": "var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)))",
+      "warning": "var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1))",
+      "success": "var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)))",
+      "contrast": "var(--cnvs-sys-color-accent-contrast, oklch(0.0969 0 0 / 0.84))",
+      "muted": {
+        "default": "var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)))",
+        "soft": "var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)))"
+      },
+      "overlay": {
+        "hover": "var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17))",
+        "pressed": "var(--cnvs-sys-color-accent-overlay-pressed, oklch(0.0847 0 0 / 0.36))",
+        "mixin": "var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1))"
+      }
+    },
+    "brand": {
+      "focus": {
+        "primary": "var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)))",
+        "critical": "var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)))",
+        "caution": {
+          "outer": "var(--cnvs-sys-color-brand-focus-caution-outer, var(--cnvs-brand-common-alert-outer, oklch(0.6601 0.1537 60.7 / 1)))",
+          "inner": "var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)))"
+        }
+      },
+      "surface": {
+        "primary": {
+          "default": "var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08))",
+          "strong": "var(--cnvs-sys-color-brand-surface-primary-strong, oklch(0.6152 0.2108 256.1 / 0.11))"
+        },
+        "critical": {
+          "default": "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))",
+          "strong": "var(--cnvs-sys-color-brand-surface-critical-strong, oklch(0.6434 0.2428 30.17 / 0.1))"
+        },
+        "caution": {
+          "default": "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))",
+          "strong": "var(--cnvs-sys-color-brand-surface-caution-strong, oklch(0.8864 0.1845 100.28 / 0.22))"
+        },
+        "positive": {
+          "default": "var(--cnvs-sys-color-brand-surface-positive-default, oklch(0.8695 0.2801 143.52 / 0.08))",
+          "strong": "var(--cnvs-sys-color-brand-surface-positive-strong, oklch(0.8685 0.2814 143.77 / 0.15))"
+        },
+        "selected": "var(--cnvs-sys-color-brand-surface-selected, oklch(0.6152 0.2108 256.1 / 0.11))"
+      },
+      "accent": {
+        "primary": "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))",
+        "critical": "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))",
+        "caution": "var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1))",
+        "positive": "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))",
+        "action": "var(--cnvs-sys-color-brand-accent-action, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))"
+      },
+      "fg": {
+        "primary": {
+          "default": "var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))",
+          "strong": "var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)))"
+        },
+        "critical": {
+          "default": "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))",
+          "strong": "var(--cnvs-sys-color-brand-fg-critical-strong, var(--cnvs-brand-error-dark, oklch(0.4517 0.1847 28.2 / 1)))"
+        },
+        "caution": {
+          "default": "var(--cnvs-sys-color-brand-fg-caution-default, var(--cnvs-brand-alert-darkest, oklch(0.5505 0.1439 50.78 / 1)))",
+          "strong": "var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1))"
+        },
+        "positive": {
+          "default": "var(--cnvs-sys-color-brand-fg-positive-default, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))",
+          "strong": "var(--cnvs-sys-color-brand-fg-positive-strong, var(--cnvs-brand-success-dark, oklch(0.4463 0.1422 144.58 / 1)))"
+        },
+        "selected": "var(--cnvs-sys-color-brand-fg-selected, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)))"
+      },
+      "border": {
+        "primary": "var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1))",
+        "critical": "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))",
+        "caution": "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))"
+      }
+    },
+    "focus": {
+      "inverse": "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))",
+      "contrast": "var(--cnvs-sys-color-focus-contrast, oklch(0.0969 0 0 / 0.84))"
+    }
+  },
+  "opacity": {
+    "surface": {
+      "hover": "var(--cnvs-sys-opacity-surface-hover, 0.08)",
+      "pressed": "var(--cnvs-sys-opacity-surface-pressed, 0.18)"
+    },
+    "accent": {
+      "hover": "var(--cnvs-sys-opacity-accent-hover, 0.18)",
+      "pressed": "var(--cnvs-sys-opacity-accent-pressed, 0.36)"
+    }
+  },
+  "size": {
+    "xxxs": "var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem))",
+    "xxs": "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem))",
+    "xs": "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))",
+    "sm": "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))",
+    "md": "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))",
+    "lg": "var(--cnvs-sys-size-lg, 3rem)",
+    "xl": "var(--cnvs-sys-size-xl, var(--cnvs-sys-space-x14, 3.5rem))",
+    "xxl": "var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem))"
+  },
+  "padding": {
+    "none": "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0))",
+    "xxs": "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))",
+    "xs": "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem))",
+    "sm": "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem))",
+    "md": "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem))",
+    "lg": "var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem))",
+    "xl": "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem))",
+    "xxl": "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem))"
+  },
+  "gap": {
+    "none": "var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0))",
+    "xs": "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))",
+    "sm": "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem))",
+    "md": "var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem))",
+    "lg": "var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem))",
+    "xl": "var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem))",
+    "xxl": "var(--cnvs-sys-gap-xxl, var(--cnvs-sys-space-x16, 4rem))"
+  },
+  "letterSpacing": {
+    "subtext": {
+      "sm": "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))",
+      "md": "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))",
+      "lg": "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))"
+    },
+    "body": {
+      "sm": "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))"
+    }
+  }
+};