@workday/canvas-tokens-web 5.0.0-alpha.0 → 5.0.0-alpha.2

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 (41) hide show
  1. package/css/base/_variables.css +141 -100
  2. package/css/brand/_variables.css +39 -31
  3. package/css/component/_variables.css +1 -1
  4. package/css/legacy/base.css +340 -0
  5. package/css/legacy/brand.css +121 -0
  6. package/css/legacy/component.css +23 -0
  7. package/css/legacy/system.css +232 -0
  8. package/css/system/_variables.css +126 -53
  9. package/dist/common-js/base/index.d.ts +908 -732
  10. package/dist/common-js/base/index.js +378 -1
  11. package/dist/common-js/brand/index.d.ts +260 -77
  12. package/dist/common-js/brand/index.js +131 -1
  13. package/dist/common-js/component/index.d.ts +36 -1
  14. package/dist/common-js/component/index.js +31 -1
  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 +956 -70
  18. package/dist/common-js/system/index.js +520 -14
  19. package/dist/es6/base/index.d.ts +908 -732
  20. package/dist/es6/base/index.js +378 -1
  21. package/dist/es6/brand/index.d.ts +260 -77
  22. package/dist/es6/brand/index.js +131 -1
  23. package/dist/es6/component/index.d.ts +36 -1
  24. package/dist/es6/component/index.js +31 -1
  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 +956 -70
  28. package/dist/es6/system/index.js +520 -14
  29. package/less/base/_variables.less +141 -100
  30. package/less/brand/_variables.less +39 -31
  31. package/less/component/_variables.less +1 -1
  32. package/less/system/_variables.less +126 -53
  33. package/package.json +1 -1
  34. package/scss/base/_variables.sass +141 -100
  35. package/scss/base/_variables.scss +141 -100
  36. package/scss/brand/_variables.sass +39 -31
  37. package/scss/brand/_variables.scss +39 -31
  38. package/scss/component/_variables.sass +1 -1
  39. package/scss/component/_variables.scss +1 -1
  40. package/scss/system/_variables.sass +126 -53
  41. package/scss/system/_variables.scss +126 -53
package/css/system/_variables.css CHANGED
@@ -1,33 +1,42 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 22:28:08 GMT
3
+ * Generated on Thu, 25 Jun 2026 23:45:09 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.125rem 0.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Standard card depth */
8
- --cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.25rem 1rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Top navigation, Bottom Navigation */
9
- --cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.375rem 1.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Floating Action Buttons (FAB), Menus */
10
- --cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.5rem 2rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Bottom Sheets */
11
- --cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.625rem 2.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
12
- --cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75rem 3rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
7
+ --cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.125rem 0.5rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); /* Standard card depth */
8
+ --cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.25rem 1rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); /* Top navigation, Bottom Navigation */
9
+ --cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.375rem 1.5rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); /* Floating Action Buttons (FAB), Menus */
10
+ --cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.5rem 2rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); /* Bottom Sheets */
11
+ --cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.625rem 2.5rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
12
+ --cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.75rem 3rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
13
+ --cnvs-sys-opacity-accent-pressed: 0.118; /* State layer applied to accent colors while pressing */
14
+ --cnvs-sys-opacity-accent-hover: 0.045; /* State layer applied to accent colors on hover */
13
15
  --cnvs-sys-opacity-full: 1; /* Dev only */
14
16
  --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
15
17
  --cnvs-sys-breakpoints-zero: 0; /* Use to set a media query `min-width` below small. */
