Add new OpenLP light theme based on Angular Material v3.

package.json

@@ -61,9 +61,9 @@
     "@types/jasminewd2": "~2.0.13",
     "@types/jest": "^29.5.12",
     "@types/node": "~20.14.2",
-    "@typescript-eslint/eslint-plugin": "7.12.0",
+    "@typescript-eslint/eslint-plugin": "7.13.0",
-    "@typescript-eslint/parser": "7.12.0",
+    "@typescript-eslint/parser": "7.13.0",
-    "@typescript-eslint/utils": "7.12.0",
+    "@typescript-eslint/utils": "7.13.0",
     "axios": "^1.7.2",
     "browserslist": "^4.23.1",
     "browserslist-useragent-regexp": "^4.1.3",

src/app/app.component.html

@@ -1,13 +1,13 @@
-<mat-toolbar color="primary">
+<mat-toolbar class="header">
   <mat-toolbar-row>
-    <button mat-icon-button (click)="menu.toggle()">
+    <button mat-icon-button class="header" (click)="menu.toggle()">
       <mat-icon>menu</mat-icon>
     </button>
     <span class="page-title">{{ pageTitle | translate | titlecase }}</span>
     <span class="spacer"></span>
     @if (showLogin) {
       <button 
-        mat-button
+        mat-raised-button
         (click)="login()">
         {{ 'LOGIN' | translate | titlecase }}
       </button>
@@ -16,8 +16,8 @@
       <button
         mat-icon-button
         (click)="forceWebSocketReconnection()"
-        class="connection-status"
+        class="header connection-status"
-        matTooltip="{{ 'CONNECTED_TO_OPENLP' | translate | titlecase }}">
+        matTooltip="{{ ('CONNECTED_TO_OPENLP' | translate | titlecase).replace('Openlp', 'OpenLP') }}">
         <mat-icon>link</mat-icon>
       </button>
     }
@@ -25,7 +25,7 @@
       <button
         mat-icon-button
         (click)="forceWebSocketReconnection()"
-        class="connection-status"
+        class="header connection-status"
         matTooltip="{{ 'DISCONNECTED' | translate | titlecase }}">
         <mat-icon>link_off</mat-icon>
       </button>

src/app/components/slides/slide-item/slide-item.component.html

@@ -3,18 +3,13 @@
   mat-list-item
   (click)="onSlideSelected(slide)"
   [class.selected]="selected">
-  <mat-card-content>
+  <mat-card-header>
-    <div class="verse-tag">{{ slide?.tag }}</div>
+    <mat-card-subtitle class="slide-title">{{ slide?.tag }}</mat-card-subtitle>
-    @if (slide?.img) {
+  </mat-card-header>
-      <div class="verse-img-container">
+  @if (slide?.img) {
-        <img src="{{ slide?.img }}" />
+    <img mat-card-image src="{{ slide?.img }}" alt="{{ slide?.tag }}" />
-        <div class="img-verse-text">
+  }
-          {{ slide?.text }}
+  @if (slide?.text) {
-        </div>
+    <mat-card-content>{{ slide?.text }}</mat-card-content>
-      </div>
+  }
-    }
-    @else {
-      <div class="verse-text">{{ slide?.text }}</div>
-    }
-  </mat-card-content>
 </mat-card>

src/app/components/slides/slide-item/slide-item.component.scss

@@ -1,5 +1,7 @@
 .slide {
   cursor: pointer;
+  margin-left: 2.5rem;
+  white-space: pre-wrap;
 }
 
 .selected {
@@ -7,29 +9,6 @@
   font-weight: 700;
 }
 
