@gyldendal/kobber-tokens 3.0.0 → 4.0.0

package/README.md

@@ -186,7 +186,18 @@ If you publish a new version without token changes (e.g., fixing a build script
 2. Export `design-tokens.tokens.json` from Figma
 3. Replace the file in project root
 4. Commit and push: `git add . && git commit -m "feat: update tokens" && git push`
-5. Create a Pull Request on GitHub
+5. Ask a developer on Slack to preview the changes before creating PR
+
+#### For Developers (previewing token changes for UX team)
+
+When UX team asks you to preview changes on their branch:
+
+1. Checkout their branch: `git checkout tokens-update`
+2. Build tokens and changelog: `npm run build`
+3. Check `dist/CHANGELOG.txt` for summary of changes (added/removed/changed tokens)
+4. Copy/paste the latest changelog entry (top of file) to UX team on Slack
+5. Discard changes: `git checkout dist/`
+6. If everything looks good, UX team can create Pull Request
 
 #### For Developers (publishing new version)
 

package/dist/CHANGELOG.txt

@@ -1,3 +1,31 @@
+=== 08.01.2026, 09:20:50 [620f04e3] - MAJOR - npm: v4.0.0 ===
+
+ADDED
+component-media-border-radius
+component-media-brand-border-radius
+component-media-brand-gap
+component-media-brand-image-container-size-height
+component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align
+component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align
+component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align
+component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align
+component-media-brand-inner-inner-credit-container-padding
+component-media-brand-inner-inner-credit-container-vector-height
+component-media-brand-inner-inner-credit-container-vector-width
+component-media-padding
+
+REMOVED
+component-media-module-border-radius
+component-media-module-gap
+component-media-module-image-container-size-height
+component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align
+component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align
+component-media-module-inner-inner-credit-container-border-radius-top-left-right-align
+component-media-module-inner-inner-credit-container-border-radius-top-right-left-align
+component-media-module-inner-inner-credit-container-padding
+component-media-module-inner-inner-credit-container-vector-height
+component-media-module-inner-inner-credit-container-vector-width
+
 === 22.12.2025, 11:32:19 [13b106f4] - MAJOR - npm: v3.0.0 ===
 
 ADDED

package/dist/k-tokens.css

@@ -1381,16 +1381,16 @@
   --k-component-list-gap-ordered-large: var(--k-groups-text-blocks-space-xsmall);
   --k-component-list-gap-unordered-medium: var(--k-groups-text-blocks-space-xsmall);
   --k-component-list-gap-unordered-large: var(--k-groups-text-blocks-space-small);
-  --k-component-media-module-gap: var(--k-groups-cards-and-modules-space-large);
-  --k-component-media-module-inner-inner-credit-container-border-radius-top-left-right-align: var(--k-groups-cards-and-modules-radius-large);
-  --k-component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--k-groups-cards-and-modules-radius-large);
-  --k-component-media-module-inner-inner-credit-container-border-radius-top-right-left-align: var(--k-groups-cards-and-modules-radius-large);
-  --k-component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--k-groups-cards-and-modules-radius-large);
-  --k-component-media-module-inner-inner-credit-container-vector-width: var(--k-groups-cards-and-modules-size-element-small);
-  --k-component-media-module-inner-inner-credit-container-vector-height: var(--k-groups-cards-and-modules-size-element-small);
-  --k-component-media-module-inner-inner-credit-container-padding: var(--k-groups-cards-and-modules-space-xlarge);
-  --k-component-media-module-border-radius: var(--k-groups-cards-and-modules-radius-large);
-  --k-component-media-module-image-container-size-height: var(--k-groups-cards-and-modules-size-visual-image);
+  --k-component-media-brand-gap: var(--k-groups-cards-and-modules-space-large);
+  --k-component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align: var(--k-groups-cards-and-modules-radius-large);
+  --k-component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--k-groups-cards-and-modules-radius-large);
+  --k-component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align: var(--k-groups-cards-and-modules-radius-large);
+  --k-component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--k-groups-cards-and-modules-radius-large);
+  --k-component-media-brand-inner-inner-credit-container-vector-width: var(--k-groups-cards-and-modules-size-element-small);
+  --k-component-media-brand-inner-inner-credit-container-vector-height: var(--k-groups-cards-and-modules-size-element-small);
+  --k-component-media-brand-inner-inner-credit-container-padding: var(--k-groups-cards-and-modules-space-xlarge);
+  --k-component-media-brand-border-radius: var(--k-groups-cards-and-modules-radius-large);
+  --k-component-media-brand-image-container-size-height: var(--k-groups-cards-and-modules-size-visual-image);
   --k-component-content-card-gap-subtle: var(--k-groups-cards-and-modules-space-small);
   --k-component-content-card-gap-prominent: var(--k-groups-cards-and-modules-space-large);
   --k-component-content-card-image-container-border-radius-subtle: var(--k-groups-cards-and-modules-radius-small);
@@ -1550,6 +1550,8 @@
   --k-component-content-island-border-radius: var(--k-groups-content-islands-space-xsmall);
   --k-component-content-island-inner-container-gap: var(--k-groups-content-islands-space-medium);
   --k-component-content-island-inner-container-text-container-padding-left: var(--k-groups-content-islands-space-xsmall);
+  --k-component-media-padding: var(--k-groups-cards-and-modules-space-large);
+  --k-component-media-border-radius: var(--k-groups-cards-and-modules-radius-small);
   --k-universal-hyperlink-text-color-fallback: var(--k-semantics-typography-color-brand-carmine-525);
   --k-layout-text-wrapper-gap-horizontal: var(--k-semantics-typography-space-medium);
   --k-layout-main-gap-min: var(--k-groups-responsivness-space-small);

