@vmz/ui 0.3.8 → 0.3.10

package/README.md

@@ -13,6 +13,24 @@ VMZ Design  ≠  VMZ UI
   `componentsRoot` config.
 - **Never** hardcodes brand hex (`#176BFF`, etc.). Applications provide values via `/designs`.
 
+## Design preset
+
+`presets/web-surface.v0.json` is the manifest for the first official design preset. Its files live
+under `presets/web-surface/` and are exported as `@vmz/ui/presets/web-surface/*`, so an application
+can materialize an editable `designs/` starting point:
+
+```bash
+pnpm exec vmz init design
+```
+
+The CLI reads the manifest `files` list, copies it into the project `designs/` directory, and
+skips files that already exist (`--force` overwrites, `--dry-run` previews, `--designs-dir` and
+`--preset` select another target).
+
+A preset is Style Theme source files, not a runtime theme. It is never injected automatically and
+carries no hidden semantics. `contracts/token-requirements.v0.json` remains the truth source for
+which tokens the components require; the `ui-automation` gate checks this preset against it.
+
 ## Preview `0.0.4`
 
 This is a **preview** release. It is **not** `production-ready` and **not** a mature / production UI.

package/package.json

@@ -68,7 +68,8 @@
     "./Upload": "./src/components/Upload.vmz",
     "./conformance/pack": "./conformance/pack.v0.json",
     "./contracts/token-requirements": "./contracts/token-requirements.v0.json",
