@botiverse/raft-ui 0.19.0 → 0.21.0

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,52 @@
           }
         }
       }
+    },
+    "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"
+          }
+        }
+      }
+    }
+  },
+  "timeline": {
+    "$type": "dimension",
+    "gap-message": {
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      },
+      "$description": "The message step of a timeline: from the last line of one turn to the first line of the next (a sender line, an event line). Every row keeps the row inset above and below its text; the first row of a turn adds the rest above it."
+    },
+    "gap-section": {
+      "$value": {
+        "value": 24,
+        "unit": "px"
+      },
+      "$description": "The section step of a timeline, one step wider than the message step: either side of a date line, from the top of the list to the first line, and from the last line to the composer, so a boundary reads as one and the last message never sits on the composer."
+    },
+    "row-inset": {
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
+      "$description": "How far a timeline row's hover and selected highlight reaches above and below its text. Two rows of one turn sit two insets apart."
     }
   },
   "sticker": {
@@ -2732,11 +2742,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 +2786,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}."