@a-type/ui 2.8.13 → 3.0.0

package/src/uno/preflights/colors.ts

@@ -0,0 +1,165 @@
+import { paletteNames, whiteBlackRange } from '../logic/color.js';
+import { preflight } from './_util.js';
+
+const baseThemeCSS = `
+--v-color: ${whiteBlackRange.ink};
+color: var(--v-color);
+--v-bg: ${whiteBlackRange.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 {
+	--p-primary-hue: var(--p-lemon-hue);
+	--p-accent-hue: var(--p-leek-hue);
+	--l-main-hue: var(--p-primary-hue);
+
+	${baseThemeCSS}
+}
+.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 {
+	--p-primary-hue: var(--p-leek-hue);
+	--p-accent-hue: var(--p-lemon-hue);
+	--l-main-hue: var(--p-primary-hue);
+
+	${baseThemeCSS}
+}
+.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 {
+	--p-primary-hue: var(--p-tomato-hue);
+	--p-accent-hue: var(--p-leek-hue);
+	--l-main-hue: var(--p-primary-hue);
+
+	${baseThemeCSS}
+}
+.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}
+}
+
+.theme-blueberry {
+	--p-primary-hue: var(--p-blueberry-hue);
+	--p-accent-hue: var(--p-leek-hue);
+	--l-main-hue: var(--p-primary-hue);
+
+	${baseThemeCSS}
+}
+.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 {
+	--p-primary-hue: var(--p-eggplant-hue);
+	--p-accent-hue: var(--p-leek-hue);
+	--l-main-hue: var(--p-primary-hue);
+
+	${baseThemeCSS}
+}
+.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}
+}
+
+${paletteNames
+	.filter((n) => n !== 'gray' && n !== 'high-contrast')
+	.map(createPaletteClass)
+	.join('\n')}
+.palette-gray {
+	--l-saturation: calc(0.3 * var(--global-saturation, 0));
+}
+.palette-high-contrast {
+	--l-saturation: 0;
+	--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;
+}
+
+@property --v-bg-opacity {
+	syntax: "<percentage>";
+	inherits: false;
+}
+
+@property --v-color-opacity {
+	syntax: "<percentage>";
+	inherits: false;
+}
+
+@property --v-border-opacity {
+	syntax: "<percentage>";
+	inherits: false;
+}
+
+@property --v-ring-opacity {
+	syntax: "<percentage>";
+	inherits: false;
+}
+`,
+});
+
+function createPaletteClass(sourceName: string) {
+	return `
+.palette-${sourceName} {
+	--l-main-hue: var(--p-${sourceName === 'gray' ? 'primary' : sourceName}-hue);
+	--l-saturation: 1;
+}
+`;
+}

package/src/uno/preflights/customization.ts

@@ -0,0 +1,44 @@
+import { preflight } from './_util.js';
+
+export interface ThemeCustomizationConfig {
+	primaryHue?: number;
+	accentHue?: number;
+	saturation?: number;
+	scale?: number;
+	borderScale?: number;
+	cornerScale?: number;
+	hardShadows?: boolean;
+}
+
+export const customizationPreflight = ({
+	saturation = 50,
+	primaryHue = 90.8,
+	accentHue = 165.88,
+	scale = 1,
+	borderScale = 1,
+	cornerScale = 1,
+	hardShadows = false,
+}: ThemeCustomizationConfig) =>
+	preflight({
+		getCSS: () => {
+			return `
+@layer preflightBase {
+	:root {
+		--global-saturation: ${saturation}%;
+		--global-corner-scale: ${cornerScale};
+		--global-spacing-scale: ${scale};
+		--global-border-scale: ${borderScale};
+		--global-shadow-spread: ${hardShadows ? 0 : 1};
+
+		--p-primary-hue: ${primaryHue};
+		--p-accent-hue: ${accentHue};
+	}
+}
+
+@property --local-corner-scale {
+	syntax: "*";
+	inherits: false;
+}
+`;
+		},
+	});

