@sage/design-tokens 5.2.0 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/css/frozenproduct/all.css +7 -5
  2. package/css/frozenproduct/large/dark.css +6 -5
  3. package/css/frozenproduct/large/light.css +1 -0
  4. package/css/frozenproduct/small/dark.css +6 -5
  5. package/css/frozenproduct/small/light.css +1 -0
  6. package/css/marketing/all.css +38 -36
  7. package/css/marketing/large/dark.css +6 -5
  8. package/css/marketing/large/light.css +1 -0
  9. package/css/marketing/small/components/button.css +22 -22
  10. package/css/marketing/small/components/container.css +9 -9
  11. package/css/marketing/small/dark.css +6 -5
  12. package/css/marketing/small/light.css +1 -0
  13. package/css/product/all.css +7 -5
  14. package/css/product/large/components/status.css +3 -3
  15. package/css/product/large/dark.css +6 -5
  16. package/css/product/large/light.css +1 -0
  17. package/css/product/small/dark.css +6 -5
  18. package/css/product/small/light.css +1 -0
  19. package/ios/frozenproduct/large/dark/mode.h +6 -5
  20. package/ios/frozenproduct/large/light/mode.h +1 -0
  21. package/ios/frozenproduct/small/dark/mode.h +6 -5
  22. package/ios/frozenproduct/small/light/mode.h +1 -0
  23. package/ios/marketing/large/dark/mode.h +6 -5
  24. package/ios/marketing/large/light/mode.h +1 -0
  25. package/ios/marketing/small/dark/mode.h +6 -5
  26. package/ios/marketing/small/light/mode.h +1 -0
  27. package/ios/product/large/dark/mode.h +6 -5
  28. package/ios/product/large/light/mode.h +1 -0
  29. package/ios/product/small/dark/mode.h +6 -5
  30. package/ios/product/small/light/mode.h +1 -0
  31. package/js/common/frozenproduct/large/dark/mode.d.ts +10 -9
  32. package/js/common/frozenproduct/large/dark/mode.js +170 -89
  33. package/js/common/frozenproduct/large/light/mode.d.ts +1 -0
  34. package/js/common/frozenproduct/large/light/mode.js +31 -0
  35. package/js/common/frozenproduct/small/dark/mode.d.ts +10 -9
  36. package/js/common/frozenproduct/small/dark/mode.js +170 -89
  37. package/js/common/frozenproduct/small/light/mode.d.ts +1 -0
  38. package/js/common/frozenproduct/small/light/mode.js +31 -0
  39. package/js/common/marketing/large/dark/mode.d.ts +10 -9
  40. package/js/common/marketing/large/dark/mode.js +170 -89
  41. package/js/common/marketing/large/light/mode.d.ts +1 -0
  42. package/js/common/marketing/large/light/mode.js +31 -0
  43. package/js/common/marketing/small/dark/mode.d.ts +10 -9
  44. package/js/common/marketing/small/dark/mode.js +170 -89
  45. package/js/common/marketing/small/light/mode.d.ts +1 -0
  46. package/js/common/marketing/small/light/mode.js +31 -0
  47. package/js/common/product/large/dark/mode.d.ts +10 -9
  48. package/js/common/product/large/dark/mode.js +170 -89
  49. package/js/common/product/large/light/mode.d.ts +1 -0
  50. package/js/common/product/large/light/mode.js +31 -0
  51. package/js/common/product/small/dark/mode.d.ts +10 -9
  52. package/js/common/product/small/dark/mode.js +170 -89
  53. package/js/common/product/small/light/mode.d.ts +1 -0
  54. package/js/common/product/small/light/mode.js +31 -0
  55. package/js/es6/frozenproduct/large/dark/mode.d.ts +8 -6
  56. package/js/es6/frozenproduct/large/dark/mode.js +7 -6
  57. package/js/es6/frozenproduct/large/light/mode.d.ts +2 -0
  58. package/js/es6/frozenproduct/large/light/mode.js +1 -0
  59. package/js/es6/frozenproduct/small/dark/mode.d.ts +8 -6
  60. package/js/es6/frozenproduct/small/dark/mode.js +7 -6
  61. package/js/es6/frozenproduct/small/light/mode.d.ts +2 -0
  62. package/js/es6/frozenproduct/small/light/mode.js +1 -0
  63. package/js/es6/marketing/large/dark/mode.d.ts +8 -6
  64. package/js/es6/marketing/large/dark/mode.js +7 -6
  65. package/js/es6/marketing/large/light/mode.d.ts +2 -0
  66. package/js/es6/marketing/large/light/mode.js +1 -0
  67. package/js/es6/marketing/small/dark/mode.d.ts +8 -6
  68. package/js/es6/marketing/small/dark/mode.js +7 -6
  69. package/js/es6/marketing/small/light/mode.d.ts +2 -0
  70. package/js/es6/marketing/small/light/mode.js +1 -0
  71. package/js/es6/product/large/dark/mode.d.ts +8 -6
  72. package/js/es6/product/large/dark/mode.js +7 -6
  73. package/js/es6/product/large/light/mode.d.ts +2 -0
  74. package/js/es6/product/large/light/mode.js +1 -0
  75. package/js/es6/product/small/dark/mode.d.ts +8 -6
  76. package/js/es6/product/small/dark/mode.js +7 -6
  77. package/js/es6/product/small/light/mode.d.ts +2 -0
  78. package/js/es6/product/small/light/mode.js +1 -0
  79. package/js/umd/frozenproduct/large/dark/mode.js +177 -89
  80. package/js/umd/frozenproduct/large/light/mode.js +38 -0
  81. package/js/umd/frozenproduct/small/dark/mode.js +177 -89
  82. package/js/umd/frozenproduct/small/light/mode.js +38 -0
  83. package/js/umd/marketing/large/dark/mode.js +177 -89
  84. package/js/umd/marketing/large/light/mode.js +38 -0
  85. package/js/umd/marketing/small/dark/mode.js +177 -89
  86. package/js/umd/marketing/small/light/mode.js +38 -0
  87. package/js/umd/product/large/dark/mode.js +177 -89
  88. package/js/umd/product/large/light/mode.js +38 -0
  89. package/js/umd/product/small/dark/mode.js +177 -89
  90. package/js/umd/product/small/light/mode.js +38 -0
  91. package/json/flat/frozenproduct/large/dark/mode.json +6 -5
  92. package/json/flat/frozenproduct/large/light/mode.json +1 -0
  93. package/json/flat/frozenproduct/small/dark/mode.json +6 -5
  94. package/json/flat/frozenproduct/small/light/mode.json +1 -0
  95. package/json/flat/marketing/large/dark/mode.json +6 -5
  96. package/json/flat/marketing/large/light/mode.json +1 -0
  97. package/json/flat/marketing/small/dark/mode.json +6 -5
  98. package/json/flat/marketing/small/light/mode.json +1 -0
  99. package/json/flat/product/large/dark/mode.json +6 -5
  100. package/json/flat/product/large/light/mode.json +1 -0
  101. package/json/flat/product/small/dark/mode.json +6 -5
  102. package/json/flat/product/small/light/mode.json +1 -0
  103. package/json/nested/frozenproduct/large/dark/mode.json +11 -10
  104. package/json/nested/frozenproduct/large/light/mode.json +2 -1
  105. package/json/nested/frozenproduct/small/dark/mode.json +11 -10
  106. package/json/nested/frozenproduct/small/light/mode.json +2 -1
  107. package/json/nested/marketing/large/dark/mode.json +11 -10
  108. package/json/nested/marketing/large/light/mode.json +2 -1
  109. package/json/nested/marketing/small/dark/mode.json +11 -10
  110. package/json/nested/marketing/small/light/mode.json +2 -1
  111. package/json/nested/product/large/dark/mode.json +11 -10
  112. package/json/nested/product/large/light/mode.json +2 -1
  113. package/json/nested/product/small/dark/mode.json +11 -10
  114. package/json/nested/product/small/light/mode.json +2 -1
  115. package/package.json +1 -1
  116. package/sage-design-tokens-5.3.0.tgz +0 -0
  117. package/scss/frozenproduct/large/dark.scss +6 -5
  118. package/scss/frozenproduct/large/light.scss +1 -0
  119. package/scss/frozenproduct/small/components/button.scss +22 -22
  120. package/scss/frozenproduct/small/components/container.scss +9 -9
  121. package/scss/frozenproduct/small/components/form.scss +7 -7
  122. package/scss/frozenproduct/small/components/link.scss +2 -2
  123. package/scss/frozenproduct/small/components/logo.scss +4 -4
  124. package/scss/frozenproduct/small/components/nav.scss +3 -3
  125. package/scss/frozenproduct/small/components/page.scss +1 -1
  126. package/scss/frozenproduct/small/components/popover.scss +2 -2
  127. package/scss/frozenproduct/small/components/progress.scss +6 -6
  128. package/scss/frozenproduct/small/components/status.scss +3 -3
  129. package/scss/frozenproduct/small/components/tab.scss +7 -7
  130. package/scss/frozenproduct/small/components/table.scss +11 -11
  131. package/scss/frozenproduct/small/dark.scss +6 -5
  132. package/scss/frozenproduct/small/light.scss +1 -0
  133. package/scss/marketing/large/dark.scss +6 -5
  134. package/scss/marketing/large/light.scss +1 -0
  135. package/scss/marketing/small/dark.scss +6 -5
  136. package/scss/marketing/small/light.scss +1 -0
  137. package/scss/product/large/components/button.scss +22 -22
  138. package/scss/product/large/components/container.scss +9 -9
  139. package/scss/product/large/components/form.scss +7 -7
  140. package/scss/product/large/components/link.scss +2 -2
  141. package/scss/product/large/components/logo.scss +4 -4
  142. package/scss/product/large/components/nav.scss +3 -3
  143. package/scss/product/large/components/page.scss +1 -1
  144. package/scss/product/large/components/popover.scss +2 -2
  145. package/scss/product/large/components/progress.scss +6 -6
  146. package/scss/product/large/components/status.scss +3 -3
  147. package/scss/product/large/components/tab.scss +7 -7
  148. package/scss/product/large/components/table.scss +11 -11
  149. package/scss/product/large/dark.scss +6 -5
  150. package/scss/product/large/light.scss +1 -0
  151. package/scss/product/small/components/button.scss +22 -22
  152. package/scss/product/small/components/container.scss +9 -9
  153. package/scss/product/small/components/form.scss +7 -7
  154. package/scss/product/small/components/link.scss +2 -2
  155. package/scss/product/small/components/logo.scss +4 -4
  156. package/scss/product/small/components/nav.scss +3 -3
  157. package/scss/product/small/components/page.scss +1 -1
  158. package/scss/product/small/components/popover.scss +2 -2
  159. package/scss/product/small/components/progress.scss +6 -6
  160. package/scss/product/small/components/status.scss +3 -3
  161. package/scss/product/small/components/tab.scss +7 -7
  162. package/scss/product/small/components/table.scss +11 -11
  163. package/scss/product/small/dark.scss +6 -5
  164. package/scss/product/small/light.scss +1 -0
  165. package/sage-design-tokens-5.2.0.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -270,6 +270,7 @@
