GH-278 Color theme SCSS

cwt-wa · May 27, 2021 · 66400fd · 66400fd
1 parent 03e34c6
commit 66400fd
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 16 deletions.
diff --git a/cwt-angular/config/helpers.js b/cwt-angular/config/helpers.js
@@ -51,3 +51,15 @@ exports.custom = function (name, fallback) {
     return root(fallback, name);
 };
 
+exports.toRgba = function (val) {
+    if (val.startsWith('#')) {
+        if (!/^#([A-Fa-f0-9]{3}){1,2}$/.test(val)) throw new Error(`Invalid val: ${val}`);
+        let c = val.substring(1).split('');
+        if (c.length == 3) c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+        c = `0xff${c.join('')}`;
+        return [Number(c)];
+    } else if (val.startsWith('rgb')) {
+        return val.substring(val.indexOf("(")+1, val.length-1).split(",").map(v => Number(v.trim()));
+    }
+}
+
diff --git a/cwt-angular/config/webpack.common.js b/cwt-angular/config/webpack.common.js
@@ -1,6 +1,15 @@
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const helpers = require('./helpers');
+const sass = require("node-sass");
+const sassUtils = require("node-sass-utils")(sass);
+let theme;
+try {
+    theme = require('../custom/theme');
+} catch (err) {
+    if (e.code !== 'MODULE_NOT_FOUND') throw err;
+    theme = require('../src/main/webapp/scss/theme');
+}
 
 const appCssExtractTextPlugin = new ExtractTextPlugin({
     filename: "app_[hash]_[name].css",
@@ -46,7 +55,17 @@ module.exports = {
                 test: /\.(scss)$/,
                 use: bootstrapCssExtractTextPlugin.extract({
                     fallback: 'style-loader',
-                    use: ['css-loader', 'sass-loader']
+                    use: [
+                        'css-loader',
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                functions: {
+                                    "get($key)": key => sassUtils.castToSass(sass.types.Color(...helpers.toRgba(theme[key.getValue()])))
+                                }
+                            }
+                        }
+                    ]
                 })
 
             },

diff --git a/cwt-angular/package.json b/cwt-angular/package.json
@@ -53,6 +53,7 @@
     "karma-typescript": "^4.0.0",
     "karma-webpack": "^3.0.5",
     "node-sass": "^4.5.3",
+    "node-sass-utils": "^1.1.3",
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-loader": "^3.0.0",

diff --git a/cwt-angular/src/main/webapp/scss/_custom.scss b/cwt-angular/src/main/webapp/scss/_custom.scss
@@ -1,14 +1,15 @@
-$theme-colors: (primary: #322a21, secondary: #1B2021, success: #2A9D8F, info: #473042, warning: #E9C46A, danger: #89023E, light: #bb829b, dark: #000);
-$table-border-color: #000;
-$table-color: #808080;
-$table-hover-bg: rgba(0, 0, 0, 0.4);
-$input-bg: #d4d4d4;
-$input-border-color: #000;
-$input-color: #1B2021;
-$pagination-bg: #322a21;
-$pagination-border-color: #322a21;
-$pagination-hover-bg: #89023E;
-$pagination-hover-border-color: #89023E;
-$pagination-active-bg: #89023E;
-$pagination-disabled-bg: #1B2021;
-$pagination-disabled-border-color: #1B2021;
+$theme-colors: (primary: get('primary'), secondary: get('secondary'), success: get('success'), info: get('info'), warning: get('warning'), danger: get('danger'), light: get('light'), dark: get('dark'));
+$table-border-color: get('tableBorderColor');
+$table-color: get('tableColor');
+$table-hover-bg: get('tableHoverBg');
+$input-bg: get('inputBg');
+$input-border-color: get('inputBorderColor');
+$input-color: get('secondary');
+$pagination-bg: get('primary');
+$pagination-border-color: get('primary');
+$pagination-hover-bg: get('danger');
+$pagination-hover-border-color: get('danger');
+$pagination-active-bg: get('danger');
+$pagination-disabled-bg: get('secondary');
+$pagination-disabled-border-color: get('secondary');
+
diff --git a/cwt-angular/src/main/webapp/scss/main.scss b/cwt-angular/src/main/webapp/scss/main.scss
@@ -11,7 +11,7 @@ html {
 
 body {
   background: transparent;
-  color: #808080;
+  color: $table-color;
 
   &.goldWinner {
     &::before {

diff --git a/cwt-angular/src/main/webapp/scss/theme.js b/cwt-angular/src/main/webapp/scss/theme.js
@@ -0,0 +1,16 @@
+module.exports = {
+    primary: '#322a21',
+    secondary: '#1B2021',
+    success: '#2A9D8F',
+    info: '#473042',
+    warning: '#E9C46A',
+    danger: '#89023E',
+    light: '#bb829b',
+    dark: '#000',
+    tableBorderColor: '#000',
+    tableColor: '#808080',
+    tableHoverBg: 'rgba(0, 0, 0, 0.4)',
+    inputBg: '#d4d4d4',
+    inputBorderColor: '#000',
+};
+
diff --git a/cwt-angular/yarn.lock b/cwt-angular/yarn.lock
@@ -4405,6 +4405,11 @@ node-releases@^1.1.52:
   dependencies:
     semver "^6.3.0"
 
+node-sass-utils@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/node-sass-utils/-/node-sass-utils-1.1.3.tgz#ce99bcc7f96eec45eccbbd06f15f770d65a2d396"
+  integrity sha512-zSBvzcPeI8qY3fcJPXuRVYkyKssHyt0bBLKZ9TaYBn2dskJTjooIaI0yqHL6BylgMd3WPyt9DQD91vfds75xLA==
+
 node-sass@^4.5.3:
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.1.tgz#9db5689696bb2eec2c32b98bfea4c7a2e992d0a3"