@digdir/designsystemet 1.11.0 → 1.12.0

package/dist/src/scripts/update-preview-tokens.js

@@ -199,9 +199,9 @@ async function createHash(text, algo = "SHA-1") {
     (byte) => byte.toString(16).padStart(2, "0")
   ).join("");
 }
-async function generate$Themes(colorSchemes, themes, colors) {
+async function generate$Themes(colorSchemes, themes, colors, sizeModes2) {
   return [
-    ...generateSizeGroup(),
+    ...generateSizeGroup(sizeModes2),
     ...await generateThemesGroup(themes),
     ...generateTypographyGroup(themes),
     ...generateColorSchemesGroup(colorSchemes, themes),
@@ -210,7 +210,7 @@ async function generate$Themes(colorSchemes, themes, colors) {
     ...await generateColorGroup("support", colors)
   ];
 }
-function generateSizeGroup() {
+function generateSizeGroup(_sizes) {
   return [
     {
       id: "8b2c8cc86611a34b135cb22948666779361fd729",
@@ -357,1662 +357,1501 @@ function generateTypographyGroup(themes) {
   ];
 }
 
-// src/tokens/create/defaults.ts
-import * as R from "ramda";
+// src/tokens/create/generators/primitives/color-scheme.ts
+import * as R4 from "ramda";
 
-// src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
-var globals_default = {
-  "border-width": {
-    "1": {
-      $type: "borderWidth",
-      $value: "1px"
+// src/colors/colorMetadata.ts
+import * as R from "ramda";
+var baseColors = {
+  info: "#0A71C0",
+  success: "#068718",
+  warning: "#EA9B1B",
+  danger: "#C01B1B"
+};
+var dsLinkColor = "#663299";
+var colorMetadata = {
+  "background-default": {
+    number: 1,
+    name: "background-default",
+    group: "background",
+    displayName: "Background Default",
+    description: {
+      long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
+      short: "Standard bakgrunnsfarge."
     },
-    "3": {
-      $type: "borderWidth",
-      $value: "3px"
+    luminance: {
+      light: 1,
+      dark: 9e-3,
+      contrast: 1e-3
     }
   },
-  shadow: {
-    "100": {
-      $type: "boxShadow",
-      $value: [
-        {
-          color: "rgba(0,0,0,0.16)",
-          x: "0",
-          y: "0",
-          blur: "1",
-          spread: "0"
-        },
-        {
-          x: "0",
-          y: "1",
-          blur: "2",
-          spread: "0",
-          color: "rgba(0,0,0,0.12)"
-        }
-      ]
+  "background-tinted": {
+    number: 2,
+    name: "background-tinted",
+    group: "background",
+    displayName: "Background Tinted",
+    description: {
+      long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
+      short: "Bakgrunn med et hint av farge i seg."
     },
-    "200": {
-      $type: "boxShadow",
-      $value: [
-        {
-          color: "rgba(0,0,0,0.15)",
-          x: "0",
-          y: "0",
-          blur: "1",
-          spread: "0"
-        },
-        {
-          color: "rgba(0,0,0,0.12)",
-          x: "0",
-          y: "1",
-          blur: "2",
-          spread: "0"
-        },
-        {
-          x: "0",
-          y: "2",
-          blur: "4",
-          spread: "0",
-          color: "rgba(0,0,0,0.1)"
-        }
-      ]
+    luminance: {
+      light: 0.9,
+      dark: 0.014,
+      contrast: 65e-4
+    }
+  },
+  "surface-default": {
+    number: 3,
+    name: "surface-default",
+    group: "surface",
+    displayName: "Surface Default",
+    description: {
+      long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
+      short: "Standardfarge for overflater / komponenter."
     },
-    "300": {
-      $type: "boxShadow",
-      $value: [
-        {
-          color: "rgba(0,0,0,0.14)",
-          x: "0",
-          y: "0",
-          blur: "1",
-          spread: "0"
-        },
-        {
-          color: "rgba(0,0,0,0.12)",
-          x: "0",
-          y: "2",
-          blur: "4",
-          spread: "0"
-        },
-        {
-          x: "0",
-          y: "4",
-          blur: "8",
-          spread: "0",
-          color: "rgba(0,0,0,0.12)"
-        }
-      ]
+    luminance: {
+      light: 1,
+      dark: 0.021,
+      contrast: 0.015
+    }
+  },
+  "surface-tinted": {
+    number: 4,
+    name: "surface-tinted",
+    group: "surface",
+    displayName: "Surface Tinted",
+    description: {
+      long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
+      short: "Overflater / komponenter med et hint av farge i seg."
     },
-    "400": {
-      $type: "boxShadow",
-      $value: [
-        {
-          color: "rgba(0,0,0,0.13)",
-          x: "0",
-          y: "0",
-          blur: "1",
-          spread: "0"
-        },
-        {
-          color: "rgba(0,0,0,0.13)",
-          x: "0",
-          y: "3",
-          blur: "5",
-          spread: "0"
-        },
-        {
-          x: "0",
-          y: "6",
-          blur: "12",
-          spread: "0",
-          color: "rgba(0,0,0,0.14)"
-        }
-      ]
+    luminance: {
+      light: 0.81,
+      dark: 0.027,
+      contrast: 0.015
+    }
+  },
+  "surface-hover": {
+    number: 5,
+    name: "surface-hover",
+    group: "surface",
+    displayName: "Surface Hover",
+    description: {
+      long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
+      short: "Hover-farge til overflater / komponenter."
     },
-    "500": {
-      $type: "boxShadow",
-      $value: [
-        {
-          color: "rgba(0,0,0,0.12)",
-          x: "0",
-          y: "0",
-          blur: "1",
-          spread: "0"
-        },
-        {
-          color: "rgba(0,0,0,0.16)",
-          x: "0",
-          y: "4",
-          blur: "8",
-          spread: "0"
-        },
-        {
-          x: "0",
-          y: "12",
-          blur: "24",
-          spread: "0",
-          color: "rgba(0,0,0,0.16)"
-        }
-      ]
+    luminance: {
+      light: 0.7,
+      dark: 0.036,
+      contrast: 0.028
     }
   },
-  opacity: {
-    "30": {
-      $type: "opacity",
-      $value: "30%"
+  "surface-active": {
+    number: 6,
+    name: "surface-active",
+    group: "surface",
+    displayName: "Surface Active",
+    description: {
+      long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
+      short: "Active-farge til overflater / komponenter."
+    },
+    luminance: {
+      light: 0.59,
+      dark: 0.056,
+      contrast: 0.045
     }
-  }
-};
-
-// src/tokens/template/design-tokens/primitives/modes/size/global.json with { type: 'json' }
-var global_default = {
-  _size: {
-    "0": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 0)"
+  },
+  "border-subtle": {
+    number: 7,
+    name: "border-subtle",
+    group: "border",
+    displayName: "Border Subtle",
+    description: {
+      long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
+      short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
     },
-    "1": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 1)"
+    luminance: {
+      light: 0.5,
+      dark: 0.08,
+      contrast: 0.26
+    }
+  },
+  "border-default": {
+    number: 8,
+    name: "border-default",
+    group: "border",
+    displayName: "Border Default",
+    description: {
+      long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
+      short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
     },
-    "2": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 2)"
-    },
-    "3": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 3)"
-    },
-    "4": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 4)"
-    },
-    "5": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 5)"
-    },
-    "6": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 6)"
-    },
-    "7": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 7)"
-    },
-    "8": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 8)"
-    },
-    "9": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 9)"
-    },
-    "10": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 10)"
-    },
-    "11": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 11)"
-    },
-    "12": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 12)"
-    },
-    "13": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 13)"
-    },
-    "14": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 14)"
-    },
-    "15": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 15)"
-    },
-    "18": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 18)"
-    },
-    "22": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 22)"
-    },
-    "26": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 26)"
-    },
-    "30": {
-      $type: "dimension",
-      $value: "floor({_size.unit} * 30)"
-    },
-    "mode-font-size": {
-      $type: "number",
-      $value: "{size._mode-font-size}"
-    },
-    base: {
-      $type: "number",
-      $value: "{size._base}"
-    },
-    step: {
-      $type: "number",
-      $value: "{size._step}"
-    },
-    unit: {
-      $type: "number",
-      $value: "{_size.step} / {_size.base} * {_size.mode-font-size}"
+    luminance: {
+      light: 0.19,
+      dark: 0.22,
+      contrast: 0.4
     }
-  }
-};
-
-// src/tokens/template/design-tokens/primitives/modes/size/large.json with { type: 'json' }
-var large_default = {
-  size: {
-    "_mode-font-size": {
-      $type: "dimension",
-      $value: "21"
-    },
-    _base: {
-      $type: "dimension",
-      $value: "18"
+  },
+  "border-strong": {
+    number: 9,
+    name: "border-strong",
+    group: "border",
+    displayName: "Border Strong",
+    description: {
+      long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
+      short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
     },
-    _step: {
-      $type: "dimension",
-      $value: "4"
+    luminance: {
+      light: 0.11,
+      dark: 0.39,
+      contrast: 0.6
     }
-  }
-};
-
-// src/tokens/template/design-tokens/primitives/modes/size/medium.json with { type: 'json' }
-var medium_default = {
-  size: {
-    "_mode-font-size": {
-      $type: "dimension",
-      $value: "18"
-    },
-    _base: {
-      $type: "dimension",
-      $value: "18"
+  },
+  "text-subtle": {
+    number: 10,
+    name: "text-subtle",
+    group: "text",
+    displayName: "Text Subtle",
+    description: {
+      long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
+      short: "Tekst- og ikonfarge med lavere kontrast."
     },
-    _step: {
-      $type: "dimension",
-      $value: "4"
+    luminance: {
+      light: 0.11,
+      dark: 0.39,
+      contrast: 0.57
     }
-  }
-};
-
-// src/tokens/template/design-tokens/primitives/modes/size/small.json with { type: 'json' }
-var small_default = {
-  size: {
-    "_mode-font-size": {
-      $type: "dimension",
-      $value: "16"
-    },
-    _base: {
-      $type: "dimension",
-      $value: "18"
+  },
+  "text-default": {
+    number: 11,
+    name: "text-default",
+    group: "text",
+    displayName: "Text Default",
+    description: {
+      long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
+      short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
     },
-    _step: {
-      $type: "dimension",
-      $value: "4"
-    }
-  }
-};
-
-// src/tokens/template/design-tokens/primitives/modes/typography/size/large.json with { type: 'json' }
-var large_default2 = {
-  "line-height": {
-    sm: {
-      $type: "lineHeights",
-      $value: "130%"
-    },
-    md: {
-      $type: "lineHeights",
-      $value: "150%"
-    },
-    lg: {
-      $type: "lineHeights",
-      $value: "170%"
+    luminance: {
+      light: 0.0245,
+      dark: 0.84,
+      contrast: 0.86
     }
   },
-  "font-size": {
-    "1": {
-      $type: "fontSizes",
-      $value: "13"
-    },
-    "2": {
-      $type: "fontSizes",
-      $value: "16"
-    },
-    "3": {
-      $type: "fontSizes",
-      $value: "18"
-    },
-    "4": {
-      $type: "fontSizes",
-      $value: "21"
-    },
-    "5": {
-      $type: "fontSizes",
-      $value: "24"
-    },
-    "6": {
-      $type: "fontSizes",
-      $value: "30"
-    },
-    "7": {
-      $type: "fontSizes",
-      $value: "36"
-    },
-    "8": {
-      $type: "fontSizes",
-      $value: "48"
-    },
-    "9": {
-      $type: "fontSizes",
-      $value: "60"
+  "base-default": {
+    number: 12,
+    name: "base-default",
+    group: "base",
+    displayName: "Base Default",
+    description: {
+      long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
+      short: "Standardfarge for solide bakgrunner."
     },
-    "10": {
-      $type: "fontSizes",
-      $value: "72"
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
     }
   },
-  "letter-spacing": {
-    "1": {
-      $type: "letterSpacing",
-      $value: "-1%"
-    },
-    "2": {
-      $type: "letterSpacing",
-      $value: "-0.5%"
-    },
-    "3": {
-      $type: "letterSpacing",
-      $value: "-0.25%"
-    },
-    "4": {
-      $type: "letterSpacing",
-      $value: "-0.15%"
-    },
-    "5": {
-      $type: "letterSpacing",
-      $value: "0%"
+  "base-hover": {
+    number: 13,
+    name: "base-hover",
+    group: "base",
+    displayName: "Base Hover",
+    description: {
+      long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
+      short: "Hover-farge for solide bakgrunner."
     },
-    "6": {
-      $type: "letterSpacing",
-      $value: "0.15%"
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-active": {
+    number: 14,
+    name: "base-active",
+    group: "base",
+    displayName: "Base Active",
+    description: {
+      long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
+      short: "Active-farge for solide bakgrunner."
     },
-    "7": {
-      $type: "letterSpacing",
-      $value: "0.25%"
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-contrast-subtle": {
+    number: 15,
+    name: "base-contrast-subtle",
+    group: "base",
+    displayName: "Contrast Subtle",
+    description: {
+      long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
+      short: "Farge med god kontrast mot Base-default."
     },
-    "8": {
-      $type: "letterSpacing",
-      $value: "0.5%"
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-contrast-default": {
+    number: 16,
+    name: "base-contrast-default",
+    group: "base",
+    displayName: "Contrast Default",
+    description: {
+      long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
+      short: "Farge med god kontrast mot Base-default og Base-hover."
     },
-    "9": {
-      $type: "letterSpacing",
-      $value: "1.5%"
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
     }
   }
 };
+var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+var colorNames = Object.keys(colorMetadata);
+var baseColorNames = Object.keys(baseColors);
 
-// src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json with { type: 'json' }
-var medium_default2 = {
-  "line-height": {
-    sm: {
-      $type: "lineHeights",
-      $value: "130%"
-    },
-    md: {
-      $type: "lineHeights",
-      $value: "150%"
-    },
-    lg: {
-      $type: "lineHeights",
-      $value: "170%"
-    }
-  },
-  "font-size": {
-    "1": {
-      $type: "fontSizes",
-      $value: "12"
-    },
-    "2": {
-      $type: "fontSizes",
-      $value: "14"
-    },
-    "3": {
-      $type: "fontSizes",
-      $value: "16"
-    },
-    "4": {
-      $type: "fontSizes",
-      $value: "18"
-    },
-    "5": {
-      $type: "fontSizes",
-      $value: "21"
-    },
-    "6": {
-      $type: "fontSizes",
-      $value: "24"
-    },
-    "7": {
-      $type: "fontSizes",
-      $value: "30"
-    },
-    "8": {
-      $type: "fontSizes",
-      $value: "36"
-    },
-    "9": {
-      $type: "fontSizes",
-      $value: "48"
-    },
-    "10": {
-      $type: "fontSizes",
-      $value: "60"
-    }
-  },
-  "letter-spacing": {
-    "1": {
-      $type: "letterSpacing",
-      $value: "-1%"
-    },
-    "2": {
-      $type: "letterSpacing",
-      $value: "-0.5%"
-    },
-    "3": {
-      $type: "letterSpacing",
-      $value: "-0.25%"
-    },
-    "4": {
-      $type: "letterSpacing",
-      $value: "-0.15%"
-    },
-    "5": {
-      $type: "letterSpacing",
-      $value: "0%"
-    },
-    "6": {
-      $type: "letterSpacing",
-      $value: "0.15%"
-    },
-    "7": {
-      $type: "letterSpacing",
-      $value: "0.25%"
-    },
-    "8": {
-      $type: "letterSpacing",
-      $value: "0.5%"
-    },
-    "9": {
-      $type: "letterSpacing",
-      $value: "1.5%"
-    }
-  }
+// src/colors/theme.ts
+import chroma2 from "chroma-js";
+import * as R2 from "ramda";
+
+// src/colors/utils.ts
+import chroma from "chroma-js";
+import Colorjs from "colorjs.io";
+import { Hsluv } from "hsluv";
+var getLuminanceFromLightness = (lightness) => {
+  const conv = new Hsluv();
+  conv.hsluv_l = lightness;
+  conv.hsluvToHex();
+  return chroma(conv.hex).luminance();
+};
+var getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return conv.hsluv_l;
 };
 
-// src/tokens/template/design-tokens/primitives/modes/typography/size/small.json with { type: 'json' }
-var small_default2 = {
-  "line-height": {
-    sm: {
-      $type: "lineHeights",
-      $value: "130%"
-    },
-    md: {
-      $type: "lineHeights",
-      $value: "150%"
-    },
-    lg: {
-      $type: "lineHeights",
-      $value: "170%"
-    }
-  },
-  "font-size": {
-    "1": {
-      $type: "fontSizes",
-      $value: "11"
-    },
-    "2": {
-      $type: "fontSizes",
-      $value: "13"
-    },
-    "3": {
-      $type: "fontSizes",
-      $value: "14"
-    },
-    "4": {
-      $type: "fontSizes",
-      $value: "16"
-    },
-    "5": {
-      $type: "fontSizes",
-      $value: "18"
-    },
-    "6": {
-      $type: "fontSizes",
-      $value: "21"
-    },
-    "7": {
-      $type: "fontSizes",
-      $value: "24"
-    },
-    "8": {
-      $type: "fontSizes",
-      $value: "30"
-    },
-    "9": {
-      $type: "fontSizes",
-      $value: "36"
-    },
-    "10": {
-      $type: "fontSizes",
-      $value: "48"
-    }
-  },
-  "letter-spacing": {
-    "1": {
-      $type: "letterSpacing",
-      $value: "-1%"
-    },
-    "2": {
-      $type: "letterSpacing",
-      $value: "-0.5%"
-    },
-    "3": {
-      $type: "letterSpacing",
-      $value: "-0.25%"
-    },
-    "4": {
-      $type: "letterSpacing",
-      $value: "-0.15%"
-    },
-    "5": {
-      $type: "letterSpacing",
-      $value: "0%"
-    },
-    "6": {
-      $type: "letterSpacing",
-      $value: "0.15%"
-    },
-    "7": {
-      $type: "letterSpacing",
-      $value: "0.25%"
-    },
-    "8": {
-      $type: "letterSpacing",
-      $value: "0.5%"
-    },
-    "9": {
-      $type: "letterSpacing",
-      $value: "1.5%"
-    }
+// src/colors/theme.ts
+var generateColorScale = (color, colorScheme2) => {
+  let interpolationColor = color;
+  if (colorScheme2 === "dark") {
+    const [L, C, H] = chroma2(color).oklch();
+    const chromaModifier = 0.7;
+    interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
+  }
+  const colors = R2.mapObjIndexed((colorData) => {
+    const luminance = colorData.luminance[colorScheme2];
+    return {
+      ...colorData,
+      hex: chroma2(interpolationColor).luminance(luminance).hex()
+    };
+  }, colorMetadata);
+  const baseColors2 = generateBaseColors(color, colorScheme2);
+  colors["base-default"] = { ...colors["base-default"], hex: baseColors2.default };
+  colors["base-hover"] = { ...colors["base-hover"], hex: baseColors2.hover };
+  colors["base-active"] = { ...colors["base-active"], hex: baseColors2.active };
+  colors["base-contrast-subtle"] = {
+    ...colors["base-contrast-subtle"],
+    hex: generateColorContrast(baseColors2.default, "subtle")
+  };
+  colors["base-contrast-default"] = {
+    ...colors["base-contrast-default"],
+    hex: generateColorContrast(baseColors2.default, "default")
+  };
+  return Object.values(colors);
+};
+var generateBaseColors = (color, colorScheme2) => {
+  let colorLightness = getLightnessFromHex(color);
+  if (colorScheme2 !== "light") {
+    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
+  }
+  const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
+  const calculateLightness = (base, mod) => base - mod;
+  return {
+    default: colorScheme2 === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
+    hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
+    active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
+  };
+};
+var generateColorContrast = (color, type) => {
+  if (type === "default") {
+    return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
+  }
+  if (type === "subtle") {
+    const contrastWhite = chroma2.contrast(color, "#ffffff");
+    const contrastBlack = chroma2.contrast(color, "#000000");
+    const lightness = getLightnessFromHex(color);
+    const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
+    const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
+    return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
   }
+  return color;
 };
 
-// src/tokens/template/design-tokens/semantic/style.json with { type: 'json' }
-var style_default = {
-  typography: {
-    heading: {
-      "2xl": {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.10}",
-          letterSpacing: "{letter-spacing.1}"
-        }
-      },
-      xl: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.9}",
-          letterSpacing: "{letter-spacing.1}"
-        }
-      },
-      lg: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.8}",
-          letterSpacing: "{letter-spacing.2}"
-        }
-      },
-      md: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.7}",
-          letterSpacing: "{letter-spacing.3}"
-        }
-      },
-      sm: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.6}",
-          letterSpacing: "{letter-spacing.5}"
+// src/colors/types.ts
+import * as R3 from "ramda";
+var semanticColorMap = {
+  "background-default": 1,
+  "background-tinted": 2,
+  "surface-default": 3,
+  "surface-tinted": 4,
+  "surface-hover": 5,
+  "surface-active": 6,
+  "border-subtle": 7,
+  "border-default": 8,
+  "border-strong": 9,
+  "text-subtle": 10,
+  "text-default": 11,
+  "base-default": 12,
+  "base-hover": 13,
+  "base-active": 14,
+  "base-contrast-subtle": 15,
+  "base-contrast-default": 16
+};
+var semanticColorNames = R3.keys(semanticColorMap);
+var semanticColorNumbers = R3.values(semanticColorMap);
+
+// src/tokens/create/generators/primitives/color-scheme.ts
+var generateColor = (colorArray, overrides) => {
+  const obj = {};
+  const $type = "color";
+  for (const index in colorArray) {
+    const position = Number(index) + 1;
+    const overrideValue = overrides?.[position];
+    obj[position] = {
+      $type,
+      $value: overrideValue || colorArray[index].hex
+    };
+  }
+  return obj;
+};
+var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
+  const createColorOverrides = (colorName) => {
+    if (!overrides?.colors || !(colorName in overrides.colors)) {
+      return void 0;
+    }
+    const colorOverrides = overrides.colors[colorName];
+    const positionOverrides = {};
+    Object.entries(colorOverrides).forEach(([semanticTokenName, modeOverrides]) => {
+      const position = colorMetadata[semanticTokenName].number;
+      if (position) {
+        let overrideValue;
+        if (colorScheme2 === "light" && modeOverrides.light) {
+          overrideValue = modeOverrides.light;
+        } else if (colorScheme2 === "dark" && modeOverrides.dark) {
+          overrideValue = modeOverrides.dark;
         }
-      },
-      xs: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.5}",
-          letterSpacing: "{letter-spacing.6}"
+        if (overrideValue) {
+          positionOverrides[position] = overrideValue;
         }
+      }
+    });
+    return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
+  };
+  const main = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors.main
+  );
+  const support = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    colors.support
+  );
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
+  const baseColorsWithOverrides = {
+    ...baseColors,
+    ...overrides?.severity
+  };
+  const globalColors = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    baseColorsWithOverrides
+  );
+  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
+  const defaultLinkVisited = linkColor[12];
+  const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
+  const defaultFocusInner = neutralColorScale[0].hex;
+  const defaultFocusOuter = neutralColorScale[10].hex;
+  const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
+  const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
+  return {
+    [themeName]: {
+      ...main,
+      ...support,
+      neutral,
+      ...globalColors,
+      link: {
+        visited: linkOverride || defaultLinkVisited
       },
-      "2xs": {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.medium}",
-          lineHeight: "{line-height.sm}",
-          fontSize: "{font-size.4}",
-          letterSpacing: "{letter-spacing.6}"
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
         }
       }
+    }
+  };
+};
+
+// src/tokens/create/generators/primitives/globals.ts
+var globals = {
+  "border-width": {
+    "1": {
+      $type: "borderWidth",
+      $value: "1px"
     },
-    body: {
-      xl: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.6}",
-          letterSpacing: "{letter-spacing.8}"
-        }
-      },
-      lg: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.5}",
-          letterSpacing: "{letter-spacing.8}"
-        }
-      },
-      md: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.4}",
-          letterSpacing: "{letter-spacing.8}"
-        }
-      },
-      sm: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.3}",
-          letterSpacing: "{letter-spacing.7}"
-        }
-      },
-      xs: {
-        $type: "typography",
-        $value: {
-          fontFamily: "{font-family}",
-          fontWeight: "{font-weight.regular}",
-          lineHeight: "{line-height.md}",
-          fontSize: "{font-size.2}",
-          letterSpacing: "{letter-spacing.6}"
+    "3": {
+      $type: "borderWidth",
+      $value: "3px"
+    }
+  },
+  shadow: {
+    "100": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.16)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0",
+          color: "rgba(0,0,0,0.12)"
         }
