fix(many): border colors are adjusted to meet a11y contrast standards

Closes: INSTUI-4319

packages/shared-types/src/Colors.ts

@@ -30,6 +30,7 @@ type Primitives = {
   grey12: string
   grey14: string
   grey24: string
+  grey30: string
   grey45: string
   grey57: string
   grey70: string
@@ -195,6 +196,7 @@ type Contrasts = {
   grey1214: Primitives['grey12'] | Primitives['grey14']
   grey1424: Primitives['grey14'] | Primitives['grey24']
   grey2424: Primitives['grey24']
+  grey3045: Primitives['grey30'] | Primitives['grey45']
   grey4570: Primitives['grey45'] | Primitives['grey70']
   grey5782: Primitives['grey57'] | Primitives['grey82']
   grey100100: Primitives['grey100']

packages/shared-types/src/ComponentThemeVariables.ts

@@ -343,6 +343,8 @@ export type ToggleFacadeTheme = {
   labelFontSizeSmall: Typography['fontSizeSmall']
   labelFontSizeMedium: Typography['fontSizeMedium']
   labelFontSizeLarge: Typography['fontSizeLarge']
+  uncheckedIconBorderColor: Colors['contrasts']['grey3045']
+  checkedIconBorderColor: Colors['contrasts']['green5782']
 }
 
 export type CodeEditorTheme = {
@@ -534,6 +536,8 @@ export type DrilldownTheme = {
   headerTitleFontWeight: Typography['fontWeightBold']
   headerActionColor: Colors['contrasts']['blue4570']
   labelInfoPadding: Spacing['small']
+  labelInfoColor: Colors['contrasts']['grey5782']
+  borderColor: Colors['contrasts']['grey3045']
 }
 
 export type FileDropTheme = {
@@ -960,6 +964,10 @@ export type PillTheme = {
   borderRadius: string | 0
 }
 
+export type PopoverTheme = {
+  borderColor: Colors['contrasts']['grey3045']
+}
+
 export type PositionTheme = {
   zIndex: Stacking['topmost']
 }
@@ -1417,6 +1425,10 @@ export type ToggleDetailsTheme = {
   filledPadding: Spacing['small']
 }
 
+export type ToggleGroupTheme = {
+  borderColor: Colors['contrasts']['grey3045']
+}
+
 export type TooltipTheme = {
   fontFamily: Typography['fontFamily']
   fontWeight: Typography['fontWeightNormal']
@@ -1586,6 +1598,7 @@ export type ContextViewTheme = {
   arrowBorderColor: Colors['contrasts']['grey1214']
   arrowBackgroundColorInverse: Colors['contrasts']['grey125125']
   arrowBorderColorInverse: string
+  borderColorForView: string
 }
 
 export type ViewTheme = {
@@ -1739,6 +1752,7 @@ export interface ThemeVariables {
   Pages: PagesTheme
   PaginationPageInput: PaginationPageInputTheme
   'Pagination.PageInput': PaginationPageInputTheme
+  Popover: PopoverTheme
   Position: PositionTheme
   Pill: PillTheme
   ProgressBar: ProgressBarTheme
@@ -1775,6 +1789,8 @@ export interface ThemeVariables {
   TextArea: TextAreaTheme
   TextInput: TextInputTheme
   ToggleDetails: ToggleDetailsTheme
+  ToggleGroup: ToggleGroupTheme
+  'ToggleDetails.ToggleGroup': ToggleGroupTheme
   Tooltip: TooltipTheme
   TopNavBarBrand: TopNavBarBrandTheme
   'TopNavBar.Brand': TopNavBarBrandTheme

packages/ui-avatar/src/Avatar/theme.ts

@@ -38,7 +38,7 @@ const generateComponentTheme = (theme: Theme): AvatarTheme => {
     background: colors?.contrasts?.white1010,
     borderWidthSmall: borders?.widthSmall,
     borderWidthMedium: borders?.widthMedium,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     boxShadowColor: alpha('#2d3b45', 12),
     boxShadowBlur: '1rem',
     fontFamily: typography?.fontFamily,

packages/ui-buttons/src/BaseButton/theme.ts

@@ -79,10 +79,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
     primaryHoverBackground: colors?.contrasts?.blue5782,
     primaryActiveBackground: colors?.contrasts?.blue5782,
     primaryActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
-    primaryGhostColor: colors?.contrasts?.blue4570,
+    primaryGhostColor: colors?.contrasts?.blue5782,
     primaryGhostBorderColor: colors?.contrasts?.blue4570,
     primaryGhostBackground: 'transparent',
-    primaryGhostHoverBackground: alpha(colors?.contrasts?.blue4570, 10),
+    primaryGhostHoverBackground: colors?.contrasts?.blue1212,
     primaryGhostActiveBackground: 'transparent',
     primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
       colors?.contrasts?.blue1212,
@@ -98,7 +98,7 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
     secondaryGhostColor: colors?.contrasts?.grey125125,
     secondaryGhostBorderColor: colors?.contrasts?.grey125125,
     secondaryGhostBackground: 'transparent',
-    secondaryGhostHoverBackground: alpha(colors?.contrasts?.grey125125, 10),
+    secondaryGhostHoverBackground: colors?.contrasts?.grey1111,
     secondaryGhostActiveBackground: 'transparent',
     secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
       colors?.contrasts?.grey125125,

packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts

@@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
   const componentVariables: CheckboxFacadeTheme = {
     color: colors?.contrasts?.white1010,
     borderWidth: borders?.widthSmall,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
     background: colors?.contrasts?.white1010,
     marginRight: spacing?.xSmall,

packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts

@@ -158,13 +158,16 @@ const generateStyle = (
       '&::before': {
         content: '""',
         position: 'absolute',
-        top: componentTheme.borderWidth,
-        left: componentTheme.borderWidth,
-        height: `calc(100% - (${componentTheme.borderWidth} * 2))`,
-        width: `calc(100% - (${componentTheme.borderWidth} * 2))`,
+        height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
+        width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
         background: componentTheme.toggleBackground,
         boxShadow: componentTheme.toggleShadow,
-        borderRadius: '100%'
+        borderRadius: '100%',
+        border: `${componentTheme.borderWidth} solid ${
+          checked
+            ? componentTheme.checkedIconBorderColor
+            : componentTheme.uncheckedIconBorderColor
+        }`
       }
     },
 

packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts

@@ -55,15 +55,15 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
   const componentVariables: ToggleFacadeTheme = {
     color: colors?.contrasts?.white1010,
     background: colors?.contrasts?.grey1111,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
     borderRadius: '4rem',
     marginEnd: spacing?.small,
     marginStart: spacing?.small,
     marginVertical: spacing?.xSmall,
     checkedBackground: colors?.contrasts?.green4570,
     uncheckedIconColor: colors?.contrasts?.grey125125,
-    checkedIconColor: colors?.contrasts?.green4570,
+    checkedIconColor: colors?.contrasts?.green5782,
     focusOutlineColor: colors?.contrasts?.blue4570,
     focusBorderWidth: borders?.widthMedium,
     focusBorderStyle: borders?.style,
@@ -76,7 +76,9 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
     labelLineHeight: typography?.lineHeightCondensed,
     labelFontSizeSmall: typography?.fontSizeSmall,
     labelFontSizeMedium: typography?.fontSizeMedium,
-    labelFontSizeLarge: typography?.fontSizeLarge
+    labelFontSizeLarge: typography?.fontSizeLarge,
+    uncheckedIconBorderColor: colors?.contrasts?.grey5782,
+    checkedIconBorderColor: colors?.contrasts?.green5782
   }
 
   return {

packages/ui-drilldown/src/Drilldown/index.tsx

@@ -1377,6 +1377,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           getDisabledOptionProps
         }) => (
           <View
+            borderWidth="small"
             as="div"
             elementRef={this.handleDrilldownRef}
             tabIndex={0}

packages/ui-drilldown/src/Drilldown/styles.ts

@@ -50,6 +50,7 @@ const generateStyle = (
     drilldown: {
       label: 'drilldown',
       overflow: 'visible', // needed for focus ring!
+      borderColor: componentTheme.borderColor,
 
       ...(hasHighlightedOption && {
         '&:focus::before': {
@@ -80,7 +81,8 @@ const generateStyle = (
       flexShrink: 0,
       height: '100%',
       alignItems: 'center',
-      paddingInlineStart: componentTheme.labelInfoPadding
+      paddingInlineStart: componentTheme.labelInfoPadding,
+      color: componentTheme.labelInfoColor
     },
     optionContent: {
       label: 'drilldown__optionContent',

packages/ui-drilldown/src/Drilldown/theme.ts

@@ -36,7 +36,9 @@ const generateComponentTheme = (theme: Theme): DrilldownTheme => {
   const componentVariables: DrilldownTheme = {
     headerTitleFontWeight: typography.fontWeightBold,
     headerActionColor: colors?.contrasts?.blue4570,
-    labelInfoPadding: spacing?.small
+    labelInfoPadding: spacing?.small,
+    labelInfoColor: colors?.contrasts?.grey3045,
+    borderColor: colors?.contrasts?.grey3045
   }
 
   return {

packages/ui-menu/src/Menu/MenuItem/theme.ts

@@ -36,8 +36,7 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => {
   const themeSpecificStyle: ThemeSpecificStyle<MenuItemTheme> = {
     canvas: {
       labelColor: theme['ic-brand-font-color-dark'],
-      iconColor: theme['ic-brand-font-color-dark'],
-      activeBackground: theme['ic-brand-primary']
+      iconColor: theme['ic-brand-font-color-dark']
     }
   }
 
@@ -56,7 +55,7 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => {
     iconColor: colors?.contrasts?.grey125125,
     iconPadding: spacing?.small,
 
-    activeBackground: colors?.contrasts?.blue4570,
+    activeBackground: colors?.contrasts?.grey4570,
     activeLabelColor: colors?.contrasts?.white1010,
     activeIconColor: colors?.contrasts?.white1010
   }

packages/ui-number-input/src/NumberInput/theme.ts

@@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): NumberInputTheme => {
 
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
 
     color: colors?.contrasts?.grey125125,

packages/ui-options/src/Options/Item/theme.ts

@@ -64,7 +64,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => {
     descriptionFontWeight: typography.fontWeightNormal,
     descriptionLineHeight: typography.lineHeight,
     descriptionPaddingStart: '0.25em',
-    descriptionColor: colors?.contrasts?.grey4570
+    descriptionColor: colors?.contrasts?.grey5782
   }
 
   return {

packages/ui-popover/src/Popover/index.tsx

@@ -55,10 +55,14 @@ import type { ViewProps, ContextViewProps } from '@instructure/ui-view'
 import type { PositionProps } from '@instructure/ui-position'
 import type { DialogProps } from '@instructure/ui-dialog'
 
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
 import type { PopoverProps, PopoverState } from './props'
 import { allowedProps, propTypes } from './props'
 import type { Renderable } from '@instructure/shared-types'
-
 /**
 ---
 category: components
@@ -67,6 +71,7 @@ tags: overlay, portal, dialog
 **/
 @withDeterministicId()
 @textDirectionContextConsumer()
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Popover extends Component<PopoverProps, PopoverState> {
   static readonly componentId = 'Popover'
@@ -558,6 +563,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
       }
 
       const { placement } = this.state
+      const { styles } = this.props
 
       if (this.props.withArrow) {
         viewProps = {
@@ -570,7 +576,17 @@ class Popover extends Component<PopoverProps, PopoverState> {
               : placement
         } as Partial<ContextViewProps> & { ref: any }
 
-        return <ContextView {...viewProps}>{content}</ContextView>
+        return (
+          <ContextView
+            {...viewProps}
+            themeOverride={{
+              borderColorForView: styles?.borderColor,
+              arrowBorderColor: styles?.borderColor
+            }}
+          >
+            {content}
+          </ContextView>
+        )
       } else {
         viewProps = {
           ...viewProps,
@@ -579,7 +595,14 @@ class Popover extends Component<PopoverProps, PopoverState> {
           ...(color === 'primary-inverse' && { borderColor: 'transparent' })
         } as Partial<ViewProps> & { ref: any }
 
-        return <View {...viewProps}>{content}</View>
+        return (
+          <View
+            {...viewProps}
+            themeOverride={{ borderColorPrimary: styles?.borderColor }}
+          >
+            {content}
+          </View>
+        )
       }
     } else {
       return null

packages/ui-popover/src/Popover/props.ts

@@ -28,7 +28,7 @@ import { element } from '@instructure/ui-prop-types'
 import { ThemeablePropTypes } from '@instructure/emotion'
 import { PositionPropTypes } from '@instructure/ui-position'
 
-import type { Shadow, Stacking } from '@instructure/emotion'
+import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
 
 import type {
   PlacementPropValues,
@@ -41,7 +41,8 @@ import type {
   PropValidators,
   LiveRegion,
   UIElement,
-  Renderable
+  Renderable,
+  PopoverTheme
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -278,7 +279,8 @@ type PopoverOwnProps = {
 
 type PopoverProps = PopoverOwnProps &
   TextDirectionContextConsumerProps &
-  WithDeterministicIdProps
+  WithDeterministicIdProps &
+  WithStyleProps<PopoverTheme, PopoverStyle>
 
 type PopoverState = {
   placement: PopoverOwnProps['placement']
@@ -291,6 +293,8 @@ type PropKeys = keyof PopoverOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
+type PopoverStyle = { borderColor: string }
+
 const propTypes: PropValidators<PropKeys> = {
   isShowingContent: PropTypes.bool,
   defaultIsShowingContent: PropTypes.bool,
@@ -388,5 +392,5 @@ const allowedProps: AllowedPropKeys = [
   'elementRef'
 ]
 
-export type { PopoverOwnProps, PopoverProps, PopoverState }
+export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle }
 export { propTypes, allowedProps }