@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/scss/system/_variables.scss CHANGED
@@ -1,25 +1,34 @@
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
+ $cnvs-sys-opacity-accent-pressed: 0.118; // State layer applied to accent colors while pressing
6
+ $cnvs-sys-opacity-accent-hover: 0.045; // State layer applied to accent colors on hover
5
7
  $cnvs-sys-opacity-full: 1; // Dev only
6
8
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
7
9
  $cnvs-sys-breakpoints-zero: 0; // Use to set a media query `min-width` below small.
8
- $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
9
- $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
10
- $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
11
- $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
12
- $cnvs-sys-letter-spacing-body-sm: $cnvs-base-letter-spacing-200;
13
- $cnvs-sys-letter-spacing-subtext-lg: $cnvs-base-letter-spacing-150;
14
- $cnvs-sys-letter-spacing-subtext-md: $cnvs-base-letter-spacing-100;
15
- $cnvs-sys-letter-spacing-subtext-sm: $cnvs-base-letter-spacing-50;
10
+ $cnvs-sys-font-weight-bold: 700;
11
+ $cnvs-sys-font-weight-medium: 500;
12
+ $cnvs-sys-font-weight-normal: 400;
13
+ $cnvs-sys-font-weight-light: 300;
14
+ $cnvs-sys-letter-spacing-title-lg: $cnvs-base-letter-spacing-12;
15
+ $cnvs-sys-letter-spacing-title-md: $cnvs-base-letter-spacing-11;
16
+ $cnvs-sys-letter-spacing-title-sm: $cnvs-base-letter-spacing-10;
17
+ $cnvs-sys-letter-spacing-heading-lg: $cnvs-base-letter-spacing-9;
18
+ $cnvs-sys-letter-spacing-heading-md: $cnvs-base-letter-spacing-8;
19
+ $cnvs-sys-letter-spacing-heading-sm: $cnvs-base-letter-spacing-7;
20
+ $cnvs-sys-letter-spacing-body-lg: $cnvs-base-letter-spacing-6;
21
+ $cnvs-sys-letter-spacing-body-md: $cnvs-base-letter-spacing-5;
22
+ $cnvs-sys-letter-spacing-body-sm: $cnvs-base-letter-spacing-4;
23
+ $cnvs-sys-letter-spacing-subtext-lg: $cnvs-base-letter-spacing-3;
24
+ $cnvs-sys-letter-spacing-subtext-md: $cnvs-base-letter-spacing-2;
25
+ $cnvs-sys-letter-spacing-subtext-sm: $cnvs-base-letter-spacing-1;
26
+ $cnvs-sys-font-family-fallback: $cnvs-base-font-family-0;
16
27
  $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
17
28
  $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
18
29
  $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
19
30
  $cnvs-sys-gap-none: $cnvs-base-size-0; // Use when there is no space between elements
20
31
  $cnvs-sys-padding-none: $cnvs-base-size-0; // Use when there should be no space between content and element's edges.
21
- $cnvs-sys-opacity-accent-pressed: $cnvs-base-opacity-360; // State layer applied to accent colors while pressing
22
- $cnvs-sys-opacity-accent-hover: $cnvs-base-opacity-180; // State layer applied to accent colors on hover
23
32
  $cnvs-sys-opacity-surface-pressed: $cnvs-base-opacity-180; // State layer applied to surface colors while pressing
24
33
  $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-80; // Alpha on second shadow
25
34
  $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-120; // Alpha on first shadow
@@ -33,25 +42,75 @@ $cnvs-sys-motion-easing-purposeful-standard: $cnvs-base-easing-b-100;
33
42
  $cnvs-sys-motion-easing-quick-deceleration: $cnvs-base-easing-a-300;
34
43
  $cnvs-sys-motion-easing-quick-acceleration: $cnvs-base-easing-a-200;
35
44
  $cnvs-sys-motion-easing-quick-standard: $cnvs-base-easing-a-100;
