tailwind-oklch 0.5.0 → 0.6.0

package/README.md

@@ -184,6 +184,36 @@ The direction automatically adapts to light/dark mode — "up" always means more
 </p>
 ```
 
+### Arbitrary Values
+
+All three axes support arbitrary values using Tailwind's bracket syntax. This gives you fine-grained control beyond the named stops.
+
+**Hue** — any degree value (0–360):
+
+```html
+<div class="hue-[180] bg-3-mid">Teal background</div>
+<div class="bg-h-[280] text-h-[40]">Purple bg, orange text</div>
+```
+
+**Chroma** — integer 0–100, mapped to OKLCH 0.00–1.00 (practical range is roughly 0–25):
+
+```html
+<div class="chroma-[8] bg-lc-3">All properties at chroma 0.08</div>
+<div class="bg-c-[15]">Background chroma 0.15</div>
+```
+
+**Luminance** — integer 0–100, with automatic light/dark mode flip:
+
+```html
+<div class="bg-lc-[60]">
+  Light mode: L=0.60 · Dark mode: L=0.40
+</div>
+```
+
+Arbitrary luminance values automatically invert in dark mode (reflected around 0.50), so `bg-lc-[70]` renders as 0.70 in light mode and 0.30 in dark mode — always maintaining the same relationship to the page.
+
+Available for all property prefixes (`bg-`, `text-`, `border-`, etc.), global setters (`hue-`, `chroma-`), and gradients (`from-`, `to-`).
+
 ### Gradients
 
 ```html
@@ -246,19 +276,24 @@ document.documentElement.style.setProperty('--hue-primary', '180');
 
 ### Luminance Contrast Scale
 
-| Stop | Dark Mode | Light Mode |
+| Stop | Light Mode | Dark Mode |
 |---|---|---|
-| `0` / `base` | 0.12 | 0.95 |
-| `1` | 0.20 | 0.87 |
-| `2` | 0.28 | 0.79 |
-| `3` | 0.36 | 0.71 |
-| `4` | 0.44 | 0.63 |
-| `5` | 0.52 | 0.55 |
-| `6` | 0.60 | 0.47 |
-| `7` | 0.68 | 0.39 |
-| `8` | 0.76 | 0.31 |
-| `9` | 0.84 | 0.23 |
-| `10` / `fore` | 0.92 | 0.15 |
+| `0` / `base` | 0.95 | 0.12 |
+| `1` | 0.91 | 0.20 |
+| `2` | 0.85 | 0.28 |
+| `3` | 0.78 | 0.36 |
+| `4` | 0.71 | 0.44 |
+| `5` | 0.63 | 0.52 |
+| `6` | 0.54 | 0.60 |
+| `7` | 0.44 | 0.68 |
+| `8` | 0.34 | 0.76 |
+| `9` | 0.23 | 0.84 |
+| `10` / `fore` | 0.15 | 0.92 |
+
+Light mode uses a power curve (p≈1.3) so steps near the high-luminance
+base are smaller — small luminance differences are very perceptible
+against a near-white surface, so `lc-1` needs a gentler delta than the
+linear 0.08 would give. Dark mode stays linear.
 
 ### Named Chroma Stops
 
@@ -270,7 +305,7 @@ document.documentElement.style.setProperty('--hue-primary', '180');
 | `mhi` | 0.18 | Vivid |
 | `hi` | 0.25 | Maximum saturation |
 
