@splendidlabz/styles 4.10.1 → 4.12.0

package/README.md

@@ -0,0 +1,86 @@
+# @splendidlabz/styles
+
+Splendid Labz styles for Tailwind CSS v4.
+
+## Install
+
+```bash
+npm install @splendidlabz/styles
+```
+
+## The quickest way — everything
+
+```css
+@import 'tailwindcss';
+@import '@splendidlabz/styles';
+```
+
+That's the whole system: reset, theme, styled HTML, utilities, and the CSS components (`prose`, `card`, `table`, and friends). Tailwind tree-shakes whatever you don't use, so most projects want this and nothing else.
+
+## Keep your own reset — just the classes
+
+Already have your own reset and base styles? Take Splendid's utilities and components without letting it touch your HTML:
+
+```css
+@import 'tailwindcss';
+@import '@splendidlabz/styles/utilities';
+@import '@splendidlabz/styles/components/css';
+```
+
+`utilities` is the same utility classes as above with no reset and no element styling. `components/css` adds the opt-in component classes. Nothing renders differently until you reach for a class.
+
+## Using Splendid's Astro or Svelte components
+
+If you're pulling in components from `@splendidlabz/astro` or `@splendidlabz/svelte`, there are two extra things to wire up:
+
+```css
+/* 1. Point Tailwind at the packages so it scans their class names —
+      they live in node_modules, which Tailwind skips by default. */
+@source "../node_modules/@splendidlabz/astro";
+@source "../node_modules/@splendidlabz/svelte";
+
+@import 'tailwindcss';
+
+/* 2. A base + the framework component styles. */
+@import '@splendidlabz/styles/base';
+@import '@splendidlabz/styles/components/astro'; /* or /components/svelte */
+```
+
+Use `base`, not the full `@splendidlabz/styles`. The full import already carries the CSS components, and `/components/astro` brings them along too — so pairing them gives you two copies. `base` is the reset and styling *without* the components, and the framework layer fills them in once.
+
+## Without Tailwind's preflight
+
+Splendid ships its own reset, so you can drop Tailwind's. Import Tailwind's theme and utilities on their own instead of the whole thing, and set the layer order so Splendid's reset lands first:
+
+```css
+@layer reset, theme, base, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+@import '@splendidlabz/styles';
+```
+
+Everything else works the same — this just replaces `@import 'tailwindcss'`.
+
+## Two things that'll bite you
+
+- **One base at a time.** `@splendidlabz/styles`, `base`, and `utilities` all overlap. Import two of them and you get two copies of the shared parts — Tailwind v4 doesn't merge repeated imports. Pick one.
+- **Component layers need a base under them.** `components/css`, `components/astro`, and `components/svelte` can't stand alone — on their own they have nothing to resolve against and the build fails. Any of the three bases covers them; import order doesn't matter.
+
+## Every entry point
+
+| Import                 | What you get                                                |
+| ---------------------- | ---------------------------------------------------------- |
+| `@splendidlabz/styles` | Everything — reset, styled HTML, utilities, CSS components  |
+| `…/base`               | Reset, styled HTML, utilities — no components               |
+| `…/utilities`          | Utilities only — leaves your HTML alone                     |
+| `…/components/css`     | CSS component classes (`prose`, `card`, …)                  |
+| `…/components/astro`   | Astro component styles (includes CSS components)            |
+| `…/components/svelte`  | Svelte component styles (includes CSS components)           |
+| `…/components`         | All component styles — css, astro, svelte                  |
+| `…/layouts`            | Layout utilities (already in every base)                   |
+| `…/effects`            | Effects, animation, transitions (already in every base)    |
+| `…/tools`              | The `@apply` / `@variant` helpers                          |
+| `…/theming`            | `@theme` tokens plus color/pigment                         |
+| `…/variables`          | `@theme` tokens on their own                               |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.10.1",
+  "version": "4.12.0",
   "description": "",
   "type": "module",
   "homepage": "https://splendidlabz.com/docs/styles",
