@splendidlabz/styles 4.8.2 → 4.10.1

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,14 +1,13 @@
 @utility text-stroke {
-  @supports (-webkit-text-stroke-width: 1px) {
-    /* Need to adjust this font size?? */
-
-    /* font-size: calc(1em - var(--stroke-width, 0.1em) / 2); */
-    -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 */
@@ -19,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/micro/stack.css

@@ -1,49 +1,72 @@
 @utility stack {
-  & {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  padding: 0;
+
+  &::before,
+  &::after,
+  > *,
+  > *:where(.contents) > *,
+  > *:where(astro-island, astro-slot) > * {
     position: relative;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    padding: 0;
-
-    &::before,
-    &::after,
-    > *,
-    > *:where(.contents) > *,
-    > *:where(astro-island, astro-slot) > * {
-      position: relative;
-      z-index: 1;
-      grid-column: 1 / span 1;
-      grid-row: 1 / span 1;
-    }
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 1;
+  }
 
-    > .background {
-      overflow: hidden;
-      position: absolute;
-      inset: 0;
-    }
+  > *,
+  > *:where(.contents) > *,
+  > *:where(astro-island, astro-slot) > * {
+    z-index: 1;
+  }
 
-    > .foreground {
-      position: relative;
-      z-index: 10;
-    }
+  > :where(.background) {
+    overflow: hidden;
+    position: absolute;
+    inset: 0;
+  }
+
+  > :where(.foreground) {
+    position: relative;
+    z-index: 10;
   }
 }
 
 @utility stack-interactive {
-  & {
-    @apply stack;
+  @apply stack;
 
-    > .overlay {
-      @apply pos-overlay;
-      opacity: 0;
+  > *:where(.underlay) {
+    z-index: -1;
+  }
+
+  > *:where(.overlay) {
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  > *:where(.underlay),
+  > *:where(.overlay) {
+    @apply pos-overlay;
+    opacity: 0;
+    transition: var(--transition-values);
+    transition-property: opacity;
+  }
+
+  > *:where(.fade-out) {
+    opacity: 1;
+    transition: var(--transition-values);
+    transition-property: opacity;
+  }
+
+  @variant interact-within {
+    > *:where(.underlay),
+    > *:where(.overlay) {
+      pointer-events: auto;
+      opacity: 1;
     }
 
-    &:hover,
-    &:focus-visible,
-    &:focus-within {
-      > .overlay {
-        opacity: 1;
-      }
+    > *:where(.fade-out) {
+      opacity: 0;
     }
   }
-}
+}

package/src/layouts/position/nudge.css

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

package/src/layouts/position/pos.css

@@ -106,13 +106,11 @@
 }
 
 @utility relative-pos-left {
-  & {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    height: fit-content;
-    margin-block: auto;
-  }
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  height: fit-content;
+  margin-block: auto;
 }
 
 @utility relative-pos-leftfull {
@@ -122,13 +120,11 @@
 }
 
 @utility relative-pos-right {
-  & {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-    height: fit-content;
-    margin-block: auto;
-  }
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  height: fit-content;
+  margin-block: auto;
 }
 
 @utility relative-pos-rightfull {