@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Editor/Editor.module.scss

@@ -1,19 +1,24 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// ============================================
-// Editor Root
-// ============================================
+@use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/prose" as prose;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
 
 .editor {
   @include form-group-surface;
+
+  --fui-editor-min-block-sm: 120px;
+  --fui-editor-min-block-md: 200px;
+  --fui-editor-min-block-lg: 400px;
+
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   overflow: hidden;
 
-  // Focus ring (Enhancement #7)
   &:focus-within:not([data-disabled]) {
     @include focus-ring;
   }
@@ -23,50 +28,30 @@
     pointer-events: none;
   }
 
-  &[data-readonly] {
-    .contentTextarea {
-      cursor: default;
-    }
-  }
-
-  // Size variants (Enhancement #2)
-  &[data-size="sm"] {
-    .content,
-    .contentTextarea,
-    :global(.tiptap) {
-      min-height: 120px;
-    }
-  }
-
-  &[data-size="md"] {
-    .content,
-    .contentTextarea,
-    :global(.tiptap) {
-      min-height: 200px;
-    }
+  &[data-readonly] .contentTextarea {
+    cursor: default;
   }
 
-  &[data-size="lg"] {
-    .content,
-    .contentTextarea,
-    :global(.tiptap) {
-      min-height: 400px;
+  @each $size in ("sm", "md", "lg") {
+    &[data-size="#{$size}"] {
+      .content,
+      .contentTextarea,
+      :global(.tiptap) {
+        min-block-size: var(--fui-editor-min-block-#{$size});
+      }
     }
   }
 }
 
-// ============================================
-// Toolbar
-// ============================================
-
-.toolbar {
+.toolbar,
+.statusBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  border-bottom: 1px solid var(--fui-form-group-border, $fui-border);
+  gap: layout.gap("sm");
+  padding-block: layout.gap("xs");
+  padding-inline: layout.gap("sm");
   background-color: color-mix(
     in srgb,
     var(--fui-form-group-bg, $fui-bg-secondary) 72%,
@@ -74,222 +59,166 @@
   );
 }
 
-// ============================================
-// Toolbar Group
-// ============================================
+.toolbar {
+  border-block-end: var(--fui-stroke-hairline) solid var(--fui-form-group-border, $fui-border);
+}
 
-.toolbarGroup {
+.toolbarGroup,
+.statusBarLeft,
+.statusBarRight {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-0-5, $fui-space-0-5);
+  gap: layout.gap("xs");
 }
 
-// ============================================
-// Toolbar Button
-// ============================================
-
 .toolbarButton {
   @include button-reset;
-  @include interactive-base;
-  @include touch-target;
+  @include action.base;
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--fui-button-height-sm, $fui-button-height-sm);
-  min-height: var(--fui-button-height-sm, $fui-button-height-sm);
-  padding: 0;
-  border: 1px solid transparent;
+  border: var(--fui-stroke-hairline) solid transparent;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
+  cursor: pointer;
 
   &:hover:not(:disabled) {
-    background-color: var(--fui-field-bg, $fui-bg-elevated);
     border-color: var(--fui-form-group-border, $fui-border);
+    background-color: var(--fui-field-bg, $fui-bg-elevated);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
   &:active:not(:disabled) {
-    background-color: var(--fui-field-selection-bg, $fui-bg-hover);
     border-color: var(--fui-field-selection-border, $fui-color-accent);
+    background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm); // 14px
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
   }
 }
 
 .toolbarButtonActive {
-  color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-field-selection-bg, $fui-bg-hover);
   border-color: var(--fui-field-selection-border, $fui-color-accent);
-  box-shadow: inset 0 0 0 1px
+  background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+  color: var(--fui-text-primary, $fui-text-primary);
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline)
     color-mix(in srgb, var(--fui-field-selection-border, $fui-color-accent) 55%, transparent);
-
-  &:hover:not(:disabled) {
-    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
 }
 
-// ============================================
-// Separator
-// ============================================
-
 .separator {
-  width: 1px;
-  height: 1rem;
+  inline-size: var(--fui-stroke-hairline);
+  block-size: var(--fui-icon-md);
+  margin-inline: layout.gap("xs");
   background-color: var(--fui-form-group-border, $fui-border);
-  margin: 0 var(--fui-space-1, $fui-space-1);
   flex-shrink: 0;
 }
 
-// ============================================
-// Status Indicator
-// ============================================
+.statusIndicator,
+.statusBarItem {
+  @include typography.role("caption");
+
+  white-space: nowrap;
+}
 
 .statusIndicator {
-  @include section-label-text;
+  padding-inline: layout.gap("sm");
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  white-space: nowrap;
-  padding: 0 var(--fui-space-2, $fui-space-2);
 }
 
-.statusError {
+.statusError,
+.statusBarItemError {
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-// ============================================
-// Content
-// ============================================
+.statusBarItemWarning {
+  color: var(--fui-color-warning-text, $fui-color-warning-text);
+}
 
 .content {
   flex: 1;
-  min-height: 200px;
+  min-block-size: var(--fui-editor-min-block-md);
   overflow-y: auto;
 }
 
-.contentRich {
-  // TipTap editor styling
-  :global(.tiptap) {
-    padding: var(--fui-space-3, $fui-space-3);
-    min-height: 200px;
-    outline: none;
-    @include text-base;
-    line-height: var(--fui-line-height-relaxed, $fui-line-height-relaxed);
-    font-size: var(--fui-font-size-base, $fui-font-size-base);
+.contentRich :global(.tiptap) {
+  @include prose.root;
 
-    &:focus-visible {
-      outline: none;
-    }
+  min-block-size: var(--fui-editor-min-block-md);
+  padding: layout.gap("lg");
+  outline: none;
 
-    // Placeholder
-    p.is-editor-empty:first-child::before {
-      content: attr(data-placeholder);
-      float: left;
-      color: var(--fui-text-tertiary, $fui-text-tertiary);
-      pointer-events: none;
-      height: 0;
-    }
-
-    // Headings (Enhancement #4)
-    // Heading scale matches Markdown's prose scale (h1=3xl, h2=xl, h3=lg) so the
-    // editing canvas mirrors how the rendered content reads.
-    h1 {
-      font-size: var(--fui-font-size-3xl, $fui-font-size-3xl);
-      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-      margin: 0 0 var(--fui-space-3, $fui-space-3);
-    }
+  &:focus-visible {
+    outline: none;
+  }
 
-    h2 {
-      font-size: var(--fui-font-size-xl, $fui-font-size-xl);
-      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
-    }
+  p {
+    @include prose.paragraph;
+  }
 
-    h3 {
-      font-size: var(--fui-font-size-lg, $fui-font-size-lg);
-      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
-    }
+  p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: inline-start;
+    block-size: 0;
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    pointer-events: none;
+  }
 
-    // Blockquote (Enhancement #5)
-    blockquote {
-      border-left: 3px solid var(--fui-color-accent, $fui-color-accent);
-      padding-left: var(--fui-space-4, $fui-space-4);
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
-      color: var(--fui-text-secondary, $fui-text-secondary);
-      font-style: italic;
+  @for $level from 1 through 6 {
+    h#{$level} {
+      @include prose.heading($level);
     }
+  }
 
-    // Inline code — padding matches Markdown's inline <code> (0.125em 0.375em)
-    code {
-      background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-      border-radius: var(--fui-radius-sm, $fui-radius-sm);
-      padding: 0.125em 0.375em;
-      font-family: var(--fui-font-mono, $fui-font-mono);
-      font-size: 0.9em;
-    }
+  blockquote {
+    @include prose.blockquote;
 
-    // Links
-    a {
-      color: var(--fui-color-accent, $fui-color-accent);
-      text-decoration: underline;
-      cursor: pointer;
+    color: var(--fui-text-secondary, $fui-text-secondary);
+    font-style: italic;
+  }
 
-      &:hover {
-        color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-      }
-    }
+  code {
+    @include prose.inline-code;
+  }
 
-    // Unordered lists
-    ul {
-      padding-left: var(--fui-space-5, $fui-space-5);
-      list-style-type: disc;
-    }
+  a {
+    @include prose.link;
 
-    // Ordered lists (Enhancement #3)
-    ol {
-      padding-left: var(--fui-space-5, $fui-space-5);
-      list-style-type: decimal;
-    }
+    color: var(--fui-color-accent, $fui-color-accent);
+    cursor: pointer;
+  }
 
-    // Strikethrough
-    s {
-      text-decoration: line-through;
-    }
+  ul {
+    @include prose.list("disc");
+  }
 
-    // Paragraphs
-    p {
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
+  ol {
+    @include prose.list("decimal");
+  }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+  s {
+    text-decoration: line-through;
   }
 }
 
 .contentTextarea {
   @include button-reset;
-  @include text-base;
+  @include typography.role("body-relaxed");
 
   display: block;
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  padding: var(--fui-space-3, $fui-space-3);
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: var(--fui-editor-min-block-md);
+  padding: layout.gap("lg");
+  border: 0;
   background: transparent;
-  border: none;
   resize: none;
   overflow-y: auto;
-  line-height: var(--fui-line-height-relaxed, $fui-line-height-relaxed);
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -304,17 +233,8 @@
   }
 }
 
-// ============================================
-// Status Bar
-// ============================================
-
 .statusBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  border-top: 1px solid var(--fui-form-group-border, $fui-border);
+  border-block-start: var(--fui-stroke-hairline) solid var(--fui-form-group-border, $fui-border);
   background-color: color-mix(
     in srgb,
     var(--fui-form-group-bg, $fui-bg-secondary) 56%,
@@ -322,31 +242,6 @@
   );
 }
 
-.statusBarLeft {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-}
-
 .statusBarRight {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  margin-left: auto;
-}
-
-.statusBarItem {
-  @include helper-text;
-  white-space: nowrap;
-}
-
-// maxLength indicator states (Enhancement #1)
-.statusBarItemWarning {
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-}
-
-.statusBarItemError {
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  margin-inline-start: auto;
 }

package/src/components/EmptyState/EmptyState.module.scss

@@ -1,88 +1,45 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-
-// Local component tokens
-$fui-emptystate-width-sm: 240px !default;
-$fui-emptystate-width-md: 320px !default;
-$fui-emptystate-width-lg: 400px !default;
-$fui-emptystate-icon-sm: $fui-icon-xl !default; // 24px (--fui-icon-xl)
-$fui-emptystate-icon-md: $fui-icon-2xl !default; // 32px (--fui-icon-2xl)
-// 40px has no icon-ladder step; kept as a documented local between
-// icon-2xl (32) and space-6 (42) so the lg display glyph stays distinct.
-$fui-emptystate-icon-lg: 2.857rem !default; // 40px
+@use "../../tokens/variables" as *;
+@use "../../recipes/feedback" as feedback;
 
 .emptyState {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
   text-align: center;
   font-family: var(--fui-font-sans, $fui-font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
 
-// Size variants
-.sm {
-  padding: var(--fui-space-6) var(--fui-space-4);
-
-  .title {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  > .icon {
+    margin-block-end: calc(
+      var(--fui-feedback-section-gap, var(--fui-raw-space-16, 16px)) - var(
+          --fui-feedback-text-gap,
+          var(--fui-raw-space-4, 4px)
+        )
+    );
   }
 
-  .description {
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-    max-width: $fui-emptystate-width-sm;
-  }
-
-  .icon {
-    margin-bottom: var(--fui-space-2, $fui-space-2);
+  > .actions {
+    margin-block-start: calc(
+      var(--fui-feedback-section-gap, var(--fui-raw-space-16, 16px)) - var(
+          --fui-feedback-text-gap,
+          var(--fui-raw-space-4, 4px)
+        )
+    );
   }
+}
 
-  .actions {
-    margin-top: var(--fui-space-3, $fui-space-3);
-  }
+.sm {
+  @include feedback.empty-state("sm");
 }
 
 .md {
-  padding: var(--fui-space-10, $fui-space-10) var(--fui-space-6);
-
-  .title {
-    font-size: var(--fui-font-size-base, $fui-font-size-base);
-  }
-
-  .description {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-    max-width: $fui-emptystate-width-md;
-  }
-
-  .icon {
-    margin-bottom: var(--fui-space-3, $fui-space-3);
-  }
-
-  .actions {
-    margin-top: var(--fui-space-4, $fui-space-4);
-  }
+  @include feedback.empty-state("md");
 }
 
 .lg {
-  padding: var(--fui-space-12, $fui-space-12) var(--fui-space-8);
-
-  .title {
-    font-size: var(--fui-font-size-lg, $fui-font-size-lg);
-  }
-
-  .description {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-    max-width: $fui-emptystate-width-lg;
-  }
-
-  .icon {
-    margin-bottom: var(--fui-space-4, $fui-space-4);
-  }
-
-  .actions {
-    margin-top: var(--fui-space-6, $fui-space-6);
-  }
+  @include feedback.empty-state("lg");
 }
 
 .icon {
@@ -91,41 +48,37 @@ $fui-emptystate-icon-lg: 2.857rem !default; // 40px
   justify-content: center;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
-  // Icon sizing based on parent size variant
   svg {
-    width: var(--fui-icon-2xl, #{$fui-emptystate-icon-md}); // 32px
-    height: var(--fui-icon-2xl, #{$fui-emptystate-icon-md});
-  }
-
-  .lg & svg {
-    // 40px has no icon-ladder step — see local token note above.
-    width: $fui-emptystate-icon-lg;
-    height: $fui-emptystate-icon-lg;
-  }
-
-  .sm & svg {
-    width: var(--fui-icon-xl, #{$fui-emptystate-icon-sm}); // 24px
-    height: var(--fui-icon-xl, #{$fui-emptystate-icon-sm});
+    inline-size: var(--_fui-feedback-empty-icon-size);
+    block-size: var(--_fui-feedback-empty-icon-size);
   }
 }
 
 .title {
   margin: 0;
-  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);
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  font-size: var(--_fui-feedback-empty-title-size);
+  font-weight: var(--_fui-feedback-empty-title-weight);
+  line-height: var(--_fui-feedback-empty-title-line);
+  letter-spacing: var(--_fui-feedback-empty-title-tracking);
 }
 
 .description {
-  margin: var(--fui-space-2, $fui-space-2) 0 0;
+  max-inline-size: var(--_fui-feedback-empty-max-inline);
+  margin: 0;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  font-size: var(--_fui-feedback-empty-copy-size);
+  font-weight: var(--_fui-feedback-empty-copy-weight);
+  line-height: var(--_fui-feedback-empty-copy-line);
+  letter-spacing: var(--_fui-feedback-empty-copy-tracking);
 }
 
 .actions {
   display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
   flex-wrap: wrap;
+  align-items: center;
   justify-content: center;
+  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, 8px));
 }

package/src/components/Field/Field.contract.json

@@ -145,7 +145,8 @@
       "Control",
       "Description",
       "Error",
-      "Validity"
+      "Validity",
+      "Required"
     ]
   },
   "provenance": {

package/src/components/Field/Field.module.scss

@@ -1,14 +1,11 @@
-@use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
+@use "../../recipes/field";
 
 .root {
-  display: flex;
-  flex-direction: column;
+  @include field.wrapper;
 }
 
 .label {
-  @include label-text;
-  margin-bottom: var(--fui-space-1, $fui-space-1);
+  @include field.label;
 
   &[data-disabled] {
     opacity: 0.5;
@@ -20,12 +17,13 @@
 }
 
 .description {
-  @include helper-text;
-  margin-top: var(--fui-space-1, $fui-space-1);
+  @include field.helper;
 }
 
 .error {
-  @include helper-text;
-  margin-top: var(--fui-space-1, $fui-space-1);
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+  @include field.error;
+}
+
+.required {
+  margin-inline-start: var(--fui-raw-space-2, 2px);
 }