From 9dcd8eb9043eb8782e1ec8c7a16c17f064c663c5 Mon Sep 17 00:00:00 2001 From: Martossy Alex Date: Sat, 4 May 2024 21:13:27 +0200 Subject: [PATCH] Revert min-max contrast, as it is causing problems. --- .changeset/fuzzy-flowers-relax.md | 7 +++++++ examples/dist/main.css | 8 ++------ src/tailwindcss-oklch/src/index.ts | 15 ++++++++------- 3 files changed, 17 insertions(+), 13 deletions(-) create mode 100644 .changeset/fuzzy-flowers-relax.md diff --git a/.changeset/fuzzy-flowers-relax.md b/.changeset/fuzzy-flowers-relax.md new file mode 100644 index 0000000..f22d0fd --- /dev/null +++ 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 index b1b60f0..9a2522c 100644 --- 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 index 0c317ca..f00270e 100644 --- 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) / )`, + `oklch(clamp(0, calc(var(--tw-infinite) * (var(--tw-lightness-threshold) - var(--tw-${key}-l) - var(--tw-${key}-l-offset))), 1) 0 0 / )` + // `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) / )`, ], ]; }) @@ -34,16 +35,16 @@ export default plugin.withOptions( ({ 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();