@gyldendal/kobber-tokens 4.0.0 → 5.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 +1 -1
  2. package/dist/CHANGELOG.txt +56 -0
  3. package/dist/k-tokens.css +42 -17
  4. package/dist/tokens.css +42 -17
  5. package/dist/tokens.d.ts +72 -14
  6. package/dist/tokens.js +72 -14
  7. package/package.json +3 -2
package/README.md CHANGED
@@ -201,7 +201,7 @@ When UX team asks you to preview changes on their branch:
201
201
 
202
202
  #### For Developers (publishing new version)
203
203
 
204
- 1. Merge the UX team's PR to `main`
204
+ 1. In GitHub, merge the UX team's PR to `main`
205
205
  2. Pull latest changes: `git checkout main && git pull`
206
206
  3. Build tokens: `npm run build`
207
207
  4. Check `dist/CHANGELOG.txt` for changes:
package/dist/CHANGELOG.txt CHANGED
@@ -1,3 +1,59 @@
1
+ === 19.01.2026, 07:54:58 [9d41772d] - MAJOR - npm: v5.0.0 ===
2
+
3
+ ADDED
4
+ color-meta-layout-markering
5
+ component-button-group-gap
6
+ component-media-gap
7
+ component-text-body-text-weight-reading-bold
8
+ component-text-lead-text-weight-reading-italic
9
+ component-text-lead-text-weight-reading-regular
10
+ component-text-title-text-weight-reading-italic
11
+ component-text-title-text-weight-reading-regular
12
+ layout-content-wrapper-padding-inline-overlay
13
+ layout-content-wrapper-padding-inline-page
14
+ layout-flex-color-background-aubergine-25
15
+ layout-flex-color-background-aubergine-50
16
+ layout-flex-color-background-aubergine-850
17
+ layout-flex-corner-radius-large
18
+ layout-flex-corner-radius-medium
19
+ layout-flex-gap-large
20
+ layout-flex-gap-medium
21
+ layout-flex-gap-small
22
+ layout-flex-padding-large
23
+ layout-flex-padding-medium
24
+ layout-flex-padding-small
25
+ layout-flex-padding-xlarge
26
+ semantics-layout-container-radius-large
27
+ semantics-layout-container-radius-medium
28
+ semantics-layout-container-space-big
29
+ semantics-layout-container-space-tiny
30
+ semantics-layout-container-space-xlarge
31
+ semantics-layout-page-space-huge
32
+ semantics-layout-page-space-large
33
+ semantics-typography-bold
34
+ semantics-typography-regular-italic
35
+
36
+ REMOVED
37
+ component-media-padding
38
+ component-text-lead-text-weight
39
+ component-text-title-text-weight
40
+ layout-content-wrapper-padding-inline
41
+ semantics-layout-container-radius
42
+ semantics-typography-italic
43
+
44
+ CHANGED
45
+ component-text-body-text-weight-reading-italic
46
+ groups-responsivness-space-xlarge
47
+ layout-content-wrapper-border-radius-overlay
48
+ layout-content-wrapper-inner-container-gap
49
+ layout-content-wrapper-padding-block-overlay
50
+ layout-content-wrapper-padding-block-page
51
+ semantics-layout-container-space-large
52
+ semantics-layout-container-space-medium
53
+ semantics-layout-container-space-small
54
+ semantics-layout-container-space-xsmall
55
+ semantics-layout-page-space-xlarge
56
+
1
57
  === 08.01.2026, 09:20:50 [620f04e3] - MAJOR - npm: v4.0.0 ===
2
58
 
3
59
  ADDED
