@duro-app/ui 5.11.0 → 5.12.0

package/src/components/Drawer/Drawer.tsx

@@ -11,8 +11,9 @@ import {
   useRef,
 } from 'react'
 import {html} from 'react-strict-dom'
-import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
+import type {DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 import {ModalContext} from '../../shared/ModalContext'
@@ -89,57 +90,27 @@ function Root({
   swipeDismiss = true,
   closeAnimationDuration = 'fast',
 }: RootProps) {
-  const isControlled = controlledOpen !== undefined
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const [closing, setClosing] = useState(false)
-  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const {
+    present,
+    closing,
+    requestOpen,
+    requestClose,
+    closeNow: requestCloseImmediate,
+  } = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'after-exit',
+  })
   const panelRef = useRef<HTMLDivElement>(null)
 
-  const isOpen = isControlled ? controlledOpen : internalOpen
-
   const titleId = useId()
   const descriptionId = useId()
 
-  const requestOpen = useCallback(() => {
-    if (closingTimerRef.current) {
-      clearTimeout(closingTimerRef.current)
-      closingTimerRef.current = null
-    }
-    setClosing(false)
-    if (!isControlled) setInternalOpen(true)
-    onOpenChange?.(true)
-  }, [isControlled, onOpenChange])
-
-  const requestClose = useCallback(() => {
-    setClosing(true)
-    closingTimerRef.current = setTimeout(() => {
-      setClosing(false)
-      closingTimerRef.current = null
-      if (!isControlled) setInternalOpen(false)
-      onOpenChange?.(false)
-    }, DURATION_MS[closeAnimationDuration])
-  }, [isControlled, onOpenChange, closeAnimationDuration])
-
-  const requestCloseImmediate = useCallback(() => {
-    if (closingTimerRef.current) {
-      clearTimeout(closingTimerRef.current)
-      closingTimerRef.current = null
-    }
-    setClosing(false)
-    if (!isControlled) setInternalOpen(false)
-    onOpenChange?.(false)
-  }, [isControlled, onOpenChange])
-
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
-    }
-  }, [])
-
   // Handle Escape key
   useEffect(() => {
-    if (!isOpen && !closing) return
+    if (!present) return
     if (!dismissable) return
 
     function onKeyDown(e: KeyboardEvent) {
@@ -150,23 +121,23 @@ function Root({
     }
     document.addEventListener('keydown', onKeyDown)
     return () => document.removeEventListener('keydown', onKeyDown)
-  }, [isOpen, closing, dismissable, requestClose])
+  }, [present, dismissable, requestClose])
 
   // Lock body scroll when open
   useEffect(() => {
-    if (isOpen || closing) {
+    if (present) {
       const prev = document.body.style.overflow
       document.body.style.overflow = 'hidden'
       return () => {
         document.body.style.overflow = prev
       }
     }
-  }, [isOpen, closing])
+  }, [present])
 
   return (
     <DrawerContext.Provider
       value={{
-        open: isOpen || closing,
+        open: present,
         closing,
         closeDuration: closeAnimationDuration,
         anchor,

package/src/components/Drawer/styles.css.ts

@@ -79,6 +79,8 @@ export const styles = css.create({
   // Panel sizing per anchor
   panelHorizontal: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     height: '100%',
     borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
@@ -86,6 +88,8 @@ export const styles = css.create({
   },
   panelVertical: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,

package/src/components/Grid/styles.css.ts

@@ -86,6 +86,8 @@ export const styles = css.create({
     // against an auto width the line breaks come out wrong and the container
     // under-reports its height (verified on the iOS simulator).
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
   },
   // border-box is explicit: react-strict-dom mirrors the web default
   // (content-box) on native, which adds the gap padding on top of the basis

package/src/components/Icon/Icon.native.tsx

@@ -0,0 +1,54 @@
+import {createElement} from 'react'
+import Svg, {Circle, Ellipse, Line, Path, Polygon, Polyline, Rect} from 'react-native-svg'
+import {ICON_SIZES, type ColorToken} from '@duro-app/tokens/keys'
+import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
+import {GLYPHS, type Paint, type Shape} from './geometry'
+import type {IconProps} from './types'
+
+export type {IconName, IconProps, IconSize} from './types'
+
+const elements = {
+  path: Path,
+  circle: Circle,
+  ellipse: Ellipse,
+  line: Line,
+  rect: Rect,
+  polyline: Polyline,
+  polygon: Polygon,
+} as const
+
+/** react-native-svg reads `currentColor` from the Svg's `color`, which is a resolved colour here. */
+function nativeShape(shape: Shape, key: number) {
+  const {tag, ...attrs} = shape
+  return createElement(elements[tag] as never, {key, ...attrs})
+}
+
+/**
+ * Native Icon: the same geometry as the web, drawn with react-native-svg
+ * (plan N0, Decision 9; RSD has no `svg`). It cannot inherit a text colour,
+ * so its colour is a token resolved through the nearest ThemeProvider. It is
+ * decorative: the control that hosts it carries the label.
+ */
+export function Icon({name, size: sizeToken = 'lg', color = 'text'}: IconProps) {
+  const size = ICON_SIZES[sizeToken]
+  const glyph = GLYPHS[name]
+  const resolved = useResolvedColors()[color as ColorToken]
+  const paint: {fill: Paint; stroke?: Paint} =
+    glyph.style === 'fill' ? {fill: 'currentColor'} : {fill: 'none', stroke: 'currentColor'}
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      color={resolved}
+      {...paint}
+      strokeWidth={glyph.style === 'stroke' ? 2 : undefined}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      {glyph.shapes.map(nativeShape)}
+    </Svg>
+  )
+}

package/src/components/Icon/Icon.tsx

@@ -1,439 +1,27 @@
-import type {ReactNode} from 'react'
-import {ICON_SIZES, type IconSize} from '@duro-app/tokens/keys'
+import {createElement} from 'react'
+import {ICON_SIZES} from '@duro-app/tokens/keys'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
 
-export type {IconSize}
+import {GLYPHS, type Shape} from './geometry'
+import type {IconProps} from './types'
 
-export type IconName =
-  | 'x-circle'
-  | 'check-circle'
-  | 'check-done'
-  | 'clock'
-  | 'forbidden'
-  | 'info-circle'
-  | 'alert-triangle'
-  | 'shield'
-  | 'lock'
-  | 'key'
-  // Navigation / wayfinding glyphs
-  | 'map'
-  | 'layers'
-  | 'repeat'
-  | 'database'
-  | 'shield-check'
-  | 'route'
-  | 'git-branch'
-  | 'menu'
-  | 'pin'
-  // Infrastructure / inventory glyphs
-  | 'server'
-  | 'hard-drive'
-  | 'box'
-  | 'image'
-  | 'tag'
-  | 'pie-chart'
-  // People / access / admin glyphs
-  | 'users'
-  | 'user-plus'
-  | 'mail'
-  | 'file-text'
-  | 'plug'
-  // Input / action glyphs
-  | 'search'
-  | 'mic'
-  // Color-mode glyphs
-  | 'sun'
-  | 'moon'
-  | 'monitor'
-  | 'contrast'
-  // Device status glyphs
-  | 'signal'
-  | 'battery'
-  // Media glyphs
-  | 'video'
-  | 'music'
-  | 'play'
-  | 'pause'
-  // Filled variants (solid shape with cutout symbol)
-  | 'info-circle-filled'
-  | 'alert-triangle-filled'
-  | 'check-circle-filled'
-  | 'x-circle-filled'
-  | 'shield-filled'
-  | 'lock-filled'
+export type {IconName, IconProps, IconSize} from './types'
 
-/** Stroke-based icons (Feather/Lucide style) */
-const strokeIcons: Partial<Record<IconName, ReactNode>> = {
-  'x-circle': (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <line x1="15" y1="9" x2="9" y2="15" />
-      <line x1="9" y1="9" x2="15" y2="15" />
-    </>
-  ),
-  'check-circle': (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="16 10 11 15 8 12" />
-    </>
-  ),
-  'check-done': (
-    <>
-      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-      <polyline points="22 4 12 14.01 9 11.01" />
-    </>
-  ),
-  clock: (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </>
-  ),
-  forbidden: (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
-    </>
-  ),
-  'info-circle': (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <line x1="12" y1="16" x2="12" y2="12" />
-      <line x1="12" y1="8" x2="12.01" y2="8" />
-    </>
-  ),
-  'alert-triangle': (
-    <>
-      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-      <line x1="12" y1="9" x2="12" y2="13" />
-      <line x1="12" y1="17" x2="12.01" y2="17" />
-    </>
-  ),
-  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
-  lock: (
-    <>
-      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-    </>
-  ),
-  key: (
-    <>
-      <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
-    </>
-  ),
-  // ---- navigation / wayfinding ----
-  map: (
-    <>
-      <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" />
-      <line x1="8" y1="2" x2="8" y2="18" />
-      <line x1="16" y1="6" x2="16" y2="22" />
-    </>
-  ),
-  layers: (
-    <>
-      <polygon points="12 2 2 7 12 12 22 7 12 2" />
-      <polyline points="2 17 12 22 22 17" />
-      <polyline points="2 12 12 17 22 12" />
-    </>
-  ),
-  // Two crossing arrows — exchange / interface flows.
-  repeat: (
-    <>
-      <polyline points="17 1 21 5 17 9" />
-      <path d="M3 11V9a4 4 0 0 1 4-4h14" />
-      <polyline points="7 23 3 19 7 15" />
-      <path d="M21 13v2a4 4 0 0 1-4 4H3" />
-    </>
-  ),
-  database: (
-    <>
-      <ellipse cx="12" cy="5" rx="9" ry="3" />
-      <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
-      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
-    </>
-  ),
-  'shield-check': (
-    <>
-      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-      <polyline points="9 12 11 14 15 10" />
-    </>
-  ),
-  // Milestone path — roadmap / itinerary.
-  route: (
-    <>
-      <circle cx="6" cy="19" r="3" />
-      <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
-      <circle cx="18" cy="5" r="3" />
-    </>
-  ),
-  'git-branch': (
-    <>
-      <line x1="6" y1="3" x2="6" y2="15" />
-      <circle cx="18" cy="6" r="3" />
-      <circle cx="6" cy="18" r="3" />
-      <path d="M18 9a9 9 0 0 1-9 9" />
-    </>
-  ),
-  menu: (
-    <>
-      <line x1="3" y1="6" x2="21" y2="6" />
-      <line x1="3" y1="12" x2="21" y2="12" />
-      <line x1="3" y1="18" x2="21" y2="18" />
-    </>
-  ),
-  // ---- infrastructure / inventory ----
-  // Two stacked rack units — hosts, nodes, machines.
-  server: (
-    <>
-      <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
-      <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
-      <line x1="6" y1="6" x2="6.01" y2="6" />
-      <line x1="6" y1="18" x2="6.01" y2="18" />
-    </>
-  ),
-  // Disk enclosure — volumes, persistent storage.
-  'hard-drive': (
-    <>
-      <line x1="22" y1="12" x2="2" y2="12" />
-      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-      <line x1="6" y1="16" x2="6.01" y2="16" />
-      <line x1="10" y1="16" x2="10.01" y2="16" />
-    </>
-  ),
-  // Isometric crate — a deployable unit of work.
-  box: (
-    <>
-      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-      <line x1="12" y1="22.08" x2="12" y2="12" />
-    </>
-  ),
-  // Picture frame — container images, artefacts.
-  image: (
-    <>
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-      <circle cx="8.5" cy="8.5" r="1.5" />
-      <polyline points="21 15 16 10 5 21" />
-    </>
-  ),
-  // Luggage tag — labels, annotations, metadata.
-  tag: (
-    <>
-      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
-      <line x1="7" y1="7" x2="7.01" y2="7" />
-    </>
-  ),
-  // Share of a whole — quotas, budgets, utilisation.
-  'pie-chart': (
-    <>
-      <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
-      <path d="M22 12A10 10 0 0 0 12 2v10z" />
-    </>
-  ),
-  // ---- people / access / admin ----
-  users: (
-    <>
-      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-      <circle cx="9" cy="7" r="4" />
-      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-    </>
-  ),
-  'user-plus': (
-    <>
-      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-      <circle cx="8.5" cy="7" r="4" />
-      <line x1="20" y1="8" x2="20" y2="14" />
-      <line x1="23" y1="11" x2="17" y2="11" />
-    </>
-  ),
-  mail: (
-    <>
-      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
-      <polyline points="22,6 12,13 2,6" />
-    </>
-  ),
-  'file-text': (
-    <>
-      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-      <polyline points="14 2 14 8 20 8" />
-      <line x1="16" y1="13" x2="8" y2="13" />
-      <line x1="16" y1="17" x2="8" y2="17" />
-      <polyline points="10 9 9 9 8 9" />
-    </>
-  ),
-  plug: (
-    <>
-      <path d="M12 22v-5" />
-      <path d="M9 8V2" />
-      <path d="M15 8V2" />
-      <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" />
-    </>
-  ),
-  pin: (
-    <>
-      <line x1="12" y1="17" x2="12" y2="22" />
-      <path d="M9 10.76V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6.76a2 2 0 0 0 .55 1.38l1.68 1.78A1 1 0 0 1 16.5 16h-9a1 1 0 0 1-.73-1.68l1.68-1.78A2 2 0 0 0 9 10.76z" />
-    </>
-  ),
-  // ---- input / action ----
-  // Magnifying glass — search fields, find actions.
-  search: (
-    <>
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-    </>
-  ),
-  // Microphone — voice input, dictation.
-  mic: (
-    <>
-      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-      <line x1="12" y1="19" x2="12" y2="23" />
-      <line x1="8" y1="23" x2="16" y2="23" />
-    </>
-  ),
-  // ---- color mode ----
-  sun: (
-    <>
-      <circle cx="12" cy="12" r="5" />
-      <line x1="12" y1="1" x2="12" y2="3" />
-      <line x1="12" y1="21" x2="12" y2="23" />
-      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-      <line x1="1" y1="12" x2="3" y2="12" />
-      <line x1="21" y1="12" x2="23" y2="12" />
-      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-    </>
-  ),
-  moon: <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />,
-  monitor: (
-    <>
-      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-      <line x1="8" y1="21" x2="16" y2="21" />
-      <line x1="12" y1="17" x2="12" y2="21" />
-    </>
-  ),
-  // Circle, half solid — high-contrast / mode indicator.
-  contrast: (
-    <>
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 2a10 10 0 0 1 0 20z" fill="currentColor" stroke="none" />
-    </>
-  ),
-  // ---- device status ----
-  // Four ascending bars — cellular signal strength.
-  signal: (
-    <>
-      <line x1="4" y1="20" x2="4" y2="16" />
-      <line x1="9" y1="20" x2="9" y2="12" />
-      <line x1="14" y1="20" x2="14" y2="8" />
-      <line x1="19" y1="20" x2="19" y2="4" />
-    </>
-  ),
-  // Horizontal battery outline with a terminal nub — charge level.
-  battery: (
-    <>
-      <rect x="2" y="7" width="17" height="10" rx="2" />
-      <line x1="22" y1="11" x2="22" y2="13" />
-    </>
-  ),
-  // ---- media ----
-  // Camera body with a side lens — video file or clip.
-  video: (
-    <>
-      <rect x="2" y="6" width="14" height="12" rx="2" />
-      <path d="M16 10l6-3v10l-6-3z" />
-    </>
-  ),
-  // Beamed note — audio file or track.
-  music: (
-    <>
-      <path d="M9 18V5l12-2v13" />
-      <circle cx="6" cy="18" r="3" />
-      <circle cx="18" cy="16" r="3" />
-    </>
-  ),
-  // Right-pointing triangle — start playback.
-  play: <path d="M6 4l14 8-14 8z" />,
-  // Two vertical bars — pause playback.
-  pause: (
-    <>
-      <rect x="6" y="4" width="4" height="16" />
-      <rect x="14" y="4" width="4" height="16" />
-    </>
-  ),
+/** One geometry shape as the SVG element it was drawn as before 5.12. */
+function svgShape(shape: Shape, key: number) {
+  const {tag, ...attrs} = shape
+  return createElement(tag, {key, ...attrs})
 }
 
-/**
- * Filled icons — solid shape with evenodd cutout for the inner symbol.
- * The cutout reveals the background color, so they work on any theme.
- * Uses fill="currentColor" only, no stroke.
- */
-const filledIcons: Partial<Record<IconName, ReactNode>> = {
-  // Filled circle with "i" cutout (dot + line)
-  'info-circle-filled': (
-    <path
-      fillRule="evenodd"
-      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-.75 6a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0zM11 11a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0v-5z"
-    />
-  ),
-  // Filled triangle with "!" cutout
-  'alert-triangle-filled': (
-    <path
-      fillRule="evenodd"
-      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM11 10a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0v-3zm.25 6a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0z"
-    />
-  ),
-  // Filled circle with checkmark cutout
-  'check-circle-filled': (
-    <path
-      fillRule="evenodd"
-      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.707 8.707a1 1 0 0 0-1.414-1.414L11 13.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l5-5z"
-    />
-  ),
-  // Filled circle with X cutout
-  'x-circle-filled': (
-    <path
-      fillRule="evenodd"
-      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM9.707 8.293a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293z"
-    />
-  ),
-  // Filled shield with checkmark cutout
-  'shield-filled': (
-    <path
-      fillRule="evenodd"
-      d="M12 1L3 5v7c0 6.5 8.5 10.5 9 10.73.5-.23 9-4.23 9-10.73V5l-9-4zm3.707 8.707a1 1 0 0 0-1.414-1.414L11 11.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
-    />
-  ),
-  // Filled lock body with stroke shackle
-  'lock-filled': (
-    <>
-      <path
-        d="M7 11V7a5 5 0 0 1 10 0v4"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-    </>
-  ),
-}
-
-interface IconProps {
-  name: IconName
-  /** Token from the icon size scale: sm 16, md 18, lg 24, xl 36, xxl 48. */
-  size?: IconSize
-}
-
-export function Icon({name, size: sizeToken = 'lg'}: IconProps) {
+export function Icon({name, size: sizeToken = 'lg', color}: IconProps) {
   const size = ICON_SIZES[sizeToken]
-  const filled = filledIcons[name]
-  if (filled) {
+  const glyph = GLYPHS[name]
+  const shapes = glyph.shapes.map(svgShape)
+  const style = color ? {color: colors[color]} : undefined
+  if (glyph.style === 'fill') {
     return (
-      <svg viewBox="0 0 24 24" fill="currentColor" width={size} height={size}>
-        {filled}
+      <svg viewBox="0 0 24 24" fill="currentColor" width={size} height={size} style={style}>
+        {shapes}
       </svg>
     )
   }
@@ -448,8 +36,9 @@ export function Icon({name, size: sizeToken = 'lg'}: IconProps) {
       strokeLinejoin="round"
       width={size}
       height={size}
+      style={style}
     >
-      {strokeIcons[name]}
+      {shapes}
     </svg>
   )
 }