feat(table): color context support (#1373)

* feat(table): color context support * docs(table): remove nested demo code * fix(table): apply context styles * fix(table): remove context-provider * fix(table): remove import for provider * fix(table): update hover colors * fix(table): lint * fix(table): update row and column colors * fix(table): use crayon white instead of surface-lightest * chore(table): add changeset * fix(table): add colorContextProvider reconfigure lightdom to match * docs(table): update changeset * fix(table): direct parent selector compromise
RedHat-UX · Jan 5, 2024 · 18f802f · 18f802f
1 parent 05fbc27
commit 18f802f
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 40 deletions.
diff --git a/.changeset/calm-fishes-sleep.md b/.changeset/calm-fishes-sleep.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-table>`: added color palette and theme support
diff --git a/elements/rh-table/demo/color-context.html b/elements/rh-table/demo/color-context.html
@@ -0,0 +1,49 @@
+<rh-context-demo>
+  <rh-table>
+    <table>
+      <caption>
+        Concerts
+      </caption>
+      <colgroup>
+        <col>
+        <col>
+        <col>
+      </colgroup>
+      <thead>
+        <tr>
+          <th scope="col" data-label="Date">Date</th>
+          <th scope="col" data-label="Event">Event<rh-sort-button></rh-sort-button>
+          </th>
+          <th scope="col" data-label="Venue">Venue<rh-sort-button></rh-sort-button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Date">12 February</td>
+          <td data-label="Event">Waltz with Strauss</td>
+          <td data-label="Venue">Main Hall</td>
+        </tr>
+        <tr>
+          <td data-label="Date">24 March</td>
+          <td data-label="Event">The Obelisks</td>
+          <td data-label="Venue">West Wing</td>
+        </tr>
+        <tr>
+          <td data-label="Date">14 April</td>
+          <td data-label="Event">The What</td>
+          <td data-label="Venue">Main Hall</td>
+        </tr>
+      </tbody>
+    </table>
+    <small slot="summary">Dates and venues subject to change.</small>
+  </rh-table>
+</rh-context-demo>
+
+<link rel="stylesheet" href="../rh-table-lightdom.css">
+
+<script type="module">
+  import '@rhds/elements/rh-table/rh-table.js';
+
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+</script>
diff --git a/elements/rh-table/rh-sort-button.css b/elements/rh-table/rh-sort-button.css
@@ -1,6 +1,11 @@
 #sort-button {
   background-color: transparent;
   border: 0;
+  color: var(--rh-color-text-primary-on-light, #151515);
+}
+
+#sort-button.dark {
+  color: var(--rh-color-text-primary-on-dark, #ffffff);
 }
 
 #sort-button:after {

diff --git a/elements/rh-table/rh-sort-button.ts b/elements/rh-table/rh-sort-button.ts
@@ -1,9 +1,14 @@
 import { LitElement, html, svg } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import styles from './rh-sort-button.css';
+import { classMap } from 'lit/directives/class-map.js';
+
 import { ComposedEvent } from '@patternfly/pfe-core';
 
+import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
+
+import styles from './rh-sort-button.css';
+
 const DIRECTIONS_OPPOSITES = { asc: 'desc', desc: 'asc' } as const;
 
 export class RequestSortEvent extends ComposedEvent {
@@ -32,6 +37,8 @@ const paths = new Map(Object.entries({
 export class RhSortButton extends LitElement {
   static readonly styles = [styles];
 
+  @colorContextConsumer() private on?: ColorTheme;
+
   /** The button's sorting order */
   @property({
     reflect: true,
@@ -42,8 +49,9 @@ export class RhSortButton extends LitElement {
   @property() column?: string;
 
   render() {
+    const { on = '' } = this;
     return html`
-      <button id="sort-button" part="sort-button" @click="${this.sort}" aria-label="Sort">
+      <button id="sort-button" part="sort-button" @click="${this.sort}" aria-label="Sort" class="${classMap({ [on]: !!on })}">
         <span class="visually-hidden">${!this.sortDirection ? '' : `(sort${!this.column ? '' : ` by ${this.column}`} in ${this.sortDirection === 'asc' ? 'ascending' : 'descending'} order)`}</span>
         <span id="sort-indicator" part="sort-indicator">
           <svg fill="currentColor" 

diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css
@@ -1,57 +1,104 @@
-/* stylelint-disable max-line-length */
-:is(rh-table) table {
-  min-width: 100%;
-  margin: 0 auto;
-  table-layout: fixed;
-  border: 0;
-  border-collapse: collapse;
-
+rh-table,
+rh-table[color-palette="lightest"] {
   --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(
-        var(--rh-color-gray-10-rgb, 242 242 242) / var(--rh-opacity-40, 40%)
+        var(
+          --rh-color-gray-20-rgb,
+          224 224 224
+        )
+        / var(--rh-opacity-40, 40%)
+      );
+  --rh-table-column-background-color:
+    rgb(
+        var(
+          --rh-color-blue-50-rgb,
+          0 102 204
+        )
+        / var(--rh-opacity-10, 10%)
+      );
+}
+
+[color-palette="light"] > rh-table,
+rh-table[color-palette="light"],
+[color-palette="lighter"] > rh-table,
+rh-table[color-palette="lighter"] {
+  --rh-table-row-background-color:
+    rgb(
+        var(
+          --_rh-color-white-rgb, /* making private as currently doesn't exist */
+          255 255 255
+        )
+        / var(--rh-opacity-50, 50%)
       );
-  --rh-table-column-background-color: rgb(var(--rh-color-blue-10-rgb, 224 240 255));
 }
 
-:is(rh-table) thead th {
+[color-palette^="dark"] > rh-table,
+rh-table[color-palette^="dark"] {
+  --rh-table-row-background-color:
+    rgb(
+        var(
+          --_rh-color-white-rgb, /* making private as currently doesn't exist */
+          255 255 255
+        )
+        / var(--rh-opacity-10, 10%)
+      );
+  --rh-table-column-background-color:
+    rgb(
+        var(
+          --rh-color-blue-70-rgb,
+          0 51 102
+        )
+        / var(--rh-opacity-30, 30%)
+      );
+}
+
+rh-table table {
+  min-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border: 0;
+  border-collapse: collapse;
+}
+
+rh-table thead th {
   position: relative;
   padding-top: var(--rh-space-lg, 16px);
   padding-bottom: var(--rh-space-lg, 16px);
   text-align: left;
   font-weight: var(--rh-font-weight-heading-bold, 700);
 }
 
-:is(rh-table) tr {
+rh-table tr {
   border-bottom: var(--rh-table-row-border);
 }
 
-:is(rh-table) tr:hover {
+rh-table tr:hover {
   background: var(--rh-table-row-background-color);
 }
 
-:is(rh-table) tr > * {
+rh-table tr > * {
   border: none;
 }
 
-:is(rh-table) :is(tr, col) {
+rh-table :is(tr, col) {
   transition: background 0.3s ease-out;
 }
 
-:is(rh-table) a {
+rh-table a {
   color: var(--rh-color-interactive-blue-darker, #0066cc);
   text-decoration: none;
 }
 
-:is(rh-table) a:hover {
+rh-table a:hover {
   color: var(--rh-color-interactive-blue-darkest, #003366);
   text-decoration: underline;
 }
 
-:is(rh-table) caption {
+rh-table caption {
   font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
   font-size: var(--rh-font-size-body-text-lg, 1.125rem);
   font-weight: var(--rh-font-weight-heading-bold, 700);
@@ -61,41 +108,41 @@
   font-style: normal;
 }
 
-:is(rh-table) :is(th, td) {
+rh-table :is(th, td) {
   padding-right: var(--rh-space-lg, 16px);
   padding-left: var(--rh-space-lg, 16px);
 }
 
-:is(rh-table) td {
+rh-table td {
   padding-top: var(--rh-space-xl, 24px);
   padding-bottom: var(--rh-space-xl, 24px);
 }
 
-:is(rh-table) :is(col.active) {
+rh-table :is(col.active) {
   background: var(--rh-table-column-background-color);
 }
 
 @media (max-width: 768px) {
-  :is(rh-table) table {
+  rh-table table {
     display: grid;
   }
 
-  :is(rh-table) thead {
+  rh-table thead {
     display: none;
     visibility: hidden;
   }
 
-  :is(rh-table) tbody {
+  rh-table tbody {
     display: block;
   }
 
-  :is(rh-table) :not(thead) ~ tbody tr {
+  rh-table :not(thead) ~ tbody tr {
     display: grid;
     grid-auto-columns: auto;
     grid-auto-flow: column;
   }
 
-  :is(rh-table) thead ~ tbody tr {
+  rh-table thead ~ tbody tr {
     border: none;
     display: grid;
     grid-template-columns: 1fr;
@@ -104,31 +151,31 @@
     grid-auto-flow: unset;
   }
 
-  :is(rh-table) thead ~ tbody tr:first-child {
+  rh-table thead ~ tbody tr:first-child {
     border-top: var(--rh-table-row-border);
   }
 
-  :is(rh-table) thead ~ tbody tr:last-child {
+  rh-table thead ~ tbody tr:last-child {
     border-bottom: var(--rh-table-row-border);
   }
 
-  :is(rh-table) thead ~ tbody tr:nth-child(even) {
+  rh-table thead ~ tbody tr:nth-child(even) {
     background: var(--rh-table-row-background-color);
   }
 
-  :is(rh-table) thead ~ tbody tr:hover {
+  rh-table thead ~ tbody tr:hover {
     background: var(--rh-table-column-background-color);
   }
 
-  :is(rh-table) thead ~ tbody tr > * {
+  rh-table thead ~ tbody tr > * {
     padding: var(--rh-space-lg, 16px);
   }
 
-  :is(rh-table) thead ~ tbody tr th {
+  rh-table thead ~ tbody tr th {
     text-align: center;
   }
 
-  :is(rh-table) thead ~ tbody tr td {
+  rh-table thead ~ tbody tr td {
     padding-top: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px));
     padding-bottom: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px));
     display: grid;
@@ -139,18 +186,18 @@
     word-wrap: break-word;
   }
 
-  :is(rh-table) thead ~ tbody tr td:before {
+  rh-table thead ~ tbody tr td:before {
     font-weight: var(--rh-font-weight-heading-bold, 700);
     text-align: left;
     content: attr(data-label);
     display: inline-block;
   }
 
-  :is(rh-table) thead ~ tbody tr:first-child td:first-child {
+  rh-table thead ~ tbody tr:first-child td:first-child {
     padding-top: var(--rh-space-lg, 16px);
   }
 
-  :is(rh-table) thead ~ tbody tr:last-child td:last-child {
+  rh-table thead ~ tbody tr:last-child td:last-child {
     padding-bottom: var(--rh-space-lg, 16px);
   }
 }
diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css
@@ -7,7 +7,9 @@
   display: block;
   width: 100%;
   overflow: auto;
-  scrollbar-color: var(--_scrollbar-track-color) var(--_scrollbar-thum-color);
+  scrollbar-color: var(--_scrollbar-track-color) var(--_scrollbar-thumb-color);
+  color: var(--_context-text);
+  background-color: var(--_context-background-color);
 
   --_scrollbar-size: calc(10 / 16 * 1rem);
   --_scrollbar-thumb-color: var(--rh-color-gray-40, #a3a3a3);
@@ -43,3 +45,7 @@
   font-weight: var(--rh-font-weight-body-text-regular, 400);
   line-height: var(--rh-line-height-body-text, 1.5);
 }
+
+.dark ::slotted([slot="summary"]) {
+  color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+}