@gyldendal/kobber-tokens 12.0.0 → 13.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 +64 -0
  2. package/dist/k-tokens.css +48 -28
  3. package/dist/tokens.css +48 -28
  4. package/dist/tokens.d.ts +66 -42
  5. package/dist/tokens.js +66 -42
  6. package/package.json +1 -1
package/dist/CHANGELOG.txt CHANGED
@@ -1,3 +1,67 @@
1
+ === 02.06.2026, 13:55:12 [cf0874ff] - MAJOR - npm: v13.0.0 ===
2
+
3
+ ADDED
4
+ components-content-wrapper-background-color-fantasy-tone-a
5
+ components-content-wrapper-background-color-fantasy-tone-b
6
+ components-content-wrapper-background-color-nature-tone-a
7
+ components-content-wrapper-background-color-nature-tone-b
8
+ components-content-wrapper-background-color-thriller-tone-a
9
+ components-content-wrapper-background-color-thriller-tone-b
10
+ components-content-wrapper-inner-container-content-top-block-gap
11
+ components-content-wrapper-inner-container-text-block-gap
12
+ components-divider-background-color-rettsdata-tone-a
13
+ components-switch-thumb-size
14
+ components-text-title-text-line-height-large
15
+ components-text-title-text-line-height-medium
16
+ components-text-title-text-line-height-small
17
+ components-text-title-text-size-small
18
+ components-text-title-text-weight-italic
19
+ components-text-title-text-weight-regular
20
+ groups-content-blocks-color-fantasy-250
21
+ groups-content-blocks-color-fantasy-850
22
+ groups-content-blocks-color-nature-25
23
+ groups-content-blocks-color-nature-750
24
+ groups-content-blocks-color-thriller-250
25
+ groups-content-blocks-color-thriller-850
26
+ groups-content-blocks-space-xxsmall
27
+ groups-switches-size-medium
28
+ primitives-font-line-height-72
29
+ primitives-font-line-height-84
30
+ semantics-typography-line-height-72
31
+ semantics-typography-line-height-84
32
+
33
+ REMOVED
34
+ components-text-title-text-line-height-brand-large
35
+ components-text-title-text-line-height-brand-medium
36
+ components-text-title-text-line-height-reading-large
37
+ components-text-title-text-line-height-reading-medium
38
+ components-text-title-text-weight-reading-italic
39
+ components-text-title-text-weight-reading-regular
40
+ primitives-font-line-height-70
41
+ semantics-typography-line-height-70
42
+
43
+ CHANGED
44
+ components-alert-label-gap
45
+ components-contextual-navigation-bar-padding-block
46
+ components-contextual-navigation-bar-padding-inline
47
+ components-divider-background-color-rettsdata-tone-b
48
+ components-multiple-choice-item-background-color-brand-tone-a
49
+ components-multiple-choice-item-background-color-brand-tone-b
50
+ components-multiple-choice-item-background-color-neutral-tone-a
51
+ components-multiple-choice-item-background-color-neutral-tone-b
52
+ components-multiple-choice-item-shadow-color-brand-tone-a
53
+ components-multiple-choice-item-shadow-color-brand-tone-b
54
+ components-multiple-choice-item-shadow-color-neutral-tone-a
55
+ components-multiple-choice-item-shadow-color-neutral-tone-b
56
+ components-text-display-text-line-height-large
57
+ components-text-display-text-line-height-medium
58
+ components-text-heading-text-color-neutral-tone-a
59
+ components-text-heading-text-line-height-reading-large
60
+ components-text-heading-text-line-height-reading-medium
61
+ components-text-lead-text-color-neutral-tone-a
62
+ components-text-lead-text-line-height
63
+ components-text-title-text-color-neutral-tone-a
64
+
1
65
  === 20.04.2026, 13:12:17 [ac76d6a6] - MAJOR - npm: v12.0.0 ===
2
66
 
3
67
  ADDED
package/dist/k-tokens.css CHANGED
@@ -193,7 +193,8 @@
193
193
  --k-primitives-font-line-height-40: 2.5rem;
194
194
  --k-primitives-font-line-height-50: 3.125rem;
195
195
  --k-primitives-font-line-height-60: 3.75rem;
196
- --k-primitives-font-line-height-70: 4.375rem;
196
+ --k-primitives-font-line-height-72: 4.5rem;
197
+ --k-primitives-font-line-height-84: 5.25rem;
197
198
  --k-primitives-font-size-12: 0.75rem;
198
199
  --k-primitives-font-size-14: 0.875rem;
199
200
  --k-primitives-font-size-16: 1rem;
@@ -277,7 +278,7 @@
277
278
  --k-groups-counter-aubergine-850: var(--k-primitives-color-aubergine-850);
278
279
  --k-components-text-body-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
279
280
  --k-components-text-lead-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
280
- --k-components-text-title-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
281
+ --k-components-text-title-text-weight-italic: var(--k-semantics-typography-regular-italic);
281
282
  --k-semantics-typography-font-family-inter: var(--k-primitives-font-family-inter);
282
283
  --k-semantics-typography-font-family-lyon-display: var(--k-primitives-font-family-lyon-display);
283
284
  --k-semantics-typography-font-family-pp-mori: var(--k-primitives-font-family-pp-mori);
@@ -307,7 +308,8 @@
307
308
  --k-semantics-typography-line-height-40: var(--k-primitives-font-line-height-40);
308
309
  --k-semantics-typography-line-height-50: var(--k-primitives-font-line-height-50);
309
310
  --k-semantics-typography-line-height-60: var(--k-primitives-font-line-height-60);
310
- --k-semantics-typography-line-height-70: var(--k-primitives-font-line-height-70);
311
+ --k-semantics-typography-line-height-72: var(--k-primitives-font-line-height-72);
312
+ --k-semantics-typography-line-height-84: var(--k-primitives-font-line-height-84);
311
313
  --k-semantics-typography-indent: var(--k-primitives-size-24);
312
314
  --k-semantics-typography-weight-light: var(--k-primitives-font-weight-300);
313
315
  --k-semantics-typography-weight-book: var(--k-primitives-font-weight-300);
@@ -813,11 +815,18 @@
813
815
  --k-groups-content-blocks-color-aubergine-25: var(--k-semantics-color-identity-base-aubergine-25);
814
816
  --k-groups-content-blocks-color-concrete-25: var(--k-semantics-color-identity-neutral-concrete-25);
815
817
  --k-groups-content-blocks-color-concrete-850: var(--k-semantics-color-identity-neutral-concrete-850);
818
+ --k-groups-content-blocks-color-nature-750: var(--k-semantics-color-theme-nature-nature-750);
819
+ --k-groups-content-blocks-color-nature-25: var(--k-semantics-color-theme-nature-nature-25);
820
+ --k-groups-content-blocks-color-fantasy-250: var(--k-semantics-color-theme-fantasy-fantasy-250);
821
+ --k-groups-content-blocks-color-fantasy-850: var(--k-semantics-color-theme-fantasy-fantasy-850);
822
+ --k-groups-content-blocks-color-thriller-850: var(--k-semantics-color-theme-thriller-thriller-850);
823
+ --k-groups-content-blocks-color-thriller-250: var(--k-semantics-color-theme-thriller-thriller-250);
816
824
  --k-groups-content-blocks-space-medium: var(--k-semantics-layout-component-space-xlarge);
817
825
  --k-groups-content-blocks-space-xlarge: var(--k-semantics-layout-component-space-huge);
818
826
  --k-groups-content-blocks-space-large: var(--k-semantics-layout-component-space-big);
819
827
  --k-groups-content-blocks-space-small: var(--k-semantics-layout-component-space-large);
820
828
  --k-groups-content-blocks-space-xsmall: var(--k-semantics-layout-component-space-small);
829
+ --k-groups-content-blocks-space-xxsmall: var(--k-semantics-layout-component-space-tiny);
821
830
  --k-groups-content-blocks-size-medium: var(--k-semantics-layout-component-size-xlarge);
822
831
  --k-groups-content-blocks-size-large: var(--k-semantics-layout-component-size-xxlarge);
823
832
  --k-groups-content-blocks-size-small: var(--k-semantics-layout-component-size-medium);
@@ -864,6 +873,7 @@
864
873
  --k-groups-switches-border-radius: var(--k-semantics-layout-element-radius-medium);
865
874
  --k-groups-switches-size-large: var(--k-semantics-layout-element-size-large);
866
875
  --k-groups-switches-size-xxxlarge: var(--k-semantics-layout-element-size-xxxlarge);
876
+ --k-groups-switches-size-medium: var(--k-semantics-layout-element-size-medium);
867
877
  --k-groups-switches-space: var(--k-semantics-layout-element-space-xxsmall);
