@workday/canvas-tokens-web 4.4.0-beta.0 → 5.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/css/base/_variables.css +140 -99
  2. package/css/brand/_variables.css +35 -27
  3. package/css/component/_variables.css +1 -1
  4. package/css/legacy/base.css +139 -97
  5. package/css/legacy/brand.css +58 -42
  6. package/css/legacy/component.css +5 -5
  7. package/css/legacy/system.css +128 -61
  8. package/css/system/_variables.css +123 -50
  9. package/dist/common-js/base/index.d.ts +181 -100
  10. package/dist/common-js/base/index.js +181 -100
  11. package/dist/common-js/brand/index.d.ts +149 -77
  12. package/dist/common-js/brand/index.js +68 -43
  13. package/dist/common-js/component/index.d.ts +5 -5
  14. package/dist/common-js/component/index.js +5 -5
  15. package/dist/common-js/index.d.ts +1 -1
  16. package/dist/common-js/index.js +1 -1
  17. package/dist/common-js/system/index.d.ts +693 -186
  18. package/dist/common-js/system/index.js +279 -146
  19. package/dist/es6/base/index.d.ts +181 -100
  20. package/dist/es6/base/index.js +181 -100
  21. package/dist/es6/brand/index.d.ts +149 -77
  22. package/dist/es6/brand/index.js +68 -43
  23. package/dist/es6/component/index.d.ts +5 -5
  24. package/dist/es6/component/index.js +5 -5
  25. package/dist/es6/index.d.ts +1 -1
  26. package/dist/es6/index.js +1 -1
  27. package/dist/es6/system/index.d.ts +693 -186
  28. package/dist/es6/system/index.js +279 -146
  29. package/less/base/_variables.less +140 -99
  30. package/less/brand/_variables.less +35 -27
  31. package/less/component/_variables.less +1 -1
  32. package/less/system/_variables.less +123 -50
  33. package/package.json +1 -1
  34. package/scss/base/_variables.sass +140 -99
  35. package/scss/base/_variables.scss +140 -99
  36. package/scss/brand/_variables.sass +35 -27
  37. package/scss/brand/_variables.scss +35 -27
  38. package/scss/component/_variables.sass +1 -1
  39. package/scss/component/_variables.scss +1 -1
  40. package/scss/system/_variables.sass +123 -50
  41. package/scss/system/_variables.scss +123 -50
  42. package/css/sana/_variables.css +0 -362
  43. package/dist/common-js/base/sana.d.ts +0 -151
  44. package/dist/common-js/base/sana.js +0 -154
  45. package/dist/common-js/brand/sana.d.ts +0 -41
  46. package/dist/common-js/brand/sana.js +0 -44
  47. package/dist/common-js/system/sana.d.ts +0 -379
  48. package/dist/common-js/system/sana.js +0 -382
  49. package/dist/es6/base/sana.d.ts +0 -151
  50. package/dist/es6/base/sana.js +0 -151
  51. package/dist/es6/brand/sana.d.ts +0 -41
  52. package/dist/es6/brand/sana.js +0 -41
  53. package/dist/es6/system/sana.d.ts +0 -379
  54. package/dist/es6/system/sana.js +0 -379
  55. package/less/sana/_variables.less +0 -362
  56. package/scss/sana/_variables.sass +0 -362
  57. package/scss/sana/_variables.scss +0 -362
package/css/legacy/system.css CHANGED
@@ -1,19 +1,22 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 09 Jun 2026 16:53:30 GMT
3
+ * Generated on Thu, 25 Jun 2026 23:26:14 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --cnvs-sys-breakpoints-sm: var(--cnvs-sys-breakpoints-s, 320px); /* The `min-width` for mobile devices, such as phones and tablets. */
8
8
  --cnvs-sys-breakpoints-md: var(--cnvs-sys-breakpoints-m, 768px); /* Medium screens, such as laptops. */
9
9
  --cnvs-sys-breakpoints-lg: var(--cnvs-sys-breakpoints-l, 1024px); /* Large screens, such as desktops. */
10
+ --cnvs-sys-breakpoints-xl: calc(var(--cnvs-base-baseline) * 180); /* Used for extra large screens, such as wide monitors and TVs. */
11
+ --cnvs-sys-breakpoints-xxl: calc(var(--cnvs-base-baseline) * 272.5); /* Figma only. Use as the max-width on xl media query. */
10
12
  --cnvs-sys-shape-none: var(--cnvs-sys-shape-zero, 0); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
