@workday/canvas-tokens-web 4.1.1 → 4.1.3

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 (29) hide show
  1. package/css/base/_variables.css +1 -1
  2. package/css/brand/_variables.css +41 -41
  3. package/css/system/_variables.css +231 -231
  4. package/dist/common-js/base/index.d.ts +1 -1
  5. package/dist/common-js/base/index.js +1 -1
  6. package/dist/common-js/brand/index.d.ts +41 -41
  7. package/dist/common-js/brand/index.js +1 -1
  8. package/dist/common-js/index.d.ts +1 -1
  9. package/dist/common-js/index.js +1 -1
  10. package/dist/common-js/system/index.d.ts +346 -192
  11. package/dist/common-js/system/index.js +1 -1
  12. package/dist/es6/base/index.d.ts +1 -1
  13. package/dist/es6/base/index.js +1 -1
  14. package/dist/es6/brand/index.d.ts +41 -41
  15. package/dist/es6/brand/index.js +1 -1
  16. package/dist/es6/index.d.ts +1 -1
  17. package/dist/es6/index.js +1 -1
  18. package/dist/es6/system/index.d.ts +346 -192
  19. package/dist/es6/system/index.js +1 -1
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +41 -41
  22. package/less/system/_variables.less +231 -231
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +1 -1
  25. package/scss/base/_variables.scss +1 -1
  26. package/scss/brand/_variables.sass +41 -41
  27. package/scss/brand/_variables.scss +41 -41
  28. package/scss/system/_variables.sass +231 -231
  29. package/scss/system/_variables.scss +231 -231
package/less/system/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 19:58:48 GMT
3
+ // Generated on Wed, 25 Feb 2026 21:44:04 GMT
4
4
 
5
5
  @cnvs-sys-opacity-full: 1; // Dev only
6
6
  @cnvs-sys-space-zero: 0; // Stacks, rows in tables
@@ -18,9 +18,9 @@
18
18
  @cnvs-sys-font-family-default: @cnvs-base-font-family-50;
19
19
  @cnvs-sys-gap-none: @cnvs-base-size-0; // Use when there is no space between elements
20
20
  @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; // Accent pressed opacity use with accent colors
22
- @cnvs-sys-opacity-accent-hover: @cnvs-base-opacity-180; // Accent hover opacity use with accent colors
23
- @cnvs-sys-opacity-surface-pressed: @cnvs-base-opacity-180; // Surface pressed opacity use with surface colors
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
+ @cnvs-sys-opacity-surface-pressed: @cnvs-base-opacity-180; // State layer applied to surface colors while pressing
24
24
  @cnvs-sys-opacity-shadow-second: @cnvs-base-opacity-80; // Alpha on second shadow
25
25
  @cnvs-sys-opacity-shadow-first: @cnvs-base-opacity-120; // Alpha on first shadow
26
26
  @cnvs-sys-opacity-contrast: @cnvs-base-opacity-840; // Tooltips, Status Indicator
@@ -33,49 +33,55 @@
33
33
  @cnvs-sys-motion-easing-quick-deceleration: @cnvs-base-easing-a-300;
34
34
  @cnvs-sys-motion-easing-quick-acceleration: @cnvs-base-easing-a-200;
35
35
  @cnvs-sys-motion-easing-quick-standard: @cnvs-base-easing-a-100;
36
- @cnvs-sys-color-focus-contrast: @cnvs-base-palette-neutral-a900;
37
- @cnvs-sys-color-focus-inverse: @cnvs-base-palette-neutral-0;
38
- @cnvs-sys-color-accent-overlay-mixin: @cnvs-base-palette-neutral-1000;
39
- @cnvs-sys-color-accent-overlay-pressed: @cnvs-base-palette-neutral-a400;
40
- @cnvs-sys-color-accent-overlay-hover: @cnvs-base-palette-neutral-a200;
41
- @cnvs-sys-color-accent-muted-soft: @cnvs-base-palette-slate-400;
42
- @cnvs-sys-color-accent-muted-default: @cnvs-base-palette-slate-600;
43
- @cnvs-sys-color-accent-contrast: @cnvs-base-palette-neutral-a900;
44
- @cnvs-sys-color-accent-success: @cnvs-base-palette-green-600;
45
- @cnvs-sys-color-accent-warning: @cnvs-base-palette-amber-400;
46
- @cnvs-sys-color-accent-danger: @cnvs-base-palette-red-600;
47
- @cnvs-sys-color-accent-info: @cnvs-base-palette-blue-600;
48
- @cnvs-sys-color-accent-ai: @cnvs-base-palette-blue-950;
36
+ @cnvs-sys-color-focus-contrast: @cnvs-base-palette-neutral-a900; // High contrast focus ring for accessibility
37
+ @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
43
+ @cnvs-sys-color-accent-contrast: @cnvs-base-palette-neutral-a900; // High contrast accent for maximum visibility
44
+ @cnvs-sys-color-accent-success: @cnvs-base-palette-green-600; // Solid success accent for positive indicators (not tenant themeable)
45
+ @cnvs-sys-color-accent-warning: @cnvs-base-palette-amber-400; // Solid warning accent for caution indicators (not tenant themeable)
46
+ @cnvs-sys-color-accent-danger: @cnvs-base-palette-red-600; // Solid danger accent for error indicators (not tenant themeable)
47
+ @cnvs-sys-color-accent-info: @cnvs-base-palette-blue-600; // Solid info accent for indicators (not tenant themeable)
48
+ @cnvs-sys-color-accent-ai: @cnvs-base-palette-blue-950; // Dark accent indicating AI-generated content
49
49
  @cnvs-sys-color-surface-overlay-scrim: @cnvs-base-palette-neutral-a400;
