@craftzbay/ui 0.9.0 → 0.10.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.
Files changed (171) hide show
  1. package/README.md +72 -6
  2. package/dist-lib/components/ui/Accordion.js +60 -0
  3. package/dist-lib/components/ui/Accordion.js.map +1 -0
  4. package/dist-lib/components/ui/Alert.d.ts +1 -1
  5. package/dist-lib/components/ui/Alert.js +66 -0
  6. package/dist-lib/components/ui/Alert.js.map +1 -0
  7. package/dist-lib/components/ui/Avatar.d.ts +2 -2
  8. package/dist-lib/components/ui/Avatar.js +96 -0
  9. package/dist-lib/components/ui/Avatar.js.map +1 -0
  10. package/dist-lib/components/ui/Badge.d.ts +1 -1
  11. package/dist-lib/components/ui/Badge.js +67 -0
  12. package/dist-lib/components/ui/Badge.js.map +1 -0
  13. package/dist-lib/components/ui/Breadcrumbs.js +34 -0
  14. package/dist-lib/components/ui/Breadcrumbs.js.map +1 -0
  15. package/dist-lib/components/ui/Button.d.ts +1 -1
  16. package/dist-lib/components/ui/Button.js +117 -0
  17. package/dist-lib/components/ui/Button.js.map +1 -0
  18. package/dist-lib/components/ui/Calendar.d.ts +7 -1
  19. package/dist-lib/components/ui/Calendar.js +111 -0
  20. package/dist-lib/components/ui/Calendar.js.map +1 -0
  21. package/dist-lib/components/ui/Card.d.ts +1 -1
  22. package/dist-lib/components/ui/Card.js +116 -0
  23. package/dist-lib/components/ui/Card.js.map +1 -0
  24. package/dist-lib/components/ui/Carousel.d.ts +5 -1
  25. package/dist-lib/components/ui/Carousel.js +143 -0
  26. package/dist-lib/components/ui/Carousel.js.map +1 -0
  27. package/dist-lib/components/ui/Chart.d.ts +26 -4
  28. package/dist-lib/components/ui/Chart.js +253 -0
  29. package/dist-lib/components/ui/Chart.js.map +1 -0
  30. package/dist-lib/components/ui/Checkbox.js +56 -0
  31. package/dist-lib/components/ui/Checkbox.js.map +1 -0
  32. package/dist-lib/components/ui/Combobox.d.ts +7 -0
  33. package/dist-lib/components/ui/Combobox.js +164 -0
  34. package/dist-lib/components/ui/Combobox.js.map +1 -0
  35. package/dist-lib/components/ui/CommandPalette.d.ts +3 -3
  36. package/dist-lib/components/ui/CommandPalette.js +174 -0
  37. package/dist-lib/components/ui/CommandPalette.js.map +1 -0
  38. package/dist-lib/components/ui/ContextMenu.js +150 -0
  39. package/dist-lib/components/ui/ContextMenu.js.map +1 -0
  40. package/dist-lib/components/ui/DataGrid.js +84 -0
  41. package/dist-lib/components/ui/DataGrid.js.map +1 -0
  42. package/dist-lib/components/ui/DatePicker.d.ts +16 -13
  43. package/dist-lib/components/ui/DatePicker.js +174 -0
  44. package/dist-lib/components/ui/DatePicker.js.map +1 -0
  45. package/dist-lib/components/ui/DesignSystemProvider.d.ts +8 -1
  46. package/dist-lib/components/ui/DesignSystemProvider.js +79 -0
  47. package/dist-lib/components/ui/DesignSystemProvider.js.map +1 -0
  48. package/dist-lib/components/ui/Dialog.d.ts +1 -1
  49. package/dist-lib/components/ui/Dialog.js +140 -0
  50. package/dist-lib/components/ui/Dialog.js.map +1 -0
  51. package/dist-lib/components/ui/Drawer.d.ts +6 -0
  52. package/dist-lib/components/ui/Drawer.js +98 -0
  53. package/dist-lib/components/ui/Drawer.js.map +1 -0
  54. package/dist-lib/components/ui/DropdownMenu.js +164 -0
  55. package/dist-lib/components/ui/DropdownMenu.js.map +1 -0
  56. package/dist-lib/components/ui/EmptyState.js +32 -0
  57. package/dist-lib/components/ui/EmptyState.js.map +1 -0
  58. package/dist-lib/components/ui/ErrorState.js +48 -0
  59. package/dist-lib/components/ui/ErrorState.js.map +1 -0
  60. package/dist-lib/components/ui/FileUpload.d.ts +3 -0
  61. package/dist-lib/components/ui/FileUpload.js +108 -0
  62. package/dist-lib/components/ui/FileUpload.js.map +1 -0
  63. package/dist-lib/components/ui/Form.d.ts +1 -0
  64. package/dist-lib/components/ui/Form.js +105 -0
  65. package/dist-lib/components/ui/Form.js.map +1 -0
  66. package/dist-lib/components/ui/Icon.js +26 -0
  67. package/dist-lib/components/ui/Icon.js.map +1 -0
  68. package/dist-lib/components/ui/IconButton.d.ts +1 -1
  69. package/dist-lib/components/ui/IconButton.js +56 -0
  70. package/dist-lib/components/ui/IconButton.js.map +1 -0
  71. package/dist-lib/components/ui/Input.d.ts +6 -3
  72. package/dist-lib/components/ui/Input.js +135 -0
  73. package/dist-lib/components/ui/Input.js.map +1 -0
  74. package/dist-lib/components/ui/Kbd.js +24 -0
  75. package/dist-lib/components/ui/Kbd.js.map +1 -0
  76. package/dist-lib/components/ui/MultiSelect.d.ts +3 -1
  77. package/dist-lib/components/ui/MultiSelect.js +196 -0
  78. package/dist-lib/components/ui/MultiSelect.js.map +1 -0
  79. package/dist-lib/components/ui/Pagination.d.ts +23 -0
  80. package/dist-lib/components/ui/Pagination.js +148 -0
  81. package/dist-lib/components/ui/Pagination.js.map +1 -0
  82. package/dist-lib/components/ui/Popover.js +35 -0
  83. package/dist-lib/components/ui/Popover.js.map +1 -0
  84. package/dist-lib/components/ui/Progress.js +95 -0
  85. package/dist-lib/components/ui/Progress.js.map +1 -0
  86. package/dist-lib/components/ui/RadioGroup.js +64 -0
  87. package/dist-lib/components/ui/RadioGroup.js.map +1 -0
  88. package/dist-lib/components/ui/ScrollArea.js +44 -0
  89. package/dist-lib/components/ui/ScrollArea.js.map +1 -0
  90. package/dist-lib/components/ui/Select.js +131 -0
  91. package/dist-lib/components/ui/Select.js.map +1 -0
  92. package/dist-lib/components/ui/Separator.js +26 -0
  93. package/dist-lib/components/ui/Separator.js.map +1 -0
  94. package/dist-lib/components/ui/Sheet.d.ts +1 -1
  95. package/dist-lib/components/ui/Sheet.js +113 -0
  96. package/dist-lib/components/ui/Sheet.js.map +1 -0
  97. package/dist-lib/components/ui/Sidebar.d.ts +18 -6
  98. package/dist-lib/components/ui/Sidebar.js +169 -0
  99. package/dist-lib/components/ui/Sidebar.js.map +1 -0
  100. package/dist-lib/components/ui/Skeleton.js +28 -0
  101. package/dist-lib/components/ui/Skeleton.js.map +1 -0
  102. package/dist-lib/components/ui/Slider.js +52 -0
  103. package/dist-lib/components/ui/Slider.js.map +1 -0
  104. package/dist-lib/components/ui/Snackbar.d.ts +1 -1
  105. package/dist-lib/components/ui/Snackbar.js +56 -0
  106. package/dist-lib/components/ui/Snackbar.js.map +1 -0
  107. package/dist-lib/components/ui/Spinner.js +42 -0
  108. package/dist-lib/components/ui/Spinner.js.map +1 -0
  109. package/dist-lib/components/ui/Stepper.js +88 -0
  110. package/dist-lib/components/ui/Stepper.js.map +1 -0
  111. package/dist-lib/components/ui/Switch.js +77 -0
  112. package/dist-lib/components/ui/Switch.js.map +1 -0
  113. package/dist-lib/components/ui/Table.d.ts +9 -1
  114. package/dist-lib/components/ui/Table.js +157 -0
  115. package/dist-lib/components/ui/Table.js.map +1 -0
  116. package/dist-lib/components/ui/Tabs.d.ts +1 -1
  117. package/dist-lib/components/ui/Tabs.js +89 -0
  118. package/dist-lib/components/ui/Tabs.js.map +1 -0
  119. package/dist-lib/components/ui/TagInput.d.ts +17 -2
  120. package/dist-lib/components/ui/TagInput.js +111 -0
  121. package/dist-lib/components/ui/TagInput.js.map +1 -0
  122. package/dist-lib/components/ui/Textarea.js +77 -0
  123. package/dist-lib/components/ui/Textarea.js.map +1 -0
  124. package/dist-lib/components/ui/Timeline.d.ts +16 -6
  125. package/dist-lib/components/ui/Timeline.js +52 -0
  126. package/dist-lib/components/ui/Timeline.js.map +1 -0
  127. package/dist-lib/components/ui/Toast.d.ts +1 -1
  128. package/dist-lib/components/ui/Toast.js +171 -0
  129. package/dist-lib/components/ui/Toast.js.map +1 -0
  130. package/dist-lib/components/ui/Tooltip.js +58 -0
  131. package/dist-lib/components/ui/Tooltip.js.map +1 -0
  132. package/dist-lib/components/ui/TopNav.js +52 -0
  133. package/dist-lib/components/ui/TopNav.js.map +1 -0
  134. package/dist-lib/components/ui/Tree.d.ts +27 -5
  135. package/dist-lib/components/ui/Tree.js +167 -0
  136. package/dist-lib/components/ui/Tree.js.map +1 -0
  137. package/dist-lib/hooks/use-field-ids.d.ts +29 -0
  138. package/dist-lib/hooks/use-field-ids.js +18 -0
  139. package/dist-lib/hooks/use-field-ids.js.map +1 -0
  140. package/dist-lib/hooks/use-media-query.js +18 -0
  141. package/dist-lib/hooks/use-media-query.js.map +1 -0
  142. package/dist-lib/hooks/use-strings.d.ts +5 -0
  143. package/dist-lib/hooks/use-strings.js +12 -0
  144. package/dist-lib/hooks/use-strings.js.map +1 -0
  145. package/dist-lib/hooks/use-toast.js +36 -0
  146. package/dist-lib/hooks/use-toast.js.map +1 -0
  147. package/dist-lib/icon.d.ts +8 -0
  148. package/dist-lib/icon.js +7 -0
  149. package/dist-lib/icon.js.map +1 -0
  150. package/dist-lib/icons/index.d.ts +71 -88
  151. package/dist-lib/icons/index.js +145 -0
  152. package/dist-lib/icons/index.js.map +1 -0
  153. package/dist-lib/illustrations/index.js +105 -0
  154. package/dist-lib/illustrations/index.js.map +1 -0
  155. package/dist-lib/index.d.ts +62 -59
  156. package/dist-lib/index.js +267 -4529
  157. package/dist-lib/index.js.map +1 -1
  158. package/dist-lib/lib/strings.d.ts +129 -0
  159. package/dist-lib/lib/strings.js +85 -0
  160. package/dist-lib/lib/strings.js.map +1 -0
  161. package/dist-lib/lib/strings.mn.d.ts +3 -0
  162. package/dist-lib/lib/strings.mn.js +70 -0
  163. package/dist-lib/lib/strings.mn.js.map +1 -0
  164. package/dist-lib/lib/utils.d.ts +0 -1
  165. package/dist-lib/lib/utils.js +10 -0
  166. package/dist-lib/lib/utils.js.map +1 -0
  167. package/dist-lib/styles.css +1 -1
  168. package/dist-lib/theme.css +777 -0
  169. package/package.json +31 -8
  170. package/dist-lib/index.cjs +0 -8
  171. package/dist-lib/index.cjs.map +0 -1
