@splendidlabz/styles 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
@@ -23,10 +23,10 @@
     "build": "npm run build-styles & npm run build-layouts"
   },
   "dependencies": {
-    "@splendidlabz/utils": "1.6.0"
+    "@splendidlabz/utils": "1.7.0"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "3.1.0",
+    "@splendidlabz/stylelint-config": "3.1.1",
     "@tailwindcss/cli": "^4.1.3",
     "lightningcss-cli": "^1.29.3",
     "tailwindcss": "^4.1.3",

package/src/components/css/indent-list.css

@@ -1,7 +1,7 @@
 @utility indentlist-scaffold {
   --indentlist-depth: 0;
 
-  li li {
+  :where(li li) {
     margin-inline-start: var(--indent, 1em);
   }
 
@@ -47,15 +47,16 @@
   & {
     @apply indentlist-scaffold;
 
-    li li {
+    li {
       position: relative;
       margin-inline-start: 0;
+      margin-block: 0;
       padding-inline-start: var(--indent, 1em);
 
       a {
         position: relative;
-        margin-left: calc(var(--indent, 1em) * -1);
-        padding-left: var(--indent, 1em);
+        margin-inline-start: calc(var(--indent, 1em) * -2);
+        padding-inline-start: var(--indent, 1em);
       }
 
       &::before,
@@ -65,13 +66,45 @@
         top: 0;
         bottom: 0;
         left: 0;
-        width: 1px;
-        background-color: var(--border-color);
+        width: var(--guide-width, 1px);
+        background-color: var(--guide-color, transparent);
       }
 
       a:hover::before {
-        background-color: var(--border-hover-color);
+        background-color: var(--guide-hover-color, var(--guide-color));
+      }
+
+      a:focus::before {
+        background-color: var(
+          --guide-focus-color,
+          var(--guide-hover-color, var(--guide-color))
+        );
       }
     }
   }
+
+  li li a {
+    margin-inline-start: calc(var(--indent, 1em) * -3);
+  }
+}
+
+@utility indentlist-singleguide {
+  @apply indentlist-guides;
+
+  li {
+    position: relative;
+    margin-inline-start: calc(var(--indent, 1em) * -1);
+    padding-inline-start: 0;
+
+    li a,
+    a {
+      position: relative;
+      margin-inline-start: 0;
+      padding-inline-start: calc(var(--indent, 1em) * var(--depth));
+    }
+  }
+
+  li li {
+    margin-inline-start: 0;
+  }
 }

package/src/components/css/prose.css

@@ -8,22 +8,22 @@
     /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler). */
     > * + :where(h2),
     > * + :where(astro-island, astro-slot) > :where(h2):first-child {
-      margin-top: 1.5rlh;
-      scroll-margin-top: 1.5rlh;
+      margin-top: calc(var(--spacing) * 6);
+      scroll-margin-top: calc(var(--spacing) * 6);
     }
 
     > * + :where(h3),
     > * + :where(astro-island, astro-slot) > :where(h3):first-child {
-      margin-top: 1rlh;
-      margin-bottom: -0.5rlh;
-      scroll-margin-top: 1rlh;
+      margin-top: calc(var(--spacing) * 4);
+      margin-bottom: calc(var(--spacing) * -2);
+      scroll-margin-top: calc(var(--spacing) * 4);
     }
 
     > * + :where(h4, h5, h6),
     > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
-      margin-top: 1rlh;
-      margin-bottom: -1rlh;
-      scroll-margin-top: 1rlh;
+      margin-top: calc(var(--spacing) * 4);
+      margin-bottom: calc(var(--spacing) * -4);
+      scroll-margin-top: calc(var(--spacing) * 4);
     }
 
     :where(ul) {
@@ -31,12 +31,13 @@
     }
 
     /* Basic list styles */
-    > :where(ul, ol),
-    > :where(astro-island, astro-slot) > :where(ul, ol) {
+    :where(ul, ol),
+    > :where(astro-island, astro-slot) :where(ul, ol) {
       list-style-position: outside;
       margin-left: 2em;
 
       :where(ul, ol) {
+        margin-left: 0;
         padding-left: 2em;
       }
 
@@ -45,15 +46,15 @@
       }
 
       li + li {
-        margin-top: 0.25lh;
+        margin-top: calc(var(--spacing));
       }
 
       li:has(li) + li {
-        margin-top: 0.5lh;
+        margin-top: calc(var(--spacing) * 2);
       }
 
       li > :where(ul, ol) {
-        margin-top: 0.25lh;
+        margin-top: calc(var(--spacing));
       }
     }
 

