@folkehelseinstituttet/designsystem 0.40.2 → 0.40.4

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 (6) hide show
  1. package/fhi-button.js +188 -536
  2. package/fhi-button.js.map +1 -1
  3. package/fhi-checkbox.js +56 -96
  4. package/fhi-checkbox.js.map +1 -1
  5. package/package.json +1 -1
  6. package/web-types.json +1 -1
package/fhi-button.js CHANGED
@@ -54,12 +54,12 @@ var o = "fhi-button", s = class extends r {
54
54
  this.iconOnly ||= !0, e.setAttribute("size", this._getIconSize());
55
55
  return;
56
56
  }
57
- this.size != "small" && (e.style.marginRight = "var(--dimension-icon-margin-right)"), e.style.marginLeft = "var(--dimension-icon-margin-left-offset)", e.setAttribute("size", this._getIconSize());
57
+ this.size != "small" && (e.style.marginRight = "var(--fhi-spacing-050)"), e.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))", e.setAttribute("size", this._getIconSize());
58
58
  }
59
59
  let r = t[t.length - 1];
60
60
  if (r.nodeType === Node.ELEMENT_NODE && r.tagName.toLowerCase().startsWith("fhi-icon")) {
61
61
  let e = r;
62
- e.style.marginRight = "var(--dimension-icon-margin-right-offset)", this.size != "small" && (e.style.marginLeft = "var(--dimension-icon-margin-left)"), e.setAttribute("size", this._getIconSize());
62
+ e.style.marginRight = "calc(-1 * var(--fhi-spacing-050))", this.size != "small" && (e.style.marginLeft = "var(--fhi-spacing-050)"), e.setAttribute("size", this._getIconSize());
63
63
  }
64
64
  }
