@workday/canvas-tokens-web 3.0.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/css/base/_variables.css +4 -4
  2. package/css/brand/_variables.css +1 -1
  3. package/css/system/_variables.css +33 -33
  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 +130 -130
  11. package/dist/common-js/system/index.js +24 -24
  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 +130 -130
  19. package/dist/es6/system/index.js +24 -24
  20. package/less/base/_variables.less +4 -4
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +33 -33
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +4 -4
  25. package/scss/base/_variables.scss +4 -4
  26. package/scss/brand/_variables.sass +1 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +33 -33
  29. package/scss/system/_variables.scss +33 -33
package/less/system/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  @cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  @cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
@@ -74,9 +74,9 @@
74
74
  @cnvs-sys-color-fg-info-soft: @cnvs-base-palette-blue-400;
75
75
  @cnvs-sys-color-fg-info-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
76
76
  @cnvs-sys-color-fg-ai: @cnvs-base-palette-blue-950; // AI icons and text
77
- @cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-975; // Strong contrast
78
- @cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-950; // Contrast
79
- @cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-200; // Warning
77
+ @cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-950; // Strong contrast
78
+ @cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-900; // Contrast
79
+ @cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-500; // Warning
80
80
  @cnvs-sys-color-fg-caution-stronger: @cnvs-base-palette-amber-975; // Warning on hover
81
81
  @cnvs-sys-color-fg-caution-soft: @cnvs-base-palette-amber-700; // Warning
82
82
  @cnvs-sys-color-fg-caution-strong: @cnvs-base-palette-amber-950; // Warning on hover
@@ -97,15 +97,15 @@
97
97
  @cnvs-sys-color-fg-critical-default: @cnvs-base-palette-red-600; // Error
98
98
  @cnvs-sys-color-fg-inverse: @cnvs-base-palette-neutral-0; // Inverse
99
99
  @cnvs-sys-color-fg-disabled: @cnvs-base-palette-slate-400; // Disabled
100
- @cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-975; // Heading on hover
101
- @cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-950; // Headings
102
- @cnvs-sys-color-fg-default: @cnvs-base-palette-neutral-900; // Body
100
+ @cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-950; // Heading on hover
101
+ @cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-900; // Headings
102
+ @cnvs-sys-color-fg-default: @cnvs-base-palette-neutral-800; // Body
103
103
  @cnvs-sys-color-icon-info-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
104
104
  @cnvs-sys-color-icon-info-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
105
105
  @cnvs-sys-color-icon-info-default: @cnvs-base-palette-blue-600; // Brand icon color
106
106
  @cnvs-sys-color-icon-disabled: @cnvs-base-palette-slate-400; // Disabled icon color
107
- @cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-500; // Strong caution icon color
108
- @cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-700; // Strong caution icon color
107
+ @cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-500; // Softer caution icon color
108
+ @cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-700; // Soft caution icon color
109
109
  @cnvs-sys-color-icon-caution-stronger: @cnvs-base-palette-amber-975; // Strong caution icon color
110
110
  @cnvs-sys-color-icon-caution-strong: @cnvs-base-palette-amber-950; // Strong caution icon color
111
111
  @cnvs-sys-color-icon-caution-default: @cnvs-base-palette-amber-900; // Caution icon color
@@ -125,9 +125,9 @@
125
125
  @cnvs-sys-color-icon-primary-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
126
126
  @cnvs-sys-color-icon-primary-default: @cnvs-base-palette-blue-600; // Brand icon color
127
127
  @cnvs-sys-color-icon-inverse: @cnvs-base-palette-neutral-0; // Inverse icon color
128
- @cnvs-sys-color-icon-strong: @cnvs-base-palette-neutral-950; // Hover icon color
128
+ @cnvs-sys-color-icon-strong: @cnvs-base-palette-neutral-900; // Hover icon color
129
129
  @cnvs-sys-color-icon-soft: @cnvs-base-palette-slate-600; // Disabled icon color
130
- @cnvs-sys-color-icon-default: @cnvs-base-palette-neutral-900; // Default icon color
130
+ @cnvs-sys-color-icon-default: @cnvs-base-palette-neutral-800; // Default icon color
131
131
  @cnvs-sys-color-text-info-softer: @cnvs-base-palette-blue-200; // Active links
132
132
  @cnvs-sys-color-text-info-soft: @cnvs-base-palette-blue-400; // Active links
133
133
  @cnvs-sys-color-text-info-stronger: @cnvs-base-palette-blue-800; // Active links
@@ -139,9 +139,9 @@
139
139
  @cnvs-sys-color-text-positive-strong: @cnvs-base-palette-green-700; // Branded hover text
140
140
  @cnvs-sys-color-text-positive-default: @cnvs-base-palette-green-600; // Branded text
141
141
  @cnvs-sys-color-text-ai: @cnvs-base-palette-blue-950;
142
- @cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-500; // Strong warning text
143
- @cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; // Strong warning text
144
- @cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-700; // Strong warning text
142
+ @cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-200; // Softer warning text
143
+ @cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; // Stronger warning text
144
+ @cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-400; // Disabled warning text
145
145
  @cnvs-sys-color-text-caution-strong: @cnvs-base-palette-amber-950; // Strong warning text
146
146
  @cnvs-sys-color-text-caution-default: @cnvs-base-palette-amber-900; // Warning text
