@gyldendal/kobber-tokens 8.0.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/CHANGELOG.txt +93 -0
  2. package/dist/k-tokens.css +55 -36
  3. package/dist/tokens.css +55 -36
  4. package/dist/tokens.d.ts +81 -50
  5. package/dist/tokens.js +81 -50
  6. package/package.json +1 -1
package/dist/CHANGELOG.txt CHANGED
@@ -1,3 +1,96 @@
1
+ === 03.03.2026, 15:13:44 [3d82c4e5] - MAJOR - npm: v9.0.0 ===
2
+
3
+ ADDED
4
+ components-accordion-container-icon-color
5
+ components-accordion-container-icon-size
6
+ components-accordion-container-padding-block
7
+ components-accordion-container-padding-inline
8
+ components-accordion-gap
9
+ components-content-wrapper-background-color-neutral-tone-a
10
+ components-content-wrapper-background-color-neutral-tone-b
11
+ components-content-wrapper-size-min-width
12
+ components-counter-background-color-brand-tone-a
13
+ components-counter-background-color-brand-tone-b
14
+ components-counter-background-color-neutral
15
+ components-counter-background-color-success
16
+ components-counter-background-color-warning
17
+ components-counter-border-radius
18
+ components-counter-padding-inline
19
+ components-counter-padding-size-height
20
+ components-media-player-item-inner-container-gap
21
+ components-menu-item-padding-left-nested
22
+ components-menu-item-padding-right-nested
23
+ components-multiple-choice-bottom-container-validation-gap
24
+ components-popover-gap
25
+ components-popover-inner-container-content-block-gap
26
+ components-popover-inner-container-gap-large
27
+ components-popover-inner-container-gap-small
28
+ components-popover-size-large
29
+ components-popover-size-medium
30
+ components-popover-size-small
31
+ groups-content-blocks-color-concrete-850
32
+ groups-content-blocks-size-large
33
+ groups-content-blocks-size-medium
34
+ groups-content-blocks-size-small
35
+ groups-counter-aubergine-150
36
+ groups-counter-aubergine-850
37
+ groups-counter-border-radius
38
+ groups-counter-concrete-150
39
+ groups-counter-size-medium
40
+ groups-counter-space-xxsmall
41
+ groups-counter-success-700
42
+ groups-counter-warning-700
43
+ groups-menus-color-aubergine-150
44
+ groups-menus-visual-icon-size-xlarge
45
+ groups-popovers-size-medium
46
+ groups-popovers-size-small
47
+ groups-popovers-space-large
48
+ layouts-resource-bank-color-background-concrete-25
49
+ semantics-layout-component-size-tiny
50
+ semantics-layout-component-size-xxlarge
51
+ semantics-layout-element-size-xbig
52
+ semantics-visual-icon-size-xlarge
53
+
54
+ REMOVED
55
+ components-accordion-container-background-color-isopen-true
56
+ components-accordion-container-padding
57
+ components-content-island-inner-container-text-container-padding-block
58
+ components-content-wrapper-background-color-neutral
59
+ components-label-background-color-brand-tone-a
60
+ components-label-background-color-brand-tone-b
61
+ components-label-background-color-neutral
62
+ components-label-background-color-success
63
+ components-label-background-color-warning
64
+ components-label-border-radius
65
+ components-label-padding-inline
66
+ components-label-padding-size-height
67
+ components-menu-panel-background-color
68
+ components-menu-panel-border-radius
69
+ components-menu-panel-gap
70
+ components-menu-panel-padding
71
+ components-menu-panel-shadow-blur
72
+ components-menu-panel-shadow-color
73
+ components-popover-gap-medium
74
+ components-popover-gap-small
75
+ components-popover-size-max-width
76
+ groups-content-blocks-size
77
+ groups-labels-aubergine-150
78
+ groups-labels-aubergine-850
79
+ groups-labels-border-radius
80
+ groups-labels-concrete-150
81
+ groups-labels-size-medium
82
+ groups-labels-space-xxsmall
83
+ groups-labels-success-700
84
+ groups-labels-warning-700
85
+
86
+ CHANGED
87
+ components-accordion-container-background-color-hover
88
+ components-accordion-container-gap
89
+ components-content-wrapper-size-max-width
90
+ components-dropdown-size-height
91
+ groups-popovers-size-large
92
+ semantics-layout-component-size-xxxsmall
93
+
1
94
  === 26.02.2026, 14:49:45 [6d272094] - MAJOR - npm: v8.0.0 ===
2
95
 
3
96
  ADDED
package/dist/k-tokens.css CHANGED
@@ -273,9 +273,9 @@
273
273
  --k-groups-content-controls-color-neutral-1000-10: var(--k-primitives-color-concrete-1000-10);
274
274
  --k-groups-content-controls-color-aubergine-1000-10: var(--k-primitives-color-aubergine-1000-10);
275
275
  --k-groups-content-controls-color-aubergine-25-20: var(--k-primitives-color-aubergine-25-20);
276
- --k-groups-labels-concrete-150: var(--k-primitives-color-concrete-150);
277
- --k-groups-labels-aubergine-150: var(--k-primitives-color-aubergine-150);
278
- --k-groups-labels-aubergine-850: var(--k-primitives-color-aubergine-850);
276
+ --k-groups-counter-concrete-150: var(--k-primitives-color-concrete-150);
277
+ --k-groups-counter-aubergine-150: var(--k-primitives-color-aubergine-150);
278
+ --k-groups-counter-aubergine-850: var(--k-primitives-color-aubergine-850);
279
279
  --k-components-text-label-text-weight: var(--k-semantics-typography-regular);
280
280
  --k-components-text-body-text-weight-brand: var(--k-semantics-typography-regular);
281
281
  --k-components-text-body-text-weight-reading-regular: var(--k-semantics-typography-regular);
@@ -412,6 +412,7 @@
412
412
  --k-semantics-layout-element-size-tiny: var(--k-primitives-size-4);
413
413
  --k-semantics-layout-element-size-xxxlarge: var(--k-primitives-size-56);
414
414
  --k-semantics-layout-element-size-big: var(--k-primitives-size-180);
415
+ --k-semantics-layout-element-size-xbig: var(--k-primitives-size-320);
415
416
  --k-semantics-layout-element-space-large: var(--k-primitives-size-24);
416
417
  --k-semantics-layout-element-space-medium: var(--k-primitives-size-16);
417
418
  --k-semantics-layout-element-space-small: var(--k-primitives-size-12);
@@ -435,10 +436,12 @@
435
436
  --k-semantics-layout-component-size-medium: var(--k-primitives-size-320);
436
437
  --k-semantics-layout-component-size-small: var(--k-primitives-size-262);
437
438
  --k-semantics-layout-component-size-xlarge: var(--k-primitives-size-568);
438
- --k-semantics-layout-component-size-xxxsmall: var(--k-primitives-size-120);
439
+ --k-semantics-layout-component-size-tiny: var(--k-primitives-size-120);
439
440
  --k-semantics-layout-component-size-xsmall: var(--k-primitives-size-232);
440
441
  --k-semantics-layout-component-size-xxsmall: var(--k-primitives-size-224);
441
442
  --k-semantics-layout-component-size-large: var(--k-primitives-size-448);
443
+ --k-semantics-layout-component-size-xxlarge: var(--k-primitives-size-720);
444
+ --k-semantics-layout-component-size-xxxsmall: var(--k-primitives-size-180);
442
445
  --k-semantics-layout-component-space-xlarge: var(--k-primitives-size-48);
443
446
  --k-semantics-layout-component-space-big: var(--k-primitives-size-56);
444
447
  --k-semantics-layout-component-space-large: var(--k-primitives-size-40);
@@ -467,6 +470,7 @@
467
470
  --k-semantics-visual-icon-size-large: var(--k-primitives-size-16);
468
471
  --k-semantics-visual-icon-size-medium: var(--k-primitives-size-12);
469
472
  --k-semantics-visual-icon-size-small: var(--k-primitives-size-10);
473
+ --k-semantics-visual-icon-size-xlarge: var(--k-primitives-size-24);
470
474
  --k-semantics-visual-profile-small: var(--k-primitives-size-120);
471
475
  --k-semantics-visual-profile-medium: var(--k-primitives-size-180);
472
476
  --k-semantics-visual-profile-xxlarge: var(--k-primitives-size-301);
@@ -494,6 +498,7 @@
494
498
  --k-semantics-effect-shadow-spread-medium: var(--k-primitives-spread-2);
495
499
  --k-semantics-effect-gradient-stops-0: var(--k-primitives-opacity-0);
496
500
  --k-semantics-effect-gradient-stops-100: var(--k-primitives-opacity-100);
501
+ --k-layouts-resource-bank-color-background-concrete-25: var(--k-primitives-color-concrete-25);
497
502
  --k-groups-buttons-space-small: var(--k-semantics-layout-element-space-xsmall);
498
503
  --k-groups-buttons-space-large: var(--k-semantics-layout-element-space-medium);
499
504
  --k-groups-buttons-space-medium: var(--k-semantics-layout-element-space-small);
@@ -647,9 +652,11 @@
647
652
  --k-groups-menus-color-aubergine-750: var(--k-semantics-color-identity-base-aubergine-750);
