From f83b5c948e911684ce3b729caa1d9356522066e9 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 13 Nov 2023 14:00:35 -0800
Subject: [PATCH] fix: converts HSL colors OKLCH with DaisyUI v4 (#2497)

---
 assets/components/LogViewer/LogViewer.vue     |  4 +-
 .../__snapshots__/LogEventSource.spec.ts.snap |  2 +-
 assets/components/ScrollableView.vue          |  4 +-
 assets/components/Search.vue                  |  2 +-
 assets/components/common/Toggle.vue           |  2 +-
 assets/main.css                               | 47 ++++++++---------
 assets/main.ts                                |  1 -
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 52 +++++++++----------
 tailwind.config.ts                            | 25 ++++-----
 10 files changed, 67 insertions(+), 74 deletions(-)

diff --git a/assets/components/LogViewer/LogViewer.vue b/assets/components/LogViewer/LogViewer.vue
index 002d2f5d..ee9f6e81 100644
--- a/assets/components/LogViewer/LogViewer.vue
+++ b/assets/components/LogViewer/LogViewer.vue
@@ -7,7 +7,7 @@
       :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
     >
       <a
-        class="jump-context tooltip-primary tooltip tooltip-right"
+        class="jump-context tooltip tooltip-right tooltip-primary"
         v-if="isSearching()"
         data-tip="Jump to Context"
         @click="handleJumpLineSelected($event, item)"
@@ -78,7 +78,7 @@ watch(
     }
 
     .jump-context {
-      @apply mr-2 flex items-center font-sans text-secondary hover:text-secondary-focus;
+      @apply mr-2 flex items-center font-sans text-secondary;
     }
   }
 
diff --git a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
index 87b94af1..dbd6bc09 100644
--- a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
@@ -66,7 +66,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
 "<ul data-v-2e92daca=\\"\\" class=\\"events group py-4 medium\\">
-  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\"><a data-v-2e92daca=\\"\\" class=\\"jump-context tooltip-primary tooltip tooltip-right\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
+  <li data-v-2e92daca=\\"\\" data-key=\\"2\\" class=\\"\\"><a data-v-2e92daca=\\"\\" class=\\"jump-context tooltip tooltip-right tooltip-primary\\" data-tip=\\"Jump to Context\\" href=\\"#2\\"><svg data-v-2e92daca=\\"\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\">
         <path fill=\\"currentColor\\" d=\\"M20 19.59V8l-6-6H4v20l15.57-.02l-4.81-4.81c-.8.52-1.74.83-2.76.83c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5c0 1.02-.31 1.96-.83 2.75L20 19.59zM9 13c0 1.66 1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3s-3 1.34-3 3z\\"></path>
       </svg></a>
     <div data-v-2e92daca=\\"\\" class=\\"flex items-start gap-x-2\\" visible-keys=\\"\\">
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index aaa66379..cd600e4e 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -20,8 +20,8 @@
     <div class="mr-16 text-right">
       <transition name="fade">
         <button
-          class="fixed bottom-8 rounded bg-primary p-3 text-primary-content shadow transition-colors hover:bg-primary-focus"
-          :class="hasMore ? 'animate-bounce-fast bg-secondary text-secondary-content hover:bg-secondary-focus' : ''"
+          class="btn btn-primary fixed bottom-8 rounded p-3 text-primary-content shadow transition-colors"
+          :class="hasMore ? 'btn-secondary animate-bounce-fast text-secondary-content' : ''"
           @click="scrollToBottom()"
           v-show="paused"
         >
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index 467c02ba..ff24dce1 100644
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -7,7 +7,7 @@
     <div class="input input-primary flex h-auto items-center">
       <mdi:magnify />
       <input
-        class="input flex-1"
+        class="input input-ghost flex-1"
         type="text"
         placeholder="Find / RegEx"
         ref="input"
diff --git a/assets/components/common/Toggle.vue b/assets/components/common/Toggle.vue
index ecff406b..3b6f4229 100644
--- a/assets/components/common/Toggle.vue
+++ b/assets/components/common/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
   <label class="label inline-flex cursor-pointer gap-4 font-normal">
-    <input type="checkbox" class="toggle toggle-primary hover:bg-primary-focus" v-model="modelValue" />
+    <input type="checkbox" class="toggle toggle-primary" v-model="modelValue" />
     <slot />
   </label>
 </template>
