@sage/design-tokens 15.3.0 → 15.4.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 +3 -0
- package/css/frozenproduct/large/components/form.css +3 -0
- package/css/frozenproduct/small/components/form.css +3 -0
- package/css/product/all.css +3 -0
- package/css/product/large/components/form.css +3 -0
- package/css/product/small/components/form.css +3 -0
- package/ios/frozenproduct/large/dark/components/form.h +3 -0
- package/ios/frozenproduct/large/light/components/form.h +3 -0
- package/ios/frozenproduct/small/dark/components/form.h +3 -0
- package/ios/frozenproduct/small/light/components/form.h +3 -0
- package/ios/product/large/dark/components/form.h +3 -0
- package/ios/product/large/light/components/form.h +3 -0
- package/ios/product/small/dark/components/form.h +3 -0
- package/ios/product/small/light/components/form.h +3 -0
- package/js/common/frozenproduct/large/dark/components/form.d.ts +9 -0
- package/js/common/frozenproduct/large/dark/components/form.js +51 -0
- package/js/common/frozenproduct/large/light/components/form.d.ts +9 -0
- package/js/common/frozenproduct/large/light/components/form.js +51 -0
- package/js/common/frozenproduct/small/dark/components/form.d.ts +9 -0
- package/js/common/frozenproduct/small/dark/components/form.js +51 -0
- package/js/common/frozenproduct/small/light/components/form.d.ts +9 -0
- package/js/common/frozenproduct/small/light/components/form.js +51 -0
- package/js/common/product/large/dark/components/form.d.ts +9 -0
- package/js/common/product/large/dark/components/form.js +51 -0
- package/js/common/product/large/light/components/form.d.ts +9 -0
- package/js/common/product/large/light/components/form.js +51 -0
- package/js/common/product/small/dark/components/form.d.ts +9 -0
- package/js/common/product/small/dark/components/form.js +51 -0
- package/js/common/product/small/light/components/form.d.ts +9 -0
- package/js/common/product/small/light/components/form.js +51 -0
- package/js/es6/frozenproduct/large/dark/components/form.d.ts +3 -0
- package/js/es6/frozenproduct/large/dark/components/form.js +3 -0
- package/js/es6/frozenproduct/large/light/components/form.d.ts +3 -0
- package/js/es6/frozenproduct/large/light/components/form.js +3 -0
- package/js/es6/frozenproduct/small/dark/components/form.d.ts +3 -0
- package/js/es6/frozenproduct/small/dark/components/form.js +3 -0
- package/js/es6/frozenproduct/small/light/components/form.d.ts +3 -0
- package/js/es6/frozenproduct/small/light/components/form.js +3 -0
- package/js/es6/product/large/dark/components/form.d.ts +3 -0
- package/js/es6/product/large/dark/components/form.js +3 -0
- package/js/es6/product/large/light/components/form.d.ts +3 -0
- package/js/es6/product/large/light/components/form.js +3 -0
- package/js/es6/product/small/dark/components/form.d.ts +3 -0
- package/js/es6/product/small/dark/components/form.js +3 -0
- package/js/es6/product/small/light/components/form.d.ts +3 -0
- package/js/es6/product/small/light/components/form.js +3 -0
- package/js/umd/frozenproduct/large/dark/components/form.js +51 -0
- package/js/umd/frozenproduct/large/light/components/form.js +51 -0
- package/js/umd/frozenproduct/small/dark/components/form.js +51 -0
- package/js/umd/frozenproduct/small/light/components/form.js +51 -0
- package/js/umd/product/large/dark/components/form.js +51 -0
- package/js/umd/product/large/light/components/form.js +51 -0
- package/js/umd/product/small/dark/components/form.js +51 -0
- package/js/umd/product/small/light/components/form.js +51 -0
- package/json/flat/frozenproduct/large/dark/components/form.json +3 -0
- package/json/flat/frozenproduct/large/light/components/form.json +3 -0
- package/json/flat/frozenproduct/small/dark/components/form.json +3 -0
- package/json/flat/frozenproduct/small/light/components/form.json +3 -0
- package/json/flat/product/large/dark/components/form.json +3 -0
- package/json/flat/product/large/light/components/form.json +3 -0
- package/json/flat/product/small/dark/components/form.json +3 -0
- package/json/flat/product/small/light/components/form.json +3 -0
- package/json/nested/frozenproduct/large/dark/components/form.json +9 -0
- package/json/nested/frozenproduct/large/light/components/form.json +9 -0
- package/json/nested/frozenproduct/small/dark/components/form.json +9 -0
- package/json/nested/frozenproduct/small/light/components/form.json +9 -0
- package/json/nested/product/large/dark/components/form.json +9 -0
- package/json/nested/product/large/light/components/form.json +9 -0
- package/json/nested/product/small/dark/components/form.json +9 -0
- package/json/nested/product/small/light/components/form.json +9 -0
- package/package.json +1 -1
- package/sage-design-tokens-15.4.0.tgz +0 -0
- package/scss/frozenproduct/large/components/badge.scss +1 -1
- package/scss/frozenproduct/large/components/button.scss +15 -15
- package/scss/frozenproduct/large/components/container.scss +10 -10
- package/scss/frozenproduct/large/components/form.scss +14 -11
- package/scss/frozenproduct/large/components/link.scss +2 -2
- package/scss/frozenproduct/large/components/nav.scss +6 -6
- package/scss/frozenproduct/large/components/page.scss +1 -1
- package/scss/frozenproduct/large/components/popover.scss +6 -6
- package/scss/frozenproduct/large/components/progress.scss +8 -8
- package/scss/frozenproduct/large/components/status.scss +10 -10
- package/scss/frozenproduct/large/components/tab.scss +9 -9
- package/scss/frozenproduct/large/components/table.scss +10 -10
- 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 +14 -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 +10 -10
- package/scss/product/large/components/button.scss +13 -13
- package/scss/product/large/components/container.scss +10 -10
- package/scss/product/large/components/form.scss +11 -8
- package/scss/product/large/components/link.scss +2 -2
- package/scss/product/large/components/nav.scss +5 -5
- package/scss/product/large/components/page.scss +1 -1
- package/scss/product/large/components/popover.scss +2 -2
- package/scss/product/large/components/progress.scss +6 -6
- package/scss/product/large/components/status.scss +3 -3
- package/scss/product/large/components/tab.scss +7 -7
- package/scss/product/large/components/table.scss +14 -14
- package/scss/product/small/components/form.scss +3 -0
- package/sage-design-tokens-15.3.0.tgz +0 -0
@@ -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-none: $global-space-none;
|
@@ -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,11 +6,11 @@
|
|
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;
|
12
13
|
$table-color-row-bg-hover: $modes-color-generic-bg-frozen-soft;
|
13
|
-
$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
|
14
14
|
$table-color-row-label-hover: $modes-color-generic-content-extreme;
|
15
15
|
$table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
|
16
16
|
$table-typography-adaptive-heading-m: $global-typography-adaptive-component-firm-m;
|
@@ -30,32 +30,32 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
|
|
30
30
|
$table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
|
31
31
|
$table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
|
32
32
|
$table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
|
33
|
-
$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
|
34
|
-
$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
|
35
|
-
$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
|
36
|
-
$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
|
37
33
|
$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-frozen-default-alt;
|
38
|
-
$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
|
39
|
-
$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
|
40
|
-
$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
|
41
|
-
$table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
|
42
34
|
$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
|
43
35
|
$table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
|
36
|
+
$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
|
44
37
|
$table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
|
45
38
|
$table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
|
46
39
|
$table-color-row-label-default: $modes-color-generic-content-harsh;
|
47
40
|
$table-color-footer-bg-default: $modes-color-generic-bg-moderate;
|
48
|
-
$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
|
49
41
|
$table-boxshadow-firstchild: $global-boxshadow-inner-near;
|
50
42
|
$table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
|
51
43
|
$table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
|
52
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;
|
53
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;
|
54
51
|
$table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
|
55
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;
|
56
55
|
$table-color-row-border-default: $modes-color-generic-fg-delicate;
|
57
56
|
$table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
|
58
57
|
$table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
|
58
|
+
$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
|
59
59
|
$table-radius-container: $global-radius-container-m; // Table (parent container)
|
60
60
|
$table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.
|
61
61
|
$table-borderwidth-medium: $global-borderwidth-s; // Header border for subtle. Optional choice of cell border width.
|
@@ -5,7 +5,6 @@
|
|
5
5
|
|
6
6
|
// Do not edit directly, this file was auto-generated.
|
7
7
|
|
8
|
-
$badge-color-notification-bg-default: $modes-color-status-caution-frozenglobal-default;
|
9
8
|
$badge-radius-badge: $global-radius-circle; // Badge
|
10
9
|
$badge-color-notification-bg-alt: $modes-color-status-info-default;
|
11
10
|
$badge-color-notification-label-default: $modes-color-generic-content-extreme;
|
@@ -17,6 +16,7 @@ $badge-color-notification-inverse-label-alt: $modes-color-generic-content-extrem
|
|
17
16
|
$badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
|
18
17
|
$badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
|
19
18
|
$badge-color-notification-border-default: $modes-color-generic-content-nought;
|
19
|
+
$badge-color-notification-bg-default: $modes-color-status-caution-frozenglobal-default;
|
20
20
|
$badge-color-notification-label-alt: $modes-color-generic-fg-nought;
|
21
21
|
$badge-size-micro-dot: $global-size-micro-m; // Micro dot badge size
|
22
22
|
$badge-size-micro-numbered-min: $global-size-macro-xxs; // Micro dot badge size with numbering
|
@@ -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-active: $modes-color-interactive-monochrome-frozen-active;
|
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-bg-active: $modes-color-interactive-monochrome-frozen-active;
|
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,6 +76,7 @@ $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;
|
79
80
|
$button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
|
80
81
|
$button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
|
81
82
|
$button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
|
@@ -87,10 +88,17 @@ $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary
|
|
87
88
|
$button-color-typical-secondary-label-enabled: $modes-color-interactive-primary-frozen-default;
|
88
89
|
$button-color-typical-tertiary-label-enabled: $modes-color-interactive-primary-frozen-default;
|
89
90
|
$button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
|
90
|
-
$button-color-typical-subtle-
|
91
|
-
$button-color-typical-
|
91
|
+
$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
|
92
|
+
$button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
|
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;
|
92
96
|
$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;
|
93
98
|
$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;
|
94
102
|
$button-size-split: $global-size-micro-xxs; // Split button (divider width)
|
95
103
|
$button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
|
96
104
|
$button-size-s: $global-size-macro-s; // min-height on S Buttons
|
@@ -228,7 +236,6 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
|
|
228
236
|
$button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
|
229
237
|
$button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
|
230
238
|
$button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
|
231
|
-
$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
|
232
239
|
$button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
|
233
240
|
$button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
|
234
241
|
$button-color-typical-primary-bg-active: $modes-color-interactive-primary-frozen-active;
|
@@ -246,7 +253,6 @@ $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactiv
|
|
246
253
|
$button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
|
247
254
|
$button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
|
248
255
|
$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;
|
250
256
|
$button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
|
251
257
|
$button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
|
252
258
|
$button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
|
@@ -260,35 +266,26 @@ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome
|
|
260
266
|
$button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
|
261
267
|
$button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
|
262
268
|
$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;
|
264
269
|
$button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
|
265
270
|
$button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
|
266
271
|
$button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
|
267
272
|
$button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
|
268
273
|
$button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
|
269
274
|
$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;
|
272
275
|
$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;
|
274
276
|
$button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
|
275
277
|
$button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
|
276
278
|
$button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
|
277
279
|
$button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
|
278
280
|
$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;
|
280
281
|
$button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-frozen-with-active;
|
281
282
|
$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;
|
287
285
|
$button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
|
288
286
|
$button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
|
289
287
|
$button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
|
290
288
|
$button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
|
291
|
-
$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
|
292
289
|
$button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
|
293
290
|
$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)
|
294
291
|
$button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
|
@@ -324,6 +321,9 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
|
|
324
321
|
$button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
|
325
322
|
$button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
|
326
323
|
$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;
|
327
326
|
$button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
|
328
327
|
$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,12 +23,17 @@ $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;
|
26
27
|
$container-color-interactive-border-activated: $modes-color-status-positive-default;
|
27
28
|
$container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
|
28
29
|
$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.
|
29
33
|
$container-color-interactive-detailedicon-bg: $modes-color-custom-frozen;
|
30
34
|
$container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
|
31
35
|
$container-color-standard-bg-default: $modes-color-generic-bg-nought;
|
36
|
+
$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
|
32
37
|
$container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
|
33
38
|
$container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
|
34
39
|
$container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
|
@@ -55,17 +60,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
|
|
55
60
|
$container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
|
56
61
|
$container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
|
57
62
|
$container-color-blockquote-border: $modes-color-interactive-primary-frozen-default;
|
58
|
-
$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
|
59
63
|
$container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds
|
60
|
-
$container-color-interactive-
|
61
|
-
$container-color-interactive-icon-
|
62
|
-
$container-color-interactive-
|
64
|
+
$container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
|
65
|
+
$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
|
66
|
+
$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
|
67
|
+
$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
|
63
68
|
$container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
|
64
69
|
$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.
|
65
71
|
$container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
|
66
72
|
$container-color-standard-bg-alt: $modes-color-generic-bg-faint;
|
67
73
|
$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;
|
69
74
|
$container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
|
70
75
|
$container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
|
71
76
|
$container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
|
@@ -82,16 +87,11 @@ $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (h
|
|
82
87
|
$container-boxshadow-card-drag: $global-boxshadow-interactive-drag; // Card (drag state)
|
83
88
|
$container-color-interactive-bg-disabled: $modes-color-interactive-inactive-default-alt;
|
84
89
|
$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.
|
86
90
|
$container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
|
87
91
|
$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.
|
91
92
|
$container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
|
92
93
|
$container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
|
93
94
|
$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;
|