fix(testing): use sys-color-* theming for dark mode tests

PiperOrigin-RevId: 540288116
material-components · Jun 14, 2023 · b1172d8 · b1172d8
1 parent 191b3d2
commit b1172d8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/testing/table/lib/_test-table.scss b/testing/table/lib/_test-table.scss
@@ -90,14 +90,13 @@ $dark-theme: tokens.md-comp-test-table-values(
     border-color: var(--_outline-color);
   }
 
-  .md3-test-table--dark {
-    $dark: tokens.md-sys-color-values-dark();
-
-    --_cell-color: #{map.get($dark, 'surface-container-lowest')};
-    --_cell-text-color: #{map.get($dark, 'on-surface-container')};
-    --_cell-grid-color: #{map.get($dark, 'surface-variant')};
-    --_header-cell-color: #{map.get($dark, 'surface-variant')};
-    --_header-cell-text-color: #{map.get($dark, 'on-surface-variant')};
-    --_outline-color: #{map.get($dark, 'outline')};
+  :host([dark]) {
+    $dark: tokens.md-sys-color-values-dark(
+      $exclude-custom-properties: true,
+    );
+
+    @each $token, $value in $dark {
+      --md-sys-color-#{$token}: #{$value};
+    }
   }
 }
diff --git a/testing/table/lib/test-table.ts b/testing/table/lib/test-table.ts
@@ -6,7 +6,6 @@
 
 import {LitElement, render, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
-import {classMap} from 'lit/directives/class-map.js';
 import {guard} from 'lit/directives/guard.js';
 import {html, literal} from 'lit/static-html.js';
 
@@ -34,11 +33,11 @@ export class TestTable<S extends string = string> extends LitElement {
   @property() override title = 'Title';
   @property({type: Array}) states: S[] = [];
   @property({type: Array}) templates: Array<TestTableTemplate<S>> = [];
-  @property({type: Boolean}) dark = false;
+  @property({type: Boolean, reflect: true}) dark = false;
 
   protected override render() {
     return html`
-      <table class="md3-test-table ${classMap(this.getRenderClasses())}">
+      <table class="md3-test-table">
         <thead>
           <tr>
             <th class="md3-test-table__header"></th>
@@ -55,12 +54,6 @@ export class TestTable<S extends string = string> extends LitElement {
     `;
   }
 
-  protected getRenderClasses() {
-    return {
-      'md3-test-table--dark': this.dark,
-    };
-  }
-
   protected renderTemplates() {
     // Render templates in the light DOM for easier styling access
     render(

diff --git a/tokens/_md-sys-color.scss b/tokens/_md-sys-color.scss
@@ -15,13 +15,18 @@ $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
-@function values-dark($deps: $_default-dark) {
+@function values-dark(
+  $deps: $_default-dark,
+  $exclude-custom-properties: false
+) {
   $tokens: md-sys-color.values-dark($deps);
 
-  // Create --md-sys-color-* custom properties
-  @each $token, $value in $tokens {
-    $var: var(--md-sys-color-#{$token}, #{$value});
-    $tokens: map.set($tokens, $token, $var);
+  @if not $exclude-custom-properties {
+    // Create --md-sys-color-* custom properties
+    @each $token, $value in $tokens {
+      $var: var(--md-sys-color-#{$token}, #{$value});
+      $tokens: map.set($tokens, $token, $var);
+    }
   }
 
   @return $tokens;
@@ -31,13 +36,18 @@ $_default-light: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
-@function values-light($deps: $_default-light) {
+@function values-light(
+  $deps: $_default-light,
+  $exclude-custom-properties: false
+) {
   $tokens: md-sys-color.values-light($deps);
 
-  // Create --md-sys-color-* custom properties
-  @each $token, $value in $tokens {
-    $var: var(--md-sys-color-#{$token}, #{$value});
-    $tokens: map.set($tokens, $token, $var);
+  @if not $exclude-custom-properties {
+    // Create --md-sys-color-* custom properties
+    @each $token, $value in $tokens {
+      $var: var(--md-sys-color-#{$token}, #{$value});
+      $tokens: map.set($tokens, $token, $var);
+    }
   }
 
   @return $tokens;