Esri · eriklharper · Jul 10, 2024 · Jul 10, 2024 · Jul 10, 2024 · Jul 11, 2024
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -8,13 +8,13 @@
  * @prop --calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
  * @prop --calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
- * @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar.
- * @prop --calcite-stepper-step-bar-fill-color-hover : Specifies fill color for step-bar when hovered.
- * @prop --calcite-stepper-step-bar-selected-fill-color : Specifies fill color for selected step-bar.
- * @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar.
- * @prop --calcite-stepper-step-bar-completed-fill-color-hover : Specifies fill color for completed step-bar when hovered.
- * @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar.
- * @prop --calcite-stepper-step-bar-error-fill-color-hover : Specifies fill color for error step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-fill-color: Specifies fill color for step-bar.
+ * @prop --calcite-stepper-step-bar-fill-color-hover: Specifies fill color for step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-selected-fill-color: Specifies fill color for selected step-bar.
+ * @prop --calcite-stepper-step-bar-complete-fill-color: Specifies fill color for completed step-bar.
+ * @prop --calcite-stepper-step-bar-completed-fill-color-hover: Specifies fill color for completed step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-error-fill-color: Specifies fill color for error step-bar.
+ * @prop --calcite-stepper-step-bar-error-fill-color-hover: Specifies fill color for error step-bar when hovered.
  *
  */
 

diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
@@ -49,6 +49,44 @@
 
   <body>
     <demo-dom-swapper>
+      <demo-theme
+        tokens="
+          --calcite-card-accent-color-selected,
+          --calcite-card-background-color,
+          --calcite-card-border-color,
+          --calcite-card-corner-radius,
+          --calcite-card-group-gap,
+          --calcite-card-loader-color-end,
+          --calcite-card-loader-color-middle,
+          --calcite-card-loader-color-start,
+          --calcite-card-selection-background-color,
+          --calcite-card-selection-background-color-active,
+          --calcite-card-selection-background-color-hover,
+          --calcite-card-selection-background-color-selected,
+          --calcite-card-selection-icon-color,
+          --calcite-card-selection-icon-color-hover,
+          --calcite-card-selection-icon-color-selected,
+          --calcite-card-shadow"
+      >
+        <calcite-card-group>
+          <calcite-card>
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+          <calcite-card selection-mode="single">
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+          <calcite-card selected selection-mode="single">
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+          <calcite-card loading>
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+        </calcite-card-group>
+      </demo-theme>
       <h1 style="margin: 0 auto; text-align: center">Card</h1>
       <div class="parent">
         <div class="child">Adjust selection mode of demo Chip Groups</div>

diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
@@ -41,6 +41,40 @@
 
   <body>
     <demo-dom-swapper>
+      <demo-theme
+        tokens="
+          --calcite-stepper-action-background-color,
+          --calcite-stepper-action-background-color-hover,
+          --calcite-stepper-action-background-color-active,
+          --calcite-stepper-item-description-text-color,
+          --calcite-stepper-item-heading-text-color,
+          --calcite-stepper-item-icon-color,
+          --calcite-stepper-item-number-text-color,
+          --calcite-stepper-item-text-color,
+          --calcite-stepper-step-bar-fill-color,
+          --calcite-stepper-step-bar-fill-color-hover,
+          --calcite-stepper-step-bar-selected-fill-color,
+          --calcite-stepper-step-bar-complete-fill-color,
+          --calcite-stepper-step-bar-completed-fill-color-hover,
+          --calcite-stepper-step-bar-error-fill-color,
+          --calcite-stepper-step-bar-error-fill-color-hover"
+      >
+        <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+          <calcite-stepper-item heading="Confirm and complete">
+            <div>Step 4 Content Goes Here</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Choose method" selected>
+            <div>Step 1 Content Goes Here</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Compile member list" complete>
+            <div>Step 2 Content Goes Here</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+            <div>Step 3 Content Goes Here</div>
+          </calcite-stepper-item>
+        </calcite-stepper>
+      </demo-theme>
+
       <!--
       **************************************************
       * SMALL horizontal-single

diff --git a/packages/calcite-components/src/demos/switch.html b/packages/calcite-components/src/demos/switch.html
@@ -36,6 +36,17 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-switch-corner-radius,
+        --calcite-switch-handle-background-color,
+        --calcite-switch-handle-border-color,
+        --calcite-switch-track-background-color,
+        --calcite-switch-border-color"
+    >
+      <calcite-switch></calcite-switch>
+      <calcite-switch checked></calcite-switch>
+    </demo-theme>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Switch</h1>
 

diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html
@@ -39,6 +39,35 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tile-background-color,
+        --calcite-tile-border-color,
+        --calcite-tile-description-text-color,
+        --calcite-tile-heading-text-color,
+        --calcite-tile-icon-color,
+        --calcite-tile-selection-icon-color-hover"
+    >
+      <calcite-tile-group selection-mode="single">
+        <calcite-tile
+          heading="Tile heading lorem ipsum"
+          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+          icon="layers"
+        ></calcite-tile>
+        <calcite-tile
+          heading="Tile heading lorem ipsum"
+          description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+          icon="layers"
+          selected
+        ></calcite-tile>
+        <calcite-tile
+          heading="Tile heading lorem ipsum"
+          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+          icon="layers"
+        ></calcite-tile>
+      </calcite-tile-group>
+    </demo-theme>
+
     <demo-dom-swapper>
       <div class="parent">
         <div class="child right-aligned-text">scale</div>