package/src/uno/preflights/dark.ts

@@ -0,0 +1,47 @@
+import { preflight } from './_util.js';
+
+const lightModeCSS = `
+--mode-mult: 1;
+--mode-l-neutral: 90%;
+--mode-l-range-up: 10%;
+--mode-l-range-down: 70%;
+--mode-s-neutral: 75%;
+--mode-s-range-up: -55%;
+--mode-s-range-down: 20%;
+--mode-white: #ffffff;
+`;
+
+const darkModeCSS = `
+--mode-mult: -1;
+--mode-l-neutral: 60%;
+--mode-l-range-up: 38%;
+--mode-l-range-down: 70%;
+--mode-s-neutral: 80%;
+--mode-s-range-up: 40%;
+--mode-s-range-down: -30%;
+--mode-white: #000000;
+`;
+
+export const darkModePreflight = preflight({
+	getCSS: () => `
+@layer preflightBase {
+	html {
+		${lightModeCSS}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		html {
+			${darkModeCSS}
+		}
+	}
+}
+
+@layer preflightVariants {
+	.override-light {
+		${lightModeCSS}
+	}
+	.override-dark {
+		${darkModeCSS}
+	}
+}`,
+});

package/src/uno/preflights/globals.ts

@@ -0,0 +1,55 @@
+import { Preflight } from 'unocss';
+import { preflight } from './_util.js';
+
+export const globalPreflight: Preflight = preflight({
+	getCSS: () => `
+:root {
+	--font-sans: "Inter", sans-serif;
+	--font-serif: "Domine", serif;
+	--font-title: "Inter", sans-serif;
+	--font-default: var(--font-sans, sans-serif);
+
+	--z-nowPlaying: 40;
+	--z-nav: 50;
+	--z-menu: 100;
+	--z-menuTrigger: 101;
+	--z-backdrop: 900;
+	--z-dialog: 1000;
+	--z-tooltip: 10000;
+	--z-overdraw: 100000;
+
+	--un-shadow-color: #000000;
+	--un-shadow-opacity: 10%;
+
+	--arrow-size: 1rem;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	font-family: var(--font-default);
+	font-size: 16px;
+	min-height: 100%;
+	--webkit-font-smoothing: antialiased;
+}
+
+body {
+	overflow: overlay;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+* {
+	box-sizing: border-box;
+	-webkit-tap-highlight-color: transparent;
+}
+
+@property --v-shadow-y-mult {
+	syntax: "*";
+	inherits: false;
+}
+`,
+});

package/src/uno/preflights/index.ts

@@ -0,0 +1,21 @@
+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 { globalPreflight } from './globals.js';
+import { layerPreflight } from './layers.js';
+
+export const preflights = (
+	config: ThemeCustomizationConfig,
+): Preflight<any>[] => [
+	layerPreflight,
+	basePreflight,
+	globalPreflight,
+	colorPreflight,
+	darkModePreflight,
+	customizationPreflight(config),
+];

package/src/uno/preflights/layers.ts

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

package/src/uno/rules/anchor.ts

@@ -0,0 +1,22 @@
+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>',
+		},
+	],
+];

package/src/uno/rules/color.ts