147
147
  @cnvs-sys-color-text-primary-softer: @cnvs-base-palette-blue-200; // Active links
@@ -155,11 +155,11 @@
155
155
  @cnvs-sys-color-text-critical-strong: @cnvs-base-palette-red-700; // Error text
156
156
  @cnvs-sys-color-text-critical-default: @cnvs-base-palette-red-600; // Error text
157
157
  @cnvs-sys-color-text-inverse: @cnvs-base-palette-neutral-0; // Inverse text color
158
- @cnvs-sys-color-text-stronger: @cnvs-base-palette-neutral-975; // Display text
159
- @cnvs-sys-color-text-strong: @cnvs-base-palette-neutral-950; // Heading text
160
158
  @cnvs-sys-color-text-hint: @cnvs-base-palette-slate-600; // Hint text color
161
159
  @cnvs-sys-color-text-disabled: @cnvs-base-palette-slate-400; // Disabled text color
162
- @cnvs-sys-color-text-default: @cnvs-base-palette-neutral-900; // Body text
160
+ @cnvs-sys-color-text-stronger: @cnvs-base-palette-neutral-950; // Display text
161
+ @cnvs-sys-color-text-strong: @cnvs-base-palette-neutral-900; // Heading text
162
+ @cnvs-sys-color-text-default: @cnvs-base-palette-neutral-800; // Body text
163
163
  @cnvs-sys-color-bg-info-stronger: @cnvs-base-palette-blue-800; // Brand active background
164
164
  @cnvs-sys-color-bg-info-strong: @cnvs-base-palette-blue-700; // Brand hover background
165
165
  @cnvs-sys-color-bg-info-default: @cnvs-base-palette-blue-600; // Primary brand color
@@ -170,45 +170,45 @@
170
170
  @cnvs-sys-color-bg-ai-stronger: @cnvs-base-palette-blue-400; // Active state on AI containers
171
171
  @cnvs-sys-color-bg-ai-strong: @cnvs-base-palette-blue-200; // Hover on AI container
172
172
  @cnvs-sys-color-bg-ai-default: @cnvs-base-palette-blue-100; // AI container
173
- @cnvs-sys-color-bg-critical-soft: @cnvs-base-palette-red-100; // Disabled error background
174
- @cnvs-sys-color-bg-critical-softer: @cnvs-base-palette-red-50; // Disabled error background
175
173
  @cnvs-sys-color-bg-critical-stronger: @cnvs-base-palette-red-800; // Stronger error background
176
174
  @cnvs-sys-color-bg-critical-strong: @cnvs-base-palette-red-700; // Strong error background
177
- @cnvs-sys-color-bg-critical-softest: @cnvs-base-palette-red-25; // Input error background
178
175
  @cnvs-sys-color-bg-critical-default: @cnvs-base-palette-red-600; // Default error background
179
- @cnvs-sys-color-bg-caution-soft: @cnvs-base-palette-amber-100; // Softer warning background
180
- @cnvs-sys-color-bg-caution-softer: @cnvs-base-palette-amber-50; // Softer warning background
176
+ @cnvs-sys-color-bg-critical-soft: @cnvs-base-palette-red-100; // Disabled error background
177
+ @cnvs-sys-color-bg-critical-softer: @cnvs-base-palette-red-50; // Disabled error background
178
+ @cnvs-sys-color-bg-critical-softest: @cnvs-base-palette-red-25; // Input error background
181
179
  @cnvs-sys-color-bg-caution-stronger: @cnvs-base-palette-amber-600; // Stronger warning background
182
180
  @cnvs-sys-color-bg-caution-strong: @cnvs-base-palette-amber-500; // Strong warning background
183
- @cnvs-sys-color-bg-caution-softest: @cnvs-base-palette-amber-25; // Disabled warning background
184
181
  @cnvs-sys-color-bg-caution-default: @cnvs-base-palette-amber-400; // Default warning background
185
- @cnvs-sys-color-bg-positive-softer: @cnvs-base-palette-green-50; // Surface success background
186
- @cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-100; // Disabled success background
187
- @cnvs-sys-color-bg-positive-softest: @cnvs-base-palette-green-25; // Lightest surface success background
182
+ @cnvs-sys-color-bg-caution-soft: @cnvs-base-palette-amber-100; // Softer warning background
183
+ @cnvs-sys-color-bg-caution-softer: @cnvs-base-palette-amber-50; // Softer warning background
184
+ @cnvs-sys-color-bg-caution-softest: @cnvs-base-palette-amber-25; // Disabled warning background
188
185
  @cnvs-sys-color-bg-positive-stronger: @cnvs-base-palette-green-800; // Active success background
189
186
  @cnvs-sys-color-bg-positive-strong: @cnvs-base-palette-green-700; // Hover success background
190
187
  @cnvs-sys-color-bg-positive-default: @cnvs-base-palette-green-600; // Disabled success background
191
- @cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-100; // Disabled
192
- @cnvs-sys-color-bg-primary-softest: @cnvs-base-palette-blue-25; // Surface
188
+ @cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-100; // Disabled success background
189
+ @cnvs-sys-color-bg-positive-softer: @cnvs-base-palette-green-50; // Surface success background
190
+ @cnvs-sys-color-bg-positive-softest: @cnvs-base-palette-green-25; // Lightest surface success background
193
191
  @cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blue-800; // Brand active background
194
192
  @cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blue-700; // Brand hover background
