veyron-browser: Using Rework vars and import plugins to setup theming and
some common css variables like common sizes and reset CSS.
Change-Id: I2d43dfbd1975f2e417044c7b2b6b13dc1a0024f6
diff --git a/css-transform.js b/css-transform.js
index 4571178..f94c0e2 100644
--- a/css-transform.js
+++ b/css-transform.js
@@ -1,9 +1,11 @@
var through2 = require('through2');
var path = require('path');
+var rework = require('rework');
+var reworkVars = require('rework-vars');
+var reworkImport = require('rework-import');
module.exports = transform;
-//TODO(aghassemi) Vanilla CSS for now. Pre-process after switch to Rework
function transform(file) {
if (path.extname(file) !== '.css') {
return through2();
@@ -20,8 +22,22 @@
}
function flush(callback) {
- var css = contents.join('');
+ var string = contents.join('');
+ var css = compile(string);
this.push('module.exports = ' + JSON.stringify(css));
callback();
}
+}
+
+/* Compiles the given CSS string using rework */
+function compile(string) {
+ var css = rework(string)
+ .use(reworkImport({
+ path: 'src/components'
+ }))
+ .use(reworkVars())
+ .toString({
+ compress: true
+ });
+ return css;
}
\ No newline at end of file
diff --git a/package.json b/package.json
index ab95fe4..47d650c 100644
--- a/package.json
+++ b/package.json
@@ -7,15 +7,18 @@
"preinstall": "npm install --production $VEYRON_ROOT/veyron.js"
},
"devDependencies": {
+ "bower": "~1.3.9",
"browserify": "^4.2.3",
"exorcist": "^0.1.6",
"jshint": "^2.5.2",
"prova": "^1.14.0",
"proxyquireify": "^0.5.0",
+ "rework": "^1.0.0",
+ "rework-import": "^1.2.0",
+ "rework-vars": "^3.1.1",
"serve": "^1.4.0",
"through2": "^0.5.1",
- "vulcanize": "^0.3.1",
- "bower": "~1.3.9"
+ "vulcanize": "^0.3.1"
},
"dependencies": {
"debug": "^1.0.4",
diff --git a/src/components/common-style/reset.css b/src/components/common-style/reset.css
new file mode 100644
index 0000000..2012073
--- /dev/null
+++ b/src/components/common-style/reset.css
@@ -0,0 +1,10 @@
+/* Reset CSS - normalize everything to the same base */
+* {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+ text-decoration: none;
+ border: none;
+ list-style: none;
+ vertical-align: baseline;
+}
\ No newline at end of file
diff --git a/src/components/common-style/sizes.css b/src/components/common-style/sizes.css
new file mode 100644
index 0000000..83438d1
--- /dev/null
+++ b/src/components/common-style/sizes.css
@@ -0,0 +1,17 @@
+/* Size related CSS variables */
+:root {
+
+ /* font-size */
+ --size-font-xsmall: 0.8em;
+ --size-font-small: 0.9em;
+ --size-font-normal: 1em;
+ --size-font-large: 1.1em;
+ --size-font-xlarge: 1.2em;
+
+ /* margin and padding size */
+ --size-space-xsmall: 0.5em;
+ --size-space-small: 0.75em;
+ --size-space-normal: 1em;
+ --size-space-large: 1.25em;
+ --size-space-xlarge: 1.5em;
+}
diff --git a/src/components/common-style/theme.css b/src/components/common-style/theme.css
new file mode 100644
index 0000000..85e3d9c
--- /dev/null
+++ b/src/components/common-style/theme.css
@@ -0,0 +1,8 @@
+/* CSS variables for the color theme of the application */
+:root {
+ --font-family: 'Roboto', sans-serif;
+ --color-white: #FAFAFA;
+ --color-black: #252525;
+ --color-primary-dark: #2F3E9E;
+ --color-bright: #FF4081;
+}
diff --git a/src/components/main-content/index.css b/src/components/main-content/index.css
index a114c59..8939162 100644
--- a/src/components/main-content/index.css
+++ b/src/components/main-content/index.css
@@ -1,3 +1,5 @@
+@import "common-style/sizes.css";
+
.main-container {
- margin: 1em;
+ margin: var(--size-space-normal);
}
\ No newline at end of file
diff --git a/src/components/sidebar/index.css b/src/components/sidebar/index.css
index a5e32f2..8a9e5c3 100644
--- a/src/components/sidebar/index.css
+++ b/src/components/sidebar/index.css
@@ -1,4 +1,5 @@
+@import "common-style/theme.css";
+
.nav-item.core-selected {
- /* TODO(aghassemi) refactor into color-bright variable */
- color: #FF4081;
+ color: var(--color-bright);
}
\ No newline at end of file
diff --git a/src/components/viewport/index.css b/src/components/viewport/index.css
index d9ba4bf..d833835 100644
--- a/src/components/viewport/index.css
+++ b/src/components/viewport/index.css
@@ -1,29 +1,28 @@
-/* TODO(aghassemi) Use Rework */
@import url(http://fonts.googleapis.com/css?family=Roboto);
-body {
- font-family: 'Roboto', sans-serif;
- color: #252525;
- /* TODO(aghassemi) refactor FAFAFA into color-white variable */
- background-color: #FAFAFA;
-}
+@import "common-style/reset.css";
+@import "common-style/theme.css";
+@import "common-style/sizes.css";
-.panel .drawer {
- background-color: #FAFAFA;
+body {
+ font-family: var(--font-family);
+ color: var(--color-black);
+ background-color: var(--color-white);
}
.title {
- /* TODO(aghassemi) refactor these into size variables of xsmall, small, normal, medium, large, larger */
- font-size: 1.1em;
- font-weight: normal;
- color: #FAFAFA;
-}
-
-.drawer-toggle {
- color: #FAFAFA;
+ font-size: var(--size-font-large);
+ color: var(--color-white);
}
.toolbar {
- /* TODO(aghassemi) refactor into color-primary-dark variable */
- background-color: #2F3E9E;
+ background-color: var(--color-primary-dark);
+}
+
+.panel .drawer {
+ background-color: var(--color-white);
+}
+
+.drawer-toggle {
+ color: var(--color-white);
}
