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

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

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