Lite designförändringar

src/app/app.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="!overlayService.isOverlay" class="main-container standalone primary">
-    <mat-tab-group color="primary" backgroundColor="primary" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
+<div *ngIf="!overlayService.isOverlay" class="main-container standalone primary mat-app-background">
+    <mat-tab-group color="accent" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
         mat-stretch-tabs="false" class="tabs">
         <mat-tab label="Settings">
             <settings class="content h-100 w-100"></settings>

src/app/color-picker/color-picker.component.html

@@ -1,5 +1,5 @@
 <span #clickColorPickerElement>
-    <button mat-raised-button color="accent" class="w-100">
+    <button mat-raised-button color="primary" class="w-100">
         <div class="center">
             <span class="text">
                 <ng-content></ng-content>

src/app/color-picker/color-picker.component.ts

@@ -14,6 +14,10 @@ export interface Color {
   hex: string;
 }
 
+export interface Placement {
+  color: 'top' | 'bottom' | 'left' | 'right' | false;
+}
+
 @Component({
   selector: 'color-picker',
   templateUrl: './color-picker.component.html',
@@ -36,6 +40,8 @@ export class ColorPickerComponent implements AfterViewInit {
 
   justSet: boolean = false;
 
+  @Input() placement: Placement = { color: 'right'};
+
   @Input('setColor') set color(value: string) {
     this.justSet = true;
     if(this.picker) {
@@ -76,6 +82,7 @@ export class ColorPickerComponent implements AfterViewInit {
         },
         parent: this.clickColorPickerElement?.nativeElement,
         color: this.initialColor,
+        popup: this.placement.color,
       });
     });
     this.underlyingValue = this.color;

src/app/models/generated/Config.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Rect } from "./Rect";
+
+export interface Config { initialPlanWindowPosition: Rect, hideOnUnfocus: boolean, toggleOverlay: string, prev: string, next: string, planBg: string, backdropBg: string, noteDefaultFg: string, poeClientLogPath: string | null, }

src/app/models/generated/Rect.ts

@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export interface Rect { x: number, y: number, width: number, height: number, }

src/app/plan-display/plan-display.component.html

@@ -44,8 +44,8 @@
             <div class="row">
                 <div class="planChooser col-3 mt-4">
                     <div>
-                        <button mat-raised-button (click)="openDialog()">Browse Plans</button>
-                        <button mat-raised-button (click)="loadBasePlan()">Load base plan</button>
+                        <button mat-raised-button color="accent" (click)="openDialog()">Browse Plans</button>
+                        <button mat-raised-button color="accent" (click)="loadBasePlan()">Load base plan</button>
                     </div>
                     <div class="enumerated">
                         <mat-list role="list">

src/app/scss/_palette.scss

