● กำลังพัฒนา
CSS Variable Toolkit
npm package สำหรับ CSS custom properties — ชุด design tokens, utility mixins, และ dark mode theme generator พร้อมใช้ใน Astro, Next.js, และ Vanilla CSS
สารบัญ
ทำไมถึงสร้าง
ทุก project ที่เริ่มใหม่ต้องเขียน CSS custom properties เดิมซ้ำๆ — spacing scale, color palette, typography, dark mode. เลยรวบรวมไว้เป็น package ที่ import ได้ทันที
Features
- Design Tokens: spacing (4px base), type scale, radius, shadow
- Dark Mode:
[data-theme='dark']attribute-based system พร้อม anti-FOUC script - Color Palettes: Slate, Blue, Green, Amber ที่ผ่าน WCAG AA contrast
- CSS Layers: จัด
@layer tokens, base, components, utilitiesให้พร้อม - Zero Runtime: เป็นแค่ CSS ไม่มี JavaScript dependency
โครงสร้าง Package
css-variable-toolkit/
├── src/
│ ├── tokens/
│ │ ├── spacing.css
│ │ ├── typography.css
│ │ ├── colors.css
│ │ └── radius.css
│ ├── themes/
│ │ ├── light.css
│ │ └── dark.css
│ └── index.css ← import ทั้งหมด
├── scripts/
│ └── generate-tokens.mjs
└── package.jsonการใช้งาน
/* import ทั้งหมด */
@import 'css-variable-toolkit';
/* หรือ import เฉพาะส่วน */
@import 'css-variable-toolkit/tokens/colors';
@import 'css-variable-toolkit/themes/dark';<!-- anti-FOUC script ใน <head> -->
<script>
const theme = localStorage.getItem('theme') ?? 'light';
document.documentElement.setAttribute('data-theme', theme);
</script>เทคนิคที่น่าสนใจ
- ใช้
@propertyสำหรับ variables ที่ต้องการ animate (เช่น color transition) - Generate tokens จาก JSON source of truth ด้วย
scripts/generate-tokens.mjs color-mix()สำหรับ color variants แทนการ hardcode ทุก shade