@splendidlabz/styles 2.3.2 → 3.0.0

package/src/primitives/indent-list.css

@@ -0,0 +1,77 @@
+@utility indent-list-scaffold {
+  --indent-list-depth: 0;
+
+  li li {
+    margin-inline-start: var(--indent, 1em);
+  }
+
+  /* prettier-ignore */
+  li {
+    --depth: 1; 
+    a { --depth: 1; }
+    
+    li, 
+    li a { --depth: 2; }
+    
+    li li, 
+    li li a { --depth: 3; }
+    
+    li li li, 
+    li li li a { --depth: 4; }
+    
+    li li li li, 
+    li li li li a { --depth: 5; }
+  }
+
+  /* Resets left padding */
+  :where(ul, ol, li) {
+    padding-inline-start: 0;
+  }
+
+  /* Use Fill to update colors. */
+  a {
+    display: block;
+    padding-block: 0.125em;
+  }
+}
+
+@utility indent-list {
+  @apply indent-list-scaffold;
+
+  li {
+    list-style-type: disc;
+  }
+}
+
+@utility indent-list-guides {
+  & {
+    @apply indent-list-scaffold;
+
+    li li {
+      position: relative;
+      margin-inline-start: 0;
+      padding-inline-start: var(--indent, 1em);
+
+      a {
+        position: relative;
+        margin-left: calc(var(--indent, 1em) * -1);
+        padding-left: var(--indent, 1em);
+      }
+
+      &::before,
+      a::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 1px;
+        background-color: var(--border-color);
+      }
+
+      a:hover::before {
+        background-color: var(--border-hover-color);
+      }
+    }
+  }
+}

package/src/primitives/index.css

@@ -0,0 +1,11 @@
+@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';
+@import './shapes.css';
+@import './simple-svg.css';
+@import './table.css';
+@import './writing-mode.css';

package/src/{Components/_Prose.scss → primitives/prose.css}

