Dropbutton size rendered incorrectly in Drupal 9.5.x

I am currently unable to reproduce the issue you mentioned.

Does you have base theme claro?

Yes I do have Claro installed. It's at 9.5.10.

Here is the error in the browser. Same error on the "--dropbutton-border-size". Nothing in the console.

Thanks for the help.

I am experiencing exactly the same issue after upgrading to the RC6 version of the theme. I am also only using Gin as my admin theme, and our main theme is our own custom theme. Claro is also installed at version 9.5.10.

Hi, I got the error and will work to solve it.

I've looked into this for a bit and this is what I've found:

Claro is a part of core and uses PostCSS for styling. There's a `dropbutton.pcss.css` in Claro which adds the CSS-variables you're talking of, but in the final CSS `dropbutton.css` the variables are missing. There is just an empty `:root` tag with the same comments as in the PostCSS file, but the variables are missing. I'm guessing that this is a PostCSS issue in core, rather than an issue with Gin. However, relying on variables provided by someone else isn't great and can lead to a lot of issues.

I quickly threw together this patch since I need it now. Might not be the best way to solve the issue, but it works for me. Personally I don't really have an opinion whether or not the variables from Claro should or should not be used.

Okay, after fighting with regex for a half hour, finally got a list of variables Gin is calling from other places.

--tabledrag-handle-icon-size
--space-m
--dropbutton-border-size
--dropbutton-small-toggle-size
--dropbutton-extrasmall-toggle-size
--ck-color-toolbar-border
--ck-focus-outer-shadow
--ck-color-text
--ck-color-base-background
--ck-color-image-caption-text
--ck-color-image-caption-background

All of the ck editor variables are loading fine on the node edit interface, so they are good.

the 5 variables from Claro are not getting their values (most likely the PostCSS issue #9 pointed out). I'm comparing these values set in RC5 and generating a patch.

Hi everyone, I have solved the issue and created merge request. Because patch file for css is extra burden.

So, please review and verify.

Sorry. That #10 patch, while partially working, is not complete. It only addresses the extrasmall dropdowns, not the small ones, or any of the other variables (border size, table drag icon size etc). Also, there is no need to redefine classes as they are already defined in Claro. Simply commenting out the lines in Gin will make the classes fall back to the Claro declarations. Here is a new patch which will comment out all Claro variable calls.

True, I managed to miss a few variables. On another note - do the "border size", "table drag" and "icon size" variables have anything to do with this issue, or should they be fixed somewhere else? If I'm not mistaken, it seems that only the once related to "dropbutton" are relevant (i.e. --dropbutton-border-size, --dropbutton-small-toggle-size and --dropbutton-extrasmall-toggle-size)? To me, #13 seems like a better solution when it comes to this specific issue. I wrote a new patch that targets only the related variables. Thank you for your work so far.

Drupal 10 uses CSS Variables in the output. 9.5.10 seems to still convert them to the actual values.

Let's add fallback values to the CSS variables for 9.5.x.

Instead of

.dropbutton__toggle {
  width: calc(var(--dropbutton-small-toggle-size) + 1px);
     }

we can do

.dropbutton__toggle {
  width: calc(var(--dropbutton-small-toggle-size, 2rem) + 1px);
     }

see also https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_proper...

Hi all,

Patch updated as per suggested changes by @saschaeggi in #16.

Please review.

Thanks @djsagar

Moving this back to needs work as the patch from includes unwanted code style changes.

Hi all, I have opened merge request to solve this issue.

Please review and verify.

Hi all, I have opened merge request to solve this issue.

Please review and verify.

Hello! Tried the latest MR and it seems to have solved the issue both small and xsmall dropbuttons:

Thanks y'all 👋

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