feat(grid-sample): have the auto derived foreground functionality in grid-theme-builder sample

Author: didimmova

src/app/grid-theme-builder/grid-theme-builder.sample.html

@@ -10,7 +10,12 @@
         </span>
         <span class="color-picker-item">
             <label for="gridForeground">Foreground</label>
-            <input id="gridForeground" type="color" [value]="gridForeground()" (input)="gridForeground.set($any($event.target).value)" />
+            @if (gridForeground()) {
+                <input id="gridForeground" type="color" [value]="gridForeground()" (input)="gridForeground.set($any($event.target).value)" />
+                <button (click)="resetForeground()" title="Reset to auto">↺</button>
+            } @else {
+                <button class="no-color" (click)="gridForeground.set('#1E2A35')" title="Auto (click to override)"></button>
+            }
         </span>
         <span class="color-picker-item">
             <label for="gridAccentColor">Accent Color</label>

src/app/grid-theme-builder/grid-theme-builder.sample.scss

@@ -11,19 +11,9 @@
         grid-theme(
             $schema: vars.$schema,
             $background: #f7f4f0,
-            $foreground: #1E2A35,
             $accent-color: #5B8F8A
         )
     );
-
-    // @include tokens(
-    //     grid-theme(
-    //         $schema: vars.$schema,
-    //         $background: #092444,
-    //         $foreground: #f1f4ed,
-    //         $accent-color: #d66620
-    //     )
-    // );
 }
 
 .color-pickers {
@@ -40,10 +30,39 @@
     font-size: 14px;
 
     input[type='color'] {
-        background: transparent;
+        -webkit-appearance: none;
+        appearance: none;
         width: 36px;
         height: 36px;
-        border: none;
+        border: 1px solid currentColor;
+        padding: 0;
         cursor: pointer;
+
+        &::-webkit-color-swatch-wrapper { padding: 0; }
+        &::-webkit-color-swatch { border: none; }
+        &::-moz-color-swatch { border: none; }
+    }
+
+    .no-color {
+        position: relative;
+        width: 36px;
+        height: 36px;
+        border: 1px solid currentColor;
+        background: transparent;
+        cursor: pointer;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            width: 1px;
+            height: 70%;
+            background: red;
+        }
+
+        &::before { transform: rotate(45deg); }
+        &::after { transform: rotate(-45deg); }
     }
 }

src/app/grid-theme-builder/grid-theme-builder.sample.ts

@@ -1,7 +1,5 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, signal, viewChild } from '@angular/core';
-
 import { SAMPLE_DATA } from '../shared/sample-data';
-
 import { IGX_GRID_DIRECTIVES, IgxActionStripComponent, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
 
 class EmployeesSummary extends IgxNumberSummaryOperand {
@@ -36,7 +34,10 @@ export class GridThemeBuilderSampleComponent implements OnInit, AfterViewInit {
     public ngAfterViewInit(): void {
         const styles = getComputedStyle(this.sampleEl().nativeElement);
         this.gridBackground.set(styles.getPropertyValue('--ig-grid-background').trim());
-        this.gridForeground.set(styles.getPropertyValue('--ig-grid-foreground').trim());
         this.gridAccentColor.set(styles.getPropertyValue('--ig-grid-accent-color').trim());
     }
+
+    protected resetForeground(): void {
+        this.gridForeground.set('');
+    }
 }