16
- --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
17
- --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
18
- --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
19
- --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
20
- --cnvs-sys-letter-spacing-body-sm: var(--cnvs-base-letter-spacing-200);
21
- --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-base-letter-spacing-150);
22
- --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-base-letter-spacing-100);
23
- --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-base-letter-spacing-50);
18
+ --cnvs-sys-font-weight-bold: 700;
19
+ --cnvs-sys-font-weight-medium: 500;
20
+ --cnvs-sys-font-weight-normal: 400;
21
+ --cnvs-sys-font-weight-light: 300;
22
+ --cnvs-sys-letter-spacing-title-lg: var(--cnvs-base-letter-spacing-12);
23
+ --cnvs-sys-letter-spacing-title-md: var(--cnvs-base-letter-spacing-11);
24
+ --cnvs-sys-letter-spacing-title-sm: var(--cnvs-base-letter-spacing-10);
25
+ --cnvs-sys-letter-spacing-heading-lg: var(--cnvs-base-letter-spacing-9);
26
+ --cnvs-sys-letter-spacing-heading-md: var(--cnvs-base-letter-spacing-8);
27
+ --cnvs-sys-letter-spacing-heading-sm: var(--cnvs-base-letter-spacing-7);
28
+ --cnvs-sys-letter-spacing-body-lg: var(--cnvs-base-letter-spacing-6);
29
+ --cnvs-sys-letter-spacing-body-md: var(--cnvs-base-letter-spacing-5);
30
+ --cnvs-sys-letter-spacing-body-sm: var(--cnvs-base-letter-spacing-4);
31
+ --cnvs-sys-letter-spacing-subtext-lg: var(--cnvs-base-letter-spacing-3);
32
+ --cnvs-sys-letter-spacing-subtext-md: var(--cnvs-base-letter-spacing-2);
33
+ --cnvs-sys-letter-spacing-subtext-sm: var(--cnvs-base-letter-spacing-1);
34
+ --cnvs-sys-font-family-fallback: var(--cnvs-base-font-family-0);
24
35
  --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
25
36
  --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
26
37
  --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
27
38
  --cnvs-sys-gap-none: var(--cnvs-base-size-0); /* Use when there is no space between elements */
28
39
  --cnvs-sys-padding-none: var(--cnvs-base-size-0); /* Use when there should be no space between content and element's edges. */
29
- --cnvs-sys-opacity-accent-pressed: var(--cnvs-base-opacity-360); /* State layer applied to accent colors while pressing */
30
- --cnvs-sys-opacity-accent-hover: var(--cnvs-base-opacity-180); /* State layer applied to accent colors on hover */
31
40
  --cnvs-sys-opacity-surface-pressed: var(--cnvs-base-opacity-180); /* State layer applied to surface colors while pressing */
32
41
  --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-80); /* Alpha on second shadow */
33
42
  --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-120); /* Alpha on first shadow */
@@ -41,25 +50,75 @@
41
50
  --cnvs-sys-motion-easing-quick-deceleration: var(--cnvs-base-easing-a-300);
42
51
  --cnvs-sys-motion-easing-quick-acceleration: var(--cnvs-base-easing-a-200);
43
52
  --cnvs-sys-motion-easing-quick-standard: var(--cnvs-base-easing-a-100);
