@kashi-ui/css 0.3.0 → 0.5.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kashi-ui/css",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "استایل کامپوننت‌های کاشی با CSS خالص — برای هر فریم‌ورکی",
   "main": "./dist/kashi.css",
   "style": "./dist/kashi.css",
@@ -21,7 +21,7 @@
     "build": "node build.mjs"
   },
   "dependencies": {
-    "@kashi-ui/tokens": "^0.3.0"
+    "@kashi-ui/tokens": "^0.5.0"
   },
   "devDependencies": {
     "vazirmatn": "^33.0.3"