feat: support OKLCH colors on Safari iOS 15

feat: use OKLCH percentage parameter instead of number parameter for lightness value which is not supported in iOS 15
closes #2703

src/base/colors.css

@@ -4,7 +4,7 @@
   color: theme(colors.base-content);
 }
 
-@supports not (color: oklch(0 0 0)) {
+@supports not (color: oklch(0% 0 0)) {
   :root {
     color-scheme: light;
     --fallback-p: #491eff;

src/components/styled/button.css

@@ -16,7 +16,7 @@
     --tw-bg-opacity: 1;
     border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
     --tw-border-opacity: 1;
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       background-color: var(--btn-color, var(--fallback-b2));
       border-color: var(--btn-color, var(--fallback-b2));
     }
@@ -35,7 +35,7 @@
             black
           );
         }
-        @supports not (color: oklch(0 0 0)) {
+        @supports not (color: oklch(0% 0 0)) {
           background-color: var(--btn-color, var(--fallback-b2));
           border-color: var(--btn-color, var(--fallback-b2));
         }
@@ -62,75 +62,75 @@
   /* brand colors */
   &-primary {
     @apply text-primary-content outline-primary;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--p);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-p);
     }
   }
   &-secondary {
     @apply text-secondary-content outline-secondary;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--s);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-s);
     }
   }
   &-accent {
     @apply text-accent-content outline-accent;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--a);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-a);
     }
   }
   &-neutral {
     @apply text-neutral-content outline-neutral;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--n);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-n);
     }
   }
 
   /* btn with state colors */
   &-info {
     @apply text-info-content outline-info;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--in);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-in);
     }
   }
   &-success {
     @apply text-success-content outline-success;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--su);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-su);
     }
   }
   &-warning {
     @apply text-warning-content outline-warning;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--wa);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-wa);
     }
   }
   &-error {
     @apply text-error-content outline-error;
-    @supports (color: oklch(0 0 0)) {
+    @supports (color: oklch(0% 0 0)) {
       --btn-color: var(--er);
     }
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       --btn-color: var(--fallback-er);
     }
   }
@@ -156,7 +156,7 @@
     @media (hover: hover) {
       &:hover {
         @apply border-transparent;
-        @supports (color: oklch(0 0 0)) {
+        @supports (color: oklch(0% 0 0)) {
           @apply bg-base-content/20;
         }
       }

src/components/styled/menu.css

@@ -29,7 +29,7 @@
   @media (hover: hover) {
     &:not(.active, .btn):hover {
       @apply cursor-pointer outline-none;
-      @supports (color: oklch(0 0 0)) {
+      @supports (color: oklch(0% 0 0)) {
         @apply bg-base-content/10;
       }
     }

src/components/styled/typography.css

@@ -22,7 +22,7 @@
     border-radius: var(--rounded-badge);
     font-weight: initial;
     background-color: theme(colors.base-content/0.1);
-    @supports not (color: oklch(0 0 0)) {
+    @supports not (color: oklch(0% 0 0)) {
       background-color: theme(colors.base-300);
     }
   }

src/docs/src/components/ThemeChange.svelte

@@ -13,7 +13,7 @@
 
 <div
   title="Change Theme"
-  class={`dropdown dropdown-end hidden [@supports(color:oklch(0_0_0))]:block ${dropdownClasses}`}>
+  class={`dropdown dropdown-end hidden [@supports(color:oklch(0%_0_0))]:block ${dropdownClasses}`}>
   <div tabindex="0" role="button" class={`btn ${btnClasses}`}>
     <svg
       width="20"

src/docs/src/routes/(docs)/+page.svelte

@@ -157,12 +157,12 @@
             <br />
             <span class="inline-grid">
               <span
-                class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] before:content-[attr(data-text)] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
+                class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text blur-xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] before:content-[attr(data-text)] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
                 aria-hidden="true"
                 data-text={$t("component library")}>
               </span>
               <span
-                class="[&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]">
+                class="[&::selection]:text-base-content relative col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [&::selection]:bg-blue-700/20 [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]">
                 {@html $t("component library")}
               </span>
             </span>
@@ -769,7 +769,7 @@
       {$t("Take Tailwind CSS")}
       <br />
       <span
-        class="bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text will-change-auto [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] motion-reduce:!tracking-normal max-[1279px]:!tracking-normal [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
+        class="bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text will-change-auto [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] motion-reduce:!tracking-normal max-[1279px]:!tracking-normal [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
         style={`letter-spacing:${animateValue(section["nextlevel"], [-100, 20], [0, 1])}rem`}>
         {$t("to the next level")}
       </span>
@@ -1562,7 +1562,7 @@
         <span class="inline-grid">
           {#if section["possibilities"] && ((scrollY - section["possibilities"].offsetTop) / section["possibilities"].clientHeight) * 100 > -100 && ((scrollY - section["possibilities"].offsetTop) / section["possibilities"].clientHeight) * 100 < -20}{:else}
             <span
-              class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [:root[dir=rtl]_&]:leading-[1.35] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
+              class="pointer-events-none col-start-1 row-start-1 bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text opacity-70 blur-3xl [-webkit-text-fill-color:transparent] [transform:translate3d(0,0,0)] [:root[dir=rtl]_&]:leading-[1.35] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
               aria-hidden="true">
               {$t("endless possibilities")}
             </span>
@@ -1591,8 +1591,8 @@
                 section["possibilities"].clientHeight) *
                 100 <
                 -20
-                ? "motion-reduce:!bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] motion-reduce:!bg-clip-text motion-reduce:![-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:motion-reduce:!bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
-                : "bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [@supports(color:oklch(0_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
+                ? "motion-reduce:!bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] motion-reduce:!bg-clip-text motion-reduce:![-webkit-text-fill-color:transparent] [@supports(color:oklch(0%_0_0))]:motion-reduce:!bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
+                : "bg-[linear-gradient(90deg,theme(colors.error)_0%,theme(colors.secondary)_9%,theme(colors.secondary)_42%,theme(colors.primary)_47%,theme(colors.accent)_100%)] bg-clip-text [-webkit-text-fill-color:transparent] [@supports(color:oklch(0%_0_0))]:bg-[linear-gradient(90deg,oklch(var(--s))_4%,color-mix(in_oklch,oklch(var(--s)),oklch(var(--er)))_22%,oklch(var(--p))_45%,color-mix(in_oklch,oklch(var(--p)),oklch(var(--a)))_67%,oklch(var(--a))_100.2%)]"
             }`}>
             {$t("endless possibilities")}
           </span>

src/docs/src/routes/(docs)/theme-generator/+page.svelte

@@ -28,7 +28,7 @@
       return +number.toFixed(4)
     }
     const { l, c, h } = input
-    return `${cut(l)} ${cut(c)} ${cut(h)}`
+    return `${cut(l) * 100}% ${cut(c)} ${cut(h)}`
   }
 
   const generateForegroundColorFrom = function (input, percentage = 0.8) {

src/docs/src/routes/+layout.svelte

@@ -128,7 +128,7 @@
       }`}>
       <slot />
     </div>
