mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-28 16:06:40 +01:00
Code Issues Projects Releases Wiki Activity

fix: converts HSL colors OKLCH with DaisyUI v4 (#2497)

Browse Source
This commit is contained in:
Amir Raminfar
2023-11-13 14:00:35 -08:00
committed by GitHub
parent 542c895812
commit f83b5c948e
10 changed files with 67 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/components/LogViewer/LogViewer.vue
View File

@@ -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;
}
}

2
assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
View File

@@ -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=\\"\\">

4
assets/components/ScrollableView.vue
View File

@@ -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"
>

2
assets/components/Search.vue
View File

@@ -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"

2
assets/components/common/Toggle.vue
View File

@@ -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>

47
assets/main.css
View File

@@ -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 {

1
assets/main.ts
View File

@@ -1,4 +1,3 @@
// import "./styles.scss";
import "./main.css";
import { createApp, App as VueApp } from "vue";
import App from "./App.vue";

2
package.json
View File

@@ -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",

52
pnpm-lock.yaml generated
View File

@@ -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

25
tailwind.config.ts
View File

@@ -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>)",
},
},
},