-      },
-      short: {
-        xl: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.6}",
-            letterSpacing: "{letter-spacing.8}"
-          }
+      ]
+    },
+    "200": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.15)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
         },
-        lg: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.5}",
-            letterSpacing: "{letter-spacing.8}"
-          }
+        {
+          color: "rgba(0,0,0,0.12)",
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0"
         },
-        md: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.4}",
-            letterSpacing: "{letter-spacing.8}"
-          }
+        {
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "0",
+          color: "rgba(0,0,0,0.1)"
+        }
+      ]
+    },
+    "300": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.14)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
         },
-        sm: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.3}",
-            letterSpacing: "{letter-spacing.7}"
-          }
+        {
+          color: "rgba(0,0,0,0.12)",
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "0"
         },
-        xs: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.sm}",
-            fontSize: "{font-size.2}",
-            letterSpacing: "{letter-spacing.6}"
-          }
+        {
+          x: "0",
+          y: "4",
+          blur: "8",
+          spread: "0",
+          color: "rgba(0,0,0,0.12)"
         }
-      },
-      long: {
-        xl: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
-            fontSize: "{font-size.6}",
-            letterSpacing: "{letter-spacing.8}"
-          }
+      ]
+    },
+    "400": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.13)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
         },
-        lg: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
-            fontSize: "{font-size.5}",
-            letterSpacing: "{letter-spacing.8}"
-          }
+        {
+          color: "rgba(0,0,0,0.13)",
+          x: "0",
+          y: "3",
+          blur: "5",
+          spread: "0"
         },
