@multiplatform.one/backoffice 7.4.1 → 7.6.0

package/src/form/FormTimeline.tsx

@@ -126,6 +126,7 @@ export function FormTimeline({
   const app = useFrappeApp();
   const config = useFrappeConfig();
   const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 14;
   const radiusToken = knobProps.borderRadius.borderRadius;
 
   // Composed mode: the form screen (or story fixture) owns docinfo. The
@@ -485,7 +486,7 @@ export function FormTimeline({
         <YStack flex={1} gap="$1">
           <XStack gap="$2" alignItems="center">
             <XStack flex={1} gap="$2" alignItems="center" flexWrap="wrap">
-              <Text fontSize="$3" fontWeight="600">
+              <Text fontSize="$3" fontWeight="400">
                 {displayName}
               </Text>
               {renderTimestamp(entry)}
@@ -496,7 +497,7 @@ export function FormTimeline({
                   chromeless
                   size="$1"
                   borderRadius={radiusToken}
-                  icon={<PencilSimpleIcon size={12} />}
+                  icon={<PencilSimpleIcon size={iconSize} />}
                   aria-label={t("timeline.editComment", "Edit comment")}
                   disabled={isBusy}
                   onPress={() => {
@@ -511,7 +512,7 @@ export function FormTimeline({
                   chromeless
                   size="$1"
                   borderRadius={radiusToken}
-                  icon={<TrashIcon size={12} />}
+                  icon={<TrashIcon size={iconSize} />}
                   aria-label={t("timeline.deleteComment", "Delete comment")}
                   disabled={isBusy}
                   onPress={() => {
@@ -604,7 +605,7 @@ export function FormTimeline({
           {icon}
         </YStack>
         <XStack flex={1} gap="$1.5" alignItems="center" flexWrap="wrap" paddingTop={2}>
-          <Text fontSize="$2" fontWeight="600" color="$color10">
+          <Text fontSize="$2" fontWeight="400" color="$color10">
             {displayName}
           </Text>
           {text ? (
@@ -624,7 +625,11 @@ export function FormTimeline({
   const renderCommunicationRow = (entry: TimelineFeedEntry) => {
     const displayName = displayNameOf(entry);
     const icon =
-      entry.kind === "automated" ? <RobotIcon size={14} /> : <EnvelopeSimpleIcon size={14} />;
+      entry.kind === "automated" ? (
+        <RobotIcon size={iconSize} />
+      ) : (
+        <EnvelopeSimpleIcon size={iconSize} />
+      );
     return (
       <XStack
         role="article"
@@ -644,7 +649,7 @@ export function FormTimeline({
           padding="$3"
         >
           <XStack gap="$2" alignItems="center" flexWrap="wrap">
-            <Text fontSize="$3" fontWeight="600">
+            <Text fontSize="$3" fontWeight="400">
               {displayName}
             </Text>
             {entry.author !== displayName && (
@@ -655,7 +660,7 @@ export function FormTimeline({
             {renderTimestamp(entry)}
           </XStack>
           {entry.subject ? (
-            <Text fontSize="$3" fontWeight="600">
+            <Text fontSize="$3" fontWeight="400">
               {entry.subject}
             </Text>
           ) : null}
@@ -677,7 +682,7 @@ export function FormTimeline({
       case "version":
         return renderSystemRow(
           entry,
-          <PencilSimpleIcon size={14} />,
+          <PencilSimpleIcon size={iconSize} />,
           entry.version
             ? versionSummary(entry.version, (key, options) => t(key, options))
             : t("timeline.madeChanges", "made changes"),
@@ -686,13 +691,13 @@ export function FormTimeline({
       case "automated":
         return renderCommunicationRow(entry);
       case "assignment":
-        return renderSystemRow(entry, <UserPlusIcon size={14} />, entry.content ?? "");
+        return renderSystemRow(entry, <UserPlusIcon size={iconSize} />, entry.content ?? "");
       case "attachment":
-        return renderSystemRow(entry, <PaperclipIcon size={14} />, entry.content ?? "");
+        return renderSystemRow(entry, <PaperclipIcon size={iconSize} />, entry.content ?? "");
       case "like":
-        return renderSystemRow(entry, <HeartIcon size={14} />, entry.content ?? "");
+        return renderSystemRow(entry, <HeartIcon size={iconSize} />, entry.content ?? "");
       default:
-        return renderSystemRow(entry, <InfoIcon size={14} />, entry.content ?? "");
+        return renderSystemRow(entry, <InfoIcon size={iconSize} />, entry.content ?? "");
     }
   };
 

package/src/form/FormToolbar.tsx

@@ -22,7 +22,7 @@ import {
   Breadcrumbs,
   Chip,
   DropdownMenu,
-  Text,
+  H1,
   XStack,
   YStack,
   type BreadcrumbItem,
@@ -300,6 +300,7 @@ export function FormToolbar({
 }: FormToolbarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const isNarrow = useLayoutSizeClass() === "compact";
 
   const indicatorLabels: Record<Exclude<DocIndicator, "saved">, string> = {
@@ -358,7 +359,7 @@ export function FormToolbar({
       return {
         key: `__action-${action}`,
         label: actionLabels[action],
-        icon: <Icon size={16} />,
+        icon: <Icon size={iconSize} />,
         destructive: action === "cancel",
         disabled: isSaving,
         ...(isSaving ? { disabledReason: t("saving", "Saving…") } : {}),
@@ -372,7 +373,7 @@ export function FormToolbar({
       icon: item.icon
         ? (() => {
             const Icon = MENU_ICONS[item.icon];
-            return <Icon size={16} />;
+            return <Icon size={iconSize} />;
           })()
         : undefined,
       destructive: item.destructive,
@@ -387,17 +388,16 @@ export function FormToolbar({
       <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />
       <XStack alignItems="center" flexWrap="wrap" {...knobProps.gap}>
         <XStack alignItems="center" gap="$3" flex={1} minWidth={0}>
-          <Text
-            role="heading"
-            aria-level={1}
-            fontSize="$6"
-            fontWeight="700"
+          <H1
+            {...knobProps.pageTitle}
+            {...knobProps.heading}
             color="$color12"
             numberOfLines={1}
             flexShrink={1}
+            margin={0}
           >
             {title}
-          </Text>
+          </H1>
           {showIndicator && chip && (
             <Chip size="$2" variant="subtle" color={chip.color}>
               {chip.label}
@@ -419,7 +419,7 @@ export function FormToolbar({
                 outlined
                 borderWidth={0}
                 borderRadius={0}
-                icon={<CaretLeftIcon size={16} />}
+                icon={<CaretLeftIcon size={iconSize} />}
                 aria-label={t("prevDoc", "Previous document")}
                 disabled={prevDocDisabled}
                 onPress={onPrevDoc}
@@ -430,7 +430,7 @@ export function FormToolbar({
                 outlined
                 borderWidth={0}
                 borderRadius={0}
-                icon={<CaretRightIcon size={16} />}
+                icon={<CaretRightIcon size={iconSize} />}
                 aria-label={t("nextDoc", "Next document")}
                 disabled={nextDocDisabled}
                 onPress={onNextDoc}
@@ -442,7 +442,7 @@ export function FormToolbar({
             <Button
               size={knobProps.sizeToken}
               outlined
-              icon={<ArrowSquareOutIcon size={16} />}
+              icon={<ArrowSquareOutIcon size={iconSize} />}
               aria-label={t("openInDesk", "Open in Desk")}
               onPress={onOpenDesk}
               testID="form-toolbar-desk"
@@ -452,7 +452,7 @@ export function FormToolbar({
             <Button
               size={knobProps.sizeToken}
               outlined
-              icon={<ArrowCounterClockwiseIcon size={16} />}
+              icon={<ArrowCounterClockwiseIcon size={iconSize} />}
               aria-label={t("reloadDoc", "Reload")}
               onPress={reload}
               testID="form-toolbar-reload"
@@ -463,7 +463,7 @@ export function FormToolbar({
               <Button
                 size={knobProps.sizeToken}
                 outlined
-                icon={<DotsThreeIcon size={18} weight="bold" />}
+                icon={<DotsThreeIcon size={iconSize} weight="bold" />}
                 aria-label={t("menu", "Menu")}
                 testID="form-toolbar-menu"
               />
@@ -475,7 +475,7 @@ export function FormToolbar({
               error
               outlined
               actionRole="secondary"
-              icon={<ProhibitIcon size={16} />}
+              icon={<ProhibitIcon size={iconSize} />}
               loading={isSaving}
               onPress={onCancel}
               testID="form-toolbar-cancel"
@@ -487,7 +487,7 @@ export function FormToolbar({
             <Button
               size={knobProps.sizeToken}
               outlined
-              icon={<CopyIcon size={16} />}
+              icon={<CopyIcon size={iconSize} />}
               loading={isSaving}
               onPress={onAmend}
               testID="form-toolbar-amend"
@@ -502,7 +502,7 @@ export function FormToolbar({
             <Button
               size={knobProps.sizeToken}
               accent
-              icon={<CheckCircleIcon size={16} />}
+              icon={<CheckCircleIcon size={iconSize} />}
               loading={isSaving}
               onPress={onSubmit}
               testID="form-toolbar-submit"
@@ -514,7 +514,7 @@ export function FormToolbar({
             <Button
               size={knobProps.sizeToken}
               accent
-              icon={<FloppyDiskIcon size={16} />}
+              icon={<FloppyDiskIcon size={iconSize} />}
               loading={isSaving}
               onPress={onSave}
               testID="form-toolbar-save"

package/src/form/sidebar-people.tsx

@@ -114,7 +114,7 @@ export function SidebarAvatarStrip({ items, max }: SidebarAvatarStripProps) {
             size="$1"
             alt={`+${overflow}`}
             fallback={
-              <Text fontSize={9} fontWeight="600" color="$color11">
+              <Text fontSize="$1" fontWeight="400" color="$color11">
                 +{overflow}
               </Text>
             }

package/src/list/DoctypeListScreen.tsx

@@ -19,7 +19,7 @@ import {
   isWeb,
   notify,
 } from "@multiplatform.one/components";
-import { useLayoutSizeClass } from "@multiplatform.one/theme";
+import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 // Catalog action Button — `accent` renders the active accent intent, the
 // house expression of the one page primary (LC-05 ONE-EMPHASIS; quick entry
 // "Create" precedent). The components Button above stays for neutral chrome.
@@ -188,6 +188,7 @@ export function DoctypeListScreen({
   toolbarActions,
 }: DoctypeListScreenProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const capabilities = useBackofficeCapabilities();
@@ -947,12 +948,18 @@ export function DoctypeListScreen({
   );
 
   return (
-    <YStack flex={1} gap="$2" padding={compactChrome ? "$2" : "$3"}>
+    <YStack flex={1} {...knobProps.gap} {...knobProps.panelPadding}>
       <PageHeader
         gap="$2"
         heading={
           <XStack gap="$2" alignItems="baseline" flexWrap="wrap">
-            <H1 size={compactChrome ? "$6" : "$7"} margin={0} flexShrink={1} minWidth={0}>
+            <H1
+              {...knobProps.pageTitle}
+              {...knobProps.heading}
+              margin={0}
+              flexShrink={1}
+              minWidth={0}
+            >
               {doctype}
             </H1>
             {countText ? (

package/src/list/ListBulkActionsBar.tsx

@@ -7,10 +7,11 @@
 // the shared dialogs/helpers below; this standalone bar exists for surfaces
 // that manage selection themselves (report/kanban streams).
 import React from "react";
-import { Button, ConfirmDialog, Text, XStack, notify } from "@multiplatform.one/components";
+import { ConfirmDialog, Text, XStack, notify } from "@multiplatform.one/components";
 // Catalog action Button — `error` renders the destructive intent from the
 // semantic ramp instead of a hardcoded named hue (LC-05 ONE-EMPHASIS).
-import { Button as ActionButton } from "@multiplatform.one/forms";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeCapabilities, useBackofficeConfig } from "../config/BackofficeProvider";
@@ -42,6 +43,7 @@ export function ListBulkActionsBar({
   onActionComplete,
 }: ListBulkActionsBarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const app = useFrappeApp();
   const capabilities = useBackofficeCapabilities();
   const { actions } = useBackofficeConfig();
@@ -203,23 +205,23 @@ export function ListBulkActionsBar({
   return (
     <XStack
       alignItems="center"
-      gap="$3"
-      padding="$2"
-      backgroundColor="$color2"
-      borderRadius="$4"
       flexWrap="wrap"
+      {...knobProps.surface}
+      {...knobProps.borderRadius}
+      {...knobProps.gap}
+      {...knobProps.panelPadding}
     >
-      <Text fontSize="$3" fontWeight="600" color="$color12">
+      <Text {...knobProps.label} fontWeight="400" color="$color12">
         {t("list.selectedCount", {
           defaultValue: "{{count}} selected",
           count: selectedNames.length,
         })}
       </Text>
-      <Button size="$2" onPress={() => setEditOpen(true)}>
+      <Button size={knobProps.sizeToken} onPress={() => setEditOpen(true)}>
         {t("list.editTitle", "Bulk Edit")}
       </Button>
       <Button
-        size="$2"
+        size={knobProps.sizeToken}
         disabled={exporting}
         onPress={() => {
           void handleExport();
@@ -228,19 +230,19 @@ export function ListBulkActionsBar({
         {exporting ? t("list.exporting", "Exporting…") : t("list.export", "Export CSV")}
       </Button>
       {showAssign && (
-        <Button size="$2" onPress={() => setAssignOpen(true)}>
+        <Button size={knobProps.sizeToken} onPress={() => setAssignOpen(true)}>
           {t("list.assignTitle", "Assign To")}
         </Button>
       )}
       {showTags && (
-        <Button size="$2" onPress={() => setTagOpen(true)}>
+        <Button size={knobProps.sizeToken} onPress={() => setTagOpen(true)}>
           {t("list.tagTitle", "Add Tags")}
         </Button>
       )}
       {hostActions.map((action) => (
         <Button
           key={action.id}
-          size="$2"
+          size={knobProps.sizeToken}
           onPress={() => action.onPress({ doctype, selection: selectedNames })}
         >
           {action.label}
@@ -248,20 +250,33 @@ export function ListBulkActionsBar({
       ))}
       {isSubmittable && (
         <>
-          <Button size="$2" disabled={docstatusBusy} onPress={() => setDocstatusAction("submit")}>
+          <Button
+            size={knobProps.sizeToken}
+            disabled={docstatusBusy}
+            onPress={() => setDocstatusAction("submit")}
+          >
             {t("list.submit", "Submit")}
           </Button>
-          <Button size="$2" disabled={docstatusBusy} onPress={() => setDocstatusAction("cancel")}>
+          <Button
+            size={knobProps.sizeToken}
+            disabled={docstatusBusy}
+            onPress={() => setDocstatusAction("cancel")}
+          >
             {t("list.cancel", "Cancel")}
           </Button>
         </>
       )}
       {/* Busy is derived state — `loading` shows the spinner and skips the
           DG-ST-03 bare-disabled guardrail (catalog Toolbar precedent). */}
-      <ActionButton size="$2" error loading={deleting} onPress={() => setConfirmDelete(true)}>
+      <Button
+        size={knobProps.sizeToken}
+        error
+        loading={deleting}
+        onPress={() => setConfirmDelete(true)}
+      >
         {t("list.delete", "Delete")}
-      </ActionButton>
-      <Button size="$2" chromeless onPress={onClearSelection}>
+      </Button>
+      <Button size={knobProps.sizeToken} chromeless onPress={onClearSelection}>
         {t("list.clearSelection", "Clear selection")}
       </Button>
 

package/src/list/ListFilterBar.tsx

@@ -21,6 +21,7 @@
 import { XStack, YStack } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import { HeartIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilter, FrappeFilters } from "../shared/types";
@@ -73,17 +74,19 @@ export function ListFilterBar({
   likedByUser,
 }: ListFilterBarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const likedTuple: FrappeFilter | undefined = likedByUser
     ? ["_liked_by", "like", `%${likedByUser}%`]
     : undefined;
   const likedActive = likedTuple ? isFacetFilterActive(filters, likedTuple) : false;
   const likedButton = likedTuple ? (
     <Button
-      size="$3"
+      size={knobProps.sizeToken}
       circular
       chromeless
       col={(likedActive ? "$red10" : "$color8") as never}
-      icon={<HeartIcon size={16} weight={likedActive ? "fill" : "regular"} />}
+      icon={<HeartIcon size={iconSize} weight={likedActive ? "fill" : "regular"} />}
       aria-pressed={likedActive}
       aria-label={t("list.likedByMe", "Liked by me")}
       onPress={() => onFiltersChange(toggleFacetFilter(filters, likedTuple))}
@@ -91,7 +94,7 @@ export function ListFilterBar({
   ) : null;
   if (compact) {
     return (
-      <XStack gap="$1.5" alignItems="center">
+      <XStack {...knobProps.gap} alignItems="center">
         <ListToolsButton
           doctype={doctype}
           meta={meta}
@@ -106,7 +109,7 @@ export function ListFilterBar({
     );
   }
   const controls = (
-    <XStack gap="$1.5" alignItems="center" flexWrap="wrap">
+    <XStack {...knobProps.gap} alignItems="center" flexWrap="wrap">
       <StandardFilters meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
       <FilterEditorButton meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
       <SavedFiltersControl doctype={doctype} filters={filters} onFiltersChange={onFiltersChange} />
@@ -121,7 +124,7 @@ export function ListFilterBar({
   );
   if (!showChips) return controls;
   return (
-    <YStack gap="$2">
+    <YStack {...knobProps.gap}>
       {controls}
       <FilterChips meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
     </YStack>

package/src/list/list-tools-sheet.tsx

@@ -12,6 +12,7 @@
  */
 import { Button, SheetModal, SizableText, YStack, isWeb } from "@multiplatform.one/components";
 import { FunnelIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -35,7 +36,7 @@ export interface ListToolsButtonProps {
 
 function SectionLabel({ children }: { children: string }) {
   return (
-    <SizableText size="$1" fontWeight="600" color="$color10" textTransform="uppercase">
+    <SizableText size="$1" fontWeight="400" color="$color10" textTransform="uppercase">
       {children}
     </SizableText>
   );
@@ -51,6 +52,8 @@ export function ListToolsButton({
   onSortChange,
 }: ListToolsButtonProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const [open, setOpen] = useState(false);
   // Bumped per open so per-open drafts (filter editor rows) reseed.
   const [openGen, setOpenGen] = useState(0);
@@ -75,8 +78,8 @@ export function ListToolsButton({
   return (
     <>
       <Button
-        size="$3"
-        icon={<FunnelIcon size={14} weight={filters.length > 0 ? "fill" : "regular"} />}
+        size={knobProps.sizeToken}
+        icon={<FunnelIcon size={iconSize} weight={filters.length > 0 ? "fill" : "regular"} />}
         onPress={() => handleOpenChange(true)}
         aria-label={t("list.filters.filter", "Filter")}
       >
@@ -92,7 +95,7 @@ export function ListToolsButton({
         snapPoint={85}
         scrollable
         header={
-          <SizableText size="$6" fontWeight="700">
+          <SizableText {...knobProps.heading} size="$6">
             {t("list.tools.title", "Filter & sort")}
           </SizableText>
         }

package/src/list/listColumns.tsx

@@ -10,7 +10,7 @@
 // of the subject link (LC-74). Extra ID / Last Updated columns stay out —
 // the timestamp lives in the activity cluster.
 import type { ReactNode } from "react";
-import { Avatar, Anchor, Text, XStack, YStack } from "@multiplatform.one/components";
+import { Avatar, Anchor, Chip, Text, XStack, type ChipColor } from "@multiplatform.one/components";
 // House control for the like toggle — the icon rides the Button icon slot
 // (LC-53 GLYPH-SLOT) and the sub-44 circular size resolves the press floor
 // through the house channel (LC-54: 44px box + hitSlop).
@@ -106,6 +106,23 @@ function stopRowPress(event?: { stopPropagation?: () => void }) {
   event?.stopPropagation?.();
 }
 
+function chipColorFromStatus(value: string, meta?: DoctypeMeta): ChipColor {
+  const ramp = statusPillColors(value, meta).background.replace(/^\$/, "").replace(/\d+$/, "");
+  if (ramp === "pink") return "purple";
+  if (
+    ramp === "red" ||
+    ramp === "green" ||
+    ramp === "blue" ||
+    ramp === "yellow" ||
+    ramp === "orange" ||
+    ramp === "purple" ||
+    ramp === "gray"
+  ) {
+    return ramp;
+  }
+  return "gray";
+}
+
 function IndicatorPill({
   value,
   meta,
@@ -120,42 +137,26 @@ function IndicatorPill({
   filterValue?: string;
   onFilterClick?: (fieldname: string, value: string) => void;
 }) {
-  const colors = statusPillColors(value, meta);
+  const chipColor = chipColorFromStatus(value, meta);
   const applied = filterValue ?? value;
-  const handlePress = onFilterClick
-    ? (event?: { stopPropagation?: () => void }) => {
-        stopRowPress(event);
-        onFilterClick(fieldname, applied);
-      }
-    : undefined;
   return (
     <XStack
       alignSelf="flex-start"
-      alignItems="center"
-      gap="$1.5"
-      backgroundColor={colors.background as "$color3"}
-      borderRadius={999}
-      paddingHorizontal="$2"
-      paddingVertical={3}
-      {...(handlePress
+      {...(onFilterClick
         ? {
-            role: "button" as const,
-            cursor: "pointer" as const,
-            onPress: handlePress,
             "data-filter": `${fieldname},=,${applied}`,
+            onPress: (event?: { stopPropagation?: () => void }) => stopRowPress(event),
           }
         : {})}
     >
-      <YStack
-        width={6}
-        height={6}
-        borderRadius={999}
-        backgroundColor={colors.text as "$color11"}
-        flexShrink={0}
-      />
-      <Text color={colors.text as "$color11"} fontSize="$2" fontWeight="600">
+      <Chip
+        size="$2"
+        variant="subtle"
+        color={chipColor}
+        onPress={onFilterClick ? () => onFilterClick(fieldname, applied) : undefined}
+      >
         {value}
-      </Text>
+      </Chip>
     </XStack>
   );
 }
@@ -290,10 +291,7 @@ function ActivityCluster({
       <XStack
         alignItems="center"
         gap="$1"
-        {...({ "aria-label": t("list.comments", "Comments") } as Record<
-          string,
-          unknown
-        >)}
+        {...({ "aria-label": t("list.comments", "Comments") } as Record<string, unknown>)}
       >
         <ChatCircleIcon size={14} />
         <Text fontSize="$2" color="$color9">
@@ -425,7 +423,7 @@ export function buildListColumns({
       const subject = (
         <Text
           fontSize="$3"
-          fontWeight="600"
+          fontWeight="400"
           color="$color12"
           numberOfLines={1}
           flexShrink={1}

package/src/list/sidebar-section.tsx

@@ -4,7 +4,14 @@
  * share open state), a facet row (label + count pill + active state), and
  * the per-section loading skeleton.
  */
-import { Accordion, SizableText, Skeleton, XStack, YStack } from "@multiplatform.one/components";
+import {
+  Accordion,
+  Chip,
+  SizableText,
+  Skeleton,
+  XStack,
+  YStack,
+} from "@multiplatform.one/components";
 import {
   GroupPositionContext,
   ensureFocusVisibleRing,
@@ -31,8 +38,8 @@ export function SidebarSectionChrome({ title, children }: Omit<SidebarSectionPro
   const rows = Children.toArray(children);
   return (
     <>
-      <Accordion.Trigger minHeight={32} paddingVertical="$1.5" paddingHorizontal="$2">
-        <SizableText size="$2" fontWeight="600" color="$color11" numberOfLines={1} flexShrink={1}>
+      <Accordion.Trigger minHeight="$4" paddingVertical="$1.5" paddingHorizontal="$2">
+        <SizableText size="$2" fontWeight="400" color="$color11" numberOfLines={1} flexShrink={1}>
           {title}
         </SizableText>
       </Accordion.Trigger>
@@ -106,19 +113,12 @@ export function SidebarFacetRow({ label, count, active, onPress }: SidebarFacetR
         }) as unknown as () => void
       }
     >
-      <SizableText size="$3" numberOfLines={1} flexShrink={1} fontWeight={active ? "600" : "400"}>
+      <SizableText size="$3" numberOfLines={1} flexShrink={1} fontWeight="400">
         {label}
       </SizableText>
-      <YStack
-        backgroundColor={active ? "$color5" : "$color4"}
-        borderRadius={1000}
-        paddingHorizontal="$2"
-        paddingVertical={2}
-      >
-        <SizableText size="$1" color="$color11" fontWeight="600">
-          {count}
-        </SizableText>
-      </YStack>
+      <Chip size="$2" variant="subtle" color="gray">
+        {count}
+      </Chip>
     </XStack>
   );
 }