Color Theming Tokens

[Brandon Shields]

As a themer
I want to be able to theme any auro components
So that I can theme our design system

AC:
Find all hard coded color values and create an issue in each repo
Find all tier 1 color tokens
Find all instances of background-lighter, background-lightest, background-darker, background-darkest

NOTE: Using the theme switcher demo to will help in finding some of these.

Next steps to be taken (in follow up story):
Replace all hard coded color values with the appropriate token
Find all tier 1 color tokens and replace with tier 2 equivalent.
Find all instances of background-lighter, background-lightest, background-darker, background-darkest and create issues and assign to the Color Theming global milestone.
Replace all background color values with the appropriate token

CONSIDERATIONS FOR NEW TOKEN NAMES

semantic context

• ui
• border
• depth (box-shadow)
• color
• background
• background-image

state context

• active
• hover
• focus
• disabled
• error

New Color Token Sugguestions

• --ds-color-ui-transparent-default: transparent;
• --ds-color-border-heavy-default: --ds-color-brand-neutral-500
• --ds-color-icon-error-default: --ds-color-alert-error-default
• --ds-color-icon-warning-default: --ds-color-alert-warning-default
• --ds-color-icon-notification-default: --ds-color-alert-notification-default
• --ds-color-icon-success-default: --ds-color-alert-success-default

NAV

• linear-gradient with way to many color steps hard coded to various white opacities: mobile collapsed background - suggested: liner gradient between --ds-color-background-lightest && --ds-color-ui-transparent-default
• --ds-color-brand-neutral-500 - marker position | border - --ds-color-border-heavy-default

ALERT/ICON

• Icons in both components have multiple states that do not currently have tokens, see suggested token names above

Components that have been looked through and issues have been created:

• accordion
  • border-left: --ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2) (New border token?)
• alert
  • New icon color tokens states: error, warning, information (or notification), success
  • New border color for same states or keep as alert tier 2 tokens?
• avatar
• background
• backtotop
• badge
• banner
• button
• card
• carousel
• checkbox
• datepicker
• datetime
• dialog
  • Need new background colors for: rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.1)
• drawer
  • Need new background colors for: rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.1)
• dropdown
  • box-shadow: rgba(0, 0, 0, 0.8)
  • hover color: rgba(178 178 178 / .1)
  • Need new icon color, as disabled state currently uses: --ds-color-text-disabled-default
  • box-shadow rule uses ui tokens and border tokens in multiple places. Should the semantic token names be consistent?
• flight
• flightline
• header
• hyperlink
• icon
  • Need new icon tokens for success, error, advisory and warning states
  • Need new icon tokens which map to #01426a (--ds-color-brand-midnight-400) and #ffffff (--ds-color-base-white) values
• input
• loader
• lockup
• menu
• nav
• pane
• popover
• radio
• select
• sidenav
• skeleton
  • Need background color for: #f9fbfc (--ds-color-brand-neutral-100)
  • Need background color for: #e2eaef (--ds-color-brand-neutral-200)
• table
• toast
  • Need background color for: #767676 (--ds-color-brand-gray-400)
  • Need icon colors for error and success states

Common use case needs:

• Need transparent ui (and maybe border as it is used in many places) color
• Do we need a none color token?
• Should we keeping semantic token names for the same rules consistent in and across all repos? For example: box-shadow uses ui tokens or border tokens depending on what tokens we have available