package/dist/k-tokens.css CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  .kobber-theme-default {
6
+ --k-color-meta-layout-markering: #5555ff;
6
7
  --k-primitives-color-concrete-25: #f9fafb;
7
8
  --k-primitives-color-concrete-50: #eceef1;
8
9
  --k-primitives-color-concrete-150: #cfd5dd;
@@ -222,14 +223,13 @@
222
223
  --k-component-quote-module-tone-a-brand: #ffffff;
223
224
  --k-component-text-label-text-line-height: auto;
224
225
  --k-component-text-heading-text-weight: book;
225
- --k-component-text-lead-text-weight: regular;
226
- --k-component-text-title-text-weight: regular;
227
226
  --k-component-text-display-text-weight: book;
228
227
  --k-universal-hyperlink-text-decoration-hover: underline;
229
228
  --k-semantics-typography-regular: regular;
230
229
  --k-semantics-typography-book: book;
231
230
  --k-semantics-typography-light: light;
232
- --k-semantics-typography-italic: italic;
231
+ --k-semantics-typography-regular-italic: italic;
232
+ --k-semantics-typography-bold: semibold;
233
233
  --k-semantics-visual-thumbnail: 0;
234
234
  --k-groups-buttons-color-aubergine-transparent-brightest: var(--k-primitives-color-aubergine-25-10);
235
235
  --k-groups-buttons-color-aubergine-transparent-midtone: var(--k-primitives-color-aubergine-850-10);
@@ -269,7 +269,12 @@
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
- --k-component-text-body-text-weight-reading-italic: var(--k-semantics-typography-italic);
272
+ --k-component-text-body-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
273
+ --k-component-text-body-text-weight-reading-bold: var(--k-semantics-typography-bold);
274
+ --k-component-text-lead-text-weight-reading-regular: var(--k-semantics-typography-regular);
275
+ --k-component-text-lead-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
276
+ --k-component-text-title-text-weight-reading-regular: var(--k-semantics-typography-regular);
277
+ --k-component-text-title-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
273
278
  --k-component-text-display-extended-text-weight-alt2: var(--k-semantics-typography-light);
274
279
  --k-semantics-typography-font-family-inter: var(--k-primitives-font-family-inter);
275
280
  --k-semantics-typography-font-family-lyon-display: var(--k-primitives-font-family-lyon-display);
@@ -369,9 +374,11 @@
369
374
  --k-semantics-color-theme-thriller-thriller-850: var(--k-primitives-color-thriller-850);
370
375
  --k-semantics-color-theme-thriller-thriller-250: var(--k-primitives-color-thriller-250);
371
376
  --k-semantics-color-theme-thriller-thriller-250-10: var(--k-primitives-color-thriller-250-10);
372
- --k-semantics-layout-page-space-xlarge: var(--k-primitives-size-128);
377
+ --k-semantics-layout-page-space-huge: var(--k-primitives-size-128);
373
378
  --k-semantics-layout-page-space-medium: var(--k-primitives-size-32);
374
379
  --k-semantics-layout-page-space-small: var(--k-primitives-size-16);
380
+ --k-semantics-layout-page-space-xlarge: var(--k-primitives-size-72);
381
+ --k-semantics-layout-page-space-large: var(--k-primitives-size-56);
375
382
  --k-semantics-layout-page-size-wide: var(--k-primitives-size-1600);
376
383
  --k-semantics-layout-page-size-small: var(--k-primitives-size-320);
377
384
  --k-semantics-layout-element-size-xlarge: var(--k-primitives-size-40);
@@ -411,11 +418,15 @@
411
418
  --k-semantics-layout-container-size-xsmall: var(--k-primitives-size-232);
412
419
  --k-semantics-layout-container-size-xxsmall: var(--k-primitives-size-224);
413
420
  --k-semantics-layout-container-size-large: var(--k-primitives-size-448);
414
- --k-semantics-layout-container-space-small: var(--k-primitives-size-48);
415
- --k-semantics-layout-container-space-medium: var(--k-primitives-size-56);
416
- --k-semantics-layout-container-space-large: var(--k-primitives-size-72);
417
- --k-semantics-layout-container-space-xsmall: var(--k-primitives-size-40);
418
- --k-semantics-layout-container-radius: var(--k-primitives-size-40);
421
+ --k-semantics-layout-container-space-xlarge: var(--k-primitives-size-48);
422
+ --k-semantics-layout-container-space-big: var(--k-primitives-size-56);
423
+ --k-semantics-layout-container-space-large: var(--k-primitives-size-40);
424
+ --k-semantics-layout-container-space-medium: var(--k-primitives-size-24);
425
+ --k-semantics-layout-container-space-small: var(--k-primitives-size-16);
426
+ --k-semantics-layout-container-space-xsmall: var(--k-primitives-size-12);
427
+ --k-semantics-layout-container-space-tiny: var(--k-primitives-size-8);
428
+ --k-semantics-layout-container-radius-large: var(--k-primitives-size-40);
429
+ --k-semantics-layout-container-radius-medium: var(--k-primitives-size-24);
419
430
  --k-semantics-visual-icon-size-large: var(--k-primitives-size-16);
420
431
  --k-semantics-visual-icon-size-medium: var(--k-primitives-size-12);
421
432
  --k-semantics-visual-icon-size-small: var(--k-primitives-size-10);
@@ -564,7 +575,7 @@
564
575
  --k-groups-alerts-size-height: var(--k-semantics-layout-element-size-xxxlarge);
565
576
  --k-groups-responsivness-space-small: var(--k-semantics-layout-page-space-small);
566
577
  --k-groups-responsivness-space-medium: var(--k-semantics-layout-page-space-medium);
567
- --k-groups-responsivness-space-xlarge: var(--k-semantics-layout-page-space-xlarge);
578
+ --k-groups-responsivness-space-xlarge: var(--k-semantics-layout-page-space-huge);
568
579
  --k-groups-responsivness-size-wide: var(--k-semantics-layout-page-size-wide);
569
580
  --k-groups-responsivness-size-small: var(--k-semantics-layout-page-size-small);
570
581
  --k-groups-menus-space-tiny: var(--k-semantics-layout-element-space-tiny);
@@ -807,17 +818,30 @@
807
818
  --k-universal-icon-package-container-size-medium: var(--k-semantics-visual-icon-size-medium);
808
819
  --k-universal-icon-package-container-size-large: var(--k-semantics-visual-icon-size-large);
809
820
  --k-universal-icon-package-container-size-small: var(--k-semantics-visual-icon-size-small);
810
- --k-layout-content-wrapper-padding-inline: var(--k-semantics-layout-container-space-medium);
811
- --k-layout-content-wrapper-padding-block-overlay: var(--k-semantics-layout-container-space-small);
812
- --k-layout-content-wrapper-padding-block-page: var(--k-semantics-layout-container-space-large);
813
- --k-layout-content-wrapper-inner-container-gap: var(--k-semantics-layout-container-space-xsmall);
814
- --k-layout-content-wrapper-border-radius-overlay: var(--k-semantics-layout-container-radius);
821
+ --k-layout-content-wrapper-padding-inline-page: var(--k-semantics-layout-page-space-large);
822
+ --k-layout-content-wrapper-padding-inline-overlay: var(--k-semantics-layout-container-space-big);
823
+ --k-layout-content-wrapper-padding-block-overlay: var(--k-semantics-layout-container-space-xlarge);
824
+ --k-layout-content-wrapper-padding-block-page: var(--k-semantics-layout-page-space-xlarge);
825
+ --k-layout-content-wrapper-inner-container-gap: var(--k-semantics-layout-container-space-large);
826
+ --k-layout-content-wrapper-border-radius-overlay: var(--k-semantics-layout-container-radius-large);
815
827
  --k-layout-content-wrapper-background-color-brand-tone-b: var(--k-semantics-color-identity-base-aubergine-25);
816
828
  --k-layout-content-wrapper-background-color-brand-tone-a: var(--k-semantics-color-identity-base-aubergine-850);
817
829
  --k-layout-content-wrapper-background-color-neutral: var(--k-semantics-color-identity-neutral-concrete-25);
818
830
  --k-layout-content-wrapper-size-max-width: var(--k-semantics-layout-container-size-xlarge);
819
831
  --k-layout-text-block-gap: var(--k-semantics-layout-element-space-xsmall);
820
832
  --k-layout-content-top-block-gap: var(--k-semantics-layout-element-space-medium);
833
+ --k-layout-flex-gap-small: var(--k-semantics-layout-container-space-tiny);
834
+ --k-layout-flex-gap-medium: var(--k-semantics-layout-container-space-medium);
835
+ --k-layout-flex-gap-large: var(--k-semantics-layout-container-space-large);
836
+ --k-layout-flex-padding-small: var(--k-semantics-layout-container-space-medium);
837
+ --k-layout-flex-padding-medium: var(--k-semantics-layout-container-space-large);
838
+ --k-layout-flex-padding-large: var(--k-semantics-layout-container-space-xlarge);
839
+ --k-layout-flex-padding-xlarge: var(--k-semantics-layout-container-space-big);
840
+ --k-layout-flex-corner-radius-large: var(--k-semantics-layout-container-radius-large);
841
+ --k-layout-flex-corner-radius-medium: var(--k-semantics-layout-container-radius-medium);
842
+ --k-layout-flex-color-background-aubergine-850: var(--k-semantics-color-identity-base-aubergine-850);
843
+ --k-layout-flex-color-background-aubergine-25: var(--k-semantics-color-identity-base-aubergine-25);
844
+ --k-layout-flex-color-background-aubergine-50: var(--k-semantics-color-identity-base-aubergine-50);
821
845
  --k-semantics-typography-space-large: var(--k-semantics-layout-element-space-large);
822
846
  --k-semantics-typography-space-medium: var(--k-semantics-layout-element-space-medium);
823
847
  --k-semantics-typography-space-small: var(--k-semantics-layout-element-space-xsmall);
@@ -1550,8 +1574,9 @@
1550
1574
  --k-component-content-island-border-radius: var(--k-groups-content-islands-space-xsmall);
1551
1575
  --k-component-content-island-inner-container-gap: var(--k-groups-content-islands-space-medium);
1552
1576
  --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
1577
  --k-component-media-border-radius: var(--k-groups-cards-and-modules-radius-small);
1578
+ --k-component-media-gap: var(--k-groups-cards-and-modules-space-large);
1579
+ --k-component-button-group-gap: var(--k-groups-buttons-space-small);
1555
1580
  --k-universal-hyperlink-text-color-fallback: var(--k-semantics-typography-color-brand-carmine-525);
1556
1581
  --k-layout-text-wrapper-gap-horizontal: var(--k-semantics-typography-space-medium);
1557
1582
  --k-layout-main-gap-min: var(--k-groups-responsivness-space-small);
package/dist/tokens.css CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  .kobber-theme-default {
6
+ --kobber-color-meta-layout-markering: #5555ff;
6
7
  --kobber-primitives-color-concrete-25: #f9fafb;
7
8
  --kobber-primitives-color-concrete-50: #eceef1;
8
9
  --kobber-primitives-color-concrete-150: #cfd5dd;
@@ -222,14 +223,13 @@
222
223
  --kobber-component-quote-module-tone-a-brand: #ffffff;
223
224
  --kobber-component-text-label-text-line-height: auto;
224
225
  --kobber-component-text-heading-text-weight: book;
225
- --kobber-component-text-lead-text-weight: regular;
226
- --kobber-component-text-title-text-weight: regular;
227
226
  --kobber-component-text-display-text-weight: book;
228
227
  --kobber-universal-hyperlink-text-decoration-hover: underline;
229
228
  --kobber-semantics-typography-regular: regular;
230
229
  --kobber-semantics-typography-book: book;
231
230
  --kobber-semantics-typography-light: light;
232
- --kobber-semantics-typography-italic: italic;
231
+ --kobber-semantics-typography-regular-italic: italic;
232
+ --kobber-semantics-typography-bold: semibold;
233
233
  --kobber-semantics-visual-thumbnail: 0;
234
234
  --kobber-groups-buttons-color-aubergine-transparent-brightest: var(--kobber-primitives-color-aubergine-25-10);
235
235
  --kobber-groups-buttons-color-aubergine-transparent-midtone: var(--kobber-primitives-color-aubergine-850-10);
@@ -269,7 +269,12 @@
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
- --kobber-component-text-body-text-weight-reading-italic: var(--kobber-semantics-typography-italic);
272
+ --kobber-component-text-body-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
273
+ --kobber-component-text-body-text-weight-reading-bold: var(--kobber-semantics-typography-bold);
274
+ --kobber-component-text-lead-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
275
+ --kobber-component-text-lead-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
276
+ --kobber-component-text-title-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
277
+ --kobber-component-text-title-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
273
278
  --kobber-component-text-display-extended-text-weight-alt2: var(--kobber-semantics-typography-light);
274
279
  --kobber-semantics-typography-font-family-inter: var(--kobber-primitives-font-family-inter);
275
280
  --kobber-semantics-typography-font-family-lyon-display: var(--kobber-primitives-font-family-lyon-display);
@@ -369,9 +374,11 @@
369
374
  --kobber-semantics-color-theme-thriller-thriller-850: var(--kobber-primitives-color-thriller-850);
370
375
  --kobber-semantics-color-theme-thriller-thriller-250: var(--kobber-primitives-color-thriller-250);
371
376
  --kobber-semantics-color-theme-thriller-thriller-250-10: var(--kobber-primitives-color-thriller-250-10);
372
- --kobber-semantics-layout-page-space-xlarge: var(--kobber-primitives-size-128);
377
+ --kobber-semantics-layout-page-space-huge: var(--kobber-primitives-size-128);
373
378
  --kobber-semantics-layout-page-space-medium: var(--kobber-primitives-size-32);
374
379
  --kobber-semantics-layout-page-space-small: var(--kobber-primitives-size-16);
380
+ --kobber-semantics-layout-page-space-xlarge: var(--kobber-primitives-size-72);
381
+ --kobber-semantics-layout-page-space-large: var(--kobber-primitives-size-56);
375
382
  --kobber-semantics-layout-page-size-wide: var(--kobber-primitives-size-1600);
376
383
  --kobber-semantics-layout-page-size-small: var(--kobber-primitives-size-320);
377
384
  --kobber-semantics-layout-element-size-xlarge: var(--kobber-primitives-size-40);
@@ -411,11 +418,15 @@
411
418
  --kobber-semantics-layout-container-size-xsmall: var(--kobber-primitives-size-232);
412
419
  --kobber-semantics-layout-container-size-xxsmall: var(--kobber-primitives-size-224);
413
420
  --kobber-semantics-layout-container-size-large: var(--kobber-primitives-size-448);
414
- --kobber-semantics-layout-container-space-small: var(--kobber-primitives-size-48);
415
- --kobber-semantics-layout-container-space-medium: var(--kobber-primitives-size-56);
416
- --kobber-semantics-layout-container-space-large: var(--kobber-primitives-size-72);
417
- --kobber-semantics-layout-container-space-xsmall: var(--kobber-primitives-size-40);
418
- --kobber-semantics-layout-container-radius: var(--kobber-primitives-size-40);
421
+ --kobber-semantics-layout-container-space-xlarge: var(--kobber-primitives-size-48);
422
+ --kobber-semantics-layout-container-space-big: var(--kobber-primitives-size-56);
423
+ --kobber-semantics-layout-container-space-large: var(--kobber-primitives-size-40);
424
+ --kobber-semantics-layout-container-space-medium: var(--kobber-primitives-size-24);
425
+ --kobber-semantics-layout-container-space-small: var(--kobber-primitives-size-16);
426
+ --kobber-semantics-layout-container-space-xsmall: var(--kobber-primitives-size-12);
427
+ --kobber-semantics-layout-container-space-tiny: var(--kobber-primitives-size-8);
428
+ --kobber-semantics-layout-container-radius-large: var(--kobber-primitives-size-40);
429
+ --kobber-semantics-layout-container-radius-medium: var(--kobber-primitives-size-24);
419
430
  --kobber-semantics-visual-icon-size-large: var(--kobber-primitives-size-16);
420
431
  --kobber-semantics-visual-icon-size-medium: var(--kobber-primitives-size-12);
421
432
  --kobber-semantics-visual-icon-size-small: var(--kobber-primitives-size-10);
@@ -564,7 +575,7 @@
564
575
  --kobber-groups-alerts-size-height: var(--kobber-semantics-layout-element-size-xxxlarge);
565
576
  --kobber-groups-responsivness-space-small: var(--kobber-semantics-layout-page-space-small);
566
577
  --kobber-groups-responsivness-space-medium: var(--kobber-semantics-layout-page-space-medium);
567
- --kobber-groups-responsivness-space-xlarge: var(--kobber-semantics-layout-page-space-xlarge);
578
+ --kobber-groups-responsivness-space-xlarge: var(--kobber-semantics-layout-page-space-huge);
568
579
  --kobber-groups-responsivness-size-wide: var(--kobber-semantics-layout-page-size-wide);
569
580
  --kobber-groups-responsivness-size-small: var(--kobber-semantics-layout-page-size-small);
570
581
  --kobber-groups-menus-space-tiny: var(--kobber-semantics-layout-element-space-tiny);
@@ -807,17 +818,30 @@
807
818
  --kobber-universal-icon-package-container-size-medium: var(--kobber-semantics-visual-icon-size-medium);
808
819
  --kobber-universal-icon-package-container-size-large: var(--kobber-semantics-visual-icon-size-large);
809
820
  --kobber-universal-icon-package-container-size-small: var(--kobber-semantics-visual-icon-size-small);
810
- --kobber-layout-content-wrapper-padding-inline: var(--kobber-semantics-layout-container-space-medium);
811
- --kobber-layout-content-wrapper-padding-block-overlay: var(--kobber-semantics-layout-container-space-small);
812
- --kobber-layout-content-wrapper-padding-block-page: var(--kobber-semantics-layout-container-space-large);
813
- --kobber-layout-content-wrapper-inner-container-gap: var(--kobber-semantics-layout-container-space-xsmall);
814
- --kobber-layout-content-wrapper-border-radius-overlay: var(--kobber-semantics-layout-container-radius);
821
+ --kobber-layout-content-wrapper-padding-inline-page: var(--kobber-semantics-layout-page-space-large);
822
+ --kobber-layout-content-wrapper-padding-inline-overlay: var(--kobber-semantics-layout-container-space-big);
823
+ --kobber-layout-content-wrapper-padding-block-overlay: var(--kobber-semantics-layout-container-space-xlarge);
824
+ --kobber-layout-content-wrapper-padding-block-page: var(--kobber-semantics-layout-page-space-xlarge);
825
+ --kobber-layout-content-wrapper-inner-container-gap: var(--kobber-semantics-layout-container-space-large);
826
+ --kobber-layout-content-wrapper-border-radius-overlay: var(--kobber-semantics-layout-container-radius-large);
815
827
  --kobber-layout-content-wrapper-background-color-brand-tone-b: var(--kobber-semantics-color-identity-base-aubergine-25);
816
828
  --kobber-layout-content-wrapper-background-color-brand-tone-a: var(--kobber-semantics-color-identity-base-aubergine-850);
817
829
  --kobber-layout-content-wrapper-background-color-neutral: var(--kobber-semantics-color-identity-neutral-concrete-25);
818
830
  --kobber-layout-content-wrapper-size-max-width: var(--kobber-semantics-layout-container-size-xlarge);
819
831
  --kobber-layout-text-block-gap: var(--kobber-semantics-layout-element-space-xsmall);
820
832
  --kobber-layout-content-top-block-gap: var(--kobber-semantics-layout-element-space-medium);
833
+ --kobber-layout-flex-gap-small: var(--kobber-semantics-layout-container-space-tiny);
834
+ --kobber-layout-flex-gap-medium: var(--kobber-semantics-layout-container-space-medium);
835
+ --kobber-layout-flex-gap-large: var(--kobber-semantics-layout-container-space-large);
836
+ --kobber-layout-flex-padding-small: var(--kobber-semantics-layout-container-space-medium);
837
+ --kobber-layout-flex-padding-medium: var(--kobber-semantics-layout-container-space-large);
838
+ --kobber-layout-flex-padding-large: var(--kobber-semantics-layout-container-space-xlarge);
839
+ --kobber-layout-flex-padding-xlarge: var(--kobber-semantics-layout-container-space-big);
840
+ --kobber-layout-flex-corner-radius-large: var(--kobber-semantics-layout-container-radius-large);
841
+ --kobber-layout-flex-corner-radius-medium: var(--kobber-semantics-layout-container-radius-medium);
842
+ --kobber-layout-flex-color-background-aubergine-850: var(--kobber-semantics-color-identity-base-aubergine-850);
843
+ --kobber-layout-flex-color-background-aubergine-25: var(--kobber-semantics-color-identity-base-aubergine-25);
844
+ --kobber-layout-flex-color-background-aubergine-50: var(--kobber-semantics-color-identity-base-aubergine-50);
821
845
  --kobber-semantics-typography-space-large: var(--kobber-semantics-layout-element-space-large);
822
846
  --kobber-semantics-typography-space-medium: var(--kobber-semantics-layout-element-space-medium);
823
847
  --kobber-semantics-typography-space-small: var(--kobber-semantics-layout-element-space-xsmall);
@@ -1550,8 +1574,9 @@
1550
1574
  --kobber-component-content-island-border-radius: var(--kobber-groups-content-islands-space-xsmall);
1551
1575
  --kobber-component-content-island-inner-container-gap: var(--kobber-groups-content-islands-space-medium);
1552
1576
  --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
1577
  --kobber-component-media-border-radius: var(--kobber-groups-cards-and-modules-radius-small);
1578
+ --kobber-component-media-gap: var(--kobber-groups-cards-and-modules-space-large);
1579
+ --kobber-component-button-group-gap: var(--kobber-groups-buttons-space-small);
1555
1580
  --kobber-universal-hyperlink-text-color-fallback: var(--kobber-semantics-typography-color-brand-carmine-525);
1556
1581
  --kobber-layout-text-wrapper-gap-horizontal: var(--kobber-semantics-typography-space-medium);
1557
1582
  --kobber-layout-main-gap-min: var(--kobber-groups-responsivness-space-small);
package/dist/tokens.d.ts CHANGED
@@ -1,4 +1,10 @@
1
1
  /* eslint-disable @typescript-eslint/no-empty-object-type */
2
+ export const color: {
3
+ "meta": {
4
+ "layout markering": "#5555ff"
5
+ }
6
+ };
7
+
2
8
  export const primitives: {
3
9
  "color": {
4
10
  "concrete": {
@@ -2711,7 +2717,8 @@ export const component: {
2711
2717
  "brand": "regular",
2712
2718
  "reading": {
2713
2719
  "regular": "regular",
2714
- "italic": "italic"
2720
+ "italic": "italic",
2721
+ "bold": "semibold"
2715
2722
  }
2716
2723
  }
2717
2724
  }
@@ -2813,7 +2820,12 @@ export const component: {
2813
2820
  "reading": "inter",
2814
2821
  "brand": "pp-mori"
2815
2822
  },
2816
- "weight": "regular",
2823
+ "weight": {
2824
+ "reading": {
2825
+ "regular": "regular",
2826
+ "italic": "italic"
2827
+ }
2828
+ },
2817
2829
  "lineHeight": 28,
2818
2830
  "size": 20
2819
2831
  }
@@ -2880,7 +2892,12 @@ export const component: {
2880
2892
  "toneB": "#eceef1"
2881
2893
  }
2882
2894
  },
2883
- "weight": "regular",
2895
+ "weight": {
2896
+ "reading": {
2897
+ "regular": "regular",
2898
+ "italic": "italic"
2899
+ }
2900
+ },
2884
2901
  "size": {
2885
2902
  "large": 24,
2886
2903
  "medium": 20
@@ -2966,10 +2983,13 @@ export const component: {
2966
2983
  }
2967
2984
  },
2968
2985
  "media": {
2969
- "padding": 16,
2970
2986
  "border": {
2971
2987
  "radius": 8
2972
- }
2988
+ },
2989
+ "gap": 16
2990
+ },
2991
+ "buttonGroup": {
2992
+ "gap": 8
2973
2993
  }
2974
2994
  };
