ArcGIS Maps SDK for JavaScript 4.29 LayerList Widget ListItem Font Size Editing

[DrewNemecekIp]

We are upgrading our JavaScript Maps SDK application, and I have noticed that the layer list widget has a much smaller font.

The widget looked like this at 4.21.

Now it looks like this at 4.29.

How can I increase the font size of the list items this widget? 

I have attempted some CSS styling, but it is not working. My guess is because this styling is happening within ESRI's JavaScript code.

[Sage_Wall · Accepted solution]

Hi @DrewNemecekIp ,

We refactored the LayerList to use calcite components in between 4.21 and 4.29.  When styling calcite components you need to use css variables.  More info can be found here for calcite typography: https://developers.arcgis.com/calcite-design-system/foundations/typography/

      calcite-list, calcite-button {
        --calcite-font-size--1: 24px;
        --calcite-color-text-1: #3c83b7;
        --calcite-color-text-2: #3c83b7;
        --calcite-color-text-3: #3c83b7;
      }

I modified the layer list sample to change the font size in the code pen https://codepen.io/sagewall/pen/yLdMVNo