@splendidlabz/styles 4.9.0 → 4.11.0

package/src/effects/gradients.css

@@ -1,18 +1,61 @@
+/* For linear/conic gradient */
 @property --gradient-angle {
-  syntax: '*';
-  initial-value: to bottom;
-  inherits: false;
+  syntax: '<angle> | <custom-ident>+';
+  initial-value: 180deg;
+  inherits: true;
+}
+
+/* For radial gradient. */
+@property --gradient-shape {
+  syntax: 'circle | ellipse';
+  initial-value: ellipse;
+  inherits: true;
+}
+
+/* For radial/conic gradient */
+@property --gradient-position {
+  syntax: '<length-percentage>+ | <custom-ident>+';
+  initial-value: 50% 50%;
+  inherits: true;
+}
+
+/* For radial-gradient */
+@property --gradient-size {
+  syntax: '<length-percentage>+ | closest-side | closest-corner | farthest-side | farthest-corner';
+  initial-value: farthest-corner;
+  inherits: true;
+}
+
+/*********************
+ * Custom functions - Useful when @functions have baseline support *
+ *********************/
+@function --linear-gradient(--gradient) {
+  result: linear-gradient(
+    var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
+    var(--gradient, var(--tw-gradient))
+  );
+}
+
+@function --radial-gradient(--gradient) {
+  result: radial-gradient(
+    var(--gradient-shape) var(--gradient-size) at var(--gradient-position) in
+      var(--color-space) var(--hue-interpolation),
+    var(--gradient, var(--tw-gradient))
+  );
+}
+
+@function --conic-gradient(--gradient) {
+  result: conic-gradient(
+    from var(--gradient-angle) at var(--gradient-position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--gradient, var(--tw-gradient))
+  );
 }
 
 /* Gradient Defaults */
 @layer base {
   :root {
     /* --gradient: ; */
-    --gradient-alpha: 1;
-    --gradient-angle: to bottom;
-    --gradient-position: center; /* For radial and conic gradients */
-    --gradient-shape: ; /* For radial and conic gradients */
-    --gradient-size: ; /* For radial gradient */
     --color-space: oklch;
     --hue-interpolation: ;
   }
@@ -32,13 +75,6 @@
   );
 }
 
-@function --linear-gradient(--gradient) {
-  result: linear-gradient(
-    var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
-    var(--gradient)
-  );
-}
-
 @utility linear-gradient {
   @apply gradient;
 }
@@ -48,15 +84,16 @@
   background-image: radial-gradient(
     var(--gradient-shape) var(--gradient-size) at var(--gradient-position) in
       var(--color-space) var(--hue-interpolation),
-    var(--tw-gradient-stops, var(--gradient))
+    var(--gradient, var(--tw-gradient))
   );
 }
 
 @utility conic-gradient {
   @apply tw-gradient;
   background-image: conic-gradient(
-    from var(--gradient-angle) at var(--gradient-position),
-    var(--tw-gradient-stops, var(--gradient))
+    from var(--gradient-angle) at var(--gradient-position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--gradient, var(--tw-gradient))
   );
 }
 
@@ -134,3 +171,7 @@
 @utility gradient-shape-* {
   --gradient-shape: --value([shape]);
 } */
+
+@utility gradient-* {
+  --gradient-shape: --value('circle', 'ellipse');
+}

package/src/effects/highlight.css

