From f045b13be43c2c601bb2d716ed8a040d4f6d0f52 Mon Sep 17 00:00:00 2001
From: Sam Haakman <sam@josephmark.studio>
Date: Thu, 12 Oct 2023 10:24:17 +1000
Subject: [PATCH] added oklab colour utilities

---
 src/oklab.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/oklab.ts b/src/oklab.ts
index 709ff7a..c9d402e 100644
--- a/src/oklab.ts
+++ b/src/oklab.ts
@@ -16,6 +16,7 @@ const oklabPlugin = plugin(function addOkLab({ matchUtilities, addVariant }) {
     "@supports (background-image: linear-gradient(in oklab, #fff, #fff))"
   )
   addVariant("supports-oklab", "@supports (color: oklab(0 0 0))")
+
   matchUtilities(
     {
       "bg-gradient-oklab-to": (value) => ({
@@ -35,6 +36,33 @@ const oklabPlugin = plugin(function addOkLab({ matchUtilities, addVariant }) {
       },
     }
   )
+
+  matchUtilities({
+    "from-oklab": (value) => ({
+      "--tw-gradient-from": `oklab(${value}) var(--tw-gradient-from-position)`,
+    }),
+    "via-oklab": (value) => ({
+      "--tw-gradient-stops": `var(--tw-gradient-from), oklab(${value}) var(--tw-gradient-via-position), var(--tw-gradient-to)`,
+    }),
+    "to-oklab": (value) => ({
+      "--tw-gradient-to": `oklab(${value}) var(--tw-gradient-to-position)`,
+    }),
+  })
+
+  matchUtilities({
+    "text-oklab": (value) => {
+      return {
+        "--tw-text-opacity": "1",
+        color: `oklab(${value} / --tw-text-opacity)`,
+      }
+    },
+    "bg-oklab": (value) => {
+      return {
+        "--tw-bg-opacity": "1",
+        backgroundColor: `oklab(${value} / var(--tw-bg-opacity))`,
+      }
+    },
+  })
 })
 
 export default oklabPlugin