Skip to main content

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/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.

StyleClass
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';
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel

Request App Source Code

Please fill out the form below to request download links for one or more of the Astro App source codes.

How Would You Like to Use Astro’s Source Code?
Which Astro App’s Source Code Would You Like to Download?
Successfully submitted request for source code