@workday/canvas-tokens-web 0.1.6 → 1.0.0

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

@@ -1,58 +1,93 @@
 /**
  * Do not edit directly
- * Generated on Fri, 29 Sep 2023 22:32:54 GMT
+ * Generated on Mon, 23 Oct 2023 23:15:30 GMT
  */
 
 export declare const primary = {
+  /** #D7EAFC */
   "lightest": "--cnvs-brand-primary-lightest",
+  /** #A6D2FF */
   "light": "--cnvs-brand-primary-light",
+  /** #0875E1 */
   "base": "--cnvs-brand-primary-base",
+  /** #005cb9 */
   "dark": "--cnvs-brand-primary-dark",
+  /** #004387 */
   "darkest": "--cnvs-brand-primary-darkest",
-  "accent": "--cnvs-brand-primary-accent"
+  /** #ffffff */
+  "accent": "--cnvs-brand-primary-accent",
 } as const;
 
 export declare const alert = {
+  /** #ffeed9 */
   "lightest": "--cnvs-brand-alert-lightest",
+  /** #fcd49f */
   "light": "--cnvs-brand-alert-light",
+  /** #ffa126 */
   "base": "--cnvs-brand-alert-base",
+  /** #f38b00 */
   "dark": "--cnvs-brand-alert-dark",
+  /** #c06c00 */
   "darkest": "--cnvs-brand-alert-darkest",
-  "accent": "--cnvs-brand-alert-accent"
+  /** #ffffff */
+  "accent": "--cnvs-brand-alert-accent",
 } as const;
 
 export declare const error = {
+  /** #ffefee */
   "lightest": "--cnvs-brand-error-lightest",
+  /** #FCC9C5 */
   "light": "--cnvs-brand-error-light",
+  /** #de2e21 */
   "base": "--cnvs-brand-error-base",
+  /** #a31b12 */
   "dark": "--cnvs-brand-error-dark",
+  /** #80160E */
   "darkest": "--cnvs-brand-error-darkest",
-  "accent": "--cnvs-brand-error-accent"
+  /** #ffffff */
+  "accent": "--cnvs-brand-error-accent",
 } as const;
 
 export declare const success = {
+  /** #ebfff0 */
   "lightest": "--cnvs-brand-success-lightest",
+  /** #5fe380 */
   "light": "--cnvs-brand-success-light",
+  /** #43c463 */
   "base": "--cnvs-brand-success-base",
+  /** #319c4c */
   "dark": "--cnvs-brand-success-dark",
+  /** #217a37 */
   "darkest": "--cnvs-brand-success-darkest",
-  "accent": "--cnvs-brand-success-accent"
+  /** #ffffff */
+  "accent": "--cnvs-brand-success-accent",
 } as const;
 
 export declare const neutral = {
+  /** #F0F1F2 */
   "lightest": "--cnvs-brand-neutral-lightest",
+  /** #e8ebed */
   "light": "--cnvs-brand-neutral-light",
+  /** #B9C0C7 */
   "base": "--cnvs-brand-neutral-base",
+  /** #5E6A75 */
   "dark": "--cnvs-brand-neutral-dark",
+  /** #4a5561 */
   "darkest": "--cnvs-brand-neutral-darkest",
-  "accent": "--cnvs-brand-neutral-accent"
+  /** #ffffff */
+  "accent": "--cnvs-brand-neutral-accent",
 } as const;
 
 export declare const common = {
+  /** #0875E1 */
   "focusOutline": "--cnvs-brand-common-focus-outline",
+  /** #de2e21 */
   "errorInner": "--cnvs-brand-common-error-inner",
-  "alertInner": "--cnvs-brand-common-alert-inner"
+  /** #ffa126 */
+  "alertInner": "--cnvs-brand-common-alert-inner",
 } as const;
 
