@kashi-ui/tokens 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -1,19 +1,20 @@
 export declare const font: {
   "family": {
     "sans": "\"Vazirmatn\", \"Vazir\", Tahoma, system-ui, sans-serif",
+    "display": "var(--k-font-sans)",
     "mono": "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Vazirmatn\", monospace"
   },
   "size": {
-    "xs": "0.75rem",
-    "sm": "0.875rem",
-    "md": "0.9375rem",
-    "lg": "1.0625rem",
-    "xl": "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "1.875rem",
-    "4xl": "2.25rem",
-    "5xl": "3rem",
-    "6xl": "3.75rem"
+    "xs": "calc(0.75rem * var(--k-text-scale))",
+    "sm": "calc(0.875rem * var(--k-text-scale))",
+    "md": "calc(0.9375rem * var(--k-text-scale))",
+    "lg": "calc(1.0625rem * var(--k-text-scale))",
+    "xl": "calc(1.25rem * var(--k-text-scale))",
+    "2xl": "calc(1.5rem * var(--k-text-scale))",
+    "3xl": "calc(1.875rem * var(--k-text-scale))",
+    "4xl": "calc(2.25rem * var(--k-text-scale))",
+    "5xl": "calc(3rem * var(--k-text-scale))",
+    "6xl": "calc(3.75rem * var(--k-text-scale))"
   },
   "weight": {
     "light": "300",
@@ -32,7 +33,8 @@ export declare const font: {
 
 export declare const knobs: {
   "radius-factor": "1",
-  "density": "1"
+  "density": "1",
+  "text-scale": "1"
 };
 
 export declare const motion: {
@@ -55,7 +57,7 @@ export declare const palette: {
     "300": "#4fd8cb",
     "400": "#22c2b4",
     "500": "#0fa89b",
-    "600": "#08877e",
+    "600": "#0b8077",
     "700": "#0a6b65",
     "800": "#0d5551",
     "900": "#0f4644",
@@ -120,12 +122,15 @@ export declare const palette: {
     "200": "#d5d9e2",
     "300": "#b1b9c9",
     "400": "#8792ab",
+    "450": "#848fa7",
     "500": "#687491",
+    "550": "#5a637a",
     "600": "#535d78",
     "700": "#444c62",
     "800": "#2a2f3d",
     "850": "#1e222c",
     "900": "#161921",
+    "925": "#111319",
     "950": "#0d0f14",
     "1000": "#08090c"
   }
@@ -174,11 +179,11 @@ export declare const themes: {
     "bg-primary": "var(--k-shab-1000)",
     "bg-secondary": "var(--k-shab-950)",
     "bg-tertiary": "var(--k-shab-900)",
-    "bg-elevated": "var(--k-shab-900)",
+    "bg-elevated": "var(--k-shab-925)",
     "bg-hover": "rgb(255 255 255 / 0.05)",
     "bg-active": "rgb(255 255 255 / 0.08)",
-    "bg-brand": "var(--k-brand-700)",
-    "bg-brand-hover": "var(--k-brand-800)",
+    "bg-brand": "var(--k-brand-400)",
+    "bg-brand-hover": "var(--k-brand-300)",
     "bg-brand-subtle": "color-mix(in srgb, var(--k-brand-500) 14%, transparent)",
     "bg-error": "var(--k-anar-600)",
     "bg-error-hover": "var(--k-anar-700)",
@@ -190,7 +195,8 @@ export declare const themes: {
     "text-secondary": "var(--k-shab-200)",
     "text-tertiary": "var(--k-shab-400)",
     "text-quaternary": "var(--k-shab-500)",
-    "text-on-brand": "var(--k-shab-0)",
+    "text-on-brand": "var(--k-shab-1000)",
+    "text-on-error": "var(--k-shab-0)",
     "text-brand": "var(--k-brand-300)",
     "text-error": "var(--k-anar-400)",
     "text-warning": "var(--k-zafaran-400)",
@@ -199,11 +205,18 @@ export declare const themes: {
     "border-primary": "var(--k-shab-700)",
     "border-secondary": "var(--k-shab-800)",
     "border-brand": "var(--k-brand-400)",
-    "border-input": "var(--k-shab-500)",
+    "border-input": "var(--k-shab-550)",
     "border-error": "var(--k-anar-400)",
     "ring-brand": "0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent)",
     "ring-error": "0 0 0 4px rgb(248 59 71 / 0.28)",
-    "shadow-skeuomorphic": "inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05)"
+    "shadow-skeuomorphic": "inset 0 0 0 1px rgb(0 0 0 / 0.2), inset 0 -2px 0 rgb(0 0 0 / 0.12)",
+    "highlight": "inset 0 1px 0 rgb(255 255 255 / 0.05)",
+    "shadow-xs": "0 1px 2px rgb(0 0 0 / 0.4)",
+    "shadow-sm": "0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4)",
+    "shadow-md": "0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.35)",
+    "shadow-lg": "0 12px 24px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35)",
+    "shadow-xl": "0 20px 32px -6px rgb(0 0 0 / 0.6), 0 8px 12px -6px rgb(0 0 0 / 0.4)",
+    "shadow-2xl": "0 28px 56px -12px rgb(0 0 0 / 0.7)"
   },
   "light": {
     "bg-primary": "var(--k-shab-0)",
@@ -212,8 +225,8 @@ export declare const themes: {
     "bg-elevated": "var(--k-shab-0)",
     "bg-hover": "var(--k-shab-50)",
     "bg-active": "var(--k-shab-100)",
-    "bg-brand": "var(--k-brand-700)",
-    "bg-brand-hover": "var(--k-brand-800)",
+    "bg-brand": "var(--k-brand-600)",
+    "bg-brand-hover": "var(--k-brand-700)",
     "bg-brand-subtle": "var(--k-brand-50)",
     "bg-error": "var(--k-anar-600)",
     "bg-error-hover": "var(--k-anar-700)",
@@ -226,6 +239,7 @@ export declare const themes: {
     "text-tertiary": "var(--k-shab-600)",
     "text-quaternary": "var(--k-shab-500)",
     "text-on-brand": "var(--k-shab-0)",
+    "text-on-error": "var(--k-shab-0)",
     "text-brand": "var(--k-brand-700)",
     "text-error": "var(--k-anar-700)",
     "text-warning": "var(--k-zafaran-700)",
@@ -234,11 +248,18 @@ export declare const themes: {
     "border-primary": "var(--k-shab-300)",
     "border-secondary": "var(--k-shab-200)",
     "border-brand": "var(--k-brand-600)",
-    "border-input": "var(--k-shab-500)",
+    "border-input": "var(--k-shab-450)",
     "border-error": "var(--k-anar-500)",
     "ring-brand": "0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent)",
     "ring-error": "0 0 0 4px rgb(229 29 42 / 0.2)",
-    "shadow-skeuomorphic": "inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05)"
+    "shadow-skeuomorphic": "inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05)",
+    "highlight": "0 0 #0000",
+    "shadow-xs": "0 1px 2px rgb(10 13 18 / 0.05)",
+    "shadow-sm": "0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1)",
+    "shadow-md": "0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06)",
+    "shadow-lg": "0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03)",
+    "shadow-xl": "0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03)",
+    "shadow-2xl": "0 24px 48px -12px rgb(10 13 18 / 0.18)"
   }
 };
 
@@ -251,6 +272,33 @@ export declare const zIndex: {
 };
 
 export declare function brandScale(color: string): Record<number, string>;
+export declare const FALLBACK_SANS: string;
+/** «IRANSans» را به فهرست کامل با فونت‌های جایگزین تبدیل می‌کند */
+export declare function fontStack(family: string, fallback?: string): string;
+
+export interface FontFaceSource {
+  url: string;
+  /** "woff2" | "woff" | "truetype" | "opentype" */
+  format: string;
+}
+
+export interface FontFaceOptions {
+  /** نام خانوادهٔ فونت، همان که در fontFamily استفاده می‌کنید */
+  family: string;
+  /** آدرس فایل؛ قالب از پسوند تشخیص داده می‌شود */
+  src: string | Array<string | FontFaceSource>;
+  /** وزن ثابت (400) یا بازه برای فونت متغیر ("100 900") @default "400" */
+  weight?: string | number;
+  /** @default "normal" */
+  style?: string;
+  /** @default "swap" */
+  display?: string;
+  unicodeRange?: string;
+}
+
+/** قاعدهٔ @font-face برای فونت خودمیزبان (رایگان یا خریداری‌شده) */
+export declare function fontFace(options: FontFaceOptions): string;
+
 export interface ThemeOptions {
   /** رنگ پایهٔ برند (پلهٔ ۵۰۰) یا طیف کامل ۵۰ تا ۹۵۰ */
   brand?: string | Record<number, string>;
@@ -258,7 +306,16 @@ export interface ThemeOptions {
   radius?: number;
   /** ضریب تراکم — 0.875 فشرده، 1 عادی، 1.125 جادار */
   density?: number;
+  /** فونت متن؛ نام تنها («IRANSans») خودکار با فونت‌های جایگزین کامل می‌شود */
   fontFamily?: string;
+  /** فونت عنوان‌ها (h1 تا h6)؛ پیش‌فرض همان fontFamily */
+  displayFontFamily?: string;
+  /** فونت کد */
+  monoFontFamily?: string;
+  /** ضریب اندازهٔ همهٔ متن‌ها؛ مثلاً 0.95 برای فونتی که درشت‌تر دیده می‌شود */
+  textScale?: number;
+  /** فایل‌های فونت برای ساخت @font-face */
+  fonts?: FontFaceOptions[];
   /** پیش‌فرض ":root" */
   selector?: string;
 }

package/dist/index.js

@@ -1,2 +1,2 @@
 export * from "./tokens.js";
-export { createTheme } from "./theme.js";
+export { createTheme, brandScale, fontFace, fontStack, FALLBACK_SANS } from "./theme.js";

package/dist/theme.js

@@ -1,4 +1,4 @@
-// ساخت تم سفارشی: یک رنگ برند می‌گیرد و CSS آماده برمی‌گرداند.
+// ساخت تم سفارشی: رنگ برند، گردی، تراکم و فونت‌ها را می‌گیرد و CSS آماده برمی‌گرداند.
 //   import { createTheme } from "@kashi-ui/tokens";
 //   const css = createTheme({ brand: "#7c3aed", radius: 1.5, density: 0.875 });
 
@@ -6,6 +6,9 @@ const STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 // درصد اختلاط با سفید (مثبت) یا سیاه (منفی) برای هر پله نسبت به رنگ پایه (۵۰۰)
 const MIX = { 50: 92, 100: 82, 200: 64, 300: 44, 400: 22, 500: 0, 600: -18, 700: -34, 800: -48, 900: -60, 950: -76 };
 
+/** فونت‌های جایگزین وقتی فونت اصلی هنوز بارگذاری نشده یا حرفی را ندارد */
+export const FALLBACK_SANS = '"Vazirmatn", Tahoma, system-ui, sans-serif';
+
 /** یک طیف ۱۱ پله‌ای از یک رنگ می‌سازد (با color-mix در فضای oklch) */
 export function brandScale(color) {
   return Object.fromEntries(
@@ -17,15 +20,50 @@ export function brandScale(color) {
   );
 }
 
+const quote = (name) => (/^["']|^[\w-]+$/.test(name) && !/\s/.test(name) ? name : `"${name.replace(/"/g, "")}"`);
+
+/** «IRANSans» → '"IRANSans", "Vazirmatn", Tahoma, …'؛ فهرست کامل (با کاما) دست‌نخورده می‌ماند */
+export function fontStack(family, fallback = FALLBACK_SANS) {
+  return family.includes(",") ? family : `${quote(family.trim())}, ${fallback}`;
+}
+
+/** قاعدهٔ @font-face برای فونتی که فایلش را خودتان میزبانی می‌کنید (رایگان یا خریداری‌شده) */
+export function fontFace({ family, src, weight = "400", style = "normal", display = "swap", unicodeRange }) {
+  const sources = (Array.isArray(src) ? src : [src])
+    .map((s) => {
+      const url = typeof s === "string" ? s : s.url;
+      const format = typeof s === "string" ? (url.match(/\.(woff2?|ttf|otf)(\?|#|$)/)?.[1] ?? "woff2") : s.format;
+      const fmt = { woff2: "woff2", woff: "woff", ttf: "truetype", otf: "opentype" }[format] ?? format;
+      return `url("${url}") format("${fmt}")`;
+    })
+    .join(",\n       ");
+  return [
+    "@font-face {",
+    `  font-family: ${quote(family)};`,
+    `  src: ${sources};`,
+    `  font-weight: ${weight};`,
+    `  font-style: ${style};`,
+    `  font-display: ${display};`,
+    unicodeRange ? `  unicode-range: ${unicodeRange};` : null,
+    "}",
+  ].filter(Boolean).join("\n");
+}
+
 /**
  * @param {object} o
  * @param {string | Record<string,string>} [o.brand] رنگ پایه یا طیف کامل
  * @param {number} [o.radius] ضریب گردی گوشه‌ها
  * @param {number} [o.density] ضریب تراکم
- * @param {string} [o.fontFamily] فونت جایگزین
+ * @param {string} [o.fontFamily] فونت متن، مثل "IRANSans" یا یک فهرست کامل
+ * @param {string} [o.displayFontFamily] فونت عنوان‌ها
+ * @param {string} [o.monoFontFamily] فونت کد
+ * @param {number} [o.textScale] ضریب اندازهٔ متن‌ها
+ * @param {object[]} [o.fonts] فایل‌های فونت برای ساخت @font-face
  * @param {string} [o.selector] انتخاب‌گر CSS، پیش‌فرض :root
  */
-export function createTheme({ brand, radius, density, fontFamily, selector = ":root" } = {}) {
+export function createTheme({
+  brand, radius, density, fontFamily, displayFontFamily, monoFontFamily, textScale, fonts = [], selector = ":root",
+} = {}) {
   const vars = {};
   if (brand) {
     const scale = typeof brand === "string" ? brandScale(brand) : brand;
@@ -33,7 +71,12 @@ export function createTheme({ brand, radius, density, fontFamily, selector = ":r
   }
   if (radius != null) vars["--k-radius-factor"] = String(radius);
   if (density != null) vars["--k-density"] = String(density);
-  if (fontFamily) vars["--k-font-sans"] = fontFamily;
+  if (textScale != null) vars["--k-text-scale"] = String(textScale);
+  if (fontFamily) vars["--k-font-sans"] = fontStack(fontFamily);
+  if (displayFontFamily) vars["--k-font-display"] = fontStack(displayFontFamily, "var(--k-font-sans)");
+  if (monoFontFamily) vars["--k-font-mono"] = fontStack(monoFontFamily, 'ui-monospace, Menlo, Consolas, "Vazirmatn", monospace');
+  const faces = fonts.map(fontFace).join("\n\n");
   const body = Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`).join("\n");
-  return `${selector} {\n${body}\n}\n`;
+  const rule = body ? `${selector} {\n${body}\n}\n` : "";
+  return faces ? `${faces}\n\n${rule}` : rule;
 }

package/dist/tokens.css

@@ -2,13 +2,14 @@
 :root {
   --k-radius-factor: 1;
   --k-density: 1;
+  --k-text-scale: 1;
   --k-firoozeh-50: #e6fbf8;
   --k-firoozeh-100: #c2f4ee;
   --k-firoozeh-200: #8ce9df;
   --k-firoozeh-300: #4fd8cb;
   --k-firoozeh-400: #22c2b4;
   --k-firoozeh-500: #0fa89b;
-  --k-firoozeh-600: #08877e;
+  --k-firoozeh-600: #0b8077;
   --k-firoozeh-700: #0a6b65;
   --k-firoozeh-800: #0d5551;
   --k-firoozeh-900: #0f4644;
@@ -63,12 +64,15 @@
   --k-shab-200: #d5d9e2;
   --k-shab-300: #b1b9c9;
   --k-shab-400: #8792ab;
+  --k-shab-450: #848fa7;
   --k-shab-500: #687491;
+  --k-shab-550: #5a637a;
   --k-shab-600: #535d78;
   --k-shab-700: #444c62;
   --k-shab-800: #2a2f3d;
   --k-shab-850: #1e222c;
   --k-shab-900: #161921;
+  --k-shab-925: #111319;
   --k-shab-950: #0d0f14;
   --k-shab-1000: #08090c;
   --k-brand-50: var(--k-firoozeh-50);
@@ -106,17 +110,18 @@
   --k-radius-2xl: calc(1.5rem * var(--k-radius-factor));
   --k-radius-full: 9999px;
   --k-font-sans: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
+  --k-font-display: var(--k-font-sans);
   --k-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Vazirmatn", monospace;
-  --k-text-xs: 0.75rem;
-  --k-text-sm: 0.875rem;
-  --k-text-md: 0.9375rem;
-  --k-text-lg: 1.0625rem;
-  --k-text-xl: 1.25rem;
-  --k-text-2xl: 1.5rem;
-  --k-text-3xl: 1.875rem;
-  --k-text-4xl: 2.25rem;
-  --k-text-5xl: 3rem;
-  --k-text-6xl: 3.75rem;
+  --k-text-xs: calc(0.75rem * var(--k-text-scale));
+  --k-text-sm: calc(0.875rem * var(--k-text-scale));
+  --k-text-md: calc(0.9375rem * var(--k-text-scale));
+  --k-text-lg: calc(1.0625rem * var(--k-text-scale));
+  --k-text-xl: calc(1.25rem * var(--k-text-scale));
+  --k-text-2xl: calc(1.5rem * var(--k-text-scale));
+  --k-text-3xl: calc(1.875rem * var(--k-text-scale));
+  --k-text-4xl: calc(2.25rem * var(--k-text-scale));
+  --k-text-5xl: calc(3rem * var(--k-text-scale));
+  --k-text-6xl: calc(3.75rem * var(--k-text-scale));
   --k-weight-light: 300;
   --k-weight-regular: 400;
   --k-weight-medium: 500;
@@ -149,11 +154,11 @@
   --k-bg-primary: var(--k-shab-1000);
   --k-bg-secondary: var(--k-shab-950);
   --k-bg-tertiary: var(--k-shab-900);
-  --k-bg-elevated: var(--k-shab-900);
+  --k-bg-elevated: var(--k-shab-925);
   --k-bg-hover: rgb(255 255 255 / 0.05);
   --k-bg-active: rgb(255 255 255 / 0.08);
-  --k-bg-brand: var(--k-brand-700);
-  --k-bg-brand-hover: var(--k-brand-800);
+  --k-bg-brand: var(--k-brand-400);
+  --k-bg-brand-hover: var(--k-brand-300);
   --k-bg-brand-subtle: color-mix(in srgb, var(--k-brand-500) 14%, transparent);
   --k-bg-error: var(--k-anar-600);
   --k-bg-error-hover: var(--k-anar-700);
@@ -165,7 +170,8 @@
   --k-text-secondary: var(--k-shab-200);
   --k-text-tertiary: var(--k-shab-400);
   --k-text-quaternary: var(--k-shab-500);
-  --k-text-on-brand: var(--k-shab-0);
+  --k-text-on-brand: var(--k-shab-1000);
+  --k-text-on-error: var(--k-shab-0);
   --k-text-brand: var(--k-brand-300);
   --k-text-error: var(--k-anar-400);
   --k-text-warning: var(--k-zafaran-400);
@@ -174,11 +180,18 @@
   --k-border-primary: var(--k-shab-700);
   --k-border-secondary: var(--k-shab-800);
   --k-border-brand: var(--k-brand-400);
-  --k-border-input: var(--k-shab-500);
+  --k-border-input: var(--k-shab-550);
   --k-border-error: var(--k-anar-400);
   --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent);
   --k-ring-error: 0 0 0 4px rgb(248 59 71 / 0.28);
-  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05);
+  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(0 0 0 / 0.2), inset 0 -2px 0 rgb(0 0 0 / 0.12);
+  --k-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
+  --k-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
+  --k-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --k-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.35);
+  --k-shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35);
+  --k-shadow-xl: 0 20px 32px -6px rgb(0 0 0 / 0.6), 0 8px 12px -6px rgb(0 0 0 / 0.4);
+  --k-shadow-2xl: 0 28px 56px -12px rgb(0 0 0 / 0.7);
 }
 
 [data-theme="light"] {
@@ -189,8 +202,8 @@
   --k-bg-elevated: var(--k-shab-0);
   --k-bg-hover: var(--k-shab-50);
   --k-bg-active: var(--k-shab-100);
-  --k-bg-brand: var(--k-brand-700);
-  --k-bg-brand-hover: var(--k-brand-800);
+  --k-bg-brand: var(--k-brand-600);
+  --k-bg-brand-hover: var(--k-brand-700);
   --k-bg-brand-subtle: var(--k-brand-50);
   --k-bg-error: var(--k-anar-600);
   --k-bg-error-hover: var(--k-anar-700);
@@ -203,6 +216,7 @@
   --k-text-tertiary: var(--k-shab-600);
   --k-text-quaternary: var(--k-shab-500);
   --k-text-on-brand: var(--k-shab-0);
+  --k-text-on-error: var(--k-shab-0);
   --k-text-brand: var(--k-brand-700);
   --k-text-error: var(--k-anar-700);
   --k-text-warning: var(--k-zafaran-700);
@@ -211,9 +225,16 @@
   --k-border-primary: var(--k-shab-300);
   --k-border-secondary: var(--k-shab-200);
   --k-border-brand: var(--k-brand-600);
-  --k-border-input: var(--k-shab-500);
+  --k-border-input: var(--k-shab-450);
   --k-border-error: var(--k-anar-500);
   --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent);
   --k-ring-error: 0 0 0 4px rgb(229 29 42 / 0.2);
   --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05);
+  --k-highlight: 0 0 #0000;
+  --k-shadow-xs: 0 1px 2px rgb(10 13 18 / 0.05);
+  --k-shadow-sm: 0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
+  --k-shadow-md: 0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
+  --k-shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
+  --k-shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03);
+  --k-shadow-2xl: 0 24px 48px -12px rgb(10 13 18 / 0.18);
 }

package/dist/tokens.js

@@ -6,7 +6,7 @@ export const palette = {
   // فیروزه‌ای — رنگ اصلی برند
   firoozeh: {
     50: "#e6fbf8", 100: "#c2f4ee", 200: "#8ce9df", 300: "#4fd8cb", 400: "#22c2b4",
-    500: "#0fa89b", 600: "#08877e", 700: "#0a6b65", 800: "#0d5551", 900: "#0f4644", 950: "#042a29",
+    500: "#0fa89b", 600: "#0b8077", 700: "#0a6b65", 800: "#0d5551", 900: "#0f4644", 950: "#042a29",
   },
   // لاجوردی — اطلاعات و لینک
   lajvard: {
@@ -29,10 +29,11 @@ export const palette = {
     500: "#6aae33", 600: "#518b25", 700: "#3f6a21", 800: "#35551f", 900: "#2e491e", 950: "#15270c",
   },
   // شب — خاکستری‌های کمی آبی برای پس‌زمینه و متن
+  // ۴۵۰ و ۵۵۰ کم‌رنگ‌ترین خاکستری‌هایی‌اند که هنوز کنتراست ۳:۱ حاشیهٔ فیلد را دارند (روشن و تیره)
   shab: {
     0: "#ffffff", 50: "#f6f7f9", 100: "#eceef2", 200: "#d5d9e2", 300: "#b1b9c9", 400: "#8792ab",
-    500: "#687491", 600: "#535d78", 700: "#444c62", 800: "#2a2f3d", 850: "#1e222c", 900: "#161921",
-    950: "#0d0f14", 1000: "#08090c",
+    450: "#848fa7", 500: "#687491", 550: "#5a637a", 600: "#535d78", 700: "#444c62", 800: "#2a2f3d",
+    850: "#1e222c", 900: "#161921", 925: "#111319", 950: "#0d0f14", 1000: "#08090c",
   },
 };
 
@@ -42,6 +43,8 @@ export const knobs = {
   "radius-factor": "1",
   // تراکم: 0.875 = فشرده (مثل Polaris)، 1 = عادی، 1.125 = جادار
   "density": "1",
+  // ضریب اندازهٔ همهٔ متن‌ها؛ برای فونت‌هایی که درشت‌تر یا ریزتر از وزیرمتن دیده می‌شوند
+  "text-scale": "1",
 };
 
 /** فاصله‌ها — مضرب ۴ پیکسل */
@@ -57,16 +60,20 @@ export const radius = {
   none: "0", sm: r(0.25), md: r(0.5), lg: r(0.75), xl: r(1), "2xl": r(1.5), full: "9999px",
 };
 
+const t = (rem) => `calc(${rem}rem * var(--k-text-scale))`;
+
 export const font = {
   family: {
     sans: '"Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif',
+    // فونت عنوان‌ها؛ پیش‌فرض همان فونت متن
+    display: "var(--k-font-sans)",
     // وزیرمتن به‌عنوان جایگزین تا متن فارسی داخل کد هم یکدست باشد
     mono: 'ui-monospace, "SF Mono", Menlo, Consolas, "Vazirmatn", monospace',
   },
   // متن فارسی در اندازه‌های یکسان کمی کوچک‌تر از لاتین دیده می‌شود؛ پایه ۱۵px است
   size: {
-    xs: "0.75rem", sm: "0.875rem", md: "0.9375rem", lg: "1.0625rem", xl: "1.25rem",
-    "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem", "6xl": "3.75rem",
+    xs: t(0.75), sm: t(0.875), md: t(0.9375), lg: t(1.0625), xl: t(1.25),
+    "2xl": t(1.5), "3xl": t(1.875), "4xl": t(2.25), "5xl": t(3), "6xl": t(3.75),
   },
   weight: { light: "300", regular: "400", medium: "500", semibold: "600", bold: "700", black: "900" },
   // حروف فارسی نقطه و دندانه دارند و به ارتفاع خط بیشتری نیاز دارند
@@ -101,11 +108,11 @@ export const themes = {
     "bg-primary": p("shab", 1000),
     "bg-secondary": p("shab", 950),
     "bg-tertiary": p("shab", 900),
-    "bg-elevated": p("shab", 900),
+    "bg-elevated": p("shab", 925),
     "bg-hover": "rgb(255 255 255 / 0.05)",
     "bg-active": "rgb(255 255 255 / 0.08)",
-    "bg-brand": p("brand", 700),
-    "bg-brand-hover": p("brand", 800),
+    "bg-brand": p("brand", 400),
+    "bg-brand-hover": p("brand", 300),
     "bg-brand-subtle": "color-mix(in srgb, var(--k-brand-500) 14%, transparent)",
     "bg-error": p("anar", 600),
     "bg-error-hover": p("anar", 700),
@@ -118,7 +125,8 @@ export const themes = {
     "text-secondary": p("shab", 200),
     "text-tertiary": p("shab", 400),
     "text-quaternary": p("shab", 500),
-    "text-on-brand": p("shab", 0),
+    "text-on-brand": p("shab", 1000),
+    "text-on-error": p("shab", 0),
     "text-brand": p("brand", 300),
     "text-error": p("anar", 400),
     "text-warning": p("zafaran", 400),
@@ -129,13 +137,22 @@ export const themes = {
     "border-secondary": p("shab", 800),
     "border-brand": p("brand", 400),
     // حاشیهٔ فیلدها، چک‌باکس و سوییچ خاموش — حداقل ۳:۱ (WCAG 1.4.11)
-    "border-input": p("shab", 500),
+    "border-input": p("shab", 550),
     "border-error": p("anar", 400),
     // حلقهٔ فوکوس نرم و پهن (Untitled UI)
     "ring-brand": "0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent)",
     "ring-error": "0 0 0 4px rgb(248 59 71 / 0.28)",
     // سایهٔ اسکئومورفیک دکمه‌ها و فیلدها (Untitled UI)
-    "shadow-skeuomorphic": "inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05)",
+    "shadow-skeuomorphic": "inset 0 0 0 1px rgb(0 0 0 / 0.2), inset 0 -2px 0 rgb(0 0 0 / 0.12)",
+    // خط روشن بالای سطوح برجسته در تم تیره؛ حس عمق می‌دهد
+    "highlight": "inset 0 1px 0 rgb(255 255 255 / 0.05)",
+    // سایه‌ها در تیره باید پررنگ‌تر باشند تا دیده شوند
+    "shadow-xs": "0 1px 2px rgb(0 0 0 / 0.4)",
+    "shadow-sm": "0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4)",
+    "shadow-md": "0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.35)",
+    "shadow-lg": "0 12px 24px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35)",
+    "shadow-xl": "0 20px 32px -6px rgb(0 0 0 / 0.6), 0 8px 12px -6px rgb(0 0 0 / 0.4)",
+    "shadow-2xl": "0 28px 56px -12px rgb(0 0 0 / 0.7)",
   },
   light: {
     "bg-primary": p("shab", 0),
@@ -144,8 +161,8 @@ export const themes = {
     "bg-elevated": p("shab", 0),
     "bg-hover": p("shab", 50),
     "bg-active": p("shab", 100),
-    "bg-brand": p("brand", 700),
-    "bg-brand-hover": p("brand", 800),
+    "bg-brand": p("brand", 600),
+    "bg-brand-hover": p("brand", 700),
     "bg-brand-subtle": p("brand", 50),
     "bg-error": p("anar", 600),
     "bg-error-hover": p("anar", 700),
@@ -158,6 +175,7 @@ export const themes = {
     "text-tertiary": p("shab", 600),
     "text-quaternary": p("shab", 500),
     "text-on-brand": p("shab", 0),
+    "text-on-error": p("shab", 0),
     "text-brand": p("brand", 700),
     "text-error": p("anar", 700),
     "text-warning": p("zafaran", 700),
@@ -166,10 +184,18 @@ export const themes = {
     "border-primary": p("shab", 300),
     "border-secondary": p("shab", 200),
     "border-brand": p("brand", 600),
-    "border-input": p("shab", 500),
+    "border-input": p("shab", 450),
     "border-error": p("anar", 500),
     "ring-brand": "0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent)",
     "ring-error": "0 0 0 4px rgb(229 29 42 / 0.2)",
     "shadow-skeuomorphic": "inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05)",
+    "highlight": "0 0 #0000",
+    // بازگرداندن سایه‌های روشن برای زیرشاخه‌هایی که داخل تم تیره روشن شده‌اند
+    "shadow-xs": "0 1px 2px rgb(10 13 18 / 0.05)",
+    "shadow-sm": "0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1)",
+    "shadow-md": "0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06)",
+    "shadow-lg": "0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03)",
+    "shadow-xl": "0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03)",
+    "shadow-2xl": "0 24px 48px -12px rgb(10 13 18 / 0.18)",
   },
 };

package/dist/tokens.json

@@ -2,19 +2,20 @@
   "font": {
     "family": {
       "sans": "\"Vazirmatn\", \"Vazir\", Tahoma, system-ui, sans-serif",
+      "display": "var(--k-font-sans)",
       "mono": "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Vazirmatn\", monospace"
     },
     "size": {
-      "xs": "0.75rem",
-      "sm": "0.875rem",
-      "md": "0.9375rem",
-      "lg": "1.0625rem",
-      "xl": "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "3.75rem"
+      "xs": "calc(0.75rem * var(--k-text-scale))",
+      "sm": "calc(0.875rem * var(--k-text-scale))",
+      "md": "calc(0.9375rem * var(--k-text-scale))",
+      "lg": "calc(1.0625rem * var(--k-text-scale))",
+      "xl": "calc(1.25rem * var(--k-text-scale))",
+      "2xl": "calc(1.5rem * var(--k-text-scale))",
+      "3xl": "calc(1.875rem * var(--k-text-scale))",
+      "4xl": "calc(2.25rem * var(--k-text-scale))",
+      "5xl": "calc(3rem * var(--k-text-scale))",
+      "6xl": "calc(3.75rem * var(--k-text-scale))"
     },
     "weight": {
       "light": "300",
@@ -32,7 +33,8 @@
   },
   "knobs": {
     "radius-factor": "1",
-    "density": "1"
+    "density": "1",
+    "text-scale": "1"
   },
   "motion": {
     "duration": {
@@ -53,7 +55,7 @@
       "300": "#4fd8cb",
       "400": "#22c2b4",
       "500": "#0fa89b",
-      "600": "#08877e",
+      "600": "#0b8077",
       "700": "#0a6b65",
       "800": "#0d5551",
       "900": "#0f4644",
@@ -118,12 +120,15 @@
       "200": "#d5d9e2",
       "300": "#b1b9c9",
       "400": "#8792ab",
+      "450": "#848fa7",
       "500": "#687491",
+      "550": "#5a637a",
       "600": "#535d78",
       "700": "#444c62",
       "800": "#2a2f3d",
       "850": "#1e222c",
       "900": "#161921",
+      "925": "#111319",
       "950": "#0d0f14",
       "1000": "#08090c"
     }
@@ -168,11 +173,11 @@
       "bg-primary": "var(--k-shab-1000)",
       "bg-secondary": "var(--k-shab-950)",
       "bg-tertiary": "var(--k-shab-900)",
-      "bg-elevated": "var(--k-shab-900)",
+      "bg-elevated": "var(--k-shab-925)",
       "bg-hover": "rgb(255 255 255 / 0.05)",
       "bg-active": "rgb(255 255 255 / 0.08)",
-      "bg-brand": "var(--k-brand-700)",
-      "bg-brand-hover": "var(--k-brand-800)",
+      "bg-brand": "var(--k-brand-400)",
+      "bg-brand-hover": "var(--k-brand-300)",
       "bg-brand-subtle": "color-mix(in srgb, var(--k-brand-500) 14%, transparent)",
       "bg-error": "var(--k-anar-600)",
       "bg-error-hover": "var(--k-anar-700)",
@@ -184,7 +189,8 @@
       "text-secondary": "var(--k-shab-200)",
       "text-tertiary": "var(--k-shab-400)",
       "text-quaternary": "var(--k-shab-500)",
-      "text-on-brand": "var(--k-shab-0)",
+      "text-on-brand": "var(--k-shab-1000)",
+      "text-on-error": "var(--k-shab-0)",
       "text-brand": "var(--k-brand-300)",
       "text-error": "var(--k-anar-400)",
       "text-warning": "var(--k-zafaran-400)",
@@ -193,11 +199,18 @@
       "border-primary": "var(--k-shab-700)",
       "border-secondary": "var(--k-shab-800)",
       "border-brand": "var(--k-brand-400)",
-      "border-input": "var(--k-shab-500)",
+      "border-input": "var(--k-shab-550)",
       "border-error": "var(--k-anar-400)",
       "ring-brand": "0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent)",
       "ring-error": "0 0 0 4px rgb(248 59 71 / 0.28)",
-      "shadow-skeuomorphic": "inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05)"
+      "shadow-skeuomorphic": "inset 0 0 0 1px rgb(0 0 0 / 0.2), inset 0 -2px 0 rgb(0 0 0 / 0.12)",
+      "highlight": "inset 0 1px 0 rgb(255 255 255 / 0.05)",
+      "shadow-xs": "0 1px 2px rgb(0 0 0 / 0.4)",
+      "shadow-sm": "0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4)",
+      "shadow-md": "0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.35)",
+      "shadow-lg": "0 12px 24px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35)",
+      "shadow-xl": "0 20px 32px -6px rgb(0 0 0 / 0.6), 0 8px 12px -6px rgb(0 0 0 / 0.4)",
+      "shadow-2xl": "0 28px 56px -12px rgb(0 0 0 / 0.7)"
     },
     "light": {
       "bg-primary": "var(--k-shab-0)",
@@ -206,8 +219,8 @@
       "bg-elevated": "var(--k-shab-0)",
       "bg-hover": "var(--k-shab-50)",
       "bg-active": "var(--k-shab-100)",
-      "bg-brand": "var(--k-brand-700)",
-      "bg-brand-hover": "var(--k-brand-800)",
+      "bg-brand": "var(--k-brand-600)",
+      "bg-brand-hover": "var(--k-brand-700)",
       "bg-brand-subtle": "var(--k-brand-50)",
       "bg-error": "var(--k-anar-600)",
       "bg-error-hover": "var(--k-anar-700)",
@@ -220,6 +233,7 @@
       "text-tertiary": "var(--k-shab-600)",
       "text-quaternary": "var(--k-shab-500)",
       "text-on-brand": "var(--k-shab-0)",
+      "text-on-error": "var(--k-shab-0)",
       "text-brand": "var(--k-brand-700)",
       "text-error": "var(--k-anar-700)",
       "text-warning": "var(--k-zafaran-700)",
@@ -228,11 +242,18 @@
       "border-primary": "var(--k-shab-300)",
       "border-secondary": "var(--k-shab-200)",
       "border-brand": "var(--k-brand-600)",
-      "border-input": "var(--k-shab-500)",
+      "border-input": "var(--k-shab-450)",
       "border-error": "var(--k-anar-500)",
       "ring-brand": "0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent)",
       "ring-error": "0 0 0 4px rgb(229 29 42 / 0.2)",
-      "shadow-skeuomorphic": "inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05)"
+      "shadow-skeuomorphic": "inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05)",
+      "highlight": "0 0 #0000",
+      "shadow-xs": "0 1px 2px rgb(10 13 18 / 0.05)",
+      "shadow-sm": "0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1)",
+      "shadow-md": "0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06)",
+      "shadow-lg": "0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03)",
+      "shadow-xl": "0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03)",
+      "shadow-2xl": "0 24px 48px -12px rgb(10 13 18 / 0.18)"
     }
   },
   "zIndex": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kashi-ui/tokens",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "توکن‌های طراحی کاشی — رنگ، فاصله، فونت",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,8 @@
     "*.css"
   ],
   "scripts": {
-    "build": "node contrast.mjs && node build.mjs"
+    "build": "node contrast.mjs && node build.mjs",
+    "test": "node --test test/*.test.mjs"
   },
   "license": "MIT",
   "repository": {