@usefragments/ui 1.5.3 → 1.6.0

package/src/recipes/_feedback.scss

@@ -0,0 +1,171 @@
+@use "action" as action;
+@use "surface" as surface;
+@use "target" as target;
+@use "typography" as typography;
+
+@function _raw($step, $fallback) {
+  @return var(--fui-raw-space-#{$step}, $fallback);
+}
+
+@mixin icon {
+  inline-size: var(--fui-icon-lg, 20px);
+  block-size: var(--fui-icon-lg, 20px);
+  flex: 0 0 auto;
+}
+
+@mixin title {
+  @include typography.role("ui-standard");
+}
+
+@mixin body {
+  @include typography.role("body-compact");
+}
+
+@mixin contextual {
+  @include surface.apply-inset("default");
+  @include body;
+
+  display: flex;
+  align-items: center;
+  gap: var(--fui-feedback-content-gap, #{_raw(12, 12px)});
+}
+
+@mixin transient {
+  @include surface.apply-inset("compact");
+  @include body;
+
+  display: flex;
+  align-items: center;
+  gap: var(--fui-feedback-transient-gap, #{_raw(8, 8px)});
+}
+
+@mixin disclosure-row {
+  @include typography.role("ui-standard");
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: _raw(8, 8px);
+  min-block-size: action.track("md");
+  padding-block: 0;
+  padding-inline: _raw(8, 8px);
+}
+
+@mixin disclosure-glyph {
+  inline-size: var(--fui-icon-md, 16px);
+  block-size: var(--fui-icon-md, 16px);
+  flex: 0 0 auto;
+}
+
+@mixin disclosure-panel {
+  @include body;
+
+  padding-block-end: _raw(12, 12px);
+  padding-inline: _raw(8, 8px);
+}
+
+@mixin close {
+  @include action.base;
+  @include action.icon-only("micro");
+  @include target.hit-area("compact");
+}
+
+@mixin compact-action {
+  @include action.base;
+  @include action.size("sm");
+  @include target.hit-area("compact");
+}
+
+@mixin empty-state($size) {
+  @if $size == "sm" {
+    --_fui-feedback-empty-icon-size: var(--fui-icon-xl, 24px);
+    --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-sm, 240px);
+    --_fui-feedback-empty-title-size: #{typography.font-size("ui-standard")};
+    --_fui-feedback-empty-title-line: #{typography.line-height("ui-standard")};
+    --_fui-feedback-empty-title-weight: #{typography.weight("ui-standard")};
+    --_fui-feedback-empty-title-tracking: #{typography.tracking("ui-standard")};
+    --_fui-feedback-empty-copy-size: #{typography.font-size("caption")};
+    --_fui-feedback-empty-copy-line: #{typography.line-height("caption")};
+    --_fui-feedback-empty-copy-weight: #{typography.weight("caption")};
+    --_fui-feedback-empty-copy-tracking: #{typography.tracking("caption")};
+
+    padding-block: _raw(24, 24px);
+    padding-inline: _raw(16, 16px);
+  } @else if $size == "md" {
+    --_fui-feedback-empty-icon-size: var(--fui-icon-2xl, 32px);
+    --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-md, 320px);
+    --_fui-feedback-empty-title-size: #{typography.font-size("ui-standard")};
+    --_fui-feedback-empty-title-line: #{typography.line-height("ui-standard")};
+    --_fui-feedback-empty-title-weight: #{typography.weight("ui-standard")};
+    --_fui-feedback-empty-title-tracking: #{typography.tracking("ui-standard")};
+    --_fui-feedback-empty-copy-size: #{typography.font-size("body-compact")};
+    --_fui-feedback-empty-copy-line: #{typography.line-height("body-compact")};
+    --_fui-feedback-empty-copy-weight: #{typography.weight("body-compact")};
+    --_fui-feedback-empty-copy-tracking: #{typography.tracking("body-compact")};
+
+    padding-block: _raw(32, 32px);
+    padding-inline: _raw(24, 24px);
+  } @else if $size == "lg" {
+    --_fui-feedback-empty-icon-size: var(--fui-feedback-empty-icon-lg, 40px);
+    --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-lg, 400px);
+    --_fui-feedback-empty-title-size: #{typography.font-size("title-md")};
+    --_fui-feedback-empty-title-line: #{typography.line-height("title-md")};
+    --_fui-feedback-empty-title-weight: #{typography.weight("title-md")};
+    --_fui-feedback-empty-title-tracking: #{typography.tracking("title-md")};
+    --_fui-feedback-empty-copy-size: #{typography.font-size("body-compact")};
+    --_fui-feedback-empty-copy-line: #{typography.line-height("body-compact")};
+    --_fui-feedback-empty-copy-weight: #{typography.weight("body-compact")};
+    --_fui-feedback-empty-copy-tracking: #{typography.tracking("body-compact")};
+
+    padding-block: _raw(48, 48px);
+    padding-inline: _raw(32, 32px);
+  } @else {
+    @error "Unknown empty-state size '#{$size}'. Expected sm, md, or lg.";
+  }
+}
+
+@mixin viewport-stack($position) {
+  $top: var(
+    --fui-feedback-viewport-inset-top,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-top))
+  );
+  $bottom: var(
+    --fui-feedback-viewport-inset-bottom,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-bottom))
+  );
+  $left: var(
+    --fui-feedback-viewport-inset-left,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+  );
+  $right: var(
+    --fui-feedback-viewport-inset-right,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+  );
+
+  @if $position == "top-left" {
+    top: $top;
+    left: $left;
+  } @else if $position == "top-center" {
+    top: $top;
+    left: 50%;
+    transform: translateX(-50%);
+  } @else if $position == "top-right" {
+    top: $top;
+    right: $right;
+  } @else if $position == "bottom-left" {
+    bottom: $bottom;
+    left: $left;
+    flex-direction: column-reverse;
+  } @else if $position == "bottom-center" {
+    bottom: $bottom;
+    left: 50%;
+    flex-direction: column-reverse;
+    transform: translateX(-50%);
+  } @else if $position == "bottom-right" {
+    right: $right;
+    bottom: $bottom;
+    flex-direction: column-reverse;
+  } @else {
+    @error "Unknown feedback viewport position '#{$position}'.";
+  }
+}

