updated daisyui (#2088)

* updated daisyui

* Update color conversion function

* Update color conversion function

---------

Co-authored-by: Kiran K <mailtokirankk@gmail.com>
This commit is contained in:
Deepak Prabhakara 2023-12-26 12:07:34 +00:00 committed by GitHub
parent f36204d41d
commit 1525035092
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 116 deletions

View File

@ -8,7 +8,7 @@ import Loading from '@components/Loading';
import useSetupLink from '@lib/ui/hooks/useSetupLink';
import usePortalBranding from '@lib/ui/hooks/usePortalBranding';
import { useTranslation } from 'next-i18next';
import { hexToHsl, darkenHslColor } from '@lib/color';
import { hexToOklch } from '@lib/color';
import { PoweredBy } from '@components/PoweredBy';
export const SetupLinkLayout = ({ children }: { children: React.ReactNode }) => {
@ -24,7 +24,7 @@ export const SetupLinkLayout = ({ children }: { children: React.ReactNode }) =>
return <Loading />;
}
const primaryColor = branding?.primaryColor ? hexToHsl(branding?.primaryColor) : null;
const primaryColor = branding?.primaryColor ? hexToOklch(branding?.primaryColor) : null;
const title =
setupLink?.service === 'sso'
? t('configure_sso')
@ -39,9 +39,7 @@ export const SetupLinkLayout = ({ children }: { children: React.ReactNode }) =>
{branding?.faviconUrl && <link rel='icon' href={branding.faviconUrl} />}
</Head>
{primaryColor && (
<style>{`:root { --p: ${primaryColor}; --pf: ${darkenHslColor(primaryColor, 30)}; }`}</style>
)}
{primaryColor && <style>{`:root { --p: ${primaryColor}; }`}</style>}
<div className='mx-auto max-w-3xl'>
<div className='flex flex-1 flex-col'>

View File

@ -1,53 +1,6 @@
// Hex code to HSL value
export const hexToHsl = (hexColor: string) => {
const r = parseInt(hexColor.slice(1, 3), 16) / 255;
const g = parseInt(hexColor.slice(3, 5), 16) / 255;
const b = parseInt(hexColor.slice(5, 7), 16) / 255;
import chroma from 'chroma-js';
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const diff = max - min;
let h = 0,
s: number,
l: number = (max + min) / 2;
// Calculate the HSL values
if (diff === 0) {
h = s = 0;
} else {
s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
switch (max) {
case r:
h = (g - b) / diff + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / diff + 2;
break;
case b:
h = (r - g) / diff + 4;
break;
}
h /= 6;
}
h = Math.round(h * 360);
s = Math.round(s * 100);
l = Math.round(l * 100);
return `${h} ${s}% ${l}%`;
};
// Darken HSL color by a percentage
export const darkenHslColor = (hslColor: string, percent: number) => {
const [h, s, l] = hslColor.split(' ').map((val) => parseInt(val.replace('%', '')));
if (isNaN(h) || isNaN(s) || isNaN(l)) {
throw new Error(`Invalid HSL color: ${hslColor}`);
}
// Calculate the new lightness value
const newL = (l * (100 - percent)) / 100;
return `${h} ${s}% ${newL}%`;
export const hexToOklch = (hexColor: string) => {
const [l, c, h] = chroma(hexColor).oklch();
return [l, c, h].join(' ');
};

56
npm/package-lock.json generated
View File

@ -1120,7 +1120,7 @@
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
"devOptional": true,
"dev": true,
"dependencies": {
"@jridgewell/trace-mapping": "0.3.9"
},
@ -1313,7 +1313,7 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">=6.0.0"
}
@ -1322,13 +1322,13 @@
"version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
"devOptional": true
"dev": true
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
"devOptional": true,
"dev": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.0.3",
"@jridgewell/sourcemap-codec": "^1.4.10"
@ -3006,13 +3006,13 @@
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
"integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
"devOptional": true
"dev": true
},
"node_modules/@tsconfig/node12": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
"devOptional": true
"dev": true
},
"node_modules/@tsconfig/node14": {
"version": "14.1.0",
@ -3157,7 +3157,7 @@
"version": "8.10.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
"devOptional": true,
"dev": true,
"bin": {
"acorn": "bin/acorn"
},
@ -3169,7 +3169,7 @@
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">=0.4.0"
}
@ -3284,7 +3284,7 @@
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"devOptional": true
"dev": true
},
"node_modules/array-buffer-byte-length": {
"version": "1.0.0",
@ -4072,7 +4072,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"devOptional": true
"dev": true
},
"node_modules/cross-env": {
"version": "7.0.3",
@ -5209,7 +5209,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
"devOptional": true
"dev": true
},
"node_modules/is-actual-promise": {
"version": "1.0.1",
@ -5865,7 +5865,7 @@
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
"devOptional": true
"dev": true
},
"node_modules/make-fetch-happen": {
"version": "13.0.0",
@ -7254,20 +7254,6 @@
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"dev": true,
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-element-to-jsx-string": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
@ -7727,7 +7713,7 @@
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
"integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
@ -7737,7 +7723,7 @@
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
"integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
"devOptional": true,
"dev": true,
"dependencies": {
"ip": "^2.0.0",
"smart-buffer": "^4.2.0"
@ -8324,7 +8310,7 @@
"version": "10.9.2",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
"devOptional": true,
"dev": true,
"dependencies": {
"@cspotcode/source-map-support": "^0.8.0",
"@tsconfig/node10": "^1.0.7",
@ -8367,19 +8353,19 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
"devOptional": true
"dev": true
},
"node_modules/ts-node/node_modules/@tsconfig/node16": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
"devOptional": true
"dev": true
},
"node_modules/ts-node/node_modules/diff": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">=0.3.1"
}
@ -8733,7 +8719,7 @@
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"devOptional": true,
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -8816,7 +8802,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
"devOptional": true
"dev": true
},
"node_modules/v8-to-istanbul": {
"version": "9.1.3",
@ -9271,7 +9257,7 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">=6"
}

