@digdir/designsystemet 0.0.0-deps-tsdown-20260421103939

package/dist/src/tokens/create/generators/primitives/typography.js

@@ -0,0 +1,216 @@
+//#region src/tokens/create/generators/primitives/typography.ts
+const generateTypography = (themeName, { fontFamily }) => ({ [themeName]: {
+	"font-family": {
+		$type: "fontFamilies",
+		$value: fontFamily
+	},
+	"font-weight": {
+		medium: {
+			$type: "fontWeights",
+			$value: "Medium"
+		},
+		semibold: {
+			$type: "fontWeights",
+			$value: "Semi bold"
+		},
+		regular: {
+			$type: "fontWeights",
+			$value: "Regular"
+		}
+	}
+} });
+const generateFontSizes = (size) => fontSizes[size];
+const lineHeights = {
+	sm: {
+		$type: "lineHeights",
+		$value: "130%"
+	},
+	md: {
+		$type: "lineHeights",
+		$value: "150%"
+	},
+	lg: {
+		$type: "lineHeights",
+		$value: "170%"
+	}
+};
+const letterSpacings = {
+	"1": {
+		$type: "letterSpacing",
+		$value: "-1%"
+	},
+	"2": {
+		$type: "letterSpacing",
+		$value: "-0.5%"
+	},
+	"3": {
+		$type: "letterSpacing",
+		$value: "-0.25%"
+	},
+	"4": {
+		$type: "letterSpacing",
+		$value: "-0.15%"
+	},
+	"5": {
+		$type: "letterSpacing",
+		$value: "0%"
+	},
+	"6": {
+		$type: "letterSpacing",
+		$value: "0.15%"
+	},
+	"7": {
+		$type: "letterSpacing",
+		$value: "0.25%"
+	},
+	"8": {
+		$type: "letterSpacing",
+		$value: "0.5%"
+	},
+	"9": {
+		$type: "letterSpacing",
+		$value: "1.5%"
+	}
+};
+const fontSizes = {
+	large: {
+		"line-height": lineHeights,
+		"font-size": {
+			"1": {
+				$type: "fontSizes",
+				$value: "13"
+			},
+			"2": {
+				$type: "fontSizes",
+				$value: "16"
+			},
+			"3": {
+				$type: "fontSizes",
+				$value: "18"
+			},
+			"4": {
+				$type: "fontSizes",
+				$value: "21"
+			},
+			"5": {
+				$type: "fontSizes",
+				$value: "24"
+			},
+			"6": {
+				$type: "fontSizes",
+				$value: "30"
+			},
+			"7": {
+				$type: "fontSizes",
+				$value: "36"
+			},
+			"8": {
+				$type: "fontSizes",
+				$value: "48"
+			},
+			"9": {
+				$type: "fontSizes",
+				$value: "60"
+			},
+			"10": {
+				$type: "fontSizes",
+				$value: "72"
+			}
+		},
+		"letter-spacing": letterSpacings
+	},
+	medium: {
+		"line-height": lineHeights,
+		"font-size": {
+			"1": {
+				$type: "fontSizes",
+				$value: "12"
+			},
+			"2": {
+				$type: "fontSizes",
+				$value: "14"
+			},
+			"3": {
+				$type: "fontSizes",
+				$value: "16"
+			},
+			"4": {
+				$type: "fontSizes",
+				$value: "18"
+			},
+			"5": {
+				$type: "fontSizes",
+				$value: "21"
+			},
+			"6": {
+				$type: "fontSizes",
+				$value: "24"
+			},
+			"7": {
+				$type: "fontSizes",
+				$value: "30"
+			},
+			"8": {
+				$type: "fontSizes",
+				$value: "36"
+			},
+			"9": {
+				$type: "fontSizes",
+				$value: "48"
+			},
+			"10": {
+				$type: "fontSizes",
+				$value: "60"
+			}
+		},
+		"letter-spacing": letterSpacings
+	},
+	small: {
+		"line-height": lineHeights,
+		"font-size": {
+			"1": {
+				$type: "fontSizes",
+				$value: "11"
+			},
+			"2": {
+				$type: "fontSizes",
+				$value: "13"
+			},
+			"3": {
+				$type: "fontSizes",
+				$value: "14"
+			},
+			"4": {
+				$type: "fontSizes",
+				$value: "16"
+			},
+			"5": {
+				$type: "fontSizes",
+				$value: "18"
+			},
+			"6": {
+				$type: "fontSizes",
+				$value: "21"
+			},
+			"7": {
+				$type: "fontSizes",
+				$value: "24"
+			},
+			"8": {
+				$type: "fontSizes",
+				$value: "30"
+			},
+			"9": {
+				$type: "fontSizes",
+				$value: "36"
+			},
+			"10": {
+				$type: "fontSizes",
+				$value: "48"
+			}
+		},
+		"letter-spacing": letterSpacings
+	}
+};
+//#endregion
+export { generateFontSizes, generateTypography };

