baseline-foundry 0.1.3 → 0.1.5

package/config/tiers/os.json

@@ -1,120 +1,120 @@
-{
-  "baselineUnit": 0.25,
-  "fontFiles": [
-    {
-      "family": "ubuntu-sans",
-      "path": "../../assets/fonts/UbuntuSans[wdth,wght].ttf",
-      "cssFamily": "Ubuntu Sans",
-      "fontStyle": "normal",
-      "fontWeight": "100 800",
-      "fontStretch": "75% 100%",
-      "fontDisplay": "swap",
-      "emitFontFace": false
-    }
-  ],
-  "fontStacks": {
-    "ubuntu-sans": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif"
-  },
-  "elements": [
-    {
-      "identifier": "body",
-      "fontSize": 0.75,
-      "lineHeight": 4,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
-      "fontWeight": 400,
-      "fontStyle": "normal"
-    },
-    {
-      "identifier": "h6",
-      "fontSize": 0.75,
-      "lineHeight": 4,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
-      "fontWeight": 550,
-      "fontStyle": "normal"
-    },
-    {
-      "identifier": "h5",
-      "fontSize": 0.75,
-      "lineHeight": 4,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
+{
+  "baselineUnit": 0.25,
+  "fontFiles": [
+    {
+      "family": "ubuntu-sans",
+      "path": "../../assets/fonts/UbuntuSans[wdth,wght].ttf",
+      "cssFamily": "Ubuntu Sans",
+      "fontStyle": "normal",
+      "fontWeight": "100 800",
+      "fontStretch": "75% 100%",
+      "fontDisplay": "swap",
+      "emitFontFace": false
+    }
+  ],
+  "fontStacks": {
+    "ubuntu-sans": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif"
+  },
+  "elements": [
+    {
+      "identifier": "body",
+      "fontSize": 0.75,
+      "lineHeight": 4,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 400,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h6",
+      "fontSize": 0.75,
+      "lineHeight": 4,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h5",
+      "fontSize": 0.75,
+      "lineHeight": 4,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
       "fontWeight": 550,
       "fontStyle": "normal",
       "fontVariantCaps": "all-small-caps",
       "letterSpacing": "0.05em"
-    },
-    {
-      "identifier": "h4",
-      "fontSize": 1,
-      "lineHeight": 4,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
-      "fontWeight": 300,
-      "fontStyle": "normal"
-    },
-    {
-      "identifier": "h3",
-      "fontSize": 1,
-      "lineHeight": 4,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
-      "fontWeight": 500,
-      "fontStyle": "normal"
-    },
-    {
-      "identifier": "h2",
-      "fontSize": 1.5,
-      "lineHeight": 6,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
-      "fontWeight": 200,
-      "fontStyle": "normal"
-    },
-    {
-      "identifier": "h1",
-      "fontSize": 1.5,
-      "lineHeight": 6,
-      "spaceAfter": 3,
-      "fontFamily": "ubuntu-sans",
-      "fontWeight": 500,
-      "fontStyle": "normal"
-    }
-  ],
-  "roles": {
-    "body": "body",
-    "h1": "h1",
-    "h2": "h2",
-    "h3": "h3",
-    "h4": "h4",
-    "h5": "h5",
-    "h6": "h6"
-  },
-  "layout": {
-    "contentMaxWidthRem": 67.5,
-    "contentPaddingInlineRem": 0.75,
-    "measureRem": 30,
-    "sectionSpaceBaselineUnits": 12,
-    "sectionSpaceShallowBaselineUnits": 6,
-    "sectionSpaceDeepBaselineUnits": 24,
-    "stripSpaceBaselineUnits": 12,
-    "gridGapInlineBaselineUnits": 4,
-    "gridGapBlockBaselineUnits": 4,
-    "pageMarginBaselineUnits": 4
-  },
-  "components": {
-    "borderWidthPx": 1,
-    "radiusRem": 0,
-    "controlBlockPaddingRem": 0.375,
-    "controlCompactBlockPaddingRem": 0.25,
-    "controlInlinePaddingRem": 0.75,
-    "controlInlinePaddingActionRem": 0.5,
-    "controlInlinePaddingFieldRem": 0.25,
-    "controlVisualSizeRem": 0.75,
-    "fieldGapBaselineUnits": 1,
-    "panelPaddingInlineBaselineUnits": 4,
-    "panelPaddingBlockBaselineUnits": 4,
-    "accordionIndentBaselineUnits": 3
-  }
-}
+    },
+    {
+      "identifier": "h4",
+      "fontSize": 1,
+      "lineHeight": 4,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 300,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h3",
+      "fontSize": 1,
+      "lineHeight": 4,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h2",
+      "fontSize": 1.5,
+      "lineHeight": 6,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 200,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h1",
+      "fontSize": 1.5,
+      "lineHeight": 6,
+      "spaceAfter": 3,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal"
+    }
+  ],
+  "roles": {
+    "body": "body",
+    "h1": "h1",
+    "h2": "h2",
+    "h3": "h3",
+    "h4": "h4",
+    "h5": "h5",
+    "h6": "h6"
+  },
+  "layout": {
+    "contentMaxWidthRem": 60,
+    "contentPaddingInlineRem": 0.75,
+    "measureRem": 30,
+    "sectionSpaceBaselineUnits": 12,
+    "sectionSpaceShallowBaselineUnits": 6,
+    "sectionSpaceDeepBaselineUnits": 24,
+    "stripSpaceBaselineUnits": 8,
+    "gridGapInlineBaselineUnits": 4,
+    "gridGapBlockBaselineUnits": 4,
+    "pageMarginBaselineUnits": 4
+  },
+  "components": {
+    "borderWidthRem": 0.0625,
+    "radiusRem": 0,
+    "controlBlockPaddingRem": 0.375,
+    "controlCompactBlockPaddingRem": 0.25,
+    "controlInlinePaddingRem": 0.75,
+    "controlInlinePaddingActionRem": 1,
+    "controlInlinePaddingFieldRem": 0.25,
+    "controlVisualSizeRem": 0.75,
+    "fieldGapBaselineUnits": 1,
+    "panelPaddingInlineBaselineUnits": 2,
+    "panelPaddingBlockBaselineUnits": 2,
+    "accordionIndentBaselineUnits": 3
+  }
+}

