baseline-foundry 0.1.3

package/config/tiers/editorial.json

@@ -0,0 +1,120 @@
+{
+  "baselineUnit": 0.5,
+  "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": 1,
+      "lineHeight": 3,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 400,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h6",
+      "fontSize": 1,
+      "lineHeight": 3,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h5",
+      "fontSize": 1,
+      "lineHeight": 3,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 550,
+      "fontStyle": "normal",
+      "fontVariantCaps": "all-small-caps",
+      "letterSpacing": "0.05em"
+    },
+    {
+      "identifier": "h4",
+      "fontSize": 1.5,
+      "lineHeight": 4,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 300,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h3",
+      "fontSize": 1.5,
+      "lineHeight": 4,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h2",
+      "fontSize": 2.625,
+      "lineHeight": 6,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 200,
+      "fontStyle": "normal"
+    },
+    {
+      "identifier": "h1",
+      "fontSize": 2.625,
+      "lineHeight": 6,
+      "spaceAfter": 2,
+      "fontFamily": "ubuntu-sans",
+      "fontWeight": 500,
+      "fontStyle": "normal"
+    }
+  ],
+  "roles": {
+    "body": "body",
+    "h1": "h1",
+    "h2": "h2",
+    "h3": "h3",
+    "h4": "h4",
+    "h5": "h5",
+    "h6": "h6"
+  },
+  "layout": {
+    "contentMaxWidthRem": 90,
+    "contentPaddingInlineRem": 1,
+    "measureRem": 40,
+    "sectionSpaceBaselineUnits": 8,
+    "sectionSpaceShallowBaselineUnits": 3,
+    "sectionSpaceDeepBaselineUnits": 16,
+    "stripSpaceBaselineUnits": 8,
+    "gridGapInlineBaselineUnits": 2,
+    "gridGapBlockBaselineUnits": 2,
+    "pageMarginBaselineUnits": 2
+  },
+  "components": {
+    "borderWidthPx": 1,
+    "radiusRem": 0,
+    "controlBlockPaddingRem": 0.5,
+    "controlCompactBlockPaddingRem": 0.25,
+    "controlInlinePaddingRem": 1,
+    "controlInlinePaddingActionRem": 1,
+    "controlInlinePaddingFieldRem": 0.5,
+    "controlVisualSizeRem": 1,
+    "fieldGapBaselineUnits": 1,
+    "panelPaddingInlineBaselineUnits": 2,
+    "panelPaddingBlockBaselineUnits": 2,
+    "accordionIndentBaselineUnits": 3
+  }
+}

package/config/tiers/os.json

@@ -0,0 +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",
+      "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
+  }
+}

package/dist/accordion.d.ts

@@ -0,0 +1,5 @@
+export interface AccordionInitOptions {
+    root?: ParentNode;
+}
+export declare function toggleAccordionButton(button: HTMLElement): void;
+export declare function initAccordions(options?: AccordionInitOptions): () => void;

package/dist/accordion.js

@@ -0,0 +1,32 @@
+const TAB_SELECTOR = ".bf-accordion-tab";
+export function toggleAccordionButton(button) {
+    const panelId = button.getAttribute("aria-controls");
+    if (!panelId) {
+        return;
+    }
+    const panel = button.ownerDocument.getElementById(panelId);
+    if (!panel) {
+        return;
+    }
+    const isOpen = button.getAttribute("aria-expanded") === "true";
+    button.setAttribute("aria-expanded", String(!isOpen));
+    panel.setAttribute("aria-hidden", String(isOpen));
+}
+export function initAccordions(options = {}) {
+    const root = options.root ?? document;
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const button = target.closest(TAB_SELECTOR);
+        if (!button) {
+            return;
+        }
+        toggleAccordionButton(button);
+    };
+    root.addEventListener("click", onClick);
+    return () => {
+        root.removeEventListener("click", onClick);
+    };
+}

package/dist/application-layout.d.ts

