@vmz/ui 0.3.9 → 0.3.11

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.9"
+    "@vmz/ui-icons": "0.3.11"
   },
   "peerDependenciesMeta": {
     "@vmz/ui-icons": {
@@ -101,5 +102,5 @@
     "url": "git+https://github.com/doki-land/vmz-framework.git"
   },
   "type": "module",
-  "version": "0.3.9"
+  "version": "0.3.11"
 }

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/Icon.vmz

@@ -66,7 +66,7 @@ import { DEFAULT_STROKE_WIDTH, resolveIconDef } from "@vmz/ui-icons/registry";
  */
 export default class Icon {
     static __vmzHostBox = "contents";
-    public name: string = "info";
+    public name: string = "status.info";
     public size: string = "md";
     public label: string = "";
     public decorative: boolean = true;