@tasco-fe/theme 0.0.0-stage → 3.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tasco Framework Core contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,45 @@
-# Temporary Holding Version
+# @tasco-fe/theme
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Design token (single source of truth) cho thương hiệu Tasco, suy ra:
+- **antdv theme** — đối tượng cho prop `theme` của `<a-config-provider>`
+- **CSS variables** `--tasco-*` cho style ngoài antdv
+
+Package TS thuần, **không** phụ thuộc runtime vào ant-design-vue.
+
+## API
+```ts
+import {
+  lightTokens, darkTokens, tokensByMode,   // token gốc
+  getAntdTheme, antdThemeLight, antdThemeDark, type ThemeMode, type AntdThemeConfig,
+  cssVars, cssVarsText,
+} from '@tasco-fe/theme'
+```
+
+## Dùng với ConfigProvider (sẽ đặt trong @tasco-fe/nuxt-layer-base)
+```vue
+<script setup lang="ts">
+import { theme } from 'ant-design-vue'
+import { getAntdTheme } from '@tasco-fe/theme'
+
+const mode = 'light'
+const antdTheme = {
+  ...getAntdTheme(mode),
+  algorithm: mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
+}
+</script>
+
+<template>
+  <a-config-provider :theme="antdTheme"><slot /></a-config-provider>
+</template>
+```
+> `algorithm` set ở layer (nơi có antdv) để theme package giữ độc lập.
+
+## Inject CSS variables
+```ts
+import { cssVarsText } from '@tasco-fe/theme'
+// trong nuxt.config app.head:
+useHead({ style: [{ innerHTML: cssVarsText('light') }] })
+```
+
+## Tuỳ biến
+Sửa `src/tokens.ts` — đổi 1 chỗ, lan toả cả antdv lẫn CSS vars. Thay placeholder màu bằng brand guideline thật.

package/dist/index.d.mts

@@ -0,0 +1,199 @@
+/** Bảng màu theo vai trò. Mỗi field phát ra một biến CSS `--tasco-color-<tên-kebab>` (xem `cssVars`). */
+interface ColorTokens {
+    /** Màu thương hiệu chính (navy): nút chính, header bảng, link đang chọn. Theme tối là màu chữ. */
+    primary: string;
+    /** Trạng thái hover của `primary`. */
+    primaryHover: string;
+    /** Trạng thái nhấn của `primary`; nền đặt chữ trắng ở theme tối. */
+    primaryActive: string;
+    /** Nền mờ của primary (chip, hover nhẹ). */
+    primarySoft: string;
+    /** Màu nền thương hiệu (pill menu active); chữ trên nền này dùng navy `sidebarBottom`. */
+    accent: string;
+    /** Nền mờ của accent. */
+    accentSoft: string;
+    /** Chữ/icon màu accent trên nền sáng (accentSoft, surface) — `accent` quá sáng để làm chữ. */
+    accentText: string;
+    /** Thành công — màu nền và seed antdv; làm chữ thì dùng `successText`. */
+    success: string;
+    /** Nền mờ của success. */
+    successSoft: string;
+    /** Chữ/icon màu success trên nền sáng (successSoft, surface). */
+    successText: string;
+    /** Cảnh báo — màu nền và seed antdv; làm chữ thì dùng `warningText`. */
+    warning: string;
+    /** Nền mờ của warning. */
+    warningSoft: string;
+    /** Chữ/icon màu warning trên nền sáng (warningSoft, surface). */
+    warningText: string;
+    /** Lỗi, hành động phá huỷ — dùng làm chữ được ngay. */
+    error: string;
+    /** Nền mờ của error. */
+    errorSoft: string;
+    /** Thông tin trung tính — dùng làm chữ được ngay. */
+    info: string;
+    /** Nền mờ của info; cũng là nền hàng đang chọn của bảng. */
+    infoSoft: string;
+    /** Màu liên kết. */
+    link: string;
+    /** Nền mờ của liên kết. */
+    linkSoft: string;
+    /** Chữ chính. */
+    text: string;
+    /** Chữ phụ: mô tả, nhãn trường. */
+    textSecondary: string;
+    /** Chữ mờ: chú thích, footer — vẫn đạt tương phản AA. */
+    textMuted: string;
+    /** Chữ nhạt nhất: placeholder, disabled — dưới ngưỡng AA, không dùng cho nội dung cần đọc. */
+    textSubtle: string;
+    /** Nền mặc định của card/panel. */
+    surface: string;
+    /** Nền nổi (popover/dropdown/modal). */
+    surfaceElevated: string;
+    /** Nền dịu (section, header bảng nhạt). */
+    surfaceMuted: string;
+    /** Nền trang. */
+    page: string;
+    /** Viền mặc định. */
+    border: string;
+    /** Viền đậm: nút outline, ô nhập khi cần nổi bật. */
+    borderStrong: string;
+    /** Điểm đầu gradient dọc của sidebar. */
+    sidebarTop: string;
+    /** Điểm cuối gradient sidebar; cũng là màu chữ trên nền `accent`. */
+    sidebarBottom: string;
+}
+/**
+ * Mật độ component (px). `controlHeight*` áp qua global token của antdv; phần còn lại phát ra biến CSS để
+ * `base.css` ghi đè padding/margin, vì antdv 4 bỏ qua `theme.components`.
+ */
+interface DensityTokens {
+    /** Chiều cao control cỡ nhỏ (px) — Input/Select/Button/Picker `size="small"`. */
+    controlHeightSM: number;
+    /** Chiều cao control mặc định (px). */
+    controlHeight: number;
+    /** Chiều cao control cỡ lớn (px). */
+    controlHeightLG: number;
+    /** Padding dọc thân Card (px). */
+    cardPaddingBlock: number;
+    /** Padding ngang thân và header Card (px). */
+    cardPaddingInline: number;
+    /** Chiều cao header Card (px). */
+    cardHeadingHeight: number;
+    /** Cỡ chữ tiêu đề Card (px). */
+    cardHeadingFontSize: number;
+    /** Khoảng cách dưới mỗi Form item (px). */
+    formItemMarginBottom: number;
+    /** Padding dọc ô Table (px). */
+    tableCellPaddingBlock: number;
+    /** Padding ngang ô Table (px). */
+    tableCellPaddingInline: number;
+    /** Padding thân Modal / Drawer (px). */
+    modalBodyPadding: number;
+}
+/** Toàn bộ design token của một chế độ (sáng hoặc tối). */
+interface TascoTokens {
+    /** Bảng màu theo vai trò. */
+    color: ColorTokens;
+    /** Bo góc cơ bản (px). */
+    radius: number;
+    /** Bo góc lớn (card, modal) (px). */
+    radiusLg: number;
+    /** Font chữ thân (Quicksand + font hệ thống dự phòng). */
+    fontFamily: string;
+    /** Font cho tiêu đề/heading (có thể trùng fontFamily). */
+    fontFamilyHeading: string;
+    /** Cỡ chữ cơ bản (px). */
+    fontSize: number;
+    /** Chiều cao control cơ bản (px) — alias của density.controlHeight. */
+    controlHeight: number;
+    /** Mật độ component (height/padding/margin). */
+    density: DensityTokens;
+    /** Đơn vị spacing cơ bản (px). */
+    spacingUnit: number;
+    /** Gradient cho nút/hero primary. */
+    gradientPrimary: string;
+    /** Gradient cho nút danger. */
+    gradientDanger: string;
+    /** Shadow card. */
+    shadowCard: string;
+    /** Shadow phần tử nổi (dropdown/modal). */
+    shadowRaised: string;
+}
+/** Token chế độ sáng. */
+declare const lightTokens: TascoTokens;
+/** Token chế độ tối. */
+declare const darkTokens: TascoTokens;
+/** Token theo chế độ — tra bằng `ThemeMode`. */
+declare const tokensByMode: {
+    readonly light: TascoTokens;
+    readonly dark: TascoTokens;
+};
+
+/** Chế độ giao diện. */
+type ThemeMode = 'light' | 'dark';
+/** Cấu hình `theme` cho `<a-config-provider>` — tương thích cấu trúc với prop `theme` của antdv. */
+interface AntdThemeConfig {
+    /** Global token của antdv (màu seed, font, bo góc, chiều cao control…). */
+    token?: Record<string, unknown>;
+    /** Token cấp component — antdv 4.2.6 BỎ QUA trường này; tinh chỉnh component làm bằng CSS trong `base.css`. */
+    components?: Record<string, Record<string, unknown>>;
+}
+/**
+ * Cấu hình `theme` của antdv cho một chế độ. Chưa gồm `algorithm` — nơi có antdv tự thêm
+ * `theme.darkAlgorithm`/`theme.defaultAlgorithm` (layer làm trong `app.vue`).
+ */
+declare function getAntdTheme(mode?: ThemeMode): AntdThemeConfig;
+/** `getAntdTheme('light')` tính sẵn. */
+declare const antdThemeLight: AntdThemeConfig;
+/** `getAntdTheme('dark')` tính sẵn. */
+declare const antdThemeDark: AntdThemeConfig;
+
+/** Map tên biến CSS `--tasco-*` → giá trị của một chế độ; số đo đã kèm đơn vị `px`. */
+declare function cssVars(mode?: ThemeMode): Record<string, string>;
+/**
+ * Sinh chuỗi CSS để inject vào `<head>` (vd qua `app.head.style` trong layer).
+ * @param selector mặc định `:root`.
+ */
+declare function cssVarsText(mode?: ThemeMode, selector?: string): string;
+
+/**
+ * Relative luminance theo WCAG 2.x: 0 (đen) → 1 (trắng). Nhận hex `#rgb` / `#rrggbb`, không phân biệt hoa thường;
+ * chuỗi khác (tên màu, `rgb()`, hex có alpha) → ném lỗi.
+ */
+declare function luminanceOf(color: string): number;
+/**
+ * Tỉ lệ tương phản WCAG 2.x giữa hai màu: 1 (trùng màu) → 21 (đen/trắng); đổi chỗ chữ và nền cho cùng kết quả.
+ * Ngưỡng AA: ≥ 4.5 cho chữ thường, ≥ 3 cho chữ lớn và thành phần đồ hoạ. Kết quả không làm tròn vì WCAG không cho
+ * làm tròn lên (4.499 là chưa đạt 4.5).
+ */
+declare function contrastRatioOf(foreground: string, background: string): number;
+
+/** Ngưỡng tương phản WCAG 2.x AA cho chữ cỡ thường. */
+declare const AA_TEXT_CONTRAST = 4.5;
+/** Một cặp màu chữ/nền cần đạt tương phản AA. */
+interface ContrastPair {
+    /** Màu chữ: tên biến CSS bỏ tiền tố `--tasco-` (vd `color-primary`) hoặc hex cố định (`#fff`). */
+    fg: string;
+    /** Màu nền, ghi như `fg`; gradient thì xét mọi điểm màu. */
+    bg: string;
+    /** Nơi dùng — đổi token là biết component nào bị ảnh hưởng. */
+    usedBy: string;
+    /** Chỉ áp dụng ở các chế độ này; bỏ trống = cả hai. */
+    modes?: ThemeMode[];
+    /**
+     * Chế độ đang biết là CHƯA đạt ngưỡng → lý do. Test khẳng định cặp vẫn dưới ngưỡng, nên khi sửa đạt rồi test sẽ
+     * đỏ nhắc xoá mục này để cặp được khoá như các cặp khác.
+     */
+    knownFailures?: Partial<Record<ThemeMode, string>>;
+}
+/** Cặp chữ/nền đã khoá tương phản AA, xếp theo nhóm màu. */
+declare const contrastPairs: readonly ContrastPair[];
+/**
+ * Tương phản thấp nhất của một cặp ở một chế độ: nền gradient thì lấy điểm màu tệ nhất. Tên biến không tồn tại →
+ * ném lỗi.
+ */
+declare function pairContrastOf(pair: ContrastPair, mode: ThemeMode): number;
+
+export { AA_TEXT_CONTRAST, antdThemeDark, antdThemeLight, contrastPairs, contrastRatioOf, cssVars, cssVarsText, darkTokens, getAntdTheme, lightTokens, luminanceOf, pairContrastOf, tokensByMode };
+export type { AntdThemeConfig, ColorTokens, ContrastPair, DensityTokens, TascoTokens, ThemeMode };

