@digdir/designsystemet 1.0.2 → 1.0.3

package/dist/src/colors/colorMetadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,mBAsM3B,CAAC;AAIF,eAAO,MAAM,wBAAwB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAE3D,CAAC"}
+{"version":3,"file":"colorMetadata.d.ts","sourceRoot":"","sources":["../../../src/colors/colorMetadata.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAMrD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,mBAiP3B,CAAC;AAIF,eAAO,MAAM,wBAAwB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAE3D,CAAC"}

package/dist/src/colors/colorMetadata.js

@@ -12,10 +12,13 @@ const colorMetadata = {
     name: "background-default",
     group: "background",
     displayName: "Background Default",
-    description: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
+    description: {
+      long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
+      short: "Standard bakgrunnsfarge."
+    },
     luminance: {
       light: 1,
-      dark: 0.011,
+      dark: 9e-3,
       contrast: 1e-3
     }
   },
@@ -24,10 +27,13 @@ const colorMetadata = {
     name: "background-tinted",
     group: "background",
     displayName: "Background Tinted",
-    description: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
+    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.017,
+      dark: 0.014,
       contrast: 65e-4
     }
   },
@@ -36,10 +42,13 @@ const colorMetadata = {
     name: "surface-default",
     group: "surface",
     displayName: "Surface Default",
-    description: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
+    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.025,
+      dark: 0.021,
       contrast: 0.015
     }
   },
@@ -48,10 +57,13 @@ const colorMetadata = {
     name: "surface-tinted",
     group: "surface",
     displayName: "Surface Tinted",
-    description: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
+    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."
+    },
     luminance: {
       light: 0.81,
-      dark: 0.035,
+      dark: 0.027,
       contrast: 0.015
     }
   },
@@ -60,10 +72,13 @@ const colorMetadata = {
     name: "surface-hover",
     group: "surface",
     displayName: "Surface Hover",
-    description: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
+    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.044,
+      dark: 0.036,
       contrast: 0.028
     }
   },
@@ -72,10 +87,13 @@ const colorMetadata = {
     name: "surface-active",
     group: "surface",
     displayName: "Surface Active",
-    description: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
+    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.6,
-      dark: 0.057,
+      light: 0.59,
+      dark: 0.056,
       contrast: 0.045
     }
   },
@@ -84,10 +102,13 @@ const colorMetadata = {
     name: "border-subtle",
     group: "border",
     displayName: "Border Subtle",
-    description: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
+    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.082,
+      dark: 0.08,
       contrast: 0.26
     }
   },
@@ -96,10 +117,13 @@ const colorMetadata = {
     name: "border-default",
     group: "border",
     displayName: "Border Default",
-    description: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
+    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."
+    },
     luminance: {
-      light: 0.21,
-      dark: 0.2,
+      light: 0.19,
+      dark: 0.22,
       contrast: 0.4
     }
   },
@@ -108,10 +132,13 @@ const colorMetadata = {
     name: "border-strong",
     group: "border",
     displayName: "Border Strong",
-    description: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
+    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."
+    },
     luminance: {
-      light: 0.12,
-      dark: 0.36,
+      light: 0.11,
+      dark: 0.39,
       contrast: 0.6
     }
   },
@@ -120,10 +147,13 @@ const colorMetadata = {
     name: "text-subtle",
     group: "text",
     displayName: "Text Subtle",
-    description: "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.",
+    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.12,
-      dark: 0.36,
+      light: 0.11,
+      dark: 0.39,
       contrast: 0.57
     }
   },
@@ -132,10 +162,13 @@ const colorMetadata = {
     name: "text-default",
     group: "text",
     displayName: "Text Default",
-    description: "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.",
+    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.78,
+      dark: 0.84,
       contrast: 0.86
     }
   },
