@digdir/designsystemet 1.13.2 → 1.14.0

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

@@ -1,332 +1,159 @@
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
-var BoxShadowTypes;
-(function(BoxShadowTypes2) {
-  BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
-  BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
-})(BoxShadowTypes || (BoxShadowTypes = {}));
-
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
-var ColorModifierTypes;
-(function(ColorModifierTypes2) {
-  ColorModifierTypes2["LIGHTEN"] = "lighten";
-  ColorModifierTypes2["DARKEN"] = "darken";
-  ColorModifierTypes2["MIX"] = "mix";
-  ColorModifierTypes2["ALPHA"] = "alpha";
-})(ColorModifierTypes || (ColorModifierTypes = {}));
-
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
-var ColorSpaceTypes;
-(function(ColorSpaceTypes2) {
-  ColorSpaceTypes2["LCH"] = "lch";
-  ColorSpaceTypes2["SRGB"] = "srgb";
-  ColorSpaceTypes2["P3"] = "p3";
-  ColorSpaceTypes2["HSL"] = "hsl";
-})(ColorSpaceTypes || (ColorSpaceTypes = {}));
-
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
-var Properties;
-(function(Properties2) {
-  Properties2["sizing"] = "sizing";
-  Properties2["height"] = "height";
-  Properties2["width"] = "width";
-  Properties2["spacing"] = "spacing";
-  Properties2["verticalPadding"] = "verticalPadding";
-  Properties2["horizontalPadding"] = "horizontalPadding";
-  Properties2["paddingTop"] = "paddingTop";
-  Properties2["paddingRight"] = "paddingRight";
-  Properties2["paddingBottom"] = "paddingBottom";
-  Properties2["paddingLeft"] = "paddingLeft";
-  Properties2["itemSpacing"] = "itemSpacing";
-  Properties2["fill"] = "fill";
-  Properties2["backgroundBlur"] = "backgroundBlur";
-  Properties2["border"] = "border";
-  Properties2["borderTop"] = "borderTop";
-  Properties2["borderRight"] = "borderRight";
-  Properties2["borderBottom"] = "borderBottom";
-  Properties2["borderLeft"] = "borderLeft";
-  Properties2["borderColor"] = "borderColor";
-  Properties2["borderRadius"] = "borderRadius";
-  Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
-  Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
-  Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
-  Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
-  Properties2["borderWidth"] = "borderWidth";
-  Properties2["borderWidthTop"] = "borderWidthTop";
-  Properties2["borderWidthRight"] = "borderWidthRight";
-  Properties2["borderWidthBottom"] = "borderWidthBottom";
-  Properties2["borderWidthLeft"] = "borderWidthLeft";
-  Properties2["boxShadow"] = "boxShadow";
-  Properties2["opacity"] = "opacity";
-  Properties2["fontFamilies"] = "fontFamilies";
-  Properties2["fontWeights"] = "fontWeights";
-  Properties2["fontSizes"] = "fontSizes";
-  Properties2["lineHeights"] = "lineHeights";
-  Properties2["typography"] = "typography";
-  Properties2["composition"] = "composition";
-  Properties2["letterSpacing"] = "letterSpacing";
-  Properties2["paragraphSpacing"] = "paragraphSpacing";
-  Properties2["textCase"] = "textCase";
-  Properties2["dimension"] = "dimension";
-  Properties2["textDecoration"] = "textDecoration";
-  Properties2["asset"] = "asset";
-  Properties2["tokenValue"] = "tokenValue";
-  Properties2["value"] = "value";
-  Properties2["tokenName"] = "tokenName";
-  Properties2["description"] = "description";
-})(Properties || (Properties = {}));
-
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
-var TokenSetStatus;
-(function(TokenSetStatus2) {
-  TokenSetStatus2["DISABLED"] = "disabled";
-  TokenSetStatus2["SOURCE"] = "source";
-  TokenSetStatus2["ENABLED"] = "enabled";
-})(TokenSetStatus || (TokenSetStatus = {}));
+import { TokenSetStatus } from "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js";
+import "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js";
+//#region src/tokens/create/generators/$themes.ts
+const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+async function createHash(text, algo = "SHA-1") {
+	const crypto = globalThis.crypto;
+	return Array.from(new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))), (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+/**
 
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
-var TokenTypes;
-(function(TokenTypes2) {
-  TokenTypes2["OTHER"] = "other";
-  TokenTypes2["COLOR"] = "color";
-  TokenTypes2["BORDER_RADIUS"] = "borderRadius";
-  TokenTypes2["SIZING"] = "sizing";
-  TokenTypes2["SPACING"] = "spacing";
-  TokenTypes2["TEXT"] = "text";
-  TokenTypes2["TYPOGRAPHY"] = "typography";
-  TokenTypes2["OPACITY"] = "opacity";
-  TokenTypes2["BORDER_WIDTH"] = "borderWidth";
-  TokenTypes2["STROKE_STYLE"] = "strokeStyle";
-  TokenTypes2["BOX_SHADOW"] = "boxShadow";
-  TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
-  TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
-  TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
-  TokenTypes2["FONT_SIZES"] = "fontSizes";
-  TokenTypes2["LETTER_SPACING"] = "letterSpacing";
-  TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
-  TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
-  TokenTypes2["TEXT_DECORATION"] = "textDecoration";
-  TokenTypes2["TEXT_CASE"] = "textCase";
-  TokenTypes2["COMPOSITION"] = "composition";
-  TokenTypes2["DIMENSION"] = "dimension";
-  TokenTypes2["BORDER"] = "border";
-  TokenTypes2["ASSET"] = "asset";
-  TokenTypes2["BOOLEAN"] = "boolean";
-  TokenTypes2["NUMBER"] = "number";
-})(TokenTypes || (TokenTypes = {}));
+* Generates the `$themes.json` file which is used by Token Studio to update Figma variable collections and modes.
 
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
-var BorderValues;
-(function(BorderValues2) {
-  BorderValues2["BORDER_COLOR"] = "color";
-  BorderValues2["BORDER_WIDTH"] = "width";
-  BorderValues2["BORDER_STYLE"] = "style";
-})(BorderValues || (BorderValues = {}));
+* **IMPORTANT:**
 
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
-var StrokeStyleValues;
-(function(StrokeStyleValues2) {
-  StrokeStyleValues2["SOLID"] = "solid";
-  StrokeStyleValues2["DASHED"] = "dashed";
-  StrokeStyleValues2["DOTTED"] = "dotted";
-  StrokeStyleValues2["DOUBLE"] = "double";
-  StrokeStyleValues2["GROOVE"] = "groove";
-  StrokeStyleValues2["RIDGE"] = "ridge";
-  StrokeStyleValues2["OUTSET"] = "outset";
-  StrokeStyleValues2["INSET"] = "inset";
-})(StrokeStyleValues || (StrokeStyleValues = {}));
+* We use existing Figma variable ids to update existing collections/modes fetched from our published Figma community file.
 
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
-var BoxShadowValues;
-(function(BoxShadowValues2) {
-  BoxShadowValues2["TYPE"] = "type";
-  BoxShadowValues2["COLOR"] = "color";
-  BoxShadowValues2["X"] = "x";
-  BoxShadowValues2["Y"] = "y";
-  BoxShadowValues2["BLUR"] = "blur";
-  BoxShadowValues2["SPREAD"] = "spread";
-  BoxShadowValues2["BLEND_MODE"] = "blendMode";
-})(BoxShadowValues || (BoxShadowValues = {}));
+* These are important for maintaining existing variables in user files when updating tokens.
 
-// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
-var TypographyValues;
-(function(TypographyValues2) {
-  TypographyValues2["FONT_FAMILY"] = "fontFamily";
-  TypographyValues2["FONT_WEIGHT"] = "fontWeight";
-  TypographyValues2["LINE_HEIGHT"] = "lineHeight";
-  TypographyValues2["FONT_SIZE"] = "fontSize";
-  TypographyValues2["LETTER_SPACING"] = "letterSpacing";
-  TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
-  TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
-  TypographyValues2["TEXT_DECORATION"] = "textDecoration";
-  TypographyValues2["TEXT_CASE"] = "textCase";
-})(TypographyValues || (TypographyValues = {}));
+* Omitting these ids results will result in the following bugs:
+- New collections/modes being created which may cause ghost variables in Figma.
+- New collections/modes may cause users hitting the cap on Figma variable modes which is at time of writing 4 (or unlimited for enterprise).
 
-// src/tokens/create/generators/$themes.ts
-var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-async function createHash(text, algo = "SHA-1") {
-  const crypto = globalThis.crypto;
-  return Array.from(
-    new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
-    (byte) => byte.toString(16).padStart(2, "0")
-  ).join("");
-}
-async function generate$Themes(colorSchemes, themes, colors, sizeModes) {
-  return [
-    ...generateSizeGroup(sizeModes),
-    ...await generateThemesGroup(themes),
-    ...generateTypographyGroup(themes),
-    ...generateColorSchemesGroup(colorSchemes, themes),
-    generateSemanticGroup(),
-    ...await generateColorGroup("main", colors),
-    ...await generateColorGroup("support", colors)
-  ];
+*/
+async function generate$Themes(tokenSetDimensions, themeNames, colors) {
+	const { colorSchemes, sizeModes } = tokenSetDimensions;
+	return [
+		...generateSizeGroup(sizeModes),
+		...await generateThemesGroup(themeNames),
+		...generateTypographyGroup(themeNames),
+		...generateColorSchemesGroup(colorSchemes, themeNames),
+		generateSemanticGroup(),
+		...await generateColorGroup("main", colors.main),
+		...await generateColorGroup("support", colors.support)
+	];
 }
 function generateSizeGroup(_sizes) {
-  return [
-    {
-      id: "8b2c8cc86611a34b135cb22948666779361fd729",
-      name: "medium",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/medium": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:1",
-      group: "Size"
-    },
-    {
-      id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
-      name: "large",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/large": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:2",
-      group: "Size"
-    },
-    {
-      id: "fb11567729c298ca37c9da4e3a27716a23480824",
-      name: "small",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/small": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:3",
-      group: "Size"
-    }
-  ];
+	return [
+		{
+			id: "8b2c8cc86611a34b135cb22948666779361fd729",
+			name: "medium",
+			$figmaStyleReferences: {},
+			selectedTokenSets: {
+				"primitives/modes/size/medium": TokenSetStatus.SOURCE,
+				"primitives/modes/size/global": TokenSetStatus.ENABLED,
+				"primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
+			},
+			$figmaCollectionId: "VariableCollectionId:36248:20757",
+			$figmaModeId: "41630:1",
+			group: "Size"
+		},
+		{
+			id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
+			name: "large",
+			$figmaStyleReferences: {},
+			selectedTokenSets: {
+				"primitives/modes/size/large": TokenSetStatus.SOURCE,
+				"primitives/modes/size/global": TokenSetStatus.ENABLED,
+				"primitives/modes/typography/size/large": TokenSetStatus.ENABLED
+			},
+			$figmaCollectionId: "VariableCollectionId:36248:20757",
+			$figmaModeId: "41630:2",
+			group: "Size"
+		},
+		{
+			id: "fb11567729c298ca37c9da4e3a27716a23480824",
+			name: "small",
+			$figmaStyleReferences: {},
+			selectedTokenSets: {
+				"primitives/modes/size/small": TokenSetStatus.SOURCE,
+				"primitives/modes/size/global": TokenSetStatus.ENABLED,
+				"primitives/modes/typography/size/small": TokenSetStatus.ENABLED
+			},
+			$figmaCollectionId: "VariableCollectionId:36248:20757",
+			$figmaModeId: "41630:3",
+			group: "Size"
+		}
+	];
 }
-var colorSchemeDefaults = {
-  light: {
-    name: "Light",
-    selectedTokenSets: {},
-    id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:0"
-  },
-  dark: {
-    name: "Dark",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:1"
-  },
-  contrast: {
-    name: "Contrast",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:2"
-  }
+const colorSchemeDefaults = {
+	light: {
+		name: "Light",
+		selectedTokenSets: {},
+		id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
+		$figmaCollectionId: "VariableCollectionId:34811:5472",
+		$figmaModeId: "34811:0"
+	},
+	dark: {
+		name: "Dark",
+		selectedTokenSets: {},
+		id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
+		$figmaCollectionId: "VariableCollectionId:34811:5472",
+		$figmaModeId: "34811:1"
+	},
+	contrast: {
+		name: "Contrast",
+		selectedTokenSets: {},
+		id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
+		$figmaCollectionId: "VariableCollectionId:34811:5472",
+		$figmaModeId: "34811:2"
+	}
 };
 function generateColorSchemesGroup(colorSchemes, themes) {
-  return colorSchemes.map(
-    (scheme) => ({
-      ...colorSchemeDefaults[scheme],
-      selectedTokenSets: Object.fromEntries([
-        ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
-      ]),
-      group: "Color scheme"
-    })
-  );
+	return colorSchemes.map((scheme) => ({
+		...colorSchemeDefaults[scheme],
+		selectedTokenSets: Object.fromEntries([...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])]),
+		group: "Color scheme"
+	}));
 }
 async function generateThemesGroup(themes) {
-  return Promise.all(
-    themes.map(
-      async (theme, index) => ({
-        id: await createHash(theme),
-        $figmaCollectionId: "VariableCollectionId:36528:61712",
-        $figmaModeId: `40960:${index + 6}`,
-        // Start on 6 in Token Studio and Community file for some reason
-        name: theme,
-        selectedTokenSets: {
-          [`themes/${theme}`]: TokenSetStatus.ENABLED
-        },
-        group: "Theme"
-      })
-    )
-  );
+	return Promise.all(themes.map(async (theme, index) => ({
+		id: await createHash(theme),
+		$figmaCollectionId: "VariableCollectionId:36528:61712",
+		$figmaModeId: `40960:${index + 6}`,
+		name: theme,
+		selectedTokenSets: { [`themes/${theme}`]: TokenSetStatus.ENABLED },
+		group: "Theme"
+	})));
 }
 function generateSemanticGroup() {
-  return {
-    id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
-    name: "Semantic",
-    selectedTokenSets: {
-      "semantic/style": TokenSetStatus.ENABLED,
-      "semantic/color": TokenSetStatus.ENABLED,
-      "primitives/globals": TokenSetStatus.SOURCE
-    },
-    $figmaCollectionId: "VariableCollectionId:34811:5976",
-    $figmaModeId: "34811:5",
-    group: "Semantic"
-  };
+	return {
+		id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
+		name: "Semantic",
+		selectedTokenSets: {
+			"semantic/style": TokenSetStatus.ENABLED,
+			"semantic/color": TokenSetStatus.ENABLED,
+			"primitives/globals": TokenSetStatus.SOURCE
+		},
+		$figmaCollectionId: "VariableCollectionId:34811:5976",
+		$figmaModeId: "34811:5",
+		group: "Semantic"
+	};
 }
 async function generateColorGroup(group, colors) {
-  return Promise.all(
-    Object.entries(colors[group]).map(
-      async ([color]) => ({
-        id: await createHash(`${group}-${color}`),
-        name: color,
-        selectedTokenSets: {
-          [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
-        },
-        group: `${capitalize(group)} color`
-      })
-    )
-  );
+	return Promise.all(colors.map(async (color) => ({
+		id: await createHash(`${group}-${color}`),
+		name: color,
+		selectedTokenSets: { [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED },
+		group: `${capitalize(group)} color`
+	})));
 }
 function generateTypographyGroup(themes) {
-  return [
-    {
-      id: "368d753fcac4455f289500eaa42e70dc0a03522f",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:2",
-      name: "Primary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    },
-    {
-      id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:3",
-      name: "Secondary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    }
-  ];
+	return [{
+		id: "368d753fcac4455f289500eaa42e70dc0a03522f",
+		$figmaCollectionId: "VariableCollectionId:36248:20769",
+		$figmaModeId: "36248:2",
+		name: "Primary",
+		selectedTokenSets: Object.fromEntries(themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])),
+		group: "Typography"
+	}, {
+		id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
+		$figmaCollectionId: "VariableCollectionId:36248:20769",
+		$figmaModeId: "36248:3",
+		name: "Secondary",
+		selectedTokenSets: Object.fromEntries(themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])),
+		group: "Typography"
+	}];
 }
-export {
-  generate$Themes
-};
+//#endregion
+export { generate$Themes };