868
878
  --k-components-button-background-color-brand-primary-tone-a-hover: var(--k-groups-buttons-color-carmine-transparent-carmine-carmine-1000-10);
869
879
  --k-components-button-background-color-brand-secondary-tone-b-hover: var(--k-groups-buttons-color-aubergine-transparent-aubergine-1000-10);
@@ -933,8 +943,8 @@
933
943
  --k-components-text-body-text-weight-brand: var(--k-semantics-typography-weight-regular);
934
944
  --k-components-text-heading-text-line-height-brand-large: var(--k-semantics-typography-line-height-60);
935
945
  --k-components-text-heading-text-line-height-brand-medium: var(--k-semantics-typography-line-height-50);
936
- --k-components-text-heading-text-line-height-reading-medium: var(--k-semantics-typography-line-height-40);
937
- --k-components-text-heading-text-line-height-reading-large: var(--k-semantics-typography-line-height-50);
946
+ --k-components-text-heading-text-line-height-reading-medium: var(--k-semantics-typography-line-height-50);
947
+ --k-components-text-heading-text-line-height-reading-large: var(--k-semantics-typography-line-height-60);
938
948
  --k-components-text-heading-text-font-reading: var(--k-semantics-typography-font-family-inter);
939
949
  --k-components-text-heading-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
940
950
  --k-components-text-heading-text-size-large: var(--k-semantics-typography-size-40);
@@ -943,25 +953,25 @@
943
953
  --k-components-text-heading-text-weight-reading: var(--k-semantics-typography-weight-light);
944
954
  --k-components-text-lead-text-font-reading: var(--k-semantics-typography-font-family-inter);
945
955
  --k-components-text-lead-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
946
- --k-components-text-lead-text-line-height: var(--k-semantics-typography-line-height-28);
956
+ --k-components-text-lead-text-line-height: var(--k-semantics-typography-line-height-30);
947
957
  --k-components-text-lead-text-size: var(--k-semantics-typography-size-20);
948
958
  --k-components-text-lead-text-weight-reading-regular: var(--k-semantics-typography-weight-regular);
949
959
  --k-components-text-lead-text-weight-brand: var(--k-semantics-typography-weight-regular);
950
- --k-components-text-title-text-line-height-brand-large: var(--k-semantics-typography-line-height-30);
951
- --k-components-text-title-text-line-height-brand-medium: var(--k-semantics-typography-line-height-28);
952
- --k-components-text-title-text-line-height-reading-medium: var(--k-semantics-typography-line-height-26);
953
- --k-components-text-title-text-line-height-reading-large: var(--k-semantics-typography-line-height-28);
954
960
  --k-components-text-title-text-font-reading: var(--k-semantics-typography-font-family-inter);
955
961
  --k-components-text-title-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
962
+ --k-components-text-title-text-line-height-medium: var(--k-semantics-typography-line-height-30);
963
+ --k-components-text-title-text-line-height-large: var(--k-semantics-typography-line-height-40);
964
+ --k-components-text-title-text-line-height-small: var(--k-semantics-typography-line-height-24);
956
965
  --k-components-text-title-text-size-large: var(--k-semantics-typography-size-24);
957
966
  --k-components-text-title-text-size-medium: var(--k-semantics-typography-size-20);
958
- --k-components-text-title-text-weight-reading-regular: var(--k-semantics-typography-weight-regular);
967
+ --k-components-text-title-text-size-small: var(--k-semantics-typography-size-16);
968
+ --k-components-text-title-text-weight-regular: var(--k-semantics-typography-weight-regular);
959
969
  --k-components-text-title-text-weight-brand: var(--k-semantics-typography-weight-regular);
960
970
  --k-components-text-display-size-medium: var(--k-semantics-typography-size-48);
961
971
  --k-components-text-display-size-large: var(--k-semantics-typography-size-56);
962
972
  --k-components-text-display-text-font: var(--k-semantics-typography-font-family-pp-mori);
963
- --k-components-text-display-text-line-height-medium: var(--k-semantics-typography-line-height-60);
964
- --k-components-text-display-text-line-height-large: var(--k-semantics-typography-line-height-70);
973
+ --k-components-text-display-text-line-height-medium: var(--k-semantics-typography-line-height-72);
974
+ --k-components-text-display-text-line-height-large: var(--k-semantics-typography-line-height-84);
965
975
  --k-components-text-display-text-weight: var(--k-semantics-typography-weight-book);
966
976
  --k-components-text-display-extended-text-font-alt2: var(--k-semantics-typography-font-family-lyon-display);
967
977
  --k-components-text-display-extended-text-font-alt1: var(--k-semantics-typography-font-family-pp-mori);
@@ -1135,7 +1145,8 @@
1135
1145
  --k-components-divider-background-color-brand-tone-a: var(--k-groups-utilities-color-wine-600);
1136
1146
  --k-components-divider-background-color-neutral-tone-a: var(--k-groups-utilities-color-concrete-525);
1137
1147
  --k-components-divider-background-color-neutral-tone-b: var(--k-groups-utilities-color-concrete-150);
1138
- --k-components-divider-background-color-rettsdata-tone-b: var(--k-groups-utilities-color-rettsdata-20);
1148
+ --k-components-divider-background-color-rettsdata-tone-b: var(--k-groups-utilities-color-rettsdata-30);
1149
+ --k-components-divider-background-color-rettsdata-tone-a: var(--k-groups-utilities-color-rettsdata-60);
1139
1150
  --k-components-divider-border-radius: var(--k-groups-utilities-radius);
1140
1151
  --k-components-divider-padding-block-horizontal: var(--k-groups-utilities-space);
1141
1152
  --k-components-divider-padding-inline-vertical: var(--k-groups-utilities-space);
@@ -1162,7 +1173,7 @@
1162
1173
  --k-components-alert-label-icon-shape-color-warning: var(--k-groups-alerts-color-warning-darkest);
1163
1174
  --k-components-alert-label-icon-size: var(--k-groups-alerts-visual-icon-size-small);
1164
1175
  --k-components-alert-label-padding: var(--k-groups-alerts-space-small);
1165
- --k-components-alert-label-gap: var(--k-groups-alerts-space-xsmall);
1176
+ --k-components-alert-label-gap: var(--k-groups-alerts-space-small);
1166
1177
  --k-components-alert-label-border-radius: var(--k-groups-alerts-radius-small);
1167
1178
  --k-components-text-link-gap: var(--k-groups-links-space-small);
1168
1179
  --k-components-text-link-border-width: var(--k-groups-links-stroke);
@@ -1600,8 +1611,8 @@
1600
1611
  --k-components-profile-card-image-border-radius: var(--k-groups-cards-and-modules-radius-large);
1601
1612
  --k-components-profile-card-inner-container-gap: var(--k-groups-cards-and-modules-space-large);
1602
1613
  --k-components-dropdown-menu-gap: var(--k-groups-menus-space-xsmall);
1603
- --k-components-contextual-navigation-bar-padding-inline: var(--k-groups-navigation-bars-space-medium);
1604
- --k-components-contextual-navigation-bar-padding-block: var(--k-groups-navigation-bars-space-large);
1614
+ --k-components-contextual-navigation-bar-padding-block: var(--k-groups-navigation-bars-space-medium);
1615
+ --k-components-contextual-navigation-bar-padding-inline: var(--k-groups-navigation-bars-space-large);
1605
1616
  --k-components-contextual-navigation-bar-left-container-gap: var(--k-groups-navigation-bars-space-xxlarge);
1606
1617
  --k-components-contextual-navigation-bar-background-color: var(--k-groups-navigation-bars-color-concrete-25);
1607
1618
  --k-components-contextual-navigation-bar-right-container-gap: var(--k-groups-navigation-bars-space-xsmall);
@@ -1691,7 +1702,7 @@
1691
1702
  --k-components-text-heading-text-color-brand-tone-a: var(--k-semantics-typography-color-brand-aubergine-750);
1692
1703
  --k-components-text-heading-text-color-brand-tone-b: var(--k-semantics-typography-color-brand-aubergine-50);
1693
1704
  --k-components-text-heading-text-color-neutral-tone-b: var(--k-semantics-typography-color-brand-concrete-50);
1694
- --k-components-text-heading-text-color-neutral-tone-a: var(--k-semantics-typography-color-brand-concrete-750);
1705
+ --k-components-text-heading-text-color-neutral-tone-a: var(--k-semantics-typography-color-brand-concrete-900);
1695
1706
  --k-components-text-lead-text-color-brand-tone-a: var(--k-semantics-typography-color-brand-aubergine-750);
1696
1707
  --k-components-text-lead-text-color-brand-tone-b: var(--k-semantics-typography-color-brand-aubergine-50);
