@sb1/ffe-core 30.0.5 → 30.0.7

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 (8) hide show
  1. package/css/colors-semantic.css +72 -47
  2. package/css/ffe.css +72 -47
  3. package/less/colors-semantic-chevron.less +6 -0
  4. package/less/colors-semantic-storybook.less +24 -15
  5. package/less/colors-semantic.less +72 -47
  6. package/less/ffe.less +1 -0
  7. package/lib/semanticColors.js +6 -1
  8. package/package.json +2 -2
package/less/colors-semantic.less CHANGED
@@ -31,20 +31,25 @@
31
31
  --ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-strong);
32
32
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-stronger);
33
33
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-strongest);
34
- --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtler);
35
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtle);
36
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-default);
34
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtlest);
35
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtler);
36
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-subtle);
37
37
  --ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-strong);
38
38
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-stronger);
39
39
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-strongest);
40
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtler);
41
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtle);
42
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-default);
40
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtlest);
41
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-subtler);
42
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-subtle);
43
43
  --ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
44
- --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-medium);
45
- --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-stronger);
44
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-accent-feedback-info-subtler);
45
+ --ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-strong);
46
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-accent-feedback-success-subtler);
47
+ --ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
48
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-accent-feedback-warning-subtler);
46
49
  --ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
50
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-accent-feedback-critical-subtler);
47
51
  --ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
52
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-accent-feedback-tip-subtler);
48
53
  --ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
49
54
  --ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-strong);
50
55
  --ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-strongest);
@@ -59,11 +64,11 @@
59
64
  --ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
60
65
  --ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
61
66
  --ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
62
- --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-stronger);
63
- --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strongest);
64
- --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-stronger);
65
- --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtle);
66
- --ffe-color-border-primary-emphasis: var(--ffe-color-speciality-static-accent-subtler);
67
+ --ffe-color-border-primary-default: var(--ffe-color-accent-neutral-medium);
68
+ --ffe-color-border-primary-hover: var(--ffe-color-accent-neutral-strong);
69
+ --ffe-color-border-primary-pressed: var(--ffe-color-accent-neutral-strongest);
70
+ --ffe-color-border-primary-subtle: var(--ffe-color-accent-neutral-subtler);
71
+ --ffe-color-border-primary-emphasis: var(--ffe-color-accent-brand-primary-strongest);
67
72
  --ffe-color-border-primary-selected: var(--ffe-color-accent-brand-primary-stronger);
68
73
  --ffe-color-border-secondary-default: var(--ffe-color-natt-400);
69
74
  --ffe-color-border-secondary-hover: var(--ffe-color-natt-500);
@@ -156,20 +161,25 @@
156
161
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
157
162
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
158
163
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
159
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
160
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
161
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
164
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
165
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
166
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
162
167
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
163
168
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
164
169
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
165
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
166
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
167
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
170
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
171
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
172
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
168
173
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
174
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
169
175
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
176
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
170
177
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
178
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
171
179
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
180
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
172
181
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
182
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
173
183
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
174
184
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
175
185
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -185,9 +195,9 @@
185
195
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
186
196
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
187
197
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
188
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
198
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
189
199
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
190
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
200
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
191
201
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
192
202
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
193
203
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
@@ -262,22 +272,22 @@
262
272
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-25);
263
273
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
264
274
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
265
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
266
275
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
267
276
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
268
277
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-550);
269
278
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-25);
270
279
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-50);
271
280
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
272
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
273
281
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
274
282
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
275
283
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-700);
276
284
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
277
285
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
286
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-100);
278
287
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
279
288
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
280
289
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
290
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-100);
281
291
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-200);
282
292
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-300);
283
293
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -285,21 +295,24 @@
285
295
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
286
296
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
287
297
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
298
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-100);
288
299
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
289
300
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
290
301
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
302
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-100);
291
303
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
292
304
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
293
305
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
294
306
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
307
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-100);
295
308
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
296
309
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
297
310
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
298
311
  --ffe-color-default-neutral-sublest: var(--ffe-color-alpha-white-100);
312
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
299
313
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
300
314
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-200);
301
315
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-600);
302
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-750);
303
316
  --ffe-color-default-neutral-strongest: var(--ffe-color-gray-900);
304
317
  --ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-100);
305
318
  --ffe-color-default-interactive-default: var(--ffe-color-vann-600);
