substitute all scss variables with css replaceable ones

Holusion · Feb 22, 2024 · 2313b84 · 2313b84
1 parent 0e24699
commit 2313b84
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 130 deletions.
diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss
@@ -1,4 +1,4 @@
-@import "../../styles/variables.scss";
+
 
 :host(corpus-navbar) {
   position: fixed;
@@ -10,8 +10,8 @@
   align-items: baseline;
   justify-content: center;
 
-  background-color: $color-background-dark;
-  border-bottom: 3px solid $color-background-darker;
+  background-color: var(--color-background-dark);
+  border-bottom: 3px solid var(--color-background-darker);
 }
 
 nav {
@@ -33,8 +33,8 @@ nav {
     height: 100%;
     align-items: center;
     font-size: 1.1em;
-    color: $color-secondary;
-    font-family: $font-heading;
+    color: var(--color-secondary);
+    font-family: var(--font-heading);
     font-weight: 400;
     text-decoration: none;
   }
@@ -52,7 +52,7 @@ nav {
       box-sizing: border-box;
       background-color: transparent;
       font-size: 13px;
-      color: $color-light;
+      color: var(--color-light);
     }
     ::slotted(.btn){
       padding: 4px 10px !important;
@@ -81,13 +81,13 @@ nav {
 
     &:hover, &:focus{
       color: white;
-      background-color: $color-background-lighter;
+      background-color: var(--color-background-lighter);
     }
 
     &.selected {
-      background-color: $color-primary-light;
+      background-color: var(--color-primary-light);
       &:hover, &:focus {
-        background-color: lighten($color-primary-light, 10%);
+        background-color: var(--color-primary-lighter);
       }
     }
 

diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+
 
 
 button, input {
@@ -19,7 +19,7 @@ a{
 
 
 .btn {
-  background: $color-background-light;
+  background: var(--color-background-light);
   color: white;
 
   display: flex;
@@ -34,39 +34,39 @@ a{
 
 
   &:hover, &:focus{
-    background-color: $color-background-lighter;
+    background-color: var(--color-background-lighter);
   }
 
   &[selected] {
-    background-color: $color-primary;
+    background-color: var(--color-primary);
 
     &:hover, &:focus {
-      background-color: $color-primary-light;
+      background-color: var(--color-primary-light);
     }
   }
 
   &.btn-primary {
-    background-color: $color-primary;
+    background-color: var(--color-primary);
 
     &:hover:not([disabled]){
-      background-color: $color-primary-light;
+      background-color: var(--color-primary-light);
     }
   }
 
   &.btn-secondary {
-    background-color: $color-primary-light;
+    background-color: var(--color-primary-light);
 
     &:hover:not([disabled]){
-      background-color: $color-secondary;
+      background-color: var(--color-secondary);
     }
   }
 
   &.btn-danger {
-    background-color: $color-error;
+    background-color: var(--color-error);
     color: white;
 
     &:hover{
-      background-color: lighten($color-error, 7%);
+      filter: brightness(110%);
     }    
   }
 
@@ -100,9 +100,9 @@ a{
   }
   &[transparent]{
     background: transparent;
-    color: $color-light;
+    color: var(--color-light);
     &:hover{
-      color: $color-background-lighter;
+      color: var(--color-background-lighter);
     }
   }
 }
diff --git a/source/ui/styles/common.scss b/source/ui/styles/common.scss
@@ -1,4 +1,3 @@
-@import "./variables.scss";
 
 @import "./normalize.scss";
 
@@ -19,14 +18,14 @@
 }
 
 .text-info {
-  color: $color-info;
+  color: var(--color-info);
 }
 .text-success {
-  color: $color-success; 
+  color: var(--color-success); 
 }
 .text-warning{
-  color: $color-warning; 
+  color: var(--color-warning); 
 }
 .text-error {
-  color: $color-error; 
+  color: var(--color-error); 
 }
diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
@@ -1,4 +1,3 @@
-@import "./variables.scss";
 
 
 .form-control{
@@ -23,7 +22,7 @@
 
   .divider{
     width: 1px;
-    background-color: $color-light;
+    background-color: var(--color-light);
   }
   .form-item {
     position: relative;
@@ -37,15 +36,15 @@
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.5;
-      color: $color-light;
-      background: $color-background-dark;
+      color: var(--color-light);
+      background: var(--color-background-dark);
       background-clip: padding-box;
       border-radius: 0;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       &:invalid:not(:placeholder-shown):not(:focus){
-        outline: $color-error solid 1px;
+        outline: var(--color-error) solid 1px;
       }
       &:has( + .btn-addon){
         //To have proper outline alignment
@@ -67,7 +66,7 @@
     .form-item {
 
       > input:not([type="submit"]){
-        border: 0px solid $color-background-darker;
+        border: 0px solid var(--color-background-darker);
         border-bottom-width: 3px;
         height: calc(3.5rem + 2px);
       }
@@ -85,7 +84,7 @@
       }
 
       > input:focus:not(:disabled){
-        color: $color-light;
+        color: var(--color-light);
         background: none;
         border-width: 1px 1px 3px 1px;
         outline: 0;
@@ -114,7 +113,7 @@
     }
 
     &[disabled] .form-item > input, .form-item > input:disabled {
-      background: $color-background-darker;
+      background: var(--color-background-darker);
       pointer-events: none;
     }
 
@@ -125,11 +124,11 @@
   }
 
   input[type="submit"] {
-    background: $color-background-light;
+    background: var(--color-background-light);
     color: white;
     cursor: pointer;
     &:hover:not(:disabled){
-      background: $color-primary-light;
+      background: var(--color-primary-light);
     }
   }
 
@@ -149,7 +148,7 @@
     background: none;
     border: none;
     color: inherit;
-    background: $color-background-dark;
+    background: var(--color-background-dark);
     cursor: pointer;
     option{
       -webkit-appearance: none;

diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
@@ -1,30 +1,39 @@
-@import "./variables.scss";
 
 :root{
   --nav-height: 44px;
   --col-width: 1320px;
-  --color-primary: #{$color-primary};
-  --color-secondary: #{$color-secondary};
-
-  --color-dark: #{$color-dark};
-  --color-medium: #{$color-primary};
-  --color-hover: #{$color-primary-dark};
-  --color-light: #{$color-text};
-
-  --color-info: #{$color-info};
-  --color-success: #{$color-success};
-  --color-warning: #{$color-warning};
-  --color-error: #{$color-error};
-
-  --font-body: #{$font-body};
-  --font-heading: #{$font-heading};
-
-  --color-background: #{$color-background};
-  --color-background-dark: #{$color-background-dark};
-  --color-background-darker: #{$color-background-darker};
-  --color-background-light: #{$color-background-light};
-  --color-background-lighter: #{$color-background-lighter};
-  --color-background-hover: #{$color-background-hover};
+  --color-primary: #00517d;
+  --color-secondary: #E6B900;
+
+
+
+  --color-primary-light: #0089bf;
+  --color-primary-lighter: #00acf0;
+
+  --color-primary-dark: #00324d;
+
+
+
+  --color-light: #eee;
+  --color-dark: #071922;
+
+  --color-medium: var(--color-primary);
+  --color-hover: var(--color-primary-dark);
+
+  --color-info: #73adff;
+  --color-success: #8ae65c;
+  --color-warning: #e6a345;
+  --color-error: #e64545;
+
+  --font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif';
+  --font-heading: 'Noto Serif', 'serif';
+
+  --color-background: #343434;
+  --color-background-dark: #272727;
+  --color-background-darker: #1b1b1b;
+  --color-background-light: #4e4e4e;
+  --color-background-lighter: #5e5e5e;
+  --color-background-hover: var(--color-background-lighter);
 }
 
 
@@ -35,7 +44,7 @@
 }
 
 body{
-  background: $color-background;
+  background: var(--color-background);
   position: relative;
   min-height: 100vh;
   width: 100%;