1697
1708
  --k-components-text-lead-text-color-nostalgia-tone-b: var(--k-semantics-typography-color-theme-nostalgia-25);
@@ -1707,7 +1718,7 @@
1707
1718
  --k-components-text-lead-text-color-nature-tone-b: var(--k-semantics-typography-color-theme-nature-25);
1708
1719
  --k-components-text-lead-text-color-nature-tone-a: var(--k-semantics-typography-color-theme-nature-750);
1709
1720
  --k-components-text-lead-text-color-neutral-tone-b: var(--k-semantics-typography-color-brand-concrete-50);
1710
- --k-components-text-lead-text-color-neutral-tone-a: var(--k-semantics-typography-color-brand-concrete-750);
1721
+ --k-components-text-lead-text-color-neutral-tone-a: var(--k-semantics-typography-color-brand-concrete-900);
1711
1722
  --k-components-text-title-text-color-warning-tone-a: var(--k-semantics-typography-color-validation-warning-700);
1712
1723
  --k-components-text-title-text-color-warning-tone-b: var(--k-semantics-typography-color-validation-warning-75);
1713
1724
  --k-components-text-title-text-color-informative-tone-b: var(--k-semantics-typography-color-validation-informative-25);
@@ -1728,7 +1739,7 @@
1728
1739
  --k-components-text-title-text-color-brand-tone-b: var(--k-semantics-typography-color-brand-aubergine-50);
1729
1740
  --k-components-text-title-text-color-nature-tone-b: var(--k-semantics-typography-color-theme-nature-25);
1730
1741
  --k-components-text-title-text-color-nature-tone-a: var(--k-semantics-typography-color-theme-nature-750);
1731
- --k-components-text-title-text-color-neutral-tone-a: var(--k-semantics-typography-color-brand-concrete-750);
1742
+ --k-components-text-title-text-color-neutral-tone-a: var(--k-semantics-typography-color-brand-concrete-900);
1732
1743
  --k-components-text-title-text-color-neutral-tone-b: var(--k-semantics-typography-color-brand-concrete-50);
1733
1744
  --k-components-text-display-text-color: var(--k-semantics-typography-color-brand-aubergine-750);
1734
1745
  --k-components-text-display-extended-text-color: var(--k-semantics-typography-color-brand-carmine-525);
@@ -1770,19 +1781,19 @@
1770
1781
  --k-components-content-controls-padding-xxsmall: var(--k-groups-content-controls-space-xxsmall);
1771
1782
  --k-components-multiple-choice-item-padding: var(--k-groups-cards-and-modules-space-medium);
1772
1783
  --k-components-multiple-choice-item-gap: var(--k-groups-cards-and-modules-space-medium);
1773
- --k-components-multiple-choice-item-background-color-neutral-tone-a: var(--k-groups-cards-and-modules-color-neutral-50);
1774
- --k-components-multiple-choice-item-background-color-neutral-tone-b: var(--k-groups-cards-and-modules-color-neutral-750);
1775
- --k-components-multiple-choice-item-background-color-brand-tone-a: var(--k-groups-cards-and-modules-color-aubergine-50);
1776
- --k-components-multiple-choice-item-background-color-brand-tone-b: var(--k-groups-cards-and-modules-color-aubergine-750);
1784
+ --k-components-multiple-choice-item-background-color-neutral-tone-b: var(--k-groups-cards-and-modules-color-neutral-50);
1785
+ --k-components-multiple-choice-item-background-color-neutral-tone-a: var(--k-groups-cards-and-modules-color-neutral-750);
1786
+ --k-components-multiple-choice-item-background-color-brand-tone-b: var(--k-groups-cards-and-modules-color-aubergine-50);
1787
+ --k-components-multiple-choice-item-background-color-brand-tone-a: var(--k-groups-cards-and-modules-color-aubergine-750);
1777
1788
  --k-components-multiple-choice-item-background-color-success: var(--k-groups-cards-and-modules-color-success-75);
1778
1789
  --k-components-multiple-choice-item-background-color-warning: var(--k-groups-cards-and-modules-color-warning-75);
1779
1790
  --k-components-multiple-choice-item-border-radius: var(--k-groups-cards-and-modules-radius-small);
1780
1791
  --k-components-multiple-choice-item-shadow-spread-medium: var(--k-groups-cards-and-modules-shadow-spread-medium);
1781
1792
  --k-components-multiple-choice-item-shadow-spread-small: var(--k-groups-cards-and-modules-shadow-spread-small);
1782
- --k-components-multiple-choice-item-shadow-color-neutral-tone-a: var(--k-groups-cards-and-modules-shadow-color-concrete-325);
1783
- --k-components-multiple-choice-item-shadow-color-neutral-tone-b: var(--k-groups-cards-and-modules-shadow-color-concrete-525);
1784
- --k-components-multiple-choice-item-shadow-color-brand-tone-a: var(--k-groups-cards-and-modules-shadow-color-aubergine-250);
1785
- --k-components-multiple-choice-item-shadow-color-brand-tone-b: var(--k-groups-cards-and-modules-shadow-color-aubergine-525);
1793
+ --k-components-multiple-choice-item-shadow-color-neutral-tone-b: var(--k-groups-cards-and-modules-shadow-color-concrete-325);
1794
+ --k-components-multiple-choice-item-shadow-color-neutral-tone-a: var(--k-groups-cards-and-modules-shadow-color-concrete-525);
1795
+ --k-components-multiple-choice-item-shadow-color-brand-tone-b: var(--k-groups-cards-and-modules-shadow-color-aubergine-250);
1796
+ --k-components-multiple-choice-item-shadow-color-brand-tone-a: var(--k-groups-cards-and-modules-shadow-color-aubergine-525);
1786
1797
  --k-components-multiple-choice-item-shadow-color-success: var(--k-groups-cards-and-modules-shadow-color-green-450);
1787
1798
  --k-components-multiple-choice-item-shadow-color-warning: var(--k-groups-cards-and-modules-shadow-color-orange-450);
1788
1799
  --k-components-multiple-choice-item-media-container-border-radius: var(--k-groups-cards-and-modules-radius-small);
@@ -1803,6 +1814,12 @@
1803
1814
  --k-components-content-wrapper-background-color-brand-tone-b: var(--k-groups-content-blocks-color-aubergine-25);
1804
1815
  --k-components-content-wrapper-background-color-neutral-tone-b: var(--k-groups-content-blocks-color-concrete-25);
1805
1816
  --k-components-content-wrapper-background-color-neutral-tone-a: var(--k-groups-content-blocks-color-concrete-850);
1817
+ --k-components-content-wrapper-background-color-nature-tone-a: var(--k-groups-content-blocks-color-nature-750);
1818
+ --k-components-content-wrapper-background-color-nature-tone-b: var(--k-groups-content-blocks-color-nature-25);
1819
+ --k-components-content-wrapper-background-color-thriller-tone-a: var(--k-groups-content-blocks-color-thriller-850);
1820
+ --k-components-content-wrapper-background-color-thriller-tone-b: var(--k-groups-content-blocks-color-thriller-250);
1821
+ --k-components-content-wrapper-background-color-fantasy-tone-a: var(--k-groups-content-blocks-color-fantasy-850);
1822
+ --k-components-content-wrapper-background-color-fantasy-tone-b: var(--k-groups-content-blocks-color-fantasy-250);
1806
1823
  --k-components-content-wrapper-padding-block-overlay: var(--k-groups-content-blocks-space-medium);
1807
1824
  --k-components-content-wrapper-padding-block-page: var(--k-groups-content-blocks-space-xlarge);
1808
1825
  --k-components-content-wrapper-padding-inline-page: var(--k-groups-content-blocks-space-large);
@@ -1811,6 +1828,8 @@
1811
1828
  --k-components-content-wrapper-size-min-width: var(--k-groups-content-blocks-size-small);
1812
1829
  --k-components-content-wrapper-border-radius-overlay: var(--k-groups-content-blocks-radius);
1813
1830
  --k-components-content-wrapper-inner-container-gap: var(--k-groups-content-blocks-space-small);
1831
+ --k-components-content-wrapper-inner-container-content-top-block-gap: var(--k-groups-content-blocks-space-xsmall);
1832
+ --k-components-content-wrapper-inner-container-text-block-gap: var(--k-groups-content-blocks-space-xxsmall);
1814
1833
  --k-components-content-top-block-gap: var(--k-groups-content-blocks-space-xsmall);
1815
1834
  --k-components-popover-gap: var(--k-groups-popovers-space-medium);
1816
1835
  --k-components-popover-padding-medium: var(--k-groups-popovers-space-medium);