44
package-lock.json generated
View File

@ -19,9 +19,10 @@
"@tailwindcss/typography": "0.5.10",
"axios": "1.6.2",
"blockly": "10.3.0",
"chroma-js": "2.4.2",
"classnames": "2.3.3",
"cors": "2.8.5",
"daisyui": "3.9.4",
"daisyui": "4.4.24",
"i18next": "22.5.1",
"medium-zoom": "1.1.0",
"micromatch": "4.0.5",
@ -32,7 +33,7 @@
"nodemailer": "6.9.7",
"raw-body": "2.5.2",
"react": "18.2.0",
"react-daisyui": "4.1.2",
"react-daisyui": "5.0.0",
"react-dom": "18.2.0",
"react-i18next": "12.3.1",
"react-syntax-highlighter": "15.5.0",
@ -6224,6 +6225,11 @@
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
},
"node_modules/chroma-js": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
"integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
},
"node_modules/ci-info": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@ -6579,11 +6585,6 @@
"simple-swizzle": "^0.2.2"
}
},
"node_modules/colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -6836,16 +6837,23 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/culori": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
"node_modules/daisyui": {
"version": "3.9.4",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.4.tgz",
"integrity": "sha512-fvi2RGH4YV617/6DntOVGcOugOPym9jTGWW2XySb5ZpvdWO4L7bEG77VHirrnbRUEWvIEVXkBpxUz2KFj0rVnA==",
"version": "4.4.24",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.4.24.tgz",
"integrity": "sha512-u/B3484J08V7N0rIYymnC+SyxOjlYQL+2vyhHWV+/KC+VaUcbEF2Z3H06eCPgdTiZ0J+ml44aH7wBhIymPFQ+g==",
"dependencies": {
"colord": "^2.9",
"css-selector-tokenizer": "^0.8",
"postcss": "^8",
"postcss-js": "^4",
"tailwindcss": "^3.1"
"culori": "^3",
"picocolors": "^1",
"postcss-js": "^4"
},
"engines": {
"node": ">=16.9.0"
@ -15440,11 +15448,11 @@
"integrity": "sha512-+BTreuQUUGv1Tv4GbcFNk+1L8U60ZSdxLUs3OVUPsShzxLFYcTYcNf2wzMt3GEU4iFA8Px7SpofpX+uiL03QyQ=="
},
"node_modules/react-daisyui": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/react-daisyui/-/react-daisyui-4.1.2.tgz",
"integrity": "sha512-Sx8ziaxKDe/59bw+UxTFOoDSJEuA8iGhgmMbzSAtnhaaZPP20kluHG+1/wY5mBSxfcAuk6oI8fqKcJRp55WzPQ==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-daisyui/-/react-daisyui-5.0.0.tgz",
"integrity": "sha512-j1cugAxALmIbihycGBh7P9H3UXrfsvqu84qM6O55l7nOKST43IjUkZjmNav/7s0ZaUpa9Y+52mFchUb2zvon1A==",
"peerDependencies": {
"daisyui": "^3.0.22",
"daisyui": "^4.4.6",
"react": ">=16",
"react-dom": ">=16",
"tailwindcss": ">=3.2.7"

View File

@ -63,9 +63,10 @@
"@tailwindcss/typography": "0.5.10",
"axios": "1.6.2",
"blockly": "10.3.0",
"chroma-js": "2.4.2",
"classnames": "2.3.3",
"cors": "2.8.5",
"daisyui": "3.9.4",
"daisyui": "4.4.24",
"i18next": "22.5.1",
"medium-zoom": "1.1.0",
"micromatch": "4.0.5",
@ -76,7 +77,7 @@
"nodemailer": "6.9.7",
"raw-body": "2.5.2",
"react": "18.2.0",
"react-daisyui": "4.1.2",
"react-daisyui": "5.0.0",
"react-dom": "18.2.0",
"react-i18next": "12.3.1",
"react-syntax-highlighter": "15.5.0",

View File

@ -7,7 +7,7 @@ import type { InferGetServerSidePropsType } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import jackson from '@lib/jackson';
import Head from 'next/head';
import { hexToHsl, darkenHslColor } from '@lib/color';
import { hexToOklch } from '@lib/color';
import Image from 'next/image';
import { PoweredBy } from '@components/PoweredBy';
import { getPortalBranding } from '@lib/settings';
@ -26,7 +26,7 @@ export default function ChooseIdPConnection({
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
const { t } = useTranslation('common');
const primaryColor = hexToHsl(branding.primaryColor);
const primaryColor = hexToOklch(branding.primaryColor);
const title = authFlow === 'sp-initiated' ? t('select_an_idp') : t('select_an_app');
const selectors = {
@ -42,9 +42,7 @@ export default function ChooseIdPConnection({
{branding?.faviconUrl && <link rel='icon' href={branding.faviconUrl} />}
</Head>
{primaryColor && (
<style>{`:root { --p: ${primaryColor}; --pf: ${darkenHslColor(primaryColor, 30)}; }`}</style>
)}
{primaryColor && <style>{`:root { --p: ${primaryColor}; }`}</style>}
{branding?.logoUrl && (
<div className='flex justify-center'>