@fluid-theme/core 0.4.3 → 2.1.0

package/src/sections/team.css

@@ -13,7 +13,7 @@
  *     </header>
  *     <div class="team__grid">
  *       <article class="team-member">
- *         <img class="avatar avatar--xl" src="..." alt="Jane Doe">
+ *         <img class="avatar" data-size="xl" src="..." alt="Jane Doe">
  *         <h3 class="team-member__name">Jane Doe</h3>
  *         <p class="team-member__role">CEO & Co-founder</p>
  *         <p class="team-member__bio">Short bio about Jane.</p>
@@ -28,154 +28,65 @@
 
 @layer components {
 
-  /* ========================================
-     BASE TEAM SECTION
-     ======================================== */
+  /* The band's padding and edges, and the header (a section head), are in
+     src/fluid.css (layouts). */
 
-  .team {
-    padding-block: var(--space-16);
-    padding-inline: var(--space-5);
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
-  }
-
-  .team__header {
-    text-align: center;
-    max-inline-size: var(--container-md);
-    margin-inline: auto;
-    margin-block-end: var(--space-12);
-  }
-
-  .team__header h2 {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    color: var(--color-text);
-    margin-block-end: var(--space-3);
-  }
-
-  .team__header p {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-  }
-
-
-  /* ========================================
-     TEAM GRID
-     ======================================== */
+  .team__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */
 
   .team__grid {
     display: grid;
-    gap: var(--space-8);
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, 14rem), 1fr)
-    );
+    gap: var(--space-l) var(--space-m);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
   }
 
-
-  /* ========================================
-     TEAM MEMBER CARD
-     ======================================== */
-
+  /* A member is open, like a card: avatar or photo, name, role, bio. */
   .team-member {
-    --_member-bg: var(--color-surface);
-    --_member-border: var(--color-border-subtle);
-    --_member-radius: var(--radius-xl);
-    --_member-padding: var(--space-6);
-
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: var(--space-2);
-    padding: var(--_member-padding);
-    background-color: var(--_member-bg);
-    border: var(--border-width) solid var(--_member-border);
-    border-radius: var(--_member-radius);
-    transition:
-      box-shadow var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-normal) var(--ease-settle);
+    gap: var(--space-xs);
   }
 
-  .team-member:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-  }
-
-  .team-member .avatar {
-    margin-block-end: var(--space-2);
-  }
+  .team-member .avatar { margin-block-end: var(--space-xs); }
 
   .team-member__name {
-    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;
   }
 
   .team-member__role {
-    font-size: var(--font-size-sm);
-    color: var(--accent);
+    font-size: var(--step--1);
+    color: var(--color-text-muted);
     margin: 0;
   }
 
   .team-member__bio {
-    font-size: var(--font-size-sm);
     color: var(--color-text-muted);
-    line-height: var(--leading-relaxed);
-    margin: 0;
-    margin-block-start: var(--space-2);
+    margin: 0; margin-block-start: var(--space-xs);
   }
 
-
-  /* ========================================
-     SOCIAL LINKS
-     ======================================== */
-
   .team-member__social {
     display: flex;
-    gap: var(--space-2);
-    margin-block-start: var(--space-3);
+    gap: var(--space-1);
+    margin-block-start: var(--space-xs);
+    margin-inline-start: -0.75rem;
   }
 
   .team-member__social a {
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: 2rem;
-    block-size: 2rem;
-    border-radius: var(--radius-full);
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
     color: var(--color-text-muted);
-    transition: color var(--duration-fast) var(--ease-fluid);
-  }
-
-  .team-member__social a:hover {
-    color: var(--accent);
   }
 
