@uni-design-system/uni-core 5.0.0 → 5.2.0

package/dist/cjs/index.cjs

@@ -762,6 +762,65 @@ var Z_INDEX = {
 	overlay: 1080
 };
 //#endregion
+//#region src/concepts/generation/dtcg.emitter.ts
+var dimensionEntries = (record) => Object.fromEntries(Object.entries(record ?? {}).filter(([, value]) => value !== void 0 && value !== "none").map(([key, value]) => [key, {
+	$value: String(value),
+	$type: "dimension"
+}]));
+/**
+* Render one theme mode's tokens as W3C DTCG JSON for external pipelines
+* (Style Dictionary etc.). Token names are exactly Uni's `ColorToken` strings —
+* one vocabulary everywhere. The native `UniTheme` object remains the primary,
+* lossless output; this is the interop layer.
+*/
+var emitDtcgTokens = (input) => ({
+	color: Object.fromEntries(Object.entries(input.colors).filter(([, value]) => value !== void 0).map(([key, value]) => [key, {
+		$value: value,
+		$type: "color"
+	}])),
+	size: {
+		radius: dimensionEntries(input.radii),
+		spacing: dimensionEntries(input.spacing)
+	}
+});
+//#endregion
+//#region src/concepts/generation/shadow.generator.ts
+var rgba = (hex, alpha) => {
+	const { red, green, blue } = hexToRgb(hex);
+	return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+/**
+* Brand-tinted, theme-scoped elevation shadows (PRD §3.5.C).
+*
+* Light mode replaces the dead-neutral black stacks with a shadow ink pulled
+* toward the brand hue — dark and low-chroma enough to read as shadow, tinted
+* enough to kill the grey "mud" where shadows meet brand surfaces. Dark mode
+* goes near-zero: elevation is carried by the surface lightness steps, with
+* only a faint veil kept on floating overlays (menus/dialogs genuinely need
+* separation) and the `warn` glow tinted by the theme's own error color.
+*/
+var generateShadows = (colors, mode = "light") => {
+	const error = colors["error"] ?? "#CC2827";
+	if (mode === "dark") return {
+		raised: "none",
+		menu: `0px 4px 12px ${rgba("#000000", .45)}`,
+		dialog: `0px 8px 28px ${rgba("#000000", .55)}`,
+		warn: `0 0 5px ${rgba(error, .55)}, inset 0 0 5px ${rgba(error, .35)}`
+	};
+	const { h } = hexToOklch(colors["primary"] ?? "#000000");
+	const ink = oklchToHex({
+		l: .22,
+		c: .035,
+		h
+	});
+	return {
+		raised: `${rgba(ink, .2)} 0px 2px 1px -1px, ${rgba(ink, .14)} 0px 1px 1px 0px, ${rgba(ink, .12)} 0px 1px 3px 0px`,
+		menu: `${rgba(ink, .2)} 0px 3px 3px -2px, ${rgba(ink, .14)} 0px 3px 4px 0px, ${rgba(ink, .12)} 0px 1px 8px 0px`,
+		dialog: `${rgba(ink, .2)} 0px 3px 5px -1px, ${rgba(ink, .14)} 0px 6px 10px 0px, ${rgba(ink, .12)} 0px 1px 18px 0px`,
+		warn: `0 0 5px ${rgba(error, .5)}, inset 0 0 5px ${rgba(error, .3)}`
+	};
+};
+//#endregion
 //#region src/concepts/theme/themes/base.theme.ts
 var BaseTypography = {
 	"display-large": {
@@ -959,6 +1018,90 @@ var buildComponents = (c) => ({
 		transitionSpeed: .35,
 		elevation: "md"
 	} },
+	breadcrumb: { options: {
+		typeface: "label",
+		color: "on-background-variant",
+		currentColor: "on-background",
+		separatorSymbol: "chevron_right",
+		gap: "xs"
+	} },
+	appBar: { options: {
+		color: "surface",
+		height: 56,
+		divider: "light",
+		typeface: "title-large",
+		padding: "md",
+		gap: "md",
+		elevation: void 0
+	} },
+	drawer: { options: {
+		color: "surface",
+		width: 280,
+		divider: "light",
+		elevation: "menu",
+		padding: "md",
+		backdrop: { background: "rgba(0, 0, 0, 0.4)" }
+	} },
+	avatar: {
+		options: {
+			borderRadius: "max",
+			typeface: "subtitle-2",
+			fallbackSymbol: "person"
+		},
+		variants: {
+			primary: {
+				backgroundColor: c["primary-container"],
+				color: c["on-primary-container"]
+			},
+			secondary: {
+				backgroundColor: c["secondary-container"],
+				color: c["on-secondary-container"]
+			},
+			tertiary: {
+				backgroundColor: c["tertiary-container"],
+				color: c["on-tertiary-container"]
+			},
+			quaternary: {
+				backgroundColor: c["surface-variant"],
+				color: c["on-surface-variant"]
+			},
+			warn: {
+				backgroundColor: c["warn-container"],
+				color: c["on-warn-container"]
+			},
+			success: {
+				backgroundColor: c["success-container"],
+				color: c["on-success-container"]
+			}
+		},
+		sizes: {
+			sm: {
+				height: 24,
+				width: 24,
+				fontSize: 10
+			},
+			md: {
+				height: 32,
+				width: 32,
+				fontSize: 13
+			},
+			lg: {
+				height: 40,
+				width: 40,
+				fontSize: 16
+			},
+			xl: {
+				height: 56,
+				width: 56,
+				fontSize: 22
+			}
+		}
+	},
+	avatarGroup: { options: {
+		overlap: "sm",
+		ringColor: "surface",
+		ringWidth: 2
+	} },
 	checkbox: { options: { size: 20 } },
 	dialog: { options: {
 		borderRadius: "lg",
@@ -1007,6 +1150,22 @@ var buildComponents = (c) => ({
 		focusOutline: `2px solid ${c.primary}`,
 		focusOutlineOffset: 2
 	} },
+	textarea: { options: {
+		rows: 3,
+		resize: "vertical"
+	} },
+	tabs: { options: {
+		typeface: "title-small",
+		textColor: "on-surface-variant",
+		activeTextColor: "primary",
+		indicatorColor: "primary",
+		indicatorThickness: "standard",
+		divider: "light",
+		gap: "sm",
+		borderRadius: "none",
+		padding: "md",
+		activeColor: void 0
+	} },
 	multiSelectDropdown: { options: {
 		textRole: "input",
 		textColor: "on-primary-surface",
@@ -1018,13 +1177,16 @@ var buildComponents = (c) => ({
 	} },
 	badge: { options: { borderRadius: "xxs" } },
 	button: {
+		options: {
+			borderRadius: "max",
+			typeface: "button"
+		},
 		fixed: {
 			position: "relative",
 			overflow: "hidden",
 			outline: "0",
 			border: "0",
 			cursor: "pointer",
-			fontFamily: "Euphemia, sans-serif",
 			transition: "all 0.28s ease"
 		},
 		variants: {
@@ -1075,33 +1237,29 @@ var buildComponents = (c) => ({
 		sizes: {
 			sm: {
 				height: 22,
-				borderRadius: 11,
 				fontSize: 12,
 				padding: "0 12px",
-				fontFamily: "Euphemia Bold, sans-serif",
 				fontWeight: 600
 			},
 			md: {
 				height: 26,
-				borderRadius: 13,
 				fontSize: 16,
 				padding: "0 16px"
 			},
 			lg: {
 				height: 36,
-				borderRadius: 18,
 				fontSize: 18,
 				padding: "0 18px"
 			},
 			xl: {
 				height: 48,
-				borderRadius: 24,
 				fontSize: 24,
 				padding: "0 22px"
 			}
 		}
 	},
 	iconButton: {
+		options: { borderRadius: "max" },
 		variants: {
 			ghost: {
 				backgroundColor: "transparent",
@@ -1167,23 +1325,23 @@ var buildComponents = (c) => ({
 		fixed: { textFill: c["on-background"] },
 		variants: {
 			primary: {
-				backgroundColor: "#b3d4ea",
+				backgroundColor: c["primary-container"],
 				color: c.primary
 			},
 			secondary: {
-				backgroundColor: "#b3e7c2",
+				backgroundColor: c["secondary-container"],
 				color: c.secondary
 			},
 			tertiary: {
-				backgroundColor: "#ffe2b3",
+				backgroundColor: c["tertiary-container"],
 				color: c.tertiary
 			},
 			warn: {
-				backgroundColor: "#ffc2b3",
+				backgroundColor: c["warn-container"],
 				color: c.warn
 			},
 			success: {
-				backgroundColor: "#b3e7c2",
+				backgroundColor: c["success-container"],
 				color: c.success
 			}
 		},
@@ -1195,33 +1353,10 @@ var buildComponents = (c) => ({
 		}
 	},
 	card: {
+		options: { borderRadius: "xs" },
 		fixed: {
-			borderStyle: "solid",
-			borderWidth: "1px",
-			borderRadius: "8px",
-			overflow: "hidden"
-		},
-		variants: {
-			primary: {
-				borderColor: c.primary,
-				backgroundColor: c.background
-			},
-			secondary: {
-				borderColor: c.secondary,
-				backgroundColor: c.background
-			},
-			tertiary: {
-				borderColor: c.tertiary,
-				backgroundColor: c.background
-			},
-			warn: {
-				borderColor: c.warn,
-				backgroundColor: c.background
-			},
-			success: {
-				borderColor: c.success,
-				backgroundColor: c.background
-			}
+			overflow: "hidden",
+			backgroundColor: c.background
 		}
 	},
 	cardHeader: {
@@ -1292,6 +1427,21 @@ var buildComponents = (c) => ({
 		currentPageBorder: "light",
 		currentPageBorderRadius: "xs"
 	} },
+	slider: { options: {
+		color: "primary",
+		trackColor: "surface-variant",
+		borderRadius: "max",
+		trackHeight: 4,
+		thumbSize: 16
+	} },
+	skeleton: { options: {
+		color: "surface-variant",
+		highlightColor: "surface",
+		borderRadius: "xs",
+		animation: "shimmer",
+		duration: 1.4,
+		gap: "sm"
+	} },
 	snackbar: { options: {
 		bottomPosition: 40,
 		transitionDelay: "0.35s",
@@ -1337,12 +1487,17 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 * one-call path a theme builder uses to turn a brand color (or a seed +
 * scheme + category) into a complete, ready-to-apply theme.
 */
-var createThemeFromPalette = (config) => createTheme({
-	id: config.id ?? "CustomTheme",
-	name: config.name ?? "Custom Theme",
-	colors: generatePalette(config),
-	icons: config.icons
-});
+var createThemeFromPalette = (config) => {
+	const colors = generatePalette(config);
+	return createTheme({
+		id: config.id ?? "CustomTheme",
+		name: config.name ?? "Custom Theme",
+		colors,
+		radii: config.radii,
+		shadows: generateShadows(colors, config.mode ?? "light"),
+		icons: config.icons
+	});
+};
 /**
 * Seed for the shipped Light/Dark themes. Swap these three values (or call
 * `generatePalette` with your own) to reskin the entire system — every color
@@ -1465,6 +1620,8 @@ var generateThemes = (input) => {
 		lightColors,
 		darkColors,
 		radii: input.shape ? ShapeRadii[input.shape] : void 0,
+		lightShadows: generateShadows(lightColors, "light"),
+		darkShadows: generateShadows(darkColors, "dark"),
 		report: {
 			checks,
 			worstRatio,
@@ -1477,7 +1634,7 @@ var generateThemes = (input) => {
 * returning a registration-ready light/dark {@link UniTheme} pair.
 */
 var generateUniThemes = (input) => {
-	const { lightColors, darkColors, radii } = generateThemes(input);
+	const { lightColors, darkColors, radii, lightShadows, darkShadows } = generateThemes(input);
 	const name = input.name ?? "Brand";
 	const id = name.replace(/\W+/g, "") || "Brand";
 	return {
@@ -1485,13 +1642,15 @@ var generateUniThemes = (input) => {
 			id: `${id}Light`,
 			name: `${name} Light`,
 			colors: lightColors,
-			radii
+			radii,
+			shadows: lightShadows
 		}),
 		dark: createTheme({
 			id: `${id}Dark`,
 			name: `${name} Dark`,
 			colors: darkColors,
-			radii
+			radii,
+			shadows: darkShadows
 		})
 	};
 };
@@ -1508,24 +1667,25 @@ var bordersLiteral = () => [
 	" * shared token picks up the change.",
 	" */",
 	"const borders = (colors: Colors): Borders => ({",
-	"  primary: `1px solid ${colors.primary}`,",
-	"  secondary: `1px solid ${colors.secondary}`,",
-	"  tertiary: `1px solid ${colors.tertiary}`,",
-	"  quaternary: `1px solid ${colors.quaternary}`,",
-	"  warn: `1px solid ${colors.warn}`,",
-	"  success: `1px solid ${colors.success}`,",
-	"  light: `1px solid ${colors.outline}`,",
+	"  primary: `1px solid ${colors['primary']}`,",
+	"  secondary: `1px solid ${colors['secondary']}`,",
+	"  tertiary: `1px solid ${colors['tertiary']}`,",
+	"  quaternary: `1px solid ${colors['quaternary']}`,",
+	"  warn: `1px solid ${colors['warn']}`,",
+	"  success: `1px solid ${colors['success']}`,",
+	"  light: `1px solid ${colors['outline']}`,",
 	"  dark: `1px solid ${colors['on-background']}`,",
 	"  dotted: `1px dotted ${colors['on-background']}`,",
 	"});"
 ].join("\n");
-var themeExport = (exportName, displayName, colorsConst, radii) => [
+var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) => [
 	`export const ${exportName}: UniTheme = createTheme({`,
 	`  id: '${exportName}',`,
 	`  name: '${displayName}',`,
 	`  colors: ${colorsConst},`,
 	`  borders: borders(${colorsConst}),`,
 	`  components: components(${colorsConst}),`,
+	`  shadows: ${shadowsConst},`,
 	...radii ? ["  radii,"] : [],
 	"});"
 ].join("\n");
@@ -1540,7 +1700,7 @@ var themeExport = (exportName, displayName, colorsConst, radii) => [
 */
 var emitThemeFile = (input) => {
 	const { darkMode = true, name = "Brand" } = input;
-	const { lightColors, darkColors, radii, report } = generateThemes(input);
+	const { lightColors, darkColors, radii, lightShadows, darkShadows, report } = generateThemes(input);
 	const id = name.replace(/\W+/g, "") || "Brand";
 	const regenerate = [
 		`--brand=${(Array.isArray(input.seed) ? input.seed : [input.seed]).join(",")}`,
@@ -1554,12 +1714,16 @@ var emitThemeFile = (input) => {
 		exportName: `${id}Light`,
 		displayName: `${name} Light`,
 		colorsConst: "lightColors",
-		colors: lightColors
+		colors: lightColors,
+		shadowsConst: "lightShadows",
+		shadows: lightShadows
 	}, ...darkMode ? [{
 		exportName: `${id}Dark`,
 		displayName: `${name} Dark`,
 		colorsConst: "darkColors",
-		colors: darkColors
+		colors: darkColors,
+		shadowsConst: "darkShadows",
+		shadows: darkShadows
 	}] : []];
 	return {
 		content: [
@@ -1576,16 +1740,19 @@ var emitThemeFile = (input) => {
 			"  type Borders,",
 			"  type Colors,",
 			"  type ComponentThemes,",
+			"  type Shadows,",
 			"  type UniTheme,",
 			"} from '@uni-design-system/uni-core';",
 			"",
 			...modes.map(({ colorsConst, colors }) => `const ${colorsConst}: Colors = {\n${recordLiteral(colors, "  ")}\n};\n`),
+			"/** Brand-tinted elevation shadows — theme-scoped, edit freely. */",
+			...modes.map(({ shadowsConst, shadows }) => `const ${shadowsConst}: Shadows = {\n${recordLiteral(shadows, "  ")}\n};\n`),
 			bordersLiteral(),
 			"",
 			"/**",
 			" * Sparse component overrides, deep-merged over Uni component defaults: only",
 			" * what you write here changes. Point components at your own primitives, e.g.:",
-			" *   button: { variants: { secondary: { border: `2px dashed ${colors.tertiary}` } } },",
+			" *   button: { variants: { secondary: { border: `2px dashed ${colors['tertiary']}` } } },",
 			" *   input: { options: { borderRadius: 'max' } },",
 			" */",
 			"const components = (colors: Colors): ComponentThemes => ({});",
@@ -1595,7 +1762,7 @@ var emitThemeFile = (input) => {
 				`const radii = {\n${recordLiteral(radii, "  ")}\n};`,
 				""
 			] : [],
-			...modes.map(({ exportName, displayName, colorsConst }) => `${themeExport(exportName, displayName, colorsConst, !!radii)}\n`),
+			...modes.map(({ exportName, displayName, colorsConst, shadowsConst }) => `${themeExport(exportName, displayName, colorsConst, shadowsConst, !!radii)}\n`),
 			"/** First key wins as the default theme when registered via UNI_THEMES. */",
 			`export const ${id}Themes = { ${modes.map((m) => m.exportName).join(", ")} };`,
 			""
@@ -1730,14 +1897,16 @@ var darkColors = generatePalette({
 var DarkTheme = createTheme({
 	id: "DarkTheme",
 	name: "Dark Theme",
-	colors: darkColors
+	colors: darkColors,
+	shadows: generateShadows(darkColors, "dark")
 });
 //#endregion
 //#region src/concepts/theme/themes/light.theme.ts
 var LightTheme = createTheme({
 	id: "LightTheme",
 	name: "Light Theme",
-	colors: lightColors
+	colors: lightColors,
+	shadows: generateShadows(lightColors, "light")
 });
 //#endregion
 //#region src/concepts/theme/theme.records.ts
@@ -1824,12 +1993,14 @@ exports.createThemeFromPalette = createThemeFromPalette;
 exports.cycle = cycle;
 exports.darkColors = darkColors;
 exports.debounce = debounce;
+exports.emitDtcgTokens = emitDtcgTokens;
 exports.emitThemeFile = emitThemeFile;
 exports.expandFadeIn = expandFadeIn;
 exports.fadeIn = fadeIn;
 exports.fadeOut = fadeOut;
 exports.generateColors = generateColors;
 exports.generatePalette = generatePalette;
+exports.generateShadows = generateShadows;
 exports.generateThemes = generateThemes;
 exports.generateUniThemes = generateUniThemes;
 exports.getAnalogousHues = getAnalogousHues;