@usefragments/ui 1.5.4 → 1.6.0

package/src/measurements/measurements.json

@@ -0,0 +1,361 @@
+{
+  "$schema": "https://usefragments.com/schemas/ui-measurements.v1.json",
+  "schemaVersion": 1,
+  "density": {
+    "compact": {
+      "baseUnit": "6px",
+      "baseFontSize": "14px",
+      "spacingMultipliers": {
+        "px": "1px",
+        "0-5": 0.3,
+        "0-75": 0.43,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12
+      },
+      "controlHeight": {
+        "xs": "32px",
+        "sm": "32px",
+        "md": "32px",
+        "lg": "36px"
+      },
+      "touch": {
+        "sm": "32px",
+        "md": "32px",
+        "lg": "40px"
+      },
+      "sidebarItemHeight": "32px"
+    },
+    "default": {
+      "baseUnit": "7px",
+      "baseFontSize": "14px",
+      "spacingMultipliers": {
+        "px": "1px",
+        "0-5": 0.3,
+        "0-75": 0.43,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12
+      },
+      "controlHeight": {
+        "xs": "32px",
+        "sm": "32px",
+        "md": "40px",
+        "lg": "44px"
+      },
+      "touch": {
+        "sm": "32px",
+        "md": "32px",
+        "lg": "44px"
+      },
+      "sidebarItemHeight": "32px"
+    },
+    "relaxed": {
+      "baseUnit": "8px",
+      "baseFontSize": "14px",
+      "spacingMultipliers": {
+        "px": "1px",
+        "0-5": 0.3,
+        "0-75": 0.43,
+        "1": 1,
+        "2": 2,
+        "3": 3,
+        "4": 4,
+        "5": 5,
+        "6": 6,
+        "8": 8,
+        "10": 10,
+        "12": 12
+      },
+      "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"
+    }
+  },
+  "legacy": {
+    "typography": {
+      "fontSize": {
+        "2xs": "0.714rem",
+        "xs": "0.857rem",
+        "sm": "1rem",
+        "base": "1rem",
+        "md": "1.071rem",
+        "lg": "1.429rem",
+        "xl": "1.714rem",
+        "2xl": "2.143rem",
+        "3xl": "2.571rem",
+        "4xl": "3.429rem"
+      },
+      "fontWeight": {
+        "normal": 400,
+        "medium": 500,
+        "semibold": 600,
+        "bold": 700
+      },
+      "lineHeight": {
+        "tight": 1.25,
+        "normal": 1.5,
+        "relaxed": 1.625,
+        "display": 1.1,
+        "prose": 1.7
+      },
+      "letterSpacing": {
+        "tight": "0",
+        "normal": "normal",
+        "display": "0",
+        "wide": "0.05em"
+      }
+    },
+    "icon": {
+      "xs": "0.857rem",
+      "sm": "1rem",
+      "md": "1.143rem",
+      "lg": "1.429rem",
+      "xl": "1.714rem",
+      "2xl": "2.286rem"
+    },
+    "touch": {
+      "minimum": "2.286rem"
+    },
+    "navigation": {
+      "appShellHeaderHeight": "56px",
+      "sidebarGutter": "8px",
+      "sidebarLeadingBox": "16px",
+      "sidebarDot": "6px",
+      "sidebarRail": "2px",
+      "sidebarLabelOffset": "1px",
+      "sidebarCollapsedWidth": "56px"
+    },
+    "docsDensity": {
+      "compact": {
+        "baseUnit": 6,
+        "baseFontSize": 14,
+        "buttonHeights": [24, 30, 36],
+        "inputHeights": [24, 32, 36],
+        "touchTargets": [24, 28, 38],
+        "sidebarItemHeight": 30
+      },
+      "default": {
+        "baseUnit": 7,
+        "baseFontSize": 14,
+        "buttonHeights": [28, 36, 44],
+        "inputHeights": [28, 40, 44],
+        "touchTargets": [24, 32, 44],
+        "sidebarItemHeight": 35
+      },
+      "relaxed": {
+        "baseUnit": 8,
+        "baseFontSize": 14,
+        "buttonHeights": [32, 40, 48],
+        "inputHeights": [32, 44, 48],
+        "touchTargets": [28, 36, 48],
+        "sidebarItemHeight": 38
+      }
+    }
+  },
+  "compatibility": {
+    "aliases": [
+      {
+        "id": "legacy-control-heights",
+        "patterns": ["--fui-control-height-*", "--fui-button-height-*", "--fui-input-height*"],
+        "finalOwner": "22"
+      },
+      {
+        "id": "legacy-density-spacing",
+        "patterns": ["--fui-space-*"],
+        "finalOwner": "22"
+      },
+      {
+        "id": "legacy-touch-targets",
+        "patterns": ["--fui-touch-*", "--fui-target-size-*"],
+        "finalOwner": "22"
+      },
+      {
+        "id": "legacy-navigation",
+        "patterns": ["--fui-sidebar-*", "--fui-appshell-header-height"],
+        "finalOwner": "22"
+      },
+      {
+        "id": "legacy-type-icon-radius",
+        "patterns": [
+          "--fui-font-*",
+          "--fui-line-height-*",
+          "--fui-letter-spacing-*",
+          "--fui-icon-*",
+          "--fui-radius-*"
+        ],
+        "finalOwner": "22"
+      }
+    ]
+  }
+}

