Start cleaning up our CSS reset/defaults.
Review Request #15237 — Created Aug. 18, 2026 and submitted — Latest diff uploaded
This change starts work on some cleanup of our legacy CSS. This starts
with the creation of three@layers:
@layer resetcontains our basic rules for body padding and scroll
behavior.@layer defaultssets global defaults for elements (and includes our
icon definitions so it's easy to override sizes when we want).@layer thirdpartyhas rules from third party packages, including
ink.As part of this, I've eliminated a few global rules that were either
obsolete or just plain incorrect:
-
img { border: 0 }only existed because IE10 and below would add
borders to images inside links. -
h1 { font-size: 10pt }was being applied in a few situations. A
bunch of our legacy{% box %}elements used it, mostly inside
templates/admin/manual-updates/..., the error templates, and OAuth
authorization flow. I've added a scoped rule for.box-inner h1, and
fixed up some layout issues, especially with the OAuth template. We
should just replace most of this withInk.Alertin a later cleanup. -
h3 { margin-top: 2em }was visible in a few places, including the
aforementioned manual-updates pages, as well as some of the my-account
list views. In all of these places, it looks better without that very
large margin.templates/admin/database.htmlalso had bare<h2>and
<h3>elements in it, but after a trip down the rabbit hole, I've
verified that this template is actually completely dead, so I've
removed it. -
buttonwas applying global styles, and only conditioned on the lack
of.ink-c-button. I've changed this to be:not([class*="-c-"])so
that any button that has opted into a component class won't have to
fight against that. Legacy classes like.primaryand.largestill
have these defaults applied. -
Modal box buttons also had a bunch of overridden styles that were
always applying, including digging deep into ink button groups. I've
rewritten these to use flexboxes instead of margins.
Testing Done:
- Ran unit tests.
- Spent a bunch of time going through everything with a fine-toothed
comb to verify that these changes were correct and did not break
anything.
- Ran unit tests.
- Spent a bunch of time going through everything with a fine-toothed
comb to verify that these changes were correct and did not break
anything.