os-clovy/styleguide.html at main · open-software-network/os-clovy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<!--
  Dev-only living styleguide. Renders Clovy's real design tokens (and, later,
  real components) against the real src/styles/app.css in a plain browser, so
  the design system can be reviewed and iterated without the native build.
  Nothing here ships: vite builds only the rollupOptions inputs (index /
  hud / agent-hud / meeting-hud), so this root-level HTML file is dev-only,
  the same way onboarding-preview.html is. No app code references it.

  Usage:
    pnpm dev
    open http://localhost:1421/styleguide.html

  URL params:
    ?section=<id>            open a specific section (e.g. ?section=type)
    ?theme=light|dark        force a theme (else os-clovy:theme / system)
    ?brand=rose|clay|sage|ocean|plum
                             force a brand preset (else os-clovy:brand / sage)
-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clovy styleguide</title>
    <script>
      // Pre-paint theme bootstrap, same as index.html (plus a ?theme=
      // override so a link can pick a theme). Keep the storage key in sync
      // with src/lib/theme.ts.
      (function () {
        try {
          var stored =
            new URLSearchParams(location.search).get("theme") ||
            localStorage.getItem("os-clovy:theme") ||
            localStorage.getItem("os-june:theme");
          var resolved =
            stored === "light" || stored === "dark"
              ? stored
              : window.matchMedia("(prefers-color-scheme: dark)").matches
                ? "dark"
                : "light";
          document.documentElement.setAttribute("data-theme", resolved);
        } catch (e) {}
      })();
    </script>
    <script>
      // Pre-paint brand accent + surface wash, mirroring index.html's inline
      // brand script (plus a ?brand= override that wins over localStorage so a
      // link can pick a preset). Keep the id->[accent, wash] map in sync with
      // src/lib/brand.ts.
      (function () {
        try {
          var param = new URLSearchParams(location.search).get("brand");
          var brand =
            param ||
            localStorage.getItem("os-clovy:brand") ||
            localStorage.getItem("os-june:brand");
          var brands = {
            clay: ["#b5551f", "#976851"],
            rose: ["#a5655c", "#9e6961"],
            sage: ["#3f812f", "#5a7c56"],
            ocean: ["#3d7b9a", "#467a95"],
            // "blue" was renamed to "ocean"; keep the alias so a stored
            // "blue" still pre-paints its swatch instead of flashing clay.
            blue: ["#3d7b9a", "#467a95"],
            // "amber" was dropped and folded into "clay"; keep the alias so a
            // stored "amber" still pre-paints clay instead of flashing.
            amber: ["#b5551f", "#976851"],
            plum: ["#965d84", "#8f6380"],
          };
          var accent = brands[brand] || brands.sage;
          document.documentElement.style.setProperty("--brand", accent[0]);
          document.documentElement.style.setProperty(
            "--brand-wash",
            accent[1],
          );
        } catch (e) {}
      })();
    </script>
    <script>
      // Minimal null Tauri bridge. This page mounts its own root (not the app
      // shell), so it never talks to the native side — but @tauri-apps/api
      // imports (pulled in transitively by src/lib/brand.ts) expect these
      // globals at import time. Keep this tiny: any stray invoke rejects
      // quietly instead of throwing.
      (() => {
        window.__TAURI_INTERNALS__ = {
          invoke: () => Promise.reject(new Error("styleguide: no tauri")),
          transformCallback: (cb) => 0,
          unregisterCallback: () => {},
          convertFileSrc: (p) => p,
        };
        window.__TAURI_EVENT_PLUGIN_INTERNALS__ = {
          unregisterListener: () => {},
        };
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/styleguide/main.tsx"></script>
  </body>
</html>