@@ -1858,6 +1877,7 @@
1858
1877
  --k-components-switch-thumb-color-neutral: var(--k-groups-switches-color-conctrete-25);
1859
1878
  --k-components-switch-thumb-color-brand: var(--k-groups-switches-color-aubergine-50);
1860
1879
  --k-components-switch-thumb-radius: var(--k-groups-switches-element-radius);
1880
+ --k-components-switch-thumb-size: var(--k-groups-switches-size-medium);
1861
1881
  --k-components-switch-size-height: var(--k-groups-switches-size-large);
1862
1882
  --k-components-switch-size-width: var(--k-groups-switches-size-xxxlarge);
1863
1883
  --k-components-switch-border-radius: var(--k-groups-switches-border-radius);
package/dist/tokens.css CHANGED
@@ -193,7 +193,8 @@
193
193
  --kobber-primitives-font-line-height-40: 2.5rem;
194
194
  --kobber-primitives-font-line-height-50: 3.125rem;
195
195
  --kobber-primitives-font-line-height-60: 3.75rem;
196
- --kobber-primitives-font-line-height-70: 4.375rem;
196
+ --kobber-primitives-font-line-height-72: 4.5rem;
197
+ --kobber-primitives-font-line-height-84: 5.25rem;
197
198
  --kobber-primitives-font-size-12: 0.75rem;
198
199
  --kobber-primitives-font-size-14: 0.875rem;
199
200
  --kobber-primitives-font-size-16: 1rem;
@@ -277,7 +278,7 @@
277
278
  --kobber-groups-counter-aubergine-850: var(--kobber-primitives-color-aubergine-850);
278
279
  --kobber-components-text-body-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
279
280
  --kobber-components-text-lead-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
280
- --kobber-components-text-title-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
281
+ --kobber-components-text-title-text-weight-italic: var(--kobber-semantics-typography-regular-italic);
281
282
  --kobber-semantics-typography-font-family-inter: var(--kobber-primitives-font-family-inter);
282
283
  --kobber-semantics-typography-font-family-lyon-display: var(--kobber-primitives-font-family-lyon-display);
283
284
  --kobber-semantics-typography-font-family-pp-mori: var(--kobber-primitives-font-family-pp-mori);
@@ -307,7 +308,8 @@
307
308
  --kobber-semantics-typography-line-height-40: var(--kobber-primitives-font-line-height-40);
308
309
  --kobber-semantics-typography-line-height-50: var(--kobber-primitives-font-line-height-50);
309
310
  --kobber-semantics-typography-line-height-60: var(--kobber-primitives-font-line-height-60);
310
- --kobber-semantics-typography-line-height-70: var(--kobber-primitives-font-line-height-70);
311
+ --kobber-semantics-typography-line-height-72: var(--kobber-primitives-font-line-height-72);
312
+ --kobber-semantics-typography-line-height-84: var(--kobber-primitives-font-line-height-84);
311
313
  --kobber-semantics-typography-indent: var(--kobber-primitives-size-24);
312
314
  --kobber-semantics-typography-weight-light: var(--kobber-primitives-font-weight-300);
313
315
  --kobber-semantics-typography-weight-book: var(--kobber-primitives-font-weight-300);
@@ -813,11 +815,18 @@
813
815
  --kobber-groups-content-blocks-color-aubergine-25: var(--kobber-semantics-color-identity-base-aubergine-25);
814
816
  --kobber-groups-content-blocks-color-concrete-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
815
817
  --kobber-groups-content-blocks-color-concrete-850: var(--kobber-semantics-color-identity-neutral-concrete-850);
818
+ --kobber-groups-content-blocks-color-nature-750: var(--kobber-semantics-color-theme-nature-nature-750);
819
+ --kobber-groups-content-blocks-color-nature-25: var(--kobber-semantics-color-theme-nature-nature-25);
820
+ --kobber-groups-content-blocks-color-fantasy-250: var(--kobber-semantics-color-theme-fantasy-fantasy-250);
821
+ --kobber-groups-content-blocks-color-fantasy-850: var(--kobber-semantics-color-theme-fantasy-fantasy-850);
822
+ --kobber-groups-content-blocks-color-thriller-850: var(--kobber-semantics-color-theme-thriller-thriller-850);
823
+ --kobber-groups-content-blocks-color-thriller-250: var(--kobber-semantics-color-theme-thriller-thriller-250);
816
824
  --kobber-groups-content-blocks-space-medium: var(--kobber-semantics-layout-component-space-xlarge);
817
825
  --kobber-groups-content-blocks-space-xlarge: var(--kobber-semantics-layout-component-space-huge);
818
826
  --kobber-groups-content-blocks-space-large: var(--kobber-semantics-layout-component-space-big);
819
827
  --kobber-groups-content-blocks-space-small: var(--kobber-semantics-layout-component-space-large);
820
828
  --kobber-groups-content-blocks-space-xsmall: var(--kobber-semantics-layout-component-space-small);
829
+ --kobber-groups-content-blocks-space-xxsmall: var(--kobber-semantics-layout-component-space-tiny);
821
830
  --kobber-groups-content-blocks-size-medium: var(--kobber-semantics-layout-component-size-xlarge);
822
831
  --kobber-groups-content-blocks-size-large: var(--kobber-semantics-layout-component-size-xxlarge);
823
832
  --kobber-groups-content-blocks-size-small: var(--kobber-semantics-layout-component-size-medium);
@@ -864,6 +873,7 @@
864
873
  --kobber-groups-switches-border-radius: var(--kobber-semantics-layout-element-radius-medium);
865
874
  --kobber-groups-switches-size-large: var(--kobber-semantics-layout-element-size-large);
866
875
  --kobber-groups-switches-size-xxxlarge: var(--kobber-semantics-layout-element-size-xxxlarge);
876
+ --kobber-groups-switches-size-medium: var(--kobber-semantics-layout-element-size-medium);
867
877
  --kobber-groups-switches-space: var(--kobber-semantics-layout-element-space-xxsmall);
868
878
  --kobber-components-button-background-color-brand-primary-tone-a-hover: var(--kobber-groups-buttons-color-carmine-transparent-carmine-carmine-1000-10);
869
879
  --kobber-components-button-background-color-brand-secondary-tone-b-hover: var(--kobber-groups-buttons-color-aubergine-transparent-aubergine-1000-10);
@@ -933,8 +943,8 @@
933
943
  --kobber-components-text-body-text-weight-brand: var(--kobber-semantics-typography-weight-regular);
934
944
  --kobber-components-text-heading-text-line-height-brand-large: var(--kobber-semantics-typography-line-height-60);
935
945
  --kobber-components-text-heading-text-line-height-brand-medium: var(--kobber-semantics-typography-line-height-50);
936
- --kobber-components-text-heading-text-line-height-reading-medium: var(--kobber-semantics-typography-line-height-40);
937
- --kobber-components-text-heading-text-line-height-reading-large: var(--kobber-semantics-typography-line-height-50);
946
+ --kobber-components-text-heading-text-line-height-reading-medium: var(--kobber-semantics-typography-line-height-50);
947
+ --kobber-components-text-heading-text-line-height-reading-large: var(--kobber-semantics-typography-line-height-60);
938
948
  --kobber-components-text-heading-text-font-reading: var(--kobber-semantics-typography-font-family-inter);
939
949
  --kobber-components-text-heading-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
940
950
  --kobber-components-text-heading-text-size-large: var(--kobber-semantics-typography-size-40);
@@ -943,25 +953,25 @@
943
953
  --kobber-components-text-heading-text-weight-reading: var(--kobber-semantics-typography-weight-light);
944
954
  --kobber-components-text-lead-text-font-reading: var(--kobber-semantics-typography-font-family-inter);
945
955
  --kobber-components-text-lead-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
946
- --kobber-components-text-lead-text-line-height: var(--kobber-semantics-typography-line-height-28);
956
+ --kobber-components-text-lead-text-line-height: var(--kobber-semantics-typography-line-height-30);
947
957
  --kobber-components-text-lead-text-size: var(--kobber-semantics-typography-size-20);
948
958
  --kobber-components-text-lead-text-weight-reading-regular: var(--kobber-semantics-typography-weight-regular);
949
959
  --kobber-components-text-lead-text-weight-brand: var(--kobber-semantics-typography-weight-regular);
950
- --kobber-components-text-title-text-line-height-brand-large: var(--kobber-semantics-typography-line-height-30);
951
- --kobber-components-text-title-text-line-height-brand-medium: var(--kobber-semantics-typography-line-height-28);
952
- --kobber-components-text-title-text-line-height-reading-medium: var(--kobber-semantics-typography-line-height-26);
953
- --kobber-components-text-title-text-line-height-reading-large: var(--kobber-semantics-typography-line-height-28);
954
960
  --kobber-components-text-title-text-font-reading: var(--kobber-semantics-typography-font-family-inter);
