Fixed theming docs

Dockerfile

@@ -15,3 +15,4 @@ COPY src /usr/share/nginx/html/src
 COPY index.html /usr/share/nginx/html
 COPY wave.webp /usr/share/nginx/html
 COPY favicon.webp /usr/share/nginx/html
+COPY SKILL.md /usr/share/nginx/html

SKILL.md

@@ -0,0 +1,126 @@
+---
+name: CSS Utilities
+description: How to style all HTML websites using @ztimson/css-utils (bootstrap inspired)
+modified: 2026-08-01T06:12:28.966Z
+---
+
+# SCSS Utility Framework
+
+A single-file (`_theme.scss`) utility-class system. No build step config needed beyond Sass with the `sass:map` module. Import once globally.
+
+## Theme Setup
+
+All colors/tokens live in `:root` as CSS custom properties — edit these, not the utility classes:
+
+
+```scss
+--theme-background
+--theme-primary
+--theme-accent
+--theme-success
+--theme-info
+--theme-warn
+--theme-danger
+--theme-black
+--theme-white
+
+// Light/dark aware variables (auto via `light-dark()`):
+--theme-surface
+--theme-border
+--theme-text
+--theme-muted
+--theme-lighter (transparent)
+--theme-darker (transparent)
+
+// Breakpoints & spacing
+$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
+$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);
+```
+
+Force a scheme on any element: `.theme-light` / `.theme-dark`, defaults to system preference.
+
+## "Fix" Classes (reboot/reset helpers)
+
+Apply `.fix` on `body`/root wrapper for all resets, or pick individual ones:
+
+| Class            | Purpose                                                     |
+|------------------|-------------------------------------------------------------|
+| `.fix-anchor`    | Styled `<a>` links using `--theme-primary`                  |
+| `.fix-button`    | `cursor: pointer` on enabled buttons                        |
+| `.fix-dom`       | 100% height/width, no margin/padding, box-sizing border-box |
+| `.fix-focus`     | Removes outline/tap highlight                               |
+| `.fix-font`      | Base font sizing/weights for headings & form elements       |
+| `.fix-scrollbar` | Styled webkit scrollbars using `--theme-muted`              |
+| `.fix`           | All of the above                                            |
+
+Other misc: `.center` (absolute centering), `.clamp` (max content width), `.reset` (`all: revert`).
+
+## Color Utilities
+
+Pattern: `.b-{color}` (border), `.bg-{color}` (background + auto contrast text), `.fg-{color}` (text color).
+
+Colors: `black, white, background, background-contrast, primary, primary-contrast, accent, accent-contrast, surface, border, text, muted, lighter, darker, info, success, warn, danger`
+
+Variants: `.bg-{color}-lighter` / `.bg-{color}-darker` (filtered overlay) for `primary, accent, background, surface, info, success, warn, danger, muted`.
+
+`.bg-transparent` also available.
+
+## Typography (`.fs-*`)
+
+- Weight/style: `fs-bolder, fs-bold, fs-normal, fs-lighter, fs-italic, fs-norm`
+- Decoration: `fs-none, fs-strike, fs-underline` (combinable)
+- Size scale: `fs-1`(1rem) → `fs-7`(2.5rem)
+- Wrapping: `fs-break, fs-truncate, fs-nowrap, fs-wrap`
+- Case: `fs-lowercase, fs-uppercase, fs-capitalize`
+
+## Borders
+
+- Radius: `.br-circle, .br-pill`, plus scaled `.br{t|tl|tr|b|bl|br}-{0-5}` (size keys from `$sizes`)
+- Style: `.b-dash, .b-dot, .b-double, .b-none, .b-solid`
+- Width (per breakpoint + direction): `.b-{0-5}`, `.b{s|t|e|b}-{0-5}` (s/t/e/b = left/top/right/bottom, logical-ish)
+
+## Spacing (margin/padding)
+
+Per breakpoint, uses `$sizes` keys (0–5):
+- All sides: `.m-{s}`, `.p-{s}`
+- Axis: `.mx-{s}, .my-{s}, .px-{s}, .py-{s}`
+- Direction: `.m{s|t|e|b}-{size}`, `.p{s|t|e|b}-{size}`
+- Auto: `.m-auto, .mx-auto, .my-auto, .m{dir}-auto`
+
+## Flexbox / Grid Layout
+
+- Display: `.d-{block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|table-row|table-cell|none}`
+- Direction shorthand: `.flex-c` (column), `.flex-cr` (col-reverse), `.flex-r`, `.flex-rr`; inline variants `.flex-inline-*`
+- Grow/shrink: `.flex-fill, .flex-fill-even, .flex-grow-{0-3}, .flex-shrink-{0-3}`
+- Wrap: `.flex-nowrap, .flex-wrap`
+- `align-items/content/self-{start|end|center|baseline|stretch}`
+- `justify-{start|end|center|between|around|evenly}`
+- `gap-{0-5}`
+- `order-{0-5}`
+
+## Position / Sizing
+
+- `.pos-{abs|fix|rel|static|stick}`
+- Offsets (0–100 step via `$divisible`): `.top-{n}, .bottom-{n}, .start-{n}, .end-{n}` (percent)
+- `.h-{n}`, `.w-{n}` (percent) + `.h-auto, .w-auto`
+- `.fit-{contain|cover|fill|scale|none}` (object-fit)
+- `.float-{start|end|none}`
+- `.visible, .hidden` (visibility, not display)
+
+## Other Utilities
+
+- `.animate, .animate-none, .animate-color, .animate-opacity, .animate-pos, .animate-trans`
+- `.o-{0,10,20,25,30,33,34,40,50,60,66,70,75,80,90,100}` (opacity)
+- `.overflow{-x|-y}-{auto|hidden|scroll|visible}`
+- `.shadow-none` to `.shadow-5`, directional `.shadow-{top|bottom|start|end}`, `.shadow-inset-{1,2}`, `.shadow-drop{,-sm,-lg}`, colored `.shadow-{primary|accent|info|success|warn|danger}`
+- `.select-{all|auto|none|text}` (user-select)
+- `.z-{0-5}`
+- `.curs-{name}` — full CSS cursor keyword list (pointer, grab, not-allowed, zoom-in, etc.)
+- `.hover:hover`, `.curs-hover` — brightness(125%) on hover
+- `.align-x, .align-x-start, .align-x-end` (text-align), `.align-y*` (vertical-align)
+
+## Responsive Breakpoints
+
+Every layout/spacing/flex utility above is generated per breakpoint suffix: `-sm-, -md-, -lg-, -xl-` (min-width media queries) plus a `-print-` variant for `@media print`. No suffix = base/xs.
+
+Example: `w-md-50` → 50% width from `md` breakpoint up. `d-lg-flex` → flex display from `lg` up.

