mirror of
https://github.com/vercel/components.build.git
synced 2026-09-14 20:06:39 +08:00
Hayden Bleasel
55fae375a4
* Update Geistdocs * Update geistdocs.tsx * Run translation script * Delete toc.tsx * Update route.ts * Update route.ts
51 lines
2.3 KiB
Plaintext
51 lines
2.3 KiB
Plaintext
---
|
|
title: Design tokenek
|
|
description: Hogyan teremtenek a szemantikus elnevezési konvenciók és a design tokenek egy rugalmas, könnyen karbantartható témarendszert.
|
|
---
|
|
|
|
A modern komponenskönyvtárak egyik alapvető pillére a stíluskezelésük átgondolt megközelítése. Ahelyett, hogy színeket keményen kódolnánk vagy merev osztályrendszereket hoznánk létre, alkalmazhatunk egy szemantikus elnevezési konvenciót, amely elkülöníti a téma, a kontextus és a használat szempontjait.
|
|
|
|
Ezt a szemantikus elnevezési konvenciót design tokeneknek nevezzük. Ez az architekturális döntés karbantartható, rugalmas rendszert hoz létre, amely jól skálázódik az alkalmazások között.
|
|
|
|
## A szemantikus CSS-változók filozófiája
|
|
|
|
A hagyományos CSS-megközelítések gyakran közvetlenül a használati kontextusokhoz kötik a színértékeket, ami törékeny, nehezen karbantartható rendszereket eredményez. A design tokenek másképp közelítik meg a problémát: absztrakciós rétegeket hoznak létre, amelyek elválasztják azt, hogy mi valami, attól, hogy hogyan néz ki.
|
|
|
|
## A változóarchitektúra megértése
|
|
|
|
Nézzük meg, hogyan strukturálhatjuk a CSS-változóinkat ennek a rugalmas rendszernek a létrehozásához:
|
|
|
|
```css title="globals.css"
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
}
|
|
|
|
:root {
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.922 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
}
|
|
```
|
|
|
|
A fenti példában négy design tokenünk van:
|
|
|
|
- `--background`, amelyet háttérszínekhez használnak (elsősorban az oldal hátteréhez)
|
|
- `--foreground`, amelyet előtérszínekhez használnak (általános szövegszínként)
|
|
- `--primary`, amelyet elsődleges színekhez használnak (a márka fő színe)
|
|
- `--primary-foreground`, amelyet elsődleges előtérszínekhez használnak (a szöveg színe, amikor a fő szín hátterében jelenik meg) |