@omega.js/web 0.1.0

package/themes/newsflash/README.md

@@ -0,0 +1,117 @@
+# Newsflash Theme
+
+An editorial news theme: warm paper surfaces, ink text and hairline frames,
+vermilion accents with volt highlights, optical-sized serif headlines
+(Fraunces) over a clean grotesk (Schibsted Grotesk). Signature elements: the
+live news ticker above the masthead, framed editorial images, kickers,
+section rules, drop caps, and pill controls that lift off small hard shadows.
+
+## Skin + bounded forks
+
+Newsflash follows the base/skin/fork convention
+(`docs/web/sections.md` "Markup convention"): it is a SKIN over the base
+theme's shared markup, plus a short list of identity forks. Every surface it
+does not fork renders base markup (`omega-*` classes) restyled by this
+theme's scss, so the nav, 404, about, contact, pricing, team, and blog
+taxonomy pages are structurally identical to every other skin, and the
+behavior contracts that ride base markup (`data-omega-countup`, the pricing
+JS hooks, the feature-comparison table) all work here unchanged.
+
+## Forks
+
+Identity forks, all wearing `newsflash-*` BEM classes. This list is
+machine-checked (packages/web/test/theme-convention.test.js): every markup
+file in the theme must appear here, and every listed path must exist.
+
+- `themes/newsflash/_layouts/frontend/core/base.html`: the news ticker band
+  above the masthead (shell otherwise aligned with base).
+- `themes/newsflash/_layouts/frontend/pages/index.html`: the newspaper
+  homepage (cover-story hero, top-story tiles, editorial feed with the
+  sticky rail, more-to-chew-on band).
+- `themes/newsflash/_layouts/frontend/pages/blog/index.html`: the lead-story
+  front page built on story cards.
+- `themes/newsflash/_layouts/frontend/pages/blog/post.html`: the article
+  treatment (reading progress, centered article head, framed article hero,
+  drop-cap body).
+- `themes/newsflash/_components/news/story-card/component.html`: the
+  editorial tile.
+- `themes/newsflash/_components/news/byline/component.html`: the byline
+  strip beside the tiles.
+- `themes/newsflash/_components/heading/lede/component.html`: the band-head
+  lede.
+- `themes/newsflash/_components/heading/rule-head/component.html`: the ruled
+  band head.
+- `themes/newsflash/_sections/marketing/desks/section.html`: the desks band,
+  a newsflash-unique section.
+- `themes/newsflash/_sections/marketing/rundown/section.html`: the rundown
+  band, a newsflash-unique section.
+- `themes/newsflash/_sections/marketing/newsletter-cta/section.html`: kept
+  for its "rail" variant (the homepage sidebar signup card), an arg-contract
+  extension the base band lacks; behavior stays inherited (the js lane).
+
+Everything else falls through to base. The scss floor for the fallthrough
+vocabulary comes from classy's token-pure partials (imported in
+`_theme.scss`) painted through this theme's `--omega-*` re-values, with
+editorial overlays on top (`css/components/_panels.scss` — the marketing set
+pieces, plan cards included, since `marketing/pricing-cards` composes them
+off /pricing too (#531) — the omega voice rules in `css/base/_utilities.scss`,
+the masthead re-skin of `.omega-nav` in `css/layout/_navigation.scss`, and the
+404/pricing page css).
+
+## Select the theme
+
+```json5
+// config/omega.json5 (consuming brand/app)
+theme: {
+  id: "newsflash",
+  appearance: "system", // or "light" / "dark" — dark mode is first-class
+},
+```
+
+## Customize
+
+Compile-time knobs: every variable in `_config.scss` is `!default` — override
+any of them from your project's main.scss:
+
+```scss
+// src/assets/css/main.scss (consuming project)
+@use 'omega:main' with (
+  $primary: #0E7C3A,                  // swap vermilion for forest green
+  $nf-volt: #FFD966,                  // warmer highlighter
+  $nf-radius: 12px,                   // tighter frames
+  $nf-font-display: ('Lora', serif),  // different serif voice
+);
+```
+
+Runtime paint reads the shared `--omega-*` token contract
+(`core/css/tokens/_index.scss`), which `css/base/_root.scss` re-values with
+the editorial sheet — light AND dark, three-stamp plumbing, Bootstrap bridged
+per classy's pattern. Consumers can override any token per-mode in plain CSS,
+and `brand.color` in omega.json5 recolors the whole accent family via the
+head-emitted ramps. Genuinely-editorial extras (volt, ink panels, hard-offset
+shadow recipes, grain) keep the `--nf-*` namespace.
+
+## Fonts
+
+Fraunces + Schibsted Grotesk are VENDORED (`fonts/` + `css/base/_fonts.scss`,
+both OFL, variable, latin + latin-ext) — no CDN requests. The runtime reads
+`--omega-font-ui` / `--omega-font-serif`, so re-pointing families is a
+two-property override.
+
+## Behaviors
+
+None of its own beyond the reading-progress page module
+(`js/pages/blog/[slug].js`). Bootstrap tooltips come from the shared
+core-layer initializer every theme imports; the ticker rides the shared
+motion engine's marquee; masthead scroll state is engine-stamped.
+
+## Conventions
+
+- Fork markup wears `newsflash-<block>__<element>--<modifier>` BEM
+  (`newsflash-ticker`, `newsflash-story-card`, `newsflash-kicker`,
+  `newsflash-frame`, `newsflash-rule-head`, ...). Bootstrap classes, the
+  shared `omega-*` vocabulary, `data-*` idioms, and core JS hooks
+  (`amount`, `billing-info`, `button-text`, `blog-post-content`) stay
+  untouched.
+- Components read `var(--omega-*)` for everything the contract names; the
+  `--nf-*` namespace is reserved for concepts that only exist in this theme.

package/themes/newsflash/_components/heading/lede/component.html

@@ -0,0 +1,14 @@
+{% comment %}
+  The newsflash lede — the big section header under a rule head: h1-sized h2
+  with optional accent span, then an optional lead paragraph. Callers keep
+  their own <header> shell (margins vary per band).
+{% endcomment %}
+<h2 class="newsflash-lede h1 mb-2">
+  {{ args.headline }}
+  {% iftruthy args.headline_accent %}
+    <span class="newsflash-accent">{{ args.headline_accent }}</span>
+  {% endiftruthy %}
+</h2>
+{% iftruthy args.subheadline %}
+  <p class="lead mb-0">{{ args.subheadline }}</p>
+{% endiftruthy %}

package/themes/newsflash/_components/heading/lede/component.json5

@@ -0,0 +1,23 @@
+{
+  description: 'Newsflash lede — the big section header under a rule head: h1-sized h2 with optional text-accent span, then an optional lead paragraph. Callers keep their own <header> shell.',
+
+  args: {
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+  },
+
+  defaults: {},
+
+  // Showcase variants (spec §9)
+  demo: [
+    {
+      label: 'Accent + subheadline',
+      args: {
+        headline: 'The week in',
+        headline_accent: 'review',
+        subheadline: 'A standfirst under the lede, set in the body voice.',
+      },
+    },
+  ],
+}

package/themes/newsflash/_components/heading/rule-head/component.html

@@ -0,0 +1,17 @@
+{% comment %}
+  The newsflash band head — micro h2 + horizontal rule + optional view-all
+  link (arrow-right built in: it is the idiom, not a knob). The h2 renders
+  only when text is set; the link only when link_text is set. The doc
+  comment trims its trailing newline (-%}) so the rendered markup starts
+  tight and call sites adjacent to whitespace-trimmed tags keep their
+  glued joins.
+{% endcomment -%}
+<div class="newsflash-rule-head" data-lazy="@class animation-slide-up">
+  {% iftruthy args.text %}
+    <h2>{{ args.text }}</h2>
+  {% endiftruthy %}
+  <span class="newsflash-rule-head__rule"></span>
+  {% iftruthy args.link_text %}
+    <a href="{{ args.link_href }}">{{ args.link_text }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
+  {% endiftruthy %}
+</div>

package/themes/newsflash/_components/heading/rule-head/component.json5

@@ -0,0 +1,23 @@
+{
+  description: 'Newsflash band head — micro h2 + horizontal rule + optional view-all link (arrow-right is part of the idiom). h2 suppressed when text is blank; the link renders only when link_text is set.',
+
+  args: {
+    text: 'string',
+    link_text: 'string',
+    link_href: 'string',
+  },
+
+  defaults: {},
+
+  // Showcase variants (spec §9)
+  demo: [
+    {
+      label: 'Label only',
+      args: { text: 'Top stories' },
+    },
+    {
+      label: 'With view-all link',
+      args: { text: 'The latest', link_text: 'View all', link_href: '/blog' },
+    },
+  ],
+}

package/themes/newsflash/_components/news/byline/component.html

@@ -0,0 +1,12 @@
+{% comment %}
+  The newsflash byline — author (looked up via omega_member from the id in
+  args.author) · pre-formatted date · readtime. Callers capture the readtime
+  ({% capture rt %}{% omega_readtime post.content %}{% endcapture %}) — the tag
+  needs the post content, which never rides args. p_class carries the
+  variant (default = the tile form; the lead splash passes its own).
+{% endcomment %}
+<p class="newsflash-byline {{ args.p_class }}">
+  <b class="text-body">{%- omega_member args.author, "name" -%}</b>
+  · {{ args.date }}
+  · {{ args.readtime }} min read
+</p>

package/themes/newsflash/_components/news/byline/component.json5

@@ -0,0 +1,18 @@
+{
+  description: 'Newsflash byline — author name (omega_member lookup from the author id) · pre-formatted date · readtime in minutes. Callers pre-capture readtime (omega_readtime needs post content, which never rides args). p_class carries the variant.',
+
+  args: {
+    author: 'string',
+    date: 'string',
+    readtime: 'string',
+    p_class: 'string',
+  },
+
+  defaults: {
+    p_class: 'small text-body-secondary mb-0',
+  },
+
+  // No demo (spec §9, deliberate): the component resolves its author through
+  // omega_member against live site content — a showcase page can't fabricate
+  // that lookup, so the entry documents args only.
+}

package/themes/newsflash/_components/news/story-card/component.html

@@ -0,0 +1,25 @@
+{% comment %}
+  The newsflash story tile — framed art (omega_post image-tag from args.id),
+  optional kicker (pass it display-ready: category callers append
+  `| default: "" | omega_title_case` so a category-less post suppresses the
+  kicker instead of rendering "Undefined"), h5 headline, byline. The tile
+  form shared by the index story grids, blog index, category/tag pages, and
+  related posts; the lead-story splash is its own layout-owned form.
+{% endcomment %}
+<a href="{{ args.url }}" class="newsflash-story-card">
+  <div class="newsflash-frame mb-3">
+    {%- omega_post args.id, "image-tag", class="w-100" -%}
+  </div>
+  {% iftruthy args.kicker %}
+    <span class="newsflash-kicker mb-1">{{ args.kicker }}</span>
+  {% endiftruthy %}
+  {% comment %} Generated-content tell (#208): callers pass the document's
+    `generated` flag straight through, so every story row of a sample post
+    says what it is. It sits on the kicker line above the headline (#322), a
+    chip beside it rather than a band of its own. {% endcomment %}
+  {% iftruthy args.generated %}
+    <span class="omega-chip omega-generated-badge mb-1">TEST</span>
+  {% endiftruthy %}
+  <h3 class="h5 my-2">{{ args.title }}</h3>
+  {% component "news/byline", author: args.author, date: args.date, readtime: args.readtime %}
+</a>

package/themes/newsflash/_components/news/story-card/component.json5

@@ -0,0 +1,21 @@
+{
+  description: 'Newsflash story tile — framed art (omega_post image-tag from the post id), optional display-ready kicker, h5 headline, nested news/byline. url arrives absolute (resolved.config.url | append: post.url); date pre-formatted; readtime pre-captured.',
+
+  args: {
+    url: 'string',
+    id: { description: 'post id — string or number (omega_post resolves either; posts carry numeric ids by convention)' },
+    kicker: 'string',
+    title: 'string',
+    author: 'string',
+    date: 'string',
+    readtime: 'string',
+    generated: { description: 'the document\'s `generated` frontmatter flag — truthy renders the #208 TEST badge (sample content only)' },
+  },
+
+  defaults: {},
+
+  // No demo (spec §9, deliberate): the tile resolves its art through omega_post
+  // (and its byline through omega_member) against live site content — a
+  // showcase page can't fabricate those lookups, so the entry documents
+  // args only.
+}

package/themes/newsflash/_config.scss

@@ -0,0 +1,147 @@
+// Newsflash Theme Configuration
+// ALL customizable variables are defined here with !default.
+// Consuming projects override any of these BEFORE the theme is imported.
+//
+// Design language: warm paper surfaces; ink text + hairline ink frames;
+// vermilion accents with volt highlights; serif display type over a clean
+// grotesk; pill controls sitting on small hard offset shadows that "lift"
+// on hover. An editorial newsroom — modern front page, not a brochure.
+//
+// Compile-time knobs live here; RUNTIME paint reads the shared --omega-*
+// tokens, which css/base/_root.scss re-values editorially (consumers can
+// also override them per-mode in plain CSS). brand.color in omega.json5
+// recolors the accent family without touching either.
+
+// ============================================
+// Bootstrap Color Overrides
+// ============================================
+// Editorial ink-and-accent palette mapped onto Bootstrap's semantic colors.
+$primary:    #F03612 !default;   // vermilion — the signature accent
+$secondary:  #5C544A !default;   // ink-soft — muted secondary actions
+$success:    #2E7D4F !default;   // editorial green
+$info:       #2742F5 !default;   // electric blue
+$warning:    #D9F24E !default;   // volt — highlighter yellow-green
+$danger:     #C81E1E !default;   // deep red (distinct from vermilion)
+$light:      #F7F2E7 !default;   // paper
+$dark:       #171310 !default;   // ink
+
+// ============================================
+// Paper & Ink (the structural neutrals)
+// ============================================
+// "Paper" = the page surface. "Ink" = text, frames, and hard shadows.
+$nf-paper:          #F7F2E7 !default;   // body background (light mode)
+$nf-paper-2:        #EFE8D8 !default;   // wells / alt surfaces (light mode)
+$nf-ink:            #171310 !default;   // text + frames (light mode)
+$nf-ink-soft:       #5C544A !default;   // deks, metas, muted text (light mode)
+
+// Dark mode counterparts — deep warm near-black paper, cream ink.
+$nf-paper-dark:     #181210 !default;
+$nf-paper-2-dark:   #221A14 !default;
+$nf-ink-dark:       #F2E8D9 !default;
+$nf-ink-soft-dark:  #A8998A !default;
+
+// ============================================
+// Accent Palette
+// ============================================
+$nf-vermilion:           #F03612 !default;
+$nf-vermilion-dark-mode: #FF4A26 !default;  // brightened for contrast on dark paper
+$nf-blue:                #2742F5 !default;
+$nf-blue-dark-mode:      #5B72FF !default;
+$nf-volt:                #D9F24E !default;  // stays vibrant in both modes
+$nf-volt-ink:            #171310 !default;  // readable text on volt
+
+// Ink panels (footer, ticker, big-read band) — dark slabs in BOTH modes.
+$nf-panel-bg:         #171310 !default;
+$nf-panel-color:      #F7F2E7 !default;
+$nf-panel-bg-dark:    #0E0B09 !default;     // deeper than dark paper so it still reads as a slab
+$nf-panel-color-dark: #F2E8D9 !default;
+
+// ============================================
+// Borders — hairline ink frames
+// ============================================
+$nf-border-width: 1.5px !default;
+$nf-radius:       18px !default;   // frames, cards, panels
+$nf-radius-sm:    12px !default;   // small frames, inputs
+
+// ============================================
+// Shadows — small hard offsets (controls) + soft pop (frames)
+// ============================================
+// Controls rest on a 3px hard ink shadow and LIFT on hover (shadow grows to
+// 6px while the element translates up-left). Frames use a soft "pop" blur.
+$nf-shadow-offset:       3px !default;
+$nf-shadow-offset-hover: 6px !default;
+$nf-shadow-pop: 0 18px 40px -18px rgba(23, 19, 16, .35) !default;
+
+// ============================================
+// Typography
+// ============================================
+// Fraunces (optical-sized serif) for display; Schibsted Grotesk for body/UI.
+// Both VENDORED in the theme's fonts/ dir (D5 — css/base/_fonts.scss); the
+// runtime reads the --omega-font-* tokens, which _root.scss re-points.
+$font-family-sans-serif: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
+$nf-font-display: 'Fraunces', Georgia, 'Times New Roman', serif !default;
+
+$headings-font-weight: 600 !default;
+$nf-heading-letter-spacing: -0.02em !default;
+$font-weight-bold: 700 !default;
+
+// ============================================
+// Motion — smooth editorial easing
+// ============================================
+// Rides the shared motion tokens (the root re-values them to the editorial
+// curve), so consumer token overrides retime every transition at once.
+$nf-transition: all var(--omega-speed) var(--omega-ease) !default;
+
+// ============================================
+// Component Sizing
+// ============================================
+// Avatar sizes map (matches Classy so shared layouts/includes render correctly)
+$avatar-sizes: (
+  null: 3rem,
+  2xs: 0.5rem,
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3.5rem,
+  xl: 5rem,
+  2xl: 7.5rem,
+  3xl: 10rem,
+  4xl: 12.5rem,
+  5xl: 15rem
+) !default;
+
+// ============================================
+// Forward Bootstrap with our configuration
+// ============================================
+@forward '../bootstrap/scss/bootstrap.scss' with (
+  $primary: $primary,
+  $secondary: $secondary,
+  $success: $success,
+  $info: $info,
+  $warning: $warning,
+  $danger: $danger,
+  $light: $light,
+  $dark: $dark,
+  $font-family-sans-serif: $font-family-sans-serif,
+  $headings-font-family: $nf-font-display,
+  $headings-font-weight: $headings-font-weight,
+  $font-weight-bold: $font-weight-bold,
+  // Type metrics MUST live in Bootstrap vars (not element rules in the main
+  // bundle): page bundles re-emit Bootstrap AFTER main, so Bootstrap's own
+  // .display-*/.lead/body rules would win there with the stock 300 weights.
+  $headings-line-height: 1.1,
+  $display-font-family: $nf-font-display,
+  $display-font-weight: 550,
+  $display-line-height: 1.04,
+  $lead-font-weight: 400,
+  $line-height-base: 1.55,
+  // Hairline ink borders everywhere; editorial radii (controls go pill in
+  // component SCSS — cards/frames keep these).
+  $border-width: $nf-border-width,
+  $border-radius: $nf-radius-sm,
+  $border-radius-sm: 8px,
+  $border-radius-lg: $nf-radius,
+  $border-radius-xl: 24px,
+  $enable-shadows: false,
+  $enable-negative-margins: true
+);

package/themes/newsflash/_layouts/frontend/core/base.html

@@ -0,0 +1,51 @@
+---
+layout: core/root
+
+config:
+  theme:
+    # html:
+    #   class: ""
+    # Fonts are VENDORED (css/base/_fonts.scss + fonts/) — no CDN link here.
+    body:
+      class: "d-flex flex-column min-vh-100"
+    # main:
+    #   class: "flex-fill"
+---
+
+<!-- News ticker — the latest headlines marquee above the masthead.
+     Rides the shared motion engine (data-omega-marquee: one authored set,
+     the engine clones it for the seamless -50% loop, hover pauses, clones
+     are aria-hidden + untabbable, reduced-motion/no-JS = static row).
+     Absent when the site has no posts. Nav-chrome: pages that disable the
+     masthead (cover chain — 404, auth) drop the ticker with it. -->
+{% if site.posts.size > 0 and resolved.config.theme.nav.enabled != false %}
+  <div class="newsflash-ticker omega-marquee" data-omega-marquee="50">
+    <div class="newsflash-ticker__track omega-marquee__track">
+      {% for post in site.posts limit: 5 %}
+        <span class="newsflash-ticker__item omega-marquee__item">
+          {% if forloop.first %}
+            <span class="newsflash-ticker__dot"></span><b>LATEST</b>
+          {% else %}
+            <i class="fa-solid fa-bolt"></i>
+          {% endif %}
+          <a href="{{ resolved.config.url }}{{ post.url }}">{{ post.post.title }}</a>
+        </span>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}
+
+<!-- Nav (controlled by page/layout front matter) -->
+{% unless resolved.config.theme.nav.enabled == false %}
+  {%- include frontend/sections/nav.html -%}
+{% endunless %}
+
+<!-- Main Content -->
+<main id="main-content" class="flex-fill {{ resolved.config.theme.main.class | omega_liquify }}" aria-label="Main content">
+  {{ content | omega_content_format }}
+</main>
+
+<!-- Footer (controlled by page/layout front matter) -->
+{% unless resolved.config.theme.footer.enabled == false %}
+  {%- include frontend/sections/footer.html -%}
+{% endunless %}