From 2313b846d9552c24a03d68f4fb816fb4262651bb Mon Sep 17 00:00:00 2001
From: Sebastien DUMETZ <s.dumetz@holusion.com>
Date: Thu, 22 Feb 2024 17:40:51 +0100
Subject: [PATCH] substitute all scss variables with css replaceable ones

---
 source/ui/composants/navbar/styles.scss | 18 ++++----
 source/ui/styles/buttons.scss           | 26 +++++------
 source/ui/styles/common.scss            |  9 ++--
 source/ui/styles/forms.scss             | 21 +++++----
 source/ui/styles/globals.scss           | 57 ++++++++++++++-----------
 source/ui/styles/layout.scss            | 42 +++++++++---------
 source/ui/styles/main.scss              |  1 -
 source/ui/styles/notifications.scss     |  2 +-
 source/ui/styles/tables.scss            | 10 ++---
 source/ui/styles/titles.scss            |  6 +--
 source/ui/styles/variables.scss         | 37 ----------------
 11 files changed, 99 insertions(+), 130 deletions(-)
 delete mode 100644 source/ui/styles/variables.scss

diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss
index 8cd6b930..7d83868a 100644
--- 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
index 15499414..0a8f0a53 100644
--- 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
index 0496e5e9..c22d1485 100644
--- 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); 
 }
\ No newline at end of file
diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
index 78713d78..797098d5 100644
--- 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
index b3912651..99f3a9bb 100644
--- 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%;
diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
index 792980e1..3db5ad14 100644
--- a/source/ui/styles/layout.scss
+++ b/source/ui/styles/layout.scss
@@ -1,8 +1,7 @@
-@import "./variables.scss";
 
 
 html {
-  color: $color-text;
+  color: var(--color-text);
 }
 
 
