@kashi-ui/tokens 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export declare const palette: {
     "300": "#4fd8cb",
     "400": "#22c2b4",
     "500": "#0fa89b",
-    "600": "#08877e",
+    "600": "#0b8077",
     "700": "#0a6b65",
     "800": "#0d5551",
     "900": "#0f4644",
@@ -120,12 +120,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 +177,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 +193,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 +203,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 +223,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 +237,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 +246,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)"
   }
 };
 

package/dist/tokens.css

@@ -8,7 +8,7 @@
   --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 +63,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);
@@ -149,11 +152,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 +168,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 +178,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 +200,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 +214,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 +223,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",
   },
 };
 
@@ -101,11 +102,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 +119,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 +131,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 +155,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 +169,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 +178,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

@@ -53,7 +53,7 @@
       "300": "#4fd8cb",
       "400": "#22c2b4",
       "500": "#0fa89b",
-      "600": "#08877e",
+      "600": "#0b8077",
       "700": "#0a6b65",
       "800": "#0d5551",
       "900": "#0f4644",
@@ -118,12 +118,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 +171,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 +187,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 +197,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 +217,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 +231,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 +240,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.5.0",
   "description": "توکن‌های طراحی کاشی — رنگ، فاصله، فونت",
   "type": "module",
   "main": "./dist/index.js",