Prep for high contrast theme border-color changes

.changeset/fluffy-ravens-thank.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+- Adjust checkbox and radio border color values for high contrast themes
+- Add default border to SegmentedControl
+- Add inset box-shadow to StatusLabel to prep for new border-color in dark high contrast

packages/react/src/Checkbox/Checkbox.tsx

@@ -63,8 +63,11 @@ const StyledCheckbox = styled.input`
 
   &:checked,
   &:indeterminate {
-    background: ${get('colors.accent.fg')};
-    border-color: ${get('colors.accent.fg')};
+    background: var(--control-checked-bgColor-rest, ${get('colors.accent.fg')});
+    border-color: var(
+      --control-checked-bgColor-rest,
+      ${get('colors.accent.fg')}
+    ); /* using bgColor here to avoid a border change in dark high contrast */
 
     &::before {
       animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
@@ -86,12 +89,12 @@ const StyledCheckbox = styled.input`
     }
 
     &:disabled {
-      background-color: ${get('colors.fg.muted')};
-      border-color: ${get('colors.fg.muted')};
+      background-color: var(--control-checked-bgColor-disabled, ${get('colors.fg.muted')});
+      border-color: var(--control-checked-borderColor-disabled, ${get('colors.fg.muted')});
       opacity: 1;
 
       &::before {
-        background-color: ${get('colors.fg.onEmphasis')};
+        background-color: var(--control-checked-fgColor-disabled, ${get('colors.fg.onEmphasis')});
       }
     }
 
@@ -103,7 +106,7 @@ const StyledCheckbox = styled.input`
   }
 
   &:indeterminate {
-    background: ${get('colors.accent.fg')};
+    background: var(--control-checked-bgColor-rest, ${get('colors.accent.fg')});
     &::before {
       mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
       visibility: visible;

packages/react/src/CircleOcticon/CircleOcticon.stories.tsx

@@ -9,15 +9,15 @@ export default {
 } as Meta<typeof CircleOcticon>
 
 export const Default = () => (
-  <CircleOcticon icon={CheckIcon} size={32} sx={{backgroundColor: 'success.fg', color: 'fg.onEmphasis'}} />
+  <CircleOcticon icon={CheckIcon} size={32} sx={{backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}} />
 )
 
 export const Playground: StoryFn<typeof CircleOcticon> = args => <CircleOcticon {...args} />
 
 Playground.args = {
   icon: CheckIcon,
   size: 32,
-  sx: {backgroundColor: 'success.fg', color: 'fg.onEmphasis'},
+  sx: {backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'},
 }
 
 Playground.argTypes = {

packages/react/src/Radio/Radio.tsx

@@ -50,12 +50,17 @@ const StyledRadio = styled.input`
     border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
 
   &:checked {
-    border-color: ${get('colors.accent.fg')};
     border-width: var(--base-size-4, 4px);
+    border-color: var(
+      --control-checked-bgColor-rest,
+      ${get('colors.accent.fg')}
+    ); /* using bgColor here to avoid a border change in dark high contrast */
+    background-color: var(--control-checked-fgColor-rest, ${get('colors.fg.onEmphasis')});
 
     &:disabled {
       cursor: not-allowed;
       border-color: ${get('colors.fg.muted')};
+      background-color: ${get('colors.fg.muted')};
     }
   }
 

packages/react/src/SegmentedControl/SegmentedControl.tsx

@@ -36,6 +36,8 @@ type SegmentedControlProps = {
 const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({
   backgroundColor: 'segmentedControl.bg',
   borderRadius: 2,
+  border: '1px solid',
+  borderColor: 'var(--controlTrack-borderColor-rest, transparent)',
   display: props.isFullWidth ? 'flex' : 'inline-flex',
   fontSize: props.size === 'small' ? 0 : 1,
   height: props.size === 'small' ? '28px' : '32px', // TODO: use primitive `control.{small|medium}.size` when it is available

packages/react/src/StateLabel/StateLabel.tsx

@@ -52,42 +52,52 @@ const colorVariants = variant({
     issueClosed: {
       backgroundColor: 'done.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
     },
     issueClosedNotPlanned: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
     },
     pullClosed: {
       backgroundColor: 'closed.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent)',
     },
     pullMerged: {
       backgroundColor: 'done.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent)',
     },
     pullQueued: {
       backgroundColor: 'attention.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent)',
     },
     issueOpened: {
       backgroundColor: 'open.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
     },
     pullOpened: {
       backgroundColor: 'open.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent)',
     },
     draft: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
     },
     issueDraft: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
     },
     unavailable: {
       backgroundColor: 'neutral.emphasis',
       color: 'fg.onEmphasis',
+      boxShadow: 'var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent)',
     },
   },
 })

packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`StateLabel renders children 1`] = `
   border-radius: 100px;
   background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -81,6 +82,7 @@ exports[`StateLabel respects the status prop 1`] = `
   border-radius: 100px;
   background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -140,6 +142,7 @@ exports[`StateLabel respects the status prop 2`] = `
   border-radius: 100px;
   background-color: var(--bgColor-done-emphasis,var(--color-done-emphasis,#8250df));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -199,6 +202,7 @@ exports[`StateLabel respects the status prop 3`] = `
   border-radius: 100px;
   background-color: var(--bgColor-neutral-emphasis,var(--color-neutral-emphasis,#6e7781));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -255,6 +259,7 @@ exports[`StateLabel respects the status prop 4`] = `
   border-radius: 100px;
   background-color: var(--bgColor-done-emphasis,var(--color-done-emphasis,#8250df));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -311,6 +316,7 @@ exports[`StateLabel respects the status prop 5`] = `
   border-radius: 100px;
   background-color: var(--bgColor-attention-emphasis,var(--color-attention-emphasis,#9a6700));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-attention-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;
@@ -367,6 +373,7 @@ exports[`StateLabel respects the variant prop 1`] = `
   border-radius: 100px;
   background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);
   padding-left: 8px;
   padding-right: 8px;
   padding-top: 4px;
@@ -426,6 +433,7 @@ exports[`StateLabel respects the variant prop 2`] = `
   border-radius: 100px;
   background-color: var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));
   color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  box-shadow: var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 8px;

packages/react/src/ToggleSwitch/ToggleSwitch.tsx

@@ -120,7 +120,7 @@ const SwitchButton = styled.button<SwitchButtonProps>`
     }
   }
 
-  &:hover,
+  &:hover:not(:disabled),
   &:focus:focus-visible {
     background-color: ${get('colors.switchTrack.hoverBg')};
   }
@@ -143,9 +143,9 @@ const SwitchButton = styled.button<SwitchButtonProps>`
     if (props.checked) {
       return css`
         background-color: ${get('colors.switchTrack.checked.bg')};
-        border-color: transparent;
+        border-color: var(--control-checked-borderColor-rest, transparent);
 
-        &:hover,
+        &:hover:not(:disabled),
         &:focus:focus-visible {
           background-color: ${get('colors.switchTrack.checked.hoverBg')};
         }
@@ -158,7 +158,7 @@ const SwitchButton = styled.button<SwitchButtonProps>`
     } else {
       return css`
         background-color: ${get('colors.switchTrack.bg')};
-        border-color: transparent;
+        border-color: var(--controlTrack-borderColor-rest, transparent);
 
         &:active {
           background-color: ${get('colors.switchTrack.activeBg')};

packages/react/src/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipBase = styled.span<SxProp>`
     padding: 0.5em 0.75em;
     font: normal normal 11px/1.5 ${get('fonts.normal')};
     -webkit-font-smoothing: subpixel-antialiased;
-    color: ${get('colors.fg.onEmphasis')};
+    color: var(--tooltip-fgColor, ${get('colors.fg.onEmphasis')});
     text-align: center;
     text-decoration: none;
     text-shadow: none;
@@ -30,7 +30,7 @@ const TooltipBase = styled.span<SxProp>`
     white-space: pre;
     pointer-events: none;
     content: attr(aria-label);
-    background: ${get('colors.neutral.emphasisPlus')};
+    background: var(--tooltip-bgColor, ${get('colors.neutral.emphasisPlus')});
     border-radius: ${get('radii.2')};
     opacity: 0;
   }

packages/react/src/TooltipV2/Tooltip.tsx

@@ -31,10 +31,10 @@ const StyledTooltip = styled.span`
     white-space: normal;
     font: normal normal 11px/1.5 ${get('fonts.normal')};
     -webkit-font-smoothing: subpixel-antialiased;
-    color: ${get('colors.fg.onEmphasis')};
+    color: var(--tooltip-fgColor, ${get('colors.fg.onEmphasis')});
     text-align: center;
     word-wrap: break-word;
-    background: ${get('colors.neutral.emphasisPlus')};
+    background: var(--tooltip-bgColor, ${get('colors.neutral.emphasisPlus')});
     border-radius: ${get('radii.2')};
     border: 0;
     opacity: 0;

packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -1987,10 +1987,10 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   white-space: normal;
   font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  color: var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));
   text-align: center;
   word-wrap: break-word;
-  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+  background: var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));
   border-radius: 6px;
   border: 0;
   opacity: 0;
@@ -3089,10 +3089,10 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   white-space: normal;
   font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));
+  color: var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));
   text-align: center;
   word-wrap: break-word;
-  background: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f));
+  background: var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));
   border-radius: 6px;
   border: 0;
   opacity: 0;

packages/react/src/internal/utils/sharedCheckboxAndRadioStyles.ts

@@ -3,7 +3,7 @@ import {get} from '../../constants'
 
 export const sharedCheckboxAndRadioStyles = css`
   appearance: none;
-  border-color: ${get('colors.neutral.emphasis')};
+  border-color: var(--control-borderColor-emphasis, ${get('colors.neutral.emphasis')});
   border-style: solid;
   border-width: ${get('borderWidths.1')};
   cursor: pointer;
@@ -14,6 +14,7 @@ export const sharedCheckboxAndRadioStyles = css`
   place-content: center;
   position: relative;
   width: var(--base-size-16, 16px);
+  background-color: ${get('colors.canvas.default')};
 
   &:disabled {
     background-color: ${get('colors.input.disabledBg')};