53
+ --cnvs-sys-color-chart-sequential-11: var(--cnvs-base-palette-teal-900);
54
+ --cnvs-sys-color-chart-sequential-10: var(--cnvs-base-palette-teal-800);
55
+ --cnvs-sys-color-chart-sequential-9: var(--cnvs-base-palette-teal-700);
56
+ --cnvs-sys-color-chart-sequential-8: var(--cnvs-base-palette-teal-600);
57
+ --cnvs-sys-color-chart-sequential-7: var(--cnvs-base-palette-teal-500);
58
+ --cnvs-sys-color-chart-sequential-6: var(--cnvs-base-palette-teal-400);
59
+ --cnvs-sys-color-chart-sequential-5: var(--cnvs-base-palette-teal-300);
60
+ --cnvs-sys-color-chart-sequential-4: var(--cnvs-base-palette-teal-200);
61
+ --cnvs-sys-color-chart-sequential-3: var(--cnvs-base-palette-teal-100);
62
+ --cnvs-sys-color-chart-sequential-2: var(--cnvs-base-palette-teal-50);
63
+ --cnvs-sys-color-chart-sequential-1: var(--cnvs-base-palette-teal-25);
64
+ --cnvs-sys-color-chart-categorical-14: var(--cnvs-base-palette-coral-600);
65
+ --cnvs-sys-color-chart-categorical-13: var(--cnvs-base-palette-purple-700);
66
+ --cnvs-sys-color-chart-categorical-12: var(--cnvs-base-palette-azure-700);
67
+ --cnvs-sys-color-chart-categorical-11: var(--cnvs-base-palette-orange-700);
68
+ --cnvs-sys-color-chart-categorical-10: var(--cnvs-base-palette-indigo-600);
69
+ --cnvs-sys-color-chart-categorical-9: var(--cnvs-base-palette-teal-700);
70
+ --cnvs-sys-color-chart-categorical-7: var(--cnvs-base-palette-purple-500);
71
+ --cnvs-sys-color-chart-categorical-5: var(--cnvs-base-palette-magenta-600);
72
+ --cnvs-sys-color-chart-categorical-4: var(--cnvs-base-palette-azure-500);
73
+ --cnvs-sys-color-chart-categorical-3: var(--cnvs-base-palette-orange-500);
74
+ --cnvs-sys-color-chart-categorical-2: var(--cnvs-base-palette-blue-800);
75
+ --cnvs-sys-color-chart-categorical-1: var(--cnvs-base-palette-teal-500);
76
+ --cnvs-sys-color-chart-diverging-azure-coral-23: var(--cnvs-base-palette-coral-900);
77
+ --cnvs-sys-color-chart-diverging-azure-coral-22: var(--cnvs-base-palette-coral-800);
78
+ --cnvs-sys-color-chart-diverging-azure-coral-21: var(--cnvs-base-palette-coral-700);
79
+ --cnvs-sys-color-chart-diverging-azure-coral-20: var(--cnvs-base-palette-coral-600);
80
+ --cnvs-sys-color-chart-diverging-azure-coral-19: var(--cnvs-base-palette-coral-500);
81
+ --cnvs-sys-color-chart-diverging-azure-coral-18: var(--cnvs-base-palette-coral-400);
82
+ --cnvs-sys-color-chart-diverging-azure-coral-17: var(--cnvs-base-palette-coral-300);
83
+ --cnvs-sys-color-chart-diverging-azure-coral-16: var(--cnvs-base-palette-coral-200);
84
+ --cnvs-sys-color-chart-diverging-azure-coral-15: var(--cnvs-base-palette-coral-100);
85
+ --cnvs-sys-color-chart-diverging-azure-coral-14: var(--cnvs-base-palette-coral-50);
86
+ --cnvs-sys-color-chart-diverging-azure-coral-13: var(--cnvs-base-palette-coral-25);
87
+ --cnvs-sys-color-chart-diverging-azure-coral-12: var(--cnvs-base-palette-neutral-0);
88
+ --cnvs-sys-color-chart-diverging-azure-coral-11: var(--cnvs-base-palette-azure-25);
89
+ --cnvs-sys-color-chart-diverging-azure-coral-10: var(--cnvs-base-palette-azure-50);
90
+ --cnvs-sys-color-chart-diverging-azure-coral-9: var(--cnvs-base-palette-azure-100);
91
+ --cnvs-sys-color-chart-diverging-azure-coral-8: var(--cnvs-base-palette-azure-200);
92
+ --cnvs-sys-color-chart-diverging-azure-coral-7: var(--cnvs-base-palette-azure-300);
93
+ --cnvs-sys-color-chart-diverging-azure-coral-6: var(--cnvs-base-palette-azure-400);
94
+ --cnvs-sys-color-chart-diverging-azure-coral-5: var(--cnvs-base-palette-azure-500);
95
+ --cnvs-sys-color-chart-diverging-azure-coral-4: var(--cnvs-base-palette-azure-600);
96
+ --cnvs-sys-color-chart-diverging-azure-coral-3: var(--cnvs-base-palette-azure-700);
97
+ --cnvs-sys-color-chart-diverging-azure-coral-2: var(--cnvs-base-palette-azure-800);
98
+ --cnvs-sys-color-chart-diverging-azure-coral-1: var(--cnvs-base-palette-azure-900);
44
99
  --cnvs-sys-color-focus-contrast: var(--cnvs-base-palette-neutral-a900); /* High contrast focus ring for accessibility */
45
100
  --cnvs-sys-color-focus-inverse: var(--cnvs-base-palette-neutral-0); /* Focus ring for use on dark backgrounds */
