@workday/canvas-tokens-web 3.1.6 → 4.0.0-alpha.2

package/css/base/_variables.css

@@ -1,9 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 22:01:37 GMT
+ * Generated on Tue, 18 Nov 2025 23:28:05 GMT
  */
 
 :root {
+  --cnvs-base-font-size: 1rem; /* Default fontSize for the browser, may be overriden by user preferences */
+  --cnvs-base-baseline: 0.5rem; /* Baseline unit used for the 8pt sizing grid */
+  --cnvs-base-opacity-0: 0;
+  --cnvs-base-opacity-100: 0.08;
+  --cnvs-base-opacity-200: 0.12;
+  --cnvs-base-opacity-250: 0.2;
+  --cnvs-base-opacity-300: 0.4;
+  --cnvs-base-opacity-400: 0.64;
+  --cnvs-base-opacity-500: 0.84;
   --cnvs-base-palette-amber-25: oklch(0.9779 0.0214 95.33 / 1);
   --cnvs-base-palette-amber-50: oklch(0.969 0.0619 101.63 / 1);
   --cnvs-base-palette-amber-100: oklch(0.9567 0.0948 100.22 / 1);
@@ -337,13 +346,49 @@
   --cnvs-base-palette-cappuccino-400: #4A4242;
   --cnvs-base-palette-cappuccino-500: #352f2f;
   --cnvs-base-palette-cappuccino-600: #231f20;
-  --cnvs-base-opacity-0: 0;
-  --cnvs-base-opacity-100: 0.08;
-  --cnvs-base-opacity-200: 0.12;
-  --cnvs-base-opacity-250: 0.2;
-  --cnvs-base-opacity-300: 0.4;
-  --cnvs-base-opacity-400: 0.64;
-  --cnvs-base-opacity-500: 0.84;
+  --cnvs-base-size-0: 0; /* 0px / 0rem */
+  --cnvs-base-size-25: 0.125rem; /* 2px / 0.125rem */
+  --cnvs-base-size-50: 0.25rem; /* 4px / 0.25rem */
+  --cnvs-base-size-75: 0.375rem; /* 6px / 0.375rem */
+  --cnvs-base-size-100: 0.5rem; /* 8px / 0.5rem */
+  --cnvs-base-size-125: 0.625rem; /* 10px / 0.625rem */
+  --cnvs-base-size-150: 0.75rem; /* 12px / 0.75rem */
+  --cnvs-base-size-175: 0.875rem; /* 14px / 0.875rem */
+  --cnvs-base-size-200: 1rem; /* 16px / 1rem */
+  --cnvs-base-size-225: 1.125rem; /* 18px / 1.125rem */
+  --cnvs-base-size-250: 1.25rem; /* 20px / 1.25rem */
+  --cnvs-base-size-300: 1.5rem; /* 24px / 1.5rem */
+  --cnvs-base-size-350: 1.75rem; /* 28px / 1.75rem */
+  --cnvs-base-size-400: 2rem; /* 32px / 2rem */
+  --cnvs-base-size-450: 2.25rem; /* 36px / 2.25rem */
+  --cnvs-base-size-500: 2.5rem; /* 40px / 2.5rem */
+  --cnvs-base-size-600: 3rem; /* 48px / 3rem */
+  --cnvs-base-size-700: 3.5rem; /* 56px / 3.5rem */
+  --cnvs-base-size-800: 4rem; /* 64px / 4rem */
+  --cnvs-base-size-900: 4.5rem; /* 72px / 4.5rem */
+  --cnvs-base-size-1000: 5rem; /* 80px / 5rem */
+  --cnvs-base-size-1100: 5.5rem; /* 88px / 5.5rem */
+  --cnvs-base-size-1200: 6rem; /* 96px / 6rem */
+  --cnvs-base-size-1300: 6.5rem; /* 104px / 6.5rem */
+  --cnvs-base-size-1400: 7rem; /* 112px / 7rem */
+  --cnvs-base-font-family-50: "Roboto"; /* Default font-family */
+  --cnvs-base-font-family-100: "Roboto Mono";
+  --cnvs-base-font-family-200: "Noto Sans";
+  --cnvs-base-font-weight-300: 300;
+  --cnvs-base-font-weight-400: 400;
+  --cnvs-base-font-weight-500: 500;
+  --cnvs-base-font-weight-700: 700;
+  --cnvs-base-letter-spacing-50: 0.025rem;
+  --cnvs-base-letter-spacing-100: 0.02rem;
+  --cnvs-base-letter-spacing-150: 0.015rem;
+  --cnvs-base-letter-spacing-200: 0.01rem;
+  --cnvs-base-unit: 0.25rem; /* The base unit used for the typographic grid system.  */
+  --cnvs-base-extended-palette-dragon-fruit-100: oklch(0.9776 0.0147 312 / 1);
+  --cnvs-base-extended-palette-dragon-fruit-200: oklch(0.909 0.0637 314.43 / 1);
+  --cnvs-base-extended-palette-dragon-fruit-300: oklch(0.615 0.2131 280.7 / 1);
+  --cnvs-base-extended-palette-dragon-fruit-400: oklch(0.5289 0.2241 281.65 / 1);
+  --cnvs-base-extended-palette-dragon-fruit-500: oklch(0.466 0.1961 280.9 / 1);
+  --cnvs-base-extended-palette-dragon-fruit-600: oklch(0.317 0.142 278.2 / 1);
   --cnvs-base-font-size-25: 0.625rem;
   --cnvs-base-font-size-50: 0.75rem;
   --cnvs-base-font-size-75: 0.875rem;
@@ -372,22 +417,4 @@
   --cnvs-base-line-height-750: 4.5rem;
   --cnvs-base-line-height-900: 5.5rem;
   --cnvs-base-line-height-1050: 6.5rem;
-  --cnvs-base-font-family-50: "Roboto"; /* Default font-family */
-  --cnvs-base-font-family-100: "Roboto Mono";
-  --cnvs-base-font-family-200: "Noto Sans";
-  --cnvs-base-font-weight-300: 300;
-  --cnvs-base-font-weight-400: 400;
-  --cnvs-base-font-weight-500: 500;
-  --cnvs-base-font-weight-700: 700;
-  --cnvs-base-letter-spacing-50: 0.025rem;
-  --cnvs-base-letter-spacing-100: 0.02rem;
-  --cnvs-base-letter-spacing-150: 0.015rem;
-  --cnvs-base-letter-spacing-200: 0.01rem;
-  --cnvs-base-unit: 0.25rem; /* The base unit used in the grid system.;  */
-  --cnvs-base-extended-palette-dragon-fruit-100: oklch(0.9776 0.0147 312 / 1);
-  --cnvs-base-extended-palette-dragon-fruit-200: oklch(0.909 0.0637 314.43 / 1);
-  --cnvs-base-extended-palette-dragon-fruit-300: oklch(0.615 0.2131 280.7 / 1);
-  --cnvs-base-extended-palette-dragon-fruit-400: oklch(0.5289 0.2241 281.65 / 1);
-  --cnvs-base-extended-palette-dragon-fruit-500: oklch(0.466 0.1961 280.9 / 1);
-  --cnvs-base-extended-palette-dragon-fruit-600: oklch(0.317 0.142 278.2 / 1);
 }

