@a-type/ui 3.0.12 → 3.0.14

package/src/uno/logic/palettes.ts

@@ -0,0 +1,266 @@
+import {
+	livePropertyColorContext,
+	oklchBuilder,
+	OklchColorEquation,
+} from './color.js';
+
+export const paletteHues = {
+	primary: 'var(--p-primary-hue,91.8)',
+	accent: 'var(--p-accent-hue,160.88)',
+	main: 'var(--l-main-hue,var(--p-primary-hue,91.8))',
+
+	attention: 'var(--p-attention-hue,30)',
+	success: 'var(--p-success-hue,140)',
+
+	lemon: 'var(--p-lemon-hue,90.8)',
+	leek: 'var(--p-leek-hue,165.88)',
+	tomato: 'var(--p-tomato-hue,10.51)',
+	blueberry: 'var(--p-blueberry-hue,248.14)',
+	eggplant: 'var(--p-eggplant-hue,280.21)',
+};
+
+export const paletteNames = [
+	'primary',
+	'accent',
+	'attention',
+	'success',
+	'lemon',
+	'leek',
+	'tomato',
+	'blueberry',
+	'eggplant',
+	'gray',
+	'high-contrast',
+] as const;
+export type PaletteName = (typeof paletteNames)[number];
+
+export interface ColorLogicalPaletteDefinitions {
+	wash: OklchColorEquation;
+	light: OklchColorEquation;
+	default: OklchColorEquation;
+	dark: OklchColorEquation;
+	ink: OklchColorEquation;
+}
+export interface ColorPaletteStyles {
+	wash: string;
+	light: string;
+	DEFAULT: string;
+	dark: string;
+	ink: string;
+	[key: string]: string;
+}
+
+export interface ColorLogicalPalette {
+	sourceHue: string;
+	saturation?: string;
+	definitions: ColorLogicalPaletteDefinitions;
+	styles: ColorPaletteStyles;
+}
+
+export function createColorLogicalPalette({
+	sourceHue,
+	saturation,
+}: {
+	sourceHue: string;
+	saturation?: string;
+}): ColorLogicalPalette {
+	const definitions = {
+		wash: oklchBuilder(($) => ({
+			l: $.clamp(
+				$.add(
+					$.literal((ctx) => ctx.mode.lNeutral),
+					$.multiply(
+						$.literal((ctx) => ctx.mode.lRangeUp),
+						$.literal((ctx) => ctx.mode.mult),
+						$.literal((ctx) => ctx.localLightnessSpread),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			c: $.clamp(
+				$.multiply(
+					$.literal(() => saturation ?? '1'),
+					$.literal((ctx) => ctx.localSaturation),
+					$.literal((ctx) => ctx.globalSaturation),
+					$.add(
+						$.literal((ctx) => ctx.mode.sNeutral),
+						$.multiply(
+							$.literal((ctx) => ctx.mode.sRangeUp),
+							$.literal((ctx) => ctx.mode.mult),
+						),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			h: $.literal((ctx) => ctx.sourceHue),
+		})),
+		light: oklchBuilder(($) => ({
+			l: $.clamp(
+				$.add(
+					$.literal((ctx) => ctx.mode.lNeutral),
+					$.multiply(
+						$.literal((ctx) => ctx.mode.lRangeUp),
+						$.literal(() => '0.5'),
+						$.literal((ctx) => ctx.mode.mult),
+						$.literal((ctx) => ctx.localLightnessSpread),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			c: $.clamp(
+				$.multiply(
+					$.literal(() => saturation ?? '1'),
+					$.literal((ctx) => ctx.localSaturation),
+					$.literal((ctx) => ctx.globalSaturation),
+					$.add(
+						$.literal((ctx) => ctx.mode.sNeutral),
+						$.multiply(
+							$.literal((ctx) => ctx.mode.sRangeUp),
+							$.literal(() => '0.75'),
+							$.literal((ctx) => ctx.mode.mult),
+						),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			h: $.literal((ctx) => ctx.sourceHue),
+		})),
+		default: oklchBuilder(($) => ({
+			l: $.literal((ctx) => ctx.mode.lNeutral),
+			c: $.clamp(
+				$.multiply(
+					$.literal(() => saturation ?? '1'),
+					$.literal((ctx) => ctx.localSaturation),
+					$.literal((ctx) => ctx.globalSaturation),
+					$.literal((ctx) => ctx.mode.sNeutral),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			h: $.literal((ctx) => ctx.sourceHue),
+		})),
+		dark: oklchBuilder(($) => ({
+			l: $.clamp(
+				$.subtract(
+					$.literal((ctx) => ctx.mode.lNeutral),
+					$.multiply(
+						$.literal((ctx) => ctx.mode.lRangeDown),
+						$.literal(() => '0.35'),
+						$.literal((ctx) => ctx.mode.mult),
+						$.literal((ctx) => ctx.localLightnessSpread),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			c: $.clamp(
+				$.multiply(
+					$.literal(() => saturation ?? '1'),
+					$.literal((ctx) => ctx.localSaturation),
+					$.literal((ctx) => ctx.globalSaturation),
+					$.subtract(
+						$.literal((ctx) => ctx.mode.sNeutral),
+						$.multiply(
+							$.literal((ctx) => ctx.mode.sRangeDown),
+							$.literal(() => '0.5'),
+							$.literal((ctx) => ctx.mode.mult),
+						),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			h: $.literal((ctx) => ctx.sourceHue),
+		})),
+		ink: oklchBuilder(($) => ({
+			l: $.clamp(
+				$.subtract(
+					$.literal((ctx) => ctx.mode.lNeutral),
+					$.multiply(
+						$.literal((ctx) => ctx.mode.lRangeDown),
+						$.literal(() => '1'),
+						$.literal((ctx) => ctx.mode.mult),
+						$.literal((ctx) => ctx.localLightnessSpread),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			c: $.clamp(
+				$.multiply(
+					$.literal(() => saturation ?? '1'),
+					$.literal((ctx) => ctx.localSaturation),
+					$.literal((ctx) => ctx.globalSaturation),
+					$.subtract(
+						$.literal((ctx) => ctx.mode.sNeutral),
+						$.multiply(
+							$.literal((ctx) => ctx.mode.sRangeDown),
+							$.literal(() => '1'),
+							$.literal((ctx) => ctx.mode.mult),
+						),
+					),
+				),
+				$.literal(() => '0%'),
+				$.literal(() => '100%'),
+			),
+			h: $.literal((ctx) => ctx.sourceHue),
+		})),
+	};
+	return {
+		sourceHue,
+		saturation,
+		definitions,
+		styles: createPaletteStyles(sourceHue, definitions),
+	};
+}
+
+export interface ColorPaletteStyles {
+	wash: string;
+	light: string;
+	DEFAULT: string;
+	dark: string;
+	ink: string;
+}
+
+function createPaletteStyles(
+	sourceHue: string,
+	definitions: ColorLogicalPaletteDefinitions,
+): ColorPaletteStyles {
+	const ctx = livePropertyColorContext(sourceHue);
+	return {
+		wash: definitions.wash.print(ctx),
+		light: definitions.light.print(ctx),
+		DEFAULT: definitions.default.print(ctx),
+		dark: definitions.dark.print(ctx),
+		ink: definitions.ink.print(ctx),
+	};
+}
+
+export const graySaturation = '0.15';
+export const highContrastSaturation = '0.04';
+
+export const palettes = {
+	main: createColorLogicalPalette({ sourceHue: paletteHues.main }),
+	primary: createColorLogicalPalette({ sourceHue: paletteHues.primary }),
+	accent: createColorLogicalPalette({ sourceHue: paletteHues.accent }),
+	attention: createColorLogicalPalette({ sourceHue: paletteHues.attention }),
+	success: createColorLogicalPalette({ sourceHue: paletteHues.success }),
+	gray: createColorLogicalPalette({
+		sourceHue: paletteHues.main,
+		saturation: graySaturation,
+	}),
+	['high-contrast']: createColorLogicalPalette({
+		sourceHue: paletteHues.main,
+		saturation: highContrastSaturation,
+	}),
+
+	lemon: createColorLogicalPalette({ sourceHue: paletteHues.lemon }),
+	leek: createColorLogicalPalette({ sourceHue: paletteHues.leek }),
+	tomato: createColorLogicalPalette({ sourceHue: paletteHues.tomato }),
+	blueberry: createColorLogicalPalette({ sourceHue: paletteHues.blueberry }),
+	eggplant: createColorLogicalPalette({ sourceHue: paletteHues.eggplant }),
+};

package/src/uno/preflights/colors.ts

@@ -1,10 +1,15 @@
-import { paletteNames, whiteBlackRange } from '../logic/color.js';
+import {
+	graySaturation,
+	highContrastSaturation,
+	paletteNames,
+	palettes,
+} from '../logic/palettes.js';
 import { preflight } from './_util.js';
 
 const baseThemeCSS = `
---v-color: ${whiteBlackRange.ink};
+--v-color: ${palettes['high-contrast'].styles.ink};
 color: var(--v-color);
---v-bg: ${whiteBlackRange.wash};
+--v-bg: ${palettes['high-contrast'].styles.wash};
 background-color: var(--v-bg);
 `;
 
@@ -21,14 +26,7 @@ export const colorPreflight = preflight({
 	--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 {
+.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);
@@ -36,14 +34,7 @@ export const colorPreflight = preflight({
 	${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 {
+.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);
@@ -51,48 +42,38 @@ export const colorPreflight = preflight({
 	${baseThemeCSS}
 }
 
-.theme-tomato {
+.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}
 }
-.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 {
+.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-override-blueberry.theme-override-blueberry {
-	--p-primary-hue: var(--p-blueberry-hue);
+
+.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-eggplant {
-	--p-primary-hue: var(--p-eggplant-hue);
-	--p-accent-hue: var(--p-leek-hue);
-	--l-main-hue: var(--p-primary-hue);
-
+.theme-gray, .theme-salt, .theme-override-gray.theme-override-gray {
+	--l-saturation: ${graySaturation};
 	${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);
 
+.theme-high-contrast, .theme-override-high-contrast.theme-override-high-contrast {
+	--l-saturation: ${highContrastSaturation};
+	--l-lightness-spread: 10;
 	${baseThemeCSS}
 }
 
@@ -101,10 +82,10 @@ ${paletteNames
 	.map(createPaletteClass)
 	.join('\n')}
 .palette-gray {
-	--l-saturation: calc(0.3 * var(--global-saturation, 0));
+	--l-saturation: ${graySaturation};
 }
 .palette-high-contrast {
-	--l-saturation: 0;
+	--l-saturation: ${highContrastSaturation};
 	--l-lightness-spread: 10;
 }
 

package/src/uno/preflights/fonts.ts

@@ -0,0 +1,23 @@
+import { preflight } from './_util.js';
+
+export interface FontsPreflightOptions {
+	interFontLocation: string;
+}
+
+export const fontsPreflight = (
+	{ interFontLocation }: FontsPreflightOptions = {
+		interFontLocation:
+			'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
+	},
+) =>
+	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/index.ts

@@ -6,11 +6,12 @@ import {
 	ThemeCustomizationConfig,
 } from './customization.js';
 import { darkModePreflight } from './dark.js';
+import { fontsPreflight, FontsPreflightOptions } from './fonts.js';
 import { globalPreflight } from './globals.js';
 import { layerPreflight } from './layers.js';
 
 export const preflights = (
-	config: ThemeCustomizationConfig,
+	config: ThemeCustomizationConfig & FontsPreflightOptions,
 ): Preflight<any>[] => [
 	layerPreflight,
 	basePreflight,
@@ -18,4 +19,5 @@ export const preflights = (
 	colorPreflight,
 	darkModePreflight,
 	customizationPreflight(config),
+	fontsPreflight(config),
 ];

package/src/uno/theme/colors.ts

@@ -1,8 +1,5 @@
-import {
-	createColorRange,
-	paletteHues,
-	whiteBlackRange,
-} from '../logic/color.js';
+import { Theme } from '@unocss/preset-mini';
+import { palettes } from '../logic/palettes.js';
 
 const contrastClamp = 'clamp(0, (0.36 / y - 1) * infinity, 1)';
 
@@ -11,25 +8,23 @@ export const colors = {
 	transparent: 'transparent',
 	current: 'currentColor',
 
-	black: whiteBlackRange.ink,
-	white: whiteBlackRange.wash,
-	wash: createColorRange(paletteHues.primary, {
-		saturation: '3%',
-	}).wash,
-	contrast: `color(from var(--l-contrast-bg,var(--v-bg-altered,var(--v-bg,var(--mode-white)))) xyz-d65 ${contrastClamp} ${contrastClamp} ${contrastClamp})`,
+	black: palettes['high-contrast'].styles.ink,
+	white: palettes['high-contrast'].styles.wash,
+	wash: palettes.gray.styles.wash,
 
 	// magic tokens
+	contrast: `color(from var(--l-contrast-bg,var(--v-bg-altered,var(--v-bg,var(--mode-white)))) xyz-d65 ${contrastClamp} ${contrastClamp} ${contrastClamp})`,
 	bg: 'var(--v-bg-altered, var(--v-bg, transparent))',
 	fg: 'var(--v-color-altered, var(--v-color, var(--mode-black)))',
 	color: 'var(--v-color-altered, var(--v-color, var(--mode-black)))',
 	border: 'var(--v-border-altered, var(--v-border, transparent))',
 
-	primary: createColorRange(paletteHues.primary),
-	accent: createColorRange(paletteHues.accent),
-	attention: createColorRange(paletteHues.attention),
-	success: createColorRange(paletteHues.success),
+	primary: palettes.primary.styles,
+	accent: palettes.accent.styles,
+	attention: palettes.attention.styles,
+	success: palettes.success.styles,
 
-	main: createColorRange(paletteHues.main),
+	main: palettes.main.styles,
 
-	gray: createColorRange(paletteHues.primary, { saturation: '5%' }),
-} as const;
+	gray: palettes.gray.styles,
+} satisfies Record<string, string | Theme['colors']>;

package/src/uno/uno.preset.ts

@@ -1,6 +1,7 @@
 import presetWind3 from '@unocss/preset-wind3';
 import { Preset } from 'unocss';
 import { ThemeCustomizationConfig } from './preflights/customization.js';
+import { FontsPreflightOptions } from './preflights/fonts.js';
 import { preflights } from './preflights/index.js';
 import { rules } from './rules/index.js';
 import { shortcuts } from './shortcuts/index.js';
@@ -8,9 +9,13 @@ import { theme } from './theme/index.js';
 import { variants } from './variants/index.js';
 
 export default function presetAtype(
-	config: ThemeCustomizationConfig & {
-		noPreflight?: boolean;
-	} = {},
+	config: ThemeCustomizationConfig &
+		FontsPreflightOptions & {
+			noPreflight?: boolean;
+		} = {
+		interFontLocation:
+			'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
+	},
 ): Preset {
 	return {
 		name: 'atype',