@inera/ids-design 7.2.2 → 8.0.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 (200) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +157 -11
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +275 -77
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +16 -10
  7. package/components/box-link/box-link-lit.js +1 -1
  8. package/components/box-link/box-link.css +16 -28
  9. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  10. package/components/breadcrumbs/breadcrumbs.css +11 -6
  11. package/components/button-group/button-group-lit.js +1 -1
  12. package/components/button-group/button-group.css +4 -0
  13. package/components/card/card-lit.js +1 -1
  14. package/components/card/card.css +162 -33
  15. package/components/carousel/carousel-item-lit.js +1 -1
  16. package/components/carousel/carousel-item.css +169 -7
  17. package/components/carousel/carousel-lit.js +1 -1
  18. package/components/carousel/carousel.css +18 -12
  19. package/components/data-table/data-table-lit.js +1 -1
  20. package/components/data-table/data-table.css +14 -6
  21. package/components/date-label/date-label-lit.js +1 -1
  22. package/components/date-label/date-label.css +35 -14
  23. package/components/dialog/dialog-lit.js +1 -1
  24. package/components/dialog/dialog.css +34 -39
  25. package/components/dropdown/dropdown-lit.js +1 -1
  26. package/components/dropdown/dropdown.css +87 -28
  27. package/components/footer-1177/footer-1177-lit.js +1 -1
  28. package/components/footer-1177/footer-1177.css +226 -121
  29. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  30. package/components/footer-1177-admin/footer-1177-admin.css +293 -140
  31. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  32. package/components/footer-1177-pro/footer-1177-pro.css +390 -104
  33. package/components/footer-inera/footer-inera-lit.js +1 -1
  34. package/components/footer-inera/footer-inera.css +280 -164
  35. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  36. package/components/footer-inera-admin/footer-inera-admin.css +339 -188
  37. package/components/form/error-message/error-message-lit.js +1 -1
  38. package/components/form/error-message/error-message.css +10 -6
  39. package/components/form/group/group-lit.js +1 -1
  40. package/components/form/group/group.css +148 -1
  41. package/components/form/range/range-lit.js +1 -1
  42. package/components/form/range/range.css +225 -2
  43. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  44. package/components/form/select-multiple/select-multiple.css +37 -33
  45. package/components/form/spinner/spinner-lit.js +1 -1
  46. package/components/form/spinner/spinner.css +6 -11
  47. package/components/global-alert/global-alert-lit.js +9 -0
  48. package/components/global-alert/global-alert.css +354 -0
  49. package/components/grid/container/container-lit.js +1 -1
  50. package/components/grid/container/container.css +2 -9
  51. package/components/header-1177/composite-header-1177.css +1105 -974
  52. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  53. package/components/header-1177/header-1177-avatar.css +406 -191
  54. package/components/header-1177/header-1177-item-lit.js +1 -1
  55. package/components/header-1177/header-1177-item.css +125 -75
  56. package/components/header-1177/header-1177-lit.js +1 -1
  57. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  58. package/components/header-1177/header-1177-menu-mobile.css +14 -9
  59. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  61. package/components/header-1177/header-1177-nav-item-mobile.css +107 -164
  62. package/components/header-1177/header-1177-nav-item.css +109 -88
  63. package/components/header-1177/header-1177-nav-lit.js +1 -1
  64. package/components/header-1177/header-1177-nav.css +100 -45
  65. package/components/header-1177/header-1177-region-picker-lit.d.ts +2 -0
  66. package/components/header-1177/header-1177-region-picker-lit.js +7 -0
  67. package/components/header-1177/header-1177-region-picker-mobile-lit.d.ts +2 -0
  68. package/components/header-1177/header-1177-region-picker-mobile-lit.js +9 -0
  69. package/components/header-1177/header-1177-region-picker-mobile.css +112 -0
  70. package/components/header-1177/header-1177-region-picker.css +107 -0
  71. package/components/header-1177/header-1177.css +125 -450
  72. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  73. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +170 -29
  75. package/components/header-1177-admin/header-1177-admin-avatar.css +490 -278
  76. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  77. package/components/header-1177-admin/header-1177-admin-item.css +131 -89
  78. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  79. package/components/header-1177-admin/header-1177-admin-menu-mobile-lit.js +7 -0
  80. package/components/header-1177-admin/header-1177-admin-menu-mobile.css +145 -0
  81. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  82. package/components/header-1177-admin/header-1177-admin-nav-item.css +163 -134
  83. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  84. package/components/header-1177-admin/header-1177-admin-nav.css +76 -47
  85. package/components/header-1177-admin/header-1177-admin.css +91 -285
  86. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  87. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +146 -74
  89. package/components/header-1177-pro/header-1177-pro-avatar.css +448 -275
  90. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  91. package/components/header-1177-pro/header-1177-pro-item.css +169 -103
  92. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  93. package/components/header-1177-pro/header-1177-pro-menu-mobile-lit.js +7 -0
  94. package/components/header-1177-pro/header-1177-pro-menu-mobile.css +146 -0
  95. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  96. package/components/header-1177-pro/header-1177-pro-nav-item.css +139 -122
  97. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  98. package/components/header-1177-pro/header-1177-pro-nav.css +75 -46
  99. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  100. package/components/header-1177-pro/header-1177-pro-region-picker-mobile-lit.js +9 -0
  101. package/components/header-1177-pro/header-1177-pro-region-picker-mobile.css +117 -0
  102. package/components/header-1177-pro/header-1177-pro-region-picker.css +38 -810
  103. package/components/header-1177-pro/header-1177-pro.css +140 -139
  104. package/components/header-inera/header-inera-item-lit.js +1 -1
  105. package/components/header-inera/header-inera-item.css +31 -21
  106. package/components/header-inera/header-inera-lit.js +1 -1
  107. package/components/header-inera/header-inera-menu-mobile-lit.d.ts +2 -0
  108. package/components/header-inera/header-inera-menu-mobile-lit.js +7 -0
  109. package/components/header-inera/header-inera-menu-mobile.css +136 -0
  110. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  111. package/components/header-inera/header-inera-nav-item.css +26 -23
  112. package/components/header-inera/header-inera-nav-lit.js +1 -1
  113. package/components/header-inera/header-inera-nav.css +11 -8
  114. package/components/header-inera/header-inera.css +50 -21
  115. package/components/header-inera-admin/composite-header-inera-admin.css +858 -245
  116. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  117. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  118. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +173 -44
  119. package/components/header-inera-admin/header-inera-admin-avatar.css +558 -100
  120. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  121. package/components/header-inera-admin/header-inera-admin-item.css +14 -7
  122. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  123. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.d.ts +2 -0
  124. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.js +7 -0
  125. package/components/header-inera-admin/header-inera-admin-menu-mobile.css +147 -0
  126. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  127. package/components/header-inera-admin/header-inera-admin-nav-item.css +28 -25
  128. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  129. package/components/header-inera-admin/header-inera-admin-nav.css +16 -16
  130. package/components/header-inera-admin/header-inera-admin.css +34 -24
  131. package/components/header-patient/header-patient-lit.js +1 -1
  132. package/components/header-patient/header-patient.css +166 -8
  133. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  134. package/components/mobile-menu/mobile-menu.css +340 -244
  135. package/components/navigation/content/navigation-content-lit.js +1 -1
  136. package/components/navigation/content/navigation-content.css +203 -16
  137. package/components/navigation/local/navigation-local-lit.js +1 -1
  138. package/components/navigation/local/navigation-local.css +37 -56
  139. package/components/notification-badge/notification-badge-lit.js +1 -1
  140. package/components/notification-badge/notification-badge.css +15 -13
  141. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  142. package/components/pagination/data-pagination/data-pagination.css +206 -44
  143. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  144. package/components/pagination/list-pagination/list-pagination.css +5 -5
  145. package/components/popover/popover-content-lit.js +1 -1
  146. package/components/popover/popover-content.css +262 -114
  147. package/components/progressbar/progressbar-lit.js +1 -1
  148. package/components/progressbar/progressbar.css +147 -4
  149. package/components/puff-list/puff-list-lit.js +1 -1
  150. package/components/puff-list/puff-list.css +258 -35
  151. package/components/region-icon/region-icon-lit.js +1 -1
  152. package/components/region-icon/region-icon.css +5 -5
  153. package/components/side-menu/side-menu-lit.js +1 -1
  154. package/components/side-menu/side-menu.css +6 -9
  155. package/components/side-panel/side-panel-lit.js +1 -1
  156. package/components/side-panel/side-panel.css +61 -26
  157. package/components/stepper/stepper-lit.js +1 -1
  158. package/components/stepper/stepper.css +170 -22
  159. package/components/table/table.css +6 -3
  160. package/components/tabs/tab-lit.js +1 -1
  161. package/components/tabs/tab-panel-lit.js +1 -1
  162. package/components/tabs/tab-panel.css +2 -0
  163. package/components/tabs/tab.css +26 -14
  164. package/components/tabs/tabs-lit.js +2 -2
  165. package/components/tabs/tabs.css +1 -1
  166. package/components/tag/tag-lit.js +1 -1
  167. package/components/tag/tag.css +10 -7
  168. package/components/tooltip/tooltip-lit.js +1 -1
  169. package/components/tooltip/tooltip.css +8 -5
  170. package/global/_partials.css +15 -0
  171. package/{themes/1177-pro/1177-pro.css → global/global.css} +3958 -3504
  172. package/global/icons/Inera-Design-Icons.eot +0 -0
  173. package/global/icons/Inera-Design-Icons.svg +9 -0
  174. package/global/icons/Inera-Design-Icons.ttf +0 -0
  175. package/global/icons/Inera-Design-Icons.woff +0 -0
  176. package/global/util/util.css +2745 -0
  177. package/package.json +1 -1
  178. package/reset.css +90 -0
  179. package/styles.css +8320 -0
  180. package/tokens/component-tokens.scss +86 -0
  181. package/tokens/themes/1177-admin-tokens.css +340 -263
  182. package/tokens/themes/1177-pro-tokens.css +340 -263
  183. package/tokens/themes/1177-tokens.css +340 -263
  184. package/tokens/themes/inera-admin-tokens.css +294 -252
  185. package/tokens/themes/inera-tokens.css +294 -252
  186. package/components/alert-global/alert-global-lit.js +0 -7
  187. package/components/alert-global/alert-global.css +0 -195
  188. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +0 -7
  189. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +0 -304
  190. package/components/header-inera/header-inera-nav-mobile-lit.js +0 -7
  191. package/components/header-inera/header-inera-nav-mobile.css +0 -126
  192. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +0 -7
  193. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +0 -126
  194. package/themes/1177/1177.css +0 -6196
  195. package/themes/inera/inera.css +0 -6220
  196. package/themes/inera-admin/inera-admin.css +0 -6293
  197. /package/components/{alert-global/alert-global-lit.d.ts → global-alert/global-alert-lit.d.ts} +0 -0
  198. /package/components/{header-1177-pro/header-1177-pro-nav-menu-mobile-lit.d.ts → header-1177-admin/header-1177-admin-menu-mobile-lit.d.ts} +0 -0
  199. /package/components/{header-inera-admin/header-inera-admin-nav-mobile-lit.d.ts → header-1177-pro/header-1177-pro-menu-mobile-lit.d.ts} +0 -0
  200. /package/components/{header-inera/header-inera-nav-mobile-lit.d.ts → header-1177-pro/header-1177-pro-region-picker-mobile-lit.d.ts} +0 -0
