@omega.js/extension 0.1.0

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

@@ -0,0 +1,171 @@
+// Classy v2 forms — surface fields, hairline borders, brand-aware focus.
+// Carries v1's battle-tested input-group radius + validation-layout fixes.
+
+// ============================================
+// Form controls
+// ============================================
+.form-control,
+.form-select {
+  color: var(--omega-ink);
+  background-color: var(--omega-surface);
+  border: 1px solid var(--omega-line-strong);
+  transition:
+    border-color var(--omega-speed) var(--omega-ease),
+    box-shadow var(--omega-speed) var(--omega-ease);
+
+  &::placeholder {
+    color: var(--omega-ink-faint);
+  }
+
+  &:focus {
+    color: var(--omega-ink);
+    background-color: var(--omega-surface);
+    border-color: var(--omega-accent);
+    box-shadow: 0 0 0 0.1875rem var(--omega-accent-ring);
+  }
+
+  // Keep danger styling visible when an invalid field is focused — without
+  // this the classy :focus rule wins on specificity and the user sees the
+  // brand ring instead of the red one.
+  &.is-invalid:focus {
+    border-color: var(--omega-danger);
+    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--omega-danger) 30%, transparent);
+  }
+
+  // Override Chrome/Safari autofill background with token-true colors
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 1000px var(--omega-surface) inset !important;
+    -webkit-text-fill-color: var(--omega-ink) !important;
+    caret-color: var(--omega-ink);
+    border-color: var(--omega-accent) !important;
+    box-shadow: 0 0 0 1000px var(--omega-surface) inset, 0 0 0 2px var(--omega-accent-subtle) !important;
+  }
+}
+
+// ============================================
+// Labels & helper text
+// ============================================
+.form-label {
+  font-size: 0.84375rem;
+  font-weight: 550;
+  margin-bottom: 0.375rem;
+}
+
+.form-text {
+  font-size: 0.8125rem;
+  color: var(--omega-ink-muted);
+}
+
+// ============================================
+// Input groups — consistent radius across compositions
+// ============================================
+.input-group {
+  > .form-control,
+  > .form-control.is-invalid,
+  > .btn,
+  > .input-group-text {
+    border-radius: $input-border-radius;
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  > .input-group-text {
+    background: var(--omega-surface-2);
+    border-color: var(--omega-line-strong);
+    color: var(--omega-ink-muted);
+  }
+
+  // When FormManager appends a sibling `.invalid-feedback` inside the
+  // input-group, the trailing element is no longer `:last-child` and loses
+  // its right radius. Bootstrap signals this layout with `.has-validation`;
+  // restore the rounded right corners for the visually-last element.
+  &.has-validation {
+    > .btn:nth-last-child(2),
+    > .input-group-text:nth-last-child(2),
+    > .form-control:nth-last-child(2) {
+      border-top-right-radius: $input-border-radius;
+      border-bottom-right-radius: $input-border-radius;
+    }
+  }
+}
+
+// ============================================
+// Checks & radios
+// ============================================
+.form-check-input {
+  background-color: var(--omega-surface);
+  border-color: var(--omega-line-strong);
+
+  &:focus {
+    border-color: var(--omega-accent);
+    box-shadow: 0 0 0 0.1875rem var(--omega-accent-ring);
+  }
+}
+
+// Switches glide: the knob slides and the track tints (Bootstrap only
+// transitions background-position by default), with a light press squish.
+.form-switch .form-check-input {
+  transition:
+    background-position var(--omega-speed) var(--omega-ease),
+    background-color var(--omega-speed) var(--omega-ease),
+    border-color var(--omega-speed) var(--omega-ease);
+
+  &:active {
+    transform: scale(0.96);
+  }
+}
+
+.form-switch .form-check-input:checked {
+  background-color: var(--omega-accent);
+  border-color: var(--omega-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-switch .form-check-input {
+    transition: none;
+
+    &:active {
+      transform: none;
+    }
+  }
+}
+
+// Search pill — the topbar ⌘K field: promoted to the core component sheet in
+// #303, because the BASE app chrome renders it on every theme
+// (core/css/components/_index.scss).
+
+// ============================================
+// File drop zones (FormManager)
+// ============================================
+[data-file-drop] {
+  cursor: pointer;
+  border: 2px dashed var(--omega-line-strong) !important;
+  border-radius: var(--omega-radius-l);
+  transition:
+    border-color var(--omega-speed) var(--omega-ease),
+    background-color var(--omega-speed) var(--omega-ease);
+
+  &.file-drop-active {
+    border-color: var(--omega-accent) !important;
+    background-color: var(--omega-accent-subtle);
+  }
+
+  &.file-drop-has-file {
+    border-color: var(--omega-ok) !important;
+    border-style: solid !important;
+  }
+
+  &.file-drop-error {
+    border-color: var(--omega-danger) !important;
+  }
+}

package/dist/assets/themes/classy/css/components/_receipt.scss

@@ -0,0 +1,45 @@
+// Receipt panel — the order-as-a-receipt vocabulary shared by checkout
+// (order summary) and payment confirmation (the receipt moment). Promoted
+// from the confirmation page css once checkout became the second consumer.
+
+.omega-receipt__panel {
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  padding: 0.5rem 1.375rem;
+}
+
+.omega-receipt__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-block: 0.875rem;
+
+  & + .omega-receipt__row {
+    border-top: 1px solid var(--omega-line);
+  }
+
+  &--total {
+    border-top: 1px solid var(--omega-line-strong) !important;
+  }
+
+  // Full-width block content inside the row rhythm (discount input + status)
+  &--stack {
+    display: block;
+  }
+}
+
+.omega-receipt__total {
+  font-family: var(--omega-font-marketing);
+  font-size: 1.5rem;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.omega-receipt__note {
+  padding: 0.875rem 0;
+  border-top: 1px solid var(--omega-line);
+  color: var(--omega-ink-muted);
+}

package/dist/assets/themes/classy/css/layout/_footer.scss

@@ -0,0 +1,298 @@
+// Classy v2 footer — draft-2 pattern: surface panel over a hairline, brand
+// block + auto-fit link columns, then ONE base row where every utility
+// (legal, language, appearance) sits on the same quiet 1.75rem scale.
+
+.omega-footer {
+  padding: 3.75rem 0 2rem;
+  background: var(--omega-surface);
+  border-top: 1px solid var(--omega-line);
+  font-size: 0.875rem;
+
+  // ── Top grid ────────────────────────────────────────────────────────────
+  .omega-footer__grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.5rem 3.5rem;
+  }
+
+  .omega-footer__brand {
+    flex: 0 1 19rem;
+    min-width: 15rem;
+  }
+
+  .omega-footer__desc {
+    margin: 0.875rem 0 0;
+    max-width: 30ch;
+    color: var(--omega-ink-muted);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+
+  .omega-footer__social {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 1.125rem;
+  }
+
+  .omega-footer__social-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--omega-radius-s);
+    color: var(--omega-ink-faint);
+    transition:
+      color var(--omega-speed) var(--omega-ease),
+      background-color var(--omega-speed) var(--omega-ease);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--omega-ink);
+      background: var(--omega-surface-2);
+    }
+  }
+
+  .omega-footer__cols {
+    flex: 1 1 24rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+    gap: 2rem;
+  }
+
+  .omega-footer__head {
+    margin-bottom: 0.75rem;
+    font-size: 0.6875rem;
+    font-weight: 650;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    color: var(--omega-ink-faint);
+  }
+
+  .omega-footer__link {
+    display: inline-block;
+    padding: 0.25rem 0;
+    color: var(--omega-ink-muted);
+    font-size: 0.8125rem;
+    text-decoration: none;
+    transition: color var(--omega-speed) var(--omega-ease);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--omega-ink);
+    }
+  }
+
+  // ── Base row ────────────────────────────────────────────────────────────
+  .omega-footer__base {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.875rem 1.5rem;
+    margin-top: 3rem;
+    padding-top: 1.375rem;
+    border-top: 1px solid var(--omega-line);
+  }
+
+  .omega-footer__copyright {
+    color: var(--omega-ink-faint);
+    font-size: 0.78125rem;
+
+    a {
+      color: var(--omega-accent);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--omega-accent-hover);
+      }
+    }
+  }
+
+  // Framework attribution — same quiet scale as the copyright beside it,
+  // but the bolt and link carry the brand primary (#379)
+  .omega-footer__powered {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--omega-ink-faint);
+    font-size: 0.78125rem;
+
+    .fa {
+      color: var(--omega-accent);
+    }
+
+    a {
+      color: var(--omega-accent);
+      text-decoration: none;
+      transition: color var(--omega-speed) var(--omega-ease);
+
+      &:hover,
+      &:focus-visible {
+        color: var(--omega-accent-hover);
+      }
+    }
+  }
+
+  .omega-footer__tools {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.875rem;
+    margin-left: auto;
+  }
+
+  .omega-footer__legal {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.875rem;
+
+    a {
+      color: var(--omega-ink-muted);
+      font-size: 0.78125rem;
+      text-decoration: none;
+      transition: color var(--omega-speed) var(--omega-ease);
+
+      &:hover,
+      &:focus-visible {
+        color: var(--omega-ink);
+      }
+    }
+  }
+
+  // Quiet pill control (language dropup trigger) — matches the segmented scale
+  .omega-footer__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    height: 1.75rem;
+    padding: 0 0.625rem;
+    background: transparent;
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-s);
+    color: var(--omega-ink-muted);
+    font-size: 0.78125rem;
+    font-weight: 550;
+    transition:
+      color var(--omega-speed) var(--omega-ease),
+      border-color var(--omega-speed) var(--omega-ease);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--omega-ink);
+      border-color: var(--omega-line-strong);
+    }
+
+    // Bootstrap's caret, softened
+    &.dropdown-toggle::after {
+      margin-left: 0.125rem;
+      opacity: 0.5;
+    }
+  }
+
+  // Appearance segmented control — appearance.js stamps .active/aria-pressed
+  .omega-footer__seg {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem;
+    gap: 0.125rem;
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-s);
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.375rem;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      border-radius: calc(var(--omega-radius-s) - 2px);
+      color: var(--omega-ink-faint);
+      transition:
+        color var(--omega-speed) var(--omega-ease),
+        background-color var(--omega-speed) var(--omega-ease);
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+
+      &:hover {
+        color: var(--omega-ink);
+      }
+
+      &.active {
+        background: var(--omega-surface-2);
+        color: var(--omega-ink);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--omega-accent-ring);
+        outline-offset: 1px;
+      }
+    }
+
+    // The gliding thumb carries the active surface once the engine is live
+    &[data-omega-segmented-ready] button.active {
+      background: transparent;
+    }
+
+    .omega-segmented__thumb {
+      background: var(--omega-surface-2);
+      border: 0;
+      border-radius: calc(var(--omega-radius-s) - 2px);
+      box-shadow: none;
+    }
+  }
+
+  // Below lg the container (720px) can no longer hold the link columns beside
+  // the 19rem brand block, so the grid wraps. Left alone the brand keeps its
+  // 19rem basis and sits in the corner of a full-width row with ~390px of
+  // stranded space beside it — so at that breakpoint the brand takes the whole
+  // row (content height, a wider one-liner) and the columns share the next.
+  @media (max-width: 991.98px) {
+    .omega-footer__grid {
+      gap: 2.25rem;
+    }
+
+    .omega-footer__brand {
+      flex: 1 1 100%;
+    }
+
+    .omega-footer__desc {
+      max-width: 56ch;
+    }
+
+    .omega-footer__cols {
+      flex-basis: 100%;
+    }
+  }
+
+  @media (max-width: 575.98px) {
+    .omega-footer__base {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .omega-footer__tools {
+      margin-left: 0;
+    }
+  }
+}
+
+// Language flag chip (the footer switcher's client-rendered rows, #129): the
+// flags size like inline icons, with a hairline ring + tiny radius so the
+// square set reads clean beside the native language name. Lives HERE, not in
+// base/_utilities, because every theme that inherits classy's footer include
+// imports this file — a theme-local home left the other themes with unsized
+// 512px flag images.
+.omega-language-flag {
+  width: 1.125em;
+  height: 1.125em;
+  margin-inline-end: 0.5em;
+  vertical-align: -0.15em;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px var(--omega-line);
+}

