@vvedantb/native-ui 0.3.16 → 0.3.17

package/README.md

@@ -50,7 +50,7 @@ To hide a tab, give its screen Expo Router's `href: null`. From 0.3.9 `FloatingT
 </Tabs>
 ```
 
-From 0.3.16 the focused tab sits on a rounded pill in the web segmented pill fill (`tabColors("segmented", …)`: `--tabs-pill-bg`, `palette.segment`, with the `TabsTrigger` pills outline), with the foreground label and icon; the other tabs are muted. A route's `tabBarActiveTintColor` and `tabBarInactiveTintColor` still override the label and icon colours. The pill is one tab wide, inset 4 from the bar on every side, and slides to a newly focused tab over the web `--tabs-dur` (200 ms) and `--tabs-ease`. It counts only the tabs drawn, and there is none while a hidden route is focused.
+From 0.3.16 the focused tab sits on a rounded pill with the `TabsTrigger` pills outline, with the foreground label and icon; the other tabs are muted. From 0.3.17 the pill fill is `floatingTabPillColors(scheme)`: the muted `palette.default` (`--default`, `#ebebeb`) in light, so it shows on the near-white glass bar, and `palette.segment` (`--segment`, `#474747`) in dark. On the web the `--segment` pill sits on a `--default` track; here the bar is the raised surface, so the light pill takes the track fill. A route's `tabBarActiveTintColor` and `tabBarInactiveTintColor` still override the label and icon colours. The pill is one tab wide, inset 4 from the bar on every side, and slides to a newly focused tab over the web `--tabs-dur` (200 ms) and `--tabs-ease`. It counts only the tabs drawn, and there is none while a hidden route is focused.
 
 ## Entry points
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar and the family app marks.",
   "type": "module",

package/src/FloatingTabBar.tsx

@@ -7,7 +7,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { tabColors, typeStyle } from "./controlStyles";
+import { floatingTabPillColors, tabColors, typeStyle } from "./controlStyles";
 import { selectionHaptic } from "./haptics";
 import { FloatingSurface } from "./FloatingSurface";
 import { isTabBarRouteVisible, type FloatingTabOptions } from "./tabBarRoutes";
@@ -53,8 +53,8 @@ export type FloatingTabBarProps = {
 
 /**
  * The floating pill tab bar, for the `tabBar` prop of Expo Router's `Tabs`.
- * The focused tab sits on a pill in the web segmented pill fill
- * (`tabColors`), with the foreground label; the others are muted. A route's
+ * The focused tab sits on a pill (`floatingTabPillColors`), with the
+ * foreground label; the others are muted. A route's
  * `tabBarActiveTintColor` and `tabBarInactiveTintColor` override the label
  * and icon colours. Hide a tab with `options={{ href: null }}` on its
  * `Tabs.Screen`: the bar draws no tab for it (`isTabBarRouteVisible`), and
@@ -170,9 +170,10 @@ export function FloatingTabBar({
 
 /**
  * The pill behind tab `index` of `count` drawn tabs: one tab wide (they share
- * the row equally), `TAB_BAR_PADDING` inside the bar, in the web segmented
- * pill fill (`tabColors`, `--tabs-pill-bg`) and the `TabsTrigger` pills
- * outline. It slides to a newly focused tab, as the web segmented pill does,
+ * the row equally), `TAB_BAR_PADDING` inside the bar, in
+ * `floatingTabPillColors` (the muted `--default` in light, `--segment` in
+ * dark, so it shows on the glass bar) and the `TabsTrigger` pills outline.
+ * It slides to a newly focused tab, as the web segmented pill does,
  * and moves at once with Reduce Motion. Behind the tablist, so assistive tech
  * reads only the tabs.
  */
@@ -210,7 +211,7 @@ function ActiveTabPill({ index, count }: { index: number; count: number }) {
             bottom: 0,
             width: `${100 / count}%` as const,
             borderRadius: FLOATING_PILL_RADIUS,
-            backgroundColor: tabColors("segmented", true, scheme).backgroundColor,
+            backgroundColor: floatingTabPillColors(scheme).backgroundColor,
           },
           slide,
         ]}

package/src/controlStyles.ts

@@ -337,6 +337,22 @@ export function tabTrackStyle(scheme: Scheme) {
   return { backgroundColor: palette.default[scheme] };
 }
 
+/**
+ * Fill and label of the `FloatingTabBar` active pill. On the web the raised
+ * `--segment` pill sits on a muted `--default` track. The floating bar is
+ * already the raised surface (`tokens.color.fill`, near-white in light), so in
+ * light the pill takes the muted track fill (`palette.default`), as a white
+ * `--segment` pill would not show on it. In dark it keeps `--segment`
+ * (`palette.segment`), lighter than the dark glass. The label is the
+ * segmented `--tabs-text-active`, as `tabColors("segmented", true, scheme)`.
+ */
+export function floatingTabPillColors(scheme: Scheme): TabColors {
+  return {
+    backgroundColor: scheme === "light" ? palette.default.light : palette.segment.dark,
+    color: tabColors("segmented", true, scheme).color,
+  };
+}
+
 /**
  * Box and check colours, from the web `Checkbox` classes: `bg-field-background
  * border-border`, and `bg-primary border-primary text-primary-foreground` when