VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Upgrade to TailwindCSS 4 & DaisyUI 5 (#263)

Browse source 
Also fixes #251

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263
Co-authored-by: joostdecock <joost@joost.at>
Co-committed-by: joostdecock <joost@joost.at>
This commit is contained in:
joostdecock 2025-04-18 08:07:13 +00:00 • committed by Joost De Cock
parent a2863e5158
commit 44e04a4cef
164 changed files with 2361 additions and 2658 deletions
Download patch file Download diff file Expand all files Collapse all files

52
packages/react/components/KeyVal/index.mjs
View file

@ -34,12 +34,12 @@ export const KeyVal = ({
const inner = (
<>
<span
className={`${sharedClasses} ${small ? 'tw-rounded-l' : 'tw-rounded-l-lg'} ${colorClasses1} ${small ? 'tw-text-xs' : ''} tw-pr-0.5`}
className={`${sharedClasses} ${small ? 'tw:rounded-l' : 'tw:rounded-l-lg'} ${colorClasses1} ${small ? 'tw:text-xs' : ''} tw:pr-0.5`}
>
{k}
</span>
<span
className={`${sharedClasses} ${small ? 'tw-rounded-r' : 'tw-rounded-r-lg'} ${colorClasses2} ${small ? 'tw-text-xs' : ''} tw-pl-0.5`}
className={`${sharedClasses} ${small ? 'tw:rounded-r' : 'tw:rounded-r-lg'} ${colorClasses2} ${small ? 'tw:text-xs' : ''} tw:pl-0.5`}
>
{val}
</span>
@ -48,7 +48,7 @@ export const KeyVal = ({
return onClick === false ? (
<button
className="tw-daisy-btn-ghost tw-p-0"
className="tw:daisy-btn-ghost tw:p-0"
onClick={() => {
copyToClipboard(val)
handleCopied(setCopied, setLoadingStatus, k)
@ -58,7 +58,7 @@ export const KeyVal = ({
</button>
) : (
<button
className="tw-daisy-btn-ghost tw-p-0"
className="tw:daisy-btn-ghost tw:p-0"
onClick={typeof onClick === 'function' ? onClick : null}
>
{inner}
@ -79,19 +79,19 @@ const LinkKeyVal = ({
const inner = (
<>
<span
className={`${sharedClasses} ${small ? 'tw-rounded-l' : 'tw-rounded-l-lg'} ${colorClasses1} ${small ? 'tw-text-xs' : ''} tw-pr-0.5`}
className={`${sharedClasses} ${small ? 'tw:rounded-l' : 'tw:rounded-l-lg'} ${colorClasses1} ${small ? 'tw:text-xs' : ''} tw:pr-0.5`}
>
{k}
</span>
<span
className={`${sharedClasses} ${small ? 'tw-rounded-r' : 'tw-rounded-r-lg'} ${colorClasses2} ${small ? 'tw-text-xs' : ''} tw-pl-0.5`}
className={`${sharedClasses} ${small ? 'tw:rounded-r' : 'tw:rounded-r-lg'} ${colorClasses2} ${small ? 'tw:text-xs' : ''} tw:pl-0.5`}
>
{val}
</span>
</>
)
const linkProps = {
className: 'tw-daisy-btn-ghost tw-p-0 hover:tw-no-underline hover:tw-bg-transparent',
className: 'tw:daisy-btn-ghost tw:p-0 tw:hover:no-underline tw:hover:bg-transparent',
href: href,
}
@ -102,33 +102,33 @@ const LinkKeyVal = ({
* If we configure the tailwind classes dynamically, they won't be picked up
* So let's create a component for each color
*/
const sharedClasses = `tw-px-1 tw-text-sm tw-font-medium tw-whitespace-nowrap tw-border-2 tw-border-solid`
const primaryClasses1 = `tw-text-primary-content tw-bg-primary tw-border-primary`
const primaryClasses2 = `tw-text-primary tw-border-primary`
const secondaryClasses1 = `tw-text-secondary-content tw-bg-secondary tw-border-secondary`
const secondaryClasses2 = `tw-text-secondary tw-border-secondary`
const neutralClasses1 = `tw-text-neutral-content tw-bg-neutral tw-border-neutral`
const neutralClasses2 = `tw-text-neutral tw-border-neutral`
const accentClasses1 = `tw-text-accent-content tw-bg-accent tw-border-accent`
const accentClasses2 = `tw-text-accent tw-border-accent`
const infoClasses1 = `tw-text-info-content tw-bg-info tw-border-info`
const infoClasses2 = `tw-text-info tw-border-info`
const warningClasses1 = `tw-text-warning-content tw-bg-warning tw-border-warning`
const warningClasses2 = `tw-text-warning tw-border-warning`
const successClasses1 = `tw-text-warning-content tw-bg-success tw-border-success`
const successClasses2 = `tw-text-success tw-border-success`
const errorClasses1 = `tw-text-error-content tw-bg-error tw-border-error`
const errorClasses2 = `tw-text-error tw-border-error`
const sharedClasses = `tw:px-1 tw:text-sm tw:font-medium tw:whitespace-nowrap tw:border-2 tw:border-solid`
const primaryClasses1 = `tw:text-primary-content tw:bg-primary tw:border-primary`
const primaryClasses2 = `tw:text-primary tw:border-primary`
const secondaryClasses1 = `tw:text-secondary-content tw:bg-secondary tw:border-secondary`
const secondaryClasses2 = `tw:text-secondary tw:border-secondary`
const neutralClasses1 = `tw:text-neutral-content tw:bg-neutral tw:border-neutral`
const neutralClasses2 = `tw:text-neutral tw:border-neutral`
const accentClasses1 = `tw:text-accent-content tw:bg-accent tw:border-accent`
const accentClasses2 = `tw:text-accent tw:border-accent`
const infoClasses1 = `tw:text-info-content tw:bg-info tw:border-info`
const infoClasses2 = `tw:text-info tw:border-info`
const warningClasses1 = `tw:text-warning-content tw:bg-warning tw:border-warning`
const warningClasses2 = `tw:text-warning tw:border-warning`
const successClasses1 = `tw:text-warning-content tw:bg-success tw:border-success`
const successClasses2 = `tw:text-success tw:border-success`
const errorClasses1 = `tw:text-error-content tw:bg-error tw:border-error`
const errorClasses2 = `tw:text-error tw:border-error`
const PrimarySpans = ({ small, k, val }) => (
<>
<span
className={`${sharedClasses} ${small ? 'tw-rounded-l' : 'tw-rounded-l-lg'} ${primaryClasses} ${small ? 'tw-text-xs' : ''}`}
className={`${sharedClasses} ${small ? 'tw:rounded-l' : 'tw:rounded-l-lg'} ${primaryClasses} ${small ? 'tw:text-xs' : ''}`}
>
{k}
</span>
<span
className={`${sharedClasses} ${small ? 'tw-rounded-r' : 'tw-rounded-r-lg'} ${primaryClasses} ${small ? 'tw-text-xs' : ''}`}
className={`${sharedClasses} ${small ? 'tw:rounded-r' : 'tw:rounded-r-lg'} ${primaryClasses} ${small ? 'tw:text-xs' : ''}`}
>
{val}
</span>