Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-06-15 20:25:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update color system to use oklch color format

Browse Source 
- Changed color definitions in tailwind.config.ts and various components to use oklch format for improved color manipulation.
- Updated button backgrounds in multiple components to enhance visibility and consistency across light and dark themes.
- Adjusted chart color configurations to align with the new color system.
- Refined global CSS variables for better color management in light and dark modes.
This commit is contained in:
Mauricio Siu
2026-04-13 21:34:26 -06:00
parent d99f2cd460
commit 9bf4a97cee
37 changed files with 266 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx
View File

@@ -241,7 +241,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -329,7 +329,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/application/general/generic/save-gitea-provider.tsx
View File

@@ -254,7 +254,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -349,7 +349,7 @@ export const SaveGiteaProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx
View File

@@ -229,7 +229,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -316,7 +316,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx
View File

@@ -250,7 +250,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -347,7 +347,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

2
apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
View File

@@ -511,7 +511,7 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx
View File

@@ -181,7 +181,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -263,7 +263,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx
View File

@@ -243,7 +243,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -331,7 +331,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/compose/general/generic/save-gitea-provider-compose.tsx
View File

@@ -240,7 +240,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -327,7 +327,7 @@ export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx
View File

@@ -230,7 +230,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -317,7 +317,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx
View File

@@ -252,7 +252,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -349,7 +349,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
" w-full justify-between !bg-input", " w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

2
apps/dokploy/components/dashboard/database/backups/handle-backup.tsx
View File

