vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

feat: change color palette from blue to amber and reduce number of font sizes

Browse source 
- color change blue theme -> amber theme
- text color changes: grays to black & few grays
- font changes: less sizes (small -> normal)
This commit is contained in:
Vojtěch Mareš 2023-01-10 10:07:24 +01:00
parent 5f2c7d313b
commit 8d0450011a
14 changed files with 72 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/Button.tsx
View file

@ -11,33 +11,33 @@ const baseStyles = {
const variantStyles = {
solid: {
slate:
"bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
blue: "bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600",
black:
"bg-black text-white hover:bg-slate-700 active:bg-slate-800 focus-visible:outline-slate-900",
amber:
"bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-800 focus-visible:outline-amber-500",
white:
"bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
"bg-white text-black hover:bg-amber-50 active:bg-amber-200 focus-visible:outline-white",
},
outline: {
slate:
"ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300",
black:
"ring-slate-200 text-black hover:ring-slate-300 active:bg-slate-100 focus-visible:outline-amber-500 focus-visible:ring-slate-300",
white:
"ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white",
// Supress TypeScript error
blue: "", // TODO: fix properly
"ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 focus-visible:outline-white",
amber: "", // Outline buttons cannot be amber
},
};
const transitionStyle = "transition duration-150 ease-in-out";
const sizeStyles = {
default: "px-4 py-2 text-sm",
medium: "px-4 py-2 text-sm",
large: "px-8 py-4 text-base",
};
type Props = {
variant?: "solid" | "outline";
color?: "slate" | "white" | "blue";
size?: "default" | "large";
color?: "black" | "white" | "amber";
size?: "medium" | "large";
className?: string;
href?: string;
children?: ReactNode;
@ -45,12 +45,16 @@ type Props = {
export function Button({
variant = "solid",
color = "slate",
size = "default",
color = "black",
size = "medium",
className,
href,
children,
}: Props) {
if (variant === "outline" && color === "amber") {
throw new Error("Outline buttons cannot be amber");
}
className = clsx(
baseStyles[variant],
variantStyles[variant][color],