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')};