@uni-design-system/uni-angular 5.0.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
     "@emotion/css": "^11.0.0",
-    "@uni-design-system/uni-core": "5.0.0"
+    "@uni-design-system/uni-core": "^5.1.0"
   },
   "module": "fesm2022/uni-design-system-uni-angular.mjs",
   "typings": "types/uni-design-system-uni-angular.d.ts",

package/schematics/ng-add/index.js

@@ -520,6 +520,41 @@ var generateColors = (config) => {
 * `generateThemes()` for the light+dark pair plus a {@link ContrastReport}.
 */
 var generatePalette = (config) => generateColors(config);
+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)}`
+	};
+};
 var BaseTypography = {
 	"display-large": {
 		fontFamily: "Red Hat Display",
@@ -1209,6 +1244,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,
@@ -1227,24 +1264,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");
@@ -1259,7 +1297,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(",")}`,
@@ -1273,12 +1311,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: [
@@ -1295,16 +1337,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 => ({});",
@@ -1314,7 +1359,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(", ")} };`,
 			""
@@ -1399,26 +1444,29 @@ var ShadowMap = {
 	}
 };
 GetBoxShadows(ShadowMap["pressed"]), GetBoxShadows(ShadowMap["raised"]), GetBoxShadows(ShadowMap["focussed"]), GetBoxShadows(ShadowMap["navigation"]), GetBoxShadows(ShadowMap["modal"]);
+var darkColors = generatePalette({
+	...BASE_PALETTE_CONFIG,
+	mode: "dark"
+});
 var DarkTheme = createTheme({
 	id: "DarkTheme",
 	name: "Dark Theme",
-	colors: generatePalette({
-		...BASE_PALETTE_CONFIG,
-		mode: "dark"
-	})
+	colors: darkColors,
+	shadows: generateShadows(darkColors, "dark")
 });
 var UniThemes = {
 	LightTheme: createTheme({
 		id: "LightTheme",
 		name: "Light Theme",
-		colors: lightColors
+		colors: lightColors,
+		shadows: generateShadows(lightColors, "light")
 	}),
 	DarkTheme
 };
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "5.0.0";
+var version = "5.1.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {