@workday/canvas-tokens-web 4.3.0-beta.2 → 4.3.0-beta.3

package/css/legacy/system.css

@@ -0,0 +1,163 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 28 Apr 2026 16:42:53 GMT
+ */
+
+:root {
+  --cnvs-sys-breakpoints-sm: var(--cnvs-sys-breakpoints-s, 320px); /* The `min-width` for mobile devices, such as phones and tablets. */
+  --cnvs-sys-breakpoints-md: var(--cnvs-sys-breakpoints-m, 768px); /* Medium screens, such as laptops. */
+  --cnvs-sys-breakpoints-lg: var(--cnvs-sys-breakpoints-l, 1024px); /* Large screens, such as desktops. */
+  --cnvs-sys-shape-none: var(--cnvs-sys-shape-zero, 0); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
+  --cnvs-sys-shape-sm: var(--cnvs-sys-shape-x1, 0.25rem); /* Pill, Status Indicator, Checkbox */
+  --cnvs-sys-shape-md: var(--cnvs-sys-shape-x2, 0.5rem); /* Inputs, Toast, Tooltip, Snackbar */
+  --cnvs-sys-shape-lg: 0.75rem; /* Rich text editor */
+  --cnvs-sys-shape-xl: var(--cnvs-sys-shape-x4, 1rem); /* Extra large rounding for prominent containers */
+  --cnvs-sys-shape-xxl: var(--cnvs-sys-shape-x6, 1.5rem); /* Extra extra large rounding for cards and items */
+  --cnvs-sys-shape-xxxl: 2rem; /* Maximum rounding for modals and large containers */
+  --cnvs-sys-shape-full: var(--cnvs-sys-shape-round, 65rem); /* 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-font-size-subtext-sm: var(--cnvs-sys-font-size-subtext-small, 0.625rem);
+  --cnvs-sys-font-size-subtext-md: var(--cnvs-sys-font-size-subtext-medium, 0.75rem);
+  --cnvs-sys-font-size-subtext-lg: var(--cnvs-sys-font-size-subtext-large, 0.875rem);
+  --cnvs-sys-font-size-body-sm: var(--cnvs-sys-font-size-body-small, 1rem);
+  --cnvs-sys-font-size-body-md: var(--cnvs-sys-font-size-body-medium, 1.125rem);
+  --cnvs-sys-font-size-body-lg: var(--cnvs-sys-font-size-body-large, 1.25rem);
+  --cnvs-sys-font-size-heading-sm: var(--cnvs-sys-font-size-heading-small, 1.5rem);
+  --cnvs-sys-font-size-heading-md: var(--cnvs-sys-font-size-heading-medium, 1.75rem);
+  --cnvs-sys-font-size-heading-lg: var(--cnvs-sys-font-size-heading-large, 2rem);
+  --cnvs-sys-font-size-title-sm: var(--cnvs-sys-font-size-title-small, 2.5rem);
+  --cnvs-sys-font-size-title-md: var(--cnvs-sys-font-size-title-medium, 3rem);
+  --cnvs-sys-font-size-title-lg: var(--cnvs-sys-font-size-title-large, 3.5rem);
+  --cnvs-sys-line-height-subtext-sm: var(--cnvs-sys-line-height-subtext-small, 1rem);
+  --cnvs-sys-line-height-subtext-md: var(--cnvs-sys-line-height-subtext-medium, 1rem);
+  --cnvs-sys-line-height-subtext-lg: var(--cnvs-sys-line-height-subtext-large, 1.25rem);
+  --cnvs-sys-line-height-body-sm: var(--cnvs-sys-line-height-body-small, 1.5rem);
+  --cnvs-sys-line-height-body-md: var(--cnvs-sys-line-height-body-medium, 1.75rem);
+  --cnvs-sys-line-height-body-lg: var(--cnvs-sys-line-height-body-large, 1.75rem);
+  --cnvs-sys-line-height-heading-sm: var(--cnvs-sys-line-height-heading-small, 2rem);
+  --cnvs-sys-line-height-heading-md: var(--cnvs-sys-line-height-heading-medium, 2.25rem);
+  --cnvs-sys-line-height-heading-lg: var(--cnvs-sys-line-height-heading-large, 2.5rem);
+  --cnvs-sys-line-height-title-sm: var(--cnvs-sys-line-height-title-small, 3rem);
+  --cnvs-sys-line-height-title-md: var(--cnvs-sys-line-height-title-medium, 3.5rem);
+  --cnvs-sys-line-height-title-lg: var(--cnvs-sys-line-height-title-large, 4rem);
+  --cnvs-sys-color-fg-info-default: var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)); /* Informational text and icons (not tenant themeable) */
+  --cnvs-sys-color-fg-info-strong: var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)); /* Stronger informational text and icons */
+  --cnvs-sys-color-fg-danger-default: var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)); /* Error text and icons (not tenant themeable) */
+  --cnvs-sys-color-fg-danger-strong: var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)); /* Stronger error text and icons */
+  --cnvs-sys-color-fg-warning-default: oklch(0.5505 0.1439 50.78 / 1); /* Warning text and icons (not tenant themeable) */
+  --cnvs-sys-color-fg-warning-strong: oklch(0.4824 0.1353 46.11 / 1); /* Stronger warning text and icons */
+  --cnvs-sys-color-fg-success-default: oklch(0.5069 0.1569 145.56 / 1); /* Success text and icons (not tenant themeable) */
+  --cnvs-sys-color-fg-success-strong: oklch(0.4463 0.1422 144.58 / 1); /* Stronger success text and icons */
+  --cnvs-sys-color-border-input-hover: var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)); /* Hover state border for form inputs */
+  --cnvs-sys-color-border-default: var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)); /* Default border for containers and dividers */
+  --cnvs-sys-color-border-strong: var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)); /* Stronger border for more visible separation */
+  --cnvs-sys-color-border-info-default: var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)); /* Border for informational containers (not tenant themeable) */
+  --cnvs-sys-color-border-danger: var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)); /* Border for error states (not tenant themeable) */
+  --cnvs-sys-color-border-warning: var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)); /* Border for warning states (not tenant themeable) */
+  --cnvs-sys-color-border-inverse-default: var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)); /* Border for use on dark backgrounds */
+  --cnvs-sys-color-border-inverse-strong: oklch(1 0 0 / 0.67); /* Stronger border for use on dark backgrounds */
+  --cnvs-sys-color-shadow-base: oklch(0.3057 0.079 256.22 / 0.13); /* Primary shadow color for elevated elements */
+  --cnvs-sys-color-shadow-ambient: oklch(0.3337 0.0688 250.79 / 0.09); /* Subtle ambient shadow for soft depth */
+  --cnvs-sys-color-surface-default: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Default background for containers on top of the page */
+  --cnvs-sys-color-surface-navigation: oklch(0.9692 0.0035 248.23 / 1); /* Background for navigation containers like sidebars and top bars */
+  --cnvs-sys-color-surface-popover: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Background for floating containers like dropdowns and tooltips */
+  --cnvs-sys-color-surface-modal: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Background for modal dialog containers */
+  --cnvs-sys-color-surface-raised: var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)); /* Separates a layer from the surface, e.g. table headers or sticky elements */
+  --cnvs-sys-color-surface-alt-default: var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)); /* De-emphasized container background for secondary information */
+  --cnvs-sys-color-surface-alt-strong: var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)); /* Stronger de-emphasized container background */
+  --cnvs-sys-color-surface-loading: oklch(0.3057 0.079 256.22 / 0.13); /* Background for skeleton loaders and loading states */
+  --cnvs-sys-color-surface-info-default: var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)); /* Container background for informational callouts */
+  --cnvs-sys-color-surface-info-strong: var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)); /* Stronger container background for info badges and indicators */
+  --cnvs-sys-color-surface-danger-default: oklch(0.6289 0.2567 29.11 / 0.04); /* Container background for error states (not tenant themeable) */
+  --cnvs-sys-color-surface-danger-strong: oklch(0.6434 0.2428 30.17 / 0.1); /* Stronger container background for error states */
+  --cnvs-sys-color-surface-warning-default: var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)); /* Container background for warning states (not tenant themeable) */
+  --cnvs-sys-color-surface-warning-strong: var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)); /* Stronger container background for warning states */
+  --cnvs-sys-color-surface-success-default: oklch(0.8695 0.2801 143.52 / 0.08); /* Container background for success states (not tenant themeable) */
+  --cnvs-sys-color-surface-success-strong: oklch(0.8685 0.2814 143.77 / 0.15); /* Stronger container background for success states */
+  --cnvs-sys-color-surface-ai-default: var(--cnvs-sys-color-bg-ai-default, oklch(0.6225 0.2064 255.9 / 0.17)); /* Container background indicating AI-generated content */
+  --cnvs-sys-color-surface-ai-hover: var(--cnvs-sys-color-bg-ai-strong, oklch(0.6048 0.2166 257.21 / 0.31)); /* Hover state for AI-generated content containers */
+  --cnvs-sys-color-surface-ai-pressed: var(--cnvs-sys-color-bg-ai-stronger, oklch(0.708 0.1549 255.41 / 1)); /* Pressed state for AI-generated content containers */
+  --cnvs-sys-color-surface-transparent: var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)); /* Fully transparent container background */
+  --cnvs-sys-color-surface-inverse: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Container background for use on dark backgrounds */
+  --cnvs-sys-color-surface-contrast-default: var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)); /* High contrast dark container background */
+  --cnvs-sys-color-surface-contrast-strong: var(--cnvs-sys-color-bg-contrast-strong, oklch(0.0672 0 0 / 0.89)); /* Stronger high contrast dark container background */
+  --cnvs-sys-color-surface-overlay-hover-default: oklch(0.3343 0.0951 253.3 / 0.05); /* Hover state overlay for interactive containers */
+  --cnvs-sys-color-surface-overlay-hover-inverse: oklch(1 0 0 / 0.16); /* Hover overlay for containers on dark backgrounds */
+  --cnvs-sys-color-surface-overlay-mixin: oklch(0.629 0.0281 255.62 / 1); /* Pressed state overlay for interactive containers */
+  --cnvs-sys-color-surface-overlay-pressed-default: oklch(0.3337 0.0688 250.79 / 0.09); /* Pressed state overlay for interactive containers */
+  --cnvs-sys-color-surface-overlay-pressed-inverse: oklch(1 0 0 / 0.26); /* Pressed overlay for containers on dark backgrounds */
+  --cnvs-sys-color-surface-overlay-scrim: oklch(0.0847 0 0 / 0.36);
+  --cnvs-sys-color-accent-ai: var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)); /* Dark accent indicating AI-generated content */
+  --cnvs-sys-color-accent-info: var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)); /* Solid info accent for indicators (not tenant themeable) */
+  --cnvs-sys-color-accent-danger: var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)); /* Solid danger accent for error indicators (not tenant themeable) */
+  --cnvs-sys-color-accent-warning: oklch(0.7909 0.1711 70.15 / 1); /* Solid warning accent for caution indicators (not tenant themeable) */
+  --cnvs-sys-color-accent-success: var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)); /* Solid success accent for positive indicators (not tenant themeable) */
+  --cnvs-sys-color-accent-contrast: oklch(0.0969 0 0 / 0.84); /* High contrast accent for maximum visibility */
+  --cnvs-sys-color-accent-muted-default: var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)); /* Muted accent for secondary visual elements */
+  --cnvs-sys-color-accent-muted-soft: var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)); /* Softer muted accent for tertiary elements */
+  --cnvs-sys-color-accent-overlay-hover: oklch(0.0847 0 0 / 0.17); /* Hover overlay for accent-colored elements */
+  --cnvs-sys-color-accent-overlay-pressed: oklch(0.0847 0 0 / 0.36); /* Pressed overlay for accent-colored elements */
+  --cnvs-sys-color-accent-overlay-mixin: oklch(0 0 0 / 1); /* Pressed overlay mixin color for accent-colored elements */
+  --cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)); /* Tenant-themeable focus ring for interactive elements */
+  --cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)); /* Tenant-themeable focus ring for error-state elements */
+  --cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-common-alert-outer, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))); /* Tenant-themeable outer focus ring for caution-state elements */
+  --cnvs-sys-color-brand-focus-caution-inner: var(--cnvs-brand-common-alert-inner, var(--cnvs-brand-alert-base, oklch(0.7909 0.1711 70.15 / 1))); /* Tenant-themeable inner focus ring for caution-state elements */
+  --cnvs-sys-color-brand-surface-primary-default: oklch(0.6499 0.1912 253.52 / 0.08); /* Tenant-themeable primary container background */
+  --cnvs-sys-color-brand-surface-primary-strong: oklch(0.6152 0.2108 256.1 / 0.11); /* Stronger tenant-themeable primary container background */
+  --cnvs-sys-color-brand-surface-critical-default: oklch(0.6289 0.2567 29.11 / 0.04); /* Tenant-themeable critical/error container background */
+  --cnvs-sys-color-brand-surface-critical-strong: oklch(0.6434 0.2428 30.17 / 0.1); /* Stronger tenant-themeable critical container background */
+  --cnvs-sys-color-brand-surface-caution-default: oklch(0.7982 0.159 92.57 / 0.1); /* Tenant-themeable caution/warning container background */
+  --cnvs-sys-color-brand-surface-caution-strong: oklch(0.8864 0.1845 100.28 / 0.22); /* Stronger tenant-themeable caution container background */
+  --cnvs-sys-color-brand-surface-positive-default: oklch(0.8695 0.2801 143.52 / 0.08); /* Tenant-themeable positive/success container background */
+  --cnvs-sys-color-brand-surface-positive-strong: oklch(0.8685 0.2814 143.77 / 0.15); /* Stronger tenant-themeable positive container background */
+  --cnvs-sys-color-brand-surface-selected: oklch(0.6152 0.2108 256.1 / 0.11); /* Tenant-themeable background for selected items */
+  --cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-base, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))); /* Tenant-themeable solid primary accent for buttons and key actions */
+  --cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-error-base, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))); /* Tenant-themeable solid critical accent for destructive actions */
+  --cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-alert-base, oklch(0.7909 0.1711 70.15 / 1)); /* Tenant-themeable solid caution accent */
+  --cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-success-base, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1))); /* Tenant-themeable solid positive accent */
+  --cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-base, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
+  --cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-base, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))); /* Tenant-themeable primary text and icon color */
+  --cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-dark, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1))); /* Stronger tenant-themeable primary text and icon color */
+  --cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-error-base, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))); /* Tenant-themeable critical text and icon color */
+  --cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-error-dark, var(--cnvs-brand-error-dark, oklch(0.4517 0.1847 28.2 / 1))); /* Stronger tenant-themeable critical text and icon color */
+  --cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-alert-darkest, var(--cnvs-brand-alert-darkest, oklch(0.5505 0.1439 50.78 / 1))); /* Tenant-themeable caution text and icon color */
+  --cnvs-sys-color-brand-fg-caution-strong: oklch(0.4824 0.1353 46.11 / 1); /* Stronger tenant-themeable caution text and icon color */
+  --cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-success-base, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1))); /* Tenant-themeable positive text and icon color */
+  --cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-success-dark, var(--cnvs-brand-success-dark, oklch(0.4463 0.1422 144.58 / 1))); /* Stronger tenant-themeable positive text and icon color */
+  --cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-dark, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1))); /* Tenant-themeable text color for selected items */
+  --cnvs-sys-color-brand-border-primary: oklch(0.6023 0.2032 255.68 / 1); /* Tenant-themeable primary border for focused inputs */
+  --cnvs-sys-color-brand-border-critical: oklch(0.6495 0.2369 30.04 / 1); /* Tenant-themeable critical border for error states */
+  --cnvs-sys-color-brand-border-caution: var(--cnvs-brand-alert-dark, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))); /* Tenant-themeable caution border for warning states */
+  --cnvs-sys-color-focus-inverse: var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)); /* Focus ring for use on dark backgrounds */
+  --cnvs-sys-color-focus-contrast: oklch(0.0969 0 0 / 0.84); /* High contrast focus ring for accessibility */
+  --cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100, 0.08); /* State layer applied to surface colors on hover */
+  --cnvs-sys-opacity-surface-pressed: 0.18; /* State layer applied to surface colors while pressing */
+  --cnvs-sys-opacity-accent-hover: 0.18; /* State layer applied to accent colors on hover */
+  --cnvs-sys-opacity-accent-pressed: 0.36; /* State layer applied to accent colors while pressing */
+  --cnvs-sys-size-xxxs: var(--cnvs-sys-space-x4, 1rem); /* Used for switch toggle. */
+  --cnvs-sys-size-xxs: var(--cnvs-sys-space-x5, 1.25rem); /* Compact indicators. Used for status indicators and count badges. */
+  --cnvs-sys-size-xs: var(--cnvs-sys-space-x6, 1.5rem); /* Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons. */
+  --cnvs-sys-size-sm: var(--cnvs-sys-space-x8, 2rem); /* Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars. */
+  --cnvs-sys-size-md: var(--cnvs-sys-space-x10, 2.5rem); /* Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu items. */
+  --cnvs-sys-size-lg: 3rem; /* Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars. */
+  --cnvs-sys-size-xl: var(--cnvs-sys-space-x14, 3.5rem); /* Content containers. Used for table cells and toasts. */
+  --cnvs-sys-size-xxl: var(--cnvs-sys-space-x16, 4rem); /* Expandable containers. Used for expandable containers in their collapsed state. */
+  --cnvs-sys-padding-none: var(--cnvs-sys-space-zero, 0); /* Use when there should be no space between content and element's edges. */
+  --cnvs-sys-padding-xxs: var(--cnvs-sys-space-x1, 0.25rem);
+  --cnvs-sys-padding-xs: var(--cnvs-sys-space-x2, 0.5rem); /* Horizontal padding on Input Fields */
+  --cnvs-sys-padding-sm: var(--cnvs-sys-space-x3, 0.75rem); /* Compact padding, used in Rich Text Editor, or X-Small Buttons */
+  --cnvs-sys-padding-md: var(--cnvs-sys-space-x4, 1rem); /* Default padding used for components used around Small Button content. */
+  --cnvs-sys-padding-lg: var(--cnvs-sys-space-x5, 1.25rem); /* Large padding, used in Medium Buttons with Icons */
+  --cnvs-sys-padding-xl: var(--cnvs-sys-space-x6, 1.5rem); /* Padding used around Card and Medium Button content */
+  --cnvs-sys-padding-xxl: var(--cnvs-sys-space-x8, 2rem); /* Padding used around Modal and Large Button content */
+  --cnvs-sys-gap-none: var(--cnvs-sys-space-zero, 0); /* Use when there is no space between elements */
+  --cnvs-sys-gap-xs: var(--cnvs-sys-space-x1, 0.25rem); /* Compact spacing from icon to text, labels to inputs, between tab items. */
+  --cnvs-sys-gap-sm: var(--cnvs-sys-space-x2, 0.5rem); /* Horizontal space between pills, tighter space between buttons, inline icon to text, segmented controls. */
+  --cnvs-sys-gap-md: var(--cnvs-sys-space-x4, 1rem); /* Use the default inline spacing when other gap tokens may not fit. */
+  --cnvs-sys-gap-lg: var(--cnvs-sys-space-x6, 1.5rem); /* Use this for tighter spacing between cards. Cards are self contained blocks of content. */
+  --cnvs-sys-gap-xl: var(--cnvs-sys-space-x8, 2rem); /* Use this for the default spacing between cards, as well as the gutter width used in the large 12-column grid. */
+  --cnvs-sys-gap-xxl: var(--cnvs-sys-space-x16, 4rem); /* Use this for the space between content sections */
+  --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-sys-type-letter-spacing-subtext-small, 0.025rem);
+  --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-sys-type-letter-spacing-subtext-medium, 0.02rem);
+  --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-sys-type-letter-spacing-subtext-large, 0.015rem);
+  --cnvs-sys-letter-spacing-body-sm: var(--cnvs-sys-type-letter-spacing-body-small, 0.01rem);
+}

package/css/system/_variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Apr 2026 22:00:58 GMT
+ * Generated on Tue, 28 Apr 2026 16:42:52 GMT
  */
 
 :root {
@@ -318,9 +318,9 @@
   --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-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 */