Stylings per used theme

We have no frontender at hand in the moment.

I opened a MR which will add class klaro-theme-<theme_name> to every klaro-element.

Here is the Klaro-SCSS with all defined vars you can easyly override:
https://github.com/klaro-org/klaro-js/blob/master/src/scss/vars.scss

And I uploaded our SCSS-file which we use for customizing (renamed to TXT).

I don't think Klaro should be responsible to style for any number of themes. At most, it should provide an infrastructure so that themes can make the Klaro visuals look nice. Therefore, extra classes like in the MR should not be necessary, the currently active theme would style the available components and there shouldn't be any CSS that needs the context of different themes.

The only exception should be Claro, Gin and Olivero as they are Drupal Core or Drupal CMS defaults.

For those themes, I wonder if the Klaro CSS could just leverage the CSS variables to define the Klaro styling. I would assume, that those 3 themes use the same, or very similar variable names and hierarchies.

They are using similar classes - but klaro not.

The variables are quite different - because of this I would just add the theme as class and then write custom css for these three theme which uses the variables and adjust the klaro-classes with their theme equivalents.

Guess this might be another reason for a potential Drupal fork of Klaro lib one day perhaps, so the classes and elements could use Drupal standards.
That should just happen, if the original maintainers from Klaro don't maintain the lib anymore or the Drupal maintainers are much more active maybe? (Perhaps we should open a meta issue for the far future to track such benefits?

(Disclaimer: I have no idea how good the cooperation and communication with Klaro team is. Of course, it would be best to share the boat with them!)

Shouldn't the respective theme be responsible for the actual styling? No matter what produces the markup (be it a drupal module, field formatter or a react app) - the theme would be the common place to specify a certain look & feel for it (?) I don't even see the necessity that the klaro markup should be more "drupalish"...

As for Olivero, there is a subtheme used anyway (drupal_cms_olivero) in Drupal CMS which could easily be extended by a custom stylesheet for klaro.

Regarding Gin I'm not so sure whether it is easily possible to create a subtheme. On the other hand, Gin has this nice mechanism to provide custom styles in a file public://gin-custom.css - would it be possible to add klaro-specific styles to Gin that way? Can e.g. a recipe modify files in the public file system?

Anyway, I don't see this as a klaro issue.

I added an option for overriding the Klaro! CSS (keeping backward compatibility for existing installs).

The CSS standardizes the buttons and display and introduces CSS variables that can be easily overwritten in your own theme (see here).

There are also customizations for the Olivero, Claro and Gin themes.

Please review and feedback.

EDIT: If you are updating your existing Klaro!, you have manually enable the option. "Override Klaro! CSS" in tab "Styling". For legacy reasons we do not enable while updating - only fresh installs get this option enabled per default

Thank you for the MR! Initially i've struggled quite a bit cuz i've only faced the klaro upstream styling until i've realized i have to check the "override klaro css" option. :/ in general i like the direction the MR is going. but there are a few details to note about the styling:

all themes:

• between the focus outline and the component of notice dialog is a tiny offset. when there is any typography or content in general underneath due to the fact the dialog has no real border but just a slight dropshadow the underlaying content shines through - having no real border and just a light drop shadow makes it difficult depending on the background color (in particular on white) to distinguish the notice modal and meeting SC1.4.11 which requires a color contrast of at least 3:1)



• some touch targets don't meet SC2.5.8. (there is a meta issue for core #3491461: [meta] Some interface components don’t meet the minimum target size). on the notice modal it applies to the customize link, and on the dialog modal to the close button, the privacy policy and the powered by klaro link, the checkbox labels and the toggle buttons to expand and collapse the services groups.

Claro:

