nve-designsystem 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/chunks/chunk.2PCBEMQZ.js +163 -226
  2. package/chunks/chunk.36O46B5H.js +15 -15
  3. package/chunks/chunk.4TUIT776.js +78 -96
  4. package/chunks/chunk.5JY5FUCG.js +965 -1245
  5. package/chunks/chunk.5P45LHIX.js +668 -96
  6. package/chunks/chunk.6CTB5ZDJ.js +107 -100
  7. package/chunks/chunk.B4BZKR24.js +29 -39
  8. package/chunks/chunk.D5YQDJ7X.js +122 -166
  9. package/chunks/chunk.EA437WHD.js +5 -5
  10. package/chunks/chunk.GI7VDIWX.js +14 -15
  11. package/chunks/chunk.GMYPQTFK.js +18 -20
  12. package/chunks/chunk.HVTXQL7M.js +191 -215
  13. package/chunks/chunk.IKV4VH3T.js +18 -16
  14. package/chunks/chunk.IVVHNXMC.js +26 -27
  15. package/chunks/chunk.JHOXTQXA.js +65 -74
  16. package/chunks/chunk.JXOKFADN.js +63 -90
  17. package/chunks/chunk.K7JGTRV7.js +24 -23
  18. package/chunks/chunk.KPLQLAWP.js +132 -147
  19. package/chunks/chunk.LD4M4QGE.js +61 -74
  20. package/chunks/chunk.MSKEYBDI.js +53 -71
  21. package/chunks/chunk.NYIIDP5N.js +39 -45
  22. package/chunks/chunk.RWUUFNUL.js +91 -114
  23. package/chunks/chunk.SAPQLUO4.js +249 -228
  24. package/chunks/chunk.SI4ACBFK.js +139 -5
  25. package/chunks/chunk.TP2GB2HO.js +361 -460
  26. package/chunks/chunk.UDWRA64J.js +185 -223
  27. package/chunks/chunk.URTPIBTY.js +119 -151
  28. package/chunks/chunk.VESXC477.js +63 -66
  29. package/chunks/chunk.XA43ZQPC.js +198 -313
  30. package/chunks/chunk.XQ2OKYYA.js +25 -26
  31. package/chunks/chunk.XZNBUGX7.js +6 -6
  32. package/chunks/chunk.YHLNUJ7P.js +93 -116
  33. package/chunks/chunk.ZH2AND3P.js +340 -399
  34. package/chunks/chunk.ZL53POKZ.js +61 -156
  35. package/chunks/chunk.js +20 -0
  36. package/chunks/class-map.js +49 -45
  37. package/chunks/decorate.js +105 -0
  38. package/chunks/directive-helpers.js +5 -7
  39. package/chunks/if-defined.js +5 -5
  40. package/chunks/lit.js +525 -0
  41. package/chunks/live.js +24 -24
  42. package/chunks/nve-alert.component.js +163 -0
  43. package/chunks/nve-carousel-item.component.js +36 -0
  44. package/chunks/nve-carousel.component.js +41 -0
  45. package/chunks/nve-checkbox-group.component.js +114 -0
  46. package/chunks/nve-checkbox.component.js +28 -0
  47. package/chunks/nve-dialog.component.js +39 -0
  48. package/chunks/nve-divider.component.js +23 -0
  49. package/chunks/nve-drawer.component.js +40 -0
  50. package/chunks/nve-dropdown.component.js +83 -0
  51. package/chunks/nve-input.component.js +80 -0
  52. package/chunks/nve-label.component.js +89 -0
  53. package/chunks/nve-menu-item.component.js +35 -0
  54. package/chunks/nve-menu.component.js +17 -0
  55. package/chunks/nve-option.component.js +27 -0
  56. package/chunks/nve-popup.component.js +15 -0
  57. package/chunks/nve-radio-button.component.js +20 -0
  58. package/chunks/nve-radio-group.component.js +78 -0
  59. package/chunks/nve-radio.component.js +18 -0
  60. package/chunks/nve-select.component.js +58 -0
  61. package/chunks/nve-skeleton.component.js +20 -0
  62. package/chunks/nve-spinner.component.js +23 -0
  63. package/chunks/nve-tooltip.component.js +20 -0
  64. package/chunks/nve-warning-level.component.js +57 -0
  65. package/chunks/ref.js +75 -84
  66. package/chunks/shoelace.js +10006 -0
  67. package/chunks/static-html.js +27 -0
  68. package/chunks/unsafe-html.js +24 -20
  69. package/chunks/updateInvalidProperty.js +7 -7
  70. package/chunks/watch.js +20 -20
  71. package/components/nve-accordion/nve-accordion.component.js +24 -30
  72. package/components/nve-accordion-item/nve-accordion-item.component.js +30 -64
  73. package/components/nve-accordion-item/nve-accordion-item.styles.js +5 -5
  74. package/components/nve-alert/nve-alert.component.js +2 -227
  75. package/components/nve-alert/nve-alert.styles.js +45 -27
  76. package/components/nve-badge/nve-badge.component.js +41 -45
  77. package/components/nve-badge/nve-badge.styles.js +33 -31
  78. package/components/nve-button/nve-button.component.d.ts +110 -10
  79. package/components/nve-button/nve-button.component.js +146 -39
  80. package/components/nve-button/nve-button.styles.js +214 -157
  81. package/components/nve-carousel/nve-carousel.component.js +2 -47
  82. package/components/nve-carousel/nve-carousel.styles.js +6 -6
  83. package/components/nve-carousel-item/nve-carousel-item.component.js +2 -40
  84. package/components/nve-carousel-item/nve-carousel-item.styles.js +5 -5
  85. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.component.js +44 -54
  86. package/components/nve-carousel-thumbnail/nve-carousel-thumbnail.styles.js +5 -5
  87. package/components/nve-checkbox/nve-checkbox.component.js +2 -34
  88. package/components/nve-checkbox/nve-checkbox.styles.js +7 -7
  89. package/components/nve-checkbox-group/nve-checkbox-group.component.js +2 -152
  90. package/components/nve-checkbox-group/nve-checkbox-group.styles.js +5 -5
  91. package/components/nve-combobox/nve-combobox.component.js +222 -440
  92. package/components/nve-combobox/nve-combobox.styles.js +6 -6
  93. package/components/nve-darkmode-switch/nve-darkmode-switch.component.js +32 -38
  94. package/components/nve-dialog/nve-dialog-styles.js +6 -6
  95. package/components/nve-dialog/nve-dialog.component.js +2 -54
  96. package/components/nve-divider/nve-divider.component.js +2 -30
  97. package/components/nve-drawer/nve-drawer.component.js +2 -44
  98. package/components/nve-drawer/nve-drawer.styles.js +6 -6
  99. package/components/nve-dropdown/nve-dropdown.component.js +2 -79
  100. package/components/nve-dropdown/nve-dropdown.styles.js +5 -5
  101. package/components/nve-heading/nve-heading.component.d.ts +29 -0
  102. package/components/nve-heading/nve-heading.component.js +45 -0
  103. package/components/nve-heading/nve-heading.styles.d.ts +2 -0
  104. package/components/nve-heading/nve-heading.styles.js +41 -0
  105. package/components/nve-icon/nve-icon.component.js +145 -164
  106. package/components/nve-icon/nve-icon.styles.js +11 -6
  107. package/components/nve-icon/offline-icons.js +16 -13
  108. package/components/nve-input/nve-input.component.js +2 -100
  109. package/components/nve-input/nve-input.styles.js +5 -5
  110. package/components/nve-label/nve-label.component.js +2 -115
  111. package/components/nve-label/nve-label.styles.js +5 -5
  112. package/components/nve-link-card/nve-link-card.component.d.ts +5 -2
  113. package/components/nve-link-card/nve-link-card.component.js +44 -80
  114. package/components/nve-link-card/nve-link-card.styles.js +71 -66
  115. package/components/nve-menu/nve-menu.component.js +2 -22
  116. package/components/nve-menu/nve-menu.styles.js +5 -5
  117. package/components/nve-menu-item/nve-menu-item.component.js +2 -43
  118. package/components/nve-menu-item/nve-menu-item.styles.js +7 -7
  119. package/components/nve-message-card/nve-message-card.component.js +61 -91
  120. package/components/nve-message-card/nve-message-card.styles.js +24 -27
  121. package/components/nve-navigation-card/nve-navigation-card.component.d.ts +52 -0
  122. package/components/nve-navigation-card/nve-navigation-card.component.js +60 -0
  123. package/components/nve-navigation-card/nve-navigation-card.styles.d.ts +2 -0
  124. package/components/nve-navigation-card/nve-navigation-card.styles.js +112 -0
  125. package/components/nve-option/nve-option.component.js +2 -41
  126. package/components/nve-option/nve-option.styles.js +5 -5
  127. package/components/nve-paragraph/nve-paragraph.component.d.ts +26 -0
  128. package/components/nve-paragraph/nve-paragraph.component.js +26 -0
  129. package/components/nve-paragraph/nve-paragraph.styles.d.ts +2 -0
  130. package/components/nve-paragraph/nve-paragraph.styles.js +105 -0
  131. package/components/nve-popup/nve-popup.component.js +2 -22
  132. package/components/nve-radio/nve-radio.component.js +2 -23
  133. package/components/nve-radio/nve-radio.styles.js +5 -5
  134. package/components/nve-radio-button/nve-radio-button.component.js +2 -25
  135. package/components/nve-radio-button/nve-radio-button.styles.js +5 -5
  136. package/components/nve-radio-group/nve-radio-group.component.js +2 -119
  137. package/components/nve-radio-group/nve-radio-group.styles.js +5 -5
  138. package/components/nve-relative-time/nve-relative-time.component.js +21 -56
  139. package/components/nve-relative-time/nve-relative-time.styles.js +5 -5
  140. package/components/nve-select/nve-select.component.js +2 -80
  141. package/components/nve-select/nve-select.styles.js +5 -5
  142. package/components/nve-skeleton/nve-skeleton.component.js +2 -27
  143. package/components/nve-skeleton/nve-skeleton.styles.js +5 -5
  144. package/components/nve-spinner/nve-spinner.component.js +2 -31
  145. package/components/nve-stepper/nve-step/nve-step.component.js +113 -173
  146. package/components/nve-stepper/nve-step/nve-step.styles.js +12 -12
  147. package/components/nve-stepper/nve-stepper-mobile.component.js +37 -49
  148. package/components/nve-stepper/nve-stepper-mobile.styles.js +7 -7
  149. package/components/nve-stepper/nve-stepper.component.js +94 -139
  150. package/components/nve-stepper/nve-stepper.styles.js +5 -5
  151. package/components/nve-switch/nve-switch.component.js +75 -107
  152. package/components/nve-switch/nve-switch.styles.js +7 -7
  153. package/components/nve-tab/nve-tab.component.js +30 -42
  154. package/components/nve-tab/nve-tab.styles.js +7 -7
  155. package/components/nve-tab-group/nve-tab-group.component.js +180 -260
  156. package/components/nve-tab-group/nve-tab-group.styles.js +5 -5
  157. package/components/nve-tab-panel/nve-tab-panel.component.js +21 -31
  158. package/components/nve-tab-panel/nve-tab-panel.styles.js +5 -5
  159. package/components/nve-tag/nve-tag.component.d.ts +3 -3
  160. package/components/nve-tag/nve-tag.component.js +71 -72
  161. package/components/nve-tag/nve-tag.styles.js +23 -22
  162. package/components/nve-textarea/nve-textarea.component.d.ts +3 -1
  163. package/components/nve-textarea/nve-textarea.component.js +112 -173
  164. package/components/nve-textarea/nve-textarea.styles.js +10 -5
  165. package/components/nve-tooltip/nve-tooltip.component.js +2 -30
  166. package/components/nve-tooltip/nve-tooltip.styles.js +5 -5
  167. package/components/nve-warning-level/nve-warning-level.component.js +2 -78
  168. package/components/nve-warning-level/nve-warning-level.styles.js +7 -7
  169. package/css/global.css +13 -55
  170. package/css/nve.css +1048 -393
  171. package/css/nve_dark.css +406 -305
  172. package/css/rme.css +1050 -395
  173. package/css/rme_dark.css +408 -307
  174. package/css/shoelace-styles.css +539 -0
  175. package/css/varsom.css +1046 -391
  176. package/css/varsom_dark.css +404 -303
  177. package/custom-elements.json +2905 -12389
  178. package/fonts/LICENSE.txt +37 -0
  179. package/fonts/SourceSans3-VariableFont_wght.woff2 +0 -0
  180. package/interfaces/NveComponent.interface.js +0 -1
  181. package/nve-designsystem.d.ts +5 -0
  182. package/nve-designsystem.js +46 -86
  183. package/package.json +26 -8
  184. package/registerIcons/systemLibraryCustomization.js +23 -91
  185. package/vite-env.d.js +0 -1
  186. package/chunks/chunk.3RPBFEDE.js +0 -162
  187. package/chunks/chunk.JCXLDPQF.js +0 -225
  188. package/chunks/chunk.JQBT7BOV.js +0 -8446
  189. package/chunks/chunk.MAQXLKQ7.js +0 -598
  190. package/chunks/lit-element.js +0 -508
  191. package/chunks/property.js +0 -37
  192. package/chunks/query.js +0 -13
  193. package/chunks/state.js +0 -7
  194. package/chunks/static.js +0 -26
  195. package/nve-designsystem.css +0 -1
  196. package/vscode.css-custom-data.json +0 -621
  197. package/vscode.html-custom-data.json +0 -2354
package/css/rme.css CHANGED
@@ -4,12 +4,12 @@
4
4
 
5
5
  @import './global.css';
