...

6 files changed, 46 insertions, 73 deletions

diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index ca1f76cf..dedad5e2 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -27,6 +27,10 @@ export interface PaletteColor {
   r1: string;
   r2: string;
   r3: string;
+  t: string;
+  t1: string;
+  t2: string;
+  t3: string;
   [key: string]: string;
 }
 
@@ -34,10 +38,6 @@ const paletteColorList = [
   "primary",
   "primary-enhance",
   "secondary",
-  "text-primary",
-  "text-on-primary",
-  "text-on-primary-enhance",
-  "text-on-secondary",
   "danger",
   "success",
 ] as const;
@@ -61,6 +61,12 @@ export function generatePaletteColor(color: string): PaletteColor {
   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(),
@@ -76,6 +82,10 @@ export function generatePaletteColor(color: string): PaletteColor {
     r1,
     r2,
     r3,
+    t,
+    t1,
+    t2,
+    t3,
   };
 }
 
@@ -96,16 +106,6 @@ export function generatePalette(options: {
     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"
-    ),
-    "text-on-primary-enhance": generatePaletteColor(
-      pe.lightness() > 60 ? "black" : "white"
-    ),
-    "text-on-secondary": generatePaletteColor(
-      s.lightness() > 60 ? "black" : "white"
-    ),
     danger: generatePaletteColor("red"),
     success: generatePaletteColor("green"),
   };
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index e4bdf852..3ec4fa36 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -16,16 +16,16 @@
 }

 

 .app-bar a {

-  color: var(--cru-text-on-primary-r1-color);

+  color: var(--cru-primary-t1-color);

   text-decoration: none;

   margin: 0 1em;

   transition: color 1s;

 }

 .app-bar a:hover {

-  color: var(--cru-text-on-primary-color);

+  color: var(--cru-primary-t-color);

 }

 .app-bar a.active {

-  color: var(--cru-text-on-primary-color);

+  color: var(--cru-primary-t-color);

 }

 

 .app-bar-brand {

@@ -89,7 +89,7 @@
   margin-left: auto;

   font-size: 2em;

   margin-right: 1em;

-  color: var(--cru-text-on-primary-color);

+  color: var(--cru-primary-t-color);

   cursor: pointer;

   user-select: none;

 }

diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 3e408d8d..11d211c5 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,5 +1,6 @@
 .cru-button.primary {

   --cru-button-color: var(--cru-primary-color);

+  --cru-button-t-color: var(--cru-primary-t-color);

   --cru-button-f1-color: var(--cru-primary-f1-color);

   --cru-button-f2-color: var(--cru-primary-f2-color);

   --cru-button-f3-color: var(--cru-primary-f3-color);

@@ -7,6 +8,7 @@
 

 .cru-button.primary-enhance {

   --cru-button-color: var(--cru-primary-enhance-color);

+  --cru-button-t-color: var(--cru-primary-enhance-t-color);

   --cru-button-f1-color: var(--cru-primary-enhance-f1-color);

   --cru-button-f2-color: var(--cru-primary-enhance-f2-color);

   --cru-button-f3-color: var(--cru-primary-enhance-f3-color);

@@ -14,6 +16,7 @@
 

 .cru-button.secondary {

   --cru-button-color: var(--cru-secondary-color);

+  --cru-button-t-color: var(--cru-secondary-t-color);

   --cru-button-f1-color: var(--cru-secondary-f1-color);

   --cru-button-f2-color: var(--cru-secondary-f2-color);

   --cru-button-f3-color: var(--cru-secondary-f3-color);

@@ -21,6 +24,7 @@
 

 .cru-button.success {

   --cru-button-color: var(--cru-success-color);

+  --cru-button-t-color: var(--cru-success-t-color);

   --cru-button-f1-color: var(--cru-success-f1-color);

   --cru-button-f2-color: var(--cru-success-f2-color);

   --cru-button-f3-color: var(--cru-success-f3-color);

@@ -28,13 +32,14 @@
 

 .cru-button.danger {

   --cru-button-color: var(--cru-danger-color);

+  --cru-button-t-color: var(--cru-danger-t-color);

   --cru-button-f1-color: var(--cru-danger-f1-color);

   --cru-button-f2-color: var(--cru-danger-f2-color);

   --cru-button-f3-color: var(--cru-danger-f3-color);

 }

 

 .cru-button:not(.outline) {

-  color: white;

+  color: var(--cru-button-t-color);

   cursor: pointer;

   padding: 0.2em 0.5em;

   border-radius: 0.2em;

diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css
index a7033398..a196981c 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.css
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css
@@ -26,5 +26,5 @@
 }

 

 .cru-full-page-back-button {

-  color: var(--cru-text-on-primary-color);

+  color: var(--cru-primary-t-color);

 }

diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 8eb24e1d..75ec6485 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -14,6 +14,10 @@
   --cru-primary-r1-color: rgb(26, 136, 255);

   --cru-primary-r2-color: rgb(51, 149, 255);

   --cru-primary-r3-color: rgb(77, 163, 255);

+  --cru-primary-t-color: rgb(255, 255, 255);

+  --cru-primary-t1-color: rgb(230, 230, 230);

+  --cru-primary-t2-color: rgb(204, 204, 204);

+  --cru-primary-t3-color: rgb(179, 179, 179);

   --cru-primary-enhance-color: rgb(77, 163, 255);

   --cru-primary-enhance-l1-color: rgb(94, 172, 255);

   --cru-primary-enhance-l2-color: rgb(112, 181, 255);

@@ -27,6 +31,10 @@
   --cru-primary-enhance-r1-color: rgb(43, 145, 255);

   --cru-primary-enhance-r2-color: rgb(10, 128, 255);

   --cru-primary-enhance-r3-color: rgb(0, 112, 232);

+  --cru-primary-enhance-t-color: rgb(0, 0, 0);

+  --cru-primary-enhance-t1-color: rgb(26, 26, 26);

+  --cru-primary-enhance-t2-color: rgb(51, 51, 51);

+  --cru-primary-enhance-t3-color: rgb(77, 77, 77);

   --cru-secondary-color: rgb(128, 128, 128);

   --cru-secondary-l1-color: rgb(141, 141, 141);

   --cru-secondary-l2-color: rgb(153, 153, 153);

@@ -40,58 +48,10 @@
   --cru-secondary-r1-color: rgb(141, 141, 141);

   --cru-secondary-r2-color: rgb(153, 153, 153);

   --cru-secondary-r3-color: rgb(166, 166, 166);

-  --cru-text-primary-color: rgb(17, 17, 17);

-  --cru-text-primary-l1-color: rgb(41, 41, 41);

-  --cru-text-primary-l2-color: rgb(65, 65, 65);

-  --cru-text-primary-l3-color: rgb(88, 88, 88);

-  --cru-text-primary-d1-color: rgb(15, 15, 15);

-  --cru-text-primary-d2-color: rgb(14, 14, 14);

-  --cru-text-primary-d3-color: rgb(12, 12, 12);

-  --cru-text-primary-f1-color: rgb(15, 15, 15);

-  --cru-text-primary-f2-color: rgb(14, 14, 14);

-  --cru-text-primary-f3-color: rgb(12, 12, 12);

-  --cru-text-primary-r1-color: rgb(41, 41, 41);

-  --cru-text-primary-r2-color: rgb(65, 65, 65);

-  --cru-text-primary-r3-color: rgb(88, 88, 88);

-  --cru-text-on-primary-color: rgb(255, 255, 255);

-  --cru-text-on-primary-l1-color: rgb(255, 255, 255);

-  --cru-text-on-primary-l2-color: rgb(255, 255, 255);

-  --cru-text-on-primary-l3-color: rgb(255, 255, 255);

-  --cru-text-on-primary-d1-color: rgb(230, 230, 230);

-  --cru-text-on-primary-d2-color: rgb(204, 204, 204);

-  --cru-text-on-primary-d3-color: rgb(179, 179, 179);

-  --cru-text-on-primary-f1-color: rgb(255, 255, 255);

-  --cru-text-on-primary-f2-color: rgb(255, 255, 255);

-  --cru-text-on-primary-f3-color: rgb(255, 255, 255);

-  --cru-text-on-primary-r1-color: rgb(230, 230, 230);

-  --cru-text-on-primary-r2-color: rgb(204, 204, 204);

-  --cru-text-on-primary-r3-color: rgb(179, 179, 179);

-  --cru-text-on-primary-enhance-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-l1-color: rgb(26, 26, 26);

-  --cru-text-on-primary-enhance-l2-color: rgb(51, 51, 51);

-  --cru-text-on-primary-enhance-l3-color: rgb(77, 77, 77);

-  --cru-text-on-primary-enhance-d1-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-d2-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-d3-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-f1-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-f2-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-f3-color: rgb(0, 0, 0);

-  --cru-text-on-primary-enhance-r1-color: rgb(26, 26, 26);

-  --cru-text-on-primary-enhance-r2-color: rgb(51, 51, 51);

-  --cru-text-on-primary-enhance-r3-color: rgb(77, 77, 77);

-  --cru-text-on-secondary-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-l1-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-l2-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-l3-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-d1-color: rgb(230, 230, 230);

-  --cru-text-on-secondary-d2-color: rgb(204, 204, 204);

-  --cru-text-on-secondary-d3-color: rgb(179, 179, 179);

-  --cru-text-on-secondary-f1-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-f2-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-f3-color: rgb(255, 255, 255);

-  --cru-text-on-secondary-r1-color: rgb(230, 230, 230);

-  --cru-text-on-secondary-r2-color: rgb(204, 204, 204);

-  --cru-text-on-secondary-r3-color: rgb(179, 179, 179);

+  --cru-secondary-t-color: rgb(255, 255, 255);

+  --cru-secondary-t1-color: rgb(230, 230, 230);

+  --cru-secondary-t2-color: rgb(204, 204, 204);

+  --cru-secondary-t3-color: rgb(179, 179, 179);

   --cru-danger-color: rgb(255, 0, 0);

   --cru-danger-l1-color: rgb(255, 26, 26);

   --cru-danger-l2-color: rgb(255, 51, 51);

@@ -105,6 +65,10 @@
   --cru-danger-r1-color: rgb(255, 26, 26);

   --cru-danger-r2-color: rgb(255, 51, 51);

   --cru-danger-r3-color: rgb(255, 77, 77);

+  --cru-danger-t-color: rgb(255, 255, 255);

+  --cru-danger-t1-color: rgb(230, 230, 230);

+  --cru-danger-t2-color: rgb(204, 204, 204);

+  --cru-danger-t3-color: rgb(179, 179, 179);

   --cru-success-color: rgb(0, 128, 0);

   --cru-success-l1-color: rgb(0, 166, 0);

   --cru-success-l2-color: rgb(0, 204, 0);

@@ -118,6 +82,10 @@
   --cru-success-r1-color: rgb(0, 166, 0);

   --cru-success-r2-color: rgb(0, 204, 0);

   --cru-success-r3-color: rgb(0, 243, 0);

+  --cru-success-t-color: rgb(255, 255, 255);

+  --cru-success-t1-color: rgb(230, 230, 230);

+  --cru-success-t2-color: rgb(204, 204, 204);

+  --cru-success-t3-color: rgb(179, 179, 179);

 }

 

 .cru-color-primary {

diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index e0ea2cad..c933b34f 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -13,7 +13,7 @@
 }

 

 .cru-menu-item.color-primary:hover {

-  color: var(--cru-text-on-primary-color);

+  color: var(--cru-primary-t-color);

   background-color: var(--cru-primary-color);

 }