-    "./presets/web-surface": "./presets/web-surface.v0.json"
+    "./presets/web-surface": "./presets/web-surface.v0.json",
+    "./presets/web-surface/*": "./presets/web-surface/*"
   },
   "files": [
     "src",
@@ -85,7 +86,7 @@
   "license": "MIT",
   "name": "@vmz/ui",
   "peerDependencies": {
-    "@vmz/ui-icons": "0.3.8"
+    "@vmz/ui-icons": "0.3.10"
   },
   "peerDependenciesMeta": {
     "@vmz/ui-icons": {
@@ -101,5 +102,5 @@
     "url": "git+https://github.com/doki-land/vmz-framework.git"
   },
   "type": "module",
-  "version": "0.3.8"
+  "version": "0.3.10"
 }

package/presets/web-surface/theme.json

@@ -0,0 +1,8 @@
+{
+    "default": "default",
+    "activationAttr": "data-theme",
+    "prefersColorScheme": {
+        "dark": "dark",
+        "light": "default"
+    }
+}

package/presets/web-surface/themes/dark.json

@@ -0,0 +1,204 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["action", "primary", "background"] },
+            "value": "#4096FF"
+        },
+        {
+            "key": { "path": ["action", "primary", "foreground"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["action", "primary", "hover"] },
+            "value": "#69B1FF"
+        },
+        {
+            "key": { "path": ["action", "primary", "active"] },
+            "value": "#1677FF"
+        },
+        {
+            "key": { "path": ["action", "primary", "soft"] },
+            "value": "#102A4C"
+        },
+        {
+            "key": { "path": ["focus", "ring"] },
+            "value": "color-mix(in srgb, #4096FF 35%, transparent)"
+        },
+        {
+            "key": { "path": ["brand", "primary"] },
+            "value": "#4096FF"
+        },
+        {
+            "key": { "path": ["brand", "energy"] },
+            "value": "#FFC53D"
+        },
+        {
+            "key": { "path": ["surface", "paper"] },
+            "value": "#1A1D21"
+        },
+        {
+            "key": { "path": ["surface", "mist"] },
+            "value": "#23272D"
+        },
+        {
+            "key": { "path": ["surface", "page"] },
+            "value": "#121417"
+        },
+        {
+            "key": { "path": ["surface", "fill"] },
+            "value": "#1F2328"
+        },
+        {
+            "key": { "path": ["surface", "ink"] },
+            "value": "#F5F7FA"
+        },
+        {
+            "key": { "path": ["surface", "graphite"] },
+            "value": "#2A2F36"
+        },
+        {
+            "key": { "path": ["surface", "code"] },
+            "value": "#0D0F12"
+        },
+        {
+            "key": { "path": ["surface", "inverse"] },
+            "value": "#F5F7FA"
+        },
+        {
+            "key": { "path": ["text", "ink"] },
+            "value": "#F5F7FA"
+        },
+        {
+            "key": { "path": ["text", "steel"] },
+            "value": "#B6BEC9"
+        },
+        {
+            "key": { "path": ["text", "tertiary"] },
+            "value": "#9AA3AF"
+        },
+        {
+            "key": { "path": ["text", "muted"] },
+            "value": "#7C8592"
+        },
+        {
+            "key": { "path": ["text", "on-brand"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["text", "on-ink"] },
+            "value": "#121417"
+        },
+        {
+            "key": { "path": ["text", "on-inverse"] },
+            "value": "#1F2329"
+        },
+        {
+            "key": { "path": ["line", "default"] },
+            "value": "#363B42"
+        },
+        {
+            "key": { "path": ["line", "subtle"] },
+            "value": "#262A30"
+        },
+        {
+            "key": { "path": ["line", "strong"] },
+            "value": "#5A626D"
+        },
+        {
+            "key": { "path": ["action", "secondary", "background"] },
+            "value": "#23272D"
+        },
+        {
+            "key": { "path": ["action", "secondary", "foreground"] },
+            "value": "#F5F7FA"
+        },
+        {
+            "key": { "path": ["action", "secondary", "border"] },
+            "value": "#363B42"
+        },
+        {
+            "key": { "path": ["action", "secondary", "hover"] },
+            "value": "#2C3138"
+        },
+        {
+            "key": { "path": ["action", "secondary", "active"] },
+            "value": "#333941"
+        },
+        {
+            "key": { "path": ["action", "link", "foreground"] },
+            "value": "#69B1FF"
+        },
+        {
+            "key": { "path": ["action", "link", "hover"] },
+            "value": "#91CAFF"
+        },
+        {
+            "key": { "path": ["status", "info", "accent"] },
+            "value": "#4096FF"
+        },
+        {
+            "key": { "path": ["status", "info", "foreground"] },
+            "value": "#69B1FF"
+        },
+        {
+            "key": { "path": ["status", "info", "background"] },
+            "value": "#102A4C"
+        },
+        {
+            "key": { "path": ["status", "info", "border"] },
+            "value": "#1D4C85"
+        },
+        {
+            "key": { "path": ["status", "success", "foreground"] },
+            "value": "#73D13D"
+        },
+        {
+            "key": { "path": ["status", "success", "background"] },
+            "value": "#162B12"
+        },
+        {
+            "key": { "path": ["status", "success", "border"] },
+            "value": "#2F5A22"
+        },
+        {
+            "key": { "path": ["status", "warning", "foreground"] },
+            "value": "#FFC53D"
+        },
+        {
+            "key": { "path": ["status", "warning", "background"] },
+            "value": "#33260A"
+        },
+        {
+            "key": { "path": ["status", "warning", "border"] },
+            "value": "#66491A"
+        },
+        {
+            "key": { "path": ["status", "danger", "foreground"] },
+            "value": "#FF7875"
+        },
+        {
+            "key": { "path": ["status", "danger", "background"] },
+            "value": "#3A1717"
+        },
+        {
+            "key": { "path": ["status", "danger", "border"] },
+            "value": "#6B2A2A"
+        },
+        {
+            "key": { "path": ["shadow", "popup"] },
+            "value": "0 12px 32px 0 rgba(0,0,0,.48), 0 2px 8px 0 rgba(0,0,0,.32)"
+        },
+        {
+            "key": { "path": ["elevation", "1"] },
+            "value": "0 1px 2px 0 rgba(0,0,0,.4), 0 1px 4px -1px rgba(0,0,0,.32)"
+        },
+        {
+            "key": { "path": ["elevation", "2"] },
+            "value": "0 4px 12px 0 rgba(0,0,0,.4), 0 1px 3px 0 rgba(0,0,0,.32)"
+        },
+        {
+            "key": { "path": ["elevation", "3"] },
+            "value": "0 12px 32px 0 rgba(0,0,0,.48), 0 2px 8px 0 rgba(0,0,0,.32)"
+        }
+    ]
+}

