@workday/canvas-tokens-web 4.1.2 → 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 +1 -1
  3. package/css/system/_variables.css +118 -118
  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 +1 -1
  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 +232 -78
  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 +1 -1
  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 +232 -78
  19. package/dist/es6/system/index.js +1 -1
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +118 -118
  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 +1 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +118 -118
  29. package/scss/system/_variables.scss +118 -118
package/dist/es6/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 09 Feb 2026 21:04:49 GMT
3
+ * Generated on Wed, 25 Feb 2026 21:44:04 GMT
4
4
  */
5
5
 
6
6
  export const breakpoints = {
package/less/base/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 21:04:49 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
package/less/brand/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 21:04:49 GMT
3
+ // Generated on Wed, 25 Feb 2026 21:44:04 GMT
4
4
 
5
5
  @cnvs-brand-positive-a200: @cnvs-base-palette-green-a200;
6
6
  @cnvs-brand-positive-a100: @cnvs-base-palette-green-a100;
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 21:04:49 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,48 +33,48 @@
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
78
  @cnvs-sys-color-static-amber-soft: @cnvs-base-palette-amber-100; // Soft amber
79
79
  @cnvs-sys-color-static-amber-strongest: @cnvs-base-palette-amber-950; // Stronger amber
80
80
  @cnvs-sys-color-static-amber-softer: @cnvs-base-palette-amber-50; // Soft amber
@@ -116,51 +116,51 @@
116
116
  @cnvs-sys-color-static-orange-soft: @cnvs-base-palette-amber-100;
117
117
  @cnvs-sys-color-static-orange-default: @cnvs-base-palette-amber-400;
118
118
  @cnvs-sys-color-static-gold-stronger: @cnvs-base-palette-amber-600;
119
- @cnvs-sys-color-shadow-ambient: @cnvs-base-palette-slate-a100;
120
- @cnvs-sys-color-shadow-base: @cnvs-base-palette-slate-a200;
121
- @cnvs-sys-color-border-transparent: @cnvs-base-palette-neutral-a0;
122
- @cnvs-sys-color-border-inverse-strong: @cnvs-base-palette-white-a700;
123
- @cnvs-sys-color-border-inverse-default: @cnvs-base-palette-neutral-0;
124
- @cnvs-sys-color-border-warning: @cnvs-base-palette-amber-400;
125
- @cnvs-sys-color-border-danger: @cnvs-base-palette-red-500;
126
- @cnvs-sys-color-border-info-default: @cnvs-base-palette-blue-500;
127
- @cnvs-sys-color-border-strong: @cnvs-base-palette-slate-a300;
128
- @cnvs-sys-color-border-default: @cnvs-base-palette-slate-a200;
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
129
  @cnvs-sys-color-border-container: @cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
130
130
  @cnvs-sys-color-border-primary-default: @cnvs-base-palette-blue-500; // Brand, Focus
131
131
  @cnvs-sys-color-border-divider: @cnvs-base-palette-slate-200; // Dividers
132
132
  @cnvs-sys-color-border-caution-strong: @cnvs-base-palette-amber-500; // Warning outer (box shadow)
133
133
  @cnvs-sys-color-border-caution-default: @cnvs-base-palette-amber-400; // Warning inner
134
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;
135
+ @cnvs-sys-color-border-contrast-default: @cnvs-base-palette-neutral-a900; // High contrast border for maximum visibility
136
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; // Input hover
138
- @cnvs-sys-color-border-input-default: @cnvs-base-palette-slate-a500; // Inputs
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
139
  @cnvs-sys-color-border-input-inverse: @cnvs-base-palette-neutral-0; // Borders on checkboxes and radios
140
140
  @cnvs-sys-color-border-input-strong: @cnvs-base-palette-slate-700; // Input hover
141
141
  @cnvs-sys-color-border-input-disabled: @cnvs-base-palette-slate-400; // Disabled inputs
142
142
  @cnvs-sys-color-border-ai: @cnvs-base-palette-blue-950; // Active state on AI borders
143
- @cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-a950;
144
- @cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-a900;
145
- @cnvs-sys-color-fg-ai: @cnvs-base-palette-blue-950; // AI icons and text
146
- @cnvs-sys-color-fg-success-strong: @cnvs-base-palette-green-700;
147
- @cnvs-sys-color-fg-success-default: @cnvs-base-palette-green-600;
148
- @cnvs-sys-color-fg-warning-strong: @cnvs-base-palette-amber-700;
149
- @cnvs-sys-color-fg-warning-default: @cnvs-base-palette-amber-600;
150
- @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.
151
- @cnvs-sys-color-fg-danger-default: @cnvs-base-palette-red-600; // Used on text or icons that indicate critical messaging, like an error.
152
- @cnvs-sys-color-fg-inverse: @cnvs-base-palette-neutral-0; // Used for text and icons on dark backgrounds
153
- @cnvs-sys-color-fg-disabled: @cnvs-base-palette-slate-a400; // Indicates disabled text or icons
154
- @cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-a950; // Used on titles and stronger text and headings
155
- @cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-a900; // Used on headings and strong text and icons
156
- @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
157
  @cnvs-sys-color-fg-positive-stronger: @cnvs-base-palette-green-800; // Error
158
158
  @cnvs-sys-color-fg-positive-strong: @cnvs-base-palette-green-700; // Error
159
159
  @cnvs-sys-color-fg-positive-soft: @cnvs-base-palette-green-400; // Error
160
160
  @cnvs-sys-color-fg-positive-softer: @cnvs-base-palette-green-200; // Error
161
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;
163
- @cnvs-sys-color-fg-info-default: @cnvs-base-palette-blue-600;
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
164
  @cnvs-sys-color-fg-info-stronger: @cnvs-base-palette-blue-800; // Links on hover
165
165
  @cnvs-sys-color-fg-info-soft: @cnvs-base-palette-blue-400;
166
166
  @cnvs-sys-color-fg-info-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
@@ -174,8 +174,8 @@
174
174
  @cnvs-sys-color-fg-primary-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
175
175
  @cnvs-sys-color-fg-primary-soft: @cnvs-base-palette-blue-400;
176
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 color used for hint or placeholder text
178
- @cnvs-sys-color-fg-muted-default: @cnvs-base-palette-slate-a600; // Used for hint and placeholder 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
179
179
  @cnvs-sys-color-fg-muted-soft: @cnvs-base-palette-slate-400; // Tab item foreground
180
180
  @cnvs-sys-color-fg-muted-stronger: @cnvs-base-palette-slate-800;
181
181
  @cnvs-sys-color-fg-critical-softer: @cnvs-base-palette-red-200; // Error
@@ -278,7 +278,7 @@
278
278
  @cnvs-sys-color-bg-muted-default: @cnvs-base-palette-slate-600;
279
279
  @cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-slate-500;
280
280
  @cnvs-sys-color-bg-muted-softer: @cnvs-base-palette-slate-400;
281
- @cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-50; // The alternative page background
281
+ @cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-50; // Alternative page background for visual separation between page sections
282
282
  @cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-300; // Active state for segmented control, Pill
283
283
  @cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-slate-200; // Active states
284
284
  @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
@@ -330,37 +330,37 @@
330
330
  @cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
331
331
  @cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
332
332
  @cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
333
- @cnvs-sys-opacity-surface-hover: @cnvs-base-opacity-100; // Surface hover opacity
334
- @cnvs-sys-color-brand-border-caution: @cnvs-brand-caution-500;
335
- @cnvs-sys-color-brand-border-critical: @cnvs-brand-critical-500;
336
- @cnvs-sys-color-brand-border-primary: @cnvs-brand-primary-500; // Brand, Focus
337
- @cnvs-sys-color-brand-fg-selected: @cnvs-brand-primary-700;
338
- @cnvs-sys-color-brand-fg-positive-strong: @cnvs-brand-positive-700;
339
- @cnvs-sys-color-brand-fg-positive-default: @cnvs-brand-positive-600;
340
- @cnvs-sys-color-brand-fg-caution-strong: @cnvs-brand-caution-700;
341
- @cnvs-sys-color-brand-fg-caution-default: @cnvs-brand-caution-600;
342
- @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.
343
- @cnvs-sys-color-brand-fg-critical-default: @cnvs-brand-critical-600; // Used on text or icons that indicate critical messaging, like an error.
344
- @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
345
- @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
346
346
  @cnvs-sys-color-brand-accent-action: @cnvs-brand-primary-600;
347
- @cnvs-sys-color-brand-accent-positive: @cnvs-brand-positive-600;
348
- @cnvs-sys-color-brand-accent-caution: @cnvs-brand-caution-400;
349
- @cnvs-sys-color-brand-accent-critical: @cnvs-brand-critical-600;
350
- @cnvs-sys-color-brand-accent-primary: @cnvs-brand-primary-600;
351
- @cnvs-sys-color-brand-surface-selected: @cnvs-brand-primary-a50;
352
- @cnvs-sys-color-brand-surface-positive-strong: @cnvs-brand-positive-a50;
353
- @cnvs-sys-color-brand-surface-positive-default: @cnvs-brand-positive-a25;
354
- @cnvs-sys-color-brand-surface-caution-strong: @cnvs-brand-caution-a50;
355
- @cnvs-sys-color-brand-surface-caution-default: @cnvs-brand-caution-a25;
356
- @cnvs-sys-color-brand-surface-critical-strong: @cnvs-brand-critical-a50;
357
- @cnvs-sys-color-brand-surface-critical-default: @cnvs-brand-critical-a25;
358
- @cnvs-sys-color-brand-surface-primary-strong: @cnvs-brand-primary-a50;
359
- @cnvs-sys-color-brand-surface-primary-default: @cnvs-brand-primary-a25;
360
- @cnvs-sys-color-brand-focus-caution-inner: @cnvs-brand-caution-400;
361
- @cnvs-sys-color-brand-focus-caution-outer: @cnvs-brand-caution-500;
362
- @cnvs-sys-color-brand-focus-critical: @cnvs-brand-critical-500;
363
- @cnvs-sys-color-brand-focus-primary: @cnvs-brand-primary-500;
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
364
364
  @cnvs-sys-color-shadow-default: @cnvs-sys-color-shadow-base; // Main shadow color
365
365
  @cnvs-sys-color-shadow-2: @cnvs-sys-color-shadow-ambient; // Second shadow color
366
366
  @cnvs-sys-color-shadow-1: @cnvs-sys-color-shadow-base; // First shadow color
@@ -383,14 +383,14 @@
383
383
  @cnvs-sys-padding-sm: @cnvs-base-size-150; // Compact padding, used in Rich Text Editor, or X-Small Buttons
384
384
  @cnvs-sys-padding-xs: @cnvs-base-size-100; // Horizontal padding on Input Fields
385
385
  @cnvs-sys-padding-xxs: @cnvs-base-size-50;
386
- @cnvs-sys-size-xxl: @cnvs-base-size-800; // Table Cell, Toast
387
- @cnvs-sys-size-xl: @cnvs-base-size-700; // Large size used in Large Buttons, Segmented Controls, Expandable Container Trigger, Tabs, and Avatar
388
- @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
389
- @cnvs-sys-size-md: @cnvs-base-size-500; // Small Buttons, Segmented Control, Tooltip, Avatar
390
- @cnvs-sys-size-sm: @cnvs-base-size-400; // X-Small Buttons, Pills, Checkboxes, Radio Buttons
391
- @cnvs-sys-size-xs: @cnvs-base-size-300; // Count Badge
392
- @cnvs-sys-size-xxs: @cnvs-base-size-250; // Switch Track
393
- @cnvs-sys-size-xxxs: @cnvs-base-size-200; // Switch Track
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.2",
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 21:04:49 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
package/scss/base/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 21:04:49 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
package/scss/brand/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 21:04:49 GMT
3
+ // Generated on Wed, 25 Feb 2026 21:44:04 GMT
4
4
 
5
5
  $cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
6
6
  $cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;
package/scss/brand/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 09 Feb 2026 21:04:49 GMT
3
+ // Generated on Wed, 25 Feb 2026 21:44:04 GMT
4
4
 
5
5
  $cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
6
6
  $cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;