@@ -0,0 +1,4 @@
+export interface ApplicationLayoutInitOptions {
+    root?: ParentNode;
+}
+export declare function initApplicationLayouts(options?: ApplicationLayoutInitOptions): () => void;

package/dist/application-layout.js

@@ -0,0 +1,181 @@
+const APPLICATION_SELECTOR = ".bf-application";
+const NAVIGATION_SELECTOR = ".bf-navigation";
+const DRAWER_SELECTOR = ".bf-navigation-drawer";
+const OVERLAY_SELECTOR = ".bf-navigation-overlay";
+const TOGGLE_SELECTOR = "[data-application-layout-toggle]";
+const CLOSE_SELECTOR = "[data-application-layout-close]";
+const PIN_SELECTOR = "[data-application-layout-pin]";
+const COLLAPSED_CLASS = "is-collapsed";
+const PINNED_CLASS = "is-pinned";
+const LARGE_BREAKPOINT = "(min-width: 64.75rem)";
+const lastTriggerByNavigation = new WeakMap();
+function queryAllWithinRoot(root, selector) {
+    const elements = Array.from(root.querySelectorAll(selector));
+    if (root instanceof Element && root.matches(selector)) {
+        elements.unshift(root);
+    }
+    return elements;
+}
+function getRootWindow(root) {
+    if (root instanceof Document) {
+        return root.defaultView;
+    }
+    return root.ownerDocument?.defaultView ?? null;
+}
+function getNavigations(root) {
+    return queryAllWithinRoot(root, NAVIGATION_SELECTOR);
+}
+function resolveNavigation(control, root) {
+    const controlsId = control.getAttribute("aria-controls");
+    if (controlsId) {
+        const navigation = root.querySelector(`#${CSS.escape(controlsId)}`);
+        if (navigation?.matches(NAVIGATION_SELECTOR)) {
+            return navigation;
+        }
+    }
+    const application = control.closest(APPLICATION_SELECTOR);
+    return application?.querySelector(NAVIGATION_SELECTOR) ?? null;
+}
+function getAssociatedControls(root, navigation, selector) {
+    return queryAllWithinRoot(root, selector).filter(control => {
+        return resolveNavigation(control, root) === navigation;
+    });
+}
+function getDrawer(navigation) {
+    return navigation.querySelector(DRAWER_SELECTOR);
+}
+function getOverlay(navigation) {
+    return navigation.querySelector(OVERLAY_SELECTOR);
+}
+function isLargeViewport(navigation) {
+    return navigation.ownerDocument.defaultView?.matchMedia(LARGE_BREAKPOINT).matches ?? false;
+}
+function isExpanded(navigation) {
+    return !navigation.classList.contains(COLLAPSED_CLASS);
+}
+function updateA11y(root, navigation) {
+    const expanded = isExpanded(navigation);
+    const largeViewport = isLargeViewport(navigation);
+    for (const toggle of getAssociatedControls(root, navigation, TOGGLE_SELECTOR)) {
+        toggle.setAttribute("aria-expanded", String(expanded));
+    }
+    for (const pinButton of getAssociatedControls(root, navigation, PIN_SELECTOR)) {
+        pinButton.setAttribute("aria-pressed", String(navigation.classList.contains(PINNED_CLASS)));
+    }
+    getDrawer(navigation)?.setAttribute("aria-hidden", String(!expanded && !largeViewport));
+    getOverlay(navigation)?.setAttribute("aria-hidden", String(!expanded || largeViewport));
+}
+function focusNavigation(navigation) {
+    const drawer = getDrawer(navigation);
+    if (!drawer) {
+        return;
+    }
+    const focusTarget = drawer.querySelector("[data-application-layout-close], [data-application-layout-pin], button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
+    if (focusTarget) {
+        queueMicrotask(() => focusTarget.focus());
+    }
+}
+function openNavigation(navigation, root, trigger) {
+    navigation.classList.remove(COLLAPSED_CLASS);
+    updateA11y(root, navigation);
+    if (trigger) {
+        lastTriggerByNavigation.set(navigation, trigger);
+    }
+    if (!isLargeViewport(navigation)) {
+        focusNavigation(navigation);
+    }
+}
+function closeNavigation(navigation, root, restoreFocus) {
+    navigation.classList.add(COLLAPSED_CLASS);
+    updateA11y(root, navigation);
+    if (restoreFocus) {
+        lastTriggerByNavigation.get(navigation)?.focus();
+    }
+}
+function togglePin(navigation, root) {
+    const pinned = navigation.classList.toggle(PINNED_CLASS);
+    if (pinned) {
+        navigation.classList.remove(COLLAPSED_CLASS);
+    }
+    updateA11y(root, navigation);
+}
+function syncInitialState(root) {
+    for (const navigation of getNavigations(root)) {
+        if (navigation.classList.contains(PINNED_CLASS)) {
+            navigation.classList.remove(COLLAPSED_CLASS);
+        }
+        updateA11y(root, navigation);
+    }
+}
+export function initApplicationLayouts(options = {}) {
+    const root = options.root ?? document;
+    const rootWindow = getRootWindow(root);
+    syncInitialState(root);
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const overlay = target.closest(OVERLAY_SELECTOR);
+        if (overlay) {
+            const navigation = overlay.closest(NAVIGATION_SELECTOR);
+            if (navigation && isExpanded(navigation)) {
+                event.preventDefault();
+                closeNavigation(navigation, root, true);
+            }
+            return;
+        }
+        const pinButton = target.closest(PIN_SELECTOR);
+        if (pinButton) {
+            const navigation = resolveNavigation(pinButton, root);
+            if (navigation) {
+                event.preventDefault();
+                togglePin(navigation, root);
+            }
+            return;
+        }
+        const closeButton = target.closest(CLOSE_SELECTOR);
+        if (closeButton) {
+            const navigation = resolveNavigation(closeButton, root);
+            if (navigation) {
+                event.preventDefault();
+                closeNavigation(navigation, root, true);
+            }
+            return;
+        }
+        const toggle = target.closest(TOGGLE_SELECTOR);
+        if (toggle) {
+            const navigation = resolveNavigation(toggle, root);
+            if (navigation) {
+                event.preventDefault();
+                if (isExpanded(navigation)) {
+                    closeNavigation(navigation, root, false);
+                }
+                else {
+                    openNavigation(navigation, root, toggle);
+                }
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        if (!(event instanceof KeyboardEvent) || event.key !== "Escape") {
+            return;
+        }
+        for (const navigation of getNavigations(root)) {
+            if (!isLargeViewport(navigation) && isExpanded(navigation)) {
+                closeNavigation(navigation, root, true);
+            }
+        }
+    };
+    const onResize = () => {
+        syncInitialState(root);
+    };
+    root.addEventListener("click", onClick);
+    root.addEventListener("keydown", onKeyDown);
+    rootWindow?.addEventListener("resize", onResize);
+    return () => {
+        root.removeEventListener("click", onClick);
+        root.removeEventListener("keydown", onKeyDown);
+        rootWindow?.removeEventListener("resize", onResize);
+    };
+}

package/dist/baseline-grid-overlay.d.ts

@@ -0,0 +1,5 @@
+export interface BaselineGridOverlayOptions {
+    baselineUnit: string;
+}
+export declare function generateBaselineGridOverlayCss(options: BaselineGridOverlayOptions): string;
+export declare function generateBaselineGridThemeOverrideCss(): string;

package/dist/baseline-grid-overlay.js

@@ -0,0 +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;
+}`;
+}
+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};
+}`;
+}

