@splendidlabz/styles 4.9.0 → 4.11.0

package/src/effects/testgb.css

@@ -0,0 +1,372 @@
+/*
+ * testgb — minimal empirical tests for gradient transition ergonomics.
+ *
+ * Three isolated cases. Hover each box to trigger the transition.
+ * Watch for: smooth interpolation vs. discrete snap.
+ *
+ * Test 1: Registered <color> embedded inside a freeform stops string.
+ *         → Does the gradient redraw smoothly when registered colors
+ *           interpolate, even when concatenated into --stops?
+ *
+ * Test 2: color-mix() driven by a registered <number> alpha multiplier.
+ *         → Does a single scalar control fade the whole ring smoothly?
+ *
+ * Test 3: Registered <length> animating a radial size.
+ *         → Does geometry interpolate smoothly inside the gradient?
+ *           (circle in radial-gradient takes <length> only, not %.)
+ *
+ * Test 4: Registered <color> → <color> (not alpha) inside freeform stops.
+ *         → Does an arbitrary color shift interpolate, not just opacity?
+ *
+ * Test 5: Registered <percentage> animating a stop position.
+ *         → Can the stop % itself transition?
+ *
+ * Test 6: Registered <color> where BOTH hue and alpha change at once.
+ *         → e.g. transparent red → opaque blue in one shot.
+ *
+ * Mark up:
+ *   <div class="testgb testgb-1">alpha stops</div>
+ *   <div class="testgb testgb-2">alpha mix</div>
+ *   <div class="testgb testgb-3">size</div>
+ *   <div class="testgb testgb-4">color → color</div>
+ *   <div class="testgb testgb-5">stop position</div>
+ *   <div class="testgb testgb-6">color + alpha</div>
+ */
+
+@property --testgb-c1 {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgb(255 0 0 / 0%);
+}
+
+@property --testgb-c2 {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgb(0 0 255 / 0%);
+}
+
+@property --testgb-alpha {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --testgb-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 20px;
+}
+
+@property --testgb-c3 {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(70% 0.2 25deg);
+}
+
+@property --testgb-c4 {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(70% 0.2 280deg);
+}
+
+@property --testgb-pos {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 20%;
+}
+
+@property --testgb-c5 {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgb(255 0 0 / 0%);
+}
+
+@utility testgb {
+  display: inline-grid;
+  place-items: center;
+  width: 12rem;
+  height: 8rem;
+  border-radius: 0.75rem;
+  font: 600 0.875rem system-ui;
+  color: white;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+}
+
+/* ─── Test 1: registered colors inside a freeform stops list ─────────── */
+@utility testgb-1 {
+  --testgb-stops: var(--testgb-c1) 0%, var(--testgb-c2) 100%;
+  background: linear-gradient(to right, var(--testgb-stops));
+  transition:
+    --testgb-c1 600ms ease,
+    --testgb-c2 600ms ease;
+
+  &:hover {
+    --testgb-c1: rgb(255 0 0 / 100%);
+    --testgb-c2: rgb(0 0 255 / 100%);
+  }
+}
+
+/* ─── Test 2: color-mix alpha multiplier (single knob) ───────────────── */
+@utility testgb-2 {
+  --testgb-mix-1: color-mix(
+    in oklch,
+    oklch(70% 0.2 25deg) calc(var(--testgb-alpha) * 100%),
+    transparent
+  );
+  --testgb-mix-2: color-mix(
+    in oklch,
+    oklch(70% 0.2 280deg) calc(var(--testgb-alpha) * 100%),
+    transparent
+  );
+  background: linear-gradient(
+    to right,
+    var(--testgb-mix-1),
+    var(--testgb-mix-2)
+  );
+  transition: --testgb-alpha 600ms ease;
+
+  &:hover {
+    --testgb-alpha: 1;
+  }
+}
+
+/* ─── Test 3: registered length animating gradient geometry ──────────── */
+@utility testgb-3 {
+  background: radial-gradient(
+    circle var(--testgb-size) at center,
+    oklch(70% 0.2 140deg) 0%,
+    transparent 100%
+  );
+  transition: --testgb-size 600ms ease;
+
+  &:hover {
+    --testgb-size: 150px;
+  }
+}
+
+/* ─── Test 4: color → color (not alpha) inside freeform stops ────────── */
+@utility testgb-4 {
+  --testgb-stops-2: var(--testgb-c3) 0%, var(--testgb-c4) 100%;
+  background: linear-gradient(to right, var(--testgb-stops-2));
+  transition:
+    --testgb-c3 600ms ease,
+    --testgb-c4 600ms ease;
+
+  &:hover {
+    --testgb-c3: oklch(70% 0.2 140deg);
+    --testgb-c4: oklch(70% 0.2 60deg);
+  }
+}
+
+/* ─── Test 5: stop position % transitions ────────────────────────────── */
+@utility testgb-5 {
+  background: linear-gradient(
+    to right,
+    oklch(70% 0.2 25deg) var(--testgb-pos),
+    oklch(70% 0.2 280deg) 100%
+  );
+  transition: --testgb-pos 600ms ease;
+
+  &:hover {
+    --testgb-pos: 80%;
+  }
+}
+
+/* ─── Test 6: color + alpha changing simultaneously ──────────────────── */
+@utility testgb-6 {
+  background: linear-gradient(
+    to right,
+    var(--testgb-c5),
+    oklch(70% 0.2 280deg)
+  );
+  transition: --testgb-c5 600ms ease;
+
+  &:hover {
+    --testgb-c5: rgb(0 200 100 / 100%);
+  }
+}
+
+/* ─── Test 7: spotlight — radial bloom at cursor, faded by proximity ───
+ *
+ * One radial gradient. Position always tracks the cursor via --x/--y.
+ * Visibility is gated by --proximity (set by the .spotlight utility):
+ *   • cursor far from card → proximity 0 → bloom is transparent
+ *   • cursor on card       → proximity 1 → bloom fully visible
+ *
+ * The gradient image is always painted; only its color alpha changes,
+ * so we never hit the discrete `image ↔ none` snap.
+ *
+ * --inner-size doubles as the bloom radius AND the proximity reach
+ * (via .spotlight's max(--inner-size, --outer-size) falloff).
+ *
+ * Mark up: <div class="testgb testgb-7 spotlight">spotlight</div>
+ * Requires the spotlight tracker (packages/styles/scripts/spotlight.js).
+ */
+@utility testgb-7 {
+  --inner-size: 120px;
+  background: radial-gradient(
+    circle var(--inner-size) at var(--x, 50%) var(--y, 50%),
+    color-mix(
+      in oklch,
+      oklch(70% 0.2 25deg) calc(var(--proximity, 0) * 100%),
+      transparent
+    ),
+    transparent
+  );
+}
+
+/* ─── Test 8: bezel spotlight — shiny rim, calm body ──────────────
+ *
+ * Real-world application of the spotlight pattern through `bezel`.
+ * Card body stays calm; the rim catches the light where the cursor is
+ * nearby — like a metal edge reflecting a passing torch.
+ *
+ * Layer breakdown:
+ *   • Rim (outer-gradient on border-box): dim base color always present;
+ *     brightens to a sharp glow at the cursor as --proximity → 1.
+ *   • Body (inner-gradient on padding-box over --bg-color): subtle wash
+ *     of the same hue, low alpha, smaller bloom — felt, not seen.
+ *
+ * --outer-size and --inner-size are kept equal: one spotlight, one reach.
+ *   If the body sheen had a shorter reach than the rim, the rim would
+ *   glow at distances no light has actually arrived at — breaks the
+ *   single-light-source illusion. Tune intensity via color/alpha, not size.
+ *
+ * Mark up: <div class="testgb testgb-8 spotlight">spotlight</div>
+ */
+@utility testgb-8 {
+  @apply bezel;
+  --border-width: 2px;
+  --radius: 0.75rem;
+  --bg-color: oklch(22% 0.02 250deg);
+  --outer-size: 119px;
+  --inner-size: 119px;
+  --outer-gradient: radial-gradient(
+    circle var(--outer-size) at var(--x, 50%) var(--y, 50%),
+    color-mix(
+      in oklch,
+      oklch(95% 0.22 230deg) calc(var(--proximity, 0) * 100%),
+      oklch(35% 0.04 250deg)
+    ),
+    oklch(35% 0.04 250deg)
+  );
+  --inner-gradient: radial-gradient(
+    circle var(--inner-size) at var(--x, 50%) var(--y, 50%),
+    color-mix(
+      in oklch,
+      oklch(72% 0.12 230deg / 32%) calc(var(--proximity, 0) * 100%),
+      transparent
+    ),
+    transparent
+  );
+}
+
+/* ─── Test 9: bezel spotlight — three-stop specular rim ───────────
+ *
+ * Same setup as Test 8, but the rim uses a three-stop gradient with a
+ * near-white "hot core" at the cursor before the chromatic glow takes
+ * over. Reads more like a polished edge catching a real highlight —
+ * specular instead of diffuse.
+ *
+ * Stop breakdown (cursor-active state):
+ *   • 0%  → near-white sparkle (oklch 98% / low chroma)
+ *   • 40% → chromatic glow (oklch 95% 0.22)
+ *   • 100% → dim rim base
+ *
+ * Each lit stop is color-mixed against the dim base by --proximity, so
+ * when the cursor is far the three stops collapse to the same base color
+ * (uniform-stops trick → solid dim rim, no hot core leaking through).
+ *
+ * Mark up: <div class="testgb testgb-9 spotlight">spotlight</div>
+ */
+@utility testgb-9 {
+  @apply bezel;
+  --border-width: 2px;
+  --radius: 0.75rem;
+  --bg-color: oklch(22% 0.02 250deg);
+  --outer-size: 119px;
+  --inner-size: 119px;
+  --rim-base: oklch(35% 0.04 250deg);
+  --outer-gradient: radial-gradient(
+    circle var(--outer-size) at var(--x, 50%) var(--y, 50%) in oklab,
+    color-mix(
+        in oklab,
+        oklch(100% 0 0deg) calc(var(--proximity, 0) * 100%),
+        var(--rim-base)
+      )
+      0%,
+    color-mix(
+        in oklab,
+        oklch(78% 0.2 245deg) calc(var(--proximity, 0) * 100%),
+        var(--rim-base)
+      )
+      40%,
+    var(--rim-base) 100%
+  );
+  --inner-gradient: radial-gradient(
+    circle var(--inner-size) at var(--x, 50%) var(--y, 50%),
+    color-mix(
+      in oklch,
+      oklch(72% 0.12 230deg / 32%) calc(var(--proximity, 0) * 100%),
+      transparent
+    ),
+    transparent
+  );
+}
+
+/* ─── Test 10: bezel-frost — gradient rim around frosted glass ─────────
+ *
+ * Ring lives on ::before (mask-composite). The element itself carries
+ * backdrop-filter, so a translucent `background` lets blurred content
+ * from behind show through. Wrap in a stage with visible backdrop
+ * content so the blur actually has something to blur.
+ *
+ * Mark up:
+ *   <div class="testgb-stage">
+ *     <div class="testgb testgb-10">frost</div>
+ *   </div>
+ */
+@utility testgb-stage {
+  display: inline-block;
+  padding: 3rem;
+  background:
+    radial-gradient(
+      circle at 15% 25%,
+      oklch(72% 0.22 25deg) 0 70px,
+      transparent 72px
+    ),
+    radial-gradient(
+      circle at 82% 18%,
+      oklch(80% 0.18 140deg) 0 55px,
+      transparent 57px
+    ),
+    radial-gradient(
+      circle at 70% 78%,
+      oklch(70% 0.22 280deg) 0 80px,
+      transparent 82px
+    ),
+    radial-gradient(
+      circle at 22% 82%,
+      oklch(78% 0.2 60deg) 0 50px,
+      transparent 52px
+    ),
+    radial-gradient(
+      circle at 50% 50%,
+      oklch(85% 0.12 200deg) 0 40px,
+      transparent 42px
+    ),
+    oklch(95% 0.02 230deg);
+}
+
+@utility testgb-10 {
+  @apply bezel-frost;
+  --border-width: 2px;
+  --radius: 0.75rem;
+  --frost: 12px;
+  --outer-gradient: linear-gradient(
+    135deg,
+    oklch(95% 0.2 230deg),
+    oklch(75% 0.22 320deg)
+  );
+  background: rgb(255 255 255 / 10%);
+}