46
- --cnvs-sys-color-accent-overlay-mixin: var(--cnvs-base-palette-neutral-1000); /* Pressed overlay mixin color for accent-colored elements */
47
- --cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400); /* Pressed overlay for accent-colored elements */
48
- --cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200); /* Hover overlay for accent-colored elements */
49
- --cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-slate-400); /* Softer muted accent for tertiary elements */
50
- --cnvs-sys-color-accent-muted-default: var(--cnvs-base-palette-slate-600); /* Muted accent for secondary visual elements */
101
+ --cnvs-sys-color-brand-fg-link-hover: var(--cnvs-base-palette-blue-700); /* Text color for hyperlinks on hover */
102
+ --cnvs-sys-color-brand-fg-link-default: var(--cnvs-base-palette-blue-600); /* Default text color for hyperlinks */
103
+ --cnvs-sys-color-accent-overlay-mixin: var(--cnvs-base-palette-neutral-0); /* Pressed overlay mixin color for accent-colored elements */
104
+ --cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-white-a100); /* Pressed overlay for accent-colored elements */
105
+ --cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-white-a50); /* Hover overlay for accent-colored elements */
106
+ --cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-neutral-400); /* Softer muted accent for tertiary elements */
107
+ --cnvs-sys-color-accent-muted-default: var(--cnvs-base-palette-neutral-600); /* Muted accent for secondary visual elements */
51
108
  --cnvs-sys-color-accent-contrast: var(--cnvs-base-palette-neutral-a900); /* High contrast accent for maximum visibility */
52
109
  --cnvs-sys-color-accent-success: var(--cnvs-base-palette-green-600); /* Solid success accent for positive indicators (not tenant themeable) */
53
110
  --cnvs-sys-color-accent-warning: var(--cnvs-base-palette-amber-400); /* Solid warning accent for caution indicators (not tenant themeable) */
54
111
  --cnvs-sys-color-accent-danger: var(--cnvs-base-palette-red-600); /* Solid danger accent for error indicators (not tenant themeable) */
55
112
  --cnvs-sys-color-accent-info: var(--cnvs-base-palette-blue-600); /* Solid info accent for indicators (not tenant themeable) */
56
113
  --cnvs-sys-color-accent-ai: var(--cnvs-base-palette-blue-950); /* Dark accent indicating AI-generated content */
114
+ --cnvs-sys-color-surface-text-highlight: var(--cnvs-base-palette-indigo-a200);
115
+ --cnvs-sys-color-surface-overlay-raised: var(--cnvs-base-palette-white-a300); /* Semi-transparent backdrop behind modals and dialogs */
57
116
  --cnvs-sys-color-surface-overlay-scrim: var(--cnvs-base-palette-neutral-a400);
58
- --cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a300); /* Pressed overlay for containers on dark backgrounds */
59
- --cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a100); /* Pressed state overlay for interactive containers */
60
- --cnvs-sys-color-surface-overlay-mixin: var(--cnvs-base-palette-slate-500); /* Pressed state overlay for interactive containers */
61
- --cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a200); /* Hover overlay for containers on dark backgrounds */
62
- --cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a50); /* Hover state overlay for interactive containers */
117
+ --cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a200); /* Pressed overlay for containers on dark backgrounds */
118
+ --cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-neutral-a100); /* Pressed state overlay for interactive containers */
119
+ --cnvs-sys-color-surface-overlay-mixin: var(--cnvs-base-palette-neutral-1000); /* Pressed state overlay for interactive containers */
120
+ --cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a150); /* Hover overlay for containers on dark backgrounds */
121
+ --cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-neutral-a50); /* Hover state overlay for interactive containers */
63
122
  --cnvs-sys-color-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950); /* Stronger high contrast dark container background */
64
123
  --cnvs-sys-color-surface-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast dark container background */
65
124
  --cnvs-sys-color-surface-inverse: var(--cnvs-base-palette-neutral-0); /* Container background for use on dark backgrounds */
@@ -75,13 +134,11 @@
75
134
  --cnvs-sys-color-surface-danger-default: var(--cnvs-base-palette-red-a25); /* Container background for error states (not tenant themeable) */
76
135
  --cnvs-sys-color-surface-info-strong: var(--cnvs-base-palette-blue-a50); /* Stronger container background for info badges and indicators */
77
136
  --cnvs-sys-color-surface-info-default: var(--cnvs-base-palette-blue-a25); /* Container background for informational callouts */