diff --git a/assets/main.css b/assets/main.css
index 2a0c06b6..772f1a25 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -1,25 +1,21 @@
 @import "splitpanes/dist/splitpanes.css";
 
 @define-mixin light {
-  --base-lighter-color: 0 0% 100%;
-  --base-color: 0 0% 97%;
-  --base-darker-color: 0 0% 90%;
-  --base-content-color: 0 0% 21%;
-  --primary-color: 171 100% 41%;
-  --primary-focus-color: 171 100% 31%;
-  --secondary-color: 34 95% 53%;
-  --secondary-focus-color: 34 95% 43%;
+  --base-lighter-color: 100% 0 0;
+  --base-color: 97% 0 0;
+  --base-darker-color: 90% 0 0;
+  --base-content-color: 33% 0 0;
+  --primary-color: 76.96% 0.143 176.65;
+  --secondary-color: 76.04% 0.168 64.07;
 }
 
 @define-mixin dark {
-  --base-lighter-color: 0 0% 14%;
-  --base-color: 0 0% 7%;
-  --base-darker-color: 0 0% 4%;
-  --base-content-color: 0 0% 86%;
-  --primary-color: 171 100% 41%;
-  --primary-focus-color: 171 100% 31%;
-  --secondary-color: 44 100% 77%;
-  --secondary-focus-color: 44 100% 67%;
+  --base-lighter-color: 25% 0 0;
+  --base-color: 18% 0 0;
+  --base-darker-color: 11% 0 0;
+  --base-content-color: 89.23% 0 0;
+  --primary-color: 76.96% 0.143 176.65;
+  --secondary-color: 91.36% 0.11098 90.1243;
 }
 
 @tailwind base;
@@ -29,19 +25,17 @@
 @layer base {
   :root {
     --p: var(--primary-color);
-    --pf: var(--primary-focus-color);
-    --pc: 0 0% 100%;
+    --pc: 89.23% 0;
     --s: var(--secondary-color);
-    --sf: var(--secondary-focus-color);
-    --sc: 0 0% 4%;
+    --sc: 14.57% 0 0;
     --b1: var(--base-lighter-color);
     --b2: var(--base-color);
     --b3: var(--base-darker-color);
     --bc: var(--base-content-color);
-    --in: 207 90% 54%;
-    --inc: 207 90% 94%;
-    --er: 4 90% 58%;
-    --erc: 4 90% 98%;
+    --in: 65% 0.171 249.5;
+    --inc: 99% 0.171 249.5;
+    --er: 64% 0.218 28.85;
+    --erc: 99% 0.218 28.85;
   }
   html[data-theme="dark"] {
     @mixin dark;
@@ -94,7 +88,10 @@
 
 @layer components {
   .input {
-    @apply focus:outline-none;
+    @apply !outline-none;
+    &.input-ghost {
+      @apply focus:border-transparent;
+    }
   }
 
   .btn {
diff --git a/assets/main.ts b/assets/main.ts
index 3c0611f0..bd1715af 100644
--- a/assets/main.ts
+++ b/assets/main.ts
@@ -1,4 +1,3 @@
-// import "./styles.scss";
 import "./main.css";
 import { createApp, App as VueApp } from "vue";
 import App from "./App.vue";
diff --git a/package.json b/package.json
index 5adcf094..14b2b532 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   "d3-selection": "^3.0.0",
   "d3-shape": "^3.2.0",
   "d3-transition": "^3.0.1",
-  "daisyui": "^3.9.4",
+  "daisyui": "^4.0.3",
   "date-fns": "^2.30.0",
   "entities": "^4.5.0",
   "fuse.js": "^7.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3da91750..cb082cf4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,8 +69,8 @@ dependencies:
     specifier: ^3.0.1
     version: 3.0.1(d3-selection@3.0.0)
   daisyui:
-    specifier: ^3.9.4
-    version: 3.9.4(ts-node@10.9.1)
+    specifier: ^4.0.3
+    version: 4.0.3(postcss@8.4.31)
   date-fns:
     specifier: ^2.30.0
     version: 2.30.0
@@ -213,7 +213,7 @@ devDependencies:
     version: 5.2.2
   vitepress:
     specifier: 1.0.0-rc.25
-    version: 1.0.0-rc.25(@algolia/client-search@4.20.0)(@types/node@20.9.0)(fuse.js@7.0.0)(postcss@8.4.31)(search-insights@2.9.0)(typescript@5.2.2)
+    version: 1.0.0-rc.25(@algolia/client-search@4.20.0)(@types/node@20.9.0)(fuse.js@7.0.0)(postcss@8.4.31)(search-insights@2.10.0)(typescript@5.2.2)
   vitest:
     specifier: ^0.34.6
     version: 0.34.6(jsdom@22.1.0)
@@ -223,10 +223,10 @@ devDependencies:
 
 packages:
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.9.0):
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.9.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0)
       '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -234,13 +234,13 @@ packages:
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.9.0):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
       '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
-      search-insights: 2.9.0
+      search-insights: 2.10.0
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
@@ -416,10 +416,10 @@ packages:
     resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.9.0):
+  /@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0):
     resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.9.0)
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0)
       preact: 10.18.1
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -429,7 +429,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.9.0):
+  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0):
     resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -446,11 +446,11 @@ packages:
       search-insights:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.9.0)
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0)
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
       '@docsearch/css': 3.5.2
       algoliasearch: 4.20.0
