baseline-foundry 0.1.4 → 0.1.6

package/dist/css-grid.d.ts

@@ -1 +1 @@
-export declare function gridCss(): string;
+export declare function gridCss(appScopes?: string[]): string;

package/dist/css-grid.js

@@ -1,13 +1,18 @@
-export function gridCss() {
+export function gridCss(appScopes = [":where(.bf-theme.bf-tier-app)"]) {
     const spanRule = (span, indent = "") => `${indent}:where(.bf-theme) :where(.bf-grid) > :where(.bf-span-${span}) { grid-column: auto / span ${span}; }`;
+    const appPageSelectors = appScopes.map(scope => `${scope} :where(.bf-page)`).join(",\n");
+    const appGutterSelectors = [...new Set([...appScopes, ":where(.bf-theme.bf-tier-app)"])].join(",\n  ");
+    const appPageRule = appPageSelectors
+        ? `${appPageSelectors} {\n  max-inline-size: none;\n}`
+        : "";
     const baseSpans = [1, 2, 4].map(span => spanRule(span)).join("\n");
     const mediumSpans = [1, 2, 4, 8].map(span => spanRule(span, "  ")).join("\n");
     const largeSpans = [1, 2, 4, 8, 16].map(span => spanRule(span, "  ")).join("\n");
     return `/* ------------------------------------------------------------------ */
 /* Gutter and margin escalation — viewport-based, all tiers            */
 /* Grid spec v0.3 §2.3: gutters set by global viewport breakpoint.     */
-/* Baseline Foundry models the spec's 460px x-small row as part of the */
-/* default <620px bracket because the values do not change at 460px.   */
+/* Baseline Foundry models the spec's 28.75rem x-small row as part of the */
+/* default <38.75rem bracket because the values do not change at 28.75rem.   */
 /* ------------------------------------------------------------------ */
 
 :where(.bf-theme) {
@@ -31,7 +36,7 @@ export function gridCss() {
     --bf-page-margin: 2rem;
   }
 
-  :where(.bf-theme.bf-tier-app) {
+  ${appGutterSelectors} {
     --bf-grid-gap-inline: 1.5rem;
     --bf-grid-gap-block: 1.5rem;
   }
@@ -78,9 +83,7 @@ export function gridCss() {
   margin-inline-start: 0;
 }
 
-:where(.bf-theme.bf-tier-app) :where(.bf-page) {
-  max-inline-size: none;
-}
+${appPageRule}
 
 :where(.bf-theme) :where(.bf-panel-content, .bf-accordion-panel) :where(.bf-fixed-width) {
   padding-inline: 0;
@@ -90,6 +93,13 @@ export function gridCss() {
   padding-inline: 0;
 }
 
+/* A page is the outer grid row and therefore owns its horizontal gutter.
+ * Fixed-width regions nested anywhere inside it retain their cap and
+ * centering behavior without introducing a second page inset. */
+:where(.bf-theme) :where(.bf-page) :where(.bf-fixed-width) {
+  padding-inline: 0;
+}
+
 /* ------------------------------------------------------------------ */
 /* Grid base — 4 columns, all tiers                                    */
 /* ------------------------------------------------------------------ */
@@ -111,7 +121,7 @@ export function gridCss() {
 
 :where(.bf-theme) :where(.bf-grid.is-guide) > * {
   background: color-mix(in srgb, var(--bf-color-accent) 18%, var(--bf-color-background-default));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-color-accent) 50%, var(--bf-color-rule));
+  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--bf-color-accent) 50%, var(--bf-color-rule));
   min-block-size: calc(var(--bf-baseline) * 4);
 }
 

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))
@@ -210,7 +224,7 @@ ${generateBaselineGridThemeOverrideCss()}
 :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;
 }
 
@@ -223,8 +237,22 @@ ${generateBaselineGridThemeOverrideCss()}
 }
 
 :where(.bf-theme) :where(a:focus-visible) {
-  outline: 2px solid var(--bf-color-focus);
-  outline-offset: 2px;
+  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) {
@@ -235,7 +263,7 @@ ${generateBaselineGridThemeOverrideCss()}
 :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));
+  padding-inline: var(--bf-page-margin);
 }
 
 :where(.bf-theme) :where(.bf-page.is-fill) {
@@ -318,7 +346,14 @@ ${generateBaselineGridThemeOverrideCss()}
 }
 
 :where(.bf-theme) :where(.bf-stack.is-flush) {
-  --bf-stack-space: 0px;
+  --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) {
@@ -346,10 +381,19 @@ ${generateBaselineGridThemeOverrideCss()}
 }
 
 :where(.bf-theme) :where(.bf-cluster) {
+  --bf-cluster-space: var(--bf-space-2);
   align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--bf-space-2);
+  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) {
@@ -364,14 +408,48 @@ ${generateBaselineGridThemeOverrideCss()}
 
 ${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, .bf-prose ol) {
-  padding-inline-start: var(--bf-space-4);
+: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) {
@@ -381,39 +459,37 @@ ${capEngineDemo}
 }
 
 :where(.bf-theme) :where(.bf-prose blockquote) {
-  border-inline-start: 1px solid var(--bf-color-rule);
-  color: var(--bf-color-muted);
+  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: calc(var(--bf-measure) + var(--bf-space-4));
+  max-inline-size: var(--bf-measure);
   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) {
+:where(.bf-theme) :where(hr) {
   background: var(--bf-color-rule);
-  block-size: 1px;
+  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 - 1px);
+  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(.bf-rule.is-highlighted, .bf-prose hr.is-highlighted) {
+: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: 1px solid var(--bf-color-rule);
+  border-top: 0.0625rem solid var(--bf-color-rule);
   display: grid;
   gap: var(--bf-space-1);
   padding-top: var(--bf-space-2);
@@ -426,6 +502,6 @@ ${capEngineDemo}
 
 ${componentsCss(tokens, themeSurfaces)}
 
-${gridCss()}${presetCss}
+${gridCss(appScopes)}${presetCss}
 `;
 }