From c7e0b51a65da23e70c3b58f70ac8b632976c6b3f Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 15 Dec 2023 15:50:17 -0800
Subject: [PATCH 1/2] fix(table-cell): Fix background css variable

---
 .../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..1c829c4201f 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 selected>
+      <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 selected>
+      <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">

From 424346ac3e05c82c7cf25b1eb0a3ff5a1fb541d5 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 15 Dec 2023 16:28:48 -0800
Subject: [PATCH 2/2] Clean up

---
 .../calcite-components/src/components/table/table.stories.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
index 1c829c4201f..4239a6fc65d 100644
--- a/packages/calcite-components/src/components/table/table.stories.ts
+++ b/packages/calcite-components/src/components/table/table.stories.ts
@@ -964,13 +964,13 @@ export const tableCellCssBackgroundVariable_TestOnly = (): string =>
       <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 selected>
+    <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 selected>
+    <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>