@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.
Files changed (109) hide show
  1. package/css/frozenproduct/all.css +3 -0
  2. package/css/frozenproduct/large/components/form.css +3 -0
  3. package/css/frozenproduct/small/components/form.css +3 -0
  4. package/css/product/all.css +3 -0
  5. package/css/product/large/components/form.css +3 -0
  6. package/css/product/small/components/form.css +3 -0
  7. package/ios/frozenproduct/large/dark/components/form.h +3 -0
  8. package/ios/frozenproduct/large/light/components/form.h +3 -0
  9. package/ios/frozenproduct/small/dark/components/form.h +3 -0
  10. package/ios/frozenproduct/small/light/components/form.h +3 -0
  11. package/ios/product/large/dark/components/form.h +3 -0
  12. package/ios/product/large/light/components/form.h +3 -0
  13. package/ios/product/small/dark/components/form.h +3 -0
  14. package/ios/product/small/light/components/form.h +3 -0
  15. package/js/common/frozenproduct/large/dark/components/form.d.ts +9 -0
  16. package/js/common/frozenproduct/large/dark/components/form.js +51 -0
  17. package/js/common/frozenproduct/large/light/components/form.d.ts +9 -0
  18. package/js/common/frozenproduct/large/light/components/form.js +51 -0
  19. package/js/common/frozenproduct/small/dark/components/form.d.ts +9 -0
  20. package/js/common/frozenproduct/small/dark/components/form.js +51 -0
  21. package/js/common/frozenproduct/small/light/components/form.d.ts +9 -0
  22. package/js/common/frozenproduct/small/light/components/form.js +51 -0
  23. package/js/common/product/large/dark/components/form.d.ts +9 -0
  24. package/js/common/product/large/dark/components/form.js +51 -0
  25. package/js/common/product/large/light/components/form.d.ts +9 -0
  26. package/js/common/product/large/light/components/form.js +51 -0
  27. package/js/common/product/small/dark/components/form.d.ts +9 -0
  28. package/js/common/product/small/dark/components/form.js +51 -0
  29. package/js/common/product/small/light/components/form.d.ts +9 -0
  30. package/js/common/product/small/light/components/form.js +51 -0
  31. package/js/es6/frozenproduct/large/dark/components/form.d.ts +3 -0
  32. package/js/es6/frozenproduct/large/dark/components/form.js +3 -0
  33. package/js/es6/frozenproduct/large/light/components/form.d.ts +3 -0
  34. package/js/es6/frozenproduct/large/light/components/form.js +3 -0
  35. package/js/es6/frozenproduct/small/dark/components/form.d.ts +3 -0
  36. package/js/es6/frozenproduct/small/dark/components/form.js +3 -0
  37. package/js/es6/frozenproduct/small/light/components/form.d.ts +3 -0
  38. package/js/es6/frozenproduct/small/light/components/form.js +3 -0
  39. package/js/es6/product/large/dark/components/form.d.ts +3 -0
  40. package/js/es6/product/large/dark/components/form.js +3 -0
  41. package/js/es6/product/large/light/components/form.d.ts +3 -0
  42. package/js/es6/product/large/light/components/form.js +3 -0
  43. package/js/es6/product/small/dark/components/form.d.ts +3 -0
  44. package/js/es6/product/small/dark/components/form.js +3 -0
  45. package/js/es6/product/small/light/components/form.d.ts +3 -0
  46. package/js/es6/product/small/light/components/form.js +3 -0
  47. package/js/umd/frozenproduct/large/dark/components/form.js +51 -0
  48. package/js/umd/frozenproduct/large/light/components/form.js +51 -0
  49. package/js/umd/frozenproduct/small/dark/components/form.js +51 -0
  50. package/js/umd/frozenproduct/small/light/components/form.js +51 -0
  51. package/js/umd/product/large/dark/components/form.js +51 -0
  52. package/js/umd/product/large/light/components/form.js +51 -0
  53. package/js/umd/product/small/dark/components/form.js +51 -0
  54. package/js/umd/product/small/light/components/form.js +51 -0
  55. package/json/flat/frozenproduct/large/dark/components/form.json +3 -0
  56. package/json/flat/frozenproduct/large/light/components/form.json +3 -0
  57. package/json/flat/frozenproduct/small/dark/components/form.json +3 -0
  58. package/json/flat/frozenproduct/small/light/components/form.json +3 -0
  59. package/json/flat/product/large/dark/components/form.json +3 -0
  60. package/json/flat/product/large/light/components/form.json +3 -0
  61. package/json/flat/product/small/dark/components/form.json +3 -0
  62. package/json/flat/product/small/light/components/form.json +3 -0
  63. package/json/nested/frozenproduct/large/dark/components/form.json +9 -0
  64. package/json/nested/frozenproduct/large/light/components/form.json +9 -0
  65. package/json/nested/frozenproduct/small/dark/components/form.json +9 -0
  66. package/json/nested/frozenproduct/small/light/components/form.json +9 -0
  67. package/json/nested/product/large/dark/components/form.json +9 -0
  68. package/json/nested/product/large/light/components/form.json +9 -0
  69. package/json/nested/product/small/dark/components/form.json +9 -0
  70. package/json/nested/product/small/light/components/form.json +9 -0
  71. package/package.json +1 -1
  72. package/sage-design-tokens-15.4.0.tgz +0 -0
  73. package/scss/frozenproduct/large/components/badge.scss +1 -1
  74. package/scss/frozenproduct/large/components/button.scss +15 -15
  75. package/scss/frozenproduct/large/components/container.scss +10 -10
  76. package/scss/frozenproduct/large/components/form.scss +14 -11
  77. package/scss/frozenproduct/large/components/link.scss +2 -2
  78. package/scss/frozenproduct/large/components/nav.scss +6 -6
  79. package/scss/frozenproduct/large/components/page.scss +1 -1
  80. package/scss/frozenproduct/large/components/popover.scss +6 -6
  81. package/scss/frozenproduct/large/components/progress.scss +8 -8
  82. package/scss/frozenproduct/large/components/status.scss +10 -10
  83. package/scss/frozenproduct/large/components/tab.scss +9 -9
  84. package/scss/frozenproduct/large/components/table.scss +10 -10
  85. package/scss/frozenproduct/small/components/badge.scss +1 -1
  86. package/scss/frozenproduct/small/components/button.scss +15 -15
  87. package/scss/frozenproduct/small/components/container.scss +10 -10
  88. package/scss/frozenproduct/small/components/form.scss +14 -11
  89. package/scss/frozenproduct/small/components/link.scss +2 -2
  90. package/scss/frozenproduct/small/components/nav.scss +6 -6
  91. package/scss/frozenproduct/small/components/page.scss +1 -1
  92. package/scss/frozenproduct/small/components/popover.scss +6 -6
  93. package/scss/frozenproduct/small/components/progress.scss +8 -8
  94. package/scss/frozenproduct/small/components/status.scss +10 -10
  95. package/scss/frozenproduct/small/components/tab.scss +9 -9
  96. package/scss/frozenproduct/small/components/table.scss +10 -10
  97. package/scss/product/large/components/button.scss +13 -13
  98. package/scss/product/large/components/container.scss +10 -10
  99. package/scss/product/large/components/form.scss +11 -8
  100. package/scss/product/large/components/link.scss +2 -2
  101. package/scss/product/large/components/nav.scss +5 -5
  102. package/scss/product/large/components/page.scss +1 -1
  103. package/scss/product/large/components/popover.scss +2 -2
  104. package/scss/product/large/components/progress.scss +6 -6
  105. package/scss/product/large/components/status.scss +3 -3
  106. package/scss/product/large/components/tab.scss +7 -7
  107. package/scss/product/large/components/table.scss +14 -14
  108. package/scss/product/small/components/form.scss +3 -0
  109. 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-default: $modes-color-interactive-monochrome-default;
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-hover: $modes-color-interactive-primary-frozen-nav-label-hover;
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-activealt: $modes-color-interactive-monochrome-frozen-hover-alt;
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-default: $modes-color-status-callout-default-alt; // Global message 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-enabled: $modes-color-interactive-monochrome-default;
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-enabled: $modes-color-interactive-monochrome-frozen-default;
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-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
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-label-active: $modes-color-interactive-monochrome-frozen-active;
91
- $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-frozen-active;
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-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.
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;