50
- @cnvs-sys-color-surface-overlay-pressed-inverse: @cnvs-base-palette-white-a300;
51
- @cnvs-sys-color-surface-overlay-pressed-default: @cnvs-base-palette-slate-a100;
52
- @cnvs-sys-color-surface-overlay-mixin: @cnvs-base-palette-slate-500;
53
- @cnvs-sys-color-surface-overlay-hover-inverse: @cnvs-base-palette-white-a200;
54
- @cnvs-sys-color-surface-overlay-hover-default: @cnvs-base-palette-slate-a50;
55
- @cnvs-sys-color-surface-contrast-strong: @cnvs-base-palette-neutral-a950;
56
- @cnvs-sys-color-surface-contrast-default: @cnvs-base-palette-neutral-a900;
57
- @cnvs-sys-color-surface-inverse: @cnvs-base-palette-neutral-0;
58
- @cnvs-sys-color-surface-transparent: @cnvs-base-palette-neutral-a0;
59
- @cnvs-sys-color-surface-ai-pressed: @cnvs-base-palette-blue-400;
60
- @cnvs-sys-color-surface-ai-hover: @cnvs-base-palette-blue-a200;
61
- @cnvs-sys-color-surface-ai-default: @cnvs-base-palette-blue-a100;
62
- @cnvs-sys-color-surface-success-strong: @cnvs-base-palette-green-a50;
63
- @cnvs-sys-color-surface-success-default: @cnvs-base-palette-green-a25;
64
- @cnvs-sys-color-surface-warning-strong: @cnvs-base-palette-amber-a50;
65
- @cnvs-sys-color-surface-warning-default: @cnvs-base-palette-amber-a25;
66
- @cnvs-sys-color-surface-danger-strong: @cnvs-base-palette-red-a50;
67
- @cnvs-sys-color-surface-danger-default: @cnvs-base-palette-red-a25;
68
- @cnvs-sys-color-surface-info-strong: @cnvs-base-palette-blue-a50; // Surface color used on the backgrounds of informational status indicators and badges
69
- @cnvs-sys-color-surface-info-default: @cnvs-base-palette-blue-a25; // Surface color used on the backgrounds of informational highlights and sections
70
- @cnvs-sys-color-surface-loading: @cnvs-base-palette-slate-a200;
71
- @cnvs-sys-color-surface-alt-strong: @cnvs-base-palette-slate-a100; // Strong alternative surface color
72
- @cnvs-sys-color-surface-alt-default: @cnvs-base-palette-slate-a50; // Alternative surface color
73
- @cnvs-sys-color-surface-raised: @cnvs-base-palette-slate-a25; // Surfaces that are raised above another surface, such as column headers in Tables
74
- @cnvs-sys-color-surface-modal: @cnvs-base-palette-neutral-0;
75
- @cnvs-sys-color-surface-popover: @cnvs-base-palette-neutral-0;
76
- @cnvs-sys-color-surface-navigation: @cnvs-base-palette-slate-50; // Surface color for navigation elements, like the SidePanel or Top Nav Bar
77
- @cnvs-sys-color-surface-default: @cnvs-base-palette-neutral-0; // Default surface background
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
55
+ @cnvs-sys-color-surface-contrast-strong: @cnvs-base-palette-neutral-a950; // Stronger high contrast dark container background
56
+ @cnvs-sys-color-surface-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast dark container background
57
+ @cnvs-sys-color-surface-inverse: @cnvs-base-palette-neutral-0; // Container background for use on dark backgrounds
58
+ @cnvs-sys-color-surface-transparent: @cnvs-base-palette-neutral-a0; // Fully transparent container background
59
+ @cnvs-sys-color-surface-ai-pressed: @cnvs-base-palette-blue-400; // Pressed state for AI-generated content containers
60
+ @cnvs-sys-color-surface-ai-hover: @cnvs-base-palette-blue-a200; // Hover state for AI-generated content containers
61
+ @cnvs-sys-color-surface-ai-default: @cnvs-base-palette-blue-a100; // Container background indicating AI-generated content
62
+ @cnvs-sys-color-surface-success-strong: @cnvs-base-palette-green-a50; // Stronger container background for success states
63
+ @cnvs-sys-color-surface-success-default: @cnvs-base-palette-green-a25; // Container background for success states (not tenant themeable)
64
+ @cnvs-sys-color-surface-warning-strong: @cnvs-base-palette-amber-a50; // Stronger container background for warning states
65
+ @cnvs-sys-color-surface-warning-default: @cnvs-base-palette-amber-a25; // Container background for warning states (not tenant themeable)
66
+ @cnvs-sys-color-surface-danger-strong: @cnvs-base-palette-red-a50; // Stronger container background for error states
67
+ @cnvs-sys-color-surface-danger-default: @cnvs-base-palette-red-a25; // Container background for error states (not tenant themeable)
68
+ @cnvs-sys-color-surface-info-strong: @cnvs-base-palette-blue-a50; // Stronger container background for info badges and indicators
69
+ @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
74
+ @cnvs-sys-color-surface-modal: @cnvs-base-palette-neutral-0; // Background for modal dialog containers
75
+ @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
77
+ @cnvs-sys-color-surface-default: @cnvs-base-palette-neutral-0; // Default background for containers on top of the page
78
+ @cnvs-sys-color-static-amber-soft: @cnvs-base-palette-amber-100; // Soft amber
79
+ @cnvs-sys-color-static-amber-strongest: @cnvs-base-palette-amber-950; // Stronger amber
78
80
  @cnvs-sys-color-static-amber-softer: @cnvs-base-palette-amber-50; // Soft amber
81
+ @cnvs-sys-color-static-amber-stronger: @cnvs-base-palette-amber-600; // Stronger amber
82
+ @cnvs-sys-color-static-amber-strong: @cnvs-base-palette-amber-500; // Stronger amber
83
+ @cnvs-sys-color-static-amber-softest: @cnvs-base-palette-amber-25; // Soft amber
84
+ @cnvs-sys-color-static-amber-default: @cnvs-base-palette-amber-400; // amber
79
85
  @cnvs-sys-color-static-gray-softer: @cnvs-base-palette-slate-100; // Light gray
80
86
  @cnvs-sys-color-static-gray-softest: @cnvs-base-palette-slate-50; // Light gray
81
87
  @cnvs-sys-color-static-gray-strongest: @cnvs-base-palette-slate-950; // Stronger gray
@@ -105,91 +111,189 @@
105
111
  @cnvs-sys-color-static-blue-stronger: @cnvs-base-palette-blue-800; // Stronger blue
106
112
  @cnvs-sys-color-static-blue-strong: @cnvs-base-palette-blue-700; // Stronger blue
107
113
  @cnvs-sys-color-static-blue-softest: @cnvs-base-palette-blue-25; // Light blue
114
+ @cnvs-sys-color-static-blue-default: @cnvs-base-palette-blue-600; // Blue
108
115
  @cnvs-sys-color-static-orange-strong: @cnvs-base-palette-amber-500;
109
116
  @cnvs-sys-color-static-orange-soft: @cnvs-base-palette-amber-100;
110
117
  @cnvs-sys-color-static-orange-default: @cnvs-base-palette-amber-400;
111
118
  @cnvs-sys-color-static-gold-stronger: @cnvs-base-palette-amber-600;
112
- @cnvs-sys-color-shadow-ambient: @cnvs-base-palette-slate-a100;
113
- @cnvs-sys-color-shadow-base: @cnvs-base-palette-slate-a200;
114
- @cnvs-sys-color-border-transparent: @cnvs-base-palette-neutral-a0;
115
- @cnvs-sys-color-border-inverse-strong: @cnvs-base-palette-white-a700;
116
- @cnvs-sys-color-border-inverse-default: @cnvs-base-palette-neutral-0;
117
- @cnvs-sys-color-border-warning: @cnvs-base-palette-amber-400;
118
- @cnvs-sys-color-border-danger: @cnvs-base-palette-red-500;
119
- @cnvs-sys-color-border-info-default: @cnvs-base-palette-blue-500;
120
- @cnvs-sys-color-border-strong: @cnvs-base-palette-slate-a300;
121
- @cnvs-sys-color-border-default: @cnvs-base-palette-slate-a200;
122
- @cnvs-sys-color-border-contrast-default: @cnvs-base-palette-neutral-a900;
123
- @cnvs-sys-color-border-input-hover: @cnvs-base-palette-slate-a700; // Input hover
124
- @cnvs-sys-color-border-input-default: @cnvs-base-palette-slate-a500; // Inputs
119
+ @cnvs-sys-color-shadow-ambient: @cnvs-base-palette-slate-a100; // Subtle ambient shadow for soft depth
120
+ @cnvs-sys-color-shadow-base: @cnvs-base-palette-slate-a200; // Primary shadow color for elevated elements
121
+ @cnvs-sys-color-border-transparent: @cnvs-base-palette-neutral-a0; // Invisible border for layout spacing
122
+ @cnvs-sys-color-border-inverse-strong: @cnvs-base-palette-white-a700; // Stronger border for use on dark backgrounds
123
+ @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)
125
+ @cnvs-sys-color-border-danger: @cnvs-base-palette-red-500; // Border for error states (not tenant themeable)
126
+ @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
129
+ @cnvs-sys-color-border-container: @cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
130
+ @cnvs-sys-color-border-primary-default: @cnvs-base-palette-blue-500; // Brand, Focus
131
+ @cnvs-sys-color-border-divider: @cnvs-base-palette-slate-200; // Dividers
132
+ @cnvs-sys-color-border-caution-strong: @cnvs-base-palette-amber-500; // Warning outer (box shadow)
133
+ @cnvs-sys-color-border-caution-default: @cnvs-base-palette-amber-400; // Warning inner
134
+ @cnvs-sys-color-border-critical-default: @cnvs-base-palette-red-500; // Error
135
+ @cnvs-sys-color-border-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast border for maximum visibility
136
+ @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
139
+ @cnvs-sys-color-border-input-inverse: @cnvs-base-palette-neutral-0; // Borders on checkboxes and radios
140
+ @cnvs-sys-color-border-input-strong: @cnvs-base-palette-slate-700; // Input hover
125
141
  @cnvs-sys-color-border-input-disabled: @cnvs-base-palette-slate-400; // Disabled inputs