45
+ $cnvs-sys-color-chart-sequential-11: $cnvs-base-palette-teal-900;
46
+ $cnvs-sys-color-chart-sequential-10: $cnvs-base-palette-teal-800;
47
+ $cnvs-sys-color-chart-sequential-9: $cnvs-base-palette-teal-700;
48
+ $cnvs-sys-color-chart-sequential-8: $cnvs-base-palette-teal-600;
49
+ $cnvs-sys-color-chart-sequential-7: $cnvs-base-palette-teal-500;
50
+ $cnvs-sys-color-chart-sequential-6: $cnvs-base-palette-teal-400;
51
+ $cnvs-sys-color-chart-sequential-5: $cnvs-base-palette-teal-300;
52
+ $cnvs-sys-color-chart-sequential-4: $cnvs-base-palette-teal-200;
53
+ $cnvs-sys-color-chart-sequential-3: $cnvs-base-palette-teal-100;
54
+ $cnvs-sys-color-chart-sequential-2: $cnvs-base-palette-teal-50;
55
+ $cnvs-sys-color-chart-sequential-1: $cnvs-base-palette-teal-25;
56
+ $cnvs-sys-color-chart-categorical-14: $cnvs-base-palette-coral-600;
57
+ $cnvs-sys-color-chart-categorical-13: $cnvs-base-palette-purple-700;
58
+ $cnvs-sys-color-chart-categorical-12: $cnvs-base-palette-azure-700;
59
+ $cnvs-sys-color-chart-categorical-11: $cnvs-base-palette-orange-700;
60
+ $cnvs-sys-color-chart-categorical-10: $cnvs-base-palette-indigo-600;
61
+ $cnvs-sys-color-chart-categorical-9: $cnvs-base-palette-teal-700;
62
+ $cnvs-sys-color-chart-categorical-7: $cnvs-base-palette-purple-500;
63
+ $cnvs-sys-color-chart-categorical-5: $cnvs-base-palette-magenta-600;
64
+ $cnvs-sys-color-chart-categorical-4: $cnvs-base-palette-azure-500;
65
+ $cnvs-sys-color-chart-categorical-3: $cnvs-base-palette-orange-500;
66
+ $cnvs-sys-color-chart-categorical-2: $cnvs-base-palette-blue-800;
67
+ $cnvs-sys-color-chart-categorical-1: $cnvs-base-palette-teal-500;
68
+ $cnvs-sys-color-chart-diverging-azure-coral-23: $cnvs-base-palette-coral-900;
69
+ $cnvs-sys-color-chart-diverging-azure-coral-22: $cnvs-base-palette-coral-800;
70
+ $cnvs-sys-color-chart-diverging-azure-coral-21: $cnvs-base-palette-coral-700;
71
+ $cnvs-sys-color-chart-diverging-azure-coral-20: $cnvs-base-palette-coral-600;
72
+ $cnvs-sys-color-chart-diverging-azure-coral-19: $cnvs-base-palette-coral-500;
73
+ $cnvs-sys-color-chart-diverging-azure-coral-18: $cnvs-base-palette-coral-400;
74
+ $cnvs-sys-color-chart-diverging-azure-coral-17: $cnvs-base-palette-coral-300;
75
+ $cnvs-sys-color-chart-diverging-azure-coral-16: $cnvs-base-palette-coral-200;
76
+ $cnvs-sys-color-chart-diverging-azure-coral-15: $cnvs-base-palette-coral-100;
77
+ $cnvs-sys-color-chart-diverging-azure-coral-14: $cnvs-base-palette-coral-50;
78
+ $cnvs-sys-color-chart-diverging-azure-coral-13: $cnvs-base-palette-coral-25;
79
+ $cnvs-sys-color-chart-diverging-azure-coral-12: $cnvs-base-palette-neutral-0;
80
+ $cnvs-sys-color-chart-diverging-azure-coral-11: $cnvs-base-palette-azure-25;
81
+ $cnvs-sys-color-chart-diverging-azure-coral-10: $cnvs-base-palette-azure-50;
82
+ $cnvs-sys-color-chart-diverging-azure-coral-9: $cnvs-base-palette-azure-100;
83
+ $cnvs-sys-color-chart-diverging-azure-coral-8: $cnvs-base-palette-azure-200;
84
+ $cnvs-sys-color-chart-diverging-azure-coral-7: $cnvs-base-palette-azure-300;
85
+ $cnvs-sys-color-chart-diverging-azure-coral-6: $cnvs-base-palette-azure-400;
86
+ $cnvs-sys-color-chart-diverging-azure-coral-5: $cnvs-base-palette-azure-500;
87
+ $cnvs-sys-color-chart-diverging-azure-coral-4: $cnvs-base-palette-azure-600;
88
+ $cnvs-sys-color-chart-diverging-azure-coral-3: $cnvs-base-palette-azure-700;
89
+ $cnvs-sys-color-chart-diverging-azure-coral-2: $cnvs-base-palette-azure-800;
90
+ $cnvs-sys-color-chart-diverging-azure-coral-1: $cnvs-base-palette-azure-900;
36
91
  $cnvs-sys-color-focus-contrast: $cnvs-base-palette-neutral-a900; // High contrast focus ring for accessibility