@@ -12,18 +12,24 @@
   ],
   "exports": {
     ".": "./src/styles.css",
+    "./base": "./src/base.css",
+    "./utilities": "./src/utilities.css",
+    "./tools": "./src/tools/index.css",
+    "./layouts": "./src/layouts/bundle.css",
+    "./effects": "./src/effects/bundle.css",
+    "./variables": "./src/variables/index.css",
+    "./theming": "./src/theming.css",
     "./components": "./src/components/index.css",
-    "./layouts": "./src/layouts/direct.css",
+    "./components/css": "./src/components/css/index.css",
+    "./components/astro": "./src/components/bundle-astro.css",
+    "./components/svelte": "./src/components/bundle-svelte.css",
     "./pigment": "./src/tools/pigment.css",
     "./scripts": "./scripts/index.js",
     "./scripts/*": "./scripts/*.js"
   },
   "scripts": {
     "lint": "stylelint '**/*.{css,scss}' --fix",
-    "lightning": "lightningcss --bundle --targets \">= 0.25%\" ./src/styles.css -o dist/styles.css",
-    "build-styles": "npx @tailwindcss/cli -i ./no-tailwind/index.css -o ./dist/no-tw/styles.css",
-    "build-layouts": "npx @tailwindcss/cli -i ./no-tailwind/layouts.css -o ./dist/no-tw/layouts.css",
-    "build": "npm run build-styles & npm run build-layouts"
+    "lightning": "lightningcss --bundle --targets \">= 0.25%\" ./src/styles.css -o dist/styles.css"
   },
   "dependencies": {
     "@splendidlabz/utils": "*"

package/src/base.css

@@ -0,0 +1,15 @@
+/* Opinionated foundation: everything except the CSS/framework components.
+   Restyles bare HTML (reset + generic) and registers every utility group
+   (tools, layouts, effects), all tree-shaken. This is the foundation that
+   powers `base + components/*`. Use base OR utilities, never both. */
+
+@import './tools/index.css';
+/* button is a @utility (foundation-level): generic @applies it to bare
+   <button>, and framework components @apply button-icon. */
+@import './components/css/button.css';
+@import './reset.css' layer(reset);
+@import './layout-reset.css' layer(reset);
+@import './variables/index.css';
+@import './generic/index.css';
+@import './layouts/index.css';
+@import './effects/index.css';

package/src/components/astro/fancylist.css

@@ -1,33 +1,31 @@
 @utility fancylist {
-  & {
-    --svg-width: 1em;
-    --svg-height: 1lh;
-    display: grid;
+  --svg-width: 1em;
+  --svg-height: 1lh;
+  display: grid;
 
-    /* grid-template-columns: auto 1fr; */
-    column-gap: 0.5em;
+  /* grid-template-columns: auto 1fr; */
+  column-gap: 0.5em;
 
-    :where(li) {
-      grid-column: 1 / -1;
-      display: grid;
+  :where(li) {
+    grid-column: 1 / -1;
+    display: grid;
 
-      /* grid-template-columns: subgrid; */
-      grid-template-columns: auto 1fr;
-      column-gap: inherit;
+    /* grid-template-columns: subgrid; */
+    grid-template-columns: auto 1fr;
+    column-gap: inherit;
 
-      /* Positions the Emoji */
-      /* This is kind of brute-forced at the moment. */
-      :where(.emoji),
-      > :where(astro-slot, astro-island) > :where(.emoji) {
-        font-size: 0.75em;
-        line-height: 1lh;
-      }
+    /* Positions the Emoji */
+    /* This is kind of brute-forced at the moment. */
+    :where(.emoji),
+    > :where(astro-slot, astro-island) > :where(.emoji) {
+      font-size: 0.75em;
+      line-height: 1lh;
+    }
 
-      :where(ul) {
-        grid-column: 2;
-        display: grid;
-        column-gap: inherit;
-      }
+    :where(ul) {
+      grid-column: 2;
+      display: grid;
+      column-gap: inherit;
     }
   }
 }

package/src/components/bundle-astro.css

@@ -0,0 +1,7 @@
+/* Astro component styles + the CSS components they @apply (prose, etc.).
+   Pure layer — no tools/layouts/button. Import a foundation first
+   (base or utilities), or these @applies won't resolve. Astro class names may
+   clash with common component names — opt in deliberately. */
+
+@import './css/index.css';
+@import './astro/index.css';

package/src/components/bundle-svelte.css

@@ -0,0 +1,7 @@
+/* Svelte component styles + the CSS components they @apply (prose, button-icon).
+   Pure layer — no tools/layouts/button. Import a foundation first
+   (base or utilities), or these @applies won't resolve. Svelte class names may
+   clash with common component names — opt in deliberately. */
+
+@import './css/index.css';
+@import './svelte/index.css';

package/src/components/css/button.css

@@ -0,0 +1,40 @@
+@utility button {
+  & {
+    @apply pigment-with-svg;
+    flex-shrink: 0; /* Prevents button from shrinking when used in flex elements */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    max-width: 100%;
+    padding: 0.125lh 0.75lh;
+    font: inherit;
+    text-decoration-line: none !important;
+
+    &[disabled] {
+      cursor: default;
+    }
+
+    * {
+      pointer-events: none;
+    }
+
+    svg path {
+      @apply transition-scaffold;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+  }
+}
+
+@utility button-icon {
+  & {
+    padding: 0.5em;
+  }
+}
+
+@utility button-round {
+  & {
+    border-radius: 50%;
+  }
+}

package/src/{form → components/css/forms}/index.css

@@ -1,4 +1,3 @@
 @import './input.css';
-@import './textarea.css';
 @import './select.css';
 @import './checkbox-and-radio.css';

package/src/components/css/index.css

@@ -9,3 +9,5 @@
 @import './table.css';
 @import './writing-mode.css';
 @import './strikethrough.css';
+@import './forms/index.css';
+@import './typography/index.css';

package/src/components/css/typography/font-position.css

@@ -0,0 +1,16 @@
+/* --font-position-adjust: 1;
+--padding-block: 1em; */
+
+@utility font-position {
+  > .font-position-adjust,
+  &:not(:has(.font-position-adjust)) {
+    padding-block: calc(
+        var(--padding-block, 1em) * var(--font-position-adjust, 1)
+      )
+      calc(var(--padding-block, 1em) / var(--font-position-adjust, 1));
+  }
+
+  &:has(.font-position-adjust) {
+    padding-block: 0;
+  }
+}

package/src/effects/bundle.css

@@ -0,0 +1,5 @@
+/* Standalone effects: tools (effects @apply border-scaffold, transition-scaffold)
+   + the effect utilities (incl. animation + transitions). Self-contained. */
+
+@import '../tools/index.css';
+@import './index.css';

package/src/effects/index.css

@@ -1,8 +1,9 @@
+@import './animation/index.css';
+@import './transitions/index.css';
 @import './elevation.css';
 @import './gradients.css';
 @import './fancybox.css';
 @import './bezel.css';
-@import './testgb.css';
 @import './highlight.css';
 @import './shadows.css';
 @import './text.css';

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

@@ -1,43 +1,6 @@
-@utility button {
-  & {
-    @apply pigment-with-svg;
-    flex-shrink: 0; /* Prevents button from shrinking when used in flex elements */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5em;
-    max-width: 100%;
-    padding: 0.125lh 0.75lh;
-    font: inherit;
-    text-decoration-line: none !important;
-
-    &[disabled] {
-      cursor: default;
-    }
-
-    * {
-      pointer-events: none;
-    }
-
-    svg path {
-      @apply transition-scaffold;
-      transition: var(--transition-values);
-      transition-property: var(--transition-props);
-    }
-  }
-}
-
-@utility button-icon {
-  & {
-    padding: 0.5em;
-  }
-}
-
-@utility button-round {
-  & {
-    border-radius: 50%;
-  }
-}
+/* button / button-icon / button-round utilities live in components/css/button.css.
+   The base layer below `@apply`s `button`; whichever bundle includes this file
+   must also register button.css (styles.css via components/css, base.css directly). */
 
 @layer base {
   a {

package/src/generic/form.css

@@ -1,8 +1,19 @@
+@theme {
+  --textarea-height: 6lh;
+}
+
 @layer base {
   fieldset {
     border: none;
   }
 
+  textarea {
+    min-height: var(--textarea-height);
+    resize: vertical;
+    /* stylelint-disable-next-line */
+    field-sizing: normal; /* Allows textarea to auto */
+  }
+
   /* Text inputs */
   input:where(
     [type='text'],

package/src/layouts/bundle.css

@@ -0,0 +1,5 @@
+/* Standalone layouts: tools (for @variant interact-within etc.) + layout reset
+   + the layout utilities. Self-contained; imports tools once. */
+
+@import '../tools/index.css';
+@import './direct.css';

package/src/layouts/index.css

@@ -1,4 +1,4 @@
-/* Micro needs to come first 
+/* Micro needs to come first
 because it contains vertical that macro uses */
 @import './micro/index.css';
 @import './shell/index.css';

package/src/styles.css

@@ -1,17 +1,20 @@
 /* Splendid Styles */
 
+/* Canonical full bundle = the base foundation + CSS components. tools/layouts/
+   effects/button are registered once here; the pure component bodies below do
+   not re-import them. Don't compose this file from base.css + components (base
+   also imports button — that would duplicate it). For framework components on
+   top of everything, use `base + components/astro`, not this bundle. */
+
+@import './tools/index.css';
+@import './components/css/button.css';
 @import './reset.css' layer(reset);
 @import './layout-reset.css' layer(reset);
 @import './variables/index.css';
-@import './tools/index.css';
 @import './generic/index.css';
-@import './form/index.css';
-@import './components/css/index.css';
 @import './layouts/index.css';
-@import './type/index.css';
 @import './effects/index.css';
-@import './transitions/index.css';
-@import './animation/index.css';
+@import './components/css/index.css';
 
 /* Addons */
 /* @import './components/index.css'; */

package/src/theming.css

@@ -0,0 +1,7 @@
+/* Theming layer: the @theme design tokens plus the tools that produce/consume
+   them (color, pigment, scaffolds). Full tools is included because pigment
+   @applies transition-scaffold / border-scaffold from sibling tool files.
+   No reset or generic element styling — safe to drop into an existing project. */
+
+@import './variables/index.css';
+@import './tools/index.css';

package/src/tools/interact.css

@@ -14,22 +14,15 @@
 
 @custom-variant interact-within {
   &:hover,
-  &:focus-visible,
-  &.selected,
-  &.checked,
-  &[aria-current],
-  &[aria-selected='true'],
-  &[aria-pressed='true'],
-  &[aria-expanded='true'],
-  &:has(:focus-visible),
+  &:focus-within,
   &:has(
-      .selected,
-      .checked,
-      [aria-current],
-      [aria-selected='true'],
-      [aria-pressed='true'],
-      [aria-expanded='true']
-    ) {
+    .selected,
+    .checked,
+    [aria-current],
+    [aria-selected='true'],
+    [aria-pressed='true'],
+    [aria-expanded='true']
+  ) {
     @slot;
   }
 }

package/src/tools/object.css

@@ -1,5 +1,10 @@
-/* Object doesn't work correctly in Safari unless height is given. https://stackoverflow.com/questions/60192601/object-fit-cover-not-working-correctly-on-safari */
+/* Pins an image to fill and cover its positioned parent, so the parent's
+   content sets the height. Width/height are needed for object-fit to work in
+   Safari: https://stackoverflow.com/questions/60192601/object-fit-cover-not-working-correctly-on-safari */
 @utility object-background {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;

package/src/tools/outlines.css

@@ -4,29 +4,26 @@
  *********************/
 
 @utility outline-scaffold {
-  & {
-    outline: var(--outline-width) var(--outline-style)
-      var(--outline-color, transparent);
-    outline-offset: var(--outline-offset);
+  outline: var(--outline-width) var(--outline-style)
+    var(--outline-color, transparent);
+  outline-offset: var(--outline-offset);
 
-    &:focus-visible {
-      outline-color: var(--outline-focus-color);
-    }
+  &:focus-visible {
+    outline-color: var(--outline-focus-color);
   }
 }
 
 @utility focus-within {
-  & {
-    outline: var(--outline-width) var(--outline-style) transparent;
-    outline-offset: var(--outline-offset);
+  outline: var(--outline-width) var(--outline-style) transparent;
+  outline-offset: var(--outline-offset);
 
-    &:focus-within {
-      outline-color: var(--outline-focus-color);
-    }
+  &:focus-within {
+    outline-color: var(--outline-focus-color);
+  }
 
-    > * {
-      --outline-color: transparent;
-    }
+  /* Removes all outlines within the element */
+  * {
+    --outline-focus-color: transparent;
   }
 }
 
@@ -37,9 +34,7 @@
   - 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));
-  }
+  box-sizing: content-box;
+  margin: calc(var(--outline-width) * -1);
+  padding: calc(var(--outline-width));
 }

package/src/tools/pigment.css

@@ -30,27 +30,23 @@ Usage with the Fill System
  * Pigment scaffolds *
  *********************/
 @utility pigment-scaffold {
-  & {
-    @apply transition-scaffold;
-    --_bgc: var(--bg-color);
-    --_tc: var(--text-color, currentcolor);
-    --_bc: var(--border-color, currentcolor);
-    border-color: var(--_bc, currentcolor);
-    color: var(--_tc);
-    background: var(--_bgc);
-  }
+  @apply transition-scaffold;
+  --_bgc: var(--bg-color);
+  --_tc: var(--text-color, currentcolor);
+  --_bc: var(--border-color, currentcolor);
+  border-color: var(--_bc, currentcolor);
+  color: var(--_tc);
+  background: var(--_bgc);
 }
 
 @utility pigment-svg-scaffold {
   --_fc: var(--fill-color);
   --_sc: var(--stroke-color, var(--text-color, currentcolor));
 
-  & {
-    :where(svg path) {
-      @apply transition-scaffold;
-      fill: var(--_fc, revert-layer);
-      stroke: var(--_sc, currentcolor);
-    }
+  :where(svg path) {
+    @apply transition-scaffold;
+    fill: var(--_fc, revert-layer);
+    stroke: var(--_sc, currentcolor);
   }
 }
 

package/src/tools/scaffolds.css

@@ -17,11 +17,14 @@
   border-radius: var(--radius);
 }
 
-@utility radius-* {
-  --radius: --value([length]);
-  --radius: --spacing(--value(number));
-}
-
+/* @utility border-* {
+  border-width: --spacing(--value(number));
+  border-width: --value([length]);
+} */
+
+/*********************
+ * Rounded *
+ *********************/
 @utility rounded-* {
   border-radius: --spacing(--value(number));
 }
@@ -117,3 +120,11 @@
     border-bottom-right-radius: --spacing(--value(integer));
   }
 }
+
+/*********************
+ * Radius *
+ *********************/
+@utility radius-* {
+  --radius: --value([length]);
+  --radius: --spacing(--value(number));
+}

package/src/tools/transitions.css

@@ -11,7 +11,7 @@
   --transition-values: var(--transition-duration) var(--transition-delay)
     var(--transition-easing);
   --transition-props:
-    background, border-color, color, display, fill, opacity, outline, stroke,
+    background-color, border-color, color, fill, stroke, opacity, outline,
     transform, translate, scale, rotate, skew, perspective;
   transition: var(--transition-values);
   transition-property: var(--transition-props);
@@ -20,9 +20,10 @@
 @utility transition-scaffold-extended {
   @apply transition-scaffold;
   --transition-props:
-    backdrop-filter, background, border-color, color, display, fill, filter,
-    gap, opacity, outline, overlay, stroke, transform, translate, scale, rotate,
-    skew, perspective;
+    backdrop-filter, background-color, border-color, color, display, fill,
+    filter, gap, opacity, outline, overlay, stroke, transform, translate, scale,
+    rotate, skew, perspective;
+  transition-behavior: allow-discrete;
 }
 
 @utility transition-svg {

package/src/utilities.css

@@ -0,0 +1,11 @@
+/* Un-opinionated foundation: every utility group (tools, layouts, effects)
+   with no reset or bare-HTML restyle. Same build primitives as base, minus the
+   opinionated element styling — powers `utilities + components/*`. Unused
+   utilities are tree-shaken. Use base OR utilities, never both. */
+
+@import './tools/index.css';
+@import './layouts/index.css';
+@import './effects/index.css';
+/* button is a @utility (foundation-level) so framework components layered on
+   this foundation can @apply button-icon. */
+@import './components/css/button.css';

package/src/variables/variables.css

@@ -10,7 +10,7 @@
   --border-width: 1px;
   --border-style: solid;
   --border-color: currentcolor;
-  --radius: 0.5rem;
+  --radius: calc(var(--spacing) * 2);
 
   /* Outline */
   --outline-width: 2px;
@@ -21,7 +21,7 @@
   /* Transition */
   --transition-duration: 200ms;
   --transition-delay: 0ms;
-  --transition-easing: ease-in-out;
+  --transition-easing: ease-out;
 
   /* Forms */
   --input-font: inherit;