@oslokommune/punkt-css 18.0.0 → 18.3.0

package/dist/scss/abstracts/functions/_index.scss

@@ -2,6 +2,31 @@
 
 @use 'sass:map';
 @use 'sass:string';
+@use '../variables';
+
+/// Fargetoken som CSS-variabel, med verdien fra color maps som fallback.
+/// Fallbacken er alltid light mode.
+/// Ukjent tokennavn gjør at bygget kræsjer.
+///
+/// @param {String} $name - navn på semantisk token eller basefarge, uten `--pkt-color-`
+/// @return {String} - `var(--pkt-color-$name, <verdi>)`
+///
+/// @example scss
+///   color: functions.color-token('text-body-default');
+///   // => var(--pkt-color-text-body-default, #2a2859)
+///
+@function color-token($name) {
+  $value: map.get(variables.$pkt-semantic-colors, $name);
+
+  @if $value == null {
+    $value: map.get(variables.$pkt-colors, $name);
+  }
+  @if $value == null {
+    @error 'Ukjent fargetoken: #{$name}';
+  }
+
+  @return var(--pkt-color-#{$name}, #{$value});
+}
 
 /// Map deep get
 /// @author Kitty Giraudel

package/dist/scss/abstracts/variables/_colors.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 $pkt-colors: (
   // Blue
@@ -32,8 +33,16 @@ $pkt-colors: (
 
   // Neutrals
   brand-neutrals-white: #ffffff,
-  brand-neutrals-100: #f9f9f9,
-  brand-neutrals-200: #f2f2f2,
+  brand-neutrals-50: #f9f9f9,
+  brand-neutrals-100: #f2f2f2,
+  brand-neutrals-200: #e6e6e6,
+  brand-neutrals-300: #cccccc,
+  brand-neutrals-400: #b3b3b3,
+  brand-neutrals-500: #9a9a9a,
+  brand-neutrals-600: #808080,
+  brand-neutrals-700: #666666,
+  brand-neutrals-800: #4d4d4d,
+  brand-neutrals-900: #333333,
   brand-neutrals-1000: #2c2c2c,
   brand-neutrals-black: #000000,
   brand-neutrals-transparent: transparent,
@@ -41,91 +50,169 @@ $pkt-colors: (
   // Purple
   brand-purple-1000: #e0adff,
 
-  // Grays
+  // Grays — deprecated, bruk brand-neutrals-*
   grays-gray-100: #e6e6e6,
+  // brand-neutrals-200
   grays-gray-200: #cccccc,
+  // brand-neutrals-300
   grays-gray-300: #b3b3b3,
+  // brand-neutrals-400
   grays-gray-400: #9a9a9a,
+  // brand-neutrals-500
   grays-gray-500: #808080,
+  // brand-neutrals-600
   grays-gray-600: #666666,
+  // brand-neutrals-700
   grays-gray-700: #4d4d4d,
+  // brand-neutrals-800
   grays-gray-800: #333333,
+  // brand-neutrals-900
   grays-gray-900: #1a1a1a,
-  grays-gray-1000: #2c2c2c
+  // utgår
+  grays-gray-1000: #2c2c2c // brand-neutrals-1000
 ) !default;
 
-$pkt-semantic-colors: (
+// Kilden for semantiske farger: (lys, mørk)-par av navn fra $pkt-colors.
+// Mørk verdi er null når tokenet skal være identisk i begge moduser.
+// Legg til nye tokens her, så både lys og mørk blir bestemt samtidig.
+$pkt-semantic-color-modes: (
   // Background
-  background-card: map.get($pkt-colors, brand-neutrals-white),
-  background-default: map.get($pkt-colors, brand-neutrals-white),
-  background-subtle: map.get($pkt-colors, brand-neutrals-100),
-  background-transparent: map.get($pkt-colors, brand-neutrals-transparent),
+  background-card: (brand-neutrals-white, brand-neutrals-1000),
+  background-default: (brand-neutrals-white, brand-neutrals-1000),
+  background-subtle: (brand-neutrals-50, brand-neutrals-900),
+  background-transparent: (brand-neutrals-transparent, null),
   // Borders
-  border-default: map.get($pkt-colors, brand-dark-blue-1000),
-  border-beige: map.get($pkt-colors, brand-dark-beige-1000),
-  border-blue: map.get($pkt-colors, brand-blue-1000),
-  border-gray: map.get($pkt-colors, grays-gray-200),
-  border-green: map.get($pkt-colors, brand-green-1000),
-  border-light-beige: map.get($pkt-colors, brand-light-beige-1000),
-  border-red: map.get($pkt-colors, brand-red-1000),
-  border-subtle: map.get($pkt-colors, brand-neutrals-200),
-  border-yellow: map.get($pkt-colors, brand-yellow-1000),
-  border-states-active: map.get($pkt-colors, brand-warm-blue-1000),
-  border-states-disabled: map.get($pkt-colors, grays-gray-300),
-  border-states-focus: map.get($pkt-colors, brand-purple-1000),
-  border-states-hover: map.get($pkt-colors, brand-warm-blue-1000),
+  border-default: (brand-dark-blue-1000, brand-neutrals-white),
+  border-beige: (brand-dark-beige-1000, null),
+  border-blue: (brand-blue-1000, null),
+  border-gray: (brand-neutrals-300, null),
+  border-green: (brand-green-1000, null),
+  border-light-beige: (brand-light-beige-1000, null),
+  border-red: (brand-red-1000, null),
+  border-subtle: (brand-neutrals-100, brand-neutrals-800),
+  border-yellow: (brand-yellow-1000, null),
+  border-states-active: (brand-warm-blue-1000, brand-blue-500),
+  border-states-disabled: (brand-neutrals-400, brand-neutrals-600),
+  border-states-focus: (brand-purple-1000, null),
+  border-states-hover: (brand-warm-blue-1000, brand-blue-500),
   // Surface
-  surface-default-faded-green: map.get($pkt-colors, brand-light-green-400),
-  surface-default-faded-red: map.get($pkt-colors, brand-red-400),
-  surface-default-gray: map.get($pkt-colors, brand-neutrals-100),
-  surface-default-light-beige: map.get($pkt-colors, brand-light-beige-1000),
-  surface-default-light-blue: map.get($pkt-colors, brand-blue-300),
-  surface-default-light-green: map.get($pkt-colors, brand-green-400),
-  surface-default-red: map.get($pkt-colors, brand-red-600),
-  surface-default-yellow: map.get($pkt-colors, brand-yellow-500),
-  surface-strong-beige: map.get($pkt-colors, brand-dark-beige-1000),
-  surface-strong-blue: map.get($pkt-colors, brand-blue-1000),
-  surface-strong-dark-blue: map.get($pkt-colors, brand-dark-blue-1000),
-  surface-strong-dark-green: map.get($pkt-colors, brand-dark-green-1000),
-  surface-strong-gray: map.get($pkt-colors, brand-neutrals-200),
-  surface-strong-green: map.get($pkt-colors, brand-green-1000),
-  surface-strong-light-green: map.get($pkt-colors, brand-light-green-1000),
-  surface-strong-red: map.get($pkt-colors, brand-red-1000),
-  surface-strong-yellow: map.get($pkt-colors, brand-yellow-1000),
-  surface-subtle-light-blue: map.get($pkt-colors, brand-blue-200),
-  surface-subtle-light-red: map.get($pkt-colors, brand-red-100),
-  surface-subtle-pale-blue: map.get($pkt-colors, brand-blue-100),
-  surface-subtle-white: map.get($pkt-colors, brand-neutrals-white),
+  surface-default-faded-green: (brand-light-green-400, null),
+  surface-default-faded-red: (brand-red-400, null),
+  surface-default-gray: (brand-neutrals-100, null),
+  surface-default-light-beige: (brand-light-beige-1000, null),
+  surface-default-light-blue: (brand-blue-500, null),
+  surface-default-light-green: (brand-green-400, null),
+  surface-default-pale-blue: (brand-blue-300, null),
+  surface-default-red: (brand-red-600, null),
+  surface-default-yellow: (brand-yellow-500, null),
+  surface-strong-beige: (brand-dark-beige-1000, null),
+  surface-strong-blue: (brand-blue-1000, null),
+  surface-strong-dark-blue: (brand-dark-blue-1000, null),
+  surface-strong-dark-green: (brand-dark-green-1000, null),
+  surface-strong-gray: (brand-neutrals-200, null),
+  surface-strong-green: (brand-green-1000, null),
+  surface-strong-light-green: (brand-light-green-1000, null),
+  surface-strong-red: (brand-red-1000, null),
+  surface-strong-yellow: (brand-yellow-1000, null),
+  surface-subtle-light-blue: (brand-blue-200, null),
+  surface-subtle-light-red: (brand-red-100, null),
+  surface-subtle-gray: (brand-neutrals-50, null),
+  surface-subtle-pale-blue: (brand-blue-100, null),
+  surface-subtle-white: (brand-neutrals-white, null),
   // Text
-  text-body-dark: map.get($pkt-colors, brand-dark-blue-1000),
-  text-body-default: map.get($pkt-colors, brand-dark-blue-1000),
-  text-body-light: map.get($pkt-colors, brand-neutrals-white),
-  text-placeholder: map.get($pkt-colors, grays-gray-600),
-  text-action-disabled: map.get($pkt-colors, grays-gray-600),
-  text-action-active: map.get($pkt-colors, brand-warm-blue-1000),
-  text-action-hover: map.get($pkt-colors, brand-warm-blue-1000),
-  text-action-normal: map.get($pkt-colors, brand-dark-blue-1000),
+  text-body-dark: (brand-dark-blue-1000, null),
+  text-body-default: (brand-dark-blue-1000, brand-neutrals-white),
+  text-body-light: (brand-neutrals-white, null),
+  text-placeholder: (brand-neutrals-700, brand-neutrals-400),
+  text-action-disabled: (brand-neutrals-700, brand-neutrals-300),
+  text-action-active: (brand-warm-blue-1000, brand-blue-500),
+  text-action-hover: (brand-warm-blue-1000, brand-blue-500),
+  text-action-normal: (brand-dark-blue-1000, brand-neutrals-white),
   // Input (shared)
-  input-background-normal: map.get($pkt-colors, brand-neutrals-white),
-  input-background-disabled: map.get($pkt-colors, brand-neutrals-100),
-  input-border-active: map.get($pkt-colors, brand-warm-blue-1000),
-  input-border-disabled: map.get($pkt-colors, grays-gray-300),
-  input-border-error: map.get($pkt-colors, brand-red-1000),
-  input-border-hover: map.get($pkt-colors, brand-warm-blue-1000),
-  input-border-normal: map.get($pkt-colors, brand-dark-blue-1000),
-  input-text-active: map.get($pkt-colors, brand-warm-blue-1000),
-  input-text-disabled: map.get($pkt-colors, grays-gray-500),
-  input-text-hover: map.get($pkt-colors, brand-warm-blue-1000),
-  input-text-normal: map.get($pkt-colors, brand-dark-blue-1000),
-  input-text-error: map.get($pkt-colors, brand-red-1000),
-  input-text-open: map.get($pkt-colors, brand-neutrals-white),
+  input-background-normal: (brand-neutrals-white, null),
+  input-background-disabled: (brand-neutrals-50, null),
+  input-background-open: (brand-warm-blue-1000, brand-blue-500),
+  input-border-active: (brand-warm-blue-1000, brand-blue-500),
+  input-border-disabled: (brand-neutrals-400, brand-neutrals-300),
+  input-border-error: (brand-red-1000, null),
+  input-border-hover: (brand-warm-blue-1000, brand-blue-500),
+  input-border-normal: (brand-dark-blue-1000, brand-neutrals-white),
+  input-text-active: (brand-warm-blue-1000, null),
+  input-text-disabled: (brand-neutrals-700, null),
+  input-text-hover: (brand-warm-blue-1000, null),
+  input-text-normal: (brand-dark-blue-1000, null),
+  input-text-error: (brand-red-1000, null),
+  input-text-open: (brand-neutrals-white, brand-dark-blue-1000),
+  // Tag
+  tag-text-normal: (brand-dark-blue-1000, null),
+  tag-text-hover: (brand-warm-blue-1000, brand-dark-blue-1000),
+  tag-text-active: (brand-warm-blue-1000, brand-dark-blue-1000),
+  tag-text-focus: (brand-warm-blue-1000, brand-dark-blue-1000),
   // Input - Checkbox/Radio specific
-  input-check-background: map.get($pkt-colors, brand-neutrals-white),
-  input-check-border: map.get($pkt-colors, brand-dark-blue-1000),
-  input-check-text-active: map.get($pkt-colors, brand-warm-blue-1000),
-  input-check-text-hover: map.get($pkt-colors, brand-warm-blue-1000)
+  input-check-background: (brand-neutrals-white, brand-dark-blue-1000),
+  input-check-border: (brand-dark-blue-1000, brand-neutrals-white),
+  input-check-text-active: (brand-warm-blue-1000, brand-blue-500),
+  input-check-text-hover: (brand-warm-blue-1000, brand-blue-500),
+  // Button — fra Figma. Skinn-varianter i elements/_button.scss.
+  button-primary-background-normal: (brand-dark-blue-1000, brand-blue-500),
+  button-primary-background-hover: (brand-warm-blue-1000, brand-blue-1000),
+  button-primary-background-focus: (brand-warm-blue-1000, brand-blue-1000),
+  button-primary-background-active: (brand-warm-blue-1000, brand-blue-1000),
+  button-primary-background-disabled: (brand-neutrals-50, brand-neutrals-800),
+  button-primary-background-success: (brand-green-1000, null),
+  button-primary-background-danger: (brand-red-1000, null),
+  button-primary-border-focus: (brand-warm-blue-1000, brand-blue-1000),
+  button-primary-text-normal: (brand-neutrals-white, brand-dark-blue-1000),
+  button-primary-text-hover: (brand-neutrals-white, brand-dark-blue-1000),
+  button-primary-text-focus: (brand-neutrals-white, brand-dark-blue-1000),
+  button-primary-text-active: (brand-neutrals-white, brand-dark-blue-1000),
+  button-primary-text-disabled: (brand-neutrals-700, brand-neutrals-400),
+  button-secondary-background-hover: (brand-warm-blue-1000, brand-blue-500),
+  button-secondary-background-active: (brand-warm-blue-1000, brand-blue-500),
+  button-secondary-background-disabled: (brand-neutrals-50, brand-neutrals-800),
+  button-secondary-border-normal: (brand-dark-blue-1000, brand-neutrals-white),
+  button-secondary-border-yellow: (brand-yellow-1000, null),
+  button-secondary-border-focus: (brand-warm-blue-1000, brand-blue-500),
+  button-secondary-text-normal: (brand-dark-blue-1000, brand-neutrals-white),
+  button-secondary-text-hover: (brand-neutrals-white, brand-dark-blue-1000),
+  button-secondary-text-focus: (brand-warm-blue-1000, brand-blue-500),
+  button-secondary-text-active: (brand-neutrals-white, brand-dark-blue-1000),
+  button-secondary-text-disabled: (brand-neutrals-700, brand-neutrals-400),
+  button-tertiary-background-hover: (brand-neutrals-100, brand-dark-blue-700),
+  button-tertiary-background-focus: (brand-neutrals-100, brand-dark-blue-700),
+  button-tertiary-background-active: (brand-warm-blue-1000, brand-dark-blue-700),
+  button-tertiary-background-disabled: (brand-neutrals-50, brand-neutrals-800),
+  button-tertiary-border-focus: (brand-warm-blue-1000, brand-neutrals-transparent),
+  button-tertiary-text-normal: (brand-dark-blue-1000, brand-neutrals-white),
+  button-tertiary-text-hover: (brand-warm-blue-1000, brand-neutrals-white),
+  button-tertiary-text-focus: (brand-warm-blue-1000, brand-neutrals-white),
+  button-tertiary-text-active: (brand-neutrals-white, null),
+  button-tertiary-text-disabled: (brand-neutrals-700, brand-neutrals-400)
 ) !default;
 
+// token -> farge, ett map per mode. Begge kommer fra $pkt-semantic-color-modes
+// og inneholder alle tokens. Der dark-mode verdi er null i kilden står light-mode
+// dark-mode sitt map, slik at oppslag alltid gir en farge.
+// Begge kan overstyres med @use ... with (...) slik som før.
+$-light-colors: ();
+$-dark-colors: ();
+
+@each $-name, $-pair in $pkt-semantic-color-modes {
+  $-light: map.get($pkt-colors, list.nth($-pair, 1));
+  $-dark-ref: list.nth($-pair, 2);
+  $-dark: $-light;
+
+  @if $-dark-ref != null {
+    $-dark: map.get($pkt-colors, $-dark-ref);
+  }
+
+  $-light-colors: map.set($-light-colors, $-name, $-light);
+  $-dark-colors: map.set($-dark-colors, $-name, $-dark);
+}
+
+$pkt-semantic-colors: $-light-colors !default;
+$pkt-semantic-colors-dark: $-dark-colors !default;
+
 // Deprecated colors
 $colors: (
   // brand

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/18.0/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/18.3/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/base/_colors-tokens.scss

@@ -1,10 +1,11 @@
-/* 
+/*
  * Colors
  * Brand
  * Light mode
  * Dark mode
  */
 
+@use 'sass:map';
 @use '../abstracts/variables';
 
 :root {
@@ -17,7 +18,7 @@
     --pkt-color-#{$name}: #{$color};
   }
 
-  // Semantic
+  // Semantic — lys modus
   @each $name, $color in variables.$pkt-semantic-colors {
     --pkt-color-#{$name}: #{$color};
   }
@@ -27,80 +28,13 @@
     --#{$name}: #{$color};
   }
 
-  // Dark mode
+  // Semantic — dark mode. Kun tokens som faktisk skiller seg fra light mode
   &[data-mode='dark'],
   [data-mode='dark'] {
-    // Background
-    --pkt-color-background-card: var(--pkt-color-grays-gray-700);
-    --pkt-color-background-default: var(--pkt-color-grays-gray-1000);
-    --pkt-color-background-subtle: var(--pkt-color-grays-gray-1000);
-    --pkt-color-background-transparent: var(--pkt-color-brand-neutrals-transparent);
-
-    // Borders
-    --pkt-color-border-default: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
-    --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
-    --pkt-color-border-green: var(--pkt-color-brand-green-1000);
-    --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
-    --pkt-color-border-red: var(--pkt-color-brand-red-1000);
-    --pkt-color-border-subtle: var(--pkt-color-brand-dark-blue-700);
-    --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
-    --pkt-color-border-states-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-border-states-disabled: var(--pkt-color-grays-gray-500);
-    --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
-    --pkt-color-border-states-hover: var(--pkt-color-brand-blue-500);
-    
-    // Surface
-    --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
-    --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
-    --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
-    --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
-    --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
-    --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
-    --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
-    --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
-    --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
-    --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
-    --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
-    --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
-    --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
-    --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
-    --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
-    --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
-    --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
-    --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
-    --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
-    --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);
-
-    // Text
-    --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-text-body-default: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-text-placeholder: var(--pkt-color-grays-gray-300);
-    --pkt-color-text-action-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
-    --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
-
-    // Input (shared)
-    --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-    --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-    --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
-
-    // Input - Checkbox/Radio specific
-    --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
+    @each $name, $color in variables.$pkt-semantic-colors-dark {
+      @if $color != map.get(variables.$pkt-semantic-colors, $name) {
+        --pkt-color-#{$name}: #{$color};
+      }
+    }
   }
 }

package/dist/scss/components/_calendar.scss

@@ -94,7 +94,7 @@ pkt-calendar {
   .pkt-cal-other,
   .pkt-cal-days [data-disabled] {
     cursor: not-allowed;
-    color: var(--pkt-color-grays-gray-200);
+    color: var(--pkt-color-brand-neutrals-300);
     background: transparent;
     border: none;
   }
@@ -144,7 +144,7 @@ pkt-calendar {
     }
   }
   .pkt-cal-excluded {
-    background-color: var(--pkt-color-brand-neutrals-100);
+    background-color: var(--pkt-color-brand-neutrals-50);
     :before,
     :after {
       background-color: transparent;

package/dist/scss/components/_card.scss

@@ -235,7 +235,7 @@ pkt-card {
 
     &.pkt-card--horizontal {
       &.pkt-card--gray {
-        background-color: var(--pkt-color-brand-neutrals-100);
+        background-color: var(--pkt-color-brand-neutrals-50);
       }
 
       &.pkt-card--blue {
@@ -261,7 +261,7 @@ pkt-card {
   }
 
   &--outlined {
-    outline: 2px solid var(--pkt-color-grays-gray-100);
+    outline: 2px solid var(--pkt-color-brand-neutrals-200);
   }
 
   &--outlined-beige {
@@ -269,7 +269,7 @@ pkt-card {
   }
 
   &--gray {
-    background-color: var(--pkt-color-brand-neutrals-100);
+    background-color: var(--pkt-color-brand-neutrals-50);
   }
 
   &--blue {

package/dist/scss/components/_fileupload.scss

@@ -1,3 +1,4 @@
+@use '../abstracts/functions';
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
@@ -48,7 +49,7 @@ pkt-fileupload {
 
   &--error {
     .pkt-fileupload__drop-zone {
-      border-color: var(--pkt-color-brand-red-700);
+      border-color: functions.color-token('input-border-error');
     }
 
     .pkt-alert--error.pkt-fileupload__error-alert {
@@ -297,7 +298,7 @@ pkt-fileupload {
         grid-row: 1;
         align-self: center;
         justify-self: center;
-        color: var(--pkt-color-text-subtle);
+        color: functions.color-token('text-placeholder');
       }
 
       &__title {
@@ -465,7 +466,7 @@ pkt-fileupload {
           @include typography.get-text('pkt-txt-12-medium');
           display: block;
           margin-block-start: 0.25rem;
-          color: var(--pkt-color-text-subtle);
+          color: functions.color-token('text-placeholder');
         }
 
         &__actions {
@@ -483,7 +484,7 @@ pkt-fileupload {
           border: none;
           padding: 0;
           cursor: pointer;
-          color: var(--pkt-color-text-subtle);
+          color: functions.color-token('text-placeholder');
           display: flex;
           align-items: center;
           justify-content: center;
@@ -623,7 +624,7 @@ pkt-fileupload {
           @include typography.get-text('pkt-txt-12');
           grid-column: 2;
           grid-row: 2;
-          color: var(--pkt-color-text-default);
+          color: functions.color-token('text-body-default');
         }
 
         // Override progress bar wrapper styles
@@ -838,7 +839,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal {
   .pkt-modal__content {
     padding: 0 map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-16');
     // Strip scroll-hint gradients from `_modal.scss` so the image and counter stay clear.
-    background: var(--pkt-color-surface-default);
+    background: functions.color-token('background-default');
     background-image: none;
     box-shadow: none;
     // Rejoin the modal flex/grid chain: visible overflow lets intrinsic image height ignore the viewport cap.
@@ -875,7 +876,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal {
 
 .pkt-fileupload__image-preview {
   position: relative;
-  background-color: var(--pkt-color-surface-default);
+  background-color: functions.color-token('background-default');
   display: grid;
   grid-template-columns: auto 1fr auto;
   // First row takes remaining space but may shrink (tall portraits); second row keeps the counter on-screen.

package/dist/scss/components/_footer.scss

@@ -6,6 +6,7 @@
  *   --pkt-footer-link-hover   hover-farge på lenker (default: text-action-active)
  */
 
+@use '../abstracts/functions';
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/mixins/container-queries' as *;
@@ -23,8 +24,8 @@ $-footer-content-max-width: 75rem;
 
 .pkt-footer {
   &__band {
-    background-color: var(--pkt-footer-bg, var(--pkt-color-background-subtle, #f9f9f9));
-    color: var(--pkt-footer-fg, var(--pkt-color-text-body-default, #2a2859));
+    background-color: var(--pkt-footer-bg, #{functions.color-token('background-subtle')});
+    color: var(--pkt-footer-fg, #{functions.color-token('text-body-default')});
 
     @include typography.get-text('pkt-txt-16-light');
 
@@ -33,9 +34,9 @@ $-footer-content-max-width: 75rem;
     }
 
     &--global {
-      --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
-      --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
-      --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
+      --pkt-footer-bg: #{functions.color-token('surface-strong-dark-blue')};
+      --pkt-footer-fg: #{functions.color-token('text-body-light')};
+      --pkt-footer-link-hover: #{functions.color-token('brand-blue-1000')};
     }
 
     a {

package/dist/scss/components/_header-service-mobile.scss

@@ -1,3 +1,4 @@
+@use '../abstracts/functions';
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
@@ -105,8 +106,8 @@
     &__mobile-menu.is-open {
       background-color: var(--pkt-color-background-default);
       z-index: 100;
-      border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
-      border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+      border-top: 1px solid #{functions.color-token('border-subtle')};
+      border-bottom: 1px solid #{functions.color-token('border-subtle')};
 
       &::after {
         content: '';

package/dist/scss/components/_header-shared.scss

@@ -9,6 +9,7 @@
  * is not `@forward`ed from the component index.
  */
 
+@use '../abstracts/functions';
 @use 'sass:map';
 @use '../abstracts/variables';
 
@@ -174,8 +175,8 @@
       width: 100%;
       max-width: 100%;
       border: none;
-      border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
-      border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+      border-top: 1px solid #{functions.color-token('border-subtle')};
+      border-bottom: 1px solid #{functions.color-token('border-subtle')};
     }
 
     &:not(button) {

package/dist/scss/components/_header.scss

@@ -257,7 +257,7 @@
   }
 
   &__label {
-    color: var(--pkt-color-grays-gray-600);
+    color: var(--pkt-color-brand-neutrals-700);
     @include get-text('pkt-txt-14-medium');
   }
 

package/dist/scss/components/_index.scss

@@ -1,7 +1,6 @@
 @forward 'accordion';
 @forward 'alert';
 @forward 'backlink';
-@forward 'badge';
 @forward 'bodytext';
 @forward 'breadcrumbs';
 @forward 'calendar';

package/dist/scss/components/_inputwrapper.scss

@@ -277,5 +277,5 @@ pkt-input-wrapper {
 }
 
 [data-mode='dark'] .pkt-inputwrapper {
-  color: white;
+  color: functions.color-token('text-body-light');
 }

package/dist/scss/components/_listbox.scss

@@ -1,3 +1,5 @@
+@use '../abstracts/functions';
+
 $listbox-padding: 0.75rem;
 
 pkt-listbox {
@@ -93,7 +95,7 @@ pkt-listbox {
 
     &[data-disabled] {
       cursor: not-allowed;
-      color: var(--pkt-color-grays-gray-500);
+      color: var(--pkt-color-brand-neutrals-600);
     }
   }
 
@@ -114,7 +116,7 @@ pkt-listbox {
 
   .pkt-listbox__empty {
     padding: $listbox-padding;
-    color: var(--pkt-color-text-body-muted);
+    color: functions.color-token('text-placeholder');
     list-style: none;
   }