Reset theme css.

I acknowledge the problem (CSS leaking from other themes), but I’m not sure if everything here is the right solution. There are some things I wouldn’t do, like defining all sizes and fonts in px. I need to invest some time on reviewing it properly and finding alternatives, but I wonder if this should go beyond the CSS itself and should get into the libraries reuse. I'll leave this as NR so other people have the chance to jump in and share their thoughts.

we may also define it as rem based but with own variable
using css min https://developer.mozilla.org/en-US/docs/Web/CSS/min

```
:root {
--admin-toolbar-rem: min(1rem, 16px);

...

--admin-toolbar-space-xl: var(--space-xl, calc(2 * var(--admin-toolbar-rem)));
}

this is how we can still use rem and be secured in themes where root font size is 10px

As discussed in Slack we can't reset things in root like this because it would mess up with front-end styles. A potential solution would be to use a generic admin class like .drupal-admin and reset styles only there. We need to find a way to ensure specificity here though.

Yes, this is exactly what i did here.
https://git.drupalcode.org/project/navigation/-/merge_requests/129/diffs...

This reset not for root but for special data attribute. which reset styles only in sidebar.

```
[data-admin-ui-initial-styles] {
--admin-toolbar-rem: min(1rem, 16px);

...

--admin-toolbar-space-xl: var(--space-xl, calc(2 * var(--admin-toolbar-rem)));
}
```

Thanks for all the work on this! @ckrina and I briefly look at this on a call, and then I dove deeper into it today and left a couple comments.

The main points are

• We cannot use pixels as units. This is an accessibility requirement to pass the core accessibility gate. I understand that themes might set different root font sizes, but if we determine that's problematic (I personally think that's a problem for that theme), we can switch to use EMs at a different point.
• We should emulate the reset at https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/misc/dialog.... This is well tested and should use revert instead of the initial property.
• Talking with @ckrina yesterday, she was wanting to make more generic reset that could also be used on the toolbar. Assuming we go that route we should do something like this:
  

  .drupal-admin-styles:is(*, #reset) *:where(:not(svg, svg *)) {
    all: revert;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
  
    &::after,
    &::before {
      all: revert;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    }
  }
  

  in the example above the :is(*, #reset) adds extra specificity equal to the strongest selector in the :is() pseudo-class, which in this case is is an ID. So the selector will match the .drupal-admin-styles class, but have the specificity of an ID.

Thank you fo review!

Could you please check approach in #6 ?

Because bootstrap in basic setup in 10 px on root.

I see a lot of maybe outdated technics but still usable in web:

https://www.google.com/search?q=The+62.5%25+trick

finnsky → changed the visibility of the branch 3402592-reset-theme-css to hidden.

@mherchel @ckrina

Hello!

Please take a look at ^ #12

1. For test you can install Umami. and set its base font size 10px;

html {
  font-size: 62.5%;
}

Now we sure that mix font size will be always 16px min. And never 10. So we will not get 7.5px size for links.

2. Added revert approach from linked MR

3. Keeped postcss pix to rem. but we don't need it basically now.

4. Grouped border-box cleanup in single place.

Please review.

Moving to NW per comments on the MR.

+1 to the points brought up in #10.

Not using px prevents a11y breaks. I confirmed the current MR still allows resizing fonts via browser settings and custon stylesheets. These were the two accessibility risks that came to mind and neither appear to be a problem.

I also agree that issues such as the one in Bootstrap are the responsibility of the theme, but I highly recommend offering an MR to popular themes that resize the nav text to unusable sizes. Why require several theme maintainers to figure out a problem that several people in this issue alone would already know how to address.

@bnjmnm thank you for review.

In exact this Bootstrap theme OOB is CDN:
https://git.drupalcode.org/project/bootstrap/-/blob/8.x-3.x/src/Plugin/S...

Idk how MR will help there

ckrina → closed merge request !174

ckrina → reopened merge request !174

All what we can do at the moment ;)
https://www.drupal.org/project/bootstrap/issues/3422731 ✨ EOL Bootstrap 3 message Active

Mithun S → made their first commit to this issue’s fork.

Addressed one of the review comments on the PR and pushed a commit for the same. Thank you!

And instead of .drupal-admin-styles, it would be the [data-drupal-admin-styles] attribute, correct?

Exactly :)

About the #reset code @mherchel used, I'm not sure what he meant. So not sure about using #admin-toolbar because several totally independent admin elements will be added, unless it's on a really top level.

Pushed some changes to rename the selector and cleaned up the specificity of the selector after renaming. Let me know if this is the right way to approach the selector, @mherchel / @ckrina!

@finnsky Thanks for the review and for pointing out that the resets were resetting more than just the sidebar. I updated it to follow what you posted in the MR so take a look again. I checked it in Bootstrap, Umami, and Olivero and the resets are now staying in the admin toolbar.

Great work! Thank you!

Looks good to me

ckrina → changed the visibility of the branch 3402592-reset-css to hidden.

ckrina → changed the visibility of the branch 3402592-reset-css to active.

ckrina → closed merge request !174

ckrina → reopened merge request !174

Fixed! Thanks all for the work here :)

Automatically closed - issue fixed for 2 weeks with no activity.