@vinicunca/unocss-preset 1.26.0 → 1.27.0

package/dist/{akar-SLlHrcnC.js → akar-B30zjk5t.js}

@@ -2,33 +2,25 @@ import { compressCSS } from "./utils-DZIu2j5I.js";
 import { isString } from "@vinicunca/perkakas";
 import { theme } from "unocss/preset-wind4";
 
-//#region src/presets/akar/akar.brand-preflights.ts
+//#region src/presets/akar/akar.brand-css-variables.ts
 function isHexColor(value) {
 	return /^#([A-F0-9]{6}|[A-F0-9]{3})$/i.test(value);
 }
-function getBrandPreflight(options) {
+function getAkarPreflight(options) {
 	return {
 		layer: "theme",
 		getCSS: () => {
 			const brands = options.brands ?? {};
 			const lightVars = [];
 			const darkVars = [];
-			Object.entries(brands).forEach(([brandName, value]) => {
-				let lightBrand, darkBrand;
-				/**
-				* If the value is a hex color, use it directly.
-				*/
-				if (isString(value) && isHexColor(value)) {
-					lightBrand = value;
-					darkBrand = value;
-				} else {
-					const colorValue = theme.colors[value];
-					lightBrand = colorValue?.[500];
-					darkBrand = colorValue?.[400];
-				}
-				lightVars.push(`--akar-brand-${brandName}: ${lightBrand};`);
-				darkVars.push(`--akar-brand-${brandName}: ${darkBrand};`);
+			addBrandsVariables({
+				brands,
+				lightVars,
+				darkVars
 			});
+			const { lightVars: pohonLightVars, darkVars: pohonDarkVars } = addPohonNeutralVariables(options);
+			lightVars.push(...pohonLightVars);
+			darkVars.push(...pohonDarkVars);
 			return compressCSS(`
         :root {
           ${lightVars.join("\n  ")}
@@ -41,6 +33,67 @@ function getBrandPreflight(options) {
 		}
 	};
 }
+function addBrandsVariables({ brands = {}, lightVars, darkVars }) {
+	Object.entries(brands).forEach(([brandName, value]) => {
+		let lightBrand, darkBrand;
+		/**
+		* If the value is a hex color, use it directly.
+		*/
+		if (isString(value) && isHexColor(value)) {
+			lightBrand = value;
+			darkBrand = value;
+		} else {
+			const colorValue = theme.colors[value];
+			lightBrand = colorValue?.[500];
+			darkBrand = colorValue?.[400];
+		}
+		lightVars.push(`--akar-brand-${brandName}: ${lightBrand};`);
+		darkVars.push(`--akar-brand-${brandName}: ${darkBrand};`);
+	});
+}
+function addPohonNeutralVariables(options) {
+	if (!Boolean(options.pohonThemes)) return {
+		lightVars: [],
+		darkVars: []
+	};
+	const brandColor = options.brands?.neutral;
+	const neutralColor = theme.colors[brandColor ?? "slate"];
+	return {
+		lightVars: [
+			`--pohon-text-muted: ${neutralColor[500]}`,
+			`--pohon-text-toned: ${neutralColor[600]}`,
+			`--pohon-text: ${neutralColor[700]}`,
+			`--pohon-text-highlighted: ${neutralColor[900]}`,
+			`--pohon-text-inverted: ${neutralColor[100]}`,
+			`--pohon-bg: ${neutralColor[100]}`,
+			`--pohon-bg-muted: ${neutralColor[50]}`,
+			`--pohon-bg-elevated: ${neutralColor[100]}`,
+			`--pohon-bg-accented: ${neutralColor[200]}`,
+			`--pohon-bg-inverted: ${neutralColor[900]}`,
+			`--pohon-border: ${neutralColor[200]}`,
+			`--pohon-border-muted: ${neutralColor[200]}`,
+			`--pohon-border-accented: ${neutralColor[300]}`,
+			`--pohon-border-inverted: ${neutralColor[900]}`
+		],
+		darkVars: [
+			`--pohon-text-dimmed: ${neutralColor[500]}`,
+			`--pohon-text-muted: ${neutralColor[400]}`,
+			`--pohon-text-toned: ${neutralColor[300]}`,
+			`--pohon-text: ${neutralColor[200]}`,
+			`--pohon-text-highlighted: ${neutralColor[100]}`,
+			`--pohon-text-inverted: ${neutralColor[900]}`,
+			`--pohon-bg: ${neutralColor[900]}`,
+			`--pohon-bg-muted: ${neutralColor[800]}`,
+			`--pohon-bg-elevated: ${neutralColor[800]}`,
+			`--pohon-bg-accented: ${neutralColor[700]}`,
+			`--pohon-bg-inverted: ${neutralColor[100]}`,
+			`--pohon-border: ${neutralColor[800]}`,
+			`--pohon-border-muted: ${neutralColor[700]}`,
+			`--pohon-border-accented: ${neutralColor[700]}`,
+			`--pohon-border-inverted: ${neutralColor[100]}`
+		]
+	};
+}
 
 //#endregion
 //#region src/presets/akar/akar.drawer-preflights.ts
@@ -234,9 +287,72 @@ const drawerPreflight = {
 //#endregion
 //#region src/presets/akar/index.ts
 function presetAkar(options) {
+	const preflights = [getAkarPreflight(options)];
+	if (options.enableDrawer) preflights.push(drawerPreflight);
 	return {
 		name: "unocss-preset-akar",
-		preflights: [drawerPreflight, getBrandPreflight(options)]
+		preflights,
+		theme: { colors: { ...resolveTheme(options.pohonThemes) } }
+	};
+}
+function resolveTheme(pohon) {
+	if (!Boolean(pohon)) return {};
+	return {
+		text: {
+			dimmed: "var(--pohon-text-dimmed)",
+			muted: "var(--pohon-text-muted)",
+			toned: "var(--pohon-text-toned)",
+			DEFAULT: "var(--pohon-text)",
+			highlighted: "var(--pohon-text-highlighted)",
+			inverted: "var(--pohon-text-inverted)"
+		},
+		background: {
+			DEFAULT: "var(--pohon-bg)",
+			muted: "var(--pohon-bg-muted)",
+			elevated: "var(--pohon-bg-elevated)",
+			accented: "var(--pohon-bg-accented)",
+			inverted: "var(--pohon-bg-inverted)",
+			border: "var(--pohon-border)"
+		},
+		border: {
+			DEFAULT: "var(--pohon-border)",
+			muted: "var(--pohon-border-muted)",
+			accented: "var(--pohon-border-accented)",
+			inverted: "var(--pohon-border-inverted)",
+			bg: "var(--pohon-bg)"
+		},
+		ring: {
+			DEFAULT: "var(--pohon-border)",
+			muted: "var(--pohon-border-muted)",
+			accented: "var(--pohon-border-accented)",
+			inverted: "var(--pohon-border-inverted)",
+			bg: "var(--pohon-bg)",
+			offset: {
+				DEFAULT: "var(--pohon-border)",
+				muted: "var(--pohon-border-muted)",
+				accented: "var(--pohon-border-accented)",
+				inverted: "var(--pohon-border-inverted)",
+				bg: "var(--pohon-bg)"
+			}
+		},
+		divide: {
+			DEFAULT: "var(--pohon-border)",
+			muted: "var(--pohon-border-muted)",
+			accented: "var(--pohon-border-accented)",
+			inverted: "var(--pohon-border-inverted)"
+		},
+		outline: {
+			DEFAULT: "var(--pohon-border)",
+			inverted: "var(--pohon-border-inverted)"
+		},
+		stroke: {
+			DEFAULT: "var(--pohon-border)",
+			inverted: "var(--pohon-border-inverted)"
+		},
+		fill: {
+			DEFAULT: "var(--pohon-border)",
+			inverted: "var(--pohon-border-inverted)"
+		}
 	};
 }
 

package/dist/index.d.ts

@@ -157,6 +157,14 @@ interface VinicuncaAkarOptions {
   keyframes?: VinicuncaExtends['keyframes'];
   animation?: VinicuncaExtends['animation'];
   brands?: Theme$1['colors'];
+  enableDrawer?: boolean;
+  pohonThemes?: boolean | {
+    variables?: {
+      light?: Record<string, string>;
+      dark?: Record<string, string>;
+    };
+    themes?: Theme$1['colors'];
+  };
 }
 interface PreflightOptions {
   /**

package/dist/index.js

@@ -577,13 +577,97 @@ const DEFAULT_AKAR_OPTIONS = {
 		"collapsible-up": {
 			from: { height: "var(--akar-collapsible-content-height)" },
 			to: { height: 0 }
+		},
+		"toast-collapsed-closed": {
+			from: { transform: "var(--transform)" },
+			to: { transform: "translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale))" }
+		},
+		"toast-closed": {
+			from: { transform: "var(--transform)" },
+			to: { transform: "translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)))" }
+		},
+		"carousel": {
+			"0%, 100%": { width: "50%" },
+			"0%": { transform: "translateX(-100%)" },
+			"100%": { transform: "translateX(200%)" }
+		},
+		"carousel-rtl": {
+			"0%, 100%": { width: "50%" },
+			"0%": { transform: "translateX(100%)" },
+			"100%": { transform: "translateX(-200%)" }
+		},
+		"carousel-vertical": {
+			"0%, 100%": { height: "50%" },
+			"0%": { transform: "translateY(-100%)" },
+			"100%": { transform: "translateY(200%)" }
+		},
+		"carousel-inverse": {
+			"0%, 100%": { width: "50%" },
+			"0%": { transform: "translateX(200%)" },
+			"100%": { transform: "translateX(-100%)" }
+		},
+		"carousel-inverse-rtl": {
+			"0%, 100%": { width: "50%" },
+			"0%": { transform: "translateX(-200%)" },
+			"100%": { transform: "translateX(100%)" }
+		},
+		"carousel-inverse-vertical": {
+			"0%, 100%": { height: "50%" },
+			"0%": { transform: "translateY(200%)" },
+			"100%": { transform: "translateY(-100%)" }
+		},
+		"swing": {
+			"0%, 100%": {
+				width: "50%",
+				transform: "translateX(-25%)"
+			},
+			"50%": { transform: "translateX(125%)" }
+		},
+		"swing-vertical": {
+			"0%, 100%": {
+				height: "50%",
+				transform: "translateY(-25%)"
+			},
+			"50%": { transform: "translateY(125%)" }
+		},
+		"elastic": {
+			"0%, 100%": {
+				"width": "50%",
+				"margin-left": "25%"
+			},
+			"50%": {
+				"width": "90%",
+				"margin-left": "5%"
+			}
+		},
+		"elastic-vertical": {
+			"0%, 100%": {
+				"height": "50%",
+				"margin-top": "25%"
+			},
+			"50%": {
+				"height": "90%",
+				"margin-top": "5%"
+			}
 		}
 	},
 	animation: {
 		"collapsible-down": "collapsible-down 0.2s ease-in-out",
 		"collapsible-up": "collapsible-up 0.2s ease-in-out",
 		"accordion-down": "accordion-down 0.2s ease-out",
-		"accordion-up": "accordion-up 0.2s ease-out"
+		"accordion-up": "accordion-up 0.2s ease-out",
+		"toast-collapsed-closed": "toast-collapsed-closed 200ms ease-in-out",
+		"toast-closed": "toast-closed 200ms ease-in-out",
+		"carousel": "carousel 2s ease-in-out infinite",
+		"carousel-rtl": "carousel-rtl 2s ease-in-out infinite",
+		"carousel-vertical": "carousel-vertical 2s ease-in-out infinite",
+		"carousel-inverse": "carousel-inverse 2s ease-in-out infinite",
+		"carousel-inverse-rtl": "carousel-inverse-rtl 2s ease-in-out infinite",
+		"carousel-inverse-vertical": "carousel-inverse-vertical 2s ease-in-out infinite",
+		"swing": "swing 2s ease-in-out infinite",
+		"swing-vertical": "swing-vertical 2s ease-in-out infinite",
+		"elastic": "elastic 2s ease-in-out infinite",
+		"elastic-vertical": "elastic-vertical 2s ease-in-out infinite"
 	},
 	brands: {
 		primary: "violet",
@@ -593,7 +677,9 @@ const DEFAULT_AKAR_OPTIONS = {
 		warning: "yellow",
 		error: "red",
 		neutral: "slate"
-	}
+	},
+	pohonThemes: true,
+	enableDrawer: true
 };
 const DEFAULT_FLUID_OPTIONS = {
 	maxWidth: 1440,
@@ -670,7 +756,7 @@ async function resolvePresets(options) {
 		magicCss: import("./magic-css-BxO5zv5z.js").then((mod) => mod.presetMagicss),
 		animation: import("./animation-KZDlcVMl.js").then((mod) => mod.presetAnimation),
 		fluid: import("./fluid-Ne2qtSnB.js").then((mod) => mod.presetFluid),
-		akar: import("./akar-SLlHrcnC.js").then((mod) => mod.presetAkar)
+		akar: import("./akar-B30zjk5t.js").then((mod) => mod.presetAkar)
 	};
 	for (const [key, preset] of Object.entries(presetMap)) {
 		const option = options[key];
@@ -704,13 +790,19 @@ function resolveExtend(options) {
 	let { animation = {}, keyframes = {} } = options.theme.extend ?? {};
 	const safelist = [];
 	/**
-	* If akar is enabled we want to safelist all default animations
+	* If akar is enabled we want to safelist the drawer animations.
+	* The drawer preflight uses these animations but they are not
+	* directly referenced in the code so we need to safelist them
+	* to ensure they are included in the final CSS.
 	*/
-	if (Boolean(options.akar)) {
-		animation = mergeDeep(animation, DEFAULT_AKAR_OPTIONS.animation ?? {});
-		keyframes = mergeDeep(keyframes, DEFAULT_AKAR_OPTIONS.keyframes ?? {});
-		let akarAnimation = DEFAULT_AKAR_OPTIONS.animation ?? {};
-		let akarKeyframes = DEFAULT_AKAR_OPTIONS.keyframes ?? {};
+	const enableAkar = Boolean(options.akar);
+	let akarOptions = {};
+	if (enableAkar) akarOptions = defu(options.akar, DEFAULT_AKAR_OPTIONS);
+	if (enableAkar && akarOptions.enableDrawer) {
+		animation = mergeDeep(animation, akarOptions.animation ?? {});
+		keyframes = mergeDeep(keyframes, akarOptions.keyframes ?? {});
+		let akarAnimation = akarOptions.animation ?? {};
+		let akarKeyframes = akarOptions.keyframes ?? {};
 		if (isObjectType(options.akar)) {
 			akarAnimation = mergeDeep(akarAnimation, options.akar.animation ?? {});
 			akarKeyframes = mergeDeep(akarKeyframes, options.akar.keyframes ?? {});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vinicunca/unocss-preset",
   "type": "module",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Opinionated UnoCSS preset",
   "author": "praburangki<https://github.com/praburangki>",
   "license": "MIT",