270
270
  --modes-color-status-caution-hover-alt-light: #f1e0d8; /* used on pill hover states and message bg */
271
271
  --modes-color-status-caution-text-light: #bf3e0c;
272
272
  --modes-color-status-caution-frozen-default-light: #FF8629; /* used on global message bg */
273
+ --modes-color-status-caution-frozen-icon-light: #000000; /* used on global message icon */
273
274
  --modes-color-status-content-with-default-light: #FFFFFF;
274
275
  --modes-color-status-content-with-default-alt-light: #000000f2;
275
276
  --modes-color-status-content-with-hover-light: #FFFFFF; /* for pill hover X */
@@ -433,17 +434,18 @@
433
434
  --modes-color-interactive-progress-bg-dark: #ffffff14;
434
435
  --modes-color-interactive-progress-bg-alt-dark: #00000014;
435
436
  --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
436
- --modes-color-status-ai-default-dark: #000000;
437
- --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
438
- --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
439
- --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
440
- --modes-color-status-generic-default-dark: #008a89;
441
437
  --modes-color-status-caution-default-dark: #E04500;
442
438
  --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
443
439
  --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
444
440
  --modes-color-status-caution-hover-alt-dark: #34211a; /* used on pill hover states and message bg */
445
441
  --modes-color-status-caution-text-dark: #e75b23;