package/dist/assets/themes/classy/css/layout/_general.scss

@@ -0,0 +1,209 @@
+// Classy v2 general layout — section rhythm + breakout utilities.
+
+// ============================================
+// Section rhythm
+// ============================================
+// Every frontend page is a stack of <section>s (blog posts open with an
+// <article>); the first one absorbs the fixed-nav height so backgrounds run
+// flush behind the transparent nav.
+
+// The opener's clearance: 4rem of fixed nav plus hero breathing room. One
+// home, because a blog post hands the same value to its masthead band below
+// and /pricing adds the promo banner's headroom to it.
+$opener-clearance: 10rem;
+$opener-clearance-lg: 12rem;
+
+@mixin nav-clearance {
+  padding-top: $opener-clearance;
+
+  @media (min-width: 992px) {
+    padding-top: $opener-clearance-lg;
+  }
+}
+
+main {
+  > section,
+  > article {
+    // Bronn-calibrated air (Ian 2026-07-16: "MORE EXPANDED") — sections
+    // breathe; density is the dashboard's job, not marketing's
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+
+    @media (min-width: 992px) {
+      padding-top: 7rem;
+      padding-bottom: 7rem;
+    }
+
+    // first-of-TYPE, not first-child: /pricing opens with the promo-banner
+    // div and a post with the read-progress bar, and either would otherwise
+    // swallow the clearance the hero needs
+    &:first-of-type {
+      @include nav-clearance;
+    }
+  }
+
+  // A blog post opens with its dotfield masthead INSIDE the <article>, so the
+  // clearance has to travel one level down: held by the <article>, the band
+  // starts below the nav and its dots read detached from it (Ian 2026-07-31).
+  // On the band, the dots run up behind the transparent nav, giving a post
+  // the same opener every other page has.
+  > article:first-of-type:has(> .omega-dotgrid:first-child) {
+    padding-top: 0;
+
+    > .omega-dotgrid:first-child {
+      @include nav-clearance;
+    }
+  }
+}
+
+// A page carrying the fixed promo banner (/pricing) holds the banner's own
+// room in its opener, from first paint. The banner is NAV chrome: showing it
+// pushes the nav down and moves NOTHING else (#764), so the room has to be
+// there before it arrives, or the masthead opens under the pushed nav. The
+// opener already clears the 4rem nav by 6rem, which swallows the one-row
+// banner every width from 992px up; a phone wraps it onto three rows
+// (~7.4rem), which overruns the clearance by ~1.5rem, and the token adds a
+// little air on top so the eyebrow never sits flush under the pushed nav.
+// Static on purpose: a closed banner keeps the room rather than moving the page.
+main:has(#pricing-promo-banner) > section:first-of-type {
+  --omega-promo-headroom: 3rem;
+
+  padding-top: calc(#{$opener-clearance} + var(--omega-promo-headroom));
+
+  // This rule outranks the mixin, so the desktop arm restates its value or
+  // the phone padding wins at every width; the zero token keeps the two
+  // arms one shape (the #44 pin counts the mixin's own literals).
+  @media (min-width: 992px) {
+    --omega-promo-headroom: 0rem;
+
+    padding-top: calc(#{$opener-clearance-lg} + var(--omega-promo-headroom));
+  }
+}
+
+// Shared section header (micro label + display headline + sub)
+.omega-section-head {
+  max-width: 44rem;
+
+  .omega-micro {
+    display: block;
+    margin-bottom: 0.875rem;
+  }
+
+  p {
+    margin-top: 1rem;
+    color: var(--omega-ink-muted);
+    font-size: 1.03125rem;
+  }
+}
+
+.omega-section-head--center {
+  margin-inline: auto;
+  text-align: center;
+}
+
+// ============================================
+// Section breakout utilities (edge-to-edge helpers, kept from v1)
+// ============================================
+.section-breakout-x {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  width: 100vw;
+}
+
+.section-breakout-x-nearly {
+  margin-left: calc(-50vw + 50% + 0.25rem);
+  margin-right: calc(-50vw + 50% + 0.25rem);
+  width: calc(100vw - 0.5rem);
+
+  @media (min-width: 768px) {
+    margin-left: calc(-50vw + 50% + 1rem);
+    margin-right: calc(-50vw + 50% + 1rem);
+    width: calc(100vw - 2rem);
+  }
+
+  @media (min-width: 1200px) {
+    margin-left: calc(-50vw + 50% + 1.5rem);
+    margin-right: calc(-50vw + 50% + 1.5rem);
+    width: calc(100vw - 3rem);
+  }
+}
+
+@media (min-width: 576px) {
+  .section-breakout-x-sm {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+
+  .section-breakout-x-nearly-sm {
+    margin-left: calc(-50vw + 50% + 0.25rem);
+    margin-right: calc(-50vw + 50% + 0.25rem);
+    width: calc(100vw - 0.5rem);
+  }
+}
+
+@media (min-width: 768px) {
+  .section-breakout-x-md {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+
+  .section-breakout-x-nearly-md {
+    margin-left: calc(-50vw + 50% + 1rem);
+    margin-right: calc(-50vw + 50% + 1rem);
+    width: calc(100vw - 2rem);
+  }
+}
+
+@media (min-width: 992px) {
+  .section-breakout-x-lg {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+
+  .section-breakout-x-nearly-lg {
+    margin-left: calc(-50vw + 50% + 1rem);
+    margin-right: calc(-50vw + 50% + 1rem);
+    width: calc(100vw - 2rem);
+  }
+}
+
+@media (min-width: 1200px) {
+  .section-breakout-x-xl {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+
+  .section-breakout-x-nearly-xl {
+    margin-left: calc(-50vw + 50% + 1.5rem);
+    margin-right: calc(-50vw + 50% + 1.5rem);
+    width: calc(100vw - 3rem);
+  }
+}
+
+@media (min-width: 1400px) {
+  .section-breakout-x-xxl {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+
+  .section-breakout-x-nearly-xxl {
+    margin-left: calc(-50vw + 50% + 1.5rem);
+    margin-right: calc(-50vw + 50% + 1.5rem);
+    width: calc(100vw - 3rem);
+  }
+}
+
+// Pull a section up behind the transparent nav
+.section-breakout-top {
+  margin-top: -4rem;
+  padding-top: 8.5rem !important;
+
+  @media (min-width: 992px) {
+    padding-top: 10rem !important;
+  }
+}