6
6
  :root {
7
- --color-shades-brand-100: #eceffe;
8
- --color-shades-brand-150: #dde2f8;
9
- --color-shades-brand-200: #c7ceef;
10
- --color-shades-brand-250: #afbae9;
11
- --color-shades-brand-300: #8092db;
12
- --color-shades-brand-400: #5872d0;
7
+ --color-shades-brand-100: #cfd6fc;
8
+ --color-shades-brand-150: #bbc5f1;
9
+ --color-shades-brand-200: #a0ace4;
10
+ --color-shades-brand-250: #8f9ee0;
11
+ --color-shades-brand-300: #7084d6;
12
+ --color-shades-brand-400: #546fcf;
13
13
  --color-shades-brand-500: #3451b7;
14
14
  --color-shades-brand-600: #2b4399;
15
15
  --color-shades-brand-700: #24387f;
@@ -19,7 +19,17 @@
19
19
  --color-shades-brand-950: #101838;
20
20
  --color-shades-brand-999: #0b1128;
21
21
  --color-shades-brand-000: #fffffff;
22
- --color-shades-brand-050: #f5f7ff;
22
+ --color-shades-brand-050: #d6deff;
23
+ --color-shades-accent-100: #adbafb;
24
+ --color-shades-accent-200: #91a1f3;
25
+ --color-shades-accent-300: #768adb;
26
+ --color-shades-accent-400: #6079d2;
27
+ --color-shades-accent-500: #4461ca;
28
+ --color-shades-accent-600: #2f49a7;
29
+ --color-shades-accent-700: #213273;
30
+ --color-shades-accent-800: #1e2e66;
31
+ --color-shades-accent-900: #19254c;
32
+ --color-shades-accent-000: #bdc8ff;
23
33
  --color-shades-grey-100: #edeff3;
24
34
  --color-shades-grey-150: #e0e4eb;
25
35
  --color-shades-grey-200: #c2cad6;
@@ -28,180 +38,204 @@
28
38
  --color-shades-grey-500: #758ba3;
29
39
  --color-shades-grey-600: #516579;
30
40
  --color-shades-grey-700: #405163;
31
- --color-shades-grey-800: #303d4c;
41
+ --color-shades-grey-800: #2b3445;
32
42
  --color-shades-grey-850: #1d2834;
33
43
  --color-shades-grey-900: #141e29;
34
44
  --color-shades-grey-950: #0f1926;
35
45
  --color-shades-grey-999: #0d0d0e;
46
+ --color-shades-grey-999-040: rgba(13, 13, 14, 0.4);
47
+ --color-shades-grey-999-080: rgba(13, 13, 14, 0.8);
36
48
  --color-shades-grey-000: #ffffff;
37
49
  --color-shades-grey-050: #f6f7f9;
38
- --color-shades-red-100: #ffc2c2;
39
- --color-shades-red-150: #ffa8a8;
40
- --color-shades-red-200: #ff9494;
41
- --color-shades-red-300: #ff7575;
42
- --color-shades-red-400: #ff5757;
43
- --color-shades-red-500: #ff3131;
44
- --color-shades-red-600: #ea2020;
45
- --color-shades-red-700: #cc0000;
46
- --color-shades-red-800: #bc0303;
47
- --color-shades-red-850: #a80303;
48
- --color-shades-red-900: #8f0a0a;
49
- --color-shades-red-950: #6b0000;
50
- --color-shades-red-999: #540000;
51
- --color-shades-red-000: #ffebee;
52
- --color-shades-red-050: #ffd8de;
53
- --color-shades-yellow-100: #fff4d1;
54
- --color-shades-yellow-150: #ffedb8;
55
- --color-shades-yellow-200: #ffe8a5;
56
- --color-shades-yellow-300: #ffe087;
57
- --color-shades-yellow-400: #ffd867;
58
- --color-shades-yellow-500: #ffd046;
59
- --color-shades-yellow-600: #ecbf38;
60
- --color-shades-yellow-700: #daad2a;
61
- --color-shades-yellow-800: #c79c1c;
62
- --color-shades-yellow-850: #be9315;
63
- --color-shades-yellow-900: #b58a0e;
64
- --color-shades-yellow-950: #ab8207;
65
- --color-shades-yellow-999: #a27900;
66
- --color-shades-yellow-000: #fff9e9;
67
- --color-shades-yellow-050: #fff5d9;
68
- --color-shades-blue-100: #ceeaff;
69
- --color-shades-blue-150: #a8daff;
70
- --color-shades-blue-200: #91d0ff;
71
- --color-shades-blue-300: #65bdff;
72
- --color-shades-blue-400: #38a9ff;
73
- --color-shades-blue-500: #008ffb;
74
- --color-shades-blue-600: #0f81fa;
75
- --color-shades-blue-700: #1e6fdc;
76
- --color-shades-blue-800: #0668b1;
77
- --color-shades-blue-850: #044b81;
78
- --color-shades-blue-900: #034272;
79
- --color-shades-blue-950: #0f3970;
80
- --color-shades-blue-999: #0b2951;
81
- --color-shades-blue-000: #e6f4ff;
82
- --color-shades-blue-050: #d5edff;
83
- --color-shades-green-100: #e8fce8;
84
- --color-shades-green-150: #cbf9cb;
85
- --color-shades-green-200: #8af0a1;
86
- --color-shades-green-300: #97f2a8;
87
- --color-shades-green-400: #8af0a1;
88
- --color-shades-green-500: #6bf198;
89
- --color-shades-green-600: #57ce7f;
90
- --color-shades-green-700: #43ab66;
91
- --color-shades-green-800: #00814b;
92
- --color-shades-green-850: #247740;
93
- --color-shades-green-900: #1a6533;
94
- --color-shades-green-950: #004126;
95
- --color-shades-green-999: #00301c;
96
- --color-shades-green-000: #f6fff9;
97
- --color-shades-green-050: #f0fef5;
98
- --color-shades-orange-100: #ffe3c2;
99
- --color-shades-orange-150: #ffdaae;
100
- --color-shades-orange-200: #ffc98a;
101
- --color-shades-orange-300: #ffb186;
102
- --color-shades-orange-400: #ff9a24;
103
- --color-shades-orange-500: #ff833e;
104
- --color-shades-orange-600: #e87332;
105
- --color-shades-orange-700: #d16325;
106
- --color-shades-orange-800: #b95219;
107
- --color-shades-orange-850: #ae4a13;
108
- --color-shades-orange-900: #a2420c;
109
- --color-shades-orange-950: #973a06;
110
- --color-shades-orange-999: #8b3200;
111
- --color-shades-orange-000: #fff6f1;
112
- --color-shades-orange-050: #ffecd6;
113
- --color-shades-varsom-blue-100: #a6d8ee;
114
- --color-shades-varsom-blue-150: #7ec4e2;
115
- --color-shades-varsom-blue-200: #43a9d5;
116
- --color-shades-varsom-blue-300: #2c96c4;
117
- --color-shades-varsom-blue-400: #0e89be;
118
- --color-shades-varsom-blue-500: #006b99;
119
- --color-shades-varsom-blue-600: #005c85;
120
- --color-shades-varsom-blue-700: #005175;
121
- --color-shades-varsom-blue-800: #00425f;
122
- --color-shades-varsom-blue-850: #00364e;
123
- --color-shades-varsom-blue-900: #003147;
124
- --color-shades-varsom-blue-950: #002738;
125
- --color-shades-varsom-blue-999: #00131c;
126
- --color-shades-varsom-blue-000: #eff8fc;
127
- --color-shades-varsom-blue-050: #c8eaf9;
128
- --color-shades-teal-100: #e2f3f9;
129
- --color-shades-teal-150: #d3edf6;
130
- --color-shades-teal-200: #c4e7f3;
131
- --color-shades-teal-300: #a7dbec;
132
- --color-shades-teal-400: #89cfe6;
133
- --color-shades-teal-500: #6cc3e0;
134
- --color-shades-teal-600: #58a1b9;
135
- --color-shades-teal-700: #437f92;
136
- --color-shades-teal-800: #2f5c6c;
137
- --color-shades-teal-850: #254b58;
138
- --color-shades-teal-900: #1a3a45;
139
- --color-shades-teal-950: #102931;
140
- --color-shades-teal-999: #06181e;
141
- --color-shades-teal-000: #ffffff;
142
- --color-shades-teal-050: #f0f9fc;
143
- --color-shades-purple-100: #ece9fc;
144
- --color-shades-purple-150: #e2ddfa;
145
- --color-shades-purple-200: #d9d2f9;
146
- --color-shades-purple-300: #c5bcf5;
147
- --color-shades-purple-400: #b2a5f2;
148
- --color-shades-purple-500: #9f8fef;
149
- --color-shades-purple-600: #8475ce;
150
- --color-shades-purple-700: #685aad;
151
- --color-shades-purple-800: #4d408d;
152
- --color-shades-purple-850: #3f337c;
153
- --color-shades-purple-900: #31256c;
154
- --color-shades-purple-950: #24185b;
155
- --color-shades-purple-999: #160b4b;
156
- --color-shades-purple-000: #ffffff;
157
- --color-shades-purple-050: #f5f4fd;
158
- --color-shades-lime-100: #eaf4da;
159
- --color-shades-lime-150: #dfeec8;
160
- --color-shades-lime-200: #d4e9b6;
161
- --color-shades-lime-300: #bfdd91;
162
- --color-shades-lime-400: #a9d26d;
163
- --color-shades-lime-500: #94c748;
164
- --color-shades-lime-600: #769f3a;
165
- --color-shades-lime-700: #59772b;
166
- --color-shades-lime-800: #3b501d;
167
- --color-shades-lime-850: #2c3c16;
168
- --color-shades-lime-900: #1e280e;
169
- --color-shades-lime-950: #0f1407;
170
- --color-shades-lime-999: #000000;
171
- --color-shades-lime-000: #ffffff;
172
- --color-shades-lime-050: #f4f9ed;
173
- --color-shades-magenta-100: #fae3f1;
174
- --color-shades-magenta-150: #f8d5eb;
175
- --color-shades-magenta-200: #f5c7e4;
176
- --color-shades-magenta-300: #f1acd6;
177
- --color-shades-magenta-400: #ec90c9;
178
- --color-shades-magenta-500: #e774bb;
179
- --color-shades-magenta-600: #c25e9c;
180
- --color-shades-magenta-700: #9c497c;
181
- --color-shades-magenta-800: #77335d;
182
- --color-shades-magenta-850: #64284d;
183
- --color-shades-magenta-900: #511e3d;
184
- --color-shades-magenta-950: #3f132e;
185
- --color-shades-magenta-999: #2c081e;
186
- --color-shades-magenta-000: #ffffff;
187
- --color-shades-magenta-050: #fdf1f8;
188
- --color-shades-neutralgrey-100: #edeef0;
189
- --color-shades-neutralgrey-150: #e4e5e7;
190
- --color-shades-neutralgrey-200: #c9cbcf;
191
- --color-shades-neutralgrey-300: #b7babf;
192
- --color-shades-neutralgrey-400: #9fa3a9;
193
- --color-shades-neutralgrey-500: #878c94;
194
- --color-shades-neutralgrey-600: #60656c;
195
- --color-shades-neutralgrey-700: #515459;
196
- --color-shades-neutralgrey-800: #3c3f44;
197
- --color-shades-neutralgrey-850: #292a2c;
198
- --color-shades-neutralgrey-900: #1b1c1e;
199
- --color-shades-neutralgrey-950: #0d0d0e;
200
- --color-shades-neutralgrey-999: #0d0d0e;
201
- --color-shades-neutralgrey-000: #ffffff;
202
- --color-shades-neutralgrey-050: #f7f7f8;
50
+ --color-shades-data-color-a-100: #b0bbe8;
51
+ --color-shades-data-color-a-150: #8799de;
52
+ --color-shades-data-color-a-250: #7084d7;
53
+ --color-shades-data-color-a-300: #6077d2;
54
+ --color-shades-data-color-a-600: #3752b3;
55
+ --color-shades-data-color-a-800: #283a81;
56
+ --color-shades-data-color-a-950: #121936;
57
+ --color-shades-data-color-a-000: #dfe4f6;
58
+ --color-shades-data-color-a-300-005: rgba(88, 112, 208, 0.02);
59
+ --color-shades-data-color-a-300-015: rgba(88, 112, 208, 0.15);
60
+ --color-shades-data-color-b-200: #ffb657;
61
+ --color-shades-data-color-b-400: #ff9914;
62
+ --color-shades-data-color-b-500: #d67900;
63
+ --color-shades-data-color-b-600: #bc6c2f;
64
+ --color-shades-data-color-b-800: #905527;
65
+ --color-shades-data-color-b-900: #683e1c;
66
+ --color-shades-data-color-c-400: #b4c87e;
67
+ --color-shades-data-color-c-500: #97b34d;
68
+ --color-shades-data-color-c-600: #7f9640;
69
+ --color-shades-data-color-c-800: #647632;
70
+ --color-shades-data-color-c-900: #526029;
71
+ --color-shades-data-color-d-400: #57c7b4;
72
+ --color-shades-data-color-d-500: #3db8a3;
73
+ --color-shades-data-color-d-600: #349d8b;
74
+ --color-shades-data-color-d-800: #2b8274;
75
+ --color-shades-data-color-d-900: #246b5f;
76
+ --color-shades-data-color-e-100: #e99b9b;
77
+ --color-shades-data-color-e-200: #e27979;
78
+ --color-shades-data-color-e-300: #da5858;
79
+ --color-shades-data-color-e-400: #c02a2a;
80
+ --color-shades-data-color-e-500: #7d1c1c;
81
+ --color-shades-data-color-f-600: #9f65b8;
82
+ --color-shades-data-color-f-800: #874aa1;
83
+ --color-shades-data-color-g-600: #d289b6;
84
+ --color-shades-data-color-g-800: #c76ba3;
85
+ --color-shades-functional-blue-100: #ceeaff;
86
+ --color-shades-functional-blue-150: #a8daff;
87
+ --color-shades-functional-blue-200: #91d0ff;
88
+ --color-shades-functional-blue-300: #65bdff;
89
+ --color-shades-functional-blue-400: #38a9ff;
90
+ --color-shades-functional-blue-500: #008ffb;
91
+ --color-shades-functional-blue-600: #0f81fa;
92
+ --color-shades-functional-blue-700: #1d6dd7;
93
+ --color-shades-functional-blue-800: #2061b6;
94
+ --color-shades-functional-blue-850: #184886;
95
+ --color-shades-functional-blue-900: #163f74;
96
+ --color-shades-functional-blue-950: #153661;
97
+ --color-shades-functional-blue-999: #142843;
98
+ --color-shades-functional-blue-000: #e5f4ff;
99
+ --color-shades-functional-blue-050: #d5edff;
100
+ --color-shades-functional-red-100: #ffc2c2;
101
+ --color-shades-functional-red-150: #ffa8a8;
102
+ --color-shades-functional-red-200: #ff9494;
103
+ --color-shades-functional-red-300: #ff7575;
104
+ --color-shades-functional-red-400: #ff5757;
105
+ --color-shades-functional-red-500: #ff3131;
106
+ --color-shades-functional-red-600: #e81c1c;
107
+ --color-shades-functional-red-700: #c41c1c;
108
+ --color-shades-functional-red-800: #b02121;
109
+ --color-shades-functional-red-850: #972626;
110
+ --color-shades-functional-red-900: #7a2929;
111
+ --color-shades-functional-red-950: #581d1d;
112
+ --color-shades-functional-red-999: #411616;
113
+ --color-shades-functional-red-000: #ffebee;
114
+ --color-shades-functional-red-050: #ffd8de;
115
+ --color-shades-functional-orange-100: #ffe3c2;
116
+ --color-shades-functional-orange-150: #ffd9ad;
117
+ --color-shades-functional-orange-200: #ffc98a;
118
+ --color-shades-functional-orange-300: #ffb35c;
119
+ --color-shades-functional-orange-400: #ff9a24;
120
+ --color-shades-functional-orange-500: #ff8d0a;
121
+ --color-shades-functional-orange-600: #f47c06;
122
+ --color-shades-functional-orange-700: #dc6c09;
123
+ --color-shades-functional-orange-800: #bd570a;
124
+ --color-shades-functional-orange-850: #af4e0d;
125
+ --color-shades-functional-orange-900: #9d4615;
126
+ --color-shades-functional-orange-950: #88431b;
127
+ --color-shades-functional-orange-999: #54301c;
128
+ --color-shades-functional-orange-000: #fff8f0;
129
+ --color-shades-functional-orange-050: #ffecd6;
130
+ --color-shades-functional-yellow-100: #fff4d1;
131
+ --color-shades-functional-yellow-150: #ffedb8;
132
+ --color-shades-functional-yellow-200: #ffe8a5;
133
+ --color-shades-functional-yellow-300: #ffe087;
134
+ --color-shades-functional-yellow-400: #ffd867;
135
+ --color-shades-functional-yellow-500: #ffd046;
136
+ --color-shades-functional-yellow-600: #ecbf38;
137
+ --color-shades-functional-yellow-700: #dcae28;
138
+ --color-shades-functional-yellow-800: #bf9722;
139
+ --color-shades-functional-yellow-850: #b08c21;
140
+ --color-shades-functional-yellow-900: #a88324;
141
+ --color-shades-functional-yellow-950: #977726;
142
+ --color-shades-functional-yellow-999: #7a5f29;
143
+ --color-shades-functional-yellow-000: #fff9e9;
144
+ --color-shades-functional-yellow-050: #fff5d9;
145
+ --color-shades-functional-green-100: #ddfddd;
146
+ --color-shades-functional-green-150: #cbf9cb;
147
+ --color-shades-functional-green-200: #acf6b3;
148
+ --color-shades-functional-green-300: #95f3a5;
149
+ --color-shades-functional-green-400: #81ef9c;
150
+ --color-shades-functional-green-500: #6cea96;
151
+ --color-shades-functional-green-600: #3fcf87;
152
+ --color-shades-functional-green-700: #2aa773;
153
+ --color-shades-functional-green-800: #207e57;
154
+ --color-shades-functional-green-850: #1c6e4c;
155
+ --color-shades-functional-green-900: #165a3e;
156
+ --color-shades-functional-green-950: #143d2c;
157
+ --color-shades-functional-green-999: #122b21;
158
+ --color-shades-functional-green-000: #ebffeb;
159
+ --color-shades-functional-green-050: #e5ffe5;
160
+ --color-shades-functional-neutralgrey-100: #edeef0;
161
+ --color-shades-functional-neutralgrey-150: #e4e5e7;
162
+ --color-shades-functional-neutralgrey-200: #c9cbcf;
163
+ --color-shades-functional-neutralgrey-300: #b7babf;
164
+ --color-shades-functional-neutralgrey-400: #9fa3a9;
165
+ --color-shades-functional-neutralgrey-500: #878c94;
166
+ --color-shades-functional-neutralgrey-600: #60656c;
167
+ --color-shades-functional-neutralgrey-700: #515459;
168
+ --color-shades-functional-neutralgrey-800: #3c3f44;
169
+ --color-shades-functional-neutralgrey-850: #292a2c;
170
+ --color-shades-functional-neutralgrey-900: #1b1c1e;
171
+ --color-shades-functional-neutralgrey-950: #0d0d0e;
172
+ --color-shades-functional-neutralgrey-999: #0d0d0e;
173
+ --color-shades-functional-neutralgrey-000: #ffffff;
174
+ --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5);
175
+ --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5);
176
+ --color-shades-functional-neutralgrey-050: #f7f7f8;
177
+ --color-shades-additional-lime-100: #eaf4da;
178
+ --color-shades-additional-lime-150: #dfeec8;
179
+ --color-shades-additional-lime-200: #d4e9b6;
180
+ --color-shades-additional-lime-300: #bfdd91;
181
+ --color-shades-additional-lime-400: #a9d26d;
182
+ --color-shades-additional-lime-500: #87bb3a;
183
+ --color-shades-additional-lime-600: #709636;
184
+ --color-shades-additional-lime-700: #59772b;
185
+ --color-shades-additional-lime-800: #3b501d;
186
+ --color-shades-additional-lime-850: #2c3c16;
187
+ --color-shades-additional-lime-900: #1e280e;
188
+ --color-shades-additional-lime-950: #0f1407;
189
+ --color-shades-additional-lime-999: #000000;
190
+ --color-shades-additional-lime-000: #ffffff;
191
+ --color-shades-additional-lime-050: #f4f9ed;
192
+ --color-shades-additional-purple-100: #ece9fc;
193
+ --color-shades-additional-purple-150: #e2ddfa;
194
+ --color-shades-additional-purple-200: #d9d2f9;
195
+ --color-shades-additional-purple-300: #c5bcf5;
196
+ --color-shades-additional-purple-400: #b2a5f2;
197
+ --color-shades-additional-purple-500: #9f8fef;
198
+ --color-shades-additional-purple-600: #8475ce;
199
+ --color-shades-additional-purple-700: #685aad;
200
+ --color-shades-additional-purple-800: #4d408d;
201
+ --color-shades-additional-purple-850: #3f337c;
202
+ --color-shades-additional-purple-900: #31256c;
203
+ --color-shades-additional-purple-950: #24185b;
204
+ --color-shades-additional-purple-999: #160b4b;
205
+ --color-shades-additional-purple-000: #ffffff;
206
+ --color-shades-additional-purple-050: #f5f4fd;
207
+ --color-shades-additional-magenta-100: #fae3f1;
208
+ --color-shades-additional-magenta-150: #f8d5eb;
209
+ --color-shades-additional-magenta-200: #f5c7e4;
210
+ --color-shades-additional-magenta-300: #f1acd6;
211
+ --color-shades-additional-magenta-400: #ec90c9;
212
+ --color-shades-additional-magenta-500: #e774bb;
213
+ --color-shades-additional-magenta-600: #c76ba4;
214
+ --color-shades-additional-magenta-700: #9c497c;
215
+ --color-shades-additional-magenta-800: #77335d;
216
+ --color-shades-additional-magenta-850: #64284d;
217
+ --color-shades-additional-magenta-900: #511e3d;
218
+ --color-shades-additional-magenta-950: #3f132e;
219
+ --color-shades-additional-magenta-999: #2c081e;
220
+ --color-shades-additional-magenta-000: #ffffff;
221
+ --color-shades-additional-magenta-050: #fdf1f8;
222
+ --color-shades-additional-teal-100: #e2f3f9;
223
+ --color-shades-additional-teal-150: #d3edf6;
224
+ --color-shades-additional-teal-200: #c4e7f3;
225
+ --color-shades-additional-teal-300: #a7dbec;
226
+ --color-shades-additional-teal-400: #89cfe6;
227
+ --color-shades-additional-teal-500: #6cc3e0;
228
+ --color-shades-additional-teal-600: #4893ad;
229
+ --color-shades-additional-teal-700: #407a8c;
230
+ --color-shades-additional-teal-800: #2f5c6c;
231
+ --color-shades-additional-teal-850: #254b58;
232
+ --color-shades-additional-teal-900: #1a3a45;
233
+ --color-shades-additional-teal-950: #102931;
234
+ --color-shades-additional-teal-999: #06181e;
235
+ --color-shades-additional-teal-000: #ffffff;
236
+ --color-shades-additional-teal-050: #f0f9fc;
203
237
  --opacity-disabled: 0.38;