@@ -316,7 +329,6 @@
316
329
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-600);
317
330
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-500);
318
331
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-400);
319
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-300);
320
332
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-200);
321
333
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
322
334
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
@@ -331,22 +343,25 @@
331
343
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-25);
332
344
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
333
345
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
346
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-500);
334
347
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
335
348
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
336
349
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
337
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-300);
350
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
338
351
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
339
352
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-100);
340
353
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
341
354
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
355
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
342
356
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-300);
343
357
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
344
358
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
345
359
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
360
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-600);
346
361
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
347
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-100);
348
362
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
349
363
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
364
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-550);
350
365
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
351
366
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
352
367
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
@@ -355,13 +370,12 @@
355
370
  --ffe-color-accent-neutral-subtle: var(--ffe-color-vann-350);
356
371
  --ffe-color-accent-neutral-medium: var(--ffe-color-vann-250);
357
372
  --ffe-color-accent-neutral-strong: var(--ffe-color-vann-75);
358
- --ffe-color-accent-neutral-stronger: var(--ffe-color-vann-50);
359
373
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
360
374
  --ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
361
375
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
362
376
  --ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
363
377
  --ffe-color-speciality-background-default: var(--ffe-color-alpha-white-100);
364
- --ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
378
+ --ffe-color-speciality-background-subtle: var(--ffe-color-sand-0);
365
379
  --ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
366
380
  --ffe-color-speciality-background-surface-default: var(--ffe-color-alpha-white-100);
367
381
  --ffe-color-speciality-background-surface-default-hover: var(--ffe-color-vann-25);
@@ -387,22 +401,22 @@
387
401
  --ffe-color-default-brand-secondary-subtlest: var(--ffe-color-frost-800);
388
402
  --ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-700);
389
403
  --ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-600);
390
- --ffe-color-default-brand-secondary-default: var(--ffe-color-frost-500);
391
404
  --ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
392
405
  --ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
393
406
  --ffe-color-default-brand-secondary-strongest: var(--ffe-color-frost-100);
394
407
  --ffe-color-default-brand-tertiary-subtlest: var(--ffe-color-syrin-750);
395
408
  --ffe-color-default-brand-tertiary-subtler: var(--ffe-color-syrin-650);
396
409
  --ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-550);
397
- --ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-450);
398
410
  --ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-250);
399
411
  --ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-100);
400
412
  --ffe-color-default-brand-tertiary-strongest: var(--ffe-color-syrin-50);
401
413
  --ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
402
414
  --ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
415
+ --ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
403
416
  --ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
404
417
  --ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
405
418
  --ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
419
+ --ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
406
420
  --ffe-color-default-feedback-success-subtle: var(--ffe-color-skog-600);
407
421
  --ffe-color-default-feedback-success-default: var(--ffe-color-skog-500);
408
422
  --ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
@@ -410,21 +424,24 @@
410
424
  --ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
411
425
  --ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
412
426
  --ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
427
+ --ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-650);
413
428
  --ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
414
429
  --ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
415
430
  --ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
431
+ --ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-700);
416
432
  --ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
417
433
  --ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
418
434
  --ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
419
435
  --ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
436
+ --ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
420
437
  --ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
421
438
  --ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
422
439
  --ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
423
440
  --ffe-color-default-neutral-sublest: var(--ffe-color-gray-900);
441
+ --ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
424
442
  --ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
425
443
  --ffe-color-default-neutral-medium: var(--ffe-color-gray-550);
426
444
  --ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
427
- --ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
428
445
  --ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-100);
429
446
  --ffe-color-default-neutral-inverted: var(--ffe-color-gray-900);
430
447
  --ffe-color-default-interactive-default: var(--ffe-color-natt-200);
@@ -441,7 +458,6 @@
441
458
  --ffe-color-accent-brand-secondary-subtlest: var(--ffe-color-frost-800);
442
459
  --ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-700);
443
460
  --ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
444
- --ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-500);
445
461
  --ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-400);
446
462
  --ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
447
463
  --ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
@@ -456,22 +472,25 @@
456
472
  --ffe-color-accent-brand-tertiary-strongest: var(--ffe-color-syrin-50);
457
473
  --ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
458
474
  --ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
475
+ --ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
459
476
  --ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
460
477
  --ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
461
478
  --ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
462
- --ffe-color-accent-feedback-success-medium: var(--ffe-color-skog-400);
479
+ --ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
463
480
  --ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
464
481
  --ffe-color-accent-feedback-success-stronger: var(--ffe-color-skog-200);
