@gyldendal/kobber-tokens 1.0.0 → 3.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.
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:**
@@ -1,3 +1,80 @@
1
+ === 22.12.2025, 11:32:19 [13b106f4] - MAJOR - npm: v3.0.0 ===
2
+
3
+ ADDED
4
+ component-content-island-background-color-neutral
5
+ component-content-island-border-color-brand-tone-a
6
+ component-content-island-border-color-brand-tone-b
7
+ component-content-island-border-color-neutral
8
+ component-content-island-border-radius
9
+ component-content-island-gap
10
+ component-content-island-inner-container-gap
11
+ component-content-island-inner-container-text-container-padding-left
12
+ component-content-island-padding-block
13
+ component-content-island-padding-inline
14
+ groups-content-islands-color-aubergine-150
15
+ groups-content-islands-color-aubergine-50
16
+ groups-content-islands-color-concrete-25
17
+ groups-content-islands-color-concrete-50
18
+ groups-content-islands-space-medium
19
+ groups-content-islands-space-small
20
+ groups-content-islands-space-xlarge
21
+ groups-content-islands-space-xsmall
22
+ groups-content-islands-space-xxsmall
23
+ groups-content-islands-stroke
24
+
25
+ REMOVED
26
+ component-pagination-background-color-neutral
27
+ component-pagination-border-color-brand-tone-a
28
+ component-pagination-border-color-brand-tone-b
29
+ component-pagination-border-color-neutral-tone-a
30
+ component-pagination-container-gap
31
+ component-pagination-gap
32
+ component-pagination-padding-block-left
33
+ component-pagination-padding-block-right
34
+ component-pagination-padding-inline
35
+ groups-pagination-color-aubergine-150
36
+ groups-pagination-color-aubergine-50
37
+ groups-pagination-color-concrete-25
38
+ groups-pagination-color-concrete-50
39
+ groups-pagination-space-medium
40
+ groups-pagination-space-small
41
+ groups-pagination-space-xlarge
42
+ groups-pagination-space-xxsmall
43
+ groups-pagination-stroke
44
+ layout-island-background-color
45
+ layout-island-border-color-brand-tone-a
46
+ layout-island-border-color-neutral
47
+
48
+ === 19.12.2025, 16:14:53 [1a5ee550] - MAJOR - npm: v2.0.0 ===
49
+
50
+ ADDED
51
+ component-pagination-border-color-brand-tone-a
52
+ component-pagination-border-color-brand-tone-b
53
+ component-pagination-border-color-neutral-tone-a
54
+ component-pagination-padding-block-left
55
+ component-pagination-padding-block-right
56
+ component-text-body-text-weight-brand
57
+ component-text-body-text-weight-reading-italic
58
+ component-text-body-text-weight-reading-regular
59
+ groups-pagination-color-aubergine-150
60
+ groups-pagination-color-aubergine-50
61
+ groups-pagination-color-concrete-50
62
+ groups-pagination-space-small
63
+ groups-pagination-space-xxsmall
64
+ groups-pagination-stroke
65
+ layout-island-background-color
66
+ layout-island-border-color-brand-tone-a
67
+ layout-island-border-color-neutral
68
+ semantics-typography-italic
69
+
70
+ REMOVED
71
+ component-pagination-padding-block
72
+ component-text-body-text-weight
73
+ groups-pagination-space-large
74
+
75
+ CHANGED
76
+ component-pagination-padding-inline
77
+
1
78
  === 19.12.2025, 13:06:37 [016b64de] - MAJOR - npm: v1.0.0 ===
2
79
 
3
80
  ADDED
package/dist/k-tokens.css CHANGED
@@ -229,6 +229,7 @@
229
229
  --k-semantics-typography-regular: regular;
230
230
  --k-semantics-typography-book: book;
231
231
  --k-semantics-typography-light: light;
232
+ --k-semantics-typography-italic: italic;
232
233
  --k-semantics-visual-thumbnail: 0;
