Segmented: the selected segment shows in dark mode

packages/ui/src/components/segmented.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 /** The sliding selected card (react-aria's SelectionIndicator), shared by Segmented, Tabs and ToggleGroup. It sits
     behind the labels (the group is `isolate`), and width/height transition too, so it resizes between unequal items. */
 export const segmentIndicator =
-  'absolute top-0 left-0 -z-1 size-full rounded-[inherit] bg-card shadow-[0_1px_4px_black] shadow-black/14 transition-[translate,width,height] duration-spring-smooth ease-spring-smooth motion-reduce:transition-none';
+  'absolute top-0 left-0 -z-1 size-full rounded-[inherit] bg-segment shadow-[0_1px_4px_black] shadow-black/14 transition-[translate,width,height] duration-spring-smooth ease-spring-smooth motion-reduce:transition-none';
 
 export interface SegmentedOption {
   id: string;

packages/ui/src/components/tabs.tsx

@@ -103,7 +103,7 @@ export function Tab({ className, children, ...props }: AriaTabProps) {
     >
       {composeRenderProps(children, (kids) => (
         <>
-          <SelectionIndicator data-slot="tab-indicator" className={variant === 'underline' ? underlineIndicator : cn(segmentIndicator, 'bg-card')} />
+          <SelectionIndicator data-slot="tab-indicator" className={variant === 'underline' ? underlineIndicator : segmentIndicator} />
           {kids}
         </>
       ))}

packages/ui/src/components/toggle-group.tsx

@@ -62,7 +62,7 @@ export function ToggleGroupItem({ className, variant, size, children, ...props }
       {...props}
     >
       {slide
-        ? composeRenderProps(children, (kids) => <><SelectionIndicator data-slot="toggle-group-indicator" className={cn(segmentIndicator, 'bg-card')} />{kids}</>)
+        ? composeRenderProps(children, (kids) => <><SelectionIndicator data-slot="toggle-group-indicator" className={segmentIndicator} />{kids}</>)
         : children}
     </Toggle>
   );

packages/ui/src/lib/tokens.generated.ts

@@ -38,6 +38,7 @@ export const COLOR_TOKENS = [
   'warning',
   'tertiary-foreground',
   'secondary-strong',
+  'segment',
   'overlay',
   'bar',
   'sticky',
@@ -123,6 +124,7 @@ export const THEME_VARS = [
   'warning',
   'tertiary-foreground',
   'secondary-strong',
+  'segment',
   'overlay',
   'bar',
   'sticky',

packages/ui/src/theme.css

@@ -97,6 +97,7 @@
   --handle: rgba(120, 120, 128, .34);
   --code: #101014;
   --code-foreground: #D8D8E2;
+  --segment: #636366;
 }
 
 /* ── Workbench scope (WorkbenchShell, WorkbenchTheme, Composer surfaces): dark-first IDE palette ── */
@@ -159,6 +160,7 @@
   --code: #0C0C10;
   --code-foreground: #D8D8E2;
   --scope-terminal-background: #0C0C10;
+  --segment: #636366;
 }
 
 /* ── Terminal scope: the Workbench's integrated terminal stays dark in both appearances ── */
@@ -195,6 +197,7 @@
   --input: rgba(120, 120, 128, .24);
   --tertiary-foreground: rgba(235, 235, 245, .32);
   --secondary-strong: rgba(120, 120, 128, .36);
+  --segment: #636366;
 }
 [data-theme-scope="sheet"].light {
   color-scheme: light;

packages/ui/src/tokens.css

@@ -49,6 +49,8 @@
   --color-warning: var(--warning, oklch(0.769 0.165 70.1));
   --color-tertiary-foreground: var(--tertiary-foreground, color-mix(in oklab, var(--muted-foreground) 60%, transparent));
   --color-secondary-strong: var(--secondary-strong, var(--accent));
+  /* The selected thumb of a segmented control, tabs or toggle group: the card in light, a raised gray in dark. */
+  --color-segment: var(--segment, var(--card));
   --color-overlay: var(--overlay, color-mix(in oklab, black 40%, transparent));
   --color-bar: var(--bar, color-mix(in oklab, var(--background) 85%, transparent));
   --color-sticky: var(--sticky, color-mix(in oklab, var(--muted) 92%, transparent));

registry.json

@@ -14,6 +14,7 @@
           "color-warning": "var(--warning, oklch(0.769 0.165 70.1))",
           "color-tertiary-foreground": "var(--tertiary-foreground, color-mix(in oklab, var(--muted-foreground) 60%, transparent))",
           "color-secondary-strong": "var(--secondary-strong, var(--accent))",
+          "color-segment": "var(--segment, var(--card))",
           "color-overlay": "var(--overlay, color-mix(in oklab, black 40%, transparent))",
           "color-bar": "var(--bar, color-mix(in oklab, var(--background) 85%, transparent))",
           "color-sticky": "var(--sticky, color-mix(in oklab, var(--muted) 92%, transparent))",
@@ -1322,7 +1323,8 @@
           "sticky": "rgba(18, 18, 20, .9)",
           "handle": "rgba(120, 120, 128, .34)",
           "code": "#101014",
-          "code-foreground": "#D8D8E2"
+          "code-foreground": "#D8D8E2",
+          "segment": "#636366"
         }
       },
       "css": {
@@ -1429,7 +1431,8 @@
           "--handle": "rgba(255, 255, 255, .22)",
           "--code": "#0C0C10",
           "--code-foreground": "#D8D8E2",
-          "--scope-terminal-background": "#0C0C10"
+          "--scope-terminal-background": "#0C0C10",
+          "--segment": "#636366"
         },
         "[data-theme-scope=\"terminal\"]": {
           "color-scheme": "dark",
@@ -1460,7 +1463,8 @@
           "--border": "rgba(84, 84, 88, .6)",
           "--input": "rgba(120, 120, 128, .24)",
           "--tertiary-foreground": "rgba(235, 235, 245, .32)",
-          "--secondary-strong": "rgba(120, 120, 128, .36)"
+          "--secondary-strong": "rgba(120, 120, 128, .36)",
+          "--segment": "#636366"
         },
         "[data-theme-scope=\"sheet\"].light": {
           "color-scheme": "light",