648
653
  --k-groups-menus-color-wine-150: var(--k-semantics-color-identity-extended-wine-150);
649
654
  --k-groups-menus-color-neutral-525: var(--k-semantics-effect-shadow-color-concrete-1000-10);
655
+ --k-groups-menus-color-aubergine-150: var(--k-semantics-color-identity-extended-aubergine-150);
650
656
  --k-groups-menus-visual-image-size: var(--k-semantics-layout-element-size-xlarge);
651
657
  --k-groups-menus-visual-icon-size-large: var(--k-semantics-visual-icon-size-large);
652
658
  --k-groups-menus-visual-icon-size-medium: var(--k-semantics-visual-icon-size-medium);
659
+ --k-groups-menus-visual-icon-size-xlarge: var(--k-semantics-visual-icon-size-xlarge);
653
660
  --k-groups-menus-shadow-blur: var(--k-semantics-effect-shadow-blur-small);
654
661
  --k-groups-menus-size: var(--k-semantics-layout-element-size-xlarge);
655
662
  --k-groups-collapsibles-color-bright: var(--k-semantics-color-identity-base-aubergine-50);
@@ -798,20 +805,23 @@
798
805
  --k-groups-content-controls-effects-shadow-color-neutral-25-10: var(--k-semantics-effect-shadow-color-concrete-25-10);
799
806
  --k-groups-content-controls-effects-shadow-blur: var(--k-semantics-effect-shadow-blur-small);
800
807
  --k-groups-content-controls-effects-shadow-spread: var(--k-semantics-effect-shadow-spread-large);
801
- --k-groups-labels-success-700: var(--k-semantics-color-ui-status-success-success-700);
802
- --k-groups-labels-warning-700: var(--k-semantics-color-ui-status-warning-warning-700);
803
- --k-groups-labels-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
804
- --k-groups-labels-size-medium: var(--k-semantics-layout-element-size-medium);
805
- --k-groups-labels-border-radius: var(--k-semantics-layout-element-radius-xsmall);
808
+ --k-groups-counter-success-700: var(--k-semantics-color-ui-status-success-success-700);
809
+ --k-groups-counter-warning-700: var(--k-semantics-color-ui-status-warning-warning-700);
810
+ --k-groups-counter-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
811
+ --k-groups-counter-size-medium: var(--k-semantics-layout-element-size-medium);
812
+ --k-groups-counter-border-radius: var(--k-semantics-layout-element-radius-xsmall);
806
813
  --k-groups-content-blocks-color-aubergine-850: var(--k-semantics-color-identity-base-aubergine-850);
807
814
  --k-groups-content-blocks-color-aubergine-25: var(--k-semantics-color-identity-base-aubergine-25);
808
815
  --k-groups-content-blocks-color-concrete-25: var(--k-semantics-color-identity-neutral-concrete-25);
816
+ --k-groups-content-blocks-color-concrete-850: var(--k-semantics-color-identity-neutral-concrete-850);
809
817
  --k-groups-content-blocks-space-medium: var(--k-semantics-layout-component-space-xlarge);
810
818
  --k-groups-content-blocks-space-xlarge: var(--k-semantics-layout-component-space-huge);
811
819
  --k-groups-content-blocks-space-large: var(--k-semantics-layout-component-space-big);
812
820
  --k-groups-content-blocks-space-small: var(--k-semantics-layout-component-space-large);
813
821
  --k-groups-content-blocks-space-xsmall: var(--k-semantics-layout-component-space-small);
814
- --k-groups-content-blocks-size: var(--k-semantics-layout-component-size-xlarge);
822
+ --k-groups-content-blocks-size-medium: var(--k-semantics-layout-component-size-xlarge);
823
+ --k-groups-content-blocks-size-large: var(--k-semantics-layout-component-size-xxlarge);
824
+ --k-groups-content-blocks-size-small: var(--k-semantics-layout-component-size-medium);
815
825
  --k-groups-content-blocks-radius: var(--k-semantics-layout-component-radius-large);
816
826
  --k-groups-media-players-space-medium: var(--k-semantics-layout-element-space-medium);
817
827
  --k-groups-media-players-space-small: var(--k-semantics-layout-element-space-small);
@@ -823,12 +833,15 @@
823
833
  --k-groups-media-players-color-aubergine-50: var(--k-semantics-color-identity-base-aubergine-50);
824
834
  --k-groups-popovers-space-medium: var(--k-semantics-layout-element-space-medium);
825
835
  --k-groups-popovers-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
836
+ --k-groups-popovers-space-large: var(--k-semantics-layout-element-space-large);
826
837
  --k-groups-popovers-border-radius-xsmall: var(--k-semantics-layout-element-radius-xsmall);
827
838
  --k-groups-popovers-effects-shadow-blur-small: var(--k-semantics-effect-shadow-blur-small);
828
839
  --k-groups-popovers-effects-shadow-color-neutral-1000-10: var(--k-semantics-effect-shadow-color-concrete-325);
829
840
  --k-groups-popovers-color-neutral-25: var(--k-semantics-color-identity-neutral-concrete-25);
830
841
  --k-groups-popovers-color-aubergine-25: var(--k-semantics-color-identity-base-aubergine-25);
831
- --k-groups-popovers-size-large: var(--k-semantics-layout-element-size-huge);
842
+ --k-groups-popovers-size-large: var(--k-semantics-layout-component-size-large);
843
+ --k-groups-popovers-size-medium: var(--k-semantics-layout-component-size-medium);
844
+ --k-groups-popovers-size-small: var(--k-semantics-layout-component-size-xxxsmall);
832
845
  --k-groups-sliders-size-xxsmall: var(--k-semantics-layout-element-size-tiny);
833
846
  --k-groups-sliders-size-xsmall: var(--k-semantics-layout-element-size-xxxsmall);
834
847
  --k-groups-sliders-color-purple-450: var(--k-semantics-color-identity-extended-purple-450);
@@ -937,9 +950,9 @@
937
950
  --k-components-text-display-extended-text-font-alt2: var(--k-semantics-typography-font-family-lyon-display);
938
951
  --k-components-text-display-extended-text-font-alt1: var(--k-semantics-typography-font-family-pp-mori);
939
952
  --k-components-text-display-padding-bottom: var(--k-semantics-layout-element-space-xsmall);
940
- --k-components-label-background-color-neutral: var(--k-groups-labels-concrete-150);
941
- --k-components-label-background-color-brand-tone-a: var(--k-groups-labels-aubergine-150);
942
- --k-components-label-background-color-brand-tone-b: var(--k-groups-labels-aubergine-850);
953
+ --k-components-counter-background-color-neutral: var(--k-groups-counter-concrete-150);
954
+ --k-components-counter-background-color-brand-tone-a: var(--k-groups-counter-aubergine-150);
955
+ --k-components-counter-background-color-brand-tone-b: var(--k-groups-counter-aubergine-850);
943
956
  --k-universal-focus-border-radius-xsmall: var(--k-semantics-layout-element-radius-xsmall);
944
957
  --k-universal-focus-border-radius-medium: var(--k-semantics-layout-element-radius-medium);
945
958
  --k-universal-focus-border-radius-large: var(--k-semantics-layout-element-radius-large);
@@ -1371,6 +1384,8 @@
1371
1384
  --k-components-menu-item-border-radius: var(--k-groups-menus-radius-small);
1372
1385
  --k-components-menu-item-padding-block: var(--k-groups-menus-space-small);
1373
1386
  --k-components-menu-item-padding-inline: var(--k-groups-menus-space-medium);
1387
+ --k-components-menu-item-padding-left-nested: var(--k-groups-menus-space-large);
1388
+ --k-components-menu-item-padding-right-nested: var(--k-groups-menus-space-medium);
1374
1389
  --k-components-menu-item-text-container-border-bottom-padding: var(--k-groups-menus-space-tiny);
1375
1390
  --k-components-menu-item-text-container-border-weight-active: var(--k-groups-menus-stroke);
1376
1391
  --k-components-menu-item-text-container-border-color-active: var(--k-groups-menus-color-aubergine-750);
@@ -1410,19 +1425,13 @@
1410
1425
  --k-components-navigation-bar-padding-block-desktop: var(--k-groups-navigation-bars-space-xlarge);
1411
1426
  --k-components-navigation-bar-padding-block-mobile: var(--k-groups-navigation-bars-space-medium);
1412
1427
  --k-components-navigation-bar-inner-container-gap: var(--k-groups-navigation-bars-space-small);
1413
- --k-components-menu-panel-padding: var(--k-groups-menus-space-medium);
1414
- --k-components-menu-panel-border-radius: var(--k-groups-menus-radius-large);
1415
- --k-components-menu-panel-gap: var(--k-groups-menus-space-medium);
1416
- --k-components-menu-panel-background-color: var(--k-groups-menus-color-aubergine-25);
1417
- --k-components-menu-panel-shadow-color: var(--k-groups-menus-color-neutral-525);
1418
- --k-components-menu-panel-shadow-blur: var(--k-groups-menus-shadow-blur);
1419
1428
  --k-components-dropdown-padding-inline: var(--k-groups-menus-space-medium);
1420
1429
  --k-components-dropdown-gap: var(--k-groups-menus-space-small);
1421
1430
  --k-components-dropdown-background-color-filled-fallback: var(--k-groups-menus-color-aubergine-50);
