@fluid-theme/core 0.4.3 → 2.0.0

package/src/components/hero.css

@@ -1,21 +1,25 @@
 /**
- * Fluid Framework - Hero Component
+ * Fluid Theme - Hero Component
  * @layer components
  *
- * Full-width hero sections for landing pages and page headers.
- * Uses the positioning system for layout - just add data attributes.
- *
- * Philosophy:
- * - The hero is a canvas, not a constraint
- * - Backgrounds, overlays, and content are separate concerns
- * - Serene presence, not aggressive attention-seeking
+ * Plain background, start-aligned, content-tall. Order: eyebrow → display
+ * headline → lede → actions; the default media is the plate, a full-bleed
+ * figure under the text at its natural ratio (data-aspect crops it).
+ * The headline is the base .display rule: it fills the hero's column, and
+ * hand breaks (<br>) hold as the screen grows (src/core/base.css).
  *
  * Usage:
- *   <section class="hero" data-layout="center" data-padding="xl">
- *     <h1>Headline</h1>
- *     <p>Subheadline</p>
- *     <button>Call to Action</button>
+ *   <section class="hero">
+ *     <p class="eyebrow">Studio</p>
+ *     <h1 class="hero__headline" data-fit>Make the<br>quiet thing<br>loud.</h1>
+ *     <p class="lede">One or two sentences.</p>
+ *     <div class="hero__actions"><a class="button" href="#">Start</a></div>
+ *     <figure class="hero__plate"><img src="..." alt="..." width="1600" height="900"></figure>
  *   </section>
+ *
+ * Themes: data-theme="dark" (a dark band: the role scope, tokens.css),
+ * "accent" (solid accent, shared with data-bg="accent-strong"), "gradient",
+ * "subtle"; data-overlay over a .hero__background image.
  */
 
 @layer components {
@@ -25,9 +29,11 @@
      A full-width section ready for content
      ======================================== */
 
+  /* The inline padding puts the content on the .container edges while the
+     background runs full width. */
   .hero {
-    --hero-min-height: 60vh;
-    --hero-background: var(--color-surface);
+    --hero-min-height: auto;
+    --hero-background: var(--color-background);
     --hero-text-color: var(--color-text);
 
     position: relative;
@@ -36,9 +42,19 @@
     color: var(--hero-text-color);
     overflow: hidden;
     container-type: inline-size;
+    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
+  }
+
+  /* An inner .container owns the edge, as in every .section; padding here
+     too would inset the content twice. */
+  .hero:has(> .container) { padding-inline: 0; }
 
-    /* Inline padding to prevent text touching edges */
-    padding-inline: var(--space-5);
+  /* Generous space goes between sections, not above the first line: at
+     1440 × 900 the old 160px top pushed the actions onto the fold. It
+     follows --space-section, so a tight look keeps a tight hero. The
+     data-padding scale (layouts layer) wins whenever the author sets it. */
+  .hero:not([data-padding]) {
+    padding-block: min(var(--space-xl), var(--space-section));
   }
 
   /* Ensure content stays above backgrounds/overlays */
@@ -58,12 +74,10 @@
   }
 
   .hero[data-size="full"] {
-    --hero-min-height: 100vh;
+    --hero-min-height: 100svh;
   }
 
-  .hero[data-size="auto"] {
-    --hero-min-height: auto;
-  }
+  /* data-size="auto" is the default: no rule. */
 
 
   /* ========================================
@@ -75,33 +89,77 @@
     max-inline-size: var(--content-width, var(--container-md));
   }
 
+  /* The headline's face, size, leading and balance are the base .display
+     rule; here only its overflow safety (it is not always a heading; a long
+     word breaks, never with an automatic hyphen) and the space to the lede.
+     The space grows with the headline (0.18em), so a display face with a
+     long descender (a Didone at 190px) never inks into the lede. */
   .hero__headline {
-    /* Fluid scaling: smooth transition across all viewport sizes */
-    font-size: clamp(2rem, 1rem + 5vw, 3.5rem);
-    font-weight: var(--weight-bold);
-    letter-spacing: -0.03em;
-    line-height: var(--leading-tight);
-    margin-block-end: var(--space-4);
-    text-wrap: balance; /* Prevent orphans in headlines */
+    margin-block: 0 max(var(--space-m), 0.18em);
+    overflow-wrap: break-word;
+    hyphens: manual;
   }
 
