@kashi-ui/tokens 0.5.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: {
@@ -270,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>;
@@ -277,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,6 +2,7 @@
 :root {
   --k-radius-factor: 1;
   --k-density: 1;
+  --k-text-scale: 1;
   --k-firoozeh-50: #e6fbf8;
   --k-firoozeh-100: #c2f4ee;
   --k-firoozeh-200: #8ce9df;
@@ -109,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;

package/dist/tokens.js

@@ -43,6 +43,8 @@ export const knobs = {
   "radius-factor": "1",
   // تراکم: 0.875 = فشرده (مثل Polaris)، 1 = عادی، 1.125 = جادار
   "density": "1",
+  // ضریب اندازهٔ همهٔ متن‌ها؛ برای فونت‌هایی که درشت‌تر یا ریزتر از وزیرمتن دیده می‌شوند
+  "text-scale": "1",
 };
 
 /** فاصله‌ها — مضرب ۴ پیکسل */
@@ -58,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" },
   // حروف فارسی نقطه و دندانه دارند و به ارتفاع خط بیشتری نیاز دارند

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": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kashi-ui/tokens",
-  "version": "0.5.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": {