Getting a list of variables for Plone 6 theme

1

Is there (a way to get) a list of variables for overriding barceloneta theme?

I see that

 $plone-link-color: #20a7de;

works, but how do I know for example 'btn standalone hover background' ?

2
  • Variables Plone/Barceloneta defines in SCSS is in scss/_variables*
  • Some other things (like some of these presentation utility classes) is in dependencies included by SCSS, mostly from Bootstrap 5.
3

I checked this, but there are not too many variables 'present': @plone/plonetheme-barceloneta-base - npm

I thought I could define it like described here:

Which lets me define for example:

$btn-font-family:             "Courier";
$btn-font-size: 3rem;

But is there a way to find out if '.btn primary' colors can be defined (or do I have to do this with 'normal scss / css' ?

PS: I tried all these without any result (changes)

$btn-link-hover-bg: #333333;
$btn-hover-color: #333333;
$btn-color:  #664141;
$btn-bg-color:  #664141;
$btn-link-hover-bg: #333333;
4

docs might help: Classic UI theming based on Barceloneta — Plone Documentation v6

EDIT: when it comes to $primary there was a switch from $plone-link-color (which overruled Bootstraps primary ... historically defined like that) to the "real" primary definition from Bootstrap as base for all other defs... see Sanitize color variable definition by petschki · Pull Request #351 · plone/plonetheme.barceloneta · GitHub

1 Like
5

Thanks, but I still dont get it.
Back in the days II think there was a definition with:

@plone-btn-standalone-bg:             	#20a7de;

I haven't figured out if this still can be set with variables

6

No, this doesn't exist anymore.

The Buttons in Plone 6 forms have the classes btn-primary and btn-secondary so customizing them works with the Bootstrap variables.

7

So this means that only 'btn' can be set with variable, and 'btn-primary' needs to be set with css or by modifying bootstrap files ?

8

Depending on what you try to achieve you simply change the general $primary or $secondary color variables (Color · Bootstrap v5.3) ... these variables also take effect on the button backgrounds.

If you want to customize it on per context basis I'd customize the :root variables for example:

body.template-contact-info .formControls .btn-secondary {
    --bs-btn-bg: #ff0000;
    --bs-btn-disabled-bg: #cc0000;
}
1 Like
9

Thanks a lot, that is very helpful.