@themeDesign tokenArbitrary vs token

Variabel & @theme

Design token CSS-first: warna, font, dan shadow kustom via @theme — fondasi design system situs ini.

Token reusable dengan @theme

Nilai yang dipakai lintas halaman layak menjadi token. Mendefinisikan --color-neo-yellow di @theme otomatis memunculkan seluruh utility: bg-neo-yellow, text-neo-yellow, border-neo-yellow, dst. Situs ini hidup dari token berikut.

Token reusable dengan @theme live

yellow

coral

cyan

green

css

@theme {
	--color-neo-yellow: #ffe600;
	--color-neo-coral: #ff6b6b;
	--color-neo-cyan: #70d6ff;
	--color-neo-green: #7ae582;

	--font-heading: 'Sora Variable', sans-serif;

	--shadow-neo: 4px 4px 0 0 var(--neo-line);
}

Decision Rule

Reusable design token → @theme. One-off value → arbitrary seperti w-[37px].