...

6 files changed, 279 insertions, 271 deletions

diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index 6de0dd8e..fa470130 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,15 +1,10 @@
-:root {

-  --cru-card-border-radius: 8px;

-}

-

 .cru-card {

   border: 1px solid;

   border-color: #e9ecef;

   border-radius: var(--cru-card-border-radius);

-  background: #fefeff;

   transition: all 0.3s;

 }

 

 .cru-card:hover {

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

-}

+}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 7a271446..0df22ebe 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -9,11 +9,11 @@
 }

 

 .cru-button:not(.outline):hover {

-  background-color: var(--cru-theme-b1-color);

+  background-color: var(--cru-theme-d1-color);

 }

 

 .cru-button:not(.outline):active {

-  background-color: var(--cru-theme-b2-color);

+  background-color: var(--cru-theme-d2-color);

 }

 

 .cru-button:not(.outline):disabled {

@@ -32,14 +32,14 @@
 }

 

 .cru-button.outline:hover {

-  color: var(--cru-theme-b1-color);

-  border-color: var(--cru-theme-b1-color);

+  color: var(--cru-theme-d1-color);

+  border-color: var(--cru-theme-d1-color);

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

 }

 

 .cru-button.outline:active {

-  color: var(--cru-theme-b2-color);

-  border-color: var(--cru-theme-b2-color);

+  color: var(--cru-theme-l2-color);

+  border-color: var(--cru-theme-l2-color);

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

 }

 

diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index ea45e783..01eabca9 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -9,7 +9,7 @@
 }

 

 .cru-flat-button.disabled {

-  color: var(--cru-theme-f1-color);

+  color: var(--cru-disabled-color);

   cursor: default;

 }

 

diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 16a7f924..9d69997b 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,10 +1,18 @@
 @import "./theme.css";

 

+* {

+  box-sizing: border-box;

+  margin-inline: 0;

+  margin-block: 0;

+}

+

 body {

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

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

+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

 }

 

+

 .cru-text-center {

   text-align: center;

 }

