@leftium/nimble.css 0.1.0 → 0.2.0

package/README.md

@@ -1,12 +1,12 @@
 # nimble.css
 
-A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~3 KB gzipped.
+A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~3.3 KB brotli (core).
 
 - **Classless by default** — style every standard HTML element with zero markup changes
 - **Automatic dark mode** — via `prefers-color-scheme` and `light-dark()`
 - **OKLCH color system** — perceptually uniform, fully customizable via SCSS config
 - **Cascade layers** — plays nicely alongside your own styles
-- **Tiny** — 11.9 KB minified, ~3.1 KB gzipped
+- **Tiny** — core is 15.4 KB minified, ~3.3 KB brotli; full bundle is 18.9 KB minified, ~4 KB brotli
 
 ## Demos
 
@@ -15,38 +15,83 @@ A minimal class/classless CSS library. Drop it in and your semantic HTML looks g
 
 ## Quick Start
 
+### npm
+
+```bash
+npm install @leftium/nimble.css
+```
+
+Then import in your CSS, JS, or framework:
+
+```css
+/* CSS */
+@import '@leftium/nimble.css';
+```
+
+```js
+// JS / framework entry point
+import '@leftium/nimble.css';
+```
+
 ### CDN
 
+Via jsDelivr (npm):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble.min.css">
+```
+
+Or via GitHub (latest on `main`):
+
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble.min.css">
 ```
 
 That's it. Write semantic HTML and it just works.
 
-### Sub-bundles
+### Bundles
 
-Pick only what you need:
+`nimble.min.css` (18.9 KB) includes everything.
 
