@zylem/ui 0.1.0 → 0.2.0

package/src/global/common.css.ts

@@ -2,13 +2,8 @@ import { globalStyle } from '@vanilla-extract/css';
 import { vars } from '../theme.css';
 
 globalStyle('.selected', {
-  background: vars.colors.primaryActive,
-  boxShadow: 'inset 0 0 6px rgba(97, 166, 232, 0.4)',
-});
-
-globalStyle('button', {
-  boxShadow:
-    'inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
+  background: vars.material.buttonGlassActive,
+  boxShadow: `inset 0 0 6px rgba(20, 255, 60, 0.35), ${vars.effects.glowActive}`,
 });
 
 globalStyle('.overlay', {
@@ -18,24 +13,26 @@ globalStyle('.overlay', {
   pointerEvents: 'none',
 });
 
+// Default scrollbars: slim glass rail (use `.zylem-scroll` for the full
+// 13px HyperGlass treatment defined in hyperglass-base.css.ts).
 globalStyle('::-webkit-scrollbar', {
-  width: '3px',
-  height: '3px',
+  width: '8px',
+  height: '8px',
 });
 
 globalStyle('::-webkit-scrollbar-track', {
-  background: 'transparent',
+  background: 'rgba(7, 19, 33, 0.4)',
+  borderRadius: '999px',
 });
 
 globalStyle('::-webkit-scrollbar-thumb', {
-  background: vars.colors.primary,
-  borderRadius: vars.borders.radius,
+  borderRadius: '999px',
+  border: '1px solid rgba(5, 16, 28, 0.82)',
+  background:
+    'linear-gradient(90deg, rgba(220,242,255,0.4), rgba(97,166,232,0.65) 42%, rgba(19,62,102,0.9))',
 });
 
 globalStyle('::-webkit-scrollbar-thumb:hover', {
-  background: vars.colors.primaryActive,
-});
-
-globalStyle('::-webkit-scrollbar-thumb:active', {
-  background: vars.colors.active,
+  background:
+    'linear-gradient(90deg, rgba(240,250,255,0.6), rgba(97,166,232,0.9) 42%, rgba(21,76,130,0.98))',
 });

package/src/global/detached-panel.css.ts

@@ -12,15 +12,38 @@ globalStyle('.detached-panel', {
   position: 'fixed',
   display: 'flex',
   flexDirection: 'column',
+  borderRadius: vars.radii.panel,
+  border: '1px solid rgba(97, 166, 232, 0.38)',
+  background: vars.material.glassPanelDark,
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurSm}) saturate(1.14)`,
+  overflow: 'hidden',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
 });
 
 globalStyle('.detached-panel-titlebar', {
-  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
+  boxSizing: 'border-box',
+  minHeight: '32px',
+  padding: `0 ${vars.spacing.md}`,
   cursor: 'grab',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
+  gap: vars.spacing.sm,
   userSelect: 'none',
+  background: vars.material.glossyBar,
+  borderBottom: '1px solid rgba(5, 18, 32, 0.85)',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(255,255,255,0.08)',
+  color: '#F4FAFF',
+  fontFamily: vars.typography.fontFamily,
+  fontWeight: 700,
+  fontSize: '12px',
+  textShadow: '0 1px 1px rgba(0,0,0,0.65)',
 });
 
 globalStyle('.detached-panel-titlebar:active', {
@@ -28,7 +51,7 @@ globalStyle('.detached-panel-titlebar:active', {
 });
 
 globalStyle('.detached-panel-content', {
-  background: vars.colors.backgroundTranslucent,
+  background: 'transparent',
   flex: 1,
   overflow: 'auto',
   display: 'flex',
@@ -43,13 +66,13 @@ globalStyle('.accordion-drag-ghost', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  background: vars.colors.backgroundTranslucent,
-  border: `2px dotted ${vars.colors.accent}`,
-  borderRadius: vars.borders.radius,
-  color: vars.colors.primary,
+  background: vars.material.glassPanelDark,
+  border: '2px dotted rgba(230, 69, 52, 0.8)',
+  borderRadius: vars.radii.panel,
+  color: vars.colors.text,
   fontFamily: vars.typography.fontFamily,
-  backdropFilter: `blur(${vars.spacing.sm})`,
-  boxShadow: `0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px ${vars.colors.accent}`,
+  backdropFilter: `blur(${vars.effects.blurSm})`,
+  boxShadow: `0 8px 24px rgba(0, 0, 0, 0.5), ${vars.effects.glowDanger}`,
   position: 'fixed',
   zIndex: 9999,
   pointerEvents: 'none',

package/src/global/editor-base.css.ts

@@ -1,7 +1,9 @@
 import { globalStyle } from '@vanilla-extract/css';
 import { vars } from '../theme.css';
 
-globalStyle('button', {
+// :where() keeps this shadow-DOM reset at zero specificity so consuming
+// apps' own button rules (and universal box-sizing rules) still win.
+globalStyle(':where(button)', {
   all: 'unset',
 });
 
@@ -25,6 +27,7 @@ globalStyle('#zylem-editor-toggle', {
   cursor: 'grab',
   zIndex: 1,
   pointerEvents: 'auto',
+  filter: 'drop-shadow(0 0 10px rgba(97, 166, 232, 0.35))',
 });
 
 globalStyle('.zylem-exo-2', {
@@ -42,12 +45,12 @@ globalStyle('.scrollable-y', {
 
 globalStyle('.scroll-thin', {
   scrollbarWidth: 'thin',
-  scrollbarColor: `${vars.colors.primary} transparent`,
+  scrollbarColor: 'rgba(97,166,232,0.55) rgba(10,20,30,0.5)',
 });
 
 globalStyle('.scroll-thin::-webkit-scrollbar', {
-  width: '3px',
-  height: '3px',
+  width: '6px',
+  height: '6px',
 });
 
 globalStyle('.scroll-thin::-webkit-scrollbar-track', {
@@ -55,88 +58,78 @@ globalStyle('.scroll-thin::-webkit-scrollbar-track', {
 });
 
 globalStyle('.scroll-thin::-webkit-scrollbar-thumb', {
-  backgroundColor: vars.colors.primary,
-  borderRadius: `calc(${vars.borders.radius} / 4)`,
+  borderRadius: '999px',
+  background:
+    'linear-gradient(90deg, rgba(220,242,255,0.4), rgba(97,166,232,0.65) 42%, rgba(19,62,102,0.9))',
 });
 
 globalStyle('.scroll-thin::-webkit-scrollbar-thumb:hover', {
-  backgroundColor: vars.colors.primaryActive,
+  background:
+    'linear-gradient(90deg, rgba(240,250,255,0.6), rgba(97,166,232,0.9) 42%, rgba(21,76,130,0.98))',
 });
 
-globalStyle('.zylem-button', {
-  background: 'none',
-  color: vars.colors.primary,
-  border: `${vars.borders.width} solid ${vars.colors.primary}`,
-  borderRadius: vars.borders.radius,
-  fontFamily: vars.typography.fontFamily,
-  cursor: 'pointer',
-  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
-  fontSize: vars.typography.fontSize,
-  transition: 'background-color 0.2s ease, color 0.2s ease',
-});
-
-globalStyle('.zylem-button:hover', {
-  background: vars.colors.primary,
-  color: vars.colors.backgroundTranslucent,
-});
-
-globalStyle('.zylem-button:active', {
-  background: vars.colors.active,
-  color: vars.colors.backgroundTranslucent,
+// Icon default for toolbar/editor icons.
+globalStyle('.zylem-icon', {
+  width: '18px',
+  height: '18px',
+  stroke: 'currentColor',
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.55))',
 });
 
+/**
+ * Floating panel chrome (editor main panel). Glass window with a glossy
+ * molded title bar.
+ */
 globalStyle('.floating-panel', {
-  background: vars.colors.backgroundTranslucent,
-  border: `${vars.borders.width} solid ${vars.colors.primary}`,
-  borderRadius: vars.borders.radius,
-  boxShadow: `0 ${vars.spacing.sm} 32px rgba(0, 0, 0, 0.4)`,
-  backdropFilter: `blur(${vars.spacing.sm})`,
+  borderRadius: vars.radii.window,
+  border: '1px solid rgba(146, 205, 255, 0.54)',
+  background: vars.material.glassPanelDark,
+  boxShadow: vars.effects.shadowPanel,
+  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+  overflow: 'hidden',
   pointerEvents: 'auto',
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
 });
 
 globalStyle('.floating-panel-titlebar', {
-  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
-  background: vars.colors.accent,
-  border: `1px solid ${vars.colors.background}`,
-  borderRadius: `calc(${vars.borders.radius} - 1px) calc(${vars.borders.radius} - 1px) 0 0`,
+  minHeight: '34px',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  padding: `0 ${vars.spacing.md}`,
+  background: vars.material.glossyBar,
+  borderBottom: '1px solid rgba(5, 18, 32, 0.85)',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(255,255,255,0.08)',
   fontFamily: vars.typography.fontFamily,
-  fontWeight: 600,
-  transition: 'background-color 0.15s ease',
+  fontWeight: 700,
+  cursor: 'grab',
+  userSelect: 'none',
+  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.floating-panel-titlebar:hover', {
-  background: vars.colors.accentHover,
+  filter: 'brightness(1.08)',
 });
 
 globalStyle('.floating-panel-titlebar:active', {
-  background: vars.colors.accentActive,
+  filter: 'brightness(0.95)',
   cursor: 'grabbing',
 });
 
 globalStyle('.floating-panel-title', {
-  fontSize: vars.typography.fontSize,
-  color: vars.colors.background,
-  textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)',
-});
-
-globalStyle('.floating-panel-button', {
-  all: 'unset',
-  cursor: 'pointer',
-  padding: '2px 6px',
-  fontSize: '10px',
-  lineHeight: 1,
-  color: vars.colors.background,
-  borderRadius: `calc(${vars.borders.radius} / 3)`,
-  transition: 'background-color 0.15s ease',
+  fontSize: '13px',
+  letterSpacing: '0.02em',
+  color: '#F4FAFF',
+  textShadow: '0 1px 1px rgba(0,0,0,0.65)',
 });
 
-globalStyle('.floating-panel-button:hover', {
-  background: 'rgba(0, 0, 0, 0.2)',
-});
-
-globalStyle('.floating-panel-button:active', {
-  background: 'rgba(0, 0, 0, 0.3)',
-});
+// `.floating-panel-button` styles live in WindowControls.css.ts, shared
+// with `.zylem-window-control`.
 
 globalStyle('.floating-panel-content', {
   background: 'transparent',
@@ -145,53 +138,7 @@ globalStyle('.floating-panel-content', {
 globalStyle('.floating-panel-controls', {
   display: 'flex',
   alignItems: 'center',
-  gap: vars.spacing.xs,
-});
-
-globalStyle('.zylem-property-list', {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: vars.spacing.xs,
-  padding: vars.spacing.sm,
-  background: vars.colors.consoleBackground,
-  borderRadius: `calc(${vars.borders.radius} / 2)`,
-});
-
-globalStyle('.zylem-property-row', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
-  borderBottom: `1px solid ${vars.colors.border}`,
-});
-
-globalStyle('.zylem-property-row:last-child', {
-  borderBottom: 'none',
-});
-
-globalStyle('.zylem-property-label', {
-  color: vars.colors.textSecondary,
-  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
-  fontFamily: vars.typography.fontFamily,
-});
-
-globalStyle('.zylem-property-value', {
-  color: vars.colors.primary,
-  fontSize: vars.typography.fontSize,
-  fontFamily: vars.typography.fontFamily,
-  fontWeight: 500,
-});
-
-globalStyle('.zylem-property-value--clickable', {
-  cursor: 'pointer',
-  textDecoration: 'underline',
-  textDecorationStyle: 'dotted',
-  textUnderlineOffset: '2px',
-});
-
-globalStyle('.zylem-property-value--clickable:hover', {
-  textDecorationStyle: 'solid',
-  color: vars.colors.active,
+  gap: '7px',
 });
 
 globalStyle('.zylem-section', {
@@ -200,46 +147,74 @@ globalStyle('.zylem-section', {
 
 globalStyle('.zylem-section-title', {
   margin: `0 0 ${vars.spacing.sm} 0`,
-  fontSize: vars.typography.fontSize,
+  fontSize: '11px',
   fontFamily: vars.typography.fontFamily,
   color: vars.colors.textSecondary,
-  fontWeight: 600,
+  fontWeight: 700,
+  letterSpacing: '0.09em',
+  textTransform: 'uppercase',
 });
 
+/** Entity grid: glossy glass icon tiles. Type names use portaled `.zylem-tooltip`. */
 globalStyle('.entity-grid', {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(40px, 1fr))',
   gap: vars.spacing.xs,
 });
 
-globalStyle('.entity-grid-item', {
+/** Tooltip/trigger wrappers must fill the cell so the icon button keeps a square. */
+globalStyle('.entity-grid > *', {
+  display: 'flex',
+  minWidth: 0,
   aspectRatio: '1',
+});
+
+globalStyle('.entity-grid-item', {
+  position: 'relative',
+  flex: 1,
+  width: '100%',
+  height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  background: vars.colors.consoleBackground,
-  border: `1px solid ${vars.colors.border}`,
-  borderRadius: `calc(${vars.borders.radius} / 2)`,
+  background: vars.material.buttonGlass,
+  border: '1px solid rgba(150, 210, 255, 0.5)',
+  borderRadius: vars.radii.control,
+  boxShadow: vars.effects.shadowButton,
   cursor: 'pointer',
-  transition: 'background 0.15s, border-color 0.15s, transform 0.1s',
+  color: vars.colors.textSecondary,
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}, filter ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.entity-grid-item:hover', {
-  background: vars.colors.accent,
-  borderColor: vars.colors.primary,
-  transform: 'scale(1.05)',
+  background: vars.material.buttonGlassHover,
+  borderColor: 'rgba(150, 210, 255, 0.75)',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.glowPrimary}`,
+  transform: 'translateY(-1px)',
+  color: '#F4FAFF',
 });
 
 globalStyle('.entity-grid-item:active', {
-  transform: 'scale(0.95)',
+  transform: 'translateY(1px)',
+  filter: 'brightness(0.92)',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.55), inset 0 2px 3px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.28)',
+});
+
+globalStyle('.entity-grid-item:focus-visible', {
+  outline: 'none',
+  boxShadow: `${vars.effects.shadowButton}, ${vars.effects.focusRing}`,
 });
 
 globalStyle('.entity-icon', {
   width: '20px',
   height: '20px',
-  color: vars.colors.textSecondary,
+  color: 'currentColor',
+  position: 'relative',
+  zIndex: 1,
+  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.55))',
 });
 
 globalStyle('.entity-grid-item:hover .entity-icon', {
-  color: vars.colors.background,
+  color: '#F4FAFF',
 });

