@zylem/ui 0.2.0 → 0.8.8
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/dist/chunk-3TP2SNNW.js +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +22 -2
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.js +1 -1
- package/package.json +11 -3
- package/src/components/Dialog/Dialog.css.ts +3 -2
- package/src/components/Dialog/Dialog.tsx +44 -20
- package/src/components/DropdownMenu/DropdownMenu.css.ts +1 -1
- package/src/components/DropdownMenu/DropdownMenu.tsx +47 -28
- package/src/components/ItemPicker/ItemPicker.css.ts +101 -0
- package/src/components/ItemPicker/ItemPicker.tsx +108 -0
- package/src/components/ItemPicker/filter-items.ts +75 -0
- package/src/components/MenuButton/MenuButton.css.ts +91 -0
- package/src/components/MenuButton/MenuButton.tsx +153 -0
- package/src/components/Property/Property.tsx +8 -6
- package/src/components/SearchInput/SearchInput.tsx +3 -0
- package/src/components/Select/Select.css.ts +1 -1
- package/src/components/Select/Select.tsx +17 -5
- package/src/components/ToolbarButton/ToolbarButton.tsx +17 -7
- package/src/components/Tooltip/Tooltip.css.ts +1 -1
- package/src/components/Tooltip/Tooltip.tsx +18 -6
- package/src/components/WindowControls/WindowControls.tsx +7 -5
- package/src/components/index.ts +27 -0
- package/src/global/detached-panel.css.ts +4 -1
- package/src/layers/LayerContext.tsx +132 -0
- package/src/layers/dismiss-guard.ts +81 -0
- package/src/layers/index.ts +27 -0
- package/src/layers/layer-tokens.css.ts +38 -0
- package/src/layers/resolve-mount.ts +48 -0
- package/src/layers/tiers.ts +53 -0
- package/src/styles.ts +3 -0
- package/src/theme.css.ts +7 -0
- package/dist/chunk-VGOOWBSO.js +0 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { globalStyle } from '@vanilla-extract/css';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Structural styles for the layer system. The tier values themselves are design
|
|
5
|
+
* tokens (`vars.layers.*` in theme.css.ts); this file only styles the two DOM
|
|
6
|
+
* roles the system introduces.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Container that portaled overlays mount into. Deliberately unpositioned and
|
|
11
|
+
* without a `z-index` of its own: creating a stacking context here would trap
|
|
12
|
+
* its children, and the whole point is for a menu at the `menu` tier to compare
|
|
13
|
+
* directly against a panel at the `panel` tier.
|
|
14
|
+
*/
|
|
15
|
+
globalStyle('.zylem-layer-portals', {
|
|
16
|
+
// Overlays are interactive, and hosts often set `pointer-events: none` on the
|
|
17
|
+
// element the container is appended under so input reaches what is behind
|
|
18
|
+
// (the editor does this so clicks reach the running game). Opting back in
|
|
19
|
+
// here saves every overlay from remembering to.
|
|
20
|
+
pointerEvents: 'auto',
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* A subtree that layers independently of the rest of the page.
|
|
25
|
+
*
|
|
26
|
+
* `isolation: isolate` is the whole mechanism: it gives the subtree a stacking
|
|
27
|
+
* context, so its descendants' `z-index` values are only ever compared with each
|
|
28
|
+
* other. Nothing inside can paint above anything outside, however large its tier,
|
|
29
|
+
* and the scope as a whole sits wherever its own tier puts it.
|
|
30
|
+
*
|
|
31
|
+
* The tier variables are deliberately *not* redefined here. Keeping the same
|
|
32
|
+
* bands inside and outside means a rank offset means the same thing everywhere,
|
|
33
|
+
* which is what lets a panel inside a modal be lifted above that modal's
|
|
34
|
+
* tooltips while still sitting below its menus.
|
|
35
|
+
*/
|
|
36
|
+
globalStyle('.zylem-layer-scope', {
|
|
37
|
+
isolation: 'isolate',
|
|
38
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Where a portaled overlay should mount.
|
|
3
|
+
*
|
|
4
|
+
* Kobalte's portals default to `document.body`, which breaks inside a shadow
|
|
5
|
+
* root: the styles a web component injects into its own shadow tree do not apply
|
|
6
|
+
* to `document.body`, so the overlay renders unstyled. Resolving from the
|
|
7
|
+
* triggering element instead keeps the overlay in whatever tree its styles live
|
|
8
|
+
* in.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** Class on the container that layered overlays mount into. */
|
|
12
|
+
export const LAYER_PORTAL_CLASS = 'zylem-layer-portals';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* The shadow root or document body that owns `node`.
|
|
16
|
+
*
|
|
17
|
+
* Must be called after the node is in the document — `getRootNode()` only sees
|
|
18
|
+
* the shadow root once the subtree has been inserted.
|
|
19
|
+
*/
|
|
20
|
+
export function resolveLayerRoot(
|
|
21
|
+
node: Node | null | undefined,
|
|
22
|
+
): ShadowRoot | HTMLElement {
|
|
23
|
+
const root = node?.getRootNode();
|
|
24
|
+
if (root instanceof ShadowRoot) return root;
|
|
25
|
+
if (root instanceof Document) return root.body;
|
|
26
|
+
return document.body;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* The portal container for `node`'s tree, creating it on first use.
|
|
31
|
+
*
|
|
32
|
+
* Appended last so it starts above its siblings in paint order even before
|
|
33
|
+
* z-index is considered, and reused across every overlay in the same tree so a
|
|
34
|
+
* page with many menus does not accumulate containers.
|
|
35
|
+
*/
|
|
36
|
+
export function ensureLayerContainer(node: Node | null | undefined): HTMLElement {
|
|
37
|
+
const root = resolveLayerRoot(node);
|
|
38
|
+
for (const child of Array.from(root.children)) {
|
|
39
|
+
if (child instanceof HTMLElement && child.classList.contains(LAYER_PORTAL_CLASS)) {
|
|
40
|
+
return child;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const container = document.createElement('div');
|
|
45
|
+
container.className = LAYER_PORTAL_CLASS;
|
|
46
|
+
root.appendChild(container);
|
|
47
|
+
return container;
|
|
48
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The layer tier ladder, as plain TypeScript.
|
|
3
|
+
*
|
|
4
|
+
* These live outside `theme.css.ts` because the runtime half of the layer
|
|
5
|
+
* system (`useLayer`) needs them, and `@zylem/ui/components` ships as source to
|
|
6
|
+
* consumers that do not compile vanilla-extract. A `.tsx` importing a `.css.ts`
|
|
7
|
+
* would drag `createGlobalTheme` into those apps, where it throws for want of a
|
|
8
|
+
* file scope. The theme imports these instead, so the ladder is still declared
|
|
9
|
+
* once.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Stacking tiers, lowest first. Every overlay reads its `z-index` from one of
|
|
14
|
+
* these rather than picking a number, so the order is decided in one place.
|
|
15
|
+
*/
|
|
16
|
+
export type LayerTier = 'base' | 'panel' | 'modal' | 'popover' | 'tooltip' | 'menu';
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* The `z-index` each tier resolves to. Fed to the theme as `tokens.layers`.
|
|
20
|
+
*
|
|
21
|
+
* Bands are 1000 apart to leave room for a per-instance rank offset, which is
|
|
22
|
+
* what dynamic ordering within a tier needs (raising the clicked window to the
|
|
23
|
+
* front of the other windows, say).
|
|
24
|
+
*/
|
|
25
|
+
export const layerTierValues = {
|
|
26
|
+
base: '0',
|
|
27
|
+
panel: '1000',
|
|
28
|
+
modal: '2000',
|
|
29
|
+
popover: '3000',
|
|
30
|
+
tooltip: '4000',
|
|
31
|
+
menu: '5000',
|
|
32
|
+
} as const;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Custom-property name per tier, sans the leading `--`. Fed to the theme as
|
|
36
|
+
* `varNames.layers`, and must stay in lock-step with {@link layerTierValues}.
|
|
37
|
+
*/
|
|
38
|
+
export const layerTierVarNames = {
|
|
39
|
+
base: 'zylem-layer-base',
|
|
40
|
+
panel: 'zylem-layer-panel',
|
|
41
|
+
modal: 'zylem-layer-modal',
|
|
42
|
+
popover: 'zylem-layer-popover',
|
|
43
|
+
tooltip: 'zylem-layer-tooltip',
|
|
44
|
+
menu: 'zylem-layer-menu',
|
|
45
|
+
} as const;
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* `var(--zylem-layer-*)` reference per tier — the same strings `vars.layers`
|
|
49
|
+
* carries, reachable without loading the theme's `.css.ts`.
|
|
50
|
+
*/
|
|
51
|
+
export const layerTierVars = Object.fromEntries(
|
|
52
|
+
Object.entries(layerTierVarNames).map(([tier, name]) => [tier, `var(--${name})`])
|
|
53
|
+
) as Record<LayerTier, string>;
|
package/src/styles.ts
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import './fonts.css';
|
|
9
9
|
import './theme.css';
|
|
10
|
+
import './layers/layer-tokens.css';
|
|
10
11
|
import './global/logo.css';
|
|
11
12
|
import './global/hyperglass-base.css';
|
|
12
13
|
import './global/common.css';
|
|
@@ -44,5 +45,7 @@ import './components/Console/Console.css';
|
|
|
44
45
|
import './components/Sidebar/Sidebar.css';
|
|
45
46
|
import './components/Card/Card.css';
|
|
46
47
|
import './components/SearchInput/SearchInput.css';
|
|
48
|
+
import './components/MenuButton/MenuButton.css';
|
|
49
|
+
import './components/ItemPicker/ItemPicker.css';
|
|
47
50
|
import './components/EmptyState/EmptyState.css';
|
|
48
51
|
import './components/Kbd/Kbd.css';
|
package/src/theme.css.ts
CHANGED
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
createGlobalTheme,
|
|
3
3
|
createGlobalThemeContract,
|
|
4
4
|
} from '@vanilla-extract/css';
|
|
5
|
+
import { layerTierValues, layerTierVarNames } from './layers/tiers';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* Concrete design-token values for the Zylem UI.
|
|
@@ -111,6 +112,11 @@ const tokens = {
|
|
|
111
112
|
normal: '160ms',
|
|
112
113
|
easeOut: 'cubic-bezier(.2,.8,.2,1)',
|
|
113
114
|
},
|
|
115
|
+
/**
|
|
116
|
+
* Stacking tiers. Declared in `layers/tiers.ts` because the runtime side of
|
|
117
|
+
* the layer system reads the same ladder without loading this file.
|
|
118
|
+
*/
|
|
119
|
+
layers: layerTierValues,
|
|
114
120
|
} as const;
|
|
115
121
|
|
|
116
122
|
/**
|
|
@@ -206,6 +212,7 @@ const varNames = {
|
|
|
206
212
|
normal: 'zylem-motion-normal',
|
|
207
213
|
easeOut: 'zylem-motion-ease-out',
|
|
208
214
|
},
|
|
215
|
+
layers: layerTierVarNames,
|
|
209
216
|
} as const;
|
|
210
217
|
|
|
211
218
|
/**
|
package/dist/chunk-VGOOWBSO.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var l={colors:{primary:"#61A6E8",primaryHover:"#3B8AD8",primaryActive:"#0C6EB8",accent:"#E64534",accentHover:"#C93A2C",accentActive:"#A82F24",background:"#11151C",backgroundTranslucent:"rgba(10, 20, 30, 0.46)",surface:"#1A1F27",surfaceHover:"#222831",border:"#2D3643",active:"rgba(20, 255, 60, 0.7)",activeHover:"rgba(20, 255, 60, 0.4)",successHover:"#2a6734b3",text:"#E6EBEF",textSecondary:"#88929E",consoleBackground:"rgba(20, 40, 60, 0.25)",consoleText:"#61A6E8"},spacing:{xxs:"0.125rem",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem",xxl:"2rem",xxxl:"3rem"},sizes:{icon:"28px",iconSm:"16px",iconLg:"96px"},typography:{fontFamily:"'Exo 2', sans-serif",fontSize:"14px"},borders:{radius:"12px",width:"1.5px"},material:{glassPanel:"linear-gradient(180deg, rgba(38, 76, 112, 0.74), rgba(10, 24, 38, 0.58))",glassPanelDark:"linear-gradient(180deg, rgba(26, 31, 39, 0.75), rgba(10, 20, 30, 0.68))",glossyBar:"linear-gradient(180deg, rgba(205, 232, 255, 0.55) 0%, rgba(97, 166, 232, 0.34) 38%, rgba(18, 54, 88, 0.86) 100%)",buttonGlass:"linear-gradient(180deg, rgba(178, 219, 255, 0.34), rgba(30, 94, 148, 0.72) 48%, rgba(9, 34, 58, 0.92))",buttonGlassHover:"linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))",buttonGlassActive:"linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))",buttonGlassDanger:"linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))",fieldGlass:"linear-gradient(180deg, rgba(8, 19, 31, 0.82), rgba(15, 39, 62, 0.72))",panelHeaderGloss:"linear-gradient(180deg, rgba(190, 226, 255, 0.18), rgba(61, 118, 165, 0.16) 46%, rgba(10, 27, 44, 0.26))"},effects:{blurSm:"8px",blurMd:"14px",blurLg:"24px",shadowPanel:"0 22px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.10)",shadowButton:"inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.45), 0 2px 7px rgba(0,0,0,0.35)",shadowInset:"inset 0 1px 2px rgba(0,0,0,0.42), inset 0 -1px 0 rgba(255,255,255,0.08)",glowPrimary:"0 0 18px rgba(97, 166, 232, 0.28)",glowActive:"0 0 20px rgba(20, 255, 60, 0.26)",glowDanger:"0 0 20px rgba(230, 69, 52, 0.24)",focusRing:"0 0 0 2px rgba(97, 166, 232, 0.38), 0 0 18px rgba(97, 166, 232, 0.22)"},radii:{window:"14px",panel:"12px",button:"7px",control:"6px",card:"10px"},motion:{fast:"120ms",normal:"160ms",easeOut:"cubic-bezier(.2,.8,.2,1)"}},o={colors:{primary:"var(--zylem-color-primary)",primaryHover:"var(--zylem-color-primary-hover)",primaryActive:"var(--zylem-color-primary-active)",accent:"var(--zylem-color-accent)",accentHover:"var(--zylem-color-accent-hover)",accentActive:"var(--zylem-color-accent-active)",background:"var(--zylem-color-background)",backgroundTranslucent:"var(--zylem-color-background-translucent)",surface:"var(--zylem-color-surface)",surfaceHover:"var(--zylem-color-surface-hover)",border:"var(--zylem-color-border)",active:"var(--zylem-color-active)",activeHover:"var(--zylem-color-active-hover)",successHover:"var(--zylem-color-success-hover)",text:"var(--zylem-color-text)",textSecondary:"var(--zylem-color-text-secondary)",consoleBackground:"var(--zylem-color-console-background)",consoleText:"var(--zylem-color-console-text)"},spacing:{xxs:"var(--zylem-spacing-xxs)",xs:"var(--zylem-spacing-xs)",sm:"var(--zylem-spacing-sm)",md:"var(--zylem-spacing-md)",lg:"var(--zylem-spacing-lg)",xl:"var(--zylem-spacing-xl)",xxl:"var(--zylem-spacing-xxl)",xxxl:"var(--zylem-spacing-xxxl)"},sizes:{icon:"var(--zylem-size-icon)",iconSm:"var(--zylem-size-icon-sm)",iconLg:"var(--zylem-size-icon-lg)"},typography:{fontFamily:"var(--zylem-font-family)",fontSize:"var(--zylem-font-size)"},borders:{radius:"var(--zylem-radius)",width:"var(--zylem-border)"},material:{glassPanel:"var(--zylem-material-glass-panel)",glassPanelDark:"var(--zylem-material-glass-panel-dark)",glossyBar:"var(--zylem-material-glossy-bar)",buttonGlass:"var(--zylem-material-button-glass)",buttonGlassHover:"var(--zylem-material-button-glass-hover)",buttonGlassActive:"var(--zylem-material-button-glass-active)",buttonGlassDanger:"var(--zylem-material-button-glass-danger)",fieldGlass:"var(--zylem-material-field-glass)",panelHeaderGloss:"var(--zylem-material-panel-header-gloss)"},effects:{blurSm:"var(--zylem-effect-blur-sm)",blurMd:"var(--zylem-effect-blur-md)",blurLg:"var(--zylem-effect-blur-lg)",shadowPanel:"var(--zylem-effect-shadow-panel)",shadowButton:"var(--zylem-effect-shadow-button)",shadowInset:"var(--zylem-effect-shadow-inset)",glowPrimary:"var(--zylem-effect-glow-primary)",glowActive:"var(--zylem-effect-glow-active)",glowDanger:"var(--zylem-effect-glow-danger)",focusRing:"var(--zylem-effect-focus-ring)"},radii:{window:"var(--zylem-radius-window)",panel:"var(--zylem-radius-panel)",button:"var(--zylem-radius-button)",control:"var(--zylem-radius-control)",card:"var(--zylem-radius-card)"},motion:{fast:"var(--zylem-motion-fast)",normal:"var(--zylem-motion-normal)",easeOut:"var(--zylem-motion-ease-out)"}};export{l as a,o as b};
|