78
- --cnvs-sys-color-surface-loading: var(--cnvs-base-palette-slate-a200); /* Background for skeleton loaders and loading states */
79
- --cnvs-sys-color-surface-alt-strong: var(--cnvs-base-palette-slate-a100); /* Stronger de-emphasized container background */
80
- --cnvs-sys-color-surface-alt-default: var(--cnvs-base-palette-slate-a50); /* De-emphasized container background for secondary information */
81
- --cnvs-sys-color-surface-raised: var(--cnvs-base-palette-slate-a25); /* Separates a layer from the surface, e.g. table headers or sticky elements */
137
+ --cnvs-sys-color-surface-alt-strong: var(--cnvs-base-palette-neutral-a100); /* Stronger de-emphasized container background */
138
+ --cnvs-sys-color-surface-alt-default: var(--cnvs-base-palette-neutral-a50); /* De-emphasized container background for secondary information */
82
139
  --cnvs-sys-color-surface-modal: var(--cnvs-base-palette-neutral-0); /* Background for modal dialog containers */
83
140
  --cnvs-sys-color-surface-popover: var(--cnvs-base-palette-neutral-0); /* Background for floating containers like dropdowns and tooltips */
84
- --cnvs-sys-color-surface-navigation: var(--cnvs-base-palette-slate-50); /* Background for navigation containers like sidebars and top bars */
141
+ --cnvs-sys-color-surface-navigation: var(--cnvs-base-palette-neutral-50); /* Background for navigation containers like sidebars and top bars */
85
142
  --cnvs-sys-color-surface-default: var(--cnvs-base-palette-neutral-0); /* Default background for containers on top of the page */
86
143
  --cnvs-sys-color-static-amber-soft: var(--cnvs-base-palette-amber-100); /* Soft amber */
87
144
  --cnvs-sys-color-static-amber-strongest: var(--cnvs-base-palette-amber-950); /* Stronger amber */
@@ -129,11 +186,11 @@
129
186
  --cnvs-sys-color-border-transparent: var(--cnvs-base-palette-neutral-a0); /* Invisible border for layout spacing */
130
187
  --cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700); /* Stronger border for use on dark backgrounds */
131
188
  --cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-neutral-0); /* Border for use on dark backgrounds */
132
- --cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-400); /* Border for warning states (not tenant themeable) */
189
+ --cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-500); /* Border for warning states (not tenant themeable) */
133
190
  --cnvs-sys-color-border-danger: var(--cnvs-base-palette-red-500); /* Border for error states (not tenant themeable) */
134
191
  --cnvs-sys-color-border-info-default: var(--cnvs-base-palette-blue-500); /* Border for informational containers (not tenant themeable) */
135
- --cnvs-sys-color-border-strong: var(--cnvs-base-palette-slate-a300); /* Stronger border for more visible separation */
136
- --cnvs-sys-color-border-default: var(--cnvs-base-palette-slate-a200); /* Default border for containers and dividers */
192
+ --cnvs-sys-color-border-strong: var(--cnvs-base-palette-neutral-a200); /* Stronger border for more visible separation */
193
+ --cnvs-sys-color-border-default: var(--cnvs-base-palette-neutral-a100); /* Default border for containers and dividers */
137
194
  --cnvs-sys-color-border-container: var(--cnvs-base-palette-slate-300); /* Cards, Toasts, Surfaces */
138
195
  --cnvs-sys-color-border-primary-default: var(--cnvs-base-palette-blue-500); /* Brand, Focus */
139
196
  --cnvs-sys-color-border-divider: var(--cnvs-base-palette-slate-200); /* Dividers */
@@ -142,12 +199,12 @@
142
199
  --cnvs-sys-color-border-critical-default: var(--cnvs-base-palette-red-500); /* Error */
143
200
  --cnvs-sys-color-border-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast border for maximum visibility */
144
201
  --cnvs-sys-color-border-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Secondary Button Hover */
145
- --cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-slate-a700); /* Hover state border for form inputs */
146
- --cnvs-sys-color-border-input-default: var(--cnvs-base-palette-slate-a500); /* Default border for form inputs */
202
+ --cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-neutral-a700); /* Hover state border for form inputs */
203
+ --cnvs-sys-color-border-input-default: var(--cnvs-base-palette-neutral-a500); /* Default border for form inputs */
147
204
  --cnvs-sys-color-border-input-inverse: var(--cnvs-base-palette-neutral-0); /* Borders on checkboxes and radios */
