@cds/core 6.0.0-next.1 → 6.0.0-next.2

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 (305) hide show
  1. package/accordion/accordion-content.element.scss.js +1 -1
  2. package/accordion/accordion-header.element.d.ts +2 -0
  3. package/accordion/accordion-header.element.js +1 -1
  4. package/accordion/accordion-header.element.js.map +1 -1
  5. package/accordion/accordion-header.element.scss.js +1 -1
  6. package/accordion/accordion-panel.element.d.ts +2 -2
  7. package/accordion/accordion-panel.element.js +1 -1
  8. package/accordion/accordion-panel.element.js.map +1 -1
  9. package/accordion/accordion-panel.element.scss.js +1 -1
  10. package/accordion/accordion.element.scss.js +1 -1
  11. package/accordion/register.d.ts +1 -0
  12. package/accordion/register.js +1 -1
  13. package/accordion/register.js.map +1 -1
  14. package/alert/alert-actions.element.js +1 -1
  15. package/alert/alert-actions.element.scss.js +1 -1
  16. package/alert/alert-group.element.js +1 -1
  17. package/alert/alert-group.element.scss.js +1 -1
  18. package/alert/alert.element.js +1 -1
  19. package/alert/alert.element.js.map +1 -1
  20. package/alert/alert.element.scss.js +1 -1
  21. package/badge/badge.element.scss.js +1 -1
  22. package/breadcrumb/breadcrumb.element.js +1 -1
  23. package/breadcrumb/breadcrumb.element.scss.js +1 -1
  24. package/button/button.element.d.ts +1 -1
  25. package/button/button.element.js +1 -1
  26. package/button/button.element.scss.js +1 -1
  27. package/button/icon-button.element.d.ts +1 -1
  28. package/button/icon-button.element.js +1 -1
  29. package/button/icon-button.element.js.map +1 -1
  30. package/button/index.d.ts +0 -1
  31. package/button/index.js +1 -1
  32. package/button/register.d.ts +0 -2
  33. package/button/register.js +1 -1
  34. package/button/register.js.map +1 -1
  35. package/button-action/button-action.element.d.ts +38 -0
  36. package/button-action/button-action.element.js +2 -0
  37. package/button-action/button-action.element.js.map +1 -0
  38. package/button-action/button-action.element.scss.js +2 -0
  39. package/button-action/button-action.element.scss.js.map +1 -0
  40. package/button-action/index.d.ts +1 -0
  41. package/button-action/index.js +2 -0
  42. package/button-action/index.js.map +1 -0
  43. package/button-action/register.d.ts +7 -0
  44. package/button-action/register.js +2 -0
  45. package/button-action/register.js.map +1 -0
  46. package/button-expand/button-expand.element.d.ts +25 -0
  47. package/button-expand/button-expand.element.js +2 -0
  48. package/button-expand/button-expand.element.js.map +1 -0
  49. package/button-expand/button-expand.element.scss.js +2 -0
  50. package/button-expand/button-expand.element.scss.js.map +1 -0
  51. package/button-expand/index.d.ts +1 -0
  52. package/button-expand/index.js +2 -0
  53. package/button-expand/index.js.map +1 -0
  54. package/button-expand/register.d.ts +7 -0
  55. package/button-expand/register.js +2 -0
  56. package/button-expand/register.js.map +1 -0
  57. package/button-handle/button-handle.element.d.ts +19 -0
  58. package/button-handle/button-handle.element.js +2 -0
  59. package/button-handle/button-handle.element.js.map +1 -0
  60. package/button-handle/button-handle.element.scss.js +2 -0
  61. package/button-handle/button-handle.element.scss.js.map +1 -0
  62. package/button-handle/index.d.ts +1 -0
  63. package/button-handle/index.js +2 -0
  64. package/button-handle/index.js.map +1 -0
  65. package/button-handle/register.d.ts +7 -0
  66. package/button-handle/register.js +2 -0
  67. package/button-handle/register.js.map +1 -0
  68. package/{button/inline-button.element.d.ts → button-inline/button-inline.element.d.ts} +10 -3
  69. package/button-inline/button-inline.element.js +2 -0
  70. package/button-inline/button-inline.element.js.map +1 -0
  71. package/{button/inline-button.element.scss.js → button-inline/button-inline.element.scss.js} +2 -2
  72. package/button-inline/button-inline.element.scss.js.map +1 -0
  73. package/button-inline/index.d.ts +1 -0
  74. package/button-inline/index.js +2 -0
  75. package/button-inline/index.js.map +1 -0
  76. package/button-inline/register.d.ts +11 -0
  77. package/button-inline/register.js +2 -0
  78. package/button-inline/register.js.map +1 -0
  79. package/button-sort/button-sort.element.d.ts +23 -0
  80. package/button-sort/button-sort.element.js +2 -0
  81. package/button-sort/button-sort.element.js.map +1 -0
  82. package/button-sort/button-sort.element.scss.js +2 -0
  83. package/button-sort/button-sort.element.scss.js.map +1 -0
  84. package/button-sort/index.d.ts +1 -0
  85. package/button-sort/index.js +2 -0
  86. package/button-sort/index.js.map +1 -0
  87. package/button-sort/register.d.ts +7 -0
  88. package/button-sort/register.js +2 -0
  89. package/button-sort/register.js.map +1 -0
  90. package/button-sort/utils.d.ts +1 -0
  91. package/button-sort/utils.js +2 -0
  92. package/button-sort/utils.js.map +1 -0
  93. package/card/card.element.d.ts +3 -3
  94. package/card/card.element.scss.js +1 -1
  95. package/checkbox/checkbox.element.scss.js +1 -1
  96. package/custom-elements.json +5239 -4678
  97. package/custom-elements.legacy.json +321 -136
  98. package/datalist/datalist.element.d.ts +0 -1
  99. package/datalist/datalist.element.js +1 -1
  100. package/datalist/datalist.element.js.map +1 -1
  101. package/datalist/register.d.ts +1 -1
  102. package/datalist/register.js +1 -1
  103. package/datalist/register.js.map +1 -1
  104. package/date/date.element.d.ts +0 -1
  105. package/date/date.element.js +1 -1
  106. package/date/date.element.js.map +1 -1
  107. package/date/date.global.scss.js +1 -1
  108. package/date/register.d.ts +1 -0
  109. package/date/register.js +1 -1
  110. package/date/register.js.map +1 -1
  111. package/divider/divider.element.scss.js +1 -1
  112. package/file/file.element.d.ts +0 -1
  113. package/file/file.element.js +1 -1
  114. package/file/file.element.js.map +1 -1
  115. package/file/file.element.scss.js +1 -1
  116. package/file/register.d.ts +1 -0
  117. package/file/register.js +1 -1
  118. package/file/register.js.map +1 -1
  119. package/forms/control/control.element.js +2 -2
  120. package/forms/control/control.element.js.map +1 -1
  121. package/forms/control/control.element.scss.js +1 -1
  122. package/forms/control-action/control-action.element.d.ts +6 -15
  123. package/forms/control-action/control-action.element.js +1 -1
  124. package/forms/control-action/control-action.element.js.map +1 -1
  125. package/forms/control-group/control-group.element.js +1 -1
  126. package/forms/control-group/control-group.element.scss.js +1 -1
  127. package/forms/control-inline/control-inline.element.js +1 -1
  128. package/forms/control-inline/control-inline.element.scss.js +1 -1
  129. package/forms/control-label/control-label.element.js +1 -1
  130. package/forms/control-label/control-label.element.scss.js +1 -1
  131. package/forms/control-message/control-message.element.scss.js +1 -1
  132. package/forms/form-group/form-group.element.js +1 -1
  133. package/forms/register.d.ts +1 -0
  134. package/forms/register.js +1 -1
  135. package/forms/register.js.map +1 -1
  136. package/forms/utils/utils.js +1 -1
  137. package/forms/utils/utils.js.map +1 -1
  138. package/global.css +1851 -1024
  139. package/global.min.css +1 -1
  140. package/icon/collections/core.d.ts +4 -0
  141. package/icon/collections/core.js +1 -1
  142. package/icon/collections/core.js.map +1 -1
  143. package/icon/icon.element.scss.js +1 -1
  144. package/icon/shapes/detail-collapse.d.ts +3 -0
  145. package/icon/shapes/detail-collapse.js +2 -0
  146. package/icon/shapes/detail-collapse.js.map +1 -0
  147. package/icon/shapes/detail-expand.d.ts +3 -0
  148. package/icon/shapes/detail-expand.js +2 -0
  149. package/icon/shapes/detail-expand.js.map +1 -0
  150. package/input/input-group.element.scss.js +1 -1
  151. package/input/input.element.scss.js +1 -1
  152. package/internal/base/base.element.scss.js +1 -1
  153. package/internal/base/button.base.d.ts +4 -37
  154. package/internal/base/button.base.js +1 -1
  155. package/internal/base/button.base.js.map +1 -1
  156. package/internal/controllers/active.controller.d.ts +20 -0
  157. package/internal/controllers/active.controller.js +2 -0
  158. package/internal/controllers/active.controller.js.map +1 -0
  159. package/internal/controllers/aria-button.controller.d.ts +15 -0
  160. package/internal/controllers/aria-button.controller.js +2 -0
  161. package/internal/controllers/aria-button.controller.js.map +1 -0
  162. package/internal/controllers/aria-disabled.controller.d.ts +14 -0
  163. package/internal/controllers/aria-disabled.controller.js +2 -0
  164. package/internal/controllers/aria-disabled.controller.js.map +1 -0
  165. package/internal/controllers/aria-popup-trigger.controller.d.ts +11 -3
  166. package/internal/controllers/aria-popup-trigger.controller.js +1 -1
  167. package/internal/controllers/aria-popup-trigger.controller.js.map +1 -1
  168. package/internal/controllers/aria-pressed.controller.d.ts +15 -0
  169. package/internal/controllers/aria-pressed.controller.js +2 -0
  170. package/internal/controllers/aria-pressed.controller.js.map +1 -0
  171. package/internal/controllers/aria-selected.controller.d.ts +13 -0
  172. package/internal/controllers/aria-selected.controller.js +2 -0
  173. package/internal/controllers/aria-selected.controller.js.map +1 -0
  174. package/internal/controllers/button-anchor.controller.d.ts +22 -0
  175. package/internal/controllers/button-anchor.controller.js +2 -0
  176. package/internal/controllers/button-anchor.controller.js.map +1 -0
  177. package/internal/controllers/button-submit.controller.d.ts +27 -0
  178. package/internal/controllers/button-submit.controller.js +2 -0
  179. package/internal/controllers/button-submit.controller.js.map +1 -0
  180. package/internal/decorators/animate.d.ts +2 -2
  181. package/internal/decorators/animate.js +1 -1
  182. package/internal/decorators/animate.js.map +1 -1
  183. package/internal/decorators/property.js +1 -1
  184. package/internal/decorators/property.js.map +1 -1
  185. package/internal/index.d.ts +8 -1
  186. package/internal/index.js +1 -1
  187. package/internal/index.js.map +1 -1
  188. package/internal/motion/interfaces.d.ts +4 -5
  189. package/internal/services/global.service.d.ts +1 -1
  190. package/internal/services/i18n.service.d.ts +7 -0
  191. package/internal/services/i18n.service.js +1 -1
  192. package/internal/services/i18n.service.js.map +1 -1
  193. package/internal/utils/global.d.ts +2 -1
  194. package/internal/utils/global.js +1 -1
  195. package/internal/utils/lit.d.ts +5 -1
  196. package/internal/utils/lit.js +1 -1
  197. package/internal/utils/lit.js.map +1 -1
  198. package/internal-components/close-button/close-button.element.d.ts +5 -12
  199. package/internal-components/close-button/close-button.element.js +1 -1
  200. package/internal-components/close-button/close-button.element.js.map +1 -1
  201. package/internal-components/close-button/register.js +1 -1
  202. package/internal-components/close-button/register.js.map +1 -1
  203. package/internal-components/overlay/overlay.element.d.ts +2 -2
  204. package/internal-components/panel/panel.element.scss.js +1 -1
  205. package/internal-components/popup/popup.element.d.ts +2 -2
  206. package/internal-components/popup/popup.element.scss.js +1 -1
  207. package/internal-components/visual-checkbox/visual-checkbox.element.scss.js +1 -1
  208. package/list/list.css +6 -6
  209. package/list/list.min.css +1 -1
  210. package/modal/modal-actions.element.js +1 -1
  211. package/modal/modal.element.d.ts +2 -2
  212. package/modal/modal.element.js +1 -1
  213. package/modal/modal.element.scss.js +1 -1
  214. package/navigation/navigation-group.element.d.ts +2 -2
  215. package/navigation/navigation-group.element.scss.js +1 -5
  216. package/navigation/navigation-group.element.scss.js.map +1 -1
  217. package/navigation/navigation-item.element.js +1 -1
  218. package/navigation/navigation-item.element.scss.js +1 -5
  219. package/navigation/navigation-item.element.scss.js.map +1 -1
  220. package/navigation/navigation-start.element.js +1 -1
  221. package/navigation/navigation.element.d.ts +2 -2
  222. package/navigation/navigation.element.scss.js +1 -1
  223. package/package.json +23 -1
  224. package/pagination/pagination-button.element.d.ts +7 -10
  225. package/pagination/pagination-button.element.js +1 -1
  226. package/pagination/pagination-button.element.js.map +1 -1
  227. package/pagination/pagination.element.js +1 -1
  228. package/pagination/pagination.element.scss.js +1 -1
  229. package/pagination/utils.d.ts +5 -0
  230. package/pagination/utils.js +2 -0
  231. package/pagination/utils.js.map +1 -0
  232. package/password/password.element.js +1 -1
  233. package/password/password.element.js.map +1 -1
  234. package/password/register.d.ts +1 -0
  235. package/password/register.js +1 -1
  236. package/password/register.js.map +1 -1
  237. package/progress-circle/progress-circle.element.scss.js +1 -1
  238. package/radio/radio.element.scss.js +1 -1
  239. package/range/range.element.scss.js +1 -1
  240. package/range/range.global.scss.js +1 -1
  241. package/search/register.d.ts +1 -0
  242. package/search/register.js +1 -1
  243. package/search/register.js.map +1 -1
  244. package/search/search.element.js +1 -1
  245. package/search/search.element.js.map +1 -1
  246. package/select/register.d.ts +1 -1
  247. package/select/register.js +1 -1
  248. package/select/register.js.map +1 -1
  249. package/select/select.element.js +1 -1
  250. package/select/select.element.js.map +1 -1
  251. package/select/select.element.scss.js +1 -1
  252. package/select/select.global.scss.js +1 -1
  253. package/selection-panels/checkbox/checkbox-panel.element.d.ts +10 -13
  254. package/selection-panels/checkbox/checkbox-panel.element.js.map +1 -1
  255. package/selection-panels/radio/radio-panel.element.d.ts +20 -15
  256. package/selection-panels/radio/radio-panel.element.js.map +1 -1
  257. package/selection-panels/shared/selection-panel.element.scss.js +1 -5
  258. package/selection-panels/shared/selection-panel.element.scss.js.map +1 -1
  259. package/styles/module.layout.css +1411 -655
  260. package/styles/module.layout.min.css +1 -1
  261. package/styles/module.tokens.css +71 -52
  262. package/styles/module.tokens.min.css +1 -1
  263. package/styles/module.typography.css +78 -26
  264. package/styles/module.typography.min.css +1 -1
  265. package/styles/shim.clr-ui.css +633 -0
  266. package/styles/shim.clr-ui.min.css +119 -0
  267. package/table/table.css +7 -7
  268. package/table/table.min.css +1 -1
  269. package/tag/tag.element.d.ts +2 -1
  270. package/tag/tag.element.js +1 -1
  271. package/tag/tag.element.js.map +1 -1
  272. package/tag/tag.element.scss.js +1 -1
  273. package/textarea/textarea.element.scss.js +1 -1
  274. package/time/register.d.ts +1 -0
  275. package/time/register.js +1 -1
  276. package/time/register.js.map +1 -1
  277. package/time/time.element.d.ts +0 -1
  278. package/time/time.element.js +1 -1
  279. package/time/time.element.js.map +1 -1
  280. package/toggle/toggle.element.scss.js +1 -1
  281. package/tokens/tokens.android.xml +30 -11
  282. package/tokens/tokens.d.ts +28 -9
  283. package/tokens/tokens.ios.swift +31 -12
  284. package/tokens/tokens.js +29 -10
  285. package/tokens/tokens.json +127 -26
  286. package/tokens/tokens.scss +87 -12
  287. package/tree-view/register.js +1 -1
  288. package/tree-view/register.js.map +1 -1
  289. package/tree-view/tree-item.element.d.ts +2 -2
  290. package/tree-view/tree-item.element.js +1 -1
  291. package/tree-view/tree-item.element.js.map +1 -1
  292. package/tree-view/tree-item.element.scss.js +1 -1
  293. package/button/icon-button.element.scss.js +0 -2
  294. package/button/icon-button.element.scss.js.map +0 -1
  295. package/button/inline-button.element.js +0 -2
  296. package/button/inline-button.element.js.map +0 -1
  297. package/button/inline-button.element.scss.js.map +0 -1
  298. package/forms/control-action/control-action.element.scss.js +0 -2
  299. package/forms/control-action/control-action.element.scss.js.map +0 -1
  300. package/internal-components/close-button/close-button.element.scss.js +0 -2
  301. package/internal-components/close-button/close-button.element.scss.js.map +0 -1
  302. package/pagination/pagination-button.element.scss.js +0 -2
  303. package/pagination/pagination-button.element.scss.js.map +0 -1
  304. package/search/search.element.scss.js +0 -2
  305. package/search/search.element.scss.js.map +0 -1
