@digdir/designsystemet 1.8.0 → 1.9.0

package/configs/test-tokens.config.json

@@ -46,6 +46,16 @@
         "linkVisited": {
           "light": "#ff1234",
           "dark": "#1234ff"
+        },
+        "focus": {
+          "inner": {
+            "light": "#00ff00",
+            "dark": "#00ffff"
+          },
+          "outer": {
+            "light": "#ffff00",
+            "dark": "#ff00aa"
+          }
         }
       }
     },

package/dist/bin/config.js

@@ -397,10 +397,21 @@ var linkVisitedOverrideSchema = z.object({
   light: colorSchema.optional().describe("A hex color that overrides light mode"),
   dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Overrides for the "link-visited" color');
+var focusOverrideSchema = z.object({
+  inner: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-inner" color'),
+  outer: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-outer" color')
+}).describe("Overrides for the focus colors");
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
   severity: severityColorOverrideSchema.optional(),
-  linkVisited: linkVisitedOverrideSchema.optional()
+  linkVisited: linkVisitedOverrideSchema.optional(),
+  focus: focusOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({

package/dist/bin/designsystemet.js

@@ -861,7 +861,7 @@ import pc5 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -925,7 +925,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",
@@ -3856,7 +3856,8 @@ var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
     colors2.support
   );
-  const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors2.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -3866,7 +3867,12 @@ var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
     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,
@@ -3874,7 +3880,17 @@ var generateColorScheme = (themeName, colorScheme2, colors2, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };
@@ -3889,11 +3905,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -4249,6 +4265,16 @@ var generateTheme = (colors2, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile
@@ -4641,10 +4667,21 @@ var linkVisitedOverrideSchema = z.object({
   light: colorSchema.optional().describe("A hex color that overrides light mode"),
   dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Overrides for the "link-visited" color');
+var focusOverrideSchema = z.object({
+  inner: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-inner" color'),
+  outer: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-outer" color')
+}).describe("Overrides for the focus colors");
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
   severity: severityColorOverrideSchema.optional(),
-  linkVisited: linkVisitedOverrideSchema.optional()
+  linkVisited: linkVisitedOverrideSchema.optional(),
+  focus: focusOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({

package/dist/{color.base.template-QGZJKXMN.json → color.base.template-5XWYH2F5.json}

@@ -3,11 +3,11 @@
     "focus": {
       "inner": {
         "$type": "color",
-        "$value": "{color.neutral.background-default}"
+        "$value": "{color.focus.inner-color}"
       },
       "outer": {
         "$type": "color",
-        "$value": "{color.neutral.text-default}"
+        "$value": "{color.focus.outer-color}"
       }
     }
   },
@@ -19,4 +19,4 @@
       }
     }
   }
-}
+}

package/dist/config.schema.json

@@ -152,6 +152,39 @@
                   }
                 },
                 "additionalProperties": false
+              },
+              "focus": {
+                "description": "Overrides for the focus colors",
+                "type": "object",
+                "properties": {
+                  "inner": {
+                    "description": "Overrides for the \"focus-inner\" color",
+                    "type": "object",
+                    "properties": {
+                      "light": {
+                        "description": "A hex color that overrides light mode"
+                      },
+                      "dark": {
+                        "description": "A hex color that overrides dark mode"
+                      }
+                    },
+                    "additionalProperties": false
+                  },
+                  "outer": {
+                    "description": "Overrides for the \"focus-outer\" color",
+                    "type": "object",
+                    "properties": {
+                      "light": {
+                        "description": "A hex color that overrides light mode"
+                      },
+                      "dark": {
+                        "description": "A hex color that overrides dark mode"
+                      }
+                    },
+                    "additionalProperties": false
+                  }
+                },
+                "additionalProperties": false
               }
             },
             "additionalProperties": false

package/dist/src/config.d.ts

@@ -43,6 +43,16 @@ declare const overridesSchema: z.ZodOptional<z.ZodObject<{
         light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
         dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
     }, z.core.$strip>>;
