Apply borders to Figma components for high contrast theme

[andrew-ronaldson]

In most High contrast themes borders are used to show clear separation between objects on the screen. In our default theme, borders are not used on all components so in order to enable a true high contrast theme we need to support transparent borders on all borderless components.

Figma has a built in theme switcher that can instantly swap styles to different themes and modes. Adding a new transparent border token would help us take advantage of this functionality rather than maintaining extra theme files.

[lboehling]

Update --

Tina has been evaluating when/where to add borders in this figma file.

I've explored figma variables for applying the border in this file.

• Exploring new high contrast border color variable that is set to transparent in L/D themes, and aliases to border--color--default in HCL/HCD.
• Exploring new boolean border variable that is set to False in L/D themes and true in HCL/HCD.

*I think we may need to use a combination of the 2 proposed tokens to enable HC border toggles in figma (still evaluating though). POC will test to see if these proposed tokens can work in core as well.

Currently working on documenting a list of components that need a net-new border, and document standards around border styling updates across components.

[lboehling]

Comprehensive list of new border styles needed to support HC:

• About modal 
• Accordion - regular variant: hover & expand states
• Alerts - overflow footer: default, hover/click states
• Badge - unread state - default
• Banner - bottom (or top) border - dependent on location
• Button - Link button, plain button, plain CTA: hover & clicked states
• Cards - secondary variant: default, hover, & clicked states.
• Clipboard copy - inline compact
• Code block
• Code editor - header
• Calendar month - panel + current day
• Drawer - overlay variants
• Dual list selector - hovered & selected items
• Label - overflow label variant & nonstatus filled label: default & hover states(exception to general border rule, let’s apply our nonstatus border color tokens here if possible in hc theme)
• Login page - card
• Menu toggle - plain text and plain icon toggles (hover/clicked)
• Menu - menu items (hover/selected states), menu container, sticky footer
• Modal - container border
• Navigation - nav item hover & clicked. horizontal sub nav container.
• Page - main page border
• Panel - raised/secondary variants
• Popover
• Progress bar
• Simple list - hover/clicked states
• Table - column headers hover/click states, draggable row active drag state
• Tab- hover states
• Tree view - hover/expanded states
• Wizard - step hover/clicked states, wizard container