@digdir/designsystemet 1.13.2 → 1.14.0

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

@@ -1,396 +1,112 @@
-// src/tokens/create/generators/themes/theme.ts
-import * as R3 from "ramda";
-
-// src/colors/colorMetadata.ts
+import { baseColorNames } from "../../../../colors/colorMetadata.js";
+import { semanticColorMap } from "../../../../colors/types.js";
 import * as R from "ramda";
-var baseColors = {
-  info: "#0A71C0",
-  success: "#068718",
-  warning: "#EA9B1B",
-  danger: "#C01B1B"
+//#region src/tokens/create/generators/themes/theme.ts
+const 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, generateColorScaleTokens(colorName, themeName)]));
+	const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
+	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 = R.lensPath([
+		"border-radius",
+		"base",
+		"$value"
+	]);
+	const updatedThemeFile = R.set(baseBorderRadius, String(borderRadius), themeFile);
+	return JSON.parse(JSON.stringify(updatedThemeFile, (key, value) => {
+		if (key === "$value") return value.replace("<theme>", themeName);
+		return value;
+	}, 2));
 };
-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
-    }
-  },
-  "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
-    }
-  },
-  "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
-    }
-  },
-  "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."
-    },
-    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."
-    },
-    luminance: {
-      light: 0.7,
-      dark: 0.036,
-      contrast: 0.028
-    }
-  },
-  "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
-    }
-  },
-  "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
-    }
-  },
-  "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."
-    },
-    luminance: {
-      light: 0.19,
-      dark: 0.22,
-      contrast: 0.4
-    }
-  },
-  "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."
-    },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.6
-    }
-  },
-  "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."
-    },
-    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/colors/types.ts
-import * as R2 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 = R2.keys(semanticColorMap);
-var semanticColorNumbers = R2.values(semanticColorMap);
-
-// src/tokens/create/generators/themes/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, generateColorScaleTokens(colorName, themeName)])
-  );
-  const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
-  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 = R3.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R3.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;
-};
-var generateBase = (themeName) => ({
-  color: {},
-  "font-family": {
-    $type: "fontFamilies",
-    $value: `{${themeName}.font-family}`
-  },
-  "font-weight": {
-    medium: {
-      $type: "fontWeights",
-      $value: `{${themeName}.font-weight.medium}`
-    },
-    semibold: {
-      $type: "fontWeights",
-      $value: `{${themeName}.font-weight.semibold}`
-    },
-    regular: {
-      $type: "fontWeights",
-      $value: `{${themeName}.font-weight.regular}`
-    }
-  },
-  "border-radius": {
-    "1": {
-      $type: "dimension",
-      $value: "min({border-radius.base}*0.5,{border-radius.scale})"
-    },
-    "2": {
-      $type: "dimension",
-      $value: "min({border-radius.base},{border-radius.scale}*2)"
-    },
-    "3": {
-      $type: "dimension",
-      $value: "min({border-radius.base}*2,{border-radius.scale}*5)"
-    },
-    "4": {
-      $type: "dimension",
-      $value: "min({border-radius.base}*3,{border-radius.scale}*7)"
-    },
-    "5": {
-      $type: "dimension",
-      $value: "{border-radius.base}"
-    },
-    "6": {
-      $type: "dimension",
-      $value: "9999"
-    },
-    base: {
-      $type: "dimension",
-      $value: "4"
-    },
-    scale: {
-      $type: "dimension",
-      $value: "4"
-    }
-  }
+const generateBase = (themeName) => ({
+	color: {},
+	"font-family": {
+		$type: "fontFamilies",
+		$value: `{${themeName}.font-family}`
+	},
+	"font-weight": {
+		medium: {
+			$type: "fontWeights",
+			$value: `{${themeName}.font-weight.medium}`
+		},
+		semibold: {
+			$type: "fontWeights",
+			$value: `{${themeName}.font-weight.semibold}`
+		},
+		regular: {
+			$type: "fontWeights",
+			$value: `{${themeName}.font-weight.regular}`
+		}
+	},
+	"border-radius": {
+		"1": {
+			$type: "dimension",
+			$value: "min({border-radius.base}*0.5,{border-radius.scale})"
+		},
+		"2": {
+			$type: "dimension",
+			$value: "min({border-radius.base},{border-radius.scale}*2)"
+		},
+		"3": {
+			$type: "dimension",
+			$value: "min({border-radius.base}*2,{border-radius.scale}*5)"
+		},
+		"4": {
+			$type: "dimension",
+			$value: "min({border-radius.base}*3,{border-radius.scale}*7)"
+		},
+		"5": {
+			$type: "dimension",
+			$value: "{border-radius.base}"
+		},
+		"6": {
+			$type: "dimension",
+			$value: "9999"
+		},
+		base: {
+			$type: "dimension",
+			$value: "4"
+		},
+		scale: {
+			$type: "dimension",
+			$value: "4"
+		}
+	}
 });
-var generateColorScaleTokens = (colorName, themeName) => {
-  const colorScale = {};
-  for (const [_, colorNumber] of R3.toPairs(semanticColorMap)) {
-    colorScale[colorNumber] = {
-      $type: "color",
-      $value: `{${themeName}.${colorName}.${colorNumber}}`
-    };
-  }
-  return colorScale;
-};
-export {
-  generateTheme
+const generateColorScaleTokens = (colorName, themeName) => {
+	const colorScale = {};
+	for (const [_, colorNumber] of R.toPairs(semanticColorMap)) colorScale[colorNumber] = {
+		$type: "color",
+		$value: `{${themeName}.${colorName}.${colorNumber}}`
+	};
+	return colorScale;
 };
+//#endregion
+export { generateTheme };

package/dist/src/tokens/create.d.ts

@@ -1,4 +1,5 @@
-import type { Theme, TokenSets } from './types.js';
+import type { Theme, TokenSetDimensions, TokenSets } from './types.js';
+export declare const tokenSetDimensions: TokenSetDimensions;
 export declare const cliOptions: {
     readonly outDir: "out-dir";
     readonly clean: "clean";

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

@@ -1 +1 @@
-{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAa,KAAK,EAAY,SAAS,EAAE,MAAM,YAAY,CAAC;AAExE,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,YAAY,GAAU,OAAO,KAAK;;EA4B9C,CAAC"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,KAAK,EAAY,kBAAkB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEjF,eAAO,MAAM,kBAAkB,EAAE,kBAGhC,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,YAAY,GAAU,OAAO,KAAK;;EA2B9C,CAAC"}