195
- @cnvs-sys-color-bg-primary-softer: @cnvs-base-palette-blue-50; // Select
196
193
  @cnvs-sys-color-bg-primary-default: @cnvs-base-palette-blue-600; // Primary brand color
194
+ @cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-100; // Primary disabled
195
+ @cnvs-sys-color-bg-primary-softer: @cnvs-base-palette-blue-50; // Select
196
+ @cnvs-sys-color-bg-primary-softest: @cnvs-base-palette-blue-25; // Surface
197
197
  @cnvs-sys-color-bg-contrast-strong: @cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
198
198
  @cnvs-sys-color-bg-contrast-default: @cnvs-base-palette-neutral-900; // Contrast backgrounds, like Secondary Buttons
199
- @cnvs-sys-color-bg-muted-softer: @cnvs-base-palette-slate-400;
200
199
  @cnvs-sys-color-bg-muted-strong: @cnvs-base-palette-slate-700;
201
200
  @cnvs-sys-color-bg-muted-default: @cnvs-base-palette-slate-600;
202
201
  @cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-slate-500;
203
- @cnvs-sys-color-bg-alt-softer: @cnvs-base-palette-slate-25; // Disabled inputs
202
+ @cnvs-sys-color-bg-muted-softer: @cnvs-base-palette-slate-400;
204
203
  @cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-300; // Active state for segmented control, Pill
205
204
  @cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-slate-200; // Active states
206
- @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
207
205
  @cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
206
+ @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
207
+ @cnvs-sys-color-bg-alt-softer: @cnvs-base-palette-slate-25; // Disabled inputs
208
208
  @cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); // Tooltip, Status Indicator
209
209
  @cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay background
210
210
  @cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); // Inverse Secondary Button Active state
211
- @cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse Secondary Button Hover state
211
+ @cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-100)); // Inverse Secondary Button Hover state
212
212
  @cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
213
  @cnvs-sys-color-bg-default: @cnvs-base-palette-neutral-0; // Main background color
214
214
  @cnvs-sys-font-weight-bold: @cnvs-base-font-weight-700;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "3.0.0",
3
+ "version": "3.1.1",
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 Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  $cnvs-base-palette-amber-25: oklch(0.9779 0.0214 95.33 / 1);
6
6
  $cnvs-base-palette-amber-50: oklch(0.969 0.0619 101.63 / 1);
@@ -319,9 +319,9 @@ $cnvs-base-palette-french-vanilla-500: var(--cnvs-base-palette-neutral-400);
319
319
  $cnvs-base-palette-french-vanilla-600: var(--cnvs-base-palette-neutral-500);
320
320
  $cnvs-base-palette-black-pepper-100: var(--cnvs-base-palette-neutral-500);
321
321
  $cnvs-base-palette-black-pepper-200: var(--cnvs-base-palette-neutral-700);
322
- $cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-900);
323
- $cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-950);
324
- $cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-975);
322
+ $cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-800);
323
+ $cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-900);
324
+ $cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-950);
325
325
  $cnvs-base-palette-black-pepper-600: var(--cnvs-base-palette-neutral-1000);
326
326
  $cnvs-base-palette-coconut-100: #F0EEEE;
327
327
  $cnvs-base-palette-coconut-200: #e3dfdf;
package/scss/base/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  $cnvs-base-palette-amber-25: oklch(0.9779 0.0214 95.33 / 1);
6
6
  $cnvs-base-palette-amber-50: oklch(0.969 0.0619 101.63 / 1);
@@ -319,9 +319,9 @@ $cnvs-base-palette-french-vanilla-500: var(--cnvs-base-palette-neutral-400);
319
319
  $cnvs-base-palette-french-vanilla-600: var(--cnvs-base-palette-neutral-500);
320
320
  $cnvs-base-palette-black-pepper-100: var(--cnvs-base-palette-neutral-500);
321
321
  $cnvs-base-palette-black-pepper-200: var(--cnvs-base-palette-neutral-700);
322
- $cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-900);
323
- $cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-950);
324
- $cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-975);
322
+ $cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-800);
323
+ $cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-900);
324
+ $cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-950);
325
325
  $cnvs-base-palette-black-pepper-600: var(--cnvs-base-palette-neutral-1000);
326
326
  $cnvs-base-palette-coconut-100: #F0EEEE;
327
327
  $cnvs-base-palette-coconut-200: #e3dfdf;
package/scss/brand/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
package/scss/brand/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
package/scss/system/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  $cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
@@ -74,9 +74,9 @@ $cnvs-sys-color-fg-info-default: $cnvs-base-palette-blue-600; // Links, Accent
74
74
  $cnvs-sys-color-fg-info-soft: $cnvs-base-palette-blue-400;
75
75
  $cnvs-sys-color-fg-info-softer: $cnvs-base-palette-blue-200; // Link Inverse, Disabled
76
76
  $cnvs-sys-color-fg-ai: $cnvs-base-palette-blue-950; // AI icons and text
77
- $cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-975; // Strong contrast
78
- $cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-950; // Contrast
79
- $cnvs-sys-color-fg-caution-softer: $cnvs-base-palette-amber-200; // Warning
77
+ $cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-950; // Strong contrast
78
+ $cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-900; // Contrast
79
+ $cnvs-sys-color-fg-caution-softer: $cnvs-base-palette-amber-500; // Warning
80
80
  $cnvs-sys-color-fg-caution-stronger: $cnvs-base-palette-amber-975; // Warning on hover
