@qumra/fanar 0.0.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/README.md ADDED
@@ -0,0 +1,34 @@
1
+ # `@qumra/fanar`
2
+
3
+ مكتبة مكوّنات قمرة وتوكنزها — **عربي أولاً**، Tailwind 4، RSC-آمن.
4
+
5
+ ```bash
6
+ pnpm add @qumra/fanar
7
+ ```
8
+
9
+ ```tsx
10
+ import { Button, Money } from '@qumra/fanar' // مكوّنات — عميل
11
+ import { cn } from '@qumra/fanar/lib' // دوال — خادم كمان
12
+ import { TOKENS } from '@qumra/fanar/tokens' // قيم — خادم كمان
13
+ ```
14
+
15
+ ```css
16
+ @import 'tailwindcss';
17
+ @import '@qumra/fanar/tokens.css';
18
+ ```
19
+
20
+ ## القواعد الستة
21
+
22
+ مفيش لون بالإيد · الأسطح بالتوكنز الدلالية · خصائص منطقية بس · عناصر
23
+ حقيقية · الأرقام بـ`data-numeric` · المقاسات من السلّم.
24
+
25
+ التفاصيل في `CLAUDE.md`، والقرارات وأسبابها في `DECISIONS.md`.
26
+
27
+ ## التطوير
28
+
29
+ ```bash
30
+ pnpm install
31
+ pnpm verify # الفحوص العشرة — ده تعريف «خلصت»
32
+ ```
33
+
34
+ التوثيق الحيّ (صفحة لكل مكوّن) في المشروع اللي جنبه: [`../preview`](../preview).
@@ -0,0 +1,159 @@
1
+ // src/tokens/tokens.ts
2
+ var TEXT_SCALE = ["micro", "caption", "ui", "body", "lead", "base", "h4", "h3", "h2", "h1", "display", "hero", "title", "mega"];
3
+ var RADIUS_SCALE = ["mark", "xs", "sm", "field", "card", "lg", "section", "full"];
4
+ var SHADOW_SCALE = ["raise", "tip", "panel", "pop", "modal", "toast", "sheet"];
5
+ var CONTAINER_SCALE = ["page", "shell", "note", "lead"];
6
+ var ANIMATE_SCALE = ["qfade", "qslide", "tip", "tip-up", "drawer", "drawer-rtl", "savebar", "skeleton"];
7
+ var COLOR_SCALE = ["surface", "bg", "line", "hover", "ink", "ink2", "muted", "muted2", "border", "soft", "soft2", "brand-100", "brand-900", "brand-ink", "brand", "brand-hover", "brand-deep", "skeleton", "tint", "tint2", "mint", "amber-900", "amber", "amber-bg", "amber-ink", "amber-line", "amber-hover", "green", "green-bg", "green-bg2", "green-line", "green-solid", "violet", "violet-bg", "violet-line", "violet-solid", "red-100", "red", "red-bg", "red-line", "danger", "danger-hover", "night", "hero-body", "hero-meta", "hero-dim", "hero-text", "code-bg", "code-plain", "code-key", "code-tag", "code-attr", "code-str", "code-num", "code-note", "code-dim", "code-line", "code-chip"];
8
+ var TOKENS = {
9
+ "--font-sans": '"Alexandria", system-ui, sans-serif',
10
+ "--color-surface": "#ffffff",
11
+ "--color-bg": "#f7f9f9",
12
+ "--color-line": "#edf1f1",
13
+ "--color-hover": "#f2f6f6",
14
+ "--color-ink": "#020809",
15
+ "--color-ink2": "#3d4545",
16
+ "--color-muted": "#5f6a6a",
17
+ "--color-muted2": "#687373",
18
+ "--color-border": "#7f8c8c",
19
+ "--color-soft": "#eaf2f3",
20
+ "--color-soft2": "#dceded",
21
+ "--color-brand-100": "#a5c9cc",
22
+ "--color-brand-900": "#0a2528",
23
+ "--color-brand-ink": "#0f4a4e",
24
+ "--color-brand": "#207982",
25
+ "--color-brand-hover": "#1a646c",
26
+ "--color-brand-deep": "#0b3b3e",
27
+ "--color-skeleton": "#d6dcdc",
28
+ "--color-tint": "#f4faf8",
29
+ "--color-tint2": "#eff6f3",
30
+ "--color-mint": "#7dd3c0",
31
+ "--color-amber-900": "#3d2a05",
32
+ "--color-amber": "#f8ac33",
33
+ "--color-amber-bg": "#fef6e9",
34
+ "--color-amber-ink": "#85570f",
35
+ "--color-amber-line": "#fbd79a",
36
+ "--color-amber-hover": "#de9219",
37
+ "--color-green": "#1e7a45",
38
+ "--color-green-bg": "#f1faf4",
39
+ "--color-green-bg2": "#e9f6ee",
40
+ "--color-green-line": "#bfe6ce",
41
+ "--color-green-solid": "#1e7a45",
42
+ "--color-violet": "#4b3e8e",
43
+ "--color-violet-bg": "#edeaf6",
44
+ "--color-violet-line": "#ded8ef",
45
+ "--color-violet-solid": "#6d5eb8",
46
+ "--color-red-100": "#f3a79e",
47
+ "--color-red": "#8e2b20",
48
+ "--color-red-bg": "#fdecea",
49
+ "--color-red-line": "#f3c9c4",
50
+ "--color-danger": "#c94134",
51
+ "--color-danger-hover": "#a3362b",
52
+ "--color-night": "#0b0f12",
53
+ "--color-hero-body": "#bfd9d8",
54
+ "--color-hero-meta": "#8fb3b2",
55
+ "--color-hero-dim": "#5e7a79",
56
+ "--color-hero-text": "#d7e3e2",
57
+ "--color-code-bg": "#1f1f1f",
58
+ "--color-code-plain": "#d4d4d4",
59
+ "--color-code-key": "#569cd6",
60
+ "--color-code-tag": "#4ec9b0",
61
+ "--color-code-attr": "#9cdcfe",
62
+ "--color-code-str": "#ce9178",
63
+ "--color-code-num": "#b5cea8",
64
+ "--color-code-note": "#6a9955",
65
+ "--color-code-dim": "#858585",
66
+ "--color-code-line": "#303031",
67
+ "--color-code-chip": "#f4f7f7",
68
+ "--text-micro": "11px",
69
+ "--text-caption": "12px",
70
+ "--text-ui": "13px",
71
+ "--text-body": "14px",
72
+ "--text-lead": "15px",
73
+ "--text-base": "16px",
74
+ "--text-base--line-height": "initial",
75
+ "--text-h4": "17px",
76
+ "--text-h3": "20px",
77
+ "--text-h2": "24px",
78
+ "--text-h1": "30px",
79
+ "--text-display": "36px",
80
+ "--text-hero": "44px",
81
+ "--text-title": "40px",
82
+ "--text-mega": "54px",
83
+ "--container-page": "1600px",
84
+ "--container-shell": "1600px",
85
+ "--container-note": "340px",
86
+ "--container-lead": "520px",
87
+ "--radius-mark": "3px",
88
+ "--radius-xs": "5px",
89
+ "--radius-sm": "7px",
90
+ "--radius-field": "9px",
91
+ "--radius-card": "12px",
92
+ "--radius-lg": "14px",
93
+ "--radius-section": "18px",
94
+ "--radius-full": "999px",
95
+ "--shadow-raise": "0 1px 3px var(--shadow-color)",
96
+ "--shadow-tip": "0 6px 18px var(--shadow-color)",
97
+ "--shadow-panel": "0 10px 30px var(--shadow-color)",
98
+ "--shadow-pop": "0 18px 44px var(--shadow-color)",
99
+ "--shadow-modal": "0 24px 60px rgb(2 8 9 / 0.28)",
100
+ "--shadow-toast": "0 16px 40px rgb(2 8 9 / 0.26)",
101
+ "--shadow-sheet": "0 -14px 40px rgb(2 8 9 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.06)",
102
+ "--shadow-color": "rgb(2 8 9 / 0.14)",
103
+ "--animate-qfade": "qfade 0.16s ease-out",
104
+ "--animate-qslide": "qslidein 0.22s ease-out",
105
+ "--animate-tip": "tip-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1)",
106
+ "--animate-tip-up": "tip-up 0.3s cubic-bezier(0.2, 0.9, 0.2, 1)",
107
+ "--animate-drawer": "drawer-ltr 0.32s cubic-bezier(0.2, 0.9, 0.2, 1)",
108
+ "--animate-drawer-rtl": "drawer-rtl 0.32s cubic-bezier(0.2, 0.9, 0.2, 1)",
109
+ "--animate-savebar": "savebar-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1)",
110
+ "--animate-skeleton": "skeleton-pulse 1.6s ease-in-out infinite",
111
+ "--num-align": "right",
112
+ "--num-align-far": "left",
113
+ "--num-pad-right": "0.875rem",
114
+ "--num-pad-left": "3.5rem",
115
+ "--num-icon-pad-right": "2.5rem",
116
+ "--num-icon-pad-left": "0.875rem"
117
+ };
118
+ var DARK_TOKENS = {
119
+ "--color-surface": "#101718",
120
+ "--color-bg": "#0a0f10",
121
+ "--color-line": "#1e2829",
122
+ "--color-hover": "#1a2425",
123
+ "--color-ink": "#f2f6f6",
124
+ "--color-ink2": "#c7d1d1",
125
+ "--color-muted": "#93a0a0",
126
+ "--color-muted2": "#7a8787",
127
+ "--color-border": "#5e6b6c",
128
+ "--color-soft": "#12363a",
129
+ "--color-soft2": "#17454a",
130
+ "--color-brand-ink": "#7dd3c0",
131
+ "--color-skeleton": "#2c3232",
132
+ "--color-amber": "#f8ac33",
133
+ "--color-amber-bg": "#2b2009",
134
+ "--color-amber-ink": "#f5c77a",
135
+ "--color-amber-line": "#5c4415",
136
+ "--color-green": "#6ecf9a",
137
+ "--color-green-bg": "#0d2119",
138
+ "--color-green-bg2": "#102a22",
139
+ "--color-green-line": "#245140",
140
+ "--color-violet": "#b9aeea",
141
+ "--color-violet-bg": "#1e1a33",
142
+ "--color-violet-line": "#38305c",
143
+ "--color-red": "#f3a79e",
144
+ "--color-red-bg": "#2c1613",
145
+ "--color-red-line": "#5c2a24",
146
+ "--color-code-chip": "#17201f",
147
+ "--shadow-color": "rgb(0 0 0 / 0.55)"
148
+ };
149
+
150
+ export {
151
+ TEXT_SCALE,
152
+ RADIUS_SCALE,
153
+ SHADOW_SCALE,
154
+ CONTAINER_SCALE,
155
+ ANIMATE_SCALE,
156
+ COLOR_SCALE,
157
+ TOKENS,
158
+ DARK_TOKENS
159
+ };