465
482
  --ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
466
483
  --ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
484
+ --ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
467
485
  --ffe-color-accent-feedback-critical-medium: var(--ffe-color-baer-400);
468
486
  --ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
469
487
  --ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
470
488
  --ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
489
+ --ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-650);
471
490
  --ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
472
- --ffe-color-accent-feedback-warning-stronger: var(--ffe-color-sol-150);
473
491
  --ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
474
492
  --ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
493
+ --ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-700);
475
494
  --ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
476
495
  --ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
477
496
  --ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
@@ -480,7 +499,6 @@
480
499
  --ffe-color-accent-neutral-subtle: var(--ffe-color-gray-650);
481
500
  --ffe-color-accent-neutral-medium: var(--ffe-color-gray-550);
482
501
  --ffe-color-accent-neutral-strong: var(--ffe-color-gray-250);
483
- --ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
484
502
  --ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-100);
485
503
  --ffe-color-accent-neutral-inverted: var(--ffe-color-gray-900);
486
504
  --ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-100);
@@ -526,20 +544,25 @@
526
544
  --ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-strong);
527
545
  --ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-stronger);
528
546
  --ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-strongest);
529
- --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
530
- --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
531
- --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
547
+ --ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtlest);
548
+ --ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtler);
549
+ --ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-subtle);
532
550
  --ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-strong);
533
551
  --ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-stronger);
534
552
  --ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-strongest);
535
- --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtler);
536
- --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtle);
537
- --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-default);
553
+ --ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtlest);
554
+ --ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-subtler);
555
+ --ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-subtle);
538
556
  --ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
557
+ --ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
539
558
  --ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
559
+ --ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
540
560
  --ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
561
+ --ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
541
562
  --ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
563
+ --ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
542
564
  --ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
565
+ --ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
543
566
  --ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
544
567
  --ffe-color-foreground-subtle: var(--ffe-color-default-neutral-strong);
545
568
  --ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
@@ -555,9 +578,9 @@
555
578
  --ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
556
579
  --ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
557
580
  --ffe-color-border-primary-default: var(--ffe-color-default-neutral-medium);
558
- --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-stronger);
581
+ --ffe-color-border-primary-hover: var(--ffe-color-default-neutral-strong);
559
582
  --ffe-color-border-primary-pressed: var(--ffe-color-default-neutral-strongest);
560
- --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtle);
583
+ --ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
561
584
  --ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
562
585
  --ffe-color-border-primary-selected: var(--ffe-color-default-brand-primary-stronger);
563
586
  --ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
@@ -658,7 +681,7 @@
658
681
  --ffe-color-frost-600: #356488;
659
682
  --ffe-color-frost-700: #234f71;
660
683
  --ffe-color-frost-800: #163853;
661
- --ffe-color-sand-25: #fcf4ee;
684
+ --ffe-color-sand-0: #fdf8f5;
662
685
  --ffe-color-syrin-25: #eaeaf6;
663
686
  --ffe-color-syrin-50: #e6e6f4;
664
687
  --ffe-color-syrin-75: #dcdcef;
@@ -683,6 +706,7 @@
683
706
  --ffe-color-baer-300: #ff5e5c;
684
707
  --ffe-color-baer-400: #e44244;
685
708
  --ffe-color-baer-500: #c62a2f;
709
+ --ffe-color-baer-600: #a01c1f;
686
710
  --ffe-color-baer-700: #7c1214;
687
711
  --ffe-color-baer-800: #640e10;
688
712
  --ffe-color-skog-50: #cbf0df;
@@ -699,14 +723,15 @@
699
723
  --ffe-color-skog-800: #0a4330;
700
724
  --ffe-color-sol-50: #ffe0b2;
701
725
  --ffe-color-sol-100: #ffc675;
702
- --ffe-color-sol-150: #ffb64d;
703
726
  --ffe-color-sol-200: #f6ac3c;
704
727
  --ffe-color-sol-250: #f49f1f;
705
728
  --ffe-color-sol-500: #a95704;
729
+ --ffe-color-sol-600: #853f00;
730
+ --ffe-color-sol-650: #753500;
706
731
  --ffe-color-sol-700: #682c00;
707
732
  --ffe-color-sol-750: #582400;
733
+ --ffe-color-gray-50: #e5e5e5;
708
734
  --ffe-color-gray-100: #cccccc;