-  .team-member__social a:focus-visible {
-    outline: 2px solid var(--color-focus);
-    outline-offset: 2px;
-  }
+  .team-member__social a:hover { color: var(--color-text); }
 
   .team-member__social svg {
-    inline-size: 1rem;
-    block-size: 1rem;
-  }
-
-
-  /* ========================================
-     ACCESSIBILITY
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .team-member,
-    .team-member__social a {
-      transition: none;
-    }
-
-    .team-member:hover {
-      transform: none;
-    }
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
   }
 }

package/src/sections/testimonials.css

@@ -48,204 +48,90 @@
 
 @layer components {
 
-  /* ========================================
-     BASE TESTIMONIALS SECTION
-     ======================================== */
-
-  .testimonials {
-    padding-block: var(--space-16);
-    padding-inline: var(--space-5);
-    max-inline-size: var(--container-xl);
-    margin-inline: auto;
-  }
-
-  .testimonials__header {
-    text-align: center;
-    max-inline-size: var(--container-md);
-    margin-inline: auto;
-    margin-block-end: var(--space-12);
-  }
-
-  .testimonials__header h2 {
-    font-size: var(--font-size-3xl);
-    font-weight: var(--weight-bold);
-    color: var(--color-text);
-    margin-block-end: var(--space-3);
-  }
-
-  .testimonials__header p {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-  }
+  /* The band's padding and edges, and the header (a section head), are in
+     src/fluid.css (layouts). */
 
+  .testimonials__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */
 
-  /* ========================================
-     SINGLE CENTERED (default)
-     Large featured testimonial
-     ======================================== */
-
+  /* A testimonial is a serif quote and a label-voice attribution. No box. */
   .testimonial {
-    --_testi-bg: var(--color-surface);
-    --_testi-border: var(--color-border-subtle);
-    --_testi-padding: var(--space-8);
-    --_testi-radius: var(--radius-xl);
-
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: var(--space-6);
-    padding: var(--_testi-padding);
-    background-color: var(--_testi-bg);
-    border: var(--border-width) solid var(--_testi-border);
-    border-radius: var(--_testi-radius);
+    gap: var(--space-m);
     margin: 0;
-    text-align: center;
-    position: relative;
-  }
-
-  /* Decorative quote mark */
-  .testimonial::before {
-    content: "\201C";
-    position: absolute;
-    inset-block-start: var(--space-4);
-    inset-inline-start: var(--space-6);
-    font-size: var(--font-size-5xl);
-    line-height: 1;
-    color: color-mix(in oklch, var(--accent) 25%, transparent);
-    font-family: var(--font-serif, Georgia, serif);
-    pointer-events: none;
   }
 
   .testimonial__quote {
     margin: 0;
     padding: 0;
-    border: none;
-    max-inline-size: var(--container-prose);
+    border: 0;
+    font-style: normal;
   }
 
   .testimonial__quote p {
-    font-size: var(--font-size-lg);
-    font-style: italic;
-    line-height: var(--leading-relaxed);
-    color: var(--color-text);
+    font-family: var(--font-heading);
+    font-size: var(--step-2);
+    font-weight: calc(var(--weight-light) + var(--_dark-weight));
+    line-height: 1.3;
+    letter-spacing: var(--tracking-heading);
+    text-wrap: balance;
+    max-inline-size: 32em;
     margin: 0;
   }
 
+  .testimonial__quote p::before { content: "\201C"; }
+  .testimonial__quote p::after { content: "\201D"; }
+
   .testimonial__author {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
+    gap: var(--space-s);
   }
 
-  .testimonial__author .avatar {
-    flex-shrink: 0;
-  }
+  .testimonial__author .avatar { flex-shrink: 0; }
 
   .testimonial__name {
     display: block;
     font-style: normal;
-    font-weight: var(--weight-semibold, 600);
-    color: var(--color-text);
-    font-size: var(--font-size-sm);
+    font-weight: 600;
+    font-size: var(--step--1);
   }
 
   .testimonial__role {
     display: block;
-    font-size: var(--font-size-xs);
+    font-size: var(--step--1);
     color: var(--color-text-muted);
   }
 
