@omega.js/web 0.1.0

package/themes/classy/css/base/_utilities.scss

@@ -0,0 +1,284 @@
+// Classy v2 utilities — the small shared vocabulary the marketing + app
+// surfaces compose from. Paint comes from tokens; zero gradients anywhere
+// (the only permitted fades are alpha masks and monotone chart fills).
+
+// ============================================
+// Hairlines
+// ============================================
+.hairline {
+  border: 1px solid var(--omega-line);
+}
+
+.hairline-top {
+  border-top: 1px solid var(--omega-line);
+}
+
+.hairline-bottom {
+  border-bottom: 1px solid var(--omega-line);
+}
+
+.hairline-end {
+  border-inline-end: 1px solid var(--omega-line);
+}
+
+// ============================================
+// Ink panel — the always-dark slab (CTA band, code tiles). Deliberately
+// near-constant across modes: in light it's the contrast moment, in dark it
+// reads as a lifted surface. Redefines the local token scope so anything
+// inside paints correctly.
+// ============================================
+.omega-ink-panel {
+  --omega-surface: #1d1d20;
+  --omega-surface-2: #26262a;
+  --omega-ink: #f2f1ef;
+  --omega-ink-muted: #a5a4a1;
+  --omega-ink-faint: #777673;
+  --omega-line: #313134;
+  --omega-line-strong: #3f3f43;
+
+  color: var(--omega-ink);
+  background: #161618;
+  border-radius: var(--omega-radius-xl);
+}
+
+[data-bs-theme='dark'] .omega-ink-panel {
+  background: #131315;
+  border: 1px solid var(--omega-line);
+}
+
+// ============================================
+// Dotted grid backdrop (hero) — masked so it breathes out at the edges
+// ============================================
+.omega-dotgrid {
+  position: relative;
+}
+
+.omega-dotgrid::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(var(--omega-line-strong) 1px, transparent 1px);
+  background-size: 22px 22px;
+  mask-image: radial-gradient(ellipse 72% 62% at 50% 32%, #000 30%, transparent 72%);
+  pointer-events: none;
+  transition: opacity var(--omega-speed-slow) var(--omega-ease);
+}
+
+// The live canvas (data-omega-dotfield) takes over from the static dots —
+// same breathing mask, static grid fades out underneath it.
+.omega-dotgrid[data-omega-dotfield-ready]::before {
+  opacity: 0;
+}
+
+.omega-dotgrid > .omega-dotfield__canvas {
+  mask-image: radial-gradient(ellipse 72% 62% at 50% 32%, #000 30%, transparent 72%);
+}
+
+.omega-dotgrid > :not(.omega-dotfield__canvas) {
+  position: relative;
+}
+
+// ============================================
+// Segmented-control thumb (engine-injected via data-omega-segmented) —
+// the pill that glides between segments; containers may re-skin it.
+// ============================================
+.omega-segmented__thumb {
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-s);
+  box-shadow: var(--omega-shadow-1);
+}
+
+// ============================================
+// Glassy surface (scrolled nav, floating chrome) — blur + translucent
+// surface, hairline edge. No gradient, no glow.
+// ============================================
+.bg-glassy {
+  background: color-mix(in srgb, var(--omega-surface) 78%, transparent);
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+}
+
+// ============================================
+// Brand dot — the accent signature mark
+// ============================================
+.omega-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--omega-accent);
+  flex-shrink: 0;
+}
+
+.omega-dot--ok {
+  background: var(--omega-ok);
+}
+
+.omega-dot--warn {
+  background: var(--omega-warn);
+}
+
+.omega-dot--muted {
+  background: var(--omega-ink-faint);
+}
+
+.omega-dot--danger {
+  background: var(--omega-danger);
+}
+
+// ============================================
+// Icon chip — small rounded icon tiles (bento, lists)
+// ============================================
+.omega-icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: var(--omega-radius-m);
+  background: var(--omega-accent-subtle);
+  color: var(--omega-accent);
+  flex-shrink: 0;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.omega-icon-chip--neutral {
+  background: var(--omega-surface-2);
+  color: var(--omega-ink-muted);
+  border: 1px solid var(--omega-line);
+}
+
+.omega-icon-chip--lg {
+  width: 3.25rem;
+  height: 3.25rem;
+  border-radius: var(--omega-radius-l);
+
+  svg {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+}
+
+// ============================================
+// Adaptive helpers kept from v1 (shared layouts reference them)
+// ============================================
+.bg-adaptive-inverse {
+  background: var(--omega-ink) !important;
+  color: var(--omega-ground) !important;
+}
+
+.text-adaptive {
+  color: var(--omega-ink) !important;
+}
+
+// Accent text (used across marketing headlines)
+.text-accent {
+  color: var(--omega-accent) !important;
+}
+
+// Legacy interaction/soft-color names still referenced by pages awaiting
+// their skin-arc remake — mapped onto the v2 language.
+.hover-flex {
+  transition: border-color var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    border-color: var(--omega-line-strong);
+  }
+}
+
+.bg-primary-soft {
+  background: var(--omega-accent-subtle) !important;
+}
+
+// Legacy gradient class names — neutralized to flat token paint so any
+// straggler markup renders clean while its surface awaits the skin-arc
+// remake. New surfaces must NOT use these.
+.bg-gradient-rainbow,
+.bg-gradient-primary,
+.bg-gradient-aurora,
+.bg-gradient-sunset,
+.bg-gradient-dark {
+  background: #161618 !important;
+  color: #f2f1ef;
+}
+
+.bg-gradient-light {
+  background: var(--omega-surface-2) !important;
+}
+
+.text-gradient-rainbow {
+  color: var(--omega-accent) !important;
+}
+
+.border-gradient-rainbow {
+  border-color: var(--omega-line-strong) !important;
+}
+
+// ============================================
+// Gradient ring — the deliberate gradient exception (Ian 2026-07-16): an
+// iridescent OUTLINE for the few surfaces that earn it (recommended plan
+// card, trial CTA, nav signup). Two-layer paint: the inner layer fills
+// padding-box with the surface/button bg, the gradient paints only the
+// border-box ring. Per Ian's refs (2026-07-16): a PASTEL spectrum that
+// wraps the perimeter (conic), not a diagonal sweep — modern rainbow,
+// deliberately brand-agnostic. Stops are hand-mixed and unique to v2:
+// legacy classy gradients (aurora/sunset/rainbow) are retired, and every
+// obvious Tailwind hex collides with legacy semantic tokens — never
+// reintroduce either. First stop repeats last so the wrap is seamless.
+//
+// ONE rainbow formula (Ian 2026-07-31): the hand-mixed PASTEL stops below
+// are it — a generic HSL ramp is not (it reads too generic and wrecks the
+// card border). The omega dotfield mirrors this exact palette in canvas
+// (`@omega.js/client` src/modules/motion.js, RAINBOW_STOPS), interpolating
+// between adjacent stops instead of sampling a hue wheel. Change the
+// palette in both places or in neither — packages/web/test/rainbow-pin.test.js
+// holds them equal.
+// ============================================
+@property --omega-ring-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+:root {
+  // butter → coral → pink → lavender → periwinkle → aqua → soft green
+  --omega-gradient-stops: #f2d478, #f2a288, #f094c2, #bd97f2, #88b4f2, #7fd9cf, #a5e08c, #f2d478;
+  --omega-gradient: conic-gradient(from 250deg, var(--omega-gradient-stops));
+}
+
+.omega-btn-ring {
+  --omega-ring-angle: 0deg;
+  border: 2px solid transparent !important;
+  background:
+    linear-gradient(var(--bs-btn-bg, var(--omega-surface)), var(--bs-btn-bg, var(--omega-surface))) padding-box,
+    conic-gradient(from calc(250deg + var(--omega-ring-angle)), var(--omega-gradient-stops)) border-box !important;
+  transition:
+    --omega-ring-angle var(--omega-speed-slow) var(--omega-ease),
+    transform var(--omega-speed) var(--omega-ease),
+    box-shadow var(--omega-speed) var(--omega-ease);
+
+  &:hover,
+  &:focus-visible {
+    --omega-ring-angle: 160deg; // the spectrum swirls around the pill
+    background:
+      linear-gradient(var(--bs-btn-hover-bg, var(--bs-btn-bg, var(--omega-surface))), var(--bs-btn-hover-bg, var(--bs-btn-bg, var(--omega-surface)))) padding-box,
+      conic-gradient(from calc(250deg + var(--omega-ring-angle)), var(--omega-gradient-stops)) border-box !important;
+  }
+
+  &:active {
+    background:
+      linear-gradient(var(--bs-btn-active-bg, var(--bs-btn-bg, var(--omega-surface))), var(--bs-btn-active-bg, var(--bs-btn-bg, var(--omega-surface)))) padding-box,
+      conic-gradient(from calc(250deg + var(--omega-ring-angle)), var(--omega-gradient-stops)) border-box !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .omega-btn-ring {
+    transition: none;
+  }
+}

package/themes/classy/css/components/_alerts.scss

@@ -0,0 +1,51 @@
+// Classy v2 alerts — Bootstrap's tinted slabs become quiet hairline notes:
+// surface background, a 3px level edge, ink text, the LEVEL speaks through
+// the edge + icon color (status colors stay reserved for status).
+
+.alert {
+  --bs-alert-bg: var(--omega-surface);
+  --bs-alert-color: var(--omega-ink);
+  --bs-alert-border-color: var(--omega-line);
+
+  border-inline-start-width: 3px;
+  border-radius: var(--omega-radius-m);
+
+  a,
+  .alert-link {
+    color: var(--omega-ink);
+    font-weight: 600;
+  }
+}
+
+.alert-success {
+  --bs-alert-border-color: var(--omega-line);
+  border-inline-start-color: var(--omega-ok);
+
+  svg {
+    color: var(--omega-ok);
+  }
+}
+
+.alert-warning {
+  border-inline-start-color: var(--omega-warn);
+
+  svg {
+    color: var(--omega-warn);
+  }
+}
+
+.alert-danger {
+  border-inline-start-color: var(--omega-danger);
+
+  svg {
+    color: var(--omega-danger);
+  }
+}
+
+.alert-info {
+  border-inline-start-color: var(--omega-accent);
+
+  svg {
+    color: var(--omega-accent);
+  }
+}

package/themes/classy/css/components/_badges.scss

@@ -0,0 +1,46 @@
+// Classy v2 badges + chips — quiet neutrals, status told by dot + label
+// (never color alone). Accent enters only as the small signal chip.
+
+// Base badge behavior (kept from v1: never clipped by parents)
+.badge {
+  z-index: 100;
+}
+
+// The CHIP moved to the core component sheet (#242 —
+// core/css/components/_index.scss): base-layer markup renders it, so its
+// structure is shared vocabulary, not a classy component. Re-skin it here if
+// classy ever wants its own chip; the core rules land before this file.
+
+// ============================================
+// Status pill — dot + label
+// ============================================
+.omega-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  padding: 0.1875rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 550;
+  color: var(--omega-ink-muted);
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-pill, 50rem);
+  white-space: nowrap;
+
+  .omega-dot {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+.omega-status--ok {
+  color: var(--omega-ok);
+}
+
+.omega-status--warn {
+  color: var(--omega-warn);
+}
+
+.omega-status--danger {
+  color: var(--omega-danger);
+}

package/themes/classy/css/components/_buttons.scss

@@ -0,0 +1,175 @@
+// Classy v2 buttons — ink primaries (Manus/ElevenLabs), hairline ghosts,
+// accent reserved for the brand-aware .btn-primary. Zero gradients, zero
+// glow; feedback is the press and line emphasis, never a lift (#686).
+//
+// .btn-adaptive IS the ink button: the shared bootstrap-overrides layer
+// builds it from $dark/$light, which classy's config points at the ink/paper
+// neutrals — so it flips correctly in both modes with no extra rules here.
+
+// ============================================
+// Base
+// ============================================
+.btn {
+  letter-spacing: -0.01em;
+  transition:
+    color var(--omega-speed) var(--omega-ease),
+    background-color var(--omega-speed) var(--omega-ease),
+    border-color var(--omega-speed) var(--omega-ease),
+    transform var(--omega-speed) var(--omega-ease),
+    box-shadow var(--omega-speed) var(--omega-ease);
+
+  // The unified nicety (Ian 2026-07-16, narrowed 2026-08-29 for #686): EVERY
+  // button presses on click — no per-variant opt-in. Hover paints, it never
+  // lifts.
+  &:active {
+    transform: scale(0.985);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+
+    &:active {
+      transform: none;
+    }
+  }
+}
+
+// ============================================
+// Accent bridge — .btn-primary follows brand.color at RUNTIME
+// ============================================
+// Bootstrap compiles $primary literals into the component vars; re-pointing
+// them at the accent tokens keeps every primary button on the brand ramp
+// (and its WCAG-picked ink) without recompiling.
+.btn-primary {
+  --bs-btn-color: var(--omega-accent-ink);
+  --bs-btn-bg: var(--omega-accent);
+  --bs-btn-border-color: var(--omega-accent);
+  --bs-btn-hover-color: var(--omega-accent-ink);
+  --bs-btn-hover-bg: var(--omega-accent-hover);
+  --bs-btn-hover-border-color: var(--omega-accent-hover);
+  --bs-btn-active-color: var(--omega-accent-ink);
+  --bs-btn-active-bg: var(--omega-accent-active);
+  --bs-btn-active-border-color: var(--omega-accent-active);
+  --bs-btn-disabled-color: var(--omega-accent-ink);
+  --bs-btn-disabled-bg: var(--omega-accent);
+  --bs-btn-disabled-border-color: var(--omega-accent);
+  --bs-btn-focus-shadow-rgb: none;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 0.1875rem var(--omega-accent-ring);
+  }
+}
+
+.btn.btn-outline-primary {
+  --bs-btn-color: var(--omega-accent);
+  --bs-btn-border-color: var(--omega-accent);
+  --bs-btn-hover-color: var(--omega-accent-ink);
+  --bs-btn-hover-bg: var(--omega-accent);
+  --bs-btn-hover-border-color: var(--omega-accent);
+  --bs-btn-active-color: var(--omega-accent-ink);
+  --bs-btn-active-bg: var(--omega-accent-active);
+  --bs-btn-active-border-color: var(--omega-accent-active);
+}
+
+// ============================================
+// Ghost — the hairline neutral (draft-2 secondary voice)
+// ============================================
+// The shared adaptive layer loads AFTER the theme, and its
+// [data-bs-theme="dark"] block re-litigates these vars at (0,2,0) — it
+// wants the ghost to INVERT to paper on hover, which read as light-text-
+// on-paper in dark mode (Ian's "can't read hover text" bug). Double-
+// scoping wins both modes; the omega tokens already flip with the theme.
+// No unconditional color/background here — they out-order .btn:hover and
+// freeze states (the earlier "Google button has no hover" bug).
+.btn.btn-outline-adaptive,
+[data-bs-theme='dark'] .btn.btn-outline-adaptive {
+  --bs-btn-color: var(--omega-ink);
+  --bs-btn-bg: var(--omega-surface);
+  --bs-btn-border-color: var(--omega-line-strong);
+  --bs-btn-hover-color: var(--omega-ink);
+  --bs-btn-hover-bg: var(--omega-surface-2);
+  --bs-btn-hover-border-color: var(--omega-line-strong);
+  --bs-btn-active-color: var(--omega-ink);
+  --bs-btn-active-bg: var(--omega-surface-2);
+  --bs-btn-active-border-color: var(--omega-line-strong);
+
+  // Raw border-color: the shared dark block sets one at (0,2,0), which
+  // out-orders Bootstrap's var-driven border — re-assert at (0,3,0)
+  border-color: var(--omega-line-strong);
+}
+
+// ============================================
+// Command button — the mono terminal CTA ($ npx omega setup)
+// ============================================
+.btn-cmd {
+  --bs-btn-color: var(--omega-ink);
+  --bs-btn-bg: var(--omega-surface);
+  --bs-btn-border-color: var(--omega-line-strong);
+  --bs-btn-hover-color: var(--omega-ink);
+  --bs-btn-hover-bg: var(--omega-surface-2);
+  --bs-btn-hover-border-color: var(--omega-line-strong);
+  --bs-btn-active-color: var(--omega-ink);
+  --bs-btn-active-bg: var(--omega-surface-2);
+  --bs-btn-active-border-color: var(--omega-line-strong);
+
+  font-family: var(--omega-font-mono);
+  font-size: 0.845em;
+  font-weight: 500;
+  letter-spacing: 0;
+
+  .omega-cmd-prompt {
+    color: var(--omega-accent);
+    margin-inline-end: 0.5em;
+    user-select: none;
+  }
+}
+
+// Icon button — square ghost (topbar, toolbars): promoted to the core
+// component sheet in #303, because the BASE app chrome renders it on every
+// theme (core/css/components/_index.scss).
+
+// ============================================
+// Utility accent bridge (text/bg/borders follow brand.color)
+// ============================================
+.text-primary {
+  color: var(--omega-accent) !important;
+}
+
+.bg-primary {
+  background-color: var(--omega-accent) !important;
+}
+
+.border-primary {
+  border-color: var(--omega-accent) !important;
+}
+
+.form-check-input:checked {
+  background-color: var(--omega-accent);
+  border-color: var(--omega-accent);
+}
+
+.progress-bar {
+  background-color: var(--omega-accent);
+}
+
+.nav-pills {
+  --bs-nav-pills-link-active-bg: var(--omega-accent);
+  --bs-nav-pills-link-active-color: var(--omega-accent-ink);
+}
+
+// Social share buttons (core builds them with inline platform colors):
+// classy quiets the rainbow at rest — the platform hue returns on hover.
+[data-social-share] .social-share-btn {
+  filter: saturate(0.3) brightness(0.92);
+  opacity: 0.85;
+  transition:
+    filter var(--omega-speed) var(--omega-ease),
+    opacity var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    filter: none;
+    opacity: 1;
+  }
+}

package/themes/classy/css/components/_cards.scss

@@ -0,0 +1,41 @@
+// Classy v2 cards — hairline surfaces. Shadows are not the language here;
+// depth comes from the ground/surface contrast and 1px lines.
+
+.card {
+  --bs-card-border-color: var(--omega-line);
+  --bs-card-bg: var(--omega-surface);
+
+  position: relative;
+  box-shadow: none;
+
+  // Allow badges to overflow (except when overflow-hidden is explicitly set)
+  &:has(.badge):not(.overflow-hidden) {
+    overflow: visible !important;
+  }
+
+  .card-header {
+    padding: 1.125rem 1.375rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--omega-line);
+  }
+
+  .card-body {
+    padding: 1.375rem;
+  }
+
+  .card-footer {
+    padding: 0.875rem 1.375rem;
+    border-top: 1px solid var(--omega-line);
+  }
+}
+
+// Panel head — the app-card header voice (14/650 + optional link)
+.omega-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}

package/themes/classy/css/components/_dropdowns.scss

@@ -0,0 +1,48 @@
+// Classy v2 dropdowns — solid surface, hairline, soft float shadow.
+
+.dropdown-menu {
+  --bs-dropdown-bg: var(--omega-surface);
+  --bs-dropdown-border-color: var(--omega-line);
+  --bs-dropdown-link-color: var(--omega-ink);
+  --bs-dropdown-link-hover-color: var(--omega-ink);
+  --bs-dropdown-link-hover-bg: var(--omega-surface-2);
+  --bs-dropdown-link-active-color: var(--omega-ink);
+  --bs-dropdown-link-active-bg: var(--omega-surface-2);
+  --bs-dropdown-divider-bg: var(--omega-line);
+  --bs-dropdown-padding-x: 0.375rem;
+
+  box-shadow: var(--omega-shadow-2);
+
+  .dropdown-item {
+    border-radius: var(--omega-radius-s);
+    font-weight: 500;
+    // Breathing room between rows — an active item and a hovered neighbor
+    // must never render as two touching filled blocks.
+    margin-block: 0.125rem;
+
+    // Semantic text colors keep their hue on hover
+    &.text-danger:hover {
+      background: color-mix(in srgb, var(--omega-danger) 10%, transparent);
+    }
+
+    &.text-success:hover {
+      background: color-mix(in srgb, var(--omega-ok) 10%, transparent);
+    }
+
+    &.text-warning:hover {
+      background: color-mix(in srgb, var(--omega-warn) 10%, transparent);
+    }
+  }
+
+  .dropdown-divider {
+    opacity: 1;
+  }
+
+  .dropdown-header {
+    font-size: 0.6875rem;
+    font-weight: 650;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    color: var(--omega-ink-faint);
+  }
+}