Skip to content

style-dictionary-basic

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

style-dictionary-basic

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
build-tokens.mjs
build-tokens.mjs
 
 
index.html
index.html
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
vite.config.ts
vite.config.ts
 
 

README.md

Style Dictionary Font Example

Demonstrates @gamesome/style-dictionary-font with three variable fonts defined as design tokens:

  • Rubik Variable (sans-serif) — applied to html
  • Sora Variable (sans-serif) — applied to .font-sora
  • Lora Variable (serif) — applied to .font-lora

Uses Style Dictionary v4 to generate @font-face CSS from token definitions in src/tokens/fonts.json. The React + Vite app lets you switch between fonts and see the same comparison showcase as the Astro example.

Running

pnpm install
pnpm dev

This runs build-tokens.mjs (generating CSS with font-face declarations) then starts the Vite dev server.