-  .hero__subheadline {
-    /* Fluid scaling for subheadlines */
-    font-size: clamp(1.125rem, 0.875rem + 1.5vw, 1.5rem);
-    color: var(--hero-text-muted, var(--color-text-muted));
-    line-height: var(--leading-relaxed);
-    margin-block-end: var(--space-6);
-    text-wrap: pretty; /* Better line breaks */
-    max-inline-size: 65ch; /* Optimal reading width */
+  .hero .eyebrow { margin-block-end: var(--space-m); }
+
+  /* The label over a display headline: the trimmed cap height sat 24px
+     under it at 160px type, glued on. The gap grows with the headline
+     (about 48px at 160px, 20px on a phone); margins collapse with the
+     eyebrow's own. */
+  .eyebrow + :is(.hero__headline, .display) { margin-block-start: max(var(--space-m), 0.3em); }
+
+  /* In a gap layout (the stack's <div class="container stack"> inside the
+     hero) the gap is the rhythm; margins would add to it. */
+  :is(.stack, .cluster, .grid) > :is(.hero__headline, .hero__subheadline, .lede, .eyebrow) {
+    margin-block: 0;
+  }
+
+  :is(.hero__subheadline, .hero .lede) {
+    font-family: var(--font-heading);
+    font-weight: calc(var(--weight-light) + var(--_dark-weight));
+    font-size: var(--step-1);
+    line-height: 1.4;
+    letter-spacing: -0.005em;
+    color: var(--hero-text-muted, var(--hero-text-color));
+    max-inline-size: 30em;
+    margin-block: 0 var(--space-l);
   }
 
   .hero__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-4);
+    align-items: center;
+    gap: var(--space-s) var(--space-m);
     justify-content: inherit;
   }
 
+  /* The plate: a full-bleed figure under the text, natural ratio. Its
+     negative margin is the hero's inline padding measured on the viewport;
+     a scrollbar's few extra pixels are clipped by the hero. */
+  .hero__plate {
+    margin-block: var(--space-xl) calc(-1 * var(--space-xl));
+    margin-inline: calc(-1 * max(var(--page-edge), (100vi - var(--container-content)) / 2));
+  }
+
+  /* An uncaptioned plate runs to the hero's bottom edge; a caption keeps
+     --space-m above that edge, so its text never sits flush on a dark or
+     tinted hero band (visual-scan SEAM, 2026-10-29). */
+  .hero__plate:has(> figcaption) {
+    margin-block-end: calc(var(--space-m) - var(--space-xl));
+  }
+
+  .hero__plate :is(img, video) {
+    inline-size: 100%;
+    border-radius: 0;
+  }
+
+  .hero__plate :is(img, video)[data-aspect] { max-block-size: 88svh; }
+
+  /* The caption returns to the content edge. */
+  .hero__plate figcaption {
+    margin-inline: max(var(--page-edge), (100vi - var(--container-content)) / 2);
+  }
+
 
   /* ========================================
      HERO BACKGROUNDS
@@ -113,6 +171,9 @@
     inset: 0;
     z-index: 0;
     overflow: hidden;
+    /* data-layout="left" (and the other layouts) cap each child's width; the
+       background is not content and always fills the hero (#72). */
+    max-inline-size: none;
   }
 
   .hero__background img,
@@ -122,13 +183,7 @@
     object-fit: cover;
   }
 
