@workday/canvas-tokens-web 3.1.0 → 3.1.2

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

@@ -1,526 +1,329 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Sep 2025 19:25:22 GMT
+ * Generated on Thu, 25 Sep 2025 15:42:08 GMT
  */
 
-export declare const breakpoints: {
-  /**
-   * 0
-   * 
-   * token: 0
-   * 
-   * Use to set a media query `min-width` below small.
-   */
-  "zero": "--cnvs-sys-breakpoints-zero",
-  /**
-   * 20rem (320px)
-   * 
-   * token: {base.unit} * 80
-   * 
-   * The `min-width` for mobile devices, such as phones and tablets.
-   */
-  "s": "--cnvs-sys-breakpoints-s",
-  /**
-   * 48rem (768px)
-   * 
-   * token: {base.unit} * 192
-   * 
-   * Medium screens, such as laptops.
-   */
-  "m": "--cnvs-sys-breakpoints-m",
-  /**
-   * 64rem (1024px)
-   * 
-   * token: {base.unit} * 256
-   * 
-   * Large screens, such as desktops.
-   */
-  "l": "--cnvs-sys-breakpoints-l",
-  /**
-   * 90rem (1440px)
-   * 
-   * token: {base.unit} * 360
-   * 
-   * Used for extra large screens, such as wide monitors and TVs.
-   */
-  "xl": "--cnvs-sys-breakpoints-xl",
-};
-
-export declare const depth: {
-  /**
-   * 0 0.0625rem 0.25rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.125rem 0.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-   * 
-   * 
-   * 
-   * Standard card depth
-   */
-  "1": "--cnvs-sys-depth-1",
-  /**
-   * 0 0.125rem 0.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.25rem 1rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-   * 
-   * 
-   * 
-   * Top navigation, Bottom Navigation
-   */
-  "2": "--cnvs-sys-depth-2",
-  /**
-   * 0 0.1875rem 0.75rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.375rem 1.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-   * 
-   * 
-   * 
-   * Floating Action Buttons (FAB), Menus
-   */
-  "3": "--cnvs-sys-depth-3",
-  /**
-   * 0 0.25rem 1rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.5rem 2rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-   * 
-   * 
-   * 
-   * Bottom Sheets
-   */
-  "4": "--cnvs-sys-depth-4",
-  /**
-   * 0 0.3125rem 1.25rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.625rem 2.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-   * 
-   * 
-   * 
-   * Banners, Snackbars, Toast Messages, Non modal Dialogs, 
-   * Side Panels (when opacity overlay behaviour is not applied)
-   */
-  "5": "--cnvs-sys-depth-5",
-  /**
-   * 0 0.375rem 1.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.75rem 3rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-   * 
-   * 
-   * 
-   * Modal Dialogs, Side Panels (when opacity overlay behaviour
-   * is applied)
-   */
-  "6": "--cnvs-sys-depth-6",
-};
-
-export declare const opacity: {
-  /**
-   * 0
-   * 
-   * token: 0
-   * 
-   * Dev only
-   */
-  "zero": "--cnvs-sys-opacity-zero",
-  /**
-   * 0.4
-   * 
-   * token: base.opacity.300
-   * 
-   * Disabled states
-   */
-  "disabled": "--cnvs-sys-opacity-disabled",
-  /**
-   * 0.64
-   * 
-   * token: base.opacity.400
-   * 
-   * Overlay
-   */
-  "overlay": "--cnvs-sys-opacity-overlay",
-  /**
-   * 0.84
-   * 
-   * token: base.opacity.500
-   * 
-   * Tooltips, Status Indicator
-   */
-  "contrast": "--cnvs-sys-opacity-contrast",
-  /**
-   * 1
-   * 
-   * token: 1
-   * 
-   * Dev only
-   */
-  "full": "--cnvs-sys-opacity-full",
-  "shadow": {
-    /**
-     * 0.12
-     * 
-     * token: base.opacity.200
-     * 
-     * Alpha on first shadow
-     */
-    "first": "--cnvs-sys-opacity-shadow-first",
-    /**
-     * 0.08
-     * 
-     * token: base.opacity.100
-     * 
-     * Alpha on second shadow
-     */
-    "second": "--cnvs-sys-opacity-shadow-second",
-  },
-};
-
-export declare const shape: {
-  /**
-   * 0rem
-   * 
-   * token: 0rem
-   * 
-   * This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
-   */
-  "zero": "--cnvs-sys-shape-zero",
-  /**
-   * 0.125rem (2px)
-   * 
-   * token: {base.unit} * 0.5
-   * 
-   * Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
-   */
-  "half": "--cnvs-sys-shape-half",
-  /** 0.25rem (4px) */
-  "x1": "--cnvs-sys-shape-x1",
-  /** 0.375rem (6px) */
-  "x1Half": "--cnvs-sys-shape-x1-half",
-  /**
-   * 0.5rem (8px)
-   * 
-   * token: {base.unit} * 2
-   * 
-   * Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
-   */
-  "x2": "--cnvs-sys-shape-x2",
-  /**
-   * 62.5rem (1000px)
-   * 
-   * token: {base.unit} * 250
-   * 
-   * Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
-   */
-  "round": "--cnvs-sys-shape-round",
-};
-
-export declare const space: {
-  /**
-   * 0
-   * 
-   * token: 0
-   * 
-   * Stacks, rows in tables
-   */
-  "zero": "--cnvs-sys-space-zero",
-  /**
-   * 0.25rem (4px)
-   * 
-   * token: base.unit
-   * 
-   * Compact spacing between text or icons
-   */
-  "x1": "--cnvs-sys-space-x1",
-  /**
-   * 0.5rem (8px)
-   * 
-   * token: {base.unit} * 2
-   * 
-   * Commonly used to group compact elements like icon buttons
-   */
-  "x2": "--cnvs-sys-space-x2",
-  /**
-   * 0.75rem (12px)
-   * 
-   * token: {base.unit} * 3
-   * 
-   * Use when compact padding is required
-   */
-  "x3": "--cnvs-sys-space-x3",
-  /**
-   * 1rem (16px)
-   * 
-   * token: {base.unit} * 4
-   * 
-   * Default space token. Used to group Inputs with related data
-   */
-  "x4": "--cnvs-sys-space-x4",
-  /**
-   * 1.5rem (24px)
-   * 
-   * token: {base.unit} * 6
-   * 
-   * • Padding around card content
-   * • Related elements where more space between them can be afforded
-   * • Separate section headings or titles from body text or inputs
-   */
-  "x6": "--cnvs-sys-space-x6",
-  /**
-   * 2rem (32px)
-   * 
-   * token: {base.unit} * 8
-   * 
-   * • Standard spacing between cards
-   * • Used to separate groups of content 
-   * • Separate section headings or titles from body text or inputs
-   */
-  "x8": "--cnvs-sys-space-x8",
-  /**
-   * 2.5rem (40px)
-   * 
-   * token: {base.unit} * 10
-   * 
-   * • Used for outer margins on the overall page content 
-   * • Used for inner margins on large items such as page sections
-   */
-  "x10": "--cnvs-sys-space-x10",
-  /**
-   * 4rem (64px)
-   * 
-   * token: {base.unit} * 16
-   * 
-   * - Use to de-clutter your UI when a lot of space is available
-   * - Separate banner sections from page content
-   * - Use to differentiate page content like page sections
-   */
-  "x16": "--cnvs-sys-space-x16",
-  /**
-   * 5rem (80px)
-   * 
-   * token: {base.unit} * 20
-   * 
-   * - Use sparingly
-   * - Helps to put focus on the primary element within your page
-   * - Use to de-clutter your UI when a lot of space is available
-   */
-  "x20": "--cnvs-sys-space-x20",
-};
-
-export declare const fontFamily: {
-  /** Roboto */
-  "default": "--cnvs-sys-font-family-default",
-  /** Roboto Mono */
-  "mono": "--cnvs-sys-font-family-mono",
-  /** Noto Sans */
-  "global": "--cnvs-sys-font-family-global",
-};
-
-export declare const fontSize: {
-  "subtext": {
-    /** 0.625rem (10px) */
-    "small": "--cnvs-sys-font-size-subtext-small",
-    /** 0.75rem (12px) */
-    "medium": "--cnvs-sys-font-size-subtext-medium",
-    /** 0.875rem (14px) */
-    "large": "--cnvs-sys-font-size-subtext-large",
-  },
-  "body": {
-    /** 1rem (16px) */
-    "small": "--cnvs-sys-font-size-body-small",
-    /** 1.125rem (18px) */
-    "medium": "--cnvs-sys-font-size-body-medium",
-    /** 1.25rem (20px) */
-    "large": "--cnvs-sys-font-size-body-large",
-  },
-  "heading": {
-    /** 1.5rem (24px) */
-    "small": "--cnvs-sys-font-size-heading-small",
-    /** 1.75rem (28px) */
-    "medium": "--cnvs-sys-font-size-heading-medium",
-    /** 2rem (32px) */
-    "large": "--cnvs-sys-font-size-heading-large",
-  },
-  "title": {
-    /** 2.5rem (40px) */
-    "small": "--cnvs-sys-font-size-title-small",
-    /** 3rem (48px) */
-    "medium": "--cnvs-sys-font-size-title-medium",
-    /** 3.5rem (56px) */
-    "large": "--cnvs-sys-font-size-title-large",
-  },
-};
-
-export declare const lineHeight: {
-  "subtext": {
-    /** 16 */
-    "small": "--cnvs-sys-line-height-subtext-small",
-    /** 16 */
-    "medium": "--cnvs-sys-line-height-subtext-medium",
-    /** 20 */
-    "large": "--cnvs-sys-line-height-subtext-large",
-  },
-  "body": {
-    /** 24 */
-    "small": "--cnvs-sys-line-height-body-small",
-    /** 28 */
-    "medium": "--cnvs-sys-line-height-body-medium",
-    /** 28 */
-    "large": "--cnvs-sys-line-height-body-large",
-  },
-  "heading": {
-    /** 32 */
-    "small": "--cnvs-sys-line-height-heading-small",
-    /** 36 */
-    "medium": "--cnvs-sys-line-height-heading-medium",
-    /** 40 */
-    "large": "--cnvs-sys-line-height-heading-large",
-  },
-  "title": {
-    /** 48 */
-    "small": "--cnvs-sys-line-height-title-small",
-    /** 56 */
-    "medium": "--cnvs-sys-line-height-title-medium",
-    /** 64 */
-    "large": "--cnvs-sys-line-height-title-large",
-  },
-};
-
-export declare const fontWeight: {
-  /** Light */
-  "light": "--cnvs-sys-font-weight-light",
-  /** Regular */
-  "normal": "--cnvs-sys-font-weight-normal",
-  /** Medium */
-  "medium": "--cnvs-sys-font-weight-medium",
-  /** Bold */
-  "bold": "--cnvs-sys-font-weight-bold",
-};
-
-export declare const type: {
-  "subtext": {
-    "small": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Regular */
-      "fontWeight": "--cnvs-sys-font-weight-normal",
-      /** 16 */
-      "lineHeight": "--cnvs-sys-line-height-subtext-small",
-      /** 0.625rem (10px) */
-      "fontSize": "--cnvs-sys-font-size-subtext-small",
-      /** 0.4 */
-      "letterSpacing": "--cnvs-base-letter-spacing-50",
-    },
-    "medium": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Regular */
-      "fontWeight": "--cnvs-sys-font-weight-normal",
-      /** 16 */
-      "lineHeight": "--cnvs-sys-line-height-subtext-medium",
-      /** 0.75rem (12px) */
-      "fontSize": "--cnvs-sys-font-size-subtext-medium",
-      /** 0.32 */
-      "letterSpacing": "--cnvs-base-letter-spacing-100",
-    },
-    "large": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Regular */
-      "fontWeight": "--cnvs-sys-font-weight-normal",
-      /** 20 */
-      "lineHeight": "--cnvs-sys-line-height-subtext-large",
-      /** 0.875rem (14px) */
-      "fontSize": "--cnvs-sys-font-size-subtext-large",
-      /** 0.24 */
-      "letterSpacing": "--cnvs-base-letter-spacing-150",
-    },
-  },
-  "body": {
-    "small": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Regular */
-      "fontWeight": "--cnvs-sys-font-weight-normal",
-      /** 24 */
-      "lineHeight": "--cnvs-sys-line-height-body-small",
-      /** 1rem (16px) */
-      "fontSize": "--cnvs-sys-font-size-body-small",
-      /** 0.16 */
-      "letterSpacing": "--cnvs-base-letter-spacing-200",
-    },
-    "medium": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Regular */
-      "fontWeight": "--cnvs-sys-font-weight-normal",
-      /** 28 */
-      "lineHeight": "--cnvs-sys-line-height-body-medium",
-      /** 1.125rem (18px) */
-      "fontSize": "--cnvs-sys-font-size-body-medium",
-    },
-    "large": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Regular */
-      "fontWeight": "--cnvs-sys-font-weight-normal",
-      /** 28 */
-      "lineHeight": "--cnvs-sys-line-height-body-large",
-      /** 1.25rem (20px) */
-      "fontSize": "--cnvs-sys-font-size-body-large",
+export declare const color: {
+  "static": {
+    "gold": {
+      /** oklch(0.5505 0.1439 50.78 / 1) */
+      "stronger": "--cnvs-sys-color-static-gold-stronger",
     },
-  },
-  "heading": {
-    "small": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Bold */
-      "fontWeight": "--cnvs-sys-font-weight-bold",
-      /** 32 */
-      "lineHeight": "--cnvs-sys-line-height-heading-small",
-      /** 1.5rem (24px) */
-      "fontSize": "--cnvs-sys-font-size-heading-small",
+    "orange": {
+      /** oklch(0.7909 0.1711 70.15 / 1) */
+      "default": "--cnvs-sys-color-static-orange-default",
+      /** oklch(0.9567 0.0948 100.22 / 1) */
+      "soft": "--cnvs-sys-color-static-orange-soft",
+      /** oklch(0.6601 0.1537 60.7 / 1) */
+      "strong": "--cnvs-sys-color-static-orange-strong",
     },
-    "medium": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Bold */
-      "fontWeight": "--cnvs-sys-font-weight-bold",
-      /** 36 */
-      "lineHeight": "--cnvs-sys-line-height-heading-medium",
-      /** 1.75rem (28px) */
-      "fontSize": "--cnvs-sys-font-size-heading-medium",
+    "blue": {
+      /**
+       * oklch(0.5198 0.1782 256.11 / 1)
+       * 
+       * token: base.blue.600
+       * 
+       * Blue
+       */
+      "default": "--cnvs-sys-color-static-blue-default",
+      /**
+       * oklch(0.969 0.0155 248.07 / 1)
+       * 
+       * token: base.blue.25
+       * 
+       * Light blue
+       */
+      "softest": "--cnvs-sys-color-static-blue-softest",
+      /**
+       * oklch(0.4658 0.1562 255.5 / 1)
+       * 
+       * token: base.blue.700
+       * 
+       * Stronger blue
+       */
+      "strong": "--cnvs-sys-color-static-blue-strong",
+      /**
+       * oklch(0.3908 0.128 256 / 1)
+       * 
+       * token: base.blue.800
+       * 
+       * Stronger blue
+       */
+      "stronger": "--cnvs-sys-color-static-blue-stronger",
+      /**
+       * oklch(0.9523 0.0239 248.12 / 1)
+       * 
+       * token: base.blue.50
+       * 
+       * Light blue
+       */
+      "softer": "--cnvs-sys-color-static-blue-softer",
+      /**
+       * oklch(0.928 0.0359 250.6 / 1)
+       * 
+       * token: base.blue.100
+       * 
+       * Light blue
+       */
+      "soft": "--cnvs-sys-color-static-blue-soft",
+      /**
+       * oklch(0.2452 0.0752 254.55 / 1)
+       * 
+       * token: base.blue.950
+       * 
+       * Stronger blue
+       */
+      "strongest": "--cnvs-sys-color-static-blue-strongest",
     },
-    "large": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Bold */
-      "fontWeight": "--cnvs-sys-font-weight-bold",
-      /** 40 */
-      "lineHeight": "--cnvs-sys-line-height-heading-large",
-      /** 2rem (32px) */
-      "fontSize": "--cnvs-sys-font-size-heading-large",
+    "green": {
+      /**
+       * oklch(0.5069 0.1569 145.56 / 1)
+       * 
+       * token: base.green.600
+       * 
+       * Default green
+       */
+      "default": "--cnvs-sys-color-static-green-default",
+      /**
+       * oklch(0.9278 0.1024 149.88 / 1)
+       * 
+       * token: base.green.100
+       * 
+       * Light green
+       */
+      "soft": "--cnvs-sys-color-static-green-soft",
+      /**
+       * oklch(0.4463 0.1422 144.58 / 1)
+       * 
+       * token: base.green.700
+       * 
+       * Stronger green
+       */
+      "strong": "--cnvs-sys-color-static-green-strong",
+      /**
+       * oklch(0.9655 0.0561 149.93 / 1)
+       * 
+       * token: base.green.50
+       * 
+       * Light green
+       */
+      "softer": "--cnvs-sys-color-static-green-softer",
+      /**
+       * oklch(0.3955 0.1156 147.66 / 1)
+       * 
+       * token: base.green.800
+       * 
+       * Stronger green
+       */
+      "stronger": "--cnvs-sys-color-static-green-stronger",
+      /**
+       * oklch(0.9824 0.0282 148.77 / 1)
+       * 
+       * token: base.green.25
+       * 
+       * Light green
+       */
+      "softest": "--cnvs-sys-color-static-green-softest",
+      /**
+       * oklch(0.2548 0.0796 145.23 / 1)
+       * 
+       * token: base.green.950
+       * 
+       * Stronger green
+       */
+      "strongest": "--cnvs-sys-color-static-green-strongest",
     },
-  },
-  "title": {
-    "small": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Bold */
-      "fontWeight": "--cnvs-sys-font-weight-bold",
-      /** 48 */
-      "lineHeight": "--cnvs-sys-line-height-title-small",
-      /** 2.5rem (40px) */
-      "fontSize": "--cnvs-sys-font-size-title-small",
+    "red": {
+      /**
+       * oklch(0.5342 0.2172 29.53 / 1)
+       * 
+       * token: base.red.600
+       * 
+       * Red
+       */
+      "default": "--cnvs-sys-color-static-red-default",
+      /**
+       * oklch(0.9225 0.0394 25.51 / 1)
+       * 
+       * token: base.red.100
+       * 
+       * Light red
+       */
+      "soft": "--cnvs-sys-color-static-red-soft",
+      /**
+       * oklch(0.4517 0.1847 28.2 / 1)
+       * 
+       * token: base.red.700
+       * 
+       * Strong red
+       */
+      "strong": "--cnvs-sys-color-static-red-strong",
+      /**
+       * oklch(0.3712 0.1509 26.08 / 1)
+       * 
+       * token: base.red.800
+       * 
+       * Strong red
+       */
+      "stronger": "--cnvs-sys-color-static-red-stronger",
+      /**
+       * oklch(0.9667 0.0163 21.82 / 1)
+       * 
+       * token: base.red.25
+       * 
+       * Light red
+       */
+      "softest": "--cnvs-sys-color-static-red-softest",
+      /**
+       * oklch(0.2318 0.0937 24.02 / 1)
+       * 
+       * token: base.red.950
+       * 
+       * Strong red
+       */
+      "strongest": "--cnvs-sys-color-static-red-strongest",
+      /**
+       * oklch(0.9533 0.0231 23.95 / 1)
+       * 
+       * token: base.red.50
+       * 
+       * Light red
+       */
+      "softer": "--cnvs-sys-color-static-red-softer",
     },
-    "medium": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Bold */
-      "fontWeight": "--cnvs-sys-font-weight-bold",
-      /** 56 */
-      "lineHeight": "--cnvs-sys-line-height-title-medium",
-      /** 3rem (48px) */
-      "fontSize": "--cnvs-sys-font-size-title-medium",
+    /**
+     * oklch(1 0 0 / 1)
+     * 
+     * token: base.neutral.0
+     * 
+     * Just white
+     */
+    "white": "--cnvs-sys-color-static-white",
+    /**
+     * oklch(0 0 0 / 1)
+     * 
+     * token: base.neutral.1000
+     * 
+     * Just black
+     */
+    "black": "--cnvs-sys-color-static-black",
+    "gray": {
+      /**
+       * oklch(0.5103 0.0255 256.8 / 1)
+       * 
+       * token: base.slate.600
+       * 
+       * Gray
+       */
+      "default": "--cnvs-sys-color-static-gray-default",
+      /**
+       * oklch(0.917 0.0081 254 / 1)
+       * 
+       * token: base.slate.200
+       * 
+       * Light gray
+       */
+      "soft": "--cnvs-sys-color-static-gray-soft",
+      /**
+       * oklch(0.45 0.022 255.52 / 1)
+       * 
+       * token: base.slate.700
+       * 
+       * Stronger gray
+       */
+      "strong": "--cnvs-sys-color-static-gray-strong",
+      /**
+       * oklch(0.3685 0.0218 256.4 / 1)
+       * 
+       * token: base.slate.800
+       * 
+       * Strongerer gray
+       */
+      "stronger": "--cnvs-sys-color-static-gray-stronger",
+      /**
+       * oklch(0.2453 0.0136 253.1 / 1)
+       * 
+       * token: base.slate.950
+       * 
+       * Strongerer gray
+       */
+      "strongest": "--cnvs-sys-color-static-gray-strongest",
+      /**
+       * oklch(0.9692 0.0035 248.23 / 1)
+       * 
+       * token: base.slate.50
+       * 
+       * Light gray
+       */
+      "softest": "--cnvs-sys-color-static-gray-softest",
+      /**
+       * oklch(0.9447 0.0053 248.12 / 1)
+       * 
+       * token: base.slate.100
+       * 
+       * Light gray
+       */
+      "softer": "--cnvs-sys-color-static-gray-softer",
     },
-    "large": {
-      /** Roboto */
-      "fontFamily": "--cnvs-sys-font-family-default",
-      /** Bold */
-      "fontWeight": "--cnvs-sys-font-weight-bold",
-      /** 64 */
-      "lineHeight": "--cnvs-sys-line-height-title-large",
-      /** 3.5rem (56px) */
-      "fontSize": "--cnvs-sys-font-size-title-large",
+    "amber": {
+      /**
+       * oklch(0.7909 0.1711 70.15 / 1)
+       * 
+       * token: base.amber.400
+       * 
+       * amber
+       */
+      "default": "--cnvs-sys-color-static-amber-default",
+      /**
+       * oklch(0.9779 0.0214 95.33 / 1)
+       * 
+       * token: base.amber.25
+       * 
+       * Soft amber
+       */
+      "softest": "--cnvs-sys-color-static-amber-softest",
+      /**
+       * oklch(0.6601 0.1537 60.7 / 1)
+       * 
+       * token: base.amber.500
+       * 
+       * Stronger amber
+       */
+      "strong": "--cnvs-sys-color-static-amber-strong",
+      /**
+       * oklch(0.5505 0.1439 50.78 / 1)
+       * 
+       * token: base.amber.600
+       * 
+       * Stronger amber
+       */
+      "stronger": "--cnvs-sys-color-static-amber-stronger",
+      /**
+       * oklch(0.969 0.0619 101.63 / 1)
+       * 
+       * token: base.amber.50
+       * 
+       * Soft amber
+       */
+      "softer": "--cnvs-sys-color-static-amber-softer",
+      /**
+       * oklch(0.2489 0.0771 40.64 / 1)
+       * 
+       * token: base.amber.950
+       * 
+       * Stronger amber
+       */
+      "strongest": "--cnvs-sys-color-static-amber-strongest",
+      /**
+       * oklch(0.9567 0.0948 100.22 / 1)
+       * 
+       * token: base.amber.100
+       * 
+       * Soft amber
+       */
+      "soft": "--cnvs-sys-color-static-amber-soft",
     },
   },
-};
-
-export declare const color: {
   "bg": {
     /**
      * oklch(1 0 0 / 1)
@@ -664,7 +467,7 @@ export declare const color: {
        * 
        * token: base.blue.100
        * 
-       * Disabled
+       * Primary disabled
        */
       "soft": "--cnvs-sys-color-bg-primary-soft",
       /**
@@ -1082,7 +885,7 @@ export declare const color: {
        * 
        * token: base.amber.400
        * 
-       * Strong warning text
+       * Disabled warning text
        */
       "soft": "--cnvs-sys-color-text-caution-soft",
       /**
@@ -1090,7 +893,7 @@ export declare const color: {
        * 
        * token: base.amber.975
        * 
-       * Strong warning text
+       * Stronger warning text
        */
       "stronger": "--cnvs-sys-color-text-caution-stronger",
       /**
@@ -1098,7 +901,7 @@ export declare const color: {
        * 
        * token: base.amber.200
        * 
-       * Strong warning text
+       * Softer warning text
        */
       "softer": "--cnvs-sys-color-text-caution-softer",
     },
@@ -1374,19 +1177,19 @@ export declare const color: {
        */
       "stronger": "--cnvs-sys-color-icon-caution-stronger",
       /**
-       * oklch(0.7909 0.1711 70.15 / 1)
+       * oklch(0.4824 0.1353 46.11 / 1)
        * 
-       * token: base.amber.400
+       * token: base.amber.700
        * 
-       * Strong caution icon color
+       * Soft caution icon color
        */
       "soft": "--cnvs-sys-color-icon-caution-soft",
       /**
-       * oklch(0.9191 0.1547 99.7 / 1)
+       * oklch(0.6601 0.1537 60.7 / 1)
        * 
-       * token: base.amber.200
+       * token: base.amber.500
        * 
-       * Strong caution icon color
+       * Softer caution icon color
        */
       "softer": "--cnvs-sys-color-icon-caution-softer",
     },
@@ -1584,9 +1387,9 @@ export declare const color: {
        */
       "strong": "--cnvs-sys-color-fg-caution-strong",
       /**
-       * oklch(0.7909 0.1711 70.15 / 1)
+       * oklch(0.4824 0.1353 46.11 / 1)
        * 
-       * token: base.amber.400
+       * token: base.amber.700
        * 
        * Warning
        */
@@ -1600,9 +1403,9 @@ export declare const color: {
        */
       "stronger": "--cnvs-sys-color-fg-caution-stronger",
       /**
-       * oklch(0.9191 0.1547 99.7 / 1)
+       * oklch(0.6601 0.1537 60.7 / 1)
        * 
-       * token: base.amber.200
+       * token: base.amber.500
        * 
        * Warning
        */
@@ -1704,489 +1507,698 @@ export declare const color: {
        */
       "strong": "--cnvs-sys-color-fg-positive-strong",
       /**
-       * oklch(0.3955 0.1156 147.66 / 1)
+       * oklch(0.3955 0.1156 147.66 / 1)
+       * 
+       * token: base.green.800
+       * 
+       * Error
+       */
+      "stronger": "--cnvs-sys-color-fg-positive-stronger",
+    },
+  },
+  "border": {
+    "input": {
+      /**
+       * oklch(0.754 0.0181 256.33 / 1)
+       * 
+       * token: base.slate.400
+       * 
+       * Disabled inputs
+       */
+      "disabled": "--cnvs-sys-color-border-input-disabled",
+      /**
+       * oklch(0.629 0.0281 255.62 / 1)
+       * 
+       * token: base.slate.500
+       * 
+       * Inputs
+       */
+      "default": "--cnvs-sys-color-border-input-default",
+      /**
+       * oklch(0.45 0.022 255.52 / 1)
+       * 
+       * token: base.slate.700
+       * 
+       * Input hover
+       */
+      "strong": "--cnvs-sys-color-border-input-strong",
+      /**
+       * oklch(1 0 0 / 1)
+       * 
+       * token: base.neutral.0
+       * 
+       * Borders on checkboxes and radios
+       */
+      "inverse": "--cnvs-sys-color-border-input-inverse",
+    },
+    "contrast": {
+      /**
+       * oklch(0.2891 0 0 / 1)
+       * 
+       * token: base.neutral.900
+       * 
+       * Secondary Button
+       */
+      "default": "--cnvs-sys-color-border-contrast-default",
+      /**
+       * oklch(0.2308 0 0 / 1)
+       * 
+       * token: base.neutral.950
+       * 
+       * Secondary Button Hover
+       */
+      "strong": "--cnvs-sys-color-border-contrast-strong",
+    },
+    "primary": {
+      /**
+       * oklch(0.6023 0.2032 255.68 / 1)
+       * 
+       * token: base.blue.500
+       * 
+       * Brand, Focus
+       */
+      "default": "--cnvs-sys-color-border-primary-default",
+    },
+    "critical": {
+      /**
+       * oklch(0.6495 0.2369 30.04 / 1)
+       * 
+       * token: base.red.500
+       * 
+       * Error
+       */
+      "default": "--cnvs-sys-color-border-critical-default",
+    },
+    "caution": {
+      /**
+       * oklch(0.7909 0.1711 70.15 / 1)
+       * 
+       * token: base.amber.400
+       * 
+       * Warning inner
+       */
+      "default": "--cnvs-sys-color-border-caution-default",
+      /**
+       * oklch(0.6601 0.1537 60.7 / 1)
+       * 
+       * token: base.amber.500
+       * 
+       * Warning outer (box shadow)
+       */
+      "strong": "--cnvs-sys-color-border-caution-strong",
+    },
+    /**
+     * oklch(oklch(1 0 0 / 1) / 0)
+     * 
+     * token: oklch({base.neutral.0} / {base.opacity.0})
+     * 
+     * Transparent
+     */
+    "transparent": "--cnvs-sys-color-border-transparent",
+    /**
+     * oklch(1 0 0 / 1)
+     * 
+     * token: base.neutral.0
+     * 
+     * Borders on accent colors
+     */
+    "inverse": "--cnvs-sys-color-border-inverse",
+    /**
+     * oklch(0.917 0.0081 254 / 1)
+     * 
+     * token: base.slate.200
+     * 
+     * Dividers
+     */
+    "divider": "--cnvs-sys-color-border-divider",
+    /**
+     * oklch(0.856 0.0111 256.85 / 1)
+     * 
+     * token: base.slate.300
+     * 
+     * Cards, Toasts, Surfaces
+     */
+    "container": "--cnvs-sys-color-border-container",
+    /**
+     * oklch(0.2452 0.0752 254.55 / 1)
+     * 
+     * token: base.blue.950
+     * 
+     * Active state on AI borders
+     */
+    "ai": "--cnvs-sys-color-border-ai",
+    "info": {
+      /**
+       * oklch(0.6023 0.2032 255.68 / 1)
        * 
-       * token: base.green.800
+       * token: base.blue.500
        * 
-       * Error
+       * Brand, Focus
        */
-      "stronger": "--cnvs-sys-color-fg-positive-stronger",
+      "default": "--cnvs-sys-color-border-info-default",
     },
   },
-  "border": {
-    "input": {
-      /**
-       * oklch(0.754 0.0181 256.33 / 1)
-       * 
-       * token: base.slate.400
-       * 
-       * Disabled inputs
-       */
-      "disabled": "--cnvs-sys-color-border-input-disabled",
-      /**
-       * oklch(0.629 0.0281 255.62 / 1)
-       * 
-       * token: base.slate.500
-       * 
-       * Inputs
-       */
-      "default": "--cnvs-sys-color-border-input-default",
-      /**
-       * oklch(0.45 0.022 255.52 / 1)
-       * 
-       * token: base.slate.700
-       * 
-       * Input hover
-       */
-      "strong": "--cnvs-sys-color-border-input-strong",
-      /**
-       * oklch(1 0 0 / 1)
-       * 
-       * token: base.neutral.0
-       * 
-       * Borders on checkboxes and radios
-       */
-      "inverse": "--cnvs-sys-color-border-input-inverse",
-    },
-    "contrast": {
-      /**
-       * oklch(0.2891 0 0 / 1)
-       * 
-       * token: base.neutral.900
-       * 
-       * Secondary Button
-       */
-      "default": "--cnvs-sys-color-border-contrast-default",
-      /**
-       * oklch(0.2308 0 0 / 1)
-       * 
-       * token: base.neutral.950
-       * 
-       * Secondary Button Hover
-       */
-      "strong": "--cnvs-sys-color-border-contrast-strong",
-    },
-    "primary": {
-      /**
-       * oklch(0.6023 0.2032 255.68 / 1)
-       * 
-       * token: base.blue.500
-       * 
-       * Brand, Focus
-       */
-      "default": "--cnvs-sys-color-border-primary-default",
-    },
-    "critical": {
-      /**
-       * oklch(0.6495 0.2369 30.04 / 1)
-       * 
-       * token: base.red.500
-       * 
-       * Error
-       */
-      "default": "--cnvs-sys-color-border-critical-default",
+  "shadow": {
+    /**
+     * oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12)
+     * 
+     * token: oklch({base.slate.900} / {base.opacity.200})
+     * 
+     * First shadow color
+     */
+    "1": "--cnvs-sys-color-shadow-1",
+    /**
+     * oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+     * 
+     * token: oklch({base.slate.900} / {base.opacity.100})
+     * 
+     * Second shadow color
+     */
+    "2": "--cnvs-sys-color-shadow-2",
+    /**
+     * oklch(0.278 0.0156 252.4 / 1)
+     * 
+     * token: base.slate.900
+     * 
+     * Main shadow color
+     */
+    "default": "--cnvs-sys-color-shadow-default",
+  },
+};
+
+export declare const breakpoints: {
+  /**
+   * 0
+   * 
+   * token: 0
+   * 
+   * Use to set a media query `min-width` below small.
+   */
+  "zero": "--cnvs-sys-breakpoints-zero",
+  /**
+   * 20rem (320px)
+   * 
+   * token: {base.unit} * 80
+   * 
+   * The `min-width` for mobile devices, such as phones and tablets.
+   */
+  "s": "--cnvs-sys-breakpoints-s",
+  /**
+   * 48rem (768px)
+   * 
+   * token: {base.unit} * 192
+   * 
+   * Medium screens, such as laptops.
+   */
+  "m": "--cnvs-sys-breakpoints-m",
+  /**
+   * 64rem (1024px)
+   * 
+   * token: {base.unit} * 256
+   * 
+   * Large screens, such as desktops.
+   */
+  "l": "--cnvs-sys-breakpoints-l",
+  /**
+   * 90rem (1440px)
+   * 
+   * token: {base.unit} * 360
+   * 
+   * Used for extra large screens, such as wide monitors and TVs.
+   */
+  "xl": "--cnvs-sys-breakpoints-xl",
+};
+
+export declare const depth: {
+  /**
+   * 0 0.0625rem 0.25rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.125rem 0.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+   * 
+   * 
+   * 
+   * Standard card depth
+   */
+  "1": "--cnvs-sys-depth-1",
+  /**
+   * 0 0.125rem 0.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.25rem 1rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+   * 
+   * 
+   * 
+   * Top navigation, Bottom Navigation
+   */
+  "2": "--cnvs-sys-depth-2",
+  /**
+   * 0 0.1875rem 0.75rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.375rem 1.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+   * 
+   * 
+   * 
+   * Floating Action Buttons (FAB), Menus
+   */
+  "3": "--cnvs-sys-depth-3",
+  /**
+   * 0 0.25rem 1rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.5rem 2rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+   * 
+   * 
+   * 
+   * Bottom Sheets
+   */
+  "4": "--cnvs-sys-depth-4",
+  /**
+   * 0 0.3125rem 1.25rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.625rem 2.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+   * 
+   * 
+   * 
+   * Banners, Snackbars, Toast Messages, Non modal Dialogs, 
+   * Side Panels (when opacity overlay behaviour is not applied)
+   */
+  "5": "--cnvs-sys-depth-5",
+  /**
+   * 0 0.375rem 1.5rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12), 0 0.75rem 3rem 0 oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
+   * 
+   * 
+   * 
+   * Modal Dialogs, Side Panels (when opacity overlay behaviour
+   * is applied)
+   */
+  "6": "--cnvs-sys-depth-6",
+};
+
+export declare const opacity: {
+  /**
+   * 0
+   * 
+   * token: 0
+   * 
+   * Dev only
+   */
+  "zero": "--cnvs-sys-opacity-zero",
+  /**
+   * 0.4
+   * 
+   * token: base.opacity.300
+   * 
+   * Disabled states
+   */
+  "disabled": "--cnvs-sys-opacity-disabled",
+  /**
+   * 0.64
+   * 
+   * token: base.opacity.400
+   * 
+   * Overlay
+   */
+  "overlay": "--cnvs-sys-opacity-overlay",
+  /**
+   * 0.84
+   * 
+   * token: base.opacity.500
+   * 
+   * Tooltips, Status Indicator
+   */
+  "contrast": "--cnvs-sys-opacity-contrast",
+  /**
+   * 1
+   * 
+   * token: 1
+   * 
+   * Dev only
+   */
+  "full": "--cnvs-sys-opacity-full",
+  "shadow": {
+    /**
+     * 0.12
+     * 
+     * token: base.opacity.200
+     * 
+     * Alpha on first shadow
+     */
+    "first": "--cnvs-sys-opacity-shadow-first",
+    /**
+     * 0.08
+     * 
+     * token: base.opacity.100
+     * 
+     * Alpha on second shadow
+     */
+    "second": "--cnvs-sys-opacity-shadow-second",
+  },
+};
+
+export declare const shape: {
+  /**
+   * 0rem
+   * 
+   * token: 0rem
+   * 
+   * This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
+   */
+  "zero": "--cnvs-sys-shape-zero",
+  /**
+   * 0.125rem (2px)
+   * 
+   * token: {base.unit} * 0.5
+   * 
+   * Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
+   */
+  "half": "--cnvs-sys-shape-half",
+  /** 0.25rem (4px) */
+  "x1": "--cnvs-sys-shape-x1",
+  /** 0.375rem (6px) */
+  "x1Half": "--cnvs-sys-shape-x1-half",
+  /**
+   * 0.5rem (8px)
+   * 
+   * token: {base.unit} * 2
+   * 
+   * Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
+   */
+  "x2": "--cnvs-sys-shape-x2",
+  /**
+   * 62.5rem (1000px)
+   * 
+   * token: {base.unit} * 250
+   * 
+   * Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
+   */
+  "round": "--cnvs-sys-shape-round",
+};
+
+export declare const space: {
+  /**
+   * 0
+   * 
+   * token: 0
+   * 
+   * Stacks, rows in tables
+   */
+  "zero": "--cnvs-sys-space-zero",
+  /**
+   * 0.25rem (4px)
+   * 
+   * token: base.unit
+   * 
+   * Compact spacing between text or icons
+   */
+  "x1": "--cnvs-sys-space-x1",
+  /**
+   * 0.5rem (8px)
+   * 
+   * token: {base.unit} * 2
+   * 
+   * Commonly used to group compact elements like icon buttons
+   */
+  "x2": "--cnvs-sys-space-x2",
+  /**
+   * 0.75rem (12px)
+   * 
+   * token: {base.unit} * 3
+   * 
+   * Use when compact padding is required
+   */
+  "x3": "--cnvs-sys-space-x3",
+  /**
+   * 1rem (16px)
+   * 
+   * token: {base.unit} * 4
+   * 
+   * Default space token. Used to group Inputs with related data
+   */
+  "x4": "--cnvs-sys-space-x4",
+  /**
+   * 1.5rem (24px)
+   * 
+   * token: {base.unit} * 6
+   * 
+   * • Padding around card content
+   * • Related elements where more space between them can be afforded
+   * • Separate section headings or titles from body text or inputs
+   */
+  "x6": "--cnvs-sys-space-x6",
+  /**
+   * 2rem (32px)
+   * 
+   * token: {base.unit} * 8
+   * 
+   * • Standard spacing between cards
+   * • Used to separate groups of content 
+   * • Separate section headings or titles from body text or inputs
+   */
+  "x8": "--cnvs-sys-space-x8",
+  /**
+   * 2.5rem (40px)
+   * 
+   * token: {base.unit} * 10
+   * 
+   * • Used for outer margins on the overall page content 
+   * • Used for inner margins on large items such as page sections
+   */
+  "x10": "--cnvs-sys-space-x10",
+  /**
+   * 4rem (64px)
+   * 
+   * token: {base.unit} * 16
+   * 
+   * - Use to de-clutter your UI when a lot of space is available
+   * - Separate banner sections from page content
+   * - Use to differentiate page content like page sections
+   */
+  "x16": "--cnvs-sys-space-x16",
+  /**
+   * 5rem (80px)
+   * 
+   * token: {base.unit} * 20
+   * 
+   * - Use sparingly
+   * - Helps to put focus on the primary element within your page
+   * - Use to de-clutter your UI when a lot of space is available
+   */
+  "x20": "--cnvs-sys-space-x20",
+};
+
+export declare const fontFamily: {
+  /** Roboto */
+  "default": "--cnvs-sys-font-family-default",
+  /** Roboto Mono */
+  "mono": "--cnvs-sys-font-family-mono",
+  /** Noto Sans */
+  "global": "--cnvs-sys-font-family-global",
+};
+
+export declare const fontSize: {
+  "subtext": {
+    /** 0.625rem (10px) */
+    "small": "--cnvs-sys-font-size-subtext-small",
+    /** 0.75rem (12px) */
+    "medium": "--cnvs-sys-font-size-subtext-medium",
+    /** 0.875rem (14px) */
+    "large": "--cnvs-sys-font-size-subtext-large",
+  },
+  "body": {
+    /** 1rem (16px) */
+    "small": "--cnvs-sys-font-size-body-small",
+    /** 1.125rem (18px) */
+    "medium": "--cnvs-sys-font-size-body-medium",
+    /** 1.25rem (20px) */
+    "large": "--cnvs-sys-font-size-body-large",
+  },
+  "heading": {
+    /** 1.5rem (24px) */
+    "small": "--cnvs-sys-font-size-heading-small",
+    /** 1.75rem (28px) */
+    "medium": "--cnvs-sys-font-size-heading-medium",
+    /** 2rem (32px) */
+    "large": "--cnvs-sys-font-size-heading-large",
+  },
+  "title": {
+    /** 2.5rem (40px) */
+    "small": "--cnvs-sys-font-size-title-small",
+    /** 3rem (48px) */
+    "medium": "--cnvs-sys-font-size-title-medium",
+    /** 3.5rem (56px) */
+    "large": "--cnvs-sys-font-size-title-large",
+  },
+};
+
+export declare const lineHeight: {
+  "subtext": {
+    /** 16 */
+    "small": "--cnvs-sys-line-height-subtext-small",
+    /** 16 */
+    "medium": "--cnvs-sys-line-height-subtext-medium",
+    /** 20 */
+    "large": "--cnvs-sys-line-height-subtext-large",
+  },
+  "body": {
+    /** 24 */
+    "small": "--cnvs-sys-line-height-body-small",
+    /** 28 */
+    "medium": "--cnvs-sys-line-height-body-medium",
+    /** 28 */
+    "large": "--cnvs-sys-line-height-body-large",
+  },
+  "heading": {
+    /** 32 */
+    "small": "--cnvs-sys-line-height-heading-small",
+    /** 36 */
+    "medium": "--cnvs-sys-line-height-heading-medium",
+    /** 40 */
+    "large": "--cnvs-sys-line-height-heading-large",
+  },
+  "title": {
+    /** 48 */
+    "small": "--cnvs-sys-line-height-title-small",
+    /** 56 */
+    "medium": "--cnvs-sys-line-height-title-medium",
+    /** 64 */
+    "large": "--cnvs-sys-line-height-title-large",
+  },
+};
+
+export declare const fontWeight: {
+  /** Light */
+  "light": "--cnvs-sys-font-weight-light",
+  /** Regular */
+  "normal": "--cnvs-sys-font-weight-normal",
+  /** Medium */
+  "medium": "--cnvs-sys-font-weight-medium",
+  /** Bold */
+  "bold": "--cnvs-sys-font-weight-bold",
+};
+
+export declare const type: {
+  "subtext": {
+    "small": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Regular */
+      "fontWeight": "--cnvs-sys-font-weight-normal",
+      /** 16 */
+      "lineHeight": "--cnvs-sys-line-height-subtext-small",
+      /** 0.625rem (10px) */
+      "fontSize": "--cnvs-sys-font-size-subtext-small",
+      /** 0.4 */
+      "letterSpacing": "--cnvs-base-letter-spacing-50",
     },
-    "caution": {
-      /**
-       * oklch(0.7909 0.1711 70.15 / 1)
-       * 
-       * token: base.amber.400
-       * 
-       * Warning inner
-       */
-      "default": "--cnvs-sys-color-border-caution-default",
-      /**
-       * oklch(0.6601 0.1537 60.7 / 1)
-       * 
-       * token: base.amber.500
-       * 
-       * Warning outer (box shadow)
-       */
-      "strong": "--cnvs-sys-color-border-caution-strong",
+    "medium": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Regular */
+      "fontWeight": "--cnvs-sys-font-weight-normal",
+      /** 16 */
+      "lineHeight": "--cnvs-sys-line-height-subtext-medium",
+      /** 0.75rem (12px) */
+      "fontSize": "--cnvs-sys-font-size-subtext-medium",
+      /** 0.32 */
+      "letterSpacing": "--cnvs-base-letter-spacing-100",
     },
-    /**
-     * oklch(oklch(1 0 0 / 1) / 0)
-     * 
-     * token: oklch({base.neutral.0} / {base.opacity.0})
-     * 
-     * Transparent
-     */
-    "transparent": "--cnvs-sys-color-border-transparent",
-    /**
-     * oklch(1 0 0 / 1)
-     * 
-     * token: base.neutral.0
-     * 
-     * Borders on accent colors
-     */
-    "inverse": "--cnvs-sys-color-border-inverse",
-    /**
-     * oklch(0.917 0.0081 254 / 1)
-     * 
-     * token: base.slate.200
-     * 
-     * Dividers
-     */
-    "divider": "--cnvs-sys-color-border-divider",
-    /**
-     * oklch(0.856 0.0111 256.85 / 1)
-     * 
-     * token: base.slate.300
-     * 
-     * Cards, Toasts, Surfaces
-     */
-    "container": "--cnvs-sys-color-border-container",
-    /**
-     * oklch(0.2452 0.0752 254.55 / 1)
-     * 
-     * token: base.blue.950
-     * 
-     * Active state on AI borders
-     */
-    "ai": "--cnvs-sys-color-border-ai",
-    "info": {
-      /**
-       * oklch(0.6023 0.2032 255.68 / 1)
-       * 
-       * token: base.blue.500
-       * 
-       * Brand, Focus
-       */
-      "default": "--cnvs-sys-color-border-info-default",
+    "large": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Regular */
+      "fontWeight": "--cnvs-sys-font-weight-normal",
+      /** 20 */
+      "lineHeight": "--cnvs-sys-line-height-subtext-large",
+      /** 0.875rem (14px) */
+      "fontSize": "--cnvs-sys-font-size-subtext-large",
+      /** 0.24 */
+      "letterSpacing": "--cnvs-base-letter-spacing-150",
     },
   },
-  "shadow": {
-    /**
-     * oklch(oklch(0.278 0.0156 252.4 / 1) / 0.12)
-     * 
-     * token: oklch({base.slate.900} / {base.opacity.200})
-     * 
-     * First shadow color
-     */
-    "1": "--cnvs-sys-color-shadow-1",
-    /**
-     * oklch(oklch(0.278 0.0156 252.4 / 1) / 0.08)
-     * 
-     * token: oklch({base.slate.900} / {base.opacity.100})
-     * 
-     * Second shadow color
-     */
-    "2": "--cnvs-sys-color-shadow-2",
-    /**
-     * oklch(0.278 0.0156 252.4 / 1)
-     * 
-     * token: base.slate.900
-     * 
-     * Main shadow color
-     */
-    "default": "--cnvs-sys-color-shadow-default",
-  },
-  "static": {
-    "blue": {
-      /**
-       * oklch(0.5198 0.1782 256.11 / 1)
-       * 
-       * token: base.blue.600
-       * 
-       * Blue
-       */
-      "default": "--cnvs-sys-color-static-blue-default",
-      /**
-       * oklch(0.969 0.0155 248.07 / 1)
-       * 
-       * token: base.blue.25
-       * 
-       * Light blue
-       */
-      "softest": "--cnvs-sys-color-static-blue-softest",
-      /**
-       * oklch(0.4658 0.1562 255.5 / 1)
-       * 
-       * token: base.blue.700
-       * 
-       * Stronger blue
-       */
-      "strong": "--cnvs-sys-color-static-blue-strong",
-      /**
-       * oklch(0.3908 0.128 256 / 1)
-       * 
-       * token: base.blue.800
-       * 
-       * Stronger blue
-       */
-      "stronger": "--cnvs-sys-color-static-blue-stronger",
-      /**
-       * oklch(0.9523 0.0239 248.12 / 1)
-       * 
-       * token: base.blue.50
-       * 
-       * Light blue
-       */
-      "softer": "--cnvs-sys-color-static-blue-softer",
-      /**
-       * oklch(0.928 0.0359 250.6 / 1)
-       * 
-       * token: base.blue.100
-       * 
-       * Light blue
-       */
-      "soft": "--cnvs-sys-color-static-blue-soft",
-      /**
-       * oklch(0.2452 0.0752 254.55 / 1)
-       * 
-       * token: base.blue.950
-       * 
-       * Stronger blue
-       */
-      "strongest": "--cnvs-sys-color-static-blue-strongest",
+  "body": {
+    "small": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Regular */
+      "fontWeight": "--cnvs-sys-font-weight-normal",
+      /** 24 */
+      "lineHeight": "--cnvs-sys-line-height-body-small",
+      /** 1rem (16px) */
+      "fontSize": "--cnvs-sys-font-size-body-small",
+      /** 0.16 */
+      "letterSpacing": "--cnvs-base-letter-spacing-200",
     },
-    "green": {
-      /**
-       * oklch(0.5069 0.1569 145.56 / 1)
-       * 
-       * token: base.green.600
-       * 
-       * Default green
-       */
-      "default": "--cnvs-sys-color-static-green-default",
-      /**
-       * oklch(0.9278 0.1024 149.88 / 1)
-       * 
-       * token: base.green.100
-       * 
-       * Light green
-       */
-      "soft": "--cnvs-sys-color-static-green-soft",
-      /**
-       * oklch(0.4463 0.1422 144.58 / 1)
-       * 
-       * token: base.green.700
-       * 
-       * Stronger green
-       */
-      "strong": "--cnvs-sys-color-static-green-strong",
-      /**
-       * oklch(0.9655 0.0561 149.93 / 1)
-       * 
-       * token: base.green.50
-       * 
-       * Light green
-       */
-      "softer": "--cnvs-sys-color-static-green-softer",
-      /**
-       * oklch(0.3955 0.1156 147.66 / 1)
-       * 
-       * token: base.green.800
-       * 
-       * Stronger green
-       */
-      "stronger": "--cnvs-sys-color-static-green-stronger",
-      /**
-       * oklch(0.9824 0.0282 148.77 / 1)
-       * 
-       * token: base.green.25
-       * 
-       * Light green
-       */
-      "softest": "--cnvs-sys-color-static-green-softest",
-      /**
-       * oklch(0.2548 0.0796 145.23 / 1)
-       * 
-       * token: base.green.950
-       * 
-       * Stronger green
-       */
-      "strongest": "--cnvs-sys-color-static-green-strongest",
+    "medium": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Regular */
+      "fontWeight": "--cnvs-sys-font-weight-normal",
+      /** 28 */
+      "lineHeight": "--cnvs-sys-line-height-body-medium",
+      /** 1.125rem (18px) */
+      "fontSize": "--cnvs-sys-font-size-body-medium",
+    },
+    "large": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Regular */
+      "fontWeight": "--cnvs-sys-font-weight-normal",
+      /** 28 */
+      "lineHeight": "--cnvs-sys-line-height-body-large",
+      /** 1.25rem (20px) */
+      "fontSize": "--cnvs-sys-font-size-body-large",
     },
-    "red": {
-      /**
-       * oklch(0.5342 0.2172 29.53 / 1)
-       * 
-       * token: base.red.600
-       * 
-       * Red
-       */
-      "default": "--cnvs-sys-color-static-red-default",
-      /**
-       * oklch(0.9225 0.0394 25.51 / 1)
-       * 
-       * token: base.red.100
-       * 
-       * Light red
-       */
-      "soft": "--cnvs-sys-color-static-red-soft",
-      /**
-       * oklch(0.4517 0.1847 28.2 / 1)
-       * 
-       * token: base.red.700
-       * 
-       * Strong red
-       */
-      "strong": "--cnvs-sys-color-static-red-strong",
-      /**
-       * oklch(0.3712 0.1509 26.08 / 1)
-       * 
-       * token: base.red.800
-       * 
-       * Strong red
-       */
-      "stronger": "--cnvs-sys-color-static-red-stronger",
-      /**
-       * oklch(0.9667 0.0163 21.82 / 1)
-       * 
-       * token: base.red.25
-       * 
-       * Light red
-       */
-      "softest": "--cnvs-sys-color-static-red-softest",
-      /**
-       * oklch(0.2318 0.0937 24.02 / 1)
-       * 
-       * token: base.red.950
-       * 
-       * Strong red
-       */
-      "strongest": "--cnvs-sys-color-static-red-strongest",
-      /**
-       * oklch(0.9533 0.0231 23.95 / 1)
-       * 
-       * token: base.red.50
-       * 
-       * Light red
-       */
-      "softer": "--cnvs-sys-color-static-red-softer",
+  },
+  "heading": {
+    "small": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Bold */
+      "fontWeight": "--cnvs-sys-font-weight-bold",
+      /** 32 */
+      "lineHeight": "--cnvs-sys-line-height-heading-small",
+      /** 1.5rem (24px) */
+      "fontSize": "--cnvs-sys-font-size-heading-small",
     },
-    /**
-     * oklch(1 0 0 / 1)
-     * 
-     * token: base.neutral.0
-     * 
-     * Just white
-     */
-    "white": "--cnvs-sys-color-static-white",
-    /**
-     * oklch(0 0 0 / 1)
-     * 
-     * token: base.neutral.1000
-     * 
-     * Just black
-     */
-    "black": "--cnvs-sys-color-static-black",
-    "gray": {
-      /**
-       * oklch(0.5103 0.0255 256.8 / 1)
-       * 
-       * token: base.slate.600
-       * 
-       * Gray
-       */
-      "default": "--cnvs-sys-color-static-gray-default",
-      /**
-       * oklch(0.917 0.0081 254 / 1)
-       * 
-       * token: base.slate.200
-       * 
-       * Light gray
-       */
-      "soft": "--cnvs-sys-color-static-gray-soft",
-      /**
-       * oklch(0.45 0.022 255.52 / 1)
-       * 
-       * token: base.slate.700
-       * 
-       * Stronger gray
-       */
-      "strong": "--cnvs-sys-color-static-gray-strong",
-      /**
-       * oklch(0.3685 0.0218 256.4 / 1)
-       * 
-       * token: base.slate.800
-       * 
-       * Strongerer gray
-       */
-      "stronger": "--cnvs-sys-color-static-gray-stronger",
-      /**
-       * oklch(0.2453 0.0136 253.1 / 1)
-       * 
-       * token: base.slate.950
-       * 
-       * Strongerer gray
-       */
-      "strongest": "--cnvs-sys-color-static-gray-strongest",
-      /**
-       * oklch(0.9692 0.0035 248.23 / 1)
-       * 
-       * token: base.slate.50
-       * 
-       * Light gray
-       */
-      "softest": "--cnvs-sys-color-static-gray-softest",
-      /**
-       * oklch(0.9447 0.0053 248.12 / 1)
-       * 
-       * token: base.slate.100
-       * 
-       * Light gray
-       */
-      "softer": "--cnvs-sys-color-static-gray-softer",
+    "medium": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Bold */
+      "fontWeight": "--cnvs-sys-font-weight-bold",
+      /** 36 */
+      "lineHeight": "--cnvs-sys-line-height-heading-medium",
+      /** 1.75rem (28px) */
+      "fontSize": "--cnvs-sys-font-size-heading-medium",
     },
-    "amber": {
-      /**
-       * oklch(0.7909 0.1711 70.15 / 1)
-       * 
-       * token: base.amber.400
-       * 
-       * amber
-       */
-      "default": "--cnvs-sys-color-static-amber-default",
-      /**
-       * oklch(0.9779 0.0214 95.33 / 1)
-       * 
-       * token: base.amber.25
-       * 
-       * Soft amber
-       */
-      "softest": "--cnvs-sys-color-static-amber-softest",
-      /**
-       * oklch(0.6601 0.1537 60.7 / 1)
-       * 
-       * token: base.amber.500
-       * 
-       * Stronger amber
-       */
-      "strong": "--cnvs-sys-color-static-amber-strong",
-      /**
-       * oklch(0.5505 0.1439 50.78 / 1)
-       * 
-       * token: base.amber.600
-       * 
-       * Stronger amber
-       */
-      "stronger": "--cnvs-sys-color-static-amber-stronger",
-      /**
-       * oklch(0.969 0.0619 101.63 / 1)
-       * 
-       * token: base.amber.50
-       * 
-       * Soft amber
-       */
-      "softer": "--cnvs-sys-color-static-amber-softer",
-      /**
-       * oklch(0.2489 0.0771 40.64 / 1)
-       * 
-       * token: base.amber.950
-       * 
-       * Stronger amber
-       */
-      "strongest": "--cnvs-sys-color-static-amber-strongest",
-      /**
-       * oklch(0.9567 0.0948 100.22 / 1)
-       * 
-       * token: base.amber.100
-       * 
-       * Soft amber
-       */
-      "soft": "--cnvs-sys-color-static-amber-soft",
+    "large": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Bold */
+      "fontWeight": "--cnvs-sys-font-weight-bold",
+      /** 40 */
+      "lineHeight": "--cnvs-sys-line-height-heading-large",
+      /** 2rem (32px) */
+      "fontSize": "--cnvs-sys-font-size-heading-large",
+    },
+  },
+  "title": {
+    "small": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Bold */
+      "fontWeight": "--cnvs-sys-font-weight-bold",
+      /** 48 */
+      "lineHeight": "--cnvs-sys-line-height-title-small",
+      /** 2.5rem (40px) */
+      "fontSize": "--cnvs-sys-font-size-title-small",
+    },
+    "medium": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Bold */
+      "fontWeight": "--cnvs-sys-font-weight-bold",
+      /** 56 */
+      "lineHeight": "--cnvs-sys-line-height-title-medium",
+      /** 3rem (48px) */
+      "fontSize": "--cnvs-sys-font-size-title-medium",
+    },
+    "large": {
+      /** Roboto */
+      "fontFamily": "--cnvs-sys-font-family-default",
+      /** Bold */
+      "fontWeight": "--cnvs-sys-font-weight-bold",
+      /** 64 */
+      "lineHeight": "--cnvs-sys-line-height-title-large",
+      /** 3.5rem (56px) */
+      "fontSize": "--cnvs-sys-font-size-title-large",
     },
   },
 };