@edmicro/olkit 2.1.6 → 2.1.10
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 -21
- package/fesm2022/edmicro-olkit.mjs +20024 -34416
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/lib/shared/styles/animations.css +327 -327
- package/package.json +6 -6
- package/styles/isolation.css +310 -310
- package/styles/layout.css +94 -94
- package/styles/patterns.css +163 -163
- package/styles/primitives.css +274 -274
- package/styles/theme.css +325 -325
- package/styles/tokens.css +431 -431
- package/types/edmicro-olkit.d.ts +7212 -12029
- package/types/edmicro-olkit.d.ts.map +1 -1
package/styles/theme.css
CHANGED
|
@@ -1,325 +1,325 @@
|
|
|
1
|
-
/* Ánh xạ toàn bộ Primitives, Layout, Typography, Shadows và Tokens vào Tailwind v4 Engine */
|
|
2
|
-
@theme {
|
|
3
|
-
/* 0. Font families — theo Figma font/family/* */
|
|
4
|
-
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
5
|
-
--font-serif: 'Georgia', ui-serif, serif;
|
|
6
|
-
--font-mono: 'Menlo', ui-monospace, SFMono-Regular, monospace;
|
|
7
|
-
|
|
8
|
-
/* 1. Complete Spacing Scale */
|
|
9
|
-
--spacing-0: 0px;
|
|
10
|
-
--spacing-0_5: 0.125rem;
|
|
11
|
-
--spacing-1: 0.25rem;
|
|
12
|
-
--spacing-1_5: 0.375rem;
|
|
13
|
-
--spacing-2: 0.5rem;
|
|
14
|
-
--spacing-2_5: 0.625rem;
|
|
15
|
-
--spacing-3: 0.75rem;
|
|
16
|
-
--spacing-3_5: 0.875rem;
|
|
17
|
-
--spacing-4: 1rem;
|
|
18
|
-
--spacing-4_5: 1.125rem;
|
|
19
|
-
--spacing-5: 1.25rem;
|
|
20
|
-
--spacing-6: 1.5rem;
|
|
21
|
-
--spacing-7: 1.75rem;
|
|
22
|
-
--spacing-8: 2rem;
|
|
23
|
-
--spacing-9: 2.25rem;
|
|
24
|
-
--spacing-10: 2.5rem;
|
|
25
|
-
--spacing-11: 2.75rem;
|
|
26
|
-
--spacing-12: 3rem;
|
|
27
|
-
--spacing-14: 3.5rem;
|
|
28
|
-
--spacing-16: 4rem;
|
|
29
|
-
--spacing-18: 4.5rem;
|
|
30
|
-
--spacing-20: 5rem;
|
|
31
|
-
--spacing-24: 6rem;
|
|
32
|
-
--spacing-28: 7rem;
|
|
33
|
-
--spacing-32: 8rem;
|
|
34
|
-
--spacing-36: 9rem;
|
|
35
|
-
--spacing-40: 10rem;
|
|
36
|
-
--spacing-44: 11rem;
|
|
37
|
-
--spacing-48: 12rem;
|
|
38
|
-
--spacing-52: 13rem;
|
|
39
|
-
--spacing-56: 14rem;
|
|
40
|
-
--spacing-60: 15rem;
|
|
41
|
-
--spacing-64: 16rem;
|
|
42
|
-
/* Bổ sung theo Figma spacing/*: px + 3 bậc cao còn thiếu */
|
|
43
|
-
--spacing-px: 1px;
|
|
44
|
-
--spacing-72: 18rem;
|
|
45
|
-
--spacing-80: 20rem;
|
|
46
|
-
--spacing-96: 24rem;
|
|
47
|
-
|
|
48
|
-
/* 2. Border Radius Scale - Standard Figma Ôn Luyện Design System */
|
|
49
|
-
--radius-none: 0px;
|
|
50
|
-
--radius-xxs: 2px;
|
|
51
|
-
--radius-xs: 4px;
|
|
52
|
-
--radius-sm: 6px;
|
|
53
|
-
--radius: 8px;
|
|
54
|
-
--radius-base: 12px;
|
|
55
|
-
--radius-md: 12px;
|
|
56
|
-
--radius-lg: 16px;
|
|
57
|
-
--radius-xl: 24px;
|
|
58
|
-
--radius-2xl: 24px;
|
|
59
|
-
--radius-3xl: 32px;
|
|
60
|
-
--radius-full: 9999px;
|
|
61
|
-
/* Thang DỪNG ở 3xl — Figma Themes không có bậc nào cao hơn.
|
|
62
|
-
`rounded-4xl` KHÔNG khai ở đây nhưng vẫn chạy: Tailwind có sẵn
|
|
63
|
-
`--radius-4xl: 2rem` (32px), trùng đúng 3xl. Đừng dùng nó — hai tên cùng
|
|
64
|
-
một giá trị, và nó không có nguồn Figma. Đo được bằng cách xoá cả hai khai
|
|
65
|
-
báo rồi build: CSS vẫn emit `--radius-4xl: 2rem`. */
|
|
66
|
-
|
|
67
|
-
/* 3xs = 8px, khớp Figma typography/font-size/text-xxs. Trước đây thiếu
|
|
68
|
-
khiến 15 chỗ dùng text-3xs trong chart không có font-size. */
|
|
69
|
-
--text-3xs: 0.5rem;
|
|
70
|
-
--text-3xs--line-height: 0.75rem;
|
|
71
|
-
--text-2xs: 0.625rem;
|
|
72
|
-
--text-2xs--line-height: 0.875rem;
|
|
73
|
-
|
|
74
|
-
/* Letter-spacing — Figma khai bằng px tuyệt đối, code dùng em quy chiếu
|
|
75
|
-
cỡ chữ gốc 16px nên quy đổi khớp chính xác (-0.025em × 16 = -0.4px).
|
|
76
|
-
Ba bậc tighter/normal/widest trước đây thiếu, rơi về mặc định Tailwind. */
|
|
77
|
-
--tracking-tighter: -0.05em;
|
|
78
|
-
--tracking-normal: 0em;
|
|
79
|
-
--tracking-widest: 0.1em;
|
|
80
|
-
--text-xs: 0.75rem;
|
|
81
|
-
--text-sm: 0.875rem;
|
|
82
|
-
--text-base: 1rem;
|
|
83
|
-
--text-lg: 1.125rem;
|
|
84
|
-
--text-xl: 1.25rem;
|
|
85
|
-
--text-2xl: 1.5rem;
|
|
86
|
-
--text-3xl: 1.875rem;
|
|
87
|
-
--text-4xl: 2.25rem;
|
|
88
|
-
--text-5xl: 3rem;
|
|
89
|
-
--text-6xl: 3.75rem;
|
|
90
|
-
/* Ba cỡ lớn nhất — Figma có 27 text style dùng chúng (text-7xl/8xl/9xl ×
|
|
91
|
-
9 weight) và biến typography/font-size/text-7xl|8xl|9xl alias tới
|
|
92
|
-
font/size/7xl|8xl|9xl. Code trước đây dừng ở 6xl nên rơi về mặc định
|
|
93
|
-
Tailwind, không ai kiểm được. */
|
|
94
|
-
--text-7xl: 4.5rem;
|
|
95
|
-
--text-8xl: 6rem;
|
|
96
|
-
--text-9xl: 8rem;
|
|
97
|
-
|
|
98
|
-
--font-weight-regular: 400;
|
|
99
|
-
--font-weight-medium: 500;
|
|
100
|
-
--font-weight-semibold: 600;
|
|
101
|
-
--font-weight-bold: 700;
|
|
102
|
-
--font-weight-extrabold: 800;
|
|
103
|
-
|
|
104
|
-
/* 4. Shadows */
|
|
105
|
-
--shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
106
|
-
--shadow-xs: 0px 1px 0.5px 0.05px rgba(30, 41, 57, 0.02);
|
|
107
|
-
--shadow-sm: 0px 1px 2px 0px rgba(30, 41, 57, 0.05);
|
|
108
|
-
--shadow: 0px 1px 3px 0px rgba(30, 41, 57, 0.1), 0px 1px 2px -1px rgba(30, 41, 57, 0.1);
|
|
109
|
-
--shadow-md: 0px 4px 6px -1px rgba(30, 41, 57, 0.1), 0px 2px 4px -2px rgba(30, 41, 57, 0.1);
|
|
110
|
-
--shadow-lg: 0px 10px 15px -3px rgba(30, 41, 57, 0.1), 0px 4px 6px -4px rgba(30, 41, 57, 0.1);
|
|
111
|
-
--shadow-xl: 0px 20px 25px -5px rgba(30, 41, 57, 0.1), 0px 8px 10px -6px rgba(30, 41, 57, 0.1);
|
|
112
|
-
--shadow-2xl: 0px 25px 50px -12px rgba(30, 41, 57, 0.25);
|
|
113
|
-
--shadow-inner: inset 0px 2px 4px 0px rgba(30, 41, 57, 0.06);
|
|
114
|
-
/* Đổ bóng hướng lên cho thanh cố định đáy màn — theo effect style
|
|
115
|
-
shadow-top của Figma. */
|
|
116
|
-
--shadow-top: 0px -2px 6px 0px rgba(30, 41, 57, 0.08);
|
|
117
|
-
/* Shadow thương hiệu — theo effect style Figma shadow-brand / shadow-brand-sm.
|
|
118
|
-
Dùng brand-700 #2B4182 thay vì đen trung tính. */
|
|
119
|
-
--shadow-brand:
|
|
120
|
-
0px 4px 6px 0px rgba(43, 65, 130, 0.24), 0px 10px 15px -3px rgba(43, 65, 130, 0.18);
|
|
121
|
-
--shadow-brand-sm: 0px 2px 4px 0px rgba(43, 65, 130, 0.16);
|
|
122
|
-
|
|
123
|
-
/* 5. Container Max Widths */
|
|
124
|
-
--container-xs: 20rem;
|
|
125
|
-
--container-sm: 24rem;
|
|
126
|
-
--container-md: 28rem;
|
|
127
|
-
--container-lg: 32rem;
|
|
128
|
-
--container-xl: 36rem;
|
|
129
|
-
--container-2xl: 42rem;
|
|
130
|
-
--container-3xl: 48rem;
|
|
131
|
-
--container-4xl: 56rem;
|
|
132
|
-
--container-5xl: 64rem;
|
|
133
|
-
--container-6xl: 72rem;
|
|
134
|
-
--container-7xl: 80rem;
|
|
135
|
-
|
|
136
|
-
/* Basic Colors */
|
|
137
|
-
--color-white: #ffffff;
|
|
138
|
-
/* Đen của design system là gray-900 #101828, không phải #000 thuần
|
|
139
|
-
(xem CLAUDE.md). Trỏ về token để đổi theo theme. */
|
|
140
|
-
|
|
141
|
-
/* Brand Colors */
|
|
142
|
-
--color-brand-50: var(--color-brand-50, #f5f8ff);
|
|
143
|
-
--color-brand-100: var(--color-brand-100, #e3eaff);
|
|
144
|
-
--color-brand-200: var(--color-brand-200, #d2dcfa);
|
|
145
|
-
--color-brand-300: var(--color-brand-300, #a3baff);
|
|
146
|
-
--color-brand-400: var(--color-brand-400, #8c9ed4);
|
|
147
|
-
--color-brand-500: var(--color-brand-500, #6d7fb3);
|
|
148
|
-
--color-brand-600: var(--color-brand-600, #5168ac);
|
|
149
|
-
--color-brand-700: var(--color-brand-700, #2b4182);
|
|
150
|
-
--color-brand-800: var(--color-brand-800, #203165);
|
|
151
|
-
--color-brand-900: var(--color-brand-900, #152147);
|
|
152
|
-
--color-brand-850: var(--color-brand-850, #1c274c);
|
|
153
|
-
--color-brand-950: var(--color-brand-950, #0d142b);
|
|
154
|
-
|
|
155
|
-
/* Semantic Theme Tokens - Dynamically mapped to CSS variables */
|
|
156
|
-
--color-neutral-primary: var(--bg-primary, #ffffff);
|
|
157
|
-
--color-neutral-primary-soft: var(--bg-primary-soft, #ffffff);
|
|
158
|
-
--color-neutral-primary-medium: var(--bg-primary-medium, #ffffff);
|
|
159
|
-
--color-neutral-primary-strong: var(--bg-primary-strong, #ffffff);
|
|
160
|
-
|
|
161
|
-
--color-neutral-secondary: var(--bg-secondary, #f9fafb);
|
|
162
|
-
--color-neutral-secondary-soft: var(--bg-secondary-soft, #f9fafb);
|
|
163
|
-
--color-neutral-secondary-medium: var(--bg-secondary-medium, #f9fafb);
|
|
164
|
-
--color-neutral-secondary-strong: var(--bg-secondary-strong, #f9fafb);
|
|
165
|
-
|
|
166
|
-
/* Tertiary — theo Figma colors/background/bg-neutral-tertiary (gray/100).
|
|
167
|
-
Trước đây thiếu khiến active state của ol-button không render. */
|
|
168
|
-
--color-neutral-tertiary: var(--bg-tertiary, #f3f4f6);
|
|
169
|
-
--color-neutral-tertiary-medium: var(--bg-tertiary-medium, #f3f4f6);
|
|
170
|
-
--color-neutral-tertiary-soft: var(--bg-tertiary-soft, #f3f4f6);
|
|
171
|
-
--color-neutral-quaternary: var(--bg-quaternary, #e5e7eb);
|
|
172
|
-
|
|
173
|
-
--color-brand: var(--bg-brand, #2b4182);
|
|
174
|
-
--color-brand-strong: var(--bg-brand-strong, #203165);
|
|
175
|
-
--color-brand-medium: var(--bg-brand-medium, #d2dcfa);
|
|
176
|
-
--color-brand-soft: var(--bg-brand-soft, #e3eaff);
|
|
177
|
-
--color-brand-softer: var(--bg-brand-softer, #f5f8ff);
|
|
178
|
-
|
|
179
|
-
--color-dark: var(--bg-dark, #1e2939);
|
|
180
|
-
--color-dark-strong: var(--bg-dark-strong, #101828);
|
|
181
|
-
/* Figma ol-toggle Status=Medium bind `bg-orange`. Token nguồn --bg-orange đã
|
|
182
|
-
có ở tokens.css nhưng thiếu cầu nối này nên class `bg-orange` không sinh
|
|
183
|
-
luật CSS. Lưu ý: --bg-orange mới chỉ khai ở :root, chưa có giá trị cho
|
|
184
|
-
chế độ tối — cần Figma bổ sung. */
|
|
185
|
-
--color-orange: var(--bg-orange, #ff8a4c);
|
|
186
|
-
--color-overlay-subtle: var(--bg-overlay-subtle, rgb(0 0 0 / 0.05));
|
|
187
|
-
--color-overlay-soft: var(--bg-overlay-soft, rgb(0 0 0 / 0.1));
|
|
188
|
-
--color-overlay-medium: var(--bg-overlay-medium, rgb(0 0 0 / 0.2));
|
|
189
|
-
--color-overlay-strong: var(--bg-overlay-strong, rgb(0 0 0 / 0.4));
|
|
190
|
-
--color-overlay-backdrop: var(--bg-overlay-backdrop, rgb(0 0 0 / 0.5));
|
|
191
|
-
--color-disabled: var(--bg-disabled, #f3f4f6);
|
|
192
|
-
|
|
193
|
-
/* Bảy màu nền phụ: token nguồn đã có ở tokens.css nhưng thiếu cầu nối nên
|
|
194
|
-
class `bg-purple`, `bg-sky`… không sinh luật CSS. Cùng cảnh với
|
|
195
|
-
`--color-orange` phía trên. Tên class KHÔNG trùng thang số (`bg-purple` vs
|
|
196
|
-
`bg-purple-500`). */
|
|
197
|
-
--color-purple: var(--bg-purple, #ad46ff);
|
|
198
|
-
--color-sky: var(--bg-sky, #2684fc);
|
|
199
|
-
--color-teal: var(--bg-teal, #009689);
|
|
200
|
-
--color-pink: var(--bg-pink, #d93b84);
|
|
201
|
-
--color-cyan: var(--bg-cyan, #00b8db);
|
|
202
|
-
--color-fuchsia: var(--bg-fuchsia, #c800de);
|
|
203
|
-
--color-indigo: var(--bg-indigo, #544bd4);
|
|
204
|
-
|
|
205
|
-
/* Ba token còn thiếu cầu nối. `--text-white`/`--text-black` là cặp tuyệt đối
|
|
206
|
-
dùng cho chữ trên nền đặc; trước đây chỉ gọi được bằng `text-white` của
|
|
207
|
-
Tailwind chứ không qua token. */
|
|
208
|
-
--color-quaternary-medium: var(--bg-quaternary-medium, #e5e7eb);
|
|
209
|
-
--color-border-muted: var(--border-muted, #f9fafb);
|
|
210
|
-
--color-border-light-subtle: var(--border-light-subtle, #f3f4f6);
|
|
211
|
-
--color-fg-white: var(--text-white, #ffffff);
|
|
212
|
-
--color-fg-black: var(--text-black, #101828);
|
|
213
|
-
|
|
214
|
-
/* KHÔNG thêm token riêng cho `fill-*`/`stroke-*`: Tailwind v4 ở dự án này chỉ
|
|
215
|
-
sinh utility màu cho `bg-`/`text-`/`border-`/`ring-` từ `--color-*`, không
|
|
216
|
-
sinh `fill-`/`stroke-`. Đã đo: `fill-body`, `fill-heading`, `stroke-brand`
|
|
217
|
-
đều không có luật, trong khi `fill-current` + `text-*` chạy đúng. Vì vậy
|
|
218
|
-
SVG trong `ol-chart` dùng `fill="currentColor"` rồi đặt màu bằng `text-*`. */
|
|
219
|
-
|
|
220
|
-
/* Status Colors
|
|
221
|
-
Token KHÔNG hậu tố (--color-danger/success/warning) map về --text-* vì
|
|
222
|
-
trong thư viện chúng chỉ được dùng qua class text-*; dùng --bg-* ở đây sẽ
|
|
223
|
-
nhạt hơn một bậc và tụt contrast.
|
|
224
|
-
Nền lấy các biến thể -soft/-medium/-strong/-surface, map về --bg-*.
|
|
225
|
-
Đầy đủ hai kênh nên không còn phải chọn giữa chữ và nền. */
|
|
226
|
-
--color-warning: var(--border-warning, #ffc022);
|
|
227
|
-
--color-fg-warning-subtle: var(--text-warning-subtle, #b87a00);
|
|
228
|
-
--color-warning-surface: var(--bg-warning, #ffc022);
|
|
229
|
-
--color-warning-soft: var(--bg-warning-soft, #fffbeb);
|
|
230
|
-
--color-warning-medium: var(--bg-warning-medium, #fff3c4);
|
|
231
|
-
--color-warning-strong: var(--bg-warning-strong, #ffb000);
|
|
232
|
-
--color-warning-strongest: var(--bg-warning-strongest, #ffa000);
|
|
233
|
-
|
|
234
|
-
--color-success: var(--border-success, #007a55);
|
|
235
|
-
--color-success-strong: var(--bg-success-strong, #006045);
|
|
236
|
-
--color-success-surface: var(--bg-success, #007a55);
|
|
237
|
-
--color-success-soft: var(--bg-success-soft, #ecfdf5);
|
|
238
|
-
--color-success-medium: var(--bg-success-medium, #d0fae5);
|
|
239
|
-
|
|
240
|
-
--color-danger: var(--border-danger, #ec003f);
|
|
241
|
-
--color-danger-strong: var(--bg-danger-strong, #a50036);
|
|
242
|
-
--color-danger-surface: var(--bg-danger, #ec003f);
|
|
243
|
-
--color-danger-soft: var(--bg-danger-soft, #fef0f2);
|
|
244
|
-
--color-danger-medium: var(--bg-danger-medium, #ffe4e6);
|
|
245
|
-
|
|
246
|
-
--color-info: var(--border-info, #a3baff);
|
|
247
|
-
|
|
248
|
-
/* Typography & Text Tokens */
|
|
249
|
-
--color-heading: var(--text-heading, #101828);
|
|
250
|
-
--color-body: var(--text-body, #4a5565);
|
|
251
|
-
--color-body-subtle: var(--text-body-subtle, #6b7280);
|
|
252
|
-
--color-fg-danger: var(--text-danger, #ec003f);
|
|
253
|
-
--color-fg-danger-strong: var(--text-danger-strong, #8b0836);
|
|
254
|
-
--color-fg-success: var(--text-success, #007a55);
|
|
255
|
-
--color-fg-success-strong: var(--text-success-strong, #004f3b);
|
|
256
|
-
--color-fg-warning: var(--text-warning, #8f5f00);
|
|
257
|
-
--color-fg-warning-strong: var(--text-warning-strong, #3d2900);
|
|
258
|
-
--color-fg-info: var(--text-info, #152147);
|
|
259
|
-
--color-fg-info-strong: var(--text-info-strong, #152147);
|
|
260
|
-
--color-fg-brand: var(--text-brand, #2b4182);
|
|
261
|
-
--color-fg-brand-subtle: var(--text-brand-subtle, #a3baff);
|
|
262
|
-
--color-fg-brand-strong: var(--text-brand-strong, #152147);
|
|
263
|
-
/* Thiếu cầu nối thì token khai ở tokens.css vẫn không sinh class nào. */
|
|
264
|
-
--color-fg-brand-medium: var(--text-brand-medium, #203165);
|
|
265
|
-
--color-fg-brand-soft: var(--text-brand-soft, #e3eaff);
|
|
266
|
-
--color-fg-disabled: var(--text-disabled, #99a1af);
|
|
267
|
-
|
|
268
|
-
/* Border Tokens */
|
|
269
|
-
--color-default: var(--border-default, #e5e7eb);
|
|
270
|
-
--color-default-subtle: var(--border-default-subtle, #e5e7eb);
|
|
271
|
-
--color-default-medium: var(--border-default-medium, #e5e7eb);
|
|
272
|
-
--color-default-strong: var(--border-default-strong, #e5e7eb);
|
|
273
|
-
--color-border: var(--border-default, #e5e7eb);
|
|
274
|
-
--color-border-subtle: var(--border-default-subtle, #e5e7eb);
|
|
275
|
-
--color-border-light: var(--border-light, #f3f4f6);
|
|
276
|
-
--color-border-medium: var(--border-default-medium, #e5e7eb);
|
|
277
|
-
--color-border-strong: var(--border-default-strong, #e5e7eb);
|
|
278
|
-
--color-border-brand: var(--border-brand, #2b4182);
|
|
279
|
-
--color-focus: var(--border-focus, #2b4182);
|
|
280
|
-
--color-focus-ring: var(--bg-focus-ring, #d2dcfa);
|
|
281
|
-
--color-brand-subtle: var(--border-brand-subtle, #d2dcfa);
|
|
282
|
-
--color-brand-light: var(--border-brand-light, #6d7fb3);
|
|
283
|
-
--color-success-subtle: var(--border-success-subtle, #a4f4cf);
|
|
284
|
-
--color-danger-subtle: var(--border-danger-subtle, #ffccd3);
|
|
285
|
-
--color-warning-subtle: var(--border-warning-subtle, #ffe79a);
|
|
286
|
-
|
|
287
|
-
/* ---- 20 token Figma bổ sung (2026-09-11) ---- */
|
|
288
|
-
--color-white-surface: var(--bg-white, #ffffff);
|
|
289
|
-
--color-gray-surface: var(--bg-gray, #d1d5db);
|
|
290
|
-
|
|
291
|
-
--color-dark-line: var(--border-dark, #1e2939);
|
|
292
|
-
--color-dark-line-subtle: var(--border-dark-subtle, #1e2939);
|
|
293
|
-
--color-light-medium: var(--border-light-medium, #f3f4f6);
|
|
294
|
-
/* Viền đệm tách phần tử khỏi nền (avatar ring, chip chồng nhau). */
|
|
295
|
-
--color-buffer: var(--border-buffer, #ffffff);
|
|
296
|
-
--color-buffer-medium: var(--border-buffer-medium, #ffffff);
|
|
297
|
-
--color-buffer-strong: var(--border-buffer-strong, #ffffff);
|
|
298
|
-
--color-buffer-gradient-secondary: var(--border-buffer-gradient-secondary, #f9fafb);
|
|
299
|
-
--color-orange-line: var(--border-orange, #ff8a4c);
|
|
300
|
-
--color-purple-line: var(--border-purple, #ad46ff);
|
|
301
|
-
|
|
302
|
-
--color-fg-cyan: var(--text-cyan, #0092b8);
|
|
303
|
-
--color-fg-indigo: var(--text-indigo, #544bd4);
|
|
304
|
-
--color-fg-lime: var(--text-lime, #5ea500);
|
|
305
|
-
--color-fg-pink: var(--text-pink, #d93b84);
|
|
306
|
-
--color-fg-purple: var(--text-purple, #9810fa);
|
|
307
|
-
--color-fg-yellow: var(--text-yellow, #ffc022);
|
|
308
|
-
|
|
309
|
-
/* Thang xếp lớp — xem chú thích trong tokens.css */
|
|
310
|
-
--z-index-base: var(--z-base, 0);
|
|
311
|
-
--z-index-raised: var(--z-raised, 10);
|
|
312
|
-
--z-index-sticky: var(--z-sticky, 20);
|
|
313
|
-
--z-index-drawer-backdrop: var(--z-drawer-backdrop, 30);
|
|
314
|
-
--z-index-drawer: var(--z-drawer, 40);
|
|
315
|
-
--z-index-dropdown: var(--z-dropdown, 50);
|
|
316
|
-
--z-index-popover: var(--z-popover, 60);
|
|
317
|
-
--z-index-modal-backdrop: var(--z-modal-backdrop, 70);
|
|
318
|
-
--z-index-modal: var(--z-modal, 80);
|
|
319
|
-
--z-index-tooltip: var(--z-tooltip, 90);
|
|
320
|
-
--z-index-toast: var(--z-toast, 100);
|
|
321
|
-
|
|
322
|
-
/* Surface Aliases */
|
|
323
|
-
--color-surface-raised: var(--bg-primary, #ffffff);
|
|
324
|
-
--color-surface-sunken: var(--bg-secondary, #f9fafb);
|
|
325
|
-
}
|
|
1
|
+
/* Ánh xạ toàn bộ Primitives, Layout, Typography, Shadows và Tokens vào Tailwind v4 Engine */
|
|
2
|
+
@theme {
|
|
3
|
+
/* 0. Font families — theo Figma font/family/* */
|
|
4
|
+
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
5
|
+
--font-serif: 'Georgia', ui-serif, serif;
|
|
6
|
+
--font-mono: 'Menlo', ui-monospace, SFMono-Regular, monospace;
|
|
7
|
+
|
|
8
|
+
/* 1. Complete Spacing Scale */
|
|
9
|
+
--spacing-0: 0px;
|
|
10
|
+
--spacing-0_5: 0.125rem;
|
|
11
|
+
--spacing-1: 0.25rem;
|
|
12
|
+
--spacing-1_5: 0.375rem;
|
|
13
|
+
--spacing-2: 0.5rem;
|
|
14
|
+
--spacing-2_5: 0.625rem;
|
|
15
|
+
--spacing-3: 0.75rem;
|
|
16
|
+
--spacing-3_5: 0.875rem;
|
|
17
|
+
--spacing-4: 1rem;
|
|
18
|
+
--spacing-4_5: 1.125rem;
|
|
19
|
+
--spacing-5: 1.25rem;
|
|
20
|
+
--spacing-6: 1.5rem;
|
|
21
|
+
--spacing-7: 1.75rem;
|
|
22
|
+
--spacing-8: 2rem;
|
|
23
|
+
--spacing-9: 2.25rem;
|
|
24
|
+
--spacing-10: 2.5rem;
|
|
25
|
+
--spacing-11: 2.75rem;
|
|
26
|
+
--spacing-12: 3rem;
|
|
27
|
+
--spacing-14: 3.5rem;
|
|
28
|
+
--spacing-16: 4rem;
|
|
29
|
+
--spacing-18: 4.5rem;
|
|
30
|
+
--spacing-20: 5rem;
|
|
31
|
+
--spacing-24: 6rem;
|
|
32
|
+
--spacing-28: 7rem;
|
|
33
|
+
--spacing-32: 8rem;
|
|
34
|
+
--spacing-36: 9rem;
|
|
35
|
+
--spacing-40: 10rem;
|
|
36
|
+
--spacing-44: 11rem;
|
|
37
|
+
--spacing-48: 12rem;
|
|
38
|
+
--spacing-52: 13rem;
|
|
39
|
+
--spacing-56: 14rem;
|
|
40
|
+
--spacing-60: 15rem;
|
|
41
|
+
--spacing-64: 16rem;
|
|
42
|
+
/* Bổ sung theo Figma spacing/*: px + 3 bậc cao còn thiếu */
|
|
43
|
+
--spacing-px: 1px;
|
|
44
|
+
--spacing-72: 18rem;
|
|
45
|
+
--spacing-80: 20rem;
|
|
46
|
+
--spacing-96: 24rem;
|
|
47
|
+
|
|
48
|
+
/* 2. Border Radius Scale - Standard Figma Ôn Luyện Design System */
|
|
49
|
+
--radius-none: 0px;
|
|
50
|
+
--radius-xxs: 2px;
|
|
51
|
+
--radius-xs: 4px;
|
|
52
|
+
--radius-sm: 6px;
|
|
53
|
+
--radius: 8px;
|
|
54
|
+
--radius-base: 12px;
|
|
55
|
+
--radius-md: 12px;
|
|
56
|
+
--radius-lg: 16px;
|
|
57
|
+
--radius-xl: 24px;
|
|
58
|
+
--radius-2xl: 24px;
|
|
59
|
+
--radius-3xl: 32px;
|
|
60
|
+
--radius-full: 9999px;
|
|
61
|
+
/* Thang DỪNG ở 3xl — Figma Themes không có bậc nào cao hơn.
|
|
62
|
+
`rounded-4xl` KHÔNG khai ở đây nhưng vẫn chạy: Tailwind có sẵn
|
|
63
|
+
`--radius-4xl: 2rem` (32px), trùng đúng 3xl. Đừng dùng nó — hai tên cùng
|
|
64
|
+
một giá trị, và nó không có nguồn Figma. Đo được bằng cách xoá cả hai khai
|
|
65
|
+
báo rồi build: CSS vẫn emit `--radius-4xl: 2rem`. */
|
|
66
|
+
|
|
67
|
+
/* 3xs = 8px, khớp Figma typography/font-size/text-xxs. Trước đây thiếu
|
|
68
|
+
khiến 15 chỗ dùng text-3xs trong chart không có font-size. */
|
|
69
|
+
--text-3xs: 0.5rem;
|
|
70
|
+
--text-3xs--line-height: 0.75rem;
|
|
71
|
+
--text-2xs: 0.625rem;
|
|
72
|
+
--text-2xs--line-height: 0.875rem;
|
|
73
|
+
|
|
74
|
+
/* Letter-spacing — Figma khai bằng px tuyệt đối, code dùng em quy chiếu
|
|
75
|
+
cỡ chữ gốc 16px nên quy đổi khớp chính xác (-0.025em × 16 = -0.4px).
|
|
76
|
+
Ba bậc tighter/normal/widest trước đây thiếu, rơi về mặc định Tailwind. */
|
|
77
|
+
--tracking-tighter: -0.05em;
|
|
78
|
+
--tracking-normal: 0em;
|
|
79
|
+
--tracking-widest: 0.1em;
|
|
80
|
+
--text-xs: 0.75rem;
|
|
81
|
+
--text-sm: 0.875rem;
|
|
82
|
+
--text-base: 1rem;
|
|
83
|
+
--text-lg: 1.125rem;
|
|
84
|
+
--text-xl: 1.25rem;
|
|
85
|
+
--text-2xl: 1.5rem;
|
|
86
|
+
--text-3xl: 1.875rem;
|
|
87
|
+
--text-4xl: 2.25rem;
|
|
88
|
+
--text-5xl: 3rem;
|
|
89
|
+
--text-6xl: 3.75rem;
|
|
90
|
+
/* Ba cỡ lớn nhất — Figma có 27 text style dùng chúng (text-7xl/8xl/9xl ×
|
|
91
|
+
9 weight) và biến typography/font-size/text-7xl|8xl|9xl alias tới
|
|
92
|
+
font/size/7xl|8xl|9xl. Code trước đây dừng ở 6xl nên rơi về mặc định
|
|
93
|
+
Tailwind, không ai kiểm được. */
|
|
94
|
+
--text-7xl: 4.5rem;
|
|
95
|
+
--text-8xl: 6rem;
|
|
96
|
+
--text-9xl: 8rem;
|
|
97
|
+
|
|
98
|
+
--font-weight-regular: 400;
|
|
99
|
+
--font-weight-medium: 500;
|
|
100
|
+
--font-weight-semibold: 600;
|
|
101
|
+
--font-weight-bold: 700;
|
|
102
|
+
--font-weight-extrabold: 800;
|
|
103
|
+
|
|
104
|
+
/* 4. Shadows */
|
|
105
|
+
--shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
106
|
+
--shadow-xs: 0px 1px 0.5px 0.05px rgba(30, 41, 57, 0.02);
|
|
107
|
+
--shadow-sm: 0px 1px 2px 0px rgba(30, 41, 57, 0.05);
|
|
108
|
+
--shadow: 0px 1px 3px 0px rgba(30, 41, 57, 0.1), 0px 1px 2px -1px rgba(30, 41, 57, 0.1);
|
|
109
|
+
--shadow-md: 0px 4px 6px -1px rgba(30, 41, 57, 0.1), 0px 2px 4px -2px rgba(30, 41, 57, 0.1);
|
|
110
|
+
--shadow-lg: 0px 10px 15px -3px rgba(30, 41, 57, 0.1), 0px 4px 6px -4px rgba(30, 41, 57, 0.1);
|
|
111
|
+
--shadow-xl: 0px 20px 25px -5px rgba(30, 41, 57, 0.1), 0px 8px 10px -6px rgba(30, 41, 57, 0.1);
|
|
112
|
+
--shadow-2xl: 0px 25px 50px -12px rgba(30, 41, 57, 0.25);
|
|
113
|
+
--shadow-inner: inset 0px 2px 4px 0px rgba(30, 41, 57, 0.06);
|
|
114
|
+
/* Đổ bóng hướng lên cho thanh cố định đáy màn — theo effect style
|
|
115
|
+
shadow-top của Figma. */
|
|
116
|
+
--shadow-top: 0px -2px 6px 0px rgba(30, 41, 57, 0.08);
|
|
117
|
+
/* Shadow thương hiệu — theo effect style Figma shadow-brand / shadow-brand-sm.
|
|
118
|
+
Dùng brand-700 #2B4182 thay vì đen trung tính. */
|
|
119
|
+
--shadow-brand:
|
|
120
|
+
0px 4px 6px 0px rgba(43, 65, 130, 0.24), 0px 10px 15px -3px rgba(43, 65, 130, 0.18);
|
|
121
|
+
--shadow-brand-sm: 0px 2px 4px 0px rgba(43, 65, 130, 0.16);
|
|
122
|
+
|
|
123
|
+
/* 5. Container Max Widths */
|
|
124
|
+
--container-xs: 20rem;
|
|
125
|
+
--container-sm: 24rem;
|
|
126
|
+
--container-md: 28rem;
|
|
127
|
+
--container-lg: 32rem;
|
|
128
|
+
--container-xl: 36rem;
|
|
129
|
+
--container-2xl: 42rem;
|
|
130
|
+
--container-3xl: 48rem;
|
|
131
|
+
--container-4xl: 56rem;
|
|
132
|
+
--container-5xl: 64rem;
|
|
133
|
+
--container-6xl: 72rem;
|
|
134
|
+
--container-7xl: 80rem;
|
|
135
|
+
|
|
136
|
+
/* Basic Colors */
|
|
137
|
+
--color-white: #ffffff;
|
|
138
|
+
/* Đen của design system là gray-900 #101828, không phải #000 thuần
|
|
139
|
+
(xem CLAUDE.md). Trỏ về token để đổi theo theme. */
|
|
140
|
+
|
|
141
|
+
/* Brand Colors */
|
|
142
|
+
--color-brand-50: var(--color-brand-50, #f5f8ff);
|
|
143
|
+
--color-brand-100: var(--color-brand-100, #e3eaff);
|
|
144
|
+
--color-brand-200: var(--color-brand-200, #d2dcfa);
|
|
145
|
+
--color-brand-300: var(--color-brand-300, #a3baff);
|
|
146
|
+
--color-brand-400: var(--color-brand-400, #8c9ed4);
|
|
147
|
+
--color-brand-500: var(--color-brand-500, #6d7fb3);
|
|
148
|
+
--color-brand-600: var(--color-brand-600, #5168ac);
|
|
149
|
+
--color-brand-700: var(--color-brand-700, #2b4182);
|
|
150
|
+
--color-brand-800: var(--color-brand-800, #203165);
|
|
151
|
+
--color-brand-900: var(--color-brand-900, #152147);
|
|
152
|
+
--color-brand-850: var(--color-brand-850, #1c274c);
|
|
153
|
+
--color-brand-950: var(--color-brand-950, #0d142b);
|
|
154
|
+
|
|
155
|
+
/* Semantic Theme Tokens - Dynamically mapped to CSS variables */
|
|
156
|
+
--color-neutral-primary: var(--bg-primary, #ffffff);
|
|
157
|
+
--color-neutral-primary-soft: var(--bg-primary-soft, #ffffff);
|
|
158
|
+
--color-neutral-primary-medium: var(--bg-primary-medium, #ffffff);
|
|
159
|
+
--color-neutral-primary-strong: var(--bg-primary-strong, #ffffff);
|
|
160
|
+
|
|
161
|
+
--color-neutral-secondary: var(--bg-secondary, #f9fafb);
|
|
162
|
+
--color-neutral-secondary-soft: var(--bg-secondary-soft, #f9fafb);
|
|
163
|
+
--color-neutral-secondary-medium: var(--bg-secondary-medium, #f9fafb);
|
|
164
|
+
--color-neutral-secondary-strong: var(--bg-secondary-strong, #f9fafb);
|
|
165
|
+
|
|
166
|
+
/* Tertiary — theo Figma colors/background/bg-neutral-tertiary (gray/100).
|
|
167
|
+
Trước đây thiếu khiến active state của ol-button không render. */
|
|
168
|
+
--color-neutral-tertiary: var(--bg-tertiary, #f3f4f6);
|
|
169
|
+
--color-neutral-tertiary-medium: var(--bg-tertiary-medium, #f3f4f6);
|
|
170
|
+
--color-neutral-tertiary-soft: var(--bg-tertiary-soft, #f3f4f6);
|
|
171
|
+
--color-neutral-quaternary: var(--bg-quaternary, #e5e7eb);
|
|
172
|
+
|
|
173
|
+
--color-brand: var(--bg-brand, #2b4182);
|
|
174
|
+
--color-brand-strong: var(--bg-brand-strong, #203165);
|
|
175
|
+
--color-brand-medium: var(--bg-brand-medium, #d2dcfa);
|
|
176
|
+
--color-brand-soft: var(--bg-brand-soft, #e3eaff);
|
|
177
|
+
--color-brand-softer: var(--bg-brand-softer, #f5f8ff);
|
|
178
|
+
|
|
179
|
+
--color-dark: var(--bg-dark, #1e2939);
|
|
180
|
+
--color-dark-strong: var(--bg-dark-strong, #101828);
|
|
181
|
+
/* Figma ol-toggle Status=Medium bind `bg-orange`. Token nguồn --bg-orange đã
|
|
182
|
+
có ở tokens.css nhưng thiếu cầu nối này nên class `bg-orange` không sinh
|
|
183
|
+
luật CSS. Lưu ý: --bg-orange mới chỉ khai ở :root, chưa có giá trị cho
|
|
184
|
+
chế độ tối — cần Figma bổ sung. */
|
|
185
|
+
--color-orange: var(--bg-orange, #ff8a4c);
|
|
186
|
+
--color-overlay-subtle: var(--bg-overlay-subtle, rgb(0 0 0 / 0.05));
|
|
187
|
+
--color-overlay-soft: var(--bg-overlay-soft, rgb(0 0 0 / 0.1));
|
|
188
|
+
--color-overlay-medium: var(--bg-overlay-medium, rgb(0 0 0 / 0.2));
|
|
189
|
+
--color-overlay-strong: var(--bg-overlay-strong, rgb(0 0 0 / 0.4));
|
|
190
|
+
--color-overlay-backdrop: var(--bg-overlay-backdrop, rgb(0 0 0 / 0.5));
|
|
191
|
+
--color-disabled: var(--bg-disabled, #f3f4f6);
|
|
192
|
+
|
|
193
|
+
/* Bảy màu nền phụ: token nguồn đã có ở tokens.css nhưng thiếu cầu nối nên
|
|
194
|
+
class `bg-purple`, `bg-sky`… không sinh luật CSS. Cùng cảnh với
|
|
195
|
+
`--color-orange` phía trên. Tên class KHÔNG trùng thang số (`bg-purple` vs
|
|
196
|
+
`bg-purple-500`). */
|
|
197
|
+
--color-purple: var(--bg-purple, #ad46ff);
|
|
198
|
+
--color-sky: var(--bg-sky, #2684fc);
|
|
199
|
+
--color-teal: var(--bg-teal, #009689);
|
|
200
|
+
--color-pink: var(--bg-pink, #d93b84);
|
|
201
|
+
--color-cyan: var(--bg-cyan, #00b8db);
|
|
202
|
+
--color-fuchsia: var(--bg-fuchsia, #c800de);
|
|
203
|
+
--color-indigo: var(--bg-indigo, #544bd4);
|
|
204
|
+
|
|
205
|
+
/* Ba token còn thiếu cầu nối. `--text-white`/`--text-black` là cặp tuyệt đối
|
|
206
|
+
dùng cho chữ trên nền đặc; trước đây chỉ gọi được bằng `text-white` của
|
|
207
|
+
Tailwind chứ không qua token. */
|
|
208
|
+
--color-quaternary-medium: var(--bg-quaternary-medium, #e5e7eb);
|
|
209
|
+
--color-border-muted: var(--border-muted, #f9fafb);
|
|
210
|
+
--color-border-light-subtle: var(--border-light-subtle, #f3f4f6);
|
|
211
|
+
--color-fg-white: var(--text-white, #ffffff);
|
|
212
|
+
--color-fg-black: var(--text-black, #101828);
|
|
213
|
+
|
|
214
|
+
/* KHÔNG thêm token riêng cho `fill-*`/`stroke-*`: Tailwind v4 ở dự án này chỉ
|
|
215
|
+
sinh utility màu cho `bg-`/`text-`/`border-`/`ring-` từ `--color-*`, không
|
|
216
|
+
sinh `fill-`/`stroke-`. Đã đo: `fill-body`, `fill-heading`, `stroke-brand`
|
|
217
|
+
đều không có luật, trong khi `fill-current` + `text-*` chạy đúng. Vì vậy
|
|
218
|
+
SVG trong `ol-chart` dùng `fill="currentColor"` rồi đặt màu bằng `text-*`. */
|
|
219
|
+
|
|
220
|
+
/* Status Colors
|
|
221
|
+
Token KHÔNG hậu tố (--color-danger/success/warning) map về --text-* vì
|
|
222
|
+
trong thư viện chúng chỉ được dùng qua class text-*; dùng --bg-* ở đây sẽ
|
|
223
|
+
nhạt hơn một bậc và tụt contrast.
|
|
224
|
+
Nền lấy các biến thể -soft/-medium/-strong/-surface, map về --bg-*.
|
|
225
|
+
Đầy đủ hai kênh nên không còn phải chọn giữa chữ và nền. */
|
|
226
|
+
--color-warning: var(--border-warning, #ffc022);
|
|
227
|
+
--color-fg-warning-subtle: var(--text-warning-subtle, #b87a00);
|
|
228
|
+
--color-warning-surface: var(--bg-warning, #ffc022);
|
|
229
|
+
--color-warning-soft: var(--bg-warning-soft, #fffbeb);
|
|
230
|
+
--color-warning-medium: var(--bg-warning-medium, #fff3c4);
|
|
231
|
+
--color-warning-strong: var(--bg-warning-strong, #ffb000);
|
|
232
|
+
--color-warning-strongest: var(--bg-warning-strongest, #ffa000);
|
|
233
|
+
|
|
234
|
+
--color-success: var(--border-success, #007a55);
|
|
235
|
+
--color-success-strong: var(--bg-success-strong, #006045);
|
|
236
|
+
--color-success-surface: var(--bg-success, #007a55);
|
|
237
|
+
--color-success-soft: var(--bg-success-soft, #ecfdf5);
|
|
238
|
+
--color-success-medium: var(--bg-success-medium, #d0fae5);
|
|
239
|
+
|
|
240
|
+
--color-danger: var(--border-danger, #ec003f);
|
|
241
|
+
--color-danger-strong: var(--bg-danger-strong, #a50036);
|
|
242
|
+
--color-danger-surface: var(--bg-danger, #ec003f);
|
|
243
|
+
--color-danger-soft: var(--bg-danger-soft, #fef0f2);
|
|
244
|
+
--color-danger-medium: var(--bg-danger-medium, #ffe4e6);
|
|
245
|
+
|
|
246
|
+
--color-info: var(--border-info, #a3baff);
|
|
247
|
+
|
|
248
|
+
/* Typography & Text Tokens */
|
|
249
|
+
--color-heading: var(--text-heading, #101828);
|
|
250
|
+
--color-body: var(--text-body, #4a5565);
|
|
251
|
+
--color-body-subtle: var(--text-body-subtle, #6b7280);
|
|
252
|
+
--color-fg-danger: var(--text-danger, #ec003f);
|
|
253
|
+
--color-fg-danger-strong: var(--text-danger-strong, #8b0836);
|
|
254
|
+
--color-fg-success: var(--text-success, #007a55);
|
|
255
|
+
--color-fg-success-strong: var(--text-success-strong, #004f3b);
|
|
256
|
+
--color-fg-warning: var(--text-warning, #8f5f00);
|
|
257
|
+
--color-fg-warning-strong: var(--text-warning-strong, #3d2900);
|
|
258
|
+
--color-fg-info: var(--text-info, #152147);
|
|
259
|
+
--color-fg-info-strong: var(--text-info-strong, #152147);
|
|
260
|
+
--color-fg-brand: var(--text-brand, #2b4182);
|
|
261
|
+
--color-fg-brand-subtle: var(--text-brand-subtle, #a3baff);
|
|
262
|
+
--color-fg-brand-strong: var(--text-brand-strong, #152147);
|
|
263
|
+
/* Thiếu cầu nối thì token khai ở tokens.css vẫn không sinh class nào. */
|
|
264
|
+
--color-fg-brand-medium: var(--text-brand-medium, #203165);
|
|
265
|
+
--color-fg-brand-soft: var(--text-brand-soft, #e3eaff);
|
|
266
|
+
--color-fg-disabled: var(--text-disabled, #99a1af);
|
|
267
|
+
|
|
268
|
+
/* Border Tokens */
|
|
269
|
+
--color-default: var(--border-default, #e5e7eb);
|
|
270
|
+
--color-default-subtle: var(--border-default-subtle, #e5e7eb);
|
|
271
|
+
--color-default-medium: var(--border-default-medium, #e5e7eb);
|
|
272
|
+
--color-default-strong: var(--border-default-strong, #e5e7eb);
|
|
273
|
+
--color-border: var(--border-default, #e5e7eb);
|
|
274
|
+
--color-border-subtle: var(--border-default-subtle, #e5e7eb);
|
|
275
|
+
--color-border-light: var(--border-light, #f3f4f6);
|
|
276
|
+
--color-border-medium: var(--border-default-medium, #e5e7eb);
|
|
277
|
+
--color-border-strong: var(--border-default-strong, #e5e7eb);
|
|
278
|
+
--color-border-brand: var(--border-brand, #2b4182);
|
|
279
|
+
--color-focus: var(--border-focus, #2b4182);
|
|
280
|
+
--color-focus-ring: var(--bg-focus-ring, #d2dcfa);
|
|
281
|
+
--color-brand-subtle: var(--border-brand-subtle, #d2dcfa);
|
|
282
|
+
--color-brand-light: var(--border-brand-light, #6d7fb3);
|
|
283
|
+
--color-success-subtle: var(--border-success-subtle, #a4f4cf);
|
|
284
|
+
--color-danger-subtle: var(--border-danger-subtle, #ffccd3);
|
|
285
|
+
--color-warning-subtle: var(--border-warning-subtle, #ffe79a);
|
|
286
|
+
|
|
287
|
+
/* ---- 20 token Figma bổ sung (2026-09-11) ---- */
|
|
288
|
+
--color-white-surface: var(--bg-white, #ffffff);
|
|
289
|
+
--color-gray-surface: var(--bg-gray, #d1d5db);
|
|
290
|
+
|
|
291
|
+
--color-dark-line: var(--border-dark, #1e2939);
|
|
292
|
+
--color-dark-line-subtle: var(--border-dark-subtle, #1e2939);
|
|
293
|
+
--color-light-medium: var(--border-light-medium, #f3f4f6);
|
|
294
|
+
/* Viền đệm tách phần tử khỏi nền (avatar ring, chip chồng nhau). */
|
|
295
|
+
--color-buffer: var(--border-buffer, #ffffff);
|
|
296
|
+
--color-buffer-medium: var(--border-buffer-medium, #ffffff);
|
|
297
|
+
--color-buffer-strong: var(--border-buffer-strong, #ffffff);
|
|
298
|
+
--color-buffer-gradient-secondary: var(--border-buffer-gradient-secondary, #f9fafb);
|
|
299
|
+
--color-orange-line: var(--border-orange, #ff8a4c);
|
|
300
|
+
--color-purple-line: var(--border-purple, #ad46ff);
|
|
301
|
+
|
|
302
|
+
--color-fg-cyan: var(--text-cyan, #0092b8);
|
|
303
|
+
--color-fg-indigo: var(--text-indigo, #544bd4);
|
|
304
|
+
--color-fg-lime: var(--text-lime, #5ea500);
|
|
305
|
+
--color-fg-pink: var(--text-pink, #d93b84);
|
|
306
|
+
--color-fg-purple: var(--text-purple, #9810fa);
|
|
307
|
+
--color-fg-yellow: var(--text-yellow, #ffc022);
|
|
308
|
+
|
|
309
|
+
/* Thang xếp lớp — xem chú thích trong tokens.css */
|
|
310
|
+
--z-index-base: var(--z-base, 0);
|
|
311
|
+
--z-index-raised: var(--z-raised, 10);
|
|
312
|
+
--z-index-sticky: var(--z-sticky, 20);
|
|
313
|
+
--z-index-drawer-backdrop: var(--z-drawer-backdrop, 30);
|
|
314
|
+
--z-index-drawer: var(--z-drawer, 40);
|
|
315
|
+
--z-index-dropdown: var(--z-dropdown, 50);
|
|
316
|
+
--z-index-popover: var(--z-popover, 60);
|
|
317
|
+
--z-index-modal-backdrop: var(--z-modal-backdrop, 70);
|
|
318
|
+
--z-index-modal: var(--z-modal, 80);
|
|
319
|
+
--z-index-tooltip: var(--z-tooltip, 90);
|
|
320
|
+
--z-index-toast: var(--z-toast, 100);
|
|
321
|
+
|
|
322
|
+
/* Surface Aliases */
|
|
323
|
+
--color-surface-raised: var(--bg-primary, #ffffff);
|
|
324
|
+
--color-surface-sunken: var(--bg-secondary, #f9fafb);
|
|
325
|
+
}
|