@a-type/ui 4.1.7 → 5.0.0

package/src/uno/logic/properties.ts

@@ -0,0 +1,138 @@
+export const PROPS = {
+	USER: {
+		COLOR: {
+			PRIMARY_HUE: '--u-c-primary-hue',
+			ACCENT_HUE: '--u-c-accent-hue',
+			NAMED_HUE: (name: string) => `--u-c-${name}-hue`,
+			NAMED_ACCENT_HUE: (name: string) => `--u-c-${name}-accent-hue`,
+		},
+		SATURATION: '--u-saturation',
+		SHADOW_SPREAD: '--u-shadow-spread',
+		CORNER_SCALE: '--u-corner-scale',
+		SPACING_SCALE: '--u-spacing-scale',
+		BORDER_SCALE: '--u-border-scale',
+		FONTS: {
+			DEFAULT: '--u-font-default',
+			SANS: '--u-font-sans',
+			SERIF: '--u-font-serif',
+			TITLE: '--u-font-title',
+		},
+	},
+
+	PALETTE: {
+		NAME: '--p-name',
+		MAIN_HUE: '--p-main-hue',
+		SATURATION: '--p-saturation',
+		LIGHTNESS_SPREAD: '--p-lightness-spread',
+		NAMED_HUE: (name: string) => `--p-${name}-hue`,
+
+		SHADES: {
+			WASH: '--p-shade-wash',
+			LIGHT: '--p-shade-light',
+			MID: '--p-shade-mid',
+			DARK: '--p-shade-dark',
+			INK: '--p-shade-ink',
+		},
+
+		GRAY_SHADES: {
+			WASH: '--p-gray-shade-wash',
+			LIGHT: '--p-gray-shade-light',
+			MID: '--p-gray-shade-mid',
+			DARK: '--p-gray-shade-dark',
+			INK: '--p-gray-shade-ink',
+		},
+
+		NAMED_SHADES: (name: string) => ({
+			WASH: `--p-${name}-shade-wash`,
+			LIGHT: `--p-${name}-shade-light`,
+			MID: `--p-${name}-shade-mid`,
+			DARK: `--p-${name}-shade-dark`,
+			INK: `--p-${name}-shade-ink`,
+		}),
+	},
+
+	MODE: {
+		BLACK: '--m-black',
+		WHITE: '--m-white',
+		MULT: '--m-mult',
+		L_NEUTRAL: '--m-l-neutral',
+		L_RANGE_UP: '--m-l-range-up',
+		L_RANGE_DOWN: '--m-l-range-down',
+		S_NEUTRAL: '--m-s-neutral',
+		S_RANGE_UP: '--m-s-range-up',
+		S_RANGE_DOWN: '--m-s-range-down',
+	},
+
+	COLOR: {
+		INHERITED: '--v-c-i',
+		FINAL: '--v-c',
+		OPACITY: '--v-c-op',
+	},
+	BACKGROUND_COLOR: {
+		INHERITED: '--v-bg-l',
+		FINAL: '--v-bg',
+		OPACITY: '--v-bg-op',
+		// special token for assigning a bg color for contrast calc
+		CONTRAST: '--v-bg-contrast',
+	},
+	BORDER_COLOR: {
+		ALL: {
+			INHERITED: '--v-bd-c-i',
+			FINAL: '--v-bd-c',
+			OPACITY: '--v-bd-c-op',
+		},
+		TOP: {
+			INHERITED: '--v-bd-t-c-i',
+			FINAL: '--v-bd-t-c',
+			OPACITY: '--v-bd-t-c-op',
+		},
+		RIGHT: {
+			INHERITED: '--v-bd-r-c-i',
+			FINAL: '--v-bd-r-c',
+			OPACITY: '--v-bd-r-c-op',
+		},
+		BOTTOM: {
+			INHERITED: '--v-bd-b-c-i',
+			FINAL: '--v-bd-b-c',
+			OPACITY: '--v-bd-b-c-op',
+		},
+		LEFT: {
+			INHERITED: '--v-bd-l-c-i',
+			FINAL: '--v-bd-l-c',
+			OPACITY: '--v-bd-l-c-op',
+		},
+	},
+	RING_COLOR: {
+		INHERITED: '--v-ring-c-i',
+		FINAL: '--v-ring-c',
+		OPACITY: '--v-ring-c-op',
+	},
+	ACCENT_COLOR: {
+		INHERITED: '--v-accent-c-i',
+		FINAL: '--v-accent-c',
+		OPACITY: '--v-accent-c-op',
+	},
+	PLACEHOLDER_COLOR: {
+		INHERITED: '--v-ph-c-i',
+		FINAL: '--v-ph-c',
+		OPACITY: '--v-ph-c-op',
+	},
+
+	LOCALS: {
+		CORNER_SCALE: '--l-corner-scale',
+		SPACING_SCALE: '--l-spacing-scale',
+	},
+
+	UTILS: {
+		SHADOW_Y_MULT: '--t-shadow-y-mult',
+		ARROW_SIZE: '--t-arrow-size',
+	},
+
+	BUILT_IN: {
+		RING_COLOR: '--un-ring-color',
+		SHADOW_INSET: '--un-shadow-inset',
+		SHADOW_COLOR: '--un-shadow-color',
+		SHADOW_OPACITY: '--un-shadow-opacity',
+		SHADOW: '--un-shadow',
+	},
+};

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;
+}
+`;
+	},
+});