233
234
  --k-groups-buttons-color-aubergine-transparent-brightest: var(--k-primitives-color-aubergine-25-10);
234
235
  --k-groups-buttons-color-aubergine-transparent-midtone: var(--k-primitives-color-aubergine-850-10);
@@ -262,8 +263,13 @@
262
263
  --k-groups-cards-and-modules-color-aubergine-1000-20: var(--k-primitives-color-aubergine-1000-20);
263
264
  --k-groups-cards-and-modules-color-neutral-1000-10: var(--k-primitives-color-concrete-1000-10);
264
265
  --k-groups-filters-color-carmine-1000-10: var(--k-primitives-color-carmine-1000-10);
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);
265
269
  --k-component-text-label-text-weight: var(--k-semantics-typography-regular);
266
- --k-component-text-body-text-weight: var(--k-semantics-typography-regular);
270
+ --k-component-text-body-text-weight-brand: var(--k-semantics-typography-regular);
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);
267
273
  --k-component-text-display-extended-text-weight-alt2: var(--k-semantics-typography-light);
268
274
  --k-semantics-typography-font-family-inter: var(--k-primitives-font-family-inter);
269
275
  --k-semantics-typography-font-family-lyon-display: var(--k-primitives-font-family-lyon-display);
@@ -684,10 +690,13 @@
684
690
  --k-groups-text-blocks-color-vacation-25: var(--k-semantics-color-theme-vacation-vacation-25);
685
691
  --k-groups-text-blocks-color-nostalgia-600: var(--k-semantics-color-theme-nostalgia-nostalgia-600);
686
692
  --k-groups-text-blocks-color-nostalgia-25: var(--k-semantics-color-theme-nostalgia-nostalgia-25);
687
- --k-groups-pagination-color-concrete-25: var(--k-semantics-color-identity-neutral-concrete-25);
688
- --k-groups-pagination-space-medium: var(--k-semantics-layout-element-space-medium);
689
- --k-groups-pagination-space-large: var(--k-semantics-layout-element-space-large);
690
- --k-groups-pagination-space-xlarge: var(--k-semantics-layout-element-space-xlarge);
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);
691
700
  --k-component-button-background-color-brand-primary-tone-a-hover: var(--k-groups-buttons-color-carmine-transparent-dark);
692
701
  --k-component-button-background-color-brand-secondary-tone-b-hover: var(--k-groups-buttons-color-aubergine-transparent-darkest);
693
702
  --k-component-button-background-color-brand-secondary-tone-a-hover: var(--k-groups-buttons-color-aubergine-transparent-brightest);
@@ -780,6 +789,9 @@
780
789
  --k-component-text-display-extended-text-font-alt2: var(--k-semantics-typography-font-family-lyon-display);
781
790
  --k-component-text-display-extended-text-font-alt1: var(--k-semantics-typography-font-family-pp-mori);
782
791
  --k-component-text-display-padding-bottom: var(--k-semantics-layout-element-space-xsmall);
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);
783
795
  --k-universal-focus-border-radius-xsmall: var(--k-semantics-layout-element-radius-xsmall);
784
796
  --k-universal-focus-border-radius-medium: var(--k-semantics-layout-element-radius-medium);
785
797
  --k-universal-focus-border-radius-large: var(--k-semantics-layout-element-radius-large);
@@ -1531,11 +1543,13 @@
1531
1543
  --k-component-dropdown-item-background-color-pressed: var(--k-groups-menus-color-wine-50);
1532
1544
  --k-component-dropdown-item-background-color-hover: var(--k-groups-menus-color-aubergine-50);
1533
1545
  --k-component-dropdown-item-border-radius: var(--k-groups-menus-radius-medium);