package/dist/src/tokens/create/generators/semantic/color-modes.d.ts

@@ -0,0 +1,8 @@
+import type { Colors, TokenSet } from '../../../types.js';
+type SemanticModes = {
+    'main-color': Record<string, TokenSet>;
+    'support-color': Record<string, TokenSet>;
+};
+export declare const generateColorModes: (colors: Colors, _themeName: string) => SemanticModes;
+export {};
+//# sourceMappingURL=color-modes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-modes.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/color-modes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM,kBA4BpE,CAAC"}

package/dist/src/tokens/create/generators/semantic/color-modes.js

@@ -0,0 +1,26 @@
+import { semanticColorNames } from "../../../../colors/types.js";
+//#region src/tokens/create/generators/semantic/color-modes.ts
+const generateColorModes = (colors, _themeName) => {
+	const mainColorNames = Object.keys(colors.main);
+	const supportColorNames = Object.keys(colors.support);
+	const modes = {
+		"main-color": {},
+		"support-color": {}
+	};
+	const categories = [["main-color", mainColorNames], ["support-color", supportColorNames]];
+	for (const [colorCategory, colorNames] of categories) for (const colorName of colorNames) {
+		const customColorTokens = { color: { [colorCategory.replace("-color", "")]: generateColorScaleTokens(colorName) } };
+		modes[colorCategory][colorName] = customColorTokens;
+	}
+	return modes;
+};
+const generateColorScaleTokens = (colorName) => {
+	const colorScale = {};
+	for (const colorSemantic of semanticColorNames) colorScale[colorSemantic] = {
+		$type: "color",
+		$value: `{color.${colorName}.${colorSemantic}}`
+	};
+	return colorScale;
+};
+//#endregion
+export { generateColorModes };

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

@@ -0,0 +1,5 @@
+import type { Colors } from '../../../types.js';
+export declare const generateSemanticColors: (colors: Colors, _themeName: string) => {
+    color: any;
+};
+//# sourceMappingURL=color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAmB,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,sBAAsB,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM;;CAiBxE,CAAC"}

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

@@ -0,0 +1,46 @@
+import { baseColorNames } from "../../../../colors/colorMetadata.js";
+import { semanticColorMap } from "../../../../colors/types.js";
+import * as R from "ramda";
+//#region src/tokens/create/generators/semantic/color.ts
+const generateSemanticColors = (colors, _themeName) => {
+	const mainColorNames = Object.keys(colors.main);
+	const supportColorNames = Object.keys(colors.support);
+	const semanticColorTokens = [...[
+		...mainColorNames,
+		"neutral",
+		...supportColorNames
+	], ...baseColorNames].map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
+	return {
+		...baseColorTemplate,
+		color: {
+			...Object.fromEntries(semanticColorTokens),
+			...baseColorTemplate.color
+		}
+	};
+};
+const baseColorTemplate = {
+	color: { focus: {
+		inner: {
+			$type: "color",
+			$value: "{color.focus.inner-color}"
+		},
+		outer: {
+			$type: "color",
+			$value: "{color.focus.outer-color}"
+		}
+	} },
+	link: { color: { visited: {
+		$type: "color",
+		$value: "{color.link.visited}"
+	} } }
+};
+const generateColorScaleTokens = (colorName) => {
+	const colorScale = {};
+	for (const [colorSemantic, colorNumber] of R.toPairs(semanticColorMap)) colorScale[colorSemantic] = {
+		$type: "color",
+		$value: `{color.${colorName}.${colorNumber}}`
+	};
+	return colorScale;
+};
+//#endregion
+export { generateSemanticColors };