package/src/recipes/_action.scss

@@ -0,0 +1,138 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "typography";
+
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
+}
+
+@function track($role) {
+  @if $role == "micro" {
+    @return var(--fui-control-track-micro, #{measurements.target-value("controlTrack", "micro")});
+  } @else if $role == "sm" or $role == "md" or $role == "lg" {
+    @return var(--fui-control-track-#{$role}, #{measurements.target-value("controlTrack", $role)});
+  }
+
+  @error "Unknown action role '#{$role}'. Expected micro, sm, md, or lg.";
+}
+
+@function icon-size($role) {
+  $icon-role: null;
+
+  @if $role == "micro" {
+    $icon-role: "xs";
+  } @else if $role == "sm" {
+    $icon-role: "sm";
+  } @else if $role == "md" {
+    $icon-role: "md";
+  } @else if $role == "lg" {
+    $icon-role: "lg";
+  } @else {
+    @error "Unknown action role '#{$role}'. Expected micro, sm, md, or lg.";
+  }
+
+  @return var(--fui-icon-#{$icon-role}, #{measurements.target-value("icon", $icon-role)});
+}
+
+@function gap($role) {
+  @if $role == "micro" or $role == "sm" {
+    @return _raw(4);
+  } @else if $role == "md" {
+    @return _raw(6);
+  } @else if $role == "lg" {
+    @return _raw(8);
+  }
+
+  @error "Unknown action role '#{$role}'. Expected micro, sm, md, or lg.";
+}
+
+@function inline-inset($role) {
+  @if $role == "micro" {
+    @return _raw(8);
+  } @else if $role == "sm" {
+    @return _raw(10);
+  } @else if $role == "md" {
+    @return _raw(12);
+  } @else if $role == "lg" {
+    @return _raw(16);
+  }
+
+  @error "Unknown action role '#{$role}'. Expected micro, sm, md, or lg.";
+}
+
+@function icon-side-inset($role) {
+  @if $role == "micro" {
+    @return _raw(6);
+  } @else if $role == "sm" {
+    @return _raw(8);
+  } @else if $role == "md" {
+    @return _raw(10);
+  } @else if $role == "lg" {
+    @return _raw(12);
+  }
+
+  @error "Unknown action role '#{$role}'. Expected micro, sm, md, or lg.";
+}
+
+@mixin base {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_fui-action-gap, #{gap("md")});
+  min-block-size: var(--_fui-action-track, #{track("md")});
+  padding-inline: var(--_fui-action-inline-inset, #{inline-inset("md")});
+  font-size: var(--_fui-action-type-size, #{typography.font-size("ui-standard")});
+  line-height: var(--_fui-action-type-line, #{typography.line-height("ui-standard")});
+  font-weight: var(--_fui-action-type-weight, #{typography.weight("ui-standard")});
+  letter-spacing: var(--_fui-action-type-tracking, #{typography.tracking("ui-standard")});
+  font-family: var(--_fui-action-type-family, #{typography.font-family("ui-standard")});
+}
+
+@mixin typography($role) {
+  @if $role == "micro" or $role == "sm" {
+    --_fui-action-type-size: #{typography.font-size("ui-compact")};
+    --_fui-action-type-line: #{typography.line-height("ui-compact")};
+    --_fui-action-type-weight: #{typography.weight("ui-compact")};
+    --_fui-action-type-tracking: #{typography.tracking("ui-compact")};
+    --_fui-action-type-family: #{typography.font-family("ui-compact")};
+  } @else if $role == "md" or $role == "lg" {
+    --_fui-action-type-size: #{typography.font-size("ui-standard")};
+    --_fui-action-type-line: #{typography.line-height("ui-standard")};
+    --_fui-action-type-weight: #{typography.weight("ui-standard")};
+    --_fui-action-type-tracking: #{typography.tracking("ui-standard")};
+    --_fui-action-type-family: #{typography.font-family("ui-standard")};
+  } @else {
+    @error "Unknown action role '#{$role}'. Expected micro, sm, md, or lg.";
+  }
+}
+
+@mixin size($role) {
+  --_fui-action-track: #{track($role)};
+  --_fui-action-icon-size: #{icon-size($role)};
+  --_fui-action-gap: #{gap($role)};
+  --_fui-action-inline-inset: #{inline-inset($role)};
+
+  @include typography($role);
+}
+
+@mixin icon-only($role) {
+  @include size($role);
+
+  inline-size: var(--_fui-action-track);
+  block-size: var(--_fui-action-track);
+  min-block-size: var(--_fui-action-track);
+  padding-inline: 0;
+}
+
+@mixin glyph($role) {
+  inline-size: icon-size($role);
+  block-size: icon-size($role);
+  flex: 0 0 auto;
+}
+
+@mixin inline {
+  min-block-size: auto;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+}

package/src/recipes/_boolean-range.scss

@@ -0,0 +1,124 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "field";
+@use "typography";
+
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
+}
+
+@function mark-size($size) {
+  @if $size == "sm" or $size == "md" or $size == "lg" {
+    @return var(--fui-icon-#{$size}, #{measurements.target-value("icon", $size)});
+  }
+
+  @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@function label-gap($size) {
+  @if $size == "sm" {
+    @return _raw(6);
+  } @else if $size == "md" {
+    @return _raw(8);
+  } @else if $size == "lg" {
+    @return _raw(10);
+  }
+
+  @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@function card-track($size) {
+  @return field.track($size);
+}
+
+@function switch-inline-size($size) {
+  @if $size == "sm" or $size == "md" or $size == "lg" {
+    @return var(
+      --fui-control-track-#{$size},
+      #{measurements.target-value("controlTrack", $size)}
+    );
+  }
+
+  @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@function switch-block-size($size) {
+  @if $size == "sm" {
+    @return var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+  } @else if $size == "md" {
+    @return calc(#{_raw(16)} + #{_raw(2)});
+  } @else if $size == "lg" {
+    @return calc(#{_raw(20)} + #{_raw(2)});
+  }
+
+  @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@function switch-thumb-size($size) {
+  @if $size == "sm" {
+    @return var(--fui-icon-xs, #{measurements.target-value("icon", "xs")});
+  } @else if $size == "md" {
+    @return var(--fui-icon-sm, #{measurements.target-value("icon", "sm")});
+  } @else if $size == "lg" {
+    @return calc(#{_raw(16)} + #{_raw(2)});
+  }
+
+  @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@mixin row($size) {
+  $type-role: "ui-standard";
+
+  @if $size == "sm" {
+    $type-role: "ui-compact";
+  } @else if $size != "md" and $size != "lg" {
+    @error "Unknown boolean size '#{$size}'. Expected sm, md, or lg.";
+  }
+
+  --_fui-boolean-mark-size: #{mark-size($size)};
+  --_fui-boolean-label-gap: #{label-gap($size)};
+  --_fui-boolean-mark-offset: calc(
+    (#{typography.line-height($type-role)} - #{mark-size($size)}) / 2
+  );
+
+  display: grid;
+  grid-template-columns: var(--_fui-boolean-mark-size) minmax(0, 1fr);
+  column-gap: var(--_fui-boolean-label-gap);
+  align-items: start;
+  @include typography.role($type-role);
+}
+
+@mixin mark($size) {
+  inline-size: mark-size($size);
+  block-size: mark-size($size);
+}
+
+@mixin card($size) {
+  min-block-size: card-track($size);
+  padding-inline: field.inline-inset($size);
+  box-sizing: border-box;
+}
+
+@mixin switch-track($size) {
+  --_fui-switch-inline-size: #{switch-inline-size($size)};
+  --_fui-switch-block-size: #{switch-block-size($size)};
+  --_fui-switch-thumb-size: #{switch-thumb-size($size)};
+  --_fui-switch-inset: var(
+    --fui-stroke-default,
+    #{measurements.target-value("stroke", "default")}
+  );
+  --_fui-switch-travel: calc(
+    var(--_fui-switch-inline-size) - var(--_fui-switch-block-size)
+  );
+
+  inline-size: var(--_fui-switch-inline-size);
+  block-size: var(--_fui-switch-block-size);
+}
+
+@mixin slider-track {
+  block-size: _raw(4);
+}
+
+@mixin slider-thumb {
+  inline-size: var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+  block-size: var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+}