@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Markdown/Markdown.module.scss

@@ -1,250 +1,102 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-
-// ============================================
-// Markdown Prose Container
-// ============================================
+@use "../../tokens/variables" as *;
+@use "../../recipes/prose" as prose;
 
 .markdown {
-  @include text-base;
-  word-wrap: break-word;
-  // Prose colour is a hook, not a constant. Markdown is routinely rendered on a
-  // surface that carries its own foreground — a Message bubble on the accent
-  // fill, an Alert, a Callout — and a fixed grey there is unreadable rather than
-  // quiet. Those surfaces point the hook at `currentColor`; on a plain page it
-  // still resolves to the secondary ramp prose has always used.
-  color: var(--fui-markdown-text, var(--fui-text-secondary, #{$fui-text-secondary}));
-  font-size: var(--fui-font-size-md, $fui-font-size-md);
-  line-height: var(--fui-line-height-prose, $fui-line-height-prose);
-
-  // Outer spacing belongs to whatever holds the prose — a Message bubble's
-  // padding, a Card's, a page's rhythm. The block's own first and last margins
-  // would add to it, or collapse through it, and either way the container ends
-  // up looking mis-padded through no fault of its own.
-  > :first-child {
-    margin-top: 0;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-
-  // ----------------------------------------
-  // Headings
-  // ----------------------------------------
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: var(--fui-space-4, $fui-space-4);
-    margin-bottom: var(--fui-space-2, $fui-space-2);
-    font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-    line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-    color: var(--fui-text-primary, $fui-text-primary);
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  h1 {
-    font-size: var(--fui-font-size-3xl, $fui-font-size-3xl);
-    line-height: var(--fui-line-height-display, $fui-line-height-display);
-    letter-spacing: var(--fui-letter-spacing-display, $fui-letter-spacing-display);
-  }
-
-  h2 {
-    font-size: var(--fui-font-size-xl, $fui-font-size-xl);
-    letter-spacing: var(--fui-letter-spacing-tight, $fui-letter-spacing-tight);
-    margin-top: var(--fui-space-8, $fui-space-8);
-  }
+  @include prose.root;
 
-  h3 {
-    font-size: var(--fui-font-size-lg, $fui-font-size-lg);
-    letter-spacing: var(--fui-letter-spacing-tight, $fui-letter-spacing-tight);
-    line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-  }
-
-  h4 {
-    font-size: var(--fui-font-size-md, $fui-font-size-md);
-  }
+  overflow-wrap: anywhere;
+  color: var(--fui-markdown-text, var(--fui-text-secondary, #{$fui-text-secondary}));
 
-  h5,
-  h6 {
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  p {
+    @include prose.paragraph;
   }
 
-  // ----------------------------------------
-  // Paragraphs
-  // ----------------------------------------
-
-  p {
-    margin: 0;
-    line-height: var(--fui-line-height-prose, $fui-line-height-prose);
+  @for $level from 1 through 6 {
+    h#{$level} {
+      @include prose.heading($level);
 
-    & + p {
-      margin-top: var(--fui-space-3, $fui-space-3);
+      color: var(--fui-text-primary, $fui-text-primary);
     }
   }
 
-  // ----------------------------------------
-  // Links
-  // ----------------------------------------
-
   a {
+    @include prose.link;
+
     color: var(--fui-color-accent, $fui-color-accent);
-    text-decoration: underline;
-    text-underline-offset: 2px;
 
     &:hover {
       opacity: 0.8;
     }
   }
 
-  // ----------------------------------------
-  // Lists
-  // ----------------------------------------
-
-  ul,
-  ol {
-    margin: var(--fui-space-2, $fui-space-2) 0;
-    padding-left: var(--fui-space-4, $fui-space-4);
+  ul {
+    @include prose.list("disc");
   }
 
-  li {
-    margin-bottom: var(--fui-space-1, $fui-space-1);
-    line-height: var(--fui-line-height-prose, $fui-line-height-prose);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+  ol {
+    @include prose.list("decimal");
   }
 
-  // Nested lists
-  li > ul,
-  li > ol {
-    margin-top: var(--fui-space-1, $fui-space-1);
-    margin-bottom: 0;
+  li + li {
+    margin-block-start: var(--fui-raw-space-4);
   }
 
-  // ----------------------------------------
-  // Inline Code
-  // ----------------------------------------
-
   code {
-    font-family: var(--fui-font-mono, $fui-font-mono);
-    font-size: 0.9em;
-    padding: 0.125em 0.375em;
-    border-radius: var(--fui-radius-sm, $fui-radius-sm);
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+    @include prose.inline-code;
   }
 
-  // ----------------------------------------
-  // Code Blocks
-  // ----------------------------------------
-
   pre {
-    margin: var(--fui-space-2, $fui-space-2) 0;
-    padding: var(--fui-space-2);
+    @include prose.code-block("default");
+
     border-radius: var(--fui-radius-md, $fui-radius-md);
     background-color: var(--fui-code-bg, $fui-code-bg);
-    overflow-x: auto;
 
     code {
       padding: 0;
       background: none;
-      font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+      font: inherit;
+      letter-spacing: inherit;
     }
   }
 
-  // Only target the immediate parent wrapper of a <pre> block
-  div:has(> div > div > pre) {
-    margin: var(--fui-space-3, $fui-space-3) 0;
-  }
-
-  // ----------------------------------------
-  // Blockquotes
-  // ----------------------------------------
-
   blockquote {
-    margin: var(--fui-space-2, $fui-space-2) 0;
-    padding: var(--fui-space-1) var(--fui-space-3);
-    border-left: 3px solid var(--fui-border, $fui-border);
-    color: var(--fui-text-secondary, $fui-text-secondary);
+    @include prose.blockquote;
 
-    p {
-      margin: 0;
-    }
+    color: var(--fui-text-secondary, $fui-text-secondary);
   }
 
-  // ----------------------------------------
-  // Horizontal Rule
-  // ----------------------------------------
-
   hr {
-    margin: var(--fui-space-4, $fui-space-4) 0;
-    border: none;
-    border-top: 1px solid var(--fui-border, $fui-border);
+    @include prose.rule;
   }
 
-  // ----------------------------------------
-  // Tables (GFM)
-  // ----------------------------------------
-
   table {
-    width: 100%;
-    margin: var(--fui-space-2, $fui-space-2) 0;
+    @include prose.table;
+
+    inline-size: 100%;
     border-collapse: collapse;
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
 
   th,
   td {
-    padding: var(--fui-space-1) var(--fui-space-2);
-    border: 1px solid var(--fui-border, $fui-border);
-    text-align: left;
+    border: var(--fui-stroke-hairline) solid var(--fui-border, $fui-border);
+    text-align: start;
   }
 
   th {
-    font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
     background-color: var(--fui-bg-secondary, $fui-bg-secondary);
   }
 
-  // ----------------------------------------
-  // Images
-  // ----------------------------------------
-
   img {
-    max-width: 100%;
-    height: auto;
+    @include prose.media;
+
     border-radius: var(--fui-radius-md, $fui-radius-md);
   }
 
-  // ----------------------------------------
-  // Task Lists (GFM)
-  // ----------------------------------------
-
-  input[type='checkbox'] {
-    margin-right: var(--fui-space-1, $fui-space-1);
+  input[type="checkbox"] {
+    margin-inline-end: var(--fui-raw-space-4);
   }
 
-  // ----------------------------------------
-  // Strong & Emphasis
-  // ----------------------------------------
-
   strong {
     font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
   }
-
-  // Remove top margin from first child and bottom margin from last child
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
 }

package/src/components/Markdown/index.tsx

@@ -79,11 +79,11 @@ function loadDeps(): Promise<void> {
 function FallbackRenderer({ content }: { content: string }) {
   const paragraphs = content.split(/\n{2,}/);
   return (
-    <div>
+    <>
       {paragraphs.map((p) => (
         <p key={p}>{p}</p>
       ))}
-    </div>
+    </>
   );
 }
 

package/src/components/Menu/Menu.module.scss

@@ -1,36 +1,24 @@
 @use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
+@use "../../recipes/popup" as popup;
+@use "../../recipes/typography" as typography;
 
-// Local component tokens — arrow size shared with Popover/Tooltip
-$fui-arrow-size: 10px !default;
-
-// Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, 52);
   outline: none;
   pointer-events: auto;
 }
 
-// Popup container
 .popup {
-  @include surface-elevated;
-  @include popup-container;
+  @include popup.container;
 
-  list-style: none;
+  min-inline-size: var(--fui-menu-min-inline, 192px);
   margin: 0;
-  min-width: 12rem;
-
-  // Menus must be fully hit-testable as soon as they open. A fade/scale
-  // entrance can let fast clicks pass through to page links under the portal.
+  list-style: none;
   opacity: 1;
   transform: none;
   transform-origin: var(--transform-origin);
 
-  &[data-open] {
-    opacity: 1;
-    transform: none;
-  }
-
+  &[data-open],
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 1;
@@ -38,27 +26,24 @@ $fui-arrow-size: 10px !default;
   }
 }
 
-// Viewport — enables content transition animations
 .viewport {
-  overflow: hidden;
-  transition: height var(--fui-transition-fast, $fui-transition-fast);
+  @include popup.viewport;
+
+  transition: block-size var(--fui-transition-fast, $fui-transition-fast);
 }
 
-// Menu item (shared base)
 .item {
-  @include popup-item;
+  @include popup.row;
 
-  // Base UI sets [data-highlighted] on pointer-hover AND keyboard nav → one indicator.
   &[data-highlighted] {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
   &[data-disabled] {
-    @include popup-item-disabled;
+    @include popup.disabled-state;
   }
 }
 
-// Danger variant for destructive actions
 .itemDanger {
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 
@@ -68,13 +53,18 @@ $fui-arrow-size: 10px !default;
   }
 }
 
-// Item with icon
-.itemIcon {
+.itemIcon,
+.checkIndicator,
+.radioIndicator {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--fui-popup-indicator-box);
+  block-size: var(--fui-popup-indicator-box);
+  flex: 0 0 auto;
+}
+
+.itemIcon {
   color: var(--fui-text-secondary, $fui-text-secondary);
 
   .itemDanger & {
@@ -82,142 +72,67 @@ $fui-arrow-size: 10px !default;
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 100%;
+    block-size: 100%;
   }
 }
 
-// Item label (main text)
 .itemLabel {
   flex: 1;
+  min-inline-size: 0;
 }
 
-// Item shortcut (keyboard shortcut hint)
 .itemShortcut {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include typography.role("caption");
+
+  margin-inline-start: auto;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  margin-left: auto;
 }
 
-// Check indicator (checkmark icon for checked items)
-//
-// Sized to the text it sits beside rather than to a 16px icon slot. Every item
-// in a checkable menu reserves this column so labels stay aligned whether or not
-// they are checked — which means its width is pure indent on every unchecked
-// row, and at 1rem against 12px text it read as a margin rather than a marker.
 .checkIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 0.75rem;
-  height: 0.75rem;
-  flex-shrink: 0;
   color: var(--fui-color-accent, $fui-color-accent);
 
   svg {
-    width: 100%;
-    height: 100%;
+    inline-size: var(--fui-raw-space-12, 12px);
+    block-size: var(--fui-raw-space-12, 12px);
   }
 }
 
-// Checkbox item
-.checkboxItem {
-  // Uses .checkIndicator for checked state visual
-}
-
-// Radio indicator (still uses icon)
 .radioIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
   visibility: hidden;
 
   svg {
-    width: 0.75rem;
-    height: 0.75rem;
+    inline-size: var(--fui-raw-space-12, 12px);
+    block-size: var(--fui-raw-space-12, 12px);
   }
 }
 
-// Radio item states
-.radioItem {
-  &[data-checked] .radioIndicator {
-    visibility: visible;
-    color: var(--fui-color-accent, $fui-color-accent);
-  }
+.radioItem[data-checked] .radioIndicator {
+  visibility: visible;
+  color: var(--fui-color-accent, $fui-color-accent);
 }
 
-// Separator
 .separator {
-  height: 1px;
-  margin: var(--fui-space-1, $fui-space-1) 0;
-  background-color: var(--fui-border, $fui-border);
-}
-
-// Group container
-.group {
-  // No specific styles needed
+  @include popup.group-separator;
 }
 
-// Group label
 .groupLabel {
-  @include popup-group-label;
-}
-
-// Arrow
-.arrow {
-  width: $fui-arrow-size;
-  height: $fui-arrow-size;
-  transform: rotate(45deg);
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border, $fui-border);
-
-  &[data-side="top"] {
-    border-top: none;
-    border-left: none;
-  }
-
-  &[data-side="bottom"] {
-    border-bottom: none;
-    border-right: none;
-  }
-
-  &[data-side="left"] {
-    border-left: none;
-    border-bottom: none;
-  }
-
-  &[data-side="right"] {
-    border-right: none;
-    border-top: none;
-  }
+  @include popup.group-label;
 }
 
-// Submenu trigger (has arrow on right)
-.submenuTrigger {
-  &::after {
-    content: "";
-    margin-left: auto;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 0 4px 6px;
-    border-color: transparent transparent transparent var(--fui-text-secondary, $fui-text-secondary);
-  }
+.submenuTrigger::after {
+  content: "";
+  inline-size: 0;
+  block-size: 0;
+  margin-inline-start: auto;
+  border-style: solid;
+  border-width: var(--fui-menu-submenu-caret-block, 4px) 0 var(--fui-menu-submenu-caret-block, 4px)
+    var(--fui-menu-submenu-caret-inline, 6px);
+  border-color: transparent transparent transparent var(--fui-text-secondary, $fui-text-secondary);
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
-  .popup {
-    transform: none;
-
-    &[data-starting-style],
-    &[data-ending-style] {
-      transform: none;
-    }
+  .viewport {
+    transition: none;
   }
 }