@botiverse/raft-ui 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,3 +1,86 @@
+## [0.20.0](https://github.com/botiverse/raft-design/compare/v0.19.0...v0.20.0) (2026-10-22)
+
+### Design System
+
+- **Hover and press**: hover and press are one translucent ink layer over the resting colour, never a fill swap, in two tiers sized by what is under the pointer. Subtle for rows, messages, readable cards and a row whose menu is open; medium for small controls and for pressing anything clickable. A colour sticker and the frame get their own medium alphas. Selected items and fields don't hover, a message has no press, and every hover sits under `(hover: hover)`. It applies to every row, card, button, badge, tab, segment, sidebar and rail item, table row, inbox item and menu. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: the same hover looked different on paper, the sidebar and a card, rows and messages used three different steps, and some clickable parts gave no feedback on press; one layer in two tiers reads the same everywhere.
+  - Affects: subtle `fill-subtle` 4% light / 3% dark; medium `fill-medium` 7.8% light / 6.5% dark (was 7.8%); `sticker-medium` 10% (was 12.2%); `fill-frame-medium` 10% light (was 12.2%) / 6% dark (was 7.8%); dark `brand-soft` 16% → 20%; colour `-hover` / `-active` pairs mix 10% ink (was 12%).
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+- **Inside a frame**: a control embedded in another component's frame (a field, the composer, a toolbar, a card or media corner) wears `radius-chip` (6px) and sits the same distance from every side of the frame and from its siblings; frames themselves don't change. It applies to ComboboxSelect, Combobox, InputGroup, the composer, the message hover and text-selection toolbars, the lightbox and multi-select bars, CodeBlock, media and file card actions, popover close, menus and SegmentedControl / ToggleGroup. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: embedded buttons at the free-standing 8px corner read nearly round at 20px, and their offsets differed per component; one corner and one even inset make them read as one kind of thing.
+  - Affects: new tokens `control-embedded-inset` 6px and `control-embedded-size` 20px desktop / 32px phone (utilities `embedded-inset`, `control-embedded`); insets 6px in a field, the composer and a corner, 4px in a floating toolbar and for a popup's highlight, 3px between segments.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/#inside-a-frame
+
+### Breaking Changes
+
+- **Dialog** `size`: `sm` is 400px (was 384) and `lg` is 640px (was 512); `md` 448 and `wide` 896 are unchanged. Sizes are chosen by content: `sm` for a decision, `md` for a small task, `lg` for content that needs width. ([#676](https://github.com/botiverse/raft-design/pull/676))
+  - Why: the steps between sizes were too small to mean anything, and a confirmation could be 384 or 400 wide depending on the component; now every confirmation is 400, the same as AlertDialog.
+  - Affects: `sm` `max-w-sm` (384px) → 400px; `lg` `max-w-lg` (512px) → 640px.
+  - Migrate: dialogs with `size="sm"` grow 16px and `size="lg"` 128px; check their content and pick the size by content. Set width with `size` only, not your own `max-w-*`.
+  - Docs: https://raft-design.botiverse.build/components/dialog/#variants
+- **Hover tokens**: renamed to their tier. The old names stay as deprecated aliases until 1.0, but they now resolve to the tier values, so some hovers change. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: names that said where a fill was used (row hover, message hover, row open, pressed) could not describe two tiers that apply everywhere.
+  - Affects: `fill-row-hover`, `fill-row-open`, `fill-message-hover` → `fill-subtle` (row open 5% → 4%, message hover 3% → 4%); `fill-pressed` → `fill-medium`; `fill-frame-pressed` → `fill-frame-medium`; `sticker-pressed` → `sticker-medium`; utilities `row-hover-overlay`, `row-open-overlay` → `overlay-subtle`, `press-overlay` → `overlay-medium`, `press-overlay-sticker` → `overlay-sticker-medium`. Overlays are registered with the `cn` helper as background images, so a later `hover:bg-none` or another tier replaces them.
+  - Migrate: run `node node_modules/@botiverse/raft-ui/codemods/token-names.mjs <paths>`; it renames classes, `var(--…)` and `var(--color-…)` forms. Then move readable cards that used `press-overlay` for hover to `overlay-subtle`. Tests that assert a token name in a class (for example `var(--fill-row-open)` on a message) look for the new name.
+  - Docs: https://raft-design.botiverse.build/foundations/color/#hover-overlays
+- **MessageItemToolbar** and **MessageTextSelectionToolbar**: 36px tall (was 32), buttons 4px from the frame and 4px apart (was 2px), at `radius-chip`. The hover toolbar rides 18px above the row (was 16). ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: at a 2px inset the buttons' hover fill nearly touched the frame; see Inside a frame above.
+  - Affects: toolbar height 32 → 36px; inset and gap 2 → 4px; the message header's default reserve `--mi-toolbar-reserve` 6.5rem → 7rem (three buttons).
+  - Migrate: if you set `--mi-toolbar-reserve` yourself, compute it as `1rem + 2rem × buttons` (was `1.25rem + 1.75rem × buttons`). Leave at least 18px above the first message of a scroll area and above a thread's root message.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **MessageMultiSelectToolbar**: 36px tall (was 48) with 28px buttons (was 32) 4px from the frame; on a touch screen each button takes a 44px tap. The buttons go in the new `MessageMultiSelectToolbarActions`. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: every floating toolbar is now 36px with 28px buttons; the touch hit area keeps the smaller buttons easy to tap.
+  - Affects: height 48 → 36px; buttons 32 → 28px; inset 8 / 10 → 4px; gap 6 → 4px.
+  - Migrate: wrap the toolbar's buttons in `MessageMultiSelectToolbarActions`, which owns their 4px gap and the touch hit areas; remove your own gap or padding there.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **ComboboxSelect**, **Combobox** and **InputGroup** chips and end buttons: chips and embedded buttons in a field are 20px on a desktop and 32px on a phone (chips were 28px, end buttons 32px), 6px from the field's edge and from each other, at `radius-chip`, so a field with chips stays 32 / 44px tall (it grew to 42). ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: 28px chips made a field with chips taller than one without, and the embedded buttons sat at different offsets per component.
+  - Affects: chips 28 → 20px desktop / 32px phone; chip remove 16 / 28px at `radius-sticker`; InputGroup end-addon Button 32 → 20 / 32px with a 16px icon; ComboboxSelect `sm` keeps 22px chips at 3px, `lg` uses 40px chips in a 52px field.
+  - Migrate: remove size, offset or radius overrides on chips and end-addon buttons in fields. In an InputGroup end addon, put a Kbd before the Button, so on a phone (Kbd hidden) the button is the last child and ends 6px from the edge.
+  - Docs: https://raft-design.botiverse.build/components/combobox-select/
+
+### Added
+
+- **CodeBlockPre**: renders the code's `pre`. While the code overflows it is a keyboard-reachable named region (`tabindex=0`, `role=region`, `aria-label` "Code" by default), so it can be scrolled from the keyboard; code that fits adds no Tab stop. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: a scrolling code block could not be reached from the keyboard in Safari.
+  - Docs: https://raft-design.botiverse.build/components/code-block/
+- **MessageMultiSelectToolbarActions**: the multi-select toolbar's actions at its end, 4px apart, with touch hit areas. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: see MessageMultiSelectToolbar above.
+  - Docs: https://raft-design.botiverse.build/components/message-item/
+- **Press feedback**: Badge, the mention sticker, InboxItem, Table rows, the system-message disclosure and the selected SidebarItem now press with the medium tier. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: anything clickable presses with the medium tier; these gave no feedback on press.
+  - Affects: solid Badge `sticker-medium`; soft and outline Badge, InboxItem, Table row, system-message disclosure `fill-medium`; selected SidebarItem `sticker-medium`.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+
+### Changed
+
+- **MessageItem**, **MessageAttachmentCard**, **MessageReplies**, **TaskCard** and menu-open rows: hover with the subtle tier. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: a message, a readable card and a row whose menu is open are large things people read; one subtle step keeps text contrast and never stacks with the menu-open fill.
+  - Affects: message hover 3% / 2.2% → 4% / 3%; menu-open row 5% / 4% → 4% / 3%; attachment card, replies bar and task card 7.8% → 4% / 3%. Press stays medium.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+- **SegmentedControl**, **ToggleGroup** and **Select**: a selected segment or toggle no longer darkens on hover and presses with `sticker-medium`; the Select trigger and the top-bar SearchTrigger don't hover, only press. SegmentedControl and ToggleGroup items are 3px apart (was 2). ([#681](https://github.com/botiverse/raft-design/pull/681), [#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: selected items and fields don't hover, like selected tabs and the active sidebar item.
+  - Affects: segment gap 2 → 3px.
+  - Docs: https://raft-design.botiverse.build/components/segmented-control/
+- **DropdownMenu**, **ContextMenu**, **Select**, **Combobox**, **ComboboxSelect**, the suggestion list and quick reactions: the highlighted item sits 4px inside the popup at `radius-chip`, and separators take 4px. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: see Inside a frame above.
+  - Affects: highlight inset 6px (quick reactions 8px) → 4px; highlight radius 8 → 6px; separator margins 6 → 4px.
+  - Docs: https://raft-design.botiverse.build/components/dropdown-menu/
+- **CodeBlock**: the copy and other actions sit 6px from the corner at `radius-chip`, and without a header they take a column of their own instead of covering the first line; the code scrolls beside them. With a header, the actions sit 6px from its end, centred in it, 4px apart. ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: on a phone the copy button covered the first line of code.
+  - Affects: action offset 9px (no header) / 5px (header) → 6px; radius 8 → 6px; a one-line block keeps 6px under the button.
+  - Docs: https://raft-design.botiverse.build/components/code-block/
+- **Composer**, **MessageActionCard**, **Popover** header close, **Lightbox** info bar, video preview, gallery and file card actions: embedded buttons at `radius-chip`, 6px from the frame's sides (4px in the lightbox bar, whose buttons are 28px with a 44px touch target). ([#682](https://github.com/botiverse/raft-design/pull/682))
+  - Why: see Inside a frame above.
+  - Affects: composer buttons 8 / 13px from the sides and 9px from the bottom → 6px; media and file card actions 9 / 7 / 5px → 6px; lightbox buttons 32 → 28px.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/#inside-a-frame
+
+### Fixed
+
+- **ComboboxSelect** and **FloatButton**: hover no longer sticks after a tap on a touch screen; their `:hover` rules are under `(hover: hover)`, and the ghost FloatButton hovers and presses with the overlay instead of a fill swap. ([#681](https://github.com/botiverse/raft-design/pull/681))
+  - Why: ungated `:hover` rules stayed applied after a tap.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
+
 ## [0.19.0](https://github.com/botiverse/raft-design/compare/v0.18.0...v0.19.0) (2026-10-21)
 
 ### Design System
@@ -165,7 +248,7 @@
 - **Row hover**: rows hover with their own lightest visible step, not the press overlay; a row whose menu is open is marked with one slightly stronger step. ([#641](https://github.com/botiverse/raft-design/pull/641), [#643](https://github.com/botiverse/raft-design/pull/643))
   - Why: the press fill made hovered messages and list rows read as grey and heavy, and on a phone a long-press menu left no mark of which row it belonged to.
   - Affects: hover `fill-pressed` 7.8% → `fill-row-hover` 4% (dark 3%), messages `fill-message-hover` 3% (dark 2.2%), menu-open `fill-row-open` 5% (dark 4%). Press and selection are unchanged; hover stays lighter than selection.
-  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
 
 ### Added
 
@@ -179,11 +262,11 @@
 - **Message, SidebarItem, List, Inbox, Search, Table and File rows**: hover with `fill-row-hover` (messages with `fill-message-hover`) instead of `fill-pressed`. ([#641](https://github.com/botiverse/raft-design/pull/641))
   - Why: see Row hover above.
   - Affects: hover background 7.8% → 4% (messages 3%).
-  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
 - **Rows with a menu open** (right-click, ⋯ menu, phone long-press): take `fill-row-open` while the menu is open; selection still wins. **Comment cards** hover with `fill-row-hover`. ([#643](https://github.com/botiverse/raft-design/pull/643))
   - Why: the open menu needs one marker of which row it belongs to, including on a phone where there is no hover.
   - Affects: menu-open background `fill-row-open` 5% / 4%.
-  - Docs: https://raft-design.botiverse.build/foundations/states/#row-hover
+  - Docs: https://raft-design.botiverse.build/foundations/states/#hover-and-press
 - **Select, Combobox**: `collisionPadding` defaults to 8px. ([#642](https://github.com/botiverse/raft-design/pull/642))
   - Why: popups touched the screen edge on phones.
   - Affects: popup inset from the screen edge, 8px.

package/codemods/token-names.mjs

@@ -32,6 +32,12 @@ export const TOKEN_RENAMES = {
   "theme-shadow-sticker": "elevation-sticker",
   "theme-focus-ring": "focus-ring",
   "soft-signal": "palette-yellow",
+  "fill-pressed": "fill-medium",
+  "fill-frame-pressed": "fill-frame-medium",
+  "fill-row-hover": "fill-subtle",
+  "fill-row-open": "fill-subtle",
+  "fill-message-hover": "fill-subtle",
+  "sticker-pressed": "sticker-medium",
 };
 
 /** Families renamed with every step: `primary-soft` -> `brand-soft`. */
@@ -61,6 +67,10 @@ export const UTILITY_RENAMES = {
   "shadow-raft-xl": "shadow-float",
   "shadow-raft-sticker": "shadow-sticker",
   "shadow-raft-focus": "shadow-focus",
+  "press-overlay": "overlay-medium",
+  "press-overlay-sticker": "overlay-sticker-medium",
+  "row-hover-overlay": "overlay-subtle",
+  "row-open-overlay": "overlay-subtle",
 };
 
 const COLOR_UTILITY =
@@ -83,6 +93,8 @@ function rules() {
   for (const [from, to] of tokens) {
     list.push([new RegExp(`(?<![\\w-])(${COLOR_UTILITY})-${escape(from)}${END}`, "g"), `$1-${to}`]);
     list.push([new RegExp(`${VAR}${escape(from)}${REF_END}`, "g"), `--${to}`]);
+    // The Tailwind theme variable of the same token: `var(--color-fill-pressed)`.
+    list.push([new RegExp(`${VAR}color-${escape(from)}${REF_END}`, "g"), `--color-${to}`]);
   }
   for (const [from, to] of Object.entries(FAMILY_RENAMES)) {
     list.push([
@@ -90,6 +102,10 @@ function rules() {
       `$1-${to}$2`,
     ]);
     list.push([new RegExp(`${VAR}${from}((?:-[a-z0-9]+)*)${REF_END}`, "g"), `--${to}$1`]);
+    list.push([
+      new RegExp(`${VAR}color-${from}((?:-[a-z0-9]+)*)${REF_END}`, "g"),
+      `--color-${to}$1`,
+    ]);
   }
   for (const [from, to] of Object.entries(PALETTE_COLORS)) {
     list.push([

package/dist/cn.mjs

@@ -7,6 +7,8 @@ const twMerge = extendTailwindMerge({ extend: {
 		"control-cta",
 		"control-icon",
 		"control-hit",
+		"control-embedded",
+		"embedded-inset",
 		"option",
 		"option-inset",
 		"icon-inset"
@@ -50,7 +52,19 @@ const twMerge = extendTailwindMerge({ extend: {
 			"mono-code",
 			"control"
 		] }],
-		"font-weight": [{ font: ["field", "card-title"] }]
+		"font-weight": [{ font: ["field", "card-title"] }],
+		"bg-image": [
+			{ overlay: [
+				"subtle",
+				"medium",
+				"sticker-medium",
+				"frame-medium"
+			] },
+			"press-overlay",
+			"press-overlay-sticker",
+			"row-hover-overlay",
+			"row-open-overlay"
+		]
 	}
 } });
 function cn(...inputs) {

package/dist/components/combobox-select/combobox-select.css

@@ -3,16 +3,24 @@
   min-width: 0;
   position: relative;
 }
+/* The chips, the clear button and the toggle are embedded in the field: they
+   sit --control-embedded-inset inside its outer edge and as far apart, and
+   are as tall as the field less that inset on both sides, so the field keeps
+   its height with chips in it. They wear the chip radius
+   (design/foundations/shape.md#inside-a-frame). Across the field the inset is
+   counted over the 1px Chromium draws the 1.5px border at (WebKit draws
+   1.5px: half a pixel more); down it the chips are centred in the field's
+   height, which holds on both. */
 .r-combobox-select__control {
   box-sizing: border-box;
   min-width: 0;
   min-height: var(--control-height);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0 6px 0 12px;
+  gap: var(--control-embedded-inset);
+  padding: 0 calc(var(--control-embedded-inset) - 1px) 0 12px;
   border: 1.5px solid var(--line-field);
-  border-radius: 8px;
+  border-radius: var(--radius-control);
   outline: 0;
   background: var(--layer-card);
   color: var(--foreground);
@@ -38,30 +46,30 @@
   color: var(--foreground-hint);
 }
 .r-combobox-select__chips {
-  min-height: 28px;
+  min-height: var(--control-embedded-size);
   min-width: 0;
-  margin-inline-start: -6px;
-  padding: 6px 0;
+  margin-inline-start: calc(var(--control-embedded-inset) - 13px);
+  padding: calc(var(--control-embedded-inset) - 1.5px) 0;
   display: flex;
   flex: 1;
   flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
+  gap: var(--control-embedded-inset);
   border: 0;
 }
 .r-combobox-select__chips .r-combobox-select__input {
-  min-height: 28px;
+  height: var(--control-embedded-size);
   padding: 0 4px;
 }
 .r-combobox-select__chip {
   max-width: 100%;
-  min-height: 28px;
+  height: var(--control-embedded-size);
   padding: 0 2px 0 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: var(--radius-chip);
   background: var(--fill-muted);
   color: var(--foreground);
   font-size: var(--text-footnote);
@@ -89,7 +97,7 @@
 .r-combobox-select__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: var(--control-embedded-inset);
   flex: 0 0 auto;
 }
 .r-combobox-select__action,
@@ -107,15 +115,15 @@
     background-color 150ms ease;
 }
 .r-combobox-select__remove {
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
+  width: calc(var(--control-embedded-size) - 4px);
+  height: calc(var(--control-embedded-size) - 4px);
+  border-radius: var(--radius-sticker);
   color: var(--foreground-hint);
 }
 .r-combobox-select__action {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
+  width: var(--control-embedded-size);
+  height: var(--control-embedded-size);
+  border-radius: var(--radius-chip);
   color: var(--foreground-hint);
 }
 .r-combobox-select__action > svg,
@@ -130,15 +138,28 @@
   width: 0.875rem;
   height: 0.875rem;
 }
-.r-combobox-select__action:hover,
-.r-combobox-select__remove:hover {
-  background: var(--fill-pressed);
+/* Hover only where there is a pointer that hovers: on a touch screen a
+   :hover would stay on the last button tapped. */
+@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);
 }
+/* The chip clips anything outside it, so the remove button's ring is drawn
+   inside, after keyboard navigation only (styles.css, the keyboard variant). */
+.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;
@@ -152,7 +173,7 @@
   max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
   overflow: hidden;
   border: 0;
-  border-radius: 10px;
+  border-radius: var(--radius-container);
   background: var(--layer-popover);
   color: var(--foreground);
   box-shadow:
@@ -165,8 +186,8 @@
   max-height: var(--combobox-select-list-max-height, 16rem);
   overflow-y: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: 6px;
-  padding: 6px;
+  scroll-padding-block: 4px;
+  padding: 4px;
 }
 .r-combobox-select__option {
   box-sizing: border-box;
@@ -180,7 +201,7 @@
   justify-content: space-between;
   gap: 10px;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius-chip);
   cursor: default;
   user-select: none;
   color: var(--foreground);
@@ -192,7 +213,12 @@
     background-color 120ms ease,
     color 120ms ease;
 }
-.r-combobox-select__option:hover,
+@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);
@@ -250,23 +276,15 @@
   animation: r-combobox-select-spin 700ms linear infinite;
 }
 .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"] {
   border-color: var(--danger-strong);

package/dist/components/float-button/float-button.css

@@ -20,7 +20,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);
@@ -87,7 +87,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);
   }
@@ -95,7 +95,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);
   }
@@ -103,15 +103,15 @@
     --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);
   }
   &.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);
   }
 }
 
@@ -159,11 +159,15 @@
     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);
+  /* Hover only where there is a pointer that hovers: on a touch screen a
+     :hover would stay on the button after the tap. */
+  @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) {
@@ -179,7 +183,12 @@
 
   /* Press feedback lays one overlay over the resting fill instead of
      swapping it. */
-  &: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));
   }