@@ -0,0 +1,153 @@
+import { parseColor } from '@unocss/preset-mini';
+import { Rule } from 'unocss';
+import { darken, lighten } from '../logic/color.js';
+
+export const colorRules: Rule[] = [
+	[
+		/^color-(.*)$/,
+		(match, { theme }) => {
+			if (match[1] === 'inherit') {
+				return {
+					color: 'var(--v-color-altered,var(--v-color))',
+					'--v-color': 'unset',
+				};
+			}
+			const parsed = parseColor(match[1], theme);
+			if (!parsed?.color) {
+				return undefined;
+			}
+			return {
+				color: parsed.opacity
+					? 'rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%))'
+					: 'var(--v-color-altered,var(--v-color))',
+				'--v-color': parsed.color,
+				'--v-color-opacity': (parsed.opacity || 100) + '%',
+			};
+		},
+	],
+	[
+		/^color-lighten-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-color-altered': lighten('var(--v-color,currentColor)', match[1]),
+		}),
+	],
+	[
+		/^color-darken-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-color-altered': darken('var(--v-color,currentColor)', match[1]),
+		}),
+	],
+	[
+		/^bg-(.*)$/,
+		(match, ctx) => {
+			const { theme } = ctx;
+			if (match[1] === 'inherit') {
+				return {
+					'background-color':
+						'rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%))',
+					'--v-bg': 'unset',
+				};
+			}
+			if (match[1] === 'transparent') {
+				return {
+					'background-color': 'transparent',
+					'--v-bg': 'unset',
+				};
+			}
+			const parsed = parseColor(match[1], theme);
+			if (!parsed?.color) {
+				return undefined;
+			}
+
+			const base = {
+				'background-color': parsed.opacity
+					? 'rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%))'
+					: 'var(--v-bg-altered,var(--v-bg))',
+				['--v-bg']: parsed.color,
+				['--v-bg-opacity']: (parsed.opacity || 100) + '%',
+			};
+
+			return base;
+		},
+		{
+			autocomplete: `bg-$colors`,
+		},
+	],
+	[
+		/^bg-lighten-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-bg-altered': lighten('var(--v-bg,var(--color-white))', match[1]),
+		}),
+	],
+	[
+		/^bg-darken-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-bg-altered': darken('var(--v-bg,var(--color-white))', match[1]),
+		}),
+	],
+	[
+		/^border-(.*)$/,
+		(match, { theme }) => {
+			if (match[1] === 'none') {
+				return undefined;
+			}
+			const parsed = parseColor(match[1], theme);
+			if (!parsed?.color) {
+				return undefined;
+			}
+			return {
+				'border-color': parsed.opacity
+					? 'rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))'
+					: 'var(--v-border-altered,var(--v-border))',
+				'--v-border': parsed.color,
+				'--v-border-opacity': (parsed.opacity || 100) + '%',
+			};
+		},
+	],
+	[
+		/^border-lighten-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-border-altered': lighten('var(--v-border,currentColor)', match[1]),
+		}),
+		{
+			autocomplete: 'border-lighten-<number>',
+		},
+	],
+	[
+		/^border-darken-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-border-altered': darken('var(--v-border,currentColor)', match[1]),
+		}),
+		{
+			autocomplete: 'border-darken-<number>',
+		},
+	],
+	[
+		/^ring-(.*)$/,
+		(match, { theme }) => {
+			const parsed = parseColor(match[1], theme);
+			if (!parsed?.color) {
+				return undefined;
+			}
+			return {
+				'--un-ring-color': parsed.opacity
+					? 'rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%))'
+					: 'var(--v-ring-altered,var(--v-ring))',
+				'--v-ring': parsed.color,
+				'--v-ring-opacity': (parsed.opacity || 100) + '%',
+			};
+		},
+	],
+	[
+		/^ring-lighten-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-ring-altered': lighten('var(--v-ring,currentColor)', match[1]),
+		}),
+	],
+	[
+		/^ring-darken-(\d+\.?\d*)$/,
+		(match, { theme }) => ({
+			'--v-ring-altered': darken('var(--v-ring,currentColor)', match[1]),
+		}),
+	],
+];

package/src/uno/rules/index.ts

@@ -0,0 +1,13 @@
+import { anchorRules } from './anchor.js';
+import { colorRules } from './color.js';
+import { overflowRules } from './overflow.js';
+import { shadowRules } from './shadow.js';
+import { utilRules } from './util.js';
+
+export const rules = [
+	...anchorRules,
+	...colorRules,
+	...overflowRules,
+	...shadowRules,
+	...utilRules,
+];

package/src/uno/rules/overflow.ts