-        md: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
-            fontSize: "{font-size.4}",
-            letterSpacing: "{letter-spacing.8}"
-          }
+        {
+          x: "0",
+          y: "6",
+          blur: "12",
+          spread: "0",
+          color: "rgba(0,0,0,0.14)"
+        }
+      ]
+    },
+    "500": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.12)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
         },
-        sm: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
-            fontSize: "{font-size.3}",
-            letterSpacing: "{letter-spacing.7}"
-          }
+        {
+          color: "rgba(0,0,0,0.16)",
+          x: "0",
+          y: "4",
+          blur: "8",
+          spread: "0"
         },
-        xs: {
-          $type: "typography",
-          $value: {
-            fontFamily: "{font-family}",
-            fontWeight: "{font-weight.regular}",
-            lineHeight: "{line-height.lg}",
-            fontSize: "{font-size.2}",
-            letterSpacing: "{letter-spacing.6}"
-          }
+        {
+          x: "0",
+          y: "12",
+          blur: "24",
+          spread: "0",
+          color: "rgba(0,0,0,0.16)"
         }
-      }
+      ]
     }
   },
   opacity: {
-    disabled: {
+    "30": {
       $type: "opacity",
-      $value: "{opacity.30}"
-    }
-  },
-  "border-width": {
-    default: {
-      $type: "borderWidth",
-      $value: "{border-width.1}"
-    },
-    focus: {
-      $type: "borderWidth",
-      $value: "{border-width.3}"
+      $value: "30%"
     }
-  },
-  shadow: {
-    xs: {
-      $type: "boxShadow",
-      $value: "{shadow.100}"
-    },
-    sm: {
-      $type: "boxShadow",
-      $value: "{shadow.200}"
-    },
-    md: {
-      $type: "boxShadow",
-      $value: "{shadow.300}"
+  }
+};
+var generateGlobals = () => globals;
+
+// src/tokens/create/generators/primitives/size.ts
+var global = {
+  _size: {
+    "0": {
+      $type: "dimension",
+      $value: "floor({_size.unit} * 0)"
     },
-    lg: {
-      $type: "boxShadow",
-      $value: "{shadow.400}"
+    "1": {
+      $type: "dimension",
+      $value: "floor({_size.unit} * 1)"
     },
-    xl: {
-      $type: "boxShadow",
-      $value: "{shadow.500}"
-    }
-  },
-  "border-radius": {
-    sm: {
+    "2": {
       $type: "dimension",
-      $value: "{border-radius.1}"
+      $value: "floor({_size.unit} * 2)"
     },
-    md: {
+    "3": {
       $type: "dimension",
-      $value: "{border-radius.2}"
+      $value: "floor({_size.unit} * 3)"
     },
-    lg: {
+    "4": {
       $type: "dimension",
-      $value: "{border-radius.3}"
+      $value: "floor({_size.unit} * 4)"
     },
-    xl: {
+    "5": {
       $type: "dimension",
-      $value: "{border-radius.4}"
+      $value: "floor({_size.unit} * 5)"
     },
-    default: {
+    "6": {
       $type: "dimension",
-      $value: "{border-radius.5}"
+      $value: "floor({_size.unit} * 6)"
     },
-    full: {
+    "7": {
       $type: "dimension",
-      $value: "{border-radius.6}"
-    }
-  },
-  size: {
-    "0": {
-      $type: "dimension",
-      $value: "{_size.0}"
-    },
-    "1": {
-      $type: "dimension",
-      $value: "{_size.1}"
-    },
-    "2": {
-      $type: "dimension",
-      $value: "{_size.2}"
-    },
-    "3": {
-      $type: "dimension",
-      $value: "{_size.3}"
-    },
-    "4": {
-      $type: "dimension",
-      $value: "{_size.4}"
-    },
-    "5": {
-      $type: "dimension",
-      $value: "{_size.5}"
-    },
-    "6": {
-      $type: "dimension",
-      $value: "{_size.6}"
-    },
-    "7": {
-      $type: "dimension",
-      $value: "{_size.7}"
+      $value: "floor({_size.unit} * 7)"
     },
     "8": {
       $type: "dimension",
-      $value: "{_size.8}"
+      $value: "floor({_size.unit} * 8)"
     },
     "9": {
       $type: "dimension",
-      $value: "{_size.9}"
+      $value: "floor({_size.unit} * 9)"
     },
     "10": {
       $type: "dimension",
-      $value: "{_size.10}"
+      $value: "floor({_size.unit} * 10)"
     },
     "11": {
       $type: "dimension",
-      $value: "{_size.11}"
+      $value: "floor({_size.unit} * 11)"
     },
     "12": {
       $type: "dimension",
-      $value: "{_size.12}"
+      $value: "floor({_size.unit} * 12)"
     },
     "13": {
       $type: "dimension",
-      $value: "{_size.13}"
+      $value: "floor({_size.unit} * 13)"
     },
     "14": {
       $type: "dimension",
-      $value: "{_size.14}"
+      $value: "floor({_size.unit} * 14)"
     },
     "15": {
       $type: "dimension",
-      $value: "{_size.15}"
+      $value: "floor({_size.unit} * 15)"
     },
     "18": {
       $type: "dimension",
-      $value: "{_size.18}"
+      $value: "floor({_size.unit} * 18)"
     },
     "22": {
       $type: "dimension",
-      $value: "{_size.22}"
+      $value: "floor({_size.unit} * 22)"
     },
     "26": {
       $type: "dimension",
-      $value: "{_size.26}"
+      $value: "floor({_size.unit} * 26)"
     },
     "30": {
       $type: "dimension",
-      $value: "{_size.30}"
+      $value: "floor({_size.unit} * 30)"
+    },
+    "mode-font-size": {
+      $type: "number",
+      $value: "{size._mode-font-size}"
+    },
+    base: {
+      $type: "number",
+      $value: "{size._base}"
+    },
+    step: {
+      $type: "number",
+      $value: "{size._step}"
+    },
+    unit: {
+      $type: "number",
+      $value: "{_size.step} / {_size.base} * {_size.mode-font-size}"
     }
   }
 };
-
-// src/tokens/create/defaults.ts
-var defaultTokens = {
-  "primitives/globals": globals_default,
-  "primitives/modes/size/small": small_default,
-  "primitives/modes/size/medium": medium_default,
-  "primitives/modes/size/large": large_default,
-  "primitives/modes/size/global": global_default,
-  "primitives/modes/typography/size/small": small_default2,
-  "primitives/modes/typography/size/medium": medium_default2,
-  "primitives/modes/typography/size/large": large_default2,
-  "semantic/style": style_default
-};
-var getDefaultTokens = (tokenSets) => Object.entries(R.pick(tokenSets, defaultTokens));
-var getDefaultToken = (tokenPath) => {
-  return [tokenPath, defaultTokens[tokenPath]];
-};
-
-// src/tokens/create/generators/color.ts
-import * as R4 from "ramda";
-
-// src/colors/colorMetadata.ts
-import * as R2 from "ramda";
-var baseColors = {
-  info: "#0A71C0",
-  success: "#068718",
-  warning: "#EA9B1B",
-  danger: "#C01B1B"
-};
-var dsLinkColor = "#663299";
-var colorMetadata = {
-  "background-default": {
-    number: 1,
-    name: "background-default",
-    group: "background",
-    displayName: "Background Default",
-    description: {
-      long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
-      short: "Standard bakgrunnsfarge."
-    },
-    luminance: {
-      light: 1,
-      dark: 9e-3,
-      contrast: 1e-3
+var sizeModes = {
+  large: {
+    size: {
+      "_mode-font-size": {
+        $type: "dimension",
+        $value: "21"
+      },
+      _base: {
+        $type: "dimension",
+        $value: "18"
+      },
+      _step: {
+        $type: "dimension",
+        $value: "4"
+      }
     }
   },
-  "background-tinted": {
-    number: 2,
-    name: "background-tinted",
-    group: "background",
-    displayName: "Background Tinted",
-    description: {
-      long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
-      short: "Bakgrunn med et hint av farge i seg."
-    },
-    luminance: {
-      light: 0.9,
-      dark: 0.014,
-      contrast: 65e-4
+  medium: {
+    size: {
+      "_mode-font-size": {
+        $type: "dimension",
+        $value: "18"
+      },
+      _base: {
+        $type: "dimension",
+        $value: "18"
+      },
+      _step: {
+        $type: "dimension",
+        $value: "4"
+      }
     }
   },
-  "surface-default": {
-    number: 3,
-    name: "surface-default",
-    group: "surface",
-    displayName: "Surface Default",
-    description: {
-      long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
-      short: "Standardfarge for overflater / komponenter."
-    },
-    luminance: {
-      light: 1,
-      dark: 0.021,
-      contrast: 0.015
+  small: {
+    size: {
+      "_mode-font-size": {
+        $type: "dimension",
+        $value: "16"
+      },
+      _base: {
+        $type: "dimension",
+        $value: "18"
+      },
+      _step: {
+        $type: "dimension",
+        $value: "4"
+      }
     }
-  },
-  "surface-tinted": {
-    number: 4,
-    name: "surface-tinted",
-    group: "surface",
-    displayName: "Surface Tinted",
-    description: {
-      long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
-      short: "Overflater / komponenter med et hint av farge i seg."
+  }
+};
+var generateSize = (size2) => sizeModes[size2];
+var generateSizeGlobal = () => global;
+
+// src/tokens/create/generators/primitives/typography.ts
+var generateTypography = (themeName, { fontFamily }) => ({
+  [themeName]: {
+    "font-family": {
+      $type: "fontFamilies",
+      $value: fontFamily
     },
-    luminance: {
-      light: 0.81,
-      dark: 0.027,
-      contrast: 0.015
+    "font-weight": {
+      medium: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      semibold: {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
     }
+  }
+});
+var generateFontSizes = (size2) => fontSizes[size2];
+var lineHeights = {
+  sm: {
+    $type: "lineHeights",
+    $value: "130%"
+  },
+  md: {
+    $type: "lineHeights",
+    $value: "150%"
+  },
+  lg: {
+    $type: "lineHeights",
+    $value: "170%"
+  }
+};
+var letterSpacings = {
+  "1": {
+    $type: "letterSpacing",
+    $value: "-1%"
   },
-  "surface-hover": {
-    number: 5,
-    name: "surface-hover",
-    group: "surface",
-    displayName: "Surface Hover",
-    description: {
-      long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
-      short: "Hover-farge til overflater / komponenter."
-    },
-    luminance: {
-      light: 0.7,
-      dark: 0.036,
-      contrast: 0.028
-    }
+  "2": {
+    $type: "letterSpacing",
+    $value: "-0.5%"
   },
-  "surface-active": {
-    number: 6,
-    name: "surface-active",
-    group: "surface",
-    displayName: "Surface Active",
-    description: {
-      long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
-      short: "Active-farge til overflater / komponenter."
-    },
-    luminance: {
-      light: 0.59,
-      dark: 0.056,
-      contrast: 0.045
-    }
+  "3": {
+    $type: "letterSpacing",
+    $value: "-0.25%"
   },
-  "border-subtle": {
-    number: 7,
-    name: "border-subtle",
-    group: "border",
-    displayName: "Border Subtle",
-    description: {
-      long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
-      short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
-    },
-    luminance: {
-      light: 0.5,
-      dark: 0.08,
-      contrast: 0.26
-    }
+  "4": {
+    $type: "letterSpacing",
+    $value: "-0.15%"
   },
-  "border-default": {
-    number: 8,
-    name: "border-default",
-    group: "border",
-    displayName: "Border Default",
-    description: {
-      long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
-      short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
+  "5": {
+    $type: "letterSpacing",
+    $value: "0%"
+  },
+  "6": {
+    $type: "letterSpacing",
+    $value: "0.15%"
+  },
+  "7": {
+    $type: "letterSpacing",
+    $value: "0.25%"
+  },
+  "8": {
+    $type: "letterSpacing",
+    $value: "0.5%"
+  },
+  "9": {
+    $type: "letterSpacing",
+    $value: "1.5%"
+  }
+};
+var fontSizes = {
+  large: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "13"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "48"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "60"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "72"
+      }
     },
-    luminance: {
-      light: 0.19,
-      dark: 0.22,
-      contrast: 0.4
-    }
+    "letter-spacing": letterSpacings
   },
-  "border-strong": {
-    number: 9,
-    name: "border-strong",
-    group: "border",
-    displayName: "Border Strong",
-    description: {
-      long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
-      short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
+  medium: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "12"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "14"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "48"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "60"
+      }
     },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.6
-    }
+    "letter-spacing": letterSpacings
   },
-  "text-subtle": {
-    number: 10,
-    name: "text-subtle",
-    group: "text",
-    displayName: "Text Subtle",
-    description: {
-      long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
-      short: "Tekst- og ikonfarge med lavere kontrast."
-    },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.57
-    }
-  },
-  "text-default": {
-    number: 11,
-    name: "text-default",
-    group: "text",
-    displayName: "Text Default",
-    description: {
-      long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
-      short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
-    },
-    luminance: {
-      light: 0.0245,
-      dark: 0.84,
-      contrast: 0.86
-    }
-  },
-  "base-default": {
-    number: 12,
-    name: "base-default",
-    group: "base",
-    displayName: "Base Default",
-    description: {
-      long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
-      short: "Standardfarge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-hover": {
-    number: 13,
-    name: "base-hover",
-    group: "base",
-    displayName: "Base Hover",
-    description: {
-      long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
-      short: "Hover-farge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-active": {
-    number: 14,
-    name: "base-active",
-    group: "base",
-    displayName: "Base Active",
-    description: {
-      long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
-      short: "Active-farge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-contrast-subtle": {
-    number: 15,
-    name: "base-contrast-subtle",
-    group: "base",
-    displayName: "Contrast Subtle",
-    description: {
-      long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
-      short: "Farge med god kontrast mot Base-default."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-contrast-default": {
-    number: 16,
-    name: "base-contrast-default",
-    group: "base",
-    displayName: "Contrast Default",
-    description: {
-      long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
-      short: "Farge med god kontrast mot Base-default og Base-hover."
+  small: {
+    "line-height": lineHeights,
+    "font-size": {
+      "1": {
+        $type: "fontSizes",
+        $value: "11"
+      },
+      "2": {
+        $type: "fontSizes",
+        $value: "13"
+      },
+      "3": {
+        $type: "fontSizes",
+        $value: "14"
+      },
+      "4": {
+        $type: "fontSizes",
+        $value: "16"
+      },
+      "5": {
+        $type: "fontSizes",
+        $value: "18"
+      },
+      "6": {
+        $type: "fontSizes",
+        $value: "21"
+      },
+      "7": {
+        $type: "fontSizes",
+        $value: "24"
+      },
+      "8": {
+        $type: "fontSizes",
+        $value: "30"
+      },
+      "9": {
+        $type: "fontSizes",
+        $value: "36"
+      },
+      "10": {
+        $type: "fontSizes",
+        $value: "48"
+      }
     },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
+    "letter-spacing": letterSpacings
   }
 };
-var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
-var colorNames = Object.keys(colorMetadata);
-var baseColorNames = Object.keys(baseColors);
-
-// src/colors/theme.ts
-import chroma2 from "chroma-js";
-import * as R3 from "ramda";
-
-// src/colors/utils.ts
-import chroma from "chroma-js";
-import Colorjs from "colorjs.io";
-import { Hsluv } from "hsluv";
-var getLuminanceFromLightness = (lightness) => {
-  const conv = new Hsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  return chroma(conv.hex).luminance();
-};
-var getLightnessFromHex = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return conv.hsluv_l;
-};
 
-// src/colors/theme.ts
-var generateColorScale = (color, colorScheme2) => {
-  let interpolationColor = color;
-  if (colorScheme2 === "dark") {
-    const [L, C, H] = chroma2(color).oklch();
-    const chromaModifier = 0.7;
-    interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
-  }
-  const colors = R3.mapObjIndexed((colorData) => {
-    const luminance = colorData.luminance[colorScheme2];
-    return {
-      ...colorData,
-      hex: chroma2(interpolationColor).luminance(luminance).hex()
-    };
-  }, colorMetadata);
-  const baseColors2 = generateBaseColors(color, colorScheme2);
-  colors["base-default"] = { ...colors["base-default"], hex: baseColors2.default };
-  colors["base-hover"] = { ...colors["base-hover"], hex: baseColors2.hover };
-  colors["base-active"] = { ...colors["base-active"], hex: baseColors2.active };
-  colors["base-contrast-subtle"] = {
-    ...colors["base-contrast-subtle"],
-    hex: generateColorContrast(baseColors2.default, "subtle")
-  };
-  colors["base-contrast-default"] = {
-    ...colors["base-contrast-default"],
-    hex: generateColorContrast(baseColors2.default, "default")
-  };
-  return Object.values(colors);
-};
-var generateBaseColors = (color, colorScheme2) => {
-  let colorLightness = getLightnessFromHex(color);
-  if (colorScheme2 !== "light") {
-    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
-  }
-  const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
-  const calculateLightness = (base, mod) => base - mod;
+// src/tokens/create/generators/semantic/color.ts
+import * as R5 from "ramda";
+var generateSemanticColors = (colors, _themeName) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const allColors = [...customColors, ...baseColorNames];
+  const semanticColorTokens = allColors.map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
   return {
-    default: colorScheme2 === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
-    hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
-    active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
+    ...baseColorTemplate,
+    color: {
+      ...Object.fromEntries(semanticColorTokens),
+      ...baseColorTemplate.color
+    }
   };
 };
-var generateColorContrast = (color, type) => {
-  if (type === "default") {
-    return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
+var baseColorTemplate = {
+  color: {
+    focus: {
+      inner: {
+        $type: "color",
+        $value: "{color.focus.inner-color}"
+      },
+      outer: {
+        $type: "color",
+        $value: "{color.focus.outer-color}"
+      }
+    }
+  },
+  link: {
+    color: {
+      visited: {
+        $type: "color",
+        $value: "{color.link.visited}"
+      }
+    }
   }
-  if (type === "subtle") {
-    const contrastWhite = chroma2.contrast(color, "#ffffff");
-    const contrastBlack = chroma2.contrast(color, "#000000");
-    const lightness = getLightnessFromHex(color);
-    const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
-    const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
-    return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
+};
+var generateColorScaleTokens = (colorName) => {
+  const colorScale = {};
+  for (const [colorSemantic, colorNumber] of R5.toPairs(semanticColorMap)) {
+    colorScale[colorSemantic] = {
+      $type: "color",
+      $value: `{color.${colorName}.${colorNumber}}`
+    };
   }
-  return color;
+  return colorScale;
 };
 
-// src/tokens/create/generators/color.ts
-var generateColor = (colorArray, overrides) => {
-  const obj = {};
-  const $type = "color";
-  for (const index in colorArray) {
-    const position = Number(index) + 1;
-    const overrideValue = overrides?.[position];
-    obj[position] = {
-      $type,
-      $value: overrideValue || colorArray[index].hex
+// src/tokens/create/generators/semantic/color-modes.ts
+var generateColorModes = (colors, _themeName) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const modes = {
+    "main-color": {},
+    "support-color": {}
+  };
+  const categories = [
+    ["main-color", mainColorNames],
+    ["support-color", supportColorNames]
+  ];
+  for (const [colorCategory2, colorNames2] of categories) {
+    for (const colorName of colorNames2) {
+      const category = colorCategory2.replace("-color", "");
+      const customColorTokens = {
+        color: {
+          [category]: generateColorScaleTokens2(colorName)
+        }
+      };
+      modes[colorCategory2][colorName] = customColorTokens;
+    }
+  }
+  return modes;
+};
+var generateColorScaleTokens2 = (colorName) => {
+  const colorScale = {};
+  for (const colorSemantic of semanticColorNames) {
+    colorScale[colorSemantic] = {
+      $type: "color",
+      $value: `{color.${colorName}.${colorSemantic}}`
     };
   }
-  return obj;
+  return colorScale;
 };
-var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
-  const createColorOverrides = (colorName) => {
-    if (!overrides?.colors || !(colorName in overrides.colors)) {
-      return void 0;
-    }
-    const colorOverrides = overrides.colors[colorName];
-    const positionOverrides = {};
-    Object.entries(colorOverrides).forEach(([semanticTokenName, modeOverrides]) => {
-      const position = colorMetadata[semanticTokenName].number;
-      if (position) {
-        let overrideValue;
-        if (colorScheme2 === "light" && modeOverrides.light) {
-          overrideValue = modeOverrides.light;
-        } else if (colorScheme2 === "dark" && modeOverrides.dark) {
-          overrideValue = modeOverrides.dark;
+
+// src/tokens/create/generators/semantic/style.ts
+function generateSemanticStyle() {
+  return {
+    typography: {
+      heading: {
+        "2xl": {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.10}",
+            letterSpacing: "{letter-spacing.1}"
+          }
+        },
+        xl: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.9}",
+            letterSpacing: "{letter-spacing.1}"
+          }
+        },
+        lg: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.8}",
+            letterSpacing: "{letter-spacing.2}"
+          }
+        },
+        md: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.7}",
+            letterSpacing: "{letter-spacing.3}"
+          }
+        },
+        sm: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.5}"
+          }
+        },
+        xs: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        },
+        "2xs": {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.medium}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.4}",
+            letterSpacing: "{letter-spacing.6}"
+          }
         }
-        if (overrideValue) {
-          positionOverrides[position] = overrideValue;
+      },
+      body: {
+        xl: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        lg: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        md: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.4}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        sm: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.3}",
+            letterSpacing: "{letter-spacing.7}"
+          }
+        },
+        xs: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.md}",
+            fontSize: "{font-size.2}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        },
+        short: {
+          xl: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.6}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          lg: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.5}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          md: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.4}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          sm: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.3}",
+              letterSpacing: "{letter-spacing.7}"
+            }
+          },
+          xs: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.sm}",
+              fontSize: "{font-size.2}",
+              letterSpacing: "{letter-spacing.6}"
+            }
+          }
+        },
+        long: {
+          xl: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.6}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          lg: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.5}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          md: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.4}",
+              letterSpacing: "{letter-spacing.8}"
+            }
+          },
+          sm: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.3}",
+              letterSpacing: "{letter-spacing.7}"
+            }
+          },
+          xs: {
+            $type: "typography",
+            $value: {
+              fontFamily: "{font-family}",
+              fontWeight: "{font-weight.regular}",
+              lineHeight: "{line-height.lg}",
+              fontSize: "{font-size.2}",
+              letterSpacing: "{letter-spacing.6}"
+            }
+          }
         }
       }
