Changeset 35443 for main/trunk

Timestamp:

2021-09-21T12:48:59+12:00 (3 years ago)

Author:

cstephen

Message:

Further improvements to color theming

File:

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

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

@@ -4 +4 @@
 ////
 
-/* === Start theme definitions === */
-
-// When changing these the corresponding CSS variables must be updated
-$primary-bg-color-l1: #249ccf;
-$primary-bg-color: #2191c0;
-
-$accent-bg-color: #19769e;
-
 :root {
     --primary-bg-color-l1: 36, 156, 207;
@@ -20 +12 @@
     --accent-fg-color: 255, 255, 255;
 
+    // Main font color
     --body-color: rgb(39, 39, 39);
+    // For the paper style, but more generally the neutral background color
+    --paper-color: #FCFCFC;
     
     --primary-box-shadow: 0 2px 4px 0 #505050;
     --primary-box-shadow-thin: 0 1px 3px 0 #666666;
 
+    // The brightness to reduce participating elements to on hover
     --hover-brightness: 92%;
-
-    --paper-color: #FCFCFC;
-
     --border-radius: 0.3em;
-
     --transition-duration: 0.15s;
+
 
     @extend .theme-primary;
@@ -208 +201 @@
 
     &:checked {
-        background-color: scale-color($primary-bg-color-l1, $alpha: -60%);
+        background-color: rgba(var(--bg-color-raw), 0.4);
 
         &::after {
             transform: translatex(22px);    
-            background-color: var(--primary-bg-color-l1);
+            background-color: var(--bg-color);
         }
     }
@@ -268 +261 @@
     height: 8px;
     border-radius: 4px;
-    background-color: scale-color($primary-bg-color-l1, $alpha: -70%);
+    background-color: rgba(var(--bg-color-raw), 0.3);
 
     transition-duration: var(--transition-duration);
@@ -285 +278 @@
 
     &:hover {
-        background-color: scale-color($primary-bg-color-l1, $alpha: -60%);
+        background-color: rgba(var(--bg-color-raw), 0.4);
     }
 }
@@ -305 +298 @@
 
     &:hover {
-        background-color: scale-color($primary-bg-color-l1, $alpha: -70%);
+        background-color: rgba(var(--bg-color-raw), 0.3);
     }
 }
@@ -376 +369 @@
 .theme-primary {
     --bg-color: rgb(var(--primary-bg-color));
+    --bg-color-raw: var(--primary-bg-color);
     --fg-color: rgb(var(--primary-fg-color));
 }
@@ -381 +375 @@
 .theme-primary-l1 {
     --bg-color: rgb(var(--primary-bg-color-l1));
+    --bg-color-raw: var(--primary-bg-color-l1);
     --fg-color: rgb(var(--primary-fg-color));
 }
@@ -386 +381 @@
 .theme-error {
     --bg-color: #f04848;
+    --bg-color-raw: 240, 72, 72;
 }
 
 .theme-flat {
     --bg-color: transparent;
+    --bg-color-raw: transparent;
     --fg-color: rgb(var(--primary-bg-color));
 
@@ -401 +398 @@
 .theme-accent {
     --bg-color: rgb(var(--accent-bg-color));
+    --bg-color-raw: var(--accent-bg-color);
     --fg-color: rgb(var(--accent-fg-color));
 }