chore(demo): color recalculate color in table (#8984)

taiga-family · Sep 19, 2024 · a110e06 · a110e06
1 parent 700a37f
commit a110e06
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 46 deletions.
diff --git a/projects/demo/src/modules/markup/colors/examples/table/index.html b/projects/demo/src/modules/markup/colors/examples/table/index.html
@@ -2,37 +2,34 @@
     *ngFor="let color of colors"
     class="color"
 >
-    <td>
-        <h3 class="name">
-            <tui-doc-copy
-                class="copy"
-                [cdkCopyToClipboard]="'var(' + color + ')'"
-            >
-                Copy
-            </tui-doc-copy>
-            {{ color }}
-        </h3>
-    </td>
-    <td class="circle">
-        <div
-            class="demo"
-            [style.background]="'var(' + color + ')'"
-            [style.box-shadow]="
-                getValue(color) === '#fff' || getValue(color) === '#222'
-                    ? 'inset 0 0 0 1px var(--tui-border-normal)'
-                    : null
-            "
-        ></div>
-    </td>
-    <td>
-        <div class="value">
-            <tui-doc-copy
-                class="copy"
-                [cdkCopyToClipboard]="getValue(color)"
-            >
-                Copy
-            </tui-doc-copy>
-            {{ getValue(color) }}
-        </div>
-    </td>
+    <ng-container *ngIf="getValue(color, tuiPlatform, darkMode()) as value">
+        <td>
+            <h3 class="name">
+                <tui-doc-copy
+                    class="copy"
+                    [cdkCopyToClipboard]="'var(' + color + ')'"
+                >
+                    Copy
+                </tui-doc-copy>
+                {{ color }}
+            </h3>
+        </td>
+        <td class="circle">
+            <div
+                class="demo"
+                [style.background]="'var(' + color + ')'"
+            ></div>
+        </td>
+        <td>
+            <div class="value">
+                <tui-doc-copy
+                    class="copy"
+                    [cdkCopyToClipboard]="value"
+                >
+                    Copy
+                </tui-doc-copy>
+                {{ value }}
+            </div>
+        </td>
+    </ng-container>
 </tr>
diff --git a/projects/demo/src/modules/markup/colors/examples/table/index.less b/projects/demo/src/modules/markup/colors/examples/table/index.less
@@ -32,6 +32,7 @@
     block-size: 3rem;
     border-radius: 100%;
     overflow: hidden;
+    box-shadow: inset 0 0 0 1px var(--tui-border-normal);
 }
 
 .name {

diff --git a/projects/demo/src/modules/markup/colors/examples/table/index.ts b/projects/demo/src/modules/markup/colors/examples/table/index.ts
@@ -4,7 +4,8 @@ import {Component, inject, Input} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {WA_WINDOW} from '@ng-web-apis/common';
 import {TuiDocCopy} from '@taiga-ui/addon-doc';
-import {tuiInjectElement, tuiPure} from '@taiga-ui/cdk';
+import {TUI_PLATFORM, tuiInjectElement, tuiPure} from '@taiga-ui/cdk';
+import {TUI_DARK_MODE} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
@@ -17,12 +18,16 @@ import {tuiInjectElement, tuiPure} from '@taiga-ui/cdk';
 export class TableColors {
     private readonly win = inject(WA_WINDOW);
     private readonly styles = this.win.getComputedStyle(tuiInjectElement());
+    protected readonly darkMode = inject(TUI_DARK_MODE);
 
     @Input()
     public colors: readonly string[] = [];
 
+    @Input({required: true})
+    public tuiPlatform = inject(TUI_PLATFORM, {skipSelf: true});
+
     @tuiPure
-    protected getValue(variable: string): string {
+    protected getValue(variable: string, _p: string, _d: boolean): string {
         return this.styles.getPropertyValue(variable);
     }
 }
diff --git a/projects/demo/src/modules/markup/colors/index.html b/projects/demo/src/modules/markup/colors/index.html
@@ -40,39 +40,58 @@
         </label>
     </p>
     <ng-template pageTab="Text">
-        <table [colors]="text"></table>
         <table
-            tuiTheme="dark"
             [colors]="text"
+            [tuiPlatform]="platform"
+        ></table>
+        <table
+            [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
+            [colors]="text"
+            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Backgrounds">
-        <table [colors]="backgrounds"></table>
         <table
-            tuiTheme="dark"
             [colors]="backgrounds"
+            [tuiPlatform]="platform"
+        ></table>
+        <table
+            [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
+            [colors]="backgrounds"
+            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Statuses">
-        <table [colors]="statuses"></table>
         <table
-            tuiTheme="dark"
             [colors]="statuses"
+            [tuiPlatform]="platform"
+        ></table>
+        <table
+            [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
+            [colors]="statuses"
+            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Others">
-        <table [colors]="others"></table>
         <table
-            tuiTheme="dark"
             [colors]="others"
+            [tuiPlatform]="platform"
+        ></table>
+        <table
+            [attr.tuiTheme]="darkMode() ? 'light' : 'dark'"
+            [colors]="others"
+            [tuiPlatform]="platform"
         ></table>
     </ng-template>
 
     <ng-template pageTab="Charts">
-        <table [colors]="charts"></table>
+        <table
+            [colors]="charts"
+            [tuiPlatform]="platform"
+        ></table>
     </ng-template>
 
     <ng-template pageTab="Setup">

diff --git a/projects/demo/src/modules/markup/colors/index.ts b/projects/demo/src/modules/markup/colors/index.ts
@@ -1,9 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import {TuiPlatform} from '@taiga-ui/cdk';
-import {TuiGroup} from '@taiga-ui/core';
+import {TUI_DARK_MODE, TuiGroup} from '@taiga-ui/core';
 import {TuiBlock} from '@taiga-ui/kit';
 
 import {BACKGROUNDS, CHARTS, OTHERS, STATUSES, TEXT} from './constants';
@@ -17,6 +17,8 @@ import {TableColors} from './examples/table';
     changeDetection,
 })
 export default class Page {
+    protected readonly darkMode = inject(TUI_DARK_MODE);
+
     protected readonly basicImportsLess = import(
         './examples/import/basic-imports-less.md?raw'
     );