@botiverse/raft-ui 0.19.0 → 0.21.0

package/dist/style.css

@@ -8,7 +8,7 @@
   --r-float-button-border-color: var(--line-strong);
   --r-float-button-bg: var(--layer-card);
   --r-float-button-bg-hover: var(--layer-card);
-  --r-float-button-press: var(--fill-pressed);
+  --r-float-button-press: var(--fill-medium);
   --r-float-button-text-color: var(--foreground);
   --r-float-button-text-hover-color: var(--foreground);
   --r-float-button-text-disabled-color: var(--foreground-disabled);
@@ -71,7 +71,7 @@
     --r-float-button-border-color: var(--sticker-ink);
     --r-float-button-bg: var(--attention-400);
     --r-float-button-bg-hover: var(--attention-400);
-    --r-float-button-press: var(--sticker-pressed);
+    --r-float-button-press: var(--sticker-medium);
     --r-float-button-text-color: var(--sticker-ink);
     --r-float-button-text-hover-color: var(--sticker-ink);
   }
@@ -80,7 +80,7 @@
     --r-float-button-border-color: var(--sticker-ink);
     --r-float-button-bg: var(--warning);
     --r-float-button-bg-hover: var(--warning);
-    --r-float-button-press: var(--sticker-pressed);
+    --r-float-button-press: var(--sticker-medium);
     --r-float-button-text-color: var(--sticker-ink);
     --r-float-button-text-hover-color: var(--sticker-ink);
   }
@@ -89,7 +89,7 @@
     --r-float-button-border-color: var(--sticker-ink);
     --r-float-button-bg: var(--danger);
     --r-float-button-bg-hover: var(--danger);
-    --r-float-button-press: var(--sticker-pressed);
+    --r-float-button-press: var(--sticker-medium);
     --r-float-button-text-color: var(--sticker-ink);
     --r-float-button-text-hover-color: var(--sticker-ink);
   }
@@ -97,8 +97,8 @@
   &.r-float-button--ghost {
     --r-float-button-border-color: transparent;
     --r-float-button-bg: transparent;
-    --r-float-button-bg-hover: var(--fill-pressed);
-    --r-float-button-press: transparent;
+    --r-float-button-bg-hover: transparent;
+    --r-float-button-press: var(--fill-medium);
   }
 }
 
@@ -136,11 +136,13 @@
     padding-right: var(--r-float-button-padding-x);
   }
 
-  &:hover:not(:disabled) {
-    background-color: var(--r-float-button-bg-hover);
-    color: var(--r-float-button-text-hover-color);
-    box-shadow: var(--r-float-button-shadow-hover);
-    transform: var(--r-float-button-transform-hover);
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--r-float-button-bg-hover);
+      color: var(--r-float-button-text-hover-color);
+      box-shadow: var(--r-float-button-shadow-hover);
+      transform: var(--r-float-button-transform-hover);
+    }
   }
 
   &:active:not(:disabled) {
@@ -153,7 +155,13 @@
     outline-offset: var(--r-float-button-outline-offset);
   }
 
-  &:is(:hover, :active):not(:disabled) {
+  @media (hover: hover) {
+    &:hover:not(:disabled) {
+      background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
+    }
+  }
+
+  &:active:not(:disabled) {
     background-image: linear-gradient(var(--r-float-button-press), var(--r-float-button-press));
   }
 
@@ -1062,16 +1070,16 @@
   box-sizing: border-box;
   min-width: 0;
   min-height: var(--control-height);
+  align-items: center;
+  gap: var(--control-embedded-inset);
+  padding: 0 calc(var(--control-embedded-inset) - 1px) 0 12px;
   border: 1.5px solid var(--line-field);
+  border-radius: var(--radius-control);
   background: var(--layer-card);
   color: var(--foreground);
   font-size: var(--field-font-size);
   line-height: var(--field-line-height);
-  border-radius: 8px;
   outline: 0;
-  align-items: center;
-  gap: .5rem;
-  padding: 0 6px 0 12px;
   transition: box-shadow 90ms ease-out;
   display: flex;
 }