package/src/effects/text.css

@@ -1,11 +1,13 @@
 @utility text-stroke {
-  @supports (-webkit-text-stroke-width: 1px) {
-    -webkit-text-stroke-width: var(--stroke-width, 0.1em);
-    -webkit-text-stroke-color: var(--stroke-color);
-    paint-order: stroke fill;
-  }
+  font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
+  color: currentcolor;
+  -webkit-text-fill-color: currentcolor;
+  -webkit-text-stroke-width: max(var(--stroke-width, 0.1em), 2px);
+  -webkit-text-stroke-color: var(--stroke-color);
+  paint-order: stroke fill;
 }
 
+/* Deprecated */
 /* Sets color to background color and stroke to actual color you want for the stroke */
 @utility text-outline {
   color: var(--stroke-color); /* fallback */
@@ -16,41 +18,7 @@
     -webkit-text-stroke-color: var(--stroke-color);
 
     /* We cannot use currentcolor because current color is set to --bg-color. That's why we need a --stroke variable */
-    -webkit-text-stroke-width: var(--stroke-width, 0.1em);
+    -webkit-text-stroke-width: max(var(--stroke-width, 0.1em), 2px);
     paint-order: stroke fill;
   }
 }
-
-@utility writing-normal {
-  transition: none;
-  writing-mode: horizontal-tb;
-}
-
-@utility writing-rotate-left {
-  transform: rotate(180deg);
-  transition: none;
-  writing-mode: vertical-rl;
-  text-orientation: sideways;
-
-  /* // transform: scale( -1, -1 ); // This is the alternative if we don't want to use rotate (though I'm not sure if there is a specific reason why. */
-}
-
-@utility writing-rotate-right {
-  transition: none;
-  writing-mode: vertical-rl;
-  text-orientation: sideways;
-}
-
-@utility writing-downwards {
-  writing-mode: vertical-lr;
-  text-orientation: upright;
-}
-
-@utility writing-downwards-lr {
-  @apply writing-downwards;
-}
-
-@utility writing-downwards-rl {
-  writing-mode: vertical-rl;
-  text-orientation: upright;
-}

