@splendidlabz/styles 4.8.1 → 4.9.0

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,5 +1,5 @@
 @property --gradient-angle {
-  syntax: '<angle> | to [left | right | top | bottom] | to [top | bottom] [left | right]';
+  syntax: '*';
   initial-value: to bottom;
   inherits: false;
 }
@@ -18,7 +18,6 @@
   }
 }
 
-/* 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,13 +25,11 @@
 }
 
 @utility gradient {
-  & {
-    @apply tw-gradient;
-    background-image: linear-gradient(
-      var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
-      var(--gradient, var(--tw-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) {
@@ -47,35 +44,40 @@
 }
 
 @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(--tw-gradient-stops, var(--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),
+    var(--tw-gradient-stops, var(--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 +121,9 @@
 /*********************
  * Functional Utiliites for Gradients *
  *********************/
+/* prettier-ignore */
 @utility gradient-angle-* {
+  --gradient-angle: --value(number)deg;
   --gradient-angle: --value([angle]);
 }
 

package/src/effects/shadows.css

@@ -15,36 +15,111 @@
  * --drop-shadow-color: transparent;
 *********************/
 
+@utility shadowstring {
+  --shadow-string: var(--shadow-inset,) var(--shadow-x, 0) var(--shadow-y, 0)
+    var(--shadow-blur, 0) var(--shadow-spread, 0)
+    oklch(
+      from var(--shadow-color, var(--tw-shadow-color)) l c h /
+        var(--shadow-alpha, 1)
+    );
+}
+
 @utility shadow {
-  & {
-    --shadow-string: var(--shadow-x, 0) var(--shadow-y, 0) var(--shadow-blur, 0)
-      var(--shadow-spread, 0) var(--shadow-color, var(--tw-shadow-color));
-    box-shadow: var(--shadow, var(--shadow-string));
-  }
+  @apply shadowstring;
+  box-shadow: var(--shadow, var(--shadow-string));
+}
+
+@utility inset {
+  --shadow-inset: inset;
 }
 
 @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);
-    text-shadow: var(--text-shadow, var(--text-shadow-string));
-  }
+  --text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
+    var(--text-shadow-blur, 0) var(--text-shadow-color, currentcolor);
+  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);
-    filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
+  --drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
+    var(--drop-shadow-blur, 0) var(--drop-shadow-color);
+  filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
+}
+
+@utility shadow-pseudo {
+  content: '';
+  position: absolute;
+
+  /* Required if parent element is inline-block. */
+  /* Not required if parent element is inline-flex */
+  top: calc(var(--border-width, 0px) * -1);
+  left: calc(var(--border-width, 0px) * -1);
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  border: inherit;
+  border-radius: inherit;
+  box-shadow: var(--shadow, var(--shadow-string));
+  opacity: 0;
+  transition: var(--transition-values);
+  transition-property: opacity;
+}
+
+@utility shadow-before {
+  @apply shadowstring;
+  position: relative;
+
+  &::before {
+    @apply shadow-pseudo;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active,
+  &.selected,
+  &.checked,
+  &[aria-current],
+  &[aria-selected='true'],
+  &[aria-pressed='true'],
+  &[aria-expanded='true'] {
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+@utility shadow-after {
+  @apply shadowstring;
+  position: relative;
+
+  &::after {
+    @apply shadow-pseudo;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active,
+  &.selected,
+  &.checked,
+  &[aria-current],
+  &[aria-selected='true'],
+  &[aria-pressed='true'],
+  &[aria-expanded='true'] {
+    &::after {
+      opacity: 1;
+    }
   }
 }
 
 /* Shadow Functional Utilities */
+/* prettier-ignore */
 @utility sx-* {
+  --shadow-x: calc(var(--spacing) * --value(integer));
   --shadow-x: --value([length]);
 }
 
+/* prettier-ignore */
 @utility sy-* {
+  --shadow-y: calc(var(--spacing) * --value(integer));
   --shadow-y: --value([length]);
 }
 
@@ -63,6 +138,8 @@
 }
 
 @utility sa-* {
+  --shadow-alpha: calc(--value(integer) * 1%);
+  --shadow-alpha: --value([percentage]);
   --shadow-alpha: --value([number]);
 }
 
@@ -78,6 +155,10 @@
   --shadow-blur-multiple: --value([number]);
 }
 
+@utility ssm-* {
+  --shadow-spread-multiple: --value([number]);
+}
+
 /*********************
  * Text Shadow Utilities *
  *********************/
@@ -95,9 +176,9 @@
 }
 
 @utility tsc-* {
-  --text-shadow-color: --value(--color- *, [color]);
+  --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(integer) %
   );
 }
 
@@ -129,9 +210,9 @@
 }
 
 @utility dsc-* {
-  --drop-shadow-color: --value(--color- *, [color]);
+  --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(integer) %
   );
 }
 

package/src/effects/text.css