• the focus outline in safari is in a light blue (rgb(143, 178, 249), in firefox in a darker blue (rgb(0, 122, 255), and in edge close to black (rgb(16, 16, 16)) but the color for the focus outline in claro should be in green (rgb(39, 167, 105)) - applies to the notice as well as the dialog modals
• the toggle button component gin and klaro are using is not available in claro, there only the checkbox component is being used instead? plus visually there is no way at all to distinguish between the current disabled and active checked/toggled state of the different toggle button. the difference is a color contrast of 1.5:1 (#4162D6 disabled and #003ECC active and checked) but due to simultaneous contrast the color contrast between the two appears to be even less than 1.5:1. And the disabled state is a problem on its own and out of the scope of this issue. but from my perspective i would go with the checkbox component for the claro theme (what do others think), it would be more consistent and the disabled state for checkboxes is more easy to distinguish from the checked and unchecked state - but on the downside the disabled checkbox state has color contrast issues, but those are there for core in general as well.

Olivero:

• Olivero uses the same set of focus outlines as Claro (safari is in a light blue (rgb(143, 178, 249), in firefox in a darker blue (rgb(0, 122, 255), and in edge close to black (rgb(16, 16, 16))), but in the case of olivero i am "not" sure what their default focus color is. there is no general "green" like in claro, but depending on the background and context, the focus outline styling changes. so i am not sure which of the few available to pick here?
• Same as Claro, i am not sure if something like that toggle button component Gin and Klaro uses is available for Olivero? Would it make sense to go with checkboxes in the case of Olivero as well?

Gin

• Gin uses the same set of focus outlines as Claro (safari is in a light blue (rgb(143, 178, 249), in firefox in a darker blue (rgb(0, 122, 255), and in edge close to black (rgb(16, 16, 16))). but the styling should follow the accent and focus color set in admin/appearance/settings/gin or on the user profile if overrides on a per user basis are active.
• The styling of the toggle button has a few color contrast related issues but those are out of the scope for this issue. that is something for the gin theme upstream. i am currently going through an audit we've done a few months ago and validate which of the points are still relevant (the spreadsheet is linked in the issue summary of this meta issue: #3475279: [Meta] Audit each module to be included into Drupal CMS for accessibility issues) .

@rkoller thank you for your quick and incredibly comprehensive and helpful feedback!

I've added a note about the update process and how to manually enable the option. (Sorry for wasting your time).

I tried to solve the first and second issue:

• Dialog focus: I have added an additional white shadow
• touch target I set them to min-height 24px and inline-block and removed the unintended padding from the close-button (also i set cursor for labels).

Edit: not sure of the white shadow should be set for focus and / or for focus-visible, see here.

The checkboxes / toggle buttons are part of Klaro! and we cannot change. So we shoul fix further styling and ally issues.

The other issues I will have a look later.

Thank you very much once again @jan kellermann for the great work here.

I just have a comment regarding wording: I'm not sure if

Override Klaro! CSS

is perfectly matching what it does. The site owner may not know that Klaro! has its own CSS anyway, and what overriding means here. I think reading

Override Klaro! CSS

I'd expect a functionality that let's me override the CSS (not knowing if it comes from the Klaro! Lib or the module), maybe in the UI or in a theme, but that's not the case (and not our goal).

Perhaps something like: "Use Drupal-like styles" is clearer and should then be enabled by default for new installations?
But there might be even better terms. The description should then explain details.

Of course, we can improve the wording later, if we have better ideas, this is not a blocker.

Thank you @jan kellermann this is certainly going the right direction. Great progress.

@all Thank you for feedback. Lets rock the last meters to the 1st stable release!

@rkoller:

• I have adopted the focus display of the individual themes and added a white safety area.
• The checkboxes / toggle buttons are part of Klaro! and we cannot change. So we should fix further styling and ally issues.

@anybody: I just changed the wording. And, yes, the option is automatically set for new installations. But not when updating for compatibility reasons.

Please further feedback or RTBC.

Thanks for the changes. A few more observations and thoughts:

micro copy:
i completely agree with @anybody that the previous label Override Klaro! CSS was unclear and confusing, but Use Drupal-like styles i not necessarily consider explicit and clear as well. As a user it makes me think what drupal like refers to? But the wordsmithing might lead into bikeshedding but i guess as long as the styling and a11y issues arent ironed out we could still keep discussing the wording for now;) and in regard what to write instead, i would label what this checkbox is all about, using or adjusting the styling of klaro to the installed drupal themes. and in the description i would add that klaro provides out of the box the styling for the two core themes olivero and claro as well as gin. and maybe also provide a link to a docs page how to handle the case if another frontend theme instead of olivero is being set as the default theme? so a site builder is being able to provide bespoke css for their theme of choice?

Update: and i forgot to add, would it make sense to make the checkbox per default checked for klaro? if not i would suggest to at least update the recipe for drupal cms and tick the checkbox there per default at least?

All themes:

• Most target sizes are good to go now, only the close button has only 24x20 pixels and is not meeting the requirement of at least 24x24px
• in regards of the toggle/checkboxes, a pitty that it is impossible to adjust that styling. :( then the styling for those toggle buttons might need some adjustment, cuz it has color contrast issues. will write up the problems in a follow up comment.
• about "Edit: not sure of the white shadow should be set for focus and / or for focus-visible, see" i am not sure. i gotta do some research, cuz i stumbled across one issue for core where there were opposing opinions, one person recommended focus while the other recommended focus-visible. will also add it to the follow up comment. from the top of my head i dont know the best practice.

Gin (light mode):
the notice and the consent dialog are both minding now the selected accent and focus color - fab! one thing that is confusing, the toggle buttons stick to the strong green background color. but if you change to the dark mode that background color for a toggle is following the set accent color as well now? is that intentional for gin or is that sort of a bug (i am using 4.0.0) - it is definitely an inconsistent behavior in between light and dark mode for gin?

The customize link on the notice, the privacy policy, the services group toggle, the toggle buttons and the powered by link on the consent dialoge still have the blue focus outline instead of the current selected focus color.

Gin (dark mode):
the background color is still white there. and there is sort of a white margin even outside the focus outline.

and circling back to the gin light mode the notice modal is hard to recognize against a white background without the focus outline active.

The customize link on the notice, the privacy policy, the services group toggle, the toggle buttons and the powered by link on the consent dialoge still have the blue focus outline instead of the current selected focus color.

Olivero:
the focus outline around the notice modal is visible... but the color for the focus outline for the notice modal and the focus outlines within the modal differ that is for sure, plus the real problem the focus outline is invisible for the blue primary buttons. (and the pattern that is listed for gin and claro applies here as well -> The customize link on the notice, the privacy policy, the services group toggle, the toggle buttons and the powered by link on the consent dialog modal still have the blue focus outline instead of the olivero outline

Claro:
The customize link on the notice, the privacy policy, the services group toggle, the toggle buttons and the powered by link on the consent dialog modal still have the blue focus outline instead of the green.

Update: yuck, completely forgot about the windows high contrast mode. need to check all the different themes and settings as well. will take some more time.

went through the three themes in high contrast mode:

all themes:
for the notice a drop shadow is not available in high contrast mode, so in every of the following videos you will notice an outline is completely missing, only claro has at least a focus outline, but a border is missing entirely (same for the consent dialog modal). i would suggest to go with the approach used on the dialog modals in drupal core and simply use a border same as for the dialog modal on for example a view.

Olivero (olivero.mp4) & Gin (gin.mp4):
notice dialog

• the notice dialog is missing a border
• the the notice dialog modal, the decline button, and the accept button are missing a focus outline
• the border of the decline and accept button have a too low color contrast, it only has 2.9:1 (#575757/#000000), the required bare minimum is 3:1, but the more the better.

consent dialog

• the consent dialog is missing a border
• the toggle buttons are invisible.
• the not disabled toggle has a white focus outline instead of blue
• the decline and accept selected has no visible focus outline

Claro (claro.mp4):
notice dialog

• the notice dialog is missing a border
• the border of the decline and accept button have a too low color contrast, it only has 2.9:1 (#575757/#000000), the required bare minimum is 3:1 but the more the better.

consent dialog

• the consent dialog is missing a border
• the toggle buttons are invisible.
• the not disabled toggle has a white focus outline instead of blue

Thank you for large and exact feedback! I hope I solved all bugs you described.

micro copy:

Title: Adapt the UI to Drupal
Desc: Activate this to overwrite the Klaro! styling with a Drupal-like appearance. There are also customized designs for Olivero, Claro and Gin.

Documentation:
https://git.drupalcode.org/issue/klaro-3495342/-/blob/3495342-stylings-p...
Later we will add a documentation page for styling.

The option is automatically set for new installations, but not when updating for compatibility reasons.

Changes

target sizes (all themes):

- Fixed close-button to 24x24px

gin (light):

> the toggle buttons stick to the strong green background color. but if you change to the dark mode that background color for a toggle is following the set accent color as well now

solved.

> links on the consent dialoge still have the blue focus outline instead of the current selected focus color.

solved.

gin (dark):

> the background color is still white there. and there is sort of a white margin even outside the focus outline

solved.

> and circling back to the gin light mode the notice modal is hard to recognize against a white background without the focus outline active.

solved.

> links on the consent dialoge still have the blue focus outline instead of the current selected focus color.

solved.

Olivero:

> focus outline for the notice modal and the focus outlines within the modal differ

done.

> focus outline is invisible for the blue primary buttons

done.

> links still have the blue focus outline instead of the olivero outline

fixed (is same as link color - currentColor).

Claro:

> The customize link on the notice, the privacy policy, the services group toggle, the toggle buttons and the powered by link on the consent dialog modal still have the blue focus outline instead of the green.

fixed.

windows high contrast mode:

Tried my best. Maybe an own ticket because larger scope than this.

Thank you for all the work! A few comments:

Title: Adapt the UI to Drupal

I am part of the group of people working on Drupalisms in Drupal, we are still mainly in the audit phase collecting the set of nouns, verbs and adjectives that build the mental model and grammar for drupal, there happened no discussion nor work uni- and clarifying the wording yet. but there is at least one detail i try to recommend and mind myself: i would first look at the current list for any noun, verb and adjective in question. Adapt is a verb that not looked like the perfect pick and also looked unfamiliar to me. taking a look at the current list at https://docs.google.com/spreadsheets/d/1p6i00ya_H9UHVagbpAUrJuuyw7GlUU4e... it turned out that Adapt wasn't listed yet. Did a quick global search in a core installation in vcode and Adapt was only found once in a help topic and aside that three or four more times in code comments. Personally I think Adjust would be more precise? Plus adapt "to Drupal" is also sort of imprecise, it might be sort of misleading in case a site administrator has installed a custom default theme that is not olivero and or neither claro/gin then the actual purpose of that checkbox might be potentially confusing same as the actual outcomes? How about:

Adjust the Klaro UI to the default and administration theme

It would use the verb adjust which is already used across the admin ui and which is more suitable in this context, making it more explicit which UI is adjusted and finally clarify to what the klaro ui is adjusted to, which is the chosen default and administration theme. it is a bit more verbose but clearer and more explicit from my point of view.

Desc: Activate this to overwrite the Klaro! styling with a Drupal-like appearance. There are also customized designs for Olivero, Claro and Gin.

the phrase "Activating this...." or "Activate this" is sort of redundant and unnecessary. A user has to skim by that snippet until the details of interest start. In the micro copy for descriptions in core in general that stylistic device isnt used. How about something like:

Klaro provides styles for Olivero, Claro, and Gin. Learn more [how to adjust Klaro to your own themes].

It is front-loaded that klaro provides styles for olivero, claro, and gin, which is the "default" when this option is active, and then you provide a direct link to the docs page you've mentioned for the case a user is using their own theme. definitely not perfect yet but just an initial idea how to rephrase and shorten that description?

Styling:

Olivero
notice:

• the strong white margin around the focus outline when the dialog is in focus looks odd if the focus switches to the customize link the the dialog shrinks in size significantly (against the dark/black footer)
• The focus outline for customize is darker than then outline for the dialog and the buttons

notice: (windows high contrast)

• the notice dialog has no focus outline

consent

• the privacy policy and the powered by klaro links have also a darker focus outlines.
• the toggles dont have an offset like the two buttons.

consent (windows high contrast mode)

• the close button has a white focus outline when the dialog modal is opened, if the focus is moved to the privacy policy and then moved back to the close button then the focus outline is in the correct blueish color.
• the toggles dont have a focus outline.

Claro:
notice:

• still think the dialog element is hard to distinguish against the background due to the fact that only a light drop shadow is being used. feels not in line with SC1.4.11

consent: (windows high contrast)

• the close button is not autofocused like without the WHCM
• the toggle buttons have no focus outline.

gin (light)
notice:

• the focus outline (with the standard settings) has 3 pixels of the current focus color #7EB2FD and one pixel of a darker #6690CE?!
• in claro we have a offset for the focus outline for buttons, in gin there is no offset for focus outline (that way not meeting the color contrast requirements - but that is a gin problem not a problem of klaro - but the offset would at least ease the problem in the short term)

notice: (windows high contrast)

• the customize link has no focus outline

consent

• the toggles and buttons dont have an offset for the focus outline either. and there is also the problem of that one pixel thick darker focus outline.

consent (windows high contrast mode)

• only the two buttons have a focus outline, both links and the toggles as well as the close button miss a focus outline.

gin (dark)
notice:

• if the dialog is in focus the one pixel thin dark outline between the blue focus outline and the white dialog border is a different dark than the
• two available dark background colors in gin. personally i wouldnt add an offset or additional focus outline color to the focus outline around the notice dialog . the focus outline should be directly next to the border.

notice: (high contrast mode)

• the customize link is missing a focus outline

consent

• and it looks like the toggles and buttons have an offset with the dark mode active?
• powered by klaro has a too dark color contrast #5c5c5c against #2A2A2D (2.1:1 the required minimum is 4.5:1)
• and one note i am not sure if it was already the case in the previous iteration it looks odd that the background of the dialog is invisible. it is plain black here.

consent (windows high contrast mode)

• only the two buttons have a focus outline, both links and the toggles as well as the close button miss a focus outline.

i hope i got everything now. jumping inbetween browsers, themes, different states, and settings is super confusing. i think if the points i've listed are solved, the current state of the MR would be a significant improvement. some more work might be still required about the styling of the notice dialog, in particular the styling of the toggle button component, as well as you've already mentioned, the styling in the context of the windows high contrast mode, but i would move those to follow-ups probably?

Title and description:

The new CSS contains basic Drupal rules and colors. There are also customizations for the three themes. However, the main goal is to replace the Klaro! look with the Drupal style. Therefore I have customized it:

Title: Adjust the UI to Drupal style

Desc: Use Drupal-like appearance for Klaro! elements. There are also customized designs for <em>Olivero</em>, <em>Claro</em> and <em>Gin</em>.

Styling:

Olivero

notice:

the strong white margin around the focus outline when the dialog is in focus looks odd if the focus switches to the customize link the the dialog shrinks in size significantly (against the dark/black footer)

Reduced size.

The focus outline for customize is darker than then outline for the dialog and the buttons

Yes, because links have "currentColor" and buttons another color.

notice: (windows high contrast)

the notice dialog has no focus outline

Fixed.

consent

the privacy policy and the powered by klaro links have also a darker focus outlines.

The focus has "currentColor" as color and this should be identical to link.

the toggles dont have an offset like the two buttons.

Fixed.

consent (windows high contrast mode)

the close button has a white focus outline when the dialog modal is opened, if the focus is moved to the privacy policy and then moved back to the close button then the focus outline is in the correct blueish color.

Because klaro-js set focus and key-down sets focus-visible. Focus has no browser preset but focus-visible. Dont fix.

the toggles dont have a focus outline.

Fixed.

Claro:

notice:

still think the dialog element is hard to distinguish against the background due to the fact that only a light drop shadow is being used. feels not in line with SC1.4.11

Like at all others variants. Its basic style from klaro. wont fix.

consent: (windows high contrast)

the close button is not autofocused like without the WHCM

Its autofocused, cant reproduce.

the toggle buttons have no focus outline.

Its autofocused, cant reproduce.

gin (light)

notice:

the focus outline (with the standard settings) has 3 pixels of the current focus color #7EB2FD and one pixel of a darker #6690CE?!

Yes, it is correct (dont know why Gin does this).

in claro we have a offset for the focus outline for buttons, in gin there is no offset for focus outline (that way not meeting the color contrast requirements - but that is a gin problem not a problem of klaro - but the offset would at least ease the problem in the short term)

Gin uses shadow instead of outline. Wont fix.

notice: (windows high contrast)

the customize link has no focus outline

Links in Gin have no focus outline in high contrast mode. Wont fix.

consent

the toggles and buttons dont have an offset for the focus outline either. and there is also the problem of that one pixel thick darker focus outline.

There is no outline offset for Gin theme, shadow as expected in Gin theme. Dont fix.

consent (windows high contrast mode)

only the two buttons have a focus outline, both links and the toggles as well as the close button miss a focus outline.

Toggles have a focus outline. All links are missing an outline according to Gin theme. Wont fix.

gin (dark)

notice:

if the dialog is in focus the one pixel thin dark outline between the blue focus outline and the white dialog border is a different dark than the two available dark background colors in gin. personally i wouldnt add an offset or additional focus outline color to the focus outline around the notice dialog . the focus outline should be directly next to the border.

This is the default focus from Gin. wont fix.

notice: (high contrast mode)

the customize link is missing a focus outline

Links in Gin have no focus outline in high contrast mode. Wont fix.

consent

and it looks like the toggles and buttons have an offset with the dark mode active?

It is the same double-shadow with 1 px darker inner shadow as Gin specifies.

powered by klaro has a too dark color contrast #5c5c5c against #2A2A2D (2.1:1 the required minimum is 4.5:1)

Cannot reproduce. The link has the same color (yellow) as all other links (

and one note i am not sure if it was already the case in the previous iteration it looks odd that the background of the dialog is invisible. it is plain black here.

Fixed.

consent (windows high contrast mode)

only the two buttons have a focus outline, both links and the toggles as well as the close button miss a focus outline.

See above.

Thank you very much for the extensive feedback once again! But I have to finish this issue. If there are no more significant problems, I would like to merge.

Apologies for the delay. I went into the rabbit hole of reevaluating the gin audit which is also relevant for klaro in consequence (and i am far from finished yet but remembered the klaro issue in todays track meeting when the discussion got to open and remaining tasks.. i'll step through the list of changes and only comment if necessary or if i notice something new to keep the comment shorter:

title and description

i liked you changes in #21

Title: Adjust the UI to Drupal style
Desc: Use Drupal-like appearance for Klaro! elements. There are also customized designs for <em>Olivero</em>, <em>Claro</em> and <em>Gin</em>.

( i would even consider to strike the word "also" as it is sort of a filler)

but in the interface i currently see:

Adapt the UI to Drupal
Activate this to overwrite the Klaro! styling with a Drupal-like appearance. There are also customized designs for Olivero, Claro and Gin.

Gin

notice:

Yes, because links have "currentColor" and buttons another color.

the only problem i see taking a closer look, something i've missed so far. the outline for the dialog and the two buttons has with rgb(82, 179, 234) against rgb(250,250,250) only a color contrast of 2.2:1 but 3:1 would be required (plus the buttons have also the problem of simultaneous contrast close to the focus outline - got eased by the introduced offset)... but the color contrast is rather something for a follow up or an issue in the olivero issue queue.

notice: (windows high contrast)

the notice dialog has no focus outline
Fixed.

i am unable to confirm that in edge on macos (see olivero-whcm.mp4)

consent(windows high contrast mode)

the toggles dont have a focus outline.
Fixed.

i am unable to confirm that either unfortunately (see olivero-whcm-toggle.mp4)

Claro

consent(windows high contrast mode)

the close button is not autofocused like without the WHCM
Its autofocused, cant reproduce.

the toggle buttons have no focus outline.
Its autofocused, cant reproduce.

see claro-whcm.mp4

Gin

Going through your comments and with the fresh memory of the current reevaluation of the gin audit it is definitely the right call to make the fixes upstream in gin first. so i spare you with more nitpicks for gin ;)

so overall the current changes are a huge improvement over the previous state, a tremendous effort on your end. thank you for that! probably best have a quick chat about the remaining points from my comment on slack after you've reviewed them maybe? but commit the issue right after and then focus on fixing issues upstream in olivero, claro, gin and klaro.js and then do the final cleanup in a followup in klaro. what do you think about that plan?

i've missed uploading the referenced claro video, apologies

Many thanks for the comprehensive and accurate feedback again. It is a great pleasure to work with you!

title and description

Changed in code and README now. ("also" is correct because there is a standard-style with drupal colors and additional three styles for the known themes).

Olivero

notice: (windows high contrast)

the notice dialog has no focus outline

Fixed.

consent (windows high contrast mode)

the toggles dont have a focus outline.

On windows they have a 2px dotted white outline (I removed now the transition of 0,4 seconds).

Claro:

consent (windows high contrast mode)

the close button is not autofocused like without the WHCM

On windows the outline is visible.

Gin:

windows high contrast mode

I force now the outline for links.

Also done:

• Removed transition from slider buttons.
• Added reverse icon for high contrast mode.

Thanks for the suggestion to chat directly and clarify what needs to be done before the merge.

Set to RTBC after final discussing on slack.
Just resolving last stylelint issues and then merge.

Thank you all for feedback and testing. We couldn't have done it without your support!

Merged and fixed.