@splendidlabz/styles 4.8.2 → 4.10.1

package/src/effects/frosted-glass.css

@@ -3,40 +3,36 @@
 } */
 
 @utility frosted-glass {
-  & {
-    @apply transition-scaffold-extended;
-    position: relative;
-    backdrop-filter: blur(var(--blur, 16px));
-  }
+  @apply transition-scaffold-extended;
+  position: relative;
+  backdrop-filter: blur(var(--blur, 16px));
 }
 
 /* Use this as a sibling element in stack */
 @utility frosted-glass-advanced {
-  & {
-    pointer-events: none;
-    margin: calc(var(--refraction) * -1);
-    padding: var(--refraction);
+  pointer-events: none;
+  margin: calc(var(--refraction) * -1);
+  padding: var(--refraction);
 
-    /* Using position absolute is another way */
-    /* position: absolute; */
-    /* inset: calc(var(--refraction) * -1); */ /* z-index: -1; */
-    /* width: calc(100% + var(--refraction) * 2); */
-    /* height: calc(100% + var(--refraction) * 2); */
-    border-radius: inherit;
-    backdrop-filter: blur(16px);
-    mask-image:
-      linear-gradient(
-        to bottom,
-        transparent 0% var(--refraction),
-        black var(--refraction) calc(100% - var(--refraction)),
-        transparent calc(100% - var(--refraction)) 100%
-      ),
-      linear-gradient(
-        to right,
-        transparent 0% var(--refraction),
-        black var(--refraction) calc(100% - var(--refraction)),
-        transparent calc(100% - var(--refraction)) 100%
-      );
-    mask-composite: intersect;
-  }
+  /* Using position absolute is another way */
+  /* position: absolute; */
+  /* inset: calc(var(--refraction) * -1); */ /* z-index: -1; */
+  /* width: calc(100% + var(--refraction) * 2); */
+  /* height: calc(100% + var(--refraction) * 2); */
+  border-radius: inherit;
+  backdrop-filter: blur(16px);
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0% var(--refraction),
+      black var(--refraction) calc(100% - var(--refraction)),
+      transparent calc(100% - var(--refraction)) 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0% var(--refraction),
+      black var(--refraction) calc(100% - var(--refraction)),
+      transparent calc(100% - var(--refraction)) 100%
+    );
+  mask-composite: intersect;
 }

package/src/effects/gradients.css

@@ -1,24 +1,66 @@
+/* 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: ;
   }
 }
 
-/* These don't work in Tailwind 4 and we need to adjust them */
 @utility tw-gradient {
   --tw-gradient:
     var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -26,19 +68,10 @@
 }
 
 @utility gradient {
-  & {
-    @apply tw-gradient;
-    background-image: linear-gradient(
-      var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
-      var(--gradient, var(--tw-gradient))
-    );
-  }
-}
-
-@function --linear-gradient(--gradient) {
-  result: linear-gradient(
+  @apply tw-gradient;
+  background-image: linear-gradient(
     var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
-    var(--gradient)
+    var(--gradient, var(--tw-gradient))
   );
 }
 
@@ -47,35 +80,41 @@
 }
 
 @utility radial-gradient {
-  & {
-    @apply tw-gradient;
-    background-image: radial-gradient(
-      var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
-      var(--tw-gradient-stops, var(--gradient))
-    );
-  }
+  @apply tw-gradient;
+  background-image: radial-gradient(
+    var(--gradient-shape) var(--gradient-size) at var(--gradient-position) in
+      var(--color-space) var(--hue-interpolation),
+    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))
-    );
-  }
+  @apply tw-gradient;
+  background-image: conic-gradient(
+    from var(--gradient-angle) at var(--gradient-position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--gradient, var(--tw-gradient))
+  );
 }
 
 @utility text-gradient {
-  & {
-    @apply gradient;
-    display: inline-flex;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+  @apply gradient;
+  display: inline-flex;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 
-    /* Allows multiline gradients in Safari */
-    box-decoration-break: clone;
-  }
+  /* Allows multiline gradients in Safari */
+  box-decoration-break: clone;
+}
+
+@utility gradient-text {
+  @apply gradient;
+  display: inline-flex;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+
+  /* Allows multiline gradients in Safari */
+  box-decoration-break: clone;
 }
 
 /*********************
@@ -119,7 +158,9 @@
 /*********************
  * Functional Utiliites for Gradients *
  *********************/
+/* prettier-ignore */
 @utility gradient-angle-* {
+  --gradient-angle: --value(number)deg;
   --gradient-angle: --value([angle]);
 }
 
@@ -130,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,8 @@
 @import './elevation.css';
 @import './gradients.css';
 @import './fancybox.css';
+@import './bezel.css';
+@import './testgb.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));
 }