5 files changed, 32 insertions, 59 deletions
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);
 }