package/dist/baseline-grid-theme.d.ts

@@ -0,0 +1,3 @@
+export declare const BASELINE_GRID_DEFAULT_COLOR = "rgba(15, 23, 42, 0.06)";
+export declare const BASELINE_GRID_LIGHT_THEME_COLOR = "rgba(20, 22, 28, 0.06)";
+export declare const BASELINE_GRID_DARK_THEME_COLOR = "rgba(255, 255, 255, 0.06)";

package/dist/baseline-grid-theme.js

@@ -0,0 +1,3 @@
+export const BASELINE_GRID_DEFAULT_COLOR = "rgba(15, 23, 42, 0.06)";
+export const BASELINE_GRID_LIGHT_THEME_COLOR = "rgba(20, 22, 28, 0.06)";
+export const BASELINE_GRID_DARK_THEME_COLOR = "rgba(255, 255, 255, 0.06)";

package/dist/baseline-grid.d.ts

@@ -0,0 +1,7 @@
+export interface BaselineGridInitOptions {
+    defaultEnabled?: boolean;
+    toggleSelector?: string;
+    targetClassName?: string;
+}
+export declare function setupBaselineGridToggle(toggle: HTMLInputElement, options?: BaselineGridInitOptions): void;
+export declare function initBaselineGridToggles(options?: BaselineGridInitOptions): void;

