@eui/eds-styles 22.0.0-alpha.40 → 22.0.0-alpha.42

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 (15) hide show
  1. package/dist/base/01-base/mixins.scss +84 -16
  2. package/dist/base/02-tokens/colors-semantic-dark-theme.scss +1 -19
  3. package/dist/base/02-tokens/colors-semantic.scss +14 -27
  4. package/dist/base/02-tokens/ecl/semantic/_color-dark.scss +1 -1
  5. package/dist/base/02-tokens/ecl/semantic/_color.scss +1 -1
  6. package/dist/base/02-tokens/typography-semantic.scss +33 -9
  7. package/dist/eds-showcase-exports.css +1 -1
  8. package/dist/eds-showcase-exports.css.map +1 -1
  9. package/dist/eds-utilities.css +1 -1
  10. package/dist/eds-utilities.css.map +1 -1
  11. package/dist/eds-vars.css +1 -1
  12. package/dist/eds-vars.css.map +1 -1
  13. package/dist/eds.css +1 -1
  14. package/dist/eds.css.map +1 -1
  15. package/package.json +1 -1
package/dist/base/01-base/mixins.scss CHANGED
@@ -41,36 +41,44 @@ $default-feature: "min-width";
41
41
  transition: none;
42
42
  }
43
43
  }
44
- @mixin eds-focus-ring($offset: 1px) {
44
+ @mixin eds-focus-visible-critical($offset: -2px, $size: 2px) {
45
+ &:focus-visible:not([readonly]) {
46
+ outline: $size solid var(--eds-c-border-critical) !important;
47
+ outline-offset: $offset !important;
48
+ transition: none;
49
+ }
50
+ }
51
+
52
+ @mixin eds-focus-ring($offset: 2px) {
45
53
  &:focus:not([readonly]) {
46
54
  outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
47
55
  outline-offset: $offset !important;
48
- border-radius: var(--eds-br-xs) !important;
56
+ // border-radius: var(--eds-br-xs) !important;
49
57
  }
50
58
  }
51
- @mixin eds-focus-ring-rounded($offset: 1px) {
59
+ @mixin eds-focus-ring-critical($offset: 2px) {
52
60
  &:focus:not([readonly]) {
53
- outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
61
+ outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;
54
62
  outline-offset: $offset !important;
55
- border-radius: var(--eds-br-full) !important;
63
+ // border-radius: var(--eds-br-xs) !important;
56
64
  }
57
65
  }
58
- @mixin eds-focus-visible-ring($offset: 1px) {
66
+
67
+ @mixin eds-focus-visible-ring($offset: 2px) {
59
68
  &:focus-visible:not([readonly]) {
60
69
  outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
61
70
  outline-offset: $offset !important;
62
- border-radius: var(--eds-br-xs) !important;
71
+ // border-radius: var(--eds-br-xs) !important;
63
72
  }
64
73
  }
65
- @mixin eds-focus-visible-ring-rounded($offset: 1px) {
74
+ @mixin eds-focus-visible-ring-critical($offset: 2px) {
66
75
  &:focus-visible:not([readonly]) {
67
- outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
76
+ outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;
68
77
  outline-offset: $offset !important;
69
- border-radius: var(--eds-br-full) !important;
78
+ // border-radius: var(--eds-br-xs) !important;
70
79
  }
71
80
  }
72
81
 
73
-
74
82
  @mixin loading-indicator() {
75
83
  align-items: center;
76
84
  display: flex;
@@ -110,17 +118,28 @@ $default-feature: "min-width";
110
118
  }
111
119
  }
112
120
 
113
- // EDS Input mixin — common styles for text inputs, textareas, selects
121
+ // EDS Input mixin — common styles for text inputs, textareas, selects.
122
+ //
123
+ // Size is parametrized through private custom properties that default to the
124
+ // `m` size. Components reflect a `size` host attribute and override these
125
+ // privates per `:host([size="s"])` / `:host([size="l"])` (see eds-input-size()).
114
126
  @mixin eds-input() {
115
- font: var(--eds-f-paragraph-m);
127
+ // Size-driven privates (defaults = `m`)
128
+ --_eds-input-min-height: var(--eds-si-4xl);
129
+ --_eds-input-pad-v: var(--eds-sp-xs);
130
+ --_eds-input-pad-h: var(--eds-sp-s);
131
+ --_eds-input-font: var(--eds-f-paragraph-m);
132
+ --_eds-input-placeholder-font: var(--eds-f-placeholder-m);
133
+
134
+ font: var(--_eds-input-font);
116
135
  appearance: none;
117
136
  background-color: var(--eds-c-surface-elevation);
118
137
  border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
119
138
  border-radius: var(--eds-br-s);
120
139
  box-shadow: none;
121
140
  color: var(--eds-c-foreground-default);
122
- min-height: var(--eds-si-3xl);
123
- padding: var(--eds-sp-xs) var(--eds-sp-s);
141
+ min-height: var(--_eds-input-min-height);
142
+ padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);
124
143
  width: 100%;
125
144
  @include eds-focus-visible();
126
145
 
@@ -129,7 +148,8 @@ $default-feature: "min-width";
129
148
  }
130
149
 
131
150
  &::placeholder {
132
- color: var(--eds-c-foreground-subtler);
151
+ color: var(--eds-c-foreground-placeholder);
152
+ font: var(--_eds-input-placeholder-font);
133
153
  opacity: 1;
134
154
  }
135
155
 
@@ -165,3 +185,51 @@ $default-feature: "min-width";
165
185
  }
166
186
  }