-  /* Focal point control for hero backgrounds */
-  .hero__background[data-focus="top"] img { object-position: center top; }
-  .hero__background[data-focus="bottom"] img { object-position: center bottom; }
-  .hero__background[data-focus="left"] img { object-position: left center; }
-  .hero__background[data-focus="right"] img { object-position: right center; }
-  .hero__background[data-focus="center"] img { object-position: center center; }
-
+  /* data-focus on the wrapper sets --focus (base.css), which the img reads. */
   /* Custom focal point via CSS custom properties */
   .hero__background[style*="--focus"] img {
     object-position: var(--focus-x, 50%) var(--focus-y, 50%);
@@ -149,7 +204,7 @@
     pointer-events: none;
   }
 
-  /* Overlay intensity presets */
+  /* Overlay intensity */
   .hero[data-overlay="light"]::before {
     --hero-overlay: oklch(0% 0 0 / 0.2);
   }
@@ -178,34 +233,48 @@
      Pre-designed color schemes
      ======================================== */
 
-  /* Dark hero with light text — derives from page's dark mode colors */
+  /* Dark hero: a dark band. Its roles re-resolve dark (tokens.css role scope). */
   .hero[data-theme="dark"] {
-    --hero-background: color-mix(in oklch, var(--accent) 10%, oklch(12% 0.02 230));
-    --hero-text-color: oklch(94% 0.01 220);
-    --hero-text-muted: oklch(70% 0.01 220);
+    --hero-background: var(--band-inverse);
+    --hero-text-color: var(--color-text);
+    --hero-text-muted: var(--color-text-muted);
   }
 
-  /* Accent color hero */
+  /* Accent hero: the solid accent band, shared with data-bg="accent-strong"
+     (src/fluid.css re-points the roles and button hooks). */
   .hero[data-theme="accent"] {
     --hero-background: var(--accent);
-    --hero-text-color: var(--white);
-    --hero-text-muted: oklch(100% 0 0 / 0.85);
+    --hero-text-color: var(--on-accent);
+    --hero-text-muted: var(--on-accent);
   }
 
