Theme — @tasco/theme

Design token là single source of truth, suy ra cả antdv theme lẫn CSS variables. Package TS thuần, không phụ thuộc runtime antdv.

API

import {
  lightTokens, darkTokens, tokensByMode,
  getAntdTheme, antdThemeLight, antdThemeDark,
  cssVars, cssVarsText,
  type ThemeMode, type TascoTokens,
} from '@tasco/theme'

Áp theme

Layer tự bọc <a-config-provider> với token + algorithm và inject CSS vars --tasco-*. Đổi chế độ mặc định qua app.config.ts:

export default defineAppConfig({
  tasco: { themeMode: 'dark' },
})

Dùng CSS variables

.box { color: var(--tasco-color-primary); border-radius: var(--tasco-radius); }

Font chữ (Quicksand + Montserrat)

Layer tích hợp sẵn @nuxt/fonts — tự self-host (tải về, phục vụ qua /_fonts/, không gọi runtime tới Google):

• Quicksand → chữ thân (--tasco-font-family), weight 300–700.
• Montserrat → tiêu đề (--tasco-font-family-heading), weight 400–700.

Cấu hình ở @tasco/nuxt-layer-base/nuxt.config.ts (fonts.families + experimental.processCSSVariables); tên font khai báo tĩnh trong @tasco/theme/base.css để module dò & tải được (font-family thực dùng qua biến --tasco-*).

Đổi font: sửa fontStack/fontHeadingStack trong packages/theme/src/tokens.ts và danh sách fonts.families trong layer (dự án có thể override fonts trong nuxt.config.ts của mình).

Lần build đầu cần mạng để tải font (sau đó cache trong node_modules/.cache).

Mật độ component (padding / height / margin)

⚠️ ant-design-vue 4.x bỏ qua theme.components — không chỉnh được padding/height/margin component theo kiểu antd v5. Framework giải quyết bằng 2 tầng, đều lấy giá trị từ density trong tokens.ts (sửa một chỗ):

• Height (Input/Select/Button/Picker) → qua global token controlHeight/SM/LG (antd áp được qua thuật toán).
• Padding/margin (Card, Form item, Table cell, Modal/Drawer) → qua global CSS trong @tasco/theme/base.css, đọc biến --tasco-* (Card --tasco-card-padding-*, Form --tasco-form-item-margin, Table --tasco-table-cell-padding-*, Modal --tasco-modal-body-padding).

// packages/theme/src/tokens.ts — chỉnh density, lan toả mọi app
const density: DensityTokens = {
  controlHeightSM: 28, controlHeight: 36, controlHeightLG: 44,
  cardPaddingBlock: 12, cardPaddingInline: 16,
  formItemMarginBottom: 16,
  tableCellPaddingBlock: 8, tableCellPaddingInline: 8,
  modalBodyPadding: 16,
}

Cần chỉnh component antd khác (chưa có trong base.css)? Thêm rule global vào base.css nhắm selector .ant-* tương ứng (dùng !important vì cssinjs của antd có sẵn), bám biến --tasco-*. Dự án cũng có thể tự thêm CSS override trong app.

Tuỳ biến brand

Token nằm ở packages/theme/src/tokens.ts — đổi một chỗ, lan toả mọi app. Thay mã màu placeholder bằng brand guideline chính thức của tập đoàn.