167
187
  }
188
+
189
+ // EDS Input size overrides — applies the `s` / `l` size privates.
190
+ // Call inside a component's `:host` scope (after `eds-input()`); it emits the
191
+ // `[input-size="s"]` / `[input-size="l"]` branches. The size variant is
192
+ // reflected as the `input-size` host attribute (NOT `size`, which is reserved
193
+ // for the native `<select size>` / `<input size>` DOM attribute). The `m` size
194
+ // is the default already set by `eds-input()`, so no `[input-size="m"]` branch
195
+ // is needed.
196
+ @mixin eds-input-size() {
197
+ &[input-size="s"] {
198
+ --_eds-input-min-height: var(--eds-si-3xl); // 32px
199
+ --_eds-input-pad-v: var(--eds-sp-2xs);
200
+ --_eds-input-pad-h: var(--eds-sp-s);
201
+ }
202
+
203
+ &[input-size="l"] {
204
+ --_eds-input-min-height: var(--eds-si-6xl); // 48px
205
+ --_eds-input-pad-v: var(--eds-sp-s);
206
+ --_eds-input-pad-h: var(--eds-sp-m);
207
+ }
208
+ }
209
+
210
+ @mixin eds-input-hover() {
211
+ &:hover:not([aria-disabled="true"]):not(:disabled) {
212
+ box-shadow: var(--eds-sh-1);
213
+
214
+ &:not([aria-disabled="true"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate="true"]):not([invalid="true"]) {
215
+ border-color: var(--eds-c-border-neutral--hover);
216
+ }
217
+
218
+ // checkbox
219
+ &.eds-input-checkbox {
220
+ &:checked:not([readonly]):not([invalid="true"]),
221
+ &[checked="true"]:not([readonly]):not([invalid="true"]),
222
+ &[indeterminate="true"]:not([readonly]) {
223
+ background-color: var(--eds-c-surface-primary--hover);
224
+ }
225
+ }
226
+
227
+ //radio
228
+ &.eds-input-radio {
229
+ &:checked:not([readonly]):not([invalid="true"]) {
230
+ background-color: var(--eds-c-surface-elevation);
231
+ border-color: var(--eds-c-border-primary--hover);
232
+ }
233
+ }
234
+ }
235
+ }
package/dist/base/02-tokens/colors-semantic-dark-theme.scss CHANGED
@@ -120,16 +120,10 @@ $color-semantic-map: (
120
120
 
121
121
  surface-info: map.get(primitive.$color-map, 'blue-600'),
122
122
  on-surface-info: map.get(primitive.$color-map, 'graphite-0'),
123
- surface-info--hover: map.get(primitive.$color-map, 'blue-700'),
124
- on-surface-info--hover: map.get(primitive.$color-map, 'graphite-0'),
125
- surface-info--pressed: map.get(primitive.$color-map, 'blue-800'),
126
- on-surface-info--pressed: map.get(primitive.$color-map, 'graphite-0'),
127
123
  surface-info-subtle: map.get(primitive.$color-map, 'blue-800'),
128
124
  on-surface-info-subtle: map.get(primitive.$color-map, 'blue-100'),
129
125
  surface-info-subtler: map.get(primitive.$color-map, 'blue-950'),
130
126
  on-surface-info-subtler: map.get(primitive.$color-map, 'blue-100'),
131
- surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-100'),
132
- on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),
133
127
 
134
128
  // =============================================
135
129
  // SURFACES — Success
