@usefragments/ui 1.5.4 → 1.6.0

package/src/components/DatePicker/DatePicker.module.scss

@@ -1,8 +1,27 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action";
+@use "../../recipes/field";
+@use "../../recipes/layout";
+@use "../../recipes/popup";
+@use "../../recipes/typography";
 
-// Form field wrapper (label + helper + error)
-@include form-field-wrapper;
+.wrapper {
+  @include field.wrapper;
+}
+
+.label {
+  @include field.label;
+}
+
+.helper {
+  @include field.helper;
+}
+
+.helperError,
+.errorMessage {
+  @include field.error;
+}
 
 // ============================================
 // Trigger
@@ -11,15 +30,14 @@
 .trigger {
   @include button-reset;
   @include interactive-base;
-  @include text-base;
-  @include field-shell;
-  @include control-size("md", "input");
+  @include field.size("md");
+  @include field.shell;
 
   display: inline-flex;
   align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
+  gap: action.gap("md");
   width: 100%;
-  min-width: 10rem;
+  min-width: layout.measure("field-minimum");
   text-align: left;
 
   &[data-popup-open] {
@@ -28,11 +46,15 @@
 }
 
 .triggerSm {
-  @include control-size("sm", "input");
+  @include field.size("sm");
+
+  gap: action.gap("sm");
 }
 
 .triggerLg {
-  @include control-size("lg", "input");
+  @include field.size("lg");
+
+  gap: action.gap("lg");
 }
 
 .triggerIcon {
@@ -42,11 +64,18 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("md");
   }
 }
 
