@kashi-ui/css 0.0.0-stage → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +26 -2
- package/dist/base.css +82 -0
- package/dist/components/alert.css +92 -0
- package/dist/components/avatar.css +77 -0
- package/dist/components/badge.css +48 -0
- package/dist/components/button.css +169 -0
- package/dist/components/calendar.css +143 -0
- package/dist/components/card.css +77 -0
- package/dist/components/checkbox.css +93 -0
- package/dist/components/field.css +29 -0
- package/dist/components/input.css +97 -0
- package/dist/components/switch.css +69 -0
- package/dist/font.css +9 -0
- package/dist/fonts/Vazirmatn-OFL.txt +93 -0
- package/dist/fonts/Vazirmatn.woff2 +0 -0
- package/dist/kashi.css +1227 -0
- package/dist/tokens.css +219 -0
- package/package.json +49 -4
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
/* @kashi-ui/tokens — این فایل خودکار ساخته شده است */
|
|
2
|
+
:root {
|
|
3
|
+
--k-radius-factor: 1;
|
|
4
|
+
--k-density: 1;
|
|
5
|
+
--k-firoozeh-50: #e6fbf8;
|
|
6
|
+
--k-firoozeh-100: #c2f4ee;
|
|
7
|
+
--k-firoozeh-200: #8ce9df;
|
|
8
|
+
--k-firoozeh-300: #4fd8cb;
|
|
9
|
+
--k-firoozeh-400: #22c2b4;
|
|
10
|
+
--k-firoozeh-500: #0fa89b;
|
|
11
|
+
--k-firoozeh-600: #08877e;
|
|
12
|
+
--k-firoozeh-700: #0a6b65;
|
|
13
|
+
--k-firoozeh-800: #0d5551;
|
|
14
|
+
--k-firoozeh-900: #0f4644;
|
|
15
|
+
--k-firoozeh-950: #042a29;
|
|
16
|
+
--k-lajvard-50: #eef3ff;
|
|
17
|
+
--k-lajvard-100: #dbe5ff;
|
|
18
|
+
--k-lajvard-200: #bfd0ff;
|
|
19
|
+
--k-lajvard-300: #93b0ff;
|
|
20
|
+
--k-lajvard-400: #6185fd;
|
|
21
|
+
--k-lajvard-500: #3d5ef8;
|
|
22
|
+
--k-lajvard-600: #2740ed;
|
|
23
|
+
--k-lajvard-700: #1f30d9;
|
|
24
|
+
--k-lajvard-800: #2029b0;
|
|
25
|
+
--k-lajvard-900: #20298b;
|
|
26
|
+
--k-lajvard-950: #181b54;
|
|
27
|
+
--k-zafaran-50: #fff8eb;
|
|
28
|
+
--k-zafaran-100: #ffecc6;
|
|
29
|
+
--k-zafaran-200: #ffd788;
|
|
30
|
+
--k-zafaran-300: #ffbd4a;
|
|
31
|
+
--k-zafaran-400: #ffa520;
|
|
32
|
+
--k-zafaran-500: #f98307;
|
|
33
|
+
--k-zafaran-600: #dd5e02;
|
|
34
|
+
--k-zafaran-700: #b73e06;
|
|
35
|
+
--k-zafaran-800: #94300c;
|
|
36
|
+
--k-zafaran-900: #7a280d;
|
|
37
|
+
--k-zafaran-950: #461202;
|
|
38
|
+
--k-anar-50: #fff1f2;
|
|
39
|
+
--k-anar-100: #ffe0e2;
|
|
40
|
+
--k-anar-200: #ffc7cb;
|
|
41
|
+
--k-anar-300: #ffa0a6;
|
|
42
|
+
--k-anar-400: #ff6972;
|
|
43
|
+
--k-anar-500: #f83b47;
|
|
44
|
+
--k-anar-600: #e51d2a;
|
|
45
|
+
--k-anar-700: #c11420;
|
|
46
|
+
--k-anar-800: #a0141e;
|
|
47
|
+
--k-anar-900: #841820;
|
|
48
|
+
--k-anar-950: #48070b;
|
|
49
|
+
--k-pesteh-50: #f3faeb;
|
|
50
|
+
--k-pesteh-100: #e4f4d3;
|
|
51
|
+
--k-pesteh-200: #cbeaac;
|
|
52
|
+
--k-pesteh-300: #a9db7b;
|
|
53
|
+
--k-pesteh-400: #89c951;
|
|
54
|
+
--k-pesteh-500: #6aae33;
|
|
55
|
+
--k-pesteh-600: #518b25;
|
|
56
|
+
--k-pesteh-700: #3f6a21;
|
|
57
|
+
--k-pesteh-800: #35551f;
|
|
58
|
+
--k-pesteh-900: #2e491e;
|
|
59
|
+
--k-pesteh-950: #15270c;
|
|
60
|
+
--k-shab-0: #ffffff;
|
|
61
|
+
--k-shab-50: #f6f7f9;
|
|
62
|
+
--k-shab-100: #eceef2;
|
|
63
|
+
--k-shab-200: #d5d9e2;
|
|
64
|
+
--k-shab-300: #b1b9c9;
|
|
65
|
+
--k-shab-400: #8792ab;
|
|
66
|
+
--k-shab-500: #687491;
|
|
67
|
+
--k-shab-600: #535d78;
|
|
68
|
+
--k-shab-700: #444c62;
|
|
69
|
+
--k-shab-800: #2a2f3d;
|
|
70
|
+
--k-shab-850: #1e222c;
|
|
71
|
+
--k-shab-900: #161921;
|
|
72
|
+
--k-shab-950: #0d0f14;
|
|
73
|
+
--k-shab-1000: #08090c;
|
|
74
|
+
--k-brand-50: var(--k-firoozeh-50);
|
|
75
|
+
--k-brand-100: var(--k-firoozeh-100);
|
|
76
|
+
--k-brand-200: var(--k-firoozeh-200);
|
|
77
|
+
--k-brand-300: var(--k-firoozeh-300);
|
|
78
|
+
--k-brand-400: var(--k-firoozeh-400);
|
|
79
|
+
--k-brand-500: var(--k-firoozeh-500);
|
|
80
|
+
--k-brand-600: var(--k-firoozeh-600);
|
|
81
|
+
--k-brand-700: var(--k-firoozeh-700);
|
|
82
|
+
--k-brand-800: var(--k-firoozeh-800);
|
|
83
|
+
--k-brand-900: var(--k-firoozeh-900);
|
|
84
|
+
--k-brand-950: var(--k-firoozeh-950);
|
|
85
|
+
--k-space-0: 0;
|
|
86
|
+
--k-space-1: 0.25rem;
|
|
87
|
+
--k-space-2: 0.5rem;
|
|
88
|
+
--k-space-3: 0.75rem;
|
|
89
|
+
--k-space-4: 1rem;
|
|
90
|
+
--k-space-5: 1.25rem;
|
|
91
|
+
--k-space-6: 1.5rem;
|
|
92
|
+
--k-space-8: 2rem;
|
|
93
|
+
--k-space-10: 2.5rem;
|
|
94
|
+
--k-space-12: 3rem;
|
|
95
|
+
--k-space-16: 4rem;
|
|
96
|
+
--k-space-20: 5rem;
|
|
97
|
+
--k-space-24: 6rem;
|
|
98
|
+
--k-space-px: 1px;
|
|
99
|
+
--k-space-0_5: 0.125rem;
|
|
100
|
+
--k-space-1_5: 0.375rem;
|
|
101
|
+
--k-radius-none: 0;
|
|
102
|
+
--k-radius-sm: calc(0.25rem * var(--k-radius-factor));
|
|
103
|
+
--k-radius-md: calc(0.5rem * var(--k-radius-factor));
|
|
104
|
+
--k-radius-lg: calc(0.75rem * var(--k-radius-factor));
|
|
105
|
+
--k-radius-xl: calc(1rem * var(--k-radius-factor));
|
|
106
|
+
--k-radius-2xl: calc(1.5rem * var(--k-radius-factor));
|
|
107
|
+
--k-radius-full: 9999px;
|
|
108
|
+
--k-font-sans: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
|
|
109
|
+
--k-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Vazirmatn", monospace;
|
|
110
|
+
--k-text-xs: 0.75rem;
|
|
111
|
+
--k-text-sm: 0.875rem;
|
|
112
|
+
--k-text-md: 0.9375rem;
|
|
113
|
+
--k-text-lg: 1.0625rem;
|
|
114
|
+
--k-text-xl: 1.25rem;
|
|
115
|
+
--k-text-2xl: 1.5rem;
|
|
116
|
+
--k-text-3xl: 1.875rem;
|
|
117
|
+
--k-text-4xl: 2.25rem;
|
|
118
|
+
--k-text-5xl: 3rem;
|
|
119
|
+
--k-text-6xl: 3.75rem;
|
|
120
|
+
--k-weight-light: 300;
|
|
121
|
+
--k-weight-regular: 400;
|
|
122
|
+
--k-weight-medium: 500;
|
|
123
|
+
--k-weight-semibold: 600;
|
|
124
|
+
--k-weight-bold: 700;
|
|
125
|
+
--k-weight-black: 900;
|
|
126
|
+
--k-leading-tight: 1.35;
|
|
127
|
+
--k-leading-normal: 1.75;
|
|
128
|
+
--k-leading-relaxed: 2;
|
|
129
|
+
--k-shadow-xs: 0 1px 2px rgb(10 13 18 / 0.05);
|
|
130
|
+
--k-shadow-sm: 0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
|
|
131
|
+
--k-shadow-md: 0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
|
|
132
|
+
--k-shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
|
|
133
|
+
--k-shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03);
|
|
134
|
+
--k-shadow-2xl: 0 24px 48px -12px rgb(10 13 18 / 0.18);
|
|
135
|
+
--k-duration-fast: 120ms;
|
|
136
|
+
--k-duration-normal: 200ms;
|
|
137
|
+
--k-duration-slow: 320ms;
|
|
138
|
+
--k-ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
139
|
+
--k-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.3);
|
|
140
|
+
--k-z-dropdown: 1000;
|
|
141
|
+
--k-z-sticky: 1100;
|
|
142
|
+
--k-z-overlay: 1300;
|
|
143
|
+
--k-z-modal: 1400;
|
|
144
|
+
--k-z-toast: 1500;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
:root, [data-theme="dark"] {
|
|
148
|
+
color-scheme: dark;
|
|
149
|
+
--k-bg-primary: var(--k-shab-1000);
|
|
150
|
+
--k-bg-secondary: var(--k-shab-950);
|
|
151
|
+
--k-bg-tertiary: var(--k-shab-900);
|
|
152
|
+
--k-bg-elevated: var(--k-shab-900);
|
|
153
|
+
--k-bg-hover: rgb(255 255 255 / 0.05);
|
|
154
|
+
--k-bg-active: rgb(255 255 255 / 0.08);
|
|
155
|
+
--k-bg-brand: var(--k-brand-700);
|
|
156
|
+
--k-bg-brand-hover: var(--k-brand-800);
|
|
157
|
+
--k-bg-brand-subtle: color-mix(in srgb, var(--k-brand-500) 14%, transparent);
|
|
158
|
+
--k-bg-error: var(--k-anar-600);
|
|
159
|
+
--k-bg-error-hover: var(--k-anar-700);
|
|
160
|
+
--k-bg-error-subtle: rgb(248 59 71 / 0.14);
|
|
161
|
+
--k-bg-warning-subtle: rgb(249 131 7 / 0.14);
|
|
162
|
+
--k-bg-success-subtle: rgb(106 174 51 / 0.14);
|
|
163
|
+
--k-bg-info-subtle: rgb(61 94 248 / 0.16);
|
|
164
|
+
--k-text-primary: var(--k-shab-50);
|
|
165
|
+
--k-text-secondary: var(--k-shab-200);
|
|
166
|
+
--k-text-tertiary: var(--k-shab-400);
|
|
167
|
+
--k-text-quaternary: var(--k-shab-500);
|
|
168
|
+
--k-text-on-brand: var(--k-shab-0);
|
|
169
|
+
--k-text-brand: var(--k-brand-300);
|
|
170
|
+
--k-text-error: var(--k-anar-400);
|
|
171
|
+
--k-text-warning: var(--k-zafaran-400);
|
|
172
|
+
--k-text-success: var(--k-pesteh-400);
|
|
173
|
+
--k-text-info: var(--k-lajvard-300);
|
|
174
|
+
--k-border-primary: var(--k-shab-700);
|
|
175
|
+
--k-border-secondary: var(--k-shab-800);
|
|
176
|
+
--k-border-brand: var(--k-brand-400);
|
|
177
|
+
--k-border-input: var(--k-shab-500);
|
|
178
|
+
--k-border-error: var(--k-anar-400);
|
|
179
|
+
--k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent);
|
|
180
|
+
--k-ring-error: 0 0 0 4px rgb(248 59 71 / 0.28);
|
|
181
|
+
--k-shadow-skeuomorphic: inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
[data-theme="light"] {
|
|
185
|
+
color-scheme: light;
|
|
186
|
+
--k-bg-primary: var(--k-shab-0);
|
|
187
|
+
--k-bg-secondary: var(--k-shab-50);
|
|
188
|
+
--k-bg-tertiary: var(--k-shab-100);
|
|
189
|
+
--k-bg-elevated: var(--k-shab-0);
|
|
190
|
+
--k-bg-hover: var(--k-shab-50);
|
|
191
|
+
--k-bg-active: var(--k-shab-100);
|
|
192
|
+
--k-bg-brand: var(--k-brand-700);
|
|
193
|
+
--k-bg-brand-hover: var(--k-brand-800);
|
|
194
|
+
--k-bg-brand-subtle: var(--k-brand-50);
|
|
195
|
+
--k-bg-error: var(--k-anar-600);
|
|
196
|
+
--k-bg-error-hover: var(--k-anar-700);
|
|
197
|
+
--k-bg-error-subtle: var(--k-anar-50);
|
|
198
|
+
--k-bg-warning-subtle: var(--k-zafaran-50);
|
|
199
|
+
--k-bg-success-subtle: var(--k-pesteh-50);
|
|
200
|
+
--k-bg-info-subtle: var(--k-lajvard-50);
|
|
201
|
+
--k-text-primary: var(--k-shab-950);
|
|
202
|
+
--k-text-secondary: var(--k-shab-700);
|
|
203
|
+
--k-text-tertiary: var(--k-shab-600);
|
|
204
|
+
--k-text-quaternary: var(--k-shab-500);
|
|
205
|
+
--k-text-on-brand: var(--k-shab-0);
|
|
206
|
+
--k-text-brand: var(--k-brand-700);
|
|
207
|
+
--k-text-error: var(--k-anar-700);
|
|
208
|
+
--k-text-warning: var(--k-zafaran-700);
|
|
209
|
+
--k-text-success: var(--k-pesteh-700);
|
|
210
|
+
--k-text-info: var(--k-lajvard-700);
|
|
211
|
+
--k-border-primary: var(--k-shab-300);
|
|
212
|
+
--k-border-secondary: var(--k-shab-200);
|
|
213
|
+
--k-border-brand: var(--k-brand-600);
|
|
214
|
+
--k-border-input: var(--k-shab-500);
|
|
215
|
+
--k-border-error: var(--k-anar-500);
|
|
216
|
+
--k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent);
|
|
217
|
+
--k-ring-error: 0 0 0 4px rgb(229 29 42 / 0.2);
|
|
218
|
+
--k-shadow-skeuomorphic: inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05);
|
|
219
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kashi-ui/css",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "استایل کامپوننتهای کاشی با CSS خالص — برای هر فریمورکی",
|
|
5
|
+
"main": "./dist/kashi.css",
|
|
6
|
+
"style": "./dist/kashi.css",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./dist/kashi.css",
|
|
9
|
+
"./*.css": "./dist/*.css",
|
|
10
|
+
"./components/*.css": "./dist/components/*.css",
|
|
11
|
+
"./fonts/*": "./dist/fonts/*"
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"README.md"
|
|
16
|
+
],
|
|
17
|
+
"sideEffects": [
|
|
18
|
+
"*.css"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "node build.mjs"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@kashi-ui/tokens": "^0.3.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"vazirmatn": "^33.0.3"
|
|
28
|
+
},
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "git+https://github.com/Sepantapouya/Kashi.git",
|
|
33
|
+
"directory": "packages/css"
|
|
34
|
+
},
|
|
35
|
+
"homepage": "https://kashi.sepantapouya.com",
|
|
36
|
+
"bugs": "https://github.com/Sepantapouya/Kashi/issues",
|
|
37
|
+
"author": "Sepanta Pouya (https://sepantapouya.com)",
|
|
38
|
+
"keywords": [
|
|
39
|
+
"design-system",
|
|
40
|
+
"persian",
|
|
41
|
+
"farsi",
|
|
42
|
+
"rtl",
|
|
43
|
+
"accessibility",
|
|
44
|
+
"ui",
|
|
45
|
+
"css",
|
|
46
|
+
"react"
|
|
47
|
+
],
|
|
48
|
+
"publishConfig": {
|
|
49
|
+
"access": "public"
|
|
50
|
+
}
|
|
51
|
+
}
|