@splendidlabz/styles 3.0.0 → 4.0.0-alpha.1

package/src/layouts/position/fixed.css

@@ -5,98 +5,129 @@
 /* top *
   *********************/
 @utility fixed-top {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  & {
+    position: fixed;
+    top: 0;
+    bottom: auto;
+    inset-inline: 0;
+  }
 }
 
 @utility fixed-topleft {
-  @apply fixed-top;
-  @apply nudge-topleft;
-  right: auto;
+  & {
+    @apply fixed-top;
+    right: auto;
+  }
 }
 
 @utility fixed-topright {
-  @apply fixed-top;
-  @apply nudge-topright;
-  left: auto;
+  & {
+    @apply fixed-top;
+    left: auto;
+  }
 }
 
 @utility fixed-topfull {
-  @apply fixed-top;
-  @apply nudge-topfull;
+  & {
+    @apply fixed-top;
+    width: 100%;
+    max-width: none;
+    margin-inline: 0;
+  }
 }
 
 /* bottom *
  *********************/
 @utility fixed-bottom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  & {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    inset-inline: 0;
+  }
 }
 
 @utility fixed-bottomleft {
-  @apply fixed-bottom;
-  @apply nudge-bottomleft;
-  right: auto;
+  & {
+    @apply fixed-bottom;
+    right: auto;
+  }
 }
 
 @utility fixed-bottomright {
-  @apply fixed-bottom;
-  @apply nudge-bottomright;
-  left: auto;
+  & {
+    @apply fixed-bottom;
+    left: auto;
+  }
 }
 
 @utility fixed-bottomfull {
-  @apply fixed-bottom;
-  @apply nudge-bottomfull;
+  & {
+    @apply fixed-bottom;
+    width: 100%;
+    max-width: none;
+    margin-inline: 0;
+  }
 }
 
 /* left *
- *********************/
+*********************/
 @utility fixed-left {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
+  & {
+    position: fixed;
+    inset-block: 0;
+    left: 0;
+    right: auto;
+  }
 }
 
 @utility fixed-leftfull {
-  @apply fixed-left;
-  @apply nudge-leftfull;
+  & {
+    @apply fixed-left;
+    height: auto;
+    max-height: none;
+    margin-block: 0;
+  }
 }
 
 /* right *
- *********************/
+*********************/
 @utility fixed-right {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  & {
+    position: fixed;
+    inset-block: 0;
+    left: auto;
+    right: 0;
+  }
 }
 
 @utility fixed-rightfull {
-  @apply fixed-right;
-  @apply nudge-rightfull;
+  & {
+    @apply fixed-right;
+    height: auto;
+    max-height: none;
+    margin-block: 0;
+  }
 }
 
 /* center *
- *********************/
+*********************/
 @utility fixed-center {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  & {
+    position: fixed;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+  }
 }
 
 /* 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;
+  & {
+    position: fixed;
+    inset-block: var(--nudge-y, var(--nudge, 0));
+    inset-inline: var(--nudge-x, var(--nudge, 0));
+    display: grid;
+  }
 }

package/src/primitives/hero-heading.css

@@ -4,10 +4,10 @@
 @utility hero-heading {
   display: flex;
   flex-direction: column;
-  gap: var(--gap, 0.25em);
+  gap: 0.25rem;
   max-width: 100%;
 
-  > :where(.hero-eyebrow) {
+  > .eyebrow {
     font-size: var(--eyebrow-size, 0.6em);
   }
 

package/src/primitives/index.css

@@ -1,7 +1,5 @@
-@import './backdrop.css';
 @import './break-word.css';
 @import './card.css';
-@import './focus-within.css';
 @import './hero-heading.css';
 @import './indent-list.css';
 @import './prose.css';

package/src/primitives/prose.css

@@ -2,22 +2,22 @@
   & {
     display: flex;
     flex-flow: column;
-    gap: 1em;
+    gap: 1lh;
     max-width: 100%;
 
     /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler). */
     * + :where(h2, h3),
     * + :where(astro-island, astro-slot) > :where(:where(h2, h3):first-child) {
-      margin-top: 2em;
-      scroll-margin-top: 2em;
+      margin-top: 2lh;
+      scroll-margin-top: 2lh;
     }
 
     * + :where(h4, h5, h6),
     *
       + :where(astro-island, astro-slot)
       > :where(:where(h4, h5, h6):first-child) {
-      margin-top: 1em;
-      scroll-margin-top: 2em;
+      margin-top: 1lh;
+      scroll-margin-top: 2lh;
     }
 
     :where(ul, ol) {
@@ -39,15 +39,15 @@
       }
 
       li + li {
-        margin-top: 0.25em;
+        margin-top: 0.25lh;
       }
 
       li:has(li) + li {
-        margin-top: 0.5em;
+        margin-top: 0.5lh;
       }
 
       li > :where(ul, ol) {
-        margin-top: 0.25em;
+        margin-top: 0.25lh;
       }
     }
 

