@vmz/ui 0.0.0 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -2
- package/contracts/token-requirements.v0.json +17 -0
- package/package.json +22 -4
- package/src/components/Button.vmz +59 -0
package/README.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
-
# @vmz/ui
|
|
1
|
+
# @vmz/ui — VMZ UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Official **VMZ UI** framework package.
|
|
4
|
+
|
|
5
|
+
```text
|
|
6
|
+
VMZ Design ≠ VMZ UI
|
|
7
|
+
/designs ≠ this package
|
|
8
|
+
@vmz/ui ≠ theme truth source
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
- Declares **semantic token requirements** (see `contracts/`).
|
|
12
|
+
- Ships ordinary `.vmz` under **`src/components/`** (same hard convention as apps) — **not** `@vmz/plugin-*`, no
|
|
13
|
+
`componentsRoot` config.
|
|
14
|
+
- **Never** hardcodes brand hex (`#176BFF`, etc.). Applications provide values via `/designs`.
|
|
15
|
+
|
|
16
|
+
ui-automation scope: package skeleton + `Button` probe + token requirement contract + `pnpm verify`.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schema": "vmz.ui.token_requirements.v0",
|
|
3
|
+
"package": "@vmz/ui",
|
|
4
|
+
"cssVar": {
|
|
5
|
+
"prefix": "--vmz-",
|
|
6
|
+
"fromDotted": "split on '.' then join with '-'"
|
|
7
|
+
},
|
|
8
|
+
"forbiddenBrandHex": ["#176BFF", "#0D57DB", "#FFB000", "#00C878", "#121416"],
|
|
9
|
+
"components": {
|
|
10
|
+
"Button": {
|
|
11
|
+
"source": "src/components/Button.vmz",
|
|
12
|
+
"stableHint": "ui.Button",
|
|
13
|
+
"tokens": ["action.primary.background", "action.primary.foreground", "action.primary.hover", "action.primary.active", "focus.ring"],
|
|
14
|
+
"surfaces": ["WebSurface"]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vmz/ui",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
|
|
5
6
|
"license": "MIT",
|
|
6
|
-
"
|
|
7
|
+
"exports": {
|
|
8
|
+
"./contracts/token-requirements": "./contracts/token-requirements.v0.json",
|
|
9
|
+
"./Button": "./src/components/Button.vmz"
|
|
10
|
+
},
|
|
7
11
|
"files": [
|
|
12
|
+
"src",
|
|
13
|
+
"contracts",
|
|
8
14
|
"README.md"
|
|
9
|
-
]
|
|
15
|
+
],
|
|
16
|
+
"keywords": [
|
|
17
|
+
"vmz",
|
|
18
|
+
"ui",
|
|
19
|
+
"components"
|
|
20
|
+
],
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/doki-land/vmz-framework.git"
|
|
27
|
+
}
|
|
10
28
|
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
type={type}
|
|
4
|
+
class="vmz-ui-btn"
|
|
5
|
+
disabled={disabled}
|
|
6
|
+
onClick={onClick}
|
|
7
|
+
>
|
|
8
|
+
<slot />
|
|
9
|
+
</button>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
.vmz-ui-btn {
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
gap: 0.35rem;
|
|
18
|
+
padding: 0.55rem 0.95rem;
|
|
19
|
+
border: 1px solid transparent;
|
|
20
|
+
border-radius: 2px;
|
|
21
|
+
font: inherit;
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
line-height: 1.2;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
background: var(--vmz-action-primary-background);
|
|
26
|
+
color: var(--vmz-action-primary-foreground);
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.vmz-ui-btn:hover:not(:disabled) {
|
|
31
|
+
background: var(--vmz-action-primary-hover);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.vmz-ui-btn:active:not(:disabled) {
|
|
35
|
+
background: var(--vmz-action-primary-active);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.vmz-ui-btn:focus-visible {
|
|
39
|
+
box-shadow: 0 0 0 2px var(--vmz-focus-ring);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.vmz-ui-btn:disabled {
|
|
43
|
+
opacity: 0.55;
|
|
44
|
+
cursor: not-allowed;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
|
|
48
|
+
<script client>
|
|
49
|
+
/**
|
|
50
|
+
* VMZ UI — Button probe (UI0).
|
|
51
|
+
* Colors come only from Style Theme semantic tokens — never brand hex.
|
|
52
|
+
* Requirements: contracts/token-requirements.v0.json
|
|
53
|
+
*/
|
|
54
|
+
export default class Button {
|
|
55
|
+
public type: string = 'button';
|
|
56
|
+
public disabled: boolean = false;
|
|
57
|
+
public onClick: ((e: Event) => void) | null = null;
|
|
58
|
+
}
|
|
59
|
+
</script>
|