204
- --font-family-source-sans-pro: 'Source Sans Pro';
238
+ --font-family-primary-family: 'Source Sans 3';
205
239
  --line-height-0: 1.15;
206
240
  --line-height-1: 1.20;
207
241
  --line-height-2: 1.25;
@@ -221,170 +255,305 @@
221
255
  --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04);
222
256
  --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02);
223
257
  --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03);
258
+ --boolean-brand-nve: false;
259
+ --boolean-brand-varsom: false;
260
+ --boolean-brand-rme: true;
261
+ --boolean-brand-nve-rme: true;
262
+ --text-brand-name: Reguleringsmyndigheten for energi;
224
263
  --color-brand-background-primary: var(--color-shades-brand-500);
225
- --color-brand-background-secondary: var(--color-shades-brand-500);
264
+ --color-brand-background-secondary: var(--color-shades-brand-400);
226
265
  --color-brand-background-tertiary: var(--color-shades-brand-150);
227
- --color-brand-foreground-primary: var(--color-shades-brand-000);
228
- --color-brand-foreground-secondary: var(--color-shades-brand-999);
229
- --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */
266
+ --color-brand-background-quaternary: var(--color-shades-brand-700);
267
+ --color-brand-foreground-primary: var(--color-shades-accent-500);
268
+ --color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
269
+ --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
270
+ --color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
271
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
272
+ --color-brand-border-primary: var(--color-shades-brand-500);
273
+ --color-brand-border-secondary: var(--color-shades-brand-600);
274
+ --color-brand-border-tertiary: var(--color-shades-brand-700);
275
+ --color-brand-border-emphasized: var(--color-shades-accent-400);
230
276
  --color-neutrals-background-canvas: var(--color-shades-grey-050);
231
277
  --color-neutrals-background-primary: var(--color-shades-grey-000);
232
278
  --color-neutrals-background-primary-contrast: var(--color-shades-grey-100);
233
279
  --color-neutrals-background-secondary: var(--color-shades-grey-150);
280
+ --color-neutrals-background-secondary-dim: var(--color-shades-grey-850);
281
+ --color-neutrals-background-tertiary-dim: var(--color-shades-grey-800);
282
+ --color-neutrals-background-modal-overlay: var(--color-shades-grey-999-040); /** transparent */
234
283
  --color-neutrals-foreground-primary: var(--color-shades-grey-999);
235
- --color-neutrals-foreground-subtle: var(--color-shades-grey-600);
284
+ --color-neutrals-foreground-secondary: var(--color-shades-functional-neutralgrey-800);
285
+ --color-neutrals-foreground-subtle: var(--color-shades-functional-neutralgrey-600);
286
+ --color-neutrals-foreground-faint: var(--color-shades-functional-neutralgrey-150);
287
+ --color-neutrals-foreground-inverted: var(--color-shades-functional-neutralgrey-000);
288
+ --color-neutrals-foreground-white: var(--color-shades-functional-neutralgrey-000); /** Fargen forblir hvit i darkmode */
236
289
  --color-neutrals-border-default: var(--color-shades-grey-500);
290
+ --color-neutrals-border-emphasized: var(--color-shades-grey-999);
237
291
  --color-neutrals-border-mute: var(--color-shades-grey-300);
238
292
  --color-neutrals-border-subtle: var(--color-shades-grey-150);
239
293
  --color-neutrals-border-disabled: var(--color-shades-grey-500);
