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

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.

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

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

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

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

A few utility classes for applying Astro typography.

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

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

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

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