@@ -409,7 +409,7 @@ export const HandleBackup = ({
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/database/backups/restore-backup.tsx
View File

@@ -346,7 +346,7 @@ export const RestoreBackup = ({
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >
@@ -428,7 +428,7 @@ export const RestoreBackup = ({
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-between !bg-input", "w-full justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
!field.value && "text-muted-foreground", !field.value && "text-muted-foreground",
)} )}
> >

4
apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx
View File

@@ -17,11 +17,11 @@ interface Props {
const chartConfig = { const chartConfig = {
readMb: { readMb: {
label: "Read (MB)", label: "Read (MB)",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
writeMb: { writeMb: {
label: "Write (MB)", label: "Write (MB)",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;

2
apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx
View File

@@ -17,7 +17,7 @@ interface Props {
const chartConfig = { const chartConfig = {
usage: { usage: {
label: "CPU Usage", label: "CPU Usage",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;

2
apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx
View File

@@ -16,7 +16,7 @@ interface Props {
const chartConfig = { const chartConfig = {
usedGb: { usedGb: {
label: "Used (GB)", label: "Used (GB)",
color: "hsl(var(--chart-3))", color: "oklch(var(--chart-3))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;

10
apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-usage-chart.tsx
View File

@@ -25,19 +25,19 @@ const chartConfig = {
}, },
images: { images: {
label: "Images", label: "Images",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
containers: { containers: {
label: "Containers", label: "Containers",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
volumes: { volumes: {
label: "Volumes", label: "Volumes",
color: "hsl(var(--chart-3))", color: "oklch(var(--chart-3))",
}, },
buildCache: { buildCache: {
label: "Build Cache", label: "Build Cache",
color: "hsl(var(--chart-4))", color: "oklch(var(--chart-4))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -138,7 +138,7 @@ export const DockerDiskUsageChart = () => {
innerRadius={60} innerRadius={60}
outerRadius={85} outerRadius={85}
strokeWidth={3} strokeWidth={3}
stroke="hsl(var(--background))" stroke="oklch(var(--background))"
minAngle={15} minAngle={15}
> >
{chartData.map((entry) => ( {chartData.map((entry) => (

2
apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx
View File

@@ -19,7 +19,7 @@ interface Props {
const chartConfig = { const chartConfig = {
usage: { usage: {
label: "Memory (GB)", label: "Memory (GB)",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;

4
apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx
View File

@@ -17,11 +17,11 @@ interface Props {
const chartConfig = { const chartConfig = {
inMB: { inMB: {
label: "In (MB)", label: "In (MB)",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
outMB: { outMB: {
label: "Out (MB)", label: "Out (MB)",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;

8
apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx
View File

@@ -27,7 +27,7 @@ interface Props {
const chartConfig = { const chartConfig = {
cpu: { cpu: {
label: "CPU", label: "CPU",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -58,12 +58,12 @@ export const ContainerCPUChart = ({ data }: Props) => {
<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-1))" stopColor="oklch(var(--chart-1))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-1))" stopColor="oklch(var(--chart-1))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
@@ -112,7 +112,7 @@ export const ContainerCPUChart = ({ data }: Props) => {
dataKey="cpu" dataKey="cpu"
type="monotone" type="monotone"
fill="url(#fillCPU)" fill="url(#fillCPU)"
stroke="hsl(var(--chart-1))" stroke="oklch(var(--chart-1))"
strokeWidth={2} strokeWidth={2}
/> />
<ChartLegend <ChartLegend

8
apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx
View File

@@ -33,7 +33,7 @@ interface Props {
const chartConfig = { const chartConfig = {
memory: { memory: {
label: "Memory", label: "Memory",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -73,12 +73,12 @@ export const ContainerMemoryChart = ({ data }: Props) => {
<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-2))" stopColor="oklch(var(--chart-2))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-2))" stopColor="oklch(var(--chart-2))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
@@ -133,7 +133,7 @@ export const ContainerMemoryChart = ({ data }: Props) => {
dataKey="memory" dataKey="memory"
type="monotone" type="monotone"
fill="url(#fillMemory)" fill="url(#fillMemory)"
stroke="hsl(var(--chart-2))" stroke="oklch(var(--chart-2))"
strokeWidth={2} strokeWidth={2}
/> />
<ChartLegend <ChartLegend

16
apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx
View File

@@ -40,11 +40,11 @@ interface FormattedMetric {
const chartConfig = { const chartConfig = {
input: { input: {
label: "Input", label: "Input",
color: "hsl(var(--chart-3))", color: "oklch(var(--chart-3))",
}, },
output: { output: {
label: "Output", label: "Output",
color: "hsl(var(--chart-4))", color: "oklch(var(--chart-4))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -84,24 +84,24 @@ export const ContainerNetworkChart = ({ data }: Props) => {
<linearGradient id="fillInput" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillInput" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-3))" stopColor="oklch(var(--chart-3))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-3))" stopColor="oklch(var(--chart-3))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
<linearGradient id="fillOutput" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillOutput" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-4))" stopColor="oklch(var(--chart-4))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-4))" stopColor="oklch(var(--chart-4))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
@@ -162,7 +162,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
dataKey="input" dataKey="input"
type="monotone" type="monotone"
fill="url(#fillInput)" fill="url(#fillInput)"
stroke="hsl(var(--chart-3))" stroke="oklch(var(--chart-3))"
strokeWidth={2} strokeWidth={2}
/> />
<Area <Area
@@ -170,7 +170,7 @@ export const ContainerNetworkChart = ({ data }: Props) => {
dataKey="output" dataKey="output"
type="monotone" type="monotone"
fill="url(#fillOutput)" fill="url(#fillOutput)"
stroke="hsl(var(--chart-4))" stroke="oklch(var(--chart-4))"
strokeWidth={2} strokeWidth={2}
/> />
<ChartLegend <ChartLegend

8
apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx
View File

@@ -22,7 +22,7 @@ interface CPUChartProps {
const chartConfig = { const chartConfig = {
cpu: { cpu: {
label: "CPU", label: "CPU",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -45,12 +45,12 @@ export function CPUChart({ data }: CPUChartProps) {
<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-1))" stopColor="oklch(var(--chart-1))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-1))" stopColor="oklch(var(--chart-1))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
@@ -99,7 +99,7 @@ export function CPUChart({ data }: CPUChartProps) {
dataKey="cpu" dataKey="cpu"
type="monotone" type="monotone"
fill="url(#fillCPU)" fill="url(#fillCPU)"
stroke="hsl(var(--chart-1))" stroke="oklch(var(--chart-1))"
strokeWidth={2} strokeWidth={2}
/> />
<ChartLegend <ChartLegend

6
apps/dokploy/components/dashboard/monitoring/paid/servers/disk-chart.tsx
View File

@@ -29,14 +29,14 @@ export function DiskChart({ data }: RadialChartProps) {
const chartData = [ const chartData = [
{ {
disk: 25, disk: 25,
fill: "hsl(var(--chart-2))", fill: "oklch(var(--chart-2))",
}, },
]; ];
const chartConfig = { const chartConfig = {
disk: { disk: {
label: "Disk", label: "Disk",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -71,7 +71,7 @@ export function DiskChart({ data }: RadialChartProps) {
dataKey="disk" dataKey="disk"
background background
cornerRadius={10} cornerRadius={10}
fill="hsl(var(--chart-2))" fill="oklch(var(--chart-2))"
/> />
<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}> <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
<Label <Label

8
apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx
View File

@@ -20,7 +20,7 @@ interface MemoryChartProps {
const chartConfig = { const chartConfig = {
Memory: { Memory: {
label: "Memory", label: "Memory",
color: "hsl(var(--chart-2))", color: "oklch(var(--chart-2))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -46,12 +46,12 @@ export function MemoryChart({ data }: MemoryChartProps) {
<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-2))" stopColor="oklch(var(--chart-2))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-2))" stopColor="oklch(var(--chart-2))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
@@ -116,7 +116,7 @@ export function MemoryChart({ data }: MemoryChartProps) {
dataKey="memUsed" dataKey="memUsed"
type="monotone" type="monotone"
fill="url(#fillMemory)" fill="url(#fillMemory)"
stroke="hsl(var(--chart-2))" stroke="oklch(var(--chart-2))"
strokeWidth={2} strokeWidth={2}
name="Memory" name="Memory"
/> />

16
apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx
View File

@@ -22,11 +22,11 @@ interface NetworkChartProps {
const chartConfig = { const chartConfig = {
networkIn: { networkIn: {
label: "Network In", label: "Network In",
color: "hsl(var(--chart-3))", color: "oklch(var(--chart-3))",
}, },
networkOut: { networkOut: {
label: "Network Out", label: "Network Out",
color: "hsl(var(--chart-4))", color: "oklch(var(--chart-4))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -52,24 +52,24 @@ export function NetworkChart({ data }: NetworkChartProps) {
<linearGradient id="fillNetworkIn" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillNetworkIn" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-3))" stopColor="oklch(var(--chart-3))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-3))" stopColor="oklch(var(--chart-3))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
<linearGradient id="fillNetworkOut" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="fillNetworkOut" x1="0" y1="0" x2="0" y2="1">
<stop <stop
offset="5%" offset="5%"
stopColor="hsl(var(--chart-4))" stopColor="oklch(var(--chart-4))"
stopOpacity={0.8} stopOpacity={0.8}
/> />
<stop <stop
offset="95%" offset="95%"
stopColor="hsl(var(--chart-4))" stopColor="oklch(var(--chart-4))"
stopOpacity={0.1} stopOpacity={0.1}
/> />
</linearGradient> </linearGradient>
@@ -121,7 +121,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
dataKey="networkIn" dataKey="networkIn"
type="monotone" type="monotone"
fill="url(#fillNetworkIn)" fill="url(#fillNetworkIn)"
stroke="hsl(var(--chart-3))" stroke="oklch(var(--chart-3))"
strokeWidth={2} strokeWidth={2}
/> />
<Area <Area
@@ -129,7 +129,7 @@ export function NetworkChart({ data }: NetworkChartProps) {
dataKey="networkOut" dataKey="networkOut"
type="monotone" type="monotone"
fill="url(#fillNetworkOut)" fill="url(#fillNetworkOut)"
stroke="hsl(var(--chart-4))" stroke="oklch(var(--chart-4))"
strokeWidth={2} strokeWidth={2}
/> />
<ChartLegend <ChartLegend

2
apps/dokploy/components/dashboard/project/add-template.tsx
View File

@@ -236,7 +236,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
<Button <Button
variant="outline" variant="outline"
className={cn( className={cn(
"w-full sm:w-[200px] justify-between !bg-input", "w-full sm:w-[200px] justify-between !bg-transparent dark:!bg-input/30 !border !border-input !shadow-xs",
)} )}
> >
{isLoadingTags {isLoadingTags

6
apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx
View File

@@ -27,7 +27,7 @@ const chartConfig = {
}, },
count: { count: {
label: "Count", label: "Count",
color: "hsl(var(--chart-1))", color: "oklch(var(--chart-1))",
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@@ -101,9 +101,9 @@ export const RequestDistributionChart = ({
<Area <Area
dataKey="count" dataKey="count"
type="monotone" type="monotone"
fill="hsl(var(--chart-1))" fill="oklch(var(--chart-1))"
fillOpacity={0.4} fillOpacity={0.4}
stroke="hsl(var(--chart-1))" stroke="oklch(var(--chart-1))"
/> />
</AreaChart> </AreaChart>
</ChartContainer> </ChartContainer>

130
apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx
View File

@@ -60,99 +60,99 @@ const DEFAULT_CSS_TEMPLATE = `/* ============================================
/* ---------- Light Mode ---------- */ /* ---------- Light Mode ---------- */
:root { :root {
--background: 0 0% 100%; --background: 1 0 0;
--foreground: 240 10% 3.9%; --foreground: 0.145 0 0;
--card: 0 0% 100%; --card: 1 0 0;
--card-foreground: 240 10% 3.9%; --card-foreground: 0.145 0 0;
--popover: 0 0% 100%; --popover: 1 0 0;
--popover-foreground: 240 10% 3.9%; --popover-foreground: 0.145 0 0;
--primary: 240 5.9% 10%; --primary: 0.205 0 0;
--primary-foreground: 0 0% 98%; --primary-foreground: 0.985 0 0;
--secondary: 240 4.8% 95.9%; --secondary: 0.97 0 0;
--secondary-foreground: 240 5.9% 10%; --secondary-foreground: 0.205 0 0;
--muted: 240 4.8% 95.9%; --muted: 0.97 0 0;
--muted-foreground: 240 3.8% 46.1%; --muted-foreground: 0.556 0 0;
--accent: 240 4.8% 95.9%; --accent: 0.97 0 0;
--accent-foreground: 240 5.9% 10%; --accent-foreground: 0.205 0 0;
--destructive: 0 84.2% 50.2%; --destructive: 0.577 0.245 27.325;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0.985 0 0;
--border: 240 5.9% 90%; --border: 0.922 0 0;
--input: 240 5.9% 90%; --input: 0.922 0 0;
--ring: 240 10% 3.9%; --ring: 0.708 0 0;
--radius: 0.5rem; --radius: 0.625rem;
/* Sidebar */ /* Sidebar */
--sidebar-background: 0 0% 98%; --sidebar: 0.985 0 0;
--sidebar-foreground: 240 5.3% 26.1%; --sidebar-foreground: 0.145 0 0;
--sidebar-primary: 240 5.9% 10%; --sidebar-primary: 0.205 0 0;
--sidebar-primary-foreground: 0 0% 98%; --sidebar-primary-foreground: 0.985 0 0;
--sidebar-accent: 240 4.8% 95.9%; --sidebar-accent: 0.97 0 0;
--sidebar-accent-foreground: 240 5.9% 10%; --sidebar-accent-foreground: 0.205 0 0;
--sidebar-border: 220 13% 91%; --sidebar-border: 0.922 0 0;
--sidebar-ring: 217.2 91.2% 59.8%; --sidebar-ring: 0.708 0 0;
/* Charts */ /* Charts */
--chart-1: 173 58% 39%; --chart-1: 0.646 0.222 41.116;
--chart-2: 12 76% 61%; --chart-2: 0.6 0.118 184.704;
--chart-3: 197 37% 24%; --chart-3: 0.398 0.07 227.392;
--chart-4: 43 74% 66%; --chart-4: 0.828 0.189 84.429;
--chart-5: 27 87% 67%; --chart-5: 0.769 0.188 70.08;
} }
/* ---------- Dark Mode ---------- */ /* ---------- Dark Mode ---------- */
.dark { .dark {
--background: 0 0% 0%; --background: 0.145 0 0;
--foreground: 0 0% 98%; --foreground: 0.985 0 0;
--card: 240 4% 10%; --card: 0.205 0 0;
--card-foreground: 0 0% 98%; --card-foreground: 0.985 0 0;
--popover: 240 10% 3.9%; --popover: 0.205 0 0;
--popover-foreground: 0 0% 98%; --popover-foreground: 0.985 0 0;
--primary: 0 0% 98%; --primary: 0.922 0 0;
--primary-foreground: 240 5.9% 10%; --primary-foreground: 0.205 0 0;
--secondary: 240 3.7% 15.9%; --secondary: 0.269 0 0;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0.985 0 0;
--muted: 240 4% 10%; --muted: 0.269 0 0;
--muted-foreground: 240 5% 64.9%; --muted-foreground: 0.708 0 0;
--accent: 240 3.7% 15.9%; --accent: 0.269 0 0;
--accent-foreground: 0 0% 98%; --accent-foreground: 0.985 0 0;
--destructive: 0 84.2% 50.2%; --destructive: 0.704 0.191 22.216;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0.985 0 0;
--border: 240 3.7% 15.9%; --border: 0.371 0 0;
--input: 240 4% 10%; --input: 0.371 0 0;
--ring: 240 4.9% 83.9%; --ring: 0.556 0 0;
/* Sidebar */ /* Sidebar */
--sidebar-background: 240 5.9% 10%; --sidebar: 0.205 0 0;
--sidebar-foreground: 240 4.8% 95.9%; --sidebar-foreground: 0.985 0 0;
--sidebar-primary: 224.3 76.3% 48%; --sidebar-primary: 0.488 0.243 264.376;
--sidebar-primary-foreground: 0 0% 100%; --sidebar-primary-foreground: 0.985 0 0;
--sidebar-accent: 240 3.7% 15.9%; --sidebar-accent: 0.269 0 0;
--sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-accent-foreground: 0.985 0 0;
--sidebar-border: 240 3.7% 15.9%; --sidebar-border: 0.371 0 0;
--sidebar-ring: 217.2 91.2% 59.8%; --sidebar-ring: 0.556 0 0;
/* Charts */ /* Charts */
--chart-1: 220 70% 50%; --chart-1: 0.488 0.243 264.376;
--chart-2: 340 75% 55%; --chart-2: 0.696 0.17 162.48;
--chart-3: 30 80% 55%; --chart-3: 0.769 0.188 70.08;
--chart-4: 280 65% 60%; --chart-4: 0.627 0.265 303.9;
--chart-5: 160 60% 45%; --chart-5: 0.645 0.246 16.439;
} }
/* ---------- Custom Styles ---------- */ /* ---------- Custom Styles ---------- */

10
apps/dokploy/components/ui/command.tsx
View File

@@ -13,7 +13,7 @@ const Command = React.forwardRef<
<CommandPrimitive <CommandPrimitive
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground p-px", "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className, className,
)} )}
{...props} {...props}
@@ -39,12 +39,12 @@ const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>, React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper=""> <div className="flex h-9 items-center gap-2 border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" /> <Search className="size-4 shrink-0 opacity-50" />
<CommandPrimitive.Input <CommandPrimitive.Input
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className, className,
)} )}
{...props} {...props}
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item <CommandPrimitive.Item
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className, className,
)} )}
{...props} {...props}

3
apps/dokploy/components/ui/input.tsx
View File

@@ -76,8 +76,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input <input
type={inputType} type={inputType}
className={cn( className={cn(
// bg-gray "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 md:text-sm",
"flex h-10 w-full rounded-md bg-input px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50",
isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"), isPassword && (shouldShowGenerator ? "pr-16" : "pr-10"),
className, className,
)} )}

2
apps/dokploy/components/ui/select.tsx
View File

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-input px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 [&>span]:line-clamp-1",
className, className,
)} )}
{...props} {...props}

2
apps/dokploy/components/ui/sidebar.tsx
View File

@@ -528,7 +528,7 @@ const sidebarMenuButtonVariants = cva(
variant: { variant: {
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
outline: outline:
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", "bg-background shadow-[0_0_0_1px_oklch(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_oklch(var(--sidebar-accent))]",
}, },
size: { size: {
default: "h-8 text-sm", default: "h-8 text-sm",

4
apps/dokploy/components/ui/switch.tsx
View File

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<SwitchPrimitives.Root <SwitchPrimitives.Root
className={cn( className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/80", "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
className, className,
)} )}
{...props} {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
> >
<SwitchPrimitives.Thumb <SwitchPrimitives.Thumb
className={cn( className={cn(
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0", "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>

2
apps/dokploy/pages/_app.tsx
View File

@@ -48,7 +48,7 @@ const MyApp = ({
disableTransitionOnChange disableTransitionOnChange
forcedTheme={Component.theme} forcedTheme={Component.theme}
> >
<NextTopLoader color="hsl(var(--sidebar-ring))" /> <NextTopLoader color="oklch(var(--sidebar-ring))" />
<WhitelabelingProvider /> <WhitelabelingProvider />
<Toaster richColors /> <Toaster richColors />
<SearchCommand /> <SearchCommand />

140
apps/dokploy/styles/globals.css
View File

@@ -5,97 +5,97 @@
@layer base { @layer base {
:root { :root {
--terminal-paste: rgba(0, 0, 0, 0.2); --terminal-paste: rgba(0, 0, 0, 0.2);
--background: 0 0% 100%; --background: 1 0 0;
--foreground: 240 10% 3.9%; --foreground: 0.145 0 0;
--card: 0 0% 100%; --card: 1 0 0;
--card-foreground: 240 10% 3.9%; --card-foreground: 0.145 0 0;
--popover: 0 0% 100%; --popover: 1 0 0;
--popover-foreground: 240 10% 3.9%; --popover-foreground: 0.145 0 0;
--primary: 240 5.9% 10%; --primary: 0.205 0 0;
--primary-foreground: 0 0% 98%; --primary-foreground: 0.985 0 0;
--secondary: 240 4.8% 95.9%; --secondary: 0.97 0 0;
--secondary-foreground: 240 5.9% 10%; --secondary-foreground: 0.205 0 0;
--muted: 240 4.8% 95.9%; --muted: 0.97 0 0;
--muted-foreground: 240 3.8% 46.1%; --muted-foreground: 0.556 0 0;
--accent: 240 4.8% 95.9%; --accent: 0.97 0 0;
--accent-foreground: 240 5.9% 10%; --accent-foreground: 0.205 0 0;
--destructive: 0 84.2% 50.2%; --destructive: 0.577 0.245 27.325;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0.985 0 0;
--border: 240 5.9% 90%; --border: 0.922 0 0;
--input: 240 5.9% 90%; --input: 0.922 0 0;
--ring: 240 10% 3.9%; --ring: 0.708 0 0;
--radius: 0.5rem; --radius: 0.625rem;
--overlay: rgba(0, 0, 0, 0.2); --overlay: rgba(0, 0, 0, 0.2);
--chart-1: 173 58% 39%; --chart-1: 0.646 0.222 41.116;
--chart-2: 12 76% 61%; --chart-2: 0.6 0.118 184.704;
--chart-3: 197 37% 24%; --chart-3: 0.398 0.07 227.392;
--chart-4: 43 74% 66%; --chart-4: 0.828 0.189 84.429;
--chart-5: 27 87% 67%; --chart-5: 0.769 0.188 70.08;
--sidebar-background: 0 0% 98%; --sidebar: 0.985 0 0;
--sidebar-foreground: 240 5.3% 26.1%; --sidebar-foreground: 0.145 0 0;
--sidebar-primary: 240 5.9% 10%; --sidebar-primary: 0.205 0 0;
--sidebar-primary-foreground: 0 0% 98%; --sidebar-primary-foreground: 0.985 0 0;
--sidebar-accent: 240 4.8% 95.9%; --sidebar-accent: 0.97 0 0;
--sidebar-accent-foreground: 240 5.9% 10%; --sidebar-accent-foreground: 0.205 0 0;
--sidebar-border: 220 13% 91%; --sidebar-border: 0.922 0 0;
--sidebar-ring: 217.2 91.2% 59.8%; --sidebar-ring: 0.708 0 0;
} }
.dark { .dark {
--terminal-paste: rgba(255, 255, 255, 0.2); --terminal-paste: rgba(255, 255, 255, 0.2);
--background: 0 0% 0%; --background: 0.145 0 0;
--foreground: 0 0% 98%; --foreground: 0.985 0 0;
--card: 240 4% 10%; --card: 0.205 0 0;
--card-foreground: 0 0% 98%; --card-foreground: 0.985 0 0;
--popover: 240 10% 3.9%; --popover: 0.205 0 0;
--popover-foreground: 0 0% 98%; --popover-foreground: 0.985 0 0;
--primary: 0 0% 98%; --primary: 0.922 0 0;
--primary-foreground: 240 5.9% 10%; --primary-foreground: 0.205 0 0;
--secondary: 240 3.7% 15.9%; --secondary: 0.269 0 0;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0.985 0 0;
--muted: 240 4% 10%; --muted: 0.269 0 0;
--muted-foreground: 240 5% 64.9%; --muted-foreground: 0.708 0 0;
--accent: 240 3.7% 15.9%; --accent: 0.269 0 0;
--accent-foreground: 0 0% 98%; --accent-foreground: 0.985 0 0;
--destructive: 0 84.2% 50.2%; --destructive: 0.704 0.191 22.216;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0.985 0 0;
--border: 240 3.7% 15.9%; --border: 0.371 0 0;
--input: 240 4% 10%; --input: 0.371 0 0;
--ring: 240 4.9% 83.9%; --ring: 0.556 0 0;
--overlay: rgba(0, 0, 0, 0.5); --overlay: rgba(0, 0, 0, 0.5);
--chart-1: 220 70% 50%; --chart-1: 0.488 0.243 264.376;
--chart-5: 160 60% 45%; --chart-2: 0.696 0.17 162.48;
--chart-3: 30 80% 55%; --chart-3: 0.769 0.188 70.08;
--chart-4: 280 65% 60%; --chart-4: 0.627 0.265 303.9;
--chart-2: 340 75% 55%; --chart-5: 0.645 0.246 16.439;
--sidebar-background: 240 5.9% 10%; --sidebar: 0.205 0 0;
--sidebar-foreground: 240 4.8% 95.9%; --sidebar-foreground: 0.985 0 0;
--sidebar-primary: 224.3 76.3% 48%; --sidebar-primary: 0.488 0.243 264.376;
--sidebar-primary-foreground: 0 0% 100%; --sidebar-primary-foreground: 0.985 0 0;
--sidebar-accent: 240 3.7% 15.9%; --sidebar-accent: 0.269 0 0;
--sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-accent-foreground: 0.985 0 0;
--sidebar-border: 240 3.7% 15.9%; --sidebar-border: 0.371 0 0;
--sidebar-ring: 217.2 91.2% 59.8%; --sidebar-ring: 0.556 0 0;
} }
} }
@@ -118,13 +118,13 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: hsl(var(--border)); background: oklch(var(--border));
border-radius: 0.3125rem; border-radius: 0.3125rem;
} }
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent; scrollbar-color: oklch(var(--border)) transparent;
} }
} }
@@ -216,7 +216,7 @@
@layer utilities { @layer utilities {
.custom-logs-scrollbar { .custom-logs-scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: hsl(var(--muted-foreground)) transparent; scrollbar-color: oklch(var(--muted-foreground)) transparent;
} }
.custom-logs-scrollbar::-webkit-scrollbar { .custom-logs-scrollbar::-webkit-scrollbar {
@@ -229,12 +229,12 @@
} }
.custom-logs-scrollbar::-webkit-scrollbar-thumb { .custom-logs-scrollbar::-webkit-scrollbar-thumb {
background-color: hsl(var(--muted-foreground) / 0.3); background-color: oklch(var(--muted-foreground) / 0.3);
border-radius: 20px; border-radius: 20px;
} }
.custom-logs-scrollbar::-webkit-scrollbar-thumb:hover { .custom-logs-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: hsl(var(--muted-foreground) / 0.5); background-color: oklch(var(--muted-foreground) / 0.5);
} }
} }

54
apps/dokploy/tailwind.config.ts
View File

@@ -32,48 +32,48 @@ const config = {
"10xl": "105rem", "10xl": "105rem",
}, },
colors: { colors: {
border: "hsl(var(--border))", border: "oklch(var(--border) / <alpha-value>)",
input: "hsl(var(--input))", input: "oklch(var(--input) / <alpha-value>)",
ring: "hsl(var(--ring))", ring: "oklch(var(--ring) / <alpha-value>)",
background: "hsl(var(--background))", background: "oklch(var(--background) / <alpha-value>)",
foreground: "hsl(var(--foreground))", foreground: "oklch(var(--foreground) / <alpha-value>)",
primary: { primary: {
DEFAULT: "hsl(var(--primary))", DEFAULT: "oklch(var(--primary) / <alpha-value>)",
foreground: "hsl(var(--primary-foreground))", foreground: "oklch(var(--primary-foreground) / <alpha-value>)",
}, },
secondary: { secondary: {
DEFAULT: "hsl(var(--secondary))", DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
foreground: "hsl(var(--secondary-foreground))", foreground: "oklch(var(--secondary-foreground) / <alpha-value>)",
}, },
destructive: { destructive: {
DEFAULT: "hsl(var(--destructive))", DEFAULT: "oklch(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground))", foreground: "oklch(var(--destructive-foreground) / <alpha-value>)",
}, },
muted: { muted: {
DEFAULT: "hsl(var(--muted))", DEFAULT: "oklch(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground))", foreground: "oklch(var(--muted-foreground) / <alpha-value>)",
}, },
accent: { accent: {
DEFAULT: "hsl(var(--accent))", DEFAULT: "oklch(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground))", foreground: "oklch(var(--accent-foreground) / <alpha-value>)",
}, },
popover: { popover: {
DEFAULT: "hsl(var(--popover))", DEFAULT: "oklch(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground))", foreground: "oklch(var(--popover-foreground) / <alpha-value>)",
}, },
card: { card: {
DEFAULT: "hsl(var(--card))", DEFAULT: "oklch(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground))", foreground: "oklch(var(--card-foreground) / <alpha-value>)",
}, },
sidebar: { sidebar: {
DEFAULT: "hsl(var(--sidebar-background))", DEFAULT: "oklch(var(--sidebar) / <alpha-value>)",
foreground: "hsl(var(--sidebar-foreground))", foreground: "oklch(var(--sidebar-foreground) / <alpha-value>)",
primary: "hsl(var(--sidebar-primary))", primary: "oklch(var(--sidebar-primary) / <alpha-value>)",
"primary-foreground": "hsl(var(--sidebar-primary-foreground))", "primary-foreground": "oklch(var(--sidebar-primary-foreground) / <alpha-value>)",
accent: "hsl(var(--sidebar-accent))", accent: "oklch(var(--sidebar-accent) / <alpha-value>)",
"accent-foreground": "hsl(var(--sidebar-accent-foreground))", "accent-foreground": "oklch(var(--sidebar-accent-foreground) / <alpha-value>)",
border: "hsl(var(--sidebar-border))", border: "oklch(var(--sidebar-border) / <alpha-value>)",
ring: "hsl(var(--sidebar-ring))", ring: "oklch(var(--sidebar-ring) / <alpha-value>)",
}, },
}, },
borderRadius: { borderRadius: {

29
packages/server/package.json
View File

@@ -1,21 +1,32 @@
{ {
"name": "@dokploy/server", "name": "@dokploy/server",
"version": "1.0.0", "version": "1.0.0",
"main": "./src/index.ts", "main": "./dist/index.js",
"type": "module", "type": "module",
"exports": { "exports": {
".": "./src/index.ts", ".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs.js"
},
"./db": { "./db": {
"import": "./src/db/index.ts", "import": "./dist/db/index.js",
"require": "./dist/db/index.cjs.js" "require": "./dist/db/index.cjs.js"
}, },
"./setup/*": { "./*": {
"import": "./src/setup/*.ts", "import": "./dist/*",
"require": "./dist/setup/index.cjs.js" "require": "./dist/*.cjs"
}, },
"./constants": { "./dist": {
"import": "./src/constants/index.ts", "import": "./dist/index.js",
"require": "./dist/constants.cjs.js" "require": "./dist/index.cjs.js"
},
"./dist/db": {
"import": "./dist/db/index.js",
"require": "./dist/db/index.cjs.js"
},
"./dist/db/schema": {
"import": "./dist/db/schema/index.js",
"require": "./dist/db/schema/index.cjs.js"
} }
}, },
"scripts": { "scripts": {