@engineio/ui 0.4.0

package/dist/styles/tokens.css

@@ -0,0 +1,221 @@
+/*
+  Engine design system — tokens.
+
+  Source of truth: docs/brand/ENGINE-DESIGN-SYSTEM.md in the engine repo.
+  Everything here traces back to that document; nothing here was invented.
+
+  The brand is three colours:
+
+    #0E0E0E  Off Black   — the page, and ink on any accent
+    #FFFFFF  Pure White  — text
+    #FF006A  Magenta     — the primary, and the only accent
+
+  Everything else is a neutral step between the outer two. There is no light
+  theme and no `dark` variant — this is the whole palette, so it lives at the
+  root.
+
+  Token names follow Tailwind 4's `@theme` namespaces rather than the design
+  document's bare names (`--color-primary`, not `--magenta`). That is
+  deliberate: it is what generates the `bg-primary` / `rounded-card` /
+  `ease-brand` utilities the primitives are written against. The document's
+  names are the spec; these are its implementation.
+*/
+
+@theme {
+  --tw-border-style: solid;
+
+  /* ── Page and text ─────────────────────────────────────────────────── */
+  --color-background: #0e0e0e;
+  --color-foreground: #ffffff;
+
+  /* Surfaces lift away from the page rather than relying on borders alone. */
+  --color-card: #161616;
+  --color-card-foreground: #ffffff;
+  --color-popover: #1c1c1c;
+  --color-popover-foreground: #ffffff;
+
+  /* ── The accent ────────────────────────────────────────────────────── */
+  /* White on magenta lands at 3.9:1 — under the 4.5:1 AA threshold for
+     normal text. Keep magenta fills to labels at 15px bold or larger, where
+     the 3:1 large-text threshold applies. Off Black on magenta is always
+     safe. The primitives honour this: every magenta fill in this package
+     sets 15px/700 or above. */
+  --color-primary: #ff006a;
+  --color-primary-foreground: #ffffff;
+  --color-primary-press: #d60059;
+
+  /* Tints, for washes on transparent controls and for soft label fills. */
+  --color-primary-tint-12: rgb(255 0 106 / 0.12);
+  --color-primary-tint-24: rgb(255 0 106 / 0.24);
+
+  /* A lighter magenta, for ink on a magenta tint. Pure #FF006A on its own 12%
+     tint measures 4.37:1 — under AA — and the brand bans magenta text below
+     15px bold outright, which rules it out for a 13px label. This step gets
+     5.81:1 on the same fill.
+
+     Not invented here: it ships today as `--brand-300` in integration.css in
+     both the engine and rgs repos. Declared as a named step rather than left
+     as a one-off so a soft label has a legal ink. See the note in Tag. */
+  --color-primary-300: #ff5c9b;
+
+  /* Engine Integration's reserved accent. NOT IN USE — the brand direction
+     assigns it to Integration, but every shipped surface is magenta and was
+     deliberately migrated there. Build Integration in magenta; a
+     half-migrated accent is worse than a consistent one. Declared because it
+     is a real brand colour with a real owner, unlike the retired ramps.
+     Partner Yellow carries Off Black ink only, never white. */
+  --color-partner-yellow: #ffdd00;
+  --color-partner-yellow-press: #e0c200;
+  --color-partner-yellow-tint-12: rgb(255 221 0 / 0.12);
+
+  /* ── Neutral ramp — the only greys ─────────────────────────────────── */
+  --color-grey-950: #0a0a0a;
+  --color-grey-900: #0e0e0e;
+  --color-grey-850: #141414;
+  --color-grey-800: #1a1a1a;
+  --color-grey-700: #242424;
+  --color-grey-600: #2e2e2e;
+  --color-grey-500: #3d3d3d;
+  --color-grey-400: #6b6b6b;
+  --color-grey-300: #8c8c8c;
+  --color-grey-200: #b4b4b4;
+  --color-grey-100: #d9d9d9;
+  --color-grey-050: #f2f2f2;
+
+  /* ── Semantic neutrals ─────────────────────────────────────────────── */
+  --color-secondary: #232323;
+  --color-secondary-foreground: #ffffff;
+  --color-muted: #232323;
+  --color-muted-foreground: #a1a1a1;
+  --color-accent: #2a2a2a;
+  --color-accent-foreground: #ffffff;
+
+  --color-border: #2a2a2a;
+  --color-input: #2a2a2a;
+  --color-ring: #ff006a;
+
+  /* ── Status ───────────────────────────────────────────────────────────
+     The design system document (§3, §12) states that no status palette
+     exists and that one must not be invented locally. IT NOW EXISTS: these
+     three were commissioned deliberately, at the repo owner's direction, to
+     close that gap. They are a decision, not a workaround — but the brand
+     documents in the engine repo still say otherwise, so ENGINE-BRAND.md §10
+     and ENGINE-DESIGN-SYSTEM.md §12 need updating to match, and the brand
+     team should ratify the values.
+
+     Chosen against the theme rather than picked off a stock ramp: one high
+     chroma step each, cool-leaning, clinical rather than sweet, and sitting
+     well clear of magenta so the accent stays the accent. Status is
+     FUNCTIONAL colour — it reports state. It is never decoration, never an
+     accent, and never a substitute for magenta.
+
+     Every value below clears 4.5:1 three ways: Off Black as ink on the solid
+     fill, and the colour itself as text on both the page and its own 12%
+     tint. Ink on a status fill is ALWAYS Off Black — white fails on all
+     three (danger is the tightest at 3.4:1).
+
+       role     value     blk-on-fill  on-page  on-tint  dE vs magenta
+       success  #00C46A      8.37       8.37     6.53        146
+       warning  #FFB020     10.56      10.56     7.91         --
+       danger   #FF3B30      5.44       5.44     4.56         38
+
+     Warning sits ΔE 28.7 from Partner Yellow #FFDD00 — visibly amber next to
+     that pure yellow, but not dramatically so. It does not matter today
+     because Partner Yellow is unused; if Engine Integration ever adopts it,
+     a warning chip beside a Partner badge on one surface wants a second look.
+
+     No `info` colour. The obvious choice is a blue, and any blue here would
+     read as the retired Sportsbook Blue coming back. Use the neutral ramp
+     for informational states instead. */
+  --color-success: #00c46a;
+  --color-success-foreground: #0e0e0e;
+  --color-success-tint-12: rgb(0 196 106 / 0.12);
+
+  --color-warning: #ffb020;
+  --color-warning-foreground: #0e0e0e;
+  --color-warning-tint-12: rgb(255 176 32 / 0.12);
+
+  --color-danger: #ff3b30;
+  --color-danger-foreground: #0e0e0e;
+  --color-danger-tint-12: rgb(255 59 48 / 0.12);
+
+  /* shadcn's name for the same thing. Kept as an alias so Alert, Input's
+     aria-invalid state and the Button's destructive variant keep resolving,
+     and so there is exactly one red in the system rather than two. */
+  --color-destructive: var(--color-danger);
+  --color-destructive-foreground: var(--color-danger-foreground);
+
+  /* ── Radii, by role ───────────────────────────────────────────────── */
+  /* Never mixed arbitrarily on one surface — the outer frame is always
+     larger than the inner panel (18px card → 10px inner). */
+  --radius-tag: 6px;
+  --radius-field: 10px;
+  --radius-card-inner: 10px;
+  --radius-media: 14px;
+  --radius-card: 18px;
+  --radius-frame: 26px;
+  --radius-control: 999px;
+
+  /* The generic scale, for shadcn primitives that predate the role-based
+     radii above. Prefer the named roles in new work. */
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* ── Depth ────────────────────────────────────────────────────────── */
+  /* Depth comes from rules and nested panels, not shadow. These two exist
+     for product chrome and modals only — never on a brand surface. */
+  --shadow-panel: 0 12px 32px rgb(0 0 0 / 0.55);
+  --shadow-modal: 0 24px 64px rgb(0 0 0 / 0.7);
+
+  /* ── Motion ───────────────────────────────────────────────────────── */
+  /* Fast and mechanical: 140ms control states, 220ms surfaces, 360–640ms
+     reveals. Never bounce, spring, or parallax. */
+  --ease-brand: cubic-bezier(0.2, 0, 0.2, 1);
+  --ease-brand-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-brand-accelerate: cubic-bezier(0.6, 0, 0.3, 1);
+
+  /* ── Type ─────────────────────────────────────────────────────────── */
+  /* Proxima Nova is the brand face and ships with this package. Inter is the
+     documented substitute where the licence does not reach. */
+  --font-brand:
+    "ProximaNova", "Inter", "Helvetica Neue", Arial, sans-serif;
+  --font-sans: var(--font-brand);
+  --font-condensed:
+    "ProximaNovaCondensed", "ProximaNova", Arial, sans-serif;
+  --font-extra-condensed:
+    "ProximaNovaExtraCondensed", "ProximaNovaCondensed", Arial, sans-serif;
+  /* JetBrains Mono is specified for numerics, keys, IDs, code and eyebrow
+     labels. No binary ships with this package yet — see README, Known gaps —
+     so this currently resolves to the platform monospace. */
+  --font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --breakpoint-2xl: 1400px;
+
+  /* ── Sidebar ──────────────────────────────────────────────────────── */
+  /* Left-nav hover and active states: magenta at very low lightness, so the
+     wash reads as brand-tinted rather than plain grey. */
+  --color-sidebar-background: #131313;
+  --color-sidebar-foreground: #ffffff;
+  --color-sidebar-primary: #ff006a;
+  --color-sidebar-primary-foreground: #ffffff;
+  --color-sidebar-accent: #291319;
+  --color-sidebar-accent-foreground: #ffffff;
+  --color-sidebar-border: #2a2a2a;
+  --color-sidebar-ring: #ff006a;
+}
+
+/*
+  RETIRED COLOURS ARE NOT DECLARED HERE, AND THAT IS DELIBERATE.
+
+  Originals Orange #FF6200 and Sportsbook Blue #00CCFF belonged to sub-brands
+  that no longer exist. They have no owner, so per the brand's
+  conditional-colour rule they are not available — no accents, no charts, no
+  status. The engine repo still declares them in app.css for historical
+  reasons; this package does not, because you cannot misuse a token that does
+  not exist. The `originals` / `sportsbook` variants that shipped on Badge and
+  Tag upstream are gone for the same reason.
+*/

