Shadow DOM

[MatthewDriscoll]

This question is more for the ESRI team.  In this blog it states "To customize the style, you can use the documented design tokens and component css variables to style components".  Where does one find the documentation for both the tokens and css variables?  Is there any available training, resources, blogs, ect, that can help us learn and navigate the Shadow DOM of these new components?

[Sage_Wall]

Great question @MatthewDriscoll ,

Several components like arcgis-map, arcgis-scene, and others—include a Styles section in their documentation that lists the available CSS variables (these are not inherited from the Calcite Design System).

The components also use tokens (css variables) defined by Calcite, which you can find here:
https://developers.arcgis.com/calcite-design-system/foundations/tokens/reference/

To determine which Calcite tokens or CSS variables are being applied, you may need to inspect the elements using your browser’s developer tools. If you encounter something you can’t modify and have a strong business case for doing so, please let us know—we may be able to expose a variable to support that need. Hopefully we can create more resources showing how this is done in more detail the new future.  There are a few examples in the Samples but they aren't easy to find.... we should improve that.
https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/
https://developers.arcgis.com/javascript/latest/sample-code/layers-dimension/
https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-control-points/
https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-interactive/

and others