-.verse-tag {
+.slide-title {
-  float: left;
+  margin-bottom: 1rem;
 }
-
-.verse-text {
-  margin-left: 2.5rem;
-  white-space: pre-wrap;
-}
-/* Styles for displaying thumbnails */
-.verse-img-container {
-  /* CSS for formatting DIV containing the image */
-  margin-left: 2.5rem;
-  display: inline-block;
-}
-.verse-img-container img {
-  /* Roughly basing these values off of the current thumbnail size */
-  /* Images sent from OpenLP should be larger and should be sized based on viewer screen size */
-  max-height: 75%;
-  min-height: 88px;
-  width: 100%;
-}
-.img-verse-text {
-  font-size: 1.1rem;
-  white-space: pre-wrap;
-}
-

src/assets/themes/_header-theme.scss

@@ -0,0 +1,14 @@
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  .header {
+    color: mat.get-theme-color($theme, primary, 100);
+    background-color: mat.get-theme-color($theme, primary, 50);
+  }
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+}

src/assets/themes/openlp-light-theme.scss

@@ -0,0 +1,144 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #3D6ABD
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001a42,
+    20: #002e6b,
+    25: #003880,
+    30: #034395,
+    35: #1c50a1,
+    40: #2d5cae,
+    50: #4975c9,
+    60: #658fe5,
+    70: #82aaff,
+    80: #aec6ff,
+    90: #d8e2ff,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #141b2c,
+    20: #293041,
+    25: #343b4d,
+    30: #3f4759,
+    35: #4b5265,
+    40: #575e71,
+    50: #6f778b,
+    60: #8990a5,
+    70: #a4abc0,
+    80: #bfc6dc,
+    90: #dbe2f9,
+    95: #edf0ff,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #2a132d,
+    20: #402843,
+    25: #4c324f,
+    30: #583e5a,
+    35: #654967,
+    40: #715573,
+    50: #8b6d8d,
+    60: #a686a7,
+    70: #c2a1c2,
+    80: #dfbbde,
+    90: #fcd7fb,
+    95: #ffebfc,
+    98: #fff7fa,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1b1b1f,
+    20: #303034,
+    25: #3b3b3f,
+    30: #46464a,
+    35: #525256,
+    40: #5e5e62,
+    50: #77777a,
+    60: #919094,
+    70: #ababaf,
+    80: #c7c6ca,
+    90: #e3e2e6,
+    95: #f2f0f4,
+    98: #faf8fd,
+    99: #fefbff,
+    100: #ffffff,
+    4: #0d0e11,
+    6: #121316,
+    12: #1f1f23,
+    17: #292a2d,
+    22: #343538,
+    24: #38393c,
+    87: #dbd9dd,
+    92: #e9e7ec,
+    94: #efedf1,
+    96: #f5f3f7,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #191b23,
+    20: #2e3038,
+    25: #393b43,
+    30: #44474f,
+    35: #50525a,
+    40: #5c5e67,
+    50: #75777f,
+    60: #8e9099,
+    70: #a9abb4,
+    80: #c5c6d0,
+    90: #e1e2ec,
+    95: #eff0fa,
+    98: #faf9ff,
+    99: #fefbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: $_primary,
+    tertiary: $_tertiary,
+  ),
+));

src/styles.scss

@@ -1,24 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 @use '@angular/material' as mat;
-
+@use './assets/themes/openlp-light-theme.scss';
+@use './assets/themes/_header-theme.scss' as header;
 @include mat.core();
-$olp-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
-$olp-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
-
-// The "warn" palette is optional and defaults to red if not specified.
-$olp-warn: mat.m2-define-palette(mat.$m2-red-palette);
-
-$olp-theme: mat.m2-define-light-theme((
-  color: (
-    primary: $olp-primary,
-    accent: $olp-accent,
-    warn: $olp-warn,
-  ),
-  density: 0,
-));
-
-// Including only used components
-@include mat.all-component-themes($olp-theme);
 
 * {
   -webkit-font-smoothing: antialiased;
@@ -26,6 +10,8 @@ $olp-theme: mat.m2-define-light-theme((
 }
 
 body {
+  @include mat.all-component-themes(openlp-light-theme.$light-theme);
+  @include header.theme(openlp-light-theme.$light-theme);
   font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
 }