@splendidlabz/styles 4.0.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.0.1",
+  "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.5.1"
+    "@splendidlabz/utils": "1.7.0"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "3.0.1",
+    "@splendidlabz/stylelint-config": "3.1.1",
     "@tailwindcss/cli": "^4.1.3",
     "lightningcss-cli": "^1.29.3",
     "tailwindcss": "^4.1.3",

package/src/components/astro/fancylist.css

@@ -3,13 +3,17 @@
     --svg-width: 1em;
     --svg-height: 1lh;
     display: grid;
-    grid-template-columns: auto 1fr;
+
+    /* grid-template-columns: auto 1fr; */
     column-gap: 0.5em;
 
     :where(li) {
       grid-column: 1 / -1;
       display: grid;
-      grid-template-columns: subgrid;
+
+      /* grid-template-columns: subgrid; */
+      grid-template-columns: auto 1fr;
+      column-gap: inherit;
 
       /* Positions the Emoji */
 
@@ -19,10 +23,12 @@
         font-size: 0.75em;
         line-height: 1lh;
       }
-    }
-  }
 
-  .prose & {
-    margin-left: 0;
+      :where(ul) {
+        grid-column: 2;
+        display: grid;
+        column-gap: inherit;
+      }
+    }
   }
 }

package/src/components/css/card.css

@@ -1,56 +1,97 @@
+@utility box {
+  @apply card;
+}
+
 @utility card {
   & {
-    padding: var(--padding, 1rlh);
-    border: var(--border-width) var(--border-style) var(--border-color);
-    border-radius: var(--radius);
+    @apply border-scaffold;
+    @apply padding-scaffold;
   }
 }
 
