@dsappz/tokens

Design token contract and Tailwind v4 base for dsappz themes.

Install

pnpm add @dsappz/tokens

Usage

CSS import (must come before any theme preset):

@import "@dsappz/tokens/base.css";
@import "@dsappz/theme-minimalistic/theme.css"; /* your chosen theme */

Token Reference

Surface

| Token | Tailwind Utility | Purpose | |---|---|---| | --background | bg-background | Page/surface background | | --foreground | text-foreground | Default text color | | --card | bg-card | Card surface background | | --card-foreground | text-card-foreground | Card text color | | --popover | bg-popover | Popover/dropdown background | | --popover-foreground | text-popover-foreground | Popover text color |

Brand

| Token | Tailwind Utility | Purpose | |---|---|---| | --primary | bg-primary / text-primary | Primary brand color | | --primary-foreground | text-primary-foreground | Text on primary surfaces | | --secondary | bg-secondary | Secondary brand color | | --secondary-foreground | text-secondary-foreground | Text on secondary surfaces | | --accent | bg-accent | Accent/highlight color | | --accent-foreground | text-accent-foreground | Text on accent surfaces |

Semantic

| Token | Tailwind Utility | Purpose | |---|---|---| | --muted | bg-muted | Muted/subdued surface | | --muted-foreground | text-muted-foreground | Muted text color | | --destructive | bg-destructive | Destructive/danger color | | --destructive-foreground | text-destructive-foreground | Text on destructive surfaces | | --success | bg-success | Success state color | | --success-foreground | text-success-foreground | Text on success surfaces | | --warning | bg-warning | Warning state color | | --warning-foreground | text-warning-foreground | Text on warning surfaces | | --info | bg-info | Informational state color | | --info-foreground | text-info-foreground | Text on info surfaces |

Chrome

| Token | Tailwind Utility | Purpose | |---|---|---| | --border | border-border | Default border color | | --input | border-input | Input field border color | | --ring | ring-ring / outline-ring | Focus ring / outline color |

Radius

| Token | Tailwind Utility | Purpose | |---|---|---| | --radius-xs | rounded-xs | Extra-small border radius | | --radius-sm | rounded-sm | Small border radius | | --radius-md | rounded-md | Medium border radius | | --radius-lg | rounded-lg | Large border radius |

Typography

| Token | Tailwind Utility | Purpose | |---|---|---| | --font-sans | — | Sans-serif font family (used via font-family CSS) | | --font-mono | — | Monospace font family (used via font-family CSS) | | --font-display | — | Display/heading font family (used via font-family CSS) |

Animation

| Token | Tailwind Utility | Purpose | |---|---|---| | --duration-fast | duration-fast | Fast transition duration | | --duration-normal | duration-normal | Normal transition duration | | --duration-slow | duration-slow | Slow transition duration | | --ease-default | ease-default | Default easing function |

TypeScript

import type { RequiredCssVariable } from "@dsappz/tokens"
// Use this type to validate your theme defines all required tokens

© 2026 dsappz · github.com/dsappz/dsappz-design · Proprietary