Custom :focus styles about calcite-design-system HOT 13 CLOSED

@asangma @julio8a @paulcpederson @macandcheese

Here is the latest update based on a few meetings and talks with folks. See the Rules png pasted here.

• It is a basic cascading rule set using increments of 2px.
• Light theme/dark theme.
• Rounded corners when applicable
• Simple transitions
• See this link for a super quick demo https://codepen.io/bslayer/pen/qBEMgQw

Next steps will be getting a more high fidelity demo, and then testing.

After that, Ideally we will test 2 designs. A) Being the styles shown here and B) being an even more super noticeable color way (black and white instead of blue)

from calcite-design-system.

Looks good!

from calcite-design-system.

Nice!

from calcite-design-system.

Yeah, @macandcheese and I talked about this a bit. Because these styles are scoped to the component, it is totally possible to define custom styles for each component. Probably a shared variable or mixin would be the best like @include focus-outline()

from calcite-design-system.

(╭ರᴥ•́)
I like it.
I'm guessing a buncha designs would help this along.

from calcite-design-system.

cc @oknoway

from calcite-design-system.

@bstifle do you have a set of designs for focus states library-wide? If we can get away with a single custom focus style everywhere that would be better, but we could also do one-off focus styles for every element as long as they're visually cohesive.

from calcite-design-system.

cc @asangma and Mitch as well re: our conversation yesterday

from calcite-design-system.

Just to note, there is an open issue related to this in the arcgis-components Share dialog.

from calcite-design-system.

https://devtopia.esri.com/WebGIS/arcgis-portal-app/issues/26747

from calcite-design-system.

@asangma did you all have any thoughts here?

from calcite-design-system.

There's 3 main things we are trying to solve with this design, weighted by importance:

1. Consistency across Esri properties and components
2. Noticeable, meaningful, and WCAG-able—While not being overly clunky and distracting.
3. Scalability and ease of use for current and future designs

from calcite-design-system.

moving this convo over at calcite-base Esri/calcite-base#19

from calcite-design-system.