@workday/canvas-tokens-web 4.0.0-alpha.1 → 4.0.0-alpha.10
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 +106 -17
- package/css/brand/_variables.css +136 -38
- package/css/system/_variables.css +291 -199
- package/dist/common-js/base/index.d.ts +108 -15
- package/dist/common-js/base/index.js +103 -14
- package/dist/common-js/brand/index.d.ts +381 -65
- package/dist/common-js/brand/index.js +102 -2
- 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 +1681 -1349
- package/dist/common-js/system/index.js +269 -107
- package/dist/es6/base/index.d.ts +108 -15
- package/dist/es6/base/index.js +103 -14
- package/dist/es6/brand/index.d.ts +381 -65
- package/dist/es6/brand/index.js +102 -2
- package/dist/es6/index.d.ts +3 -3
- package/dist/es6/index.js +3 -3
- package/dist/es6/system/index.d.ts +1681 -1349
- package/dist/es6/system/index.js +269 -107
- package/less/base/_variables.less +106 -17
- package/less/brand/_variables.less +136 -38
- package/less/system/_variables.less +291 -199
- package/package.json +5 -1
- package/scss/base/_variables.sass +106 -17
- package/scss/base/_variables.scss +106 -17
- package/scss/brand/_variables.sass +136 -38
- package/scss/brand/_variables.scss +136 -38
- package/scss/system/_variables.sass +291 -199
- package/scss/system/_variables.scss +291 -199
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 16 Jan 2026 20:45:01 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(
|
|
8
|
-
--cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(
|
|
9
|
-
--cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(
|
|
10
|
-
--cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(
|
|
11
|
-
--cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(
|
|
12
|
-
--cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(
|
|
7
|
+
--cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.125rem 0.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Standard card depth */
|
|
8
|
+
--cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.25rem 1rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Top navigation, Bottom Navigation */
|
|
9
|
+
--cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.375rem 1.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Floating Action Buttons (FAB), Menus */
|
|
10
|
+
--cnvs-sys-depth-4: 0 0.25rem 1rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.5rem 2rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Bottom Sheets */
|
|
11
|
+
--cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.625rem 2.5rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
|
|
12
|
+
--cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 oklch(0.3057 0.079 256.22 / 0.13), 0 0.75rem 3rem 0 oklch(0.3337 0.0688 250.79 / 0.09); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
|
|
13
13
|
--cnvs-sys-opacity-full: 1; /* Dev only */
|
|
14
|
-
--cnvs-sys-opacity-zero: 0; /* Dev only */
|
|
15
14
|
--cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
|
|
16
15
|
--cnvs-sys-breakpoints-zero: 0; /* Use to set a media query `min-width` below small. */
|
|
17
16
|
--cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
|
|
@@ -27,219 +26,157 @@
|
|
|
27
26
|
--cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
|
|
28
27
|
--cnvs-sys-gap-none: var(--cnvs-base-size-0); /* Use when there is no space between elements */
|
|
29
28
|
--cnvs-sys-padding-none: var(--cnvs-base-size-0); /* Use when there should be no space between content and element's edges. */
|
|
30
|
-
--cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-
|
|
31
|
-
--cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-
|
|
32
|
-
--cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-
|
|
33
|
-
--cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-
|
|
34
|
-
--cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-
|
|
35
|
-
--cnvs-sys-
|
|
36
|
-
--cnvs-sys-color-
|
|
37
|
-
--cnvs-sys-color-
|
|
38
|
-
--cnvs-sys-color-
|
|
29
|
+
--cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-80); /* Alpha on second shadow */
|
|
30
|
+
--cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-120); /* Alpha on first shadow */
|
|
31
|
+
--cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-840); /* Tooltips, Status Indicator */
|
|
32
|
+
--cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-640); /* Overlay */
|
|
33
|
+
--cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-400); /* Disabled states */
|
|
34
|
+
--cnvs-sys-opacity-zero: var(--cnvs-base-opacity-0); /* Dev only */
|
|
35
|
+
--cnvs-sys-color-focus-contrast: var(--cnvs-base-palette-neutral-a900);
|
|
36
|
+
--cnvs-sys-color-focus-inverse: var(--cnvs-base-palette-neutral-0);
|
|
37
|
+
--cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400);
|
|
38
|
+
--cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200);
|
|
39
|
+
--cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-slate-400);
|
|
40
|
+
--cnvs-sys-color-accent-muted-default: var(--cnvs-base-palette-slate-600);
|
|
41
|
+
--cnvs-sys-color-accent-contrast: var(--cnvs-base-palette-neutral-a900);
|
|
42
|
+
--cnvs-sys-color-accent-success: var(--cnvs-base-palette-green-600);
|
|
43
|
+
--cnvs-sys-color-accent-warning: var(--cnvs-base-palette-amber-400);
|
|
44
|
+
--cnvs-sys-color-accent-danger: var(--cnvs-base-palette-red-600);
|
|
45
|
+
--cnvs-sys-color-accent-info: var(--cnvs-base-palette-blue-600);
|
|
46
|
+
--cnvs-sys-color-accent-ai: var(--cnvs-base-palette-blue-950);
|
|
47
|
+
--cnvs-sys-color-surface-overlay-scrim: var(--cnvs-base-palette-neutral-a400);
|
|
48
|
+
--cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a300);
|
|
49
|
+
--cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a100);
|
|
50
|
+
--cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a200);
|
|
51
|
+
--cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a50);
|
|
52
|
+
--cnvs-sys-color-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950);
|
|
53
|
+
--cnvs-sys-color-surface-contrast-default: var(--cnvs-base-palette-neutral-a900);
|
|
54
|
+
--cnvs-sys-color-surface-inverse: var(--cnvs-base-palette-neutral-0);
|
|
55
|
+
--cnvs-sys-color-surface-transparent: var(--cnvs-base-palette-neutral-a0);
|
|
56
|
+
--cnvs-sys-color-surface-ai-pressed: var(--cnvs-base-palette-blue-a200);
|
|
57
|
+
--cnvs-sys-color-surface-ai-hover: var(--cnvs-base-palette-blue-a200);
|
|
58
|
+
--cnvs-sys-color-surface-ai-default: var(--cnvs-base-palette-blue-a100);
|
|
59
|
+
--cnvs-sys-color-surface-success-strong: var(--cnvs-base-palette-green-a50);
|
|
60
|
+
--cnvs-sys-color-surface-success-default: var(--cnvs-base-palette-green-a25);
|
|
61
|
+
--cnvs-sys-color-surface-warning-strong: var(--cnvs-base-palette-amber-a50);
|
|
62
|
+
--cnvs-sys-color-surface-warning-default: var(--cnvs-base-palette-amber-a25);
|
|
63
|
+
--cnvs-sys-color-surface-danger-strong: var(--cnvs-base-palette-red-a50);
|
|
64
|
+
--cnvs-sys-color-surface-danger-default: var(--cnvs-base-palette-red-a25);
|
|
65
|
+
--cnvs-sys-color-surface-info-strong: var(--cnvs-base-palette-blue-a50); /* Surface color used on the backgrounds of informational status indicators and badges */
|
|
66
|
+
--cnvs-sys-color-surface-info-default: var(--cnvs-base-palette-blue-a25); /* Surface color used on the backgrounds of informational highlights and sections */
|
|
67
|
+
--cnvs-sys-color-surface-loading: var(--cnvs-base-palette-slate-a200);
|
|
68
|
+
--cnvs-sys-color-surface-alt-strong: var(--cnvs-base-palette-slate-a100); /* Strong alternative surface color */
|
|
69
|
+
--cnvs-sys-color-surface-alt-default: var(--cnvs-base-palette-slate-a50); /* Alternative surface color */
|
|
70
|
+
--cnvs-sys-color-surface-raised: var(--cnvs-base-palette-slate-a25); /* Surfaces that are raised above another surface, such as column headers in Tables */
|
|
71
|
+
--cnvs-sys-color-surface-modal: var(--cnvs-base-palette-neutral-0);
|
|
72
|
+
--cnvs-sys-color-surface-popover: var(--cnvs-base-palette-neutral-0);
|
|
73
|
+
--cnvs-sys-color-surface-navigation: var(--cnvs-base-palette-slate-50); /* Surface color for navigation elements, like the SidePanel or Top Nav Bar */
|
|
74
|
+
--cnvs-sys-color-surface-default: var(--cnvs-base-palette-neutral-0); /* Default surface background */
|
|
75
|
+
--cnvs-sys-color-static-amber-softer: var(--cnvs-base-palette-amber-50); /* Soft amber */
|
|
76
|
+
--cnvs-sys-color-static-gray-softer: var(--cnvs-base-palette-slate-100); /* Light gray */
|
|
77
|
+
--cnvs-sys-color-static-gray-softest: var(--cnvs-base-palette-slate-50); /* Light gray */
|
|
78
|
+
--cnvs-sys-color-static-gray-strongest: var(--cnvs-base-palette-slate-950); /* Stronger gray */
|
|
79
|
+
--cnvs-sys-color-static-gray-stronger: var(--cnvs-base-palette-slate-800); /* Stronger gray */
|
|
80
|
+
--cnvs-sys-color-static-gray-strong: var(--cnvs-base-palette-slate-700); /* Stronger gray */
|
|
81
|
+
--cnvs-sys-color-static-gray-soft: var(--cnvs-base-palette-slate-200); /* Light gray */
|
|
82
|
+
--cnvs-sys-color-static-gray-default: var(--cnvs-base-palette-slate-600); /* Gray */
|
|
83
|
+
--cnvs-sys-color-static-black: var(--cnvs-base-palette-neutral-1000); /* Just black */
|
|
84
|
+
--cnvs-sys-color-static-white: var(--cnvs-base-palette-neutral-0); /* Just white */
|
|
85
|
+
--cnvs-sys-color-static-red-softer: var(--cnvs-base-palette-red-50); /* Light red */
|
|
86
|
+
--cnvs-sys-color-static-red-strongest: var(--cnvs-base-palette-red-950); /* Strong red */
|
|
87
|
+
--cnvs-sys-color-static-red-softest: var(--cnvs-base-palette-red-25); /* Light red */
|
|
88
|
+
--cnvs-sys-color-static-red-stronger: var(--cnvs-base-palette-red-800); /* Strong red */
|
|
89
|
+
--cnvs-sys-color-static-red-strong: var(--cnvs-base-palette-red-700); /* Strong red */
|
|
90
|
+
--cnvs-sys-color-static-red-soft: var(--cnvs-base-palette-red-100); /* Light red */
|
|
91
|
+
--cnvs-sys-color-static-red-default: var(--cnvs-base-palette-red-600); /* Red */
|
|
92
|
+
--cnvs-sys-color-static-green-strongest: var(--cnvs-base-palette-green-950); /* Stronger green */
|
|
93
|
+
--cnvs-sys-color-static-green-softest: var(--cnvs-base-palette-green-25); /* Light green */
|
|
94
|
+
--cnvs-sys-color-static-green-stronger: var(--cnvs-base-palette-green-800); /* Stronger green */
|
|
95
|
+
--cnvs-sys-color-static-green-softer: var(--cnvs-base-palette-green-50); /* Light green */
|
|
96
|
+
--cnvs-sys-color-static-green-strong: var(--cnvs-base-palette-green-700); /* Stronger green */
|
|
97
|
+
--cnvs-sys-color-static-green-soft: var(--cnvs-base-palette-green-100); /* Light green */
|
|
98
|
+
--cnvs-sys-color-static-green-default: var(--cnvs-base-palette-green-600); /* Default green */
|
|
99
|
+
--cnvs-sys-color-static-blue-strongest: var(--cnvs-base-palette-blue-950); /* Stronger blue */
|
|
100
|
+
--cnvs-sys-color-static-blue-soft: var(--cnvs-base-palette-blue-100); /* Light blue */
|
|
101
|
+
--cnvs-sys-color-static-blue-softer: var(--cnvs-base-palette-blue-50); /* Light blue */
|
|
102
|
+
--cnvs-sys-color-static-blue-stronger: var(--cnvs-base-palette-blue-800); /* Stronger blue */
|
|
103
|
+
--cnvs-sys-color-static-blue-strong: var(--cnvs-base-palette-blue-700); /* Stronger blue */
|
|
104
|
+
--cnvs-sys-color-static-blue-softest: var(--cnvs-base-palette-blue-25); /* Light blue */
|
|
105
|
+
--cnvs-sys-color-static-orange-strong: var(--cnvs-base-palette-amber-500);
|
|
106
|
+
--cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-amber-100);
|
|
107
|
+
--cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-amber-400);
|
|
108
|
+
--cnvs-sys-color-static-gold-stronger: var(--cnvs-base-palette-amber-600);
|
|
109
|
+
--cnvs-sys-color-shadow-ambient: var(--cnvs-base-palette-slate-a100);
|
|
110
|
+
--cnvs-sys-color-shadow-base: var(--cnvs-base-palette-slate-a200);
|
|
111
|
+
--cnvs-sys-color-border-transparent: var(--cnvs-base-palette-neutral-a0);
|
|
112
|
+
--cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700);
|
|
113
|
+
--cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-white-a500);
|
|
114
|
+
--cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-400);
|
|
115
|
+
--cnvs-sys-color-border-danger: var(--cnvs-base-palette-red-500);
|
|
116
|
+
--cnvs-sys-color-border-strong: var(--cnvs-base-palette-slate-a300);
|
|
39
117
|
--cnvs-sys-color-border-ai: var(--cnvs-base-palette-blue-950); /* Active state on AI borders */
|
|
40
|
-
--cnvs-sys-color-border-
|
|
41
|
-
--cnvs-sys-color-border-
|
|
42
|
-
--cnvs-sys-color-border-
|
|
43
|
-
--cnvs-sys-color-border-
|
|
44
|
-
--cnvs-sys-color-border-
|
|
45
|
-
--cnvs-sys-color-
|
|
46
|
-
--cnvs-sys-color-
|
|
47
|
-
--cnvs-sys-color-
|
|
48
|
-
--cnvs-sys-color-
|
|
49
|
-
--cnvs-sys-color-
|
|
50
|
-
--cnvs-sys-color-
|
|
51
|
-
--cnvs-sys-color-
|
|
52
|
-
--cnvs-sys-color-
|
|
53
|
-
--cnvs-sys-color-
|
|
54
|
-
--cnvs-sys-color-fg-
|
|
55
|
-
--cnvs-sys-color-fg-
|
|
118
|
+
--cnvs-sys-color-border-default: var(--cnvs-base-palette-slate-a200);
|
|
119
|
+
--cnvs-sys-color-border-info-default: var(--cnvs-base-palette-blue-500); /* Brand, Focus */
|
|
120
|
+
--cnvs-sys-color-border-contrast-default: var(--cnvs-base-palette-neutral-a900); /* Secondary Button */
|
|
121
|
+
--cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-slate-a700); /* Input hover */
|
|
122
|
+
--cnvs-sys-color-border-input-default: var(--cnvs-base-palette-slate-a500); /* Inputs */
|
|
123
|
+
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-a950);
|
|
124
|
+
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-a900);
|
|
125
|
+
--cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* AI icons and text */
|
|
126
|
+
--cnvs-sys-color-fg-success-strong: var(--cnvs-base-palette-green-700);
|
|
127
|
+
--cnvs-sys-color-fg-success-default: var(--cnvs-base-palette-green-600);
|
|
128
|
+
--cnvs-sys-color-fg-warning-strong: var(--cnvs-base-palette-amber-700);
|
|
129
|
+
--cnvs-sys-color-fg-warning-default: var(--cnvs-base-palette-amber-600);
|
|
130
|
+
--cnvs-sys-color-fg-danger-strong: var(--cnvs-base-palette-red-700); /* Stronger color used on text or icons that indicate critical messaging, like an error. */
|
|
131
|
+
--cnvs-sys-color-fg-danger-default: var(--cnvs-base-palette-red-600); /* Used on text or icons that indicate critical messaging, like an error. */
|
|
132
|
+
--cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Used for text and icons on dark backgrounds */
|
|
133
|
+
--cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-a400); /* Indicates disabled text or icons */
|
|
134
|
+
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-a950); /* Used on titles and stronger text and headings */
|
|
135
|
+
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-a900); /* Used on headings and strong text and icons */
|
|
136
|
+
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-a800); /* Default color used on text and icons */
|
|
56
137
|
--cnvs-sys-color-fg-positive-soft: var(--cnvs-base-palette-green-400); /* Error */
|
|
57
138
|
--cnvs-sys-color-fg-positive-softer: var(--cnvs-base-palette-green-200); /* Error */
|
|
58
|
-
--cnvs-sys-color-fg-
|
|
59
|
-
--cnvs-sys-color-fg-info-stronger: var(--cnvs-base-palette-blue-800); /* Links on hover */
|
|
60
|
-
--cnvs-sys-color-fg-info-strong: var(--cnvs-base-palette-blue-700); /* Links on hover */
|
|
61
|
-
--cnvs-sys-color-fg-info-default: var(--cnvs-base-palette-blue-600); /* Links, Accent */
|
|
139
|
+
--cnvs-sys-color-fg-info-default: var(--cnvs-base-palette-blue-600);
|
|
62
140
|
--cnvs-sys-color-fg-info-soft: var(--cnvs-base-palette-blue-400);
|
|
63
|
-
--cnvs-sys-color-fg-info-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
|
|
64
|
-
--cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* AI icons and text */
|
|
65
|
-
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Strong contrast */
|
|
66
|
-
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast */
|
|
67
141
|
--cnvs-sys-color-fg-caution-softer: var(--cnvs-base-palette-amber-500); /* Warning */
|
|
68
142
|
--cnvs-sys-color-fg-caution-stronger: var(--cnvs-base-palette-amber-975); /* Warning on hover */
|
|
69
143
|
--cnvs-sys-color-fg-caution-soft: var(--cnvs-base-palette-amber-700); /* Warning */
|
|
70
|
-
--cnvs-sys-color-fg-caution-strong: var(--cnvs-base-palette-amber-950); /* Warning on hover */
|
|
71
|
-
--cnvs-sys-color-fg-caution-default: var(--cnvs-base-palette-amber-900); /* Warning */
|
|
72
|
-
--cnvs-sys-color-fg-primary-stronger: var(--cnvs-base-palette-blue-800); /* Links on hover */
|
|
73
144
|
--cnvs-sys-color-fg-primary-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
|
|
74
145
|
--cnvs-sys-color-fg-primary-soft: var(--cnvs-base-palette-blue-400);
|
|
75
|
-
--cnvs-sys-color-fg-
|
|
76
|
-
--cnvs-sys-color-fg-
|
|
146
|
+
--cnvs-sys-color-fg-muted-strong: var(--cnvs-base-palette-slate-a700); /* Stronger color used for hint or placeholder text */
|
|
147
|
+
--cnvs-sys-color-fg-muted-default: var(--cnvs-base-palette-slate-a600); /* Used for hint and placeholder text */
|
|
77
148
|
--cnvs-sys-color-fg-muted-soft: var(--cnvs-base-palette-slate-400); /* Tab item foreground */
|
|
78
|
-
--cnvs-sys-color-fg-muted-stronger: var(--cnvs-base-palette-slate-800);
|
|
79
|
-
--cnvs-sys-color-fg-muted-strong: var(--cnvs-base-palette-slate-700);
|
|
80
|
-
--cnvs-sys-color-fg-muted-default: var(--cnvs-base-palette-slate-600); /* Hint text */
|
|
81
149
|
--cnvs-sys-color-fg-critical-softer: var(--cnvs-base-palette-red-200); /* Error */
|
|
82
150
|
--cnvs-sys-color-fg-critical-soft: var(--cnvs-base-palette-red-400); /* Error */
|
|
83
151
|
--cnvs-sys-color-fg-critical-stronger: var(--cnvs-base-palette-red-800); /* Error */
|
|
84
|
-
--cnvs-sys-color-fg-critical-strong: var(--cnvs-base-palette-red-700); /* Error */
|
|
85
|
-
--cnvs-sys-color-fg-critical-default: var(--cnvs-base-palette-red-600); /* Error */
|
|
86
|
-
--cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse */
|
|
87
|
-
--cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-400); /* Disabled */
|
|
88
|
-
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-950); /* Heading on hover */
|
|
89
|
-
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-900); /* Headings */
|
|
90
|
-
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-800); /* Body */
|
|
91
152
|
--cnvs-sys-color-icon-info-stronger: var(--cnvs-base-palette-blue-800); /* Stronger brand icon color */
|
|
92
|
-
--cnvs-sys-color-icon-info-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
|
|
93
|
-
--cnvs-sys-color-icon-info-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
|
|
94
153
|
--cnvs-sys-color-icon-disabled: var(--cnvs-base-palette-slate-400); /* Disabled icon color */
|
|
95
154
|
--cnvs-sys-color-icon-caution-softer: var(--cnvs-base-palette-amber-500); /* Softer caution icon color */
|
|
96
|
-
--cnvs-sys-color-icon-caution-soft: var(--cnvs-base-palette-amber-700); /* Soft caution icon color */
|
|
97
|
-
--cnvs-sys-color-icon-caution-stronger: var(--cnvs-base-palette-amber-975); /* Strong caution icon color */
|
|
98
|
-
--cnvs-sys-color-icon-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong caution icon color */
|
|
99
|
-
--cnvs-sys-color-icon-caution-default: var(--cnvs-base-palette-amber-900); /* Caution icon color */
|
|
100
155
|
--cnvs-sys-color-icon-critical-softer: var(--cnvs-base-palette-red-200); /* Error icon color */
|
|
101
156
|
--cnvs-sys-color-icon-critical-soft: var(--cnvs-base-palette-red-400); /* Error icon color */
|
|
102
157
|
--cnvs-sys-color-icon-critical-stronger: var(--cnvs-base-palette-red-800); /* Error icon color */
|
|
103
|
-
--cnvs-sys-color-icon-critical-strong: var(--cnvs-base-palette-red-700); /* Error icon color */
|
|
104
|
-
--cnvs-sys-color-icon-critical-default: var(--cnvs-base-palette-red-600); /* Error icon color */
|
|
105
158
|
--cnvs-sys-color-icon-positive-softer: var(--cnvs-base-palette-green-200); /* Success icon color */
|
|
106
159
|
--cnvs-sys-color-icon-positive-soft: var(--cnvs-base-palette-green-400); /* Success icon color */
|
|
107
|
-
--cnvs-sys-color-icon-positive-stronger: var(--cnvs-base-palette-green-800); /* Success icon color */
|
|
108
|
-
--cnvs-sys-color-icon-positive-strong: var(--cnvs-base-palette-green-700); /* Success icon color */
|
|
109
|
-
--cnvs-sys-color-icon-positive-default: var(--cnvs-base-palette-green-600); /* Success icon color */
|
|
110
160
|
--cnvs-sys-color-icon-primary-softer: var(--cnvs-base-palette-blue-200); /* Stronger brand icon color */
|
|
111
161
|
--cnvs-sys-color-icon-primary-soft: var(--cnvs-base-palette-blue-400); /* Stronger brand icon color */
|
|
112
|
-
--cnvs-sys-color-icon-primary-stronger: var(--cnvs-base-palette-blue-800); /* Stronger brand icon color */
|
|
113
|
-
--cnvs-sys-color-icon-primary-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
|
|
114
|
-
--cnvs-sys-color-icon-primary-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
|
|
115
162
|
--cnvs-sys-color-icon-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse icon color */
|
|
116
|
-
--cnvs-sys-color-icon-strong: var(--cnvs-base-palette-neutral-900); /* Hover icon color */
|
|
117
|
-
--cnvs-sys-color-icon-soft: var(--cnvs-base-palette-slate-600); /* Disabled icon color */
|
|
118
|
-
--cnvs-sys-color-icon-default: var(--cnvs-base-palette-neutral-800); /* Default icon color */
|
|
119
163
|
--cnvs-sys-color-text-info-softer: var(--cnvs-base-palette-blue-200); /* Active links */
|
|
120
164
|
--cnvs-sys-color-text-info-soft: var(--cnvs-base-palette-blue-400); /* Active links */
|
|
121
|
-
--cnvs-sys-color-text-info-stronger: var(--cnvs-base-palette-blue-800); /* Active links */
|
|
122
|
-
--cnvs-sys-color-text-info-strong: var(--cnvs-base-palette-blue-700); /* Branded hover text */
|
|
123
|
-
--cnvs-sys-color-text-info-default: var(--cnvs-base-palette-blue-600); /* Branded text */
|
|
124
165
|
--cnvs-sys-color-text-positive-softer: var(--cnvs-base-palette-green-200); /* Active links */
|
|
125
166
|
--cnvs-sys-color-text-positive-soft: var(--cnvs-base-palette-green-400); /* Active links */
|
|
126
|
-
--cnvs-sys-color-text-positive-stronger: var(--cnvs-base-palette-green-800); /* Active links */
|
|
127
|
-
--cnvs-sys-color-text-positive-strong: var(--cnvs-base-palette-green-700); /* Branded hover text */
|
|
128
|
-
--cnvs-sys-color-text-positive-default: var(--cnvs-base-palette-green-600); /* Branded text */
|
|
129
167
|
--cnvs-sys-color-text-ai: var(--cnvs-base-palette-blue-950);
|
|
130
168
|
--cnvs-sys-color-text-caution-softer: var(--cnvs-base-palette-amber-200); /* Softer warning text */
|
|
131
|
-
--cnvs-sys-color-text-caution-stronger: var(--cnvs-base-palette-amber-975); /* Stronger warning text */
|
|
132
169
|
--cnvs-sys-color-text-caution-soft: var(--cnvs-base-palette-amber-400); /* Disabled warning text */
|
|
133
|
-
--cnvs-sys-color-text-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong warning text */
|
|
134
|
-
--cnvs-sys-color-text-caution-default: var(--cnvs-base-palette-amber-900); /* Warning text */
|
|
135
170
|
--cnvs-sys-color-text-primary-softer: var(--cnvs-base-palette-blue-200); /* Active links */
|
|
136
171
|
--cnvs-sys-color-text-primary-soft: var(--cnvs-base-palette-blue-400); /* Active links */
|
|
137
|
-
--cnvs-sys-color-text-primary-stronger: var(--cnvs-base-palette-blue-800); /* Active links */
|
|
138
|
-
--cnvs-sys-color-text-primary-strong: var(--cnvs-base-palette-blue-700); /* Branded hover text */
|
|
139
|
-
--cnvs-sys-color-text-primary-default: var(--cnvs-base-palette-blue-600); /* Branded text */
|
|
140
172
|
--cnvs-sys-color-text-critical-softer: var(--cnvs-base-palette-red-200); /* Error text */
|
|
141
173
|
--cnvs-sys-color-text-critical-soft: var(--cnvs-base-palette-red-400); /* Error text */
|
|
142
|
-
--cnvs-sys-color-text-critical-stronger: var(--cnvs-base-palette-red-800); /* Error text */
|
|
143
|
-
--cnvs-sys-color-text-critical-strong: var(--cnvs-base-palette-red-700); /* Error text */
|
|
144
|
-
--cnvs-sys-color-text-critical-default: var(--cnvs-base-palette-red-600); /* Error text */
|
|
145
|
-
--cnvs-sys-color-text-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse text color */
|
|
146
|
-
--cnvs-sys-color-text-hint: var(--cnvs-base-palette-slate-600); /* Hint text color */
|
|
147
174
|
--cnvs-sys-color-text-disabled: var(--cnvs-base-palette-slate-400); /* Disabled text color */
|
|
148
|
-
--cnvs-sys-color-
|
|
149
|
-
--cnvs-sys-color-text-strong: var(--cnvs-base-palette-neutral-900); /* Heading text */
|
|
150
|
-
--cnvs-sys-color-text-default: var(--cnvs-base-palette-neutral-800); /* Body text */
|
|
151
|
-
--cnvs-sys-color-bg-info-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
|
|
152
|
-
--cnvs-sys-color-bg-info-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
|
|
153
|
-
--cnvs-sys-color-bg-info-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
|
|
154
|
-
--cnvs-sys-color-bg-info-soft: var(--cnvs-base-palette-blue-100); /* Disabled */
|
|
155
|
-
--cnvs-sys-color-bg-info-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
156
|
-
--cnvs-sys-color-bg-info-softest: var(--cnvs-base-palette-blue-25); /* Surface */
|
|
157
|
-
--cnvs-sys-color-bg-ai-strongest: var(--cnvs-base-palette-blue-950); /* AI surfaces */
|
|
158
|
-
--cnvs-sys-color-bg-ai-stronger: var(--cnvs-base-palette-blue-400); /* Active state on AI containers */
|
|
159
|
-
--cnvs-sys-color-bg-ai-strong: var(--cnvs-base-palette-blue-200); /* Hover on AI container */
|
|
160
|
-
--cnvs-sys-color-bg-ai-default: var(--cnvs-base-palette-blue-100); /* AI container */
|
|
161
|
-
--cnvs-sys-color-bg-critical-stronger: var(--cnvs-base-palette-red-800); /* Stronger error background */
|
|
162
|
-
--cnvs-sys-color-bg-critical-strong: var(--cnvs-base-palette-red-700); /* Strong error background */
|
|
163
|
-
--cnvs-sys-color-bg-critical-default: var(--cnvs-base-palette-red-600); /* Default error background */
|
|
175
|
+
--cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-0); /* Default page background */
|
|
164
176
|
--cnvs-sys-color-bg-critical-soft: var(--cnvs-base-palette-red-100); /* Disabled error background */
|
|
165
|
-
--cnvs-sys-color-bg-critical-softer: var(--cnvs-base-palette-red-50); /* Disabled error background */
|
|
166
|
-
--cnvs-sys-color-bg-critical-softest: var(--cnvs-base-palette-red-25); /* Input error background */
|
|
167
|
-
--cnvs-sys-color-bg-caution-stronger: var(--cnvs-base-palette-amber-600); /* Stronger warning background */
|
|
168
|
-
--cnvs-sys-color-bg-caution-strong: var(--cnvs-base-palette-amber-500); /* Strong warning background */
|
|
169
|
-
--cnvs-sys-color-bg-caution-default: var(--cnvs-base-palette-amber-400); /* Default warning background */
|
|
170
177
|
--cnvs-sys-color-bg-caution-soft: var(--cnvs-base-palette-amber-100); /* Softer warning background */
|
|
171
|
-
--cnvs-sys-color-bg-caution-softer: var(--cnvs-base-palette-amber-50); /* Softer warning background */
|
|
172
|
-
--cnvs-sys-color-bg-caution-softest: var(--cnvs-base-palette-amber-25); /* Disabled warning background */
|
|
173
|
-
--cnvs-sys-color-bg-positive-stronger: var(--cnvs-base-palette-green-800); /* Active success background */
|
|
174
|
-
--cnvs-sys-color-bg-positive-strong: var(--cnvs-base-palette-green-700); /* Hover success background */
|
|
175
|
-
--cnvs-sys-color-bg-positive-default: var(--cnvs-base-palette-green-600); /* Disabled success background */
|
|
176
|
-
--cnvs-sys-color-bg-positive-soft: var(--cnvs-base-palette-green-100); /* Disabled success background */
|
|
177
|
-
--cnvs-sys-color-bg-positive-softer: var(--cnvs-base-palette-green-50); /* Surface success background */
|
|
178
178
|
--cnvs-sys-color-bg-positive-softest: var(--cnvs-base-palette-green-25); /* Lightest surface success background */
|
|
179
|
-
--cnvs-sys-color-bg-
|
|
180
|
-
--cnvs-sys-color-bg-primary-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
|
|
181
|
-
--cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
|
|
182
|
-
--cnvs-sys-color-bg-primary-soft: var(--cnvs-base-palette-blue-100); /* Primary disabled */
|
|
183
|
-
--cnvs-sys-color-bg-primary-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
184
|
-
--cnvs-sys-color-bg-primary-softest: var(--cnvs-base-palette-blue-25); /* Surface */
|
|
185
|
-
--cnvs-sys-color-bg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Contrast backgrounds, like Secondary Buttons */
|
|
186
|
-
--cnvs-sys-color-bg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast backgrounds, like Secondary Buttons */
|
|
187
|
-
--cnvs-sys-color-bg-muted-strong: var(--cnvs-base-palette-slate-700);
|
|
188
|
-
--cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
|
|
189
|
-
--cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
|
|
190
|
-
--cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
|
|
191
|
-
--cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
|
|
192
|
-
--cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
|
|
193
|
-
--cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-100); /* Surface hover, Secondary surfaces */
|
|
194
|
-
--cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
|
|
195
|
-
--cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-slate-25); /* Disabled inputs */
|
|
196
|
-
--cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
|
|
197
|
-
--cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); /* Overlay background */
|
|
198
|
-
--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 */
|
|
199
|
-
--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 */
|
|
200
|
-
--cnvs-sys-color-bg-transparent-default: transparent; /* Transparent background */
|
|
201
|
-
--cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-0); /* Main background color */
|
|
202
|
-
--cnvs-sys-color-static-amber-soft: var(--cnvs-base-palette-amber-100); /* Soft amber */
|
|
203
|
-
--cnvs-sys-color-static-amber-strongest: var(--cnvs-base-palette-amber-950); /* Stronger amber */
|
|
204
|
-
--cnvs-sys-color-static-amber-softer: var(--cnvs-base-palette-amber-50); /* Soft amber */
|
|
205
|
-
--cnvs-sys-color-static-amber-stronger: var(--cnvs-base-palette-amber-600); /* Stronger amber */
|
|
206
|
-
--cnvs-sys-color-static-amber-strong: var(--cnvs-base-palette-amber-500); /* Stronger amber */
|
|
207
|
-
--cnvs-sys-color-static-amber-softest: var(--cnvs-base-palette-amber-25); /* Soft amber */
|
|
208
|
-
--cnvs-sys-color-static-amber-default: var(--cnvs-base-palette-amber-400); /* amber */
|
|
209
|
-
--cnvs-sys-color-static-gray-softer: var(--cnvs-base-palette-slate-100); /* Light gray */
|
|
210
|
-
--cnvs-sys-color-static-gray-softest: var(--cnvs-base-palette-slate-50); /* Light gray */
|
|
211
|
-
--cnvs-sys-color-static-gray-strongest: var(--cnvs-base-palette-slate-950); /* Strongerer gray */
|
|
212
|
-
--cnvs-sys-color-static-gray-stronger: var(--cnvs-base-palette-slate-800); /* Strongerer gray */
|
|
213
|
-
--cnvs-sys-color-static-gray-strong: var(--cnvs-base-palette-slate-700); /* Stronger gray */
|
|
214
|
-
--cnvs-sys-color-static-gray-soft: var(--cnvs-base-palette-slate-200); /* Light gray */
|
|
215
|
-
--cnvs-sys-color-static-gray-default: var(--cnvs-base-palette-slate-600); /* Gray */
|
|
216
|
-
--cnvs-sys-color-static-black: var(--cnvs-base-palette-neutral-1000); /* Just black */
|
|
217
|
-
--cnvs-sys-color-static-white: var(--cnvs-base-palette-neutral-0); /* Just white */
|
|
218
|
-
--cnvs-sys-color-static-red-softer: var(--cnvs-base-palette-red-50); /* Light red */
|
|
219
|
-
--cnvs-sys-color-static-red-strongest: var(--cnvs-base-palette-red-950); /* Strong red */
|
|
220
|
-
--cnvs-sys-color-static-red-softest: var(--cnvs-base-palette-red-25); /* Light red */
|
|
221
|
-
--cnvs-sys-color-static-red-stronger: var(--cnvs-base-palette-red-800); /* Strong red */
|
|
222
|
-
--cnvs-sys-color-static-red-strong: var(--cnvs-base-palette-red-700); /* Strong red */
|
|
223
|
-
--cnvs-sys-color-static-red-soft: var(--cnvs-base-palette-red-100); /* Light red */
|
|
224
|
-
--cnvs-sys-color-static-red-default: var(--cnvs-base-palette-red-600); /* Red */
|
|
225
|
-
--cnvs-sys-color-static-green-strongest: var(--cnvs-base-palette-green-950); /* Stronger green */
|
|
226
|
-
--cnvs-sys-color-static-green-softest: var(--cnvs-base-palette-green-25); /* Light green */
|
|
227
|
-
--cnvs-sys-color-static-green-stronger: var(--cnvs-base-palette-green-800); /* Stronger green */
|
|
228
|
-
--cnvs-sys-color-static-green-softer: var(--cnvs-base-palette-green-50); /* Light green */
|
|
229
|
-
--cnvs-sys-color-static-green-strong: var(--cnvs-base-palette-green-700); /* Stronger green */
|
|
230
|
-
--cnvs-sys-color-static-green-soft: var(--cnvs-base-palette-green-100); /* Light green */
|
|
231
|
-
--cnvs-sys-color-static-green-default: var(--cnvs-base-palette-green-600); /* Default green */
|
|
232
|
-
--cnvs-sys-color-static-blue-strongest: var(--cnvs-base-palette-blue-950); /* Stronger blue */
|
|
233
|
-
--cnvs-sys-color-static-blue-soft: var(--cnvs-base-palette-blue-100); /* Light blue */
|
|
234
|
-
--cnvs-sys-color-static-blue-softer: var(--cnvs-base-palette-blue-50); /* Light blue */
|
|
235
|
-
--cnvs-sys-color-static-blue-stronger: var(--cnvs-base-palette-blue-800); /* Stronger blue */
|
|
236
|
-
--cnvs-sys-color-static-blue-strong: var(--cnvs-base-palette-blue-700); /* Stronger blue */
|
|
237
|
-
--cnvs-sys-color-static-blue-softest: var(--cnvs-base-palette-blue-25); /* Light blue */
|
|
238
|
-
--cnvs-sys-color-static-blue-default: var(--cnvs-base-palette-blue-600); /* Blue */
|
|
239
|
-
--cnvs-sys-color-static-orange-strong: var(--cnvs-base-palette-amber-500);
|
|
240
|
-
--cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-amber-100);
|
|
241
|
-
--cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-amber-400);
|
|
242
|
-
--cnvs-sys-color-static-gold-stronger: var(--cnvs-base-palette-amber-600);
|
|
179
|
+
--cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-50); /* The alternative page background */
|
|
243
180
|
--cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
|
|
244
181
|
--cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
|
|
245
182
|
--cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
|
|
@@ -265,7 +202,7 @@
|
|
|
265
202
|
--cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
|
|
266
203
|
--cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
|
|
267
204
|
--cnvs-sys-space-half: calc(var(--cnvs-base-unit) * 0.5); /* Mobile only */
|
|
268
|
-
--cnvs-sys-shape-
|
|
205
|
+
--cnvs-sys-shape-none: var(--cnvs-base-size-0); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
|
|
269
206
|
--cnvs-sys-shape-round: calc(var(--cnvs-base-unit) * 250); /* Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges. */
|
|
270
207
|
--cnvs-sys-shape-x6: calc(var(--cnvs-base-unit) * 6); /* (Mobile) Full width sheets that are temporary and modal views */
|
|
271
208
|
--cnvs-sys-shape-x4: calc(var(--cnvs-base-unit) * 4); /* (Mobile) Primary containers that house a large amount of other elements and complex information */
|
|
@@ -273,35 +210,188 @@
|
|
|
273
210
|
--cnvs-sys-shape-x1-half: calc(var(--cnvs-base-unit) * 1.5);
|
|
274
211
|
--cnvs-sys-shape-x1: var(--cnvs-base-unit);
|
|
275
212
|
--cnvs-sys-shape-half: calc(var(--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. */
|
|
213
|
+
--cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
|
|
276
214
|
--cnvs-sys-breakpoints-lg: 1024px; /* Large screens, such as desktops. */
|
|
277
215
|
--cnvs-sys-breakpoints-md: 768px; /* Medium screens, such as laptops. */
|
|
278
216
|
--cnvs-sys-breakpoints-sm: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
|
|
279
|
-
--cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
|
|
280
217
|
--cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
|
|
281
218
|
--cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
|
|
282
219
|
--cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
|
|
220
|
+
--cnvs-sys-color-brand-border-caution: var(--cnvs-brand-caution-400);
|
|
221
|
+
--cnvs-sys-color-brand-border-critical: var(--cnvs-brand-critical-500);
|
|
222
|
+
--cnvs-sys-color-brand-border-primary: var(--cnvs-brand-primary-500); /* Brand, Focus */
|
|
223
|
+
--cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-700);
|
|
224
|
+
--cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-positive-700);
|
|
225
|
+
--cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-positive-600);
|
|
226
|
+
--cnvs-sys-color-brand-fg-caution-strong: var(--cnvs-brand-caution-700);
|
|
227
|
+
--cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-caution-600);
|
|
228
|
+
--cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-critical-700); /* Stronger color used on text or icons that indicate critical messaging, like an error. */
|
|
229
|
+
--cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-critical-600); /* Used on text or icons that indicate critical messaging, like an error. */
|
|
230
|
+
--cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-700); /* Text and icons that use the primary brand color. Use this on the primary strong background */
|
|
231
|
+
--cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-600); /* Text and icons that use the primary brand color. Use this on the primary background */
|
|
232
|
+
--cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-600);
|
|
233
|
+
--cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-positive-600);
|
|
234
|
+
--cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-caution-400);
|
|
235
|
+
--cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-critical-600);
|
|
236
|
+
--cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-600);
|
|
237
|
+
--cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-primary-a50);
|
|
238
|
+
--cnvs-sys-color-brand-surface-positive-strong: var(--cnvs-brand-positive-a50);
|
|
239
|
+
--cnvs-sys-color-brand-surface-positive-default: var(--cnvs-brand-positive-a25);
|
|
240
|
+
--cnvs-sys-color-brand-surface-caution-strong: var(--cnvs-brand-caution-a50);
|
|
241
|
+
--cnvs-sys-color-brand-surface-caution-default: var(--cnvs-brand-caution-a25);
|
|
242
|
+
--cnvs-sys-color-brand-surface-critical-strong: var(--cnvs-brand-critical-a50);
|
|
243
|
+
--cnvs-sys-color-brand-surface-critical-default: var(--cnvs-brand-critical-a25);
|
|
244
|
+
--cnvs-sys-color-brand-surface-primary-strong: var(--cnvs-brand-primary-a50);
|
|
245
|
+
--cnvs-sys-color-brand-surface-primary-default: var(--cnvs-brand-primary-a25);
|
|
246
|
+
--cnvs-sys-color-brand-focus-caution-inner: var(--cnvs-brand-caution-400);
|
|
247
|
+
--cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-caution-500);
|
|
248
|
+
--cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-critical-500);
|
|
249
|
+
--cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-primary-500);
|
|
250
|
+
--cnvs-sys-color-static-amber-soft: var(--cnvs-sys-color-surface-warning-strong); /* Soft amber */
|
|
251
|
+
--cnvs-sys-color-static-amber-strongest: var(--cnvs-sys-color-fg-warning-strong); /* Stronger amber */
|
|
252
|
+
--cnvs-sys-color-static-amber-stronger: var(--cnvs-sys-color-accent-warning); /* Stronger amber */
|
|
253
|
+
--cnvs-sys-color-static-amber-strong: var(--cnvs-sys-color-accent-warning); /* Stronger amber */
|
|
254
|
+
--cnvs-sys-color-static-amber-softest: var(--cnvs-sys-color-surface-warning-default); /* Soft amber */
|
|
255
|
+
--cnvs-sys-color-static-amber-default: var(--cnvs-sys-color-accent-warning); /* amber */
|
|
256
|
+
--cnvs-sys-color-static-blue-default: var(--cnvs-sys-color-accent-info); /* Blue */
|
|
257
|
+
--cnvs-sys-color-shadow-default: var(--cnvs-sys-color-shadow-base); /* Main shadow color */
|
|
258
|
+
--cnvs-sys-color-shadow-2: var(--cnvs-sys-color-shadow-ambient); /* Second shadow color */
|
|
259
|
+
--cnvs-sys-color-shadow-1: var(--cnvs-sys-color-shadow-base); /* First shadow color */
|
|
260
|
+
--cnvs-sys-color-border-container: var(--cnvs-sys-color-border-strong); /* Cards, Toasts, Surfaces */
|
|
261
|
+
--cnvs-sys-color-border-divider: var(--cnvs-sys-color-border-default); /* Dividers */
|
|
262
|
+
--cnvs-sys-color-border-contrast-strong: var(--cnvs-sys-color-border-contrast-default); /* Secondary Button Hover */
|
|
263
|
+
--cnvs-sys-color-border-input-inverse: var(--cnvs-sys-color-border-inverse-default); /* Borders on checkboxes and radios */
|
|
264
|
+
--cnvs-sys-color-border-input-strong: var(--cnvs-sys-color-border-input-hover); /* Input hover */
|
|
265
|
+
--cnvs-sys-color-border-input-disabled: var(--cnvs-sys-opacity-disabled); /* Disabled inputs */
|
|
266
|
+
--cnvs-sys-color-fg-positive-default: var(--cnvs-sys-color-fg-success-default); /* Error */
|
|
267
|
+
--cnvs-sys-color-fg-info-strong: var(--cnvs-sys-color-fg-ai);
|
|
268
|
+
--cnvs-sys-color-fg-info-softer: var(--cnvs-sys-color-fg-ai); /* Link Inverse, Disabled */
|
|
269
|
+
--cnvs-sys-color-fg-muted-stronger: var(--cnvs-sys-color-fg-muted-strong);
|
|
270
|
+
--cnvs-sys-color-icon-info-default: var(--cnvs-sys-color-fg-info-default); /* Brand icon color */
|
|
271
|
+
--cnvs-sys-color-icon-caution-default: var(--cnvs-sys-color-fg-contrast-default); /* Caution icon color */
|
|
272
|
+
--cnvs-sys-color-icon-strong: var(--cnvs-sys-color-fg-muted-strong); /* Hover icon color */
|
|
273
|
+
--cnvs-sys-color-icon-soft: var(--cnvs-sys-color-fg-muted-default); /* Disabled icon color */
|
|
274
|
+
--cnvs-sys-color-icon-default: var(--cnvs-sys-color-fg-default); /* Default icon color */
|
|
275
|
+
--cnvs-sys-color-text-info-default: var(--cnvs-sys-color-fg-info-default); /* Branded text */
|
|
276
|
+
--cnvs-sys-color-text-caution-stronger: var(--cnvs-sys-color-fg-contrast-strong); /* Stronger warning text */
|
|
277
|
+
--cnvs-sys-color-text-caution-strong: var(--cnvs-sys-color-fg-contrast-strong); /* Strong warning text */
|
|
278
|
+
--cnvs-sys-color-text-caution-default: var(--cnvs-sys-color-fg-contrast-default); /* Warning text */
|
|
279
|
+
--cnvs-sys-color-text-inverse: var(--cnvs-sys-color-fg-inverse); /* Inverse text color */
|
|
280
|
+
--cnvs-sys-color-text-hint: var(--cnvs-sys-color-fg-muted-default); /* Hint text color */
|
|
281
|
+
--cnvs-sys-color-text-stronger: var(--cnvs-sys-color-fg-strong); /* Display text */
|
|
282
|
+
--cnvs-sys-color-text-strong: var(--cnvs-sys-color-fg-strong); /* Heading text */
|
|
283
|
+
--cnvs-sys-color-text-default: var(--cnvs-sys-color-fg-default); /* Body text */
|
|
284
|
+
--cnvs-sys-color-bg-info-stronger: var(--cnvs-sys-color-accent-info); /* Brand active background */
|
|
285
|
+
--cnvs-sys-color-bg-info-strong: var(--cnvs-sys-color-accent-info); /* Brand hover background */
|
|
286
|
+
--cnvs-sys-color-bg-info-default: var(--cnvs-sys-color-accent-info); /* Info color */
|
|
287
|
+
--cnvs-sys-color-bg-info-soft: var(--cnvs-sys-color-surface-info-default); /* Disabled */
|
|
288
|
+
--cnvs-sys-color-bg-info-softer: var(--cnvs-sys-color-surface-info-strong); /* Select */
|
|
289
|
+
--cnvs-sys-color-bg-info-softest: var(--cnvs-sys-color-surface-info-default); /* Surface */
|
|
290
|
+
--cnvs-sys-color-bg-ai-strongest: var(--cnvs-sys-color-accent-ai); /* AI surfaces */
|
|
291
|
+
--cnvs-sys-color-bg-ai-stronger: var(--cnvs-sys-color-surface-ai-pressed); /* Active state on AI containers */
|
|
292
|
+
--cnvs-sys-color-bg-ai-strong: var(--cnvs-sys-color-surface-ai-hover); /* Hover on AI container */
|
|
293
|
+
--cnvs-sys-color-bg-ai-default: var(--cnvs-sys-color-surface-ai-default); /* AI container */
|
|
294
|
+
--cnvs-sys-color-bg-contrast-strong: var(--cnvs-sys-color-surface-contrast-strong); /* Contrast backgrounds, like Secondary Buttons */
|
|
295
|
+
--cnvs-sys-color-bg-contrast-default: var(--cnvs-sys-color-surface-contrast-default); /* Contrast backgrounds, like Secondary Buttons */
|
|
296
|
+
--cnvs-sys-color-bg-muted-strong: var(--cnvs-sys-color-accent-muted-default);
|
|
297
|
+
--cnvs-sys-color-bg-muted-default: var(--cnvs-sys-color-accent-muted-default);
|
|
298
|
+
--cnvs-sys-color-bg-muted-soft: var(--cnvs-sys-color-accent-muted-soft);
|
|
299
|
+
--cnvs-sys-color-bg-muted-softer: var(--cnvs-sys-color-accent-muted-soft);
|
|
300
|
+
--cnvs-sys-color-bg-alt-stronger: var(--cnvs-sys-color-surface-alt-default); /* Active state for segmented control, Pill */
|
|
301
|
+
--cnvs-sys-color-bg-alt-strong: var(--cnvs-sys-color-surface-alt-default); /* Active states */
|
|
302
|
+
--cnvs-sys-color-bg-alt-soft: var(--cnvs-sys-color-surface-alt-default); /* Alternative page background */
|
|
303
|
+
--cnvs-sys-color-bg-alt-softer: var(--cnvs-sys-color-surface-raised); /* Disabled inputs */
|
|
304
|
+
--cnvs-sys-color-bg-translucent: var(--cnvs-sys-color-surface-contrast-default); /* Tooltip, Status Indicator */
|
|
305
|
+
--cnvs-sys-color-bg-overlay: var(--cnvs-sys-color-surface-overlay-scrim); /* Overlay background */
|
|
306
|
+
--cnvs-sys-color-bg-transparent-stronger: var(--cnvs-sys-color-surface-overlay-pressed-default); /* Inverse Secondary Button Active state */
|
|
307
|
+
--cnvs-sys-color-bg-transparent-strong: var(--cnvs-sys-color-surface-overlay-hover-default); /* Inverse Secondary Button Hover state */
|
|
308
|
+
--cnvs-sys-color-bg-transparent-default: var(--cnvs-sys-color-surface-transparent); /* Transparent background */
|
|
283
309
|
--cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
|
|
284
|
-
--cnvs-sys-
|
|
310
|
+
--cnvs-sys-shape-zero: var(--cnvs-sys-shape-none); /* Full-width and background containers. Fixed navigation containers such as headers, and side-panels. */
|
|
311
|
+
--cnvs-sys-gap-xxl: var(--cnvs-base-size-800); /* Use this for the space between content sections */
|
|
285
312
|
--cnvs-sys-gap-xl: var(--cnvs-base-size-400); /* Use this for the default spacing between cards, as well as the gutter width used in the large 12-column grid. */
|
|
286
313
|
--cnvs-sys-gap-lg: var(--cnvs-base-size-300); /* Use this for tighter spacing between cards. Cards are self contained blocks of content. */
|
|
287
314
|
--cnvs-sys-gap-md: var(--cnvs-base-size-200); /* Use the default inline spacing when other gap tokens may not fit. */
|
|
288
315
|
--cnvs-sys-gap-sm: var(--cnvs-base-size-100); /* Horizontal space between pills, tighter space between buttons, inline icon to text, segmented controls. */
|
|
289
316
|
--cnvs-sys-gap-xs: var(--cnvs-base-size-50); /* Compact spacing from icon to text, labels to inputs, between tab items. */
|
|
290
|
-
--cnvs-sys-padding-
|
|
317
|
+
--cnvs-sys-padding-xxl: var(--cnvs-base-size-400); /* Padding used around Modal and Large Button content */
|
|
291
318
|
--cnvs-sys-padding-xl: var(--cnvs-base-size-300); /* Padding used around Card and Medium Button content */
|
|
292
319
|
--cnvs-sys-padding-lg: var(--cnvs-base-size-250); /* Large padding, used in Medium Buttons with Icons */
|
|
293
320
|
--cnvs-sys-padding-md: var(--cnvs-base-size-200); /* Default padding used for components used around Small Button content. */
|
|
294
321
|
--cnvs-sys-padding-sm: var(--cnvs-base-size-150); /* Compact padding, used in Rich Text Editor, or X-Small Buttons */
|
|
295
322
|
--cnvs-sys-padding-xs: var(--cnvs-base-size-100); /* Horizontal padding on Input Fields */
|
|
296
|
-
--cnvs-sys-padding-
|
|
297
|
-
--cnvs-sys-size-
|
|
298
|
-
--cnvs-sys-size-
|
|
299
|
-
--cnvs-sys-size-
|
|
300
|
-
--cnvs-sys-size-
|
|
301
|
-
--cnvs-sys-size-
|
|
302
|
-
--cnvs-sys-size-
|
|
303
|
-
--cnvs-sys-size-
|
|
304
|
-
--cnvs-sys-size-
|
|
323
|
+
--cnvs-sys-padding-xxs: var(--cnvs-base-size-50);
|
|
324
|
+
--cnvs-sys-size-xxl: var(--cnvs-base-size-800); /* Table Cell, Toast */
|
|
325
|
+
--cnvs-sys-size-xl: var(--cnvs-base-size-700); /* Large size used in Large Buttons, Segmented Controls, Expandable Container Trigger, Tabs, and Avatar */
|
|
326
|
+
--cnvs-sys-size-lg: var(--cnvs-base-size-600); /* Default height for most components, like Medium Buttons, Segmented Control, Banner, Input Fields, and Menu List Items */
|
|
327
|
+
--cnvs-sys-size-md: var(--cnvs-base-size-500); /* Small Buttons, Segmented Control, Tooltip, Avatar */
|
|
328
|
+
--cnvs-sys-size-sm: var(--cnvs-base-size-400); /* X-Small Buttons, Pills, Checkboxes, Radio Buttons */
|
|
329
|
+
--cnvs-sys-size-xs: var(--cnvs-base-size-300); /* Count Badge */
|
|
330
|
+
--cnvs-sys-size-xxs: var(--cnvs-base-size-250); /* Switch Track */
|
|
331
|
+
--cnvs-sys-size-xxxs: var(--cnvs-base-size-200); /* Switch Track */
|
|
332
|
+
--cnvs-sys-size-icon-xl: var(--cnvs-base-size-300);
|
|
333
|
+
--cnvs-sys-size-icon-lg: var(--cnvs-base-size-250);
|
|
334
|
+
--cnvs-sys-size-icon-md: var(--cnvs-base-size-225);
|
|
335
|
+
--cnvs-sys-size-icon-sm: var(--cnvs-base-size-200);
|
|
336
|
+
--cnvs-sys-size-icon-xs: var(--cnvs-base-size-175);
|
|
337
|
+
--cnvs-sys-color-border-primary-default: var(--cnvs-sys-color-brand-border-primary); /* Brand, Focus */
|
|
338
|
+
--cnvs-sys-color-border-caution-strong: var(--cnvs-sys-color-brand-focus-caution-outer); /* Warning outer (box shadow) */
|
|
339
|
+
--cnvs-sys-color-border-caution-default: var(--cnvs-sys-color-brand-focus-caution-inner); /* Warning inner */
|
|
340
|
+
--cnvs-sys-color-border-critical-default: var(--cnvs-sys-color-brand-border-critical); /* Error */
|
|
341
|
+
--cnvs-sys-color-fg-positive-stronger: var(--cnvs-sys-color-brand-fg-positive-strong); /* Error */
|
|
342
|
+
--cnvs-sys-color-fg-positive-strong: var(--cnvs-sys-color-brand-fg-positive-strong); /* Error */
|
|
343
|
+
--cnvs-sys-color-fg-info-stronger: var(--cnvs-sys-color-fg-info-strong); /* Links on hover */
|
|
344
|
+
--cnvs-sys-color-fg-caution-strong: var(--cnvs-sys-color-brand-fg-caution-strong); /* Warning on hover */
|
|
345
|
+
--cnvs-sys-color-fg-caution-default: var(--cnvs-sys-color-brand-fg-caution-default); /* Warning */
|
|
346
|
+
--cnvs-sys-color-fg-primary-strong: var(--cnvs-sys-color-brand-fg-primary-strong); /* Links on hover */
|
|
347
|
+
--cnvs-sys-color-fg-primary-stronger: var(--cnvs-sys-color-brand-fg-primary-strong); /* Links on hover */
|
|
348
|
+
--cnvs-sys-color-fg-primary-default: var(--cnvs-sys-color-brand-fg-primary-default); /* Branded text */
|
|
349
|
+
--cnvs-sys-color-fg-critical-strong: var(--cnvs-sys-color-brand-fg-critical-strong); /* Error */
|
|
350
|
+
--cnvs-sys-color-fg-critical-default: var(--cnvs-sys-color-brand-fg-critical-default); /* Error */
|
|
351
|
+
--cnvs-sys-color-icon-info-strong: var(--cnvs-sys-color-fg-info-strong); /* Stronger brand icon color */
|
|
352
|
+
--cnvs-sys-color-icon-caution-soft: var(--cnvs-sys-color-brand-fg-caution-default); /* Soft caution icon color */
|
|
353
|
+
--cnvs-sys-color-icon-caution-stronger: var(--cnvs-sys-color-brand-fg-caution-strong); /* Strong caution icon color */
|
|
354
|
+
--cnvs-sys-color-icon-caution-strong: var(--cnvs-sys-color-brand-fg-caution-default); /* Strong caution icon color */
|
|
355
|
+
--cnvs-sys-color-icon-critical-strong: var(--cnvs-sys-color-brand-fg-critical-strong); /* Error icon color */
|
|
356
|
+
--cnvs-sys-color-icon-critical-default: var(--cnvs-sys-color-brand-fg-critical-default); /* Error icon color */
|
|
357
|
+
--cnvs-sys-color-icon-positive-stronger: var(--cnvs-sys-color-brand-fg-positive-strong); /* Success icon color */
|
|
358
|
+
--cnvs-sys-color-icon-positive-strong: var(--cnvs-sys-color-brand-fg-positive-strong); /* Success icon color */
|
|
359
|
+
--cnvs-sys-color-icon-positive-default: var(--cnvs-sys-color-brand-fg-positive-default); /* Success icon color */
|
|
360
|
+
--cnvs-sys-color-icon-primary-stronger: var(--cnvs-sys-color-brand-fg-primary-strong); /* Stronger brand icon color */
|
|
361
|
+
--cnvs-sys-color-icon-primary-strong: var(--cnvs-sys-color-brand-fg-primary-strong); /* Stronger brand icon color */
|
|
362
|
+
--cnvs-sys-color-icon-primary-default: var(--cnvs-sys-color-brand-fg-primary-default); /* Brand icon color */
|
|
363
|
+
--cnvs-sys-color-text-info-stronger: var(--cnvs-sys-color-fg-info-strong); /* Active links */
|
|
364
|
+
--cnvs-sys-color-text-info-strong: var(--cnvs-sys-color-fg-info-strong); /* Branded hover text */
|
|
365
|
+
--cnvs-sys-color-text-positive-stronger: var(--cnvs-sys-color-brand-fg-positive-strong); /* Active links */
|
|
366
|
+
--cnvs-sys-color-text-positive-strong: var(--cnvs-sys-color-brand-fg-positive-strong); /* Branded hover text */
|
|
367
|
+
--cnvs-sys-color-text-positive-default: var(--cnvs-sys-color-brand-fg-positive-default); /* Branded text */
|
|
368
|
+
--cnvs-sys-color-text-primary-stronger: var(--cnvs-sys-color-brand-fg-primary-strong); /* Active links */
|
|
369
|
+
--cnvs-sys-color-text-primary-strong: var(--cnvs-sys-color-brand-fg-primary-strong); /* Branded hover text */
|
|
370
|
+
--cnvs-sys-color-text-primary-default: var(--cnvs-sys-color-brand-fg-primary-default); /* Branded text */
|
|
371
|
+
--cnvs-sys-color-text-critical-stronger: var(--cnvs-sys-color-brand-fg-critical-strong); /* Error text */
|
|
372
|
+
--cnvs-sys-color-text-critical-strong: var(--cnvs-sys-color-brand-fg-critical-strong); /* Error text */
|
|
373
|
+
--cnvs-sys-color-text-critical-default: var(--cnvs-sys-color-brand-fg-critical-default); /* Error text */
|
|
374
|
+
--cnvs-sys-color-bg-critical-stronger: var(--cnvs-sys-color-brand-accent-critical); /* Stronger error background */
|
|
375
|
+
--cnvs-sys-color-bg-critical-strong: var(--cnvs-sys-color-brand-accent-critical); /* Strong error background */
|
|
376
|
+
--cnvs-sys-color-bg-critical-default: var(--cnvs-sys-color-brand-accent-critical); /* Default error background */
|
|
377
|
+
--cnvs-sys-color-bg-critical-softer: var(--cnvs-sys-color-brand-surface-critical-strong); /* Disabled error background */
|
|
378
|
+
--cnvs-sys-color-bg-critical-softest: var(--cnvs-sys-color-brand-surface-critical-default); /* Input error background */
|
|
379
|
+
--cnvs-sys-color-bg-caution-stronger: var(--cnvs-sys-color-brand-accent-caution); /* Stronger warning background */
|
|
380
|
+
--cnvs-sys-color-bg-caution-strong: var(--cnvs-sys-color-brand-accent-caution); /* Strong warning background */
|
|
381
|
+
--cnvs-sys-color-bg-caution-default: var(--cnvs-sys-color-brand-accent-caution); /* Default warning background */
|
|
382
|
+
--cnvs-sys-color-bg-caution-softer: var(--cnvs-sys-color-brand-surface-caution-strong); /* Softer warning background */
|
|
383
|
+
--cnvs-sys-color-bg-caution-softest: var(--cnvs-sys-color-brand-surface-caution-default); /* Disabled warning background */
|
|
384
|
+
--cnvs-sys-color-bg-positive-stronger: var(--cnvs-sys-color-brand-accent-positive); /* Active success background */
|
|
385
|
+
--cnvs-sys-color-bg-positive-strong: var(--cnvs-sys-color-brand-accent-positive); /* Hover success background */
|
|
386
|
+
--cnvs-sys-color-bg-positive-default: var(--cnvs-sys-color-brand-accent-positive); /* Disabled success background */
|
|
387
|
+
--cnvs-sys-color-bg-positive-soft: var(--cnvs-sys-color-brand-surface-positive-default); /* Disabled success background */
|
|
388
|
+
--cnvs-sys-color-bg-positive-softer: var(--cnvs-sys-color-brand-surface-positive-strong); /* Surface success background */
|
|
389
|
+
--cnvs-sys-color-bg-primary-stronger: var(--cnvs-sys-color-brand-accent-primary); /* Brand active background */
|
|
390
|
+
--cnvs-sys-color-bg-primary-strong: var(--cnvs-sys-color-brand-accent-primary); /* Brand hover background */
|
|
391
|
+
--cnvs-sys-color-bg-primary-default: var(--cnvs-sys-color-brand-accent-primary); /* Primary brand color */
|
|
392
|
+
--cnvs-sys-color-bg-primary-soft: var(--cnvs-sys-color-brand-surface-primary-default); /* Primary disabled */
|
|
393
|
+
--cnvs-sys-color-bg-primary-softer: var(--cnvs-sys-color-brand-surface-primary-strong); /* Select */
|
|
394
|
+
--cnvs-sys-color-bg-primary-softest: var(--cnvs-sys-color-brand-surface-primary-default); /* Surface */
|
|
305
395
|
--cnvs-sys-line-height-title-lg: var(--cnvs-base-size-800);
|
|
306
396
|
--cnvs-sys-line-height-title-md: var(--cnvs-base-size-700);
|
|
307
397
|
--cnvs-sys-line-height-title-sm: var(--cnvs-base-size-600);
|
|
@@ -328,10 +418,12 @@
|
|
|
328
418
|
--cnvs-sys-font-size-subtext-sm: var(--cnvs-base-size-125);
|
|
329
419
|
--cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
|
|
330
420
|
--cnvs-sys-shape-full: calc(var(--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) */
|
|
331
|
-
--cnvs-sys-shape-
|
|
332
|
-
--cnvs-sys-shape-
|
|
333
|
-
--cnvs-sys-shape-
|
|
334
|
-
--cnvs-sys-shape-
|
|
421
|
+
--cnvs-sys-shape-xxxl: var(--cnvs-base-size-400); /* Maximum rounding for modals and large containers */
|
|
422
|
+
--cnvs-sys-shape-xxl: var(--cnvs-base-size-300); /* Extra extra large rounding for cards and items */
|
|
423
|
+
--cnvs-sys-shape-xl: var(--cnvs-base-size-200); /* Extra large rounding for prominent containers */
|
|
424
|
+
--cnvs-sys-shape-lg: var(--cnvs-base-size-150); /* Primarily used for elevated and simple parent containers with greater amounts of content and UI. Dialogs, Modals, Bottom Sheets */
|
|
425
|
+
--cnvs-sys-shape-md: var(--cnvs-base-size-100); /* Core large containers, card containers and popups that house moderate amounts of content and/or data: Card, Menus */
|
|
426
|
+
--cnvs-sys-shape-sm: var(--cnvs-base-size-50); /* Components presenting info text, user input, user feedback. Inputs, Toasts, Snack bars, Tooltips, Error Alert Banner */
|
|
335
427
|
--cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
|
|
336
428
|
--cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
|
|
337
429
|
--cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
|