@@ -0,0 +1,45 @@
+import { Rule } from 'unocss';
+
+export const overflowRules: Rule[] = [
+	[
+		'overflow-stable',
+		{
+			'scrollbar-gutter': 'stable',
+			'scrollbar-color':
+				'hsl(from var(--v-color-altered,var(--v-color,var(--color-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+		},
+	],
+	[
+		'overflow-auto',
+		{
+			overflow: 'auto',
+			'scrollbar-gutter': 'stable',
+			'scrollbar-color':
+				'hsl(from var(--v-color-altered,var(--v-color,var(--color-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+		},
+	],
+	[
+		'overflow-y-auto',
+		{
+			'overflow-y': 'auto',
+			'scrollbar-gutter': 'stable',
+			'scrollbar-color':
+				'hsl(from var(--v-color-altered,var(--v-color,var(--color-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+		},
+	],
+	[
+		'overflow-x-auto',
+		{
+			'overflow-x': 'auto',
+			'scrollbar-gutter': 'stable',
+			'scrollbar-color':
+				'hsl(from var(--v-color-altered,var(--v-color,var(--color-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+		},
+	],
+	[
+		'overflow-unstable',
+		{
+			'scrollbar-gutter': 'auto',
+		},
+	],
+];

package/src/uno/rules/shadow.ts

@@ -0,0 +1,16 @@
+import { Rule } from 'unocss';
+
+export const shadowRules: Rule[] = [
+	[
+		/^shadow-up$/,
+		() => ({
+			'--v-shadow-y-mult': '-1',
+		}),
+	],
+	[
+		/^shadow-down$/,
+		() => ({
+			'--v-shadow-y-mult': '1',
+		}),
+	],
+];

package/src/uno/rules/util.ts

@@ -0,0 +1,31 @@
+import { Rule } from 'unocss';
+
+export const utilRules: Rule[] = [
+	[
+		/^gutter-bottom$/,
+		(_, { theme }) => ({ 'margin-bottom': (theme as any).spacing[2] }),
+	],
+	[
+		/^arrow$/,
+		function* (_, ctx) {
+			yield {
+				fill: 'var(--v-bg-altered,var(--v-bg))',
+				stroke: 'var(--v-border-altered,var(--v-border))',
+				width: 'var(--arrow-size)',
+				height: 'calc(var(--arrow-size) * 0.5)',
+				position: 'relative',
+				'z-index': 0,
+			};
+			yield {
+				[ctx.symbols.selector]: (selector) => `span:has(${selector}):after`,
+				content: '""',
+				position: 'absolute',
+				top: '0',
+				left: '1.5px',
+				right: '1.5px',
+				height: '1px',
+				background: 'var(--v-bg-altered,var(--v-bg))',
+			};
+		},
+	],
+];

package/src/uno/shortcuts/index.ts

@@ -0,0 +1,21 @@
+import { PresetOptions } from 'unocss';
+
+export const shortcuts: PresetOptions['shortcuts'] = {
+	border: 'border-width-thin border-solid',
+	'border-default': 'border border-solid border-black',
+	'border-light': 'border border-solid border-gray border-darken-3',
+	'flex-1-0-0': 'flex-grow-1 flex-shrink-0 flex-basis-0',
+	'flex-0-0-auto': 'flex-grow-0 flex-shrink-0 flex-basis-auto',
+	row: 'layer-components:flex layer-components:flex-row layer-components:gap-sm layer-components:items-center',
+	col: 'layer-components:flex layer-components:flex-col layer-components:gap-sm layer-components:items-center',
+	'hidden-input':
+		'op-0 absolute z--1 pointer-events-none [&::webkit-file-upload-button]:hidden',
+	center: 'left-1/2 top-1/2 translate-x--1/2 translate-y--1/2',
+	'center-x': 'left-1/2 translate-x--1/2',
+	'center-y': 'top-1/2 translate-y--1/2',
+	'outline-off': '[outline:none]',
+	unset: '[all:unset]',
+	'bottom-keyboard':
+		'bottom-[var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))]',
+	body: 'min-h-screen bg-wash color-black',
+};