sync-html-design-system

Sync HTML Design System

The website/design-system-poc/ directory is the HTML mirror of Remarc's macOS UI. When the Swift app changes a visible UI element, the HTML version usually needs the matching change. This skill captures the file layout, the icon system's two-CSS-files quirk, and the sync map.

File Inventory

website/design-system-poc/
  index.html           Static gallery — every UI state has a literal example
  app.js               Renders dynamic examples from cardTypes / writingModes / editorModes arrays
  styles.css           Full stylesheet incl. .icon.<alias> rules using ./assets paths
  sf-symbol-data.css   Parallel .icon.<alias> rules using inline data: URIs (for file:// captures)
  assets/
    sf-symbols/<sf-name>.svg   Verbatim SF symbol filenames (e.g. chevron.left.forwardslash.chevron.right.svg)
    <other>.svg                Custom assets (logos, fixtures)

SF Symbol Icon — Pattern

Two changes per icon:

1. Drop the SVG at assets/sf-symbols/<sf-symbol-name>.svg (keep the literal SF symbol filename, dots and all). If the SVG isn't already exported, run the pipeline in .worktrees/export-sf-symbol-assets/scripts/.
2. Add a rule in both CSS files:
   • styles.css: .icon.<alias> { --symbol: url("./assets/sf-symbols/<sf-name>.svg"); }
   • sf-symbol-data.css: same rule but with the inline data:image/svg+xml,… URI

<alias> is the friendly handle used in HTML (.icon.globe, .icon.web-code). Both CSS files exist because file:// captures can't load external SVGs reliably — the inline-data version is what fixture screenshots use.

The .icon class is alpha-mask + currentColor, so the SVG renders as the text color. Gradient or multi-color assets do NOT work here.

Gradient / Color-Preserving Asset — Pattern

Use background-image instead of mask so colors are preserved:

.<asset-class> {
  width: 14px; height: 14px;
  display: inline-block;
  flex: 0 0 auto;
  background-image: url("./assets/<file>.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}