@workday/canvas-tokens-web 4.1.2 → 4.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/base/_variables.css +1 -1
- package/css/brand/_variables.css +1 -1
- package/css/system/_variables.css +118 -118
- package/dist/common-js/base/index.d.ts +1 -1
- package/dist/common-js/base/index.js +1 -1
- package/dist/common-js/brand/index.d.ts +1 -1
- package/dist/common-js/brand/index.js +1 -1
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +232 -78
- 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 +1 -1
- 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 +232 -78
- package/dist/es6/system/index.js +1 -1
- package/less/base/_variables.less +1 -1
- package/less/brand/_variables.less +1 -1
- package/less/system/_variables.less +118 -118
- package/package.json +1 -1
- package/scss/base/_variables.sass +1 -1
- package/scss/base/_variables.scss +1 -1
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/system/_variables.sass +118 -118
- package/scss/system/_variables.scss +118 -118
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
|
|
3
|
+
* Generated on Wed, 25 Feb 2026 21:44:04 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
--cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
|
|
27
27
|
--cnvs-sys-gap-none: var(--cnvs-base-size-0); /* Use when there is no space between elements */
|
|
28
28
|
--cnvs-sys-padding-none: var(--cnvs-base-size-0); /* Use when there should be no space between content and element's edges. */
|
|
29
|
-
--cnvs-sys-opacity-accent-pressed: var(--cnvs-base-opacity-360); /*
|
|
30
|
-
--cnvs-sys-opacity-accent-hover: var(--cnvs-base-opacity-180); /*
|
|
31
|
-
--cnvs-sys-opacity-surface-pressed: var(--cnvs-base-opacity-180); /*
|
|
29
|
+
--cnvs-sys-opacity-accent-pressed: var(--cnvs-base-opacity-360); /* State layer applied to accent colors while pressing */
|
|
30
|
+
--cnvs-sys-opacity-accent-hover: var(--cnvs-base-opacity-180); /* State layer applied to accent colors on hover */
|
|
31
|
+
--cnvs-sys-opacity-surface-pressed: var(--cnvs-base-opacity-180); /* State layer applied to surface colors while pressing */
|
|
32
32
|
--cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-80); /* Alpha on second shadow */
|
|
33
33
|
--cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-120); /* Alpha on first shadow */
|
|
34
34
|
--cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-840); /* Tooltips, Status Indicator */
|
|
@@ -41,48 +41,48 @@
|
|
|
41
41
|
--cnvs-sys-motion-easing-quick-deceleration: var(--cnvs-base-easing-a-300);
|
|
42
42
|
--cnvs-sys-motion-easing-quick-acceleration: var(--cnvs-base-easing-a-200);
|
|
43
43
|
--cnvs-sys-motion-easing-quick-standard: var(--cnvs-base-easing-a-100);
|
|
44
|
-
--cnvs-sys-color-focus-contrast: var(--cnvs-base-palette-neutral-a900);
|
|
45
|
-
--cnvs-sys-color-focus-inverse: var(--cnvs-base-palette-neutral-0);
|
|
46
|
-
--cnvs-sys-color-accent-overlay-mixin: var(--cnvs-base-palette-neutral-1000);
|
|
47
|
-
--cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400);
|
|
48
|
-
--cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200);
|
|
49
|
-
--cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-slate-400);
|
|
50
|
-
--cnvs-sys-color-accent-muted-default: var(--cnvs-base-palette-slate-600);
|
|
51
|
-
--cnvs-sys-color-accent-contrast: var(--cnvs-base-palette-neutral-a900);
|
|
52
|
-
--cnvs-sys-color-accent-success: var(--cnvs-base-palette-green-600);
|
|
53
|
-
--cnvs-sys-color-accent-warning: var(--cnvs-base-palette-amber-400);
|
|
54
|
-
--cnvs-sys-color-accent-danger: var(--cnvs-base-palette-red-600);
|
|
55
|
-
--cnvs-sys-color-accent-info: var(--cnvs-base-palette-blue-600);
|
|
56
|
-
--cnvs-sys-color-accent-ai: var(--cnvs-base-palette-blue-950);
|
|
44
|
+
--cnvs-sys-color-focus-contrast: var(--cnvs-base-palette-neutral-a900); /* High contrast focus ring for accessibility */
|
|
45
|
+
--cnvs-sys-color-focus-inverse: var(--cnvs-base-palette-neutral-0); /* Focus ring for use on dark backgrounds */
|
|
46
|
+
--cnvs-sys-color-accent-overlay-mixin: var(--cnvs-base-palette-neutral-1000); /* Pressed overlay mixin color for accent-colored elements */
|
|
47
|
+
--cnvs-sys-color-accent-overlay-pressed: var(--cnvs-base-palette-neutral-a400); /* Pressed overlay for accent-colored elements */
|
|
48
|
+
--cnvs-sys-color-accent-overlay-hover: var(--cnvs-base-palette-neutral-a200); /* Hover overlay for accent-colored elements */
|
|
49
|
+
--cnvs-sys-color-accent-muted-soft: var(--cnvs-base-palette-slate-400); /* Softer muted accent for tertiary elements */
|
|
50
|
+
--cnvs-sys-color-accent-muted-default: var(--cnvs-base-palette-slate-600); /* Muted accent for secondary visual elements */
|
|
51
|
+
--cnvs-sys-color-accent-contrast: var(--cnvs-base-palette-neutral-a900); /* High contrast accent for maximum visibility */
|
|
52
|
+
--cnvs-sys-color-accent-success: var(--cnvs-base-palette-green-600); /* Solid success accent for positive indicators (not tenant themeable) */
|
|
53
|
+
--cnvs-sys-color-accent-warning: var(--cnvs-base-palette-amber-400); /* Solid warning accent for caution indicators (not tenant themeable) */
|
|
54
|
+
--cnvs-sys-color-accent-danger: var(--cnvs-base-palette-red-600); /* Solid danger accent for error indicators (not tenant themeable) */
|
|
55
|
+
--cnvs-sys-color-accent-info: var(--cnvs-base-palette-blue-600); /* Solid info accent for indicators (not tenant themeable) */
|
|
56
|
+
--cnvs-sys-color-accent-ai: var(--cnvs-base-palette-blue-950); /* Dark accent indicating AI-generated content */
|
|
57
57
|
--cnvs-sys-color-surface-overlay-scrim: var(--cnvs-base-palette-neutral-a400);
|
|
58
|
-
--cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a300);
|
|
59
|
-
--cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a100);
|
|
60
|
-
--cnvs-sys-color-surface-overlay-mixin: var(--cnvs-base-palette-slate-500);
|
|
61
|
-
--cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a200);
|
|
62
|
-
--cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a50);
|
|
63
|
-
--cnvs-sys-color-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950);
|
|
64
|
-
--cnvs-sys-color-surface-contrast-default: var(--cnvs-base-palette-neutral-a900);
|
|
65
|
-
--cnvs-sys-color-surface-inverse: var(--cnvs-base-palette-neutral-0);
|
|
66
|
-
--cnvs-sys-color-surface-transparent: var(--cnvs-base-palette-neutral-a0);
|
|
67
|
-
--cnvs-sys-color-surface-ai-pressed: var(--cnvs-base-palette-blue-400);
|
|
68
|
-
--cnvs-sys-color-surface-ai-hover: var(--cnvs-base-palette-blue-a200);
|
|
69
|
-
--cnvs-sys-color-surface-ai-default: var(--cnvs-base-palette-blue-a100);
|
|
70
|
-
--cnvs-sys-color-surface-success-strong: var(--cnvs-base-palette-green-a50);
|
|
71
|
-
--cnvs-sys-color-surface-success-default: var(--cnvs-base-palette-green-a25);
|
|
72
|
-
--cnvs-sys-color-surface-warning-strong: var(--cnvs-base-palette-amber-a50);
|
|
73
|
-
--cnvs-sys-color-surface-warning-default: var(--cnvs-base-palette-amber-a25);
|
|
74
|
-
--cnvs-sys-color-surface-danger-strong: var(--cnvs-base-palette-red-a50);
|
|
75
|
-
--cnvs-sys-color-surface-danger-default: var(--cnvs-base-palette-red-a25);
|
|
76
|
-
--cnvs-sys-color-surface-info-strong: var(--cnvs-base-palette-blue-a50); /*
|
|
77
|
-
--cnvs-sys-color-surface-info-default: var(--cnvs-base-palette-blue-a25); /*
|
|
78
|
-
--cnvs-sys-color-surface-loading: var(--cnvs-base-palette-slate-a200);
|
|
79
|
-
--cnvs-sys-color-surface-alt-strong: var(--cnvs-base-palette-slate-a100); /*
|
|
80
|
-
--cnvs-sys-color-surface-alt-default: var(--cnvs-base-palette-slate-a50); /*
|
|
81
|
-
--cnvs-sys-color-surface-raised: var(--cnvs-base-palette-slate-a25); /*
|
|
82
|
-
--cnvs-sys-color-surface-modal: var(--cnvs-base-palette-neutral-0);
|
|
83
|
-
--cnvs-sys-color-surface-popover: var(--cnvs-base-palette-neutral-0);
|
|
84
|
-
--cnvs-sys-color-surface-navigation: var(--cnvs-base-palette-slate-50); /*
|
|
85
|
-
--cnvs-sys-color-surface-default: var(--cnvs-base-palette-neutral-0); /* Default
|
|
58
|
+
--cnvs-sys-color-surface-overlay-pressed-inverse: var(--cnvs-base-palette-white-a300); /* Pressed overlay for containers on dark backgrounds */
|
|
59
|
+
--cnvs-sys-color-surface-overlay-pressed-default: var(--cnvs-base-palette-slate-a100); /* Pressed state overlay for interactive containers */
|
|
60
|
+
--cnvs-sys-color-surface-overlay-mixin: var(--cnvs-base-palette-slate-500); /* Pressed state overlay for interactive containers */
|
|
61
|
+
--cnvs-sys-color-surface-overlay-hover-inverse: var(--cnvs-base-palette-white-a200); /* Hover overlay for containers on dark backgrounds */
|
|
62
|
+
--cnvs-sys-color-surface-overlay-hover-default: var(--cnvs-base-palette-slate-a50); /* Hover state overlay for interactive containers */
|
|
63
|
+
--cnvs-sys-color-surface-contrast-strong: var(--cnvs-base-palette-neutral-a950); /* Stronger high contrast dark container background */
|
|
64
|
+
--cnvs-sys-color-surface-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast dark container background */
|
|
65
|
+
--cnvs-sys-color-surface-inverse: var(--cnvs-base-palette-neutral-0); /* Container background for use on dark backgrounds */
|
|
66
|
+
--cnvs-sys-color-surface-transparent: var(--cnvs-base-palette-neutral-a0); /* Fully transparent container background */
|
|
67
|
+
--cnvs-sys-color-surface-ai-pressed: var(--cnvs-base-palette-blue-400); /* Pressed state for AI-generated content containers */
|
|
68
|
+
--cnvs-sys-color-surface-ai-hover: var(--cnvs-base-palette-blue-a200); /* Hover state for AI-generated content containers */
|
|
69
|
+
--cnvs-sys-color-surface-ai-default: var(--cnvs-base-palette-blue-a100); /* Container background indicating AI-generated content */
|
|
70
|
+
--cnvs-sys-color-surface-success-strong: var(--cnvs-base-palette-green-a50); /* Stronger container background for success states */
|
|
71
|
+
--cnvs-sys-color-surface-success-default: var(--cnvs-base-palette-green-a25); /* Container background for success states (not tenant themeable) */
|
|
72
|
+
--cnvs-sys-color-surface-warning-strong: var(--cnvs-base-palette-amber-a50); /* Stronger container background for warning states */
|
|
73
|
+
--cnvs-sys-color-surface-warning-default: var(--cnvs-base-palette-amber-a25); /* Container background for warning states (not tenant themeable) */
|
|
74
|
+
--cnvs-sys-color-surface-danger-strong: var(--cnvs-base-palette-red-a50); /* Stronger container background for error states */
|
|
75
|
+
--cnvs-sys-color-surface-danger-default: var(--cnvs-base-palette-red-a25); /* Container background for error states (not tenant themeable) */
|
|
76
|
+
--cnvs-sys-color-surface-info-strong: var(--cnvs-base-palette-blue-a50); /* Stronger container background for info badges and indicators */
|
|
77
|
+
--cnvs-sys-color-surface-info-default: var(--cnvs-base-palette-blue-a25); /* Container background for informational callouts */
|
|
78
|
+
--cnvs-sys-color-surface-loading: var(--cnvs-base-palette-slate-a200); /* Background for skeleton loaders and loading states */
|
|
79
|
+
--cnvs-sys-color-surface-alt-strong: var(--cnvs-base-palette-slate-a100); /* Stronger de-emphasized container background */
|
|
80
|
+
--cnvs-sys-color-surface-alt-default: var(--cnvs-base-palette-slate-a50); /* De-emphasized container background for secondary information */
|
|
81
|
+
--cnvs-sys-color-surface-raised: var(--cnvs-base-palette-slate-a25); /* Separates a layer from the surface, e.g. table headers or sticky elements */
|
|
82
|
+
--cnvs-sys-color-surface-modal: var(--cnvs-base-palette-neutral-0); /* Background for modal dialog containers */
|
|
83
|
+
--cnvs-sys-color-surface-popover: var(--cnvs-base-palette-neutral-0); /* Background for floating containers like dropdowns and tooltips */
|
|
84
|
+
--cnvs-sys-color-surface-navigation: var(--cnvs-base-palette-slate-50); /* Background for navigation containers like sidebars and top bars */
|
|
85
|
+
--cnvs-sys-color-surface-default: var(--cnvs-base-palette-neutral-0); /* Default background for containers on top of the page */
|
|
86
86
|
--cnvs-sys-color-static-amber-soft: var(--cnvs-base-palette-amber-100); /* Soft amber */
|
|
87
87
|
--cnvs-sys-color-static-amber-strongest: var(--cnvs-base-palette-amber-950); /* Stronger amber */
|
|
88
88
|
--cnvs-sys-color-static-amber-softer: var(--cnvs-base-palette-amber-50); /* Soft amber */
|
|
@@ -124,51 +124,51 @@
|
|
|
124
124
|
--cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-amber-100);
|
|
125
125
|
--cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-amber-400);
|
|
126
126
|
--cnvs-sys-color-static-gold-stronger: var(--cnvs-base-palette-amber-600);
|
|
127
|
-
--cnvs-sys-color-shadow-ambient: var(--cnvs-base-palette-slate-a100);
|
|
128
|
-
--cnvs-sys-color-shadow-base: var(--cnvs-base-palette-slate-a200);
|
|
129
|
-
--cnvs-sys-color-border-transparent: var(--cnvs-base-palette-neutral-a0);
|
|
130
|
-
--cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700);
|
|
131
|
-
--cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-neutral-0);
|
|
132
|
-
--cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-400);
|
|
133
|
-
--cnvs-sys-color-border-danger: var(--cnvs-base-palette-red-500);
|
|
134
|
-
--cnvs-sys-color-border-info-default: var(--cnvs-base-palette-blue-500);
|
|
135
|
-
--cnvs-sys-color-border-strong: var(--cnvs-base-palette-slate-a300);
|
|
136
|
-
--cnvs-sys-color-border-default: var(--cnvs-base-palette-slate-a200);
|
|
127
|
+
--cnvs-sys-color-shadow-ambient: var(--cnvs-base-palette-slate-a100); /* Subtle ambient shadow for soft depth */
|
|
128
|
+
--cnvs-sys-color-shadow-base: var(--cnvs-base-palette-slate-a200); /* Primary shadow color for elevated elements */
|
|
129
|
+
--cnvs-sys-color-border-transparent: var(--cnvs-base-palette-neutral-a0); /* Invisible border for layout spacing */
|
|
130
|
+
--cnvs-sys-color-border-inverse-strong: var(--cnvs-base-palette-white-a700); /* Stronger border for use on dark backgrounds */
|
|
131
|
+
--cnvs-sys-color-border-inverse-default: var(--cnvs-base-palette-neutral-0); /* Border for use on dark backgrounds */
|
|
132
|
+
--cnvs-sys-color-border-warning: var(--cnvs-base-palette-amber-400); /* Border for warning states (not tenant themeable) */
|
|
133
|
+
--cnvs-sys-color-border-danger: var(--cnvs-base-palette-red-500); /* Border for error states (not tenant themeable) */
|
|
134
|
+
--cnvs-sys-color-border-info-default: var(--cnvs-base-palette-blue-500); /* Border for informational containers (not tenant themeable) */
|
|
135
|
+
--cnvs-sys-color-border-strong: var(--cnvs-base-palette-slate-a300); /* Stronger border for more visible separation */
|
|
136
|
+
--cnvs-sys-color-border-default: var(--cnvs-base-palette-slate-a200); /* Default border for containers and dividers */
|
|
137
137
|
--cnvs-sys-color-border-container: var(--cnvs-base-palette-slate-300); /* Cards, Toasts, Surfaces */
|
|
138
138
|
--cnvs-sys-color-border-primary-default: var(--cnvs-base-palette-blue-500); /* Brand, Focus */
|
|
139
139
|
--cnvs-sys-color-border-divider: var(--cnvs-base-palette-slate-200); /* Dividers */
|
|
140
140
|
--cnvs-sys-color-border-caution-strong: var(--cnvs-base-palette-amber-500); /* Warning outer (box shadow) */
|
|
141
141
|
--cnvs-sys-color-border-caution-default: var(--cnvs-base-palette-amber-400); /* Warning inner */
|
|
142
142
|
--cnvs-sys-color-border-critical-default: var(--cnvs-base-palette-red-500); /* Error */
|
|
143
|
-
--cnvs-sys-color-border-contrast-default: var(--cnvs-base-palette-neutral-a900);
|
|
143
|
+
--cnvs-sys-color-border-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast border for maximum visibility */
|
|
144
144
|
--cnvs-sys-color-border-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Secondary Button Hover */
|
|
145
|
-
--cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-slate-a700); /*
|
|
146
|
-
--cnvs-sys-color-border-input-default: var(--cnvs-base-palette-slate-a500); /*
|
|
145
|
+
--cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-slate-a700); /* Hover state border for form inputs */
|
|
146
|
+
--cnvs-sys-color-border-input-default: var(--cnvs-base-palette-slate-a500); /* Default border for form inputs */
|
|
147
147
|
--cnvs-sys-color-border-input-inverse: var(--cnvs-base-palette-neutral-0); /* Borders on checkboxes and radios */
|
|
148
148
|
--cnvs-sys-color-border-input-strong: var(--cnvs-base-palette-slate-700); /* Input hover */
|
|
149
149
|
--cnvs-sys-color-border-input-disabled: var(--cnvs-base-palette-slate-400); /* Disabled inputs */
|
|
150
150
|
--cnvs-sys-color-border-ai: var(--cnvs-base-palette-blue-950); /* Active state on AI borders */
|
|
151
|
-
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-a950);
|
|
152
|
-
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-a900);
|
|
153
|
-
--cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /*
|
|
154
|
-
--cnvs-sys-color-fg-success-strong: var(--cnvs-base-palette-green-700);
|
|
155
|
-
--cnvs-sys-color-fg-success-default: var(--cnvs-base-palette-green-600);
|
|
156
|
-
--cnvs-sys-color-fg-warning-strong: var(--cnvs-base-palette-amber-700);
|
|
157
|
-
--cnvs-sys-color-fg-warning-default: var(--cnvs-base-palette-amber-600);
|
|
158
|
-
--cnvs-sys-color-fg-danger-strong: var(--cnvs-base-palette-red-700); /* Stronger
|
|
159
|
-
--cnvs-sys-color-fg-danger-default: var(--cnvs-base-palette-red-600); /*
|
|
160
|
-
--cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /*
|
|
161
|
-
--cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-a400); /*
|
|
162
|
-
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-a950); /*
|
|
163
|
-
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-a900); /*
|
|
164
|
-
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-a800); /* Default
|
|
151
|
+
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-a950); /* Stronger high contrast text */
|
|
152
|
+
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-a900); /* High contrast text for maximum readability */
|
|
153
|
+
--cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* Text and icons indicating AI-generated content */
|
|
154
|
+
--cnvs-sys-color-fg-success-strong: var(--cnvs-base-palette-green-700); /* Stronger success text and icons */
|
|
155
|
+
--cnvs-sys-color-fg-success-default: var(--cnvs-base-palette-green-600); /* Success text and icons (not tenant themeable) */
|
|
156
|
+
--cnvs-sys-color-fg-warning-strong: var(--cnvs-base-palette-amber-700); /* Stronger warning text and icons */
|
|
157
|
+
--cnvs-sys-color-fg-warning-default: var(--cnvs-base-palette-amber-600); /* Warning text and icons (not tenant themeable) */
|
|
158
|
+
--cnvs-sys-color-fg-danger-strong: var(--cnvs-base-palette-red-700); /* Stronger error text and icons */
|
|
159
|
+
--cnvs-sys-color-fg-danger-default: var(--cnvs-base-palette-red-600); /* Error text and icons (not tenant themeable) */
|
|
160
|
+
--cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Text and icons for use on dark backgrounds */
|
|
161
|
+
--cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-a400); /* Disabled state text and icons */
|
|
162
|
+
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-a950); /* Strongest text for titles */
|
|
163
|
+
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-a900); /* Stronger text for headings and labels */
|
|
164
|
+
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-a800); /* Default body text and icons */
|
|
165
165
|
--cnvs-sys-color-fg-positive-stronger: var(--cnvs-base-palette-green-800); /* Error */
|
|
166
166
|
--cnvs-sys-color-fg-positive-strong: var(--cnvs-base-palette-green-700); /* Error */
|
|
167
167
|
--cnvs-sys-color-fg-positive-soft: var(--cnvs-base-palette-green-400); /* Error */
|
|
168
168
|
--cnvs-sys-color-fg-positive-softer: var(--cnvs-base-palette-green-200); /* Error */
|
|
169
169
|
--cnvs-sys-color-fg-positive-default: var(--cnvs-base-palette-green-600); /* Error */
|
|
170
|
-
--cnvs-sys-color-fg-info-strong: var(--cnvs-base-palette-blue-700);
|
|
171
|
-
--cnvs-sys-color-fg-info-default: var(--cnvs-base-palette-blue-600);
|
|
170
|
+
--cnvs-sys-color-fg-info-strong: var(--cnvs-base-palette-blue-700); /* Stronger informational text and icons */
|
|
171
|
+
--cnvs-sys-color-fg-info-default: var(--cnvs-base-palette-blue-600); /* Informational text and icons (not tenant themeable) */
|
|
172
172
|
--cnvs-sys-color-fg-info-stronger: var(--cnvs-base-palette-blue-800); /* Links on hover */
|
|
173
173
|
--cnvs-sys-color-fg-info-soft: var(--cnvs-base-palette-blue-400);
|
|
174
174
|
--cnvs-sys-color-fg-info-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
|
|
@@ -182,8 +182,8 @@
|
|
|
182
182
|
--cnvs-sys-color-fg-primary-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
|
|
183
183
|
--cnvs-sys-color-fg-primary-soft: var(--cnvs-base-palette-blue-400);
|
|
184
184
|
--cnvs-sys-color-fg-primary-default: var(--cnvs-base-palette-blue-600); /* Branded text */
|
|
185
|
-
--cnvs-sys-color-fg-muted-strong: var(--cnvs-base-palette-slate-a700); /* Stronger
|
|
186
|
-
--cnvs-sys-color-fg-muted-default: var(--cnvs-base-palette-slate-a600); /*
|
|
185
|
+
--cnvs-sys-color-fg-muted-strong: var(--cnvs-base-palette-slate-a700); /* Stronger secondary text */
|
|
186
|
+
--cnvs-sys-color-fg-muted-default: var(--cnvs-base-palette-slate-a600); /* Secondary text for hints and placeholders */
|
|
187
187
|
--cnvs-sys-color-fg-muted-soft: var(--cnvs-base-palette-slate-400); /* Tab item foreground */
|
|
188
188
|
--cnvs-sys-color-fg-muted-stronger: var(--cnvs-base-palette-slate-800);
|
|
189
189
|
--cnvs-sys-color-fg-critical-softer: var(--cnvs-base-palette-red-200); /* Error */
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
--cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
|
|
287
287
|
--cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
|
|
288
288
|
--cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
|
|
289
|
-
--cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-50); /*
|
|
289
|
+
--cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-50); /* Alternative page background for visual separation between page sections */
|
|
290
290
|
--cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
|
|
291
291
|
--cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
|
|
292
292
|
--cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
|
|
@@ -338,37 +338,37 @@
|
|
|
338
338
|
--cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
|
|
339
339
|
--cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
|
|
340
340
|
--cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
|
|
341
|
-
--cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100); /*
|
|
342
|
-
--cnvs-sys-color-brand-border-caution: var(--cnvs-brand-caution-500);
|
|
343
|
-
--cnvs-sys-color-brand-border-critical: var(--cnvs-brand-critical-500);
|
|
344
|
-
--cnvs-sys-color-brand-border-primary: var(--cnvs-brand-primary-500); /*
|
|
345
|
-
--cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-700);
|
|
346
|
-
--cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-positive-700);
|
|
347
|
-
--cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-positive-600);
|
|
348
|
-
--cnvs-sys-color-brand-fg-caution-strong: var(--cnvs-brand-caution-700);
|
|
349
|
-
--cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-caution-600);
|
|
350
|
-
--cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-critical-700); /* Stronger
|
|
351
|
-
--cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-critical-600); /*
|
|
352
|
-
--cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-700); /*
|
|
353
|
-
--cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-600); /*
|
|
341
|
+
--cnvs-sys-opacity-surface-hover: var(--cnvs-base-opacity-100); /* State layer applied to surface colors on hover */
|
|
342
|
+
--cnvs-sys-color-brand-border-caution: var(--cnvs-brand-caution-500); /* Tenant-themeable caution border for warning states */
|
|
343
|
+
--cnvs-sys-color-brand-border-critical: var(--cnvs-brand-critical-500); /* Tenant-themeable critical border for error states */
|
|
344
|
+
--cnvs-sys-color-brand-border-primary: var(--cnvs-brand-primary-500); /* Tenant-themeable primary border for focused inputs */
|
|
345
|
+
--cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-700); /* Tenant-themeable text color for selected items */
|
|
346
|
+
--cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-positive-700); /* Stronger tenant-themeable positive text and icon color */
|
|
347
|
+
--cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-positive-600); /* Tenant-themeable positive text and icon color */
|
|
348
|
+
--cnvs-sys-color-brand-fg-caution-strong: var(--cnvs-brand-caution-700); /* Stronger tenant-themeable caution text and icon color */
|
|
349
|
+
--cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-caution-600); /* Tenant-themeable caution text and icon color */
|
|
350
|
+
--cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-critical-700); /* Stronger tenant-themeable critical text and icon color */
|
|
351
|
+
--cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-critical-600); /* Tenant-themeable critical text and icon color */
|
|
352
|
+
--cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-700); /* Stronger tenant-themeable primary text and icon color */
|
|
353
|
+
--cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-600); /* Tenant-themeable primary text and icon color */
|
|
354
354
|
--cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-600);
|
|
355
|
-
--cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-positive-600);
|
|
356
|
-
--cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-caution-400);
|
|
357
|
-
--cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-critical-600);
|
|
358
|
-
--cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-600);
|
|
359
|
-
--cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-primary-a50);
|
|
360
|
-
--cnvs-sys-color-brand-surface-positive-strong: var(--cnvs-brand-positive-a50);
|
|
361
|
-
--cnvs-sys-color-brand-surface-positive-default: var(--cnvs-brand-positive-a25);
|
|
362
|
-
--cnvs-sys-color-brand-surface-caution-strong: var(--cnvs-brand-caution-a50);
|
|
363
|
-
--cnvs-sys-color-brand-surface-caution-default: var(--cnvs-brand-caution-a25);
|
|
364
|
-
--cnvs-sys-color-brand-surface-critical-strong: var(--cnvs-brand-critical-a50);
|
|
365
|
-
--cnvs-sys-color-brand-surface-critical-default: var(--cnvs-brand-critical-a25);
|
|
366
|
-
--cnvs-sys-color-brand-surface-primary-strong: var(--cnvs-brand-primary-a50);
|
|
367
|
-
--cnvs-sys-color-brand-surface-primary-default: var(--cnvs-brand-primary-a25);
|
|
368
|
-
--cnvs-sys-color-brand-focus-caution-inner: var(--cnvs-brand-caution-400);
|
|
369
|
-
--cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-caution-500);
|
|
370
|
-
--cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-critical-500);
|
|
371
|
-
--cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-primary-500);
|
|
355
|
+
--cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-positive-600); /* Tenant-themeable solid positive accent */
|
|
356
|
+
--cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-caution-400); /* Tenant-themeable solid caution accent */
|
|
357
|
+
--cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-critical-600); /* Tenant-themeable solid critical accent for destructive actions */
|
|
358
|
+
--cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-600); /* Tenant-themeable solid primary accent for buttons and key actions */
|
|
359
|
+
--cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-primary-a50); /* Tenant-themeable background for selected items */
|
|
360
|
+
--cnvs-sys-color-brand-surface-positive-strong: var(--cnvs-brand-positive-a50); /* Stronger tenant-themeable positive container background */
|
|
361
|
+
--cnvs-sys-color-brand-surface-positive-default: var(--cnvs-brand-positive-a25); /* Tenant-themeable positive/success container background */
|
|
362
|
+
--cnvs-sys-color-brand-surface-caution-strong: var(--cnvs-brand-caution-a50); /* Stronger tenant-themeable caution container background */
|
|
363
|
+
--cnvs-sys-color-brand-surface-caution-default: var(--cnvs-brand-caution-a25); /* Tenant-themeable caution/warning container background */
|
|
364
|
+
--cnvs-sys-color-brand-surface-critical-strong: var(--cnvs-brand-critical-a50); /* Stronger tenant-themeable critical container background */
|
|
365
|
+
--cnvs-sys-color-brand-surface-critical-default: var(--cnvs-brand-critical-a25); /* Tenant-themeable critical/error container background */
|
|
366
|
+
--cnvs-sys-color-brand-surface-primary-strong: var(--cnvs-brand-primary-a50); /* Stronger tenant-themeable primary container background */
|
|
367
|
+
--cnvs-sys-color-brand-surface-primary-default: var(--cnvs-brand-primary-a25); /* Tenant-themeable primary container background */
|
|
368
|
+
--cnvs-sys-color-brand-focus-caution-inner: var(--cnvs-brand-caution-400); /* Tenant-themeable inner focus ring for caution-state elements */
|
|
369
|
+
--cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-caution-500); /* Tenant-themeable outer focus ring for caution-state elements */
|
|
370
|
+
--cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-critical-500); /* Tenant-themeable focus ring for error-state elements */
|
|
371
|
+
--cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-primary-500); /* Tenant-themeable focus ring for interactive elements */
|
|
372
372
|
--cnvs-sys-color-shadow-default: var(--cnvs-sys-color-shadow-base); /* Main shadow color */
|
|
373
373
|
--cnvs-sys-color-shadow-2: var(--cnvs-sys-color-shadow-ambient); /* Second shadow color */
|
|
374
374
|
--cnvs-sys-color-shadow-1: var(--cnvs-sys-color-shadow-base); /* First shadow color */
|
|
@@ -391,14 +391,14 @@
|
|
|
391
391
|
--cnvs-sys-padding-sm: var(--cnvs-base-size-150); /* Compact padding, used in Rich Text Editor, or X-Small Buttons */
|
|
392
392
|
--cnvs-sys-padding-xs: var(--cnvs-base-size-100); /* Horizontal padding on Input Fields */
|
|
393
393
|
--cnvs-sys-padding-xxs: var(--cnvs-base-size-50);
|
|
394
|
-
--cnvs-sys-size-xxl: var(--cnvs-base-size-800); /*
|
|
395
|
-
--cnvs-sys-size-xl: var(--cnvs-base-size-700); /*
|
|
396
|
-
--cnvs-sys-size-lg: var(--cnvs-base-size-600); /*
|
|
397
|
-
--cnvs-sys-size-md: var(--cnvs-base-size-500); /*
|
|
398
|
-
--cnvs-sys-size-sm: var(--cnvs-base-size-400); /*
|
|
399
|
-
--cnvs-sys-size-xs: var(--cnvs-base-size-300); /*
|
|
400
|
-
--cnvs-sys-size-xxs: var(--cnvs-base-size-250); /*
|
|
401
|
-
--cnvs-sys-size-xxxs: var(--cnvs-base-size-200); /*
|
|
394
|
+
--cnvs-sys-size-xxl: var(--cnvs-base-size-800); /* Expandable containers. Used for expandable containers in their collapsed state. */
|
|
395
|
+
--cnvs-sys-size-xl: var(--cnvs-base-size-700); /* Content containers. Used for table cells and toasts. */
|
|
396
|
+
--cnvs-sys-size-lg: var(--cnvs-base-size-600); /* Prominent components. Used for large buttons, segmented controls, expandable triggers, tabs, and avatars. */
|
|
397
|
+
--cnvs-sys-size-md: var(--cnvs-base-size-500); /* Default size for most components. Used for buttons, segmented controls, banners, input fields, and menu items. */
|
|
398
|
+
--cnvs-sys-size-sm: var(--cnvs-base-size-400); /* Standard interactive components. Used for buttons, segmented controls, tooltips, and avatars. */
|
|
399
|
+
--cnvs-sys-size-xs: var(--cnvs-base-size-300); /* Compact interactive elements. Used for small buttons, pills, checkboxes, and radio buttons. */
|
|
400
|
+
--cnvs-sys-size-xxs: var(--cnvs-base-size-250); /* Compact indicators. Used for status indicators and count badges. */
|
|
401
|
+
--cnvs-sys-size-xxxs: var(--cnvs-base-size-200); /* Used for switch toggle. */
|
|
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);
|
|
@@ -428,9 +428,9 @@
|
|
|
428
428
|
--cnvs-sys-shape-xxxl: var(--cnvs-base-size-400); /* Maximum rounding for modals and large containers */
|
|
429
429
|
--cnvs-sys-shape-xxl: var(--cnvs-base-size-300); /* Extra extra large rounding for cards and items */
|
|
430
430
|
--cnvs-sys-shape-xl: var(--cnvs-base-size-200); /* Extra large rounding for prominent containers */
|
|
431
|
-
--cnvs-sys-shape-lg: var(--cnvs-base-size-150); /*
|
|
432
|
-
--cnvs-sys-shape-md: var(--cnvs-base-size-100); /*
|
|
433
|
-
--cnvs-sys-shape-sm: var(--cnvs-base-size-50); /*
|
|
431
|
+
--cnvs-sys-shape-lg: var(--cnvs-base-size-150); /* Rich text editor */
|
|
432
|
+
--cnvs-sys-shape-md: var(--cnvs-base-size-100); /* Inputs, Toast, Tooltip, Snackbar */
|
|
433
|
+
--cnvs-sys-shape-sm: var(--cnvs-base-size-50); /* Pill, Status Indicator, Checkbox */
|
|
434
434
|
--cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
|
|
435
435
|
--cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
|
|
436
436
|
--cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
|