-@utility card-split {
+@utility card-divided {
   & {
-    @apply card;
+    @apply border-scaffold;
+    position: relative;
 
-    > *,
-    :where(astro-slot, astro-island, astro-content) > * {
-      @apply nudge;
-      padding: var(--padding, 1rlh);
+    &:is(&) {
+      gap: 0;
+      padding: 0;
     }
 
-    /* Inner Card Split */
-    > .card-split {
-      border: 0;
-    }
+    > *:not(&),
+    > :where(astro-slot, astro-island, astro-content) > *:not(&) {
+      @apply padding-scaffold;
+      --fallback-padding: 1rlh;
 
-    &.card-split {
-      /* Increase specificity to overwrite padding and gap utilities used on card-split. */
-      overflow: hidden;
-      gap: 0;
-      padding: 0;
+      /* @apply inner-radius; */
 
-      > *,
-      :where(astro-slot, astro-island, astro-content) > * {
-        border-radius: calc(var(--radius) - var(--nudge));
+      /* Raise for nicer focus ring */
+      &:focus-visible {
+        z-index: 2;
       }
-    }
 
-    /* Adjust borders */
-    &:where(.divider-between-x, .divider-between-horizontal)
-      > :where(.card-split) {
-      border-width: 0;
-      border-top-width: var(--border-width);
+      &:not(:focus-visible) {
+        --z-index: 1;
+        animation: z-index-hack var(--transition-duration)
+          var(--transition-delay);
+      }
     }
+  }
+}
 
-    &:where(.divider-between-y, .divider-between-vertical)
-      > :where(.card-split) {
-      border-width: 0;
-      border-left-width: var(--border-width);
-    }
+@utility card-divided-horizontal {
+  @apply horizontal;
+  @apply divider-between-y;
+
+  > * {
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  > :where(:not(:first-child)) {
+    border-left-width: var(--border-width);
+    border-color: var(--_bc, var(--border-color));
+  }
+
+  > :where(:first-child) {
+    border-radius: 0;
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
+
+  > :where(:last-child) {
+    border-radius: 0;
+    border-top-right-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
   }
 }
 
-/*********************
- * Aliases *
- *********************/
-@utility box {
-  @apply card;
+@utility card-divided-vertical {
+  @apply vertical;
+  @apply divider-between-x;
+
+  > * {
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  > :where(:not(:first-child)) {
+    border-top-width: var(--border-width);
+    border-style: var(--border-style);
+  }
+
+  > :first-child {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
+
+  > :last-child {
+    border-bottom-left-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+  }
+}
+
+@utility card-split {
+  @apply card-divided;
 }

package/src/components/css/hero-heading.css

@@ -4,7 +4,7 @@
 @utility hero-heading {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--gap, 0.5lh);
   max-width: 100%;
 
   > .eyebrow {
@@ -29,6 +29,7 @@
   & {
     @apply hero-heading;
     align-self: center;
+    align-items: center;
     margin-inline: auto;
     text-align: center;
   }

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

@@ -7,25 +7,23 @@
 
     /* 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(:where(h2):first-child) {
-      margin-top: 1.5rlh;
-      scroll-margin-top: 1.5rlh;
+    > * + :where(astro-island, astro-slot) > :where(h2):first-child {
+      margin-top: calc(var(--spacing) * 6);
+      scroll-margin-top: calc(var(--spacing) * 6);
     }
 
     > * + :where(h3),
-    > * + :where(astro-island, astro-slot) > :where(:where(h3):first-child) {
-      margin-top: 1rlh;
-      margin-bottom: -0.5rlh;
-      scroll-margin-top: 1rlh;
+    > * + :where(astro-island, astro-slot) > :where(h3):first-child {
+      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(:where(h4, h5, h6):first-child) {
-      margin-top: 1rlh;
-      margin-bottom: -1rlh;
-      scroll-margin-top: 1rlh;
+    > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
+      margin-top: calc(var(--spacing) * 4);
+      margin-bottom: calc(var(--spacing) * -4);
+      scroll-margin-top: calc(var(--spacing) * 4);
     }
 
     :where(ul) {
@@ -33,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;
       }
 
@@ -47,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));
       }
     }
 
@@ -68,5 +67,10 @@
       border: 1px solid oklch(90% 0 0deg);
       border-radius: var(--radius);
     }
+
+    &.fancylist,
+    & .fancylist {
+      padding-left: 0;
+    }
   }
 }

package/src/components/svelte/accordion.css

@@ -1,4 +1,16 @@
+@utility accordion-stack {
+  @apply card-divided card-divided-vertical;
+
+  .accordion-button {
+    padding: 0;
+  }
+}
+
 @utility accordion {
+  &:not(.accordion-stack &) {
+    @apply border-scaffold;
+  }
+
   svg {
     transition: var(--transition-values);
     transition-property: var(--transition-props);
@@ -12,6 +24,7 @@
 @utility accordion-button {
   & {
     @apply padding-scaffold;
+    --border-width: 0;
     display: flex;
     justify-content: space-between;
     align-items: start;
@@ -33,5 +46,9 @@
 }
 
 @utility accordion-content {
-  padding: 1rem;
+  @apply padding-scaffold;
+
+  &:not(.accordion-stack &) {
+    padding-top: 0;
+  }
 }

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,21 +19,21 @@
   /* 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 {
-    @apply transition-scaffold;
+  .modal-content,
+  .modal-content::backdrop {
+    @apply transition-scaffold-extended;
     --transition-duration: 300ms;
     --transition-easing: ease-in;
     opacity: 0;
@@ -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

@@ -1,17 +1,21 @@
 @layer base {
   [popover] {
     @apply border-scaffold;
-    @apply transition-scaffold;
+    @apply transition-scaffold-extended;
     --transition-duration: 300ms;
     --transition-easing: ease-out;
     position: absolute;
     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/{fancy-box.css → 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,40 +12,64 @@
   --text-color: white; */
 }
 
-@utility fancy-box {
+/* 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;
-    padding: 0.5em; /* To remove */
     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; */
   }
 }
 
-@utility fancy-box-arrow {
+/* 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 fancy-box;
+    @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/effects/index.css

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

package/src/form/input.css

@@ -31,6 +31,7 @@
       padding: var(--padding);
       border-width: 0;
 
+      /* TODO: Remove the following and use 'card-divided-horizontal' and 'card-divided-vertical' instead. Keep padding though */
       &:where(:not(:first-child, :last-child)) {
         border-radius: 0;
       }