@ultimat3/ui 26.0.0 → 26.1.1
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/package.json +5 -5
- package/src/global.scss +32 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ultimat3/ui",
|
|
3
|
-
"version": "26.
|
|
3
|
+
"version": "26.1.1",
|
|
4
4
|
"description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
"icons": "bun run src/icons/build-icons.ts"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@ultimat3/core": "26.
|
|
53
|
-
"@ultimat3/i18n": "26.
|
|
54
|
-
"@ultimat3/money": "26.
|
|
55
|
-
"@ultimat3/time": "26.
|
|
52
|
+
"@ultimat3/core": "26.1.1",
|
|
53
|
+
"@ultimat3/i18n": "26.1.1",
|
|
54
|
+
"@ultimat3/money": "26.1.1",
|
|
55
|
+
"@ultimat3/time": "26.1.1"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"solid-js": "^1.9.0"
|
package/src/global.scss
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
@use 'tokens/theme';
|
|
7
7
|
@use 'tokens/reset';
|
|
8
|
+
@use 'tokens' as t;
|
|
8
9
|
|
|
9
10
|
// A held island's reveal that needs no script (`@ultimat3/render`'s `ISLAND_HOLD_REVEAL`, issue 506):
|
|
10
11
|
// its wrapper animates to this after the hold's cap, so JS off or a blocked runtime still shows
|
|
@@ -14,3 +15,34 @@
|
|
|
14
15
|
visibility: visible;
|
|
15
16
|
}
|
|
16
17
|
}
|
|
18
|
+
|
|
19
|
+
// The client router's route-presented modal (`@ultimat3/render`'s `NAVIGATION_MODAL_ATTRIBUTE`, a
|
|
20
|
+
// route declaring `navigation: 'modal'`): a native <dialog> holding the page's `<main>`, styled as
|
|
21
|
+
// `Dialog` is. Global because no component renders it — the router does, and `render` cannot
|
|
22
|
+
// import `ui` (one tier) — so the name is held equal by render's `navigation-modal-style.test.ts`.
|
|
23
|
+
// `:where()`: an app restyles it without out-shouting a selector.
|
|
24
|
+
:where(dialog[data-x-modal]) {
|
|
25
|
+
inline-size: min(100% - #{t.space(8)}, 40rem);
|
|
26
|
+
max-block-size: min(88dvh, 60rem);
|
|
27
|
+
padding: t.space(5);
|
|
28
|
+
border: 1px solid t.role('line');
|
|
29
|
+
border-radius: t.radius(lg);
|
|
30
|
+
background: t.role('surface-raised');
|
|
31
|
+
color: t.role('fg');
|
|
32
|
+
box-shadow: t.shadow(xl);
|
|
33
|
+
overflow-y: auto;
|
|
34
|
+
|
|
35
|
+
@include t.custom-scrollbar;
|
|
36
|
+
@include t.scrim-backdrop($blur: t.rem(2px));
|
|
37
|
+
|
|
38
|
+
&[open] {
|
|
39
|
+
animation: ultimate-modal-in t.duration(base) t.easing(out);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes ultimate-modal-in {
|
|
44
|
+
from {
|
|
45
|
+
opacity: 0;
|
|
46
|
+
translate: 0 t.space(2);
|
|
47
|
+
}
|
|
48
|
+
}
|