Merge pull request #2537 from rejas/custom-properties

CHANGELOG.md

@@ -15,6 +15,7 @@ _This release is scheduled to be released on 2021-04-01._
 - Added German translation for "PRECIP".
 - Added first test for Alert module.
 - Added support for `dateFormat` when not using `timeFormat: "absolute"`
+- Added custom-properties in css for improved styling experience, see `custom.css.sample` file
 
 ### Updated
 
@@ -28,7 +29,7 @@ _This release is scheduled to be released on 2021-04-01._
 - Fix updatenotification start function logging inconsistency.
 - Checks and applies the showDescription setting for the newsfeed module again
 - Fix tests in weather module and add one for decimalPoint in forecast
-- Fix decimalSymbol in the forcast part of the new weather module #2530
+- Fix decimalSymbol in the forecast part of the new weather module #2530
 - Fix wrong treatment of `appendLocationNameToHeader` when using `ukmetofficedatahub`
 - Fix alert not recognizing multiple alerts (#2522)
 

css/custom.css.sample

@@ -0,0 +1,18 @@
+/* Magic Mirror Custom CSS Sample
+ *
+ * MIT Licensed.
+ */
+
+// Uncomment and adjust accordingly if you want to import another font from the google-fonts-api:
+// @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap');
+
+// Change color and fonts here:
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: black;
+  --font-size: 20px;
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+}

css/main.css

@@ -1,8 +1,19 @@
+:root {
+  --color-text: #999;
+  --color-text-dimmed: #666;
+  --color-text-bright: #fff;
+  --color-background: black;
+  --font-size: 20px;
+  --font-primary: "Roboto Condensed";
+  --font-secondary: "Roboto";
+}
+
 html {
   cursor: none;
   overflow: hidden;
-  background: #000;
+  background: var(--color-background);
   user-select: none;
+  font-size: var(--font-size);
 }
 
 ::-webkit-scrollbar {
@@ -14,12 +25,11 @@ body {
   position: absolute;
   height: calc(100% - 120px);
   width: calc(100% - 120px);
-  background: #000;
+  background: var(--color-background);
-  color: #aaa;
+  color: var(--color-text);
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 400;
-  font-size: 2em;
+  line-height: 1.5;
-  line-height: 1.5em;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -28,60 +38,60 @@ body {
  */
 
 .dimmed {
-  color: #666;
+  color: var(--color-text-dimmed);
 }
 
 .normal {
-  color: #999;
+  color: var(--color-text);
 }
 
 .bright {
-  color: #fff;
+  color: var(--color-text-bright);
 }
 
 .xsmall {
-  font-size: 15px;
+  font-size: 0.667rem;
-  line-height: 20px;
+  line-height: 1.4;
 }
 
 .small {
-  font-size: 20px;
+  font-size: 1rem;
-  line-height: 25px;
+  line-height: 1.4;
 }
 
 .medium {
-  font-size: 30px;
+  font-size: 1.5rem;
-  line-height: 35px;
+  line-height: 1.4;
 }
 
 .large {
-  font-size: 65px;
+  font-size: 2.25rem;
-  line-height: 65px;
+  line-height: 1;
 }
 
 .xlarge {
-  font-size: 75px;
+  font-size: 3.375rem;
-  line-height: 75px;
+  line-height: 1;
   letter-spacing: -3px;
 }
 
 .thin {
-  font-family: Roboto, sans-serif;
+  font-family: var(--font-secondary), sans-serif;
   font-weight: 100;
 }
 
 .light {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 300;
 }
 
 .regular {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 400;
 }
 
 .bold {
-  font-family: "Roboto Condensed", sans-serif;
+  font-family: var(--font-primary), sans-serif;
   font-weight: 700;
 }
 
@@ -96,7 +106,7 @@ body {
 header {
   text-transform: uppercase;
   font-size: 15px;
-  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
+  font-family: var(--font-primary), Arial, Helvetica, sans-serif;
   font-weight: 400;
   border-bottom: 1px solid #666;
   line-height: 15px;

fonts/package-lock.json

@@ -1,21 +1,7 @@
 {
 	"name": "magicmirror-fonts",
-	"lockfileVersion": 2,
 	"requires": true,
-	"packages": {
+	"lockfileVersion": 1,
-		"": {
-			"name": "magicmirror-fonts",
-			"license": "MIT",
-			"dependencies": {
-				"roboto-fontface": "^0.10.0"
-			}
-		},
-		"node_modules/roboto-fontface": {
-			"version": "0.10.0",
-			"resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
-			"integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
-		}
-	},
 	"dependencies": {
 		"roboto-fontface": {
 			"version": "0.10.0",

package.json

@@ -45,12 +45,12 @@
 	"devDependencies": {
 		"chai": "^4.3.4",
 		"chai-as-promised": "^7.1.1",
-		"eslint-config-prettier": "^8.1.0",
+		"eslint-config-prettier": "^8.2.0",
 		"eslint-plugin-jsdoc": "^32.3.0",
 		"eslint-plugin-prettier": "^3.3.1",
 		"express-basic-auth": "^1.2.0",
 		"husky": "^4.3.8",
-		"jsdom": "^16.5.2",
+		"jsdom": "^16.5.3",
 		"lodash": "^4.17.21",
 		"mocha": "^8.3.2",
 		"mocha-each": "^2.0.1",
@@ -84,7 +84,7 @@
 		"node-ical": "^0.13.0",
 		"rrule": "^2.6.8",
 		"rrule-alt": "^2.2.8",
-		"simple-git": "^2.37.0",
+		"simple-git": "^2.38.0",
 		"socket.io": "^4.0.1"
 	},
 	"_moduleAliases": {

vendor/package-lock.json

@@ -1,93 +1,7 @@
 {
   "name": "magicmirror-vendors",
-  "lockfileVersion": 2,
   "requires": true,
-  "packages": {
+  "lockfileVersion": 1,
-    "": {
-      "name": "magicmirror-vendors",
-      "license": "MIT",
-      "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.3",
-        "moment": "^2.29.1",
-        "moment-timezone": "^0.5.33",
-        "nunjucks": "^3.2.3",
-        "suncalc": "^1.8.0",
-        "weathericons": "^2.1.0"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
-      "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/a-sync-waterfall": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
-      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
-    },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-    },
-    "node_modules/commander": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/moment-timezone": {
-      "version": "0.5.33",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.33.tgz",
-      "integrity": "sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==",
-      "dependencies": {
-        "moment": ">= 2.9.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/nunjucks": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.3.tgz",
-      "integrity": "sha512-psb6xjLj47+fE76JdZwskvwG4MYsQKXUtMsPh6U0YMvmyjRtKRFcxnlXGWglNybtNTNVmGdp94K62/+NjF5FDQ==",
-      "dependencies": {
-        "a-sync-waterfall": "^1.0.0",
-        "asap": "^2.0.3",
-        "commander": "^5.1.0"
-      },
-      "bin": {
-        "nunjucks-precompile": "bin/precompile"
-      },
-      "engines": {
-        "node": ">= 6.9.0"
-      }
-    },
-    "node_modules/suncalc": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/suncalc/-/suncalc-1.8.0.tgz",
-      "integrity": "sha1-HZiYEJVjB4dQ9JlKlZ5lTYdqy/U="
-    },
-    "node_modules/weathericons": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/weathericons/-/weathericons-2.1.0.tgz",
-      "integrity": "sha1-dFOho14gAkXjiftQd9Un7/MLc7Q="
-    }
-  },
   "dependencies": {
     "@fortawesome/fontawesome-free": {
       "version": "5.15.3",