Astro UXDS Design Tokens

This package includes all of AstroUXDS's design tokens in various different formats for you to consume in your applications.

Documentation

Astro Design Tokens

Installation

npm i @astrouxds/tokens

Structure

Each export target has the following files:

• base.reference.*
  • All of the possible variables.
  • Useful in instances where there aren't any system options.
• base.system.*
  • A limited set of variables with semantic meaning
  • Useful for creating custom pieces of UI.
• base.component.*
  • Component-specific variables
  • Useful for recreating existing Astro components.

CSS Custom Properties

@import "node_modules/@astrouxds/tokens/dist/css/index.css";

or

@import "node_modules/@astrouxds/tokens/dist/css/base.reference.css";
@import "node_modules/@astrouxds/tokens/dist/css/base.system.css";
@import "node_modules/@astrouxds/tokens/dist/css/base.component.css";

Light Theme Class

@import "node_modules/@astrouxds/tokens/dist/css/theme.light.css";

A light-theme class that includes Astro's light theme.

Typography Utility Classes

@import "node_modules/@astrouxds/tokens/dist/css/classes/typography.css";

A few utility classes for applying Astro typography.

SASS

@import "node_modules/@astrouxds/tokens/dist/scss/base.reference.scss";
@import "node_modules/@astrouxds/tokens/dist/scss/base.system.scss";
@import "node_modules/@astrouxds/tokens/dist/scss/base.component.scss";

SASS Maps

@import "node_modules/@astrouxds/tokens/dist/scss-map-flat/base.reference.scss";
@import "node_modules/@astrouxds/tokens/dist/scss-map-flat/base.system.scss";
@import "node_modules/@astrouxds/tokens/dist/scss-map-flat/base.component.scss";

Pipeline

graph TD
    A[Figma] --> B(data/tokens.json)
    B -->|Token Transformer| D["/tokens/*.json"]
    D -->|Style Dictionary| E["/dist"]
    E -->F[CSS]
    E -->G[SASS]
    E -->H[iOS]
    E -->I[JSON]

Contributing

Building locally

yarn make