@olympusoss/canvas 4.0.0 → 5.0.0

package/src/atoms/badge/badge.md

@@ -0,0 +1,237 @@
+# Badges
+
+Two families on one Badge component, picked by boolean props. The metadata badge is a rectangular pill for labels like schema, role, or tag (tones: default, secondary, outline, destructive; add `mono` for token names). The status badge (`status`) is a rounded pill with a leading dot for live state like active, pending, or failed (tones: success, warning, error, info, neutral).
+
+## Usage
+
+```tsx
+<Badge secondary>admin</Badge>
+```
+
+## Variants
+
+### Type - status
+
+```tsx
+<Badge status success>admin</Badge>
+```
+
+### Type - identity
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+  <Text style={{ fontSize: 15, fontWeight: "600", color: tokens.foreground }}>Rachel Chen</Text>
+  <Badge status success>active</Badge>
+  <Badge status info>Verified</Badge>
+  <Badge secondary>employee</Badge>
+</View>
+```
+
+### Type - grants
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 4 }}>
+  <Badge secondary mono>authorization_code</Badge>
+  <Badge secondary mono>refresh_token</Badge>
+  <Badge secondary mono>client_credentials</Badge>
+</View>
+```
+
+### Badge variant - default
+
+```tsx
+<Badge default>admin</Badge>
+```
+
+### Badge variant - outline
+
+```tsx
+<Badge outline>admin</Badge>
+```
+
+### Badge variant - destructive
+
+```tsx
+<Badge destructive>admin</Badge>
+```
+
+### Mono (token / event names)
+
+```tsx
+<Badge secondary mono>admin</Badge>
+```
+
+## Do & Don't
+
+### Metadata badge
+
+**Do** — Neutral tags for metadata; reserve color and the status-badge dot for live state.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge secondary>employee</Badge>
+  <Badge secondary>engineering</Badge>
+  <Badge secondary>remote</Badge>
+  <Badge status success>active</Badge>
+</View>
+```
+
+**Don't** — Borrowing status colors for plain metadata reads as severity that isn't there; a red tag looks like an error.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge default>employee</Badge>
+  <Badge destructive>engineering</Badge>
+  <Badge default>remote</Badge>
+  <Badge destructive>active</Badge>
+</View>
+```
+
+### Status badge
+
+**Do** — Always pair the dot with a word: active, pending, failed.
+
+```tsx
+<Badge status error>Failed</Badge>
+```
+
+**Don't** — A bare colored dot isn't a label and fails for color-blind users.
+
+```tsx
+<Badge status error />
+```
+
+### Identity row
+
+**Do** — Show only the one or two badges relevant to this view.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+  <Text style={{ fontSize: 15, fontWeight: "600", color: tokens.foreground }}>Rachel Chen</Text>
+  <Badge status success>active</Badge>
+  <Badge secondary>employee</Badge>
+</View>
+```
+
+**Don't** — A wall of badges after a name buries the one that matters.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
+  <Text style={{ fontSize: 15, fontWeight: "600", color: tokens.foreground }}>Rachel Chen</Text>
+  <Badge status success>active</Badge>
+  <Badge status info>Verified</Badge>
+  <Badge secondary>employee</Badge>
+  <Badge secondary>engineering</Badge>
+  <Badge secondary>remote</Badge>
+  <Badge secondary>admin</Badge>
+</View>
+```
+
+### Token / code badge
+
+**Do** — Use the mono variant for tokens, scopes, and event names.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 4 }}>
+  <Badge secondary mono>authorization_code</Badge>
+  <Badge secondary mono>refresh_token</Badge>
+  <Badge secondary mono>client_credentials</Badge>
+</View>
+```
+
+**Don't** — Proportional type makes identifiers hard to scan and compare.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 4 }}>
+  <Badge secondary>authorization_code</Badge>
+  <Badge secondary>refresh_token</Badge>
+  <Badge secondary>client_credentials</Badge>
+</View>
+```
+
+### Default variant
+
+**Do** — Reserve the default fill for the single tag you want noticed first; keep the rest secondary.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge default>admin</Badge>
+  <Badge secondary>engineering</Badge>
+  <Badge secondary>remote</Badge>
+</View>
+```
+
+**Don't** — The solid primary fill is the loudest badge; using it for every tag makes the whole row shout and nothing leads.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge default>employee</Badge>
+  <Badge default>engineering</Badge>
+  <Badge default>remote</Badge>
+  <Badge default>admin</Badge>
+</View>
+```
+
+### Secondary variant
+
+**Do** — Keep secondary for static metadata (role, team) and switch to the status-badge for anything live.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge secondary>employee</Badge>
+  <Badge secondary>engineering</Badge>
+  <Badge status success>active</Badge>
+</View>
+```
+
+**Don't** — A muted gray pill reads as static metadata, so live state shown as a secondary badge looks inert and goes unnoticed.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge secondary>active</Badge>
+  <Badge secondary>pending</Badge>
+  <Badge secondary>failed</Badge>
+</View>
+```
+
+### Outline variant
+
+**Do** — Use outline on a plain surface where the quiet border has contrast, for low-priority secondary tags.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6, borderRadius: 6, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.card, padding: 12 }}>
+  <Badge outline>draft</Badge>
+  <Badge outline>internal</Badge>
+</View>
+```
+
+**Don't** — The thin border is the whole badge; on a colored or busy surface it disappears and the label floats unboxed.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6, borderRadius: 6, backgroundColor: tokens.primary, padding: 12 }}>
+  <Badge outline>draft</Badge>
+  <Badge outline>internal</Badge>
+</View>
+```
+
+### Destructive variant
+
+**Do** — Reserve destructive for genuinely destructive or error semantics like revoked or banned.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge destructive>Revoked</Badge>
+  <Badge destructive>Banned</Badge>
+  <Badge secondary>marketing</Badge>
+</View>
+```
+
+**Don't** — Solid red signals error or danger, so using it to color-code neutral categories raises a false alarm.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Badge destructive>marketing</Badge>
+  <Badge destructive>finance</Badge>
+  <Badge destructive>legal</Badge>
+</View>
+```