@@ -1,8 +1,5 @@
 @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;

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: calc(var(--spacing) * --value());
 }
 
 @utility nudge-x-* {
   --nudge-x: --value([*]);
-  --nudge-x: calc(var(--spacing) * --value(integer));
+  --nudge-x: calc(var(--spacing) * --value());
 }
 
 @utility nudge-y-* {
   --nudge-y: --value([*]);
-  --nudge-y: calc(var(--spacing) * --value(integer));
+  --nudge-y: calc(var(--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 {

package/src/tools/index.css

@@ -4,3 +4,4 @@
 @import './scaffolds.css';
 @import './object.css';
 @import './transitions.css';
+@import './interact.css';

package/src/tools/interact.css

@@ -0,0 +1,29 @@
+@custom-variant interact {
+  &:hover,
+  &:focus-visible,
+  &:active,
+  &[aria-current],
+  &[aria-selected='true'],
+  &[aria-pressed='true'],
+  &[aria-expanded='true'] {
+    @slot;
+  }
+}
+
+@custom-variant interact-within {
+  &:hover,
+  &:focus-visible,
+  &[aria-current],
+  &[aria-selected='true'],
+  &[aria-pressed='true'],
+  &[aria-expanded='true'],
+  &:has(:focus-visible),
+  &:has(
+      [aria-current],
+      [aria-selected='true'],
+      [aria-pressed='true'],
+      [aria-expanded='true']
+    ) {
+    @slot;
+  }
+}

package/src/tools/transitions.css

@@ -8,35 +8,29 @@
  * Default transition properties and values *
  *********************/
 @utility transition-scaffold {
-  & {
-    --transition-values: var(--transition-duration) var(--transition-delay)
-      var(--transition-easing);
-    --transition-props:
-      background, border, color, display, fill, opacity, outline, stroke,
-      transform, translate, scale, rotate, skew, perspective;
-    transition: var(--transition-values);
-    transition-property: var(--transition-props);
-  }
+  --transition-values: var(--transition-duration) var(--transition-delay)
+    var(--transition-easing);
+  --transition-props:
+    background, border, color, display, fill, opacity, outline, stroke,
+    transform, translate, scale, rotate, skew, perspective;
+  transition: var(--transition-values);
+  transition-property: var(--transition-props);
 }
 
 @utility transition-scaffold-extended {
-  & {
-    @apply transition-scaffold;
-    --transition-props:
-      backdrop-filter, background, border, color, display, fill, filter, gap,
-      opacity, outline, overlay, stroke, transform, translate, scale, rotate,
-      skew, perspective;
-  }
+  @apply transition-scaffold;
+  --transition-props:
+    backdrop-filter, background, border, color, display, fill, filter, gap,
+    opacity, outline, overlay, stroke, transform, translate, scale, rotate,
+    skew, perspective;
 }
 
 @utility transition-svg {
-  & {
-    --transition-values: var(--transition-duration) var(--transition-delay)
-      var(--transition-easing);
-    --transition-props: opacity, fill, stroke;
-    transition: var(--transition-values);
-    transition-property: var(--transition-props);
-  }
+  --transition-values: var(--transition-duration) var(--transition-delay)
+    var(--transition-easing);
+  --transition-props: opacity, fill, stroke;
+  transition: var(--transition-values);
+  transition-property: var(--transition-props);
 }
 
 @keyframes z-index-hack {

package/src/type/text-relative.css

@@ -17,16 +17,11 @@
 
 /* Easier usage when CSS functions become available */
 @function --bem(--multiplier) {
-  result: calc(var(--font-size / var(--base-size) * 1em * --multiplier));
+  result: calc(var(--font-size) / var(--base-size) * 1em * var(--multiplier));
 }
 
 @function --blh(--multiplier, --lh-multiplier) {
-  result: calc(
-    var(
-      --font-size / var(--base-size) * 1em * --multiplier *
-        var(--lh-multiplier, var(--leading))
-    )
-  );
+  result: calc(var(--font-size) / var(--base-size) * 1em * var(--multiplier) * var(--lh-multiplier, var(--leading)));
 }
 
 /*********************

package/src/variables/harmonious-type.css

@@ -0,0 +1,47 @@
+/* Harmonious Type Scale (Classic Typographic Scale) *
+ *********************/
+
+/* prettier-ignore */
+@theme {
+  /* REM Values */
+  --text-1:  0.625rem;    /* 10px */
+  --text-2:  0.75rem;     /* 12px */
+  --text-3:  0.875rem;    /* 14px */
+  --text-4:  1rem;        /* 16px */
+  --text-5:  1.125rem;    /* 18px */
+  --text-6:  1.3125rem;   /* 21px */
+  --text-7:  1.5rem;      /* 24px */
+  --text-8:  1.75rem;     /* 28px */
+  --text-9:  2rem;        /* 32px */
+  --text-10: 2.25rem;     /* 36px */
+  --text-11: 2.625rem;    /* 42px */
+  --text-12: 3rem;        /* 48px */
+  --text-13: 3.4375rem;   /* 55px */
+  --text-14: 3.9375rem;   /* 63px */
+  --text-15: 4.5625rem;   /* 73px */
+  --text-16: 5.25rem;     /* 84px */
+  --text-17: 6rem;        /* 96px  */
+  --text-18: 6.875rem;   /* 110px */
+  --text-19: 7.9375rem;  /* 127px */
+
+  /* EM Values */
+  --text-1e:  0.625em;    /* 10px */
+  --text-2e:  0.75em;     /* 12px */
+  --text-3e:  0.875em;    /* 14px */
+  --text-4e:  1em;        /* 16px */
+  --text-5e:  1.125em;    /* 18px */
+  --text-6e:  1.3125em;   /* 21px */
+  --text-7e:  1.5em;      /* 24px */
+  --text-8e:  1.75em;     /* 28px */
+  --text-9e:  2em;        /* 32px */
+  --text-10e: 2.25em;     /* 36px */
+  --text-11e: 2.625em;    /* 42px */
+  --text-12e: 3em;        /* 48px */
+  --text-13e: 3.4375em;   /* 55px */
+  --text-14e: 3.9375em;   /* 63px */
+  --text-15e: 4.5625em;   /* 73px */
+  --text-16e: 5.25em;     /* 84px */
+  --text-17e: 6em;        /* 96px  */
+  --text-18e: 6.875em;   /* 110px */
+  --text-19e: 7.9375em;  /* 127px */
+}