Skip to content

Commit a791e0c

Browse files
az108claude
andcommitted
General: Trim the bare button class to what Tailwind does not already reset
Six of its nine declarations repeated Tailwind's preflight, which already gives buttons margin, padding and border from the universal reset and font, colour and background from the form element rule. Repeating them bought nothing and only widened the set of properties the class could take away from the utilities on the same element, which is how the sidebar lost its highlight and its padding. What is left is what preflight does not cover: buttons come out centred, and since v4 they carry a default cursor rather than a pointer. Ten of the eleven call sites already pass cursor-pointer themselves, so that one is close to redundant too, but rating.component relies on it. appearance: none went with the rest. It was overriding preflight's appearance: button, and with background and border already flat there is no native chrome left for it to suppress. Confirmed against the compiled stylesheet: the rule is now two declarations, the preflight rules that cover the removed ones are still present, and btn-bare stays in the components layer with the utilities after it. Verified: 2031 client tests, typecheck, eslint with no errors, a11y lint, the production build and prettier. Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 73b7019 commit a791e0c

1 file changed

Lines changed: 9 additions & 15 deletions

File tree

src/main/webapp/content/scss/global.scss

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,17 @@
99
@plugin "tailwindcss-primeui";
1010
@custom-variant dark (&:where(.tum-apply-dark-mode, .tum-apply-dark-mode *)); //dark mode configuration
1111

12-
/* Visual reset for native <button> elements used purely as clickable containers
13-
(cards, list rows, icon triggers). Strips default chrome so they inherit
14-
surrounding typography and layout, while keeping their accessibility benefits.
15-
16-
Declared in the components layer on purpose. Unlayered rules outrank every layered
17-
one no matter their specificity, so leaving this outside a layer would let the reset
18-
beat the Tailwind utilities on the same element and silently drop their background,
19-
padding and colour. The components layer sits before utilities, so utilities win. */
12+
/* For native <button> elements used purely as clickable containers (cards, list rows,
13+
icon triggers). Only covers what Tailwind's preflight leaves behind: buttons come out
14+
centred and, since v4, with a default cursor. Background, border, padding, margin, font
15+
and colour are already reset there, so repeating them here only creates something that
16+
can fight the utilities on the same element.
17+
18+
Kept in the components layer for that same reason. Unlayered rules outrank every layered
19+
one whatever their specificity, so declaring this outside a layer would let it beat the
20+
utilities instead. Components sits before utilities, so utilities win. */
2021
@layer components {
2122
.btn-bare {
22-
appearance: none;
23-
background: transparent;
24-
border: 0;
25-
padding: 0;
26-
margin: 0;
27-
font: inherit;
28-
color: inherit;
2923
text-align: inherit;
3024
cursor: pointer;
3125
}

0 commit comments

Comments
 (0)