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

$3

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.

$3

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

or

``css
@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";
`

$3

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

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

$3

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

A few utility classes for applying Astro typography.

$3

`css
@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";
`

$3

`css
@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

`mermaid
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

$3

yarn make`