Changing style for calcite block headings

[TheGamer]

I'm trying to change the calcite heading to bold. I looked through the CSS property and found there is a property called -for changing it to bold:

--calcite-font-weight-bold:600

But I'm not sure how to make the following headings bold: Heading 1, heading 2

<script
      src="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.esm.js"
      type="module"
></script>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.css"
    />
<calcite-shell>
  <calcite-shell-panel slot="panel-start" position="start" resizable="false">
     <calcite-panel heading="Widget">
        <calcite-block collapsible heading="Heading 1" open>
             <calcite-block collapsible heading="Heading Subsection 1" closed>
             </calcite block>
             <calcite-block collapsible heading="Heading Subsection 2" closed>
             </calcite block>
        </calcite-block>
        <calcite-block collapsible heading="Heading 2" open>
         <!--contains calcite blocks for heading 2*/-->
        </calcite-block>

     </calcite-panel>
  </calcite-shell-panel>
</calcite shell>
    

@Sage_Wall 

[Sage_Wall]

Hi @TheGamer , I'm not really sure but I'm checking around to see if I can get you an answer :).  It's not one of the css variables listed in the doc.  https://developers.arcgis.com/calcite-design-system/components/block/#styles

[TheGamer]

Hi @Sage_Wall, is it possible to change the color of the heading container, so the calcite block for heading 1, and heading 2 is set so specific color

[Sage_Wall]

Hi @TheGamer , I apologize but I'm not that familiar with customizing and styling calcite components.  I think I'm going to blindly tag @BenElan and see if he might be able to help.  He knows a lot more about calcite than I do.

[jdyerLACSD]

Because of the shadow DOM, changing CSS variable values is the easiest way to go.  Calcite block headings' font weights use the variable --calcite-font-weight-medium, so you just need to change it's value in your CSS.

I added the class "main-block" to your Heading 1 and Heading 2 blocks, and I added the class "sub-block" to your Subheading blocks.  Then I just changed the value of the CSS variable for the .main-block blocks and set it back to default for the .sub-block blocks, since those are nested and thus affected by the .main-block changed variable.  Note that if you had other calcite elements inside your .main-blocks that referenced this CSS variable, you'd have to explicitly change those back to default too, similar to the .sub-blocks.

<script
      src="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.esm.js"
      type="module"
></script>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.css"
    />
<style>
  calcite-block.main-block {
    --calcite-font-weight-medium: 800;
  }
  calcite-block.sub-block {
    --calcite-font-weight-medium: 500;
  }
</style>
<calcite-shell>
  <calcite-shell-panel slot="panel-start" position="start" resizable="false">
     <calcite-panel heading="Widget">
        <calcite-block class="main-block" collapsible heading="Heading 1" open>
             <calcite-block collapsible heading="Heading Subsection 1" class="sub-block" closed>
             </calcite-block>
             <calcite-block collapsible heading="Heading Subsection 2" class="sub-block" closed>
             </calcite block>
        </calcite-block>
        <calcite-block collapsible heading="Heading 2" class="main-block" open>
         <!--contains calcite blocks for heading 2*/-->
        </calcite-block>

     </calcite-panel>
  </calcite-shell-panel>
</calcite shell>