@splendidlabz/styles 2.3.2 → 3.0.0

package/src/layouts/position/fixed.css

@@ -0,0 +1,102 @@
+/*********************
+ * fixed *
+ *********************/
+
+/* top *
+  *********************/
+@utility fixed-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+@utility fixed-topleft {
+  @apply fixed-top;
+  @apply nudge-topleft;
+  right: auto;
+}
+
+@utility fixed-topright {
+  @apply fixed-top;
+  @apply nudge-topright;
+  left: auto;
+}
+
+@utility fixed-topfull {
+  @apply fixed-top;
+  @apply nudge-topfull;
+}
+
+/* bottom *
+ *********************/
+@utility fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+@utility fixed-bottomleft {
+  @apply fixed-bottom;
+  @apply nudge-bottomleft;
+  right: auto;
+}
+
+@utility fixed-bottomright {
+  @apply fixed-bottom;
+  @apply nudge-bottomright;
+  left: auto;
+}
+
+@utility fixed-bottomfull {
+  @apply fixed-bottom;
+  @apply nudge-bottomfull;
+}
+
+/* left *
+ *********************/
+@utility fixed-left {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@utility fixed-leftfull {
+  @apply fixed-left;
+  @apply nudge-leftfull;
+}
+
+/* right *
+ *********************/
+@utility fixed-right {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+@utility fixed-rightfull {
+  @apply fixed-right;
+  @apply nudge-rightfull;
+}
+
+/* center *
+ *********************/
+@utility fixed-center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* overlay *
+ *********************/
+@utility fixed-overlay {
+  pointer-events: none;
+  position: fixed;
+  inset-block: var(--nudge-y, var(--nudge, 0));
+  inset-inline: var(--nudge-x, var(--nudge, 0));
+  display: grid;
+}

package/src/layouts/position/index.css

@@ -0,0 +1,5 @@
+@import './nudge.css';
+@import './pos.css';
+@import './edge.css';
+@import './fixed.css';
+@import './sticky.css';

package/src/layouts/position/nudge.css

@@ -0,0 +1,74 @@
+@theme {
+  --nudge: 0;
+}
+
+/*********************
+ * nudge utilities *
+ *********************/
+@utility nudge {
+  position: relative;
+}
+
+@utility nudge-top {
+  @apply nudge;
+  top: var(--nudge-y, var(--nudge, 0));
+}
+
+@utility nudge-topleft {
+  @apply nudge-top;
+  left: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-topright {
+  @apply nudge-top;
+  right: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-topfull {
+  @apply nudge-top;
+  left: var(--nudge-x, var(--nudge, 0));
+  right: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-bottom {
+  @apply nudge;
+  bottom: var(--nudge-y, var(--nudge, 0));
+}
+
+@utility nudge-bottomleft {
+  @apply nudge-bottom;
+  left: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-bottomright {
+  @apply nudge-bottom;
+  right: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-bottomfull {
+  @apply nudge-bottom;
+  left: var(--nudge-x, var(--nudge, 0));
+  right: var(--nudge-x, var(--nudge, 0));
+}
+
+@utility nudge-left {
+  @apply nudge;
+  left: 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));
+}
+
+@utility nudge-right {
+  @apply nudge;
+  right: 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));
+}

package/src/layouts/position/pos.css

@@ -0,0 +1,337 @@
+/*********************
+ * stack pos utilities *
+ *********************/
+
+/* prettier-ignore */
+@utility stack-pos-top { place-self: start center; }
+
+/* prettier-ignore */
+@utility stack-pos-topleft { place-self: start start; }
+
+/* prettier-ignore */
+@utility stack-pos-topright { place-self: start end; }
+
+/* prettier-ignore */
+@utility stack-pos-topfull { place-self: start stretch; }
+
+/* prettier-ignore */
+@utility stack-pos-bottomleft { place-self: end start; }
+
+/* prettier-ignore */
+@utility stack-pos-bottom { place-self: end center; }
+
+/* prettier-ignore */
+@utility stack-pos-bottomright { place-self: end end; }
+
+/* prettier-ignore */
+@utility stack-pos-bottomfull { place-self: end stretch; }
+
+/* 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; }
+
+/*********************
+ * Relative pos utilities *
+ *********************/
+@utility relative-pos {
+  position: absolute;
+}
+
+@utility relative-pos-top {
+  @apply relative-pos;
+  inset-block-start: 0;
+}
+
+@utility relative-pos-topleft {
+  @apply relative-pos;
+  @apply relative-pos-top;
+  inset-inline-start: 0;
+}
+
+@utility relative-pos-topright {
+  @apply relative-pos;
+  @apply relative-pos-top;
+  inset-inline-end: 0;
+}
+
+@utility relative-pos-topfull {
+  @apply relative-pos;
+  @apply relative-pos-top;
+  inset-inline: 0;
+}
+
+@utility relative-pos-bottom {
+  @apply relative-pos;
+  inset-block-end: 0;
+}
+
+@utility relative-pos-bottomleft {
+  @apply relative-pos;
+  @apply relative-pos-bottom;
+  inset-inline-start: 0;
+}
+
+@utility relative-pos-bottomright {
+  @apply relative-pos;
+  @apply relative-pos-bottom;
+  inset-inline-end: 0;
+}
+
+@utility relative-pos-bottomfull {
+  @apply relative-pos;
+  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;
+}
+
+@utility relative-pos-leftfull {
+  @apply relative-pos;
+  @apply relative-pos-left;
+  inset-block: 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;
+}
+
+@utility relative-pos-rightfull {
+  @apply relative-pos;
+  @apply relative-pos-right;
+  inset-block: 0;
+}
+
+@utility relative-pos-center {
+  @apply relative-pos;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@utility relative-pos-overlay {
+  @apply relative-pos;
+  inset: 0;
+}
+
+/*********************
+ * pos utilities for client use *
+ *********************/
+@utility pos-top {
+  @apply nudge-top;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-top;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-top;
+  }
+}
+
+@utility pos-topleft {
+  @apply nudge-topleft;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-topleft;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-topleft;
+  }
+}
+
+@utility pos-topright {
+  @apply nudge-topright;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-topright;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-topright;
+  }
+}
+
+@utility pos-topfull {
+  @apply nudge-topfull;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-topfull;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-topfull;
+  }
+}
+
+@utility pos-bottom {
+  @apply nudge-bottom;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-bottom;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-bottom;
+  }
+}
+
+@utility pos-bottomleft {
+  @apply nudge-bottomleft;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-bottomleft;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-bottomleft;
+  }
+}
+
+@utility pos-bottomright {
+  @apply nudge-bottomright;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-bottomright;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-bottomright;
+  }
+}
+
+@utility pos-bottomfull {
+  @apply nudge-bottomfull;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-bottomfull;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-bottomfull;
+  }
+}
+
+@utility pos-left {
+  @apply nudge-left;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-left;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-left;
+  }
+}
+
+@utility pos-leftfull {
+  @apply nudge-leftfull;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-leftfull;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-leftfull;
+  }
+}
+
+@utility pos-right {
+  @apply nudge-right;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-right;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-right;
+  }
+}
+
+@utility pos-rightfull {
+  @apply nudge-rightfull;
+
+  :where([class*='stack']) > & {
+    @apply stack-pos-rightfull;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-rightfull;
+  }
+}
+
+@utility pos-center {
+  :where([class*='stack']) > & {
+    @apply stack-pos-center;
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-center;
+  }
+}
+
+@utility pos-overlay {
+  :where([class*='stack']) > & {
+    display: grid;
+
+    > * {
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 1;
+    }
+  }
+
+  :where([class*='relative']) > & {
+    @apply relative-pos-overlay;
+  }
+}