126
142
  @cnvs-sys-color-border-ai: @cnvs-base-palette-blue-950; // Active state on AI borders
127
- @cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-a950;
128
- @cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-a900;
129
- @cnvs-sys-color-fg-ai: @cnvs-base-palette-blue-950; // AI icons and text
130
- @cnvs-sys-color-fg-success-strong: @cnvs-base-palette-green-700;
131
- @cnvs-sys-color-fg-success-default: @cnvs-base-palette-green-600;
132
- @cnvs-sys-color-fg-warning-strong: @cnvs-base-palette-amber-700;
133
- @cnvs-sys-color-fg-warning-default: @cnvs-base-palette-amber-600;
134
- @cnvs-sys-color-fg-danger-strong: @cnvs-base-palette-red-700; // Stronger color used on text or icons that indicate critical messaging, like an error.
135
- @cnvs-sys-color-fg-danger-default: @cnvs-base-palette-red-600; // Used on text or icons that indicate critical messaging, like an error.
136
- @cnvs-sys-color-fg-inverse: @cnvs-base-palette-neutral-0; // Used for text and icons on dark backgrounds
137
- @cnvs-sys-color-fg-disabled: @cnvs-base-palette-slate-a400; // Indicates disabled text or icons
138
- @cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-a950; // Used on titles and stronger text and headings
139
- @cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-a900; // Used on headings and strong text and icons
140
- @cnvs-sys-color-fg-default: @cnvs-base-palette-neutral-a800; // Default color used on text and icons
143
+ @cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-a950; // Stronger high contrast text
144
+ @cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast text for maximum readability
145
+ @cnvs-sys-color-fg-ai: @cnvs-base-palette-blue-950; // Text and icons indicating AI-generated content
146
+ @cnvs-sys-color-fg-success-strong: @cnvs-base-palette-green-700; // Stronger success text and icons
147
+ @cnvs-sys-color-fg-success-default: @cnvs-base-palette-green-600; // Success text and icons (not tenant themeable)
148
+ @cnvs-sys-color-fg-warning-strong: @cnvs-base-palette-amber-700; // Stronger warning text and icons
149
+ @cnvs-sys-color-fg-warning-default: @cnvs-base-palette-amber-600; // Warning text and icons (not tenant themeable)
150
+ @cnvs-sys-color-fg-danger-strong: @cnvs-base-palette-red-700; // Stronger error text and icons
151
+ @cnvs-sys-color-fg-danger-default: @cnvs-base-palette-red-600; // Error text and icons (not tenant themeable)
152
+ @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
154
+ @cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-a950; // Strongest text for titles
155
+ @cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-a900; // Stronger text for headings and labels
156
+ @cnvs-sys-color-fg-default: @cnvs-base-palette-neutral-a800; // Default body text and icons
157
+ @cnvs-sys-color-fg-positive-stronger: @cnvs-base-palette-green-800; // Error
158
+ @cnvs-sys-color-fg-positive-strong: @cnvs-base-palette-green-700; // Error
141
159
  @cnvs-sys-color-fg-positive-soft: @cnvs-base-palette-green-400; // Error
142
- @cnvs-sys-color-fg-positive-softer: @cnvs-base-palette-green-50; // Error
143
- @cnvs-sys-color-fg-info-strong: @cnvs-base-palette-blue-700;
144
- @cnvs-sys-color-fg-info-default: @cnvs-base-palette-blue-600;
160
+ @cnvs-sys-color-fg-positive-softer: @cnvs-base-palette-green-200; // Error
161
+ @cnvs-sys-color-fg-positive-default: @cnvs-base-palette-green-600; // Error
162
+ @cnvs-sys-color-fg-info-strong: @cnvs-base-palette-blue-700; // Stronger informational text and icons
163
+ @cnvs-sys-color-fg-info-default: @cnvs-base-palette-blue-600; // Informational text and icons (not tenant themeable)
164
+ @cnvs-sys-color-fg-info-stronger: @cnvs-base-palette-blue-800; // Links on hover
145
165
  @cnvs-sys-color-fg-info-soft: @cnvs-base-palette-blue-400;
166
+ @cnvs-sys-color-fg-info-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
146
167
  @cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-500; // Warning
147
168
  @cnvs-sys-color-fg-caution-stronger: @cnvs-base-palette-amber-975; // Warning on hover
148
169
  @cnvs-sys-color-fg-caution-soft: @cnvs-base-palette-amber-700; // Warning
170
+ @cnvs-sys-color-fg-caution-strong: @cnvs-base-palette-amber-950; // Warning on hover
171
+ @cnvs-sys-color-fg-caution-default: @cnvs-base-palette-amber-900; // Warning
172
+ @cnvs-sys-color-fg-primary-strong: @cnvs-base-palette-blue-700; // Links on hover
173
+ @cnvs-sys-color-fg-primary-stronger: @cnvs-base-palette-blue-800; // Links on hover
149
174
  @cnvs-sys-color-fg-primary-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
150
175
  @cnvs-sys-color-fg-primary-soft: @cnvs-base-palette-blue-400;
151
- @cnvs-sys-color-fg-muted-strong: @cnvs-base-palette-slate-a700; // Stronger color used for hint or placeholder text
152
- @cnvs-sys-color-fg-muted-default: @cnvs-base-palette-slate-a600; // Used for hint and placeholder text
176
+ @cnvs-sys-color-fg-primary-default: @cnvs-base-palette-blue-600; // Branded text
177
+ @cnvs-sys-color-fg-muted-strong: @cnvs-base-palette-slate-a700; // Stronger secondary text
178
+ @cnvs-sys-color-fg-muted-default: @cnvs-base-palette-slate-a600; // Secondary text for hints and placeholders
153
179
  @cnvs-sys-color-fg-muted-soft: @cnvs-base-palette-slate-400; // Tab item foreground
180
+ @cnvs-sys-color-fg-muted-stronger: @cnvs-base-palette-slate-800;
154
181
  @cnvs-sys-color-fg-critical-softer: @cnvs-base-palette-red-200; // Error
