@vestow/theme 0.1.0

package/css/primitives.css

@@ -0,0 +1,224 @@
+/* =============================================================================
+   TỰ SINH — đừng sửa tay. Chạy lại bằng:
+
+       pnpm -F @vestow/theme gen
+
+   Chép NGUYÊN VĂN từ `tailwindcss/theme.css` của version đang cài, hai phần
+   theo hai luật khác nhau:
+
+     MÀU      chỉ những nấc thật sự được dùng trong tokens.css / palettes.css
+              / surfaces.css.
+     PHI-MÀU  trọn thang. Token ngữ nghĩa không trỏ qua chúng nên lọc theo mức
+              dùng sẽ ra rỗng — mà đây đúng là phần bên KHÔNG có Tailwind cần.
+
+   Có file này thì bộ token không còn phải đi vay bảng màu của Tailwind, nên
+   app không cần `theme(static)` và framework không dùng Tailwind vẫn nạp
+   được. Lý do đầy đủ ở đầu `scripts/gen-primitives.mjs`.
+   ========================================================================== */
+
+:root {
+  /* trắng / đen */
+  --color-black: #000;
+  --color-white: #fff;
+
+  /* amber */
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+
+  /* blue */
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+
+  /* cyan */
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+
+  /* emerald */
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+
+  /* fuchsia */
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+
+  /* gray */
+  --color-gray-400: oklch(70.7% 0.022 261.325);
+  --color-gray-600: oklch(44.6% 0.03 256.802);
+
+  /* green */
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+
+  /* indigo */
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+
+  /* mist */
+  --color-mist-50: oklch(98.7% 0.002 197.1);
+  --color-mist-100: oklch(96.3% 0.002 197.1);
+  --color-mist-200: oklch(92.5% 0.005 214.3);
+  --color-mist-400: oklch(72.3% 0.014 214.4);
+  --color-mist-500: oklch(56% 0.021 213.5);
+  --color-mist-800: oklch(27.5% 0.011 216.9);
+  --color-mist-900: oklch(21.8% 0.008 223.9);
+  --color-mist-950: oklch(14.8% 0.004 228.8);
+
+  /* neutral */
+  --color-neutral-50: oklch(98.5% 0 none);
+  --color-neutral-100: oklch(97% 0 none);
+  --color-neutral-200: oklch(92.2% 0 none);
+  --color-neutral-300: oklch(87% 0 none);
+  --color-neutral-400: oklch(70.8% 0 none);
+  --color-neutral-500: oklch(55.6% 0 none);
+  --color-neutral-600: oklch(43.9% 0 none);
+  --color-neutral-700: oklch(37.1% 0 none);
+  --color-neutral-800: oklch(26.9% 0 none);
+  --color-neutral-900: oklch(20.5% 0 none);
+  --color-neutral-950: oklch(14.5% 0 none);
+
+  /* orange */
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+
+  /* pink */
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+
+  /* purple */
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+
+  /* red */
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+
+  /* rose */
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+
+  /* sky */
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+
+  /* slate */
+  --color-slate-50: oklch(98.4% 0.003 247.858);
+  --color-slate-100: oklch(96.8% 0.007 247.896);
+  --color-slate-200: oklch(92.9% 0.013 255.508);
+  --color-slate-300: oklch(86.9% 0.022 252.894);
+  --color-slate-400: oklch(70.4% 0.04 256.788);
+  --color-slate-500: oklch(55.4% 0.046 257.417);
+  --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-800: oklch(27.9% 0.041 260.031);
+  --color-slate-900: oklch(20.8% 0.042 265.755);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
+
+  /* stone */
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
+
+  /* teal */
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+
+  /* violet */
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-900: oklch(38% 0.189 293.745);
+
+  /* yellow */
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+
+  /* zinc */
+  --color-zinc-50: oklch(98.5% 0 none);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+
+  /* spacing */
+  --spacing: 0.25rem;
+
+  /* breakpoint */
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  /* text */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  /* tracking */
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+
+  /* leading */
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  /* ease */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}

package/css/styles.css

