@a-type/ui 4.1.8 → 5.0.0

package/src/uno/preflights/colors.ts

@@ -1,146 +1,172 @@
 import {
+	ColorLogicalPalette,
+	createColorLogicalPalette,
+	defaultPalettes,
 	graySaturation,
 	highContrastSaturation,
-	paletteNames,
-	palettes,
 } from '../logic/palettes.js';
+import { PROPS } from '../logic/properties.js';
 import { preflight } from './_util.js';
+import { UserPreflightOptions } from './user.js';
 
-const baseThemeCSS = `
---v-color: ${palettes['high-contrast'].styles.ink};
-color: var(--v-color);
---v-bg: ${palettes['gray'].styles.wash};
-background-color: var(--v-bg);
-`;
-
-export const colorPreflight = preflight({
-	getCSS: () => `
-:root {
-	--p-lemon-hue: 90.8;
-	--p-leek-hue: 165.88;
-	--p-tomato-hue: 10.51;
-	--p-blueberry-hue: 248.14;
-	--p-eggplant-hue: 280.21;
-
-	--p-attention-hue: 30;
-	--p-success-hue: 140;
-}
-
-.theme-lemon, .theme-override-lemon.theme-override-lemon {
-	--p-primary-hue: var(--p-lemon-hue);
-	--p-accent-hue: var(--p-leek-hue);
-	--l-main-hue: var(--p-primary-hue);
-
-	${baseThemeCSS}
-}
-
-.theme-leek, .theme-override-leek.theme-override-leek {
-	--p-primary-hue: var(--p-leek-hue);
-	--p-accent-hue: var(--p-lemon-hue);
-	--l-main-hue: var(--p-primary-hue);
-
-	${baseThemeCSS}
-}
-
-.theme-tomato, .theme-override-tomato.theme-override-tomato {
-	--p-primary-hue: var(--p-tomato-hue);
-	--p-accent-hue: var(--p-leek-hue);
-	--l-main-hue: var(--p-primary-hue);
-
-	${baseThemeCSS}
+export interface ColorPreflightOptions {
+	namedHues?: UserPreflightOptions['namedHues'];
 }
 
-.theme-blueberry, .theme-override-blueberry.theme-override-blueberry {
-	--p-primary-hue: var(--p-blueberry-hue);
-	--p-accent-hue: var(--p-leek-hue);
-	--l-main-hue: var(--p-primary-hue);
-
-	${baseThemeCSS}
-}
-
-.theme-eggplant, .theme-override-eggplant.theme-override-eggplant {
-	--p-primary-hue: var(--p-eggplant-hue);
-	--p-accent-hue: var(--p-leek-hue);
-	--l-main-hue: var(--p-primary-hue);
-
-	${baseThemeCSS}
-}
-
-.theme-gray, .theme-salt, .theme-override-gray.theme-override-gray {
-	--l-saturation: ${graySaturation};
-	${baseThemeCSS}
-}
-
-.theme-high-contrast, .theme-override-high-contrast.theme-override-high-contrast {
-	--l-saturation: ${highContrastSaturation};
-	--l-lightness-spread: 10;
-	${baseThemeCSS}
-}
-
-${paletteNames
-	.filter((n) => n !== 'gray' && n !== 'high-contrast')
-	.map(createPaletteClass)
+function paletteColors(
+	shades: (typeof PROPS)['PALETTE']['SHADES'],
+	palette: ColorLogicalPalette,
+) {
+	return `
+${shades.WASH}: ${palette.styles.wash};
+${shades.LIGHT}: ${palette.styles.light};
+${shades.MID}: ${palette.styles.DEFAULT};
+${shades.DARK}: ${palette.styles.dark};
+${shades.INK}: ${palette.styles.ink};
+	`;
+}
+
+function paletteClass(
+	name: string,
+	palette: ColorLogicalPalette,
+	{
+		mainHue,
+		saturation = 1,
+		lightnessSpread = 1,
+	}: {
+		// false to inherit from parent
+		mainHue?: string | string | boolean;
+		saturation?: number | string;
+		lightnessSpread?: number | string;
+	} = {},
+) {
+	return `.palette-${name}, .theme-${name} {
+${PROPS.PALETTE.NAME}: ${name};
+${
+	mainHue === false
+		? ''
+		: `${PROPS.PALETTE.MAIN_HUE}: var(${
+				mainHue || PROPS.USER.COLOR.NAMED_HUE(name)
+		  });`
+}
+${PROPS.PALETTE.SATURATION}: ${saturation};
+${PROPS.PALETTE.LIGHTNESS_SPREAD}: ${lightnessSpread};
+${paletteColors(PROPS.PALETTE.SHADES, palette)}
+${/* every palette defines its grays, too */ ''}
+${paletteColors(PROPS.PALETTE.GRAY_SHADES, defaultPalettes.gray)}
+}
+
+.theme-${name} {
+	${PROPS.USER.COLOR.PRIMARY_HUE}: var(${PROPS.USER.COLOR.NAMED_HUE(name)});
+	${PROPS.USER.COLOR.ACCENT_HUE}: var(${PROPS.USER.COLOR.NAMED_ACCENT_HUE(name)});
+}`;
+}
+
+function toNamedPalettes(namedHues: ColorPreflightOptions['namedHues']) {
+	return Object.fromEntries(
+		Object.entries(namedHues || {}).map(([name, config]) => [
+			name,
+			createColorLogicalPalette({
+				name,
+				sourceHue: config.sourceHue.toString(),
+				accentHue: config.accentHue.toString(),
+				saturation: config.saturation?.toString(),
+			}),
+		]),
+	);
+}
+
+export function palettePropertyReset(options: ColorPreflightOptions) {
+	return [
+		paletteColors(
+			PROPS.PALETTE.NAMED_SHADES('primary'),
+			defaultPalettes.primary,
+		),
+		paletteColors(PROPS.PALETTE.NAMED_SHADES('accent'), defaultPalettes.accent),
+		paletteColors(PROPS.PALETTE.SHADES, defaultPalettes.main),
+		paletteColors(PROPS.PALETTE.GRAY_SHADES, defaultPalettes.gray),
+		paletteColors(
+			PROPS.PALETTE.NAMED_SHADES('high-contrast'),
+			defaultPalettes['high-contrast'],
+		),
+		...Object.entries(toNamedPalettes(options.namedHues)).map(
+			([name, palette]) =>
+				paletteColors(PROPS.PALETTE.NAMED_SHADES(name), palette),
+		),
+		`${PROPS.COLOR.INHERITED}: ${defaultPalettes['high-contrast'].styles.ink};`,
+		`${PROPS.BACKGROUND_COLOR.INHERITED}: ${defaultPalettes['gray'].styles.wash};`,
+	].join('\n');
+}
+
+export const colorPreflight = (options: ColorPreflightOptions) =>
+	preflight({
+		getCSS: () => {
+			const namedPalettes = toNamedPalettes(options.namedHues || {});
+
+			return `
+${paletteClass('primary', defaultPalettes.primary, {
+	mainHue: PROPS.USER.COLOR.PRIMARY_HUE,
+})}
+${paletteClass('accent', defaultPalettes.accent, {
+	mainHue: PROPS.USER.COLOR.ACCENT_HUE,
+})}
+
+${Object.entries(namedPalettes)
+	// User-provided named hues -> .palette-xxx classes
+	.map(([name, palette]) => paletteClass(name, palette))
 	.join('\n')}
-.palette-gray {
-	--l-saturation: ${graySaturation};
-}
-.palette-high-contrast {
-	--l-saturation: ${highContrastSaturation};
-	--l-lightness-spread: 10;
-}
-
-body {
-	${baseThemeCSS}
-	--l-main-hue: var(--p-primary-hue);
-}
-
-@property --v-bg-altered {
-	syntax: "*";
-	inherits: false;
-}
-
-@property --v-color-altered {
-	syntax: "*";
-	inherits: false;
-}
-
-@property --v-border-altered {
-	syntax: "*";
-	inherits: false;
-}
 
-@property --v-ring-altered {
-	syntax: "*";
-	inherits: false;
+${/* useful to reset from gray, I guess? */ ''}
+.palette-main {
+	${PROPS.PALETTE.SATURATION}: 1;
+	${paletteColors(PROPS.PALETTE.SHADES, defaultPalettes.main)}
 }
 
-@property --v-bg-opacity {
-	syntax: "<percentage>";
-	inherits: false;
-}
-
-@property --v-color-opacity {
-	syntax: "<percentage>";
-	inherits: false;
-}
+${paletteClass('gray', defaultPalettes.gray, {
+	saturation: graySaturation,
+	mainHue: false,
+})}
 
-@property --v-border-opacity {
-	syntax: "<percentage>";
-	inherits: false;
-}
-
-@property --v-ring-opacity {
-	syntax: "<percentage>";
-	inherits: false;
-}
-`,
-});
+${paletteClass('high-contrast', defaultPalettes['high-contrast'], {
+	saturation: highContrastSaturation,
+	lightnessSpread: 10,
+	mainHue: false,
+})}
 
-function createPaletteClass(sourceName: string) {
-	return `
-.palette-${sourceName} {
-	--l-main-hue: var(--p-${sourceName === 'gray' ? 'primary' : sourceName}-hue);
-	--l-saturation: 1;
-}
+body {
+	${PROPS.PALETTE.NAME}: 'primary';
+	${PROPS.COLOR.INHERITED}: ${defaultPalettes['high-contrast'].styles.ink};
+	${PROPS.BACKGROUND_COLOR.INHERITED}: ${defaultPalettes['gray'].styles.wash};
+	color: var(${PROPS.COLOR.INHERITED});
+	background-color: var(${PROPS.BACKGROUND_COLOR.INHERITED});
+	${PROPS.PALETTE.MAIN_HUE}: var(${PROPS.USER.COLOR.PRIMARY_HUE});
+	${paletteColors(PROPS.PALETTE.SHADES, defaultPalettes.primary)}
+	${paletteColors(PROPS.PALETTE.GRAY_SHADES, defaultPalettes.gray)}
+}
+
+${[
+	PROPS.COLOR,
+	PROPS.BACKGROUND_COLOR,
+	PROPS.BORDER_COLOR.ALL,
+	PROPS.BORDER_COLOR.TOP,
+	PROPS.BORDER_COLOR.RIGHT,
+	PROPS.BORDER_COLOR.BOTTOM,
+	PROPS.BORDER_COLOR.LEFT,
+	PROPS.RING_COLOR,
+]
+	.map((propGroup) => propertyDefinitions(propGroup))
+	.join('\n')}
+`;
+		},
+	});
+
+function propertyDefinitions(propGroup: {
+	INHERITED: string;
+	FINAL: string;
+	OPACITY: string;
+}) {
+	return `@property ${propGroup.FINAL} { syntax: "*"; inherits: false; }
+@property ${propGroup.INHERITED} { syntax: "*"; inherits: true; }
+@property ${propGroup.OPACITY} { syntax: "<percentage>"; inherits: false; }
 `;
 }

package/src/uno/preflights/globals.ts

@@ -1,3 +1,4 @@
+import { PROPS } from '../logic/properties.js';
 import { preflight } from './_util.js';
 
 export interface GlobalsPreflightConfig {
@@ -8,10 +9,10 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
 	preflight({
 		getCSS: () => `
 :root {
-	--font-sans: "Inter", sans-serif;
-	--font-serif: "Domine", serif;
-	--font-title: "Inter", sans-serif;
-	--font-default: var(--font-sans, sans-serif);
+	${PROPS.USER.FONTS.SANS}: "Inter", sans-serif;
+	${PROPS.USER.FONTS.SERIF}: "Domine", serif;
+	${PROPS.USER.FONTS.TITLE}: "Inter", sans-serif;
+	${PROPS.USER.FONTS.DEFAULT}: var(${PROPS.USER.FONTS.SANS}, sans-serif);
 
 	--z-now-playing: 40;
 	--z-nav: 50;
@@ -27,17 +28,17 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
 	`
 	}
 
-	--un-shadow-color: #000000;
-	--un-shadow-opacity: 10%;
+	${PROPS.BUILT_IN.SHADOW_COLOR}: #000000;
+	${PROPS.BUILT_IN.SHADOW_OPACITY}: 10%;
 
-	--arrow-size: 1rem;
+	${PROPS.UTILS.ARROW_SIZE}: 1rem;
 }
 
 @layer preflightBase {
 	html, body {
 		margin: 0;
 		padding: 0;
-		font-family: var(--font-default);
+		font-family: var(${PROPS.USER.FONTS.DEFAULT}, sans-serif);
 		font-size: 16px;
 		min-height: 100%;
 		--webkit-font-smoothing: antialiased;
@@ -63,50 +64,5 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
 		border-width: 0;
 	}
 }
-
-@property --v-shadow-y-mult {
-	syntax: "*";
-	inherits: false;
-}
-
-@property --v-border-r-color {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-b-color {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-l-color {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-t-color {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-r-color-altered {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-b-color-altered {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-l-color-altered {
-	syntax: "<color>";
-	inherits: false;
-}
-
-@property --v-border-t-color-altered {
-	syntax: "<color>";
-	inherits: false;
-}
 `,
 	});

package/src/uno/preflights/index.ts

@@ -1,25 +1,25 @@
 import { Preflight } from 'unocss';
 import { basePreflight } from './base.js';
-import { colorPreflight } from './colors.js';
-import {
-	customizationPreflight,
-	ThemeCustomizationConfig,
-} from './customization.js';
-import { darkModePreflight } from './dark.js';
+import { colorPreflight, ColorPreflightOptions } from './colors.js';
 import { fontsPreflight, FontsPreflightOptions } from './fonts.js';
 import { globalPreflight, GlobalsPreflightConfig } from './globals.js';
 import { layerPreflight } from './layers.js';
+import { modePreflight } from './mode.js';
+import { propertiesPreflight } from './properties.js';
+import { userPreflight, UserPreflightOptions } from './user.js';
 
-export const preflights = (
-	config: ThemeCustomizationConfig &
-		FontsPreflightOptions &
-		GlobalsPreflightConfig,
-): Preflight<any>[] => [
+export type PreflightConfig = FontsPreflightOptions &
+	GlobalsPreflightConfig &
+	UserPreflightOptions &
+	ColorPreflightOptions;
+
+export const preflights = (config: PreflightConfig): Preflight<any>[] => [
 	layerPreflight,
 	basePreflight,
 	globalPreflight(config),
-	colorPreflight,
-	darkModePreflight,
-	customizationPreflight(config),
+	colorPreflight(config),
+	modePreflight(config),
 	fontsPreflight(config),
+	propertiesPreflight,
+	userPreflight(config),
 ];

package/src/uno/preflights/mode.ts

@@ -0,0 +1,62 @@
+import { PROPS } from '../logic/properties.js';
+import { preflight } from './_util.js';
+import { ColorPreflightOptions, palettePropertyReset } from './colors.js';
+
+const lightModeCSS = (options: ColorPreflightOptions) => `
+${PROPS.MODE.MULT}: 1;
+${PROPS.MODE.L_NEUTRAL}: 90%;
+${PROPS.MODE.L_RANGE_UP}: 10%;
+${PROPS.MODE.L_RANGE_DOWN}: 70%;
+${PROPS.MODE.S_NEUTRAL}: 75%;
+${PROPS.MODE.S_RANGE_UP}: -55%;
+${PROPS.MODE.S_RANGE_DOWN}: 20%;
+${PROPS.MODE.WHITE}: #ffffff;
+${PROPS.MODE.BLACK}: #000000;
+
+color: var(${PROPS.COLOR.INHERITED});
+background-color: var(${PROPS.BACKGROUND_COLOR.INHERITED});
+
+${palettePropertyReset(options)}
+`;
+
+const darkModeCSS = (options: ColorPreflightOptions) => `
+${PROPS.MODE.MULT}: -1;
+${PROPS.MODE.L_NEUTRAL}: 60%;
+${PROPS.MODE.L_RANGE_UP}: 38%;
+${PROPS.MODE.L_RANGE_DOWN}: 70%;
+${PROPS.MODE.S_NEUTRAL}: 80%;
+${PROPS.MODE.S_RANGE_UP}: 40%;
+${PROPS.MODE.S_RANGE_DOWN}: -30%;
+${PROPS.MODE.WHITE}: #000000;
+${PROPS.MODE.BLACK}: #ffffff;
+
+color: var(${PROPS.COLOR.INHERITED});
+background-color: var(${PROPS.BACKGROUND_COLOR.INHERITED});
+
+${palettePropertyReset(options)}
+`;
+
+export const modePreflight = (options: ColorPreflightOptions) =>
+	preflight({
+		getCSS: () => `
+@layer preflightBase {
+	html {
+		${lightModeCSS(options)}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		html {
+			${darkModeCSS(options)}
+		}
+	}
+}
+
+@layer preflightVariants {
+	.override-light {
+		${lightModeCSS(options)}
+	}
+	.override-dark {
+		${darkModeCSS(options)}
+	}
+}`,
+	});

package/src/uno/preflights/properties.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@unocss/preset-mini';
+import { PreflightContext } from 'unocss';
+import { PROPS } from '../logic/properties.js';
+import { preflight } from './_util.js';
+
+export const propertiesPreflight = preflight({
+	getCSS: (_ctx: PreflightContext<Theme>) => {
+		return `
+@property ${PROPS.LOCALS.CORNER_SCALE} {
+	syntax: "*";
+	inherits: false;
+}
+@property ${PROPS.UTILS.SHADOW_Y_MULT} {
+	syntax: "*";
+	inherits: false;
+}
+`;
+	},
+});

package/src/uno/preflights/user.ts

@@ -0,0 +1,67 @@
+import { defaultPresetHues } from '../defaults.js';
+import { PROPS } from '../logic/properties.js';
+import { preflight } from './_util.js';
+
+export interface UserPreflightOptions {
+	primaryHue?: number;
+	accentHue?: number;
+	namedHues?: {
+		[name: string]: {
+			sourceHue: number;
+			accentHue: number;
+			saturation?: number;
+		};
+	};
+	saturation?: number;
+	spacingScale?: number;
+	borderScale?: number;
+	cornerScale?: number;
+	shadowSpread?: number;
+	fontSize?: number;
+}
+
+export const userPreflight = ({
+	saturation = 50,
+	primaryHue = defaultPresetHues.lemon.sourceHue,
+	accentHue = defaultPresetHues.leek.sourceHue,
+	spacingScale = 1,
+	borderScale = 1,
+	cornerScale = 1,
+	shadowSpread = 1,
+	namedHues,
+	fontSize = 16,
+}: UserPreflightOptions) =>
+	preflight({
+		getCSS: () => {
+			return `
+@layer preflightBase {
+	:root {
+		${PROPS.USER.SATURATION}: ${saturation / 100};
+		${PROPS.USER.CORNER_SCALE}: ${cornerScale};
+		${PROPS.USER.SPACING_SCALE}: ${spacingScale};
+		${PROPS.USER.BORDER_SCALE}: ${borderScale};
+		${PROPS.USER.SHADOW_SPREAD}: ${shadowSpread};
+
+		${PROPS.USER.COLOR.PRIMARY_HUE}: ${primaryHue};
+		${PROPS.USER.COLOR.ACCENT_HUE}: ${accentHue};
+		${
+			namedHues
+				? Object.entries(namedHues)
+						.flatMap(([name, config]) => [
+							`${PROPS.USER.COLOR.NAMED_HUE(name)}: ${config.sourceHue};`,
+							`${PROPS.USER.COLOR.NAMED_ACCENT_HUE(name)}: ${
+								config.accentHue
+							};`,
+						])
+						.join('\n')
+				: ''
+		}
+	}
+
+	body, :host {
+		font-size: ${fontSize}px;
+	}
+}
+`;
+		},
+	});