@workday/canvas-tokens-web 5.0.0-alpha.0 → 5.0.0-alpha.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 +141 -100
- package/css/brand/_variables.css +39 -31
- package/css/component/_variables.css +1 -1
- package/css/legacy/base.css +340 -0
- package/css/legacy/brand.css +121 -0
- package/css/legacy/component.css +23 -0
- package/css/legacy/system.css +232 -0
- package/css/system/_variables.css +126 -53
- package/dist/common-js/base/index.d.ts +908 -732
- package/dist/common-js/base/index.js +378 -1
- package/dist/common-js/brand/index.d.ts +260 -77
- package/dist/common-js/brand/index.js +131 -1
- package/dist/common-js/component/index.d.ts +36 -1
- package/dist/common-js/component/index.js +31 -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 +956 -70
- package/dist/common-js/system/index.js +520 -14
- package/dist/es6/base/index.d.ts +908 -732
- package/dist/es6/base/index.js +378 -1
- package/dist/es6/brand/index.d.ts +260 -77
- package/dist/es6/brand/index.js +131 -1
- package/dist/es6/component/index.d.ts +36 -1
- package/dist/es6/component/index.js +31 -1
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +956 -70
- package/dist/es6/system/index.js +520 -14
- package/less/base/_variables.less +141 -100
- package/less/brand/_variables.less +39 -31
- package/less/component/_variables.less +1 -1
- package/less/system/_variables.less +126 -53
- package/package.json +1 -1
- package/scss/base/_variables.sass +141 -100
- package/scss/base/_variables.scss +141 -100
- package/scss/brand/_variables.sass +39 -31
- package/scss/brand/_variables.scss +39 -31
- package/scss/component/_variables.sass +1 -1
- package/scss/component/_variables.scss +1 -1
- package/scss/system/_variables.sass +126 -53
- package/scss/system/_variables.scss +126 -53
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 25 Jun 2026 23:45:09 GMT
|
|
4
4
|
|
|
5
|
+
$cnvs-brand-positive-a300: $cnvs-base-palette-green-a300;
|
|
5
6
|
$cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
|
|
6
7
|
$cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;
|
|
7
8
|
$cnvs-brand-positive-a50: $cnvs-base-palette-green-a50;
|
|
@@ -11,7 +12,7 @@ $cnvs-brand-positive-950: $cnvs-base-palette-green-950;
|
|
|
11
12
|
$cnvs-brand-positive-900: $cnvs-base-palette-green-900;
|
|
12
13
|
$cnvs-brand-positive-800: $cnvs-base-palette-green-800;
|
|
13
14
|
$cnvs-brand-positive-700: $cnvs-base-palette-green-700;
|
|
14
|
-
$cnvs-brand-positive-600: $cnvs-base-palette-green-600; // Base success color. Use fg.inverse
|
|
15
|
+
$cnvs-brand-positive-600: $cnvs-base-palette-green-600; // Base success color. Use fg.inverse instead
|
|
15
16
|
$cnvs-brand-positive-500: $cnvs-base-palette-green-500;
|
|
16
17
|
$cnvs-brand-positive-400: $cnvs-base-palette-green-400;
|
|
17
18
|
$cnvs-brand-positive-300: $cnvs-base-palette-green-300;
|
|
@@ -19,6 +20,7 @@ $cnvs-brand-positive-200: $cnvs-base-palette-green-200;
|
|
|
19
20
|
$cnvs-brand-positive-100: $cnvs-base-palette-green-100;
|
|
20
21
|
$cnvs-brand-positive-50: $cnvs-base-palette-green-50;
|
|
21
22
|
$cnvs-brand-positive-25: $cnvs-base-palette-green-25;
|
|
23
|
+
$cnvs-brand-caution-a300: $cnvs-base-palette-amber-a300;
|
|
22
24
|
$cnvs-brand-caution-a200: $cnvs-base-palette-amber-a200;
|
|
23
25
|
$cnvs-brand-caution-a100: $cnvs-base-palette-amber-a100;
|
|
24
26
|
$cnvs-brand-caution-a50: $cnvs-base-palette-amber-a50;
|
|
@@ -30,12 +32,13 @@ $cnvs-brand-caution-800: $cnvs-base-palette-amber-800;
|
|
|
30
32
|
$cnvs-brand-caution-700: $cnvs-base-palette-amber-700;
|
|
31
33
|
$cnvs-brand-caution-600: $cnvs-base-palette-amber-600;
|
|
32
34
|
$cnvs-brand-caution-500: $cnvs-base-palette-amber-500;
|
|
33
|
-
$cnvs-brand-caution-400: $cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default
|
|
35
|
+
$cnvs-brand-caution-400: $cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default instead
|
|
34
36
|
$cnvs-brand-caution-300: $cnvs-base-palette-amber-300;
|
|
35
37
|
$cnvs-brand-caution-200: $cnvs-base-palette-amber-200;
|
|
36
38
|
$cnvs-brand-caution-100: $cnvs-base-palette-amber-100;
|
|
37
39
|
$cnvs-brand-caution-50: $cnvs-base-palette-amber-50;
|
|
38
40
|
$cnvs-brand-caution-25: $cnvs-base-palette-amber-25;
|
|
41
|
+
$cnvs-brand-critical-a300: $cnvs-base-palette-red-a300;
|
|
39
42
|
$cnvs-brand-critical-a200: $cnvs-base-palette-red-a200;
|
|
40
43
|
$cnvs-brand-critical-a100: $cnvs-base-palette-red-a100;
|
|
41
44
|
$cnvs-brand-critical-a50: $cnvs-base-palette-red-a50;
|
|
@@ -45,7 +48,7 @@ $cnvs-brand-critical-950: $cnvs-base-palette-red-950;
|
|
|
45
48
|
$cnvs-brand-critical-900: $cnvs-base-palette-red-900;
|
|
46
49
|
$cnvs-brand-critical-800: $cnvs-base-palette-red-800;
|
|
47
50
|
$cnvs-brand-critical-700: $cnvs-base-palette-red-700;
|
|
48
|
-
$cnvs-brand-critical-600: $cnvs-base-palette-red-600; // Base critical color. Use fg.inverse
|
|
51
|
+
$cnvs-brand-critical-600: $cnvs-base-palette-red-600; // Base critical color. Use fg.inverse instead
|
|
49
52
|
$cnvs-brand-critical-500: $cnvs-base-palette-red-500;
|
|
50
53
|
$cnvs-brand-critical-400: $cnvs-base-palette-red-400;
|
|
51
54
|
$cnvs-brand-critical-300: $cnvs-base-palette-red-300;
|
|
@@ -57,19 +60,21 @@ $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
|
|
|
57
60
|
$cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
|
|
58
61
|
$cnvs-brand-common-error-inner: $cnvs-base-palette-red-500;
|
|
59
62
|
$cnvs-brand-common-focus-outline: $cnvs-base-palette-blue-500;
|
|
60
|
-
$cnvs-brand-neutral-a975: $cnvs-base-palette-
|
|
61
|
-
$cnvs-brand-neutral-a950: $cnvs-base-palette-
|
|
62
|
-
$cnvs-brand-neutral-a900: $cnvs-base-palette-
|
|
63
|
-
$cnvs-brand-neutral-
|
|
64
|
-
$cnvs-brand-neutral-
|
|
65
|
-
$cnvs-brand-neutral-
|
|
66
|
-
$cnvs-brand-neutral-
|
|
67
|
-
$cnvs-brand-neutral-
|
|
68
|
-
$cnvs-brand-neutral-
|
|
69
|
-
$cnvs-brand-neutral-
|
|
70
|
-
$cnvs-brand-neutral-
|
|
71
|
-
$cnvs-brand-neutral-
|
|
72
|
-
$cnvs-brand-neutral-
|
|
63
|
+
$cnvs-brand-neutral-a975: $cnvs-base-palette-neutral-a975;
|
|
64
|
+
$cnvs-brand-neutral-a950: $cnvs-base-palette-neutral-a950;
|
|
65
|
+
$cnvs-brand-neutral-a900: $cnvs-base-palette-neutral-a900;
|
|
66
|
+
$cnvs-brand-neutral-a850: $cnvs-base-palette-neutral-a850;
|
|
67
|
+
$cnvs-brand-neutral-a800: $cnvs-base-palette-neutral-a800;
|
|
68
|
+
$cnvs-brand-neutral-a700: $cnvs-base-palette-neutral-a700;
|
|
69
|
+
$cnvs-brand-neutral-a600: $cnvs-base-palette-neutral-a600;
|
|
70
|
+
$cnvs-brand-neutral-a500: $cnvs-base-palette-neutral-a500;
|
|
71
|
+
$cnvs-brand-neutral-a400: $cnvs-base-palette-neutral-a400;
|
|
72
|
+
$cnvs-brand-neutral-a300: $cnvs-base-palette-neutral-a300;
|
|
73
|
+
$cnvs-brand-neutral-a200: $cnvs-base-palette-neutral-a200;
|
|
74
|
+
$cnvs-brand-neutral-a150: $cnvs-base-palette-neutral-a150;
|
|
75
|
+
$cnvs-brand-neutral-a100: $cnvs-base-palette-neutral-a100;
|
|
76
|
+
$cnvs-brand-neutral-a50: $cnvs-base-palette-neutral-a50;
|
|
77
|
+
$cnvs-brand-neutral-a25: $cnvs-base-palette-neutral-a25;
|
|
73
78
|
$cnvs-brand-neutral-light: $cnvs-base-palette-neutral-200;
|
|
74
79
|
$cnvs-brand-neutral-lighter: $cnvs-base-palette-neutral-50;
|
|
75
80
|
$cnvs-brand-neutral-accent: $cnvs-base-palette-neutral-0;
|
|
@@ -77,19 +82,21 @@ $cnvs-brand-neutral-darkest: $cnvs-base-palette-neutral-800;
|
|
|
77
82
|
$cnvs-brand-neutral-dark: $cnvs-base-palette-neutral-700;
|
|
78
83
|
$cnvs-brand-neutral-base: $cnvs-base-palette-neutral-600;
|
|
79
84
|
$cnvs-brand-neutral-lightest: $cnvs-base-palette-neutral-25;
|
|
80
|
-
$cnvs-brand-neutral-975: $cnvs-base-palette-
|
|
81
|
-
$cnvs-brand-neutral-950: $cnvs-base-palette-
|
|
82
|
-
$cnvs-brand-neutral-900: $cnvs-base-palette-
|
|
83
|
-
$cnvs-brand-neutral-
|
|
84
|
-
$cnvs-brand-neutral-
|
|
85
|
-
$cnvs-brand-neutral-
|
|
86
|
-
$cnvs-brand-neutral-
|
|
87
|
-
$cnvs-brand-neutral-
|
|
88
|
-
$cnvs-brand-neutral-
|
|
89
|
-
$cnvs-brand-neutral-
|
|
90
|
-
$cnvs-brand-neutral-
|
|
91
|
-
$cnvs-brand-neutral-
|
|
92
|
-
$cnvs-brand-neutral-
|
|
85
|
+
$cnvs-brand-neutral-975: $cnvs-base-palette-neutral-975;
|
|
86
|
+
$cnvs-brand-neutral-950: $cnvs-base-palette-neutral-950;
|
|
87
|
+
$cnvs-brand-neutral-900: $cnvs-base-palette-neutral-900;
|
|
88
|
+
$cnvs-brand-neutral-850: $cnvs-base-palette-neutral-850;
|
|
89
|
+
$cnvs-brand-neutral-800: $cnvs-base-palette-neutral-800;
|
|
90
|
+
$cnvs-brand-neutral-700: $cnvs-base-palette-neutral-700;
|
|
91
|
+
$cnvs-brand-neutral-600: $cnvs-base-palette-neutral-600;
|
|
92
|
+
$cnvs-brand-neutral-500: $cnvs-base-palette-neutral-500;
|
|
93
|
+
$cnvs-brand-neutral-400: $cnvs-base-palette-neutral-400;
|
|
94
|
+
$cnvs-brand-neutral-300: $cnvs-base-palette-neutral-300;
|
|
95
|
+
$cnvs-brand-neutral-200: $cnvs-base-palette-neutral-200;
|
|
96
|
+
$cnvs-brand-neutral-150: $cnvs-base-palette-neutral-150;
|
|
97
|
+
$cnvs-brand-neutral-100: $cnvs-base-palette-neutral-100;
|
|
98
|
+
$cnvs-brand-neutral-50: $cnvs-base-palette-neutral-50;
|
|
99
|
+
$cnvs-brand-neutral-25: $cnvs-base-palette-neutral-25;
|
|
93
100
|
$cnvs-brand-success-light: $cnvs-base-palette-green-200;
|
|
94
101
|
$cnvs-brand-success-accent: $cnvs-base-palette-neutral-0;
|
|
95
102
|
$cnvs-brand-success-darkest: $cnvs-base-palette-green-800;
|
|
@@ -111,6 +118,7 @@ $cnvs-brand-error-darkest: $cnvs-base-palette-red-800;
|
|
|
111
118
|
$cnvs-brand-error-dark: $cnvs-base-palette-red-700;
|
|
112
119
|
$cnvs-brand-error-lightest: $cnvs-base-palette-red-25;
|
|
113
120
|
$cnvs-brand-error-base: $cnvs-base-palette-red-600;
|
|
121
|
+
$cnvs-brand-primary-a300: $cnvs-base-palette-blue-a300;
|
|
114
122
|
$cnvs-brand-primary-a200: $cnvs-base-palette-blue-a200;
|
|
115
123
|
$cnvs-brand-primary-a100: $cnvs-base-palette-blue-a100;
|
|
116
124
|
$cnvs-brand-primary-a50: $cnvs-base-palette-blue-a50;
|
|
@@ -127,7 +135,7 @@ $cnvs-brand-primary-950: $cnvs-base-palette-blue-950;
|
|
|
127
135
|
$cnvs-brand-primary-900: $cnvs-base-palette-blue-900;
|
|
128
136
|
$cnvs-brand-primary-800: $cnvs-base-palette-blue-800;
|
|
129
137
|
$cnvs-brand-primary-700: $cnvs-base-palette-blue-700;
|
|
130
|
-
$cnvs-brand-primary-600: $cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse
|
|
138
|
+
$cnvs-brand-primary-600: $cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse instead
|
|
131
139
|
$cnvs-brand-primary-500: $cnvs-base-palette-blue-500;
|
|
132
140
|
$cnvs-brand-primary-400: $cnvs-base-palette-blue-400;
|
|
133
141
|
$cnvs-brand-primary-300: $cnvs-base-palette-blue-300;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 25 Jun 2026 23:45:09 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-component-system-icon-color-background: $cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
|
|
6
6
|
$cnvs-component-system-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 25 Jun 2026 23:45:09 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-component-system-icon-color-background: $cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
|
|
6
6
|
$cnvs-component-system-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
|
|
@@ -1,25 +1,34 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 25 Jun 2026 23:45:09 GMT
|
|
4
4
|
|
|
5
|
+
$cnvs-sys-opacity-accent-pressed: 0.118; // State layer applied to accent colors while pressing
|
|
6
|
+
$cnvs-sys-opacity-accent-hover: 0.045; // State layer applied to accent colors on hover
|
|
5
7
|
$cnvs-sys-opacity-full: 1; // Dev only
|
|
6
8
|
$cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
7
9
|
$cnvs-sys-breakpoints-zero: 0; // Use to set a media query `min-width` below small.
|
|
8
|
-
$cnvs-sys-font-weight-bold:
|
|
9
|
-
$cnvs-sys-font-weight-medium:
|
|
10
|
-
$cnvs-sys-font-weight-normal:
|
|
11
|
-
$cnvs-sys-font-weight-light:
|
|
12
|
-
$cnvs-sys-letter-spacing-
|
|
13
|
-
$cnvs-sys-letter-spacing-
|
|
14
|
-
$cnvs-sys-letter-spacing-
|
|
15
|
-
$cnvs-sys-letter-spacing-
|
|
10
|
+
$cnvs-sys-font-weight-bold: 700;
|
|
11
|
+
$cnvs-sys-font-weight-medium: 500;
|
|
12
|
+
$cnvs-sys-font-weight-normal: 400;
|
|
13
|
+
$cnvs-sys-font-weight-light: 300;
|
|
14
|
+
$cnvs-sys-letter-spacing-title-lg: $cnvs-base-letter-spacing-12;
|
|
15
|
+
$cnvs-sys-letter-spacing-title-md: $cnvs-base-letter-spacing-11;
|
|
16
|
+
$cnvs-sys-letter-spacing-title-sm: $cnvs-base-letter-spacing-10;
|
|
17
|
+
$cnvs-sys-letter-spacing-heading-lg: $cnvs-base-letter-spacing-9;
|
|
18
|
+
$cnvs-sys-letter-spacing-heading-md: $cnvs-base-letter-spacing-8;
|
|
19
|
+
$cnvs-sys-letter-spacing-heading-sm: $cnvs-base-letter-spacing-7;
|
|
20
|
+
$cnvs-sys-letter-spacing-body-lg: $cnvs-base-letter-spacing-6;
|
|
21
|
+
$cnvs-sys-letter-spacing-body-md: $cnvs-base-letter-spacing-5;
|
|
22
|
+
$cnvs-sys-letter-spacing-body-sm: $cnvs-base-letter-spacing-4;
|
|
23
|
+
$cnvs-sys-letter-spacing-subtext-lg: $cnvs-base-letter-spacing-3;
|
|
24
|
+
$cnvs-sys-letter-spacing-subtext-md: $cnvs-base-letter-spacing-2;
|
|
25
|
+
$cnvs-sys-letter-spacing-subtext-sm: $cnvs-base-letter-spacing-1;
|
|
26
|
+
$cnvs-sys-font-family-fallback: $cnvs-base-font-family-0;
|
|
16
27
|
$cnvs-sys-font-family-global: $cnvs-base-font-family-200;
|
|
17
28
|
$cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
|
|
18
29
|
$cnvs-sys-font-family-default: $cnvs-base-font-family-50;
|
|
19
30
|
$cnvs-sys-gap-none: $cnvs-base-size-0; // Use when there is no space between elements
|
|
20
31
|
$cnvs-sys-padding-none: $cnvs-base-size-0; // Use when there should be no space between content and element's edges.
|
|
21
|
-
$cnvs-sys-opacity-accent-pressed: $cnvs-base-opacity-360; // State layer applied to accent colors while pressing
|
|
22
|
-
$cnvs-sys-opacity-accent-hover: $cnvs-base-opacity-180; // State layer applied to accent colors on hover
|
|
23
32
|
$cnvs-sys-opacity-surface-pressed: $cnvs-base-opacity-180; // State layer applied to surface colors while pressing
|
|
24
33
|
$cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-80; // Alpha on second shadow
|
|
25
34
|
$cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-120; // Alpha on first shadow
|
|
@@ -33,25 +42,75 @@ $cnvs-sys-motion-easing-purposeful-standard: $cnvs-base-easing-b-100;
|
|
|
33
42
|
$cnvs-sys-motion-easing-quick-deceleration: $cnvs-base-easing-a-300;
|
|
34
43
|
$cnvs-sys-motion-easing-quick-acceleration: $cnvs-base-easing-a-200;
|
|
35
44
|
$cnvs-sys-motion-easing-quick-standard: $cnvs-base-easing-a-100;
|
|
45
|
+
$cnvs-sys-color-chart-sequential-11: $cnvs-base-palette-teal-900;
|
|
46
|
+
$cnvs-sys-color-chart-sequential-10: $cnvs-base-palette-teal-800;
|
|
47
|
+
$cnvs-sys-color-chart-sequential-9: $cnvs-base-palette-teal-700;
|
|
48
|
+
$cnvs-sys-color-chart-sequential-8: $cnvs-base-palette-teal-600;
|
|
49
|
+
$cnvs-sys-color-chart-sequential-7: $cnvs-base-palette-teal-500;
|
|
50
|
+
$cnvs-sys-color-chart-sequential-6: $cnvs-base-palette-teal-400;
|
|
51
|
+
$cnvs-sys-color-chart-sequential-5: $cnvs-base-palette-teal-300;
|
|
52
|
+
$cnvs-sys-color-chart-sequential-4: $cnvs-base-palette-teal-200;
|
|
53
|
+
$cnvs-sys-color-chart-sequential-3: $cnvs-base-palette-teal-100;
|
|
54
|
+
$cnvs-sys-color-chart-sequential-2: $cnvs-base-palette-teal-50;
|
|
55
|
+
$cnvs-sys-color-chart-sequential-1: $cnvs-base-palette-teal-25;
|
|
56
|
+
$cnvs-sys-color-chart-categorical-14: $cnvs-base-palette-coral-600;
|
|
57
|
+
$cnvs-sys-color-chart-categorical-13: $cnvs-base-palette-purple-700;
|
|
58
|
+
$cnvs-sys-color-chart-categorical-12: $cnvs-base-palette-azure-700;
|
|
59
|
+
$cnvs-sys-color-chart-categorical-11: $cnvs-base-palette-orange-700;
|
|
60
|
+
$cnvs-sys-color-chart-categorical-10: $cnvs-base-palette-indigo-600;
|
|
61
|
+
$cnvs-sys-color-chart-categorical-9: $cnvs-base-palette-teal-700;
|
|
62
|
+
$cnvs-sys-color-chart-categorical-7: $cnvs-base-palette-purple-500;
|
|
63
|
+
$cnvs-sys-color-chart-categorical-5: $cnvs-base-palette-magenta-600;
|
|
64
|
+
$cnvs-sys-color-chart-categorical-4: $cnvs-base-palette-azure-500;
|
|
65
|
+
$cnvs-sys-color-chart-categorical-3: $cnvs-base-palette-orange-500;
|
|
66
|
+
$cnvs-sys-color-chart-categorical-2: $cnvs-base-palette-blue-800;
|
|
67
|
+
$cnvs-sys-color-chart-categorical-1: $cnvs-base-palette-teal-500;
|
|
68
|
+
$cnvs-sys-color-chart-diverging-azure-coral-23: $cnvs-base-palette-coral-900;
|
|
69
|
+
$cnvs-sys-color-chart-diverging-azure-coral-22: $cnvs-base-palette-coral-800;
|
|
70
|
+
$cnvs-sys-color-chart-diverging-azure-coral-21: $cnvs-base-palette-coral-700;
|
|
71
|
+
$cnvs-sys-color-chart-diverging-azure-coral-20: $cnvs-base-palette-coral-600;
|
|
72
|
+
$cnvs-sys-color-chart-diverging-azure-coral-19: $cnvs-base-palette-coral-500;
|
|
73
|
+
$cnvs-sys-color-chart-diverging-azure-coral-18: $cnvs-base-palette-coral-400;
|
|
74
|
+
$cnvs-sys-color-chart-diverging-azure-coral-17: $cnvs-base-palette-coral-300;
|
|
75
|
+
$cnvs-sys-color-chart-diverging-azure-coral-16: $cnvs-base-palette-coral-200;
|
|
76
|
+
$cnvs-sys-color-chart-diverging-azure-coral-15: $cnvs-base-palette-coral-100;
|
|
77
|
+
$cnvs-sys-color-chart-diverging-azure-coral-14: $cnvs-base-palette-coral-50;
|
|
78
|
+
$cnvs-sys-color-chart-diverging-azure-coral-13: $cnvs-base-palette-coral-25;
|
|
79
|
+
$cnvs-sys-color-chart-diverging-azure-coral-12: $cnvs-base-palette-neutral-0;
|
|
80
|
+
$cnvs-sys-color-chart-diverging-azure-coral-11: $cnvs-base-palette-azure-25;
|
|
81
|
+
$cnvs-sys-color-chart-diverging-azure-coral-10: $cnvs-base-palette-azure-50;
|
|
82
|
+
$cnvs-sys-color-chart-diverging-azure-coral-9: $cnvs-base-palette-azure-100;
|
|
83
|
+
$cnvs-sys-color-chart-diverging-azure-coral-8: $cnvs-base-palette-azure-200;
|
|
84
|
+
$cnvs-sys-color-chart-diverging-azure-coral-7: $cnvs-base-palette-azure-300;
|
|
85
|
+
$cnvs-sys-color-chart-diverging-azure-coral-6: $cnvs-base-palette-azure-400;
|
|
86
|
+
$cnvs-sys-color-chart-diverging-azure-coral-5: $cnvs-base-palette-azure-500;
|
|
87
|
+
$cnvs-sys-color-chart-diverging-azure-coral-4: $cnvs-base-palette-azure-600;
|
|
88
|
+
$cnvs-sys-color-chart-diverging-azure-coral-3: $cnvs-base-palette-azure-700;
|
|
89
|
+
$cnvs-sys-color-chart-diverging-azure-coral-2: $cnvs-base-palette-azure-800;
|
|
90
|
+
$cnvs-sys-color-chart-diverging-azure-coral-1: $cnvs-base-palette-azure-900;
|
|
36
91
|
$cnvs-sys-color-focus-contrast: $cnvs-base-palette-neutral-a900; // High contrast focus ring for accessibility
|
|
37
92
|
$cnvs-sys-color-focus-inverse: $cnvs-base-palette-neutral-0; // Focus ring for use on dark backgrounds
|
|
38
|
-
$cnvs-sys-color-
|
|
39
|
-
$cnvs-sys-color-
|
|
40
|
-
$cnvs-sys-color-accent-overlay-
|
|
41
|
-
$cnvs-sys-color-accent-
|
|
42
|
-
$cnvs-sys-color-accent-
|
|
93
|
+
$cnvs-sys-color-brand-fg-link-hover: $cnvs-base-palette-blue-700; // Text color for hyperlinks on hover
|
|
94
|
+
$cnvs-sys-color-brand-fg-link-default: $cnvs-base-palette-blue-600; // Default text color for hyperlinks
|
|
95
|
+
$cnvs-sys-color-accent-overlay-mixin: $cnvs-base-palette-neutral-0; // Pressed overlay mixin color for accent-colored elements
|
|
96
|
+
$cnvs-sys-color-accent-overlay-pressed: $cnvs-base-palette-white-a100; // Pressed overlay for accent-colored elements
|
|
97
|
+
$cnvs-sys-color-accent-overlay-hover: $cnvs-base-palette-white-a50; // Hover overlay for accent-colored elements
|
|
98
|
+
$cnvs-sys-color-accent-muted-soft: $cnvs-base-palette-neutral-400; // Softer muted accent for tertiary elements
|
|
99
|
+
$cnvs-sys-color-accent-muted-default: $cnvs-base-palette-neutral-600; // Muted accent for secondary visual elements
|
|
43
100
|
$cnvs-sys-color-accent-contrast: $cnvs-base-palette-neutral-a900; // High contrast accent for maximum visibility
|
|
44
101
|
$cnvs-sys-color-accent-success: $cnvs-base-palette-green-600; // Solid success accent for positive indicators (not tenant themeable)
|
|
45
102
|
$cnvs-sys-color-accent-warning: $cnvs-base-palette-amber-400; // Solid warning accent for caution indicators (not tenant themeable)
|
|
46
103
|
$cnvs-sys-color-accent-danger: $cnvs-base-palette-red-600; // Solid danger accent for error indicators (not tenant themeable)
|
|
47
104
|
$cnvs-sys-color-accent-info: $cnvs-base-palette-blue-600; // Solid info accent for indicators (not tenant themeable)
|
|
48
105
|
$cnvs-sys-color-accent-ai: $cnvs-base-palette-blue-950; // Dark accent indicating AI-generated content
|
|
106
|
+
$cnvs-sys-color-surface-text-highlight: $cnvs-base-palette-indigo-a200;
|
|
107
|
+
$cnvs-sys-color-surface-overlay-raised: $cnvs-base-palette-white-a300; // Semi-transparent backdrop behind modals and dialogs
|
|
49
108
|
$cnvs-sys-color-surface-overlay-scrim: $cnvs-base-palette-neutral-a400;
|
|
50
|
-
$cnvs-sys-color-surface-overlay-pressed-inverse: $cnvs-base-palette-white-
|
|
51
|
-
$cnvs-sys-color-surface-overlay-pressed-default: $cnvs-base-palette-
|
|
52
|
-
$cnvs-sys-color-surface-overlay-mixin: $cnvs-base-palette-
|
|
53
|
-
$cnvs-sys-color-surface-overlay-hover-inverse: $cnvs-base-palette-white-
|
|
54
|
-
$cnvs-sys-color-surface-overlay-hover-default: $cnvs-base-palette-
|
|
109
|
+
$cnvs-sys-color-surface-overlay-pressed-inverse: $cnvs-base-palette-white-a200; // Pressed overlay for containers on dark backgrounds
|
|
110
|
+
$cnvs-sys-color-surface-overlay-pressed-default: $cnvs-base-palette-neutral-a100; // Pressed state overlay for interactive containers
|
|
111
|
+
$cnvs-sys-color-surface-overlay-mixin: $cnvs-base-palette-neutral-1000; // Pressed state overlay for interactive containers
|
|
112
|
+
$cnvs-sys-color-surface-overlay-hover-inverse: $cnvs-base-palette-white-a150; // Hover overlay for containers on dark backgrounds
|
|
113
|
+
$cnvs-sys-color-surface-overlay-hover-default: $cnvs-base-palette-neutral-a50; // Hover state overlay for interactive containers
|
|
55
114
|
$cnvs-sys-color-surface-contrast-strong: $cnvs-base-palette-neutral-a950; // Stronger high contrast dark container background
|
|
56
115
|
$cnvs-sys-color-surface-contrast-default: $cnvs-base-palette-neutral-a900; // High contrast dark container background
|
|
57
116
|
$cnvs-sys-color-surface-inverse: $cnvs-base-palette-neutral-0; // Container background for use on dark backgrounds
|
|
@@ -67,13 +126,11 @@ $cnvs-sys-color-surface-danger-strong: $cnvs-base-palette-red-a50; // Stronger c
|
|
|
67
126
|
$cnvs-sys-color-surface-danger-default: $cnvs-base-palette-red-a25; // Container background for error states (not tenant themeable)
|
|
68
127
|
$cnvs-sys-color-surface-info-strong: $cnvs-base-palette-blue-a50; // Stronger container background for info badges and indicators
|
|
69
128
|
$cnvs-sys-color-surface-info-default: $cnvs-base-palette-blue-a25; // Container background for informational callouts
|
|
70
|
-
$cnvs-sys-color-surface-
|
|
71
|
-
$cnvs-sys-color-surface-alt-
|
|
72
|
-
$cnvs-sys-color-surface-alt-default: $cnvs-base-palette-slate-a50; // De-emphasized container background for secondary information
|
|
73
|
-
$cnvs-sys-color-surface-raised: $cnvs-base-palette-slate-a25; // Separates a layer from the surface, e.g. table headers or sticky elements
|
|
129
|
+
$cnvs-sys-color-surface-alt-strong: $cnvs-base-palette-neutral-a100; // Stronger de-emphasized container background
|
|
130
|
+
$cnvs-sys-color-surface-alt-default: $cnvs-base-palette-neutral-a50; // De-emphasized container background for secondary information
|
|
74
131
|
$cnvs-sys-color-surface-modal: $cnvs-base-palette-neutral-0; // Background for modal dialog containers
|
|
75
132
|
$cnvs-sys-color-surface-popover: $cnvs-base-palette-neutral-0; // Background for floating containers like dropdowns and tooltips
|
|
76
|
-
$cnvs-sys-color-surface-navigation: $cnvs-base-palette-
|
|
133
|
+
$cnvs-sys-color-surface-navigation: $cnvs-base-palette-neutral-50; // Background for navigation containers like sidebars and top bars
|
|
77
134
|
$cnvs-sys-color-surface-default: $cnvs-base-palette-neutral-0; // Default background for containers on top of the page
|
|
78
135
|
$cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-100; // Soft amber
|
|
79
136
|
$cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-950; // Stronger amber
|
|
@@ -121,11 +178,11 @@ $cnvs-sys-color-shadow-base: $cnvs-base-palette-slate-a200; // Primary shadow co
|
|
|
121
178
|
$cnvs-sys-color-border-transparent: $cnvs-base-palette-neutral-a0; // Invisible border for layout spacing
|
|
122
179
|
$cnvs-sys-color-border-inverse-strong: $cnvs-base-palette-white-a700; // Stronger border for use on dark backgrounds
|
|
123
180
|
$cnvs-sys-color-border-inverse-default: $cnvs-base-palette-neutral-0; // Border for use on dark backgrounds
|
|
124
|
-
$cnvs-sys-color-border-warning: $cnvs-base-palette-amber-
|
|
181
|
+
$cnvs-sys-color-border-warning: $cnvs-base-palette-amber-500; // Border for warning states (not tenant themeable)
|
|
125
182
|
$cnvs-sys-color-border-danger: $cnvs-base-palette-red-500; // Border for error states (not tenant themeable)
|
|
126
183
|
$cnvs-sys-color-border-info-default: $cnvs-base-palette-blue-500; // Border for informational containers (not tenant themeable)
|
|
127
|
-
$cnvs-sys-color-border-strong: $cnvs-base-palette-
|
|
128
|
-
$cnvs-sys-color-border-default: $cnvs-base-palette-
|
|
184
|
+
$cnvs-sys-color-border-strong: $cnvs-base-palette-neutral-a200; // Stronger border for more visible separation
|
|
185
|
+
$cnvs-sys-color-border-default: $cnvs-base-palette-neutral-a100; // Default border for containers and dividers
|
|
129
186
|
$cnvs-sys-color-border-container: $cnvs-base-palette-slate-300; // Cards, Toasts, Surfaces
|
|
130
187
|
$cnvs-sys-color-border-primary-default: $cnvs-base-palette-blue-500; // Brand, Focus
|
|
131
188
|
$cnvs-sys-color-border-divider: $cnvs-base-palette-slate-200; // Dividers
|
|
@@ -134,12 +191,12 @@ $cnvs-sys-color-border-caution-default: $cnvs-base-palette-amber-400; // Warning
|
|
|
134
191
|
$cnvs-sys-color-border-critical-default: $cnvs-base-palette-red-500; // Error
|
|
135
192
|
$cnvs-sys-color-border-contrast-default: $cnvs-base-palette-neutral-a900; // High contrast border for maximum visibility
|
|
136
193
|
$cnvs-sys-color-border-contrast-strong: $cnvs-base-palette-neutral-950; // Secondary Button Hover
|
|
137
|
-
$cnvs-sys-color-border-input-hover: $cnvs-base-palette-
|
|
138
|
-
$cnvs-sys-color-border-input-default: $cnvs-base-palette-
|
|
194
|
+
$cnvs-sys-color-border-input-hover: $cnvs-base-palette-neutral-a700; // Hover state border for form inputs
|
|
195
|
+
$cnvs-sys-color-border-input-default: $cnvs-base-palette-neutral-a500; // Default border for form inputs
|
|
139
196
|
$cnvs-sys-color-border-input-inverse: $cnvs-base-palette-neutral-0; // Borders on checkboxes and radios
|
|
140
197
|
$cnvs-sys-color-border-input-strong: $cnvs-base-palette-slate-700; // Input hover
|
|
141
198
|
$cnvs-sys-color-border-input-disabled: $cnvs-base-palette-slate-400; // Disabled inputs
|
|
142
|
-
$cnvs-sys-color-border-ai: $cnvs-base-palette-blue-950; //
|
|
199
|
+
$cnvs-sys-color-border-ai: $cnvs-base-palette-blue-950; // Border color for AI-focused input elements
|
|
143
200
|
$cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-neutral-a950; // Stronger high contrast text
|
|
144
201
|
$cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-neutral-a900; // High contrast text for maximum readability
|
|
145
202
|
$cnvs-sys-color-fg-ai: $cnvs-base-palette-blue-950; // Text and icons indicating AI-generated content
|
|
@@ -150,7 +207,7 @@ $cnvs-sys-color-fg-warning-default: $cnvs-base-palette-amber-600; // Warning tex
|
|
|
150
207
|
$cnvs-sys-color-fg-danger-strong: $cnvs-base-palette-red-700; // Stronger error text and icons
|
|
151
208
|
$cnvs-sys-color-fg-danger-default: $cnvs-base-palette-red-600; // Error text and icons (not tenant themeable)
|
|
152
209
|
$cnvs-sys-color-fg-inverse: $cnvs-base-palette-neutral-0; // Text and icons for use on dark backgrounds
|
|
153
|
-
$cnvs-sys-color-fg-disabled: $cnvs-base-palette-
|
|
210
|
+
$cnvs-sys-color-fg-disabled: $cnvs-base-palette-neutral-a400; // Disabled state text and icons
|
|
154
211
|
$cnvs-sys-color-fg-stronger: $cnvs-base-palette-neutral-a950; // Strongest text for titles
|
|
155
212
|
$cnvs-sys-color-fg-strong: $cnvs-base-palette-neutral-a900; // Stronger text for headings and labels
|
|
156
213
|
$cnvs-sys-color-fg-default: $cnvs-base-palette-neutral-a800; // Default body text and icons
|
|
@@ -278,7 +335,7 @@ $cnvs-sys-color-bg-muted-strong: $cnvs-base-palette-slate-700;
|
|
|
278
335
|
$cnvs-sys-color-bg-muted-default: $cnvs-base-palette-slate-600;
|
|
279
336
|
$cnvs-sys-color-bg-muted-soft: $cnvs-base-palette-slate-500;
|
|
280
337
|
$cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-slate-400;
|
|
281
|
-
$cnvs-sys-color-bg-alt-default: $cnvs-base-palette-
|
|
338
|
+
$cnvs-sys-color-bg-alt-default: $cnvs-base-palette-neutral-50; // Alternative page background for visual separation between page sections
|
|
282
339
|
$cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-slate-300; // Active state for segmented control, Pill
|
|
283
340
|
$cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-slate-200; // Active states
|
|
284
341
|
$cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-slate-50; // Alternative page background
|
|
@@ -310,9 +367,9 @@ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
|
|
|
310
367
|
$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
|
|
311
368
|
$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
|
|
312
369
|
$cnvs-sys-space-x14: calc($cnvs-base-unit * 14); // Mobile only
|
|
313
|
-
$cnvs-sys-space-x10: calc($cnvs-base-unit * 10); //
|
|
314
|
-
$cnvs-sys-space-x8: calc($cnvs-base-unit * 8); //
|
|
315
|
-
$cnvs-sys-space-x6: calc($cnvs-base-unit * 6); //
|
|
370
|
+
$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
|
|
371
|
+
$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
|
|
372
|
+
$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
|
|
316
373
|
$cnvs-sys-space-x5: calc($cnvs-base-unit * 5); // Mobile only
|
|
317
374
|
$cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
318
375
|
$cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
|
|
@@ -331,24 +388,28 @@ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
|
|
|
331
388
|
$cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
|
|
332
389
|
$cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
|
|
333
390
|
$cnvs-sys-opacity-surface-hover: $cnvs-base-opacity-100; // State layer applied to surface colors on hover
|
|
391
|
+
$cnvs-sys-color-chart-categorical-16: $cnvs-brand-caution-700;
|
|
392
|
+
$cnvs-sys-color-chart-categorical-15: $cnvs-brand-positive-800;
|
|
393
|
+
$cnvs-sys-color-chart-categorical-8: $cnvs-brand-caution-500;
|
|
394
|
+
$cnvs-sys-color-chart-categorical-6: $cnvs-brand-positive-600;
|
|
334
395
|
$cnvs-sys-color-brand-border-caution: $cnvs-brand-caution-500; // Tenant-themeable caution border for warning states
|
|
335
396
|
$cnvs-sys-color-brand-border-critical: $cnvs-brand-critical-500; // Tenant-themeable critical border for error states
|
|
336
397
|
$cnvs-sys-color-brand-border-primary: $cnvs-brand-primary-500; // Tenant-themeable primary border for focused inputs
|
|
337
|
-
$cnvs-sys-color-brand-fg-selected: $cnvs-brand-
|
|
398
|
+
$cnvs-sys-color-brand-fg-selected: $cnvs-brand-neutral-a900; // Tenant-themeable text color for selected items
|
|
338
399
|
$cnvs-sys-color-brand-fg-positive-strong: $cnvs-brand-positive-700; // Stronger tenant-themeable positive text and icon color
|
|
339
400
|
$cnvs-sys-color-brand-fg-positive-default: $cnvs-brand-positive-600; // Tenant-themeable positive text and icon color
|
|
340
401
|
$cnvs-sys-color-brand-fg-caution-strong: $cnvs-brand-caution-700; // Stronger tenant-themeable caution text and icon color
|
|
341
402
|
$cnvs-sys-color-brand-fg-caution-default: $cnvs-brand-caution-600; // Tenant-themeable caution text and icon color
|
|
342
403
|
$cnvs-sys-color-brand-fg-critical-strong: $cnvs-brand-critical-700; // Stronger tenant-themeable critical text and icon color
|
|
343
404
|
$cnvs-sys-color-brand-fg-critical-default: $cnvs-brand-critical-600; // Tenant-themeable critical text and icon color
|
|
344
|
-
$cnvs-sys-color-brand-fg-primary-strong: $cnvs-brand-
|
|
345
|
-
$cnvs-sys-color-brand-fg-primary-default: $cnvs-brand-
|
|
346
|
-
$cnvs-sys-color-brand-accent-action: $cnvs-brand-
|
|
405
|
+
$cnvs-sys-color-brand-fg-primary-strong: $cnvs-brand-neutral-a950; // Stronger tenant-themeable primary text and icon color
|
|
406
|
+
$cnvs-sys-color-brand-fg-primary-default: $cnvs-brand-neutral-a900; // Tenant-themeable primary text and icon color
|
|
407
|
+
$cnvs-sys-color-brand-accent-action: $cnvs-brand-neutral-975;
|
|
347
408
|
$cnvs-sys-color-brand-accent-positive: $cnvs-brand-positive-600; // Tenant-themeable solid positive accent
|
|
348
409
|
$cnvs-sys-color-brand-accent-caution: $cnvs-brand-caution-400; // Tenant-themeable solid caution accent
|
|
349
410
|
$cnvs-sys-color-brand-accent-critical: $cnvs-brand-critical-600; // Tenant-themeable solid critical accent for destructive actions
|
|
350
|
-
$cnvs-sys-color-brand-accent-primary: $cnvs-brand-
|
|
351
|
-
$cnvs-sys-color-brand-surface-selected: $cnvs-brand-
|
|
411
|
+
$cnvs-sys-color-brand-accent-primary: $cnvs-brand-neutral-975; // Tenant-themeable solid primary accent for buttons and key actions
|
|
412
|
+
$cnvs-sys-color-brand-surface-selected: $cnvs-brand-neutral-a100; // Tenant-themeable background for selected items
|
|
352
413
|
$cnvs-sys-color-brand-surface-positive-strong: $cnvs-brand-positive-a50; // Stronger tenant-themeable positive container background
|
|
353
414
|
$cnvs-sys-color-brand-surface-positive-default: $cnvs-brand-positive-a25; // Tenant-themeable positive/success container background
|
|
354
415
|
$cnvs-sys-color-brand-surface-caution-strong: $cnvs-brand-caution-a50; // Stronger tenant-themeable caution container background
|
|
@@ -361,11 +422,14 @@ $cnvs-sys-color-brand-focus-caution-inner: $cnvs-brand-caution-400; // Tenant-th
|
|
|
361
422
|
$cnvs-sys-color-brand-focus-caution-outer: $cnvs-brand-caution-500; // Tenant-themeable outer focus ring for caution-state elements
|
|
362
423
|
$cnvs-sys-color-brand-focus-critical: $cnvs-brand-critical-500; // Tenant-themeable focus ring for error-state elements
|
|
363
424
|
$cnvs-sys-color-brand-focus-primary: $cnvs-brand-primary-500; // Tenant-themeable focus ring for interactive elements
|
|
425
|
+
$cnvs-sys-color-surface-loading: $cnvs-brand-neutral-a50; // Background for skeleton loaders and loading states
|
|
426
|
+
$cnvs-sys-color-surface-raised: $cnvs-brand-neutral-a25; // Separates a layer from the surface, e.g. table headers or sticky elements
|
|
364
427
|
$cnvs-sys-color-shadow-default: $cnvs-sys-color-shadow-base; // Main shadow color
|
|
365
428
|
$cnvs-sys-color-shadow-2: $cnvs-sys-color-shadow-ambient; // Second shadow color
|
|
366
429
|
$cnvs-sys-color-shadow-1: $cnvs-sys-color-shadow-base; // First shadow color
|
|
367
430
|
$cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
|
|
368
431
|
$cnvs-sys-shape-zero: $cnvs-sys-shape-none; // Full-width and background containers. Fixed navigation containers such as headers, and side-panels.
|
|
432
|
+
$cnvs-sys-breakpoints-xxl: 2180px; // Figma only. Use as the max-width on xl media query.
|
|
369
433
|
$cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
|
|
370
434
|
$cnvs-sys-breakpoints-lg: 1024px; // Large screens, such as desktops.
|
|
371
435
|
$cnvs-sys-breakpoints-md: 768px; // Medium screens, such as laptops.
|
|
@@ -398,7 +462,7 @@ $cnvs-sys-line-height-heading-lg: $cnvs-base-size-500;
|
|
|
398
462
|
$cnvs-sys-line-height-heading-md: $cnvs-base-size-450;
|
|
399
463
|
$cnvs-sys-line-height-heading-sm: $cnvs-base-size-400;
|
|
400
464
|
$cnvs-sys-line-height-body-lg: $cnvs-base-size-350;
|
|
401
|
-
$cnvs-sys-line-height-body-md: $cnvs-base-size-
|
|
465
|
+
$cnvs-sys-line-height-body-md: $cnvs-base-size-300;
|
|
402
466
|
$cnvs-sys-line-height-body-sm: $cnvs-base-size-300;
|
|
403
467
|
$cnvs-sys-line-height-subtext-lg: $cnvs-base-size-250;
|
|
404
468
|
$cnvs-sys-line-height-subtext-md: $cnvs-base-size-200;
|
|
@@ -417,12 +481,13 @@ $cnvs-sys-font-size-subtext-md: $cnvs-base-size-150;
|
|
|
417
481
|
$cnvs-sys-font-size-subtext-sm: $cnvs-base-size-125;
|
|
418
482
|
$cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
|
|
419
483
|
$cnvs-sys-shape-full: calc($cnvs-base-size-75 * 100); // Full rounding is reserved high-visibility components. This shape is intended to draw attention. Buttons, Badge, Status Indicator, Essential Inputs, Border Containers (Not Cards)
|
|
420
|
-
$cnvs-sys-shape-xxxl: $cnvs-base-size-
|
|
421
|
-
$cnvs-sys-shape-xxl: $cnvs-base-size-
|
|
484
|
+
$cnvs-sys-shape-xxxl: $cnvs-base-size-350; // Large elevated surfaces, like Modals
|
|
485
|
+
$cnvs-sys-shape-xxl: $cnvs-base-size-250; // Flat or raised surfaces, like Cards or Menu
|
|
422
486
|
$cnvs-sys-shape-xl: $cnvs-base-size-200; // Extra large rounding for prominent containers
|
|
423
487
|
$cnvs-sys-shape-lg: $cnvs-base-size-150; // Rich text editor
|
|
424
488
|
$cnvs-sys-shape-md: $cnvs-base-size-100; // Inputs, Toast, Tooltip, Snackbar
|
|
425
|
-
$cnvs-sys-shape-sm: $cnvs-base-size-
|
|
489
|
+
$cnvs-sys-shape-sm: $cnvs-base-size-75; // Compact components that leverage smaller typography, like Pills or Status Indicator
|
|
490
|
+
$cnvs-sys-shape-xs: $cnvs-base-size-50; // Pill, Status Indicator, Checkbox
|
|
426
491
|
$cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
|
|
427
492
|
$cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
|
|
428
493
|
$cnvs-sys-font-size-body-large: $cnvs-base-font-size-150;
|
|
@@ -432,12 +497,12 @@ $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
|
|
|
432
497
|
$cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
|
|
433
498
|
$cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
|
|
434
499
|
$cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
|
|
435
|
-
$cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(0.
|
|
436
|
-
$cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(0.
|
|
437
|
-
$cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(0.
|
|
438
|
-
$cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(0.
|
|
439
|
-
$cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(0.
|
|
440
|
-
$cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.
|
|
500
|
+
$cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.125rem 0.5rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); // Standard card depth
|
|
501
|
+
$cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.25rem 1rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); // Top navigation, Bottom Navigation
|
|
502
|
+
$cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.375rem 1.5rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); // Floating Action Buttons (FAB), Menus
|
|
503
|
+
$cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.5rem 2rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); // Bottom Sheets
|
|
504
|
+
$cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.625rem 2.5rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
|
|
505
|
+
$cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.2751 0.1026 258.16 / 0.1922), 0 0.75rem 3rem 0 oklch(0.3039 0.0952 253.5 / 0.0863); // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
|
|
441
506
|
|
|
442
507
|
.cnvs-sys-type-subtext-small {
|
|
443
508
|
font-family: $cnvs-sys-font-family-default;
|
|
@@ -522,6 +587,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
522
587
|
font-weight: $cnvs-sys-font-weight-normal;
|
|
523
588
|
line-height: $cnvs-sys-line-height-body-md;
|
|
524
589
|
font-size: $cnvs-sys-font-size-body-md;
|
|
590
|
+
letter-spacing: $cnvs-sys-letter-spacing-body-md;
|
|
525
591
|
}
|
|
526
592
|
|
|
527
593
|
.cnvs-sys-type-body-lg {
|
|
@@ -529,6 +595,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
529
595
|
font-weight: $cnvs-sys-font-weight-normal;
|
|
530
596
|
line-height: $cnvs-sys-line-height-body-lg;
|
|
531
597
|
font-size: $cnvs-sys-font-size-body-lg;
|
|
598
|
+
letter-spacing: $cnvs-sys-letter-spacing-body-lg;
|
|
532
599
|
}
|
|
533
600
|
|
|
534
601
|
.cnvs-sys-type-heading-small {
|
|
@@ -557,6 +624,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
557
624
|
font-weight: $cnvs-sys-font-weight-bold;
|
|
558
625
|
line-height: $cnvs-sys-line-height-heading-sm;
|
|
559
626
|
font-size: $cnvs-sys-font-size-heading-sm;
|
|
627
|
+
letter-spacing: $cnvs-sys-letter-spacing-heading-sm;
|
|
560
628
|
}
|
|
561
629
|
|
|
562
630
|
.cnvs-sys-type-heading-md {
|
|
@@ -564,6 +632,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
564
632
|
font-weight: $cnvs-sys-font-weight-bold;
|
|
565
633
|
line-height: $cnvs-sys-line-height-heading-md;
|
|
566
634
|
font-size: $cnvs-sys-font-size-heading-md;
|
|
635
|
+
letter-spacing: $cnvs-sys-letter-spacing-heading-md;
|
|
567
636
|
}
|
|
568
637
|
|
|
569
638
|
.cnvs-sys-type-heading-lg {
|
|
@@ -571,6 +640,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
571
640
|
font-weight: $cnvs-sys-font-weight-bold;
|
|
572
641
|
line-height: $cnvs-sys-line-height-heading-lg;
|
|
573
642
|
font-size: $cnvs-sys-font-size-heading-lg;
|
|
643
|
+
letter-spacing: $cnvs-sys-letter-spacing-heading-lg;
|
|
574
644
|
}
|
|
575
645
|
|
|
576
646
|
.cnvs-sys-type-title-small {
|
|
@@ -599,6 +669,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
599
669
|
font-weight: $cnvs-sys-font-weight-bold;
|
|
600
670
|
line-height: $cnvs-sys-line-height-title-sm;
|
|
601
671
|
font-size: $cnvs-sys-font-size-title-sm;
|
|
672
|
+
letter-spacing: $cnvs-sys-letter-spacing-title-sm;
|
|
602
673
|
}
|
|
603
674
|
|
|
604
675
|
.cnvs-sys-type-title-md {
|
|
@@ -606,6 +677,7 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
606
677
|
font-weight: $cnvs-sys-font-weight-bold;
|
|
607
678
|
line-height: $cnvs-sys-line-height-title-md;
|
|
608
679
|
font-size: $cnvs-sys-font-size-title-md;
|
|
680
|
+
letter-spacing: $cnvs-sys-letter-spacing-title-md;
|
|
609
681
|
}
|
|
610
682
|
|
|
611
683
|
.cnvs-sys-type-title-lg {
|
|
@@ -613,4 +685,5 @@ $cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75
|
|
|
613
685
|
font-weight: $cnvs-sys-font-weight-bold;
|
|
614
686
|
line-height: $cnvs-sys-line-height-title-lg;
|
|
615
687
|
font-size: $cnvs-sys-font-size-title-lg;
|
|
688
|
+
letter-spacing: $cnvs-sys-letter-spacing-title-lg;
|
|
616
689
|
}
|