Brand Guidelines

Semantic Tokens

Deep dive în sistemul de tokens semantic - primitive vs semantic

Primitive vs Semantic Tokens

Primitive Tokens

Primitive tokens sunt valori brute (ex: #1F7A45, 16px, 12px). Sunt specifice și nu au semnificație semantică.

--color-green-600: #1F7A45;

Semantic Tokens

Semantic tokens au semnificație (ex: primary, background, card). Schimbă valoarea în funcție de temă, dar numele rămâne același.

--color-primary: var(--color-green-600); // Light mode
--color-primary: var(--color-emerald-400); // Dark mode

Token Comparison

Semantic Token	Light Mode	Dark Mode
background	#FDFCF9	#02110E
primary	#1F7A45	#3BD58A
card	#FFFFFF	#10251F

Why Semantic Tokens?

•Theme switching: schimbă doar valoarea, nu numele token-ului
•Consistency: același token în toate componentele
•Maintainability: schimbă o valoare, actualizează tot sistemul
•Accessibility: tokens semantic pot fi adaptați pentru contrast

How Marketplace Consumes Tokens

// Import tokens
import { colors } from '@brand/tokens'

// Use in component
const Button = () => (
  <button 
    style={{ 
      backgroundColor: colors.light.primary 
    }}
  >
    Click me
  </button>
)