From 2b60954fe4f985934bd95be20be1b7acf9e1dcba Mon Sep 17 00:00:00 2001
From: rekt-hard <72449192+rekt-hard@users.noreply.github.com>
Date: Mon, 1 Mar 2021 18:33:47 +0100
Subject: [PATCH] modification: add theming variables (#152)

---
 .../scss/invenio_theme_tugraz/variables.scss  |  1 -
 .../less/invenio_theme_tugraz/accounts.less   | 46 ++++++++--------
 .../less/invenio_theme_tugraz/footer.less     | 10 ++--
 .../less/invenio_theme_tugraz/frontpage.less  |  6 +--
 .../less/invenio_theme_tugraz/header.less     | 42 +++++++--------
 .../less/invenio_theme_tugraz/login.less      |  8 +--
 .../less/invenio_theme_tugraz/macros.less     |  2 +-
 .../less/invenio_theme_tugraz/overrides.less  | 44 ++++++++++++---
 .../less/invenio_theme_tugraz/record.less     |  7 +--
 .../less/invenio_theme_tugraz/search.less     | 19 +------
 .../less/invenio_theme_tugraz/variables.less  | 53 +++++++++++++++++--
 .../templates/invenio_theme_tugraz/index.html |  1 +
 .../record_landing_page.html                  |  2 +-
 13 files changed, 147 insertions(+), 94 deletions(-)

diff --git a/invenio_theme_tugraz/assets/scss/invenio_theme_tugraz/variables.scss b/invenio_theme_tugraz/assets/scss/invenio_theme_tugraz/variables.scss
index 3d6faef..8d13d62 100644
--- a/invenio_theme_tugraz/assets/scss/invenio_theme_tugraz/variables.scss
+++ b/invenio_theme_tugraz/assets/scss/invenio_theme_tugraz/variables.scss
@@ -8,4 +8,3 @@
 
  $navbar_background_image: unset;
  $navbar_background_color: #ffffff;
-
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less
index 78c0cff..3674c89 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/accounts.less
@@ -13,68 +13,68 @@
 
 #login-tug-logo {
   & g {
-    fill: #e4154b;
+    fill: @tugrazRed;
   }
 }
 
 #login-tug-logo:hover {
   & g {
-    fill: #231f20;
+    fill: @tugrazBlack;
   }
 }
 
 .accounts-link {
   margin: 5%;
-  color: #fff;
-  border: 1px solid #fff;
+  color: @primaryLink;
+  border: 1px solid @primaryLink;
   background-color: transparent;
 }
 
 .accounts-link :hover {
   font-size: smaller !important;
-  color: white;
-  background-color: #000000 !important;
+  color: @primaryLink;
+  background-color: @primaryLinkHoverBackground !important;
 }
 
 .tu-button-style button {
   cursor: pointer;
-  border: 1px solid #fff;
+  border: 1px solid @primaryButton;
   background-color: transparent;
   height: 29px;
-  color: #fff;
+  color: @primaryButton;
   font-family: "Source Sans Pro";
   font-weight: 300;
   font-size: 16px;
 }
 .tu-button-style button:hover {
   cursor: pointer;
-  color: white;
-  background-color: #000000 !important;
+  color: @primaryButton;
+  background-color: @primaryButtonHoverBackground !important;
 }
 
 .form-accounts {
   margin: 15%;
   text-align: left !important;
   & i {
-    color: #fff !important;
+    color: @primaryFormAccounts !important;
   }
   & label {
     display: flex !important;
     font-weight: 300 !important;
-    color: white !important;
+    color: @primaryFormAccounts !important;
   }
   & input {
     border: 0px none !important;
     padding: 0px !important;
-    border-bottom: 1px solid white !important;
+    border-bottom: 1px solid @primaryFormAccounts !important;
     background-color: transparent !important;
-    color: white !important;
+    color: @primaryFormAccounts !important;
     border-radius: 0 !important;
     width: 100% !important;
   }
   & input::placeholder {
     opacity: 1 !important;
-    color: silver !important;
+    color: @formAccountsInputPlaceholder !important;
   }
   & th {
     display: block;
@@ -85,7 +85,7 @@
 }
 
 .field > input::selection {
-  background: #50a2ce;
+  background: @fieldInputSelectionBackground;
 }
 
 .accounts-header {
@@ -96,7 +96,7 @@
 login and sign-up pages form background color
 */
 .sign-form {
-  background-color: #245b78 !important;
+  background-color: @signInBackground !important;
   padding: 0 !important;
   height: 100%;
 }
@@ -104,10 +104,10 @@ login and sign-up pages form background color
 .tug-button-login {
   display: flex;
   align-items: center;
-  fill: #e4154b;
+  fill: @tugrazRed;
 }
 .tug-button-login :hover {
-  fill: #000000;
+  fill: @primaryButtonHoverBackground;
 }
 .login-page-button {
   margin: 5%;
@@ -118,20 +118,20 @@ login and sign-up pages form background color
     cursor: pointer;
   }
   & a:hover {
-    background-color: #000;
-    color: #fff !important;
+    background-color: @primaryLinkHoverBackground;
+    color: @primaryLink !important;
     text-decoration: none;
   }
 }
 
 .login-page-button-white {
-  color: #fff !important;
+  color: @primaryButton !important;
   font-family: "Source Sans Pro";
   font-size: initial;
 }
 
 .login-page-button-black {
-  color: #000 !important;
+  color: @primaryButtonInverted !important;
   font-family: "Source Sans Pro";
   font-size: initial;
 }
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less
index 953f178..cc6f4ae 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less
@@ -7,7 +7,7 @@
  */
 
  #footer {
-    color: #5E5E5E;
+    color: @footerGrey;
 
     /*background-image: url("/static/images/footer.jpg");*/
     -webkit-background-size: 100% 100%;
@@ -22,18 +22,18 @@
     background-attachment: fixed;
 
     &.footer-bottom {
-      background-color: #f2f2f2;
+      background-color: @footerBottomBackground;
       padding-top: 15px;
       padding-bottom: 15px;
       font-size: 16px;
  
       a {
         text-decoration: none;
-        color: #5E5E5E;
+        color: @footerGrey;
  
         &:hover, &:focus {
-          color: #ffffff;
-          background-color: #000000;
+          color: @primaryLink;
+          background-color: @primaryLinkHoverBackground;
         }
       }
     }
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/frontpage.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/frontpage.less
index 17afd38..b504117 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/frontpage.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/frontpage.less
@@ -22,12 +22,12 @@ h2 {
 }
 
 .record-version {
-  color: #777777;
-  background-color: #f2f2f2 !important;
+  color: @greyDark;
+  background-color: @recordVersionBackground !important;
 }
 
 .random-records-frontpage article {
-  border-bottom: 1px solid rgba(34,36,38,.15);
+  border-bottom: 1px solid @randomRecordsFrontpageArticle;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
 }
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less
index 0b1f086..6fd013a 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less
@@ -10,7 +10,7 @@
   width: 18px;
   height: 18px;
   vertical-align: top;
-  fill: #e4154b;
+  fill: @tugrazRed;
 }
 
 /*****logo section******/
