@edmicro/olkit 1.1.1 → 1.1.2
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/fesm2022/edmicro-olkit.mjs +2937 -1565
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +1 -1
- package/package.json +1 -1
- package/styles/isolation.css +50 -0
- package/styles/tokens.css +57 -650
- package/types/edmicro-olkit.d.ts +841 -139
- package/types/edmicro-olkit.d.ts.map +1 -1
- package/version.txt +2 -2
package/styles/tokens.css
CHANGED
|
@@ -6,6 +6,23 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
|
+
/* -------------------------------------------------------------------------
|
|
10
|
+
-1. COLOR SCHEME — thanh cuộn, ô chọn gốc, ô nhập gốc
|
|
11
|
+
-------------------------------------------------------------------------
|
|
12
|
+
`color-scheme` là thứ DUY NHẤT nói cho trình duyệt biết trang đang sáng
|
|
13
|
+
hay tối. Nó đổi màu những phần do TRÌNH DUYỆT vẽ, không phải CSS của ta:
|
|
14
|
+
thanh cuộn, mũi tên `<select>`, nút tăng giảm `<input type=number>`, lịch
|
|
15
|
+
của `<input type=date>`, nền ô nhập tự điền.
|
|
16
|
+
|
|
17
|
+
Thiếu nó: đo /select ở chế độ tối được `color-scheme: normal`, nên thanh
|
|
18
|
+
cuộn vẫn SÁNG trên nền tối — ba vệt trắng chói ở mép phải trang, cạnh
|
|
19
|
+
sidebar và trong cột thuộc tính.
|
|
20
|
+
|
|
21
|
+
Đặt ở `:root`/`.dark` chứ không ở `body`: thanh cuộn của trang do phần tử
|
|
22
|
+
gốc quyết định, đặt ở `body` là không ăn.
|
|
23
|
+
------------------------------------------------------------------------- */
|
|
24
|
+
color-scheme: light;
|
|
25
|
+
|
|
9
26
|
/* -------------------------------------------------------------------------
|
|
10
27
|
0. BORDER RADIUS SCALE (Default Figma - Modern)
|
|
11
28
|
------------------------------------------------------------------------- */
|
|
@@ -219,6 +236,9 @@
|
|
|
219
236
|
DARK MODE
|
|
220
237
|
============================================================================= */
|
|
221
238
|
.dark {
|
|
239
|
+
/* Xem chú thích ở `:root`. Đây là thứ làm thanh cuộn chuyển sang màu tối. */
|
|
240
|
+
color-scheme: dark;
|
|
241
|
+
|
|
222
242
|
/* 1. Colors / Text - Dark */
|
|
223
243
|
--text-white: #ffffff;
|
|
224
244
|
/* Theo Figma colors/text/text-black: giữ gray/900 ở CẢ light lẫn dark.
|
|
@@ -227,8 +247,22 @@
|
|
|
227
247
|
làm mất ý nghĩa đó. Chữ tiêu đề đổi theo theme dùng --text-heading. */
|
|
228
248
|
--text-black: var(--color-gray-900);
|
|
229
249
|
--text-heading: var(--color-white);
|
|
230
|
-
|
|
231
|
-
|
|
250
|
+
/* `gray-300`, KHÔNG phải `gray-400`, cho CẢ HAI token dưới đây: trên nền
|
|
251
|
+
`tertiary`/`quaternary` (đều là `gray-700` ở chế độ tối) thì `gray-400`
|
|
252
|
+
chỉ cho **3,96** — dưới chuẩn 4,5 cho chữ 12px.
|
|
253
|
+
|
|
254
|
+
Đo `/banner`: chip `role="banner"` 110×24px, sáng 6,10 đạt mà tối 3,96
|
|
255
|
+
hỏng (BUG-032 §5). Chip đó thừa kế màu từ `text-body` của khung layout,
|
|
256
|
+
KHÔNG dùng `text-body-subtle` — nên phải đổi cả hai, sửa mỗi
|
|
257
|
+
`body-subtle` không chạm tới nó (đã thử, chip vẫn 3,96).
|
|
258
|
+
|
|
259
|
+
`gray-300` đưa hai nền đó lên **7,00** và không kéo nền nào xuống:
|
|
260
|
+
primary 12,05 · secondary 9,96 (trước là 6,82 · 5,64). */
|
|
261
|
+
--text-body: var(--color-gray-300);
|
|
262
|
+
/* `--text-body-subtle` đang bằng HỆT `--text-body` ở nhánh tối, tức "subtle"
|
|
263
|
+
không còn nhạt hơn gì cả. Giữ nguyên tương quan đó ở đây; muốn tách hai
|
|
264
|
+
bậc thì phải đo lại cả bốn nền. */
|
|
265
|
+
--text-body-subtle: var(--color-gray-300);
|
|
232
266
|
|
|
233
267
|
--text-brand: var(--color-brand-400);
|
|
234
268
|
--text-brand-strong: var(--color-brand-300);
|
|
@@ -354,661 +388,34 @@
|
|
|
354
388
|
}
|
|
355
389
|
|
|
356
390
|
/* =============================================================================
|
|
357
|
-
THEME
|
|
358
|
-
============================================================================= */
|
|
359
|
-
[data-theme='minimal'] {
|
|
360
|
-
--radius-xxs: 0px;
|
|
361
|
-
--radius-xs: 0px;
|
|
362
|
-
--radius-sm: 0px;
|
|
363
|
-
--radius: 0px;
|
|
364
|
-
--radius-base: 0px;
|
|
365
|
-
--radius-md: 0px;
|
|
366
|
-
--radius-lg: 0px;
|
|
367
|
-
--radius-xl: 0px;
|
|
368
|
-
--radius-2xl: 0px;
|
|
369
|
-
--radius-3xl: 0px;
|
|
370
|
-
|
|
371
|
-
--text-heading: #0f172a;
|
|
372
|
-
--text-body: #475569;
|
|
373
|
-
--text-body-subtle: #64748b;
|
|
374
|
-
--bg-primary: #ffffff;
|
|
375
|
-
--bg-primary-soft: #f8fafc;
|
|
376
|
-
--bg-secondary: #f1f5f9;
|
|
377
|
-
--bg-secondary-medium: #e2e8f0;
|
|
378
|
-
--border-default: #cbd5e1;
|
|
379
|
-
--bg-brand: #0f172a;
|
|
380
|
-
--bg-brand-strong: #020617;
|
|
381
|
-
--bg-brand-soft: #e2e8f0;
|
|
382
|
-
--text-brand: #0f172a;
|
|
383
|
-
|
|
384
|
-
/* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
|
|
385
|
-
--bg-primary-medium: #f8fafc;
|
|
386
|
-
--bg-primary-strong: #f1f5f9;
|
|
387
|
-
--bg-secondary-soft: #f8fafc;
|
|
388
|
-
--bg-secondary-strong: #cbd5e1;
|
|
389
|
-
--bg-tertiary: #f1f5f9;
|
|
390
|
-
--bg-tertiary-soft: #f8fafc;
|
|
391
|
-
--bg-tertiary-medium: #e2e8f0;
|
|
392
|
-
--bg-quaternary: #e2e8f0;
|
|
393
|
-
--bg-quaternary-medium: #cbd5e1;
|
|
394
|
-
--bg-disabled: #f1f5f9;
|
|
395
|
-
--border-default-subtle: #e2e8f0;
|
|
396
|
-
--border-default-medium: #94a3b8;
|
|
397
|
-
--border-default-strong: #64748b;
|
|
398
|
-
--border-light: #e2e8f0;
|
|
399
|
-
--border-light-subtle: #f1f5f9;
|
|
400
|
-
--border-muted: #f8fafc;
|
|
401
|
-
--text-disabled: #94a3b8;
|
|
402
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
403
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
404
|
-
--text-success: var(--color-emerald-700);
|
|
405
|
-
--text-success-strong: var(--color-emerald-800);
|
|
406
|
-
--text-danger: var(--color-rose-600);
|
|
407
|
-
--text-danger-strong: var(--color-rose-800);
|
|
408
|
-
--text-warning: var(--color-orange-600);
|
|
409
|
-
--text-warning-strong: var(--color-orange-950);
|
|
410
|
-
--text-warning-subtle: var(--color-orange-600);
|
|
411
|
-
--text-info: var(--color-brand-700);
|
|
412
|
-
--text-info-strong: var(--color-brand-800);
|
|
413
|
-
--bg-success: var(--color-emerald-600);
|
|
414
|
-
--bg-success-soft: var(--color-emerald-50);
|
|
415
|
-
--bg-success-medium: var(--color-emerald-100);
|
|
416
|
-
--bg-success-strong: var(--color-emerald-700);
|
|
417
|
-
--bg-danger: var(--color-rose-600);
|
|
418
|
-
--bg-danger-soft: var(--color-rose-50);
|
|
419
|
-
--bg-danger-medium: var(--color-rose-100);
|
|
420
|
-
--bg-danger-strong: var(--color-rose-700);
|
|
421
|
-
--bg-warning: var(--color-orange-500);
|
|
422
|
-
--bg-warning-soft: var(--color-orange-50);
|
|
423
|
-
--bg-warning-medium: var(--color-orange-100);
|
|
424
|
-
--bg-warning-strong: var(--color-orange-700);
|
|
425
|
-
--bg-warning-strongest: var(--color-orange-800);
|
|
426
|
-
--border-success: var(--color-emerald-300);
|
|
427
|
-
--border-success-subtle: var(--color-emerald-200);
|
|
428
|
-
--border-danger: var(--color-rose-600);
|
|
429
|
-
--border-danger-subtle: var(--color-rose-200);
|
|
430
|
-
--border-warning: var(--color-orange-500);
|
|
431
|
-
--border-warning-subtle: var(--color-orange-200);
|
|
432
|
-
--border-info: var(--color-brand-300);
|
|
433
|
-
|
|
434
|
-
/* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
|
|
435
|
-
--bg-brand-softer: #f1f5f9;
|
|
436
|
-
--border-brand: #0f172a;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.dark[data-theme='minimal'],
|
|
440
|
-
[data-theme='minimal'].dark {
|
|
441
|
-
--radius-xxs: 0px;
|
|
442
|
-
--radius-xs: 0px;
|
|
443
|
-
--radius-sm: 0px;
|
|
444
|
-
--radius: 0px;
|
|
445
|
-
--radius-base: 0px;
|
|
446
|
-
--radius-md: 0px;
|
|
447
|
-
--radius-lg: 0px;
|
|
448
|
-
--radius-xl: 0px;
|
|
449
|
-
--radius-2xl: 0px;
|
|
450
|
-
--radius-3xl: 0px;
|
|
451
|
-
|
|
452
|
-
--text-heading: #f8fafc;
|
|
453
|
-
--text-body: #94a3b8;
|
|
454
|
-
--text-body-subtle: #64748b;
|
|
455
|
-
--bg-primary: #020617;
|
|
456
|
-
--bg-primary-soft: #0b0f19;
|
|
457
|
-
--bg-secondary: #0f172a;
|
|
458
|
-
--bg-secondary-medium: #1e293b;
|
|
459
|
-
--border-default: #334155;
|
|
460
|
-
--bg-brand: #38bdf8;
|
|
461
|
-
--bg-brand-strong: #7dd3fc;
|
|
462
|
-
--bg-brand-soft: #082f49;
|
|
463
|
-
--text-brand: #38bdf8;
|
|
464
|
-
|
|
465
|
-
/* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
|
|
466
|
-
--bg-primary-medium: #0f172a;
|
|
467
|
-
--bg-primary-strong: #1e293b;
|
|
468
|
-
--bg-secondary-soft: #0b0f19;
|
|
469
|
-
--bg-secondary-strong: #334155;
|
|
470
|
-
--bg-tertiary: #1e293b;
|
|
471
|
-
--bg-tertiary-soft: #0f172a;
|
|
472
|
-
--bg-tertiary-medium: #334155;
|
|
473
|
-
--bg-quaternary: #334155;
|
|
474
|
-
--bg-quaternary-medium: #475569;
|
|
475
|
-
--bg-disabled: #1e293b;
|
|
476
|
-
--border-default-subtle: #1e293b;
|
|
477
|
-
--border-default-medium: #475569;
|
|
478
|
-
--border-default-strong: #64748b;
|
|
479
|
-
--border-light: #334155;
|
|
480
|
-
--border-light-subtle: #1e293b;
|
|
481
|
-
--border-muted: #0f172a;
|
|
482
|
-
--text-disabled: #64748b;
|
|
483
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
484
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
485
|
-
--text-success: var(--color-emerald-400);
|
|
486
|
-
--text-success-strong: var(--color-emerald-300);
|
|
487
|
-
--text-danger: var(--color-rose-400);
|
|
488
|
-
--text-danger-strong: var(--color-rose-300);
|
|
489
|
-
--text-warning: var(--color-orange-300);
|
|
490
|
-
--text-warning-strong: var(--color-orange-200);
|
|
491
|
-
--text-warning-subtle: var(--color-orange-500);
|
|
492
|
-
--text-info: var(--color-brand-400);
|
|
493
|
-
--text-info-strong: var(--color-brand-300);
|
|
494
|
-
--bg-success: var(--color-emerald-700);
|
|
495
|
-
--bg-success-soft: var(--color-emerald-950);
|
|
496
|
-
--bg-success-medium: var(--color-emerald-900);
|
|
497
|
-
--bg-success-strong: var(--color-emerald-600);
|
|
498
|
-
--bg-danger: var(--color-rose-700);
|
|
499
|
-
--bg-danger-soft: var(--color-rose-950);
|
|
500
|
-
--bg-danger-medium: var(--color-rose-900);
|
|
501
|
-
--bg-danger-strong: var(--color-rose-600);
|
|
502
|
-
--bg-warning: var(--color-orange-600);
|
|
503
|
-
--bg-warning-soft: var(--color-orange-950);
|
|
504
|
-
--bg-warning-medium: var(--color-orange-900);
|
|
505
|
-
--bg-warning-strong: var(--color-orange-700);
|
|
506
|
-
--bg-warning-strongest: var(--color-orange-800);
|
|
507
|
-
--border-success: var(--color-emerald-600);
|
|
508
|
-
--border-success-subtle: var(--color-emerald-900);
|
|
509
|
-
--border-danger: var(--color-rose-600);
|
|
510
|
-
--border-danger-subtle: var(--color-rose-900);
|
|
511
|
-
--border-warning: var(--color-orange-500);
|
|
512
|
-
--border-warning-subtle: var(--color-orange-900);
|
|
513
|
-
--border-info: var(--color-brand-600);
|
|
514
|
-
|
|
515
|
-
/* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
|
|
516
|
-
--bg-brand-softer: #020617;
|
|
517
|
-
--border-brand: #38bdf8;
|
|
518
|
-
}
|
|
519
|
-
|
|
520
|
-
/* =============================================================================
|
|
521
|
-
THEME MODE: ENTERPRISE (Compact 4-6px Radius, Corporate Zinc)
|
|
522
|
-
============================================================================= */
|
|
523
|
-
[data-theme='enterprise'] {
|
|
524
|
-
--radius-xxs: 1px;
|
|
525
|
-
--radius-xs: 2px;
|
|
526
|
-
--radius-sm: 4px;
|
|
527
|
-
--radius: 4px;
|
|
528
|
-
--radius-base: 6px;
|
|
529
|
-
--radius-md: 6px;
|
|
530
|
-
--radius-lg: 8px;
|
|
531
|
-
--radius-xl: 8px;
|
|
532
|
-
--radius-2xl: 10px;
|
|
533
|
-
--radius-3xl: 12px;
|
|
534
|
-
|
|
535
|
-
--text-heading: #18181b;
|
|
536
|
-
--text-body: #52525b;
|
|
537
|
-
--text-body-subtle: #71717a;
|
|
538
|
-
--bg-primary: #ffffff;
|
|
539
|
-
--bg-primary-soft: #fafafa;
|
|
540
|
-
--bg-secondary: #f4f4f5;
|
|
541
|
-
--bg-secondary-medium: #e4e4e7;
|
|
542
|
-
--border-default: #d4d4d8;
|
|
543
|
-
--bg-brand: #1e3a8a;
|
|
544
|
-
--bg-brand-strong: #172554;
|
|
545
|
-
--bg-brand-soft: #dbeafe;
|
|
546
|
-
--text-brand: #1e3a8a;
|
|
547
|
-
|
|
548
|
-
/* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
|
|
549
|
-
--bg-primary-medium: #f8fafc;
|
|
550
|
-
--bg-primary-strong: #f1f5f9;
|
|
551
|
-
--bg-secondary-soft: #f8fafc;
|
|
552
|
-
--bg-secondary-strong: #cbd5e1;
|
|
553
|
-
--bg-tertiary: #f1f5f9;
|
|
554
|
-
--bg-tertiary-soft: #f8fafc;
|
|
555
|
-
--bg-tertiary-medium: #e2e8f0;
|
|
556
|
-
--bg-quaternary: #e2e8f0;
|
|
557
|
-
--bg-quaternary-medium: #cbd5e1;
|
|
558
|
-
--bg-disabled: #f1f5f9;
|
|
559
|
-
--border-default-subtle: #e2e8f0;
|
|
560
|
-
--border-default-medium: #94a3b8;
|
|
561
|
-
--border-default-strong: #64748b;
|
|
562
|
-
--border-light: #e2e8f0;
|
|
563
|
-
--border-light-subtle: #f1f5f9;
|
|
564
|
-
--border-muted: #f8fafc;
|
|
565
|
-
--text-disabled: #94a3b8;
|
|
566
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
567
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
568
|
-
--text-success: var(--color-emerald-700);
|
|
569
|
-
--text-success-strong: var(--color-emerald-800);
|
|
570
|
-
--text-danger: var(--color-rose-600);
|
|
571
|
-
--text-danger-strong: var(--color-rose-800);
|
|
572
|
-
--text-warning: var(--color-orange-600);
|
|
573
|
-
--text-warning-strong: var(--color-orange-950);
|
|
574
|
-
--text-warning-subtle: var(--color-orange-600);
|
|
575
|
-
--text-info: var(--color-brand-700);
|
|
576
|
-
--text-info-strong: var(--color-brand-800);
|
|
577
|
-
--bg-success: var(--color-emerald-700);
|
|
578
|
-
--bg-success-soft: var(--color-emerald-50);
|
|
579
|
-
--bg-success-medium: var(--color-emerald-100);
|
|
580
|
-
--bg-success-strong: var(--color-emerald-700);
|
|
581
|
-
--bg-danger: var(--color-rose-600);
|
|
582
|
-
--bg-danger-soft: var(--color-rose-50);
|
|
583
|
-
--bg-danger-medium: var(--color-rose-100);
|
|
584
|
-
--bg-danger-strong: var(--color-rose-700);
|
|
585
|
-
--bg-warning: var(--color-orange-700);
|
|
586
|
-
--bg-warning-soft: var(--color-orange-50);
|
|
587
|
-
--bg-warning-medium: var(--color-orange-100);
|
|
588
|
-
--bg-warning-strong: var(--color-orange-700);
|
|
589
|
-
--bg-warning-strongest: var(--color-orange-800);
|
|
590
|
-
--border-success: var(--color-emerald-300);
|
|
591
|
-
--border-success-subtle: var(--color-emerald-200);
|
|
592
|
-
--border-danger: var(--color-rose-600);
|
|
593
|
-
--border-danger-subtle: var(--color-rose-200);
|
|
594
|
-
--border-warning: var(--color-orange-500);
|
|
595
|
-
--border-warning-subtle: var(--color-orange-200);
|
|
596
|
-
--border-info: var(--color-brand-300);
|
|
391
|
+
THEME: TIỂU HỌC — KHUNG, CHƯA ĐỔ GIÁ TRỊ
|
|
597
392
|
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
}
|
|
393
|
+
Bốn theme phụ cũ (`minimal` · `enterprise` · `playful` · `mono`) đã gỡ
|
|
394
|
+
2026-09-21 theo VIỆC-029: Figma chỉ có Ôn Luyện, code có 5 theme nên 661
|
|
395
|
+
dòng ở đây không ứng với thiết kế nào.
|
|
602
396
|
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
--radius-xs: 2px;
|
|
607
|
-
--radius-sm: 4px;
|
|
608
|
-
--radius: 4px;
|
|
609
|
-
--radius-base: 6px;
|
|
610
|
-
--radius-md: 6px;
|
|
611
|
-
--radius-lg: 8px;
|
|
612
|
-
--radius-xl: 8px;
|
|
613
|
-
--radius-2xl: 10px;
|
|
614
|
-
--radius-3xl: 12px;
|
|
615
|
-
|
|
616
|
-
--text-heading: #fafafa;
|
|
617
|
-
--text-body: #a1a1aa;
|
|
618
|
-
--text-body-subtle: #71717a;
|
|
619
|
-
--bg-primary: #09090b;
|
|
620
|
-
--bg-primary-soft: #121215;
|
|
621
|
-
--bg-secondary: #18181b;
|
|
622
|
-
--bg-secondary-medium: #27272a;
|
|
623
|
-
--border-default: #27272a;
|
|
624
|
-
--bg-brand: #3b82f6;
|
|
625
|
-
--bg-brand-strong: #60a5fa;
|
|
626
|
-
--bg-brand-soft: #172554;
|
|
627
|
-
--text-brand: #60a5fa;
|
|
628
|
-
|
|
629
|
-
/* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
|
|
630
|
-
--bg-primary-medium: #0f172a;
|
|
631
|
-
--bg-primary-strong: #1e293b;
|
|
632
|
-
--bg-secondary-soft: #0b0f19;
|
|
633
|
-
--bg-secondary-strong: #334155;
|
|
634
|
-
--bg-tertiary: #1e293b;
|
|
635
|
-
--bg-tertiary-soft: #0f172a;
|
|
636
|
-
--bg-tertiary-medium: #334155;
|
|
637
|
-
--bg-quaternary: #334155;
|
|
638
|
-
--bg-quaternary-medium: #475569;
|
|
639
|
-
--bg-disabled: #1e293b;
|
|
640
|
-
--border-default-subtle: #1e293b;
|
|
641
|
-
--border-default-medium: #475569;
|
|
642
|
-
--border-default-strong: #64748b;
|
|
643
|
-
--border-light: #334155;
|
|
644
|
-
--border-light-subtle: #1e293b;
|
|
645
|
-
--border-muted: #0f172a;
|
|
646
|
-
--text-disabled: #64748b;
|
|
647
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
648
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
649
|
-
--text-success: var(--color-emerald-400);
|
|
650
|
-
--text-success-strong: var(--color-emerald-300);
|
|
651
|
-
--text-danger: var(--color-rose-400);
|
|
652
|
-
--text-danger-strong: var(--color-rose-300);
|
|
653
|
-
--text-warning: var(--color-orange-300);
|
|
654
|
-
--text-warning-strong: var(--color-orange-200);
|
|
655
|
-
--text-warning-subtle: var(--color-orange-500);
|
|
656
|
-
--text-info: var(--color-brand-400);
|
|
657
|
-
--text-info-strong: var(--color-brand-300);
|
|
658
|
-
--bg-success: var(--color-emerald-800);
|
|
659
|
-
--bg-success-soft: var(--color-emerald-950);
|
|
660
|
-
--bg-success-medium: var(--color-emerald-900);
|
|
661
|
-
--bg-success-strong: var(--color-emerald-600);
|
|
662
|
-
--bg-danger: var(--color-rose-800);
|
|
663
|
-
--bg-danger-soft: var(--color-rose-950);
|
|
664
|
-
--bg-danger-medium: var(--color-rose-900);
|
|
665
|
-
--bg-danger-strong: var(--color-rose-600);
|
|
666
|
-
--bg-warning: var(--color-orange-800);
|
|
667
|
-
--bg-warning-soft: var(--color-orange-950);
|
|
668
|
-
--bg-warning-medium: var(--color-orange-900);
|
|
669
|
-
--bg-warning-strong: var(--color-orange-700);
|
|
670
|
-
--bg-warning-strongest: var(--color-orange-800);
|
|
671
|
-
--border-success: var(--color-emerald-600);
|
|
672
|
-
--border-success-subtle: var(--color-emerald-900);
|
|
673
|
-
--border-danger: var(--color-rose-600);
|
|
674
|
-
--border-danger-subtle: var(--color-rose-900);
|
|
675
|
-
--border-warning: var(--color-orange-500);
|
|
676
|
-
--border-warning-subtle: var(--color-orange-900);
|
|
677
|
-
--border-info: var(--color-brand-600);
|
|
678
|
-
|
|
679
|
-
/* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
|
|
680
|
-
--bg-brand-softer: #0b1220;
|
|
681
|
-
--border-brand: #3b82f6;
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
/* =============================================================================
|
|
685
|
-
THEME MODE: PLAYFUL (Super Rounded 16-32px, Vibrant Purple)
|
|
686
|
-
============================================================================= */
|
|
687
|
-
[data-theme='playful'] {
|
|
688
|
-
--radius-xxs: 4px;
|
|
689
|
-
--radius-xs: 8px;
|
|
690
|
-
--radius-sm: 12px;
|
|
691
|
-
--radius: 14px;
|
|
692
|
-
--radius-base: 18px;
|
|
693
|
-
--radius-md: 18px;
|
|
694
|
-
--radius-lg: 24px;
|
|
695
|
-
--radius-xl: 28px;
|
|
696
|
-
--radius-2xl: 32px;
|
|
697
|
-
--radius-3xl: 40px;
|
|
698
|
-
|
|
699
|
-
--bg-brand: #9333ea;
|
|
700
|
-
--bg-brand-strong: #7e22ce;
|
|
701
|
-
--bg-brand-soft: #f3e8ff;
|
|
702
|
-
--bg-brand-softer: #faf5ff;
|
|
703
|
-
--text-brand: #7e22ce;
|
|
704
|
-
--border-brand: #c084fc;
|
|
705
|
-
|
|
706
|
-
--bg-primary: #ffffff;
|
|
707
|
-
--bg-primary-soft: #faf5ff;
|
|
708
|
-
--bg-secondary: #f3e8ff;
|
|
709
|
-
--bg-secondary-medium: #e9d5ff;
|
|
710
|
-
--border-default: #e9d5ff;
|
|
711
|
-
--text-heading: #3b0764;
|
|
712
|
-
--text-body: #6b21a8;
|
|
713
|
-
|
|
714
|
-
/* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
|
|
715
|
-
--bg-primary-medium: #faf5ff;
|
|
716
|
-
--bg-primary-strong: #f3e8ff;
|
|
717
|
-
--bg-secondary-soft: #faf5ff;
|
|
718
|
-
--bg-secondary-strong: #e9d4ff;
|
|
719
|
-
--bg-tertiary: #f3e8ff;
|
|
720
|
-
--bg-tertiary-soft: #faf5ff;
|
|
721
|
-
--bg-tertiary-medium: #e9d4ff;
|
|
722
|
-
--bg-quaternary: #e9d4ff;
|
|
723
|
-
--bg-quaternary-medium: #dab2ff;
|
|
724
|
-
--bg-disabled: #f3e8ff;
|
|
725
|
-
--border-default-subtle: #f3e8ff;
|
|
726
|
-
--border-default-medium: #dab2ff;
|
|
727
|
-
--border-default-strong: #c27aff;
|
|
728
|
-
--border-light: #f3e8ff;
|
|
729
|
-
--border-light-subtle: #faf5ff;
|
|
730
|
-
--border-muted: #faf5ff;
|
|
731
|
-
--text-disabled: #c27aff;
|
|
732
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
733
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
734
|
-
--text-success: var(--color-emerald-600);
|
|
735
|
-
--text-success-strong: var(--color-emerald-800);
|
|
736
|
-
--text-danger: var(--color-rose-600);
|
|
737
|
-
--text-danger-strong: var(--color-rose-800);
|
|
738
|
-
--text-warning: var(--color-orange-600);
|
|
739
|
-
--text-warning-strong: var(--color-orange-950);
|
|
740
|
-
--text-warning-subtle: var(--color-orange-600);
|
|
741
|
-
--text-info: var(--color-purple-700);
|
|
742
|
-
--text-info-strong: var(--color-purple-800);
|
|
743
|
-
--bg-success: var(--color-emerald-500);
|
|
744
|
-
--bg-success-soft: var(--color-emerald-100);
|
|
745
|
-
--bg-success-medium: var(--color-emerald-100);
|
|
746
|
-
--bg-success-strong: var(--color-emerald-700);
|
|
747
|
-
--bg-danger: var(--color-rose-500);
|
|
748
|
-
--bg-danger-soft: var(--color-rose-100);
|
|
749
|
-
--bg-danger-medium: var(--color-rose-100);
|
|
750
|
-
--bg-danger-strong: var(--color-rose-700);
|
|
751
|
-
--bg-warning: var(--color-orange-400);
|
|
752
|
-
--bg-warning-soft: var(--color-orange-100);
|
|
753
|
-
--bg-warning-medium: var(--color-orange-100);
|
|
754
|
-
--bg-warning-strong: var(--color-orange-700);
|
|
755
|
-
--bg-warning-strongest: var(--color-orange-800);
|
|
756
|
-
--border-success: var(--color-emerald-300);
|
|
757
|
-
--border-success-subtle: var(--color-emerald-200);
|
|
758
|
-
--border-danger: var(--color-rose-600);
|
|
759
|
-
--border-danger-subtle: var(--color-rose-200);
|
|
760
|
-
--border-warning: var(--color-orange-500);
|
|
761
|
-
--border-warning-subtle: var(--color-orange-200);
|
|
762
|
-
--border-info: var(--color-purple-300);
|
|
397
|
+
Giữ lại đúng CƠ CHẾ `data-theme` cho theme này. Hai khối dưới đây cố ý để
|
|
398
|
+
TRỐNG: đổi sang `tieu-hoc` lúc này thì giao diện y hệt Ôn Luyện, không vỡ
|
|
399
|
+
gì — an toàn để ghép dần.
|
|
763
400
|
|
|
764
|
-
|
|
765
|
-
--text-body-subtle: #a855f7;
|
|
766
|
-
}
|
|
401
|
+
## Cách đổ giá trị
|
|
767
402
|
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
--radius-xs: 8px;
|
|
772
|
-
--radius-sm: 12px;
|
|
773
|
-
--radius: 14px;
|
|
774
|
-
--radius-base: 18px;
|
|
775
|
-
--radius-md: 18px;
|
|
776
|
-
--radius-lg: 24px;
|
|
777
|
-
--radius-xl: 28px;
|
|
778
|
-
--radius-2xl: 32px;
|
|
779
|
-
--radius-3xl: 40px;
|
|
780
|
-
|
|
781
|
-
--bg-brand: #c084fc;
|
|
782
|
-
--bg-brand-strong: #d8b4fe;
|
|
783
|
-
--bg-brand-soft: #3b0764;
|
|
784
|
-
--bg-brand-softer: #2e1065;
|
|
785
|
-
--text-brand: #d8b4fe;
|
|
786
|
-
--border-brand: #9333ea;
|
|
787
|
-
|
|
788
|
-
--bg-primary: #1e0b36;
|
|
789
|
-
--bg-primary-soft: #160728;
|
|
790
|
-
--bg-secondary: #2e1065;
|
|
791
|
-
--bg-secondary-medium: #3b0764;
|
|
792
|
-
--border-default: #581c87;
|
|
793
|
-
--text-heading: #faf5ff;
|
|
794
|
-
--text-body: #d8b4fe;
|
|
795
|
-
|
|
796
|
-
/* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
|
|
797
|
-
--bg-primary-medium: #2e1065;
|
|
798
|
-
--bg-primary-strong: #3b0764;
|
|
799
|
-
--bg-secondary-soft: #1e0b36;
|
|
800
|
-
--bg-secondary-strong: #581c87;
|
|
801
|
-
--bg-tertiary: #3b0764;
|
|
802
|
-
--bg-tertiary-soft: #2e1065;
|
|
803
|
-
--bg-tertiary-medium: #581c87;
|
|
804
|
-
--bg-quaternary: #581c87;
|
|
805
|
-
--bg-quaternary-medium: #6b21a8;
|
|
806
|
-
--bg-disabled: #3b0764;
|
|
807
|
-
--border-default-subtle: #3b0764;
|
|
808
|
-
--border-default-medium: #6b21a8;
|
|
809
|
-
--border-default-strong: #9333ea;
|
|
810
|
-
--border-light: #581c87;
|
|
811
|
-
--border-light-subtle: #3b0764;
|
|
812
|
-
--border-muted: #2e1065;
|
|
813
|
-
--text-disabled: #9333ea;
|
|
814
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
815
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
816
|
-
--text-success: var(--color-emerald-400);
|
|
817
|
-
--text-success-strong: var(--color-emerald-300);
|
|
818
|
-
--text-danger: var(--color-rose-400);
|
|
819
|
-
--text-danger-strong: var(--color-rose-300);
|
|
820
|
-
--text-warning: var(--color-orange-300);
|
|
821
|
-
--text-warning-strong: var(--color-orange-200);
|
|
822
|
-
--text-warning-subtle: var(--color-orange-500);
|
|
823
|
-
--text-info: var(--color-purple-400);
|
|
824
|
-
--text-info-strong: var(--color-purple-300);
|
|
825
|
-
--bg-success: var(--color-emerald-600);
|
|
826
|
-
--bg-success-soft: var(--color-emerald-950);
|
|
827
|
-
--bg-success-medium: var(--color-emerald-900);
|
|
828
|
-
--bg-success-strong: var(--color-emerald-600);
|
|
829
|
-
--bg-danger: var(--color-rose-600);
|
|
830
|
-
--bg-danger-soft: var(--color-rose-950);
|
|
831
|
-
--bg-danger-medium: var(--color-rose-900);
|
|
832
|
-
--bg-danger-strong: var(--color-rose-600);
|
|
833
|
-
--bg-warning: var(--color-orange-500);
|
|
834
|
-
--bg-warning-soft: var(--color-orange-950);
|
|
835
|
-
--bg-warning-medium: var(--color-orange-900);
|
|
836
|
-
--bg-warning-strong: var(--color-orange-700);
|
|
837
|
-
--bg-warning-strongest: var(--color-orange-800);
|
|
838
|
-
--border-success: var(--color-emerald-600);
|
|
839
|
-
--border-success-subtle: var(--color-emerald-900);
|
|
840
|
-
--border-danger: var(--color-rose-600);
|
|
841
|
-
--border-danger-subtle: var(--color-rose-900);
|
|
842
|
-
--border-warning: var(--color-orange-500);
|
|
843
|
-
--border-warning-subtle: var(--color-orange-900);
|
|
844
|
-
--border-info: var(--color-purple-600);
|
|
403
|
+
Chỉ override TOKEN NGỮ NGHĨA (`--bg-*`, `--text-*`, `--border-*`,
|
|
404
|
+
`--radius-*`). ĐỪNG override primitive (`--color-brand-700`) — primitive là
|
|
405
|
+
bảng màu gốc dùng chung, sửa nó là đổi cả Ôn Luyện.
|
|
845
406
|
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
407
|
+
Mỗi giá trị đặt ở CẢ HAI khối: thiếu khối `.dark` thì theme mới chỉ có chế
|
|
408
|
+
độ sáng, và người dùng bật chế độ tối sẽ rơi về màu Ôn Luyện — lệch nửa
|
|
409
|
+
vời, khó thấy hơn là hỏng hẳn.
|
|
849
410
|
|
|
850
|
-
|
|
851
|
-
|
|
411
|
+
Hướng thiết kế người dùng đã nêu: "dành cho trẻ con, cần đẹp mắt" — bo góc
|
|
412
|
+
tròn hơn, màu tươi hơn. Chưa có Figma, sẽ dựng bản nháp riêng để duyệt.
|
|
852
413
|
============================================================================= */
|
|
853
|
-
[data-theme='
|
|
854
|
-
|
|
855
|
-
--radius-xs: 4px;
|
|
856
|
-
--radius-sm: 6px;
|
|
857
|
-
--radius: 8px;
|
|
858
|
-
--radius-base: 10px;
|
|
859
|
-
--radius-md: 10px;
|
|
860
|
-
--radius-lg: 14px;
|
|
861
|
-
--radius-xl: 18px;
|
|
862
|
-
--radius-2xl: 22px;
|
|
863
|
-
--radius-3xl: 28px;
|
|
864
|
-
|
|
865
|
-
--bg-brand: #09090b;
|
|
866
|
-
--bg-brand-strong: #000000;
|
|
867
|
-
--bg-brand-soft: #e4e4e7;
|
|
868
|
-
--bg-brand-softer: #f4f4f5;
|
|
869
|
-
--text-brand: #09090b;
|
|
870
|
-
--border-brand: #09090b;
|
|
871
|
-
|
|
872
|
-
--bg-primary: #ffffff;
|
|
873
|
-
--bg-primary-soft: #fafafa;
|
|
874
|
-
--bg-secondary: #f4f4f5;
|
|
875
|
-
--bg-secondary-medium: #e4e4e7;
|
|
876
|
-
--border-default: #71717a;
|
|
877
|
-
--text-heading: #09090b;
|
|
878
|
-
--text-body: #27272a;
|
|
879
|
-
|
|
880
|
-
/* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
|
|
881
|
-
--bg-primary-medium: #f5f5f5;
|
|
882
|
-
--bg-primary-strong: #e5e5e5;
|
|
883
|
-
--bg-secondary-soft: #fafafa;
|
|
884
|
-
--bg-secondary-strong: #d4d4d4;
|
|
885
|
-
--bg-tertiary: #f5f5f5;
|
|
886
|
-
--bg-tertiary-soft: #fafafa;
|
|
887
|
-
--bg-tertiary-medium: #e5e5e5;
|
|
888
|
-
--bg-quaternary: #e5e5e5;
|
|
889
|
-
--bg-quaternary-medium: #d4d4d4;
|
|
890
|
-
--bg-disabled: #f5f5f5;
|
|
891
|
-
--border-default-subtle: #e5e5e5;
|
|
892
|
-
--border-default-medium: #a3a3a3;
|
|
893
|
-
--border-default-strong: #737373;
|
|
894
|
-
--border-light: #e5e5e5;
|
|
895
|
-
--border-light-subtle: #f5f5f5;
|
|
896
|
-
--border-muted: #fafafa;
|
|
897
|
-
--text-disabled: #a3a3a3;
|
|
898
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
899
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
900
|
-
--text-success: var(--color-gray-700);
|
|
901
|
-
--text-success-strong: var(--color-gray-900);
|
|
902
|
-
--text-danger: var(--color-gray-900);
|
|
903
|
-
--text-danger-strong: var(--color-gray-950);
|
|
904
|
-
--text-warning: var(--color-gray-700);
|
|
905
|
-
--text-warning-strong: var(--color-gray-900);
|
|
906
|
-
--text-warning-subtle: var(--color-gray-600);
|
|
907
|
-
--text-info: var(--color-gray-700);
|
|
908
|
-
--text-info-strong: var(--color-gray-900);
|
|
909
|
-
--bg-success: var(--color-gray-600);
|
|
910
|
-
--bg-success-soft: var(--color-gray-50);
|
|
911
|
-
--bg-success-medium: var(--color-gray-100);
|
|
912
|
-
--bg-success-strong: var(--color-gray-700);
|
|
913
|
-
--bg-danger: var(--color-gray-800);
|
|
914
|
-
--bg-danger-soft: var(--color-gray-100);
|
|
915
|
-
--bg-danger-medium: var(--color-gray-200);
|
|
916
|
-
--bg-danger-strong: var(--color-gray-900);
|
|
917
|
-
--bg-warning: var(--color-gray-500);
|
|
918
|
-
--bg-warning-soft: var(--color-gray-50);
|
|
919
|
-
--bg-warning-medium: var(--color-gray-100);
|
|
920
|
-
--bg-warning-strong: var(--color-gray-700);
|
|
921
|
-
--bg-warning-strongest: var(--color-gray-800);
|
|
922
|
-
--border-success: var(--color-gray-300);
|
|
923
|
-
--border-success-subtle: var(--color-gray-200);
|
|
924
|
-
--border-danger: var(--color-gray-500);
|
|
925
|
-
--border-danger-subtle: var(--color-gray-300);
|
|
926
|
-
--border-warning: var(--color-gray-300);
|
|
927
|
-
--border-warning-subtle: var(--color-gray-200);
|
|
928
|
-
--border-info: var(--color-gray-300);
|
|
929
|
-
|
|
930
|
-
/* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
|
|
931
|
-
--text-body-subtle: #52525b;
|
|
414
|
+
[data-theme='tieu-hoc'] {
|
|
415
|
+
/* trống — xem chú thích trên */
|
|
932
416
|
}
|
|
933
417
|
|
|
934
|
-
.dark[data-theme='
|
|
935
|
-
[data-theme='
|
|
936
|
-
|
|
937
|
-
--radius-xs: 4px;
|
|
938
|
-
--radius-sm: 6px;
|
|
939
|
-
--radius: 8px;
|
|
940
|
-
--radius-base: 10px;
|
|
941
|
-
--radius-md: 10px;
|
|
942
|
-
--radius-lg: 14px;
|
|
943
|
-
--radius-xl: 18px;
|
|
944
|
-
--radius-2xl: 22px;
|
|
945
|
-
--radius-3xl: 28px;
|
|
946
|
-
|
|
947
|
-
--bg-brand: #fafafa;
|
|
948
|
-
--bg-brand-strong: #ffffff;
|
|
949
|
-
--bg-brand-soft: #27272a;
|
|
950
|
-
--bg-brand-softer: #18181b;
|
|
951
|
-
--text-brand: #fafafa;
|
|
952
|
-
--border-brand: #fafafa;
|
|
953
|
-
|
|
954
|
-
--bg-primary: #000000;
|
|
955
|
-
--bg-primary-soft: #09090b;
|
|
956
|
-
--bg-secondary: #18181b;
|
|
957
|
-
--bg-secondary-medium: #27272a;
|
|
958
|
-
--border-default: #52525b;
|
|
959
|
-
--text-heading: #ffffff;
|
|
960
|
-
--text-body: #d4d4d8;
|
|
961
|
-
|
|
962
|
-
/* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
|
|
963
|
-
--bg-primary-medium: #171717;
|
|
964
|
-
--bg-primary-strong: #262626;
|
|
965
|
-
--bg-secondary-soft: #0a0a0a;
|
|
966
|
-
--bg-secondary-strong: #404040;
|
|
967
|
-
--bg-tertiary: #262626;
|
|
968
|
-
--bg-tertiary-soft: #171717;
|
|
969
|
-
--bg-tertiary-medium: #404040;
|
|
970
|
-
--bg-quaternary: #404040;
|
|
971
|
-
--bg-quaternary-medium: #525252;
|
|
972
|
-
--bg-disabled: #262626;
|
|
973
|
-
--border-default-subtle: #262626;
|
|
974
|
-
--border-default-medium: #525252;
|
|
975
|
-
--border-default-strong: #737373;
|
|
976
|
-
--border-light: #404040;
|
|
977
|
-
--border-light-subtle: #262626;
|
|
978
|
-
--border-muted: #171717;
|
|
979
|
-
--text-disabled: #737373;
|
|
980
|
-
/* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
|
|
981
|
-
badge, toast vẫn ra đúng màu của theme Modern. */
|
|
982
|
-
--text-success: var(--color-gray-300);
|
|
983
|
-
--text-success-strong: var(--color-gray-200);
|
|
984
|
-
--text-danger: var(--color-gray-100);
|
|
985
|
-
--text-danger-strong: var(--color-gray-50);
|
|
986
|
-
--text-warning: var(--color-gray-300);
|
|
987
|
-
--text-warning-strong: var(--color-gray-200);
|
|
988
|
-
--text-warning-subtle: var(--color-gray-400);
|
|
989
|
-
--text-info: var(--color-gray-300);
|
|
990
|
-
--text-info-strong: var(--color-gray-200);
|
|
991
|
-
--bg-success: var(--color-gray-600);
|
|
992
|
-
--bg-success-soft: var(--color-gray-950);
|
|
993
|
-
--bg-success-medium: var(--color-gray-900);
|
|
994
|
-
--bg-success-strong: var(--color-gray-500);
|
|
995
|
-
--bg-danger: var(--color-gray-300);
|
|
996
|
-
--bg-danger-soft: var(--color-gray-800);
|
|
997
|
-
--bg-danger-medium: var(--color-gray-700);
|
|
998
|
-
--bg-danger-strong: var(--color-gray-200);
|
|
999
|
-
--bg-warning: var(--color-gray-600);
|
|
1000
|
-
--bg-warning-soft: var(--color-gray-950);
|
|
1001
|
-
--bg-warning-medium: var(--color-gray-900);
|
|
1002
|
-
--bg-warning-strong: var(--color-gray-500);
|
|
1003
|
-
--bg-warning-strongest: var(--color-gray-400);
|
|
1004
|
-
--border-success: var(--color-gray-600);
|
|
1005
|
-
--border-success-subtle: var(--color-gray-800);
|
|
1006
|
-
--border-danger: var(--color-gray-400);
|
|
1007
|
-
--border-danger-subtle: var(--color-gray-600);
|
|
1008
|
-
--border-warning: var(--color-gray-600);
|
|
1009
|
-
--border-warning-subtle: var(--color-gray-800);
|
|
1010
|
-
--border-info: var(--color-gray-600);
|
|
1011
|
-
|
|
1012
|
-
/* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
|
|
1013
|
-
--text-body-subtle: #a1a1aa;
|
|
418
|
+
.dark[data-theme='tieu-hoc'],
|
|
419
|
+
[data-theme='tieu-hoc'].dark {
|
|
420
|
+
/* trống — xem chú thích trên */
|
|
1014
421
|
}
|