11
- --cnvs-sys-shape-sm: var(--cnvs-sys-shape-x1, 0.25rem); /* Pill, Status Indicator, Checkbox */
13
+ --cnvs-sys-shape-xs: var(--cnvs-sys-shape-x1, 0.25rem); /* Pill, Status Indicator, Checkbox */
14
+ --cnvs-sys-shape-sm: 0.375rem; /* Compact components that leverage smaller typography, like Pills or Status Indicator */
12
15
  --cnvs-sys-shape-md: var(--cnvs-sys-shape-x2, 0.5rem); /* Inputs, Toast, Tooltip, Snackbar */
13
16
  --cnvs-sys-shape-lg: 0.75rem; /* Rich text editor */
14
17
  --cnvs-sys-shape-xl: var(--cnvs-sys-shape-x4, 1rem); /* Extra large rounding for prominent containers */
15
- --cnvs-sys-shape-xxl: var(--cnvs-sys-shape-x6, 1.5rem); /* Extra extra large rounding for cards and items */
16
- --cnvs-sys-shape-xxxl: 2rem; /* Maximum rounding for modals and large containers */
18
+ --cnvs-sys-shape-xxl: 1.25rem; /* Flat or raised surfaces, like Cards or Menu */
19
+ --cnvs-sys-shape-xxxl: 1.75rem; /* Large elevated surfaces, like Modals */
17
20
  --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) */
18
21
  --cnvs-sys-font-size-subtext-sm: var(--cnvs-sys-font-size-subtext-small, 0.625rem);
19
22
  --cnvs-sys-font-size-subtext-md: var(--cnvs-sys-font-size-subtext-medium, 0.75rem);
@@ -31,7 +34,7 @@
31
34
  --cnvs-sys-line-height-subtext-md: var(--cnvs-sys-line-height-subtext-medium, 1rem);
32
35
  --cnvs-sys-line-height-subtext-lg: var(--cnvs-sys-line-height-subtext-large, 1.25rem);
33
36
  --cnvs-sys-line-height-body-sm: var(--cnvs-sys-line-height-body-small, 1.5rem);
34
- --cnvs-sys-line-height-body-md: var(--cnvs-sys-line-height-body-medium, 1.75rem);
37
+ --cnvs-sys-line-height-body-md: var(--cnvs-sys-line-height-body-medium, 1.5rem);
35
38
  --cnvs-sys-line-height-body-lg: var(--cnvs-sys-line-height-body-large, 1.75rem);
36
39
  --cnvs-sys-line-height-heading-sm: var(--cnvs-sys-line-height-heading-small, 2rem);
37
40
  --cnvs-sys-line-height-heading-md: var(--cnvs-sys-line-height-heading-medium, 2.25rem);
@@ -39,100 +42,163 @@
39
42
  --cnvs-sys-line-height-title-sm: var(--cnvs-sys-line-height-title-small, 3rem);
40
43
  --cnvs-sys-line-height-title-md: var(--cnvs-sys-line-height-title-medium, 3.5rem);
41
44
  --cnvs-sys-line-height-title-lg: var(--cnvs-sys-line-height-title-large, 4rem);
45
+ --cnvs-sys-color-bg-alt-default: oklch(0.9702 0 0 / 1); /* Alternative page background for visual separation between page sections */
46
+ --cnvs-sys-color-fg-muted-default: oklch(0.1704 0.05 251.35 / 0.6353); /* Secondary text for hints and placeholders */
47
+ --cnvs-sys-color-fg-muted-strong: oklch(0.1549 0.0434 249.61 / 0.7098); /* Stronger secondary text */
42
48
  --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) */
43
49
  --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 */
50
+ --cnvs-sys-color-fg-default: oklch(0 0 0 / 0.8039); /* Default body text and icons */
51
+ --cnvs-sys-color-fg-strong: oklch(0 0 0 / 0.8706); /* Stronger text for headings and labels */
52
+ --cnvs-sys-color-fg-stronger: oklch(0 0 0 / 0.8902); /* Strongest text for titles */
53
+ --cnvs-sys-color-fg-disabled: oklch(0 0 0 / 0.3529); /* Disabled state text and icons */
44
54
  --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) */