-export declare const gradient = "--cnvs-brand-gradient" as const;
-
+export declare const gradient = {
+  /** linear-gradient(90deg, #0875E1 0%, #005cb9 100%) */
+  "primary": "--cnvs-brand-gradient-primary",
+} as const;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 29 Sep 2023 22:32:54 GMT
+ * Generated on Mon, 23 Oct 2023 23:15:30 GMT
  */
 
 "use strict";
@@ -51,4 +51,6 @@ exports.common = {
   "errorInner": "--cnvs-brand-common-error-inner",
   "alertInner": "--cnvs-brand-common-alert-inner"
 };
-exports.gradient = "--cnvs-brand-gradient";
+exports.gradient = {
+  "primary": "--cnvs-brand-gradient-primary"
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 29 Sep 2023 22:32:54 GMT
+ * Generated on Mon, 23 Oct 2023 23:15:30 GMT
  */
 
 import * as base from "./base";

package/dist/common-js/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 29 Sep 2023 22:32:54 GMT
+ * Generated on Mon, 23 Oct 2023 23:15:30 GMT
  */
 
 "use strict";

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

@@ -1,287 +1,366 @@
 /**
  * Do not edit directly
- * Generated on Fri, 29 Sep 2023 22:32:54 GMT
+ * Generated on Mon, 23 Oct 2023 23:15:30 GMT
  */
 
-export declare const border = "--cnvs-sys-border" as const;
-
-export declare const color = {
-  "bg": {
-    "default": "--cnvs-sys-color-bg-default",
-    "alt": "--cnvs-sys-color-bg-alt",
-    "hover": "--cnvs-sys-color-bg-hover",
-    "active": "--cnvs-sys-color-bg-active",
-    "selected": "--cnvs-sys-color-bg-selected",
-    "primary": {
-      "default": "--cnvs-sys-color-bg-primary-default",
-      "hover": "--cnvs-sys-color-bg-primary-hover",
-      "active": "--cnvs-sys-color-bg-primary-active"
-    },
-    "secondary": {
-      "default": "--cnvs-sys-color-bg-secondary-default",
-      "focus": "--cnvs-sys-color-bg-secondary-focus",
-      "hover": "--cnvs-sys-color-bg-secondary-hover",
-      "active": "--cnvs-sys-color-bg-secondary-active"
-    },
-    "delete": {
-      "default": "--cnvs-sys-color-bg-delete-default",
-      "hover": "--cnvs-sys-color-bg-delete-hover",
-      "active": "--cnvs-sys-color-bg-delete-active"
-    },
-    "status": {
-      "success": "--cnvs-sys-color-bg-status-success",
-      "error": "--cnvs-sys-color-bg-status-error",
-      "alert": "--cnvs-sys-color-bg-status-alert"
-    },
-    "help": "--cnvs-sys-color-bg-help",
-    "overlay": "--cnvs-sys-color-bg-overlay"
-  },
-  "fg": {
-    "type": {
-      "heading": "--cnvs-sys-color-fg-type-heading",
-      "body": "--cnvs-sys-color-fg-type-body",
-      "hint": "--cnvs-sys-color-fg-type-hint",
-      "disabled": "--cnvs-sys-color-fg-type-disabled",
-      "link": {
-        "default": "--cnvs-sys-color-fg-type-link-default",
-        "focus": "--cnvs-sys-color-fg-type-link-focus",
-        "active": "--cnvs-sys-color-fg-type-link-active",
-        "visited": "--cnvs-sys-color-fg-type-link-visited"
-      },
-      "inverse": "--cnvs-sys-color-fg-type-inverse",
-      "error": "--cnvs-sys-color-fg-type-error",
-      "selected": "--cnvs-sys-color-fg-type-selected"
-    },
-    "icon": {
-      "fill": "--cnvs-sys-color-fg-icon-fill",
-      "background": "--cnvs-sys-color-fg-icon-background",
-      "accent": "--cnvs-sys-color-fg-icon-accent",
-      "hover": "--cnvs-sys-color-fg-icon-hover",
-      "disabled": "--cnvs-sys-color-fg-icon-disabled",
-      "inverse": "--cnvs-sys-color-fg-icon-inverse",
-      "primary": "--cnvs-sys-color-fg-icon-primary"
-    }
-  },
-  "border": {
-    "input": {
-      "default": "--cnvs-sys-color-border-input-default",
-      "hover": "--cnvs-sys-color-border-input-hover",
-      "disabled": "--cnvs-sys-color-border-input-disabled",
-      "active": "--cnvs-sys-color-border-input-active",
-      "error": "--cnvs-sys-color-border-input-error",
-      "alert": "--cnvs-sys-color-border-input-alert"
-    }
-  },
-  "shadow": {
-    "main": "--cnvs-sys-color-shadow-main",
-    "accent": "--cnvs-sys-color-shadow-accent"
-  },
-  "focusRing": "--cnvs-sys-color-focus-ring",
-  "gradient": "--cnvs-sys-color-gradient",
-  "overlay": {
-    "modal": "--cnvs-sys-color-overlay-modal",
-    "tooltip": "--cnvs-sys-color-overlay-tooltip"
-  },
-  "dataViz": {
-    "10": "--cnvs-sys-color-data-viz-10",
-    "11": "--cnvs-sys-color-data-viz-11",
-    "12": "--cnvs-sys-color-data-viz-12",
-    "13": "--cnvs-sys-color-data-viz-13",
-    "14": "--cnvs-sys-color-data-viz-14",
-    "15": "--cnvs-sys-color-data-viz-15",
-    "16": "--cnvs-sys-color-data-viz-16",
-    "01": "--cnvs-sys-color-data-viz-01",
-    "02": "--cnvs-sys-color-data-viz-02",
-    "03": "--cnvs-sys-color-data-viz-03",
-    "04": "--cnvs-sys-color-data-viz-04",
-    "05": "--cnvs-sys-color-data-viz-05",
-    "06": "--cnvs-sys-color-data-viz-06",
-    "07": "--cnvs-sys-color-data-viz-07",
-    "08": "--cnvs-sys-color-data-viz-08",
-    "09": "--cnvs-sys-color-data-viz-09"
-  }
-} as const;
-
 export declare const depth = {
+  /**
+   * Standard card depth
+   * 0 0.0625rem 0.25rem 0 rgba(#1f262e,0.12), 0 0.125rem 0.5rem 0 rgba(#1f262e,0.08) 
+   */
   "1": "--cnvs-sys-depth-1",
+  /**
+   * Top navigation, Bottom Navigation
+   * 0 0.125rem 0.5rem 0 rgba(#1f262e,0.12), 0 0.25rem 1rem 0 rgba(#1f262e,0.08) 
+   */
   "2": "--cnvs-sys-depth-2",
+  /**
+   * Floating Action Buttons (FAB), Menus
+   * 0 0.1875rem 0.75rem 0 rgba(#1f262e,0.12), 0 0.375rem 1.5rem 0 rgba(#1f262e,0.08) 
+   */
   "3": "--cnvs-sys-depth-3",
+  /**
+   * Bottom Sheets
+   * 0 0.25rem 1rem 0 rgba(#1f262e,0.12), 0 0.5rem 2rem 0 rgba(#1f262e,0.08) 
+   */
   "4": "--cnvs-sys-depth-4",
+  /**
+   * Banners, Snackbars, Toast Messages, Non modal Dialogs, 
+   * Side Panels (when opacity overlay behaviour is not applied)
+   * 0 0.3125rem 1.25rem 0 rgba(#1f262e,0.12), 0 0.625rem 2.5rem 0 rgba(#1f262e,0.08) 
+   */
   "5": "--cnvs-sys-depth-5",
-  "6": "--cnvs-sys-depth-6"
+  /**
+   * Modal Dialogs, Side Panels (when opacity overlay behaviour
+   * is applied)
+   * 0 0.375rem 1.5rem 0 rgba(#1f262e,0.12), 0 0.75rem 3rem 0 rgba(#1f262e,0.08) 
+   */
+  "6": "--cnvs-sys-depth-6",
 } as const;
 
 export declare const opacity = {
-  "disabled": "--cnvs-sys-opacity-disabled"
+  /**
+   * State layer added on top of disabled elements.
+   * 0.4 
+   */
+  "disabled": "--cnvs-sys-opacity-disabled",
 } as const;
 
 export declare const shape = {
+  /**
+   * This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
+   * 0rem 
+   */
   "zero": "--cnvs-sys-shape-zero",
-  "small": "--cnvs-sys-shape-small",
-  "medium": "--cnvs-sys-shape-medium",
-  "large": "--cnvs-sys-shape-large",
-  "circle": "--cnvs-sys-shape-circle"
+  /**
+   * Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
+   * 0.125rem (2px) 
+   */
+  "half": "--cnvs-sys-shape-half",
+  /**
+   * Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
+   * 0.25rem (4px) 
+   */
+  "x1": "--cnvs-sys-shape-x1",
+  /**
+   * Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
+   * 0.5rem (8px) 
+   */
+  "x2": "--cnvs-sys-shape-x2",
+  /**
+   * Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
+   * 62.5rem (1000px) 
+   */
+  "round": "--cnvs-sys-shape-round",
 } as const;
 
 export declare const space = {
+  /**
+   * Stacks, rows in tables
+   * 0 
+   */
   "zero": "--cnvs-sys-space-zero",
+  /**
+   * Compact spacing between text or icons
+   * 0.25rem (4px) 
+   */
   "x1": "--cnvs-sys-space-x1",
+  /**
+   * Commonly used to group compact elements like icon buttons
+   * 0.5rem (8px) 
+   */
   "x2": "--cnvs-sys-space-x2",
+  /**
+   * Use when compact padding is required
+   * 0.75rem (12px) 
+   */
   "x3": "--cnvs-sys-space-x3",
+  /**
+   * Default space token. Used to group Inputs with related data
+   * 1rem (16px) 
+   */
   "x4": "--cnvs-sys-space-x4",
-  "x5": "--cnvs-sys-space-x5",
+  /**
+   * • Padding around card content
+   * • Related elements where more space between them can be afforded
+   * • Separate section headings or titles from body text or inputs
+   * 1.5rem (24px) 
+   */
   "x6": "--cnvs-sys-space-x6",
+  /**
+   * • Standard spacing between cards
+   * • Used to separate groups of content 
+   * • Separate section headings or titles from body text or inputs
+   * 2rem (32px) 
+   */
   "x8": "--cnvs-sys-space-x8",
+  /**
+   * • Used for outer margins on the overall page content 
+   * • Used for inner margins on large items such as page sections
+   * 2.5rem (40px) 
+   */
   "x10": "--cnvs-sys-space-x10",
-  "x12": "--cnvs-sys-space-x12",
-  "x14": "--cnvs-sys-space-x14",
+  /**
+   * - 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
+   * 4rem (64px) 
+   */
   "x16": "--cnvs-sys-space-x16",
-  "x20": "--cnvs-sys-space-x20"
+  /**
+   * - 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
+   * 5rem (80px) 
+   */
+  "x20": "--cnvs-sys-space-x20",
 } as const;
 
 export declare const fontFamily = {
+  /** Roboto */
   "default": "--cnvs-sys-font-family-default",
+  /** Roboto Mono */
   "mono": "--cnvs-sys-font-family-mono",
-  "global": "--cnvs-sys-font-family-global"
+  /** Noto Sans */
+  "global": "--cnvs-sys-font-family-global",
 } as const;
 
 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",
-    "large": "--cnvs-sys-font-size-subtext-large"
+    /** 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",
-    "large": "--cnvs-sys-font-size-body-large"
+    /** 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",
-    "large": "--cnvs-sys-font-size-heading-large"
+    /** 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",
-    "large": "--cnvs-sys-font-size-title-large"
-  }
+    /** 3.5rem (56px) */
+    "large": "--cnvs-sys-font-size-title-large",
+  },
 } as const;
 
 export declare const lineHeight = {
   "subtext": {
+    /** 1rem (16px) */
     "small": "--cnvs-sys-line-height-subtext-small",
+    /** 1rem (16px) */
     "medium": "--cnvs-sys-line-height-subtext-medium",
-    "large": "--cnvs-sys-line-height-subtext-large"
+    /** 1.25rem (20px) */
+    "large": "--cnvs-sys-line-height-subtext-large",
   },
   "body": {
+    /** 1.5rem (24px) */
     "small": "--cnvs-sys-line-height-body-small",
+    /** 1.75rem (28px) */
     "medium": "--cnvs-sys-line-height-body-medium",
-    "large": "--cnvs-sys-line-height-body-large"
+    /** 1.75rem (28px) */
+    "large": "--cnvs-sys-line-height-body-large",
   },
   "heading": {
+    /** 2rem (32px) */
     "small": "--cnvs-sys-line-height-heading-small",
+    /** 2.25rem (36px) */
     "medium": "--cnvs-sys-line-height-heading-medium",
-    "large": "--cnvs-sys-line-height-heading-large"
+    /** 2.5rem (40px) */
+    "large": "--cnvs-sys-line-height-heading-large",
   },
   "title": {
+    /** 3rem (48px) */
     "small": "--cnvs-sys-line-height-title-small",
+    /** 3.5rem (56px) */
     "medium": "--cnvs-sys-line-height-title-medium",
-    "large": "--cnvs-sys-line-height-title-large"
-  }
+    /** 4rem (64px) */
+    "large": "--cnvs-sys-line-height-title-large",
+  },
 } as const;
 
 export declare const fontWeight = {
+  /** 300 */
   "light": "--cnvs-sys-font-weight-light",
+  /** 400 */
   "normal": "--cnvs-sys-font-weight-normal",
+  /** 500 */
   "medium": "--cnvs-sys-font-weight-medium",
-  "bold": "--cnvs-sys-font-weight-bold"
+  /** 700 */
+  "bold": "--cnvs-sys-font-weight-bold",
 } as const;
 
 export declare const type = {
   "subtext": {
     "small": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 400 */
       "fontWeight": "--cnvs-base-font-weight-400",
-      "lineHeight": "--cnvs-base-line-height-150",
+      /** 1rem (16px) */
+      "lineHeight": "--cnvs-base-line-height-50",
+      /** 0.625rem (10px) */
       "fontSize": "--cnvs-base-font-size-25",
-      "letterSpacing": "--cnvs-base-letter-spacing-50"
+      /** 0.4 */
+      "letterSpacing": "--cnvs-base-letter-spacing-50",
     },
     "medium": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 400 */
       "fontWeight": "--cnvs-base-font-weight-400",
-      "lineHeight": "--cnvs-base-line-height-150",
+      /** 1rem (16px) */
+      "lineHeight": "--cnvs-base-line-height-50",
+      /** 0.75rem (12px) */
       "fontSize": "--cnvs-base-font-size-50",
-      "letterSpacing": "--cnvs-base-letter-spacing-100"
+      /** 0.32 */
+      "letterSpacing": "--cnvs-base-letter-spacing-100",
     },
     "large": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 400 */
       "fontWeight": "--cnvs-base-font-weight-400",
