refactor(react) - [#54] rename variables

SoluiNet · Aug 17, 2023 · c22c1e7 · c22c1e7
1 parent f9a4553
commit c22c1e7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/soluinet.ui.react/src/components/labeled-input.scss b/soluinet.ui.react/src/components/labeled-input.scss
@@ -1,7 +1,7 @@
 :root {
-  --lbl-input-active-color: var(--sn-ui-highlight-primary-color);
-  --lbl-input-back-color: var(--sn-ui-back-primary-color);
-  --lbl-input-front-color: var(--sn-ui-front-primary-color);
+  --sn-ui-lbl-input-active-color: var(--sn-ui-highlight-primary-color);
+  --sn-ui-lbl-input-back-color: var(--sn-ui-back-primary-color);
+  --sn-ui-lbl-input-front-color: var(--sn-ui-front-primary-color);
 }
 
 .sn-labeled-input {
@@ -36,7 +36,7 @@
     border: 2px solid #888;
     border-radius: 8px;
     background: transparent;
-    color: var(--lbl-input-front-color);
+    color: var(--sn-ui-lbl-input-front-color);
   }
 
   & > [type="date"]:not(input:focus, .has-value[type="date"]) {
@@ -46,14 +46,14 @@
   }
 
   & > :is(input:focus, .has-value) {
-    border-color: var(--lbl-input-active-color);
+    border-color: var(--sn-ui-lbl-input-active-color);
 
     & ~ span {
       color: rgb(0 0 0 / 50%);
     }
 
     & ~ label {
-      background: var(--lbl-input-back-color);
+      background: var(--sn-ui-lbl-input-back-color);
       color: rgb(0 0 0 / 85%);
       translate: 0 -46px;
     }

diff --git a/soluinet.ui.react/src/components/menu.scss b/soluinet.ui.react/src/components/menu.scss
@@ -1,19 +1,19 @@
 :root {
-  --menu-back-color: transparent;
-  --menu-content-back-color: var(--sn-ui-back-secondary-color);
-  --menu-content-button-back-color-first: var(--sn-ui-highlight-primary-color);
-  --menu-content-button-back-color-second: var(--sn-ui-highlight-secondary-color);
-  --menu-content-button-front-color: var(--sn-ui-highlight-front-color);
-  --menu-content-heading-front-color: var(--sn-ui-front-tertiary-color);
-  --menu-content-shadow-color: var(--sn-ui-back-tertiary-color);
-  --menu-front-color: var(--sn-ui-front-secondary-color);
-  --menu-overlay-back-color: var(--sn-ui-back-secondary-color);
+  --sn-ui-menu-back-color: transparent;
+  --sn-ui-menu-content-back-color: var(--sn-ui-back-secondary-color);
+  --sn-ui-menu-content-button-back-color-first: var(--sn-ui-highlight-primary-color);
+  --sn-ui-menu-content-button-back-color-second: var(--sn-ui-highlight-secondary-color);
+  --sn-ui-menu-content-button-front-color: var(--sn-ui-highlight-front-color);
+  --sn-ui-menu-content-heading-front-color: var(--sn-ui-front-tertiary-color);
+  --sn-ui-menu-content-shadow-color: var(--sn-ui-back-tertiary-color);
+  --sn-ui-menu-front-color: var(--sn-ui-front-secondary-color);
+  --sn-ui-menu-overlay-back-color: var(--sn-ui-back-secondary-color);
 }
 
 .sn-menu {
   aside {
-    background: var(--menu-content-back-color);
-    box-shadow: 0 0 20px var(--menu-content-shadow-color);
+    background: var(--sn-ui-menu-content-back-color);
+    box-shadow: 0 0 20px var(--sn-ui-menu-content-shadow-color);
     height: 100%;
     padding: 20px;
     position: fixed;
@@ -31,28 +31,28 @@
     }
 
     button {
-      background: linear-gradient(-60deg, var(--menu-content-button-back-color-first), var(--menu-content-button-back-color-second));
+      background: linear-gradient(-60deg, var(--sn-ui-menu-content-button-back-color-first), var(--sn-ui-menu-content-button-back-color-second));
       border: 0;
       border-radius: 30px;
-      color: var(--menu-content-button-front-color);
+      color: var(--sn-ui-menu-content-button-front-color);
       font-family: inherit;
       font-size: 16px;
       height: 60px;
       margin-top: 20px;
     }
 
     h3 {
-      color: var(--menu-content-heading-front-color);
+      color: var(--sn-ui-menu-content-heading-front-color);
       font-size: 16px;
       font-weight: 400;
       margin: 40px 0 10px;
     }
   }
 
   .burger {
-    background: var(--menu-back-color);
+    background: var(--sn-ui-menu-back-color);
     border: 0;
-    color: var(--menu-front-color);
+    color: var(--sn-ui-menu-front-color);
     cursor: pointer;
     display: grid;
     font-size: 30px;
@@ -93,7 +93,7 @@
 
   .overlay {
     backdrop-filter: blur(6px);
-    background: var(--menu-overlay-back-color);
+    background: var(--sn-ui-menu-overlay-back-color);
     bottom: 0;
     left: 0;
     opacity: 0;

diff --git a/soluinet.ui.react/src/root.scss b/soluinet.ui.react/src/root.scss
@@ -9,6 +9,10 @@
     --sn-ui-highlight-secondary-color: turquoise;
     --sn-ui-highlight-tertiary-color: darkblue;
     --sn-ui-highlight-front-color: #fff;
+    --sn-ui-brand-primary-color: #38f9d7;
+    --sn-ui-brand-secondary-color: #43e97b;
+    --sn-ui-brand-front-primary-color: #00050d;
+    --sn-ui-brand-front-secondary-color: #fff;
 }
 
 .dark-mode {