148
205
  --cnvs-sys-color-border-input-strong: var(--cnvs-base-palette-slate-700); /* Input hover */
149
206
  --cnvs-sys-color-border-input-disabled: var(--cnvs-base-palette-slate-400); /* Disabled inputs */
150
- --cnvs-sys-color-border-ai: var(--cnvs-base-palette-blue-950); /* Active state on AI borders */
207
+ --cnvs-sys-color-border-ai: var(--cnvs-base-palette-blue-950); /* Border color for AI-focused input elements */
151
208
  --cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-a950); /* Stronger high contrast text */
152
209
  --cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast text for maximum readability */
153
210
  --cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* Text and icons indicating AI-generated content */
@@ -158,7 +215,7 @@
158
215
  --cnvs-sys-color-fg-danger-strong: var(--cnvs-base-palette-red-700); /* Stronger error text and icons */
159
216
  --cnvs-sys-color-fg-danger-default: var(--cnvs-base-palette-red-600); /* Error text and icons (not tenant themeable) */
160
217
  --cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Text and icons for use on dark backgrounds */
161
- --cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-a400); /* Disabled state text and icons */
218
+ --cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-neutral-a400); /* Disabled state text and icons */
162
219
  --cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-a950); /* Strongest text for titles */
163
220
  --cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-a900); /* Stronger text for headings and labels */
164
221
  --cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-a800); /* Default body text and icons */
@@ -286,7 +343,7 @@
286
343
  --cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
287
344
  --cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
288
345
  --cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
289
- --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-50); /* Alternative page background for visual separation between page sections */
346
+ --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-neutral-50); /* Alternative page background for visual separation between page sections */
290
347
  --cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
291
348
  --cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
292
349
  --cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
@@ -318,9 +375,9 @@
318
375
  --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 */
319
376
  --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 */
320
377
  --cnvs-sys-space-x14: calc(var(--cnvs-base-unit) * 14); /* Mobile only */
321
- --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 */
322
- --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 */
323
- --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 */
378
+ --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 */
379
+ --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 */
380
+ --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 */
324
381
  --cnvs-sys-space-x5: calc(var(--cnvs-base-unit) * 5); /* Mobile only */
325
382
  --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
326
383
  --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
@@ -339,24 +396,28 @@
339
396
  --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
340
397
  --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
341
398
  --cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100); /* State layer applied to surface colors on hover */
399
+ --cnvs-sys-color-chart-categorical-16: var(--cnvs-brand-caution-700);
400
+ --cnvs-sys-color-chart-categorical-15: var(--cnvs-brand-positive-800);
401
+ --cnvs-sys-color-chart-categorical-8: var(--cnvs-brand-caution-500);
402
+ --cnvs-sys-color-chart-categorical-6: var(--cnvs-brand-positive-600);
342
403
  --cnvs-sys-color-brand-border-caution: var(--cnvs-brand-caution-500); /* Tenant-themeable caution border for warning states */
343
404
  --cnvs-sys-color-brand-border-critical: var(--cnvs-brand-critical-500); /* Tenant-themeable critical border for error states */
344
405
  --cnvs-sys-color-brand-border-primary: var(--cnvs-brand-primary-500); /* Tenant-themeable primary border for focused inputs */
345
- --cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-700); /* Tenant-themeable text color for selected items */
406
+ --cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-neutral-a900); /* Tenant-themeable text color for selected items */
346
407
  --cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-positive-700); /* Stronger tenant-themeable positive text and icon color */
347
408
  --cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-positive-600); /* Tenant-themeable positive text and icon color */
348
409
  --cnvs-sys-color-brand-fg-caution-strong: var(--cnvs-brand-caution-700); /* Stronger tenant-themeable caution text and icon color */
349
410
  --cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-caution-600); /* Tenant-themeable caution text and icon color */
350
411
  --cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-critical-700); /* Stronger tenant-themeable critical text and icon color */
351
412
  --cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-critical-600); /* Tenant-themeable critical text and icon color */
352
- --cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-700); /* Stronger tenant-themeable primary text and icon color */
353
- --cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-600); /* Tenant-themeable primary text and icon color */
354
- --cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-600);
413
+ --cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-neutral-a950); /* Stronger tenant-themeable primary text and icon color */
414
+ --cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-neutral-a900); /* Tenant-themeable primary text and icon color */
415
+ --cnvs-sys-color-brand-accent-action: var(--cnvs-brand-neutral-975);
355
416
  --cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-positive-600); /* Tenant-themeable solid positive accent */
