@fluid-theme/core 0.4.3 → 2.1.0

package/src/legacy-1x.css

@@ -0,0 +1,61 @@
+/**
+ * Fluid Theme - the 1.x look, as knob values (dist/fluid-legacy-1x.css)
+ *
+ * Link it after fluid.min.css and before the site's own stylesheet:
+ *   <link rel="stylesheet" href="/fluid.min.css">
+ *   <link rel="stylesheet" href="/fluid-legacy-1x.css">
+ *   <link rel="stylesheet" href="/site.css">
+ * Or link dist/fluid-1x.min.css alone: core and this file in one, for a
+ * consumer that serves exactly one theme stylesheet.
+ *
+ * It brings back the 1.x type sizes and weights, shape, spacing, motion and
+ * system fonts. It does not bring back the 1.x role lightness (a small shift) or the 1.x
+ * component styles (open cards, square badges, the nav): those are what
+ * v2 is. Values only, on :root, in the themes layer: knobs, not variations.
+ * Every value here is a documented knob or role (_docs/STATUS.md), never a
+ * scale step, so a consumer that inlines its knobs (the stack's brand.ts)
+ * can copy them as they are.
+ */
+
+@layer themes {
+  :root {
+    --accent: oklch(52% 0.16 245);
+    --neutral-tint: oklch(50% 0.008 230);
+    --font-heading: var(--font-system);
+    --font-body: var(--font-system);
+    /* 1.x headings: h1 700, h2 and h3 600 (--weight-heading). */
+    --weight-display: 700;
+    --weight-heading: 600;
+    --type-ratio: 1.25;
+    --display-max: 3.5rem;
+    --measure: 65ch;
+    --hero-headline-size: clamp(2rem, 1rem + 5vw, 3.5rem);
+    /* The 1.x type: body 16 → 18 (--text-min, --text-max) and the 1.x
+       heading clamps through the heading-size knobs, so the steps (the nav
+       brand, lede, card title, blockquote) keep their own values. */
+    --text-min: 1;
+    --text-max: 1.125;
+    --h1-size: clamp(1.75rem, 1rem + 4vw, 3.75rem);
+    --h2-size: clamp(1.75rem, 1.43rem + 1.61vw, 2.375rem);
+    --h3-size: clamp(1.5rem, 1.29rem + 1.04vw, 1.875rem);
+    --radius-card: 16px;
+    --radius-control: 10px;
+    /* In v2 --shadow-style reaches only the elevated card (--shadow-md);
+       the 1.x resting and hover shadows on buttons and cards are gone. */
+    --shadow-style: 1;
+    --space-section: 5rem;
+    /* The 1.x gutter, both sides together (12px a side). The per-side edge
+       never drops below 3vi, so on a desktop the 1.x 12px is not restored. */
+    --space-gutter: 1.5rem;
+    --motion-base: 467ms;
+  }
+
+  /* 1.x buttons are the accent in both schemes, with its own text; on the
+     nav too, which declares its own (flipped) fills. */
+  :root,
+  .nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"] {
+    --accent-fill: var(--accent);
+    --on-accent-fill: var(--on-accent);
+    --accent-fill-hover: var(--accent-hover);
+  }
+}

package/src/sections/cta.css

@@ -51,103 +51,80 @@
 @layer components {
 
   /* ========================================
-     BASE CTA
-     Full-width banner (default)
+     BASE CTA: a tinted band, start-aligned, a big serif line and actions.
+     data-bg on a <section class="cta"> (inverse, accent-strong) repaints it.
      ======================================== */
 
   .cta {
-    --_cta-bg: color-mix(in oklch, var(--accent) 8%, var(--color-surface));
-    --_cta-padding-block: var(--space-16);
-    --_cta-padding-inline: var(--space-5);
-    --_cta-radius: var(--radius-xl);
-
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: var(--space-5);
-    padding-block: var(--_cta-padding-block);
-    padding-inline: var(--_cta-padding-inline);
-    background-color: var(--_cta-bg);
-    border-radius: var(--_cta-radius);
-    text-align: center;
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
+    align-items: flex-start;
+    gap: var(--space-m);
+    padding-block: var(--space-section);
+    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
   }
 
+  /* A band (data-bg, layouts layer) sets --_band-bg; without one the CTA
+     is a surface band. */
+  .cta { background-color: var(--_band-bg, var(--color-surface)); }
+
   .cta__title {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    color: var(--color-text);
+    font-family: var(--font-heading);
+    font-size: var(--step-3);
+    font-weight: calc(var(--weight-display) + var(--_dark-weight));
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
+    text-wrap: balance;
+    max-inline-size: 18em;
     margin: 0;
-    max-inline-size: var(--container-sm);
   }
 
   .cta__description {
-    font-size: var(--font-size-lg);
+    font-size: var(--step-1);
     color: var(--color-text-muted);
-    line-height: var(--leading-relaxed);
+    max-inline-size: 36em;
     margin: 0;
-    max-inline-size: var(--container-sm);
   }
 
   .cta__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-3);