-    });
-    return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
-  };
-  const main = R4.mapObjIndexed(
-    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
-    colors.main
-  );
-  const support = R4.mapObjIndexed(
-    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
-    colors.support
-  );
-  const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
-  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
-  const baseColorsWithOverrides = {
-    ...baseColors,
-    ...overrides?.severity
+    },
+    opacity: {
+      disabled: {
+        $type: "opacity",
+        $value: "{opacity.30}"
+      }
+    },
+    "border-width": {
+      default: {
+        $type: "borderWidth",
+        $value: "{border-width.1}"
+      },
+      focus: {
+        $type: "borderWidth",
+        $value: "{border-width.3}"
+      }
+    },
+    shadow: {
+      xs: {
+        $type: "boxShadow",
+        $value: "{shadow.100}"
+      },
+      sm: {
+        $type: "boxShadow",
+        $value: "{shadow.200}"
+      },
+      md: {
+        $type: "boxShadow",
+        $value: "{shadow.300}"
+      },
+      lg: {
+        $type: "boxShadow",
+        $value: "{shadow.400}"
+      },
+      xl: {
+        $type: "boxShadow",
+        $value: "{shadow.500}"
+      }
+    },
+    "border-radius": {
+      sm: {
+        $type: "dimension",
+        $value: "{border-radius.1}"
+      },
+      md: {
+        $type: "dimension",
+        $value: "{border-radius.2}"
+      },
+      lg: {
+        $type: "dimension",
+        $value: "{border-radius.3}"
+      },
+      xl: {
+        $type: "dimension",
+        $value: "{border-radius.4}"
+      },
+      default: {
+        $type: "dimension",
+        $value: "{border-radius.5}"
+      },
+      full: {
+        $type: "dimension",
+        $value: "{border-radius.6}"
+      }
+    },
+    size: {
+      "0": {
+        $type: "dimension",
+        $value: "{_size.0}"
+      },
+      "1": {
+        $type: "dimension",
+        $value: "{_size.1}"
+      },
+      "2": {
+        $type: "dimension",
+        $value: "{_size.2}"
+      },
+      "3": {
+        $type: "dimension",
+        $value: "{_size.3}"
+      },
+      "4": {
+        $type: "dimension",
+        $value: "{_size.4}"
+      },
+      "5": {
+        $type: "dimension",
+        $value: "{_size.5}"
+      },
+      "6": {
+        $type: "dimension",
+        $value: "{_size.6}"
+      },
+      "7": {
+        $type: "dimension",
+        $value: "{_size.7}"
+      },
+      "8": {
+        $type: "dimension",
+        $value: "{_size.8}"
+      },
+      "9": {
+        $type: "dimension",
+        $value: "{_size.9}"
+      },
+      "10": {
+        $type: "dimension",
+        $value: "{_size.10}"
+      },
+      "11": {
+        $type: "dimension",
+        $value: "{_size.11}"
+      },
+      "12": {
+        $type: "dimension",
+        $value: "{_size.12}"
+      },
+      "13": {
+        $type: "dimension",
+        $value: "{_size.13}"
+      },
+      "14": {
+        $type: "dimension",
+        $value: "{_size.14}"
+      },
+      "15": {
+        $type: "dimension",
+        $value: "{_size.15}"
+      },
+      "18": {
+        $type: "dimension",
+        $value: "{_size.18}"
+      },
+      "22": {
+        $type: "dimension",
+        $value: "{_size.22}"
+      },
+      "26": {
+        $type: "dimension",
+        $value: "{_size.26}"
+      },
+      "30": {
+        $type: "dimension",
+        $value: "{_size.30}"
+      }
+    }
   };
