style-dictionary
Version:
Style once, use everywhere. A build system for creating cross-platform styles.
28 lines (27 loc) • 1.04 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
Run `npm run build-tokens` to generate build/preset.js.
Then run `npm run build-css` to generate `output.css`.
-->
<link href="./output.css" rel="stylesheet" />
</head>
<body>
<div class="h-screen w-full bg-sd-theme-secondary/10">
<div class="p-4 grid grid-cols-1 gap-4 text-5xl">
<span class="text-sd-theme-dark">Hello tokens</span>
<span class="text-sd-theme-dark/50">Hello tokens</span>
<span class="text-sd-theme-dark/30">Hello tokens</span>
<span class="text-sd-theme-dark/20">Hello tokens</span>
<span class="text-sd-theme-secondary-dark">Hello tokens</span>
<span class="text-sd-theme-secondary-dark/50">Hello tokens</span>
<span class="text-sd-theme-secondary-dark/30">Hello tokens</span>
<span class="text-sd-theme-secondary-dark/20">Hello tokens</span>
<span class="text-sd-text-neutral">Hello tokens</span>
</div>
</div>
</body>
</html>