1422
1431
  --k-components-dropdown-background-color-filled-hover: var(--k-groups-menus-color-wine-50);
1423
1432
  --k-components-dropdown-icon-color: var(--k-groups-menus-color-aubergine-750);
1424
1433
  --k-components-dropdown-icon-size: var(--k-groups-menus-visual-icon-size-large);
1425
- --k-components-dropdown-size-height: var(--k-groups-menus-visual-image-size);
1434
+ --k-components-dropdown-size-height: var(--k-groups-menus-space-large);
1426
1435
  --k-components-dropdown-border-radius: var(--k-groups-menus-radius-medium);
1427
1436
  --k-components-text-module-padding-inline: var(--k-groups-text-blocks-space-medium);
1428
1437
  --k-components-text-module-padding-top: var(--k-groups-text-blocks-space-large);
@@ -1529,11 +1538,14 @@
1529
1538
  --k-components-feature-item-prominent-border-radius: var(--k-groups-cards-and-modules-radius-large);
1530
1539
  --k-components-feature-item-prominent-media-box-container-padding-inline: var(--k-groups-cards-and-modules-space-large);
1531
1540
  --k-components-feature-item-prominent-size-height: var(--k-groups-cards-and-modules-size-container-large);
1532
- --k-components-accordion-container-padding: var(--k-groups-menus-space-medium);
1533
- --k-components-accordion-container-gap: var(--k-groups-menus-space-xsmall);
1534
- --k-components-accordion-container-background-color-isopen-true: var(--k-groups-menus-color-aubergine-50);
1535
- --k-components-accordion-container-background-color-hover: var(--k-groups-menus-color-aubergine-50);
1541
+ --k-components-accordion-container-padding-inline: var(--k-groups-menus-space-xsmall);
1542
+ --k-components-accordion-container-padding-block: var(--k-groups-menus-space-small);
1543
+ --k-components-accordion-container-background-color-hover: var(--k-groups-menus-color-wine-50);
1536
1544
  --k-components-accordion-container-border-radius: var(--k-groups-menus-radius-small);
1545
+ --k-components-accordion-container-gap: var(--k-groups-menus-space-medium);
1546
+ --k-components-accordion-container-icon-color: var(--k-groups-menus-color-aubergine-750);
1547
+ --k-components-accordion-container-icon-size: var(--k-groups-menus-visual-icon-size-xlarge);
1548
+ --k-components-accordion-gap: var(--k-groups-menus-space-tiny);
1537
1549
  --k-components-list-list-block-gap: var(--k-groups-text-blocks-space-xxsmall);
1538
1550
  --k-components-list-nested-list-container-gap: var(--k-groups-text-blocks-space-xxsmall);
1539
1551
  --k-components-list-gap-ordered-medium: var(--k-groups-text-blocks-space-xsmall);
@@ -1708,7 +1720,6 @@
1708
1720
  --k-components-content-island-background-color-neutral: var(--k-groups-content-controls-color-neutral-25);
1709
1721
  --k-components-content-island-inner-left-container-gap: var(--k-groups-content-controls-space-xxsmall);
1710
1722
  --k-components-content-island-border-radius: var(--k-groups-content-controls-border-radius-xsmall);
1711
- --k-components-content-island-inner-container-text-container-padding-block: var(--k-groups-content-controls-space-medium);
1712
1723
  --k-components-content-island-effect-shadow-spread: var(--k-groups-content-controls-effects-shadow-spread);
1713
1724
  --k-components-content-island-effect-shadow-color-brand-tone-a: var(--k-groups-content-controls-effects-shadow-color-aubergine-1000-10);
1714
1725
  --k-components-content-island-effect-shadow-color-brand-tone-b: var(--k-groups-content-controls-effects-shadow-color-aubergine-25-10);
@@ -1720,11 +1731,11 @@
1720
1731
  --k-components-media-border-radius: var(--k-groups-cards-and-modules-radius-small);
1721
1732
  --k-components-media-gap: var(--k-groups-cards-and-modules-space-large);
1722
1733
  --k-components-button-group-gap: var(--k-groups-buttons-space-small);
1723
- --k-components-label-background-color-success: var(--k-groups-labels-success-700);
1724
- --k-components-label-background-color-warning: var(--k-groups-labels-warning-700);
1725
- --k-components-label-padding-inline: var(--k-groups-labels-space-xxsmall);
1726
- --k-components-label-padding-size-height: var(--k-groups-labels-size-medium);
1727
- --k-components-label-border-radius: var(--k-groups-labels-border-radius);
1734
+ --k-components-counter-background-color-success: var(--k-groups-counter-success-700);
1735
+ --k-components-counter-background-color-warning: var(--k-groups-counter-warning-700);
1736
+ --k-components-counter-padding-inline: var(--k-groups-counter-space-xxsmall);
1737
+ --k-components-counter-padding-size-height: var(--k-groups-counter-size-medium);
1738
+ --k-components-counter-border-radius: var(--k-groups-counter-border-radius);
1728
1739
  --k-components-content-controls-background-color-brand-hover: var(--k-groups-content-controls-color-aubergine-50);
1729
1740
  --k-components-content-controls-background-color-brand-selected: var(--k-groups-content-controls-color-aubergine-50);
1730
1741
  --k-components-content-controls-border-radius-xsmall: var(--k-groups-content-controls-border-radius-xsmall);
@@ -1763,19 +1774,21 @@
1763
1774
  --k-components-multiple-choice-media-container-border-radius: var(--k-groups-cards-and-modules-radius-large);
1764
1775
  --k-components-multiple-choice-media-container-padding: var(--k-groups-cards-and-modules-space-medium);
1765
1776
  --k-components-multiple-choice-bottom-container-gap: var(--k-groups-cards-and-modules-space-small);
1777
+ --k-components-multiple-choice-bottom-container-validation-gap: var(--k-groups-cards-and-modules-space-small);
1766
1778
  --k-components-content-wrapper-background-color-brand-tone-a: var(--k-groups-content-blocks-color-aubergine-850);
1767
1779
  --k-components-content-wrapper-background-color-brand-tone-b: var(--k-groups-content-blocks-color-aubergine-25);
1768
- --k-components-content-wrapper-background-color-neutral: var(--k-groups-content-blocks-color-concrete-25);
1780
+ --k-components-content-wrapper-background-color-neutral-tone-b: var(--k-groups-content-blocks-color-concrete-25);
1781
+ --k-components-content-wrapper-background-color-neutral-tone-a: var(--k-groups-content-blocks-color-concrete-850);
1769
1782
  --k-components-content-wrapper-padding-block-overlay: var(--k-groups-content-blocks-space-medium);
1770
1783
  --k-components-content-wrapper-padding-block-page: var(--k-groups-content-blocks-space-xlarge);
1771
1784
  --k-components-content-wrapper-padding-inline-page: var(--k-groups-content-blocks-space-large);
1772
1785
  --k-components-content-wrapper-padding-inline-overlay: var(--k-groups-content-blocks-space-large);
1773
- --k-components-content-wrapper-size-max-width: var(--k-groups-content-blocks-size);
1786
+ --k-components-content-wrapper-size-max-width: var(--k-groups-content-blocks-size-large);
1787
+ --k-components-content-wrapper-size-min-width: var(--k-groups-content-blocks-size-small);
1774
1788
  --k-components-content-wrapper-border-radius-overlay: var(--k-groups-content-blocks-radius);
1775
1789
  --k-components-content-wrapper-inner-container-gap: var(--k-groups-content-blocks-space-small);
1776
1790
  --k-components-content-top-block-gap: var(--k-groups-content-blocks-space-xsmall);
1777
- --k-components-popover-gap-medium: var(--k-groups-popovers-space-medium);
1778
- --k-components-popover-gap-small: var(--k-groups-popovers-space-xxsmall);
1791
+ --k-components-popover-gap: var(--k-groups-popovers-space-medium);
1779
1792
  --k-components-popover-padding-medium: var(--k-groups-popovers-space-medium);
1780
1793
  --k-components-popover-padding-small: var(--k-groups-popovers-space-xxsmall);
1781
1794
  --k-components-popover-border-radius: var(--k-groups-popovers-border-radius-xsmall);
@@ -1783,7 +1796,12 @@
1783
1796
  --k-components-popover-effect-shadow-color-neutral: var(--k-groups-popovers-effects-shadow-color-neutral-1000-10);
1784
1797
  --k-components-popover-background-color-neutral: var(--k-groups-popovers-color-neutral-25);
1785
1798
  --k-components-popover-background-color-brand: var(--k-groups-popovers-color-aubergine-25);
1786
- --k-components-popover-size-max-width: var(--k-groups-popovers-size-large);
1799
+ --k-components-popover-size-large: var(--k-groups-popovers-size-large);
1800
+ --k-components-popover-size-medium: var(--k-groups-popovers-size-medium);
1801
+ --k-components-popover-size-small: var(--k-groups-popovers-size-small);
1802
+ --k-components-popover-inner-container-gap-small: var(--k-groups-popovers-space-xxsmall);
1803
+ --k-components-popover-inner-container-gap-large: var(--k-groups-popovers-space-large);
1804
+ --k-components-popover-inner-container-content-block-gap: var(--k-groups-popovers-space-medium);
1787
1805
  --k-components-slider-border-radius: var(--k-groups-sliders-border-radius-xsmall);