-    justify-content: center;
-    margin-block-start: var(--space-3);
+    align-items: center;
+    gap: var(--space-s) var(--space-m);
+    margin-block-start: var(--space-xs);
   }
 
-
-  /* ========================================
-     SPLIT
-     Text + image/form side by side
-     ======================================== */
-
+  /* Split: text and an image or form side by side. */
   .cta[data-type="split"] {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: var(--space-10);
-    text-align: start;
+    gap: var(--space-l);
     align-items: center;
   }
 
   .cta[data-type="split"] .cta__content {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--space-m);
   }
 
   .cta[data-type="split"] .cta__aside img {
     inline-size: 100%;
     block-size: auto;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card);
     object-fit: cover;
   }
 
   @media (max-width: 48rem) {
-    .cta[data-type="split"] {
-      grid-template-columns: 1fr;
-      text-align: center;
-    }
-
-    .cta[data-type="split"] .cta__content {
-      align-items: center;
-    }
+    .cta[data-type="split"] { grid-template-columns: 1fr; }
   }
 
-
-  /* ========================================
-     NEWSLETTER
-     Inline email + submit form
-     ======================================== */
-
+  /* Newsletter: inline email + submit. */
   .cta__form {
     display: flex;
-    gap: var(--space-3);
+    gap: var(--space-2);
     inline-size: 100%;
-    max-inline-size: 28rem;
-    margin-block-start: var(--space-3);
+    max-inline-size: 32rem;
   }
 
   .cta__form input[type="email"] {
@@ -155,56 +132,11 @@
     min-inline-size: 0;
   }
 
-  .cta__form .button {
-    flex-shrink: 0;
-  }
+  .cta__form :is(button, .button) { flex-shrink: 0; }
 
   @media (max-width: 30rem) {
-    .cta__form {
-      flex-direction: column;
-    }
-  }
-
-
-  /* ========================================
-     DOWNLOAD
-     App store badges / download buttons
-     ======================================== */
-
-  .cta[data-type="download"] .cta__actions {
-    gap: var(--space-4);
+    .cta__form { flex-direction: column; }
   }
 
-  .cta[data-type="download"] .cta__actions .button {
-    min-inline-size: 10rem;
-  }
-
-
-  /* ========================================
-     ACCENT VARIANT
-     Stronger background for emphasis
-     ======================================== */
-
-  .cta[data-accent] {
-    --_cta-bg: var(--accent);
-    color: var(--white);
-  }
-
-  .cta[data-accent] .cta__title {
-    color: var(--white);
-  }
-
-  .cta[data-accent] .cta__description {
-    color: color-mix(in oklch, var(--white) 80%, transparent);
-  }
-
-  .cta[data-accent] .button:not([data-variant]) {
-    background-color: var(--white);
-    color: var(--accent);
-  }
-
-  .cta[data-accent] .button[data-variant="outline"] {
-    border-color: var(--white);
-    color: var(--white);
-  }
+  .cta[data-type="download"] .cta__actions .button { min-inline-size: 10rem; }
 }

package/src/sections/features.css

