DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests 1 Actions Projects 1 Wiki Activity

button-component #29

Merged
stne3960 merged 22 commits from button-component into main 2025-12-12 11:52:31 +01:00
Conversation 6 Commits 22 Files Changed 24 +22 -16
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 77f849b75c - Show all commits

38
frontend/src/components/Button/Button.tsx
View File

@ -11,27 +11,33 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
const variantClasses: Record<ButtonVariant, string> = {
primary: `
bg-primary text-base-canvas
border border-primary
hover(bg-secondary text-base-canvas border border-primary)
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
bg-primary text-base-canvas
border border-primary
hover:bg-secondary hover:text-base-canvas
hover:border hover:border-primary
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border focus-visible:border-primary
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
secondary: `
bg-base-canvas text-base-ink-strong
secondary: `bg-base-canvas text-base-ink-strong
border-solid [border-width:var(--border-width-sm)] border-base-ink-soft
hover(bg-base-canvas text-base-ink-strong border-base-ink-medium)
focus-visible(bg-base-canvas text-base-ink-strong border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
`.trim(),
hover:bg-base-canvas hover:text-base-ink-strong
hover:border-base-ink-medium
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border-primary
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
red: `
bg-other-red-100 text-su-white
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
bg-other-red-100 text-su-white
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border-primary focus-visible:border
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
green: `
bg-other-green text-su-white
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border-primary focus-visible:border
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
};
@ -62,7 +68,7 @@ export default function Button({
sizeClasses[size],
className,
]
.filter(Boolean) // Filter out empty strings and undefined values so they won't pollute the class list
.filter(Boolean)
.join(" ");
return (