0.22.0 • Published 2 years ago

@phtnalaska/design-tokens v0.22.0

Weekly downloads
-
License
Apache-2.0
Repository
bitbucket
Last release
2 years ago

Alaska Design Tokens

Install

Build Status See it on NPM! License

$ 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

filesyntaxtypestatusfilter type / description
CSSCustomPropertiesCSScustom propertiescurrentfull list of v3.0x release tokens
CSSCustomPropertiesColorRGBCSScustom propertiescurrentFilter: color, publiccustom RGB output
CSSOpacityPropertiesSasscustom propertiescurrentfilter: opacity
CSSSizeCustomPropertiesCSScustom propertiescurrentfilter: size, public
JSData--colorJS modulecolor datacurrentfilter: color, current
JSObject--deprecatedJS moduledeprecated tokenscurrentfilter: deprecated, pubic
JSObject--allTokens.jsJS moduleall datacurrentfilter: public
JSVariables--colorjs es6color datacurrentfilter: color
SCSSOpacityVariablesSassSass variablescurrentfilter: opacity
SCSSVariableMapSassSass variable mapcurrentfilter: size, public
SCSSVariablesscssSass variablescurrentfull list of v3.0x release tokens
SCSSVariablesMapFlatScss variable mapcurrentfull list of v3.0x release tokens
SCSSAlaskaScss variable mapcurrentfull list of v3.0x release tokens
SassCustomPropertiesscsscustom propertiescurrentfull list of v3.0x release tokens
SassCustomPropertiesColorRGBSasscustom propertiescurrentFilter: color, publiccustom RGB output
SassSizeCustomPropertiesSasscustom propertiescurrentfilter: 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"
/>