@alaskaairux/auro-swatch v2.1.0

auro-swatch

<auro-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/auro-swatch

Design Token CSS Custom Property dependency

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

For additional details in regards to using Auro 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 Auro 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 <auro-swatch> component.

import "@alaskaairux/auro-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:

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:

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:

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>