81
81
  $cnvs-sys-color-fg-caution-soft: $cnvs-base-palette-amber-700; // Warning
82
82
  $cnvs-sys-color-fg-caution-strong: $cnvs-base-palette-amber-950; // Warning on hover
@@ -97,15 +97,15 @@ $cnvs-sys-color-fg-critical-strong: $cnvs-base-palette-red-700; // Error
97
97
  $cnvs-sys-color-fg-critical-default: $cnvs-base-palette-red-600; // Error
98
98
  $cnvs-sys-color-fg-inverse: $cnvs-base-palette-neutral-0; // Inverse
99
99
  $cnvs-sys-color-fg-disabled: $cnvs-base-palette-slate-400; // Disabled
100
- $cnvs-sys-color-fg-stronger: $cnvs-base-palette-neutral-975; // Heading on hover
101
- $cnvs-sys-color-fg-strong: $cnvs-base-palette-neutral-950; // Headings
102
- $cnvs-sys-color-fg-default: $cnvs-base-palette-neutral-900; // Body
100
+ $cnvs-sys-color-fg-stronger: $cnvs-base-palette-neutral-950; // Heading on hover
101
+ $cnvs-sys-color-fg-strong: $cnvs-base-palette-neutral-900; // Headings
102
+ $cnvs-sys-color-fg-default: $cnvs-base-palette-neutral-800; // Body
103
103
  $cnvs-sys-color-icon-info-stronger: $cnvs-base-palette-blue-800; // Stronger brand icon color
104
104
  $cnvs-sys-color-icon-info-strong: $cnvs-base-palette-blue-700; // Stronger brand icon color
105
105
  $cnvs-sys-color-icon-info-default: $cnvs-base-palette-blue-600; // Brand icon color
106
106
  $cnvs-sys-color-icon-disabled: $cnvs-base-palette-slate-400; // Disabled icon color
107
- $cnvs-sys-color-icon-caution-softer: $cnvs-base-palette-amber-500; // Strong caution icon color
108
- $cnvs-sys-color-icon-caution-soft: $cnvs-base-palette-amber-700; // Strong caution icon color
107
+ $cnvs-sys-color-icon-caution-softer: $cnvs-base-palette-amber-500; // Softer caution icon color
108
+ $cnvs-sys-color-icon-caution-soft: $cnvs-base-palette-amber-700; // Soft caution icon color
109
109
  $cnvs-sys-color-icon-caution-stronger: $cnvs-base-palette-amber-975; // Strong caution icon color
110
110
  $cnvs-sys-color-icon-caution-strong: $cnvs-base-palette-amber-950; // Strong caution icon color
111
111
  $cnvs-sys-color-icon-caution-default: $cnvs-base-palette-amber-900; // Caution icon color
@@ -125,9 +125,9 @@ $cnvs-sys-color-icon-primary-stronger: $cnvs-base-palette-blue-800; // Stronger
125
125
  $cnvs-sys-color-icon-primary-strong: $cnvs-base-palette-blue-700; // Stronger brand icon color
126
126
  $cnvs-sys-color-icon-primary-default: $cnvs-base-palette-blue-600; // Brand icon color
127
127
  $cnvs-sys-color-icon-inverse: $cnvs-base-palette-neutral-0; // Inverse icon color
128
- $cnvs-sys-color-icon-strong: $cnvs-base-palette-neutral-950; // Hover icon color
128
+ $cnvs-sys-color-icon-strong: $cnvs-base-palette-neutral-900; // Hover icon color
129
129
  $cnvs-sys-color-icon-soft: $cnvs-base-palette-slate-600; // Disabled icon color
130
- $cnvs-sys-color-icon-default: $cnvs-base-palette-neutral-900; // Default icon color
130
+ $cnvs-sys-color-icon-default: $cnvs-base-palette-neutral-800; // Default icon color
131
131
  $cnvs-sys-color-text-info-softer: $cnvs-base-palette-blue-200; // Active links
132
132
  $cnvs-sys-color-text-info-soft: $cnvs-base-palette-blue-400; // Active links
133
133
  $cnvs-sys-color-text-info-stronger: $cnvs-base-palette-blue-800; // Active links
@@ -139,9 +139,9 @@ $cnvs-sys-color-text-positive-stronger: $cnvs-base-palette-green-800; // Active
139
139
  $cnvs-sys-color-text-positive-strong: $cnvs-base-palette-green-700; // Branded hover text
140
140
  $cnvs-sys-color-text-positive-default: $cnvs-base-palette-green-600; // Branded text
141
141
  $cnvs-sys-color-text-ai: $cnvs-base-palette-blue-950;
142
- $cnvs-sys-color-text-caution-softer: $cnvs-base-palette-amber-500; // Strong warning text
143
- $cnvs-sys-color-text-caution-stronger: $cnvs-base-palette-amber-975; // Strong warning text
144
- $cnvs-sys-color-text-caution-soft: $cnvs-base-palette-amber-700; // Strong warning text
142
+ $cnvs-sys-color-text-caution-softer: $cnvs-base-palette-amber-200; // Softer warning text
143
+ $cnvs-sys-color-text-caution-stronger: $cnvs-base-palette-amber-975; // Stronger warning text
144
+ $cnvs-sys-color-text-caution-soft: $cnvs-base-palette-amber-400; // Disabled warning text
145
145
  $cnvs-sys-color-text-caution-strong: $cnvs-base-palette-amber-950; // Strong warning text