155
182
  @cnvs-sys-color-fg-critical-soft: @cnvs-base-palette-red-400; // Error
156
183
  @cnvs-sys-color-fg-critical-stronger: @cnvs-base-palette-red-800; // Error
184
+ @cnvs-sys-color-fg-critical-strong: @cnvs-base-palette-red-700; // Error
185
+ @cnvs-sys-color-fg-critical-default: @cnvs-base-palette-red-600; // Error
157
186
  @cnvs-sys-color-icon-info-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
187
+ @cnvs-sys-color-icon-info-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
188
+ @cnvs-sys-color-icon-info-default: @cnvs-base-palette-blue-600; // Brand icon color
158
189
  @cnvs-sys-color-icon-disabled: @cnvs-base-palette-slate-400; // Disabled icon color
159
190
  @cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-500; // Softer caution icon color
191
+ @cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-700; // Soft caution icon color
192
+ @cnvs-sys-color-icon-caution-stronger: @cnvs-base-palette-amber-975; // Strong caution icon color
193
+ @cnvs-sys-color-icon-caution-strong: @cnvs-base-palette-amber-950; // Strong caution icon color
194
+ @cnvs-sys-color-icon-caution-default: @cnvs-base-palette-amber-900; // Caution icon color
160
195
  @cnvs-sys-color-icon-critical-softer: @cnvs-base-palette-red-200; // Error icon color
161
196
  @cnvs-sys-color-icon-critical-soft: @cnvs-base-palette-red-400; // Error icon color
162
197
  @cnvs-sys-color-icon-critical-stronger: @cnvs-base-palette-red-800; // Error icon color
198
+ @cnvs-sys-color-icon-critical-strong: @cnvs-base-palette-red-700; // Error icon color
199
+ @cnvs-sys-color-icon-critical-default: @cnvs-base-palette-red-600; // Error icon color
163
200
  @cnvs-sys-color-icon-positive-softer: @cnvs-base-palette-green-200; // Success icon color
164
201
  @cnvs-sys-color-icon-positive-soft: @cnvs-base-palette-green-400; // Success icon color
202
+ @cnvs-sys-color-icon-positive-stronger: @cnvs-base-palette-green-800; // Success icon color
203
+ @cnvs-sys-color-icon-positive-strong: @cnvs-base-palette-green-700; // Success icon color
204
+ @cnvs-sys-color-icon-positive-default: @cnvs-base-palette-green-600; // Success icon color
165
205
  @cnvs-sys-color-icon-primary-softer: @cnvs-base-palette-blue-200; // Stronger brand icon color
166
206
  @cnvs-sys-color-icon-primary-soft: @cnvs-base-palette-blue-400; // Stronger brand icon color
207
+ @cnvs-sys-color-icon-primary-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
208
+ @cnvs-sys-color-icon-primary-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
209
+ @cnvs-sys-color-icon-primary-default: @cnvs-base-palette-blue-600; // Brand icon color
167
210
  @cnvs-sys-color-icon-inverse: @cnvs-base-palette-neutral-0; // Inverse icon color
211
+ @cnvs-sys-color-icon-strong: @cnvs-base-palette-neutral-900; // Hover icon color
212
+ @cnvs-sys-color-icon-soft: @cnvs-base-palette-slate-600; // Disabled icon color
213
+ @cnvs-sys-color-icon-default: @cnvs-base-palette-neutral-800; // Default icon color
168
214
  @cnvs-sys-color-text-info-softer: @cnvs-base-palette-blue-200; // Active links
169
215
  @cnvs-sys-color-text-info-soft: @cnvs-base-palette-blue-400; // Active links
216
+ @cnvs-sys-color-text-info-stronger: @cnvs-base-palette-blue-800; // Active links
217
+ @cnvs-sys-color-text-info-strong: @cnvs-base-palette-blue-700; // Branded hover text
218
+ @cnvs-sys-color-text-info-default: @cnvs-base-palette-blue-600; // Branded text
170
219
  @cnvs-sys-color-text-positive-softer: @cnvs-base-palette-green-200; // Active links
171
220
  @cnvs-sys-color-text-positive-soft: @cnvs-base-palette-green-400; // Active links
221
+ @cnvs-sys-color-text-positive-stronger: @cnvs-base-palette-green-800; // Active links
222
+ @cnvs-sys-color-text-positive-strong: @cnvs-base-palette-green-700; // Branded hover text
223
+ @cnvs-sys-color-text-positive-default: @cnvs-base-palette-green-600; // Branded text
172
224
  @cnvs-sys-color-text-ai: @cnvs-base-palette-blue-950;
173
225
  @cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-200; // Softer warning text
226
+ @cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; // Stronger warning text
174
227
  @cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-400; // Disabled warning text
228
+ @cnvs-sys-color-text-caution-strong: @cnvs-base-palette-amber-950; // Strong warning text
229
+ @cnvs-sys-color-text-caution-default: @cnvs-base-palette-amber-900; // Warning text
175
230
  @cnvs-sys-color-text-primary-softer: @cnvs-base-palette-blue-200; // Active links
176
231
  @cnvs-sys-color-text-primary-soft: @cnvs-base-palette-blue-400; // Active links
232
+ @cnvs-sys-color-text-primary-stronger: @cnvs-base-palette-blue-800; // Active links
233
+ @cnvs-sys-color-text-primary-strong: @cnvs-base-palette-blue-700; // Branded hover text
234
+ @cnvs-sys-color-text-primary-default: @cnvs-base-palette-blue-600; // Branded text
177
235
  @cnvs-sys-color-text-critical-softer: @cnvs-base-palette-red-200; // Error text
178
236
  @cnvs-sys-color-text-critical-soft: @cnvs-base-palette-red-400; // Error text
237
+ @cnvs-sys-color-text-critical-stronger: @cnvs-base-palette-red-800; // Error text
238
+ @cnvs-sys-color-text-critical-strong: @cnvs-base-palette-red-700; // Error text
239
+ @cnvs-sys-color-text-critical-default: @cnvs-base-palette-red-600; // Error text
240
+ @cnvs-sys-color-text-inverse: @cnvs-base-palette-neutral-0; // Inverse text color
241
+ @cnvs-sys-color-text-hint: @cnvs-base-palette-slate-600; // Hint text color
179
242
  @cnvs-sys-color-text-disabled: @cnvs-base-palette-slate-400; // Disabled text color
243
+ @cnvs-sys-color-text-stronger: @cnvs-base-palette-neutral-950; // Display text
244
+ @cnvs-sys-color-text-strong: @cnvs-base-palette-neutral-900; // Heading text
245
+ @cnvs-sys-color-text-default: @cnvs-base-palette-neutral-800; // Body text
180
246
  @cnvs-sys-color-bg-default: @cnvs-base-palette-neutral-0; // Default page background
247
+ @cnvs-sys-color-bg-info-stronger: @cnvs-base-palette-blue-800; // Brand active background
181
248
  @cnvs-sys-color-bg-info-strong: @cnvs-base-palette-blue-700; // Brand hover background