-  /* Subtle/muted hero */
-  .hero[data-theme="subtle"] {
+  /* Headings in a themed hero take the hero's text colour, not the page's. */
+  .hero[data-theme] :is(h1, h2, h3, h4, h5, h6, .hero__headline) {
+    color: var(--hero-text-color);
+  }
+
+  /* Section bands (data-bg, src/fluid.css) on a hero */
+  .hero:is([data-bg="tinted"], [data-bg="alt"]) {
     --hero-background: var(--color-surface);
-    --hero-text-color: var(--color-text);
-    --hero-text-muted: var(--color-text-muted);
   }
 
-  /* Gradient hero - derives from accent color */
+  .hero[data-bg="accent"] {
+    --hero-background: var(--accent-subtle);
+  }
+
+  /* Subtle: the default hero with a muted lede. */
+  .hero[data-theme="subtle"] { --hero-text-muted: var(--color-text-muted); }
+
+  /* Gradient hero: derives from the accent. Not a role band, so its ink
+     and focus are lifted here. */
   .hero[data-theme="gradient"] {
+    --accent-ink: oklch(from var(--accent) max(l, 0.76) c h);
+    --color-focus: var(--accent-ink);
     --hero-background: linear-gradient(
       135deg,
-      color-mix(in oklch, var(--accent) 30%, oklch(15% 0.02 230)) 0%,
-      color-mix(in oklch, var(--accent) 20%, oklch(25% 0.02 230)) 50%,
-      color-mix(in oklch, var(--accent) 15%, oklch(35% 0.02 230)) 100%
+      color-mix(in oklch, var(--accent) 30%, oklch(from var(--neutral-tint) 0.15 calc(c * 3) h)) 0%,
+      color-mix(in oklch, var(--accent) 20%, oklch(from var(--neutral-tint) 0.25 calc(c * 3) h)) 50%,
+      color-mix(in oklch, var(--accent) 15%, oklch(from var(--neutral-tint) 0.35 calc(c * 3) h)) 100%
     );
     --hero-text-color: oklch(95% 0.01 0);
     --hero-text-muted: oklch(80% 0.01 0);
@@ -213,6 +282,26 @@
   }
 
 
+  /* Legacy floor (see tokens.css): without relative colour the roles are
+     plain light values, so the dark hero goes light like every other dark
+     band (its text is the floor's dark text). The gradient keeps fixed
+     light text, so its paint is computed here from the default tint. */
+  @supports not (color: oklch(from red min(l, 0.5) c h)) {
+    .hero[data-theme="dark"] {
+      --hero-background: var(--color-background);
+    }
+
+    .hero[data-theme="gradient"] {
+      --hero-background: linear-gradient(
+        135deg,
+        color-mix(in oklch, var(--accent) 30%, oklch(15% 0.03 75)) 0%,
+        color-mix(in oklch, var(--accent) 20%, oklch(25% 0.03 75)) 50%,
+        color-mix(in oklch, var(--accent) 15%, oklch(35% 0.03 75)) 100%
+      );
+    }
+  }
+
+
   /* ========================================
      SPLIT HERO
      Content + media side by side
@@ -229,7 +318,52 @@
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card);
+  }
+
+
+  /* ========================================
+     DATA-ARRANGE="auto": the centered stack
+
+     Lays out flat hero markup as a centered grid: headline,
+     subheadline, actions, media. (The per-preset arrangements it
+     used to choose between went with the presets.)
+
+     Requires the flat hero markup (hero__headline, hero__subheadline,
+     hero__actions, optional hero__media as direct children). Markup
+     using a hero__content wrapper keeps its data-layout behavior —
+     the :has() guard leaves it untouched. data-arrange wins over
+     data-layout because components layer beats layouts layer.
+     ======================================== */
+
+  .hero[data-arrange="auto"]:not(:has(> .hero__content)) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "headline"
+      "subheadline"
+      "actions"
+      "media";
+    align-content: center;
+    justify-items: start;
+    column-gap: var(--space-10);
+  }
+
+  .hero[data-arrange="auto"] > .hero__headline { grid-area: headline; }
+  .hero[data-arrange="auto"] > .hero__subheadline { grid-area: subheadline; }
+  .hero[data-arrange="auto"] > .hero__actions { grid-area: actions; }
+  .hero[data-arrange="auto"] > .hero__media { grid-area: media; }
+
+  /* On narrow viewports the media moves above the actions. */
+  @media (max-width: 48rem) {
+    .hero[data-arrange="auto"]:not(:has(> .hero__content)) {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas:
+        "headline"
+        "subheadline"
+        "media"
+        "actions";
+    }
   }
 
 
@@ -253,41 +387,22 @@
 
   /* ========================================
      HERO BUTTON CONTRAST
-     Ensure buttons are visible on themed backgrounds
+     Dark and accent heroes re-point the roles, so their buttons follow on
+     their own. The gradient hero is not a role band: its outline buttons
+     go white. `.button` too, so a link matches a <button> (#72).
      ======================================== */
 
