@zylem/ui 0.1.0 → 0.1.1

package/src/theme.css.ts

@@ -1,6 +1,6 @@
 import {
-  createGlobalTheme,
-  createGlobalThemeContract,
+	createGlobalTheme,
+	createGlobalThemeContract,
 } from '@vanilla-extract/css';
 
 /**
@@ -12,54 +12,105 @@ import {
  * generated CSS variables keep their legacy `--zylem-*` identifiers.
  */
 const tokens = {
-  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',
-  },
+	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)',
+	},
 } as const;
 
 /**
@@ -69,54 +120,92 @@ const tokens = {
  * identifiers that the rest of the codebase already consumes.
  */
 const varNames = {
-  colors: {
-    primary: 'zylem-color-primary',
-    primaryHover: 'zylem-color-primary-hover',
-    primaryActive: 'zylem-color-primary-active',
-
-    accent: 'zylem-color-accent',
-    accentHover: 'zylem-color-accent-hover',
-    accentActive: 'zylem-color-accent-active',
-
-    background: 'zylem-color-background',
-    backgroundTranslucent: 'zylem-color-background-translucent',
-    surface: 'zylem-color-surface',
-    surfaceHover: 'zylem-color-surface-hover',
-    border: 'zylem-color-border',
-
-    active: 'zylem-color-active',
-    activeHover: 'zylem-color-active-hover',
-    successHover: 'zylem-color-success-hover',
-
-    text: 'zylem-color-text',
-    textSecondary: 'zylem-color-text-secondary',
-
-    consoleBackground: 'zylem-color-console-background',
-    consoleText: 'zylem-color-console-text',
-  },
-  spacing: {
-    xxs: 'zylem-spacing-xxs',
-    xs: 'zylem-spacing-xs',
-    sm: 'zylem-spacing-sm',
-    md: 'zylem-spacing-md',
-    lg: 'zylem-spacing-lg',
-    xl: 'zylem-spacing-xl',
-    xxl: 'zylem-spacing-xxl',
-    xxxl: 'zylem-spacing-xxxl',
-  },
-  sizes: {
-    icon: 'zylem-size-icon',
-    iconSm: 'zylem-size-icon-sm',
-    iconLg: 'zylem-size-icon-lg',
-  },
-  typography: {
-    fontFamily: 'zylem-font-family',
-    fontSize: 'zylem-font-size',
-  },
-  borders: {
-    radius: 'zylem-radius',
-    width: 'zylem-border',
-  },
+	colors: {
+		primary: 'zylem-color-primary',
+		primaryHover: 'zylem-color-primary-hover',
+		primaryActive: 'zylem-color-primary-active',
+
+		accent: 'zylem-color-accent',
+		accentHover: 'zylem-color-accent-hover',
+		accentActive: 'zylem-color-accent-active',
+
+		background: 'zylem-color-background',
+		backgroundTranslucent: 'zylem-color-background-translucent',
+		surface: 'zylem-color-surface',
+		surfaceHover: 'zylem-color-surface-hover',
+		border: 'zylem-color-border',
+
+		active: 'zylem-color-active',
+		activeHover: 'zylem-color-active-hover',
+		successHover: 'zylem-color-success-hover',
+
+		text: 'zylem-color-text',
+		textSecondary: 'zylem-color-text-secondary',
+
+		consoleBackground: 'zylem-color-console-background',
+		consoleText: 'zylem-color-console-text',
+	},
+	spacing: {
+		xxs: 'zylem-spacing-xxs',
+		xs: 'zylem-spacing-xs',
+		sm: 'zylem-spacing-sm',
+		md: 'zylem-spacing-md',
+		lg: 'zylem-spacing-lg',
+		xl: 'zylem-spacing-xl',
+		xxl: 'zylem-spacing-xxl',
+		xxxl: 'zylem-spacing-xxxl',
+	},
+	sizes: {
+		icon: 'zylem-size-icon',
+		iconSm: 'zylem-size-icon-sm',
+		iconLg: 'zylem-size-icon-lg',
+	},
+	typography: {
+		fontFamily: 'zylem-font-family',
+		fontSize: 'zylem-font-size',
+	},
+	borders: {
+		radius: 'zylem-radius',
+		width: 'zylem-border',
+	},
+	material: {
+		glassPanel: 'zylem-material-glass-panel',
+		glassPanelDark: 'zylem-material-glass-panel-dark',
+		glossyBar: 'zylem-material-glossy-bar',
+		buttonGlass: 'zylem-material-button-glass',
+		buttonGlassHover: 'zylem-material-button-glass-hover',
+		buttonGlassActive: 'zylem-material-button-glass-active',
+		buttonGlassDanger: 'zylem-material-button-glass-danger',
+		fieldGlass: 'zylem-material-field-glass',
+		panelHeaderGloss: 'zylem-material-panel-header-gloss',
+	},
+	effects: {
+		blurSm: 'zylem-effect-blur-sm',
+		blurMd: 'zylem-effect-blur-md',
+		blurLg: 'zylem-effect-blur-lg',
+
+		shadowPanel: 'zylem-effect-shadow-panel',
+		shadowButton: 'zylem-effect-shadow-button',
+		shadowInset: 'zylem-effect-shadow-inset',
+
+		glowPrimary: 'zylem-effect-glow-primary',
+		glowActive: 'zylem-effect-glow-active',
+		glowDanger: 'zylem-effect-glow-danger',
+
+		focusRing: 'zylem-effect-focus-ring',
+	},
+	radii: {
+		window: 'zylem-radius-window',
+		panel: 'zylem-radius-panel',
+		button: 'zylem-radius-button',
+		control: 'zylem-radius-control',
+		card: 'zylem-radius-card',
+	},
+	motion: {
+		fast: 'zylem-motion-fast',
+		normal: 'zylem-motion-normal',
+		easeOut: 'zylem-motion-ease-out',
+	},
 } as const;
 
 /**
@@ -126,7 +215,9 @@ const varNames = {
  */
 export const vars = createGlobalThemeContract(varNames);
 
