@fluid-theme/core 2.0.0 → 2.1.0

package/themes/fonts/OFL-hanken-grotesk.txt

@@ -0,0 +1,93 @@
+Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk) HankenGrotesk-Italic[wght].ttf: Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/themes/fonts/archivo.css

@@ -0,0 +1,20 @@
+/* Archivo (wdth 62-125, wght 100-900), latin, SIL OFL 1.1 (OFL-archivo.txt).
+   The "swiss" pairing: spec _docs/plans/base-v2.md §15. Width is set with
+   font-variation-settings, never font-stretch (that would pick Helvetica
+   Neue Condensed on a Mac without the file). Italic loads only when used. */
+@font-face {
+  font-family: "Archivo Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./archivo-latin-wdth-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Archivo Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./archivo-latin-wdth-italic.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/themes/fonts/bodoni.css

@@ -0,0 +1,35 @@
+/* Bodoni Moda (opsz 6-96, wght 400-900) over Hanken Grotesk (wght 100-900),
+   latin, SIL OFL 1.1 (OFL-*.txt). The "gallery" pairing: spec
+   _docs/plans/base-v2.md §16. Italics load only when used. */
+@font-face {
+  font-family: "Bodoni Moda Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 900;
+  src: url("./bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Bodoni Moda Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400 900;
+  src: url("./bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Hanken Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Hanken Grotesk Variable";
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/themes/gallery.css

@@ -0,0 +1,105 @@
+/* "gallery": an alternate child theme on the Fluid base v2
+   (spec _docs/plans/base-v2.md §16). A Didone display over a quiet grotesk;
+   the images carry the colour, the accent is kept for actions. Fonts:
+   themes/fonts/bodoni.css (or dist/fluid-fonts-bodoni.min.css). Link after
+   the base: fluid.min.css, then this file. Dark mode adds 30 to heading
+   weights (base), but the lede's light weight (350) sits under Bodoni Moda's
+   400 floor, so it never reached the lede: the low-resolution rule at the end
+   sets it (680, a token). */
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+@layer themes {
+  :root {
+    --font-heading: "Bodoni Moda Variable", Didot, "Bodoni MT", "Noto Serif Display", P052, Georgia, serif;
+    --font-body: "Hanken Grotesk Variable", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
+    --accent: oklch(46% 0.22 266);          /* ultramarine (Klein); white on it ≈ 7.6:1 */
+    --neutral-tint: oklch(50% 0.006 85);    /* gallery white: a breath of warmth so photos read true */
+    --display-max: 12rem;
+    --measure: 62ch;
+    --container-content: 90rem;
+    --space-section: clamp(5rem, 3rem + 8.889vi, 11rem);         /* 80 → 176 */
+    --space-gutter: clamp(2.5rem, 0.667rem + 8.148vi, 8rem);   /* both sides: 20 → 64px a side */
+    --toc-font: var(--font-body);
+    --toc-dock-font: var(--font-body);
+    /* Nav links tracked like the labels; on a narrow bar the base squeezes
+       the tracking down to the minimum before the links wrap. */
+    --nav-tracking: 0.12em;
+    --nav-tracking-min: 0.04em;
+  }
+
+  .eyebrow { color: var(--color-text-muted); }   /* one label voice; the accent is kept for actions */
+
+  /* The label voice reaches the UI. */
+  :is(button, .button), :is(.nav__link, .nav__dropdown-link), .toc a {
+    font-size: var(--step--2);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+  :is(button, .button), .toc a { letter-spacing: 0.12em; }   /* nav links: --nav-tracking above */
+  /* The compact nav's panel (fluid-nav.min.css) sets its links in the
+     reading size; this file's label size above would win over it. */
+  @supports selector(:popover-open) {
+    @container nav (max-width: 40rem) {
+      .nav[data-nav~="compact"] .nav__panel .nav__link { font-size: var(--step-1); }
+    }
+  }
+
+  blockquote {
+    font: italic 400 var(--step-3) / 1.15 var(--font-display);
+    border: 0;
+    padding: 0;
+    text-indent: -0.42em;
+  }
+  /* The hanging open quote goes on the first paragraph, so it hangs in the
+     margin instead of standing on a line of its own; the testimonial adds
+     its own quote marks. */
+  blockquote:not(.testimonial__quote) > :first-child::before { content: "\201C"; }
+
+  .hero__headline, .display { line-height: 0.92; letter-spacing: -0.02em; }
+  /* Bodoni's long descender (~0.25em) hangs below a 0.92 line: room under it. */
+  .hero__headline, .display { padding-block-end: 0.12em; }
+
+  /* The dock's two rows differ by face and size, not only by position. */
+  .toc[data-toc-mode="dock"] .toc__fold > ol > li > a {
+    font: 400 var(--step-0) / 1.2 var(--font-display);
+    text-transform: none;
+    letter-spacing: 0;
+  }
+  figcaption { max-inline-size: 48ch; }
+
+  /* Bodoni Moda's display cut (opsz 72) loses its hairlines on 1x (non-Retina)
+     screens and at phone sizes: there, the font's own sturdier optical sizes
+     and heavier weights. Retina desktops keep the fine display cut. Neil,
+     2026-10-29, on a 27" 2560x1440 LED Cinema Display: two steps heavier than
+     the first fix ("err on the side of readable; a site can go lighter").
+     A site goes lighter by setting the two weights lower (floor 400). */
+  :root {
+    --gallery-lowres-weight: 650;        /* headlines and section heads */
+    --gallery-lowres-lede-weight: 680;   /* lede, pull quote, blockquote */
+  }
+  @media (max-resolution: 1.5dppx), (max-width: 40rem) {
+    :root { --weight-display: var(--gallery-lowres-weight); }   /* h3 +100; +30 in dark */
+    .display, .hero__headline { font-variation-settings: "opsz" 14; }
+    h2, h3 { font-variation-settings: "opsz" 9; }
+    :is(.lede, .pullquote) {
+      font-weight: calc(var(--gallery-lowres-lede-weight) + var(--_dark-weight));
+      font-variation-settings: "opsz" 6;
+    }
+    blockquote {
+      font-weight: calc(var(--gallery-lowres-lede-weight) + var(--_dark-weight));
+      font-variation-settings: "opsz" 9;
+    }
+    /* The low optical sizes are spaced for small text: tighten them back
+       (Neil: "too much white space between the letters"). */
+    .display, .hero__headline { letter-spacing: -0.045em; }
+    h2 { letter-spacing: -0.035em; }
+    h3 { letter-spacing: -0.03em; }
+    :is(.lede, .pullquote), blockquote { letter-spacing: -0.03em; }
+    /* The wordmark set in the display face gets the same sturdier cut. */
+    .nav__brand {
+      font-weight: calc(var(--gallery-lowres-weight) + var(--_dark-weight));
+      font-variation-settings: "opsz" 9;
+      letter-spacing: -0.025em;
+    }
+  }
+}

package/themes/swiss.css

@@ -0,0 +1,53 @@
+/* "swiss": an alternate child theme on the Fluid base v2
+   (spec _docs/plans/base-v2.md §15). One grotesk family, a heavy display
+   over a light lede, an off-centre column with a start-side rail, ink
+   labels instead of accent eyebrows. Fonts: themes/fonts/archivo.css (or
+   dist/fluid-fonts-archivo.min.css). Link after the base: fluid.min.css,
+   then this file. */
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+@layer themes {
+  :root {
+    --font-heading: "Archivo Variable", "Helvetica Neue", "Nimbus Sans", Arial, sans-serif;
+    --font-body: var(--font-heading);
+    --accent: oklch(47% 0.21 264);          /* ultramarine; white on it ≈ 6.8:1 */
+    --neutral-tint: oklch(50% 0.006 85);
+    --type-ratio: 1.5;                      /* h1 ≈ 5× body on desktop */
+    --weight-display: 760;
+    --display-max: 11rem;
+    --measure: 65ch;
+    --container-content: 90rem;
+    --space-section: clamp(4.5rem, 2.613rem + 8.387vi, 11rem);   /* 72 → 176 */
+    --space-gutter: clamp(2.5rem, 0.9032rem + 7.097vi, 8rem);   /* both sides: 20 → 64px a side */
+    --rail: 13rem;                          /* the column sits off-centre; the rail is free for labels */
+    --toc-marker: decimal-leading-zero;
+    --toc-dock-font: var(--font-body);
+  }
+
+  .display, .hero__headline {
+    line-height: 0.92;
+    letter-spacing: -0.045em;
+    font-variation-settings: "wdth" 92;
+  }
+  h1 { letter-spacing: -0.04em; }
+  h2 { font-weight: 700; letter-spacing: -0.03em; }
+  h3 { font-weight: 600; }
+
+  :is(.eyebrow, h5, h6, thead th, .toc__label) {
+    color: var(--color-text);
+    letter-spacing: 0.1em;
+    font-variation-settings: "wdth" 112;
+  }
+
+  .lede { font-family: var(--font-body); font-weight: 300; }
+
+  /* No italic in the display: emphasis by weight. */
+  blockquote, :is(h1, h2, h3, .display) em { font-style: normal; }
+  :is(h1, h2, h3, .display) em { font-weight: 400; }
+
+  .section__head { --section-rule: 3px; }
+
+  /* At ratio 1.5 step 4 is ~100px: heavy numerals that wide overrun a
+     four-column stats row, so they step down one. */
+  .stat__value { font-size: var(--step-3); }
+}