@multiplatform.one/backoffice 7.4.1 → 7.5.0

package/src/report/QueryReportScreen.tsx

@@ -22,6 +22,7 @@ import {
 } from "@multiplatform.one/components";
 import { DataTable, DataTablePagination } from "@multiplatform.one/table";
 import { downloadBlob } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { DownloadSimpleIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -70,6 +71,7 @@ export function QueryReportScreen({
   onRowOpen,
 }: QueryReportScreenProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const { params } = useBackofficeLocation();
@@ -294,7 +296,7 @@ export function QueryReportScreen({
   }
 
   const content = (
-    <YStack flex={1} gap="$3" padding="$4">
+    <YStack flex={1} {...knobProps.gap} {...knobProps.panelPadding}>
       <PageHeader
         title={title}
         subtitle={subtitle}

package/src/report/queryReportFilterBar.tsx

@@ -269,8 +269,8 @@ export function QueryReportFilterBar({ filterMeta, filters, onApply }: QueryRepo
       data-testid="query-report-filter-bar"
       flexWrap="wrap"
       alignItems="flex-end"
-      gap="$2"
       overflow="visible"
+      {...knobProps.gap}
       {...knobProps.panelPadding}
       paddingVertical="$2"
       backgroundColor="$color2"

package/src/report/report-grid.tsx

@@ -377,7 +377,7 @@ export function ReportGrid({
                       }}
                       hoverStyle={{ opacity: 0.8 }}
                     >
-                      <Text fontSize="$3" fontWeight="600" numberOfLines={1}>
+                      <Text fontSize="$3" fontWeight="400" numberOfLines={1}>
                         {column.label}
                       </Text>
                       {/* Caret orientation mirrors DataTable's headers:
@@ -453,7 +453,7 @@ export function ReportGrid({
                 return (
                   <Table.Row key={gridRow.key} backgroundColor="$color2">
                     <Table.Cell cellWidth={gridWidth} paddingVertical="$1.5" role="rowheader">
-                      <Text fontSize="$2" fontWeight="700" color="$color11" numberOfLines={1}>
+                      <Text fontSize="$2" fontWeight="400" color="$color11" numberOfLines={1}>
                         {groupByColumn
                           ? t("report.groupHeader", {
                               defaultValue: "{{field}}: {{value}} · {{count}}",
@@ -499,7 +499,7 @@ export function ReportGrid({
           <Table.Foot borderTopWidth={1} borderTopColor="$color6">
             <Table.Row backgroundColor="$color2">
               <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
-                <Text fontSize="$2" fontWeight="700" color="$color10">
+                <Text fontSize="$2" fontWeight="400" color="$color10">
                   {t("report.totals", "Totals")}
                 </Text>
               </Table.Cell>
@@ -513,7 +513,7 @@ export function ReportGrid({
                     justifyContent={alignToJustify(column.align)}
                   >
                     {total ? (
-                      <Text fontSize="$3" fontWeight="700" color="$color12" fontFamily="$mono">
+                      <Text fontSize="$3" fontWeight="400" color="$color12" fontFamily="$mono">
                         {formatNumericCell(total.value, total.fieldtype)}
                       </Text>
                     ) : null}

package/src/report/report-toolbar.tsx

@@ -4,10 +4,10 @@
 // (?f= base filters + column-filter summary) and Export. Page size lives in
 // the footer pager (list-screen parity), not here.
 import {
+  Chip,
   DropdownMenu,
   Popover,
   PopoverContent,
-  Text,
   XStack,
   YStack,
 } from "@multiplatform.one/components";
@@ -272,18 +272,9 @@ export function ReportToolbar({
 
       {/* Base filter chips (?f= deep link) */}
       {baseFilters.map((tuple, index) => (
-        <XStack
-          key={`${tuple[0]}-${index}`}
-          alignItems="center"
-          backgroundColor="$color3"
-          borderRadius={999}
-          paddingHorizontal="$2.5"
-          paddingVertical="$1"
-        >
-          <Text fontSize="$2" color="$color11">
-            {filterTupleLabel([...columns], tuple)}
-          </Text>
-        </XStack>
+        <Chip key={`${tuple[0]}-${index}`} size="$2" variant="subtle" color="gray">
+          {filterTupleLabel([...columns], tuple)}
+        </Chip>
       ))}
       {onClearBaseFilters && baseFilters.length > 0 && (
         <Button size="$3" chromeless onPress={onClearBaseFilters}>

package/src/shell/BackofficeShell.tsx

@@ -17,14 +17,8 @@
  * never a child's box-border that stops at content. Selected workspace is
  * fill (WorkspaceSidebar / LC-71); the rail does not paint selection chrome.
  */
-import {
-  Button,
-  SizableText,
-  SkipLink,
-  XStack,
-  YStack,
-  isWeb,
-} from "@multiplatform.one/components";
+import { SizableText, SkipLink, XStack, YStack, isWeb } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import * as componentsBarrel from "@multiplatform.one/components";
 import { hairline, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 import { ListIcon, XIcon } from "@phosphor-icons/react";
@@ -153,7 +147,7 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
         <Button
           chromeless
           circular
-          size="$3"
+          size={knobProps.sizeToken}
           icon={drawerOpen ? XIcon : ListIcon}
           aria-label={t("shell.toggleSidebar", "Toggle sidebar")}
           aria-expanded={drawerOpen}
@@ -163,13 +157,13 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
       )}
       <Button
         chromeless
-        size="$3"
+        size={knobProps.sizeToken}
         paddingHorizontal="$2"
         onPress={() => handleNavigate(paths.home())}
         aria-label={t("shell.home", "Home")}
         data-testid="backoffice-home"
       >
-        <SizableText size="$5" fontWeight="700">
+        <SizableText {...knobProps.heading} fontWeight="400">
           {t("shell.title", "Backoffice")}
         </SizableText>
       </Button>

package/src/shell/WorkspaceSidebar.tsx

@@ -150,14 +150,7 @@ function NavRow({
       }
     >
       {item.icon}
-      <SizableText
-        size="$3"
-        numberOfLines={1}
-        flex={1}
-        flexShrink={1}
-        fontWeight={item.active ? "600" : "400"}
-        color={ink}
-      >
+      <SizableText size="$3" numberOfLines={1} flex={1} flexShrink={1} fontWeight="400" color={ink}>
         {item.label}
       </SizableText>
     </XStack>
@@ -176,7 +169,7 @@ function WorkspaceNav({ sections }: { sections: SidebarSection[] }) {
               {section.title ? (
                 <SizableText
                   size="$2"
-                  fontWeight="600"
+                  fontWeight="400"
                   textTransform="uppercase"
                   color="$color11"
                   marginHorizontal={rowPad}

package/src/views/KanbanView.tsx

@@ -360,7 +360,7 @@ export function KanbanView({
         {...(cardFilters && { filters: cardFilters })}
         renderCard={(item) => (
           <YStack {...knobProps.panelPadding} gap="$1">
-            <Text fontWeight="500" fontSize={knobProps.sizeToken} numberOfLines={3}>
+            <Text {...knobProps.label} fontWeight="400" numberOfLines={3}>
               {String(item[titleField] ?? item.name ?? "")}
             </Text>
             {extraFields.map((fieldname) => {
@@ -369,8 +369,8 @@ export function KanbanView({
               return (
                 <Text
                   key={fieldname}
-                  fontWeight="700"
-                  fontSize="$2"
+                  {...knobProps.label}
+                  fontWeight="400"
                   color="$color10"
                   numberOfLines={1}
                 >

package/src/views/ViewHeader.tsx

@@ -65,7 +65,7 @@ export function ViewHeader({ doctype, view }: ViewHeaderProps) {
           <>
             {deskHref ? (
               <Button
-                size="$3"
+                size={knobProps.sizeToken}
                 circular
                 chromeless
                 icon={ArrowSquareOutIcon}
@@ -80,7 +80,7 @@ export function ViewHeader({ doctype, view }: ViewHeaderProps) {
             />
             {newDoc.enabled ? (
               <Button
-                size="$2"
+                size={knobProps.sizeToken}
                 accent
                 icon={PlusIcon}
                 onPress={() => navigator.navigate(paths.newDoc(doctype))}

package/src/views/ViewStates.tsx

@@ -1,7 +1,8 @@
 // Shared honest-state chrome for the alternate views: loading, error, and
 // "this view is not supported for this doctype" — each with a way back to
 // the list view (desk parity: unsupported views bounce you to list).
-import { Button, EmptyState, Spinner, YStack } from "@multiplatform.one/components";
+import { EmptyState, Spinner, YStack } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import { ListBulletsIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";

package/src/views/kanban-board-controls.tsx

@@ -51,6 +51,7 @@ export function KanbanBoardPicker({
 }: KanbanBoardPickerProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
 
   const items: DropdownMenuEntry[] = names.map((name) => ({
     key: name,
@@ -65,19 +66,19 @@ export function KanbanBoardPicker({
     items.push({
       key: "__new-board__",
       label: t("views.kanbanBoardNew", "New board…"),
-      icon: <PlusIcon size={14} />,
+      icon: <PlusIcon size={iconSize} />,
       onSelect: onCreateNew,
     });
   }
 
   return (
     <XStack {...knobProps.gap} alignItems="center">
-      <Text color="$color10" fontSize="$2">
+      <Text color="$color10" {...knobProps.label}>
         {t("views.kanbanBoard", "Board")}
       </Text>
       <DropdownMenu items={items} closeOnSelect placement="bottom-start">
         <Button
-          size="$3"
+          size={knobProps.sizeToken}
           iconAfter={CaretDownIcon}
           aria-label={t("views.kanbanBoardSwitch", "Switch board")}
         >
@@ -223,6 +224,8 @@ export interface KanbanColumnMenuProps {
  */
 export function KanbanColumnMenu({ column, onArchive }: KanbanColumnMenuProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const items: DropdownMenuEntry[] = [
     {
       key: "archive",
@@ -233,10 +236,10 @@ export function KanbanColumnMenu({ column, onArchive }: KanbanColumnMenuProps) {
   return (
     <DropdownMenu items={items} placement="bottom-end">
       <Button
-        size="$2"
+        size={knobProps.sizeToken}
         circular
         chromeless
-        icon={<DotsThreeIcon size={14} />}
+        icon={<DotsThreeIcon size={iconSize} />}
         aria-label={t("views.kanbanColumnMenu", {
           defaultValue: "Column options: {{column}}",
           column,
@@ -298,13 +301,13 @@ export function KanbanBoardEnd({
 
   return (
     <YStack {...knobProps.gap} minWidth={160} alignItems="stretch">
-      <Button size="$3" icon={PlusIcon} onPress={() => setAddOpen(true)}>
+      <Button size={knobProps.sizeToken} icon={PlusIcon} onPress={() => setAddOpen(true)}>
         {t("views.kanbanAddColumn", "Add column")}
       </Button>
       {restoreItems.length > 0 && (
         <DropdownMenu items={restoreItems} placement="bottom-end">
           <Button
-            size="$3"
+            size={knobProps.sizeToken}
             chromeless
             iconAfter={CaretDownIcon}
             aria-label={t("views.kanbanArchivedRestore", "Restore an archived column")}

package/src/views/report-controls.tsx

@@ -9,6 +9,7 @@
 //     for the missing per-row click-through), numbered pagination
 import {
   Button,
+  Chip,
   DropdownMenu,
   Pagination,
   Text,
@@ -16,7 +17,12 @@ import {
   YStack,
 } from "@multiplatform.one/components";
 import type { GroupByConfig, ReportColumn } from "@multiplatform.one/frappe-ui";
-import { formatCurrency, formatNumber, formatPercent } from "@multiplatform.one/theme";
+import {
+  formatCurrency,
+  formatNumber,
+  formatPercent,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { ArrowSquareOutIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -72,6 +78,7 @@ export function ReportToolbar({
   onClearFilters,
 }: ReportToolbarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const enabledCount = columns.filter((column) => column.enabled).length;
   const numericColumns = columns.filter((column) =>
     REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype),
@@ -116,7 +123,7 @@ export function ReportToolbar({
   };
 
   return (
-    <XStack alignItems="center" flexWrap="wrap" gap="$2">
+    <XStack alignItems="center" flexWrap="wrap" {...knobProps.gap}>
       {/* Column add/remove picker across all meta fields */}
       <DropdownMenu>
         <DropdownMenu.Trigger asChild>
@@ -252,18 +259,9 @@ export function ReportToolbar({
 
       {/* Base filter chips (?f= URL param) */}
       {filters.map((tuple, index) => (
-        <XStack
-          key={`${tuple[0]}-${index}`}
-          alignItems="center"
-          backgroundColor="$color3"
-          borderRadius={999}
-          paddingHorizontal="$2.5"
-          paddingVertical="$1"
-        >
-          <Text fontSize="$2" color="$color11">
-            {filterChipLabel(tuple)}
-          </Text>
-        </XStack>
+        <Chip key={`${tuple[0]}-${index}`} size="$2" variant="subtle" color="gray">
+          {filterChipLabel(tuple)}
+        </Chip>
       ))}
       {onClearFilters && filters.length > 0 && (
         <Button size="$2" chromeless onPress={onClearFilters}>
@@ -358,19 +356,20 @@ export function ReportFooter({
   totals,
 }: ReportFooterProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const openRecords = records.slice(0, OPEN_MENU_LIMIT);
 
   return (
-    <YStack gap="$2">
+    <YStack {...knobProps.gap}>
       {totals.length > 0 && (
-        <XStack alignItems="center" flexWrap="wrap" gap="$3">
-          <Text fontSize="$2" fontWeight="600" color="$color10">
+        <XStack alignItems="center" flexWrap="wrap" {...knobProps.gap}>
+          <Text fontSize="$2" fontWeight="400" color="$color10">
             {t("report.totals", "Totals")}
           </Text>
           {totals.map((total) => (
             <Text key={total.label} fontSize="$2" color="$color11">
               {total.label}:{" "}
-              <Text fontSize="$2" fontWeight="600" color="$color12">
+              <Text fontSize="$2" fontWeight="400" color="$color12">
                 {formatTotalValue(total.value, total.fieldtype)}
               </Text>
             </Text>

package/src/workspace/WorkspaceChartBlock.tsx

@@ -8,7 +8,7 @@
  * (documented gap). In fixture mode (stories) the RPC is unavailable, so
  * the block renders an informational card instead.
  */
-import { AsyncBoundary, Card, SizableText, Skeleton, YStack } from "@multiplatform.one/components";
+import { AsyncBoundary, Card, Skeleton, Text, YStack } from "@multiplatform.one/components";
 import { ChartCard, type ChartConfig, type ChartType } from "@multiplatform.one/frappe-ui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
@@ -73,12 +73,12 @@ export function WorkspaceChartBlock({ row }: WorkspaceChartBlockProps) {
     return (
       <Card flexGrow={1}>
         <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-          <SizableText size="$4" fontWeight="700">
+          <Text {...knobProps.heading} fontWeight="400">
             {title}
-          </SizableText>
-          <SizableText size="$2" color="$color10">
+          </Text>
+          <Text {...knobProps.label} fontWeight="400" color="$color10">
             {t("workspaceChartFixture", "Chart data is only available on a live bench")}
-          </SizableText>
+          </Text>
         </YStack>
       </Card>
     );

package/src/workspace/WorkspaceLinkCard.tsx

@@ -15,7 +15,7 @@
  * `doctypes` scope are hidden, and DocType/Report rows (list-surface
  * navigations) are hidden entirely when the `views` capability is off.
  */
-import { Card, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { Card, Text, XStack, YStack } from "@multiplatform.one/components";
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
@@ -89,6 +89,7 @@ function LinkRow({
 }) {
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
+  const { knobProps } = useResolvedKnobs();
   const target = resolveLinkTarget(row, paths);
   const position = getGroupPosition(index, total);
   const disabled = !!target.disabled;
@@ -118,14 +119,15 @@ function LinkRow({
       focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
       onKeyDown={disabled ? undefined : activateOnEnterOrSpace(go)}
     >
-      <SizableText
-        size="$3"
+      <Text
+        {...knobProps.label}
+        fontWeight="400"
         color={disabled ? "$color10" : "$color12"}
         numberOfLines={1}
         flexShrink={1}
       >
         {row.label}
-      </SizableText>
+      </Text>
     </XStack>
   );
 }
@@ -185,15 +187,15 @@ export function WorkspaceLinkCard({ group, collapse = true }: WorkspaceLinkCardP
         {/* Catalog list-group caption (Sidebar section-label treatment):
             small-caps muted label, no underline rule — a full-width rule
             under uneven columns read as table chrome (Axiom 16). */}
-        <SizableText size="$2" fontWeight="600" textTransform="uppercase" color="$color11">
+        <Text {...knobProps.label} fontWeight="400" textTransform="uppercase" color="$color11">
           {group.label}
-        </SizableText>
+        </Text>
       </YStack>
       {visibleLinks.length === 0 ? (
         <YStack paddingHorizontal={pad} paddingBottom={pad}>
-          <SizableText size="$2" color="$color10">
+          <Text {...knobProps.label} fontWeight="400" color="$color10">
             {t("workspaceCardEmpty", "No links in this section")}
-          </SizableText>
+          </Text>
         </YStack>
       ) : (
         <YStack paddingBottom={showMore ? 0 : undefined}>
@@ -221,11 +223,11 @@ export function WorkspaceLinkCard({ group, collapse = true }: WorkspaceLinkCardP
               focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
               onKeyDown={activateOnEnterOrSpace(() => setExpanded((value) => !value))}
             >
-              <SizableText size="$3" color="$color11" fontWeight="600">
+              <Text {...knobProps.label} fontWeight="400" color="$color11">
                 {expanded
                   ? t("workspaceCardShowLess", "Show less")
                   : t("workspaceCardMore", "+ {{count}} more", { count: hiddenCount })}
-              </SizableText>
+              </Text>
             </XStack>
           ) : null}
         </YStack>

package/src/workspace/WorkspaceNumberCard.tsx

@@ -9,7 +9,7 @@
  * (`frappe.desk.doctype.number_card.number_card.get_result`) and are
  * rendered as an informational card for now (documented gap).
  */
-import { Card, SizableText, Skeleton, YStack } from "@multiplatform.one/components";
+import { Card, Skeleton, Text, YStack } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   FrappeKPICard,
@@ -86,12 +86,12 @@ export function WorkspaceNumberCard({ row }: WorkspaceNumberCardProps) {
     return (
       <Card flexGrow={1}>
         <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-          <SizableText size="$3" fontWeight="600">
+          <Text {...knobProps.heading} fontWeight="400">
             {title}
-          </SizableText>
-          <SizableText size="$2" color="$color10">
+          </Text>
+          <Text {...knobProps.label} fontWeight="400" color="$color10">
             {t("workspaceNumberCardError", "Couldn't load number card")}
-          </SizableText>
+          </Text>
         </YStack>
       </Card>
     );
@@ -102,12 +102,12 @@ export function WorkspaceNumberCard({ row }: WorkspaceNumberCardProps) {
     return (
       <Card flexGrow={1}>
         <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-          <SizableText size="$3" fontWeight="600">
+          <Text {...knobProps.heading} fontWeight="400">
             {title}
-          </SizableText>
-          <SizableText size="$2" color="$color10">
+          </Text>
+          <Text {...knobProps.label} fontWeight="400" color="$color10">
             {t("workspaceNumberCardUnsupported", "This card type is only available in desk")}
-          </SizableText>
+          </Text>
         </YStack>
       </Card>
     );

package/src/workspace/WorkspaceQuickList.tsx

@@ -5,7 +5,7 @@
  * name — desk shows the meta title field, which needs a DocType meta
  * fetch (documented simplification).
  */
-import { Card, Separator, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { Card, Separator, Text, XStack, YStack } from "@multiplatform.one/components";
 import { FrappeList } from "@multiplatform.one/frappe-ui";
 import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
@@ -50,11 +50,12 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
     <Card flexGrow={1} padding={0} overflow="hidden">
       <YStack paddingHorizontal={pad} paddingTop={pad} paddingBottom="$2" {...knobProps.gap}>
         <XStack justifyContent="space-between" alignItems="center" {...knobProps.gap}>
-          <SizableText size="$4" fontWeight="700" numberOfLines={1} flexShrink={1}>
+          <Text {...knobProps.heading} fontWeight="400" numberOfLines={1} flexShrink={1}>
             {title}
-          </SizableText>
-          <SizableText
-            size="$2"
+          </Text>
+          <Text
+            {...knobProps.label}
+            fontWeight="400"
             color="$color11"
             cursor="pointer"
             role="link"
@@ -66,7 +67,7 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
             onPress={() => navigator.navigate(paths.list(row.document_type))}
           >
             {t("workspaceQuickListViewAll", "View All")}
-          </SizableText>
+          </Text>
         </XStack>
         <Separator />
       </YStack>
@@ -105,9 +106,9 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
               role="link"
               aria-label={item.name}
             >
-              <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+              <Text {...knobProps.label} fontWeight="400" numberOfLines={1} flexShrink={1}>
                 {item.name}
-              </SizableText>
+              </Text>
             </XStack>
           )}
         />

package/src/workspace/WorkspaceRecents.tsx

@@ -12,7 +12,7 @@
  * too) are filtered out so every chip stays navigable in this app.
  */
 import { ClockCounterClockwiseIcon } from "@phosphor-icons/react";
-import { Card, PageSection, SizableText, XStack, useTheme } from "@multiplatform.one/components";
+import { Card, PageSection, Text, XStack, useTheme } from "@multiplatform.one/components";
 import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,6 +27,7 @@ export function WorkspaceRecents() {
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const theme = useTheme();
   // Phosphor icons take a resolved color string, not a tamagui token —
@@ -88,10 +89,10 @@ export function WorkspaceRecents() {
             focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: 2 })}
           >
             <XStack paddingHorizontal="$3" minHeight={44} alignItems="center" {...knobProps.gap}>
-              <ClockCounterClockwiseIcon size={14} color={iconColor} aria-hidden />
-              <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+              <ClockCounterClockwiseIcon size={iconSize} color={iconColor} aria-hidden />
+              <Text {...knobProps.label} fontWeight="400" numberOfLines={1} flexShrink={1}>
                 {item.label}
-              </SizableText>
+              </Text>
             </XStack>
           </Card>
         ))}