package/css/brand/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 22:01:37 GMT
+ * Generated on Tue, 18 Nov 2025 23:28:05 GMT
  */
 
 :root {

package/css/system/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 22:01:37 GMT
+ * Generated on Tue, 18 Nov 2025 23:28:05 GMT
  */
 
 :root {
@@ -10,54 +10,28 @@
   --cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h  /  0.12), 0 0.5rem 2rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h  /  0.08); /* Bottom Sheets */
   --cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h  /  0.12), 0 0.625rem 2.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h  /  0.08); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
   --cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h  /  0.12), 0 0.75rem 3rem 0 oklch(from oklch(0.278 0.0156 252.4 / 1) l c h  /  0.08); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
-  --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
-  --cnvs-sys-shape-zero: 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. */
   --cnvs-sys-opacity-full: 1; /* Dev only */
   --cnvs-sys-opacity-zero: 0; /* Dev only */
-  --cnvs-sys-breakpoints-zero: 0px; /* Use to set a media query `min-width` below small. */
+  --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
+  --cnvs-sys-breakpoints-zero: 0; /* Use to set a media query `min-width` below small. */
   --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
   --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
   --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
   --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
-  --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
-  --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
-  --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
-  --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
-  --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
-  --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
-  --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
-  --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
-  --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
-  --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
-  --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
-  --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
-  --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
+  --cnvs-sys-letter-spacing-body-sm: var(--cnvs-base-letter-spacing-200);
+  --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-base-letter-spacing-150);
+  --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-base-letter-spacing-100);
+  --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-base-letter-spacing-50);
   --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
   --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
   --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