446
442
  --modes-color-status-caution-frozen-default-dark: #251206; /* Global message bg */
443
+ --modes-color-status-caution-frozen-icon-dark: #e75b23; /* Global message icon. */
444
+ --modes-color-status-ai-default-dark: #000000;
445
+ --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
446
+ --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
447
+ --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
448
+ --modes-color-status-generic-default-dark: #008a89;
447
449
  --modes-color-status-content-with-default-dark: #000000;
448
450
  --modes-color-status-content-with-default-alt-dark: #fffffff2;
449
451
  --modes-color-status-content-with-hover-dark: #000000;
package/css/frozenproduct/large/dark.css CHANGED
@@ -117,17 +117,18 @@
117
117
  --modes-color-interactive-progress-bg: #ffffff14;
118
118
  --modes-color-interactive-progress-bg-alt: #00000014;
119
119
  --modes-color-interactive-progress-frozen-bg: #ffffff14;
120
- --modes-color-status-ai-default: #000000;
121
- --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
122
- --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
123
- --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
124
- --modes-color-status-generic-default: #008a89;
125
120
  --modes-color-status-caution-default: #E04500;
126
121
  --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
127
122
  --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
128
123
  --modes-color-status-caution-hover-alt: #34211a; /* used on pill hover states and message bg */