146
146
  $cnvs-sys-color-text-caution-default: $cnvs-base-palette-amber-900; // Warning text
147
147
  $cnvs-sys-color-text-primary-softer: $cnvs-base-palette-blue-200; // Active links
@@ -155,11 +155,11 @@ $cnvs-sys-color-text-critical-stronger: $cnvs-base-palette-red-800; // Error tex
155
155
  $cnvs-sys-color-text-critical-strong: $cnvs-base-palette-red-700; // Error text
156
156
  $cnvs-sys-color-text-critical-default: $cnvs-base-palette-red-600; // Error text
157
157
  $cnvs-sys-color-text-inverse: $cnvs-base-palette-neutral-0; // Inverse text color
158
- $cnvs-sys-color-text-stronger: $cnvs-base-palette-neutral-975; // Display text
159
- $cnvs-sys-color-text-strong: $cnvs-base-palette-neutral-950; // Heading text
160
158
  $cnvs-sys-color-text-hint: $cnvs-base-palette-slate-600; // Hint text color
161
159
  $cnvs-sys-color-text-disabled: $cnvs-base-palette-slate-400; // Disabled text color
162
- $cnvs-sys-color-text-default: $cnvs-base-palette-neutral-900; // Body text
160
+ $cnvs-sys-color-text-stronger: $cnvs-base-palette-neutral-950; // Display text
161
+ $cnvs-sys-color-text-strong: $cnvs-base-palette-neutral-900; // Heading text
162
+ $cnvs-sys-color-text-default: $cnvs-base-palette-neutral-800; // Body text
163
163
  $cnvs-sys-color-bg-info-stronger: $cnvs-base-palette-blue-800; // Brand active background
164
164
  $cnvs-sys-color-bg-info-strong: $cnvs-base-palette-blue-700; // Brand hover background
165
165
  $cnvs-sys-color-bg-info-default: $cnvs-base-palette-blue-600; // Primary brand color
@@ -170,45 +170,45 @@ $cnvs-sys-color-bg-ai-strongest: $cnvs-base-palette-blue-950; // AI surfaces
170
170
  $cnvs-sys-color-bg-ai-stronger: $cnvs-base-palette-blue-400; // Active state on AI containers
171
171
  $cnvs-sys-color-bg-ai-strong: $cnvs-base-palette-blue-200; // Hover on AI container
172
172
  $cnvs-sys-color-bg-ai-default: $cnvs-base-palette-blue-100; // AI container
173
- $cnvs-sys-color-bg-critical-soft: $cnvs-base-palette-red-100; // Disabled error background
174
- $cnvs-sys-color-bg-critical-softer: $cnvs-base-palette-red-50; // Disabled error background
175
173
  $cnvs-sys-color-bg-critical-stronger: $cnvs-base-palette-red-800; // Stronger error background
176
174
  $cnvs-sys-color-bg-critical-strong: $cnvs-base-palette-red-700; // Strong error background
177
- $cnvs-sys-color-bg-critical-softest: $cnvs-base-palette-red-25; // Input error background
178
175
  $cnvs-sys-color-bg-critical-default: $cnvs-base-palette-red-600; // Default error background
179
- $cnvs-sys-color-bg-caution-soft: $cnvs-base-palette-amber-100; // Softer warning background
180
- $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-amber-50; // Softer warning background
176
+ $cnvs-sys-color-bg-critical-soft: $cnvs-base-palette-red-100; // Disabled error background
177
+ $cnvs-sys-color-bg-critical-softer: $cnvs-base-palette-red-50; // Disabled error background
178
+ $cnvs-sys-color-bg-critical-softest: $cnvs-base-palette-red-25; // Input error background
181
179
  $cnvs-sys-color-bg-caution-stronger: $cnvs-base-palette-amber-600; // Stronger warning background
182
180
  $cnvs-sys-color-bg-caution-strong: $cnvs-base-palette-amber-500; // Strong warning background
183
- $cnvs-sys-color-bg-caution-softest: $cnvs-base-palette-amber-25; // Disabled warning background
184
181
  $cnvs-sys-color-bg-caution-default: $cnvs-base-palette-amber-400; // Default warning background
185
- $cnvs-sys-color-bg-positive-softer: $cnvs-base-palette-green-50; // Surface success background
186
- $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-100; // Disabled success background
187
- $cnvs-sys-color-bg-positive-softest: $cnvs-base-palette-green-25; // Lightest surface success background
182
+ $cnvs-sys-color-bg-caution-soft: $cnvs-base-palette-amber-100; // Softer warning background
183
+ $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-amber-50; // Softer warning background
184
+ $cnvs-sys-color-bg-caution-softest: $cnvs-base-palette-amber-25; // Disabled warning background
188
185
  $cnvs-sys-color-bg-positive-stronger: $cnvs-base-palette-green-800; // Active success background
189
186
  $cnvs-sys-color-bg-positive-strong: $cnvs-base-palette-green-700; // Hover success background
190
187
  $cnvs-sys-color-bg-positive-default: $cnvs-base-palette-green-600; // Disabled success background