package/dist/baseline-grid.js

@@ -0,0 +1,35 @@
+function getTargetElement(toggle) {
+    const targetId = toggle.getAttribute("aria-controls");
+    if (!targetId) {
+        return null;
+    }
+    return document.getElementById(targetId);
+}
+export function setupBaselineGridToggle(toggle, options = {}) {
+    const target = getTargetElement(toggle);
+    if (!target) {
+        return;
+    }
+    const targetClassName = options.targetClassName ?? "u-baseline-grid";
+    const defaultEnabled = options.defaultEnabled ?? false;
+    const isEnabled = target.classList.contains(targetClassName) || (defaultEnabled && toggle.dataset.baselineDefault !== "off");
+    target.classList.toggle(targetClassName, isEnabled);
+    toggle.checked = isEnabled;
+    toggle.addEventListener("change", () => {
+        target.classList.toggle(targetClassName, toggle.checked);
+    });
+}
+export function initBaselineGridToggles(options = {}) {
+    const toggleSelector = options.toggleSelector ?? ".js-baseline-toggle[aria-controls]";
+    const toggles = document.querySelectorAll(toggleSelector);
+    if (toggles.length > 0) {
+        toggles.forEach(toggle => {
+            setupBaselineGridToggle(toggle, options);
+        });
+    }
+    else if (options.defaultEnabled) {
+        // No toggle found; apply grid directly to body when default-on.
+        const targetClassName = options.targetClassName ?? "u-baseline-grid";
+        document.body.classList.add(targetClassName);
+    }
+}

package/dist/build.d.ts

@@ -0,0 +1,21 @@
+import type { PresetName, TierName } from "./presets.js";
+import type { BuildThemeResult, DeriveBaselineTokensResult, ThemeConfig } from "./types.js";
+export interface AdditionalThemeSurfaceBuildConfig {
+    name: string;
+    configPath: string;
+    className?: string;
+    label?: string;
+}
+export interface BuildThemeFromConfigOptions {
+    distDir?: string;
+    baselineDir?: string;
+    surfaceLabel?: string;
+    additionalSurfaces?: AdditionalThemeSurfaceBuildConfig[];
+}
+export declare function readThemeConfig(configPath: string): Promise<ThemeConfig>;
+export declare function buildThemeFromConfig(configPath?: string, options?: BuildThemeFromConfigOptions): Promise<BuildThemeResult>;
+export declare function buildThemeFromTier(tier: TierName): Promise<BuildThemeResult>;
+export declare function buildThemeFromPreset(preset: PresetName): Promise<BuildThemeResult>;
+export declare function deriveBaselineTokensFromConfig(configPath?: string, options?: {
+    baselineDir?: string;
+}): Promise<DeriveBaselineTokensResult>;