@codenhub/styles 0.1.0 → 0.2.0

package/README.md

@@ -10,8 +10,7 @@ pnpm add @codenhub/styles
 
 ## Usage
 
-Import the compiled stylesheet for the complete token, reset, utility, and
-component-class surface:
+Import the compiled stylesheet for the complete token, reset, utility, and component-class surface:
 
 ```css
 @import "@codenhub/styles";
@@ -25,72 +24,17 @@ component-class surface:
 </main>
 ```
 
-Apps using Tailwind CSS v4 can instead process the source entrypoint:
-
-```css
-@import "tailwindcss";
-@import "@codenhub/styles/tw";
-
-@source "./src";
-```
-
-The root follows the system color-scheme preference. Apply `.light` or `.dark`
-to force a theme for the root or a subtree.
-
-```html
-<html class="dark">
-  <body>
-    <button class="btn primary">Dark themed button</button>
-  </body>
-</html>
-```
-
-The aliases `.theme-light`, `.theme-dark`, and `data-theme="light|dark"` are
-also supported. See [Concepts](./docs/concepts.md#theme-selection) for
-precedence details.
-
-`.solid`, `.soft`, and `.ghost` set how much intent fills a component; `.edged`
-and `.edgeless` set whether it draws a boundary. Both axes cascade, so a
-container sets the look below it and any element can still override it.
-`.solid` also takes the boundary away, because a filled box ringed in another
-color is what the blend behind `.edged` exists to prevent; `.solid.edged` is the
-way back to a line.
-
-```html
-<div class="soft">
-  <button class="btn primary">Soft</button>
-  <span class="badge success">Soft</span>
-  <button class="btn primary ghost edged">Outlined</button>
-</div>
-```
-
-Aesthetics decide what a component is made of. They are opt-in, so import the
-stylesheet after the base one to make `.neobrutalism`, `.glass`, `.pixel`, and
-`.chunky-tile` available. They cascade to any subtree the same way, and each is
-also importable on its own from `@codenhub/styles/aesthetics/<name>`.
-
-```css
-@import "@codenhub/styles";
-@import "@codenhub/styles/aesthetics";
-```
-
-```html
-<section class="neobrutalism">
-  <button class="btn primary">Thick ink and a hard shadow</button>
-</section>
-```
+For the Tailwind CSS v4 entrypoint, theme selection, the intent/presentation axes, and opt-in aesthetics, see [Setup](./docs/setup.md), [Concepts](./docs/concepts.md), and [Usage](./docs/usage/index.md).
 
 ## Documentation
 
-- [Documentation overview](./docs/index.md): What the package is, what it
-  does and does not do, and where to go next.
+- [Documentation overview](./docs/index.md): What the package is, what it does and does not do, and where to go next.
 - [Setup](./docs/setup.md): Installation, entrypoints, and configuration.
 - [Concepts](./docs/concepts.md): The three-axis model and the token system.
-- [Usage](./docs/usage/index.md): Composing, theming, customizing,
-  aesthetics, and each component family.
-- [Integrating](./docs/integrating/index.md): Wiring the stylesheet into
-  Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
+- [Usage](./docs/usage/index.md): Composing, theming, customizing, aesthetics, and each component family.
+- [Integrating](./docs/integrating/index.md): Wiring the stylesheet into Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
 - [Accessibility](./docs/accessibility.md): CSS accessibility hooks and non-goals.
+- [Changelog](./docs/changelog/index.md): Release history, including breaking changes.
 
 ## Requirements
 
@@ -103,13 +47,8 @@ also importable on its own from `@codenhub/styles/aesthetics/<name>`.
 
 ## Notes
 
-This package has no JavaScript behavior. `--layout-gap` replaces the removed
-`--layout-stack-gap` and `--layout-cluster-gap` tokens; no compatibility aliases
-are provided.
+This package has no JavaScript behavior; no version provides compatibility aliases for a removed class or token. `0.2.0` removes `.btn.loading` (compose a disabled `.btn` with a `.loader` child instead) and `.alert.icon`'s built-in glyph (drop a consumer-supplied icon into `.alert-icon` instead), and `.tooltip` now requires a `.tooltip-bubble` child element rather than a `data-tooltip` attribute. See the [changelog](./docs/changelog/index.md) for the complete history.
 
 ## License
 
-Licensed under Apache-2.0. Embedded SVG icons derived from
-[Lucide](https://lucide.dev) are ISC-licensed, and loaders derived from
-[svg-spinners](https://github.com/n3r4zzurr0/svg-spinners) are MIT-licensed.
-See [NOTICE](NOTICE) for the required notices.
+Licensed under Apache-2.0. Embedded SVG icons derived from [Lucide](https://lucide.dev) are ISC-licensed, and loaders derived from [svg-spinners](https://github.com/n3r4zzurr0/svg-spinners) are MIT-licensed. See [NOTICE](NOTICE) for the required notices.

package/dist/aesthetics/chunky-tile.css

@@ -1 +1 @@
-.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-sans,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}
+.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}

package/dist/aesthetics/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-sans,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}
+.neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}.chunky-tile .btn.icon.dense,.chunky-tile .btn.icon.p-xs{--ui-shadow-y:2px}