Dark theme - surface colors that represent elevation

[mcoker]

We have background-color-300 that we use for things that float on top of other things - drawer panel, menu, popover, tooltip, etc.

As mentioned in office hours, it may also be useful to have some sort of similar indication for things like sticky elements which float in a similar way to a drawer panel - eg, page sections, table headers, toolbars, etc. Or maybe things like (non-flat) cards, and an indication for a selected card (which gets a larger shadow currently in light theme)

Right now in light theme our "sticky" variations apply styles (typically a box shadow and/or border), depending on whether something is sticky or not. Dark theme would also benefit from this.

Inline with expanding our global vars/tokens to be more easily themed, I think it would be great to have tokens for these concepts:

• Standard background color when something isn't elevated - we already have this
• Tokens for elevation - this could be a single, or we could have a hierarchy.
  • Single - background-color-300 w/ a box shadow between all themes.
  • Multiple - this could include things like backgrounds and the way to indicate the floating edge (border/shadow)
  • high - tooltips/popovers/menus that can pop out on top of anything basically
  • medium - sectional content that may have elevation things inside of it, page sections for example, maybe drawer panels fit here, too
  • low - elevated things in sectional content, toolbars as an example

cc @mceledonia @mcarrano

[mcarrano]

@mceledonia @mcoker Do we need to keep this issue open? Is this considered in the theming work?

[mceledonia]

I'm leaning towards using the same approach for "sticky" as we do for "floaty." The design rationale is overall the same – to indicate that this element is elevated above the rest of the elements. My only potential issue with this approach is if we have a floaty element on top of a sticky element, but there might be a simple solution there.

The main drawback to our approach of using lighter background colors to represent elevation in dark theme is that it isn't very scalable. Our floaty background color is pretty much at the limit of accessibility to ensure passing contrast with other interactive elements and status colors.

So we can't get any lighter, but another possible solution is finding an in-between shade that still works.

Solution A: Keep sticky + floaty the same color/approach, find a solution for floaty-on-sticky (if needed, built-in shadow might be enough here)

Solution B: Add another background color between secondary background and floaty to accommodate a different color for sticky. So the order from darkest to lightest background would be:

• Background 100
• Background 200
• Sticky background color
• Floaty background color

@mcoker @mcarrano Any thoughts on those two ideas?

[mcoker]

@mceledonia this works for me. I think it's good to have both, even if they're the same color everywhere currently.

Another question is around the naming. In CSS, when you make an element sticky, you just say that the element should stick to some edge as you scroll. We can't tell the difference between whether something is sticky and "stuck" (to the edge), or sticky and will be stuck when the element reaches some edge. To give an example, in this codepen, every 5th element is "sticky". They're "sticky" all the time, but only "stuck" when they reach the top of the viewport as you scroll. https://codepen.io/mcoker/pen/YzOwVLd

In this example, the first element is "sticky", and it's "stuck" by default since it is the first element. https://codepen.io/mcoker/pen/PodZjZP

When something is "stuck", there is little differentiation between that and when some element appears sticky/stuck and when a section just scrolls its overflow. An example of the latter is the page component - the header (and vertical nav I guess?) are kinda "stuck", and the page content scrolls. A more literal example are these 2 page demos.

This demo shows the top section as sticky, so the cards scroll underneath - https://www.patternfly.org/v4/components/page/html-demos/sticky-section-group/

This demo shows the card section as scrollable, so the top section (and footer, but ignore that) appear sticky, just like the previous demo - https://www.patternfly.org/v4/components/page/html-demos/overflow-scroll/

Questions:

In a token system, would the top section in both of those page demos use the same token to get the same background/shadow treatment? And if so - would we still call it "sticky"? Or maybe call it "over" or something like that?

If something is "sticky", but not in the "stuck" position - do we want to impose a background/shadow/etc?

[mcarrano]

I'm going to close this as there is no further action needed for v4 dark theme. This is also being addressed as part of the tokening system for v5.