1534
- --k-component-pagination-container-gap: var(--k-groups-pagination-space-medium);
1535
- --k-component-pagination-gap: var(--k-groups-pagination-space-xlarge);
1536
- --k-component-pagination-padding-block: var(--k-groups-pagination-space-large);
1537
- --k-component-pagination-padding-inline: var(--k-groups-pagination-space-medium);
1538
- --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);
1539
1553
  --k-universal-hyperlink-text-color-fallback: var(--k-semantics-typography-color-brand-carmine-525);
1540
1554
  --k-layout-text-wrapper-gap-horizontal: var(--k-semantics-typography-space-medium);
1541
1555
  --k-layout-main-gap-min: var(--k-groups-responsivness-space-small);
package/dist/tokens.css CHANGED
@@ -229,6 +229,7 @@
229
229
  --kobber-semantics-typography-regular: regular;
230
230
  --kobber-semantics-typography-book: book;
231
231
  --kobber-semantics-typography-light: light;
232
+ --kobber-semantics-typography-italic: italic;
232
233
  --kobber-semantics-visual-thumbnail: 0;
233
234
  --kobber-groups-buttons-color-aubergine-transparent-brightest: var(--kobber-primitives-color-aubergine-25-10);
234
235
  --kobber-groups-buttons-color-aubergine-transparent-midtone: var(--kobber-primitives-color-aubergine-850-10);
@@ -262,8 +263,13 @@
262
263
  --kobber-groups-cards-and-modules-color-aubergine-1000-20: var(--kobber-primitives-color-aubergine-1000-20);
263
264
  --kobber-groups-cards-and-modules-color-neutral-1000-10: var(--kobber-primitives-color-concrete-1000-10);
264
265
  --kobber-groups-filters-color-carmine-1000-10: var(--kobber-primitives-color-carmine-1000-10);
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);
265
269
  --kobber-component-text-label-text-weight: var(--kobber-semantics-typography-regular);
266
- --kobber-component-text-body-text-weight: var(--kobber-semantics-typography-regular);
270
+ --kobber-component-text-body-text-weight-brand: var(--kobber-semantics-typography-regular);
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);
267
273
  --kobber-component-text-display-extended-text-weight-alt2: var(--kobber-semantics-typography-light);
268
274
  --kobber-semantics-typography-font-family-inter: var(--kobber-primitives-font-family-inter);
269
275
  --kobber-semantics-typography-font-family-lyon-display: var(--kobber-primitives-font-family-lyon-display);
@@ -684,10 +690,13 @@
684
690
  --kobber-groups-text-blocks-color-vacation-25: var(--kobber-semantics-color-theme-vacation-vacation-25);
685
691
  --kobber-groups-text-blocks-color-nostalgia-600: var(--kobber-semantics-color-theme-nostalgia-nostalgia-600);
686
692
  --kobber-groups-text-blocks-color-nostalgia-25: var(--kobber-semantics-color-theme-nostalgia-nostalgia-25);
687
- --kobber-groups-pagination-color-concrete-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
688
- --kobber-groups-pagination-space-medium: var(--kobber-semantics-layout-element-space-medium);
689
- --kobber-groups-pagination-space-large: var(--kobber-semantics-layout-element-space-large);
690
- --kobber-groups-pagination-space-xlarge: var(--kobber-semantics-layout-element-space-xlarge);
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);
691
700
  --kobber-component-button-background-color-brand-primary-tone-a-hover: var(--kobber-groups-buttons-color-carmine-transparent-dark);
692
701
  --kobber-component-button-background-color-brand-secondary-tone-b-hover: var(--kobber-groups-buttons-color-aubergine-transparent-darkest);
693
702
  --kobber-component-button-background-color-brand-secondary-tone-a-hover: var(--kobber-groups-buttons-color-aubergine-transparent-brightest);
@@ -780,6 +789,9 @@
780
789
  --kobber-component-text-display-extended-text-font-alt2: var(--kobber-semantics-typography-font-family-lyon-display);