diff --git a/FrontEnd/src/views/common/theme-color.css b/FrontEnd/src/views/common/theme-color.css
new file mode 100644
index 00000000..9dfa1d9a
--- /dev/null
+++ b/FrontEnd/src/views/common/theme-color.css
@@ -0,0 +1,260 @@
+/* Generated by theme-generator.ts */
+
+:root {
+  --cru-primary-color: hsl(210 100% 50%);
+  --cru-primary-l1-color: hsl(210 100% 55%);
+  --cru-primary-l2-color: hsl(210 100% 60%);
+  --cru-primary-l3-color: hsl(210 100% 65%);
+  --cru-primary-d1-color: hsl(210 100% 45%);
+  --cru-primary-d2-color: hsl(210 100% 40%);
+  --cru-primary-d3-color: hsl(210 100% 35%);
+  --cru-primary-f1-color: hsl(210 100% 55%);
+  --cru-primary-f2-color: hsl(210 100% 60%);
+  --cru-primary-f3-color: hsl(210 100% 65%);
+  --cru-primary-b1-color: hsl(210 100% 45%);
+  --cru-primary-b2-color: hsl(210 100% 40%);
+  --cru-primary-b3-color: hsl(210 100% 35%);
+  --cru-secondary-color: hsl(40 100% 50%);
+  --cru-secondary-l1-color: hsl(40 100% 55%);
+  --cru-secondary-l2-color: hsl(40 100% 60%);
+  --cru-secondary-l3-color: hsl(40 100% 65%);
+  --cru-secondary-d1-color: hsl(40 100% 45%);
+  --cru-secondary-d2-color: hsl(40 100% 40%);
+  --cru-secondary-d3-color: hsl(40 100% 35%);
+  --cru-secondary-f1-color: hsl(40 100% 55%);
+  --cru-secondary-f2-color: hsl(40 100% 60%);
+  --cru-secondary-f3-color: hsl(40 100% 65%);
+  --cru-secondary-b1-color: hsl(40 100% 45%);
+  --cru-secondary-b2-color: hsl(40 100% 40%);
+  --cru-secondary-b3-color: hsl(40 100% 35%);
+  --cru-tertiary-color: hsl(160 100% 50%);
+  --cru-tertiary-l1-color: hsl(160 100% 55%);
+  --cru-tertiary-l2-color: hsl(160 100% 60%);
+  --cru-tertiary-l3-color: hsl(160 100% 65%);
+  --cru-tertiary-d1-color: hsl(160 100% 45%);
+  --cru-tertiary-d2-color: hsl(160 100% 40%);
+  --cru-tertiary-d3-color: hsl(160 100% 35%);
+  --cru-tertiary-f1-color: hsl(160 100% 55%);
+  --cru-tertiary-f2-color: hsl(160 100% 60%);
+  --cru-tertiary-f3-color: hsl(160 100% 65%);
+  --cru-tertiary-b1-color: hsl(160 100% 45%);
+  --cru-tertiary-b2-color: hsl(160 100% 40%);
+  --cru-tertiary-b3-color: hsl(160 100% 35%);
+  --cru-danger-color: hsl(0 100% 50%);
+  --cru-danger-l1-color: hsl(0 100% 55%);
+  --cru-danger-l2-color: hsl(0 100% 60%);
+  --cru-danger-l3-color: hsl(0 100% 65%);
+  --cru-danger-d1-color: hsl(0 100% 45%);
+  --cru-danger-d2-color: hsl(0 100% 40%);
+  --cru-danger-d3-color: hsl(0 100% 35%);
+  --cru-danger-f1-color: hsl(0 100% 55%);
+  --cru-danger-f2-color: hsl(0 100% 60%);
+  --cru-danger-f3-color: hsl(0 100% 65%);
+  --cru-danger-b1-color: hsl(0 100% 45%);
+  --cru-danger-b2-color: hsl(0 100% 40%);
+  --cru-danger-b3-color: hsl(0 100% 35%);
+  --cru-success-color: hsl(120 60% 50%);
+  --cru-success-l1-color: hsl(120 60% 55%);
+  --cru-success-l2-color: hsl(120 60% 60%);
+  --cru-success-l3-color: hsl(120 60% 65%);
+  --cru-success-d1-color: hsl(120 60% 45%);
+  --cru-success-d2-color: hsl(120 60% 40%);
+  --cru-success-d3-color: hsl(120 60% 35%);
+  --cru-success-f1-color: hsl(120 60% 55%);
+  --cru-success-f2-color: hsl(120 60% 60%);
+  --cru-success-f3-color: hsl(120 60% 65%);
+  --cru-success-b1-color: hsl(120 60% 45%);
+  --cru-success-b2-color: hsl(120 60% 40%);
+  --cru-success-b3-color: hsl(120 60% 35%);
+  --cru-text-color: hsl(0 0% 0%);
+  --cru-text-1-color: hsl(0 0% 5%);
+  --cru-text-2-color: hsl(0 0% 10%);
+  --cru-text-3-color: hsl(0 0% 15%);
+  --cru-bg-color: hsl(0 0% 100%);
+  --cru-bg-1-color: hsl(0 0% 95%);
+  --cru-bg-2-color: hsl(0 0% 90%);
+  --cru-bg-3-color: hsl(0 0% 85%);
+  --cru-light-color: hsl(0 0% 100%);
+  --cru-light-1-color: hsl(0 0% 95%);
+  --cru-light-2-color: hsl(0 0% 90%);
+  --cru-light-3-color: hsl(0 0% 85%);
+  --cru-dark-color: hsl(0 0% 0%);
+  --cru-dark-1-color: hsl(0 0% 5%);
+  --cru-dark-2-color: hsl(0 0% 10%);
+  --cru-dark-3-color: hsl(0 0% 15%);
+  --cru-disabled-color: hsl(0 0% 75%);
+  --cru-disabled-1-color: hsl(0 0% 70%);
+  --cru-disabled-2-color: hsl(0 0% 65%);
+  --cru-disabled-3-color: hsl(0 0% 60%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cru-primary-color: hsl(210 100% 50%);
+    --cru-primary-l1-color: hsl(210 100% 55%);
+    --cru-primary-l2-color: hsl(210 100% 60%);
+    --cru-primary-l3-color: hsl(210 100% 65%);
+    --cru-primary-d1-color: hsl(210 100% 45%);
+    --cru-primary-d2-color: hsl(210 100% 40%);
+    --cru-primary-d3-color: hsl(210 100% 35%);
+    --cru-primary-f1-color: hsl(210 100% 45%);
+    --cru-primary-f2-color: hsl(210 100% 40%);
+    --cru-primary-f3-color: hsl(210 100% 35%);
+    --cru-primary-b1-color: hsl(210 100% 55%);
+    --cru-primary-b2-color: hsl(210 100% 60%);
+    --cru-primary-b3-color: hsl(210 100% 65%);
+    --cru-secondary-color: hsl(40 100% 50%);
+    --cru-secondary-l1-color: hsl(40 100% 55%);
+    --cru-secondary-l2-color: hsl(40 100% 60%);
+    --cru-secondary-l3-color: hsl(40 100% 65%);
+    --cru-secondary-d1-color: hsl(40 100% 45%);
+    --cru-secondary-d2-color: hsl(40 100% 40%);
+    --cru-secondary-d3-color: hsl(40 100% 35%);
+    --cru-secondary-f1-color: hsl(40 100% 45%);
+    --cru-secondary-f2-color: hsl(40 100% 40%);
+    --cru-secondary-f3-color: hsl(40 100% 35%);
+    --cru-secondary-b1-color: hsl(40 100% 55%);
+    --cru-secondary-b2-color: hsl(40 100% 60%);
+    --cru-secondary-b3-color: hsl(40 100% 65%);
+    --cru-tertiary-color: hsl(160 100% 50%);
+    --cru-tertiary-l1-color: hsl(160 100% 55%);
+    --cru-tertiary-l2-color: hsl(160 100% 60%);
+    --cru-tertiary-l3-color: hsl(160 100% 65%);
+    --cru-tertiary-d1-color: hsl(160 100% 45%);
+    --cru-tertiary-d2-color: hsl(160 100% 40%);
+    --cru-tertiary-d3-color: hsl(160 100% 35%);
+    --cru-tertiary-f1-color: hsl(160 100% 45%);
+    --cru-tertiary-f2-color: hsl(160 100% 40%);
+    --cru-tertiary-f3-color: hsl(160 100% 35%);
+    --cru-tertiary-b1-color: hsl(160 100% 55%);
+    --cru-tertiary-b2-color: hsl(160 100% 60%);
+    --cru-tertiary-b3-color: hsl(160 100% 65%);
+    --cru-danger-color: hsl(0 100% 50%);
+    --cru-danger-l1-color: hsl(0 100% 55%);
+    --cru-danger-l2-color: hsl(0 100% 60%);
+    --cru-danger-l3-color: hsl(0 100% 65%);
+    --cru-danger-d1-color: hsl(0 100% 45%);
+    --cru-danger-d2-color: hsl(0 100% 40%);
+    --cru-danger-d3-color: hsl(0 100% 35%);
+    --cru-danger-f1-color: hsl(0 100% 45%);
+    --cru-danger-f2-color: hsl(0 100% 40%);
+    --cru-danger-f3-color: hsl(0 100% 35%);
+    --cru-danger-b1-color: hsl(0 100% 55%);
+    --cru-danger-b2-color: hsl(0 100% 60%);
+    --cru-danger-b3-color: hsl(0 100% 65%);
+    --cru-success-color: hsl(120 60% 50%);
+    --cru-success-l1-color: hsl(120 60% 55%);
+    --cru-success-l2-color: hsl(120 60% 60%);
+    --cru-success-l3-color: hsl(120 60% 65%);
+    --cru-success-d1-color: hsl(120 60% 45%);
+    --cru-success-d2-color: hsl(120 60% 40%);
+    --cru-success-d3-color: hsl(120 60% 35%);
+    --cru-success-f1-color: hsl(120 60% 45%);
+    --cru-success-f2-color: hsl(120 60% 40%);
+    --cru-success-f3-color: hsl(120 60% 35%);
+    --cru-success-b1-color: hsl(120 60% 55%);
+    --cru-success-b2-color: hsl(120 60% 60%);
+    --cru-success-b3-color: hsl(120 60% 65%);
+    --cru-text-color: hsl(0 0% 100%);
+    --cru-text-1-color: hsl(0 0% 95%);
+    --cru-text-2-color: hsl(0 0% 90%);
+    --cru-text-3-color: hsl(0 0% 85%);
+    --cru-bg-color: hsl(0 0% 0%);
+    --cru-bg-1-color: hsl(0 0% 5%);
+    --cru-bg-2-color: hsl(0 0% 10%);
+    --cru-bg-3-color: hsl(0 0% 15%);
+    --cru-light-color: hsl(0 0% 100%);
+    --cru-light-1-color: hsl(0 0% 95%);
+    --cru-light-2-color: hsl(0 0% 90%);
+    --cru-light-3-color: hsl(0 0% 85%);
+    --cru-dark-color: hsl(0 0% 0%);
+    --cru-dark-1-color: hsl(0 0% 5%);
+    --cru-dark-2-color: hsl(0 0% 10%);
+    --cru-dark-3-color: hsl(0 0% 15%);
+    --cru-disabled-color: hsl(0 0% 25%);
+    --cru-disabled-1-color: hsl(0 0% 30%);
+    --cru-disabled-2-color: hsl(0 0% 35%);
+    --cru-disabled-3-color: hsl(0 0% 40%);
+  }
+}
+
+.cru-primary {
+  --cru-theme-color: var(--cru-primary-color);
+  --cru-theme-l1-color: var(--cru-primary-l1-color);
+  --cru-theme-l2-color: var(--cru-primary-l2-color);
+  --cru-theme-l3-color: var(--cru-primary-l3-color);
+  --cru-theme-d1-color: var(--cru-primary-d1-color);
+  --cru-theme-d2-color: var(--cru-primary-d2-color);
+  --cru-theme-d3-color: var(--cru-primary-d3-color);
+  --cru-theme-f1-color: var(--cru-primary-f1-color);
+  --cru-theme-f2-color: var(--cru-primary-f2-color);
+  --cru-theme-f3-color: var(--cru-primary-f3-color);
+  --cru-theme-b1-color: var(--cru-primary-b1-color);
+  --cru-theme-b2-color: var(--cru-primary-b2-color);
+  --cru-theme-b3-color: var(--cru-primary-b3-color);
+}
+
+.cru-secondary {
+  --cru-theme-color: var(--cru-secondary-color);
+  --cru-theme-l1-color: var(--cru-secondary-l1-color);
+  --cru-theme-l2-color: var(--cru-secondary-l2-color);
+  --cru-theme-l3-color: var(--cru-secondary-l3-color);
+  --cru-theme-d1-color: var(--cru-secondary-d1-color);
+  --cru-theme-d2-color: var(--cru-secondary-d2-color);
+  --cru-theme-d3-color: var(--cru-secondary-d3-color);
+  --cru-theme-f1-color: var(--cru-secondary-f1-color);
+  --cru-theme-f2-color: var(--cru-secondary-f2-color);
+  --cru-theme-f3-color: var(--cru-secondary-f3-color);
+  --cru-theme-b1-color: var(--cru-secondary-b1-color);
+  --cru-theme-b2-color: var(--cru-secondary-b2-color);
+  --cru-theme-b3-color: var(--cru-secondary-b3-color);
+}
+
+.cru-tertiary {
+  --cru-theme-color: var(--cru-tertiary-color);
+  --cru-theme-l1-color: var(--cru-tertiary-l1-color);
+  --cru-theme-l2-color: var(--cru-tertiary-l2-color);
+  --cru-theme-l3-color: var(--cru-tertiary-l3-color);
+  --cru-theme-d1-color: var(--cru-tertiary-d1-color);
+  --cru-theme-d2-color: var(--cru-tertiary-d2-color);
+  --cru-theme-d3-color: var(--cru-tertiary-d3-color);
+  --cru-theme-f1-color: var(--cru-tertiary-f1-color);
+  --cru-theme-f2-color: var(--cru-tertiary-f2-color);
+  --cru-theme-f3-color: var(--cru-tertiary-f3-color);
+  --cru-theme-b1-color: var(--cru-tertiary-b1-color);
+  --cru-theme-b2-color: var(--cru-tertiary-b2-color);
+  --cru-theme-b3-color: var(--cru-tertiary-b3-color);
+}
+
+.cru-danger {
+  --cru-theme-color: var(--cru-danger-color);
+  --cru-theme-l1-color: var(--cru-danger-l1-color);
+  --cru-theme-l2-color: var(--cru-danger-l2-color);
+  --cru-theme-l3-color: var(--cru-danger-l3-color);
+  --cru-theme-d1-color: var(--cru-danger-d1-color);
+  --cru-theme-d2-color: var(--cru-danger-d2-color);
+  --cru-theme-d3-color: var(--cru-danger-d3-color);
+  --cru-theme-f1-color: var(--cru-danger-f1-color);
+  --cru-theme-f2-color: var(--cru-danger-f2-color);
+  --cru-theme-f3-color: var(--cru-danger-f3-color);
+  --cru-theme-b1-color: var(--cru-danger-b1-color);
+  --cru-theme-b2-color: var(--cru-danger-b2-color);
+  --cru-theme-b3-color: var(--cru-danger-b3-color);
+}
+
+.cru-success {
+  --cru-theme-color: var(--cru-success-color);
+  --cru-theme-l1-color: var(--cru-success-l1-color);
+  --cru-theme-l2-color: var(--cru-success-l2-color);
+  --cru-theme-l3-color: var(--cru-success-l3-color);
+  --cru-theme-d1-color: var(--cru-success-d1-color);
+  --cru-theme-d2-color: var(--cru-success-d2-color);
+  --cru-theme-d3-color: var(--cru-success-d3-color);
+  --cru-theme-f1-color: var(--cru-success-f1-color);
+  --cru-theme-f2-color: var(--cru-success-f2-color);
+  --cru-theme-f3-color: var(--cru-success-f3-color);
+  --cru-theme-b1-color: var(--cru-success-b1-color);
+  --cru-theme-b2-color: var(--cru-success-b2-color);
+  --cru-theme-b3-color: var(--cru-success-b3-color);
+}
+
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 9dfa1d9a..28c16627 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -1,260 +1,5 @@
-/* Generated by theme-generator.ts */
+@import "./theme-color.css";
 
 :root {
-  --cru-primary-color: hsl(210 100% 50%);
-  --cru-primary-l1-color: hsl(210 100% 55%);
-  --cru-primary-l2-color: hsl(210 100% 60%);
-  --cru-primary-l3-color: hsl(210 100% 65%);
-  --cru-primary-d1-color: hsl(210 100% 45%);
-  --cru-primary-d2-color: hsl(210 100% 40%);
-  --cru-primary-d3-color: hsl(210 100% 35%);
-  --cru-primary-f1-color: hsl(210 100% 55%);
-  --cru-primary-f2-color: hsl(210 100% 60%);
-  --cru-primary-f3-color: hsl(210 100% 65%);
-  --cru-primary-b1-color: hsl(210 100% 45%);
-  --cru-primary-b2-color: hsl(210 100% 40%);
-  --cru-primary-b3-color: hsl(210 100% 35%);
-  --cru-secondary-color: hsl(40 100% 50%);
-  --cru-secondary-l1-color: hsl(40 100% 55%);
-  --cru-secondary-l2-color: hsl(40 100% 60%);
-  --cru-secondary-l3-color: hsl(40 100% 65%);
-  --cru-secondary-d1-color: hsl(40 100% 45%);
-  --cru-secondary-d2-color: hsl(40 100% 40%);
-  --cru-secondary-d3-color: hsl(40 100% 35%);
-  --cru-secondary-f1-color: hsl(40 100% 55%);
-  --cru-secondary-f2-color: hsl(40 100% 60%);
-  --cru-secondary-f3-color: hsl(40 100% 65%);
-  --cru-secondary-b1-color: hsl(40 100% 45%);
-  --cru-secondary-b2-color: hsl(40 100% 40%);
-  --cru-secondary-b3-color: hsl(40 100% 35%);
-  --cru-tertiary-color: hsl(160 100% 50%);
-  --cru-tertiary-l1-color: hsl(160 100% 55%);
-  --cru-tertiary-l2-color: hsl(160 100% 60%);
-  --cru-tertiary-l3-color: hsl(160 100% 65%);
-  --cru-tertiary-d1-color: hsl(160 100% 45%);
-  --cru-tertiary-d2-color: hsl(160 100% 40%);
-  --cru-tertiary-d3-color: hsl(160 100% 35%);
-  --cru-tertiary-f1-color: hsl(160 100% 55%);
-  --cru-tertiary-f2-color: hsl(160 100% 60%);
-  --cru-tertiary-f3-color: hsl(160 100% 65%);
-  --cru-tertiary-b1-color: hsl(160 100% 45%);
-  --cru-tertiary-b2-color: hsl(160 100% 40%);
-  --cru-tertiary-b3-color: hsl(160 100% 35%);
-  --cru-danger-color: hsl(0 100% 50%);
-  --cru-danger-l1-color: hsl(0 100% 55%);
-  --cru-danger-l2-color: hsl(0 100% 60%);
-  --cru-danger-l3-color: hsl(0 100% 65%);
-  --cru-danger-d1-color: hsl(0 100% 45%);
-  --cru-danger-d2-color: hsl(0 100% 40%);
-  --cru-danger-d3-color: hsl(0 100% 35%);
-  --cru-danger-f1-color: hsl(0 100% 55%);
-  --cru-danger-f2-color: hsl(0 100% 60%);
-  --cru-danger-f3-color: hsl(0 100% 65%);
-  --cru-danger-b1-color: hsl(0 100% 45%);
-  --cru-danger-b2-color: hsl(0 100% 40%);
-  --cru-danger-b3-color: hsl(0 100% 35%);
-  --cru-success-color: hsl(120 60% 50%);
-  --cru-success-l1-color: hsl(120 60% 55%);
-  --cru-success-l2-color: hsl(120 60% 60%);
-  --cru-success-l3-color: hsl(120 60% 65%);
-  --cru-success-d1-color: hsl(120 60% 45%);
-  --cru-success-d2-color: hsl(120 60% 40%);
-  --cru-success-d3-color: hsl(120 60% 35%);
-  --cru-success-f1-color: hsl(120 60% 55%);
-  --cru-success-f2-color: hsl(120 60% 60%);
-  --cru-success-f3-color: hsl(120 60% 65%);
-  --cru-success-b1-color: hsl(120 60% 45%);
-  --cru-success-b2-color: hsl(120 60% 40%);
-  --cru-success-b3-color: hsl(120 60% 35%);
-  --cru-text-color: hsl(0 0% 0%);
-  --cru-text-1-color: hsl(0 0% 5%);
-  --cru-text-2-color: hsl(0 0% 10%);
-  --cru-text-3-color: hsl(0 0% 15%);
-  --cru-bg-color: hsl(0 0% 100%);
-  --cru-bg-1-color: hsl(0 0% 95%);
-  --cru-bg-2-color: hsl(0 0% 90%);
-  --cru-bg-3-color: hsl(0 0% 85%);
-  --cru-light-color: hsl(0 0% 100%);
-  --cru-light-1-color: hsl(0 0% 95%);
-  --cru-light-2-color: hsl(0 0% 90%);
-  --cru-light-3-color: hsl(0 0% 85%);
-  --cru-dark-color: hsl(0 0% 0%);
-  --cru-dark-1-color: hsl(0 0% 5%);
-  --cru-dark-2-color: hsl(0 0% 10%);
-  --cru-dark-3-color: hsl(0 0% 15%);
-  --cru-disabled-color: hsl(0 0% 75%);
-  --cru-disabled-1-color: hsl(0 0% 70%);
-  --cru-disabled-2-color: hsl(0 0% 65%);
-  --cru-disabled-3-color: hsl(0 0% 60%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --cru-primary-color: hsl(210 100% 50%);
-    --cru-primary-l1-color: hsl(210 100% 55%);
-    --cru-primary-l2-color: hsl(210 100% 60%);
-    --cru-primary-l3-color: hsl(210 100% 65%);
-    --cru-primary-d1-color: hsl(210 100% 45%);
-    --cru-primary-d2-color: hsl(210 100% 40%);
-    --cru-primary-d3-color: hsl(210 100% 35%);
-    --cru-primary-f1-color: hsl(210 100% 45%);
-    --cru-primary-f2-color: hsl(210 100% 40%);
-    --cru-primary-f3-color: hsl(210 100% 35%);
-    --cru-primary-b1-color: hsl(210 100% 55%);
-    --cru-primary-b2-color: hsl(210 100% 60%);
-    --cru-primary-b3-color: hsl(210 100% 65%);
-    --cru-secondary-color: hsl(40 100% 50%);
-    --cru-secondary-l1-color: hsl(40 100% 55%);
-    --cru-secondary-l2-color: hsl(40 100% 60%);
-    --cru-secondary-l3-color: hsl(40 100% 65%);
-    --cru-secondary-d1-color: hsl(40 100% 45%);
-    --cru-secondary-d2-color: hsl(40 100% 40%);
-    --cru-secondary-d3-color: hsl(40 100% 35%);
-    --cru-secondary-f1-color: hsl(40 100% 45%);
-    --cru-secondary-f2-color: hsl(40 100% 40%);
-    --cru-secondary-f3-color: hsl(40 100% 35%);
-    --cru-secondary-b1-color: hsl(40 100% 55%);
-    --cru-secondary-b2-color: hsl(40 100% 60%);
-    --cru-secondary-b3-color: hsl(40 100% 65%);
-    --cru-tertiary-color: hsl(160 100% 50%);
-    --cru-tertiary-l1-color: hsl(160 100% 55%);
-    --cru-tertiary-l2-color: hsl(160 100% 60%);
-    --cru-tertiary-l3-color: hsl(160 100% 65%);
-    --cru-tertiary-d1-color: hsl(160 100% 45%);
-    --cru-tertiary-d2-color: hsl(160 100% 40%);
-    --cru-tertiary-d3-color: hsl(160 100% 35%);
-    --cru-tertiary-f1-color: hsl(160 100% 45%);
-    --cru-tertiary-f2-color: hsl(160 100% 40%);
-    --cru-tertiary-f3-color: hsl(160 100% 35%);
-    --cru-tertiary-b1-color: hsl(160 100% 55%);
-    --cru-tertiary-b2-color: hsl(160 100% 60%);
-    --cru-tertiary-b3-color: hsl(160 100% 65%);
-    --cru-danger-color: hsl(0 100% 50%);
-    --cru-danger-l1-color: hsl(0 100% 55%);
-    --cru-danger-l2-color: hsl(0 100% 60%);
-    --cru-danger-l3-color: hsl(0 100% 65%);
-    --cru-danger-d1-color: hsl(0 100% 45%);
-    --cru-danger-d2-color: hsl(0 100% 40%);
-    --cru-danger-d3-color: hsl(0 100% 35%);
-    --cru-danger-f1-color: hsl(0 100% 45%);
-    --cru-danger-f2-color: hsl(0 100% 40%);
-    --cru-danger-f3-color: hsl(0 100% 35%);
-    --cru-danger-b1-color: hsl(0 100% 55%);
-    --cru-danger-b2-color: hsl(0 100% 60%);
-    --cru-danger-b3-color: hsl(0 100% 65%);
-    --cru-success-color: hsl(120 60% 50%);
-    --cru-success-l1-color: hsl(120 60% 55%);
-    --cru-success-l2-color: hsl(120 60% 60%);
-    --cru-success-l3-color: hsl(120 60% 65%);
-    --cru-success-d1-color: hsl(120 60% 45%);
-    --cru-success-d2-color: hsl(120 60% 40%);
-    --cru-success-d3-color: hsl(120 60% 35%);
-    --cru-success-f1-color: hsl(120 60% 45%);
-    --cru-success-f2-color: hsl(120 60% 40%);
-    --cru-success-f3-color: hsl(120 60% 35%);
-    --cru-success-b1-color: hsl(120 60% 55%);
-    --cru-success-b2-color: hsl(120 60% 60%);
-    --cru-success-b3-color: hsl(120 60% 65%);
-    --cru-text-color: hsl(0 0% 100%);
-    --cru-text-1-color: hsl(0 0% 95%);
-    --cru-text-2-color: hsl(0 0% 90%);
-    --cru-text-3-color: hsl(0 0% 85%);
-    --cru-bg-color: hsl(0 0% 0%);
-    --cru-bg-1-color: hsl(0 0% 5%);
-    --cru-bg-2-color: hsl(0 0% 10%);
-    --cru-bg-3-color: hsl(0 0% 15%);
-    --cru-light-color: hsl(0 0% 100%);
-    --cru-light-1-color: hsl(0 0% 95%);
-    --cru-light-2-color: hsl(0 0% 90%);
-    --cru-light-3-color: hsl(0 0% 85%);
-    --cru-dark-color: hsl(0 0% 0%);
-    --cru-dark-1-color: hsl(0 0% 5%);
-    --cru-dark-2-color: hsl(0 0% 10%);
-    --cru-dark-3-color: hsl(0 0% 15%);
-    --cru-disabled-color: hsl(0 0% 25%);
-    --cru-disabled-1-color: hsl(0 0% 30%);
-    --cru-disabled-2-color: hsl(0 0% 35%);
-    --cru-disabled-3-color: hsl(0 0% 40%);
-  }
-}
-
-.cru-primary {
-  --cru-theme-color: var(--cru-primary-color);
-  --cru-theme-l1-color: var(--cru-primary-l1-color);
-  --cru-theme-l2-color: var(--cru-primary-l2-color);
-  --cru-theme-l3-color: var(--cru-primary-l3-color);
-  --cru-theme-d1-color: var(--cru-primary-d1-color);
-  --cru-theme-d2-color: var(--cru-primary-d2-color);
-  --cru-theme-d3-color: var(--cru-primary-d3-color);
-  --cru-theme-f1-color: var(--cru-primary-f1-color);
-  --cru-theme-f2-color: var(--cru-primary-f2-color);
-  --cru-theme-f3-color: var(--cru-primary-f3-color);
-  --cru-theme-b1-color: var(--cru-primary-b1-color);
-  --cru-theme-b2-color: var(--cru-primary-b2-color);
-  --cru-theme-b3-color: var(--cru-primary-b3-color);
-}
-
-.cru-secondary {
-  --cru-theme-color: var(--cru-secondary-color);
-  --cru-theme-l1-color: var(--cru-secondary-l1-color);
-  --cru-theme-l2-color: var(--cru-secondary-l2-color);
-  --cru-theme-l3-color: var(--cru-secondary-l3-color);
-  --cru-theme-d1-color: var(--cru-secondary-d1-color);
-  --cru-theme-d2-color: var(--cru-secondary-d2-color);
-  --cru-theme-d3-color: var(--cru-secondary-d3-color);
-  --cru-theme-f1-color: var(--cru-secondary-f1-color);
-  --cru-theme-f2-color: var(--cru-secondary-f2-color);
-  --cru-theme-f3-color: var(--cru-secondary-f3-color);
-  --cru-theme-b1-color: var(--cru-secondary-b1-color);
-  --cru-theme-b2-color: var(--cru-secondary-b2-color);
-  --cru-theme-b3-color: var(--cru-secondary-b3-color);
-}
-
-.cru-tertiary {
-  --cru-theme-color: var(--cru-tertiary-color);
-  --cru-theme-l1-color: var(--cru-tertiary-l1-color);
-  --cru-theme-l2-color: var(--cru-tertiary-l2-color);
-  --cru-theme-l3-color: var(--cru-tertiary-l3-color);
-  --cru-theme-d1-color: var(--cru-tertiary-d1-color);
-  --cru-theme-d2-color: var(--cru-tertiary-d2-color);
-  --cru-theme-d3-color: var(--cru-tertiary-d3-color);
-  --cru-theme-f1-color: var(--cru-tertiary-f1-color);
-  --cru-theme-f2-color: var(--cru-tertiary-f2-color);
-  --cru-theme-f3-color: var(--cru-tertiary-f3-color);
-  --cru-theme-b1-color: var(--cru-tertiary-b1-color);
-  --cru-theme-b2-color: var(--cru-tertiary-b2-color);
-  --cru-theme-b3-color: var(--cru-tertiary-b3-color);
-}
-
-.cru-danger {
-  --cru-theme-color: var(--cru-danger-color);
-  --cru-theme-l1-color: var(--cru-danger-l1-color);
-  --cru-theme-l2-color: var(--cru-danger-l2-color);
-  --cru-theme-l3-color: var(--cru-danger-l3-color);
-  --cru-theme-d1-color: var(--cru-danger-d1-color);
-  --cru-theme-d2-color: var(--cru-danger-d2-color);
-  --cru-theme-d3-color: var(--cru-danger-d3-color);
-  --cru-theme-f1-color: var(--cru-danger-f1-color);
-  --cru-theme-f2-color: var(--cru-danger-f2-color);
-  --cru-theme-f3-color: var(--cru-danger-f3-color);
-  --cru-theme-b1-color: var(--cru-danger-b1-color);
-  --cru-theme-b2-color: var(--cru-danger-b2-color);
-  --cru-theme-b3-color: var(--cru-danger-b3-color);
-}
-
-.cru-success {
-  --cru-theme-color: var(--cru-success-color);
-  --cru-theme-l1-color: var(--cru-success-l1-color);
-  --cru-theme-l2-color: var(--cru-success-l2-color);
-  --cru-theme-l3-color: var(--cru-success-l3-color);
-  --cru-theme-d1-color: var(--cru-success-d1-color);
-  --cru-theme-d2-color: var(--cru-success-d2-color);
-  --cru-theme-d3-color: var(--cru-success-d3-color);
-  --cru-theme-f1-color: var(--cru-success-f1-color);
-  --cru-theme-f2-color: var(--cru-success-f2-color);
-  --cru-theme-f3-color: var(--cru-success-f3-color);
-  --cru-theme-b1-color: var(--cru-success-b1-color);
-  --cru-theme-b2-color: var(--cru-success-b2-color);
-  --cru-theme-b3-color: var(--cru-success-b3-color);
-}
-
+  --cru-card-border-radius: 8px;
+}
\ No newline at end of file