tailwind-oklch 0.4.0 → 0.5.0

package/index.css

@@ -98,6 +98,7 @@
 
 :root:not(.dark) {
   --lc-dir: -1;
+  --lc-flip: 0;
   --lc-range-start: 0.95;
   --lc-range-end: 0.15;
 
@@ -127,6 +128,7 @@
 
 :root {
   --lc-dir: 1;
+  --lc-flip: 1;
 
   --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.5.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'] },
+  );
 };