191
- $cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blue-100; // Disabled
192
- $cnvs-sys-color-bg-primary-softest: $cnvs-base-palette-blue-25; // Surface
188
+ $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-100; // Disabled success background
189
+ $cnvs-sys-color-bg-positive-softer: $cnvs-base-palette-green-50; // Surface success background
190
+ $cnvs-sys-color-bg-positive-softest: $cnvs-base-palette-green-25; // Lightest surface success background
193
191
  $cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blue-800; // Brand active background
194
192
  $cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blue-700; // Brand hover background
195
- $cnvs-sys-color-bg-primary-softer: $cnvs-base-palette-blue-50; // Select
196
193
  $cnvs-sys-color-bg-primary-default: $cnvs-base-palette-blue-600; // Primary brand color
194
+ $cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blue-100; // Primary disabled
195
+ $cnvs-sys-color-bg-primary-softer: $cnvs-base-palette-blue-50; // Select
196
+ $cnvs-sys-color-bg-primary-softest: $cnvs-base-palette-blue-25; // Surface
197
197
  $cnvs-sys-color-bg-contrast-strong: $cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
198
198
  $cnvs-sys-color-bg-contrast-default: $cnvs-base-palette-neutral-900; // Contrast backgrounds, like Secondary Buttons
199
- $cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-slate-400;
200
199
  $cnvs-sys-color-bg-muted-strong: $cnvs-base-palette-slate-700;
201
200
  $cnvs-sys-color-bg-muted-default: $cnvs-base-palette-slate-600;
202
201
  $cnvs-sys-color-bg-muted-soft: $cnvs-base-palette-slate-500;
203
- $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-slate-25; // Disabled inputs
202
+ $cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-slate-400;
204
203
  $cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-slate-300; // Active state for segmented control, Pill
205
204
  $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
206
- $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
205
  $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
206
+ $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
+ $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-slate-25; // Disabled inputs
208
208
  $cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); // Tooltip, Status Indicator
209
209
  $cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay background
210
210
  $cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); // Inverse Secondary Button Active state
211
- $cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse Secondary Button Hover state
211
+ $cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-100)); // Inverse Secondary Button Hover state
212
212
  $cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
213
  $cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
214
214
  $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
package/scss/system/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 10 Sep 2025 15:22:47 GMT
3
+ // Generated on Fri, 19 Sep 2025 22:18:52 GMT
4
4
 
5
5
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  $cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
@@ -74,9 +74,9 @@ $cnvs-sys-color-fg-info-default: $cnvs-base-palette-blue-600; // Links, Accent
74
74
  $cnvs-sys-color-fg-info-soft: $cnvs-base-palette-blue-400;
75
75
  $cnvs-sys-color-fg-info-softer: $cnvs-base-palette-blue-200; // Link Inverse, Disabled
76
76
  $cnvs-sys-color-fg-ai: $cnvs-base-palette-blue-950; // AI icons and text
77
- $cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-975; // Strong contrast
78
- $cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-950; // Contrast
79
- $cnvs-sys-color-fg-caution-softer: $cnvs-base-palette-amber-200; // Warning
77
+ $cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-950; // Strong contrast
78
+ $cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-900; // Contrast
79
+ $cnvs-sys-color-fg-caution-softer: $cnvs-base-palette-amber-500; // Warning
80
80
  $cnvs-sys-color-fg-caution-stronger: $cnvs-base-palette-amber-975; // Warning on hover
81
81
  $cnvs-sys-color-fg-caution-soft: $cnvs-base-palette-amber-700; // Warning
82
82
  $cnvs-sys-color-fg-caution-strong: $cnvs-base-palette-amber-950; // Warning on hover
@@ -97,15 +97,15 @@ $cnvs-sys-color-fg-critical-strong: $cnvs-base-palette-red-700; // Error
97
97
  $cnvs-sys-color-fg-critical-default: $cnvs-base-palette-red-600; // Error
98
98
  $cnvs-sys-color-fg-inverse: $cnvs-base-palette-neutral-0; // Inverse
99
99
  $cnvs-sys-color-fg-disabled: $cnvs-base-palette-slate-400; // Disabled
100
- $cnvs-sys-color-fg-stronger: $cnvs-base-palette-neutral-975; // Heading on hover
101
- $cnvs-sys-color-fg-strong: $cnvs-base-palette-neutral-950; // Headings
102
- $cnvs-sys-color-fg-default: $cnvs-base-palette-neutral-900; // Body
100
+ $cnvs-sys-color-fg-stronger: $cnvs-base-palette-neutral-950; // Heading on hover
101
+ $cnvs-sys-color-fg-strong: $cnvs-base-palette-neutral-900; // Headings
102
+ $cnvs-sys-color-fg-default: $cnvs-base-palette-neutral-800; // Body
103
103
  $cnvs-sys-color-icon-info-stronger: $cnvs-base-palette-blue-800; // Stronger brand icon color
104
104
  $cnvs-sys-color-icon-info-strong: $cnvs-base-palette-blue-700; // Stronger brand icon color
105
105
  $cnvs-sys-color-icon-info-default: $cnvs-base-palette-blue-600; // Brand icon color
106
106
  $cnvs-sys-color-icon-disabled: $cnvs-base-palette-slate-400; // Disabled icon color