package/src/global/entities.css.ts

@@ -9,7 +9,9 @@ globalStyle('.entities-list', {
   overflowX: 'hidden',
 });
 
-globalStyle('ul', {
+// :where() keeps this shadow-DOM reset at zero specificity so consuming
+// apps' own list rules still win.
+globalStyle(':where(ul)', {
   all: 'unset',
 });
 
@@ -18,29 +20,31 @@ globalStyle('.entity-item-wrapper', {
   cursor: 'pointer',
 });
 
-globalStyle('.entity-item-wrapper.hovered .entity-item', {
-  backgroundColor: vars.colors.successHover,
-  color: vars.colors.primary,
-});
-
-globalStyle('.entity-item-wrapper:active .entity-item', {
-  backgroundColor: vars.colors.active,
-  color: vars.colors.backgroundTranslucent,
-});
-
 globalStyle('.entity-item', {
   display: 'grid',
   gap: vars.spacing.sm,
   gridTemplateColumns: '1fr 1fr 1fr',
-  border: `${vars.borders.width} outset ${vars.colors.successHover}`,
+  border: '1px solid rgba(97, 166, 232, 0.32)',
+  borderRadius: vars.radii.card,
+  background: vars.material.glassPanelDark,
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.25)',
   padding: vars.spacing.md,
   margin: `${vars.spacing.md} 0`,
   fontWeight: 600,
-  transition: 'background-color 200ms cubic-bezier(0.075, 0.82, 0.165, 1)',
+  color: vars.colors.text,
+  transition: `background ${vars.motion.normal} ${vars.motion.easeOut}, border-color ${vars.motion.normal} ${vars.motion.easeOut}, box-shadow ${vars.motion.normal} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.entity-item-wrapper.hovered .entity-item, .entity-item.hovered', {
+  borderColor: 'rgba(150, 210, 255, 0.6)',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.12), ${vars.effects.glowPrimary}`,
+  color: '#F4FAFF',
 });
 
-globalStyle('.entity-item.hovered', {
-  backgroundColor: vars.colors.activeHover,
+globalStyle('.entity-item-wrapper:active .entity-item', {
+  borderColor: 'rgba(20, 255, 60, 0.6)',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.12), ${vars.effects.glowActive}`,
 });
 
 globalStyle('.entity-info-item', {

package/src/global/hyperglass-base.css.ts

@@ -0,0 +1,166 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+/**
+ * HyperGlass foundation styles: app root background treatment, visible
+ * Aqua-inspired glass scrollbars, shared focus rings, and a light CodePen-
+ * inspired specular sheen on glossy controls. Component-level glass
+ * treatments live in each component's recipe; this file covers page-level
+ * chrome plus shared lighting primitives.
+ */
+
+// Root surface: dark navy with a soft radial glow, angled light wash, and a
+// faint blueprint grid.
+globalStyle('.zylem-hyperglass-root', {
+  minHeight: '100vh',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  backgroundColor: vars.colors.background,
+  backgroundImage: `
+    radial-gradient(circle at 30% 0%, rgba(97, 166, 232, 0.18), transparent 32%),
+    linear-gradient(-75deg, rgba(255, 255, 255, 0) 0%, rgba(97, 166, 232, 0.07) 42%, rgba(255, 255, 255, 0) 68%),
+    linear-gradient(rgba(97, 166, 232, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(97, 166, 232, 0.045) 1px, transparent 1px)
+  `,
+  backgroundSize: '100% 100%, 100% 100%, 24px 24px, 24px 24px',
+});
+
+// Visible focus ring on any keyboard-focused interactive element.
+globalStyle(
+  '.zylem-hyperglass-root :focus-visible, .zylem-focus-ring:focus-visible',
+  {
+    outline: 'none',
+    boxShadow: vars.effects.focusRing,
+  },
+);
+
+/**
+ * Specular sheen on glossy interactive hosts — a soft diagonal band that
+ * nudges on hover and shifts toward the top on press (CodePen glass lighting,
+ * dialed down for HyperGlass). Uses ::before so label/icon content paints above.
+ * Applied on the control classes themselves (not under `.zylem-hyperglass-root`)
+ * so portaled surfaces like Dialog keep the same look.
+ * Pseudo selectors are listed per-host (comma lists don't inherit a trailing ::before).
+ */
+// Absolute-positioned hosts (e.g. `.zylem-console-clear`) already form a
+// containing block for the sheen — don't override them to `relative` or they
+// stretch in flex parents. `.entity-grid-item` already sets `relative` in
+// editor-base.
+globalStyle('.zylem-button:not(.zylem-console-clear), .zylem-toolbar-btn', {
+  position: 'relative',
+});
+
+globalStyle(
+  '.zylem-button::before, .zylem-toolbar-btn::before, .entity-grid-item::before',
+  {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 'inherit',
+    pointerEvents: 'none',
+    background: `linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.42) 40%,
+    rgba(255, 255, 255, 0.42) 50%,
+    rgba(255, 255, 255, 0) 55%
+  )`,
+    backgroundSize: '200% 200%',
+    backgroundPosition: '0% 50%',
+    backgroundRepeat: 'no-repeat',
+    mixBlendMode: 'screen',
+    opacity: 0.4,
+    transition: `background-position ${vars.motion.normal} ${vars.motion.easeOut}, opacity ${vars.motion.fast} ${vars.motion.easeOut}`,
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        transition: 'none',
+        backgroundPosition: '0% 50%',
+      },
+    },
+  },
+);
+
+globalStyle(
+  '.zylem-button:hover:not([disabled])::before, .zylem-toolbar-btn:hover:not([disabled])::before, .entity-grid-item:hover::before',
+  {
+    backgroundPosition: '25% 50%',
+    opacity: 0.5,
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        backgroundPosition: '0% 50%',
+      },
+    },
+  },
+);
+
+globalStyle(
+  '.zylem-button:active:not([disabled])::before, .zylem-toolbar-btn:active:not([disabled])::before, .entity-grid-item:active::before',
+  {
+    backgroundPosition: '50% 15%',
+    opacity: 0.58,
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        backgroundPosition: '0% 50%',
+      },
+    },
+  },
+);
+
+/**
+ * Glass scrollbars — apply `.zylem-scroll` (or rely on the root cascade for
+ * `.zylem-hyperglass-root`) to get the visible Aqua-style rail.
+ */
+const scrollHosts = '.zylem-scroll, .zylem-hyperglass-root';
+
+globalStyle(scrollHosts, {
+  scrollbarColor: 'rgba(97,166,232,0.55) rgba(10,20,30,0.5)',
+  scrollbarWidth: 'thin',
+});
+
+globalStyle(
+  '.zylem-scroll::-webkit-scrollbar, .zylem-hyperglass-root ::-webkit-scrollbar',
+  {
+    width: '13px',
+    height: '13px',
+  },
+);
+
+globalStyle(
+  '.zylem-scroll::-webkit-scrollbar-track, .zylem-hyperglass-root ::-webkit-scrollbar-track',
+  {
+    borderRadius: '999px',
+    background:
+      'linear-gradient(90deg, rgba(0,0,0,0.32), rgba(97,166,232,0.11), rgba(255,255,255,0.045))',
+    border: '1px solid rgba(97,166,232,0.16)',
+  },
+);
+
+globalStyle(
+  '.zylem-scroll::-webkit-scrollbar-thumb, .zylem-hyperglass-root ::-webkit-scrollbar-thumb',
+  {
+    borderRadius: '999px',
+    border: '2px solid rgba(5, 16, 28, 0.82)',
+    background:
+      'linear-gradient(90deg, rgba(220,242,255,0.48), rgba(97,166,232,0.72) 42%, rgba(19,62,102,0.92))',
+    boxShadow:
+      'inset 1px 0 0 rgba(255,255,255,0.42), inset -1px 0 0 rgba(0,0,0,0.34)',
+  },
+);
+
+globalStyle(
+  '.zylem-scroll::-webkit-scrollbar-thumb:hover, .zylem-hyperglass-root ::-webkit-scrollbar-thumb:hover',
+  {
+    background:
+      'linear-gradient(90deg, rgba(240,250,255,0.64), rgba(97,166,232,0.92) 42%, rgba(21,76,130,0.98))',
+  },
+);
+
+// Opaque fallback when backdrop-filter isn't available: glass panels lean on
+// blur for legibility, so give them a solid surface instead.
+globalStyle('.zylem-glass', {
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      backgroundColor: vars.colors.surface,
+    },
+  },
+});

package/src/global/menu.css.ts

@@ -6,8 +6,8 @@ globalStyle('.zylem-menu', {
   flexDirection: 'column',
   height: '100%',
   width: '100%',
-  background: vars.colors.backgroundTranslucent,
-  borderRadius: vars.borders.radius,
+  background: 'transparent',
+  borderRadius: vars.radii.panel,
   boxSizing: 'border-box',
   overflowY: 'auto',
   overflowX: 'hidden',
@@ -24,7 +24,10 @@ globalStyle('.zylem-menu-header', {
   alignItems: 'center',
   justifyContent: 'space-between',
   gap: vars.spacing.sm,
-  borderBottom: `${vars.borders.width} solid ${vars.colors.primary}`,
+  borderBottom: '1px solid rgba(97, 166, 232, 0.28)',
+  background:
+    'linear-gradient(180deg, rgba(130, 180, 230, 0.14), rgba(30, 60, 95, 0.18) 50%, rgba(8, 22, 38, 0.24))',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.15)',
 });
 
 globalStyle('.zylem-collapse-button', {
@@ -33,6 +36,8 @@ globalStyle('.zylem-collapse-button', {
   fontSize: '12px',
   lineHeight: 1,
   marginRight: vars.spacing.sm,
+  color: vars.colors.primary,
+  cursor: 'pointer',
 });
 
 globalStyle('.zylem-menu h3, .zylem-menu h4', {