Design system
The accessible component library, rendered live from @foo/ui. Everything below reads from the same design tokens, so it re-themes (light, dark, enterprise brand) from the switcher in the header. Storybook holds the full per-component documentation, controls, and the accessibility pass.
@foo/ui is a dummy design system built for this showcase — the foo placeholder names a real, original library written here, not a published package you can install.
Design tokens
Every component below is built on a layer that the catalogue itself never shows: the tokens. A token is a named, themeable primitive — a colour, a spacing step, a point on the type scale, a corner radius, a motion duration — given a stable name so nothing downstream hard-codes a raw value. @foo/tokens defines them as CSS custom properties, in two layers: primitives carry the raw values (--foo-bay-500: #2f7188), and semantics carry the meaning a component actually asks for (--foo-color-brand: var(--foo-bay-500)). No component learns a single hex; it reads var(--foo-color-brand) and is done.
That indirection is the whole payoff. Switch the theme in the header — light, dark, enterprise brand — and not one component re-renders differently because it was rewritten. The token values change underneath them. The brand theme leads with terracotta instead of bay teal and nudges its corner radii down, and the components inherit all of it for free, because they only ever knew the semantic name. Re-theming is a primitive swap, not a component fork.
View source
Two files, one layer. theme.scss is the single import an app loads; _tokens.scss is the default light theme — the primitives up top, the semantic names components consume below. Dark and brand are the same shape with different values.
/*
* The one stylesheet an app or Storybook loads to get the whole system: reset, base
* tokens, and the theme overrides. Switch themes by setting `data-theme` on <html>.
*
* // project.json styles[] or angular.json:
* "packages/tokens/src/styles/theme.scss"
*/
@use 'reset';
@use 'tokens';
@use 'dark';
@use 'brand';
Components
The live catalogue starts here — every control reads the tokens above. Storybook holds the full per-component documentation, controls, and the accessibility pass.
Open the component catalogue in StorybookStat / KPI cards
A raised foo-card per metric — a label, the figure (the [fooAmount] directive and the number/percent pipes format each), and a trend foo-badge. The figures are synthetic and deterministic, from the seeded generator.
Buttons
Badges & status
Alerts
Form controls
Overlays & navigation
Tabs implement the WAI-ARIA pattern — arrow keys move between tabs and focus follows.
Each panel is a real role="tabpanel", shown only when its tab is active.
Selection lives in a two-way selectedIndex model.
19 components and directives, ~100% line/branch unit-test coverage, and an automated accessibility pass in Storybook — browse the full catalogue at storybook.miguelcarino.com.