45
55
  --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 */
46
56
  --cnvs-sys-color-fg-warning-default: oklch(0.5505 0.1439 50.78 / 1); /* Warning text and icons (not tenant themeable) */
47
57
  --cnvs-sys-color-fg-warning-strong: oklch(0.4824 0.1353 46.11 / 1); /* Stronger warning text and icons */
48
58
  --cnvs-sys-color-fg-success-default: oklch(0.5069 0.1569 145.56 / 1); /* Success text and icons (not tenant themeable) */
49
59
  --cnvs-sys-color-fg-success-strong: oklch(0.4463 0.1422 144.58 / 1); /* Stronger success text and icons */
50
- --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 */
51
- --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 */
52
- --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 */
60
+ --cnvs-sys-color-fg-contrast-default: oklch(0 0 0 / 0.8706); /* High contrast text for maximum readability */
61
+ --cnvs-sys-color-fg-contrast-strong: oklch(0 0 0 / 0.8902); /* Stronger high contrast text */
62
+ --cnvs-sys-color-border-ai: oklch(0.2452 0.0752 254.55 / 1); /* Border color for AI-focused input elements */
63
+ --cnvs-sys-color-border-input-default: oklch(0 0 0 / 0.4706); /* Default border for form inputs */
64
+ --cnvs-sys-color-border-input-hover: var(--cnvs-sys-color-border-input-strong, oklch(0 0 0 / 0.6784)); /* Hover state border for form inputs */
65
+ --cnvs-sys-color-border-contrast-default: oklch(0 0 0 / 0.8706); /* High contrast border for maximum visibility */
66
+ --cnvs-sys-color-border-default: var(--cnvs-sys-color-border-divider, oklch(0 0 0 / 0.0745)); /* Default border for containers and dividers */
67
+ --cnvs-sys-color-border-strong: var(--cnvs-sys-color-border-container, oklch(0 0 0 / 0.1686)); /* Stronger border for more visible separation */
53
68
  --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) */
54
69
  --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) */
55
- --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) */
70
+ --cnvs-sys-color-border-warning: var(--cnvs-sys-color-border-caution-default, oklch(0.6601 0.1537 60.7 / 1)); /* Border for warning states (not tenant themeable) */
56
71
  --cnvs-sys-color-border-inverse-default: var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)); /* Border for use on dark backgrounds */
57
- --cnvs-sys-color-border-inverse-strong: oklch(1 0 0 / 0.67); /* Stronger border for use on dark backgrounds */
58
- --cnvs-sys-color-shadow-base: oklch(0.3057 0.079 256.22 / 0.13); /* Primary shadow color for elevated elements */
59
- --cnvs-sys-color-shadow-ambient: oklch(0.3337 0.0688 250.79 / 0.09); /* Subtle ambient shadow for soft depth */
72
+ --cnvs-sys-color-border-inverse-strong: oklch(1 0 89.88 / 0.788); /* Stronger border for use on dark backgrounds */
73
+ --cnvs-sys-color-shadow-base: oklch(0.2751 0.1026 258.16 / 0.1922); /* Primary shadow color for elevated elements */
74
+ --cnvs-sys-color-shadow-ambient: oklch(0.3039 0.0952 253.5 / 0.0863); /* Subtle ambient shadow for soft depth */
60
75
  --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 */
61
- --cnvs-sys-color-surface-navigation: oklch(0.9692 0.0035 248.23 / 1); /* Background for navigation containers like sidebars and top bars */
76
+ --cnvs-sys-color-surface-navigation: oklch(0.9702 0 0 / 1); /* Background for navigation containers like sidebars and top bars */
62
77
  --cnvs-sys-color-surface-popover: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Background for floating containers like dropdowns and tooltips */
63
78
  --cnvs-sys-color-surface-modal: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Background for modal dialog containers */
