@splendidlabz/styles 4.0.0 → 4.1.0

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;
 }
@@ -362,11 +392,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 +406,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 +420,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 +434,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 +449,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 +463,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 +477,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 +491,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 +506,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 +520,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 +534,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 +548,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 +563,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 +577,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 +591,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 +605,11 @@
   @apply edge-scaffold;
   @apply edge-adjust-right;
 
-  :where(.stack) > & {
+  :where(.stack) & {
     @apply stack-edge-rightfull;
   }
 
-  :where(.relative) > & {
+  :where(.relative) & {
     @apply relative-edge-rightfull;
   }
 }

package/src/tools/index.css

@@ -1,5 +1,5 @@
 @import './pigment.css';
 @import './outlines.css';
-@import './border.css';
+@import './scaffolds.css';
 @import './object.css';
 @import './transitions.css';

package/src/tools/pigment.css

@@ -33,9 +33,12 @@ Usage with the Fill System
   & {
     @apply border-scaffold;
     @apply transition-scaffold;
-    border-color: var(--border-color, currentcolor);
-    color: var(--text-color, currentcolor);
-    background-color: var(--bg-color);
+    --_bgc: var(--bg-color);
+    --_tc: var(--text-color, currentcolor);
+    --_bc: var(--border-color, currentcolor);
+    border-color: var(--_bc, currentcolor);
+    color: var(--_tc);
+    background-color: var(--_bgc);
   }
 }
 
@@ -43,99 +46,77 @@ Usage with the Fill System
   & {
     :where(svg path) {
       @apply transition-scaffold;
-      fill: var(--fill-color, var(--text-color));
-      stroke: var(
-        --stroke-color,
-        var(--text-color)
-      ); /* Fallback to text color */
+      --_fc: var(--fill-color, var(--text-color));
+      --_sc: var(--stroke-color, var(--text-color));
+      fill: var(--_fc);
+      stroke: var(--_sc);
     }
   }
 }
 
 @utility pigment-hover-scaffold {
   &:hover {
-    border-color: var(--border-hover-color, var(--border-color));
-    color: var(--text-hover-color, var(--text-color));
-    background-color: var(--bg-hover-color, var(--bg-color));
+    --_bgc: var(--bg-hover-color, var(--bg-color));
+    --_tc: var(--text-hover-color, var(--text-color));
+    --_bc: var(--border-hover-color, var(--border-color));
   }
 }
 
 @utility pigment-hover-svg-scaffold {
   &:hover {
-    :where(svg path) {
-      fill: var(
-        --fill-hover-color,
-        var(--text-hover-color, var(--fill-color, var(--text-color)))
-      );
-      stroke: var(
-        --stroke-hover-color,
-        var(--text-hover-color, var(--stroke-color, var(--text-color)))
-      );
-    }
+    --_fc: var(
+      --fill-hover-color,
+      var(--text-hover-color, var(--fill-color, var(--text-color)))
+    );
+    --_sc: var(
+      --stroke-hover-color,
+      var(--text-hover-color, var(--stroke-color, var(--text-color)))
+    );
   }
 }
 
 @utility pigment-focus-scaffold {
   &:focus {
-    border-color: var(
+    --_bc: var(
       --border-focus-color,
       var(--border-hover-color, var(--border-color))
     );
-    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
-    background-color: var(
-      --bg-focus-color,
-      var(--bg-hover-color, var(--bg-color))
-    );
+    --_tc: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    --_bgc: var(--bg-focus-color, var(--bg-hover-color, var(--bg-color)));
   }
 }
 
 @utility pigment-focus-svg-scaffold {
   &:focus {
-    :where(svg path) {
-      fill: var(
-        --fill-focus-color,
-        var(
-          --text-focus-color,
-          var(
-            --fill-hover-color,
-            var(--text-hover-color, var(--fill-color, var(--text-color)))
-          )
-        )
-      );
-      stroke: var(
-        --stroke-focus-color,
-        var(
-          --text-focus-color,
-          var(
-            --stroke-hover-color,
-            var(--text-hover-color, var(--stroke-color, var(--text-color)))
-          )
-        )
-      );
-    }
+    --_fc: var(
+      --fill-focus-color,
+      var(--text-focus-color, var(--fill-color, var(--text-color)))
+    );
+    --_sc: var(
+      --stroke-focus-color,
+      var(--text-focus-color, var(--stroke-color, var(--text-color)))
+    );
   }
 }
 
 @utility pigment-active-scaffold {
   &:active {
-    border-color: var(--border-active-color, var(--border-color));
-    color: var(--text-active-color, var(--text-color));
-    background-color: var(--bg-active-color, var(--bg-color));
+    --_bc: var(--border-active-color, var(--border-color));
+    --_tc: var(--text-active-color, var(--text-color));
+    --_bgc: var(--bg-active-color, var(--bg-color));
   }
 }
 
 @utility pigment-active-svg-scaffold {
   &:active {
-    :where(svg path) {
-      fill: var(
-        --fill-active-color,
-        var(--text-active-color, var(--fill-color, var(--text-color)))
-      );
-      stroke: var(
-        --stroke-active-color,
-        var(--text-active-color, var(--stroke-color, var(--text-color)))
-      );
-    }
+    --_fc: var(
+      --fill-active-color,
+      var(--text-active-color, var(--fill-color, var(--text-color)))
+    );
+    --_sc: var(
+      --stroke-active-color,
+      var(--text-active-color, var(--stroke-color, var(--text-color)))
+    );
   }
 }
 
@@ -144,10 +125,11 @@ Usage with the Fill System
   &.checked,
   &[aria-current],
   &[aria-selected='true'],
+  &[aria-pressed='true'],
   &[aria-expanded='true'] {
-    border-color: var(--border-selected-color, var(--border-color));
-    color: var(--text-selected-color, var(--text-color));
-    background-color: var(--bg-selected-color, var(--bg-color));
+    --_bc: var(--border-selected-color, var(--border-color));
+    --_tc: var(--text-selected-color, var(--text-color));
+    --_bgc: var(--bg-selected-color, var(--bg-color));
   }
 }
 
@@ -156,14 +138,16 @@ Usage with the Fill System
   &.checked,
   &[aria-current],
   &[aria-selected='true'],
+  &[aria-pressed='true'],
   &[aria-expanded='true'] {
-    :where(svg path) {
-      fill: var(--fill-selected-color, var(--fill-color, var(--text-color)));
-      stroke: var(
-        --stroke-selected-color,
-        var(--stroke-color, var(--text-color))
-      );
-    }
+    --_fc: var(
+      --fill-selected-color,
+      var(--text-selected-color, var(--fill-color, var(--text-color)))
+    );
+    --_sc: var(
+      --stroke-selected-color,
+      var(--text-selected-color, var(--stroke-color, var(--text-color)))
+    );
   }
 }