@gyldendal/kobber-tokens 2.0.0 → 4.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 (7) hide show
  1. package/README.md +15 -4
  2. package/dist/CHANGELOG.txt +76 -1
  3. package/dist/k-tokens.css +32 -31
  4. package/dist/tokens.css +32 -31
  5. package/dist/tokens.d.ts +22 -27
  6. package/dist/tokens.js +22 -27
  7. package/package.json +5 -3
package/README.md CHANGED
@@ -101,13 +101,13 @@ The changelog format:
101
101
  === 17.12.2025, 14:30:45 [a1b2c3d4] - MINOR - npm: vX.Y.Z ===
102
102
 
103
103
  ADDED
104
- --kobber-component-new-token
104
+ component-new-token
105
105
 
106
106
  REMOVED
107
- --kobber-component-old-token
107
+ component-old-token
108
108
 
109
109
  CHANGED
110
- --kobber-component-changed-token|oldValue|newValue
110
+ component-changed-token
111
111
  ```
112
112
 
113
113
  **Header format:**
@@ -186,7 +186,18 @@ If you publish a new version without token changes (e.g., fixing a build script
186
186
  2. Export `design-tokens.tokens.json` from Figma
187
187
  3. Replace the file in project root
188
188
  4. Commit and push: `git add . && git commit -m "feat: update tokens" && git push`
189
- 5. Create a Pull Request on GitHub
189
+ 5. Ask a developer on Slack to preview the changes before creating PR
190
+
191
+ #### For Developers (previewing token changes for UX team)
192
+
193
+ When UX team asks you to preview changes on their branch:
194
+
195
+ 1. Checkout their branch: `git checkout tokens-update`
196
+ 2. Build tokens and changelog: `npm run build`
197
+ 3. Check `dist/CHANGELOG.txt` for summary of changes (added/removed/changed tokens)
198
+ 4. Copy/paste the latest changelog entry (top of file) to UX team on Slack
199
+ 5. Discard changes: `git checkout dist/`
200
+ 6. If everything looks good, UX team can create Pull Request
190
201
 
191
202
  #### For Developers (publishing new version)
192
203
 
package/dist/CHANGELOG.txt CHANGED
@@ -1,3 +1,78 @@
1
+ === 08.01.2026, 09:20:50 [620f04e3] - MAJOR - npm: v4.0.0 ===
2
+
3
+ ADDED
4
+ component-media-border-radius
5
+ component-media-brand-border-radius
6
+ component-media-brand-gap
7
+ component-media-brand-image-container-size-height
8
+ component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align
9
+ component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align
10
+ component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align
11
+ component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align
12
+ component-media-brand-inner-inner-credit-container-padding
13
+ component-media-brand-inner-inner-credit-container-vector-height
14
+ component-media-brand-inner-inner-credit-container-vector-width
15
+ component-media-padding
16
+
17
+ REMOVED
18
+ component-media-module-border-radius
19
+ component-media-module-gap
20
+ component-media-module-image-container-size-height
21
+ component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align
22
+ component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align
23
+ component-media-module-inner-inner-credit-container-border-radius-top-left-right-align
24
+ component-media-module-inner-inner-credit-container-border-radius-top-right-left-align
25
+ component-media-module-inner-inner-credit-container-padding
26
+ component-media-module-inner-inner-credit-container-vector-height
27
+ component-media-module-inner-inner-credit-container-vector-width
28
+
29
+ === 22.12.2025, 11:32:19 [13b106f4] - MAJOR - npm: v3.0.0 ===
30
+
31
+ ADDED
32
+ component-content-island-background-color-neutral
33
+ component-content-island-border-color-brand-tone-a
34
+ component-content-island-border-color-brand-tone-b
35
+ component-content-island-border-color-neutral
36
+ component-content-island-border-radius
37
+ component-content-island-gap
38
+ component-content-island-inner-container-gap
39
+ component-content-island-inner-container-text-container-padding-left
40
+ component-content-island-padding-block
41
+ component-content-island-padding-inline
42
+ groups-content-islands-color-aubergine-150
43
+ groups-content-islands-color-aubergine-50
44
+ groups-content-islands-color-concrete-25
45
+ groups-content-islands-color-concrete-50
46
+ groups-content-islands-space-medium
47
+ groups-content-islands-space-small
48
+ groups-content-islands-space-xlarge
49
+ groups-content-islands-space-xsmall
50
+ groups-content-islands-space-xxsmall
51
+ groups-content-islands-stroke
52
+
53
+ REMOVED
54
+ component-pagination-background-color-neutral
55
+ component-pagination-border-color-brand-tone-a
56
+ component-pagination-border-color-brand-tone-b
57
+ component-pagination-border-color-neutral-tone-a
58
+ component-pagination-container-gap
59
+ component-pagination-gap
60
+ component-pagination-padding-block-left
61
+ component-pagination-padding-block-right
62
+ component-pagination-padding-inline
63
+ groups-pagination-color-aubergine-150
64
+ groups-pagination-color-aubergine-50
65
+ groups-pagination-color-concrete-25
66
+ groups-pagination-color-concrete-50
67
+ groups-pagination-space-medium
68
+ groups-pagination-space-small
69
+ groups-pagination-space-xlarge
70
+ groups-pagination-space-xxsmall
71
+ groups-pagination-stroke
72
+ layout-island-background-color
73
+ layout-island-border-color-brand-tone-a
74
+ layout-island-border-color-neutral
75
+
1
76
  === 19.12.2025, 16:14:53 [1a5ee550] - MAJOR - npm: v2.0.0 ===
2
77
 
3
78
  ADDED
@@ -26,7 +101,7 @@ component-text-body-text-weight
26
101
  groups-pagination-space-large
27
102
 
28
103
  CHANGED
29
- component-pagination-padding-inline|var(--kobber-groups-pagination-space-medium)|var(--kobber-groups-pagination-space-xxsmall)
104
+ component-pagination-padding-inline
30
105
 
31
106
  === 19.12.2025, 13:06:37 [016b64de] - MAJOR - npm: v1.0.0 ===
32
107
 
package/dist/k-tokens.css CHANGED
@@ -263,15 +263,14 @@
263
263
  --k-groups-cards-and-modules-color-aubergine-1000-20: var(--k-primitives-color-aubergine-1000-20);
264
264
  --k-groups-cards-and-modules-color-neutral-1000-10: var(--k-primitives-color-concrete-1000-10);
265
265
  --k-groups-filters-color-carmine-1000-10: var(--k-primitives-color-carmine-1000-10);
266
- --k-groups-pagination-color-concrete-50: var(--k-primitives-color-concrete-1000-10);
267
- --k-groups-pagination-color-aubergine-50: var(--k-primitives-color-aubergine-850-10);
268
- --k-groups-pagination-color-aubergine-150: var(--k-primitives-color-aubergine-25-20);
266
+ --k-groups-content-islands-color-concrete-50: var(--k-primitives-color-concrete-1000-10);
267
+ --k-groups-content-islands-color-aubergine-50: var(--k-primitives-color-aubergine-850-10);
268
+ --k-groups-content-islands-color-aubergine-150: var(--k-primitives-color-aubergine-25-20);
269
269
  --k-component-text-label-text-weight: var(--k-semantics-typography-regular);
270
270
  --k-component-text-body-text-weight-brand: var(--k-semantics-typography-regular);
271
271
  --k-component-text-body-text-weight-reading-regular: var(--k-semantics-typography-regular);
272
272
  --k-component-text-body-text-weight-reading-italic: var(--k-semantics-typography-italic);
273
273
  --k-component-text-display-extended-text-weight-alt2: var(--k-semantics-typography-light);
274
- --k-layout-island-border-color-brand-tone-a: var(--k-primitives-color-aubergine-850-10);
275
274
  --k-semantics-typography-font-family-inter: var(--k-primitives-font-family-inter);
276
275
  --k-semantics-typography-font-family-lyon-display: var(--k-primitives-font-family-lyon-display);
277
276
  --k-semantics-typography-font-family-pp-mori: var(--k-primitives-font-family-pp-mori);
@@ -691,12 +690,13 @@
691
690
  --k-groups-text-blocks-color-vacation-25: var(--k-semantics-color-theme-vacation-vacation-25);
692
691
  --k-groups-text-blocks-color-nostalgia-600: var(--k-semantics-color-theme-nostalgia-nostalgia-600);
693
692
  --k-groups-text-blocks-color-nostalgia-25: var(--k-semantics-color-theme-nostalgia-nostalgia-25);
694
- --k-groups-pagination-color-concrete-25: var(--k-semantics-color-identity-neutral-concrete-25);
695
- --k-groups-pagination-space-medium: var(--k-semantics-layout-element-space-medium);
696
- --k-groups-pagination-space-small: var(--k-semantics-layout-element-space-small);
697
- --k-groups-pagination-space-xlarge: var(--k-semantics-layout-element-space-xlarge);
698
- --k-groups-pagination-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
699
- --k-groups-pagination-stroke: var(--k-semantics-layout-element-stroke-fat);
693
+ --k-groups-content-islands-color-concrete-25: var(--k-semantics-color-identity-neutral-concrete-25);
694
+ --k-groups-content-islands-space-medium: var(--k-semantics-layout-element-space-medium);
695
+ --k-groups-content-islands-space-small: var(--k-semantics-layout-element-space-small);
696
+ --k-groups-content-islands-space-xlarge: var(--k-semantics-layout-element-space-xlarge);
697
+ --k-groups-content-islands-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
698
+ --k-groups-content-islands-space-xsmall: var(--k-semantics-layout-element-space-xsmall);
699
+ --k-groups-content-islands-stroke: var(--k-semantics-layout-element-stroke-fat);
700
700
  --k-component-button-background-color-brand-primary-tone-a-hover: var(--k-groups-buttons-color-carmine-transparent-dark);
701
701
  --k-component-button-background-color-brand-secondary-tone-b-hover: var(--k-groups-buttons-color-aubergine-transparent-darkest);
702
702
  --k-component-button-background-color-brand-secondary-tone-a-hover: var(--k-groups-buttons-color-aubergine-transparent-brightest);
@@ -789,9 +789,9 @@
789
789
  --k-component-text-display-extended-text-font-alt2: var(--k-semantics-typography-font-family-lyon-display);
790
790
  --k-component-text-display-extended-text-font-alt1: var(--k-semantics-typography-font-family-pp-mori);
791
791
  --k-component-text-display-padding-bottom: var(--k-semantics-layout-element-space-xsmall);
792
- --k-component-pagination-border-color-neutral-tone-a: var(--k-groups-pagination-color-concrete-50);
793
- --k-component-pagination-border-color-brand-tone-b: var(--k-groups-pagination-color-aubergine-150);
794
- --k-component-pagination-border-color-brand-tone-a: var(--k-groups-pagination-color-aubergine-50);
792
+ --k-component-content-island-border-color-neutral: var(--k-groups-content-islands-color-concrete-50);
793
+ --k-component-content-island-border-color-brand-tone-b: var(--k-groups-content-islands-color-aubergine-150);
794
+ --k-component-content-island-border-color-brand-tone-a: var(--k-groups-content-islands-color-aubergine-50);
795
795
  --k-universal-focus-border-radius-xsmall: var(--k-semantics-layout-element-radius-xsmall);
796
796
  --k-universal-focus-border-radius-medium: var(--k-semantics-layout-element-radius-medium);
797
797
  --k-universal-focus-border-radius-large: var(--k-semantics-layout-element-radius-large);
@@ -818,8 +818,6 @@
818
818
  --k-layout-content-wrapper-size-max-width: var(--k-semantics-layout-container-size-xlarge);
819
819
  --k-layout-text-block-gap: var(--k-semantics-layout-element-space-xsmall);
820
820
  --k-layout-content-top-block-gap: var(--k-semantics-layout-element-space-medium);
821
- --k-layout-island-background-color: var(--k-semantics-color-identity-neutral-concrete-25);
822
- --k-layout-island-border-color-neutral: var(--k-semantics-color-identity-neutral-concrete-50);
823
821
  --k-semantics-typography-space-large: var(--k-semantics-layout-element-space-large);
824
822
  --k-semantics-typography-space-medium: var(--k-semantics-layout-element-space-medium);
825
823
  --k-semantics-typography-space-small: var(--k-semantics-layout-element-space-xsmall);
@@ -1383,16 +1381,16 @@
1383
1381
  --k-component-list-gap-ordered-large: var(--k-groups-text-blocks-space-xsmall);
1384
1382
  --k-component-list-gap-unordered-medium: var(--k-groups-text-blocks-space-xsmall);
1385
1383
  --k-component-list-gap-unordered-large: var(--k-groups-text-blocks-space-small);
1386
- --k-component-media-module-gap: var(--k-groups-cards-and-modules-space-large);
1387
- --k-component-media-module-inner-inner-credit-container-border-radius-top-left-right-align: var(--k-groups-cards-and-modules-radius-large);
1388
- --k-component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--k-groups-cards-and-modules-radius-large);
1389
- --k-component-media-module-inner-inner-credit-container-border-radius-top-right-left-align: var(--k-groups-cards-and-modules-radius-large);
1390
- --k-component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--k-groups-cards-and-modules-radius-large);
1391
- --k-component-media-module-inner-inner-credit-container-vector-width: var(--k-groups-cards-and-modules-size-element-small);
1392
- --k-component-media-module-inner-inner-credit-container-vector-height: var(--k-groups-cards-and-modules-size-element-small);
1393
- --k-component-media-module-inner-inner-credit-container-padding: var(--k-groups-cards-and-modules-space-xlarge);
1394
- --k-component-media-module-border-radius: var(--k-groups-cards-and-modules-radius-large);
1395
- --k-component-media-module-image-container-size-height: var(--k-groups-cards-and-modules-size-visual-image);
1384
+ --k-component-media-brand-gap: var(--k-groups-cards-and-modules-space-large);
1385
+ --k-component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align: var(--k-groups-cards-and-modules-radius-large);
1386
+ --k-component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--k-groups-cards-and-modules-radius-large);
1387
+ --k-component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align: var(--k-groups-cards-and-modules-radius-large);
1388
+ --k-component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--k-groups-cards-and-modules-radius-large);
1389
+ --k-component-media-brand-inner-inner-credit-container-vector-width: var(--k-groups-cards-and-modules-size-element-small);
1390
+ --k-component-media-brand-inner-inner-credit-container-vector-height: var(--k-groups-cards-and-modules-size-element-small);
1391
+ --k-component-media-brand-inner-inner-credit-container-padding: var(--k-groups-cards-and-modules-space-xlarge);
1392
+ --k-component-media-brand-border-radius: var(--k-groups-cards-and-modules-radius-large);
1393
+ --k-component-media-brand-image-container-size-height: var(--k-groups-cards-and-modules-size-visual-image);
1396
1394
  --k-component-content-card-gap-subtle: var(--k-groups-cards-and-modules-space-small);
1397
1395
  --k-component-content-card-gap-prominent: var(--k-groups-cards-and-modules-space-large);
1398
1396
  --k-component-content-card-image-container-border-radius-subtle: var(--k-groups-cards-and-modules-radius-small);
@@ -1545,12 +1543,15 @@
1545
1543
  --k-component-dropdown-item-background-color-pressed: var(--k-groups-menus-color-wine-50);
1546
1544
  --k-component-dropdown-item-background-color-hover: var(--k-groups-menus-color-aubergine-50);
1547
1545
  --k-component-dropdown-item-border-radius: var(--k-groups-menus-radius-medium);
1548
- --k-component-pagination-container-gap: var(--k-groups-pagination-space-medium);
1549
- --k-component-pagination-gap: var(--k-groups-pagination-space-xlarge);
1550
- --k-component-pagination-padding-block-right: var(--k-groups-pagination-space-xxsmall);
1551
- --k-component-pagination-padding-block-left: var(--k-groups-pagination-space-small);
1552
- --k-component-pagination-padding-inline: var(--k-groups-pagination-space-xxsmall);
1553
- --k-component-pagination-background-color-neutral: var(--k-groups-pagination-color-concrete-25);
1546
+ --k-component-content-island-gap: var(--k-groups-content-islands-space-xlarge);
1547
+ --k-component-content-island-padding-block: var(--k-groups-content-islands-space-xxsmall);
1548
+ --k-component-content-island-padding-inline: var(--k-groups-content-islands-space-xxsmall);
1549
+ --k-component-content-island-background-color-neutral: var(--k-groups-content-islands-color-concrete-25);
1550
+ --k-component-content-island-border-radius: var(--k-groups-content-islands-space-xsmall);
1551
+ --k-component-content-island-inner-container-gap: var(--k-groups-content-islands-space-medium);
1552
+ --k-component-content-island-inner-container-text-container-padding-left: var(--k-groups-content-islands-space-xsmall);
1553
+ --k-component-media-padding: var(--k-groups-cards-and-modules-space-large);
1554
+ --k-component-media-border-radius: var(--k-groups-cards-and-modules-radius-small);
1554
1555
  --k-universal-hyperlink-text-color-fallback: var(--k-semantics-typography-color-brand-carmine-525);
1555
1556
  --k-layout-text-wrapper-gap-horizontal: var(--k-semantics-typography-space-medium);
1556
1557
  --k-layout-main-gap-min: var(--k-groups-responsivness-space-small);
package/dist/tokens.css CHANGED
@@ -263,15 +263,14 @@
263
263
  --kobber-groups-cards-and-modules-color-aubergine-1000-20: var(--kobber-primitives-color-aubergine-1000-20);
264
264
  --kobber-groups-cards-and-modules-color-neutral-1000-10: var(--kobber-primitives-color-concrete-1000-10);
265
265
  --kobber-groups-filters-color-carmine-1000-10: var(--kobber-primitives-color-carmine-1000-10);
266
- --kobber-groups-pagination-color-concrete-50: var(--kobber-primitives-color-concrete-1000-10);
267
- --kobber-groups-pagination-color-aubergine-50: var(--kobber-primitives-color-aubergine-850-10);
268
- --kobber-groups-pagination-color-aubergine-150: var(--kobber-primitives-color-aubergine-25-20);
266
+ --kobber-groups-content-islands-color-concrete-50: var(--kobber-primitives-color-concrete-1000-10);
267
+ --kobber-groups-content-islands-color-aubergine-50: var(--kobber-primitives-color-aubergine-850-10);
268
+ --kobber-groups-content-islands-color-aubergine-150: var(--kobber-primitives-color-aubergine-25-20);
269
269
  --kobber-component-text-label-text-weight: var(--kobber-semantics-typography-regular);
270
270
  --kobber-component-text-body-text-weight-brand: var(--kobber-semantics-typography-regular);
271
271
  --kobber-component-text-body-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
272
272
  --kobber-component-text-body-text-weight-reading-italic: var(--kobber-semantics-typography-italic);
273
273
  --kobber-component-text-display-extended-text-weight-alt2: var(--kobber-semantics-typography-light);
274
- --kobber-layout-island-border-color-brand-tone-a: var(--kobber-primitives-color-aubergine-850-10);
275
274
  --kobber-semantics-typography-font-family-inter: var(--kobber-primitives-font-family-inter);
276
275
  --kobber-semantics-typography-font-family-lyon-display: var(--kobber-primitives-font-family-lyon-display);
277
276
  --kobber-semantics-typography-font-family-pp-mori: var(--kobber-primitives-font-family-pp-mori);
@@ -691,12 +690,13 @@
691
690
  --kobber-groups-text-blocks-color-vacation-25: var(--kobber-semantics-color-theme-vacation-vacation-25);
692
691
  --kobber-groups-text-blocks-color-nostalgia-600: var(--kobber-semantics-color-theme-nostalgia-nostalgia-600);
693
692
  --kobber-groups-text-blocks-color-nostalgia-25: var(--kobber-semantics-color-theme-nostalgia-nostalgia-25);
694
- --kobber-groups-pagination-color-concrete-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
695
- --kobber-groups-pagination-space-medium: var(--kobber-semantics-layout-element-space-medium);
696
- --kobber-groups-pagination-space-small: var(--kobber-semantics-layout-element-space-small);
697
- --kobber-groups-pagination-space-xlarge: var(--kobber-semantics-layout-element-space-xlarge);
698
- --kobber-groups-pagination-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
699
- --kobber-groups-pagination-stroke: var(--kobber-semantics-layout-element-stroke-fat);
693
+ --kobber-groups-content-islands-color-concrete-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
694
+ --kobber-groups-content-islands-space-medium: var(--kobber-semantics-layout-element-space-medium);
695
+ --kobber-groups-content-islands-space-small: var(--kobber-semantics-layout-element-space-small);
696
+ --kobber-groups-content-islands-space-xlarge: var(--kobber-semantics-layout-element-space-xlarge);
697
+ --kobber-groups-content-islands-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
698
+ --kobber-groups-content-islands-space-xsmall: var(--kobber-semantics-layout-element-space-xsmall);
699
+ --kobber-groups-content-islands-stroke: var(--kobber-semantics-layout-element-stroke-fat);
700
700
  --kobber-component-button-background-color-brand-primary-tone-a-hover: var(--kobber-groups-buttons-color-carmine-transparent-dark);
701
701
  --kobber-component-button-background-color-brand-secondary-tone-b-hover: var(--kobber-groups-buttons-color-aubergine-transparent-darkest);
702
702
  --kobber-component-button-background-color-brand-secondary-tone-a-hover: var(--kobber-groups-buttons-color-aubergine-transparent-brightest);
@@ -789,9 +789,9 @@
789
789
  --kobber-component-text-display-extended-text-font-alt2: var(--kobber-semantics-typography-font-family-lyon-display);
790
790
  --kobber-component-text-display-extended-text-font-alt1: var(--kobber-semantics-typography-font-family-pp-mori);
791
791
  --kobber-component-text-display-padding-bottom: var(--kobber-semantics-layout-element-space-xsmall);
792
- --kobber-component-pagination-border-color-neutral-tone-a: var(--kobber-groups-pagination-color-concrete-50);
793
- --kobber-component-pagination-border-color-brand-tone-b: var(--kobber-groups-pagination-color-aubergine-150);
794
- --kobber-component-pagination-border-color-brand-tone-a: var(--kobber-groups-pagination-color-aubergine-50);
792
+ --kobber-component-content-island-border-color-neutral: var(--kobber-groups-content-islands-color-concrete-50);
793
+ --kobber-component-content-island-border-color-brand-tone-b: var(--kobber-groups-content-islands-color-aubergine-150);
794
+ --kobber-component-content-island-border-color-brand-tone-a: var(--kobber-groups-content-islands-color-aubergine-50);
795
795
  --kobber-universal-focus-border-radius-xsmall: var(--kobber-semantics-layout-element-radius-xsmall);
796
796
  --kobber-universal-focus-border-radius-medium: var(--kobber-semantics-layout-element-radius-medium);
797
797
  --kobber-universal-focus-border-radius-large: var(--kobber-semantics-layout-element-radius-large);
@@ -818,8 +818,6 @@
818
818
  --kobber-layout-content-wrapper-size-max-width: var(--kobber-semantics-layout-container-size-xlarge);
819
819
  --kobber-layout-text-block-gap: var(--kobber-semantics-layout-element-space-xsmall);
820
820
  --kobber-layout-content-top-block-gap: var(--kobber-semantics-layout-element-space-medium);
821
- --kobber-layout-island-background-color: var(--kobber-semantics-color-identity-neutral-concrete-25);
822
- --kobber-layout-island-border-color-neutral: var(--kobber-semantics-color-identity-neutral-concrete-50);
823
821
  --kobber-semantics-typography-space-large: var(--kobber-semantics-layout-element-space-large);
824
822
  --kobber-semantics-typography-space-medium: var(--kobber-semantics-layout-element-space-medium);
825
823
  --kobber-semantics-typography-space-small: var(--kobber-semantics-layout-element-space-xsmall);
@@ -1383,16 +1381,16 @@
1383
1381
  --kobber-component-list-gap-ordered-large: var(--kobber-groups-text-blocks-space-xsmall);
1384
1382
  --kobber-component-list-gap-unordered-medium: var(--kobber-groups-text-blocks-space-xsmall);
1385
1383
  --kobber-component-list-gap-unordered-large: var(--kobber-groups-text-blocks-space-small);
1386
- --kobber-component-media-module-gap: var(--kobber-groups-cards-and-modules-space-large);
1387
- --kobber-component-media-module-inner-inner-credit-container-border-radius-top-left-right-align: var(--kobber-groups-cards-and-modules-radius-large);
1388
- --kobber-component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--kobber-groups-cards-and-modules-radius-large);
1389
- --kobber-component-media-module-inner-inner-credit-container-border-radius-top-right-left-align: var(--kobber-groups-cards-and-modules-radius-large);
1390
- --kobber-component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--kobber-groups-cards-and-modules-radius-large);
1391
- --kobber-component-media-module-inner-inner-credit-container-vector-width: var(--kobber-groups-cards-and-modules-size-element-small);
1392
- --kobber-component-media-module-inner-inner-credit-container-vector-height: var(--kobber-groups-cards-and-modules-size-element-small);
1393
- --kobber-component-media-module-inner-inner-credit-container-padding: var(--kobber-groups-cards-and-modules-space-xlarge);
1394
- --kobber-component-media-module-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
1395
- --kobber-component-media-module-image-container-size-height: var(--kobber-groups-cards-and-modules-size-visual-image);
1384
+ --kobber-component-media-brand-gap: var(--kobber-groups-cards-and-modules-space-large);
1385
+ --kobber-component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align: var(--kobber-groups-cards-and-modules-radius-large);
1386
+ --kobber-component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--kobber-groups-cards-and-modules-radius-large);
1387
+ --kobber-component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align: var(--kobber-groups-cards-and-modules-radius-large);
1388
+ --kobber-component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--kobber-groups-cards-and-modules-radius-large);
1389
+ --kobber-component-media-brand-inner-inner-credit-container-vector-width: var(--kobber-groups-cards-and-modules-size-element-small);
1390
+ --kobber-component-media-brand-inner-inner-credit-container-vector-height: var(--kobber-groups-cards-and-modules-size-element-small);
1391
+ --kobber-component-media-brand-inner-inner-credit-container-padding: var(--kobber-groups-cards-and-modules-space-xlarge);
1392
+ --kobber-component-media-brand-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
1393
+ --kobber-component-media-brand-image-container-size-height: var(--kobber-groups-cards-and-modules-size-visual-image);
1396
1394
  --kobber-component-content-card-gap-subtle: var(--kobber-groups-cards-and-modules-space-small);
1397
1395
  --kobber-component-content-card-gap-prominent: var(--kobber-groups-cards-and-modules-space-large);
1398
1396
  --kobber-component-content-card-image-container-border-radius-subtle: var(--kobber-groups-cards-and-modules-radius-small);
@@ -1545,12 +1543,15 @@
1545
1543
  --kobber-component-dropdown-item-background-color-pressed: var(--kobber-groups-menus-color-wine-50);
1546
1544
  --kobber-component-dropdown-item-background-color-hover: var(--kobber-groups-menus-color-aubergine-50);
1547
1545
  --kobber-component-dropdown-item-border-radius: var(--kobber-groups-menus-radius-medium);
1548
- --kobber-component-pagination-container-gap: var(--kobber-groups-pagination-space-medium);
1549
- --kobber-component-pagination-gap: var(--kobber-groups-pagination-space-xlarge);
1550
- --kobber-component-pagination-padding-block-right: var(--kobber-groups-pagination-space-xxsmall);
1551
- --kobber-component-pagination-padding-block-left: var(--kobber-groups-pagination-space-small);
1552
- --kobber-component-pagination-padding-inline: var(--kobber-groups-pagination-space-xxsmall);
1553
- --kobber-component-pagination-background-color-neutral: var(--kobber-groups-pagination-color-concrete-25);
1546
+ --kobber-component-content-island-gap: var(--kobber-groups-content-islands-space-xlarge);
1547
+ --kobber-component-content-island-padding-block: var(--kobber-groups-content-islands-space-xxsmall);
1548
+ --kobber-component-content-island-padding-inline: var(--kobber-groups-content-islands-space-xxsmall);
1549
+ --kobber-component-content-island-background-color-neutral: var(--kobber-groups-content-islands-color-concrete-25);
1550
+ --kobber-component-content-island-border-radius: var(--kobber-groups-content-islands-space-xsmall);
1551
+ --kobber-component-content-island-inner-container-gap: var(--kobber-groups-content-islands-space-medium);
1552
+ --kobber-component-content-island-inner-container-text-container-padding-left: var(--kobber-groups-content-islands-space-xsmall);
1553
+ --kobber-component-media-padding: var(--kobber-groups-cards-and-modules-space-large);
1554
+ --kobber-component-media-border-radius: var(--kobber-groups-cards-and-modules-radius-small);
1554
1555
  --kobber-universal-hyperlink-text-color-fallback: var(--kobber-semantics-typography-color-brand-carmine-525);
1555
1556
  --kobber-layout-text-wrapper-gap-horizontal: var(--kobber-semantics-typography-space-medium);
1556
1557
  --kobber-layout-main-gap-min: var(--kobber-groups-responsivness-space-small);
package/dist/tokens.d.ts CHANGED
@@ -800,7 +800,7 @@ export const groups: {
800
800
  "content": {
801
801
  "element": {}
802
802
  },
803
- "pagination": {
803
+ "contentIslands": {
804
804
  "color": {
805
805
  "concrete-25": "#f9fafb",
806
806
  "concrete-50": "#0f11141a",
@@ -811,7 +811,8 @@ export const groups: {
811
811
  "medium": 16,
812
812
  "small": 12,
813
813
  "xlarge": 32,
814
- "xxsmall": 4
814
+ "xxsmall": 4,
815
+ "xsmall": 8
815
816
  },
816
817
  "stroke": 4
817
818
  }
@@ -2390,7 +2391,7 @@ export const component: {
2390
2391
  }
2391
2392
  }
2392
2393
  },
2393
- "mediaModule": {
2394
+ "mediaBrand": {
2394
2395
  "gap": 16,
2395
2396
  "innerInnerCreditContainer": {
2396
2397
  "borderRadius": {
@@ -2934,16 +2935,10 @@ export const component: {
2934
2935
  "radius": 8
2935
2936
  }
2936
2937
  },
2937
- "pagination": {
2938
- "container": {
2939
- "gap": 16
2940
- },
2938
+ "contentIsland": {
2941
2939
  "gap": 32,
2942
2940
  "padding": {
2943
- "block": {
2944
- "right": 4,
2945
- "left": 12
2946
- },
2941
+ "block": 4,
2947
2942
  "inline": 4
2948
2943
  },
2949
2944
  "background": {
@@ -2953,15 +2948,28 @@ export const component: {
2953
2948
  },
2954
2949
  "border": {
2955
2950
  "color": {
2956
- "neutral": {
2957
- "toneA": "#0f11141a"
2958
- },
2951
+ "neutral": "#0f11141a",
2959
2952
  "brand": {
2960
2953
  "toneB": "#fdf9f933",
2961
2954
  "toneA": "#4811251a"
2962
2955
  }
2956
+ },
2957
+ "radius": 8
2958
+ },
2959
+ "innerContainer": {
2960
+ "gap": 16,
2961
+ "textContainer": {
2962
+ "padding": {
2963
+ "left": 8
2964
+ }
2963
2965
  }
2964
2966
  }
2967
+ },
2968
+ "media": {
2969
+ "padding": 16,
2970
+ "border": {
2971
+ "radius": 8
2972
+ }
2965
2973
  }
2966
2974
  };
2967
2975
 
@@ -3079,19 +3087,6 @@ export const layout: {
3079
3087
  },
3080
3088
  "contentTopBlock": {
3081
3089
  "gap": 16
3082
- },
3083
- "island": {
3084
- "background": {
3085
- "color": "#f9fafb"
3086
- },
3087
- "border": {
3088
- "color": {
3089
- "neutral": "#eceef1",
3090
- "brand": {
3091
- "toneA": "#4811251a"
3092
- }
3093
- }
3094
- }
3095
3090
  }
3096
3091
  };
3097
3092
 
package/dist/tokens.js CHANGED
@@ -799,7 +799,7 @@ export const groups = {
799
799
  "content": {
800
800
  "element": {}
801
801
  },
802
- "pagination": {
802
+ "contentIslands": {
803
803
  "color": {
804
804
  "concrete-25": "#f9fafb",
805
805
  "concrete-50": "#0f11141a",
@@ -810,7 +810,8 @@ export const groups = {
810
810
  "medium": 16,
811
811
  "small": 12,
812
812
  "xlarge": 32,
813
- "xxsmall": 4
813
+ "xxsmall": 4,
814
+ "xsmall": 8
814
815
  },
815
816
  "stroke": 4
816
817
  }
@@ -2389,7 +2390,7 @@ export const component = {
2389
2390
  }
2390
2391
  }
2391
2392
  },
2392
- "mediaModule": {
2393
+ "mediaBrand": {
2393
2394
  "gap": 16,
2394
2395
  "innerInnerCreditContainer": {
2395
2396
  "borderRadius": {
@@ -2933,16 +2934,10 @@ export const component = {
2933
2934
  "radius": 8
2934
2935
  }
2935
2936
  },
2936
- "pagination": {
2937
- "container": {
2938
- "gap": 16
2939
- },
2937
+ "contentIsland": {
2940
2938
  "gap": 32,
2941
2939
  "padding": {
2942
- "block": {
2943
- "right": 4,
2944
- "left": 12
2945
- },
2940
+ "block": 4,
2946
2941
  "inline": 4
2947
2942
  },
2948
2943
  "background": {
@@ -2952,15 +2947,28 @@ export const component = {
2952
2947
  },
2953
2948
  "border": {
2954
2949
  "color": {
2955
- "neutral": {
2956
- "toneA": "#0f11141a"
2957
- },
2950
+ "neutral": "#0f11141a",
2958
2951
  "brand": {
2959
2952
  "toneB": "#fdf9f933",
2960
2953
  "toneA": "#4811251a"
2961
2954
  }
2955
+ },
2956
+ "radius": 8
2957
+ },
2958
+ "innerContainer": {
2959
+ "gap": 16,
2960
+ "textContainer": {
2961
+ "padding": {
2962
+ "left": 8
2963
+ }
2962
2964
  }
2963
2965
  }
2966
+ },
2967
+ "media": {
2968
+ "padding": 16,
2969
+ "border": {
2970
+ "radius": 8
2971
+ }
2964
2972
  }
2965
2973
  };
2966
2974
 
@@ -3078,19 +3086,6 @@ export const layout = {
3078
3086
  },
3079
3087
  "contentTopBlock": {
3080
3088
  "gap": 16
3081
- },
3082
- "island": {
3083
- "background": {
3084
- "color": "#f9fafb"
3085
- },
3086
- "border": {
3087
- "color": {
3088
- "neutral": "#eceef1",
3089
- "brand": {
3090
- "toneA": "#4811251a"
3091
- }
3092
- }
3093
- }
3094
3089
  }
3095
3090
  };
3096
3091
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gyldendal/kobber-tokens",
3
- "version": "2.0.0",
3
+ "version": "4.0.0",
4
4
  "description": "Gyldendal Kobber design tokens",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,
@@ -18,7 +18,9 @@
18
18
  "./k-tokens.css": "./dist/k-tokens.css",
19
19
  "./CHANGELOG.txt": "./dist/CHANGELOG.txt"
20
20
  },
21
- "files": ["dist"],
21
+ "files": [
22
+ "dist"
23
+ ],
22
24
  "publishConfig": {
23
25
  "access": "public"
24
26
  },
@@ -29,7 +31,7 @@
29
31
  "quality-check": "tsc --noEmit && biome check --write ."
30
32
  },
31
33
  "devDependencies": {
32
- "@biomejs/biome": "^1.9.4",
34
+ "@biomejs/biome": "^2.3.11",
33
35
  "@types/node": "^22",
34
36
  "style-dictionary": "^5.1.1",
35
37
  "tsx": "^4.19.4",