37
92
  $cnvs-sys-color-focus-inverse: $cnvs-base-palette-neutral-0; // Focus ring for use on dark backgrounds
38
- $cnvs-sys-color-accent-overlay-mixin: $cnvs-base-palette-neutral-1000; // Pressed overlay mixin color for accent-colored elements
39
- $cnvs-sys-color-accent-overlay-pressed: $cnvs-base-palette-neutral-a400; // Pressed overlay for accent-colored elements
40
- $cnvs-sys-color-accent-overlay-hover: $cnvs-base-palette-neutral-a200; // Hover overlay for accent-colored elements
41
- $cnvs-sys-color-accent-muted-soft: $cnvs-base-palette-slate-400; // Softer muted accent for tertiary elements
42
- $cnvs-sys-color-accent-muted-default: $cnvs-base-palette-slate-600; // Muted accent for secondary visual elements
93
+ $cnvs-sys-color-brand-fg-link-hover: $cnvs-base-palette-blue-700; // Text color for hyperlinks on hover
94
+ $cnvs-sys-color-brand-fg-link-default: $cnvs-base-palette-blue-600; // Default text color for hyperlinks
95
+ $cnvs-sys-color-accent-overlay-mixin: $cnvs-base-palette-neutral-0; // Pressed overlay mixin color for accent-colored elements
96
+ $cnvs-sys-color-accent-overlay-pressed: $cnvs-base-palette-white-a100; // Pressed overlay for accent-colored elements
97
+ $cnvs-sys-color-accent-overlay-hover: $cnvs-base-palette-white-a50; // Hover overlay for accent-colored elements
98
+ $cnvs-sys-color-accent-muted-soft: $cnvs-base-palette-neutral-400; // Softer muted accent for tertiary elements
99
+ $cnvs-sys-color-accent-muted-default: $cnvs-base-palette-neutral-600; // Muted accent for secondary visual elements
43
100
  $cnvs-sys-color-accent-contrast: $cnvs-base-palette-neutral-a900; // High contrast accent for maximum visibility
44
101
  $cnvs-sys-color-accent-success: $cnvs-base-palette-green-600; // Solid success accent for positive indicators (not tenant themeable)
45
102
  $cnvs-sys-color-accent-warning: $cnvs-base-palette-amber-400; // Solid warning accent for caution indicators (not tenant themeable)
46
103
  $cnvs-sys-color-accent-danger: $cnvs-base-palette-red-600; // Solid danger accent for error indicators (not tenant themeable)
47
104
  $cnvs-sys-color-accent-info: $cnvs-base-palette-blue-600; // Solid info accent for indicators (not tenant themeable)
48
105
  $cnvs-sys-color-accent-ai: $cnvs-base-palette-blue-950; // Dark accent indicating AI-generated content
106
+ $cnvs-sys-color-surface-text-highlight: $cnvs-base-palette-indigo-a200;
107
+ $cnvs-sys-color-surface-overlay-raised: $cnvs-base-palette-white-a300; // Semi-transparent backdrop behind modals and dialogs
49
108
  $cnvs-sys-color-surface-overlay-scrim: $cnvs-base-palette-neutral-a400;
50
- $cnvs-sys-color-surface-overlay-pressed-inverse: $cnvs-base-palette-white-a300; // Pressed overlay for containers on dark backgrounds
51
- $cnvs-sys-color-surface-overlay-pressed-default: $cnvs-base-palette-slate-a100; // Pressed state overlay for interactive containers
52
- $cnvs-sys-color-surface-overlay-mixin: $cnvs-base-palette-slate-500; // Pressed state overlay for interactive containers
53
- $cnvs-sys-color-surface-overlay-hover-inverse: $cnvs-base-palette-white-a200; // Hover overlay for containers on dark backgrounds
54
- $cnvs-sys-color-surface-overlay-hover-default: $cnvs-base-palette-slate-a50; // Hover state overlay for interactive containers
109
+ $cnvs-sys-color-surface-overlay-pressed-inverse: $cnvs-base-palette-white-a200; // Pressed overlay for containers on dark backgrounds
110
+ $cnvs-sys-color-surface-overlay-pressed-default: $cnvs-base-palette-neutral-a100; // Pressed state overlay for interactive containers
111
+ $cnvs-sys-color-surface-overlay-mixin: $cnvs-base-palette-neutral-1000; // Pressed state overlay for interactive containers
112
+ $cnvs-sys-color-surface-overlay-hover-inverse: $cnvs-base-palette-white-a150; // Hover overlay for containers on dark backgrounds
113
+ $cnvs-sys-color-surface-overlay-hover-default: $cnvs-base-palette-neutral-a50; // Hover state overlay for interactive containers
55
114
  $cnvs-sys-color-surface-contrast-strong: $cnvs-base-palette-neutral-a950; // Stronger high contrast dark container background