-      "lineHeight": "--cnvs-base-line-height-200",
+      /** 1.25rem (20px) */
+      "lineHeight": "--cnvs-base-line-height-100",
+      /** 0.875rem (14px) */
       "fontSize": "--cnvs-base-font-size-75",
-      "letterSpacing": "--cnvs-base-letter-spacing-150"
-    }
+      /** 0.24 */
+      "letterSpacing": "--cnvs-base-letter-spacing-150",
+    },
   },
   "body": {
     "small": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 400 */
       "fontWeight": "--cnvs-base-font-weight-400",
-      "lineHeight": "--cnvs-base-line-height-250",
+      /** 1.5rem (24px) */
+      "lineHeight": "--cnvs-base-line-height-150",
+      /** 1rem (16px) */
       "fontSize": "--cnvs-base-font-size-100",
-      "letterSpacing": "--cnvs-base-letter-spacing-200"
+      /** 0.16 */
+      "letterSpacing": "--cnvs-base-letter-spacing-200",
     },
     "medium": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 400 */
       "fontWeight": "--cnvs-base-font-weight-400",
-      "lineHeight": "--cnvs-base-line-height-300",
-      "fontSize": "--cnvs-base-font-size-125"
+      /** 1.75rem (28px) */
+      "lineHeight": "--cnvs-base-line-height-200",
+      /** 1.125rem (18px) */
+      "fontSize": "--cnvs-base-font-size-125",
     },
     "large": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 400 */
       "fontWeight": "--cnvs-base-font-weight-400",