64
- --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 */
65
- --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 */
66
- --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 */
67
- --cnvs-sys-color-surface-loading: oklch(0.3057 0.079 256.22 / 0.13); /* Background for skeleton loaders and loading states */
68
- --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 */
69
- --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 */
70
- --cnvs-sys-color-surface-danger-default: oklch(0.6289 0.2567 29.11 / 0.04); /* Container background for error states (not tenant themeable) */
71
- --cnvs-sys-color-surface-danger-strong: oklch(0.6434 0.2428 30.17 / 0.1); /* Stronger container background for error states */
72
- --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) */
73
- --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 */
74
- --cnvs-sys-color-surface-success-default: oklch(0.8695 0.2801 143.52 / 0.08); /* Container background for success states (not tenant themeable) */
75
- --cnvs-sys-color-surface-success-strong: oklch(0.8685 0.2814 143.77 / 0.15); /* Stronger container background for success states */
76
- --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 */
79
+ --cnvs-sys-color-surface-raised: oklch(0 0 0 / 0.0196); /* Separates a layer from the surface, e.g. table headers or sticky elements */
80
+ --cnvs-sys-color-surface-alt-default: var(--cnvs-sys-color-bg-alt-soft, oklch(0 0 0 / 0.0392)); /* De-emphasized container background for secondary information */
81
+ --cnvs-sys-color-surface-alt-strong: var(--cnvs-sys-color-bg-alt-default, oklch(0 0 0 / 0.0745)); /* Stronger de-emphasized container background */
82
+ --cnvs-sys-color-surface-loading: oklch(0 0 0 / 0.0392); /* Background for skeleton loaders and loading states */
83
+ --cnvs-sys-color-surface-info-default: var(--cnvs-sys-color-bg-info-softest, oklch(0.6141 0.2114 256.22 / 0.0706)); /* Container background for informational callouts */
84
+ --cnvs-sys-color-surface-info-strong: var(--cnvs-sys-color-bg-info-softer, oklch(0.6141 0.2114 256.22 / 0.1098)); /* Stronger container background for info badges and indicators */
85
+ --cnvs-sys-color-surface-danger-default: oklch(0.6329 0.253 30.1 / 0.0431); /* Container background for error states (not tenant themeable) */
86
+ --cnvs-sys-color-surface-danger-strong: oklch(0.6326 0.2533 30.04 / 0.0902); /* Stronger container background for error states */
87
+ --cnvs-sys-color-surface-warning-default: var(--cnvs-sys-color-static-amber-softest, oklch(0.7792 0.1592 90.57 / 0.0902)); /* Container background for warning states (not tenant themeable) */
88
+ --cnvs-sys-color-surface-warning-strong: var(--cnvs-sys-color-static-amber-stronger, oklch(0.8854 0.1841 100.16 / 0.2196)); /* Stronger container background for warning states */
89
+ --cnvs-sys-color-surface-success-default: oklch(0.8669 0.2908 142.93 / 0.0706); /* Container background for success states (not tenant themeable) */
90
+ --cnvs-sys-color-surface-success-strong: oklch(0.8673 0.2872 143.33 / 0.1451); /* Stronger container background for success states */
91
+ --cnvs-sys-color-surface-ai-default: var(--cnvs-sys-color-bg-ai-default, oklch(0.6077 0.215 256.92 / 0.1608)); /* Container background indicating AI-generated content */
77
92
  --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 */
78
93
  --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 */
79
94
  --cnvs-sys-color-surface-transparent: var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)); /* Fully transparent container background */
80
95
  --cnvs-sys-color-surface-inverse: var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)); /* Container background for use on dark backgrounds */
