Claro - fix issue with icon sizes

I followed the procedures, however the outcome is the same as with the seven then claro theme.
I didn't experience any icon scaling problems.
Please see the following screenshot for reference.

Hello @2dareis2do

There are lots of differences between major Drupal versions including styles so in your case, styles are conflicting or overwriting.
The issue is not with default installation.

Hi @pradipmodh13. I believe the issue I was having stems from how I am adjusting the base font size set on the root or html element. Not sure what adjustment you made between seven and claro. I am guessing you made the same. I cannot really see how you are adjusting this is your screenshots?

I can see on my install, claro the admin theme has a base font size is set to 100% which I understand is 16px in most browsers. However if you set to say 200% then you will probably be able to reproduce and the icons will likely scale disproportionately.

@ravi kant I guess this is not really a major issue. As you say none of the default themes really work this way. Just thought I would mention it as it is a pain to have to override the admin theme for such a trivial issue. Does not seem to be affecting anyone else.

Ok I have looked at this again and have realise the problem I have is that certain elements namely those that use a pseudo class selectors like so:

.toolbar .toolbar-icon::before {

and

.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before  

Looking at the documentation for pxtorem https://www.npmjs.com/package/postcss-pxtorem I can see we have the ability to disable certain selectors. In this example I have added the following line and recompiled. This seems to fix the problem here.

e.g.

          ],
          selectorBlackList: [
            'toolbar-icon::before',
          ],

I will try and create a patch or pull request for this.

added comment here https://www.drupal.org/project/drupal/issues/3187501 📌 Define how and where to use REM units Postponed: needs info

Updated patch with relative paths

I see that the patch provided fixes the issue but any specific reason the patch uses px rather than a standard rem?

Thanks for asking.

As the admin stylesheet also appears when viewing the front end you can see that sizing icons with rems has undesirable consequences.

Please see attached screenshots that show comparison. Note hoe the icon sizes are styled on the admin menu. In this case the base font size is 28px on the main theme,

Is it possible that your frontend theme is bleeding into the admin theme?

Do you notice this on the backend when the frontend theme isn't present?

No, issue is when viewing the front end only.

Toolbar is nested inside root and body elements and inherits from from front end theme.

as an aside I also notice that browsers use em units for things like font sizes and these also act in a similar way to rem's. i.e. they change size and respond depending on the root element font-size.

To reproduce just bump up your root element to see how it also affects icon sizes when you are logged in as admin with the toolbar module enabled. personally I like to increase the base font size considerably.

Thanks for reporting @2dareis2do

We can switch to use em here so it doesn't break when font scaling is used in the frontend. Notable to mention that we use em to place the icon itself as well.

So the solution is to replace 20px with 1.538em as the text size is set to 13px (20 / 13)

This needs a review

Hi, I have verified this latest MR with the Drupal 11.0-dev and the Claro - issue with icon sizes is fixed now.
Followed the below steps:
1. Install the Drupal version 11.x-dev
2. Go to Appearance and set the Claro theme as by default.
3. Applied the patch with changing the font size 24px or 34 px.
4. Observe that the icon size remain fix to the size.
Attaching screenshot for reference. Moving it to RTBC.
Thanks

Committed 5a7e9fa and pushed to 11.x. Thanks!

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

Thanks @chrina,

Can we have this in Drupal 10.x ?

Ok I have noticed a regression with the toggle switch on the top right.

Please see attached screen shot.

Notice the size of the button element.

Ok I have updated the patch on this. Not sure how I can reopen this issue and retest?

I have opened a new issue for this here. https://www.drupal.org/project/drupal/issues/3414419 🐛 Fix issue with icon sizes Active