Update color tokens for theming support

[jordanjones243]

General Support Request

In order to make Auro components themeable, we need to make sure there are no hard-coded and correct semanticly named tokens within the component. There also needs to be investigation around border rules which have a combination of size and color tokens, making them more complex, as well as background-color and color rules.

Possible Solution

Work with designers to figure out what tokens need updated values or renamed.

Additional context

This work stems from theming work happening to all Auro components:

• Color Theming Tokens AuroDesignTokens#147

Acceptance Criteria:

• All tier 3 token names have been implemented.
• Colors identified below have been updated to their tier 3 token name.

[jordanjones243]

• Tier 1:
  • Target box-shadow: inset 0 0 0 1px var(--ds-color-base-white, $ds-color-base-white), inset 0 0 0 3px var(--ds-color-background-lightest, $ds-color-background-lightest);
  • On dark background and border color: var(--ds-color-brand-breeze-300, $ds-color-brand-breeze-300);
  • Ondark not disabled Hover/active background and border: var(--ds-color-brand-breeze-200, $ds-color-brand-breeze-200);
  • Label border color: var(--ds-color-brand-neutral-500, $ds-color-brand-neutral-500);
  • Label error and success color: var(--ds-color-base-white, $ds-color-base-white);
• Hardcoded
  • Transparent

[jordanjones243]

This ticket will be blocked until this work has been completed:

• auro-button: unstyled, icon only varient auro-button#252

[jordanjones243]

Blocked until the auro-button theming support issues are dealt with.