-  --cnvs-sys-space-x20: calc(var(--cnvs-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 */
-  --cnvs-sys-space-x16: calc(var(--cnvs-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 */
-  --cnvs-sys-space-x10: calc(var(--cnvs-base-unit) * 10); /* • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections */
-  --cnvs-sys-space-x8: calc(var(--cnvs-base-unit) * 8); /* • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs */
-  --cnvs-sys-space-x6: calc(var(--cnvs-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 */
-  --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
-  --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
-  --cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
-  --cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
-  --cnvs-sys-shape-round: calc(var(--cnvs-base-unit) * 250); /* Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges. */
-  --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
-  --cnvs-sys-shape-x1-half: calc(var(--cnvs-base-unit) * 1.5);
-  --cnvs-sys-shape-x1: var(--cnvs-base-unit);
-  --cnvs-sys-shape-half: calc(var(--cnvs-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. */
+  --cnvs-sys-gap-none: var(--cnvs-base-size-0); /* Use when there is no space between elements */
+  --cnvs-sys-padding-none: var(--cnvs-base-size-0); /* Use when there should be no space between content and element's edges. */
   --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-100); /* Alpha on second shadow */
   --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-200); /* Alpha on first shadow */
   --cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-500); /* Tooltips, Status Indicator */
   --cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-400); /* Overlay */
   --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-300); /* Disabled states */
-  --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
-  --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
-  --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
-  --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
   --cnvs-sys-color-shadow-default: var(--cnvs-base-palette-slate-900); /* Main shadow color */
   --cnvs-sys-color-shadow-2: oklch(from var(--cnvs-base-palette-slate-900) l c h  /  var(--cnvs-base-opacity-100)); /* Second shadow color */
   --cnvs-sys-color-shadow-1: oklch(from var(--cnvs-base-palette-slate-900) l c h  /  var(--cnvs-base-opacity-200)); /* First shadow color */
@@ -266,8 +240,98 @@
   --cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-amber-100);
   --cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-amber-400);
   --cnvs-sys-color-static-gold-stronger: var(--cnvs-base-palette-amber-600);
+  --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
+  --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
+  --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
+  --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
+  --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
+  --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
+  --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
+  --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
+  --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
+  --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
+  --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
+  --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
+  --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
+  --cnvs-sys-space-x20: calc(var(--cnvs-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 */
+  --cnvs-sys-space-x16: calc(var(--cnvs-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 */
+  --cnvs-sys-space-x14: calc(var(--cnvs-base-unit) * 14); /* Mobile only */
+  --cnvs-sys-space-x10: calc(var(--cnvs-base-unit) * 10); /* • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections */
+  --cnvs-sys-space-x8: calc(var(--cnvs-base-unit) * 8); /* • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs */
+  --cnvs-sys-space-x6: calc(var(--cnvs-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 */
+  --cnvs-sys-space-x5: calc(var(--cnvs-base-unit) * 5); /* Mobile only */
+  --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
+  --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
+  --cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
+  --cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
+  --cnvs-sys-space-half: calc(var(--cnvs-base-unit) * 0.5); /* Mobile only */
+  --cnvs-sys-shape-zero: var(--cnvs-base-size-0); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
+  --cnvs-sys-shape-round: calc(var(--cnvs-base-unit) * 250); /* Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges. */
+  --cnvs-sys-shape-x6: calc(var(--cnvs-base-unit) * 6); /* (Mobile) Full width sheets that are temporary and modal views */
+  --cnvs-sys-shape-x4: calc(var(--cnvs-base-unit) * 4); /* (Mobile) Primary containers that house a large amount of other elements and complex information */
+  --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
+  --cnvs-sys-shape-x1-half: calc(var(--cnvs-base-unit) * 1.5);
+  --cnvs-sys-shape-x1: var(--cnvs-base-unit);
+  --cnvs-sys-shape-half: calc(var(--cnvs-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. */
+  --cnvs-sys-breakpoints-lg: 1024px; /* Large screens, such as desktops. */
+  --cnvs-sys-breakpoints-md: 768px; /* Medium screens, such as laptops. */
+  --cnvs-sys-breakpoints-sm: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
+  --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
+  --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
+  --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
+  --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
   --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
+  --cnvs-sys-gap-xxl: var(--cnvs-base-size-800); /* Use this for the space between content sections */
+  --cnvs-sys-gap-xl: var(--cnvs-base-size-400); /* Use this for the default spacing between cards, as well as the gutter width used in the large 12-column grid. */
+  --cnvs-sys-gap-lg: var(--cnvs-base-size-300); /* Use this for tighter spacing between cards. Cards are self contained blocks of content. */
+  --cnvs-sys-gap-md: var(--cnvs-base-size-200); /* Use the default inline spacing when other gap tokens may not fit. */
+  --cnvs-sys-gap-sm: var(--cnvs-base-size-100); /* Horizontal space between pills, tighter space between buttons, inline icon to text, segmented controls. */
+  --cnvs-sys-gap-xs: var(--cnvs-base-size-50); /* Compact spacing from icon to text, labels to inputs, between tab items. */
+  --cnvs-sys-padding-xxl: var(--cnvs-base-size-400); /* Padding used around Modal and Large Button content */
+  --cnvs-sys-padding-xl: var(--cnvs-base-size-300); /* Padding used around Card and Medium Button content */
+  --cnvs-sys-padding-lg: var(--cnvs-base-size-250); /* Large padding, used in Medium Buttons with Icons */
+  --cnvs-sys-padding-md: var(--cnvs-base-size-200); /* Default padding used for components used around Small Button content. */
+  --cnvs-sys-padding-sm: var(--cnvs-base-size-150); /* Compact padding, used in Rich Text Editor, or X-Small Buttons */
+  --cnvs-sys-padding-xs: var(--cnvs-base-size-100); /* Horizontal padding on Input Fields */
+  --cnvs-sys-padding-xxs: var(--cnvs-base-size-50);
+  --cnvs-sys-size-xxxl: var(--cnvs-base-size-800); /* Expandable Container */
+  --cnvs-sys-size-xxl: var(--cnvs-base-size-700); /* Table Cell, Toast */
+  --cnvs-sys-size-xl: var(--cnvs-base-size-600); /* Large size used in Large Buttons, Segmented Controls, Expandable Container Trigger, Tabs, and Avatar */
+  --cnvs-sys-size-lg: var(--cnvs-base-size-500); /* Default height for most components, like Medium Buttons, Segmented Control, Banner, Input Fields, and Menu List Items */
+  --cnvs-sys-size-md: var(--cnvs-base-size-400); /* Small Buttons, Segmented Control, Tooltip, Avatar */
+  --cnvs-sys-size-sm: var(--cnvs-base-size-300); /* X-Small Buttons, Pills, Checkboxes, Radio Buttons */
+  --cnvs-sys-size-xs: var(--cnvs-base-size-250); /* Count Badge */
+  --cnvs-sys-size-xxs: var(--cnvs-base-size-200); /* Switch Track */
+  --cnvs-sys-line-height-title-lg: var(--cnvs-base-size-800);
+  --cnvs-sys-line-height-title-md: var(--cnvs-base-size-700);
+  --cnvs-sys-line-height-title-sm: var(--cnvs-base-size-600);
+  --cnvs-sys-line-height-heading-lg: var(--cnvs-base-size-500);
+  --cnvs-sys-line-height-heading-md: var(--cnvs-base-size-450);
+  --cnvs-sys-line-height-heading-sm: var(--cnvs-base-size-400);
+  --cnvs-sys-line-height-body-lg: var(--cnvs-base-size-350);
+  --cnvs-sys-line-height-body-md: var(--cnvs-base-size-350);
+  --cnvs-sys-line-height-body-sm: var(--cnvs-base-size-300);
+  --cnvs-sys-line-height-subtext-lg: var(--cnvs-base-size-250);
+  --cnvs-sys-line-height-subtext-md: var(--cnvs-base-size-200);
+  --cnvs-sys-line-height-subtext-sm: var(--cnvs-base-size-200);
+  --cnvs-sys-font-size-title-lg: var(--cnvs-base-size-700);
+  --cnvs-sys-font-size-title-md: var(--cnvs-base-size-600);
+  --cnvs-sys-font-size-title-sm: var(--cnvs-base-size-500);
+  --cnvs-sys-font-size-heading-lg: var(--cnvs-base-size-400);
+  --cnvs-sys-font-size-heading-md: var(--cnvs-base-size-350);
+  --cnvs-sys-font-size-heading-sm: var(--cnvs-base-size-300);
+  --cnvs-sys-font-size-body-lg: var(--cnvs-base-size-250);
+  --cnvs-sys-font-size-body-md: var(--cnvs-base-size-225);
+  --cnvs-sys-font-size-body-sm: var(--cnvs-base-size-200);
+  --cnvs-sys-font-size-subtext-lg: var(--cnvs-base-size-175);
+  --cnvs-sys-font-size-subtext-md: var(--cnvs-base-size-150);
+  --cnvs-sys-font-size-subtext-sm: var(--cnvs-base-size-125);
   --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
+  --cnvs-sys-shape-full: calc(var(--cnvs-base-size-75) * 100); /* Full rounding is reserved high-visibility components. This shape is intended to draw attention. Buttons, Badge, Status Indicator, Essential Inputs, Border Containers (Not Cards) */
+  --cnvs-sys-shape-lg: var(--cnvs-base-size-300); /* Primarily used for elevated and simple parent containers with greater amounts of content and UI. Dialogs, Modals, Bottom Sheets */
+  --cnvs-sys-shape-md: var(--cnvs-base-size-200); /* Core large containers, card containers and popups that house moderate amounts of content and/or data: Card, Menus */
+  --cnvs-sys-shape-sm: var(--cnvs-base-size-100); /* Components presenting info text, user input, user feedback. Inputs, Toasts, Snack bars, Tooltips, Error Alert Banner */
+  --cnvs-sys-shape-xs: var(--cnvs-base-size-50); /* Use this for subtle and smaller elements that don't contain complex information. Often high-density components. Checkbox, Pill */
   --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
   --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
   --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
@@ -303,6 +367,30 @@
   letter-spacing: var(--cnvs-base-letter-spacing-150);
 }
 
+.cnvs-sys-type-subtext-sm {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-sm);
+  font-size: var(--cnvs-sys-font-size-subtext-sm);
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-sm);
+}
+
+.cnvs-sys-type-subtext-md {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-md);
+  font-size: var(--cnvs-sys-font-size-subtext-md);
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md);
+}
+
+.cnvs-sys-type-subtext-lg {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-lg);
+  font-size: var(--cnvs-sys-font-size-subtext-lg);
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg);
+}
+
 .cnvs-sys-type-body-small {
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-normal);
@@ -325,6 +413,28 @@
   font-size: var(--cnvs-sys-font-size-body-large);
 }
 
+.cnvs-sys-type-body-sm {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-body-sm);
+  font-size: var(--cnvs-sys-font-size-body-sm);
+  letter-spacing: var(--cnvs-sys-letter-spacing-body-sm);
+}
+
+.cnvs-sys-type-body-md {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-body-md);
+  font-size: var(--cnvs-sys-font-size-body-md);
+}
+
+.cnvs-sys-type-body-lg {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-body-lg);
+  font-size: var(--cnvs-sys-font-size-body-lg);
+}
+
 .cnvs-sys-type-heading-small {
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-bold);
@@ -346,6 +456,27 @@
   font-size: var(--cnvs-sys-font-size-heading-large);
 }
 