package/dist/index.d.ts

@@ -0,0 +1,199 @@
+/** Bảng màu theo vai trò. Mỗi field phát ra một biến CSS `--tasco-color-<tên-kebab>` (xem `cssVars`). */
+interface ColorTokens {
+    /** Màu thương hiệu chính (navy): nút chính, header bảng, link đang chọn. Theme tối là màu chữ. */
+    primary: string;
+    /** Trạng thái hover của `primary`. */
+    primaryHover: string;
+    /** Trạng thái nhấn của `primary`; nền đặt chữ trắng ở theme tối. */
+    primaryActive: string;
+    /** Nền mờ của primary (chip, hover nhẹ). */
+    primarySoft: string;
+    /** Màu nền thương hiệu (pill menu active); chữ trên nền này dùng navy `sidebarBottom`. */
+    accent: string;
+    /** Nền mờ của accent. */
+    accentSoft: string;
+    /** Chữ/icon màu accent trên nền sáng (accentSoft, surface) — `accent` quá sáng để làm chữ. */
+    accentText: string;
+    /** Thành công — màu nền và seed antdv; làm chữ thì dùng `successText`. */
+    success: string;
+    /** Nền mờ của success. */
+    successSoft: string;
+    /** Chữ/icon màu success trên nền sáng (successSoft, surface). */
+    successText: string;
+    /** Cảnh báo — màu nền và seed antdv; làm chữ thì dùng `warningText`. */
+    warning: string;
+    /** Nền mờ của warning. */
+    warningSoft: string;
+    /** Chữ/icon màu warning trên nền sáng (warningSoft, surface). */
+    warningText: string;
+    /** Lỗi, hành động phá huỷ — dùng làm chữ được ngay. */
+    error: string;
+    /** Nền mờ của error. */
+    errorSoft: string;
+    /** Thông tin trung tính — dùng làm chữ được ngay. */
+    info: string;
+    /** Nền mờ của info; cũng là nền hàng đang chọn của bảng. */
+    infoSoft: string;
+    /** Màu liên kết. */
+    link: string;
+    /** Nền mờ của liên kết. */
+    linkSoft: string;
+    /** Chữ chính. */
+    text: string;
+    /** Chữ phụ: mô tả, nhãn trường. */
+    textSecondary: string;
+    /** Chữ mờ: chú thích, footer — vẫn đạt tương phản AA. */
+    textMuted: string;
+    /** Chữ nhạt nhất: placeholder, disabled — dưới ngưỡng AA, không dùng cho nội dung cần đọc. */
+    textSubtle: string;
+    /** Nền mặc định của card/panel. */
+    surface: string;
+    /** Nền nổi (popover/dropdown/modal). */
+    surfaceElevated: string;
+    /** Nền dịu (section, header bảng nhạt). */
+    surfaceMuted: string;
+    /** Nền trang. */
+    page: string;
+    /** Viền mặc định. */
+    border: string;
+    /** Viền đậm: nút outline, ô nhập khi cần nổi bật. */
+    borderStrong: string;
+    /** Điểm đầu gradient dọc của sidebar. */
+    sidebarTop: string;
+    /** Điểm cuối gradient sidebar; cũng là màu chữ trên nền `accent`. */
+    sidebarBottom: string;
+}
+/**
+ * Mật độ component (px). `controlHeight*` áp qua global token của antdv; phần còn lại phát ra biến CSS để
+ * `base.css` ghi đè padding/margin, vì antdv 4 bỏ qua `theme.components`.
+ */
+interface DensityTokens {
+    /** Chiều cao control cỡ nhỏ (px) — Input/Select/Button/Picker `size="small"`. */
+    controlHeightSM: number;
+    /** Chiều cao control mặc định (px). */
+    controlHeight: number;
+    /** Chiều cao control cỡ lớn (px). */
+    controlHeightLG: number;
+    /** Padding dọc thân Card (px). */
+    cardPaddingBlock: number;
+    /** Padding ngang thân và header Card (px). */
+    cardPaddingInline: number;
+    /** Chiều cao header Card (px). */
+    cardHeadingHeight: number;
+    /** Cỡ chữ tiêu đề Card (px). */
+    cardHeadingFontSize: number;
+    /** Khoảng cách dưới mỗi Form item (px). */
+    formItemMarginBottom: number;
+    /** Padding dọc ô Table (px). */
+    tableCellPaddingBlock: number;
+    /** Padding ngang ô Table (px). */
+    tableCellPaddingInline: number;
+    /** Padding thân Modal / Drawer (px). */
+    modalBodyPadding: number;
+}
+/** Toàn bộ design token của một chế độ (sáng hoặc tối). */
+interface TascoTokens {
+    /** Bảng màu theo vai trò. */
+    color: ColorTokens;
+    /** Bo góc cơ bản (px). */
+    radius: number;
+    /** Bo góc lớn (card, modal) (px). */
+    radiusLg: number;
+    /** Font chữ thân (Quicksand + font hệ thống dự phòng). */
+    fontFamily: string;
+    /** Font cho tiêu đề/heading (có thể trùng fontFamily). */
+    fontFamilyHeading: string;
+    /** Cỡ chữ cơ bản (px). */
+    fontSize: number;
+    /** Chiều cao control cơ bản (px) — alias của density.controlHeight. */
+    controlHeight: number;
+    /** Mật độ component (height/padding/margin). */
+    density: DensityTokens;
+    /** Đơn vị spacing cơ bản (px). */
+    spacingUnit: number;
+    /** Gradient cho nút/hero primary. */
+    gradientPrimary: string;
+    /** Gradient cho nút danger. */
+    gradientDanger: string;
+    /** Shadow card. */
+    shadowCard: string;
+    /** Shadow phần tử nổi (dropdown/modal). */
+    shadowRaised: string;
+}
+/** Token chế độ sáng. */
+declare const lightTokens: TascoTokens;
+/** Token chế độ tối. */
+declare const darkTokens: TascoTokens;
+/** Token theo chế độ — tra bằng `ThemeMode`. */
+declare const tokensByMode: {
+    readonly light: TascoTokens;
+    readonly dark: TascoTokens;
+};
+
+/** Chế độ giao diện. */
+type ThemeMode = 'light' | 'dark';
+/** Cấu hình `theme` cho `<a-config-provider>` — tương thích cấu trúc với prop `theme` của antdv. */
+interface AntdThemeConfig {
+    /** Global token của antdv (màu seed, font, bo góc, chiều cao control…). */
+    token?: Record<string, unknown>;
+    /** Token cấp component — antdv 4.2.6 BỎ QUA trường này; tinh chỉnh component làm bằng CSS trong `base.css`. */
+    components?: Record<string, Record<string, unknown>>;
+}
+/**
+ * Cấu hình `theme` của antdv cho một chế độ. Chưa gồm `algorithm` — nơi có antdv tự thêm
+ * `theme.darkAlgorithm`/`theme.defaultAlgorithm` (layer làm trong `app.vue`).
+ */
+declare function getAntdTheme(mode?: ThemeMode): AntdThemeConfig;
+/** `getAntdTheme('light')` tính sẵn. */
+declare const antdThemeLight: AntdThemeConfig;
+/** `getAntdTheme('dark')` tính sẵn. */
+declare const antdThemeDark: AntdThemeConfig;
+
+/** Map tên biến CSS `--tasco-*` → giá trị của một chế độ; số đo đã kèm đơn vị `px`. */
+declare function cssVars(mode?: ThemeMode): Record<string, string>;
+/**
+ * Sinh chuỗi CSS để inject vào `<head>` (vd qua `app.head.style` trong layer).
+ * @param selector mặc định `:root`.
+ */
+declare function cssVarsText(mode?: ThemeMode, selector?: string): string;
+
+/**
+ * Relative luminance theo WCAG 2.x: 0 (đen) → 1 (trắng). Nhận hex `#rgb` / `#rrggbb`, không phân biệt hoa thường;
+ * chuỗi khác (tên màu, `rgb()`, hex có alpha) → ném lỗi.
+ */
+declare function luminanceOf(color: string): number;
+/**
+ * Tỉ lệ tương phản WCAG 2.x giữa hai màu: 1 (trùng màu) → 21 (đen/trắng); đổi chỗ chữ và nền cho cùng kết quả.
+ * Ngưỡng AA: ≥ 4.5 cho chữ thường, ≥ 3 cho chữ lớn và thành phần đồ hoạ. Kết quả không làm tròn vì WCAG không cho
+ * làm tròn lên (4.499 là chưa đạt 4.5).
+ */
+declare function contrastRatioOf(foreground: string, background: string): number;
+
+/** Ngưỡng tương phản WCAG 2.x AA cho chữ cỡ thường. */
+declare const AA_TEXT_CONTRAST = 4.5;
+/** Một cặp màu chữ/nền cần đạt tương phản AA. */
+interface ContrastPair {
+    /** Màu chữ: tên biến CSS bỏ tiền tố `--tasco-` (vd `color-primary`) hoặc hex cố định (`#fff`). */
+    fg: string;
+    /** Màu nền, ghi như `fg`; gradient thì xét mọi điểm màu. */
+    bg: string;
+    /** Nơi dùng — đổi token là biết component nào bị ảnh hưởng. */
+    usedBy: string;
+    /** Chỉ áp dụng ở các chế độ này; bỏ trống = cả hai. */
+    modes?: ThemeMode[];
+    /**
+     * Chế độ đang biết là CHƯA đạt ngưỡng → lý do. Test khẳng định cặp vẫn dưới ngưỡng, nên khi sửa đạt rồi test sẽ
+     * đỏ nhắc xoá mục này để cặp được khoá như các cặp khác.
+     */
+    knownFailures?: Partial<Record<ThemeMode, string>>;
+}
+/** Cặp chữ/nền đã khoá tương phản AA, xếp theo nhóm màu. */
+declare const contrastPairs: readonly ContrastPair[];
+/**
+ * Tương phản thấp nhất của một cặp ở một chế độ: nền gradient thì lấy điểm màu tệ nhất. Tên biến không tồn tại →
+ * ném lỗi.
+ */
+declare function pairContrastOf(pair: ContrastPair, mode: ThemeMode): number;
+
+export { AA_TEXT_CONTRAST, antdThemeDark, antdThemeLight, contrastPairs, contrastRatioOf, cssVars, cssVarsText, darkTokens, getAntdTheme, lightTokens, luminanceOf, pairContrastOf, tokensByMode };
+export type { AntdThemeConfig, ColorTokens, ContrastPair, DensityTokens, TascoTokens, ThemeMode };

