@workday/canvas-tokens-web 2.0.2 → 2.1.1

package/dist/es6/system/index.d.ts

@@ -1,516 +1,633 @@
 /**
  * Do not edit directly
- * Generated on Mon, 07 Oct 2024 19:58:20 GMT
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
  */
 
-export declare const color: {
-  "bg": {
-    /**
-     * #ffffff
-     * 
-     * token: base.french-vanilla.100
-     * 
-     * Main background color
-     * 
-     */
-    "default": "--cnvs-sys-color-bg-default",
-    /**
-     * rgba(#ffffff,0)
-     * 
-     * token: rgba({base.french-vanilla.100},0)
-     * 
-     * Transparent background
-     */
-    "transparent": "--cnvs-sys-color-bg-transparent",
+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 rgba(#1f262e,0.12), 0 0.125rem 0.5rem 0 rgba(#1f262e,0.08)
+   * 
+   * 
+   * 
+   * Standard card depth
+   */
+  "1": "--cnvs-sys-depth-1",
+  /**
+   * 0 0.125rem 0.5rem 0 rgba(#1f262e,0.12), 0 0.25rem 1rem 0 rgba(#1f262e,0.08)
+   * 
+   * 
+   * 
+   * Top navigation, Bottom Navigation
+   */
+  "2": "--cnvs-sys-depth-2",
+  /**
+   * 0 0.1875rem 0.75rem 0 rgba(#1f262e,0.12), 0 0.375rem 1.5rem 0 rgba(#1f262e,0.08)
+   * 
+   * 
+   * 
+   * Floating Action Buttons (FAB), Menus
+   */
+  "3": "--cnvs-sys-depth-3",
+  /**
+   * 0 0.25rem 1rem 0 rgba(#1f262e,0.12), 0 0.5rem 2rem 0 rgba(#1f262e,0.08)
+   * 
+   * 
+   * 
+   * Bottom Sheets
+   */
+  "4": "--cnvs-sys-depth-4",
+  /**
+   * 0 0.3125rem 1.25rem 0 rgba(#1f262e,0.12), 0 0.625rem 2.5rem 0 rgba(#1f262e,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 rgba(#1f262e,0.12), 0 0.75rem 3rem 0 rgba(#1f262e,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": {
     /**
-     * rgba(#000000,0.64)
+     * 0.12
      * 
-     * token: rgba({sys.color.static.black},{base.opacity.400})
+     * token: base.opacity.200
      * 
-     * Overlay background
+     * Alpha on first shadow
      */
-    "overlay": "--cnvs-sys-color-bg-overlay",
+    "first": "--cnvs-sys-opacity-shadow-first",
     /**
-     * rgba(#000000,0.84)
+     * 0.08
      * 
-     * token: rgba({base.black-pepper.600},{base.opacity.500})
+     * token: base.opacity.100
      * 
-     * Tooltip, Status Indicator
+     * Alpha on second shadow
      */
-    "translucent": "--cnvs-sys-color-bg-translucent",
-    "alt": {
-      /**
-       * #e8ebed
-       * 
-       * token: base.soap.300
-       * 
-       * Hover states
-       */
-      "default": "--cnvs-sys-color-bg-alt-default",
-      /**
-       * #F0F1F2
-       * 
-       * token: base.soap.200
-       * 
-       * Page background
-       */
-      "soft": "--cnvs-sys-color-bg-alt-soft",
-      /**
-       * #f6f7f8
-       * 
-       * token: base.soap.100
-       * 
-       * Disabled inputs and column headers
-       */
-      "softer": "--cnvs-sys-color-bg-alt-softer",
-      /**
-       * #DFE2E6
-       * 
-       * token: base.soap.400
-       * 
-       * Active states
-       */
-      "strong": "--cnvs-sys-color-bg-alt-strong",
-      /**
-       * #ced3d9
-       * 
-       * token: base.soap.500
-       * 
-       * Active states
-       */
-      "stronger": "--cnvs-sys-color-bg-alt-stronger",
-    },
-    "muted": {
-      /** #A1AAB3 */
-      "softer": "--cnvs-sys-color-bg-muted-softer",
-      /** #7b858f */
-      "soft": "--cnvs-sys-color-bg-muted-soft",
-      /** #5E6A75 */
-      "default": "--cnvs-sys-color-bg-muted-default",
-      /** #333d47 */
-      "strong": "--cnvs-sys-color-bg-muted-strong",
-    },
-    "contrast": {
-      /**
-       * #333333
-       * 
-       * token: base.black-pepper.400
-       * 
-       * Contrast backgrounds, like Secondary Buttons
-       */
-      "default": "--cnvs-sys-color-bg-contrast-default",
-      /**
-       * #1e1e1e
-       * 
-       * token: base.black-pepper.500
-       * 
-       * Contrast backgrounds, like Secondary Buttons
-       */
-      "strong": "--cnvs-sys-color-bg-contrast-strong",
-    },
-    "primary": {
-      /**
-       * #0875E1
-       * 
-       * token: base.blueberry.400
-       * 
-       * Primary brand color
-       */
-      "default": "--cnvs-sys-color-bg-primary-default",
-      /**
-       * #A6D2FF
-       * 
-       * token: base.blueberry.200
-       * 
-       * Brand selected background
-       */
-      "soft": "--cnvs-sys-color-bg-primary-soft",
-      /**
-       * #005cb9
-       * 
-       * token: base.blueberry.500
-       * 
-       * Brand hover background
-       */
-      "strong": "--cnvs-sys-color-bg-primary-strong",
-      /**
-       * #004387
-       * 
-       * token: base.blueberry.600
-       * 
-       * Brand active background
-       */
-      "stronger": "--cnvs-sys-color-bg-primary-stronger",
+    "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)
+   * 
+   * token: base.unit
+   * 
+   * Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
+   */
+  "x1": "--cnvs-sys-shape-x1",
+  /**
+   * 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",
     },
-    "positive": {
-      /**
-       * #43c463
-       * 
-       * token: base.green-apple.400
-       * 
-       * Disabled success background
-       */
-      "default": "--cnvs-sys-color-bg-positive-default",
-      /**
-       * #ebfff0
-       * 
-       * token: base.green-apple.100
-       * 
-       * Softer success background
-       */
-      "softer": "--cnvs-sys-color-bg-positive-softer",
-      /**
-       * #319c4c
-       * 
-       * token: base.green-apple.500
-       * 
-       * Hover success background
-       */
-      "strong": "--cnvs-sys-color-bg-positive-strong",
-      /**
-       * #217a37
-       * 
-       * token: base.green-apple.600
-       * 
-       * Active success background
-       */
-      "stronger": "--cnvs-sys-color-bg-positive-stronger",
+  },
+  "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",
     },
-    "caution": {
-      /**
-       * #ffa126
-       * 
-       * token: base.cantaloupe.400
-       * 
-       * Default warning background
-       */
-      "default": "--cnvs-sys-color-bg-caution-default",
-      /**
-       * #ffeed9
-       * 
-       * token: base.cantaloupe.100
-       * 
-       * Disabled warning background
-       */
-      "softer": "--cnvs-sys-color-bg-caution-softer",
-      /**
-       * #f38b00
-       * 
-       * token: base.cantaloupe.500
-       * 
-       * Strong warning background
-       */
-      "strong": "--cnvs-sys-color-bg-caution-strong",
-      /**
-       * #c06c00
-       * 
-       * token: base.cantaloupe.600
-       * 
-       * Stronger warning background
-       */
-      "stronger": "--cnvs-sys-color-bg-caution-stronger",
+    "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",
     },
-    "critical": {
-      /**
-       * #de2e21
-       * 
-       * token: base.cinnamon.500
-       * 
-       * Default error background
-       */
-      "default": "--cnvs-sys-color-bg-critical-default",
-      /**
-       * #ffefee
-       * 
-       * token: base.cinnamon.100
-       * 
-       * Disabled error background
-       */
-      "softer": "--cnvs-sys-color-bg-critical-softer",
-      /**
-       * #a31b12
-       * 
-       * token: base.cinnamon.600
-       * 
-       * Strong error background
-       */
-      "strong": "--cnvs-sys-color-bg-critical-strong",
-      /**
-       * #80160E
-       * 
-       * token: #80160E
-       * 
-       * Stronger error background
-       */
-      "stronger": "--cnvs-sys-color-bg-critical-stronger",
+    "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",
     },
   },
-  "text": {
-    /**
-     * #494949
-     * 
-     * token: base.black-pepper.300
-     * 
-     * Default text color
-     */
-    "default": "--cnvs-sys-color-text-default",
-    /**
-     * #A1AAB3
-     * 
-     * token: base.licorice.100
-     * 
-     * Disabled text color
-     */
-    "disabled": "--cnvs-sys-color-text-disabled",
-    /**
-     * #5E6A75
-     * 
-     * token: base.licorice.300
-     * 
-     * Hint text color
-     */
-    "hint": "--cnvs-sys-color-text-hint",
-    /**
-     * #333333
-     * 
-     * token: base.black-pepper.400
-     * 
-     * Heading text color
-     */
-    "strong": "--cnvs-sys-color-text-strong",
-    /**
-     * #1e1e1e
-     * 
-     * token: base.black-pepper.500
-     * 
-     * Heading hover text color
-     */
-    "stronger": "--cnvs-sys-color-text-stronger",
-    /**
-     * #ffffff
-     * 
-     * token: base.french-vanilla.100
-     * 
-     * Inverse text color
-     */
-    "inverse": "--cnvs-sys-color-text-inverse",
-    "critical": {
-      /**
-       * #de2e21
-       * 
-       * token: base.cinnamon.500
-       * 
-       * Error text
-       */
-      "default": "--cnvs-sys-color-text-critical-default",
+  "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",
     },
-    "primary": {
-      /**
-       * #0875E1
-       * 
-       * token: base.blueberry.400
-       * 
-       * Branded text
-       */
-      "default": "--cnvs-sys-color-text-primary-default",
-      /**
-       * #005cb9
-       * 
-       * token: base.blueberry.500
-       * 
-       * Branded hover text
-       */
-      "strong": "--cnvs-sys-color-text-primary-strong",
-      /**
-       * #004387
-       * 
-       * token: base.blueberry.600
-       * 
-       * Active links
-       */
-      "stronger": "--cnvs-sys-color-text-primary-stronger",
+    "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",
+    },
+    "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",
     },
-    "caution": {
-      /**
-       * #333333
-       * 
-       * token: sys.color.text.strong
-       * 
-       * Warning text
-       */
-      "default": "--cnvs-sys-color-text-caution-default",
-      /**
-       * #1e1e1e
-       * 
-       * token: sys.color.text.stronger
-       * 
-       * Strong warning text
-       */
-      "strong": "--cnvs-sys-color-text-caution-strong",
+    "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",
     },
   },
