CSS / Design Tokens / Theming

CSS Custom Properties

Design tokens (primitive/semantic/component), @property animacje, dark mode theming, fluid tokens z clamp() i zaawansowane wzorce CSS Variables.

Design System

Tokens

@property

Animacje

Dark Mode

Theming

clamp()

Fluid

6 wzorców CSS Custom Properties

Primitive tokens, semantic tokens, dark mode, @property, fluid tokens i component scoping — opis i korzyść.

Wzorzec	Opis	Korzyść
Primitive Tokens	--blue-500: #3b82f6 (surowe wartości)	Single source of truth dla kolorów
Semantic Tokens	--color-action: var(--blue-500)	Znaczenie zamiast wartości — łatwa zmiana
Dark Mode	@media prefers-color-scheme + data-theme	Jeden CSS, wiele motywów bez rebuild
@property	syntax: 'color' \| 'angle' \| 'number'	Animacje custom properties, counter CSS
Fluid Tokens	clamp(min, preferred, max) z viewport	Responsive bez media queries
Component Scoping	.card { --card-bg: white } lokalnie	Izolacja komponentów, override per instancja

Często zadawane pytania

CSS Custom Properties — zmienne CSS i kaskada?

CSS Custom Properties (CSS Variables): --nazwa: wartość. Deklaracja: :root { --color-primary: #3b82f6. --spacing-base: 1rem. --font-heading: 'Inter', sans-serif }. Użycie: color: var(--color-primary). padding: var(--spacing-base). Fallback: var(--color-primary, blue) — jeśli nie zdefiniowana. Kaskada: zmienne dziedziczone. Dzieci dziedziczą od rodziców. Lokalny override: .button { --color-primary: red } — nadpisuje lokalnie. Scoped variables: .card { --card-bg: white. --card-shadow: 0 1px 3px rgba(0,0,0,0.1) }. Tylko w scopie .card i potomkach. Dynamiczna zmiana: element.style.setProperty('--color-primary', '#ff0000'). JavaScript pełna kontrola. Bez reflow dla layout properties. Reaktywność: nie trzeba klas — zmieniaj wartość zmiennej. Cały motyw z jednej zmiany. Animacja wartości: @property --rotation { syntax: 'angle'. inherits: false. initial-value: 0deg }. Animuj --rotation. Nie działa bez @property dla liczb. Calc z variables: calc(var(--spacing-base) * 2). calc(100% - var(--sidebar-width)). Matematyka CSS. Pseudo-elementy: --wartość propaguje się do ::before, ::after. Media queries: @media (prefers-color-scheme: dark) { :root { --bg: #111. --text: #eee } }. Nie można używać w media query warunku (tylko wartości). Container queries: @container (min-width: 600px) { .card { --cols: 3 } }.

Design Tokens — system projektowania z CSS Variables?

Design Tokens: atomowe wartości systemu projektowania. Kolory, typography, spacing, shadows, radii. Struktura tokenów: Primitive tokens: --blue-500: #3b82f6 (surowe wartości). Semantic tokens: --color-action: var(--blue-500) (znaczenie). Component tokens: --button-bg: var(--color-action) (komponent). Przykład systemu: :root { --color-brand: oklch(0.6 0.24 255). --color-surface: oklch(0.98 0 0). --color-text: oklch(0.15 0 0). --space-1: 0.25rem. --space-2: 0.5rem. --space-4: 1rem. --space-8: 2rem. --radius-sm: 0.25rem. --radius-md: 0.5rem. --radius-lg: 1rem. --shadow-sm: 0 1px 2px rgba(0,0,0,0.05). --font-size-sm: 0.875rem. --font-size-base: 1rem. --font-size-lg: 1.125rem }. Style Dictionary: npm tool. JSON tokens -> CSS/JS/iOS/Android. transforms: kolory do hex/rgb. formats: :root {} CSS output. Multi-platform z jednego źródła. Figma integration: Tokens Studio plugin. Sync Figma vars -> code. Single source of truth. Naming conventions: kebab-case. Kategoria-podkategoria-modyfikator. --color-text-secondary. --space-component-gap. Fluid tokens: --font-size-fluid: clamp(1rem, 2.5vw, 1.5rem). --space-fluid: clamp(1rem, 5vw, 3rem). Responsive bez media queries. Dark mode tokens: [data-theme='dark'] { --color-surface: oklch(0.1 0 0). --color-text: oklch(0.95 0 0) }.

Theming z CSS Custom Properties — dark mode i multi-theme?

Dark mode z CSS Variables: prefers-color-scheme media query. lub class .dark na html/body. Przykład: :root { --bg: #ffffff. --text: #111111. --border: #e5e7eb }. @media (prefers-color-scheme: dark) { :root { --bg: #0f172a. --text: #f1f5f9. --border: #334155 } }. .dark klasa: html.dark { --bg: #0f172a. --text: #f1f5f9 }. JavaScript toggle: document.documentElement.classList.toggle('dark'). localStorage persist. System preference check. Multi-theme system: [data-theme='ocean'] { --primary: #0ea5e9. --accent: #06b6d4 }. [data-theme='forest'] { --primary: #16a34a. --accent: #15803d }. [data-theme='sunset'] { --primary: #f97316. --accent: #ea580c }. Zmiana: document.documentElement.setAttribute('data-theme', 'ocean'). Bez CSS-in-JS. Bez rebuild. React Context + CSS vars: ThemeContext z aktualnym motywem. useEffect -> setAttribute na document.documentElement. Komponenty nie wiedzą o temacie (CSS to obsłuży). Wysokowydajny: bez re-renderu komponentów. CSS robi całą robotę. Gradient themes: --gradient: linear-gradient(var(--gradient-from), var(--gradient-to)). Zmieniaj --gradient-from i --gradient-to. Brand themes per tenant: SaaS multi-tenant. Każdy tenant ma własny --primary. Wczytaj z API. inject do :root. Brak rebuild. Animowany przełącznik motywu: transition: background-color 0.3s, color 0.3s na body. Płynna zmiana. view-transition API (nowe). @starting-style dla animacji.

@property — rejestrowanie właściwości CSS i animacje?

@property: CSS Houdini. Rejestracja custom property. Typy i animacje. Składnia: @property --rotation { syntax: 'angle'. inherits: false. initial-value: 0deg }. @property --progress { syntax: 'percentage'. inherits: false. initial-value: 0% }. @property --color { syntax: 'color'. inherits: true. initial-value: #000 }. Typy: angle, color, custom-ident, image, integer, length, length-percentage, number, percentage, resolution, time, transform-list, transform-function, url. Animacja liczb: bez @property: --value: 0 - nie animuje. z @property --value {syntax: 'number'} - animuje! Przykład animacji gradientu: @property --hue { syntax: 'number'. inherits: false. initial-value: 0 }. background: hsl(var(--hue) 70% 60%). @keyframes spin-hue { to { --hue: 360 } }. animation: spin-hue 3s linear infinite. Animacja border-radius: @property --radius { syntax: 'length'. inherits: false. initial-value: 0px }. Animuj --radius zamiast border-radius. Smooth. Counter progress: @property --p { syntax: 'integer'. inherits: false. initial-value: 0 }. counter-reset: progress var(--p). content: counter(progress) '%'. Animowany licznik CSS only! CSS.registerProperty (JavaScript): CSS.registerProperty({name: '--highlight', syntax: 'color', inherits: false, initialValue: 'transparent'}). Programmatic registration. Wsparcie przeglądarek: Chrome 85+, Firefox 128+, Safari 16.4+. Prawie powszechne (2024). Polyfill: css-paint-polyfill (częściowy).

CSS Custom Properties — zaawansowane wzorce i TypeScript?

CSS Variables w TypeScript: getComputedStyle(el).getPropertyValue('--color-primary').trim(). el.style.setProperty('--color', value). el.style.removeProperty('--color'). Typed CSS Variables: type CSSVarName = '--color-primary' | '--spacing-base' | '--font-size'. function setCSSVar(name: CSSVarName, value: string) { document.documentElement.style.setProperty(name, value) }. CSS Modules + Variables: .button { background: var(--button-bg, var(--color-primary)). color: var(--button-text, white) }. Lokalne overrides w module. Responsive design patterns: Fluid spacing: --space: clamp(1rem, 2vw + 0.5rem, 2rem). Fluid typography: --font-size: clamp(1rem, 2.5vw, 1.25rem). Font size scale: --scale: 1.25. --fs-sm: calc(1rem / var(--scale)). --fs-md: 1rem. --fs-lg: calc(1rem * var(--scale)). --fs-xl: calc(1rem * var(--scale) * var(--scale)). Math w CSS: Złożone: calc(var(--cols, 3) * var(--col-width) + var(--gap) * (var(--cols, 3) - 1)). min(), max(), clamp() z variables. Staggered animations: .item { animation-delay: calc(var(--i) * 100ms) }. style='--i: 1' w HTML. Lub JavaScript: items.forEach((el, i) => el.style.setProperty('--i', i)). Scroll-driven: @scroll-timeline z variables. animation-timeline: scroll(). --scroll-progress: animowany. CSS Custom Properties vs preprocessor vars: Sass $var: compile-time, nie dynamiczne. CSS var: runtime, dziedziczone, animowalne. Użyj obu: Sass dla static, CSS vars dla dynamic. Debugging: Chrome DevTools Styles panel. Computed wartości widoczne. Overrides widoczne.

Czytaj dalej