npm - @gyldendal/kobber-tokens - Versions diffs - 10.0.1 → 12.0.0 - Mend

@gyldendal/kobber-tokens 10.0.1 → 12.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

package/README.md CHANGED Viewed

@@ -201,6 +201,10 @@ When UX team asks you to preview changes on their branch:
 #### For Developers (publishing new version)
+If you use [Claude Code](https://claude.com/claude-code), run `/release` in the project directory. It automates the entire flow below — merging the PR, building, versioning, publishing, and generating a Slack message.
+Manually:
 1. In GitHub, merge the UX team's PR to `main`
 2. Pull latest changes: `git checkout main && git pull`
 3. Build tokens: `npm run build`

package/dist/CHANGELOG.txt CHANGED Viewed

@@ -1,3 +1,79 @@
+=== 20.04.2026, 13:12:17 [ac76d6a6] - MAJOR - npm: v12.0.0 ===
+ADDED
+components-text-heading-text-weight-brand
+components-text-heading-text-weight-reading
+components-text-lead-text-weight-brand
+components-text-title-text-weight-brand
+semantics-typography-weight-bold
+REMOVED
+components-text-heading-text-weight
+semantics-typography-weight-semibold
+CHANGED
+components-text-body-text-weight-brand
+components-text-body-text-weight-reading-bold
+components-text-body-text-weight-reading-regular
+components-text-display-extended-text-weight-alt2
+components-text-display-text-weight
+components-text-label-text-weight
+components-text-lead-text-weight-reading-regular
+components-text-title-text-weight-reading-regular
+semantics-typography-weight-book
+=== 10.04.2026, 10:42:58 [c0b43659] - MAJOR - npm: v11.0.0 ===
+ADDED
+components-content-island-inner-container-left-slider-container-padding-left
+components-contextual-navigation-bar-right-container-gap
+components-media-player-container-bottom-border-color-brand
+components-media-player-container-bottom-border-color-neutral
+components-media-player-container-bottom-border-radius
+components-media-player-container-bottom-gap
+components-media-player-container-bottom-padding
+components-media-player-item-inner-container-controllers-gap
+components-menu-item-image-container-size-large-height
+components-menu-item-image-container-size-large-width
+components-menu-item-image-container-size-small-height
+components-menu-item-image-container-size-small-width
+components-slider-controller-top-container-gap
+components-slider-track-filled-size-height
+groups-media-players-color-neutral-150
+groups-media-players-color-wine-150
+groups-media-players-space-large
+groups-menus-space-xlarge
+groups-menus-visual-image-size-xlarge
+groups-menus-visual-image-size-xxlarge
+groups-navigation-bars-space-xsmall
+groups-sliders-border-radius-circle
+groups-sliders-size-medium
+groups-sliders-size-small
+groups-sliders-space-xxsmall
+primitives-font-weight-375
+semantics-typography-weight-book
+semantics-typography-weight-light
+semantics-typography-weight-regular
+semantics-typography-weight-semibold
+REMOVED
+components-contextual-navigation-bar-border-radius
+components-media-player-border-color
+components-menu-item-image-container-size-height
+components-menu-item-image-container-size-width
+groups-menus-visual-image-size
+groups-sliders-size-xxsmall
+CHANGED
+components-dropdown-item-gap
+components-dropdown-size-height
+components-menu-item-padding-left-nested
+components-slider-border-radius
+components-slider-size-height
+components-slider-thumb-size-height
+components-slider-thumb-size-width
+groups-menus-space-large
 === 19.03.2026, 09:11:14 [af9b8249] - PATCH - npm: v10.0.1 ===
 CHANGED

package/dist/k-tokens.css CHANGED Viewed

@@ -171,6 +171,7 @@
   --k-primitives-size-9999: 624.9375rem;
   --k-primitives-font-weight-200: 200;
   --k-primitives-font-weight-300: 300;
+  --k-primitives-font-weight-375: 375;
   --k-primitives-font-weight-400: 400;
   --k-primitives-font-weight-500: 500;
   --k-primitives-font-weight-600: 600;
@@ -227,8 +228,6 @@
   --k-primitives-spread-4: 0.25rem;
   --k-components-quote-module-tone-a-brand: #ffffff;
   --k-components-text-label-text-line-height: auto;
-  --k-components-text-heading-text-weight: book;
-  --k-components-text-display-text-weight: book;
   --k-universal-hyperlink-text-decoration-hover: underline;
   --k-semantics-typography-regular: regular;
   --k-semantics-typography-book: book;
@@ -276,16 +275,9 @@
   --k-groups-counter-concrete-150: var(--k-primitives-color-concrete-150);
   --k-groups-counter-aubergine-150: var(--k-primitives-color-aubergine-150);
   --k-groups-counter-aubergine-850: var(--k-primitives-color-aubergine-850);
-  --k-components-text-label-text-weight: var(--k-semantics-typography-regular);
-  --k-components-text-body-text-weight-brand: var(--k-semantics-typography-regular);
-  --k-components-text-body-text-weight-reading-regular: var(--k-semantics-typography-regular);
   --k-components-text-body-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
-  --k-components-text-body-text-weight-reading-bold: var(--k-semantics-typography-bold);
-  --k-components-text-lead-text-weight-reading-regular: var(--k-semantics-typography-regular);
   --k-components-text-lead-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
-  --k-components-text-title-text-weight-reading-regular: var(--k-semantics-typography-regular);
   --k-components-text-title-text-weight-reading-italic: var(--k-semantics-typography-regular-italic);
-  --k-components-text-display-extended-text-weight-alt2: var(--k-semantics-typography-light);
   --k-semantics-typography-font-family-inter: var(--k-primitives-font-family-inter);
   --k-semantics-typography-font-family-lyon-display: var(--k-primitives-font-family-lyon-display);
   --k-semantics-typography-font-family-pp-mori: var(--k-primitives-font-family-pp-mori);
@@ -317,6 +309,10 @@
   --k-semantics-typography-line-height-60: var(--k-primitives-font-line-height-60);
   --k-semantics-typography-line-height-70: var(--k-primitives-font-line-height-70);
   --k-semantics-typography-indent: var(--k-primitives-size-24);
+  --k-semantics-typography-weight-light: var(--k-primitives-font-weight-300);
+  --k-semantics-typography-weight-book: var(--k-primitives-font-weight-300);
+  --k-semantics-typography-weight-regular: var(--k-primitives-font-weight-400);
+  --k-semantics-typography-weight-bold: var(--k-primitives-font-weight-600);
   --k-semantics-color-identity-brand-carmine-525: var(--k-primitives-color-carmine-525);
   --k-semantics-color-identity-base-aubergine-25: var(--k-primitives-color-aubergine-25);
   --k-semantics-color-identity-base-aubergine-50: var(--k-primitives-color-aubergine-50);
@@ -640,8 +636,9 @@
   --k-groups-menus-space-tiny: var(--k-semantics-layout-element-space-tiny);
   --k-groups-menus-space-xsmall: var(--k-semantics-layout-element-space-xsmall);
   --k-groups-menus-space-medium: var(--k-semantics-layout-element-space-medium);
-  --k-groups-menus-space-large: var(--k-semantics-layout-element-space-xxlarge);
+  --k-groups-menus-space-xlarge: var(--k-semantics-layout-element-space-xxlarge);
   --k-groups-menus-space-small: var(--k-semantics-layout-element-space-small);
+  --k-groups-menus-space-large: var(--k-semantics-layout-element-space-large);
   --k-groups-menus-radius-small: var(--k-semantics-layout-element-radius-xxsmall);
   --k-groups-menus-radius-large: var(--k-semantics-layout-element-radius-large);
   --k-groups-menus-radius-medium: var(--k-semantics-layout-element-radius-xsmall);
@@ -653,7 +650,8 @@
   --k-groups-menus-color-wine-150: var(--k-semantics-color-identity-extended-wine-150);
   --k-groups-menus-color-neutral-525: var(--k-semantics-effect-shadow-color-concrete-1000-10);
   --k-groups-menus-color-aubergine-150: var(--k-semantics-color-identity-extended-aubergine-150);
-  --k-groups-menus-visual-image-size: var(--k-semantics-layout-element-size-xlarge);
+  --k-groups-menus-visual-image-size-xlarge: var(--k-semantics-layout-element-size-xlarge);
+  --k-groups-menus-visual-image-size-xxlarge: var(--k-semantics-layout-element-size-xxlarge);
   --k-groups-menus-visual-icon-size-large: var(--k-semantics-visual-icon-size-large);
   --k-groups-menus-visual-icon-size-medium: var(--k-semantics-visual-icon-size-medium);
   --k-groups-menus-visual-icon-size-xlarge: var(--k-semantics-visual-icon-size-xlarge);
@@ -758,6 +756,7 @@
   --k-groups-navigation-bars-space-small: var(--k-semantics-layout-element-space-small);
   --k-groups-navigation-bars-space-large: var(--k-semantics-layout-element-space-large);
   --k-groups-navigation-bars-space-xxlarge: var(--k-semantics-layout-element-space-xxlarge);
+  --k-groups-navigation-bars-space-xsmall: var(--k-semantics-layout-element-space-xsmall);
   --k-groups-navigation-bars-radius: var(--k-semantics-layout-element-radius-xsmall);
   --k-groups-text-blocks-space-medium: var(--k-semantics-layout-element-space-xlarge);
   --k-groups-text-blocks-space-large: var(--k-semantics-layout-element-space-xxlarge);
@@ -826,11 +825,14 @@
   --k-groups-media-players-space-medium: var(--k-semantics-layout-element-space-medium);
   --k-groups-media-players-space-small: var(--k-semantics-layout-element-space-small);
   --k-groups-media-players-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
+  --k-groups-media-players-space-large: var(--k-semantics-layout-element-space-large);
   --k-groups-media-players-border-radius-xsmall: var(--k-semantics-layout-element-radius-xsmall);
   --k-groups-media-players-effects-shadow-blur: var(--k-semantics-effect-shadow-blur-small);
   --k-groups-media-players-effects-shadow-color-neutral-1000-10: var(--k-semantics-effect-shadow-color-concrete-1000-10);
   --k-groups-media-players-color-neutral-25: var(--k-semantics-color-identity-neutral-concrete-25);
   --k-groups-media-players-color-aubergine-50: var(--k-semantics-color-identity-base-aubergine-50);
+  --k-groups-media-players-color-wine-150: var(--k-semantics-color-identity-extended-wine-150);
+  --k-groups-media-players-color-neutral-150: var(--k-semantics-color-identity-neutral-concrete-150);
   --k-groups-popovers-space-medium: var(--k-semantics-layout-element-space-medium);
   --k-groups-popovers-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
   --k-groups-popovers-space-large: var(--k-semantics-layout-element-space-large);
@@ -842,12 +844,15 @@
   --k-groups-popovers-size-large: var(--k-semantics-layout-component-size-large);
   --k-groups-popovers-size-medium: var(--k-semantics-layout-component-size-medium);
   --k-groups-popovers-size-small: var(--k-semantics-layout-component-size-xxxsmall);
-  --k-groups-sliders-size-xxsmall: var(--k-semantics-layout-element-size-tiny);
+  --k-groups-sliders-size-small: var(--k-semantics-layout-element-size-xxsmall);
   --k-groups-sliders-size-xsmall: var(--k-semantics-layout-element-size-xxxsmall);
+  --k-groups-sliders-size-medium: var(--k-semantics-layout-element-size-small);
   --k-groups-sliders-color-purple-450: var(--k-semantics-color-identity-extended-purple-450);
   --k-groups-sliders-color-purple-700: var(--k-semantics-color-identity-extended-purple-700);
   --k-groups-sliders-color-purple-25: var(--k-semantics-color-identity-extended-purple-25);
   --k-groups-sliders-border-radius-xsmall: var(--k-semantics-layout-element-radius-xsmall);
+  --k-groups-sliders-border-radius-circle: var(--k-semantics-layout-element-radius-circle);
+  --k-groups-sliders-space-xxsmall: var(--k-semantics-layout-element-space-xxsmall);
   --k-groups-sliders-space-xsmall: var(--k-semantics-layout-element-space-xsmall);
   --k-groups-switches-color-conctrete-425: var(--k-semantics-color-identity-neutral-concrete-425);
   --k-groups-switches-color-conctrete-525: var(--k-semantics-color-identity-neutral-concrete-525);
@@ -905,6 +910,7 @@
   --k-components-text-label-text-size-large: var(--k-semantics-typography-size-16);
   --k-components-text-label-text-size-small: var(--k-semantics-typography-size-12);
   --k-components-text-label-text-font: var(--k-semantics-typography-font-family-pp-mori);
+  --k-components-text-label-text-weight: var(--k-semantics-typography-weight-regular);
   --k-components-text-body-text-size-small: var(--k-semantics-typography-size-14);
   --k-components-text-body-text-size-medium: var(--k-semantics-typography-size-16);
   --k-components-text-body-text-size-large: var(--k-semantics-typography-size-18);
@@ -922,6 +928,9 @@
   --k-components-text-body-text-line-height-brand-small-long: var(--k-semantics-typography-line-height-25);
   --k-components-text-body-text-font-reading: var(--k-semantics-typography-font-family-inter);
   --k-components-text-body-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
+  --k-components-text-body-text-weight-reading-regular: var(--k-semantics-typography-weight-regular);
+  --k-components-text-body-text-weight-reading-bold: var(--k-semantics-typography-weight-bold);
+  --k-components-text-body-text-weight-brand: var(--k-semantics-typography-weight-regular);
   --k-components-text-heading-text-line-height-brand-large: var(--k-semantics-typography-line-height-60);
   --k-components-text-heading-text-line-height-brand-medium: var(--k-semantics-typography-line-height-50);
   --k-components-text-heading-text-line-height-reading-medium: var(--k-semantics-typography-line-height-40);
@@ -930,10 +939,14 @@
   --k-components-text-heading-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
   --k-components-text-heading-text-size-large: var(--k-semantics-typography-size-40);
   --k-components-text-heading-text-size-medium: var(--k-semantics-typography-size-32);
+  --k-components-text-heading-text-weight-brand: var(--k-semantics-typography-weight-book);
+  --k-components-text-heading-text-weight-reading: var(--k-semantics-typography-weight-light);
   --k-components-text-lead-text-font-reading: var(--k-semantics-typography-font-family-inter);
   --k-components-text-lead-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
   --k-components-text-lead-text-line-height: var(--k-semantics-typography-line-height-28);
   --k-components-text-lead-text-size: var(--k-semantics-typography-size-20);
+  --k-components-text-lead-text-weight-reading-regular: var(--k-semantics-typography-weight-regular);
+  --k-components-text-lead-text-weight-brand: var(--k-semantics-typography-weight-regular);
   --k-components-text-title-text-line-height-brand-large: var(--k-semantics-typography-line-height-30);
   --k-components-text-title-text-line-height-brand-medium: var(--k-semantics-typography-line-height-28);
   --k-components-text-title-text-line-height-reading-medium: var(--k-semantics-typography-line-height-26);
@@ -942,13 +955,17 @@
   --k-components-text-title-text-font-brand: var(--k-semantics-typography-font-family-pp-mori);
   --k-components-text-title-text-size-large: var(--k-semantics-typography-size-24);
   --k-components-text-title-text-size-medium: var(--k-semantics-typography-size-20);
+  --k-components-text-title-text-weight-reading-regular: var(--k-semantics-typography-weight-regular);
+  --k-components-text-title-text-weight-brand: var(--k-semantics-typography-weight-regular);
   --k-components-text-display-size-medium: var(--k-semantics-typography-size-48);
   --k-components-text-display-size-large: var(--k-semantics-typography-size-56);
   --k-components-text-display-text-font: var(--k-semantics-typography-font-family-pp-mori);
   --k-components-text-display-text-line-height-medium: var(--k-semantics-typography-line-height-60);
   --k-components-text-display-text-line-height-large: var(--k-semantics-typography-line-height-70);
+  --k-components-text-display-text-weight: var(--k-semantics-typography-weight-book);
   --k-components-text-display-extended-text-font-alt2: var(--k-semantics-typography-font-family-lyon-display);
   --k-components-text-display-extended-text-font-alt1: var(--k-semantics-typography-font-family-pp-mori);
+  --k-components-text-display-extended-text-weight-alt2: var(--k-semantics-typography-weight-light);
   --k-components-text-display-padding-bottom: var(--k-semantics-layout-element-space-xsmall);
   --k-components-counter-background-color-neutral: var(--k-groups-counter-concrete-150);
   --k-components-counter-background-color-brand-tone-a: var(--k-groups-counter-aubergine-150);
@@ -1385,7 +1402,7 @@
   --k-components-menu-item-border-radius: var(--k-groups-menus-radius-small);
   --k-components-menu-item-padding-block: var(--k-groups-menus-space-small);
   --k-components-menu-item-padding-inline: var(--k-groups-menus-space-medium);
-  --k-components-menu-item-padding-left-nested: var(--k-groups-menus-space-large);
+  --k-components-menu-item-padding-left-nested: var(--k-groups-menus-space-xlarge);
   --k-components-menu-item-padding-right-nested: var(--k-groups-menus-space-medium);
   --k-components-menu-item-text-container-border-bottom-padding: var(--k-groups-menus-space-tiny);
   --k-components-menu-item-text-container-border-weight-active: var(--k-groups-menus-stroke);
@@ -1393,8 +1410,10 @@
   --k-components-menu-item-text-container-gap: var(--k-groups-menus-space-xsmall);
   --k-components-menu-item-background-color-hover: var(--k-groups-menus-color-aubergine-50);
   --k-components-menu-item-background-color-pressed: var(--k-groups-menus-color-wine-50);
-  --k-components-menu-item-image-container-size-height: var(--k-groups-menus-visual-image-size);
-  --k-components-menu-item-image-container-size-width: var(--k-groups-menus-visual-image-size);
+  --k-components-menu-item-image-container-size-small-height: var(--k-groups-menus-visual-image-size-xlarge);
+  --k-components-menu-item-image-container-size-small-width: var(--k-groups-menus-visual-image-size-xlarge);
+  --k-components-menu-item-image-container-size-large-height: var(--k-groups-menus-visual-image-size-xxlarge);
+  --k-components-menu-item-image-container-size-large-width: var(--k-groups-menus-visual-image-size-xxlarge);
   --k-components-menu-item-image-container-border-radius: var(--k-groups-menus-radius-small);
   --k-components-menu-item-icon-size-large: var(--k-groups-menus-visual-icon-size-large);
   --k-components-menu-item-icon-size-medium: var(--k-groups-menus-visual-icon-size-medium);
@@ -1432,7 +1451,7 @@
   --k-components-dropdown-background-color-filled-hover: var(--k-groups-menus-color-wine-50);
   --k-components-dropdown-icon-color: var(--k-groups-menus-color-aubergine-750);
   --k-components-dropdown-icon-size: var(--k-groups-menus-visual-icon-size-large);
-  --k-components-dropdown-size-height: var(--k-groups-menus-space-large);
+  --k-components-dropdown-size-height: var(--k-groups-menus-space-xlarge);
   --k-components-dropdown-border-radius: var(--k-groups-menus-radius-medium);
   --k-components-text-module-padding-inline: var(--k-groups-text-blocks-space-medium);
   --k-components-text-module-padding-top: var(--k-groups-text-blocks-space-large);
@@ -1583,9 +1602,9 @@
   --k-components-dropdown-menu-gap: var(--k-groups-menus-space-xsmall);
   --k-components-contextual-navigation-bar-padding-inline: var(--k-groups-navigation-bars-space-medium);
   --k-components-contextual-navigation-bar-padding-block: var(--k-groups-navigation-bars-space-large);
-  --k-components-contextual-navigation-bar-border-radius: var(--k-groups-navigation-bars-radius);
   --k-components-contextual-navigation-bar-left-container-gap: var(--k-groups-navigation-bars-space-xxlarge);
   --k-components-contextual-navigation-bar-background-color: var(--k-groups-navigation-bars-color-concrete-25);
+  --k-components-contextual-navigation-bar-right-container-gap: var(--k-groups-navigation-bars-space-xsmall);
   --k-components-quote-module-gap-medium-desktop: var(--k-groups-cards-and-modules-space-xlarge);
   --k-components-quote-module-gap-small-desktop: var(--k-groups-cards-and-modules-space-xxlarge);
   --k-components-quote-module-gap-mobile: var(--k-groups-cards-and-modules-space-large);
@@ -1714,7 +1733,7 @@
   --k-components-text-display-text-color: var(--k-semantics-typography-color-brand-aubergine-750);
   --k-components-text-display-extended-text-color: var(--k-semantics-typography-color-brand-carmine-525);
   --k-components-dropdown-item-size-height: var(--k-groups-menus-size);
-  --k-components-dropdown-item-gap: var(--k-groups-menus-space-xsmall);
+  --k-components-dropdown-item-gap: var(--k-groups-menus-space-medium);
   --k-components-dropdown-item-padding-inline: var(--k-groups-menus-space-medium);
   --k-components-dropdown-item-background-color-pressed: var(--k-groups-menus-color-wine-50);
   --k-components-dropdown-item-background-color-hover: var(--k-groups-menus-color-aubergine-50);
@@ -1722,6 +1741,7 @@
   --k-components-dropdown-item-icon-color: var(--k-groups-menus-color-aubergine-750);
   --k-components-content-island-background-color-neutral: var(--k-groups-content-controls-color-neutral-25);
   --k-components-content-island-inner-container-left-gap: var(--k-groups-content-controls-space-xxsmall);
+  --k-components-content-island-inner-container-left-slider-container-padding-left: var(--k-groups-content-controls-space-xsmall);
   --k-components-content-island-border-radius: var(--k-groups-content-controls-border-radius-xsmall);
   --k-components-content-island-effect-shadow-spread: var(--k-groups-content-controls-effects-shadow-spread);
   --k-components-content-island-effect-shadow-color-brand-tone-a: var(--k-groups-content-controls-effects-shadow-color-aubergine-1000-10);
@@ -1806,13 +1826,15 @@
   --k-components-popover-inner-container-gap-small: var(--k-groups-popovers-space-xxsmall);
   --k-components-popover-inner-container-gap-large: var(--k-groups-popovers-space-large);
   --k-components-popover-inner-container-content-block-gap: var(--k-groups-popovers-space-medium);
-  --k-components-slider-border-radius: var(--k-groups-sliders-border-radius-xsmall);
+  --k-components-slider-border-radius: var(--k-groups-sliders-border-radius-circle);
   --k-components-slider-background-color: var(--k-groups-sliders-color-purple-25);
-  --k-components-slider-size-height: var(--k-groups-sliders-size-xxsmall);
+  --k-components-slider-size-height: var(--k-groups-sliders-size-xsmall);
   --k-components-slider-track-filled-background-color: var(--k-groups-sliders-color-purple-450);
+  --k-components-slider-track-filled-size-height: var(--k-groups-sliders-size-xsmall);
   --k-components-slider-thumb-background-color: var(--k-groups-sliders-color-purple-700);
-  --k-components-slider-thumb-size-width: var(--k-groups-sliders-size-xxsmall);
-  --k-components-slider-thumb-size-height: var(--k-groups-sliders-size-xsmall);
+  --k-components-slider-thumb-size-width: var(--k-groups-sliders-size-small);
+  --k-components-slider-thumb-size-height: var(--k-groups-sliders-size-medium);
+  --k-components-slider-controller-top-container-gap: var(--k-groups-sliders-space-xxsmall);
   --k-components-slider-controller-gap: var(--k-groups-sliders-space-xsmall);
   --k-components-media-player-item-background-color-neutral: var(--k-groups-media-players-color-neutral-25);
   --k-components-media-player-item-effect-shadow-blur: var(--k-groups-media-players-effects-shadow-blur);
@@ -1820,10 +1842,15 @@
   --k-components-media-player-item-border-radius: var(--k-groups-media-players-border-radius-xsmall);
   --k-components-media-player-item-padding: var(--k-groups-media-players-space-xxsmall);
   --k-components-media-player-item-inner-container-gap: var(--k-groups-media-players-space-small);
+  --k-components-media-player-item-inner-container-controllers-gap: var(--k-groups-media-players-space-xxsmall);
   --k-components-media-player-border-radius: var(--k-groups-media-players-border-radius-xsmall);
-  --k-components-media-player-border-color: var(--k-groups-media-players-color-aubergine-50);
   --k-components-media-player-padding: var(--k-groups-media-players-space-medium);
   --k-components-media-player-gap: var(--k-groups-media-players-space-small);
+  --k-components-media-player-container-bottom-border-color-brand: var(--k-groups-media-players-color-wine-150);
+  --k-components-media-player-container-bottom-border-color-neutral: var(--k-groups-media-players-color-neutral-150);
+  --k-components-media-player-container-bottom-border-radius: var(--k-groups-media-players-border-radius-xsmall);
+  --k-components-media-player-container-bottom-gap: var(--k-groups-media-players-space-medium);
+  --k-components-media-player-container-bottom-padding: var(--k-groups-media-players-space-large);
   --k-components-switch-background-color-neutral-fallback: var(--k-groups-switches-color-conctrete-425);
   --k-components-switch-background-color-neutral-hover: var(--k-groups-switches-color-conctrete-525);
   --k-components-switch-background-color-brand-fallback: var(--k-groups-switches-color-aubergine-750);

package/dist/tokens.css CHANGED Viewed

@@ -171,6 +171,7 @@
   --kobber-primitives-size-9999: 624.9375rem;
   --kobber-primitives-font-weight-200: 200;
   --kobber-primitives-font-weight-300: 300;
+  --kobber-primitives-font-weight-375: 375;
   --kobber-primitives-font-weight-400: 400;
   --kobber-primitives-font-weight-500: 500;
   --kobber-primitives-font-weight-600: 600;
@@ -227,8 +228,6 @@
   --kobber-primitives-spread-4: 0.25rem;
   --kobber-components-quote-module-tone-a-brand: #ffffff;
   --kobber-components-text-label-text-line-height: auto;
-  --kobber-components-text-heading-text-weight: book;
-  --kobber-components-text-display-text-weight: book;
   --kobber-universal-hyperlink-text-decoration-hover: underline;
   --kobber-semantics-typography-regular: regular;
   --kobber-semantics-typography-book: book;
@@ -276,16 +275,9 @@
   --kobber-groups-counter-concrete-150: var(--kobber-primitives-color-concrete-150);
   --kobber-groups-counter-aubergine-150: var(--kobber-primitives-color-aubergine-150);
   --kobber-groups-counter-aubergine-850: var(--kobber-primitives-color-aubergine-850);
-  --kobber-components-text-label-text-weight: var(--kobber-semantics-typography-regular);
-  --kobber-components-text-body-text-weight-brand: var(--kobber-semantics-typography-regular);
-  --kobber-components-text-body-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
   --kobber-components-text-body-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
-  --kobber-components-text-body-text-weight-reading-bold: var(--kobber-semantics-typography-bold);
-  --kobber-components-text-lead-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
   --kobber-components-text-lead-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
-  --kobber-components-text-title-text-weight-reading-regular: var(--kobber-semantics-typography-regular);
   --kobber-components-text-title-text-weight-reading-italic: var(--kobber-semantics-typography-regular-italic);
-  --kobber-components-text-display-extended-text-weight-alt2: var(--kobber-semantics-typography-light);
   --kobber-semantics-typography-font-family-inter: var(--kobber-primitives-font-family-inter);
   --kobber-semantics-typography-font-family-lyon-display: var(--kobber-primitives-font-family-lyon-display);
   --kobber-semantics-typography-font-family-pp-mori: var(--kobber-primitives-font-family-pp-mori);
@@ -317,6 +309,10 @@
   --kobber-semantics-typography-line-height-60: var(--kobber-primitives-font-line-height-60);
   --kobber-semantics-typography-line-height-70: var(--kobber-primitives-font-line-height-70);
   --kobber-semantics-typography-indent: var(--kobber-primitives-size-24);
+  --kobber-semantics-typography-weight-light: var(--kobber-primitives-font-weight-300);
+  --kobber-semantics-typography-weight-book: var(--kobber-primitives-font-weight-300);
+  --kobber-semantics-typography-weight-regular: var(--kobber-primitives-font-weight-400);
+  --kobber-semantics-typography-weight-bold: var(--kobber-primitives-font-weight-600);
   --kobber-semantics-color-identity-brand-carmine-525: var(--kobber-primitives-color-carmine-525);
   --kobber-semantics-color-identity-base-aubergine-25: var(--kobber-primitives-color-aubergine-25);
   --kobber-semantics-color-identity-base-aubergine-50: var(--kobber-primitives-color-aubergine-50);
@@ -640,8 +636,9 @@
   --kobber-groups-menus-space-tiny: var(--kobber-semantics-layout-element-space-tiny);
   --kobber-groups-menus-space-xsmall: var(--kobber-semantics-layout-element-space-xsmall);
   --kobber-groups-menus-space-medium: var(--kobber-semantics-layout-element-space-medium);
-  --kobber-groups-menus-space-large: var(--kobber-semantics-layout-element-space-xxlarge);
+  --kobber-groups-menus-space-xlarge: var(--kobber-semantics-layout-element-space-xxlarge);
   --kobber-groups-menus-space-small: var(--kobber-semantics-layout-element-space-small);
+  --kobber-groups-menus-space-large: var(--kobber-semantics-layout-element-space-large);
   --kobber-groups-menus-radius-small: var(--kobber-semantics-layout-element-radius-xxsmall);
   --kobber-groups-menus-radius-large: var(--kobber-semantics-layout-element-radius-large);
   --kobber-groups-menus-radius-medium: var(--kobber-semantics-layout-element-radius-xsmall);
@@ -653,7 +650,8 @@
   --kobber-groups-menus-color-wine-150: var(--kobber-semantics-color-identity-extended-wine-150);
   --kobber-groups-menus-color-neutral-525: var(--kobber-semantics-effect-shadow-color-concrete-1000-10);
   --kobber-groups-menus-color-aubergine-150: var(--kobber-semantics-color-identity-extended-aubergine-150);
-  --kobber-groups-menus-visual-image-size: var(--kobber-semantics-layout-element-size-xlarge);
+  --kobber-groups-menus-visual-image-size-xlarge: var(--kobber-semantics-layout-element-size-xlarge);
+  --kobber-groups-menus-visual-image-size-xxlarge: var(--kobber-semantics-layout-element-size-xxlarge);
   --kobber-groups-menus-visual-icon-size-large: var(--kobber-semantics-visual-icon-size-large);
   --kobber-groups-menus-visual-icon-size-medium: var(--kobber-semantics-visual-icon-size-medium);
   --kobber-groups-menus-visual-icon-size-xlarge: var(--kobber-semantics-visual-icon-size-xlarge);
@@ -758,6 +756,7 @@
   --kobber-groups-navigation-bars-space-small: var(--kobber-semantics-layout-element-space-small);
   --kobber-groups-navigation-bars-space-large: var(--kobber-semantics-layout-element-space-large);
   --kobber-groups-navigation-bars-space-xxlarge: var(--kobber-semantics-layout-element-space-xxlarge);
+  --kobber-groups-navigation-bars-space-xsmall: var(--kobber-semantics-layout-element-space-xsmall);
   --kobber-groups-navigation-bars-radius: var(--kobber-semantics-layout-element-radius-xsmall);
   --kobber-groups-text-blocks-space-medium: var(--kobber-semantics-layout-element-space-xlarge);
   --kobber-groups-text-blocks-space-large: var(--kobber-semantics-layout-element-space-xxlarge);
@@ -826,11 +825,14 @@
   --kobber-groups-media-players-space-medium: var(--kobber-semantics-layout-element-space-medium);
   --kobber-groups-media-players-space-small: var(--kobber-semantics-layout-element-space-small);
   --kobber-groups-media-players-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
+  --kobber-groups-media-players-space-large: var(--kobber-semantics-layout-element-space-large);
   --kobber-groups-media-players-border-radius-xsmall: var(--kobber-semantics-layout-element-radius-xsmall);
   --kobber-groups-media-players-effects-shadow-blur: var(--kobber-semantics-effect-shadow-blur-small);
   --kobber-groups-media-players-effects-shadow-color-neutral-1000-10: var(--kobber-semantics-effect-shadow-color-concrete-1000-10);
   --kobber-groups-media-players-color-neutral-25: var(--kobber-semantics-color-identity-neutral-concrete-25);
   --kobber-groups-media-players-color-aubergine-50: var(--kobber-semantics-color-identity-base-aubergine-50);
+  --kobber-groups-media-players-color-wine-150: var(--kobber-semantics-color-identity-extended-wine-150);
+  --kobber-groups-media-players-color-neutral-150: var(--kobber-semantics-color-identity-neutral-concrete-150);
   --kobber-groups-popovers-space-medium: var(--kobber-semantics-layout-element-space-medium);
   --kobber-groups-popovers-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
   --kobber-groups-popovers-space-large: var(--kobber-semantics-layout-element-space-large);
@@ -842,12 +844,15 @@
   --kobber-groups-popovers-size-large: var(--kobber-semantics-layout-component-size-large);
   --kobber-groups-popovers-size-medium: var(--kobber-semantics-layout-component-size-medium);
   --kobber-groups-popovers-size-small: var(--kobber-semantics-layout-component-size-xxxsmall);
-  --kobber-groups-sliders-size-xxsmall: var(--kobber-semantics-layout-element-size-tiny);
+  --kobber-groups-sliders-size-small: var(--kobber-semantics-layout-element-size-xxsmall);
   --kobber-groups-sliders-size-xsmall: var(--kobber-semantics-layout-element-size-xxxsmall);
+  --kobber-groups-sliders-size-medium: var(--kobber-semantics-layout-element-size-small);
   --kobber-groups-sliders-color-purple-450: var(--kobber-semantics-color-identity-extended-purple-450);
   --kobber-groups-sliders-color-purple-700: var(--kobber-semantics-color-identity-extended-purple-700);
   --kobber-groups-sliders-color-purple-25: var(--kobber-semantics-color-identity-extended-purple-25);
   --kobber-groups-sliders-border-radius-xsmall: var(--kobber-semantics-layout-element-radius-xsmall);
+  --kobber-groups-sliders-border-radius-circle: var(--kobber-semantics-layout-element-radius-circle);
+  --kobber-groups-sliders-space-xxsmall: var(--kobber-semantics-layout-element-space-xxsmall);
   --kobber-groups-sliders-space-xsmall: var(--kobber-semantics-layout-element-space-xsmall);
   --kobber-groups-switches-color-conctrete-425: var(--kobber-semantics-color-identity-neutral-concrete-425);
   --kobber-groups-switches-color-conctrete-525: var(--kobber-semantics-color-identity-neutral-concrete-525);
@@ -905,6 +910,7 @@
   --kobber-components-text-label-text-size-large: var(--kobber-semantics-typography-size-16);
   --kobber-components-text-label-text-size-small: var(--kobber-semantics-typography-size-12);
   --kobber-components-text-label-text-font: var(--kobber-semantics-typography-font-family-pp-mori);
+  --kobber-components-text-label-text-weight: var(--kobber-semantics-typography-weight-regular);
   --kobber-components-text-body-text-size-small: var(--kobber-semantics-typography-size-14);
   --kobber-components-text-body-text-size-medium: var(--kobber-semantics-typography-size-16);
   --kobber-components-text-body-text-size-large: var(--kobber-semantics-typography-size-18);
@@ -922,6 +928,9 @@
   --kobber-components-text-body-text-line-height-brand-small-long: var(--kobber-semantics-typography-line-height-25);
   --kobber-components-text-body-text-font-reading: var(--kobber-semantics-typography-font-family-inter);
   --kobber-components-text-body-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
+  --kobber-components-text-body-text-weight-reading-regular: var(--kobber-semantics-typography-weight-regular);
+  --kobber-components-text-body-text-weight-reading-bold: var(--kobber-semantics-typography-weight-bold);
+  --kobber-components-text-body-text-weight-brand: var(--kobber-semantics-typography-weight-regular);
   --kobber-components-text-heading-text-line-height-brand-large: var(--kobber-semantics-typography-line-height-60);
   --kobber-components-text-heading-text-line-height-brand-medium: var(--kobber-semantics-typography-line-height-50);
   --kobber-components-text-heading-text-line-height-reading-medium: var(--kobber-semantics-typography-line-height-40);
@@ -930,10 +939,14 @@
   --kobber-components-text-heading-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
   --kobber-components-text-heading-text-size-large: var(--kobber-semantics-typography-size-40);
   --kobber-components-text-heading-text-size-medium: var(--kobber-semantics-typography-size-32);
+  --kobber-components-text-heading-text-weight-brand: var(--kobber-semantics-typography-weight-book);
+  --kobber-components-text-heading-text-weight-reading: var(--kobber-semantics-typography-weight-light);
   --kobber-components-text-lead-text-font-reading: var(--kobber-semantics-typography-font-family-inter);
   --kobber-components-text-lead-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
   --kobber-components-text-lead-text-line-height: var(--kobber-semantics-typography-line-height-28);
   --kobber-components-text-lead-text-size: var(--kobber-semantics-typography-size-20);
+  --kobber-components-text-lead-text-weight-reading-regular: var(--kobber-semantics-typography-weight-regular);
+  --kobber-components-text-lead-text-weight-brand: var(--kobber-semantics-typography-weight-regular);
   --kobber-components-text-title-text-line-height-brand-large: var(--kobber-semantics-typography-line-height-30);
   --kobber-components-text-title-text-line-height-brand-medium: var(--kobber-semantics-typography-line-height-28);
   --kobber-components-text-title-text-line-height-reading-medium: var(--kobber-semantics-typography-line-height-26);
@@ -942,13 +955,17 @@
   --kobber-components-text-title-text-font-brand: var(--kobber-semantics-typography-font-family-pp-mori);
   --kobber-components-text-title-text-size-large: var(--kobber-semantics-typography-size-24);
   --kobber-components-text-title-text-size-medium: var(--kobber-semantics-typography-size-20);
+  --kobber-components-text-title-text-weight-reading-regular: var(--kobber-semantics-typography-weight-regular);
+  --kobber-components-text-title-text-weight-brand: var(--kobber-semantics-typography-weight-regular);
   --kobber-components-text-display-size-medium: var(--kobber-semantics-typography-size-48);
   --kobber-components-text-display-size-large: var(--kobber-semantics-typography-size-56);
   --kobber-components-text-display-text-font: var(--kobber-semantics-typography-font-family-pp-mori);
   --kobber-components-text-display-text-line-height-medium: var(--kobber-semantics-typography-line-height-60);
   --kobber-components-text-display-text-line-height-large: var(--kobber-semantics-typography-line-height-70);
+  --kobber-components-text-display-text-weight: var(--kobber-semantics-typography-weight-book);
   --kobber-components-text-display-extended-text-font-alt2: var(--kobber-semantics-typography-font-family-lyon-display);
   --kobber-components-text-display-extended-text-font-alt1: var(--kobber-semantics-typography-font-family-pp-mori);
+  --kobber-components-text-display-extended-text-weight-alt2: var(--kobber-semantics-typography-weight-light);
   --kobber-components-text-display-padding-bottom: var(--kobber-semantics-layout-element-space-xsmall);
   --kobber-components-counter-background-color-neutral: var(--kobber-groups-counter-concrete-150);
   --kobber-components-counter-background-color-brand-tone-a: var(--kobber-groups-counter-aubergine-150);
@@ -1385,7 +1402,7 @@
   --kobber-components-menu-item-border-radius: var(--kobber-groups-menus-radius-small);
   --kobber-components-menu-item-padding-block: var(--kobber-groups-menus-space-small);
   --kobber-components-menu-item-padding-inline: var(--kobber-groups-menus-space-medium);
-  --kobber-components-menu-item-padding-left-nested: var(--kobber-groups-menus-space-large);
+  --kobber-components-menu-item-padding-left-nested: var(--kobber-groups-menus-space-xlarge);
   --kobber-components-menu-item-padding-right-nested: var(--kobber-groups-menus-space-medium);
   --kobber-components-menu-item-text-container-border-bottom-padding: var(--kobber-groups-menus-space-tiny);
   --kobber-components-menu-item-text-container-border-weight-active: var(--kobber-groups-menus-stroke);
@@ -1393,8 +1410,10 @@
   --kobber-components-menu-item-text-container-gap: var(--kobber-groups-menus-space-xsmall);
   --kobber-components-menu-item-background-color-hover: var(--kobber-groups-menus-color-aubergine-50);
   --kobber-components-menu-item-background-color-pressed: var(--kobber-groups-menus-color-wine-50);
-  --kobber-components-menu-item-image-container-size-height: var(--kobber-groups-menus-visual-image-size);
-  --kobber-components-menu-item-image-container-size-width: var(--kobber-groups-menus-visual-image-size);
+  --kobber-components-menu-item-image-container-size-small-height: var(--kobber-groups-menus-visual-image-size-xlarge);
+  --kobber-components-menu-item-image-container-size-small-width: var(--kobber-groups-menus-visual-image-size-xlarge);
+  --kobber-components-menu-item-image-container-size-large-height: var(--kobber-groups-menus-visual-image-size-xxlarge);
+  --kobber-components-menu-item-image-container-size-large-width: var(--kobber-groups-menus-visual-image-size-xxlarge);
   --kobber-components-menu-item-image-container-border-radius: var(--kobber-groups-menus-radius-small);
   --kobber-components-menu-item-icon-size-large: var(--kobber-groups-menus-visual-icon-size-large);
   --kobber-components-menu-item-icon-size-medium: var(--kobber-groups-menus-visual-icon-size-medium);
@@ -1432,7 +1451,7 @@
   --kobber-components-dropdown-background-color-filled-hover: var(--kobber-groups-menus-color-wine-50);
   --kobber-components-dropdown-icon-color: var(--kobber-groups-menus-color-aubergine-750);
   --kobber-components-dropdown-icon-size: var(--kobber-groups-menus-visual-icon-size-large);
-  --kobber-components-dropdown-size-height: var(--kobber-groups-menus-space-large);
+  --kobber-components-dropdown-size-height: var(--kobber-groups-menus-space-xlarge);
   --kobber-components-dropdown-border-radius: var(--kobber-groups-menus-radius-medium);
   --kobber-components-text-module-padding-inline: var(--kobber-groups-text-blocks-space-medium);
   --kobber-components-text-module-padding-top: var(--kobber-groups-text-blocks-space-large);
@@ -1583,9 +1602,9 @@
   --kobber-components-dropdown-menu-gap: var(--kobber-groups-menus-space-xsmall);
   --kobber-components-contextual-navigation-bar-padding-inline: var(--kobber-groups-navigation-bars-space-medium);
   --kobber-components-contextual-navigation-bar-padding-block: var(--kobber-groups-navigation-bars-space-large);
-  --kobber-components-contextual-navigation-bar-border-radius: var(--kobber-groups-navigation-bars-radius);
   --kobber-components-contextual-navigation-bar-left-container-gap: var(--kobber-groups-navigation-bars-space-xxlarge);
   --kobber-components-contextual-navigation-bar-background-color: var(--kobber-groups-navigation-bars-color-concrete-25);
+  --kobber-components-contextual-navigation-bar-right-container-gap: var(--kobber-groups-navigation-bars-space-xsmall);
   --kobber-components-quote-module-gap-medium-desktop: var(--kobber-groups-cards-and-modules-space-xlarge);
   --kobber-components-quote-module-gap-small-desktop: var(--kobber-groups-cards-and-modules-space-xxlarge);
   --kobber-components-quote-module-gap-mobile: var(--kobber-groups-cards-and-modules-space-large);
@@ -1714,7 +1733,7 @@
   --kobber-components-text-display-text-color: var(--kobber-semantics-typography-color-brand-aubergine-750);
   --kobber-components-text-display-extended-text-color: var(--kobber-semantics-typography-color-brand-carmine-525);
   --kobber-components-dropdown-item-size-height: var(--kobber-groups-menus-size);
-  --kobber-components-dropdown-item-gap: var(--kobber-groups-menus-space-xsmall);
+  --kobber-components-dropdown-item-gap: var(--kobber-groups-menus-space-medium);
   --kobber-components-dropdown-item-padding-inline: var(--kobber-groups-menus-space-medium);
   --kobber-components-dropdown-item-background-color-pressed: var(--kobber-groups-menus-color-wine-50);
   --kobber-components-dropdown-item-background-color-hover: var(--kobber-groups-menus-color-aubergine-50);
@@ -1722,6 +1741,7 @@
   --kobber-components-dropdown-item-icon-color: var(--kobber-groups-menus-color-aubergine-750);
   --kobber-components-content-island-background-color-neutral: var(--kobber-groups-content-controls-color-neutral-25);
   --kobber-components-content-island-inner-container-left-gap: var(--kobber-groups-content-controls-space-xxsmall);
+  --kobber-components-content-island-inner-container-left-slider-container-padding-left: var(--kobber-groups-content-controls-space-xsmall);
   --kobber-components-content-island-border-radius: var(--kobber-groups-content-controls-border-radius-xsmall);
   --kobber-components-content-island-effect-shadow-spread: var(--kobber-groups-content-controls-effects-shadow-spread);
   --kobber-components-content-island-effect-shadow-color-brand-tone-a: var(--kobber-groups-content-controls-effects-shadow-color-aubergine-1000-10);
@@ -1806,13 +1826,15 @@
   --kobber-components-popover-inner-container-gap-small: var(--kobber-groups-popovers-space-xxsmall);
   --kobber-components-popover-inner-container-gap-large: var(--kobber-groups-popovers-space-large);
   --kobber-components-popover-inner-container-content-block-gap: var(--kobber-groups-popovers-space-medium);
-  --kobber-components-slider-border-radius: var(--kobber-groups-sliders-border-radius-xsmall);
+  --kobber-components-slider-border-radius: var(--kobber-groups-sliders-border-radius-circle);
   --kobber-components-slider-background-color: var(--kobber-groups-sliders-color-purple-25);
-  --kobber-components-slider-size-height: var(--kobber-groups-sliders-size-xxsmall);
+  --kobber-components-slider-size-height: var(--kobber-groups-sliders-size-xsmall);
   --kobber-components-slider-track-filled-background-color: var(--kobber-groups-sliders-color-purple-450);
+  --kobber-components-slider-track-filled-size-height: var(--kobber-groups-sliders-size-xsmall);
   --kobber-components-slider-thumb-background-color: var(--kobber-groups-sliders-color-purple-700);
-  --kobber-components-slider-thumb-size-width: var(--kobber-groups-sliders-size-xxsmall);
-  --kobber-components-slider-thumb-size-height: var(--kobber-groups-sliders-size-xsmall);
+  --kobber-components-slider-thumb-size-width: var(--kobber-groups-sliders-size-small);
+  --kobber-components-slider-thumb-size-height: var(--kobber-groups-sliders-size-medium);
+  --kobber-components-slider-controller-top-container-gap: var(--kobber-groups-sliders-space-xxsmall);
   --kobber-components-slider-controller-gap: var(--kobber-groups-sliders-space-xsmall);
   --kobber-components-media-player-item-background-color-neutral: var(--kobber-groups-media-players-color-neutral-25);
   --kobber-components-media-player-item-effect-shadow-blur: var(--kobber-groups-media-players-effects-shadow-blur);
@@ -1820,10 +1842,15 @@
   --kobber-components-media-player-item-border-radius: var(--kobber-groups-media-players-border-radius-xsmall);
   --kobber-components-media-player-item-padding: var(--kobber-groups-media-players-space-xxsmall);
   --kobber-components-media-player-item-inner-container-gap: var(--kobber-groups-media-players-space-small);
+  --kobber-components-media-player-item-inner-container-controllers-gap: var(--kobber-groups-media-players-space-xxsmall);
   --kobber-components-media-player-border-radius: var(--kobber-groups-media-players-border-radius-xsmall);
-  --kobber-components-media-player-border-color: var(--kobber-groups-media-players-color-aubergine-50);
   --kobber-components-media-player-padding: var(--kobber-groups-media-players-space-medium);
   --kobber-components-media-player-gap: var(--kobber-groups-media-players-space-small);
+  --kobber-components-media-player-container-bottom-border-color-brand: var(--kobber-groups-media-players-color-wine-150);
+  --kobber-components-media-player-container-bottom-border-color-neutral: var(--kobber-groups-media-players-color-neutral-150);
+  --kobber-components-media-player-container-bottom-border-radius: var(--kobber-groups-media-players-border-radius-xsmall);
+  --kobber-components-media-player-container-bottom-gap: var(--kobber-groups-media-players-space-medium);
+  --kobber-components-media-player-container-bottom-padding: var(--kobber-groups-media-players-space-large);
   --kobber-components-switch-background-color-neutral-fallback: var(--kobber-groups-switches-color-conctrete-425);
   --kobber-components-switch-background-color-neutral-hover: var(--kobber-groups-switches-color-conctrete-525);
   --kobber-components-switch-background-color-brand-fallback: var(--kobber-groups-switches-color-aubergine-750);

package/dist/tokens.d.ts CHANGED Viewed

@@ -201,6 +201,7 @@ export const primitives: {
     "weight": {
       "200": 200,
       "300": 300,
+      "375": 375,
       "400": 400,
       "500": 500,
       "600": 600
@@ -601,8 +602,9 @@ export const groups: {
       "tiny": 2,
       "xsmall": 8,
       "medium": 16,
-      "large": 40,
-      "small": 12
+      "xlarge": 40,
+      "small": 12,
+      "large": 24
     },
     "radius": {
       "small": 4,
@@ -621,7 +623,10 @@ export const groups: {
     },
     "visual": {
       "image": {
-        "size": 40
+        "size": {
+          "xlarge": 40,
+          "xxlarge": 48
+        }
       },
       "icon": {
         "size": {
@@ -810,7 +815,8 @@ export const groups: {
       "xlarge": 32,
       "small": 12,
       "large": 24,
-      "xxlarge": 40
+      "xxlarge": 40,
+      "xsmall": 8
     },
     "radius": 8
   },
@@ -936,7 +942,8 @@ export const groups: {
     "space": {
       "medium": 16,
       "small": 12,
-      "xxsmall": 4
+      "xxsmall": 4,
+      "large": 24
     },
     "border": {
       "radius": {
@@ -953,7 +960,9 @@ export const groups: {
     },
     "color": {
       "neutral-25": "#f9fafb",
-      "aubergine-50": "#f9eaed"
+      "aubergine-50": "#f9eaed",
+      "wine-150": "#e5cfd3",
+      "neutral-150": "#cfd5dd"
     }
   },
   "popovers": {
@@ -989,8 +998,9 @@ export const groups: {
   },
   "sliders": {
     "size": {
-      "xxsmall": 4,
-      "xsmall": 8
+      "small": 10,
+      "xsmall": 8,
+      "medium": 16
     },
     "color": {
       "purple-450": "#7155f0",
@@ -999,10 +1009,12 @@ export const groups: {
     },
     "border": {
       "radius": {
-        "xsmall": 8
+        "xsmall": 8,
+        "circle": 9999
       }
     },
     "space": {
+      "xxsmall": 4,
       "xsmall": 8
     }
   },
@@ -2145,8 +2157,14 @@ export const components: {
     },
     "imageContainer": {
       "size": {
-        "height": 40,
-        "width": 40
+        "small": {
+          "height": 40,
+          "width": 40
+        },
+        "large": {
+          "height": 48,
+          "width": 48
+        }
       },
       "border": {
         "radius": 4
@@ -2697,14 +2715,14 @@ export const components: {
       "inline": 16,
       "block": 24
     },
-    "border": {
-      "radius": 8
-    },
     "leftContainer": {
       "gap": 40
     },
     "background": {
       "color": "#f9fafb"
+    },
+    "rightContainer": {
+      "gap": 8
     }
   },
   "quoteModule": {
@@ -2835,8 +2853,8 @@ export const components: {
         "small": 12
       },
       "lineHeight": "auto",
-      "weight": "regular",
-      "font": "pp-mori"
+      "font": "pp-mori",
+      "weight": 400
     }
   },
   "textBody": {
@@ -2931,12 +2949,12 @@ export const components: {
         "brand": "pp-mori"
       },
       "weight": {
-        "brand": "regular",
         "reading": {
-          "regular": "regular",
           "italic": "italic",
-          "bold": "semibold"
-        }
+          "regular": 400,
+          "bold": 600
+        },
+        "brand": 400
       }
     }
   },
@@ -2990,10 +3008,13 @@ export const components: {
           "toneA": "#333a41"
         }
       },
-      "weight": "book",
       "size": {
         "large": 40,
         "medium": 32
+      },
+      "weight": {
+        "brand": 300,
+        "reading": 300
       }
     }
   },
@@ -3037,14 +3058,15 @@ export const components: {
         "reading": "inter",
         "brand": "pp-mori"
       },
+      "lineHeight": 28,
+      "size": 20,
       "weight": {
         "reading": {
-          "regular": "regular",
-          "italic": "italic"
-        }
-      },
-      "lineHeight": 28,
-      "size": 20
+          "italic": "italic",
+          "regular": 400
+        },
+        "brand": 400
+      }
     }
   },
   "textTitle": {
@@ -3109,15 +3131,16 @@ export const components: {
           "toneB": "#eceef1"
         }
       },
-      "weight": {
-        "reading": {
-          "regular": "regular",
-          "italic": "italic"
-        }
-      },
       "size": {
         "large": 24,
         "medium": 20
+      },
+      "weight": {
+        "reading": {
+          "italic": "italic",
+          "regular": 400
+        },
+        "brand": 400
       }
     }
   },
