From 9e5c59b94f4f8291788cd9a8734b2ea47fd60329 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Fri, 15 Dec 2023 16:43:38 -0800
Subject: [PATCH] fix(table-cell): Fix background css variable (#8439)

**Related Issue:** #8380

## Summary
Fixes a typo that caused this variable not to work, and removes an
unused border variable from the initial Table PR that snuck through.
---
 .../src/components/table-cell/table-cell.scss |  7 ++---
 .../src/components/table/table.stories.ts     | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss
index c8f1206a6ec..493332b12ba 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.scss
+++ b/packages/calcite-components/src/components/table-cell/table-cell.scss
@@ -4,12 +4,10 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-table-cell-background: Specifies the background color of the component.
- * @prop --calcite-table-cell-border-color: Specifies the border color of the component.
  */
 
 :host {
-  --calcite-internal-table-cell-background-internal: var(--calcite-table-cell-background, transparent);
-  --calcite-internal-table-cell-border-color-internal: var(--calcite-table-cell-border-color, transparent);
+  --calcite-internal-table-cell-background: var(--calcite-table-cell-background, transparent);
   @apply contents;
 }
 
@@ -58,8 +56,7 @@ td {
 }
 
 .selected-cell:not(.number-cell):not(.footer-cell) {
-  --calcite-table-cell-background: var(--calcite-color-foreground-current);
-  background: var(--calcite-color-foreground-current);
+  --calcite-internal-table-cell-background: var(--calcite-color-foreground-current);
 }
 
 .selection-cell.selected-cell {
diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
index 9cfe4e47a22..4239a6fc65d 100644
--- a/packages/calcite-components/src/components/table/table.stories.ts
+++ b/packages/calcite-components/src/components/table/table.stories.ts
@@ -956,6 +956,34 @@ export const localized_TestOnly = (): string => html`<calcite-table
   </calcite-table-row>
 </calcite-table>`;
 
+export const tableCellCssBackgroundVariable_TestOnly = (): string =>
+  html`<calcite-table zebra caption="Simple-zebra table" dir="rtl" selection-mode="multiple">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(20, 200, 50, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(200, 50, 20, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(20, 200, 50, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell style="--calcite-table-cell-background: rgba(200, 50, 20, 0.15)">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
+
 export const darkModeRTL_TestOnly = (): string =>
   html`<calcite-table zebra caption="Simple-zebra table" dir="rtl">
     <calcite-table-row slot="table-header">