129
124
  --modes-color-status-caution-text: #e75b23;
130
125
  --modes-color-status-caution-frozen-default: #251206; /* Global message bg */
126
+ --modes-color-status-caution-frozen-icon: #e75b23; /* Global message icon. */
127
+ --modes-color-status-ai-default: #000000;
128
+ --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
129
+ --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
130
+ --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
131
+ --modes-color-status-generic-default: #008a89;
131
132
  --modes-color-status-content-with-default: #000000;
132
133
  --modes-color-status-content-with-default-alt: #fffffff2;
133
134
  --modes-color-status-content-with-hover: #000000;
package/css/frozenproduct/large/light.css CHANGED
@@ -128,6 +128,7 @@
128
128
  --modes-color-status-caution-hover-alt: #f1e0d8; /* used on pill hover states and message bg */
129
129
  --modes-color-status-caution-text: #bf3e0c;
130
130
  --modes-color-status-caution-frozen-default: #FF8629; /* used on global message bg */
131
+ --modes-color-status-caution-frozen-icon: #000000; /* used on global message icon */
131
132
  --modes-color-status-content-with-default: #FFFFFF;
132
133
  --modes-color-status-content-with-default-alt: #000000f2;
133
134
  --modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
package/css/frozenproduct/small/dark.css CHANGED
@@ -117,17 +117,18 @@
117
117
  --modes-color-interactive-progress-bg: #ffffff14;
118
118
  --modes-color-interactive-progress-bg-alt: #00000014;
119
119
  --modes-color-interactive-progress-frozen-bg: #ffffff14;
120
- --modes-color-status-ai-default: #000000;
121
- --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
122
- --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
123
- --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
124
- --modes-color-status-generic-default: #008a89;
125
120
  --modes-color-status-caution-default: #E04500;
126
121
  --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
127
122
  --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
128
123
  --modes-color-status-caution-hover-alt: #34211a; /* used on pill hover states and message bg */
129
124
  --modes-color-status-caution-text: #e75b23;
130
125
  --modes-color-status-caution-frozen-default: #251206; /* Global message bg */
126
+ --modes-color-status-caution-frozen-icon: #e75b23; /* Global message icon. */
127
+ --modes-color-status-ai-default: #000000;
128
+ --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
129
+ --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
130
+ --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
131
+ --modes-color-status-generic-default: #008a89;
131
132
  --modes-color-status-content-with-default: #000000;
132
133
  --modes-color-status-content-with-default-alt: #fffffff2;
133
134
  --modes-color-status-content-with-hover: #000000;
package/css/frozenproduct/small/light.css CHANGED
@@ -128,6 +128,7 @@
128
128
  --modes-color-status-caution-hover-alt: #f1e0d8; /* used on pill hover states and message bg */
129
129
  --modes-color-status-caution-text: #bf3e0c;
130
130
  --modes-color-status-caution-frozen-default: #FF8629; /* used on global message bg */
131
+ --modes-color-status-caution-frozen-icon: #000000; /* used on global message icon */
131
132
  --modes-color-status-content-with-default: #FFFFFF;
132
133
  --modes-color-status-content-with-default-alt: #000000f2;
133
134
  --modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
package/css/marketing/all.css CHANGED
@@ -270,6 +270,7 @@
270
270
  --modes-color-status-caution-hover-alt-light: #f1e0d8; /* used on pill hover states and message bg */
