feat(panel): Add component tokens

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.d.ts

@@ -77,7 +77,6 @@ import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
-import { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components";
 import { SortHandleMessages } from "./components/sort-handle/assets/sort-handle/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
@@ -170,7 +169,6 @@ export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
-export { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components";
 export { SortHandleMessages } from "./components/sort-handle/assets/sort-handle/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
@@ -4736,7 +4734,7 @@ export namespace Components {
         /**
           * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
          */
-        "flipPlacements": FlipPlacement1[];
+        "flipPlacements": FlipPlacement[];
         /**
           * Specifies the label of the component.
          */
@@ -4765,12 +4763,12 @@ export namespace Components {
         /**
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
-        "overlayPositioning": OverlayPositioning1;
+        "overlayPositioning": OverlayPositioning;
         /**
           * Determines where the component will be positioned relative to the container element.
           * @default "bottom-start"
          */
-        "placement": MenuPlacement1;
+        "placement": MenuPlacement;
         /**
           * Specifies the size of the component.
          */
@@ -12788,7 +12786,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
          */
-        "flipPlacements"?: FlipPlacement1[];
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Specifies the label of the component.
          */
@@ -12841,12 +12839,12 @@ declare namespace LocalJSX {
         /**
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
-        "overlayPositioning"?: OverlayPositioning1;
+        "overlayPositioning"?: OverlayPositioning;
         /**
           * Determines where the component will be positioned relative to the container element.
           * @default "bottom-start"
          */
-        "placement"?: MenuPlacement1;
+        "placement"?: MenuPlacement;
         /**
           * Specifies the size of the component.
          */

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

@@ -16,6 +16,8 @@
  * @prop --calcite-dialog-offset-x: Specifies the horizontal offset of the component.
  * @prop --calcite-dialog-offset-y: Specifies the vertical offset of the component.
  * @prop --calcite-dialog-background-color: Specifies the background color of the component.
+ * @prop --calcite-dialog-corner-radius: Specifies the corner radius of the component.
+
  */
 
 :host {
@@ -119,6 +121,7 @@ calcite-panel {
   --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-background-color: var(--calcite-dialog-background-color);
+  --calcite-panel-corner-radius: var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-round));
 }
 
 .dialog {
@@ -131,14 +134,13 @@ calcite-panel {
     opacity-0
     shadow-2-sm
     z-modal
-    rounded
     relative;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
   transition:
     inset-block var(--calcite-internal-animation-timing-slow) $easing-function,
     opacity var(--calcite-internal-animation-timing-slow) $easing-function;
-
+  border-radius: var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-round));
   min-inline-size: var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));
   max-inline-size: var(--calcite-dialog-max-size-x, 100%);
   min-block-size: var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));

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

@@ -671,15 +671,166 @@ describe("calcite-panel", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
-      "--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>
+        <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-shadow": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "boxShadow",
+        },
+        */
+        "--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-content-top-background-color": {
+          shadowSelector: `.${CSS.contentTop}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-content-bottom-background-color": {
+          shadowSelector: `.${CSS.contentBottom}`,
+          targetProp: "backgroundColor",
+        },
+        /*
+        "--calcite-panel-border-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "boxShadow",
+        },
+        "--calcite-panel-border-color: {
+          shadowSelector: `.${CSS.header}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-panel-border-color": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-panel-border-color": {
+          shadowSelector: `.${CSS.contentTop}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-panel-border-color": {
+          shadowSelector: `.${CSS.contentBottom}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-panel-border-color": {
+          shadowSelector: ``,
+          targetProp: "borderColor",
+        },
+        */
+        "--calcite-panel-space": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "padding",
+        },
+        /*
+        "--calcite-panel-header-content-space": {
+          shadowSelector: `.${CSS.header}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-footer-space": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "padding",
+        },
+        */
+        "--calcite-panel-content-top-space": {
+          shadowSelector: `.${CSS.contentTop}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-content-bottom-space": {
+          shadowSelector: `.${CSS.contentBottom}`,
+          targetProp: "padding",
+        },
+        /*
+        "--calcite-panel-actions-background-color": {
+          shadowSelector: ``,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-actions-background-color-hover": {
+          shadowSelector: ``,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-actions-background-color-pressed": {
+          shadowSelector: ``,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-actions-text-color": {
+          shadowSelector: ``,
+          targetProp: "color",
+        },
+        "--calcite-panel-actions-text-color-pressed": {
+          shadowSelector: ``,
+          targetProp: "color",
+        },
+        */
+        "--calcite-panel-content-space": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "padding",
+        },
+        /*
+        "--calcite-panel-footer-padding": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-header-border-block-end": {
+          shadowSelector: `.${CSS.header}`,
+          targetProp: "borderColor",
+        },
+        */
       },
-    });
+    );
   });
 });