package/dist/index.mjs

@@ -0,0 +1,347 @@
+const fontStack = "'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+const fontHeadingStack = "'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+const density = {
+  controlHeightSM: 28,
+  controlHeight: 36,
+  controlHeightLG: 44,
+  cardPaddingBlock: 12,
+  cardPaddingInline: 16,
+  cardHeadingHeight: 36,
+  cardHeadingFontSize: 14,
+  formItemMarginBottom: 16,
+  tableCellPaddingBlock: 8,
+  tableCellPaddingInline: 8,
+  modalBodyPadding: 16
+};
+const lightTokens = {
+  color: {
+    primary: "#203368",
+    primaryHover: "#2f4b8f",
+    primaryActive: "#182544",
+    primarySoft: "#eef3fb",
+    // Cam thương hiệu chỉ làm nền: chữ trắng trên nó chỉ 2.16:1 nên chữ trên pill menu dùng navy sidebarBottom (7.03:1),
+    // chữ/icon cam dùng accentText (≥ 4.5:1 trên accentSoft, surface, infoSoft).
+    accent: "#ff9800",
+    accentSoft: "#fff1d6",
+    accentText: "#9e5d02",
+    // success/warning còn là seed antdv: làm tối seed thì tint nền antdv sinh ra (Alert, Tag…) xỉn theo, nên giữ nguyên và
+    // tách màu chữ *Text (≥ 4.5:1 trên nền soft, surface, infoSoft). error đổi thẳng vì đỏ đậm vẫn cho tint nền như cũ.
+    success: "#089b00",
+    successSoft: "#ecfdf5",
+    successText: "#087e02",
+    warning: "#d97706",
+    warningSoft: "#fff7ed",
+    warningText: "#a55904",
+    // ≥ 4.5:1 trên errorSoft, surface, infoSoft và khi làm nền cho chữ trắng (Badge, hover item danger của Dropdown antdv);
+    // #ee0033 cũ chỉ 4.08:1 trên errorSoft.
+    error: "#d71431",
+    errorSoft: "#fff1f0",
+    info: "#0f4c81",
+    infoSoft: "#e8f2ff",
+    // ≥ 4.5:1 trên surface, surfaceMuted, page và linkSoft (#1576f4 cũ chỉ 4.26:1 trên surface).
+    link: "#1068d6",
+    linkSoft: "#e8f2ff",
+    text: "#10213f",
+    textSecondary: "#4b5563",
+    textMuted: "#5f6b85",
+    textSubtle: "#9ca3af",
+    surface: "#ffffff",
+    surfaceElevated: "#ffffff",
+    surfaceMuted: "#f6f8fc",
+    page: "#edf2f8",
+    border: "#d8deea",
+    borderStrong: "#bcc6da",
+    sidebarTop: "#213368",
+    sidebarBottom: "#182544"
+  },
+  radius: 0,
+  radiusLg: 0,
+  fontFamily: fontStack,
+  fontFamilyHeading: fontHeadingStack,
+  fontSize: 14,
+  controlHeight: 36,
+  density,
+  spacingUnit: 8,
+  gradientPrimary: "linear-gradient(135deg, #203368, #2f4b8f)",
+  // Chữ trắng của nút danger ≥ 4.5:1 dọc cả dải, kể cả khi hover sáng lên (brightness 1.08); #f43f5e cũ chỉ 3.67:1.
+  gradientDanger: "linear-gradient(135deg, #cf1444, #d71431)",
+  shadowCard: "0 12px 28px rgba(16, 33, 63, 0.08)",
+  shadowRaised: "0 18px 40px rgba(16, 33, 63, 0.14)"
+};
+const darkTokens = {
+  color: {
+    // Nền tối đảo vai trò: primary/primaryHover là màu CHỮ/icon (≥ 4.5:1 trên primarySoft, surface, surfaceElevated) nên
+    // quá sáng để đặt chữ trắng lên; nền có chữ trắng dùng primaryActive (≥ 7:1) — xem base.css và gradientPrimary.
+    primary: "#7090dc",
+    primaryHover: "#94ade6",
+    primaryActive: "#35549e",
+    primarySoft: "#1a2740",
+    accent: "#ffa726",
+    accentSoft: "#3a2c12",
+    // Nền tối: màu gốc đã đủ sáng để làm chữ (≥ 4.5:1 trên nền soft, surface) nên *Text trùng màu gốc.
+    accentText: "#ffa726",
+    success: "#22c55e",
+    successSoft: "#10241a",
+    successText: "#22c55e",
+    warning: "#fbbf24",
+    warningSoft: "#2a2110",
+    warningText: "#fbbf24",
+    error: "#f87171",
+    errorSoft: "#2c1416",
+    info: "#60a5fa",
+    infoSoft: "#13243d",
+    link: "#60a5fa",
+    linkSoft: "#13243d",
+    text: "#f8fafc",
+    textSecondary: "#c0cadb",
+    textMuted: "#9aa6bf",
+    textSubtle: "#6b7689",
+    surface: "#162033",
+    surfaceElevated: "#1a2740",
+    surfaceMuted: "#111827",
+    page: "#0f1724",
+    border: "#31415f",
+    borderStrong: "#4b5f86",
+    sidebarTop: "#1c2c52",
+    sidebarBottom: "#0e1a33"
+  },
+  radius: 0,
+  radiusLg: 0,
+  fontFamily: fontStack,
+  fontFamilyHeading: fontHeadingStack,
+  fontSize: 14,
+  controlHeight: 36,
+  density,
+  spacingUnit: 8,
+  // Không dùng primary làm điểm cuối: chữ trắng của CButton primary phải ≥ 4.5:1 dọc cả dải (kể cả khi hover sáng lên).
+  gradientPrimary: "linear-gradient(135deg, #35549e, #4466b8)",
+  // error theme tối là màu chữ (sáng) nên không làm điểm cuối được (chữ trắng chỉ 2.77:1) → dùng chung dải với theme sáng.
+  gradientDanger: "linear-gradient(135deg, #cf1444, #d71431)",
+  shadowCard: "0 12px 28px rgba(0, 0, 0, 0.35)",
+  shadowRaised: "0 18px 40px rgba(0, 0, 0, 0.5)"
+};
+const tokensByMode = {
+  light: lightTokens,
+  dark: darkTokens
+};
+
+function toAntdToken(t) {
+  return {
+    colorPrimary: t.color.primary,
+    colorSuccess: t.color.success,
+    colorWarning: t.color.warning,
+    colorError: t.color.error,
+    colorInfo: t.color.info,
+    colorLink: t.color.link,
+    colorLinkHover: t.color.primaryHover,
+    colorText: t.color.text,
+    colorTextSecondary: t.color.textSecondary,
+    colorTextTertiary: t.color.textMuted,
+    colorTextQuaternary: t.color.textSubtle,
+    colorBorder: t.color.border,
+    colorBorderSecondary: t.color.border,
+    colorBgBase: t.color.surface,
+    colorBgContainer: t.color.surface,
+    colorBgElevated: t.color.surfaceElevated,
+    colorBgLayout: t.color.page,
+    borderRadius: t.radius,
+    borderRadiusLG: t.radiusLg,
+    fontFamily: t.fontFamily,
+    fontSize: t.fontSize,
+    // Height control qua GLOBAL token (antd honor; theme.components thì không).
+    controlHeight: t.density.controlHeight,
+    controlHeightSM: t.density.controlHeightSM,
+    controlHeightLG: t.density.controlHeightLG,
+    boxShadowSecondary: t.shadowRaised,
+    wireframe: false
+  };
+}
+function getAntdTheme(mode = "light") {
+  const t = tokensByMode[mode];
+  return { token: toAntdToken(t) };
+}
+const antdThemeLight = getAntdTheme("light");
+const antdThemeDark = getAntdTheme("dark");
+
+function cssVars(mode = "light") {
+  const t = tokensByMode[mode];
+  const c = t.color;
+  return {
+    "--tasco-color-primary": c.primary,
+    "--tasco-color-primary-hover": c.primaryHover,
+    "--tasco-color-primary-active": c.primaryActive,
+    "--tasco-color-primary-soft": c.primarySoft,
+    "--tasco-color-accent": c.accent,
+    "--tasco-color-accent-soft": c.accentSoft,
+    "--tasco-color-accent-text": c.accentText,
+    "--tasco-color-success": c.success,
+    "--tasco-color-success-soft": c.successSoft,
+    "--tasco-color-success-text": c.successText,
+    "--tasco-color-warning": c.warning,
+    "--tasco-color-warning-soft": c.warningSoft,
+    "--tasco-color-warning-text": c.warningText,
+    "--tasco-color-error": c.error,
+    "--tasco-color-error-soft": c.errorSoft,
+    "--tasco-color-info": c.info,
+    "--tasco-color-info-soft": c.infoSoft,
+    "--tasco-color-link": c.link,
+    "--tasco-color-link-soft": c.linkSoft,
+    "--tasco-color-text": c.text,
+    "--tasco-color-text-secondary": c.textSecondary,
+    "--tasco-color-text-muted": c.textMuted,
+    "--tasco-color-text-subtle": c.textSubtle,
+    "--tasco-color-surface": c.surface,
+    "--tasco-color-surface-elevated": c.surfaceElevated,
+    "--tasco-color-surface-muted": c.surfaceMuted,
+    "--tasco-color-page": c.page,
+    "--tasco-color-border": c.border,
+    "--tasco-color-border-strong": c.borderStrong,
+    "--tasco-color-sidebar-top": c.sidebarTop,
+    "--tasco-color-sidebar-bottom": c.sidebarBottom,
+    "--tasco-radius": `${t.radius}px`,
+    "--tasco-radius-lg": `${t.radiusLg}px`,
+    // Mật độ component (base.css dùng để override padding/height/margin).
+    "--tasco-control-height-sm": `${t.density.controlHeightSM}px`,
+    "--tasco-control-height-lg": `${t.density.controlHeightLG}px`,
+    "--tasco-card-padding-block": `${t.density.cardPaddingBlock}px`,
+    "--tasco-card-padding-inline": `${t.density.cardPaddingInline}px`,
+    "--tasco-card-heading-height": `${t.density.cardHeadingHeight}px`,
+    "--tasco-card-heading-font-size": `${t.density.cardHeadingFontSize}px`,
+    "--tasco-form-item-margin": `${t.density.formItemMarginBottom}px`,
+    "--tasco-table-cell-padding-block": `${t.density.tableCellPaddingBlock}px`,
+    "--tasco-table-cell-padding-inline": `${t.density.tableCellPaddingInline}px`,
+    "--tasco-modal-body-padding": `${t.density.modalBodyPadding}px`,
+    "--tasco-font-family": t.fontFamily,
+    "--tasco-font-family-heading": t.fontFamilyHeading,
+    "--tasco-font-size": `${t.fontSize}px`,
+    "--tasco-control-height": `${t.controlHeight}px`,
+    "--tasco-spacing-unit": `${t.spacingUnit}px`,
+    "--tasco-gradient-primary": t.gradientPrimary,
+    "--tasco-gradient-danger": t.gradientDanger,
+    "--tasco-shadow-card": t.shadowCard,
+    "--tasco-shadow-raised": t.shadowRaised
+  };
+}
+function cssVarsText(mode = "light", selector = ":root") {
+  const body = Object.entries(cssVars(mode)).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  return `${selector} {
+${body}
+}`;
+}
+
+const HEX_COLOR_RE = /^#([\da-f]{3}|[\da-f]{6})$/i;
+function parseHexColor(color) {
+  const hex = HEX_COLOR_RE.exec(color)?.[1];
+  if (!hex) return null;
+  const full = hex.length === 3 ? [...hex].map((digit) => digit + digit).join("") : hex;
+  const channelAt = (offset) => Number.parseInt(full.slice(offset, offset + 2), 16);
+  return [channelAt(0), channelAt(2), channelAt(4)];
+}
+function toLinearChannel(channel) {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function luminanceOf(color) {
+  const rgb = parseHexColor(color);
+  if (!rgb) {
+    throw new Error(
+      `[@tasco-fe/theme] M\xE0u "${color}" kh\xF4ng h\u1EE3p l\u1EC7 \u2014 c\u1EA7n hex #rgb/#rrggbb (m\xE0u c\xF3 alpha ph\u1EA3i tr\u1ED9n v\u1EDBi n\u1EC1n tr\u01B0\u1EDBc).`
+    );
+  }
+  const [r, g, b] = rgb;
+  return 0.2126 * toLinearChannel(r) + 0.7152 * toLinearChannel(g) + 0.0722 * toLinearChannel(b);
+}
+function contrastRatioOf(foreground, background) {
+  const a = luminanceOf(foreground);
+  const b = luminanceOf(background);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+
+const AA_TEXT_CONTRAST = 4.5;
+const HEX_RE = /#[\da-f]{3,8}\b/gi;
+const SUBTLE_TEXT = "text-subtle l\xE0 m\xE0u placeholder/disabled c\u1EE7a antdv (colorTextQuaternary)";
+const DESIGN_DOCS = "c\u1EB7p d\xF9ng \u0111\u01B0\u1EE3c \u1EDF trang M\xE0u & t\u01B0\u01A1ng ph\u1EA3n c\u1EE7a docs";
+const contrastPairs = [
+  // Primary & link
+  { fg: "color-primary", bg: "color-primary-soft", usedBy: "CTag primary, CButton ghost, icon CStatistic" },
+  { fg: "color-primary-hover", bg: "color-primary-soft", usedBy: "CButton ghost :hover, ::selection theme t\u1ED1i" },
+  {
+    fg: "color-primary",
+    bg: "color-surface",
+    usedBy: "CButton secondary/outline/link, m\u1EE5c \u0111ang ch\u1ECDn c\u1EE7a CTopNav, Pagination, Tabs"
+  },
+  { fg: "color-primary-hover", bg: "color-surface", usedBy: "CButton secondary/outline/link :hover" },
+  { fg: "color-primary", bg: "color-surface-elevated", usedBy: "CButton trong modal/drawer/popover" },
+  { fg: "color-link", bg: "color-surface", usedBy: 'CTable "Xo\xE1 t\u1EA5t c\u1EA3" tr\xEAn thanh l\u1ECDc' },
+  { fg: "color-link", bg: "color-surface-elevated", usedBy: "th\u1EBB <a> trong modal/drawer/popover" },
+  { fg: "color-link", bg: "color-surface-muted", usedBy: "th\u1EBB <a> trong h\xE0ng s\u1ECDc CTable" },
+  { fg: "color-link", bg: "color-page", usedBy: "th\u1EBB <a> tr\xEAn n\u1EC1n trang" },
+  // Chữ trên nền đậm. Theme tối primary/error là màu chữ (sáng), nên base.css đặt chữ trắng lên primary-active /
+  // gradient-danger thay cho primary / error.
+  {
+    fg: "#fff",
+    bg: "color-primary",
+    usedBy: "header b\u1EA3ng, CCard primary, n\xFAt primary antdv, ng\xE0y \u0111ang ch\u1ECDn DatePicker",
+    modes: ["light"]
+  },
+  {
+    fg: "#fff",
+    bg: "color-primary-active",
+    usedBy: "CChatMessage, c\u1ED9t sort header b\u1EA3ng; theme t\u1ED1i: header b\u1EA3ng, CCard primary, n\xFAt antdv, DatePicker"
+  },
+  { fg: "#fff", bg: "gradient-primary", usedBy: "CButton primary, tab \u0111ang ch\u1ECDn c\u1EE7a drawer Thi\u1EBFt l\u1EADp CTable" },
+  {
+    fg: "#fff",
+    bg: "gradient-danger",
+    usedBy: "CButton danger, n\xFAt primary danger antdv, hover item danger Dropdown theme t\u1ED1i"
+  },
+  { fg: "#fff", bg: "color-error", usedBy: "Badge, hover item danger Dropdown antdv", modes: ["light"] },
+  { fg: "color-sidebar-bottom", bg: "color-accent", usedBy: "CSideNav m\u1EE5c :hover/\u0111ang ch\u1ECDn" },
+  // Chữ chính
+  {
+    fg: "color-text",
+    bg: "color-surface",
+    usedBy: "m\u1EE5c ch\u01B0a ch\u1ECDn c\u1EE7a CTopNav, ti\xEAu \u0111\u1EC1 CCard, gi\xE1 tr\u1ECB CStatistic, n\xFAt icon CTable"
+  },
+  // Chữ phụ
+  { fg: "color-text-muted", bg: "color-surface-muted", usedBy: "CTag default" },
+  { fg: "color-text-muted", bg: "color-surface", usedBy: "nh\xE3n CStatistic, nh\xE3n thanh l\u1ECDc CTable, footer CAppLayout" },
+  { fg: "color-text-muted", bg: "color-surface-elevated", usedBy: "g\u1EE3i \xFD trong drawer Thi\u1EBFt l\u1EADp CTable" },
+  {
+    fg: "color-text-subtle",
+    bg: "color-surface",
+    usedBy: "m\xF4 t\u1EA3 CEmpty",
+    knownFailures: { light: SUBTLE_TEXT, dark: SUBTLE_TEXT }
+  },
+  // Semantic: accent/success/warning làm chữ thì dùng biến *-text; primary/error/info dùng màu gốc.
+  { fg: "color-accent-text", bg: "color-accent-soft", usedBy: "CTag accent, icon CStatistic" },
+  { fg: "color-success-text", bg: "color-success-soft", usedBy: "CTag success, icon CStatistic" },
+  { fg: "color-warning-text", bg: "color-warning-soft", usedBy: "CTag warning, icon CStatistic" },
+  { fg: "color-error", bg: "color-error-soft", usedBy: "CTag error, icon CStatistic" },
+  { fg: "color-info", bg: "color-info-soft", usedBy: "CTag info, icon CStatistic" },
+  { fg: "color-accent-text", bg: "color-surface", usedBy: DESIGN_DOCS },
+  { fg: "color-success-text", bg: "color-surface", usedBy: "ch\u1EEF CStatus ho\u1EA1t \u0111\u1ED9ng, trend t\u0103ng CStatistic" },
+  { fg: "color-warning-text", bg: "color-surface", usedBy: DESIGN_DOCS },
+  { fg: "color-error", bg: "color-surface", usedBy: "ch\u1EEF CStatus kh\xF4ng ho\u1EA1t \u0111\u1ED9ng, trend gi\u1EA3m CStatistic" },
+  { fg: "color-info", bg: "color-surface", usedBy: DESIGN_DOCS },
+  { fg: "color-error", bg: "color-surface-elevated", usedBy: "item danger c\u1EE7a Dropdown trong menu thao t\xE1c" },
+  { fg: "color-success-text", bg: "color-info-soft", usedBy: "ch\u1EEF CStatus trong h\xE0ng \u0111ang ch\u1ECDn c\u1EE7a b\u1EA3ng" },
+  { fg: "color-error", bg: "color-info-soft", usedBy: "ch\u1EEF CStatus trong h\xE0ng \u0111ang ch\u1ECDn c\u1EE7a b\u1EA3ng" }
+];
+function colorsOf(vars, ref) {
+  if (ref.startsWith("#")) return [ref];
+  const colors = vars[`--tasco-${ref}`]?.match(HEX_RE);
+  if (!colors) {
+    throw new Error(`[@tasco-fe/theme] --tasco-${ref} kh\xF4ng c\xF3 trong cssVars ho\u1EB7c kh\xF4ng ch\u1EE9a m\xE0u hex \u2014 s\u1EEDa t\xEAn trong c\u1EB7p.`);
+  }
+  return colors;
+}
+function pairContrastOf(pair, mode) {
+  const vars = cssVars(mode);
+  const backgrounds = colorsOf(vars, pair.bg);
+  return Math.min(
+    ...colorsOf(vars, pair.fg).flatMap((fg) => backgrounds.map((bg) => contrastRatioOf(fg, bg)))
+  );
+}
+
+export { AA_TEXT_CONTRAST, antdThemeDark, antdThemeLight, contrastPairs, contrastRatioOf, cssVars, cssVarsText, darkTokens, getAntdTheme, lightTokens, luminanceOf, pairContrastOf, tokensByMode };

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@tasco-fe/theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "3.0.0-beta.0",
+  "description": "Design token + theme antdv (ConfigProvider) + CSS variables cho framework Tasco",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./base.css": "./styles/base.css"
+  },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "devDependencies": {
+    "@vitest/coverage-v8": "^3.0.0",
+    "eslint": "^10.10.0",
+    "typescript": "^5.7.3",
+    "unbuild": "^3.0.1",
+    "vitest": "^3.0.0",
+    "@tasco-fe/eslint-config": "3.0.0-beta.0",
+    "@tasco-fe/tsconfig": "3.0.0-beta.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run --coverage",
+    "clean": "rm -rf dist .turbo coverage"
+  }
 }

