fix(table): custom background hover colors (#1462)

* fix(table): use fallbacks, rename and deprecate css varsadd to cem * docs(table): add deprecation note to cssprop description * chore(table): add changeset
RedHat-UX · Jan 29, 2024 · 08722dd · 08722dd
1 parent 06e27d9
commit 08722dd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 21 deletions.
diff --git a/.changeset/sixty-lemons-smoke.md b/.changeset/sixty-lemons-smoke.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-table>`: corrected custom background hover color tokens.
diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css
@@ -1,23 +1,36 @@
 rh-table {
-  --rh-table-row-border:
-    var(--rh-border-width-sm, 1px)
-    solid
-    var(--rh-color-border-subtle-on-light, #c7c7c7);
-  --rh-table-row-background-color:
-    rgb(
+  --_row-border:
+    var(
+        --rh-table-row-border,
+        var(--rh-border-width-sm, 1px)
+        solid
+        var(--rh-color-border-subtle-on-light, #c7c7c7)
+      );
+  --_row-background-hover-color:
+    var(
+        --rh-table-row-background-hover-color,
         var(
-          --rh-color-gray-20-rgb,
-          224 224 224
+          /* rh-table-row-background-color is deprecated
+          please use --rh-table-row-background-hover-color*/
+          --rh-table-row-background-color,
+          rgb(
+            var(--rh-color-gray-20-rgb, 224 224 224)
+            / var(--rh-opacity-40, 40%)
+          )
         )
-        / var(--rh-opacity-40, 40%)
       );
-  --rh-table-column-background-color:
-    rgb(
+  --_column-background-hover-color:
+    var(
+        --rh-table-column-background-hover-color,
         var(
-          --rh-color-blue-50-rgb,
-          0 102 204
+          /* rh-table-column-background-color is deprecated
+          please use --rh-table-column-background-hover-color */
+          --rh-table-column-background-color,
+          rgb(
+            var(--rh-color-blue-50-rgb, 0 102 204)
+            / var(--rh-opacity-10, 10%)
+          )
         )
-        / var(--rh-opacity-10, 10%)
       );
 }
 
@@ -38,11 +51,11 @@ rh-table thead th {
 }
 
 rh-table tr {
-  border-bottom: var(--rh-table-row-border);
+  border-bottom: var(--_row-border);
 }
 
 rh-table tr:hover {
-  background: var(--rh-table-row-background-color);
+  background: var(--_row-background-hover-color);
 }
 
 rh-table tr > * {
@@ -84,7 +97,7 @@ rh-table td {
 }
 
 rh-table :is(col.active) {
-  background: var(--rh-table-column-background-color);
+  background: var(--_column-background-hover-color);
 }
 
 @media (max-width: 768px) {
@@ -117,19 +130,19 @@ rh-table :is(col.active) {
   }
 
   rh-table thead ~ tbody tr:first-child {
-    border-top: var(--rh-table-row-border);
+    border-top: var(--_row-border);
   }
 
   rh-table thead ~ tbody tr:last-child {
-    border-bottom: var(--rh-table-row-border);
+    border-bottom: var(--_row-border);
   }
 
   rh-table thead ~ tbody tr:nth-child(even) {
-    background: var(--rh-table-row-background-color);
+    background: var(--_row-background-hover-color);
   }
 
   rh-table thead ~ tbody tr:hover {
-    background: var(--rh-table-column-background-color);
+    background: var(---_column-background-hover-color);
   }
 
   rh-table thead ~ tbody tr > * {

diff --git a/elements/rh-table/rh-table.ts b/elements/rh-table/rh-table.ts
@@ -18,6 +18,12 @@ import styles from './rh-table.css';
  *
  * @slot               - an HTML table
  * @slot    summary    - a brief description of the data
+ *
+ * @cssprop {<color>} --rh-table-row-background-color - deprecated use --rh-table-row-background-hover-color {@default `224 224 224 / 40%`}
+ * @cssprop {<color>} --rh-table-column-background-color - deprecated use --rh-table-column-background-hover-color {@default `0 102 204 / 10%`}
+ * @cssprop {<color>} --rh-table-row-background-hover-color - row hover background color {@default `224 224 224 / 40%`}
+ * @cssprop {<color>} --rh-table-column-background-hover-color - column hover background color {@default `0 102 204 / 10%`}
+ * @cssprop --rh-table-row-border - row border {@default `1px solid #c7c7c7`}
  */
 @customElement('rh-table')
 export class RhTable extends LitElement {