package/tokens/themes/1177-tokens.css CHANGED
@@ -1,17 +1,18 @@
1
- .ids--1177.ids--light,
2
- .ids--1177.ids--dark {
3
- --ids-palette-primary-30: #6a0032;
1
+ /* Autogenerated by src/style-dictionary/build.js */
2
+ .ids--1177.ids--light, .ids--1177.ids--dark {
3
+ --ids-palette-primary-30: #6a0032;
4
4
  --ids-palette-primary-35: #a00b36;
5
5
  --ids-palette-primary-40: #c12143;
6
6
  --ids-palette-primary-60: #da254c;
7
7
  --ids-palette-primary-90: #faeef0;
8
8
  --ids-palette-secondary-95: #faf8f6;
9
+ --ids-palette-accent-20: #273149;
9
10
  --ids-palette-accent-30: #3b4266;
10
11
  --ids-palette-accent-40: #396291;
11
12
  --ids-palette-accent-50: #166ed4;
12
13
  --ids-palette-accent-60: #79aeec;
13
- --ids-palette-accent-90: #c6d2df;
14
- --ids-palette-accent-95: #f1f1f5;
14
+ --ids-palette-accent-90: #e0e7ef;
15
+ --ids-palette-accent-95: #f8fafc;
15
16
  --ids-palette-neutral-10: #151515;
16
17
  --ids-palette-neutral-15: #252525;
17
18
  --ids-palette-neutral-20: #353535;
@@ -25,276 +26,352 @@
25
26
  --ids-palette-success-99: #eef8ee;
26
27
  --ids-palette-attention-40: #ffc100;
27
28
  --ids-palette-attention-95: #fff8e0;
28
- --ids-palette-error-35: #a00b36;
29
- --ids-palette-error-40: #c12143;
30
- --ids-palette-error-60: #da254c;
31
- --ids-palette-error-99: #faeef0;
29
+ --ids-palette-error-35: var(--ids-palette-primary-35);
30
+ --ids-palette-error-40: var(--ids-palette-primary-40);
31
+ --ids-palette-error-60: var(--ids-palette-primary-60);
32
+ --ids-palette-error-99: var(--ids-palette-primary-90);--ids-search-button-small-font-seize: 1.125rem;
33
+ --ids-search-button-small-line-height: 1.5rem;
34
+ --ids-input-height: var(--ids-48);
35
+ --ids-input-padding-x: var(--ids-20);
36
+ --ids-textarea-padding-x: var(--ids-20);
37
+ --ids-select-height: var(--ids-48);
38
+ --ids-select-padding-x: var(--ids-20);
39
+ --ids-search-button-small-padding-x: var(--ids-28);
40
+ --ids-search-button-small-padding-y: var(--ids-12);
41
+ --ids-color-light-background-primary: var(--ids-palette-primary-40);
42
+ --ids-color-light-border-primary: var(--ids-palette-primary-40);
43
+ --ids-color-light-text-primary: var(--ids-palette-primary-40);
44
+ --ids-color-light-text-primary-subtle: var(--ids-palette-primary-30);
45
+ --ids-color-light-text-on-primary: var(--ids-palette-neutral-100);
46
+ --ids-color-light-background-secondary: var(--ids-palette-primary-90);
47
+ --ids-color-light-text-secondary: var(--ids-palette-primary-30);
48
+ --ids-color-light-text-on-secondary: var(--ids-palette-neutral-20);
49
+ --ids-color-light-text-heading-m-xxl: var(--ids-palette-primary-40);
50
+ --ids-color-dark-background-primary: var(--ids-palette-neutral-20);
51
+ --ids-color-dark-border-primary: var(--ids-palette-primary-60);
52
+ --ids-color-dark-text-primary: var(--ids-palette-primary-60);
53
+ --ids-color-dark-text-primary-subtle: var(--ids-palette-neutral-90);
54
+ --ids-color-dark-text-on-primary: var(--ids-palette-primary-60);
55
+ --ids-color-dark-background-secondary: var(--ids-palette-neutral-15);
56
+ --ids-color-dark-text-secondary: var(--ids-palette-primary-90);
57
+ --ids-color-dark-text-on-secondary: var(--ids-palette-neutral-100);
58
+ --ids-color-dark-region-logo: var(--ids-palette-neutral-100);
59
+ --ids-color-light-region-logo: var(--ids-components-logotype-region-region-logo-citzen-light);
32
60
  }
33
-
34
61
  .ids--1177.ids--light {
35
- --ids-input-height: 3rem;
36
- --ids-input-padding-x: 1.25rem;
37
- --ids-textarea-padding-x: 1.25rem;
38
- --ids-select-height: 3rem;
39
- --ids-select-padding-x: 1.25rem;
40
- --ids-search-button-small-padding-x: 1.75rem;
41
- --ids-search-button-small-padding-y: 0.75rem;
42
- --ids-search-button-small-font-seize: 1.125rem;
43
- --ids-search-button-small-line-height: 1.5rem;
44
- --ids-font-family-primary: Open sans;
62
+ --ids-font-family-primary: Open sans;
45
63
  --ids-font-family-secondary: Inter;
46
- --ids-color-surface-background-default: #ffffff;
47
- --ids-color-surface-border-default: #808285;
48
- --ids-color-surface-text-on-default: #353535;
49
- --ids-color-surface-text-subtle-on-default: #636466;
50
- --ids-color-surface-background-elevated-1: #ffffff;
51
- --ids-color-surface-border-elevated-1: #dadbdc;
52
- --ids-color-surface-text-on-elevated-1: #353535;
53
- --ids-color-surface-text-subtle-on-elevated-1: #636466;
54
- --ids-color-surface-background-elevated-1-hover: #ffffff;
55
- --ids-color-surface-background-elevated-1-active: #ffffff;
56
- --ids-color-surface-background-elevated-2: #ffffff;
57
- --ids-color-surface-border-elevated-2: #dadbdc;
58
- --ids-color-surface-text-on-elevated-2: #353535;
59
- --ids-color-surface-background-alternative: #faf8f6;
60
- --ids-color-surface-text-on-alternative: #353535;
61
- --ids-color-surface-background-alternative-elevated-1: #faf8f6;
62
- --ids-color-brand-background-primary: #c12143;
63
- --ids-color-brand-border-primary: #c12143;
64
- --ids-color-brand-text-primary: #c12143;
65
- --ids-color-brand-text-primary-subtle: #6a0032;
66
- --ids-color-brand-text-on-primary: #ffffff;
67
- --ids-color-brand-background-secondary: #faeef0;
68
- --ids-color-brand-text-secondary: #6a0032;
69
- --ids-color-brand-text-on-secondary: #353535;
70
- --ids-color-brand-region-logo: #ffffff;
71
- --ids-color-navigation-background-default: #c12143;
72
- --ids-color-navigation-border-default: #a00b36;
73
- --ids-color-navigation-text-default: #a00b36;
74
- --ids-color-navigation-icon-default: #c12143;
75
- --ids-color-navigation-text-on-default: #ffffff;
76
- --ids-color-navigation-background-hover: #6a0032;
77
- --ids-color-navigation-border-hover: #6a0032;
78
- --ids-color-navigation-text-hover: #6a0032;
79
- --ids-color-navigation-text-on-hover: #ffffff;
80
- --ids-color-navigation-background-active: #6a0032;
81
- --ids-color-navigation-border-active: #6a0032;
82
- --ids-color-navigation-text-active: #6a0032;
83
- --ids-color-navigation-text-on-active: #ffffff;
84
- --ids-color-navigation-text-on-secondary: #353535;
85
- --ids-color-interactive-background-default: #396291;
86
- --ids-color-interactive-border-default: #396291;
87
- --ids-color-interactive-text-default: #396291;
88
- --ids-color-interactive-text-on-default: #ffffff;
89
- --ids-color-interactive-background-hover: #3b4266;
90
- --ids-color-interactive-border-hover: #3b4266;
91
- --ids-color-interactive-text-hover: #3b4266;
92
- --ids-color-interactive-text-on-hover: #ffffff;
93
- --ids-color-interactive-background-active: #3b4266;
94
- --ids-color-interactive-border-active: #3b4266;
95
- --ids-color-interactive-text-active: #3b4266;
96
- --ids-color-interactive-text-on-active: #ffffff;
97
- --ids-color-interactive-background-disabled: #ffffff;
98
- --ids-color-interactive-border-disabled: #808285;
99
- --ids-color-interactive-text-disabled: #636466;
100
- --ids-color-interactive-text-on-disabled: #636466;
101
- --ids-color-interactive-focus-outline: #636466;
102
- --ids-color-interactive-focus-outline-on: #ffffff;
103
- --ids-color-feedback-background-information: #f1f1f5;
104
- --ids-color-feedback-border-information: #396291;
105
- --ids-color-feedback-text-on-information: #353535;
106
- --ids-color-feedback-text-information: #3b4266;
107
- --ids-color-feedback-background-success: #eef8ee;
108
- --ids-color-feedback-border-success: #419002;
109
- --ids-color-feedback-text-on-success: #353535;
110
- --ids-color-feedback-text-success: #395428;
111
- --ids-color-feedback-background-attention: #fff8e0;
112
- --ids-color-feedback-border-attention: #808285;
113
- --ids-color-feedback-text-on-attention: #353535;
114
- --ids-color-feedback-text-attention: #636466;
115
- --ids-color-feedback-background-error: #faeef0;
116
- --ids-color-feedback-border-error: #c12143;
117
- --ids-color-feedback-text-on-error: #353535;
118
- --ids-color-feedback-text-error: #a00b36;
119
- --ids-color-feedback-background-notification: #c12143;
120
- --ids-color-feedback-text-on-notification: #ffffff;
121
- --ids-color-form-background-default: #f1f1f5;
122
- --ids-color-form-border-default: #396291;
123
- --ids-color-form-text-on-default: #353535;
124
- --ids-color-form-placeholder-text-on-default: #636466;
125
- --ids-color-form-background-light-default: #ffffff;
126
- --ids-color-form-border-light-default: #396291;
127
- --ids-color-form-text-on-light-default: #353535;
128
- --ids-color-form-placeholder-text-on-light-default: #636466;
129
- --ids-color-form-background-active: #f1f1f5;
130
- --ids-color-form-border-active: #396291;
131
- --ids-color-form-text-on-active: #353535;
132
- --ids-color-form-placeholder-text-on-active: #636466;
133
- --ids-color-form-background-light-active: #ffffff;
134
- --ids-color-form-border-light-active: #396291;
135
- --ids-color-form-text-on-light-active: #353535;
136
- --ids-color-form-placeholder-text-on-light-active: #636466;
137
- --ids-color-form-background-disabled: #f1f2f2;
138
- --ids-color-form-border-disabled: #636466;
139
- --ids-color-form-text-on-light-disabled: #636466;
140
- --ids-color-form-placeholder-text-on-light-disabled: #636466;
141
- --ids-color-form-background-light-disabled: #f1f2f2;
142
- --ids-color-form-border-light-disabled: #636466;
143
- --ids-color-form-text-on-disabled: #636466;
144
- --ids-color-form-placeholder-text-on-disabled: #636466;
145
- --ids-color-form-background-invalid: #faeef0;
146
- --ids-color-form-border-invalid: #c12143;
147
- --ids-color-form-text-on-invalid: #353535;
148
- --ids-color-form-placeholder-text-on-invalid: #636466;
149
- --ids-color-form-message-background-invalid: #ffffff;
150
- --ids-color-form-message-border-invalid: #c12143;
151
- --ids-color-form-message-text-on-invalid: #c12143;
152
- --ids-color-form-background-light-invalid: #faeef0;
153
- --ids-color-form-border-light-invalid: #c12143;
154
- --ids-color-form-text-on-light-invalid: #353535;
155
- --ids-color-form-placeholder-text-on-light-invalid: #636466;
156
- --ids-color-heading-text-xxl: #c12143;
157
- --ids-color-heading-text-xl: #c12143;
158
- --ids-color-heading-text-l: #c12143;
159
- --ids-color-heading-text-m: #c12143;
160
- --ids-color-heading-text-s: #353535;
161
- --ids-color-heading-text-xs: #353535;
64
+ --ids-color-surface-shadow-elevated-1: #000000;
65
+ --ids-color-surface-shadow-elevated-2: #000000;
162
66
  --ids-border-radius-primary: 0.625rem;
163
67
  --ids-border-radius-secondary: 0.3125rem;
164
68
  --ids-border-width-general: 0.0625rem;
165
69
  --ids-border-width-invalid: 0.125rem;
70
+ --ids-shadow-position-y-elevated-1-effect-1: 1.875rem;
71
+ --ids-shadow-position-y-elevated-1-effect-2: 1.0625rem;
72
+ --ids-shadow-position-y-elevated-1-effect-3: 0.4375rem;
73
+ --ids-shadow-position-y-elevated-1-effect-4: 0.125rem;
74
+ --ids-shadow-position-y-elevated-2-effect-1: 3.875rem;
75
+ --ids-shadow-position-y-elevated-2-effect-2: 2.1875rem;
76
+ --ids-shadow-position-y-elevated-2-effect-3: 1rem;
77
+ --ids-shadow-position-y-elevated-2-effect-4: 0.25rem;
78
+ --ids-shadow-blur-elevated-1-effect-1: 0.75rem;
79
+ --ids-shadow-blur-elevated-1-effect-2: 0.625rem;
80
+ --ids-shadow-blur-elevated-1-effect-3: 0.4375rem;
81
+ --ids-shadow-blur-elevated-1-effect-4: 0.25rem;
82
+ --ids-shadow-blur-elevated-2-effect-1: 1.5625rem;
83
+ --ids-shadow-blur-elevated-2-effect-2: 1.3125rem;
84
+ --ids-shadow-blur-elevated-2-effect-3: 1rem;
85
+ --ids-shadow-blur-elevated-2-effect-4: 0.5625rem;
86
+ --ids-shadow-opacity-elevated-1-effect-1: 0.125rem;
87
+ --ids-shadow-opacity-elevated-1-effect-2: 0.375rem;
88
+ --ids-shadow-opacity-elevated-1-effect-3: 0.625rem;
89
+ --ids-shadow-opacity-elevated-1-effect-4: 0.75rem;
90
+ --ids-shadow-opacity-elevated-2-effect-1: 0.125rem;
91
+ --ids-shadow-opacity-elevated-2-effect-2: 0.4375rem;
92
+ --ids-shadow-opacity-elevated-2-effect-3: 0.75rem;
93
+ --ids-shadow-opacity-elevated-2-effect-4: 0.875rem;
94
+ --ids-color-surface-background-default: var(--ids-palette-neutral-100);
95
+ --ids-color-surface-border-default: var(--ids-palette-neutral-50);
96
+ --ids-color-surface-text-on-default: var(--ids-palette-neutral-20);
97
+ --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-40);
98
+ --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-100);
99
+ --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-90);
100
+ --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-20);
101
+ --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-40);
102
+ --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-100);
103
+ --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-100);
104
+ --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-100);
105
+ --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-90);
106
+ --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-20);
107
+ --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
108
+ --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-20);
109
+ --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
110
+ --ids-color-navigation-background-default: var(--ids-palette-primary-40);
111
+ --ids-color-navigation-border-default: var(--ids-palette-primary-35);
112
+ --ids-color-navigation-text-default: var(--ids-palette-primary-35);
113
+ --ids-color-navigation-icon-default: var(--ids-palette-primary-40);
114
+ --ids-color-navigation-text-on-default: var(--ids-palette-neutral-100);
115
+ --ids-color-navigation-background-hover: var(--ids-palette-primary-30);
116
+ --ids-color-navigation-border-hover: var(--ids-palette-primary-30);
117
+ --ids-color-navigation-text-hover: var(--ids-palette-primary-30);
118
+ --ids-color-navigation-text-on-hover: var(--ids-palette-neutral-100);
119
+ --ids-color-navigation-background-active: var(--ids-palette-primary-30);
120
+ --ids-color-navigation-border-active: var(--ids-palette-primary-30);
121
+ --ids-color-navigation-text-active: var(--ids-palette-primary-30);
122
+ --ids-color-navigation-text-on-active: var(--ids-palette-neutral-100);
123
+ --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-20);
124
+ --ids-color-interactive-background-default: var(--ids-palette-accent-40);
125
+ --ids-color-interactive-border-default: var(--ids-palette-accent-40);
126
+ --ids-color-interactive-text-default: var(--ids-palette-accent-40);
127
+ --ids-color-interactive-text-on-default: var(--ids-palette-neutral-100);
128
+ --ids-color-interactive-background-hover: var(--ids-palette-accent-30);
129
+ --ids-color-interactive-border-hover: var(--ids-palette-accent-30);
130
+ --ids-color-interactive-text-hover: var(--ids-palette-accent-30);
131
+ --ids-color-interactive-text-on-hover: var(--ids-palette-neutral-100);
132
+ --ids-color-interactive-background-active: var(--ids-palette-accent-20);
133
+ --ids-color-interactive-border-active: var(--ids-palette-accent-20);
134
+ --ids-color-interactive-text-active: var(--ids-palette-accent-20);
135
+ --ids-color-interactive-text-on-active: var(--ids-palette-neutral-100);
136
+ --ids-color-interactive-background-disabled: var(--ids-palette-neutral-100);
137
+ --ids-color-interactive-border-disabled: var(--ids-palette-neutral-50);
138
+ --ids-color-interactive-text-disabled: var(--ids-palette-neutral-40);
139
+ --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
140
+ --ids-color-interactive-focus-outline: var(--ids-palette-neutral-40);
141
+ --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-100);
142
+ --ids-color-feedback-background-information: var(--ids-palette-accent-95);
143
+ --ids-color-feedback-border-information: var(--ids-palette-accent-40);
144
+ --ids-color-feedback-text-on-information: var(--ids-palette-neutral-20);
145
+ --ids-color-feedback-text-information: var(--ids-palette-accent-30);
146
+ --ids-color-feedback-background-success: var(--ids-palette-success-99);
147
+ --ids-color-feedback-border-success: var(--ids-palette-success-40);
148
+ --ids-color-feedback-text-on-success: var(--ids-palette-neutral-20);
149
+ --ids-color-feedback-text-success: var(--ids-palette-success-30);
150
+ --ids-color-feedback-background-attention: var(--ids-palette-attention-95);
151
+ --ids-color-feedback-border-attention: var(--ids-palette-neutral-50);
152
+ --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-20);
153
+ --ids-color-feedback-text-attention: var(--ids-palette-neutral-40);
154
+ --ids-color-feedback-background-error: var(--ids-palette-primary-90);
155
+ --ids-color-feedback-text-on-error: var(--ids-palette-neutral-20);
156
+ --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
157
+ --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
158
+ --ids-color-form-background-default: var(--ids-palette-accent-95);
159
+ --ids-color-form-border-default: var(--ids-palette-accent-40);
160
+ --ids-color-form-text-on-default: var(--ids-palette-neutral-20);
161
+ --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-40);
162
+ --ids-color-form-background-light-default: var(--ids-palette-neutral-100);
163
+ --ids-color-form-border-light-default: var(--ids-palette-accent-40);
164
+ --ids-color-form-text-on-light-default: var(--ids-palette-neutral-20);
165
+ --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-40);
166
+ --ids-color-form-background-hover: var(--ids-palette-accent-90);
167
+ --ids-color-form-border-hover: var(--ids-palette-accent-30);
168
+ --ids-color-form-text-on-hover: var(--ids-palette-neutral-20);
169
+ --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-40);
170
+ --ids-color-form-background-light-hover: var(--ids-palette-neutral-100);
171
+ --ids-color-form-border-light-hover: var(--ids-palette-accent-30);
172
+ --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-20);
173
+ --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-40);
174
+ --ids-color-form-background-active: var(--ids-palette-accent-95);
175
+ --ids-color-form-border-active: var(--ids-palette-accent-40);
176
+ --ids-color-form-text-on-active: var(--ids-palette-neutral-20);
177
+ --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-40);
178
+ --ids-color-form-background-light-active: var(--ids-palette-neutral-100);
179
+ --ids-color-form-border-light-active: var(--ids-palette-accent-40);
180
+ --ids-color-form-text-on-light-active: var(--ids-palette-neutral-20);
181
+ --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
182
+ --ids-color-form-background-disabled: var(--ids-palette-neutral-99);
183
+ --ids-color-form-border-disabled: var(--ids-palette-neutral-40);
184
+ --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-40);
185
+ --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-40);
186
+ --ids-color-form-background-light-disabled: var(--ids-palette-neutral-99);
187
+ --ids-color-form-border-light-disabled: var(--ids-palette-neutral-40);
188
+ --ids-color-form-text-on-disabled: var(--ids-palette-neutral-40);
189
+ --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-40);
190
+ --ids-color-form-background-invalid: var(--ids-palette-primary-90);
191
+ --ids-color-form-text-on-invalid: var(--ids-palette-neutral-20);
192
+ --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-40);
193
+ --ids-color-form-message-background-invalid: var(--ids-palette-neutral-100);
194
+ --ids-color-form-background-light-invalid: var(--ids-palette-primary-90);
195
+ --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-20);
196
+ --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
197
+ --ids-color-brand-background-primary: var(--ids-color-light-background-primary);
198
+ --ids-color-brand-border-primary: var(--ids-color-light-border-primary);
199
+ --ids-color-brand-text-primary: var(--ids-color-light-text-primary);
200
+ --ids-color-brand-text-primary-subtle: var(--ids-color-light-text-primary-subtle);
201
+ --ids-color-brand-text-on-primary: var(--ids-color-light-text-on-primary);
202
+ --ids-color-brand-background-secondary: var(--ids-color-light-background-secondary);
203
+ --ids-color-brand-text-secondary: var(--ids-color-light-text-secondary);
204
+ --ids-color-brand-text-on-secondary: var(--ids-color-light-text-on-secondary);
205
+ --ids-color-feedback-border-error: var(--ids-palette-error-40);
206
+ --ids-color-feedback-text-error: var(--ids-palette-error-35);
207
+ --ids-color-form-border-invalid: var(--ids-palette-error-40);
208
+ --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
209
+ --ids-color-form-message-text-on-invalid: var(--ids-palette-error-40);
210
+ --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
211
+ --ids-color-heading-text-xxl: var(--ids-color-light-text-heading-m-xxl);
212
+ --ids-color-heading-text-xl: var(--ids-color-light-text-heading-m-xxl);
213
+ --ids-color-heading-text-l: var(--ids-color-light-text-heading-m-xxl);
214
+ --ids-color-heading-text-m: var(--ids-color-light-text-heading-m-xxl);
215
+ --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
216
+ --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
217
+ --ids-color-brand-region-logo: var(--ids-color-light-region-logo);
166
218
  }
