Foundations and Tokens

The application, documentation and Storybook share one foundation registry: tokens/foundations.json. It contains 357 tokens in 12 families and 12 responsive thresholds.

Browse tokens · Try the playground

Token families

Where values live

Every source path below belongs to app.abhyas.design. This documentation is authored in app.abhyas.context, which consumes only compiled assets from the pinned design build.

• tokens/foundations.json: edit foundation values and semantic aliases here.
• styles/tokens.css: generated CSS variables used by the application package.
• styles/documentation.css: documentation theme source, also owned by design. The context build receives compiled style.css and tokens.css.
• src/foundations.js: generated JavaScript breakpoint and media exports.

The documentation preserves its light and dark themes through named documentation color tokens. The shared application styles continue to import Primer's token families, including its radius definitions.

Using tokens

.card {
  padding: var(--space-16);
  gap: var(--space-12);
  border: var(--border-default);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-ui);
}

Import the package's styles.css once. The registry is available through @nishkodotco/abhyas-design-system/tokens.json; JavaScript consumers can import breakpoints and media from the main package entry.

Responsive design

Native CSS variables cannot be used in media conditions. Annotated thresholds are generated from the registry into ordinary CSS queries. The drawer's JavaScript uses media.drawer from the same source. Change the named registry value, then regenerate; do not change numeric media conditions directly.

Changing a foundation

1. Edit a value or alias in tokens/foundations.json.
2. Run npm run tokens:build.
3. Run npm test and npm run check.
4. Review affected app pages, documentation themes and Foundation stories.
5. Commit the registry and generated files together. After the design deployment, update design.lock.json in context with npm run design:update. Context publishes documentation at / and the compiled Storybook at /storybook/.

Validation catches stale output, broken or circular aliases, unknown CSS references, raw design lengths in shared styles and inline React styles, and unregistered responsive thresholds.

Compatibility and boundaries

Existing color names, --s1 through --s6, font families, drawer and tab variables remain available. Exact existing values are retained so adopting tokens preserves the UI. A missing Primer radius import was restored so dashboard cards receive their intended corners.

Structural zeroes, grid coordinates, flex ratios, SVG paths, percentages and data-driven geometry remain local. The native-select chevron is a complete SVG asset token. Copied frontend reference helpers retain their source hashes and are not edited by token migration.