56
115
  $cnvs-sys-color-surface-contrast-default: $cnvs-base-palette-neutral-a900; // High contrast dark container background
57
116
  $cnvs-sys-color-surface-inverse: $cnvs-base-palette-neutral-0; // Container background for use on dark backgrounds
@@ -67,13 +126,11 @@ $cnvs-sys-color-surface-danger-strong: $cnvs-base-palette-red-a50; // Stronger c
67
126
  $cnvs-sys-color-surface-danger-default: $cnvs-base-palette-red-a25; // Container background for error states (not tenant themeable)
68
127
  $cnvs-sys-color-surface-info-strong: $cnvs-base-palette-blue-a50; // Stronger container background for info badges and indicators
69
128
  $cnvs-sys-color-surface-info-default: $cnvs-base-palette-blue-a25; // Container background for informational callouts
70
- $cnvs-sys-color-surface-loading: $cnvs-base-palette-slate-a200; // Background for skeleton loaders and loading states
71
- $cnvs-sys-color-surface-alt-strong: $cnvs-base-palette-slate-a100; // Stronger de-emphasized container background
72
- $cnvs-sys-color-surface-alt-default: $cnvs-base-palette-slate-a50; // De-emphasized container background for secondary information
73
- $cnvs-sys-color-surface-raised: $cnvs-base-palette-slate-a25; // Separates a layer from the surface, e.g. table headers or sticky elements
129
+ $cnvs-sys-color-surface-alt-strong: $cnvs-base-palette-neutral-a100; // Stronger de-emphasized container background
130
+ $cnvs-sys-color-surface-alt-default: $cnvs-base-palette-neutral-a50; // De-emphasized container background for secondary information
74
131
  $cnvs-sys-color-surface-modal: $cnvs-base-palette-neutral-0; // Background for modal dialog containers
75
132
  $cnvs-sys-color-surface-popover: $cnvs-base-palette-neutral-0; // Background for floating containers like dropdowns and tooltips
76
- $cnvs-sys-color-surface-navigation: $cnvs-base-palette-slate-50; // Background for navigation containers like sidebars and top bars
133
+ $cnvs-sys-color-surface-navigation: $cnvs-base-palette-neutral-50; // Background for navigation containers like sidebars and top bars
77
134
  $cnvs-sys-color-surface-default: $cnvs-base-palette-neutral-0; // Default background for containers on top of the page
78
135
  $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
79
136
  $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
@@ -121,11 +178,11 @@ $cnvs-sys-color-shadow-base: $cnvs-base-palette-slate-a200; // Primary shadow co
121
178
  $cnvs-sys-color-border-transparent: $cnvs-base-palette-neutral-a0; // Invisible border for layout spacing
122
179
  $cnvs-sys-color-border-inverse-strong: $cnvs-base-palette-white-a700; // Stronger border for use on dark backgrounds
123
180
  $cnvs-sys-color-border-inverse-default: $cnvs-base-palette-neutral-0; // Border for use on dark backgrounds
124
- $cnvs-sys-color-border-warning: $cnvs-base-palette-amber-400; // Border for warning states (not tenant themeable)
181
+ $cnvs-sys-color-border-warning: $cnvs-base-palette-amber-500; // Border for warning states (not tenant themeable)
125
182
  $cnvs-sys-color-border-danger: $cnvs-base-palette-red-500; // Border for error states (not tenant themeable)
126
183
  $cnvs-sys-color-border-info-default: $cnvs-base-palette-blue-500; // Border for informational containers (not tenant themeable)
