@astrouxds/tokens v1.12.0

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