-      "lineHeight": "--cnvs-base-line-height-300",
-      "fontSize": "--cnvs-base-font-size-150"
-    }
+      /** 1.75rem (28px) */
+      "lineHeight": "--cnvs-base-line-height-200",
+      /** 1.25rem (20px) */
+      "fontSize": "--cnvs-base-font-size-150",
+    },
   },
   "heading": {
     "small": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 700 */
       "fontWeight": "--cnvs-base-font-weight-700",
-      "lineHeight": "--cnvs-base-line-height-350",
-      "fontSize": "--cnvs-base-font-size-200"
+      /** 2rem (32px) */
+      "lineHeight": "--cnvs-base-line-height-250",
+      /** 1.5rem (24px) */
+      "fontSize": "--cnvs-base-font-size-200",
     },
     "medium": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 700 */
       "fontWeight": "--cnvs-base-font-weight-700",
-      "lineHeight": "--cnvs-base-line-height-400",
-      "fontSize": "--cnvs-base-font-size-250"
+      /** 2.25rem (36px) */
+      "lineHeight": "--cnvs-base-line-height-300",
+      /** 1.75rem (28px) */
+      "fontSize": "--cnvs-base-font-size-250",
     },
     "large": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 700 */
       "fontWeight": "--cnvs-base-font-weight-700",