@@ -18,18 +18,18 @@
   vertical-align: middle;
   white-space: nowrap;
   & a {
-    fill: #e4154b;
+    fill: @tugrazRed;
   }
 }
 
 .affiliation-logo :hover {
   text-decoration: none;
-  fill: #000000;
-  color: #000000;
+  fill: @primaryLinkHoverBackground;
+  color: @primaryLinkHoverBackground;
 }
 
 .affiliation {
-  background-color: white;
+  background-color: @primaryLink;
   display: table;
   margin: 0 auto 80px;
   max-width: 1060px;
@@ -78,12 +78,12 @@ a {
 .short-menu-right {
   display: table-cell;
   width: 50%;
-  color: #000000;
+  color: @primaryLinkInverted;
 }
 
 .short-menu-right :hover {
-  background-color: #000000;
-  color: #ffffff;
+  background-color: @primaryLinkHoverBackground;
+  color: @primaryLink;
 }
 
 .short-menu-right-button {
@@ -104,15 +104,15 @@ a {
   & a {
     padding: 5px;
     background-color: transparent;
-    color: #000;
+    color: @primaryLinkInverted;
     text-decoration: none;
   }
 }
 
 .short-menu-left-lang:hover {
   & a {
-    background-color: #000;
-    color: #fff;
+    background-color: @primaryLinkHoverBackground;
+    color: @primaryLink;
     text-decoration: none;
   }
 }
@@ -126,7 +126,7 @@ a {
     & svg {
       & g {
         stroke-linejoin: round;
-        stroke: #000;
+        stroke: @primaryLinkInverted;
         stroke-miterlimit: 10;
         stroke-width: 2;
         fill: none;
@@ -137,11 +137,11 @@ a {
 
 .search-icon-header:hover {
   & a {
-    background-color: #000;
+    background-color: @primaryLinkHoverBackground;
     text-decoration: none;
     & svg {
       & g {
-        stroke: #fff;
+        stroke: @primaryLink;
       }
     }
   }
@@ -150,7 +150,7 @@ a {
 .short-menu-left-search {
   display: inline-block;
   margin: 12px 9px 6px 0;
-  color: #000000;
+  color: @primaryLinkInverted;
 }
 
 .short-menu-right-main-menu {
@@ -181,8 +181,8 @@ svg:not(:root) {
 }
 
 .main-menu-entry a:hover {
-  background-color: #000;
-  color: #fff;
+  background-color: @primaryLinkHoverBackground;
+  color: @primaryLink;
   text-decoration: none;
 }
 
@@ -191,7 +191,7 @@ svg:not(:root) {
 }
 
 .main-menu-underline-line {
-  border: 2px solid #e0e1e2 !important;
+  border: 2px solid @greyLight !important;
   border-radius: 0;
 }
 
@@ -200,13 +200,13 @@ svg:not(:root) {
 }
 
 .affiliation-text a:hover {
-  background-color: #000000;
-  color: #ffffff;
+  background-color: @primaryLinkHoverBackground;
+  color: @primaryLink;
   text-decoration: none;
 }
 
 .main-menu {
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid @primaryLinkInverted;
   box-sizing: border-box;
   height: 39px;
   margin-top: -1px;
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/login.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/login.less
index 8edf8f2..6bf95aa 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/login.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/login.less
@@ -1,5 +1,5 @@
 .ui.inverted.header{
-    color:#000;
+    color: @primaryLinkInverted;
 }
 
 .login-page-button {
@@ -10,14 +10,14 @@
       cursor: pointer;
     }
     & a:hover {
-      background-color: #000;
-      color: #fff !important;
+      background-color: @primaryLinkHoverBackground;
+      color: @primaryLink !important;
       text-decoration: none;
     }
   }
 
 .text-color{
-    color: #000;
+    color: @primaryLinkInverted;
 }
 
 @media (max-width: 767px) {
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/macros.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/macros.less
index dc7072e..7a27f5c 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/macros.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/macros.less
@@ -14,5 +14,5 @@
 }
 
 .text-muted {
-    color: #777;
+    color: @greyDark;
 }
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less
index 9f5a867..e55a110 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less
@@ -12,7 +12,7 @@
  * to #ffffff
  ***/
 .section-content-light-bg {
-  background-color: #ffffff;
+  background-color: @primaryBackground;
 }
 
 /***
@@ -21,7 +21,7 @@
  * to #000000
  ***/
 .section-title {
-  color: #000000;
+  color: @primaryText;
 }
 
 
@@ -32,7 +32,7 @@
  ***/
 .cover-page {
   //text-align: center;
-  background-color: #ffffff;
+  background-color: @primaryBackground;
 }
 
 
@@ -42,7 +42,7 @@
  * To #000000
  ***/
 .panel-free-title {
-  color: #000000;
+  color: @primaryText;
 }
 
 
@@ -75,16 +75,16 @@ pre {
  ***/
 /*.ui.button,*/
 .ui.search.button {
-  background-color:#e4154b;
+  background-color: @tugrazRed;
 }
 
 .ui.button:hover,
 .ui.search.button:hover {
-  background-color:#000000;
+  background-color: @primaryButtonHoverBackground;
 }
 
 .ui.button:hover {
-  color:#fff;
+  color: @primaryButton;
 }
 
 /***
@@ -123,3 +123,33 @@ pre {
 .ui.label {
   font-weight: 400;
 }
+
+.ui.label.access-right {
+  float: right;
+  color: @accessRight;
+  background-color: white;
+
+  &.open {
+    color: @accessRightOpen;
+    background-color: white;
+
+  }
+
+  &.restricted {
+    color: @accessRightRestricted;
+    background-color: white;
+
+  }
+
+  &.embargoed {
+    color: @accessRightEmbargoed;
+    background-color: white;
+
+  }
+
+  &.closed {
+    color: @accessRightClosed;
+    background-color: white;
+
+  }
+}
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less
index c3d53ba..400f23e 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/record.less
@@ -5,11 +5,6 @@
  * it under the terms of the MIT License; see LICENSE file for more details.
  */
 
-.access-right {
-  color: #e9711c;
-  float: right;
-}
-
 .title .dropdown {
   display: none;
 }
@@ -21,6 +16,6 @@
 .label.label-keyword {
   font-size: 0.71428571rem;
   font-weight: 400;
-  background-color: #E8E8E8;
+  background-color: @labelKeywordBackground;
   border: unset;
 }
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
index 7bd3130..cf8026b 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/search.less
@@ -14,7 +14,7 @@
 }
 
 .creator:not(:last-child):after {
-  color: #777;
+  color: @greyDark;
   content: ';';
 }
 
@@ -26,20 +26,3 @@
 .identifiers {
   display: inline;
 }
-
-.ui.access-right {
-  color: #FFFFFF;
-
-  &.open {
-    color: @accessRightOpen;
-  }
-  &.restricted {
-    color: @accessRightRestricted;
-  }
-  &.embargoed {
-    color: @accessRightEmbargoed;
-  }
-  &.closed {
-    color: @accessRightClosed;
-  }
-}
diff --git a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
index 53eef00..5b746ac 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
+++ b/invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/variables.less
@@ -12,11 +12,56 @@
 ***/
 
 //@import "../invenio_app_rdm/variables.less";
-
 //@navbar_background_image: unset;
 //@navbar_background_color: #ffffff;
 
-@accessRightOpen: #e9711c;
+
+// badge colors, accessibility
+@accessRight          : #e9711c;
+@accessRightOpen      : #e9711c;
 @accessRightRestricted: #fbbd08;
-@accessRightEmbargoed: #db2828;
-@accessRightClosed: #db2828;
+@accessRightEmbargoed : #db2828;
+@accessRightClosed    : #db2828;
+
+// primary colors TU Graz
+@tugrazBlack: #231f20;
+@tugrazRed  : #e4154b;
+
+
+// accent colors
+@greyDark              : #777;
+@greyLight             : #E0E1E2;
+@labelKeywordBackground: #E8E8E8;
+
+
+
+// link and button colors
+@primaryLinkInverted          : #000;
+@primaryLinkBackgroundInverted: #fff;
+@primaryLink                  : #fff;
+@primaryLinkHoverBackground   : #000;
+@primaryButton                : #fff;
+@primaryButtonHoverBackground : #000;
+@primaryButtonInverted        : #000f;
+
+
+
+// general
+@primaryBackground: #fff;
+@primaryText      : #000;
+
+
+
+//account (signin, signup) specific
+@primaryFormAccounts          : #fff;
+@formAccountsInputPlaceholder : silver;
+@fieldInputSelectionBackground: #50a2ce;
+@signInBackground             : #245b78;
+
+// footer specific
+@footerGrey            : #5E5E5E;
+@footerBottomBackground: #f2f2f2;
+
+// record specific
+@recordVersionBackground : #f2f2f2;
+@randomRecordsFrontpageArticle: rgba(34, 36, 38, .15);
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html
index e6df5a1..d78344a 100644
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/index.html
@@ -93,6 +93,7 @@
                 </small>
               </div>
             </div>
+
             <!--Disabled on feb-relase - enable when stable-->
             <!-- <div class="right floated column">
               <span class="access-right">
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html
index 612d47b..c57a092 100644
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/record_landing_page.html
@@ -56,7 +56,7 @@
             </div>
 
             <div class="right floated column">
-              <span class="access-right">
+              <span class="ui label access-right">
                 <i class="icon lock open"></i>
                 {{ record.access.access_right | make_dict_like('access_right') | vocabulary_title('access_right') }}
                 {%- for right in record.metadata.rights %}