@workday/canvas-tokens-web 4.1.0 → 4.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/base/_variables.css +157 -157
- package/css/brand/_variables.css +41 -41
- package/css/system/_variables.css +114 -114
- 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 +41 -41
- 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 +115 -115
- package/dist/common-js/system/index.js +1 -1
- package/dist/es6/base/index.d.ts +1 -1
- package/dist/es6/base/index.js +1 -1
- package/dist/es6/brand/index.d.ts +41 -41
- 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 +115 -115
- package/dist/es6/system/index.js +1 -1
- package/less/base/_variables.less +157 -157
- package/less/brand/_variables.less +41 -41
- package/less/system/_variables.less +114 -114
- package/package.json +1 -1
- package/scss/base/_variables.sass +157 -157
- package/scss/base/_variables.scss +157 -157
- package/scss/brand/_variables.sass +41 -41
- package/scss/brand/_variables.scss +41 -41
- package/scss/system/_variables.sass +114 -114
- package/scss/system/_variables.scss +114 -114
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 09 Feb 2026 21:04:49 GMT
|
|
4
4
|
|
|
5
5
|
@cnvs-sys-opacity-full: 1; // Dev only
|
|
6
6
|
@cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
@@ -75,7 +75,13 @@
|
|
|
75
75
|
@cnvs-sys-color-surface-popover: @cnvs-base-palette-neutral-0;
|
|
76
76
|
@cnvs-sys-color-surface-navigation: @cnvs-base-palette-slate-50; // Surface color for navigation elements, like the SidePanel or Top Nav Bar
|
|
77
77
|
@cnvs-sys-color-surface-default: @cnvs-base-palette-neutral-0; // Default surface background
|
|
78
|
+
@cnvs-sys-color-static-amber-soft: @cnvs-base-palette-amber-100; // Soft amber
|
|
79
|
+
@cnvs-sys-color-static-amber-strongest: @cnvs-base-palette-amber-950; // Stronger amber
|
|
78
80
|
@cnvs-sys-color-static-amber-softer: @cnvs-base-palette-amber-50; // Soft amber
|
|
81
|
+
@cnvs-sys-color-static-amber-stronger: @cnvs-base-palette-amber-600; // Stronger amber
|
|
82
|
+
@cnvs-sys-color-static-amber-strong: @cnvs-base-palette-amber-500; // Stronger amber
|
|
83
|
+
@cnvs-sys-color-static-amber-softest: @cnvs-base-palette-amber-25; // Soft amber
|
|
84
|
+
@cnvs-sys-color-static-amber-default: @cnvs-base-palette-amber-400; // amber
|
|
79
85
|
@cnvs-sys-color-static-gray-softer: @cnvs-base-palette-slate-100; // Light gray
|
|
80
86
|
@cnvs-sys-color-static-gray-softest: @cnvs-base-palette-slate-50; // Light gray
|
|
81
87
|
@cnvs-sys-color-static-gray-strongest: @cnvs-base-palette-slate-950; // Stronger gray
|
|
@@ -105,6 +111,7 @@
|
|
|
105
111
|
@cnvs-sys-color-static-blue-stronger: @cnvs-base-palette-blue-800; // Stronger blue
|
|
106
112
|
@cnvs-sys-color-static-blue-strong: @cnvs-base-palette-blue-700; // Stronger blue
|
|
107
113
|
@cnvs-sys-color-static-blue-softest: @cnvs-base-palette-blue-25; // Light blue
|
|
114
|
+
@cnvs-sys-color-static-blue-default: @cnvs-base-palette-blue-600; // Blue
|
|
108
115
|
@cnvs-sys-color-static-orange-strong: @cnvs-base-palette-amber-500;
|
|
109
116
|
@cnvs-sys-color-static-orange-soft: @cnvs-base-palette-amber-100;
|
|
110
117
|
@cnvs-sys-color-static-orange-default: @cnvs-base-palette-amber-400;
|
|
@@ -119,9 +126,18 @@
|
|
|
119
126
|
@cnvs-sys-color-border-info-default: @cnvs-base-palette-blue-500;
|
|
120
127
|
@cnvs-sys-color-border-strong: @cnvs-base-palette-slate-a300;
|
|
121
128
|
@cnvs-sys-color-border-default: @cnvs-base-palette-slate-a200;
|
|
129
|
+
@cnvs-sys-color-border-container: @cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
|
|
130
|
+
@cnvs-sys-color-border-primary-default: @cnvs-base-palette-blue-500; // Brand, Focus
|
|
131
|
+
@cnvs-sys-color-border-divider: @cnvs-base-palette-slate-200; // Dividers
|
|
132
|
+
@cnvs-sys-color-border-caution-strong: @cnvs-base-palette-amber-500; // Warning outer (box shadow)
|
|
133
|
+
@cnvs-sys-color-border-caution-default: @cnvs-base-palette-amber-400; // Warning inner
|
|
134
|
+
@cnvs-sys-color-border-critical-default: @cnvs-base-palette-red-500; // Error
|
|
122
135
|
@cnvs-sys-color-border-contrast-default: @cnvs-base-palette-neutral-a900;
|
|
136
|
+
@cnvs-sys-color-border-contrast-strong: @cnvs-base-palette-neutral-950; // Secondary Button Hover
|
|
123
137
|
@cnvs-sys-color-border-input-hover: @cnvs-base-palette-slate-a700; // Input hover
|
|
124
138
|
@cnvs-sys-color-border-input-default: @cnvs-base-palette-slate-a500; // Inputs
|
|
139
|
+
@cnvs-sys-color-border-input-inverse: @cnvs-base-palette-neutral-0; // Borders on checkboxes and radios
|
|
140
|
+
@cnvs-sys-color-border-input-strong: @cnvs-base-palette-slate-700; // Input hover
|
|
125
141
|
@cnvs-sys-color-border-input-disabled: @cnvs-base-palette-slate-400; // Disabled inputs
|
|
126
142
|
@cnvs-sys-color-border-ai: @cnvs-base-palette-blue-950; // Active state on AI borders
|
|
127
143
|
@cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-a950;
|
|
@@ -138,58 +154,146 @@
|
|
|
138
154
|
@cnvs-sys-color-fg-stronger: @cnvs-base-palette-neutral-a950; // Used on titles and stronger text and headings
|
|
139
155
|
@cnvs-sys-color-fg-strong: @cnvs-base-palette-neutral-a900; // Used on headings and strong text and icons
|
|
140
156
|
@cnvs-sys-color-fg-default: @cnvs-base-palette-neutral-a800; // Default color used on text and icons
|
|
157
|
+
@cnvs-sys-color-fg-positive-stronger: @cnvs-base-palette-green-800; // Error
|
|
158
|
+
@cnvs-sys-color-fg-positive-strong: @cnvs-base-palette-green-700; // Error
|
|
141
159
|
@cnvs-sys-color-fg-positive-soft: @cnvs-base-palette-green-400; // Error
|
|
142
|
-
@cnvs-sys-color-fg-positive-softer: @cnvs-base-palette-green-
|
|
160
|
+
@cnvs-sys-color-fg-positive-softer: @cnvs-base-palette-green-200; // Error
|
|
161
|
+
@cnvs-sys-color-fg-positive-default: @cnvs-base-palette-green-600; // Error
|
|
143
162
|
@cnvs-sys-color-fg-info-strong: @cnvs-base-palette-blue-700;
|
|
144
163
|
@cnvs-sys-color-fg-info-default: @cnvs-base-palette-blue-600;
|
|
164
|
+
@cnvs-sys-color-fg-info-stronger: @cnvs-base-palette-blue-800; // Links on hover
|
|
145
165
|
@cnvs-sys-color-fg-info-soft: @cnvs-base-palette-blue-400;
|
|
166
|
+
@cnvs-sys-color-fg-info-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
|
|
146
167
|
@cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-500; // Warning
|
|
147
168
|
@cnvs-sys-color-fg-caution-stronger: @cnvs-base-palette-amber-975; // Warning on hover
|
|
148
169
|
@cnvs-sys-color-fg-caution-soft: @cnvs-base-palette-amber-700; // Warning
|
|
170
|
+
@cnvs-sys-color-fg-caution-strong: @cnvs-base-palette-amber-950; // Warning on hover
|
|
171
|
+
@cnvs-sys-color-fg-caution-default: @cnvs-base-palette-amber-900; // Warning
|
|
172
|
+
@cnvs-sys-color-fg-primary-strong: @cnvs-base-palette-blue-700; // Links on hover
|
|
173
|
+
@cnvs-sys-color-fg-primary-stronger: @cnvs-base-palette-blue-800; // Links on hover
|
|
149
174
|
@cnvs-sys-color-fg-primary-softer: @cnvs-base-palette-blue-200; // Link Inverse, Disabled
|
|
150
175
|
@cnvs-sys-color-fg-primary-soft: @cnvs-base-palette-blue-400;
|
|
176
|
+
@cnvs-sys-color-fg-primary-default: @cnvs-base-palette-blue-600; // Branded text
|
|
151
177
|
@cnvs-sys-color-fg-muted-strong: @cnvs-base-palette-slate-a700; // Stronger color used for hint or placeholder text
|
|
152
178
|
@cnvs-sys-color-fg-muted-default: @cnvs-base-palette-slate-a600; // Used for hint and placeholder text
|
|
153
179
|
@cnvs-sys-color-fg-muted-soft: @cnvs-base-palette-slate-400; // Tab item foreground
|
|
180
|
+
@cnvs-sys-color-fg-muted-stronger: @cnvs-base-palette-slate-800;
|
|
154
181
|
@cnvs-sys-color-fg-critical-softer: @cnvs-base-palette-red-200; // Error
|
|
155
182
|
@cnvs-sys-color-fg-critical-soft: @cnvs-base-palette-red-400; // Error
|
|
156
183
|
@cnvs-sys-color-fg-critical-stronger: @cnvs-base-palette-red-800; // Error
|
|
184
|
+
@cnvs-sys-color-fg-critical-strong: @cnvs-base-palette-red-700; // Error
|
|
185
|
+
@cnvs-sys-color-fg-critical-default: @cnvs-base-palette-red-600; // Error
|
|
157
186
|
@cnvs-sys-color-icon-info-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
|
|
187
|
+
@cnvs-sys-color-icon-info-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
|
|
188
|
+
@cnvs-sys-color-icon-info-default: @cnvs-base-palette-blue-600; // Brand icon color
|
|
158
189
|
@cnvs-sys-color-icon-disabled: @cnvs-base-palette-slate-400; // Disabled icon color
|
|
159
190
|
@cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-500; // Softer caution icon color
|
|
191
|
+
@cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-700; // Soft caution icon color
|
|
192
|
+
@cnvs-sys-color-icon-caution-stronger: @cnvs-base-palette-amber-975; // Strong caution icon color
|
|
193
|
+
@cnvs-sys-color-icon-caution-strong: @cnvs-base-palette-amber-950; // Strong caution icon color
|
|
194
|
+
@cnvs-sys-color-icon-caution-default: @cnvs-base-palette-amber-900; // Caution icon color
|
|
160
195
|
@cnvs-sys-color-icon-critical-softer: @cnvs-base-palette-red-200; // Error icon color
|
|
161
196
|
@cnvs-sys-color-icon-critical-soft: @cnvs-base-palette-red-400; // Error icon color
|
|
162
197
|
@cnvs-sys-color-icon-critical-stronger: @cnvs-base-palette-red-800; // Error icon color
|
|
198
|
+
@cnvs-sys-color-icon-critical-strong: @cnvs-base-palette-red-700; // Error icon color
|
|
199
|
+
@cnvs-sys-color-icon-critical-default: @cnvs-base-palette-red-600; // Error icon color
|
|
163
200
|
@cnvs-sys-color-icon-positive-softer: @cnvs-base-palette-green-200; // Success icon color
|
|
164
201
|
@cnvs-sys-color-icon-positive-soft: @cnvs-base-palette-green-400; // Success icon color
|
|
202
|
+
@cnvs-sys-color-icon-positive-stronger: @cnvs-base-palette-green-800; // Success icon color
|
|
203
|
+
@cnvs-sys-color-icon-positive-strong: @cnvs-base-palette-green-700; // Success icon color
|
|
204
|
+
@cnvs-sys-color-icon-positive-default: @cnvs-base-palette-green-600; // Success icon color
|
|
165
205
|
@cnvs-sys-color-icon-primary-softer: @cnvs-base-palette-blue-200; // Stronger brand icon color
|
|
166
206
|
@cnvs-sys-color-icon-primary-soft: @cnvs-base-palette-blue-400; // Stronger brand icon color
|
|
207
|
+
@cnvs-sys-color-icon-primary-stronger: @cnvs-base-palette-blue-800; // Stronger brand icon color
|
|
208
|
+
@cnvs-sys-color-icon-primary-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
|
|
209
|
+
@cnvs-sys-color-icon-primary-default: @cnvs-base-palette-blue-600; // Brand icon color
|
|
167
210
|
@cnvs-sys-color-icon-inverse: @cnvs-base-palette-neutral-0; // Inverse icon color
|
|
211
|
+
@cnvs-sys-color-icon-strong: @cnvs-base-palette-neutral-900; // Hover icon color
|
|
212
|
+
@cnvs-sys-color-icon-soft: @cnvs-base-palette-slate-600; // Disabled icon color
|
|
213
|
+
@cnvs-sys-color-icon-default: @cnvs-base-palette-neutral-800; // Default icon color
|
|
168
214
|
@cnvs-sys-color-text-info-softer: @cnvs-base-palette-blue-200; // Active links
|
|
169
215
|
@cnvs-sys-color-text-info-soft: @cnvs-base-palette-blue-400; // Active links
|
|
216
|
+
@cnvs-sys-color-text-info-stronger: @cnvs-base-palette-blue-800; // Active links
|
|
217
|
+
@cnvs-sys-color-text-info-strong: @cnvs-base-palette-blue-700; // Branded hover text
|
|
218
|
+
@cnvs-sys-color-text-info-default: @cnvs-base-palette-blue-600; // Branded text
|
|
170
219
|
@cnvs-sys-color-text-positive-softer: @cnvs-base-palette-green-200; // Active links
|
|
171
220
|
@cnvs-sys-color-text-positive-soft: @cnvs-base-palette-green-400; // Active links
|
|
221
|
+
@cnvs-sys-color-text-positive-stronger: @cnvs-base-palette-green-800; // Active links
|
|
222
|
+
@cnvs-sys-color-text-positive-strong: @cnvs-base-palette-green-700; // Branded hover text
|
|
223
|
+
@cnvs-sys-color-text-positive-default: @cnvs-base-palette-green-600; // Branded text
|
|
172
224
|
@cnvs-sys-color-text-ai: @cnvs-base-palette-blue-950;
|
|
173
225
|
@cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-200; // Softer warning text
|
|
226
|
+
@cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; // Stronger warning text
|
|
174
227
|
@cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-400; // Disabled warning text
|
|
228
|
+
@cnvs-sys-color-text-caution-strong: @cnvs-base-palette-amber-950; // Strong warning text
|
|
229
|
+
@cnvs-sys-color-text-caution-default: @cnvs-base-palette-amber-900; // Warning text
|
|
175
230
|
@cnvs-sys-color-text-primary-softer: @cnvs-base-palette-blue-200; // Active links
|
|
176
231
|
@cnvs-sys-color-text-primary-soft: @cnvs-base-palette-blue-400; // Active links
|
|
232
|
+
@cnvs-sys-color-text-primary-stronger: @cnvs-base-palette-blue-800; // Active links
|
|
233
|
+
@cnvs-sys-color-text-primary-strong: @cnvs-base-palette-blue-700; // Branded hover text
|
|
234
|
+
@cnvs-sys-color-text-primary-default: @cnvs-base-palette-blue-600; // Branded text
|
|
177
235
|
@cnvs-sys-color-text-critical-softer: @cnvs-base-palette-red-200; // Error text
|
|
178
236
|
@cnvs-sys-color-text-critical-soft: @cnvs-base-palette-red-400; // Error text
|
|
237
|
+
@cnvs-sys-color-text-critical-stronger: @cnvs-base-palette-red-800; // Error text
|
|
238
|
+
@cnvs-sys-color-text-critical-strong: @cnvs-base-palette-red-700; // Error text
|
|
239
|
+
@cnvs-sys-color-text-critical-default: @cnvs-base-palette-red-600; // Error text
|
|
240
|
+
@cnvs-sys-color-text-inverse: @cnvs-base-palette-neutral-0; // Inverse text color
|
|
241
|
+
@cnvs-sys-color-text-hint: @cnvs-base-palette-slate-600; // Hint text color
|
|
179
242
|
@cnvs-sys-color-text-disabled: @cnvs-base-palette-slate-400; // Disabled text color
|
|
243
|
+
@cnvs-sys-color-text-stronger: @cnvs-base-palette-neutral-950; // Display text
|
|
244
|
+
@cnvs-sys-color-text-strong: @cnvs-base-palette-neutral-900; // Heading text
|
|
245
|
+
@cnvs-sys-color-text-default: @cnvs-base-palette-neutral-800; // Body text
|
|
180
246
|
@cnvs-sys-color-bg-default: @cnvs-base-palette-neutral-0; // Default page background
|
|
247
|
+
@cnvs-sys-color-bg-info-stronger: @cnvs-base-palette-blue-800; // Brand active background
|
|
181
248
|
@cnvs-sys-color-bg-info-strong: @cnvs-base-palette-blue-700; // Brand hover background
|
|
182
|
-
@cnvs-sys-color-bg-info-
|
|
183
|
-
@cnvs-sys-color-bg-
|
|
184
|
-
@cnvs-sys-color-bg-
|
|
185
|
-
@cnvs-sys-color-bg-
|
|
249
|
+
@cnvs-sys-color-bg-info-default: @cnvs-base-palette-blue-600; // Info color
|
|
250
|
+
@cnvs-sys-color-bg-info-soft: @cnvs-base-palette-blue-100; // Disabled
|
|
251
|
+
@cnvs-sys-color-bg-info-softer: @cnvs-base-palette-blue-50; // Select
|
|
252
|
+
@cnvs-sys-color-bg-info-softest: @cnvs-base-palette-blue-25; // Surface
|
|
253
|
+
@cnvs-sys-color-bg-ai-strongest: @cnvs-base-palette-blue-950; // AI surfaces
|
|
254
|
+
@cnvs-sys-color-bg-ai-stronger: @cnvs-base-palette-blue-400; // Active state on AI containers
|
|
255
|
+
@cnvs-sys-color-bg-ai-strong: @cnvs-base-palette-blue-200; // Hover on AI container
|
|
256
|
+
@cnvs-sys-color-bg-ai-default: @cnvs-base-palette-blue-100; // AI container
|
|
257
|
+
@cnvs-sys-color-bg-critical-stronger: @cnvs-base-palette-red-800; // Stronger error background
|
|
258
|
+
@cnvs-sys-color-bg-critical-strong: @cnvs-base-palette-red-700; // Strong error background
|
|
259
|
+
@cnvs-sys-color-bg-critical-default: @cnvs-base-palette-red-600; // Default error background
|
|
260
|
+
@cnvs-sys-color-bg-critical-soft: @cnvs-base-palette-red-100; // Disabled error background
|
|
261
|
+
@cnvs-sys-color-bg-critical-softer: @cnvs-base-palette-red-50; // Disabled error background
|
|
262
|
+
@cnvs-sys-color-bg-critical-softest: @cnvs-base-palette-red-25; // Input error background
|
|
263
|
+
@cnvs-sys-color-bg-caution-stronger: @cnvs-base-palette-amber-600; // Stronger warning background
|
|
264
|
+
@cnvs-sys-color-bg-caution-strong: @cnvs-base-palette-amber-500; // Strong warning background
|
|
265
|
+
@cnvs-sys-color-bg-caution-default: @cnvs-base-palette-amber-400; // Default warning background
|
|
266
|
+
@cnvs-sys-color-bg-caution-soft: @cnvs-base-palette-amber-100; // Softer warning background
|
|
267
|
+
@cnvs-sys-color-bg-caution-softer: @cnvs-base-palette-amber-50; // Softer warning background
|
|
268
|
+
@cnvs-sys-color-bg-caution-softest: @cnvs-base-palette-amber-25; // Disabled warning background
|
|
269
|
+
@cnvs-sys-color-bg-positive-stronger: @cnvs-base-palette-green-800; // Active success background
|
|
270
|
+
@cnvs-sys-color-bg-positive-strong: @cnvs-base-palette-green-700; // Hover success background
|
|
271
|
+
@cnvs-sys-color-bg-positive-default: @cnvs-base-palette-green-600; // Disabled success background
|
|
272
|
+
@cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-100; // Disabled success background
|
|
273
|
+
@cnvs-sys-color-bg-positive-softer: @cnvs-base-palette-green-50; // Surface success background
|
|
186
274
|
@cnvs-sys-color-bg-positive-softest: @cnvs-base-palette-green-25; // Lightest surface success background
|
|
187
|
-
@cnvs-sys-color-bg-
|
|
275
|
+
@cnvs-sys-color-bg-contrast-strong: @cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
|
|
276
|
+
@cnvs-sys-color-bg-contrast-default: @cnvs-base-palette-neutral-900; // Contrast backgrounds, like Secondary Buttons
|
|
277
|
+
@cnvs-sys-color-bg-muted-strong: @cnvs-base-palette-slate-700;
|
|
278
|
+
@cnvs-sys-color-bg-muted-default: @cnvs-base-palette-slate-600;
|
|
279
|
+
@cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-slate-500;
|
|
280
|
+
@cnvs-sys-color-bg-muted-softer: @cnvs-base-palette-slate-400;
|
|
188
281
|
@cnvs-sys-color-bg-alt-default: @cnvs-base-palette-slate-50; // The alternative page background
|
|
189
|
-
@cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-
|
|
282
|
+
@cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-slate-300; // Active state for segmented control, Pill
|
|
190
283
|
@cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-slate-200; // Active states
|
|
191
|
-
@cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-
|
|
192
|
-
@cnvs-sys-color-bg-
|
|
284
|
+
@cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-slate-50; // Alternative page background
|
|
285
|
+
@cnvs-sys-color-bg-alt-softer: @cnvs-base-palette-slate-25; // Disabled inputs
|
|
286
|
+
@cnvs-sys-color-bg-translucent: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-500); // Tooltip, Status Indicator
|
|
287
|
+
@cnvs-sys-color-bg-overlay: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-400); // Overlay background
|
|
288
|
+
@cnvs-sys-color-bg-transparent-stronger: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-250); // Inverse Secondary Button Active state
|
|
289
|
+
@cnvs-sys-color-bg-transparent-strong: oklch(from @cnvs-base-palette-neutral-1000 l c h / @cnvs-base-opacity-100); // Inverse Secondary Button Hover state
|
|
290
|
+
@cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
|
|
291
|
+
@cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blue-800; // Brand active background
|
|
292
|
+
@cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blue-700; // Brand hover background
|
|
293
|
+
@cnvs-sys-color-bg-primary-default: @cnvs-base-palette-blue-600; // Primary brand color
|
|
294
|
+
@cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-100; // Primary disabled
|
|
295
|
+
@cnvs-sys-color-bg-primary-softer: @cnvs-base-palette-blue-50; // Select
|
|
296
|
+
@cnvs-sys-color-bg-primary-softest: @cnvs-base-palette-blue-25; // Surface
|
|
193
297
|
@cnvs-sys-line-height-title-large: @cnvs-base-line-height-600;
|
|
194
298
|
@cnvs-sys-line-height-title-medium: @cnvs-base-line-height-500;
|
|
195
299
|
@cnvs-sys-line-height-title-small: @cnvs-base-line-height-400;
|
|
@@ -257,62 +361,9 @@
|
|
|
257
361
|
@cnvs-sys-color-brand-focus-caution-outer: @cnvs-brand-caution-500;
|
|
258
362
|
@cnvs-sys-color-brand-focus-critical: @cnvs-brand-critical-500;
|
|
259
363
|
@cnvs-sys-color-brand-focus-primary: @cnvs-brand-primary-500;
|
|
260
|
-
@cnvs-sys-color-static-amber-soft: @cnvs-sys-color-surface-warning-strong; // Soft amber
|
|
261
|
-
@cnvs-sys-color-static-amber-strongest: @cnvs-sys-color-fg-warning-strong; // Stronger amber
|
|
262
|
-
@cnvs-sys-color-static-amber-stronger: @cnvs-sys-color-accent-warning; // Stronger amber
|
|
263
|
-
@cnvs-sys-color-static-amber-strong: @cnvs-sys-color-accent-warning; // Stronger amber
|
|
264
|
-
@cnvs-sys-color-static-amber-softest: @cnvs-sys-color-surface-warning-default; // Soft amber
|
|
265
|
-
@cnvs-sys-color-static-amber-default: @cnvs-sys-color-accent-warning; // amber
|
|
266
|
-
@cnvs-sys-color-static-blue-default: @cnvs-sys-color-accent-info; // Blue
|
|
267
364
|
@cnvs-sys-color-shadow-default: @cnvs-sys-color-shadow-base; // Main shadow color
|
|
268
365
|
@cnvs-sys-color-shadow-2: @cnvs-sys-color-shadow-ambient; // Second shadow color
|
|
269
366
|
@cnvs-sys-color-shadow-1: @cnvs-sys-color-shadow-base; // First shadow color
|
|
270
|
-
@cnvs-sys-color-border-container: @cnvs-sys-color-border-strong; // Cards, Toasts, Surfaces
|
|
271
|
-
@cnvs-sys-color-border-divider: @cnvs-sys-color-border-default; // Dividers
|
|
272
|
-
@cnvs-sys-color-border-contrast-strong: @cnvs-sys-color-border-contrast-default; // Secondary Button Hover
|
|
273
|
-
@cnvs-sys-color-border-input-inverse: @cnvs-sys-color-border-inverse-default; // Borders on checkboxes and radios
|
|
274
|
-
@cnvs-sys-color-border-input-strong: @cnvs-sys-color-border-input-hover; // Input hover
|
|
275
|
-
@cnvs-sys-color-fg-positive-default: @cnvs-sys-color-fg-success-default; // Error
|
|
276
|
-
@cnvs-sys-color-fg-info-stronger: @cnvs-sys-color-fg-info-strong; // Links on hover
|
|
277
|
-
@cnvs-sys-color-fg-info-softer: @cnvs-sys-color-fg-ai; // Link Inverse, Disabled
|
|
278
|
-
@cnvs-sys-color-fg-caution-strong: @cnvs-sys-color-fg-contrast-default; // Warning on hover
|
|
279
|
-
@cnvs-sys-color-fg-muted-stronger: @cnvs-sys-color-fg-muted-strong;
|
|
280
|
-
@cnvs-sys-color-icon-info-strong: @cnvs-sys-color-fg-info-strong; // Stronger brand icon color
|
|
281
|
-
@cnvs-sys-color-icon-info-default: @cnvs-sys-color-fg-info-default; // Brand icon color
|
|
282
|
-
@cnvs-sys-color-icon-caution-default: @cnvs-sys-color-fg-contrast-default; // Caution icon color
|
|
283
|
-
@cnvs-sys-color-icon-strong: @cnvs-sys-color-fg-muted-strong; // Hover icon color
|
|
284
|
-
@cnvs-sys-color-icon-soft: @cnvs-sys-color-fg-muted-default; // Disabled icon color
|
|
285
|
-
@cnvs-sys-color-icon-default: @cnvs-sys-color-fg-default; // Default icon color
|
|
286
|
-
@cnvs-sys-color-text-info-stronger: @cnvs-sys-color-fg-info-strong; // Active links
|
|
287
|
-
@cnvs-sys-color-text-info-strong: @cnvs-sys-color-fg-info-strong; // Branded hover text
|
|
288
|
-
@cnvs-sys-color-text-info-default: @cnvs-sys-color-fg-info-default; // Branded text
|
|
289
|
-
@cnvs-sys-color-text-caution-stronger: @cnvs-sys-color-fg-contrast-strong; // Stronger warning text
|
|
290
|
-
@cnvs-sys-color-text-caution-strong: @cnvs-sys-color-fg-contrast-strong; // Strong warning text
|
|
291
|
-
@cnvs-sys-color-text-caution-default: @cnvs-sys-color-fg-contrast-default; // Warning text
|
|
292
|
-
@cnvs-sys-color-text-inverse: @cnvs-sys-color-fg-inverse; // Inverse text color
|
|
293
|
-
@cnvs-sys-color-text-hint: @cnvs-sys-color-fg-muted-default; // Hint text color
|
|
294
|
-
@cnvs-sys-color-text-stronger: @cnvs-sys-color-fg-strong; // Display text
|
|
295
|
-
@cnvs-sys-color-text-strong: @cnvs-sys-color-fg-strong; // Heading text
|
|
296
|
-
@cnvs-sys-color-text-default: @cnvs-sys-color-fg-default; // Body text
|
|
297
|
-
@cnvs-sys-color-bg-info-stronger: @cnvs-sys-color-accent-info; // Brand active background
|
|
298
|
-
@cnvs-sys-color-bg-info-default: @cnvs-sys-color-accent-info; // Info color
|
|
299
|
-
@cnvs-sys-color-bg-info-softer: @cnvs-sys-color-surface-info-strong; // Select
|
|
300
|
-
@cnvs-sys-color-bg-info-softest: @cnvs-sys-color-surface-info-default; // Surface
|
|
301
|
-
@cnvs-sys-color-bg-ai-strongest: @cnvs-sys-color-accent-ai; // AI surfaces
|
|
302
|
-
@cnvs-sys-color-bg-ai-stronger: @cnvs-sys-color-surface-ai-pressed; // Active state on AI containers
|
|
303
|
-
@cnvs-sys-color-bg-ai-strong: @cnvs-sys-color-surface-ai-hover; // Hover on AI container
|
|
304
|
-
@cnvs-sys-color-bg-ai-default: @cnvs-sys-color-surface-ai-default; // AI container
|
|
305
|
-
@cnvs-sys-color-bg-contrast-strong: @cnvs-sys-color-surface-contrast-strong; // Contrast backgrounds, like Secondary Buttons
|
|
306
|
-
@cnvs-sys-color-bg-contrast-default: @cnvs-sys-color-surface-contrast-default; // Contrast backgrounds, like Secondary Buttons
|
|
307
|
-
@cnvs-sys-color-bg-muted-strong: @cnvs-sys-color-accent-muted-default;
|
|
308
|
-
@cnvs-sys-color-bg-muted-default: @cnvs-sys-color-accent-muted-default;
|
|
309
|
-
@cnvs-sys-color-bg-muted-softer: @cnvs-sys-color-accent-muted-soft;
|
|
310
|
-
@cnvs-sys-color-bg-alt-softer: @cnvs-sys-color-surface-raised; // Disabled inputs
|
|
311
|
-
@cnvs-sys-color-bg-translucent: @cnvs-sys-color-surface-contrast-default; // Tooltip, Status Indicator
|
|
312
|
-
@cnvs-sys-color-bg-overlay: @cnvs-sys-color-surface-overlay-scrim; // Overlay background
|
|
313
|
-
@cnvs-sys-color-bg-transparent-stronger: @cnvs-sys-color-surface-overlay-pressed-default; // Inverse Secondary Button Active state
|
|
314
|
-
@cnvs-sys-color-bg-transparent-strong: @cnvs-sys-color-surface-overlay-hover-default; // Inverse Secondary Button Hover state
|
|
315
|
-
@cnvs-sys-color-bg-transparent-default: @cnvs-sys-color-surface-transparent; // Transparent background
|
|
316
367
|
@cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
|
|
317
368
|
@cnvs-sys-shape-zero: @cnvs-sys-shape-none; // Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
|
|
318
369
|
@cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
|
|
@@ -340,57 +391,6 @@
|
|
|
340
391
|
@cnvs-sys-size-xs: @cnvs-base-size-300; // Count Badge
|
|
341
392
|
@cnvs-sys-size-xxs: @cnvs-base-size-250; // Switch Track
|
|
342
393
|
@cnvs-sys-size-xxxs: @cnvs-base-size-200; // Switch Track
|
|
343
|
-
@cnvs-sys-color-border-primary-default: @cnvs-sys-color-brand-border-primary; // Brand, Focus
|
|
344
|
-
@cnvs-sys-color-border-caution-strong: @cnvs-sys-color-brand-focus-caution-outer; // Warning outer (box shadow)
|
|
345
|
-
@cnvs-sys-color-border-caution-default: @cnvs-sys-color-brand-focus-caution-inner; // Warning inner
|
|
346
|
-
@cnvs-sys-color-border-critical-default: @cnvs-sys-color-brand-border-critical; // Error
|
|
347
|
-
@cnvs-sys-color-fg-positive-stronger: @cnvs-sys-color-brand-fg-positive-strong; // Error
|
|
348
|
-
@cnvs-sys-color-fg-positive-strong: @cnvs-sys-color-brand-fg-positive-strong; // Error
|
|
349
|
-
@cnvs-sys-color-fg-caution-default: @cnvs-sys-color-brand-fg-caution-default; // Warning
|
|
350
|
-
@cnvs-sys-color-fg-primary-strong: @cnvs-sys-color-brand-fg-primary-strong; // Links on hover
|
|
351
|
-
@cnvs-sys-color-fg-primary-stronger: @cnvs-sys-color-brand-fg-primary-strong; // Links on hover
|
|
352
|
-
@cnvs-sys-color-fg-primary-default: @cnvs-sys-color-brand-fg-primary-default; // Branded text
|
|
353
|
-
@cnvs-sys-color-fg-critical-strong: @cnvs-sys-color-brand-fg-critical-strong; // Error
|
|
354
|
-
@cnvs-sys-color-fg-critical-default: @cnvs-sys-color-brand-fg-critical-default; // Error
|
|
355
|
-
@cnvs-sys-color-icon-caution-soft: @cnvs-sys-color-brand-fg-caution-default; // Soft caution icon color
|
|
356
|
-
@cnvs-sys-color-icon-caution-stronger: @cnvs-sys-color-brand-fg-caution-strong; // Strong caution icon color
|
|
357
|
-
@cnvs-sys-color-icon-caution-strong: @cnvs-sys-color-brand-fg-caution-default; // Strong caution icon color
|
|
358
|
-
@cnvs-sys-color-icon-critical-strong: @cnvs-sys-color-brand-fg-critical-strong; // Error icon color
|
|
359
|
-
@cnvs-sys-color-icon-critical-default: @cnvs-sys-color-brand-fg-critical-default; // Error icon color
|
|
360
|
-
@cnvs-sys-color-icon-positive-stronger: @cnvs-sys-color-brand-fg-positive-strong; // Success icon color
|
|
361
|
-
@cnvs-sys-color-icon-positive-strong: @cnvs-sys-color-brand-fg-positive-strong; // Success icon color
|
|
362
|
-
@cnvs-sys-color-icon-positive-default: @cnvs-sys-color-brand-fg-positive-default; // Success icon color
|
|
363
|
-
@cnvs-sys-color-icon-primary-stronger: @cnvs-sys-color-brand-fg-primary-strong; // Stronger brand icon color
|
|
364
|
-
@cnvs-sys-color-icon-primary-strong: @cnvs-sys-color-brand-fg-primary-strong; // Stronger brand icon color
|
|
365
|
-
@cnvs-sys-color-icon-primary-default: @cnvs-sys-color-brand-fg-primary-default; // Brand icon color
|
|
366
|
-
@cnvs-sys-color-text-positive-stronger: @cnvs-sys-color-brand-fg-positive-strong; // Active links
|
|
367
|
-
@cnvs-sys-color-text-positive-strong: @cnvs-sys-color-brand-fg-positive-strong; // Branded hover text
|
|
368
|
-
@cnvs-sys-color-text-positive-default: @cnvs-sys-color-brand-fg-positive-default; // Branded text
|
|
369
|
-
@cnvs-sys-color-text-primary-stronger: @cnvs-sys-color-brand-fg-primary-strong; // Active links
|
|
370
|
-
@cnvs-sys-color-text-primary-strong: @cnvs-sys-color-brand-fg-primary-strong; // Branded hover text
|
|
371
|
-
@cnvs-sys-color-text-primary-default: @cnvs-sys-color-brand-fg-primary-default; // Branded text
|
|
372
|
-
@cnvs-sys-color-text-critical-stronger: @cnvs-sys-color-brand-fg-critical-strong; // Error text
|
|
373
|
-
@cnvs-sys-color-text-critical-strong: @cnvs-sys-color-brand-fg-critical-strong; // Error text
|
|
374
|
-
@cnvs-sys-color-text-critical-default: @cnvs-sys-color-brand-fg-critical-default; // Error text
|
|
375
|
-
@cnvs-sys-color-bg-critical-stronger: @cnvs-sys-color-brand-accent-critical; // Stronger error background
|
|
376
|
-
@cnvs-sys-color-bg-critical-strong: @cnvs-sys-color-brand-accent-critical; // Strong error background
|
|
377
|
-
@cnvs-sys-color-bg-critical-default: @cnvs-sys-color-brand-accent-critical; // Default error background
|
|
378
|
-
@cnvs-sys-color-bg-critical-softer: @cnvs-sys-color-brand-surface-critical-strong; // Disabled error background
|
|
379
|
-
@cnvs-sys-color-bg-critical-softest: @cnvs-sys-color-brand-surface-critical-default; // Input error background
|
|
380
|
-
@cnvs-sys-color-bg-caution-stronger: @cnvs-sys-color-brand-accent-caution; // Stronger warning background
|
|
381
|
-
@cnvs-sys-color-bg-caution-strong: @cnvs-sys-color-brand-accent-caution; // Strong warning background
|
|
382
|
-
@cnvs-sys-color-bg-caution-default: @cnvs-sys-color-brand-accent-caution; // Default warning background
|
|
383
|
-
@cnvs-sys-color-bg-caution-softer: @cnvs-sys-color-brand-surface-caution-strong; // Softer warning background
|
|
384
|
-
@cnvs-sys-color-bg-caution-softest: @cnvs-sys-color-brand-surface-caution-default; // Disabled warning background
|
|
385
|
-
@cnvs-sys-color-bg-positive-stronger: @cnvs-sys-color-brand-accent-positive; // Active success background
|
|
386
|
-
@cnvs-sys-color-bg-positive-strong: @cnvs-sys-color-brand-accent-positive; // Hover success background
|
|
387
|
-
@cnvs-sys-color-bg-positive-default: @cnvs-sys-color-brand-accent-positive; // Disabled success background
|
|
388
|
-
@cnvs-sys-color-bg-positive-softer: @cnvs-sys-color-brand-surface-positive-strong; // Surface success background
|
|
389
|
-
@cnvs-sys-color-bg-primary-stronger: @cnvs-sys-color-brand-accent-primary; // Brand active background
|
|
390
|
-
@cnvs-sys-color-bg-primary-strong: @cnvs-sys-color-brand-accent-primary; // Brand hover background
|
|
391
|
-
@cnvs-sys-color-bg-primary-default: @cnvs-sys-color-brand-accent-primary; // Primary brand color
|
|
392
|
-
@cnvs-sys-color-bg-primary-softer: @cnvs-sys-color-brand-surface-primary-strong; // Select
|
|
393
|
-
@cnvs-sys-color-bg-primary-softest: @cnvs-sys-color-brand-surface-primary-default; // Surface
|
|
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;
|