2975
2995
 
@@ -3055,7 +3075,10 @@ export const layout: {
3055
3075
  },
3056
3076
  "contentWrapper": {
3057
3077
  "padding": {
3058
- "inline": 56,
3078
+ "inline": {
3079
+ "page": 56,
3080
+ "overlay": 56
3081
+ },
3059
3082
  "block": {
3060
3083
  "overlay": 48,
3061
3084
  "page": 72
@@ -3087,6 +3110,32 @@ export const layout: {
3087
3110
  },
3088
3111
  "contentTopBlock": {
3089
3112
  "gap": 16
3113
+ },
3114
+ "flex": {
3115
+ "gap": {
3116
+ "small": 8,
3117
+ "medium": 24,
3118
+ "large": 40
3119
+ },
3120
+ "padding": {
3121
+ "small": 24,
3122
+ "medium": 40,
3123
+ "large": 48,
3124
+ "xlarge": 56
3125
+ },
3126
+ "corner": {
3127
+ "radius": {
3128
+ "large": 40,
3129
+ "medium": 24
3130
+ }
3131
+ },
3132
+ "color": {
3133
+ "background": {
3134
+ "aubergine-850": "#481125",
3135
+ "aubergine-25": "#fdf9f9",
3136
+ "aubergine-50": "#f9eaed"
3137
+ }
3138
+ }
3090
3139
  }
3091
3140
  };
3092
3141
 
@@ -3181,7 +3230,8 @@ export const semantics: {
3181
3230
  "book": "book",
3182
3231
  "light": "light",
3183
3232
  "indent": 24,
3184
- "italic": "italic"
3233
+ "regularItalic": "italic",
3234
+ "bold": "semibold"
3185
3235
  },
3186
3236
  "color": {
3187
3237
  "identity": {
@@ -3289,9 +3339,11 @@ export const semantics: {
3289
3339
  "layout": {
3290
3340
  "page": {
3291
3341
  "space": {
3292
- "xlarge": 128,
3342
+ "huge": 128,
3293
3343
  "medium": 32,
3294
- "small": 16
3344
+ "small": 16,
3345
+ "xlarge": 72,
3346
+ "large": 56
3295
3347
  },
3296
3348
  "size": {
3297
3349
  "wide": 1600,
@@ -3349,12 +3401,18 @@ export const semantics: {
3349
3401
  "large": 448
3350
3402
  },
3351
3403
  "space": {
3352
- "small": 48,
3353
- "medium": 56,
3354
- "large": 72,
3355
- "xsmall": 40
3404
+ "xlarge": 48,
3405
+ "big": 56,
3406
+ "large": 40,
3407
+ "medium": 24,
3408
+ "small": 16,
3409
+ "xsmall": 12,
3410
+ "tiny": 8
3356
3411
  },
3357
- "radius": 40
3412
+ "radius": {
3413
+ "large": 40,
3414
+ "medium": 24
3415
+ }
3358
3416
  }
3359
3417
  },
3360
3418
  "visual": {
package/dist/tokens.js CHANGED
@@ -1,3 +1,9 @@
1
+ export const color = {
2
+ "meta": {
3
+ "layout markering": "#5555ff"
4
+ }
5
+ };
6
+
1
7
  export const primitives = {
2
8
  "color": {
3
9
  "concrete": {
@@ -2710,7 +2716,8 @@ export const component = {
2710
2716
  "brand": "regular",
2711
2717
  "reading": {
2712
2718
  "regular": "regular",
2713
- "italic": "italic"
2719
+ "italic": "italic",
2720
+ "bold": "semibold"
2714
2721
  }
2715
2722
  }
2716
2723
  }
@@ -2812,7 +2819,12 @@ export const component = {
2812
2819
  "reading": "inter",
2813
2820
  "brand": "pp-mori"
2814
2821
  },
2815
- "weight": "regular",
2822
+ "weight": {
2823
+ "reading": {
2824
+ "regular": "regular",
2825
+ "italic": "italic"
2826
+ }
2827
+ },
2816
2828
  "lineHeight": 28,
2817
2829
  "size": 20
2818
2830
  }
@@ -2879,7 +2891,12 @@ export const component = {
2879
2891
  "toneB": "#eceef1"
2880
2892
  }
2881
2893
  },
2882
- "weight": "regular",
2894
+ "weight": {
2895
+ "reading": {
2896
+ "regular": "regular",
2897
+ "italic": "italic"
2898
+ }
2899
+ },
2883
2900
  "size": {
2884
2901
  "large": 24,
2885
2902
  "medium": 20
@@ -2965,10 +2982,13 @@ export const component = {
2965
2982
  }
2966
2983
  },
2967
2984
  "media": {
2968
- "padding": 16,
2969
2985
  "border": {
2970
2986
  "radius": 8
2971
- }
2987
+ },
2988
+ "gap": 16
2989
+ },
2990
+ "buttonGroup": {
2991
+ "gap": 8
2972
2992
  }
2973
2993
  };
2974
2994
 
@@ -3054,7 +3074,10 @@ export const layout = {
3054
3074
  },
3055
3075
  "contentWrapper": {
3056
3076
  "padding": {
3057
- "inline": 56,
3077
+ "inline": {
3078
+ "page": 56,
3079
+ "overlay": 56
3080
+ },
3058
3081
  "block": {
3059
3082
  "overlay": 48,
3060
3083
  "page": 72
@@ -3086,6 +3109,32 @@ export const layout = {
3086
3109
  },
3087
3110
  "contentTopBlock": {
3088
3111
  "gap": 16
3112
+ },
3113
+ "flex": {
3114
+ "gap": {
3115
+ "small": 8,
3116
+ "medium": 24,
3117
+ "large": 40
3118
+ },
3119
+ "padding": {
3120
+ "small": 24,
3121
+ "medium": 40,
3122
+ "large": 48,
3123
+ "xlarge": 56
3124
+ },
3125
+ "corner": {
3126
+ "radius": {
3127
+ "large": 40,
3128
+ "medium": 24
3129
+ }
3130
+ },
3131
+ "color": {
3132
+ "background": {
3133
+ "aubergine-850": "#481125",
3134
+ "aubergine-25": "#fdf9f9",
3135
+ "aubergine-50": "#f9eaed"
3136
+ }
3137
+ }
3089
3138
  }
3090
3139
  };
3091
3140
 
@@ -3180,7 +3229,8 @@ export const semantics = {
3180
3229
  "book": "book",
3181
3230
  "light": "light",
3182
3231
  "indent": 24,
3183
- "italic": "italic"
3232
+ "regularItalic": "italic",
3233
+ "bold": "semibold"
3184
3234
  },
3185
3235
  "color": {
3186
3236
  "identity": {
@@ -3288,9 +3338,11 @@ export const semantics = {
3288
3338
  "layout": {
3289
3339
  "page": {
3290
3340
  "space": {
3291
- "xlarge": 128,
3341
+ "huge": 128,
3292
3342
  "medium": 32,
3293
- "small": 16
3343
+ "small": 16,
3344
+ "xlarge": 72,
3345
+ "large": 56
3294
3346
  },
3295
3347
  "size": {
3296
3348
  "wide": 1600,
@@ -3348,12 +3400,18 @@ export const semantics = {
3348
3400
  "large": 448
3349
3401
  },
3350
3402
  "space": {
3351
- "small": 48,
3352
- "medium": 56,
3353
- "large": 72,
3354
- "xsmall": 40
3403
+ "xlarge": 48,
3404
+ "big": 56,
3405
+ "large": 40,
3406
+ "medium": 24,
3407
+ "small": 16,
3408
+ "xsmall": 12,
3409
+ "tiny": 8
3355
3410
  },
3356
- "radius": 40
3411
+ "radius": {
3412
+ "large": 40,
3413
+ "medium": 24
3414
+ }
3357
3415
  }
3358
3416
  },
3359
3417
  "visual": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gyldendal/kobber-tokens",
3
- "version": "4.0.0",
3
+ "version": "5.0.0",
4
4
  "description": "Gyldendal Kobber design tokens",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,
@@ -28,7 +28,8 @@
28
28
  "build": "npm run build:tokens && npm run build:changelog",
29
29
  "build:tokens": "tsx ./scripts/build-tokens.ts",
30
30
  "build:changelog": "tsx ./scripts/update-changelog.ts",
31
- "quality-check": "tsc --noEmit && biome check --write ."
31
+ "quality-check": "tsc --noEmit && biome check --write .",
32
+ "find-unused-tokens": "tsx ./scripts/find-unused-tokens.ts"
32
33
  },
33
34
  "devDependencies": {
34
35
  "@biomejs/biome": "^2.3.11",