-createGlobalTheme(':root', vars, tokens);
+// `:host` is included so the tokens also resolve inside the editor web
+// component's shadow DOM, where `:root` doesn't match (see logo.css.ts).
+createGlobalTheme(':root, :host', vars, tokens);
 
 /** Token values as a plain readonly object, exported for downstream tooling. */
 export const tokenValues = tokens;

package/dist/chunk-3R5KFBTB.js

@@ -1 +0,0 @@
-var c={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"}},a={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)"}};export{c as a,a as b};

package/src/components/Button.tsx

@@ -1,19 +0,0 @@
-import type { JSX } from 'solid-js';
-import { splitProps } from 'solid-js';
-
-export type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-
-/**
- * High-level wrapper around the global `.zylem-button` style. First component
- * of the @zylem/ui component library; future components (Toolbar,
- * Accordion, Panel, ...) should follow this same pattern: a thin Solid
- * component over the token-driven global styles.
- */
-export function Button(props: ButtonProps) {
-  const [local, rest] = splitProps(props, ['class', 'children']);
-  return (
-    <button type="button" class={local.class ? `zylem-button ${local.class}` : 'zylem-button'} {...rest}>
-      {local.children}
-    </button>
-  );
-}

package/src/global/console.css.ts

@@ -1,43 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css';
-import { vars } from '../theme.css';
-
-globalStyle('.zylem-console-container', {
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  minHeight: 0,
-  padding: vars.spacing.sm,
-  height: '100%',
-});
-
-globalStyle('.zylem-console-wrapper', {
-  position: 'relative',
-  display: 'flex',
-  flex: 1,
-  minHeight: 0,
-});
-
-globalStyle('.zylem-console', {
-  width: '100%',
-  height: '100%',
-  flex: 1,
-  resize: 'none',
-  background: vars.colors.consoleBackground,
-  color: vars.colors.primary,
-  fontSize: vars.typography.fontSize,
-  border: `${vars.borders.width} solid ${vars.colors.primary}`,
-  borderRadius: vars.borders.radius,
-  padding: vars.spacing.md,
-  boxSizing: 'border-box',
-  outline: 'none',
-  fontFamily: "'Courier New', monospace",
-});
-
-globalStyle('.zylem-console-clear', {
-  position: 'absolute',
-  top: vars.spacing.sm,
-  right: vars.spacing.sm,
-  padding: `4px ${vars.spacing.md}`,
-  fontSize: '12px',
-  zIndex: 1,
-});

package/src/global/sidebar.css.ts

@@ -1,18 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css';
-import { vars } from '../theme.css';
-
-globalStyle('.sidebar', {
-  background: vars.colors.surface,
-  borderRight: `1px solid ${vars.colors.border}`,
-});
-
-globalStyle('.sidebar-item:hover', {
-  background: vars.colors.surfaceHover,
-});
-
-globalStyle('.sidebar-item.is-active', {
-  background: vars.colors.primaryActive,
-  color: 'white',
-  fontWeight: 600,
-  boxShadow: 'inset 0 0 8px rgba(97, 166, 232, 0.4)',
-});

package/src/global/toolbar.css.ts

@@ -1,62 +0,0 @@
-import { globalStyle, keyframes } from '@vanilla-extract/css';
-import { vars } from '../theme.css';
-
-const tooltipEnter = keyframes({
-  from: { opacity: 0, transform: 'translateY(4px)' },
-  to: { opacity: 1, transform: 'translateY(0)' },
-});
-
-globalStyle('.zylem-toolbar', {
-  display: 'flex',
-  position: 'sticky',
-  top: 0,
-  gap: vars.spacing.md,
-  padding: vars.spacing.md,
-  zIndex: 1,
-});
-
-globalStyle('.zylem-toolbar.separator', {
-  borderBottom: `${vars.borders.width} solid ${vars.colors.primary}`,
-});
-
-globalStyle('.zylem-toolbar-btn', {
-  display: 'flex',
-  alignItems: 'center',
-  padding: vars.spacing.md,
-  cursor: 'pointer',
-});
-
-globalStyle('.zylem-toolbar-btn:hover svg', {
-  stroke: vars.colors.backgroundTranslucent,
-});
-
-globalStyle('.zylem-toolbar-btn.selected', {
-  background: vars.colors.active,
-  borderColor: vars.colors.active,
-});
-
-globalStyle('.zylem-toolbar-btn.selected svg', {
-  stroke: vars.colors.backgroundTranslucent,
-});
-
-globalStyle('.zylem-icon', {
-  width: vars.sizes.icon,
-  height: vars.sizes.icon,
-  stroke: vars.colors.primary,
-});
-
-globalStyle('.zylem-tooltip', {
-  background: vars.colors.backgroundTranslucent,
-  color: vars.colors.primary,
-  padding: `${vars.spacing.sm} ${vars.spacing.md}`,
-  marginTop: vars.spacing.sm,
-  borderRadius: vars.borders.radius,
-  border: `${vars.borders.width} solid ${vars.colors.primary}`,
-  fontSize: vars.typography.fontSize,
-  pointerEvents: 'none',
-  zIndex: 1000,
-});
-
-globalStyle('.zylem-tooltip[data-enter]', {
-  animation: `${tooltipEnter} 0.2s ease-out`,
-});