+.cnvs-sys-type-heading-sm {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-sm);
+  font-size: var(--cnvs-sys-font-size-heading-sm);
+}
+
+.cnvs-sys-type-heading-md {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-md);
+  font-size: var(--cnvs-sys-font-size-heading-md);
+}
+
+.cnvs-sys-type-heading-lg {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-lg);
+  font-size: var(--cnvs-sys-font-size-heading-lg);
+}
+
 .cnvs-sys-type-title-small {
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-bold);
@@ -365,4 +496,25 @@
   font-weight: var(--cnvs-sys-font-weight-bold);
   line-height: var(--cnvs-sys-line-height-title-large);
   font-size: var(--cnvs-sys-font-size-title-large);
+}
+
+.cnvs-sys-type-title-sm {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-sm);
+  font-size: var(--cnvs-sys-font-size-title-sm);
+}
+
+.cnvs-sys-type-title-md {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-md);
+  font-size: var(--cnvs-sys-font-size-title-md);
+}
+
+.cnvs-sys-type-title-lg {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-lg);
+  font-size: var(--cnvs-sys-font-size-title-lg);
 }

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

@@ -1,8 +1,17 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Nov 2025 22:01:37 GMT
+ * Generated on Tue, 18 Nov 2025 23:28:06 GMT
  */
 