709
- --ffe-color-gray-150: #c2c2c2;
710
735
  --ffe-color-gray-200: #b8b8b8;
711
736
  --ffe-color-gray-250: #adadad;
712
737
  --ffe-color-gray-550: #707070;
package/less/ffe.less CHANGED
@@ -5,6 +5,7 @@
5
5
  @import 'breakpoints';
6
6
  @import 'colors';
7
7
  @import 'colors-semantic';
8
+ @import 'colors-semantic-chevron';
8
9
  @import 'dimensions';
9
10
  @import 'motion';
10
11
  @import 'spacing';
package/lib/semanticColors.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
 
4
- exports.backgroundDefault = exports.backgroundSubtle = exports.surfacePrimaryDefault = exports.surfacePrimaryDefaultHover = exports.surfacePrimaryDefaultPressed = exports.surfaceSecondaryDefault = exports.surfaceSecondaryHover = exports.surfaceSecondaryPressed = exports.surfaceTertiaryDefault = exports.surfaceTertiaryHover = exports.surfaceTertiaryPressed = exports.surfaceFeedbackInfo = exports.surfaceFeedbackSuccess = exports.surfaceFeedbackWarning = exports.surfaceFeedbackCritical = exports.surfaceFeedbackTip = exports.fillPrimaryDefault = exports.fillPrimaryHover = exports.fillPrimaryPressed = exports.fillPrimarySelected = exports.fillPrimarySelectedHover = exports.fillPrimarySelectedPressed = exports.fillPrimarySubtle = exports.fillPrimarySubtleHover = exports.fillPrimarySubtlePressed = exports.fillPrimaryInvisible = exports.fillSecondaryDefault = exports.fillSecondaryDefaultHover = exports.fillSecondaryDefaultPressed = exports.fillSecondarySubtle = exports.fillSecondarySubtleHover = exports.fillSecondarySubtlePressed = exports.fillTertiaryDefault = exports.fillTertiaryDefaultHover = exports.fillTertiaryDefaultPressed = exports.fillTertiarySubtle = exports.fillTertiarySubtleHover = exports.fillTertiarySubtlePressed = exports.fillFeedbackInfo = exports.fillFeedbackSuccess = exports.fillFeedbackWarning = exports.fillFeedbackCritical = exports.fillFeedbackTip = exports.foregroundDefault = exports.foregroundSubtle = exports.foregroundEmphasis = exports.foregroundInverse = exports.foregroundOnFillDefault = exports.foregroundOnFillInverse = exports.foregroundInteractiveLink = exports.foregroundInteractiveLinkHover = exports.foregroundInteractiveLinkPressed = exports.foregroundFeedbackInfo = exports.foregroundFeedbackSuccess = exports.foregroundFeedbackWarning = exports.foregroundFeedbackCritical = exports.foregroundFeedbackTip = exports.borderPrimaryDefault = exports.borderPrimaryHover = exports.borderPrimaryPressed = exports.borderPrimarySubtle = exports.borderPrimaryEmphasis = exports.borderPrimarySelected = exports.borderSecondaryDefault = exports.borderSecondaryHover = exports.borderSecondaryPressed = exports.borderTertiaryDefault = exports.borderTertiaryHover = exports.borderTertiaryPressed = exports.borderInteractiveFocus = exports.borderFeedbackInfo = exports.borderFeedbackSuccess = exports.borderFeedbackWarning = exports.borderFeedbackCritical = exports.borderFeedbackTip = exports.componentButtonActionBorderDefault = exports.componentButtonActionBorderHover = exports.componentButtonActionBorderPressed = exports.componentButtonActionFillDefault = exports.componentButtonActionFillHover = exports.componentButtonActionFillPressed = exports.componentButtonActionForegroundDefault = exports.componentButtonActionForegroundHover = exports.componentButtonPrimaryBorderDefault = exports.componentButtonPrimaryBorderHover = exports.componentButtonPrimaryBorderPressed = exports.componentButtonPrimaryFillDefault = exports.componentButtonPrimaryFillHover = exports.componentButtonPrimaryFillPressed = exports.componentButtonPrimaryForegroundDefault = exports.componentButtonPrimaryForegroundHover = exports.componentButtonSecondaryBorderDefault = exports.componentButtonSecondaryBorderHover = exports.componentButtonSecondaryBorderPressed = exports.componentButtonSecondaryFillDefault = exports.componentButtonSecondaryFillHover = exports.componentButtonSecondaryFillPressed = exports.componentButtonSecondaryForegroundDefault = exports.componentButtonSecondaryForegroundHover = exports.componentButtonTertiaryBorderDefault = exports.componentButtonTertiaryBorderHover = exports.componentButtonTertiaryBorderPressed = exports.componentButtonTertiaryFillDefault = exports.componentButtonTertiaryFillHover = exports.componentButtonTertiaryFillPressed = exports.componentButtonTertiaryForegroundDefault = exports.componentButtonTertiaryForegroundHover = exports.componentToggleswitchHandleDefault = exports.componentToggleswitchFillDefault = exports.componentToggleswitchFillDefaultHover = exports.componentToggleswitchFillDefaultPressed = exports.componentToggleswitchFillSelected = exports.componentToggleswitchFillSelectedHover = exports.componentToggleswitchFillSelectedPressed = exports.componentToggleswitchFillCritical = exports.componentLogoName = exports.componentLogoNumber1 = exports.componentLogoCircleDarkRed = exports.componentLogoCircleLightRed = void 0
4
+ exports.backgroundDefault = exports.backgroundSubtle = exports.surfacePrimaryDefault = exports.surfacePrimaryDefaultHover = exports.surfacePrimaryDefaultPressed = exports.surfaceSecondaryDefault = exports.surfaceSecondaryHover = exports.surfaceSecondaryPressed = exports.surfaceTertiaryDefault = exports.surfaceTertiaryHover = exports.surfaceTertiaryPressed = exports.surfaceFeedbackInfo = exports.surfaceFeedbackSuccess = exports.surfaceFeedbackWarning = exports.surfaceFeedbackCritical = exports.surfaceFeedbackTip = exports.fillPrimaryDefault = exports.fillPrimaryHover = exports.fillPrimaryPressed = exports.fillPrimarySelected = exports.fillPrimarySelectedHover = exports.fillPrimarySelectedPressed = exports.fillPrimarySubtle = exports.fillPrimarySubtleHover = exports.fillPrimarySubtlePressed = exports.fillPrimaryInvisible = exports.fillSecondaryDefault = exports.fillSecondaryDefaultHover = exports.fillSecondaryDefaultPressed = exports.fillSecondarySubtle = exports.fillSecondarySubtleHover = exports.fillSecondarySubtlePressed = exports.fillTertiaryDefault = exports.fillTertiaryDefaultHover = exports.fillTertiaryDefaultPressed = exports.fillTertiarySubtle = exports.fillTertiarySubtleHover = exports.fillTertiarySubtlePressed = exports.fillFeedbackInfo = exports.fillFeedbackInfoSubtle = exports.fillFeedbackSuccess = exports.fillFeedbackSuccessSubtle = exports.fillFeedbackWarning = exports.fillFeedbackWarningSubtle = exports.fillFeedbackCritical = exports.fillFeedbackCriticalSubtle = exports.fillFeedbackTip = exports.fillFeedbackTipSubtle = exports.foregroundDefault = exports.foregroundSubtle = exports.foregroundEmphasis = exports.foregroundInverse = exports.foregroundOnFillDefault = exports.foregroundOnFillInverse = exports.foregroundInteractiveLink = exports.foregroundInteractiveLinkHover = exports.foregroundInteractiveLinkPressed = exports.foregroundFeedbackInfo = exports.foregroundFeedbackSuccess = exports.foregroundFeedbackWarning = exports.foregroundFeedbackCritical = exports.foregroundFeedbackTip = exports.borderPrimaryDefault = exports.borderPrimaryHover = exports.borderPrimaryPressed = exports.borderPrimarySubtle = exports.borderPrimaryEmphasis = exports.borderPrimarySelected = exports.borderSecondaryDefault = exports.borderSecondaryHover = exports.borderSecondaryPressed = exports.borderTertiaryDefault = exports.borderTertiaryHover = exports.borderTertiaryPressed = exports.borderInteractiveFocus = exports.borderFeedbackInfo = exports.borderFeedbackSuccess = exports.borderFeedbackWarning = exports.borderFeedbackCritical = exports.borderFeedbackTip = exports.componentButtonActionBorderDefault = exports.componentButtonActionBorderHover = exports.componentButtonActionBorderPressed = exports.componentButtonActionFillDefault = exports.componentButtonActionFillHover = exports.componentButtonActionFillPressed = exports.componentButtonActionForegroundDefault = exports.componentButtonActionForegroundHover = exports.componentButtonPrimaryBorderDefault = exports.componentButtonPrimaryBorderHover = exports.componentButtonPrimaryBorderPressed = exports.componentButtonPrimaryFillDefault = exports.componentButtonPrimaryFillHover = exports.componentButtonPrimaryFillPressed = exports.componentButtonPrimaryForegroundDefault = exports.componentButtonPrimaryForegroundHover = exports.componentButtonSecondaryBorderDefault = exports.componentButtonSecondaryBorderHover = exports.componentButtonSecondaryBorderPressed = exports.componentButtonSecondaryFillDefault = exports.componentButtonSecondaryFillHover = exports.componentButtonSecondaryFillPressed = exports.componentButtonSecondaryForegroundDefault = exports.componentButtonSecondaryForegroundHover = exports.componentButtonTertiaryBorderDefault = exports.componentButtonTertiaryBorderHover = exports.componentButtonTertiaryBorderPressed = exports.componentButtonTertiaryFillDefault = exports.componentButtonTertiaryFillHover = exports.componentButtonTertiaryFillPressed = exports.componentButtonTertiaryForegroundDefault = exports.componentButtonTertiaryForegroundHover = exports.componentToggleswitchHandleDefault = exports.componentToggleswitchFillDefault = exports.componentToggleswitchFillDefaultHover = exports.componentToggleswitchFillDefaultPressed = exports.componentToggleswitchFillSelected = exports.componentToggleswitchFillSelectedHover = exports.componentToggleswitchFillSelectedPressed = exports.componentToggleswitchFillCritical = exports.componentLogoName = exports.componentLogoNumber1 = exports.componentLogoCircleDarkRed = exports.componentLogoCircleLightRed = void 0
5
5
  exports.backgroundDefault = 'var(--ffe-color-background-default)';
