@zylem/ui 0.1.0

package/src/global/menu.css.ts

@@ -0,0 +1,40 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+globalStyle('.zylem-menu', {
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  background: vars.colors.backgroundTranslucent,
+  borderRadius: vars.borders.radius,
+  boxSizing: 'border-box',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  pointerEvents: 'auto',
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-menu::-webkit-scrollbar', {
+  display: 'none',
+});
+
+globalStyle('.zylem-menu-header', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: vars.spacing.sm,
+  borderBottom: `${vars.borders.width} solid ${vars.colors.primary}`,
+});
+
+globalStyle('.zylem-collapse-button', {
+  flexShrink: 0,
+  padding: vars.spacing.sm,
+  fontSize: '12px',
+  lineHeight: 1,
+  marginRight: vars.spacing.sm,
+});
+
+globalStyle('.zylem-menu h3, .zylem-menu h4', {
+  margin: 0,
+});

package/src/global/sidebar.css.ts

@@ -0,0 +1,18 @@
+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

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

package/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Public TypeScript surface for `@zylem/ui`.
+ *
+ * - `vars` — typed handles to every Zylem design token, resolving to the
+ *   legacy `--zylem-*` CSS custom properties. Use inside `style()`,
+ *   `globalStyle()`, or `sprinkles()` calls.
+ * - `sprinkles` — atomic-utility function generated from the same tokens.
+ * - `breakpoints` / `tokenValues` — documentation/tooling helpers.
+ *
+ * Consumers should also import the CSS bundle once at app entry:
+ * `import '@zylem/ui/styles.css'`.
+ */
+export { vars, tokenValues } from './theme.css';
+export { sprinkles, breakpoints, type Sprinkles } from './sprinkles.css';

package/src/sprinkles.css.ts

@@ -0,0 +1,164 @@
+import {
+  defineProperties,
+  createSprinkles,
+} from '@vanilla-extract/sprinkles';
+import { vars } from './theme.css';
+
+/**
+ * Responsive conditions that mirror the breakpoints used across the
+ * legacy `*.module.css` files. `desktop` is the default; declare narrower
+ * overrides under `tablet` (≤900px) or `mobile` (≤720px).
+ */
+const conditions = {
+  desktop: {},
+  tablet: { '@media': 'screen and (max-width: 900px)' },
+  mobile: { '@media': 'screen and (max-width: 720px)' },
+} as const;
+
+const spacingScale = {
+  ...vars.spacing,
+  none: '0',
+  auto: 'auto',
+} as const;
+
+const sizeScale = {
+  ...vars.spacing,
+  ...vars.sizes,
+  none: '0',
+  auto: 'auto',
+  full: '100%',
+  screen: '100dvh',
+} as const;
+
+const radiusScale = {
+  none: '0',
+  sm: '4px',
+  md: '8px',
+  default: vars.borders.radius,
+  lg: '16px',
+  xl: '20px',
+  pill: '999px',
+} as const;
+
+const responsive = defineProperties({
+  conditions,
+  defaultCondition: 'desktop',
+  properties: {
+    display: [
+      'none',
+      'block',
+      'inline',
+      'inline-block',
+      'flex',
+      'inline-flex',
+      'grid',
+      'inline-grid',
+    ],
+    position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
+    flexWrap: ['wrap', 'nowrap', 'wrap-reverse'],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
+    justifyContent: [
+      'flex-start',
+      'center',
+      'flex-end',
+      'space-between',
+      'space-around',
+      'space-evenly',
+    ],
+    flex: ['1', 'none', 'auto'],
+    textAlign: ['left', 'center', 'right', 'justify'],
+    textTransform: ['none', 'uppercase', 'lowercase', 'capitalize'],
+    fontWeight: ['400', '500', '600', '700', '800'],
+    boxSizing: ['border-box', 'content-box'],
+    overflow: ['hidden', 'auto', 'scroll', 'visible'],
+    overflowX: ['hidden', 'auto', 'scroll', 'visible'],
+    overflowY: ['hidden', 'auto', 'scroll', 'visible'],
+    padding: spacingScale,
+    paddingTop: spacingScale,
+    paddingRight: spacingScale,
+    paddingBottom: spacingScale,
+    paddingLeft: spacingScale,
+    paddingInline: spacingScale,
+    paddingBlock: spacingScale,
+    margin: spacingScale,
+    marginTop: spacingScale,
+    marginRight: spacingScale,
+    marginBottom: spacingScale,
+    marginLeft: spacingScale,
+    marginInline: spacingScale,
+    marginBlock: spacingScale,
+    gap: spacingScale,
+    rowGap: spacingScale,
+    columnGap: spacingScale,
+    width: sizeScale,
+    height: sizeScale,
+    minWidth: sizeScale,
+    minHeight: sizeScale,
+    maxWidth: sizeScale,
+    maxHeight: sizeScale,
+  },
+  shorthands: {
+    px: ['paddingLeft', 'paddingRight'],
+    py: ['paddingTop', 'paddingBottom'],
+    mx: ['marginLeft', 'marginRight'],
+    my: ['marginTop', 'marginBottom'],
+    placeItems: ['alignItems', 'justifyContent'],
+    size: ['width', 'height'],
+  },
+});
+
+const color = defineProperties({
+  properties: {
+    color: vars.colors,
+    background: vars.colors,
+    backgroundColor: vars.colors,
+    borderColor: vars.colors,
+  },
+});
+
+const visual = defineProperties({
+  properties: {
+    borderRadius: radiusScale,
+    borderWidth: {
+      none: '0',
+      hairline: '1px',
+      default: vars.borders.width,
+      bold: '2px',
+    },
+    borderStyle: ['solid', 'dashed', 'dotted', 'none'],
+    fontFamily: { default: vars.typography.fontFamily },
+    fontSize: { default: vars.typography.fontSize },
+    lineHeight: ['1', '1.2', '1.35', '1.45', '1.5'],
+    letterSpacing: {
+      tight: '-0.01em',
+      normal: '0',
+      wide: '0.04em',
+      wider: '0.08em',
+      widest: '0.2em',
+    },
+  },
+});
+
+/**
+ * Atomic-utility function generated from the Zylem token system.
+ *
+ * Usage:
+ * ```ts
+ * import { sprinkles } from '@zylem/ui';
+ *
+ * const card = style([
+ *   sprinkles({ padding: 'lg', borderRadius: 'default', color: 'text' }),
+ * ]);
+ * ```
+ */
+export const sprinkles = createSprinkles(responsive, color, visual);
+
+/** Inferred prop type of the sprinkles function — accept it on components. */
+export type Sprinkles = Parameters<typeof sprinkles>[0];
+
+/** Responsive conditions exposed for documentation/tooling. */
+export const breakpoints = {
+  tablet: '900px',
+  mobile: '720px',
+} as const;

