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.0 KiB
Plaintext
51 lines
2.0 KiB
Plaintext
---
|
|
title: Designtokener
|
|
description: Hvordan semantiske navnekonvensjoner og designtokener skaper et fleksibelt, vedlikeholdbart temasystem.
|
|
---
|
|
|
|
En av kjernefundamentene i moderne komponentbiblioteker ligger i deres gjennomtenkte tilnærming til stilsetting. I stedet for å hardkode farger eller lage rigide klassesystemer, kan vi bruke en semantisk navnekonvensjon som skiller tema, kontekst og bruk.
|
|
|
|
Denne semantiske navnekonvensjonen kalles designtokener. Denne arkitektoniske avgjørelsen skaper et vedlikeholdbart, fleksibelt system som skalerer godt på tvers av applikasjoner.
|
|
|
|
## Filosofien bak semantiske CSS-variabler
|
|
|
|
Tradisjonelle CSS-tilnærminger kobler ofte fargeverdier direkte til bruksområder, noe som skaper skjøre systemer som er vanskelige å vedlikeholde. Designtokener tar en annen tilnærming ved å lage abstraksjonslag som skiller hva noe er fra hvordan det ser ut.
|
|
|
|
## Forstå variabelarkitekturen
|
|
|
|
La oss se på hvordan vi kan strukturere CSS-variablene våre for å lage dette fleksible systemet:
|
|
|
|
```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);
|
|
}
|
|
```
|
|
|
|
I eksemplet ovenfor har vi fire designtokener:
|
|
|
|
- `--background`, som brukes til bakgrunnsfarger (primært bakgrunnen på siden)
|
|
- `--foreground`, som brukes til forgrunnsfarger (generell tekstfarge)
|
|
- `--primary`, som brukes til primærfarger (hovedfargen til merkevaren)
|
|
- `--primary-foreground`, som brukes til primær forgrunnsfarger (tekstfargen, sett mot primærfargen) |