781
790
  --kobber-component-text-display-extended-text-font-alt1: var(--kobber-semantics-typography-font-family-pp-mori);
782
791
  --kobber-component-text-display-padding-bottom: var(--kobber-semantics-layout-element-space-xsmall);
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);
783
795
  --kobber-universal-focus-border-radius-xsmall: var(--kobber-semantics-layout-element-radius-xsmall);
784
796
  --kobber-universal-focus-border-radius-medium: var(--kobber-semantics-layout-element-radius-medium);
785
797
  --kobber-universal-focus-border-radius-large: var(--kobber-semantics-layout-element-radius-large);
@@ -1531,11 +1543,13 @@
1531
1543
  --kobber-component-dropdown-item-background-color-pressed: var(--kobber-groups-menus-color-wine-50);
1532
1544
  --kobber-component-dropdown-item-background-color-hover: var(--kobber-groups-menus-color-aubergine-50);
1533
1545
  --kobber-component-dropdown-item-border-radius: var(--kobber-groups-menus-radius-medium);
1534
- --kobber-component-pagination-container-gap: var(--kobber-groups-pagination-space-medium);
1535
- --kobber-component-pagination-gap: var(--kobber-groups-pagination-space-xlarge);
1536
- --kobber-component-pagination-padding-block: var(--kobber-groups-pagination-space-large);
1537
- --kobber-component-pagination-padding-inline: var(--kobber-groups-pagination-space-medium);
1538
- --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);
1539
1553
  --kobber-universal-hyperlink-text-color-fallback: var(--kobber-semantics-typography-color-brand-carmine-525);
1540
1554
  --kobber-layout-text-wrapper-gap-horizontal: var(--kobber-semantics-typography-space-medium);
1541
1555
  --kobber-layout-main-gap-min: var(--kobber-groups-responsivness-space-small);
package/dist/tokens.d.ts CHANGED
@@ -800,15 +800,21 @@ export const groups: {
800
800
  "content": {
801
801
  "element": {}
802
802
  },
803
- "pagination": {
803
+ "contentIslands": {
804
804
  "color": {
805
- "concrete-25": "#f9fafb"
805
+ "concrete-25": "#f9fafb",
806
+ "concrete-50": "#0f11141a",
807
+ "aubergine-50": "#4811251a",
808
+ "aubergine-150": "#fdf9f933"
806
809
  },
807
810
  "space": {
808
811
  "medium": 16,
809
- "large": 24,
810
- "xlarge": 32
811
- }
812
+ "small": 12,
813
+ "xlarge": 32,
814
+ "xxsmall": 4,
815
+ "xsmall": 8
816
+ },
817
+ "stroke": 4
812
818
  }
813
819
  };
814
820
 
@@ -2701,7 +2707,13 @@ export const component: {
2701
2707
  },
2702
2708
  "reading": "inter",
2703
2709
  "brand": "pp-mori",
2704
- "weight": "regular"
2710
+ "weight": {
2711
+ "brand": "regular",
2712
+ "reading": {
2713
+ "regular": "regular",
2714
+ "italic": "italic"
2715
+ }
2716
+ }
2705
2717
  }
2706
2718
  },
2707
2719
  "textHeading": {
@@ -2923,19 +2935,34 @@ export const component: {
2923
2935
  "radius": 8
2924
2936
  }
2925
2937
  },
2926
- "pagination": {
2927
- "container": {
2928
- "gap": 16
2929
- },
2938
+ "contentIsland": {
2930
2939
  "gap": 32,
2931
2940
  "padding": {
2932
- "block": 24,
2933
- "inline": 16
2941
+ "block": 4,
2942
+ "inline": 4
2934
2943
  },
2935
2944
  "background": {
2936
2945
  "color": {
2937
2946
  "neutral": "#f9fafb"
2938
2947
  }
2948
+ },
2949
+ "border": {
2950
+ "color": {
2951
+ "neutral": "#0f11141a",
2952
+ "brand": {
2953
+ "toneB": "#fdf9f933",
2954
+ "toneA": "#4811251a"
2955
+ }
2956
+ },
2957
+ "radius": 8
2958
+ },
2959
+ "innerContainer": {
2960
+ "gap": 16,
2961
+ "textContainer": {
2962
+ "padding": {
2963
+ "left": 8
2964
+ }
2965
+ }
2939
2966
  }
2940
2967
  }
2941
2968
  };
