Aura Feedback / questions / suggestions

[knoobie]

Describe your motivation

Talked with Rolf about this.. adding some points here for you to consider or track:

• consider adding -color to the aura properties to manage colors, e.g. --aura-accent-light
• make sure aura properties are available for IDEA auto complete suggestion.. e.g. move them in a separate import.. aura/properties.css and let people import it
• make sure aura css files are in a location reachable for IDEA to ensure we can jump to source / look at the file (Strg + left click on the import)
• accent, surface and opacity property feels magic.. they need good documentation and if feasible 3-4 examples "if you wanna archive this.. do x.."
• Not all application can use the transparent colors (😭), there should be a simple way to reduce the transparency to zero
• reduce the potential "cognitive" load for people trying to read / understand aura's selectors - your users have no idea about css and if e.g. a "simple selector" like "vaadin-button { --overwrite-property: x; }" does not work because of css specificity and there have to read the source why.. they shouldn't need a css magic book for dummies 😅

Describe the solution you'd like

Up to you

[jouni]

consider adding -color to the aura properties to manage colors, e.g. --aura-accent-light

Yeah, seems reasonable. Should do this asap then.

make sure aura properties are available for IDEA auto complete suggestion.. e.g. move them in a separate import.. aura/properties.css and let people import it

Easy win, for sure, if that’s how IDEs prefer it.

accent, surface and opacity property feels magic.. they need good documentation and if feasible 3-4 examples "if you wanna archive this.. do x.."

Yes, accent and surface colors are likely the hardest concepts to grasp. Haven't had the time to write that documentation yet.

Not all application can use the transparent colors (😭), there should be a simple way to reduce the transparency to zero

Does the crying emoji mean you cry when you have to use semi-transparent colors or when you have to work with an app where you can't use semi-transparent colors?

Regardless of that: Aura doesn't force you to use semi-transparent colors any more than Lumo does. You are free to override all of them with opaque ones. Would a fixed example color palette without transparency be enough, or are you asking for an easy way to generate a new palette without transparency?

reduce the potential "cognitive" load for people trying to read / understand aura's selectors

A couple of options I see:

• Make more components share the same custom properties in base styles and themes, and add more custom properties that all work on the root element level.
• Encourage the use of cascade layers when importing built-in themes, which essentially eliminates all specificity hurdles. This makes it easier to accidentally override things you didn't intend to, so it’s a double edged sword in that sense.

In any case, I think documentation should try to make it clear that any custom CSS you write has risk, and recommend sticking to custom properties on the root element level whenever possible, and sticking with simple selectors.

I think we can still make some of the selectors in Aura less specific, i.e., easier to override, but I don't believe we’ll be able to reduce the complex appearance of the selectors you might encounter when inspecting component styles.

[knoobie]

when you have to work with an app where you can't use semi-transparent colors?

Some design systems require non semi transparent colors, for those it might be good if this could be easily changed so that they can be based on aura insteaed of the base style.

Would a fixed example color palette without transparency be enough, or are you asking for an easy way to generate a new palette without transparency?

Depends what's easier for you to maintain. I think an example could be enough

[jouni]

Some design systems require non semi transparent colors

If I understand correctly, you have seen design systems that don't specify the exact colors, but don't allow semi-transparent colors. Or did I get that wrong?

[knoobie]

I've seen a lot of Design Systems that only define and allow exact colors especially if you look into government Design Systems with really simple color palette to ensure people can read everything properly

[jouni]

Sure, me too. I just started wondering if there really was an odd design system that didn't specify the exact colors you should use, but did specify that semi-transparent colors are not allowed.

I would assume you’d then use those exact colors defined by the system to override all the colors in Aura. I doubt any Aura-specific control/property like --aura-color-opacity: 1 would suffice.

I think this use case could/should be addressed by a nice theme editor, where you can plug in the colors for texts, borders and various surfaces. But even without that, just overriding the color property values is the solution.

[knoobie]

Some additional remarks - opening https://vaadin.github.io/web-components/aura.html in Firefox 140 (ESR) the tab crashes :D Firefox 145 Alpha and Chrome it works

[web-padawan]

Just to clarify, are you testing on Windows? It doesn't crash for me on Mac OS:

[knoobie]

Yeah tested on our Windows

[web-padawan]

Confirmed and reported #10403 to investigate. Thanks a lot for bringing this up!