271
271
  --modes-color-status-caution-text-light: #bf3e0c;
272
272
  --modes-color-status-caution-frozen-default-light: #FF8629; /* used on global message bg */
273
+ --modes-color-status-caution-frozen-icon-light: #000000; /* used on global message icon */
273
274
  --modes-color-status-content-with-default-light: #FFFFFF;
274
275
  --modes-color-status-content-with-default-alt-light: #000000f2;
275
276
  --modes-color-status-content-with-hover-light: #FFFFFF; /* for pill hover X */
@@ -433,17 +434,18 @@
433
434
  --modes-color-interactive-progress-bg-dark: #ffffff14;
434
435
  --modes-color-interactive-progress-bg-alt-dark: #00000014;
435
436
  --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
436
- --modes-color-status-ai-default-dark: #000000;
437
- --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
438
- --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
439
- --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
440
- --modes-color-status-generic-default-dark: #008a89;
441
437
  --modes-color-status-caution-default-dark: #E04500;
442
438
  --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
443
439
  --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
444
440
  --modes-color-status-caution-hover-alt-dark: #34211a; /* used on pill hover states and message bg */
445
441
  --modes-color-status-caution-text-dark: #e75b23;
446
442
  --modes-color-status-caution-frozen-default-dark: #251206; /* Global message bg */
443
+ --modes-color-status-caution-frozen-icon-dark: #e75b23; /* Global message icon. */
444
+ --modes-color-status-ai-default-dark: #000000;
445
+ --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
446
+ --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
447
+ --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
448
+ --modes-color-status-generic-default-dark: #008a89;
447
449
  --modes-color-status-content-with-default-dark: #000000;
448
450
  --modes-color-status-content-with-default-alt-dark: #fffffff2;
449
451
  --modes-color-status-content-with-hover-dark: #000000;
@@ -528,9 +530,6 @@
528
530
  --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
529
531
  --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
530
532
  --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
531
- --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
532
- --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
533
- --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
534
533
  --button-typography-primary-s: var(--global-typography-component-firm-s);
535
534
  --button-typography-primary-m: var(--global-typography-component-firm-m);
536
535
  --button-typography-primary-l: var(--global-typography-component-firm-l);
@@ -543,7 +542,6 @@
543
542
  --button-typography-subtle-s: var(--global-typography-component-firm-s);
544
543
  --button-typography-subtle-m: var(--global-typography-component-firm-m);
545
544
  --button-typography-subtle-l: var(--global-typography-component-firm-l);
546
- --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
547
545
  --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
548
546
  --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
549
547
  --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
@@ -551,25 +549,17 @@
551
549
  --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
552
550
  --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
553
551
  --button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
554
- --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
555
- --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
556
- --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
552
+ --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
557
553
  --button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
558
554
  --button-color-typical-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
559
- --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
560
555
  --button-color-typical-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
561
- --button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark));
562
556
  --button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
563
- --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
557
+ --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
564
558
  --button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
559
+ --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
565
560
  --button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
566
- --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
567
- --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
568
561
  --button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
569
562
  --button-color-video-bg-blur: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
570
- --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
571
- --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
572
- --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
573
563
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
574
564
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
575
565
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -659,8 +649,8 @@
659
649
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
660
650
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
661
651
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
662
- --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
663
652
  --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
653
+ --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
664
654
  --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
665
655
  --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
666
656
  --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
@@ -672,25 +662,30 @@
672
662
  --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
673
663
  --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
674
664
  --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
675
- --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
676
- --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
665
+ --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
666
+ --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
677
667
  --button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
678
- --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
679
- --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
668
+ --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
680
669
  --button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
681
- --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
682
- --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
670
+ --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
671
+ --button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark));
683
672
  --button-color-typical-tertiary-label-active-copy: light-dark(var(--modes-color-interactive-monochrome-frozen-with-active-light), var(--modes-color-interactive-monochrome-frozen-with-active-dark));
684
673
  --button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
674
+ --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
685
675
  --button-color-typical-toggle-label-active-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
676
+ --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
686
677
  --button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
687
678
  --button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
679
+ --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
688
680
  --button-color-video-primary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
689
681
  --button-color-video-primary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
682
+ --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
683
+ --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
690
684
  --button-color-video-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