@@ -11,20 +10,20 @@ main{
   max-width: var(--col-width);
   margin: auto;
 
-  color: $color-light;
+  color: var(--color-light);
   min-height: calc(100vh - var(--nav-height) * 2);
   padding-top: .67em;
   
   h1{
-    color: $color-primary-light;
+    color: var(--color-primary-light);
   }
 }
 
 
 .section{
-  background: $color-background-dark;
+  background: var(--color-background-dark);
   border-radius: 4px;
-  border: $color-background-dark 1px solid;
+  border: var(--color-background-dark) 1px solid;
   padding: 1rem;
   margin-bottom: 1rem;
   h3{
@@ -48,7 +47,7 @@ corpus-list, home-page {
     right: 0;
     z-index: 2;
     background: rgba(0, 0, 0, 0.3);
-    border: 2px dotted $color-secondary;
+    border: 2px dotted var(--color-secondary);
     border-radius: 4px;
     pointer-events: none;
   }
@@ -124,7 +123,7 @@ scene-card{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: $color-background-darker;
+      background: var(--color-background-darker);
       padding: 1rem;
       border-color: transparent;
       border-width: 1px 0 1px 0;
@@ -134,16 +133,17 @@ scene-card{
     font-size: 1.2rem;
     font-weight: bold;
     padding: 1.2rem 1rem 0.8rem 1rem;
-    border-bottom: 2px solid $color-dark;
+    border-bottom: 2px solid var(--color-dark);
   }
 
   .list-item{
     &:nth-child(2n){
-      background: $color-background-dark;
+      background: var(--color-background-dark);
     }
     &:hover{
-      background: transparentize($color-dark, 0.5);
-      border-color: $color-dark;
+      background: var(--color-dark);
+      filter: opacity(80%);
+      border-color: var(--color-dark);
     }
   }
 }
@@ -158,9 +158,9 @@ scene-card{
 }
 
 footer{
-  color: $color-light;
+  color: var(--color-light);
   height: 44px;
-  background-color: $color-background-dark;
+  background-color: var(--color-background-dark);
   display:flex;
 }
 
@@ -168,8 +168,8 @@ footer{
   position: relative;
   left: 0;
   margin: 8px;
-  background: $color-background-light;
-  color: $color-light;
+  background: var(--color-background-light);
+  color: var(--color-light);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
   display: flex;
   justify-content: stretch;
@@ -183,16 +183,16 @@ footer{
   }
 
   &.notification-info > .ui-icon {
-    fill: $color-info;
+    fill: var(--color-info);
   }
   &.notification-success > .ui-icon {
-    fill: $color-success; 
+    fill: var(--color-success); 
   }
   &.notification-warning > .ui-icon {
-    fill: $color-warning; 
+    fill: var(--color-warning); 
   }
   &.notification-error > .ui-icon {
-    fill: $color-error; 
+    fill: var(--color-error); 
   }
   
   .notification-message {
@@ -206,7 +206,7 @@ footer{
     flex: 0;
     padding: 4px 6px 6px 6px;
     font-weight: bolder;
-    color: $color-dark;
+    color: var(--color-dark);
     line-height: 1;
     font-size: 1.5em;
     cursor: pointer;
diff --git a/source/ui/styles/main.scss b/source/ui/styles/main.scss
index 12079209..6bd40c00 100644
--- a/source/ui/styles/main.scss
+++ b/source/ui/styles/main.scss
@@ -1,4 +1,3 @@
-@import "./variables.scss";
 
 @import "./normalize.scss";
 
diff --git a/source/ui/styles/notifications.scss b/source/ui/styles/notifications.scss
index 09a2930a..409fe679 100644
--- a/source/ui/styles/notifications.scss
+++ b/source/ui/styles/notifications.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+
 :host{
   position: fixed;
   z-index: 100;
diff --git a/source/ui/styles/tables.scss b/source/ui/styles/tables.scss
index 766e1acd..bc559a48 100644
--- a/source/ui/styles/tables.scss
+++ b/source/ui/styles/tables.scss
@@ -1,11 +1,11 @@
-@import "./variables.scss";
+
 
 table.list-table {
   border-collapse: collapse;
   width: 100%;
   display: table;
   background-color:#000a;
-  color: $color-light;
+  color: var(--color-light);
   tr:last-child {
     border-bottom: 0;
   }
@@ -21,14 +21,14 @@ table.list-table {
   }
 
   th {
-    color: $color-light;
+    color: var(--color-light);
     font-weight: bold;
-    background-color: $color-dark;
+    background-color: var(--color-dark);
     position: sticky;
     top: 0;
   }
   td {
-    border-bottom: solid 1px $color-dark;
+    border-bottom: solid 1px var(--color-dark);
     border-left: 0;
     border-right: 0;
     white-space: nowrap;
diff --git a/source/ui/styles/titles.scss b/source/ui/styles/titles.scss
index 88777257..ddffa06b 100644
--- a/source/ui/styles/titles.scss
+++ b/source/ui/styles/titles.scss
@@ -1,13 +1,13 @@
 
 
 h1, h2, h3{
-  font-family: $font-heading;
+  font-family: var(--font-heading);
 }
 
 h1{
-  color: $color-primary;
+  color: var(--color-primary);
 }
 
 h2{
-  color: $color-secondary;
+  color: var(--color-secondary);
 }
\ No newline at end of file
diff --git a/source/ui/styles/variables.scss b/source/ui/styles/variables.scss
deleted file mode 100644
index 41c26496..00000000
--- a/source/ui/styles/variables.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-
-$color-primary: #00517d; // blue
-$color-primary-light: #0089bf;
-$color-primary-dark: darken($color-primary, 8%);
-
-$color-secondary: #E6B900; // orange
-$color-secondary-light: lighten($color-secondary, 15%);
-$color-secondary-dark: darken($color-secondary, 15%);
-
-
-$color-info: #73adff;
-$color-success: #8ae65c;
-$color-warning: #e6a345;
-$color-error: #e64545;
-
-$color-text: #eee;
-$color-text-light: #eee;
-$color-text-disabled: #808080;
-$color-icon: #eee b4 0a0;
-$color-icon-disabled: #808080;
-
-$color-focus: $color-secondary-light;
- 
-$section-border: 1px solid transparentize($color-primary, 0.5);
-
-$color-light: #eee;
-$color-dark: #071922;
-
-$color-background: #343434;
-$color-background-dark: darken($color-background, 5%);
-$color-background-darker: darken($color-background, 10%);
-$color-background-light: lighten($color-background, 10%);
-$color-background-lighter: lighten($color-background, 20%);
-$color-background-hover: $color-background-lighter;
-
-$font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif';
-$font-heading: 'Noto Serif', 'serif';