From f4abf05f312e3b8827bc6cb6d8fc9e835df8c936 Mon Sep 17 00:00:00 2001
From: Vivy <4380412+Matthbo@users.noreply.github.com>
Date: Thu, 26 Jun 2025 16:56:06 +0200
Subject: [PATCH] Add font toggle to playground

---
 src/app/app.component.html | 1 +
 src/app/app.component.scss | 4 ++++
 src/app/app.component.ts   | 6 ++++++
 src/styles.scss            | 8 ++++++++
 4 files changed, 19 insertions(+)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7f77848..d3ea124 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -94,6 +94,7 @@ <h2>Datatable</h2>
 </ul>
 
 <div class="options">
+  <ff-button (click)="toggleFont()">Font</ff-button>
   <ff-button (click)="toggleTheme()"
     ><span class="yellow-dark">Dark</span> / <span class="yellow-light">Light</span></ff-button
   >
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b2ffeda..2714856 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -35,4 +35,8 @@ ul.components-list {
   position: fixed;
   top: 20px;
   right: 20px;
+
+  ff-button {
+    margin-left: 5px;
+  }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d8f16f0..275b33b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -28,6 +28,8 @@ export class AppComponent implements OnInit {
     { name: 'something', displayName: 'Something', property: null, html: true },
   ];
 
+  private readonly appRoot: HTMLElement = document.querySelector('app-root')!;
+
   ngOnInit(): void {
     this.datasource.data = [
       {
@@ -57,6 +59,10 @@ export class AppComponent implements OnInit {
     document.body.classList.toggle('ff-dark-theme');
   }
 
+  protected toggleFont(): void {
+    this.appRoot.classList.toggle('no-font');
+  }
+
   protected changeSearchQuery(): void {
     this.searchText = 'Eekum Bokum';
   }
diff --git a/src/styles.scss b/src/styles.scss
index cebaef7..71420b4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
 @use '../dist/angular-components';
 
+app-root {
+  font-family: 'Inter', sans-serif;
+
+  &.no-font {
+    font-family: unset;
+  }
+}
+
 .yellow-dark {
   color: inherit;
 }