Prep for high contrast theme border-color changes (#4774)

* borders * fallback * test(vrt): update snapshots * test color changes * alright * bump * test(vrt): update snapshots * more fixes * test(vrt): update snapshots * copy from main * test(vrt): update snapshots * Create fluffy-ravens-thank.md * snippy snaps * update seg control border * test(vrt): update snapshots * remove fallbacks * copy from main * test(vrt): update snapshots --------- Co-authored-by: langermank <[email protected]>
primer · Jul 29, 2024 · 11e7aef · 11e7aef
1 parent 92e05f7
commit 11e7aef
Show file tree

Hide file tree

Showing 171 changed files with 61 additions and 23 deletions.
diff --git a/.changeset/fluffy-ravens-thank.md b/.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
diff --git a/...nents/Checkbox.test.ts-snapshots/Checkbox-Default-light-high-contrast-linux.png b/...nents/Checkbox.test.ts-snapshots/Checkbox-Default-light-high-contrast-linux.png
diff --git a/.../Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-high-contrast-linux.png b/.../Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-high-contrast-linux.png
diff --git a/...ox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-high-contrast-linux.png b/...ox.test.ts-snapshots/Checkbox-With-Leading-Visual-light-high-contrast-linux.png
diff --git a/...kboxGroup.test.ts-snapshots/CheckboxGroup-Caption-light-high-contrast-linux.png b/...kboxGroup.test.ts-snapshots/CheckboxGroup-Caption-light-high-contrast-linux.png
diff --git a/...kboxGroup.test.ts-snapshots/CheckboxGroup-Default-light-high-contrast-linux.png b/...kboxGroup.test.ts-snapshots/CheckboxGroup-Default-light-high-contrast-linux.png
diff --git a/...eckboxGroup.test.ts-snapshots/CheckboxGroup-Error-light-high-contrast-linux.png b/...eckboxGroup.test.ts-snapshots/CheckboxGroup-Error-light-high-contrast-linux.png
diff --git a/...kboxGroup.test.ts-snapshots/CheckboxGroup-Success-light-high-contrast-linux.png b/...kboxGroup.test.ts-snapshots/CheckboxGroup-Success-light-high-contrast-linux.png
diff --git a/....ts-snapshots/CheckboxGroup-Visually-Hidden-Label-light-high-contrast-linux.png b/....ts-snapshots/CheckboxGroup-Visually-Hidden-Label-light-high-contrast-linux.png
diff --git a/...CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-colorblind-linux.png b/...CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-colorblind-linux.png
diff --git a/...CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-tritanopia-linux.png b/...CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-tritanopia-linux.png
diff --git a/...cleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-colorblind-linux.png b/...cleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-colorblind-linux.png
diff --git a/...cleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-tritanopia-linux.png b/...cleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-tritanopia-linux.png
diff --git a/.../components/Radio.test.ts-snapshots/Radio-Default-light-high-contrast-linux.png b/.../components/Radio.test.ts-snapshots/Radio-Default-light-high-contrast-linux.png
diff --git a/...onents/Radio.test.ts-snapshots/Radio-With-Caption-light-high-contrast-linux.png b/...onents/Radio.test.ts-snapshots/Radio-With-Caption-light-high-contrast-linux.png
diff --git a/...Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-high-contrast-linux.png b/...Radio.test.ts-snapshots/Radio-With-Leading-Visual-light-high-contrast-linux.png
diff --git a/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-colorblind-linux.png b/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-colorblind-linux.png
diff --git a/...omponents/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-dimmed-linux.png b/...omponents/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-dimmed-linux.png
diff --git a/...shots/components/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-linux.png b/...shots/components/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-linux.png
diff --git a/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-tritanopia-linux.png b/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Caption-dark-tritanopia-linux.png
diff --git a/...s/RadioGroup.test.ts-snapshots/RadioGroup-Caption-light-high-contrast-linux.png b/...s/RadioGroup.test.ts-snapshots/RadioGroup-Caption-light-high-contrast-linux.png
diff --git a/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-colorblind-linux.png b/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-colorblind-linux.png
diff --git a/...omponents/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-dimmed-linux.png b/...omponents/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-dimmed-linux.png
diff --git a/...shots/components/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-linux.png b/...shots/components/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-linux.png
diff --git a/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-tritanopia-linux.png b/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Default-dark-tritanopia-linux.png
diff --git a/...s/RadioGroup.test.ts-snapshots/RadioGroup-Default-light-high-contrast-linux.png b/...s/RadioGroup.test.ts-snapshots/RadioGroup-Default-light-high-contrast-linux.png
diff --git a/...ponents/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-colorblind-linux.png b/...ponents/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-colorblind-linux.png
diff --git a/.../components/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-dimmed-linux.png b/.../components/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-dimmed-linux.png
diff --git a/...apshots/components/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-linux.png b/...apshots/components/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-linux.png
diff --git a/...ponents/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-tritanopia-linux.png b/...ponents/RadioGroup.test.ts-snapshots/RadioGroup-Error-dark-tritanopia-linux.png
diff --git a/...nts/RadioGroup.test.ts-snapshots/RadioGroup-Error-light-high-contrast-linux.png b/...nts/RadioGroup.test.ts-snapshots/RadioGroup-Error-light-high-contrast-linux.png
diff --git a/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-colorblind-linux.png b/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-colorblind-linux.png
diff --git a/...omponents/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-dimmed-linux.png b/...omponents/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-dimmed-linux.png
diff --git a/...shots/components/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-linux.png b/...shots/components/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-linux.png
diff --git a/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-tritanopia-linux.png b/...nents/RadioGroup.test.ts-snapshots/RadioGroup-Success-dark-tritanopia-linux.png
diff --git a/...s/RadioGroup.test.ts-snapshots/RadioGroup-Success-light-high-contrast-linux.png b/...s/RadioGroup.test.ts-snapshots/RadioGroup-Success-light-high-contrast-linux.png
diff --git a/...up.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-colorblind-linux.png b/...up.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-colorblind-linux.png
diff --git a/...oGroup.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-dimmed-linux.png b/...oGroup.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-dimmed-linux.png
diff --git a/...ts/RadioGroup.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-linux.png b/...ts/RadioGroup.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-linux.png
diff --git a/...up.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-tritanopia-linux.png b/...up.test.ts-snapshots/RadioGroup-Visually-Hidden-Label-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/RadioGroup-Visually-Hidden-Label-light-high-contrast-linux.png b/...est.ts-snapshots/RadioGroup-Visually-Hidden-Label-light-high-contrast-linux.png
diff --git a/....test.ts-snapshots/RadioGroup-With-External-Label-light-high-contrast-linux.png b/....test.ts-snapshots/RadioGroup-With-External-Label-light-high-contrast-linux.png
diff --git a/.../SegmentedControl-Associated-with-a-Label-and-Caption-dark-colorblind-linux.png b/.../SegmentedControl-Associated-with-a-Label-and-Caption-dark-colorblind-linux.png
diff --git a/...hots/SegmentedControl-Associated-with-a-Label-and-Caption-dark-dimmed-linux.png b/...hots/SegmentedControl-Associated-with-a-Label-and-Caption-dark-dimmed-linux.png
diff --git a/...gmentedControl-Associated-with-a-Label-and-Caption-dark-high-contrast-linux.png b/...gmentedControl-Associated-with-a-Label-and-Caption-dark-high-contrast-linux.png
diff --git a/...s-snapshots/SegmentedControl-Associated-with-a-Label-and-Caption-dark-linux.png b/...s-snapshots/SegmentedControl-Associated-with-a-Label-and-Caption-dark-linux.png
diff --git a/.../SegmentedControl-Associated-with-a-Label-and-Caption-dark-tritanopia-linux.png b/.../SegmentedControl-Associated-with-a-Label-and-Caption-dark-tritanopia-linux.png
diff --git a/...SegmentedControl-Associated-with-a-Label-and-Caption-light-colorblind-linux.png b/...SegmentedControl-Associated-with-a-Label-and-Caption-light-colorblind-linux.png
diff --git a/...mentedControl-Associated-with-a-Label-and-Caption-light-high-contrast-linux.png b/...mentedControl-Associated-with-a-Label-and-Caption-light-high-contrast-linux.png
diff --git a/...-snapshots/SegmentedControl-Associated-with-a-Label-and-Caption-light-linux.png b/...-snapshots/SegmentedControl-Associated-with-a-Label-and-Caption-light-linux.png
diff --git a/...SegmentedControl-Associated-with-a-Label-and-Caption-light-tritanopia-linux.png b/...SegmentedControl-Associated-with-a-Label-and-Caption-light-tritanopia-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Controlled-dark-colorblind-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Controlled-dark-colorblind-linux.png
diff --git a/...ntedControl.test.ts-snapshots/SegmentedControl-Controlled-dark-dimmed-linux.png b/...ntedControl.test.ts-snapshots/SegmentedControl-Controlled-dark-dimmed-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Controlled-dark-high-contrast-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Controlled-dark-high-contrast-linux.png
diff --git a/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Controlled-dark-linux.png b/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Controlled-dark-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Controlled-dark-tritanopia-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Controlled-dark-tritanopia-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Controlled-light-colorblind-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Controlled-light-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/SegmentedControl-Controlled-light-high-contrast-linux.png b/...rol.test.ts-snapshots/SegmentedControl-Controlled-light-high-contrast-linux.png
diff --git a/.../SegmentedControl.test.ts-snapshots/SegmentedControl-Controlled-light-linux.png b/.../SegmentedControl.test.ts-snapshots/SegmentedControl-Controlled-light-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Controlled-light-tritanopia-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Controlled-light-tritanopia-linux.png
diff --git a/...tedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-linux.png b/...tedControl.test.ts-snapshots/SegmentedControl-Default-dark-colorblind-linux.png
diff --git a/...gmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-linux.png b/...gmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-dimmed-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Default-dark-high-contrast-linux.png
diff --git a/...ents/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-linux.png b/...ents/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-dark-linux.png
diff --git a/...tedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-linux.png b/...tedControl.test.ts-snapshots/SegmentedControl-Default-dark-tritanopia-linux.png
diff --git a/...edControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-linux.png b/...edControl.test.ts-snapshots/SegmentedControl-Default-light-colorblind-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Default-light-high-contrast-linux.png
diff --git a/...nts/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-linux.png b/...nts/SegmentedControl.test.ts-snapshots/SegmentedControl-Default-light-linux.png
diff --git a/...edControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-linux.png b/...edControl.test.ts-snapshots/SegmentedControl-Default-light-tritanopia-linux.png
diff --git a/...l.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-colorblind-linux.png b/...l.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-colorblind-linux.png
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-dimmed-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-dimmed-linux.png
diff --git a/...est.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-high-contrast-linux.png b/...est.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-high-contrast-linux.png
diff --git a/...entedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-linux.png b/...entedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-linux.png
diff --git a/...l.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-tritanopia-linux.png b/...l.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-dark-tritanopia-linux.png
diff --git a/....test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-colorblind-linux.png b/....test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-colorblind-linux.png
diff --git a/...st.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-high-contrast-linux.png b/...st.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-high-contrast-linux.png
diff --git a/...ntedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-linux.png b/...ntedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-linux.png
diff --git a/....test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-tritanopia-linux.png b/....test.ts-snapshots/SegmentedControl-Fullwidth-Narrow-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-colorblind-linux.png b/....test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-colorblind-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-dimmed-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-high-contrast-linux.png b/...st.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-high-contrast-linux.png
diff --git a/...ntedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-linux.png b/...ntedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-linux.png
diff --git a/....test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-tritanopia-linux.png b/....test.ts-snapshots/SegmentedControl-Fullwidth-Regular-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-colorblind-linux.png b/...test.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-high-contrast-linux.png b/...t.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-high-contrast-linux.png
diff --git a/...tedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-linux.png b/...tedControl.test.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-linux.png
diff --git a/...test.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-tritanopia-linux.png b/...test.ts-snapshots/SegmentedControl-Fullwidth-Regular-light-tritanopia-linux.png
diff --git a/...dControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-colorblind-linux.png b/...dControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-colorblind-linux.png
diff --git a/...entedControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-dimmed-linux.png b/...entedControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-dimmed-linux.png
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Fullwidth-dark-high-contrast-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Fullwidth-dark-high-contrast-linux.png
diff --git a/...ts/SegmentedControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-linux.png b/...ts/SegmentedControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-linux.png
diff --git a/...dControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-tritanopia-linux.png b/...dControl.test.ts-snapshots/SegmentedControl-Fullwidth-dark-tritanopia-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Fullwidth-light-colorblind-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Fullwidth-light-colorblind-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Fullwidth-light-high-contrast-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Fullwidth-light-high-contrast-linux.png
diff --git a/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Fullwidth-light-linux.png b/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Fullwidth-light-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Fullwidth-light-tritanopia-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Fullwidth-light-tritanopia-linux.png
diff --git a/...dControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-linux.png b/...dControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-colorblind-linux.png
diff --git a/...entedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-linux.png b/...entedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-dimmed-linux.png
diff --git a/...ntrol.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-linux.png b/...ntrol.test.ts-snapshots/SegmentedControl-Icon-Only-dark-high-contrast-linux.png
diff --git a/...ts/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-linux.png b/...ts/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-linux.png
diff --git a/...dControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-linux.png b/...dControl.test.ts-snapshots/SegmentedControl-Icon-Only-dark-tritanopia-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Icon-Only-light-colorblind-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Icon-Only-light-high-contrast-linux.png
diff --git a/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-linux.png b/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Icon-Only-light-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Icon-Only-light-tritanopia-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Playground-dark-colorblind-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Playground-dark-colorblind-linux.png
diff --git a/...ntedControl.test.ts-snapshots/SegmentedControl-Playground-dark-dimmed-linux.png b/...ntedControl.test.ts-snapshots/SegmentedControl-Playground-dark-dimmed-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-Playground-dark-high-contrast-linux.png b/...trol.test.ts-snapshots/SegmentedControl-Playground-dark-high-contrast-linux.png
diff --git a/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Playground-dark-linux.png b/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-Playground-dark-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-Playground-dark-tritanopia-linux.png b/...Control.test.ts-snapshots/SegmentedControl-Playground-dark-tritanopia-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Playground-light-colorblind-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Playground-light-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/SegmentedControl-Playground-light-high-contrast-linux.png b/...rol.test.ts-snapshots/SegmentedControl-Playground-light-high-contrast-linux.png
diff --git a/.../SegmentedControl.test.ts-snapshots/SegmentedControl-Playground-light-linux.png b/.../SegmentedControl.test.ts-snapshots/SegmentedControl-Playground-light-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-Playground-light-tritanopia-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-Playground-light-tritanopia-linux.png
diff --git a/...ts/SegmentedControl-SegmentedControlButton-Playground-dark-colorblind-linux.png b/...ts/SegmentedControl-SegmentedControlButton-Playground-dark-colorblind-linux.png
diff --git a/...pshots/SegmentedControl-SegmentedControlButton-Playground-dark-dimmed-linux.png b/...pshots/SegmentedControl-SegmentedControlButton-Playground-dark-dimmed-linux.png
diff --git a/...SegmentedControl-SegmentedControlButton-Playground-dark-high-contrast-linux.png b/...SegmentedControl-SegmentedControlButton-Playground-dark-high-contrast-linux.png
diff --git a/....ts-snapshots/SegmentedControl-SegmentedControlButton-Playground-dark-linux.png b/....ts-snapshots/SegmentedControl-SegmentedControlButton-Playground-dark-linux.png
diff --git a/...ts/SegmentedControl-SegmentedControlButton-Playground-dark-tritanopia-linux.png b/...ts/SegmentedControl-SegmentedControlButton-Playground-dark-tritanopia-linux.png
diff --git a/...s/SegmentedControl-SegmentedControlButton-Playground-light-colorblind-linux.png b/...s/SegmentedControl-SegmentedControlButton-Playground-light-colorblind-linux.png
diff --git a/...egmentedControl-SegmentedControlButton-Playground-light-high-contrast-linux.png b/...egmentedControl-SegmentedControlButton-Playground-light-high-contrast-linux.png
diff --git a/...ts-snapshots/SegmentedControl-SegmentedControlButton-Playground-light-linux.png b/...ts-snapshots/SegmentedControl-SegmentedControlButton-Playground-light-linux.png
diff --git a/...s/SegmentedControl-SegmentedControlButton-Playground-light-tritanopia-linux.png b/...s/SegmentedControl-SegmentedControlButton-Playground-light-tritanopia-linux.png
diff --git a/...egmentedControl-SegmentedControlIconButton-Playground-dark-colorblind-linux.png b/...egmentedControl-SegmentedControlIconButton-Playground-dark-colorblind-linux.png
diff --git a/...ts/SegmentedControl-SegmentedControlIconButton-Playground-dark-dimmed-linux.png b/...ts/SegmentedControl-SegmentedControlIconButton-Playground-dark-dimmed-linux.png
diff --git a/...entedControl-SegmentedControlIconButton-Playground-dark-high-contrast-linux.png b/...entedControl-SegmentedControlIconButton-Playground-dark-high-contrast-linux.png
diff --git a/...snapshots/SegmentedControl-SegmentedControlIconButton-Playground-dark-linux.png b/...snapshots/SegmentedControl-SegmentedControlIconButton-Playground-dark-linux.png
diff --git a/...egmentedControl-SegmentedControlIconButton-Playground-dark-tritanopia-linux.png b/...egmentedControl-SegmentedControlIconButton-Playground-dark-tritanopia-linux.png
diff --git a/...gmentedControl-SegmentedControlIconButton-Playground-light-colorblind-linux.png b/...gmentedControl-SegmentedControlIconButton-Playground-light-colorblind-linux.png
diff --git a/...ntedControl-SegmentedControlIconButton-Playground-light-high-contrast-linux.png b/...ntedControl-SegmentedControlIconButton-Playground-light-high-contrast-linux.png
diff --git a/...napshots/SegmentedControl-SegmentedControlIconButton-Playground-light-linux.png b/...napshots/SegmentedControl-SegmentedControlIconButton-Playground-light-linux.png
diff --git a/...gmentedControl-SegmentedControlIconButton-Playground-light-tritanopia-linux.png b/...gmentedControl-SegmentedControlIconButton-Playground-light-tritanopia-linux.png
diff --git a/...snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-colorblind-linux.png b/...snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-colorblind-linux.png
diff --git a/....ts-snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-dimmed-linux.png b/....ts-snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-dimmed-linux.png
diff --git a/...pshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-high-contrast-linux.png b/...pshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-high-contrast-linux.png
diff --git a/...ol.test.ts-snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-linux.png b/...ol.test.ts-snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-linux.png
diff --git a/...snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-tritanopia-linux.png b/...snapshots/SegmentedControl-Variant-Narrow-Action-Menu-dark-tritanopia-linux.png
diff --git a/...napshots/SegmentedControl-Variant-Narrow-Action-Menu-light-colorblind-linux.png b/...napshots/SegmentedControl-Variant-Narrow-Action-Menu-light-colorblind-linux.png
diff --git a/...shots/SegmentedControl-Variant-Narrow-Action-Menu-light-high-contrast-linux.png b/...shots/SegmentedControl-Variant-Narrow-Action-Menu-light-high-contrast-linux.png
diff --git a/...l.test.ts-snapshots/SegmentedControl-Variant-Narrow-Action-Menu-light-linux.png b/...l.test.ts-snapshots/SegmentedControl-Variant-Narrow-Action-Menu-light-linux.png
diff --git a/...napshots/SegmentedControl-Variant-Narrow-Action-Menu-light-tritanopia-linux.png b/...napshots/SegmentedControl-Variant-Narrow-Action-Menu-light-tritanopia-linux.png
diff --git a/...snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-colorblind-linux.png b/...snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-colorblind-linux.png
diff --git a/....ts-snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-dimmed-linux.png b/....ts-snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-dimmed-linux.png
diff --git a/...pshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-high-contrast-linux.png b/...pshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-high-contrast-linux.png
diff --git a/...ol.test.ts-snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-linux.png b/...ol.test.ts-snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-linux.png
diff --git a/...snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-tritanopia-linux.png b/...snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-dark-tritanopia-linux.png
diff --git a/...napshots/SegmentedControl-Variant-Narrow-Hide-Labels-light-colorblind-linux.png b/...napshots/SegmentedControl-Variant-Narrow-Hide-Labels-light-colorblind-linux.png
diff --git a/...shots/SegmentedControl-Variant-Narrow-Hide-Labels-light-high-contrast-linux.png b/...shots/SegmentedControl-Variant-Narrow-Hide-Labels-light-high-contrast-linux.png
diff --git a/...l.test.ts-snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-light-linux.png b/...l.test.ts-snapshots/SegmentedControl-Variant-Narrow-Hide-Labels-light-linux.png
diff --git a/...napshots/SegmentedControl-Variant-Narrow-Hide-Labels-light-tritanopia-linux.png b/...napshots/SegmentedControl-Variant-Narrow-Hide-Labels-light-tritanopia-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-linux.png b/...Control.test.ts-snapshots/SegmentedControl-With-Icons-dark-colorblind-linux.png
diff --git a/...ntedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-linux.png b/...ntedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-dimmed-linux.png
diff --git a/...trol.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-linux.png b/...trol.test.ts-snapshots/SegmentedControl-With-Icons-dark-high-contrast-linux.png
diff --git a/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-linux.png b/...s/SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-dark-linux.png
diff --git a/...Control.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-linux.png b/...Control.test.ts-snapshots/SegmentedControl-With-Icons-dark-tritanopia-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-With-Icons-light-colorblind-linux.png
diff --git a/...rol.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-linux.png b/...rol.test.ts-snapshots/SegmentedControl-With-Icons-light-high-contrast-linux.png
diff --git a/.../SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-linux.png b/.../SegmentedControl.test.ts-snapshots/SegmentedControl-With-Icons-light-linux.png
diff --git a/...ontrol.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-linux.png b/...ontrol.test.ts-snapshots/SegmentedControl-With-Icons-light-tritanopia-linux.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/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;

diff --git a/packages/react/src/CircleOcticon/CircleOcticon.stories.tsx b/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 = {

diff --git a/packages/react/src/Radio/Radio.tsx b/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')};
     }
   }
 

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/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

diff --git a/packages/react/src/StateLabel/StateLabel.tsx b/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)',
     },
   },
 })

diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/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;

diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/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')};

diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/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;
   }

diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/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;

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/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;

diff --git a/packages/react/src/internal/utils/sharedCheckboxAndRadioStyles.ts b/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')};