feat: SW-2292 dark-mode styling polish (palette + selected/hover contrast) (#179)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: boramyi-ts

src/components/ui/button.tsx

@@ -9,13 +9,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/85",
+        default:
+          "bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--primary),var(--primary-foreground)_15%)]",
         outline:
-          "border-border bg-transparent hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:border-input dark:hover:bg-input/50",
+          "border-border bg-transparent hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:border-input",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/75 dark:hover:bg-secondary/85 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--secondary),var(--secondary-foreground)_15%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:border-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",

src/components/ui/tabs.tsx

@@ -65,7 +65,7 @@ function TabsTrigger({
       className={cn(
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:shadow-focus focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-elevation-3 group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:text-primary dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:text-primary",
-        "data-active:bg-card data-active:text-foreground data-active:shadow-sm dark:data-active:bg-card dark:data-active:text-foreground",
+        "data-active:bg-card data-active:text-foreground data-active:shadow-sm dark:data-active:bg-[color-mix(in_oklab,var(--card),white_20%)] dark:data-active:text-foreground",
         "not-data-active:hover:bg-accent not-data-active:hover:text-accent-foreground",
         "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className

src/components/ui/toggle-group.tsx

@@ -75,6 +75,10 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
+        // SW-2292: selected group items use a high-contrast primary fill (the
+        // shared toggle `on` state is the subtle bg-accent). twMerge drops the
+        // inherited accent so this wins; standalone Toggle is unaffected.
+        "aria-pressed:bg-primary aria-pressed:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
         className
       )}
       {...props}

src/index.tailwind.css

@@ -530,11 +530,11 @@
   --card-foreground: var(--surface-foreground);
   --popover: var(--surface-bright);
   --popover-foreground: var(--surface-foreground);
-  /* Primary — TS Blue tone 80 for dark */
-  --primary: oklch(0.8296 0.0847 273.37); /* #B5C4FF */
+  /* Primary — brighter sky-blue for dark, reads more clearly as interactive (SW-2292) */
+  --primary: oklch(0.8578 0.071 255.72); /* #B2D3FF */
   --primary-foreground: var(--on-primary); /* #102F72 */
-  /* Secondary — Light Blue container (dark) */
-  --secondary: oklch(0.4412 0.1421 262.97); /* #264DA0 */
+  /* Secondary — deeper navy container for dark (SW-2292) */
+  --secondary: oklch(0.3119 0.1277 270.01); /* #1A2670 */
   --secondary-foreground: var(--on-secondary); /* #DADEFD */
   /* Muted — Neutral tone 5 */
   --muted: oklch(0.18 0.0102 285.33); /* #111116 */
@@ -546,7 +546,7 @@
   --tertiary: oklch(0.8207 0.1194 206.68); /* #4FDAEB */
   --tertiary-foreground: oklch(0.3047 0.0525 208.75); /* #00363D */
   /* Semantic status colors (lighter tones for dark bg) */
-  --info: oklch(0.8384 0.0801 273.65); /* #B9C7FF */
+  --info: oklch(0.8578 0.071 255.72); /* #B2D3FF — matches --primary (as in light mode) */
   --info-foreground: oklch(0.3284 0.1216 262.85); /* #102F72 — 7.6:1 on --info */
   --destructive: oklch(0.8383 0.0891 26.76); /* #FFB4AB */
   --destructive-foreground: oklch(0.3275 0.1336 27.32); /* #690005 — 7.7:1 on --destructive */