-| Bundle | Minified | Contents |
-|---|---|---|
-| `nimble.min.css` | 11.9 KB | Everything |
-| `nimble-base.min.css` | 5.2 KB | Reset + colors + document + typography |
-| `nimble-reset.min.css` | 1.7 KB | Modern CSS reset only |
-| `nimble-utilities.min.css` | 572 B | Utility classes only |
+To trim size, use `nimble-core.min.css` (15.4 KB) + only the add-ons you need:
+
+| Add-on | Minified |
+|---|---|
+| `nimble-progress.min.css` | 1.6 KB |
+| `nimble-meter.min.css` | 1.0 KB |
+| `nimble-select.min.css` | 1.0 KB |
+
+Mix and match with CDN links (comment out what you don't need):
 
 ```html
-<!-- Just the classless core, no element styles or utilities -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble-base.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-core.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-progress.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-meter.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-select.min.css">
 ```
 
-### Download
+Or with SCSS (comment out what you don't need):
 
-Grab [`nimble.min.css`](dist/nimble.min.css) from this repo and include it locally:
-
-```html
-<link rel="stylesheet" href="nimble.min.css">
+```scss
+@use '@leftium/nimble.css/scss/core';       // core
+@use '@leftium/nimble.css/scss/progress';   // add-ons
+@use '@leftium/nimble.css/scss/meter';
+@use '@leftium/nimble.css/scss/select';
 ```
 
+<details>
+<summary>Granular sub-bundles</summary>
+
+For advanced use, `nimble-core` is composed of these non-overlapping layers:
+
+| Sub-bundle | Minified | Contents |
+|---|---|---|
+| `nimble-reset.min.css` | 1.8 KB | Modern CSS reset |
+| `nimble-base.min.css` | 3.4 KB | Colors + document + typography |
+| `nimble-utilities.min.css` | 572 B | Utility classes |
+
+</details>
+
 ## Utility Classes
 
 Content is centered at `720px` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
@@ -63,7 +108,42 @@ Content is centered at `720px` by default — no class needed. These opt-in util
 
 ## Customization
 
-nimble.css is built with SCSS. Override any config variable:
+### CSS Custom Properties
+
+Override any property at runtime — no build step needed:
+
+```css
+:root {
+  --nc-primary: oklch(0.50 0.15 150);
+  --nc-radius: 0.5rem;
+  --nc-spacing: 1.25rem;
+}
+```
+
+| Property | Description |
+|---|---|
+| `--nc-surface-1` .. `--nc-surface-4` | Background hierarchy (page, card, input, overlay) |
+| `--nc-text` | Text color (adapts to light/dark mode) |
+| `--nc-border` | Default border color |
+| `--nc-primary` | Accent color (links, buttons, focus rings) |
+| `--nc-primary-hover` | Accent hover state |
+| `--nc-primary-focus` | Accent focus ring (semi-transparent) |
+| `--nc-primary-contrast` | Text on primary backgrounds |
+| `--nc-secondary` | Secondary accent (reset buttons) |
+| `--nc-secondary-hover` | Secondary hover state |
+| `--nc-secondary-focus` | Secondary focus ring |
+| `--nc-secondary-contrast` | Text on secondary backgrounds |
+| `--nc-valid` | Validation success color |
+| `--nc-invalid` | Validation error color |
+| `--nc-font-sans` | Body font stack |
+| `--nc-font-mono` | Code font stack |
+| `--nc-spacing` | Base spacing unit |
+| `--nc-radius` | Border radius |
+| `--nc-content-width` | Max content width |
+
+### SCSS
+
+For build-time customization, override any SCSS config variable:
 
 ```scss
 @use 'nimble' with (
@@ -103,7 +183,7 @@ nimble.css is built with SCSS. Override any config variable:
 nimble.css combines [Open Props](https://open-props.style/)'s design token philosophy with [PicoCSS](https://picocss.com/)'s classless aesthetics. Key concepts borrowed from Open Props:
 
 - **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts. Defined in `_colors.scss` from OKLCH parameters rather than imported at runtime.
-- **Text hierarchy** (`text-1`, `text-2`) — primary and muted text colors, same naming convention as Open Props.
+- **Text color** (`text`) — single text color variable; muted text derived inline via `color-mix()`.
 - **OKLCH color space** — perceptually uniform color system. Change `$primary-hue` and the entire palette regenerates consistently.
 - **Curated scale values** — `$spacing: 1rem` (~Open Props `size-3`) and `$radius: 0.25rem` (~Open Props `radius-2`) are sourced from Open Props' scales.
 - **Minimal DevTools pollution** — ~20 semantic custom properties on `:root` plus scoped `--_` internals per component, rather than dumping hundreds of variables globally.

package/dist/nimble-base.css

@@ -1,123 +1,4 @@
 @layer nimble.reset, nimble.base;
-@layer nimble.reset {
-  :where(*),
-  :where(*::before),
-  :where(*::after) {
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-  }
-  :where(html) {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-  }
-  :where(body) {
-    margin: 0;
-  }
-  :where(h1) {
-    font-size: 2em;
-    margin-block: 0.67em;
-  }
-  :where(hr) {
-    height: 0;
-    color: inherit;
-  }
-  :where(nav) :where(ol, ul) {
-    list-style-type: none;
-    padding: 0;
-  }
-  :where(pre) {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  :where(abbr[title]) {
-    text-decoration: underline dotted;
-  }
-  :where(b, strong) {
-    font-weight: bolder;
-  }
-  :where(code, kbd, samp) {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  :where(small) {
-    font-size: 80%;
-  }
-  :where(sub, sup) {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  :where(sub) {
-    bottom: -0.25em;
-  }
-  :where(sup) {
-    top: -0.5em;
-  }
-  :where(iframe) {
-    border-style: none;
-  }
-  :where(table) {
-    border-collapse: collapse;
-    border-color: currentColor;
-    text-indent: 0;
-  }
-  :where(button, input, select, textarea) {
-    font: inherit;
-    letter-spacing: inherit;
-  }
-  :where(button, [type=button], [type=reset], [type=submit]) {
-    -webkit-appearance: button;
-  }
-  :where(fieldset) {
-    border: 1px solid #a0a0a0;
-  }
-  :where(progress) {
-    vertical-align: baseline;
-  }
-  :where(textarea) {
-    resize: vertical;
-    overflow: auto;
-  }
-  :where([type=search]) {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  :where(::-webkit-search-decoration) {
-    -webkit-appearance: none;
-  }
-  :where(::-webkit-inner-spin-button),
-  :where(::-webkit-outer-spin-button) {
-    height: auto;
-  }
-  :where(::-webkit-file-upload-button) {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  :where(summary) {
-    display: list-item;
-  }
-  :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
-    touch-action: manipulation;
-  }
-  :where([aria-busy=true]) {
-    cursor: progress;
-  }
-  :where([aria-disabled=true], [disabled]) {
-    cursor: not-allowed;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :where(*),
-    :where(*::before),
-    :where(*::after) {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}
 @layer nimble.base {
   :root {
     color-scheme: light dark;
@@ -125,8 +6,7 @@
     --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
     --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
     --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
-    --nc-text-1: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
-    --nc-text-2: light-dark(oklch(0.58 0.005 250), oklch(0.65 0.005 250));
+    --nc-text: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
     --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
     --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
     --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
@@ -156,7 +36,7 @@
     font-family: var(--nc-font-sans);
     font-size: 100%;
     line-height: 1.5;
-    color: var(--nc-text-1);
+    color: var(--nc-text);
     background-color: var(--nc-surface-1);
   }
   body {
@@ -166,10 +46,11 @@
   }
   body > * {
     grid-column: 2;
+    min-width: 0;
   }
   ::selection {
     background-color: var(--nc-primary-focus);
-    color: var(--nc-text-1);
+    color: var(--nc-text);
   }
 }
 @layer nimble.base {
@@ -184,7 +65,7 @@
   h2 {
     font-size: 1.75rem;
     line-height: 1.15;
-    margin-top: 0;
+    margin-top: 2rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -192,7 +73,7 @@
   h3 {
     font-size: 1.5rem;
     line-height: 1.2;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -200,7 +81,7 @@
   h4 {
     font-size: 1.25rem;
     line-height: 1.3;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -208,7 +89,7 @@
   h5 {
     font-size: 1.125rem;
     line-height: 1.4;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -216,7 +97,7 @@
   h6 {
     font-size: 1rem;
     line-height: 1.5;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -236,9 +117,6 @@
     margin-top: 0;
     margin-bottom: var(--nc-spacing);
   }
-  :where(p, ul, ol, dl, blockquote, pre, table, figure, form) + :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: calc(var(--nc-spacing) * 2);
-  }
   ul, ol {
     padding-inline-start: 1.5em;
   }
@@ -266,7 +144,7 @@
   :where(blockquote) cite {
     font-style: normal;
     font-size: 0.9em;
-    color: var(--nc-text-2);
+    color: color-mix(in oklch, var(--nc-text), transparent 40%);
   }
   hr {
     border: none;

package/dist/nimble-base.min.css

@@ -1 +1 @@
-@layer nimble.reset{:where(*),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text-1:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-text-2:light-dark(oklch(58% .005 250),oklch(65% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text-1);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text-1)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}:where(p,ul,ol,dl,blockquote,pre,table,figure,form)+:is(h1,h2,h3,h4,h5,h6){margin-top:calc(var(--nc-spacing) * 2)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:var(--nc-text-2);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}
+@layer nimble.reset;@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}