-      "lineHeight": "--cnvs-base-line-height-450",
-      "fontSize": "--cnvs-base-font-size-300"
-    }
+      /** 2.5rem (40px) */
+      "lineHeight": "--cnvs-base-line-height-350",
+      /** 2rem (32px) */
+      "fontSize": "--cnvs-base-font-size-300",
+    },
   },
   "title": {
     "small": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 700 */
       "fontWeight": "--cnvs-base-font-weight-700",
-      "lineHeight": "--cnvs-base-line-height-500",
-      "fontSize": "--cnvs-base-font-size-400"
+      /** 3rem (48px) */
+      "lineHeight": "--cnvs-base-line-height-400",
+      /** 2.5rem (40px) */
+      "fontSize": "--cnvs-base-font-size-400",
     },
     "medium": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 700 */
       "fontWeight": "--cnvs-base-font-weight-700",
-      "lineHeight": "--cnvs-base-line-height-600",
-      "fontSize": "--cnvs-base-font-size-500"
+      /** 3.5rem (56px) */
+      "lineHeight": "--cnvs-base-line-height-500",
+      /** 3rem (48px) */
+      "fontSize": "--cnvs-base-font-size-500",
     },
     "large": {
+      /** Roboto */
       "fontFamily": "--cnvs-base-font-family-50",
+      /** 700 */
       "fontWeight": "--cnvs-base-font-weight-700",
-      "lineHeight": "--cnvs-base-line-height-700",
-      "fontSize": "--cnvs-base-font-size-600"
-    }
-  }
+      /** 4rem (64px) */
+      "lineHeight": "--cnvs-base-line-height-600",
+      /** 3.5rem (56px) */
+      "fontSize": "--cnvs-base-font-size-600",
+    },
+  },
 } as const;
-