Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

adding dark mode to feat/refresh

Browse Source
This commit is contained in:
Doug Andrade
2023-06-11 01:50:19 -04:00
parent b0e364acf4
commit 877a579533
21 changed files with 217 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/ui/primitives/card.tsx
View File

@ -10,10 +10,22 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
spotlight?: boolean;
gradient?: boolean;
degrees?: number;
lightMode?: boolean;
};
const Card = React.forwardRef<HTMLDivElement, CardProps>(
({ className, children, gradient = false, spotlight = false, degrees = 120, ...props }, ref) => {
(
{
className,
children,
gradient = false,
spotlight = false,
degrees = 120,
lightMode = true,
...props
},
ref,
) => {
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);
@ -34,12 +46,12 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
} as React.CSSProperties
}
className={cn(
'group relative rounded-lg border-2 bg-white/50 text-slate-900 backdrop-blur-[2px]',
'bg-background text-foreground dark:hover:border-documenso group relative rounded-lg border-2 backdrop-blur-[2px]',
{
'gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.primary.DEFAULT/50%)_5%,theme(colors.card.DEFAULT/80%)_30%)]':
gradient,
'gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.documenso.DEFAULT/50%)_5%,theme(colors.border/80%)_30%)]':
gradient && lightMode,
'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]':
true,
lightMode,
},
className,
)}

2
packages/ui/styles/theme.css
View File

@ -70,7 +70,7 @@
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--ring: 95.08 71.08% 67.45%;
--radius: 0.5rem;
}