107
- $cnvs-sys-color-icon-caution-softer: $cnvs-base-palette-amber-500; // Strong caution icon color
108
- $cnvs-sys-color-icon-caution-soft: $cnvs-base-palette-amber-700; // Strong caution icon color
107
+ $cnvs-sys-color-icon-caution-softer: $cnvs-base-palette-amber-500; // Softer caution icon color
108
+ $cnvs-sys-color-icon-caution-soft: $cnvs-base-palette-amber-700; // Soft caution icon color
109
109
  $cnvs-sys-color-icon-caution-stronger: $cnvs-base-palette-amber-975; // Strong caution icon color
110
110
  $cnvs-sys-color-icon-caution-strong: $cnvs-base-palette-amber-950; // Strong caution icon color
111
111
  $cnvs-sys-color-icon-caution-default: $cnvs-base-palette-amber-900; // Caution icon color
@@ -125,9 +125,9 @@ $cnvs-sys-color-icon-primary-stronger: $cnvs-base-palette-blue-800; // Stronger
125
125
  $cnvs-sys-color-icon-primary-strong: $cnvs-base-palette-blue-700; // Stronger brand icon color
126
126
  $cnvs-sys-color-icon-primary-default: $cnvs-base-palette-blue-600; // Brand icon color
127
127
  $cnvs-sys-color-icon-inverse: $cnvs-base-palette-neutral-0; // Inverse icon color
128
- $cnvs-sys-color-icon-strong: $cnvs-base-palette-neutral-950; // Hover icon color
128
+ $cnvs-sys-color-icon-strong: $cnvs-base-palette-neutral-900; // Hover icon color
129
129
  $cnvs-sys-color-icon-soft: $cnvs-base-palette-slate-600; // Disabled icon color
130
- $cnvs-sys-color-icon-default: $cnvs-base-palette-neutral-900; // Default icon color
130
+ $cnvs-sys-color-icon-default: $cnvs-base-palette-neutral-800; // Default icon color
131
131
  $cnvs-sys-color-text-info-softer: $cnvs-base-palette-blue-200; // Active links
132
132
  $cnvs-sys-color-text-info-soft: $cnvs-base-palette-blue-400; // Active links
133
133
  $cnvs-sys-color-text-info-stronger: $cnvs-base-palette-blue-800; // Active links
@@ -139,9 +139,9 @@ $cnvs-sys-color-text-positive-stronger: $cnvs-base-palette-green-800; // Active
139
139
  $cnvs-sys-color-text-positive-strong: $cnvs-base-palette-green-700; // Branded hover text
140
140
  $cnvs-sys-color-text-positive-default: $cnvs-base-palette-green-600; // Branded text
141
141
  $cnvs-sys-color-text-ai: $cnvs-base-palette-blue-950;
142
- $cnvs-sys-color-text-caution-softer: $cnvs-base-palette-amber-500; // Strong warning text
143
- $cnvs-sys-color-text-caution-stronger: $cnvs-base-palette-amber-975; // Strong warning text
144
- $cnvs-sys-color-text-caution-soft: $cnvs-base-palette-amber-700; // Strong warning text
142
+ $cnvs-sys-color-text-caution-softer: $cnvs-base-palette-amber-200; // Softer warning text
143
+ $cnvs-sys-color-text-caution-stronger: $cnvs-base-palette-amber-975; // Stronger warning text
144
+ $cnvs-sys-color-text-caution-soft: $cnvs-base-palette-amber-400; // Disabled warning text
145
145
  $cnvs-sys-color-text-caution-strong: $cnvs-base-palette-amber-950; // Strong warning text
146
146
  $cnvs-sys-color-text-caution-default: $cnvs-base-palette-amber-900; // Warning text
147
147
  $cnvs-sys-color-text-primary-softer: $cnvs-base-palette-blue-200; // Active links
@@ -155,11 +155,11 @@ $cnvs-sys-color-text-critical-stronger: $cnvs-base-palette-red-800; // Error tex
155
155
  $cnvs-sys-color-text-critical-strong: $cnvs-base-palette-red-700; // Error text
156
156
  $cnvs-sys-color-text-critical-default: $cnvs-base-palette-red-600; // Error text
157
157
  $cnvs-sys-color-text-inverse: $cnvs-base-palette-neutral-0; // Inverse text color
158
- $cnvs-sys-color-text-stronger: $cnvs-base-palette-neutral-975; // Display text
159
- $cnvs-sys-color-text-strong: $cnvs-base-palette-neutral-950; // Heading text
160
158
  $cnvs-sys-color-text-hint: $cnvs-base-palette-slate-600; // Hint text color
161
159
  $cnvs-sys-color-text-disabled: $cnvs-base-palette-slate-400; // Disabled text color
162
- $cnvs-sys-color-text-default: $cnvs-base-palette-neutral-900; // Body text
160
+ $cnvs-sys-color-text-stronger: $cnvs-base-palette-neutral-950; // Display text
161
+ $cnvs-sys-color-text-strong: $cnvs-base-palette-neutral-900; // Heading text
162
+ $cnvs-sys-color-text-default: $cnvs-base-palette-neutral-800; // Body text
163
163
  $cnvs-sys-color-bg-info-stronger: $cnvs-base-palette-blue-800; // Brand active background
164
164
  $cnvs-sys-color-bg-info-strong: $cnvs-base-palette-blue-700; // Brand hover background
165
165
  $cnvs-sys-color-bg-info-default: $cnvs-base-palette-blue-600; // Primary brand color
