@alaskaairux/orion-design-tokens
Advanced tools
Orion Design Tokens are abstract UI atomic values that make up the greater Orion Design System (ODS).
The goal of this project is to maintain these core values in such a way as to feed the UI of other engineering efforts, rather than be a manually communicated design dependency.
This repository serves two purposes:
Within the project's src/ dir are the various token values stored in .json format. These are the production resources distributed via npm.
The following table illustrated the different JSON options currently being used to filter the data output.
By default, no tokens are exposed in an output file unless specifically designated by a config filter option. See the table below for the different types of filters currently in use.
| filter | type | description |
|---|---|---|
| attributes {category/type/option} | string | follow the pattern of the CTI Structure to determine the value of a category, type or option in the JSON |
| classic | boolean | token filter for classic theme values |
| deprecated | boolean | token marked as deprecated will be deleted with next MAJOR release version |
| legacy | boolean | token filter for legacy values |
| public | boolean | token filter for publicly exposed Design System tokens per the most recent spec |
| redirect | boolean | token filter for legacy values that have a new reference |
Additional content options are made available within the token data. See the table below for these options and their descriptions.
| option | type | description |
|---|---|---|
| comment | string | comment that will appear in CSS/Sass output |
| reference | string | new token redirect reference |
| usage | string | description of token use |
| wcag | string | WCAG accessibility rating if applicable |
| value | string / number | the value of the token |
Please be sure to follow current Design Token patterns and follow the CTI Structure. Any submissions to this project that does not follow these guidelines will be considered non-compliant and your submission will be rejected.
Also, please see this repo's contributing guidelines.
Before submitting a pull request, please ensure that your JSON is formatted correctly. Testing is easy, you can build out resource files that are not added to the repo's version control.
To mimic a CI Build and ensure a successful build with a merge, please run the following command to test the build pipeline:
$ npm run ciBuild
All tests will run with the automated build, but it's a good idea to run tests locally to ensure stability of pull request
To install in your project, see instructions from npmjs.org
npm i @alaskaairux/orion-design-tokens
Located in the npm version of the Orion Design Tokens is a ./tokens directory.
└── tokens
├── CSSCustomProperties--classicColors.css
├── CSSCustomProperties.css
├── CSSTokenProperties.css
├── JSData--color.js
├── JSObject--classicColors.js
├── JSObject--colorRedirects.js
├── JSObject--deprecated.js
├── JSVariables--color.js
├── SCSSVariableMap.scss
├── SCSSVariables.scss
├── SassCustomProperties--classicColors.scss
├── SassCustomProperties.scss
├── TokenColorVariables.js
├── TokenVariables.esm.js
├── _TokenProperties.scss
└── _TokenVariables.scss
| file | syntax | type | status | filter type / description |
|---|---|---|---|---|
| CSSCustomProperties--classicColors | CSS | custom properties | current | filter: classic |
| CSSCustomProperties | CSS | custom properties | current | full list of v2.8 release tokens |
| JSData--color | JS module | color data | current | filter: color, current |
| JSObject--classicColors | js module | color data | current | filter: classic |
| JSObject--colorRedirects | js module | color data | current | filter: redirect |
| JSObject--deprecated | js module | deprecated tokens | current | filter: deprecated |
| JSVariables--color | js es6 | color data | current | filter: color |
| SCSSVariables | scss | Sass variables | current | full list of v2.8 release tokens |
| SassCustomProperties--classicColors | scss | custom properties | current | filter: classic |
| SassCustomProperties | scss | custom properties | current | full list of v2.8 release tokens |
| TokenColorVariables | js module | color data | deprecated | filter: color |
| CSSTokenProperties | CSS | custom properties | deprecated | full list of < v2.8 tokens |
| TokenVariables.esm | js es6 | all data | deprecated | full list of < v2.8 tokens |
| _TokenProperties | scss | custom properties | deprecated | full list of < v2.8 tokens |
| _TokenVariables | scss | Sass variables | deprecated | full list of < v2.8 tokens |
To install in Sass file:
@import "~@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables";
// or
@import "~@alaskaairux/orion-design-tokens/dist/tokens/SassCustomProperties";
To install CSS file:
With React or similar framework, the CSS file can be imported directly from the npm:
import "@alaskaairux/orion-design-tokens/tokens/dist/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.
To install ESModules file:
Within a webpacked application or a type="module" script:
import { ColorAlertNotificationOnLight, ColorBorderErrorOnLight } from '@alaskaairux/orion-design-tokens/dist/tokens/JSVariables--color.js';
Style Dictionary is able to output variable files in either Sass or CSS Custom Properties (variables) format. The example pipeline and the style.scss file has references to both Sass and CSS variables.
Important: CSS variables need to have their references available to them in the final output CSS. Whereas Sass will convert these values to static values in the output CSS.
The example build pipeline addresses this by concatenating the CSS variables with the final CSS output file.
Style Dictionary requires that color definitions be established as hex values that then can be transformed into various outputs, e.g. rgba, rgb 6-digit hex, iOS and Android color vars.
To support alpha values, it is suggested to use 8-digit or RGBA hex values, where the last digit(s) represents the alpha value. For more information see 8-Digit Hex Codes? and here for a full #RRGGBBAA table.
Style Dictionary fully supports native platforms and is able to output resources that are usable in both iOS and Android native development.
Alaska Airlines Orion Design SystemFAQs
Alaska Air Orion Design System token repository
The npm package @alaskaairux/orion-design-tokens receives a total of 552 weekly downloads. As such, @alaskaairux/orion-design-tokens popularity was classified as not popular.
We found that @alaskaairux/orion-design-tokens demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.