@a-type/ui 5.0.22 → 6.0.0

package/src/uno/logic/properties.ts

@@ -1,144 +0,0 @@
-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',
-		},
-		FOCUS_COLOR: '--u-focus-color',
-	},
-
-	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',
-		RING_WIDTH: '--un-ring-width',
-		RING_STYLE: '--un-ring-style',
-		RING_OFFSET_SHADOW: '--un-ring-offset-shadow',
-		RING_SHADOW: '--un-ring-shadow',
-		RING_INSET: '--un-ring-inset',
-	},
-};

package/src/uno/preflights/_util.ts

@@ -1,10 +0,0 @@
-import { Preflight } from 'unocss';
-
-export function preflight(def: Preflight): Preflight {
-	return {
-		...def,
-		getCSS: async (...args) =>
-			(await def.getCSS(...args))?.replace(/\n+/gm, ' ').replaceAll('\t', '') +
-			'\n',
-	};
-}

package/src/uno/preflights/base.ts

@@ -1,17 +0,0 @@
-import { Theme } from '@unocss/preset-mini';
-import { entriesToCss, Preflight, PreflightContext, toArray } from 'unocss';
-import { preflight } from './_util.js';
-
-export const basePreflight: Preflight = preflight({
-	getCSS: (ctx: PreflightContext<Theme>) => {
-		if (ctx.theme.preflightBase) {
-			const css = entriesToCss(Object.entries(ctx.theme.preflightBase));
-			const roots = toArray(
-				ctx.theme.preflightRoot ?? ['*,::before,::after', '::backdrop'],
-			);
-			return roots
-				.map((root) => `@layer preflightBase{${root}{${css}}}`)
-				.join('');
-		}
-	},
-});

package/src/uno/preflights/colors.ts

@@ -1,172 +0,0 @@
-import {
-	ColorLogicalPalette,
-	createColorLogicalPalette,
-	defaultPalettes,
-	graySaturation,
-	highContrastSaturation,
-} from '../logic/palettes.js';
-import { PROPS } from '../logic/properties.js';
-import { preflight } from './_util.js';
-import { UserPreflightOptions } from './user.js';
-
-export interface ColorPreflightOptions {
-	namedHues?: UserPreflightOptions['namedHues'];
-}
-
-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')}
-
-${/* useful to reset from gray, I guess? */ ''}
-.palette-main {
-	${PROPS.PALETTE.SATURATION}: 1;
-	${paletteColors(PROPS.PALETTE.SHADES, defaultPalettes.main)}
-}
-
-${paletteClass('gray', defaultPalettes.gray, {
-	saturation: graySaturation,
-	mainHue: false,
-})}
-
-${paletteClass('high-contrast', defaultPalettes['high-contrast'], {
-	saturation: highContrastSaturation,
-	lightnessSpread: 10,
-	mainHue: false,
-})}
-
-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>"; initial-value: 100%; inherits: false; }
-`;
-}

package/src/uno/preflights/fonts.ts

@@ -1,20 +0,0 @@
-import { preflight } from './_util.js';
-
-export interface FontsPreflightOptions {
-	interFontLocation?: string;
-}
-
-export const fontsPreflight = ({
-	interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
-}: FontsPreflightOptions = {}) =>
-	preflight({
-		getCSS: () => `
-		@font-face {
-			font-family: "Inter";
-			src: url("${interFontLocation}") format("truetype-variations");
-			font-weight: 1 999;
-			font-style: oblique 0deg 5deg;
-			font-display: block;
-		}
-	`,
-	});

package/src/uno/preflights/globals.ts

@@ -1,75 +0,0 @@
-import { PROPS } from '../logic/properties.js';
-import { preflight } from './_util.js';
-
-export interface GlobalsPreflightConfig {
-	disableZIndexes?: boolean;
-	rootSelector?: string;
-}
-
-export const globalPreflight = ({
-	disableZIndexes,
-	rootSelector = '#root, #main, #app, #storybook-root',
-}: GlobalsPreflightConfig) =>
-	preflight({
-		getCSS: () => `
-:root {
-	${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;
-	${
-		disableZIndexes
-			? ''
-			: `
-	--z-menu: 100;
-	--z-backdrop: 900;
-	--z-dialog: 1000;
-	--z-tooltip: 10000;
-	--z-overdraw: 100000;
-	`
-	}
-
-	${PROPS.BUILT_IN.SHADOW_COLOR}: #000000;
-	${PROPS.BUILT_IN.SHADOW_OPACITY}: 10%;
-
-	${PROPS.UTILS.ARROW_SIZE}: 1rem;
-}
-
-@layer preflightBase {
-	html, body {
-		margin: 0;
-		padding: 0;
-		font-family: var(${PROPS.USER.FONTS.DEFAULT}, sans-serif);
-		font-size: 16px;
-		min-height: 100%;
-		--webkit-font-smoothing: antialiased;
-	}
-
-	body {
-		overflow: overlay;
-	}
-
-	${rootSelector} {
-		isolation: isolate;
-		display: flex;
-		flex-direction: column;
-		min-height: 100dvh;
-	}
-
-	a {
-		color: inherit;
-		text-decoration: none;
-	}
-
-	* {
-		box-sizing: border-box;
-		-webkit-tap-highlight-color: transparent;
-		border-style: solid;
-		border-width: 0;
-	}
-}
-`,
-	});

package/src/uno/preflights/index.ts

@@ -1,26 +0,0 @@
-import { Preflight } from 'unocss';
-import { basePreflight } from './base.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 type PreflightConfig = FontsPreflightOptions &
-	GlobalsPreflightConfig &
-	UserPreflightOptions &
-	ColorPreflightOptions;
-
-export const preflights = (config: PreflightConfig): Preflight<any>[] => [
-	layerPreflight,
-	basePreflight,
-	globalPreflight(config),
-	colorPreflight(config),
-	modePreflight(config),
-	fontsPreflight(config),
-	propertiesPreflight,
-	userPreflight(config),
-	// keyboardPreflight(config),
-];

package/src/uno/preflights/layers.ts

@@ -1,7 +0,0 @@
-import { Preflight } from 'unocss';
-import { preflight } from './_util.js';
-
-export const layerPreflight: Preflight = preflight({
-	getCSS: () =>
-		`@layer preflightBase, preflightVariant, primitives, components, composed, composed-2, responsive, variants, utilities, user;`,
-});

package/src/uno/preflights/mode.ts

@@ -1,60 +0,0 @@
-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});
-
-${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});
-
-${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

@@ -1,21 +0,0 @@
-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: "*";
-	initial-value: 1;
-	inherits: false;
-}
-@property ${PROPS.UTILS.SHADOW_Y_MULT} {
-	syntax: "*";
-	initial-value: 1;
-	inherits: false;
-}
-`;
-	},
-});