1788
1806
  --k-components-slider-background-color: var(--k-groups-sliders-color-purple-25);
1789
1807
  --k-components-slider-size-height: var(--k-groups-sliders-size-xxsmall);
@@ -1797,6 +1815,7 @@
1797
1815
  --k-components-media-player-item-effect-shadow-color-neutral: var(--k-groups-media-players-effects-shadow-color-neutral-1000-10);
1798
1816
  --k-components-media-player-item-border-radius: var(--k-groups-media-players-border-radius-xsmall);
1799
1817
  --k-components-media-player-item-padding: var(--k-groups-media-players-space-xxsmall);
1818
+ --k-components-media-player-item-inner-container-gap: var(--k-groups-media-players-space-small);
1800
1819
  --k-components-media-player-border-radius: var(--k-groups-media-players-border-radius-xsmall);
1801
1820
  --k-components-media-player-border-color: var(--k-groups-media-players-color-aubergine-50);
1802
1821
  --k-components-media-player-padding: var(--k-groups-media-players-space-medium);
package/dist/tokens.css CHANGED
@@ -273,9 +273,9 @@
273
273
  --kobber-groups-content-controls-color-neutral-1000-10: var(--kobber-primitives-color-concrete-1000-10);
274
274
  --kobber-groups-content-controls-color-aubergine-1000-10: var(--kobber-primitives-color-aubergine-1000-10);
275
275
  --kobber-groups-content-controls-color-aubergine-25-20: var(--kobber-primitives-color-aubergine-25-20);
276
- --kobber-groups-labels-concrete-150: var(--kobber-primitives-color-concrete-150);
277
- --kobber-groups-labels-aubergine-150: var(--kobber-primitives-color-aubergine-150);
278
- --kobber-groups-labels-aubergine-850: var(--kobber-primitives-color-aubergine-850);
276
+ --kobber-groups-counter-concrete-150: var(--kobber-primitives-color-concrete-150);
277
+ --kobber-groups-counter-aubergine-150: var(--kobber-primitives-color-aubergine-150);
278
+ --kobber-groups-counter-aubergine-850: var(--kobber-primitives-color-aubergine-850);
279
279
  --kobber-components-text-label-text-weight: var(--kobber-semantics-typography-regular);
280
280
  --kobber-components-text-body-text-weight-brand: var(--kobber-semantics-typography-regular);
281
281
  --kobber-components-text-body-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
@@ -412,6 +412,7 @@
412
412
  --kobber-semantics-layout-element-size-tiny: var(--kobber-primitives-size-4);
413
413
  --kobber-semantics-layout-element-size-xxxlarge: var(--kobber-primitives-size-56);
414
414
  --kobber-semantics-layout-element-size-big: var(--kobber-primitives-size-180);
415
+ --kobber-semantics-layout-element-size-xbig: var(--kobber-primitives-size-320);
415
416
  --kobber-semantics-layout-element-space-large: var(--kobber-primitives-size-24);
416
417
  --kobber-semantics-layout-element-space-medium: var(--kobber-primitives-size-16);
417
418
  --kobber-semantics-layout-element-space-small: var(--kobber-primitives-size-12);
@@ -435,10 +436,12 @@
435
436
  --kobber-semantics-layout-component-size-medium: var(--kobber-primitives-size-320);
436
437
  --kobber-semantics-layout-component-size-small: var(--kobber-primitives-size-262);
437
438
  --kobber-semantics-layout-component-size-xlarge: var(--kobber-primitives-size-568);
438
- --kobber-semantics-layout-component-size-xxxsmall: var(--kobber-primitives-size-120);
439
+ --kobber-semantics-layout-component-size-tiny: var(--kobber-primitives-size-120);
439
440
  --kobber-semantics-layout-component-size-xsmall: var(--kobber-primitives-size-232);
440
441
  --kobber-semantics-layout-component-size-xxsmall: var(--kobber-primitives-size-224);
441
442
  --kobber-semantics-layout-component-size-large: var(--kobber-primitives-size-448);
443
+ --kobber-semantics-layout-component-size-xxlarge: var(--kobber-primitives-size-720);
444
+ --kobber-semantics-layout-component-size-xxxsmall: var(--kobber-primitives-size-180);
442
445
  --kobber-semantics-layout-component-space-xlarge: var(--kobber-primitives-size-48);
443
446
  --kobber-semantics-layout-component-space-big: var(--kobber-primitives-size-56);
444
447
  --kobber-semantics-layout-component-space-large: var(--kobber-primitives-size-40);
@@ -467,6 +470,7 @@
467
470
  --kobber-semantics-visual-icon-size-large: var(--kobber-primitives-size-16);
468
471
  --kobber-semantics-visual-icon-size-medium: var(--kobber-primitives-size-12);
469
472
  --kobber-semantics-visual-icon-size-small: var(--kobber-primitives-size-10);
473
+ --kobber-semantics-visual-icon-size-xlarge: var(--kobber-primitives-size-24);
470
474
  --kobber-semantics-visual-profile-small: var(--kobber-primitives-size-120);
471
475
  --kobber-semantics-visual-profile-medium: var(--kobber-primitives-size-180);
472
476
  --kobber-semantics-visual-profile-xxlarge: var(--kobber-primitives-size-301);
@@ -494,6 +498,7 @@
494
498
  --kobber-semantics-effect-shadow-spread-medium: var(--kobber-primitives-spread-2);
495
499
  --kobber-semantics-effect-gradient-stops-0: var(--kobber-primitives-opacity-0);
496
500
  --kobber-semantics-effect-gradient-stops-100: var(--kobber-primitives-opacity-100);
501
+ --kobber-layouts-resource-bank-color-background-concrete-25: var(--kobber-primitives-color-concrete-25);
497
502
  --kobber-groups-buttons-space-small: var(--kobber-semantics-layout-element-space-xsmall);
498
503
  --kobber-groups-buttons-space-large: var(--kobber-semantics-layout-element-space-medium);
499
504
  --kobber-groups-buttons-space-medium: var(--kobber-semantics-layout-element-space-small);
@@ -647,9 +652,11 @@
647
652
  --kobber-groups-menus-color-aubergine-750: var(--kobber-semantics-color-identity-base-aubergine-750);
648
653
  --kobber-groups-menus-color-wine-150: var(--kobber-semantics-color-identity-extended-wine-150);
649
654
  --kobber-groups-menus-color-neutral-525: var(--kobber-semantics-effect-shadow-color-concrete-1000-10);
655
+ --kobber-groups-menus-color-aubergine-150: var(--kobber-semantics-color-identity-extended-aubergine-150);
650
656
  --kobber-groups-menus-visual-image-size: var(--kobber-semantics-layout-element-size-xlarge);
651
657
  --kobber-groups-menus-visual-icon-size-large: var(--kobber-semantics-visual-icon-size-large);
652
658
  --kobber-groups-menus-visual-icon-size-medium: var(--kobber-semantics-visual-icon-size-medium);
659
+ --kobber-groups-menus-visual-icon-size-xlarge: var(--kobber-semantics-visual-icon-size-xlarge);
653
660
  --kobber-groups-menus-shadow-blur: var(--kobber-semantics-effect-shadow-blur-small);
654
661
  --kobber-groups-menus-size: var(--kobber-semantics-layout-element-size-xlarge);
655
662
  --kobber-groups-collapsibles-color-bright: var(--kobber-semantics-color-identity-base-aubergine-50);
@@ -798,20 +805,23 @@
798
805
  --kobber-groups-content-controls-effects-shadow-color-neutral-25-10: var(--kobber-semantics-effect-shadow-color-concrete-25-10);
799
806
  --kobber-groups-content-controls-effects-shadow-blur: var(--kobber-semantics-effect-shadow-blur-small);
800
807
  --kobber-groups-content-controls-effects-shadow-spread: var(--kobber-semantics-effect-shadow-spread-large);
801
- --kobber-groups-labels-success-700: var(--kobber-semantics-color-ui-status-success-success-700);
802
- --kobber-groups-labels-warning-700: var(--kobber-semantics-color-ui-status-warning-warning-700);
803
- --kobber-groups-labels-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
804
- --kobber-groups-labels-size-medium: var(--kobber-semantics-layout-element-size-medium);
805
- --kobber-groups-labels-border-radius: var(--kobber-semantics-layout-element-radius-xsmall);
808
+ --kobber-groups-counter-success-700: var(--kobber-semantics-color-ui-status-success-success-700);
809
+ --kobber-groups-counter-warning-700: var(--kobber-semantics-color-ui-status-warning-warning-700);
810
+ --kobber-groups-counter-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
811
+ --kobber-groups-counter-size-medium: var(--kobber-semantics-layout-element-size-medium);
812
+ --kobber-groups-counter-border-radius: var(--kobber-semantics-layout-element-radius-xsmall);
806
813
  --kobber-groups-content-blocks-color-aubergine-850: var(--kobber-semantics-color-identity-base-aubergine-850);
807
814
  --kobber-groups-content-blocks-color-aubergine-25: var(--kobber-semantics-color-identity-base-aubergine-25);
808
815
  --kobber-groups-content-blocks-color-concrete-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