package/dist/tokens.css

@@ -1381,16 +1381,16 @@
   --kobber-component-list-gap-ordered-large: var(--kobber-groups-text-blocks-space-xsmall);
   --kobber-component-list-gap-unordered-medium: var(--kobber-groups-text-blocks-space-xsmall);
   --kobber-component-list-gap-unordered-large: var(--kobber-groups-text-blocks-space-small);
-  --kobber-component-media-module-gap: var(--kobber-groups-cards-and-modules-space-large);
-  --kobber-component-media-module-inner-inner-credit-container-border-radius-top-left-right-align: var(--kobber-groups-cards-and-modules-radius-large);
-  --kobber-component-media-module-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--kobber-groups-cards-and-modules-radius-large);
-  --kobber-component-media-module-inner-inner-credit-container-border-radius-top-right-left-align: var(--kobber-groups-cards-and-modules-radius-large);
-  --kobber-component-media-module-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--kobber-groups-cards-and-modules-radius-large);
-  --kobber-component-media-module-inner-inner-credit-container-vector-width: var(--kobber-groups-cards-and-modules-size-element-small);
-  --kobber-component-media-module-inner-inner-credit-container-vector-height: var(--kobber-groups-cards-and-modules-size-element-small);
-  --kobber-component-media-module-inner-inner-credit-container-padding: var(--kobber-groups-cards-and-modules-space-xlarge);
-  --kobber-component-media-module-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
-  --kobber-component-media-module-image-container-size-height: var(--kobber-groups-cards-and-modules-size-visual-image);
+  --kobber-component-media-brand-gap: var(--kobber-groups-cards-and-modules-space-large);
+  --kobber-component-media-brand-inner-inner-credit-container-border-radius-top-left-right-align: var(--kobber-groups-cards-and-modules-radius-large);
+  --kobber-component-media-brand-inner-inner-credit-container-border-radius-bottom-right-right-align: var(--kobber-groups-cards-and-modules-radius-large);
+  --kobber-component-media-brand-inner-inner-credit-container-border-radius-top-right-left-align: var(--kobber-groups-cards-and-modules-radius-large);
+  --kobber-component-media-brand-inner-inner-credit-container-border-radius-bottom-left-left-align: var(--kobber-groups-cards-and-modules-radius-large);
+  --kobber-component-media-brand-inner-inner-credit-container-vector-width: var(--kobber-groups-cards-and-modules-size-element-small);
+  --kobber-component-media-brand-inner-inner-credit-container-vector-height: var(--kobber-groups-cards-and-modules-size-element-small);
+  --kobber-component-media-brand-inner-inner-credit-container-padding: var(--kobber-groups-cards-and-modules-space-xlarge);
+  --kobber-component-media-brand-border-radius: var(--kobber-groups-cards-and-modules-radius-large);
+  --kobber-component-media-brand-image-container-size-height: var(--kobber-groups-cards-and-modules-size-visual-image);
   --kobber-component-content-card-gap-subtle: var(--kobber-groups-cards-and-modules-space-small);
   --kobber-component-content-card-gap-prominent: var(--kobber-groups-cards-and-modules-space-large);
   --kobber-component-content-card-image-container-border-radius-subtle: var(--kobber-groups-cards-and-modules-radius-small);
@@ -1550,6 +1550,8 @@
   --kobber-component-content-island-border-radius: var(--kobber-groups-content-islands-space-xsmall);
   --kobber-component-content-island-inner-container-gap: var(--kobber-groups-content-islands-space-medium);
   --kobber-component-content-island-inner-container-text-container-padding-left: var(--kobber-groups-content-islands-space-xsmall);
+  --kobber-component-media-padding: var(--kobber-groups-cards-and-modules-space-large);
+  --kobber-component-media-border-radius: var(--kobber-groups-cards-and-modules-radius-small);
   --kobber-universal-hyperlink-text-color-fallback: var(--kobber-semantics-typography-color-brand-carmine-525);
   --kobber-layout-text-wrapper-gap-horizontal: var(--kobber-semantics-typography-space-medium);
   --kobber-layout-main-gap-min: var(--kobber-groups-responsivness-space-small);

package/dist/tokens.d.ts

@@ -2391,7 +2391,7 @@ export const component: {
       }
     }
   },
-  "mediaModule": {
+  "mediaBrand": {
     "gap": 16,
     "innerInnerCreditContainer": {
       "borderRadius": {
@@ -2964,6 +2964,12 @@ export const component: {
         }
       }
     }
+  },
+  "media": {
+    "padding": 16,
+    "border": {
+      "radius": 8
+    }
   }
 };
 

package/dist/tokens.js

@@ -2390,7 +2390,7 @@ export const component = {
       }
     }
   },
-  "mediaModule": {
+  "mediaBrand": {
     "gap": 16,
     "innerInnerCreditContainer": {
       "borderRadius": {
@@ -2963,6 +2963,12 @@ export const component = {
         }
       }
     }
+  },
+  "media": {
+    "padding": 16,
+    "border": {
+      "radius": 8
+    }
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyldendal/kobber-tokens",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Gyldendal Kobber design tokens",
   "license": "UNLICENSED",
   "private": false,
@@ -18,7 +18,9 @@
     "./k-tokens.css": "./dist/k-tokens.css",
     "./CHANGELOG.txt": "./dist/CHANGELOG.txt"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -29,7 +31,7 @@
     "quality-check": "tsc --noEmit && biome check --write ."
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
+    "@biomejs/biome": "^2.3.11",
     "@types/node": "^22",
     "style-dictionary": "^5.1.1",
     "tsx": "^4.19.4",