@usefragments/ui 1.5.4 → 1.7.0

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,116 @@
+@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")});
+}

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,102 @@
+@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,74 @@
+@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 ==
+    "menu-min" 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}'.";
+}