@splendidlabz/styles 4.0.0-alpha.0 → 4.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.1",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
@@ -10,13 +10,13 @@
   ],
   "exports": {
     ".": "./src/styles.css",
+    "./astro": "./src/astro/index.css",
     "./components": "./src/components/index.css",
     "./addons": "./src/addons/index.css",
     "./no-tw": "./dist/no-tw/styles.css",
     "./no-tw/*": "./dist/no-tw/*.css",
     "./*": "./src/*.css",
-    "./scripts": "./src/scripts/index.js",
-    "./scripts/*": "./src/scripts/*.js"
+    "./scripts": "./scripts/index.js"
   },
   "scripts": {
     "lint": "stylelint '**/*.{css,scss}' --fix",
@@ -27,10 +27,10 @@
     "build": "npm run build-styles & npm run build-layouts"
   },
   "dependencies": {
-    "@splendidlabz/utils": "1.5.0-alpha.3"
+    "@splendidlabz/utils": "1.5.0-alpha.4"
   },
   "devDependencies": {
-    "@splendidlabz/stylelint-config": "3.0.0-alpha.3",
+    "@splendidlabz/stylelint-config": "3.0.0-alpha.4",
     "@tailwindcss/cli": "^4.1.3",
     "lightningcss-cli": "^1.29.3",
     "tailwindcss": "^4.1.3",

package/src/astro/index.css

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

package/src/astro/textwall.css

@@ -0,0 +1,26 @@
+@utility textwall {
+  /* Used to create the boundary boxes for the content */
+  .textwall-dimensions {
+    aspect-ratio: 4/3;
+    max-height: 75dvh;
+  }
+
+  /* Rotates the content to create the textwall effect */
+  /* Negative margins allow for the content to overflow the boundary boxes */
+  .textwall-content {
+    position: absolute;
+    inset: 0;
+    margin: -25%;
+    transform: rotate(var(--rotation, -25deg));
+  }
+
+  /* Prevent pointer blocks by massive boundary images */
+  [class*='textwall-boundary'] {
+    pointer-events: none;
+  }
+
+  /* Prevent pixel rounding errors */
+  .textwall-boundary-after {
+    bottom: -1px;
+  }
+}

package/src/components/accordion.css

@@ -1,32 +1,37 @@
-@layer utilities {
-  .accordion {
-    svg {
-      transition: var(--transition-values);
-      transition-property: var(--transition-props);
-    }
+@utility accordion {
+  svg {
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
 
-    :where([aria-expanded='true'] svg) {
-      transform: rotate(90deg);
-    }
+  :where([aria-expanded='true'] svg) {
+    transform: rotate(90deg);
   }
+}
 
-  .accordion-button {
+@utility accordion-button {
+  & {
     @apply padding-scaffold;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
+    gap: var(--gap);
     width: 100%;
     max-width: 100%;
     text-align: left;
 
-    /* astro-slot contains the title */
+    > svg {
+      width: 1em;
+      height: 1lh;
+    }
+
     &:where(:has(svg + span)),
     &:where(:has(svg + astro-slot)) {
       justify-content: start;
     }
   }
+}
 
-  .accordion-content {
-    @apply padding-scaffold;
-  }
+@utility accordion-content {
+  padding: 1rem;
 }

package/src/components/browserframe.css

@@ -0,0 +1,84 @@
+/* Variables
+radius
+bg-frame-header.
+bg-frame-content. 
+border-width
+border-frame-header
+border-frame-content
+border-color
+
+dot-size
+dot-gap
+dot-color
+dot-1-color
+dot-2-color
+dot-3-color */
+
+@utility browserframe {
+  .frame-header {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    border: var(--border-width, 1px) solid
+      var(--border-frame-header, var(--border-color));
+    border-bottom: 0;
+    border-radius: var(--radius) var(--radius) 0 0;
+    background: var(--bg-frame-header);
+  }
+
+  .frame-dots {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: var(--dot-gap, 0.5rem);
+    padding: var(--dot-padding, 0.5lh 0.75lh);
+  }
+
+  .frame-dot {
+    width: var(--dot-size, 0.7rem);
+    height: var(--dot-size, 0.7rem);
+
+    circle {
+      fill: var(--dot-color, #424242);
+    }
+  }
+
+  .frame-tabs {
+    overflow: hidden;
+    align-self: end;
+    padding-top: 0.5rem;
+
+    .tablist {
+      gap: 0.25lh;
+      padding-inline: calc(var(--outline-width) * 2);
+    }
+  }
+
+  .frame-content {
+    border: var(--border-width, 1px) solid
+      var(--border-frame-content, var(--border-color));
+    border-radius: 0 0 var(--radius) var(--radius);
+    background: var(--bg-frame-content);
+
+    > :where(.background) svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.BrowserFrame-colored {
+  .FrameHeaderDot {
+    &:first-child {
+      background-color: var(--dot-1-color, #e2544d);
+    }
+
+    &:nth-child(2) {
+      background-color: var(--dot-2-color, #d79f27);
+    }
+
+    &:last-child {
+      background-color: var(--dot-3-color, #22a936);
+    }
+  }
+}

package/src/components/index.css

@@ -2,3 +2,5 @@
 @import './accordion.css';
 @import './popover.css';
 @import './modal.css';
+@import './tabs.css';
+@import './browserframe.css';

package/src/components/modal.css

@@ -1,6 +1,5 @@
 @layer base {
   /* Prevent scroll when modal is open */
-
   html:has(.modal) {
     @apply transition-scaffold;
     --transition-props: overflow;
@@ -23,11 +22,13 @@
   .modal {
     @apply border-scaffold;
     margin: auto;
-    padding: 2rem;
+    padding: 1lh;
+    color: var(--text-color);
+    background: var(--bg-color);
   }
 
   .modal::backdrop {
-    backdrop-filter: blur(var(--blur, 0));
+    backdrop-filter: blur(0);
   }
 
   .modal,
@@ -47,13 +48,14 @@
   }
 
   .modal[open]::backdrop {
-    background-color: oklch(0% 0 0deg / 50%);
+    backdrop-filter: blur(var(--blur, 6px));
+    background: var(--backdrop-bg, oklch(0% 0 0deg / 50%));
   }
 
   @starting-style {
     .modal[open],
     .modal[open]::backdrop {
-      --blur: 0;
+      backdrop-filter: blur(0);
       opacity: 0;
     }
   }

package/src/components/popover.css

@@ -7,6 +7,8 @@
     position: absolute;
     max-width: 100%;
     padding: 1rem;
+    color: var(--text-color);
+    background: var(--bg-color);
     opacity: 0;
   }
 

package/src/components/tabs.css

@@ -0,0 +1,111 @@
+@utility tablist {
+  & {
+    display: flex;
+    gap: 0.5lh;
+  }
+}
+
+@utility tab {
+  & {
+    align-items: start;
+    padding: 0.25lh 0.5lh;
+    text-align: left;
+  }
+
+  &[aria-selected] {
+    z-index: 2;
+  }
+}
+
+@utility tabpanels {
+  & {
+    @apply border-scaffold;
+    position: relative;
+  }
+}
+
+@utility tabpanel {
+  :where(&) {
+    padding: 0.75lh;
+  }
+}
+
+/*********************
+ * Variations *
+ *********************/
+@utility tablist-underline {
+  gap: 0;
+
+  .tab {
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  &.tablist-top .tab {
+    border-bottom-width: var(--border-width);
+  }
+
+  &.tablist-left .tab {
+    border-right-width: var(--border-width);
+  }
+
+  &.tablist-right .tab {
+    border-left-width: var(--border-width);
+  }
+}
+
+@utility tablist-tab {
+  .tab {
+    position: relative;
+    z-index: 1;
+  }
+
+  &.tablist-top :where(.tab) {
+    top: var(--border-width);
+    border-bottom: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  &.tablist-left :where(.tab) {
+    right: var(--border-width);
+    border-right: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  &.tablist-right :where(.tab) {
+    left: var(--border-width);
+    border-left: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+}
+
+@utility tablist-top {
+  --scrollbar-width: none;
+  --scrollbar-size: 0px;
+  max-width: 100%;
+}
+
+@layer components {
+  /*********************
+   * Tab placements *
+   *********************/
+
+  /* Top */
+
+  /* Left and Right */
+  :is(.tablist-left, .tablist-right) {
+    display: flex;
+    flex-flow: column nowrap;
+
+    :where(.tab) {
+      align-self: stretch;
+    }
+  }
+
+  .tablist-right {
+    order: 2;
+  }
+}

package/src/effects/index.css

@@ -3,5 +3,6 @@
 @import './fancy-box.css';
 @import './highlight.css';
 @import './shadows.css';
-@import './text-outline.css';
+@import './text.css';
 @import './frosted-glass.css';
+@import './stroke.css';

package/src/effects/shadows.css

@@ -38,12 +38,3 @@
     filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
   }
 }
-
-/* Will this work? */
-/*********************
- * Shadow Utilities *
- * Haven't managed to get Functional Utilities to work yet
- *********************/
-/* @utility shadow-x-* {
-  --shadow-x: --value([integer]);
-} */

package/src/effects/stroke.css

@@ -0,0 +1,25 @@
+/*********************
+ * Stroke *
+ * Allows spl-stroke-<length> to create --stroke-width
+ * Allows spl-stroke-<color>/<modifier> to create --stroke-color
+ *********************/
+/* prettier-ignore */
+@utility spl-stroke-* {
+  & {
+    --stroke-width: --value([length]);
+    --stroke-color: --value(--color-*, [color]);
+    --stroke-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
+  }
+}
+
+/*********************
+ * Fill *
+ * Allows spl-fill-<color>/<modifier> to create --fill-color
+ *********************/
+/* prettier-ignore */
+@utility spl-fill-* {
+  & {
+    --fill-color: --value(--color-*, [color]);
+    --fill-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
+  }
+}

package/src/generic/anchors-and-buttons.css

@@ -40,6 +40,7 @@
 @layer base {
   a {
     @apply pigment;
+    border-radius: 0;
   }
 
   a:where(:not(.button)) {

package/src/layouts/macro/grid.css

@@ -34,7 +34,7 @@
     /* --span: 1;  */
     /* Revert to default span for children in nested grids */
     display: grid;
-    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
     max-width: 100%;
 
     /* width: 100%; */

package/src/layouts/micro/micro.css

@@ -1,7 +1,3 @@
-@theme {
-  --gap: 1rem;
-}
-
 /* Used for every micro utility in this file */
 
 @utility micro {

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/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/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/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'