955
961
  --kobber-components-text-title-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
962
+ --kobber-components-text-title-text-line-height-medium: var(--kobber-semantics-typography-line-height-30);
963
+ --kobber-components-text-title-text-line-height-large: var(--kobber-semantics-typography-line-height-40);
964
+ --kobber-components-text-title-text-line-height-small: var(--kobber-semantics-typography-line-height-24);
956
965
  --kobber-components-text-title-text-size-large: var(--kobber-semantics-typography-size-24);
957
966
  --kobber-components-text-title-text-size-medium: var(--kobber-semantics-typography-size-20);
958
- --kobber-components-text-title-text-weight-reading-regular: var(--kobber-semantics-typography-weight-regular);
967
+ --kobber-components-text-title-text-size-small: var(--kobber-semantics-typography-size-16);
968
+ --kobber-components-text-title-text-weight-regular: var(--kobber-semantics-typography-weight-regular);
959
969
  --kobber-components-text-title-text-weight-brand: var(--kobber-semantics-typography-weight-regular);
960
970
  --kobber-components-text-display-size-medium: var(--kobber-semantics-typography-size-48);
961
971
  --kobber-components-text-display-size-large: var(--kobber-semantics-typography-size-56);
962
972
  --kobber-components-text-display-text-font: var(--kobber-semantics-typography-font-family-pp-mori);
963
- --kobber-components-text-display-text-line-height-medium: var(--kobber-semantics-typography-line-height-60);
964
- --kobber-components-text-display-text-line-height-large: var(--kobber-semantics-typography-line-height-70);
973
+ --kobber-components-text-display-text-line-height-medium: var(--kobber-semantics-typography-line-height-72);
974
+ --kobber-components-text-display-text-line-height-large: var(--kobber-semantics-typography-line-height-84);
965
975
  --kobber-components-text-display-text-weight: var(--kobber-semantics-typography-weight-book);
966
976
  --kobber-components-text-display-extended-text-font-alt2: var(--kobber-semantics-typography-font-family-lyon-display);
967
977
  --kobber-components-text-display-extended-text-font-alt1: var(--kobber-semantics-typography-font-family-pp-mori);
@@ -1135,7 +1145,8 @@
1135
1145
  --kobber-components-divider-background-color-brand-tone-a: var(--kobber-groups-utilities-color-wine-600);
1136
1146
  --kobber-components-divider-background-color-neutral-tone-a: var(--kobber-groups-utilities-color-concrete-525);
1137
1147
  --kobber-components-divider-background-color-neutral-tone-b: var(--kobber-groups-utilities-color-concrete-150);
1138
- --kobber-components-divider-background-color-rettsdata-tone-b: var(--kobber-groups-utilities-color-rettsdata-20);
1148
+ --kobber-components-divider-background-color-rettsdata-tone-b: var(--kobber-groups-utilities-color-rettsdata-30);
1149
+ --kobber-components-divider-background-color-rettsdata-tone-a: var(--kobber-groups-utilities-color-rettsdata-60);
1139
1150
  --kobber-components-divider-border-radius: var(--kobber-groups-utilities-radius);
1140
1151
  --kobber-components-divider-padding-block-horizontal: var(--kobber-groups-utilities-space);
1141
1152
  --kobber-components-divider-padding-inline-vertical: var(--kobber-groups-utilities-space);
@@ -1162,7 +1173,7 @@
1162
1173
  --kobber-components-alert-label-icon-shape-color-warning: var(--kobber-groups-alerts-color-warning-darkest);
1163
1174
  --kobber-components-alert-label-icon-size: var(--kobber-groups-alerts-visual-icon-size-small);
1164
1175
  --kobber-components-alert-label-padding: var(--kobber-groups-alerts-space-small);
1165
- --kobber-components-alert-label-gap: var(--kobber-groups-alerts-space-xsmall);
1176
+ --kobber-components-alert-label-gap: var(--kobber-groups-alerts-space-small);
1166
1177
  --kobber-components-alert-label-border-radius: var(--kobber-groups-alerts-radius-small);
1167
1178
  --kobber-components-text-link-gap: var(--kobber-groups-links-space-small);
1168
1179
  --kobber-components-text-link-border-width: var(--kobber-groups-links-stroke);
@@ -1600,8 +1611,8 @@
1600
1611
  --kobber-components-profile-card-image-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
1601
1612
  --kobber-components-profile-card-inner-container-gap: var(--kobber-groups-cards-and-modules-space-large);
1602
1613
  --kobber-components-dropdown-menu-gap: var(--kobber-groups-menus-space-xsmall);
1603
- --kobber-components-contextual-navigation-bar-padding-inline: var(--kobber-groups-navigation-bars-space-medium);
1604
- --kobber-components-contextual-navigation-bar-padding-block: var(--kobber-groups-navigation-bars-space-large);
1614
+ --kobber-components-contextual-navigation-bar-padding-block: var(--kobber-groups-navigation-bars-space-medium);
1615
+ --kobber-components-contextual-navigation-bar-padding-inline: var(--kobber-groups-navigation-bars-space-large);
1605
1616
  --kobber-components-contextual-navigation-bar-left-container-gap: var(--kobber-groups-navigation-bars-space-xxlarge);
1606
1617
  --kobber-components-contextual-navigation-bar-background-color: var(--kobber-groups-navigation-bars-color-concrete-25);
1607
1618
  --kobber-components-contextual-navigation-bar-right-container-gap: var(--kobber-groups-navigation-bars-space-xsmall);
@@ -1691,7 +1702,7 @@
1691
1702
  --kobber-components-text-heading-text-color-brand-tone-a: var(--kobber-semantics-typography-color-brand-aubergine-750);
1692
1703
  --kobber-components-text-heading-text-color-brand-tone-b: var(--kobber-semantics-typography-color-brand-aubergine-50);
1693
1704
  --kobber-components-text-heading-text-color-neutral-tone-b: var(--kobber-semantics-typography-color-brand-concrete-50);
1694
- --kobber-components-text-heading-text-color-neutral-tone-a: var(--kobber-semantics-typography-color-brand-concrete-750);
1705
+ --kobber-components-text-heading-text-color-neutral-tone-a: var(--kobber-semantics-typography-color-brand-concrete-900);
1695
1706
  --kobber-components-text-lead-text-color-brand-tone-a: var(--kobber-semantics-typography-color-brand-aubergine-750);
1696
1707
  --kobber-components-text-lead-text-color-brand-tone-b: var(--kobber-semantics-typography-color-brand-aubergine-50);
1697
1708
  --kobber-components-text-lead-text-color-nostalgia-tone-b: var(--kobber-semantics-typography-color-theme-nostalgia-25);
@@ -1707,7 +1718,7 @@
1707
1718
  --kobber-components-text-lead-text-color-nature-tone-b: var(--kobber-semantics-typography-color-theme-nature-25);
1708
1719
  --kobber-components-text-lead-text-color-nature-tone-a: var(--kobber-semantics-typography-color-theme-nature-750);
1709
1720
  --kobber-components-text-lead-text-color-neutral-tone-b: var(--kobber-semantics-typography-color-brand-concrete-50);
1710
- --kobber-components-text-lead-text-color-neutral-tone-a: var(--kobber-semantics-typography-color-brand-concrete-750);
1721
+ --kobber-components-text-lead-text-color-neutral-tone-a: var(--kobber-semantics-typography-color-brand-concrete-900);
1711
1722
  --kobber-components-text-title-text-color-warning-tone-a: var(--kobber-semantics-typography-color-validation-warning-700);
1712
1723
  --kobber-components-text-title-text-color-warning-tone-b: var(--kobber-semantics-typography-color-validation-warning-75);
1713
1724
  --kobber-components-text-title-text-color-informative-tone-b: var(--kobber-semantics-typography-color-validation-informative-25);
@@ -1728,7 +1739,7 @@
1728
1739
  --kobber-components-text-title-text-color-brand-tone-b: var(--kobber-semantics-typography-color-brand-aubergine-50);
1729
1740
  --kobber-components-text-title-text-color-nature-tone-b: var(--kobber-semantics-typography-color-theme-nature-25);
1730
1741
  --kobber-components-text-title-text-color-nature-tone-a: var(--kobber-semantics-typography-color-theme-nature-750);
1731
- --kobber-components-text-title-text-color-neutral-tone-a: var(--kobber-semantics-typography-color-brand-concrete-750);
1742
+ --kobber-components-text-title-text-color-neutral-tone-a: var(--kobber-semantics-typography-color-brand-concrete-900);
1732
1743
  --kobber-components-text-title-text-color-neutral-tone-b: var(--kobber-semantics-typography-color-brand-concrete-50);