@@ -58,109 +58,56 @@
  */
 
 @layer components {
+  /* The band's padding and edges, and the header (a section head), are in
+     src/fluid.css (layouts). */
 
-  /* ========================================
-     BASE FEATURES SECTION
-     ======================================== */
-
-  .features {
-    padding-block: var(--space-16);
-    padding-inline: var(--space-5);
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
-  }
-
-  .features__header {
-    text-align: center;
-    max-inline-size: var(--container-md);
-    margin-inline: auto;
-    margin-block-end: var(--space-12);
-  }
-
-  .features__header h2 {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    color: var(--color-text);
-    margin-block-end: var(--space-3);
-  }
-
-  .features__header p {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-    line-height: var(--leading-relaxed);
-  }
+  .features__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */
 
 
   /* ========================================
      ICON GRID (default)
-     3-4 column responsive grid of feature cards
+     Open items under an ink hairline, like cards; the hairlines line up.
      ======================================== */
 
   .features__grid {
     display: grid;
-    gap: var(--space-8);
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, 16rem), 1fr)
-    );
+    gap: var(--features-gap, var(--space-l) var(--space-m));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--features-min, 16rem)), 1fr));
   }
 
   .feature {
-    --_feat-padding: var(--space-6);
-    --_feat-radius: var(--radius-lg);
-    --_feat-bg: var(--color-surface);
-    --_feat-border: var(--color-border-subtle);
-
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
-    padding: var(--_feat-padding);
-    background-color: var(--_feat-bg);
-    border: var(--border-width) solid var(--_feat-border);
-    border-radius: var(--_feat-radius);
-    transition:
-      box-shadow var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-normal) var(--ease-settle);
-  }
-
-  .feature:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
+    gap: var(--space-xs);
+    padding-block-start: var(--space-s);
+    border-block-start: var(--border-width) solid var(--color-border-strong);
   }
 
   .feature__icon {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--space-12);
-    block-size: var(--space-12);
-    border-radius: var(--radius-md);
-    background-color: color-mix(in oklch, var(--accent) 12%, transparent);
-    color: var(--accent);
-    font-size: var(--font-size-xl);
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    margin-block-end: var(--space-xs);
+    color: var(--accent-ink);
     flex-shrink: 0;
   }
 
   .feature__icon svg {
-    inline-size: 1.5em;
-    block-size: 1.5em;
+    inline-size: 100%;
+    block-size: 100%;
     stroke: currentColor;
-    stroke-width: 2;
+    stroke-width: 1.5;
   }
 
   .feature__title {
-    font-size: var(--font-size-lg);
-    font-weight: var(--weight-semibold, 600);
-    color: var(--color-text);
+    font-family: var(--font-heading);
+    font-size: var(--step-1);
+    font-weight: calc(500 + var(--_dark-weight));
+    line-height: var(--leading-heading);
     margin: 0;
   }
 
-  .feature__description {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    line-height: var(--leading-relaxed);
-    margin: 0;
-  }
+  .feature__description { margin: 0; }
 
 
   /* ========================================
@@ -171,186 +118,62 @@
   .features[data-type="alternating"] .features__grid {
     display: flex;
     flex-direction: column;
-    gap: var(--space-16);
+    gap: var(--space-2xl);
   }
 
   .features[data-type="alternating"] .feature {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: var(--space-10);
+    gap: var(--space-l);
     align-items: center;
     padding: 0;
-    background: none;
-    border: none;
-    border-radius: 0;
-  }
-
-  .features[data-type="alternating"] .feature:hover {
-    box-shadow: none;
-    transform: none;
-  }
-
-  .features[data-type="alternating"] .feature:nth-child(even) {
-    direction: rtl;
+    border: 0;
   }
 
-  .features[data-type="alternating"] .feature:nth-child(even) > * {
-    direction: ltr;
-  }
+  .features[data-type="alternating"] .feature:nth-child(even) > :first-child { order: 2; }
 
   .features[data-type="alternating"] .feature__content {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .features[data-type="alternating"] .feature__title {
-    font-size: var(--font-size-2xl);
+    gap: var(--space-s);
   }
 
-  .features[data-type="alternating"] .feature__description {
-    font-size: var(--font-size-base);
-  }
-
-  .features[data-type="alternating"] .feature__media {
-    margin: 0;
-  }
+  .features[data-type="alternating"] .feature__title { font-size: var(--step-2); }
 
-  .features[data-type="alternating"] .feature__media img {
-    inline-size: 100%;
-    block-size: auto;
-    border-radius: var(--radius-lg);
-    object-fit: cover;
-  }
+  .features[data-type="alternating"] .feature__media { margin: 0; }
 
   @media (max-width: 48rem) {
-    .features[data-type="alternating"] .feature {
-      grid-template-columns: 1fr;
-    }
-
-    .features[data-type="alternating"] .feature:nth-child(even) {
-      direction: ltr;
-    }
+    .features[data-type="alternating"] .feature { grid-template-columns: 1fr; }
+    .features[data-type="alternating"] .feature:nth-child(even) > :first-child { order: 0; }
   }
 
 
   /* ========================================
-     CENTERED SHOWCASE
+     SHOWCASE
      Single feature highlight with large image
      ======================================== */
 