package/dist/styles/utilities.css

@@ -0,0 +1,129 @@
+/*
+  Engine design system — base layer and shared utilities.
+
+  Everything the primitives need beyond raw tokens. Import order matters:
+  this must come after `tailwindcss` so `@utility` and `@layer base` resolve.
+*/
+
+@layer base {
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-brand);
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Native chrome follows the page, not the OS. Without `color-scheme` the
+     browser paints light scrollbars, form controls, spinners and autofill
+     over a dark UI — this is what makes a default scrollbar read as a light
+     strip down the right-hand edge. */
+  :root {
+    color-scheme: dark;
+  }
+
+  /* The scrollbar on the grey ramp: a thumb that reads as part of the page
+     and a track that stays out of the way. Firefox takes the two-value
+     `scrollbar-color`; WebKit needs the pseudo-elements. The thumb's
+     transparent border plus `background-clip` is what insets it from the
+     edge — WebKit has no padding on the thumb. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-grey-600) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-grey-600);
+    background-clip: padding-box;
+    border: 2px solid transparent;
+    border-radius: 999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-grey-500);
+    background-clip: padding-box;
+  }
+
+  /* Motion is fast and mechanical, but it is never mandatory.
+     `prefers-reduced-motion` drops everything to fades. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+/*
+  The system's field surface, defined once. Height, width and text size stay
+  at the call site — this is only the skin, so an `h-9` search box and a
+  `min-h-20` textarea can share it without fighting over utilities.
+
+  Input, Textarea and SelectTrigger all consume this. If you are building a
+  new field-shaped control, use it rather than restating the border and focus
+  ring: it is the one place the 2px magenta focus ring is defined.
+*/
+@utility field {
+  border-radius: var(--radius-field);
+  border: 1px solid var(--color-grey-700);
+  background-color: var(--color-grey-850);
+  color: var(--color-foreground);
+  transition:
+    border-color 140ms var(--ease-brand),
+    box-shadow 140ms var(--ease-brand);
+
+  &::placeholder {
+    color: var(--color-grey-400);
+  }
+
+  /* 2px magenta ring, offset by the page colour, per the system's focus
+     rule. Always visible on keyboard focus — never removed.
+
+     The border deliberately stays on its resting grey. Recolouring it to
+     magenta as well drew a second magenta line inside the offset gap, so a
+     focused field read as a double border — magenta, page colour, magenta.
+     The ring is the affordance; the border's job is to delineate the field,
+     and it does that whether or not the field has focus. */
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--color-background),
+      0 0 0 4px var(--color-ring);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--color-destructive);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+  }
+}
+
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}