816
+ --kobber-groups-content-blocks-color-concrete-850: var(--kobber-semantics-color-identity-neutral-concrete-850);
809
817
  --kobber-groups-content-blocks-space-medium: var(--kobber-semantics-layout-component-space-xlarge);
810
818
  --kobber-groups-content-blocks-space-xlarge: var(--kobber-semantics-layout-component-space-huge);
811
819
  --kobber-groups-content-blocks-space-large: var(--kobber-semantics-layout-component-space-big);
812
820
  --kobber-groups-content-blocks-space-small: var(--kobber-semantics-layout-component-space-large);
813
821
  --kobber-groups-content-blocks-space-xsmall: var(--kobber-semantics-layout-component-space-small);
814
- --kobber-groups-content-blocks-size: var(--kobber-semantics-layout-component-size-xlarge);
822
+ --kobber-groups-content-blocks-size-medium: var(--kobber-semantics-layout-component-size-xlarge);
823
+ --kobber-groups-content-blocks-size-large: var(--kobber-semantics-layout-component-size-xxlarge);
824
+ --kobber-groups-content-blocks-size-small: var(--kobber-semantics-layout-component-size-medium);
815
825
  --kobber-groups-content-blocks-radius: var(--kobber-semantics-layout-component-radius-large);
816
826
  --kobber-groups-media-players-space-medium: var(--kobber-semantics-layout-element-space-medium);
817
827
  --kobber-groups-media-players-space-small: var(--kobber-semantics-layout-element-space-small);
@@ -823,12 +833,15 @@
823
833
  --kobber-groups-media-players-color-aubergine-50: var(--kobber-semantics-color-identity-base-aubergine-50);
824
834
  --kobber-groups-popovers-space-medium: var(--kobber-semantics-layout-element-space-medium);
825
835
  --kobber-groups-popovers-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
836
+ --kobber-groups-popovers-space-large: var(--kobber-semantics-layout-element-space-large);
826
837
  --kobber-groups-popovers-border-radius-xsmall: var(--kobber-semantics-layout-element-radius-xsmall);
827
838
  --kobber-groups-popovers-effects-shadow-blur-small: var(--kobber-semantics-effect-shadow-blur-small);
828
839
  --kobber-groups-popovers-effects-shadow-color-neutral-1000-10: var(--kobber-semantics-effect-shadow-color-concrete-325);
829
840
  --kobber-groups-popovers-color-neutral-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
830
841
  --kobber-groups-popovers-color-aubergine-25: var(--kobber-semantics-color-identity-base-aubergine-25);
831
- --kobber-groups-popovers-size-large: var(--kobber-semantics-layout-element-size-huge);
842
+ --kobber-groups-popovers-size-large: var(--kobber-semantics-layout-component-size-large);
843
+ --kobber-groups-popovers-size-medium: var(--kobber-semantics-layout-component-size-medium);
844
+ --kobber-groups-popovers-size-small: var(--kobber-semantics-layout-component-size-xxxsmall);
832
845
  --kobber-groups-sliders-size-xxsmall: var(--kobber-semantics-layout-element-size-tiny);
833
846
  --kobber-groups-sliders-size-xsmall: var(--kobber-semantics-layout-element-size-xxxsmall);
834
847
  --kobber-groups-sliders-color-purple-450: var(--kobber-semantics-color-identity-extended-purple-450);
@@ -937,9 +950,9 @@
937
950
  --kobber-components-text-display-extended-text-font-alt2: var(--kobber-semantics-typography-font-family-lyon-display);
938
951
  --kobber-components-text-display-extended-text-font-alt1: var(--kobber-semantics-typography-font-family-pp-mori);
939
952
  --kobber-components-text-display-padding-bottom: var(--kobber-semantics-layout-element-space-xsmall);
940
- --kobber-components-label-background-color-neutral: var(--kobber-groups-labels-concrete-150);
941
- --kobber-components-label-background-color-brand-tone-a: var(--kobber-groups-labels-aubergine-150);
942
- --kobber-components-label-background-color-brand-tone-b: var(--kobber-groups-labels-aubergine-850);
953
+ --kobber-components-counter-background-color-neutral: var(--kobber-groups-counter-concrete-150);
954
+ --kobber-components-counter-background-color-brand-tone-a: var(--kobber-groups-counter-aubergine-150);
955
+ --kobber-components-counter-background-color-brand-tone-b: var(--kobber-groups-counter-aubergine-850);
943
956
  --kobber-universal-focus-border-radius-xsmall: var(--kobber-semantics-layout-element-radius-xsmall);
944
957
  --kobber-universal-focus-border-radius-medium: var(--kobber-semantics-layout-element-radius-medium);
945
958
  --kobber-universal-focus-border-radius-large: var(--kobber-semantics-layout-element-radius-large);
@@ -1371,6 +1384,8 @@
1371
1384
  --kobber-components-menu-item-border-radius: var(--kobber-groups-menus-radius-small);
1372
1385
  --kobber-components-menu-item-padding-block: var(--kobber-groups-menus-space-small);
1373
1386
  --kobber-components-menu-item-padding-inline: var(--kobber-groups-menus-space-medium);
1387
+ --kobber-components-menu-item-padding-left-nested: var(--kobber-groups-menus-space-large);
1388
+ --kobber-components-menu-item-padding-right-nested: var(--kobber-groups-menus-space-medium);
1374
1389
  --kobber-components-menu-item-text-container-border-bottom-padding: var(--kobber-groups-menus-space-tiny);
1375
1390
  --kobber-components-menu-item-text-container-border-weight-active: var(--kobber-groups-menus-stroke);
1376
1391
  --kobber-components-menu-item-text-container-border-color-active: var(--kobber-groups-menus-color-aubergine-750);
@@ -1410,19 +1425,13 @@
1410
1425
  --kobber-components-navigation-bar-padding-block-desktop: var(--kobber-groups-navigation-bars-space-xlarge);
1411
1426
  --kobber-components-navigation-bar-padding-block-mobile: var(--kobber-groups-navigation-bars-space-medium);
1412
1427
  --kobber-components-navigation-bar-inner-container-gap: var(--kobber-groups-navigation-bars-space-small);
1413
- --kobber-components-menu-panel-padding: var(--kobber-groups-menus-space-medium);
1414
- --kobber-components-menu-panel-border-radius: var(--kobber-groups-menus-radius-large);
1415
- --kobber-components-menu-panel-gap: var(--kobber-groups-menus-space-medium);
1416
- --kobber-components-menu-panel-background-color: var(--kobber-groups-menus-color-aubergine-25);
1417
- --kobber-components-menu-panel-shadow-color: var(--kobber-groups-menus-color-neutral-525);
1418
- --kobber-components-menu-panel-shadow-blur: var(--kobber-groups-menus-shadow-blur);
1419
1428
  --kobber-components-dropdown-padding-inline: var(--kobber-groups-menus-space-medium);
1420
1429
  --kobber-components-dropdown-gap: var(--kobber-groups-menus-space-small);
1421
1430
  --kobber-components-dropdown-background-color-filled-fallback: var(--kobber-groups-menus-color-aubergine-50);
1422
1431
  --kobber-components-dropdown-background-color-filled-hover: var(--kobber-groups-menus-color-wine-50);
1423
1432
  --kobber-components-dropdown-icon-color: var(--kobber-groups-menus-color-aubergine-750);
1424
1433
  --kobber-components-dropdown-icon-size: var(--kobber-groups-menus-visual-icon-size-large);
1425
- --kobber-components-dropdown-size-height: var(--kobber-groups-menus-visual-image-size);
1434
+ --kobber-components-dropdown-size-height: var(--kobber-groups-menus-space-large);
1426
1435
  --kobber-components-dropdown-border-radius: var(--kobber-groups-menus-radius-medium);
1427
1436
  --kobber-components-text-module-padding-inline: var(--kobber-groups-text-blocks-space-medium);
1428
1437
  --kobber-components-text-module-padding-top: var(--kobber-groups-text-blocks-space-large);
@@ -1529,11 +1538,14 @@
1529
1538
  --kobber-components-feature-item-prominent-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
1530
1539
  --kobber-components-feature-item-prominent-media-box-container-padding-inline: var(--kobber-groups-cards-and-modules-space-large);
1531
1540
  --kobber-components-feature-item-prominent-size-height: var(--kobber-groups-cards-and-modules-size-container-large);
1532
- --kobber-components-accordion-container-padding: var(--kobber-groups-menus-space-medium);
1533
- --kobber-components-accordion-container-gap: var(--kobber-groups-menus-space-xsmall);
1534
- --kobber-components-accordion-container-background-color-isopen-true: var(--kobber-groups-menus-color-aubergine-50);
1535
- --kobber-components-accordion-container-background-color-hover: var(--kobber-groups-menus-color-aubergine-50);
1541
+ --kobber-components-accordion-container-padding-inline: var(--kobber-groups-menus-space-xsmall);
1542
+ --kobber-components-accordion-container-padding-block: var(--kobber-groups-menus-space-small);
1543
+ --kobber-components-accordion-container-background-color-hover: var(--kobber-groups-menus-color-wine-50);
1536
1544
  --kobber-components-accordion-container-border-radius: var(--kobber-groups-menus-radius-small);
