baseline-foundry 0.1.3 → 0.1.5

package/dist/css.js

@@ -148,6 +148,20 @@ export function generateFoundryCss(tokens, options = {}) {
     const roleRules = Object.entries(tokens.roles)
         .map(([roleName, token]) => textRule(roleName, selectorsForRole(roleName), token, baselineUnit, EXTRA_STYLES_BY_ROLE[roleName] ?? ""))
         .join("\n");
+    const semanticMetricFlushSelectors = Object.keys(tokens.roles).flatMap(roleName => {
+        if (roleName === "body")
+            return ["p"];
+        if (/^h[1-6]$/.test(roleName))
+            return [roleName];
+        if (roleName === "meta")
+            return ["figcaption"];
+        return [];
+    });
+    const metricFlushTextSelectors = [...new Set([
+            "blockquote",
+            ...semanticMetricFlushSelectors,
+            ...Object.keys(tokens.roles).map(roleName => `.bf-${roleName}`)
+        ])].join(", ");
     const capEngineDemo = `/* DEMO ONLY — Cap-derived nudges are unreliable (ascender ≠ cap height).\n   The approximation (line-height + 1cap) / 2 drifts at larger sizes.\n   Kept as a reference for why metrics-derived nudges are used instead. */\n` +
         Object.entries(tokens.roles)
             .map(([roleName, token]) => capEngineDemoRule(selectorsForRole(roleName), token))
@@ -164,53 +178,53 @@ export function generateFoundryCss(tokens, options = {}) {
     if (!body) {
         throw new Error("Theme tokens require a body role.");
     }
-    return `${fontFaces}${fontFaces ? "\n" : ""}${generateBaselineGridOverlayCss({ baselineUnit: tokens.baselineUnit })}
-
-${themeSurfaceRule(":where(.bf-theme)", tokens)}
-${scopedThemeCss}
-
-:where(.bf-theme) {
-${vanillaThemeColorVars("light")}${foundryThemeRootColorVars("light")}
-  background: var(--bf-color-bg);
-  color: var(--bf-color-text);
-  font-family: var(--bf-body-font-family, ${body.fontStack});
-  font-size: var(--bf-body-font-size, ${body.fontSize});
-  font-style: var(--bf-body-font-style, ${body.fontStyle ?? "normal"});
-  font-weight: var(--bf-body-font-weight, ${body.fontWeight ?? 400});
-  line-height: var(--bf-body-line-height, ${body.lineHeight});
-}
-
-:where(.bf-theme.is-dark) {
-${vanillaThemeColorVars("dark")}${foundryThemeRootColorVars("dark")}
-  color-scheme: dark;
-}
-
-:where(.bf-theme.is-light) {
-  color-scheme: light;
-}
-
-:where(.bf-theme),
-:where(.bf-theme) * {
-  box-sizing: border-box;
-}
-
-${generateBaselineGridThemeOverrideCss()}
-
-:where(.bf-theme) :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl, pre) {
-  margin: 0;
-}
-
-:where(.bf-theme) :where(img, picture, svg, video) {
-  block-size: auto;
-  display: block;
-  inline-size: auto;
-  max-inline-size: 100%;
-}
-
+    return `${fontFaces}${fontFaces ? "\n" : ""}${generateBaselineGridOverlayCss({ baselineUnit: tokens.baselineUnit })}
+
+${themeSurfaceRule(":where(.bf-theme)", tokens)}
+${scopedThemeCss}
+
+:where(.bf-theme) {
+${vanillaThemeColorVars("light")}${foundryThemeRootColorVars("light")}
+  background: var(--bf-color-bg);
+  color: var(--bf-color-text);
+  font-family: var(--bf-body-font-family, ${body.fontStack});
+  font-size: var(--bf-body-font-size, ${body.fontSize});
+  font-style: var(--bf-body-font-style, ${body.fontStyle ?? "normal"});
+  font-weight: var(--bf-body-font-weight, ${body.fontWeight ?? 400});
+  line-height: var(--bf-body-line-height, ${body.lineHeight});
+}
+
+:where(.bf-theme.is-dark) {
+${vanillaThemeColorVars("dark")}${foundryThemeRootColorVars("dark")}
+  color-scheme: dark;
+}
+
+:where(.bf-theme.is-light) {
+  color-scheme: light;
+}
+
+:where(.bf-theme),
+:where(.bf-theme) * {
+  box-sizing: border-box;
+}
+
+${generateBaselineGridThemeOverrideCss()}
+
+:where(.bf-theme) :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl, pre) {
+  margin: 0;
+}
+
+:where(.bf-theme) :where(img, picture, svg, video) {
+  block-size: auto;
+  display: block;
+  inline-size: auto;
+  max-inline-size: 100%;
+}
+
 :where(.bf-theme) :where(a) {
   color: var(--bf-color-link);
   text-decoration: none;
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: 0.0625rem;
   text-underline-offset: 0.12em;
 }
 
@@ -221,211 +235,273 @@ ${generateBaselineGridThemeOverrideCss()}
 :where(.bf-theme) :where(a:visited) {
   color: var(--bf-color-link-visited);
 }
-
-:where(.bf-theme) :where(a:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
-}
-
-:where(.bf-theme) :where(code) {
-  font-family: "Ubuntu Sans Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
-  font-size: 0.95em;
-}
-
-:where(.bf-theme) :where(.bf-page) {
-  margin-inline: auto;
-  max-inline-size: var(--bf-content-max-width);
-  padding-inline: max(var(--bf-page-margin), var(--bf-content-padding-inline));
-}
-
-:where(.bf-theme) :where(.bf-page.is-fill) {
-  min-block-size: 100vh;
-  padding-block-end: var(--bf-section-space);
-}
-
-:where(.bf-theme) :where(.bf-section) {
-  margin-block-end: 0;
-}
-
-:where(.bf-theme) :where(.bf-section.is-shallow) {
-  margin-block-end: 0;
-}
-
-:where(.bf-theme) :where(.bf-section.is-deep) {
-  margin-block-end: 0;
-}
-
-:where(.bf-theme) :where(.bf-strip) {
-  padding-block-end: var(--bf-strip-space);
-}
-
-:where(.bf-theme) :where(.bf-fixed-width, .bf-measure) {
-  inline-size: min(100%, var(--bf-measure));
-}
-
-:where(.bf-theme) :where(.bf-inline-size) {
-  --bf-inline-size: 18rem;
-  flex: 0 1 var(--bf-inline-size);
-  inline-size: min(100%, var(--bf-inline-size));
-  min-inline-size: min(100%, var(--bf-inline-size));
-}
-
-:where(.bf-theme) :where(.bf-inline-size.is-compact) {
-  --bf-inline-size: 12rem;
-}
-
-:where(.bf-theme) :where(.bf-inline-size.is-regular) {
-  --bf-inline-size: 18rem;
-}
-
-:where(.bf-theme) :where(.bf-inline-size.is-medium) {
-  --bf-inline-size: 20rem;
-}
-
-:where(.bf-theme) :where(.bf-inline-size.is-wide) {
-  --bf-inline-size: 24rem;
-}
-
-:where(.bf-theme) :where(.bf-inline-size.is-x-wide) {
-  --bf-inline-size: 28rem;
-}
-
-:where(.bf-theme) :where(.bf-stage-shell) {
-  --bf-stage-shell-gap: var(--bf-space-3);
-  align-content: center;
-  align-items: center;
-  display: grid;
-  gap: var(--bf-stage-shell-gap);
-  justify-items: center;
-  min-block-size: 100%;
-  min-inline-size: 0;
-  padding-block: var(--bf-space-4);
-}
-
-:where(.bf-theme) :where(.bf-stage-shell.is-tight) {
-  --bf-stage-shell-gap: var(--bf-space-2);
-}
-
-:where(.bf-theme) :where(.bf-stage-shell.is-loose) {
-  --bf-stage-shell-gap: var(--bf-space-4);
-}
-
+
+:where(.bf-theme) :where(a:focus-visible) {
+  outline: 0.125rem solid var(--bf-color-focus);
+  outline-offset: 0.125rem;
+}
+
+/* Standalone anchors need the same metric-owned text box as adjacent body
+ * controls. Raw anchors remain inline so prose links still participate in the
+ * surrounding line box. */
+:where(.bf-theme) :where(a.bf-text-link) {
+  display: inline-block;
+  font-family: var(--bf-body-font-family);
+  font-size: var(--bf-body-font-size);
+  font-style: var(--bf-body-font-style);
+  font-weight: var(--bf-body-font-weight);
+  line-height: var(--bf-body-line-height);
+  margin-block: 0 var(--bf-body-margin-bottom);
+  padding-block: var(--bf-body-nudge-start) 0;
+}
+
+:where(.bf-theme) :where(code) {
+  font-family: "Ubuntu Sans Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 0.95em;
+}
+
+:where(.bf-theme) :where(.bf-page) {
+  margin-inline: auto;
+  max-inline-size: var(--bf-content-max-width);
+  padding-inline: var(--bf-page-margin);
+}
+
+:where(.bf-theme) :where(.bf-page.is-fill) {
+  min-block-size: 100vh;
+  padding-block-end: var(--bf-section-space);
+}
+
+:where(.bf-theme) :where(.bf-section) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-section.is-shallow) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-section.is-deep) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-strip) {
+  padding-block-end: var(--bf-strip-space);
+}
+
+:where(.bf-theme) :where(.bf-fixed-width, .bf-measure) {
+  inline-size: min(100%, var(--bf-measure));
+}
+
+:where(.bf-theme) :where(.bf-inline-size) {
+  --bf-inline-size: 18rem;
+  flex: 0 1 var(--bf-inline-size);
+  inline-size: min(100%, var(--bf-inline-size));
+  min-inline-size: min(100%, var(--bf-inline-size));
+}
+
+:where(.bf-theme) :where(.bf-inline-size.is-compact) {
+  --bf-inline-size: 12rem;
+}
+
+:where(.bf-theme) :where(.bf-inline-size.is-regular) {
+  --bf-inline-size: 18rem;
+}
+
+:where(.bf-theme) :where(.bf-inline-size.is-medium) {
+  --bf-inline-size: 20rem;
+}
+
+:where(.bf-theme) :where(.bf-inline-size.is-wide) {
+  --bf-inline-size: 24rem;
+}
+
+:where(.bf-theme) :where(.bf-inline-size.is-x-wide) {
+  --bf-inline-size: 28rem;
+}
+
+:where(.bf-theme) :where(.bf-stage-shell) {
+  --bf-stage-shell-gap: var(--bf-space-3);
+  align-content: center;
+  align-items: center;
+  display: grid;
+  gap: var(--bf-stage-shell-gap);
+  justify-items: center;
+  min-block-size: 100%;
+  min-inline-size: 0;
+  padding-block: var(--bf-space-4);
+}
+
+:where(.bf-theme) :where(.bf-stage-shell.is-tight) {
+  --bf-stage-shell-gap: var(--bf-space-2);
+}
+
+:where(.bf-theme) :where(.bf-stage-shell.is-loose) {
+  --bf-stage-shell-gap: var(--bf-space-4);
+}
+
 :where(.bf-theme) :where(.bf-stack) {
   --bf-stack-space: var(--bf-section-space-shallow);
   align-content: start;
   display: grid;
-  gap: var(--bf-stack-space);
-}
-
-:where(.bf-theme) :where(.bf-stack.is-flush) {
-  --bf-stack-space: 0px;
-}
-
-:where(.bf-theme) :where(.bf-stack.is-extra-dense) {
-  --bf-stack-space: var(--bf-space-half);
-}
-
-:where(.bf-theme) :where(.bf-stack.is-dense) {
-  --bf-stack-space: var(--bf-space-1);
-}
-
-:where(.bf-theme) :where(.bf-stack.is-loose) {
-  --bf-stack-space: var(--bf-space-2);
-}
-
-:where(.bf-theme) :where(.bf-stack.is-section-shallow) {
-  --bf-stack-space: var(--bf-section-space-shallow);
-}
-
-:where(.bf-theme) :where(.bf-stack.is-section) {
-  --bf-stack-space: var(--bf-section-space);
-}
-
+  gap: var(--bf-stack-space);
+}
+
+:where(.bf-theme) :where(.bf-stack.is-flush) {
+  --bf-stack-space: 0rem;
+}
+
+/* A metric-flush stack is an explicit relationship between adjacent text
+ * roles. It retains the outer role nudges while cancelling only the preceding
+ * end compensation and following start nudge; no guessed negative gap is used. */
+:where(.bf-theme) :where(.bf-stack.is-metric-flush) {
+  --bf-stack-space: 0rem;
+}
+
+:where(.bf-theme) :where(.bf-stack.is-extra-dense) {
+  --bf-stack-space: var(--bf-space-half);
+}
+
+:where(.bf-theme) :where(.bf-stack.is-dense) {
+  --bf-stack-space: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-stack.is-loose) {
+  --bf-stack-space: var(--bf-space-2);
+}
+
+:where(.bf-theme) :where(.bf-stack.is-section-shallow) {
+  --bf-stack-space: var(--bf-section-space-shallow);
+}
+
+:where(.bf-theme) :where(.bf-stack.is-section) {
+  --bf-stack-space: var(--bf-section-space);
+}
+
 :where(.bf-theme) :where(.bf-stack.is-section-deep) {
   --bf-stack-space: var(--bf-section-space-deep);
 }
 
 :where(.bf-theme) :where(.bf-cluster) {
-  align-items: flex-start;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--bf-space-2);
-}
-
-:where(.bf-theme) :where(.bf-cluster.is-split) {
-  justify-content: space-between;
-}
-
-:where(.bf-theme) :where(.bf-prose) {
-  display: grid;
-  gap: var(--bf-section-space-shallow);
-  inline-size: min(100%, var(--bf-measure));
-}
-
-${roleRules}
-
-${capEngineDemo}
-
-:where(.bf-theme) :where(ul, ol) {
-  margin-bottom: 0;
-}
-
-:where(.bf-theme) :where(.bf-prose ul, .bf-prose ol) {
-  padding-inline-start: var(--bf-space-4);
-}
-
-:where(.bf-theme) :where(.bf-prose li) {
-  margin: 0 0 ${roleMarginBottomVar("body", baselineCompensation(body.nudgeTop, baselineUnit))};
-  padding-block-end: 0rem;
-  padding-block-start: ${roleNudgeStartVar("body", body.nudgeTop)};
-}
-
-:where(.bf-theme) :where(.bf-prose blockquote) {
-  border-inline-start: 1px solid var(--bf-color-rule);
-  color: var(--bf-color-muted);
-  font-family: ${roleFontFamilyVar("body", body.fontStack)};
-  font-size: ${roleFontSizeVar("body", body.fontSize)};
-  font-style: ${roleFontStyleVar("body", body.fontStyle ?? "normal")};
-  font-weight: ${roleFontWeightVar("body", body.fontWeight ?? 400)};
-  line-height: ${roleLineHeightVar("body", body.lineHeight)};
-  margin-bottom: ${roleMarginBottomVar("body", baselineCompensation(body.nudgeTop, baselineUnit))};
-  max-inline-size: calc(var(--bf-measure) + var(--bf-space-4));
-  padding-block-end: 0rem;
-  padding-block-start: ${roleNudgeStartVar("body", body.nudgeTop)};
-  padding-inline-start: var(--bf-space-3);
-}
-
-:where(.bf-theme) :where(.bf-rule, .bf-prose hr) {
-  background: var(--bf-color-rule);
-  block-size: 1px;
-  border: 0;
-  inline-size: 100%;
-  /* Reserve one half-rem rhythm step after the rule, including its */
-  /* thickness, so borderless content does not touch the divider. */
-  margin: 0 0 calc(0.5rem - 1px);
-}
-
-/* Highlight rules share the same scalable emphasis-bar geometry as active
- * navigation, tabs, notifications, and document-navigation markers. */
-:where(.bf-theme) :where(.bf-rule.is-highlighted, .bf-prose hr.is-highlighted) {
-  block-size: var(--bf-bar-thickness);
-  margin-block-end: calc(0.5rem - var(--bf-bar-thickness));
-}
-
-:where(.bf-theme) :where(.bf-token-row) {
-  border-top: 1px solid var(--bf-color-rule);
-  display: grid;
-  gap: var(--bf-space-1);
-  padding-top: var(--bf-space-2);
-}
-
-:where(.bf-theme) :where(.bf-token-row:first-child) {
-  border-top: 0;
-  padding-top: 0;
-}
-
-${componentsCss(tokens, themeSurfaces)}
-
-${gridCss()}${presetCss}
+  --bf-cluster-space: var(--bf-space-2);
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bf-cluster-space);
+}
+
+:where(.bf-theme) :where(.bf-cluster.is-dense) {
+  --bf-cluster-space: var(--bf-space-1);
+}
+
+:where(.bf-theme) :where(.bf-cluster.is-nowrap) {
+  flex-wrap: nowrap;
+}
+
+:where(.bf-theme) :where(.bf-cluster.is-split) {
+  justify-content: space-between;
+}
+
+:where(.bf-theme) :where(.bf-prose) {
+  display: grid;
+  gap: var(--bf-section-space-shallow);
+  inline-size: min(100%, var(--bf-measure));
+}
+
+${roleRules}
+
+:where(.bf-theme) .bf-stack.is-metric-flush > :where(${metricFlushTextSelectors}):has(+ :where(${metricFlushTextSelectors})) {
+  margin-block-end: 0;
+}
+
+:where(.bf-theme) .bf-stack.is-metric-flush > :where(${metricFlushTextSelectors}) + :where(${metricFlushTextSelectors}) {
+  padding-block-start: 0;
+}
+
+${capEngineDemo}
+
+:where(.bf-theme) :where(ul, ol) {
+  margin-bottom: 0;
+  padding-block-end: 0;
+}
+
+:where(.bf-theme) :where(.bf-prose ol) {
+  padding-inline-start: calc(var(--bf-leading-mark-group-inset) + var(--bf-leading-mark-offset) - (var(--bf-leading-mark-size) * 0.5));
+}
+
+:where(.bf-theme) :where(.bf-prose ol > li) {
+  padding-inline-start: calc(var(--bf-leading-mark-size) * 0.5);
+}
+
+:where(.bf-theme) :where(.bf-prose ul) {
+  list-style: none;
+  padding-inline-start: var(--bf-leading-mark-group-inset);
+}
+
+:where(.bf-theme) :where(.bf-prose ul > li) {
+  padding-inline-start: var(--bf-leading-mark-offset);
+  position: relative;
+}
+
+:where(.bf-theme) :where(.bf-prose ul > li)::before {
+  background: currentColor;
+  block-size: var(--bf-list-marker-dot-size);
+  border-radius: 50%;
+  content: "";
+  inline-size: var(--bf-list-marker-dot-size);
+  inset-block-start: calc(var(--bf-tick-box-offset) + ((var(--bf-leading-mark-size) - var(--bf-list-marker-dot-size)) * 0.5));
+  inset-inline-start: calc((var(--bf-leading-mark-size) - var(--bf-list-marker-dot-size)) * 0.5);
+  position: absolute;
+}
+
+:where(.bf-theme) :where(.bf-prose li) {
+  margin: 0 0 ${roleMarginBottomVar("body", baselineCompensation(body.nudgeTop, baselineUnit))};
+  padding-block-end: 0rem;
+  padding-block-start: ${roleNudgeStartVar("body", body.nudgeTop)};
+}
+
+:where(.bf-theme) :where(.bf-prose blockquote) {
+  color: var(--bf-color-text-default);
+  font-family: ${roleFontFamilyVar("body", body.fontStack)};
+  font-size: ${roleFontSizeVar("body", body.fontSize)};
+  font-style: ${roleFontStyleVar("body", body.fontStyle ?? "normal")};
+  font-weight: ${roleFontWeightVar("body", body.fontWeight ?? 400)};
+  line-height: ${roleLineHeightVar("body", body.lineHeight)};
+  margin-bottom: ${roleMarginBottomVar("body", baselineCompensation(body.nudgeTop, baselineUnit))};
+  max-inline-size: var(--bf-measure);
+  padding-block-end: 0rem;
+  padding-block-start: ${roleNudgeStartVar("body", body.nudgeTop)};
+}
+
+:where(.bf-theme) :where(hr) {
+  background: var(--bf-color-rule);
+  block-size: 0.0625rem;
+  border: 0;
+  inline-size: 100%;
+  /* Reserve one half-rem rhythm step after the rule, including its */
+  /* thickness, so borderless content does not touch the divider. */
+  margin: 0 0 calc(0.5rem - 0.0625rem);
+}
+
+/* Highlight rules share the same scalable emphasis-bar geometry as active
+ * navigation, tabs, notifications, and document-navigation markers. */
+:where(.bf-theme) :where(hr.is-highlighted) {
+  block-size: var(--bf-bar-thickness);
+  margin-block-end: calc(0.5rem - var(--bf-bar-thickness));
+}
+
+:where(.bf-theme) :where(.bf-token-row) {
+  border-top: 0.0625rem solid var(--bf-color-rule);
+  display: grid;
+  gap: var(--bf-space-1);
+  padding-top: var(--bf-space-2);
+}
+
+:where(.bf-theme) :where(.bf-token-row:first-child) {
+  border-top: 0;
+  padding-top: 0;
+}
+
+${componentsCss(tokens, themeSurfaces)}
+
+${gridCss(appScopes)}${presetCss}
 `;
 }