@sage/design-tokens 15.2.1 → 15.3.0
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/frozenproduct/all.css +4 -2
- package/css/frozenproduct/large/components/table.css +4 -2
- package/css/frozenproduct/small/components/table.css +4 -2
- package/css/product/all.css +9 -7
- package/css/product/large/components/table.css +9 -7
- package/css/product/small/components/table.css +9 -7
- package/ios/frozenproduct/large/dark/components/table.h +3 -1
- package/ios/frozenproduct/large/light/components/table.h +3 -1
- package/ios/frozenproduct/small/dark/components/table.h +3 -1
- package/ios/frozenproduct/small/light/components/table.h +3 -1
- package/ios/product/large/dark/components/table.h +8 -6
- package/ios/product/large/light/components/table.h +8 -6
- package/ios/product/small/dark/components/table.h +8 -6
- package/ios/product/small/light/components/table.h +8 -6
- package/js/common/frozenproduct/large/dark/components/table.d.ts +2 -0
- package/js/common/frozenproduct/large/dark/components/table.js +32 -4
- package/js/common/frozenproduct/large/light/components/table.d.ts +2 -0
- package/js/common/frozenproduct/large/light/components/table.js +32 -4
- package/js/common/frozenproduct/small/dark/components/table.d.ts +2 -0
- package/js/common/frozenproduct/small/dark/components/table.js +32 -4
- package/js/common/frozenproduct/small/light/components/table.d.ts +2 -0
- package/js/common/frozenproduct/small/light/components/table.js +32 -4
- package/js/common/product/large/dark/components/table.d.ts +2 -0
- package/js/common/product/large/dark/components/table.js +54 -14
- package/js/common/product/large/light/components/table.d.ts +2 -0
- package/js/common/product/large/light/components/table.js +54 -14
- package/js/common/product/small/dark/components/table.d.ts +2 -0
- package/js/common/product/small/dark/components/table.js +54 -14
- package/js/common/product/small/light/components/table.d.ts +2 -0
- package/js/common/product/small/light/components/table.js +54 -14
- package/js/es6/frozenproduct/large/dark/components/table.d.ts +2 -0
- package/js/es6/frozenproduct/large/dark/components/table.js +3 -1
- package/js/es6/frozenproduct/large/light/components/table.d.ts +2 -0
- package/js/es6/frozenproduct/large/light/components/table.js +3 -1
- package/js/es6/frozenproduct/small/dark/components/table.d.ts +2 -0
- package/js/es6/frozenproduct/small/dark/components/table.js +3 -1
- package/js/es6/frozenproduct/small/light/components/table.d.ts +2 -0
- package/js/es6/frozenproduct/small/light/components/table.js +3 -1
- package/js/es6/product/large/dark/components/table.d.ts +2 -0
- package/js/es6/product/large/dark/components/table.js +8 -6
- package/js/es6/product/large/light/components/table.d.ts +2 -0
- package/js/es6/product/large/light/components/table.js +8 -6
- package/js/es6/product/small/dark/components/table.d.ts +2 -0
- package/js/es6/product/small/dark/components/table.js +8 -6
- package/js/es6/product/small/light/components/table.d.ts +2 -0
- package/js/es6/product/small/light/components/table.js +8 -6
- package/js/umd/frozenproduct/large/dark/components/table.js +32 -4
- package/js/umd/frozenproduct/large/light/components/table.js +32 -4
- package/js/umd/frozenproduct/small/dark/components/table.js +32 -4
- package/js/umd/frozenproduct/small/light/components/table.js +32 -4
- package/js/umd/product/large/dark/components/table.js +54 -14
- package/js/umd/product/large/light/components/table.js +54 -14
- package/js/umd/product/small/dark/components/table.js +54 -14
- package/js/umd/product/small/light/components/table.js +54 -14
- package/json/flat/frozenproduct/large/dark/components/table.json +3 -1
- package/json/flat/frozenproduct/large/light/components/table.json +3 -1
- package/json/flat/frozenproduct/small/dark/components/table.json +3 -1
- package/json/flat/frozenproduct/small/light/components/table.json +3 -1
- package/json/flat/product/large/dark/components/table.json +8 -6
- package/json/flat/product/large/light/components/table.json +8 -6
- package/json/flat/product/small/dark/components/table.json +8 -6
- package/json/flat/product/small/light/components/table.json +8 -6
- package/json/nested/frozenproduct/large/dark/components/table.json +4 -2
- package/json/nested/frozenproduct/large/light/components/table.json +4 -2
- package/json/nested/frozenproduct/small/dark/components/table.json +4 -2
- package/json/nested/frozenproduct/small/light/components/table.json +4 -2
- package/json/nested/product/large/dark/components/table.json +9 -7
- package/json/nested/product/large/light/components/table.json +9 -7
- package/json/nested/product/small/dark/components/table.json +9 -7
- package/json/nested/product/small/light/components/table.json +9 -7
- package/package.json +1 -1
- package/sage-design-tokens-15.3.0.tgz +0 -0
- package/scss/frozenproduct/large/components/table.scss +4 -2
- package/scss/frozenproduct/small/components/badge.scss +1 -1
- package/scss/frozenproduct/small/components/button.scss +15 -15
- package/scss/frozenproduct/small/components/container.scss +10 -10
- package/scss/frozenproduct/small/components/form.scss +11 -11
- package/scss/frozenproduct/small/components/link.scss +2 -2
- package/scss/frozenproduct/small/components/nav.scss +6 -6
- package/scss/frozenproduct/small/components/page.scss +1 -1
- package/scss/frozenproduct/small/components/popover.scss +6 -6
- package/scss/frozenproduct/small/components/progress.scss +8 -8
- package/scss/frozenproduct/small/components/status.scss +10 -10
- package/scss/frozenproduct/small/components/tab.scss +9 -9
- package/scss/frozenproduct/small/components/table.scss +13 -11
- package/scss/product/large/components/table.scss +9 -7
- package/scss/product/small/components/table.scss +9 -7
- package/sage-design-tokens-15.2.1.tgz +0 -0
@@ -42,9 +42,9 @@ $button-color-typical-tertiary-border-enabled: $modes-color-none;
|
|
42
42
|
$button-color-typical-tertiary-border-hover: $modes-color-none;
|
43
43
|
$button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
|
44
44
|
$button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
|
45
|
-
$button-color-typical-subtle-label-
|
45
|
+
$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-frozen-default;
|
46
46
|
$button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
|
47
|
-
$button-color-typical-toggle-
|
47
|
+
$button-color-typical-toggle-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
48
48
|
$button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
|
49
49
|
$button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
|
50
50
|
$button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
|
@@ -76,7 +76,6 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
|
|
76
76
|
$button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
|
77
77
|
$button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
|
78
78
|
$button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
|
79
|
-
$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
|
80
79
|
$button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
|
81
80
|
$button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
|
82
81
|
$button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
|
@@ -88,17 +87,10 @@ $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary
|
|
88
87
|
$button-color-typical-secondary-label-enabled: $modes-color-interactive-primary-frozen-default;
|
89
88
|
$button-color-typical-tertiary-label-enabled: $modes-color-interactive-primary-frozen-default;
|
90
89
|
$button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
|
91
|
-
$button-color-typical-subtle-
|
92
|
-
$button-color-typical-
|
93
|
-
$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-frozen-default;
|
94
|
-
$button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
|
95
|
-
$button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
90
|
+
$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-frozen-active;
|
91
|
+
$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-frozen-active;
|
96
92
|
$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-frozen-default-alt;
|
97
|
-
$button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
|
98
93
|
$button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
|
99
|
-
$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
|
100
|
-
$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
|
101
|
-
$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
|
102
94
|
$button-size-split: $global-size-micro-xxs; // Split button (divider width)
|
103
95
|
$button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
|
104
96
|
$button-size-s: $global-size-macro-s; // min-height on S Buttons
|
@@ -236,6 +228,7 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
|
|
236
228
|
$button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
|
237
229
|
$button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
|
238
230
|
$button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
|
231
|
+
$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
|
239
232
|
$button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
|
240
233
|
$button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
|
241
234
|
$button-color-typical-primary-bg-active: $modes-color-interactive-primary-frozen-active;
|
@@ -253,6 +246,7 @@ $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactiv
|
|
253
246
|
$button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
|
254
247
|
$button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
|
255
248
|
$button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
|
249
|
+
$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
|
256
250
|
$button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
|
257
251
|
$button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
|
258
252
|
$button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
|
@@ -266,26 +260,35 @@ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome
|
|
266
260
|
$button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
|
267
261
|
$button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
|
268
262
|
$button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
|
263
|
+
$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
|
269
264
|
$button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
|
270
265
|
$button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
|
271
266
|
$button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
|
272
267
|
$button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
|
273
268
|
$button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
|
274
269
|
$button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
|
270
|
+
$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
|
271
|
+
$button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
275
272
|
$button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
|
273
|
+
$button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
|
276
274
|
$button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
|
277
275
|
$button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
|
278
276
|
$button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
|
279
277
|
$button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
|
280
278
|
$button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
|
279
|
+
$button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
281
280
|
$button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-frozen-with-active;
|
282
281
|
$button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
|
282
|
+
$button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
|
283
283
|
$button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
|
284
284
|
$button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
|
285
|
+
$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
|
286
|
+
$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
|
285
287
|
$button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
|
286
288
|
$button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
|
287
289
|
$button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
|
288
290
|
$button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
|
291
|
+
$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
|
289
292
|
$button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
|
290
293
|
$button-radius-m: $global-radius-interactive-xl; // Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)
|
291
294
|
$button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
|
@@ -321,9 +324,6 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
|
|
321
324
|
$button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
|
322
325
|
$button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
|
323
326
|
$button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
|
324
|
-
$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
|
325
|
-
$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
|
326
327
|
$button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
|
327
328
|
$button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
|
328
|
-
$button-color-typical-toggle-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
329
329
|
$button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;
|
@@ -23,17 +23,12 @@ $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-h
|
|
23
23
|
$container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
|
24
24
|
$container-color-ai-tile-bordervertical: $modes-color-status-ai-default-vertical; // left border for AI tiles and bubbles.
|
25
25
|
$container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //
|
26
|
-
$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
|
27
26
|
$container-color-interactive-border-activated: $modes-color-status-positive-default;
|
28
27
|
$container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
|
29
28
|
$container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
|
30
|
-
$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
|
31
|
-
$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
|
32
|
-
$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
|
33
29
|
$container-color-interactive-detailedicon-bg: $modes-color-custom-frozen;
|
34
30
|
$container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
|
35
31
|
$container-color-standard-bg-default: $modes-color-generic-bg-nought;
|
36
|
-
$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
|
37
32
|
$container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
|
38
33
|
$container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
|
39
34
|
$container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
|
@@ -60,17 +55,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
|
|
60
55
|
$container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
|
61
56
|
$container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
|
62
57
|
$container-color-blockquote-border: $modes-color-interactive-primary-frozen-default;
|
58
|
+
$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
|
63
59
|
$container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds
|
64
|
-
$container-color-interactive-
|
65
|
-
$container-color-interactive-icon-
|
66
|
-
$container-color-interactive-
|
67
|
-
$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
|
60
|
+
$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
|
61
|
+
$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
|
62
|
+
$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
|
68
63
|
$container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
|
69
64
|
$container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
|
70
|
-
$container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
|
71
65
|
$container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
|
72
66
|
$container-color-standard-bg-alt: $modes-color-generic-bg-faint;
|
73
67
|
$container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color
|
68
|
+
$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
|
74
69
|
$container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
|
75
70
|
$container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
|
76
71
|
$container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
|
@@ -87,11 +82,16 @@ $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (h
|
|
87
82
|
$container-boxshadow-card-drag: $global-boxshadow-interactive-drag; // Card (drag state)
|
88
83
|
$container-color-interactive-bg-disabled: $modes-color-interactive-inactive-default-alt;
|
89
84
|
$container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview.
|
85
|
+
$container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
|
90
86
|
$container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
|
91
87
|
$container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
|
88
|
+
$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
|
89
|
+
$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
|
90
|
+
$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
|
92
91
|
$container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
|
93
92
|
$container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
|
94
93
|
$container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
|
94
|
+
$container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
|
95
95
|
$container-color-scrollbar-fg-default: $modes-color-generic-fg-moderate;
|
96
96
|
$container-color-standard-border-alt: $modes-color-generic-fg-soft;
|
97
97
|
$container-color-standard-border-default: $modes-color-generic-fg-faint;
|
@@ -15,8 +15,12 @@ $form-radius-radio: $global-radius-circle; // Radio button
|
|
15
15
|
$form-radius-switch: $global-radius-circle; // Switch container and handle
|
16
16
|
$form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
|
17
17
|
$form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
|
18
|
-
$form-color-calendar-bg-
|
18
|
+
$form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
|
19
19
|
$form-color-labelset-label-required: $modes-color-interactive-danger-default;
|
20
|
+
$form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
21
|
+
$form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
|
22
|
+
$form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
23
|
+
$form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
20
24
|
$form-color-validation-border-error: $modes-color-status-negative-default;
|
21
25
|
$form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
|
22
26
|
$form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
|
@@ -37,13 +41,10 @@ $form-typography-responsive-default-xs: $global-typography-responsive-component-
|
|
37
41
|
$form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
|
38
42
|
$form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
|
39
43
|
$form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
|
44
|
+
$form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
|
40
45
|
$form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
|
41
|
-
$form-color-calendar-border-duration: $form-color-calendar-bg-active;
|
42
46
|
$form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
|
43
|
-
$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
|
44
|
-
$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
|
45
47
|
$form-color-dropdown-label-hover: $modes-color-interactive-monochrome-with-hover;
|
46
|
-
$form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
|
47
48
|
$form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
|
48
49
|
$form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
|
49
50
|
$form-color-typical-border-hover: $modes-color-interactive-data-entry-with-hover; // File input draggable border state
|
@@ -51,7 +52,6 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
|
|
51
52
|
$form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
|
52
53
|
$form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
|
53
54
|
$form-color-typical-text-read-only: $modes-color-generic-content-harsh;
|
54
|
-
$form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
|
55
55
|
$form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
|
56
56
|
$form-space-none: $global-space-none;
|
57
57
|
$form-space-calendar-x-m: $global-space-macro-m;
|
@@ -224,15 +224,18 @@ $form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosur
|
|
224
224
|
$form-size-rating-m: $global-size-icon-m; // medium rating stars
|
225
225
|
$form-size-rating-l: $global-size-icon-xl; // large rating stars
|
226
226
|
$form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
|
227
|
+
$form-color-calendar-border-duration: $form-color-calendar-bg-active;
|
227
228
|
$form-color-calendar-text-active: $modes-color-interactive-monochrome-with-active;
|
228
229
|
$form-color-calendar-text-alt: $modes-color-interactive-data-entry-content-alt; // Days of the week subheaders
|
229
230
|
$form-color-calendar-text-disabled: $modes-color-interactive-inactive-content;
|
230
231
|
$form-color-calendar-text-duration: $modes-color-interactive-data-entry-content;
|
231
232
|
$form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
|
232
233
|
$form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
|
233
|
-
$form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
|
234
234
|
$form-color-dropdown-label-active: $modes-color-interactive-monochrome-with-active;
|
235
|
+
$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
|
235
236
|
$form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
|
237
|
+
$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
|
238
|
+
$form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
|
236
239
|
$form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
|
237
240
|
$form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
|
238
241
|
$form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
|
@@ -295,16 +298,13 @@ $form-size-dropdown-item-m: $popover-size-item-m; // REF POPOVER. Menu item min
|
|
295
298
|
$form-size-dropdown-item-l: $popover-size-item-l; // REF POPOVER. Menu item min height.
|
296
299
|
$form-size-search-input-minwidth: $container-size-responsive-xl; // minimum width for search input container
|
297
300
|
$form-size-search-input-maxwidth: $container-size-responsive-xxl + $container-size-responsive-xxs; // maximum width for search input container
|
298
|
-
$form-color-
|
301
|
+
$form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
|
299
302
|
$form-color-typical-border-alt: $modes-color-interactive-inactive-default;
|
300
|
-
$form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
301
303
|
$form-color-typical-border-disabled: $modes-color-interactive-inactive-default;
|
302
304
|
$form-color-typical-border-read-only: $modes-color-interactive-inactive-default;
|
303
305
|
$form-color-switch-bg-activedisabled: $modes-color-interactive-inactive-default;
|
304
306
|
$form-color-switch-border-disabled: $modes-color-interactive-inactive-default;
|
305
|
-
$form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
306
307
|
$form-color-switch-fg-disabled: $modes-color-interactive-inactive-default;
|
307
|
-
$form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
|
308
308
|
$form-color-switch-label-activedisabled: $modes-color-interactive-inactive-default;
|
309
309
|
$form-color-switch-label-disabled: $modes-color-interactive-inactive-default;
|
310
310
|
$form-radius-dropdown: $popover-radius-container; // REF POPOVER. Popover container.
|
@@ -5,7 +5,6 @@
|
|
5
5
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
|
-
$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
|
9
8
|
$link-typography-responsive-default-s: $global-typography-responsive-component-underlined-moderate-s; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
|
10
9
|
$link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
|
11
10
|
$link-typography-responsive-default-l: $global-typography-responsive-component-underlined-moderate-l; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
|
@@ -20,13 +19,14 @@ $link-typography-adaptive-heading-m: $global-typography-adaptive-component-under
|
|
20
19
|
$link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
|
21
20
|
$link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
|
22
21
|
$link-color-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
|
23
|
-
$link-color-subtle-label-
|
22
|
+
$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
|
24
23
|
$link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
|
25
24
|
$link-boxshadow-skiplink: $global-boxshadow-container-near;
|
26
25
|
$link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
|
27
26
|
$link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
|
28
27
|
$link-color-typical-label-default: $modes-color-interactive-primary-frozen-default-alt;
|
29
28
|
$link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt2;
|
29
|
+
$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
|
30
30
|
$link-color-subtle-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;
|
31
31
|
$link-size-skiplink-m: $global-size-macro-m;
|
32
32
|
$link-size-icon-m: $global-size-icon-m;
|
@@ -9,16 +9,13 @@ $nav-size-leftnav-parent-container-fixed-width: 146; // fixed width of parent co
|
|
9
9
|
$nav-size-leftnav-child-container-fixed-width: 250; // fixed width of parent container
|
10
10
|
$nav-space-leftnav-grandchilditem-x-indent: 33; // indent on grandchild items
|
11
11
|
$nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
|
12
|
-
$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
|
13
12
|
$nav-color-item-bg-enabled: $modes-color-none;
|
14
13
|
$nav-color-item-bg-hover: $modes-color-interactive-primary-frozen-nav-hover;
|
15
14
|
$nav-color-leftnav-container-bg-default: $modes-color-generic-bg-nought; // bg of horizontal nav variant that launches the left nav
|
16
|
-
$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
|
17
15
|
$nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
|
18
16
|
$nav-color-leftnav-item-bg-enabled: $modes-color-none;
|
19
17
|
$nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
|
20
18
|
$nav-color-modal-container-bg-default: $modes-color-generic-bg-nought; // bg of container holding stack of items in modal nav
|
21
|
-
$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
|
22
19
|
$nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
|
23
20
|
$nav-color-modal-item-bg-enabled: $modes-color-none;
|
24
21
|
$nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
|
@@ -38,15 +35,16 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
|
|
38
35
|
$nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-xs;
|
39
36
|
$nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
|
40
37
|
$nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
|
38
|
+
$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
|
41
39
|
$nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
|
42
40
|
$nav-color-item-label-activealt: $modes-color-interactive-monochrome-with-hover;
|
43
|
-
$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
|
44
|
-
$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
|
45
41
|
$nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
|
46
42
|
$nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
|
47
43
|
$nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
|
44
|
+
$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
|
48
45
|
$nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
|
49
46
|
$nav-color-leftnav-item-label-hover: $modes-color-interactive-nav-with-hover;
|
47
|
+
$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
|
50
48
|
$nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
|
51
49
|
$nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
|
52
50
|
$nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
|
@@ -55,7 +53,8 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
|
|
55
53
|
$nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
|
56
54
|
$nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
|
57
55
|
$nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
|
58
|
-
$nav-color-item-label-
|
56
|
+
$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
|
57
|
+
$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
|
59
58
|
$nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
|
60
59
|
$nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
|
61
60
|
$nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;
|
@@ -158,3 +157,4 @@ $nav-space-topnav-container-y-m: $global-space-macro-xxxs / 2; // vertical paddi
|
|
158
157
|
$nav-space-topnav-parentitem-x-m: $global-space-macro-xxxs; // horizontal padding on stacked parent items
|
159
158
|
$nav-space-topnav-parentitem-xg-m: $global-space-micro-s; // gap within horizontal parent items
|
160
159
|
$nav-space-topnav-parentitem-y-m: $global-space-macro-xxxs / 2; // vertical padding on stacked parent items
|
160
|
+
$nav-color-item-label-hover: $modes-color-interactive-primary-frozen-nav-label-hover;
|
@@ -6,7 +6,6 @@
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
8
|
$page-color-bg-default: $modes-color-generic-backdrop-nought;
|
9
|
-
$page-color-bg-alt: $modes-color-generic-backdrop-faint;
|
10
9
|
$page-typography-responsive-h1: $global-typography-responsive-heading-l;
|
11
10
|
$page-typography-responsive-h2: $global-typography-responsive-heading-m;
|
12
11
|
$page-typography-responsive-h3: $global-typography-responsive-heading-s;
|
@@ -29,6 +28,7 @@ $page-typography-adaptive-p-regular-typical: $global-typography-adaptive-body-re
|
|
29
28
|
$page-typography-adaptive-p-regular-large: $global-typography-adaptive-body-regular-l;
|
30
29
|
$page-typography-adaptive-p-medium-typical: $global-typography-adaptive-body-medium-s;
|
31
30
|
$page-typography-adaptive-p-medium-large: $global-typography-adaptive-body-medium-l;
|
31
|
+
$page-color-bg-alt: $modes-color-generic-backdrop-faint;
|
32
32
|
$page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
|
33
33
|
$page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
|
34
34
|
$page-space-x-l: $global-space-macro-xl;
|
@@ -6,7 +6,6 @@
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
8
|
$popover-radius-none: $global-radius-none; // Navigation menu top corners
|
9
|
-
$popover-color-bg-active: $modes-color-interactive-monochrome-frozen-active;
|
10
9
|
$popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
|
11
10
|
$popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
|
12
11
|
$popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
|
@@ -21,11 +20,7 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
|
|
21
20
|
$popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
|
22
21
|
$popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
|
23
22
|
$popover-boxshadow-container: $global-boxshadow-container-near; // REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)
|
24
|
-
$popover-color-bg-
|
25
|
-
$popover-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
26
|
-
$popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
|
27
|
-
$popover-color-label-hover: $modes-color-interactive-monochrome-default;
|
28
|
-
$popover-color-label-enabled: $modes-color-interactive-monochrome-default;
|
23
|
+
$popover-color-bg-active: $modes-color-interactive-monochrome-frozen-active;
|
29
24
|
$popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
|
30
25
|
$popover-size-icon-m: $global-size-icon-m;
|
31
26
|
$popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
|
@@ -54,8 +49,13 @@ $popover-space-option-y-l: $global-space-micro-xl; // REF'D in FORM. Vertical pa
|
|
54
49
|
$popover-space-submenu-x-s: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
|
55
50
|
$popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
|
56
51
|
$popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
|
52
|
+
$popover-color-bg-activealt: $modes-color-interactive-monochrome-frozen-hover-alt;
|
53
|
+
$popover-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
57
54
|
$popover-color-label-active: $modes-color-interactive-monochrome-with-active;
|
55
|
+
$popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
|
58
56
|
$popover-color-label-disabled: $modes-color-interactive-inactive-content;
|
57
|
+
$popover-color-label-hover: $modes-color-interactive-monochrome-default;
|
58
|
+
$popover-color-label-enabled: $modes-color-interactive-monochrome-default;
|
59
59
|
$popover-size-menu-minwidth-s: $container-size-responsive-m / 2; // minwidth of small size popover menu container
|
60
60
|
$popover-size-menu-minwidth-m: $container-size-responsive-xs; // minwidth of medium size popover menu container
|
61
61
|
$popover-size-menu-minwidth-l: $container-size-responsive-s; // minwidth of large size popover menu container
|
@@ -22,20 +22,18 @@ $progress-radius-stepflow: $global-radius-circle; // Step flow (step indicators)
|
|
22
22
|
$progress-radius-stepindicator: $global-radius-circle; // step indicator circles
|
23
23
|
$progress-radius-carouselselector: $global-radius-circle; // Carousel (selector dot)
|
24
24
|
$progress-radius-skeleton-circle: $global-radius-circle; // Used to represent circular elements such as profiles, badges etc
|
25
|
+
$progress-color-bg-default: $modes-color-interactive-progress-frozen-bg-alt;
|
25
26
|
$progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
|
26
27
|
$progress-color-fg-alt: $modes-color-status-positive-default;
|
27
28
|
$progress-color-fg-caution: $modes-color-status-caution-default;
|
28
29
|
$progress-color-fg-error: $modes-color-status-negative-default;
|
29
30
|
$progress-color-fg-info: $modes-color-status-info-default;
|
30
31
|
$progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
|
32
|
+
$progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
|
31
33
|
$progress-color-loader-fg-error: $modes-color-status-negative-default;
|
32
34
|
$progress-color-loader-fg-complete: $modes-color-status-positive-default;
|
33
|
-
$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
|
34
35
|
$progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
|
35
|
-
$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
|
36
|
-
$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
|
37
36
|
$progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
|
38
|
-
$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
|
39
37
|
$progress-color-stepindicator-border-success: $modes-color-status-positive-default;
|
40
38
|
$progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
|
41
39
|
$progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
|
@@ -49,15 +47,21 @@ $progress-typography-responsive-label-l: $global-typography-responsive-component
|
|
49
47
|
$progress-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
|
50
48
|
$progress-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
|
51
49
|
$progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
|
50
|
+
$progress-color-border-default: $modes-color-generic-fg-frozen-soft;
|
52
51
|
$progress-color-fg-alt2: $modes-color-generic-content-firm;
|
52
|
+
$progress-color-fg-default: $modes-color-generic-fg-frozen-soft;
|
53
53
|
$progress-color-label-alt: $modes-color-generic-content-firm;
|
54
54
|
$progress-color-label-default: $modes-color-generic-content-harsh;
|
55
55
|
$progress-color-loader-fg-default: $modes-color-interactive-primary-frozen-default; // used for loader standard loader spinner
|
56
56
|
$progress-color-loader-inverse-bg-default: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
|
57
|
+
$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
|
57
58
|
$progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
|
58
59
|
$progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
|
60
|
+
$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
|
59
61
|
$progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
|
60
62
|
$progress-color-stepflow-label-default: $modes-color-generic-content-harsh;
|
63
|
+
$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
|
64
|
+
$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
|
61
65
|
$progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
|
62
66
|
$progress-size-bar-s: $global-size-micro-xs; // S loader bar
|
63
67
|
$progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar
|
@@ -75,10 +79,6 @@ $progress-size-stepflow-m: $global-size-micro-m; // Step height
|
|
75
79
|
$progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
|
76
80
|
$progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator
|
77
81
|
$progress-size-stepindicator-stepcircle-m: $global-size-macro-s; // M size step indicator
|
78
|
-
$progress-color-bg-default: $modes-color-interactive-progress-frozen-bg-alt;
|
79
|
-
$progress-color-border-default: $modes-color-generic-fg-frozen-soft;
|
80
|
-
$progress-color-fg-default: $modes-color-generic-fg-frozen-soft;
|
81
|
-
$progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
|
82
82
|
$progress-color-loader-inverse-fg-default: $modes-color-interactive-monochrome-with-active; // used on inverse loading spinner
|
83
83
|
$progress-color-stepflow-border-default: $modes-color-generic-fg-soft;
|
84
84
|
$progress-color-stepindicator-border-default: $modes-color-generic-fg-soft;
|
@@ -5,11 +5,14 @@
|
|
5
5
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
|
+
$status-color-message-global-info-bg-default: $modes-color-status-info-frozenglobal-default; // Global message bg
|
9
|
+
$status-color-message-global-warning-bg-default: $modes-color-status-caution-frozenglobal-default; // Global message bg
|
8
10
|
$status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
|
9
11
|
$status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
|
10
12
|
$status-color-message-contextual-bg: $modes-color-generic-bg-nought;
|
11
13
|
$status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
|
12
14
|
$status-color-message-contextual-icon-alt: $modes-color-status-neutral-default; // icon on neutral status dialogs
|
15
|
+
$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
|
13
16
|
$status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
|
14
17
|
$status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
|
15
18
|
$status-color-message-contextual-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
|
@@ -22,6 +25,9 @@ $status-color-message-contextual-success-icon: $modes-color-status-positive-defa
|
|
22
25
|
$status-color-message-contextual-warning-bg-default: $modes-color-status-caution-default;
|
23
26
|
$status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
|
24
27
|
$status-color-message-contextual-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
|
28
|
+
$status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
|
29
|
+
$status-color-message-global-info-bg-hover: $modes-color-status-info-frozenglobal-hover; // Global message bg
|
30
|
+
$status-color-message-global-warning-bg-hover: $modes-color-status-caution-frozenglobal-hover; // Global message bg
|
25
31
|
$status-color-pill-custom-blue-bg-default: $modes-color-status-custom-blue-default;
|
26
32
|
$status-color-pill-custom-blue-bg-alt-default: $modes-color-status-custom-blue-default-alt; // outline pill bg
|
27
33
|
$status-color-pill-custom-blue-border-default: $modes-color-status-custom-blue-default;
|
@@ -68,6 +74,9 @@ $status-color-pill-info-border-default: $modes-color-status-info-default;
|
|
68
74
|
$status-color-pill-info-inverse-bg-default: $modes-color-status-info-inverse-default;
|
69
75
|
$status-color-pill-info-inverse-bg-alt-default: $modes-color-status-info-inverse-default-alt; // outline pill bg
|
70
76
|
$status-color-pill-info-inverse-border-default: $modes-color-status-info-inverse-default;
|
77
|
+
$status-color-pill-neutral-bg-default: $modes-color-status-neutral-frozen-default;
|
78
|
+
$status-color-pill-neutral-bg-hover: $modes-color-status-neutral-frozen-hover;
|
79
|
+
$status-color-pill-neutral-border-default: $modes-color-status-neutral-frozen-default;
|
71
80
|
$status-color-pill-neutral-inverse-bg-default: $modes-color-status-neutral-inverse-default;
|
72
81
|
$status-color-pill-neutral-inverse-bg-alt-default: $modes-color-status-neutral-inverse-default-alt; // outline pill bg
|
73
82
|
$status-color-pill-neutral-inverse-border-default: $modes-color-status-neutral-inverse-default;
|
@@ -103,15 +112,12 @@ $status-color-message-contextual-text: $modes-color-status-content-with-hover-al
|
|
103
112
|
$status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
|
104
113
|
$status-color-message-contextual-ai-bg-alt: $status-color-none; // Subtle message bg
|
105
114
|
$status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
|
106
|
-
$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
|
107
115
|
$status-color-message-contextual-error-bg-alt: $status-color-none; // Subtle message bg
|
108
116
|
$status-color-message-contextual-info-bg-alt: $status-color-none; // Subtle message bg
|
109
117
|
$status-color-message-contextual-success-bg-alt: $status-color-none; // Subtle message bg
|
110
118
|
$status-color-message-contextual-warning-bg-alt: $status-color-none; // Subtle message bg
|
111
119
|
$status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
|
112
|
-
$status-color-message-global-callout-bg-
|
113
|
-
$status-color-message-global-info-bg-default: $modes-color-status-info-frozenglobal-default; // Global message bg
|
114
|
-
$status-color-message-global-warning-bg-default: $modes-color-status-caution-frozenglobal-default; // Global message bg
|
120
|
+
$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
|
115
121
|
$status-color-pill-custom-blue-bg-alt-hover: $modes-color-status-custom-blue-hover-alt;
|
116
122
|
$status-color-pill-custom-blue-bg-hover: $modes-color-status-custom-blue-hover;
|
117
123
|
$status-color-pill-custom-teal-bg-alt-hover: $modes-color-status-custom-teal-hover-alt;
|
@@ -148,10 +154,8 @@ $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
|
|
148
154
|
$status-color-pill-info-bg-hover: $modes-color-status-info-hover;
|
149
155
|
$status-color-pill-info-inverse-bg-alt-hover: $modes-color-status-info-inverse-hover-alt;
|
150
156
|
$status-color-pill-info-inverse-bg-hover: $modes-color-status-info-inverse-hover;
|
151
|
-
$status-color-pill-neutral-bg-default: $modes-color-status-neutral-frozen-default;
|
152
157
|
$status-color-pill-neutral-bg-alt-default: $status-color-none; // outline pill bg
|
153
158
|
$status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-frozen-hover-alt;
|
154
|
-
$status-color-pill-neutral-border-default: $modes-color-status-neutral-frozen-default;
|
155
159
|
$status-color-pill-neutral-inverse-bg-alt-hover: $modes-color-status-neutral-inverse-hover-alt;
|
156
160
|
$status-color-pill-neutral-inverse-bg-hover: $modes-color-status-neutral-inverse-hover;
|
157
161
|
$status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
|
@@ -171,11 +175,8 @@ $status-color-rating-bg-hover: $modes-color-status-reviews-frozen-hover;
|
|
171
175
|
$status-color-rating-border-default: $modes-color-status-reviews-frozen-default;
|
172
176
|
$status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
|
173
177
|
$status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
|
174
|
-
$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
|
175
178
|
$status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
|
176
|
-
$status-color-message-global-info-bg-hover: $modes-color-status-info-frozenglobal-hover; // Global message bg
|
177
179
|
$status-color-message-global-info-icon: $modes-color-status-content-with-default-alt;
|
178
|
-
$status-color-message-global-warning-bg-hover: $modes-color-status-caution-frozenglobal-hover; // Global message bg
|
179
180
|
$status-color-message-global-warning-icon: $modes-color-status-content-with-default-alt;
|
180
181
|
$status-color-pill-generic-label-default: $modes-color-status-content-with-default;
|
181
182
|
$status-color-pill-generic-label-hover: $modes-color-status-content-with-hover;
|
@@ -183,7 +184,6 @@ $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-d
|
|
183
184
|
$status-color-pill-generic-label-alt-hover: $modes-color-status-content-with-default-alt;
|
184
185
|
$status-color-pill-generic-inverse-label-alt-default: $modes-color-status-content-inverse-with-default-alt;
|
185
186
|
$status-color-pill-generic-inverse-label-alt-hover: $modes-color-status-content-inverse-with-default-alt;
|
186
|
-
$status-color-pill-neutral-bg-hover: $modes-color-status-neutral-frozen-hover;
|
187
187
|
$status-size-pill-s: $global-size-macro-xs - $global-size-micro-xs; // Min height
|
188
188
|
$status-size-pill-m: $global-size-macro-xs; // Min height and removable button.
|
189
189
|
$status-size-pill-l: $global-size-macro-xs + $global-size-micro-xs; // Min height and removable button
|
@@ -6,8 +6,6 @@
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
8
|
$tab-color-bg-enabled: $modes-color-none;
|
9
|
-
$tab-color-label-active: $modes-color-interactive-monochrome-active;
|
10
|
-
$tab-color-icon-active: $modes-color-interactive-monochrome-active;
|
11
9
|
$tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
|
12
10
|
$tab-color-validation-border-warning: $modes-color-status-caution-default;
|
13
11
|
$tab-color-validation-border-error: $modes-color-status-negative-default;
|
@@ -20,16 +18,11 @@ $tab-typography-adaptive-label-l: $global-typography-adaptive-component-firm-l;
|
|
20
18
|
$tab-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
|
21
19
|
$tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
|
22
20
|
$tab-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
|
23
|
-
$tab-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt; // For anchor nav, not tab.
|
24
21
|
$tab-color-border-active: $modes-color-interactive-primary-frozen-default;
|
25
|
-
$tab-color-border-enabled: $modes-color-interactive-monochrome-frozen-hover-alt;
|
26
|
-
$tab-color-border-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
27
|
-
$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
|
28
22
|
$tab-color-icon-hover: $modes-color-interactive-monochrome-with-hover;
|
29
|
-
$tab-color-label-
|
23
|
+
$tab-color-label-active: $modes-color-interactive-monochrome-active;
|
24
|
+
$tab-color-icon-active: $modes-color-interactive-monochrome-active;
|
30
25
|
$tab-color-label-hover: $modes-color-interactive-monochrome-with-hover;
|
31
|
-
$tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
|
32
|
-
$tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
|
33
26
|
$tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
|
34
27
|
$tab-size-l: $global-size-macro-l; // L tab
|
35
28
|
$tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
|
@@ -46,7 +39,14 @@ $tab-space-xg-l: $global-space-micro-l; // Gap between elements in Tab.
|
|
46
39
|
$tab-space-y-m: $global-space-micro-l; // Top bottom padding in Tab.
|
47
40
|
$tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
|
48
41
|
$tab-color-bg-active: $modes-color-interactive-monochrome-with-default;
|
42
|
+
$tab-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt; // For anchor nav, not tab.
|
49
43
|
$tab-color-border-activealt: $modes-color-generic-fg-delicate;
|
44
|
+
$tab-color-border-enabled: $modes-color-interactive-monochrome-frozen-hover-alt;
|
45
|
+
$tab-color-border-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
46
|
+
$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
|
47
|
+
$tab-color-label-enabled: $modes-color-interactive-monochrome-default;
|
48
|
+
$tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
|
49
|
+
$tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
|
50
50
|
$tab-radius-m: $global-radius-interactive-s; // Tab horizontal - top corners. Tab vertical - left corners.
|
51
51
|
$tab-radius-l: $global-radius-interactive-s; // Tab horizontal - top corners. Tab vertical - left corners.
|
52
52
|
$tab-radius-baseline-m: $global-radius-interactive-xxs;
|
@@ -6,6 +6,7 @@
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
8
|
$table-color-header-subtle-bg-default: $modes-color-none;
|
9
|
+
$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
|
9
10
|
$table-color-row-bg-activated: $modes-color-interactive-primary-frozen-table-default;
|
10
11
|
$table-color-row-bg-default: $modes-color-generic-bg-nought;
|
11
12
|
$table-color-row-bg-alt: $modes-color-generic-bg-frozen-delicate;
|
@@ -29,31 +30,32 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
|
|
29
30
|
$table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
|
30
31
|
$table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
|
31
32
|
$table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
|
32
|
-
$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
|
33
|
-
$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
|
34
|
-
$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
|
35
|
-
$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
|
36
33
|
$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-frozen-default-alt;
|
37
|
-
$table-color-
|
38
|
-
$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
|
39
|
-
$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
|
40
|
-
$table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
|
41
|
-
$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
|
34
|
+
$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
|
42
35
|
$table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
|
36
|
+
$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
|
43
37
|
$table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
|
44
38
|
$table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
|
45
39
|
$table-color-row-label-default: $modes-color-generic-content-harsh;
|
46
|
-
$table-color-footer-bg-default: $modes-color-generic-bg-
|
47
|
-
$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
|
40
|
+
$table-color-footer-bg-default: $modes-color-generic-bg-moderate;
|
48
41
|
$table-boxshadow-firstchild: $global-boxshadow-inner-near;
|
49
42
|
$table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
|
50
43
|
$table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
|
51
44
|
$table-boxshadow-row-dragging: $global-boxshadow-interactive-drag; // dragging state for a table row
|
45
|
+
$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
|
46
|
+
$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
|
52
47
|
$table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
|
48
|
+
$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
|
49
|
+
$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
|
50
|
+
$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
|
53
51
|
$table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
|
54
52
|
$table-color-header-harsh-label-default: $modes-color-interactive-monochrome-with-default;
|
53
|
+
$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
|
54
|
+
$table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
|
55
55
|
$table-color-row-border-default: $modes-color-generic-fg-delicate;
|
56
|
+
$table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
|
56
57
|
$table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
|
58
|
+
$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
|
57
59
|
$table-radius-container: $global-radius-container-m; // Table (parent container)
|
58
60
|
$table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.
|
59
61
|
$table-borderwidth-medium: $global-borderwidth-s; // Header border for subtle. Optional choice of cell border width.
|