update to M3 theme specs

facioquo · Sep 15, 2024 · 118175e · 118175e
1 parent ba4341b
commit 118175e
Show file tree

Hide file tree

Showing 16 changed files with 764 additions and 2,697 deletions.
diff --git a/Client/package-lock.json b/Client/package-lock.json
diff --git a/Client/package.json b/Client/package.json
@@ -38,4 +38,4 @@
     "@angular/compiler-cli": "18.2.4",
     "typescript": "5.5.4"
   }
-}
+}
diff --git a/Client/src/app/picker/_scrollbar-theme.scss b/Client/src/app/picker/_scrollbar-theme.scss
@@ -3,13 +3,8 @@
 
 // SCROLLBAR THEME
 @mixin theme($theme) {
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $warn: map.get($theme, warn);
-  $background: map.get($theme, 'background');
-  $foreground: map.get($theme, 'foreground');
 
-  @media screen and (width >= 800px) {
+  @media screen and (width >=800px) {
 
     /* width */
     ::-webkit-scrollbar {
@@ -18,21 +13,19 @@
 
     /* track */
     ::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 3px mat.m2-get-color-from-palette($accent, 600);
+      box-shadow: inset 0 0 3px mat.get-theme-color($theme, neutral, 40);
       border-radius: 2px;
     }
 
     /* handle */
     ::-webkit-scrollbar-thumb {
-      background: mat.m2-get-color-from-palette($accent, 600);
+      background: mat.get-theme-color($theme, neutral, 40);
       border-radius: 2px;
     }
 
     /* handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: mat.m2-get-color-from-palette($accent, 500);
-      ;
+      background: mat.get-theme_color($theme, neutral, 30);
     }
   }
-
 }
diff --git a/Client/src/app/picker/pick-config.component.html b/Client/src/app/picker/pick-config.component.html
@@ -52,8 +52,7 @@ <h3>{{r.displayName}}</h3>
             <input matInput #hexcolor="ngModel" name="color{{i}}" [mtxColorpicker]="customPicker" [(ngModel)]="r.color"
               pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$" [disabled]="r.lineType==='none'">
             <mat-error *ngIf="hexcolor.invalid">Invalid HEX color</mat-error>
-            <mtx-colorpicker-toggle matSuffix [for]="customPicker" [ngStyle]="{'color':r.color}"
-              [disabled]="r.lineType==='none'">
+            <mtx-colorpicker-toggle matSuffix [for]="customPicker" [ngStyle]="{'color': r.color}" [disabled]="r.lineType==='none'">
             </mtx-colorpicker-toggle>
             <mtx-colorpicker #customPicker [content]="customPickerContent" disabled="false"></mtx-colorpicker>
           </mat-form-field>

diff --git a/Client/src/app/picker/pick-config.component.scss b/Client/src/app/picker/pick-config.component.scss
@@ -59,7 +59,7 @@ h3 {
   }
 
   mat-form-field:not(:nth-child(2)) {
-    width: 125px;
+    width: 135px;
     margin-left: 1rem;
 
     @media screen and (width <= 700px) {

diff --git a/Client/src/app/picker/pick-config.component.ts b/Client/src/app/picker/pick-config.component.ts
@@ -33,6 +33,8 @@ interface LineType {
 })
 export class PickConfigComponent {
 
+  // ref: https://ng-matero.github.io/extensions/components/colorpicker
+
   selection: IndicatorSelection;
   customPicker: MtxColorpicker;
   errorMessage: string;

diff --git a/Client/src/app/picker/settings.component.html b/Client/src/app/picker/settings.component.html
@@ -11,19 +11,19 @@ <h2 mat-dialog-title class="noselect">
   <mat-list>
     <mat-list-item>
       <span class="no-wrap">Dark theme</span>
-      <mat-slide-toggle class="toggle" [color]="toggleColor" [(ngModel)]="cfg.isDarkTheme"
+      <mat-slide-toggle class="toggle" [(ngModel)]="cfg.isDarkTheme"
         (change)="toggleTheme($event)">
       </mat-slide-toggle>
     </mat-list-item>
     <mat-list-item>
       <span class="no-wrap">Show crosshairs</span>
-      <mat-slide-toggle class="toggle" [color]="toggleColor" [(ngModel)]="cfg.showCrosshairs"
+      <mat-slide-toggle class="toggle" [(ngModel)]="cfg.showCrosshairs"
         (change)="toggleCrosshairs($event)">
       </mat-slide-toggle>
     </mat-list-item>
     <mat-list-item>
       <span class="no-wrap">Show tooltips</span>
-      <mat-slide-toggle class="toggle" [color]="toggleColor" [(ngModel)]="cfg.showTooltips"
+      <mat-slide-toggle class="toggle" [(ngModel)]="cfg.showTooltips"
         (change)="toggleTooltips($event)">
       </mat-slide-toggle>
     </mat-list-item>
@@ -41,7 +41,7 @@ <h2 mat-dialog-title class="noselect">
     </mat-list-option>
     <mat-list-item class="list-action" disableRipple="true">
       <button mat-raised-button color="warn" [disabled]="shown.selectedOptions.selected.length===0"
-        (click)="removeSelections($event, shown.selectedOptions.selected)" matTooltip="remove this indicator">
+        (click)="removeSelections($event, shown.selectedOptions.selected)" matTooltip="remove selected indicators">
         REMOVE SELECTED
       </button>
     </mat-list-item>

diff --git a/Client/src/app/picker/settings.component.ts b/Client/src/app/picker/settings.component.ts
@@ -20,7 +20,6 @@ export class SettingsComponent {
 
   listings: IndicatorListing[];
   selections: IndicatorSelection[];
-  toggleColor = "accent";
 
   constructor(
     private listRef: MatDialog,

diff --git a/Client/src/app/services/chart.service.ts b/Client/src/app/services/chart.service.ts
@@ -105,21 +105,8 @@ export class ChartService {
 
     const commonXaxes = this.commonXAxes();
     const crosshairOptions = this.crosshairPluginOptions();
-    const gridColor = this.cfg.isDarkTheme ? '#424242' : '#CCCCCC';
-
-    // solid background plugin (for copy/paste)
-    const backgroundPlugin =
-    {
-      id: 'background',
-      beforeDraw: (chart: Chart) => {
-        const ctx = chart.canvas.getContext('2d');
-        ctx.save();
-        ctx.globalCompositeOperation = 'destination-over';
-        ctx.fillStyle = this.cfg.isDarkTheme ? '#212121' : 'white';
-        ctx.fillRect(0, 0, chart.width, chart.height);
-        ctx.restore();
-      }
-    };
+    const labelFillColor = this.cfg.isDarkTheme ? '#12131680' : '#FAF9FD90';
+    const gridlineColor = this.cfg.isDarkTheme ? '#2E2E2E' : '#E0E0E0';
 
     // base configuration
     const config: ChartConfiguration = {
@@ -128,9 +115,6 @@ export class ChartService {
       data: {
         datasets: []
       },
-      plugins: [
-        backgroundPlugin
-      ],
       options: {
         plugins: {
           title: {
@@ -180,7 +164,7 @@ export class ChartService {
                 lineHeight: 1
               },
               showLabelBackdrop: true,
-              backdropColor: this.cfg.isDarkTheme ? '#212121' : 'white',
+              backdropColor: labelFillColor,
               backdropPadding: {
                 top: 0,
                 left: 5,
@@ -196,13 +180,7 @@ export class ChartService {
               drawOnChartArea: true,
               drawTicks: false,
               lineWidth: 0.5,
-              color: function (context) {
-                if (context.tick.label === null) {
-                  return 'transparent';
-                } else {
-                  return gridColor;
-                }
-              },
+              color: gridlineColor
             }
           }
         }
@@ -483,6 +461,8 @@ export class ChartService {
     selection: IndicatorSelection,
     listing: IndicatorListing,
     scrollToMe: boolean) {
+
+    const labelFontColor = this.cfg.isDarkTheme ? '#757575' : '#121316';
     const chartConfig = this.baseOscillatorConfig();
 
     // initialize chart datasets
@@ -569,13 +549,11 @@ export class ChartService {
     const xPos: ScaleValue = selection.chart.scales["xAxis"].min;
     const yPos: ScaleValue = selection.chart.scales["yAxis"].max;
 
-    const labelColor = this.cfg.isDarkTheme ? '#757575' : '#212121';
     const annotation: AnnotationOptions =
-      this.commonAnnotation(selection.label, labelColor, xPos, yPos, 0, 1);
+      this.commonAnnotation(selection.label, labelFontColor, xPos, yPos, 0, 1);
     selection.chart.options.plugins.annotation.annotations = { annotation };
     selection.chart.update();
 
-
     if (scrollToMe) this.scrollToEnd(container.id);
   }
 
@@ -606,6 +584,8 @@ export class ChartService {
     yAdj: number = 0
   ): AnnotationOptions {
 
+    const labelFillColor = this.cfg.isDarkTheme ? '#12131680' : '#FAF9FD90';
+
     const legendFont: FontSpec = {
       family: "Google Sans",
       size: 13,
@@ -619,7 +599,7 @@ export class ChartService {
       content: [label],
       font: legendFont,
       color: fontColor,
-      backgroundColor: this.cfg.isDarkTheme ? 'rgba(33,33,33,0.5)' : 'rgba(255,255,255,0.7)',
+      backgroundColor: labelFillColor,
       padding: 0,
       position: 'start',
       xScaleID: 'xAxis',

diff --git a/Client/src/assets/icons/browserconfig.xml b/Client/src/assets/icons/browserconfig.xml
@@ -3,7 +3,7 @@
   <msapplication>
     <tile>
       <square150x150logo src="/mstile-150x150.png"/>
-      <TileColor>#212121</TileColor>
+      <TileColor>#121316</TileColor>
     </tile>
   </msapplication>
 </browserconfig>
diff --git a/Client/src/assets/manifest.json b/Client/src/assets/manifest.json
@@ -3,8 +3,8 @@
   "short_name": "Stock chart",
   "description": "A stock chart to demonstrate the Stock Indicators for .NET NuGet package.",
   "id": "/",
-  "theme_color": "#212121",
-  "background_color": "#212121",
+  "theme_color": "#121316",
+  "background_color": "#121316",
   "icons": [
     {
       "src": "icons/maskable_icon_x192.png",

diff --git a/Client/src/index.html b/Client/src/index.html
@@ -9,7 +9,7 @@
 
   <meta name="description"
     content="A stock chart to demonstrate the Stock Indicators for .NET NuGet package.  Transform price quotes into trading insights.">
-  <meta name="author" content="Skender Co.">
+  <meta name="author" content="FacioQuo">
 
   <!-- system info -->
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -18,8 +18,8 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="translucent">
   <meta name="msapplication-config" content="assets/icons/browserconfig.xml">
-  <meta name="msapplication-TileColor" content="#212121">
-  <meta name="theme-color" content="#212121">
+  <meta name="msapplication-TileColor" content="#121316">
+  <meta name="theme-color" content="#121316">
 
   <!-- Open Graph -->
   <meta property="og:url" content="https://charts.stockindicators.dev/" />
@@ -37,7 +37,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png?v=YYYY.MM.DD">
   <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png?v=YYYY.MM.DD">
   <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png?v=YYYY.MM.DD">
-  <link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg?v=YYYY.MM.DD" color="#212121">
+  <link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg?v=YYYY.MM.DD" color="#121316">
 
   <!-- pre-connections -->
   <link async rel="preconnect" href="https://fonts.googleapis.com">
@@ -79,7 +79,7 @@
 
 </head>
 
-<body class="app-background">
+<body class="mat-app-background mat-typography">
   <app-root></app-root>
 </body>
 

diff --git a/Client/src/styles.scss b/Client/src/styles.scss
@@ -1,29 +1,79 @@
 @use "@angular/material" as mat;
 @use "./styles/themed-parts";
 @use "./styles/base-elements";
+@include mat.core(); // material core styles
 
-// DEFAULT THEME (dark, see theme-light.scss swap file)
-// see also src/app/services/style.service.scss
-// ref: https://www.materialpalette.com
-$primary: mat.m2-define-palette(mat.$m2-gray-palette, 300);
-$accent: mat.m2-define-palette(mat.$m2-gray-palette, 800);
-$warn: mat.m2-define-palette(mat.$m2-blue-palette, 800);
+// DEFAULT DARK THEME (see theme-light.scss swap file)
+// ref: https://material.angular.io/guide/theming
 
-$theme: mat.m2-define-dark-theme((
+$theme: mat.define-theme((
   color: (
     theme-type: dark,
-    primary: $primary,
-    accent: $accent,
-    warn: $warn
-  ),
-  typography: mat.m2-define-typography-config(),
+    primary: mat.$azure-palette
+    ),
+    typography: (
+      brand-family: "Rubik, Roboto, Arial, Helvetica, sans-serif",
+    ),
+    density: (
+      scale: 0
+    )
 ));
 
 // apply theme (base)
-@include mat.core(); // material core styles
-@include mat.all-component-themes($theme);
-@include themed-parts.theme($theme);
+:root {
+
+  @include mat.all-component-themes($theme);
+  @include themed-parts.theme($theme);
+
+  $maxwidth: 1024px;
+
+  // toolbar
+  .main-toolbar {
+
+    max-width: $maxwidth;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 8px !important;
+
+    background-color: transparent;
+    line-height: unset !important;
+
+    h1 {
+      font-family: Rubik, Roboto, Arial, Helvetica, sans-serif;
+      font-size: 1.25em;
+      font-weight: 600;
+      color: rgba(230, 199, 76, 0.75);
+      line-height: 1.0 !important;
+      letter-spacing: 0.65px;
+
+      a {
+        text-decoration: none;
+        color: inherit;
+        padding-top: 0.5rem;
+
+        &:hover {
+          color: rgba(230, 199, 76, 0.85);
+        }
+      }
+    }
+
+    h2 {
+      font-family: Rubik, Roboto, Arial, Helvetica, sans-serif;
+      font-size: 0.55em;
+      font-weight: normal;
+      color: mat.get-theme-color($theme, neutral, 60);
+      line-height: 0.9 !important;
+      letter-spacing: 0.55px;
+
+      a {
+        text-decoration: none;
+        color: inherit;
+        padding-bottom: 0.9rem;
 
-.app-background {
-  background-color: mat.m2-get-color-from-palette($accent, 900);
+        &:hover {
+          color: mat.get-theme-color($theme, neutral, 40);
+        }
+      }
+    }
+  }
 }
diff --git a/Client/src/styles/_base-elements.scss b/Client/src/styles/_base-elements.scss
@@ -67,5 +67,5 @@ mat-dialog-actions {
 
 // COMMON CONTROLS
 .error {
-  color: #B00020;
+  color: #B71C1C;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,4 +38,4 @@ @@
         "@angular/compiler-cli": "18.2.4",
         "typescript": "5.5.4"
       }
-    }
+    }