package/src/components/svelte/drawer.css

@@ -10,6 +10,15 @@
 @utility drawer-content {
   overflow-y: auto;
   z-index: 100;
+
+  &.fixed-leftfull {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  &.fixed-rightfull {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
 }
 
 @utility drawer-close-button {

package/src/components/svelte/modal.css

@@ -1,17 +1,17 @@
 @layer base {
   /* Prevent scroll when modal is open */
-  html:has(.modal) {
+  html:has(.modal-content) {
     @apply transition-scaffold;
     --transition-props: overflow;
     transition-duration: 300ms;
   }
 
-  html:has(.modal[open]) {
+  html:has(.modal-content[open]) {
     overflow: hidden;
     transition-delay: 0s;
   }
 
-  .modal:not([open]) {
+  .modal-content:not([open]) {
     pointer-events: none;
     opacity: 0;
   }
@@ -19,20 +19,20 @@
   /* Position fixed and some inset has been automatically applied */
 
   /* Base/Closing Style */
-  .modal {
+  .modal-content {
     @apply border-scaffold;
     margin: auto;
     padding: 1lh;
     color: var(--text-color);
-    background: var(--bg-color);
+    background: var(--bg-color, white);
   }
 
-  .modal::backdrop {
+  .modal-content::backdrop {
     backdrop-filter: blur(0);
   }
 
-  .modal,
-  .modal::backdrop {
+  .modal-content,
+  .modal-content::backdrop {
     @apply transition-scaffold-extended;
     --transition-duration: 300ms;
     --transition-easing: ease-in;
@@ -41,20 +41,20 @@
   }
 
   /* Opened Style */
-  .modal[open],
-  .modal[open]::backdrop {
+  .modal-content[open],
+  .modal-content[open]::backdrop {
     --transition-easing: ease-out;
     opacity: 1;
   }
 
-  .modal[open]::backdrop {
+  .modal-content[open]::backdrop {
     backdrop-filter: blur(var(--blur, 6px));
     background: var(--backdrop-bg, oklch(0% 0 0deg / 50%));
   }
 
   @starting-style {
-    .modal[open],
-    .modal[open]::backdrop {
+    .modal-content[open],
+    .modal-content[open]::backdrop {
       backdrop-filter: blur(0);
       opacity: 0;
     }

package/src/components/svelte/popover.css

@@ -8,10 +8,14 @@
     max-width: 100%;
     padding: 1rem;
     color: var(--text-color);
-    background: var(--bg-color);
+    background: var(--bg-color, white);
     opacity: 0;
   }
 
+  [popover]:not(:popover-open) {
+    display: none !important;
+  }
+
   [popover]:popover-open {
     --transition-easing: ease-in;
     opacity: 1;
@@ -19,6 +23,7 @@
 
   @starting-style {
     [popover]:popover-open {
+      display: block;
       opacity: 0;
     }
   }
@@ -31,8 +36,7 @@
     opacity: 0;
   }
 
-  [popover] > .content,
-  .popover-content {
+  [popover] > * {
     overflow: auto;
   }
 }

package/src/effects/fancybox.css

@@ -1,4 +1,7 @@
 :root {
+  --color-space: oklch;
+  --hue-interpolation: shorter hue;
+
   /* --inner-gradient: linear-gradient(var(--gradient-angle), #563444, #4ecdc4); */
   /* --bg-color: transparent;
   --outer-gradient: linear-gradient(
@@ -9,39 +12,64 @@
   --text-color: white; */
 }
 
+/* Useful for creating gradient border with solid color within. Not very useful if you wanna stack gradients together and bleed it out. */
 @utility fancybox {
   & {
     @apply border-scaffold;
-    --a: var(--arrow-angle, 90deg);
-    --h: var(--arrow-height, 0.75em);
-    --p: var(--arrow-position, 50%);
     --b: var(--border-width);
     --r: var(--radius);
-    --_bg-gradient-fallback: linear-gradient(
-      var(--bg-color, transparent),
-      var(--bg-color, transparent)
+    --_inner-gradient: linear-gradient(
+      var(--inner-gradient-angle, var(--gradient-angle)) in
+        var(--inner-gradient-color-space, var(--color-space))
+        var(--inner-gradient-hue-interpolation, var(--hue-interpolation)),
+      var(
+        --inner-gradient,
+        var(--bg-color, transparent),
+        var(--bg-color, transparent)
+      )
     );
-    --_border-gradient-fallback: linear-gradient(
-      var(--border-color),
-      var(--border-color)
+    --_outer-gradient: linear-gradient(
+      var(--outer-gradient-angle, var(--gradient-angle)) in
+        var(--outer-gradient-color-space, var(--color-space))
+        var(--outer-gradient-hue-interpolation, var(--hue-interpolation)),
+      var(
+        --outer-gradient,
+        var(--border-color, transparent),
+        var(--border-color, transparent)
+      )
     );
-    overflow: visible;
     position: relative;
-    z-index: 0;
     border-width: var(--b);
     border-color: transparent;
     color: var(--text-color);
     background:
-      padding-box var(--inner-gradient, var(--_bg-gradient-fallback)),
-      border-box var(--outer-gradient, var(--_border-gradient-fallback));
+      padding-box var(--_inner-gradient),
+      border-box var(--_outer-gradient);
 
     /* animation: rotate-angle 10s linear infinite paused; */
   }
 }
 
+/* Creates a border on the fancybox so the gradient bleeds onto the border. */
+@utility fancybox-bleed-border {
+  &::after {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    inset: calc(-1 * var(--border-width));
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: inherit;
+  }
+}
+
 @utility fancybox-arrow {
   & {
     @apply fancybox;
+    --a: var(--arrow-angle, 90deg);
+    --h: var(--arrow-height, 0.75em);
+    --p: var(--arrow-position, 50%);
+    overflow: visible;
+    z-index: 0;
   }
 
   &.arrow-top,

package/src/effects/frosted-glass.css

@@ -4,8 +4,9 @@
 
 @utility frosted-glass {
   & {
+    @apply transition-scaffold-extended;
     position: relative;
-    backdrop-filter: blur(16px);
+    backdrop-filter: blur(var(--blur, 16px));
     border: inherit;
   }
 }

package/src/effects/gradients.css

@@ -13,7 +13,7 @@
     --gradient-position: center; /* For radial and conic gradients */
     --gradient-shape: ; /* For radial and conic gradients */
     --gradient-size: ; /* For radial gradient */
-    --color-space: oklab;
+    --color-space: oklch;
     --hue-interpolation: ;
   }
 }
@@ -82,7 +82,7 @@
       var(--gradient)
     );
 
-    @supports (linear-gradient(in oklab)) {
+    @supports (linear-gradient(in oklch)) {
       background-image: repeating-linear-gradient(
         var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
         var(--gradient)

package/src/generic/anchors-and-buttons.css

@@ -7,7 +7,7 @@
     align-items: center;
     gap: 0.5em;
     max-width: 100%;
-    padding: 0.25em 1em;
+    padding: 0.125lh 0.75lh;
     font: inherit;
     font-family: var(--input-font);
     text-decoration: none !important;
@@ -43,8 +43,8 @@
 
 @layer base {
   a {
-    @apply pigment-with-svg;
-    border-radius: 0;
+    /* @apply pigment; */
+    /* border-radius: 0; */
     text-decoration: none;
   }
 

package/src/generic/form.css

@@ -5,13 +5,13 @@
 
   /* Text inputs */
   input:where(
-      [type='text'],
-      [type='search'],
-      [type='email'],
-      [type='password'],
-      [type='tel'],
-      [type='url']
-    ),
+    [type='text'],
+    [type='search'],
+    [type='email'],
+    [type='password'],
+    [type='tel'],
+    [type='url']
+  ),
   textarea,
   select,
   .field {
@@ -20,7 +20,7 @@
     @apply outline-scaffold;
     display: block;
     width: 100%;
-    padding: 0.25lh 0.5lh;
+    padding: 0.125lh 0.5lh;
     font: inherit;
     font-family: var(--input-font);
     color: var(--text-color, currentcolor);
@@ -53,4 +53,9 @@
       outline-color: transparent;
     }
   }
+
+  /* This is for honeypot */
+  .form-field-helper {
+    display: none !important;
+  }
 }

package/src/generic/index.css

@@ -2,3 +2,4 @@
 @import './typography.css';
 @import './form.css';
 @import './anchors-and-buttons.css';
+@import './scroll-behavior.css';

package/src/generic/scroll-behavior.css

@@ -0,0 +1,5 @@
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+}

package/src/layouts/macro/grid.css

@@ -10,9 +10,8 @@
   inherits: false;
 }
 
-/* Gotta test for subgrid after adding inherit-false to --span */
 @property --span {
-  syntax: '<integer> | auto';
+  syntax: '<number> | auto';
   initial-value: 1;
   inherits: false;
 }
@@ -29,18 +28,19 @@
   inherits: false;
 }
 
+/* Major change here to set to width to 100% and max-width is self-set */
 @utility grid-scaffold {
   & {
     display: grid;
     gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
-    max-width: 100%;
+    /* width: 100%; */
 
     > *,
     > *:where(.contents) > *,
     > *:where(astro-island, astro-slot) > * {
-      grid-column: var(--colstart) / span var(--span);
-      grid-row: var(--rowstart) / span var(--rowspan);
-      max-width: 100%;
+      grid-column: var(--colstart) / var(--colend, span var(--span));
+      grid-row: var(--rowstart) / var(--rowend, span var(--rowspan));
+      /* width: 100%; */
     }
   }
 }

package/src/layouts/micro/stack.css

@@ -28,3 +28,21 @@
     }
   }
 }
+
+@utility stack-interactive {
+  & {
+    @apply stack;
+
+    > .overlay {
+      @apply pos-overlay;
+      opacity: 0;
+    }
+
+    &:hover,
+    &:focus-within {
+      > .overlay {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/layouts/position/edge.css

@@ -215,7 +215,9 @@
 /* Top *
  *********************/
 @utility edge-adjust-top {
+  --tx: 0%;
   --ty: -50%;
+  --_tx: var(--tx);
   --_ty: var(--ty);
 }
 
@@ -258,7 +260,9 @@
 /* Bottom *
  *********************/
 @utility edge-adjust-bottom {
+  --tx: 0%;
   --ty: -50%;
+  --_tx: var(--tx);
   --_ty: calc(var(--ty) * -1);
 }
 
@@ -302,7 +306,9 @@
  *********************/
 @utility edge-adjust-left {
   --tx: -50%;
+  --ty: 0%;
   --_tx: var(--tx);
+  --_ty: var(--ty);
 }
 
 @utility edge-adjust-lefttop-start {
@@ -345,7 +351,9 @@
  *********************/
 @utility edge-adjust-right {
   --tx: -50%;
+  --ty: 0%;
   --_tx: calc(var(--tx) * -1);
+  --_ty: calc(var(--ty) * -1);
 }
 
 @utility edge-adjust-righttop-start {

package/src/reset.css

@@ -99,7 +99,7 @@ hr {
 * The hidden attribute *
 *********************/
 [hidden] {
-  display: none;
+  display: none !important;
   opacity: 0;
   visibility: hidden;
 }

package/src/tools/color.css

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

package/src/tools/index.css

@@ -1,3 +1,4 @@
+@import './color.css';
 @import './pigment.css';
 @import './outlines.css';
 @import './scaffolds.css';

package/src/tools/pigment.css

@@ -38,16 +38,16 @@ Usage with the Fill System
     --_bc: var(--border-color, currentcolor);
     border-color: var(--_bc, currentcolor);
     color: var(--_tc);
-    background-color: var(--_bgc);
+    background: var(--_bgc);
   }
 }
 
 @utility pigment-svg-scaffold {
+  --_fc: var(--fill-color, transparent);
+  --_sc: var(--stroke-color, var(--text-color, currentcolor));
   & {
     :where(svg path) {
       @apply transition-scaffold;
-      --_fc: var(--fill-color, var(--text-color));
-      --_sc: var(--stroke-color, var(--text-color));
       fill: var(--_fc);
       stroke: var(--_sc);
     }
@@ -64,13 +64,13 @@ Usage with the Fill System
 
 @utility pigment-hover-svg-scaffold {
   &:hover {
-    --_fc: var(
-      --fill-hover-color,
-      var(--text-hover-color, var(--fill-color, var(--text-color)))
-    );
+    --_fc: var(--fill-hover-color, var(--fill-color, transparent));
     --_sc: var(
       --stroke-hover-color,
-      var(--text-hover-color, var(--stroke-color, var(--text-color)))
+      var(
+        --text-hover-color,
+        var(--stroke-color, var(--text-color, currentcolor))
+      )
     );
   }
 }
@@ -88,13 +88,16 @@ Usage with the Fill System
 
 @utility pigment-focus-svg-scaffold {
   &:focus {
-    --_fc: var(
-      --fill-focus-color,
-      var(--text-focus-color, var(--fill-color, var(--text-color)))
-    );
+    --_fc: var(--fill-focus-color, var(--fill-color, transparent));
     --_sc: var(
       --stroke-focus-color,
-      var(--text-focus-color, var(--stroke-color, var(--text-color)))
+      var(
+        --text-focus-color,
+        var(
+          --stroke-hover-color,
+          var(--stroke-color, var(--text-color, currentcolor))
+        )
+      )
     );
   }
 }
@@ -109,13 +112,13 @@ Usage with the Fill System
 
 @utility pigment-active-svg-scaffold {
   &:active {
-    --_fc: var(
-      --fill-active-color,
-      var(--text-active-color, var(--fill-color, var(--text-color)))
-    );
+    --_fc: var(--fill-active-color, var(--fill-color, transparent));
     --_sc: var(
       --stroke-active-color,
-      var(--text-active-color, var(--stroke-color, var(--text-color)))
+      var(
+        --text-active-color,
+        var(--stroke-color, var(--text-color, currentcolor))
+      )
     );
   }
 }
@@ -140,13 +143,13 @@ Usage with the Fill System
   &[aria-selected='true'],
   &[aria-pressed='true'],
   &[aria-expanded='true'] {
-    --_fc: var(
-      --fill-selected-color,
-      var(--text-selected-color, var(--fill-color, var(--text-color)))
-    );
+    --_fc: var(--fill-selected-color, var(--fill-color, transparent));
     --_sc: var(
       --stroke-selected-color,
-      var(--text-selected-color, var(--stroke-color, var(--text-color)))
+      var(
+        --text-selected-color,
+        var(--stroke-color, var(--text-color, currentcolor))
+      )
     );
   }
 }
@@ -163,6 +166,14 @@ Usage with the Fill System
   @apply pigment-selected-scaffold;
 }
 
+@utility pigment-svg {
+  @apply pigment-svg-scaffold;
+  @apply pigment-hover-svg-scaffold;
+  @apply pigment-focus-svg-scaffold;
+  @apply pigment-active-svg-scaffold;
+  @apply pigment-selected-svg-scaffold;
+}
+
 @utility pigment-with-svg {
   @apply pigment-scaffold;
   @apply pigment-svg-scaffold;

package/src/type/index.css

@@ -1,2 +1,3 @@
 @import './font-position.css';
 @import './text-relative.css';
+@import './text-edge.css';

package/src/type/text-edge.css

@@ -0,0 +1,3 @@
+@utility text-edge {
+  text-box-edge: cap alphabetic;
+}

package/src/type/text-relative.css

@@ -32,7 +32,7 @@
 /*********************
  * Legacy Versions *
  *********************/
-@utility text-relative-base {
+/* @utility text-relative-base {
   font-size: calc(var(--text-base-size) * 1rem);
 }
 
@@ -40,14 +40,12 @@
   font-size: calc(var(--text-size) / var(--text-base-size) * 1em);
 }
 
-/* prettier-ignore */
 @utility rtext-base-* {
   @apply text-base;
   --text-base-size: --value(--text-base-*, [size]);
 }
 
-/* prettier-ignore */
 @utility rtext-* {
   @apply text-relative;
   --text-size: --value(--text-*, [size]);
-}
+} */