Changeset 35442 for main

Timestamp:

2021-09-21T12:23:02+12:00 (3 years ago)

Author:

cstephen

Message:

Improve color theming

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• App.vue (modified) (2 diffs)
• components/ToggleButton.vue (modified) (2 diffs)
• styles/_material.scss (modified) (6 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue

@@ -1 +1 @@
 <template>
-    <div class="app-bar">
+    <div class="app-bar theme-primary-l1">
         <div class="app-bar-content">
             <span class="heading1">{{ translations.get("Title") }}</span>
@@ -45 +45 @@
     gap: 1em;
 
-    color: var(--primary-fg-color);
-    background-color: var(--primary-bg-color-l1);
+    background-color: var(--bg-color);
+    color: var(--fg-color);
     box-shadow: 0px 0px 4px 3px #6d6d6d;
 

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/ToggleButton.vue

@@ -8 +8 @@
 .base {
     @extend .btn-fab;
-    color: var(--primary-bg-color);
+    color: var(--bg-color);
     background-color: var(--paper-color);
     box-shadow: var(--primary-box-shadow-thin);
@@ -14 +14 @@
 
 .toggled {
-    color: var(--primary-fg-color);
-    background-color: var(--primary-bg-color);
+    color: var(--fg-color);
+    background-color: var(--bg-color);
 }
 </style>

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

@@ -6 +6 @@
 /* === Start theme definitions === */
 
+// When changing these the corresponding CSS variables must be updated
 $primary-bg-color-l1: #249ccf;
 $primary-bg-color: #2191c0;
@@ -12 +13 @@
 
 :root {
-    // Constant variables; do not modify in other styles
-    --primary-bg-color-l1: #{$primary-bg-color-l1};
-    --primary-bg-color: #{$primary-bg-color};
-    --primary-fg-color: white;
-
-    --accent-bg-color: #{$accent-bg-color};
-    --accent-fg-color: white;
+    --primary-bg-color-l1: 36, 156, 207;
+    --primary-bg-color: 33, 145, 192;
+    --primary-fg-color: 255, 255, 255;
+
+    --accent-bg-color: 25, 118, 158;
+    --accent-fg-color: 255, 255, 255;
 
     --body-color: rgb(39, 39, 39);
@@ -33 +33 @@
     --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 {
-    --bg-color: #f04848;
-}
-
-.theme-flat {
-    --bg-color: transparent;
-    --fg-color: --primary-bg-color;
-    --box-shadow: none;
-
-    &:hover {
-        background-color: #EEE;
-    }
-}
-
-.theme-accent {
-    --bg-color: var(--accent-bg-color);
-    --fg-color: var(--accent-fg-color);
-}
-
-/* === End theme definitions */
+    @extend .theme-primary;
+}
 
 /* === Start component definitions === */
@@ -68 +44 @@
     background-color: var(--paper-color);
     color: var(--body-color);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--primary-box-shadow);
 }
 
 .card {
     @extend .paper;
-    --box-shadow: var(--primary-box-shadow-thin);
+    box-shadow: var(--primary-box-shadow-thin);
 }
 
@@ -100 +76 @@
     color: var(--fg-color);
     border: none;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--primary-box-shadow-thin);
 
     border-radius: var(--border-radius);
@@ -395 +371 @@
     }
 }
+
+/* === Start Theme Definitions === */
+
+.theme-primary {
+    --bg-color: rgb(var(--primary-bg-color));
+    --fg-color: rgb(var(--primary-fg-color));
+}
+
+.theme-primary-l1 {
+    --bg-color: rgb(var(--primary-bg-color-l1));
+    --fg-color: rgb(var(--primary-fg-color));
+}
+
+.theme-error {
+    --bg-color: #f04848;
+}
+
+.theme-flat {
+    --bg-color: transparent;
+    --fg-color: rgb(var(--primary-bg-color));
+
+    box-shadow: none;
+
+    &:hover {
+        --bg-color: rgba(var(--primary-bg-color), 0.15);//#EEE;
+    }
+}
+
+.theme-accent {
+    --bg-color: rgb(var(--accent-bg-color));
+    --fg-color: rgb(var(--accent-fg-color));
+}
+
+/* === End theme definitions === */