1733
1744
  --kobber-components-text-display-text-color: var(--kobber-semantics-typography-color-brand-aubergine-750);
1734
1745
  --kobber-components-text-display-extended-text-color: var(--kobber-semantics-typography-color-brand-carmine-525);
@@ -1770,19 +1781,19 @@
1770
1781
  --kobber-components-content-controls-padding-xxsmall: var(--kobber-groups-content-controls-space-xxsmall);
1771
1782
  --kobber-components-multiple-choice-item-padding: var(--kobber-groups-cards-and-modules-space-medium);
1772
1783
  --kobber-components-multiple-choice-item-gap: var(--kobber-groups-cards-and-modules-space-medium);
1773
- --kobber-components-multiple-choice-item-background-color-neutral-tone-a: var(--kobber-groups-cards-and-modules-color-neutral-50);
1774
- --kobber-components-multiple-choice-item-background-color-neutral-tone-b: var(--kobber-groups-cards-and-modules-color-neutral-750);
1775
- --kobber-components-multiple-choice-item-background-color-brand-tone-a: var(--kobber-groups-cards-and-modules-color-aubergine-50);
1776
- --kobber-components-multiple-choice-item-background-color-brand-tone-b: var(--kobber-groups-cards-and-modules-color-aubergine-750);
1784
+ --kobber-components-multiple-choice-item-background-color-neutral-tone-b: var(--kobber-groups-cards-and-modules-color-neutral-50);
1785
+ --kobber-components-multiple-choice-item-background-color-neutral-tone-a: var(--kobber-groups-cards-and-modules-color-neutral-750);
1786
+ --kobber-components-multiple-choice-item-background-color-brand-tone-b: var(--kobber-groups-cards-and-modules-color-aubergine-50);
1787
+ --kobber-components-multiple-choice-item-background-color-brand-tone-a: var(--kobber-groups-cards-and-modules-color-aubergine-750);
1777
1788
  --kobber-components-multiple-choice-item-background-color-success: var(--kobber-groups-cards-and-modules-color-success-75);
1778
1789
  --kobber-components-multiple-choice-item-background-color-warning: var(--kobber-groups-cards-and-modules-color-warning-75);
1779
1790
  --kobber-components-multiple-choice-item-border-radius: var(--kobber-groups-cards-and-modules-radius-small);
1780
1791
  --kobber-components-multiple-choice-item-shadow-spread-medium: var(--kobber-groups-cards-and-modules-shadow-spread-medium);
1781
1792
  --kobber-components-multiple-choice-item-shadow-spread-small: var(--kobber-groups-cards-and-modules-shadow-spread-small);
1782
- --kobber-components-multiple-choice-item-shadow-color-neutral-tone-a: var(--kobber-groups-cards-and-modules-shadow-color-concrete-325);
1783
- --kobber-components-multiple-choice-item-shadow-color-neutral-tone-b: var(--kobber-groups-cards-and-modules-shadow-color-concrete-525);
1784
- --kobber-components-multiple-choice-item-shadow-color-brand-tone-a: var(--kobber-groups-cards-and-modules-shadow-color-aubergine-250);
1785
- --kobber-components-multiple-choice-item-shadow-color-brand-tone-b: var(--kobber-groups-cards-and-modules-shadow-color-aubergine-525);
1793
+ --kobber-components-multiple-choice-item-shadow-color-neutral-tone-b: var(--kobber-groups-cards-and-modules-shadow-color-concrete-325);
1794
+ --kobber-components-multiple-choice-item-shadow-color-neutral-tone-a: var(--kobber-groups-cards-and-modules-shadow-color-concrete-525);
1795
+ --kobber-components-multiple-choice-item-shadow-color-brand-tone-b: var(--kobber-groups-cards-and-modules-shadow-color-aubergine-250);
1796
+ --kobber-components-multiple-choice-item-shadow-color-brand-tone-a: var(--kobber-groups-cards-and-modules-shadow-color-aubergine-525);
1786
1797
  --kobber-components-multiple-choice-item-shadow-color-success: var(--kobber-groups-cards-and-modules-shadow-color-green-450);
1787
1798
  --kobber-components-multiple-choice-item-shadow-color-warning: var(--kobber-groups-cards-and-modules-shadow-color-orange-450);
1788
1799
  --kobber-components-multiple-choice-item-media-container-border-radius: var(--kobber-groups-cards-and-modules-radius-small);
@@ -1803,6 +1814,12 @@
1803
1814
  --kobber-components-content-wrapper-background-color-brand-tone-b: var(--kobber-groups-content-blocks-color-aubergine-25);
1804
1815
  --kobber-components-content-wrapper-background-color-neutral-tone-b: var(--kobber-groups-content-blocks-color-concrete-25);
1805
1816
  --kobber-components-content-wrapper-background-color-neutral-tone-a: var(--kobber-groups-content-blocks-color-concrete-850);
1817
+ --kobber-components-content-wrapper-background-color-nature-tone-a: var(--kobber-groups-content-blocks-color-nature-750);
1818
+ --kobber-components-content-wrapper-background-color-nature-tone-b: var(--kobber-groups-content-blocks-color-nature-25);
1819
+ --kobber-components-content-wrapper-background-color-thriller-tone-a: var(--kobber-groups-content-blocks-color-thriller-850);
1820
+ --kobber-components-content-wrapper-background-color-thriller-tone-b: var(--kobber-groups-content-blocks-color-thriller-250);
1821
+ --kobber-components-content-wrapper-background-color-fantasy-tone-a: var(--kobber-groups-content-blocks-color-fantasy-850);
1822
+ --kobber-components-content-wrapper-background-color-fantasy-tone-b: var(--kobber-groups-content-blocks-color-fantasy-250);
1806
1823
  --kobber-components-content-wrapper-padding-block-overlay: var(--kobber-groups-content-blocks-space-medium);
1807
1824
  --kobber-components-content-wrapper-padding-block-page: var(--kobber-groups-content-blocks-space-xlarge);
1808
1825
  --kobber-components-content-wrapper-padding-inline-page: var(--kobber-groups-content-blocks-space-large);
@@ -1811,6 +1828,8 @@
1811
1828
  --kobber-components-content-wrapper-size-min-width: var(--kobber-groups-content-blocks-size-small);
1812
1829
  --kobber-components-content-wrapper-border-radius-overlay: var(--kobber-groups-content-blocks-radius);
1813
1830
  --kobber-components-content-wrapper-inner-container-gap: var(--kobber-groups-content-blocks-space-small);
1831
+ --kobber-components-content-wrapper-inner-container-content-top-block-gap: var(--kobber-groups-content-blocks-space-xsmall);
1832
+ --kobber-components-content-wrapper-inner-container-text-block-gap: var(--kobber-groups-content-blocks-space-xxsmall);
1814
1833
  --kobber-components-content-top-block-gap: var(--kobber-groups-content-blocks-space-xsmall);
1815
1834
  --kobber-components-popover-gap: var(--kobber-groups-popovers-space-medium);
1816
1835
  --kobber-components-popover-padding-medium: var(--kobber-groups-popovers-space-medium);
@@ -1858,6 +1877,7 @@
1858
1877
  --kobber-components-switch-thumb-color-neutral: var(--kobber-groups-switches-color-conctrete-25);
1859
1878
  --kobber-components-switch-thumb-color-brand: var(--kobber-groups-switches-color-aubergine-50);
1860
1879
  --kobber-components-switch-thumb-radius: var(--kobber-groups-switches-element-radius);
1880
+ --kobber-components-switch-thumb-size: var(--kobber-groups-switches-size-medium);
1861
1881
  --kobber-components-switch-size-height: var(--kobber-groups-switches-size-large);
1862
1882
  --kobber-components-switch-size-width: var(--kobber-groups-switches-size-xxxlarge);
1863
1883
  --kobber-components-switch-border-radius: var(--kobber-groups-switches-border-radius);
package/dist/tokens.d.ts CHANGED
@@ -227,7 +227,8 @@ export const primitives: {
227
227
  "40": 40,
228
228
  "50": 50,
229
229
  "60": 60,
230
- "70": 70
230
+ "72": 72,
231
+ "84": 84
231
232
  },
