feat(dialog, panel): Add css properties for background-color (#10387)

**Related Issue:** #10093 ## Summary Adds `--calcite-dialog-background-color` to Dialog Adds `--calcite-panel-background-color` to Panel Further token work may occur through related issues: #7180, #10380, etc.
Esri · Sep 25, 2024 · d725293 · d725293
1 parent 4f8c16c
commit d725293
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -1110,6 +1110,10 @@ describe("calcite-dialog", () => {
           shadowSelector: `.${CSS.dialog}`,
           targetProp: "insetBlockStart",
         },
+        "--calcite-dialog-background-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-background-color",
+        },
       },
     );
 

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -15,6 +15,7 @@
  * @prop --calcite-dialog-border-color: Specifies the component's border color.
  * @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.
  */
 
 :host {
@@ -117,6 +118,7 @@ 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-background-color: var(--calcite-dialog-background-color);
 }
 
 .dialog {

diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -676,6 +676,10 @@ describe("calcite-panel", () => {
         shadowSelector: `.${CSS.contentWrapper}`,
         targetProp: "padding",
       },
+      "--calcite-panel-background-color": {
+        shadowSelector: `.${CSS.contentWrapper}`,
+        targetProp: "backgroundColor",
+      },
     });
   });
 });
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
@@ -6,6 +6,7 @@
  * @prop --calcite-panel-content-space: Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
  * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
+ * @prop --calcite-panel-background-color: Specifies the background color of the component.
  */
 
 :host {
@@ -161,12 +162,12 @@
   flex-col
   flex-nowrap
   items-stretch
-  bg-background
   overflow-auto
   h-full
   focus-base
   relative;
   padding: var(--calcite-panel-content-space, 0);
+  background: var(--calcite-panel-background-color, var(--calcite-color-background));
 }
 
 .content-wrapper:focus-visible {