182
- @cnvs-sys-color-bg-info-soft: @cnvs-base-palette-blue-a100; // Disabled
183
- @cnvs-sys-color-bg-critical-soft: @cnvs-base-palette-red-a100; // Disabled error background
184
- @cnvs-sys-color-bg-caution-soft: @cnvs-base-palette-amber-a100; // Softer warning background
185
- @cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-a100; // Disabled success background
249
+ @cnvs-sys-color-bg-info-default: @cnvs-base-palette-blue-600; // Info color
250
+ @cnvs-sys-color-bg-info-soft: @cnvs-base-palette-blue-100; // Disabled
251
+ @cnvs-sys-color-bg-info-softer: @cnvs-base-palette-blue-50; // Select
252
+ @cnvs-sys-color-bg-info-softest: @cnvs-base-palette-blue-25; // Surface
253
+ @cnvs-sys-color-bg-ai-strongest: @cnvs-base-palette-blue-950; // AI surfaces
254
+ @cnvs-sys-color-bg-ai-stronger: @cnvs-base-palette-blue-400; // Active state on AI containers
255
+ @cnvs-sys-color-bg-ai-strong: @cnvs-base-palette-blue-200; // Hover on AI container
256
+ @cnvs-sys-color-bg-ai-default: @cnvs-base-palette-blue-100; // AI container
257
+ @cnvs-sys-color-bg-critical-stronger: @cnvs-base-palette-red-800; // Stronger error background
258
+ @cnvs-sys-color-bg-critical-strong: @cnvs-base-palette-red-700; // Strong error background
259
+ @cnvs-sys-color-bg-critical-default: @cnvs-base-palette-red-600; // Default error background
260
+ @cnvs-sys-color-bg-critical-soft: @cnvs-base-palette-red-100; // Disabled error background
261
+ @cnvs-sys-color-bg-critical-softer: @cnvs-base-palette-red-50; // Disabled error background
262
+ @cnvs-sys-color-bg-critical-softest: @cnvs-base-palette-red-25; // Input error background
263
+ @cnvs-sys-color-bg-caution-stronger: @cnvs-base-palette-amber-600; // Stronger warning background
264
+ @cnvs-sys-color-bg-caution-strong: @cnvs-base-palette-amber-500; // Strong warning background
265
+ @cnvs-sys-color-bg-caution-default: @cnvs-base-palette-amber-400; // Default warning background
266
+ @cnvs-sys-color-bg-caution-soft: @cnvs-base-palette-amber-100; // Softer warning background
267
+ @cnvs-sys-color-bg-caution-softer: @cnvs-base-palette-amber-50; // Softer warning background
268
+ @cnvs-sys-color-bg-caution-softest: @cnvs-base-palette-amber-25; // Disabled warning background
269
+ @cnvs-sys-color-bg-positive-stronger: @cnvs-base-palette-green-800; // Active success background
270
+ @cnvs-sys-color-bg-positive-strong: @cnvs-base-palette-green-700; // Hover success background
271
+ @cnvs-sys-color-bg-positive-default: @cnvs-base-palette-green-600; // Disabled success background
272
+ @cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-100; // Disabled success background
273
+ @cnvs-sys-color-bg-positive-softer: @cnvs-base-palette-green-50; // Surface success background
186
274
  @cnvs-sys-color-bg-positive-softest: @cnvs-base-palette-green-25; // Lightest surface success background
187
- @cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-slate-a500;
188
- @cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-50; // The alternative page background
189
- @cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-a300; // Active state for segmented control, Pill
275
+ @cnvs-sys-color-bg-contrast-strong: @cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
276
+ @cnvs-sys-color-bg-contrast-default: @cnvs-base-palette-neutral-900; // Contrast backgrounds, like Secondary Buttons
277
+ @cnvs-sys-color-bg-muted-strong: @cnvs-base-palette-slate-700;
278
+ @cnvs-sys-color-bg-muted-default: @cnvs-base-palette-slate-600;
279
+ @cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-slate-500;
280
+ @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
282
+ @cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-300; // Active state for segmented control, Pill
190
283
  @cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-slate-200; // Active states
191
- @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-a50; // Alternative page background
192
- @cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-a100; // Primary disabled
284
+ @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
285
+ @cnvs-sys-color-bg-alt-softer: @cnvs-base-palette-slate-25; // Disabled inputs
286
+ @cnvs-sys-color-bg-translucent: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-500); // Tooltip, Status Indicator
287
+ @cnvs-sys-color-bg-overlay: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-400); // Overlay background
288
+ @cnvs-sys-color-bg-transparent-stronger: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-250); // Inverse Secondary Button Active state
289
+ @cnvs-sys-color-bg-transparent-strong: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-100); // Inverse Secondary Button Hover state
290
+ @cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
291
+ @cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blue-800; // Brand active background
292
+ @cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blue-700; // Brand hover background
293
+ @cnvs-sys-color-bg-primary-default: @cnvs-base-palette-blue-600; // Primary brand color
294
+ @cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-100; // Primary disabled
295
+ @cnvs-sys-color-bg-primary-softer: @cnvs-base-palette-blue-50; // Select
296
+ @cnvs-sys-color-bg-primary-softest: @cnvs-base-palette-blue-25; // Surface
193
297
  @cnvs-sys-line-height-title-large: @cnvs-base-line-height-600;
194
298
  @cnvs-sys-line-height-title-medium: @cnvs-base-line-height-500;
195
299
  @cnvs-sys-line-height-title-small: @cnvs-base-line-height-400;
@@ -226,93 +330,40 @@
226
330
  @cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
227
331
  @cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
228
332
  @cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
229
- @cnvs-sys-opacity-surface-hover: @cnvs-base-opacity-100; // Surface hover opacity
230
- @cnvs-sys-color-brand-border-caution: @cnvs-brand-caution-500;
231
- @cnvs-sys-color-brand-border-critical: @cnvs-brand-critical-500;
232
- @cnvs-sys-color-brand-border-primary: @cnvs-brand-primary-500; // Brand, Focus
233
- @cnvs-sys-color-brand-fg-selected: @cnvs-brand-primary-700;
234
- @cnvs-sys-color-brand-fg-positive-strong: @cnvs-brand-positive-700;
235
- @cnvs-sys-color-brand-fg-positive-default: @cnvs-brand-positive-600;
236
- @cnvs-sys-color-brand-fg-caution-strong: @cnvs-brand-caution-700;
237
- @cnvs-sys-color-brand-fg-caution-default: @cnvs-brand-caution-600;
238
- @cnvs-sys-color-brand-fg-critical-strong: @cnvs-brand-critical-700; // Stronger color used on text or icons that indicate critical messaging, like an error.
239
- @cnvs-sys-color-brand-fg-critical-default: @cnvs-brand-critical-600; // Used on text or icons that indicate critical messaging, like an error.
240
- @cnvs-sys-color-brand-fg-primary-strong: @cnvs-brand-primary-700; // Text and icons that use the primary brand color. Use this on the primary strong background
241
- @cnvs-sys-color-brand-fg-primary-default: @cnvs-brand-primary-600; // Text and icons that use the primary brand color. Use this on the primary background
333
+ @cnvs-sys-opacity-surface-hover: @cnvs-base-opacity-100; // State layer applied to surface colors on hover
334
+ @cnvs-sys-color-brand-border-caution: @cnvs-brand-caution-500; // Tenant-themeable caution border for warning states
335
+ @cnvs-sys-color-brand-border-critical: @cnvs-brand-critical-500; // Tenant-themeable critical border for error states
336
+ @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
338
+ @cnvs-sys-color-brand-fg-positive-strong: @cnvs-brand-positive-700; // Stronger tenant-themeable positive text and icon color
339
+ @cnvs-sys-color-brand-fg-positive-default: @cnvs-brand-positive-600; // Tenant-themeable positive text and icon color
340
+ @cnvs-sys-color-brand-fg-caution-strong: @cnvs-brand-caution-700; // Stronger tenant-themeable caution text and icon color
341
+ @cnvs-sys-color-brand-fg-caution-default: @cnvs-brand-caution-600; // Tenant-themeable caution text and icon color
342
+ @cnvs-sys-color-brand-fg-critical-strong: @cnvs-brand-critical-700; // Stronger tenant-themeable critical text and icon color
343
+ @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
242
346
  @cnvs-sys-color-brand-accent-action: @cnvs-brand-primary-600;
