@chirag127/md3-tokens

Material Design 3 CSS custom properties — dark-first theme. Purple seed, MD3 baseline.

Install

npm i @chirag127/md3-tokens

Usage

Bundler (Vite, webpack, Astro)

import '@chirag127/md3-tokens';

CSS @import

@import '@chirag127/md3-tokens';

HTML <link>

<link rel="stylesheet" href="node_modules/@chirag127/md3-tokens/src/index.css">

Token reference

Surface hierarchy

| Token | Value | |---|---| | --md-surface | #0F0D13 | | --md-surface-dim | #141218 | | --md-surface-bright | #3B383E | | --md-surface-container-lowest | #0F0D13 | | --md-surface-container-low | #1D1B20 | | --md-surface-container | #211F26 | | --md-surface-container-high | #2B2930 | | --md-surface-container-highest | #36343B |

Color roles

| Token | Value | |---|---| | --md-primary | #D0BCFF | | --md-on-primary | #381E72 | | --md-primary-container | #4F378B | | --md-on-primary-container | #EADDFF | | --md-secondary | #CCC2DC | | --md-on-secondary | #332D41 | | --md-secondary-container | #4A4458 | | --md-on-secondary-container | #E8DEF8 | | --md-tertiary | #EFB8C8 | | --md-on-tertiary | #492532 | | --md-tertiary-container | #633B48 | | --md-on-tertiary-container | #FFD8E4 | | --md-error | #F2B8B5 | | --md-on-error | #601410 | | --md-error-container | #8C1D18 | | --md-on-error-container | #F9DEDC | | --md-outline | #938F99 | | --md-outline-variant | #49454F | | --md-on-surface | #E6E1E5 | | --md-on-surface-variant | #CAC4D0 |

Shape

| Token | Value | |---|---| | --md-shape-xs | 4px | | --md-shape-sm | 8px | | --md-shape-md | 12px | | --md-shape-lg | 16px | | --md-shape-xl | 28px | | --md-shape-full | 9999px |

Spacing (4dp grid)

--md-space-1 (4px) through --md-space-16 (64px).

Typography

| Token | Value | |---|---| | --md-font-display | Google Sans Display, Google Sans, Roboto, sans-serif | | --md-font-body | Google Sans Text, Google Sans, Roboto, sans-serif | | --md-font-mono | Roboto Mono, JetBrains Mono, monospace |

Google Fonts are auto-loaded via @import in the CSS.

Backward-compat aliases

Legacy tokens (--bg, --surface, --elevated, --overlay, --border, --primary, --t-1 … --t-4, --indigo, --amber, --emerald, --font-display, --font-sans, --font-mono) map to MD3 equivalents.

Component utility classes

• Typography: .md-display-lg/md/sm, .md-headline-lg/md/sm, .md-title-lg/md/sm, .md-body-lg/md/sm, .md-label-lg/md/sm
• Cards: .md-card, .md-card-filled, .md-card-elevated, .md-card-outlined
• Chips: .md-chip, .md-chip.selected
• Badges: .md-badge, .md-badge-tonal, .md-badge-outline
• Buttons: .md-btn, .md-btn-filled, .md-btn-tonal, .md-btn-outlined, .md-btn-text
• Nav Rail: .md-nav-rail, .md-nav-item, .md-nav-pill
• Utilities: .md-divider, .md-state-hover

License

MIT