@phtnalaska/design-tokens

Alaska Design Tokens

Install

$ npm i @phtnalaska/design-tokens

Use pre-processed resources

Located in the ./dist/tokens directory of the npm.

└── tokens
   ├── CSSCustomProperties.css
   ├── CSSCustomPropertiesColorRGB.css
   ├── CSSOpacityProperties.scss
   ├── CSSSizeCustomProperties.css
   ├── JSData--color.js
   ├── JSObject--allTokens.js
   ├── JSObject--deprecated.js
   ├── JSVariables--color.js
   ├── SCSSOpacityVariables.scss
   ├── SCSSVariableMap.scss
   ├── SCSSVariables.scss
   ├── SCSSVariablesMapFlat.scss
   ├── SCSSAlaskaTable.scss
   ├── SassCustomProperties.scss
   ├── SassCustomPropertiesColorRGB.scss
   └── SassSizeCustomProperties.scss

Resource Descriptions

file	syntax	type	status	filter type / description
CSSCustomProperties	CSS	custom properties	current	full list of v3.0x release tokens
CSSCustomPropertiesColorRGB	CSS	custom properties	current	Filter: color, public custom RGB output
CSSOpacityProperties	Sass	custom properties	current	filter: opacity
CSSSizeCustomProperties	CSS	custom properties	current	filter: size, public
JSData--color	JS module	color data	current	filter: color, current
JSObject--deprecated	JS module	deprecated tokens	current	filter: deprecated, pubic
JSObject--allTokens.js	JS module	all data	current	filter: public
JSVariables--color	js es6	color data	current	filter: color
SCSSOpacityVariables	Sass	Sass variables	current	filter: opacity
SCSSVariableMap	Sass	Sass variable map	current	filter: size, public
SCSSVariables	scss	Sass variables	current	full list of v3.0x release tokens
SCSSVariablesMapFlat	Scss variable map	current	full list of v3.0x release tokens
SCSSAlaska	Scss variable map	current	full list of v3.0x release tokens
SassCustomProperties	scss	custom properties	current	full list of v3.0x release tokens
SassCustomPropertiesColorRGB	Sass	custom properties	current	Filter: color, public custom RGB output
SassSizeCustomProperties	Sass	custom properties	current	filter: size, public

Install with Sass

@import "~@phtnalaska/design-tokens/dist/tokens/SCSSVariables";

// or

@import "~@phtnalaska/design-tokens/dist/tokens/SassCustomProperties";

Install with CSS

With React or similar framework, the CSS file can be imported directly from the npm:

import "@phtnalaska/design-tokens/dist/tokens/CSSCustomProperties.css";

For other frameworks, it's suggested that the CSS file be copied from the npm into the scope of the project with a build scenario.

Install ESModules

Within a webpacked application or a type="module" script:

import {
  AlaskaColorAlertNotificationOnLight,
  AlaskaColorBorderErrorOnLight,
} from "@phtnalaska/design-tokens/dist/tokens/JSVariables--color.js";

Install from CDN

Using unpkg.com, every file in the dist directory can be accessed.

<link
  rel="stylesheet"
  href="https://unpkg.com/@phtnalaska/design-tokens@latest/dist/tokens/CSSCustomProperties.css"
/>

For specifically the CSSCustomProperties.css file, a faster CDN resource is available.

<link
  rel="stylesheet"
  href="https://p2pcontent-fd-prod.azurefd.net/alaska/tokens/CSSCustomProperties.css"
/>