-  /* Single centered: wider and more spacious */
-  .testimonials:not([data-type]) .testimonial {
-    max-inline-size: var(--container-md);
-    margin-inline: auto;
-    padding: var(--space-10);
-  }
-
-  .testimonials:not([data-type]) .testimonial__quote p {
-    font-size: var(--font-size-xl);
-  }
-
-
-  /* ========================================
-     GRID
-     Multiple testimonials in card grid
-     ======================================== */
-
+  /* Grid: smaller quotes under ink hairlines, like cards. */
   .testimonials__grid {
     display: grid;
-    gap: var(--space-6);
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, 18rem), 1fr)
-    );
+    gap: var(--space-l) var(--space-m);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
   }
 
   .testimonials[data-type="grid"] .testimonial {
-    text-align: start;
-    align-items: flex-start;
+    padding-block-start: var(--space-s);
+    border-block-start-color: var(--color-border-strong);
   }
 
-  .testimonials[data-type="grid"] .testimonial::before {
-    font-size: var(--font-size-4xl);
-  }
-
-  .testimonials[data-type="grid"] .testimonial__quote p {
-    font-size: var(--font-size-base);
-  }
-
-
-  /* ========================================
-     LOGO WALL
-     Client/partner logos in a responsive row
-     ======================================== */
+  .testimonials[data-type="grid"] .testimonial__quote p { font-size: var(--step-1); }
 
+  /* Logo wall */
   .testimonials__logos {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
     align-items: center;
-    gap: var(--space-10);
+    gap: var(--space-l);
   }
 
-  .testimonials__logos img,
-  .testimonials__logos svg {
+  .testimonials__logos :is(img, svg) {
     block-size: 2.5rem;
     inline-size: auto;
     object-fit: contain;
-    opacity: 0.6;
-    filter: grayscale(100%);
-    transition:
-      opacity var(--duration-normal) var(--ease-fluid),
-      filter var(--duration-normal) var(--ease-fluid);
-  }
-
-  .testimonials__logos img:hover,
-  .testimonials__logos svg:hover {
-    opacity: 1;
-    filter: grayscale(0%);
-  }
-
-  .testimonials[data-type="logos"] .testimonials__header {
-    margin-block-end: var(--space-8);
+    opacity: 0.7;
+    transition: opacity var(--duration-fast) var(--ease-fluid);
   }
 
-  .testimonials[data-type="logos"] .testimonials__header p {
-    font-size: var(--font-size-sm);
-    text-transform: uppercase;
-    letter-spacing: var(--tracking-wider);
-    color: var(--color-text-muted);
-  }
-
-
-  /* ========================================
-     ACCESSIBILITY
-     ======================================== */
-
-  @media (prefers-reduced-motion: reduce) {
-    .testimonials__logos img,
-    .testimonials__logos svg {
-      transition: none;
-    }
-  }
+  .testimonials__logos :is(img, svg):hover { opacity: 1; }
 }

package/src/zero/base.css

