feat(panel): Add component tokens (#10822)

**Related Issue:** #7180 

This will also serve as a pattern for consuming component like Dialog,
Sheet, etc.

## Summary

`--calcite-panel-corner-radius`: Specifies the corner radius of the
component.
`--calcite-panel-heading-text-color`: Specifies the text color of the
component's `heading`.
`--calcite-panel-description-text-color`: Specifies the text color of
the component's `description`.
`--calcite-panel-border-color`: Specifies the border color of the
component.

`--calcite-panel-background-color`: Specifies the background color of
the component.
`--calcite-panel-header-background-color`: Specifies the background
color of the component's footer.
`--calcite-panel-footer-background-color`: Specifies the background
color of the component's footer.

`--calcite-panel-space`: Specifies the padding of the component's
`"unnamed (default)"` slot.
`--calcite-panel-header-content-space`: Specifies the padding of the
`"header-content"` slot.
`--calcite-panel-footer-space`: Specifies the padding of the component's
footer.

`--calcite-action-background-color`: Specifies the background color of
the component's `closable`, `collapsible`, and `back` Action components.
Will apply to any slotted Calcite Action components.
`--calcite-action-background-color-hover`: Specifies the background
color of the component's `closable`, `collapsible`, and `back` Action
components when hovered. Will apply to any slotted Calcite Action
components.
`--calcite-action-background-color-pressed`: Specifies the background
color of the component's `closable`, `collapsible`, and `back` Action
components when pressed. Will apply to any slotted Calcite Action
components.
`--calcite-action-text-color-hover`: Specifies the text and icon color
of the component's `closable`, `collapsible`, and `back` Action
components when hovered. Will apply to any slotted Calcite Action
components.
`--calcite-action-text-color-pressed`: Specifies the text and icon color
of the component's `closable`, `collapsible`, and `back` Action
components when pressed. Will apply to any slotted Calcite Action
components.
`--calcite-popover-border-color`: Specifies the border color of the
component's Calcite Popover component, which is used to display a
Calcite Action Menu when slotted Calcite Actions are present in the
`header-actions-end` slot. Will apply to any slotted Calcite Popover
components.

`--calcite-panel-content-space`: [Deprecated] Specifies the padding of
the component's content. Use `--calcite-panel-space` instead.
`--calcite-panel-footer-padding`: [Deprecated] Specifies the padding of
the component's footer. Use `--calcite-panel-footer-space` instead.
`--calcite-panel-header-border-block-end`: [Deprecated] Specifies the
component header's block end border. Use `--calcite-panel-border-color`
instead.

packages/calcite-components/.stylelintrc.cjs

@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [

packages/calcite-components/src/components/dialog/dialog.e2e.ts

@@ -1108,7 +1108,7 @@ describe("calcite-dialog", () => {
         },
         "--calcite-dialog-footer-space": {
           shadowSelector: `.${CSS.panel}`,
-          targetProp: "--calcite-panel-footer-padding",
+          targetProp: "--calcite-panel-footer-space",
         },
         "--calcite-dialog-offset-x": {
           shadowSelector: `.${CSS.dialog}`,

packages/calcite-components/src/components/dialog/dialog.scss

@@ -116,8 +116,8 @@
 
 calcite-panel {
   --calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
-  --calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
-  --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
+  --calcite-panel-footer-space: var(--calcite-dialog-footer-space);
+  --calcite-panel-border-color: var(--calcite-dialog-border-color);
   --calcite-panel-background-color: var(--calcite-dialog-background-color);
 }
 

packages/calcite-components/src/components/panel/panel.e2e.ts

@@ -667,15 +667,118 @@ describe("calcite-panel", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
-      "--calcite-panel-content-space": {
-        shadowSelector: `.${CSS.contentWrapper}`,
-        targetProp: "padding",
+    themed(
+      html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
+        <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+        <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+        <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+        <div slot="content-top">To continue, you must agree to the terms</div>
+        <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+          <calcite-checkbox></calcite-checkbox>I agree to the terms
+        </calcite-label>
+        <p>
+          Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+          fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
+          sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
+          vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
+          iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
+          vestibulum risus. Integer non erat libero.
+        </p>
+        <p>
+          Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec malesuada
+          velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae, sollicitudin
+          mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl varius eu.
+          Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo. Donec eget
+          pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus maximus lacus
+          nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor accumsan justo,
+          at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+        </p>
+        <p>
+          Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+          fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
+          sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
+          vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
+          iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
+          vestibulum risus. Integer non erat libero.
+        </p>
+        <calcite-button slot="footer-end"> I'm done </calcite-button>
+      </calcite-panel>`,
+      {
+        "--calcite-panel-corner-radius": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-panel-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          targetProp: "color",
+        },
+        "--calcite-panel-description-text-color": {
+          shadowSelector: `.${CSS.description}`,
+          targetProp: "color",
+        },
+        "--calcite-panel-background-color": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-header-background-color": {
+          shadowSelector: `.${CSS.header}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-footer-background-color": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-border-color": [
+          {
+            shadowSelector: `.${CSS.header}`,
+            targetProp: "borderBlockEndColor",
+          },
+          {
+            shadowSelector: `.${CSS.contentTop}`,
+            targetProp: "borderBlockStartColor",
+          },
+          {
+            shadowSelector: `.${CSS.contentBottom}`,
+            targetProp: "borderBlockStartColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderBlockStartColor",
+          },
+        ],
+        "--calcite-panel-space": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-footer-space": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-content-space": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "padding",
+        },
       },
-      "--calcite-panel-background-color": {
-        shadowSelector: `.${CSS.contentWrapper}`,
-        targetProp: "backgroundColor",
+    );
+    themed(
+      html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
+        <div slot="header-content">Custom header content</div>
+        <p>
+          Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+          fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
+          sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
+          vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
+          iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
+          vestibulum risus. Integer non erat libero.
+        </p>
+        <calcite-button slot="footer-end"> I'm done </calcite-button>
+      </calcite-panel>`,
+      {
+        "--calcite-panel-header-content-space": {
+          shadowSelector: `.${CSS.headerSlottedContent}`,
+          targetProp: "padding",
+        },
       },
-    });
+    );
   });
 });