From 6fd6093f69558d4b8f9aee5f21b9f570c01bc697 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

rework style variables to allow better customization
---
 source/server/templates/layouts/main.hbs | 10 ++-
 source/ui/composants/ListItem.ts         |  2 +-
 source/ui/composants/Modal.ts            |  4 +-
 source/ui/composants/SceneCard.ts        |  4 +-
 source/ui/composants/navbar/styles.scss  | 18 ++---
 source/ui/screens/LandingPage.ts         |  2 +-
 source/ui/styles/buttons.scss            | 26 ++++----
 source/ui/styles/common.scss             |  9 ++-
 source/ui/styles/forms.scss              | 21 +++---
 source/ui/styles/globals.scss            | 84 +++++++++++-------------
 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 -----------
 16 files changed, 120 insertions(+), 158 deletions(-)
 delete mode 100644 source/ui/styles/variables.scss

diff --git a/source/server/templates/layouts/main.hbs b/source/server/templates/layouts/main.hbs
index 3b2f55d2..58940963 100644
--- a/source/server/templates/layouts/main.hbs
+++ b/source/server/templates/layouts/main.hbs
@@ -20,7 +20,15 @@
     <link rel="shortcut icon" type="image/svg+xml" href="/dist/favicon.svg"/>
 
     <style>
-      body { background: #343434; }
+      body{
+        background: var(--color-background, #343434);
+        position: relative;
+        min-height: 100vh;
+        width: 100%;
+        padding: var(--nav-height, 44px) 0 0 0;
+        margin: 0;
+        display: block;
+      }
     </style>
 
     <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
diff --git a/source/ui/composants/ListItem.ts b/source/ui/composants/ListItem.ts
index d2e74de2..6f8f0fb6 100644
--- a/source/ui/composants/ListItem.ts
+++ b/source/ui/composants/ListItem.ts
@@ -51,7 +51,7 @@ export default class ListItem extends LitElement{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: var(--color-background-darker);
+      background: var(--color-element);
       padding: 1rem;
       border-bottom: 1px solid var(--color-dark);
     }
diff --git a/source/ui/composants/Modal.ts b/source/ui/composants/Modal.ts
index bd2db292..619c59e7 100644
--- a/source/ui/composants/Modal.ts
+++ b/source/ui/composants/Modal.ts
@@ -102,7 +102,7 @@ interface ModalOptions{
       top: max(100px, 15vh);
       min-width: 30vw;
       max-width: calc(100vw - 20px);
-      border: 1px solid var(--color-background-darker);
+      border: 1px solid var(--color-element);
       border-radius: 5px;
       background-color: var(--color-background);
       color: var(--color-light);
@@ -111,7 +111,7 @@ interface ModalOptions{
 
     .btn{
       color: white;
-      background: var(--color-background-darker);
+      background: var(--color-element);
       transition: background 0.2s;
     }
     .btn:hover{
diff --git a/source/ui/composants/SceneCard.ts b/source/ui/composants/SceneCard.ts
index a18a4b25..6bae048b 100644
--- a/source/ui/composants/SceneCard.ts
+++ b/source/ui/composants/SceneCard.ts
@@ -93,7 +93,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
       }
 
       .scene-card-inner{
-        background-color: var(--color-background-darker);
+        background-color: var(--color-element);
         box-sizing: border-box;
         padding: 1rem;
         width: 100%;
@@ -105,7 +105,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
 
       .scene-card-inner:hover{
         background-color: var(--color-background);
-        border-color: var(--color-background-light);
+        border-color: var(--color-highlight);
       }
 
       @media (min-width: 664px){
diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss
index 9e826ebe..7b513703 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-section);
+  border-bottom: 3px solid var(--color-element);
 }
 
 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;
     img{
@@ -58,7 +58,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;
@@ -87,13 +87,13 @@ nav {
 
     &:hover, &:focus{
       color: white;
-      background-color: $color-background-lighter;
+      background-color: var(--color-highlight2);
     }
   
     &.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/screens/LandingPage.ts b/source/ui/screens/LandingPage.ts
index 0403526f..5b8c6471 100644
--- a/source/ui/screens/LandingPage.ts
+++ b/source/ui/screens/LandingPage.ts
@@ -50,7 +50,7 @@ import "../composants/UserLogin"
         flex: 1 1 auto;
     }
     .user-login {
-        border: 1px solid var(--color-background-darker);
+        border: 1px solid var(--color-element);
         box-shadow: 0 0 5px 0 #00000088;
         border-radius: 5px;
         width: 33%;
diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
index 15499414..4ff74cac 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-highlight);
   color: white;
 
   display: flex;
@@ -34,39 +34,39 @@ a{
 
 
   &:hover, &:focus{
-    background-color: $color-background-lighter;
+    background-color: var(--color-highlight2);
   }
 
   &[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-highlight2);
     }
   }
 }
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..d10ac6ae 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-section);
       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-element);
         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-element);
       pointer-events: none;
     }
 
@@ -125,11 +124,11 @@
   }
   
   input[type="submit"] {
-    background: $color-background-light;
+    background: var(--color-highlight);
     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-section);
     cursor: pointer;
     option{
       -webkit-appearance: none;
diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
index b3912651..71007aaa 100644
--- a/source/ui/styles/globals.scss
+++ b/source/ui/styles/globals.scss
@@ -1,50 +1,44 @@
-@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};
-}
-
-
-
-
-*, ::before, ::after {
-  box-sizing: border-box;
-}
-
-body{
-  background: $color-background;
-  position: relative;
-  min-height: 100vh;
-  width: 100%;
-  padding: var(--nav-height) 0 0 0;
-  margin: 0;
-  display: block;
-  font-family: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "sans-serif";
-}
-
-h1{
-  font-family: "Charcoal", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans-serif";
+  --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';
+
+  /* Main (body) background color */
+  --color-background: #343434;
+
+  /* Background color for "section" elements.
+    (large page chunks that may contain some number of items).
+    designed to stand out over --color-background 
+  */
+  --color-section: #272727;
+
+  /* Background color for "block elements", like  cards, navbars, modals... */
+  --color-element: #1b1b1b;
+
+  /* Main Color for elements designed to stand out in a section, like action buttons */
+  --color-highlight: #4e4e4e;
+  
+  /* Additional highlight color, primarily for hover effects */
+  --color-highlight2: #5e5e5e;
 }
\ No newline at end of file
diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
index 792980e1..3d5b1db4 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-section);
   border-radius: 4px;
-  border: $color-background-dark 1px solid;
+  border: var(--color-section) 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-element);
       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-section);
     }
     &: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-section);
   display:flex;
 }
 
@@ -168,8 +168,8 @@ footer{
   position: relative;
   left: 0;
   margin: 8px;
-  background: $color-background-light;
-  color: $color-light;
+  background: var(--color-highlight);
+  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';