mirror of
https://github.com/upscayl/upscayl.git
synced 2026-04-25 03:00:05 -04:00
refactor: update component styles and dependencies
- Modified component styles to use 'rounded-field' instead of 'rounded-btn' for consistency. - Updated 'lucide-react' and 'react-resizable-panels' versions in package.json and package-lock.json. - Adjusted paths in components.json for Tailwind CSS and global styles. - Added new themes to the SelectTheme component for enhanced customization options.
This commit is contained in:
anna7261
@@ -4,13 +4,12 @@
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "renderer/styles/globals.css",
|
||||
"baseColor": "slate",
|
||||
"config": "",
|
||||
"css": "src/styles/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
@@ -18,5 +17,5 @@
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"registries": {}
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
|
||||
38
package-lock.json
generated
38
package-lock.json
generated
@@ -28,20 +28,20 @@
|
||||
"firebase": "^11.1.0",
|
||||
"gray-matter": "^4.0.3",
|
||||
"jotai": "^2.11.0",
|
||||
"lucide-react": "^0.561.0",
|
||||
"lucide-react": "^0.562.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"posthog-js": "^1.203.2",
|
||||
"react-compare-slider": "^3.1.0",
|
||||
"react-error-boundary": "^6.0.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-resizable-panels": "^4.0.10",
|
||||
"react-resizable-panels": "^4.2.1",
|
||||
"react-select": "^5.10.2",
|
||||
"react-tooltip": "^5.30.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"theme-change": "^2.5.0"
|
||||
"theme-change": "^2.5.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@electron/notarize": "^2.5.0",
|
||||
@@ -8136,9 +8136,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.561.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.561.0.tgz",
|
||||
"integrity": "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==",
|
||||
"version": "0.562.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
|
||||
"integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
@@ -10198,9 +10198,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-resizable-panels": {
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.0.10.tgz",
|
||||
"integrity": "sha512-uEgCPsBqpH5lOH0kdrwKuh/2+qmucgO3A71chgvzNUsJb8HpD/u22xnJATyosN7jzIWsg/Xx4J612hjrPnLo6A==",
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.2.1.tgz",
|
||||
"integrity": "sha512-UYyiZNjd3P12BqQYihojqdVs4ovMBWFO68RQp/O1HGiUKdltNu9hacZEm4PVD/UpYpz5p9V+YBtOZo+CvGKmkQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
@@ -11013,15 +11013,6 @@
|
||||
"integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwindcss-animate": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
|
||||
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || insiders"
|
||||
}
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
|
||||
@@ -11252,6 +11243,15 @@
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/tw-animate-css": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
|
||||
"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/Wombosvideo"
|
||||
}
|
||||
},
|
||||
"node_modules/type-fest": {
|
||||
"version": "0.13.1",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
|
||||
|
||||
@@ -247,20 +247,20 @@
|
||||
"firebase": "^11.1.0",
|
||||
"gray-matter": "^4.0.3",
|
||||
"jotai": "^2.11.0",
|
||||
"lucide-react": "^0.561.0",
|
||||
"lucide-react": "^0.562.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"posthog-js": "^1.203.2",
|
||||
"react-compare-slider": "^3.1.0",
|
||||
"react-error-boundary": "^6.0.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-resizable-panels": "^4.0.10",
|
||||
"react-resizable-panels": "^4.2.1",
|
||||
"react-select": "^5.10.2",
|
||||
"react-tooltip": "^5.30.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"theme-change": "^2.5.0"
|
||||
"theme-change": "^2.5.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"volta": {
|
||||
"node": "22.21.1"
|
||||
|
||||
@@ -306,7 +306,7 @@ const MainContent = ({
|
||||
{batchMode &&
|
||||
upscaledBatchFolderPath.length === 0 &&
|
||||
batchFolderPath.length > 0 && (
|
||||
<p className="select-none text-base-content">
|
||||
<p className="text-base-content select-none">
|
||||
<span className="font-bold">
|
||||
{t("APP.PROGRESS.BATCH.SELECTED_FOLDER_TITLE")}
|
||||
</span>{" "}
|
||||
@@ -317,11 +317,11 @@ const MainContent = ({
|
||||
|
||||
{batchMode && upscaledBatchFolderPath.length > 0 && (
|
||||
<div className="z-50 flex flex-col items-center">
|
||||
<p className="select-none py-4 font-bold text-base-content">
|
||||
<p className="text-base-content py-4 font-bold select-none">
|
||||
{t("APP.PROGRESS.BATCH.DONE_TITLE")}
|
||||
</p>
|
||||
<button
|
||||
className="bg-gradient-blue btn btn-primary rounded-btn p-3 font-medium text-white/90 transition-colors"
|
||||
className="bg-gradient-blue btn btn-primary rounded-field p-3 font-medium text-white/90 transition-colors"
|
||||
onClick={openFolderHandler}
|
||||
>
|
||||
{t("APP.PROGRESS.BATCH.OPEN_UPSCAYLED_FOLDER_TITLE")}
|
||||
|
||||
@@ -6,18 +6,18 @@ function InstructionsCard({ version, batchMode }) {
|
||||
const t = useAtomValue(translationAtom);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4 rounded-btn bg-base-200 p-4">
|
||||
<div className="rounded-field bg-base-200 flex flex-col items-center gap-4 p-4">
|
||||
<p className="text-lg font-semibold">
|
||||
{batchMode
|
||||
? t("APP.RIGHT_PANE_INFO.SELECT_FOLDER")
|
||||
: t("APP.RIGHT_PANE_INFO.SELECT_IMAGE")}
|
||||
</p>
|
||||
{batchMode ? (
|
||||
<p className="w-full text-center text-base-content/80 md:w-96">
|
||||
<p className="text-base-content/80 w-full text-center md:w-96">
|
||||
{t("APP.RIGHT_PANE_INFO.SELECT_FOLDER_DESCRIPTION")}
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1 text-center text-sm text-base-content/70">
|
||||
<div className="text-base-content/70 flex flex-col gap-1 text-center text-sm">
|
||||
<p>{t("APP.RIGHT_PANE_INFO.SELECT_IMAGES_DESCRIPTION")}</p>
|
||||
<p>{t("APP.RIGHT_PANE_INFO.PASTE_IMAGE_DESCRIPTION")}</p>
|
||||
</div>
|
||||
|
||||
@@ -53,19 +53,19 @@ const MoreOptionsDrawer = ({
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className={`fixed right-0 top-0 z-50 h-screen w-md bg-base-100 text-base-content shadow-xl shadow-base-300 transition-all duration-500 ${
|
||||
className={`bg-base-100 text-base-content shadow-base-300 fixed top-0 right-0 z-50 h-screen w-md shadow-xl transition-all duration-500 ${
|
||||
openSidebar ? "right-0" : "-right-full translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`group absolute right-full top-1/2 z-50 flex cursor-pointer items-center gap-2 rounded-btn rounded-r-none bg-base-100 p-4 transition-all duration-500`}
|
||||
className={`group rounded-field bg-base-100 absolute top-1/2 right-full z-50 flex cursor-pointer items-center gap-2 rounded-r-none p-4 transition-all duration-500`}
|
||||
onClick={() => {
|
||||
setOpenSidebar(!openSidebar);
|
||||
}}
|
||||
>
|
||||
<EllipsisIcon
|
||||
className={cn(
|
||||
"animate text-xl text-base-content",
|
||||
"animate text-base-content text-xl",
|
||||
openSidebar ? "rotate-90" : "rotate-0",
|
||||
)}
|
||||
/>
|
||||
@@ -119,7 +119,7 @@ const MoreOptionsDrawer = ({
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex min-h-0 flex-1 flex-col gap-2">
|
||||
<p className="text-sm font-semibold uppercase text-base-content">
|
||||
<p className="text-base-content text-sm font-semibold uppercase">
|
||||
Stats
|
||||
</p>
|
||||
|
||||
@@ -128,7 +128,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.TOTAL_UPSCAYLS")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{userStats.totalUpscayls}
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,7 +137,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.TOTAL_BATCH_UPSCAYLS")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{userStats.batchUpscayls}
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,7 +146,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.TOTAL_IMAGE_UPSCAYLS")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{userStats.imageUpscayls}
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,7 +155,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.TOTAL_DOUBLE_UPSCAYLS")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{userStats.doubleUpscayls}
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,7 +164,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.AVERAGE_UPSCAYL_TIME")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{formatDuration(userStats.averageUpscaylTime / 1000)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -173,7 +173,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.LAST_UPSCAYL_DURATION")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{formatDuration(userStats.lastUpscaylDuration / 1000)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,7 +182,7 @@ const MoreOptionsDrawer = ({
|
||||
<div className="stat-title">
|
||||
{t("APP.MORE_OPTIONS_DRAWER.LAST_USED_AT")}
|
||||
</div>
|
||||
<div className="stat-value text-2xl text-base-content">
|
||||
<div className="stat-value text-base-content text-2xl">
|
||||
{new Date(userStats.lastUsedAt).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,8 +49,8 @@ function ProgressBar({
|
||||
// }, [progress]);
|
||||
|
||||
return (
|
||||
<div className="absolute z-50 flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
|
||||
<div className="flex flex-col items-center gap-2 rounded-btn bg-base-100/50 p-4 backdrop-blur-lg">
|
||||
<div className="bg-base-300/50 absolute z-50 flex h-full w-full flex-col items-center justify-center backdrop-blur-lg">
|
||||
<div className="rounded-field bg-base-100/50 flex flex-col items-center gap-2 p-4 backdrop-blur-lg">
|
||||
<UpscaylSVGLogo className="spinner h-12 w-12" />
|
||||
|
||||
<p className="rounded-full px-2 pb-2 font-bold">
|
||||
@@ -70,7 +70,7 @@ function ProgressBar({
|
||||
<p className="text-sm font-bold">{progress}</p>
|
||||
)}
|
||||
|
||||
<p className="animate-pulse rounded-full px-2 pb-3 text-xs font-medium text-neutral-content/50">
|
||||
<p className="text-neutral-content/50 animate-pulse rounded-full px-2 pb-3 text-xs font-medium">
|
||||
{t("APP.PROGRESS_BAR.IN_PROGRESS_TITLE")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -225,7 +225,7 @@ function SettingsTab({
|
||||
{FEATURE_FLAGS.SHOW_UPSCAYL_CLOUD_INFO && (
|
||||
<>
|
||||
<button
|
||||
className="rounded-btn bg-success shadow-success/40 mx-5 mb-5 animate-pulse p-1 text-sm text-slate-50 shadow-lg"
|
||||
className="rounded-field bg-success shadow-success/40 mx-5 mb-5 animate-pulse p-1 text-sm text-slate-50 shadow-lg"
|
||||
onClick={() => {
|
||||
setShow(true);
|
||||
}}
|
||||
|
||||
@@ -35,7 +35,7 @@ export function LogArea({
|
||||
</button>
|
||||
</div>
|
||||
<code
|
||||
className="relative flex h-52 max-h-52 flex-col gap-3 overflow-y-auto break-all rounded-btn rounded-r-none bg-base-200 p-4 text-xs"
|
||||
className="rounded-field bg-base-200 relative flex h-52 max-h-52 flex-col gap-3 overflow-y-auto p-4 text-xs break-all"
|
||||
ref={ref}
|
||||
>
|
||||
{logData.length === 0 && (
|
||||
|
||||
@@ -35,6 +35,12 @@ const SelectTheme = ({ hideLabel }: { hideLabel?: boolean }) => {
|
||||
{ label: "night", value: "night" },
|
||||
{ label: "coffee", value: "coffee" },
|
||||
{ label: "winter", value: "winter" },
|
||||
{ label: "dim", value: "dim" },
|
||||
{ label: "nord", value: "nord" },
|
||||
{ label: "sunset", value: "sunset" },
|
||||
{ label: "caramellatte", value: "caramellatte" },
|
||||
{ label: "abyss", value: "abyss" },
|
||||
{ label: "silk", value: "silk" },
|
||||
];
|
||||
const t = useAtomValue(translationAtom);
|
||||
|
||||
|
||||
@@ -44,7 +44,7 @@ const SelectModelDialog = () => {
|
||||
<div className="flex flex-col gap-4">
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<button className="btn btn-primary border-border justify-start">
|
||||
<button className="btn btn-primary justify-start">
|
||||
<SwatchBookIcon className="mr-2 h-5 w-5" />
|
||||
{selectedModelId in MODELS
|
||||
? t(
|
||||
@@ -53,7 +53,7 @@ const SelectModelDialog = () => {
|
||||
: selectedModelId}
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="z-50 sm:max-w-lg">
|
||||
<DialogContent className="z-50 max-h-screen sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("APP.MODEL_SELECTION.DESCRIPTION")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
@@ -136,10 +136,7 @@ const SelectModelDialog = () => {
|
||||
open={!!zoomedModel}
|
||||
onOpenChange={(open) => !open && setZoomedModel(null)}
|
||||
>
|
||||
<DialogContent
|
||||
className="h-screen w-screen max-w-full p-0"
|
||||
hideCloseButton
|
||||
>
|
||||
<DialogContent className="h-screen w-screen max-w-full p-0">
|
||||
<div className="relative flex h-full w-full items-center justify-center bg-black">
|
||||
<div className="flex h-full w-full">
|
||||
<div className="relative h-full w-1/2">
|
||||
|
||||
@@ -116,7 +116,7 @@ function UpscaylSteps({
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle"
|
||||
className="toggle toggle-primary-content"
|
||||
defaultChecked={batchMode}
|
||||
onClick={() => {
|
||||
if (!rememberOutputFolder) {
|
||||
@@ -127,7 +127,7 @@ function UpscaylSteps({
|
||||
}}
|
||||
></input>
|
||||
<p
|
||||
className="mr-1 inline-block cursor-help text-sm"
|
||||
className="text-sm"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={t("APP.BATCH_MODE.DESCRIPTION")}
|
||||
>
|
||||
@@ -214,7 +214,7 @@ function UpscaylSteps({
|
||||
</div>
|
||||
{!outputPath && FEATURE_FLAGS.APP_STORE_BUILD && (
|
||||
<div className="text-xs">
|
||||
<span className="rounded-btn bg-base-200 text-base-content/50 px-2 font-medium uppercase">
|
||||
<span className="rounded-field bg-base-200 text-base-content/50 px-2 font-medium uppercase">
|
||||
{t("APP.OUTPUT_PATH_SELECTION.NOT_SELECTED")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ const Tabs = ({ selectedTab, setSelectedTab }: TabsProps) => {
|
||||
const t = useAtomValue(translationAtom);
|
||||
|
||||
return (
|
||||
<div className="tabs-boxed tabs mx-auto mb-2">
|
||||
<div className="tabs tabs-box mx-auto mb-2">
|
||||
<a
|
||||
className={`tab ${selectedTab === 0 && "tab-active"}`}
|
||||
onClick={() => {
|
||||
|
||||
@@ -1,11 +1,55 @@
|
||||
@import "tailwindcss";
|
||||
/*
|
||||
---break--- */
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@plugin "daisyui";
|
||||
@plugin "tailwindcss-animate";
|
||||
@plugin "daisyui" {
|
||||
themes:
|
||||
dark, light, cupcake, bumblebee, emerald, corporate, synthwave, retro,
|
||||
cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel,
|
||||
fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid,
|
||||
lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss,
|
||||
silk;
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "upscayl";
|
||||
default: true;
|
||||
prefersdark: true;
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(27.95% 0.0368 260);
|
||||
--color-base-200: oklch(20.77% 0.0398 265.8);
|
||||
--color-base-300: oklch(12.88% 0.0406 264.7);
|
||||
--color-base-content: oklch(100% 0 0);
|
||||
--color-primary: oklch(37.17% 0.0392 257.3);
|
||||
--color-primary-content: oklch(100% 0 0);
|
||||
--color-secondary: oklch(51.06% 0.2301 277);
|
||||
--color-secondary-content: oklch(100% 0 0);
|
||||
--color-accent: oklch(49.07% 0.2412 292.6);
|
||||
--color-accent-content: oklch(100% 0 0);
|
||||
--color-neutral: oklch(44.55% 0.0374 257.3);
|
||||
--color-neutral-content: oklch(100% 0 0);
|
||||
--color-info: oklch(87.1% 0.079 241.68);
|
||||
--color-info-content: oklch(40% 0.079 241.68);
|
||||
--color-success: oklch(83.9% 0.201 136.87);
|
||||
--color-success-content: oklch(30% 0.201 136.87);
|
||||
--color-warning: oklch(83.9% 0.165 80);
|
||||
--color-warning-content: oklch(40% 0.165 80);
|
||||
--color-error: oklch(75.1% 0.199 22.37);
|
||||
--color-error-content: oklch(20% 0.199 22.37);
|
||||
--radius-selector: 2rem;
|
||||
--radius-field: 2rem;
|
||||
--radius-box: 1rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
@plugin "tailwind-scrollbar";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
@@ -88,212 +132,53 @@
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Border Radius - Linked to DaisyUI variable */
|
||||
--radius-lg: var(--rounded-btn);
|
||||
--radius-md: calc(var(--rounded-btn) - 2px);
|
||||
--radius-sm: calc(var(--rounded-btn) - 4px);
|
||||
|
||||
/* Shadcn Color Mapping to DaisyUI Variables */
|
||||
--color-border: var(--color-primary);
|
||||
--color-input: var(--color-base-content);
|
||||
--color-ring: var(--color-base-content);
|
||||
--color-background: var(--color-base-100);
|
||||
--color-foreground: var(--color-base-content);
|
||||
|
||||
--color-primary: var(--color-primary);
|
||||
--color-primary-foreground: var(--color-primary-content);
|
||||
|
||||
--color-secondary: var(--color-secondary);
|
||||
--color-secondary-foreground: var(--color-secondary-content);
|
||||
|
||||
--color-destructive: var(--color-error);
|
||||
--color-destructive-foreground: var(--color-error-content);
|
||||
|
||||
--color-muted: var(--color-base-300);
|
||||
--color-muted-foreground: var(--color-base-content);
|
||||
|
||||
--color-accent: var(--color-accent);
|
||||
--color-accent-foreground: var(--color-accent-content);
|
||||
|
||||
--color-popover: var(--color-base-100);
|
||||
--color-popover-foreground: var(--color-base-content);
|
||||
|
||||
--color-card: var(--color-base-100);
|
||||
--color-card-foreground: var(--color-base-content);
|
||||
}
|
||||
|
||||
/* Container Utility Override */
|
||||
@utility container {
|
||||
margin-inline: auto;
|
||||
padding-inline: 2rem;
|
||||
@media (width >= 1400px) {
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 1. Global Mappings: Connect Shadcn to whatever the CURRENT DaisyUI theme is */
|
||||
:root {
|
||||
/* Map Shadcn Variables to the generic DaisyUI variables */
|
||||
/* This allows Shadcn to adapt to ANY DaisyUI theme automatically */
|
||||
--background: var(--color-base-100);
|
||||
--foreground: var(--color-base-content);
|
||||
--primary: var(--color-primary);
|
||||
--primary-foreground: var(--color-primary-content);
|
||||
--secondary: var(--color-secondary);
|
||||
--secondary-foreground: var(--color-secondary-content);
|
||||
--destructive: var(--color-error);
|
||||
--destructive-foreground: var(--color-error-content);
|
||||
--muted: var(--color-base-300);
|
||||
--muted-foreground: var(--color-base-content);
|
||||
--accent: var(--color-accent);
|
||||
--accent-foreground: var(--color-accent-content);
|
||||
--popover: var(--color-base-100);
|
||||
--popover-foreground: var(--color-base-content);
|
||||
--card: var(--color-base-100);
|
||||
--card-foreground: var(--color-base-content);
|
||||
--border: var(--color-primary);
|
||||
--input: var(--color-base-content);
|
||||
--ring: var(--color-base-content);
|
||||
--radius: var(--rounded-btn);
|
||||
|
||||
/* Default fallback for radius if a theme doesn't define it */
|
||||
--rounded-btn: 0.5rem;
|
||||
}
|
||||
|
||||
/* 2. Specific Definition for "Upscayl" Theme */
|
||||
[data-theme="upscayl"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Colors */
|
||||
--color-primary: #334155;
|
||||
--color-primary-content: #ffffff;
|
||||
|
||||
--color-secondary: #4f46e5;
|
||||
--color-secondary-content: #ffffff;
|
||||
|
||||
--color-accent: #6d28d9;
|
||||
--color-accent-content: #ffffff;
|
||||
|
||||
--color-neutral: #475569;
|
||||
--color-neutral-content: #ffffff;
|
||||
|
||||
--color-base-100: #1e293b;
|
||||
--color-base-200: #0f172a;
|
||||
--color-base-300: #020617;
|
||||
--color-base-content: #ffffff;
|
||||
|
||||
--color-error: #ef4444;
|
||||
--color-error-content: #ffffff;
|
||||
|
||||
/* Settings */
|
||||
--rounded-btn: 2rem;
|
||||
--rounded-badge: 2rem;
|
||||
--animation-btn: 0.5s;
|
||||
--animation-input: 0.5s;
|
||||
--btn-text-case: uppercase;
|
||||
--btn-focus-scale: 0.95;
|
||||
--border-btn: 1px;
|
||||
--tab-border: 1px;
|
||||
--tab-radius: 0.5rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--primary: oklch(0.208 0.042 265.755);
|
||||
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--secondary: oklch(0.968 0.007 247.896);
|
||||
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--muted: oklch(0.968 0.007 247.896);
|
||||
--muted-foreground: oklch(0.554 0.046 257.417);
|
||||
|
||||
--accent: oklch(0.968 0.007 247.896);
|
||||
--accent-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: hsl(210 40% 98%);
|
||||
|
||||
--border: oklch(0.929 0.013 255.508);
|
||||
--input: oklch(0.929 0.013 255.508);
|
||||
--ring: oklch(0.704 0.04 256.788);
|
||||
|
||||
--radius: 0.625rem;
|
||||
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
|
||||
--sidebar: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
||||
|
||||
--sidebar-primary: oklch(0.208 0.042 265.755);
|
||||
|
||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--sidebar-accent: oklch(0.968 0.007 247.896);
|
||||
|
||||
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--sidebar-border: oklch(0.929 0.013 255.508);
|
||||
|
||||
--sidebar-ring: oklch(0.704 0.04 256.788);
|
||||
--background: oklch(var(--color-base-100));
|
||||
--foreground: oklch(var(--color-base-content));
|
||||
--card: oklch(var(--color-base-100));
|
||||
--card-foreground: oklch(var(--color-base-content));
|
||||
--popover: oklch(var(--color-base-100));
|
||||
--popover-foreground: oklch(var(--color-base-content));
|
||||
--primary: oklch(var(--color-primary));
|
||||
--primary-foreground: oklch(var(--color-primary-content));
|
||||
--secondary: oklch(var(--color-secondary));
|
||||
--secondary-foreground: oklch(var(--color-secondary-content));
|
||||
--muted: oklch(var(--color-base-300));
|
||||
--muted-foreground: oklch(var(--color-base-content));
|
||||
--accent: oklch(var(--color-accent));
|
||||
--accent-foreground: oklch(var(--color-accent-content));
|
||||
--destructive: oklch(var(--color-error));
|
||||
--destructive-foreground: oklch(var(--color-error-content));
|
||||
--input: oklch(var(--color-base-content));
|
||||
--ring: oklch(var(--color-base-content));
|
||||
--radius: var(--rounded-field);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.129 0.042 264.695);
|
||||
--foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--card: oklch(0.208 0.042 265.755);
|
||||
--card-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--popover: oklch(0.208 0.042 265.755);
|
||||
--popover-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--primary: oklch(0.929 0.013 255.508);
|
||||
--primary-foreground: oklch(0.208 0.042 265.755);
|
||||
|
||||
--secondary: oklch(0.279 0.041 260.031);
|
||||
--secondary-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--muted: oklch(0.279 0.041 260.031);
|
||||
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||
|
||||
--accent: oklch(0.279 0.041 260.031);
|
||||
--accent-foreground: oklch(0.984 0.003 247.858);
|
||||
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--destructive-foreground: hsl(210 40% 98%);
|
||||
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.551 0.027 264.364);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.208 0.042 265.755);
|
||||
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-accent: oklch(0.279 0.041 260.031);
|
||||
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.551 0.027 264.364);
|
||||
--background: oklch(var(--color-base-100));
|
||||
--foreground: oklch(var(--color-base-content));
|
||||
--card: oklch(var(--color-base-200));
|
||||
--card-foreground: oklch(var(--color-base-content));
|
||||
--popover: oklch(var(--color-base-200));
|
||||
--popover-foreground: oklch(var(--color-base-content));
|
||||
--primary: oklch(var(--color-primary));
|
||||
--primary-foreground: oklch(var(--color-primary-content));
|
||||
--secondary: oklch(var(--color-secondary));
|
||||
--secondary-foreground: oklch(var(--color-secondary-content));
|
||||
--muted: oklch(var(--color-base-300));
|
||||
--muted-foreground: oklch(var(--color-base-content));
|
||||
--accent: oklch(var(--color-accent));
|
||||
--accent-foreground: oklch(var(--color-accent-content));
|
||||
--destructive: oklch(var(--color-error));
|
||||
--destructive-foreground: oklch(var(--color-error-content));
|
||||
--input: oklch(var(--color-base-content));
|
||||
--ring: oklch(var(--color-base-content));
|
||||
--radius: var(--rounded-field);
|
||||
}
|
||||
|
||||
/* Upscayl Custom Theme Fonts */
|
||||
@@ -326,29 +211,6 @@
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.checkerboard {
|
||||
background-color: rgba(255, 255, 255);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
45deg,
|
||||
#000 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
#000 75%,
|
||||
#000
|
||||
),
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
#000 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
#000 75%,
|
||||
#000
|
||||
);
|
||||
background-size: 40px 40px;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: sk-rotateplane 2.2s infinite ease-in-out;
|
||||
}
|
||||
@@ -389,7 +251,7 @@
|
||||
}
|
||||
|
||||
.react-select-container .react-select__control {
|
||||
border-radius: var(--rounded-btn);
|
||||
border-radius: var(--rounded-field);
|
||||
background-color: var(--color-primary);
|
||||
height: 3rem;
|
||||
cursor: pointer;
|
||||
@@ -450,7 +312,7 @@
|
||||
|
||||
[data-theme="upscayl"] .react-select-container .react-select__control {
|
||||
@apply bg-primary h-10 cursor-pointer border-0! border-none! border-transparent! shadow-none;
|
||||
border-radius: var(--rounded-btn);
|
||||
border-radius: var(--rounded-field);
|
||||
}
|
||||
|
||||
[data-theme="upscayl"] .react-select-container .react-select__single-value {
|
||||
@@ -471,54 +333,3 @@
|
||||
@apply border-white;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-2xl: calc(var(--radius) + 8px);
|
||||
--radius-3xl: calc(var(--radius) + 12px);
|
||||
--radius-4xl: calc(var(--radius) + 16px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
/*
|
||||
---break--- */
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,9 +85,9 @@
|
||||
// },
|
||||
// },
|
||||
// borderRadius: {
|
||||
// lg: daisyuiColorObj["--rounded-btn"],
|
||||
// md: Number(daisyuiColorObj["--rounded-btn"]) - 2 + "px",
|
||||
// sm: Number(daisyuiColorObj["--rounded-btn"]) - 4 + "px",
|
||||
// lg: daisyuiColorObj["--rounded-field"],
|
||||
// md: Number(daisyuiColorObj["--rounded-field"]) - 2 + "px",
|
||||
// sm: Number(daisyuiColorObj["--rounded-field"]) - 4 + "px",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
@@ -104,7 +104,7 @@
|
||||
// "base-100": "#1e293b",
|
||||
// "base-200": "#0f172a",
|
||||
// "base-300": "#020617",
|
||||
// "--rounded-btn": "2rem", // border radius rounded-btn utility class, used in buttons and similar element
|
||||
// "--rounded-field": "2rem", // border radius rounded-field utility class, used in buttons and similar element
|
||||
// "--rounded-badge": "2rem", // border radius rounded-badge utility class, used in badges and similar
|
||||
// "--animation-btn": "0.5s", // duration of animation when you click on button
|
||||
// "--animation-input": "0.5s", // duration of animation for inputs like checkbox, toggle, radio, etc
|
||||
|
||||
Reference in New Issue
Block a user