@@ -1094,31 +1102,31 @@
 }
 
 .r-combobox-select__chips {
+  min-height: var(--control-embedded-size);
+  min-width: 0;
+  padding: calc(var(--control-embedded-inset) - 1.5px) 0;
+  align-items: center;
+  gap: var(--control-embedded-inset);
   border: 0;
   flex-wrap: wrap;
   flex: 1;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  min-height: 28px;
-  margin-inline-start: -6px;
-  padding: 6px 0;
+  margin-inline-start: calc(var(--control-embedded-inset) - 13px);
   display: flex;
 }
 
 .r-combobox-select__chips .r-combobox-select__input {
-  min-height: 28px;
+  height: var(--control-embedded-size);
   padding: 0 4px;
 }
 
 .r-combobox-select__chip {
-  background: var(--fill-muted);
   max-width: 100%;
-  min-height: 28px;
+  height: var(--control-embedded-size);
+  border-radius: var(--radius-chip);
+  background: var(--fill-muted);
   color: var(--foreground);
   font-size: var(--text-footnote);
   line-height: var(--text-footnote--line-height);
-  border-radius: 6px;
   align-items: center;
   gap: 6px;
   padding: 0 2px 0 8px;
@@ -1147,9 +1155,9 @@
 }
 
 .r-combobox-select__actions {
-  flex: none;
   align-items: center;
-  gap: .125rem;
+  gap: var(--control-embedded-inset);
+  flex: none;
   display: inline-flex;
 }
 
@@ -1166,17 +1174,17 @@
 }
 
 .r-combobox-select__remove {
-  width: 22px;
-  height: 22px;
+  width: calc(var(--control-embedded-size) - 4px);
+  height: calc(var(--control-embedded-size) - 4px);
+  border-radius: var(--radius-sticker);
   color: var(--foreground-hint);
-  border-radius: 4px;
 }
 
 .r-combobox-select__action {
-  width: 32px;
-  height: 32px;
+  width: var(--control-embedded-size);
+  height: var(--control-embedded-size);
+  border-radius: var(--radius-chip);
   color: var(--foreground-hint);
-  border-radius: 8px;
 }
 
 .r-combobox-select__action > svg, .r-combobox-select__remove > svg {
@@ -1193,15 +1201,26 @@
   height: .875rem;
 }
 
