Design: from tokens to stylesheet, snapshot and editor

Design: from tokens to stylesheet, snapshot and editor A data-flow diagram generated by Archify. 01 / UI sources 02 / platformkit/design 03 / Compose and export 04 / Tools 05 / Consumers ui/style + ui/css · ClassList builder · css.Sheet IR · 01 / UI sources ui/style + ui/css ClassList builder · css.Sheet IR ui/components · 41 constructors · 105 examples · 01 / UI sources · ClassLists() · Gallery() ui/components 41 constructors · 105 examples ClassLists() · Gallery() design.Theme literals · Light · Dark → Pair · 02 / platformkit/design · Default() design.Theme literals Light · Dark → Pair Default() Tokens() · design.CSS · 22 --pk-color-* · 3 --pk-font-* · 02 / platformkit/design Tokens() · design.CSS 22 --pk-color-* · 3 --pk-font-* ui.Compose → Sheet · bytes + fingerprint, once at mount · 03 / Compose and export · ui/ui.go ui.Compose → Sheet bytes + fingerprint, once at mount ui/ui.go Example.Describe → ui.Export · design-export.v1 · SHA256 · notices · 03 / Compose and export · ui/export.go Example.Describe → ui.Export design-export.v1 · SHA256 · notices ui/export.go tools/designexport/openpencil · register.mjs · corrections.mjs · foundation.mjs · 04 / Tools · SHA-256-checked SDK corrections tools/designexport/openpencil register.mjs · corrections.mjs · foundation.mjs SHA-256-checked SDK corrections tools/designexport · stdout · --example · --props · 04 / Tools · go run · Example.WithProps tools/designexport stdout · --example · --props go run · Example.WithProps Shells: admin · storefront · /admin/assets · ui.Assets in memory · 05 / Consumers · /admin/_gallery Shells: admin · storefront /admin/assets · ui.Assets in memory /admin/_gallery .fig foundation · 22 variables · 27 icon masters · 05 / Consumers · 3 font strings · light/dark .fig foundation 22 variables · 27 icon masters 3 font strings · light/dark OpenPencil editor · components, pages, flows unfinished · 05 / Consumers · npm audit gate open OpenPencil editor components, pages, flows unfinished npm audit gate open Light() · Dark() custom properties declared-class rules ClassLists() Sheet Gallery() examples Themes[] DesignExport JSON npm run generate -- out.fig native variables + icon masters opened, checked to reopen Legend primary data async batch data store data flow

Stylesheet

  • • ui.Compose(theme, extra...) returns Sheet{Body, Fingerprint}; admin Mount serves ui.Assets at /admin/assets
  • • A test proves every declared class resolves to a rule and no rendered class is undeclared

Snapshot

  • • ui.Export writes platformkit.design-export.v1: SHA256, Themes, Icons, Examples, CSS, Notices
  • • NOTICE and ui/design-notices.txt travel with the snapshot; generate.mjs refuses a .fig it cannot reopen

Editor gate

  • • npm test is the native conformance suite; CI runs it beside make check
  • • Open: component, page and flow conversion, the hosted editor build, npm audit high findings