356
417
  --cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-caution-400); /* Tenant-themeable solid caution accent */
357
418
  --cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-critical-600); /* Tenant-themeable solid critical accent for destructive actions */
358
- --cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-600); /* Tenant-themeable solid primary accent for buttons and key actions */
359
- --cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-primary-a50); /* Tenant-themeable background for selected items */
419
+ --cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-neutral-975); /* Tenant-themeable solid primary accent for buttons and key actions */
420
+ --cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-neutral-a100); /* Tenant-themeable background for selected items */
360
421
  --cnvs-sys-color-brand-surface-positive-strong: var(--cnvs-brand-positive-a50); /* Stronger tenant-themeable positive container background */
361
422
  --cnvs-sys-color-brand-surface-positive-default: var(--cnvs-brand-positive-a25); /* Tenant-themeable positive/success container background */
362
423
  --cnvs-sys-color-brand-surface-caution-strong: var(--cnvs-brand-caution-a50); /* Stronger tenant-themeable caution container background */
@@ -369,11 +430,14 @@
369
430
  --cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-caution-500); /* Tenant-themeable outer focus ring for caution-state elements */
370
431
  --cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-critical-500); /* Tenant-themeable focus ring for error-state elements */
371
432
  --cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-primary-500); /* Tenant-themeable focus ring for interactive elements */
433
+ --cnvs-sys-color-surface-loading: var(--cnvs-brand-neutral-a50); /* Background for skeleton loaders and loading states */
434
+ --cnvs-sys-color-surface-raised: var(--cnvs-brand-neutral-a25); /* Separates a layer from the surface, e.g. table headers or sticky elements */
372
435
  --cnvs-sys-color-shadow-default: var(--cnvs-sys-color-shadow-base); /* Main shadow color */
373
436
  --cnvs-sys-color-shadow-2: var(--cnvs-sys-color-shadow-ambient); /* Second shadow color */
374
437
  --cnvs-sys-color-shadow-1: var(--cnvs-sys-color-shadow-base); /* First shadow color */
375
438
  --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
376
439
  --cnvs-sys-shape-zero: var(--cnvs-sys-shape-none); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
440
+ --cnvs-sys-breakpoints-xxl: 2180px; /* Figma only. Use as the max-width on xl media query. */
377
441
  --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
378
442
  --cnvs-sys-breakpoints-lg: 1024px; /* Large screens, such as desktops. */
379
443
  --cnvs-sys-breakpoints-md: 768px; /* Medium screens, such as laptops. */
@@ -406,7 +470,7 @@
406
470
  --cnvs-sys-line-height-heading-md: var(--cnvs-base-size-450);
407
471
  --cnvs-sys-line-height-heading-sm: var(--cnvs-base-size-400);
408
472
  --cnvs-sys-line-height-body-lg: var(--cnvs-base-size-350);
409
- --cnvs-sys-line-height-body-md: var(--cnvs-base-size-350);
473
+ --cnvs-sys-line-height-body-md: var(--cnvs-base-size-300);
410
474
  --cnvs-sys-line-height-body-sm: var(--cnvs-base-size-300);
411
475
  --cnvs-sys-line-height-subtext-lg: var(--cnvs-base-size-250);
412
476
  --cnvs-sys-line-height-subtext-md: var(--cnvs-base-size-200);
@@ -425,12 +489,13 @@
425
489
  --cnvs-sys-font-size-subtext-sm: var(--cnvs-base-size-125);
426
490
  --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
427
491
  --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) */
428
- --cnvs-sys-shape-xxxl: var(--cnvs-base-size-400); /* Maximum rounding for modals and large containers */
429
- --cnvs-sys-shape-xxl: var(--cnvs-base-size-300); /* Extra extra large rounding for cards and items */
492
+ --cnvs-sys-shape-xxxl: var(--cnvs-base-size-350); /* Large elevated surfaces, like Modals */
493
+ --cnvs-sys-shape-xxl: var(--cnvs-base-size-250); /* Flat or raised surfaces, like Cards or Menu */
430
494
  --cnvs-sys-shape-xl: var(--cnvs-base-size-200); /* Extra large rounding for prominent containers */