package/src/atoms/badge/badge.styles.ts

@@ -0,0 +1,79 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, palette } from "../../style/index.js";
+
+// Co-located Badge styles. The metadata badge uses semantic tokens; the status
+// badge uses the Tailwind palette (a soft 50/200/700 surface in light, a
+// 950/800/400 surface in dark) with a saturated 500 dot, and neutral stays on
+// the semantic muted token.
+
+export type Tone = "default" | "secondary" | "outline" | "destructive";
+export type Status = "success" | "warning" | "error" | "info" | "neutral";
+
+export const metaBase: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+  borderRadius: 6,
+  borderWidth: 1,
+  paddingHorizontal: 8,
+  paddingVertical: 2,
+};
+
+export const statusBase: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+  gap: 6,
+  borderRadius: 9999,
+  borderWidth: 1,
+  paddingHorizontal: 8,
+  paddingVertical: 2,
+};
+
+export const labelType: TextStyle = { fontSize: 12, lineHeight: 16, fontWeight: "500" };
+
+export function metaContainer(tokens: ColorTokens, tone: Tone): ViewStyle {
+  switch (tone) {
+    case "default": return { borderColor: "transparent", backgroundColor: tokens.primary };
+    case "secondary": return { borderColor: "transparent", backgroundColor: tokens.secondary };
+    case "outline": return { borderColor: tokens.border, backgroundColor: "transparent" };
+    case "destructive": return { borderColor: "transparent", backgroundColor: tokens.destructive };
+  }
+}
+
+export function metaLabel(tokens: ColorTokens, tone: Tone): TextStyle {
+  switch (tone) {
+    case "default": return { color: tokens["primary-foreground"] };
+    case "secondary": return { color: tokens["secondary-foreground"] };
+    case "outline": return { color: tokens.foreground };
+    case "destructive": return { color: tokens["destructive-foreground"] };
+  }
+}
+
+// The palette hue per status tone (neutral is handled on the semantic tokens).
+const STATUS_HUE: Record<Exclude<Status, "neutral">, string> = {
+  success: "green",
+  warning: "amber",
+  error: "red",
+  info: "blue",
+};
+
+export function statusContainer(tokens: ColorTokens, dark: boolean, status: Status): ViewStyle {
+  if (status === "neutral") return { borderColor: tokens.border, backgroundColor: tokens.muted };
+  const hue = STATUS_HUE[status];
+  return dark
+    ? { borderColor: palette[`${hue}-800`], backgroundColor: palette[`${hue}-950`] }
+    : { borderColor: palette[`${hue}-200`], backgroundColor: palette[`${hue}-50`] };
+}
+
+export function statusLabel(tokens: ColorTokens, dark: boolean, status: Status): TextStyle {
+  if (status === "neutral") return { color: tokens["muted-foreground"] };
+  const hue = STATUS_HUE[status];
+  return { color: dark ? palette[`${hue}-400`] : palette[`${hue}-700`] };
+}
+
+export function statusDot(tokens: ColorTokens, status: Status): ViewStyle {
+  const base: ViewStyle = { height: 6, width: 6, borderRadius: 9999 };
+  if (status === "neutral") return { ...base, backgroundColor: tokens["muted-foreground"] };
+  return { ...base, backgroundColor: palette[`${STATUS_HUE[status]}-500`] };
+}

