Manual Installation
If you’d like more control over what you import and are not using our web components, you can install our design tokens separately:
npm i @astrouxds/tokensStructure
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.
| Style | Class |
|---|---|
| Body 1 | .rux-body-1 |
| Body 1 Bold | .rux-body-1-bold |
| Body 2 | .rux-body-2 |
| Body 2 Bold | .rux-body-2-bold |
| Body 3 | .rux-body-3 |
| Body 3 Bold | .rux-body-3-bold |
| Control Body 1 | .rux-control-body-1 |
| Control Body 1 Bold | .rux-control-body-1-bold |
| Heading 1 | .rux-heading-1 |
| Heading 1 Bold | .rux-heading-1-bold |
| Heading 2 | .rux-heading-2 |
| Heading 3 | .rux-heading-3 |
| Heading 4 | .rux-heading-4 |
| Heading 5 | .rux-heading-5 |
| Heading 6 | .rux-heading-6 |
| Display 1 | .rux-display-1 |
| Display 2 | .rux-display-2 |
| Monospace 1 | .rux-monospace-1 |
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";JSON
import reference from '@astrouxds/tokens/dist/json/base.reference.json';import system from '@astrouxds/tokens/dist/json/base.system.json';import component from '@astrouxds/tokens/dist/json/base.component.json';Nested JSON
import reference from '@astrouxds/tokens/dist/json-nested/base.reference.json';import system from '@astrouxds/tokens/dist/json-nested/base.system.json';import component from '@astrouxds/tokens/dist/json-nested/base.component.json';