Skip to content

DESIGN.md

Latest commit

 

History

History
91 lines (65 loc) · 3.12 KB

DESIGN.md

File metadata and controls

91 lines (65 loc) · 3.12 KB
version alpha
name Anta
description Antithesis Design System — portable UI components with a component-token-first architecture
colors
typography
spacing
rounded
components
progress-track progress-track-dark progress-indicator progress-indicator-dark progress-indicator-info progress-indicator-info-dark progress-label progress-info progress-info-dark
backgroundColor padding minHeight
hsla(300, 10%, 96%, 1)
4px 8px
8px
backgroundColor
hsla(278, 8%, 9%, 1)
backgroundColor
hsla(300, 7%, 92%, 1)
backgroundColor
hsla(278, 8%, 15%, 1)
backgroundColor
#DBEDFA
backgroundColor
#05253F
fontSize lineHeight letterSpacing
13px
16px
0.03em
backgroundColor
#E7F4FF
backgroundColor
#021A2D

Overview

Anta is a portable UI component library built on a two-tier architecture: web components (elements/) provide the rendering layer via shadow DOM, and JSX wrappers (components/) provide a typed component API. The tiers are decoupled — wrappers emit custom element tags but never import element definitions.

Anta follows a component-token-first philosophy. Each component defines its own CSS custom properties (e.g., --progress-indicator-bg) rather than depending on a global token system. Global tokens will be introduced later for cross-component consistency, but component tokens remain the primary styling mechanism.

Components

Progress

A progress indicator for displaying task completion.

Anatomy:

  • Track (a-progress) — The outer container/background bar
  • Indicator (shadow DOM) — The filled portion, width driven by --_percent
  • Label (a-progress-label) — Optional: contains number, text, and hint
    • Number (a-progress-number) — Percentage display
    • Text (a-progress-text) — Descriptive label
    • Hint (a-progress-hint) — Right-aligned secondary info

Props (JSX wrapper):

  • value: number — Current progress value (required)
  • max?: number — Maximum value, default 100
  • tone?: 'info' — Color variant
  • label?: string — Text label
  • hint?: string — Hint text

Variants:

  • Default — neutral gray track and indicator
  • tone="info" — blue tinted track and indicator

Dark mode: Activated by .dark ancestor class on any parent element. All variants have dark mode counterparts.

Component tokens (CSS custom properties):

  • --progress-indicator-bg — Indicator bar fill color
  • --progress-indicator-edge — Gradient fade at the indicator's leading edge
  • --progress-label-color — Color for the percentage number

Do's and Don'ts

  • DO use the JSX <Progress> wrapper for React/Preact apps — it handles percentage calculation and label layout
  • DO import anta/elements to register the <a-progress> custom element before it appears in the DOM
  • DO use the tone prop for semantic coloring — don't set indicator colors directly
  • DON'T import element definitions from JSX wrapper files — binding is by tag name at runtime
  • DON'T set --_percent from outside the component — it is shadow-internal