package/src/layouts/position/sticky.css

@@ -0,0 +1,11 @@
+@utility sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index, 15);
+
+  :where([class*='grid'] > &) {
+    align-self: start; /* Why not stretch? */
+  }
+}
+
+@custom-variant sticking (&.sticking);

package/src/layouts/shell/index.css

@@ -0,0 +1,2 @@
+@import './shell-simple.css';
+@import './shell-grid.css';

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

@@ -0,0 +1,34 @@
+/* // Potential improvements fro flexibility with Style Queries or CSS IF in the future. */
+@utility shell-grid {
+  & {
+    display: grid;
+    grid-template-columns:
+      minmax(0, var(--lsb-width, auto))
+      minmax(0, 1fr);
+    gap: var(--gap, 0);
+    height: 100dvh;
+  }
+
+  &:has(> header) {
+    grid-template-rows: auto 1fr;
+  }
+
+  &:has(> .right-sidebar) {
+    grid-template-columns:
+      minmax(0, var(--lsb-width, auto))
+      minmax(0, var(--content-width, 1fr))
+      minmax(0, var(--rsb-width, auto));
+  }
+
+  & > .is(header, .Full) {
+    grid-column: 1 / -1;
+  }
+
+  > .left-sidebar,
+  > .right-sidebar,
+  > .content {
+    overflow: auto;
+    grid-column-end: span var(--span, 1);
+    height: auto;
+  }
+}

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

