@usefragments/ui 1.5.3 → 1.6.0

package/src/measurements/MeasurementTargets.module.scss

@@ -0,0 +1,229 @@
+@use "../recipes/typography";
+@use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
+
+.lineup {
+  display: grid;
+  gap: var(--fui-raw-space-24, #{measurements.raw-space("24")});
+  min-inline-size: 0;
+  padding: var(--fui-raw-space-24, #{measurements.raw-space("24")});
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  background: var(--fui-bg-primary, #{tokens.$fui-bg-primary});
+}
+
+.header,
+.section,
+.specimenList,
+.specimenRow,
+.typographySpecimen {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.header {
+  gap: var(--fui-raw-space-8, #{measurements.raw-space("8")});
+}
+
+.eyebrow,
+.specimenName {
+  @include typography.role("ui-compact");
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--fui-text-tertiary, #{tokens.$fui-text-tertiary});
+  text-transform: uppercase;
+}
+
+.title {
+  @include typography.role("title-lg");
+
+  margin: 0;
+}
+
+.description {
+  @include typography.role("body-compact");
+
+  margin: 0;
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+}
+
+.context {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fui-raw-space-8, #{measurements.raw-space("8")});
+}
+
+.contextValue,
+.specimenValue {
+  @include typography.role("code");
+}
+
+.contextValue {
+  padding: var(--fui-raw-space-4, #{measurements.raw-space("4")})
+    var(--fui-raw-space-8, #{measurements.raw-space("8")});
+  border-radius: var(--fui-radius-sm, #{tokens.$fui-radius-sm});
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+  background: var(--fui-bg-tertiary, #{tokens.$fui-bg-tertiary});
+}
+
+.section {
+  gap: var(--fui-raw-space-16, #{measurements.raw-space("16")});
+  padding: var(--fui-raw-space-16, #{measurements.raw-space("16")});
+  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  background: var(--fui-bg-secondary, #{tokens.$fui-bg-secondary});
+  box-shadow: var(--fui-shadow-sm, #{tokens.$fui-shadow-sm});
+}
+
+.sectionTitle {
+  @include typography.role("title-sm");
+
+  margin: 0;
+}
+
+.specimenList {
+  gap: var(--fui-raw-space-12, #{measurements.raw-space("12")});
+}
+
+.specimenRow {
+  gap: var(--fui-raw-space-8, #{measurements.raw-space("8")});
+}
+
+.specimenMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--fui-raw-space-12, #{measurements.raw-space("12")});
+}
+
+.specimenName,
+.specimenValue {
+  margin: 0;
+}
+
+.specimenName {
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+}
+
+.specimenValue {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  color: var(--fui-text-tertiary, #{tokens.$fui-text-tertiary});
+}
+
+.controlTrack,
+.fieldTrack {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.controlTrack {
+  @include typography.role("ui-compact");
+
+  inline-size: fit-content;
+  justify-content: center;
+  padding-inline: var(--fui-raw-space-12, #{measurements.raw-space("12")});
+  border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
+  color: var(--fui-color-on-accent, #{tokens.$fui-color-on-accent});
+  background: var(--fui-color-accent, #{tokens.$fui-color-accent});
+}
+
+.controlTrackMicro {
+  block-size: var(--fui-control-track-micro, #{measurements.target-value("controlTrack", "micro")});
+}
+
+.controlTrackSm {
+  block-size: var(--fui-control-track-sm, #{measurements.target-value("controlTrack", "sm")});
+}
+
+.controlTrackMd {
+  block-size: var(--fui-control-track-md, #{measurements.target-value("controlTrack", "md")});
+}
+
+.controlTrackLg {
+  block-size: var(--fui-control-track-lg, #{measurements.target-value("controlTrack", "lg")});
+}
+
+.fieldTrack {
+  @include typography.role("ui-standard");
+
+  inline-size: 100%;
+  border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+  background: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
+}
+
+.fieldTrackSm {
+  block-size: var(--fui-field-track-sm, #{measurements.target-value("fieldTrack", "sm")});
+  padding-inline: var(
+    --fui-field-inline-inset-sm,
+    #{measurements.target-value("fieldInlineInset", "sm")}
+  );
+}
+
+.fieldTrackMd {
+  block-size: var(--fui-field-track-md, #{measurements.target-value("fieldTrack", "md")});
+  padding-inline: var(
+    --fui-field-inline-inset-md,
+    #{measurements.target-value("fieldInlineInset", "md")}
+  );
+}
+
+.fieldTrackLg {
+  block-size: var(--fui-field-track-lg, #{measurements.target-value("fieldTrack", "lg")});
+  padding-inline: var(
+    --fui-field-inline-inset-lg,
+    #{measurements.target-value("fieldInlineInset", "lg")}
+  );
+}
+
+.typographySpecimen {
+  gap: var(--fui-raw-space-4, #{measurements.raw-space("4")});
+  padding-block: var(--fui-raw-space-4, #{measurements.raw-space("4")});
+}
+
+.typographySample {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.caption {
+  @include typography.role("caption");
+}
+
+.uiCompact {
+  @include typography.role("ui-compact");
+}
+
+.uiStandard {
+  @include typography.role("ui-standard");
+}
+
+.bodyCompact {
+  @include typography.role("body-compact");
+}
+
+.bodyRelaxed {
+  @include typography.role("body-relaxed");
+}
+
+.titleSm {
+  @include typography.role("title-sm");
+}
+
+.titleMd {
+  @include typography.role("title-md");
+}
+
+.titleLg {
+  @include typography.role("title-lg");
+}
+
+.code {
+  @include typography.role("code");
+}

package/src/measurements/generated.ts

@@ -0,0 +1,317 @@
+// This file is generated by scripts/generate-measurements.mjs. Do not edit.
+// Source SHA-256: 1e8a256c12eaf2f8f4a2a5c4ed25477bf303b56dc2184ac3e29dec71207853bd
+
+export const MEASUREMENT_PROFILES = {
+  density: {
+    compact: {
+      baseUnit: "6px",
+      baseFontSize: "14px",
+      spacingMultipliers: {
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12,
+        px: "1px",
+        "0-5": 0.3,
+        "0-75": 0.43,
+      },
+      controlHeight: {
+        xs: "32px",
+        sm: "32px",
+        md: "32px",
+        lg: "36px",
+      },
+      touch: {
+        sm: "32px",
+        md: "32px",
+        lg: "40px",
+      },
+      sidebarItemHeight: "32px",
+    },
+    default: {
+      baseUnit: "7px",
+      baseFontSize: "14px",
+      spacingMultipliers: {
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12,
+        px: "1px",
+        "0-5": 0.3,
+        "0-75": 0.43,
+      },
+      controlHeight: {
+        xs: "32px",
+        sm: "32px",
+        md: "40px",
+        lg: "44px",
+      },
+      touch: {
+        sm: "32px",
+        md: "32px",
+        lg: "44px",
+      },
+      sidebarItemHeight: "32px",
+    },
+    relaxed: {
+      baseUnit: "8px",
+      baseFontSize: "14px",
+      spacingMultipliers: {
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12,
+        px: "1px",
+        "0-5": 0.3,
+        "0-75": 0.43,
+      },
+      controlHeight: {
+        xs: "32px",
+        sm: "32px",
+        md: "44px",
+        lg: "48px",
+      },
+      touch: {
+        sm: "32px",
+        md: "40px",
+        lg: "48px",
+      },
+      sidebarItemHeight: "36px",
+    },
+  },
+  radius: {
+    sharp: {
+      sm: "0",
+      md: "0",
+      lg: "0",
+      xl: "0",
+    },
+    subtle: {
+      sm: "0.125rem",
+      md: "0.25rem",
+      lg: "0.375rem",
+      xl: "0.5rem",
+    },
+    default: {
+      sm: "0.25rem",
+      md: "0.429rem",
+      lg: "0.571rem",
+      xl: "0.857rem",
+    },
+    rounded: {
+      sm: "0.375rem",
+      md: "0.5rem",
+      lg: "0.75rem",
+      xl: "1rem",
+    },
+    pill: {
+      sm: "0.5rem",
+      md: "0.75rem",
+      lg: "1rem",
+      xl: "1.5rem",
+    },
+  },
+  rawSpace: {
+    "0": "0",
+    "2": "2px",
+    "4": "4px",
+    "6": "6px",
+    "8": "8px",
+    "10": "10px",
+    "12": "12px",
+    "16": "16px",
+    "20": "20px",
+    "24": "24px",
+    "32": "32px",
+    "40": "40px",
+    "48": "48px",
+    "64": "64px",
+  },
+  targets: {
+    controlTrack: {
+      micro: "24px",
+      sm: "28px",
+      md: "32px",
+      lg: "40px",
+    },
+    fieldTrack: {
+      sm: "28px",
+      md: "32px",
+      lg: "40px",
+    },
+    fieldInlineInset: {
+      sm: "10px",
+      md: "12px",
+      lg: "16px",
+    },
+    surfaceInset: {
+      panel: "0",
+      compact: "12px",
+      default: "16px",
+      roomy: "24px",
+    },
+    icon: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "20px",
+      xl: "24px",
+      "2xl": "32px",
+    },
+    stroke: {
+      hairline: "1px",
+      default: "2px",
+      strong: "3px",
+    },
+    layoutMeasure: {
+      "field-minimum": "140px",
+      "inline-floor": "56px",
+      "compact-content": "168px",
+      "grid-cell": "224px",
+      "composer-item": "210px",
+      "page-narrow": "800px",
+    },
+  },
+  typography: {
+    caption: {
+      size: "12px",
+      line: "16px",
+      weight: 400,
+      tracking: "0",
+    },
+    "ui-compact": {
+      size: "12px",
+      line: "16px",
+      weight: 500,
+      tracking: "-0.01em",
+    },
+    "ui-standard": {
+      size: "14px",
+      line: "20px",
+      weight: 500,
+      tracking: "-0.01em",
+    },
+    "body-compact": {
+      size: "14px",
+      line: "20px",
+      weight: 400,
+      tracking: "0",
+    },
+    "body-relaxed": {
+      size: "16px",
+      line: "24px",
+      weight: 400,
+      tracking: "0",
+    },
+    "title-sm": {
+      size: "16px",
+      line: "24px",
+      weight: 600,
+      tracking: "-0.01em",
+    },
+    "title-md": {
+      size: "20px",
+      line: "28px",
+      weight: 600,
+      tracking: "-0.02em",
+    },
+    "title-lg": {
+      size: "24px",
+      line: "32px",
+      weight: 600,
+      tracking: "-0.02em",
+    },
+    code: {
+      size: "14px",
+      line: "20px",
+      weight: 400,
+      tracking: "0",
+    },
+  },
+  navigation: {
+    appShellHeaderHeight: "56px",
+    sidebarGutter: "8px",
+    sidebarLeadingBox: "16px",
+    sidebarDot: "6px",
+    sidebarRail: "2px",
+    sidebarLabelOffset: "1px",
+    sidebarCollapsedWidth: "56px",
+  },
+} as const;
+
+export type MeasurementDensity = keyof typeof MEASUREMENT_PROFILES.density;
+export type MeasurementRadiusStyle = keyof typeof MEASUREMENT_PROFILES.radius;
+
+export type MeasurementSelection = Readonly<{
+  density?: MeasurementDensity;
+  radiusStyle?: MeasurementRadiusStyle;
+}>;
+
+export function measurementPx(value: string, path = "measurement"): number {
+  const match = /^([0-9]+(?:\.[0-9]+)?)px$/.exec(value);
+  const pixels = match === null ? Number.NaN : Number(match[1]);
+  if (!Number.isFinite(pixels)) {
+    throw new TypeError(
+      path + " must be a finite non-negative px length; received " + JSON.stringify(value)
+    );
+  }
+  return pixels;
+}
+
+type MeasurementAttribute = "data-fui-density" | "data-fui-radius-style";
+
+function setRestorableAttribute(
+  element: HTMLElement,
+  attribute: MeasurementAttribute,
+  value: string
+): () => void {
+  const hadAttribute = element.hasAttribute(attribute);
+  const previousValue = element.getAttribute(attribute);
+  element.setAttribute(attribute, value);
+
+  return () => {
+    if (hadAttribute) {
+      element.setAttribute(attribute, previousValue ?? "");
+    } else {
+      element.removeAttribute(attribute);
+    }
+  };
+}
+
+export function applyMeasurementSelection(
+  element: HTMLElement,
+  selection: MeasurementSelection
+): () => void {
+  const restore: Array<() => void> = [];
+
+  if (selection.density !== undefined) {
+    restore.push(setRestorableAttribute(element, "data-fui-density", selection.density));
+  }
+  if (selection.radiusStyle !== undefined) {
+    restore.push(setRestorableAttribute(element, "data-fui-radius-style", selection.radiusStyle));
+  }
+
+  let cleaned = false;
+  return () => {
+    if (cleaned) return;
+    cleaned = true;
+    for (let index = restore.length - 1; index >= 0; index -= 1) {
+      restore[index]();
+    }
+  };
+}

package/src/measurements/index.ts

@@ -0,0 +1,8 @@
+export {
+  MEASUREMENT_PROFILES,
+  applyMeasurementSelection,
+  measurementPx,
+  type MeasurementDensity,
+  type MeasurementRadiusStyle,
+  type MeasurementSelection,
+} from "./generated";