-.r-combobox-select__action:hover, .r-combobox-select__remove:hover {
-  background: var(--fill-pressed);
+@media (hover: hover) {
+  .r-combobox-select__action:hover, .r-combobox-select__remove:hover {
+    background: var(--fill-medium);
+    color: var(--foreground);
+  }
+}
+
+.r-combobox-select__action:active, .r-combobox-select__remove:active {
+  background: var(--fill-medium);
   color: var(--foreground);
 }
 
-.r-combobox-select__action:focus-visible, .r-combobox-select__remove:focus-visible {
+.r-combobox-select__action:focus-visible {
   box-shadow: var(--focus-ring);
 }
 
+.r-combobox-select__remove:focus-visible:not(:where(:root[data-input-modality="pointer"] *)) {
+  box-shadow: inset 0 0 0 2px var(--foreground);
+}
+
 .r-combobox-select__positioner {
   z-index: 50;
   isolation: isolate;
@@ -1214,12 +1233,12 @@
   min-width: 13.75rem;
   max-width: var(--available-width);
   max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
+  border-radius: var(--radius-container);
   background: var(--layer-popover);
   color: var(--foreground);
   box-shadow: 0 0 0 1px var(--line-seam),
     var(--elevation-float);
   border: 0;
-  border-radius: 10px;
   outline: 0;
   overflow: hidden;
 }
@@ -1228,13 +1247,14 @@
   box-sizing: border-box;
   max-height: var(--combobox-select-list-max-height, 16rem);
   overscroll-behavior: contain;
-  padding: 6px;
-  scroll-padding-block: 6px;
+  padding: 4px;
+  scroll-padding-block: 4px;
   overflow-y: auto;
 }
 
 .r-combobox-select__option {
   box-sizing: border-box;
+  border-radius: var(--radius-chip);
   cursor: default;
   user-select: none;
   width: 100%;
@@ -1242,7 +1262,6 @@
   color: var(--foreground);
   font-size: var(--text-callout);
   line-height: var(--text-callout--line-height);
-  border-radius: 8px;
   outline: 0;
   justify-content: space-between;
   align-items: center;
@@ -1254,7 +1273,14 @@
   overflow: hidden;
 }
 
-.r-combobox-select__option:hover, .r-combobox-select__option[data-highlighted] {
+@media (hover: hover) {
+  .r-combobox-select__option:hover {
+    background: var(--brand-soft);
+    color: var(--foreground);
+  }
+}
+
+.r-combobox-select__option[data-highlighted] {
   background: var(--brand-soft);
   color: var(--foreground);
 }
@@ -1321,27 +1347,16 @@
 }
 
 .r-combobox-select--sm.r-combobox-select__control {
-  min-height: 1.75rem;
+  --control-height: 1.75rem;
+  --control-embedded-inset: 3px;
+  --control-embedded-size: 22px;
   font-size: var(--text-control);
   line-height: var(--text-control--line-height);
 }
 
-.r-combobox-select--sm .r-combobox-select__chips {
-  min-height: 1.5rem;
-  padding: 1px 0;
-}
-
-.r-combobox-select--sm .r-combobox-select__chip {
-  min-height: 1.375rem;
-}
-
-.r-combobox-select--sm .r-combobox-select__action {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
 .r-combobox-select--lg.r-combobox-select__control {
-  min-height: 52px;
+  --control-height: 52px;
+  --control-embedded-size: 40px;
 }
 
 .r-combobox-select__control[data-status="error"], .r-combobox-select__control[data-invalid] {

package/dist/styles.css

@@ -65,9 +65,14 @@
 
   /* Raft Design System shape scale: pixels are hard, containers are soft.
      sticker = avatars, channel tiles, checkboxes, counts, inline marks;
-     chip = 22px tags and status chips; control = buttons, fields, rows, menu
-     items; container = cards, menus, composer, banners; dialog = dialogs and
-     sheet tops. Round (rounded-full) is only for switches and radios. */
+     chip = chips, a popup's highlighted item, and every control embedded in
+     another component's frame (a field's buttons, the composer's, a floating
+     toolbar's, a card's corner action); control = buttons, fields and rows
+     that stand on their own; container = cards, menus, composer, banners;
+     dialog = dialogs and sheet tops. Round (rounded-full) is only for
+     switches and radios. A frame keeps its radius whatever it holds: the
+     element keeps its own, and the space around it adapts
+     (design/foundations/shape.md#inside-a-frame). */
   --radius-sticker: 4px;
   --radius-chip: 6px;
   --radius-control: 8px;
@@ -281,17 +286,15 @@
   --color-foreground-on-frame: var(--foreground-on-frame);
   --color-foreground-on-frame-muted: var(--foreground-on-frame-muted);
   --color-foreground-on-frame-active: var(--foreground-on-frame-active);
-  --color-fill-frame-pressed: var(--fill-frame-pressed);
-  --color-fill-pressed: var(--fill-pressed);
-  --color-fill-row-hover: var(--fill-row-hover);
-  --color-fill-message-hover: var(--fill-message-hover);
-  --color-fill-row-open: var(--fill-row-open);
+  --color-fill-subtle: var(--fill-subtle);
+  --color-fill-medium: var(--fill-medium);
+  --color-fill-frame-medium: var(--fill-frame-medium);
   --color-layer-code: var(--layer-code);
   --color-foreground-link: var(--foreground-link);
   --color-sticker-ink: var(--sticker-ink);
   --color-sticker-paper: var(--sticker-paper);
   --color-sticker-edge: var(--sticker-edge);
-  --color-sticker-pressed: var(--sticker-pressed);
+  --color-sticker-medium: var(--sticker-medium);
   --color-presence-online: var(--presence-online);
   --color-presence-busy: var(--presence-busy);
   --color-presence-error: var(--presence-error);
@@ -370,6 +373,41 @@
   --spacing-control-cta: var(--control-height-cta);
   --spacing-control-icon: var(--control-icon-size);
   --spacing-control-hit: var(--control-hit-inset);
+  /* A chip or a button embedded in a frame sits `embedded-inset` (6px) inside
+     the frame's outer edge on every side and from its sibling; in a field it
+     is `control-embedded` tall, 20px on a desktop and 32px on a phone, so the
+     field keeps the control height (design/foundations/shape.md#inside-a-frame).
+     Consumers: `ComboboxChips`, `ComboboxControl`, `ComboboxSelect`,
+     InputGroup's end addon, the composer, CodeBlock and the corner actions of
+     MessageAttachment. */
+  --spacing-control-embedded: var(--control-embedded-size);
+  --spacing-embedded-inset: var(--control-embedded-inset);
+  /* ─── Timeline rhythm ───────────────────────────────────────────────────────
+     Two steps between the lines of a conversation, measured from text to text
+     (design/foundations/spacing.md#timeline-rhythm): `timeline-message` (16px)
+     between turns, `timeline-section` (24px) at a boundary. Every row carries
+     `timeline-row` (4px) above and below its text, the reach of its highlight;
+     a turn's first row adds `timeline-turn` (8px, a transparent border the
+     highlight doesn't paint) above that, so it starts `timeline-lead` (12px)
+     above its text. A date line takes those insets back out of its own
+     padding, so it sits a section from the text on both sides.
+     A product uses only two of them, around its list: `timeline-start`
+     over the first row (a section less the lead every row brings, the
+     notice included) and `timeline-end` under the last row (a section less
+     its row inset); `turn` and `lead` stay inside the components.
+
+     Consumers: MessageItem, SystemMessage, MessageListDateDivider,
+     MessageListNotice, ThreadPanelReplySummary, and the product's list top
+     and end. */
+  --spacing-timeline-message: var(--timeline-gap-message);
+  --spacing-timeline-section: var(--timeline-gap-section);
+  --spacing-timeline-row: var(--timeline-row-inset);
+  --spacing-timeline-turn: calc(var(--timeline-gap-message) - 2 * var(--timeline-row-inset));
+  --spacing-timeline-lead: calc(var(--timeline-gap-message) - var(--timeline-row-inset));
+  --spacing-timeline-end: calc(var(--timeline-gap-section) - var(--timeline-row-inset));
+  --spacing-timeline-start: calc(
+    var(--timeline-gap-section) - var(--timeline-gap-message) + var(--timeline-row-inset)
+  );
   /* ─── Option metric axis ────────────────────────────────────────────────────
      An option in a popup list (a Select, Combobox or ComboboxSelect option, a
      menu item) is as tall as its content, with the same space above and below
@@ -397,6 +435,12 @@
   --spacing-icon-inset: var(--icon-inset);
 
   /* Deprecated utility names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
+  --color-fill-pressed: var(--fill-medium);
+  --color-fill-frame-pressed: var(--fill-frame-medium);
+  --color-fill-row-hover: var(--fill-subtle);
+  --color-fill-row-open: var(--fill-subtle);
+  --color-fill-message-hover: var(--fill-subtle);
+  --color-sticker-pressed: var(--sticker-medium);
   --color-foreground-strong: var(--foreground);
   --color-foreground-icon: var(--foreground-muted);
   --color-foreground-placeholder: var(--foreground-hint);
@@ -542,28 +586,79 @@ textarea:-webkit-autofill:disabled {
   background-size: 16px 16px;
 }
 
-/* Raft Design System press feedback: hover and press lay one overlay over the
-   resting colour instead of swapping it, so a control keeps its identity.
-   Paper controls take the 8% ink wash (fill-pressed); colour stickers take
-   sticker-pressed (12% ink in both modes). */
-@utility press-overlay {
-  background-image: linear-gradient(var(--fill-pressed), var(--fill-pressed));
+/* Raft Design System hover and press: two tiers, each a translucent ink
+   layer over the resting colour instead of a swap, so a control keeps its
+   identity and the step looks the same on white, the yellowish sidebar and a
+   card (design/foundations/states.md#hover-and-press).
+   overlay-subtle: hover on large things people read (rows, messages, readable
+   cards) and a row whose menu is open.
+   overlay-medium: hover on small controls and press on everything; on a colour
+   sticker overlay-sticker-medium, on the frame overlay-frame-medium.
+   Use the bg-fill-* colours instead on a transparent control whose fill fades
+   in with transition-colors. */
+@utility overlay-subtle {
+  background-image: linear-gradient(var(--fill-subtle), var(--fill-subtle));
 }
 
-/* A row laid over a solid surface (a list row on a card, a file row) hovers
-   with the lighter row step, as an overlay too, so press (press-overlay)
-   replaces it instead of stacking on it. */
-@utility row-hover-overlay {
-  background-image: linear-gradient(var(--fill-row-hover), var(--fill-row-hover));
+@utility overlay-medium {
+  background-image: linear-gradient(var(--fill-medium), var(--fill-medium));
 }
 
-/* The same row with its menu open: fill-row-open, as an overlay. */
-@utility row-open-overlay {
-  background-image: linear-gradient(var(--fill-row-open), var(--fill-row-open));
+@utility overlay-sticker-medium {
+  background-image: linear-gradient(var(--sticker-medium), var(--sticker-medium));
+}
+
+@utility overlay-frame-medium {
+  background-image: linear-gradient(var(--fill-frame-medium), var(--fill-frame-medium));
+}
+
+/* Deprecated overlay names, kept until raft-ui 1.0 (see codemods/token-names.mjs). */
+@utility press-overlay {
+  background-image: linear-gradient(var(--fill-medium), var(--fill-medium));
+}
+
+/* A mark that leads a line of text: the icon or status light at the start of
+   a banner, a toast, a panel notice or a chip sits on the first line of its
+   text, centred on it, and stays there when the text wraps
+   (design/foundations/alignment.md#a-mark-that-leads-text). In Space
+   Grotesk the centre of the line box is the centre of the cap height (to
+   0.006em), so this is optical centring and needs no per-size nudge. Only
+   the place is shared: each component keeps its own icon size and gap.
+
+   `lead-icon` centres an icon of any size on the line its parent sets, by
+   moving it half a line down and back up by half its own height. Set the
+   type on the row that holds the mark and the text, as PanelNotice does:
+   the mark reads `1lh` from it.
+
+   `lead-dot` places a status light the same way, in a box one line tall,
+   and keeps it at its one size beside text, 9px with a 1.5px ink edge
+   (status.md#sizes). It is kept at 9px inside components (Banner,
+   PanelNotice, ToastIcon, Badge, PanelActivity); when placing Status
+   yourself, don't pass a size. */
+@utility lead-icon {
+  flex-shrink: 0;
+  align-self: start;
+  translate: 0 calc(0.5lh - 50%);
+}
+@utility lead-dot {
+  --lead-dot: 9px;
+  flex-shrink: 0;
+  width: var(--lead-dot);
+  height: var(--lead-dot);
+  border-width: 1.5px;
+  margin-block: calc((1lh - var(--lead-dot)) / 2);
 }
 
 @utility press-overlay-sticker {
-  background-image: linear-gradient(var(--sticker-pressed), var(--sticker-pressed));
+  background-image: linear-gradient(var(--sticker-medium), var(--sticker-medium));
+}
+
+@utility row-hover-overlay {
+  background-image: linear-gradient(var(--fill-subtle), var(--fill-subtle));
+}
+
+@utility row-open-overlay {
+  background-image: linear-gradient(var(--fill-subtle), var(--fill-subtle));
 }
 
 /* Space and rules between siblings: stack-y-* / stack-x-* and rule-y / rule-x