• 
      

    Start cleaning up our CSS reset/defaults.

    Review Request #15237 — Created Aug. 18, 2026 and submitted

    Information

    Review Board
    release-9.x

    Reviewers

    This change starts work on some cleanup of our legacy CSS. This starts
    with the creation of three @layers:

    1. @layer reset contains our basic rules for body padding and scroll
      behavior.
    2. @layer defaults sets global defaults for elements (and includes our
      icon definitions so it's easy to override sizes when we want).
    3. @layer thirdparty has 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 with Ink.Alert in 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.html also 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.

    • button was 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 .primary and .large still
      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.
    Summary ID
    Start cleaning up our CSS reset/defaults.
    This change starts work on some cleanup of our legacy CSS. This starts with the creation of three `@layer`s: 1. `@layer reset` contains our basic rules for body padding and scroll behavior. 2. `@layer defaults` sets global defaults for elements (and includes our icon definitions so it's easy to override sizes when we want). 3. `@layer thirdparty` has 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 with `Ink.Alert` in 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.html` also 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. * `button` was 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 `.primary` and `.large` still 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.
    ptwnozsszynolpnsntsxvnlvunntkqop
    chipx86
    1. It's a brave new world. Should be a nice cleanup.

      1. Just wait until we can use @scope

    2. 
        
    david
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-9.x (5f1d374)