index.html

@@ -18,6 +18,11 @@
 				--page-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 			}
 
+			:root .theme-dark {
+				--theme-background: #1a1a1a !important;
+				--theme-background-contrast: white !important;
+			}
+
 			* { box-sizing: border-box; transition: var(--page-transition); }
 
 			html, body {
@@ -54,7 +59,11 @@
 				color: var(--theme-primary); letter-spacing: 0.05em; display: block;
 			}
 
-			.tagline { font-size: 0.68rem; color: var(--theme-muted); margin-top: 2px; }
+			.tagline {
+				font-size: 0.68rem;
+				color: var(--theme-muted);
+				margin-top: 2px;
+			}
 
 			.nav-group { padding: 14px 10px 6px; }
 
@@ -232,7 +241,8 @@
 				<div class="bg-darker h-100">
 					<div class="sidebar-logo bb-1">
 						<span class="wordmark fs-1">@ztimson/css-utils</span>
-						<div class="tagline">Utility-first CSS library</div>
+						<div class="tagline">Utility-first CSS library • <a href="SKILL.md" target="_blank">SKILL.md</a></div>
+
 					</div>
 					<div class="nav-group">
 						<div class="nav-label">Getting Started</div>
@@ -281,6 +291,7 @@
 					<div class="hero-eyebrow fs-1">CSS Utility Library</div>
 					<h1>@ztimson/<strong>css-utils</strong></h1>
 					<p class="hero-sub">Bootstrap-inspired utilities at half the size. All theming through CSS variables — no build step required.</p>
+					<a href="SKILL.md" target="_blank">SKILL.md</a>
 					<div class="hero-stats">
 						<div class="hero-stat"><span class="num">&lt; 100 KB</span><span class="lbl">Uncompressed</span></div>
 						<div class="stat-div"></div>
@@ -299,11 +310,12 @@
 						<div class="sub-label">NPM</div>
 						<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>npm install @ztimson/css-utils</code></pre>
 						<div class="sub-label">Import (pick one)</div>
-						<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>@import url("@ztimson/css-utils/dist/css-utils.css");
-@import url("@ztimson/css-utils/dist/css-utils.min.css");
+						<pre class="bg-darker p-3 br-2 fg-success fs-1 mb-3"><code>@import url("@ztimson/css-utils/dist/css-utils.min.css");
+@import url("@ztimson/css-utils/dist/css-utils.css");
 @import url("@ztimson/css-utils/src/main.scss");</code></pre>
 						<div class="sub-label">CDN</div>
-						<pre class="bg-darker p-3 br-2 fg-success fs-1"><code>&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css"&gt;</code></pre>
+						<pre class="bg-darker p-3 br-2 fg-success fs-1"><code>&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css"&gt;
+&lt;link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css"&gt;</code></pre>
 					</div>
 				</div>
 