691
685
  --button-color-video-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
692
686
  --button-color-video-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
693
687
  --button-color-video-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
688
+ --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
694
689
  --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
695
690
  --button-radius-m: var(--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) */
696
691
  --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
@@ -711,12 +706,19 @@
711
706
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
712
707
  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
713
708
  --button-color-ai-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
709
+ --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
714
710
  --button-color-destructive-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
715
711
  --button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
716
712
  --button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
713
+ --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
717
714
  --button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
715
+ --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
716
+ --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
717
+ --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
718
+ --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
718
719
  --button-color-typical-tertiary-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
719
720
  --button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
721
+ --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
720
722
  --button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
721
723
 
722
724
  /* container component tokens */
@@ -727,20 +729,15 @@
727
729
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
728
730
  --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
729
731
  --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
730
- --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
731
732
  --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
732
733
  --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
733
734
  --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
734
735
  --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
735
736
  --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /* */
736
737
  --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* */
737
- --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
738
738
  --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
739
739
  --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color */
740
740
  --container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
741
- --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
742
- --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active chevron for any accordion. */
743
- --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
744
741
  --container-typography-heading-m: var(--global-typography-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
745
742
  --container-typography-heading-l: var(--global-typography-heading-m); /* Dialog, drawer and sidebar headings */
746
743
  --container-typography-subheading-m: var(--global-typography-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -752,17 +749,18 @@
752
749
  --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
753
750
  --container-color-standard-bg-alt: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
754
751
  --container-color-standard-bg-footer-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* tile footer bg color */
752
+ --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
755
753
  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
756
754
  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
757
755
  --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc */
758
756
  --container-color-scrollbar-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
757
+ --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
759
758
  --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark)); /* Used for accordion hover backgrounds */
760
- --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Enabled chevron for any accordion. */
761
- --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark)); /* Enabled label for subtle accordion. */
762
- --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover chevron for any accordion. */
759
+ --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
760
+ --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active chevron for any accordion. */
761
+ --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
763
762
  --container-color-interactive-text-enabled: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* Enabled label for standard accordion. */
764
763
  --container-color-interactive-text-alt-enabled: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* Enabled label for subtle accordion. */
765
- --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
766
764
  --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
767
765
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
768
766
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
@@ -782,9 +780,13 @@
782
780
  --container-color-interactive-border-alt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Link preview. */
783
781
  --container-color-interactive-border-inactive: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
784
782
  --container-color-interactive-border-enabled: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
783
+ --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Enabled chevron for any accordion. */
784
+ --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark)); /* Enabled label for subtle accordion. */
785
+ --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover chevron for any accordion. */
785
786
  --container-color-interactive-label-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
786
787
  --container-color-interactive-label-footer-activated: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
787
788
  --container-color-interactive-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
789
+ --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
788
790
  --container-size-none: var(--global-size-none);
789
791
  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
790
792
  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
package/css/marketing/large/dark.css CHANGED
@@ -117,17 +117,18 @@
117
117
  --modes-color-interactive-progress-bg: #ffffff14;
118
118
  --modes-color-interactive-progress-bg-alt: #00000014;
119
119
  --modes-color-interactive-progress-frozen-bg: #ffffff14;
120
- --modes-color-status-ai-default: #000000;
121
- --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
122
- --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
123
- --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
124
- --modes-color-status-generic-default: #008a89;
125
120
  --modes-color-status-caution-default: #E04500;
126
121
  --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
127
122
  --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
128
123
  --modes-color-status-caution-hover-alt: #34211a; /* used on pill hover states and message bg */
129
124
  --modes-color-status-caution-text: #e75b23;
130
125
  --modes-color-status-caution-frozen-default: #251206; /* Global message bg */
126
+ --modes-color-status-caution-frozen-icon: #e75b23; /* Global message icon. */
127
+ --modes-color-status-ai-default: #000000;
128
+ --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
129
+ --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
130
+ --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
131
+ --modes-color-status-generic-default: #008a89;
131
132
  --modes-color-status-content-with-default: #000000;
132
133
  --modes-color-status-content-with-default-alt: #fffffff2;
133
134
  --modes-color-status-content-with-hover: #000000;
package/css/marketing/large/light.css CHANGED
@@ -128,6 +128,7 @@
128
128
  --modes-color-status-caution-hover-alt: #f1e0d8; /* used on pill hover states and message bg */
