Design Token System in Lit

Define tokens in TypeScript, then compose shared CSS blocks across components.

Token Groups

• Typography: families, sizes, weights, line heights.
• Colors: neutral palette + accent colors.
• Spacing, Borders, Shadows, Animations, Mixins.
• Patterns: reusable background textures.

Shared Style Composition

Keep reusable Lit CSS in shared-styles.ts.

static styles = [baseStyles, buttonStyles, badgeStyles, css`/* page styles */`];

Practical Guidance

• Use one :host baseline for page components.
• Override :host in embedded components to avoid layout side-effects.
• Centralize button/badge states so status UI stays consistent.