+export declare const fontSize: "--cnvs-base-fontSize";
+export declare const baseline: "--cnvs-base-baseline";
+export declare const opacity0: "--cnvs-base-opacity-0";
+export declare const opacity100: "--cnvs-base-opacity-100";
+export declare const opacity200: "--cnvs-base-opacity-200";
+export declare const opacity250: "--cnvs-base-opacity-250";
+export declare const opacity300: "--cnvs-base-opacity-300";
+export declare const opacity400: "--cnvs-base-opacity-400";
+export declare const opacity500: "--cnvs-base-opacity-500";
 export declare const amber25: "--cnvs-base-palette-amber-25";
 export declare const amber50: "--cnvs-base-palette-amber-50";
 export declare const amber100: "--cnvs-base-palette-amber-100";
@@ -498,62 +507,109 @@ export declare const cappuccino400: "--cnvs-base-palette-cappuccino-400";
 export declare const cappuccino500: "--cnvs-base-palette-cappuccino-500";
 /** @deprecated replace cappuccino600 with appropriate replacement color */
 export declare const cappuccino600: "--cnvs-base-palette-cappuccino-600";
-export declare const opacity0: "--cnvs-base-opacity-0";
-export declare const opacity100: "--cnvs-base-opacity-100";
-export declare const opacity200: "--cnvs-base-opacity-200";
-export declare const opacity250: "--cnvs-base-opacity-250";
-export declare const opacity300: "--cnvs-base-opacity-300";
-export declare const opacity400: "--cnvs-base-opacity-400";
-export declare const opacity500: "--cnvs-base-opacity-500";
+export declare const size0: "--cnvs-base-size-0";
+export declare const size25: "--cnvs-base-size-25";
+export declare const size50: "--cnvs-base-size-50";
+export declare const size75: "--cnvs-base-size-75";
+export declare const size100: "--cnvs-base-size-100";
+export declare const size125: "--cnvs-base-size-125";
+export declare const size150: "--cnvs-base-size-150";
+export declare const size175: "--cnvs-base-size-175";
+export declare const size200: "--cnvs-base-size-200";
+export declare const size225: "--cnvs-base-size-225";
+export declare const size250: "--cnvs-base-size-250";
+export declare const size300: "--cnvs-base-size-300";
+export declare const size350: "--cnvs-base-size-350";
+export declare const size400: "--cnvs-base-size-400";
+export declare const size450: "--cnvs-base-size-450";
+export declare const size500: "--cnvs-base-size-500";
+export declare const size600: "--cnvs-base-size-600";
+export declare const size700: "--cnvs-base-size-700";
+export declare const size800: "--cnvs-base-size-800";
+export declare const size900: "--cnvs-base-size-900";
+export declare const size1000: "--cnvs-base-size-1000";
+export declare const size1100: "--cnvs-base-size-1100";
+export declare const size1200: "--cnvs-base-size-1200";
+export declare const size1300: "--cnvs-base-size-1300";
+export declare const size1400: "--cnvs-base-size-1400";
+export declare const fontFamily50: "--cnvs-base-font-family-50";
+export declare const fontFamily100: "--cnvs-base-font-family-100";
+export declare const fontFamily200: "--cnvs-base-font-family-200";
+export declare const fontWeight300: "--cnvs-base-font-weight-300";
+export declare const fontWeight400: "--cnvs-base-font-weight-400";
+export declare const fontWeight500: "--cnvs-base-font-weight-500";
+export declare const fontWeight700: "--cnvs-base-font-weight-700";
+export declare const letterSpacing50: "--cnvs-base-letter-spacing-50";
+export declare const letterSpacing100: "--cnvs-base-letter-spacing-100";
+export declare const letterSpacing150: "--cnvs-base-letter-spacing-150";
+export declare const letterSpacing200: "--cnvs-base-letter-spacing-200";
+/** @deprecated Use 1rem / 2 instead for consistent sizing calculations */
+export declare const baseUnit: "--cnvs-base-unit";
+/** @deprecated replace dragon-fruit100 with oklch(0.9776 0.0147 312 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
+export declare const extendedDragonFruit100: "--cnvs-base-extended-palette-dragon-fruit-100";
+/** @deprecated replace dragon-fruit200 with oklch(0.909 0.0637 314.43 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
+export declare const extendedDragonFruit200: "--cnvs-base-extended-palette-dragon-fruit-200";
+/** @deprecated replace dragon-fruit300 with oklch(0.615 0.2131 280.7 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
+export declare const extendedDragonFruit300: "--cnvs-base-extended-palette-dragon-fruit-300";
+/** @deprecated replace dragon-fruit400 with oklch(0.5289 0.2241 281.65 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
+export declare const extendedDragonFruit400: "--cnvs-base-extended-palette-dragon-fruit-400";
+/** @deprecated replace dragon-fruit500 with oklch(0.466 0.1961 280.9 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
+export declare const extendedDragonFruit500: "--cnvs-base-extended-palette-dragon-fruit-500";
+/** @deprecated replace dragon-fruit600 with oklch(0.317 0.142 278.2 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
+export declare const extendedDragonFruit600: "--cnvs-base-extended-palette-dragon-fruit-600";
+/** @deprecated Use system instead */
 export declare const fontSize25: "--cnvs-base-font-size-25";