243
- @cnvs-sys-color-brand-accent-positive: @cnvs-brand-positive-600;
244
- @cnvs-sys-color-brand-accent-caution: @cnvs-brand-caution-400;
245
- @cnvs-sys-color-brand-accent-critical: @cnvs-brand-critical-600;
246
- @cnvs-sys-color-brand-accent-primary: @cnvs-brand-primary-600;
247
- @cnvs-sys-color-brand-surface-selected: @cnvs-brand-primary-a50;
248
- @cnvs-sys-color-brand-surface-positive-strong: @cnvs-brand-positive-a50;
249
- @cnvs-sys-color-brand-surface-positive-default: @cnvs-brand-positive-a25;
250
- @cnvs-sys-color-brand-surface-caution-strong: @cnvs-brand-caution-a50;
251
- @cnvs-sys-color-brand-surface-caution-default: @cnvs-brand-caution-a25;
252
- @cnvs-sys-color-brand-surface-critical-strong: @cnvs-brand-critical-a50;
253
- @cnvs-sys-color-brand-surface-critical-default: @cnvs-brand-critical-a25;
254
- @cnvs-sys-color-brand-surface-primary-strong: @cnvs-brand-primary-a50;
255
- @cnvs-sys-color-brand-surface-primary-default: @cnvs-brand-primary-a25;
256
- @cnvs-sys-color-brand-focus-caution-inner: @cnvs-brand-caution-400;
257
- @cnvs-sys-color-brand-focus-caution-outer: @cnvs-brand-caution-500;
258
- @cnvs-sys-color-brand-focus-critical: @cnvs-brand-critical-500;
259
- @cnvs-sys-color-brand-focus-primary: @cnvs-brand-primary-500;
260
- @cnvs-sys-color-static-amber-soft: @cnvs-sys-color-surface-warning-strong; // Soft amber
261
- @cnvs-sys-color-static-amber-strongest: @cnvs-sys-color-fg-warning-strong; // Stronger amber
262
- @cnvs-sys-color-static-amber-stronger: @cnvs-sys-color-accent-warning; // Stronger amber
263
- @cnvs-sys-color-static-amber-strong: @cnvs-sys-color-accent-warning; // Stronger amber
264
- @cnvs-sys-color-static-amber-softest: @cnvs-sys-color-surface-warning-default; // Soft amber
265
- @cnvs-sys-color-static-amber-default: @cnvs-sys-color-accent-warning; // amber
266
- @cnvs-sys-color-static-blue-default: @cnvs-sys-color-accent-info; // Blue
347
+ @cnvs-sys-color-brand-accent-positive: @cnvs-brand-positive-600; // Tenant-themeable solid positive accent
348
+ @cnvs-sys-color-brand-accent-caution: @cnvs-brand-caution-400; // Tenant-themeable solid caution accent
349
+ @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
352
+ @cnvs-sys-color-brand-surface-positive-strong: @cnvs-brand-positive-a50; // Stronger tenant-themeable positive container background
353
+ @cnvs-sys-color-brand-surface-positive-default: @cnvs-brand-positive-a25; // Tenant-themeable positive/success container background
354
+ @cnvs-sys-color-brand-surface-caution-strong: @cnvs-brand-caution-a50; // Stronger tenant-themeable caution container background
355
+ @cnvs-sys-color-brand-surface-caution-default: @cnvs-brand-caution-a25; // Tenant-themeable caution/warning container background
356
+ @cnvs-sys-color-brand-surface-critical-strong: @cnvs-brand-critical-a50; // Stronger tenant-themeable critical container background
357
+ @cnvs-sys-color-brand-surface-critical-default: @cnvs-brand-critical-a25; // Tenant-themeable critical/error container background
358
+ @cnvs-sys-color-brand-surface-primary-strong: @cnvs-brand-primary-a50; // Stronger tenant-themeable primary container background
359
+ @cnvs-sys-color-brand-surface-primary-default: @cnvs-brand-primary-a25; // Tenant-themeable primary container background
360
+ @cnvs-sys-color-brand-focus-caution-inner: @cnvs-brand-caution-400; // Tenant-themeable inner focus ring for caution-state elements
361
+ @cnvs-sys-color-brand-focus-caution-outer: @cnvs-brand-caution-500; // Tenant-themeable outer focus ring for caution-state elements
362
+ @cnvs-sys-color-brand-focus-critical: @cnvs-brand-critical-500; // Tenant-themeable focus ring for error-state elements
363
+ @cnvs-sys-color-brand-focus-primary: @cnvs-brand-primary-500; // Tenant-themeable focus ring for interactive elements
267
364
  @cnvs-sys-color-shadow-default: @cnvs-sys-color-shadow-base; // Main shadow color
268
365
  @cnvs-sys-color-shadow-2: @cnvs-sys-color-shadow-ambient; // Second shadow color
269
366
  @cnvs-sys-color-shadow-1: @cnvs-sys-color-shadow-base; // First shadow color