127
- $cnvs-sys-color-border-strong: $cnvs-base-palette-slate-a300; // Stronger border for more visible separation
128
- $cnvs-sys-color-border-default: $cnvs-base-palette-slate-a200; // Default border for containers and dividers
184
+ $cnvs-sys-color-border-strong: $cnvs-base-palette-neutral-a200; // Stronger border for more visible separation
185
+ $cnvs-sys-color-border-default: $cnvs-base-palette-neutral-a100; // Default border for containers and dividers
129
186
  $cnvs-sys-color-border-container: $cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
130
187
  $cnvs-sys-color-border-primary-default: $cnvs-base-palette-blue-500; // Brand, Focus
131
188
  $cnvs-sys-color-border-divider: $cnvs-base-palette-slate-200; // Dividers
@@ -134,12 +191,12 @@ $cnvs-sys-color-border-caution-default: $cnvs-base-palette-amber-400; // Warning
134
191
  $cnvs-sys-color-border-critical-default: $cnvs-base-palette-red-500; // Error
135
192
  $cnvs-sys-color-border-contrast-default: $cnvs-base-palette-neutral-a900; // High contrast border for maximum visibility
136
193
  $cnvs-sys-color-border-contrast-strong: $cnvs-base-palette-neutral-950; // Secondary Button Hover
137
- $cnvs-sys-color-border-input-hover: $cnvs-base-palette-slate-a700; // Hover state border for form inputs
138
- $cnvs-sys-color-border-input-default: $cnvs-base-palette-slate-a500; // Default border for form inputs
194
+ $cnvs-sys-color-border-input-hover: $cnvs-base-palette-neutral-a700; // Hover state border for form inputs
195
+ $cnvs-sys-color-border-input-default: $cnvs-base-palette-neutral-a500; // Default border for form inputs
139
196
  $cnvs-sys-color-border-input-inverse: $cnvs-base-palette-neutral-0; // Borders on checkboxes and radios
140
197
  $cnvs-sys-color-border-input-strong: $cnvs-base-palette-slate-700; // Input hover
141
198
  $cnvs-sys-color-border-input-disabled: $cnvs-base-palette-slate-400; // Disabled inputs
142
- $cnvs-sys-color-border-ai: $cnvs-base-palette-blue-950; // Active state on AI borders
199
+ $cnvs-sys-color-border-ai: $cnvs-base-palette-blue-950; // Border color for AI-focused input elements
143
200
  $cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-a950; // Stronger high contrast text
144
201
  $cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-a900; // High contrast text for maximum readability
145
202
  $cnvs-sys-color-fg-ai: $cnvs-base-palette-blue-950; // Text and icons indicating AI-generated content
@@ -150,7 +207,7 @@ $cnvs-sys-color-fg-warning-default: $cnvs-base-palette-amber-600; // Warning tex
150
207
  $cnvs-sys-color-fg-danger-strong: $cnvs-base-palette-red-700; // Stronger error text and icons
151
208
  $cnvs-sys-color-fg-danger-default: $cnvs-base-palette-red-600; // Error text and icons (not tenant themeable)
152
209
  $cnvs-sys-color-fg-inverse: $cnvs-base-palette-neutral-0; // Text and icons for use on dark backgrounds
153
- $cnvs-sys-color-fg-disabled: $cnvs-base-palette-slate-a400; // Disabled state text and icons
210
+ $cnvs-sys-color-fg-disabled: $cnvs-base-palette-neutral-a400; // Disabled state text and icons
154
211
  $cnvs-sys-color-fg-stronger: $cnvs-base-palette-neutral-a950; // Strongest text for titles
155
212
  $cnvs-sys-color-fg-strong: $cnvs-base-palette-neutral-a900; // Stronger text for headings and labels
156
213
  $cnvs-sys-color-fg-default: $cnvs-base-palette-neutral-a800; // Default body text and icons
@@ -278,7 +335,7 @@ $cnvs-sys-color-bg-muted-strong: $cnvs-base-palette-slate-700;
278
335
  $cnvs-sys-color-bg-muted-default: $cnvs-base-palette-slate-600;
279
336
  $cnvs-sys-color-bg-muted-soft: $cnvs-base-palette-slate-500;
280
337
  $cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-slate-400;
281
- $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-50; // Alternative page background for visual separation between page sections
338
+ $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-neutral-50; // Alternative page background for visual separation between page sections
282
339
  $cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-slate-300; // Active state for segmented control, Pill