@@ -1,13 +1,132 @@
-/* .highlight-underline {
-} */
-
-@utility highlight-bg {
-  & {
-    /* line-height: 1; */
-    background-image: linear-gradient(
-      transparent 0 var(--highlight-start, 0),
-      var(--highlight-color) var(--highlight-start, 0) var(--highlight-end, 1lh),
-      transparent var(--highlight-end, 1lh)
+@theme {
+  --highlight-start: 0lh;
+  --highlight-end: 1lh;
+  --highlight-skew: 0em;
+  --highlight-padding: 0em;
+  --highlight-left-dir: to bottom right;
+  --highlight-right-dir: to top left;
+}
+
+@utility highlight {
+  --_highlight-height: calc(var(--highlight-end) - var(--highlight-start));
+  display: inline;
+  margin-inline: calc(var(--highlight-skew) * -1);
+  padding-inline: calc(var(--highlight-skew) + var(--highlight-padding));
+  background-image:
+    linear-gradient(
+      var(--highlight-left-dir),
+      transparent 50%,
+      var(--gradient-start, var(--highlight-color)) 50%
+    ),
+    linear-gradient(
+      var(--gradient-angle, 90deg),
+      var(--gradient-start, var(--highlight-color)),
+      var(--gradient-end, var(--highlight-color))
+    ),
+    linear-gradient(
+      var(--highlight-right-dir),
+      transparent 50%,
+      var(--gradient-end, var(--highlight-color)) 50%
     );
+  background-position:
+    left var(--highlight-start),
+    center var(--highlight-start),
+    right var(--highlight-start);
+  background-size:
+    var(--highlight-skew) var(--_highlight-height),
+    calc(100% - var(--highlight-skew) * 2 + 1px) var(--_highlight-height),
+    var(--highlight-skew) var(--_highlight-height);
+  background-repeat: no-repeat;
+  box-decoration-break: clone;
+}
+
+@utility highlight-* {
+  /* highlight-color */
+  --highlight-color: --value(--color-*, [color]);
+  --highlight-color: oklch(
+    from --value(--color-*, [color]) l c h / --modifier(integer) %
+  );
+}
+
+/* prettier-ignore */
+@utility highlight-start-* {
+  --highlight-start: --value([length]);
+  --highlight-start: --value(number)lh;
+  
+}
+
+/* prettier-ignore */
+@utility highlight-end-* {
+  --highlight-end: --value([length]);
+  --highlight-end: --value(number)lh;
+}
+
+@utility highlight-before {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: var(--highlight-start, 0.24lh)
+      calc(var(--highlight-padding, 0.25em) * -1)
+      calc(100% - var(--highlight-end, 0.62lh))
+      calc(var(--highlight-padding, 0.25em) * -1);
+    z-index: -1;
+    background: var(--highlight-color);
+    transform: rotate(var(--highlight-rotate));
   }
 }
+
+/* PATTERNS */
+/* Parallelogram leaning right: /   / — classic marker skew */
+@utility highlight-marker {
+  --highlight-skew: 0.25em;
+  --highlight-left-dir: to bottom right;
+  --highlight-right-dir: to top left;
+}
+
+/* Parallelogram leaning left: \   \ — mirror of marker */
+@utility highlight-marker-alt {
+  --highlight-skew: 0.25em;
+  --highlight-left-dir: to top right;
+  --highlight-right-dir: to bottom left;
+}
+
+/* Trapezium wider at top: \___/ — sticker / index-tab feel */
+@utility highlight-tab {
+  --highlight-skew: 0.25em;
+  --highlight-left-dir: to top left;
+  --highlight-right-dir: to top right;
+}
+
+/* Trapezium wider at bottom: /‾‾‾\ — badge / stamp feel */
+@utility highlight-stamp {
+  --highlight-skew: 0.25em;
+  --highlight-left-dir: to bottom right;
+  --highlight-right-dir: to bottom left;
+}
+
+/* LEGACY */
+
+.highlight-others {
+  --mark-color: #f8db75;
+  --mark-skew: 0.25em;
+  --mark-height: 1em;
+  --mark-overlap: 0.3em;
+  margin-inline: calc(var(--mark-overlap) * -1);
+  padding-inline: var(--mark-overlap);
+  color: inherit;
+  background-color: transparent;
+  background-image:
+    linear-gradient(to bottom right, transparent 50%, var(--mark-color) 50%),
+    linear-gradient(var(--mark-color), var(--mark-color)),
+    linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);
+  background-position:
+    left center,
+    center,
+    right center;
+  background-size:
+    var(--mark-skew) var(--mark-height),
+    calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
+    var(--mark-skew) var(--mark-height);
+  background-repeat: no-repeat;
+  box-decoration-break: clone;
+}

package/src/effects/index.css

@@ -1,6 +1,7 @@
 @import './elevation.css';
 @import './gradients.css';
 @import './fancybox.css';
+@import './bezel.css';
 @import './highlight.css';
 @import './shadows.css';
 @import './text.css';

package/src/effects/inner-border.css

@@ -1,18 +1,12 @@
 /* From https://css-tip.com/inner-border/  */
 /* Needs testing */
 @utility inner-border {
-  & {
-    --offset: 20px; /* offset of the border */
-    --border-width: 5px; /* border thickness */
-    mask:
-      conic-gradient(#000 0 0) no-repeat 50% /
-        calc(100% - 2 * (var(--offset) + var(--border-width)))
-        calc(100% - 2 * (var(--offset) + var(--border-width))),
-      conic-gradient(
-          from 90deg at var(--offset) var(--offset),
-          #0000 25%,
-          #000 0
-        )
-        0 0 / calc(100% - var(--offset)) calc(100% - var(--offset));
-  }
+  --offset: 20px; /* offset of the border */
+  --border-width: 5px; /* border thickness */
+  mask:
+    conic-gradient(#000 0 0) no-repeat 50% /
+      calc(100% - 2 * (var(--offset) + var(--border-width)))
+      calc(100% - 2 * (var(--offset) + var(--border-width))),
+    conic-gradient(from 90deg at var(--offset) var(--offset), #0000 25%, #000 0)
+      0 0 / calc(100% - var(--offset)) calc(100% - var(--offset));
 }

package/src/effects/shadows.css

@@ -15,6 +15,107 @@
  * --drop-shadow-color: transparent;
 *********************/
 
+/*********************
+ * Typed properties (animatable)
+ * Blur vars are intentionally NOT typed — elevation.css relies on
+ * `var(--shadow-blur, max(...))` fallback firing when unset.
+ *********************/
+@property --shadow-x {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --shadow-y {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --shadow-spread {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --shadow-color {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --shadow-alpha {
+  syntax: '<number> | <percentage>';
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --shadow-x-multiple {
+  syntax: '<number>';
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --shadow-y-multiple {
+  syntax: '<number>';
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --shadow-spread-multiple {
+  syntax: '<number>';
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --text-shadow-x {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --text-shadow-y {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --text-shadow-color {
+  syntax: '<color>';
+  initial-value: currentcolor;
+  inherits: true;
+}
+
+@property --text-shadow-alpha {
+  syntax: '<number> | <percentage>';
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --drop-shadow-x {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --drop-shadow-y {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --drop-shadow-color {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --drop-shadow-alpha {
+  syntax: '<number> | <percentage>';
+  initial-value: 1;
+  inherits: true;
+}
+
 @utility shadowstring {
   --shadow-string: var(--shadow-inset,) var(--shadow-x, 0) var(--shadow-y, 0)
     var(--shadow-blur, 0) var(--shadow-spread, 0)
@@ -35,13 +136,18 @@
 
 @utility text-shadow {
   --text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
-    var(--text-shadow-blur, 0) var(--text-shadow-color, currentcolor);
+    var(--text-shadow-blur, 0)
+    oklch(
+      from var(--text-shadow-color, currentcolor) l c h /
+        var(--text-shadow-alpha, 1)
+    );
   text-shadow: var(--text-shadow, var(--text-shadow-string));
 }
 
 @utility drop-shadow {
   --drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
-    var(--drop-shadow-blur, 0) var(--drop-shadow-color);
+    var(--drop-shadow-blur, 0)
+    oklch(from var(--drop-shadow-color) l c h / var(--drop-shadow-alpha, 1));
   filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
 }
 
@@ -53,6 +159,7 @@
   /* Not required if parent element is inline-flex */
   top: calc(var(--border-width, 0px) * -1);
   left: calc(var(--border-width, 0px) * -1);
+  z-index: -1;
   box-sizing: content-box;
   width: 100%;
   height: 100%;
@@ -72,15 +179,7 @@
     @apply shadow-pseudo;
   }
 
-  &:hover,
-  &:focus-visible,
-  &:active,
-  &.selected,
-  &.checked,
-  &[aria-current],
-  &[aria-selected='true'],
-  &[aria-pressed='true'],
-  &[aria-expanded='true'] {
+  @variant interact {
     &::before {
       opacity: 1;
     }
@@ -95,15 +194,7 @@
     @apply shadow-pseudo;
   }
 
-  &:hover,
-  &:focus-visible,
-  &:active,
-  &.selected,
-  &.checked,
-  &[aria-current],
-  &[aria-selected='true'],
-  &[aria-pressed='true'],
-  &[aria-expanded='true'] {
+  @variant interact {
     &::after {
       opacity: 1;
     }
@@ -113,34 +204,56 @@
 /* Shadow Functional Utilities */
 /* prettier-ignore */
 @utility sx-* {
-  --shadow-x: calc(var(--spacing) * --value(integer));
+  --shadow-x: --spacing(--value(number));
+  --shadow-x: --value([length]);
+}
+
+/* prettier-ignore */
+@utility -sx-* {
+  --shadow-x: calc(--spacing(--value(number)) * -1);
   --shadow-x: --value([length]);
 }
 
 /* prettier-ignore */
 @utility sy-* {
-  --shadow-y: calc(var(--spacing) * --value(integer));
+  --shadow-y: --spacing(--value(number));
+  --shadow-y: --value([length]);
+}
+
+/* prettier-ignore */
+@utility -sy-* {
+  --shadow-y: calc(--spacing(--value(number)) * -1);
   --shadow-y: --value([length]);
 }
 
+/* prettier-ignore */
 @utility sb-* {
+  --shadow-blur: --spacing(--value(number));
   --shadow-blur: --value([length]);
 }
 
 /* prettier-ignore */
 @utility sc-* {
   --shadow-color: --value(--color-*, [color]);
-  --shadow-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
+  --shadow-color: oklch(from --value(--color-*, [color]) l c h / --modifier(number)%);
 }
 
+/* prettier-ignore */
 @utility ss-* {
+  --shadow-spread: --spacing(--value(number));
   --shadow-spread: --value([length]);
 }
 
+/* prettier-ignore */
+@utility -ss-* {
+  --shadow-spread: calc(--spacing(--value(number)) * -1);
+  --shadow-spread: --value([length]);
+}
+
+/* prettier-ignore */
 @utility sa-* {
-  --shadow-alpha: calc(--value(integer) * 1%);
-  --shadow-alpha: --value([percentage]);
-  --shadow-alpha: --value([number]);
+  --shadow-alpha: --value(number)%;
+  --shadow-alpha: --value([percentage], [number]);
 }
 
 @utility sxm-* {
@@ -163,25 +276,49 @@
  * Text Shadow Utilities *
  *********************/
 
+/* prettier-ignore */
 @utility tsx-* {
+  --text-shadow-x: --spacing(--value(number));
   --text-shadow-x: --value([length]);
 }
 
+/* prettier-ignore */
+@utility -tsx-* {
+  --text-shadow-x: calc(--spacing(--value(number)) * -1);
+  --text-shadow-x: --value([length]);
+}
+
+/* prettier-ignore */
 @utility tsy-* {
+  --text-shadow-y: --spacing(--value(number));
   --text-shadow-y: --value([length]);
 }
 
+/* prettier-ignore */
+@utility -tsy-* {
+  --text-shadow-y: calc(--spacing(--value(number)) * -1);
+  --text-shadow-y: --value([length]);
+}
+
+/* prettier-ignore */
 @utility tsb-* {
+  --text-shadow-blur: --spacing(--value(number));
   --text-shadow-blur: --value([length]);
 }
 
 @utility tsc-* {
   --text-shadow-color: --value(--color-*, [color]);
   --text-shadow-color: oklch(
-    from --value(--color-*, [color]) l c h / --modifier(integer) %
+    from --value(--color-*, [color]) l c h / --modifier(number) %
   );
 }
 
+/* prettier-ignore */
+@utility tsa-* {
+  --text-shadow-alpha: --value(number)%;
+  --text-shadow-alpha: --value([percentage], [number]);
+}
+
 @utility tsxm-* {
   --text-shadow-x-multiple: --value([number]);
 }
@@ -197,27 +334,48 @@
 /*********************
  * Drop Shadow Utilities *
  *********************/
+/* prettier-ignore */
 @utility dsx-* {
+  --drop-shadow-x: --spacing(--value(number));
+  --drop-shadow-x: --value([length]);
+}
+
+/* prettier-ignore */
+@utility -dsx-* {
+  --drop-shadow-x: calc(--spacing(--value(number)) * -1);
   --drop-shadow-x: --value([length]);
 }
 
+/* prettier-ignore */
 @utility dsy-* {
+  --drop-shadow-y: --spacing(--value(number));
+  --drop-shadow-y: --value([length]);
+}
+
+/* prettier-ignore */
+@utility -dsy-* {
+  --drop-shadow-y: calc(--spacing(--value(number)) * -1);
   --drop-shadow-y: --value([length]);
 }
 
+/* prettier-ignore */
 @utility dsb-* {
+  --drop-shadow-blur: --spacing(--value(number));
   --drop-shadow-blur: --value([length]);
 }
 
+/* prettier-ignore */
 @utility dsc-* {
   --drop-shadow-color: --value(--color-*, [color]);
   --drop-shadow-color: oklch(
-    from --value(--color-*, [color]) l c h / --modifier(integer) %
+    from --value(--color-*, [color]) l c h / --modifier(number) %
   );
 }
 
+/* prettier-ignore */
 @utility dsa-* {
-  --drop-shadow-alpha: --value([number]);
+  --drop-shadow-alpha: --value(number)%;
+  --drop-shadow-alpha: --value([percentage], [number]);
 }
 
 @utility dsxm-* {
@@ -231,7 +389,3 @@
 @utility dsbm-* {
   --drop-shadow-blur-multiple: --value([number]);
 }
-
-@utility dsxm-* {
-  --drop-shadow-x-multiple: --value([number]);
-}