+/** @deprecated Use system instead */
 export declare const fontSize50: "--cnvs-base-font-size-50";
+/** @deprecated Use system instead */
 export declare const fontSize75: "--cnvs-base-font-size-75";
+/** @deprecated Use system instead */
 export declare const fontSize100: "--cnvs-base-font-size-100";
+/** @deprecated Use system instead */
 export declare const fontSize125: "--cnvs-base-font-size-125";
+/** @deprecated Use system instead */
 export declare const fontSize150: "--cnvs-base-font-size-150";
+/** @deprecated Use system instead */
 export declare const fontSize200: "--cnvs-base-font-size-200";
+/** @deprecated Use system instead */
 export declare const fontSize250: "--cnvs-base-font-size-250";
+/** @deprecated Use system instead */
 export declare const fontSize300: "--cnvs-base-font-size-300";
+/** @deprecated Use system instead */
 export declare const fontSize400: "--cnvs-base-font-size-400";
+/** @deprecated Use system instead */
 export declare const fontSize500: "--cnvs-base-font-size-500";
+/** @deprecated Use system instead */
 export declare const fontSize600: "--cnvs-base-font-size-600";
+/** @deprecated Use system instead */
 export declare const fontSize750: "--cnvs-base-font-size-750";
+/** @deprecated Use system instead */
 export declare const fontSize900: "--cnvs-base-font-size-900";