package/dist/utils.d.ts

@@ -0,0 +1,18 @@
+import { type ClassValue } from "clsx";
+/**
+ * Merge Tailwind classes, letting later ones win over conflicting earlier
+ * ones. Every primitive in this package passes its own classes through `cn`
+ * with the caller's `class` prop last, which is what makes
+ * `<Button class="w-full" />` work without `!important`.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,22 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Merge Tailwind classes, letting later ones win over conflicting earlier
+ * ones. Every primitive in this package passes its own classes through `cn`
+ * with the caller's `class` prop last, which is what makes
+ * `<Button class="w-full" />` work without `!important`.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/*
+  Upstream `$lib/utils.ts` in the engine repo is a grab-bag: alongside `cn` it
+  carries `copyToClipboard` (which pulls in svelte-sonner), `humanFileSize`,
+  `getDateFromUUIDv7`, `slugify`, `formatDate` and `jurisdictionLabel` — the
+  last of which encodes iGaming domain knowledge.
+
+  None of that belongs in a design system, and importing it here would have
+  made svelte-sonner a hard dependency of every consumer. Only `cn` and the
+  type helpers the primitives genuinely need are re-exported. The rest stays
+  in the products, where it already lives.
+*/

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@engineio/ui",
+  "version": "0.4.0",
+  "description": "The Engine design system — tokens, fonts and Svelte primitives.",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "packageManager": "bun@1.3.14",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/engineio/ui.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./styles/tokens": "./dist/styles/tokens.css",
+    "./styles/fonts": "./dist/styles/fonts.css",
+    "./styles/utilities": "./dist/styles/utilities.css",
+    "./fonts/*": "./dist/fonts/*",
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.js"
+    },
+    "./components/ui/*": {
+      "types": "./dist/components/ui/*/index.d.ts",
+      "svelte": "./dist/components/ui/*/index.js"
+    },
+    "./components/ui/*/index.js": {
+      "types": "./dist/components/ui/*/index.d.ts",
+      "svelte": "./dist/components/ui/*/index.js"
+    },
+    "./components/brand": {
+      "types": "./dist/components/brand/index.d.ts",
+      "svelte": "./dist/components/brand/index.js"
+    },
+    "./components/brand/index.js": {
+      "types": "./dist/components/brand/index.d.ts",
+      "svelte": "./dist/components/brand/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
+    "build:gallery": "svelte-kit sync && vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@lucide/svelte": "^0.544.0",
+    "bits-ui": "^1.4.7",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^0.2.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "2.63.0",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "7.1.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/node": "^26.2.0",
+    "conventional-changelog-conventionalcommits": "9",
+    "publint": "^0.3.15",
+    "semantic-release": "^25.0.9",
+    "svelte": "5.56.1",
+    "svelte-check": "4.5.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "6.0.3",
+    "vite": "8.1.0"
+  }
+}