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