Skip to content

Commit 493f4c5

Browse files
sea-snakesea-snake
authored
Use classes instead of component for buttons. (#3529)
Use classes instead of component for buttons. # Changes - Create `styles/button.css` with `btn` utility classes. - Use these new utility classes in `Button` component - Next up: deprecate the `Button` component, use the utility classes directly on `<button>` and `<a>`. # Tests Manually verified that all buttons on various pages are unchanged.
1 parent 6435a0e commit 493f4c5

File tree

3 files changed

+123
-35
lines changed

3 files changed

+123
-35
lines changed

‎src/frontend/src/lib/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "tailwindcss" source("../");
2+
@import "./styles/button.css";
23

34
@plugin "@tailwindcss/forms";
45

‎src/frontend/src/lib/components/ui/Button.svelte‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
// TODO: Deprecate this component, use classes directly on <button> and <a>
23
import ButtonOrAnchor from "$lib/components/utils/ButtonOrAnchor.svelte";
34
import type {
45
HTMLAnchorAttributes,
@@ -33,45 +34,20 @@
3334
bind:element
3435
{...props}
3536
class={[
36-
"box-border flex items-center justify-center justify-self-start rounded-md font-semibold whitespace-nowrap opacity-100 not-disabled:cursor-pointer",
37+
"btn",
3738
{
38-
primary: [
39-
danger
40-
? "bg-bg-error-solid text-white"
41-
: "bg-bg-brand-solid text-text-primary-inversed",
42-
danger
43-
? "not-disabled:hover:bg-bg-error-solid_hover"
44-
: "not-disabled:hover:bg-bg-brand-solid_hover",
45-
"disabled:bg-bg-disabled disabled:text-fg-disabled",
46-
],
47-
secondary: [
48-
"bg-bg-primary border",
49-
danger
50-
? "border-border-error_subtle text-text-error-primary"
51-
: "border-border-secondary text-fg-primary",
52-
danger
53-
? "not-disabled:hover:bg-bg-error-primary text-text-error-primary_hover"
54-
: "not-disabled:hover:bg-bg-primary_hover",
55-
"disabled:border-border-disabled disabled:text-fg-disabled",
56-
],
57-
tertiary: [
58-
danger ? "text-text-error-primary" : "text-fg-primary",
59-
danger
60-
? "not-disabled:hover:bg-bg-error-primary text-text-error-primary_hover"
61-
: "not-disabled:hover:bg-bg-primary_hover",
62-
"disabled:text-fg-disabled",
63-
],
39+
primary: "btn-primary",
40+
secondary: "btn-secondary",
41+
tertiary: "btn-tertiary",
6442
}[variant],
65-
"focus-visible:ring-offset-bg-primary outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
66-
danger
67-
? "focus-visible:ring-focus-ring-error"
68-
: "focus-visible:ring-focus-ring",
6943
{
70-
sm: iconOnly ? "size-9" : "h-9 gap-1.5 px-3 text-sm",
71-
md: iconOnly ? "size-10" : "h-10 gap-1.5 px-3.5 text-sm",
72-
lg: iconOnly ? "size-11" : "h-11 gap-2.5 px-4 text-base",
73-
xl: iconOnly ? "size-12" : "h-12 gap-2.5 px-4.5 text-base",
44+
sm: "btn-sm",
45+
md: "btn-md",
46+
lg: "btn-lg",
47+
xl: "btn-xl",
7448
}[size],
49+
danger && "btn-danger",
50+
iconOnly && "btn-icon",
7551
className,
7652
]}
7753
>

‎src/frontend/src/lib/styles/button.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/* ------------------------------------------- */
2+
/* Base Button */
3+
/* ------------------------------------------- */
4+
@utility btn {
5+
/* Base */
6+
@apply box-border flex items-center justify-center justify-self-start;
7+
@apply rounded-md font-semibold whitespace-nowrap opacity-100;
8+
@apply not-disabled:cursor-pointer;
9+
10+
/* Focus */
11+
@apply outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
12+
@apply focus-visible:ring-offset-bg-primary focus-visible:ring-focus-ring;
13+
14+
/* Defaults */
15+
@apply btn-primary btn-md;
16+
}
17+
18+
/* ------------------------------------------- */
19+
/* Primary Variant */
20+
/* ------------------------------------------- */
21+
@utility btn-primary {
22+
/* Base */
23+
@apply bg-bg-brand-solid text-text-primary-inversed;
24+
25+
/* Hover */
26+
@apply hover:not-disabled:bg-bg-brand-solid_hover;
27+
28+
/* Disabled */
29+
@apply disabled:bg-bg-disabled disabled:text-fg-disabled;
30+
}
31+
32+
/* ------------------------------------------- */
33+
/* Secondary Variant */
34+
/* ------------------------------------------- */
35+
@utility btn-secondary {
36+
/* Base */
37+
@apply bg-bg-primary border-border-secondary text-fg-primary border;
38+
39+
/* Hover */
40+
@apply hover:not-disabled:bg-bg-primary_hover;
41+
42+
/* Disabled */
43+
@apply disabled:border-border-disabled disabled:text-fg-disabled;
44+
}
45+
46+
/* ------------------------------------------- */
47+
/* Tertiary Variant */
48+
/* ------------------------------------------- */
49+
@utility btn-tertiary {
50+
/* Base */
51+
@apply text-fg-primary bg-transparent;
52+
53+
/* Hover */
54+
@apply hover:not-disabled:bg-bg-primary_hover;
55+
56+
/* Disabled */
57+
@apply disabled:text-fg-disabled;
58+
}
59+
60+
/* ------------------------------------------- */
61+
/* Sizes */
62+
/* ------------------------------------------- */
63+
@utility btn-sm {
64+
@apply h-9 gap-1.5 px-3 text-sm;
65+
}
66+
67+
@utility btn-md {
68+
@apply h-10 gap-1.5 px-3.5 text-sm;
69+
}
70+
71+
@utility btn-lg {
72+
@apply h-11 gap-2.5 px-4 text-base;
73+
}
74+
75+
@utility btn-xl {
76+
@apply h-12 gap-2.5 px-4.5 text-base;
77+
}
78+
79+
@utility btn-icon {
80+
@apply aspect-square !gap-0 !p-0;
81+
}
82+
83+
/* ------------------------------------------- */
84+
/* Danger Variants */
85+
/* ------------------------------------------- */
86+
@utility btn-danger {
87+
@apply focus-visible:ring-focus-ring-error;
88+
89+
/* Defaults */
90+
@apply bg-bg-error-solid text-white;
91+
@apply hover:not-disabled:bg-bg-error-solid_hover;
92+
@apply disabled:bg-bg-disabled disabled:text-fg-disabled;
93+
}
94+
95+
.btn-primary.btn-danger {
96+
@apply bg-bg-error-solid text-white;
97+
@apply hover:not-disabled:bg-bg-error-solid_hover;
98+
@apply disabled:bg-bg-disabled disabled:text-fg-disabled;
99+
}
100+
101+
.btn-secondary.btn-danger {
102+
@apply border-border-error_subtle bg-bg-primary text-text-error-primary border;
103+
@apply hover:not-disabled:bg-bg-error-primary hover:not-disabled:text-text-error-primary_hover;
104+
@apply disabled:border-border-disabled disabled:text-fg-disabled;
105+
}
106+
107+
.btn-tertiary.btn-danger {
108+
@apply text-text-error-primary;
109+
@apply hover:not-disabled:bg-bg-error-primary hover:not-disabled:text-text-error-primary_hover;
110+
@apply disabled:text-fg-disabled;
111+
}

0 commit comments

Comments
 (0)