tailwind-oklch 0.4.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,32 +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-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 ────────────────────────────────────────────────────
@@ -126,7 +119,8 @@
    naturally flows to children that only set bg-lc-* or bg-c-*. */
 
 :root {
-  --lc-dir: 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.4.0",
+  "version": "0.6.0",
   "description": "OKLCH color composition system for Tailwind CSS v4",
   "style": "index.css",
   "main": "index.css",

package/plugin.js

@@ -17,7 +17,7 @@
  * Load via: @plugin "tailwind-oklch/plugin";
  */
 
-module.exports = function ({ addUtilities }) {
+module.exports = function ({ addUtilities, matchUtilities }) {
   const luminances = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'base', 'fore', 'none', 'full'];
   const chromas = ['lo', 'mlo', 'mid', 'mhi', 'hi'];
   const hues = ['primary', 'accent', 'success', 'warning', 'danger', 'info', 'neutral'];
@@ -97,4 +97,174 @@ module.exports = function ({ addUtilities }) {
   }
 
   addUtilities(utilities);
+
+  // ── Arbitrary hue values ────────────────────────────────────────────────
+  // hue-[180] → sets all hue properties to 180 (degrees).
+  // bg-h-[280] → sets only background hue to 280.
+
+  const hueVars = ['--bg-h', '--tx-h', '--bd-h', '--bdb-h', '--ac-h', '--gf-h', '--gt-h', '--sh-h'];
+
+  matchUtilities(
+    {
+      hue: (value) => Object.fromEntries(hueVars.map((v) => [v, value])),
+    },
+    { type: ['integer'] },
+  );
+
+  for (const prop of properties) {
+    matchUtilities(
+      {
+        [`${prop.prefix}-h`]: (value) => ({
+          [prop.vars[2]]: value,
+          [prop.css]: `oklch(var(${prop.vars[0]}) var(${prop.vars[1]}) var(${prop.vars[2]}))`,
+        }),
+      },
+      { type: ['integer'] },
+    );
+  }
+
+  // Gradient from/to arbitrary hue
+  matchUtilities(
+    {
+      'from-h': (value) => ({
+        '--gf-h': value,
+        '--tw-gradient-from': 'oklch(var(--gf-l) var(--gf-c) var(--gf-h))',
+        '--tw-gradient-stops': stopsExpr,
+      }),
+      'to-h': (value) => ({
+        '--gt-h': value,
+        '--tw-gradient-to': 'oklch(var(--gt-l) var(--gt-c) var(--gt-h))',
+        '--tw-gradient-stops': stopsExpr,
+      }),
+    },
+    { type: ['integer'] },
+  );
+
+  // Shadow arbitrary hue
+  matchUtilities(
+    {
+      'shadow-h': (value) => ({
+        '--sh-h': value,
+        '--tw-shadow-color': 'oklch(var(--sh-l) var(--sh-c) var(--sh-h))',
+      }),
+    },
+    { type: ['integer'] },
+  );
+
+  // ── Arbitrary chroma values ───────────────────────────────────────────
+  // chroma-[15] → sets all chroma properties to 0.15.
+  // bg-c-[20] → sets only background chroma to 0.20.
+
+  const chromaVars = ['--bg-c', '--tx-c', '--bd-c', '--bdb-c', '--ac-c', '--gf-c', '--gt-c', '--sh-c'];
+
+  const chromaValue = (value) => {
+    const v = Number(value) / 100;
+    return `${Math.round(v * 1e6) / 1e6}`;
+  };
+
+  matchUtilities(
+    {
+      chroma: (value) => {
+        const c = chromaValue(value);
+        return Object.fromEntries(chromaVars.map((v) => [v, c]));
+      },
+    },
+    { type: ['integer'] },
+  );
+
+  for (const prop of properties) {
+    matchUtilities(
+      {
+        [`${prop.prefix}-c`]: (value) => ({
+          [prop.vars[1]]: chromaValue(value),
+          [prop.css]: `oklch(var(${prop.vars[0]}) var(${prop.vars[1]}) var(${prop.vars[2]}))`,
+        }),
+      },
+      { type: ['integer'] },
+    );
+  }
+
+  // Gradient from/to arbitrary chroma
+  matchUtilities(
+    {
+      'from-c': (value) => ({
+        '--gf-c': chromaValue(value),
+        '--tw-gradient-from': 'oklch(var(--gf-l) var(--gf-c) var(--gf-h))',
+        '--tw-gradient-stops': stopsExpr,
+      }),
+      'to-c': (value) => ({
+        '--gt-c': chromaValue(value),
+        '--tw-gradient-to': 'oklch(var(--gt-l) var(--gt-c) var(--gt-h))',
+        '--tw-gradient-stops': stopsExpr,
+      }),
+    },
+    { type: ['integer'] },
+  );
+
+  // Shadow arbitrary chroma
+  matchUtilities(
+    {
+      'shadow-c': (value) => ({
+        '--sh-c': chromaValue(value),
+        '--tw-shadow-color': 'oklch(var(--sh-l) var(--sh-c) var(--sh-h))',
+      }),
+    },
+    { type: ['integer'] },
+  );
+
+  // ── Auto-flip luminance for arbitrary values ──────────────────────────
+  // bg-lc-[60] → light mode L=0.60, dark mode L=0.40 (simple 1−x flip).
+  // Uses --lc-flip (0 in light, 1 in dark) so the transform is pure CSS.
+  // Formula: L = v + flip × (1 − 2v)  where v = input / 100
+  //   flip=0 → v   (light: use value as-is)
+  //   flip=1 → 1−v (dark: reflect around 0.5)
+
+  const lcFlipValue = (value) => {
+    const v = Number(value) / 100;
+    const delta = 1 - 2 * v;
+    // Round to avoid floating-point noise in the CSS output
+    const vR = Math.round(v * 1e6) / 1e6;
+    const dR = Math.round(delta * 1e6) / 1e6;
+    return `calc(${vR} + var(--lc-flip) * ${dR})`;
+  };
+
+  for (const prop of properties) {
+    matchUtilities(
+      {
+        [`${prop.prefix}-lc`]: (value) => ({
+          [prop.vars[0]]: lcFlipValue(value),
+          [prop.css]: `oklch(var(${prop.vars[0]}) var(${prop.vars[1]}) var(${prop.vars[2]}))`,
+        }),
+      },
+      { type: ['integer'] },
+    );
+  }
+
+  // Gradient from/to auto-flip luminance
+  matchUtilities(
+    {
+      'from-lc': (value) => ({
+        '--gf-l': lcFlipValue(value),
+        '--tw-gradient-from': 'oklch(var(--gf-l) var(--gf-c) var(--gf-h))',
+        '--tw-gradient-stops': stopsExpr,
+      }),
+      'to-lc': (value) => ({
+        '--gt-l': lcFlipValue(value),
+        '--tw-gradient-to': 'oklch(var(--gt-l) var(--gt-c) var(--gt-h))',
+        '--tw-gradient-stops': stopsExpr,
+      }),
+    },
+    { type: ['integer'] },
+  );
+
+  // Shadow auto-flip luminance
+  matchUtilities(
+    {
+      'shadow-lc': (value) => ({
+        '--sh-l': lcFlipValue(value),
+        '--tw-shadow-color': 'oklch(var(--sh-l) var(--sh-c) var(--sh-h))',
+      }),
+    },
+    { type: ['integer'] },
+  );
 };