1545
+ --kobber-components-accordion-container-gap: var(--kobber-groups-menus-space-medium);
1546
+ --kobber-components-accordion-container-icon-color: var(--kobber-groups-menus-color-aubergine-750);
1547
+ --kobber-components-accordion-container-icon-size: var(--kobber-groups-menus-visual-icon-size-xlarge);
1548
+ --kobber-components-accordion-gap: var(--kobber-groups-menus-space-tiny);
1537
1549
  --kobber-components-list-list-block-gap: var(--kobber-groups-text-blocks-space-xxsmall);
1538
1550
  --kobber-components-list-nested-list-container-gap: var(--kobber-groups-text-blocks-space-xxsmall);
1539
1551
  --kobber-components-list-gap-ordered-medium: var(--kobber-groups-text-blocks-space-xsmall);
@@ -1708,7 +1720,6 @@
1708
1720
  --kobber-components-content-island-background-color-neutral: var(--kobber-groups-content-controls-color-neutral-25);
1709
1721
  --kobber-components-content-island-inner-left-container-gap: var(--kobber-groups-content-controls-space-xxsmall);
1710
1722
  --kobber-components-content-island-border-radius: var(--kobber-groups-content-controls-border-radius-xsmall);
1711
- --kobber-components-content-island-inner-container-text-container-padding-block: var(--kobber-groups-content-controls-space-medium);
1712
1723
  --kobber-components-content-island-effect-shadow-spread: var(--kobber-groups-content-controls-effects-shadow-spread);
1713
1724
  --kobber-components-content-island-effect-shadow-color-brand-tone-a: var(--kobber-groups-content-controls-effects-shadow-color-aubergine-1000-10);
1714
1725
  --kobber-components-content-island-effect-shadow-color-brand-tone-b: var(--kobber-groups-content-controls-effects-shadow-color-aubergine-25-10);
@@ -1720,11 +1731,11 @@
1720
1731
  --kobber-components-media-border-radius: var(--kobber-groups-cards-and-modules-radius-small);
1721
1732
  --kobber-components-media-gap: var(--kobber-groups-cards-and-modules-space-large);
1722
1733
  --kobber-components-button-group-gap: var(--kobber-groups-buttons-space-small);
1723
- --kobber-components-label-background-color-success: var(--kobber-groups-labels-success-700);
1724
- --kobber-components-label-background-color-warning: var(--kobber-groups-labels-warning-700);
1725
- --kobber-components-label-padding-inline: var(--kobber-groups-labels-space-xxsmall);
1726
- --kobber-components-label-padding-size-height: var(--kobber-groups-labels-size-medium);
1727
- --kobber-components-label-border-radius: var(--kobber-groups-labels-border-radius);
1734
+ --kobber-components-counter-background-color-success: var(--kobber-groups-counter-success-700);
1735
+ --kobber-components-counter-background-color-warning: var(--kobber-groups-counter-warning-700);
1736
+ --kobber-components-counter-padding-inline: var(--kobber-groups-counter-space-xxsmall);
1737
+ --kobber-components-counter-padding-size-height: var(--kobber-groups-counter-size-medium);
1738
+ --kobber-components-counter-border-radius: var(--kobber-groups-counter-border-radius);
1728
1739
  --kobber-components-content-controls-background-color-brand-hover: var(--kobber-groups-content-controls-color-aubergine-50);
1729
1740
  --kobber-components-content-controls-background-color-brand-selected: var(--kobber-groups-content-controls-color-aubergine-50);
1730
1741
  --kobber-components-content-controls-border-radius-xsmall: var(--kobber-groups-content-controls-border-radius-xsmall);
@@ -1763,19 +1774,21 @@
1763
1774
  --kobber-components-multiple-choice-media-container-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
1764
1775
  --kobber-components-multiple-choice-media-container-padding: var(--kobber-groups-cards-and-modules-space-medium);
1765
1776
  --kobber-components-multiple-choice-bottom-container-gap: var(--kobber-groups-cards-and-modules-space-small);
1777
+ --kobber-components-multiple-choice-bottom-container-validation-gap: var(--kobber-groups-cards-and-modules-space-small);
1766
1778
  --kobber-components-content-wrapper-background-color-brand-tone-a: var(--kobber-groups-content-blocks-color-aubergine-850);
1767
1779
  --kobber-components-content-wrapper-background-color-brand-tone-b: var(--kobber-groups-content-blocks-color-aubergine-25);
1768
- --kobber-components-content-wrapper-background-color-neutral: var(--kobber-groups-content-blocks-color-concrete-25);
1780
+ --kobber-components-content-wrapper-background-color-neutral-tone-b: var(--kobber-groups-content-blocks-color-concrete-25);
1781
+ --kobber-components-content-wrapper-background-color-neutral-tone-a: var(--kobber-groups-content-blocks-color-concrete-850);
1769
1782
  --kobber-components-content-wrapper-padding-block-overlay: var(--kobber-groups-content-blocks-space-medium);
1770
1783
  --kobber-components-content-wrapper-padding-block-page: var(--kobber-groups-content-blocks-space-xlarge);
1771
1784
  --kobber-components-content-wrapper-padding-inline-page: var(--kobber-groups-content-blocks-space-large);
1772
1785
  --kobber-components-content-wrapper-padding-inline-overlay: var(--kobber-groups-content-blocks-space-large);
1773
- --kobber-components-content-wrapper-size-max-width: var(--kobber-groups-content-blocks-size);
1786
+ --kobber-components-content-wrapper-size-max-width: var(--kobber-groups-content-blocks-size-large);
1787
+ --kobber-components-content-wrapper-size-min-width: var(--kobber-groups-content-blocks-size-small);
1774
1788
  --kobber-components-content-wrapper-border-radius-overlay: var(--kobber-groups-content-blocks-radius);
1775
1789
  --kobber-components-content-wrapper-inner-container-gap: var(--kobber-groups-content-blocks-space-small);
1776
1790
  --kobber-components-content-top-block-gap: var(--kobber-groups-content-blocks-space-xsmall);
1777
- --kobber-components-popover-gap-medium: var(--kobber-groups-popovers-space-medium);
1778
- --kobber-components-popover-gap-small: var(--kobber-groups-popovers-space-xxsmall);
1791
+ --kobber-components-popover-gap: var(--kobber-groups-popovers-space-medium);
1779
1792
  --kobber-components-popover-padding-medium: var(--kobber-groups-popovers-space-medium);
1780
1793
  --kobber-components-popover-padding-small: var(--kobber-groups-popovers-space-xxsmall);
1781
1794
  --kobber-components-popover-border-radius: var(--kobber-groups-popovers-border-radius-xsmall);
@@ -1783,7 +1796,12 @@
1783
1796
  --kobber-components-popover-effect-shadow-color-neutral: var(--kobber-groups-popovers-effects-shadow-color-neutral-1000-10);
1784
1797
  --kobber-components-popover-background-color-neutral: var(--kobber-groups-popovers-color-neutral-25);
1785
1798
  --kobber-components-popover-background-color-brand: var(--kobber-groups-popovers-color-aubergine-25);
1786
- --kobber-components-popover-size-max-width: var(--kobber-groups-popovers-size-large);
1799
+ --kobber-components-popover-size-large: var(--kobber-groups-popovers-size-large);
1800
+ --kobber-components-popover-size-medium: var(--kobber-groups-popovers-size-medium);
1801
+ --kobber-components-popover-size-small: var(--kobber-groups-popovers-size-small);
1802
+ --kobber-components-popover-inner-container-gap-small: var(--kobber-groups-popovers-space-xxsmall);
1803
+ --kobber-components-popover-inner-container-gap-large: var(--kobber-groups-popovers-space-large);
1804
+ --kobber-components-popover-inner-container-content-block-gap: var(--kobber-groups-popovers-space-medium);
1787
1805
  --kobber-components-slider-border-radius: var(--kobber-groups-sliders-border-radius-xsmall);
1788
1806
  --kobber-components-slider-background-color: var(--kobber-groups-sliders-color-purple-25);
1789
1807
  --kobber-components-slider-size-height: var(--kobber-groups-sliders-size-xxsmall);
@@ -1797,6 +1815,7 @@
1797
1815
  --kobber-components-media-player-item-effect-shadow-color-neutral: var(--kobber-groups-media-players-effects-shadow-color-neutral-1000-10);
1798
1816
  --kobber-components-media-player-item-border-radius: var(--kobber-groups-media-players-border-radius-xsmall);
1799
1817
  --kobber-components-media-player-item-padding: var(--kobber-groups-media-players-space-xxsmall);
1818
+ --kobber-components-media-player-item-inner-container-gap: var(--kobber-groups-media-players-space-small);
1800
1819
  --kobber-components-media-player-border-radius: var(--kobber-groups-media-players-border-radius-xsmall);
1801
1820
  --kobber-components-media-player-border-color: var(--kobber-groups-media-players-color-aubergine-50);
1802
1821
  --kobber-components-media-player-padding: var(--kobber-groups-media-players-space-medium);
package/dist/tokens.d.ts CHANGED
@@ -616,7 +616,8 @@ export const groups: {
616
616
  "wine-50": "#f3eced",
617
617
  "aubergine-750": "#691837",
618
618
  "wine-150": "#e5cfd3",
619
- "neutral-525": "#0f11141a"
619
+ "neutral-525": "#0f11141a",
620
+ "aubergine-150": "#f5c9d3"
620
621
  },