232
233
  "size": {
233
234
  "12": 12,
@@ -922,14 +923,21 @@ export const groups: {
922
923
  "aubergine-850": "#481125",
923
924
  "aubergine-25": "#fdf9f9",
924
925
  "concrete-25": "#f9fafb",
925
- "concrete-850": "#202429"
926
+ "concrete-850": "#202429",
927
+ "nature-750": "#343a32",
928
+ "nature-25": "#d9e7d5",
929
+ "fantasy-250": "#c1b9c4",
930
+ "fantasy-850": "#28222a",
931
+ "thriller-850": "#0b2e3a",
932
+ "thriller-250": "#aec3c3"
926
933
  },
927
934
  "space": {
928
935
  "medium": 48,
929
936
  "xlarge": 72,
930
937
  "large": 56,
931
938
  "small": 40,
932
- "xsmall": 16
939
+ "xsmall": 16,
940
+ "xxsmall": 8
933
941
  },
934
942
  "size": {
935
943
  "medium": 568,
@@ -1035,7 +1043,8 @@ export const groups: {
1035
1043
  },
1036
1044
  "size": {
1037
1045
  "large": 32,
1038
- "xxxlarge": 56
1046
+ "xxxlarge": 56,
1047
+ "medium": 24
1039
1048
  },
1040
1049
  "space": 4
1041
1050
  }
@@ -1334,7 +1343,8 @@ export const components: {
1334
1343
  "toneB": "#cfd5dd"
1335
1344
  },
1336
1345
  "rettsdata": {
1337
- "toneB": "#dcddff"
1346
+ "toneB": "#bdc0fe",
1347
+ "toneA": "#5555ff"
1338
1348
  }
1339
1349
  }
1340
1350
  },
@@ -1408,7 +1418,7 @@ export const components: {
1408
1418
  "size": 16
1409
1419
  },
1410
1420
  "padding": 8,
1411
- "gap": 4,
1421
+ "gap": 8,
1412
1422
  "border": {
1413
1423
  "radius": 8
1414
1424
  }
@@ -2712,8 +2722,8 @@ export const components: {
2712
2722
  },