@@ -0,0 +1,15 @@
+@utility shell-simple {
+  & {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+
+    > .content {
+      flex-grow: 1;
+    }
+
+    > .footer {
+      flex-shrink: 0;
+    }
+  }
+}

package/src/primitives/backdrop.css

@@ -0,0 +1,8 @@
+@layer components {
+  .backdrop:where([data-state='blur']),
+  .backdrop-blur {
+    @apply transition-scaffold;
+    transition-property: backdrop-filter;
+    backdrop-filter: blur(var(--blur, 8px));
+  }
+}

package/src/{utils/_mixins.scss → primitives/break-word.css}

@@ -1,6 +1,8 @@
-@mixin wrap-words {
+/* word-break-break-word is deprecated */
+
+/* @utility break-word {
   hyphens: auto;
   overflow-wrap: break-word;
   word-break: break-word;
   word-wrap: break-word;
-}
+} */

package/src/primitives/card.css

@@ -0,0 +1,51 @@
+@utility card {
+  & {
+    padding: var(--padding, 1rem);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: var(--radius);
+  }
+}
+
+@utility card-split {
+  & {
+    @apply card;
+
+    > *,
+    :where(astro-slot, astro-island, astro-content) > * {
+      margin: var(--nudge, 0);
+      padding: var(--padding, 1rem);
+    }
+
+    &.card-split {
+      /* Increase specificity to overwrite padding and gap utilities used on card-split. */
+      overflow: hidden;
+      gap: 0;
+      padding: 0;
+
+      > *,
+      :where(astro-slot, astro-island, astro-content) > * {
+        border-radius: calc(var(--radius) - var(--nudge));
+      }
+    }
+
+    /* Adjust borders */
+    &:where(.divider-between-x, .divider-between-horizontal)
+      > :where(.card-split) {
+      border-width: 0;
+      border-top-width: var(--border-width);
+    }
+
+    &:where(.divider-between-y, .divider-between-vertical)
+      > :where(.card-split) {
+      border-width: 0;
+      border-left-width: var(--border-width);
+    }
+  }
+}
+
+/*********************
+ * Aliases *
+ *********************/
+@utility box {
+  @apply card;
+}

package/src/primitives/focus-within.css

@@ -0,0 +1,12 @@
+/* Transfers outlines from the focusable element within to the container  */
+@utility has-focus-within {
+  &:focus-within {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+
+  *:focus,
+  *:focus-visible {
+    outline-color: transparent;
+  }
+}

package/src/primitives/hero-heading.css

@@ -0,0 +1,44 @@
+/*********************
+ * Hero Heading *
+ *********************/
+@utility hero-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap, 0.25em);
+  max-width: 100%;
+
+  > :where(.hero-eyebrow) {
+    font-size: var(--eyebrow-size, 0.6em);
+  }
+
+  > *,
+  > *:where(.contents) > *,
+  > *:where(astro-island, astro-slot) > * {
+    max-width: 100%;
+  }
+}
+
+@utility hero-heading-start {
+  & {
+    @apply hero-heading;
+    text-align: start;
+  }
+}
+
+@utility hero-heading-center {
+  & {
+    @apply hero-heading;
+    align-self: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+@utility hero-heading-end {
+  & {
+    @apply hero-heading;
+    align-self: end;
+    margin-inline-start: auto;
+    text-align: end;
+  }
+}