129
129
  --modes-color-status-caution-text: #bf3e0c;
130
130
  --modes-color-status-caution-frozen-default: #FF8629; /* used on global message bg */
131
+ --modes-color-status-caution-frozen-icon: #000000; /* used on global message icon */
131
132
  --modes-color-status-content-with-default: #FFFFFF;
132
133
  --modes-color-status-content-with-default-alt: #000000f2;
133
134
  --modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
package/css/marketing/small/components/button.css CHANGED
@@ -21,9 +21,6 @@
21
21
  --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
22
22
  --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
23
23
  --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
24
- --button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
25
- --button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
26
- --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
27
24
  --button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
28
25
  --button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
29
26
  --button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
@@ -48,7 +45,6 @@
48
45
  --button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
49
46
  --button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
50
47
  --button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
51
- --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
52
48
  --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
53
49
  --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
54
50
  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
@@ -56,25 +52,17 @@
56
52
  --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
57
53
  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
58
54
  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
59
- --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
60
- --button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
61
- --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
55
+ --button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
62
56
  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
63
57
  --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
64
- --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
65
58
  --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
66
- --button-color-typical-tertiary-bg-enabled: var(--modes-color-interactive-monochrome-subtle-default);
67
59
  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
68
- --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
60
+ --button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
69
61
  --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
62
+ --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
70
63
  --button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
71
- --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
72
- --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
73
64
  --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
74
65
  --button-color-video-bg-blur: var(--modes-color-interactive-monochrome-generic-hover-alt);
75
- --button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
76
- --button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
77
- --button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
78
66
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
79
67
  --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
80
68
  --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -164,8 +152,8 @@
164
152
  --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
165
153
  --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
166
154
  --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
167
- --button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
168
155
  --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
156
+ --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
169
157
  --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
170
158
  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
171
159
  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
@@ -177,25 +165,30 @@
177
165
  --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
178
166
  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
179
167
  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
180
- --button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
181
- --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
168
+ --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
169
+ --button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
182
170
  --button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
183
- --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
184
- --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
171
+ --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
185
172
  --button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
186
- --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
187
- --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
173
+ --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
174
+ --button-color-typical-tertiary-bg-enabled: var(--modes-color-interactive-monochrome-subtle-default);
188
175
  --button-color-typical-tertiary-label-active-copy: var(--modes-color-interactive-monochrome-frozen-with-active);
189
176
  --button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
177
+ --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
190
178
  --button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
179
+ --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
191
180
  --button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-generic-with-active);
192
181
  --button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
182
+ --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
193
183
  --button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
194
184
  --button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
185
+ --button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
186
+ --button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
195
187
  --button-color-video-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
196
188
  --button-color-video-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
197
189
  --button-color-video-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-with-default);
198
190
  --button-color-video-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
191
+ --button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
199
192
  --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
200
193
  --button-radius-m: var(--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) */
201
194
  --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
@@ -216,11 +209,18 @@
216
209
  --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
217
210
  --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
218
211
  --button-color-ai-border-disabled: var(--modes-color-interactive-inactive-default);
212
+ --button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
219
213
  --button-color-destructive-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
220
214
  --button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
221
215
  --button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
216
+ --button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
222
217
  --button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
218
+ --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
219
+ --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
220
+ --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
221
+ --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
223
222
  --button-color-typical-tertiary-bg-active-disabled: var(--modes-color-interactive-inactive-default);
224
223
  --button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
224
+ --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
225
225
  --button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
226
226
  }
package/css/marketing/small/components/container.css CHANGED
@@ -10,20 +10,15 @@
10
10
  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
11
11
  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
12
12
  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
13
- --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
14
13
  --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
15
14
  --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
16
15
  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
17
16
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
18
17
  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
19
18
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
20
- --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
21
19
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
22
20
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
23
21
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
24
- --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
25
- --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
26
- --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
27
22
  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
28
23
  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
29
24
  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -44,17 +39,18 @@
44
39
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
45
40
  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
46
41
  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
42
+ --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
47
43
  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
48
44
  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
49
45
  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
50
46
  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
47
+ --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
51
48
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
52
- --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
53
- --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
54
- --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
49
+ --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
50
+ --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
51
+ --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
55
52
  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
56
53
  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