+    focus: z.ZodOptional<z.ZodObject<{
+        inner: z.ZodOptional<z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>;
+        outer: z.ZodOptional<z.ZodObject<{
+            light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>>;
 declare const themeSchema: z.ZodObject<{
     colors: z.ZodObject<{
@@ -86,6 +96,16 @@ declare const themeSchema: z.ZodObject<{
             light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
             dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
         }, z.core.$strip>>;
+        focus: z.ZodOptional<z.ZodObject<{
+            inner: z.ZodOptional<z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>;
+            outer: z.ZodOptional<z.ZodObject<{
+                light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
 export declare const commonConfig: z.ZodObject<{
@@ -138,6 +158,16 @@ export declare const configFileCreateSchema: z.ZodObject<{
                 light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
                 dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
             }, z.core.$strip>>;
+            focus: z.ZodOptional<z.ZodObject<{
+                inner: z.ZodOptional<z.ZodObject<{
+                    light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                    dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                }, z.core.$strip>>;
+                outer: z.ZodOptional<z.ZodObject<{
+                    light: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                    dark: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<`#${string}`, string>>>;
+                }, z.core.$strip>>;
+            }, z.core.$strip>>;
         }, z.core.$strip>>;
     }, z.core.$strip>>>;
     clean: z.ZodOptional<z.ZodBoolean>;

package/dist/src/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAuCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAoDnE,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAOR,CAAC;AAEd,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAuCxB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CAUH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAexE;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAuEnE,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAQR,CAAC;AAEd,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBmG,CAAC;AAErH,eAAO,MAAM,YAAY;;iBAEvB,CAAC;AAYH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAqD,CAAC;AACzF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/src/config.js

@@ -392,10 +392,21 @@ var linkVisitedOverrideSchema = z.object({
   light: colorSchema.optional().describe("A hex color that overrides light mode"),
   dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Overrides for the "link-visited" color');
+var focusOverrideSchema = z.object({
+  inner: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-inner" color'),
+  outer: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-outer" color')
+}).describe("Overrides for the focus colors");
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
   severity: severityColorOverrideSchema.optional(),
-  linkVisited: linkVisitedOverrideSchema.optional()
+  linkVisited: linkVisitedOverrideSchema.optional(),
+  focus: focusOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({

package/dist/src/index.js

@@ -1512,7 +1512,8 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
     colors.support
   );
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -1522,7 +1523,12 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     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,
@@ -1530,7 +1536,17 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };
@@ -1545,11 +1561,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -1905,6 +1921,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile
@@ -2040,10 +2066,21 @@ var linkVisitedOverrideSchema = z.object({
   light: colorSchema.optional().describe("A hex color that overrides light mode"),
   dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Overrides for the "link-visited" color');
+var focusOverrideSchema = z.object({
+  inner: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-inner" color'),
+  outer: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-outer" color')
+}).describe("Overrides for the focus colors");
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
   severity: severityColorOverrideSchema.optional(),
-  linkVisited: linkVisitedOverrideSchema.optional()
+  linkVisited: linkVisitedOverrideSchema.optional(),
+  focus: focusOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({
@@ -2408,7 +2445,7 @@ import * as R9 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -2472,7 +2509,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/scripts/createJsonSchema.js

@@ -331,10 +331,21 @@ var linkVisitedOverrideSchema = z.object({
   light: colorSchema.optional().describe("A hex color that overrides light mode"),
   dark: colorSchema.optional().describe("A hex color that overrides dark mode")
 }).describe('Overrides for the "link-visited" color');
+var focusOverrideSchema = z.object({
+  inner: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-inner" color'),
+  outer: z.object({
+    light: colorSchema.optional().describe("A hex color that overrides light mode"),
+    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+  }).optional().describe('Overrides for the "focus-outer" color')
+}).describe("Overrides for the focus colors");
 var overridesSchema = z.object({
   colors: semanticColorOverrideSchema.optional(),
   severity: severityColorOverrideSchema.optional(),
-  linkVisited: linkVisitedOverrideSchema.optional()
+  linkVisited: linkVisitedOverrideSchema.optional(),
+  focus: focusOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({

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

@@ -1773,7 +1773,8 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
     colors.support
   );
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -1783,7 +1784,12 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     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,
@@ -1791,7 +1797,17 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };
@@ -1806,11 +1822,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -2166,6 +2182,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile

package/dist/src/scripts/update-template.js

@@ -603,11 +603,11 @@ var color_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -1295,6 +1295,16 @@ var digdir_default = {
         $type: "color",
         $value: "{digdir.link.visited}"
       }
+    },
+    focus: {
+      "inner-color": {
+        $type: "color",
+        $value: "{digdir.focus.inner}"
+      },
+      "outer-color": {
+        $type: "color",
+        $value: "{digdir.focus.outer}"
+      }
     }
   },
   "font-family": {

package/dist/src/tokens/build.js

@@ -49,7 +49,7 @@ import pc4 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -113,7 +113,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/create/generators/$designsystemet.js

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -65,7 +65,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/create/generators/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAgB9D,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,EACd,YAAY,mBAAmB,KAC9B,QAqEF,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAgB9D,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,EACd,YAAY,mBAAmB,KAC9B,QAwFF,CAAC"}

package/dist/src/tokens/create/generators/color.js

@@ -379,7 +379,8 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
     colors.support
   );
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -389,7 +390,12 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
     baseColorsWithOverrides
   );
   const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme));
+  const defaultLinkVisited = linkColor[12];
   const linkOverride = overrides?.linkVisited?.[colorScheme] ? { $type: "color", $value: overrides.linkVisited[colorScheme] } : void 0;
+  const defaultFocusInner = neutralColorScale[0].hex;
+  const defaultFocusOuter = neutralColorScale[10].hex;
+  const focusInnerOverride = overrides?.focus?.inner?.[colorScheme];
+  const focusOuterOverride = overrides?.focus?.outer?.[colorScheme];
   return {
     [themeName]: {
       ...main,
@@ -397,7 +403,17 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };

package/dist/src/tokens/create/generators/semantic.js

@@ -261,11 +261,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },

package/dist/src/tokens/create/generators/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/theme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aA+CpF,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/theme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aAyDpF,CAAC"}

package/dist/src/tokens/create/generators/theme.js

@@ -403,6 +403,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile

package/dist/src/tokens/create/write.js

@@ -46,7 +46,7 @@ var readFile = async (path2, dry, allowFileNotFound) => {
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -110,7 +110,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/create.js

@@ -1374,7 +1374,8 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
     colors.support
   );
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -1384,7 +1385,12 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
     baseColorsWithOverrides
   );
   const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme));
+  const defaultLinkVisited = linkColor[12];
   const linkOverride = overrides?.linkVisited?.[colorScheme] ? { $type: "color", $value: overrides.linkVisited[colorScheme] } : void 0;
+  const defaultFocusInner = neutralColorScale[0].hex;
+  const defaultFocusOuter = neutralColorScale[10].hex;
+  const focusInnerOverride = overrides?.focus?.inner?.[colorScheme];
+  const focusOuterOverride = overrides?.focus?.outer?.[colorScheme];
   return {
     [themeName]: {
       ...main,
@@ -1392,7 +1398,17 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };
@@ -1407,11 +1423,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -1767,6 +1783,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile

package/dist/src/tokens/format.js

@@ -1707,7 +1707,8 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
     colors.support
   );
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -1717,7 +1718,12 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     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,
@@ -1725,7 +1731,17 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };
@@ -1740,11 +1756,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -2100,6 +2116,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile
@@ -2191,7 +2217,7 @@ import * as R8 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -2255,7 +2281,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/index.js

@@ -1374,7 +1374,8 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
     colors.support
   );
-  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
+  const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
+  const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
   const baseColorsWithOverrides = {
     ...baseColors,
     ...overrides?.severity
@@ -1384,7 +1385,12 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     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,
@@ -1392,7 +1398,17 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
       neutral,
       ...globalColors,
       link: {
-        visited: linkOverride || linkColor[12]
+        visited: linkOverride || defaultLinkVisited
+      },
+      focus: {
+        inner: {
+          $type: "color",
+          $value: focusInnerOverride || defaultFocusInner
+        },
+        outer: {
+          $type: "color",
+          $value: focusOuterOverride || defaultFocusOuter
+        }
       }
     }
   };
@@ -1407,11 +1423,11 @@ var color_base_template_default = {
     focus: {
       inner: {
         $type: "color",
-        $value: "{color.neutral.background-default}"
+        $value: "{color.focus.inner-color}"
       },
       outer: {
         $type: "color",
-        $value: "{color.neutral.text-default}"
+        $value: "{color.focus.outer-color}"
       }
     }
   },
@@ -1767,6 +1783,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
           $type: "color",
           $value: `{${themeName}.link.visited}`
         }
+      },
+      focus: {
+        "inner-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.inner}`
+        },
+        "outer-color": {
+          $type: "color",
+          $value: `{${themeName}.focus.outer}`
+        }
       }
     },
     ...remainingThemeFile
