Merge pull request #649 from crupest/drop-bootstrap

Drop bootstrap!!!

1 files changed, 58 insertions, 17 deletions

diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index ab3d6b54..dedad5e2 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -15,9 +15,22 @@ function darkenBy(color: Color, ratio: number): Color {
 
 export interface PaletteColor {
   color: string;
-  lighter: string;
-  darker: string;
-  inactive: string;
+  l1: string;
+  l2: string;
+  l3: string;
+  d1: string;
+  d2: string;
+  d3: string;
+  f1: string;
+  f2: string;
+  f3: string;
+  r1: string;
+  r2: string;
+  r3: string;
+  t: string;
+  t1: string;
+  t2: string;
+  t3: string;
   [key: string]: string;
 }
 
@@ -25,8 +38,6 @@ const paletteColorList = [
   "primary",
   "primary-enhance",
   "secondary",
-  "text-primary",
-  "text-on-primary",
   "danger",
   "success",
 ] as const;
@@ -37,13 +48,44 @@ export type Palette = Record<PaletteColorType, PaletteColor>;
 
 export function generatePaletteColor(color: string): PaletteColor {
   const c = Color(color);
+  const light = c.lightness() > 60;
+  const l1 = lightenBy(c, 0.1).rgb().toString();
+  const l2 = lightenBy(c, 0.2).rgb().toString();
+  const l3 = lightenBy(c, 0.3).rgb().toString();
+  const d1 = darkenBy(c, 0.1).rgb().toString();
+  const d2 = darkenBy(c, 0.2).rgb().toString();
+  const d3 = darkenBy(c, 0.3).rgb().toString();
+  const f1 = light ? l1 : d1;
+  const f2 = light ? l2 : d2;
+  const f3 = light ? l3 : d3;
+  const r1 = light ? d1 : l1;
+  const r2 = light ? d2 : l2;
+  const r3 = light ? d3 : l3;
+  const _t = light ? Color("black") : Color("white");
+  const t = _t.rgb().toString();
+  const _b = light ? lightenBy : darkenBy;
+  const t1 = _b(_t, 0.1).rgb().toString();
+  const t2 = _b(_t, 0.2).rgb().toString();
+  const t3 = _b(_t, 0.3).rgb().toString();
+
   return {
     color: c.rgb().toString(),
-    inactive: (c.lightness() > 60 ? darkenBy(c, 0.1) : lightenBy(c, 0.1))
-      .rgb()
-      .toString(),
-    lighter: lightenBy(c, 0.1).rgb().toString(),
-    darker: darkenBy(c, 0.1).rgb().toString(),
+    l1,
+    l2,
+    l3,
+    d1,
+    d2,
+    d3,
+    f1,
+    f2,
+    f3,
+    r1,
+    r2,
+    r3,
+    t,
+    t1,
+    t2,
+    t3,
   };
 }
 
@@ -58,16 +100,12 @@ export function generatePalette(options: {
     primaryEnhance == null
       ? lightenBy(p, 0.3).saturate(0.3)
       : Color(primaryEnhance);
-  const s = secondary == null ? p.rotate(90) : Color(secondary);
+  const s = secondary == null ? Color("gray") : Color(secondary);
 
   return {
     primary: generatePaletteColor(p.toString()),
     "primary-enhance": generatePaletteColor(pe.toString()),
     secondary: generatePaletteColor(s.toString()),
-    "text-primary": generatePaletteColor("#111111"),
-    "text-on-primary": generatePaletteColor(
-      p.lightness() > 60 ? "black" : "white"
-    ),
     danger: generatePaletteColor("red"),
     success: generatePaletteColor("green"),
   };
@@ -78,7 +116,7 @@ export function generatePaletteCSS(palette: Palette): string {
   for (const colorType of paletteColorList) {
     const paletteColor = palette[colorType];
     for (const variant in paletteColor) {
-      let key = `--tl-${colorType}`;
+      let key = `--cru-${colorType}`;
       if (variant !== "color") key += `-${variant}`;
       key += "-color";
       colors.push([key, paletteColor[variant]]);
@@ -91,7 +129,10 @@ export function generatePaletteCSS(palette: Palette): string {
 }
 
 const paletteSubject: BehaviorSubject<Palette | null> =
-  new BehaviorSubject<Palette | null>(null);
+  new BehaviorSubject<Palette | null>(
+    // generatePalette({ primary: "rgb(0, 123, 255)" })
+    null
+  );
 
 export const palette$: Observable<Palette | null> =
   paletteSubject.asObservable();