@edmicro/olkit 1.0.20 → 1.1.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 (11) hide show
  1. package/fesm2022/edmicro-olkit.mjs +3686 -1252
  2. package/fesm2022/edmicro-olkit.mjs.map +1 -1
  3. package/olkit.css +1 -1
  4. package/package.json +1 -1
  5. package/styles/isolation.css +22 -16
  6. package/styles/primitives.css +1 -43
  7. package/styles/theme.css +16 -16
  8. package/styles/tokens.css +128 -128
  9. package/types/edmicro-olkit.d.ts +1261 -164
  10. package/types/edmicro-olkit.d.ts.map +1 -1
  11. package/version.txt +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edmicro/olkit",
3
- "version": "1.0.20",
3
+ "version": "1.1.0",
4
4
  "description": "Ôn Luyện Design System UI Component Library for Angular",
5
5
  "author": "EDMICRO",
6
6
  "license": "MIT",
package/styles/isolation.css CHANGED
@@ -24,27 +24,24 @@ ol-button > button {
24
24
  border-style: solid;
25
25
  }
26
26
 
27
- /* Specific button size paddings (bảo vệ khỏi * { padding: 0 }) */
28
- ol-button > button.px-3\.5 {
29
- padding-left: var(--spacing-3_5, 0.875rem) !important;
30
- padding-right: var(--spacing-3_5, 0.875rem) !important;
27
+ /* Padding ngang nút có chữ (bảo vệ khỏi `* { padding: 0 }`).
28
+ Figma 2026-09-15: xs=12 sm=12 base=16 l=20 xl=24 — KHÔNG cộng bù viền. */
29
+ ol-button > button.px-3 {
30
+ padding-left: var(--spacing-3, 0.75rem) !important;
31
+ padding-right: var(--spacing-3, 0.75rem) !important;
31
32
  }
32
33
  ol-button > button.px-4 {
33
34
  padding-left: var(--spacing-4, 1rem) !important;
34
35
  padding-right: var(--spacing-4, 1rem) !important;
35
36
  }
36
- ol-button > button.px-4\.5 {
37
- padding-left: var(--spacing-4_5, 1.125rem) !important;
38
- padding-right: var(--spacing-4_5, 1.125rem) !important;
37
+ ol-button > button.px-5 {
38
+ padding-left: var(--spacing-5, 1.25rem) !important;
39
+ padding-right: var(--spacing-5, 1.25rem) !important;
39
40
  }
40
41
  ol-button > button.px-6 {
41
42
  padding-left: var(--spacing-6, 1.5rem) !important;
42
43
  padding-right: var(--spacing-6, 1.5rem) !important;
43
44
  }
44
- ol-button > button.px-6\.5 {
45
- padding-left: 1.625rem !important;
46
- padding-right: 1.625rem !important;
47
- }
48
45
 
49
46
  ol-button > button.py-1\.5 {
50
47
  padding-top: var(--spacing-1_5, 0.375rem) !important;
@@ -67,10 +64,19 @@ ol-button > button.py-3\.5 {
67
64
  padding-bottom: var(--spacing-3_5, 0.875rem) !important;
68
65
  }
69
66
 
70
- /* Button Heights — khớp Figma: xs=32 sm=36 md=40 lg=48 xl=52 */
67
+ /* Chiều cao nút. HAI BẢNG (Figma 2026-09-15):
68
+ có chữ 28 · 36 · 40 · 48 · 52
69
+ icon-only 32 · 36 · 40 · 44 · 48 (vuông)
70
+ Nên `h-8` (32px) và `h-11` (44px) chỉ icon-only dùng. */
71
+ ol-button > button.h-7 {
72
+ height: 1.75rem !important;
73
+ }
71
74
  ol-button > button.h-8 {
72
75
  height: 2rem !important;
73
76
  }
77
+ ol-button > button.h-11 {
78
+ height: 2.75rem !important;
79
+ }
74
80
  ol-button > button.h-9 {
75
81
  height: 2.25rem !important;
76
82
  }
@@ -84,7 +90,7 @@ ol-button > button.h-13 {
84
90
  height: 3.25rem !important;
85
91
  }
86
92
 
87
- /* Icon-only (vuông) */
93
+ /* Icon-only (vuông) — Figma 32 · 36 · 40 · 44 · 48 */
88
94
  ol-button > button.w-8 {
89
95
  width: 2rem !important;
90
96
  }
@@ -94,12 +100,12 @@ ol-button > button.w-9 {
94
100
  ol-button > button.w-10 {
95
101
  width: 2.5rem !important;
96
102
  }
103
+ ol-button > button.w-11 {
104
+ width: 2.75rem !important;
105
+ }
97
106
  ol-button > button.w-12 {
98
107
  width: 3rem !important;
99
108
  }
100
- ol-button > button.w-13 {
101
- width: 3.25rem !important;
102
- }
103
109
 
104
110
  /* Button Gap & Radii
105
111
  rounded-md là bo góc mặc định của MỌI button không phải pill — trước đây
package/styles/primitives.css CHANGED
@@ -79,19 +79,6 @@
79
79
  --color-stone-900: #1c1917;
80
80
  --color-stone-950: #0c0a09;
81
81
 
82
- /* Red */
83
- --color-red-50: #fef0f2;
84
- --color-red-100: #ffe4e6;
85
- --color-red-200: #ffccd3;
86
- --color-red-300: #ffa1ad;
87
- --color-red-400: #ff637e;
88
- --color-red-500: #ff2056;
89
- --color-red-600: #ec003f;
90
- --color-red-700: #c70036;
91
- --color-red-800: #a50036;
92
- --color-red-900: #8b0836;
93
- --color-red-950: #4d0218;
94
-
95
82
  /* Orange */
96
83
  --color-orange-50: #fff8f1;
97
84
  --color-orange-100: #feecdc;
@@ -105,22 +92,6 @@
105
92
  --color-orange-900: #771d1d;
106
93
  --color-orange-950: #441306;
107
94
 
108
- /* Amber — lấy đúng thang colors/yellow của Figma.
109
- Figma không có thang "amber" riêng; trước đây code giữ nguyên màu vàng
110
- mặc định của Tailwind nên lệch 10/11 bậc so với thiết kế. Giữ tên class
111
- để 89 lượt dùng trong thư viện không phải sửa. */
112
- --color-amber-50: #fffbeb;
113
- --color-amber-100: #fff3c4;
114
- --color-amber-200: #ffe79a;
115
- --color-amber-300: #ffd666;
116
- --color-amber-400: #ffc022;
117
- --color-amber-500: #ffb000;
118
- --color-amber-600: #ffa000;
119
- --color-amber-700: #b87a00;
120
- --color-amber-800: #8f5f00;
121
- --color-amber-900: #6b4700;
122
- --color-amber-950: #3d2900;
123
-
124
95
  /* Yellow — Figma colors/yellow. Trước đây lệch cả 11/11 bậc.
125
96
  Vàng là MÀU PHỤ (Figma dùng cho text-fg-yellow), không phải màu cảnh báo
126
97
  — warning dùng thang orange. Bậc 400 #FFC022 quá sáng: chỉ đạt 1.64:1
@@ -150,19 +121,6 @@
150
121
  --color-lime-900: #35530e;
151
122
  --color-lime-950: #192e03;
152
123
 
153
- /* Green */
154
- --color-green-50: #ecfdf5;
155
- --color-green-100: #d0fae5;
156
- --color-green-200: #a4f4cf;
157
- --color-green-300: #5ee9b5;
158
- --color-green-400: #00d492;
159
- --color-green-500: #00bc7d;
160
- --color-green-600: #009966;
161
- --color-green-700: #007a55;
162
- --color-green-800: #006045;
163
- --color-green-900: #004f3b;
164
- --color-green-950: #002c22;
165
-
166
124
  /* Emerald */
167
125
  --color-emerald-50: #ecfdf5;
168
126
  --color-emerald-100: #d0fae5;
@@ -281,7 +239,7 @@
281
239
  --color-pink-950: #3d0e26;
282
240
 
283
241
  /* Rose */
284
- --color-rose-50: #fff1f2;
242
+ --color-rose-50: #fef0f2;
285
243
  --color-rose-100: #ffe4e6;
286
244
  --color-rose-200: #ffccd3;
287
245
  --color-rose-300: #ffa1ad;
package/styles/theme.css CHANGED
@@ -161,13 +161,13 @@
161
161
  --color-neutral-secondary: var(--bg-secondary, #f9fafb);
162
162
  --color-neutral-secondary-soft: var(--bg-secondary-soft, #f9fafb);
163
163
  --color-neutral-secondary-medium: var(--bg-secondary-medium, #f9fafb);
164
- --color-neutral-secondary-strong: var(--bg-secondary-strong, #e5e7eb);
164
+ --color-neutral-secondary-strong: var(--bg-secondary-strong, #f9fafb);
165
165
 
166
166
  /* Tertiary — theo Figma colors/background/bg-neutral-tertiary (gray/100).
167
167
  Trước đây thiếu khiến active state của ol-button không render. */
168
168
  --color-neutral-tertiary: var(--bg-tertiary, #f3f4f6);
169
- --color-neutral-tertiary-medium: var(--bg-tertiary-medium, #e5e7eb);
170
- --color-neutral-tertiary-soft: var(--bg-tertiary-soft, #f9fafb);
169
+ --color-neutral-tertiary-medium: var(--bg-tertiary-medium, #f3f4f6);
170
+ --color-neutral-tertiary-soft: var(--bg-tertiary-soft, #f3f4f6);
171
171
  --color-neutral-quaternary: var(--bg-quaternary, #e5e7eb);
172
172
 
173
173
  --color-brand: var(--bg-brand, #2b4182);
@@ -224,16 +224,16 @@
224
224
  Nền lấy các biến thể -soft/-medium/-strong/-surface, map về --bg-*.
225
225
  Đầy đủ hai kênh nên không còn phải chọn giữa chữ và nền. */
226
226
  --color-warning: var(--border-warning, #ffc022);
227
- --color-fg-warning-subtle: var(--text-warning-subtle, #d03801);
228
- --color-warning-surface: var(--bg-warning, #ff5a1f);
229
- --color-warning-soft: var(--bg-warning-soft, #fff8f1);
230
- --color-warning-medium: var(--bg-warning-medium, #feecdc);
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
231
  --color-warning-strong: var(--bg-warning-strong, #ffb000);
232
- --color-warning-strongest: var(--bg-warning-strongest, #8a2c0d);
232
+ --color-warning-strongest: var(--bg-warning-strongest, #ffa000);
233
233
 
234
234
  --color-success: var(--border-success, #007a55);
235
235
  --color-success-strong: var(--bg-success-strong, #006045);
236
- --color-success-surface: var(--bg-success, #009966);
236
+ --color-success-surface: var(--bg-success, #007a55);
237
237
  --color-success-soft: var(--bg-success-soft, #ecfdf5);
238
238
  --color-success-medium: var(--bg-success-medium, #d0fae5);
239
239
 
@@ -248,7 +248,7 @@
248
248
  /* Typography & Text Tokens */
249
249
  --color-heading: var(--text-heading, #101828);
250
250
  --color-body: var(--text-body, #4a5565);
251
- --color-body-subtle: var(--text-body-subtle, #6a7282);
251
+ --color-body-subtle: var(--text-body-subtle, #6b7280);
252
252
  --color-fg-danger: var(--text-danger, #ec003f);
253
253
  --color-fg-danger-strong: var(--text-danger-strong, #8b0836);
254
254
  --color-fg-success: var(--text-success, #007a55);
@@ -267,14 +267,14 @@
267
267
 
268
268
  /* Border Tokens */
269
269
  --color-default: var(--border-default, #e5e7eb);
270
- --color-default-subtle: var(--border-default-subtle, #f3f4f6);
270
+ --color-default-subtle: var(--border-default-subtle, #e5e7eb);
271
271
  --color-default-medium: var(--border-default-medium, #e5e7eb);
272
- --color-default-strong: var(--border-default-strong, #99a1af);
272
+ --color-default-strong: var(--border-default-strong, #e5e7eb);
273
273
  --color-border: var(--border-default, #e5e7eb);
274
- --color-border-subtle: var(--border-default-subtle, #f3f4f6);
274
+ --color-border-subtle: var(--border-default-subtle, #e5e7eb);
275
275
  --color-border-light: var(--border-light, #f3f4f6);
276
- --color-border-medium: var(--border-default-medium, #d1d5dc);
277
- --color-border-strong: var(--border-default-strong, #99a1af);
276
+ --color-border-medium: var(--border-default-medium, #e5e7eb);
277
+ --color-border-strong: var(--border-default-strong, #e5e7eb);
278
278
  --color-border-brand: var(--border-brand, #2b4182);
279
279
  --color-focus: var(--border-focus, #2b4182);
280
280
  --color-focus-ring: var(--bg-focus-ring, #d2dcfa);
@@ -282,7 +282,7 @@
282
282
  --color-brand-light: var(--border-brand-light, #6d7fb3);
283
283
  --color-success-subtle: var(--border-success-subtle, #a4f4cf);
284
284
  --color-danger-subtle: var(--border-danger-subtle, #ffccd3);
285
- --color-warning-subtle: var(--border-warning-subtle, #fcd9bd);
285
+ --color-warning-subtle: var(--border-warning-subtle, #ffe79a);
286
286
 
287
287
  /* ---- 20 token Figma bổ sung (2026-09-11) ---- */
288
288
  --color-white-surface: var(--bg-white, #ffffff);
package/styles/tokens.css CHANGED
@@ -58,10 +58,10 @@
58
58
  --text-brand-soft: var(--color-brand-100);
59
59
 
60
60
  /* Status Text */
61
- --text-success: var(--color-green-700);
62
- --text-success-strong: var(--color-green-900);
63
- --text-danger: var(--color-red-600);
64
- --text-danger-strong: var(--color-red-900);
61
+ --text-success: var(--color-emerald-700);
62
+ --text-success-strong: var(--color-emerald-900);
63
+ --text-danger: var(--color-rose-600);
64
+ --text-danger-strong: var(--color-rose-900);
65
65
  /* Cảnh báo — theo Figma colors/text/text-fg-warning*. Trước đây warning
66
66
  lấy orange-600 (trùng bậc với -subtle) và -strong lấy orange-700 (trùng
67
67
  luôn với nền bg-warning-strong), nên chữ chìm vào nền. */
@@ -108,12 +108,12 @@
108
108
  --bg-warning: var(--color-yellow-400);
109
109
  --bg-warning-medium: var(--color-yellow-100);
110
110
  --bg-warning-strong: var(--color-yellow-500);
111
- --bg-success: var(--color-green-700);
112
- --bg-success-soft: var(--color-green-50);
113
- --bg-success-strong: var(--color-green-800);
114
- --bg-danger: var(--color-red-600);
115
- --bg-danger-soft: var(--color-red-50);
116
- --bg-danger-strong: var(--color-red-800);
111
+ --bg-success: var(--color-emerald-700);
112
+ --bg-success-soft: var(--color-emerald-50);
113
+ --bg-success-strong: var(--color-emerald-800);
114
+ --bg-danger: var(--color-rose-600);
115
+ --bg-danger-soft: var(--color-rose-50);
116
+ --bg-danger-strong: var(--color-rose-800);
117
117
 
118
118
  /* Semantic Palette Backgrounds
119
119
  Tám màu phụ này là NỀN ĐẶC, nên ở chế độ tối đi đậm hơn một bậc — cùng
@@ -153,11 +153,11 @@
153
153
  /* Viền nhạt cho focus ring theo Figma colors/border/border-*-subtle.
154
154
  Trước đây thiếu hẳn nên button phải mượn bậc primitive (emerald-300…)
155
155
  và ra sai màu so với thiết kế. */
156
- --border-success-subtle: var(--color-green-200);
157
- --border-danger-subtle: var(--color-red-200);
156
+ --border-success-subtle: var(--color-emerald-200);
157
+ --border-danger-subtle: var(--color-rose-200);
158
158
  --border-warning-subtle: var(--color-yellow-200);
159
- --border-success: var(--color-green-700);
160
- --border-danger: var(--color-red-600);
159
+ --border-success: var(--color-emerald-700);
160
+ --border-danger: var(--color-rose-600);
161
161
  --border-warning: var(--color-yellow-400);
162
162
  --border-info: var(--color-brand-300);
163
163
 
@@ -165,8 +165,8 @@
165
165
  Figma đặt tên bg-neutral-* và text-fg-*, code bỏ tiền tố cho gọn. */
166
166
  --bg-white: var(--color-white);
167
167
  --bg-gray: var(--color-gray-300);
168
- --bg-danger-medium: var(--color-red-100);
169
- --bg-success-medium: var(--color-green-100);
168
+ --bg-danger-medium: var(--color-rose-100);
169
+ --bg-success-medium: var(--color-emerald-100);
170
170
  --bg-warning-soft: var(--color-yellow-50);
171
171
  --bg-warning-strongest: var(--color-yellow-600);
172
172
 
@@ -237,10 +237,10 @@
237
237
  --text-brand-medium: var(--color-brand-300);
238
238
  --text-brand-soft: var(--color-brand-900);
239
239
 
240
- --text-success: var(--color-green-600);
241
- --text-success-strong: var(--color-green-300);
242
- --text-danger: var(--color-red-500);
243
- --text-danger-strong: var(--color-red-300);
240
+ --text-success: var(--color-emerald-600);
241
+ --text-success-strong: var(--color-emerald-300);
242
+ --text-danger: var(--color-rose-500);
243
+ --text-danger-strong: var(--color-rose-300);
244
244
  --text-warning: var(--color-yellow-300);
245
245
  --text-warning-strong: var(--color-yellow-200);
246
246
  --text-warning-subtle: var(--color-yellow-400);
@@ -281,12 +281,12 @@
281
281
  --bg-warning: var(--color-yellow-500);
282
282
  --bg-warning-medium: var(--color-yellow-900);
283
283
  --bg-warning-strong: var(--color-yellow-600);
284
- --bg-success: var(--color-green-600);
285
- --bg-success-strong: var(--color-green-700);
286
- --bg-success-soft: var(--color-green-950);
287
- --bg-danger: var(--color-red-700);
288
- --bg-danger-strong: var(--color-red-800);
289
- --bg-danger-soft: var(--color-red-950);
284
+ --bg-success: var(--color-emerald-600);
285
+ --bg-success-strong: var(--color-emerald-700);
286
+ --bg-success-soft: var(--color-emerald-950);
287
+ --bg-danger: var(--color-rose-700);
288
+ --bg-danger-strong: var(--color-rose-800);
289
+ --bg-danger-soft: var(--color-rose-950);
290
290
 
291
291
  /* Semantic Palette Backgrounds - Dark
292
292
  Lấy thẳng từ collection "Themes" của Figma, mode `Modern (dark)`. Figma
@@ -320,19 +320,19 @@
320
320
  --bg-focus-ring: var(--color-brand-800);
321
321
  --border-brand-subtle: var(--color-brand-800);
322
322
  --border-brand-light: var(--color-brand-500);
323
- --border-success-subtle: var(--color-green-900);
324
- --border-danger-subtle: var(--color-red-900);
323
+ --border-success-subtle: var(--color-emerald-900);
324
+ --border-danger-subtle: var(--color-rose-900);
325
325
  --border-warning-subtle: var(--color-yellow-900);
326
- --border-success: var(--color-green-600);
327
- --border-danger: var(--color-red-600);
326
+ --border-success: var(--color-emerald-600);
327
+ --border-danger: var(--color-rose-600);
328
328
  --border-warning: var(--color-yellow-500);
329
329
  --border-info: var(--color-brand-600);
330
330
 
331
331
  /* 20 token bổ sung — giá trị mode Modern (dark) của Figma */
332
332
  --bg-white: var(--color-white);
333
333
  --bg-gray: var(--color-gray-600);
334
- --bg-danger-medium: var(--color-red-900);
335
- --bg-success-medium: var(--color-green-900);
334
+ --bg-danger-medium: var(--color-rose-900);
335
+ --bg-success-medium: var(--color-emerald-900);
336
336
  --bg-warning-soft: var(--color-yellow-950);
337
337
  --bg-warning-strongest: var(--color-yellow-700);
338
338
 
@@ -401,32 +401,32 @@
401
401
  --text-disabled: #94a3b8;
402
402
  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
403
403
  badge, toast vẫn ra đúng màu của theme Modern. */
404
- --text-success: var(--color-green-700);
405
- --text-success-strong: var(--color-green-800);
406
- --text-danger: var(--color-red-600);
407
- --text-danger-strong: var(--color-red-800);
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
408
  --text-warning: var(--color-orange-600);
409
409
  --text-warning-strong: var(--color-orange-950);
410
410
  --text-warning-subtle: var(--color-orange-600);
411
411
  --text-info: var(--color-brand-700);
412
412
  --text-info-strong: var(--color-brand-800);
413
- --bg-success: var(--color-green-600);
414
- --bg-success-soft: var(--color-green-50);
415
- --bg-success-medium: var(--color-green-100);
416
- --bg-success-strong: var(--color-green-700);
417
- --bg-danger: var(--color-red-600);
418
- --bg-danger-soft: var(--color-red-50);
419
- --bg-danger-medium: var(--color-red-100);
420
- --bg-danger-strong: var(--color-red-700);
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
421
  --bg-warning: var(--color-orange-500);
422
422
  --bg-warning-soft: var(--color-orange-50);
423
423
  --bg-warning-medium: var(--color-orange-100);
424
424
  --bg-warning-strong: var(--color-orange-700);
425
425
  --bg-warning-strongest: var(--color-orange-800);
426
- --border-success: var(--color-green-300);
427
- --border-success-subtle: var(--color-green-200);
428
- --border-danger: var(--color-red-600);
429
- --border-danger-subtle: var(--color-red-200);
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
430
  --border-warning: var(--color-orange-500);
431
431
  --border-warning-subtle: var(--color-orange-200);
432
432
  --border-info: var(--color-brand-300);
@@ -482,32 +482,32 @@
482
482
  --text-disabled: #64748b;
483
483
  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
484
484
  badge, toast vẫn ra đúng màu của theme Modern. */
485
- --text-success: var(--color-green-400);
486
- --text-success-strong: var(--color-green-300);
487
- --text-danger: var(--color-red-400);
488
- --text-danger-strong: var(--color-red-300);
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
489
  --text-warning: var(--color-orange-300);
490
490
  --text-warning-strong: var(--color-orange-200);
491
491
  --text-warning-subtle: var(--color-orange-500);
492
492
  --text-info: var(--color-brand-400);
493
493
  --text-info-strong: var(--color-brand-300);
494
- --bg-success: var(--color-green-700);
495
- --bg-success-soft: var(--color-green-950);
496
- --bg-success-medium: var(--color-green-900);
497
- --bg-success-strong: var(--color-green-600);
498
- --bg-danger: var(--color-red-700);
499
- --bg-danger-soft: var(--color-red-950);
500
- --bg-danger-medium: var(--color-red-900);
501
- --bg-danger-strong: var(--color-red-600);
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
502
  --bg-warning: var(--color-orange-600);
503
503
  --bg-warning-soft: var(--color-orange-950);
504
504
  --bg-warning-medium: var(--color-orange-900);
505
505
  --bg-warning-strong: var(--color-orange-700);
506
506
  --bg-warning-strongest: var(--color-orange-800);
507
- --border-success: var(--color-green-600);
508
- --border-success-subtle: var(--color-green-900);
509
- --border-danger: var(--color-red-600);
510
- --border-danger-subtle: var(--color-red-900);
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
511
  --border-warning: var(--color-orange-500);
512
512
  --border-warning-subtle: var(--color-orange-900);
513
513
  --border-info: var(--color-brand-600);
@@ -565,32 +565,32 @@
565
565
  --text-disabled: #94a3b8;
566
566
  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
567
567
  badge, toast vẫn ra đúng màu của theme Modern. */
568
- --text-success: var(--color-green-700);
569
- --text-success-strong: var(--color-green-800);
570
- --text-danger: var(--color-red-600);
571
- --text-danger-strong: var(--color-red-800);
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
572
  --text-warning: var(--color-orange-600);
573
573
  --text-warning-strong: var(--color-orange-950);
574
574
  --text-warning-subtle: var(--color-orange-600);
575
575
  --text-info: var(--color-brand-700);
576
576
  --text-info-strong: var(--color-brand-800);
577
- --bg-success: var(--color-green-700);
578
- --bg-success-soft: var(--color-green-50);
579
- --bg-success-medium: var(--color-green-100);
580
- --bg-success-strong: var(--color-green-700);
581
- --bg-danger: var(--color-red-600);
582
- --bg-danger-soft: var(--color-red-50);
583
- --bg-danger-medium: var(--color-red-100);
584
- --bg-danger-strong: var(--color-red-700);
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
585
  --bg-warning: var(--color-orange-700);
586
586
  --bg-warning-soft: var(--color-orange-50);
587
587
  --bg-warning-medium: var(--color-orange-100);
588
588
  --bg-warning-strong: var(--color-orange-700);
589
589
  --bg-warning-strongest: var(--color-orange-800);
590
- --border-success: var(--color-green-300);
591
- --border-success-subtle: var(--color-green-200);
592
- --border-danger: var(--color-red-600);
593
- --border-danger-subtle: var(--color-red-200);
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
594
  --border-warning: var(--color-orange-500);
595
595
  --border-warning-subtle: var(--color-orange-200);
596
596
  --border-info: var(--color-brand-300);
@@ -646,32 +646,32 @@
646
646
  --text-disabled: #64748b;
647
647
  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
648
648
  badge, toast vẫn ra đúng màu của theme Modern. */
649
- --text-success: var(--color-green-400);
650
- --text-success-strong: var(--color-green-300);
651
- --text-danger: var(--color-red-400);
652
- --text-danger-strong: var(--color-red-300);
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
653
  --text-warning: var(--color-orange-300);
654
654
  --text-warning-strong: var(--color-orange-200);
655
655
  --text-warning-subtle: var(--color-orange-500);
656
656
  --text-info: var(--color-brand-400);
657
657
  --text-info-strong: var(--color-brand-300);
658
- --bg-success: var(--color-green-800);
659
- --bg-success-soft: var(--color-green-950);
660
- --bg-success-medium: var(--color-green-900);
661
- --bg-success-strong: var(--color-green-600);
662
- --bg-danger: var(--color-red-800);
663
- --bg-danger-soft: var(--color-red-950);
664
- --bg-danger-medium: var(--color-red-900);
665
- --bg-danger-strong: var(--color-red-600);
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
666
  --bg-warning: var(--color-orange-800);
667
667
  --bg-warning-soft: var(--color-orange-950);
668
668
  --bg-warning-medium: var(--color-orange-900);
669
669
  --bg-warning-strong: var(--color-orange-700);
670
670
  --bg-warning-strongest: var(--color-orange-800);
671
- --border-success: var(--color-green-600);
672
- --border-success-subtle: var(--color-green-900);
673
- --border-danger: var(--color-red-600);
674
- --border-danger-subtle: var(--color-red-900);
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
675
  --border-warning: var(--color-orange-500);
676
676
  --border-warning-subtle: var(--color-orange-900);
677
677
  --border-info: var(--color-brand-600);
@@ -731,32 +731,32 @@
731
731
  --text-disabled: #c27aff;
732
732
  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
733
733
  badge, toast vẫn ra đúng màu của theme Modern. */
734
- --text-success: var(--color-green-600);
735
- --text-success-strong: var(--color-green-800);
736
- --text-danger: var(--color-red-600);
737
- --text-danger-strong: var(--color-red-800);
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
738
  --text-warning: var(--color-orange-600);
739
739
  --text-warning-strong: var(--color-orange-950);
740
740
  --text-warning-subtle: var(--color-orange-600);
741
741
  --text-info: var(--color-purple-700);
742
742
  --text-info-strong: var(--color-purple-800);
743
- --bg-success: var(--color-green-500);
744
- --bg-success-soft: var(--color-green-100);
745
- --bg-success-medium: var(--color-green-100);
746
- --bg-success-strong: var(--color-green-700);
747
- --bg-danger: var(--color-red-500);
748
- --bg-danger-soft: var(--color-red-100);
749
- --bg-danger-medium: var(--color-red-100);
750
- --bg-danger-strong: var(--color-red-700);
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
751
  --bg-warning: var(--color-orange-400);
752
752
  --bg-warning-soft: var(--color-orange-100);
753
753
  --bg-warning-medium: var(--color-orange-100);
754
754
  --bg-warning-strong: var(--color-orange-700);
755
755
  --bg-warning-strongest: var(--color-orange-800);
756
- --border-success: var(--color-green-300);
757
- --border-success-subtle: var(--color-green-200);
758
- --border-danger: var(--color-red-600);
759
- --border-danger-subtle: var(--color-red-200);
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
760
  --border-warning: var(--color-orange-500);
761
761
  --border-warning-subtle: var(--color-orange-200);
762
762
  --border-info: var(--color-purple-300);
@@ -813,32 +813,32 @@
813
813
  --text-disabled: #9333ea;
814
814
  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
815
815
  badge, toast vẫn ra đúng màu của theme Modern. */
816
- --text-success: var(--color-green-400);
817
- --text-success-strong: var(--color-green-300);
818
- --text-danger: var(--color-red-400);
819
- --text-danger-strong: var(--color-red-300);
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
820
  --text-warning: var(--color-orange-300);
821
821
  --text-warning-strong: var(--color-orange-200);
822
822
  --text-warning-subtle: var(--color-orange-500);
823
823
  --text-info: var(--color-purple-400);
824
824
  --text-info-strong: var(--color-purple-300);
825
- --bg-success: var(--color-green-600);
826
- --bg-success-soft: var(--color-green-950);
827
- --bg-success-medium: var(--color-green-900);
828
- --bg-success-strong: var(--color-green-600);
829
- --bg-danger: var(--color-red-600);
830
- --bg-danger-soft: var(--color-red-950);
831
- --bg-danger-medium: var(--color-red-900);
832
- --bg-danger-strong: var(--color-red-600);
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
833
  --bg-warning: var(--color-orange-500);
834
834
  --bg-warning-soft: var(--color-orange-950);
835
835
  --bg-warning-medium: var(--color-orange-900);
836
836
  --bg-warning-strong: var(--color-orange-700);
837
837
  --bg-warning-strongest: var(--color-orange-800);
838
- --border-success: var(--color-green-600);
839
- --border-success-subtle: var(--color-green-900);
840
- --border-danger: var(--color-red-600);
841
- --border-danger-subtle: var(--color-red-900);
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
842
  --border-warning: var(--color-orange-500);
843
843
  --border-warning-subtle: var(--color-orange-900);
844
844
  --border-info: var(--color-purple-600);