@@ -3147,7 +3174,8 @@ export const semantics: {
3147
3174
  "regular": "regular",
3148
3175
  "book": "book",
3149
3176
  "light": "light",
3150
- "indent": 24
3177
+ "indent": 24,
3178
+ "italic": "italic"
3151
3179
  },
3152
3180
  "color": {
3153
3181
  "identity": {
package/dist/tokens.js CHANGED
@@ -799,15 +799,21 @@ export const groups = {
799
799
  "content": {
800
800
  "element": {}
801
801
  },
802
- "pagination": {
802
+ "contentIslands": {
803
803
  "color": {
804
- "concrete-25": "#f9fafb"
804
+ "concrete-25": "#f9fafb",
805
+ "concrete-50": "#0f11141a",
806
+ "aubergine-50": "#4811251a",
807
+ "aubergine-150": "#fdf9f933"
805
808
  },
806
809
  "space": {
807
810
  "medium": 16,
808
- "large": 24,
809
- "xlarge": 32
810
- }
811
+ "small": 12,
812
+ "xlarge": 32,
813
+ "xxsmall": 4,
814
+ "xsmall": 8
815
+ },
816
+ "stroke": 4
811
817
  }
812
818
  };
813
819
 
@@ -2700,7 +2706,13 @@ export const component = {
2700
2706
  },
2701
2707
  "reading": "inter",
2702
2708
  "brand": "pp-mori",
2703
- "weight": "regular"
2709
+ "weight": {
2710
+ "brand": "regular",
2711
+ "reading": {
2712
+ "regular": "regular",
2713
+ "italic": "italic"
2714
+ }
2715
+ }
2704
2716
  }
2705
2717
  },
2706
2718
  "textHeading": {
@@ -2922,19 +2934,34 @@ export const component = {
2922
2934
  "radius": 8
2923
2935
  }
2924
2936
  },
2925
- "pagination": {
2926
- "container": {
2927
- "gap": 16
2928
- },
2937
+ "contentIsland": {
2929
2938
  "gap": 32,
2930
2939
  "padding": {
2931
- "block": 24,
2932
- "inline": 16
2940
+ "block": 4,
2941
+ "inline": 4
2933
2942
  },
2934
2943
  "background": {
2935
2944
  "color": {
2936
2945
  "neutral": "#f9fafb"
2937
2946
  }
2947
+ },
2948
+ "border": {
2949
+ "color": {
2950
+ "neutral": "#0f11141a",
2951
+ "brand": {
2952
+ "toneB": "#fdf9f933",
2953
+ "toneA": "#4811251a"
2954
+ }
2955
+ },
2956
+ "radius": 8
2957
+ },
2958
+ "innerContainer": {
2959
+ "gap": 16,
2960
+ "textContainer": {
2961
+ "padding": {
2962
+ "left": 8
2963
+ }
2964
+ }
2938
2965
  }
2939
2966
  }
2940
2967
  };
@@ -3146,7 +3173,8 @@ export const semantics = {
3146
3173
  "regular": "regular",
3147
3174
  "book": "book",
3148
3175
  "light": "light",
3149
- "indent": 24
3176
+ "indent": 24,
3177
+ "italic": "italic"
3150
3178
  },
3151
3179
  "color": {
3152
3180
  "identity": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gyldendal/kobber-tokens",
3
- "version": "1.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Gyldendal Kobber design tokens",
5
5
  "license": "UNLICENSED",
6
6
  "private": false,