package/dist-lib/theme.css ADDED
@@ -0,0 +1,777 @@
1
+ /* @craftzbay/ui theme — tokens, semantic vars, dark variant, base layer. No `@import 'tailwindcss'` here:
2
+ * consumers with Tailwind v4 import this AFTER tailwindcss (+ tw-animate-css for animate-in/out utilities). */
3
+ /* =============================================================================
4
+ * Refined-Minimal Design System — Tailwind v4 token definitions
5
+ *
6
+ * Architecture:
7
+ * 1. Raw palette + typographic + spatial primitives live in `@theme`.
8
+ * 2. Semantic tokens (background/foreground/border/etc.) are CSS custom
9
+ * properties on `:root` and `.dark`, exposed to Tailwind via
10
+ * `@theme inline` so utilities like `bg-background` work and swap with
11
+ * the `dark` class on `<html>`.
12
+ * 3. Components must reference semantic tokens, never raw palette steps.
13
+ *
14
+ * Contrast notes (WCAG AA target = 4.5:1 body / 3:1 large text + UI).
15
+ * Ratios computed from the hsl() values below (relative luminance, WCAG 2.x):
16
+ * Light mode
17
+ * foreground (neutral-900) on background (white) → 17.9:1
18
+ * foreground-muted (neutral-600) on background (white) → 7.4:1
19
+ * foreground-subtle (neutral-500) on background (white) → 4.7:1
20
+ * accent-600 text on background (white) → 7.7:1
21
+ * accent-600 bg + white text → 7.7:1
22
+ * success-solid bg + white text → 5.2:1
23
+ * warning-solid bg + white text → 4.6:1
24
+ * danger-solid bg + white text → 4.8:1
25
+ * border-input (hsl 215 16% 58%) on background (white) → 3.2:1 (UI)
26
+ * border (neutral-200) / border-strong (neutral-300) → decorative (1.3 / 1.7)
27
+ * Dark mode
28
+ * foreground (neutral-50) on background (neutral-950) → 18.8:1
29
+ * foreground-muted (neutral-300) on background (neutral-950) → 13.3:1
30
+ * foreground-subtle (neutral-400) on background (neutral-950) → 7.7:1
31
+ * accent-400 text on background (neutral-950) → 5.4:1
32
+ * accent-400 bg + neutral-950 text → 5.4:1
33
+ * success/warning/danger-solid + neutral-950 text → 9.0 / 9.3 / 5.2:1
34
+ * border-input (hsl 215 16% 42%) on background (neutral-950) → 3.5:1 (UI)
35
+ * ============================================================================= */
36
+
37
+ /* Geist + Geist Mono are loaded via a <link> in index.html (Google Fonts). */
38
+
39
+ /* The dark variant flips on the `dark` class anywhere up the tree. */
40
+ @custom-variant dark (&:where(.dark, .dark *));
41
+
42
+ /* -----------------------------------------------------------------------------
43
+ * Raw tokens — palette, type, space, radius, shadow, motion, z-index
44
+ * --------------------------------------------------------------------------- */
45
+ @theme {
46
+ /* Font families ---------------------------------------------------------- */
47
+ --font-sans:
48
+ 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
49
+ sans-serif;
50
+ --font-mono:
51
+ 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas,
52
+ 'Liberation Mono', 'Courier New', monospace;
53
+
54
+ /* Type scale — paired size + line-height + tracking ---------------------- */
55
+ --text-xs: 0.75rem; /* 12 */
56
+ --text-xs--line-height: 1rem; /* 16 */
57
+ --text-xs--letter-spacing: 0.005em;
58
+
59
+ --text-sm: 0.8125rem; /* 13 — UI default */
60
+ --text-sm--line-height: 1.25rem; /* 20 */
61
+ --text-sm--letter-spacing: 0;
62
+
63
+ --text-base: 0.875rem; /* 14 — body */
64
+ --text-base--line-height: 1.5rem; /* 24 — 1.71 */
65
+ --text-base--letter-spacing: 0;
66
+
67
+ --text-md: 0.9375rem; /* 15 */
68
+ --text-md--line-height: 1.5rem;
69
+
70
+ --text-lg: 1rem; /* 16 */
71
+ --text-lg--line-height: 1.5rem;
72
+ --text-lg--letter-spacing: -0.005em;
73
+
74
+ --text-xl: 1.125rem; /* 18 */
75
+ --text-xl--line-height: 1.75rem;
76
+ --text-xl--letter-spacing: -0.01em;
77
+
78
+ --text-2xl: 1.375rem; /* 22 */
79
+ --text-2xl--line-height: 1.875rem;
80
+ --text-2xl--letter-spacing: -0.015em;
81
+
82
+ --text-3xl: 1.75rem; /* 28 */
83
+ --text-3xl--line-height: 2.125rem;
84
+ --text-3xl--letter-spacing: -0.02em;
85
+
86
+ --text-4xl: 2.25rem; /* 36 */
87
+ --text-4xl--line-height: 2.5rem;
88
+ --text-4xl--letter-spacing: -0.025em;
89
+
90
+ --text-5xl: 3rem; /* 48 */
91
+ --text-5xl--line-height: 1.1;
92
+ --text-5xl--letter-spacing: -0.03em;
93
+
94
+ --text-6xl: 3.75rem; /* 60 */
95
+ --text-6xl--line-height: 1.05;
96
+ --text-6xl--letter-spacing: -0.035em;
97
+
98
+ --text-7xl: 4.5rem; /* 72 */
99
+ --text-7xl--line-height: 1.05;
100
+ --text-7xl--letter-spacing: -0.04em;
101
+
102
+ /* Font weights — restricted to three. ------------------------------------ */
103
+ --font-weight-normal: 400;
104
+ --font-weight-medium: 500;
105
+ --font-weight-semibold: 600;
106
+
107
+ /* Spacing scale (rem) — disciplined, no orphan steps. -------------------- */
108
+ --spacing-0: 0rem;
109
+ --spacing-px: 1px;
110
+ --spacing-0_5: 0.125rem;
111
+ --spacing-1: 0.25rem;
112
+ --spacing-1_5: 0.375rem;
113
+ --spacing-2: 0.5rem;
114
+ --spacing-2_5: 0.625rem;
115
+ --spacing-3: 0.75rem;
116
+ --spacing-4: 1rem;
117
+ --spacing-5: 1.25rem;
118
+ --spacing-6: 1.5rem;
119
+ --spacing-8: 2rem;
120
+ --spacing-10: 2.5rem;
121
+ --spacing-12: 3rem;
122
+ --spacing-16: 4rem;
123
+ --spacing-20: 5rem;
124
+ --spacing-24: 6rem;
125
+ --spacing-32: 8rem;
126
+
127
+ /* Border radius — modest. ------------------------------------------------ */
128
+ --radius-none: 0px;
129
+ --radius-sm: 4px;
130
+ --radius-md: 6px;
131
+ --radius-lg: 8px;
132
+ --radius-xl: 12px;
133
+ --radius-full: 9999px;
134
+
135
+ /* Shadow — neutral, whisper-soft. Reserved for floating surfaces. -------- */
136
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
137
+ --shadow-sm:
138
+ 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
139
+ --shadow-md:
140
+ 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
141
+ --shadow-lg:
142
+ 0 12px 24px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
143
+ --shadow-xl:
144
+ 0 24px 48px -12px rgb(0 0 0 / 0.12), 0 8px 16px -8px rgb(0 0 0 / 0.06);
145
+
146
+ /* Z-index scale — semantic. ---------------------------------------------- */
147
+ --z-dropdown: 1000;
148
+ --z-sticky: 1100;
149
+ --z-overlay: 1200;
150
+ --z-modal: 1300;
151
+ --z-popover: 1400;
152
+ --z-toast: 1500;
153
+ --z-tooltip: 1600;
154
+
155
+ /* Motion ---------------------------------------------------------------- */
156
+ --duration-fast: 120ms;
157
+ --duration-base: 160ms;
158
+ --duration-slow: 240ms;
159
+
160
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
161
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
162
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
163
+
164
+ /* Breakpoints ----------------------------------------------------------- */
165
+ --breakpoint-sm: 640px;
166
+ --breakpoint-md: 768px;
167
+ --breakpoint-lg: 1024px;
168
+ --breakpoint-xl: 1280px;
169
+ --breakpoint-2xl: 1536px;
170
+
171
+ /* ============================================================================
172
+ * Raw palette — cool-gray neutrals + graphite-indigo accent + semantic ramps.
173
+ *
174
+ * Light- and dark-mode surface choices live further down, in the
175
+ * `:root` / `.dark` blocks. These raw steps are stable across modes.
176
+ * ========================================================================== */
177
+
178
+ /* Neutral — cool gray (hue ≈ 220°) -------------------------------------- */
179
+ --color-neutral-50: hsl(210 40% 98%); /* #f8fafc */
180
+ --color-neutral-100: hsl(210 40% 96%); /* #f1f5f9 */
181
+ --color-neutral-200: hsl(214 32% 91%); /* #e2e8f0 */
182
+ --color-neutral-300: hsl(213 27% 84%); /* #cbd5e1 */
183
+ --color-neutral-400: hsl(215 20% 65%); /* #94a3b8 */
184
+ --color-neutral-500: hsl(215 16% 47%); /* #64748b */
185
+ --color-neutral-600: hsl(215 19% 35%); /* #475569 */
186
+ --color-neutral-700: hsl(215 25% 27%); /* #334155 */
187
+ --color-neutral-800: hsl(217 33% 17%); /* #1e293b */
188
+ --color-neutral-900: hsl(222 47% 11%); /* #0f172a */
189
+ --color-neutral-950: hsl(229 50% 6%); /* #0a0d14 (slightly warmer than slate-950) */
190
+
191
+ /* Accent — graphite indigo (desaturated indigo, hue ≈ 238°) ------------- */
192
+ --color-accent-50: hsl(232 100% 97%); /* #eef2ff */
193
+ --color-accent-100: hsl(232 87% 94%); /* #e0e6ff */
194
+ --color-accent-200: hsl(233 79% 87%); /* #c7d0fb */
195
+ --color-accent-300: hsl(234 71% 78%); /* #a5b1f7 */
196
+ --color-accent-400: hsl(238 60% 67%); /* #828df0 */
197
+ --color-accent-500: hsl(238 55% 58%); /* #6371df */
198
+ --color-accent-600: hsl(238 50% 49%); /* #4e5fc4 */
199
+ --color-accent-700: hsl(238 48% 40%); /* #4350a7 */
200
+ --color-accent-800: hsl(238 43% 32%); /* #3a4385 */
201
+ --color-accent-900: hsl(238 40% 26%); /* #312f6c */
202
+ --color-accent-950: hsl(238 50% 16%); /* #1c1d50 */
203
+
204
+ /* Success — emerald, muted -------------------------------------------- */
205
+ --color-success-50: hsl(152 76% 96%);
206
+ --color-success-100: hsl(152 71% 91%);
207
+ --color-success-200: hsl(152 64% 80%);
208
+ --color-success-300: hsl(154 60% 64%);
209
+ --color-success-400: hsl(157 55% 50%);
210
+ --color-success-500: hsl(160 60% 42%);
211
+ --color-success-600: hsl(161 64% 33%);
212
+ --color-success-700: hsl(163 70% 26%);
213
+ --color-success-800: hsl(163 70% 18%);
214
+ --color-success-900: hsl(164 75% 12%);
215
+ --color-success-950: hsl(165 80% 6%);
216
+
217
+ /* Warning — amber, muted ---------------------------------------------- */
218
+ --color-warning-50: hsl(48 100% 96%);
219
+ --color-warning-100: hsl(48 96% 89%);
220
+ --color-warning-200: hsl(45 95% 78%);
221
+ --color-warning-300: hsl(40 92% 65%);
222
+ --color-warning-400: hsl(35 90% 56%);
223
+ --color-warning-500: hsl(30 85% 48%);
224
+ --color-warning-600: hsl(26 80% 40%);
225
+ --color-warning-700: hsl(23 75% 33%);
226
+ --color-warning-800: hsl(22 70% 26%);
227
+ --color-warning-900: hsl(22 65% 19%);
228
+ --color-warning-950: hsl(20 60% 10%);
229
+
230
+ /* Danger — red, muted -------------------------------------------------- */
231
+ --color-danger-50: hsl(0 86% 97%);
232
+ --color-danger-100: hsl(0 93% 94%);
233
+ --color-danger-200: hsl(0 96% 89%);
234
+ --color-danger-300: hsl(0 94% 82%);
235
+ --color-danger-400: hsl(0 91% 71%);
236
+ --color-danger-500: hsl(0 84% 60%);
237
+ --color-danger-600: hsl(0 72% 51%);
238
+ --color-danger-700: hsl(0 74% 42%);
239
+ --color-danger-800: hsl(0 70% 35%);
240
+ --color-danger-900: hsl(0 63% 31%);
241
+ --color-danger-950: hsl(0 75% 15%);
242
+
243
+ /* Info — re-use the accent. Documented intentionally so future authors do not
244
+ introduce a fifth hue for informational state. ----------------------- */
245
+ --color-info-50: var(--color-accent-50);
246
+ --color-info-100: var(--color-accent-100);
247
+ --color-info-200: var(--color-accent-200);
248
+ --color-info-300: var(--color-accent-300);
249
+ --color-info-400: var(--color-accent-400);
250
+ --color-info-500: var(--color-accent-500);
251
+ --color-info-600: var(--color-accent-600);
252
+ --color-info-700: var(--color-accent-700);
253
+ --color-info-800: var(--color-accent-800);
254
+ --color-info-900: var(--color-accent-900);
255
+ --color-info-950: var(--color-accent-950);
256
+ }
257
+
258
+ /* -----------------------------------------------------------------------------
259
+ * Semantic tokens — bound to mode via :root and .dark.
260
+ * These are the names components should reference (bg-background, text-foreground, ...).
261
+ * --------------------------------------------------------------------------- */
262
+ :root {
263
+ /* Surfaces ------------------------------------------------------------- */
264
+ --background: hsl(0 0% 100%);
265
+ --background-subtle: hsl(210 40% 98%);
266
+ --background-muted: hsl(210 40% 96%);
267
+
268
+ /* Text ----------------------------------------------------------------- */
269
+ --foreground: hsl(222 47% 11%);
270
+ --foreground-muted: hsl(215 19% 35%);
271
+ --foreground-subtle: hsl(215 16% 47%);
272
+
273
+ /* Borders -------------------------------------------------------------- */
274
+ --border: hsl(214 32% 91%);
275
+ --border-strong: hsl(213 27% 84%);
276
+ --border-input: hsl(215 16% 58%); /* ≥3:1 on background — form control edges */
277
+
278
+ /* Card / popover ------------------------------------------------------- */
279
+ --card: hsl(0 0% 100%);
280
+ --card-foreground: hsl(222 47% 11%);
281
+ --popover: hsl(0 0% 100%);
282
+ --popover-foreground: hsl(222 47% 11%);
283
+
284
+ /* Accent — semantic action ------------------------------------------- */
285
+ --accent: hsl(238 50% 49%); /* accent-600 */
286
+ --accent-foreground: hsl(0 0% 100%);
287
+ --accent-subtle: hsl(232 100% 97%); /* accent-50 */
288
+ --accent-subtle-foreground: hsl(238 48% 40%); /* accent-700 */
289
+ /* Hover/active derive from --accent so brand / data-accent presets follow. */
290
+ --accent-hover: color-mix(in oklab, var(--accent) 88%, black);
291
+ --accent-active: color-mix(in oklab, var(--accent) 78%, black);
292
+
293
+ /* Interaction surfaces ------------------------------------------------ */
294
+ --surface-hover: hsl(214 32% 91%); /* neutral-200 */
295
+ --surface-active: hsl(213 27% 84%); /* neutral-300 */
296
+ --overlay: hsl(229 50% 6% / 0.6);
297
+ --tooltip: hsl(222 47% 11%);
298
+ --tooltip-foreground: hsl(210 40% 98%);
299
+ --chart-1: var(--accent);
300
+ --chart-2: hsl(162 66% 29%);
301
+ --chart-3: hsl(38 92% 40%);
302
+ --chart-4: hsl(0 72% 45%);
303
+ --chart-5: hsl(215 16% 47%);
304
+ --chart-6: hsl(262 52% 55%);
305
+ --switch-track-off: hsl(213 27% 84%);
306
+ --switch-thumb: hsl(0 0% 100%);
307
+
308
+ /* Status — 4-step mini scales ----------------------------------------- */
309
+ --success-subtle: hsl(152 76% 96%);
310
+ --success-border: hsl(152 64% 80%);
311
+ --success-foreground: hsl(163 70% 26%);
312
+ --success-solid: hsl(162 66% 29%); /* darkened from success-600 so white text ≥4.5:1 */
313
+ --on-success: hsl(0 0% 100%);
314
+
315
+ --warning-subtle: hsl(48 100% 96%);
316
+ --warning-border: hsl(45 95% 78%);
317
+ --warning-foreground: hsl(23 75% 33%);
318
+ --warning-solid: hsl(26 80% 40%);
319
+ --on-warning: hsl(0 0% 100%);
320
+
321
+ --danger-subtle: hsl(0 86% 97%);
322
+ --danger-border: hsl(0 96% 89%);
323
+ --danger-foreground: hsl(0 74% 42%);
324
+ --danger-solid: hsl(0 72% 51%);
325
+ --on-danger: hsl(0 0% 100%);
326
+ --danger-hover: color-mix(in oklab, var(--danger-solid) 88%, black);
327
+ --danger-active: color-mix(in oklab, var(--danger-solid) 78%, black);
328
+
329
+ --info-subtle: hsl(232 100% 97%);
330
+ --info-border: hsl(233 79% 87%);
331
+ --info-foreground: hsl(238 48% 40%);
332
+ --info-solid: hsl(238 50% 49%);
333
+ --on-info: hsl(0 0% 100%);
334
+
335
+ /* Focus ring ----------------------------------------------------------- */
336
+ --ring: hsl(238 55% 58%); /* accent-500 */
337
+ --ring-offset: hsl(0 0% 100%);
338
+
339
+ /* Selection ----------------------------------------------------------- */
340
+ --selection: hsl(232 100% 94%);
341
+ --selection-foreground: hsl(238 48% 40%);
342
+ }
343
+
344
+ .dark {
345
+ --background: hsl(229 50% 6%);
346
+ --background-subtle: hsl(222 47% 9%);
347
+ --background-muted: hsl(217 33% 13%);
348
+
349
+ --foreground: hsl(210 40% 98%);
350
+ --foreground-muted: hsl(213 27% 84%);
351
+ --foreground-subtle: hsl(215 20% 65%);
352
+
353
+ --border: hsl(217 33% 17%);
354
+ --border-strong: hsl(215 25% 27%);
355
+ --border-input: hsl(215 16% 42%);
356
+
357
+ /* Floating/card surfaces sit one step above background-subtle for lift. */
358
+ --card: hsl(222 47% 11%);
359
+ --card-foreground: hsl(210 40% 98%);
360
+ --popover: hsl(222 47% 11%);
361
+ --popover-foreground: hsl(210 40% 98%);
362
+
363
+ --accent: hsl(238 60% 67%); /* accent-400 — 5.4:1 with neutral-950 text and as text on bg */
364
+ --accent-foreground: hsl(229 50% 6%);
365
+ --accent-subtle: hsl(238 50% 16%); /* accent-950 */
366
+ --accent-subtle-foreground: hsl(234 71% 78%); /* accent-300 */
367
+ --accent-hover: color-mix(in oklab, var(--accent) 88%, white);
368
+ --accent-active: color-mix(in oklab, var(--accent) 78%, white);
369
+
370
+ --surface-hover: hsl(217 33% 17%); /* neutral-800 */
371
+ --surface-active: hsl(215 25% 27%); /* neutral-700 */
372
+ --overlay: hsl(229 50% 6% / 0.7);
373
+ --tooltip: hsl(210 40% 98%);
374
+ --tooltip-foreground: hsl(222 47% 11%);
375
+ --chart-1: var(--accent);
376
+ --chart-2: hsl(162 60% 55%);
377
+ --chart-3: hsl(38 92% 60%);
378
+ --chart-4: hsl(0 80% 68%);
379
+ --chart-5: hsl(215 20% 65%);
380
+ --chart-6: hsl(262 70% 75%);
381
+ --switch-track-off: hsl(215 25% 27%);
382
+ --switch-thumb: hsl(0 0% 100%);
383
+
384
+ --success-subtle: hsl(165 80% 8%);
385
+ --success-border: hsl(163 70% 18%);
386
+ --success-foreground: hsl(154 60% 64%);
387
+ --success-solid: hsl(157 55% 50%);
388
+ --on-success: hsl(229 50% 6%);
389
+
390
+ --warning-subtle: hsl(20 60% 10%);
391
+ --warning-border: hsl(22 70% 26%);
392
+ --warning-foreground: hsl(40 92% 65%);
393
+ --warning-solid: hsl(35 90% 56%);
394
+ --on-warning: hsl(229 50% 6%);
395
+
396
+ --danger-subtle: hsl(0 75% 12%);
397
+ --danger-border: hsl(0 70% 35%);
398
+ --danger-foreground: hsl(0 91% 71%);
399
+ --danger-solid: hsl(0 84% 60%);
400
+ --on-danger: hsl(229 50% 6%);
401
+ --danger-hover: color-mix(in oklab, var(--danger-solid) 88%, white);
402
+ --danger-active: color-mix(in oklab, var(--danger-solid) 78%, white);
403
+
404
+ --info-subtle: hsl(238 50% 16%);
405
+ --info-border: hsl(238 43% 32%);
406
+ --info-foreground: hsl(234 71% 78%);
407
+ --info-solid: hsl(238 60% 67%);
408
+ --on-info: hsl(229 50% 6%);
409
+
410
+ --ring: hsl(238 60% 67%); /* accent-400 */
411
+ --ring-offset: hsl(229 50% 6%);
412
+
413
+ --selection: hsl(238 43% 32%);
414
+ --selection-foreground: hsl(232 100% 97%);
415
+ }
416
+
417
+ /* -----------------------------------------------------------------------------
418
+ * Accent presets — opt in by setting `data-accent="<name>"` on <html>.
419
+ *
420
+ * Only the accent ramp changes; everything else (neutrals, status colours) is
421
+ * shared. The hover/active steps (`--color-accent-700/800`) are mode-agnostic;
422
+ * the semantic `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /
423
+ * `--ring` have a light value (:root[data-accent]) and a brightened dark value
424
+ * (.dark[data-accent], listed second so it wins in dark mode). Applied pre-paint
425
+ * by theme-init.js, so switching accent never flashes.
426
+ * --------------------------------------------------------------------------- */
427
+ [data-accent='blue'] {
428
+ --color-accent-700: oklch(0.47 0.16 250);
429
+ --color-accent-800: oklch(0.39 0.14 250);
430
+ }
431
+ :root[data-accent='blue'] {
432
+ --accent: oklch(0.55 0.16 250);
433
+ --accent-subtle: oklch(0.96 0.03 250);
434
+ --accent-subtle-foreground: oklch(0.45 0.15 250);
435
+ --ring: oklch(0.62 0.16 250);
436
+ }
437
+ .dark[data-accent='blue'] {
438
+ --accent: oklch(0.64 0.15 250);
439
+ --accent-subtle: oklch(0.24 0.06 250);
440
+ --accent-subtle-foreground: oklch(0.82 0.1 250);
441
+ --ring: oklch(0.68 0.15 250);
442
+ }
443
+
444
+ [data-accent='violet'] {
445
+ --color-accent-700: oklch(0.45 0.18 295);
446
+ --color-accent-800: oklch(0.38 0.16 295);
447
+ }
448
+ :root[data-accent='violet'] {
449
+ --accent: oklch(0.53 0.2 295);
450
+ --accent-subtle: oklch(0.96 0.03 295);
451
+ --accent-subtle-foreground: oklch(0.46 0.18 295);
452
+ --ring: oklch(0.6 0.2 295);
453
+ }
454
+ .dark[data-accent='violet'] {
455
+ --accent: oklch(0.64 0.18 295);
456
+ --accent-subtle: oklch(0.25 0.07 295);
457
+ --accent-subtle-foreground: oklch(0.83 0.12 295);
458
+ --ring: oklch(0.68 0.18 295);
459
+ }
460
+
461
+ [data-accent='emerald'] {
462
+ --color-accent-700: oklch(0.47 0.13 160);
463
+ --color-accent-800: oklch(0.39 0.12 160);
464
+ }
465
+ :root[data-accent='emerald'] {
466
+ --accent: oklch(0.55 0.13 160);
467
+ --accent-subtle: oklch(0.96 0.03 160);
468
+ --accent-subtle-foreground: oklch(0.42 0.12 160);
469
+ --ring: oklch(0.6 0.13 160);
470
+ }
471
+ .dark[data-accent='emerald'] {
472
+ --accent: oklch(0.64 0.14 160);
473
+ --accent-subtle: oklch(0.23 0.05 160);
474
+ --accent-subtle-foreground: oklch(0.8 0.12 160);
475
+ --ring: oklch(0.68 0.14 160);
476
+ }
477
+
478
+ [data-accent='rose'] {
479
+ --color-accent-700: oklch(0.49 0.18 12);
480
+ --color-accent-800: oklch(0.41 0.16 12);
481
+ }
482
+ :root[data-accent='rose'] {
483
+ --accent: oklch(0.57 0.19 12);
484
+ --accent-subtle: oklch(0.96 0.03 12);
485
+ --accent-subtle-foreground: oklch(0.48 0.18 12);
486
+ --ring: oklch(0.62 0.19 12);
487
+ }
488
+ .dark[data-accent='rose'] {
489
+ --accent: oklch(0.65 0.18 12);
490
+ --accent-subtle: oklch(0.25 0.07 12);
491
+ --accent-subtle-foreground: oklch(0.83 0.12 12);
492
+ --ring: oklch(0.7 0.18 12);
493
+ }
494
+
495
+ [data-accent='amber'] {
496
+ --color-accent-700: oklch(0.54 0.13 65);
497
+ --color-accent-800: oklch(0.46 0.12 65);
498
+ }
499
+ :root[data-accent='amber'] {
500
+ --accent: oklch(0.62 0.14 65);
501
+ --accent-subtle: oklch(0.96 0.04 75);
502
+ --accent-subtle-foreground: oklch(0.48 0.12 65);
503
+ --ring: oklch(0.66 0.14 65);
504
+ }
505
+ .dark[data-accent='amber'] {
506
+ --accent: oklch(0.66 0.14 65);
507
+ --accent-subtle: oklch(0.26 0.05 70);
508
+ --accent-subtle-foreground: oklch(0.85 0.12 80);
509
+ --ring: oklch(0.72 0.14 65);
510
+ }
511
+
512
+ /* -----------------------------------------------------------------------------
513
+ * Semantic colour names exposed to Tailwind utilities.
514
+ *
515
+ * Naming convention:
516
+ * bg-<status> solid surface (button fill, badge fill)
517
+ * text-on-<status> foreground on a solid surface
518
+ * bg-<status>-soft subtle / tinted surface
519
+ * text-<status> standalone status text or text on a soft surface
520
+ * border-<status> border matched to a soft surface
521
+ *
522
+ * This keeps utility class names readable in JSX (no `bg-accent-bg`).
523
+ * Raw scale (`bg-accent-500`, `bg-success-100`, …) is still available
524
+ * for the rare case a designer needs a specific step.
525
+ * --------------------------------------------------------------------------- */
526
+ @theme inline {
527
+ --color-chart-1: var(--chart-1);
528
+ --color-chart-2: var(--chart-2);
529
+ --color-chart-3: var(--chart-3);
530
+ --color-chart-4: var(--chart-4);
531
+ --color-chart-5: var(--chart-5);
532
+ --color-chart-6: var(--chart-6);
533
+ --color-background: var(--background);
534
+ --color-background-subtle: var(--background-subtle);
535
+ --color-background-muted: var(--background-muted);
536
+
537
+ --color-foreground: var(--foreground);
538
+ --color-foreground-muted: var(--foreground-muted);
539
+ --color-foreground-subtle: var(--foreground-subtle);
540
+
541
+ --color-border: var(--border);
542
+ --color-border-strong: var(--border-strong);
543
+ --color-border-input: var(--border-input);
544
+
545
+ --color-card: var(--card);
546
+ --color-card-foreground: var(--card-foreground);
547
+ --color-popover: var(--popover);
548
+ --color-popover-foreground: var(--popover-foreground);
549
+
550
+ --color-accent: var(--accent);
551
+ --color-on-accent: var(--accent-foreground);
552
+ --color-accent-soft: var(--accent-subtle);
553
+ --color-on-accent-soft: var(--accent-subtle-foreground);
554
+ --color-accent-hover: var(--accent-hover);
555
+ --color-accent-active: var(--accent-active);
556
+
557
+ --color-surface-hover: var(--surface-hover);
558
+ --color-surface-active: var(--surface-active);
559
+ --color-overlay: var(--overlay);
560
+ --color-tooltip: var(--tooltip);
561
+ --color-tooltip-foreground: var(--tooltip-foreground);
562
+ --color-switch-track-off: var(--switch-track-off);
563
+ --color-switch-thumb: var(--switch-thumb);
564
+
565
+ --color-success: var(--success-solid);
566
+ --color-on-success: var(--on-success);
567
+ --color-success-soft: var(--success-subtle);
568
+ --color-success-text: var(--success-foreground);
569
+ --color-success-border-soft: var(--success-border);
570
+
571
+ --color-warning: var(--warning-solid);
572
+ --color-on-warning: var(--on-warning);
573
+ --color-warning-soft: var(--warning-subtle);
574
+ --color-warning-text: var(--warning-foreground);
575
+ --color-warning-border-soft: var(--warning-border);
576
+
577
+ --color-danger: var(--danger-solid);
578
+ --color-on-danger: var(--on-danger);
579
+ --color-danger-hover: var(--danger-hover);
580
+ --color-danger-active: var(--danger-active);
581
+ --color-danger-soft: var(--danger-subtle);
582
+ --color-danger-text: var(--danger-foreground);
583
+ --color-danger-border-soft: var(--danger-border);
584
+
585
+ --color-info: var(--info-solid);
586
+ --color-on-info: var(--on-info);
587
+ --color-info-soft: var(--info-subtle);
588
+ --color-info-text: var(--info-foreground);
589
+ --color-info-border-soft: var(--info-border);
590
+
591
+ --color-ring: var(--ring);
592
+ }
593
+
594
+ /* -----------------------------------------------------------------------------
595
+ * Base layer — sensible global defaults.
596
+ * --------------------------------------------------------------------------- */
597
+ @layer base {
598
+ *,
599
+ *::before,
600
+ *::after {
601
+ border-color: var(--border);
602
+ }
603
+
604
+ html {
605
+ font-family: var(--font-sans);
606
+ font-feature-settings:
607
+ 'cv11' on, /* Geist: stylistic single-storey a in numbers context */
608
+ 'ss03' on, /* Geist: alternate G */
609
+ 'rlig' on;
610
+ -webkit-font-smoothing: antialiased;
611
+ -moz-osx-font-smoothing: grayscale;
612
+ text-rendering: optimizeLegibility;
613
+ }
614
+
615
+ :root {
616
+ color-scheme: light;
617
+ }
618
+ .dark {
619
+ color-scheme: dark;
620
+ }
621
+
622
+ body {
623
+ background-color: var(--background);
624
+ color: var(--foreground);
625
+ font-size: var(--text-base);
626
+ line-height: var(--text-base--line-height);
627
+ font-weight: var(--font-weight-normal);
628
+ /* Long Cyrillic words / URLs must never overflow their container. */
629
+ overflow-wrap: anywhere;
630
+ font-synthesis: none;
631
+ }
632
+
633
+ ::selection {
634
+ background-color: var(--selection);
635
+ color: var(--selection-foreground);
636
+ }
637
+
638
+ /* Visible default focus indicator. Components that draw their own
639
+ `focus-visible:ring-*` set `outline-none` locally to avoid doubling. */
640
+ :focus-visible {
641
+ outline: 2px solid var(--ring);
642
+ outline-offset: 2px;
643
+ }
644
+
645
+ /* tw-animate-css `animate-in` / `animate-out` defaults. Set as the
646
+ overridable `--tw-*` fallbacks so `duration-*` / `ease-*` utilities on
647
+ the same element still win. */
648
+ .animate-in,
649
+ .animate-out {
650
+ --tw-duration: var(--duration-base);
651
+ --tw-ease: var(--ease-out);
652
+ }
653
+
654
+ /* Tailwind v4 preflight resets buttons to `cursor: default`; restore the
655
+ v3 behaviour so every enabled button (and Radix triggers rendered with
656
+ role="button") reads as clickable. Disabled state keeps the default
657
+ arrow — most components also set `disabled:pointer-events-none`. */
658
+ button:not(:disabled),
659
+ [role='button']:not(:disabled) {
660
+ cursor: pointer;
661
+ }
662
+
663
+ /* Standardised focus ring — 2px ring + 2px offset, accent colour. ------ */
664
+ .focus-ring {
665
+ outline: 2px solid var(--ring);
666
+ outline-offset: 2px;
667
+ box-shadow: 0 0 0 2px var(--ring-offset);
668
+ }
669
+
670
+ /* Numbers and tabular data use tabular-nums by default for alignment. -- */
671
+ .tabular {
672
+ font-variant-numeric: tabular-nums;
673
+ }
674
+
675
+ /* Honour reduced-motion globally. -------------------------------------- */
676
+ @media (prefers-reduced-motion: reduce) {
677
+ *,
678
+ *::before,
679
+ *::after {
680
+ animation-duration: 0.001ms !important;
681
+ animation-iteration-count: 1 !important;
682
+ transition-duration: 0.001ms !important;
683
+ scroll-behavior: auto !important;
684
+ }
685
+ }
686
+
687
+ /* Global subtle scrollbars — thin, transparent track, only visible on
688
+ hover of the scroll container. Applies to every scrollable surface
689
+ unless a component explicitly opts out. */
690
+ * {
691
+ scrollbar-width: thin;
692
+ scrollbar-color: transparent transparent;
693
+ }
694
+ *:hover {
695
+ scrollbar-color: color-mix(in oklab, var(--color-border-strong) 60%, transparent)
696
+ transparent;
697
+ }
698
+ *::-webkit-scrollbar {
699
+ width: 8px;
700
+ height: 8px;
701
+ }
702
+ *::-webkit-scrollbar-track {
703
+ background: transparent;
704
+ }
705
+ *::-webkit-scrollbar-thumb {
706
+ background-color: transparent;
707
+ border-radius: 9999px;
708
+ border: 2px solid transparent;
709
+ background-clip: padding-box;
710
+ transition: background-color 0.15s ease;
711
+ }
712
+ *:hover::-webkit-scrollbar-thumb {
713
+ background-color: color-mix(in oklab, var(--color-border-strong) 60%, transparent);
714
+ }
715
+ *::-webkit-scrollbar-thumb:hover {
716
+ background-color: var(--color-border-strong);
717
+ }
718
+ *::-webkit-scrollbar-corner {
719
+ background: transparent;
720
+ }
721
+ }
722
+
723
+ /* -----------------------------------------------------------------------------
724
+ * Utilities — tiny refined-minimal helpers reused across components.
725
+ * --------------------------------------------------------------------------- */
726
+ @keyframes progress-indeterminate {
727
+ 0% {
728
+ transform: translateX(-100%) scaleX(0.6);
729
+ }
730
+ 50% {
731
+ transform: translateX(0%) scaleX(0.4);
732
+ }
733
+ 100% {
734
+ transform: translateX(100%) scaleX(0.6);
735
+ }
736
+ }
737
+
738
+ @layer utilities {
739
+ /* Indeterminate <Progress> bar sweep. */
740
+ .animate-progress-indeterminate {
741
+ animation: progress-indeterminate 1.4s ease-in-out infinite;
742
+ }
743
+
744
+ /* Standard focus ring as a utility. */
745
+ .ring-focus {
746
+ @apply outline-none;
747
+ box-shadow:
748
+ 0 0 0 2px var(--ring-offset),
749
+ 0 0 0 4px var(--ring);
750
+ }
751
+
752
+ /* Hairline border that respects color-mix for subpixel rendering. */
753
+ .border-hairline {
754
+ border-width: 1px;
755
+ border-style: solid;
756
+ }
757
+
758
+ /* Truncate to 1, 2, 3 lines. */
759
+ .line-clamp-1 {
760
+ display: -webkit-box;
761
+ -webkit-line-clamp: 1;
762
+ -webkit-box-orient: vertical;
763
+ overflow: hidden;
764
+ }
765
+ .line-clamp-2 {
766
+ display: -webkit-box;
767
+ -webkit-line-clamp: 2;
768
+ -webkit-box-orient: vertical;
769
+ overflow: hidden;
770
+ }
771
+ .line-clamp-3 {
772
+ display: -webkit-box;
773
+ -webkit-line-clamp: 3;
774
+ -webkit-box-orient: vertical;
775
+ overflow: hidden;
776
+ }
777
+ }