6
6
  exports.backgroundSubtle = 'var(--ffe-color-background-subtle)';
7
7
  exports.surfacePrimaryDefault = 'var(--ffe-color-surface-primary-default)';
@@ -41,10 +41,15 @@ exports.fillTertiarySubtle = 'var(--ffe-color-fill-tertiary-subtle)';
41
41
  exports.fillTertiarySubtleHover = 'var(--ffe-color-fill-tertiary-subtle-hover)';
42
42
  exports.fillTertiarySubtlePressed = 'var(--ffe-color-fill-tertiary-subtle-pressed)';
43
43
  exports.fillFeedbackInfo = 'var(--ffe-color-fill-feedback-info)';
44
+ exports.fillFeedbackInfoSubtle = 'var(--ffe-color-fill-feedback-info-subtle)';
44
45
  exports.fillFeedbackSuccess = 'var(--ffe-color-fill-feedback-success)';
46
+ exports.fillFeedbackSuccessSubtle = 'var(--ffe-color-fill-feedback-success-subtle)';
45
47
  exports.fillFeedbackWarning = 'var(--ffe-color-fill-feedback-warning)';
48
+ exports.fillFeedbackWarningSubtle = 'var(--ffe-color-fill-feedback-warning-subtle)';
46
49
  exports.fillFeedbackCritical = 'var(--ffe-color-fill-feedback-critical)';
50
+ exports.fillFeedbackCriticalSubtle = 'var(--ffe-color-fill-feedback-critical-subtle)';
47
51
  exports.fillFeedbackTip = 'var(--ffe-color-fill-feedback-tip)';
52
+ exports.fillFeedbackTipSubtle = 'var(--ffe-color-fill-feedback-tip-subtle)';
48
53
  exports.foregroundDefault = 'var(--ffe-color-foreground-default)';
49
54
  exports.foregroundSubtle = 'var(--ffe-color-foreground-subtle)';
50
55
  exports.foregroundEmphasis = 'var(--ffe-color-foreground-emphasis)';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-core",
3
- "version": "30.0.5",
3
+ "version": "30.0.7",
4
4
  "description": "Rammeverk for Felles Front End",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "c66c1a3fbcef3fd2d074f4430de29938781275ce"
38
+ "gitHead": "e03c829b1831453e20df86e2377da17b77ed7555"
39
39
  }