167
219
 
168
220
  .ids--1177.ids--dark {
169
- --ids-input-height: 3rem;
170
- --ids-input-padding-x: 1.25rem;
171
- --ids-textarea-padding-x: 1.25rem;
172
- --ids-select-height: 3rem;
173
- --ids-select-padding-x: 1.25rem;
174
- --ids-search-button-small-padding-x: 1.75rem;
175
- --ids-search-button-small-padding-y: 0.75rem;
176
- --ids-search-button-small-font-seize: 1.125rem;
177
- --ids-search-button-small-line-height: 1.5rem;
178
- --ids-font-family-primary: Open sans;
221
+ --ids-font-family-primary: Open sans;
179
222
  --ids-font-family-secondary: Inter;
180
- --ids-color-surface-background-default: #151515;
181
- --ids-color-surface-border-default: #808285;
182
- --ids-color-surface-text-on-default: #ffffff;
183
- --ids-color-surface-text-subtle-on-default: #f1f2f2;
184
- --ids-color-surface-background-elevated-1: #252525;
185
- --ids-color-surface-border-elevated-1: #808285;
186
- --ids-color-surface-text-on-elevated-1: #ffffff;
187
- --ids-color-surface-text-subtle-on-elevated-1: #f1f2f2;
188
- --ids-color-surface-background-elevated-1-hover: #353535;
189
- --ids-color-surface-background-elevated-1-active: #353535;
190
- --ids-color-surface-background-elevated-2: #353535;
191
- --ids-color-surface-border-elevated-2: #808285;
192
- --ids-color-surface-text-on-elevated-2: #ffffff;
193
- --ids-color-surface-background-alternative: #151515;
194
- --ids-color-surface-text-on-alternative: #ffffff;
195
- --ids-color-surface-background-alternative-elevated-1: #252525;
196
- --ids-color-brand-background-primary: #353535;
197
- --ids-color-brand-border-primary: #da254c;
198
- --ids-color-brand-text-primary: #da254c;
199
- --ids-color-brand-text-primary-subtle: #dadbdc;
200
- --ids-color-brand-text-on-primary: #da254c;
201
- --ids-color-brand-background-secondary: #252525;
202
- --ids-color-brand-text-secondary: #faeef0;
203
- --ids-color-brand-text-on-secondary: #ffffff;
204
- --ids-color-brand-region-logo: #ffffff;
205
- --ids-color-navigation-background-default: #151515;
206
- --ids-color-navigation-border-default: #faeef0;
207
- --ids-color-navigation-text-default: #faeef0;
208
- --ids-color-navigation-icon-default: #faeef0;
209
- --ids-color-navigation-text-on-default: #faeef0;
210
- --ids-color-navigation-background-hover: #da254c;
211
- --ids-color-navigation-border-hover: #da254c;
212
- --ids-color-navigation-text-hover: #ffffff;
213
- --ids-color-navigation-text-on-hover: #faeef0;
214
- --ids-color-navigation-background-active: #da254c;
215
- --ids-color-navigation-border-active: #da254c;
216
- --ids-color-navigation-text-active: #ffffff;
217
- --ids-color-navigation-text-on-active: #faeef0;
218
- --ids-color-navigation-text-on-secondary: #ffffff;
219
- --ids-color-interactive-background-default: #79aeec;
220
- --ids-color-interactive-border-default: #c6d2df;
221
- --ids-color-interactive-text-default: #79aeec;
222
- --ids-color-interactive-text-on-default: #151515;
223
- --ids-color-interactive-background-hover: #ffffff;
224
- --ids-color-interactive-border-hover: #ffffff;
225
- --ids-color-interactive-text-hover: #ffffff;
226
- --ids-color-interactive-text-on-hover: #3b4266;
227
- --ids-color-interactive-background-active: #ffffff;
228
- --ids-color-interactive-border-active: #ffffff;
229
- --ids-color-interactive-text-active: #ffffff;
230
- --ids-color-interactive-text-on-active: #3b4266;
231
- --ids-color-interactive-background-disabled: #dadbdc;
232
- --ids-color-interactive-border-disabled: #808285;
233
- --ids-color-interactive-text-disabled: #dadbdc;
234
- --ids-color-interactive-text-on-disabled: #636466;
235
- --ids-color-interactive-focus-outline: #f1f2f2;
236
- --ids-color-interactive-focus-outline-on: #353535;
237
- --ids-color-feedback-background-information: #252525;
238
- --ids-color-feedback-border-information: #166ed4;
239
- --ids-color-feedback-text-on-information: #ffffff;
240
- --ids-color-feedback-text-information: #166ed4;
241
- --ids-color-feedback-background-success: #252525;
242
- --ids-color-feedback-border-success: #419002;
243
- --ids-color-feedback-text-on-success: #ffffff;
244
- --ids-color-feedback-text-success: #419002;
245
- --ids-color-feedback-background-attention: #252525;
246
- --ids-color-feedback-border-attention: #ffc100;
247
- --ids-color-feedback-text-on-attention: #ffffff;
248
- --ids-color-feedback-text-attention: #ffc100;
249
- --ids-color-feedback-background-error: #252525;
250
- --ids-color-feedback-border-error: #c12143;
251
- --ids-color-feedback-text-on-error: #ffffff;
252
- --ids-color-feedback-text-error: #da254c;
253
- --ids-color-feedback-background-notification: #da254c;
254
- --ids-color-feedback-text-on-notification: #ffffff;
255
- --ids-color-form-background-default: #151515;
256
- --ids-color-form-border-default: #c6d2df;
257
- --ids-color-form-text-on-default: #ffffff;
258
- --ids-color-form-placeholder-text-on-default: #f1f2f2;
259
- --ids-color-form-background-light-default: #151515;
260
- --ids-color-form-border-light-default: #c6d2df;
261
- --ids-color-form-text-on-light-default: #ffffff;
262
- --ids-color-form-placeholder-text-on-light-default: #f1f2f2;
263
- --ids-color-form-background-active: #151515;
264
- --ids-color-form-border-active: #ffffff;
265
- --ids-color-form-text-on-active: #ffffff;
266
- --ids-color-form-placeholder-text-on-active: #f1f2f2;
267
- --ids-color-form-background-light-active: #151515;
268
- --ids-color-form-border-light-active: #ffffff;
269
- --ids-color-form-text-on-light-active: #ffffff;
270
- --ids-color-form-placeholder-text-on-light-active: #f1f2f2;
271
- --ids-color-form-background-disabled: #151515;
272
- --ids-color-form-border-disabled: #dadbdc;
273
- --ids-color-form-text-on-light-disabled: #f1f2f2;
274
- --ids-color-form-placeholder-text-on-light-disabled: #f1f2f2;
275
- --ids-color-form-background-light-disabled: #151515;
276
- --ids-color-form-border-light-disabled: #dadbdc;
277
- --ids-color-form-text-on-disabled: #f1f2f2;
278
- --ids-color-form-placeholder-text-on-disabled: #f1f2f2;
279
- --ids-color-form-background-invalid: #151515;
280
- --ids-color-form-border-invalid: #c12143;
281
- --ids-color-form-text-on-invalid: #ffffff;
282
- --ids-color-form-placeholder-text-on-invalid: #f1f2f2;
283
- --ids-color-form-message-background-invalid: #353535;
284
- --ids-color-form-message-border-invalid: #da254c;
285
- --ids-color-form-message-text-on-invalid: #ffffff;
286
- --ids-color-form-background-light-invalid: #151515;
287
- --ids-color-form-border-light-invalid: #da254c;
288
- --ids-color-form-text-on-light-invalid: #ffffff;
289
- --ids-color-form-placeholder-text-on-light-invalid: #f1f2f2;
290
- --ids-color-heading-text-xxl: #ffffff;
291
- --ids-color-heading-text-xl: #ffffff;
292
- --ids-color-heading-text-l: #ffffff;
293
- --ids-color-heading-text-m: #ffffff;
294
- --ids-color-heading-text-s: #ffffff;
295
- --ids-color-heading-text-xs: #ffffff;
223
+ --ids-color-surface-shadow-elevated-1: #ffffff;
224
+ --ids-color-surface-shadow-elevated-2: #ffffff;
296
225
  --ids-border-radius-primary: 0.625rem;
297
226
  --ids-border-radius-secondary: 0.3125rem;
298
227
  --ids-border-width-general: 0.125rem;
299
228
  --ids-border-width-invalid: 0.125rem;
300
- }
229
+ --ids-shadow-position-y-elevated-1-effect-1: 1.875rem;
230
+ --ids-shadow-position-y-elevated-1-effect-2: 1.0625rem;
231
+ --ids-shadow-position-y-elevated-1-effect-3: 0.4375rem;
232
+ --ids-shadow-position-y-elevated-1-effect-4: 0.125rem;
233
+ --ids-shadow-position-y-elevated-2-effect-1: 3.875rem;
234
+ --ids-shadow-position-y-elevated-2-effect-2: 2.1875rem;
235
+ --ids-shadow-position-y-elevated-2-effect-3: 1rem;
236
+ --ids-shadow-position-y-elevated-2-effect-4: 0.25rem;
237
+ --ids-shadow-blur-elevated-1-effect-1: 0.75rem;
238
+ --ids-shadow-blur-elevated-1-effect-2: 0.625rem;
239
+ --ids-shadow-blur-elevated-1-effect-3: 0.4375rem;
240
+ --ids-shadow-blur-elevated-1-effect-4: 0.25rem;
241
+ --ids-shadow-blur-elevated-2-effect-1: 1.5625rem;
242
+ --ids-shadow-blur-elevated-2-effect-2: 1.3125rem;
243
+ --ids-shadow-blur-elevated-2-effect-3: 1rem;
244
+ --ids-shadow-blur-elevated-2-effect-4: 0.5625rem;
245
+ --ids-shadow-opacity-elevated-1-effect-1: 0.125rem;
246
+ --ids-shadow-opacity-elevated-1-effect-2: 0.375rem;
247
+ --ids-shadow-opacity-elevated-1-effect-3: 0.625rem;
248
+ --ids-shadow-opacity-elevated-1-effect-4: 0.75rem;
249
+ --ids-shadow-opacity-elevated-2-effect-1: 0.125rem;
250
+ --ids-shadow-opacity-elevated-2-effect-2: 0.4375rem;
251
+ --ids-shadow-opacity-elevated-2-effect-3: 0.75rem;
252
+ --ids-shadow-opacity-elevated-2-effect-4: 0.875rem;
253
+ --ids-color-surface-background-default: var(--ids-palette-neutral-10);
254
+ --ids-color-surface-border-default: var(--ids-palette-neutral-50);
255
+ --ids-color-surface-text-on-default: var(--ids-palette-neutral-100);
256
+ --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-99);
257
+ --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-15);
258
+ --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-50);
259
+ --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-100);
260
+ --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-99);
261
+ --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-20);
262
+ --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-20);
263
+ --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-20);
264
+ --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-50);
265
+ --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-100);
266
+ --ids-color-surface-background-alternative: var(--ids-palette-neutral-10);
267
+ --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-100);
268
+ --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-15);
269
+ --ids-color-navigation-background-default: var(--ids-palette-neutral-10);
270
+ --ids-color-navigation-border-default: var(--ids-palette-primary-90);
271
+ --ids-color-navigation-text-default: var(--ids-palette-primary-90);
272
+ --ids-color-navigation-icon-default: var(--ids-palette-primary-90);
273
+ --ids-color-navigation-text-on-default: var(--ids-palette-primary-90);
274
+ --ids-color-navigation-background-hover: var(--ids-palette-primary-60);
275
+ --ids-color-navigation-border-hover: var(--ids-palette-primary-60);
276
+ --ids-color-navigation-text-hover: var(--ids-palette-neutral-100);
277
+ --ids-color-navigation-text-on-hover: var(--ids-palette-primary-90);
278
+ --ids-color-navigation-background-active: var(--ids-palette-primary-60);
279
+ --ids-color-navigation-border-active: var(--ids-palette-primary-60);
280
+ --ids-color-navigation-text-active: var(--ids-palette-neutral-100);
281
+ --ids-color-navigation-text-on-active: var(--ids-palette-primary-90);
282
+ --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-100);
283
+ --ids-color-interactive-background-default: var(--ids-palette-accent-60);
284
+ --ids-color-interactive-border-default: var(--ids-palette-accent-90);
285
+ --ids-color-interactive-text-default: var(--ids-palette-accent-60);
286
+ --ids-color-interactive-text-on-default: var(--ids-palette-neutral-10);
287
+ --ids-color-interactive-background-hover: var(--ids-palette-neutral-100);
288
+ --ids-color-interactive-border-hover: var(--ids-palette-neutral-100);
289
+ --ids-color-interactive-text-hover: var(--ids-palette-neutral-100);
290
+ --ids-color-interactive-text-on-hover: var(--ids-palette-accent-30);
291
+ --ids-color-interactive-background-active: var(--ids-palette-neutral-100);
292
+ --ids-color-interactive-border-active: var(--ids-palette-neutral-100);
293
+ --ids-color-interactive-text-active: var(--ids-palette-neutral-100);
294
+ --ids-color-interactive-text-on-active: var(--ids-palette-accent-30);
295
+ --ids-color-interactive-background-disabled: var(--ids-palette-neutral-90);
296
+ --ids-color-interactive-border-disabled: var(--ids-palette-neutral-50);
297
+ --ids-color-interactive-text-disabled: var(--ids-palette-neutral-90);
298
+ --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
299
+ --ids-color-interactive-focus-outline: var(--ids-palette-neutral-99);
300
+ --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-99);
301
+ --ids-color-feedback-background-information: var(--ids-palette-neutral-15);
302
+ --ids-color-feedback-border-information: var(--ids-palette-accent-50);
303
+ --ids-color-feedback-text-on-information: var(--ids-palette-neutral-100);
304
+ --ids-color-feedback-text-information: var(--ids-palette-accent-50);
305
+ --ids-color-feedback-background-success: var(--ids-palette-neutral-15);
306
+ --ids-color-feedback-border-success: var(--ids-palette-success-40);
307
+ --ids-color-feedback-text-on-success: var(--ids-palette-neutral-100);
308
+ --ids-color-feedback-text-success: var(--ids-palette-success-40);
309
+ --ids-color-feedback-background-attention: var(--ids-palette-neutral-15);
310
+ --ids-color-feedback-border-attention: var(--ids-palette-attention-40);
311
+ --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
312
+ --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
313
+ --ids-color-feedback-background-error: var(--ids-palette-neutral-15);
314
+ --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
315
+ --ids-color-feedback-background-notification: var(--ids-palette-primary-60);
316
+ --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
317
+ --ids-color-form-background-default: var(--ids-palette-neutral-10);
318
+ --ids-color-form-border-default: var(--ids-palette-accent-90);
319
+ --ids-color-form-text-on-default: var(--ids-palette-neutral-100);
320
+ --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-99);
321
+ --ids-color-form-background-light-default: var(--ids-palette-neutral-10);
322
+ --ids-color-form-border-light-default: var(--ids-palette-accent-90);
323
+ --ids-color-form-text-on-light-default: var(--ids-palette-neutral-100);
324
+ --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
325
+ --ids-color-form-background-hover: var(--ids-palette-neutral-15);
326
+ --ids-color-form-border-hover: var(--ids-palette-neutral-100);
327
+ --ids-color-form-text-on-hover: var(--ids-palette-neutral-100);
328
+ --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-99);
329
+ --ids-color-form-background-light-hover: var(--ids-palette-neutral-15);
330
+ --ids-color-form-border-light-hover: var(--ids-palette-accent-90);
331
+ --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-100);
332
+ --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-99);
333
+ --ids-color-form-background-active: var(--ids-palette-neutral-10);
334
+ --ids-color-form-border-active: var(--ids-palette-neutral-100);
335
+ --ids-color-form-text-on-active: var(--ids-palette-neutral-100);
336
+ --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-99);
337
+ --ids-color-form-background-light-active: var(--ids-palette-neutral-10);
338
+ --ids-color-form-border-light-active: var(--ids-palette-neutral-100);
339
+ --ids-color-form-text-on-light-active: var(--ids-palette-neutral-100);
340
+ --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-99);
341
+ --ids-color-form-background-disabled: var(--ids-palette-neutral-10);
342
+ --ids-color-form-border-disabled: var(--ids-palette-neutral-90);
343
+ --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-99);
344
+ --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-99);
345
+ --ids-color-form-background-light-disabled: var(--ids-palette-neutral-10);
346
+ --ids-color-form-border-light-disabled: var(--ids-palette-neutral-90);
347
+ --ids-color-form-text-on-disabled: var(--ids-palette-neutral-99);
348
+ --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-99);
349
+ --ids-color-form-background-invalid: var(--ids-palette-neutral-10);
350
+ --ids-color-form-text-on-invalid: var(--ids-palette-neutral-100);
351
+ --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-99);
352
+ --ids-color-form-message-background-invalid: var(--ids-palette-neutral-20);
353
+ --ids-color-form-message-text-on-invalid: var(--ids-palette-neutral-100);
354
+ --ids-color-form-background-light-invalid: var(--ids-palette-neutral-10);
355
+ --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-100);
356
+ --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-99);
357
+ --ids-color-brand-background-primary: var(--ids-color-dark-background-primary);
358
+ --ids-color-brand-border-primary: var(--ids-color-dark-border-primary);
359
+ --ids-color-brand-text-primary: var(--ids-color-dark-text-primary);
360
+ --ids-color-brand-text-primary-subtle: var(--ids-color-dark-text-primary-subtle);
361
+ --ids-color-brand-text-on-primary: var(--ids-color-dark-text-on-primary);
362
+ --ids-color-brand-background-secondary: var(--ids-color-dark-background-secondary);
363
+ --ids-color-brand-text-secondary: var(--ids-color-dark-text-secondary);
364
+ --ids-color-brand-text-on-secondary: var(--ids-color-dark-text-on-secondary);
365
+ --ids-color-brand-region-logo: var(--ids-color-dark-region-logo);
366
+ --ids-color-feedback-border-error: var(--ids-palette-error-40);
367
+ --ids-color-feedback-text-error: var(--ids-palette-error-60);
368
+ --ids-color-form-border-invalid: var(--ids-palette-error-40);
369
+ --ids-color-form-message-border-invalid: var(--ids-palette-error-60);
370
+ --ids-color-form-border-light-invalid: var(--ids-palette-error-60);
371
+ --ids-color-heading-text-xxl: var(--ids-color-surface-text-on-default);
372
+ --ids-color-heading-text-xl: var(--ids-color-surface-text-on-default);
373
+ --ids-color-heading-text-l: var(--ids-color-surface-text-on-default);
374
+ --ids-color-heading-text-m: var(--ids-color-surface-text-on-default);
375
+ --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
376
+ --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
377
+ }