feat: implement relative color syntax

Author: gkurt

.tegami/2026-09-14-relative-color-syntax.md

@@ -0,0 +1,39 @@
+---
+packages:
+  npm:@reactunity/renderer:
+    type: minor
+  upm:com.reactunity.core:
+    type: minor
+---
+
+### Relative color syntax
+
+Every color function takes a `from <color>` origin, which is CSS Color 5's relative color syntax:
+`rgb()`, `hsl()`, `hsv()`, `lab()`, `lch()`, `oklab()` and `oklch()`. The origin is converted into the
+function's own space and its channels become keywords the channel slots can use, on their own or inside
+`calc()` — so `rgb(from var(--brand) r g b / 50%)` is a brand color at half opacity without repeating it,
+and `oklch(from currentcolor calc(l * 0.8) c h)` is a hover shade of whatever the element's own color
+turns out to be. A keyword may appear in any slot, so `rgb(from red b g r)` is blue.
+
+Each keyword carries the range CSS gives it — `r` is `0`–`255`, `hsl()`'s `s` is `0`–`100`, `oklch()`'s
+`l` is `0`–`1`, a hue is degrees, `alpha` is `0`–`1` — so a literal mixes with one exactly as it would in
+a browser. An omitted alpha is the origin's own rather than `1`, so `rgb(from <color> r g b)` is that
+color unchanged.
+
+The origin stays lazy, so it may be a `var()`, `currentColor`, a `color-mix()` or another relative color,
+and one parsed rule resolves against each element it lands on. A literal origin is decomposed while
+parsing instead, so the whole function still folds to a constant.
+
+Two things the color functions have always got wrong were in the way, and are fixed:
+
+`hsl()` and `hsv()` read saturation and lightness on CSS's `0`–`100` scale rather than `0`–`1`, so the
+`%` may be left off as every framework that emits `hsl(152 37 59)` expects. Written with percentages
+they are unchanged; written as bare fractions — `hsl(152, 0.37, 0.59)`, which was the only spelling that
+used to work — they now mean what CSS says they mean, which is very nearly black.
+
+Out-of-range components are clamped rather than carried through the conversion, which is what CSS
+Color 4 asks of a specified color and what this arithmetic reaches constantly: `rgb(300 0 0)` is red,
+`hsl(0 150 50)` is a saturation of `100%`, and `calc(l * 4)` is a lightness of `1` rather than a color
+that paints nothing. A saturation past `100%` used to come out of the conversion as a different hue
+entirely. Alpha is clamped everywhere, hue wraps, and a channel written as `none` is `0` in `rgb()`,
+`hsl()` and `hsv()` as it already was in the Lab family.

.tegami/2026-09-14-text-padding.md

@@ -0,0 +1,14 @@
+---
+packages:
+  upm:com.reactunity.core:
+    type: patch
+---
+
+### Padding on a text or icon element moves the glyphs
+
+The glyphs of a `text` or an `icon` live on a child that stretches over the whole element, and nothing
+inset that child -- so `padding` grew the box and the line stayed where it was, hard against the border
+box's own edge, with the whole padding showing as space on the far side of it. A padded badge looked
+left-aligned for that reason, and a wrapping line broke against the padded width rather than the width
+it was measured at. The child is now inset by the element's padding and border, which is the content box
+CSS lays text out in.

docs/src/content/reference/css/background-color.mdx

@@ -9,12 +9,13 @@ Sets the background color of a component.
 - Known color name: `red`, `limegreen`, `transparent`
 - Hex color: `#a5a5a5`, `#777`, `#00ff0033`
 - RGBA color: `rgba(23, 16, 168, 0.3)`, `rgb(23 16 168 / 30%)`
-- HSL color: `hsl(152, 37%, 59%)`, `hsla(152 37% 59% / 0.75)`
+- HSL color: `hsl(152, 37%, 59%)`, `hsla(152 37% 59% / 0.75)`, `hsl(152 37 59)`
 - OKLCh color: `oklch(63.7% 0.237 25.331)`, `oklch(0.5 0.2 30deg / 50%)`
 - OKLab color: `oklab(0.5 0.1 -0.1)`
 - LCh color: `lch(54.29% 106.84 40.86)`, `lch(70 30 0.5turn)`
 - Lab color: `lab(50 40 -30)`, `lab(50 40 -30 / 50%)`
 - Mixed color: `color-mix(in oklab, red 30%, blue)` — see below