package/src/uno/preflights/user.ts

@@ -1,81 +0,0 @@
-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;
-	focusColor?: 'black' | 'primary' | 'accent' | 'gray';
-}
-
-export const userPreflight = ({
-	saturation = 0.5,
-	primaryHue = defaultPresetHues.lemon.sourceHue,
-	accentHue = defaultPresetHues.leek.sourceHue,
-	spacingScale = 1,
-	borderScale = 1,
-	cornerScale = 1,
-	shadowSpread = 1,
-	namedHues,
-	fontSize = 16,
-	focusColor = 'accent',
-}: UserPreflightOptions) =>
-	preflight({
-		getCSS: () => {
-			const sat = saturation > 1 ? saturation / 100 : saturation;
-			return `
-@layer preflightBase {
-	:root {
-		${PROPS.USER.SATURATION}: ${sat};
-		${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};
-		${PROPS.USER.FOCUS_COLOR}: var(${focusColors[focusColor]});
-		${
-			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;
-	}
-}
-`;
-		},
-	});
-
-const focusColors: Record<
-	NonNullable<UserPreflightOptions['focusColor']>,
-	string
-> = {
-	black: PROPS.MODE.BLACK,
-	primary: PROPS.PALETTE.NAMED_SHADES('primary').DARK,
-	accent: PROPS.PALETTE.NAMED_SHADES('accent').MID,
-	gray: PROPS.PALETTE.GRAY_SHADES.DARK,
-};

package/src/uno/rules/anchor.ts

@@ -1,22 +0,0 @@
-import { Rule } from 'unocss';
-
-export const anchorRules: Rule[] = [
-	[
-		/^anchor-(\w+)$/,
-		(match) => ({
-			'anchor-name': `--${match[1]}`,
-		}),
-		{
-			autocomplete: 'anchor-<name>',
-		},
-	],
-	[
-		/^anchor-to-(\w+)$/,
-		(match) => ({
-			'position-anchor': `--${match[1]}`,
-		}),
-		{
-			autocomplete: 'anchor-to-<name>',
-		},
-	],
-];