wallet-ext: styles theme basics

* use themes to configure values eg. colors
* use variables for css properties to allow easilly update them or change themes

wallet/configs/ts/tsconfig.common.json

@@ -31,7 +31,12 @@
             "_messages": ["./src/shared/messaging/messages/"],
             "_messages/*": ["./src/shared/messaging/messages/*"],
             "_payloads": ["./src/shared/messaging/messages/payloads/"],
-            "_payloads/*": ["./src/shared/messaging/messages/payloads/*"]
+            "_payloads/*": ["./src/shared/messaging/messages/payloads/*"],
+            "_styles/*": ["./src/ui/styles/*"],
+            "_variables": ["./src/ui/styles/variables"],
+            "_variables/*": ["./src/ui/styles/variables/*"],
+            "_values": ["./src/ui/styles/values"],
+            "_values/*": ["./src/ui/styles/values/*"]
         }
     },
     "include": ["../../src"],

wallet/configs/webpack/webpack.config.dev.ts

@@ -19,6 +19,9 @@ const configDev: Configuration = {
     watchOptions: {
         aggregateTimeout: 600,
     },
+    stats: {
+        loggingDebug: ['sass-loader'],
+    },
 };
 
 async function getConfig() {

wallet/src/ui/styles/global.scss

@@ -1,3 +1,6 @@
+@use './themes';
+@use '_variables' as v;
+
 @import url('bootstrap-icons');
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
 
@@ -7,7 +10,10 @@ body {
     min-height: 0;
     margin: 0;
     padding: 0;
-    background-color: #e1e1e1;
+
+    /* to allow gradient color to work and show at least solid color when over-scroll */
+    background: v.use(v.$colors-background);
+    background-color: v.use(v.$colors-background-color);
     color: black;
     scroll-behavior: smooth;
 }

wallet/src/ui/styles/themes/dark.scss

@@ -0,0 +1,8 @@
+@use '_variables/colors' as c-var;
+@use '_values/colors' as c-val;
+
+$values: (
+    c-var.$background: linear-gradient(180deg, #041429 0%, #041630 19.83%),
+    c-var.$background-color: #041429,
+    c-var.$text-on-background: c-val.$white,
+);

wallet/src/ui/styles/themes/index.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use './light';
+@use './dark';
+
+@mixin apply-theme($name, $values, $default-values) {
+    @each $variable, $default-value in $default-values {
+        $final-value: $default-value;
+        @if map.has-key($values, $variable) {
+            $final-value: map.get($values, $variable);
+        }
+
+        #{$variable}: $final-value;
+    }
+}
+
+:root,/* default theme */
+:root.light {
+    @include apply-theme('light', light.$values, light.$values);
+}
+
+:root.dark {
+    @include apply-theme('dark', dark.$values, light.$values);
+}

wallet/src/ui/styles/themes/light.scss

@@ -0,0 +1,8 @@
+@use '_variables/colors' as c-var;
+@use '_values/colors' as c-val;
+
+$values: (
+    c-var.$background: c-val.$gray-40,
+    c-var.$background-color: c-val.$gray-40,
+    c-var.$text-on-background: c-val.$gray-95,
+);

wallet/src/ui/styles/values/colors.scss

@@ -0,0 +1,8 @@
+$white: #fff;
+$gray-40: #f7f8f8;
+$gray-60: #c3c5c8;
+$gray-65: #9c9fa4;
+$gray-70: #898d93;
+$gray-75: #767a81;
+$gray-95: #2a3645;
+$gray-100: #182435;

wallet/src/ui/styles/values/index.scss

@@ -0,0 +1 @@
+@forward './colors' as colors-*;

wallet/src/ui/styles/variables/colors.scss

@@ -0,0 +1,3 @@
+$background: '--colors-background';
+$background-color: '--colors-background-color';
+$text-on-background: '--colors-text-on-background';

wallet/src/ui/styles/variables/index.scss

@@ -0,0 +1,5 @@
+@forward './colors' as colors-*;
+
+@function use($variable) {
+    @return var(#{$variable});
+}