-  const globalColors = R4.mapObjIndexed(
-    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
-    baseColorsWithOverrides
+}
+
+// src/tokens/create/generators/themes/theme.ts
+import * as R6 from "ramda";
+var generateTheme = (colors, themeName, borderRadius) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
+  const themeColorTokens = Object.fromEntries(
+    customColors.map((colorName) => [colorName, generateColorScaleTokens3(colorName, themeName)])
   );
-  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
-  const defaultLinkVisited = linkColor[12];
-  const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
-  const defaultFocusInner = neutralColorScale[0].hex;
-  const defaultFocusOuter = neutralColorScale[10].hex;
-  const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
-  const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
-  return {
-    [themeName]: {
-      ...main,
-      ...support,
-      neutral,
-      ...globalColors,
+  const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
+  const themeFile = {
+    color: {
+      ...themeColorTokens,
+      ...themeBaseFileColor,
       link: {
-        visited: linkOverride || defaultLinkVisited
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
       },
       focus: {
-        inner: {
+        "inner-color": {
           $type: "color",
-          $value: focusInnerOverride || defaultFocusInner
+          $value: `{${themeName}.focus.inner}`
         },
-        outer: {
+        "outer-color": {
           $type: "color",
-          $value: focusOuterOverride || defaultFocusOuter
+          $value: `{${themeName}.focus.outer}`
         }
       }
-    }
-  };
-};
-
-// src/tokens/create/generators/semantic.ts
-import * as R5 from "ramda";
-
-// src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
-var color_base_template_default = {
-  color: {
-    focus: {
-      inner: {
-        $type: "color",
-        $value: "{color.focus.inner-color}"
-      },
-      outer: {
-        $type: "color",
-        $value: "{color.focus.outer-color}"
-      }
-    }
-  },
-  link: {
-    color: {
-      visited: {
-        $type: "color",
-        $value: "{color.link.visited}"
-      }
-    }
-  }
-};
-
-// src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
-var color_template_default = {
-  "background-default": {
-    $type: "color",
-    $value: "{color.<color>.1}"
-  },
-  "background-tinted": {
-    $type: "color",
-    $value: "{color.<color>.2}"
-  },
-  "surface-default": {
-    $type: "color",
-    $value: "{color.<color>.3}"
-  },
-  "surface-tinted": {
-    $type: "color",
-    $value: "{color.<color>.4}"
-  },
-  "surface-hover": {
-    $type: "color",
-    $value: "{color.<color>.5}"
-  },
-  "surface-active": {
-    $type: "color",
-    $value: "{color.<color>.6}"
-  },
-  "border-subtle": {
-    $type: "color",
-    $value: "{color.<color>.7}"
-  },
-  "border-default": {
-    $type: "color",
-    $value: "{color.<color>.8}"
-  },
-  "border-strong": {
-    $type: "color",
-    $value: "{color.<color>.9}"
-  },
-  "text-subtle": {
-    $type: "color",
-    $value: "{color.<color>.10}"
-  },
-  "text-default": {
-    $type: "color",
-    $value: "{color.<color>.11}"
-  },
-  "base-default": {
-    $type: "color",
-    $value: "{color.<color>.12}"
-  },
-  "base-hover": {
-    $type: "color",
-    $value: "{color.<color>.13}"
-  },
-  "base-active": {
-    $type: "color",
-    $value: "{color.<color>.14}"
-  },
-  "base-contrast-subtle": {
-    $type: "color",
-    $value: "{color.<color>.15}"
-  },
-  "base-contrast-default": {
-    $type: "color",
-    $value: "{color.<color>.16}"
-  }
-};
-
-// src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
-var color_template_default2 = {
-  "background-default": {
-    $type: "color",
-    $value: "{color.<color>.background-default}"
-  },
-  "background-tinted": {
-    $type: "color",
-    $value: "{color.<color>.background-tinted}"
-  },
-  "surface-default": {
-    $type: "color",
-    $value: "{color.<color>.surface-default}"
-  },
-  "surface-tinted": {
-    $type: "color",
-    $value: "{color.<color>.surface-tinted}"
-  },
-  "surface-hover": {
-    $type: "color",
-    $value: "{color.<color>.surface-hover}"
-  },
-  "surface-active": {
-    $type: "color",
-    $value: "{color.<color>.surface-active}"
-  },
-  "border-subtle": {
-    $type: "color",
-    $value: "{color.<color>.border-subtle}"
-  },
-  "border-default": {
-    $type: "color",
-    $value: "{color.<color>.border-default}"
-  },
-  "border-strong": {
-    $type: "color",
-    $value: "{color.<color>.border-strong}"
-  },
-  "text-subtle": {
-    $type: "color",
-    $value: "{color.<color>.text-subtle}"
-  },
-  "text-default": {
-    $type: "color",
-    $value: "{color.<color>.text-default}"
-  },
-  "base-default": {
-    $type: "color",
-    $value: "{color.<color>.base-default}"
-  },
-  "base-hover": {
-    $type: "color",
-    $value: "{color.<color>.base-hover}"
-  },
-  "base-active": {
-    $type: "color",
-    $value: "{color.<color>.base-active}"
-  },
-  "base-contrast-subtle": {
-    $type: "color",
-    $value: "{color.<color>.base-contrast-subtle}"
-  },
-  "base-contrast-default": {
-    $type: "color",
-    $value: "{color.<color>.base-contrast-default}"
-  }
-};
-
-// src/tokens/create/generators/semantic.ts
-var generateSemantic = (colors, _themeName) => {
-  const mainColorNames = Object.keys(colors.main);
-  const supportColorNames = Object.keys(colors.support);
-  const modes = {
-    "main-color": {},
-    "support-color": {}
+    },
+    ...remainingThemeFile
   };
-  const categories = [
-    ["main-color", mainColorNames],
-    ["support-color", supportColorNames]
-  ];
-  for (const [colorCategory2, colorNames2] of categories) {
-    for (const colorName of colorNames2) {
-      const category = colorCategory2.replace("-color", "");
-      const customColorTokens = {
-        color: {
-          [category]: JSON.parse(
-            JSON.stringify(
-              color_template_default2,
-              (key, value) => {
-                if (key === "$value") {
-                  return value.replace("<color>", colorName);
-                }
-                return value;
-              },
-              2
-            )
-          )
+  const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
+  const token = JSON.parse(
+    JSON.stringify(
+      updatedThemeFile,
+      (key, value) => {
+        if (key === "$value") {
+          return value.replace("<theme>", themeName);
         }
-      };
-      modes[colorCategory2][colorName] = customColorTokens;
-    }
-  }
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const allColors = [...customColors, ...baseColorNames];
-  const semanticColorTokens = allColors.map(
-    (colorName) => [
-      colorName,
-      R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
-    ]
+        return value;
+      },
+      2
+    )
   );
-  const color = {
-    ...color_base_template_default,
-    color: {
-      ...Object.fromEntries(semanticColorTokens),
-      ...color_base_template_default.color
-    }
-  };
-  return {
-    modes,
-    color
-  };
+  return token;
 };
-
-// src/tokens/create/generators/theme.ts
-import * as R6 from "ramda";
-
-// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
-var theme_base_template_default = {
+var generateBase = (themeName) => ({
   color: {},
   "font-family": {
     $type: "fontFamilies",
-    $value: "{<theme>.font-family}"
+    $value: `{${themeName}.font-family}`
   },
   "font-weight": {
     medium: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.medium}"
+      $value: `{${themeName}.font-weight.medium}`
     },
     semibold: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.semibold}"
+      $value: `{${themeName}.font-weight.semibold}`
     },
     regular: {
       $type: "fontWeights",
-      $value: "{<theme>.font-weight.regular}"
+      $value: `{${themeName}.font-weight.regular}`
     }
   },
   "border-radius": {
@@ -2049,176 +1888,30 @@ var theme_base_template_default = {
       $value: "4"
     }
   }
-};
-
-// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
-var theme_template_default = {
-  "1": {
-    $type: "color",
-    $value: "{<theme>.<color>.1}"
-  },
-  "2": {
-    $type: "color",
-    $value: "{<theme>.<color>.2}"
-  },
-  "3": {
-    $type: "color",
-    $value: "{<theme>.<color>.3}"
-  },
-  "4": {
-    $type: "color",
-    $value: "{<theme>.<color>.4}"
-  },
-  "5": {
-    $type: "color",
-    $value: "{<theme>.<color>.5}"
-  },
-  "6": {
-    $type: "color",
-    $value: "{<theme>.<color>.6}"
-  },
-  "7": {
-    $type: "color",
-    $value: "{<theme>.<color>.7}"
-  },
-  "8": {
-    $type: "color",
-    $value: "{<theme>.<color>.8}"
-  },
-  "9": {
-    $type: "color",
-    $value: "{<theme>.<color>.9}"
-  },
-  "10": {
-    $type: "color",
-    $value: "{<theme>.<color>.10}"
-  },
-  "11": {
-    $type: "color",
-    $value: "{<theme>.<color>.11}"
-  },
-  "12": {
-    $type: "color",
-    $value: "{<theme>.<color>.12}"
-  },
-  "13": {
-    $type: "color",
-    $value: "{<theme>.<color>.13}"
-  },
-  "14": {
-    $type: "color",
-    $value: "{<theme>.<color>.14}"
-  },
-  "15": {
-    $type: "color",
-    $value: "{<theme>.<color>.15}"
-  },
-  "16": {
-    $type: "color",
-    $value: "{<theme>.<color>.16}"
-  }
-};
-
-// src/tokens/create/generators/theme.ts
-var generateTheme = (colors, themeName, borderRadius) => {
-  const mainColorNames = Object.keys(colors.main);
-  const supportColorNames = Object.keys(colors.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
-  const themeColorTokens = Object.fromEntries(
-    customColors.map(
-      (colorName) => [
-        colorName,
-        R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
-      ]
-    )
-  );
-  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
-  const themeFile = {
-    color: {
-      ...themeColorTokens,
-      ...themeBaseFileColor,
-      link: {
-        visited: {
-          $type: "color",
-          $value: `{${themeName}.link.visited}`
-        }
-      },
-      focus: {
-        "inner-color": {
-          $type: "color",
-          $value: `{${themeName}.focus.inner}`
-        },
-        "outer-color": {
-          $type: "color",
-          $value: `{${themeName}.focus.outer}`
-        }
-      }
-    },
-    ...remainingThemeFile
-  };
-  const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
-  const token = JSON.parse(
-    JSON.stringify(
-      updatedThemeFile,
-      (key, value) => {
-        if (key === "$value") {
-          return value.replace("<theme>", themeName);
-        }
-        return value;
-      },
-      2
-    )
-  );
-  return token;
-};
-
-// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
-var typography_template_default = {
-  "<theme>": {
-    "font-family": {
-      $type: "fontFamilies",
-      $value: "<font-family>"
-    },
-    "font-weight": {
-      medium: {
-        $type: "fontWeights",
-        $value: "Medium"
-      },
-      semibold: {
-        $type: "fontWeights",
-        $value: "Semi bold"
-      },
-      regular: {
-        $type: "fontWeights",
-        $value: "Regular"
-      }
-    }
+});
+var generateColorScaleTokens3 = (colorName, themeName) => {
+  const colorScale = {};
+  for (const [_, colorNumber] of R6.toPairs(semanticColorMap)) {
+    colorScale[colorNumber] = {
+      $type: "color",
+      $value: `{${themeName}.${colorName}.${colorNumber}}`
+    };
   }
-};
-
-// src/tokens/create/generators/typography.ts
-var generateTypography = (themeName, { fontFamily }) => {
-  return JSON.parse(
-    JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
-  );
+  return colorScale;
 };
 
 // src/tokens/create.ts
-var createTokens = async (opts) => {
-  const { colors, typography: typography2, name, borderRadius, overrides } = opts;
+var createTokens = async (theme) => {
+  const { colors, typography: typography2, name, borderRadius, overrides } = theme;
   const colorSchemes = ["light", "dark"];
-  const semantic2 = generateSemantic(colors, name);
+  const sizeModes2 = ["small", "medium", "large"];
   const tokenSets = new Map([
-    ...getDefaultTokens([
-      "primitives/globals",
-      "primitives/modes/size/small",
-      "primitives/modes/size/medium",
-      "primitives/modes/size/large",
-      "primitives/modes/size/global",
-      "primitives/modes/typography/size/small",
-      "primitives/modes/typography/size/medium",
-      "primitives/modes/typography/size/large"
+    ["primitives/globals", generateGlobals()],
+    ...sizeModes2.map((size2) => [`primitives/modes/size/${size2}`, generateSize(size2)]),
+    ["primitives/modes/size/global", generateSizeGlobal()],
+    ...sizeModes2.map((size2) => [
+      `primitives/modes/typography/size/${size2}`,
+      generateFontSizes(size2)
     ]),
     [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
@@ -2226,12 +1919,12 @@ var createTokens = async (opts) => {
       [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors, name, borderRadius)],
-    ["semantic/color", semantic2.color],
+    ["semantic/color", generateSemanticColors(colors, name)],
     // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
-    ...Object.entries(semantic2.modes).flatMap(
+    ...Object.entries(generateColorModes(colors, name)).flatMap(
       ([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
     ),
-    getDefaultToken("semantic/style")
+    [`semantic/style`, generateSemanticStyle()]
   ]);
   return { tokenSets };
 };
@@ -3106,8 +2799,8 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
   const grouped$themes = groupThemes(processed$themes);
   const permutations = permutateThemes(grouped$themes);
   const ALL_DEPENDENT_ON = ["theme"];
-  const keys2 = R19.keys(grouped$themes);
-  const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
+  const keys3 = R19.keys(grouped$themes);
+  const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
     console.log(pc.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
     console.log(pc.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
@@ -3368,10 +3061,10 @@ async function processPlatform(options) {
     console.log(`
 \u{1F3A8} Using ${pc2.blue(buildOptions.defaultColor)} as default color`);
   }
-  const sizeModes = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
-  buildOptions.sizeModes = sizeModes;
+  const sizeModes2 = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
+  buildOptions.sizeModes = sizeModes2;
   if (!buildOptions.defaultSize) {
-    const defaultSize = R21.head(sizeModes);
+    const defaultSize = R21.head(sizeModes2);
     buildOptions.defaultSize = defaultSize;
   }
   if (buildOptions.defaultSize) {
@@ -3486,6 +3179,7 @@ var cleanDir = async (dir, dry) => {
 };
 
 // src/scripts/update-preview-tokens.ts
+var OUTDIR = "../../internal/components/src/tokens/design-tokens";
 async function write(files, outDir, dry) {
   for (const { destination, output } of files) {
     if (destination) {
@@ -3509,8 +3203,8 @@ var toPreviewToken = (tokens) => tokens.map(({ token, formatted }) => {
 });
 var formatTheme = async (themeConfig) => {
   const { tokenSets } = await createTokens(themeConfig);
-  const outDir = "../../apps/www/app/_components/tokens/design-tokens";
-  const $themes = await generate$Themes(["dark", "light"], [themeConfig.name], themeConfig.colors);
+  const sizeModes2 = ["small", "medium", "large"];
+  const $themes = await generate$Themes(["dark", "light"], [themeConfig.name], themeConfig.colors, sizeModes2);
   const processed$themes = $themes.map(processThemeObject);
   await processPlatform({
     type: "format",
@@ -3519,7 +3213,7 @@ var formatTheme = async (themeConfig) => {
     verbose: false,
     buildTokenFormats: {}
   });
-  await cleanDir(outDir, false);
+  await cleanDir(OUTDIR, false);
   console.log(
     buildOptions?.buildTokenFormats ? `
 \u{1F3D7}\uFE0F Start building preview tokens for ${pc4.blue("Designsystemet")}
@@ -3557,7 +3251,7 @@ var formatTheme = async (themeConfig) => {
             output: JSON.stringify(tokens, null, 2)
           }
         ],
-        outDir,
+        OUTDIR,
         false
       );
     }
@@ -3569,8 +3263,10 @@ formatTheme({
   name: "test",
   borderRadius: designsystemet_config_default.themes.designsystemet.borderRadius,
   colors: {
-    main: designsystemet_config_default.themes.designsystemet.colors.main,
-    support: designsystemet_config_default.themes.designsystemet.colors.support,
+    main: {
+      primary: designsystemet_config_default.themes.designsystemet.colors.main.accent
+    },
+    support: {},
     neutral: designsystemet_config_default.themes.designsystemet.colors.neutral
   },
   typography: designsystemet_config_default.themes.designsystemet.typography