@zylem/ui 0.9.0 → 0.9.2

package/src/components/Select/Select.tsx

@@ -1,4 +1,5 @@
 import { Select as KSelect } from '@kobalte/core';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
 import { Show } from 'solid-js';
 import { createDismissGuard, useLayer } from '../../layers';
 
@@ -62,7 +63,9 @@ export function Select(props: SelectProps) {
         <KSelect.Value<SelectOption> class="zylem-select-value">
           {(state) => state.selectedOption()?.label}
         </KSelect.Value>
-        <KSelect.Icon class="zylem-select-icon">▼</KSelect.Icon>
+        <KSelect.Icon class="zylem-select-icon">
+          <ChevronDown aria-hidden="true" />
+        </KSelect.Icon>
       </KSelect.Trigger>
       <Show when={layer.mount()} keyed>
         {(mount) => (

package/src/components/Slider/Slider.css.ts

@@ -31,7 +31,7 @@ globalStyle('.zylem-slider-label', {
 globalStyle('.zylem-slider-value', {
   fontSize: `calc(${vars.typography.fontSize} - 2px)`,
   color: vars.colors.primary,
-  fontFamily: vars.typography.fontFamily,
+  fontFamily: vars.typography.fontFamilyMono,
   fontVariantNumeric: 'tabular-nums',
 });
 

package/src/components/SpriteSizePicker/SpriteSizePicker.css.ts

@@ -20,6 +20,7 @@ globalStyle('.zylem-size-picker-presets', {
 
 globalStyle('.zylem-size-picker-presets .zylem-button', {
   minWidth: '40px',
+  fontFamily: vars.typography.fontFamilyMono,
   fontVariantNumeric: 'tabular-nums',
 });
 
@@ -89,6 +90,7 @@ globalStyle('.zylem-size-picker-readout', {
   position: 'absolute',
   right: vars.spacing.sm,
   bottom: vars.spacing.xs,
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: `calc(${vars.typography.fontSize} - 2px)`,
   fontVariantNumeric: 'tabular-nums',
   color: vars.colors.primary,

package/src/components/TimelineLanes/TimelineLanes.css.ts

@@ -100,6 +100,7 @@ globalStyle('.zylem-lanes-tick-label', {
   position: 'absolute',
   left: '4px',
   bottom: '8px',
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '10px',
   fontVariantNumeric: 'tabular-nums',
   whiteSpace: 'nowrap',

package/src/components/TimelineTrack/TimelineTrack.css.ts

@@ -142,16 +142,17 @@ globalStyle('.zylem-timeline-thumb-input', {
 });
 
 // Fixed box so the readout doesn't reflow the track as digits change:
-// wide enough for `59.99s / 120s`, one track-height tall, right-aligned.
+// wide enough for `59.99s / 120s` in the mono face, one track-height tall.
 globalStyle('.zylem-timeline-time', {
   boxSizing: 'border-box',
   flex: 'none',
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  width: '12ch',
+  width: '14ch',
   height: TRACK_HEIGHT,
   lineHeight: TRACK_HEIGHT,
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: `calc(${vars.typography.fontSize} - 1px)`,
   fontWeight: 600,
   fontVariantNumeric: 'tabular-nums',

package/src/components/TransportBar/TransportBar.css.ts

@@ -29,6 +29,7 @@ globalStyle('.zylem-transport-track', {
 globalStyle('.zylem-transport-time', {
   flex: 'none',
   minWidth: '9ch',
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: `calc(${vars.typography.fontSize} - 1px)`,
   fontWeight: 600,
   fontVariantNumeric: 'tabular-nums',
@@ -63,3 +64,7 @@ globalStyle('.zylem-transport-signature', {
   width: '84px',
   flex: 'none',
 });
+
+globalStyle('.zylem-transport-signature .zylem-field', {
+  fontFamily: vars.typography.fontFamilyMono,
+});

package/src/components/WindowControls/WindowControls.css.ts

@@ -1,89 +1,72 @@
 import { globalStyle } from '@vanilla-extract/css';
 import { vars } from '../../theme.css';
 
-/** Soft drop plus a light top rim and a darker lower edge. */
-const jewelDepth =
-  'inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.4)';
-
 globalStyle('.zylem-window-controls', {
-  display: 'flex',
-  alignItems: 'center',
-  flexShrink: 0,
-  gap: '6px',
+	display: 'flex',
+	alignItems: 'center',
+	flexShrink: 0,
+	gap: '6px',
 });
 
 /**
- * Shared glass jewel used for all panel chrome: window controls, floating
+ * Shared ghost control used for panel chrome: window controls, floating
  * panels, and detached panels. `.floating-panel-button` is kept as an alias
  * so existing panel markup shares this single definition.
  *
- * Collapse (and the untyped alias) is blue glass; close is red glass.
+ * Resting controls match the ghost button. Close stays that way until it is
+ * hovered or focused, when it takes the danger color.
  */
 globalStyle('.zylem-window-control, .floating-panel-button', {
-  all: 'unset',
-  boxSizing: 'border-box',
-  position: 'relative',
-  cursor: 'pointer',
-  flexShrink: 0,
-  width: '28px',
-  height: '18px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: '#FFFFFF',
-  borderRadius: '6px',
-  border: '1px solid rgba(214, 234, 255, 0.82)',
-  background:
-    'linear-gradient(180deg, rgba(206, 230, 255, 0.78) 0%, rgba(96, 158, 216, 0.84) 42%, rgba(48, 108, 172, 0.92) 100%)',
-  boxShadow: `${jewelDepth}, 0 0 8px rgba(97, 166, 232, 0.28)`,
-  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
-});
-
-/** Top-edge gloss. Clipped by the button; the icon sits above it. */
-globalStyle('.zylem-window-control::before, .floating-panel-button::before', {
-  content: '""',
-  position: 'absolute',
-  left: '2px',
-  right: '2px',
-  top: '1px',
-  height: '48%',
-  borderRadius: '5px 5px 46% 46%',
-  background:
-    'linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.1) 55%, rgba(255,255,255,0))',
-  pointerEvents: 'none',
+	all: 'unset',
+	boxSizing: 'border-box',
+	position: 'relative',
+	cursor: 'pointer',
+	flexShrink: 0,
+	width: '28px',
+	height: '18px',
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	color: vars.colors.primary,
+	borderRadius: '6px',
+	border: '1px solid rgba(97, 166, 232, 0.35)',
+	background: 'transparent',
+	boxShadow: 'none',
+	transition: `color ${vars.motion.fast} ${vars.motion.easeOut}, transform ${vars.motion.fast} ${vars.motion.easeOut}, background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}, box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-window-control svg, .floating-panel-button svg', {
-  position: 'relative',
-  zIndex: 1,
-  display: 'block',
-  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.4))',
-});
-
-globalStyle('.zylem-window-control--close', {
-  borderColor: 'rgba(255, 198, 188, 0.88)',
-  background:
-    'linear-gradient(180deg, rgba(255, 196, 186, 0.78) 0%, rgba(228, 82, 70, 0.9) 44%, rgba(186, 46, 40, 0.96) 100%)',
-  boxShadow: `${jewelDepth}, 0 0 8px rgba(230, 69, 52, 0.34)`,
+	position: 'relative',
+	zIndex: 1,
+	display: 'block',
 });
 
 globalStyle('.zylem-window-control:hover, .floating-panel-button:hover', {
-  filter: 'brightness(1.12)',
-  transform: 'translateY(-1px)',
+	background: 'rgba(97, 166, 232, 0.12)',
+	boxShadow: vars.effects.glowPrimary,
+	color: vars.colors.primary,
+	transform: 'translateY(-1px)',
 });
 
 globalStyle('.zylem-window-control:active, .floating-panel-button:active', {
-  filter: 'brightness(0.92)',
-  transform: 'translateY(1px)',
+	transform: 'translateY(1px)',
+});
+
+globalStyle('.zylem-window-control:focus-visible, .floating-panel-button:focus-visible', {
+	background: 'rgba(97, 166, 232, 0.12)',
+	boxShadow: `${vars.effects.glowPrimary}, ${vars.effects.focusRing}`,
 });
 
-globalStyle(
-  '.zylem-window-control:focus-visible, .floating-panel-button:focus-visible',
-  {
-    boxShadow: `${jewelDepth}, 0 0 8px rgba(97, 166, 232, 0.28), ${vars.effects.focusRing}`,
-  },
-);
+globalStyle('.zylem-window-control--close:hover', {
+	borderColor: 'rgba(255, 132, 114, 0.78)',
+	background: 'rgba(230, 69, 52, 0.16)',
+	color: '#ffb4a8',
+	boxShadow: vars.effects.glowDanger,
+});
 
 globalStyle('.zylem-window-control--close:focus-visible', {
-  boxShadow: `${jewelDepth}, 0 0 8px rgba(230, 69, 52, 0.34), ${vars.effects.focusRing}`,
+	borderColor: 'rgba(255, 132, 114, 0.78)',
+	background: 'rgba(230, 69, 52, 0.16)',
+	color: '#ffb4a8',
+	boxShadow: `${vars.effects.glowDanger}, ${vars.effects.focusRing}`,
 });

package/src/components/WindowControls/WindowControls.tsx

@@ -17,8 +17,9 @@ export interface WindowControlsProps {
 }
 
 /**
- * Shared glass window controls: blue collapse jewel and red close jewel, used
- * by floating and detached panels. Only controls with a handler are rendered.
+ * Shared ghost window controls, used by floating and detached panels. Close
+ * takes the danger color only while hovered or focused. Only controls with a
+ * handler are rendered.
  */
 export function WindowControls(props: WindowControlsProps) {
   return (

package/src/fonts.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

package/src/global/accordion.css.ts

@@ -107,17 +107,16 @@ globalStyle('.zylem-accordion--stack .accordion-content', {
   overflow: 'visible',
 });
 
-globalStyle('.accordion-trigger::after', {
-  // The empty alternative text keeps the chevron out of the trigger's
-  // accessible name; the first value is for browsers without that syntax.
-  content: ["'\\25BC'", "'\\25BC' / ''"],
-  position: 'relative',
+globalStyle('.accordion-chevron', {
+  width: '16px',
+  height: '16px',
+  flexShrink: 0,
+  stroke: 'currentColor',
   color: vars.colors.textSecondary,
-  fontSize: '10px',
   transition: `transform ${vars.motion.normal} ${vars.motion.easeOut}`,
 });
 
-globalStyle('.accordion-trigger[data-expanded]::after', {
+globalStyle('.accordion-trigger[data-expanded] .accordion-chevron', {
   transform: 'rotate(180deg)',
   color: '#F4FAFF',
 });

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

@@ -37,6 +37,15 @@ globalStyle('.zylem-exo-2', {
   fontStyle: 'normal',
 });
 
+/** Time and units: clocks, beats, dimensions, levels. */
+globalStyle('.zylem-mono', {
+  fontFamily: vars.typography.fontFamilyMono,
+  fontOpticalSizing: 'auto',
+  fontWeight: 400,
+  fontStyle: 'normal',
+  fontVariantNumeric: 'tabular-nums',
+});
+
 globalStyle('.scrollable-y', {
   overflowY: 'scroll',
   overflowX: 'hidden',
@@ -137,7 +146,9 @@ globalStyle('.floating-panel-content', {
 
 globalStyle('.floating-panel-controls', {
   display: 'flex',
+  marginTop: '4px',
   alignItems: 'center',
+  alignSelf: 'flex-start',
   gap: '7px',
 });
 

package/src/sprinkles.css.ts

@@ -149,7 +149,10 @@ const visual = defineProperties({
       bold: '2px',
     },
     borderStyle: ['solid', 'dashed', 'dotted', 'none'],
-    fontFamily: { default: vars.typography.fontFamily },
+    fontFamily: {
+      default: vars.typography.fontFamily,
+      mono: vars.typography.fontFamilyMono,
+    },
     fontSize: { default: vars.typography.fontSize },
     lineHeight: ['1', '1.2', '1.35', '1.45', '1.5'],
     letterSpacing: {

package/src/theme.css.ts

@@ -53,8 +53,13 @@ const tokens = {
 		iconSm: '16px',
 		iconLg: '96px',
 	},
+	/**
+	 * Exo 2 is the interface face. JetBrains Mono is for time and units
+	 * (clocks, beats, dimensions, levels) so digits keep a stable width.
+	 */
 	typography: {
 		fontFamily: "'Exo 2', sans-serif",
+		fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
 		fontSize: '14px',
 	},
 	borders: {
@@ -178,6 +183,7 @@ const varNames = {
 	},
 	typography: {
 		fontFamily: 'zylem-font-family',
+		fontFamilyMono: 'zylem-font-family-mono',
 		fontSize: 'zylem-font-size',
 	},
 	borders: {

package/dist/chunk-V47CGFWX.js

@@ -1 +0,0 @@
-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)"},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)",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};