@uni-design-system/uni-core 8.4.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @uni-design-system/uni-core
 
+## 9.0.0
+
+### Major Changes
+
+- [`8250162`](https://github.com/uni-design-system/uni/commit/8250162c35e418f976080904df4c20783feeb6e2) Thanks [@gaenglish](https://github.com/gaenglish)! - Every deprecated API is removed. The library now carries no `@deprecated`
+  symbols at all.
+
+  **Per-component duration options → the `motion` scale.** Six components carried
+  their own duration knob that predated the motion scale and _won over_ it:
+  `expand.transitionSpeed`, `callout.transitionMs`, `radio.transitionSpeed`,
+  `menuItem.transitionSpeed`, `alert.transitionSpeed` and
+  `snackbar.transitionDelay`. All are gone, along with the precedence branch each
+  one required — timing now comes from the token, full stop.
+
+  Retime the token instead; one edit covers every component pointing at it. To
+  retime a single component, define a token of your own and point that
+  component's `motion` option at it:
+
+  ```ts
+  createTheme({
+    …,
+    motion: { productive: { duration: 110, easing: 'ease' } },
+    components: { menuItem: { options: { motion: 'productive' } } },
+  });
+  ```
+
+  A `duration: 0` token is how a theme opts out of motion — that is what
+  `transitionSpeed: 0` used to mean. Both showcase themes are migrated this way
+  (Carbon to a 110ms `productive` token, Wellsourced to an `instant` one).
+
+  **Options that never did anything.** `card.transitionSpeed` and
+  `inputBox.transitionSpeed` were read by nothing and never had been. Delete them
+  from your theme; nothing replaces them.
+
+  **Renames and obsolete APIs**
+  - `inputBox.typeFace` → `typeface` (the casing every other component uses).
+  - `uni-tooltip`'s `appendToBody` input — inert since the tooltip moved to the
+    native top layer, which escapes any overflow context by itself.
+  - Box's `elevation` input → `shadow`, in both the Angular and React packages.
+    It was a second name for the same thing.
+  - The Angular `icons` re-export → import `BaseIcons` from
+    `@uni-design-system/uni-core`. The default set ships with every theme.
+
+  **The HSL color legacy is gone from uni-core.** `uniColor`, `randomRangeValue`,
+  `CategorySaturation` and `CategoryLightness` are removed, superseded by the
+  deterministic OKLCH engine (`generateThemes` / `generatePalette`) — same input,
+  same theme, WCAG-checked. `RoleHues` and the `UniColor` type go with them: they
+  were reachable only through `uniColor`, and `RoleHues` had gone stale enough to
+  hold saturation values in a table of hues.
+
+  **Deferred output renames.** Three outputs were held back because renaming is
+  breaking; this is that release. Each also drops an eslint escape it needed for
+  shadowing a native event name or using an `on` prefix.
+
+  | Component            | Before            | After            |
+  | -------------------- | ----------------- | ---------------- |
+  | `uni-debounce-input` | `(change)`        | `(valueChange)`  |
+  | `uni-search-input`   | `(change)`        | `(searchChange)` |
+  | `uni-search-input`   | `(search)`        | `(searchSubmit)` |
+  | `dragAndDrop`        | `(onFileDropped)` | `(fileDropped)`  |
+
+  **`uni-dropdown`'s `color` input → `containerColor`,** completing the rule the
+  layout directives set: every container-pair input in the library is now
+  `containerColor`, and plain `color` always means the CSS property.
+
+  **`ThemeService.getSpacing('none')` now returns `0`, not the string `'none'`.**
+  `'none'` is not a valid length, so it was silently dropped wherever it landed —
+  `uni-menu` carried a comment working around exactly that, which is now deleted.
+
+- [`c0c6056`](https://github.com/uni-design-system/uni/commit/c0c6056c61e994a45af9c379f3c99f55eebcb79a) Thanks [@gaenglish](https://github.com/gaenglish)! - The spacing scale is open, and `createTheme` finally accepts one.
+
+  The scale was a closed seven-name union on a doubling curve (2/4/8/16/32/64px).
+  Real layouts are rarely built exclusively on one — the gaps between 8 and 16,
+  and 16 and 32, are where a lot of real spacing lives — and there was no way to
+  add a step, because **`ThemeConfig` had no `spacing` field at all**:
+  `createTheme` hardcoded the base scale. The Wellsourced showcase theme had to
+  bolt its scale on after the fact with a post-hoc spread.
+
+  Three changes, which only work together:
+  - `NullableSize` gains a `(string & {})` arm, so any name the theme defines is a
+    valid `padding` / `gap` / `marginInline` value while the seven named steps keep
+    their autocomplete. `Size` itself stays closed — it also types _component_
+    sizes, where an arbitrary name has nothing to resolve against.
+  - `Spacing` is spelled out as named-optional-keys plus an index signature
+    (mirroring `Typography`), rather than a `Partial<Record<…>>` that would
+    collapse to a plain string record and lose the named steps.
+  - `createTheme({ spacing })` merges over the base scale.
+
+  ```ts
+  createTheme({ id, name, colors, spacing: { tight: '6px', snug: '10px' } });
+  ```
+
+  ```html
+  <div stack-layout padding="tight" gap="snug">…</div>
+  ```
+
+  Because the scale is open, a mistyped token can no longer be a compile error. It
+  is dropped — an `undefined` CSS value simply does not render — and
+  `ThemeService` now warns once per unknown token in development, naming the
+  tokens the active theme does define. Scaffolded `uni-theme.ts` files carry a
+  `spacing` block so the static theme file stays the editable source of truth.
+
+  **Behavior change:** `xxl` was in the `Size` union but defined by no base theme,
+  so `padding="xxl"` type-checked and rendered nothing. It is now `128px`,
+  completing the doubling — any element relying on the silent drop will start
+  showing spacing.
+
 ## 8.4.0
 
 ### Minor Changes

package/dist/cjs/index.cjs

@@ -60,183 +60,6 @@ var collapseFadeOut = {
 	}
 };
 //#endregion
-//#region src/concepts/color/color.records.ts
-/**
-* @deprecated HSL saturation ranges are superseded by the perceptual OKLCH
-* chroma model inside `concepts/generation` (see `generateThemes`). Kept for
-* legacy callers of `uniColor`; removal follows the changeset major process.
-*/
-var CategorySaturation = {
-	jewel: {
-		low: 73,
-		high: 83
-	},
-	pastel: {
-		low: 14,
-		high: 21
-	},
-	earth: {
-		low: 36,
-		high: 41
-	},
-	neutral: {
-		low: 1,
-		high: 10
-	},
-	florescent: {
-		low: 63,
-		high: 100
-	},
-	shades: {
-		low: 0,
-		high: 0
-	}
-};
-/**
-* @deprecated HSL lightness ranges are superseded by the perceptual OKLCH
-* tone slots inside `concepts/generation` (see `generateThemes`).
-*/
-var CategoryLightness = {
-	jewel: {
-		low: 56,
-		high: 76
-	},
-	pastel: {
-		low: 89,
-		high: 96
-	},
-	earth: {
-		low: 36,
-		high: 77
-	},
-	neutral: {
-		low: 70,
-		high: 99
-	},
-	florescent: {
-		low: 82,
-		high: 100
-	},
-	shades: {
-		low: 0,
-		high: 100
-	}
-};
-var RoleHues = {
-	primary: {
-		low: 73,
-		high: 83,
-		default: 0
-	},
-	secondary: {
-		low: 14,
-		high: 21,
-		default: 0
-	},
-	tertiary: {
-		low: 36,
-		high: 41,
-		default: 0
-	},
-	inverse: {
-		low: 63,
-		high: 100,
-		default: 0
-	},
-	ghost: {
-		low: 0,
-		high: 0,
-		default: 0
-	},
-	warn: {
-		low: 320,
-		high: 20,
-		default: 0
-	},
-	alert: {
-		low: 40,
-		high: 70,
-		default: 60
-	},
-	success: {
-		low: 90,
-		high: 150,
-		default: 120
-	},
-	info: {
-		low: 200,
-		high: 260,
-		default: 240
-	}
-};
-//#endregion
-//#region src/concepts/color/color.utils.ts
-/**
-* @deprecated Randomized generation is superseded by the deterministic OKLCH
-* engine in `concepts/generation` — same input, same theme. Seeded "surprise
-* me" behavior belongs in the consumer (playground), not the engine.
-*/
-var randomRangeValue = ({ low, high }) => {
-	low = Math.ceil(low);
-	high = Math.floor(high);
-	return Math.floor(Math.random() * (high - low + 1)) + low;
-};
-var cycle = (angle) => {
-	if (angle > 360) return angle - 360;
-	if (angle < 0) return angle + 360;
-	return angle;
-};
-var getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
-var getComplimentaryHue = (hue) => cycle(hue + 180);
-var getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
-var getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
-/**
-* Derive the primary/secondary/tertiary hues from a seed hue using the color
-* wheel relationships in {@link ColorScheme}. Pure angle math — works in any
-* hue space (HSL historically, OKLCH in the generation engine).
-*/
-var schemeHues = (hue, scheme) => {
-	switch (scheme) {
-		case "monochromatic": return {
-			primary: hue,
-			secondary: hue,
-			tertiary: hue
-		};
-		case "analogous": {
-			const [a, b] = getAnalogousHues(hue);
-			return {
-				primary: hue,
-				secondary: a,
-				tertiary: b
-			};
-		}
-		case "complimentary": {
-			const [a] = getAnalogousHues(hue);
-			return {
-				primary: hue,
-				secondary: getComplimentaryHue(hue),
-				tertiary: a
-			};
-		}
-		case "splitComplimentary": {
-			const [a, b] = getSplitComplimentaryHues(hue);
-			return {
-				primary: hue,
-				secondary: a,
-				tertiary: b
-			};
-		}
-		case "triadic": {
-			const [a, b] = getTriadicHues(hue);
-			return {
-				primary: hue,
-				secondary: a,
-				tertiary: b
-			};
-		}
-	}
-};
-//#endregion
 //#region src/concepts/color/color.helper.ts
 function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
 	return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
@@ -244,19 +67,6 @@ function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
 function RGBToString({ red, green, blue }) {
 	return `rgb(${red}, ${green}, ${blue})`;
 }
-/**
-* @deprecated Random HSL generation produces non-deterministic, perceptually
-* uneven colors. Use the OKLCH engine (`generateThemes` in
-* `concepts/generation`) or `generatePalette` instead.
-*/
-function uniColor({ role, category, alpha = 1 }) {
-	return HSLAToString({
-		hue: randomRangeValue(RoleHues[role]),
-		saturation: randomRangeValue(CategorySaturation[category]),
-		lightness: randomRangeValue(CategoryLightness[category]),
-		alpha
-	});
-}
 var RGBToHSL = ({ red, green, blue }) => {
 	red /= 255;
 	green /= 255;
@@ -340,6 +150,63 @@ var contrastRatio = (a, b) => {
 	return (hi + .05) / (lo + .05);
 };
 //#endregion
+//#region src/concepts/color/color.utils.ts
+var cycle = (angle) => {
+	if (angle > 360) return angle - 360;
+	if (angle < 0) return angle + 360;
+	return angle;
+};
+var getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
+var getComplimentaryHue = (hue) => cycle(hue + 180);
+var getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
+var getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
+/**
+* Derive the primary/secondary/tertiary hues from a seed hue using the color
+* wheel relationships in {@link ColorScheme}. Pure angle math — works in any
+* hue space (HSL historically, OKLCH in the generation engine).
+*/
+var schemeHues = (hue, scheme) => {
+	switch (scheme) {
+		case "monochromatic": return {
+			primary: hue,
+			secondary: hue,
+			tertiary: hue
+		};
+		case "analogous": {
+			const [a, b] = getAnalogousHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+		case "complimentary": {
+			const [a] = getAnalogousHues(hue);
+			return {
+				primary: hue,
+				secondary: getComplimentaryHue(hue),
+				tertiary: a
+			};
+		}
+		case "splitComplimentary": {
+			const [a, b] = getSplitComplimentaryHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+		case "triadic": {
+			const [a, b] = getTriadicHues(hue);
+			return {
+				primary: hue,
+				secondary: a,
+				tertiary: b
+			};
+		}
+	}
+};
+//#endregion
 //#region src/concepts/generation/oklch.helper.ts
 var clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
 var srgbToLinear = (channel) => channel <= .04045 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
@@ -1119,7 +986,8 @@ var BaseSpacing = {
 	sm: "8px",
 	md: "16px",
 	lg: "32px",
-	xl: "64px"
+	xl: "64px",
+	xxl: "128px"
 };
 var BaseThicknesses = {
 	thin: 1,
@@ -1917,7 +1785,7 @@ var deepMerge = (base, override) => {
 	for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
 	return out;
 };
-var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, components }) => ({
+var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, motion, typography, borders, thicknesses, spacing, components }) => ({
 	id,
 	name,
 	colors,
@@ -1925,7 +1793,10 @@ var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows =
 	borders: deepMerge(buildBorders(colors), borders),
 	radii,
 	shadows,
-	spacing: BaseSpacing,
+	spacing: {
+		...BaseSpacing,
+		...spacing
+	},
 	motion: {
 		...BaseMotion,
 		...motion
@@ -2178,6 +2049,7 @@ var themeExport = (exportName, displayName, colorsConst, shadowsConst, radii) =>
 	`  shadows: ${shadowsConst},`,
 	"  icons,",
 	...radii ? ["  radii,"] : [],
+	"  spacing,",
 	"});"
 ].join("\n");
 /**
@@ -2233,6 +2105,7 @@ var emitThemeFile = (input) => {
 			"  type ComponentThemes,",
 			"  type Icons,",
 			"  type Shadows,",
+			"  type Spacing,",
 			"  type UniTheme,",
 			"} from '@uni-design-system/uni-core';",
 			"",
@@ -2269,6 +2142,15 @@ var emitThemeFile = (input) => {
 			" */",
 			"const icons: Icons = {};",
 			"",
+			"/**",
+			" * Spacing steps, merged over the base scale",
+			" * (none: 0, xxs: 2px, xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px, xxl: 128px).",
+			" * Restate a named step to retune the rhythm, and add your own names for the",
+			" * gaps your design actually uses — every extra key is then a valid `padding`,",
+			" * `gap` or `marginInline` value: `<div stack-layout gap='tight'>`.",
+			" */",
+			"const spacing: Spacing = {};",
+			"",
 			...radii ? [
 				`/** Shape language: '${input.shape}'. */`,
 				`const radii = {\n${recordLiteral(radii, "  ")}\n};`,
@@ -2776,8 +2658,6 @@ exports.BASE_PALETTE_CONFIG = BASE_PALETTE_CONFIG;
 exports.BaseIcons = BaseIcons;
 exports.BaseTheme = BaseTheme;
 exports.CategoryChroma = CategoryChroma;
-exports.CategoryLightness = CategoryLightness;
-exports.CategorySaturation = CategorySaturation;
 exports.DarkTheme = DarkTheme;
 exports.DefaultThemeId = DefaultThemeId;
 exports.EXPAND_DEFAULT_SPEED = EXPAND_DEFAULT_SPEED;
@@ -2798,7 +2678,6 @@ exports.REQUIRED_TEXT_ROLES = REQUIRED_TEXT_ROLES;
 exports.REQUIRED_THICKNESSES = REQUIRED_THICKNESSES;
 exports.RGBToHSL = RGBToHSL;
 exports.RGBToString = RGBToString;
-exports.RoleHues = RoleHues;
 exports.ShadowCssMap = ShadowCssMap;
 exports.ShadowMap = ShadowMap;
 exports.ShapeRadii = ShapeRadii;
@@ -2843,7 +2722,6 @@ exports.isUniTheme = isUniTheme;
 exports.lightColors = lightColors;
 exports.oklchToHex = oklchToHex;
 exports.parseTheme = parseTheme;
-exports.randomRangeValue = randomRangeValue;
 exports.relativeLuminance = relativeLuminance;
 exports.removeInputPlatformStyling = removeInputPlatformStyling;
 exports.rgbToHex = rgbToHex;
@@ -2852,6 +2730,5 @@ exports.summarizeContrast = summarizeContrast;
 exports.svgToIconUri = svgToIconUri;
 exports.toTypeface = toTypeface;
 exports.toTypefaces = toTypefaces;
-exports.uniColor = uniColor;
 
 //# sourceMappingURL=index.cjs.map