Skip to content

Commit 9dcd8eb

Browse files
committed
Revert min-max contrast, as it is causing problems.
1 parent 497d12f commit 9dcd8eb

File tree

3 files changed

+17
-13
lines changed

3 files changed

+17
-13
lines changed

.changeset/fuzzy-flowers-relax.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@alexaka1/tailwindcss-oklch": patch
3+
---
4+
5+
Revert min-max contrast
6+
7+
It is causing problems now. This now brings this package back in line with upstreams `0.0.1` release.

examples/dist/main.css

+2-6
Original file line numberDiff line numberDiff line change
@@ -517,8 +517,6 @@ video {
517517
--tw-contain-style: ;
518518
--tw-infinite: 99999;
519519
--tw-lightness-threshold: 0.6;
520-
--tw-min-contrast-lightness: 0;
521-
--tw-max-contrast-lightness: 1;
522520
}
523521

524522
::backdrop {
@@ -575,8 +573,6 @@ video {
575573
--tw-contain-style: ;
576574
--tw-infinite: 99999;
577575
--tw-lightness-threshold: 0.6;
578-
--tw-min-contrast-lightness: 0;
579-
--tw-max-contrast-lightness: 1;
580576
}
581577

582578
.mx-auto {
@@ -855,7 +851,7 @@ video {
855851
}
856852

857853
.bg-text-contrast {
858-
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);
854+
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);
859855
}
860856

861857
.bg-text\/10 {
@@ -880,7 +876,7 @@ video {
880876

881877
.text-bg-contrast {
882878
--tw-text-opacity: 1;
883-
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));
879+
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));
884880
}
885881

886882
.text-blue-600 {

src/tailwindcss-oklch/src/index.ts

+8-7
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import utilities from './utilities';
99
type TailwindOklchOptions = {
1010
contrastThreshold?: number;
1111
precision?: number;
12-
minContrastLightness?: number;
13-
maxContrastLightness?: number;
12+
// minContrastLightness?: number;
13+
// maxContrastLightness?: number;
1414
};
1515

1616
const propertyColors = Object.fromEntries(
@@ -23,7 +23,8 @@ const propertyColors = Object.fromEntries(
2323
],
2424
[
2525
`${key}-contrast`,
26-
`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>)`,
26+
`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>)`
27+
// `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>)`,
2728
],
2829
];
2930
})
@@ -34,16 +35,16 @@ export default plugin.withOptions<TailwindOklchOptions>(
3435
({
3536
contrastThreshold = 0.6,
3637
precision = 6,
37-
minContrastLightness = 0,
38-
maxContrastLightness = 1,
38+
// minContrastLightness = 0,
39+
// maxContrastLightness = 1,
3940
} = {}) => {
4041
// @ts-expect-error https://github.com/tailwindlabs/tailwindcss/issues/10514
4142
return ({ matchUtilities, theme, corePlugins, addDefaults }) => {
4243
addDefaults('infinity', {
4344
'--tw-infinite': '99999',
4445
'--tw-lightness-threshold': contrastThreshold.toString(),
45-
'--tw-min-contrast-lightness': minContrastLightness.toString(),
46-
'--tw-max-contrast-lightness': maxContrastLightness.toString(),
46+
// '--tw-min-contrast-lightness': minContrastLightness.toString(),
47+
// '--tw-max-contrast-lightness': maxContrastLightness.toString(),
4748
});
4849
utilities.forEach(({ key, themeKey, property, selector }) => {
4950
const base = key.split('-').shift();

0 commit comments

Comments
 (0)