Design tokens

Theming

Override any token on :root to retheme the entire library:

:root {
  --color-primary-600: #2563eb;
  --font-family-sans: 'Inter', sans-serif;
  --radius-md: 0.5rem;
}

Or scope overrides to individual components where useful:

.my-card {
  --ea-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --ea-button-font-weight: 600;
}

Brand palette

Pass a single brand hex to provideEagamiUi and the library derives a full ten-shade scale (50 through 900) in OKLCH space, holding hue and chroma steady while stepping lightness. The derived shades feed every --color-brand-* token in both light and dark mode:

bootstrapApplication(AppComponent, {
  providers: [
    provideEagamiUi({
      palette: {
        primary: { base: '#2563eb' },
        secondary: { base: '#f97316' },
      },
    }),
  ],
});

Pin specific shades or remap which derived shade backs each semantic role:

provideEagamiUi({
  palette: {
    primary: {
      base: '#2563eb',
      overrides: { '500': '#3b82f6' },
      roles: { surfaceLight: '700' },
    },
  },
});

Every brand-role pairing (text on surface, surface on canvas) is checked against WCAG 2.1 AA at bootstrap. A failing combination throws before the app loads, so a contrast bug in the brand colour is caught at boot rather than in production.

Colors

Primary

Secondary

Neutral

Status

success

warning

error

info

Semantic

• --color-text-primary
• --color-text-secondary
• --color-text-tertiary
• --color-text-disabled
• --color-text-inverse
• --color-text-link
• --color-text-link-hover

• --color-bg-canvas
• --color-bg-base
• --color-bg-subtle
• --color-bg-stripe
• --color-bg-stripe-subtle
• --color-bg-muted
• --color-bg-emphasis
• --color-bg-elevated
• --color-bg-overlay

• --color-state-hover
• --color-state-active

• --color-border-subtle
• --color-border-default
• --color-border-strong
• --color-divider
• --color-border-focus

• --color-brand-default
• --color-brand-hover
• --color-brand-active
• --color-brand-text
• --color-brand-subtle
• --color-brand-muted

Typography

Families

• The quick brown fox jumps over the lazy dog --font-family-sans
• eagami --font-family-brand
• const greet = "hello, eagami"; --font-family-mono

Sizes

• Aa--font-size-2xs
• Aa--font-size-xs
• Aa--font-size-sm
• Aa--font-size-md
• Aa--font-size-lg
• Aa--font-size-xl
• Aa--font-size-2xl
• Aa--font-size-3xl
• Aa--font-size-4xl
• Aa--font-size-5xl

Weights

• Regular --font-weight-regular400
• Medium --font-weight-medium500
• Semibold --font-weight-semibold600
• Bold --font-weight-bold700
• Extrabold --font-weight-extrabold800

Composite styles

Composite tokens bundle a size, weight, line-height (and sometimes family) for a specific role. --text-section-heading-* is the first composite that pins a font-family — use it for the <h2> subsection title on docs and marketing pages.

• Brand voice section heading--text-section-heading-*

Spacing

• --space-0
• --space-0-5
• --space-1
• --space-1-5
• --space-2
• --space-2-5
• --space-3
• --space-3-5
• --space-4
• --space-5
• --space-6
• --space-7
• --space-8
• --space-9
• --space-10
• --space-11
• --space-12
• --space-14
• --space-16
• --space-20
• --space-24
• --space-32

Elevation

Drop shadows

Bevel and well

--shadow-bevel pairs an inset highlight (top) with an inset shadow (bottom) for surfaces that should read as raised. --shadow-well inverts the lighting for a recessed look. Combine with --shadow-* for an ambient drop: box-shadow: var(--shadow-bevel), var(--shadow-sm);

Shape

Motion