270
- @cnvs-sys-color-border-container: @cnvs-sys-color-border-strong; // Cards, Toasts, Surfaces
271
- @cnvs-sys-color-border-divider: @cnvs-sys-color-border-default; // Dividers
272
- @cnvs-sys-color-border-contrast-strong: @cnvs-sys-color-border-contrast-default; // Secondary Button Hover
273
- @cnvs-sys-color-border-input-inverse: @cnvs-sys-color-border-inverse-default; // Borders on checkboxes and radios
274
- @cnvs-sys-color-border-input-strong: @cnvs-sys-color-border-input-hover; // Input hover
275
- @cnvs-sys-color-fg-positive-default: @cnvs-sys-color-fg-success-default; // Error
276
- @cnvs-sys-color-fg-info-stronger: @cnvs-sys-color-fg-info-strong; // Links on hover
277
- @cnvs-sys-color-fg-info-softer: @cnvs-sys-color-fg-ai; // Link Inverse, Disabled
278
- @cnvs-sys-color-fg-caution-strong: @cnvs-sys-color-fg-contrast-default; // Warning on hover
279
- @cnvs-sys-color-fg-muted-stronger: @cnvs-sys-color-fg-muted-strong;
280
- @cnvs-sys-color-icon-info-strong: @cnvs-sys-color-fg-info-strong; // Stronger brand icon color
281
- @cnvs-sys-color-icon-info-default: @cnvs-sys-color-fg-info-default; // Brand icon color
282
- @cnvs-sys-color-icon-caution-default: @cnvs-sys-color-fg-contrast-default; // Caution icon color
283
- @cnvs-sys-color-icon-strong: @cnvs-sys-color-fg-muted-strong; // Hover icon color
284
- @cnvs-sys-color-icon-soft: @cnvs-sys-color-fg-muted-default; // Disabled icon color
285
- @cnvs-sys-color-icon-default: @cnvs-sys-color-fg-default; // Default icon color
286
- @cnvs-sys-color-text-info-stronger: @cnvs-sys-color-fg-info-strong; // Active links
287
- @cnvs-sys-color-text-info-strong: @cnvs-sys-color-fg-info-strong; // Branded hover text
288
- @cnvs-sys-color-text-info-default: @cnvs-sys-color-fg-info-default; // Branded text
289
- @cnvs-sys-color-text-caution-stronger: @cnvs-sys-color-fg-contrast-strong; // Stronger warning text
290
- @cnvs-sys-color-text-caution-strong: @cnvs-sys-color-fg-contrast-strong; // Strong warning text
291
- @cnvs-sys-color-text-caution-default: @cnvs-sys-color-fg-contrast-default; // Warning text
292
- @cnvs-sys-color-text-inverse: @cnvs-sys-color-fg-inverse; // Inverse text color
293
- @cnvs-sys-color-text-hint: @cnvs-sys-color-fg-muted-default; // Hint text color
294
- @cnvs-sys-color-text-stronger: @cnvs-sys-color-fg-strong; // Display text
295
- @cnvs-sys-color-text-strong: @cnvs-sys-color-fg-strong; // Heading text
296
- @cnvs-sys-color-text-default: @cnvs-sys-color-fg-default; // Body text
297
- @cnvs-sys-color-bg-info-stronger: @cnvs-sys-color-accent-info; // Brand active background
298
- @cnvs-sys-color-bg-info-default: @cnvs-sys-color-accent-info; // Info color
299
- @cnvs-sys-color-bg-info-softer: @cnvs-sys-color-surface-info-strong; // Select
300
- @cnvs-sys-color-bg-info-softest: @cnvs-sys-color-surface-info-default; // Surface
301
- @cnvs-sys-color-bg-ai-strongest: @cnvs-sys-color-accent-ai; // AI surfaces
302
- @cnvs-sys-color-bg-ai-stronger: @cnvs-sys-color-surface-ai-pressed; // Active state on AI containers
303
- @cnvs-sys-color-bg-ai-strong: @cnvs-sys-color-surface-ai-hover; // Hover on AI container
304
- @cnvs-sys-color-bg-ai-default: @cnvs-sys-color-surface-ai-default; // AI container
305
- @cnvs-sys-color-bg-contrast-strong: @cnvs-sys-color-surface-contrast-strong; // Contrast backgrounds, like Secondary Buttons
306
- @cnvs-sys-color-bg-contrast-default: @cnvs-sys-color-surface-contrast-default; // Contrast backgrounds, like Secondary Buttons
307
- @cnvs-sys-color-bg-muted-strong: @cnvs-sys-color-accent-muted-default;
308
- @cnvs-sys-color-bg-muted-default: @cnvs-sys-color-accent-muted-default;
309
- @cnvs-sys-color-bg-muted-softer: @cnvs-sys-color-accent-muted-soft;
310
- @cnvs-sys-color-bg-alt-softer: @cnvs-sys-color-surface-raised; // Disabled inputs
311
- @cnvs-sys-color-bg-translucent: @cnvs-sys-color-surface-contrast-default; // Tooltip, Status Indicator
312
- @cnvs-sys-color-bg-overlay: @cnvs-sys-color-surface-overlay-scrim; // Overlay background
313
- @cnvs-sys-color-bg-transparent-stronger: @cnvs-sys-color-surface-overlay-pressed-default; // Inverse Secondary Button Active state
314
- @cnvs-sys-color-bg-transparent-strong: @cnvs-sys-color-surface-overlay-hover-default; // Inverse Secondary Button Hover state
315
- @cnvs-sys-color-bg-transparent-default: @cnvs-sys-color-surface-transparent; // Transparent background
316
367
  @cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
317
368
  @cnvs-sys-shape-zero: @cnvs-sys-shape-none; // Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
318
369
  @cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
@@ -332,65 +383,14 @@
332
383
  @cnvs-sys-padding-sm: @cnvs-base-size-150; // Compact padding, used in Rich Text Editor, or X-Small Buttons
333
384
  @cnvs-sys-padding-xs: @cnvs-base-size-100; // Horizontal padding on Input Fields
334
385
  @cnvs-sys-padding-xxs: @cnvs-base-size-50;
