Refactor CSS Container feature

[thibaultzanini]

⚠️ merge this one first: #104

[marchant]

That feels too hard-coded and probably belongs to the /* FIXME: Temporary arbitrary values, waiting for Button Themes */ group, no?

[marchant]

This is a great step forward but I think what you did here for button it brings up the fact that it should be at the VisualStyle level to codify a --visual-style-raised-surface-fill, "for hover" for all controls by default. A specific VisualStyle can always be specific at each control's level if it creatively wants to.

Hover intents:

• states should serve as a visual cue or affordance, indicating what will happen when a user interacts (usually clicks) with an element. For example, a color change or an underline on text provides a hint that it is a link.
• Indicate Interactivity: Use subtle hover effects (e.g., slight color changes, underlines, or minor scaling) to visually confirm an element is interactive. Changing the cursor to a pointer also reinforces that an element is clickable.

By the way, see https://aslamdoctor.com/what-is-hover-intent-and-why-it-matters-in-web-development/ which makes a good point, I don't think we "debounce" hover like that, but it makes sense.

We have {name: "controlHoverFill", variable: "--visual-style-control-hover-fill", backup: "controlFill"},

in VisualStyle, so a parallel would be to add:

{name: "baseSurfaceHoverFill", variable: "--visual-style-base-surface-hover-fill", defaultValue: "hsl(0, 0%, 100%)"},
{name: "raisedSurfaceHoverFill", variable: "--visual-style-raised-surface-hover-fill", backup: "baseSurfaceFill"},
{name: "elevatedSurfaceHoverFill", variable: "--visual-style-elevated-surface-hover-fill", backup: "baseSurfaceFill"},

That said, I'd rather not use "hover" literally as it doesn't exists on touch. But the same intent is possible: I expect a long press on something to give me feedback that if I lift my finger it's going to do what the preview hints, and if I don't want it, I move my finger out that control before lifting it, avoiding triggering what that control would have done. The same pointer-down behavior works with a mouse as well, and I'd expect the same behavior I descried, which I think is covered by the "active" state in CSS.

So hover is a pre-active, or an "active hint". We have "controlActiveFill", so we could replace "controlHoverFill" by "controlActiveHintFill"

Let me know what you think and bring it up with the team for feedback.

[marchant]

Similar issue here, in VisualStyle, I think we're missing the following:

{name: "baseSurfaceActiveFill", variable: "--visual-style-base-surface-active-fill", defaultValue: "hsl(0, 0%, 100%)"},
{name: "raisedSurfaceActiveFill", variable: "--visual-style-raised-surface-active-fill", backup: "baseSurfaceFill"},
{name: "elevatedSurfaceActiveFill", variable: "--visual-style-elevated-surface-active-fill", backup: "baseSurfaceFill"},

and that current implementation could be a default implementation, even by introducing a variable for the % of the mix?

[marchant]

This should be using VisualStyle-defined variables. If missing, let's propose one, all controls likely need this too.

[marchant]

This should be using VisualStyle-defined variables. If missing, let's propose one, all controls likely need this too.

[marchant]

Or we need to separate the notion of "user interaction" - active, hover, focus, from being embedded in the visualStyle's properties, but that might make it harder to use?

[marchant]

Absolutely, this is directly related to "density". A VisualStyle's density, maybe between 1-10, would be the input that is derived and applied in all relevant properties: spacing around things, like padding and margins, letter spacing, line spacing, font variants

see

In design, padding, spacing, font variants, and letter spacing are all core components of information density. Density refers to the amount of content displayed in a given space, and these elements act as the primary controls for adjusting how "packed" or "breathable" an interface feels. 

How Each Element Relates to Density 

• Padding and Spacing: These define the "breathing room" around and between elements. Compact spacing uses smaller padding and margins to economize screen space, allowing for more content (higher density), while default or loose spacing increases padding to improve visibility and focus (lower density).
• Condensed/Compact Font Variants: These typefaces have a compressed width, allowing for more text characters to fit into a limited horizontal area. They are a primary tool for increasing information density in data-rich environments like dashboards or mobile UIs where screen real estate is at a premium.
• Letter Spacing (Tracking): Adjusting the space between characters directly changes the visual density of a text block. Tight letter spacing creates a denser, more impactful look but can decrease legibility, while wider spacing reduces density and can help with readability, especially for users with visual impairments.
• Line Spacing (Leading): This controls the vertical density of text. Narrow line height packs more lines of text into a view, whereas generous leading creates a lighter, less overwhelming layout. 

Density Strategies in Design 
Designers often use these elements to create different "density modes": 

Feature High Density (Compact) Low Density (Spacious)
Padding. Minimal (e.g., 4dp increments) Generous (e.g., 8px–16px+)
Fonts Condensed or Narrow variants Standard or Extended variants
Letter Spacing Tighter (negative values) Natural or expanded
Use Case Dashboards, data tables, expert tools Landing pages, articles, mobile apps

Higher density is typically used when users need to scan or compare large amounts of information quickly, while lower density reduces cognitive load and helps users focus on specific tasks. 

[marchant]

VisualStyle's density!

[marchant]

We haven't codified transitions / animations at VisualStyle's level but that most likely belongs there at some point as well