Create grave version with automated theme mode selector (#15)

Instead of default light mode now there are three files: grave.css - thats autodetects mode grave-light.css - thats static light mode grave-dark.css - tats static dark mode
Ferror · Mar 18, 2020 · 9c75173 · 9c75173
1 parent 365a5a4
commit 9c75173
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 23 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 .git
+dist
diff --git a/README.md b/README.md
@@ -7,34 +7,50 @@
 
 <img src="https://assets.malcherczyk.com/icons/icon_g.svg" width="100" height="100">
 
-## If you prefer light mode
+## Usage
 
+### If you want to autodetect mode
 ```html
 <html>
     <head>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ferror/grave@gh-pages/3.0/grave.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ferror/grave@gh-pages/3.2/grave.min.css">
     </head>
 </html>
 ```
 
-## If you prefer dark mode
+### If you prefer light mode
+```html
+<html>
+    <head>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ferror/grave@gh-pages/3.2/grave-light.min.css">
+    </head>
+</html>
+```
 
+### If you prefer dark mode
 ```html
 <html>
     <head>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ferror/grave@gh-pages/3.0/grave-dark.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ferror/grave@gh-pages/3.2/grave-dark.min.css">
     </head>
 </html>
 ```
 
 # Release
-
+## Autodetect Mode
 You can release/compile and minimize css by typing:
 ```
 node_modules/gulp/bin/gulp.js release
 ```
 
+## Dark Mode
 and to release dark mode:
 ```
 node_modules/gulp/bin/gulp.js release --dark
 ```
+
+## Light Mode
+and to release light mode:
+```
+node_modules/gulp/bin/gulp.js release --light
+```
diff --git a/grave-light.css b/grave-light.css
@@ -0,0 +1,34 @@
+@import "src/vendor/reset.css";
+@import "src/text.css";
+@import "src/figure.css";
+@import "src/form.css";
+@import "src/button.css";
+@import "src/structure.css";
+@import "src/tooltip.css";
+
+:root {
+    --global-page-background-color: #fff;
+    --global-font-color: #374252;
+    --global-form-background-color: #ecf0f1;
+    --global-form-background-color-active: #dce0e1;
+    --global-form-background-color-valid: #2ecc71a6;
+    --global-form-font-color: #7f8c8d;
+    --global-form-shadow-color: 0 3px 0 #7f8c8d;
+    --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
+    --global-text-code-background-color: rgba(0, 0, 0, 0.1);
+    --image-width: 20rem;
+
+    font-size: 16px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--global-page-background-color);
+    font-family: 'Roboto', sans-serif;
+    max-width: 970px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
diff --git a/grave.css b/grave.css
@@ -7,17 +7,6 @@
 @import "src/tooltip.css";
 
 :root {
-    --global-page-background-color: #fff;
-    --global-font-color: #374252;
-    --global-form-background-color: #ecf0f1;
-    --global-form-background-color-active: #dce0e1;
-    --global-form-background-color-valid: #2ecc71a6;
-    --global-form-font-color: #7f8c8d;
-    --global-form-shadow-color: 0 3px 0 #7f8c8d;
-    --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
-    --global-text-code-background-color: rgba(0, 0, 0, 0.1);
-    --image-width: 20rem;
-
     font-size: 16px;
 }
 
@@ -32,3 +21,33 @@ body {
     margin: 0 auto;
     padding: 0 15px;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --global-page-background-color: #36393e;
+        --global-font-color: #a7a7a7;
+        --global-form-background-color: #ecf0f1;
+        --global-form-background-color-active: #dce0e1;
+        --global-form-background-color-valid: #ecf0f1;
+        --global-form-font-color: #7f8c8d;
+        --global-form-shadow-color: 0 3px 0 #7f8c8d;
+        --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
+        --global-text-code-background-color: rgba(236, 240, 241, 0.1);
+        --image-width: 20rem;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --global-page-background-color: #fff;
+        --global-font-color: #374252;
+        --global-form-background-color: #ecf0f1;
+        --global-form-background-color-active: #dce0e1;
+        --global-form-background-color-valid: #2ecc71a6;
+        --global-form-font-color: #7f8c8d;
+        --global-form-shadow-color: 0 3px 0 #7f8c8d;
+        --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
+        --global-text-code-background-color: rgba(0, 0, 0, 0.1);
+        --image-width: 20rem;
+    }
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,14 +1,23 @@
 'use strict';
 
-var gulp = require('gulp');
-var csso = require('gulp-csso');
-var cssimport = require('gulp-cssimport');
+const gulp = require('gulp');
+const csso = require('gulp-csso');
+const cssimport = require('gulp-cssimport');
 // var csscomb = require('gulp-csscomb');
-var rename = require('gulp-rename');
-var stylelint = require('gulp-stylelint');
+const rename = require('gulp-rename');
+const stylelint = require('gulp-stylelint');
 
 // Prepare for distribution
 gulp.task('release', function () {
+    if (process.argv[3] === '--light') {
+        return gulp
+            .src('grave-light.css')
+            .pipe(cssimport({matchPattern: '*.css'}))
+            .pipe(csso())
+            .pipe(rename('grave-light.min.css'))
+            .pipe(gulp.dest('dist'));
+    }
+
     if (process.argv[3] === '--dark') {
         return gulp
             .src('grave-dark.css')

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
         <meta name="keywords" content="">
         <meta name="Description" content="">
         <title>Grave UI</title>
-        <link rel="stylesheet" href="grave-dark.css">
+        <link rel="stylesheet" href="grave.css">
         <style>
             div {
                 margin: 20px 0;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "grave",
-    "version": "3.0.1",
+    "version": "3.2.0",
     "description": "Simple CSS framework without classes",
     "main": "index.js",
     "scripts": {