621
622
  "visual": {
622
623
  "image": {
@@ -625,7 +626,8 @@ export const groups: {
625
626
  "icon": {
626
627
  "size": {
627
628
  "large": 16,
628
- "medium": 12
629
+ "medium": 12,
630
+ "xlarge": 24
629
631
  }
630
632
  }
631
633
  },
@@ -893,7 +895,7 @@ export const groups: {
893
895
  }
894
896
  }
895
897
  },
896
- "labels": {
898
+ "counter": {
897
899
  "concrete-150": "#cfd5dd",
898
900
  "aubergine-150": "#f5c9d3",
899
901
  "aubergine-850": "#481125",
@@ -913,7 +915,8 @@ export const groups: {
913
915
  "color": {
914
916
  "aubergine-850": "#481125",
915
917
  "aubergine-25": "#fdf9f9",
916
- "concrete-25": "#f9fafb"
918
+ "concrete-25": "#f9fafb",
919
+ "concrete-850": "#202429"
917
920
  },
918
921
  "space": {
919
922
  "medium": 48,
@@ -922,7 +925,11 @@ export const groups: {
922
925
  "small": 40,
923
926
  "xsmall": 16
924
927
  },
925
- "size": 568,
928
+ "size": {
929
+ "medium": 568,
930
+ "large": 720,
931
+ "small": 320
932
+ },
926
933
  "radius": 40
927
934
  },
928
935
  "mediaPlayers": {
@@ -952,7 +959,8 @@ export const groups: {
952
959
  "popovers": {
953
960
  "space": {
954
961
  "medium": 16,
955
- "xxsmall": 4
962
+ "xxsmall": 4,
963
+ "large": 24
956
964
  },
957
965
  "border": {
958
966
  "radius": {
@@ -974,7 +982,9 @@ export const groups: {
974
982
  "aubergine-25": "#fdf9f9"
975
983
  },
976
984
  "size": {
977
- "large": 448
985
+ "large": 448,
986
+ "medium": 320,
987
+ "small": 180
978
988
  }
979
989
  },
980
990
  "sliders": {
@@ -2105,7 +2115,13 @@ export const components: {
2105
2115
  },
2106
2116
  "padding": {
2107
2117
  "block": 12,
2108
- "inline": 16
2118
+ "inline": 16,
2119
+ "left": {
2120
+ "nested": 40
2121
+ },
2122
+ "right": {
2123
+ "nested": 16
2124
+ }
2109
2125
  },
2110
2126
  "textContainer": {
2111
2127
  "borderBottom": {
@@ -2234,20 +2250,6 @@ export const components: {
2234
2250
  "gap": 12
2235
2251
  }
2236
2252
  },
2237
- "menuPanel": {
2238
- "padding": 16,
2239
- "border": {
2240
- "radius": 24
2241
- },
2242
- "gap": 16,
2243
- "background": {
2244
- "color": "#fdf9f9"
2245
- },
2246
- "shadow": {
2247
- "color": "#0f11141a",
2248
- "blur": 2
2249
- }
2250
- },
2251
2253
  "dropdown": {
2252
2254
  "padding": {
2253
2255
  "inline": 16
@@ -2557,20 +2559,27 @@ export const components: {
2557
2559
  "height": 448
2558
2560
  }
2559
2561
  },
2560
- "_accordion": {
2562
+ "accordion": {
2561
2563
  "container": {
2562
- "padding": 16,
2563
- "gap": 8,
2564
+ "padding": {
2565
+ "inline": 8,
2566
+ "block": 12
2567
+ },
2564
2568
  "background": {
2565
2569
  "color": {
2566
- "isopen(true)": "#f9eaed",
2567
- "hover": "#f9eaed"
2570
+ "hover": "#f3eced"
2568
2571
  }
2569
2572
  },
2570
2573
  "border": {
2571
2574
  "radius": 4
2575
+ },
2576
+ "gap": 16,
2577
+ "icon": {
2578
+ "color": "#691837",
2579
+ "size": 24
2572
2580
  }
2573
- }
2581
+ },
2582
+ "gap": 2
2574
2583
  },
2575
2584
  "_listElements": {
2576
2585
  "padding": {
@@ -3169,13 +3178,6 @@ export const components: {
3169
3178
  "border": {
3170
3179
  "radius": 8
3171
3180
  },
3172
- "innerContainer": {
3173
- "textContainer": {
3174
- "padding": {
3175
- "block": 16
3176
- }
3177
- }
3178
- },
3179
3181
  "effect": {
3180
3182
  "shadow": {
3181
3183
  "spread": 4,
@@ -3208,7 +3210,7 @@ export const components: {
3208
3210
  "buttonGroup": {
3209
3211
  "gap": 8
3210
3212
  },
3211
- "label": {
3213
+ "counter": {
3212
3214
  "background": {
3213
3215
  "color": {
3214
3216
  "neutral": "#cfd5dd",
@@ -3331,7 +3333,10 @@ export const components: {
3331
3333
  "padding": 12
3332
3334
  },
3333
3335
  "bottomContainer": {
3334
- "gap": 8
3336
+ "gap": 8,
3337
+ "validation": {
3338
+ "gap": 8
3339
+ }
3335
3340
  }
3336
3341
  },
3337
3342
  "contentWrapper": {
@@ -3341,7 +3346,10 @@ export const components: {
3341
3346
  "toneA": "#481125",
3342
3347
  "toneB": "#fdf9f9"
3343
3348
  },
3344
- "neutral": "#f9fafb"
3349
+ "neutral": {
3350
+ "toneB": "#f9fafb",
3351
+ "toneA": "#202429"
3352
+ }
3345
3353
  }
3346
3354
  },
3347
3355
  "padding": {
@@ -3355,7 +3363,8 @@ export const components: {
3355
3363
  }
3356
3364
  },
3357
3365
  "size": {
3358
- "maxWidth": 568
3366
+ "maxWidth": 720,
3367
+ "minWidth": 320
3359
3368
  },
3360
3369
  "border": {
3361
3370
  "radius": {
@@ -3370,10 +3379,7 @@ export const components: {
3370
3379
  "gap": 16
3371
3380
  },
3372
3381
  "popover": {
3373
- "gap": {
3374
- "medium": 16,
3375
- "small": 4
3376
- },
3382
+ "gap": 16,
3377
3383
  "padding": {
3378
3384
  "medium": 16,
3379
3385
  "small": 4
@@ -3398,7 +3404,18 @@ export const components: {
3398
3404
  }
3399
3405
  },
3400
3406
  "size": {
3401
- "maxWidth": 448
3407
+ "large": 448,
3408
+ "medium": 320,
3409
+ "small": 180
3410
+ },
3411
+ "innerContainer": {
3412
+ "gap": {
3413
+ "small": 4,
3414
+ "large": 24
3415
+ },
3416
+ "contentBlock": {
3417
+ "gap": 16
3418
+ }
3402
3419
  }
3403
3420
  },
3404
3421
  "_slider": {
@@ -3446,7 +3463,10 @@ export const components: {
3446
3463
  "border": {
3447
3464
  "radius": 8
3448
3465
  },
3449
- "padding": 4
3466
+ "padding": 4,
3467
+ "innerContainer": {
3468
+ "gap": 12
3469
+ }
3450
3470
  },
3451
3471
  "mediaPlayer": {
3452
3472
  "border": {
@@ -3773,7 +3793,8 @@ export const semantics: {
3773
3793
  "huge": 448,
3774
3794
  "tiny": 4,
3775
3795
  "xxxlarge": 56,
3776
- "big": 180
3796
+ "big": 180,
3797
+ "xbig": 320
3777
3798
  },
3778
3799
  "space": {
3779
3800
  "large": 24,
@@ -3807,10 +3828,12 @@ export const semantics: {
3807
3828
  "medium": 320,
3808
3829
  "small": 262,
3809
3830
  "xlarge": 568,
3810
- "xxxsmall": 120,
3831
+ "tiny": 120,
3811
3832
  "xsmall": 232,
3812
3833
  "xxsmall": 224,
3813
- "large": 448
3834
+ "large": 448,
3835
+ "xxlarge": 720,
3836
+ "xxxsmall": 180
3814
3837
  },
3815
3838
  "space": {
3816
3839
  "xlarge": 48,
@@ -3856,7 +3879,8 @@ export const semantics: {
3856
3879
  "size": {
3857
3880
  "large": 16,
3858
3881
  "medium": 12,
3859
- "small": 10
3882
+ "small": 10,
3883
+ "xlarge": 24
3860
3884
  }
3861
3885
  },
3862
3886
  "profile": {
@@ -3955,5 +3979,12 @@ export const layouts: {
3955
3979
  }
3956
3980
  }
3957
3981
  },
3958
- "page": {}
3982
+ "page": {},
3983
+ "resourceBank": {
3984
+ "color": {
3985
+ "background": {
3986
+ "concrete-25": "#f9fafb"
3987
+ }
3988
+ }
3989
+ }
3959
3990
  };
package/dist/tokens.js CHANGED
@@ -615,7 +615,8 @@ export const groups = {
615
615
  "wine-50": "#f3eced",
616
616
  "aubergine-750": "#691837",
617
617
  "wine-150": "#e5cfd3",
618
- "neutral-525": "#0f11141a"
618
+ "neutral-525": "#0f11141a",
619
+ "aubergine-150": "#f5c9d3"
619
620
  },
620
621
  "visual": {
621
622
  "image": {
@@ -624,7 +625,8 @@ export const groups = {
624
625
  "icon": {
625
626
  "size": {
626
627
  "large": 16,
627
- "medium": 12
628
+ "medium": 12,
629
+ "xlarge": 24
628
630
  }
629
631
  }
630
632
  },
@@ -892,7 +894,7 @@ export const groups = {
892
894
  }
893
895
  }
894
896
  },
895
- "labels": {
897
+ "counter": {
896
898
  "concrete-150": "#cfd5dd",
897
899
  "aubergine-150": "#f5c9d3",
898
900
  "aubergine-850": "#481125",
@@ -912,7 +914,8 @@ export const groups = {
912
914
  "color": {
913
915
  "aubergine-850": "#481125",
914
916
  "aubergine-25": "#fdf9f9",
915
- "concrete-25": "#f9fafb"
917
+ "concrete-25": "#f9fafb",
918
+ "concrete-850": "#202429"
916
919
  },
917
920
  "space": {
918
921
  "medium": 48,
@@ -921,7 +924,11 @@ export const groups = {
921
924
  "small": 40,
922
925
  "xsmall": 16
923
926
  },
924
- "size": 568,
927
+ "size": {
928
+ "medium": 568,
929
+ "large": 720,
930
+ "small": 320
931
+ },
925
932
  "radius": 40
926
933
  },
927
934
  "mediaPlayers": {
@@ -951,7 +958,8 @@ export const groups = {
951
958
  "popovers": {
952
959
  "space": {
953
960
  "medium": 16,
954
- "xxsmall": 4
961
+ "xxsmall": 4,
962
+ "large": 24
955
963
  },
956
964
  "border": {
957
965
  "radius": {
@@ -973,7 +981,9 @@ export const groups = {
973
981
  "aubergine-25": "#fdf9f9"
974
982
  },
975
983
  "size": {
976
- "large": 448
984
+ "large": 448,
985
+ "medium": 320,
986
+ "small": 180
977
987
  }
978
988
  },
979
989
  "sliders": {
@@ -2104,7 +2114,13 @@ export const components = {
2104
2114
  },
2105
2115
  "padding": {
2106
2116
  "block": 12,
2107
- "inline": 16
2117
+ "inline": 16,
2118
+ "left": {
2119
+ "nested": 40
2120
+ },
2121
+ "right": {
2122
+ "nested": 16
2123
+ }
2108
2124
  },
2109
2125
  "textContainer": {
2110
2126
  "borderBottom": {
@@ -2233,20 +2249,6 @@ export const components = {
2233
2249
  "gap": 12
2234
2250
  }
2235
2251
  },
2236
- "menuPanel": {
2237
- "padding": 16,
2238
- "border": {
2239
- "radius": 24
2240
- },
2241
- "gap": 16,
2242
- "background": {
2243
- "color": "#fdf9f9"
2244
- },
2245
- "shadow": {
2246
- "color": "#0f11141a",
2247
- "blur": 2
2248
- }
2249
- },
2250
2252
  "dropdown": {
2251
2253
  "padding": {
2252
2254
  "inline": 16
@@ -2556,20 +2558,27 @@ export const components = {
2556
2558
  "height": 448
2557
2559
  }
2558
2560
  },
2559
- "_accordion": {
2561
+ "accordion": {
2560
2562
  "container": {
2561
- "padding": 16,
2562
- "gap": 8,
2563
+ "padding": {
2564
+ "inline": 8,
2565
+ "block": 12
2566
+ },
2563
2567
  "background": {
2564
2568
  "color": {
2565
- "isopen(true)": "#f9eaed",
2566
- "hover": "#f9eaed"
2569
+ "hover": "#f3eced"
2567
2570
  }
2568
2571
  },
2569
2572
  "border": {
2570
2573
  "radius": 4
2574
+ },
2575
+ "gap": 16,
2576
+ "icon": {
2577
+ "color": "#691837",
2578
+ "size": 24
2571
2579
  }
2572
- }
2580
+ },
2581
+ "gap": 2
2573
2582
  },
2574
2583
  "_listElements": {
2575
2584
  "padding": {
@@ -3168,13 +3177,6 @@ export const components = {
3168
3177
  "border": {
3169
3178
  "radius": 8
3170
3179
  },
3171
- "innerContainer": {
3172
- "textContainer": {
3173
- "padding": {
3174
- "block": 16
3175
- }
3176
- }
3177
- },
3178
3180
  "effect": {
3179
3181
  "shadow": {
3180
3182
  "spread": 4,
@@ -3207,7 +3209,7 @@ export const components = {
3207
3209
  "buttonGroup": {
3208
3210
  "gap": 8
3209
3211
  },
3210
- "label": {
3212
+ "counter": {
3211
3213
  "background": {
3212
3214
  "color": {
3213
3215
  "neutral": "#cfd5dd",
@@ -3330,7 +3332,10 @@ export const components = {
3330
3332
  "padding": 12
3331
3333
  },
3332
3334
  "bottomContainer": {
3333
- "gap": 8
3335
+ "gap": 8,
3336
+ "validation": {
3337
+ "gap": 8
3338
+ }
3334
3339
  }
3335
3340
  },
3336
3341
  "contentWrapper": {
@@ -3340,7 +3345,10 @@ export const components = {
3340
3345
  "toneA": "#481125",
3341
3346
  "toneB": "#fdf9f9"
3342
3347
  },
3343
- "neutral": "#f9fafb"
3348
+ "neutral": {
3349
+ "toneB": "#f9fafb",
3350
+ "toneA": "#202429"
3351
+ }
3344
3352
  }
3345
3353
  },
3346
3354
  "padding": {
@@ -3354,7 +3362,8 @@ export const components = {
3354
3362
  }
3355
3363
  },
3356
3364
  "size": {
3357
- "maxWidth": 568
3365
+ "maxWidth": 720,
3366
+ "minWidth": 320
3358
3367
  },
3359
3368
  "border": {
3360
3369
  "radius": {
@@ -3369,10 +3378,7 @@ export const components = {
3369
3378
  "gap": 16
3370
3379
  },
3371
3380
  "popover": {
3372
- "gap": {
3373
- "medium": 16,
3374
- "small": 4
3375
- },
3381
+ "gap": 16,
3376
3382
  "padding": {
3377
3383
  "medium": 16,
3378
3384
  "small": 4
@@ -3397,7 +3403,18 @@ export const components = {
3397
3403
  }
3398
3404
  },
3399
3405
  "size": {
3400
- "maxWidth": 448
3406
+ "large": 448,
3407
+ "medium": 320,
3408
+ "small": 180
3409
+ },
3410
+ "innerContainer": {
3411
+ "gap": {
3412
+ "small": 4,
3413
+ "large": 24
3414
+ },
3415
+ "contentBlock": {
3416
+ "gap": 16
3417
+ }
3401
3418
  }
3402
3419
  },
3403
3420
  "_slider": {
@@ -3445,7 +3462,10 @@ export const components = {
3445
3462
  "border": {
3446
3463
  "radius": 8
3447
3464
  },
3448
- "padding": 4
3465
+ "padding": 4,
3466
+ "innerContainer": {
3467
+ "gap": 12
3468
+ }
3449
3469
  },
3450
3470
  "mediaPlayer": {
3451
3471
  "border": {
@@ -3772,7 +3792,8 @@ export const semantics = {
3772
3792
  "huge": 448,
3773
3793
  "tiny": 4,
3774
3794
  "xxxlarge": 56,
3775
- "big": 180
3795
+ "big": 180,
3796
+ "xbig": 320
3776
3797
  },
3777
3798
  "space": {
3778
3799
  "large": 24,
@@ -3806,10 +3827,12 @@ export const semantics = {
3806
3827
  "medium": 320,
3807
3828
  "small": 262,
3808
3829
  "xlarge": 568,
3809
- "xxxsmall": 120,
3830
+ "tiny": 120,
3810
3831
  "xsmall": 232,
3811
3832
  "xxsmall": 224,
3812
- "large": 448
3833
+ "large": 448,
3834
+ "xxlarge": 720,
3835
+ "xxxsmall": 180
3813
3836
  },
3814
3837
  "space": {
3815
3838
  "xlarge": 48,
@@ -3855,7 +3878,8 @@ export const semantics = {
3855
3878
  "size": {
3856
3879
  "large": 16,
3857
3880
  "medium": 12,
3858
- "small": 10
3881
+ "small": 10,
3882
+ "xlarge": 24
3859
3883
  }
3860
3884
  },
3861
3885
  "profile": {
@@ -3954,5 +3978,12 @@ export const layouts = {
3954
3978
  }
3955
3979
  }
3956
3980
  },
3957
- "page": {}
3981
+ "page": {},
3982
+ "resourceBank": {
3983
+ "color": {
3984
+ "background": {
3985
+ "concrete-25": "#f9fafb"
3986
+ }
3987
+ }
3988
+ }
3958
3989
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gyldendal/kobber-tokens",
3
- "version": "8.0.0",
3
+ "version": "9.0.0",
4
4
  "description": "Gyldendal Kobber design tokens",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,