+.triggerSm .triggerIcon svg {
+  @include action.glyph("sm");
+}
+
+.triggerLg .triggerIcon svg {
+  @include action.glyph("lg");
+}
+
 .triggerValue {
   flex: 1;
   min-width: 0;
@@ -77,7 +106,7 @@
   @include surface-elevated;
 
   border-color: var(--fui-form-group-border, $fui-border);
-  padding: var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-surface-inset-compact, 12px);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   // Animation
@@ -105,10 +134,12 @@
 // ============================================
 
 .calendar {
-  @include text-base;
+  @include typography.role("body-compact");
 
   // Square size shared by weekday headers + day cells/buttons (32px grid).
-  --_day-size: var(--fui-icon-2xl, #{$fui-icon-2xl});
+  --_day-size: #{action.track("md")};
+
+  color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .months {
@@ -151,12 +182,9 @@
 .navButton {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("sm");
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--fui-button-height-sm, $fui-button-height-sm);
-  height: var(--fui-button-height-sm, $fui-button-height-sm);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
 
@@ -166,8 +194,7 @@
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
   }
 }
 
@@ -189,13 +216,11 @@
 }
 
 .weekday {
-  @include text-base;
+  @include typography.role("ui-compact");
 
   width: var(--_day-size);
   height: var(--_day-size);
   padding: 0;
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   text-align: center;
   vertical-align: middle;
@@ -256,7 +281,7 @@
 }
 
 .selected > .dayButton {
-  @include popup-item-selected;
+  @include popup.selected-state;
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &:hover {
@@ -326,7 +351,7 @@
   > .dayButton {
     position: relative;
     z-index: 1;
-    @include popup-item-selected;
+    @include popup.selected-state;
     font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
     &:hover {
@@ -356,7 +381,7 @@
   > .dayButton {
     position: relative;
     z-index: 1;
-    @include popup-item-selected;
+    @include popup.selected-state;
     font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
     &:hover {
@@ -371,14 +396,10 @@
 
 .preset {
   @include button-reset;
-  @include text-base;
+  @include popup.row;
 
-  display: flex;
-  align-items: center;
   width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-primary, $fui-text-primary);
   white-space: nowrap;
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
@@ -407,7 +428,7 @@
   }
 
   .dayButton {
-    border: 1px solid transparent;
+    border: var(--fui-stroke-hairline, 1px) solid transparent;
 
     &:focus-visible {
       border-color: var(--fui-text-primary, $fui-text-primary);

package/src/components/DatePicker/index.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { useFormFieldIds, type FormFieldProps } from "../../utils/aria";
+import { POPUP_OFFSET_PX } from "../../recipes/popup";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import styles from "./DatePicker.module.scss";
 
@@ -557,7 +558,7 @@ function DatePickerTrigger({
 function DatePickerContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = POPUP_OFFSET_PX,
   align = "start",
   ...htmlProps
 }: DatePickerContentProps) {

package/src/components/Dialog/Dialog.module.scss

@@ -1,14 +1,13 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/overlay" as overlay;
 
-// Backdrop overlay
 .backdrop {
   position: fixed;
+  z-index: var(--fui-overlay-layer-backdrop, 50);
   inset: 0;
   background-color: var(--fui-backdrop, $fui-backdrop);
-  z-index: 50;
-
-  // Animation
   opacity: 0;
   transition: opacity var(--fui-transition-normal, $fui-transition-normal);
 
@@ -22,31 +21,26 @@
   }
 }
 
-// Positioner centers the popup
 .positioner {
+  @include overlay.safe-viewport;
+
   position: fixed;
+  z-index: var(--fui-overlay-layer-modal, 51);
   inset: 0;
-  z-index: 51;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-space-2, $fui-space-2);
-  overflow-y: auto;
+  padding-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
+  padding-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
+  overflow: auto;
 }
 
-// The popup container
 .popup {
-  @include surface-elevated;
-  @include text-base;
+  @include overlay.modal-shell;
 
   position: relative;
-  width: 100%;
-  max-width: 28rem; // 448px
-  max-height: calc(100vh - var(--fui-space-8, $fui-space-8));
-  overflow-y: auto;
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-
-  // Animation
+  inline-size: 100%;
+  max-inline-size: overlay.dialog-max("md");
   opacity: 0;
   transform: scale(0.95) translateY(-$fui-anim-offset-md);
   transition:
@@ -69,79 +63,61 @@
   }
 }
 
-// Size variants
 .sm {
-  max-width: 24rem; // 384px
+  max-inline-size: overlay.dialog-max("sm");
 }
 
 .md {
-  max-width: 28rem; // 448px - default
+  max-inline-size: overlay.dialog-max("md");
 }
 
 .lg {
-  max-width: 36rem; // 576px
+  max-inline-size: overlay.dialog-max("lg");
 }
 
 .xl {
-  max-width: 48rem; // 768px
+  max-inline-size: overlay.dialog-max("xl");
 }
 
 .full {
-  max-width: calc(100vw - var(--fui-space-8, $fui-space-8));
+  max-inline-size: var(--_fui-overlay-safe-inline);
 }
 
-// Header area
 .header {
-  padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
+  @include overlay.header;
 }
 
-// Title
 .title {
+  @include overlay.modal-title;
+
   margin: 0;
-  font-size: var(--fui-font-size-lg, $fui-font-size-lg);
-  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
-// Description
 .description {
-  margin: var(--fui-space-1, $fui-space-1) 0 0;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include overlay.description;
+
+  margin: 0;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-// Body content
 .body {
-  padding: 0 var(--fui-space-4, $fui-space-4) var(--fui-space-3, $fui-space-3);
+  @include overlay.body;
 }
 
-// Footer for actions
 .footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
-  border-top: 1px solid var(--fui-border, $fui-border);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  @include overlay.footer;
+
+  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   border-radius: 0 0 var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
 
-// Close button (X in corner)
 .close {
   @include button-reset;
   @include interactive-base;
+  @include overlay.close;
 
-  position: absolute;
-  top: var(--fui-space-3, $fui-space-3);
-  right: var(--fui-space-3, $fui-space-3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
 
@@ -151,27 +127,27 @@
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: action.icon-size("sm");
+    block-size: action.icon-size("sm");
   }
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
+.popup:has(.close) .header {
+  padding-inline-end: calc(
+    var(--fui-overlay-close-inset, var(--fui-raw-space-12, 12px)) + #{action.track("sm")} +
+      var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+  );
+}
 
 @media (prefers-reduced-motion: reduce) {
-  .backdrop {
+  .backdrop,
+  .popup {
     transition: none;
   }
 
-  .popup {
-    transition: none;
+  .popup,
+  .popup[data-starting-style],
+  .popup[data-ending-style] {
     transform: none;
-
-    &[data-starting-style],
-    &[data-ending-style] {
-      transform: none;
-    }
   }
 }