@@ -315,6 +327,10 @@
 					<div class="demo-card">
 						<p class="fg-muted fs-1 mb-3">All theming through CSS variables — swap them at runtime without recompiling.</p>
 						<pre class="bg-darker p-3 br-2 fg-success fs-1"><code>:root {
+:root {
+	// Theme colors -- what ever you like
+	--theme-background: #fafafa;
+	--theme-background-contrast: black;
 	--theme-primary: #4979de;
 	--theme-primary-contrast: black;
 	--theme-accent: #2caec0;
@@ -327,35 +343,23 @@
 	--theme-black: black;
 	--theme-white: white;
 
+	// Misc
 	--theme-animation: 0.2s linear;
 	--theme-content-width: 1100px;
-	--theme-font: 'Arial', sans-serif;
+	--theme-font: Arial, sans-serif;
+
+	// Theme dependant (light/dark)
+	color-scheme: light dark;
+	--theme-surface: light-dark(#ffffff, #2e2e2e);
+	--theme-border: light-dark(#E5E7EB, #374151);
+	--theme-muted: light-dark(#6c757d, #cccccc);
+	--theme-text: light-dark(#000000, #ffffff);
+	--theme-lighter: light-dark(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
+	--theme-darker: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
 }
 
-.theme-light {
-	--theme-background: #fafafa;
-	--theme-background-contrast: white;
-
-	--theme-surface: #ffffff;
-	--theme-border: #E5E7EB;
-	--theme-muted: #6c757d;
-	--theme-text: #000000;
-
-	--theme-lighter: rgba(255, 255, 255, 0.05);
-	--theme-darker: rgba(0, 0, 0, 0.05);
-}
-
-.theme-dark  {
-	--theme-background: #1a1a1a;
-	--theme-background-contrast: black;
-
-	--theme-surface: #2e2e2e;
-	--theme-border: #374151;
-	--theme-muted: #cccccc;
-	--theme-text: #ffffff;
-
-	--theme-lighter: rgba(255, 255, 255, 0.1);
-	--theme-darker: rgba(0, 0, 0, 0.1);
+.theme-light { color-scheme: light !important; }
+.theme-dark { color-scheme: dark !important; }
 }</code></pre>
 					</div>
 				</div>
@@ -367,12 +371,13 @@
 					</div>
 					<p class="fg-muted fs-1 mb-3">Opt-in opinionated resets. Apply <span class="chip">.fix</span> to enable all, or use granular classes.</p>
 					<div class="demo-card flex-r flex-wrap gap-2">
-						<span class="chip">.[no-]fix</span>
-						<span class="chip">.[no-]fix-anchor</span>
-						<span class="chip">.[no-]fix-button</span>
-						<span class="chip">.[no-]fix-dom</span>
-						<span class="chip">.[no-]fix-focus</span>
-						<span class="chip">.[no-]fix-font</span>
+						<span class="chip">.fix</span>
+						<span class="chip">.fix-anchor</span>
+						<span class="chip">.fix-button</span>
+						<span class="chip">.fix-dom</span>
+						<span class="chip">.fix-focus</span>
+						<span class="chip">.fix-font</span>
+						<span class="chip">.fix-scrollbar</span>
 						<span class="chip">.reset</span>
 					</div>
 					<div class="demo-card mt-3">
@@ -380,8 +385,8 @@
 						<div class="fix-anchor mb-3">
 							<a>This link uses .fix-anchor — styled with theme color, underlines on hover with cursor</a>
 						</div>
-						<div class="reset">
-							<a>This link uses .no-fix / reset — inherits all styles, no decoration</a>
+						<div>
+							<a class="reset">Use <span class="fg-accent">.reset</span> to remove fixes & styling</a>
 						</div>
 					</div>
 				</div>
@@ -416,8 +421,7 @@
 							<div class="pos-abs anchor-s bg-info fg-white p-2 br-2 fs-1" style="left:50%; top:25%">.anchor-s</div>
 							<div class="pos-abs anchor-c bg-primary fg-white p-2 br-2 fs-1" style="left:50%; top:55%">.anchor-c</div>
 							<div class="pos-abs anchor-e bg-accent fg-white p-2 br-2 fs-1" style="left:50%; top:85%">.anchor-e</div>
-							<div class="pos-abs b-danger bs-2 be-2 h-100 w-50 start-0 top-0"></div>
-							<div class="pos-abs b-danger be-2 h-100 w-50 start-50 top-0"></div>
+							<div class="pos-abs b-danger be-2 h-100 w-50 start-0 top-0"></div>
 						</div>
 					</div>
 				</div>
@@ -579,30 +583,30 @@
 
 						<div class="sub-label mt-3">Lighter / Darker variants — <span class="chip">.bg-[color]-lighter</span> <span class="chip">.bg-[color]-darker</span></div>
 						<div class="demo-card flex-r flex-wrap gap-2">
-							<div class="bg-primary-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-primary-lighter</div>
-							<div class="bg-primary         p-2 br-2 fs-1 b-1 fg-text">.bg-primary</div>
 							<div class="bg-primary-darker  p-2 br-2 fs-1 b-1 fg-text">.bg-primary-darker</div>
-							<div class="bg-success-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-success-lighter</div>
-							<div class="bg-success         p-2 br-2 fs-1 b-1 fg-text">.bg-success</div>
+							<div class="bg-primary         p-2 br-2 fs-1 b-1 fg-text">.bg-primary</div>
+							<div class="bg-primary-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-primary-lighter</div>
 							<div class="bg-success-darker  p-2 br-2 fs-1 b-1 fg-text">.bg-success-darker</div>
-							<div class="bg-danger-lighter  p-2 br-2 fs-1 b-1 fg-text">.bg-danger-lighter</div>
-							<div class="bg-danger          p-2 br-2 fs-1 b-1 fg-text">.bg-danger</div>
+							<div class="bg-success         p-2 br-2 fs-1 b-1 fg-text">.bg-success</div>
+							<div class="bg-success-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-success-lighter</div>
 							<div class="bg-danger-darker   p-2 br-2 fs-1 b-1 fg-text">.bg-danger-darker</div>
-							<div class="bg-warn-lighter    p-2 br-2 fs-1 b-1 fg-text">.bg-warn-lighter</div>
-							<div class="bg-warn            p-2 br-2 fs-1 b-1 fg-text">.bg-warn</div>
+							<div class="bg-danger          p-2 br-2 fs-1 b-1 fg-text">.bg-danger</div>
+							<div class="bg-danger-lighter  p-2 br-2 fs-1 b-1 fg-text">.bg-danger-lighter</div>
 							<div class="bg-warn-darker     p-2 br-2 fs-1 b-1 fg-text">.bg-warn-darker</div>
-							<div class="bg-accent-lighter  p-2 br-2 fs-1 b-1 fg-text">.bg-accent-lighter</div>
-							<div class="bg-accent          p-2 br-2 fs-1 b-1 fg-text">.bg-accent</div>
+							<div class="bg-warn            p-2 br-2 fs-1 b-1 fg-text">.bg-warn</div>
+							<div class="bg-warn-lighter    p-2 br-2 fs-1 b-1 fg-text">.bg-warn-lighter</div>
 							<div class="bg-accent-darker   p-2 br-2 fs-1 b-1 fg-text">.bg-accent-darker</div>
-							<div class="bg-info-lighter    p-2 br-2 fs-1 b-1 fg-text">.bg-info-lighter</div>
-							<div class="bg-info            p-2 br-2 fs-1 b-1 fg-text">.bg-info</div>
+							<div class="bg-accent          p-2 br-2 fs-1 b-1 fg-text">.bg-accent</div>
+							<div class="bg-accent-lighter  p-2 br-2 fs-1 b-1 fg-text">.bg-accent-lighter</div>
 							<div class="bg-info-darker     p-2 br-2 fs-1 b-1 fg-text">.bg-info-darker</div>
-							<div class="bg-muted-lighter   p-2 br-2 fs-1 b-1 fg-text">.bg-muted-lighter</div>
-							<div class="bg-muted           p-2 br-2 fs-1 b-1 fg-text">.bg-muted</div>
+							<div class="bg-info            p-2 br-2 fs-1 b-1 fg-text">.bg-info</div>
+							<div class="bg-info-lighter    p-2 br-2 fs-1 b-1 fg-text">.bg-info-lighter</div>
 							<div class="bg-muted-darker    p-2 br-2 fs-1 b-1 fg-text">.bg-muted-darker</div>
-							<div class="bg-surface-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-surface-lighter</div>
-							<div class="bg-surface         p-2 br-2 fs-1 b-1 fg-text">.bg-surface</div>
+							<div class="bg-muted           p-2 br-2 fs-1 b-1 fg-text">.bg-muted</div>
+							<div class="bg-muted-lighter   p-2 br-2 fs-1 b-1 fg-text">.bg-muted-lighter</div>
 							<div class="bg-surface-darker  p-2 br-2 fs-1 b-1 fg-text">.bg-surface-darker</div>
+							<div class="bg-surface         p-2 br-2 fs-1 b-1 fg-text">.bg-surface</div>
+							<div class="bg-surface-lighter p-2 br-2 fs-1 b-1 fg-text">.bg-surface-lighter</div>
 						</div>
 					</div>
 
@@ -748,24 +752,42 @@
 					</div>
 
 					<div class="sub-section">
-						<div class="sub-label">Justify — <span class="chip">.justify-[start|center|end|between|around|evenly]</span></div>
+						<div class="sub-label">Justify — <span class="chip">.justify-[bp]-[start|center|end|between|around|evenly]</span></div>
 						<div class="demo-card flex-c gap-2">
-							<div class="flex-r justify-start   gap-1 bg-darker p-2 br-2"><span class="fg-muted fs-1 ms-3">.justify-start</span><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
-							<div class="flex-r justify-center  gap-1 bg-darker p-2 br-2"><span class="fg-muted fs-1 ms-3">.justify-center</span><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
-							<div class="flex-r justify-end     gap-1 bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-end</span><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
-							<div class="flex-r justify-between bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-between</span><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
-							<div class="flex-r justify-around  bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-around</span><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
-							<div class="flex-r justify-evenly  bg-darker p-2 br-2"><span class="fg-muted fs-1">.justify-evenly</span><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							<div class="flex-r gap-3 align-items-center">
+								<div class="fg-muted" style="width: 125px">.justify-start</div>
+								<div class="flex-fill flex-r justify-start   gap-1 bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							</div>
+							<div class="flex-r gap-3 align-items-center">
+								<div class="fg-muted" style="width: 125px">.justify-end</div>
+								<div class="flex-fill flex-r justify-end     gap-1 bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							</div>
+							<div class="flex-r gap-3 align-items-center">
+								<div class="fg-muted" style="width: 125px">.justify-center</div>
+								<div class="flex-fill flex-r justify-center  gap-1 bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							</div>
+							<div class="flex-r gap-3 align-items-center">
+								<div class="fg-muted" style="width: 125px">.justify-evenly</div>
+								<div class="flex-fill flex-r justify-evenly  bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							</div>
+							<div class="flex-r gap-3 align-items-center">
+								<div class="fg-muted" style="width: 125px">.justify-around</div>
+								<div class="flex-fill flex-r justify-around  bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							</div>
+							<div class="flex-r gap-3 align-items-center">
+								<div class="fg-muted" style="width: 125px">.justify-between</div>
+								<div class="flex-fill flex-r justify-between bg-darker p-2 br-2"><div class="bg-primary p-1 br-1 fs-1 fg-white">A</div><div class="bg-primary p-1 br-1 fs-1 fg-white">B</div><div class="bg-primary p-1 br-1 fs-1 fg-white">C</div></div>
+							</div>
 						</div>
 					</div>
 
 					<div class="sub-section">
 						<div class="sub-label">Align Items / Self / Content</div>
 						<div class="demo-card flex-r gap-2 b-1" style="height:90px">
-							<div class="align-self-start  bg-primary fg-white p-1 br-1 fs-1">.align-self-start</div>
-							<div class="align-self-center bg-accent  fg-white p-1 br-1 fs-1">.align-self-center</div>
-							<div class="align-self-end    bg-info    fg-white p-1 br-1 fs-1">.align-self-end</div>
-							<div class="align-self-stretch bg-success fg-white p-1 br-1 fs-1 flex-r align-items-center">.align-self-stretch</div>
+							<div class="align-self-start  bg-primary fg-white p-1 br-1 fs-1">.align-self-[bp]-start</div>
+							<div class="align-self-center bg-accent  fg-white p-1 br-1 fs-1">.align-self-[bp]-center</div>
+							<div class="align-self-end    bg-info    fg-white p-1 br-1 fs-1">.align-self-[bp]-end</div>
+							<div class="align-self-stretch bg-success fg-white p-1 br-1 fs-1 flex-r align-items-center">.align-self-[bp]-stretch</div>
 						</div>
 					</div>
 
@@ -773,19 +795,19 @@
 						<div class="sub-label">Grow / Shrink / Fill</div>
 						<div class="demo-card flex-c gap-2">
 							<div class="flex-r gap-2">
-								<div class="flex-grow-1 bg-primary fg-white p-2 br-2 fs-1 align-x">.flex-grow-1</div>
-								<div class="flex-grow-2 bg-accent  fg-white p-2 br-2 fs-1 align-x">.flex-grow-2</div>
-								<div class="flex-grow-3 bg-info    fg-white p-2 br-2 fs-1 align-x">.flex-grow-3</div>
+								<div class="flex-grow-1 bg-primary fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-grow-1</div>
+								<div class="flex-grow-2 bg-accent  fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-grow-2</div>
+								<div class="flex-grow-3 bg-info    fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-grow-3</div>
 							</div>
 							<div class="flex-r gap-2">
-								<div class="flex-fill     bg-success fg-white p-2 br-2 fs-1 align-x">.flex-fill</div>
-								<div class="flex-fill     bg-success fg-white p-2 br-2 fs-1 align-x">.flex-fill</div>
-								<div class="flex-fill-even bg-warn  fg-white p-2 br-2 fs-1 align-x">.flex-fill-even</div>
-								<div class="flex-fill-even bg-warn  fg-white p-2 br-2 fs-1 align-x">.flex-fill-even</div>
+								<div class="flex-fill     bg-success fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill</div>
+								<div class="flex-fill     bg-success fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill</div>
+								<div class="flex-fill-even bg-warn  fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill-even</div>
+								<div class="flex-fill-even bg-warn  fg-white p-2 br-2 fs-1 align-x">.flex-[bp]-fill-even</div>
 							</div>
 							<div class="flex-r gap-2 align-items-center">
-								<div class="flex-shrink-0 bg-danger fg-white p-2 br-2 fs-1">.flex-shrink-0</div>
-								<div class="flex-shrink-1 bg-muted  fg-white p-2 br-2 fs-1">.flex-shrink-1</div>
+								<div class="flex-shrink-0 bg-danger fg-white p-2 br-2 fs-1">.flex-[bp]-shrink-0</div>
+								<div class="flex-shrink-1 bg-muted  fg-white p-2 br-2 fs-1">.flex-[bp]-shrink-1</div>
 							</div>
 						</div>
 					</div>
@@ -794,7 +816,7 @@
 						<div class="sub-label">Wrap</div>
 						<div class="demo-card flex-r gap-3">
 							<div style="flex:1">
-								<div class="fg-muted fs-1 mb-2">.flex-nowrap</div>
+								<div class="fg-muted fs-1 mb-2">.flex-[bp]-nowrap</div>
 								<div class="flex-r flex-nowrap gap-1 bg-darker p-2 br-2 overflow-hidden">
 									<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 1</div>
 									<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 2</div>
@@ -802,7 +824,7 @@
 								</div>
 							</div>
 							<div style="flex:1">
-								<div class="fg-muted fs-1 mb-2">.flex-wrap</div>
+								<div class="fg-muted fs-1 mb-2">.flex-[bp]-wrap</div>
 								<div class="flex-r flex-wrap gap-1 bg-darker p-2 br-2">
 									<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 1</div>
 									<div class="bg-primary fg-white p-1 br-1 fs-1 align-x w-40">Item 2</div>
@@ -813,7 +835,7 @@
 					</div>
 
 					<div class="sub-section">
-						<div class="sub-label">Order — <span class="chip">.order-[0–5]</span></div>
+						<div class="sub-label">Order — <span class="chip">.order-[bp]-[0–5]</span></div>
 						<div class="demo-card flex-r gap-2">
 							<div class="order-5 bg-danger  fg-white p-2 br-2 fs-1">#1 / .order-5</div>
 							<div class="order-1 bg-success fg-white p-2 br-2 fs-1">#2 / .order-1</div>
@@ -823,7 +845,7 @@
 					</div>
 
 					<div class="sub-section">
-						<div class="sub-label">Gap — <span class="chip">.gap-[0–5]</span></div>
+						<div class="sub-label">Gap — <span class="chip">.gap-[bp]-[0–5]</span></div>
 						<div class="demo-card flex-c gap-2">
 							<div class="flex-r gap-3 bg-darker p-2 br-2 align-items-center">
 								<span class="fg-muted fs-1">.gap-0</span>
@@ -1151,10 +1173,10 @@
 					<div class="sub-section">
 						<div class="sub-label">Directional — <span class="chip">.shadow-[top|bottom|start|end]</span></div>
 						<div class="demo-card flex-r flex-wrap gap-4">
-							<div class="shadow-warn shadow-top    bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-top</span></div>
-							<div class="shadow-warn shadow-bottom bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-bottom</span></div>
-							<div class="shadow-warn shadow-start  bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-start</span></div>
-							<div class="shadow-warn shadow-end    bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-end</span></div>
+							<div class="shadow-top    bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-top</span></div>
+							<div class="shadow-bottom bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-bottom</span></div>
+							<div class="shadow-start  bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-start</span></div>
+							<div class="shadow-end    bg-surface p-4 br-2 flex-c align-items-center gap-2"><span class="fs-1 fg-muted">.shadow-end</span></div>
 						</div>
 					</div>
 
@@ -1198,7 +1220,9 @@
 
 					<div class="sub-section">
 						<div class="sub-label">Drop (filter-based, respects SVG/PNG shape) — <span class="chip">.shadow-drop-sm</span> <span class="chip">.shadow-drop</span> <span class="chip">.shadow-drop-lg</span></div>
-						<div class="demo-card flex-r gap-5 align-items-center">
+						<div class="demo-card">
+							<p class="fg-muted fs-1 mb-3">Unlike <span class="fg-accent">box-shadow</span>, filter drop-shadow respects transparency</p>
+							<div class="flex-r gap-5 align-items-center">
 								<div class="flex-c align-items-center gap-2">
 									<svg width="60" height="60" viewBox="0 0 60 60" class="shadow-drop-sm">
 										<polygon points="30,4 56,52 4,52" fill="var(--theme-primary)"/>
@@ -1217,7 +1241,7 @@
 									</svg>
 									<span class="fs-1 fg-muted">.shadow-drop-lg</span>
 								</div>
-							<p class="fg-muted fs-1" style="max-width:240px">Unlike <span class="fg-accent">box-shadow</span>, filter drop-shadow follows the actual shape of irregular elements.</p>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -1264,31 +1288,35 @@
 					</div>
 					<div class="syntax">Margin: .m[b|e|s|t|x|y]-[bp]-[0–5|auto]</div>
 					<div class="syntax">Padding: .p[b|e|s|t|x|y]-[bp]-[0–5]</div>
-					<div class="demo-card flex-r flex-wrap gap-1 align-items-start">
+					<div class="demo-card flex-c flex-wrap gap-1 align-items-start mt-3">
+						<div class="flex-r flex-wrap gap-2">
+							<div class="bg-warn b-1 b-warn w-100"><div class="bg-success mx-auto p-2 b-1 b-success fg-white fs-1 align-x" style="width:120px">.mx-auto</div></div>
+							<div>
+								<div class="bg-warn b-1 b-warn"><div class="bg-success my-3 py-3 b-1 b-success fg-white fs-1">.my-3 .py-3</div></div>
+							</div>
+							<div>
+								<div class="bg-warn b-1 b-warn"><div class="bg-success mt-3 pt-3 b-1 b-success fg-white fs-1">.mt-3 .pt-3</div></div>
+							</div>
+							<div>
+								<div class="bg-warn b-1 b-warn"><div class="bg-success mb-3 pb-3 b-1 b-success fg-white fs-1">.mb-3 .pb-3</div></div>
+							</div>
+							<div>
+								<div class="bg-warn b-1 b-warn"><div class="bg-success ms-3 ps-3 b-1 b-success fg-white fs-1">.ms-3 .ps-3</div></div>
+							</div>
+							<div>
+								<div class="bg-warn b-1 b-warn"><div class="bg-success me-3 pe-3 b-1 b-success fg-white fs-1">.me-3 .pe-3</div></div>
+							</div>
+							<div>
+								<div class="bg-warn b-1 b-warn"><div class="bg-success mx-3 px-3 b-1 b-success fg-white fs-1">.mx-3 .px-3</div></div>
+							</div>
+						</div>
+						<div class="flex-r flex-wrap gap-1 align-items-center">
 							<div class="bg-warn m-0 b-1 b-warn"><div class="bg-success p-0 b-1 b-success fg-white fs-1">.m-0 .p-0</div></div>
 							<div class="bg-warn m-1 b-1 b-warn"><div class="bg-success p-1 b-1 b-success fg-white fs-1">.m-1 .p-1</div></div>
 							<div class="bg-warn m-2 b-1 b-warn"><div class="bg-success p-2 b-1 b-success fg-white fs-1">.m-2 .p-2</div></div>
 							<div class="bg-warn m-3 b-1 b-warn"><div class="bg-success p-3 b-1 b-success fg-white fs-1">.m-3 .p-3</div></div>
 							<div class="bg-warn m-4 b-1 b-warn"><div class="bg-success p-4 b-1 b-success fg-white fs-1">.m-4 .p-4</div></div>
-					</div>
-					<div class="demo-card flex-r flex-wrap gap-1 align-items-start mt-3">
-						<div class="bg-warn b-1 b-warn"><div class="bg-success mt-3 b-1 b-success fg-white fs-1">.mt-3</div></div>
-						<div class="bg-warn b-1 b-warn"><div class="bg-success mb-3 b-1 b-success fg-white fs-1">.mb-3</div></div>
-						<div class="bg-warn b-1 b-warn"><div class="bg-success ms-3 b-1 b-success fg-white fs-1">.ms-3</div></div>
-						<div class="bg-warn b-1 b-warn"><div class="bg-success me-3 b-1 b-success fg-white fs-1">.me-3</div></div>
-						<div class="bg-warn b-1 b-warn"><div class="bg-success mx-3 b-1 b-success fg-white fs-1">.mx-3</div></div>
-						<div class="bg-warn b-1 b-warn"><div class="bg-success my-3 b-1 b-success fg-white fs-1">.my-3</div></div>
-						<div class="bg-warn b-1 b-warn w-100"><div class="bg-success mx-auto p-2 b-1 b-success fg-white fs-1 align-x" style="width:120px">.mx-auto</div></div>
-					</div>
-					<div class="demo-card mt-3">
-						<div class="sub-label">Directional padding</div>
-						<div class="flex-r flex-wrap gap-2">
-							<div class="bg-success pt-3 b-1 b-success fg-white fs-1">.pt-3</div>
-							<div class="bg-success pb-3 b-1 b-success fg-white fs-1">.pb-3</div>
-							<div class="bg-success ps-3 b-1 b-success fg-white fs-1">.ps-3</div>
-							<div class="bg-success pe-3 b-1 b-success fg-white fs-1">.pe-3</div>
-							<div class="bg-success px-3 b-1 b-success fg-white fs-1">.px-3</div>
-							<div class="bg-success py-3 b-1 b-success fg-white fs-1">.py-3</div>
+							<div class="bg-warn m-5 b-1 b-warn"><div class="bg-success p-5 b-1 b-success fg-white fs-1">.m-5 .p-5</div></div>
 						</div>
 					</div>
 				</div>
@@ -1299,14 +1327,14 @@
 						<h2>Visibility</h2><span class="section-id">utility</span>
 					</div>
 					<div class="syntax">.[hidden|visible]-[bp]</div>
-					<div class="demo-card flex-r gap-3 align-items-center">
-						<div class="b-1 br-2 p-2">
+					<div class="demo-card">
+						<p class="fg-muted fs-1 mb-3"><span class="fg-accent">.hidden</span> preserves layout space. Use <span class="fg-accent">.d-none</span> to remove from flow entirely.</p>
+						<div class="flex-r gap-3 align-items-center">
 							<div class="b-dash mb-2">
 								<div class="hidden b-1 p-2 br-2 fg-muted fs-1">.hidden</div>
 							</div>
 							<div class="visible bg-primary fg-white p-2 br-2 fs-1">.visible</div>
 						</div>
-						<p class="fg-muted fs-1 ms-2">Note: <span class="fg-accent">.hidden</span> uses <span class="fg-accent">visibility:hidden</span> — it preserves layout space. Use <span class="fg-accent">.d-none</span> to remove from flow entirely.</p>
 					</div>
 				</div>
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "CSS Utility Classes",
 	"readme": "README.md",
 	"scripts": {

src/main.scss

@@ -2,9 +2,10 @@
 
 // Theme settings ===========================================================================================
 
-// Colors
 :root {
 	// Theme colors -- what ever you like
+	--theme-background: #fafafa;
+	--theme-background-contrast: black;
 	--theme-primary: #4979de;
 	--theme-primary-contrast: black;
 	--theme-accent: #2caec0;
@@ -22,34 +23,18 @@
 	--theme-content-width: 1100px;
 	--theme-font: Arial, sans-serif;
 
-	// Light theme
-	&, .theme-light {
-		--theme-background: #fafafa;
-		--theme-background-contrast: white;
-
-		--theme-surface: #ffffff;
-		--theme-border: #E5E7EB;
-		--theme-muted: #6c757d;
-		--theme-text: #000000;
-
-		--theme-lighter: rgba(255, 255, 255, 0.05);
-		--theme-darker: rgba(0, 0, 0, 0.05);
+	// Theme dependant (light/dark)
+	color-scheme: light dark;
+	--theme-surface: light-dark(#ffffff, #2e2e2e);
+	--theme-border: light-dark(#E5E7EB, #374151);
+	--theme-muted: light-dark(#6c757d, #cccccc);
+	--theme-text: light-dark(#000000, #ffffff);
+	--theme-lighter: light-dark(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
+	--theme-darker: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
 }
 
-	// Dark theme
-	.theme-dark {
-		--theme-background: #1a1a1a;
-		--theme-background-contrast: black;
-
-		--theme-surface: #2e2e2e;
-		--theme-border: #374151;
-		--theme-muted: #cccccc;
-		--theme-text: #ffffff;
-
-		--theme-lighter: rgba(255, 255, 255, 0.1);
-		--theme-darker: rgba(0, 0, 0, 0.1);
-	}
-}
+.theme-light { color-scheme: light !important; }
+.theme-dark { color-scheme: dark !important; }
 
 $breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
 $sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);
@@ -110,28 +95,18 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 }
 
 .fix-scrollbar {
-	* {
-		scrollbar-width: thin;
-		scrollbar-color: var(--theme-primary) var(--theme-background);
-	}
-
 	*::-webkit-scrollbar {
-		width: 8px;
-		height: 8px;
+		width: 10px;
+		height: 10px;
 	}
-
-	*::-webkit-scrollbar-track {
-		background: var(--theme-background);
-	}
-
 	*::-webkit-scrollbar-thumb {
-		background-color: var(--theme-primary);
-		border-radius: 4px;
-		border: 2px solid var(--theme-background);
+		background: var(--theme-muted);
+		border-radius: 999px;
+		border: 3px solid transparent;
+		background-clip: padding-box;
 	}
-
-	*::-webkit-scrollbar-thumb:hover {
-		background-color: var(--theme-accent);
+	*::-webkit-scrollbar-track {
+		background: transparent;
 	}
 }
 
@@ -238,10 +213,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 @include color-variant('danger', 'danger');
 
 .bg-transparent { background-color: transparent !important; }
-.bg-container {
-	background-color: var(--theme-clear) !important;
-	color: var(--theme-text) !important;
-}
 
 // Lighter/Darker pseudo variants
 @each $color in ('primary', 'accent', 'background', 'surface', 'info', 'success', 'warn', 'danger', 'muted') {
@@ -349,10 +320,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 .shadow,.shadow-3 { box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08) !important; }
 .shadow-4 { box-shadow: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.06) !important; }
 .shadow-5 { box-shadow: 0 20px 25px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.06) !important; }
-.shadow-top { box-shadow: 0 -4px 6px rgba(0,0,0,0.08) !important; }
-.shadow-bottom { box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important; }
-.shadow-start { box-shadow: -4px 0 6px rgba(0,0,0,0.08) !important; }
-.shadow-end { box-shadow: 4px 0 6px rgba(0,0,0,0.08) !important; }
+.shadow-top { box-shadow: 0 -4px 6px rgba(0,0,0,0.10) !important; }
+.shadow-bottom { box-shadow: 0 4px 6px rgba(0,0,0,0.10) !important; }
+.shadow-start { box-shadow: -4px 0 6px rgba(0,0,0,0.10) !important; }
+.shadow-end { box-shadow: 4px 0 6px rgba(0,0,0,0.10) !important; }
 .shadow-inset-1 { box-shadow: inset 0 1px 2px rgba(0,0,0,0.10) !important; }
 .shadow-inset-2 { box-shadow: inset 0 2px 6px rgba(0,0,0,0.12) !important; }
 .shadow-drop-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) !important; }