@@ -3128,22 +3151,22 @@ export const components: {
     },
     "text": {
       "color": "#691837",
-      "weight": "book",
       "font": "pp-mori",
       "lineHeight": {
         "medium": 60,
         "large": 70
-      }
+      },
+      "weight": 300
     },
     "extended": {
       "text": {
         "color": "#dc134f",
-        "weight": {
-          "alt2": "light"
-        },
         "font": {
           "alt2": "lyon-display",
           "alt1": "pp-mori"
+        },
+        "weight": {
+          "alt2": 300
         }
       }
     },
@@ -3155,7 +3178,7 @@ export const components: {
     "size": {
       "height": 40
     },
-    "gap": 8,
+    "gap": 16,
     "padding": {
       "inline": 16
     },
@@ -3179,7 +3202,10 @@ export const components: {
       }
     },
     "innerContainerLeft": {
-      "gap": 4
+      "gap": 4,
+      "sliderContainer": {
+        "paddingLeft": 8
+      }
     },
     "border": {
       "radius": 8
@@ -3429,17 +3455,20 @@ export const components: {
   },
   "_slider": {
     "border": {
-      "radius": 8
+      "radius": 9999
     },
     "background": {
       "color": "#ece6f9"
     },
     "size": {
-      "height": 4
+      "height": 8
     },
     "trackFilled": {
       "background": {
         "color": "#7155f0"
+      },
+      "size": {
+        "height": 8
       }
     },
     "thumb": {
@@ -3447,12 +3476,15 @@ export const components: {
         "color": "#4420b0"
       },
       "size": {
-        "width": 4,
-        "height": 8
+        "width": 10,
+        "height": 16
       }
     }
   },
   "_sliderController": {
+    "topContainer": {
+      "gap": 4
+    },
     "gap": 8
   },
   "mediaPlayerItem": {
@@ -3474,16 +3506,29 @@ export const components: {
     },
     "padding": 4,
     "innerContainer": {
-      "gap": 12
+      "gap": 12,
+      "controllers": {
+        "gap": 4
+      }
     }
   },
   "mediaPlayer": {
     "border": {
-      "radius": 8,
-      "color": "#f9eaed"
+      "radius": 8
     },
     "padding": 16,
-    "gap": 12
+    "gap": 12,
+    "containerBottom": {
+      "border": {
+        "color": {
+          "brand": "#e5cfd3",
+          "neutral": "#cfd5dd"
+        },
+        "radius": 8
+      },
+      "gap": 16,
+      "padding": 24
+    }
   },
   "switch": {
     "background": {
@@ -3664,7 +3709,13 @@ export const semantics: {
     "light": "light",
     "indent": 24,
     "regularItalic": "italic",
-    "bold": "semibold"
+    "bold": "semibold",
+    "weight": {
+      "light": 300,
+      "book": 300,
+      "regular": 400,
+      "bold": 600
+    }
   },
   "color": {
     "identity": {

package/dist/tokens.js CHANGED Viewed

@@ -200,6 +200,7 @@ export const primitives = {
     "weight": {
       "200": 200,
       "300": 300,
+      "375": 375,
       "400": 400,
       "500": 500,
       "600": 600
@@ -600,8 +601,9 @@ export const groups = {
       "tiny": 2,
       "xsmall": 8,
       "medium": 16,
-      "large": 40,
-      "small": 12
+      "xlarge": 40,
+      "small": 12,
+      "large": 24
     },
     "radius": {
       "small": 4,
@@ -620,7 +622,10 @@ export const groups = {
     },
     "visual": {
       "image": {
-        "size": 40
+        "size": {
+          "xlarge": 40,
+          "xxlarge": 48
+        }
       },
       "icon": {
         "size": {
@@ -809,7 +814,8 @@ export const groups = {
       "xlarge": 32,
       "small": 12,
       "large": 24,
-      "xxlarge": 40
+      "xxlarge": 40,
+      "xsmall": 8
     },
     "radius": 8
   },
@@ -935,7 +941,8 @@ export const groups = {
     "space": {
       "medium": 16,
       "small": 12,
-      "xxsmall": 4
+      "xxsmall": 4,
+      "large": 24
     },
     "border": {
       "radius": {
@@ -952,7 +959,9 @@ export const groups = {
     },
     "color": {
       "neutral-25": "#f9fafb",
-      "aubergine-50": "#f9eaed"
+      "aubergine-50": "#f9eaed",
+      "wine-150": "#e5cfd3",
+      "neutral-150": "#cfd5dd"
     }
   },
   "popovers": {
@@ -988,8 +997,9 @@ export const groups = {
   },
   "sliders": {
     "size": {
-      "xxsmall": 4,
-      "xsmall": 8
+      "small": 10,
+      "xsmall": 8,
+      "medium": 16
     },
     "color": {
       "purple-450": "#7155f0",
@@ -998,10 +1008,12 @@ export const groups = {
     },
     "border": {
       "radius": {
-        "xsmall": 8
+        "xsmall": 8,
+        "circle": 9999
       }
     },
     "space": {
+      "xxsmall": 4,
       "xsmall": 8
     }
   },
@@ -2144,8 +2156,14 @@ export const components = {
     },
     "imageContainer": {
       "size": {
-        "height": 40,
-        "width": 40
+        "small": {
+          "height": 40,
+          "width": 40
+        },
+        "large": {
+          "height": 48,
+          "width": 48
+        }
       },
       "border": {
         "radius": 4
@@ -2696,14 +2714,14 @@ export const components = {
       "inline": 16,
       "block": 24
     },
-    "border": {
-      "radius": 8
-    },
     "leftContainer": {
       "gap": 40
     },
     "background": {
       "color": "#f9fafb"
+    },
+    "rightContainer": {
+      "gap": 8
     }
   },
   "quoteModule": {
@@ -2834,8 +2852,8 @@ export const components = {
         "small": 12
       },
       "lineHeight": "auto",
-      "weight": "regular",
-      "font": "pp-mori"
+      "font": "pp-mori",
+      "weight": 400
     }
   },
   "textBody": {
@@ -2930,12 +2948,12 @@ export const components = {
         "brand": "pp-mori"
       },
       "weight": {
-        "brand": "regular",
         "reading": {
-          "regular": "regular",
           "italic": "italic",
-          "bold": "semibold"
-        }
+          "regular": 400,
+          "bold": 600
+        },
+        "brand": 400
       }
     }
   },
@@ -2989,10 +3007,13 @@ export const components = {
           "toneA": "#333a41"
         }
       },
-      "weight": "book",
       "size": {
         "large": 40,
         "medium": 32
+      },
+      "weight": {
+        "brand": 300,
+        "reading": 300
       }
     }
   },
@@ -3036,14 +3057,15 @@ export const components = {
         "reading": "inter",
         "brand": "pp-mori"
       },
+      "lineHeight": 28,
+      "size": 20,
       "weight": {
         "reading": {
-          "regular": "regular",
-          "italic": "italic"
-        }
-      },
-      "lineHeight": 28,
-      "size": 20
+          "italic": "italic",
+          "regular": 400
+        },
+        "brand": 400
+      }
     }
   },
   "textTitle": {
@@ -3108,15 +3130,16 @@ export const components = {
           "toneB": "#eceef1"
         }
       },
-      "weight": {
-        "reading": {
-          "regular": "regular",
-          "italic": "italic"
-        }
-      },
       "size": {
         "large": 24,
         "medium": 20
+      },
+      "weight": {
+        "reading": {
+          "italic": "italic",
+          "regular": 400
+        },
+        "brand": 400
       }
     }
   },
@@ -3127,22 +3150,22 @@ export const components = {
     },
     "text": {
       "color": "#691837",
-      "weight": "book",
       "font": "pp-mori",
       "lineHeight": {
         "medium": 60,
         "large": 70
-      }
+      },
+      "weight": 300
     },
     "extended": {
       "text": {
         "color": "#dc134f",
-        "weight": {
-          "alt2": "light"
-        },
         "font": {
           "alt2": "lyon-display",
           "alt1": "pp-mori"
+        },
+        "weight": {
+          "alt2": 300
         }
       }
     },
@@ -3154,7 +3177,7 @@ export const components = {
     "size": {
       "height": 40
     },
-    "gap": 8,
+    "gap": 16,
     "padding": {
       "inline": 16
     },
@@ -3178,7 +3201,10 @@ export const components = {
       }
     },
     "innerContainerLeft": {
-      "gap": 4
+      "gap": 4,
+      "sliderContainer": {
+        "paddingLeft": 8
+      }
     },
     "border": {
       "radius": 8
@@ -3428,17 +3454,20 @@ export const components = {
   },
   "_slider": {
     "border": {
-      "radius": 8
+      "radius": 9999
     },
     "background": {
       "color": "#ece6f9"
     },
     "size": {
-      "height": 4
+      "height": 8
     },
     "trackFilled": {
       "background": {
         "color": "#7155f0"
+      },
+      "size": {
+        "height": 8
       }
     },
     "thumb": {
@@ -3446,12 +3475,15 @@ export const components = {
         "color": "#4420b0"
       },
       "size": {
-        "width": 4,
-        "height": 8
+        "width": 10,
+        "height": 16
       }
     }
   },
   "_sliderController": {
+    "topContainer": {
+      "gap": 4
+    },
     "gap": 8
   },
   "mediaPlayerItem": {
@@ -3473,16 +3505,29 @@ export const components = {
     },
     "padding": 4,
     "innerContainer": {
-      "gap": 12
+      "gap": 12,
+      "controllers": {
+        "gap": 4
+      }
     }
   },
   "mediaPlayer": {
     "border": {
-      "radius": 8,
-      "color": "#f9eaed"
+      "radius": 8
     },
     "padding": 16,
-    "gap": 12
+    "gap": 12,
+    "containerBottom": {
+      "border": {
+        "color": {
+          "brand": "#e5cfd3",
+          "neutral": "#cfd5dd"
+        },
+        "radius": 8
+      },
+      "gap": 16,
+      "padding": 24
+    }
   },
   "switch": {
     "background": {
@@ -3663,7 +3708,13 @@ export const semantics = {
     "light": "light",
     "indent": 24,
     "regularItalic": "italic",
-    "bold": "semibold"
+    "bold": "semibold",
+    "weight": {
+      "light": 300,
+      "book": 300,
+      "regular": 400,
+      "bold": 600
+    }
   },
   "color": {
     "identity": {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gyldendal/kobber-tokens",
-  "version": "10.0.1",
+  "version": "12.0.0",
   "description": "Gyldendal Kobber design tokens",
   "license": "UNLICENSED",
   "private": false,