@@ -1,29 +1,30 @@
-@layer components {
-  // Updating Prose to use Flex too, but this is incomplete
-  .Prose {
+@utility prose {
+  & {
     display: flex;
     flex-flow: column;
     gap: 1em;
     max-width: 100%;
 
-    // Using padding instead of margin, so #targets will leave some whitespace above when scolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler).
+    /* 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) {
-      padding-top: 2em;
+      margin-top: 2em;
+      scroll-margin-top: 2em;
     }
 
     * + :where(h4, h5, h6),
     *
       + :where(astro-island, astro-slot)
       > :where(:where(h4, h5, h6):first-child) {
-      padding-top: 1em;
+      margin-top: 1em;
+      scroll-margin-top: 2em;
     }
 
     :where(ul, ol) {
-      list-style-type: revert-layer;
+      list-style-type: initial;
     }
 
-    // Basic list styles
+    /* Basic list styles */
     > :where(ul, ol),
     > :where(astro-island, astro-slot) > :where(ul, ol) {
       list-style-position: outside;
@@ -50,31 +51,12 @@
       }
     }
 
-    code {
-      font-size: 0.8em;
-    }
-
-    :not(pre) > code {
-      display: inline;
-      padding: 0.2em 0.25em;
-      border-radius: var(--radius);
-    }
-
-    // Code Styles
-    pre {
-      padding: 1em;
-      border-radius: var(--radius);
-
-      code {
-        background-color: transparent;
-      }
-    }
-
     :where(a) {
       text-decoration: underline;
     }
 
-    > img {
+    > img,
+    figure img {
       border: 1px solid oklch(90% 0 0deg);
       border-radius: var(--radius);
     }

package/src/primitives/shapes.css

@@ -0,0 +1,16 @@
+@utility square {
+  aspect-ratio: 1;
+}
+
+@utility circle {
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+@utility roundrect {
+  border-radius: var(--radius, 8px);
+}
+
+@utility pill {
+  border-radius: 100em;
+}

package/src/primitives/simple-svg.css

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

package/src/primitives/table.css

@@ -0,0 +1,197 @@
+/*********************
+ * Table scaffold utilities *
+ *********************/
+@utility table-scaffold {
+  & {
+    width: 100%;
+
+    /* font: inherit; Not sure if needed? */
+    font-variant-numeric: lining-nums tabular-nums slashed-zero
+      diagonal-fractions;
+  }
+}
+
+/* These overwrite Tailwind's default table-auto and table-fixed utilities */
+@utility table-auto {
+  :where(table) & {
+    table-layout: auto;
+  }
+
+  :where(.table-grid) & {
+    @apply grid-repeat-auto;
+  }
+}
+
+@utility table-fixed {
+  :where(table) & {
+    table-layout: fixed;
+  }
+
+  :where(.table-grid) & {
+    @apply grid-simple;
+  }
+}
+
+/* Helpful utilities for code reuse *
+ *********************/
+@utility table-header-row {
+  & {
+    border-top: var(--header-row-border-top);
+    border-bottom: var(--header-row-border-bottom);
+    font-weight: bold;
+  }
+}
+
+@utility table-header-column {
+  font-weight: bold;
+}
+
+@utility table-cell {
+  text-align: left;
+  padding: var(--padding, var(--padding-x, 0.375rem))
+    var(--padding, var(--padding-y, 0.5rem));
+}
+
+@utility table-center {
+  :is(td, th) {
+    text-align: center;
+  }
+}
+
+@utility table-radius {
+  th:first-child {
+    border-start-start-radius: var(--radius);
+  }
+
+  th:last-child {
+    border-start-end-radius: var(--radius);
+  }
+
+  :where(:not(thead)) {
+    td:first-child {
+      border-start-start-radius: var(--radius);
+    }
+
+    td:last-child {
+      border-start-end-radius: var(--radius);
+    }
+  }
+
+  tr:last-child {
+    td:first-child {
+      border-end-start-radius: var(--radius);
+    }
+
+    td:last-child {
+      border-end-end-radius: var(--radius);
+    }
+  }
+}
+
+/* WIP. Not ready for external usage */
+
+/* Basic table styles */
+table {
+  @apply table-scaffold;
+  border-collapse: collapse;
+
+  /* Alternate background on tr
+  For consistency with others below, we're using 2n + 3
+  Skips the first row because usually first row is th values.
+  If you use thead then you have to adjust this accordingly
+  Note that tbody is automatically created by the browser */
+  &:has(thead) tr:nth-child(2n + 2) {
+    background-color: var(--alt-row-color);
+  }
+
+  &:not(:has(thead)) tr {
+    tr:nth-child(2n + 3) {
+      background-color: var(--alt-row-color);
+    }
+  }
+
+  /* Column headers */
+  th:where([scope='colgroup'], [scope='col'], :not([scope])) {
+    @apply table-header-row;
+  }
+
+  /* Row Headers */
+
+  /* Not adding border-right because it's a bit too much if table-layout is auto */
+  th:where([scope='group'], [scope='row']) {
+    @apply table-header-column;
+  }
+
+  /* All Cells */
+  :is(th, td) {
+    @apply table-cell;
+  }
+}
+
+/*********************
+ * Table with CSS Grid and Subgrid *
+ *********************/
+
+/* Table */
+
+/* Use grid-repeat-auto by default. Provide --cols to adjust number of columns. */
+.table-grid:where(table, [role='table'], [role='grid']) {
+  @apply table-scaffold;
+  @apply table-auto;
+  max-width: 100%;
+}
+
+/* Thead, Tbody, Tfoot equivalents */
+
+/* These need to be display:contents for subgrid to work */
+.table-grid :where(thead, tbody, tfoot, [role='rowgroup']) {
+  display: contents;
+}
+
+/* Tr / row */
+.table-grid :where(tr, [role='row']) {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+
+  /* Alternating row colours */
+  &:nth-child(2n + 3) {
+    background-color: var(--alt-row-color);
+  }
+}
+
+/* Column Headers */
+
+/* Same styles as above */
+.table-grid
+  :where(
+    th[scope='colgroup'],
+    th[scope='col'],
+    th:not([scope]),
+    [role='columnheader']
+  ) {
+  @apply table-header-row;
+}
+
+/* Row Headers */
+
+/* Same style as row headers above */
+.table-grid :where(th[scope='rowgroup'], th[scope='row'], [role='rowheader']) {
+  @apply table-header-column;
+}
+
+/* All Cells */
+.table-grid
+  :where(
+    [role='columnheader'],
+    [role='rowheader'],
+    [role='cell'],
+    [role='gridcell'],
+    th,
+    td
+  ) {
+  @apply table-cell;
+  display: grid; /* For easier content positioning */
+  align-items: center;
+}

package/src/primitives/text.css

@@ -0,0 +1,4 @@
+@utility text-upper {
+  text-transform: uppercase;
+  letter-spacing: 0.075em;
+}

package/src/primitives/writing-mode.css

@@ -0,0 +1,51 @@
+@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;
+  }
+}

package/src/reset.css

@@ -0,0 +1,114 @@
+/************* 
+* Box Sizing *
+**************/
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+/*********************
+* Fills the viewport, fallbacks to vh *
+*********************/
+body {
+  min-height: 100vh;
+  min-height: 100svh;
+}
+
+/*********************
+* Remove default margin and paddings *
+*********************/
+* {
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  border-style: solid;
+}
+
+/*********************
+* Avoid text overflows *
+*********************/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  scroll-margin: 2em;
+}
+
+/*********************
+* Lists *
+*********************/
+ul {
+  list-style: none;
+}
+
+/*********************
+* Better defaults for media elements *
+*********************/
+img,
+video,
+object,
+embed,
+svg {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
+picture {
+  display: flex;
+  justify-content: center;
+}
+
+/* These elements should not have height:auto */
+iframe,
+canvas {
+  display: block;
+  max-width: 100%;
+}
+
+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);
+}
+
+hr {
+  height: 1px;
+  background-color: var(--border-color, black);
+}
+
+/*********************
+* The hidden attribute *
+*********************/
+[hidden] {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+/*********************
+* Noscript *
+*********************/
+noscript {
+  display: block;
+  margin-block: 1em;
+}

package/src/scripts/Masonry.js

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,34 @@
+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

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

package/src/scripts/index.js

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

package/src/styles.css

@@ -0,0 +1,14 @@
+/* Splendid Styles */
+@import './reset.css' layer(reset);
+@import './variables/index.css';
+@import './tools/index.css';
+@import './generic/index.css';
+@import './form/index.css';
+@import './primitives/index.css';
+@import './layouts/index.css';
+@import './type/index.css';
+@import './effects/index.css';
+
+/* Addons */
+/* @import './components/index.css'; */
+/* @import './addons/index.css' */

package/src/tools/border.css

@@ -0,0 +1,9 @@
+@utility border-scaffold {
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--radius);
+}
+
+@utility padding-scaffold {
+  padding-block: var(--padding-block, var(--padding, 0));
+  padding-inline: var(--padding-inline, var(--padding, 0));
+}

package/src/tools/index.css

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

package/src/tools/object.css

@@ -0,0 +1,5 @@
+@utility object-background {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}

package/src/tools/outlines.css

@@ -0,0 +1,27 @@
+/*********************
+ * Setup outlines *
+ * Useful for all outline transitions and animations
+ *********************/
+@layer base {
+  * {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+}
+
+/* Utility to make outline visible. typically used in focus or focus-visible */
+@utility outline-visible {
+  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
+ *********************/
+@utility preserve-outlines {
+  & {
+    box-sizing: content-box;
+    margin: calc(var(--outline-width) * -1);
+    padding: calc(var(--outline-width));
+  }
+}