vunor 0.1.4 → 0.1.6

package/dist/theme.d.mts

@@ -86,6 +86,11 @@ declare const themeFactory: (opts: Required<TVunorUnoPresetOpts> & {
     minWidth: Record<string, string>;
     minHeight: Record<string, string>;
     borderRadius: {
+      r0: string;
+      r1: string;
+      r2: string;
+      r3: string;
+      r4: string;
       base: string;
     };
     animation: {

package/dist/theme.mjs

@@ -11,7 +11,7 @@ const toastShortcuts = defineShortcuts({
 		"": [
 			"bg-current",
 			"p-$m",
-			"rounded-$m",
+			"rounded-r2",
 			"border",
 			"grid",
 			"[grid-template-areas:_'title_action'_'description_action']",
@@ -62,7 +62,7 @@ const calendarShortcuts = defineShortcuts({
 	"calendar-grid-row": "grid grid-cols-7 text-body-s",
 	"calendar-month-grid": "flex flex-col gap-$m sm:flex-row flex-wrap sm:gap-$m",
 	"calendar-cell": {
-		"": "c8-flat relative flex items-center justify-center lh-1em rounded whitespace-nowrap font-normal size-3em outline-none",
+		"": "c8-flat relative flex items-center justify-center lh-1em rounded-r0 whitespace-nowrap font-normal size-3em outline-none",
 		"focus-visible:": "shadow-[0_0_0_2px] shadow-black",
 		"data-[disabled]:": "opacity-30",
 		"data-[unavailable]:": "pointer-events-none opacity-50 line-through",
@@ -78,7 +78,7 @@ const calendarShortcuts = defineShortcuts({
 	"date-picker-root": "inline-block layer-0 shadow-popup animate-easy-zoom-in",
 	"date-picker-literal": "opacity-75 cursor-text",
 	"date-picker-input": {
-		"": "cursor-text rounded-md p-0.5 text-current",
+		"": "cursor-text rounded-r1 p-0.5 text-current",
 		"focus:": "outline-none current-text-hl underline animate-blinking animate-count-infinite",
 		"data-[placeholder]:": {
 			"": "text-current/40",
@@ -108,7 +108,7 @@ const checkboxShortcuts = defineShortcuts({
 		"aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
 	},
 	"checkbox": {
-		"": "cursor-default shrink-0 select-none rounded-[0.28em] transition-all transition-duration-100 flex size-1.5em appearance-none items-center justify-center bg-current/0 border-current border-[0.16em] current-icon-white",
+		"": "cursor-default shrink-0 select-none rounded-r0 transition-all transition-duration-100 flex size-1.5em appearance-none items-center justify-center bg-current/0 border-current border-[0.16em] current-icon-white",
 		"group-active/cb:enabled:": "current-bg-scope-color-500 bg-current/20 current-icon-scope-color-500",
 		"disabled:": "cursor-not-allowed border-1px",
 		"group-[[data-error=true]]/cb:enabled:": "current-border-error-500 border-current",
@@ -218,7 +218,7 @@ const shortcuts = [
 	}),
 	defineShortcuts({
 		"select-content": {
-			"": "min-w-[60px] rounded-base surface-0 bg-current overflow-hidden shadow-popup z-[100] current-border-grey-400 border-current/20 ",
+			"": "min-w-[60px] rounded-r1 surface-0 bg-current overflow-hidden shadow-popup z-[100] current-border-grey-400 border-current/20 ",
 			"data-[design=round]:": "rounded-fingertip-half",
 			"[&>div[data-reka-combobox-viewport]]:": "max-h-[var(--reka-popper-available-height)] [scrollbar-width:auto]",
 			"[&>div[data-reka-combobox-viewport]::-webkit-scrollbar]:": "block"
@@ -270,7 +270,7 @@ const shortcuts = [
 //#region src/theme/shortcuts/c8.ts
 const c8 = defineShortcuts({
 	"c8-filled": {
-		"": "current-bg-scope-color-500 rounded-base current-text-white current-icon-white icon-current/100 bg-current  text-current",
+		"": "current-bg-scope-color-500 rounded-r1 current-text-white current-icon-white icon-current/100 bg-current  text-current",
 		"hover:": "c8-filled-hover",
 		"focus-visible:": "c8-filled-hover",
 		"data-[highlighted]:": "c8-filled-hover",
@@ -278,30 +278,33 @@ const c8 = defineShortcuts({
 		"data-[active]:": "c8-filled-active"
 	},
 	"c8-filled-hover": {
-		"not-([disabled]):": "current-bg-scope-color-400",
-		"dark:not-([disabled]):": "current-bg-scope-color-600"
-	},
-	"c8-filled-active": {
 		"not-([disabled]):": "current-bg-scope-color-600",
 		"dark:not-([disabled]):": "current-bg-scope-color-400"
 	},
+	"c8-filled-active": {
+		"not-([disabled]):": "current-bg-scope-color-700",
+		"dark:not-([disabled]):": "current-bg-scope-color-300"
+	},
 	"c8-flat": {
-		"": "current-bg-scope-color-500 rounded-base current-text-black current-icon-black bg-current/0 text-current/80 icon-current/50",
+		"": "current-bg-scope-color-500 rounded-r1 current-text-black current-icon-black bg-current/0 text-current/80 icon-current/50",
 		"dark:": "current-text-white current-icon-white",
 		"hover:": "c8-flat-hover",
 		"focus-visible:": "c8-flat-hover",
 		"data-[highlighted]:": "c8-flat-hover",
+		"active:": "c8-flat-active",
+		"data-[active]:": "c8-flat-active",
 		"data-[selected=true]:": "c8-flat-selected",
 		"aria-[selected=true]:": "c8-flat-selected",
 		"aria-[pressed=true]:": "c8-flat-selected"
 	},
-	"c8-flat-hover": { "not-([disabled]):": "bg-current/05" },
+	"c8-flat-hover": { "not-([disabled]):": "bg-current/10" },
+	"c8-flat-active": { "not-([disabled]):": "bg-current/15" },
 	"c8-flat-selected": {
 		"": "c8-flat-hover current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
 		"dark:": "current-text-scope-color-400 current-icon-scope-color-400"
 	},
 	"c8-outlined": {
-		"": "c8-flat border-scope-color-500 rounded-base border current-text-scope-color-500 current-icon-scope-color-500 icon-current/100",
+		"": "c8-flat border-scope-color-500 rounded-r1 border current-text-scope-color-500 current-icon-scope-color-500 icon-current/100",
 		"dark:": "current-text-scope-color-400 current-icon-scope-color-400",
 		"hover:": "c8-outlined-hover",
 		"focus-visible:": "c8-outlined-hover",
@@ -312,8 +315,7 @@ const c8 = defineShortcuts({
 	"c8-outlined-hover": "c8-flat-hover",
 	"c8-outlined-active": "c8-flat-active",
 	"c8-chrome": {
-		"": "rounded-base border bg-transparent current-text-scope-dark-2 current-icon-scope-dark-2 current-border-grey-500 text-current border-current icon-current/80",
-		"dark:": "current-text-scope-light-2 current-icon-scope-light-2",
+		"": "surface-0 rounded-r1 border",
 		"hover:": "c8-chrome-hover",
 		"focus-visible:": "c8-chrome-hover",
 		"data-[highlighted]:": "c8-chrome-hover",
@@ -336,7 +338,7 @@ const c8 = defineShortcuts({
 		"dark:": "current-bg-scope-dark-1 current-text-scope-color-400 current-icon-scope-color-400"
 	},
 	"c8-light": {
-		"": "current-bg-scope-color-500 rounded-base current-text-scope-color-500 current-icon-scope-color-500 bg-current/10 text-current icon-current/80",
+		"": "current-bg-scope-color-500 rounded-r1 current-text-scope-color-500 current-icon-scope-color-500 bg-current/10 text-current icon-current/80",
 		"dark:": "current-text-scope-color-400 current-icon-scope-color-400",
 		"hover:": "c8-light-hover",
 		"focus-visible:": "c8-light-hover",
@@ -347,8 +349,8 @@ const c8 = defineShortcuts({
 		"aria-[selected=true]:": "c8-light-hover",
 		"aria-[pressed=true]:": "c8-light-hover"
 	},
-	"c8-light-hover": { "not-([disabled]):": "bg-current/15" },
-	"c8-light-active": { "not-([disabled]):": "bg-current/20" }
+	"c8-light-hover": { "not-([disabled]):": "bg-current/20" },
+	"c8-light-active": { "not-([disabled]):": "bg-current/30" }
 });
 //#endregion
 //#region src/theme/shortcuts/i8.ts
@@ -360,7 +362,7 @@ const i8 = defineShortcuts({
 		"focus-within:": "icon-current-hl",
 		"[&.i8-flat]:": { "": "border-b-width-[var(--i8-border-width,1px)]" },
 		"[&.i8-filled]:": {
-			"": "i8-apply-bg current-outline-hl i8-apply-border rounded-base i8-apply-border",
+			"": "i8-apply-bg current-outline-hl i8-apply-border rounded-r1 i8-apply-border",
 			"data-[active=true]:": "current-border-hl outline i8-apply-outline",
 			"focus-within:": "current-border-hl outline i8-apply-outline"
 		},
@@ -1219,6 +1221,47 @@ function buildFontTheme(size, w, wBold, lh, ls, actualFontHeightFactor = 1, actu
 	};
 }
 //#endregion
+//#region src/theme/utils/radius-scale.ts
+const ROOT_FONT_PX = 16;
+function parseRadius(input) {
+	const m = input.trim().match(/^(-?\d*\.?\d+)(px|em|rem)?$/);
+	if (!m) return null;
+	const n = Number.parseFloat(m[1]);
+	if (!Number.isFinite(n)) return null;
+	return {
+		n,
+		unit: m[2] ?? ""
+	};
+}
+function computeRadiusScale(baseRadius) {
+	const parsed = parseRadius(baseRadius);
+	if (!parsed) return {
+		r0: `min(${baseRadius}, clamp(2px, calc(${baseRadius} / 2), 4px))`,
+		r1: baseRadius,
+		r2: `calc(${baseRadius} * 1.5)`,
+		r3: `calc(${baseRadius} * 2)`,
+		r4: `calc(${baseRadius} * 2.5)`
+	};
+	const { n, unit } = parsed;
+	if (n === 0) return {
+		r0: "0",
+		r1: "0",
+		r2: "0",
+		r3: "0",
+		r4: "0"
+	};
+	const basePx = unit === "em" || unit === "rem" ? n * ROOT_FONT_PX : n;
+	const r0Px = Math.min(basePx, Math.max(2, Math.min(basePx / 2, 4)));
+	const scaled = unit ? baseRadius : `${n}px`;
+	return {
+		r0: `${round(r0Px, 3)}px`,
+		r1: baseRadius,
+		r2: unitBy(scaled, 1.5),
+		r3: unitBy(scaled, 2),
+		r4: unitBy(scaled, 2.5)
+	};
+}
+//#endregion
 //#region src/theme/theme.ts
 const themeFactory = (opts) => {
 	/**
@@ -1260,7 +1303,8 @@ const themeFactory = (opts) => {
 	};
 	const borderRadius = {
 		...spacing,
-		base: opts.baseRadius
+		base: opts.baseRadius,
+		...computeRadiusScale(opts.baseRadius)
 	};
 	/**
 	* Typography

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vunor",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "files": [
     "dist"
   ],