-    <div class="toast toast-center z-10 [@supports(color:oklch(0_0_0))]:hidden">
+    <div class="toast toast-center z-10 [@supports(color:oklch(0%_0_0))]:hidden">
       <div class="alert alert-warning grid-cols-[auto] py-2 text-xs">
         <span>
           <a

src/theming/functions.js

@@ -38,7 +38,7 @@ module.exports = {
 
   colorObjToString: function (input) {
     const { l, c, h } = input
-    return `${cutNumber(l)} ${cutNumber(c)} ${cutNumber(h)}`
+    return `${parseFloat((cutNumber(l) * 100).toFixed(6))}% ${cutNumber(c)} ${cutNumber(h)}`
   },
 
   generateForegroundColorFrom: function (input, percentage = 0.8) {
@@ -86,7 +86,7 @@ module.exports = {
 
       // auto generate base colors
       if (!Object.hasOwn(input, "base-100")) {
-        resultObj["--b1"] = "100 0 0"
+        resultObj["--b1"] = "100% 0 0"
       }
       if (!Object.hasOwn(input, "base-200")) {
         resultObj["--b2"] = this.generateDarkenColorFrom(input["base-100"], 0.07)
@@ -102,16 +102,16 @@ module.exports = {
       // auto generate state colors
 
       if (!Object.hasOwn(input, "info")) {
-        resultObj["--in"] = "0.7206 0.191 231.6"
+        resultObj["--in"] = "72.06% 0.191 231.6"
       }
       if (!Object.hasOwn(input, "success")) {
         resultObj["--su"] = "64.8% 0.150 160"
       }
       if (!Object.hasOwn(input, "warning")) {
-        resultObj["--wa"] = "0.8471 0.199 83.87"
+        resultObj["--wa"] = "84.71% 0.199 83.87"
       }
       if (!Object.hasOwn(input, "error")) {
-        resultObj["--er"] = "0.7176 0.221 22.18"
+        resultObj["--er"] = "71.76% 0.221 22.18"
       }
 
       // auto generate content colors
@@ -134,28 +134,28 @@ module.exports = {
         if (Object.hasOwn(input, "info")) {
           resultObj["--inc"] = this.generateForegroundColorFrom(input["info"], 0.8)
         } else {
-          resultObj["--inc"] = "0 0 0"
+          resultObj["--inc"] = "0% 0 0"
         }
       }
       if (!Object.hasOwn(input, "success-content")) {
         if (Object.hasOwn(input, "success")) {
           resultObj["--suc"] = this.generateForegroundColorFrom(input["success"], 0.8)
         } else {
-          resultObj["--suc"] = "0 0 0"
+          resultObj["--suc"] = "0% 0 0"
         }
       }
       if (!Object.hasOwn(input, "warning-content")) {
         if (Object.hasOwn(input, "warning")) {
           resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"], 0.8)
         } else {
-          resultObj["--wac"] = "0 0 0"
+          resultObj["--wac"] = "0% 0 0"
         }
       }
       if (!Object.hasOwn(input, "error-content")) {
         if (Object.hasOwn(input, "error")) {
           resultObj["--erc"] = this.generateForegroundColorFrom(input["error"], 0.8)
         } else {
-          resultObj["--erc"] = "0 0 0"
+          resultObj["--erc"] = "0% 0 0"
         }
       }