@splendidlabz/styles 2.3.2 → 3.0.0

package/src/layouts/micro/divider.css

@@ -0,0 +1,102 @@
+@utility divider-scaffold {
+  & {
+    align-self: stretch;
+    padding: 0 !important;
+    border-radius: 0 !important;
+
+    &:where(:not(:empty)) {
+      gap: var(--gap, 1rem);
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      background-color: var(--border-color, currentColor);
+    }
+  }
+}
+
+@utility divider-x {
+  & {
+    @apply divider-scaffold;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+
+    &::before,
+    &::after {
+      flex-grow: 1;
+      height: var(--border-width, 1px);
+    }
+  }
+}
+
+@utility divider-y {
+  & {
+    @apply divider-scaffold;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    :where(.vertical, .single-col, .wrap) > & {
+      flex-grow: 1;
+    }
+
+    &::before,
+    &::after {
+      flex-grow: 1;
+      width: var(--border-width, 1px);
+    }
+  }
+}
+
+/* Divider aliases *
+ *********************/
+@utility divider-horizontal {
+  @apply divider-x;
+}
+
+@utility divider-vertical {
+  @apply divider-y;
+}
+
+/*********************
+ * Divider between *
+ *********************/
+@utility divider-between-x {
+  & {
+    @apply divider-scaffold;
+    flex-direction: column;
+    row-gap: 0;
+
+    > * + *,
+    > * + *:where(astro-island, astro-slot) > * {
+      border-top-width: var(--border-width, 1px);
+      border-color: var(--border-color);
+    }
+  }
+}
+
+@utility divider-between-y {
+  & {
+    @apply divider-scaffold;
+    column-gap: 0;
+
+    > * + *,
+    > * + *:where(astro-island, astro-slot) > * {
+      border-left-width: var(--border-width, 1px);
+      border-color: var(--border-color);
+    }
+  }
+}
+
+/* Divider between aliases *
+ *********************/
+@utility divider-between-horizontal {
+  @apply divider-between-x;
+}
+
+@utility divider-between-vertical {
+  @apply divider-between-y;
+}

package/src/layouts/micro/index.css

@@ -0,0 +1,6 @@
+@import './micro.css';
+@import './stack.css';
+@import './divider.css';
+@import './breakout.css';
+@import './stacking-context.css';
+@import './scrollable.css';

package/src/layouts/micro/micro.css

@@ -0,0 +1,54 @@
+@theme {
+  --gap: 1rem;
+}
+
+/* Used for every micro utility in this file */
+
+@utility micro {
+  > *,
+  > :where(.contents) > *,
+  > *:where(astro-island, astro-slot) > * {
+    flex-grow: var(--grow);
+  }
+}
+
+/* horizontal *
+ *********************/
+@utility horizontal {
+  @apply micro;
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+
+  > .spacer {
+    margin-inline-start: auto;
+  }
+}
+
+/* vertical *
+ *********************/
+@utility vertical {
+  @apply micro;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+
+  > .spacer {
+    margin-block-start: auto;
+  }
+}
+
+/* Set alignment to stretch so children are stretched by default  */
+@utility single-col {
+  @apply vertical;
+  align-items: stretch;
+}
+
+/* flow *
+ *********************/
+@utility flow {
+  @apply micro;
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
+}

package/src/layouts/micro/scrollable.css

@@ -0,0 +1,70 @@
+@theme {
+  --snap-align: start;
+  --snap-type: proximity;
+  --scroll-margin: 1rem;
+}
+
+@utility scrollable {
+  & {
+    display: flex;
+    gap: var(--gap, 1rem);
+
+    > :where(*) {
+      flex-grow: 0;
+      flex-shrink: 0;
+      scroll-snap-align: var(--snap-align);
+      scroll-margin: var(--scroll-margin);
+    }
+  }
+}
+
+@utility scrollable-x {
+  & {
+    @apply scrollable;
+    overflow: auto hidden;
+    flex-direction: row;
+    max-width: 100%;
+    scroll-snap-type: x var(--snap-type);
+  }
+}
+
+@utility scrollable-y {
+  & {
+    @apply scrollable;
+    overflow: hidden auto;
+    flex-direction: column;
+    scroll-snap-type: y var(--snap-type);
+  }
+}
+
+/* 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). */
+@utility scrollable-preserve-outlines {
+  & {
+    box-sizing: content-box;
+    margin: calc(var(--outline-width) * -1);
+    padding: calc(var(--outline-width));
+  }
+}
+
+/* Does this work? */
+
+/* prettier-ignore */
+@utility snap-type-* {
+  --snap-type: --value(--snap-type-*);
+}
+
+@utility scrollable-nosnap {
+  --snap-type: none;
+}
+
+/*********************
+ * Aliases *
+ *********************/
+@utility scrollable-horizontal {
+  @apply scrollable-x;
+}
+
+@utility scrollable-vertical {
+  @apply scrollable-y;
+}