package/styles/shim.clr-ui.css ADDED
@@ -0,0 +1,633 @@
1
+ /* This shim file maps the custom properties of @clr/ui to Core tokens. Thus, it is only needed for apps currently dependent on @clr/ui and wanting to apply Core look and feel. */
2
+ :root,
3
+ [cds-theme] {
4
+ /* Global */
5
+ --clr-global-app-background: var(
6
+ --cds-alias-object-app-background
7
+ );
8
+ --clr-global-selection-color: var(
9
+ --cds-alias-object-interaction-background-selected
10
+ );
11
+ --clr-global-on-selection-color: var(
12
+ --cds-alias-object-interaction-color-selected
13
+ );
14
+ --clr-global-hover-color: var(
15
+ --cds-global-typography-link-color-hover
16
+ );
17
+ --clr-global-content-header-font-color: var(
18
+ --cds-global-typography-color-400
19
+ );
20
+ --clr-global-font-color: var(
21
+ --cds-global-typography-color-500
22
+ );
23
+ --clr-global-success-color: var(--cds-alias-status-success);
24
+ --clr-global-error-color: var(--cds-alias-status-danger);
25
+ --clr-close-color--normal: var(
26
+ --cds-alias-object-interaction-color
27
+ );
28
+ --clr-close-color--hover: var(
29
+ --cds-alias-object-interaction-color-hover
30
+ );
31
+ /* Typography */
32
+ --clr-h1-color: var(--cds-global-typography-color-400);
33
+ --clr-h2-color: var(--cds-global-typography-color-400);
34
+ --clr-h3-color: var(--cds-global-typography-color-400);
35
+ --clr-h4-color: var(--cds-global-typography-color-400);
36
+ --clr-h5-color: var(--cds-global-typography-color-400);
37
+ --clr-h6-color: var(--cds-global-typography-color-400);
38
+ --clr-p0-color: var(--cds-global-typography-color-500);
39
+ --clr-p1-color: var(--cds-global-typography-color-500);
40
+ --clr-p2-color: var(--cds-global-typography-color-500);
41
+ --clr-p3-color: var(--cds-global-typography-color-500);
42
+ --clr-p4-color: var(--cds-global-typography-color-500);
43
+ --clr-p5-color: var(--cds-global-typography-color-500);
44
+ --clr-p6-color: var(--cds-global-typography-color-500);
45
+ --clr-p7-color: var(--cds-global-typography-color-500);
46
+ --clr-p8-color: var(--cds-global-typography-color-500);
47
+ /* Buttons */
48
+ --clr-btn-default-bg-color: transparent;
49
+ --clr-btn-outline-bg-color: transparent;
50
+ --clr-btn-default-color: var(--cds-alias-status-info);
51
+ --clr-btn-default-border-color: var(--clr-btn-default-color);
52
+ --clr-btn-default-bg-color: var(--clr-btn-outline-bg-color);
53
+ --clr-btn-default-hover-bg-color: hsla(198, 100%, 34%, 0.1);
54
+ --clr-btn-default-hover-color: var(
55
+ --cds-alias-status-info
56
+ );
57
+ --clr-btn-default-box-shadow-color: var(--cds-alias-object-opacity-100);
58
+ --clr-btn-default-disabled-color: var(--cds-alias-status-disabled-tint);
59
+ --clr-btn-default-disabled-bg-color: var(--clr-btn-default-bg-color);
60
+ --clr-btn-default-disabled-border-color: var(--cds-alias-status-disabled-tint);
61
+ --clr-btn-default-checked-color: var(--cds-global-typography-color-100);
62
+ --clr-btn-default-checked-bg-color: var(--clr-btn-default-color);
63
+ --clr-btn-default-outline-color: var(--cds-alias-status-info);
64
+ --clr-btn-default-outline-border-color: var(--clr-btn-default-outline-color);
65
+ --clr-btn-default-outline-bg-color: var(--clr-btn-outline-bg-color);
66
+ --clr-btn-default-outline-hover-bg-color: hsla(198, 100%, 34%, 0.1);
67
+ --clr-btn-default-outline-hover-color: var(--cds-alias-status-info);
68
+ --clr-btn-default-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
69
+ --clr-btn-default-outline-disabled-color: var(--cds-alias-status-disabled-tint);
70
+ --clr-btn-default-outline-disabled-bg-color: var(--clr-btn-default-outline-bg-color);
71
+ --clr-btn-default-outline-disabled-border-color: var(
72
+ --cds-alias-status-disabled-tint
73
+ );
74
+ --clr-btn-default-outline-checked-color: var(--cds-global-typography-color-100);
75
+ --clr-btn-default-outline-checked-bg-color: var(--clr-btn-default-outline-bg-color);
76
+ --clr-btn-primary-color: var(--cds-global-typography-color-100);
77
+ --clr-btn-primary-bg-color: var(--cds-alias-status-info);
78
+ --clr-btn-primary-border-color: var(--cds-alias-status-info);
79
+ --clr-btn-primary-hover-bg-color: var(--cds-alias-status-info);
80
+ --clr-btn-primary-hover-color: var(--cds-global-typography-color-100);
81
+ --clr-btn-primary-box-shadow-color: var(--cds-alias-object-opacity-100);
82
+ --clr-btn-primary-disabled-color: var(--cds-global-typography-color-100);
83
+ --clr-btn-primary-disabled-bg-color: var(--cds-alias-status-disabled-tint);
84
+ --clr-btn-primary-disabled-border-color: var(--cds-alias-status-disabled-tint);
85
+ --clr-btn-primary-checked-bg-color: var(--cds-alias-status-info);
86
+ --clr-btn-primary-checked-color: var(--cds-global-typography-color-100);
87
+ --clr-btn-success-color: var(--cds-global-typography-color-100);
88
+ --clr-btn-success-bg-color: var(--cds-alias-status-success);
89
+ --clr-btn-success-border-color: var(--clr-btn-success-bg-color);
90
+ --clr-btn-success-hover-bg-color: var(--cds-alias-status-success);
91
+ --clr-btn-success-hover-color: var(--clr-btn-success-color);
92
+ --clr-btn-success-box-shadow-color: var(--cds-alias-object-opacity-100);
93
+ --clr-btn-success-disabled-color: var(--cds-global-typography-color-100);
94
+ --clr-btn-success-disabled-bg-color: var(--cds-alias-status-disabled-tint);
95
+ --clr-btn-success-disabled-border-color: var(--cds-alias-status-disabled-tint);
96
+ --clr-btn-success-checked-bg-color: var(--clr-btn-success-bg-color);
97
+ --clr-btn-success-checked-color: var(--clr-btn-success-color);
98
+ --clr-btn-success-outline-color: var(--cds-alias-status-success);
99
+ --clr-btn-success-outline-bg-color: var(--clr-btn-outline-bg-color);
100
+ --clr-btn-success-outline-border-color: var(--cds-alias-status-success);
101
+ --clr-btn-success-outline-hover-bg-color: hsla(93, 80%, 28%, 0.1);
102
+ --clr-btn-success-outline-hover-color: var(--cds-alias-status-success);
103
+ --clr-btn-success-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
104
+ --clr-btn-success-outline-disabled-color: var(--cds-alias-status-disabled-tint);
105
+ --clr-btn-success-outline-disabled-bg-color: var(--clr-btn-success-outline-bg-color);
106
+ --clr-btn-success-outline-disabled-border-color: var(
107
+ --cds-alias-status-disabled-tint
108
+ );
109
+ --clr-btn-success-outline-checked-bg-color: var(--clr-btn-success-outline-bg-color);
110
+ --clr-btn-success-outline-checked-color: var(--clr-btn-success-outline-color);
111
+ --clr-btn-danger-color: var(--cds-global-typography-color-100);
112
+ --clr-btn-danger-bg-color: var(--cds-alias-status-danger);
113
+ --clr-btn-danger-border-color: var(--clr-btn-danger-bg-color);
114
+ --clr-btn-danger-hover-bg-color: var(--cds-alias-status-danger);
115
+ --clr-btn-danger-hover-color: var(--clr-btn-danger-color);
116
+ --clr-btn-danger-box-shadow-color: var(--cds-alias-object-opacity-100);
117
+ --clr-btn-danger-disabled-color: var(--cds-global-typography-color-100);
118
+ --clr-btn-danger-disabled-bg-color: var(--cds-alias-status-disabled-tint);
119
+ --clr-btn-danger-disabled-border-color: var(--clr-btn-danger-disabled-color);
120
+ --clr-btn-danger-checked-bg-color: var(--clr-btn-danger-bg-color);
121
+ --clr-btn-danger-checked-color: var(--clr-btn-danger-color);
122
+ --clr-btn-danger-outline-color: var(--cds-alias-status-danger);
123
+ --clr-btn-danger-outline-bg-color: var(--clr-btn-outline-bg-color);
124
+ --clr-btn-danger-outline-border-color: var(--cds-alias-status-danger);
125
+ --clr-btn-danger-outline-hover-bg-color: hsla(9, 100%, 44%, 0.1);
126
+ --clr-btn-danger-outline-hover-color: var(--cds-alias-status-danger);
127
+ --clr-btn-danger-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
128
+ --clr-btn-danger-outline-disabled-color: var(--cds-alias-status-disabled-tint);
129
+ --clr-btn-danger-outline-disabled-bg-color: var(--clr-btn-danger-outline-bg-color);
130
+ --clr-btn-danger-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
131
+ --clr-btn-danger-outline-checked-bg-color: var(--clr-btn-danger-outline-bg-color);
132
+ --clr-btn-danger-outline-checked-color: var(--clr-btn-danger-outline-color);
133
+ --clr-btn-warning-color: var(--cds-global-color-construction-900);
134
+ --clr-btn-warning-bg-color: var(--cds-alias-status-warning);
135
+ --clr-btn-warning-border-color: var(--clr-btn-warning-bg-color);
136
+ --clr-btn-warning-hover-bg-color: var(--cds-alias-status-warning);
137
+ --clr-btn-warning-hover-color: var(--clr-btn-warning-color);
138
+ --clr-btn-warning-box-shadow-color: var(--cds-alias-object-opacity-100);
139
+ --clr-btn-warning-disabled-color: var(--cds-global-typography-color-100);
140
+ --clr-btn-warning-disabled-bg-color: var(--cds-alias-status-disabled-tint);
141
+ --clr-btn-warning-disabled-border-color: var(--clr-btn-warning-disabled-color);
142
+ --clr-btn-warning-checked-bg-color: var(--clr-btn-warning-bg-color);
143
+ --clr-btn-warning-checked-color: var(--clr-btn-warning-color);
144
+ --clr-btn-warning-outline-color: var(--cds-alias-status-warning-dark);
145
+ --clr-btn-warning-outline-bg-color: var(--clr-btn-outline-bg-color);
146
+ --clr-btn-warning-outline-border-color: var(--cds-alias-status-warning-dark);
147
+ --clr-btn-warning-outline-hover-bg-color: hsla(40, 100%, 59%, 0.1);
148
+ --clr-btn-warning-outline-hover-color: var(--cds-alias-status-warning-dark);
149
+ --clr-btn-warning-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
150
+ --clr-btn-warning-outline-disabled-color: var(--cds-alias-status-disabled-tint);
151
+ --clr-btn-warning-outline-disabled-bg-color: var(--clr-btn-warning-outline-bg-color);
152
+ --clr-btn-warning-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
153
+ --clr-btn-warning-outline-checked-bg-color: var(--clr-btn-warning-outline-bg-color);
154
+ --clr-btn-warning-outline-checked-color: var(--clr-btn-warning-outline-color);
155
+ --clr-btn-link-color: var(--cds-alias-status-info);
156
+ --clr-btn-link-bg-color: transparent;
157
+ --clr-btn-link-border-color: transparent;
158
+ --clr-btn-link-hover-bg-color: transparent;
159
+ --clr-btn-link-hover-color: var(
160
+ --cds-alias-status-info
161
+ );
162
+ --clr-btn-link-disabled-color: var(--cds-alias-status-disabled-tint);
163
+ --clr-btn-link-disabled-bg-color: transparent;
164
+ --clr-btn-link-disabled-border-color: transparent;
165
+ --clr-btn-link-checked-bg-color: transparent;
166
+ --clr-btn-link-checked-color: var(
167
+ --cds-global-color-blue-800
168
+ );
169
+ --clr-btn-inverse-color: var(--cds-global-typography-color-100);
170
+ --clr-btn-inverse-border-color: var(--cds-global-typography-color-100);
171
+ --clr-btn-inverse-bg-color: transparent;
172
+ --clr-btn-inverse-hover-bg-color: rgba(255, 255, 255, 0.15);
173
+ --clr-btn-inverse-hover-color: var(--cds-global-typography-color-100);
174
+ --clr-btn-inverse-box-shadow-color: rgba(0, 0, 0, 0.25);
175
+ --clr-btn-inverse-disabled-color: var(--cds-alias-status-disabled-tint);
176
+ --clr-btn-inverse-disabled-bg-color: var(--clr-btn-inverse-bg-color);
177
+ --clr-btn-inverse-disabled-border-color: var(--cds-alias-status-disabled-tint);
178
+ --clr-btn-inverse-checked-bg-color: rgba(255, 255, 255, 0.15);
179
+ --clr-btn-inverse-checked-color: var(--cds-alias-status-disabled-tint);
180
+ --clr-btn-icon-disabled-color: var(
181
+ --cds-global-typography-color-100
182
+ );
183
+ /* Alert Color Properties */
184
+ --clr-alert-action-color: var(--cds-global-typography-color-500);
185
+ --clr-alert-action-active-color: var(
186
+ --cds-alias-object-interaction-color-active
187
+ );
188
+ --clr-alert-close-icon-color: var(--clr-alert-action-color);
189
+ --clr-alert-close-icon-hover-color: var(--clr-alert-action-active-color);
190
+ --clr-app-level-alert-color: var(--cds-global-color-white);
191
+ --clr-app-alert-close-icon-color: var(--clr-app-level-alert-color);
192
+ --clr-alert-info-bg-color: var(--cds-alias-status-info-tint);
193
+ --clr-alert-info-font-color: var(--cds-global-typography-color-500);
194
+ --clr-alert-info-border-color: var(
195
+ --cds-alias-status-info
196
+ );
197
+ --clr-alert-info-icon-color: var(
198
+ --cds-global-typography-color-500
199
+ );
200
+ --clr-alert-info-close-icon-color: var(--cds-global-typography-color-500);
201
+ --clr-alert-info-action-color: var(--cds-global-typography-color-500);
202
+ --clr-alert-success-bg-color: var(--cds-alias-status-success-tint);
203
+ --clr-alert-success-font-color: var(--cds-global-typography-color-500);
204
+ --clr-alert-success-border-color: var(--cds-alias-status-success);
205
+ --clr-alert-success-icon-color: var(--cds-global-typography-color-500);
206
+ --clr-alert-success-close-icon-color: var(--cds-global-typography-color-500);
207
+ --clr-alert-success-action-color: var(--cds-global-typography-color-500);
208
+ --clr-alert-warning-bg-color: var(--cds-alias-status-warning-tint);
209
+ --clr-alert-warning-font-color: var(--cds-global-color-black);
210
+ --clr-alert-warning-border-color: var(--cds-alias-status-warning);
211
+ --clr-alert-warning-icon-color: var(--cds-global-color-black);
212
+ --clr-alert-warning-close-icon-color: var(--cds-global-color-black);
213
+ --clr-alert-warning-action-color: var(--cds-global-color-black);
214
+ --clr-alert-danger-bg-color: var(--cds-alias-status-danger-tint);
215
+ --clr-alert-danger-font-color: var(--cds-global-typography-color-500);
216
+ --clr-alert-danger-border-color: var(--cds-alias-status-danger);
217
+ --clr-alert-danger-icon-color: var(--cds-global-typography-color-500);
218
+ --clr-alert-danger-close-icon-color: var(--cds-global-typography-color-500);
219
+ --clr-alert-danger-action-color: var(--cds-global-typography-color-500);
220
+ --clr-app-alert-info-bg-color: var(--cds-alias-status-info);
221
+ --clr-app-alert-info-font-color: var(--cds-global-typography-color-100);
222
+ --clr-app-alert-info-icon-color: var(--clr-app-alert-info-font-color);
223
+ --clr-app-alert-info-action-color: var(--clr-app-alert-info-font-color);
224
+ --clr-app-alert-info-action-active-color: var(--clr-app-alert-info-font-color);
225
+ --clr-app-alert-info-close-icon-color: var(--clr-app-alert-info-font-color);
226
+ --clr-app-alert-info-close-icon-hover-color: var(--clr-app-alert-info-font-color);
227
+ --clr-app-alert-warning-bg-color: var(--cds-alias-status-warning);
228
+ --clr-app-alert-warning-font-color: var(--cds-global-color-black);
229
+ --clr-app-alert-warning-icon-color: var(--clr-app-alert-warning-font-color);
230
+ --clr-app-alert-warning-close-icon-color: var(--clr-app-alert-warning-font-color);
231
+ --clr-app-alert-warning-action-color: var(--clr-app-alert-warning-font-color);
232
+ --clr-app-alert-warning-action-active-color: var(
233
+ --clr-app-alert-warning-font-color
234
+ );
235
+ --clr-app-alert-warning-close-icon-hover-color: var(
236
+ --clr-app-alert-warning-font-color
237
+ );
238
+ --clr-app-alert-danger-bg-color: var(--cds-alias-status-danger);
239
+ --clr-app-alert-danger-font-color: var(--cds-global-typography-color-100);
240
+ --clr-app-alert-danger-icon-color: var(--clr-app-alert-danger-font-color);
241
+ --clr-app-alert-danger-close-icon-color: var(--clr-app-alert-danger-font-color);
242
+ --clr-app-alert-danger-action-color: var(--clr-app-alert-danger-font-color);
243
+ --clr-app-alert-danger-action-active-color: var(--clr-app-alert-danger-font-color);
244
+ --clr-app-alert-danger-close-icon-hover-color: var(
245
+ --clr-app-alert-danger-font-color
246
+ );
247
+ --clr-app-alert-success-bg-color: var(--cds-alias-status-success);
248
+ --clr-app-alert-success-font-color: var(--cds-global-typography-color-100);
249
+ --clr-app-alert-success-icon-color: var(--clr-app-alert-success-font-color);
250
+ --clr-app-alert-success-close-icon-color: var(--clr-app-alert-success-font-color);
251
+ --clr-app-alert-success-action-color: var(--clr-app-alert-success-font-color);
252
+ --clr-app-alert-success-action-active-color: var(--clr-app-alert-success-font-color);
253
+ --clr-app-alert-success-close-icon-hover-color: var(
254
+ --clr-app-alert-success-font-color
255
+ );
256
+ --clr-app-alert-pager-text-color: var(
257
+ --cds-global-typography-color-500
258
+ );
259
+ --clr-app-alert-info-pager-bg-color: var(
260
+ --cds-alias-status-info-shade
261
+ );
262
+ --clr-app-alert-warning-pager-bg-color: var(
263
+ --cds-alias-status-warning-shade
264
+ );
265
+ --clr-app-alert-danger-pager-bg-color: var(
266
+ --cds-alias-status-danger-shade
267
+ );
268
+ --clr-app-alert-info-pager-font-color: var(--cds-global-color-white);
269
+ --clr-app-alert-warning-pager-font-color: var(--cds-global-color-black);
270
+ --clr-app-alert-danger-pager-font-color: var(--cds-global-color-white);
271
+ --clr-app-alert-success-pager-font-color: var(--cds-global-color-white);
272
+ /* Labels */
273
+ --clr-label-font-color-light: var(--cds-global-typography-color-500);
274
+ --clr-label-font-color-dark: var(--cds-global-typography-color-500);
275
+ --clr-label-default-border-color: var(--cds-alias-status-neutral);
276
+ --clr-label-bg-hover-color: var(--cds-alias-status-neutral-tint);
277
+ --clr-label-gray-bg-color: var(
278
+ --cds-alias-status-neutral
279
+ );
280
+ --clr-label-gray-color: var(--clr-label-font-color-light);
281
+ --clr-label-purple-bg-color: var(--cds-global-color-violet-500);
282
+ --clr-label-purple-color: var(--clr-label-font-color-light);
283
+ --clr-label-blue-bg-color: var(--cds-global-color-blue-800);
284
+ --clr-label-blue-color: var(--clr-label-font-color-light);
285
+ --clr-label-orange-bg-color: var(--cds-global-color-ochre-800);
286
+ --clr-label-orange-color: var(--clr-label-font-color-dark);
287
+ --clr-label-light-blue-bg-color: var(--cds-global-color-blue-600);
288
+ --clr-label-light-blue-color: var(--clr-label-font-color-dark);
289
+ --clr-label-info-bg-color: var(--cds-alias-status-tint);
290
+ --clr-label-info-font-color: var(--clr-label-font-color-light);
291
+ --clr-label-info-border-color: var(--cds-alias-status-info);
292
+ --clr-label-success-bg-color: var(--cds-alias-status-tint);
293
+ --clr-label-success-font-color: var(--clr-label-font-color-light);
294
+ --clr-label-success-border-color: var(--cds-alias-status-success);
295
+ --clr-label-warning-bg-color: var(--cds-alias-status-tint);
296
+ --clr-label-warning-font-color: var(--clr-label-font-color-light);
297
+ --clr-label-warning-border-color: var(--cds-alias-status-warning);
298
+ --clr-label-danger-bg-color: var(--cds-alias-status-tint);
299
+ --clr-label-danger-font-color: var(--clr-label-font-color-light);
300
+ --clr-label-danger-border-color: var(--cds-alias-status-danger);
301
+ /* Badges */
302
+ --clr-badge-background-color: var(--cds-alias-status-neutral-shade);
303
+ --clr-badge-color: var(--cds-global-color-white);
304
+ --clr-badge-info-bg-color: var(--cds-alias-status-info-shade);
305
+ --clr-badge-info-color: var(--cds-global-color-white);
306
+ --clr-badge-success-bg-color: var(--cds-alias-status-success-shade);
307
+ --clr-badge-success-color: var(--cds-global-color-white);
308
+ --clr-badge-warning-bg-color: var(--cds-alias-status-warning-shade);
309
+ --clr-badge-warning-color: var(--cds-global-color-black);
310
+ --clr-badge-danger-bg-color: var(--cds-alias-status-danger-shade);
311
+ --clr-badge-danger-color: var(--cds-global-color-white);
312
+ --clr-badge-gray-bg-color: var(--cds-global-color-gray-600);
313
+ --clr-badge-gray-color: var(--cds-global-color-white);
314
+ --clr-badge-purple-bg-color: var(--cds-global-color-violet-500);
315
+ --clr-badge-purple-color: var(--cds-global-color-white);
316
+ --clr-badge-blue-bg-color: var(--cds-global-color-blue-800);
317
+ --clr-badge-blue-color: var(--cds-global-color-white);
318
+ --clr-badge-orange-bg-color: var(--cds-global-color-ochre-700);
319
+ --clr-badge-orange-color: var(--cds-global-color-black);
320
+ --clr-badge-light-blue-bg-color: var(--cds-global-color-blue-400);
321
+ --clr-badge-light-blue-color: var(--cds-global-color-black);
322
+ /* Progress Bars */
323
+ --clr-progress-default-color: var(--cds-alias-status-info);
324
+ --clr-progress-alt-color-1: var(--cds-alias-status-success);
325
+ --clr-progress-alt-color-2: var(--cds-alias-status-danger);
326
+ --clr-progress-alt-color-3: var(--clr-progress-alt-color-2);
327
+ --clr-progress-bg-color: var(--cds-alias-object-border-color-tint);
328
+ /* Accordion */
329
+ --clr-accordion-text-color: var(--cds-global-typography-color-500);
330
+ --clr-accordion-active-background-color: var(
331
+ --cds-alias-object-interaction-background-selected
332
+ );
333
+ --clr-accordion-content-background-color: var(--cds-alias-object-app-background);
334
+ --clr-accordion-header-background-color: var(--cds-alias-object-app-background);
335
+ --clr-accordion-header-hover-background-color: var(
336
+ --cds-alias-object-interaction-background-hover
337
+ );
338
+ --clr-accordion-error-color: var(--cds-alias-status-danger);
339
+ --clr-accordion-complete-color: var(--cds-alias-status-success);
340
+ --clr-accordion-border-color: var(--cds-alias-object-border-color);
341
+ --clr-accordion-border-left-color: var(--cds-alias-object-border-color-tint);
342
+ --clr-accordion-border-left-color-complete: var(--clr-accordion-complete-color);
343
+ --clr-accordion-border-left-color-error: var(--clr-accordion-error-color);
344
+ /* Cards */
345
+ --clr-card-bg-color: var(--cds-alias-object-container-background);
346
+ --clr-card-divider-color: var(--cds-alias-object-border-color);
347
+ --clr-card-title-color: var(--clr-h4-color);
348
+ --clr-card-border-color: var(--cds-alias-object-container-border-color);
349
+ --clr-card-box-shadow-color: var(--clr-card-border-color);
350
+ --clr-card-clickable-border-color: var(
351
+ --cds-alias-object-interaction-background-highlight
352
+ );
353
+ --clr-card-clickable-box-shadow-color: var(--clr-card-clickable-border-color);
354
+ /* Forms */
355
+ --clr-form-disabled-background-color: var(--cds-alias-status-disabled-tint);
356
+ --clr-forms-label-color: var(--cds-global-typography-color-300);
357
+ --clr-forms-text-color: var(--cds-global-typography-color-500);
358
+ --clr-forms-invalid-color: var(--cds-alias-status-danger);
359
+ --clr-forms-valid-color: var(--cds-alias-status-success);
360
+ --clr-forms-valid-text-color: var(--cds-alias-status-success);
361
+ --clr-forms-subtext-color: var(--cds-global-typography-color-300);
362
+ --clr-forms-placeholder-color: var(--cds-global-typography-color-200);
363
+ --clr-forms-border-color: var(
364
+ --cds-alias-object-interaction-border-color
365
+ );
366
+ --clr-forms-focused-color: var(--cds-alias-status-info);
367
+ --clr-forms-subtext-disabled-color: var(--cds-alias-status-disabled);
368
+ --clr-forms-border-disabled-color: var(--cds-alias-object-border-color-tint);
369
+ --clr-forms-text-disabled-color: var(--cds-alias-status-disabled);
370
+ --clr-forms-label-disabled-color: var(--cds-alias-status-disabled);
371
+ --clr-forms-textarea-background-color: var(--cds-alias-object-container-background);
372
+ --clr-forms-select-caret-hover-color: var(
373
+ --cds-alias-object-interaction-color-hover
374
+ );
375
+ --clr-forms-select-caret-color: var(
376
+ --cds-alias-object-interaction-color
377
+ );
378
+ --clr-forms-select-option-color: var(--clr-forms-text-color);
379
+ --clr-forms-select-multiple-background-color: var(--clr-forms-textarea-background-color);
380
+ --clr-forms-select-multiple-border-color: var(--cds-alias-object-border-color);
381
+ --clr-forms-select-multiple-option-color: var(--clr-forms-text-color);
382
+ --clr-forms-checkbox-label-color: var(--clr-forms-label-color);
383
+ --clr-forms-checkbox-background-color: var(--cds-alias-status-info);
384
+ --clr-forms-checkbox-indeterminate-border-color: var(--cds-alias-status-info);
385
+ --clr-forms-checkbox-mark-color: var(--cds-global-typography-color-100);
386
+ --clr-forms-checkbox-disabled-background-color: var(--clr-form-disabled-background-color);
387
+ --clr-forms-checkbox-disabled-mark-color: var(--cds-global-typography-color-100);
388
+ --clr-forms-radio-label-color: var(--clr-forms-checkbox-label-color);
389
+ --clr-forms-radio-disabled-background-color: var(
390
+ --clr-form-disabled-background-color
391
+ );
392
+ --clr-forms-radio-disabled-mark-color: var(
393
+ --clr-forms-checkbox-disabled-mark-color
394
+ );
395
+ --clr-forms-range-progress-fill-color: var(--cds-alias-status-info);
396
+ --clr-forms-range-track-color: var(--cds-alias-object-border-color);
397
+ /* Combobox */
398
+ --clr-combobox-trigger-color: var(--clr-color-neutral-500);
399
+ --clr-combobox-input-background-color: var(--cds-alias-object-container-background-shade);
400
+ --clr-combobox-pill-background-color: var(
401
+ --cds-alias-object-interaction-background
402
+ );
403
+ --clr-combobox-pill-border-color: var(--cds-alias-object-border-color);
404
+ --clr-combobox-pill-font-color: var(--cds-global-typography-color-500);
405
+ --clr-combobox-filter-highlight: var(
406
+ --cds-alias-object-interaction-background-highlight
407
+ );
408
+ /* Datepicker */
409
+ --clr-calendar-background-color: var(--cds-alias-object-overlay-background);
410
+ --clr-calendar-border-color: var(--cds-alias-object-container-border-color);
411
+ --clr-datepicker-trigger-color: var(--cds-alias-status-info);
412
+ --clr-datepicker-trigger-hover-color: var(--clr-color-action-800);
413
+ --clr-calendar-btn-color: var(--cds-alias-status-info);
414
+ --clr-calendar-btn-hover-focus-color: var(
415
+ --cds-alias-object-interaction-background-hover
416
+ );
417
+ --clr-calendar-today-date-cell-color: var(--cds-global-typography-color-500);
418
+ --clr-calendar-active-cell-background-color: var(
419
+ --cds-alias-object-interaction-background-selected
420
+ );
421
+ --clr-calendar-active-focus-cell-background-color: var(
422
+ --cds-alias-object-interaction-background-selected
423
+ );
424
+ --clr-calendar-active-cell-color: var(--cds-global-typography-color-500);
425
+ /* Dropdown */
426
+ --clr-dropdown-active-text-color: var(--cds-alias-object-interaction-color-active);
427
+ --clr-dropdown-bg-color: var(--cds-alias-object-overlay-background);
428
+ --clr-dropdown-border-color: var(--cds-alias-object-border-color);
429
+ --clr-dropdown-divider-color: var(--cds-alias-object-border-color-tint);
430
+ --clr-dropdown-child-border-color: var(--cds-alias-object-border-color);
431
+ --clr-dropdown-bg-hover-color: var(--cds-alias-object-interaction-background-hover);
432
+ --clr-dropdown-selection-color: var(
433
+ --cds-alias-object-interaction-background-selected
434
+ );
435
+ --clr-dropdown-box-shadow: var(--clr-popover-box-shadow-color);
436
+ --clr-dropdown-text-color: var(--clr-p1-color);
437
+ --clr-dropdown-header-color: var(--cds-global-typography-color-400);
438
+ --clr-dropdown-item-color: var(--cds-global-typography-color-300);
439
+ /* Header */
440
+ /* Modal */
441
+ --clr-modal-title-color: var(--cds-global-typography-color-400);
442
+ --clr-modal-close-color: var(--cds-alias-object-interaction-color);
443
+ --clr-modal-bg-color: var(--cds-alias-object-overlay-background);
444
+ --clr-modal-backdrop-color: var(--cds-alias-object-overlay-backdrop-background);
445
+ /* Navigation */
446
+ --clr-link-active-color: var(--cds-global-typography-link-color);
447
+ --clr-link-color: var(--cds-global-typography-link-color);
448
+ --clr-link-hover-color: var(--cds-global-typography-link-color-hover);
449
+ --clr-link-visited-color: var(--cds-global-typography-link-color-visited);
450
+ --clr-link-visited-color-hover: var(--cds-global-typography-link-color-visited-hover);
451
+ --clr-custom-links-hover-color: var(--cds-global-color-gray-200);
452
+ /* Responsive Navigation */
453
+ --clr-sliding-panel-text-color: var(--cds-global-color-gray-700);
454
+ --clr-nav-background-color: var(--cds-global-color-gray-200);
455
+ --clr-responsive-nav-hover-bg: var(--cds-global-color-gray-0);
456
+ --clr-responsive-nav-trigger-bg-color: var(--cds-global-color-gray-0);
457
+ --clr-responsive-nav-header-backdrop-bg-color: var(--cds-global-color-gray-1000);
458
+ /* Sidenav */
459
+ --clr-sidenav-border-color: var(--cds-alias-object-border-color);
460
+ --clr-sidenav-link-hover-color: var(--cds-alias-object-interaction-background-hover);
461
+ --clr-sidenav-link-active-color: var(--cds-alias-object-interaction-color-active);
462
+ --clr-sidenav-link-active-bg-color: var(--clr-global-selection-color);
463
+ --clr-sidenav-header-color: var(--clr-h6-color);
464
+ --clr-sidenav-color: var(--clr-p1-color);
465
+ /* Signpost */
466
+ --clr-signpost-content-bg-color: var(--cds-alias-object-overlay-background);
467
+ --clr-signpost-content-border-color: var(--cds-alias-object-overlay-border-color);
468
+ --clr-signpost-action-color: var(--cds-alias-object-interaction-color);
469
+ --clr-signpost-action-hover-color: var(--cds-alias-object-interaction-color-hover);
470
+ --clr-signpost-border-size: 0.6rem;
471
+ --clr-signpost-pointer-border: var(--clr-signpost-border-size) solid var(--cds-alias-object-overlay-border-color);
472
+ --clr-signpost-pointer-psuedo-border: var(--clr-signpost-border-size) solid var(--clr-signpost-content-bg-color);
473
+ /* StackView */
474
+ --clr-stack-view-border-color: var(--cds-alias-object-border-color);
475
+ --clr-stack-view-bg-color: var(--cds-alias-object-container-background);
476
+ --clr-stack-view-stack-block-border-bottom: var(--cds-alias-object-border-color);
477
+ --clr-stack-view-color: var(--cds-global-typography-color-500);
478
+ --clr-stack-view-stack-block-label-text-color: var(--cds-global-typography-color-500);
479
+ --clr-stack-view-border-box-color: var(--cds-alias-object-border-color-tint);
480
+ --clr-stack-block-changed-border-top-color: var(
481
+ --cds-alias-object-interaction-background-highlight
482
+ );
483
+ --clr-stack-view-stack-block-label-and-content-bg-color: var(
484
+ --cds-alias-object-container-background-tint
485
+ );
486
+ --clr-stack-view-stack-children-stack-block-border-bottom-color: var(
487
+ --cds-alias-object-border-color-tint
488
+ );
489
+ --clr-stack-view-stack-children-stack-block-label-and-content-bg-color: var(
490
+ --cds-alias-object-container-background
491
+ );
492
+ --clr-stack-view-stack-block-expanded-bg-color: var(--clr-global-selection-color);
493
+ --clr-stack-view-stack-block-expandable-hover: var(
494
+ --cds-alias-object-interaction-background-hover
495
+ );
496
+ --clr-stack-view-stack-block-content-text-color: inherit;
497
+ --clr-stack-view-stack-block-expanded-text-color: var(
498
+ --cds-global-typography-color-500
499
+ );
500
+ --clr-stack-view-stack-block-caret-color: var(--cds-global-typography-color-500);
501
+ /* Subnav */
502
+ --clr-subnav-bg-color: var(--cds-alias-object-container-background);
503
+ /* Tabs */
504
+ --clr-nav-box-shadow-color: var(--cds-alias-object-border-color);
505
+ --clr-nav-active-box-shadow-color: var(
506
+ --cds-alias-object-interaction-background-highlight
507
+ );
508
+ --clr-nav-active-bg-color: var(--cds-alias-object-interaction-background-active);
509
+ --clr-nav-hover-bg-color: var(--cds-alias-object-interaction-background-hover);
510
+ --clr-nav-link-color: var(--cds-alias-object-interaction-color);
511
+ --clr-nav-link-active-color: var(--cds-alias-object-interaction-color-active);
512
+ /* Timeline */
513
+ --clr-timeline-line-color: var(--cds-alias-object-border-color-shade);
514
+ --clr-timeline-step-header-color: var(
515
+ --cds-alias-status-neutral
516
+ );
517
+ --clr-timeline-step-title-color: var(--cds-alias-object-interaction-color);
518
+ --clr-timeline-step-description-color: var(--cds-global-typography-color-500);
519
+ --clr-timeline-incomplete-step-color: var(
520
+ --cds-alias-object-border-color-shade
521
+ );
522
+ --clr-timeline-current-step-color: var(
523
+ --cds-alias-object-interaction-background-highlight
524
+ );
525
+ --clr-timeline-success-step-color: var(--cds-alias-status-success);
526
+ --clr-timeline-error-step-color: var(--cds-alias-status-danger);
527
+ /* Toggles */
528
+ --clr-toggle-bg-color-off: var(--cds-alias-status-neutral);
529
+ --clr-toggle-bg-color-on: var(--cds-alias-status-success);
530
+ --clr-toggle-handle-bg-color: var(--cds-global-color-construction-50);
531
+ --clr-toggle-disabled-default-border-color: var(--cds-global-color-gray-400);
532
+ --clr-toggle-disabled-default-handle-color: var(--cds-global-color-construction-50);
533
+ --clr-toggle-disabled-off-border-color: var(--clr-toggle-disabled-default-border-color);
534
+ --clr-toggle-disabled-off-bg-color: var(--clr-toggle-disabled-default-handle-color);
535
+ --clr-toggle-disabled-off-handle-border-color: var(--clr-toggle-disabled-default-border-color);
536
+ --clr-toggle-disabled-on-border-color: var(--clr-toggle-disabled-default-border-color);
537
+ --clr-toggle-disabled-on-bg-color: var(--clr-toggle-disabled-default-border-color);
538
+ --clr-toggle-disabled-on-handle-border-color: var(--clr-toggle-disabled-default-handle-color);
539
+ /* Tooltips */
540
+ --clr-tooltip-background-color: var(--cds-global-color-gray-1000);
541
+ --clr-tooltip-color: var(--cds-global-color-construction-50);
542
+ /* Wizard */
543
+ --clr-wizard-main-bgcolor: var(--cds-alias-object-overlay-background);
544
+ --clr-wizard-sidenav-bgcolor: var(--cds-alias-object-container-background-tint);
545
+ --clr-wizard-main-textColor: var(--cds-global-typography-color-500);
546
+ --clr-wizard-sidenav-text: var(--cds-global-typography-color-500);
547
+ --clr-wizard-sidenav-text--active: var(--clr-global-on-selection-color);
548
+ --clr-wizard-title-text: var(--cds-global-typography-color-500);
549
+ --clr-wizard-stepnav-border-color: var(--cds-alias-object-border-color);
550
+ --clr-wizard-stepnav-border-color--active: var(--cds-alias-status-success);
551
+ --clr-wizard-stepnav-active-bgcolor: var(--clr-global-selection-color);
552
+ --clr-wizard-header-action-color: var(--cds-global-color-gray-600);
553
+ --clr-wizard-header-action-color--hovered: var(--cds-global-color-gray-1000);
554
+ --clr-wizard-step-nav-border-color: var(--cds-alias-object-border-color);
555
+ --clr-wizard-box-shadow-color: rgba(0, 0, 0, 0.2);
556
+ /* Tree View */
557
+ --clr-tree-node-caret-link-hover-color: var(
558
+ --cds-alias-object-interaction-color-hover
559
+ );
560
+ --clr-tree-link-hover-color: var(--cds-alias-object-interaction-background-hover);
561
+ --clr-tree-link-selection-color: var(--clr-global-selection-color);
562
+ --clr-tree-link-text-color: var(--cds-global-typography-color-500);
563
+ --clr-tree-node-caret-color: var(--cds-global-color-gray-500);
564
+ /* Vertical Nav */
565
+ --clr-vertical-nav-divider-color: var(--cds-alias-object-border-color);
566
+ --clr-vertical-nav-icon-active-color: var(--cds-alias-object-interaction-color);
567
+ --clr-vertical-nav-item-color: var(--cds-alias-object-interaction-color);
568
+ --clr-vertical-nav-item-active-color: var(
569
+ --cds-alias-object-interaction-color-active
570
+ );
571
+ --clr-vertical-nav-bg-color: var(--cds-alias-object-container-background-shade);
572
+ --clr-vertical-nav-active-bg-color: var(
573
+ --cds-alias-object-interaction-background-selected
574
+ );
575
+ --clr-vertical-nav-hover-bg-color: var(
576
+ --cds-alias-object-interaction-background-hover
577
+ );
578
+ --clr-vertical-nav-toggle-icon-color: var(--cds-alias-object-interaction-color);
579
+ --clr-vertical-nav-trigger-divider-border-color: var(
580
+ --cds-alias-object-border-color
581
+ );
582
+ /* Tables */
583
+ --clr-table-bgcolor: var(--cds-alias-object-container-background);
584
+ --clr-thead-bgcolor: var(--cds-alias-object-container-background-tint);
585
+ --clr-table-header-border-bottom-color: var(--cds-alias-object-border-color);
586
+ --clr-table-footer-border-top-color: var(--cds-alias-object-border-color);
587
+ --clr-table-border-color: var(--cds-alias-object-border-color);
588
+ --clr-tablerow-bordercolor: var(--cds-alias-object-border-color);
589
+ --clr-table-font-color: var(--cds-global-typography-color-500);
590
+ --clr-thead-color: var(--cds-global-typography-color-500);
591
+ /* Datagrid */
592
+ --clr-datagrid-font-color: var(--cds-global-typography-color-500);
593
+ --clr-datagrid-default-border-color: var(--cds-alias-object-border-color);
594
+ --clr-datagrid-icon-color: var(--cds-alias-object-interaction-color);
595
+ --clr-datagrid-row-hover: var(--cds-alias-object-interaction-background-hover);
596
+ --clr-datagrid-row-hover-font-color: var(--cds-global-typography-color-500);
597
+ --clr-datagrid-action-toggle: var(
598
+ --cds-alias-object-interaction-background-active
599
+ );
600
+ --clr-datagrid-pagination-btn-color: var(--cds-alias-object-interaction-color);
601
+ --clr-datagrid-pagination-btn-disabled-color: var(--cds-alias-status-disabled);
602
+ --clr-datagrid-pagination-input-border-color: var(--cds-alias-object-border-color);
603
+ --clr-datagrid-pagination-input-border-focus-color: var(--clr-color-action-400);
604
+ --clr-datagrid-popover-bg-color: var(--cds-alias-object-overlay-background);
605
+ --clr-datagrid-popover-border-color: var(--cds-alias-object-overlay-border-color);
606
+ --clr-datagrid-action-popover-hover-color: var(
607
+ --cds-alias-object-interaction-color-hover
608
+ );
609
+ --clr-datagrid-row-selected: var(--cds-global-typography-color-500);
610
+ --clr-datagrid-column-switch-header-font-color: var(--cds-global-color-gray-500);
611
+ --clr-datagrid-column-switch-header-font-hover-color: var(
612
+ --cds-alias-object-interaction-background-highlight
613
+ );
614
+ --clr-datagrid-detail-caret-icon-open-bg-color: var(
615
+ --cds-alias-object-interaction-background-highlight
616
+ );
617
+ --clr-datagrid-detail-caret-icon-open-icon-color: var(--cds-global-color-gray-0);
618
+ --clr-datagrid-placeholder-color: var(--cds-global-color-gray-700);
619
+ }
620
+ :root .btn:not([disabled]):hover,
621
+ :root .btn:not([disabled]):focus,
622
+ :root .btn:not([disabled]):active,
623
+ [cds-theme] .btn:not([disabled]):hover,
624
+ [cds-theme] .btn:not([disabled]):focus,
625
+ [cds-theme] .btn:not([disabled]):active {
626
+ filter: brightness(90%);
627
+ }
628
+ :root .btn.disabled,
629
+ :root .btn:disabled,
630
+ [cds-theme] .btn.disabled,
631
+ [cds-theme] .btn:disabled {
632
+ opacity: 1;
633
+ }