@splendidlabz/styles 4.0.1 → 4.2.0

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

@@ -7,12 +7,16 @@
     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;
     cursor: pointer;
 
+    &[disabled] {
+      cursor: default;
+    }
+
     * {
       pointer-events: none;
     }
@@ -39,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%; */
     }
   }
 }
@@ -64,12 +64,17 @@
  *********************/
 @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 {

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 {

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

@@ -6,8 +6,6 @@
 /* prettier-ignore */
 @utility edge-scaffold {
   transform: translateX(var(--_tx, 0%)) translateY(var(--_ty, 0%));
-  :where(.stack) > & { box-sizing: content-box; }
-  :where(.relative > &) { position: absolute; }
 }
 
 /*********************
@@ -17,69 +15,85 @@
 /* Top */
 @utility stack-edge-top {
   place-self: start center;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-topleft {
   place-self: start start;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-topright {
   place-self: start end;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-topfull {
   place-self: start stretch;
+  box-sizing: content-box;
 }
 
 /* Bottom */
 @utility stack-edge-bottom {
   place-self: end center;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-bottomleft {
   place-self: end start;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-bottomright {
   place-self: end end;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-bottomfull {
   place-self: end stretch;
+  box-sizing: content-box;
 }
 
 /* Left */
 @utility stack-edge-left {
   place-self: center start;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-lefttop {
   place-self: start start;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-leftbottom {
   place-self: end start;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-leftfull {
   place-self: stretch start;
+  box-sizing: content-box;
 }
 
 /* Right */
 @utility stack-edge-right {
   place-self: center end;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-righttop {
   place-self: start end;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-rightbottom {
   place-self: end end;
+  box-sizing: content-box;
 }
 
 @utility stack-edge-rightfull {
   place-self: stretch end;
+  box-sizing: content-box;
 }
 
 /*********************
@@ -88,6 +102,7 @@
 
 /* Top */
 @utility relative-edge-top {
+  position: absolute;
   inset-block-start: 0;
   inset-inline: 0;
   width: fit-content;
@@ -95,22 +110,26 @@
 }
 
 @utility relative-edge-topleft {
+  position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
 
 @utility relative-edge-topright {
+  position: absolute;
   inset-block-start: 0;
   inset-inline-end: 0;
 }
 
 @utility relative-edge-topfull {
+  position: absolute;
   inset-block-start: 0;
   inset-inline: 0;
 }
 
 /* Bottom */
 @utility relative-edge-bottom {
+  position: absolute;
   inset-block-end: 0;
   inset-inline: 0;
   width: fit-content;
@@ -118,22 +137,26 @@
 }
 
 @utility relative-edge-bottomfull {
+  position: absolute;
   inset-block-end: 0;
   inset-inline: 0;
 }
 
 @utility relative-edge-bottomleft {
+  position: absolute;
   inset-block-end: 0;
   inset-inline-start: 0;
 }
 
 @utility relative-edge-bottomright {
+  position: absolute;
   inset-block-end: 0;
   inset-inline-end: 0;
 }
 
 /* Left */
 @utility relative-edge-left {
+  position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   height: fit-content;
@@ -141,22 +164,26 @@
 }
 
 @utility relative-edge-lefttop {
+  position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
 
 @utility relative-edge-leftbottom {
+  position: absolute;
   inset-block-end: 0;
   inset-inline-start: 0;
 }
 
 @utility relative-edge-leftfull {
+  position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
 }
 
 /* Right */
 @utility relative-edge-right {
+  position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
   height: fit-content;
@@ -164,16 +191,19 @@
 }
 
 @utility relative-edge-righttop {
+  position: absolute;
   inset-block-start: 0;
   inset-inline-end: 0;
 }
 
 @utility relative-edge-rightbottom {
+  position: absolute;
   inset-block-end: 0;
   inset-inline-end: 0;
 }
 
 @utility relative-edge-rightfull {
+  position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
 }
@@ -185,7 +215,9 @@
 /* Top *
  *********************/
 @utility edge-adjust-top {
+  --tx: 0%;
   --ty: -50%;
+  --_tx: var(--tx);
   --_ty: var(--ty);
 }
 
@@ -228,7 +260,9 @@
 /* Bottom *
  *********************/
 @utility edge-adjust-bottom {
+  --tx: 0%;
   --ty: -50%;
+  --_tx: var(--tx);
   --_ty: calc(var(--ty) * -1);
 }
 
@@ -272,7 +306,9 @@
  *********************/
 @utility edge-adjust-left {
   --tx: -50%;
+  --ty: 0%;
   --_tx: var(--tx);
+  --_ty: var(--ty);
 }
 
 @utility edge-adjust-lefttop-start {
@@ -315,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 {
@@ -362,11 +400,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-top;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-top;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-top;
   }
 }
@@ -376,11 +414,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-topleft;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-topleft;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-topleft;
   }
 }
@@ -390,11 +428,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-topright;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-topright;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-topright;
   }
 }
@@ -404,11 +442,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-top;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-topfull;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-topfull;
   }
 }
@@ -419,11 +457,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-bottom;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-bottom;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-bottom;
   }
 }
@@ -433,11 +471,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-bottomleft;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-bottomleft;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-bottomleft;
   }
 }
@@ -447,11 +485,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-bottomright;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-bottomright;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-bottomright;
   }
 }
@@ -461,11 +499,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-bottom;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-bottomfull;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-bottomfull;
   }
 }
@@ -476,11 +514,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-left;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-left;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-left;
   }
 }
@@ -490,11 +528,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-lefttop;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-lefttop;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-lefttop;
   }
 }
@@ -504,11 +542,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-leftbottom;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-leftbottom;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-leftbottom;
   }
 }
@@ -518,11 +556,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-left;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-leftfull;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-leftfull;
   }
 }
@@ -533,11 +571,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-right;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-right;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-right;
   }
 }
@@ -547,11 +585,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-righttop;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-righttop;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-righttop;
   }
 }
@@ -561,11 +599,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-rightbottom;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-rightbottom;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-rightbottom;
   }
 }
@@ -575,11 +613,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-right;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-rightfull;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-rightfull;
   }
 }