@@ -170,45 +170,45 @@ $cnvs-sys-color-bg-ai-strongest: $cnvs-base-palette-blue-950; // AI surfaces
170
170
  $cnvs-sys-color-bg-ai-stronger: $cnvs-base-palette-blue-400; // Active state on AI containers
171
171
  $cnvs-sys-color-bg-ai-strong: $cnvs-base-palette-blue-200; // Hover on AI container
172
172
  $cnvs-sys-color-bg-ai-default: $cnvs-base-palette-blue-100; // AI container
173
- $cnvs-sys-color-bg-critical-soft: $cnvs-base-palette-red-100; // Disabled error background
174
- $cnvs-sys-color-bg-critical-softer: $cnvs-base-palette-red-50; // Disabled error background
175
173
  $cnvs-sys-color-bg-critical-stronger: $cnvs-base-palette-red-800; // Stronger error background
176
174
  $cnvs-sys-color-bg-critical-strong: $cnvs-base-palette-red-700; // Strong error background
177
- $cnvs-sys-color-bg-critical-softest: $cnvs-base-palette-red-25; // Input error background
178
175
  $cnvs-sys-color-bg-critical-default: $cnvs-base-palette-red-600; // Default error background
179
- $cnvs-sys-color-bg-caution-soft: $cnvs-base-palette-amber-100; // Softer warning background
180
- $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-amber-50; // Softer warning background
176
+ $cnvs-sys-color-bg-critical-soft: $cnvs-base-palette-red-100; // Disabled error background
177
+ $cnvs-sys-color-bg-critical-softer: $cnvs-base-palette-red-50; // Disabled error background
178
+ $cnvs-sys-color-bg-critical-softest: $cnvs-base-palette-red-25; // Input error background
181
179
  $cnvs-sys-color-bg-caution-stronger: $cnvs-base-palette-amber-600; // Stronger warning background
182
180
  $cnvs-sys-color-bg-caution-strong: $cnvs-base-palette-amber-500; // Strong warning background
183
- $cnvs-sys-color-bg-caution-softest: $cnvs-base-palette-amber-25; // Disabled warning background
184
181
  $cnvs-sys-color-bg-caution-default: $cnvs-base-palette-amber-400; // Default warning background
185
- $cnvs-sys-color-bg-positive-softer: $cnvs-base-palette-green-50; // Surface success background
186
- $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-100; // Disabled success background
187
- $cnvs-sys-color-bg-positive-softest: $cnvs-base-palette-green-25; // Lightest surface success background
182
+ $cnvs-sys-color-bg-caution-soft: $cnvs-base-palette-amber-100; // Softer warning background
183
+ $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-amber-50; // Softer warning background
184
+ $cnvs-sys-color-bg-caution-softest: $cnvs-base-palette-amber-25; // Disabled warning background
188
185
  $cnvs-sys-color-bg-positive-stronger: $cnvs-base-palette-green-800; // Active success background
189
186
  $cnvs-sys-color-bg-positive-strong: $cnvs-base-palette-green-700; // Hover success background
190
187
  $cnvs-sys-color-bg-positive-default: $cnvs-base-palette-green-600; // Disabled success background
191
- $cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blue-100; // Disabled
192
- $cnvs-sys-color-bg-primary-softest: $cnvs-base-palette-blue-25; // Surface
188
+ $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-100; // Disabled success background
189
+ $cnvs-sys-color-bg-positive-softer: $cnvs-base-palette-green-50; // Surface success background
190
+ $cnvs-sys-color-bg-positive-softest: $cnvs-base-palette-green-25; // Lightest surface success background
193
191
  $cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blue-800; // Brand active background
194
192
  $cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blue-700; // Brand hover background
195
- $cnvs-sys-color-bg-primary-softer: $cnvs-base-palette-blue-50; // Select
196
193
  $cnvs-sys-color-bg-primary-default: $cnvs-base-palette-blue-600; // Primary brand color
194
+ $cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blue-100; // Primary disabled
195
+ $cnvs-sys-color-bg-primary-softer: $cnvs-base-palette-blue-50; // Select
196
+ $cnvs-sys-color-bg-primary-softest: $cnvs-base-palette-blue-25; // Surface
197
197
  $cnvs-sys-color-bg-contrast-strong: $cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
198
198
  $cnvs-sys-color-bg-contrast-default: $cnvs-base-palette-neutral-900; // Contrast backgrounds, like Secondary Buttons
199
- $cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-slate-400;
200
199
  $cnvs-sys-color-bg-muted-strong: $cnvs-base-palette-slate-700;
201
200
  $cnvs-sys-color-bg-muted-default: $cnvs-base-palette-slate-600;
202
201
  $cnvs-sys-color-bg-muted-soft: $cnvs-base-palette-slate-500;
203
- $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-slate-25; // Disabled inputs
202
+ $cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-slate-400;
204
203
  $cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-slate-300; // Active state for segmented control, Pill
205
204
  $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
206
- $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
205
  $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-slate-100; // Surface hover, Secondary surfaces
206
+ $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
207
+ $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-slate-25; // Disabled inputs
208
208
  $cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); // Tooltip, Status Indicator
209
209
  $cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); // Overlay background
210
210
  $cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); // Inverse Secondary Button Active state
211
- $cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-200)); // Inverse Secondary Button Hover state
211
+ $cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-100)); // Inverse Secondary Button Hover state
212
212
  $cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
213
213
  $cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
214
214
  $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;