feat: added default theme vars on button

Author: Anlanther

src/app/components/color-showcase/color-showcase.component.html

@@ -0,0 +1,3 @@
+<button mat-flat-button class="primary">Default Primary</button>
+<button mat-flat-button class="secondary">Default Secondary</button>
+<button mat-flat-button class="accent">Default Accent</button>

src/app/components/color-showcase/color-showcase.component.scss

@@ -0,0 +1,29 @@
+@use "@angular/material" as mat;
+
+@mixin button-color($color) {
+  @if $color == "primary" {
+    $color: var(--mat-sys-primary);
+  } @else if $color == "secondary" {
+    $color: var(--mat-sys-secondary);
+  } @else if $color == "accent" {
+    $color: var(--mat-sys-tertiary);
+  }
+
+  @include mat.button-overrides(
+    (
+      filled-container-color: $color,
+    )
+  );
+}
+
+.primary {
+  @include button-color("primary");
+}
+
+.secondary {
+  @include button-color("secondary");
+}
+
+.accent {
+  @include button-color("accent");
+}

src/app/components/color-showcase/color-showcase.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorShowcaseComponent } from './color-showcase.component';
+
+describe('ColorShowcaseComponent', () => {
+  let component: ColorShowcaseComponent;
+  let fixture: ComponentFixture<ColorShowcaseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ColorShowcaseComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ColorShowcaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/color-showcase/color-showcase.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../modules/material.module';
+
+@Component({
+  selector: 'app-color-showcase',
+  imports: [MaterialModule],
+  templateUrl: './color-showcase.component.html',
+  styleUrl: './color-showcase.component.scss',
+})
+export class ColorShowcaseComponent {}

src/app/components/grid-container/grid-container.component.html

@@ -7,6 +7,9 @@
       @case (workspace.Filter) {
         <app-form-filter [widgetInput]="filterState()"></app-form-filter>
       }
+      @case (workspace.Button) {
+        <app-color-showcase></app-color-showcase>
+      }
     }
   }
 </div>

src/app/components/grid-container/grid-container.component.ts

@@ -5,13 +5,19 @@ import { map } from 'rxjs';
 import { FILTER_INPUT } from '../../constants/dummy-data/fund-input-dummy';
 import { WorkspaceName } from '../../constants/workspace-name.enum';
 import { WidgetInput } from '../../models/widget-input.model';
+import { ColorShowcaseComponent } from '../color-showcase/color-showcase.component';
 import { FormFilterModule } from '../form-filter/form-filter.module';
 import { SavedFilter } from '../form-filter/models/saved-filter.model';
 import { WorkspaceSelectorComponent } from '../workspace-selector/workspace-selector.component';
 
 @Component({
   selector: 'app-grid-container',
-  imports: [CommonModule, WorkspaceSelectorComponent, FormFilterModule],
+  imports: [
+    CommonModule,
+    WorkspaceSelectorComponent,
+    FormFilterModule,
+    ColorShowcaseComponent,
+  ],
   templateUrl: './grid-container.component.html',
   styleUrl: './grid-container.component.scss',
   standalone: true,

src/app/constants/workspace-name.enum.ts

@@ -1,4 +1,5 @@
 export enum WorkspaceName {
   Dashboard = 'dashboard',
   Filter = 'filter',
+  Button = 'button',
 }