@@ -0,0 +1,166 @@
+/**
+ * Fluid Zero - base
+ * @layer base
+ *
+ * Native elements only. Every selector is :where(), so any later rule wins.
+ * The reset zeroes margins; the flow below puts them back, once.
+ */
+
+@layer base {
+  :where(:root) {
+    accent-color: var(--accent);
+  }
+
+  :where(body) {
+    padding-inline: calc(var(--space-gutter) / 2);
+    font-family: var(--font-body);
+    font-size: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
+    line-height: 1.6;
+    color: var(--color-text);
+    background-color: var(--color-background);
+  }
+
+  /* Flow: space after each block; more above a heading than below it. */
+  :where(p, ul, ol, dl, blockquote, pre, figure, table, hr, form, fieldset, details, address, h1, h2, h3, h4, h5, h6) {
+    margin-block: 0 1em;
+  }
+  :where(* + h1, * + h2, * + h3, * + h4, * + h5, * + h6) {
+    margin-block-start: 1.75em;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-heading);
+    font-size: 1em;
+    font-weight: 700;
+    line-height: 1.15;
+    margin-block-end: 0.5em;
+  }
+  :where(h1) { font-size: clamp(2rem, 1.6667rem + 1.4815vi, 3rem); }        /* 32 → 48 */
+  :where(h2) { font-size: clamp(1.5rem, 1.3333rem + 0.7407vi, 2rem); }      /* 24 → 32 */
+  :where(h3) { font-size: clamp(1.25rem, 1.1667rem + 0.3704vi, 1.5rem); }   /* 20 → 24 */
+
+  :where(p, li, dd, blockquote, figcaption) {
+    max-inline-size: var(--measure);
+  }
+  :where(dt) { font-weight: 600; }
+  :where(dd) { margin-inline-start: 1.5em; }
+
+  :where(a) {
+    color: var(--accent-ink);
+    text-decoration: underline;
+    text-decoration-thickness: 0.06em;
+  }
+  :where(a:hover) { text-decoration-thickness: 0.12em; }
+
+  :where(blockquote) {
+    padding-inline-start: 1em;
+    border-inline-start: 3px solid var(--color-border-strong);
+  }
+
+  :where(code, kbd, samp, pre) {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+  }
+  :where(:not(pre) > code, pre) {
+    background-color: var(--color-surface);
+  }
+  :where(:not(pre) > code) { padding: 0.1em 0.3em; }
+  :where(pre) {
+    padding: 1em;
+    overflow-x: auto;
+    border: var(--border-width) solid var(--color-border);
+  }
+
+  :where(hr) {
+    border: 0;
+    border-block-start: var(--border-width) solid var(--color-border);
+    margin-block: 2em;
+  }
+
+  :where(figure img) { inline-size: 100%; }
+  :where(figcaption) {
+    margin-block-start: 0.5em;
+    font-size: 0.875em;
+    color: var(--color-text-muted);
+  }
+
+  :where(table) { inline-size: 100%; }
+  :where(th) { text-align: start; }
+  :where(th, td) {
+    padding: 0.5em 0.75em 0.5em 0;
+    border-block-end: var(--border-width) solid var(--color-border);
+  }
+
+  :where(legend, label) { font-weight: 600; }
+
+  /* Fields: every text-like input, select and textarea. */
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="reset"], [type="button"], [type="image"]), select, textarea) {
+    min-block-size: 2.75rem;
+    padding: 0.5em 0.75em;
+    border: var(--border-width) solid var(--color-border-strong);
+    border-radius: var(--radius-control);
+    background-color: var(--color-background);
+  }
+  :where(input, select, textarea):focus-visible { outline-offset: 1px; }
+  :where(input, select, textarea):user-invalid { border-color: var(--color-error); }
+  :where(input:is([type="checkbox"], [type="radio"])) {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+    vertical-align: -0.25em;
+  }
+
+  :where(button, [type="submit"], [type="reset"], [type="button"]) {
+    min-block-size: 2.75rem;
+    padding: 0.5em 1.25em;
+    border: var(--border-width) solid var(--accent);
+    border-radius: var(--radius-control);
+    background-color: var(--accent);
+    color: var(--on-accent);
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  :where(:disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :where([data-bg="tinted"]) {
+    padding: 1.5rem;
+    background-color: var(--color-surface);
+  }
+
+  :where(.sr-only) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where(.skip-link) {
+    position: absolute;
+    inset-block-start: 0.5rem;
+    inset-inline-start: 0.5rem;
+    padding: 0.5em 1em;
+    background-color: var(--color-background);
+    translate: 0 -200%;
+  }
+  :where(.skip-link:focus) { translate: none; }
+
+  /* Dialog and fieldset: the reset strips their edge, so give it back. */
+  :where(dialog, fieldset) {
+    border: var(--border-width) solid var(--color-border-strong);
+    padding: 1em;
+  }
+  :where(dialog) {
+    color: var(--color-text);
+    background-color: var(--color-background);
+  }
+
+  /* No !important: an important rule in this early layer would beat every
+     child theme. Browsers drop backgrounds in print on their own. */
+  @media print {
+    :where(*) { color: #000; }
+  }
+}

package/src/zero/tokens.css

@@ -0,0 +1,64 @@
+/**
+ * Fluid Zero - tokens
+ * @layer tokens
+ *
+ * KNOBS share the base's names (set them on :root in @layer themes).
+ * ROLES share the base's names too, through light-dark(): the OS decides,
+ * <html data-theme="light|dark"> overrides.
+ *
+ * The plain values first are the floor for browsers without relative colour
+ * (Safari before 18); the @supports block derives the same roles from
+ * --accent and --neutral-tint, as the base does.
+ */
+
+@layer tokens {
+  :root {
+    color-scheme: light dark;
+
+    /* KNOBS */
+    --accent: oklch(42% 0.15 22);
+    --neutral-tint: oklch(50% 0.01 75);
+    --font-heading: system-ui, sans-serif;
+    --font-body: system-ui, sans-serif;
+    --font-mono: ui-monospace, monospace;
+    --font-serif: ui-serif, Georgia, serif;   /* for a site that wants it */
+    --measure: 66ch;
+    --space-gutter: clamp(2rem, 1rem + 5vi, 5rem);   /* both sides together, as in core: 16 → 40px a side */
+    --radius-control: 0.25rem;
+    --border-width: 1px;
+
+    /* ROLES: the floor */
+    --on-accent: #fff;
+    --accent-ink: light-dark(var(--accent), color-mix(in oklch, var(--accent) 40%, #fff));
+    --color-text: light-dark(oklch(17% 0.01 75), oklch(93% 0.01 75));
+    --color-text-muted: light-dark(oklch(44% 0.01 75), oklch(74% 0.01 75));
+    --color-background: light-dark(oklch(99% 0.0075 75), oklch(14.5% 0.01 75));
+    --color-surface: light-dark(oklch(95.5% 0.01 75), oklch(19% 0.01 75));
+    --color-border: light-dark(oklch(86% 0.01 75), oklch(30% 0.01 75));
+    --color-border-strong: var(--color-text);
+    --color-error: light-dark(oklch(48% 0.17 25), oklch(76% 0.13 25));
+    --color-focus: var(--accent-ink);
+  }
+
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      --on-accent: oklch(from var(--accent) clamp(0, (0.575 - l) * 1000, 1) 0 0);
+      --accent-ink: light-dark(oklch(from var(--accent) min(l, 0.45) c h), oklch(from var(--accent) max(l, 0.76) c h));
+      --color-text: light-dark(oklch(from var(--neutral-tint) 0.17 c h), oklch(from var(--neutral-tint) 0.93 c h));
+      --color-text-muted: light-dark(oklch(from var(--neutral-tint) 0.44 c h), oklch(from var(--neutral-tint) 0.74 c h));
+      --color-background: light-dark(oklch(from var(--neutral-tint) 0.99 calc(c * 0.75) h), oklch(from var(--neutral-tint) 0.145 c h));
+      --color-surface: light-dark(oklch(from var(--neutral-tint) 0.955 c h), oklch(from var(--neutral-tint) 0.19 c h));
+      --color-border: light-dark(oklch(from var(--neutral-tint) 0.86 c h), oklch(from var(--neutral-tint) 0.30 c h));
+    }
+  }
+
+  :root[data-theme="light"] { color-scheme: light; }
+  :root[data-theme="dark"] { color-scheme: dark; }
+
+  @media (prefers-contrast: more) {
+    :root {
+      --color-text-muted: var(--color-text);
+      --color-border: var(--color-border-strong);
+    }
+  }
+}

package/src/zero.css

@@ -0,0 +1,20 @@
+/**
+ * Fluid Zero: the tiny alternate base (dist/fluid-zero.min.css).
+ *
+ * A modern cross-browser reset, system fonts, and the least CSS a readable,
+ * accessible page needs. For a utility page, an admin screen, or a site that
+ * builds its own look from nothing. It is NOT the default base: that is
+ * fluid.css.
+ *
+ * Same layer order and the same knob and role names as the base, so a child
+ * theme in @layer themes works on either: the knobs both define take effect
+ * on both; component rules simply have nothing to style here.
+ * No components, sections, content grid, web fonts or JS.
+ * Budget: 4,096 B gzip (build-css.mjs fails above it).
+ */
+
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+@import "./core/reset.css";
+@import "./zero/tokens.css";
+@import "./zero/base.css";