@krapwoo/ds-viewer 0.9.0 → 0.10.0

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';
@@ -334,7 +334,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 +355,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,7 +372,7 @@ 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 },
   blocksSide: { flexDirection: 'row', alignItems: 'flex-start' },
@@ -381,17 +381,11 @@ const styles = StyleSheet.create({
   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 +417,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 },
 });