@baloise/ds-tokens 20.0.0-next.7 → 20.0.0-next.8

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 (13) hide show
  1. package/dist/css/base.tokens.css +198 -198
  2. package/dist/docs/base.tokens.json +44096 -44115
  3. package/dist/js/base.tokens.js +212 -212
  4. package/dist/out-tsc/config.brand.js +1 -1
  5. package/dist/out-tsc/css-naming.js +26 -0
  6. package/dist/out-tsc/css-preview.js +8 -0
  7. package/dist/out-tsc/css-value.js +86 -0
  8. package/dist/out-tsc/formatter.js +3 -3
  9. package/dist/out-tsc/transformers.js +6 -79
  10. package/dist/sass/base.tokens.scss +187 -187
  11. package/dist/web/base.tokens.json +217 -217
  12. package/package.json +6 -1
  13. package/sbom.cdx.json +36584 -18456
package/dist/css/base.tokens.css CHANGED
@@ -2,7 +2,113 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- :root {
5
+ :root, :host {
6
+ --ds-alias-interaction-focus-size-inner: 2;
7
+ --ds-alias-interaction-focus-size-outer: 5;
8
+ --ds-alias-interaction-focus-size-inner-inset: 3;
9
+ --ds-alias-interaction-focus-size-outer-inset: 5;
10
+ --ds-backdrop-filter: blur(4px);
11
+ --ds-footer-space-gap-column: 0.5rem 1rem;
12
+ --ds-footer-space-link-gap: 0.5rem 1.5rem;
13
+ --ds-footer-space-padding-base: 2rem;
14
+ --ds-heading-color-base: inherit;
15
+ --ds-card-color-base-text: inherit;
16
+ --ds-card-color-white-text: inherit;
17
+ --ds-card-color-info-text: inherit;
18
+ --ds-card-color-success-text: inherit;
19
+ --ds-card-color-warning-text: inherit;
20
+ --ds-card-color-danger-text: inherit;
21
+ --ds-card-color-grey-light-text: inherit;
22
+ --ds-card-color-grey-text: inherit;
23
+ --ds-card-color-red-lighter-text: inherit;
24
+ --ds-card-color-red-light-text: inherit;
25
+ --ds-card-color-red-text: inherit;
26
+ --ds-card-color-purple-lighter-text: inherit;
27
+ --ds-card-color-purple-light-text: inherit;
28
+ --ds-card-color-purple-text: inherit;
29
+ --ds-card-color-green-lighter-text: inherit;
30
+ --ds-card-color-green-light-text: inherit;
31
+ --ds-card-color-green-text: inherit;
32
+ --ds-card-color-yellow-lighter-text: inherit;
33
+ --ds-card-color-yellow-light-text: inherit;
34
+ --ds-card-color-yellow-text: inherit;
35
+ --ds-close-color-background-hover: rgba(0, 7, 57, 0.1);
36
+ --ds-close-color-background-active: rgba(0, 7, 57, 0.2);
37
+ --ds-close-inverted-color-background-hover: rgba(255, 255, 255, 0.3);
38
+ --ds-close-inverted-color-background-active: rgba(255, 255, 255, 0.5);
39
+ --ds-notification-color-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
40
+ --ds-notification-color-info-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
41
+ --ds-notification-color-success-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
42
+ --ds-notification-color-warning-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
43
+ --ds-notification-color-danger-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
44
+ --ds-notification-color-outline-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
45
+ --ds-notification-color-outline-purple-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
46
+ --ds-notification-color-outline-green-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
47
+ --ds-notification-color-outline-yellow-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
48
+ --ds-notification-color-outline-red-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
49
+ --ds-link-family: inherit;
50
+ --ds-navbar-base-layout-height: 5rem;
51
+ --ds-navbar-base-hamburger-transition-duration: 0.2s;
52
+ --ds-navbar-base-sidebar-max-width: 25rem;
53
+ --ds-navbar-base-sidebar-slide-duration: 300ms;
54
+ --ds-navbar-base-sidebar-backdrop-color: #000000;
55
+ --ds-navbar-base-sidebar-panel-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
56
+ --ds-navbar-base-menu-item-transition-duration: 0.2s;
57
+ --ds-segment-item-icon-gap: 0.375rem;
58
+ --ds-accordion-summary-color-base: inherit;
59
+ --ds-tabs-panel-padding: 1rem 0;
60
+ --ds-tabs-tab-padding: 0.25rem 1rem;
61
+ --ds-tab-panel-padding: 1rem 0;
62
+ --ds-steps-circle-size: 2rem;
63
+ --ds-steps-circle-size-sm: 1.5rem;
64
+ --ds-steps-panel-padding: 1rem 0;
65
+ --ds-step-panel-padding: 1rem 0;
66
+ --ds-carousel-dot-size: 8px;
67
+ --ds-carousel-dot-size-active: 10px;
68
+ --ds-table-cell-padding: 0.5em 0.75em;
69
+ --ds-table-cell-border-width: 0 0 2px;
70
+ --ds-table-head-cell-border-width: 0 0 1px;
71
+ --ds-table-foot-cell-border-width: 0 0 0;
72
+ --ds-popup-min-width: 16rem;
73
+ --ds-drawer-max-height: 85dvh;
74
+ --ds-global-size-border-0: 0rem;
75
+ --ds-global-size-border-1: 0.0625rem;
76
+ --ds-global-size-border-2: 0.125rem;
77
+ --ds-global-size-border-3: 0.25rem;
78
+ --ds-global-size-radius-0: 0rem;
79
+ --ds-global-size-radius-1: 0.25rem;
80
+ --ds-global-size-radius-2: 0.75rem;
81
+ --ds-global-size-radius-3: 9999px;
82
+ --ds-global-size-breakpoint-1: 769px;
83
+ --ds-global-size-breakpoint-2: 1024px;
84
+ --ds-global-size-breakpoint-3: 1280px;
85
+ --ds-global-size-breakpoint-4: 1440px;
86
+ --ds-global-size-breakpoint-5: 1920px;
87
+ --ds-global-size-container-1: 320px;
88
+ --ds-global-size-container-2: 480px;
89
+ --ds-global-size-container-3: 640px;
90
+ --ds-global-size-container-4: 896px;
91
+ --ds-global-size-container-5: 1496px;
92
+ --ds-global-size-container-full: 100%;
93
+ --ds-global-size-space-0: 0rem;
94
+ --ds-global-size-space-1: 0.0625rem;
95
+ --ds-global-size-space-2: 0.125rem;
96
+ --ds-global-size-space-4: 0.25rem;
97
+ --ds-global-size-space-8: 0.5rem;
98
+ --ds-global-size-space-12: 0.75rem;
99
+ --ds-global-size-space-14: 0.875rem;
100
+ --ds-global-size-space-16: 1rem;
101
+ --ds-global-size-space-20: 1.25rem;
102
+ --ds-global-size-space-24: 1.5rem;
103
+ --ds-global-size-space-32: 2rem;
104
+ --ds-global-size-space-40: 2.5rem;
105
+ --ds-global-size-space-48: 3rem;
106
+ --ds-global-size-space-56: 3.5rem;
107
+ --ds-global-size-space-64: 4rem;
108
+ --ds-global-size-space-72: 4.5rem;
109
+ --ds-global-size-space-96: 6rem;
110
+ --ds-global-size-space-128: 8rem;
111
+ --ds-global-size-space-auto: auto;
6
112
  --ds-global-color-white: #ffffff;
7
113
  --ds-global-color-black: #000000;
8
114
  --ds-global-color-neutral: rgba(255, 255, 255, 0);
@@ -73,27 +179,6 @@
73
179
  --ds-global-color-primary-4: #293485;
74
180
  --ds-global-color-primary-5: #000d6e;
75
181
  --ds-global-color-primary-6: #000739;
76
- --ds-global-elevation-shadow-0: none;
77
- --ds-global-elevation-shadow-1: 0 2px 5px 1px rgba(0, 7, 57, 0.12);
78
- --ds-global-elevation-shadow-2: 0 4px 4px 0 rgba(0, 7, 57, 0.15);
79
- --ds-global-elevation-shadow-3: 0 0 10px 0 rgba(0, 7, 57, 0.15);
80
- --ds-global-elevation-shadow-4: 0 0 30px 0 rgba(0, 7, 57, 0.15);
81
- --ds-global-elevation-opacity-0: 0;
82
- --ds-global-elevation-opacity-30: 0.3;
83
- --ds-global-elevation-opacity-40: 0.4;
84
- --ds-global-elevation-opacity-50: 0.5;
85
- --ds-global-elevation-opacity-60: 0.6;
86
- --ds-global-elevation-opacity-80: 0.8;
87
- --ds-global-elevation-opacity-100: 1;
88
- --ds-global-elevation-z-index-100: 100;
89
- --ds-global-elevation-z-index-200: 200;
90
- --ds-global-elevation-z-index-300: 300;
91
- --ds-global-elevation-z-index-400: 400;
92
- --ds-global-elevation-z-index-1000: 1000;
93
- --ds-global-elevation-z-index-1100: 1100;
94
- --ds-global-elevation-z-index-1200: 1200;
95
- --ds-global-elevation-z-index-1300: 1300;
96
- --ds-global-elevation-z-index-behind-all: -999999;
97
182
  --ds-global-font-shadow-0: none;
98
183
  --ds-global-font-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5);
99
184
  --ds-global-font-size-0: 0rem;
@@ -118,112 +203,27 @@
118
203
  --ds-global-font-line-height-2: 1.3;
119
204
  --ds-global-font-line-height-3: 1.5;
120
205
  --ds-global-font-line-height-4: 2;
121
- --ds-global-size-border-0: 0rem;
122
- --ds-global-size-border-1: 0.0625rem;
123
- --ds-global-size-border-2: 0.125rem;
124
- --ds-global-size-border-3: 0.25rem;
125
- --ds-global-size-radius-0: 0rem;
126
- --ds-global-size-radius-1: 0.25rem;
127
- --ds-global-size-radius-2: 0.75rem;
128
- --ds-global-size-radius-3: 9999px;
129
- --ds-global-size-breakpoint-1: 769px;
130
- --ds-global-size-breakpoint-2: 1024px;
131
- --ds-global-size-breakpoint-3: 1280px;
132
- --ds-global-size-breakpoint-4: 1440px;
133
- --ds-global-size-breakpoint-5: 1920px;
134
- --ds-global-size-container-1: 320px;
135
- --ds-global-size-container-2: 480px;
136
- --ds-global-size-container-3: 640px;
137
- --ds-global-size-container-4: 896px;
138
- --ds-global-size-container-5: 1496px;
139
- --ds-global-size-container-full: 100%;
140
- --ds-global-size-space-0: 0rem;
141
- --ds-global-size-space-1: 0.0625rem;
142
- --ds-global-size-space-2: 0.125rem;
143
- --ds-global-size-space-4: 0.25rem;
144
- --ds-global-size-space-8: 0.5rem;
145
- --ds-global-size-space-12: 0.75rem;
146
- --ds-global-size-space-14: 0.875rem;
147
- --ds-global-size-space-16: 1rem;
148
- --ds-global-size-space-20: 1.25rem;
149
- --ds-global-size-space-24: 1.5rem;
150
- --ds-global-size-space-32: 2rem;
151
- --ds-global-size-space-40: 2.5rem;
152
- --ds-global-size-space-48: 3rem;
153
- --ds-global-size-space-56: 3.5rem;
154
- --ds-global-size-space-64: 4rem;
155
- --ds-global-size-space-72: 4.5rem;
156
- --ds-global-size-space-96: 6rem;
157
- --ds-global-size-space-128: 8rem;
158
- --ds-global-size-space-auto: auto;
159
- --ds-alias-interaction-focus-size-inner: 2;
160
- --ds-alias-interaction-focus-size-outer: 5;
161
- --ds-alias-interaction-focus-size-inner-inset: 3;
162
- --ds-alias-interaction-focus-size-outer-inset: 5;
163
- --ds-backdrop-filter: blur(4px);
164
- --ds-footer-space-gap-column: 0.5rem 1rem;
165
- --ds-footer-space-link-gap: 0.5rem 1.5rem;
166
- --ds-footer-space-padding-base: 2rem;
167
- --ds-heading-color-base: inherit;
168
- --ds-card-color-base-text: inherit;
169
- --ds-card-color-white-text: inherit;
170
- --ds-card-color-info-text: inherit;
171
- --ds-card-color-success-text: inherit;
172
- --ds-card-color-warning-text: inherit;
173
- --ds-card-color-danger-text: inherit;
174
- --ds-card-color-grey-light-text: inherit;
175
- --ds-card-color-grey-text: inherit;
176
- --ds-card-color-red-lighter-text: inherit;
177
- --ds-card-color-red-light-text: inherit;
178
- --ds-card-color-red-text: inherit;
179
- --ds-card-color-purple-lighter-text: inherit;
180
- --ds-card-color-purple-light-text: inherit;
181
- --ds-card-color-purple-text: inherit;
182
- --ds-card-color-green-lighter-text: inherit;
183
- --ds-card-color-green-light-text: inherit;
184
- --ds-card-color-green-text: inherit;
185
- --ds-card-color-yellow-lighter-text: inherit;
186
- --ds-card-color-yellow-light-text: inherit;
187
- --ds-card-color-yellow-text: inherit;
188
- --ds-close-color-background-hover: rgba(0, 7, 57, 0.1);
189
- --ds-close-color-background-active: rgba(0, 7, 57, 0.3);
190
- --ds-close-color-background-inverted-hover: rgba(255, 255, 255, 0.3);
191
- --ds-close-color-background-inverted-active: rgba(255, 255, 255, 0.5);
192
- --ds-notification-color-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
193
- --ds-notification-color-info-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
194
- --ds-notification-color-success-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
195
- --ds-notification-color-warning-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
196
- --ds-notification-color-danger-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
197
- --ds-notification-color-outline-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
198
- --ds-notification-color-outline-purple-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
199
- --ds-notification-color-outline-green-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
200
- --ds-notification-color-outline-yellow-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
201
- --ds-notification-color-outline-red-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
202
- --ds-link-family: inherit;
203
- --ds-navbar-base-layout-height: 5rem;
204
- --ds-navbar-base-hamburger-transition-duration: 0.2s;
205
- --ds-navbar-base-sidebar-max-width: 25rem;
206
- --ds-navbar-base-sidebar-slide-duration: 300ms;
207
- --ds-navbar-base-sidebar-backdrop-color: #000000;
208
- --ds-navbar-base-sidebar-panel-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
209
- --ds-navbar-base-menu-item-transition-duration: 0.2s;
210
- --ds-segment-item-icon-gap: 0.375rem;
211
- --ds-accordion-summary-color-base: inherit;
212
- --ds-tabs-panel-padding: 1rem 0;
213
- --ds-tabs-tab-padding: 0.25rem 1rem;
214
- --ds-tab-panel-padding: 1rem 0;
215
- --ds-steps-circle-size: 2rem;
216
- --ds-steps-circle-size-sm: 1.5rem;
217
- --ds-steps-panel-padding: 1rem 0;
218
- --ds-step-panel-padding: 1rem 0;
219
- --ds-carousel-dot-size: 8px;
220
- --ds-carousel-dot-size-active: 10px;
221
- --ds-table-cell-padding: 0.5em 0.75em;
222
- --ds-table-cell-border-width: 0 0 2px;
223
- --ds-table-head-cell-border-width: 0 0 1px;
224
- --ds-table-foot-cell-border-width: 0 0 0;
225
- --ds-popup-min-width: 16rem;
226
- --ds-drawer-max-height: 85dvh;
206
+ --ds-global-elevation-shadow-0: none;
207
+ --ds-global-elevation-shadow-1: 0 2px 5px 1px rgba(0, 7, 57, 0.12);
208
+ --ds-global-elevation-shadow-2: 0 4px 4px 0 rgba(0, 7, 57, 0.15);
209
+ --ds-global-elevation-shadow-3: 0 0 10px 0 rgba(0, 7, 57, 0.15);
210
+ --ds-global-elevation-shadow-4: 0 0 30px 0 rgba(0, 7, 57, 0.15);
211
+ --ds-global-elevation-z-index-100: 100;
212
+ --ds-global-elevation-z-index-200: 200;
213
+ --ds-global-elevation-z-index-300: 300;
214
+ --ds-global-elevation-z-index-400: 400;
215
+ --ds-global-elevation-z-index-1000: 1000;
216
+ --ds-global-elevation-z-index-1100: 1100;
217
+ --ds-global-elevation-z-index-1200: 1200;
218
+ --ds-global-elevation-z-index-1300: 1300;
219
+ --ds-global-elevation-z-index-behind-all: -999999;
220
+ --ds-global-elevation-opacity-0: 0;
221
+ --ds-global-elevation-opacity-30: 0.3;
222
+ --ds-global-elevation-opacity-40: 0.4;
223
+ --ds-global-elevation-opacity-50: 0.5;
224
+ --ds-global-elevation-opacity-60: 0.6;
225
+ --ds-global-elevation-opacity-80: 0.8;
226
+ --ds-global-elevation-opacity-100: 1;
227
227
  --ds-alias-background-color-white: var(--ds-global-color-white);
228
228
  --ds-alias-background-color-selected: var(--ds-global-color-primary-2);
229
229
  --ds-alias-background-color-hover: var(--ds-global-color-grey-0);
@@ -514,8 +514,8 @@
514
514
  --ds-navbar-light-button-color-border-base: var(--ds-global-color-grey-1);
515
515
  --ds-navbar-light-button-color-border-hover: var(--ds-global-color-sky-1);
516
516
  --ds-navbar-light-button-color-border-active: var(--ds-global-color-sky-1);
517
- --ds-snackbar-default-color-progress-bar-base: var(--ds-global-color-primary-5);
518
- --ds-snackbar-default-color-progress-bg-base: var(--ds-global-color-primary-2);
517
+ --ds-snackbar-primary-color-progress-bar-base: var(--ds-global-color-primary-5);
518
+ --ds-snackbar-primary-color-progress-bg-base: var(--ds-global-color-primary-2);
519
519
  --ds-snackbar-success-color-progress-bar-base: var(--ds-global-color-success-6);
520
520
  --ds-snackbar-success-color-progress-bg-base: var(--ds-global-color-success-3);
521
521
  --ds-snackbar-info-color-progress-bar-base: var(--ds-global-color-info-6);
@@ -524,8 +524,8 @@
524
524
  --ds-snackbar-warning-color-progress-bg-base: var(--ds-global-color-warning-3);
525
525
  --ds-snackbar-danger-color-progress-bar-base: var(--ds-global-color-danger-6);
526
526
  --ds-snackbar-danger-color-progress-bg-base: var(--ds-global-color-danger-3);
527
- --ds-toast-default-color-progress-bar-base: var(--ds-global-color-primary-5);
528
- --ds-toast-default-color-progress-bg-base: var(--ds-global-color-primary-2);
527
+ --ds-toast-primary-color-progress-bar-base: var(--ds-global-color-primary-5);
528
+ --ds-toast-primary-color-progress-bg-base: var(--ds-global-color-primary-2);
529
529
  --ds-toast-success-color-progress-bar-base: var(--ds-global-color-success-6);
530
530
  --ds-toast-success-color-progress-bg-base: var(--ds-global-color-success-3);
531
531
  --ds-toast-info-color-progress-bar-base: var(--ds-global-color-info-6);
@@ -596,54 +596,54 @@
596
596
  --ds-heading-5-size-mobile: var(--ds-alias-text-size-base-mobile);
597
597
  --ds-heading-5-size-tablet: var(--ds-alias-text-size-base-tablet);
598
598
  --ds-heading-5-size-desktop: var(--ds-alias-text-size-base-desktop);
599
- --ds-heading-family: var(--ds-alias-text-family-heading);
600
- --ds-heading-weight: var(--ds-alias-text-weight-bold);
599
+ --ds-heading-font-family: var(--ds-alias-text-family-heading);
600
+ --ds-heading-font-weight: var(--ds-alias-text-weight-bold);
601
601
  --ds-heading-line-height: var(--ds-alias-text-line-height-heading);
602
- --ds-heading-color-primary: var(--ds-alias-text-color-primary);
603
- --ds-heading-color-white: var(--ds-alias-text-color-white);
604
- --ds-heading-color-info: var(--ds-alias-text-color-info);
605
- --ds-heading-color-success: var(--ds-alias-text-color-success);
606
- --ds-heading-color-warning: var(--ds-alias-text-color-warning);
607
- --ds-heading-color-danger: var(--ds-alias-text-color-danger);
608
- --ds-heading-display1-space: var(--ds-alias-space-base-mobile);
609
- --ds-heading-display1-size-mobile: var(--ds-alias-text-size-5xl-mobile);
610
- --ds-heading-display1-size-tablet: var(--ds-alias-text-size-5xl-tablet);
611
- --ds-heading-display1-size-desktop: var(--ds-alias-text-size-5xl-desktop);
612
- --ds-heading-display2-space: var(--ds-alias-space-base-mobile);
613
- --ds-heading-display2-size-mobile: var(--ds-alias-text-size-4xl-mobile);
614
- --ds-heading-display2-size-tablet: var(--ds-alias-text-size-4xl-tablet);
615
- --ds-heading-display2-size-desktop: var(--ds-alias-text-size-4xl-desktop);
616
- --ds-heading-subtitle-family: var(--ds-alias-text-family-heading);
602
+ --ds-heading-primary-color-base: var(--ds-alias-text-color-primary);
603
+ --ds-heading-white-color-base: var(--ds-alias-text-color-white);
604
+ --ds-heading-info-color-base: var(--ds-alias-text-color-info);
605
+ --ds-heading-success-color-base: var(--ds-alias-text-color-success);
606
+ --ds-heading-warning-color-base: var(--ds-alias-text-color-warning);
607
+ --ds-heading-danger-color-base: var(--ds-alias-text-color-danger);
608
+ --ds-heading-display-1-space: var(--ds-alias-space-base-mobile);
609
+ --ds-heading-display-1-size-mobile: var(--ds-alias-text-size-5xl-mobile);
610
+ --ds-heading-display-1-size-tablet: var(--ds-alias-text-size-5xl-tablet);
611
+ --ds-heading-display-1-size-desktop: var(--ds-alias-text-size-5xl-desktop);
612
+ --ds-heading-display-2-space: var(--ds-alias-space-base-mobile);
613
+ --ds-heading-display-2-size-mobile: var(--ds-alias-text-size-4xl-mobile);
614
+ --ds-heading-display-2-size-tablet: var(--ds-alias-text-size-4xl-tablet);
615
+ --ds-heading-display-2-size-desktop: var(--ds-alias-text-size-4xl-desktop);
616
+ --ds-heading-subtitle-font-family: var(--ds-alias-text-family-heading);
617
617
  --ds-heading-subtitle-line-height: var(--ds-alias-text-line-height-heading);
618
- --ds-heading-subtitle-weight: var(--ds-alias-text-weight-light);
619
- --ds-badge-text-family: var(--ds-alias-text-family-heading);
620
- --ds-badge-text-weight: var(--ds-alias-text-weight-bold);
621
- --ds-badge-text-size-sm: var(--ds-alias-text-size-none-mobile);
622
- --ds-badge-text-size-base: var(--ds-alias-text-size-xs-mobile);
623
- --ds-badge-text-size-lg: var(--ds-alias-text-size-base-mobile);
618
+ --ds-heading-subtitle-font-weight: var(--ds-alias-text-weight-light);
624
619
  --ds-badge-size-sm: var(--ds-alias-space-sm-mobile);
625
620
  --ds-badge-size-base: var(--ds-alias-space-lg-mobile);
626
621
  --ds-badge-size-lg: var(--ds-alias-space-xl-mobile);
627
- --ds-badge-color-base-text: var(--ds-alias-text-color-primary);
628
- --ds-badge-color-base-background: var(--ds-alias-background-color-red);
629
- --ds-badge-color-info-text: var(--ds-alias-text-color-primary);
630
- --ds-badge-color-info-background: var(--ds-alias-background-color-purple);
631
- --ds-badge-color-success-text: var(--ds-alias-text-color-primary);
632
- --ds-badge-color-success-background: var(--ds-alias-background-color-green);
633
- --ds-badge-color-warning-text: var(--ds-alias-text-color-primary);
634
- --ds-badge-color-warning-background: var(--ds-alias-background-color-yellow-light);
635
- --ds-badge-color-danger-text: var(--ds-alias-text-color-primary);
636
- --ds-badge-color-danger-background: var(--ds-alias-background-color-red);
637
- --ds-badge-color-red-text: var(--ds-alias-text-color-primary);
638
- --ds-badge-color-red-background: var(--ds-alias-background-color-red-light);
639
- --ds-badge-color-purple-text: var(--ds-alias-text-color-primary);
640
- --ds-badge-color-purple-background: var(--ds-alias-background-color-purple-light);
641
- --ds-badge-color-green-text: var(--ds-alias-text-color-primary);
642
- --ds-badge-color-green-background: var(--ds-alias-background-color-green-light);
643
- --ds-badge-color-yellow-text: var(--ds-alias-text-color-primary);
644
- --ds-badge-color-yellow-background: var(--ds-alias-background-color-yellow-lighter);
645
- --ds-badge-color-grey-text: var(--ds-alias-text-color-grey);
646
- --ds-badge-color-grey-background: var(--ds-alias-background-color-grey-light);
622
+ --ds-badge-font-family: var(--ds-alias-text-family-heading);
623
+ --ds-badge-font-weight: var(--ds-alias-text-weight-bold);
624
+ --ds-badge-font-size-sm: var(--ds-alias-text-size-none-mobile);
625
+ --ds-badge-font-size-base: var(--ds-alias-text-size-xs-mobile);
626
+ --ds-badge-font-size-lg: var(--ds-alias-text-size-base-mobile);
627
+ --ds-badge-base-color-text: var(--ds-alias-text-color-primary);
628
+ --ds-badge-base-color-background: var(--ds-alias-background-color-red);
629
+ --ds-badge-info-color-text: var(--ds-alias-text-color-primary);
630
+ --ds-badge-info-color-background: var(--ds-alias-background-color-purple);
631
+ --ds-badge-success-color-text: var(--ds-alias-text-color-primary);
632
+ --ds-badge-success-color-background: var(--ds-alias-background-color-green);
633
+ --ds-badge-warning-color-text: var(--ds-alias-text-color-primary);
634
+ --ds-badge-warning-color-background: var(--ds-alias-background-color-yellow-light);
635
+ --ds-badge-danger-color-text: var(--ds-alias-text-color-primary);
636
+ --ds-badge-danger-color-background: var(--ds-alias-background-color-red);
637
+ --ds-badge-red-color-text: var(--ds-alias-text-color-primary);
638
+ --ds-badge-red-color-background: var(--ds-alias-background-color-red);
639
+ --ds-badge-purple-color-text: var(--ds-alias-text-color-primary);
640
+ --ds-badge-purple-color-background: var(--ds-alias-background-color-purple);
641
+ --ds-badge-green-color-text: var(--ds-alias-text-color-primary);
642
+ --ds-badge-green-color-background: var(--ds-alias-background-color-green);
643
+ --ds-badge-yellow-color-text: var(--ds-alias-text-color-primary);
644
+ --ds-badge-yellow-color-background: var(--ds-alias-background-color-yellow);
645
+ --ds-badge-grey-color-text: var(--ds-alias-text-color-grey);
646
+ --ds-badge-grey-color-background: var(--ds-alias-background-color-grey-light);
647
647
  --ds-button-family: var(--ds-alias-text-family-heading);
648
648
  --ds-button-weight: var(--ds-alias-text-weight-bold);
649
649
  --ds-button-line-height: var(--ds-alias-text-line-height-heading);
@@ -915,9 +915,9 @@
915
915
  --ds-close-radius: var(--ds-alias-radius-rounded);
916
916
  --ds-close-color-background-base: var(--ds-alias-background-color-transparent);
917
917
  --ds-close-color-background-disabled: var(--ds-alias-background-color-grey);
918
- --ds-close-color-icon-base: var(--ds-alias-text-color-primary);
919
- --ds-close-color-icon-inverted: var(--ds-alias-text-color-white);
920
- --ds-close-color-icon-disabled: var(--ds-alias-text-color-disabled);
918
+ --ds-close-icon-color-base: var(--ds-alias-text-color-primary);
919
+ --ds-close-icon-color-disabled: var(--ds-alias-text-color-disabled);
920
+ --ds-close-inverted-icon-color-base: var(--ds-alias-text-color-white);
921
921
  --ds-date-calendar-family: var(--ds-alias-text-family-body);
922
922
  --ds-date-calendar-weight: var(--ds-alias-text-weight-bold);
923
923
  --ds-date-calendar-radius: var(--ds-alias-radius-base);
@@ -1256,9 +1256,9 @@
1256
1256
  --ds-navbar-light-button-color-text-hover: var(--ds-alias-text-color-primary-hover);
1257
1257
  --ds-navbar-light-button-color-text-active: var(--ds-alias-text-color-primary-active);
1258
1258
  --ds-snackbar-radius: var(--ds-alias-radius-base);
1259
- --ds-snackbar-default-color-bg-base: var(--ds-alias-background-color-grey-light);
1260
- --ds-snackbar-default-color-border-base: var(--ds-alias-background-color-grey-light);
1261
- --ds-snackbar-default-color-text-base: var(--ds-alias-text-color-primary);
1259
+ --ds-snackbar-primary-color-bg-base: var(--ds-alias-background-color-grey-light);
1260
+ --ds-snackbar-primary-color-border-base: var(--ds-alias-background-color-grey-light);
1261
+ --ds-snackbar-primary-color-text-base: var(--ds-alias-text-color-primary);
1262
1262
  --ds-snackbar-success-color-bg-base: var(--ds-alias-background-color-success-light);
1263
1263
  --ds-snackbar-success-color-border-base: var(--ds-alias-background-color-success-light);
1264
1264
  --ds-snackbar-success-color-text-base: var(--ds-alias-text-color-primary);
@@ -1276,12 +1276,12 @@
1276
1276
  --ds-spinner-circle-size: var(--ds-alias-space-lg-mobile);
1277
1277
  --ds-spinner-circle-color-background: var(--ds-alias-background-color-grey);
1278
1278
  --ds-spinner-circle-color-progress: var(--ds-alias-background-color-primary);
1279
- --ds-spinner-circle-color-inverted-background: var(--ds-alias-background-color-white);
1280
- --ds-spinner-circle-color-inverted-progress: var(--ds-alias-background-color-primary);
1279
+ --ds-spinner-inverted-circle-color-background: var(--ds-alias-background-color-white);
1280
+ --ds-spinner-inverted-circle-color-progress: var(--ds-alias-background-color-primary);
1281
1281
  --ds-toast-radius: var(--ds-alias-radius-base);
1282
- --ds-toast-default-color-bg-base: var(--ds-alias-background-color-grey-light);
1283
- --ds-toast-default-color-border-base: var(--ds-alias-background-color-grey-light);
1284
- --ds-toast-default-color-text-base: var(--ds-alias-text-color-primary);
1282
+ --ds-toast-primary-color-bg-base: var(--ds-alias-background-color-grey-light);
1283
+ --ds-toast-primary-color-border-base: var(--ds-alias-background-color-grey-light);
1284
+ --ds-toast-primary-color-text-base: var(--ds-alias-text-color-primary);
1285
1285
  --ds-toast-success-color-bg-base: var(--ds-alias-background-color-success-light);
1286
1286
  --ds-toast-success-color-border-base: var(--ds-alias-background-color-success-light);
1287
1287
  --ds-toast-success-color-text-base: var(--ds-alias-text-color-primary);
@@ -1347,8 +1347,8 @@
1347
1347
  --ds-tag-yellow-light-color-text-base: var(--ds-alias-text-color-primary);
1348
1348
  --ds-tag-yellow-light-color-bg-base: var(--ds-alias-background-color-yellow-light);
1349
1349
  --ds-tag-yellow-dark-color-text-base: var(--ds-alias-text-color-white);
1350
- --ds-tag-default-color-text-base: var(--ds-alias-text-color-primary);
1351
- --ds-tag-default-color-bg-base: var(--ds-alias-background-color-grey);
1350
+ --ds-tag-base-color-text-base: var(--ds-alias-text-color-primary);
1351
+ --ds-tag-base-color-bg-base: var(--ds-alias-background-color-grey);
1352
1352
  --ds-segment-radius: var(--ds-alias-radius-base);
1353
1353
  --ds-segment-background: var(--ds-alias-background-color-grey-light);
1354
1354
  --ds-segment-gap: var(--ds-alias-space-2xs-mobile);
@@ -1611,8 +1611,8 @@
1611
1611
  --ds-heading-3-size: var(--ds-alias-text-size-xl-mobile);
1612
1612
  --ds-heading-4-size: var(--ds-alias-text-size-lg-mobile);
1613
1613
  --ds-heading-5-size: var(--ds-alias-text-size-base-mobile);
1614
- --ds-heading-display1-size: var(--ds-alias-text-size-5xl-mobile);
1615
- --ds-heading-display2-size: var(--ds-alias-text-size-4xl-mobile);
1614
+ --ds-heading-display-1-size: var(--ds-alias-text-size-5xl-mobile);
1615
+ --ds-heading-display-2-size: var(--ds-alias-text-size-4xl-mobile);
1616
1616
  --ds-card-space-sm: var(--ds-alias-space-base-mobile);
1617
1617
  --ds-card-space-base: var(--ds-alias-space-base-mobile);
1618
1618
  --ds-card-space-md: var(--ds-alias-space-base-mobile);
@@ -1668,8 +1668,8 @@
1668
1668
  --ds-heading-3-size-device: var(--ds-alias-text-size-xl-mobile);
1669
1669
  --ds-heading-4-size-device: var(--ds-alias-text-size-lg-mobile);
1670
1670
  --ds-heading-5-size-device: var(--ds-alias-text-size-base-mobile);
1671
- --ds-heading-display1-size-device: var(--ds-alias-text-size-5xl-mobile);
1672
- --ds-heading-display2-size-device: var(--ds-alias-text-size-4xl-mobile);
1671
+ --ds-heading-display-1-size-device: var(--ds-alias-text-size-5xl-mobile);
1672
+ --ds-heading-display-2-size-device: var(--ds-alias-text-size-4xl-mobile);
1673
1673
  --ds-card-space-sm-device: var(--ds-alias-space-base-mobile);
1674
1674
  --ds-card-space-base-device: var(--ds-alias-space-base-mobile);
1675
1675
  --ds-card-space-md-device: var(--ds-alias-space-base-mobile);
@@ -1696,7 +1696,7 @@
1696
1696
  /* Device tokens: Tablet */
1697
1697
 
1698
1698
  @media (min-width: 769px) {
1699
- :root {
1699
+ :root, :host {
1700
1700
  --ds-alias-breakpoint-device: var(--ds-global-size-breakpoint-1);
1701
1701
  --ds-alias-container-space-device: var(--ds-global-size-space-40);
1702
1702
  --ds-alias-space-none-device: var(--ds-global-size-space-0);
@@ -1730,8 +1730,8 @@
1730
1730
  --ds-heading-3-size-device: var(--ds-alias-text-size-xl-tablet);
1731
1731
  --ds-heading-4-size-device: var(--ds-alias-text-size-lg-tablet);
1732
1732
  --ds-heading-5-size-device: var(--ds-alias-text-size-base-tablet);
1733
- --ds-heading-display1-size-device: var(--ds-alias-text-size-5xl-tablet);
1734
- --ds-heading-display2-size-device: var(--ds-alias-text-size-4xl-tablet);
1733
+ --ds-heading-display-1-size-device: var(--ds-alias-text-size-5xl-tablet);
1734
+ --ds-heading-display-2-size-device: var(--ds-alias-text-size-4xl-tablet);
1735
1735
  --ds-card-space-sm-device: var(--ds-alias-space-base-mobile);
1736
1736
  --ds-card-space-base-device: var(--ds-alias-space-lg-mobile);
1737
1737
  --ds-card-space-md-device: var(--ds-alias-space-lg-mobile);
@@ -1759,7 +1759,7 @@
1759
1759
  /* Device tokens: Desktop */
1760
1760
 
1761
1761
  @media (min-width: 1024px) {
1762
- :root {
1762
+ :root, :host {
1763
1763
  --ds-alias-breakpoint-device: var(--ds-global-size-breakpoint-2);
1764
1764
  --ds-alias-container-space-device: var(--ds-global-size-space-48);
1765
1765
  --ds-alias-space-none-device: var(--ds-global-size-space-0);
@@ -1790,8 +1790,8 @@
1790
1790
  --ds-heading-3-size-device: var(--ds-alias-text-size-xl-desktop);
1791
1791
  --ds-heading-4-size-device: var(--ds-alias-text-size-lg-desktop);
1792
1792
  --ds-heading-5-size-device: var(--ds-alias-text-size-base-desktop);
1793
- --ds-heading-display1-size-device: var(--ds-alias-text-size-5xl-desktop);
1794
- --ds-heading-display2-size-device: var(--ds-alias-text-size-4xl-desktop);
1793
+ --ds-heading-display-1-size-device: var(--ds-alias-text-size-5xl-desktop);
1794
+ --ds-heading-display-2-size-device: var(--ds-alias-text-size-4xl-desktop);
1795
1795
  --ds-card-space-sm-device: var(--ds-alias-space-base-mobile);
1796
1796
  --ds-card-space-base-device: var(--ds-alias-space-lg-mobile);
1797
1797
  --ds-card-space-md-device: var(--ds-alias-space-xl-mobile);