@krapwoo/ds-viewer 0.9.1 → 0.11.0

package/native/catalog/MotionSpecimen.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Animated, AccessibilityInfo, Pressable, StyleSheet, Text, View } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { motionReplayLabel, motionTranslatesDirectly, motionValueTarget, type MotionValueRange } from './motionValueDomain';
 
 /** `Animated.spring`'s physics fields — the same shape as a design system's own spring-config
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
     backgroundColor: CATALOG_COLOR.accent,
   },
   footer: { flexDirection: 'row', alignItems: 'center', gap: CATALOG_SPACE.md },
-  label: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  label: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
   labelSpacer: { flex: 1 },
   replayButton: {
     paddingHorizontal: CATALOG_SPACE.md,
@@ -148,5 +148,5 @@ const styles = StyleSheet.create({
     backgroundColor: CATALOG_COLOR.surface,
   },
   replayButtonPressed: { backgroundColor: CATALOG_COLOR.surfacePressed },
-  replayText: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', color: CATALOG_COLOR.text },
+  replayText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
 });

package/native/catalog/PhoneFrame.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Platform, StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
-import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_RADIUS, CATALOG_TEXT } from './tokens';
 import { DEVICE_FRAME, DEVICE_SCALE_WARN_BELOW, deviceFrameScale } from './deviceFrame';
 import { resolveOverlayViewport } from './overlayViewport';
 import { useSpecimenAddress } from './SpecimenAddress';
@@ -149,5 +149,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     overflow: 'hidden',
   },
-  status: { position: 'absolute', fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  status: { position: 'absolute', ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/PropsTable.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
 import { PROPS_COLUMN_GAP } from './comparison';
 import type { PropDef } from './types';
 
@@ -86,14 +86,14 @@ const styles = StyleSheet.create({
   rowFirst: { paddingTop: 0 },
   rowLast: { borderBottomWidth: 0, paddingBottom: 0 },
   header: { width: 140, gap: 2 },
-  name: { fontSize: CATALOG_TYPE.sm, fontFamily: CATALOG_COLOR.code, fontWeight: '700', color: CATALOG_COLOR.text },
-  optionalMark: { fontWeight: '400', color: CATALOG_COLOR.textMuted },
-  type: { fontSize: CATALOG_TYPE.xs, fontFamily: CATALOG_COLOR.code, color: CATALOG_COLOR.accent },
+  name: { ...CATALOG_TEXT.codeSmallStrong, color: CATALOG_COLOR.text },
+  optionalMark: { ...CATALOG_TEXT.codeSmall, color: CATALOG_COLOR.textMuted },
+  type: { ...CATALOG_TEXT.codeMicro, color: CATALOG_COLOR.accent },
   // The second column — description + default — sized by the row's remaining width.
   body: { flex: 1, gap: 2 },
-  desc: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted, lineHeight: 17 },
-  default: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted },
-  defaultVal: { fontFamily: CATALOG_COLOR.code, color: CATALOG_COLOR.textMuted },
+  desc: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
+  default: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
+  defaultVal: { ...CATALOG_TEXT.codeMicro, color: CATALOG_COLOR.textMuted },
   gridRow: { flexDirection: 'row', gap: PROPS_COLUMN_GAP },
   cell: { flex: 1, minWidth: 0, paddingVertical: CATALOG_SPACE.md, gap: 4 },
   cellDivider: { borderBottomWidth: 1, borderBottomColor: CATALOG_COLOR.border },

package/native/catalog/ReferenceDetails.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, type LayoutChangeEvent, type TextStyle } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { PropsTable } from './PropsTable';
 import { propsColumns, referenceColumns } from './comparison';
 import type { ComposedOfEntry, SectionDef } from './types';
@@ -8,9 +8,12 @@ import type { ComposedOfEntry, SectionDef } from './types';
 // react-native-web reads `aria-level`; React Native's prop types do not declare it.
 const HEADING_LEVEL_2 = { 'aria-level': 2 } as Record<string, unknown>;
 
-function Fact({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
+/** `last` drops the trailing divider and its padding, the same convention `TokenRow`'s `last` and
+ *  `PropsTable`'s `rowLast` already use. Without it the final fact's bottom padding stacks on the
+ *  card's own `panelPadding`, so a card's contents sat ~10px lower than centred. */
+function Fact({ label, value, mono = false, last = false }: { label: string; value: string; mono?: boolean; last?: boolean }) {
   return (
-    <View style={styles.fact}>
+    <View style={[styles.fact, last && styles.factLast]}>
       <Text style={styles.factLabel}>{label}</Text>
       <Text style={[styles.factValue, mono && styles.mono]}>{value}</Text>
     </View>
@@ -47,11 +50,16 @@ function compositionLabel(entry: ComposedOfEntry): string {
   return entry.relationship === 'built-in' ? entry.component : `${entry.component} · ${entry.relationship}`;
 }
 
-function CompositionFacts({ composedOf }: { composedOf: ComposedOfEntry[] }) {
+function CompositionFacts({ composedOf, lastIsFlush = false }: { composedOf: ComposedOfEntry[]; lastIsFlush?: boolean }) {
   return (
     <>
       {composedOf.map((entry, i) => (
-        <Fact key={`${entry.component}-${entry.relationship}-${i}`} label={compositionLabel(entry)} value={entry.role} />
+        <Fact
+          key={`${entry.component}-${entry.relationship}-${i}`}
+          label={compositionLabel(entry)}
+          value={entry.role}
+          last={lastIsFlush && i === composedOf.length - 1}
+        />
       ))}
     </>
   );
@@ -91,11 +99,11 @@ export function ReferenceDetails<TId extends string>({ def }: { def: SectionDef<
     return (
       <View style={styles.card}>
         <Text role="heading" {...HEADING_LEVEL_2} style={styles.heading}>Quick reference</Text>
-        {def.path && <Fact label="Source" value={def.path} mono />}
+        {def.path && <Fact label="Source" value={def.path} mono last={!(def.composedOf && def.composedOf.length > 0)} />}
         {def.composedOf && def.composedOf.length > 0 && (
           <>
             <Text style={styles.subheading}>Composition</Text>
-            <CompositionFacts composedOf={def.composedOf} />
+            <CompositionFacts composedOf={def.composedOf} lastIsFlush />
           </>
         )}
       </View>
@@ -117,19 +125,25 @@ export function ReferenceDetails<TId extends string>({ def }: { def: SectionDef<
           </View>
           <View style={columnStyle}>
             <Text role="heading" {...HEADING_LEVEL_2} style={styles.heading}>Quick reference</Text>
-            {def.path && <Fact label="Source" value={def.path} mono />}
-            {!hide.accessibility && <Fact label="Accessibility" value={def.a11y ?? 'No accessibility notes documented.'} />}
+            {def.path && <Fact label="Source" value={def.path} mono last={hide.accessibility && !(!compositionIsOwnColumn && hasComposition)} />}
+            {!hide.accessibility && (
+              <Fact
+                label="Accessibility"
+                value={def.a11y ?? 'No accessibility notes documented.'}
+                last={!(!compositionIsOwnColumn && hasComposition)}
+              />
+            )}
             {!compositionIsOwnColumn && hasComposition && def.composedOf && (
               <>
                 <Text style={styles.subheading}>Composition</Text>
-                <CompositionFacts composedOf={def.composedOf} />
+                <CompositionFacts composedOf={def.composedOf} lastIsFlush />
               </>
             )}
           </View>
           {compositionIsOwnColumn && def.composedOf && (
             <View style={columnStyle}>
               <Text role="heading" {...HEADING_LEVEL_2} style={styles.heading}>Composition</Text>
-              <CompositionFacts composedOf={def.composedOf} />
+              <CompositionFacts composedOf={def.composedOf} lastIsFlush />
             </View>
           )}
         </View>
@@ -153,17 +167,13 @@ const styles = StyleSheet.create({
   column: { flex: 1, minWidth: 0 },
   columnStacked: { minWidth: 0 },
   heading: {
-    fontSize: CATALOG_TYPE.panelHeading,
-    fontWeight: '700',
-    letterSpacing: 0.52,
-    textTransform: 'uppercase',
+    ...CATALOG_TEXT.label,
     color: CATALOG_COLOR.text,
     marginBottom: 10,
   },
-  body: { fontSize: CATALOG_TYPE.md, lineHeight: 20, color: CATALOG_COLOR.textMuted },
+  body: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted },
   subheading: {
-    fontSize: CATALOG_TYPE.sm,
-    fontWeight: '700',
+    ...CATALOG_TEXT.captionStrong,
     color: CATALOG_COLOR.text,
     marginTop: CATALOG_SPACE.md,
     marginBottom: CATALOG_SPACE.xs,
@@ -175,14 +185,15 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: CATALOG_COLOR.borderSubtle,
   },
-  factLabel: { flexShrink: 1, minWidth: 0, fontSize: CATALOG_TYPE.md, fontWeight: '700', color: CATALOG_COLOR.text },
-  factValue: { minWidth: 0, fontSize: CATALOG_TYPE.md, lineHeight: 20, textAlign: 'left', color: CATALOG_COLOR.textMuted },
+  factLast: { paddingBottom: 0, borderBottomWidth: 0 },
+  factLabel: { flexShrink: 1, minWidth: 0, ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.text },
+  factValue: { minWidth: 0, ...CATALOG_TEXT.body, textAlign: 'left', color: CATALOG_COLOR.textMuted },
   // `wordBreak` isn't in the installed `TextStyle` type (RN's own, not RNW's — RNW's own
   // `Text/types.js` declares it; a browser applies any valid CSS property name it recognizes
   // regardless), so a bare literal here would report an unknown property under `--noEmit` even
   // though it genuinely works: a long unbroken token (a source path with no spaces, e.g.
   // `AnimatedChevron.tsx`) has no space for the browser's default line-breaking to use, so without
   // this it stays one unbroken run and overflows a narrow card instead of wrapping at its '/'s.
-  mono: { fontFamily: CATALOG_COLOR.code, wordBreak: 'break-word' } as TextStyle,
-  empty: { fontSize: CATALOG_TYPE.sm, fontStyle: 'italic', color: CATALOG_COLOR.textMuted },
+  mono: { ...CATALOG_TEXT.code, wordBreak: 'break-word' } as TextStyle,
+  empty: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/SectionBlock.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { View, Text, Pressable, StyleSheet, type LayoutChangeEvent } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { ComparisonGrid } from './ComparisonGrid';
 import { ComparisonGroups } from './ComparisonGroups';
 import { ComparisonList } from './ComparisonList';
@@ -53,7 +53,7 @@ export interface SectionPager<TId extends string> {
   labelOf?: (id: TId) => string;
 }
 
-function PagerButton<TId extends string>({
+export function PagerButton<TId extends string>({
   direction,
   targetId,
   onNavigate,
@@ -209,7 +209,40 @@ function placementBlock(block: PresentationBlock, height: number): PlacementBloc
  * are never recorded while side by side, so the decision never feeds on its own result; a width
  * change returns to stacked and decides again.
  */
-function Blocks<TId extends string>({ blocks, def, surface }: { blocks: PresentationBlock[]; def: SectionDef<TId>; surface: SpecimenSurfaceKind }) {
+/** The previous/next pager buttons, in their row — shared by `SectionBlock` and `FamilyPage` so a
+ *  family page's own page head gets the same pager chrome as every other page. */
+export function SectionPagerRow<TId extends string>({ pager }: { pager: SectionPager<TId> }) {
+  return (
+    <View style={styles.pager}>
+      <PagerButton direction="previous" targetId={pager.previousId} onNavigate={pager.onNavigate} labelOf={pager.labelOf} />
+      <PagerButton direction="next" targetId={pager.nextId} onNavigate={pager.onNavigate} labelOf={pager.labelOf} />
+    </View>
+  );
+}
+
+/** The page's specimen blocks (grid, grouped rows, list, or preview), stacked or side by side —
+ *  exported so `FamilyPage` can render a member's own specimens through the exact same placement
+ *  logic a normal page's blocks use, rather than a second copy of it. */
+export function Blocks<TId extends string>({
+  blocks,
+  def,
+  surface,
+  showLabels = true,
+  trimOuterMargin = false,
+}: {
+  blocks: PresentationBlock[];
+  def: SectionDef<TId>;
+  surface: SpecimenSurfaceKind;
+  /** V2b item 4: a family member's own specimens render with no uppercase "Variants" / "States /
+   *  configurations" block label — v8 has none inside a member block. A page's own `SectionBlock`
+   *  keeps its labels (the default, unchanged). */
+  showLabels?: boolean;
+  /** V2b item 5: drops this component's own page-level `marginBottom` — `FamilyPage`'s own
+   *  wrapper (`memberSpecimens`) supplies the exact spacing a member block needs instead, so the
+   *  two never double-stack. A page's own `SectionBlock` keeps the margin (the default,
+   *  unchanged). */
+  trimOuterMargin?: boolean;
+}) {
   const [available, setAvailable] = useState(0);
   const [heights, setHeights] = useState<number[]>([]);
   const [placement, setPlacement] = useState<'side' | 'stacked'>('stacked');
@@ -248,15 +281,22 @@ function Blocks<TId extends string>({ blocks, def, surface }: { blocks: Presenta
 
   const side = placement === 'side';
   return (
-    <View onLayout={onContainerLayout} style={[styles.blocks, side && styles.blocksSide]}>
+    <View onLayout={onContainerLayout} style={[styles.blocks, side && styles.blocksSide, trimOuterMargin && styles.blocksNoMargin]}>
       {blocks.map((block, i) => (
         <View
-          key={block.title || block.kind}
+          // A4: keyed by index, not `block.title || block.kind` — a member that sets the same
+          // `axis` on both `variants` and `states` now produces two blocks with identical titles,
+          // which would otherwise collide as React keys (as the family-section list already keys
+          // by index for the same reason — FamilyPage.tsx).
+          key={`${block.kind}-${i}`}
           onLayout={onBlockLayout(i)}
           // Side by side, each block fills its own half: a card always fills the column it is given.
           style={side ? styles.blockFill : undefined}
         >
-          {block.title ? <Text style={styles.blockLabel}>{block.title}</Text> : null}
+          {/* A3: `axis` now reaches grid/grouped blocks too (not only list), so any block kind
+              carrying one shows its (already informative) title on a family page, which otherwise
+              hides every generic block label via `showLabels={false}`. */}
+          {(showLabels && block.title) || ('axis' in block && block.axis) ? <Text style={styles.blockLabel}>{('axis' in block && block.axis) || block.title}</Text> : null}
           <BlockContent block={block} def={def} surface={surface} />
         </View>
       ))}
@@ -318,12 +358,7 @@ export function SectionBlock<TId extends string>({
           )}
           <Text style={styles.desc}>{def.description}</Text>
         </View>
-        {pager && (
-          <View style={styles.pager}>
-            <PagerButton direction="previous" targetId={pager.previousId} onNavigate={pager.onNavigate} labelOf={pager.labelOf} />
-            <PagerButton direction="next" targetId={pager.nextId} onNavigate={pager.onNavigate} labelOf={pager.labelOf} />
-          </View>
-        )}
+        {pager && <SectionPagerRow pager={pager} />}
       </View>
 
       {blocks.length > 0 && <Blocks blocks={blocks} def={def} surface={surface} />}
@@ -334,7 +369,7 @@ export function SectionBlock<TId extends string>({
 }
 
 const styles = StyleSheet.create({
-  breadcrumb: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  breadcrumb: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
   titlebar: {
     flexDirection: 'row',
     alignItems: 'flex-start',
@@ -355,9 +390,9 @@ const styles = StyleSheet.create({
     borderColor: CATALOG_COLOR.borderStrong,
     backgroundColor: CATALOG_COLOR.surface,
   },
-  osBadgeText: { fontSize: CATALOG_TYPE.xs, fontWeight: '700', letterSpacing: 0.4, color: CATALOG_COLOR.text },
-  title: { fontSize: CATALOG_TYPE.pageTitle, fontWeight: '700', color: CATALOG_COLOR.text, marginBottom: 5 },
-  desc: { fontSize: CATALOG_TYPE.md, lineHeight: 20, color: CATALOG_COLOR.textMuted, maxWidth: 700 },
+  osBadgeText: { ...CATALOG_TEXT.microLabel, color: CATALOG_COLOR.text },
+  title: { ...CATALOG_TEXT.pageTitle, color: CATALOG_COLOR.text, marginBottom: 5 },
+  desc: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted, maxWidth: 700 },
   pager: { flexDirection: 'row', gap: 6, flexShrink: 0 },
   pagerButton: {
     width: CATALOG_LAYOUT.controlSize,
@@ -372,26 +407,21 @@ const styles = StyleSheet.create({
   pagerButtonActive: { backgroundColor: CATALOG_COLOR.surfacePressed },
   pagerButtonDisabled: { backgroundColor: CATALOG_COLOR.pageBackground },
   focusRing: { outlineWidth: CATALOG_LAYOUT.focusRingWidth, outlineStyle: 'solid', outlineColor: CATALOG_COLOR.focusRing },
-  pagerGlyph: { fontSize: CATALOG_TYPE.lg, color: CATALOG_COLOR.text },
+  pagerGlyph: { ...CATALOG_TEXT.icon, color: CATALOG_COLOR.text },
   pagerGlyphDisabled: { color: CATALOG_COLOR.textMuted },
   blocks: { gap: CATALOG_LAYOUT.blockGap, marginBottom: CATALOG_LAYOUT.blockGap },
+  blocksNoMargin: { marginBottom: 0 },
   blocksSide: { flexDirection: 'row', alignItems: 'flex-start' },
   blockFill: { flex: 1, minWidth: 0 },
   // Centred in the card, like every other example (a single phone-width frame used to sit left).
   frames: { flexDirection: 'row', flexWrap: 'wrap', gap: CATALOG_SPACE.xl, alignItems: 'flex-start', justifyContent: 'center' },
   frame: { maxWidth: '100%', gap: CATALOG_SPACE.sm },
   frameLabel: {
-    fontSize: CATALOG_TYPE.tableHeader,
-    fontWeight: '800',
-    letterSpacing: 0.44,
-    textTransform: 'uppercase',
+    ...CATALOG_TEXT.label,
     color: CATALOG_COLOR.textMuted,
   },
   blockLabel: {
-    fontSize: CATALOG_TYPE.sm,
-    fontWeight: '700',
-    letterSpacing: 0.72,
-    textTransform: 'uppercase',
+    ...CATALOG_TEXT.label,
     color: CATALOG_COLOR.text,
     marginBottom: CATALOG_LAYOUT.blockLabelGap,
   },
@@ -423,10 +453,10 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: CATALOG_COLOR.border,
   },
-  tableCaptionText: { fontSize: CATALOG_TYPE.tableHeader, fontWeight: '800', letterSpacing: 0.44, color: CATALOG_COLOR.text },
+  tableCaptionText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
   // Same cell padding `ComparisonList` uses: the requested width instead reaches the live demo
   // untouched through `tableBodyViewport`, the inner width-qualified group nested inside this body.
   tableBody: { padding: MATRIX_LAYOUT.cellPadding, flexGrow: 1, alignItems: 'center', justifyContent: 'flex-start' },
   tableBodyViewport: { maxWidth: '100%' },
-  emptyText: { fontSize: CATALOG_TYPE.sm, fontStyle: 'italic', color: CATALOG_COLOR.textMuted },
+  emptyText: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/SpacingScaleGallery.tsx

@@ -1,6 +1,6 @@
 import { View, Text, StyleSheet } from 'react-native';
 import { TokenRow, TokenRowGroup } from './TokenRow';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS } from './tokens';
 
 /**
  * Renders a spacing scale as a stack of `TokenRow`s, each showing a step's name, a bar sized to its
@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
   // Wider gap than a plain gap-only stack — one row's use-note shouldn't crowd the next row's label.
   tokenStack: { gap: CATALOG_SPACE.lg },
   row: { flexDirection: 'row', alignItems: 'center', gap: CATALOG_SPACE.md },
-  label: { width: 48, fontSize: CATALOG_TYPE.sm, fontWeight: '700', color: CATALOG_COLOR.text },
+  label: { width: 48, ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
   bar: { height: 12, borderRadius: CATALOG_RADIUS.sm, backgroundColor: CATALOG_COLOR.accent },
-  value: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted },
+  value: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/Swatch.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet } from 'react-native';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE, CATALOG_RADIUS } from './tokens';
 
 /** One token swatch: its rendered value (a colour chip) plus name/value as data — the shared shape
  *  behind every Colors gallery (this framework's own, and any host app's, e.g. the Native App DS
@@ -35,6 +35,6 @@ const styles = StyleSheet.create({
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: CATALOG_COLOR.border,
   },
-  name: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', color: CATALOG_COLOR.text },
-  value: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted },
+  name: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
+  value: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/TokenLayouts.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { View, Text, StyleSheet, type LayoutChangeEvent } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { sectionColumns, tileGeometry, TOKEN_LAYOUT_GAP, TOKEN_SECTION_MIN_WIDTH } from './tokenLayout';
 import type { TokenSection } from './types';
 
@@ -78,13 +78,10 @@ export function TokenTile({ name, value, note, children }: { name: string; value
 const styles = StyleSheet.create({
   sections: { flexDirection: 'row', flexWrap: 'wrap', gap: TOKEN_LAYOUT_GAP, rowGap: CATALOG_LAYOUT.blockGap, alignItems: 'flex-start' },
   sectionLabel: {
-    fontSize: CATALOG_TYPE.sm,
-    fontWeight: '700',
-    letterSpacing: 0.72,
-    textTransform: 'uppercase',
+    ...CATALOG_TEXT.label,
     color: CATALOG_COLOR.text,
   },
-  sectionDesc: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted, marginTop: CATALOG_SPACE.xs },
+  sectionDesc: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted, marginTop: CATALOG_SPACE.xs },
   card: {
     marginTop: CATALOG_LAYOUT.blockLabelGap,
     backgroundColor: CATALOG_COLOR.surface,
@@ -97,7 +94,7 @@ const styles = StyleSheet.create({
   grid: { flexDirection: 'row', flexWrap: 'wrap', gap: TOKEN_LAYOUT_GAP },
   tile: { gap: CATALOG_SPACE.xs },
   tilePreview: { minHeight: 56, justifyContent: 'center', marginBottom: CATALOG_SPACE.xs },
-  tileName: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', color: CATALOG_COLOR.text },
-  tileValue: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted },
-  tileNote: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted, lineHeight: 16 },
+  tileName: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
+  tileValue: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
+  tileNote: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/TokenRow.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { View, Text, StyleSheet, type LayoutChangeEvent } from 'react-native';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
 
 type Lane = { width: number; report: (width: number) => void };
 
@@ -104,5 +104,5 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: CATALOG_COLOR.border,
   },
-  use: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  use: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/TypeScaleGallery.tsx

@@ -1,6 +1,6 @@
 import { View, Text, StyleSheet, type TextStyle } from 'react-native';
 import { TokenRow, TokenRowGroup } from './TokenRow';
-import { CATALOG_TYPE, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR, CATALOG_SPACE } from './tokens';
 
 /**
  * Renders a type scale as a stack of `TokenRow`s, each showing a step's name (rendered at its own
@@ -44,5 +44,5 @@ const styles = StyleSheet.create({
   // two read as one unit at a glance.
   row: { flexDirection: 'row', alignItems: 'baseline', gap: CATALOG_SPACE.sm },
   sample: { color: CATALOG_COLOR.text },
-  meta: { fontSize: CATALOG_TYPE.xs, color: CATALOG_COLOR.textMuted },
+  meta: { ...CATALOG_TEXT.micro, color: CATALOG_COLOR.textMuted },
 });

package/native/catalog/UpdatePanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
-import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TYPE } from './tokens';
+import { CATALOG_COLOR, CATALOG_LAYOUT, CATALOG_RADIUS, CATALOG_SPACE, CATALOG_TEXT } from './tokens';
 import { CatalogButton } from './CatalogButton';
 import { DS_VIEWER_SECRET_HEADER } from './catalogNavigation';
 import {
@@ -1080,9 +1080,9 @@ const styles = StyleSheet.create({
   resultNote: { borderRadius: CATALOG_RADIUS.md, padding: 14, marginTop: 12, marginBottom: 18, gap: 4 },
   resultNoteOk: { backgroundColor: CATALOG_COLOR.successSubtle },
   resultNoteErr: { backgroundColor: CATALOG_COLOR.dangerSubtle, borderWidth: 1, borderColor: CATALOG_COLOR.dangerBorder },
-  resultTitle: { fontSize: CATALOG_TYPE.lg, fontWeight: '800' },
-  resultDescription: { fontSize: CATALOG_TYPE.panelHeading, lineHeight: 19 },
-  resultDetail: { fontSize: CATALOG_TYPE.sm, lineHeight: 18 },
+  resultTitle: { ...CATALOG_TEXT.heading3 },
+  resultDescription: { ...CATALOG_TEXT.caption },
+  resultDetail: { ...CATALOG_TEXT.caption },
   resultRow: { flexDirection: 'row', alignItems: 'center', gap: CATALOG_SPACE.md, marginTop: 8 },
   // The catalog's smallest control size (the major banner's close button), filled in the note's colour.
   resultButton: { height: 32, paddingHorizontal: 14, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
@@ -1091,15 +1091,14 @@ const styles = StyleSheet.create({
   // uses, so "unavailable" doesn't read as merely "pressed" (the note's own full-colour fill at
   // reduced opacity).
   resultButtonDisabled: { backgroundColor: CATALOG_COLOR.controlDisabled },
-  resultButtonText: { color: '#ffffff', fontSize: CATALOG_TYPE.sm, fontWeight: '700' },
+  resultButtonText: { ...CATALOG_TEXT.captionStrong, color: '#ffffff' },
   resultButtonTextDisabled: { color: CATALOG_COLOR.controlDisabledText },
-  resultLink: { fontSize: CATALOG_TYPE.panelHeading, fontWeight: '700', textDecorationLine: 'underline' },
-  crumb: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  resultLink: { ...CATALOG_TEXT.captionStrong, textDecorationLine: 'underline' },
+  crumb: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
   headingTarget: { marginTop: 4, marginBottom: 6 },
-  title: { fontSize: CATALOG_TYPE.pageTitle, fontWeight: '800', color: CATALOG_COLOR.text },
+  title: { ...CATALOG_TEXT.pageTitle, color: CATALOG_COLOR.text },
   code: {
-    fontFamily: 'Menlo, monospace',
-    fontSize: CATALOG_TYPE.sm,
+    ...CATALOG_TEXT.codeSmall,
     backgroundColor: CATALOG_COLOR.surfaceMuted,
     borderWidth: 1,
     borderColor: CATALOG_COLOR.border,
@@ -1108,39 +1107,39 @@ const styles = StyleSheet.create({
     paddingVertical: 2,
   },
   versionsRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
-  versionsText: { fontSize: CATALOG_TYPE['2xl'], fontWeight: '800', color: CATALOG_COLOR.text },
-  arrow: { fontSize: CATALOG_TYPE['2xl'], color: CATALOG_COLOR.textMuted },
+  versionsText: { ...CATALOG_TEXT.heading1, color: CATALOG_COLOR.text },
+  arrow: { ...CATALOG_TEXT.heading1, color: CATALOG_COLOR.textMuted },
   pill: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, backgroundColor: CATALOG_COLOR.accentSubtle },
   pillMajor: { backgroundColor: CATALOG_COLOR.warningSubtle },
   pillSuccess: { backgroundColor: CATALOG_COLOR.successSubtle },
-  pillText: { fontSize: CATALOG_TYPE.sm, fontWeight: '700', color: CATALOG_COLOR.accent },
+  pillText: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.accent },
   pillTextMajor: { color: CATALOG_COLOR.warning },
   pillTextSuccess: { color: CATALOG_COLOR.success },
   pillOff: { backgroundColor: CATALOG_COLOR.chip },
   pillTextOff: { color: CATALOG_COLOR.textMuted },
   facts: { marginTop: 18, borderTopWidth: 1, borderTopColor: CATALOG_COLOR.border },
   factRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: CATALOG_SPACE.md, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: CATALOG_COLOR.border },
-  factLabel: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.textMuted },
-  factValue: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.text },
+  factLabel: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted },
+  factValue: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.text },
   switchText: { flex: 1, gap: 2 },
-  switchLabel: { fontSize: CATALOG_TYPE.md, fontWeight: '700', color: CATALOG_COLOR.text },
+  switchLabel: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.text },
   switch: { width: 44, height: 26 },
-  switchHelp: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
-  muted: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted, marginTop: 4 },
+  switchHelp: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
+  muted: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted, marginTop: 4 },
   block: { marginTop: 18 },
-  h3: { fontSize: CATALOG_TYPE.panelHeading, textTransform: 'uppercase', letterSpacing: 0.5, color: CATALOG_COLOR.text, marginBottom: 8 },
-  bullet: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.text, marginVertical: 2 },
+  h3: { ...CATALOG_TEXT.label, color: CATALOG_COLOR.text, marginBottom: 8 },
+  bullet: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.text, marginVertical: 2 },
   filesBox: { borderWidth: 1, borderColor: CATALOG_COLOR.border, borderRadius: CATALOG_RADIUS.md },
   fileRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, paddingHorizontal: 12 },
   fileRowBorder: { borderTopWidth: 1, borderTopColor: CATALOG_COLOR.border },
-  filePath: { fontFamily: 'Menlo, monospace', fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.text },
-  fileReason: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
-  fileReasonDirty: { color: CATALOG_COLOR.warning, fontWeight: '700' },
+  filePath: { ...CATALOG_TEXT.codeSmall, color: CATALOG_COLOR.text },
+  fileReason: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
+  fileReasonDirty: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.warning },
   actions: { flexDirection: 'row', alignItems: 'center', gap: CATALOG_SPACE.md, marginTop: 20 },
   noteBox: { borderRadius: CATALOG_RADIUS.md, padding: 12, marginTop: 18 },
   noteBoxRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 9 },
-  noteBoxText: { fontSize: CATALOG_TYPE.md, flexShrink: 1 },
-  noteBoxBold: { fontWeight: '700' },
+  noteBoxText: { ...CATALOG_TEXT.body, flexShrink: 1 },
+  noteBoxBold: { ...CATALOG_TEXT.bodyStrong },
   steps: { marginTop: 12 },
   stepRow: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 6 },
   stepIcon: { width: 20, height: 20, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
@@ -1151,10 +1150,10 @@ const styles = StyleSheet.create({
   stepIconNow: { borderWidth: 2, borderColor: CATALOG_COLOR.accent },
   stepIconTodo: { borderWidth: 2, borderColor: CATALOG_COLOR.borderStrong },
   stepIconFail: { backgroundColor: CATALOG_COLOR.dangerSubtle },
-  stepIconGlyph: { fontSize: CATALOG_TYPE.sm, fontWeight: '800', color: CATALOG_COLOR.text },
-  stepLabel: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.textMuted },
-  stepLabelNow: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.text, fontWeight: '700' },
-  stepLabelFail: { fontSize: CATALOG_TYPE.md, color: CATALOG_COLOR.text, fontWeight: '700' },
+  stepIconGlyph: { ...CATALOG_TEXT.captionStrong, color: CATALOG_COLOR.text },
+  stepLabel: { ...CATALOG_TEXT.body, color: CATALOG_COLOR.textMuted },
+  stepLabelNow: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.text },
+  stepLabelFail: { ...CATALOG_TEXT.bodyStrong, color: CATALOG_COLOR.text },
   logBox: { backgroundColor: '#1d1d1f', borderRadius: CATALOG_RADIUS.md, padding: 12, marginTop: 8, maxHeight: 240 },
-  logText: { color: '#e8e8e8', fontSize: CATALOG_TYPE.sm, fontFamily: 'Menlo, monospace' },
+  logText: { ...CATALOG_TEXT.codeSmall, color: '#e8e8e8' },
 });

package/native/catalog/VariantGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { CATALOG_TYPE, CATALOG_COLOR } from './tokens';
+import { CATALOG_TEXT, CATALOG_COLOR } from './tokens';
 
 /** Labels one example (or small group of examples) inside a section's Examples card — a bold
  *  uppercase name plus a one-line description stacked below it, sitting above whatever demo content
@@ -39,10 +39,7 @@ const styles = StyleSheet.create({
   group: { gap: 6 },
   groupCenter: { alignItems: 'center' },
   groupLeft: { alignItems: 'flex-start' },
-  name: {
-    fontSize: CATALOG_TYPE.xs, fontWeight: '700', color: CATALOG_COLOR.text,
-    textTransform: 'uppercase', letterSpacing: 0.4,
-  },
-  desc: { fontSize: CATALOG_TYPE.sm, color: CATALOG_COLOR.textMuted },
+  name: { ...CATALOG_TEXT.microLabel, color: CATALOG_COLOR.text },
+  desc: { ...CATALOG_TEXT.caption, color: CATALOG_COLOR.textMuted },
   textCenter: { textAlign: 'center' },
 });