81
- --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 */
82
- --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 */
83
- --cnvs-sys-color-surface-overlay-hover-default: oklch(0.3343 0.0951 253.3 / 0.05); /* Hover state overlay for interactive containers */
84
- --cnvs-sys-color-surface-overlay-hover-inverse: oklch(1 0 0 / 0.16); /* Hover overlay for containers on dark backgrounds */
85
- --cnvs-sys-color-surface-overlay-mixin: oklch(0.629 0.0281 255.62 / 1); /* Pressed state overlay for interactive containers */
86
- --cnvs-sys-color-surface-overlay-pressed-default: oklch(0.3337 0.0688 250.79 / 0.09); /* Pressed state overlay for interactive containers */
87
- --cnvs-sys-color-surface-overlay-pressed-inverse: oklch(1 0 0 / 0.26); /* Pressed overlay for containers on dark backgrounds */
88
- --cnvs-sys-color-surface-overlay-scrim: oklch(0.0847 0 0 / 0.36);
96
+ --cnvs-sys-color-surface-contrast-default: var(--cnvs-sys-color-bg-contrast-default, oklch(0 0 0 / 0.8706)); /* High contrast dark container background */
97
+ --cnvs-sys-color-surface-contrast-strong: var(--cnvs-sys-color-bg-contrast-strong, oklch(0 0 0 / 0.8902)); /* Stronger high contrast dark container background */
98
+ --cnvs-sys-color-surface-overlay-hover-default: oklch(0 0 0 / 0.0392); /* Hover state overlay for interactive containers */
99
+ --cnvs-sys-color-surface-overlay-hover-inverse: oklch(1 0 89.88 / 0.1841); /* Hover overlay for containers on dark backgrounds */
100
+ --cnvs-sys-color-surface-overlay-mixin: oklch(0 0 0 / 1); /* Pressed state overlay for interactive containers */
101
+ --cnvs-sys-color-surface-overlay-pressed-default: oklch(0 0 0 / 0.0745); /* Pressed state overlay for interactive containers */
102
+ --cnvs-sys-color-surface-overlay-pressed-inverse: oklch(1 0 89.88 / 0.25); /* Pressed overlay for containers on dark backgrounds */
103
+ --cnvs-sys-color-surface-overlay-scrim: oklch(0 0 0 / 0.3529);
104
+ --cnvs-sys-color-surface-text-highlight: oklch(0.4602 0.3077 264.17 / 0.2314);
89
105
  --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 */
90
106
  --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) */
91
107
  --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) */
92
108
  --cnvs-sys-color-accent-warning: oklch(0.7909 0.1711 70.15 / 1); /* Solid warning accent for caution indicators (not tenant themeable) */
93
109
  --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) */
94
- --cnvs-sys-color-accent-contrast: oklch(0.0969 0 0 / 0.84); /* High contrast accent for maximum visibility */
95
- --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 */
96
- --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 */
97
- --cnvs-sys-color-accent-overlay-hover: oklch(0.0847 0 0 / 0.17); /* Hover overlay for accent-colored elements */
98
- --cnvs-sys-color-accent-overlay-pressed: oklch(0.0847 0 0 / 0.36); /* Pressed overlay for accent-colored elements */
99
- --cnvs-sys-color-accent-overlay-mixin: oklch(0 0 0 / 1); /* Pressed overlay mixin color for accent-colored elements */
110
+ --cnvs-sys-color-accent-contrast: oklch(0 0 0 / 0.8706); /* High contrast accent for maximum visibility */
111
+ --cnvs-sys-color-accent-muted-default: var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0 0 / 1)); /* Muted accent for secondary visual elements */
112
+ --cnvs-sys-color-accent-muted-soft: var(--cnvs-sys-color-bg-muted-softer, oklch(0.7219 0 89.88 / 1)); /* Softer muted accent for tertiary elements */
113
+ --cnvs-sys-color-accent-overlay-hover: oklch(1 0 89.88 / 0.045); /* Hover overlay for accent-colored elements */
114
+ --cnvs-sys-color-accent-overlay-pressed: oklch(1 0 89.88 / 0.118); /* Pressed overlay for accent-colored elements */
115
+ --cnvs-sys-color-accent-overlay-mixin: oklch(1 0 0 / 1); /* Pressed overlay mixin color for accent-colored elements */
100
116
  --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 */
101
117
  --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 */
102
118
  --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 */
103
119
  --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 */
