Revert min-max contrast, as it is causing problems.

alexaka1 · May 4, 2024 · 9dcd8eb · 9dcd8eb
1 parent 497d12f
commit 9dcd8eb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/.changeset/fuzzy-flowers-relax.md b/.changeset/fuzzy-flowers-relax.md
@@ -0,0 +1,7 @@
+---
+"@alexaka1/tailwindcss-oklch": patch
+---
+
+Revert min-max contrast
+
+It is causing problems now. This now brings this package back in line with upstreams `0.0.1` release.
diff --git a/examples/dist/main.css b/examples/dist/main.css
@@ -517,8 +517,6 @@ video {
   --tw-contain-style:  ;
   --tw-infinite: 99999;
   --tw-lightness-threshold: 0.6;
-  --tw-min-contrast-lightness: 0;
-  --tw-max-contrast-lightness: 1;
 }
 
 ::backdrop {
@@ -575,8 +573,6 @@ video {
   --tw-contain-style:  ;
   --tw-infinite: 99999;
   --tw-lightness-threshold: 0.6;
-  --tw-min-contrast-lightness: 0;
-  --tw-max-contrast-lightness: 1;
 }
 
 .mx-auto {
@@ -855,7 +851,7 @@ video {
 }
 
 .bg-text-contrast {
-  background-color: oklch(clamp(var(--tw-min-contrast-lightness), calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-text-l) - var(--tw-text-l-offset))), var(--tw-max-contrast-lightness)) calc(clamp(0, calc(1 - (calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-text-l) - var(--tw-text-l-offset))))), 1) * var(--tw-text-c)) var(--tw-text-h) / 1);
+  background-color: oklch(clamp(0, calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-text-l) - var(--tw-text-l-offset))), 1) 0 0 / 1);
 }
 
 .bg-text\/10 {
@@ -880,7 +876,7 @@ video {
 
 .text-bg-contrast {
   --tw-text-opacity: 1;
-  color: oklch(clamp(var(--tw-min-contrast-lightness), calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-bg-l) - var(--tw-bg-l-offset))), var(--tw-max-contrast-lightness)) calc(clamp(0, calc(1 - (calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-bg-l) - var(--tw-bg-l-offset))))), 1) * var(--tw-bg-c)) var(--tw-bg-h) / var(--tw-text-opacity));
+  color: oklch(clamp(0, calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-bg-l) - var(--tw-bg-l-offset))), 1) 0 0 / var(--tw-text-opacity));
 }
 
 .text-blue-600 {

diff --git a/src/tailwindcss-oklch/src/index.ts b/src/tailwindcss-oklch/src/index.ts
@@ -9,8 +9,8 @@ import utilities from './utilities';
 type TailwindOklchOptions = {
   contrastThreshold?: number;
   precision?: number;
-  minContrastLightness?: number;
-  maxContrastLightness?: number;
+  // minContrastLightness?: number;
+  // maxContrastLightness?: number;
 };
 
 const propertyColors = Object.fromEntries(
@@ -23,7 +23,8 @@ const propertyColors = Object.fromEntries(
         ],
         [
           `${key}-contrast`,
-          `oklch(clamp(var(--tw-min-contrast-lightness), calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-${key}-l) - var(--tw-${key}-l-offset))), var(--tw-max-contrast-lightness)) calc(clamp(0, calc(1 - (calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-${key}-l) - var(--tw-${key}-l-offset))))), 1) * var(--tw-${key}-c)) var(--tw-${key}-h) / <alpha-value>)`,
+          `oklch(clamp(0, calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-${key}-l) - var(--tw-${key}-l-offset))), 1) 0 0 / <alpha-value>)`
+          // `oklch(clamp(var(--tw-min-contrast-lightness), calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-${key}-l) - var(--tw-${key}-l-offset))), var(--tw-max-contrast-lightness)) calc(clamp(0, calc(1 - (calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-${key}-l) - var(--tw-${key}-l-offset))))), 1) * var(--tw-${key}-c)) var(--tw-${key}-h) / <alpha-value>)`,
         ],
       ];
     })
@@ -34,16 +35,16 @@ export default plugin.withOptions<TailwindOklchOptions>(
   ({
     contrastThreshold = 0.6,
     precision = 6,
-    minContrastLightness = 0,
-    maxContrastLightness = 1,
+    // minContrastLightness = 0,
+    // maxContrastLightness = 1,
   } = {}) => {
     // @ts-expect-error https://github.com/tailwindlabs/tailwindcss/issues/10514
     return ({ matchUtilities, theme, corePlugins, addDefaults }) => {
       addDefaults('infinity', {
         '--tw-infinite': '99999',
         '--tw-lightness-threshold': contrastThreshold.toString(),
-        '--tw-min-contrast-lightness': minContrastLightness.toString(),
-        '--tw-max-contrast-lightness': maxContrastLightness.toString(),
+        // '--tw-min-contrast-lightness': minContrastLightness.toString(),
+        // '--tw-max-contrast-lightness': maxContrastLightness.toString(),
       });
       utilities.forEach(({ key, themeKey, property, selector }) => {
         const base = key.split('-').shift();