283
340
  $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
284
341
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
@@ -310,9 +367,9 @@ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
310
367
  $cnvs-sys-space-x20: calc($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
311
368
  $cnvs-sys-space-x16: calc($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
312
369
  $cnvs-sys-space-x14: calc($cnvs-base-unit * 14); // Mobile only
313
- $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
314
- $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
315
- $cnvs-sys-space-x6: calc($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
370
+ $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // - Used for outer margins on the overall page content ; - Used for inner margins on large items such as page sections
371
+ $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // - Standard spacing between cards; - Used to separate groups of content ; - Separate section headings or titles from body text or inputs
372
+ $cnvs-sys-space-x6: calc($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
316
373
  $cnvs-sys-space-x5: calc($cnvs-base-unit * 5); // Mobile only
317
374
  $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
318
375
  $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
@@ -331,24 +388,28 @@ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
331
388
  $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
332
389
  $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
333
390
  $cnvs-sys-opacity-surface-hover: $cnvs-base-opacity-100; // State layer applied to surface colors on hover
391
+ $cnvs-sys-color-chart-categorical-16: $cnvs-brand-caution-700;
392
+ $cnvs-sys-color-chart-categorical-15: $cnvs-brand-positive-800;
393
+ $cnvs-sys-color-chart-categorical-8: $cnvs-brand-caution-500;
394
+ $cnvs-sys-color-chart-categorical-6: $cnvs-brand-positive-600;
334
395
  $cnvs-sys-color-brand-border-caution: $cnvs-brand-caution-500; // Tenant-themeable caution border for warning states
335
396
  $cnvs-sys-color-brand-border-critical: $cnvs-brand-critical-500; // Tenant-themeable critical border for error states
336
397
  $cnvs-sys-color-brand-border-primary: $cnvs-brand-primary-500; // Tenant-themeable primary border for focused inputs
337
- $cnvs-sys-color-brand-fg-selected: $cnvs-brand-primary-700; // Tenant-themeable text color for selected items
398
+ $cnvs-sys-color-brand-fg-selected: $cnvs-brand-neutral-a900; // Tenant-themeable text color for selected items
338
399
  $cnvs-sys-color-brand-fg-positive-strong: $cnvs-brand-positive-700; // Stronger tenant-themeable positive text and icon color
339
400
  $cnvs-sys-color-brand-fg-positive-default: $cnvs-brand-positive-600; // Tenant-themeable positive text and icon color
340
401
  $cnvs-sys-color-brand-fg-caution-strong: $cnvs-brand-caution-700; // Stronger tenant-themeable caution text and icon color
341
402
  $cnvs-sys-color-brand-fg-caution-default: $cnvs-brand-caution-600; // Tenant-themeable caution text and icon color
342
403
  $cnvs-sys-color-brand-fg-critical-strong: $cnvs-brand-critical-700; // Stronger tenant-themeable critical text and icon color
343
404
  $cnvs-sys-color-brand-fg-critical-default: $cnvs-brand-critical-600; // Tenant-themeable critical text and icon color
344
- $cnvs-sys-color-brand-fg-primary-strong: $cnvs-brand-primary-700; // Stronger tenant-themeable primary text and icon color
345
- $cnvs-sys-color-brand-fg-primary-default: $cnvs-brand-primary-600; // Tenant-themeable primary text and icon color
346
- $cnvs-sys-color-brand-accent-action: $cnvs-brand-primary-600;
405
+ $cnvs-sys-color-brand-fg-primary-strong: $cnvs-brand-neutral-a950; // Stronger tenant-themeable primary text and icon color
406
+ $cnvs-sys-color-brand-fg-primary-default: $cnvs-brand-neutral-a900; // Tenant-themeable primary text and icon color
407
+ $cnvs-sys-color-brand-accent-action: $cnvs-brand-neutral-975;
347
408
  $cnvs-sys-color-brand-accent-positive: $cnvs-brand-positive-600; // Tenant-themeable solid positive accent
348
409
  $cnvs-sys-color-brand-accent-caution: $cnvs-brand-caution-400; // Tenant-themeable solid caution accent
349
410
  $cnvs-sys-color-brand-accent-critical: $cnvs-brand-critical-600; // Tenant-themeable solid critical accent for destructive actions
350
- $cnvs-sys-color-brand-accent-primary: $cnvs-brand-primary-600; // Tenant-themeable solid primary accent for buttons and key actions
351
- $cnvs-sys-color-brand-surface-selected: $cnvs-brand-primary-a50; // Tenant-themeable background for selected items
411
+ $cnvs-sys-color-brand-accent-primary: $cnvs-brand-neutral-975; // Tenant-themeable solid primary accent for buttons and key actions
412
+ $cnvs-sys-color-brand-surface-selected: $cnvs-brand-neutral-a100; // Tenant-themeable background for selected items
352
413
  $cnvs-sys-color-brand-surface-positive-strong: $cnvs-brand-positive-a50; // Stronger tenant-themeable positive container background
353
414
  $cnvs-sys-color-brand-surface-positive-default: $cnvs-brand-positive-a25; // Tenant-themeable positive/success container background
354
415
  $cnvs-sys-color-brand-surface-caution-strong: $cnvs-brand-caution-a50; // Stronger tenant-themeable caution container background
@@ -361,11 +422,14 @@ $cnvs-sys-color-brand-focus-caution-inner: $cnvs-brand-caution-400; // Tenant-th
361
422
  $cnvs-sys-color-brand-focus-caution-outer: $cnvs-brand-caution-500; // Tenant-themeable outer focus ring for caution-state elements
362
423
  $cnvs-sys-color-brand-focus-critical: $cnvs-brand-critical-500; // Tenant-themeable focus ring for error-state elements
363
424
  $cnvs-sys-color-brand-focus-primary: $cnvs-brand-primary-500; // Tenant-themeable focus ring for interactive elements
425
+ $cnvs-sys-color-surface-loading: $cnvs-brand-neutral-a50; // Background for skeleton loaders and loading states
426
+ $cnvs-sys-color-surface-raised: $cnvs-brand-neutral-a25; // Separates a layer from the surface, e.g. table headers or sticky elements
364
427
  $cnvs-sys-color-shadow-default: $cnvs-sys-color-shadow-base; // Main shadow color
365
428
  $cnvs-sys-color-shadow-2: $cnvs-sys-color-shadow-ambient; // Second shadow color
366
429
  $cnvs-sys-color-shadow-1: $cnvs-sys-color-shadow-base; // First shadow color
367
430
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
368
431
  $cnvs-sys-shape-zero: $cnvs-sys-shape-none; // Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
432
+ $cnvs-sys-breakpoints-xxl: 2180px; // Figma only. Use as the max-width on xl media query.
369
433
  $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
370
434
  $cnvs-sys-breakpoints-lg: 1024px; // Large screens, such as desktops.
371
435
  $cnvs-sys-breakpoints-md: 768px; // Medium screens, such as laptops.
@@ -398,7 +462,7 @@ $cnvs-sys-line-height-heading-lg: $cnvs-base-size-500;
398
462
  $cnvs-sys-line-height-heading-md: $cnvs-base-size-450;
399
463
  $cnvs-sys-line-height-heading-sm: $cnvs-base-size-400;
400
464
  $cnvs-sys-line-height-body-lg: $cnvs-base-size-350;
401
- $cnvs-sys-line-height-body-md: $cnvs-base-size-350;
465
+ $cnvs-sys-line-height-body-md: $cnvs-base-size-300;
402
466
  $cnvs-sys-line-height-body-sm: $cnvs-base-size-300;
403
467
  $cnvs-sys-line-height-subtext-lg: $cnvs-base-size-250;
404
468
  $cnvs-sys-line-height-subtext-md: $cnvs-base-size-200;
@@ -417,12 +481,13 @@ $cnvs-sys-font-size-subtext-md: $cnvs-base-size-150;
417
481
  $cnvs-sys-font-size-subtext-sm: $cnvs-base-size-125;
418
482
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
419
483
  $cnvs-sys-shape-full: calc($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)
420
- $cnvs-sys-shape-xxxl: $cnvs-base-size-400; // Maximum rounding for modals and large containers
421
- $cnvs-sys-shape-xxl: $cnvs-base-size-300; // Extra extra large rounding for cards and items
484
+ $cnvs-sys-shape-xxxl: $cnvs-base-size-350; // Large elevated surfaces, like Modals
485
+ $cnvs-sys-shape-xxl: $cnvs-base-size-250; // Flat or raised surfaces, like Cards or Menu
422
486
  $cnvs-sys-shape-xl: $cnvs-base-size-200; // Extra large rounding for prominent containers
423
487
  $cnvs-sys-shape-lg: $cnvs-base-size-150; // Rich text editor
424
488
  $cnvs-sys-shape-md: $cnvs-base-size-100; // Inputs, Toast, Tooltip, Snackbar
425
- $cnvs-sys-shape-sm: $cnvs-base-size-50; // Pill, Status Indicator, Checkbox
489
+ $cnvs-sys-shape-sm: $cnvs-base-size-75; // Compact components that leverage smaller typography, like Pills or Status Indicator
490
+ $cnvs-sys-shape-xs: $cnvs-base-size-50; // Pill, Status Indicator, Checkbox
426
491
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
427
492
  $cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
428
493
  $cnvs-sys-font-size-body-large: $cnvs-base-font-size-150;
@@ -432,12 +497,12 @@ $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
432
497
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
433
498
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
434
499
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
435
- $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
436
- $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
437
- $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
438
- $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
439
- $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)
440
- $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)
500
+ $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
501
+ $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
502
+ $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
503
+ $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
504
+ $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)
505
+ $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)
441
506
 