@@ -137,16 +131,10 @@ $color-semantic-map: (
137
131
 
138
132
  surface-success: map.get(primitive.$color-map, 'green-500'),
139
133
  on-surface-success: map.get(primitive.$color-map, 'graphite-0'),
140
- surface-success--hover: map.get(primitive.$color-map, 'green-900'),
141
- on-surface-success--hover: map.get(primitive.$color-map, 'graphite-0'),
142
- surface-success--pressed: map.get(primitive.$color-map, 'green-950'),
143
- on-surface-success--pressed: map.get(primitive.$color-map, 'graphite-0'),
144
134
  surface-success-subtle: map.get(primitive.$color-map, 'green-800'),
145
135
  on-surface-success-subtle: map.get(primitive.$color-map, 'green-50'),
146
136
  surface-success-subtler: map.get(primitive.$color-map, 'green-950'),
147
137
  on-surface-success-subtler: map.get(primitive.$color-map, 'green-100'),
148
- surface-success-subtler--hover: map.get(primitive.$color-map, 'green-200'),
149
- on-surface-success-subtler--hover: map.get(primitive.$color-map, 'green-900'),
150
138
 
151
139
  // =============================================
152
140
  // SURFACES — Warning
@@ -154,16 +142,10 @@ $color-semantic-map: (
154
142
 
155
143
  surface-warning: map.get(primitive.$color-map, 'orange-500'),
156
144
  on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
157
- surface-warning--hover: map.get(primitive.$color-map, 'orange-600'),
158
- on-surface-warning--hover: map.get(primitive.$color-map, 'orange-950'),
159
- surface-warning--pressed: map.get(primitive.$color-map, 'orange-700'),
160
- on-surface-warning--pressed: map.get(primitive.$color-map, 'orange-950'),
161
145
  surface-warning-subtle: map.get(primitive.$color-map, 'orange-700'),
162
146
  on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-50'),
163
147
  surface-warning-subtler: map.get(primitive.$color-map, 'orange-950'),
164
148
  on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
165
- surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-100'),
166
- on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),
167
149
 
168
150
  // =============================================
169
151
  // SURFACES — Color Modes (cm-*)
@@ -250,7 +232,7 @@ $color-semantic-map: (
250
232
  // BORDERS
251
233
  // =============================================
252
234
 
253
- border-brand: map.get(primitive.$color-map, 'silver-fog-50'),
235
+ border: map.get(primitive.$color-map, 'silver-fog-50'),
254
236
  border-divider: map.get(primitive.$color-map, 'graphite-500'),
255
237
  border-disabled: map.get(primitive.$color-map, 'graphite-700'),
256
238
 
package/dist/base/02-tokens/colors-semantic.scss CHANGED
@@ -59,11 +59,11 @@ $color-semantic-map: (
59
59
  // =============================================
60
60
 
61
61
  surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
62
- on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
62
+ on-surface-highlight: map.get(primitive.$color-map, 'silver-fog-950'),
63
63
  surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-400'),
64
- on-surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-950'),
64
+ on-surface-highlight--hover: map.get(primitive.$color-map, 'silver-fog-950'),
65
65
  surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-500'),
66
- on-surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-950'),
66
+ on-surface-highlight--pressed: map.get(primitive.$color-map, 'silver-fog-950'),
67
67
  surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-50'),
68
68
  on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'),
69
69
 
@@ -84,7 +84,7 @@ $color-semantic-map: (
84
84
 
85
85
  surface-neutral: map.get(primitive.$color-map, 'silver-fog-600'),
86
86
  on-surface-neutral: map.get(primitive.$color-map, 'silver-fog-0'),
87
- surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-700'),
87
+ surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-800'),
88
88
  on-surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-0'),
89
89
  surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
90
90
  on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
@@ -92,9 +92,9 @@ $color-semantic-map: (
92
92
  on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),
93
93
  surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-200'),
94
94
  on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-900'),
95
- surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-100'),
95
+ surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-75'),
96
96
  on-surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-900'),
97
- surface-neutral-subtler--hover: map.get(primitive.$color-map, 'silver-fog-75'),
97
+ surface-neutral-subtler--hover: map.get(primitive.$color-map, 'silver-fog-100'),
98
98
  on-surface-neutral-subtler--hover: map.get(primitive.$color-map, 'silver-fog-900'),
99
99
 
100
100
  // =============================================
@@ -120,16 +120,10 @@ $color-semantic-map: (
120
120
 
121
121
  surface-info: map.get(primitive.$color-map, 'blue-600'),
122
122
  on-surface-info: map.get(primitive.$color-map, 'silver-fog-0'),
123
- surface-info--hover: map.get(primitive.$color-map, 'blue-700'),
124
- on-surface-info--hover: map.get(primitive.$color-map, 'silver-fog-0'),
125
- surface-info--pressed: map.get(primitive.$color-map, 'blue-800'),
126
- on-surface-info--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
127
123
  surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
128
124
  on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),
129
125
  surface-info-subtler: map.get(primitive.$color-map, 'blue-75'),
130
126
  on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),
131
- surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-100'),
132
- on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),
133
127
 
134
128
  // =============================================
135
129
  // SURFACES — Success
@@ -137,16 +131,10 @@ $color-semantic-map: (
137
131
 
138
132
  surface-success: map.get(primitive.$color-map, 'green-800'),
139
133
  on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),
140
- surface-success--hover: map.get(primitive.$color-map, 'green-900'),
141
- on-surface-success--hover: map.get(primitive.$color-map, 'silver-fog-0'),
142
- surface-success--pressed: map.get(primitive.$color-map, 'green-950'),
143
- on-surface-success--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
144
134
  surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
145
135
  on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),
146
136
  surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
147
137
  on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),