package/src/layouts/micro/stack.css

@@ -0,0 +1,29 @@
+@utility stack {
+  & {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0;
+
+    &::before,
+    &::after,
+    > *,
+    > *:where(astro-island, astro-slot) > * {
+      position: relative;
+      z-index: 1;
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 1;
+    }
+
+    > .background {
+      overflow: hidden;
+      position: absolute;
+      inset: 0;
+    }
+
+    > .foreground {
+      position: relative;
+      z-index: 10;
+    }
+  }
+}

package/src/layouts/micro/stacking-context.css

@@ -0,0 +1,3 @@
+@utility new-stacking-context {
+  transform: translateZ(0);
+}

package/src/layouts/position/edge.css

@@ -0,0 +1,429 @@
+@theme {
+  --tx: 0%;
+  --ty: 0%;
+}
+
+@utility edge-scaffold {
+  transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
+
+  :where(.stack) > & {
+    box-sizing: content-box;
+  }
+
+  :where(.relative > &) {
+    position: absolute;
+  }
+}
+
+/*********************
+ * stack edge utilities *
+ *********************/
+
+/* Top */
+@utility stack-edge-top {
+  place-self: start center;
+}
+
+@utility stack-edge-topleft {
+  place-self: start start;
+}
+
+@utility stack-edge-topright {
+  place-self: start end;
+}
+
+@utility stack-edge-topfull {
+  place-self: start stretch;
+}
+
+/* Bottom */
+@utility stack-edge-bottom {
+  place-self: end center;
+}
+
+@utility stack-edge-bottomleft {
+  place-self: end start;
+}
+
+@utility stack-edge-bottomright {
+  place-self: end end;
+}
+
+@utility stack-edge-bottomfull {
+  place-self: end stretch;
+}
+
+/* Left */
+@utility stack-edge-left {
+  place-self: center start;
+}
+
+@utility stack-edge-leftfull {
+  place-self: stretch start;
+}
+
+/* Right */
+@utility stack-edge-right {
+  place-self: center end;
+}
+
+@utility stack-edge-rightfull {
+  place-self: stretch end;
+}
+
+/*********************
+ * relative edge utilities *
+ *********************/
+
+/* Top */
+@utility relative-edge-top {
+  inset-block-start: 0;
+}
+
+@utility relative-edge-topleft {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+@utility relative-edge-topright {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+@utility relative-edge-topfull {
+  inset-block-start: 0;
+  inset-inline: 0;
+}
+
+/* Bottom */
+@utility relative-edge-bottom {
+  inset-block-end: 0;
+}
+
+@utility relative-edge-bottomfull {
+  inset-block-end: 0;
+  inset-inline: 0;
+}
+
+@utility relative-edge-bottomleft {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+@utility relative-edge-bottomright {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
+/* Left */
+@utility relative-edge-left {
+  inset-inline-start: 0;
+}
+
+@utility relative-edge-leftfull {
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+
+/* Right */
+@utility relative-edge-right {
+  inset-inline-end: 0;
+}
+
+@utility relative-edge-rightfull {
+  inset-block: 0;
+  inset-inline-end: 0;
+}
+
+/*********************
+ * Edge adjustments *
+ *********************/
+
+/* Top *
+ *********************/
+@utility edge-adjust-top {
+  --ty: -50%;
+}
+
+@utility edge-adjust-topleft-start {
+  @apply edge-adjust-top;
+  --tx: -100%;
+}
+
+@utility edge-adjust-topleft {
+  @apply edge-adjust-top;
+  --tx: -50%;
+}
+
+@utility edge-adjust-topleft-end {
+  @apply edge-adjust-top;
+  --tx: 0%;
+}
+
+@utility edge-adjust-topright-start {
+  @apply edge-adjust-top;
+  --tx: 0%;
+}
+
+@utility edge-adjust-topright {
+  @apply edge-adjust-top;
+  --tx: 50%;
+}
+
+@utility edge-adjust-topright-end {
+  @apply edge-adjust-top;
+  --tx: 100%;
+}
+
+/* Bottom *
+ *********************/
+@utility edge-adjust-bottom {
+  --ty: 50%;
+}
+
+@utility edge-adjust-bottomleft-start {
+  @apply edge-adjust-bottom;
+  --tx: -100%;
+}
+
+@utility edge-adjust-bottomleft {
+  @apply edge-adjust-bottom;
+  --tx: -50%;
+}
+
+@utility edge-adjust-bottomleft-end {
+  @apply edge-adjust-bottom;
+  --tx: 0%;
+}
+
+@utility edge-adjust-bottomright-start {
+  @apply edge-adjust-bottom;
+  --tx: 0%;
+}
+
+@utility edge-adjust-bottomright {
+  @apply edge-adjust-bottom;
+  --tx: 50%;
+}
+
+@utility edge-adjust-bottomright-end {
+  @apply edge-adjust-bottom;
+  --tx: 100%;
+}
+
+/* Left *
+ *********************/
+@utility edge-adjust-left {
+  --tx: -50%;
+}
+
+/* Right *
+ *********************/
+@utility edge-adjust-right {
+  --tx: 50%;
+}
+
+/*********************
+ * Edge utilities *
+ *********************/
+@utility edge-top {
+  @apply edge-scaffold;
+  @apply edge-adjust-top;
+
+  :where(.stack) > & {
+    @apply stack-edge-top;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-top;
+  }
+}
+
+@utility edge-topleft {
+  @apply edge-scaffold;
+  @apply edge-adjust-topleft;
+
+  :where(.stack) > & {
+    @apply stack-edge-topleft;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-topleft;
+  }
+}
+
+@utility edge-topright {
+  @apply edge-scaffold;
+  @apply edge-adjust-topright;
+
+  :where(.stack) > & {
+    @apply stack-edge-topright;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-topright;
+  }
+}
+
+@utility edge-topfull {
+  @apply edge-scaffold;
+  @apply edge-adjust-top;
+
+  :where(.stack) > & {
+    @apply stack-edge-top;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-top;
+  }
+}
+
+/* Bottom */
+@utility edge-bottom {
+  @apply edge-scaffold;
+  @apply edge-adjust-bottom;
+
+  :where(.stack) > & {
+    @apply stack-edge-bottom;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-bottom;
+  }
+}
+
+@utility edge-bottomleft {
+  @apply edge-scaffold;
+  @apply edge-adjust-bottomleft;
+
+  :where(.stack) > & {
+    @apply stack-edge-bottomleft;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-bottomleft;
+  }
+}
+
+@utility edge-bottomright {
+  @apply edge-scaffold;
+  @apply edge-adjust-bottomright;
+
+  :where(.stack) > & {
+    @apply stack-edge-bottomright;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-bottomright;
+  }
+}
+
+@utility edge-bottomfull {
+  @apply edge-scaffold;
+  @apply edge-adjust-bottom;
+
+  :where(.stack) > & {
+    @apply stack-edge-bottom;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-bottom;
+  }
+}
+
+/* Left */
+@utility edge-left {
+  @apply edge-scaffold;
+  @apply edge-adjust-left;
+
+  :where(.stack) > & {
+    @apply stack-edge-left;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-left;
+  }
+}
+
+@utility edge-leftfull {
+  @apply edge-scaffold;
+  @apply edge-adjust-left;
+
+  :where(.stack) > & {
+    @apply stack-edge-left;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-left;
+  }
+}
+
+/* Right */
+@utility edge-right {
+  @apply edge-scaffold;
+  @apply edge-adjust-right;
+
+  :where(.stack) > & {
+    @apply stack-edge-right;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-right;
+  }
+}
+
+@utility edge-rightfull {
+  @apply edge-scaffold;
+  @apply edge-adjust-right;
+
+  :where(.stack) > & {
+    @apply stack-edge-right;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-right;
+  }
+}
+
+/*********************
+ * Edge with adjustments *
+ *********************/
+@utility edge-topleft-start {
+  @apply edge-topleft;
+  @apply edge-adjust-topleft-start;
+}
+
+@utility edge-topleft-end {
+  @apply edge-topleft;
+  @apply edge-adjust-topleft-end;
+}
+
+@utility edge-topright-start {
+  @apply edge-topright;
+  @apply edge-adjust-topright-start;
+}
+
+@utility edge-topright-end {
+  @apply edge-topright;
+  @apply edge-adjust-topright-end;
+}
+
+@utility edge-bottomleft-start {
+  @apply edge-bottomleft;
+  @apply edge-adjust-bottomleft-start;
+}
+
+@utility edge-bottomleft-end {
+  @apply edge-bottomleft;
+  @apply edge-adjust-bottomleft-end;
+}
+
+@utility edge-bottomright-start {
+  @apply edge-bottomright;
+  @apply edge-adjust-bottomright-start;
+}
+
+@utility edge-bottomright-end {
+  @apply edge-bottomright;
+  @apply edge-adjust-bottomright-end;
+}