-  /* Dark theme: use light outline buttons for secondary */
-  .hero[data-theme="dark"] button[data-variant="outline"],
-  .hero[data-theme="gradient"] button[data-variant="outline"] {
+  .hero[data-theme="gradient"] :is(button, .button)[data-variant="outline"] {
     --_btn-color: var(--white);
     --_btn-border: var(--white);
-    --_btn-bg-hover: oklch(100% 0 0 / 0.15);
-  }
-
-  /* Accent theme: invert button colors for contrast */
-  .hero[data-theme="accent"] button:not([data-variant]) {
-    --_btn-color: var(--accent);
-    --_btn-bg: var(--white);
-    --_btn-bg-hover: var(--gray-95);
+    --_btn-bg-hover: var(--white);
+    --_btn-color-hover: var(--black);
   }
 
-  .hero[data-theme="accent"] button[data-variant="outline"] {
-    --_btn-color: var(--white);
-    --_btn-border: var(--white);
-    --_btn-bg-hover: oklch(100% 0 0 / 0.15);
+  .hero:is([data-theme="gradient"], [data-overlay]) :is(button, .button)[data-variant="ghost"] {
+    --_btn-color: var(--hero-text-color);
   }
 
 
-  /* ========================================
-     REDUCED MOTION
-     Respect user preferences
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .hero,
-    .hero * {
-      animation: none !important;
-      transition: none !important;
-    }
-  }
+  /* Reduced motion: the reset shortens every transition and animation. */
 }

package/src/components/indicator.css

@@ -31,6 +31,8 @@
   /* Good (Success family) - ≥80% */
   [data-status="good"] {
     --status-color: var(--color-success);
+    --status-fill: var(--color-success-fill);
+    --status-on: var(--color-success-on);
     --status-bg: var(--color-success-subtle);
     --status-text: var(--color-success);
     --status-border: var(--color-success);
@@ -39,15 +41,18 @@
   /* Moderate (Warning family) - 60-79% */
   [data-status="moderate"] {
     --status-color: var(--color-warning);
+    --status-fill: var(--color-warning-fill);
+    --status-on: var(--color-warning-on);
     --status-bg: var(--color-warning-subtle);
     --status-text: var(--color-warning);
-    --status-text: oklch(from var(--color-warning) calc(l - 0.2) c h);
     --status-border: var(--color-warning);
   }
 
   /* Severe (Error family) - <60% */
   [data-status="severe"] {
     --status-color: var(--color-error);
+    --status-fill: var(--color-error-fill);
+    --status-on: var(--color-error-on);
     --status-bg: var(--color-error-subtle);
     --status-text: var(--color-error);
     --status-border: var(--color-error);
@@ -105,23 +110,12 @@
     background-color: var(--_progress-track);
     border-radius: var(--_progress-radius);
     overflow: hidden;
-    /* Subtle inner shadow to define the track boundary */
-    box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.1);
-    /* Light mode: use status-aware tinted track */
-    --_progress-track: color-mix(in oklch, var(--status-color, var(--accent)) 15%, var(--color-surface-raised));
-  }
-
-  /* Dark mode: make track more visible with stronger tint */
-  @media (prefers-color-scheme: dark) {
-    .progress__track {
-      --_progress-track: color-mix(in oklch, var(--status-color, var(--accent)) 20%, var(--color-surface-raised));
-      box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.3);
-    }
-  }
-
-  [data-theme="dark"] .progress__track {
-    --_progress-track: color-mix(in oklch, var(--status-color, var(--accent)) 20%, var(--color-surface-raised));
-    box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.3);
+    /* Subtle inner shadow to define the track boundary; a status-tinted
+       track, both a little stronger in dark mode */
+    --_progress-track: light-dark(
+      color-mix(in oklab, var(--status-color, var(--accent)) 15%, var(--color-surface-raised)),
+      color-mix(in oklab, var(--status-color, var(--accent)) 20%, var(--color-surface-raised))
+    );
   }
 
   /* Progress fill bar */
@@ -207,20 +201,20 @@
     line-height: var(--leading-none);
     color: var(--status-text, var(--color-text));
     background-color: var(--status-bg, var(--color-surface));
-    border-radius: var(--radius-full);
+    border-radius: var(--radius-pill);
     white-space: nowrap;
   }
 
   /* Filled variant - stronger emphasis */
   .badge[data-variant="filled"] {
-    color: var(--white);
-    background-color: var(--status-color, var(--accent));
+    color: var(--status-on, var(--on-accent));
+    background-color: var(--status-fill, var(--accent));
   }
 
   /* Outline variant */
   .badge[data-variant="outline"] {
     background-color: transparent;
-    border: 1px solid var(--status-border, var(--color-border));
+    border: var(--border-width) solid var(--status-border, var(--color-border));
   }
 
   /* Badge sizes */
@@ -254,8 +248,8 @@
   .status-card {
     padding: var(--space-4);
     background-color: var(--status-bg, var(--color-surface));
-    border: 1px solid var(--status-border, var(--color-border-subtle));
-    border-radius: var(--radius-lg);
+    border: var(--border-width) solid var(--status-border, var(--color-border-subtle));
+    border-radius: var(--radius-card);
     border-inline-start-width: 4px;
   }
 