@@ -0,0 +1,86 @@
+@use "sass:map";
+
+//Used in light themes
+$dark-primary-text: rgba(#000939, 0.87);
+$dark-secondary-text: rgba(#000939, 0.54);
+$dark-disabled-text: rgba(#000939, 0.38);
+$dark-dividers: rgba(#000939, 0.12);
+$dark-focused: rgba(#000939, 0.12);
+//Used in dark themes
+$light-primary-text: white;
+$light-secondary-text: rgba(white, 0.7);
+$light-disabled-text: rgba(white, 0.5);
+$light-dividers: rgba(white, 0.12);
+$light-focused: rgba(white, 0.12);
+
+$nothing-dark-map: (
+  50 : #acb7b7,
+  100 : #849393,
+  200 : #687777,
+  300 : #475151,
+  400 : #384040,
+  500 : #2a3030,
+  600 : #1c2020,
+  700 : #0d0f0f,
+  800 : #000000,
+  900 : #000000,
+  A100 : #8ecbcb,
+  A200 : #4da6a6,
+  A400 : #375656,
+  A700 : #334040,
+  contrast: (
+      50 : $dark-primary-text,
+      100 : $dark-primary-text,
+      200 : $light-primary-text,
+      300 : $light-primary-text,
+      400 : $light-primary-text,
+      500 : $light-primary-text,
+      600 : $light-primary-text,
+      700 : $light-primary-text,
+      800 : $light-primary-text,
+      900 : $light-primary-text,
+      A100 : $dark-primary-text,
+      A200 : $dark-primary-text,
+      A400 : $light-primary-text,
+      A700 : $light-primary-text,
+  )
+);
+
+
+
+
+$nothing-theme-background-palette: (
+  status-bar: #0b2844,
+  app-bar: map.get($nothing-dark-map, 900),
+  background: map.get($nothing-dark-map, 500),
+  hover: rgba(white, 0.04),
+  card: map.get($nothing-dark-map, 800),
+  dialog: map.get($nothing-dark-map, 800),
+  disabled-button: rgba(white, 0.12),
+  raised-button: map.get($nothing-dark-map, 800),
+  focused-button: $light-focused,
+  selected-button: map.get($nothing-dark-map, 900),
+  selected-disabled-button: map.get($nothing-dark-map, 800),
+  disabled-button-toggle: #243b53,
+  unselected-chip: map.get($nothing-dark-map, 700),
+  disabled-list-option: #243b53,
+  tooltip: map.get($nothing-dark-map, 700),
+  );
+  
+  $nothing-theme-foreground-palette: (
+    base: white,
+    divider: $light-dividers,
+    dividers: $light-dividers,
+    disabled: $light-disabled-text,
+    disabled-button: rgba(white, 0.3),
+    disabled-text: $light-disabled-text,
+    elevation: black,
+    hint-text: $light-disabled-text,
+    secondary-text: $light-secondary-text,
+    icon: white,
+    icons: white,
+    text: white,
+    slider-min: white,
+    slider-off: rgba(white, 0.3),
+    slider-off-active: rgba(white, 0.3),
+    );

src/app/scss/_theming.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use 'palette';
+
+@function define-nothing-theme($config) {
+  $theme: mat.define-dark-theme($config);
+  $color: map.get($theme, color);
+  $color: map.merge(
+    $color,
+    (
+      background: palette.$nothing-theme-background-palette,
+      foreground: palette.$nothing-theme-foreground-palette,
+    )
+  );
+  @return map.merge(
+    $theme,
+    (
+      color: $color,
+    )
+  );
+}

src/app/settings/settings.component.html

@@ -28,15 +28,15 @@
 
             </div>
             <div class="row">
-                <button mat-raised-button color="accent" (click)="rebindOverlayToggle()">Overlay toggle shortcut:
+                <button mat-raised-button color="primary" (click)="rebindOverlayToggle()">Overlay toggle shortcut:
                     {{configService.config.toggleOverlay}}</button>
             </div>
             <div class="row">
-                <button mat-raised-button color="accent" (click)="rebindPreviousZone()">Previous zone shortcut:
+                <button mat-raised-button color="primary" (click)="rebindPreviousZone()">Previous zone shortcut:
                     {{configService.config.prev}}</button>
             </div>
             <div class="row">
-                <button mat-raised-button color="accent" (click)="rebindNextZone()">Next zone shortcut:
+                <button mat-raised-button color="primary" (click)="rebindNextZone()">Next zone shortcut:
                     {{configService.config.next}}</button>
             </div>
         </div>

src/styles.scss

@@ -1,55 +1,21 @@
 @use '@angular/material' as mat;
+@use "app/scss/theming" as app;
 
 @import 'node_modules/bootstrap/scss/bootstrap-grid.scss';
 @import 'node_modules/bootstrap/scss/bootstrap-utilities.scss';
 
-@include mat.core();
-
-$nothing-primary-map: (
-  50 : #acb7b7,
-  100 : #849393,
-  200 : #687777,
-  300 : #475151,
-  400 : #384040,
-  500 : #2a3030,
-  600 : #1c2020,
-  700 : #0d0f0f,
-  800 : #000000,
-  900 : #000000,
-  A100 : #8ecbcb,
-  A200 : #4da6a6,
-  A400 : #375656,
-  A700 : #334040,
-  contrast: (
-      50 : #000000,
-      100 : #000000,
-      200 : #ffffff,
-      300 : #ffffff,
-      400 : #ffffff,
-      500 : #ffffff,
-      600 : #ffffff,
-      700 : #ffffff,
-      800 : #ffffff,
-      900 : #ffffff,
-      A100 : #000000,
-      A200 : #000000,
-      A400 : #ffffff,
-      A700 : #ffffff,
-  )
-);
 
-$primary: $nothing-primary-map.500;
-$accent: mat.$indigo-palette.500;
-
-$nothing-primary-palette: mat.define-palette($nothing-primary-map, 500);
-$nothing-accent-palette: mat.define-palette(mat.$indigo-palette, 800);
+@include mat.core();
+    
+$nothing-primary-palette: mat.define-palette(mat.$indigo-palette, 500);
+$nothing-accent-palette: mat.define-palette(mat.$indigo-palette, 200);
 
-$nothing-theme: mat.define-light-theme((
+$nothing-theme: app.define-nothing-theme((
  color: (
    primary: $nothing-primary-palette,
    accent: $nothing-accent-palette,
- ),
- density: 0,
+ )
+//  density: 0,
 ));
 
 .mat-primary-on-dark {
@@ -87,7 +53,7 @@ div.picker_wrapper.popup {
   flex-grow: 1;
 }
 
-.primary {
+.primary-bg {
   background-color: mat.get-color-from-palette($nothing-primary-palette, 500);
 }