@splendidlabz/styles 4.0.0-alpha.2 → 4.0.0-beta.3

package/src/layouts/position/nudge.css

@@ -1,74 +1,93 @@
-@theme {
-  --nudge: 0;
-}
-
 /*********************
  * nudge utilities *
  *********************/
+
 @utility nudge {
-  position: relative;
+  margin-block: var(--nudge-y, var(--nudge, 0));
+  margin-inline: var(--nudge-x, var(--nudge, 0));
 }
 
 @utility nudge-top {
-  @apply nudge;
-  top: var(--nudge-y, var(--nudge, 0));
+  margin-block-start: calc(var(--nudge-y, var(--nudge)));
 }
 
 @utility nudge-topleft {
   @apply nudge-top;
-  left: var(--nudge-x, var(--nudge, 0));
+  margin-block-start: calc(var(--nudge-y, var(--nudge)));
+  margin-inline-start: calc(var(--nudge-x, var(--nudge)));
 }
 
 @utility nudge-topright {
   @apply nudge-top;
-  right: var(--nudge-x, var(--nudge, 0));
+  margin-inline-end: calc(var(--nudge-x, var(--nudge)));
 }
 
 @utility nudge-topfull {
-  @apply nudge-top;
-  left: var(--nudge-x, var(--nudge, 0));
-  right: var(--nudge-x, var(--nudge, 0));
+  margin-block-start: calc(var(--nudge-y, var(--nudge)));
+  margin-inline: calc(var(--nudge-x, var(--nudge)));
 }
 
 @utility nudge-bottom {
-  @apply nudge;
-  bottom: var(--nudge-y, var(--nudge, 0));
+  margin-block-end: calc(var(--nudge-y, var(--nudge)));
 }
 
 @utility nudge-bottomleft {
   @apply nudge-bottom;
-  left: var(--nudge-x, var(--nudge, 0));
+  margin-inline-start: calc(var(--nudge-x, var(--nudge)));
 }
 
 @utility nudge-bottomright {
   @apply nudge-bottom;
-  right: var(--nudge-x, var(--nudge, 0));
+  margin-inline-end: calc(var(--nudge-x, var(--nudge)));
 }
 
 @utility nudge-bottomfull {
   @apply nudge-bottom;
-  left: var(--nudge-x, var(--nudge, 0));
-  right: var(--nudge-x, var(--nudge, 0));
+  margin-inline: calc(var(--nudge-x, var(--nudge)));
 }
 
 @utility nudge-left {
-  @apply nudge;
-  left: var(--nudge-x, var(--nudge, 0));
+  position: relative;
+  margin-inline-start: var(--nudge-x, var(--nudge, 0));
 }
 
 @utility nudge-leftfull {
-  @apply nudge-left;
-  top: var(--nudge-y, var(--nudge, 0));
-  bottom: var(--nudge-y, var(--nudge, 0));
+  margin-block: var(--nudge-y, var(--nudge, 0));
+  margin-inline-start: var(--nudge-x, var(--nudge, 0));
 }
 
 @utility nudge-right {
-  @apply nudge;
-  right: var(--nudge-x, var(--nudge, 0));
+  margin-inline-end: var(--nudge-x, var(--nudge, 0));
 }
 
 @utility nudge-rightfull {
-  @apply nudge-right;
-  top: var(--nudge-y, var(--nudge, 0));
-  bottom: var(--nudge-y, var(--nudge, 0));
+  margin-block: var(--nudge-y, var(--nudge, 0));
+  margin-inline-end: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-overlay {
+  margin-block: var(--nudge-y, var(--nudge, 0));
+  margin-inline: var(--nudge-x, var(--nudge, 0));
+}
+
+/*********************
+ * Functional Utilities *
+ *********************/
+@utility nudge-* {
+  --nudge: --value([length]);
+  --nudge: calc(var(--spacing) * --value(integer));
+}
+
+@utility nudge-x-* {
+  --nudge-x: --value([length]);
+  --nudge-x: calc(var(--spacing) * --value(integer));
+}
+
+@utility nudge-y-* {
+  --nudge-y: --value([length]);
+  --nudge-y: calc(var(--spacing) * --value(integer));
+}
+
+@utility inner-radius {
+  border-radius: calc(var(--radius) - var(--nudge));
 }

package/src/layouts/position/pos.css

@@ -29,138 +29,123 @@
 /* prettier-ignore */
 @utility stack-pos-left { place-self: center start; }
 
-/* prettier-ignore */
-@utility stack-pos-lefttop { place-self: start start; }
-
-/* prettier-ignore */
-@utility stack-pos-leftbottom { place-self: end start; }
-
 /* prettier-ignore */
 @utility stack-pos-leftfull { place-self: stretch start; }
 
 /* prettier-ignore */
 @utility stack-pos-right { place-self: center end; }
 
-/* prettier-ignore */
-@utility stack-pos-righttop { place-self: start end; }
-
-/* prettier-ignore */
-@utility stack-pos-rightbottom { place-self: end end; }
-
 /* prettier-ignore */
 @utility stack-pos-rightfull { place-self: stretch end; }
 
 /* prettier-ignore */
 @utility stack-pos-center { place-self: center center; }
 
+@utility stack-pos-overlay {
+  display: grid;
+
+  > * {
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 1;
+  }
+}
+
 /*********************
  * Relative pos utilities *
  *********************/
-@utility relative-pos {
-  position: absolute;
-}
-
 @utility relative-pos-top {
-  @apply relative-pos;
+  position: absolute;
   inset-block-start: 0;
+  inset-inline: 0;
+  width: fit-content;
+  margin-inline: auto;
 }
 
 @utility relative-pos-topleft {
-  @apply relative-pos;
-  @apply relative-pos-top;
+  position: absolute;
+  inset-block-start: 0;
   inset-inline-start: 0;
 }
 
 @utility relative-pos-topright {
-  @apply relative-pos;
-  @apply relative-pos-top;
+  position: absolute;
+  inset-block-start: 0;
   inset-inline-end: 0;
 }
 
 @utility relative-pos-topfull {
-  @apply relative-pos;
-  @apply relative-pos-top;
+  position: absolute;
+  inset-block-start: 0;
   inset-inline: 0;
 }
 
 @utility relative-pos-bottom {
-  @apply relative-pos;
+  position: absolute;
   inset-block-end: 0;
+  inset-inline: 0;
+  width: fit-content;
+  margin-inline: auto;
 }
 
 @utility relative-pos-bottomleft {
-  @apply relative-pos;
-  @apply relative-pos-bottom;
+  position: absolute;
+  inset-block-end: 0;
   inset-inline-start: 0;
 }
 
 @utility relative-pos-bottomright {
-  @apply relative-pos;
-  @apply relative-pos-bottom;
+  position: absolute;
+  inset-block-end: 0;
   inset-inline-end: 0;
 }
 
 @utility relative-pos-bottomfull {
-  @apply relative-pos;
+  position: absolute;
   inset-block-end: 0;
   inset-inline: 0;
 }
 
 @utility relative-pos-left {
-  @apply relative-pos;
-  inset-inline-start: 0;
-}
-
-@utility relative-pos-lefttop {
-  @apply relative-pos;
-  @apply relative-pos-left;
-  inset-block-start: 0;
-}
-
-@utility relative-pos-leftbottom {
-  @apply relative-pos;
-  @apply relative-pos-left;
-  inset-block-end: 0;
+  & {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    height: fit-content;
+    margin-block: auto;
+  }
 }
 
 @utility relative-pos-leftfull {
-  @apply relative-pos;
-  @apply relative-pos-left;
+  position: absolute;
   inset-block: 0;
+  inset-inline-start: 0;
 }
 
 @utility relative-pos-right {
-  @apply relative-pos;
-  inset-inline-end: 0;
-}
-
-@utility relative-pos-righttop {
-  @apply relative-pos;
-  @apply relative-pos-right;
-  inset-block-start: 0;
-}
-
-@utility relative-pos-rightbottom {
-  @apply relative-pos;
-  @apply relative-pos-right;
-  inset-block-end: 0;
+  & {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    height: fit-content;
+    margin-block: auto;
+  }
 }
 
 @utility relative-pos-rightfull {
-  @apply relative-pos;
-  @apply relative-pos-right;
+  position: absolute;
   inset-block: 0;
+  inset-inline-end: 0;
 }
 
 @utility relative-pos-center {
-  @apply relative-pos;
+  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
 @utility relative-pos-overlay {
-  @apply relative-pos;
+  position: absolute;
   inset: 0;
 }
 
@@ -322,13 +307,10 @@
 }
 
 @utility pos-overlay {
-  :where([class*='stack']) > & {
-    display: grid;
+  @apply nudge-overlay;
 
-    > * {
-      grid-column: 1 / span 1;
-      grid-row: 1 / span 1;
-    }
+  :where([class*='stack']) > & {
+    @apply stack-pos-overlay;
   }
 
   :where([class*='relative']) > & {

package/src/layouts/position/sticky.css

@@ -4,8 +4,12 @@
   z-index: var(--z-index, 15);
 
   :where([class*='grid'] > &) {
-    align-self: start; /* Why not stretch? */
+    align-self: start;
   }
 }
 
-@custom-variant sticking (&.sticking);
+@custom-variant sticking {
+  &.sticking {
+    @slot;
+  }
+}

package/src/layouts/shell/shell-grid.css

@@ -20,7 +20,7 @@
       minmax(0, var(--rsb-width, auto));
   }
 
-  & > .is(header, .Full) {
+  & > :is(header, footer, .full) {
     grid-column: 1 / -1;
   }
 

package/src/styles.css

@@ -4,7 +4,7 @@
 @import './tools/index.css';
 @import './generic/index.css';
 @import './form/index.css';
-@import './primitives/index.css';
+@import './components/css/index.css';
 @import './layouts/index.css';
 @import './type/index.css';
 @import './effects/index.css';

package/src/tools/border.css

@@ -1,9 +1,59 @@
-@utility border-scaffold {
-  border: var(--border-width) var(--border-style) var(--border-color);
-  border-radius: var(--radius);
+@utility margin-scaffold {
+  margin-block: var(--margin-block, var(--margin, 0));
+  margin-inline: var(--margin-inline, var(--margin, 0));
 }
 
 @utility padding-scaffold {
   padding-block: var(--padding-block, var(--padding, 0));
   padding-inline: var(--padding-inline, var(--padding, 0));
 }
+
+@utility border-scaffold {
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--radius);
+}
+
+@utility radius-* {
+  --radius: --value([length]);
+  --radius: calc(var(--spacing) * --value(integer));
+}
+
+@utility rounded-* {
+  border-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-t-* {
+  border-top-left-radius: calc(var(--spacing) --value(integer));
+  border-top-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-b-* {
+  border-bottom-left-radius: calc(var(--spacing) --value(integer));
+  border-bottom-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-l-* {
+  border-top-left-radius: calc(var(--spacing) --value(integer));
+  border-bottom-left-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-r-* {
+  border-top-right-radius: calc(var(--spacing) --value(integer));
+  border-bottom-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-tl-* {
+  border-top-left-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-tr-* {
+  border-top-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-bl-* {
+  border-bottom-left-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-br-* {
+  border-bottom-right-radius: calc(var(--spacing) --value(integer));
+}

package/src/tools/outlines.css

@@ -3,47 +3,35 @@
  * Useful for all outline transitions and animations
  *********************/
 
-/* Can improve this... */
-@layer base {
-  * {
-    outline: var(--outline-width) var(--outline-style) transparent;
-    outline-offset: var(--outline-offset);
-  }
-}
-
 @utility outline-scaffold {
   & {
-    outline: var(--outline-width) var(--outline-style) transparent;
+    outline: var(--outline-width) var(--outline-style)
+      var(--outline-color, transparent);
     outline-offset: var(--outline-offset);
 
-    &:focus {
-      @apply outline-visible;
+    &:focus-visible {
+      outline-color: var(--outline-focus-color);
     }
   }
 }
 
-/* Utility to make outline visible. typically used in focus or focus-visible */
-@utility outline-visible {
-  outline-color: var(--outline-color);
-}
-
-@utility focus-outline-visible {
-  &:focus {
-    @apply outline-visible;
-  }
-}
-
 @utility focus-within {
   & {
     outline: var(--outline-width) var(--outline-style) transparent;
     outline-offset: var(--outline-offset);
-  }
 
-  &:focus-within {
-    outline-color: var(--outline-color);
+    &:focus-within {
+      outline-color: var(--outline-focus-color);
+    }
+
+    > * {
+      --outline-color: transparent;
+    }
   }
 }
 
+/* Maybe Blog about this.
+  These three properties used to preserve outlines, because overflow cuts off outlines. Content-box is necessary. If not, box will cut on the right side. (in Flex environments). */
 /* These preserve outlines on scrollable elements that use a flex display *
  * Notes: 
   - content-box is necessary, if not present, box will be cut on the right side

package/src/tools/pigment.css

@@ -143,7 +143,7 @@ Usage with the Fill System
   &.selected,
   &.checked,
   &[aria-current],
-  &[aria-selected],
+  &[aria-selected='true'],
   &[aria-expanded='true'] {
     border-color: var(--border-selected-color, var(--border-color));
     color: var(--text-selected-color, var(--text-color));
@@ -155,7 +155,7 @@ Usage with the Fill System
   &.selected,
   &.checked,
   &[aria-current],
-  &[aria-selected],
+  &[aria-selected='true'],
   &[aria-expanded='true'] {
     :where(svg path) {
       fill: var(--fill-selected-color, var(--fill-color, var(--text-color)));

package/src/variables/variables.css

@@ -3,10 +3,10 @@
   --bg-color: var(--color-cdarkblue-900);
   --text-color: var(--color-cneutral-100);
   --leading: 1.5;
-  --gap: 1lh;
+  --gap: 1rlh;
 
   /* Padding */
-  --padding: 1rem;
+  --padding: 1rlh;
 
   /* Borders */
   --border-width: 1px;
@@ -17,7 +17,7 @@
   /* Outline */
   --outline-width: 2px;
   --outline-style: solid;
-  --outline-color: oklch(61.52% 0.178 257.59deg);
+  --outline-focus-color: oklch(61.52% 0.178 257.59deg);
   --outline-offset: 0px;
 
   /* Transition */

package/src/addons/index.css

@@ -1 +0,0 @@
-@import './scrollbars.css';

package/src/astro/index.css

@@ -1 +0,0 @@
-@import './textwall.css';

package/src/primitives/simple-svg.css

@@ -1,7 +0,0 @@
-@utility simple-svg {
-  * {
-    fill: var(--fill-color);
-    stroke: var(--stroke-color); /* Fallback to text color */
-    stroke-width: var(--stroke-width);
-  }
-}

package/src/primitives/writing-mode.css

@@ -1,51 +0,0 @@
-@utility writing-scaffold {
-  /* Prevents text from transitioning. Enable manually if you want transition */
-  transition: none;
-}
-
-@utility writing-normal {
-  @apply writing-scaffold;
-  writing-mode: horizontal-tb;
-}
-
-@utility writing-rotated-left {
-  & {
-    @apply writing-scaffold;
-    writing-mode: vertical-rl;
-    text-orientation: sideways;
-    transform: rotate(180deg);
-
-    /* // transform: scale( -1, -1 ); // This is the alternative if we don't want to use rotate */
-  }
-}
-
-@utility writing-rotated-right {
-  & {
-    @apply writing-scaffold;
-    writing-mode: vertical-rl;
-    text-orientation: sideways;
-  }
-}
-
-@utility writing-downwards {
-  & {
-    @apply writing-scaffold;
-    writing-mode: vertical-lr;
-    text-orientation: upright;
-  }
-}
-
-/* Alias for writing-downwards */
-@utility writing-downards-lr {
-  & {
-    @apply writing-downwards;
-  }
-}
-
-@utility writing-downwards-rl {
-  & {
-    @apply writing-scaffold;
-    writing-mode: vertical-rl;
-    text-orientation: upright;
-  }
-}