104
- --cnvs-sys-color-brand-surface-primary-default: oklch(0.6499 0.1912 253.52 / 0.08); /* Tenant-themeable primary container background */
105
- --cnvs-sys-color-brand-surface-primary-strong: oklch(0.6152 0.2108 256.1 / 0.11); /* Stronger tenant-themeable primary container background */
106
- --cnvs-sys-color-brand-surface-critical-default: oklch(0.6289 0.2567 29.11 / 0.04); /* Tenant-themeable critical/error container background */
107
- --cnvs-sys-color-brand-surface-critical-strong: oklch(0.6434 0.2428 30.17 / 0.1); /* Stronger tenant-themeable critical container background */
108
- --cnvs-sys-color-brand-surface-caution-default: oklch(0.7982 0.159 92.57 / 0.1); /* Tenant-themeable caution/warning container background */
109
- --cnvs-sys-color-brand-surface-caution-strong: oklch(0.8864 0.1845 100.28 / 0.22); /* Stronger tenant-themeable caution container background */
110
- --cnvs-sys-color-brand-surface-positive-default: oklch(0.8695 0.2801 143.52 / 0.08); /* Tenant-themeable positive/success container background */
111
- --cnvs-sys-color-brand-surface-positive-strong: oklch(0.8685 0.2814 143.77 / 0.15); /* Stronger tenant-themeable positive container background */
112
- --cnvs-sys-color-brand-surface-selected: oklch(0.6152 0.2108 256.1 / 0.11); /* Tenant-themeable background for selected items */
113
- --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 */
120
+ --cnvs-sys-color-brand-surface-primary-default: oklch(0.6141 0.2114 256.22 / 0.0706); /* Tenant-themeable primary container background */
121
+ --cnvs-sys-color-brand-surface-primary-strong: oklch(0.6141 0.2114 256.22 / 0.1098); /* Stronger tenant-themeable primary container background */
122
+ --cnvs-sys-color-brand-surface-critical-default: oklch(0.6329 0.253 30.1 / 0.0431); /* Tenant-themeable critical/error container background */
123
+ --cnvs-sys-color-brand-surface-critical-strong: oklch(0.6326 0.2533 30.04 / 0.0902); /* Stronger tenant-themeable critical container background */
124
+ --cnvs-sys-color-brand-surface-caution-default: oklch(0.7792 0.1592 90.57 / 0.0902); /* Tenant-themeable caution/warning container background */
125
+ --cnvs-sys-color-brand-surface-caution-strong: oklch(0.8854 0.1841 100.16 / 0.2196); /* Stronger tenant-themeable caution container background */
126
+ --cnvs-sys-color-brand-surface-positive-default: oklch(0.8669 0.2908 142.93 / 0.0706); /* Tenant-themeable positive/success container background */
127
+ --cnvs-sys-color-brand-surface-positive-strong: oklch(0.8673 0.2872 143.33 / 0.1451); /* Stronger tenant-themeable positive container background */
128
+ --cnvs-sys-color-brand-surface-selected: oklch(0 0 0 / 0.0745); /* Tenant-themeable background for selected items */
129
+ --cnvs-sys-color-brand-accent-primary: oklch(0.196 0 89.88 / 1); /* Tenant-themeable solid primary accent for buttons and key actions */
114
130
  --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 */
115
131
  --cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-alert-base, oklch(0.7909 0.1711 70.15 / 1)); /* Tenant-themeable solid caution accent */
116
132
  --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 */
117
- --cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-base, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
118
- --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 */
119
- --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 */
133
+ --cnvs-sys-color-brand-accent-action: oklch(0.196 0 89.88 / 1);
134
+ --cnvs-sys-color-brand-fg-primary-default: oklch(0 0 0 / 0.8706); /* Tenant-themeable primary text and icon color */
135
+ --cnvs-sys-color-brand-fg-primary-strong: oklch(0 0 0 / 0.8902); /* Stronger tenant-themeable primary text and icon color */
120
136
  --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 */
121
137
  --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 */
122
138
  --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 */
123
139
  --cnvs-sys-color-brand-fg-caution-strong: oklch(0.4824 0.1353 46.11 / 1); /* Stronger tenant-themeable caution text and icon color */
124
140
  --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 */
125
141
  --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 */
126
- --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 */
142
+ --cnvs-sys-color-brand-fg-selected: oklch(0 0 0 / 0.8706); /* Tenant-themeable text color for selected items */
143
+ --cnvs-sys-color-brand-fg-link-default: oklch(0.5198 0.1782 256.11 / 1); /* Default text color for hyperlinks */
144
+ --cnvs-sys-color-brand-fg-link-hover: oklch(0.4658 0.1562 255.5 / 1); /* Text color for hyperlinks on hover */
127
145
  --cnvs-sys-color-brand-border-primary: oklch(0.6023 0.2032 255.68 / 1); /* Tenant-themeable primary border for focused inputs */
128
146
  --cnvs-sys-color-brand-border-critical: oklch(0.6495 0.2369 30.04 / 1); /* Tenant-themeable critical border for error states */
129
147
  --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 */
130
148
  --cnvs-sys-color-focus-inverse: var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)); /* Focus ring for use on dark backgrounds */
