Create option to apply styles that extend Olivero theme's look and feel

So for the 1.x branch we're providing a standard button appearance that we can't change because there are sites relying on how it looks.

We do have a "include minimal css" feature under Appearance that helps get you the style you want, but you'll have to style it by yourself.

We do not have any plans of changing the default behavior in 1.x.

@zenimagine, I hear you, but we have 44,000 installations in d8 alone and I don't think all of them will adopt Olivero just because it's released. Changing the button style is a backwards breaking change that we can only do in a major version change.

I would recommend using the "include minimal css" and styling the buttons to match whatever theme you're using.

Would the maintainers be willing to accept a patch on this? We could use something like hook_library_info_alter and add a library with custom CSS to make this happen, so the library would only load if Olivero is being used.

I'd be willing to do the work on this (I'm a maintainer of Olivero).

Feel free to say "no" and switch back to Works as Designed :)

We can change the default color, but only change it so that it changes for new installs, and not through an update hook for existing sites that uses the Bartik color.

I would assume that those who have the module already installed and set to the Bartik color would still prefer that color and not an "upgrade" to the Olivero color.

Would this work for you?
I'm about to tag a new release so it's nice if you can get the patch in next week.

I'm not quite sure how I would be able to only affect new installations (my Drupal backend skills are beginner at best).

Thinking this through:

If we don't want to affect current installations, we need to create a setting and only load the new library if that setting is enabled. But, there may be existing users who want to use the new functionality, so we'd probably need to create a checkbox within the UI somewhere.

Am I understanding this properly?

I would assume that those who have the module already installed and set to the Bartik color would still prefer that color and not an "upgrade" to the Olivero color.

I'm not sure I agree with this, but 🤷

Looking at this a bit more, I see there's an "Include minimal CSS" setting. So, We can do something similar that says "Include Drupal Olivero styling if Olivero theme enabled", and have it enabled by default.

If Olivero is not the default theme, it can use the default styling.

The other option is to extend the default styling to say "If you're using Olivero, we're giving you these new styles". However, you're right that will change the look of existing sites (and will require a change record if you do them).

I'll work on the styles for now. I had a discussion with @jwitkowski79 (who did a lot of the Olivero design work) and we're going to try for something similar to the banner you see on https://www.smashingmagazine.com/

Updating title.

Screenshots

Whew! There are a lot of options within this module (I never knew!)

Anyway, I went through and added an option to "Include styles to support Drupal Olivero theme's default CSS."

Once enabled, this will load the Olivero stylesheet instead of the default.

Note: I made this stylesheet backwards compatible with IE11 (Olivero in D9 supports IE11), but I also have modern CSS rulesets in there to support new features coming to Drupal 10 (CSS variables). So, you'll see some CSS properties listed twice.

A couple more notes on this:

The PHP work in the MR will probably need some extra review. I don't know what I'm doing (too much) and hacked it together), But it's minimal and the review shouldn't be too hard.

There's probably still a little bit of work to be done, but it should be good for review. I'll probably give it a bit more time tomorrow.

What does the dialog box look like when it's collapsed at the bottom of the site?

Great catch! I missed that functionality.

It's now fixed. I also refactored some of the logic to add the styles.

Thanks for the work. Looks great!

And thanks for not overriding existing config with the new Olivero style.

Just a thought: Should we display a notice if the default theme is Olivero and the new option isn't enabled?

Just a thought: Should we display a notice if the default theme is Olivero and the new option isn't enabled?

Thats a great idea!

Another thought I had is the use-case where a site is under active development (with a custom theme) and the user installs the module. By default it will load the Olivero CSS, which isn't optimal.

My thought is we could check to see if Olivero is the default front-end theme (I think), and only then load the CSS. If we do this, we'll need to remove the Form API states that disable various fields when the Olivero styles are selected. Thoughts on this?

Ok, this is ready for re-review!

1. I made the warning message that is shown when 1) the Olivero theme is the default theme, and 2) the setting is not enabled.
2. I changed the logic to only load the Olivero extended styles if the Olivero theme is set to be the default
3. I removed the formapi states stuff that hid other fields when the Olivero setting was enabled

Please let me know if you have any additional feedback :)

Image of the warning:

Thanks, I'll review the patch this weekend.