442
507
  .cnvs-sys-type-subtext-small {
443
508
  font-family: $cnvs-sys-font-family-default;
@@ -522,6 +587,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
522
587
  font-weight: $cnvs-sys-font-weight-normal;
523
588
  line-height: $cnvs-sys-line-height-body-md;
524
589
  font-size: $cnvs-sys-font-size-body-md;
590
+ letter-spacing: $cnvs-sys-letter-spacing-body-md;
525
591
  }
526
592
 
527
593
  .cnvs-sys-type-body-lg {
@@ -529,6 +595,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
529
595
  font-weight: $cnvs-sys-font-weight-normal;
530
596
  line-height: $cnvs-sys-line-height-body-lg;
531
597
  font-size: $cnvs-sys-font-size-body-lg;
598
+ letter-spacing: $cnvs-sys-letter-spacing-body-lg;
532
599
  }
533
600
 
534
601
  .cnvs-sys-type-heading-small {
@@ -557,6 +624,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
557
624
  font-weight: $cnvs-sys-font-weight-bold;
558
625
  line-height: $cnvs-sys-line-height-heading-sm;
559
626
  font-size: $cnvs-sys-font-size-heading-sm;
627
+ letter-spacing: $cnvs-sys-letter-spacing-heading-sm;
560
628
  }