431
495
  --cnvs-sys-shape-lg: var(--cnvs-base-size-150); /* Rich text editor */
432
496
  --cnvs-sys-shape-md: var(--cnvs-base-size-100); /* Inputs, Toast, Tooltip, Snackbar */
433
- --cnvs-sys-shape-sm: var(--cnvs-base-size-50); /* Pill, Status Indicator, Checkbox */
497
+ --cnvs-sys-shape-sm: var(--cnvs-base-size-75); /* Compact components that leverage smaller typography, like Pills or Status Indicator */
498
+ --cnvs-sys-shape-xs: var(--cnvs-base-size-50); /* Pill, Status Indicator, Checkbox */
434
499
  --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
435
500
  --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
436
501
  --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
@@ -525,6 +590,7 @@
525
590
  font-weight: var(--cnvs-sys-font-weight-normal);
526
591
  line-height: var(--cnvs-sys-line-height-body-md);
527
592
  font-size: var(--cnvs-sys-font-size-body-md);
593
+ letter-spacing: var(--cnvs-sys-letter-spacing-body-md);
528
594
  }
529
595
 
530
596
  .cnvs-sys-type-body-lg {
@@ -532,6 +598,7 @@
532
598
  font-weight: var(--cnvs-sys-font-weight-normal);
533
599
  line-height: var(--cnvs-sys-line-height-body-lg);
534
600
  font-size: var(--cnvs-sys-font-size-body-lg);
601
+ letter-spacing: var(--cnvs-sys-letter-spacing-body-lg);
535
602
  }
536
603
 
537
604
  .cnvs-sys-type-heading-small {
@@ -560,6 +627,7 @@
560
627
  font-weight: var(--cnvs-sys-font-weight-bold);
561
628
  line-height: var(--cnvs-sys-line-height-heading-sm);
562
629
  font-size: var(--cnvs-sys-font-size-heading-sm);
630
+ letter-spacing: var(--cnvs-sys-letter-spacing-heading-sm);
563
631
  }
564
632
 
565
633
  .cnvs-sys-type-heading-md {
@@ -567,6 +635,7 @@
567
635
  font-weight: var(--cnvs-sys-font-weight-bold);
568
636
  line-height: var(--cnvs-sys-line-height-heading-md);
569
637
  font-size: var(--cnvs-sys-font-size-heading-md);
638
+ letter-spacing: var(--cnvs-sys-letter-spacing-heading-md);
570
639
  }
571
640
 
572
641
  .cnvs-sys-type-heading-lg {
@@ -574,6 +643,7 @@
574
643
  font-weight: var(--cnvs-sys-font-weight-bold);
575
644
  line-height: var(--cnvs-sys-line-height-heading-lg);
576
645
  font-size: var(--cnvs-sys-font-size-heading-lg);
646
+ letter-spacing: var(--cnvs-sys-letter-spacing-heading-lg);
577
647
  }
578
648
 
579
649
  .cnvs-sys-type-title-small {
@@ -602,6 +672,7 @@
602
672
  font-weight: var(--cnvs-sys-font-weight-bold);
603
673
  line-height: var(--cnvs-sys-line-height-title-sm);
604
674
  font-size: var(--cnvs-sys-font-size-title-sm);
675
+ letter-spacing: var(--cnvs-sys-letter-spacing-title-sm);
605
676
  }
606
677
 
607
678
  .cnvs-sys-type-title-md {
@@ -609,6 +680,7 @@
609
680
  font-weight: var(--cnvs-sys-font-weight-bold);
610
681
  line-height: var(--cnvs-sys-line-height-title-md);
611
682
  font-size: var(--cnvs-sys-font-size-title-md);
683
+ letter-spacing: var(--cnvs-sys-letter-spacing-title-md);
612
684
  }
613
685
 
614
686
  .cnvs-sys-type-title-lg {
@@ -616,4 +688,5 @@
616
688
  font-weight: var(--cnvs-sys-font-weight-bold);
617
689
  line-height: var(--cnvs-sys-line-height-title-lg);
618
690
  font-size: var(--cnvs-sys-font-size-title-lg);
691
+ letter-spacing: var(--cnvs-sys-letter-spacing-title-lg);
619
692
  }