@botiverse/raft-ui 0.19.0 → 0.20.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,15 @@
   --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);
   /* ─── 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 +409,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 +560,47 @@ 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));
 }
 
 @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

package/dist/tokens.json

@@ -1492,44 +1492,8 @@
         }
       }
     },
-    "frame-pressed": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.1813, 0.005, 17.62],
-        "alpha": 0.122
-      },
-      "$extensions": {
-        "build.botiverse.raft": {
-          "modes": {
-            "dark": {
-              "colorSpace": "oklch",
-              "components": [0.9843, 0.004, 106.47],
-              "alpha": 0.078
-            }
-          }
-        }
-      }
-    },
-    "pressed": {
-      "$value": {
-        "colorSpace": "oklch",
-        "components": [0.1813, 0.005, 17.62],
-        "alpha": 0.078
-      },
-      "$extensions": {
-        "build.botiverse.raft": {
-          "modes": {
-            "dark": {
-              "colorSpace": "oklch",
-              "components": [0.9843, 0.004, 106.47],
-              "alpha": 0.078
-            }
-          }
-        }
-      }
-    },
-    "row-hover": {
-      "$description": "Hover on a whole row (sidebar, list, inbox, search result, table, file row): one perceptible step (OKLab dE about 2.8 in both modes), below every selection tint, so text keeps its contrast.",
+    "subtle": {
+      "$description": "Hover tier subtle (light): hover on large things people read, a row, a message, a readable card, and a row whose menu is open. About 2.5 to 3 OKLab dE in both modes, on paper, the sidebar and cards alike, under every selection tint, so text keeps its contrast.",
       "$value": {
         "colorSpace": "oklch",
         "components": [0.1813, 0.005, 17.62],
@@ -1547,12 +1511,12 @@
         }
       }
     },
-    "message-hover": {
-      "$description": "Hover on a message: the lightest perceptible step (OKLab dE about 2.1 in both modes), because a message is a large block someone reads with the pointer resting on it.",
+    "medium": {
+      "$description": "Hover tier medium: hover on small controls (buttons, icon buttons, chips, tabs, segment items) and press on everything, on paper-coloured surfaces. About 5.5 to 6.5 OKLab dE; dark is lighter than light because the same ink alpha shows more on a dark surface.",
       "$value": {
         "colorSpace": "oklch",
         "components": [0.1813, 0.005, 17.62],
-        "alpha": 0.03
+        "alpha": 0.078
       },
       "$extensions": {
         "build.botiverse.raft": {
@@ -1560,18 +1524,18 @@
             "dark": {
               "colorSpace": "oklch",
               "components": [0.9843, 0.004, 106.47],
-              "alpha": 0.022
+              "alpha": 0.065
             }
           }
         }
       }
     },
-    "row-open": {
-      "$description": "Any row with its menu open (right-click, its menu button, press and hold): one step over a hover (OKLab dE 3.4 to 4.3 on every row surface), because on a phone, which has no hover, it is the only sign of which row the menu acts on. Still under info-soft and brand-soft on every surface.",
+    "frame-medium": {
+      "$description": "Hover tier medium on the frame (rail items, on-frame buttons, the workspace button): hover and press. Its own alphas because ink shows differently on the yellow and on the near-black frame: 10% on the yellow and 6% on the dark frame land on the medium step, about 6 OKLab dE.",
       "$value": {
         "colorSpace": "oklch",
         "components": [0.1813, 0.005, 17.62],
-        "alpha": 0.05
+        "alpha": 0.1
       },
       "$extensions": {
         "build.botiverse.raft": {
@@ -1579,7 +1543,7 @@
             "dark": {
               "colorSpace": "oklch",
               "components": [0.9843, 0.004, 106.47],
-              "alpha": 0.04
+              "alpha": 0.06
             }
           }
         }
@@ -1907,7 +1871,7 @@
             "dark": {
               "colorSpace": "oklch",
               "components": [0.5501, 0.0999, 91.5],
-              "alpha": 0.161
+              "alpha": 0.2
             }
           }
         }
@@ -1923,8 +1887,8 @@
       }
     },
     "hover": {
-      "$value": "color-mix(in srgb, var(--brand-400) 88%, var(--sticker-ink))",
-      "$description": "Pressing a sticker lays sticker-pressed (12% ink) over its colour.",
+      "$value": "color-mix(in srgb, var(--brand-400) 90%, var(--sticker-ink))",
+      "$description": "Hovering or pressing a sticker lays sticker-medium (10% ink) over its colour.",
       "$extensions": {
         "build.botiverse.raft": {
           "css": true
@@ -2007,7 +1971,7 @@
       }
     },
     "hover": {
-      "$value": "color-mix(in srgb, var(--attention-400) 88%, var(--sticker-ink))",
+      "$value": "color-mix(in srgb, var(--attention-400) 90%, var(--sticker-ink))",
       "$extensions": {
         "build.botiverse.raft": {
           "css": true
@@ -2072,7 +2036,7 @@
       }
     },
     "hover": {
-      "$value": "color-mix(in srgb, var(--info) 88%, var(--sticker-ink))",
+      "$value": "color-mix(in srgb, var(--info) 90%, var(--sticker-ink))",
       "$extensions": {
         "build.botiverse.raft": {
           "css": true
@@ -2195,7 +2159,7 @@
       }
     },
     "hover": {
-      "$value": "color-mix(in srgb, var(--warning) 88%, var(--sticker-ink))",
+      "$value": "color-mix(in srgb, var(--warning) 90%, var(--sticker-ink))",
       "$extensions": {
         "build.botiverse.raft": {
           "css": true
@@ -2266,7 +2230,7 @@
       }
     },
     "hover": {
-      "$value": "color-mix(in srgb, var(--danger) 88%, var(--sticker-ink))",
+      "$value": "color-mix(in srgb, var(--danger) 90%, var(--sticker-ink))",
       "$extensions": {
         "build.botiverse.raft": {
           "css": true
@@ -2698,6 +2662,28 @@
           }
         }
       }
+    },
+    "embedded-inset": {
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
+      "$description": "How far a chip or a button embedded in a field, the composer or a corner sits inside its frame's outer edge, and from its sibling."
+    },
+    "embedded-size": {
+      "$value": {
+        "value": 32,
+        "unit": "px"
+      },
+      "$description": "A chip or a button embedded in a field: the control height less the embedded inset above and below, so the field keeps its height.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 20,
+            "unit": "px"
+          }
+        }
+      }
     }
   },
   "sticker": {
@@ -2732,11 +2718,12 @@
         }
       }
     },
-    "pressed": {
+    "medium": {
+      "$description": "Hover tier medium on a colour sticker (primary, warning and danger buttons, colour badges, the selected segment on press): hover and press, 10% ink in both modes.",
       "$value": {
         "colorSpace": "oklch",
         "components": [0.1813, 0.005, 17.62],
-        "alpha": 0.122
+        "alpha": 0.1
       }
     }
   },
@@ -2775,6 +2762,30 @@
   },
   "deprecated": {
     "$description": "Former names, kept as aliases until raft-ui 1.0. Keys are the CSS custom property names.",
+    "fill-pressed": {
+      "$value": "{fill.medium}",
+      "$deprecated": "Use {fill.medium}."
+    },
+    "fill-frame-pressed": {
+      "$value": "{fill.frame-medium}",
+      "$deprecated": "Use {fill.frame-medium}."
+    },
+    "fill-row-hover": {
+      "$value": "{fill.subtle}",
+      "$deprecated": "Use {fill.subtle}."
+    },
+    "fill-row-open": {
+      "$value": "{fill.subtle}",
+      "$deprecated": "Use {fill.subtle}."
+    },
+    "fill-message-hover": {
+      "$value": "{fill.subtle}",
+      "$deprecated": "Use {fill.subtle}."
+    },
+    "sticker-pressed": {
+      "$value": "{sticker.medium}",
+      "$deprecated": "Use {sticker.medium}."
+    },
     "layer-panel": {
       "$value": "{layer.canvas}",
       "$deprecated": "Use {layer.canvas}."