@@ -2207,7 +2233,7 @@ import * as R8 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -2271,7 +2297,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/process/output/declarations.js

@@ -4,7 +4,7 @@ import pc3 from "picocolors";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -68,7 +68,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/process/output/theme.js

@@ -5,7 +5,7 @@ import * as R2 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.8.0",
+  version: "1.9.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -69,7 +69,7 @@ var package_default = {
   dependencies: {
     "@commander-js/extra-typings": "^14.0.0",
     "@digdir/designsystemet-types": "workspace:^",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",

package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js

@@ -1,5 +1,5 @@
 // src/tokens/template/design-tokens/semantic/color.base.template.json
-var color_base_template_default = "../../../../../color.base.template-QGZJKXMN.json";
+var color_base_template_default = "../../../../../color.base.template-5XWYH2F5.json";
 export {
   color_base_template_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "engines": {
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@commander-js/extra-typings": "^14.0.0",
-    "@tokens-studio/sd-transforms": "2.0.2",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "apca-w3": "^0.1.9",
     "change-case": "^5.4.4",
     "chroma-js": "^3.2.0",
@@ -53,7 +53,7 @@
     "style-dictionary": "^5.1.1",
     "zod": "^4.1.13",
     "zod-validation-error": "^4.0.2",
-    "@digdir/designsystemet-types": "^1.8.0"
+    "@digdir/designsystemet-types": "^1.9.0"
   },
   "devDependencies": {
     "@tokens-studio/types": "0.5.2",