@@ -0,0 +1,203 @@
+/* =============================================================================
+   Trục HÌNH KHỐI — `data-style`. CSS THUẦN.
+
+   Trục thứ tư, độc lập với các trục kia: `data-palette` nói về SẮC, `.dark` nói
+   về SÁNG/TỐI, `data-surface` nói về VẬT LIỆU, còn cái này nói về BO GÓC, ĐỘ
+   ĐẬM CỦA ĐƯỜNG KẺ và ĐỘ THOÁNG.
+
+   TÁM giá trị, và chúng là TỔ HỢP của đúng ba núm vặn — không phải tám thiết kế
+   rời rạc. Ba núm đó, tất cả đều là token ĐÃ CÓ NGƯỜI ĐỌC từ trước:
+
+     bo góc     `--radius`, kéo theo năm nấc `--radius-sm…2xl`
+     đường kẻ   `--border`, `--input`
+     độ thoáng  bốn `--ui-control-height-*`, hai `--ui-control-padding-x*`,
+                hai `--ui-field-height-*`, hai `--ui-field-padding-x-*`
+
+   | style |  bo góc | đường kẻ | độ thoáng  |
+   |-------|---------|----------|------------|
+   | Vega  | 0,625rem| vừa      | vừa        |  ← mặc định, KHÔNG có khối CSS
+   | Nova  | 1rem    | mờ       | thoáng     |
+   | Maia  | 0,25rem | vừa      | vừa        |
+   | Lyra  | 0       | đậm      | vừa        |
+   | Mira  | 1,4rem  | mờ       | rất thoáng |
+   | Luma  | 0,625rem| rất mờ   | thoáng     |
+   | Sera  | 0,375rem| đậm      | gọn        |
+   | Rhea  | 0,75rem | đậm      | rất thoáng |
+
+   ĐIỀU KIỆN KẾT NẠP VẪN NGUYÊN: một style chỉ được nhận nếu nó dựng được từ
+   token đã có người đọc. Tám khối dưới đây KHÔNG khai một token mới nào — đó là
+   lý do con số tám không kéo theo cái giá mà "bản cạn kiệt kiểu PrimeVue" phải
+   trả (44 cỡ trên 12 component là ra 130–220 token). Style thứ chín mà phải đẻ
+   token mới thì đó là dấu hiệu dừng lại, không phải dấu hiệu viết thêm token.
+
+   Bản trước chỉ có hai (`default`, `flat`) và ghi "con số hai là cố ý". Lập
+   luận hồi đó nhắm vào SỐ TOKEN, không phải số style — mà tám tổ hợp của cùng
+   ba núm thì vẫn là số token đó. `default` nay là `vega`, `flat` nay là `nova`,
+   giá trị giữ nguyên từng con số.
+
+   Đổi id có một hệ quả đã biết: ai từng lưu `flat` trong localStorage sẽ được
+   `isStyleId` từ chối rồi rơi lui về `vega`. `readStored` KHÔNG xoá khoá, nên
+   không mất gì ngoài một lần chọn lại.
+
+   `vega` không có khối CSS nào cả — nó CHÍNH LÀ giá trị trong tokens.css. Cùng
+   lý do `hyperion` / `solid` / `theme` / `slate` / `subtle` không có khối.
+
+   ĐỘ ĐẶC HIỆU — ba lần lặp attribute ở mọi khối, không phải gõ nhầm:
+   `palettes.css` khai `--radius`, `--border` và `--input` bên trong
+   `:root:not(.dark)[data-palette="solar"]` — cũng (0,3,0). Nếu khối ở đây chỉ
+   (0,1,0) thì đặt cả hai thuộc tính lên CÙNG một phần tử sẽ ra: bảng màu thắng,
+   style im lặng không có tác dụng — đúng lớp lỗi `surfaces.css` đã dính một lần
+   ("Bảng màu đè token kính"). Bằng điểm rồi thì thứ tự nạp quyết định, và
+   `index.css` nạp file này SAU `palettes.css`.
+   ========================================================================== */
+
+/* --- Nova — bo to, kẻ mờ, thoáng. Chính là `flat` của bản trước ------------ */
+
+[data-style="nova"][data-style="nova"][data-style="nova"] {
+  --radius: 1rem;
+
+  /* Đường kẻ pha từ `--foreground` chứ không chốt một nấc xám: nhờ vậy một khai
+     báo đúng cho CẢ hai chế độ (nền tối thì `--foreground` gần trắng nên ra vệt
+     sáng mờ) và nó tự ám theo bảng màu. Chốt nấc thì phải khai mười lần. */
+  --border: color-mix(in oklab, var(--foreground) 7%, transparent);
+  --input: color-mix(in oklab, var(--foreground) 11%, transparent);
+
+  /* Control thoáng ra đúng một nấc `--spacing` (4px) ở cả bốn cỡ. Cộng đều chứ
+     không giãn theo tỉ lệ: thang cỡ của Button vốn cách nhau đúng một nấc, nhân
+     lên là nó vỡ nhịp. */
+  --ui-control-height-xs: calc(var(--spacing) * 7);
+  --ui-control-height-sm: calc(var(--spacing) * 8);
+  --ui-control-height-md: calc(var(--spacing) * 9);
+  --ui-control-height-lg: calc(var(--spacing) * 10);
+  --ui-control-padding-x-xs: calc(var(--spacing) * 2.5);
+  --ui-control-padding-x: calc(var(--spacing) * 3.5);
+
+  /* Ô nhập cũng vậy. `7.5` của mặc định giữ nguyên phần lẻ vì 30px là số đo có
+     thật của thiết kế — xem ghi chú tại chỗ trong tokens.css. */
+  --ui-field-height-sm: calc(var(--spacing) * 8.5);
+  --ui-field-height-md: calc(var(--spacing) * 10);
+  --ui-field-padding-x-sm: calc(var(--spacing) * 3.5);
+  --ui-field-padding-x-md: calc(var(--spacing) * 4);
+
+  /* Chữ trong khối văn xuôi cũng thoáng theo, nếu `.typeset` có mặt. Không đụng
+     `--typeset-size`: đổi cỡ chữ là việc của trang /typeset, không phải hệ quả
+     phụ của một style. */
+  --typeset-flow: 1.5em;
+}
+
+/* --- Maia — góc gần vuông, còn lại y như mặc định -------------------------- */
+
+[data-style="maia"][data-style="maia"][data-style="maia"] {
+  --radius: 0.25rem;
+}
+
+/* --- Lyra — góc vuông hẳn, đường kẻ rõ. Nhịp control giữ mặc định --------- */
+
+[data-style="lyra"][data-style="lyra"][data-style="lyra"] {
+  --radius: 0rem;
+  --border: color-mix(in oklab, var(--foreground) 16%, transparent);
+  --input: color-mix(in oklab, var(--foreground) 22%, transparent);
+}
+
+/* --- Mira — mềm nhất và rộng nhất ----------------------------------------- */
+
+[data-style="mira"][data-style="mira"][data-style="mira"] {
+  --radius: 1.4rem;
+  --border: color-mix(in oklab, var(--foreground) 7%, transparent);
+  --input: color-mix(in oklab, var(--foreground) 11%, transparent);
+
+  --ui-control-height-xs: calc(var(--spacing) * 8);
+  --ui-control-height-sm: calc(var(--spacing) * 9);
+  --ui-control-height-md: calc(var(--spacing) * 10);
+  --ui-control-height-lg: calc(var(--spacing) * 11);
+  --ui-control-padding-x-xs: calc(var(--spacing) * 3);
+  --ui-control-padding-x: calc(var(--spacing) * 4);
+
+  --ui-field-height-sm: calc(var(--spacing) * 9.5);
+  --ui-field-height-md: calc(var(--spacing) * 11);
+  --ui-field-padding-x-sm: calc(var(--spacing) * 4);
+  --ui-field-padding-x-md: calc(var(--spacing) * 4.5);
+
+  --typeset-flow: 1.6em;
+}
+
+/* --- Luma — gần như không viền. Bo góc giữ mặc định ------------------------ */
+
+[data-style="luma"][data-style="luma"][data-style="luma"] {
+  /* 4% chứ không phải `transparent`: đường kẻ còn phải tách hàng trong bảng và
+     tách mục trong menu. Bỏ hẳn là mất ranh giới, không phải mất trang trí. */
+  --border: color-mix(in oklab, var(--foreground) 4%, transparent);
+  --input: color-mix(in oklab, var(--foreground) 8%, transparent);
+
+  --ui-control-height-xs: calc(var(--spacing) * 7);
+  --ui-control-height-sm: calc(var(--spacing) * 8);
+  --ui-control-height-md: calc(var(--spacing) * 9);
+  --ui-control-height-lg: calc(var(--spacing) * 10);
+  --ui-control-padding-x-xs: calc(var(--spacing) * 2.5);
+  --ui-control-padding-x: calc(var(--spacing) * 3.5);
+
+  --ui-field-height-sm: calc(var(--spacing) * 8.5);
+  --ui-field-height-md: calc(var(--spacing) * 10);
+  --ui-field-padding-x-sm: calc(var(--spacing) * 3.5);
+  --ui-field-padding-x-md: calc(var(--spacing) * 4);
+
+  --typeset-flow: 1.5em;
+}
+
+/* --- Sera — dày đặc, kẻ rõ. Kiểu bảng điều khiển nhiều dữ liệu ------------- */
+
+[data-style="sera"][data-style="sera"][data-style="sera"] {
+  --radius: 0.375rem;
+  --border: color-mix(in oklab, var(--foreground) 16%, transparent);
+  --input: color-mix(in oklab, var(--foreground) 22%, transparent);
+
+  --ui-control-height-xs: calc(var(--spacing) * 5);
+  --ui-control-height-sm: calc(var(--spacing) * 6);
+  --ui-control-height-md: calc(var(--spacing) * 7);
+  --ui-control-height-lg: calc(var(--spacing) * 8);
+  --ui-control-padding-x-xs: calc(var(--spacing) * 1.5);
+  --ui-control-padding-x: calc(var(--spacing) * 2);
+
+  --ui-field-height-sm: calc(var(--spacing) * 6.5);
+  --ui-field-height-md: calc(var(--spacing) * 8);
+  --ui-field-padding-x-sm: calc(var(--spacing) * 2);
+  --ui-field-padding-x-md: calc(var(--spacing) * 2.5);
+}
+
+/* --- Rhea — góc mềm vừa phải nhưng kẻ đậm và rất thoáng -------------------- */
+
+/* BẢN ĐẦU CỦA KHỐI NÀY LÀ "VIÊN THUỐC" (`--radius: 999px`) VÀ NÓ BẤT KHẢ THI.
+   Ghi lại vì cái chặn nó không nằm ở CSS mà ở cấu trúc token, nên ai muốn thử
+   lại sẽ đâm vào đúng chỗ đó:
+
+   `Card` và `Button` cỡ mặc định CÙNG đọc `rounded-lg`. Đẩy `--radius` lên
+   999px để nút thành viên thuốc thì card cũng nhận 999px, mà `border-radius`
+   tự kẹp ở một nửa cạnh ngắn — card 400×300 biến thành hình bầu dục. Đã dựng
+   và nhìn tận mắt, không phải suy đoán.
+
+   Chữa bằng cách khai thẳng năm nấc (`--radius-sm…2xl`) để chỉ nấc nhỏ thành
+   pill cũng không xong: nấc bị tranh chấp CHÍNH LÀ `lg`, tức nút cỡ mặc định
+   và card dùng chung. Muốn có pill thật thì phải đổi `Card` sang một nấc khác —
+   việc của component, không phải của trục hình khối.
+
+   Nên Rhea thành tổ hợp còn trống trong ba núm: góc mềm vừa, kẻ ĐẬM, rất
+   thoáng. Không style nào khác ghép đường kẻ đậm với control rộng. */
+[data-style="rhea"][data-style="rhea"][data-style="rhea"] {
+  --radius: 0.75rem;
+  --border: color-mix(in oklab, var(--foreground) 16%, transparent);
+  --input: color-mix(in oklab, var(--foreground) 22%, transparent);
+
+  --ui-control-height-xs: calc(var(--spacing) * 8);
+  --ui-control-height-sm: calc(var(--spacing) * 9);
+  --ui-control-height-md: calc(var(--spacing) * 10);
+  --ui-control-height-lg: calc(var(--spacing) * 11);
+  --ui-control-padding-x-xs: calc(var(--spacing) * 3);
+  --ui-control-padding-x: calc(var(--spacing) * 4);
+
+  --ui-field-height-sm: calc(var(--spacing) * 9.5);
+  --ui-field-height-md: calc(var(--spacing) * 11);
+  --ui-field-padding-x-sm: calc(var(--spacing) * 4);
+  --ui-field-padding-x-md: calc(var(--spacing) * 4.5);
+
+  --typeset-flow: 1.6em;
+}