Style Dictionary

Style Dictionary to build system dla design tokenów. Definiujesz wartości (kolory, typografię, odstępy) raz, w plikach JSON/JSON5, a narzędzie generuje z nich pliki dla wielu platform: CSS variables, SCSS, stałe iOS/Android, JS/TS i inne. To fundament „design-as-code” — jedno źródło prawdy zasila kod, stronę i materiały marki.

Kiedy używać

• Utrzymujesz spójny system kolorów/typografii w wielu produktach i platformach.
• Chcesz, by zmiana tokenu propagowała się automatycznie do całego kodu.
• Budujesz własny design system (np. dla eiac.dev).

Przykład użycia

// tokens/color.json
{ "color": { "rust": { "value": "#A8482A" } } }

// config.js — eksport do CSS variables
export default {
  source: ["tokens/**/*.json"],
  platforms: {
    css: { transformGroup: "css", files: [{ destination: "tokens.css", format: "css/variables" }] }
  }
};

npx style-dictionary build   # → tokens.css z :root { --color-rust: #A8482A; }

Warto wiedzieć

• Wspiera własne transformy i formaty — dopasujesz output do swojego stacku.
• Świetnie współgra z narzędziami projektowymi eksportującymi tokeny (np. Penpot).