131
- --cnvs-sys-color-focus-contrast: oklch(0.0969 0 0 / 0.84); /* High contrast focus ring for accessibility */
149
+ --cnvs-sys-color-focus-contrast: oklch(0 0 0 / 0.8706); /* High contrast focus ring for accessibility */
150
+ --cnvs-sys-color-chart-diverging-azure-coral-1: oklch(0.326 0.07 235.91 / 1);
151
+ --cnvs-sys-color-chart-diverging-azure-coral-2: oklch(0.3912 0.0855 237.05 / 1);
152
+ --cnvs-sys-color-chart-diverging-azure-coral-3: oklch(0.4618 0.1098 242.11 / 1);
153
+ --cnvs-sys-color-chart-diverging-azure-coral-4: oklch(0.5174 0.1257 243.24 / 1);
154
+ --cnvs-sys-color-chart-diverging-azure-coral-5: oklch(0.6555 0.1553 244.48 / 1);
155
+ --cnvs-sys-color-chart-diverging-azure-coral-6: oklch(0.7283 0.1377 242.63 / 1);
156
+ --cnvs-sys-color-chart-diverging-azure-coral-7: oklch(0.7991 0.107 239.24 / 1);
157
+ --cnvs-sys-color-chart-diverging-azure-coral-8: oklch(0.8594 0.0867 230.07 / 1);
158
+ --cnvs-sys-color-chart-diverging-azure-coral-9: oklch(0.9321 0.0425 227.25 / 1);
159
+ --cnvs-sys-color-chart-diverging-azure-coral-10: oklch(0.9549 0.0295 223.86 / 1);
160
+ --cnvs-sys-color-chart-diverging-azure-coral-11: oklch(0.981 0.0131 220.96 / 1);
161
+ --cnvs-sys-color-chart-diverging-azure-coral-12: oklch(1 0 0 / 1);
162
+ --cnvs-sys-color-chart-diverging-azure-coral-13: oklch(0.9837 0.0085 44.54 / 1);
163
+ --cnvs-sys-color-chart-diverging-azure-coral-14: oklch(0.9659 0.0171 35.14 / 1);
164
+ --cnvs-sys-color-chart-diverging-azure-coral-15: oklch(0.9344 0.0339 35.8 / 1);
165
+ --cnvs-sys-color-chart-diverging-azure-coral-16: oklch(0.8476 0.0856 37.59 / 1);
166
+ --cnvs-sys-color-chart-diverging-azure-coral-17: oklch(0.7671 0.1418 38.37 / 1);
167
+ --cnvs-sys-color-chart-diverging-azure-coral-18: oklch(0.7279 0.1703 38.58 / 1);
168
+ --cnvs-sys-color-chart-diverging-azure-coral-19: oklch(0.6779 0.2096 40.36 / 1);
169
+ --cnvs-sys-color-chart-diverging-azure-coral-20: oklch(0.5394 0.1828 36.43 / 1);
170
+ --cnvs-sys-color-chart-diverging-azure-coral-21: oklch(0.4616 0.1629 34.74 / 1);
171
+ --cnvs-sys-color-chart-diverging-azure-coral-22: oklch(0.393 0.143 33.49 / 1);
172
+ --cnvs-sys-color-chart-diverging-azure-coral-23: oklch(0.3043 0.1137 32.49 / 1);
173
+ --cnvs-sys-color-chart-categorical-1: oklch(0.6385 0.1093 205.92 / 1);
174
+ --cnvs-sys-color-chart-categorical-2: oklch(0.3908 0.128 256 / 1);
175
+ --cnvs-sys-color-chart-categorical-3: oklch(0.6617 0.1893 44.93 / 1);
176
+ --cnvs-sys-color-chart-categorical-4: oklch(0.6555 0.1553 244.48 / 1);
177
+ --cnvs-sys-color-chart-categorical-5: oklch(0.534 0.183 344.19 / 1);
178
+ --cnvs-sys-color-chart-categorical-6: var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1));
179
+ --cnvs-sys-color-chart-categorical-7: oklch(0.628 0.1681 312.69 / 1);
180
+ --cnvs-sys-color-chart-categorical-8: var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1));
181
+ --cnvs-sys-color-chart-categorical-9: oklch(0.4634 0.0796 207.82 / 1);
182
+ --cnvs-sys-color-chart-categorical-10: oklch(0.5289 0.2241 281.65 / 1);
183
+ --cnvs-sys-color-chart-categorical-11: oklch(0.4689 0.1456 40.5 / 1);
184
+ --cnvs-sys-color-chart-categorical-12: oklch(0.4618 0.1098 242.11 / 1);
185
+ --cnvs-sys-color-chart-categorical-13: oklch(0.476 0.156 313.2 / 1);
186
+ --cnvs-sys-color-chart-categorical-14: oklch(0.5394 0.1828 36.43 / 1);
187
+ --cnvs-sys-color-chart-categorical-15: var(--cnvs-brand-success-darkest, oklch(0.3955 0.1156 147.66 / 1));
188
+ --cnvs-sys-color-chart-categorical-16: oklch(0.4824 0.1353 46.11 / 1);
189
+ --cnvs-sys-color-chart-sequential-1: oklch(0.9827 0.021 200.66 / 1);
190
+ --cnvs-sys-color-chart-sequential-2: oklch(0.9575 0.0424 203.83 / 1);
191
+ --cnvs-sys-color-chart-sequential-3: oklch(0.935 0.046 205.09 / 1);
192
+ --cnvs-sys-color-chart-sequential-4: oklch(0.8766 0.0677 204.24 / 1);
193
+ --cnvs-sys-color-chart-sequential-5: oklch(0.7836 0.0874 204.93 / 1);
194
+ --cnvs-sys-color-chart-sequential-6: oklch(0.7154 0.1006 206.05 / 1);
195
+ --cnvs-sys-color-chart-sequential-7: oklch(0.6385 0.1093 205.92 / 1);
196
+ --cnvs-sys-color-chart-sequential-8: oklch(0.5141 0.0882 207.28 / 1);
197
+ --cnvs-sys-color-chart-sequential-9: oklch(0.4634 0.0796 207.82 / 1);
198
+ --cnvs-sys-color-chart-sequential-10: oklch(0.3982 0.0687 209.08 / 1);
199
+ --cnvs-sys-color-chart-sequential-11: oklch(0.3052 0.0529 210.69 / 1);
132
200
  --cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100, 0.08); /* State layer applied to surface colors on hover */