package/src/primitives/simple-svg.css

@@ -1,5 +1,5 @@
 @utility simple-svg {
-  :where(path) {
+  * {
     fill: var(--fill-color);
     stroke: var(--stroke-color); /* Fallback to text color */
     stroke-width: var(--stroke-width);

package/src/reset.css

@@ -82,13 +82,12 @@ canvas {
 }
 
 svg {
-  pointer-events: none; /* Because SVGs should not intercept events */
   flex-shrink: 0; /* Prevents SVG from being squished when used as flexbox descendant */
   box-sizing: content-box; /* Prevents SVG from being squished when adding padding values */
 
   /* Default SVG dimensions. Override as necessary */
   width: var(--svg-width, auto);
-  height: var(--svg-height, 1em);
+  height: var(--svg-height, auto);
 }
 
 hr {

package/src/styles.css

@@ -8,6 +8,8 @@
 @import './layouts/index.css';
 @import './type/index.css';
 @import './effects/index.css';
+@import './transitions/index.css';
+@import './animation/index.css';
 
 /* Addons */
 /* @import './components/index.css'; */

package/src/tools/object.css

@@ -1,5 +1,8 @@
 @utility object-background {
-  object-fit: cover;
+  position: absolute;
+  inset: 0;
+  z-index: -1;
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }

package/src/tools/outlines.css

@@ -2,6 +2,8 @@
  * Setup outlines *
  * Useful for all outline transitions and animations
  *********************/
+
+/* Can improve this... */
 @layer base {
   * {
     outline: var(--outline-width) var(--outline-style) transparent;
@@ -9,11 +11,39 @@
   }
 }
 
+@utility outline-scaffold {
+  & {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+
+    &:focus {
+      @apply outline-visible;
+    }
+  }
+}
+
 /* 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);
+  }
+}
+
 /* 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/transitions.css

@@ -6,8 +6,19 @@
     --transition-values: var(--transition-duration) var(--transition-delay)
       var(--transition-easing);
     --transition-props:
-      backdrop-filter, background, border, color, fill, filter, gap, opacity,
-      opacity, outline, stroke, transform;
+      backdrop-filter, background, border, color, display, fill, filter, gap,
+      opacity, outline, overlay, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+    transition-behavior: allow-discrete;
+  }
+}
+
+@utility transition-svg {
+  & {
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props: opacity, fill, stroke;
     transition: var(--transition-values);
     transition-property: var(--transition-props);
   }

package/src/transitions/index.css

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

package/src/transitions/starting-style.css

@@ -0,0 +1,74 @@
+/*********************
+ * Fade *
+ *********************/
+@utility fade {
+  & {
+    --opacity: var(--closed-opacity, 0);
+    opacity: var(--opacity, 0);
+  }
+
+  &:where([open], :popover-open, .open, .show) {
+    --opacity: var(--opened-opacity, 1);
+
+    @starting-style {
+      --opacity: var(--opening-opacity, 0);
+    }
+  }
+}
+
+/*********************
+ * Fly *
+ *********************/
+@utility fly {
+  & {
+    --tx: var(--closed-tx, 0);
+    --ty: var(--closed-ty, 0);
+    transform: translateX(var(--tx)) translateY(var(--ty));
+  }
+
+  &:where([open], :popover-open, .open, .show) {
+    --tx: var(--opened-tx, 0);
+    --ty: var(--opened-ty, 0);
+
+    @starting-style {
+      --tx: var(--opening-tx, 0);
+      --ty: var(--opening-ty, 0);
+    }
+  }
+}
+
+@utility fly-from-top {
+  & {
+    @apply fly;
+    --closed-ty: -100%;
+    --opened-ty: 0;
+    --opening-ty: -100%;
+  }
+}
+
+@utility fly-from-bottom {
+  & {
+    @apply fly;
+    --closed-ty: 100%;
+    --opened-ty: 0;
+    --opening-ty: 100%;
+  }
+}
+
+@utility fly-from-left {
+  & {
+    @apply fly;
+    --closed-tx: -100%;
+    --opened-tx: 0;
+    --opening-tx: -100%;
+  }
+}
+
+@utility fly-from-right {
+  & {
+    @apply fly;
+    --closed-tx: 100%;
+    --opened-tx: 0;
+    --opening-tx: 100%;
+  }
+}

package/src/variables/variables.css

@@ -1,8 +1,9 @@
 @theme {
   /* Typography */
-  --bg-color: white;
-  --text-color: black;
+  --bg-color: var(--color-cdarkblue-900);
+  --text-color: var(--color-cneutral-100);
   --leading: 1.5;
+  --gap: 1lh;
 
   /* Padding */
   --padding: 1rem;
@@ -14,7 +15,7 @@
   --radius: 0.5rem;
 
   /* Outline */
-  --outline-width: 3px;
+  --outline-width: 2px;
   --outline-style: solid;
   --outline-color: oklch(61.52% 0.178 257.59deg);
   --outline-offset: 0px;

package/src/primitives/backdrop.css

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

package/src/primitives/focus-within.css

@@ -1,12 +0,0 @@
-/* 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/scripts/Masonry.js

@@ -1,8 +0,0 @@
-import { getElement } from '@splendidlabz/utils/dom'
-import { masonry } from '@splendidlabz/utils/actions'
-
-export function Masonry(selector) {
-  const container = getElement(selector) || document
-  const elements = Array.from(container.querySelectorAll("[class*='masonry']"))
-  elements.forEach(masonry)
-}

package/src/scripts/Scrollable.js

@@ -1,14 +0,0 @@
-import { getElement } from '@splendidlabz/utils/dom'
-import { preferHorizontalScroll } from '@splendidlabz/utils/actions'
-
-export function ScrollableHorizontal(selector) {
-  const container = getElement(selector) || document
-  const elements = Array.from(
-    container.querySelectorAll('.scrollable-prefer-horizontal'),
-  )
-
-  if (container.classList?.contains('scrollable-prefer-horizontal'))
-    elements.push(container)
-
-  elements.forEach(preferHorizontalScroll)
-}

package/src/scripts/Sticky.js

@@ -1,34 +0,0 @@
-import { mutationObserver, sticky } from '@splendidlabz/utils/actions'
-
-import { getElement } from '@splendidlabz/utils/dom'
-
-/**
- * Initializes sticky behavior for elements within a container.
- * @param {string|HTMLElement} selector - The selector or element to initialize sticky behavior within.
- * @param {Object} [options] - Optional settings.
- * @param {number} [options.observeTimeout=0] - The timeout in milliseconds to observe DOM mutations.
- */
-export function Sticky(selector, { observerTimeout = 1000 } = {}) {
-  const container = getElement(selector) || document.body
-  const elements = Array.from(container.querySelectorAll('.sticky-check'))
-
-  if (container.classList.contains('sticky-check')) elements.push(container)
-
-  elements.forEach(sticky)
-
-  if (observerTimeout) {
-    const obs = mutationObserver(container, {
-      childList: true,
-      subtree: true,
-      callback: function ({ entry, observer }) {
-        // Nodes seem to be added one by one, so getting the first one is enough
-        const node = entry.addedNodes[0]
-        const klass = node?.className
-        if (!klass || typeof klass !== 'string') return
-        if (!klass.includes('sticky-check')) return
-        sticky(node)
-      },
-    })
-    if (observerTimeout) setTimeout(_ => obs.disconnect(), observerTimeout)
-  }
-}

package/src/scripts/all.js

@@ -1,7 +0,0 @@
-import { Masonry, ScrollableHorizontal, Sticky } from './index.js'
-
-export default function LayoutScripts(element = null) {
-  Masonry(element)
-  Sticky(element)
-  ScrollableHorizontal(element)
-}

package/src/scripts/index.js

@@ -1,4 +0,0 @@
-export * from './all.js'
-export * from './Masonry.js'
-export * from './Scrollable.js'
-export * from './Sticky.js'