@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.
- package/css/base/_variables.css +4 -4
- package/css/brand/_variables.css +1 -1
- package/css/system/_variables.css +33 -33
- package/dist/common-js/base/index.d.ts +1 -1
- package/dist/common-js/base/index.js +1 -1
- package/dist/common-js/brand/index.d.ts +1 -1
- package/dist/common-js/brand/index.js +1 -1
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +130 -130
- package/dist/common-js/system/index.js +24 -24
- package/dist/es6/base/index.d.ts +1 -1
- package/dist/es6/base/index.js +1 -1
- package/dist/es6/brand/index.d.ts +1 -1
- package/dist/es6/brand/index.js +1 -1
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +130 -130
- package/dist/es6/system/index.js +24 -24
- package/less/base/_variables.less +4 -4
- package/less/brand/_variables.less +1 -1
- package/less/system/_variables.less +33 -33
- package/package.json +1 -1
- package/scss/base/_variables.sass +4 -4
- package/scss/base/_variables.scss +4 -4
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/system/_variables.sass +33 -33
- package/scss/system/_variables.scss +33 -33
package/css/base/_variables.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 19 Sep 2025 22:18:52 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -321,9 +321,9 @@
|
|
|
321
321
|
--cnvs-base-palette-french-vanilla-600: var(--cnvs-base-palette-neutral-500);
|
|
322
322
|
--cnvs-base-palette-black-pepper-100: var(--cnvs-base-palette-neutral-500);
|
|
323
323
|
--cnvs-base-palette-black-pepper-200: var(--cnvs-base-palette-neutral-700);
|
|
324
|
-
--cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-
|
|
325
|
-
--cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-
|
|
326
|
-
--cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-
|
|
324
|
+
--cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-800);
|
|
325
|
+
--cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-900);
|
|
326
|
+
--cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-950);
|
|
327
327
|
--cnvs-base-palette-black-pepper-600: var(--cnvs-base-palette-neutral-1000);
|
|
328
328
|
--cnvs-base-palette-coconut-100: #F0EEEE;
|
|
329
329
|
--cnvs-base-palette-coconut-200: #e3dfdf;
|
package/css/brand/_variables.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 19 Sep 2025 22:18:52 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
--cnvs-sys-color-fg-info-soft: var(--cnvs-base-palette-blue-400);
|
|
83
83
|
--cnvs-sys-color-fg-info-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
|
|
84
84
|
--cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* AI icons and text */
|
|
85
|
-
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-
|
|
86
|
-
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-
|
|
87
|
-
--cnvs-sys-color-fg-caution-softer: var(--cnvs-base-palette-amber-
|
|
85
|
+
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Strong contrast */
|
|
86
|
+
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast */
|
|
87
|
+
--cnvs-sys-color-fg-caution-softer: var(--cnvs-base-palette-amber-500); /* Warning */
|
|
88
88
|
--cnvs-sys-color-fg-caution-stronger: var(--cnvs-base-palette-amber-975); /* Warning on hover */
|
|
89
89
|
--cnvs-sys-color-fg-caution-soft: var(--cnvs-base-palette-amber-700); /* Warning */
|
|
90
90
|
--cnvs-sys-color-fg-caution-strong: var(--cnvs-base-palette-amber-950); /* Warning on hover */
|
|
@@ -105,15 +105,15 @@
|
|
|
105
105
|
--cnvs-sys-color-fg-critical-default: var(--cnvs-base-palette-red-600); /* Error */
|
|
106
106
|
--cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse */
|
|
107
107
|
--cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-400); /* Disabled */
|
|
108
|
-
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-
|
|
109
|
-
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-
|
|
110
|
-
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-
|
|
108
|
+
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-950); /* Heading on hover */
|
|
109
|
+
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-900); /* Headings */
|
|
110
|
+
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-800); /* Body */
|
|
111
111
|
--cnvs-sys-color-icon-info-stronger: var(--cnvs-base-palette-blue-800); /* Stronger brand icon color */
|
|
112
112
|
--cnvs-sys-color-icon-info-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
|
|
113
113
|
--cnvs-sys-color-icon-info-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
|
|
114
114
|
--cnvs-sys-color-icon-disabled: var(--cnvs-base-palette-slate-400); /* Disabled icon color */
|
|
115
|
-
--cnvs-sys-color-icon-caution-softer: var(--cnvs-base-palette-amber-500); /*
|
|
116
|
-
--cnvs-sys-color-icon-caution-soft: var(--cnvs-base-palette-amber-700); /*
|
|
115
|
+
--cnvs-sys-color-icon-caution-softer: var(--cnvs-base-palette-amber-500); /* Softer caution icon color */
|
|
116
|
+
--cnvs-sys-color-icon-caution-soft: var(--cnvs-base-palette-amber-700); /* Soft caution icon color */
|
|
117
117
|
--cnvs-sys-color-icon-caution-stronger: var(--cnvs-base-palette-amber-975); /* Strong caution icon color */
|
|
118
118
|
--cnvs-sys-color-icon-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong caution icon color */
|
|
119
119
|
--cnvs-sys-color-icon-caution-default: var(--cnvs-base-palette-amber-900); /* Caution icon color */
|
|
@@ -133,9 +133,9 @@
|
|
|
133
133
|
--cnvs-sys-color-icon-primary-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
|
|
134
134
|
--cnvs-sys-color-icon-primary-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
|
|
135
135
|
--cnvs-sys-color-icon-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse icon color */
|
|
136
|
-
--cnvs-sys-color-icon-strong: var(--cnvs-base-palette-neutral-
|
|
136
|
+
--cnvs-sys-color-icon-strong: var(--cnvs-base-palette-neutral-900); /* Hover icon color */
|
|
137
137
|
--cnvs-sys-color-icon-soft: var(--cnvs-base-palette-slate-600); /* Disabled icon color */
|
|
138
|
-
--cnvs-sys-color-icon-default: var(--cnvs-base-palette-neutral-
|
|
138
|
+
--cnvs-sys-color-icon-default: var(--cnvs-base-palette-neutral-800); /* Default icon color */
|
|
139
139
|
--cnvs-sys-color-text-info-softer: var(--cnvs-base-palette-blue-200); /* Active links */
|
|
140
140
|
--cnvs-sys-color-text-info-soft: var(--cnvs-base-palette-blue-400); /* Active links */
|
|
141
141
|
--cnvs-sys-color-text-info-stronger: var(--cnvs-base-palette-blue-800); /* Active links */
|
|
@@ -147,9 +147,9 @@
|
|
|
147
147
|
--cnvs-sys-color-text-positive-strong: var(--cnvs-base-palette-green-700); /* Branded hover text */
|
|
148
148
|
--cnvs-sys-color-text-positive-default: var(--cnvs-base-palette-green-600); /* Branded text */
|
|
149
149
|
--cnvs-sys-color-text-ai: var(--cnvs-base-palette-blue-950);
|
|
150
|
-
--cnvs-sys-color-text-caution-softer: var(--cnvs-base-palette-amber-
|
|
151
|
-
--cnvs-sys-color-text-caution-stronger: var(--cnvs-base-palette-amber-975); /*
|
|
152
|
-
--cnvs-sys-color-text-caution-soft: var(--cnvs-base-palette-amber-
|
|
150
|
+
--cnvs-sys-color-text-caution-softer: var(--cnvs-base-palette-amber-200); /* Softer warning text */
|
|
151
|
+
--cnvs-sys-color-text-caution-stronger: var(--cnvs-base-palette-amber-975); /* Stronger warning text */
|
|
152
|
+
--cnvs-sys-color-text-caution-soft: var(--cnvs-base-palette-amber-400); /* Disabled warning text */
|
|
153
153
|
--cnvs-sys-color-text-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong warning text */
|
|
154
154
|
--cnvs-sys-color-text-caution-default: var(--cnvs-base-palette-amber-900); /* Warning text */
|
|
155
155
|
--cnvs-sys-color-text-primary-softer: var(--cnvs-base-palette-blue-200); /* Active links */
|
|
@@ -163,11 +163,11 @@
|
|
|
163
163
|
--cnvs-sys-color-text-critical-strong: var(--cnvs-base-palette-red-700); /* Error text */
|
|
164
164
|
--cnvs-sys-color-text-critical-default: var(--cnvs-base-palette-red-600); /* Error text */
|
|
165
165
|
--cnvs-sys-color-text-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse text color */
|
|
166
|
-
--cnvs-sys-color-text-stronger: var(--cnvs-base-palette-neutral-975); /* Display text */
|
|
167
|
-
--cnvs-sys-color-text-strong: var(--cnvs-base-palette-neutral-950); /* Heading text */
|
|
168
166
|
--cnvs-sys-color-text-hint: var(--cnvs-base-palette-slate-600); /* Hint text color */
|
|
169
167
|
--cnvs-sys-color-text-disabled: var(--cnvs-base-palette-slate-400); /* Disabled text color */
|
|
170
|
-
--cnvs-sys-color-text-
|
|
168
|
+
--cnvs-sys-color-text-stronger: var(--cnvs-base-palette-neutral-950); /* Display text */
|
|
169
|
+
--cnvs-sys-color-text-strong: var(--cnvs-base-palette-neutral-900); /* Heading text */
|
|
170
|
+
--cnvs-sys-color-text-default: var(--cnvs-base-palette-neutral-800); /* Body text */
|
|
171
171
|
--cnvs-sys-color-bg-info-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
|
|
172
172
|
--cnvs-sys-color-bg-info-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
|
|
173
173
|
--cnvs-sys-color-bg-info-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
|
|
@@ -178,45 +178,45 @@
|
|
|
178
178
|
--cnvs-sys-color-bg-ai-stronger: var(--cnvs-base-palette-blue-400); /* Active state on AI containers */
|
|
179
179
|
--cnvs-sys-color-bg-ai-strong: var(--cnvs-base-palette-blue-200); /* Hover on AI container */
|
|
180
180
|
--cnvs-sys-color-bg-ai-default: var(--cnvs-base-palette-blue-100); /* AI container */
|
|
181
|
-
--cnvs-sys-color-bg-critical-soft: var(--cnvs-base-palette-red-100); /* Disabled error background */
|
|
182
|
-
--cnvs-sys-color-bg-critical-softer: var(--cnvs-base-palette-red-50); /* Disabled error background */
|
|
183
181
|
--cnvs-sys-color-bg-critical-stronger: var(--cnvs-base-palette-red-800); /* Stronger error background */
|
|
184
182
|
--cnvs-sys-color-bg-critical-strong: var(--cnvs-base-palette-red-700); /* Strong error background */
|
|
185
|
-
--cnvs-sys-color-bg-critical-softest: var(--cnvs-base-palette-red-25); /* Input error background */
|
|
186
183
|
--cnvs-sys-color-bg-critical-default: var(--cnvs-base-palette-red-600); /* Default error background */
|
|
187
|
-
--cnvs-sys-color-bg-
|
|
188
|
-
--cnvs-sys-color-bg-
|
|
184
|
+
--cnvs-sys-color-bg-critical-soft: var(--cnvs-base-palette-red-100); /* Disabled error background */
|
|
185
|
+
--cnvs-sys-color-bg-critical-softer: var(--cnvs-base-palette-red-50); /* Disabled error background */
|
|
186
|
+
--cnvs-sys-color-bg-critical-softest: var(--cnvs-base-palette-red-25); /* Input error background */
|
|
189
187
|
--cnvs-sys-color-bg-caution-stronger: var(--cnvs-base-palette-amber-600); /* Stronger warning background */
|
|
190
188
|
--cnvs-sys-color-bg-caution-strong: var(--cnvs-base-palette-amber-500); /* Strong warning background */
|
|
191
|
-
--cnvs-sys-color-bg-caution-softest: var(--cnvs-base-palette-amber-25); /* Disabled warning background */
|
|
192
189
|
--cnvs-sys-color-bg-caution-default: var(--cnvs-base-palette-amber-400); /* Default warning background */
|
|
193
|
-
--cnvs-sys-color-bg-
|
|
194
|
-
--cnvs-sys-color-bg-
|
|
195
|
-
--cnvs-sys-color-bg-
|
|
190
|
+
--cnvs-sys-color-bg-caution-soft: var(--cnvs-base-palette-amber-100); /* Softer warning background */
|
|
191
|
+
--cnvs-sys-color-bg-caution-softer: var(--cnvs-base-palette-amber-50); /* Softer warning background */
|
|
192
|
+
--cnvs-sys-color-bg-caution-softest: var(--cnvs-base-palette-amber-25); /* Disabled warning background */
|
|
196
193
|
--cnvs-sys-color-bg-positive-stronger: var(--cnvs-base-palette-green-800); /* Active success background */
|
|
197
194
|
--cnvs-sys-color-bg-positive-strong: var(--cnvs-base-palette-green-700); /* Hover success background */
|
|
198
195
|
--cnvs-sys-color-bg-positive-default: var(--cnvs-base-palette-green-600); /* Disabled success background */
|
|
199
|
-
--cnvs-sys-color-bg-
|
|
200
|
-
--cnvs-sys-color-bg-
|
|
196
|
+
--cnvs-sys-color-bg-positive-soft: var(--cnvs-base-palette-green-100); /* Disabled success background */
|
|
197
|
+
--cnvs-sys-color-bg-positive-softer: var(--cnvs-base-palette-green-50); /* Surface success background */
|
|
198
|
+
--cnvs-sys-color-bg-positive-softest: var(--cnvs-base-palette-green-25); /* Lightest surface success background */
|
|
201
199
|
--cnvs-sys-color-bg-primary-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
|
|
202
200
|
--cnvs-sys-color-bg-primary-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
|
|
203
|
-
--cnvs-sys-color-bg-primary-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
204
201
|
--cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
|
|
202
|
+
--cnvs-sys-color-bg-primary-soft: var(--cnvs-base-palette-blue-100); /* Primary disabled */
|
|
203
|
+
--cnvs-sys-color-bg-primary-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
204
|
+
--cnvs-sys-color-bg-primary-softest: var(--cnvs-base-palette-blue-25); /* Surface */
|
|
205
205
|
--cnvs-sys-color-bg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Contrast backgrounds, like Secondary Buttons */
|
|
206
206
|
--cnvs-sys-color-bg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast backgrounds, like Secondary Buttons */
|
|
207
|
-
--cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
|
|
208
207
|
--cnvs-sys-color-bg-muted-strong: var(--cnvs-base-palette-slate-700);
|
|
209
208
|
--cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
|
|
210
209
|
--cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
|
|
211
|
-
--cnvs-sys-color-bg-
|
|
210
|
+
--cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
|
|
212
211
|
--cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
|
|
213
212
|
--cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
|
|
214
|
-
--cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
|
|
215
213
|
--cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-100); /* Surface hover, Secondary surfaces */
|
|
214
|
+
--cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
|
|
215
|
+
--cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-slate-25); /* Disabled inputs */
|
|
216
216
|
--cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
|
|
217
217
|
--cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); /* Overlay background */
|
|
218
218
|
--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 */
|
|
219
|
-
--cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-
|
|
219
|
+
--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 */
|
|
220
220
|
--cnvs-sys-color-bg-transparent-default: transparent; /* Transparent background */
|
|
221
221
|
--cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-0); /* Main background color */
|
|
222
222
|
--cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
|