This package has been deprecated

Author message:

See @alaskaairux/auro-swatch

@alaskaairux/ods-swatch

<ods-swatch>

<ods-swatch> is a UI component for the display of color information containing styling and behavior.

Docs

All information regarding Project Setup, Technical Details, Tests and information regarding ODS Stateless Components can be found in the ./docs repository.

Install

$ npm i @alaskaairux/ods-swatch

Design Token CSS Custom Property dependency

The use of any ODS Component has a dependency on the ODS Design Tokens (npm install). See repository and API information here.

For additional details in regards to using Orion Design Tokens with components, please see ./docs/TECH_DETAILS.md

CSS Custom Property fallbacks

CSS Custom Properties are not supported in older browsers. For this, fallback properties are pre-generated and included with the npm. Any update to the Orion Design Tokens will be immediately reflected with browsers that support CSS Custom Properties, legacy browsers will require updated components with pre-generated fallback properties.

Define dependency in project component

Define the component dependency within each component that is using the <ods-swatch> component.

import "@alaskaairux/ods-swatch";

Reference component in HTML

<ods-swatch backgroundcolor="01426a" colorname="ColorBrandBlueMidnightBase"></ods-swatch>

Element ods-swatch

class OdsSwatch extends ComponentBase

ods-swatch use cases

The <ods-swatch> element should be used in situations where users may:

• Need to illustrate a Design Token color and its related data in a block swatch format.
• Supports display of color as background color
• Lists JSON token value; CSS custom property; Sass variable; HEX value

Properties:

Attribute	Value type	Description
backgroundcolor	string	pass in hex color value to be illustrated in the color swatch
colorname	string	derived color name based on JSON structure from design tokens

Code Examples

Default swatch

<ods-swatch backgroundcolor="01426a" colorname="ColorBrandBlueMidnightBase"></ods-swatch>

Element auro-token-list

class AuroTokenList extends ComponentBase 

auro-token-list use cases

The <auro-token-list> element should be used in situations where users may:

• Display table of design token name and value
• Display alternate table of deprecated tokens with optional new reference token name

Properties:

Attribute	Value type	Description
componentData	array	pass in tokenvalue, token
deprecated	boolean	use deprecated display table

Code Examples

<auro-tokens-list componentData='[
  { "tokenvalue": "480px", "token": "breakpoint-width-narrow" }
]'></auro-tokens-list>

<auro-tokens-list deprecated componentData='[
  { "tokenvalue": "480px", "token": "breakpoint-width-narrow", "reference": "breakpoint-sm" }
]'></auro-tokens-list>

Element auro-swatch-list

class AuroSwatchList extends ComponentBase 

auro-swatch-list use cases

The <auro-swatch-list> element should be used in situations where users may:

• Need to illustrate a Design Token color and its related data
• Display data in table format
• Displays CSS custom property name
• Displays Sass variable name
• Describes color usage and WCAG rating
• Displays color in circular inkwell
• Displays color HEX or RGBA value

Properties:

Attribute	Value type	Description
componentData	array	pass in backgroundcolor, colorname, wcag, usage
ondark	boolean	defines if color state is to be on-dark

Code Examples

<auro-swatch-list componentData='[
  { "backgroundcolor": "#0074c8", "colorname": "color-brand-atlas-100", "wcag": "AAA", "usage": "Notification color on light backgrounds" },
  { "backgroundcolor": "#0074c8", "colorname": "color-brand-atlas-200", "wcag": "AAA", "usage": "Notification color on light backgrounds" }
  ]'></auro-swatch-list>

<auro-swatch-list ondark componentData='[
  { "backgroundcolor": "#0074c8", "colorname": "color-brand-atlas-100", "wcag": "AAA", "usage": "Notification color on light backgrounds" },
  { "backgroundcolor": "#0074c8", "colorname": "color-brand-atlas-200", "wcag": "AAA", "usage": "Notification color on light backgrounds" }
  ]'></auro-swatch-list>

Element auro-color-avatar

class AuroColorAvatar extends ComponentBase 

auro-color-avatar use cases

The <auro-color-avatar> element should be used in situations where users may:

• Need to illustrate a Design Token color and its related data
• Use illustrative avatar to display color listing
• Need to illustrate between text, border, alert, interactive or icon uses

Properties:

Attribute	Value type	Description
avatartype	string	pass in font, border, alert, ui, icon string to illustrate preferred avatar type
colorname	string	pass in - (dash) delimitated name of color token
ondark	boolean	defines if color state is to be on-dark

Code Examples

<auro-color-avatar avatartype="font" colorname="color-text-primary-on-light"></auro-color-avatar>
<auro-color-avatar avatartype="font" ondark colorname="color-text-primary-on-dark"></auro-color-avatar>

<auro-color-avatar avatartype="border" colorname="color-border-error-on-light"></auro-color-avatar>
<auro-color-avatar avatartype="border" ondark colorname="color-border-error-on-dark"></auro-color-avatar>

<auro-color-avatar avatartype="alert" colorname="color-alert-success-on-light"></auro-color-avatar>
<auro-color-avatar avatartype="alert" ondark colorname="color-alert-success-on-dark"></auro-color-avatar>

Alaska Airlines Orion Design System
Copyright 2019 Alaska Airlines, Inc. or its affiliates. All Rights Reserved.