From 8b0b103859ad869021361de6090cbebff0574cdb Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 23:17:33 +0800
Subject: ...

---
 FrontEnd/src/index.css  | 31 ++++++++++++++++++++++++++++++-
 FrontEnd/src/palette.ts | 33 ++++++++++++++++++++-------------
 2 files changed, 50 insertions(+), 14 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css
index f64bbdf4..dfe22597 100644
--- a/FrontEnd/src/index.css
+++ b/FrontEnd/src/index.css
@@ -1,5 +1,34 @@
 :root {
   --tl-background-color: #f8f9fa;
+
+  --tl-primary-color: rgb(0, 123, 255);
+  --tl-primary-inactive-color: hsl(211.1, 100%, 55%);
+  --tl-primary-lighter-color: hsl(211.1, 100%, 55%);
+  --tl-primary-darker-color: hsl(211.1, 100%, 45%);
+  --tl-primary-enhance-color: hsl(211.1, 100%, 65%);
+  --tl-primary-enhance-inactive-color: hsl(211.1, 100%, 58.5%);
+  --tl-primary-enhance-lighter-color: hsl(211.1, 100%, 68.5%);
+  --tl-primary-enhance-darker-color: hsl(211.1, 100%, 58.5%);
+  --tl-secondary-color: hsl(301.1, 100%, 50%);
+  --tl-secondary-inactive-color: hsl(301.1, 100%, 55%);
+  --tl-secondary-lighter-color: hsl(301.1, 100%, 55%);
+  --tl-secondary-darker-color: hsl(301.1, 100%, 45%);
+  --tl-text-primary-color: rgb(17, 17, 17);
+  --tl-text-primary-inactive-color: hsl(0, 0%, 16%);
+  --tl-text-primary-lighter-color: hsl(0, 0%, 16%);
+  --tl-text-primary-darker-color: hsl(0, 0%, 6%);
+  --tl-text-on-primary-color: rgb(255, 255, 255);
+  --tl-text-on-primary-inactive-color: hsl(0, 0%, 90%);
+  --tl-text-on-primary-lighter-color: hsl(0, 0%, 100%);
+  --tl-text-on-primary-darker-color: hsl(0, 0%, 90%);
+  --tl-danger-color: rgb(255, 0, 0);
+  --tl-danger-inactive-color: hsl(0, 100%, 55%);
+  --tl-danger-lighter-color: hsl(0, 100%, 55%);
+  --tl-danger-darker-color: hsl(0, 100%, 45%);
+  --tl-success-color: rgb(0, 128, 0);
+  --tl-success-inactive-color: hsl(120, 100%, 32.6%);
+  --tl-success-lighter-color: hsl(120, 100%, 32.6%);
+  --tl-success-darker-color: hsl(120, 100%, 22.6%);
 }
 
 body {
@@ -48,7 +77,7 @@ small {
 }
 
 .icon-button.primary-enhance {
-  color: var(--tl-primary-enhance-color)
+  color: var(--tl-primary-enhance-color);
 }
 
 .cursor-pointer {
diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index 6385df66..767fe995 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -13,9 +13,9 @@ function darkenBy(color: Color, ratio: number): Color {
 
 export interface PaletteColor {
   color: string;
-  inactive: string;
   lighter: string;
   darker: string;
+  inactive: string;
   [key: string]: string;
 }
 
@@ -39,9 +39,9 @@ export function generatePaletteColor(color: string): PaletteColor {
     color: c.toString(),
     inactive: (c.lightness() > 60
       ? darkenBy(c, 0.1)
-      : lightenBy(c, 0.2)
+      : lightenBy(c, 0.1)
     ).toString(),
-    lighter: lightenBy(c, 0.1).fade(0.1).toString(),
+    lighter: lightenBy(c, 0.1).toString(),
     darker: darkenBy(c, 0.1).toString(),
   };
 }
@@ -89,21 +89,28 @@ export function generatePaletteCSS(palette: Palette): string {
     .join("")}}`;
 }
 
-const paletteSubject: BehaviorSubject<Palette> = new BehaviorSubject<Palette>(
-  generatePalette({ primary: "#007bff" })
-);
+const paletteSubject: BehaviorSubject<Palette | null> =
+  new BehaviorSubject<Palette | null>(null);
 
-export const palette$: Observable<Palette> = paletteSubject.asObservable();
+export const palette$: Observable<Palette | null> =
+  paletteSubject.asObservable();
 
 palette$.subscribe((palette) => {
   const styleTagId = "timeline-palette-css";
-  let styleTag = document.getElementById(styleTagId);
-  if (styleTag == null) {
-    styleTag = document.createElement("style");
-    styleTag.id = styleTagId;
-    document.head.append(styleTag);
+  if (palette != null) {
+    let styleTag = document.getElementById(styleTagId);
+    if (styleTag == null) {
+      styleTag = document.createElement("style");
+      styleTag.id = styleTagId;
+      document.head.append(styleTag);
+    }
+    styleTag.innerHTML = generatePaletteCSS(palette);
+  } else {
+    const styleTag = document.getElementById(styleTagId);
+    if (styleTag != null) {
+      styleTag.parentElement?.removeChild(styleTag);
+    }
   }
-  styleTag.innerHTML = generatePaletteCSS(palette);
 });
 
 export function setPalette(palette: Palette): () => void {
-- 
cgit v1.2.3