package/src/styles.ts

@@ -0,0 +1,20 @@
+/**
+ * Side-effect entry that aggregates every vanilla-extract `globalStyle()`
+ * registration plus the plain-CSS font sidecar. tsup uses this as one of
+ * its entries so the resulting bundle ends up at `dist/styles.css` — the
+ * single self-contained file the editor's web component injects into its
+ * shadow DOM via `?raw` and that any consumer can import as plain CSS.
+ */
+import './fonts.css';
+import './theme.css';
+import './global/logo.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';

package/src/theme.css.ts

@@ -0,0 +1,132 @@
+import {
+  createGlobalTheme,
+  createGlobalThemeContract,
+} from '@vanilla-extract/css';
+
+/**
+ * Concrete design-token values for the Zylem UI.
+ *
+ * Each leaf in this object is paired with a CSS custom-property name in
+ * {@link varNames}. The two structures must stay in lock-step. Values feed
+ * `createGlobalTheme`; names feed `createGlobalThemeContract` so the
+ * 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',
+  },
+} as const;
+
+/**
+ * Mirror of {@link tokens} where each leaf is the CSS custom-property name
+ * (sans the leading `--`). Passed to `createGlobalThemeContract` so the
+ * generated `var(...)` references resolve to the legacy `--zylem-*`
+ * 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',
+  },
+} as const;
+
+/**
+ * Typed `vars` contract — leaves resolve to `var(--zylem-*)` strings. Use
+ * inside `style()` / `globalStyle()` / `sprinkles()` to consume the design
+ * tokens with autocomplete and type safety.
+ */
+export const vars = createGlobalThemeContract(varNames);
+
+createGlobalTheme(':root', vars, tokens);
+
+/** Token values as a plain readonly object, exported for downstream tooling. */
+export const tokenValues = tokens;