57
- --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
58
54
  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
59
55
  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
60
56
  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
@@ -74,9 +70,13 @@
74
70
  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
75
71
  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
76
72
  --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
73
+ --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
74
+ --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
75
+ --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
77
76
  --container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-generic-with-active);
78
77
  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
79
78
  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
79
+ --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
80
80
  --container-size-none: var(--global-size-none);
81
81
  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
82
82
  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
package/css/marketing/small/dark.css CHANGED
@@ -117,17 +117,18 @@
117
117
  --modes-color-interactive-progress-bg: #ffffff14;
118
118
  --modes-color-interactive-progress-bg-alt: #00000014;
119
119
  --modes-color-interactive-progress-frozen-bg: #ffffff14;
120
- --modes-color-status-ai-default: #000000;
121
- --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
122
- --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
123
- --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
124
- --modes-color-status-generic-default: #008a89;
125
120
  --modes-color-status-caution-default: #E04500;
126
121
  --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
127
122
  --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
128
123
  --modes-color-status-caution-hover-alt: #34211a; /* used on pill hover states and message bg */
129
124
  --modes-color-status-caution-text: #e75b23;
130
125
  --modes-color-status-caution-frozen-default: #251206; /* Global message bg */
126
+ --modes-color-status-caution-frozen-icon: #e75b23; /* Global message icon. */
127
+ --modes-color-status-ai-default: #000000;
128
+ --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
129
+ --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
130
+ --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
131
+ --modes-color-status-generic-default: #008a89;
131
132
  --modes-color-status-content-with-default: #000000;
132
133
  --modes-color-status-content-with-default-alt: #fffffff2;
133
134
  --modes-color-status-content-with-hover: #000000;
package/css/marketing/small/light.css CHANGED
@@ -128,6 +128,7 @@
128
128
  --modes-color-status-caution-hover-alt: #f1e0d8; /* used on pill hover states and message bg */
129
129
  --modes-color-status-caution-text: #bf3e0c;
130
130
  --modes-color-status-caution-frozen-default: #FF8629; /* used on global message bg */
131
+ --modes-color-status-caution-frozen-icon: #000000; /* used on global message icon */
131
132
  --modes-color-status-content-with-default: #FFFFFF;
132
133
  --modes-color-status-content-with-default-alt: #000000f2;
133
134
  --modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
package/css/product/all.css CHANGED
@@ -270,6 +270,7 @@
270
270
  --modes-color-status-caution-hover-alt-light: #f1e0d8; /* used on pill hover states and message bg */
271
271
  --modes-color-status-caution-text-light: #bf3e0c;
272
272
  --modes-color-status-caution-frozen-default-light: #FF8629; /* used on global message bg */
273
+ --modes-color-status-caution-frozen-icon-light: #000000; /* used on global message icon */
273
274
  --modes-color-status-content-with-default-light: #FFFFFF;
274
275
  --modes-color-status-content-with-default-alt-light: #000000f2;
275
276
  --modes-color-status-content-with-hover-light: #FFFFFF; /* for pill hover X */
@@ -433,17 +434,18 @@
433
434
  --modes-color-interactive-progress-bg-dark: #ffffff14;
434
435
  --modes-color-interactive-progress-bg-alt-dark: #00000014;
435
436
  --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
436
- --modes-color-status-ai-default-dark: #000000;
437
- --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
438
- --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
439
- --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
440
- --modes-color-status-generic-default-dark: #008a89;
441
437
  --modes-color-status-caution-default-dark: #E04500;
442
438
  --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
443
439
  --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
444
440
  --modes-color-status-caution-hover-alt-dark: #34211a; /* used on pill hover states and message bg */
445
441
  --modes-color-status-caution-text-dark: #e75b23;
446
442
  --modes-color-status-caution-frozen-default-dark: #251206; /* Global message bg */
443
+ --modes-color-status-caution-frozen-icon-dark: #e75b23; /* Global message icon. */
444
+ --modes-color-status-ai-default-dark: #000000;
445
+ --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
446
+ --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
447
+ --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
448
+ --modes-color-status-generic-default-dark: #008a89;
447
449
  --modes-color-status-content-with-default-dark: #000000;
448
450
  --modes-color-status-content-with-default-alt-dark: #fffffff2;
449
451
  --modes-color-status-content-with-hover-dark: #000000;