@workday/canvas-tokens-web 3.1.0 → 3.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 +1 -1
- package/css/brand/_variables.css +1 -1
- package/css/system/_variables.css +93 -89
- 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 +3 -3
- package/dist/common-js/index.js +3 -3
- package/dist/common-js/system/index.d.ts +1007 -995
- package/dist/common-js/system/index.js +232 -224
- 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 +3 -3
- package/dist/es6/index.js +3 -3
- package/dist/es6/system/index.d.ts +1007 -995
- package/dist/es6/system/index.js +232 -224
- package/less/base/_variables.less +1 -1
- package/less/brand/_variables.less +1 -1
- package/less/system/_variables.less +93 -89
- package/package.json +1 -1
- package/scss/base/_variables.sass +1 -1
- package/scss/base/_variables.scss +1 -1
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/system/_variables.sass +93 -89
- package/scss/system/_variables.scss +93 -89
|
@@ -1,49 +1,55 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 25 Sep 2025 15:42:08 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.
|
|
7
7
|
@cnvs-sys-opacity-full: 1; // Dev only
|
|
8
8
|
@cnvs-sys-opacity-zero: 0; // Dev only
|
|
9
9
|
@cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
|
|
10
|
-
@cnvs-sys-
|
|
11
|
-
@cnvs-sys-
|
|
12
|
-
@cnvs-sys-
|
|
13
|
-
@cnvs-sys-
|
|
14
|
-
@cnvs-sys-
|
|
15
|
-
@cnvs-sys-
|
|
16
|
-
@cnvs-sys-
|
|
17
|
-
@cnvs-sys-
|
|
18
|
-
@cnvs-sys-
|
|
19
|
-
@cnvs-sys-
|
|
20
|
-
@cnvs-sys-
|
|
21
|
-
@cnvs-sys-
|
|
22
|
-
@cnvs-sys-
|
|
23
|
-
@cnvs-sys-
|
|
24
|
-
@cnvs-sys-
|
|
25
|
-
@cnvs-sys-
|
|
26
|
-
@cnvs-sys-
|
|
27
|
-
@cnvs-sys-
|
|
28
|
-
@cnvs-sys-
|
|
29
|
-
@cnvs-sys-
|
|
30
|
-
@cnvs-sys-
|
|
31
|
-
@cnvs-sys-
|
|
32
|
-
@cnvs-sys-
|
|
33
|
-
@cnvs-sys-
|
|
34
|
-
@cnvs-sys-
|
|
35
|
-
@cnvs-sys-
|
|
36
|
-
@cnvs-sys-
|
|
37
|
-
@cnvs-sys-
|
|
38
|
-
@cnvs-sys-
|
|
39
|
-
@cnvs-sys-
|
|
40
|
-
@cnvs-sys-
|
|
41
|
-
@cnvs-sys-
|
|
42
|
-
@cnvs-sys-
|
|
43
|
-
@cnvs-sys-
|
|
44
|
-
@cnvs-sys-
|
|
45
|
-
@cnvs-sys-
|
|
46
|
-
@cnvs-sys-
|
|
10
|
+
@cnvs-sys-font-weight-bold: @cnvs-base-font-weight-700;
|
|
11
|
+
@cnvs-sys-font-weight-medium: @cnvs-base-font-weight-500;
|
|
12
|
+
@cnvs-sys-font-weight-normal: @cnvs-base-font-weight-400;
|
|
13
|
+
@cnvs-sys-font-weight-light: @cnvs-base-font-weight-300;
|
|
14
|
+
@cnvs-sys-line-height-title-large: @cnvs-base-line-height-600;
|
|
15
|
+
@cnvs-sys-line-height-title-medium: @cnvs-base-line-height-500;
|
|
16
|
+
@cnvs-sys-line-height-title-small: @cnvs-base-line-height-400;
|
|
17
|
+
@cnvs-sys-line-height-heading-large: @cnvs-base-line-height-350;
|
|
18
|
+
@cnvs-sys-line-height-heading-medium: @cnvs-base-line-height-300;
|
|
19
|
+
@cnvs-sys-line-height-heading-small: @cnvs-base-line-height-250;
|
|
20
|
+
@cnvs-sys-line-height-body-large: @cnvs-base-line-height-200;
|
|
21
|
+
@cnvs-sys-line-height-body-medium: @cnvs-base-line-height-200;
|
|
22
|
+
@cnvs-sys-line-height-body-small: @cnvs-base-line-height-150;
|
|
23
|
+
@cnvs-sys-line-height-subtext-large: @cnvs-base-line-height-100;
|
|
24
|
+
@cnvs-sys-line-height-subtext-medium: @cnvs-base-line-height-50;
|
|
25
|
+
@cnvs-sys-line-height-subtext-small: @cnvs-base-line-height-50;
|
|
26
|
+
@cnvs-sys-font-size-subtext-small: @cnvs-base-font-size-25;
|
|
27
|
+
@cnvs-sys-font-family-global: @cnvs-base-font-family-200;
|
|
28
|
+
@cnvs-sys-font-family-mono: @cnvs-base-font-family-100;
|
|
29
|
+
@cnvs-sys-font-family-default: @cnvs-base-font-family-50;
|
|
30
|
+
@cnvs-sys-space-x20: calc(@cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
|
|
31
|
+
@cnvs-sys-space-x16: calc(@cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
|
|
32
|
+
@cnvs-sys-space-x10: calc(@cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
|
|
33
|
+
@cnvs-sys-space-x8: calc(@cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
|
|
34
|
+
@cnvs-sys-space-x6: calc(@cnvs-base-unit * 6); // • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs
|
|
35
|
+
@cnvs-sys-space-x4: calc(@cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
36
|
+
@cnvs-sys-space-x3: calc(@cnvs-base-unit * 3); // Use when compact padding is required
|
|
37
|
+
@cnvs-sys-space-x2: calc(@cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
|
|
38
|
+
@cnvs-sys-space-x1: @cnvs-base-unit; // Compact spacing between text or icons
|
|
39
|
+
@cnvs-sys-shape-round: calc(@cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
|
|
40
|
+
@cnvs-sys-shape-x2: calc(@cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
|
|
41
|
+
@cnvs-sys-shape-x1-half: calc(@cnvs-base-unit * 1.5);
|
|
42
|
+
@cnvs-sys-shape-x1: @cnvs-base-unit;
|
|
43
|
+
@cnvs-sys-shape-half: calc(@cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
|
|
44
|
+
@cnvs-sys-opacity-shadow-second: @cnvs-base-opacity-100; // Alpha on second shadow
|
|
45
|
+
@cnvs-sys-opacity-shadow-first: @cnvs-base-opacity-200; // Alpha on first shadow
|
|
46
|
+
@cnvs-sys-opacity-contrast: @cnvs-base-opacity-500; // Tooltips, Status Indicator
|
|
47
|
+
@cnvs-sys-opacity-overlay: @cnvs-base-opacity-400; // Overlay
|
|
48
|
+
@cnvs-sys-opacity-disabled: @cnvs-base-opacity-300; // Disabled states
|
|
49
|
+
@cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
|
|
50
|
+
@cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
|
|
51
|
+
@cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
|
|
52
|
+
@cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
|
|
47
53
|
@cnvs-sys-color-shadow-default: @cnvs-base-palette-slate-900; // Main shadow color
|
|
48
54
|
@cnvs-sys-color-shadow-2: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Second shadow color
|
|
49
55
|
@cnvs-sys-color-shadow-1: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)); // First shadow color
|
|
@@ -76,9 +82,9 @@
|
|
|
76
82
|
@cnvs-sys-color-fg-ai: @cnvs-base-palette-blue-950; // AI icons and text
|
|
77
83
|
@cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-neutral-950; // Strong contrast
|
|
78
84
|
@cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-neutral-900; // Contrast
|
|
79
|
-
@cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-
|
|
85
|
+
@cnvs-sys-color-fg-caution-softer: @cnvs-base-palette-amber-500; // Warning
|
|
80
86
|
@cnvs-sys-color-fg-caution-stronger: @cnvs-base-palette-amber-975; // Warning on hover
|
|
81
|
-
@cnvs-sys-color-fg-caution-soft: @cnvs-base-palette-amber-
|
|
87
|
+
@cnvs-sys-color-fg-caution-soft: @cnvs-base-palette-amber-700; // Warning
|
|
82
88
|
@cnvs-sys-color-fg-caution-strong: @cnvs-base-palette-amber-950; // Warning on hover
|
|
83
89
|
@cnvs-sys-color-fg-caution-default: @cnvs-base-palette-amber-900; // Warning
|
|
84
90
|
@cnvs-sys-color-fg-primary-stronger: @cnvs-base-palette-blue-800; // Links on hover
|
|
@@ -104,8 +110,8 @@
|
|
|
104
110
|
@cnvs-sys-color-icon-info-strong: @cnvs-base-palette-blue-700; // Stronger brand icon color
|
|
105
111
|
@cnvs-sys-color-icon-info-default: @cnvs-base-palette-blue-600; // Brand icon color
|
|
106
112
|
@cnvs-sys-color-icon-disabled: @cnvs-base-palette-slate-400; // Disabled icon color
|
|
107
|
-
@cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-
|
|
108
|
-
@cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-
|
|
113
|
+
@cnvs-sys-color-icon-caution-softer: @cnvs-base-palette-amber-500; // Softer caution icon color
|
|
114
|
+
@cnvs-sys-color-icon-caution-soft: @cnvs-base-palette-amber-700; // Soft caution icon color
|
|
109
115
|
@cnvs-sys-color-icon-caution-stronger: @cnvs-base-palette-amber-975; // Strong caution icon color
|
|
110
116
|
@cnvs-sys-color-icon-caution-strong: @cnvs-base-palette-amber-950; // Strong caution icon color
|
|
111
117
|
@cnvs-sys-color-icon-caution-default: @cnvs-base-palette-amber-900; // Caution icon color
|
|
@@ -139,9 +145,9 @@
|
|
|
139
145
|
@cnvs-sys-color-text-positive-strong: @cnvs-base-palette-green-700; // Branded hover text
|
|
140
146
|
@cnvs-sys-color-text-positive-default: @cnvs-base-palette-green-600; // Branded text
|
|
141
147
|
@cnvs-sys-color-text-ai: @cnvs-base-palette-blue-950;
|
|
142
|
-
@cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-200; //
|
|
143
|
-
@cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; //
|
|
144
|
-
@cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-400; //
|
|
148
|
+
@cnvs-sys-color-text-caution-softer: @cnvs-base-palette-amber-200; // Softer warning text
|
|
149
|
+
@cnvs-sys-color-text-caution-stronger: @cnvs-base-palette-amber-975; // Stronger warning text
|
|
150
|
+
@cnvs-sys-color-text-caution-soft: @cnvs-base-palette-amber-400; // Disabled warning text
|
|
145
151
|
@cnvs-sys-color-text-caution-strong: @cnvs-base-palette-amber-950; // Strong warning text
|
|
146
152
|
@cnvs-sys-color-text-caution-default: @cnvs-base-palette-amber-900; // Warning text
|
|
147
153
|
@cnvs-sys-color-text-primary-softer: @cnvs-base-palette-blue-200; // Active links
|
|
@@ -191,7 +197,7 @@
|
|
|
191
197
|
@cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blue-800; // Brand active background
|
|
192
198
|
@cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blue-700; // Brand hover background
|
|
193
199
|
@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; //
|
|
200
|
+
@cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blue-100; // Primary disabled
|
|
195
201
|
@cnvs-sys-color-bg-primary-softer: @cnvs-base-palette-blue-50; // Select
|
|
196
202
|
@cnvs-sys-color-bg-primary-softest: @cnvs-base-palette-blue-25; // Surface
|
|
197
203
|
@cnvs-sys-color-bg-contrast-strong: @cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
|
|
@@ -211,49 +217,47 @@
|
|
|
211
217
|
@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
218
|
@cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
|
|
213
219
|
@cnvs-sys-color-bg-default: @cnvs-base-palette-neutral-0; // Main background color
|
|
214
|
-
@cnvs-sys-
|
|
215
|
-
@cnvs-sys-
|
|
216
|
-
@cnvs-sys-
|
|
217
|
-
@cnvs-sys-
|
|
218
|
-
@cnvs-sys-
|
|
219
|
-
@cnvs-sys-
|
|
220
|
-
@cnvs-sys-
|
|
221
|
-
@cnvs-sys-
|
|
222
|
-
@cnvs-sys-
|
|
223
|
-
@cnvs-sys-
|
|
224
|
-
@cnvs-sys-
|
|
225
|
-
@cnvs-sys-
|
|
226
|
-
@cnvs-sys-
|
|
227
|
-
@cnvs-sys-
|
|
228
|
-
@cnvs-sys-
|
|
229
|
-
@cnvs-sys-
|
|
230
|
-
@cnvs-sys-
|
|
231
|
-
@cnvs-sys-
|
|
232
|
-
@cnvs-sys-
|
|
233
|
-
@cnvs-sys-
|
|
234
|
-
@cnvs-sys-
|
|
235
|
-
@cnvs-sys-
|
|
236
|
-
@cnvs-sys-
|
|
237
|
-
@cnvs-sys-
|
|
238
|
-
@cnvs-sys-
|
|
239
|
-
@cnvs-sys-
|
|
240
|
-
@cnvs-sys-
|
|
241
|
-
@cnvs-sys-
|
|
242
|
-
@cnvs-sys-
|
|
243
|
-
@cnvs-sys-
|
|
244
|
-
@cnvs-sys-
|
|
245
|
-
@cnvs-sys-
|
|
246
|
-
@cnvs-sys-
|
|
247
|
-
@cnvs-sys-
|
|
248
|
-
@cnvs-sys-
|
|
249
|
-
@cnvs-sys-
|
|
250
|
-
@cnvs-sys-
|
|
251
|
-
@cnvs-sys-
|
|
252
|
-
@cnvs-sys-
|
|
253
|
-
@cnvs-sys-
|
|
254
|
-
@cnvs-sys-
|
|
255
|
-
@cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
|
|
256
|
-
@cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
|
|
220
|
+
@cnvs-sys-color-static-amber-soft: @cnvs-base-palette-amber-100; // Soft amber
|
|
221
|
+
@cnvs-sys-color-static-amber-strongest: @cnvs-base-palette-amber-950; // Stronger amber
|
|
222
|
+
@cnvs-sys-color-static-amber-softer: @cnvs-base-palette-amber-50; // Soft amber
|
|
223
|
+
@cnvs-sys-color-static-amber-stronger: @cnvs-base-palette-amber-600; // Stronger amber
|
|
224
|
+
@cnvs-sys-color-static-amber-strong: @cnvs-base-palette-amber-500; // Stronger amber
|
|
225
|
+
@cnvs-sys-color-static-amber-softest: @cnvs-base-palette-amber-25; // Soft amber
|
|
226
|
+
@cnvs-sys-color-static-amber-default: @cnvs-base-palette-amber-400; // amber
|
|
227
|
+
@cnvs-sys-color-static-gray-softer: @cnvs-base-palette-slate-100; // Light gray
|
|
228
|
+
@cnvs-sys-color-static-gray-softest: @cnvs-base-palette-slate-50; // Light gray
|
|
229
|
+
@cnvs-sys-color-static-gray-strongest: @cnvs-base-palette-slate-950; // Strongerer gray
|
|
230
|
+
@cnvs-sys-color-static-gray-stronger: @cnvs-base-palette-slate-800; // Strongerer gray
|
|
231
|
+
@cnvs-sys-color-static-gray-strong: @cnvs-base-palette-slate-700; // Stronger gray
|
|
232
|
+
@cnvs-sys-color-static-gray-soft: @cnvs-base-palette-slate-200; // Light gray
|
|
233
|
+
@cnvs-sys-color-static-gray-default: @cnvs-base-palette-slate-600; // Gray
|
|
234
|
+
@cnvs-sys-color-static-black: @cnvs-base-palette-neutral-1000; // Just black
|
|
235
|
+
@cnvs-sys-color-static-white: @cnvs-base-palette-neutral-0; // Just white
|
|
236
|
+
@cnvs-sys-color-static-red-softer: @cnvs-base-palette-red-50; // Light red
|
|
237
|
+
@cnvs-sys-color-static-red-strongest: @cnvs-base-palette-red-950; // Strong red
|
|
238
|
+
@cnvs-sys-color-static-red-softest: @cnvs-base-palette-red-25; // Light red
|
|
239
|
+
@cnvs-sys-color-static-red-stronger: @cnvs-base-palette-red-800; // Strong red
|
|
240
|
+
@cnvs-sys-color-static-red-strong: @cnvs-base-palette-red-700; // Strong red
|
|
241
|
+
@cnvs-sys-color-static-red-soft: @cnvs-base-palette-red-100; // Light red
|
|
242
|
+
@cnvs-sys-color-static-red-default: @cnvs-base-palette-red-600; // Red
|
|
243
|
+
@cnvs-sys-color-static-green-strongest: @cnvs-base-palette-green-950; // Stronger green
|
|
244
|
+
@cnvs-sys-color-static-green-softest: @cnvs-base-palette-green-25; // Light green
|
|
245
|
+
@cnvs-sys-color-static-green-stronger: @cnvs-base-palette-green-800; // Stronger green
|
|
246
|
+
@cnvs-sys-color-static-green-softer: @cnvs-base-palette-green-50; // Light green
|
|
247
|
+
@cnvs-sys-color-static-green-strong: @cnvs-base-palette-green-700; // Stronger green
|
|
248
|
+
@cnvs-sys-color-static-green-soft: @cnvs-base-palette-green-100; // Light green
|
|
249
|
+
@cnvs-sys-color-static-green-default: @cnvs-base-palette-green-600; // Default green
|
|
250
|
+
@cnvs-sys-color-static-blue-strongest: @cnvs-base-palette-blue-950; // Stronger blue
|
|
251
|
+
@cnvs-sys-color-static-blue-soft: @cnvs-base-palette-blue-100; // Light blue
|
|
252
|
+
@cnvs-sys-color-static-blue-softer: @cnvs-base-palette-blue-50; // Light blue
|
|
253
|
+
@cnvs-sys-color-static-blue-stronger: @cnvs-base-palette-blue-800; // Stronger blue
|
|
254
|
+
@cnvs-sys-color-static-blue-strong: @cnvs-base-palette-blue-700; // Stronger blue
|
|
255
|
+
@cnvs-sys-color-static-blue-softest: @cnvs-base-palette-blue-25; // Light blue
|
|
256
|
+
@cnvs-sys-color-static-blue-default: @cnvs-base-palette-blue-600; // Blue
|
|
257
|
+
@cnvs-sys-color-static-orange-strong: @cnvs-base-palette-amber-500;
|
|
258
|
+
@cnvs-sys-color-static-orange-soft: @cnvs-base-palette-amber-100;
|
|
259
|
+
@cnvs-sys-color-static-orange-default: @cnvs-base-palette-amber-400;
|
|
260
|
+
@cnvs-sys-color-static-gold-stronger: @cnvs-base-palette-amber-600;
|
|
257
261
|
@cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
|
|
258
262
|
@cnvs-sys-font-size-subtext-large: @cnvs-base-font-size-75;
|
|
259
263
|
@cnvs-sys-font-size-body-small: @cnvs-base-font-size-100;
|
package/package.json
CHANGED
|
@@ -1,49 +1,55 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 25 Sep 2025 15:42:08 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.
|
|
7
7
|
$cnvs-sys-opacity-full: 1; // Dev only
|
|
8
8
|
$cnvs-sys-opacity-zero: 0; // Dev only
|
|
9
9
|
$cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
|
|
10
|
-
$cnvs-sys-
|
|
11
|
-
$cnvs-sys-
|
|
12
|
-
$cnvs-sys-
|
|
13
|
-
$cnvs-sys-
|
|
14
|
-
$cnvs-sys-
|
|
15
|
-
$cnvs-sys-
|
|
16
|
-
$cnvs-sys-
|
|
17
|
-
$cnvs-sys-
|
|
18
|
-
$cnvs-sys-
|
|
19
|
-
$cnvs-sys-
|
|
20
|
-
$cnvs-sys-
|
|
21
|
-
$cnvs-sys-
|
|
22
|
-
$cnvs-sys-
|
|
23
|
-
$cnvs-sys-
|
|
24
|
-
$cnvs-sys-
|
|
25
|
-
$cnvs-sys-
|
|
26
|
-
$cnvs-sys-
|
|
27
|
-
$cnvs-sys-
|
|
28
|
-
$cnvs-sys-
|
|
29
|
-
$cnvs-sys-
|
|
30
|
-
$cnvs-sys-
|
|
31
|
-
$cnvs-sys-
|
|
32
|
-
$cnvs-sys-
|
|
33
|
-
$cnvs-sys-
|
|
34
|
-
$cnvs-sys-
|
|
35
|
-
$cnvs-sys-
|
|
36
|
-
$cnvs-sys-
|
|
37
|
-
$cnvs-sys-
|
|
38
|
-
$cnvs-sys-
|
|
39
|
-
$cnvs-sys-
|
|
40
|
-
$cnvs-sys-
|
|
41
|
-
$cnvs-sys-
|
|
42
|
-
$cnvs-sys-
|
|
43
|
-
$cnvs-sys-
|
|
44
|
-
$cnvs-sys-
|
|
45
|
-
$cnvs-sys-
|
|
46
|
-
$cnvs-sys-
|
|
10
|
+
$cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
|
|
11
|
+
$cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
|
|
12
|
+
$cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
|
|
13
|
+
$cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
|
|
14
|
+
$cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
|
|
15
|
+
$cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
|
|
16
|
+
$cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
|
|
17
|
+
$cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
|
|
18
|
+
$cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
|
|
19
|
+
$cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
|
|
20
|
+
$cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
|
|
21
|
+
$cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
|
|
22
|
+
$cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
|
|
23
|
+
$cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
|
|
24
|
+
$cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
|
|
25
|
+
$cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
|
|
26
|
+
$cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
|
|
27
|
+
$cnvs-sys-font-family-global: $cnvs-base-font-family-200;
|
|
28
|
+
$cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
|
|
29
|
+
$cnvs-sys-font-family-default: $cnvs-base-font-family-50;
|
|
30
|
+
$cnvs-sys-space-x20: calc($cnvs-base-unit * 20); // - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available
|
|
31
|
+
$cnvs-sys-space-x16: calc($cnvs-base-unit * 16); // - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections
|
|
32
|
+
$cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
|
|
33
|
+
$cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
|
|
34
|
+
$cnvs-sys-space-x6: calc($cnvs-base-unit * 6); // • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs
|
|
35
|
+
$cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
36
|
+
$cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
|
|
37
|
+
$cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
|
|
38
|
+
$cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
|
|
39
|
+
$cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
|
|
40
|
+
$cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
|
|
41
|
+
$cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
|
|
42
|
+
$cnvs-sys-shape-x1: $cnvs-base-unit;
|
|
43
|
+
$cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
|
|
44
|
+
$cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
|
|
45
|
+
$cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
|
|
46
|
+
$cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
|
|
47
|
+
$cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
|
|
48
|
+
$cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
|
|
49
|
+
$cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
|
|
50
|
+
$cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
|
|
51
|
+
$cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
|
|
52
|
+
$cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
|
|
47
53
|
$cnvs-sys-color-shadow-default: $cnvs-base-palette-slate-900; // Main shadow color
|
|
48
54
|
$cnvs-sys-color-shadow-2: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-100)); // Second shadow color
|
|
49
55
|
$cnvs-sys-color-shadow-1: oklch(from var(--cnvs-base-palette-slate-900) l c h / var(--cnvs-base-opacity-200)); // First shadow color
|
|
@@ -76,9 +82,9 @@ $cnvs-sys-color-fg-info-softer: $cnvs-base-palette-blue-200; // Link Inverse, Di
|
|
|
76
82
|
$cnvs-sys-color-fg-ai: $cnvs-base-palette-blue-950; // AI icons and text
|
|
77
83
|
$cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-950; // Strong contrast
|
|
78
84
|
$cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-900; // Contrast
|
|
79
|
-
$cnvs-sys-color-fg-caution-softer: $cnvs-base-palette-amber-
|
|
85
|
+
$cnvs-sys-color-fg-caution-softer: $cnvs-base-palette-amber-500; // Warning
|
|
80
86
|
$cnvs-sys-color-fg-caution-stronger: $cnvs-base-palette-amber-975; // Warning on hover
|
|
81
|
-
$cnvs-sys-color-fg-caution-soft: $cnvs-base-palette-amber-
|
|
87
|
+
$cnvs-sys-color-fg-caution-soft: $cnvs-base-palette-amber-700; // Warning
|
|
82
88
|
$cnvs-sys-color-fg-caution-strong: $cnvs-base-palette-amber-950; // Warning on hover
|
|
83
89
|
$cnvs-sys-color-fg-caution-default: $cnvs-base-palette-amber-900; // Warning
|
|
84
90
|
$cnvs-sys-color-fg-primary-stronger: $cnvs-base-palette-blue-800; // Links on hover
|
|
@@ -104,8 +110,8 @@ $cnvs-sys-color-icon-info-stronger: $cnvs-base-palette-blue-800; // Stronger bra
|
|
|
104
110
|
$cnvs-sys-color-icon-info-strong: $cnvs-base-palette-blue-700; // Stronger brand icon color
|
|
105
111
|
$cnvs-sys-color-icon-info-default: $cnvs-base-palette-blue-600; // Brand icon color
|
|
106
112
|
$cnvs-sys-color-icon-disabled: $cnvs-base-palette-slate-400; // Disabled icon color
|
|
107
|
-
$cnvs-sys-color-icon-caution-softer: $cnvs-base-palette-amber-
|
|
108
|
-
$cnvs-sys-color-icon-caution-soft: $cnvs-base-palette-amber-
|
|
113
|
+
$cnvs-sys-color-icon-caution-softer: $cnvs-base-palette-amber-500; // Softer caution icon color
|
|
114
|
+
$cnvs-sys-color-icon-caution-soft: $cnvs-base-palette-amber-700; // Soft caution icon color
|
|
109
115
|
$cnvs-sys-color-icon-caution-stronger: $cnvs-base-palette-amber-975; // Strong caution icon color
|
|
110
116
|
$cnvs-sys-color-icon-caution-strong: $cnvs-base-palette-amber-950; // Strong caution icon color
|
|
111
117
|
$cnvs-sys-color-icon-caution-default: $cnvs-base-palette-amber-900; // Caution icon color
|
|
@@ -139,9 +145,9 @@ $cnvs-sys-color-text-positive-stronger: $cnvs-base-palette-green-800; // Active
|
|
|
139
145
|
$cnvs-sys-color-text-positive-strong: $cnvs-base-palette-green-700; // Branded hover text
|
|
140
146
|
$cnvs-sys-color-text-positive-default: $cnvs-base-palette-green-600; // Branded text
|
|
141
147
|
$cnvs-sys-color-text-ai: $cnvs-base-palette-blue-950;
|
|
142
|
-
$cnvs-sys-color-text-caution-softer: $cnvs-base-palette-amber-200; //
|
|
143
|
-
$cnvs-sys-color-text-caution-stronger: $cnvs-base-palette-amber-975; //
|
|
144
|
-
$cnvs-sys-color-text-caution-soft: $cnvs-base-palette-amber-400; //
|
|
148
|
+
$cnvs-sys-color-text-caution-softer: $cnvs-base-palette-amber-200; // Softer warning text
|
|
149
|
+
$cnvs-sys-color-text-caution-stronger: $cnvs-base-palette-amber-975; // Stronger warning text
|
|
150
|
+
$cnvs-sys-color-text-caution-soft: $cnvs-base-palette-amber-400; // Disabled warning text
|
|
145
151
|
$cnvs-sys-color-text-caution-strong: $cnvs-base-palette-amber-950; // Strong warning text
|
|
146
152
|
$cnvs-sys-color-text-caution-default: $cnvs-base-palette-amber-900; // Warning text
|
|
147
153
|
$cnvs-sys-color-text-primary-softer: $cnvs-base-palette-blue-200; // Active links
|
|
@@ -191,7 +197,7 @@ $cnvs-sys-color-bg-positive-softest: $cnvs-base-palette-green-25; // Lightest su
|
|
|
191
197
|
$cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blue-800; // Brand active background
|
|
192
198
|
$cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blue-700; // Brand hover background
|
|
193
199
|
$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; //
|
|
200
|
+
$cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blue-100; // Primary disabled
|
|
195
201
|
$cnvs-sys-color-bg-primary-softer: $cnvs-base-palette-blue-50; // Select
|
|
196
202
|
$cnvs-sys-color-bg-primary-softest: $cnvs-base-palette-blue-25; // Surface
|
|
197
203
|
$cnvs-sys-color-bg-contrast-strong: $cnvs-base-palette-neutral-950; // Contrast backgrounds, like Secondary Buttons
|
|
@@ -211,49 +217,47 @@ $cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neut
|
|
|
211
217
|
$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
218
|
$cnvs-sys-color-bg-transparent-default: transparent; // Transparent background
|
|
213
219
|
$cnvs-sys-color-bg-default: $cnvs-base-palette-neutral-0; // Main background color
|
|
214
|
-
$cnvs-sys-
|
|
215
|
-
$cnvs-sys-
|
|
216
|
-
$cnvs-sys-
|
|
217
|
-
$cnvs-sys-
|
|
218
|
-
$cnvs-sys-
|
|
219
|
-
$cnvs-sys-
|
|
220
|
-
$cnvs-sys-
|
|
221
|
-
$cnvs-sys-
|
|
222
|
-
$cnvs-sys-
|
|
223
|
-
$cnvs-sys-
|
|
224
|
-
$cnvs-sys-
|
|
225
|
-
$cnvs-sys-
|
|
226
|
-
$cnvs-sys-
|
|
227
|
-
$cnvs-sys-
|
|
228
|
-
$cnvs-sys-
|
|
229
|
-
$cnvs-sys-
|
|
230
|
-
$cnvs-sys-
|
|
231
|
-
$cnvs-sys-
|
|
232
|
-
$cnvs-sys-
|
|
233
|
-
$cnvs-sys-
|
|
234
|
-
$cnvs-sys-
|
|
235
|
-
$cnvs-sys-
|
|
236
|
-
$cnvs-sys-
|
|
237
|
-
$cnvs-sys-
|
|
238
|
-
$cnvs-sys-
|
|
239
|
-
$cnvs-sys-
|
|
240
|
-
$cnvs-sys-
|
|
241
|
-
$cnvs-sys-
|
|
242
|
-
$cnvs-sys-
|
|
243
|
-
$cnvs-sys-
|
|
244
|
-
$cnvs-sys-
|
|
245
|
-
$cnvs-sys-
|
|
246
|
-
$cnvs-sys-
|
|
247
|
-
$cnvs-sys-
|
|
248
|
-
$cnvs-sys-
|
|
249
|
-
$cnvs-sys-
|
|
250
|
-
$cnvs-sys-
|
|
251
|
-
$cnvs-sys-
|
|
252
|
-
$cnvs-sys-
|
|
253
|
-
$cnvs-sys-
|
|
254
|
-
$cnvs-sys-
|
|
255
|
-
$cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
|
|
256
|
-
$cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
|
|
220
|
+
$cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
|
|
221
|
+
$cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
|
|
222
|
+
$cnvs-sys-color-static-amber-softer: $cnvs-base-palette-amber-50; // Soft amber
|
|
223
|
+
$cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
|
|
224
|
+
$cnvs-sys-color-static-amber-strong: $cnvs-base-palette-amber-500; // Stronger amber
|
|
225
|
+
$cnvs-sys-color-static-amber-softest: $cnvs-base-palette-amber-25; // Soft amber
|
|
226
|
+
$cnvs-sys-color-static-amber-default: $cnvs-base-palette-amber-400; // amber
|
|
227
|
+
$cnvs-sys-color-static-gray-softer: $cnvs-base-palette-slate-100; // Light gray
|
|
228
|
+
$cnvs-sys-color-static-gray-softest: $cnvs-base-palette-slate-50; // Light gray
|
|
229
|
+
$cnvs-sys-color-static-gray-strongest: $cnvs-base-palette-slate-950; // Strongerer gray
|
|
230
|
+
$cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-slate-800; // Strongerer gray
|
|
231
|
+
$cnvs-sys-color-static-gray-strong: $cnvs-base-palette-slate-700; // Stronger gray
|
|
232
|
+
$cnvs-sys-color-static-gray-soft: $cnvs-base-palette-slate-200; // Light gray
|
|
233
|
+
$cnvs-sys-color-static-gray-default: $cnvs-base-palette-slate-600; // Gray
|
|
234
|
+
$cnvs-sys-color-static-black: $cnvs-base-palette-neutral-1000; // Just black
|
|
235
|
+
$cnvs-sys-color-static-white: $cnvs-base-palette-neutral-0; // Just white
|
|
236
|
+
$cnvs-sys-color-static-red-softer: $cnvs-base-palette-red-50; // Light red
|
|
237
|
+
$cnvs-sys-color-static-red-strongest: $cnvs-base-palette-red-950; // Strong red
|
|
238
|
+
$cnvs-sys-color-static-red-softest: $cnvs-base-palette-red-25; // Light red
|
|
239
|
+
$cnvs-sys-color-static-red-stronger: $cnvs-base-palette-red-800; // Strong red
|
|
240
|
+
$cnvs-sys-color-static-red-strong: $cnvs-base-palette-red-700; // Strong red
|
|
241
|
+
$cnvs-sys-color-static-red-soft: $cnvs-base-palette-red-100; // Light red
|
|
242
|
+
$cnvs-sys-color-static-red-default: $cnvs-base-palette-red-600; // Red
|
|
243
|
+
$cnvs-sys-color-static-green-strongest: $cnvs-base-palette-green-950; // Stronger green
|
|
244
|
+
$cnvs-sys-color-static-green-softest: $cnvs-base-palette-green-25; // Light green
|
|
245
|
+
$cnvs-sys-color-static-green-stronger: $cnvs-base-palette-green-800; // Stronger green
|
|
246
|
+
$cnvs-sys-color-static-green-softer: $cnvs-base-palette-green-50; // Light green
|
|
247
|
+
$cnvs-sys-color-static-green-strong: $cnvs-base-palette-green-700; // Stronger green
|
|
248
|
+
$cnvs-sys-color-static-green-soft: $cnvs-base-palette-green-100; // Light green
|
|
249
|
+
$cnvs-sys-color-static-green-default: $cnvs-base-palette-green-600; // Default green
|
|
250
|
+
$cnvs-sys-color-static-blue-strongest: $cnvs-base-palette-blue-950; // Stronger blue
|
|
251
|
+
$cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blue-100; // Light blue
|
|
252
|
+
$cnvs-sys-color-static-blue-softer: $cnvs-base-palette-blue-50; // Light blue
|
|
253
|
+
$cnvs-sys-color-static-blue-stronger: $cnvs-base-palette-blue-800; // Stronger blue
|
|
254
|
+
$cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blue-700; // Stronger blue
|
|
255
|
+
$cnvs-sys-color-static-blue-softest: $cnvs-base-palette-blue-25; // Light blue
|
|
256
|
+
$cnvs-sys-color-static-blue-default: $cnvs-base-palette-blue-600; // Blue
|
|
257
|
+
$cnvs-sys-color-static-orange-strong: $cnvs-base-palette-amber-500;
|
|
258
|
+
$cnvs-sys-color-static-orange-soft: $cnvs-base-palette-amber-100;
|
|
259
|
+
$cnvs-sys-color-static-orange-default: $cnvs-base-palette-amber-400;
|
|
260
|
+
$cnvs-sys-color-static-gold-stronger: $cnvs-base-palette-amber-600;
|
|
257
261
|
$cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
|
|
258
262
|
$cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
|
|
259
263
|
$cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
|