@@ -144,7 +177,10 @@ const colorMetadata = {
     name: "base-default",
     group: "base",
     displayName: "Base Default",
-    description: "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.",
+    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,
@@ -156,7 +192,10 @@ const colorMetadata = {
     name: "base-hover",
     group: "base",
     displayName: "Base Hover",
-    description: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
+    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,
@@ -168,7 +207,10 @@ const colorMetadata = {
     name: "base-active",
     group: "base",
     displayName: "Base Active",
-    description: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
+    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,
@@ -180,7 +222,10 @@ const colorMetadata = {
     name: "base-contrast-subtle",
     group: "base",
     displayName: "Contrast Subtle",
-    description: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
+    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,
@@ -192,7 +237,10 @@ const colorMetadata = {
     name: "base-contrast-default",
     group: "base",
     displayName: "Contrast Default",
-    description: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
+    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."
+    },
     luminance: {
       light: 1,
       dark: 1,

package/dist/src/colors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7E,eAAO,MAAM,eAAe,UAW3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,QAAQ,EAAE,aAAa,WAAW,KAAG,KAAK,EAwBnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,OAAO,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,QAAQ,EAAE,MAAM,SAAS,GAAG,QAAQ,KAAG,QAgBnF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,EAAE,aAAa,WAAW,WAEzE,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7E,eAAO,MAAM,eAAe,UAW3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,QAAQ,EAAE,aAAa,WAAW,KAAG,KAAK,EAiCnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,OAAO,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,QAAQ,EAAE,MAAM,SAAS,GAAG,QAAQ,KAAG,QAgBnF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,EAAE,aAAa,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -15,11 +15,17 @@ const RESERVED_COLORS = [
   "red"
 ];
 const generateColorScale = (color, colorScheme) => {
+  let interpolationColor = color;
+  if (colorScheme === "dark") {
+    const [L, C, H] = chroma(color).oklch();
+    const chromaModifier = 0.7;
+    interpolationColor = chroma(L, C * chromaModifier, H, "oklch").hex();
+  }
   const colors = R.mapObjIndexed((colorData) => {
     const luminance = colorData.luminance[colorScheme];
     return {
       ...colorData,
-      hex: chroma(color).luminance(luminance).hex()
+      hex: chroma(interpolationColor).luminance(luminance).hex()
     };
   }, colorMetadata);
   const baseColors = generateBaseColors(color, colorScheme);

package/dist/src/colors/types.d.ts

@@ -35,7 +35,10 @@ export type ColorMetadata = {
     name: ColorNames;
     number: ColorNumber;
     displayName: string;
-    description: string;
+    description: {
+        short: string;
+        long: string;
+    };
     group: string;
     luminance: {
         light: number;

package/dist/src/colors/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,sBAAsB,CAAC,MAAM,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,MAAM,sBAAsB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,sBAAsB,GAAG;IAC5B,oBAAoB,EAAE,CAAC,CAAC;IACxB,mBAAmB,EAAE,CAAC,CAAC;IACvB,iBAAiB,EAAE,CAAC,CAAC;IACrB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,aAAa,EAAE,EAAE,CAAC;IAClB,cAAc,EAAE,EAAE,CAAC;IACnB,cAAc,EAAE,EAAE,CAAC;IACnB,YAAY,EAAE,EAAE,CAAC;IACjB,aAAa,EAAE,EAAE,CAAC;IAClB,sBAAsB,EAAE,EAAE,CAAC;IAC3B,uBAAuB,EAAE,EAAE,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;KACzB,CAAC,IAAI,MAAM,sBAAsB,GAAG;QACnC,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;KACnC;CACF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,CAAC,CAAC,GAAG,aAAa;CAC3E,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,QAAQ,EAAE,KAAK,EAAE,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,sBAAsB,CAAC,MAAM,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,MAAM,sBAAsB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1E,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,sBAAsB,GAAG;IAC5B,oBAAoB,EAAE,CAAC,CAAC;IACxB,mBAAmB,EAAE,CAAC,CAAC;IACvB,iBAAiB,EAAE,CAAC,CAAC;IACrB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,gBAAgB,EAAE,CAAC,CAAC;IACpB,eAAe,EAAE,CAAC,CAAC;IACnB,aAAa,EAAE,EAAE,CAAC;IAClB,cAAc,EAAE,EAAE,CAAC;IACnB,cAAc,EAAE,EAAE,CAAC;IACnB,YAAY,EAAE,EAAE,CAAC;IACjB,aAAa,EAAE,EAAE,CAAC;IAClB,sBAAsB,EAAE,EAAE,CAAC;IAC3B,uBAAuB,EAAE,EAAE,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;KACzB,CAAC,IAAI,MAAM,sBAAsB,GAAG;QACnC,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC;KACnC;CACF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,CAAC,CAAC,GAAG,aAAa;CAC3E,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,QAAQ,EAAE,KAAK,EAAE,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,MAAM,EAAE,CAAC"}

package/dist/src/tokens/build/configs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAGV,kBAAkB,EAClB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AA8BjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AA2OnH,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,QAAQ,oBAAoB,EAAE,EAC9B,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAGV,kBAAkB,EAClB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AA8BjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AA6OnH,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,QAAQ,oBAAoB,EAAE,EAC9B,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}

package/dist/src/tokens/build/configs.js

@@ -78,7 +78,7 @@ const colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme, theme,
   }
   const layer = `ds.theme.color`;
   const isRootColor = color === buildOptions?.rootColor;
-  const selector = `${isRootColor ? ":root, [data-color-scheme], " : ""}[data-color="${color}"]`;
+  const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
   const config = {
     usesDtcg,
     preprocessors: ["tokens-studio"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "engines": {