@zylem/ui 0.9.6 → 0.9.7
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-UQ3MDDFI.js +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +11 -4
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.js +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.css.ts +14 -0
- package/src/components/Button/Button.tsx +11 -3
- package/src/components/ToolButton/ToolButton.tsx +1 -0
- package/src/components/ToolbarButton/ToolbarButton.css.ts +13 -0
- package/src/components/ToolbarButton/ToolbarButton.tsx +14 -5
- package/src/components/ToolboxButton/ToolboxButton.css.ts +13 -0
- package/src/components/ToolboxButton/ToolboxButton.tsx +8 -2
- package/src/theme.css.ts +8 -0
- package/dist/chunk-YJVLOHJL.js +0 -1
package/dist/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./chunk-
|
|
1
|
+
import"./chunk-UQ3MDDFI.js";
|
package/package.json
CHANGED
|
@@ -67,6 +67,20 @@ globalStyle('.zylem-button[data-variant="primary"]:hover:not([disabled])', {
|
|
|
67
67
|
filter: 'brightness(1.08)',
|
|
68
68
|
});
|
|
69
69
|
|
|
70
|
+
globalStyle('.zylem-button[data-on]', {
|
|
71
|
+
borderColor: 'rgba(46, 231, 255, 0.9)',
|
|
72
|
+
background: vars.material.buttonGlassOn,
|
|
73
|
+
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
|
|
74
|
+
color: '#F3FDFF',
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
globalStyle('.zylem-button[data-on]:hover:not([disabled])', {
|
|
78
|
+
background: vars.material.buttonGlassOn,
|
|
79
|
+
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
|
|
80
|
+
filter: 'brightness(1.08)',
|
|
81
|
+
color: '#F3FDFF',
|
|
82
|
+
});
|
|
83
|
+
|
|
70
84
|
globalStyle('.zylem-button[data-variant="active"]', {
|
|
71
85
|
borderColor: 'rgba(20, 255, 60, 0.78)',
|
|
72
86
|
background: vars.material.buttonGlassActive,
|
|
@@ -9,18 +9,24 @@ export interface ButtonProps
|
|
|
9
9
|
size?: ButtonSize;
|
|
10
10
|
/** Icon drawn before the label. Omitted, the button is label only. */
|
|
11
11
|
icon?: JSX.Element | undefined;
|
|
12
|
+
/**
|
|
13
|
+
* Checkbox-like toggle. Electric blue while on, and exposed as `aria-pressed`.
|
|
14
|
+
* Pass `false` while off so the button still announces itself.
|
|
15
|
+
*/
|
|
16
|
+
on?: boolean | undefined;
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
/**
|
|
15
20
|
* HyperGlass button: squared Aqua-like bevel with glass depth. Variants map
|
|
16
|
-
* to the Zylem palette — `active` for live/run actions, `
|
|
17
|
-
* destructive actions, `ghost` for
|
|
21
|
+
* to the Zylem palette — `active` for live/run actions, `on` for a toggle
|
|
22
|
+
* that is switched on, `danger` for destructive actions, `ghost` for
|
|
23
|
+
* low-emphasis chrome.
|
|
18
24
|
*
|
|
19
25
|
* Styling lives on the global `.zylem-button` class (bundled in
|
|
20
26
|
* `@zylem/ui/styles.css`), selected via `data-variant` / `data-size`.
|
|
21
27
|
*/
|
|
22
28
|
export function Button(props: ButtonProps) {
|
|
23
|
-
const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon']);
|
|
29
|
+
const [local, rest] = splitProps(props, ['variant', 'size', 'class', 'children', 'icon', 'on']);
|
|
24
30
|
return (
|
|
25
31
|
<button
|
|
26
32
|
type="button"
|
|
@@ -28,6 +34,8 @@ export function Button(props: ButtonProps) {
|
|
|
28
34
|
data-variant={local.variant ?? 'default'}
|
|
29
35
|
data-size={local.size ?? 'md'}
|
|
30
36
|
{...rest}
|
|
37
|
+
data-on={local.on ? '' : undefined}
|
|
38
|
+
aria-pressed={local.on === undefined ? undefined : local.on}
|
|
31
39
|
>
|
|
32
40
|
<Show when={local.icon}>
|
|
33
41
|
<span class="zylem-button-icon" aria-hidden="true">
|
|
@@ -48,6 +48,19 @@ globalStyle('.zylem-toolbar-btn:focus-visible', {
|
|
|
48
48
|
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
|
|
49
49
|
});
|
|
50
50
|
|
|
51
|
+
globalStyle('.zylem-toolbar-btn[data-on]', {
|
|
52
|
+
borderColor: 'rgba(46, 231, 255, 0.9)',
|
|
53
|
+
background: vars.material.buttonGlassOn,
|
|
54
|
+
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
|
|
55
|
+
color: '#F3FDFF',
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
globalStyle('.zylem-toolbar-btn[data-on]:hover', {
|
|
59
|
+
background: vars.material.buttonGlassOn,
|
|
60
|
+
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
|
|
61
|
+
filter: 'brightness(1.08)',
|
|
62
|
+
});
|
|
63
|
+
|
|
51
64
|
globalStyle('.zylem-toolbar-btn[data-selected], .zylem-toolbar-btn.selected', {
|
|
52
65
|
borderColor: 'rgba(20, 255, 60, 0.78)',
|
|
53
66
|
background: vars.material.buttonGlassActive,
|
|
@@ -7,10 +7,18 @@ export interface ToolbarButtonProps {
|
|
|
7
7
|
onClick?: (event: MouseEvent) => void;
|
|
8
8
|
/**
|
|
9
9
|
* The selected look alone, for a button whose label already says its state
|
|
10
|
-
* (Play / Pause). For a toggle with a constant label, use `
|
|
10
|
+
* (Play / Pause). Live green. For a toggle with a constant label, use `on`.
|
|
11
11
|
*/
|
|
12
12
|
selected?: boolean;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Checkbox-like toggle. Electric blue while on, and exposed as `aria-pressed`.
|
|
15
|
+
* Pass `false` for a toggle that is off so the button still announces itself.
|
|
16
|
+
*/
|
|
17
|
+
on?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Toggle drawn as `on`, unless `selected` is also set, which keeps the
|
|
20
|
+
* live-green jewel. Prefer `on` for new toggles.
|
|
21
|
+
*/
|
|
14
22
|
pressed?: boolean;
|
|
15
23
|
disabled?: boolean;
|
|
16
24
|
children: JSX.Element;
|
|
@@ -28,7 +36,7 @@ function insidePopup(element: Element | undefined): boolean {
|
|
|
28
36
|
|
|
29
37
|
/**
|
|
30
38
|
* HyperGlass toolbar button: square glass icon button with a tooltip.
|
|
31
|
-
*
|
|
39
|
+
* `selected` is the live-green jewel. `on` is the electric-blue toggle.
|
|
32
40
|
*
|
|
33
41
|
* The tooltip portals into the layer container for its own tree, so it stays
|
|
34
42
|
* styled when the toolbar lives inside a web component's shadow root.
|
|
@@ -58,7 +66,7 @@ export function ToolbarButton(props: ToolbarButtonProps) {
|
|
|
58
66
|
>
|
|
59
67
|
<KButton.Root
|
|
60
68
|
aria-label={props.label}
|
|
61
|
-
aria-pressed={props.pressed}
|
|
69
|
+
aria-pressed={props.on !== undefined ? props.on : props.pressed}
|
|
62
70
|
onClick={props.onClick}
|
|
63
71
|
disabled={props.disabled}
|
|
64
72
|
class={
|
|
@@ -66,7 +74,8 @@ export function ToolbarButton(props: ToolbarButtonProps) {
|
|
|
66
74
|
? `zylem-toolbar-btn ${props.class}`
|
|
67
75
|
: 'zylem-toolbar-btn'
|
|
68
76
|
}
|
|
69
|
-
data-selected={props.selected
|
|
77
|
+
data-selected={props.selected ? '' : undefined}
|
|
78
|
+
data-on={props.on || (props.pressed && !props.selected) ? '' : undefined}
|
|
70
79
|
>
|
|
71
80
|
{props.children}
|
|
72
81
|
</KButton.Root>
|
|
@@ -50,6 +50,19 @@ globalStyle('.zylem-toolbox-btn:focus-visible', {
|
|
|
50
50
|
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
|
|
51
51
|
});
|
|
52
52
|
|
|
53
|
+
globalStyle('.zylem-toolbox-btn[data-on]', {
|
|
54
|
+
borderColor: 'rgba(46, 231, 255, 0.9)',
|
|
55
|
+
background: vars.material.buttonGlassOn,
|
|
56
|
+
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
|
|
57
|
+
color: '#F3FDFF',
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
globalStyle('.zylem-toolbox-btn[data-on]:hover:not([disabled])', {
|
|
61
|
+
background: vars.material.buttonGlassOn,
|
|
62
|
+
boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowOn}`,
|
|
63
|
+
filter: 'brightness(1.08)',
|
|
64
|
+
});
|
|
65
|
+
|
|
53
66
|
globalStyle('.zylem-toolbox-btn[data-selected]', {
|
|
54
67
|
borderColor: 'rgba(20, 255, 60, 0.78)',
|
|
55
68
|
background: vars.material.buttonGlassActive,
|
|
@@ -11,8 +11,13 @@ export interface ToolboxButtonProps {
|
|
|
11
11
|
label: string;
|
|
12
12
|
/** Icon rendered above the label. */
|
|
13
13
|
children: JSX.Element;
|
|
14
|
-
/** Given at all, the tile
|
|
14
|
+
/** Live-green jewel. Given at all, the tile exposes this as `aria-pressed`. */
|
|
15
15
|
selected?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Checkbox-like toggle. Electric blue while on. Given at all, the tile
|
|
18
|
+
* exposes this as `aria-pressed` instead of `selected`.
|
|
19
|
+
*/
|
|
20
|
+
on?: boolean;
|
|
16
21
|
disabled?: boolean;
|
|
17
22
|
/** Overrides the size inherited from the enclosing `ToolboxGrid`. */
|
|
18
23
|
size?: ToolboxSize;
|
|
@@ -30,7 +35,8 @@ export function ToolboxButton(props: ToolboxButtonProps) {
|
|
|
30
35
|
class={props.class ? `zylem-toolbox-btn ${props.class}` : 'zylem-toolbox-btn'}
|
|
31
36
|
data-size={props.size}
|
|
32
37
|
data-selected={props.selected ? '' : undefined}
|
|
33
|
-
|
|
38
|
+
data-on={props.on ? '' : undefined}
|
|
39
|
+
aria-pressed={props.on !== undefined ? props.on : props.selected}
|
|
34
40
|
disabled={props.disabled}
|
|
35
41
|
onClick={props.onClick}
|
|
36
42
|
>
|
package/src/theme.css.ts
CHANGED
|
@@ -30,6 +30,8 @@ const tokens = {
|
|
|
30
30
|
|
|
31
31
|
active: 'rgba(20, 255, 60, 0.7)',
|
|
32
32
|
activeHover: 'rgba(20, 255, 60, 0.4)',
|
|
33
|
+
/** Electric blue for a toggle that is on. Brighter than the resting primary. */
|
|
34
|
+
on: '#2EE7FF',
|
|
33
35
|
successHover: '#2a6734b3',
|
|
34
36
|
|
|
35
37
|
text: '#E6EBEF',
|
|
@@ -79,6 +81,8 @@ const tokens = {
|
|
|
79
81
|
'linear-gradient(180deg, rgba(218, 242, 255, 0.58), rgba(48, 137, 220, 0.86) 48%, rgba(11, 62, 112, 0.96))',
|
|
80
82
|
buttonGlassActive:
|
|
81
83
|
'linear-gradient(180deg, rgba(190, 255, 203, 0.42), rgba(28, 174, 63, 0.78) 50%, rgba(9, 86, 31, 0.95))',
|
|
84
|
+
buttonGlassOn:
|
|
85
|
+
'linear-gradient(180deg, rgba(214, 251, 255, 0.55), rgba(0, 196, 255, 0.82) 48%, rgba(0, 72, 148, 0.96))',
|
|
82
86
|
buttonGlassDanger:
|
|
83
87
|
'linear-gradient(180deg, rgba(255, 210, 202, 0.36), rgba(230, 69, 52, 0.82) 50%, rgba(96, 18, 13, 0.94))',
|
|
84
88
|
fieldGlass:
|
|
@@ -100,6 +104,7 @@ const tokens = {
|
|
|
100
104
|
|
|
101
105
|
glowPrimary: '0 0 18px rgba(97, 166, 232, 0.28)',
|
|
102
106
|
glowActive: '0 0 20px rgba(20, 255, 60, 0.26)',
|
|
107
|
+
glowOn: '0 0 20px rgba(46, 231, 255, 0.42)',
|
|
103
108
|
glowDanger: '0 0 20px rgba(230, 69, 52, 0.24)',
|
|
104
109
|
|
|
105
110
|
focusRing:
|
|
@@ -158,6 +163,7 @@ const varNames = {
|
|
|
158
163
|
|
|
159
164
|
active: 'zylem-color-active',
|
|
160
165
|
activeHover: 'zylem-color-active-hover',
|
|
166
|
+
on: 'zylem-color-on',
|
|
161
167
|
successHover: 'zylem-color-success-hover',
|
|
162
168
|
|
|
163
169
|
text: 'zylem-color-text',
|
|
@@ -197,6 +203,7 @@ const varNames = {
|
|
|
197
203
|
buttonGlass: 'zylem-material-button-glass',
|
|
198
204
|
buttonGlassHover: 'zylem-material-button-glass-hover',
|
|
199
205
|
buttonGlassActive: 'zylem-material-button-glass-active',
|
|
206
|
+
buttonGlassOn: 'zylem-material-button-glass-on',
|
|
200
207
|
buttonGlassDanger: 'zylem-material-button-glass-danger',
|
|
201
208
|
fieldGlass: 'zylem-material-field-glass',
|
|
202
209
|
panelHeaderGloss: 'zylem-material-panel-header-gloss',
|
|
@@ -212,6 +219,7 @@ const varNames = {
|
|
|
212
219
|
|
|
213
220
|
glowPrimary: 'zylem-effect-glow-primary',
|
|
214
221
|
glowActive: 'zylem-effect-glow-active',
|
|
222
|
+
glowOn: 'zylem-effect-glow-on',
|
|
215
223
|
glowDanger: 'zylem-effect-glow-danger',
|
|
216
224
|
|
|
217
225
|
focusRing: 'zylem-effect-focus-ring',
|
package/dist/chunk-YJVLOHJL.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",fontFamilyMono:"'JetBrains Mono', ui-monospace, monospace",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)"},art:{checkerLight:"#4F5C72",checkerDark:"#3C4759",canvasBorder:"rgba(150, 210, 255, 0.5)"},layers:{base:"0",panel:"1000",modal:"2000",popover:"3000",tooltip:"4000",menu:"5000"}},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)",fontFamilyMono:"var(--zylem-font-family-mono)",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)"},art:{checkerLight:"var(--zylem-art-checker-light)",checkerDark:"var(--zylem-art-checker-dark)",canvasBorder:"var(--zylem-art-canvas-border)"},layers:{base:"var(--zylem-layer-base)",panel:"var(--zylem-layer-panel)",modal:"var(--zylem-layer-modal)",popover:"var(--zylem-layer-popover)",tooltip:"var(--zylem-layer-tooltip)",menu:"var(--zylem-layer-menu)"}};export{l as a,o as b};
|