package/src/layouts/micro/breakout.css

@@ -1,24 +1,24 @@
 /* prettier-ignore */
 @utility breakout-* {
-  margin-inline: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline: --spacing(--value(integer) * -1);
   margin-inline: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-x-* {
-  margin-inline: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline: --spacing(--value(integer) * -1);
   margin-inline: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-l-* {
-  margin-inline-start: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline-start: --spacing(--value(integer) * -1);
   margin-inline-start: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-r-* {
-  margin-inline-end: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline-end: --spacing(--value(integer) * -1);
   margin-inline-end: calc(--value([length]) * -1);
 }
 
@@ -28,18 +28,18 @@
 
 /* prettier-ignore */
 @utility breakout-y-* {
-  margin-block: calc(var(--spacing) * --value(integer) * -1);
+  margin-block: --spacing(--value(integer) * -1);
   margin-block: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-t-* {
-  margin-block-start: calc(var(--spacing) * --value(integer) * -1);
+  margin-block-start: --spacing(--value(integer) * -1);
   margin-block-start: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-b-* {
-  margin-block-end: calc(var(--spacing) * --value(integer) * -1);
+  margin-block-end: --spacing(--value(integer) * -1);
   margin-block-end: calc(--value([length]) * -1);
 }

package/src/layouts/micro/inner-spacing.css

@@ -3,18 +3,18 @@
  *********************/
 @utility im-* {
   & > * {
-    margin: calc(var(--spacing) * --value(integer));
+    margin: --spacing(--value(integer));
     margin: calc(--value([length]));
   }
 }
 
 @utility im-x-* {
-  margin-inline: calc(var(--spacing) * --value(integer));
+  margin-inline: --spacing(--value(integer));
   margin-inline: calc(--value([length]));
 }
 
 @utility im-y-* {
-  margin-block: calc(var(--spacing) * --value(integer));
+  margin-block: --spacing(--value(integer));
   margin-block: calc(--value([length]));
 }
 
@@ -23,17 +23,17 @@
  *********************/
 @utility ip-* {
   & > * {
-    padding: calc(var(--spacing) * --value(integer));
+    padding: --spacing(--value(integer));
     padding: calc(--value([length]));
   }
 }
 
 @utility ip-x-* {
-  padding-inline: calc(var(--spacing) * --value(integer));
+  padding-inline: --spacing(--value(integer));
   padding-inline: calc(--value([length]));
 }
 
 @utility ip-y-* {
-  padding-block: calc(var(--spacing) * --value(integer));
+  padding-block: --spacing(--value(integer));
   padding-block: calc(--value([length]));
 }

package/src/layouts/position/nudge.css

@@ -75,17 +75,17 @@
  *********************/
 @utility nudge-* {
   --nudge: --value([*]);
-  --nudge: calc(var(--spacing) * --value());
+  --nudge: --spacing(--value());
 }
 
 @utility nudge-x-* {
   --nudge-x: --value([*]);
-  --nudge-x: calc(var(--spacing) * --value());
+  --nudge-x: --spacing(--value());
 }
 
 @utility nudge-y-* {
   --nudge-y: --value([*]);
-  --nudge-y: calc(var(--spacing) * --value());
+  --nudge-y: --spacing(--value());
 }
 
 @utility inner-radius {

package/src/tools/color.css

@@ -1,4 +1,4 @@
 /* Returns a color with alpha value */
-@function --alpha(--color, --alpha) {
-  result: oklch(from var(--color) l c h / var(--alpha));
+@function --zalpha(--color, --a) {
+  result: oklch(from var(--color) l c h / var(--a));
 }

package/src/tools/interact.css

@@ -2,6 +2,8 @@
   &:hover,
   &:focus-visible,
   &:active,
+  &.selected,
+  &.checked,
   &[aria-current],
   &[aria-selected='true'],
   &[aria-pressed='true'],
@@ -12,18 +14,15 @@
 
 @custom-variant interact-within {
   &:hover,
-  &:focus-visible,
-  &[aria-current],
-  &[aria-selected='true'],
-  &[aria-pressed='true'],
-  &[aria-expanded='true'],
-  &:has(:focus-visible),
+  &:focus-within,
   &:has(
-      [aria-current],
-      [aria-selected='true'],
-      [aria-pressed='true'],
-      [aria-expanded='true']
-    ) {
+    .selected,
+    .checked,
+    [aria-current],
+    [aria-selected='true'],
+    [aria-pressed='true'],
+    [aria-expanded='true']
+  ) {
     @slot;
   }
 }

package/src/tools/outlines.css

@@ -4,29 +4,26 @@
  *********************/
 
 @utility outline-scaffold {
-  & {
-    outline: var(--outline-width) var(--outline-style)
-      var(--outline-color, transparent);
-    outline-offset: var(--outline-offset);
+  outline: var(--outline-width) var(--outline-style)
+    var(--outline-color, transparent);
+  outline-offset: var(--outline-offset);
 
-    &:focus-visible {
-      outline-color: var(--outline-focus-color);
-    }
+  &:focus-visible {
+    outline-color: var(--outline-focus-color);
   }
 }
 
 @utility focus-within {
-  & {
-    outline: var(--outline-width) var(--outline-style) transparent;
-    outline-offset: var(--outline-offset);
+  outline: var(--outline-width) var(--outline-style) transparent;
+  outline-offset: var(--outline-offset);
 
-    &:focus-within {
-      outline-color: var(--outline-focus-color);
-    }
+  &:focus-within {
+    outline-color: var(--outline-focus-color);
+  }
 
-    > * {
-      --outline-color: transparent;
-    }
+  /* Removes all outlines within the element */
+  * {
+    --outline-focus-color: transparent;
   }
 }
 
@@ -37,9 +34,7 @@
   - content-box is necessary, if not present, box will be cut on the right side
  *********************/
 @utility preserve-outlines {
-  & {
-    box-sizing: content-box;
-    margin: calc(var(--outline-width) * -1);
-    padding: calc(var(--outline-width));
-  }
+  box-sizing: content-box;
+  margin: calc(var(--outline-width) * -1);
+  padding: calc(var(--outline-width));
 }

package/src/tools/pigment.css

@@ -30,27 +30,23 @@ Usage with the Fill System
  * Pigment scaffolds *
  *********************/
 @utility pigment-scaffold {
-  & {
-    @apply transition-scaffold;
-    --_bgc: var(--bg-color);
-    --_tc: var(--text-color, currentcolor);
-    --_bc: var(--border-color, currentcolor);
-    border-color: var(--_bc, currentcolor);
-    color: var(--_tc);
-    background: var(--_bgc);
-  }
+  @apply transition-scaffold;
+  --_bgc: var(--bg-color);
+  --_tc: var(--text-color, currentcolor);
+  --_bc: var(--border-color, currentcolor);
+  border-color: var(--_bc, currentcolor);
+  color: var(--_tc);
+  background: var(--_bgc);
 }
 
 @utility pigment-svg-scaffold {
   --_fc: var(--fill-color);
   --_sc: var(--stroke-color, var(--text-color, currentcolor));
 
-  & {
-    :where(svg path) {
-      @apply transition-scaffold;
-      fill: var(--_fc, revert-layer);
-      stroke: var(--_sc, currentcolor);
-    }
+  :where(svg path) {
+    @apply transition-scaffold;
+    fill: var(--_fc, revert-layer);
+    stroke: var(--_sc, currentcolor);
   }
 }