package/styles/base.css

@@ -0,0 +1,339 @@
+/* Base global stylesheet của framework Tasco.
+ * Inject MỘT LẦN ở layer (nuxt.config `css: ['@tasco-fe/theme/base.css']`).
+ * Chỉ chứa tinh chỉnh global nhẹ — màu sắc lấy từ biến `--tasco-*` (do layer
+ * sinh từ cssVarsText). Phần lớn giao diện do antd theme token lo; file này
+ * xử lý những thứ antd không cấu hình được (scrollbar, font nền, selection...).
+ * KHÔNG phụ thuộc Tailwind. */
+
+:root {
+  color-scheme: light;
+  /* Khai báo font TĨNH ở đây (không chỉ inject runtime) để @nuxt/fonts quét được
+   * tên 'Quicksand'/'Montserrat' khi build và tự tải, self-host. cssVarsText cũng
+   * set 2 biến này nhưng cùng giá trị — ở đây là "neo" cho việc dò font.
+   * Đồng bộ với @tasco-fe/theme tokens (fontStack/fontHeadingStack). */
+  --tasco-font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --tasco-font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Dark mode: useThemeMode gắn [data-theme='dark'] lên <html>; biến --tasco-* đã
+ * được cssVarsText('dark') ghi đè, ở đây chỉ cần đổi color-scheme cho form
+ * control/scrollbar gốc của trình duyệt. */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: var(--tasco-font-family);
+  font-size: var(--tasco-font-size);
+  color: var(--tasco-color-text);
+  background: var(--tasco-color-page);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--tasco-color-link);
+}
+
+::selection {
+  background: var(--tasco-color-primary-soft);
+  color: var(--tasco-color-primary-active);
+}
+/* Theme tối: primary-active là tông nền (tối) → chữ đang bôi chọn trên primary-soft chỉ ~2:1; đổi sang tông primary sáng nhất. */
+:root[data-theme='dark'] ::selection {
+  color: var(--tasco-color-primary-hover);
+}
+
+/* Scrollbar mảnh, đồng nhất giữa các trang. */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(16, 33, 63, 0.18);
+  border-radius: 999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 33, 63, 0.32);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Bảng (Table) — dấu ấn Tasco: header nền primary, chữ trắng.
+ * Style qua global CSS vì ant-design-vue 4.x bỏ qua theme.components.
+ * ───────────────────────────────────────────────────────────────────────── */
+.ant-table-wrapper .ant-table-thead > tr > th,
+.ant-table-wrapper .ant-table-thead > tr > td {
+  background: var(--tasco-color-primary) !important;
+  color: #fff !important;
+  font-weight: 400;
+  white-space: nowrap;
+  padding-block: var(--tasco-table-cell-padding-block, 8px) !important;
+  padding-inline: var(--tasco-table-cell-padding-inline, 8px) !important;
+}
+/* Vạch ngăn dọc giữa các cột header: trắng mờ, đủ rõ trên nền primary. */
+.ant-table-wrapper .ant-table-thead > tr > th::before {
+  background-color: rgba(255, 255, 255, 0.6) !important;
+}
+/* Icon sort/filter trên header chuyển sáng để hợp nền tối. */
+.ant-table-wrapper .ant-table-thead .ant-table-column-sorter,
+.ant-table-wrapper .ant-table-thead .ant-table-filter-trigger {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover,
+.ant-table-wrapper .ant-table-thead th.ant-table-column-sort {
+  background: var(--tasco-color-primary-active) !important;
+}
+/* Theme tối: primary là màu chữ (sáng), chữ trắng trên nó chỉ ~3:1 → header dùng primary-active; cột đang sort/hover
+ * phủ thêm lớp tối để vẫn tối hơn header một nấc như theme sáng. */
+:root[data-theme='dark'] .ant-table-wrapper .ant-table-thead > tr > th,
+:root[data-theme='dark'] .ant-table-wrapper .ant-table-thead > tr > td {
+  background: var(--tasco-color-primary-active) !important;
+}
+:root[data-theme='dark'] .ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover,
+:root[data-theme='dark'] .ant-table-wrapper .ant-table-thead th.ant-table-column-sort {
+  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--tasco-color-primary-active) !important;
+}
+/* Hàng được chọn dùng nền info-soft thay vì xám mặc định. */
+.ant-table-wrapper .ant-table-tbody > tr.ant-table-row-selected > td {
+  background: var(--tasco-color-info-soft) !important;
+}
+/* Ô gọn hơn cho mật độ dữ liệu cao. Chừa hàng đo cột (measure-row, antdv chèn khi bảng có
+ * scroll/sticky) — nếu bị cộng padding sẽ thành khoảng trống 16px ngay dưới header. */
+.ant-table-wrapper .ant-table-tbody > tr:not(.ant-table-measure-row) > td {
+  padding-block: var(--tasco-table-cell-padding-block, 8px) !important;
+  padding-inline: var(--tasco-table-cell-padding-inline, 8px) !important;
+}
+
+/* Tab đang chọn in đậm cho dễ nhận biết. */
+.ant-tabs-tab-active .ant-tabs-tab-btn {
+  font-weight: 700;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Nền primary chữ trắng do antdv tự vẽ — theme tối.
+ * antdv suy màu nền từ seed `colorPrimary` (trộn 85% với #141414 ở theme tối). Primary theme tối là màu chữ (sáng) nên
+ * chữ trắng trên nền suy ra chỉ ~4:1, không seed nào đạt ≥ 4.5:1 cho cả hai vai trò → nút primary thuần antdv
+ * (Modal.confirm của useConfirm, nút Gửi của CChat…) và ô ngày đang chọn của DatePicker/RangePicker dùng primary-active.
+ * CButton có gradient riêng nên loại trừ. Chỗ antdv khác còn nền colorPrimary + chữ trắng mà core chưa dùng nên chưa phủ
+ * (vd Steps, Radio solid, Tag checkable, Menu theme dark, Badge.Ribbon).
+ * ───────────────────────────────────────────────────────────────────────── */
+:root[data-theme='dark'] .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):not(.c-btn) {
+  background: var(--tasco-color-primary-active) !important;
+}
+/* Nền bị ghim bằng !important nên hover báo hiệu bằng độ sáng (giống CButton). */
+:root[data-theme='dark'] .ant-btn-primary:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):not(.c-btn):hover {
+  filter: brightness(1.12);
+}
+:root[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
+:root[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
+:root[data-theme='dark'] .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
+  background: var(--tasco-color-primary-active) !important;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Nút primary danger thuần antdv (vd `okButtonProps: { danger: true }` của Modal/Popconfirm) — cả hai theme.
+ * antdv tô nền bằng colorError: theme tối nó trộn seed error (màu chữ, sáng) nên chữ trắng chỉ ~3.6:1; theme sáng lúc hover
+ * nền colorErrorHover sáng hơn (~4.2:1). Dùng chung gradient-danger + hover với CButton danger (≥ 4.5:1 kể cả khi hover).
+ * ───────────────────────────────────────────────────────────────────────── */
+.ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-background-ghost):not(.c-btn) {
+  background: var(--tasco-gradient-danger) !important;
+}
+.ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-disabled):not(.ant-btn-background-ghost):not(.c-btn):hover {
+  filter: brightness(1.08);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Chữ màu primary / error do antdv tự vẽ — theme tối.
+ * antdv trộn seed 85% với #141414 nên chữ colorPrimary (#627dbe) chỉ ~4:1 trên surface, colorError (#d66363) ~4.1:1 trên
+ * surface-elevated; token primary/error đã ≥ 4.5:1 nên dùng lại. Phủ chỗ core dùng: trang đang chọn của Pagination (CTable),
+ * tab đang chọn, item danger của Dropdown (menu thao tác dòng — hover nền gradient-danger như nút danger). Chỗ antdv khác còn
+ * chữ màu suy ra mà core chưa dùng nên chưa phủ (vd Radio.Button đang chọn, item đang chọn của Dropdown, chữ lỗi Form trong
+ * Modal/Drawer, số của Badge).
+ * ───────────────────────────────────────────────────────────────────────── */
+:root[data-theme='dark'] .ant-pagination:not(.ant-pagination-disabled) .ant-pagination-item-active {
+  border-color: var(--tasco-color-primary) !important;
+}
+:root[data-theme='dark'] .ant-pagination:not(.ant-pagination-disabled) .ant-pagination-item-active a {
+  color: var(--tasco-color-primary) !important;
+}
+:root[data-theme='dark'] .ant-pagination:not(.ant-pagination-disabled) .ant-pagination-item-active:hover {
+  border-color: var(--tasco-color-primary-hover) !important;
+}
+:root[data-theme='dark'] .ant-pagination:not(.ant-pagination-disabled) .ant-pagination-item-active:hover a {
+  color: var(--tasco-color-primary-hover) !important;
+}
+:root[data-theme='dark'] .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: var(--tasco-color-primary) !important;
+}
+:root[data-theme='dark'] .ant-tabs .ant-tabs-ink-bar {
+  background: var(--tasco-color-primary) !important;
+}
+:root[data-theme='dark'] .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled) {
+  color: var(--tasco-color-error) !important;
+}
+:root[data-theme='dark'] .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):hover {
+  color: #fff !important;
+  background: var(--tasco-gradient-danger) !important;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * MẬT ĐỘ COMPONENT (padding / margin) — chỉnh tập trung qua density tokens
+ * (@tasco-fe/theme → biến --tasco-*). Dùng global CSS vì ant-design-vue 4.x bỏ
+ * qua theme.components. Height của control đã set qua global token controlHeight*.
+ * ───────────────────────────────────────────────────────────────────────── */
+/* Card — padding thân. */
+.ant-card > .ant-card-body {
+  padding: var(--tasco-card-padding-block, 12px) var(--tasco-card-padding-inline, 16px);
+}
+/* Card — padding header (theo trục ngang của body, cao gọn). */
+.ant-card > .ant-card-head {
+  padding-inline: var(--tasco-card-padding-inline, 16px) !important;
+  min-height: var(--tasco-card-heading-height, 56px) !important;
+}
+.c-card--collapse .ant-collapse .ant-collapse-header {
+  border-bottom: 1px solid var(--tasco-color-border);
+  padding: 0 var(--tasco-card-padding-inline, 16px) !important;
+  height: var(--tasco-card-heading-height, 56px) !important;
+  align-items: center;
+}
+.c-card-primary > .ant-card-head, .c-card-primary .ant-collapse-header {
+  background: var(--tasco-color-primary);
+  color: #ffffff !important;
+}
+.c-card-primary .c-card__title {
+  color: #ffffff !important;
+}
+/* Theme tối: chữ trắng trên primary (sáng) chỉ ~3:1 → header nền primary-active. */
+:root[data-theme='dark'] .c-card-primary > .ant-card-head,
+:root[data-theme='dark'] .c-card-primary .ant-collapse-header {
+  background: var(--tasco-color-primary-active);
+}
+/* Type: outline — header gạch dưới primary, không nền; tiêu đề primary. */
+.c-card-outline > .ant-card-head,
+.c-card-outline .ant-collapse-header {
+  border-bottom: 2px solid var(--tasco-color-primary) !important;
+}
+.c-card-outline .c-card__title {
+  color: var(--tasco-color-primary);
+}
+/* Type: filled — header nền dịu. */
+.c-card-filled > .ant-card-head,
+.c-card-filled .ant-collapse-header {
+  background: var(--tasco-color-surface-muted) !important;
+}
+/* Type: ghost — nền trong suốt. */
+.c-card-ghost {
+  background: transparent !important;
+}
+
+  /* Form item — khoảng cách dưới. */
+.ant-form-item {
+  margin-bottom: var(--tasco-form-item-margin, 16px) !important;
+}
+/* Modal / Drawer — padding thân. */
+.ant-modal .ant-modal-body,
+.ant-drawer .ant-drawer-body {
+  padding: var(--tasco-modal-body-padding, 16px) !important;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Sidebar nav (CSideNav) — dựa trên override OneAuto (#left-side-menu trong
+ * main.css): menu trong suốt (sider lo gradient), chữ + icon trắng UPPERCASE,
+ * item con thụt 35px bo tròn pill, hover/selected nền cam accent chữ navy.
+ * ───────────────────────────────────────────────────────────────────────── */
+.c-sidenav.ant-menu-dark,
+.c-sidenav.ant-menu-dark .ant-menu-sub {
+  background: transparent !important;
+}
+.c-sidenav .ant-menu-title-content {
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.c-sidenav .ant-menu-title-content,
+.c-sidenav .tabler-icon,
+.c-sidenav .ant-menu-item .anticon {
+  color: #fff !important;
+}
+.c-sidenav > .ant-menu-item {
+  padding: 0 1rem !important;
+}
+.c-sidenav > .ant-menu-submenu > .ant-menu-submenu-title {
+  padding-left: 16px !important;
+}
+/* Item con: thụt vào + bo tròn pill. */
+.c-sidenav .ant-menu-sub .ant-menu-item {
+  margin-left: 35px !important;
+  padding-left: 15px !important;
+  border-radius: 9999px !important;
+}
+/* Hover & active đều nền cam. Chữ + icon trên nền cam dùng navy của sidebar: chữ trắng trên cam chỉ ~2:1, navy ≥ 7:1 ở
+ * cả hai theme. */
+.c-sidenav .ant-menu-item:hover,
+.c-sidenav .ant-menu-item-selected {
+  background-color: var(--tasco-color-accent) !important;
+  color: var(--tasco-color-sidebar-bottom) !important;
+}
+.c-sidenav .ant-menu-item:hover .ant-menu-title-content,
+.c-sidenav .ant-menu-item:hover .tabler-icon,
+.c-sidenav .ant-menu-item:hover .anticon,
+.c-sidenav .ant-menu-item-selected .ant-menu-title-content,
+.c-sidenav .ant-menu-item-selected .tabler-icon,
+.c-sidenav .ant-menu-item-selected .anticon {
+  color: var(--tasco-color-sidebar-bottom) !important;
+}
+/* Khi thu gọn: submenu cha đang chọn nền cam. */
+.c-sidenav.ant-menu-inline-collapsed .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  background-color: var(--tasco-color-accent) !important;
+  color: var(--tasco-color-sidebar-bottom) !important;
+}
+.c-sidenav.ant-menu-inline-collapsed .ant-menu-submenu-selected > .ant-menu-submenu-title .tabler-icon,
+.c-sidenav.ant-menu-inline-collapsed .ant-menu-submenu-selected > .ant-menu-submenu-title .anticon {
+  color: var(--tasco-color-sidebar-bottom) !important;
+}
+
+/* Top nav (CTopNav) — menu module ngang: UPPERCASE bold, active đổi sang primary + gạch chân kiểu tab ở đáy header (giống
+ * #top-header-menu). Mục chưa chọn dùng chữ `text`: navy #253264 tô cứng trước đây chỉ ~1.3:1 trên surface theme tối,
+ * `text` ≥ 15:1 ở cả hai theme và trùng màu antdv tô khi hover (`colorText`). */
+.c-topnav.ant-menu-horizontal {
+  height: 100%;
+  line-height: normal;
+  color: var(--tasco-color-text);
+  border-bottom: none;
+}
+.c-topnav .ant-menu-title-content {
+  text-transform: uppercase;
+  font-weight: 700;
+}
+/* Item cao trọn header → ink-bar (::after, bottom:0) nằm sát đáy header. */
+.c-topnav.ant-menu-horizontal > .ant-menu-item,
+.c-topnav.ant-menu-horizontal > .ant-menu-submenu {
+  height: 100% !important;
+  top: 0 !important;
+  margin-block: 0 !important;
+  display: inline-flex !important;
+  align-items: center;
+  color: var(--tasco-color-text);
+}
+/* Gạch chân: dày 2px, sát đáy header, ôm theo bề rộng item (trừ padding). */
+.c-topnav.ant-menu-horizontal > .ant-menu-item::after,
+.c-topnav.ant-menu-horizontal > .ant-menu-submenu::after {
+  inset-inline: 16px !important;
+  bottom: 0 !important;
+  border-bottom-width: 2px !important;
+}
+.c-topnav.ant-menu-horizontal > .ant-menu-item-selected,
+.c-topnav.ant-menu-horizontal > .ant-menu-submenu-selected {
+  color: var(--tasco-color-primary) !important;
+}
+.c-topnav.ant-menu-horizontal > .ant-menu-item-selected::after,
+.c-topnav.ant-menu-horizontal > .ant-menu-item:hover::after,
+.c-topnav.ant-menu-horizontal > .ant-menu-submenu-selected::after,
+.c-topnav.ant-menu-horizontal > .ant-menu-submenu:hover::after {
+  border-bottom-color: var(--tasco-color-primary) !important;
+}