240
- --color-interactive-primary-background-default: var(--color-shades-grey-950);
241
- --color-interactive-primary-background-hover: var(--color-shades-grey-800);
242
- --color-interactive-primary-background-disabled: var(--color-shades-grey-950);
243
- --color-interactive-primary-foreground-default: var(--color-shades-grey-000);
244
- --color-interactive-primary-foreground-hover: var(--color-shades-grey-000);
245
- --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000);
246
- --color-interactive-primary-border-focus: var(--color-shades-blue-500);
247
- --color-interactive-secondary-background-default: var(--color-shades-grey-150);
248
- --color-interactive-secondary-background-hover: var(--color-shades-grey-200);
249
- --color-interactive-secondary-background-disabled: var(--color-shades-grey-150);
250
- --color-interactive-secondary-foreground-default: var(--color-shades-grey-950);
251
- --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950);
252
- --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950);
253
- --color-interactive-secondary-border-focus: var(--color-shades-blue-500);
254
- --color-interactive-outlined-foreground-default: var(--color-shades-grey-950);
255
- --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950);
256
- --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950);
257
- --color-interactive-outlined-border-default: var(--color-shades-grey-500);
258
- --color-interactive-outlined-border-hover: var(--color-shades-grey-950);
259
- --color-interactive-outlined-border-focus: var(--color-shades-blue-500);
260
- --color-interactive-outlined-border-disabled: var(--color-shades-grey-500);
261
- --color-interactive-ghost-background-hover: var(--color-shades-grey-150);
262
- --color-interactive-ghost-foreground-default: var(--color-shades-grey-950);
263
- --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950);
264
- --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950);
265
- --color-interactive-ghost-border-focus: var(--color-shades-blue-500);
266
- --color-interactive-links-default: var(--color-shades-blue-700);
267
- --color-interactive-links-hover: var(--color-shades-grey-950);
268
- --color-interactive-links-focus: var(--color-shades-blue-700);
269
- --color-interactive-links-visited: var(--color-shades-grey-600);
270
- --color-interactive-danger-background-default: var(--color-shades-red-700);
271
- --color-interactive-danger-background-hover: var(--color-shades-red-850);
272
- --color-interactive-danger-background-disabled: var(--color-shades-red-700);
273
- --color-interactive-danger-foreground-default: var(--color-shades-grey-000);
274
- --color-interactive-danger-foreground-hover: var(--color-shades-grey-000);
275
- --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000);
276
- --color-interactive-danger-border-focus: var(--color-shades-blue-500);
277
- --color-feedback-background-default-info: var(--color-shades-blue-100);
278
- --color-feedback-background-default-error: var(--color-shades-red-050);
279
- --color-feedback-background-default-warning: var(--color-shades-yellow-200);
280
- --color-feedback-background-default-success: var(--color-shades-green-150);
281
- --color-feedback-background-default-neutral: var(--color-shades-neutralgrey-150); /** For neutral messages */
282
- --color-feedback-background-subtle-info: var(--color-shades-blue-000);
283
- --color-feedback-background-subtle-error: var(--color-shades-red-000);
284
- --color-feedback-background-subtle-warning: var(--color-shades-yellow-100);
285
- --color-feedback-background-subtle-success: var(--color-shades-green-100);
286
- --color-feedback-background-subtle-neutral: var(--color-shades-neutralgrey-050);
287
- --color-feedback-background-emphasized-info: var(--color-shades-blue-700);
288
- --color-feedback-background-emphasized-error: var(--color-shades-red-700);
289
- --color-feedback-background-emphasized-warning: var(--color-shades-yellow-500);
290
- --color-feedback-background-emphasized-success: var(--color-shades-green-800);
291
- --color-feedback-background-emphasized-neutral: var(--color-shades-neutralgrey-800);
292
- --color-feedback-foreground-default-info: var(--color-shades-neutralgrey-999);
293
- --color-feedback-foreground-default-error: var(--color-shades-neutralgrey-999);
294
- --color-feedback-foreground-default-warning: var(--color-shades-neutralgrey-999);
295
- --color-feedback-foreground-default-success: var(--color-shades-neutralgrey-999);
296
- --color-feedback-foreground-default-neutral: var(--color-shades-neutralgrey-999);
297
- --color-feedback-foreground-subtle-info: var(--color-shades-neutralgrey-999);
298
- --color-feedback-foreground-subtle-error: var(--color-shades-neutralgrey-999);
299
- --color-feedback-foreground-subtle-warning: var(--color-shades-neutralgrey-999);
300
- --color-feedback-foreground-subtle-success: var(--color-shades-neutralgrey-999);
301
- --color-feedback-foreground-subtle-neutral: var(--color-shades-neutralgrey-999);
294
+ --color-interactive-background-primary-enabled: var(--color-shades-grey-950);
295
+ --color-interactive-background-primary-hover: var(--color-shades-grey-600);
296
+ --color-interactive-background-primary-pressed: var(--color-shades-grey-500);
297
+ --color-interactive-background-primary-disabled: var(--color-shades-grey-300);
298
+ --color-interactive-background-secondary-enabled: var(--color-shades-grey-150);
299
+ --color-interactive-background-secondary-hover: var(--color-shades-grey-200);
300
+ --color-interactive-background-secondary-pressed: var(--color-shades-grey-300);
301
+ --color-interactive-background-secondary-disabled: var(--color-shades-grey-100);
302
+ --color-interactive-background-tertiary-enabled: var(--color-shades-grey-100);
303
+ --color-interactive-background-tertiary-hover: var(--color-shades-grey-150);
304
+ --color-interactive-background-tertiary-pressed: var(--color-shades-grey-200);
305
+ --color-interactive-background-tertiary-disabled: var(--color-shades-grey-100);
306
+ --color-interactive-background-danger-enabled: var(--color-shades-functional-red-700);
307
+ --color-interactive-background-danger-hover: var(--color-shades-functional-red-800);
308
+ --color-interactive-background-danger-pressed: var(--color-shades-functional-red-850);
309
+ --color-interactive-background-danger-disabled: var(--color-shades-functional-red-150);
310
+ --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000);
311
+ --color-interactive-foreground-primary-hover: var(--color-shades-grey-000);
312
+ --color-interactive-foreground-primary-disabled: var(--color-shades-grey-100);
313
+ --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950);
314
+ --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950);
315
+ --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-300);
316
+ --color-interactive-foreground-tertiary-enabled: var(--color-shades-grey-600);
317
+ --color-interactive-foreground-tertiary-hover: var(--color-shades-grey-950);
318
+ --color-interactive-foreground-tertiary-disabled: var(--color-shades-grey-300);
319
+ --color-interactive-foreground-danger-enabled: var(--color-shades-grey-000);
320
+ --color-interactive-foreground-danger-disabled: var(--color-shades-functional-red-000);
321
+ --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700);
322
+ --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950);
323
+ --color-interactive-foreground-link-visited: var(--color-shades-grey-600);
324
+ --color-interactive-border-primary-enabled: var(--color-shades-grey-999);
325
+ --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050);
326
+ --color-interactive-border-primary-disabled: var(--color-shades-grey-300);
327
+ --color-interactive-border-secondary-enabled: var(--color-shades-grey-500);
328
+ --color-interactive-border-secondary-hover: var(--color-shades-grey-950);
329
+ --color-interactive-border-secondary-disabled: var(--color-shades-grey-150);
330
+ --color-interactive-border-tertiary-enabled: var(--color-shades-grey-300);
331
+ --color-interactive-border-tertiary-hover: var(--color-shades-grey-600);
332
+ --color-interactive-border-tertiary-disabled: var(--color-shades-grey-150);
333
+ --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500);
334
+ --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
335
+ --color-feedback-background-default-info: var(--color-shades-functional-blue-100);
336
+ --color-feedback-background-default-error: var(--color-shades-functional-red-050);
337
+ --color-feedback-background-default-warning: var(--color-shades-functional-yellow-200);
338
+ --color-feedback-background-default-success: var(--color-shades-functional-green-150);
339
+ --color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-050);
340
+ --color-feedback-background-subtle-info: var(--color-shades-functional-blue-000);
341
+ --color-feedback-background-subtle-error: var(--color-shades-functional-red-000);
342
+ --color-feedback-background-subtle-warning: var(--color-shades-functional-yellow-100);
343
+ --color-feedback-background-subtle-success: var(--color-shades-functional-green-100);
344
+ --color-feedback-background-emphasized-neutral: var(--color-shades-functional-neutralgrey-800);
345
+ --color-feedback-background-emphasized-info: var(--color-shades-functional-blue-700);
346
+ --color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
347
+ --color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-500);
348
+ --color-feedback-background-emphasized-success: var(--color-shades-functional-green-800);
349
+ --color-feedback-foreground-neutral: var(--color-shades-functional-neutralgrey-999);
350
+ --color-feedback-foreground-info: var(--color-shades-functional-blue-800);
351
+ --color-feedback-foreground-error: var(--color-shades-functional-red-700);
352
+ --color-feedback-foreground-warning: var(--color-shades-functional-orange-999);
353
+ --color-feedback-foreground-success: var(--color-shades-functional-green-900);
354
+ --color-feedback-foreground-on-bg-subtle-neutral: var(--color-shades-functional-neutralgrey-800);
355
+ --color-feedback-foreground-on-bg-subtle-info: var(--color-shades-functional-blue-850);
356
+ --color-feedback-foreground-on-bg-subtle-error: var(--color-shades-functional-red-850);
357
+ --color-feedback-foreground-on-bg-subtle-warning: var(--color-shades-functional-orange-999);
358
+ --color-feedback-foreground-on-bg-subtle-success: var(--color-shades-functional-green-900);
359
+ --color-feedback-foreground-on-bg-emphasized-neutral: var(--color-shades-functional-neutralgrey-000);
360
+ --color-feedback-foreground-on-bg-emphasized-info: var(--color-shades-functional-neutralgrey-000);
361
+ --color-feedback-foreground-on-bg-emphasized-error: var(--color-shades-functional-neutralgrey-000);
362
+ --color-feedback-foreground-on-bg-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
363
+ --color-feedback-foreground-on-bg-emphasized-success: var(--color-shades-functional-neutralgrey-000);
364
+ --color-feedback-foreground-default-neutral: var(--color-shades-functional-neutralgrey-999);
365
+ --color-feedback-foreground-default-info: var(--color-shades-functional-neutralgrey-999);
366
+ --color-feedback-foreground-default-error: var(--color-shades-functional-neutralgrey-999);
367
+ --color-feedback-foreground-default-warning: var(--color-shades-functional-neutralgrey-999);
368
+ --color-feedback-foreground-default-success: var(--color-shades-functional-neutralgrey-999);
369
+ --color-feedback-foreground-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
370
+ --color-feedback-foreground-subtle-info: var(--color-shades-functional-neutralgrey-999);
371
+ --color-feedback-foreground-subtle-error: var(--color-shades-functional-neutralgrey-999);
372
+ --color-feedback-foreground-subtle-warning: var(--color-shades-functional-neutralgrey-999);
373
+ --color-feedback-foreground-subtle-success: var(--color-shades-functional-neutralgrey-999);
374
+ --color-feedback-foreground-emphasized-neutral: var(--color-shades-grey-000);
302
375
  --color-feedback-foreground-emphasized-info: var(--color-shades-grey-000);
303
376
  --color-feedback-foreground-emphasized-error: var(--color-shades-grey-000);
304
- --color-feedback-foreground-emphasized-warning: var(--color-shades-neutralgrey-999);
377
+ --color-feedback-foreground-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
305
378
  --color-feedback-foreground-emphasized-success: var(--color-shades-grey-000);
