Changeset 35441 for main/trunk

Timestamp:

2021-09-21T11:52:42+12:00 (3 years ago)

Author:

cstephen

Message:

Theme variable rework to allow for better color theming

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss (modified) (9 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

@@ -9 +9 @@
 $primary-bg-color: #2191c0;
 
-$accent-bg-color: #19769e;//rgb(240, 176, 0);
+$accent-bg-color: #19769e;
 
 :root {
+    // Constant variables; do not modify in other styles
     --primary-bg-color-l1: #{$primary-bg-color-l1};
     --primary-bg-color: #{$primary-bg-color};
@@ -17 +18 @@
 
     --accent-bg-color: #{$accent-bg-color};
-    --accent-fg-color: white;//rgb(61, 61, 61);
+    --accent-fg-color: white;
 
     --body-color: rgb(39, 39, 39);
     
     --primary-box-shadow: 0 2px 4px 0 #505050;
-    --primary-box-shadow-thin: 0 1px 3px 0 #747474;
+    --primary-box-shadow-thin: 0 1px 3px 0 #666666;
 
     --hover-brightness: 92%;
@@ -31 +32 @@
 
     --transition-duration: 0.15s;
+
+    // Normal variables - utilised by styles and set to one of the definitions above.
+    --bg-color: var(--primary-bg-color);
+    --fg-color: var(--primary-fg-color);
+    --box-shadow: var(--primary-box-shadow);
 }
 
 .theme-error {
-    --primary-bg-color: #f04848;
-    --primary-fg-color: white;
+    --bg-color: #f04848;
 }
 
 .theme-flat {
-    --primary-bg-color: transparent;
-    --primary-fg-color: #{$primary-bg-color};
-    --primary-box-shadow: none;
+    --bg-color: transparent;
+    --fg-color: --primary-bg-color;
+    --box-shadow: none;
 
     &:hover {
@@ -49 +54 @@
 
 .theme-accent {
-    --primary-bg-color: var(--accent-bg-color);
-    --primary-fg-color: var(--accent-fg-color);
+    --bg-color: var(--accent-bg-color);
+    --fg-color: var(--accent-fg-color);
 }
 
@@ -63 +68 @@
     background-color: var(--paper-color);
     color: var(--body-color);
-    box-shadow: var(--primary-box-shadow);
+    box-shadow: var(--box-shadow);
 }
 
 .card {
     @extend .paper;
-
-    box-shadow: var(--primary-box-shadow-thin);
+    --box-shadow: var(--primary-box-shadow-thin);
 }
 
@@ -93 +97 @@
     text-align: left;
 
-    background-color: var(--primary-bg-color);
-    color: var(--primary-fg-color);
+    background-color: var(--bg-color);
+    color: var(--fg-color);
     border: none;
-    box-shadow: var(--primary-box-shadow);
+    box-shadow: var(--box-shadow);
 
     border-radius: var(--border-radius);
@@ -157 +161 @@
 
     &:active, &:focus {
-        border-bottom: 1px solid var(--primary-bg-color);
+        border-bottom: 1px solid var(--bg-color);
         
         .text-input-active {
@@ -165 +169 @@
 
     .text-input-active {
-        background-color: var(--primary-bg-color);
+        background-color: var(--bg-color);
         height: 1px;
         margin: 0 auto;
@@ -265 +269 @@
     cursor: pointer;
 
-    background-color: var(--primary-bg-color);
+    background-color: var(--bg-color);
     box-shadow: var(--primary-box-shadow-thin);