package/dist/baseline-grid-overlay.js

@@ -1,50 +1,50 @@
 import { BASELINE_GRID_DARK_THEME_COLOR, BASELINE_GRID_DEFAULT_COLOR, BASELINE_GRID_LIGHT_THEME_COLOR } from "./baseline-grid-theme.js";
 export function generateBaselineGridOverlayCss(options) {
-    return `.u-baseline-grid {
-  --bf-baseline-grid-color: ${BASELINE_GRID_DEFAULT_COLOR};
-  --bf-baseline-grid-page-color: transparent;
-  --bf-baseline-grid-offset: 0rem;
-  --bf-baseline-grid-size: var(--bf-baseline, ${options.baselineUnit});
-  position: relative;
-}
-
-.u-baseline-grid::after {
-  background-image: linear-gradient(
-    to top,
-    var(--bf-baseline-grid-color),
-    var(--bf-baseline-grid-color) 1px,
-    transparent 1px,
-    transparent
-  );
-  background-size: 100% var(--bf-baseline-grid-size);
-  bottom: 0;
-  content: "";
-  display: block;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: var(--bf-baseline-grid-offset);
-  z-index: 200;
-}
-
-html.u-baseline-grid {
-  background-color: var(--bf-baseline-grid-page-color);
-  position: static;
-}
-
-html.u-baseline-grid::after {
-  z-index: -1;
+    return `.u-baseline-grid {
+  --bf-baseline-grid-color: ${BASELINE_GRID_DEFAULT_COLOR};
+  --bf-baseline-grid-page-color: transparent;
+  --bf-baseline-grid-offset: 0rem;
+  --bf-baseline-grid-size: var(--bf-baseline, ${options.baselineUnit});
+  position: relative;
+}
+
+.u-baseline-grid::after {
+  background-image: linear-gradient(
+    to top,
+    var(--bf-baseline-grid-color),
+    var(--bf-baseline-grid-color) 0.0625rem,
+    transparent 0.0625rem,
+    transparent
+  );
+  background-size: 100% var(--bf-baseline-grid-size);
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: var(--bf-baseline-grid-offset);
+  z-index: 200;
+}
+
+html.u-baseline-grid {
+  background-color: var(--bf-baseline-grid-page-color);
+  position: static;
+}
+
+html.u-baseline-grid::after {
+  z-index: -1;
 }`;
 }
 export function generateBaselineGridThemeOverrideCss() {
-    return `:where(.bf-theme).u-baseline-grid,
-:where(.bf-theme) .u-baseline-grid {
-  --bf-baseline-grid-color: ${BASELINE_GRID_LIGHT_THEME_COLOR};
-}
-
-:where(.bf-theme.is-dark).u-baseline-grid,
-:where(.bf-theme.is-dark) .u-baseline-grid {
-  --bf-baseline-grid-color: ${BASELINE_GRID_DARK_THEME_COLOR};
+    return `:where(.bf-theme).u-baseline-grid,
+:where(.bf-theme) .u-baseline-grid {
+  --bf-baseline-grid-color: ${BASELINE_GRID_LIGHT_THEME_COLOR};
+}
+
+:where(.bf-theme.is-dark).u-baseline-grid,
+:where(.bf-theme.is-dark) .u-baseline-grid {
+  --bf-baseline-grid-color: ${BASELINE_GRID_DARK_THEME_COLOR};
 }`;
 }

package/dist/build.js

@@ -50,7 +50,7 @@ const REQUIRED_LAYOUT_FIELDS = [
     "pageMarginBaselineUnits"
 ];
 const REQUIRED_COMPONENT_FIELDS = [
-    "borderWidthPx",
+    "borderWidthRem",
     "radiusRem",
     "controlBlockPaddingRem",
     "controlInlinePaddingRem",
@@ -209,9 +209,9 @@ function buildComponentTokens(config) {
     const controlInlinePaddingActionRem = config.components.controlInlinePaddingActionRem ?? config.components.controlInlinePaddingRem;
     const controlInlinePaddingFieldRem = config.components.controlInlinePaddingFieldRem ?? (controlInlinePaddingActionRem / 2);
     return {
-        borderWidth: `${config.components.borderWidthPx}px`,
-        // Vanilla's shared $bar-thickness: 3px at a 16px root, expressed in rem
-        // so emphasis bars scale with root text sizing while thin borders do not.
+        borderWidth: toRem(config.components.borderWidthRem),
+        // Vanilla's shared $bar-thickness is represented as 0.1875rem so emphasis
+        // bars and thin borders both scale with root text sizing.
         barThickness: toRem(3 / 16),
         radius: toRem(config.components.radiusRem),
         controlBlockPadding: toRem(config.components.controlBlockPaddingRem),

package/dist/code-snippet.js

@@ -23,7 +23,7 @@ async function copySnippetText(copyBlock) {
     textarea.value = text;
     textarea.setAttribute("readonly", "");
     textarea.style.position = "fixed";
-    textarea.style.inset = "-9999px";
+    textarea.style.inset = "-624.9375rem";
     document.body.append(textarea);
     textarea.select();
     try {

package/dist/css-app-tier.js

@@ -1,77 +1,82 @@
 export function appTierPresetCss(scopes) {
     const scoped = (suffix = "") => scopes.map(scope => `${scope}${suffix}`).join(",\n");
-    return `/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
-${scoped()} {
-  --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
-  --bf-radius: 0;
-  color-scheme: light;
-}
-
-${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message)")} {
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25rem;
-}
-
-${scoped(" :where(.bf-input, .bf-button, .bf-button.is-base)")} {
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25rem;
-}
-
-${scoped(" :where(.bf-application)")} {
-  background: var(--bf-app-demo-page-bg);
-}
-
-${scoped(" :where(.bf-navigation-drawer)")},
-${scoped(" :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer)")},
-${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.12);
-}
-
-${scoped(" :where(.bf-panel-header)")} {
-  align-items: start;
-  gap: calc(var(--bf-baseline) * 1.5);
-  padding-block-end: var(--bf-panel-padding-block);
-  padding-block-start: var(--bf-panel-padding-block);
-}
-
-${scoped(" :where(.bf-panel-header.is-navigation-brand)")} {
-  gap: 0;
-  padding-block: 0;
-}
-
-${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
-  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
-}
-
-${scoped(" :where(.bf-panel-controls)")} {
-  gap: calc(var(--bf-baseline) * 1.5);
-}
-
-${scoped(" :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title)")} {
-  font-family: inherit;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.5rem;
-}
-
-${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true'])")} {
-  background: transparent;
-  box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
-}
-
-${scoped(" :where(.bf-navigation-bar)")},
-${scoped(" :where(.bf-navigation-drawer)")},
-${scoped(" :where(.bf-aside)")},
-${scoped(" :where(.bf-panel)")} {
-  background: var(--vf-color-background-default, #ffffff);
-}
-
+    return `/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
+${scoped()} {
+  --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
+  --bf-radius: 0;
+  color-scheme: light;
+}
+
+${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message)")} {
+  font-family: inherit;
+  font-size: var(--bf-body-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--bf-body-line-height);
+}
+
+${scoped(" :where(.bf-input, .bf-button, .bf-button.is-base)")} {
+  font-family: inherit;
+  font-size: var(--bf-body-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--bf-body-line-height);
+}
+
+${scoped(" :where(.bf-application)")} {
+  background: var(--bf-app-demo-page-bg);
+}
+
+${scoped(" :where(.bf-navigation-drawer)")},
+${scoped(" :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer)")},
+${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
+  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.12), 0 0 0.1875rem rgba(0, 0, 0, 0.12);
+}
+
+${scoped(" :where(.bf-panel-header)")} {
+  align-items: start;
+  gap: calc(var(--bf-baseline) * 1.5);
+  padding-block-end: var(--bf-panel-padding-block);
+  padding-block-start: var(--bf-panel-padding-block);
+}
+
+${scoped(" :where(.bf-panel-header.is-navigation-brand)")} {
+  gap: 0;
+  padding-block: 0;
+}
+
+${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
+  padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
+}
+
+${scoped(" :where(.bf-navigation-bar.is-responsive) :where(.bf-panel-header.is-navigation-brand)")} {
+  gap: calc(var(--bf-baseline) * 2);
+  padding-block: 0;
+}
+
+${scoped(" :where(.bf-panel-controls)")} {
+  gap: calc(var(--bf-baseline) * 1.5);
+}
+
+${scoped(" :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title)")} {
+  font-family: inherit;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true'])")} {
+  background: transparent;
+  box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
+}
+
+${scoped(" :where(.bf-navigation-bar)")},
+${scoped(" :where(.bf-navigation-drawer)")},
+${scoped(" :where(.bf-aside)")},
+${scoped(" :where(.bf-panel)")} {
+  background: var(--vf-color-background-default, #ffffff);
+}
+
 `;
 }