package/src/recipes/_field.scss

@@ -0,0 +1,98 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
+@use "typography";
+
+@function track($size) {
+  @if $size == "sm" or $size == "md" or $size == "lg" {
+    @return var(--fui-field-track-#{$size}, #{measurements.target-value("fieldTrack", $size)});
+  }
+
+  @error "Unknown field size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@function inline-inset($size) {
+  @if $size == "sm" or $size == "md" or $size == "lg" {
+    @return var(
+      --fui-field-inline-inset-#{$size},
+      #{measurements.target-value("fieldInlineInset", $size)}
+    );
+  }
+
+  @error "Unknown field size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@function stroke() {
+  @return var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")});
+}
+
+@mixin size($size) {
+  --_fui-field-track: #{track($size)};
+  --_fui-field-inline-inset: #{inline-inset($size)};
+  --_fui-field-stroke: #{stroke()};
+
+  @if $size == "sm" {
+    @include typography.role("ui-compact");
+  } @else if $size == "md" or $size == "lg" {
+    @include typography.role("body-compact");
+  } @else {
+    @error "Unknown field size '#{$size}'. Expected sm, md, or lg.";
+  }
+}
+
+@mixin wrapper {
+  --fui-field-label-gap: var(--fui-raw-space-6, #{measurements.raw-space(6)});
+  --fui-field-message-gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@mixin label {
+  @include typography.role("ui-standard");
+
+  margin-block-end: var(--fui-field-label-gap);
+}
+
+@mixin helper {
+  @include typography.role("caption");
+
+  margin-block-start: var(--fui-field-message-gap);
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+}
+
+@mixin error {
+  @include typography.role("caption");
+
+  margin-block-start: var(--fui-field-message-gap);
+  color: var(--fui-color-danger-text, #{tokens.$fui-color-danger-text});
+}
+
+@mixin shell {
+  box-sizing: border-box;
+  min-block-size: var(--_fui-field-track);
+  padding-inline: var(--_fui-field-inline-inset);
+  border: var(--_fui-field-stroke) solid var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
+  background: var(--fui-bg-primary, #{tokens.$fui-bg-primary});
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+}
+
+@mixin focus-state {
+  border-color: var(--fui-color-accent, #{tokens.$fui-color-accent});
+  outline: var(--fui-focus-ring-width, #{tokens.$fui-focus-ring-width}) solid
+    color-mix(in srgb, var(--fui-focus-ring-color, #{tokens.$fui-focus-ring-color}) 34%, transparent);
+  outline-offset: var(--fui-focus-ring-offset, #{tokens.$fui-focus-ring-offset});
+}
+
+@mixin invalid-state {
+  border-color: var(--fui-color-danger, #{tokens.$fui-color-danger});
+}
+
+@mixin disabled-state {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@mixin readonly-state {
+  background: var(--fui-bg-secondary, #{tokens.$fui-bg-secondary});
+}

package/src/recipes/_layout.scss

@@ -0,0 +1,67 @@
+@use "../tokens/measurements.generated" as measurements;
+
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
+}
+
+@function gap($name) {
+  @if $name == "none" {
+    @return _raw(0);
+  } @else if $name == "xs" {
+    @return _raw(4);
+  } @else if $name == "sm" {
+    @return _raw(8);
+  } @else if $name == "md" {
+    @return _raw(12);
+  } @else if $name == "lg" {
+    @return _raw(16);
+  } @else if $name == "xl" {
+    @return _raw(24);
+  }
+
+  @error "Unknown layout gap '#{$name}'. Expected none, xs, sm, md, lg, or xl.";
+}
+
+@function numeric-gap($step) {
+  @if $step == 1 {
+    @return _raw(4);
+  } @else if $step == 2 {
+    @return _raw(8);
+  } @else if $step == 3 {
+    @return _raw(12);
+  } @else if $step == 4 {
+    @return _raw(16);
+  } @else if $step == 5 {
+    @return _raw(20);
+  } @else if $step == 6 {
+    @return _raw(24);
+  } @else if $step == 7 {
+    @return _raw(32);
+  } @else if $step == 8 {
+    @return _raw(40);
+  }
+
+  @error "Unknown numeric layout gap '#{$step}'. Expected an integer from 1 through 8.";
+}
+
+@function page-gutter() {
+  @return _raw(24);
+}
+
+@function measure($role) {
+  @if
+    $role == "field-minimum" or
+    $role == "inline-floor" or
+    $role == "compact-content" or
+    $role == "grid-cell" or
+    $role == "composer-item" or
+    $role == "page-narrow"
+  {
+    @return var(
+      --fui-layout-measure-#{$role},
+      #{measurements.target-value("layoutMeasure", $role)}
+    );
+  }
+
+  @error "Unknown layout measure '#{$role}'.";
+}

package/src/recipes/_navigation.scss

@@ -0,0 +1,110 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "typography";
+
+@function _navigation($role) {
+  @if $role == "appShellHeaderHeight" {
+    @return var(--fui-navigation-app-shell-header-height, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarGutter" {
+    @return var(--fui-navigation-sidebar-gutter, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarLeadingBox" {
+    @return var(--fui-navigation-sidebar-leading-box, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarDot" {
+    @return var(--fui-navigation-sidebar-dot, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarRail" {
+    @return var(--fui-navigation-sidebar-rail, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarLabelOffset" {
+    @return var(--fui-navigation-sidebar-label-offset, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarCollapsedWidth" {
+    @return var(--fui-navigation-sidebar-collapsed-width, #{measurements.navigation-value($role)});
+  }
+
+  @error "Unknown navigation measurement '#{$role}'.";
+}
+
+@mixin properties {
+  --fui-navigation-row-track: var(
+    --fui-control-track-md,
+    #{measurements.target-value("controlTrack", "md")}
+  );
+  --fui-navigation-section-track: var(
+    --fui-control-track-micro,
+    #{measurements.target-value("controlTrack", "micro")}
+  );
+  --fui-navigation-gutter: #{_navigation("sidebarGutter")};
+  --fui-navigation-inline-inset: #{_navigation("sidebarGutter")};
+  --fui-navigation-content-gap: #{_navigation("sidebarGutter")};
+  --fui-navigation-leading-box: #{_navigation("sidebarLeadingBox")};
+  --fui-navigation-active-rail: #{_navigation("sidebarRail")};
+  --fui-navigation-active-dot: #{_navigation("sidebarDot")};
+  --fui-navigation-label-optical-y: #{_navigation("sidebarLabelOffset")};
+}
+
+@mixin row {
+  @include properties;
+  @include typography.role("ui-compact");
+
+  box-sizing: border-box;
+  min-block-size: var(--fui-navigation-row-track);
+  padding-inline: var(--fui-navigation-inline-inset);
+  gap: var(--fui-navigation-content-gap);
+}
+
+@mixin section-row {
+  @include properties;
+  @include typography.role("caption");
+
+  box-sizing: border-box;
+  min-block-size: var(--fui-navigation-section-track);
+  padding-inline: var(--fui-navigation-inline-inset);
+  gap: var(--fui-navigation-content-gap);
+}
+
+@mixin leading {
+  @include properties;
+
+  inline-size: var(--fui-navigation-leading-box);
+  block-size: var(--fui-navigation-leading-box);
+  flex: 0 0 var(--fui-navigation-leading-box);
+
+  > svg,
+  > img {
+    inline-size: var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+    block-size: var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+  }
+}
+
+@mixin active-indicator($placement) {
+  @include properties;
+
+  position: relative;
+
+  @if $placement == "start" {
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+      inset-inline-start: calc(-1 * var(--fui-navigation-gutter));
+      inline-size: var(--fui-navigation-active-rail);
+    }
+  } @else if $placement == "end" {
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-end: var(--fui-navigation-inline-inset);
+      inline-size: var(--fui-navigation-active-dot);
+      block-size: var(--fui-navigation-active-dot);
+      border-radius: 999px;
+      transform: translateY(-50%);
+    }
+  } @else {
+    @error "Unknown navigation indicator placement '#{$placement}'. Expected start or end.";
+  }
+}
+
+@mixin collapsed-shell {
+  @include properties;
+
+  inline-size: #{_navigation("sidebarCollapsedWidth")};
+  justify-items: center;
+}

package/src/recipes/_overlay.scss

@@ -0,0 +1,191 @@
+@use "../tokens/variables" as tokens;
+@use "action" as action;
+@use "feedback" as feedback;
+@use "surface" as surface;
+@use "target" as target;
+@use "typography" as typography;
+
+@function _raw($step, $fallback) {
+  @return var(--fui-raw-space-#{$step}, $fallback);
+}
+
+@function dialog-max($size) {
+  @if $size == "sm" {
+    @return var(--fui-overlay-dialog-max-inline-sm, 384px);
+  } @else if $size == "md" {
+    @return var(--fui-overlay-dialog-max-inline-md, 448px);
+  } @else if $size == "lg" {
+    @return var(--fui-overlay-dialog-max-inline-lg, 576px);
+  } @else if $size == "xl" {
+    @return var(--fui-overlay-dialog-max-inline-xl, 768px);
+  }
+
+  @error "Unknown dialog overlay size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@function drawer-inline($size) {
+  @if $size == "sm" {
+    @return var(--fui-overlay-drawer-inline-sm, 320px);
+  } @else if $size == "md" {
+    @return var(--fui-overlay-drawer-inline-md, 384px);
+  } @else if $size == "lg" {
+    @return var(--fui-overlay-drawer-inline-lg, 512px);
+  } @else if $size == "xl" {
+    @return var(--fui-overlay-drawer-inline-xl, 768px);
+  }
+
+  @error "Unknown side-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@function drawer-block($size) {
+  @if $size == "sm" {
+    @return var(--fui-overlay-drawer-block-sm, 25dvh);
+  } @else if $size == "md" {
+    @return var(--fui-overlay-drawer-block-md, 40dvh);
+  } @else if $size == "lg" {
+    @return var(--fui-overlay-drawer-block-lg, 60dvh);
+  } @else if $size == "xl" {
+    @return var(--fui-overlay-drawer-block-xl, 80dvh);
+  }
+
+  @error "Unknown block-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@mixin safe-viewport {
+  --_fui-overlay-safe-top: var(
+    --fui-feedback-viewport-inset-top,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-top))
+  );
+  --_fui-overlay-safe-bottom: var(
+    --fui-feedback-viewport-inset-bottom,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-bottom))
+  );
+  --_fui-overlay-safe-left: var(
+    --fui-feedback-viewport-inset-left,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+  );
+  --_fui-overlay-safe-right: var(
+    --fui-feedback-viewport-inset-right,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+  );
+  --_fui-overlay-safe-inline: calc(
+    100dvw - var(--_fui-overlay-safe-left) - var(--_fui-overlay-safe-right)
+  );
+  --_fui-overlay-safe-block: calc(
+    100dvh - var(--_fui-overlay-safe-top) - var(--_fui-overlay-safe-bottom)
+  );
+}
+
+@mixin modal-shell {
+  @include typography.role("body-compact");
+
+  box-sizing: border-box;
+  max-block-size: var(--_fui-overlay-safe-block, calc(100dvh - #{_raw(32, 32px)}));
+  overflow: auto;
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+}
+
+@mixin _section-inline-inset {
+  padding-inline: var(--fui-overlay-inline-inset, #{surface.inset("roomy")});
+
+  @media (max-width: 479px) {
+    padding-inline: var(--fui-overlay-inline-inset-narrow, #{surface.inset("default")});
+  }
+}
+
+@mixin header {
+  @include _section-inline-inset;
+
+  display: grid;
+  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
+  padding-block: var(--fui-overlay-header-block-inset, #{_raw(12, 12px)});
+}
+
+@mixin body {
+  @include _section-inline-inset;
+  @include typography.role("body-compact");
+
+  padding-block: 0 var(--fui-overlay-body-block-end-inset, #{_raw(12, 12px)});
+}
+
+@mixin footer {
+  @include _section-inline-inset;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
+  padding-block: var(--fui-overlay-footer-block-inset, #{_raw(8, 8px)});
+}
+
+@mixin modal-title {
+  @include typography.role("title-md");
+}
+
+@mixin description {
+  @include typography.role("body-compact");
+}
+
+@mixin anchored-title {
+  @include typography.role("ui-standard");
+}
+
+@mixin close {
+  @include action.base;
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
+
+  position: absolute;
+  inset-block-start: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
+  inset-inline-end: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
+}
+
+@mixin anchored-size($size) {
+  @if $size == "sm" {
+    @include surface.apply-inset("compact");
+
+    max-inline-size: var(--fui-overlay-popover-max-inline-sm, 256px);
+  } @else if $size == "md" {
+    @include surface.apply-inset("compact");
+
+    max-inline-size: var(--fui-overlay-popover-max-inline-md, 384px);
+  } @else if $size == "lg" {
+    @include surface.apply-inset("default");
+
+    max-inline-size: var(--fui-overlay-popover-max-inline-lg, 512px);
+  } @else {
+    @error "Unknown anchored overlay size '#{$size}'. Expected sm, md, or lg.";
+  }
+}
+
+@mixin anchored-surface($size) {
+  @include typography.role("body-compact");
+  @include anchored-size($size);
+
+  box-sizing: border-box;
+  min-inline-size: var(--fui-overlay-popover-min-inline, 192px);
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+}
+
+@mixin arrow-box {
+  inline-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
+  block-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
+  transform: rotate(45deg);
+}
+
+@mixin tooltip {
+  @include typography.role("ui-compact");
+
+  box-sizing: border-box;
+  max-inline-size: var(--fui-overlay-tooltip-max-inline, 320px);
+  padding-block: _raw(4, 4px);
+  padding-inline: _raw(8, 8px);
+}