561
629
 
562
630
  .cnvs-sys-type-heading-md {
@@ -564,6 +632,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
564
632
  font-weight: $cnvs-sys-font-weight-bold;
565
633
  line-height: $cnvs-sys-line-height-heading-md;
566
634
  font-size: $cnvs-sys-font-size-heading-md;
635
+ letter-spacing: $cnvs-sys-letter-spacing-heading-md;
567
636
  }
568
637
 
569
638
  .cnvs-sys-type-heading-lg {
@@ -571,6 +640,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
571
640
  font-weight: $cnvs-sys-font-weight-bold;
572
641
  line-height: $cnvs-sys-line-height-heading-lg;
573
642
  font-size: $cnvs-sys-font-size-heading-lg;
643
+ letter-spacing: $cnvs-sys-letter-spacing-heading-lg;
574
644
  }
575
645
 
576
646
  .cnvs-sys-type-title-small {
@@ -599,6 +669,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
599
669
  font-weight: $cnvs-sys-font-weight-bold;
600
670
  line-height: $cnvs-sys-line-height-title-sm;
601
671
  font-size: $cnvs-sys-font-size-title-sm;
672
+ letter-spacing: $cnvs-sys-letter-spacing-title-sm;
602
673
  }
603
674
 
604
675
  .cnvs-sys-type-title-md {
@@ -606,6 +677,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
606
677
  font-weight: $cnvs-sys-font-weight-bold;
607
678
  line-height: $cnvs-sys-line-height-title-md;
608
679
  font-size: $cnvs-sys-font-size-title-md;
680
+ letter-spacing: $cnvs-sys-letter-spacing-title-md;
609
681
  }
610
682
 
611
683
  .cnvs-sys-type-title-lg {
@@ -613,4 +685,5 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
613
685
  font-weight: $cnvs-sys-font-weight-bold;
614
686
  line-height: $cnvs-sys-line-height-title-lg;
615
687
  font-size: $cnvs-sys-font-size-title-lg;
688
+ letter-spacing: $cnvs-sys-letter-spacing-title-lg;
616
689
  }