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:

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>