@phtnalaska/design-tokens

0.22.0 • Public • Published

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

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

Package Sidebar

Install

npm i @phtnalaska/design-tokens

Weekly Downloads

1

Version

0.22.0

License

Apache-2.0

Unpacked Size

549 kB

Total Files

43

Last publish

Collaborators

  • irma_ku
  • fajar_apri
  • yudium
  • irsyad_u
  • aldiputra
  • putradw24