@splendidlabz/styles 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.0.0",
+  "version": "4.1.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.0"
+    "@splendidlabz/utils": "1.6.0"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "3.0.0",
+    "@splendidlabz/stylelint-config": "3.1.0",
     "@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/prose.css

@@ -7,22 +7,20 @@
 
     /* 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) {
+    > * + :where(astro-island, astro-slot) > :where(h2):first-child {
       margin-top: 1.5rlh;
       scroll-margin-top: 1.5rlh;
     }
 
     > * + :where(h3),
-    > * + :where(astro-island, astro-slot) > :where(:where(h3):first-child) {
+    > * + :where(astro-island, astro-slot) > :where(h3):first-child {
       margin-top: 1rlh;
       margin-bottom: -0.5rlh;
       scroll-margin-top: 1rlh;
     }
 
     > * + :where(h4, h5, h6),
-    > *
-      + :where(astro-island, astro-slot)
-      > :where(:where(h4, h5, h6):first-child) {
+    > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
       margin-top: 1rlh;
       margin-bottom: -1rlh;
       scroll-margin-top: 1rlh;
@@ -68,5 +66,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/modal.css

@@ -33,7 +33,7 @@
 
   .modal,
   .modal::backdrop {
-    @apply transition-scaffold;
+    @apply transition-scaffold-extended;
     --transition-duration: 300ms;
     --transition-easing: ease-in;
     opacity: 0;

package/src/components/svelte/popover.css

@@ -1,7 +1,7 @@
 @layer base {
   [popover] {
     @apply border-scaffold;
-    @apply transition-scaffold;
+    @apply transition-scaffold-extended;
     --transition-duration: 300ms;
     --transition-easing: ease-out;
     position: absolute;

package/src/effects/{fancy-box.css → fancybox.css}

@@ -9,7 +9,7 @@
   --text-color: white; */
 }
 
-@utility fancy-box {
+@utility fancybox {
   & {
     @apply border-scaffold;
     --a: var(--arrow-angle, 90deg);
@@ -28,7 +28,6 @@
     overflow: visible;
     position: relative;
     z-index: 0;
-    padding: 0.5em; /* To remove */
     border-width: var(--b);
     border-color: transparent;
     color: var(--text-color);
@@ -40,9 +39,9 @@
   }
 }
 
-@utility fancy-box-arrow {
+@utility fancybox-arrow {
   & {
-    @apply fancy-box;
+    @apply fancybox;
   }
 
   &.arrow-top,

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;
       }

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

@@ -13,6 +13,10 @@
     text-decoration: none !important;
     cursor: pointer;
 
+    &[disabled] {
+      cursor: default;
+    }
+
     * {
       pointer-events: none;
     }

package/src/layouts/macro/grid.css

@@ -64,30 +64,60 @@
  *********************/
 @utility grid-fr-auto {
   @apply grid-scaffold;
-  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+  grid-template-columns:
+    repeat(calc(var(--cols) - 1), minmax(0, 1fr))
+    minmax(0, auto);
 }
 
 @utility grid-auto-fr {
   @apply grid-scaffold;
-  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+  grid-template-columns: minmax(0, auto) repeat(
+      calc(var(--cols) - 1),
+      minmax(0, 1fr)
+    );
 }
 
 @utility grid-with-breakout {
   & {
-    @apply grid-scaffold;
+    display: grid;
     grid-template-columns:
-      [breakout-start] 1fr [content-start] repeat(
-        var(--cols, 1),
-        minmax(0, 1fr)
-      )
-      [content-end] 1fr [breakout-end];
-
-    > *:not([class*='breakout-full']) {
-      grid-column: content-start / content-end;
+      minmax(0, var(--start-width, var(--side-width, 0.25fr)))
+      minmax(0, var(--content-width, 1fr))
+      minmax(0, var(--end-width, var(--side-width, 0.25fr)));
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+    max-width: 100%;
+
+    > * {
+      grid-column: 2 / -2;
+      max-width: 100%;
+    }
+
+    > .breakout-small {
+      grid-column: auto / span 1;
+    }
+
+    > .breakout-start-only,
+    > .breakout-left-only {
+      grid-column: 1 / 2;
+    }
+
+    > .breakout-start,
+    > .breakout-left {
+      grid-column: 1 / -2;
+    }
+
+    > .breakout-end,
+    > .breakout-right {
+      grid-column: 2 / -1;
+    }
+
+    > .breakout-end-only,
+    > .breakout-right-only {
+      grid-column: -1 / -2;
     }
 
-    > *:where(.breakout-full) {
-      grid-column: breakout-start / breakout-end;
+    > .breakout-full {
+      grid-column: 1 / -1;
     }
   }
 }

package/src/layouts/micro/divider.css

@@ -34,6 +34,7 @@
 @utility divider-y {
   & {
     @apply divider-scaffold;
+    flex-grow: 0;
     flex-direction: column;
 
     &::before,
@@ -63,9 +64,9 @@
     row-gap: 0;
 
     > * + *,
-    > * + *:where(astro-island, astro-slot) > * {
+    > * + *:where(astro-island, astro-slot):not(:first-of-type) > * {
       border-top-width: var(--border-width, 1px);
-      border-color: var(--border-color);
+      border-color: var(--_bc, var(--border-color));
     }
   }
 }
@@ -77,7 +78,7 @@
     > * + *,
     > * + *:where(astro-island, astro-slot) > * {
       border-left-width: var(--border-width, 1px);
-      border-color: var(--border-color);
+      border-color: var(--_bc, var(--border-color));
     }
   }
 }

package/src/layouts/micro/index.css

@@ -4,3 +4,4 @@
 @import './breakout.css';
 @import './stacking-context.css';
 @import './scrollable.css';
+@import './inner-spacing.css';

package/src/layouts/micro/inner-spacing.css

@@ -0,0 +1,39 @@
+/*********************
+ * Inner Margin *
+ *********************/
+@utility im-* {
+  & > * {
+    margin: calc(var(--spacing) * --value(integer));
+    margin: calc(--value([length]));
+  }
+}
+
+@utility im-x-* {
+  margin-inline: calc(var(--spacing) * --value(integer));
+  margin-inline: calc(--value([length]));
+}
+
+@utility im-y-* {
+  margin-block: calc(var(--spacing) * --value(integer));
+  margin-block: calc(--value([length]));
+}
+
+/*********************
+ * Inner Padding *
+ *********************/
+@utility ip-* {
+  & > * {
+    padding: calc(var(--spacing) * --value(integer));
+    padding: calc(--value([length]));
+  }
+}
+
+@utility ip-x-* {
+  padding-inline: calc(var(--spacing) * --value(integer));
+  padding-inline: calc(--value([length]));
+}
+
+@utility ip-y-* {
+  padding-block: calc(var(--spacing) * --value(integer));
+  padding-block: calc(--value([length]));
+}

package/src/layouts/micro/micro.css

@@ -14,6 +14,7 @@
   @apply micro;
   display: flex;
   flex-direction: row;
+  flex-wrap: nowrap;
   gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
 
   > .spacer {
@@ -27,6 +28,7 @@
   @apply micro;
   display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
   gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
 
   > .spacer {