package/dist/src/tokens/create/generators/semantic/style.d.ts

@@ -0,0 +1,3 @@
+import type { TokenSet } from '../../../types.js';
+export declare function generateSemanticStyle(): TokenSet;
+//# sourceMappingURL=style.d.ts.map

package/dist/src/tokens/create/generators/semantic/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/semantic/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,qBAAqB,IAAI,QAAQ,CA2XhD"}

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

@@ -0,0 +1,381 @@
+//#region src/tokens/create/generators/semantic/style.ts
+function generateSemanticStyle() {
+	return {
+		typography: {
+			heading: {
+				"2xl": {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.10}",
+						letterSpacing: "{letter-spacing.1}"
+					}
+				},
+				xl: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.9}",
+						letterSpacing: "{letter-spacing.1}"
+					}
+				},
+				lg: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.8}",
+						letterSpacing: "{letter-spacing.2}"
+					}
+				},
+				md: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.7}",
+						letterSpacing: "{letter-spacing.3}"
+					}
+				},
+				sm: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.6}",
+						letterSpacing: "{letter-spacing.5}"
+					}
+				},
+				xs: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.5}",
+						letterSpacing: "{letter-spacing.6}"
+					}
+				},
+				"2xs": {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.medium}",
+						lineHeight: "{line-height.sm}",
+						fontSize: "{font-size.4}",
+						letterSpacing: "{letter-spacing.6}"
+					}
+				}
+			},
+			body: {
+				xl: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.regular}",
+						lineHeight: "{line-height.md}",
+						fontSize: "{font-size.6}",
+						letterSpacing: "{letter-spacing.8}"
+					}
+				},
+				lg: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.regular}",
+						lineHeight: "{line-height.md}",
+						fontSize: "{font-size.5}",
+						letterSpacing: "{letter-spacing.8}"
+					}
+				},
+				md: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.regular}",
+						lineHeight: "{line-height.md}",
+						fontSize: "{font-size.4}",
+						letterSpacing: "{letter-spacing.8}"
+					}
+				},
+				sm: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.regular}",
+						lineHeight: "{line-height.md}",
+						fontSize: "{font-size.3}",
+						letterSpacing: "{letter-spacing.7}"
+					}
+				},
+				xs: {
+					$type: "typography",
+					$value: {
+						fontFamily: "{font-family}",
+						fontWeight: "{font-weight.regular}",
+						lineHeight: "{line-height.md}",
+						fontSize: "{font-size.2}",
+						letterSpacing: "{letter-spacing.6}"
+					}
+				},
+				short: {
+					xl: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.sm}",
+							fontSize: "{font-size.6}",
+							letterSpacing: "{letter-spacing.8}"
+						}
+					},
+					lg: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.sm}",
+							fontSize: "{font-size.5}",
+							letterSpacing: "{letter-spacing.8}"
+						}
+					},
+					md: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.sm}",
+							fontSize: "{font-size.4}",
+							letterSpacing: "{letter-spacing.8}"
+						}
+					},
+					sm: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.sm}",
+							fontSize: "{font-size.3}",
+							letterSpacing: "{letter-spacing.7}"
+						}
+					},
+					xs: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.sm}",
+							fontSize: "{font-size.2}",
+							letterSpacing: "{letter-spacing.6}"
+						}
+					}
+				},
+				long: {
+					xl: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.lg}",
+							fontSize: "{font-size.6}",
+							letterSpacing: "{letter-spacing.8}"
+						}
+					},
+					lg: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.lg}",
+							fontSize: "{font-size.5}",
+							letterSpacing: "{letter-spacing.8}"
+						}
+					},
+					md: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.lg}",
+							fontSize: "{font-size.4}",
+							letterSpacing: "{letter-spacing.8}"
+						}
+					},
+					sm: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.lg}",
+							fontSize: "{font-size.3}",
+							letterSpacing: "{letter-spacing.7}"
+						}
+					},
+					xs: {
+						$type: "typography",
+						$value: {
+							fontFamily: "{font-family}",
+							fontWeight: "{font-weight.regular}",
+							lineHeight: "{line-height.lg}",
+							fontSize: "{font-size.2}",
+							letterSpacing: "{letter-spacing.6}"
+						}
+					}
+				}
+			}
+		},
+		opacity: { disabled: {
+			$type: "opacity",
+			$value: "{opacity.30}"
+		} },
+		"border-width": {
+			default: {
+				$type: "borderWidth",
+				$value: "{border-width.1}"
+			},
+			focus: {
+				$type: "borderWidth",
+				$value: "{border-width.3}"
+			}
+		},
+		shadow: {
+			xs: {
+				$type: "boxShadow",
+				$value: "{shadow.100}"
+			},
+			sm: {
+				$type: "boxShadow",
+				$value: "{shadow.200}"
+			},
+			md: {
+				$type: "boxShadow",
+				$value: "{shadow.300}"
+			},
+			lg: {
+				$type: "boxShadow",
+				$value: "{shadow.400}"
+			},
+			xl: {
+				$type: "boxShadow",
+				$value: "{shadow.500}"
+			}
+		},
+		"border-radius": {
+			sm: {
+				$type: "dimension",
+				$value: "{border-radius.1}"
+			},
+			md: {
+				$type: "dimension",
+				$value: "{border-radius.2}"
+			},
+			lg: {
+				$type: "dimension",
+				$value: "{border-radius.3}"
+			},
+			xl: {
+				$type: "dimension",
+				$value: "{border-radius.4}"
+			},
+			default: {
+				$type: "dimension",
+				$value: "{border-radius.5}"
+			},
+			full: {
+				$type: "dimension",
+				$value: "{border-radius.6}"
+			}
+		},
+		size: {
+			"0": {
+				$type: "dimension",
+				$value: "{_size.0}"
+			},
+			"1": {
+				$type: "dimension",
+				$value: "{_size.1}"
+			},
+			"2": {
+				$type: "dimension",
+				$value: "{_size.2}"
+			},
+			"3": {
+				$type: "dimension",
+				$value: "{_size.3}"
+			},
+			"4": {
+				$type: "dimension",
+				$value: "{_size.4}"
+			},
+			"5": {
+				$type: "dimension",
+				$value: "{_size.5}"
+			},
+			"6": {
+				$type: "dimension",
+				$value: "{_size.6}"
+			},
+			"7": {
+				$type: "dimension",
+				$value: "{_size.7}"
+			},
+			"8": {
+				$type: "dimension",
+				$value: "{_size.8}"
+			},
+			"9": {
+				$type: "dimension",
+				$value: "{_size.9}"
+			},
+			"10": {
+				$type: "dimension",
+				$value: "{_size.10}"
+			},
+			"11": {
+				$type: "dimension",
+				$value: "{_size.11}"
+			},
+			"12": {
+				$type: "dimension",
+				$value: "{_size.12}"
+			},
+			"13": {
+				$type: "dimension",
+				$value: "{_size.13}"
+			},
+			"14": {
+				$type: "dimension",
+				$value: "{_size.14}"
+			},
+			"15": {
+				$type: "dimension",
+				$value: "{_size.15}"
+			},
+			"18": {
+				$type: "dimension",
+				$value: "{_size.18}"
+			},
+			"22": {
+				$type: "dimension",
+				$value: "{_size.22}"
+			},
+			"26": {
+				$type: "dimension",
+				$value: "{_size.26}"
+			},
+			"30": {
+				$type: "dimension",
+				$value: "{_size.30}"
+			}
+		}
+	};
+}
+//#endregion
+export { generateSemanticStyle };

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

@@ -0,0 +1,3 @@
+import type { Colors, TokenSet } from '../../../types.js';
+export declare const generateTheme: (colors: Colors, themeName: string, borderRadius: number) => TokenSet;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/tokens/create/generators/themes/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAS,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEjE,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aAmDpF,CAAC"}