-A numeric chroma scale (`c-10` through `c-95`) is also available for finer control in the decomposed utilities.
+For finer control, use arbitrary chroma values (see [Arbitrary Values](#arbitrary-values) below).
 
 ### LC Adjustment Steps
 
@@ -317,7 +352,7 @@ Override in a `@theme` block:
 
 ### Light / Dark Mode
 
-Dark mode is the default. Light mode activates when the root element does **not** have the `.dark` class (`:root:not(.dark)`). The luminance contrast scale flips automatically — `lc-0` is always near the page, `lc-10` is always high contrast — no additional classes needed.
+Light mode is the default. Dark mode activates when the root element has the `.dark` class. The luminance contrast scale flips automatically — `lc-0` is always near the page, `lc-10` is always high contrast — no additional classes needed.
 
 ## License
 

package/index.css

@@ -31,37 +31,41 @@
 
   /* ── Luminance Contrast Range ─────────────────────────────────────
      Defines the OKLCH lightness values at 0 (base) and 10 (fore).
-     Dark mode: base is near black, fore is near white.
-     Light mode flips them (see :root:not(.dark) below).
+     Light mode (default): base is near white, fore is near black.
+     Dark mode flips them (see .dark below).
      Override --lc-range-start and --lc-range-end to shift the range. */
-  --lc-range-start: 0.12;
-  --lc-range-end: 0.92;
+  --lc-range-start: 0.95;
+  --lc-range-end: 0.15;
 
   /* ── 0–10 Luminance Contrast Scale ────────────────────────────────
-     Computed: step N = start + (end - start) × (N / 10)
-     Dark mode (default): 0→0.12, 5→0.52, 10→0.92
-     Light mode (override): 0→0.95, 5→0.55, 10→0.15 */
-  --l-0: 0.12;
-  --l-1: 0.20;
-  --l-2: 0.28;
-  --l-3: 0.36;
-  --l-4: 0.44;
-  --l-5: 0.52;
-  --l-6: 0.60;
-  --l-7: 0.68;
-  --l-8: 0.76;
-  --l-9: 0.84;
-  --l-10: 0.92;
+     Light mode uses a power curve (p≈1.3): smaller steps near the
+     high-luminance base, growing toward the fore. Perception is
+     more sensitive to differences near white, so subtle surfaces
+     need finer L deltas there.
+     Computed: step N = start + (end − start) × (N / 10)^1.3
+     Light mode (default): 0→0.95, 1→0.91, 5→0.63, 10→0.15
+     Dark mode stays linear (see .dark): 0→0.12, 5→0.52, 10→0.92 */
+  --l-0: 0.95;
+  --l-1: 0.91;
+  --l-2: 0.85;
+  --l-3: 0.78;
+  --l-4: 0.71;
+  --l-5: 0.63;
+  --l-6: 0.54;
+  --l-7: 0.44;
+  --l-8: 0.34;
+  --l-9: 0.23;
+  --l-10: 0.15;
 
   /* Semantic aliases */
-  --l-base: 0.12;
-  --l-fore: 0.92;
+  --l-base: 0.95;
+  --l-fore: 0.15;
 
   /* Absolute extremes — escape the configured range entirely.
      none = beyond base (pure white in light, pure black in dark).
      full = beyond fore (pure black in light, pure white in dark). */
-  --l-none: 0;
-  --l-full: 1;
+  --l-none: 1;
+  --l-full: 0;
 
   /* ── Named Chroma Stops ──────────────────────────────────────────────
      OKLCH chroma: practical range 0–0.25 */
@@ -71,18 +75,6 @@
   --c-mhi: 0.18;
   --c-hi: 0.25;
 
-  /* ── Numeric Chroma Scale ────────────────────────────────────────── */
-  --c-10: 0.03;
-  --c-20: 0.06;
-  --c-30: 0.09;
-  --c-40: 0.12;
-  --c-50: 0.15;
-  --c-60: 0.18;
-  --c-70: 0.21;
-  --c-80: 0.24;
-  --c-90: 0.27;
-  --c-95: 0.30;
-
   /* ── LC Adjustment Steps ───────────────────────────────────────────
      Each step ≈ one position on the 0–10 scale (~0.08 OKLCH L). */
   --lc-adj-1: 0.08;
@@ -92,33 +84,33 @@
   --lc-adj-5: 0.40;
 }
 
-/* ── Light-mode luminance contrast range ──────────────────────────────
-   In light mode the scale flips: 0/base is near white (blends with
-   the page), 10/fore is near black (high contrast, like text). */
+/* ── Dark-mode luminance contrast range ──────────────────────────────
+   In dark mode the scale flips: 0/base is near black (blends with
+   the page), 10/fore is near white (high contrast, like text). */
 
-:root:not(.dark) {
-  --lc-dir: -1;
-  --lc-flip: 0;
-  --lc-range-start: 0.95;
-  --lc-range-end: 0.15;
+.dark {
+  --lc-dir: 1;
+  --lc-flip: 1;
+  --lc-range-start: 0.12;
+  --lc-range-end: 0.92;
 
-  --l-0: 0.95;
-  --l-1: 0.87;
-  --l-2: 0.79;
-  --l-3: 0.71;
-  --l-4: 0.63;
-  --l-5: 0.55;
-  --l-6: 0.47;
-  --l-7: 0.39;
-  --l-8: 0.31;
-  --l-9: 0.23;
-  --l-10: 0.15;
+  --l-0: 0.12;
+  --l-1: 0.20;
+  --l-2: 0.28;
+  --l-3: 0.36;
+  --l-4: 0.44;
+  --l-5: 0.52;
+  --l-6: 0.60;
+  --l-7: 0.68;
+  --l-8: 0.76;
+  --l-9: 0.84;
+  --l-10: 0.92;
 
-  --l-base: 0.95;
-  --l-fore: 0.15;
+  --l-base: 0.12;
+  --l-fore: 0.92;
 
-  --l-none: 1;
-  --l-full: 0;
+  --l-none: 0;
+  --l-full: 1;
 }
 
 /* ── Cascade Defaults ────────────────────────────────────────────────────
@@ -127,8 +119,8 @@
    naturally flows to children that only set bg-lc-* or bg-c-*. */
 
 :root {
-  --lc-dir: 1;
-  --lc-flip: 1;
+  --lc-dir: -1;
+  --lc-flip: 0;
 
   --bg-l: var(--l-5);
   --bg-c: var(--c-lo);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-oklch",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "OKLCH color composition system for Tailwind CSS v4",
   "style": "index.css",
   "main": "index.css",