+/** @deprecated Use 1rem / 2 * 11.00 for consistent spacing and sizing */
 export declare const fontSize1050: "--cnvs-base-font-size-1050";
+/** @deprecated Use system instead */
 export declare const lineHeight50: "--cnvs-base-line-height-50";
+/** @deprecated Use system instead */
 export declare const lineHeight100: "--cnvs-base-line-height-100";
+/** @deprecated Use system instead */
 export declare const lineHeight150: "--cnvs-base-line-height-150";
+/** @deprecated Use system instead */
 export declare const lineHeight200: "--cnvs-base-line-height-200";
+/** @deprecated Use system instead */
 export declare const lineHeight250: "--cnvs-base-line-height-250";
+/** @deprecated Use system instead */
 export declare const lineHeight300: "--cnvs-base-line-height-300";
+/** @deprecated Use system instead */
 export declare const lineHeight350: "--cnvs-base-line-height-350";
+/** @deprecated Use system instead */
 export declare const lineHeight400: "--cnvs-base-line-height-400";
+/** @deprecated Use system instead */
 export declare const lineHeight500: "--cnvs-base-line-height-500";
+/** @deprecated Use system instead */
 export declare const lineHeight600: "--cnvs-base-line-height-600";
+/** @deprecated Use system instead */
 export declare const lineHeight750: "--cnvs-base-line-height-750";