-  .features[data-type="showcase"] {
-    text-align: center;
-  }
+  .features[data-type="showcase"] .feature__media { margin: 0; margin-block-end: var(--space-l); }
 
-  .features[data-type="showcase"] .feature__media {
-    margin-inline: auto;
-    margin-block-end: var(--space-8);
-    max-inline-size: var(--container-lg);
-  }
-
-  .features[data-type="showcase"] .feature__media img {
-    inline-size: 100%;
-    block-size: auto;
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
-  }
+  .features[data-type="showcase"] .feature__content { max-inline-size: var(--container-md); }
 
-  .features[data-type="showcase"] .feature__content {
-    max-inline-size: var(--container-md);
-    margin-inline: auto;
-  }
-
-  .features[data-type="showcase"] .feature__content h2,
-  .features[data-type="showcase"] .feature__content h3 {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    margin-block-end: var(--space-4);
-  }
+  .features[data-type="showcase"] .feature__content :is(h2, h3) { font-size: var(--step-3); }
 
-  .features[data-type="showcase"] .feature__content p {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-    line-height: var(--leading-relaxed);
-  }
+  .features[data-type="showcase"] .feature__content p { font-size: var(--step-1); }
 
 
   /* ========================================
-     COMPARISON TABLE
-     Feature comparison grid
+     COMPARISON TABLE (the base table, centred figures)
      ======================================== */
 
-  .features__table {
-    inline-size: 100%;
-    border-collapse: collapse;
-    text-align: center;
-  }
-
-  .features__table th,
-  .features__table td {
-    padding: var(--space-4) var(--space-5);
-    border-block-end: var(--border-width) solid var(--color-border-subtle);
-  }
-
-  .features__table thead th {
-    font-size: var(--font-size-sm);
-    font-weight: var(--weight-semibold, 600);
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: var(--tracking-wider);
-    padding-block-end: var(--space-4);
-    border-block-end-width: 2px;
-  }
-
-  .features__table tbody td:first-child {
-    text-align: start;
-    font-weight: var(--weight-medium, 500);
-    color: var(--color-text);
-  }
+  .features__table { text-align: center; }
+  .features__table :is(th, td) { padding-inline: var(--space-s); }
+  .features__table :is(th, td):first-child { text-align: start; padding-inline-start: 0; }
 
-  .features__table tbody td {
-    color: var(--color-text-muted);
-  }
-
-  .features__table tbody tr:hover {
-    background-color: var(--color-surface);
-  }
-
-  /* Highlighted column */
   .features__table [data-featured] {
-    background-color: color-mix(in oklch, var(--accent) 8%, transparent);
-    font-weight: var(--weight-semibold, 600);
-    color: var(--accent);
+    background-color: var(--accent-subtle);
+    font-weight: 600;
   }
 
-  .features__table thead [data-featured] {
-    color: var(--accent);
-    border-block-end-color: var(--accent);
-  }
-
-  @media (max-width: 40rem) {
-    .features__table {
-      font-size: var(--font-size-sm);
-    }
-
-    .features__table th,
-    .features__table td {
-      padding: var(--space-3) var(--space-3);
-    }
-  }
-
-
-  /* ========================================
-     ACCESSIBILITY
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .feature {
-      transition: none;
-    }
-
-    .feature:hover {
-      transform: none;
-    }
-  }
+  .features__table thead [data-featured] { border-block-end-color: var(--accent); }
 }