306
- --color-feedback-foreground-emphasized-neutral: var(--color-shades-grey-000);
307
- --color-dangerlevel-background-mute-level1: var(--color-shades-green-150);
308
- --color-dangerlevel-background-mute-level2: var(--color-shades-yellow-200);
309
- --color-dangerlevel-background-mute-level3: var(--color-shades-orange-150);
310
- --color-dangerlevel-background-mute-level4: var(--color-shades-red-050);
311
- --color-dangerlevel-background-mute-level5: var(--color-shades-neutralgrey-200);
312
- --color-dangerlevel-background-subtle-level1: var(--color-shades-green-100);
313
- --color-dangerlevel-background-subtle-level2: var(--color-shades-yellow-100);
314
- --color-dangerlevel-background-subtle-level3: var(--color-shades-orange-050);
315
- --color-dangerlevel-background-subtle-level4: var(--color-shades-red-000);
316
- --color-dangerlevel-background-subtle-level5: var(--color-shades-neutralgrey-150);
317
- --color-dangerlevel-background-default-level1: var(--color-shades-green-500);
318
- --color-dangerlevel-background-default-level2: var(--color-shades-yellow-500);
319
- --color-dangerlevel-background-default-level3: var(--color-shades-orange-400);
320
- --color-dangerlevel-background-default-level4: var(--color-shades-red-500);
321
- --color-dangerlevel-background-default-level5: var(--color-shades-neutralgrey-950);
322
- --color-dangerlevel-foreground-default-level1: var(--color-shades-neutralgrey-999);
323
- --color-dangerlevel-foreground-default-level2: var(--color-shades-neutralgrey-999);
324
- --color-dangerlevel-foreground-default-level3: var(--color-shades-neutralgrey-999);
325
- --color-dangerlevel-foreground-default-level4: var(--color-shades-neutralgrey-999);
326
- --color-dangerlevel-foreground-default-level5: var(--color-shades-neutralgrey-000);
327
- --color-dangerlevel-foreground-mute-level1: var(--color-shades-neutralgrey-999);
328
- --color-dangerlevel-foreground-mute-level2: var(--color-shades-neutralgrey-999);
329
- --color-dangerlevel-foreground-mute-level3: var(--color-shades-neutralgrey-999);
330
- --color-dangerlevel-foreground-mute-level4: var(--color-shades-neutralgrey-999);
331
- --color-dangerlevel-foreground-mute-level5: var(--color-shades-neutralgrey-999);
332
- --color-dangerlevel-foreground-subtle-level1: var(--color-shades-neutralgrey-999);
333
- --color-dangerlevel-foreground-subtle-level2: var(--color-shades-neutralgrey-999);
334
- --color-dangerlevel-foreground-subtle-level3: var(--color-shades-neutralgrey-999);
335
- --color-dangerlevel-foreground-subtle-level4: var(--color-shades-neutralgrey-999);
336
- --color-dangerlevel-foreground-subtle-level5: var(--color-shades-neutralgrey-999);
337
- --color-supplemental-subtle-teal-background: var(--color-shades-teal-150);
338
- --color-supplemental-subtle-teal-foreground: var(--color-shades-teal-900);
339
- --color-supplemental-subtle-purple-background: var(--color-shades-purple-200);
340
- --color-supplemental-subtle-purple-foreground: var(--color-shades-purple-950);
341
- --color-supplemental-subtle-lime-background: var(--color-shades-lime-150);
342
- --color-supplemental-subtle-lime-foreground: var(--color-shades-lime-850);
343
- --color-supplemental-subtle-magenta-background: var(--color-shades-magenta-150);
344
- --color-supplemental-subtle-magenta-foreground: var(--color-shades-magenta-850);
345
- --color-supplemental-subtle-yellow-background: var(--color-shades-yellow-150);
346
- --color-supplemental-subtle-yellow-foreground: var(--color-shades-lime-999);
347
- --color-supplemental-subtle-grey-background: var(--color-shades-neutralgrey-150);
348
- --color-supplemental-subtle-grey-foreground: var(--color-shades-neutralgrey-850);
349
- --color-supplemental-subtle-red-background: var(--color-shades-red-100);
350
- --color-supplemental-subtle-red-foreground: var(--color-shades-red-999);
351
- --color-supplemental-subtle-blue-background: var(--color-shades-blue-150);
352
- --color-supplemental-subtle-blue-foreground: var(--color-shades-blue-950);
353
- --color-supplemental-emphasized-teal-background: var(--color-shades-teal-500);
354
- --color-supplemental-emphasized-teal-foreground: var(--color-shades-teal-950);
355
- --color-supplemental-emphasized-purple-background: var(--color-shades-purple-400);
356
- --color-supplemental-emphasized-purple-foreground: var(--color-shades-purple-950);
357
- --color-supplemental-emphasized-lime-background: var(--color-shades-lime-500);
358
- --color-supplemental-emphasized-lime-foreground: var(--color-shades-lime-900);
359
- --color-supplemental-emphasized-magenta-background: var(--color-shades-magenta-500);
360
- --color-supplemental-emphasized-magenta-foreground: var(--color-shades-magenta-950);
361
- --color-supplemental-emphasized-yellow-background: var(--color-shades-yellow-400);
379
+ --color-feedback-border-subtle-neutral: var(--color-shades-functional-neutralgrey-200);
380
+ --color-feedback-border-subtle-info: var(--color-shades-functional-blue-200);
381
+ --color-feedback-border-subtle-error: var(--color-shades-functional-red-200);
382
+ --color-feedback-border-subtle-warning: var(--color-shades-functional-yellow-700);
383
+ --color-feedback-border-subtle-success: var(--color-shades-functional-green-600);
384
+ --color-feedback-border-emphasized-neutral: var(--color-shades-functional-neutralgrey-600);
385
+ --color-feedback-border-emphasized-info: var(--color-shades-functional-blue-800);
386
+ --color-feedback-border-emphasized-error: var(--color-shades-functional-red-800);
387
+ --color-feedback-border-emphasized-warning: var(--color-shades-functional-yellow-900);
388
+ --color-feedback-border-emphasized-success: var(--color-shades-functional-green-800);
389
+ --color-dangerlevel-background-default-level1: var(--color-shades-functional-green-500);
390
+ --color-dangerlevel-background-default-level2: var(--color-shades-functional-yellow-500);
391
+ --color-dangerlevel-background-default-level3: var(--color-shades-functional-orange-400);
392
+ --color-dangerlevel-background-default-level4: var(--color-shades-functional-red-500);
393
+ --color-dangerlevel-background-default-level5: var(--color-shades-functional-neutralgrey-950);
394
+ --color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
395
+ --color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
396
+ --color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
397
+ --color-dangerlevel-background-mute-level4: var(--color-shades-functional-red-050);
398
+ --color-dangerlevel-background-mute-level5: var(--color-shades-functional-neutralgrey-200);
399
+ --color-dangerlevel-background-subtle-level1: var(--color-shades-functional-green-100);
400
+ --color-dangerlevel-background-subtle-level2: var(--color-shades-functional-yellow-100);
401
+ --color-dangerlevel-background-subtle-level3: var(--color-shades-functional-orange-050);
402
+ --color-dangerlevel-background-subtle-level4: var(--color-shades-functional-red-000);
403
+ --color-dangerlevel-background-subtle-level5: var(--color-shades-functional-neutralgrey-150);
404
+ --color-dangerlevel-foreground-default-level1: var(--color-shades-functional-neutralgrey-999);
405
+ --color-dangerlevel-foreground-default-level2: var(--color-shades-functional-neutralgrey-999);
406
+ --color-dangerlevel-foreground-default-level3: var(--color-shades-functional-neutralgrey-999);
407
+ --color-dangerlevel-foreground-default-level4: var(--color-shades-functional-neutralgrey-999);
408
+ --color-dangerlevel-foreground-default-level5: var(--color-shades-functional-neutralgrey-000);
409
+ --color-dangerlevel-foreground-mute-level1: var(--color-shades-functional-neutralgrey-999);
410
+ --color-dangerlevel-foreground-mute-level2: var(--color-shades-functional-neutralgrey-999);
411
+ --color-dangerlevel-foreground-mute-level3: var(--color-shades-functional-neutralgrey-999);
412
+ --color-dangerlevel-foreground-mute-level4: var(--color-shades-functional-neutralgrey-999);
413
+ --color-dangerlevel-foreground-mute-level5: var(--color-shades-functional-neutralgrey-999);
414
+ --color-dangerlevel-foreground-subtle-level1: var(--color-shades-functional-neutralgrey-999);
415
+ --color-dangerlevel-foreground-subtle-level2: var(--color-shades-functional-neutralgrey-999);
416
+ --color-dangerlevel-foreground-subtle-level3: var(--color-shades-functional-neutralgrey-999);
417
+ --color-dangerlevel-foreground-subtle-level4: var(--color-shades-functional-neutralgrey-999);
418
+ --color-dangerlevel-foreground-subtle-level5: var(--color-shades-functional-neutralgrey-999);
419
+ --color-supplemental-subtle-teal-background: var(--color-shades-additional-teal-150);
420
+ --color-supplemental-subtle-teal-foreground: var(--color-shades-additional-teal-900);
421
+ --color-supplemental-subtle-purple-background: var(--color-shades-additional-purple-200);
422
+ --color-supplemental-subtle-purple-foreground: var(--color-shades-additional-purple-950);
423
+ --color-supplemental-subtle-lime-background: var(--color-shades-additional-lime-150);
424
+ --color-supplemental-subtle-lime-foreground: var(--color-shades-additional-lime-850);
425
+ --color-supplemental-subtle-magenta-background: var(--color-shades-additional-magenta-150);
426
+ --color-supplemental-subtle-magenta-foreground: var(--color-shades-additional-magenta-850);
427
+ --color-supplemental-subtle-yellow-background: var(--color-shades-functional-yellow-150);
428
+ --color-supplemental-subtle-yellow-foreground: var(--color-shades-additional-lime-999);
429
+ --color-supplemental-subtle-grey-background: var(--color-shades-functional-neutralgrey-150);
430
+ --color-supplemental-subtle-grey-foreground: var(--color-shades-functional-neutralgrey-850);
431
+ --color-supplemental-subtle-red-background: var(--color-shades-functional-red-100);
432
+ --color-supplemental-subtle-red-foreground: var(--color-shades-functional-red-999);
433
+ --color-supplemental-subtle-blue-background: var(--color-shades-functional-blue-150);
434
+ --color-supplemental-subtle-blue-foreground: var(--color-shades-functional-blue-950);
435
+ --color-supplemental-emphasized-teal-background: var(--color-shades-additional-teal-500);
436
+ --color-supplemental-emphasized-teal-foreground: var(--color-shades-additional-teal-950);
437
+ --color-supplemental-emphasized-purple-background: var(--color-shades-additional-purple-400);
438
+ --color-supplemental-emphasized-purple-foreground: var(--color-shades-additional-purple-950);
439
+ --color-supplemental-emphasized-lime-background: var(--color-shades-additional-lime-500);
440
+ --color-supplemental-emphasized-lime-foreground: var(--color-shades-additional-lime-900);
441
+ --color-supplemental-emphasized-magenta-background: var(--color-shades-additional-magenta-500);
442
+ --color-supplemental-emphasized-magenta-foreground: var(--color-shades-additional-magenta-950);
443
+ --color-supplemental-emphasized-yellow-background: var(--color-shades-functional-yellow-400);
362
444
  --color-supplemental-emphasized-yellow-foreground: var(--color-shades-grey-999);
363
- --color-supplemental-emphasized-grey-background: var(--color-shades-neutralgrey-400);
364
- --color-supplemental-emphasized-grey-foreground: var(--color-shades-neutralgrey-999);
365
- --color-supplemental-emphasized-red-background: var(--color-shades-red-300);
445
+ --color-supplemental-emphasized-grey-background: var(--color-shades-functional-neutralgrey-400);
446
+ --color-supplemental-emphasized-grey-foreground: var(--color-shades-functional-neutralgrey-999);
447
+ --color-supplemental-emphasized-red-background: var(--color-shades-functional-red-300);
366
448
  --color-supplemental-emphasized-red-foreground: var(--color-shades-grey-999);
367
- --color-supplemental-emphasized-blue-background: var(--color-shades-blue-400);
449
+ --color-supplemental-emphasized-blue-background: var(--color-shades-functional-blue-400);
368
450
  --color-supplemental-emphasized-blue-foreground: var(--color-shades-grey-999);
451
+ --color-supplemental-charts-background-primary-transparent: var(--color-shades-data-color-a-300-005);
452
+ --color-supplemental-charts-foreground-data-01: var(--color-shades-data-color-a-300);
453
+ --color-supplemental-charts-foreground-data-02: var(--color-shades-data-color-a-600);
454
+ --color-supplemental-charts-foreground-data-03: var(--color-shades-data-color-a-800);
455
+ --color-supplemental-charts-foreground-data-04: var(--color-shades-data-color-a-950);
456
+ --color-supplemental-charts-foreground-data-05: var(--color-shades-data-color-d-900);
457
+ --color-supplemental-charts-foreground-data-06: var(--color-shades-data-color-b-500);
458
+ --color-supplemental-charts-foreground-data-07: var(--color-shades-data-color-e-300);
459
+ --color-supplemental-charts-foreground-data-08: var(--color-shades-data-color-g-800);
460
+ --color-supplemental-charts-foreground-data-09: var(--color-shades-data-color-f-800);
461
+ --color-supplemental-charts-foreground-data-10: var(--color-shades-data-color-e-400);
462
+ --color-supplemental-charts-foreground-data-11: var(--color-shades-data-color-b-800);
463
+ --color-supplemental-charts-foreground-data-12: var(--color-shades-data-color-d-600);
464
+ --color-supplemental-charts-foreground-data-13: var(--color-shades-data-color-c-800);
465
+ --color-supplemental-charts-foreground-data-14: var(--color-shades-data-color-e-500);
466
+ --color-supplemental-charts-foreground-data-15: var(--color-shades-data-color-d-800);
467
+ --color-supplemental-charts-foreground-data-16: var(--color-shades-data-color-c-900);
468
+ --color-supplemental-charts-foreground-data-17: var(--color-shades-data-color-c-600);
469
+ --color-supplemental-charts-foreground-data-18: var(--color-shades-data-color-b-900);
369
470
  --spacing-none: 0;
471
+ --spacing-20x: 20px;
370
472
  --spacing-24x: 24px;
371
473
  --spacing-32x: 32px;
372
474
  --spacing-40x: 40px;
475
+ --spacing-48x: 48px;
373
476
  --spacing-50x: 50px;
477
+ --spacing-56x: 56px;
478
+ --spacing-88x: 88px;
374
479
  --spacing-220x: 220px;
375
480
  --spacing-620x: 620px;
376
- --sizing-content-area-mobile: 366px;
377
- --sizing-content-area-desktop-small: 700px;
378
- --sizing-content-area-desktop: 1000px;
379
- --sizing-content-area-desktop-large: 1200px;
380
- --sizing-device-width-mobile: 390px;
381
- --sizing-device-width-desktop-small: 800px;
382
- --sizing-device-width-desktop: 1440px;
383
- --sizing-device-width-desktop-large: 2440px;
481
+ --sizing-18x: 18px;
482
+ --sizing-20x: 20px;
483
+ --sizing-24x: 24px;
484
+ --sizing-28x: 28px;
485
+ --sizing-32x: 32px;
486
+ --sizing-36x: 36px;
487
+ --sizing-40x: 40px;
488
+ --sizing-44x: 44px;
489
+ --sizing-48x: 48px;
490
+ --sizing-56x: 56px;
491
+ --sizing-62x: 62px;
492
+ --sizing-64x: 64px;
493
+ --sizing-70x: 70px;
494
+ --sizing-84x: 84px;
495
+ --sizing-88x: 88px;
496
+ --sizing-92x: 92px;
497
+ --sizing-108x: 108px;
498
+ --sizing-112x: 112px;
499
+ --sizing-118x: 118px;
500
+ --sizing-120x: 120px;
501
+ --sizing-124x: 124px;
502
+ --sizing-132x: 132px;
503
+ --sizing-136x: 136px;
504
+ --sizing-160x: 160px;
505
+ --sizing-180x: 180px;
506
+ --sizing-200x: 200px;
507
+ --sizing-212x: 212px;
508
+ --sizing-216x: 216px;
509
+ --sizing-217x: 217px;
510
+ --sizing-220x: 220px;
511
+ --sizing-232x: 232px;
512
+ --sizing-246x: 246px;
513
+ --sizing-256x: 256px;
514
+ --sizing-282x: 282px;
515
+ --sizing-286x: 286px;
516
+ --sizing-320x: 320px;
517
+ --sizing-342x: 342px;
518
+ --sizing-366x: 366px;
519
+ --sizing-389x: 389px;
520
+ --sizing-390x: 390px;
521
+ --sizing-428x: 428px;
522
+ --sizing-440x: 440px;
523
+ --sizing-468x: 468px;
524
+ --sizing-480x: 480px;
525
+ --sizing-496x: 496px;
526
+ --sizing-520x: 520px;
527
+ --sizing-544x: 544px;
528
+ --sizing-572x: 572px;
529
+ --sizing-588x: 588px;
530
+ --sizing-600x: 600px;
531
+ --sizing-700x: 700px;
532
+ --sizing-750x: 750px;
533
+ --sizing-763x: 763px;
534
+ --sizing-764x: 764px;
535
+ --sizing-799x: 799px;
536
+ --sizing-800x: 800px;
537
+ --sizing-1000x: 1000px;
538
+ --sizing-1023x: 1023px;
539
+ --sizing-1024x: 1024px;
540
+ --sizing-1140x: 1140px;
541
+ --sizing-1200x: 1200px;
542
+ --sizing-1439x: 1439px;
543
+ --sizing-1440x: 1440px;
544
+ --sizing-1599x: 1599px;
545
+ --sizing-1600x: 1600px;
546
+ --sizing-1800x: 1800px;
547
+ --sizing-2439x: 2439px;
548
+ --sizing-2440x: 2440px;
549
+ --sizing-2560x: 2560px;
550
+ --sizing-9999x: 9999px;
384
551
  --dimension-025x: 0.0625rem; /** 1px */
385
552
  --dimension-05x: 0.125rem; /** 2px */
386
553
  --dimension-1x: 0.25rem; /** 4px */
554
+ --dimension-1-5x: 0.375rem; /** 6px */
387
555
  --dimension-2x: 0.5rem; /** 8px */
556
+ --dimension-2-5x: 0.625rem; /** 10px */
388
557
  --dimension-3x: 0.75rem; /** 12px */
389
558
  --dimension-3-5x: 0.875rem; /** 14px */
390
559
  --dimension-4x: 1rem; /** 16px */
@@ -432,46 +601,7 @@
432
601
  --border-width-none: 0px;
433
602
  --border-width-default: 1px;
434
603
  --border-width-strong: 2px;