+/** @deprecated Use system instead */
 export declare const lineHeight900: "--cnvs-base-line-height-900";
+/** @deprecated Use system instead */
 export declare const lineHeight1050: "--cnvs-base-line-height-1050";
-export declare const fontFamily50: "--cnvs-base-font-family-50";
-export declare const fontFamily100: "--cnvs-base-font-family-100";
-export declare const fontFamily200: "--cnvs-base-font-family-200";
-export declare const fontWeight300: "--cnvs-base-font-weight-300";
-export declare const fontWeight400: "--cnvs-base-font-weight-400";
-export declare const fontWeight500: "--cnvs-base-font-weight-500";
-export declare const fontWeight700: "--cnvs-base-font-weight-700";
-export declare const letterSpacing50: "--cnvs-base-letter-spacing-50";
-export declare const letterSpacing100: "--cnvs-base-letter-spacing-100";
-export declare const letterSpacing150: "--cnvs-base-letter-spacing-150";
-export declare const letterSpacing200: "--cnvs-base-letter-spacing-200";
-export declare const baseUnit: "--cnvs-base-unit";
-/** @deprecated replace dragon-fruit100 with oklch(0.9776 0.0147 312 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
-export declare const extendedDragonFruit100: "--cnvs-base-extended-palette-dragon-fruit-100";
-/** @deprecated replace dragon-fruit200 with oklch(0.909 0.0637 314.43 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
-export declare const extendedDragonFruit200: "--cnvs-base-extended-palette-dragon-fruit-200";
-/** @deprecated replace dragon-fruit300 with oklch(0.615 0.2131 280.7 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
-export declare const extendedDragonFruit300: "--cnvs-base-extended-palette-dragon-fruit-300";
-/** @deprecated replace dragon-fruit400 with oklch(0.5289 0.2241 281.65 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
-export declare const extendedDragonFruit400: "--cnvs-base-extended-palette-dragon-fruit-400";
-/** @deprecated replace dragon-fruit500 with oklch(0.466 0.1961 280.9 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
-export declare const extendedDragonFruit500: "--cnvs-base-extended-palette-dragon-fruit-500";
-/** @deprecated replace dragon-fruit600 with oklch(0.317 0.142 278.2 / 1). Prefer to replace it with ai system tokens: `sys.color.bg.ai.*`, `sys.color.border.ai` or `sys.color.text.ai`. */
-export declare const extendedDragonFruit600: "--cnvs-base-extended-palette-dragon-fruit-600";