package/src/atoms/badge/badge.tsx

@@ -0,0 +1,86 @@
+import { type ReactNode } from "react";
+import { View, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import * as s from "./badge.styles.js";
+import { type Tone, type Status } from "./badge.styles.js";
+
+// Two families of badge.
+//
+// 1. The metadata badge: a rectangular pill (rounded-md) for static labels like
+//    schema, role, or tag. Configured by a tone axis (default / secondary /
+//    outline / destructive) plus a `mono` modifier for token / event names.
+// 2. The status badge (`status`): a fully rounded pill carrying a leading dot,
+//    for live state like active / pending / failed. Configured by a status-tone
+//    axis (success / warning / error / info / neutral).
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Button's intentOf). The `status` boolean
+// switches families; the status-tone booleans only apply in that family.
+
+export interface BadgeProps {
+  children?: ReactNode;
+  // Family: metadata badge (default) vs. status badge (with a dot).
+  status?: boolean;
+  // Metadata tone (pick one; default is the solid primary fill).
+  default?: boolean;
+  secondary?: boolean;
+  outline?: boolean;
+  destructive?: boolean;
+  // Metadata modifier: monospace face for tokens, scopes, event names.
+  mono?: boolean;
+  // Status tone (pick one; only applies when `status`).
+  success?: boolean;
+  warning?: boolean;
+  error?: boolean;
+  info?: boolean;
+  neutral?: boolean;
+  /** Escape hatch for layout/positioning composition. */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Tone precedence when more than one is passed: first match wins.
+function toneOf(p: BadgeProps): Tone {
+  if (p.default) return "default";
+  if (p.destructive) return "destructive";
+  if (p.secondary) return "secondary";
+  if (p.outline) return "outline";
+  return "secondary";
+}
+
+function statusOf(p: BadgeProps): Status {
+  if (p.success) return "success";
+  if (p.error) return "error";
+  if (p.warning) return "warning";
+  if (p.info) return "info";
+  if (p.neutral) return "neutral";
+  return "neutral";
+}
+
+export function Badge(props: BadgeProps) {
+  const { children, mono, style } = props;
+  const { tokens, dark } = useTheme();
+
+  if (props.status) {
+    const tone = statusOf(props);
+    return (
+      <View style={[s.statusBase, s.statusContainer(tokens, dark, tone), style]}>
+        <View style={s.statusDot(tokens, tone)} />
+        {children != null ? (
+          <Text style={[s.labelType, s.statusLabel(tokens, dark, tone)]}>{children}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  const tone = toneOf(props);
+  // The mono modifier asks for a monospace face; RN has no font-family utility,
+  // so request the cross-platform monospace alias via inline style.
+  const monoStyle = mono ? { fontFamily: "monospace" as const } : null;
+
+  return (
+    <View style={[s.metaBase, s.metaContainer(tokens, tone), style]}>
+      {children != null ? (
+        <Text style={[s.labelType, s.metaLabel(tokens, tone), monoStyle]}>{children}</Text>
+      ) : null}
+    </View>
+  );
+}

package/src/atoms/breadcrumb/breadcrumb.md

@@ -0,0 +1,233 @@
+# Breadcrumbs
+
+Hierarchical navigation showing where you are.
+
+## Usage
+
+```tsx
+<Breadcrumb
+  items={["Projects", "Identity Platform", "Settings", "Profile"]}
+  chevron
+/>
+```
+
+## Variants
+
+### Separator - slash
+
+```tsx
+<Breadcrumb
+  items={["Projects", "Identity Platform", "Settings", "Profile"]}
+  slash
+/>
+```
+
+### Separator - dot
+
+```tsx
+<Breadcrumb items={["Projects", "Identity Platform", "Settings", "Profile"]} dot />
+```
+
+### Leading home icon
+
+```tsx
+<Breadcrumb
+  items={["Projects", "Identity Platform", "Settings", "Profile"]}
+  chevron
+  homeIcon
+/>
+```
+
+### In a page header
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
+  <View>
+    <View style={{ marginBottom: 8 }}>
+      <Breadcrumb items={["Users", "Rachel Chen"]} />
+    </View>
+    <Text style={{ fontSize: 24, lineHeight: 32, fontWeight: "600", letterSpacing: -0.4, color: tokens.foreground }}>Rachel Chen</Text>
+  </View>
+  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+    <Button outline small>Edit</Button>
+    <Button primary small>Save</Button>
+  </View>
+</View>
+```
+
+## Do & Don't
+
+### Current page
+
+**Do** — Ancestors are links; the page you're on is plain text at the end of the trail.
+
+```tsx
+<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} />
+```
+
+**Don't** — Linking the current page implies there's somewhere to go; it's a dead link to itself.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Projects</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>/</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Identity Platform</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>/</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Settings</Text>
+  </Pressable>
+</View>
+```
+
+### Deep paths
+
+**Do** — Collapse the middle to an ellipsis; keep the root and the last couple of levels.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Projects</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>›</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"], paddingHorizontal: 4 }}>…</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>›</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Avatar</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>›</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Edit</Text>
+</View>
+```
+
+**Don't** — A fully expanded deep path wraps and competes with the page.
+
+```tsx
+<Breadcrumb items={[
+    "Projects",
+    "Identity Platform",
+    "Settings",
+    "Profile",
+    "Avatar",
+    "Edit"
+  ]} />
+```
+
+### Separator
+
+**Do** — Pick one separator and use it the whole way.
+
+```tsx
+<Breadcrumb items={["Projects", "Identity Platform", "Settings"]} />
+```
+
+**Don't** — Mixing separators in one trail looks broken.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Projects</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>/</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Identity Platform</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>›</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Settings</Text>
+</View>
+```
+
+### Home root
+
+**Do** — Give the home icon an aria-label so the root is announced.
+
+```tsx
+<Breadcrumb homeIcon items={["Settings"]} />
+```
+
+**Don't** — An icon-only root with no label is unclear to screen readers.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Icon home muted size={14} />
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>/</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Settings</Text>
+</View>
+```
+
+### Chevron
+
+**Do** — Point the chevron in the reading direction (right in LTR) so each one means 'drill into the next level'.
+
+```tsx
+<Breadcrumb chevron items={["Projects", "Identity Platform", "Settings"]} />
+```
+
+**Don't** — A down (or back) chevron reads as a dropdown or a back affordance, not progression down the hierarchy.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Projects</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>⌄</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Identity Platform</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>⌄</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Settings</Text>
+</View>
+```
+
+### Slash
+
+**Do** — Keep the slash muted and lighter than the text so it reads as a quiet path divider.
+
+```tsx
+<Breadcrumb slash items={["Projects", "Identity Platform", "Settings"]} />
+```
+
+**Don't** — A full-weight, foreground slash competes with the labels and can read as part of a link.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Projects</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, paddingHorizontal: 4 }}>/</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Identity Platform</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground, paddingHorizontal: 4 }}>/</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Settings</Text>
+</View>
+```
+
+### Dot
+
+**Do** — Use a centered middot (·) so the dot sits between the crumbs and clearly divides them.
+
+```tsx
+<Breadcrumb dot items={["Projects", "Identity Platform", "Settings"]} />
+```
+
+**Don't** — A baseline period looks like a typo or end-of-sentence, not a separator between crumbs.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Projects</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>.</Text>
+  <Pressable accessibilityRole="link" style={({ pressed }) => (pressed ? { opacity: 0.7 } : null)}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Identity Platform</Text>
+  </Pressable>
+  <Text style={{ fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) }}>.</Text>
+  <Text style={{ fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Settings</Text>
+</View>
+```

package/src/atoms/breadcrumb/breadcrumb.styles.ts

@@ -0,0 +1,40 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, alpha } from "../../style/index.js";
+
+// Co-located Breadcrumb styles. Layout-only fragments are static objects; the
+// label/divider colors read the active tokens (so the trail follows light/dark
+// and the glass surface). The press-dim for links is applied by the component's
+// Pressable, matching the old `active:opacity-70`.
+
+// The nav row: wrapping horizontal trail, centered, with a tight gap (gap-1.5).
+export const nav: ViewStyle = {
+  flexDirection: "row",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: 6,
+};
+
+// A crumb cell (and the homeIcon cell): the icon/label sits next to its divider.
+export const crumb: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 6,
+};
+
+// A muted ancestor link (text-sm text-muted-foreground). Press feedback (the old
+// `active:opacity-70`) is applied by the component's Pressable.
+export function link(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] };
+}
+
+// The current page: emphasized foreground text, not a link
+// (text-sm font-medium text-foreground).
+export function current(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground };
+}
+
+// The divider glyph: quieter than the labels so it reads as a path divider
+// (text-sm text-muted-foreground/60).
+export function separator(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, color: alpha(tokens["muted-foreground"], 0.6) };
+}