package/presets/web-surface/themes/high-contrast.json

@@ -0,0 +1,176 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["action", "primary", "background"] },
+            "value": "#003DB8"
+        },
+        {
+            "key": { "path": ["action", "primary", "foreground"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["action", "primary", "hover"] },
+            "value": "#002A80"
+        },
+        {
+            "key": { "path": ["action", "primary", "active"] },
+            "value": "#001F5C"
+        },
+        {
+            "key": { "path": ["action", "primary", "soft"] },
+            "value": "#E6F4FF"
+        },
+        {
+            "key": { "path": ["focus", "ring"] },
+            "value": "#FFB000"
+        },
+        {
+            "key": { "path": ["surface", "paper"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["surface", "mist"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["surface", "page"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["surface", "fill"] },
+            "value": "#F5F5F5"
+        },
+        {
+            "key": { "path": ["surface", "ink"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["surface", "graphite"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["surface", "code"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["surface", "inverse"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["text", "ink"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["text", "steel"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["text", "tertiary"] },
+            "value": "#1A1A1A"
+        },
+        {
+            "key": { "path": ["text", "muted"] },
+            "value": "#333333"
+        },
+        {
+            "key": { "path": ["text", "on-brand"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["text", "on-ink"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["text", "on-inverse"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["line", "default"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["line", "subtle"] },
+            "value": "#767676"
+        },
+        {
+            "key": { "path": ["line", "strong"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["action", "secondary", "background"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["action", "secondary", "foreground"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["action", "secondary", "border"] },
+            "value": "#000000"
+        },
+        {
+            "key": { "path": ["action", "secondary", "hover"] },
+            "value": "#F2F2F2"
+        },
+        {
+            "key": { "path": ["action", "secondary", "active"] },
+            "value": "#E6E6E6"
+        },
+        {
+            "key": { "path": ["action", "link", "foreground"] },
+            "value": "#003DB8"
+        },
+        {
+            "key": { "path": ["action", "link", "hover"] },
+            "value": "#001F5C"
+        },
+        {
+            "key": { "path": ["status", "info", "foreground"] },
+            "value": "#003DB8"
+        },
+        {
+            "key": { "path": ["status", "info", "background"] },
+            "value": "#E6F4FF"
+        },
+        {
+            "key": { "path": ["status", "info", "border"] },
+            "value": "#003DB8"
+        },
+        {
+            "key": { "path": ["status", "success", "foreground"] },
+            "value": "#1A5C0A"
+        },
+        {
+            "key": { "path": ["status", "success", "background"] },
+            "value": "#F6FFED"
+        },
+        {
+            "key": { "path": ["status", "success", "border"] },
+            "value": "#2F5A22"
+        },
+        {
+            "key": { "path": ["status", "warning", "foreground"] },
+            "value": "#6B3A00"
+        },
+        {
+            "key": { "path": ["status", "warning", "background"] },
+            "value": "#FFFBE6"
+        },
+        {
+            "key": { "path": ["status", "warning", "border"] },
+            "value": "#8A5A00"
+        },
+        {
+            "key": { "path": ["status", "danger", "foreground"] },
+            "value": "#8A0A0A"
+        },
+        {
+            "key": { "path": ["status", "danger", "background"] },
+            "value": "#FFF1F0"
+        },
+        {
+            "key": { "path": ["status", "danger", "border"] },
+            "value": "#A8071A"
+        }
+    ]
+}

package/presets/web-surface/tokens/brand.json

@@ -0,0 +1,55 @@
+{
+    "brand": {
+        "primary": "#1677FF",
+        "energy": "#FAAD14"
+    },
+    "scale": {
+        "50": "#E6F4FF",
+        "100": "#BAE0FF",
+        "200": "#91CAFF",
+        "300": "#69B1FF",
+        "400": "#4096FF",
+        "500": "#1677FF",
+        "600": "#0958D9",
+        "700": "#003EB3",
+        "800": "#002C8C",
+        "900": "#001D66",
+        "950": "#000D33"
+    },
+    "surface": {
+        "paper": "#FFFFFF",
+        "mist": "#F7F8FA",
+        "page": "#F5F6F8",
+        "fill": "#FAFBFC",
+        "ink": "#1F2329",
+        "graphite": "#3A3F45",
+        "code": "#0F1115",
+        "inverse": "#1F2329"
+    },
+    "text": {
+        "ink": "#1F2329",
+        "steel": "#51565D",
+        "tertiary": "#646A73",
+        "muted": "#8A9099",
+        "on-brand": "#FFFFFF",
+        "on-ink": "#F7F8FA",
+        "on-inverse": "#F7F8FA"
+    },
+    "line": {
+        "default": "#E5E6EB",
+        "subtle": "#F0F1F3",
+        "strong": "#C9CDD4"
+    },
+    "status": {
+        "success": "#52C41A",
+        "warning": "#FAAD14",
+        "error": "#FF4D4F",
+        "analysis": "#722ED1",
+        "runtime": "#13C2C2"
+    },
+    "font": {
+        "sans": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+        "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+        "display": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", \"Noto Sans CJK SC\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
+    }
+}

package/presets/web-surface/tokens/semantic-action.json

@@ -0,0 +1,56 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["action", "primary", "background"] },
+            "value": "#1677FF"
+        },
+        {
+            "key": { "path": ["action", "primary", "foreground"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["action", "primary", "hover"] },
+            "value": "#4096FF"
+        },
+        {
+            "key": { "path": ["action", "primary", "active"] },
+            "value": "#0958D9"
+        },
+        {
+            "key": { "path": ["action", "primary", "soft"] },
+            "value": "#E6F4FF"
+        },
+        {
+            "key": { "path": ["action", "secondary", "background"] },
+            "value": "#FFFFFF"
+        },
+        {
+            "key": { "path": ["action", "secondary", "foreground"] },
+            "value": "#1F2329"
+        },
+        {
+            "key": { "path": ["action", "secondary", "border"] },
+            "value": "#E5E6EB"
+        },
+        {
+            "key": { "path": ["action", "secondary", "hover"] },
+            "value": "#F7F8FA"
+        },
+        {
+            "key": { "path": ["action", "secondary", "active"] },
+            "value": "#F0F1F3"
+        },
+        {
+            "key": { "path": ["action", "link", "foreground"] },
+            "value": "#0958D9"
+        },
+        {
+            "key": { "path": ["action", "link", "hover"] },
+            "value": "#1677FF"
+        },
+        {
+            "key": { "path": ["focus", "ring"] },
+            "value": "color-mix(in srgb, #1677FF 20%, transparent)"
+        }
+    ]
+}

package/presets/web-surface/tokens/semantic-density.json

@@ -0,0 +1,108 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["density", "control", "padding-y"] },
+            "value": "0.25rem"
+        },
+        {
+            "key": { "path": ["density", "control", "padding-x"] },
+            "value": "0.75rem"
+        },
+        {
+            "key": { "path": ["density", "control", "gap"] },
+            "value": "0.5rem"
+        },
+        {
+            "key": { "path": ["density", "compact", "padding-y"] },
+            "value": "0.125rem"
+        },
+        {
+            "key": { "path": ["density", "compact", "padding-x"] },
+            "value": "0.625rem"
+        },
+        {
+            "key": { "path": ["density", "compact", "gap"] },
+            "value": "0.375rem"
+        },
+        {
+            "key": { "path": ["density", "dense", "padding-y"] },
+            "value": "0"
+        },
+        {
+            "key": { "path": ["density", "dense", "padding-x"] },
+            "value": "0.4375rem"
+        },
+        {
+            "key": { "path": ["density", "dense", "gap"] },
+            "value": "0.25rem"
+        },
+        {
+            "key": { "path": ["control", "height"] },
+            "value": "2rem"
+        },
+        {
+            "key": { "path": ["control", "height", "sm"] },
+            "value": "1.5rem"
+        },
+        {
+            "key": { "path": ["control", "height", "lg"] },
+            "value": "2.5rem"
+        },
+        {
+            "key": { "path": ["control", "height", "mobile"] },
+            "value": "2.75rem"
+        },
+        {
+            "key": { "path": ["radius", "xs"] },
+            "value": "2px"
+        },
+        {
+            "key": { "path": ["radius", "sm"] },
+            "value": "4px"
+        },
+        {
+            "key": { "path": ["radius", "md"] },
+            "value": "6px"
+        },
+        {
+            "key": { "path": ["radius", "lg"] },
+            "value": "8px"
+        },
+        {
+            "key": { "path": ["radius", "xl"] },
+            "value": "12px"
+        },
+        {
+            "key": { "path": ["radius", "pill"] },
+            "value": "999px"
+        },
+        {
+            "key": { "path": ["shadow", "card"] },
+            "value": "none"
+        },
+        {
+            "key": { "path": ["shadow", "card", "hover"] },
+            "value": "none"
+        },
+        {
+            "key": { "path": ["shadow", "popup"] },
+            "value": "0 12px 32px 0 rgba(15,23,42,.12), 0 2px 8px 0 rgba(15,23,42,.06)"
+        },
+        {
+            "key": { "path": ["layout", "max", "width"] },
+            "value": "75rem"
+        },
+        {
+            "key": { "path": ["surface", "page"] },
+            "value": "#F5F6F8"
+        },
+        {
+            "key": { "path": ["surface", "fill"] },
+            "value": "#FAFBFC"
+        },
+        {
+            "key": { "path": ["line", "subtle"] },
+            "value": "#F0F1F3"
+        }
+    ]
+}

package/presets/web-surface/tokens/semantic-layout.json

@@ -0,0 +1,144 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["space", "0"] },
+            "value": "0"
+        },
+        {
+            "key": { "path": ["space", "1"] },
+            "value": "0.25rem"
+        },
+        {
+            "key": { "path": ["space", "2"] },
+            "value": "0.5rem"
+        },
+        {
+            "key": { "path": ["space", "3"] },
+            "value": "0.75rem"
+        },
+        {
+            "key": { "path": ["space", "4"] },
+            "value": "1rem"
+        },
+        {
+            "key": { "path": ["space", "5"] },
+            "value": "1.5rem"
+        },
+        {
+            "key": { "path": ["space", "6"] },
+            "value": "2rem"
+        },
+        {
+            "key": { "path": ["space", "7"] },
+            "value": "3rem"
+        },
+        {
+            "key": { "path": ["space", "8"] },
+            "value": "4rem"
+        },
+        {
+            "key": { "path": ["space", "9"] },
+            "value": "5rem"
+        },
+        {
+            "key": { "path": ["space", "10"] },
+            "value": "6rem"
+        },
+        {
+            "key": { "path": ["space", "11"] },
+            "value": "8rem"
+        },
+        {
+            "key": { "path": ["space", "12"] },
+            "value": "10rem"
+        },
+        {
+            "key": { "path": ["elevation", "0"] },
+            "value": "none"
+        },
+        {
+            "key": { "path": ["elevation", "1"] },
+            "value": "0 1px 2px 0 rgba(15,23,42,.04), 0 1px 4px -1px rgba(15,23,42,.03)"
+        },
+        {
+            "key": { "path": ["elevation", "2"] },
+            "value": "0 4px 12px 0 rgba(15,23,42,.08), 0 1px 3px 0 rgba(15,23,42,.04)"
+        },
+        {
+            "key": { "path": ["elevation", "3"] },
+            "value": "0 12px 32px 0 rgba(15,23,42,.12), 0 2px 8px 0 rgba(15,23,42,.06)"
+        },
+        {
+            "key": { "path": ["layout", "gutter"] },
+            "value": "clamp(1rem, 4vw, 2rem)"
+        },
+        {
+            "key": { "path": ["layout", "section"] },
+            "value": "clamp(3rem, 6vw, 5rem)"
+        },
+        {
+            "key": { "path": ["layout", "header-height"] },
+            "value": "4rem"
+        },
+        {
+            "key": { "path": ["layout", "header-height-compact"] },
+            "value": "3.5rem"
+        },
+        {
+            "key": { "path": ["type", "display"] },
+            "value": "clamp(2rem, 3.4vw, 3rem)"
+        },
+        {
+            "key": { "path": ["type", "title"] },
+            "value": "clamp(1.5rem, 2.2vw, 1.875rem)"
+        },
+        {
+            "key": { "path": ["type", "subtitle"] },
+            "value": "1.125rem"
+        },
+        {
+            "key": { "path": ["type", "body"] },
+            "value": "1rem"
+        },
+        {
+            "key": { "path": ["type", "caption"] },
+            "value": "0.8125rem"
+        },
+        {
+            "key": { "path": ["type", "code"] },
+            "value": "0.875rem"
+        },
+        {
+            "key": { "path": ["type", "weight", "regular"] },
+            "value": "400"
+        },
+        {
+            "key": { "path": ["type", "weight", "medium"] },
+            "value": "500"
+        },
+        {
+            "key": { "path": ["type", "weight", "semibold"] },
+            "value": "600"
+        },
+        {
+            "key": { "path": ["type", "line-height", "display"] },
+            "value": "1.18"
+        },
+        {
+            "key": { "path": ["type", "line-height", "title"] },
+            "value": "1.32"
+        },
+        {
+            "key": { "path": ["type", "line-height", "body"] },
+            "value": "1.625"
+        },
+        {
+            "key": { "path": ["type", "line-height", "caption"] },
+            "value": "1.55"
+        },
+        {
+            "key": { "path": ["type", "line-height", "code"] },
+            "value": "1.6"
+        }
+    ]
+}

package/presets/web-surface/tokens/semantic-motion.json

@@ -0,0 +1,28 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["motion", "control", "duration"] },
+            "value": "120ms"
+        },
+        {
+            "key": { "path": ["motion", "control", "easing"] },
+            "value": "cubic-bezier(0.2, 0, 0, 1)"
+        },
+        {
+            "key": { "path": ["motion", "emphasis", "duration"] },
+            "value": "240ms"
+        },
+        {
+            "key": { "path": ["motion", "emphasis", "easing"] },
+            "value": "cubic-bezier(0.16, 1, 0.3, 1)"
+        },
+        {
+            "key": { "path": ["motion", "overlay", "duration"] },
+            "value": "160ms"
+        },
+        {
+            "key": { "path": ["motion", "overlay", "easing"] },
+            "value": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+    ]
+}

package/presets/web-surface/tokens/semantic-status.json

@@ -0,0 +1,68 @@
+{
+    "entries": [
+        {
+            "key": { "path": ["status", "info", "accent"] },
+            "value": "#1677FF"
+        },
+        {
+            "key": { "path": ["status", "info", "foreground"] },
+            "value": "#0958D9"
+        },
+        {
+            "key": { "path": ["status", "info", "background"] },
+            "value": "#E6F4FF"
+        },
+        {
+            "key": { "path": ["status", "info", "border"] },
+            "value": "#91CAFF"
+        },
+        {
+            "key": { "path": ["status", "success", "accent"] },
+            "value": "#52C41A"
+        },
+        {
+            "key": { "path": ["status", "success", "foreground"] },
+            "value": "#237804"
+        },
+        {
+            "key": { "path": ["status", "success", "background"] },
+            "value": "#F6FFED"
+        },
+        {
+            "key": { "path": ["status", "success", "border"] },
+            "value": "#B7EB8F"
+        },
+        {
+            "key": { "path": ["status", "warning", "accent"] },
+            "value": "#FAAD14"
+        },
+        {
+            "key": { "path": ["status", "warning", "foreground"] },
+            "value": "#874D00"
+        },
+        {
+            "key": { "path": ["status", "warning", "background"] },
+            "value": "#FFFBE6"
+        },
+        {
+            "key": { "path": ["status", "warning", "border"] },
+            "value": "#FFE58F"
+        },
+        {
+            "key": { "path": ["status", "danger", "accent"] },
+            "value": "#FF4D4F"
+        },
+        {
+            "key": { "path": ["status", "danger", "foreground"] },
+            "value": "#A8071A"
+        },
+        {
+            "key": { "path": ["status", "danger", "background"] },
+            "value": "#FFF1F0"
+        },
+        {
+            "key": { "path": ["status", "danger", "border"] },
+            "value": "#FFA39E"
+        }
+    ]
+}

package/presets/web-surface.v0.json

@@ -3,6 +3,19 @@
     "id": "web-surface",
     "package": "@vmz/ui",
     "materialize": "Copy or resolve into application /designs Style Theme (tokens/*.json + themes/*.json). Preset is not a second runtime theme.",
+    "files": {
+        "root": "presets/web-surface",
+        "theme": "theme.json",
+        "tokens": [
+            "tokens/brand.json",
+            "tokens/semantic-action.json",
+            "tokens/semantic-density.json",
+            "tokens/semantic-layout.json",
+            "tokens/semantic-motion.json",
+            "tokens/semantic-status.json"
+        ],
+        "themes": ["themes/dark.json", "themes/high-contrast.json"]
+    },
     "foundation": {
         "radius": {
             "xs": "2px",

package/src/components/ConsoleShell.vmz

@@ -100,9 +100,9 @@
 .vmz-ui-console-shell__brand {
     padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-3, 0.75rem);
     color: var(--vmz-text-ink);
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.5rem;
+    font-size: var(--vmz-type-body);
+    font-weight: var(--vmz-type-weight-semibold);
+    line-height: var(--vmz-type-line-height-body);
     letter-spacing: 0;
     text-decoration: none;
     outline: none;
@@ -127,13 +127,13 @@
 .vmz-ui-console-shell__nav a {
     display: flex;
     align-items: center;
-    min-height: 2.25rem;
+    min-height: calc(var(--vmz-control-height) * 1.125);
     padding: 0 var(--vmz-space-3, 0.75rem);
     border-radius: var(--vmz-radius-md, 6px);
     color: var(--vmz-text-steel);
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.25rem;
+    font-size: var(--vmz-type-code);
+    font-weight: var(--vmz-type-weight-medium);
+    line-height: var(--vmz-type-line-height-caption);
     text-decoration: none;
     outline: none;
     transition:
@@ -149,7 +149,7 @@
 .vmz-ui-console-shell__nav a[data-active="true"] {
     color: var(--vmz-action-primary-background);
     background: var(--vmz-action-primary-soft);
-    font-weight: 600;
+    font-weight: var(--vmz-type-weight-semibold);
     box-shadow: inset 2px 0 0 var(--vmz-action-primary-background);
 }
 
@@ -204,30 +204,30 @@
 
 .vmz-ui-console-shell__header-copy {
     display: grid;
-    gap: 0.125rem;
+    gap: var(--vmz-space-1, 0.25rem);
     min-width: 0;
 }
 
 .vmz-ui-console-shell__breadcrumb {
     margin: 0;
     color: var(--vmz-text-tertiary);
-    font-size: 0.75rem;
-    line-height: 1.125rem;
+    font-size: var(--vmz-type-caption);
+    line-height: var(--vmz-type-line-height-caption);
 }
 
 .vmz-ui-console-shell__title {
     margin: 0;
     color: var(--vmz-text-ink);
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    font-weight: 600;
+    font-size: var(--vmz-type-subtitle);
+    line-height: var(--vmz-type-line-height-title);
+    font-weight: var(--vmz-type-weight-semibold);
 }
 
 .vmz-ui-console-shell__subtitle {
     margin: 0;
     color: var(--vmz-text-steel);
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
+    font-size: var(--vmz-type-caption);
+    line-height: var(--vmz-type-line-height-caption);
 }
 
 .vmz-ui-console-shell__action {
@@ -235,13 +235,13 @@
     align-items: center;
     justify-content: center;
     flex: none;
-    min-height: 2rem;
+    min-height: var(--vmz-control-height);
     padding: 0 var(--vmz-space-3, 0.75rem);
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: var(--vmz-type-code);
+    font-weight: var(--vmz-type-weight-medium);
     text-decoration: none;
     white-space: nowrap;
     outline: none;
@@ -278,7 +278,7 @@
     padding: var(--vmz-space-4, 1rem) var(--vmz-space-5, 1.5rem);
     border-top: 1px solid var(--vmz-line-subtle);
     color: var(--vmz-text-tertiary);
-    font-size: 0.8125rem;
+    font-size: var(--vmz-type-caption);
     background: var(--vmz-surface-paper);
 }
 
@@ -291,6 +291,7 @@
     }
 
     .vmz-ui-console-shell__sidebar {
+        position: relative;
         border-right: 0;
         border-bottom: 1px solid var(--vmz-line-subtle);
         gap: var(--vmz-space-2, 0.5rem);
@@ -299,8 +300,8 @@
 
     .vmz-ui-console-shell__menu {
         display: inline-flex;
-        width: calc(var(--vmz-control-height, 2rem) * 1.5);
-        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        width: calc(var(--vmz-control-height) * 1.5);
+        min-height: calc(var(--vmz-control-height) * 1.5);
     }
 
     .vmz-ui-console-shell__nav {
@@ -310,12 +311,23 @@
         flex: none;
     }
 
+    /* The menu overlays the page instead of inserting a new row, so opening
+       it never moves the current task down. */
     .vmz-ui-console-shell__nav[data-open="true"] {
         display: flex;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: 0;
+        z-index: 30;
+        padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
+        border-bottom: 1px solid var(--vmz-line-subtle);
+        background: var(--vmz-surface-paper);
+        box-shadow: var(--vmz-shadow-popup);
     }
 
     .vmz-ui-console-shell__nav a {
-        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        min-height: calc(var(--vmz-control-height) * 1.5);
         white-space: normal;
     }
 
@@ -324,14 +336,14 @@
         grid-template-columns: auto minmax(0, 1fr) auto;
         align-items: center;
         gap: var(--vmz-space-2, 0.5rem);
-        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        min-height: calc(var(--vmz-control-height) * 1.5);
         padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
     }
 
     .vmz-ui-console-shell__back {
         display: inline-flex;
         grid-column: 1;
-        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        min-height: calc(var(--vmz-control-height) * 1.5);
     }
 
     .vmz-ui-console-shell__header-copy {
@@ -355,7 +367,7 @@
     .vmz-ui-console-shell__action {
         grid-column: 3;
         justify-self: end;
-        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        min-height: calc(var(--vmz-control-height) * 1.5);
     }
 
     .vmz-ui-console-shell__main {
@@ -393,6 +405,20 @@ export default class ConsoleShell {
         title: string;
         href: string;
     }[] = [];
+    _onDocumentClick = null;
+    onMount() {
+        this._onDocumentClick = (ev) => {
+            if (!this.menuOpen) return;
+            const target = ev.target;
+            if (target && target.closest && target.closest('[data-vmz-shell="sidebar"]')) return;
+            this.menuOpen = false;
+        };
+        document.addEventListener("click", this._onDocumentClick);
+    }
+    onDestroy() {
+        if (this._onDocumentClick) document.removeEventListener("click", this._onDocumentClick);
+        this._onDocumentClick = null;
+    }
     toggleMenu() {
         this.menuOpen = !this.menuOpen;
     }