-      search-insights: 2.9.0
+      search-insights: 2.10.0
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -2079,10 +2079,6 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
-  /colord@2.9.3:
-    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
-    dev: false
-
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
@@ -2186,6 +2182,11 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /culori@3.2.0:
+    resolution: {integrity: sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: false
+
   /d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
@@ -2281,17 +2282,16 @@ packages:
       d3-timer: 3.0.1
     dev: false
 
-  /daisyui@3.9.4(ts-node@10.9.1):
-    resolution: {integrity: sha512-fvi2RGH4YV617/6DntOVGcOugOPym9jTGWW2XySb5ZpvdWO4L7bEG77VHirrnbRUEWvIEVXkBpxUz2KFj0rVnA==}
+  /daisyui@4.0.3(postcss@8.4.31):
+    resolution: {integrity: sha512-mG6PsdIA6MEHzdJwBlJxc1rqsIAAlcfhj2O8g0ol1uWg5y6C5zTcqfG8vKBqK4y2YfCxGIVgMsMWRTSm32N1Ow==}
     engines: {node: '>=16.9.0'}
     dependencies:
-      colord: 2.9.3
       css-selector-tokenizer: 0.8.0
-      postcss: 8.4.31
+      culori: 3.2.0
+      picocolors: 1.0.0
       postcss-js: 4.0.1(postcss@8.4.31)
-      tailwindcss: 3.3.5(ts-node@10.9.1)
     transitivePeerDependencies:
-      - ts-node
+      - postcss
     dev: false
 
   /data-urls@4.0.0:
@@ -4049,8 +4049,8 @@ packages:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
     dev: false
 
-  /search-insights@2.9.0:
-    resolution: {integrity: sha512-bkWW9nIHOFkLwjQ1xqVaMbjjO5vhP26ERsH9Y3pKr8imthofEFIxlnOabkmGcw6ksRj9jWidcI65vvjJH/nTGg==}
+  /search-insights@2.10.0:
+    resolution: {integrity: sha512-pQGrOE56QuTRmq4NzliRZe9rv914hBMBjOviuDliDHoIhmBGoyZRlFsPd4RprGGNC4PKdD2Jz54YN4Cmkb44mA==}
     dev: true
 
   /semver@7.5.4:
@@ -4788,7 +4788,7 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
-  /vitepress@1.0.0-rc.25(@algolia/client-search@4.20.0)(@types/node@20.9.0)(fuse.js@7.0.0)(postcss@8.4.31)(search-insights@2.9.0)(typescript@5.2.2):
+  /vitepress@1.0.0-rc.25(@algolia/client-search@4.20.0)(@types/node@20.9.0)(fuse.js@7.0.0)(postcss@8.4.31)(search-insights@2.10.0)(typescript@5.2.2):
     resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
     hasBin: true
     peerDependencies:
@@ -4801,7 +4801,7 @@ packages:
         optional: true
     dependencies:
       '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.9.0)
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0)
       '@types/markdown-it': 13.0.5
       '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.8)
       '@vue/devtools-api': 6.5.1
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0c548a19..5aae46c7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,20 +10,17 @@ export default {
         "bounce-fast": "bounce 0.5s 2 both",
       },
       colors: {
-        green: "hsl(177 100% 35%)",
-        red: "hsl(4 90% 58%)",
-        purple: "hsl(291 64% 42%)",
-        blue: "hsl(207 90% 54%)",
-        orange: "hsl(25 95% 53%)",
-        base: "hsl(var(--base-color) / <alpha-value>)",
-        "base-darker": "hsl(var(--base-darker-color) / <alpha-value>)",
-        "base-lighter": "hsl(var(--base-lighter-color) / <alpha-value>)",
-        "base-content": "hsl(var(--base-content-color) / <alpha-value>)",
-
-        primary: "hsl(var(--primary-color) / <alpha-value>)",
-        "primary-focus": "hsl(var(--primary-focus-color) / <alpha-value>)",
-        secondary: "hsl(var(--secondary-color) / <alpha-value>)",
-        "secondary-focus": "hsl(var(--secondary-focus-color) / <alpha-value>)",
+        green: "oklch(69% 0.119722 188.479048)",
+        red: "oklch(64% 0.218 28.85)",
+        purple: "oklch(51.49% 0.215 321.03)",
+        blue: "oklch(65% 0.171 249.5)",
+        orange: "oklch(70% 0.186 48.13)",
+        base: "oklch(var(--base-color) / <alpha-value>)",
+        "base-darker": "oklch(var(--base-darker-color) / <alpha-value>)",
+        "base-lighter": "oklch(var(--base-lighter-color) / <alpha-value>)",
+        "base-content": "oklch(var(--base-content-color) / <alpha-value>)",
+        primary: "oklch(var(--primary-color) / <alpha-value>)",
+        secondary: "oklch(var(--secondary-color) / <alpha-value>)",
       },
     },
   },