diff --git a/packages/calcite-components/src/demos/tip-manager.html b/packages/calcite-components/src/demos/tip-manager.html
@@ -40,6 +40,99 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tip-background-color,
+        --calcite-tip-border-color,
+        --calcite-tip-close-background-color-active,
+        --calcite-tip-close-background-color-hover,
+        --calcite-tip-close-background-color,
+        --calcite-tip-close-text-color-hover,
+        --calcite-tip-close-text-color,
+        --calcite-tip-heading-text-color,
+        --calcite-tip-text-color,
+        --calcite-tip-group-background-color,
+        --calcite-tip-group-text-color,
+        --calcite-tip-manager-background-color,
+        --calcite-tip-manager-border-color,
+        --calcite-tip-manager-close-background-color-active,
+        --calcite-tip-manager-close-background-color-hover,
+        --calcite-tip-manager-close-background-color,
+        --calcite-tip-manager-close-icon-color-active,
+        --calcite-tip-manager-close-icon-color-hover,
+        --calcite-tip-manager-close-icon-color,
+        --calcite-tip-manager-close-text-color-active,
+        --calcite-tip-manager-close-text-color-hover,
+        --calcite-tip-manager-close-text-color,
+        --calcite-tip-manager-content-height,
+        --calcite-tip-manager-heading-text-color,
+        --calcite-tip-manager-height,
+        --calcite-tip-manager-text-color,
+        --calcite-tip-max-width"
+    >
+      <calcite-tip-manager>
+        <calcite-tip-group group-title="Astronomy">
+          <calcite-tip heading="The Red Rocks and Blue Water">
+            <img
+              slot="thumbnail"
+              width="1000"
+              height="600"
+              src="./_assets/images/placeholder.svg"
+              alt="This is an image of nature."
+            />
+            <p>
+              This tip is how a tip should really look. It has a landscape or square image and a small amount of text
+              content. This paragraph is in an "info" slot.
+            </p>
+            <p>
+              This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is a
+              placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful
+              content (also called greeking). Replacing the actual content with placeholder text allows designers to
+              design the form of the content before the content itself has been produced.
+            </p>
+            <a href="http://www.esri.com">This is the "link" slot.</a>
+          </calcite-tip>
+          <calcite-tip heading="The Long Trees">
+            <img
+              slot="thumbnail"
+              width="1000"
+              height="600"
+              src="./_assets/images/placeholder.svg"
+              alt="This is an image of nature."
+            />
+            <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
+            <p>In astronomy, the terms object and body are often used interchangeably.</p>
+            <a href="http://www.esri.com">View Esri</a>
+          </calcite-tip>
+        </calcite-tip-group>
+        <calcite-tip heading="Square Nature">
+          <img
+            slot="thumbnail"
+            width="1000"
+            height="600"
+            src="./_assets/images/placeholder.svg"
+            alt="This is an image of nature."
+          />
+          <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
+          <p>In astronomy, the terms object and body are often used interchangeably.</p>
+          <p>
+            In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual
+            form of a document without relying on meaningful content (also called greeking). Replacing the actual
+            content with placeholder text allows designers to design the form of the content before the content itself
+            has been produced.
+          </p>
+          <a href="http://www.esri.com">View Esri</a>
+        </calcite-tip>
+        <calcite-tip heading="The lack of imagery">
+          <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
+          <p>
+            This is the next paragraph and should show how wide the content area is now. Of course, the width of the
+            overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.
+          </p>
+          <a href="http://www.esri.com">View Esri</a>
+        </calcite-tip>
+      </calcite-tip-manager>
+    </demo-theme>
     <demo-dom-swapper>
       <!-- tip with thumbnail -->
       <div class="parent">

diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
@@ -31,6 +31,23 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tooltip-background-color,
+        --calcite-tooltip-border-color,
+        --calcite-tooltip-corner-radius,
+        --calcite-tooltip-shadow,
+        --calcite-tooltip-text-color,
+        --calcite-tooltip-z-index"
+    >
+      <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref" open>
+        <p>placement: auto</p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </calcite-tooltip>
+      <calcite-button appearance="outline" id="tooltip-auto-ref">auto</calcite-button>
+    </demo-theme>
+
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
 

diff --git a/packages/calcite-components/src/demos/tree.html b/packages/calcite-components/src/demos/tree.html
@@ -30,6 +30,85 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tree-item-checkbox-background-color-checked,
+        --calcite-tree-item-checkbox-background-color,
+        --calcite-tree-item-checkbox-shadow-checked,
+        --calcite-tree-item-checkbox-shadow-hover,
+        --calcite-tree-item-checkbox-shadow,
+        --calcite-tree-item-chevron-color-active,
+        --calcite-tree-item-chevron-color-hover,
+        --calcite-tree-item-chevron-color,
+        --calcite-tree-item-icon-color,
+        --calcite-tree-item-line-color,
+        --calcite-tree-item-selection-icon-color,
+        --calcite-tree-item-text-color"
+    >
+      <calcite-tree id="root" lines>
+        <calcite-tree-item icon-start="palette" expanded>
+          Parent
+          <calcite-tree slot="children">
+            <calcite-tree-item id="child">child</calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+      <calcite-tree selection-mode="ancestors">
+        <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+        <calcite-tree-item expanded>
+          <span>Child 2</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
+            <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Grandchild 3</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+      <calcite-tree selection-mode="multiple">
+        <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+        <calcite-tree-item expanded>
+          <span>Child 2</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
+            <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Grandchild 3</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+      <calcite-tree selection-mode="single">
+        <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+        <calcite-tree-item expanded>
+          <span>Child 2</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item><span>Grandchild 1</span></calcite-tree-item>
+            <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+            <calcite-tree-item>
+              <span>Grandchild 3</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+    </demo-theme>
+
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Tree</h1>