65
65
  render() {
@@ -78,385 +78,23 @@ var o = "fhi-button", s = class extends r {
78
78
  }
79
79
  static {
80
80
  this.styles = t`
81
- :host {
82
- --dimension-border-radius: var(--fhi-border-radius-full);
83
- --dimension-border-width: var(--fhi-dimension-border-width);
84
-
85
- --dimension-padding-small: calc(
86
- var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
87
- )
88
- calc(
89
- var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(
90
- --fhi-dimension-border-width
91
- )
92
- );
93
- --dimension-padding-medium: calc(
94
- var(--fhi-spacing-100) - var(--fhi-dimension-border-width)
95
- )
96
- calc(
97
- var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(
98
- --fhi-dimension-border-width
99
- )
100
- );
101
- --dimension-padding-large: calc(
102
- var(--fhi-spacing-200) - var(--fhi-dimension-border-width)
103
- )
104
- calc(
105
- var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(
106
- --fhi-dimension-border-width
107
- )
108
- );
109
- --dimension-padding-small-text: calc(
110
- var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
111
- )
112
- calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));
113
-
114
- --dimension-padding-medium-text: calc(
115
- var(--fhi-spacing-100) - var(--fhi-dimension-border-width)
116
- )
117
- calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
118
-
119
- --dimension-padding-large-text: calc(
120
- var(--fhi-spacing-200) - var(--fhi-dimension-border-width)
121
- )
122
- calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));
123
-
124
- /* Icon */
125
- --dimension-icon-margin-left: var(--fhi-spacing-050);
126
- --dimension-icon-margin-right: var(--fhi-spacing-050);
127
-
128
- /* Adjust for the button padding when the icon is present on either side */
129
- --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));
130
- --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));
131
-
132
- --dimension-icon-only-border-radius: var(--fhi-border-radius-full);
133
-
134
- /* Typography */
135
- --typography-font-family: var(--fhi-font-family-default);
136
- --typography-label-large-font-size: var(
137
- --fhi-typography-label-large-font-size
138
- );
139
- --typography-label-medium-font-size: var(
140
- --fhi-typography-label-medium-font-size
141
- );
142
- --typography-label-small-font-size: var(
143
- --fhi-typography-label-medium-font-size
144
- );
145
- --typography-label-large-font-weight: var(
146
- --fhi-typography-label-large-font-weight
147
- );
148
- --typography-label-medium-font-weight: var(
149
- --fhi-typography-label-medium-font-weight
150
- );
151
- --typography-label-small-font-weight: var(
152
- --fhi-typography-label-medium-font-weight
153
- );
154
- --typography-label-large-letter-spacing: var(
155
- --fhi-typography-label-large-letter-spacing
156
- );
157
- --typography-label-medium-letter-spacing: var(
158
- --fhi-typography-label-medium-letter-spacing
159
- );
160
- --typography-label-small-letter-spacing: var(
161
- --fhi-typography-label-medium-letter-spacing
162
- );
163
- --typography-label-large-line-height: var(
164
- --fhi-typography-label-large-line-height
165
- );
166
- --typography-label-small-line-height: var(
167
- --fhi-typography-label-medium-line-height
168
- );
169
- --typography-label-medium-line-height: var(
170
- --fhi-typography-label-medium-line-height
171
- );
172
-
173
- /* Accent Color */
174
- --color-accent-strong-background: var(--fhi-color-accent-base-default);
175
- --color-accent-strong-border: var(--fhi-color-accent-base-default);
176
- --color-accent-strong: var(--fhi-color-accent-text-inverted);
177
- --color-accent-strong-background-hover: var(
178
- --fhi-color-accent-base-hover
179
- );
180
- --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);
181
- --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);
182
- --color-accent-strong-background-active: var(
183
- --fhi-color-accent-base-active
184
- );
185
- --color-accent-strong-border-active: var(--fhi-color-accent-base-active);
186
- --color-accent-strong-active: var(--fhi-color-accent-text-inverted);
187
- --color-accent-strong-background-disabled: var(
188
- --fhi-color-accent-base-default
189
- );
190
- --color-accent-strong-border-disabled: var(
191
- --fhi-color-accent-base-default
192
- );
193
- --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);
194
-
195
- --color-accent-subtle-background: var(--fhi-color-accent-surface-default);
196
- --color-accent-subtle-border: var(--fhi-color-accent-surface-default);
197
- --color-accent-subtle: var(--fhi-color-accent-text-subtle);
198
- --color-accent-subtle-background-hover: var(
199
- --fhi-color-accent-surface-hover
200
- );
201
- --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);
202
- --color-accent-subtle-hover: var(--fhi-color-accent-text-default);
203
- --color-accent-subtle-background-active: var(
204
- --fhi-color-accent-surface-active
205
- );
206
- --color-accent-subtle-border-active: var(
207
- --fhi-color-accent-surface-active
208
- );
209
- --color-accent-subtle-active: var(--fhi-color-accent-text-default);
210
- --color-accent-subtle-background-disabled: var(
211
- --fhi-color-accent-surface-default
212
- );
213
- --color-accent-subtle-border-disabled: var(
214
- --fhi-color-accent-surface-default
215
- );
216
- --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);
217
-
218
- --color-accent-outlined-background: transparent;
219
- --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);
220
- --color-accent-outlined: var(--fhi-color-accent-text-subtle);
221
- --color-accent-outlined-background-hover: var(
222
- --fhi-color-accent-surface-default
223
- );
224
- --color-accent-outlined-border-hover: var(
225
- --fhi-color-accent-surface-default
226
- );
227
- --color-accent-outlined-hover: var(--fhi-color-accent-text-default);
228
- --color-accent-outlined-background-active: var(
229
- --fhi-color-accent-surface-hover
230
- );
231
- --color-accent-outlined-border-active: var(
232
- --fhi-color-accent-surface-hover
233
- );
234
- --color-accent-outlined-active: var(--fhi-color-accent-text-default);
235
- --color-accent-outlined-background-disabled: transparent;
236
- --color-accent-outlined-border-disabled: var(
237
- --fhi-color-accent-border-subtle
238
- );
239
- --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);
240
-
241
- --color-accent-text-background: transparent;
242
- --color-accent-text-border: transparent;
243
- --color-accent-text: var(--fhi-color-accent-text-subtle);
244
- --color-accent-text-background-hover: var(
245
- --fhi-color-accent-surface-default
246
- );
247
- --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);
248
- --color-accent-text-hover: var(--fhi-color-accent-text-default);
249
- --color-accent-text-background-active: var(
250
- --fhi-color-accent-surface-hover
251
- );
252
- --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);
253
- --color-accent-text-active: var(--fhi-color-accent-text-default);
254
- --color-accent-text-background-disabled: transparent;
255
- --color-accent-text-border-disabled: transparent;
256
- --color-accent-text-disabled: var(--fhi-color-accent-text-default);
257
-
258
- /* Neutral Color */
259
- --color-neutral-strong-background: var(--fhi-color-neutral-base-default);
260
- --color-neutral-strong-border: var(--fhi-color-neutral-base-default);
261
- --color-neutral-strong: var(--fhi-color-neutral-text-inverted);
262
- --color-neutral-strong-background-hover: var(
263
- --fhi-color-neutral-base-hover
264
- );
265
- --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);
266
- --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);
267
- --color-neutral-strong-background-active: var(
268
- --fhi-color-neutral-base-active
269
- );
270
- --color-neutral-strong-border-active: var(
271
- --fhi-color-neutral-base-active
272
- );
273
- --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);
274
- --color-neutral-strong-background-disabled: var(
275
- --fhi-color-neutral-base-default
276
- );
277
- --color-neutral-strong-border-disabled: var(
278
- --fhi-color-neutral-base-default
279
- );
280
- --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);
281
-
282
- --color-neutral-subtle-background: var(
283
- --fhi-color-neutral-surface-default
284
- );
285
- --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);
286
- --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);
287
- --color-neutral-subtle-background-hover: var(
288
- --fhi-color-neutral-surface-hover
289
- );
290
- --color-neutral-subtle-border-hover: var(
291
- --fhi-color-neutral-surface-hover
292
- );
293
- --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);
294
- --color-neutral-subtle-background-active: var(
295
- --fhi-color-neutral-surface-active
296
- );
297
- --color-neutral-subtle-border-active: var(
298
- --fhi-color-neutral-surface-active
299
- );
300
- --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);
301
- --color-neutral-subtle-background-disabled: var(
302
- --fhi-color-neutral-surface-default
303
- );
304
- --color-neutral-subtle-border-disabled: var(
305
- --fhi-color-neutral-surface-default
306
- );
307
- --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);
308
-
309
- --color-neutral-outlined-background: transparent;
310
- --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);
311
- --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);
312
- --color-neutral-outlined-background-hover: var(
313
- --fhi-color-neutral-surface-default
314
- );
315
- --color-neutral-outlined-border-hover: var(
316
- --fhi-color-neutral-surface-default
317
- );
318
- --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);
319
- --color-neutral-outlined-background-active: var(
320
- --fhi-color-neutral-surface-hover
321
- );
322
- --color-neutral-outlined-border-active: var(
323
- --fhi-color-neutral-surface-hover
324
- );
325
- --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);
326
- --color-neutral-outlined-background-disabled: transparent;
327
- --color-neutral-outlined-border-disabled: var(
328
- --fhi-color-neutral-border-subtle
329
- );
330
- --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);
331
-
332
- --color-neutral-text-background: transparent;
333
- --color-neutral-text-border: transparent;
334
- --color-neutral-text: var(--fhi-color-neutral-text-subtle);
335
- --color-neutral-text-background-hover: var(
336
- --fhi-color-neutral-surface-default
337
- );
338
- --color-neutral-text-border-hover: var(
339
- --fhi-color-neutral-surface-default
340
- );
341
- --color-neutral-text-hover: var(--fhi-color-neutral-text-default);
342
- --color-neutral-text-background-active: var(
343
- --fhi-color-neutral-surface-hover
344
- );
345
- --color-neutral-text-border-active: var(
346
- --fhi-color-neutral-surface-hover
347
- );
348
- --color-neutral-text-active: var(--fhi-color-neutral-text-default);
349
- --color-neutral-text-background-disabled: transparent;
350
- --color-neutral-text-border-disabled: transparent;
351
- --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);
352
-
353
- /* Danger Color */
354
- --color-danger-strong-background: var(--fhi-color-danger-base-default);
355
- --color-danger-strong-border: var(--fhi-color-danger-base-default);
356
- --color-danger-strong: var(--fhi-color-danger-text-inverted);
357
- --color-danger-strong-background-hover: var(
358
- --fhi-color-danger-base-hover
359
- );
360
- --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);
361
- --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);
362
- --color-danger-strong-background-active: var(
363
- --fhi-color-danger-base-active
364
- );
365
- --color-danger-strong-border-active: var(--fhi-color-danger-base-active);
366
- --color-danger-strong-active: var(--fhi-color-danger-text-inverted);
367
- --color-danger-strong-background-disabled: var(
368
- --fhi-color-danger-base-default
369
- );
370
- --color-danger-strong-border-disabled: var(
371
- --fhi-color-danger-base-default
372
- );
373
- --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);
374
-
375
- --color-danger-subtle-background: var(--fhi-color-danger-surface-default);
376
- --color-danger-subtle-border: var(--fhi-color-danger-surface-default);
377
- --color-danger-subtle: var(--fhi-color-danger-text-subtle);
378
- --color-danger-subtle-background-hover: var(
379
- --fhi-color-danger-surface-hover
380
- );
381
- --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);
382
- --color-danger-subtle-hover: var(--fhi-color-danger-text-default);
383
- --color-danger-subtle-background-active: var(
384
- --fhi-color-danger-surface-active
385
- );
386
- --color-danger-subtle-border-active: var(
387
- --fhi-color-danger-surface-active
388
- );
389
- --color-danger-subtle-active: var(--fhi-color-danger-text-default);
390
- --color-danger-subtle-background-disabled: var(
391
- --fhi-color-danger-surface-default
392
- );
393
- --color-danger-subtle-border-disabled: var(
394
- --fhi-color-danger-surface-default
395
- );
396
- --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);
397
-
398
- --color-danger-outlined-background: transparent;
399
- --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);
400
- --color-danger-outlined: var(--fhi-color-danger-text-subtle);
401
- --color-danger-outlined-background-hover: var(
402
- --fhi-color-danger-surface-default
403
- );
404
- --color-danger-outlined-border-hover: var(
405
- --fhi-color-danger-surface-default
406
- );
407
- --color-danger-outlined-hover: var(--fhi-color-danger-text-default);
408
- --color-danger-outlined-background-active: var(
409
- --fhi-color-danger-surface-hover
410
- );
411
- --color-danger-outlined-border-active: var(
412
- --fhi-color-danger-surface-hover
413
- );
414
- --color-danger-outlined-active: var(--fhi-color-danger-text-default);
415
- --color-danger-outlined-background-disabled: transparent;
416
- --color-danger-outlined-border-disabled: var(
417
- --fhi-color-danger-border-subtle
418
- );
419
- --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);
420
-
421
- --color-danger-text-background: transparent;
422
- --color-danger-text-border: transparent;
423
- --color-danger-text: var(--fhi-color-danger-text-subtle);
424
- --color-danger-text-background-hover: var(
425
- --fhi-color-danger-surface-default
426
- );
427
- --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);
428
- --color-danger-text-hover: var(--fhi-color-danger-text-default);
429
- --color-danger-text-background-active: var(
430
- --fhi-color-danger-surface-hover
431
- );
432
- --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);
433
- --color-danger-text-active: var(--fhi-color-danger-text-default);
434
- --color-danger-text-background-disabled: transparent;
435
- --color-danger-text-border-disabled: transparent;
436
- --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);
437
-
438
- --motion-transition: var(--fhi-motion-duration-quick)
439
- var(--fhi-motion-ease-default);
440
-
441
- --opacity-disabled: var(--fhi-opacity-disabled);
442
- }
443
-
444
81
  :host {
445
82
  display: block;
446
83
  width: fit-content;
447
84
 
448
85
  button {
449
- border-radius: var(--dimension-border-radius);
450
- border: solid var(--dimension-border-width);
451
- font-family: var(--typography-font-family);
86
+ border-radius: var(--fhi-border-radius-full);
87
+ border: solid var(--fhi-dimension-border-width);
88
+ font-family: var(--fhi-font-family-default);
452
89
  -webkit-font-smoothing: antialiased;
453
- transition: var(--motion-transition);
90
+ transition: var(--fhi-motion-duration-quick)
91
+ var(--fhi-motion-ease-default);
454
92
  width: 100%;
455
93
  justify-items: center;
456
94
 
457
95
  cursor: pointer;
458
96
  &:disabled {
459
- opacity: var(--opacity-disabled);
97
+ opacity: var(--fhi-opacity-disabled);
460
98
  cursor: not-allowed;
461
99
  }
462
100
  }
@@ -469,297 +107,311 @@ var o = "fhi-button", s = class extends r {
469
107
  }
470
108
 
471
109
  :host([size='large']) button {
472
- font-size: var(--typography-label-large-font-size);
473
- font-weight: var(--typography-label-large-font-weight);
474
- line-height: var(--typography-label-large-line-height);
475
- letter-spacing: var(--typography-label-large-letter-spacing);
476
- padding: var(--dimension-padding-large);
110
+ font-size: var(--fhi-typography-label-large-font-size);
111
+ font-weight: var(--fhi-typography-label-large-font-weight);
112
+ line-height: var(--fhi-typography-label-large-line-height);
113
+ letter-spacing: var(--fhi-typography-label-large-letter-spacing);
114
+ padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))
115
+ calc(
116
+ var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(
117
+ --fhi-dimension-border-width
118
+ )
119
+ );
477
120
  }
478
121
 
479
122
  :host([size='large'][variant='text']) button {
480
- padding: var(--dimension-padding-large-text);
123
+ padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))
124
+ calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));
481
125
  }
482
126
 
483
127
  :host([size='medium']) button {
484
- font-size: var(--typography-label-medium-font-size);
485
- font-weight: var(--typography-label-medium-font-weight);
486
- line-height: var(--typography-label-medium-line-height);
487
- letter-spacing: var(--typography-label-medium-letter-spacing);
488
- padding: var(--dimension-padding-medium);
128
+ font-size: var(--fhi-typography-label-medium-font-size);
129
+ font-weight: var(--fhi-typography-label-medium-font-weight);
130
+ line-height: var(--fhi-typography-label-medium-line-height);
131
+ letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
132
+ padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))
133
+ calc(
134
+ var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(
135
+ --fhi-dimension-border-width
136
+ )
137
+ );
489
138
  }
490
139
 
491
140
  :host([size='medium'][variant='text']) button {
492
- padding: var(--dimension-padding-medium-text);
141
+ padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))
142
+ calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
493
143
  }
494
144
 
495
145
  :host([size='small']) button {
496
- font-size: var(--typography-label-small-font-size);
497
- font-weight: var(--typography-label-small-font-weight);
498
- line-height: var(--typography-label-small-line-height);
499
- letter-spacing: var(--typography-label-small-letter-spacing);
500
- padding: var(--dimension-padding-small);
146
+ font-size: var(--fhi-typography-label-medium-font-size);
147
+ font-weight: var(--fhi-typography-label-medium-font-weight);
148
+ line-height: var(--fhi-typography-label-medium-line-height);
149
+ letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
150
+ padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))
151
+ calc(
152
+ var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(
153
+ --fhi-dimension-border-width
154
+ )
155
+ );
501
156
  }
502
157
 
503
158
  :host([size='small'][variant='text']) button {
504
- padding: var(--dimension-padding-small-text);
159
+ padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))
160
+ calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));
505
161
  }
506
162
 
507
163
  :host([color='accent'][variant='strong']) button {
508
- background-color: var(--color-accent-strong-background);
509
- border-color: var(--color-accent-strong-border);
510
- color: var(--color-accent-strong);
164
+ background-color: var(--fhi-color-accent-base-default);
165
+ border-color: var(--fhi-color-accent-base-default);
166
+ color: var(--fhi-color-accent-text-inverted);
511
167
  &:hover {
512
- background-color: var(--color-accent-strong-background-hover);
513
- border-color: var(--color-accent-strong-border-hover);
514
- color: var(--color-accent-strong-hover);
168
+ background-color: var(--fhi-color-accent-base-hover);
169
+ border-color: var(--fhi-color-accent-base-hover);
170
+ color: var(--fhi-color-accent-text-inverted);
515
171
  }
516
172
  &:active {
517
- background-color: var(--color-accent-strong-background-active);
518
- border-color: var(--color-accent-strong-border-active);
519
- color: var(--color-accent-strong-active);
173
+ background-color: var(--fhi-color-accent-base-active);
174
+ border-color: var(--fhi-color-accent-base-active);
175
+ color: var(--fhi-color-accent-text-inverted);
520
176
  }
521
177
  &:disabled {
522
- background-color: var(--color-accent-strong-background-disabled);
523
- border-color: var(--color-accent-strong-border-disabled);
524
- color: var(--color-accent-strong-disabled);
178
+ background-color: var(--fhi-color-accent-base-default);
179
+ border-color: var(--fhi-color-accent-base-default);
180
+ color: var(--fhi-color-accent-text-inverted);
525
181
  }
526
182
  }
527
183
 
528
184
  :host([color='accent'][variant='subtle']) button {
529
- background-color: var(--color-accent-subtle-background);
530
- border-color: var(--color-accent-subtle-border);
531
- color: var(--color-accent-subtle);
185
+ background-color: var(--fhi-color-accent-surface-default);
186
+ border-color: var(--fhi-color-accent-surface-default);
187
+ color: var(--fhi-color-accent-text-subtle);
532
188
  &:hover {
533
- background-color: var(--color-accent-subtle-background-hover);
534
- border-color: var(--color-accent-subtle-border-hover);
535
- color: var(--color-accent-subtle-hover);
189
+ background-color: var(--fhi-color-accent-surface-hover);
190
+ border-color: var(--fhi-color-accent-surface-hover);
191
+ color: var(--fhi-color-accent-text-default);
536
192
  }
537
193
  &:active {
538
- background-color: var(--color-accent-subtle-background-active);
539
- border-color: var(--color-accent-subtle-border-active);
540
- color: var(--color-accent-subtle-active);
194
+ background-color: var(--fhi-color-accent-surface-active);
195
+ border-color: var(--fhi-color-accent-surface-active);
196
+ color: var(--fhi-color-accent-text-default);
541
197
  }
542
198
  &:disabled {
543
- background-color: var(--color-accent-subtle-background-disabled);
544
- border-color: var(--color-accent-subtle-border-disabled);
545
- color: var(--color-accent-subtle-disabled);
199
+ background-color: var(--fhi-color-accent-surface-default);
200
+ border-color: var(--fhi-color-accent-surface-default);
201
+ color: var(--fhi-color-accent-text-subtle);
546
202
  }
547
203
  }
548
204
 
549
205
  :host([color='accent'][variant='outlined']) button {
550
- background-color: var(--color-accent-outlined-background);
551
- border-color: var(--color-accent-outlined-border);
552
- color: var(--color-accent-outlined);
206
+ background-color: transparent;
207
+ border-color: var(--fhi-color-accent-border-subtle);
208
+ color: var(--fhi-color-accent-text-subtle);
553
209
  &:hover {
554
- background-color: var(--color-accent-outlined-background-hover);
555
- border-color: var(--color-accent-outlined-border-hover);
556
- color: var(--color-accent-outlined-hover);
210
+ background-color: var(--fhi-color-accent-surface-default);
211
+ border-color: var(--fhi-color-accent-surface-default);
212
+ color: var(--fhi-color-accent-text-default);
557
213
  }
558
214
  &:active {
559
- background-color: var(--color-accent-outlined-background-active);
560
- border-color: var(--color-accent-outlined-border-active);
561
- color: var(--color-accent-outlined-active);
215
+ background-color: var(--fhi-color-accent-surface-hover);
216
+ border-color: var(--fhi-color-accent-surface-hover);
217
+ color: var(--fhi-color-accent-text-default);
562
218
  }
563
219
  &:disabled {
564
- background-color: var(--color-accent-outlined-background-disabled);
565
- border-color: var(--color-accent-outlined-border-disabled);
566
- color: var(--color-accent-outlined-disabled);
220
+ background-color: transparent;
221
+ border-color: var(--fhi-color-accent-border-subtle);
222
+ color: var(--fhi-color-accent-text-subtle);
567
223
  }
568
224
  }
569
225
 
570
226
  :host([color='accent'][variant='text']) button {
571
- background-color: var(--color-accent-text-background);
572
- border-color: var(--color-accent-text-border);
573
- color: var(--color-accent-text);
227
+ background-color: transparent;
228
+ border-color: transparent;
229
+ color: var(--fhi-color-accent-text-subtle);
574
230
  &:hover {
575
- background-color: var(--color-accent-text-background-hover);
576
- border-color: var(--color-accent-text-border-hover);
577
- color: var(--color-accent-text-hover);
231
+ background-color: var(--fhi-color-accent-surface-default);
232
+ border-color: var(--fhi-color-accent-surface-default);
233
+ color: var(--fhi-color-accent-text-default);
578
234
  }
579
235
  &:active {
580
- background-color: var(--color-accent-text-background-active);
581
- border-color: var(--color-accent-text-border-active);
582
- color: var(--color-accent-text-active);
236
+ background-color: var(--fhi-color-accent-surface-hover);
237
+ border-color: var(--fhi-color-accent-surface-hover);
238
+ color: var(--fhi-color-accent-text-default);
583
239
  }
584
240
  &:disabled {
585
- background-color: var(--color-accent-text-background-disabled);
586
- border-color: var(--color-accent-text-border-disabled);
587
- color: var(--color-accent-text-disabled);
241
+ background-color: transparent;
242
+ border-color: transparent;
243
+ color: var(--fhi-color-accent-text-default);
588
244
  }
589
245
  }
590
246
 
591
247
  :host([color='neutral'][variant='strong']) button {
592
- background-color: var(--color-neutral-strong-background);
593
- border-color: var(--color-neutral-strong-border);
594
- color: var(--color-neutral-strong);
248
+ background-color: var(--fhi-color-neutral-base-default);
249
+ border-color: var(--fhi-color-neutral-base-default);
250
+ color: var(--fhi-color-neutral-text-inverted);
595
251
  &:hover {
596
- background-color: var(--color-neutral-strong-background-hover);
597
- border-color: var(--color-neutral-strong-border-hover);
598
- color: var(--color-neutral-strong-hover);
252
+ background-color: var(--fhi-color-neutral-base-hover);
253
+ border-color: var(--fhi-color-neutral-base-hover);
254
+ color: var(--fhi-color-neutral-text-inverted);
599
255
  }
600
256
  &:active {
601
- background-color: var(--color-neutral-strong-background-active);
602
- border-color: var(--color-neutral-strong-border-active);
603
- color: var(--color-neutral-strong-active);
257
+ background-color: var(--fhi-color-neutral-base-active);
258
+ border-color: var(--fhi-color-neutral-base-active);
259
+ color: var(--fhi-color-neutral-text-inverted);
604
260
  }
605
261
  &:disabled {
606
- background-color: var(--color-neutral-strong-background-disabled);
607
- border-color: var(--color-neutral-strong-border-disabled);
608
- color: var(--color-neutral-strong-disabled);
262
+ background-color: var(--fhi-color-neutral-base-default);
263
+ border-color: var(--fhi-color-neutral-base-default);
264
+ color: var(--fhi-color-neutral-text-inverted);
609
265
  }
610
266
  }
611
267
 
612
268
  :host([color='neutral'][variant='subtle']) button {
613
- background-color: var(--color-neutral-subtle-background);
614
- border-color: var(--color-neutral-subtle-border);
615
- color: var(--color-neutral-subtle);
269
+ background-color: var(--fhi-color-neutral-surface-default);
270
+ border-color: var(--fhi-color-neutral-surface-default);
271
+ color: var(--fhi-color-neutral-text-subtle);
616
272
  &:hover {
617
- background-color: var(--color-neutral-subtle-background-hover);
618
- border-color: var(--color-neutral-subtle-border-hover);
619
- color: var(--color-neutral-subtle-hover);
273
+ background-color: var(--fhi-color-neutral-surface-hover);
274
+ border-color: var(--fhi-color-neutral-surface-hover);
275
+ color: var(--fhi-color-neutral-text-default);
620
276
  }
621
277
  &:active {
622
- background-color: var(--color-neutral-subtle-background-active);
623
- border-color: var(--color-neutral-subtle-border-active);
624
- color: var(--color-neutral-subtle-active);
278
+ background-color: var(--fhi-color-neutral-surface-active);
279
+ border-color: var(--fhi-color-neutral-surface-active);
280
+ color: var(--fhi-color-neutral-text-default);
625
281
  }
626
282
  &:disabled {
627
- background-color: var(--color-neutral-subtle-background-disabled);
628
- border-color: var(--color-neutral-subtle-border-disabled);
629
- color: var(--color-neutral-subtle-disabled);
283
+ background-color: var(--fhi-color-neutral-surface-default);
284
+ border-color: var(--fhi-color-neutral-surface-default);
285
+ color: var(--fhi-color-neutral-text-default);
630
286
  }
631
287
  }
632
288
 
633
289
  :host([color='neutral'][variant='outlined']) button {
634
- background-color: var(--color-neutral-outlined-background);
635
- border-color: var(--color-neutral-outlined-border);
636
- color: var(--color-neutral-outlined);
290
+ background-color: transparent;
291
+ border-color: var(--fhi-color-neutral-border-subtle);
292
+ color: var(--fhi-color-neutral-text-subtle);
637
293
  &:hover {
638
- background-color: var(--color-neutral-outlined-background-hover);
639
- border-color: var(--color-neutral-outlined-border-hover);
640
- color: var(--color-neutral-outlined-hover);
294
+ background-color: var(--fhi-color-neutral-surface-default);
295
+ border-color: var(--fhi-color-neutral-surface-default);
296
+ color: var(--fhi-color-neutral-text-default);
641
297
  }
642
298
  &:active {
643
- background-color: var(--color-neutral-outlined-background-active);
644
- border-color: var(--color-neutral-outlined-border-active);
645
- color: var(--color-neutral-outlined-active);
299
+ background-color: var(--fhi-color-neutral-surface-hover);
300
+ border-color: var(--fhi-color-neutral-surface-hover);
301
+ color: var(--fhi-color-neutral-text-default);
646
302
  }
647
303
  &:disabled {
648
- background-color: var(--color-neutral-outlined-background-disabled);
649
- border-color: var(--color-neutral-outlined-border-disabled);
650
- color: var(--color-neutral-outlined-disabled);
304
+ background-color: transparent;
305
+ border-color: var(--fhi-color-neutral-border-subtle);
306
+ color: var(--fhi-color-neutral-text-subtle);
651
307
  }
652
308
  }
653
309
 
654
310
  :host([color='neutral'][variant='text']) button {
655
- background-color: var(--color-neutral-text-background);
656
- border-color: var(--color-neutral-text-border);
657
- color: var(--color-neutral-text);
311
+ background-color: transparent;
312
+ border-color: transparent;
313
+ color: var(--fhi-color-neutral-text-subtle);
658
314
  &:hover {
659
- background-color: var(--color-neutral-text-background-hover);
660
- border-color: var(--color-neutral-text-border-hover);
661
- color: var(--color-neutral-text-hover);
315
+ background-color: var(--fhi-color-neutral-surface-default);
316
+ border-color: var(--fhi-color-neutral-surface-default);
317
+ color: var(--fhi-color-neutral-text-default);
662
318
  }
663
319
  &:active {
664
- background-color: var(--color-neutral-text-background-active);
665
- border-color: var(--color-neutral-text-border-active);
666
- color: var(--color-neutral-text-active);
320
+ background-color: var(--fhi-color-neutral-surface-hover);
321
+ border-color: var(--fhi-color-neutral-surface-hover);
322
+ color: var(--fhi-color-neutral-text-default);
667
323
  }
668
324
  &:disabled {
669
- background-color: var(--color-neutral-text-background-disabled);
670
- border-color: var(--color-neutral-text-border-disabled);
671
- color: var(--color-neutral-text-disabled);
325
+ background-color: transparent;
326
+ border-color: transparent;
327
+ color: var(--fhi-color-neutral-text-subtle);
672
328
  }
673
329
  }
674
330
 
675
331
  :host([color='danger'][variant='strong']) button {
676
- background-color: var(--color-danger-strong-background);
677
- border-color: var(--color-danger-strong-border);
678
- color: var(--color-danger-strong);
332
+ background-color: var(--fhi-color-danger-base-default);
333
+ border-color: var(--fhi-color-danger-base-default);
334
+ color: var(--fhi-color-danger-text-inverted);
679
335
  &:hover {
680
- background-color: var(--color-danger-strong-background-hover);
681
- border-color: var(--color-danger-strong-border-hover);
682
- color: var(--color-danger-strong-hover);
336
+ background-color: var(--fhi-color-danger-base-hover);
337
+ border-color: var(--fhi-color-danger-base-hover);
338
+ color: var(--fhi-color-danger-text-inverted);
683
339
  }
684
340
  &:active {
685
- background-color: var(--color-danger-strong-background-active);
686
- border-color: var(--color-danger-strong-border-active);
687
- color: var(--color-danger-strong-active);
341
+ background-color: var(--fhi-color-danger-base-active);
342
+ border-color: var(--fhi-color-danger-base-active);
343
+ color: var(--fhi-color-danger-text-inverted);
688
344
  }
689
345
  &:disabled {
690
- background-color: var(--color-danger-strong-background-disabled);
691
- border-color: var(--color-danger-strong-border-disabled);
692
- color: var(--color-danger-strong-disabled);
346
+ background-color: var(--fhi-color-danger-base-default);
347
+ border-color: var(--fhi-color-danger-base-default);
348
+ color: var(--fhi-color-danger-text-inverted);
693
349
  }
694
350
  }
695
351
 
696
352
  :host([color='danger'][variant='subtle']) button {
697
- background-color: var(--color-danger-subtle-background);
698
- border-color: var(--color-danger-subtle-border);
699
- color: var(--color-danger-subtle);
353
+ background-color: var(--fhi-color-danger-surface-default);
354
+ border-color: var(--fhi-color-danger-surface-default);
355
+ color: var(--fhi-color-danger-text-subtle);
700
356
  &:hover {
701
- background-color: var(--color-danger-subtle-background-hover);
702
- border-color: var(--color-danger-subtle-border-hover);
703
- color: var(--color-danger-subtle-hover);
357
+ background-color: var(--fhi-color-danger-surface-hover);
358
+ border-color: var(--fhi-color-danger-surface-hover);
359
+ color: var(--fhi-color-danger-text-default);
704
360
  }
705
361
  &:active {
706
- background-color: var(--color-danger-subtle-background-active);
707
- border-color: var(--color-danger-subtle-border-active);
708
- color: var(--color-danger-subtle-active);
362
+ background-color: var(--fhi-color-danger-surface-active);
363
+ border-color: var(--fhi-color-danger-surface-active);
364
+ color: var(--fhi-color-danger-text-default);
709
365
  }
710
366
  &:disabled {
711
- background-color: var(--color-danger-subtle-background-disabled);
712
- border-color: var(--color-danger-subtle-border-disabled);
713
- color: var(--color-danger-subtle-disabled);
367
+ background-color: var(--fhi-color-danger-surface-default);
368
+ border-color: var(--fhi-color-danger-surface-default);
369
+ color: var(--fhi-color-danger-text-subtle);
714
370
  }
715
371
  }
716
372
 
717
373
  :host([color='danger'][variant='outlined']) button {
718
- background-color: var(--color-danger-outlined-background);
719
- border-color: var(--color-danger-outlined-border);
720
- color: var(--color-danger-outlined);
374
+ background-color: transparent;
375
+ border-color: var(--fhi-color-danger-border-subtle);
376
+ color: var(--fhi-color-danger-text-subtle);
721
377
  &:hover {
722
- background-color: var(--color-danger-outlined-background-hover);
723
- border-color: var(--color-danger-outlined-border-hover);
724
- color: var(--color-danger-outlined-hover);
378
+ background-color: var(--fhi-color-danger-surface-default);
379
+ border-color: var(--fhi-color-danger-surface-default);
380
+ color: var(--fhi-color-danger-text-default);
725
381
  }
726
382
  &:active {
727
- background-color: var(--color-danger-outlined-background-active);
728
- border-color: var(--color-danger-outlined-border-active);
729
- color: var(--color-danger-outlined-active);
383
+ background-color: var(--fhi-color-danger-surface-hover);
384
+ border-color: var(--fhi-color-danger-surface-hover);
385
+ color: var(--fhi-color-danger-text-default);
730
386
  }
731
387
  &:disabled {
732
- background-color: var(--color-danger-outlined-background-disabled);
733
- border-color: var(--color-danger-outlined-border-disabled);
734
- color: var(--color-danger-outlined-disabled);
388
+ background-color: transparent;
389
+ border-color: var(--fhi-color-danger-border-subtle);
390
+ color: var(--fhi-color-danger-text-subtle);
735
391
  }
736
392
  }
737
393
 
738
394
  :host([color='danger'][variant='text']) button {
739
- background-color: var(--color-danger-text-background);
740
- border-color: var(--color-danger-text-border);
741
- color: var(--color-danger-text);
395
+ background-color: transparent;
396
+ border-color: transparent;
397
+ color: var(--fhi-color-danger-text-subtle);
742
398
  &:hover {
743
- background-color: var(--color-danger-text-background-hover);
744
- border-color: var(--color-danger-text-border-hover);
745
- color: var(--color-danger-text-hover);
399
+ background-color: var(--fhi-color-danger-surface-default);
400
+ border-color: var(--fhi-color-danger-surface-default);
401
+ color: var(--fhi-color-danger-text-default);
746
402
  }
747
403
  &:active {
748
- background-color: var(--color-danger-text-background-active);
749
- border-color: var(--color-danger-text-border-active);
750
- color: var(--color-danger-text-active);
404
+ background-color: var(--fhi-color-danger-surface-hover);
405
+ border-color: var(--fhi-color-danger-surface-hover);
406
+ color: var(--fhi-color-danger-text-default);
751
407
  }
752
408
  &:disabled {
753
- background-color: var(--color-danger-text-background-disabled);
754
- border-color: var(--color-danger-text-border-disabled);
755
- color: var(--color-danger-text-disabled);
409
+ background-color: transparent;
410
+ border-color: transparent;
411
+ color: var(--fhi-color-danger-text-subtle);
756
412
  }
757
413
  }
758
414
 
759
- button[data-icon-only] {
760
- border-radius: var(--dimension-icon-only-border-radius);
761
- }
762
-
763
415
  :host([size='small']) button[data-icon-only] {
764
416
  padding: calc(0.375rem - var(--fhi-dimension-border-width));
765
417
  }