@zylem/ui 0.1.0 → 0.1.1

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',
-});
-
-globalStyle('.floating-panel-button:hover', {
-  background: 'rgba(0, 0, 0, 0.2)',
+  fontSize: '13px',
+  letterSpacing: '0.02em',
+  color: '#F4FAFF',
+  textShadow: '0 1px 1px rgba(0,0,0,0.65)',
 });
 
-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,12 +147,15 @@ 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: index-card jewel tiles. */
 globalStyle('.entity-grid', {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(40px, 1fr))',
@@ -217,21 +167,24 @@ globalStyle('.entity-grid-item', {
   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.glassPanelDark,
+  border: '1px solid rgba(97, 166, 232, 0.32)',
+  borderRadius: vars.radii.control,
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.3)',
   cursor: 'pointer',
-  transition: 'background 0.15s, border-color 0.15s, transform 0.1s',
+  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}`,
 });
 
 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.6)',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.3), ${vars.effects.glowPrimary}`,
+  transform: 'translateY(-1px)',
 });
 
 globalStyle('.entity-grid-item:active', {
-  transform: 'scale(0.95)',
+  transform: 'translateY(1px)',
 });
 
 globalStyle('.entity-icon', {
@@ -241,5 +194,5 @@ globalStyle('.entity-icon', {
 });
 
 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,91 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+/**
+ * HyperGlass foundation styles: app root background treatment, visible
+ * Aqua-inspired glass scrollbars, and shared focus rings. Component-level
+ * glass treatments live in each component's recipe; this file only covers
+ * page-level chrome.
+ */
+
+// Root surface: dark navy with a soft radial glow 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(rgba(97, 166, 232, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(97, 166, 232, 0.045) 1px, transparent 1px)
+  `,
+  backgroundSize: '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,
+  },
+);
+
+/**
+ * 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', {

package/src/sprinkles.css.ts

@@ -38,6 +38,11 @@ const radiusScale = {
   lg: '16px',
   xl: '20px',
   pill: '999px',
+  window: vars.radii.window,
+  panel: vars.radii.panel,
+  button: vars.radii.button,
+  control: vars.radii.control,
+  card: vars.radii.card,
 } as const;
 
 const responsive = defineProperties({
@@ -120,6 +125,23 @@ const color = defineProperties({
 const visual = defineProperties({
   properties: {
     borderRadius: radiusScale,
+    boxShadow: {
+      none: 'none',
+      panel: vars.effects.shadowPanel,
+      button: vars.effects.shadowButton,
+      inset: vars.effects.shadowInset,
+      glowPrimary: vars.effects.glowPrimary,
+      glowActive: vars.effects.glowActive,
+      glowDanger: vars.effects.glowDanger,
+      focusRing: vars.effects.focusRing,
+    },
+    transitionDuration: {
+      fast: vars.motion.fast,
+      normal: vars.motion.normal,
+    },
+    transitionTimingFunction: {
+      easeOut: vars.motion.easeOut,
+    },
     borderWidth: {
       none: '0',
       hairline: '1px',

package/src/styles.ts

@@ -8,13 +8,41 @@
 import './fonts.css';
 import './theme.css';
 import './global/logo.css';
+import './global/hyperglass-base.css';
 import './global/common.css';
-import './global/sidebar.css';
 import './global/editor-base.css';
-import './global/toolbar.css';
-import './global/console.css';
 import './global/accordion.css';
 import './global/menu.css';
 import './global/entities.css';
 import './global/detached-panel.css';
-import './global/checkbox.css';
+
+// Component styles (HyperGlass). Each file registers the global
+// `.zylem-*` classes its component renders, so the raw CSS bundle carries
+// the full component look without consumers compiling vanilla-extract.
+import './components/shared/field.css';
+import './components/Button/Button.css';
+import './components/ToolbarButton/ToolbarButton.css';
+import './components/TextField/TextField.css';
+import './components/NumberField/NumberField.css';
+import './components/Select/Select.css';
+import './components/Checkbox/Checkbox.css';
+import './components/Switch/Switch.css';
+import './components/Slider/Slider.css';
+import './components/Tabs/Tabs.css';
+import './components/Tooltip/Tooltip.css';
+import './components/DropdownMenu/DropdownMenu.css';
+import './components/Dialog/Dialog.css';
+import './components/Progress/Progress.css';
+import './components/Badge/Badge.css';
+import './components/Separator/Separator.css';
+import './components/WindowControls/WindowControls.css';
+import './components/TitleBar/TitleBar.css';
+import './components/Panel/Panel.css';
+import './components/Toolbar/Toolbar.css';
+import './components/Property/Property.css';
+import './components/Console/Console.css';
+import './components/Sidebar/Sidebar.css';
+import './components/Card/Card.css';
+import './components/SearchInput/SearchInput.css';
+import './components/EmptyState/EmptyState.css';
+import './components/Kbd/Kbd.css';