@tinypop/tokens
v0.1.8
Published
Design tokens (CSS variables) for Tinypop — theme-agnostic, reusable across React, Angular, etc.
Downloads
507
Maintainers
dadoo555Readme
@tinypop/tokens
Design tokens (CSS custom properties) for the Tinypop design system. Framework-agnostic: use with React, Angular, or plain HTML/CSS.
Installation (npm)
npm install @tinypop/tokensUsage
Import the tokens once in your app (e.g. in your root CSS or main entry):
In CSS:
@import '@tinypop/tokens';In JS/TS (e.g.
main.tsxorApp.tsx):import '@tinypop/tokens';Set the theme on a root element:
data-theme="light"ordata-theme="dark"(e.g.<html data-theme="dark">).
Color system
All color variables live in a single document (colors.css) for both light and dark. You can override any variable in your app to customize themes.
10 color models
Each theme defines 10 color models, each with 10 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900). Shade 500 is the base.
| Model | Use case | | -------- | ------------------ | | primary | Main brand/CTA | | secondary| Secondary actions | | accent | Highlights | | success | Positive states | | warning | Caution | | error | Errors/danger | | info | Informational | | neutral | Grays | | surface | Backgrounds | | muted | Muted text |
Variables: --tinypop-color-{model}-{shade} and --tinypop-color-{model}-{shade}-rgb
Example: --tinypop-color-primary-500, --tinypop-color-primary-500-rgb
10 opacity levels
Use with any -rgb variable for transparency:
--tinypop-opacity-10…--tinypop-opacity-100(0.1 … 1)
background-color: rgba(var(--tinypop-color-primary-500-rgb), var(--tinypop-opacity-50));Adding new color models
Copy an existing model block in colors.css (e.g. primary), rename it (e.g. brand), and set your values for [data-theme='light'] and [data-theme='dark']. Use the same pattern: 10 shades with -rgb for each.
Components use the scale variables directly (e.g. --tinypop-color-primary-500, --tinypop-color-neutral-900). Use [data-theme='light'] / [data-theme='dark'] in your CSS when the semantic role (e.g. “text on primary”) maps to different shades per theme.
Other tokens
--tinypop-radius,--tinypop-shadow(defined per theme incolors.css)