2713
2723
  "_contextualNavigationBar": {
2714
2724
  "padding": {
2715
- "inline": 16,
2716
- "block": 24
2725
+ "block": 16,
2726
+ "inline": 24
2717
2727
  },
2718
2728
  "leftContainer": {
2719
2729
  "gap": 40
@@ -2966,8 +2976,8 @@ export const components: {
2966
2976
  "medium": 50
2967
2977
  },
2968
2978
  "reading": {
2969
- "medium": 40,
2970
- "large": 50
2979
+ "medium": 50,
2980
+ "large": 60
2971
2981
  }
2972
2982
  },
2973
2983
  "font": {
@@ -3005,7 +3015,7 @@ export const components: {
3005
3015
  },
3006
3016
  "neutral": {
3007
3017
  "toneB": "#eceef1",
3008
- "toneA": "#333a41"
3018
+ "toneA": "#191c20"
3009
3019
  }
3010
3020
  },
3011
3021
  "size": {
@@ -3051,14 +3061,14 @@ export const components: {
3051
3061
  },
3052
3062
  "neutral": {
3053
3063
  "toneB": "#eceef1",
3054
- "toneA": "#333a41"
3064
+ "toneA": "#191c20"
3055
3065
  }
3056
3066
  },
3057
3067
  "font": {
3058
3068
  "reading": "inter",
3059
3069
  "brand": "pp-mori"
3060
3070
  },
3061
- "lineHeight": 28,
3071
+ "lineHeight": 30,
3062
3072
  "size": 20,
3063
3073
  "weight": {
3064
3074
  "reading": {
@@ -3071,16 +3081,6 @@ export const components: {
3071
3081
  },
3072
3082
  "textTitle": {
3073
3083
  "text": {
3074
- "lineHeight": {
3075
- "brand": {
3076
- "large": 30,
3077
- "medium": 28
3078
- },
3079
- "reading": {
3080
- "medium": 26,
3081
- "large": 28
3082
- }
3083
- },
3084
3084
  "font": {
3085
3085
  "reading": "inter",
3086
3086
  "brand": "pp-mori"
@@ -3127,19 +3127,23 @@ export const components: {
3127
3127
  "toneA": "#343a32"
3128
3128
  },
3129
3129
  "neutral": {
3130
- "toneA": "#333a41",
3130
+ "toneA": "#191c20",
3131
3131
  "toneB": "#eceef1"
3132
3132
  }
3133
3133
  },
3134
+ "lineHeight": {
3135
+ "medium": 30,
3136
+ "large": 40,
3137
+ "small": 24
3138
+ },
3134
3139
  "size": {
3135
3140
  "large": 24,
3136
- "medium": 20
3141
+ "medium": 20,
3142
+ "small": 16
3137
3143
  },
3138
3144
  "weight": {
3139
- "reading": {
3140
- "italic": "italic",
3141
- "regular": 400
3142
- },
3145
+ "italic": "italic",
3146
+ "regular": 400,
3143
3147
  "brand": 400
3144
3148
  }
3145
3149
  }
@@ -3153,8 +3157,8 @@ export const components: {
3153
3157
  "color": "#691837",
3154
3158
  "font": "pp-mori",
3155
3159
  "lineHeight": {
3156
- "medium": 60,
3157
- "large": 70
3160
+ "medium": 72,
3161
+ "large": 84
3158
3162
  },
3159
3163
  "weight": 300
3160
3164
  },
@@ -3301,12 +3305,12 @@ export const components: {
3301
3305
  "background": {
3302
3306
  "color": {
3303
3307
  "neutral": {
3304
- "toneA": "#eceef1",
3305
- "toneB": "#333a41"
3308
+ "toneB": "#eceef1",
3309
+ "toneA": "#333a41"
3306
3310
  },
3307
3311
  "brand": {
3308
- "toneA": "#f9eaed",
3309
- "toneB": "#691837"
3312
+ "toneB": "#f9eaed",
3313
+ "toneA": "#691837"
3310
3314
  },
3311
3315
  "success": "#cbfbdb",
3312
3316
  "warning": "#ffe6d2"
@@ -3322,12 +3326,12 @@ export const components: {
3322
3326
  },
3323
3327
  "color": {
3324
3328
  "neutral": {
3325
- "toneA": "#95a5b7",
3326
- "toneB": "#697684"
3329
+ "toneB": "#95a5b7",
3330
+ "toneA": "#697684"
3327
3331
  },
3328
3332
  "brand": {
3329
- "toneA": "#f3a5b9",
3330
- "toneB": "#ce3871"
3333
+ "toneB": "#f3a5b9",
3334
+ "toneA": "#ce3871"
3331
3335
  },
3332
3336
  "success": "#03834e",
3333
3337
  "warning": "#f6a04a"
@@ -3384,6 +3388,18 @@ export const components: {
3384
3388
  "neutral": {
3385
3389
  "toneB": "#f9fafb",
3386
3390
  "toneA": "#202429"
3391
+ },
3392
+ "nature": {
3393
+ "toneA": "#343a32",
3394
+ "toneB": "#d9e7d5"
3395
+ },
3396
+ "thriller": {
3397
+ "toneA": "#0b2e3a",
3398
+ "toneB": "#aec3c3"
3399
+ },
3400
+ "fantasy": {
3401
+ "toneA": "#28222a",
3402
+ "toneB": "#c1b9c4"
3387
3403
  }
3388
3404
  }
3389
3405
  },
@@ -3407,7 +3423,13 @@ export const components: {
3407
3423
  }
3408
3424
  },
3409
3425
  "innerContainer": {
3410
- "gap": 40
3426
+ "gap": 40,
3427
+ "contentTopBlock": {
3428
+ "gap": 16
3429
+ },
3430
+ "textBlock": {
3431
+ "gap": 8
3432
+ }
3411
3433
  }
3412
3434
  },
3413
3435
  "contentTopBlock": {
@@ -3548,7 +3570,8 @@ export const components: {
3548
3570
  "neutral": "#f9fafb",
3549
3571
  "brand": "#f9eaed"
3550
3572
  },
3551
- "radius": 9999
3573
+ "radius": 9999,
3574
+ "size": 24
3552
3575
  },
3553
3576
  "size": {
3554
3577
  "height": 32,
@@ -3653,7 +3676,8 @@ export const semantics: {
3653
3676
  "40": 40,
3654
3677
  "50": 50,
3655
3678
  "60": 60,
3656
- "70": 70
3679
+ "72": 72,
3680
+ "84": 84
3657
3681
  },
3658
3682
  "space": {
3659
3683
  "large": 24,
package/dist/tokens.js CHANGED
@@ -226,7 +226,8 @@ export const primitives = {
226
226
  "40": 40,
227
227
  "50": 50,
228
228
  "60": 60,
229
- "70": 70
229
+ "72": 72,
230
+ "84": 84
230
231
  },
231
232
  "size": {
232
233
  "12": 12,
@@ -921,14 +922,21 @@ export const groups = {
921
922
  "aubergine-850": "#481125",
922
923
  "aubergine-25": "#fdf9f9",
923
924
  "concrete-25": "#f9fafb",
924
- "concrete-850": "#202429"
925
+ "concrete-850": "#202429",
926
+ "nature-750": "#343a32",
927
+ "nature-25": "#d9e7d5",
928
+ "fantasy-250": "#c1b9c4",
929
+ "fantasy-850": "#28222a",
930
+ "thriller-850": "#0b2e3a",
931
+ "thriller-250": "#aec3c3"
925
932
  },
926
933
  "space": {
927
934
  "medium": 48,
928
935
  "xlarge": 72,
929
936
  "large": 56,
930
937
  "small": 40,
931
- "xsmall": 16
938
+ "xsmall": 16,
939
+ "xxsmall": 8
932
940
  },
933
941
  "size": {
934
942
  "medium": 568,
@@ -1034,7 +1042,8 @@ export const groups = {
1034
1042
  },
1035
1043
  "size": {
1036
1044
  "large": 32,
1037
- "xxxlarge": 56
1045
+ "xxxlarge": 56,
1046
+ "medium": 24
1038
1047
  },
1039
1048
  "space": 4
1040
1049
  }
@@ -1333,7 +1342,8 @@ export const components = {
1333
1342
  "toneB": "#cfd5dd"
1334
1343
  },
1335
1344
  "rettsdata": {
1336
- "toneB": "#dcddff"
1345
+ "toneB": "#bdc0fe",
1346
+ "toneA": "#5555ff"
1337
1347
  }
1338
1348
  }
1339
1349
  },
@@ -1407,7 +1417,7 @@ export const components = {
1407
1417
  "size": 16
1408
1418
  },
1409
1419
  "padding": 8,
1410
- "gap": 4,
1420
+ "gap": 8,
1411
1421
  "border": {
1412
1422
  "radius": 8
1413
1423
  }
@@ -2711,8 +2721,8 @@ export const components = {
2711
2721
  },
2712
2722
  "_contextualNavigationBar": {
2713
2723
  "padding": {
2714
- "inline": 16,
2715
- "block": 24
2724
+ "block": 16,
2725
+ "inline": 24
2716
2726
  },
2717
2727
  "leftContainer": {
2718
2728
  "gap": 40
@@ -2965,8 +2975,8 @@ export const components = {
2965
2975
  "medium": 50
2966
2976
  },
2967
2977
  "reading": {
2968
- "medium": 40,
2969
- "large": 50
2978
+ "medium": 50,
2979
+ "large": 60
2970
2980
  }
2971
2981
  },
2972
2982
  "font": {
@@ -3004,7 +3014,7 @@ export const components = {
3004
3014
  },
3005
3015
  "neutral": {
3006
3016
  "toneB": "#eceef1",
3007
- "toneA": "#333a41"
3017
+ "toneA": "#191c20"
3008
3018
  }
3009
3019
  },
3010
3020
  "size": {
@@ -3050,14 +3060,14 @@ export const components = {
3050
3060
  },
3051
3061
  "neutral": {
3052
3062
  "toneB": "#eceef1",
3053
- "toneA": "#333a41"
3063
+ "toneA": "#191c20"
3054
3064
  }
3055
3065
  },
3056
3066
  "font": {
3057
3067
  "reading": "inter",
3058
3068
  "brand": "pp-mori"
3059
3069
  },
3060
- "lineHeight": 28,
3070
+ "lineHeight": 30,
3061
3071
  "size": 20,
3062
3072
  "weight": {
3063
3073
  "reading": {
@@ -3070,16 +3080,6 @@ export const components = {
3070
3080
  },
3071
3081
  "textTitle": {
3072
3082
  "text": {
3073
- "lineHeight": {
3074
- "brand": {
3075
- "large": 30,
3076
- "medium": 28
3077
- },
3078
- "reading": {
3079
- "medium": 26,
3080
- "large": 28
3081
- }
3082
- },
3083
3083
  "font": {
3084
3084
  "reading": "inter",
3085
3085
  "brand": "pp-mori"
@@ -3126,19 +3126,23 @@ export const components = {
3126
3126
  "toneA": "#343a32"
3127
3127
  },
3128
3128
  "neutral": {
3129
- "toneA": "#333a41",
3129
+ "toneA": "#191c20",
3130
3130
  "toneB": "#eceef1"
3131
3131
  }
3132
3132
  },
3133
+ "lineHeight": {
3134
+ "medium": 30,
3135
+ "large": 40,
3136
+ "small": 24
3137
+ },
3133
3138
  "size": {
3134
3139
  "large": 24,
3135
- "medium": 20
3140
+ "medium": 20,
3141
+ "small": 16
3136
3142
  },
3137
3143
  "weight": {
3138
- "reading": {
3139
- "italic": "italic",
3140
- "regular": 400
3141
- },
3144
+ "italic": "italic",
3145
+ "regular": 400,
3142
3146
  "brand": 400
3143
3147
  }
3144
3148
  }
@@ -3152,8 +3156,8 @@ export const components = {
3152
3156
  "color": "#691837",
3153
3157
  "font": "pp-mori",
3154
3158
  "lineHeight": {
3155
- "medium": 60,
3156
- "large": 70
3159
+ "medium": 72,
3160
+ "large": 84
3157
3161
  },
3158
3162
  "weight": 300
3159
3163
  },
@@ -3300,12 +3304,12 @@ export const components = {
3300
3304
  "background": {
3301
3305
  "color": {
3302
3306
  "neutral": {
3303
- "toneA": "#eceef1",
3304
- "toneB": "#333a41"
3307
+ "toneB": "#eceef1",
3308
+ "toneA": "#333a41"
3305
3309
  },
3306
3310
  "brand": {
3307
- "toneA": "#f9eaed",
3308
- "toneB": "#691837"
3311
+ "toneB": "#f9eaed",
3312
+ "toneA": "#691837"
3309
3313
  },
3310
3314
  "success": "#cbfbdb",
3311
3315
  "warning": "#ffe6d2"
@@ -3321,12 +3325,12 @@ export const components = {
3321
3325
  },
3322
3326
  "color": {
3323
3327
  "neutral": {
3324
- "toneA": "#95a5b7",
3325
- "toneB": "#697684"
3328
+ "toneB": "#95a5b7",
3329
+ "toneA": "#697684"
3326
3330
  },
3327
3331
  "brand": {
3328
- "toneA": "#f3a5b9",
3329
- "toneB": "#ce3871"
3332
+ "toneB": "#f3a5b9",
3333
+ "toneA": "#ce3871"
3330
3334
  },
3331
3335
  "success": "#03834e",
3332
3336
  "warning": "#f6a04a"
@@ -3383,6 +3387,18 @@ export const components = {
3383
3387
  "neutral": {
3384
3388
  "toneB": "#f9fafb",
3385
3389
  "toneA": "#202429"
3390
+ },
3391
+ "nature": {
3392
+ "toneA": "#343a32",
3393
+ "toneB": "#d9e7d5"
3394
+ },
3395
+ "thriller": {
3396
+ "toneA": "#0b2e3a",
3397
+ "toneB": "#aec3c3"
3398
+ },
3399
+ "fantasy": {
3400
+ "toneA": "#28222a",
3401
+ "toneB": "#c1b9c4"
3386
3402
  }
3387
3403
  }
3388
3404
  },
@@ -3406,7 +3422,13 @@ export const components = {
3406
3422
  }
3407
3423
  },
3408
3424
  "innerContainer": {
3409
- "gap": 40
3425
+ "gap": 40,
3426
+ "contentTopBlock": {
3427
+ "gap": 16
3428
+ },
3429
+ "textBlock": {
3430
+ "gap": 8
3431
+ }
3410
3432
  }
3411
3433
  },
3412
3434
  "contentTopBlock": {
@@ -3547,7 +3569,8 @@ export const components = {
3547
3569
  "neutral": "#f9fafb",
3548
3570
  "brand": "#f9eaed"
3549
3571
  },
3550
- "radius": 9999
3572
+ "radius": 9999,
3573
+ "size": 24
3551
3574
  },
3552
3575
  "size": {
3553
3576
  "height": 32,
@@ -3652,7 +3675,8 @@ export const semantics = {
3652
3675
  "40": 40,
3653
3676
  "50": 50,
3654
3677
  "60": 60,
3655
- "70": 70
3678
+ "72": 72,
3679
+ "84": 84
3656
3680
  },
3657
3681
  "space": {
3658
3682
  "large": 24,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gyldendal/kobber-tokens",
3
- "version": "12.0.0",
3
+ "version": "13.0.0",
4
4
  "description": "Gyldendal Kobber design tokens",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,