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

Closes: INSTUI-4319

Author: ToMESSKa

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

@@ -345,6 +345,8 @@ export type ToggleFacadeTheme = {
   labelFontSizeMedium: Typography['fontSizeMedium']
   labelFontSizeLarge: Typography['fontSizeLarge']
   errorBorderColor: Colors['contrasts']['red4570']
+  uncheckedIconBorderColor: Colors['contrasts']['grey3045']
+  checkedIconBorderColor: Colors['contrasts']['green5782']
 }
 
 export type CodeEditorTheme = {
@@ -536,6 +538,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 = {
@@ -714,6 +718,7 @@ export type MenuItemTheme = {
   activeBackground: Colors['contrasts']['blue4570']
   activeLabelColor: Colors['contrasts']['white1010']
   activeIconColor: Colors['contrasts']['white1010']
+  labelInfoColor: Colors['contrasts']['grey5782']
 }
 
 export type MenuGroupTheme = {
@@ -964,6 +969,10 @@ export type PillTheme = {
   borderRadius: string | 0
 }
 
+export type PopoverTheme = {
+  borderColor: Colors['contrasts']['grey3045']
+}
+
 export type PositionTheme = {
   zIndex: Stacking['topmost']
 }
@@ -1423,6 +1432,10 @@ export type ToggleDetailsTheme = {
   filledPadding: Spacing['small']
 }
 
+export type ToggleGroupTheme = {
+  borderColor: Colors['contrasts']['grey3045']
+}
+
 export type TooltipTheme = {
   fontFamily: Typography['fontFamily']
   fontWeight: Typography['fontWeightNormal']
@@ -1749,6 +1762,7 @@ export interface ThemeVariables {
   Pages: PagesTheme
   PaginationPageInput: PaginationPageInputTheme
   'Pagination.PageInput': PaginationPageInputTheme
+  Popover: PopoverTheme
   Position: PositionTheme
   Pill: PillTheme
   ProgressBar: ProgressBarTheme
@@ -1785,6 +1799,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

@@ -39,18 +39,18 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
   const themeSpecificStyle: ThemeSpecificStyle<BaseButtonTheme> = {
     canvas: {
       primaryColor: theme['ic-brand-button--primary-text']!,
-      primaryBorderColor: theme['ic-brand-button--primary-bgd']!,
+      primaryBorderColor: darken(theme['ic-brand-button--primary-bgd']!),
       primaryBackground: theme['ic-brand-button--primary-bgd']!,
       primaryHoverBackground: darken(theme['ic-brand-button--primary-bgd']!),
       primaryActiveBackground: darken(theme['ic-brand-button--primary-bgd']!),
       primaryActiveBoxShadow: `${activeShadow} ${theme[
         'ic-brand-button--primary-bgd'
       ]!}`,
-      primaryGhostColor: theme['ic-brand-button--primary-bgd']!,
-      primaryGhostBorderColor: theme['ic-brand-button--primary-bgd']!,
+      primaryGhostColor: darken(theme['ic-brand-button--primary-bgd']!),
+      primaryGhostBorderColor: darken(theme['ic-brand-button--primary-bgd']!),
       primaryGhostBackground: 'transparent',
       primaryGhostHoverBackground: alpha(
-        theme['ic-brand-button--primary-bgd']!,
+        darken(theme['ic-brand-button--primary-bgd']!),
         10
       ),
       primaryGhostActiveBackground: 'transparent',
@@ -104,10 +104,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,
@@ -123,7 +123,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,
     errorBorderColor: colors?.ui?.textError,
     borderRadius: borders?.radiusMedium,
     background: colors?.contrasts?.white1010,

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

@@ -157,13 +157,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

@@ -56,15 +56,15 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
     color: colors?.contrasts?.white1010,
     errorBorderColor: colors?.ui?.textError,
     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,
@@ -77,7 +77,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?.grey5782,
+    borderColor: colors?.contrasts?.grey3045
   }
 
   return {