fix: Windows High Contrast Mode colors (#769)

evadecker · web-flow · commit 908b58375150 · 2025-09-22T19:30:39.000-04:00
diff --git a/.changeset/modern-rocks-switch.md b/.changeset/modern-rocks-switch.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Fix color issues in Windows High Contrast (Forced Colors) mode
diff --git a/src/components/app/Logo/Logo.tsx b/src/components/app/Logo/Logo.tsx
@@ -7,7 +7,10 @@ export interface LogoProps {
 export const Logo = ({ className }: LogoProps) => (
   <svg
     aria-label="Namesake"
-    className={twMerge("w-auto text-normal shrink-0", className)}
+    className={twMerge(
+      "w-auto text-normal shrink-0 forced-colors:text-[CanvasText]",
+      className,
+    )}
     fill="currentColor"
     height="30"
     role="img"
diff --git a/src/components/common/Badge/Badge.tsx b/src/components/common/Badge/Badge.tsx
@@ -30,7 +30,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const badge = tv({
-  base: "px-1 font-medium w-max tabular-nums text-center inline-flex justify-center gap-1 items-center shrink-0 bg-theme-a3 text-dim",
+  base: "px-1 font-medium w-max tabular-nums text-center inline-flex justify-center gap-1 items-center shrink-0 bg-theme-a3 text-dim forced-colors:border forced-colors:bg-transparent forced-colors:border-[ButtonBorder] forced-colors:text-[CanvasText]",
   variants: {
     size: {
       xs: "text-[10px] rounded-sm h-4 px-1 min-w-4 leading-none",
@@ -50,7 +50,7 @@ const badge = tv({
 });
 
 const icon = tv({
-  base: "shrink-0 size-4",
+  base: "shrink-0 size-4 forced-colors:text-[CanvasText]",
   variants: {
     size: {
       xs: "size-3",
diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx
@@ -16,7 +16,7 @@ export interface BannerProps {
 }
 
 const bannerStyles = tv({
-  base: "flex items-start w-full rounded-lg bg-primary-3 text-primary-12 [&_a]:text-primary-12 prose",
+  base: "flex items-start w-full rounded-lg bg-primary-3 text-primary-12 [&_a]:text-primary-12 prose forced-colors:border forced-colors:border-[ButtonBorder]",
   variants: {
     variant: {
       success: "bg-green-3 text-green-12 [&_a]:text-green-12",
@@ -35,7 +35,7 @@ const bannerStyles = tv({
 });
 
 const iconStyles = tv({
-  base: "text-primary-11 shrink-0",
+  base: "text-primary-11 shrink-0 forced-colors:text-[ButtonText]",
   variants: {
     variant: {
       success: "text-green-11",
diff --git a/src/components/common/Breadcrumbs/Breadcrumbs.tsx b/src/components/common/Breadcrumbs/Breadcrumbs.tsx
@@ -31,7 +31,9 @@ export function Breadcrumb(
       )}
     >
       <Link variant="secondary" {...props} />
-      {props.href && <ChevronRight className="w-4 h-4 text-subtle" />}
+      {props.href && (
+        <ChevronRight className="w-4 h-4 text-subtle forced-colors:text-[CanvasText]" />
+      )}
     </AriaBreadcrumb>
   );
 }
diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx
@@ -31,18 +31,19 @@ export interface ButtonProps extends AriaButtonProps {
 
 export const buttonStyles = tv({
   extend: focusRing,
-  base: "py-2 text-sm shadow-sm font-medium relative whitespace-nowrap rounded-lg border-0 transition-all duration-200 ease-in-out flex items-center justify-center tabular-nums",
+  base: "py-2 text-sm shadow-sm font-medium relative whitespace-nowrap rounded-lg border transition-all duration-200 ease-in-out flex items-center justify-center tabular-nums",
   variants: {
     variant: {
-      primary: "bg-primary-9 hover:bg-primary-10 text-primary-contrast",
+      primary:
+        "bg-primary-9 border-primary-9 hover:bg-primary-10 text-primary-contrast",
       secondary:
-        "bg-white dark:bg-theme-4 dark:hover:bg-theme-5 text-normal hover:text-theme-11 dark:hover:text-white",
+        "bg-white border-dim dark:bg-theme-4 dark:hover:bg-theme-5 text-normal hover:text-theme-11 dark:hover:text-white",
       destructive:
-        "bg-red-9 text-white hover:bg-red-10 outline-0 !outline-red-a8",
-      success: "bg-green-9 text-white hover:bg-green-10",
-      icon: "bg-transparent hover:bg-theme-a3 text-dim shadow-none hover:text-normal flex shrink-0 items-center justify-center rounded-full",
+        "bg-red-9 border-red-9 text-white hover:bg-red-10 !outline-red-a8",
+      success: "bg-green-9 border-green-9 text-white hover:bg-green-10",
+      icon: "bg-transparent border-transparent hover:bg-theme-a3 text-dim shadow-none hover:text-normal flex shrink-0 items-center justify-center rounded-full",
       ghost:
-        "bg-transparent hover:bg-theme-a3 text-dim shadow-none hover:text-normal",
+        "bg-transparent border-transparent hover:bg-theme-a3 text-dim shadow-none hover:text-normal",
     },
     size: {
       small: "h-8 px-2 gap-1.5",
@@ -51,7 +52,7 @@ export const buttonStyles = tv({
     },
     isDisabled: {
       false: "cursor-pointer",
-      true: "cursor-default opacity-40",
+      true: "cursor-default opacity-40 forced-colors:text-[GrayText]",
     },
   },
   compoundVariants: [
diff --git a/src/components/common/Calendar/Calendar.tsx b/src/components/common/Calendar/Calendar.tsx
@@ -18,10 +18,11 @@ import { focusRing } from "@/components/utils";
 
 const cellStyles = tv({
   extend: focusRing,
-  base: "w-9 h-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none",
+  base: "size-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none",
   variants: {
     isSelected: {
-      false: "text-normal hover:bg-primary-3 pressed:bg-primary-3",
+      false:
+        "text-normal hover:bg-primary-3 pressed:bg-primary-3 forced-colors:text-[ButtonText] hover:forced-colors:bg-[Highlight] pressed:forced-colors:text-[HighlightText]",
       true: "bg-primary-9 invalid:bg-red-9 text-white forced-colors:bg-[Highlight] forced-colors:invalid:bg-[Mark] forced-colors:text-[HighlightText]",
     },
     isDisabled: {
diff --git a/src/components/common/Checkbox/Checkbox.tsx b/src/components/common/Checkbox/Checkbox.tsx
@@ -72,7 +72,7 @@ const boxStyles = tv({
   variants: {
     isSelected: {
       false: "bg-element border-normal",
-      true: "bg-primary-9 border-transparent",
+      true: "bg-primary-9 border-transparent forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
     },
     isInvalid: {
       true: "text-red-9",
diff --git a/src/components/common/HiddenText/HiddenText.tsx b/src/components/common/HiddenText/HiddenText.tsx
@@ -23,7 +23,8 @@ const contentStyles = tv({
   variants: {
     isRevealed: {
       true: "bg-transparent",
-      false: "text-transparent bg-theme-4",
+      false:
+        "text-transparent bg-theme-4 forced-colors:bg-[CanvasText] forced-colors:text-[CanvasText]",
     },
   },
 });
diff --git a/src/components/common/ListBox/ListBox.tsx b/src/components/common/ListBox/ListBox.tsx
@@ -37,7 +37,7 @@ export const itemStyles = tv({
   base: "group relative flex items-center gap-8 cursor-pointer select-none py-1.5 px-2.5 rounded-md will-change-transform forced-color-adjust-none",
   variants: {
     isSelected: {
-      false: "text-normal -outline-offset-2",
+      false: "text-normal -outline-offset-2 forced-colors:text-[ButtonText]",
       true: "bg-primary-9 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white forced-colors:outline-[HighlightText]",
     },
     isDisabled: {
@@ -56,7 +56,7 @@ export function ListBoxItem(props: ListBoxItemProps) {
       {composeRenderProps(props.children, (children) => (
         <>
           {children}
-          <div className="absolute left-4 right-4 bottom-0 h-px bg-white/20 forced-colors:bg-[HighlightText] hidden [.group[data-selected]:has(+[data-selected])_&]:block" />
+          <div className="absolute left-4 right-4 bottom-0 h-px bg-white/20 hidden [.group[data-selected]:has(+[data-selected])_&]:block forced-colors:hidden" />
         </>
       ))}
     </AriaListBoxItem>
@@ -67,7 +67,7 @@ export const dropdownItemStyles = tv({
   base: "group flex items-center gap-3 cursor-pointer select-none py-2 px-2.5 pr-3 rounded-lg outline-none text-sm forced-color-adjust-none",
   variants: {
     isDisabled: {
-      false: "text-normal",
+      false: "text-normal forced-colors:text-[ButtonText]",
       true: "text-dim opacity-50 forced-colors:text-[GrayText] cursor-default",
     },
     isFocused: {
diff --git a/src/components/common/Popover/Popover.tsx b/src/components/common/Popover/Popover.tsx
@@ -15,7 +15,7 @@ export interface PopoverProps extends Omit<AriaPopoverProps, "children"> {
 }
 
 export const popoverStyles = tv({
-  base: "bg-element outline-none forced-colors:bg-[Canvas] shadow-2xl rounded-xl bg-clip-padding border border-overlay text-normal",
+  base: "bg-element overflow-y-auto outline-none forced-colors:bg-[Canvas] shadow-2xl rounded-xl bg-clip-padding border border-overlay text-normal",
   variants: {
     isEntering: {
       true: "animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200",
diff --git a/src/components/common/RangeCalendar/RangeCalendar.tsx b/src/components/common/RangeCalendar/RangeCalendar.tsx
@@ -21,9 +21,9 @@ const cell = tv({
   base: "w-full h-full flex items-center justify-center rounded-full cursor-pointer forced-color-adjust-none text-normal",
   variants: {
     selectionState: {
-      none: "group-hover:bg-primary-3 group-pressed:bg-primary-2",
+      none: "group-hover:bg-primary-3 group-pressed:bg-primary-2 forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:pressed:text-[HighlightText]",
       middle: [
-        "group-hover:bg-primary-4 forced-colors:group-hover:bg-[Highlight]",
+        "group-hover:bg-primary-4 forced-colors:group-hover:bg-[Highlight] forced-colors:group-hover:text-[HighlightText]",
         "group-hover:group-invalid:bg-red-4 forced-colors:group-hover:group-invalid:bg-[Mark]",
       ],
       cap: "bg-primary-9 group-invalid:bg-red-9 forced-colors:bg-[Highlight] forced-colors:group-invalid:bg-[Mark] text-white forced-colors:text-[HighlightText]",
diff --git a/src/components/common/Skeleton/Skeleton.tsx b/src/components/common/Skeleton/Skeleton.tsx
@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const skeletonStyles = tv({
-  base: "w-full h-full relative animate-fade-in before:inset-0 before:absolute before:bg-theme-a3 before:rounded-sm before:animate-pulse",
+  base: "w-full h-full relative animate-fade-in before:inset-0 before:absolute before:bg-theme-a3 before:rounded-sm before:animate-pulse forced-colors:before:bg-[ButtonBorder]",
   variants: {
     type: {
       circle: "before:rounded-full",
diff --git a/src/components/common/Slider/Slider.tsx b/src/components/common/Slider/Slider.tsx
@@ -26,7 +26,7 @@ const trackStyles = tv({
 
 const thumbStyles = tv({
   extend: focusRing,
-  base: "size-6 group-orientation-horizontal:mt-6 group-orientation-vertical:ml-3 rounded-full bg-primary-9 shadow-sm",
+  base: "size-6 group-orientation-horizontal:mt-6 group-orientation-vertical:ml-3 rounded-full bg-primary-9 shadow-sm forced-colors:border",
   variants: {
     isDragging: {
       true: "bg-primary-10 forced-colors:bg-[ButtonBorder]",
@@ -77,7 +77,7 @@ export function Slider<T extends number | number[]>({
           <>
             <div className={trackStyles({ orientation, isDisabled })} />
             <div
-              className="absolute h-[6px] top-[50%] translate-y-[-50%] rounded-full bg-primary-6"
+              className="absolute h-[6px] top-[50%] translate-y-[-50%] rounded-full bg-primary-6 forced-colors:bg-[Highlight]"
               style={getThumbTrackFillStyle(state)}
             />
             {state.values.map((_, i) => (
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
@@ -45,7 +45,7 @@ export function Tabs({ size = "medium", className, ...props }: TabsProps) {
 }
 
 const tabListStyles = tv({
-  base: "grid bg-theme-a3 dark:bg-theme-a2 rounded-lg p-1 relative isolate after:absolute after:inset-0 after:bg-white dark:after:bg-theme-a3 after:-z-10 after:rounded-md after:shadow-sm",
+  base: "grid bg-theme-a3 dark:bg-theme-a2 rounded-lg p-1 relative isolate after:absolute after:inset-0 after:bg-white dark:after:bg-theme-a3 after:-z-10 after:rounded-md after:shadow-sm forced-colors:border forced-colors:border-[ButtonBorder]",
   variants: {
     orientation: {
       horizontal: "grid-flow-col auto-cols-fr",
@@ -87,7 +87,7 @@ const tabProps = tv({
   base: "flex items-center justify-center cursor-pointer rounded-md text-sm text-center transition forced-color-adjust-none",
   variants: {
     isSelected: {
-      false: "text-dim hover:text-normal",
+      false: "text-dim hover:text-normal forced-colors:text-[ButtonText]",
       true: "forced-colors:text-[HighlightText] forced-colors:bg-[Highlight]",
     },
     isDisabled: {
diff --git a/src/components/common/ToggleButton/ToggleButton.tsx b/src/components/common/ToggleButton/ToggleButton.tsx
@@ -21,7 +21,7 @@ const styles = tv({
     isSelected: {
       false:
         "bg-transparent text-dim hover:text-normal before:absolute before:-z-1 before:inset-1 before:rounded-full before:bg-transparent hover:before:bg-theme-2/80 dark:hover:before:bg-theme-11/15",
-      true: "bg-theme-1 dark:bg-theme-3 text-normal shadow-xs border border-dim",
+      true: "bg-theme-1 dark:bg-theme-3 text-normal shadow-xs border border-dim forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
     },
     isDisabled: buttonStyles.variants.isDisabled,
     size: {
diff --git a/src/components/common/Tooltip/Tooltip.tsx b/src/components/common/Tooltip/Tooltip.tsx
@@ -14,7 +14,7 @@ export interface TooltipProps extends Omit<AriaTooltipProps, "children"> {
 }
 
 const styles = tv({
-  base: "group bg-theme-12 text-theme-1 text-sm rounded-lg drop-shadow-md will-change-transform px-3 py-1",
+  base: "group bg-theme-12 text-theme-1 text-sm rounded-lg border border-theme-12 drop-shadow-md will-change-transform px-3 py-1",
   variants: {
     isEntering: {
       true: "animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200",
@@ -39,7 +39,7 @@ export function Tooltip({ children, ...props }: TooltipProps) {
           width={8}
           height={8}
           viewBox="0 0 8 8"
-          className="fill-theme-12 forced-colors:fill-[Canvas] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
+          className="fill-theme-12 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
         >
           <path d="M0 0 L4 4 L8 0" />
         </svg>
diff --git a/src/components/common/Tree/Tree.tsx b/src/components/common/Tree/Tree.tsx
@@ -67,7 +67,7 @@ const chevron = tv({
     },
     isDisabled: {
       true: "text-dim forced-colors:text-[GrayText]",
-      false: "pointer-events-none",
+      false: "pointer-events-none forced-colors:text-[ButtonText]",
     },
   },
 });
@@ -121,7 +121,9 @@ function TreeItemContent({ children, icon, ...props }: TreeItemContentProps) {
             ) : (
               <div className="shrink-0 h-5 w-6.5" />
             )}
-            {Icon && <Icon className="size-5 text-dim p-0.5 mr-1.5" />}
+            {Icon && (
+              <Icon className="size-5 text-dim p-0.5 mr-1.5 forced-colors:text-[ButtonText]" />
+            )}
             {children}
           </div>
         );
diff --git a/src/components/utils.ts b/src/components/utils.ts
@@ -3,10 +3,10 @@ import { twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
 
 export const focusRing = tv({
-  base: "outline outline-offset-2 has-[button[data-focus-visible]]:outline-none",
+  base: "outline outline-offset-2 has-[button[data-focus-visible]]:outline-none forced-colors:outline-[Highlight]",
   variants: {
     isFocusVisible: {
-      false: "outline-transparent",
+      false: "outline-transparent outline-0",
       true: "outline-3 outline-primary-a8 animate-focus-ring-in motion-reduce:animate-none",
     },
   },
diff --git a/src/styles/editor.css b/src/styles/editor.css
@@ -105,6 +105,11 @@
       font-size: 1.1em;
       content: counter(steps);
       @apply bg-theme-4;
+      
+      @media (forced-colors: active) {
+        background-color: Canvas;
+        border: 1px ButtonBorder solid;
+      }
     }
     
     &::after {
@@ -115,6 +120,10 @@
       bottom: 0;
       @apply bg-theme-4;
       content: "";
+
+      @media (forced-colors: active) {
+        background-color: ButtonBorder;
+      }
     }
     
     &:last-child::after {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"namesake": patch
 +---
++
 +Fix color issues in Windows High Contrast (Forced Colors) mode
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,9 @@ export function Breadcrumb(`
`31`	`31`	`)}`
`32`	`32`	`>`
`33`	`33`	`<Link variant="secondary" {...props} />`
`34`		`- {props.href && <ChevronRight className="w-4 h-4 text-subtle" />}`
	`34`	`+ {props.href && (`
	`35`	`+ <ChevronRight className="w-4 h-4 text-subtle forced-colors:text-[CanvasText]" />`
	`36`	`+ )}`
`35`	`37`	`</AriaBreadcrumb>`
`36`	`38`	`);`
`37`	`39`	`}`