refactor: material symbols scss mixins + ts const (#45)

* refactor: material symbols scss mixins + ts const

and some readonly here and there

* refactor: strip units if using px size

src/app/about/contact-traditional-icons/contact-traditional-icons.component.html

@@ -3,7 +3,7 @@
     <a
       [href]="item.url"
       [attr.aria-label]="item.name"
-      class="material-symbols-outlined"
+      [class]="MATERIAL_SYMBOLS_CLASS"
       >{{ item.materialSymbol }}</a
     >
   </li>

src/app/about/contact-traditional-icons/contact-traditional-icons.component.scss

@@ -1,5 +1,6 @@
 @use 'breakpoints';
 @use 'margins';
+@use 'material-symbols';
 
 :host {
   ul {
@@ -15,13 +16,15 @@
   li {
     height: 32px;
 
-    .material-symbols-outlined {
-      font-variation-settings:
-        'FILL' 1,
-        'wght' 700,
-        'GRAD' 200,
-        'opsz' 32;
-      font-size: 32px;
+    @include material-symbols.class {
+      $fontSize: 32px;
+      font-size: $fontSize;
+      @include material-symbols.variation-settings(
+        $fill: true,
+        $weight: 700,
+        $grade: 200,
+        $size: $fontSize
+      );
     }
   }
 }

src/app/about/contact-traditional-icons/contact-traditional-icons.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core'
 import { Call, Email, MyLocation } from '../../material-symbols'
+import { MATERIAL_SYMBOLS_CLASS } from '../../common/material-symbols'
 
 @Component({
   selector: 'app-contact-traditional-icons',
   templateUrl: './contact-traditional-icons.component.html',
   styleUrls: ['./contact-traditional-icons.component.scss'],
 })
 export class ContactTraditionalIconsComponent {
-  public items: ReadonlyArray<{
+  protected readonly MATERIAL_SYMBOLS_CLASS = MATERIAL_SYMBOLS_CLASS
+  public readonly items: ReadonlyArray<{
     name: string
     materialSymbol: string
     url: URL

src/app/about/description/description.component.html

@@ -21,7 +21,8 @@
 </ng-template>
 <ng-template #dataTemplate>
   <span
-    class="symbol material-symbols-outlined"
+    [class]="MATERIAL_SYMBOLS_CLASS"
+    class="symbol"
     aria-hidden="true"
     *ngIf="line.data"
     >{{ line.data.symbol }}</span

src/app/about/description/description.component.scss

@@ -1,4 +1,5 @@
 @use 'margins';
+@use 'material-symbols';
 @use 'paddings';
 
 :host {
@@ -37,13 +38,14 @@
     }
   }
 
-  .material-symbols-outlined {
+  @include material-symbols.class {
     font-size: 1em;
-    font-variation-settings:
-      'FILL' 1,
-      'wght' 700,
-      'GRAD' 200,
-      'opsz' 24;
+    @include material-symbols.variation-settings(
+      $fill: true,
+      $weight: 700,
+      $grade: 200,
+      $size: 24
+    );
   }
 
   button {

src/app/about/description/description.component.ts

@@ -23,6 +23,7 @@ import {
   TIMING_FUNCTION,
 } from '../../common/animations'
 import { DescriptionLine } from '../../metadata'
+import { MATERIAL_SYMBOLS_CLASS } from '../../common/material-symbols'
 
 @Component({
   selector: 'app-description',
@@ -60,22 +61,24 @@ export class DescriptionComponent {
   @Input() protected parent?: DescriptionComponent
 
   // 👇 Using `protected` to avoid being marked as unused
-  @HostBinding('class.displayBlockIfNoScript') protected visibleIfNoScript =
-    true
+  @HostBinding('class.displayBlockIfNoScript')
+  protected readonly visibleIfNoScript = true
   @HostBinding('class.hidden') protected hidden = !this.isRenderingOnBrowser
 
-  private EXPANDED_DEFAULT_NO_JS = true
-  private EXPANDED_DEFAULT_JS_ENABLED = false
+  protected readonly MATERIAL_SYMBOLS_CLASS = MATERIAL_SYMBOLS_CLASS
+  private readonly EXPANDED_DEFAULT_NO_JS = true
+  private readonly EXPANDED_DEFAULT_JS_ENABLED = false
   public isExpanded = this.isRenderingOnBrowser
     ? this.EXPANDED_DEFAULT_JS_ENABLED
     : this.EXPANDED_DEFAULT_NO_JS
   @ViewChildren(DescriptionComponent)
   private children!: QueryList<DescriptionComponent>
 
   constructor(
-    protected sanitizer: DomSanitizer,
-    @Inject(COLLAPSIBLE_CONFIG) protected config: CollapsibleConfiguration,
-    @Inject(PLATFORM_ID) private platformId: object,
+    protected readonly sanitizer: DomSanitizer,
+    @Inject(COLLAPSIBLE_CONFIG)
+    protected readonly config: CollapsibleConfiguration,
+    @Inject(PLATFORM_ID) private readonly platformId: object,
   ) {}
 
   protected get isRenderingOnBrowser() {

src/app/common/material-symbols.ts

@@ -0,0 +1,2 @@
+// Keep in sync with Material Symbols Sass
+export const MATERIAL_SYMBOLS_CLASS = 'material-symbols-outlined'

src/app/header/header.component.html

@@ -5,10 +5,10 @@
       aria-label="Color scheme toggle (dark or light)"
       id="dark-light-scheme-toggle"
     >
-      <span class="material-symbols-outlined light-only">{{
+      <span [class]="MATERIAL_SYMBOLS_CLASS" class="light-only">{{
         MaterialSymbol.DarkTheme
       }}</span>
-      <span class="material-symbols-outlined dark-only">{{
+      <span [class]="MATERIAL_SYMBOLS_CLASS" class="dark-only">{{
         MaterialSymbol.LightTheme
       }}</span>
     </button>

src/app/header/header.component.scss

@@ -1,6 +1,7 @@
 @use 'borders';
 @use 'paddings';
 @use 'header';
+@use 'material-symbols';
 @use 'z-index';
 @use 'helpers/units';
 
@@ -28,13 +29,14 @@
         font-size: header.$icons-height;
       }
 
-      .material-symbols-outlined {
+      @include material-symbols.class {
         font-size: 1em;
-        font-variation-settings:
-          'FILL' 0,
-          'wght' 200,
-          'GRAD' 0,
-          'opsz' #{units.stripUnit(header.$icons-height)};
+        @include material-symbols.variation-settings(
+          $fill: false,
+          $weight: 200,
+          $grade: 0,
+          $size: header.$icons-height
+        );
       }
     }
   }

src/app/header/header.component.ts

@@ -1,17 +1,19 @@
 import { Component } from '@angular/core'
 import { DarkTheme, LightTheme } from '../material-symbols'
 import { ColorSchemeService } from './color-scheme.service'
+import { MATERIAL_SYMBOLS_CLASS } from '../common/material-symbols'
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent {
-  protected MaterialSymbol = {
+  protected readonly MATERIAL_SYMBOLS_CLASS = MATERIAL_SYMBOLS_CLASS
+  protected readonly MaterialSymbol = {
     DarkTheme,
     LightTheme,
   }
 
-  constructor(protected colorSchemeService: ColorSchemeService) {}
+  constructor(protected readonly colorSchemeService: ColorSchemeService) {}
 }

src/app/no-script/no-script.component.html

@@ -1,9 +1,7 @@
 <noscript>
   <div class="contents">
     <p>
-      <span class="material-symbols-outlined">{{
-        MaterialSymbol.Warning
-      }}</span>
+      <span [class]="MATERIAL_SYMBOLS_CLASS">{{ MaterialSymbol.Warning }}</span>
       <b>Seems you don't have JavaScript enabled</b>
     </p>
     <p>

src/app/no-script/no-script.component.scss

@@ -3,6 +3,7 @@
 @use 'header';
 @use 'paddings';
 @use 'z-index';
+@use 'material-symbols';
 
 :host {
   position: fixed;
@@ -32,13 +33,14 @@
       font-size: 14px;
     }
 
-    .material-symbols-outlined {
+    @include material-symbols.class {
       font-size: 1em;
-      font-variation-settings:
-        'FILL' 0,
-        'wght' 700,
-        'GRAD' 0,
-        'opsz' 16;
+      @include material-symbols.variation-settings(
+        $fill: false,
+        $weight: 700,
+        $grade: 0,
+        $size: 16
+      );
     }
   }
 }

src/app/no-script/no-script.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core'
 import { Warning } from '../material-symbols'
+import { MATERIAL_SYMBOLS_CLASS } from '../common/material-symbols'
 
 @Component({
   selector: 'app-no-script',
   templateUrl: './no-script.component.html',
   styleUrls: ['./no-script.component.scss'],
 })
 export class NoScriptComponent {
-  protected MaterialSymbol = {
+  protected readonly MATERIAL_SYMBOLS_CLASS = MATERIAL_SYMBOLS_CLASS
+  protected readonly MaterialSymbol = {
     Warning,
   }
 }

src/sass/_material-symbols.scss

@@ -0,0 +1,58 @@
+@use 'sass:math';
+@use 'helpers/units';
+
+@mixin font {
+  @font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+    src:
+      url('../../assets/material-symbols-outlined-subset.woff2') format('woff2'),
+      url('../../assets/material-symbols-outlined-subset.woff') format('woff'),
+      url('../../assets/material-symbols-outlined-subset.ttf')
+        format('truetype');
+  }
+
+  @include class {
+    //noinspection CssNoGenericFontName
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  @include class {
+    @include variation-settings;
+  }
+}
+
+@mixin class {
+  .material-symbols-outlined {
+    @content;
+  }
+}
+
+@mixin variation-settings($fill: false, $weight: 400, $grade: 0, $size: 24) {
+  $sizeUnit: math.unit($size);
+  @if $sizeUnit == 'px' {
+    $size: units.strip($size);
+  } @else if $sizeUnit != '' {
+    @error "Size cannot have units other than 'px' (#{$size})";
+  }
+
+  font-variation-settings:
+    'FILL' if($fill, 1, 0),
+    'wght' $weight,
+    'GRAD' $grade,
+    'opsz' $size;
+}

src/sass/_typographies.scss

@@ -9,42 +9,3 @@
 @mixin monospace-font {
   font-family: 'Roboto Mono', 'Courier New', monospace;
 }
-
-@mixin material-symbols-font {
-  @font-face {
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    font-weight: 100 700;
-    font-display: block;
-    src:
-      url('../../assets/material-symbols-outlined-subset.woff2') format('woff2'),
-      url('../../assets/material-symbols-outlined-subset.woff') format('woff'),
-      url('../../assets/material-symbols-outlined-subset.ttf')
-        format('truetype');
-  }
-
-  .material-symbols-outlined {
-    //noinspection CssNoGenericFontName
-    font-family: 'Material Symbols Outlined';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-  }
-
-  .material-symbols-outlined {
-    font-variation-settings:
-      'FILL' 0,
-      'wght' 100,
-      'GRAD' 0,
-      'opsz' 24;
-  }
-}

src/sass/helpers/_units.scss

@@ -2,6 +2,6 @@
 
 // Strips unit from variable. ie: 32px -> 32
 // https://stackoverflow.com/a/12335841/3263250
-@function stripUnit($number) {
+@function strip($number) {
   @return math.div($number, ($number * 0+1));
 }

src/styles.scss

@@ -4,6 +4,7 @@
 @use 'app/no-script/no-script-theme';
 @use 'app/navigation-tabs/navigation-tabs-theme';
 @use 'font-awesome';
+@use 'material-symbols';
 @use 'theming';
 @use 'typographies';
 
@@ -38,7 +39,7 @@ pre {
   border-width: 0;
 }
 
-@include typographies.material-symbols-font();
+@include material-symbols.font();
 
 @mixin app-color($theme) {
   @include root-theme.color($theme);

src/test/helpers/material-symbols.ts

@@ -1,4 +1,4 @@
 import { By } from '@angular/platform-browser'
+import { MATERIAL_SYMBOLS_CLASS } from '../../app/common/material-symbols'
 
-const MATERIAL_SYMBOLS_CLASS = 'material-symbols-outlined'
 export const MATERIAL_SYMBOLS_SELECTOR = By.css(`.${MATERIAL_SYMBOLS_CLASS}`)