@gyldendal/kobber-tokens 3.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.
- package/README.md +13 -2
- package/dist/CHANGELOG.txt +84 -0
- package/dist/k-tokens.css +53 -26
- package/dist/tokens.css +53 -26
- package/dist/tokens.d.ts +77 -13
- package/dist/tokens.js +77 -13
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -186,11 +186,22 @@ 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.
|
|
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
|
|
|
193
|
-
1.
|
|
204
|
+
1. In GitHub, merge the UX team's PR to `main`
|
|
194
205
|
2. Pull latest changes: `git checkout main && git pull`
|
|
195
206
|
3. Build tokens: `npm run build`
|
|
196
207
|
4. Check `dist/CHANGELOG.txt` for changes:
|
package/dist/CHANGELOG.txt
CHANGED
|
@@ -1,3 +1,87 @@
|
|
|
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
|
+
|
|
57
|
+
=== 08.01.2026, 09:20:50 [620f04e3] - MAJOR - npm: v4.0.0 ===
|
|
58
|
+
|
|
59
|
+
ADDED
|
|
60
|
+
component-media-border-radius
|
|
61
|
+
component-media-brand-border-radius
|
|
62
|
+
component-media-brand-gap
|
|
63
|
+
component-media-brand-image-container-size-height
|
|
64
|
+
component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align
|
|
65
|
+
component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align
|
|
66
|
+
component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align
|
|
67
|
+
component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align
|
|
68
|
+
component-media-brand-inner-inner-credit-container-padding
|
|
69
|
+
component-media-brand-inner-inner-credit-container-vector-height
|
|
70
|
+
component-media-brand-inner-inner-credit-container-vector-width
|
|
71
|
+
component-media-padding
|
|
72
|
+
|
|
73
|
+
REMOVED
|
|
74
|
+
component-media-module-border-radius
|
|
75
|
+
component-media-module-gap
|
|
76
|
+
component-media-module-image-container-size-height
|
|
77
|
+
component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align
|
|
78
|
+
component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align
|
|
79
|
+
component-media-module-inner-inner-credit-container-border-radius-top-left-right-align
|
|
80
|
+
component-media-module-inner-inner-credit-container-border-radius-top-right-left-align
|
|
81
|
+
component-media-module-inner-inner-credit-container-padding
|
|
82
|
+
component-media-module-inner-inner-credit-container-vector-height
|
|
83
|
+
component-media-module-inner-inner-credit-container-vector-width
|
|
84
|
+
|
|
1
85
|
=== 22.12.2025, 11:32:19 [13b106f4] - MAJOR - npm: v3.0.0 ===
|
|
2
86
|
|
|
3
87
|
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-
|
|
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-
|
|
415
|
-
--k-semantics-layout-container-space-
|
|
416
|
-
--k-semantics-layout-container-space-large: var(--k-primitives-size-
|
|
417
|
-
--k-semantics-layout-container-space-
|
|
418
|
-
--k-semantics-layout-container-
|
|
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-
|
|
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-
|
|
811
|
-
--k-layout-content-wrapper-padding-
|
|
812
|
-
--k-layout-content-wrapper-padding-block-
|
|
813
|
-
--k-layout-content-wrapper-
|
|
814
|
-
--k-layout-content-wrapper-
|
|
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);
|
|
@@ -1381,16 +1405,16 @@
|
|
|
1381
1405
|
--k-component-list-gap-ordered-large: var(--k-groups-text-blocks-space-xsmall);
|
|
1382
1406
|
--k-component-list-gap-unordered-medium: var(--k-groups-text-blocks-space-xsmall);
|
|
1383
1407
|
--k-component-list-gap-unordered-large: var(--k-groups-text-blocks-space-small);
|
|
1384
|
-
--k-component-media-
|
|
1385
|
-
--k-component-media-
|
|
1386
|
-
--k-component-media-
|
|
1387
|
-
--k-component-media-
|
|
1388
|
-
--k-component-media-
|
|
1389
|
-
--k-component-media-
|
|
1390
|
-
--k-component-media-
|
|
1391
|
-
--k-component-media-
|
|
1392
|
-
--k-component-media-
|
|
1393
|
-
--k-component-media-
|
|
1408
|
+
--k-component-media-brand-gap: var(--k-groups-cards-and-modules-space-large);
|
|
1409
|
+
--k-component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align: var(--k-groups-cards-and-modules-radius-large);
|
|
1410
|
+
--k-component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--k-groups-cards-and-modules-radius-large);
|
|
1411
|
+
--k-component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align: var(--k-groups-cards-and-modules-radius-large);
|
|
1412
|
+
--k-component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--k-groups-cards-and-modules-radius-large);
|
|
1413
|
+
--k-component-media-brand-inner-inner-credit-container-vector-width: var(--k-groups-cards-and-modules-size-element-small);
|
|
1414
|
+
--k-component-media-brand-inner-inner-credit-container-vector-height: var(--k-groups-cards-and-modules-size-element-small);
|
|
1415
|
+
--k-component-media-brand-inner-inner-credit-container-padding: var(--k-groups-cards-and-modules-space-xlarge);
|
|
1416
|
+
--k-component-media-brand-border-radius: var(--k-groups-cards-and-modules-radius-large);
|
|
1417
|
+
--k-component-media-brand-image-container-size-height: var(--k-groups-cards-and-modules-size-visual-image);
|
|
1394
1418
|
--k-component-content-card-gap-subtle: var(--k-groups-cards-and-modules-space-small);
|
|
1395
1419
|
--k-component-content-card-gap-prominent: var(--k-groups-cards-and-modules-space-large);
|
|
1396
1420
|
--k-component-content-card-image-container-border-radius-subtle: var(--k-groups-cards-and-modules-radius-small);
|
|
@@ -1550,6 +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);
|
|
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);
|
|
1553
1580
|
--k-universal-hyperlink-text-color-fallback: var(--k-semantics-typography-color-brand-carmine-525);
|
|
1554
1581
|
--k-layout-text-wrapper-gap-horizontal: var(--k-semantics-typography-space-medium);
|
|
1555
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-
|
|
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-
|
|
415
|
-
--kobber-semantics-layout-container-space-
|
|
416
|
-
--kobber-semantics-layout-container-space-large: var(--kobber-primitives-size-
|
|
417
|
-
--kobber-semantics-layout-container-space-
|
|
418
|
-
--kobber-semantics-layout-container-
|
|
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-
|
|
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-
|
|
811
|
-
--kobber-layout-content-wrapper-padding-
|
|
812
|
-
--kobber-layout-content-wrapper-padding-block-
|
|
813
|
-
--kobber-layout-content-wrapper-
|
|
814
|
-
--kobber-layout-content-wrapper-
|
|
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);
|
|
@@ -1381,16 +1405,16 @@
|
|
|
1381
1405
|
--kobber-component-list-gap-ordered-large: var(--kobber-groups-text-blocks-space-xsmall);
|
|
1382
1406
|
--kobber-component-list-gap-unordered-medium: var(--kobber-groups-text-blocks-space-xsmall);
|
|
1383
1407
|
--kobber-component-list-gap-unordered-large: var(--kobber-groups-text-blocks-space-small);
|
|
1384
|
-
--kobber-component-media-
|
|
1385
|
-
--kobber-component-media-
|
|
1386
|
-
--kobber-component-media-
|
|
1387
|
-
--kobber-component-media-
|
|
1388
|
-
--kobber-component-media-
|
|
1389
|
-
--kobber-component-media-
|
|
1390
|
-
--kobber-component-media-
|
|
1391
|
-
--kobber-component-media-
|
|
1392
|
-
--kobber-component-media-
|
|
1393
|
-
--kobber-component-media-
|
|
1408
|
+
--kobber-component-media-brand-gap: var(--kobber-groups-cards-and-modules-space-large);
|
|
1409
|
+
--kobber-component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align: var(--kobber-groups-cards-and-modules-radius-large);
|
|
1410
|
+
--kobber-component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--kobber-groups-cards-and-modules-radius-large);
|
|
1411
|
+
--kobber-component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align: var(--kobber-groups-cards-and-modules-radius-large);
|
|
1412
|
+
--kobber-component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--kobber-groups-cards-and-modules-radius-large);
|
|
1413
|
+
--kobber-component-media-brand-inner-inner-credit-container-vector-width: var(--kobber-groups-cards-and-modules-size-element-small);
|
|
1414
|
+
--kobber-component-media-brand-inner-inner-credit-container-vector-height: var(--kobber-groups-cards-and-modules-size-element-small);
|
|
1415
|
+
--kobber-component-media-brand-inner-inner-credit-container-padding: var(--kobber-groups-cards-and-modules-space-xlarge);
|
|
1416
|
+
--kobber-component-media-brand-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
|
|
1417
|
+
--kobber-component-media-brand-image-container-size-height: var(--kobber-groups-cards-and-modules-size-visual-image);
|
|
1394
1418
|
--kobber-component-content-card-gap-subtle: var(--kobber-groups-cards-and-modules-space-small);
|
|
1395
1419
|
--kobber-component-content-card-gap-prominent: var(--kobber-groups-cards-and-modules-space-large);
|
|
1396
1420
|
--kobber-component-content-card-image-container-border-radius-subtle: var(--kobber-groups-cards-and-modules-radius-small);
|
|
@@ -1550,6 +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);
|
|
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);
|
|
1553
1580
|
--kobber-universal-hyperlink-text-color-fallback: var(--kobber-semantics-typography-color-brand-carmine-525);
|
|
1554
1581
|
--kobber-layout-text-wrapper-gap-horizontal: var(--kobber-semantics-typography-space-medium);
|
|
1555
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": {
|
|
@@ -2391,7 +2397,7 @@ export const component: {
|
|
|
2391
2397
|
}
|
|
2392
2398
|
}
|
|
2393
2399
|
},
|
|
2394
|
-
"
|
|
2400
|
+
"mediaBrand": {
|
|
2395
2401
|
"gap": 16,
|
|
2396
2402
|
"innerInnerCreditContainer": {
|
|
2397
2403
|
"borderRadius": {
|
|
@@ -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":
|
|
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":
|
|
2895
|
+
"weight": {
|
|
2896
|
+
"reading": {
|
|
2897
|
+
"regular": "regular",
|
|
2898
|
+
"italic": "italic"
|
|
2899
|
+
}
|
|
2900
|
+
},
|
|
2884
2901
|
"size": {
|
|
2885
2902
|
"large": 24,
|
|
2886
2903
|
"medium": 20
|
|
@@ -2964,6 +2981,15 @@ export const component: {
|
|
|
2964
2981
|
}
|
|
2965
2982
|
}
|
|
2966
2983
|
}
|
|
2984
|
+
},
|
|
2985
|
+
"media": {
|
|
2986
|
+
"border": {
|
|
2987
|
+
"radius": 8
|
|
2988
|
+
},
|
|
2989
|
+
"gap": 16
|
|
2990
|
+
},
|
|
2991
|
+
"buttonGroup": {
|
|
2992
|
+
"gap": 8
|
|
2967
2993
|
}
|
|
2968
2994
|
};
|
|
2969
2995
|
|
|
@@ -3049,7 +3075,10 @@ export const layout: {
|
|
|
3049
3075
|
},
|
|
3050
3076
|
"contentWrapper": {
|
|
3051
3077
|
"padding": {
|
|
3052
|
-
"inline":
|
|
3078
|
+
"inline": {
|
|
3079
|
+
"page": 56,
|
|
3080
|
+
"overlay": 56
|
|
3081
|
+
},
|
|
3053
3082
|
"block": {
|
|
3054
3083
|
"overlay": 48,
|
|
3055
3084
|
"page": 72
|
|
@@ -3081,6 +3110,32 @@ export const layout: {
|
|
|
3081
3110
|
},
|
|
3082
3111
|
"contentTopBlock": {
|
|
3083
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
|
+
}
|
|
3084
3139
|
}
|
|
3085
3140
|
};
|
|
3086
3141
|
|
|
@@ -3175,7 +3230,8 @@ export const semantics: {
|
|
|
3175
3230
|
"book": "book",
|
|
3176
3231
|
"light": "light",
|
|
3177
3232
|
"indent": 24,
|
|
3178
|
-
"
|
|
3233
|
+
"regularItalic": "italic",
|
|
3234
|
+
"bold": "semibold"
|
|
3179
3235
|
},
|
|
3180
3236
|
"color": {
|
|
3181
3237
|
"identity": {
|
|
@@ -3283,9 +3339,11 @@ export const semantics: {
|
|
|
3283
3339
|
"layout": {
|
|
3284
3340
|
"page": {
|
|
3285
3341
|
"space": {
|
|
3286
|
-
"
|
|
3342
|
+
"huge": 128,
|
|
3287
3343
|
"medium": 32,
|
|
3288
|
-
"small": 16
|
|
3344
|
+
"small": 16,
|
|
3345
|
+
"xlarge": 72,
|
|
3346
|
+
"large": 56
|
|
3289
3347
|
},
|
|
3290
3348
|
"size": {
|
|
3291
3349
|
"wide": 1600,
|
|
@@ -3343,12 +3401,18 @@ export const semantics: {
|
|
|
3343
3401
|
"large": 448
|
|
3344
3402
|
},
|
|
3345
3403
|
"space": {
|
|
3346
|
-
"
|
|
3347
|
-
"
|
|
3348
|
-
"large":
|
|
3349
|
-
"
|
|
3404
|
+
"xlarge": 48,
|
|
3405
|
+
"big": 56,
|
|
3406
|
+
"large": 40,
|
|
3407
|
+
"medium": 24,
|
|
3408
|
+
"small": 16,
|
|
3409
|
+
"xsmall": 12,
|
|
3410
|
+
"tiny": 8
|
|
3350
3411
|
},
|
|
3351
|
-
"radius":
|
|
3412
|
+
"radius": {
|
|
3413
|
+
"large": 40,
|
|
3414
|
+
"medium": 24
|
|
3415
|
+
}
|
|
3352
3416
|
}
|
|
3353
3417
|
},
|
|
3354
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": {
|
|
@@ -2390,7 +2396,7 @@ export const component = {
|
|
|
2390
2396
|
}
|
|
2391
2397
|
}
|
|
2392
2398
|
},
|
|
2393
|
-
"
|
|
2399
|
+
"mediaBrand": {
|
|
2394
2400
|
"gap": 16,
|
|
2395
2401
|
"innerInnerCreditContainer": {
|
|
2396
2402
|
"borderRadius": {
|
|
@@ -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":
|
|
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":
|
|
2894
|
+
"weight": {
|
|
2895
|
+
"reading": {
|
|
2896
|
+
"regular": "regular",
|
|
2897
|
+
"italic": "italic"
|
|
2898
|
+
}
|
|
2899
|
+
},
|
|
2883
2900
|
"size": {
|
|
2884
2901
|
"large": 24,
|
|
2885
2902
|
"medium": 20
|
|
@@ -2963,6 +2980,15 @@ export const component = {
|
|
|
2963
2980
|
}
|
|
2964
2981
|
}
|
|
2965
2982
|
}
|
|
2983
|
+
},
|
|
2984
|
+
"media": {
|
|
2985
|
+
"border": {
|
|
2986
|
+
"radius": 8
|
|
2987
|
+
},
|
|
2988
|
+
"gap": 16
|
|
2989
|
+
},
|
|
2990
|
+
"buttonGroup": {
|
|
2991
|
+
"gap": 8
|
|
2966
2992
|
}
|
|
2967
2993
|
};
|
|
2968
2994
|
|
|
@@ -3048,7 +3074,10 @@ export const layout = {
|
|
|
3048
3074
|
},
|
|
3049
3075
|
"contentWrapper": {
|
|
3050
3076
|
"padding": {
|
|
3051
|
-
"inline":
|
|
3077
|
+
"inline": {
|
|
3078
|
+
"page": 56,
|
|
3079
|
+
"overlay": 56
|
|
3080
|
+
},
|
|
3052
3081
|
"block": {
|
|
3053
3082
|
"overlay": 48,
|
|
3054
3083
|
"page": 72
|
|
@@ -3080,6 +3109,32 @@ export const layout = {
|
|
|
3080
3109
|
},
|
|
3081
3110
|
"contentTopBlock": {
|
|
3082
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
|
+
}
|
|
3083
3138
|
}
|
|
3084
3139
|
};
|
|
3085
3140
|
|
|
@@ -3174,7 +3229,8 @@ export const semantics = {
|
|
|
3174
3229
|
"book": "book",
|
|
3175
3230
|
"light": "light",
|
|
3176
3231
|
"indent": 24,
|
|
3177
|
-
"
|
|
3232
|
+
"regularItalic": "italic",
|
|
3233
|
+
"bold": "semibold"
|
|
3178
3234
|
},
|
|
3179
3235
|
"color": {
|
|
3180
3236
|
"identity": {
|
|
@@ -3282,9 +3338,11 @@ export const semantics = {
|
|
|
3282
3338
|
"layout": {
|
|
3283
3339
|
"page": {
|
|
3284
3340
|
"space": {
|
|
3285
|
-
"
|
|
3341
|
+
"huge": 128,
|
|
3286
3342
|
"medium": 32,
|
|
3287
|
-
"small": 16
|
|
3343
|
+
"small": 16,
|
|
3344
|
+
"xlarge": 72,
|
|
3345
|
+
"large": 56
|
|
3288
3346
|
},
|
|
3289
3347
|
"size": {
|
|
3290
3348
|
"wide": 1600,
|
|
@@ -3342,12 +3400,18 @@ export const semantics = {
|
|
|
3342
3400
|
"large": 448
|
|
3343
3401
|
},
|
|
3344
3402
|
"space": {
|
|
3345
|
-
"
|
|
3346
|
-
"
|
|
3347
|
-
"large":
|
|
3348
|
-
"
|
|
3403
|
+
"xlarge": 48,
|
|
3404
|
+
"big": 56,
|
|
3405
|
+
"large": 40,
|
|
3406
|
+
"medium": 24,
|
|
3407
|
+
"small": 16,
|
|
3408
|
+
"xsmall": 12,
|
|
3409
|
+
"tiny": 8
|
|
3349
3410
|
},
|
|
3350
|
-
"radius":
|
|
3411
|
+
"radius": {
|
|
3412
|
+
"large": 40,
|
|
3413
|
+
"medium": 24
|
|
3414
|
+
}
|
|
3351
3415
|
}
|
|
3352
3416
|
},
|
|
3353
3417
|
"visual": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gyldendal/kobber-tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.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": [
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
22
24
|
"publishConfig": {
|
|
23
25
|
"access": "public"
|
|
24
26
|
},
|
|
@@ -26,10 +28,11 @@
|
|
|
26
28
|
"build": "npm run build:tokens && npm run build:changelog",
|
|
27
29
|
"build:tokens": "tsx ./scripts/build-tokens.ts",
|
|
28
30
|
"build:changelog": "tsx ./scripts/update-changelog.ts",
|
|
29
|
-
"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"
|
|
30
33
|
},
|
|
31
34
|
"devDependencies": {
|
|
32
|
-
"@biomejs/biome": "^
|
|
35
|
+
"@biomejs/biome": "^2.3.11",
|
|
33
36
|
"@types/node": "^22",
|
|
34
37
|
"style-dictionary": "^5.1.1",
|
|
35
38
|
"tsx": "^4.19.4",
|