@synopackageland/ui 0.23.8 → 0.23.9
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/CHANGELOG.md +7 -0
- package/README.md +4 -1
- package/dist/cli.js +0 -0
- package/dist/components/primitives/tooltip/tooltipStyle.d.ts +1 -1
- package/dist/grid.js +1 -1
- package/dist/index.js +135 -135
- package/dist/json-preview/preview.js +30 -30
- package/dist/reka-runtime.json +1 -1
- package/dist/rich-text.js +6 -6
- package/dist/theme.css +1 -1
- package/dist/themes/dsm7-embedded-theme.css +1 -1
- package/dist/themes/dsm7-embedded.css +1 -1
- package/dist/themes/dsm7.css +1 -1
- package/docs/theme-hooks.md +29 -0
- package/package.json +89 -3
package/docs/theme-hooks.md
CHANGED
|
@@ -190,6 +190,35 @@ The colour, radius, spacing and web tokens are listed in the
|
|
|
190
190
|
[README](../README.md#theme-override), [colour system](color-system.md) and
|
|
191
191
|
[adaptive layout](adaptive-layout.md#safe-overrides).
|
|
192
192
|
|
|
193
|
+
## Corner radius
|
|
194
|
+
|
|
195
|
+
Components round their corners with a role, not a step, so a theme can round
|
|
196
|
+
one kind of surface without the others:
|
|
197
|
+
|
|
198
|
+
| Token | Rounds | Window | Web and phone |
|
|
199
|
+
| --- | --- | --- | --- |
|
|
200
|
+
| `--ui-radius-inner` | a part inside a control or a popover: a menu row, a tag, a tooltip, a checkbox box, a small hit area | 3px | 3px |
|
|
201
|
+
| `--ui-radius-control` | a button, a field, a select, a segment | 4px | 4px |
|
|
202
|
+
| `--ui-radius-container` | a flat block: a card's surface, an inset area, a thumbnail frame | 4px | 4px |
|
|
203
|
+
| `--ui-radius-popover` | a menu, a select or combobox list, a popover, a picker | 4px | 4px |
|
|
204
|
+
| `--ui-radius-panel` | a raised block: a choice card, a framed region, a drop zone, a side drawer, a grid card | 5px | 6px |
|
|
205
|
+
| `--ui-radius-nav` | a navigation row in the sidebar or the top bar | 5px | 6px |
|
|
206
|
+
|
|
207
|
+
Each role defaults to a step of the scale (`--ui-radius-sm`, `-md`, `-lg`),
|
|
208
|
+
and the steps stay public. Override a role to change only that kind of
|
|
209
|
+
surface; override a step on `:root` to move every role on it. The roles are
|
|
210
|
+
declared on `:root` and again on the web and phone presentation roots
|
|
211
|
+
(`adaptive.css`), so a step overridden there still moves them. A step
|
|
212
|
+
overridden on any other element does not reach the roles below it: override
|
|
213
|
+
the role on that element instead.
|
|
214
|
+
|
|
215
|
+
```css
|
|
216
|
+
:root {
|
|
217
|
+
--ui-radius-panel: 8px; /* choice cards and framed regions only */
|
|
218
|
+
--ui-radius-popover: 6px; /* menus and popovers only */
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
193
222
|
## Motion
|
|
194
223
|
|
|
195
224
|
The components move a little by default: dialogs and their masks fade in and
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synopackageland/ui",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.9",
|
|
4
4
|
"description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -79,6 +79,34 @@
|
|
|
79
79
|
"@tiptap/vue-3": "3.32.1",
|
|
80
80
|
"zod": "^4.6.5"
|
|
81
81
|
},
|
|
82
|
+
"devDependencies": {
|
|
83
|
+
"@eslint/js": "10.0.1",
|
|
84
|
+
"@histoire/plugin-vue": "1.0.0-beta.1",
|
|
85
|
+
"@tailwindcss/vite": "4.3.3",
|
|
86
|
+
"@tanstack/vue-virtual": "3.13.39",
|
|
87
|
+
"@vitejs/plugin-vue": "6.0.9",
|
|
88
|
+
"@vue/test-utils": "2.5.1",
|
|
89
|
+
"@vueuse/core": "14.4.0",
|
|
90
|
+
"eslint": "10.11.0",
|
|
91
|
+
"eslint-plugin-vue": "10.11.1",
|
|
92
|
+
"flexsearch": "0.8.212",
|
|
93
|
+
"globals": "17.12.0",
|
|
94
|
+
"histoire": "1.0.0-beta.1",
|
|
95
|
+
"jsdom": "30.1.1",
|
|
96
|
+
"playwright": "1.58.2",
|
|
97
|
+
"reka-ui": "2.11.0",
|
|
98
|
+
"tailwindcss": "4.3.3",
|
|
99
|
+
"typescript": "5.9.3",
|
|
100
|
+
"typescript-eslint": "8.71.0",
|
|
101
|
+
"vite": "7.3.6",
|
|
102
|
+
"vite-plugin-dts": "5.1.1",
|
|
103
|
+
"vitest": "5.0.2",
|
|
104
|
+
"vscode-oniguruma": "2.0.1",
|
|
105
|
+
"vscode-textmate": "9.3.2",
|
|
106
|
+
"vue": "3.5.43",
|
|
107
|
+
"vue-eslint-parser": "10.4.1",
|
|
108
|
+
"vue-tsc": "3.3.11"
|
|
109
|
+
},
|
|
82
110
|
"engines": {
|
|
83
111
|
"node": ">=20"
|
|
84
112
|
},
|
|
@@ -89,5 +117,63 @@
|
|
|
89
117
|
"reka-ui": "2.11.0"
|
|
90
118
|
}
|
|
91
119
|
},
|
|
92
|
-
"homepage": "https://www.varvis.me/docs/"
|
|
93
|
-
|
|
120
|
+
"homepage": "https://www.varvis.me/docs/",
|
|
121
|
+
"scripts": {
|
|
122
|
+
"check:docs": "node --test scripts/check-doc-versions.test.mjs && node scripts/check-doc-versions.mjs",
|
|
123
|
+
"dev": "vite build --watch",
|
|
124
|
+
"build": "vite build && vite build --mode json && vite build --mode rich-text && vite build --mode grid && vite build --mode cli && vite build --mode preview && vite build --mode embedded && node scripts/postbuild.mjs",
|
|
125
|
+
"lint": "eslint .",
|
|
126
|
+
"typecheck": "vue-tsc --noEmit -p tsconfig.json",
|
|
127
|
+
"test": "vitest run",
|
|
128
|
+
"test:watch": "vitest",
|
|
129
|
+
"test:changed": "echo \"test:changed skips the tests the changes since ${SYNOPKGLAND_GATE_BASE:-origin/master} do not reach (vitest --changed); pnpm check runs them all\" && vitest run --changed ${SYNOPKGLAND_GATE_BASE:-origin/master}",
|
|
130
|
+
"story": "histoire dev",
|
|
131
|
+
"story:build": "histoire build",
|
|
132
|
+
"check:host": "node scripts/dsm-host-shots.mjs",
|
|
133
|
+
"check:switch": "node scripts/check-switch.mjs",
|
|
134
|
+
"check:tabs": "node scripts/check-tabs.mjs",
|
|
135
|
+
"check:mobile": "node scripts/check-mobile-overflow.mjs",
|
|
136
|
+
"check:ui-patch": "node scripts/check-ui-patch.mjs",
|
|
137
|
+
"check:narrow": "node scripts/check-narrow-controls.mjs",
|
|
138
|
+
"check:drawer-form": "node scripts/check-drawer-form.mjs",
|
|
139
|
+
"check:responsive": "node scripts/check-responsive.mjs",
|
|
140
|
+
"check:adaptive": "node scripts/check-adaptive.mjs",
|
|
141
|
+
"check:sidebar-focus": "node scripts/check-sidebar-focus.mjs",
|
|
142
|
+
"check:json-render": "node scripts/check-json-render.mjs",
|
|
143
|
+
"check:motion": "node scripts/check-motion.mjs",
|
|
144
|
+
"check:topology": "node scripts/check-topology.mjs",
|
|
145
|
+
"check:wizard": "node scripts/check-wizard.mjs",
|
|
146
|
+
"check:edges": "node scripts/check-edges.mjs",
|
|
147
|
+
"check:data-grid": "node scripts/check-data-grid.mjs",
|
|
148
|
+
"check:truncation": "node scripts/check-truncation.mjs",
|
|
149
|
+
"check:link": "node scripts/check-link.mjs",
|
|
150
|
+
"check:text-select": "node scripts/check-text-select.mjs",
|
|
151
|
+
"check:date-picker": "node scripts/check-date-picker.mjs",
|
|
152
|
+
"check:full-page": "node scripts/check-full-page.mjs",
|
|
153
|
+
"check:short-viewport": "node scripts/check-short-viewport.mjs",
|
|
154
|
+
"check:phone-layout": "node scripts/check-phone-layout.mjs",
|
|
155
|
+
"check:phone-bars": "node scripts/check-phone-bars.mjs",
|
|
156
|
+
"check:text-zoom": "node scripts/check-text-zoom.mjs",
|
|
157
|
+
"check:focus-restore": "node scripts/check-focus-restore.mjs",
|
|
158
|
+
"check:detail-surface": "node scripts/check-detail-surface.mjs",
|
|
159
|
+
"check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
|
|
160
|
+
"check:npm-metadata": "node scripts/check-npm-metadata.mjs",
|
|
161
|
+
"check:package": "node scripts/check-package-content.mjs",
|
|
162
|
+
"check:public-api-consumer": "node scripts/check-public-api-consumer.mjs",
|
|
163
|
+
"notices:update": "node scripts/third-party-notices.mjs --write",
|
|
164
|
+
"notices:check": "node scripts/third-party-notices.mjs --check",
|
|
165
|
+
"check": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
166
|
+
"check:fast": "bash scripts/docker-check.sh \"npm run gates\"",
|
|
167
|
+
"check:local-browser": "node scripts/app-local-browser.mjs",
|
|
168
|
+
"check:infotip": "node scripts/check-infotip.mjs",
|
|
169
|
+
"release:stage": "node scripts/stage-release.mjs",
|
|
170
|
+
"check:polish": "bash scripts/docker-check.sh --build --out .polish-shots 'node scripts/check-polish.mjs'",
|
|
171
|
+
"check:acceptance": "node scripts/check-acceptance.mjs",
|
|
172
|
+
"check:palette": "node scripts/check-palette.mjs",
|
|
173
|
+
"gates": "node scripts/gates.mjs",
|
|
174
|
+
"gates:full": "node scripts/gates.mjs --full",
|
|
175
|
+
"check:layout": "node scripts/check-layout.mjs",
|
|
176
|
+
"release:smoke": "node scripts/release-smoke.mjs",
|
|
177
|
+
"check:browser-install": "playwright install chromium webkit"
|
|
178
|
+
}
|
|
179
|
+
}
|