435
- --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-source-sans-pro);
436
- --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-source-sans-pro);
437
- --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-source-sans-pro);
438
- --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-source-sans-pro);
439
- --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-source-sans-pro);
440
- --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-source-sans-pro);
441
- --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-source-sans-pro);
442
- --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-source-sans-pro);
443
- --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-source-sans-pro);
444
- --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-source-sans-pro);
445
- --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-source-sans-pro);
446
- --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
447
- --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
448
- --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-source-sans-pro);
449
- --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-source-sans-pro);
450
- --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
451
- --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
452
- --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
453
- --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
454
- --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
455
- --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
456
- --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
457
- --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
458
- --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
459
- --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
460
- --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
461
- --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
462
- --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
463
- --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
464
- --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
465
- --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-source-sans-pro);
466
- --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
467
- --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
468
- --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
469
- --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
470
- --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
471
- --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
472
- --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
473
- --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
474
- --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
604
+ --border-width-stronger: 4px;
475
605
  --spacing-2x-small: var(--dimension-1x);
476
606
  --spacing-x-small: var(--dimension-2x);
477
607
  --spacing-small: var(--dimension-3x);
@@ -482,8 +612,16 @@
482
612
  --spacing-3x-large: var(--dimension-16x);
483
613
  --spacing-4x-large: var(--dimension-20x);
484
614
  --spacing-5x-large: var(--dimension-24x);
485
- --spacing-content-margin-top-bottom: var(--spacing-40x);
486
- --spacing-content-margin-left-right: var(--spacing-220x);
615
+ --spacing-content-margin-top: var(--spacing-40x);
616
+ --spacing-content-margin-bottom: var(--spacing-88x);
617
+ --spacing-content-margin-left-right: var(--spacing-48x);
618
+ --spacing-fixed-spacing-3x-small: var(--dimension-05x);
619
+ --spacing-fixed-spacing-2x-small: var(--dimension-1-5x);
620
+ --spacing-fixed-spacing-x-small: var(--dimension-2x);
621
+ --spacing-fixed-spacing-small: var(--dimension-2-5x);
622
+ --spacing-fixed-spacing-medium: var(--dimension-4x);
623
+ --spacing-fixed-spacing-large: var(--dimension-6x);
624
+ --spacing-fixed-spacing-x-large: var(--dimension-10x);
487
625
  --sizing-4x-small: var(--dimension-2x);
488
626
  --sizing-3x-small: var(--dimension-4x);
489
627
  --sizing-2x-small: var(--dimension-6x);
@@ -493,8 +631,26 @@
493
631
  --sizing-large: var(--dimension-18x);
494
632
  --sizing-x-large: var(--dimension-21x);
495
633
  --sizing-2x-large: var(--dimension-24x);
496
- --sizing-device-width: var(--sizing-device-width-desktop);
497
- --sizing-device-content: var(--sizing-content-area-desktop);
634
+ --sizing-device-page-min-width: var(--sizing-1024x);
635
+ --sizing-device-page-max-width: var(--sizing-1599x);
636
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
637
+ --sizing-device-content-max-width-large: var(--sizing-1800x);
638
+ --sizing-device-content-max-width-medium: var(--sizing-1000x);
639
+ --sizing-device-content-max-width-small: var(--sizing-572x);
640
+ --sizing-device-content-max-width-x-small: var(--sizing-232x);
641
+ --sizing-brand-logo-medium: var(--sizing-84x);
642
+ --sizing-brand-illustration-medium: var(--sizing-40x);
643
+ --sizing-image-x-small: var(--sizing-84x);
644
+ --sizing-image-large: var(--sizing-750x);
645
+ --sizing-card-link-card-height-x-large-min-height: var(--sizing-212x);
646
+ --sizing-card-link-card-height-x-large-max-height: var(--sizing-246x);
647
+ --sizing-icon-3x-large: var(--sizing-70x);
648
+ --sizing-icon-2x-large: var(--sizing-56x);
649
+ --sizing-icon-x-large: var(--sizing-48x);
650
+ --sizing-icon-large: var(--sizing-40x);
651
+ --sizing-icon-medium: var(--sizing-32x);
652
+ --sizing-icon-small: var(--sizing-24x);
653
+ --sizing-icon-x-small: var(--sizing-20x);
498
654
  --sizing-fixed-sizing-2x-small: var(--dimension-4x);
499
655
  --sizing-fixed-sizing-x-small: var(--dimension-5x);
500
656
  --sizing-fixed-sizing-small: var(--dimension-6x);
@@ -503,39 +659,148 @@
503
659
  --sizing-fixed-sizing-x-large: var(--dimension-12x);
504
660
  --sizing-fixed-sizing-2x-large: var(--dimension-14x);
505
661
  --sizing-fixed-sizing-3x-large: var(--dimension-16x);
662
+ --typography-heading-x-large: var(--font-weight-semibold) var(--font-size-3x-large)/var(--line-height-0) var(--font-family-primary-family);
663
+ --typography-heading-large: var(--font-weight-semibold) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
664
+ --typography-heading-medium: var(--font-weight-semibold) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
665
+ --typography-heading-small: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
666
+ --typography-heading-x-small: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-3) var(--font-family-primary-family);
667
+ --typography-subheading-large: var(--font-weight-regular) var(--font-size-2x-large)/var(--line-height-1) var(--font-family-primary-family);
668
+ --typography-subheading-medium: var(--font-weight-regular) var(--font-size-x-large)/var(--line-height-2) var(--font-family-primary-family);
669
+ --typography-subheading-small: var(--font-weight-regular) var(--font-size-large)/var(--line-height-3) var(--font-family-primary-family);
670
+ --typography-lead-large-regular: var(--font-weight-regular) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
671
+ --typography-lead-large-semibold: var(--font-weight-semibold) var(--font-size-large)/var(--line-height-4) var(--font-family-primary-family);
672
+ --typography-lead-medium-regular: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
673
+ --typography-lead-medium-semibold: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
674
+ --font-size-small: var(--dimension-4-5x); /** 16 px */
675
+ --typography-lead-small-regular: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
676
+ --typography-lead-small-semibold: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
677
+ --typography-body-large: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
678
+ --typography-body-large-underline: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
679
+ --typography-body-medium: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
680
+ --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-primary-family);
681
+ --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
682
+ --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
683
+ --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
684
+ --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
685
+ --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
686
+ --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-primary-family);
687
+ --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
688
+ --typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-primary-family);
689
+ --typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
690
+ --typography-body-compact-small-underline-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-primary-family);
691
+ --typography-body-compact-x-small-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
692
+ --typography-body-compact-x-small-underline-compact: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-1) var(--font-family-primary-family);
693
+ --typography-detailtext-caption: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-primary-family);
694
+ --typography-detailtext-caps-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-5) var(--font-family-primary-family);
695
+ --typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-primary-family);
696
+ --typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
697
+ --typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-primary-family);
698
+ --typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
699
+ --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-primary-family);
700
+ --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
701
+ --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-primary-family);
506
702
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
703
+ --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
704
+ --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-primary-family);
507
705
  --font-size-x-small: var(--dimension-4x); /** 14 px */
508
- --font-size-small: var(--dimension-4-5x); /** 16 px */
509
706
  --font-size-medium: var(--dimension-5x); /** 18 px */
510
707
  --font-size-large: var(--dimension-6x); /** 20 px */
511
708
  --font-size-x-large: var(--dimension-8x); /** 24 px */
512
709
  --font-size-2x-large: var(--dimension-10x); /** 32 px */
513
710
  --font-size-3x-large: var(--dimension-12x); /** 40 px */ }