335
- @cnvs-sys-size-xxl: @cnvs-base-size-800; // Table Cell, Toast
336
- @cnvs-sys-size-xl: @cnvs-base-size-700; // Large size used in Large Buttons, Segmented Controls, Expandable Container Trigger, Tabs, and Avatar
337
- @cnvs-sys-size-lg: @cnvs-base-size-600; // Default height for most components, like Medium Buttons, Segmented Control, Banner, Input Fields, and Menu List Items
338
- @cnvs-sys-size-md: @cnvs-base-size-500; // Small Buttons, Segmented Control, Tooltip, Avatar
339
- @cnvs-sys-size-sm: @cnvs-base-size-400; // X-Small Buttons, Pills, Checkboxes, Radio Buttons
340
- @cnvs-sys-size-xs: @cnvs-base-size-300; // Count Badge
341
- @cnvs-sys-size-xxs: @cnvs-base-size-250; // Switch Track
342
- @cnvs-sys-size-xxxs: @cnvs-base-size-200; // Switch Track
343
- @cnvs-sys-color-border-primary-default: @cnvs-sys-color-brand-border-primary; // Brand, Focus
344
- @cnvs-sys-color-border-caution-strong: @cnvs-sys-color-brand-focus-caution-outer; // Warning outer (box shadow)
345
- @cnvs-sys-color-border-caution-default: @cnvs-sys-color-brand-focus-caution-inner; // Warning inner
346
- @cnvs-sys-color-border-critical-default: @cnvs-sys-color-brand-border-critical; // Error
347
- @cnvs-sys-color-fg-positive-stronger: @cnvs-sys-color-brand-fg-positive-strong; // Error
348
- @cnvs-sys-color-fg-positive-strong: @cnvs-sys-color-brand-fg-positive-strong; // Error
349
- @cnvs-sys-color-fg-caution-default: @cnvs-sys-color-brand-fg-caution-default; // Warning
350
- @cnvs-sys-color-fg-primary-strong: @cnvs-sys-color-brand-fg-primary-strong; // Links on hover
351
- @cnvs-sys-color-fg-primary-stronger: @cnvs-sys-color-brand-fg-primary-strong; // Links on hover
352
- @cnvs-sys-color-fg-primary-default: @cnvs-sys-color-brand-fg-primary-default; // Branded text
353
- @cnvs-sys-color-fg-critical-strong: @cnvs-sys-color-brand-fg-critical-strong; // Error
354
- @cnvs-sys-color-fg-critical-default: @cnvs-sys-color-brand-fg-critical-default; // Error
355
- @cnvs-sys-color-icon-caution-soft: @cnvs-sys-color-brand-fg-caution-default; // Soft caution icon color
356
- @cnvs-sys-color-icon-caution-stronger: @cnvs-sys-color-brand-fg-caution-strong; // Strong caution icon color
357
- @cnvs-sys-color-icon-caution-strong: @cnvs-sys-color-brand-fg-caution-default; // Strong caution icon color
358
- @cnvs-sys-color-icon-critical-strong: @cnvs-sys-color-brand-fg-critical-strong; // Error icon color
359
- @cnvs-sys-color-icon-critical-default: @cnvs-sys-color-brand-fg-critical-default; // Error icon color
360
- @cnvs-sys-color-icon-positive-stronger: @cnvs-sys-color-brand-fg-positive-strong; // Success icon color
361
- @cnvs-sys-color-icon-positive-strong: @cnvs-sys-color-brand-fg-positive-strong; // Success icon color
362
- @cnvs-sys-color-icon-positive-default: @cnvs-sys-color-brand-fg-positive-default; // Success icon color
363
- @cnvs-sys-color-icon-primary-stronger: @cnvs-sys-color-brand-fg-primary-strong; // Stronger brand icon color
364
- @cnvs-sys-color-icon-primary-strong: @cnvs-sys-color-brand-fg-primary-strong; // Stronger brand icon color
365
- @cnvs-sys-color-icon-primary-default: @cnvs-sys-color-brand-fg-primary-default; // Brand icon color
366
- @cnvs-sys-color-text-positive-stronger: @cnvs-sys-color-brand-fg-positive-strong; // Active links
367
- @cnvs-sys-color-text-positive-strong: @cnvs-sys-color-brand-fg-positive-strong; // Branded hover text
368
- @cnvs-sys-color-text-positive-default: @cnvs-sys-color-brand-fg-positive-default; // Branded text
369
- @cnvs-sys-color-text-primary-stronger: @cnvs-sys-color-brand-fg-primary-strong; // Active links
370
- @cnvs-sys-color-text-primary-strong: @cnvs-sys-color-brand-fg-primary-strong; // Branded hover text
371
- @cnvs-sys-color-text-primary-default: @cnvs-sys-color-brand-fg-primary-default; // Branded text
372
- @cnvs-sys-color-text-critical-stronger: @cnvs-sys-color-brand-fg-critical-strong; // Error text
373
- @cnvs-sys-color-text-critical-strong: @cnvs-sys-color-brand-fg-critical-strong; // Error text
374
- @cnvs-sys-color-text-critical-default: @cnvs-sys-color-brand-fg-critical-default; // Error text
375
- @cnvs-sys-color-bg-critical-stronger: @cnvs-sys-color-brand-accent-critical; // Stronger error background
376
- @cnvs-sys-color-bg-critical-strong: @cnvs-sys-color-brand-accent-critical; // Strong error background
377
- @cnvs-sys-color-bg-critical-default: @cnvs-sys-color-brand-accent-critical; // Default error background
378
- @cnvs-sys-color-bg-critical-softer: @cnvs-sys-color-brand-surface-critical-strong; // Disabled error background
379
- @cnvs-sys-color-bg-critical-softest: @cnvs-sys-color-brand-surface-critical-default; // Input error background
380
- @cnvs-sys-color-bg-caution-stronger: @cnvs-sys-color-brand-accent-caution; // Stronger warning background
381
- @cnvs-sys-color-bg-caution-strong: @cnvs-sys-color-brand-accent-caution; // Strong warning background
382
- @cnvs-sys-color-bg-caution-default: @cnvs-sys-color-brand-accent-caution; // Default warning background
383
- @cnvs-sys-color-bg-caution-softer: @cnvs-sys-color-brand-surface-caution-strong; // Softer warning background
384
- @cnvs-sys-color-bg-caution-softest: @cnvs-sys-color-brand-surface-caution-default; // Disabled warning background
385
- @cnvs-sys-color-bg-positive-stronger: @cnvs-sys-color-brand-accent-positive; // Active success background
386
- @cnvs-sys-color-bg-positive-strong: @cnvs-sys-color-brand-accent-positive; // Hover success background
387
- @cnvs-sys-color-bg-positive-default: @cnvs-sys-color-brand-accent-positive; // Disabled success background
388
- @cnvs-sys-color-bg-positive-softer: @cnvs-sys-color-brand-surface-positive-strong; // Surface success background
389
- @cnvs-sys-color-bg-primary-stronger: @cnvs-sys-color-brand-accent-primary; // Brand active background
390
- @cnvs-sys-color-bg-primary-strong: @cnvs-sys-color-brand-accent-primary; // Brand hover background
391
- @cnvs-sys-color-bg-primary-default: @cnvs-sys-color-brand-accent-primary; // Primary brand color
392
- @cnvs-sys-color-bg-primary-softer: @cnvs-sys-color-brand-surface-primary-strong; // Select
393
- @cnvs-sys-color-bg-primary-softest: @cnvs-sys-color-brand-surface-primary-default; // Surface
386
+ @cnvs-sys-size-xxl: @cnvs-base-size-800; // Expandable containers. Used for expandable containers in their collapsed state.
387
+ @cnvs-sys-size-xl: @cnvs-base-size-700; // Content containers. Used for table cells and toasts.
388
+ @cnvs-sys-size-lg: @cnvs-base-size-600; // Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars.
389
+ @cnvs-sys-size-md: @cnvs-base-size-500; // Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu items.
390
+ @cnvs-sys-size-sm: @cnvs-base-size-400; // Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars.
391
+ @cnvs-sys-size-xs: @cnvs-base-size-300; // Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons.
392
+ @cnvs-sys-size-xxs: @cnvs-base-size-250; // Compact indicators. Used for status indicators and count badges.
393
+ @cnvs-sys-size-xxxs: @cnvs-base-size-200; // Used for switch toggle.
394
394
  @cnvs-sys-line-height-title-lg: @cnvs-base-size-800;
395
395
  @cnvs-sys-line-height-title-md: @cnvs-base-size-700;
396
396
  @cnvs-sys-line-height-title-sm: @cnvs-base-size-600;
@@ -420,9 +420,9 @@
420
420
  @cnvs-sys-shape-xxxl: @cnvs-base-size-400; // Maximum rounding for modals and large containers
421
421
  @cnvs-sys-shape-xxl: @cnvs-base-size-300; // Extra extra large rounding for cards and items
422
422
  @cnvs-sys-shape-xl: @cnvs-base-size-200; // Extra large rounding for prominent containers
423
- @cnvs-sys-shape-lg: @cnvs-base-size-150; // Primarily used for elevated and simple parent containers with greater amounts of content and UI. Dialogs, Modals, Bottom Sheets
424
- @cnvs-sys-shape-md: @cnvs-base-size-100; // Core large containers, card containers and popups that house moderate amounts of content and/or data: Card, Menus
425
- @cnvs-sys-shape-sm: @cnvs-base-size-50; // Components presenting info text, user input, user feedback. Inputs, Toasts, Snack bars, Tooltips, Error Alert Banner
423
+ @cnvs-sys-shape-lg: @cnvs-base-size-150; // Rich text editor
424
+ @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
426
426
  @cnvs-sys-font-size-body-small: @cnvs-base-font-size-100;
427
427
  @cnvs-sys-font-size-body-medium: @cnvs-base-font-size-125;
428
428
  @cnvs-sys-font-size-body-large: @cnvs-base-font-size-150;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "4.1.1",
3
+ "version": "4.1.3",
4
4
  "description": "Canvas design tokens for web",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "CC-BY-ND-4.0",
package/scss/base/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 19:58:48 GMT
3
+ // Generated on Wed, 25 Feb 2026 21:44:04 GMT
4
4
 
5
5
  $cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
6
6
  $cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid