@omega.js/extension 0.1.0

package/dist/assets/themes/neobrutalism/css/base/_utilities.scss

@@ -0,0 +1,89 @@
+// Neobrutalism Theme — Base
+// Body surface + neobrutalist treatment of Bootstrap's accent-block utilities.
+// No theme-prefixed classes: the look comes from restyling STANDARD classes
+// (.text-bg-*, .border, .shadow, .card) so markup stays swappable across themes.
+
+// Body surface
+body {
+  background-color: var(--nb-paper);
+  color: var(--bs-body-color);
+}
+
+// ============================================
+// Accent blocks: .text-bg-* (Bootstrap) get the hard neobrutalist edge when
+// used as full-bleed section/decorative blocks. Bootstrap already sets the
+// background + a readable contrast color; we just square the corners.
+// (Borders/shadows are added per-component where needed, e.g. .neo-showcase__num.)
+// ============================================
+.text-bg-primary,
+.text-bg-secondary,
+.text-bg-success,
+.text-bg-info,
+.text-bg-warning,
+.text-bg-danger {
+  border-radius: 0;
+}
+
+// ============================================
+// Base voice re-tunes: the omega-* type vocabulary the fall-through
+// surfaces speak (classy's typography partial is deliberately NOT imported;
+// these are the pieces base markup actually uses, in the neobrutalist voice)
+// ============================================
+// Marketing display: chunky grotesk (Archivo via --omega-font-marketing),
+// accents get the ink-marker swipe (the neo-accent treatment on base markup).
+.omega-display {
+  font-family: var(--omega-font-marketing);
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  line-height: 1;
+
+  em,
+  i {
+    font-style: normal;
+    background: #111111;
+    color: var(--nb-accent-yellow);
+    padding: 0 0.1em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+}
+
+.omega-display--hero {
+  font-size: clamp(2.75rem, 6vw, 5rem);
+  line-height: 0.95;
+}
+
+.omega-display--page {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  line-height: 0.95;
+}
+
+.omega-display--section {
+  font-size: clamp(2rem, 4vw, 3rem);
+}
+
+// Micro labels become the mono kicker voice. Authored in full: classy's
+// typography partial (the usual .omega-micro home) is not imported.
+.omega-micro {
+  font-family: $nb-font-mono;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bs-body-color);
+}
+
+// The faintest voice (footnotes, reassurance lines): same home story.
+.omega-quiet {
+  color: var(--bs-secondary-color);
+}
+
+// Display voice on arbitrary elements (status page numbers): same home story.
+.text-marketing {
+  font-family: var(--omega-font-marketing);
+}
+
+// In-page anchors clear the sticky ink bar.
+[id] {
+  scroll-margin-top: 5.5rem;
+}

package/dist/assets/themes/neobrutalism/css/components/_billing-toggle.scss

@@ -0,0 +1,74 @@
+// Neobrutalism Theme — Billing cadence toggle
+// The `omega-billing-toggle` segmented control, wherever it renders: the
+// pricing page's Monthly|Annually switch AND the account page's change-plan
+// modal (`core/js/pages/dashboard/account/sections/billing.js`) build the same
+// markup, so the skin lives in the MAIN bundle — page-scoped, the modal wore
+// the undressed classy floor while the pricing page was themed ([#236] QA
+// round 3). Structure comes from the classy floor partial imported in
+// _theme.scss; these rules land after and win.
+
+.omega-billing-toggle {
+  padding: 0;
+  gap: 0;
+  border-radius: 0;
+  background: var(--nb-surface);
+  @include nb-border();
+  @include nb-shadow(md);
+
+  // The segment labels are .btn: flatten the theme's hard-shadow button and
+  // let the checked state fill ink with the yellow accent.
+  .btn {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--bs-body-color);
+    font-family: $nb-font-display;
+    font-weight: 700;
+    padding: 0.85rem 1.25rem;
+
+    &:active {
+      transform: none;
+      box-shadow: none;
+    }
+
+    & + .btn-check + .btn {
+      border-left: $nb-border-width solid var(--nb-border-color);
+    }
+  }
+
+  // Hover goes through the RADIO on purpose. Bootstrap's own segment
+  // neutraliser (`.btn-check + .btn:hover`, which resets the label to its
+  // resting colours) is (0,3,0), and every theme PAGE sheet re-emits Bootstrap
+  // after the main bundle — so a plain `.omega-billing-toggle .btn:hover`, the
+  // same (0,3,0), lost the tie on /pricing and the segments went dead on
+  // hover. Reached through `.btn-check` this is (0,4,0) and wins on every
+  // surface the toggle renders on.
+  .btn-check + .btn:hover {
+    background: var(--nb-surface-alt);
+    transform: none;
+    box-shadow: none;
+  }
+
+  .btn-check:checked + .btn {
+    background: #111111;
+    color: var(--nb-accent-yellow);
+  }
+
+  // The moving thumb (shared segmented engine) sits under the labels
+  .omega-segmented__thumb {
+    border-radius: 0;
+    background: #111111;
+  }
+
+  .omega-billing-toggle__save {
+    font-family: $nb-font-mono;
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    border-radius: 0;
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    border-color: var(--nb-border-color);
+  }
+}

package/dist/assets/themes/neobrutalism/css/components/_buttons.scss

@@ -0,0 +1,148 @@
+// Neobrutalism Theme — Buttons
+// Every button is a hard-bordered block sitting on an offset shadow that
+// "presses" into the page on interaction. This restyles Bootstrap's own
+// .btn / .btn-* classes so all existing markup (nav CTAs, hero buttons,
+// forms) inherits the look with zero HTML changes.
+
+.btn {
+  font-family: $nb-font-display;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+  text-transform: none;
+  padding: 0.6rem 1.25rem;
+}
+
+// Press EXACTLY like the stat cards. These use the DOUBLED `.btn.btn` selector
+// (specificity 0,2,0) on purpose: every theme page bundle re-emits Bootstrap's own
+// `.btn { transition: color … }` and `.btn:hover` (because page SCSS @forwards
+// Bootstrap), and those load AFTER the main bundle. The doubled class beats them so
+// the press is pure transform+shadow with the stat-card timing — no color flash, no
+// focus-ring fighting the offset shadow.
+.btn.btn {
+  // Same transition the stat cards use → identical feel.
+  @include nb-press();
+
+  // Focus shows an OUTLINE ring (outside the box, never conflicts with the offset
+  // shadow). No focus box-shadow — that was the "flash of border".
+  &:focus { outline: 0; }
+  &:focus-visible {
+    outline: 3px solid var(--nb-border-color);
+    outline-offset: 3px;
+  }
+}
+
+.btn {
+
+  // Bootstrap adds a subtle border-color per-variant; force ink so the
+  // signature black/white frame is consistent across every color.
+  // (btn-adaptive / -inverse are the mode-flipping solids used by the nav CTA,
+  // auth buttons, etc. — they MUST be in this list or they'd keep Bootstrap's
+  // default "darken on hover" and feel different from every other button.)
+  &.btn-primary,
+  &.btn-secondary,
+  &.btn-success,
+  &.btn-info,
+  &.btn-warning,
+  &.btn-danger,
+  &.btn-light,
+  &.btn-dark,
+  &.btn-adaptive,
+  &.btn-adaptive-inverse {
+    border-color: var(--nb-border-color);
+    --bs-btn-hover-border-color: var(--nb-border-color);
+    --bs-btn-active-border-color: var(--nb-border-color);
+  }
+
+  // 3. SOLID buttons: freeze hover/active fill to the resting color so the press is
+  //    pure transform+shadow (no color shift) — exactly the stat-card feel. Outline
+  //    buttons are intentionally EXCLUDED so they keep their fill-on-hover.
+  //    Freezing to `var(--bs-btn-bg)` works in BOTH modes automatically because the
+  //    adaptive classes already set --bs-btn-bg per light/dark.
+  &.btn-primary,   &.btn-secondary, &.btn-success,
+  &.btn-info,      &.btn-warning,   &.btn-danger,
+  &.btn-light,     &.btn-dark,
+  &.btn-adaptive,  &.btn-adaptive-inverse {
+    --bs-btn-hover-bg: var(--bs-btn-bg);
+    --bs-btn-hover-color: var(--bs-btn-color);
+    --bs-btn-active-bg: var(--bs-btn-bg);
+    --bs-btn-active-color: var(--bs-btn-color);
+  }
+}
+
+// btn-adaptive / -inverse RESTING fill. The global _buttons-adaptive.scss sets these
+// via `.btn-adaptive` (0,1,0), but Bootstrap's own `.btn { --bs-btn-bg: transparent }`
+// re-emission can tie/beat it on order, leaving the button transparent. Restate the
+// resting fill here at `.btn.btn-adaptive` (0,2,0) so it always wins — same trick the
+// press uses. Mode-flip handled by pairing with [data-bs-theme="dark"].
+.btn.btn-adaptive {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+  --bs-btn-border-color: var(--nb-border-color);
+}
+[data-bs-theme="dark"] .btn.btn-adaptive {
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+}
+.btn.btn-adaptive-inverse {
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+  --bs-btn-border-color: var(--nb-border-color);
+}
+[data-bs-theme="dark"] .btn.btn-adaptive-inverse {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+}
+
+// Size variants keep the chunky proportions
+.btn-lg {
+  padding: 0.85rem 1.75rem;
+  font-size: 1.1rem;
+  @include nb-border($nb-border-width-lg);
+}
+
+.btn-sm {
+  padding: 0.35rem 0.8rem;
+  font-size: 0.85rem;
+}
+
+// Outline buttons: transparent fill, ink frame, fill-on-hover (no fade)
+[class*="btn-outline-"] {
+  background: transparent;
+  border-color: var(--nb-border-color);
+  color: var(--bs-body-color);
+
+  &:hover {
+    color: #111111;
+  }
+}
+.btn-outline-primary:hover { background: $primary; }
+.btn-outline-secondary:hover { background: $secondary; }
+.btn-outline-success:hover { background: $success; }
+.btn-outline-danger:hover { background: $danger; }
+.btn-outline-warning:hover { background: $warning; }
+.btn-outline-info:hover { background: $info; }
+
+// Link-style button stays flat (no border/shadow) but bold + underlined
+.btn-link {
+  border: 0;
+  box-shadow: none;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+
+  &:hover,
+  &:active {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+// NOTE: There are intentionally NO theme-specific accent button classes
+// (e.g. .btn-nb-yellow). Themes must restyle the STANDARD Bootstrap button
+// classes so the same markup works across themes (swap theme.id, done). Need a
+// yellow CTA? Use `.btn-warning` ($warning is the acid-yellow accent). Need other
+// accents? Use `.btn-primary` / `.btn-success` / etc. The base `.btn` rule above
+// already gives every variant the neobrutalist border + offset shadow + press.

package/dist/assets/themes/neobrutalism/css/components/_cards.scss

@@ -0,0 +1,47 @@
+// Neobrutalism Theme — Cards
+// Cards are the canonical "box": surface + hard ink border + offset shadow.
+// Restyles Bootstrap .card so feature grids, pricing tables, blog cards, and
+// the account UI all pick it up automatically.
+
+.card {
+  background: var(--nb-surface);
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+
+  .card-header {
+    background: transparent;
+    border-bottom: $nb-border-width solid var(--nb-border-color);
+    font-family: $nb-font-display;
+    font-weight: 800;
+    padding: 1.1rem 1.35rem;
+  }
+
+  .card-body {
+    padding: 1.35rem;
+  }
+
+  .card-footer {
+    background: transparent;
+    border-top: $nb-border-width solid var(--nb-border-color);
+    padding: 1rem 1.35rem;
+  }
+
+  // Card images sit flush against the top border
+  .card-img-top {
+    border-radius: 0;
+    border-bottom: $nb-border-width solid var(--nb-border-color);
+  }
+}
+
+// Clickable cards press like buttons
+a.card {
+  @include nb-press();
+  text-decoration: none;
+}
+
+// List groups inside cards keep hard dividers
+.list-group-item {
+  border-radius: 0;
+  border-color: var(--nb-border-color);
+}

package/dist/assets/themes/neobrutalism/css/components/_forms.scss

@@ -0,0 +1,88 @@
+// Neobrutalism Theme — Forms
+// Inputs are hard-bordered boxes. On focus they gain the offset shadow rather
+// than a glow ring — consistent with the rest of the system. Powers auth pages
+// (signin/signup), the contact form, and the hero demo form.
+
+.form-control,
+.form-select {
+  background-color: var(--nb-surface);
+  color: var(--bs-body-color);
+  border-radius: 0;
+  @include nb-border();
+  padding: 0.6rem 0.85rem;
+  font-weight: 500;
+  transition: $nb-transition;
+
+  &::placeholder {
+    color: rgba(var(--bs-body-color-rgb, 17, 17, 17), 0.45);
+    font-weight: 400;
+  }
+
+  &:focus {
+    background-color: var(--nb-surface);
+    color: var(--bs-body-color);
+    border-color: var(--nb-border-color);
+    @include nb-shadow(sm);
+    outline: 0;
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: var(--nb-surface-alt);
+    opacity: 1;
+  }
+}
+
+// Labels: bold, slightly mono for the editorial feel
+.form-label {
+  font-weight: 700;
+  margin-bottom: 0.4rem;
+}
+
+// Checkboxes / radios: square, hard-edged
+.form-check-input {
+  border-radius: 0;
+  border: $nb-border-width-sm solid var(--nb-border-color);
+  background-color: var(--nb-surface);
+
+  &:checked {
+    background-color: $primary;
+    border-color: var(--nb-border-color);
+  }
+
+  &:focus {
+    border-color: var(--nb-border-color);
+    box-shadow: none;
+  }
+}
+
+// Switch keeps square track (intentionally un-rounded)
+.form-switch .form-check-input {
+  border-radius: 0;
+}
+
+// Input groups: shared ink frame, no gaps
+.input-group {
+  .form-control,
+  .form-select,
+  .btn,
+  .input-group-text {
+    border-radius: 0;
+  }
+
+  .input-group-text {
+    background: var(--nb-surface-alt);
+    @include nb-border();
+    font-weight: 700;
+  }
+}
+
+// Validation states use accent colors with the ink frame intact
+.form-control.is-invalid,
+.was-validated .form-control:invalid {
+  border-color: $danger;
+}
+.form-control.is-valid,
+.was-validated .form-control:valid {
+  border-color: $success;
+}

package/dist/assets/themes/neobrutalism/css/components/_marketing.scss

@@ -0,0 +1,244 @@
+// Neobrutalism Theme: Marketing bands
+// The BASE marketing sections (omega-* markup, structure from the classy
+// floor in _theme.scss) painted neobrutalist: the ink-framed logo marquee,
+// oversized color-block stats, the plan cards, and the full-bleed ink CTA
+// panel. These overlays land AFTER the floor in the bundle, so they win
+// every collision.
+
+// ============================================
+// Trusted-by (marketing/trusted-by): ink-framed marquee strip
+// ============================================
+.omega-logos {
+  padding-block: clamp(2.5rem, 6vw, 4rem);
+
+  .container-fluid {
+    position: relative;
+    margin-inline: clamp(1rem, 4vw, 3rem);
+    width: auto;
+    padding: 2.5rem 0 1.75rem;
+    background: var(--nb-surface);
+    @include nb-border();
+    @include nb-shadow(md);
+    overflow: hidden;
+  }
+
+  // The band label: a mono ink chip pinned to the frame's top-left corner
+  .omega-micro {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    text-align: left;
+    margin-bottom: 0;
+    background: #111111;
+    color: var(--nb-accent-yellow);
+    padding: 0.3rem 0.7rem;
+    z-index: 5;
+  }
+
+  // Full-color marks, no grayscale fade: flat and loud, filter-adaptive for
+  // dark mode legibility stays with the floor's luminance flip on hover-out.
+  .omega-marquee__item {
+    opacity: 1;
+    filter: none;
+
+    img,
+    svg {
+      height: 2rem;
+    }
+  }
+
+  .omega-logos__mark svg {
+    height: 2.25rem;
+  }
+
+  [data-bs-theme='dark'] & .omega-marquee__item:not(:hover) {
+    filter: invert(1) grayscale(1);
+  }
+}
+
+// ============================================
+// Stats (marketing/stats): oversized color-block cells
+// ============================================
+// Base cells carry no per-item color, so the accent palette rotates by
+// position: blue, pink, yellow, green, then around again.
+.omega-stats {
+  gap: 1.5rem;
+}
+
+.omega-stat {
+  display: flex;
+  flex-direction: column;
+  padding: 1.75rem;
+  border-inline-start: 0;
+  color: #ffffff;
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+  @include nb-press($nb-shadow-offset-lg); // press matched to the lg resting shadow
+
+  &:nth-child(4n + 1) { background: var(--nb-accent-blue); }
+  &:nth-child(4n + 2) { background: var(--nb-accent-pink); }
+  &:nth-child(4n + 3) { background: var(--nb-accent-yellow); color: #111111; }
+  &:nth-child(4n + 4) { background: var(--nb-accent-green); }
+
+  .omega-stat__num {
+    font-family: $nb-font-display;
+    font-weight: 900;
+    font-size: clamp(2.5rem, 6vw, 3.5rem);
+    line-height: 1;
+    color: inherit;
+  }
+
+  .omega-stat__label {
+    font-weight: 800;
+    font-size: 1.1rem;
+    margin-top: 0.5rem;
+    color: inherit;
+  }
+
+  .omega-stat__sub {
+    font-family: $nb-font-mono;
+    font-size: 0.8rem;
+    margin-top: 0.25rem;
+    color: inherit;
+    opacity: 0.85;
+  }
+}
+
+// ============================================
+// CTA band (marketing/cta): full-bleed ink panel
+// ============================================
+.omega-cta {
+  padding: clamp(2.5rem, 6vw, 4.5rem);
+
+  &.omega-ink-panel {
+    background: #111111;
+    color: #FFFEF2;
+    border-radius: 0;
+    // Frame + offset shadow in the accent (not ink) so both read against
+    // the dark panel.
+    border: $nb-border-width-lg solid var(--nb-accent-yellow);
+    box-shadow: #{$nb-shadow-offset-lg} #{$nb-shadow-offset-lg} 0 var(--nb-accent-yellow);
+  }
+
+  .omega-micro {
+    color: var(--nb-accent-yellow);
+  }
+
+  .omega-cta__headline {
+    font-family: $nb-font-display;
+    font-weight: 900;
+    font-size: clamp(2rem, 6vw, 4rem);
+    line-height: 1;
+    letter-spacing: -0.03em;
+    color: inherit;
+
+    em {
+      font-style: normal;
+      background: var(--nb-accent-yellow);
+      color: #111111;
+      padding: 0 0.1em;
+      box-decoration-break: clone;
+      -webkit-box-decoration-break: clone;
+    }
+  }
+
+  .omega-cta__sub {
+    font-size: 1.25rem;
+    max-width: 50ch;
+    color: inherit;
+    opacity: 0.85;
+  }
+
+  // Buttons on the ink panel: the primary action goes signature yellow, the
+  // secondary reads as a light outline (an adaptive dark solid would sink
+  // into the panel).
+  .btn.btn-adaptive {
+    --bs-btn-color: #111111;
+    --bs-btn-bg: var(--nb-accent-yellow);
+  }
+
+  .btn.btn-outline-adaptive {
+    color: #FFFEF2;
+    border-color: #FFFEF2;
+
+    &:hover {
+      background: #FFFEF2;
+      color: #111111;
+    }
+  }
+}
+
+// ============================================
+// Plan cards (marketing/pricing-cards + /pricing): ink frames on hard
+// shadows, the popular plan goes yellow
+// ============================================
+// In the MAIN bundle, not the pricing page sheet ([#531]): the homepage plan
+// band composes the same cards, and a page-scoped skin left them bare there.
+.omega-price-card {
+  // The frame + offset shadow come from the theme's .card treatment; prices
+  // and names go chunky display.
+  .omega-price-card__name {
+    font-family: $nb-font-display;
+    font-weight: 900;
+  }
+
+  .omega-price-card__tagline {
+    font-family: $nb-font-mono;
+    font-size: 0.8rem;
+  }
+
+  .omega-price-card__price {
+    font-family: $nb-font-display;
+  }
+
+  .omega-price-card__currency {
+    font-weight: 900;
+  }
+
+  .omega-price-card__amount {
+    font-weight: 900;
+    letter-spacing: -0.02em;
+  }
+
+  .omega-price-card__per {
+    font-family: $nb-font-mono;
+  }
+
+  .price-per-unit {
+    font-weight: 700;
+  }
+}
+
+// Popular plan: signature yellow fill + thicker frame, ink text throughout
+.omega-price-card--popular {
+  background: var(--nb-accent-yellow);
+  color: #111111;
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+
+  .omega-price-card__tagline,
+  .omega-price-card__billing,
+  .omega-price-card__tier-note {
+    color: #111111;
+  }
+}
+
+// "Most popular": the mono ink flag pinned over the card's top edge
+.omega-price-card__popular {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: auto;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  font-family: $nb-font-mono;
+  font-weight: 700;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 0;
+  background: #111111;
+  color: var(--nb-accent-yellow);
+  border-color: #111111;
+}