514
- @media (min-width: 1400px) {
711
+ @media (min-width: 1600px) {
515
712
  /**
516
713
  * Do not edit directly, this file was auto-generated.
517
714
  */
518
715
 
519
716
  :root {
520
717
  --spacing-none: 0;
718
+ --spacing-20x: 20px;
521
719
  --spacing-24x: 24px;
522
720
  --spacing-32x: 32px;
523
721
  --spacing-40x: 40px;
722
+ --spacing-48x: 48px;
524
723
  --spacing-50x: 50px;
724
+ --spacing-56x: 56px;
725
+ --spacing-88x: 88px;
525
726
  --spacing-220x: 220px;
526
727
  --spacing-620x: 620px;
527
- --sizing-content-area-mobile: 366px;
528
- --sizing-content-area-desktop-small: 700px;
529
- --sizing-content-area-desktop: 1000px;
530
- --sizing-content-area-desktop-large: 1200px;
531
- --sizing-device-width-mobile: 390px;
532
- --sizing-device-width-desktop-small: 800px;
533
- --sizing-device-width-desktop: 1440px;
534
- --sizing-device-width-desktop-large: 2440px;
728
+ --sizing-18x: 18px;
729
+ --sizing-20x: 20px;
730
+ --sizing-24x: 24px;
731
+ --sizing-28x: 28px;
732
+ --sizing-32x: 32px;
733
+ --sizing-36x: 36px;
734
+ --sizing-40x: 40px;
735
+ --sizing-44x: 44px;
736
+ --sizing-48x: 48px;
737
+ --sizing-56x: 56px;
738
+ --sizing-62x: 62px;
739
+ --sizing-64x: 64px;
740
+ --sizing-70x: 70px;
741
+ --sizing-84x: 84px;
742
+ --sizing-88x: 88px;
743
+ --sizing-92x: 92px;
744
+ --sizing-108x: 108px;
745
+ --sizing-112x: 112px;
746
+ --sizing-118x: 118px;
747
+ --sizing-120x: 120px;
748
+ --sizing-124x: 124px;
749
+ --sizing-132x: 132px;
750
+ --sizing-136x: 136px;
751
+ --sizing-160x: 160px;
752
+ --sizing-180x: 180px;
753
+ --sizing-200x: 200px;
754
+ --sizing-212x: 212px;
755
+ --sizing-216x: 216px;
756
+ --sizing-217x: 217px;
757
+ --sizing-220x: 220px;
758
+ --sizing-232x: 232px;
759
+ --sizing-246x: 246px;
760
+ --sizing-256x: 256px;
761
+ --sizing-282x: 282px;
762
+ --sizing-286x: 286px;
763
+ --sizing-320x: 320px;
764
+ --sizing-342x: 342px;
765
+ --sizing-366x: 366px;
766
+ --sizing-389x: 389px;
767
+ --sizing-390x: 390px;
768
+ --sizing-428x: 428px;
769
+ --sizing-440x: 440px;
770
+ --sizing-468x: 468px;
771
+ --sizing-480x: 480px;
772
+ --sizing-496x: 496px;
773
+ --sizing-520x: 520px;
774
+ --sizing-544x: 544px;
775
+ --sizing-572x: 572px;
776
+ --sizing-588x: 588px;
777
+ --sizing-600x: 600px;
778
+ --sizing-700x: 700px;
779
+ --sizing-750x: 750px;
780
+ --sizing-763x: 763px;
781
+ --sizing-764x: 764px;
782
+ --sizing-799x: 799px;
783
+ --sizing-800x: 800px;
784
+ --sizing-1000x: 1000px;
785
+ --sizing-1023x: 1023px;
786
+ --sizing-1024x: 1024px;
787
+ --sizing-1140x: 1140px;
788
+ --sizing-1200x: 1200px;
789
+ --sizing-1439x: 1439px;
790
+ --sizing-1440x: 1440px;
791
+ --sizing-1599x: 1599px;
792
+ --sizing-1600x: 1600px;
793
+ --sizing-1800x: 1800px;
794
+ --sizing-2439x: 2439px;
795
+ --sizing-2440x: 2440px;
796
+ --sizing-2560x: 2560px;
797
+ --sizing-9999x: 9999px;
535
798
  --dimension-025x: 0.0625rem; /** 1px */
536
799
  --dimension-05x: 0.125rem; /** 2px */
537
800
  --dimension-1x: 0.25rem; /** 4px */
801
+ --dimension-1-5x: 0.375rem; /** 6px */
538
802
  --dimension-2x: 0.5rem; /** 8px */
803
+ --dimension-2-5x: 0.625rem; /** 10px */
539
804
  --dimension-3x: 0.75rem; /** 12px */
540
805
  --dimension-3-5x: 0.875rem; /** 14px */
541
806
  --dimension-4x: 1rem; /** 16px */
@@ -583,6 +848,7 @@
583
848
  --border-width-none: 0px;
584
849
  --border-width-default: 1px;
585
850
  --border-width-strong: 2px;
851
+ --border-width-stronger: 4px;
586
852
  --spacing-2x-small: var(--dimension-1x);
587
853
  --spacing-x-small: var(--dimension-2x);
588
854
  --spacing-small: var(--dimension-3x);
@@ -593,8 +859,9 @@
593
859
  --spacing-3x-large: var(--dimension-16x);
594
860
  --spacing-4x-large: var(--dimension-20x);
595
861
  --spacing-5x-large: var(--dimension-24x);
596
- --spacing-content-margin-top-bottom: var(--spacing-40x);
597
- --spacing-content-margin-left-right: var(--spacing-620x);
862
+ --spacing-content-margin-top: var(--spacing-40x);
863
+ --spacing-content-margin-bottom: var(--spacing-88x);
864
+ --spacing-content-margin-left-right: var(--spacing-48x);
598
865
  --sizing-4x-small: var(--dimension-2x);
599
866
  --sizing-3x-small: var(--dimension-4x);
600
867
  --sizing-2x-small: var(--dimension-6x);
@@ -604,8 +871,26 @@
604
871
  --sizing-large: var(--dimension-18x);
605
872
  --sizing-x-large: var(--dimension-21x);
606
873
  --sizing-2x-large: var(--dimension-24x);
607
- --sizing-device-width: var(--sizing-device-width-desktop-large);
608
- --sizing-device-content: var(--sizing-content-area-desktop-large);
874
+ --sizing-device-page-min-width: var(--sizing-1600x);
875
+ --sizing-device-page-max-width: var(--sizing-9999x);
876
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
877
+ --sizing-device-content-max-width-large: var(--sizing-1800x);
878
+ --sizing-device-content-max-width-medium: var(--sizing-1200x);
879
+ --sizing-device-content-max-width-small: var(--sizing-588x);
880
+ --sizing-device-content-max-width-x-small: var(--sizing-282x);
881
+ --sizing-brand-logo-medium: var(--sizing-88x);
882
+ --sizing-brand-illustration-medium: var(--sizing-40x);
883
+ --sizing-image-x-small: var(--sizing-84x);
884
+ --sizing-image-large: var(--sizing-1024x);
885
+ --sizing-card-link-card-height-x-large-min-height: var(--sizing-212x);
886
+ --sizing-card-link-card-height-x-large-max-height: var(--sizing-246x);
887
+ --sizing-icon-3x-large: var(--sizing-70x);
888
+ --sizing-icon-2x-large: var(--sizing-56x);
889
+ --sizing-icon-x-large: var(--sizing-48x);
890
+ --sizing-icon-large: var(--sizing-40x);
891
+ --sizing-icon-medium: var(--sizing-32x);
892
+ --sizing-icon-small: var(--sizing-24x);
893
+ --sizing-icon-x-small: var(--sizing-20x);
609
894
  --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
610
895
  --font-size-x-small: var(--dimension-4x); /** 14 px */
611
896
  --font-size-small: var(--dimension-4-5x); /** 16 px */
@@ -617,31 +902,99 @@
617
902
  }
618
903
 
619
904
  }
620
- @media (max-width: 1200px) {
905
+ @media ((min-width: 764px) and (max-width: 1023px)) {
621
906
  /**
622
907
  * Do not edit directly, this file was auto-generated.
623
908
  */
624
909
 
625
910
  :root {
626
911
  --spacing-none: 0;
912
+ --spacing-20x: 20px;
627
913
  --spacing-24x: 24px;
628
914
  --spacing-32x: 32px;
629
915
  --spacing-40x: 40px;
916
+ --spacing-48x: 48px;
630
917
  --spacing-50x: 50px;
918
+ --spacing-56x: 56px;
919
+ --spacing-88x: 88px;
631
920
  --spacing-220x: 220px;
632
921
  --spacing-620x: 620px;
633
- --sizing-content-area-mobile: 366px;
634
- --sizing-content-area-desktop-small: 700px;
635
- --sizing-content-area-desktop: 1000px;
636
- --sizing-content-area-desktop-large: 1200px;
637
- --sizing-device-width-mobile: 390px;
638
- --sizing-device-width-desktop-small: 800px;
639
- --sizing-device-width-desktop: 1440px;
640
- --sizing-device-width-desktop-large: 2440px;
922
+ --sizing-18x: 18px;
923
+ --sizing-20x: 20px;
924
+ --sizing-24x: 24px;
925
+ --sizing-28x: 28px;
926
+ --sizing-32x: 32px;
927
+ --sizing-36x: 36px;
928
+ --sizing-40x: 40px;
929
+ --sizing-44x: 44px;
930
+ --sizing-48x: 48px;
931
+ --sizing-56x: 56px;
932
+ --sizing-62x: 62px;
933
+ --sizing-64x: 64px;
934
+ --sizing-70x: 70px;
935
+ --sizing-84x: 84px;
936
+ --sizing-88x: 88px;
937
+ --sizing-92x: 92px;
938
+ --sizing-108x: 108px;
939
+ --sizing-112x: 112px;
940
+ --sizing-118x: 118px;
941
+ --sizing-120x: 120px;
942
+ --sizing-124x: 124px;
943
+ --sizing-132x: 132px;
944
+ --sizing-136x: 136px;
945
+ --sizing-160x: 160px;
946
+ --sizing-180x: 180px;
947
+ --sizing-200x: 200px;
948
+ --sizing-212x: 212px;
949
+ --sizing-216x: 216px;
950
+ --sizing-217x: 217px;
951
+ --sizing-220x: 220px;
952
+ --sizing-232x: 232px;
953
+ --sizing-246x: 246px;
954
+ --sizing-256x: 256px;
955
+ --sizing-282x: 282px;
956
+ --sizing-286x: 286px;
957
+ --sizing-320x: 320px;
958
+ --sizing-342x: 342px;
959
+ --sizing-366x: 366px;
960
+ --sizing-389x: 389px;
961
+ --sizing-390x: 390px;
962
+ --sizing-428x: 428px;
963
+ --sizing-440x: 440px;
964
+ --sizing-468x: 468px;
965
+ --sizing-480x: 480px;
966
+ --sizing-496x: 496px;
967
+ --sizing-520x: 520px;
968
+ --sizing-544x: 544px;
969
+ --sizing-572x: 572px;
970
+ --sizing-588x: 588px;
971
+ --sizing-600x: 600px;
972
+ --sizing-700x: 700px;
973
+ --sizing-750x: 750px;
974
+ --sizing-763x: 763px;
975
+ --sizing-764x: 764px;
976
+ --sizing-799x: 799px;
977
+ --sizing-800x: 800px;
978
+ --sizing-1000x: 1000px;
979
+ --sizing-1023x: 1023px;
980
+ --sizing-1024x: 1024px;
981
+ --sizing-1140x: 1140px;
982
+ --sizing-1200x: 1200px;
983
+ --sizing-1439x: 1439px;
984
+ --sizing-1440x: 1440px;
985
+ --sizing-1599x: 1599px;
986
+ --sizing-1600x: 1600px;
987
+ --sizing-1800x: 1800px;
988
+ --sizing-2439x: 2439px;
989
+ --sizing-2440x: 2440px;
990
+ --sizing-2560x: 2560px;
991
+ --sizing-9999x: 9999px;
641
992
  --dimension-025x: 0.0625rem; /** 1px */
642
993
  --dimension-05x: 0.125rem; /** 2px */
643
994
  --dimension-1x: 0.25rem; /** 4px */
995
+ --dimension-1-5x: 0.375rem; /** 6px */
644
996
  --dimension-2x: 0.5rem; /** 8px */
997
+ --dimension-2-5x: 0.625rem; /** 10px */
645
998
  --dimension-3x: 0.75rem; /** 12px */
646
999
  --dimension-3-5x: 0.875rem; /** 14px */
647
1000
  --dimension-4x: 1rem; /** 16px */
@@ -689,6 +1042,7 @@
689
1042
  --border-width-none: 0px;
690
1043
  --border-width-default: 1px;
691
1044
  --border-width-strong: 2px;
1045
+ --border-width-stronger: 4px;
692
1046
  --spacing-2x-small: var(--dimension-1x);
693
1047
  --spacing-x-small: var(--dimension-2x);
694
1048
  --spacing-small: var(--dimension-3x);
@@ -699,8 +1053,9 @@
699
1053
  --spacing-3x-large: var(--dimension-14x);
700
1054
  --spacing-4x-large: var(--dimension-20x);
701
1055
  --spacing-5x-large: var(--dimension-22x);
702
- --spacing-content-margin-top-bottom: var(--spacing-32x);
703
- --spacing-content-margin-left-right: var(--spacing-50x);
1056
+ --spacing-content-margin-top: var(--spacing-32x);
1057
+ --spacing-content-margin-bottom: var(--spacing-56x);
1058
+ --spacing-content-margin-left-right: var(--spacing-40x);
704
1059
  --sizing-4x-small: var(--dimension-1x);
705
1060
  --sizing-3x-small: var(--dimension-3-5x);
706
1061
  --sizing-2x-small: var(--dimension-5x);
@@ -710,8 +1065,26 @@
710
1065
  --sizing-large: var(--dimension-17x);
711
1066
  --sizing-x-large: var(--dimension-20x);
712
1067
  --sizing-2x-large: var(--dimension-23x);
713
- --sizing-device-width: var(--sizing-device-width-desktop-small);
714
- --sizing-device-content: var(--sizing-content-area-desktop-small);
1068
+ --sizing-device-page-min-width: var(--sizing-764x);
1069
+ --sizing-device-page-max-width: var(--sizing-1023x);
1070
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1071
+ --sizing-device-content-max-width-large: var(--sizing-1800x);
1072
+ --sizing-device-content-max-width-medium: var(--sizing-800x);
1073
+ --sizing-device-content-max-width-small: var(--sizing-544x);
1074
+ --sizing-device-content-max-width-x-small: var(--sizing-216x);
1075
+ --sizing-brand-logo-medium: var(--sizing-64x);
1076
+ --sizing-brand-illustration-medium: var(--sizing-40x);
1077
+ --sizing-image-x-small: var(--sizing-48x);
1078
+ --sizing-image-large: var(--sizing-544x);
1079
+ --sizing-card-link-card-height-x-large-min-height: var(--sizing-132x);
1080
+ --sizing-card-link-card-height-x-large-max-height: var(--sizing-200x);
1081
+ --sizing-icon-3x-large: var(--sizing-56x);
1082
+ --sizing-icon-2x-large: var(--sizing-48x);
1083
+ --sizing-icon-x-large: var(--sizing-44x);
1084
+ --sizing-icon-large: var(--sizing-40x);
1085
+ --sizing-icon-medium: var(--sizing-32x);
1086
+ --sizing-icon-small: var(--sizing-24x);
1087
+ --sizing-icon-x-small: var(--sizing-20x);
715
1088
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
716
1089
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
717
1090
  --font-size-small: var(--dimension-4x); /** 16 px */
@@ -723,31 +1096,99 @@
723
1096
  }
724
1097
 
725
1098
  }
726
- @media (max-width: 600px) {
1099
+ @media ((min-width: 390px) and (max-width: 763px)) {
727
1100
  /**
728
1101
  * Do not edit directly, this file was auto-generated.
729
1102
  */
730
1103
 
731
1104
  :root {
732
1105
  --spacing-none: 0;
1106
+ --spacing-20x: 20px;
733
1107
  --spacing-24x: 24px;
734
1108
  --spacing-32x: 32px;
735
1109
  --spacing-40x: 40px;
1110
+ --spacing-48x: 48px;
736
1111
  --spacing-50x: 50px;
1112
+ --spacing-56x: 56px;
1113
+ --spacing-88x: 88px;
737
1114
  --spacing-220x: 220px;
738
1115
  --spacing-620x: 620px;
739
- --sizing-content-area-mobile: 366px;
740
- --sizing-content-area-desktop-small: 700px;
741
- --sizing-content-area-desktop: 1000px;
742
- --sizing-content-area-desktop-large: 1200px;
743
- --sizing-device-width-mobile: 390px;
744
- --sizing-device-width-desktop-small: 800px;
745
- --sizing-device-width-desktop: 1440px;
746
- --sizing-device-width-desktop-large: 2440px;
1116
+ --sizing-18x: 18px;
1117
+ --sizing-20x: 20px;
1118
+ --sizing-24x: 24px;
1119
+ --sizing-28x: 28px;
1120
+ --sizing-32x: 32px;
1121
+ --sizing-36x: 36px;
1122
+ --sizing-40x: 40px;
1123
+ --sizing-44x: 44px;
1124
+ --sizing-48x: 48px;
1125
+ --sizing-56x: 56px;
1126
+ --sizing-62x: 62px;
1127
+ --sizing-64x: 64px;
1128
+ --sizing-70x: 70px;
1129
+ --sizing-84x: 84px;
1130
+ --sizing-88x: 88px;
1131
+ --sizing-92x: 92px;
1132
+ --sizing-108x: 108px;
1133
+ --sizing-112x: 112px;
1134
+ --sizing-118x: 118px;
1135
+ --sizing-120x: 120px;
1136
+ --sizing-124x: 124px;
1137
+ --sizing-132x: 132px;
1138
+ --sizing-136x: 136px;
1139
+ --sizing-160x: 160px;
1140
+ --sizing-180x: 180px;
1141
+ --sizing-200x: 200px;
1142
+ --sizing-212x: 212px;
1143
+ --sizing-216x: 216px;
1144
+ --sizing-217x: 217px;
1145
+ --sizing-220x: 220px;
1146
+ --sizing-232x: 232px;
1147
+ --sizing-246x: 246px;
1148
+ --sizing-256x: 256px;
1149
+ --sizing-282x: 282px;
1150
+ --sizing-286x: 286px;
1151
+ --sizing-320x: 320px;
1152
+ --sizing-342x: 342px;
1153
+ --sizing-366x: 366px;
1154
+ --sizing-389x: 389px;
1155
+ --sizing-390x: 390px;
1156
+ --sizing-428x: 428px;
1157
+ --sizing-440x: 440px;
1158
+ --sizing-468x: 468px;
1159
+ --sizing-480x: 480px;
1160
+ --sizing-496x: 496px;
1161
+ --sizing-520x: 520px;
1162
+ --sizing-544x: 544px;
1163
+ --sizing-572x: 572px;
1164
+ --sizing-588x: 588px;
1165
+ --sizing-600x: 600px;
1166
+ --sizing-700x: 700px;
1167
+ --sizing-750x: 750px;
1168
+ --sizing-763x: 763px;
1169
+ --sizing-764x: 764px;
1170
+ --sizing-799x: 799px;
1171
+ --sizing-800x: 800px;
1172
+ --sizing-1000x: 1000px;
1173
+ --sizing-1023x: 1023px;
1174
+ --sizing-1024x: 1024px;
1175
+ --sizing-1140x: 1140px;
1176
+ --sizing-1200x: 1200px;
1177
+ --sizing-1439x: 1439px;
1178
+ --sizing-1440x: 1440px;
1179
+ --sizing-1599x: 1599px;
1180
+ --sizing-1600x: 1600px;
1181
+ --sizing-1800x: 1800px;
1182
+ --sizing-2439x: 2439px;
1183
+ --sizing-2440x: 2440px;
1184
+ --sizing-2560x: 2560px;
1185
+ --sizing-9999x: 9999px;
747
1186
  --dimension-025x: 0.0625rem; /** 1px */
748
1187
  --dimension-05x: 0.125rem; /** 2px */
749
1188
  --dimension-1x: 0.25rem; /** 4px */
1189
+ --dimension-1-5x: 0.375rem; /** 6px */
750
1190
  --dimension-2x: 0.5rem; /** 8px */
1191
+ --dimension-2-5x: 0.625rem; /** 10px */
751
1192
  --dimension-3x: 0.75rem; /** 12px */
752
1193
  --dimension-3-5x: 0.875rem; /** 14px */
753
1194
  --dimension-4x: 1rem; /** 16px */
@@ -795,6 +1236,7 @@
795
1236
  --border-width-none: 0px;
796
1237
  --border-width-default: 1px;
797
1238
  --border-width-strong: 2px;
1239
+ --border-width-stronger: 4px;
798
1240
  --spacing-2x-small: var(--dimension-05x);
799
1241
  --spacing-x-small: var(--dimension-1x);
800
1242
  --spacing-small: var(--dimension-2x);
@@ -805,7 +1247,8 @@
805
1247
  --spacing-3x-large: var(--dimension-11x);
806
1248
  --spacing-4x-large: var(--dimension-16x);
807
1249
  --spacing-5x-large: var(--dimension-19x);
808
- --spacing-content-margin-top-bottom: var(--spacing-24x);
1250
+ --spacing-content-margin-top: var(--spacing-24x);
1251
+ --spacing-content-margin-bottom: var(--spacing-48x);
809
1252
  --spacing-content-margin-left-right: var(--spacing-24x);
810
1253
  --sizing-4x-small: var(--dimension-05x);
811
1254
  --sizing-3x-small: var(--dimension-3x);
@@ -816,16 +1259,228 @@
816
1259
  --sizing-large: var(--dimension-16x);
817
1260
  --sizing-x-large: var(--dimension-19x);
818
1261
  --sizing-2x-large: var(--dimension-22x);
819
- --sizing-device-width: var(--sizing-device-width-mobile);
820
- --sizing-device-content: var(--sizing-content-area-mobile);
1262
+ --sizing-device-page-min-width: var(--sizing-390x);
1263
+ --sizing-device-page-max-width: var(--sizing-763x);
1264
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1265
+ --sizing-device-content-max-width-large: var(--sizing-1800x);
1266
+ --sizing-device-content-max-width-medium: var(--sizing-600x);
1267
+ --sizing-device-content-max-width-small: var(--sizing-496x);
1268
+ --sizing-device-content-max-width-x-small: var(--sizing-496x);
1269
+ --sizing-brand-logo-medium: var(--sizing-64x);
1270
+ --sizing-brand-illustration-medium: var(--sizing-40x);
1271
+ --sizing-image-x-small: var(--sizing-48x);
1272
+ --sizing-image-large: var(--sizing-390x);
1273
+ --sizing-card-link-card-height-x-large-min-height: var(--sizing-124x);
1274
+ --sizing-card-link-card-height-x-large-max-height: var(--sizing-180x);
1275
+ --sizing-icon-3x-large: var(--sizing-48x);
1276
+ --sizing-icon-2x-large: var(--sizing-40x);
1277
+ --sizing-icon-x-large: var(--sizing-36x);
1278
+ --sizing-icon-large: var(--sizing-32x);
1279
+ --sizing-icon-medium: var(--sizing-28x);
1280
+ --sizing-icon-small: var(--sizing-24x);
1281
+ --sizing-icon-x-small: var(--sizing-20x);
821
1282
  --font-size-2x-small: var(--dimension-3x); /** 12 px */
822
1283
  --font-size-x-small: var(--dimension-3-5x); /** 14 px */
823
1284
  --font-size-small: var(--dimension-4x); /** 16 px */
824
1285
  --font-size-medium: var(--dimension-4-5x); /** 18 px */
825
1286
  --font-size-large: var(--dimension-5x); /** 20 px */
826
1287
  --font-size-x-large: var(--dimension-7x); /** 24 px */
827
- --font-size-2x-large: var(--dimension-9x); /** 32 px */
828
- --font-size-3x-large: var(--dimension-11x); /** 40 px */
1288
+ --font-size-2x-large: var(--dimension-8x); /** 32 px */
1289
+ --font-size-3x-large: var(--dimension-9x); /** 40 px */
1290
+ }
1291
+
1292
+ }
1293
+ @media (max-width: 389px) {
1294
+ /**
1295
+ * Do not edit directly, this file was auto-generated.
1296
+ */
1297
+
1298
+ :root {
1299
+ --spacing-none: 0;
1300
+ --spacing-20x: 20px;
1301
+ --spacing-24x: 24px;
1302
+ --spacing-32x: 32px;
1303
+ --spacing-40x: 40px;
1304
+ --spacing-48x: 48px;
1305
+ --spacing-50x: 50px;
1306
+ --spacing-56x: 56px;
1307
+ --spacing-88x: 88px;
1308
+ --spacing-220x: 220px;
1309
+ --spacing-620x: 620px;
1310
+ --sizing-18x: 18px;
1311
+ --sizing-20x: 20px;
1312
+ --sizing-24x: 24px;
1313
+ --sizing-28x: 28px;
1314
+ --sizing-32x: 32px;
1315
+ --sizing-36x: 36px;
1316
+ --sizing-40x: 40px;
1317
+ --sizing-44x: 44px;
1318
+ --sizing-48x: 48px;
1319
+ --sizing-56x: 56px;
1320
+ --sizing-62x: 62px;
1321
+ --sizing-64x: 64px;
1322
+ --sizing-70x: 70px;
1323
+ --sizing-84x: 84px;
1324
+ --sizing-88x: 88px;
1325
+ --sizing-92x: 92px;
1326
+ --sizing-108x: 108px;
1327
+ --sizing-112x: 112px;
1328
+ --sizing-118x: 118px;
1329
+ --sizing-120x: 120px;
1330
+ --sizing-124x: 124px;
1331
+ --sizing-132x: 132px;
1332
+ --sizing-136x: 136px;
1333
+ --sizing-160x: 160px;
1334
+ --sizing-180x: 180px;
1335
+ --sizing-200x: 200px;
1336
+ --sizing-212x: 212px;
1337
+ --sizing-216x: 216px;
1338
+ --sizing-217x: 217px;
1339
+ --sizing-220x: 220px;
1340
+ --sizing-232x: 232px;
1341
+ --sizing-246x: 246px;
1342
+ --sizing-256x: 256px;
1343
+ --sizing-282x: 282px;
1344
+ --sizing-286x: 286px;
1345
+ --sizing-320x: 320px;
1346
+ --sizing-342x: 342px;
1347
+ --sizing-366x: 366px;
1348
+ --sizing-389x: 389px;
1349
+ --sizing-390x: 390px;
1350
+ --sizing-428x: 428px;
1351
+ --sizing-440x: 440px;
1352
+ --sizing-468x: 468px;
1353
+ --sizing-480x: 480px;
1354
+ --sizing-496x: 496px;
1355
+ --sizing-520x: 520px;
1356
+ --sizing-544x: 544px;
1357
+ --sizing-572x: 572px;
1358
+ --sizing-588x: 588px;
1359
+ --sizing-600x: 600px;
1360
+ --sizing-700x: 700px;
1361
+ --sizing-750x: 750px;
1362
+ --sizing-763x: 763px;
1363
+ --sizing-764x: 764px;
1364
+ --sizing-799x: 799px;
1365
+ --sizing-800x: 800px;
1366
+ --sizing-1000x: 1000px;
1367
+ --sizing-1023x: 1023px;
1368
+ --sizing-1024x: 1024px;
1369
+ --sizing-1140x: 1140px;
1370
+ --sizing-1200x: 1200px;
1371
+ --sizing-1439x: 1439px;
1372
+ --sizing-1440x: 1440px;
1373
+ --sizing-1599x: 1599px;
1374
+ --sizing-1600x: 1600px;
1375
+ --sizing-1800x: 1800px;
1376
+ --sizing-2439x: 2439px;
1377
+ --sizing-2440x: 2440px;
1378
+ --sizing-2560x: 2560px;
1379
+ --sizing-9999x: 9999px;
1380
+ --dimension-025x: 0.0625rem; /** 1px */
1381
+ --dimension-05x: 0.125rem; /** 2px */
1382
+ --dimension-1x: 0.25rem; /** 4px */
1383
+ --dimension-1-5x: 0.375rem; /** 6px */
1384
+ --dimension-2x: 0.5rem; /** 8px */
1385
+ --dimension-2-5x: 0.625rem; /** 10px */
1386
+ --dimension-3x: 0.75rem; /** 12px */
1387
+ --dimension-3-5x: 0.875rem; /** 14px */
1388
+ --dimension-4x: 1rem; /** 16px */
1389
+ --dimension-4-5x: 1.125rem; /** 18px */
1390
+ --dimension-5x: 1.25rem; /** 20px */
1391
+ --dimension-6x: 1.5rem; /** 24px */
1392
+ --dimension-7x: 1.75rem; /** 28px */
1393
+ --dimension-8x: 2rem; /** 32px */
1394
+ --dimension-9x: 2.25rem; /** 36px */
1395
+ --dimension-10x: 2.5rem; /** 40px */
1396
+ --dimension-11x: 2.75rem; /** 44px */
1397
+ --dimension-12x: 3rem; /** 48px */
1398
+ --dimension-13x: 3.25rem; /** 52px */
1399
+ --dimension-14x: 3.5rem; /** 56px */
1400
+ --dimension-15x: 3.75rem; /** 60px */
1401
+ --dimension-16x: 4rem; /** 64px */
1402
+ --dimension-17x: 4.25rem; /** 68px */
1403
+ --dimension-18x: 4.5rem; /** 72px */
1404
+ --dimension-19x: 4.75rem; /** 76px */
1405
+ --dimension-20x: 5rem; /** 80px */
1406
+ --dimension-21x: 5.25rem; /** 84px */
1407
+ --dimension-22x: 5.5rem; /** 88px */
1408
+ --dimension-23x: 5.75rem; /** 92px */
1409
+ --dimension-24x: 6rem; /** 96px */
1410
+ --dimension-25x: 6.25rem; /** 100px */
1411
+ --dimension-26x: 6.5rem; /** 104px */
1412
+ --dimension-27x: 6.75rem; /** 108px */
1413
+ --dimension-28x: 7rem; /** 112px */
1414
+ --dimension-29x: 7.25rem; /** 116px */
1415
+ --dimension-30x: 7.5rem; /** 120px */
1416
+ --letter-spacing-0: 0em;
1417
+ --letter-spacing-1: 0.05em;
1418
+ --paragraph-spacing-0: 0;
1419
+ --paragraph-spacing-1: 12px;
1420
+ --paragraph-spacing-2: 16px;
1421
+ --paragraph-spacing-3: 24px;
1422
+ --paragraph-spacing-4: 32px;
1423
+ --paragraph-spacing-5: 40px;
1424
+ --paragraph-indent-0: 0px;
1425
+ --border-radius-none: 0px;
1426
+ --border-radius-small: 4px;
1427
+ --border-radius-large: 6px;
1428
+ --border-radius-circle: 50px;
1429
+ --border-radius-pill: 9999px;
1430
+ --border-width-none: 0px;
1431
+ --border-width-default: 1px;
1432
+ --border-width-strong: 2px;
1433
+ --border-width-stronger: 4px;
1434
+ --spacing-2x-small: var(--dimension-05x);
1435
+ --spacing-x-small: var(--dimension-1x);
1436
+ --spacing-small: var(--dimension-2x);
1437
+ --spacing-medium: var(--dimension-3x);
1438
+ --spacing-large: var(--dimension-4x);
1439
+ --spacing-x-large: var(--dimension-4-5x);
1440
+ --spacing-2x-large: var(--dimension-5x);
1441
+ --spacing-3x-large: var(--dimension-6x);
1442
+ --spacing-4x-large: var(--dimension-7x);
1443
+ --spacing-5x-large: var(--dimension-10x);
1444
+ --spacing-content-margin-top: var(--spacing-24x);
1445
+ --spacing-content-margin-bottom: var(--spacing-40x);
1446
+ --spacing-content-margin-left-right: var(--spacing-20x);
1447
+ --sizing-4x-small: var(--dimension-05x);
1448
+ --sizing-3x-small: var(--dimension-3x);
1449
+ --sizing-2x-small: var(--dimension-4-5x);
1450
+ --sizing-x-small: var(--dimension-7x);
1451
+ --sizing-small: var(--dimension-10x);
1452
+ --sizing-medium: var(--dimension-13x);
1453
+ --sizing-large: var(--dimension-16x);
1454
+ --sizing-x-large: var(--dimension-19x);
1455
+ --sizing-2x-large: var(--dimension-22x);
1456
+ --sizing-device-page-min-width: var(--sizing-320x);
1457
+ --sizing-device-page-max-width: var(--sizing-389x);
1458
+ --sizing-device-content-max-width-x-large: var(--sizing-2560x);
1459
+ --sizing-device-content-max-width-large: var(--sizing-1800x);
1460
+ --sizing-device-content-max-width-medium: var(--sizing-366x);
1461
+ --sizing-device-content-max-width-small: var(--sizing-496x);
1462
+ --sizing-device-content-max-width-x-small: var(--sizing-496x);
1463
+ --sizing-brand-logo-medium: var(--sizing-64x);
1464
+ --sizing-brand-illustration-medium: var(--sizing-24x);
1465
+ --sizing-image-x-small: var(--sizing-84x);
1466
+ --sizing-image-large: var(--sizing-320x);
1467
+ --sizing-card-link-card-height-x-large-min-height: var(--sizing-120x);
1468
+ --sizing-card-link-card-height-x-large-max-height: var(--sizing-160x);
1469
+ --sizing-icon-3x-large: var(--sizing-48x);
1470
+ --sizing-icon-2x-large: var(--sizing-40x);
1471
+ --sizing-icon-x-large: var(--sizing-36x);
1472
+ --sizing-icon-large: var(--sizing-32x);
1473
+ --sizing-icon-medium: var(--sizing-28x);
1474
+ --sizing-icon-small: var(--sizing-24x);
1475
+ --sizing-icon-x-small: var(--sizing-20x);
1476
+ --font-size-2x-small: var(--dimension-3x); /** 12 px */
1477
+ --font-size-x-small: var(--dimension-3-5x); /** 14 px */
1478
+ --font-size-small: var(--dimension-4x); /** 16 px */
1479
+ --font-size-medium: var(--dimension-4-5x); /** 18 px */
1480
+ --font-size-large: var(--dimension-5x); /** 20 px */
1481
+ --font-size-x-large: var(--dimension-6x); /** 24 px */
1482
+ --font-size-2x-large: var(--dimension-7x); /** 32 px */
1483
+ --font-size-3x-large: var(--dimension-8x); /** 32 px */
829
1484
  }
830
1485
 
831
1486
  }