148
- surface-success-subtler--hover: map.get(primitive.$color-map, 'green-200'),
149
- on-surface-success-subtler--hover: map.get(primitive.$color-map, 'green-900'),
150
138
 
151
139
  // =============================================
152
140
  // SURFACES — Warning
@@ -154,16 +142,10 @@ $color-semantic-map: (
154
142
 
155
143
  surface-warning: map.get(primitive.$color-map, 'orange-500'),
156
144
  on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
157
- surface-warning--hover: map.get(primitive.$color-map, 'orange-600'),
158
- on-surface-warning--hover: map.get(primitive.$color-map, 'orange-950'),
159
- surface-warning--pressed: map.get(primitive.$color-map, 'orange-700'),
160
- on-surface-warning--pressed: map.get(primitive.$color-map, 'orange-950'),
161
145
  surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
162
146
  on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
163
147
  surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
164
148
  on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
165
- surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-100'),
166
- on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),
167
149
 
168
150
  // =============================================
169
151
  // SURFACES — Color Modes (cm-*)
@@ -236,7 +218,7 @@ $color-semantic-map: (
236
218
  foreground: map.get(primitive.$color-map, 'silver-fog-950'),
237
219
  foreground-subtle: map.get(primitive.$color-map, 'silver-fog-800'),
238
220
  foreground-subtler: map.get(primitive.$color-map, 'silver-fog-700'),
239
- foreground-placeholder: map.get(primitive.$color-map, 'silver-fog-500'),
221
+ foreground-placeholder: map.get(primitive.$color-map, 'silver-fog-600'),
240
222
  foreground-disabled: map.get(primitive.$color-map, 'silver-fog-500'),
241
223
  foreground-primary: map.get(primitive.$color-map, 'european-blue-600'),
242
224
  foreground-success: map.get(primitive.$color-map, 'green-800'),
@@ -250,12 +232,12 @@ $color-semantic-map: (
250
232
  // BORDERS
251
233
  // =============================================
252
234
 
253
- border-brand: map.get(primitive.$color-map, 'silver-fog-950'),
235
+ border: map.get(primitive.$color-map, 'silver-fog-950'),
254
236
  border-divider: map.get(primitive.$color-map, 'silver-fog-200'),
255
237
  border-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
256
238
 
257
239
  border-primary: map.get(primitive.$color-map, 'european-blue-600'),
258
- border-primary--hover: map.get(primitive.$color-map, 'european-blue-500'),
240
+ border-primary--hover: map.get(primitive.$color-map, 'european-blue-700'), // EDS aligned
259
241
  border-primary--pressed: map.get(primitive.$color-map, 'european-blue-400'),
260
242
  border-primary-subtle: map.get(primitive.$color-map, 'european-blue-400'),
261
243
  border-primary-subtler: map.get(primitive.$color-map, 'european-blue-100'),
@@ -267,12 +249,16 @@ $color-semantic-map: (
267
249
  border-success-subtle: map.get(primitive.$color-map, 'green-300'),
268
250
 
269
251
  border-warning: map.get(primitive.$color-map, 'orange-600'),
252
+ border-warning--hover: map.get(primitive.$color-map, 'orange-500'),
253
+ border-warning--pressed: map.get(primitive.$color-map, 'orange-400'),
270
254
  border-warning-subtle: map.get(primitive.$color-map, 'orange-300'),
271
255
 
272
256
  border-critical: map.get(primitive.$color-map, 'red-600'),
273
257
  border-critical-subtle: map.get(primitive.$color-map, 'red-300'),
274
258
 
275
259
  border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
260
+ border-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-300'),
261
+ border-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-200'),
276
262
  border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-300'),
277
263
 
278
264
  border-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
@@ -280,6 +266,7 @@ $color-semantic-map: (
280
266
 
281
267
  border-neutral: map.get(primitive.$color-map, 'silver-fog-500'),
282
268
  border-neutral--hover: map.get(primitive.$color-map, 'silver-fog-600'),
269
+ border-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-700'),
283
270
  border-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
284
271
  border-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-400'),
285
272
 
package/dist/base/02-tokens/ecl/semantic/_color-dark.scss CHANGED
@@ -159,7 +159,7 @@ $color-dark: map.merge(
159
159
  foreground-inverted: map.get(primitive.$color, 'graphite-950'),
160
160
  //
161
161
  // Borders
162
- border-brand: map.get(primitive.$color, 'silver-fog-50'),
162
+ border: map.get(primitive.$color, 'silver-fog-50'),
163
163
  border-divider: map.get(primitive.$color, 'graphite-500'),
164
164
  border-disabled: map.get(primitive.$color, 'graphite-700'),
165
165
  border-primary: map.get(primitive.$color, 'european-blue-600'),
package/dist/base/02-tokens/ecl/semantic/_color.scss CHANGED
@@ -165,7 +165,7 @@ $color: map.merge(
165
165
  foreground-inverted: map.get(primitive.$color, 'silver-fog-25'),
166
166
  //
167
167
  // Borders
168
- border-brand: map.get(primitive.$color, 'silver-fog-950'),
168
+ border: map.get(primitive.$color, 'silver-fog-950'),
169
169
  border-divider: map.get(primitive.$color, 'silver-fog-200'),
170
170
  border-disabled: map.get(primitive.$color, 'silver-fog-100'),
171
171
  border-primary: map.get(primitive.$color, 'european-blue-600'),
package/dist/base/02-tokens/typography-semantic.scss CHANGED
@@ -36,9 +36,17 @@ $typography-semantic-map: (
36
36
  s-medium: ( size: s, line-height: s, weight: medium ),
37
37
  ),
38
38
  microcopy: (
39
- xs: ( size: xs, line-height: xs, weight: medium ),
40
- 2xs: ( size: 2xs, line-height: 2xs, weight: regular ),
41
- ),
39
+ m: ( size: xs, line-height: xs, weight: regular ),
40
+ m-semibold: ( size: xs, line-height: xs, weight: semibold ),
41
+ ),
42
+ placeholder: (
43
+ m: ( size: m, line-height: m, weight: light ),
44
+ s: ( size: s, line-height: s, weight: light ),
45
+ ),
46
+ supportive: (
47
+ m: ( size: 2xs, line-height: 2xs, weight: regular ),
48
+ m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
49
+ ),
42
50
  ),
43
51
  tablet: (
44
52
  display: (
@@ -77,9 +85,17 @@ $typography-semantic-map: (
77
85
  s-medium: ( size: s, line-height: s, weight: medium ),
78
86
  ),
79
87
  microcopy: (
80
- xs: ( size: xs, line-height: xs, weight: medium ),
81
- 2xs: ( size: 2xs, line-height: 2xs, weight: regular ),
82
- ),
88
+ m: ( size: xs, line-height: xs, weight: regular ),
89
+ m-semibold: ( size: xs, line-height: xs, weight: semibold ),
90
+ ),
91
+ placeholder: (
92
+ m: ( size: m, line-height: m, weight: light ),
93
+ s: ( size: s, line-height: s, weight: light ),
94
+ ),
95
+ supportive: (
96
+ m: ( size: 2xs, line-height: 2xs, weight: regular ),
97
+ m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
98
+ ),
83
99
  ),
84
100
  mobile: (
85
101
  display: (
@@ -118,8 +134,16 @@ $typography-semantic-map: (
118
134
  s-medium: ( size: s, line-height: s, weight: medium ),
119
135
  ),
120
136
  microcopy: (
121
- xs: ( size: xs, line-height: xs, weight: medium ),
122
- 2xs: ( size: 2xs, line-height: 2xs, weight: regular ),
123
- ),
137
+ m: ( size: xs, line-height: xs, weight: regular ),
138
+ m-semibold: ( size: xs, line-height: xs, weight: semibold ),
139
+ ),
140
+ placeholder: (
141
+ m: ( size: m, line-height: m, weight: light ),
142
+ s: ( size: s, line-height: s, weight: light ),
143
+ ),
144
+ supportive: (
145
+ m: ( size: 2xs, line-height: 2xs, weight: regular ),
146
+ m-medium: ( size: 2xs, line-height: 2xs, weight: medium ),
147
+ ),
124
148
  ),
125
149
  );