+- Relative color: `rgb(from var(--brand) r g b / 50%)` — see below
 - CSS keywords: `inherit`
 
 Every component of these four is a number or a percentage, and one written as `none` is `0`. What
@@ -28,7 +29,10 @@ Every component of these four is a number or a percentage, and one written as `n
 | `lab()`    | `0`–`100`  | `125`                       |
 
 So `oklch(0.637 …)` and `oklch(63.7% …)` are the same lightness, while in `lch()` both `54.29` and
-`54.29%` mean `54.29`. Hue takes any angle unit.
+`54.29%` mean `54.29`. In `hsl()` and `hsv()` saturation and lightness run `0`–`100`, so the `%` may
+be left off: `hsl(152 37 59)` is `hsl(152 37% 59%)`. Hue takes any angle unit and wraps, so `512deg`
+is `152deg`. A component outside its range is clamped rather than making the declaration invalid, so
+`rgb(300 0 0)` is red and `hsl(0 150 50)` is a saturation of `100%`.
 
 `color-mix()` interpolates two colors in `srgb`, `srgb-linear`, `hsl`, `lab`, `lch`, `oklab` or
 `oklch`. Each percentage is optional and may be written on either side of its color; giving one
@@ -37,6 +41,34 @@ is premultiplied, so mixing with `transparent` fades the color instead of darken
 spaces — `hsl`, `lch` and `oklch` — the hue may carry `shorter hue`, `longer hue`, `increasing hue`
 or `decreasing hue`, defaulting to `shorter`.
 
+### Relative colors {/*relative-colors*/}
+
+Every color function above also takes a `from <color>` origin, which is CSS Color 5's relative color
+syntax. The origin is converted into the function's own space, and each of its channels becomes a
+keyword the channel slots can use — on its own, or inside `calc()`:
+
+```css
+.button {
+  /* A hover shade of whatever the button's own color turns out to be */
+  background-color: oklch(from var(--brand) calc(l * 0.8) c h);
+  /* The same color at half opacity, without repeating it */
+  border-color: rgb(from var(--brand) r g b / 50%);
+  /* The complement */
+  outline-color: hsl(from var(--brand) calc(h + 180) s l);
+}
+```
+
+The keywords are `r g b` in `rgb()`, `h s l` in `hsl()`, `h s v` in `hsv()`, `l a b` in `lab()` and
+`oklab()`, `l c h` in `lch()` and `oklch()`, and `alpha` in all of them. Any of them may appear in
+any slot, so `rgb(from red b g r)` is blue. Each is worth what the slot would make of that number,
+so `r` is `0`–`255`, `hsl()`'s `s` is `0`–`100`, `oklch()`'s `l` is `0`–`1`, a hue is degrees and
+`alpha` is `0`–`1` — the ranges listed above.
+
+An omitted alpha is the origin's own rather than `1`, so `rgb(from <color> r g b)` is that color
+unchanged. The origin may be any color, including `currentColor`, a `var()`, a `color-mix()` or
+another relative color; one that is not a color makes the declaration invalid. Only the
+space-separated form is relative — `rgb(from red, r, g, b)` is not.
+
 A color outside the sRGB gamut is clamped per channel, which shifts the hue of a very saturated
 color. Naming an interpolation space that is not in the list above, such as `display-p3` or
 `rec2020`, makes the declaration invalid rather than silently mixing in a different space.

kitchen-sink/Assets/Logs.meta

@@ -616,66 +616,92 @@
 }
 
 /* --- Rarity ------------------------------------------------------------------------------------
-   One class per tier, since the border, the glow and the corner wedge all move together. */
+   A tier is one colour and four numbers. The ring, the glow and the hover lift all read that colour
+   through `rgb(from ...)` and `hsl(from ...)`, so nothing spells the same three channels out four
+   times over and a new tier is a handful of custom properties rather than a rule of its own. */
 
 .rarity {
+  --tier: #94a3b8;
+  --ring: 0.45;
+  --halo: 0;
+  --reach: 0px;
+  --spread: -4px;
+
   background-image: linear-gradient(160deg, rgba(30, 41, 59, 0.9), rgba(2, 6, 23, 0.92));
+  box-shadow:
+    0 0 0 1px rgb(from var(--tier) r g b / var(--ring)) inset,
+    0 0 var(--reach) var(--spread) rgb(from var(--tier) r g b / var(--halo));
   transition:
     box-shadow 160ms ease-out,
     scale 140ms ease-out;
 }
 
+/* Lightening the tier is the one thing an alpha could not do: a translucent ring picks up the slot
+   behind it, where `l + 14%` is the same hue actually brighter. The glow keeps the tier's own step,
+   so a common slot answers the pointer without lighting up like a legendary one. */
 .rarity:hover {
   scale: 1.08;
+  box-shadow:
+    0 0 0 1px hsl(from var(--tier) h s calc(l + 14%)) inset,
+    0 0 calc(var(--reach) + 8px) var(--spread) rgb(from var(--tier) r g b / calc(var(--halo) + 0.1));
 }
 
 .rarityCommon {
-  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45) inset;
+  --tier: #94a3b8;
 }
 
 .rarityUncommon {
-  box-shadow:
-    0 0 0 1px rgba(74, 222, 128, 0.6) inset,
-    0 0 10px -4px rgba(74, 222, 128, 0.8);
+  --tier: #4ade80;
+  --ring: 0.6;
+  --halo: 0.8;
+  --reach: 10px;
 }
 
 .rarityRare {
-  box-shadow:
-    0 0 0 1px rgba(56, 189, 248, 0.7) inset,
-    0 0 12px -4px rgba(56, 189, 248, 0.9);
+  --tier: #38bdf8;
+  --ring: 0.7;
+  --halo: 0.9;
+  --reach: 12px;
 }
 
 .rarityEpic {
-  box-shadow:
-    0 0 0 1px rgba(192, 132, 252, 0.8) inset,
-    0 0 14px -3px rgba(192, 132, 252, 0.9);
+  --tier: #c084fc;
+  --ring: 0.8;
+  --halo: 0.9;
+  --reach: 14px;
+  --spread: -3px;
 }
 
 .rarityLegendary {
-  box-shadow:
-    0 0 0 1px rgba(251, 191, 36, 0.85) inset,
-    0 0 16px -2px rgba(251, 191, 36, 0.9);
+  --tier: #fbbf24;
+  --ring: 0.85;
+  --halo: 0.9;
+  --reach: 16px;
+  --spread: -2px;
 }
 
 /* The only tier that moves on its own, because there is one of it. */
 .rarityMythic {
-  box-shadow:
-    0 0 0 1px rgba(251, 113, 133, 0.9) inset,
-    0 0 18px -2px rgba(244, 63, 94, 0.95);
+  --tier: #fb7185;
+  --ring: 0.9;
+  --halo: 0.95;
+  --reach: 18px;
+  --spread: -2px;
+
   animation: mythicPulse 2.4s ease-in-out infinite alternate;
 }
 
 @keyframes mythicPulse {
   from {
     box-shadow:
-      0 0 0 1px rgba(251, 113, 133, 0.9) inset,
-      0 0 10px -4px rgba(244, 63, 94, 0.7);
+      0 0 0 1px rgb(from var(--tier) r g b / 0.9) inset,
+      0 0 10px -4px rgb(from var(--tier) r g b / 0.7);
   }
 
   to {
     box-shadow:
-      0 0 0 1px rgba(253, 164, 175, 1) inset,
-      0 0 22px 0 rgba(244, 63, 94, 1);
+      0 0 0 1px hsl(from var(--tier) h s calc(l + 10%)) inset,
+      0 0 22px 0 rgb(from var(--tier) r g b / 1);
   }
 }