133
201
  --cnvs-sys-opacity-surface-pressed: 0.18; /* State layer applied to surface colors while pressing */
134
- --cnvs-sys-opacity-accent-hover: 0.18; /* State layer applied to accent colors on hover */
135
- --cnvs-sys-opacity-accent-pressed: 0.36; /* State layer applied to accent colors while pressing */
136
202
  --cnvs-sys-size-xxxs: var(--cnvs-sys-space-x4, 1rem); /* Used for switch toggle. */
137
203
  --cnvs-sys-size-xxs: var(--cnvs-sys-space-x5, 1.25rem); /* Compact indicators. Used for status indicators and count badges. */
138
204
  --cnvs-sys-size-xs: var(--cnvs-sys-space-x6, 1.5rem); /* Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons. */
@@ -156,8 +222,9 @@
156
222
  --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. */
157
223
  --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. */
158
224
  --cnvs-sys-gap-xxl: var(--cnvs-sys-space-x16, 4rem); /* Use this for the space between content sections */
159
- --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-sys-type-letter-spacing-subtext-small, 0.025rem);
160
- --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-sys-type-letter-spacing-subtext-medium, 0.02rem);
161
- --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-sys-type-letter-spacing-subtext-large, 0.015rem);
162
- --cnvs-sys-letter-spacing-body-sm: var(--cnvs-sys-type-letter-spacing-body-small, 0.01rem);
225
+ --cnvs-sys-font-family-fallback: "-apple-system, BlinkMacSystemFont, "Sana Serif", Roboto, Inter, system-ui, Avenir, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif";
226
+ --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-sys-type-letter-spacing-subtext-small, 0.008125rem);
227
+ --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-sys-type-letter-spacing-subtext-medium, 0.0075rem);
228
+ --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-sys-type-letter-spacing-subtext-large, 0.006875rem);
229
+ --cnvs-sys-letter-spacing-body-sm: var(--cnvs-sys-type-letter-spacing-body-small, 0.00625rem);
163
230
  }