@workday/canvas-tokens-web 1.3.1 → 2.0.1

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

@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 22:39:08 GMT
+ * Generated on Wed, 03 Jul 2024 19:09:19 GMT
  */
 
-export declare const color = {
+export declare const color: {
   "bg": {
     /**
      * #ffffff
      * 
+     * token: base.french-vanilla.100
+     * 
      * Main background color
      * 
      */
@@ -15,18 +17,24 @@ export declare const color = {
     /**
      * rgba(#ffffff,0)
      * 
+     * token: rgba({base.french-vanilla.100},0)
+     * 
      * Transparent background
      */
     "transparent": "--cnvs-sys-color-bg-transparent",
     /**
      * rgba(#000000,0.64)
      * 
+     * token: rgba({sys.color.static.black},{base.opacity.400})
+     * 
      * Overlay background
      */
     "overlay": "--cnvs-sys-color-bg-overlay",
     /**
      * rgba(#000000,0.84)
      * 
+     * token: rgba({base.black-pepper.600},{base.opacity.500})
+     * 
      * Tooltip, Status Indicator
      */
     "translucent": "--cnvs-sys-color-bg-translucent",
@@ -34,30 +42,40 @@ export declare const color = {
       /**
        * #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",
@@ -76,12 +94,16 @@ export declare const color = {
       /**
        * #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",
@@ -90,24 +112,32 @@ export declare const color = {
       /**
        * #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",
@@ -116,24 +146,32 @@ export declare const color = {
       /**
        * #43c463
        * 
+       * token: base.green-apple.400
+       * 
        * Disabled success background
        */
       "default": "--cnvs-sys-color-bg-positive-default",
       /**
        * #ebfff0
        * 
-       * Default success background
+       * token: base.green-apple.100
+       * 
+       * Softer success background
        */
-      "soft": "--cnvs-sys-color-bg-positive-soft",
+      "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",
@@ -142,24 +180,32 @@ export declare const color = {
       /**
        * #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",
@@ -168,24 +214,32 @@ export declare const color = {
       /**
        * #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",
@@ -195,36 +249,48 @@ export declare const color = {
     /**
      * #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",
@@ -232,6 +298,8 @@ export declare const color = {
       /**
        * #de2e21
        * 
+       * token: base.cinnamon.500
+       * 
        * Error text
        */
       "default": "--cnvs-sys-color-text-critical-default",
@@ -240,18 +308,24 @@ export declare const color = {
       /**
        * #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",
@@ -260,12 +334,16 @@ export declare const color = {
       /**
        * #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",
@@ -275,24 +353,32 @@ export declare const color = {
     /**
      * #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",
@@ -300,12 +386,16 @@ export declare const color = {
       /**
        * #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",
@@ -314,6 +404,8 @@ export declare const color = {
       /**
        * #319c4c
        * 
+       * token: base.green-apple.500
+       * 
        * Success icon color
        */
       "default": "--cnvs-sys-color-icon-positive-default",
@@ -322,6 +414,8 @@ export declare const color = {
       /**
        * #de2e21
        * 
+       * token: base.cinnamon.500
+       * 
        * Error icon color
        */
       "default": "--cnvs-sys-color-icon-critical-default",
@@ -330,12 +424,16 @@ export declare const color = {
       /**
        * #333333
        * 
+       * token: base.black-pepper.400
+       * 
        * Caution icon color
        */
       "default": "--cnvs-sys-color-icon-caution-default",
       /**
        * #1e1e1e
        * 
+       * token: base.black-pepper.500
+       * 
        * Strong caution icon color
        */
       "strong": "--cnvs-sys-color-icon-caution-strong",
@@ -345,30 +443,40 @@ export declare const color = {
     /**
      * #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",
@@ -376,6 +484,8 @@ export declare const color = {
       /**
        * #de2e21
        * 
+       * token: base.cinnamon.500
+       * 
        * Error
        */
       "default": "--cnvs-sys-color-fg-critical-default",
@@ -384,12 +494,16 @@ export declare const color = {
       /**
        * #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",
@@ -402,12 +516,16 @@ export declare const color = {
       /**
        * #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",
@@ -416,12 +534,16 @@ export declare const color = {
       /**
        * #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",
@@ -430,12 +552,16 @@ export declare const color = {
       /**
        * #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",
@@ -446,24 +572,32 @@ export declare const color = {
       /**
        * #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",
@@ -472,12 +606,16 @@ export declare const color = {
       /**
        * #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",
@@ -486,6 +624,8 @@ export declare const color = {
       /**
        * #0875E1
        * 
+       * token: base.blueberry.400
+       * 
        * Brand, Focus
        */
       "default": "--cnvs-sys-color-border-primary-default",
@@ -494,6 +634,8 @@ export declare const color = {
       /**
        * #de2e21
        * 
+       * token: base.cinnamon.500
+       * 
        * Error
        */
       "default": "--cnvs-sys-color-border-critical-default",
@@ -502,12 +644,16 @@ export declare const color = {
       /**
        * #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",
@@ -515,24 +661,32 @@ export declare const color = {
     /**
      * 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",
@@ -541,18 +695,24 @@ export declare const color = {
     /**
      * 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",
@@ -562,18 +722,24 @@ export declare const color = {
       /**
        * #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",
@@ -582,6 +748,8 @@ export declare const color = {
       /**
        * #8C6000
        * 
+       * token: base.toasted-marshmallow.600
+       * 
        * Foregrounds in low emphasis status indicators
        */
       "stronger": "--cnvs-sys-color-static-gold-stronger",
@@ -590,18 +758,24 @@ export declare const color = {
       /**
        * #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",
@@ -610,18 +784,24 @@ export declare const color = {
       /**
        * #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",
@@ -630,18 +810,24 @@ export declare const color = {
       /**
        * #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",
@@ -650,24 +836,32 @@ export declare const color = {
       /**
        * #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",
@@ -675,79 +869,103 @@ export declare const color = {
     /**
      * #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",
   },
-} as const;
+};
 
-export declare const breakpoints = {
+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",
-} as const;
+};
 
-export declare const depth = {
+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)
    */
@@ -755,40 +973,52 @@ export declare const depth = {
   /**
    * 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",
-} as const;
+};
 
-export declare const opacity = {
+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",
@@ -796,85 +1026,111 @@ export declare const opacity = {
     /**
      * 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",
   },
-} as const;
+};
 
-export declare const shape = {
+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",
-} as const;
+};
 
-export declare const space = {
+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
@@ -883,6 +1139,8 @@ export declare const space = {
   /**
    * 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
@@ -891,6 +1149,8 @@ export declare const space = {
   /**
    * 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
    */
@@ -898,6 +1158,8 @@ export declare const space = {
   /**
    * 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
@@ -906,23 +1168,25 @@ export declare const space = {
   /**
    * 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",
-} as const;
+};
 
-export declare const fontFamily = {
+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",
-} as const;
+};
 
-export declare const fontSize = {
+export declare const fontSize: {
   "subtext": {
     /** 0.625rem (10px) */
     "small": "--cnvs-sys-font-size-subtext-small",
@@ -955,9 +1219,9 @@ export declare const fontSize = {
     /** 3.5rem (56px) */
     "large": "--cnvs-sys-font-size-title-large",
   },
-} as const;
+};
 
-export declare const lineHeight = {
+export declare const lineHeight: {
   "subtext": {
     /** 16 */
     "small": "--cnvs-sys-line-height-subtext-small",
@@ -990,9 +1254,9 @@ export declare const lineHeight = {
     /** 64 */
     "large": "--cnvs-sys-line-height-title-large",
   },
-} as const;
+};
 
-export declare const fontWeight = {
+export declare const fontWeight: {
   /** Light */
   "light": "--cnvs-sys-font-weight-light",
   /** Regular */
@@ -1001,9 +1265,9 @@ export declare const fontWeight = {
   "medium": "--cnvs-sys-font-weight-medium",
   /** Bold */
   "bold": "--cnvs-sys-font-weight-bold",
-} as const;
+};
 
-export declare const type = {
+export declare const type: {
   "subtext": {
     "small": {
       /** Roboto */
@@ -1140,4 +1404,4 @@ export declare const type = {
       "fontSize": "--cnvs-base-font-size-600",
     },
   },
-} as const;
+};