@@ -290,7 +284,7 @@
     gap: var(--space-4);
     padding: var(--space-4);
     background-color: var(--color-surface);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card);
     font-size: var(--font-size-sm);
   }
 
@@ -354,102 +348,14 @@
 
 
   /* ========================================
-     MOTION-AWARE ANIMATIONS
-     Each theme has its own progress animation style
+     MOTION
      ======================================== */
 
-  /* Still: instant fill - no animation */
-  [data-motion="still"] .progress__fill {
-    transition: none;
-  }
-
-  /* Serene: very slow, gentle fill */
-  [data-motion="serene"] .progress__fill {
-    transition: inline-size var(--duration-slowest) var(--ease-fluid);
-  }
-
-  /* Trickling: subtle, quick fill */
-  [data-motion="trickling"] .progress__fill {
-    transition: inline-size var(--duration-slow) var(--ease-fluid);
-  }
-
-  /* Stream: smooth horizontal flow */
-  [data-motion="stream"] .progress__fill {
+  /* Balanced, organic fill */
+  .progress__fill {
     transition: inline-size var(--duration-slow) var(--ease-fluid);
   }
 
-  /* Flowing: balanced, organic fill (default) */
-  [data-motion="flowing"] .progress__fill,
-  :root:not([data-motion]) .progress__fill {
-    transition: inline-size var(--duration-slow) var(--ease-fluid);
-  }
 
-  /* Cascade: bouncy waterfall effect */
-  [data-motion="cascade"] .progress__fill {
-    transition: inline-size var(--duration-normal) var(--ease-settle);
-  }
-
-  /* Rapids: fast, energetic with overshoot */
-  [data-motion="rapids"] .progress__fill {
-    transition: inline-size var(--duration-normal) var(--ease-settle);
-  }
-
-  /* Tsunami: wave animation - rise, crest, crash, bounce, settle */
-  @keyframes tsunami-progress-fill {
-    0% {
-      inline-size: 0;
-      transform: scaleY(1);
-    }
-    25% {
-      /* Rising - wave builds up, overshoots target */
-      inline-size: calc(var(--progress-percent, 0%) * 1.15);
-      transform: scaleY(1.3);
-    }
-    40% {
-      /* Cresting - peak of the wave */
-      inline-size: calc(var(--progress-percent, 0%) * 1.1);
-      transform: scaleY(1.4);
-    }
-    60% {
-      /* Crashing down - undershoots */
-      inline-size: calc(var(--progress-percent, 0%) * 0.92);
-      transform: scaleY(0.8);
-    }
-    75% {
-      /* Bounce back up */
-      inline-size: calc(var(--progress-percent, 0%) * 1.03);
-      transform: scaleY(1.1);
-    }
-    90% {
-      /* Settling */
-      inline-size: calc(var(--progress-percent, 0%) * 0.99);
-      transform: scaleY(0.95);
-    }
-    100% {
-      /* Final position */
-      inline-size: var(--progress-percent, 0%);
-      transform: scaleY(1);
-    }
-  }
-
-  [data-motion="tsunami"] .progress__fill {
-    transition: none;
-    transform-origin: left center;
-  }
-
-  [data-motion="tsunami"] .progress[data-animate][data-visible] .progress__fill {
-    animation: tsunami-progress-fill var(--duration-slower) var(--ease-settle) forwards;
-  }
-
-  /* Non-animated tsunami progress - just use transition */
-  [data-motion="tsunami"] .progress:not([data-animate]) .progress__fill {
-    transition: inline-size var(--duration-slower) var(--ease-settle);
-  }
-
-  /* Reduced motion: respect preference */
-  @media (prefers-reduced-motion: reduce) {
-    .progress__fill {
-      transition: none;
-    }
-  }
+  /* Reduced motion: the durations are 0 and the reset shortens the rest. */
 }