-  "icon": {
+};
+
+export declare const color: {
+  "bg": {
     /**
-     * #7b858f
+     * #ffffff
      * 
-     * token: base.licorice.200
+     * token: base.french-vanilla.100
+     * 
+     * Main background color
      * 
-     * Default icon color
      */
-    "default": "--cnvs-sys-color-icon-default",
+    "default": "--cnvs-sys-color-bg-default",
     /**
-     * #A1AAB3
+     * rgba(#ffffff,0)
      * 
-     * token: base.licorice.100
+     * token: rgba({base.french-vanilla.100},0)
      * 
-     * Disabled icon color
+     * Transparent background
      */
-    "soft": "--cnvs-sys-color-icon-soft",
+    "transparent": "--cnvs-sys-color-bg-transparent",
     /**
-     * #333d47
+     * rgba(#000000,0.64)
      * 
-     * token: base.licorice.500
+     * token: rgba({sys.color.static.black},{base.opacity.400})
      * 
-     * Hover icon color
+     * Overlay background
      */
-    "strong": "--cnvs-sys-color-icon-strong",
+    "overlay": "--cnvs-sys-color-bg-overlay",
     /**
-     * #ffffff
+     * rgba(#000000,0.84)
      * 
-     * token: base.french-vanilla.100
+     * token: rgba({base.black-pepper.600},{base.opacity.500})
      * 
-     * Inverse icon color
+     * Tooltip, Status Indicator
      */
-    "inverse": "--cnvs-sys-color-icon-inverse",
-    "primary": {
-      /**
-       * #0875E1
-       * 
-       * token: base.blueberry.400
-       * 
-       * Brand icon color
-       */
-      "default": "--cnvs-sys-color-icon-primary-default",
-      /**
-       * #005cb9
-       * 
-       * token: base.blueberry.500
-       * 
-       * Stronger brand icon color
-       */
-      "strong": "--cnvs-sys-color-icon-primary-strong",
-    },
-    "positive": {
+    "translucent": "--cnvs-sys-color-bg-translucent",
+    "alt": {
       /**
-       * #319c4c
+       * #e8ebed
        * 
-       * token: base.green-apple.500
+       * token: base.soap.300
        * 
-       * Success icon color
+       * Hover states
        */
-      "default": "--cnvs-sys-color-icon-positive-default",
-    },
-    "critical": {
+      "default": "--cnvs-sys-color-bg-alt-default",
       /**
-       * #de2e21
+       * #F0F1F2
        * 
-       * token: base.cinnamon.500
+       * token: base.soap.200
        * 
-       * Error icon color
+       * Page background
        */
-      "default": "--cnvs-sys-color-icon-critical-default",
-    },
-    "caution": {
+      "soft": "--cnvs-sys-color-bg-alt-soft",
       /**
-       * #333333
+       * #f6f7f8
        * 
-       * token: base.black-pepper.400
+       * token: base.soap.100
        * 
-       * Caution icon color
+       * Disabled inputs and column headers
        */
-      "default": "--cnvs-sys-color-icon-caution-default",
+      "softer": "--cnvs-sys-color-bg-alt-softer",
       /**
-       * #1e1e1e
+       * #DFE2E6
        * 
-       * token: base.black-pepper.500
+       * token: base.soap.400
        * 
-       * Strong caution icon color
+       * Active states
        */
-      "strong": "--cnvs-sys-color-icon-caution-strong",
-    },
-  },
-  "fg": {
-    /**
-     * #494949
-     * 
-     * token: base.black-pepper.300
-     * 
-     * Body
-     */
-    "default": "--cnvs-sys-color-fg-default",
-    /**
-     * #333333
-     * 
-     * token: base.black-pepper.400
-     * 
-     * Headings
-     */
-    "strong": "--cnvs-sys-color-fg-strong",
-    /**
-     * #1e1e1e
-     * 
-     * token: base.black-pepper.500
-     * 
-     * Heading on hover
-     */
-    "stronger": "--cnvs-sys-color-fg-stronger",
-    /**
-     * #A1AAB3
-     * 
-     * token: base.licorice.100
-     * 
-     * Disabled
-     */
-    "disabled": "--cnvs-sys-color-fg-disabled",
-    /**
-     * #ffffff
-     * 
-     * token: base.french-vanilla.100
-     * 
-     * Inverse
-     */
-    "inverse": "--cnvs-sys-color-fg-inverse",
-    "critical": {
+      "strong": "--cnvs-sys-color-bg-alt-strong",
       /**
-       * #de2e21
+       * #ced3d9
        * 
-       * token: base.cinnamon.500
+       * token: base.soap.500
        * 
-       * Error
+       * Active states
        */
-      "default": "--cnvs-sys-color-fg-critical-default",
+      "stronger": "--cnvs-sys-color-bg-alt-stronger",
     },
     "muted": {
+      /** #A1AAB3 */
+      "softer": "--cnvs-sys-color-bg-muted-softer",
+      /** #7b858f */
+      "soft": "--cnvs-sys-color-bg-muted-soft",
+      /** #5E6A75 */
+      "default": "--cnvs-sys-color-bg-muted-default",
+      /** #333d47 */
+      "strong": "--cnvs-sys-color-bg-muted-strong",
+    },
+    "contrast": {
       /**
-       * #7b858f
+       * #333333
        * 
-       * token: base.licorice.200
+       * token: base.black-pepper.400
        * 
-       * Tab item text
+       * Contrast backgrounds, like Secondary Buttons
        */
-      "soft": "--cnvs-sys-color-fg-muted-soft",
+      "default": "--cnvs-sys-color-bg-contrast-default",
       /**
-       * #5E6A75
+       * #1e1e1e
        * 
-       * token: base.licorice.300
+       * token: base.black-pepper.500
        * 
-       * Hint text
+       * Contrast backgrounds, like Secondary Buttons
        */
-      "default": "--cnvs-sys-color-fg-muted-default",
-      /** #4a5561 */
-      "strong": "--cnvs-sys-color-fg-muted-strong",
-      /** #333d47 */
-      "stronger": "--cnvs-sys-color-fg-muted-stronger",
+      "strong": "--cnvs-sys-color-bg-contrast-strong",
     },
     "primary": {
       /**
@@ -518,117 +635,101 @@ export declare const color: {
        * 
        * token: base.blueberry.400
        * 
-       * Interactive foreground elements
+       * Primary brand color
        */
-      "default": "--cnvs-sys-color-fg-primary-default",
+      "default": "--cnvs-sys-color-bg-primary-default",
       /**
-       * #005cb9
+       * #A6D2FF
        * 
-       * token: base.blueberry.500
+       * token: base.blueberry.200
        * 
-       * Hover interactive foregrounds
+       * Brand selected background
        */
-      "strong": "--cnvs-sys-color-fg-primary-strong",
-    },
-    "caution": {
+      "soft": "--cnvs-sys-color-bg-primary-soft",
       /**
-       * #333333
+       * #005cb9
        * 
-       * token: base.black-pepper.400
+       * token: base.blueberry.500
        * 
-       * Warning
+       * Brand hover background
        */
-      "default": "--cnvs-sys-color-fg-caution-default",
+      "strong": "--cnvs-sys-color-bg-primary-strong",
       /**
-       * #1e1e1e
+       * #004387
        * 
-       * token: base.black-pepper.500
+       * token: base.blueberry.600
        * 
-       * Warning on hover
+       * Brand active background
        */
-      "strong": "--cnvs-sys-color-fg-caution-strong",
+      "stronger": "--cnvs-sys-color-bg-primary-stronger",
     },
-    "contrast": {
-      /**
-       * #333333
-       * 
-       * token: base.black-pepper.400
-       * 
-       * Contrast
-       */
-      "default": "--cnvs-sys-color-fg-contrast-default",
+    "positive": {
       /**
-       * #1e1e1e
+       * #43c463
        * 
-       * token: base.black-pepper.500
+       * token: base.green-apple.400
        * 
-       * Strong contrast
+       * Disabled success background
        */
-      "strong": "--cnvs-sys-color-fg-contrast-strong",
-    },
-  },
-  "border": {
-    "input": {
+      "default": "--cnvs-sys-color-bg-positive-default",
       /**
-       * #A1AAB3
+       * #ebfff0
        * 
-       * token: base.licorice.100
+       * token: base.green-apple.100
        * 
-       * Disabled inputs
+       * Softer success background
        */
-      "disabled": "--cnvs-sys-color-border-input-disabled",
+      "softer": "--cnvs-sys-color-bg-positive-softer",
       /**
-       * #7b858f
+       * #319c4c
        * 
-       * token: base.licorice.200
+       * token: base.green-apple.500
        * 
-       * Inputs
+       * Hover success background
        */
-      "default": "--cnvs-sys-color-border-input-default",
+      "strong": "--cnvs-sys-color-bg-positive-strong",
       /**
-       * #333d47
+       * #217a37
        * 
-       * token: base.licorice.500
+       * token: base.green-apple.600
        * 
-       * Input hover
+       * Active success background
        */
-      "strong": "--cnvs-sys-color-border-input-strong",
+      "stronger": "--cnvs-sys-color-bg-positive-stronger",
+    },
+    "caution": {
       /**
-       * #e8ebed
+       * #ffa126
        * 
-       * token: base.soap.300
+       * token: base.cantaloupe.400
        * 
-       * Borders on checkboxes and radios
+       * Default warning background
        */
-      "inverse": "--cnvs-sys-color-border-input-inverse",
-    },
-    "contrast": {
+      "default": "--cnvs-sys-color-bg-caution-default",
       /**
-       * #333333
+       * #ffeed9
        * 
-       * token: base.black-pepper.400
+       * token: base.cantaloupe.100
        * 
-       * Secondary Button
+       * Disabled warning background
        */
-      "default": "--cnvs-sys-color-border-contrast-default",
+      "softer": "--cnvs-sys-color-bg-caution-softer",
       /**
-       * #1e1e1e
+       * #f38b00
        * 
-       * token: base.black-pepper.500
+       * token: base.cantaloupe.500
        * 
-       * Secondary Button Hover
+       * Strong warning background
        */
-      "strong": "--cnvs-sys-color-border-contrast-strong",
-    },
-    "primary": {
+      "strong": "--cnvs-sys-color-bg-caution-strong",
       /**
-       * #0875E1
+       * #c06c00
        * 
-       * token: base.blueberry.400
+       * token: base.cantaloupe.600
        * 
-       * Brand, Focus
+       * Stronger warning background
        */
-      "default": "--cnvs-sys-color-border-primary-default",
+      "stronger": "--cnvs-sys-color-bg-caution-stronger",
     },
     "critical": {
       /**
@@ -636,772 +737,671 @@ export declare const color: {
        * 
        * token: base.cinnamon.500
        * 
-       * Error
+       * Default error background
        */
-      "default": "--cnvs-sys-color-border-critical-default",
-    },
-    "caution": {
+      "default": "--cnvs-sys-color-bg-critical-default",
       /**
-       * #ffa126
+       * #ffefee
        * 
-       * token: base.cantaloupe.400
+       * token: base.cinnamon.100
        * 
-       * Warning inner
+       * Disabled error background
        */
-      "default": "--cnvs-sys-color-border-caution-default",
+      "softer": "--cnvs-sys-color-bg-critical-softer",
       /**
-       * #c06c00
+       * #a31b12
        * 
-       * token: base.cantaloupe.600
+       * token: base.cinnamon.600
        * 
-       * Warning outer (box shadow)
+       * Strong error background
        */
-      "strong": "--cnvs-sys-color-border-caution-strong",
+      "strong": "--cnvs-sys-color-bg-critical-strong",
+      /**
+       * #80160E
+       * 
+       * token: #80160E
+       * 
+       * Stronger error background
+       */
+      "stronger": "--cnvs-sys-color-bg-critical-stronger",
     },
+  },
+  "text": {
     /**
-     * rgba(#ffffff,0%)
-     * 
-     * token: rgba({sys.color.static.white},0%)
-     * 
-     * Transparent
-     */
-    "transparent": "--cnvs-sys-color-border-transparent",
-    /**
-     * #ffffff
+     * #494949
      * 
-     * token: base.french-vanilla.100
+     * token: base.black-pepper.300
      * 
-     * Inverse
+     * Default text color
      */
-    "inverse": "--cnvs-sys-color-border-inverse",
+    "default": "--cnvs-sys-color-text-default",
     /**
-     * #DFE2E6
+     * #A1AAB3
      * 
-     * token: base.soap.400
+     * token: base.licorice.100
      * 
-     * Dividers
+     * Disabled text color
      */
-    "divider": "--cnvs-sys-color-border-divider",
+    "disabled": "--cnvs-sys-color-text-disabled",
     /**
-     * #ced3d9
+     * #5E6A75
      * 
-     * token: base.soap.500
+     * token: base.licorice.300
      * 
-     * Cards, Toasts
+     * Hint text color
      */
-    "container": "--cnvs-sys-color-border-container",
-  },
-  "shadow": {
+    "hint": "--cnvs-sys-color-text-hint",
     /**
-     * rgba(#1f262e,0.12)
+     * #333333
      * 
-     * token: rgba({sys.color.shadow.default},{base.opacity.200})
+     * token: base.black-pepper.400
      * 
-     * First shadow color
+     * Heading text color
      */
-    "1": "--cnvs-sys-color-shadow-1",
+    "strong": "--cnvs-sys-color-text-strong",
     /**
-     * rgba(#1f262e,0.08)
+     * #1e1e1e
      * 
-     * token: rgba({base.licorice.600},{base.opacity.100})
+     * token: base.black-pepper.500
      * 
-     * Second shadow color
+     * Heading hover text color
      */
-    "2": "--cnvs-sys-color-shadow-2",
+    "stronger": "--cnvs-sys-color-text-stronger",
     /**
-     * #1f262e
+     * #ffffff
      * 
-     * token: base.licorice.600
+     * token: base.french-vanilla.100
      * 
-     * Main shadow color
+     * Inverse text color
      */
-    "default": "--cnvs-sys-color-shadow-default",
-  },
-  "static": {
-    "blue": {
+    "inverse": "--cnvs-sys-color-text-inverse",
+    "critical": {
       /**
-       * #0875E1
+       * #de2e21
        * 
-       * token: base.blueberry.400
+       * token: base.cinnamon.500
        * 
-       * Blue
+       * Error text
        */
-      "default": "--cnvs-sys-color-static-blue-default",
+      "default": "--cnvs-sys-color-text-critical-default",
+    },
+    "primary": {
       /**
-       * #D7EAFC
+       * #0875E1
        * 
-       * token: base.blueberry.100
+       * token: base.blueberry.400
        * 
-       * Light blue
+       * Branded text
        */
-      "soft": "--cnvs-sys-color-static-blue-soft",
+      "default": "--cnvs-sys-color-text-primary-default",
       /**
        * #005cb9
        * 
        * token: base.blueberry.500
        * 
-       * Stronger blue
-       */
-      "strong": "--cnvs-sys-color-static-blue-strong",
-    },
-    "gold": {
-      /**
-       * #8C6000
-       * 
-       * token: base.toasted-marshmallow.600
-       * 
-       * Foregrounds in low emphasis status indicators
-       */
-      "stronger": "--cnvs-sys-color-static-gold-stronger",
-    },
-    "green": {
-      /**
-       * #43c463
-       * 
-       * token: base.green-apple.400
-       * 
-       * Default green
-       */
-      "default": "--cnvs-sys-color-static-green-default",
-      /**
-       * #ebfff0
-       * 
-       * token: base.green-apple.100
-       * 
-       * Light green
+       * Branded hover text
        */
-      "soft": "--cnvs-sys-color-static-green-soft",
+      "strong": "--cnvs-sys-color-text-primary-strong",
       /**
-       * #217a37
+       * #004387
        * 
-       * token: base.green-apple.600
+       * token: base.blueberry.600
        * 
-       * Stronger green
+       * Active links
        */
-      "strong": "--cnvs-sys-color-static-green-strong",
+      "stronger": "--cnvs-sys-color-text-primary-stronger",
     },
-    "red": {
-      /**
-       * #de2e21
-       * 
-       * token: base.cinnamon.500
-       * 
-       * Red
-       */
-      "default": "--cnvs-sys-color-static-red-default",
-      /**
-       * #ffefee
-       * 
-       * token: base.cinnamon.100
-       * 
-       * Light red
-       */
-      "soft": "--cnvs-sys-color-static-red-soft",
+    "caution": {
       /**
-       * #a31b12
+       * #333333
        * 
-       * token: base.cinnamon.600
+       * token: sys.color.text.strong
        * 
-       * Strong red
+       * Warning text
        */
-      "strong": "--cnvs-sys-color-static-red-strong",
-    },
-    "orange": {
+      "default": "--cnvs-sys-color-text-caution-default",
       /**
-       * #ffa126
+       * #1e1e1e
        * 
-       * token: base.cantaloupe.400
+       * token: sys.color.text.stronger
        * 
-       * Orange
+       * Strong warning text
        */
-      "default": "--cnvs-sys-color-static-orange-default",
+      "strong": "--cnvs-sys-color-text-caution-strong",
+    },
+  },
+  "icon": {
+    /**
+     * #7b858f
+     * 
+     * token: base.licorice.200
+     * 
+     * Default icon color
+     */
+    "default": "--cnvs-sys-color-icon-default",
+    /**
+     * #A1AAB3
+     * 
+     * token: base.licorice.100
+     * 
+     * Disabled icon color
+     */
+    "soft": "--cnvs-sys-color-icon-soft",
+    /**
+     * #333d47
+     * 
+     * token: base.licorice.500
+     * 
+     * Hover icon color
+     */
+    "strong": "--cnvs-sys-color-icon-strong",
+    /**
+     * #ffffff
+     * 
+     * token: base.french-vanilla.100
+     * 
+     * Inverse icon color
+     */
+    "inverse": "--cnvs-sys-color-icon-inverse",
+    "primary": {
       /**
-       * #ffeed9
+       * #0875E1
        * 
-       * token: base.cantaloupe.100
+       * token: base.blueberry.400
        * 
-       * Soft orange
+       * Brand icon color
        */
-      "soft": "--cnvs-sys-color-static-orange-soft",
+      "default": "--cnvs-sys-color-icon-primary-default",
       /**
-       * #c06c00
+       * #005cb9
        * 
-       * token: base.cantaloupe.600
+       * token: base.blueberry.500
        * 
-       * Stronger orange
+       * Stronger brand icon color
        */
-      "strong": "--cnvs-sys-color-static-orange-strong",
+      "strong": "--cnvs-sys-color-icon-primary-strong",
     },
-    "gray": {
+    "positive": {
       /**
-       * #5E6A75
+       * #319c4c
        * 
-       * token: base.licorice.300
+       * token: base.green-apple.500
        * 
-       * Gray
+       * Success icon color
        */
-      "default": "--cnvs-sys-color-static-gray-default",
+      "default": "--cnvs-sys-color-icon-positive-default",
+    },
+    "critical": {
       /**
-       * #e8ebed
+       * #de2e21
        * 
-       * token: base.soap.300
+       * token: base.cinnamon.500
        * 
-       * Light gray
+       * Error icon color
        */
-      "soft": "--cnvs-sys-color-static-gray-soft",
+      "default": "--cnvs-sys-color-icon-critical-default",
+    },
+    "caution": {
       /**
-       * #4a5561
+       * #333333
        * 
-       * token: base.licorice.400
+       * token: base.black-pepper.400
        * 
-       * Stronger gray
+       * Caution icon color
        */
-      "strong": "--cnvs-sys-color-static-gray-strong",
+      "default": "--cnvs-sys-color-icon-caution-default",
       /**
-       * #333d47
+       * #1e1e1e
        * 
-       * token: base.licorice.500
+       * token: base.black-pepper.500
        * 
-       * Strongerer gray
+       * Strong caution icon color
        */
-      "stronger": "--cnvs-sys-color-static-gray-stronger",
+      "strong": "--cnvs-sys-color-icon-caution-strong",
     },
+  },
+  "fg": {
     /**
-     * #ffffff
-     * 
-     * token: base.french-vanilla.100
-     * 
-     * Just white
-     */
-    "white": "--cnvs-sys-color-static-white",
-    /**
-     * #000000
+     * #494949
      * 
-     * token: base.black-pepper.600
+     * token: base.black-pepper.300
      * 
-     * Just black
+     * Body
      */
-    "black": "--cnvs-sys-color-static-black",
-  },
-};
-
-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 rgba(#1f262e,0.12), 0 0.125rem 0.5rem 0 rgba(#1f262e,0.08)
-   * 
-   * 
-   * 
-   * Standard card depth
-   */
-  "1": "--cnvs-sys-depth-1",
-  /**
-   * 0 0.125rem 0.5rem 0 rgba(#1f262e,0.12), 0 0.25rem 1rem 0 rgba(#1f262e,0.08)
-   * 
-   * 
-   * 
-   * Top navigation, Bottom Navigation
-   */
-  "2": "--cnvs-sys-depth-2",
-  /**
-   * 0 0.1875rem 0.75rem 0 rgba(#1f262e,0.12), 0 0.375rem 1.5rem 0 rgba(#1f262e,0.08)
-   * 
-   * 
-   * 
-   * Floating Action Buttons (FAB), Menus
-   */
-  "3": "--cnvs-sys-depth-3",
-  /**
-   * 0 0.25rem 1rem 0 rgba(#1f262e,0.12), 0 0.5rem 2rem 0 rgba(#1f262e,0.08)
-   * 
-   * 
-   * 
-   * Bottom Sheets
-   */
-  "4": "--cnvs-sys-depth-4",
-  /**
-   * 0 0.3125rem 1.25rem 0 rgba(#1f262e,0.12), 0 0.625rem 2.5rem 0 rgba(#1f262e,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 rgba(#1f262e,0.12), 0 0.75rem 3rem 0 rgba(#1f262e,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": {
+    "default": "--cnvs-sys-color-fg-default",
     /**
-     * 0.12
+     * #333333
      * 
-     * token: base.opacity.200
+     * token: base.black-pepper.400
      * 
-     * Alpha on first shadow
+     * Headings
      */
-    "first": "--cnvs-sys-opacity-shadow-first",
+    "strong": "--cnvs-sys-color-fg-strong",
     /**
-     * 0.08
+     * #1e1e1e
      * 
-     * token: base.opacity.100
+     * token: base.black-pepper.500
      * 
-     * Alpha on second shadow
+     * Heading on hover
      */
-    "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)
-   * 
-   * token: base.unit
-   * 
-   * Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
-   */
-  "x1": "--cnvs-sys-shape-x1",
-  /**
-   * 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",
+    "stronger": "--cnvs-sys-color-fg-stronger",
+    /**
+     * #A1AAB3
+     * 
+     * token: base.licorice.100
+     * 
+     * Disabled
+     */
+    "disabled": "--cnvs-sys-color-fg-disabled",
+    /**
+     * #ffffff
+     * 
+     * token: base.french-vanilla.100
+     * 
+     * Inverse
+     */
+    "inverse": "--cnvs-sys-color-fg-inverse",
+    "critical": {
+      /**
+       * #de2e21
+       * 
+       * token: base.cinnamon.500
+       * 
+       * Error
+       */
+      "default": "--cnvs-sys-color-fg-critical-default",
     },
-    "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",
+    "muted": {
+      /**
+       * #7b858f
+       * 
+       * token: base.licorice.200
+       * 
+       * Tab item text
+       */
+      "soft": "--cnvs-sys-color-fg-muted-soft",
+      /**
+       * #5E6A75
+       * 
+       * token: base.licorice.300
+       * 
+       * Hint text
+       */
+      "default": "--cnvs-sys-color-fg-muted-default",
+      /** #4a5561 */
+      "strong": "--cnvs-sys-color-fg-muted-strong",
+      /** #333d47 */
+      "stronger": "--cnvs-sys-color-fg-muted-stronger",
     },
-    "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",
+    "primary": {
+      /**
+       * #0875E1
+       * 
+       * token: base.blueberry.400
+       * 
+       * Interactive foreground elements
+       */
+      "default": "--cnvs-sys-color-fg-primary-default",
+      /**
+       * #005cb9
+       * 
+       * token: base.blueberry.500
+       * 
+       * Hover interactive foregrounds
+       */
+      "strong": "--cnvs-sys-color-fg-primary-strong",
+    },
+    "caution": {
+      /**
+       * #333333
+       * 
+       * token: base.black-pepper.400
+       * 
+       * Warning
+       */
+      "default": "--cnvs-sys-color-fg-caution-default",
+      /**
+       * #1e1e1e
+       * 
+       * token: base.black-pepper.500
+       * 
+       * Warning on hover
+       */
+      "strong": "--cnvs-sys-color-fg-caution-strong",
+    },
+    "contrast": {
+      /**
+       * #333333
+       * 
+       * token: base.black-pepper.400
+       * 
+       * Contrast
+       */
+      "default": "--cnvs-sys-color-fg-contrast-default",
+      /**
+       * #1e1e1e
+       * 
+       * token: base.black-pepper.500
+       * 
+       * Strong contrast
+       */
+      "strong": "--cnvs-sys-color-fg-contrast-strong",
     },
   },
-  "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",
+  "border": {
+    "input": {
+      /**
+       * #A1AAB3
+       * 
+       * token: base.licorice.100
+       * 
+       * Disabled inputs
+       */
+      "disabled": "--cnvs-sys-color-border-input-disabled",
+      /**
+       * #7b858f
+       * 
+       * token: base.licorice.200
+       * 
+       * Inputs
+       */
+      "default": "--cnvs-sys-color-border-input-default",
+      /**
+       * #333d47
+       * 
+       * token: base.licorice.500
+       * 
+       * Input hover
+       */
+      "strong": "--cnvs-sys-color-border-input-strong",
+      /**
+       * #e8ebed
+       * 
+       * token: base.soap.300
+       * 
+       * Borders on checkboxes and radios
+       */
+      "inverse": "--cnvs-sys-color-border-input-inverse",
     },
-    "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",
+    "contrast": {
+      /**
+       * #333333
+       * 
+       * token: base.black-pepper.400
+       * 
+       * Secondary Button
+       */
+      "default": "--cnvs-sys-color-border-contrast-default",
+      /**
+       * #1e1e1e
+       * 
+       * token: base.black-pepper.500
+       * 
+       * Secondary Button Hover
+       */
+      "strong": "--cnvs-sys-color-border-contrast-strong",
     },
-    "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",
+    "primary": {
+      /**
+       * #0875E1
+       * 
+       * token: base.blueberry.400
+       * 
+       * Brand, Focus
+       */
+      "default": "--cnvs-sys-color-border-primary-default",
+    },
+    "critical": {
+      /**
+       * #de2e21
+       * 
+       * token: base.cinnamon.500
+       * 
+       * Error
+       */
+      "default": "--cnvs-sys-color-border-critical-default",
+    },
+    "caution": {
+      /**
+       * #ffa126
+       * 
+       * token: base.cantaloupe.400
+       * 
+       * Warning inner
+       */
+      "default": "--cnvs-sys-color-border-caution-default",
+      /**
+       * #c06c00
+       * 
+       * token: base.cantaloupe.600
+       * 
+       * Warning outer (box shadow)
+       */
+      "strong": "--cnvs-sys-color-border-caution-strong",
     },
+    /**
+     * rgba(#ffffff,0%)
+     * 
+     * token: rgba({sys.color.static.white},0%)
+     * 
+     * Transparent
+     */
+    "transparent": "--cnvs-sys-color-border-transparent",
+    /**
+     * #ffffff
+     * 
+     * token: base.french-vanilla.100
+     * 
+     * Inverse
+     */
+    "inverse": "--cnvs-sys-color-border-inverse",
+    /**
+     * #DFE2E6
+     * 
+     * token: base.soap.400
+     * 
+     * Dividers
+     */
+    "divider": "--cnvs-sys-color-border-divider",
+    /**
+     * #ced3d9
+     * 
+     * token: base.soap.500
+     * 
+     * Cards, Toasts
+     */
+    "container": "--cnvs-sys-color-border-container",
   },
-  "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",
+  "shadow": {
+    /**
+     * rgba(#1f262e,0.12)
+     * 
+     * token: rgba({sys.color.shadow.default},{base.opacity.200})
+     * 
+     * First shadow color
+     */
+    "1": "--cnvs-sys-color-shadow-1",
+    /**
+     * rgba(#1f262e,0.08)
+     * 
+     * token: rgba({base.licorice.600},{base.opacity.100})
+     * 
+     * Second shadow color
+     */
+    "2": "--cnvs-sys-color-shadow-2",
+    /**
+     * #1f262e
+     * 
+     * token: base.licorice.600
+     * 
+     * Main shadow color
+     */
+    "default": "--cnvs-sys-color-shadow-default",
+  },
+  "static": {
+    "blue": {
+      /**
+       * #0875E1
+       * 
+       * token: base.blueberry.400
+       * 
+       * Blue
+       */
+      "default": "--cnvs-sys-color-static-blue-default",
+      /**
+       * #D7EAFC
+       * 
+       * token: base.blueberry.100
+       * 
+       * Light blue
+       */
+      "soft": "--cnvs-sys-color-static-blue-soft",
+      /**
+       * #005cb9
+       * 
+       * token: base.blueberry.500
+       * 
+       * Stronger blue
+       */
+      "strong": "--cnvs-sys-color-static-blue-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",
+    "gold": {
+      /**
+       * #8C6000
+       * 
+       * token: base.toasted-marshmallow.600
+       * 
+       * Foregrounds in low emphasis status indicators
+       */
+      "stronger": "--cnvs-sys-color-static-gold-stronger",
     },
-    "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": {
+      /**
+       * #43c463
+       * 
+       * token: base.green-apple.400
+       * 
+       * Default green
+       */
+      "default": "--cnvs-sys-color-static-green-default",
+      /**
+       * #ebfff0
+       * 
+       * token: base.green-apple.100
+       * 
+       * Light green
+       */
+      "soft": "--cnvs-sys-color-static-green-soft",
+      /**
+       * #217a37
+       * 
+       * token: base.green-apple.600
+       * 
+       * Stronger green
+       */
+      "strong": "--cnvs-sys-color-static-green-strong",
     },
-  },
-  "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": {
+      /**
+       * #de2e21
+       * 
+       * token: base.cinnamon.500
+       * 
+       * Red
+       */
+      "default": "--cnvs-sys-color-static-red-default",
+      /**
+       * #ffefee
+       * 
+       * token: base.cinnamon.100
+       * 
+       * Light red
+       */
+      "soft": "--cnvs-sys-color-static-red-soft",
+      /**
+       * #a31b12
+       * 
+       * token: base.cinnamon.600
+       * 
+       * Strong red
+       */
+      "strong": "--cnvs-sys-color-static-red-strong",
     },
-    "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",
+    "orange": {
+      /**
+       * #ffa126
+       * 
+       * token: base.cantaloupe.400
+       * 
+       * Orange
+       */
+      "default": "--cnvs-sys-color-static-orange-default",
+      /**
+       * #ffeed9
+       * 
+       * token: base.cantaloupe.100
+       * 
+       * Soft orange
+       */
+      "soft": "--cnvs-sys-color-static-orange-soft",
+      /**
+       * #c06c00
+       * 
+       * token: base.cantaloupe.600
+       * 
+       * Stronger orange
+       */
+      "strong": "--cnvs-sys-color-static-orange-strong",
     },
-    "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",
+    "gray": {
+      /**
+       * #5E6A75
+       * 
+       * token: base.licorice.300
+       * 
+       * Gray
+       */
+      "default": "--cnvs-sys-color-static-gray-default",
+      /**
+       * #e8ebed
+       * 
+       * token: base.soap.300
+       * 
+       * Light gray
+       */
+      "soft": "--cnvs-sys-color-static-gray-soft",
+      /**
+       * #4a5561
+       * 
+       * token: base.licorice.400
+       * 
+       * Stronger gray
+       */
+      "strong": "--cnvs-sys-color-static-gray-strong",
+      /**
+       * #333d47
+       * 
+       * token: base.licorice.500
+       * 
+       * Strongerer gray
+       */
+      "stronger": "--cnvs-sys-color-static-gray-stronger",
     },
+    /**
+     * #ffffff
+     * 
+     * token: base.french-vanilla.100
+     * 
+     * Just white
+     */
+    "white": "--cnvs-sys-color-static-white",
+    /**
+     * #000000
+     * 
+     * token: base.black-pepper.600
+     * 
+     * Just black
+     */
+    "black": "--cnvs-sys-color-static-black",
   },
 };