Themes changes

example/app/asides/features.html

@@ -136,6 +136,7 @@
             <!-- Theme roller -->
             <li>
                 <a href="#themeroller" data-router="section" data-async="app/sections/themeroller.html">
+                    <div class="tag right">4</div>
                     <strong>Theme roller</strong>
                 </a>
             </li>

example/app/sections/themeroller.html

@@ -7,17 +7,21 @@
 
     <article class="active list indented">
         <ul>
-             <li class="dark" data-icon="help" data-theme="theme.lungo.css">
-                <strong>First theme</strong>
+             <li class="theme" data-icon="eye" data-theme="theme.lungo.css">
+                <strong>Default theme</strong>
                 <small>This element has an associated event</small>
             </li>
-             <li class="dark" data-icon="help" data-theme="theme2.lungo.css">
-                <strong>Second theme</strong>
-                <small>This element has an associated event</small>
+            <li class="cancel" data-icon="eye" data-theme="theme.red.css">
+                <strong>Theme: Red</strong>
+                <small>#EE6557</small>
             </li>
-             <li class="dark" data-icon="help" data-theme="theme3.lungo.css">
-                <strong>Third theme</strong>
-                <small>This element has an associated event</small>
+            <li class="accept" data-icon="eye" data-theme="theme.green.css">
+                <strong>Theme: Green</strong>
+                <small>#3FB58E</small>
+            </li>
+            <li class="secondary" data-icon="eye" data-theme="theme.grey.css">
+                <strong>Theme: Grey</strong>
+                <small>#BFBFBF</small>
             </li>
         </ul>
 

example/components/lungo/theme.green.css

@@ -0,0 +1,567 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+@import url("http://fonts.googleapis.com/css?family=Roboto:100,300,400,700");
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #3fb58e;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #3fb58e;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #57c5a0, inset 0 -1px 0 #369a79;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #57c5a0, inset 0 -1px 0 #369a79;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #57c5a0, inset 0 -1px 0 #369a79;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #3fb58e;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
+  -moz-box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
+  box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
+  -moz-box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
+  box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
+}
+section > header > nav.box a:active {
+  background: #369a79;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #3fb58e;
+  -moz-box-shadow: inset 0 -3px 0 #3fb58e;
+  box-shadow: inset 0 -3px 0 #3fb58e;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #3fb58e;
+  -moz-box-shadow: inset 0 3px 0 #3fb58e;
+  box-shadow: inset 0 3px 0 #3fb58e;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #57c5a0;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #3fb58e;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #3fb58e;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #369a79 !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #369a79;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #3fb58e;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #57c5a0;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #57c5a0;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #57c5a0;
+}

example/components/lungo/theme.grey.css

@@ -0,0 +1,566 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #bfbfbf;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #bfbfbf;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #c9c9c9, inset 0 -1px 0 #a2a2a2;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #c9c9c9, inset 0 -1px 0 #a2a2a2;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #c9c9c9, inset 0 -1px 0 #a2a2a2;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #bfbfbf;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
+  -moz-box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
+  box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
+  -moz-box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
+  box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
+}
+section > header > nav.box a:active {
+  background: #a2a2a2;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #bfbfbf;
+  -moz-box-shadow: inset 0 -3px 0 #bfbfbf;
+  box-shadow: inset 0 -3px 0 #bfbfbf;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #bfbfbf;
+  -moz-box-shadow: inset 0 3px 0 #bfbfbf;
+  box-shadow: inset 0 3px 0 #bfbfbf;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #c9c9c9;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #bfbfbf;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #bfbfbf;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #a2a2a2 !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #a2a2a2;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #bfbfbf;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #c9c9c9;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #c9c9c9;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #c9c9c9;
+}

example/components/lungo/theme.lungo.css

@@ -10,7 +10,7 @@
 /* -------------------------- THEME -------------------------- */
 body {
   background-color: #222;
-  font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 13px;
   line-height: 1.3em;

example/components/lungo/theme.red.css

@@ -0,0 +1,567 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700");
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #ee6557;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #ee6557;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #f17c70, inset 0 -1px 0 #ea3c2b;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #f17c70, inset 0 -1px 0 #ea3c2b;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #f17c70, inset 0 -1px 0 #ea3c2b;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #ee6557;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
+  -moz-box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
+  box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
+  -moz-box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
+  box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
+}
+section > header > nav.box a:active {
+  background: #ea3c2b;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #ee6557;
+  -moz-box-shadow: inset 0 -3px 0 #ee6557;
+  box-shadow: inset 0 -3px 0 #ee6557;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #ee6557;
+  -moz-box-shadow: inset 0 3px 0 #ee6557;
+  box-shadow: inset 0 3px 0 #ee6557;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #f17c70;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #ee6557;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #ee6557;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #ea3c2b !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #ea3c2b;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #ee6557;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #f17c70;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #f17c70;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #f17c70;
+}

grunt.js

@@ -76,7 +76,7 @@ module.exports = function(grunt) {
     },
 
     watch: {
-      files: ['<config:resources.javascripts>', '<config:resources.stylesheets>'],
+      files: ['<config:resources.javascripts>', '<config:resources.stylesheets>', '<config:resources.themes>'],
       tasks: 'concat min stylus copy'
     }
   });

packages/lungo/theme.green.css

@@ -0,0 +1,567 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+@import url("http://fonts.googleapis.com/css?family=Roboto:100,300,400,700");
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #3fb58e;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #3fb58e;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #57c5a0, inset 0 -1px 0 #369a79;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #57c5a0, inset 0 -1px 0 #369a79;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #57c5a0, inset 0 -1px 0 #369a79;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #3fb58e;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
+  -moz-box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
+  box-shadow: 1px 0 0 #57c5a0, inset -1px 0 0 #369a79;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
+  -moz-box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
+  box-shadow: -1px 0 0 #57c5a0, inset 1px 0 0 #369a79;
+}
+section > header > nav.box a:active {
+  background: #369a79;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #3fb58e;
+  -moz-box-shadow: inset 0 -3px 0 #3fb58e;
+  box-shadow: inset 0 -3px 0 #3fb58e;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #3fb58e;
+  -moz-box-shadow: inset 0 3px 0 #3fb58e;
+  box-shadow: inset 0 3px 0 #3fb58e;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #57c5a0;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #3fb58e;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #3fb58e;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #369a79 !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #369a79;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #3fb58e;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #57c5a0;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #57c5a0;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #57c5a0;
+}

packages/lungo/theme.grey.css

@@ -0,0 +1,566 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #bfbfbf;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #bfbfbf;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #c9c9c9, inset 0 -1px 0 #a2a2a2;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #c9c9c9, inset 0 -1px 0 #a2a2a2;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #c9c9c9, inset 0 -1px 0 #a2a2a2;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #bfbfbf;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
+  -moz-box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
+  box-shadow: 1px 0 0 #c9c9c9, inset -1px 0 0 #a2a2a2;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
+  -moz-box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
+  box-shadow: -1px 0 0 #c9c9c9, inset 1px 0 0 #a2a2a2;
+}
+section > header > nav.box a:active {
+  background: #a2a2a2;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #bfbfbf;
+  -moz-box-shadow: inset 0 -3px 0 #bfbfbf;
+  box-shadow: inset 0 -3px 0 #bfbfbf;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #bfbfbf;
+  -moz-box-shadow: inset 0 3px 0 #bfbfbf;
+  box-shadow: inset 0 3px 0 #bfbfbf;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #c9c9c9;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #bfbfbf;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #bfbfbf;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #a2a2a2 !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #a2a2a2;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #bfbfbf;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #c9c9c9;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #c9c9c9;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #c9c9c9;
+}

packages/lungo/theme.lungo.css

@@ -10,7 +10,7 @@
 /* -------------------------- THEME -------------------------- */
 body {
   background-color: #222;
-  font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 13px;
   line-height: 1.3em;

packages/lungo/theme.red.css

@@ -0,0 +1,567 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700");
+/* -------------------------- THEME -------------------------- */
+body {
+  background-color: #222;
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.3em;
+  letter-spacing: -0.05em;
+}
+.theme,
+li.theme,
+a.theme {
+  background-color: THEME-light;
+}
+.theme:active,
+li.theme:active,
+a.theme:active {
+  background-color: #ee6557;
+}
+[data-control="pull"] {
+  color: #666;
+  -webkit-text-shadow: 0 1px 0 #fff;
+  -moz-text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #fff;
+}
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section > header {
+  background-color: #ee6557;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #f17c70, inset 0 -1px 0 #ea3c2b;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #f17c70, inset 0 -1px 0 #ea3c2b;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #f17c70, inset 0 -1px 0 #ea3c2b;
+  color: #fff;
+}
+section > footer,
+section nav.groupbar {
+  background-color: #222;
+  -webkit-box-shadow: inset 0 3px 0 #1d1d1d;
+  -moz-box-shadow: inset 0 3px 0 #1d1d1d;
+  box-shadow: inset 0 3px 0 #1d1d1d;
+}
+section > article,
+section > [data-control="pull"] {
+  background-color: #f4f5f5;
+}
+section > article.splash,
+section > [data-control="pull"].splash {
+  background: #ee6557;
+  color: #fff;
+}
+section.aside {
+  -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: -1px 0 2px rgba(0,0,0,0.2);
+}
+section.aside.right {
+  -webkit-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+  box-shadow: 1px 0 2px rgba(0,0,0,0.2);
+}
+aside {
+  background-color: #1d1d1d;
+  color: #fff;
+}
+aside > header,
+aside > footer {
+  background-color: #181818;
+}
+aside > header {
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 #222, inset 0 -1px 0 #141414;
+}
+/* -------------------------- NAVIGATION -------------------------- */
+section > header > nav a {
+  color: #fff;
+}
+section > header > nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
+  -moz-box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
+  box-shadow: 1px 0 0 #f17c70, inset -1px 0 0 #ea3c2b;
+}
+section > header > nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
+  -moz-box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
+  box-shadow: -1px 0 0 #f17c70, inset 1px 0 0 #ea3c2b;
+}
+section > header > nav.box a:active {
+  background: #ea3c2b;
+}
+section > nav.groupbar > a.active {
+  -webkit-box-shadow: inset 0 -3px 0 #ee6557;
+  -moz-box-shadow: inset 0 -3px 0 #ee6557;
+  box-shadow: inset 0 -3px 0 #ee6557;
+}
+section > footer > nav > a,
+nav.groupbar > a {
+  color: #888;
+}
+section > footer > nav > a.active,
+nav.groupbar > a.active {
+  color: #fff;
+}
+section > footer > nav > a {
+  -webkit-box-shadow: 1px 0 0 #1d1d1d;
+  -moz-box-shadow: 1px 0 0 #1d1d1d;
+  box-shadow: 1px 0 0 #1d1d1d;
+}
+section > footer > nav > a.active {
+  color: #fff;
+  background-color: #1d1d1d;
+  -webkit-box-shadow: inset 0 3px 0 #ee6557;
+  -moz-box-shadow: inset 0 3px 0 #ee6557;
+  box-shadow: inset 0 3px 0 #ee6557;
+}
+aside nav a.active .icon {
+  color: #fff;
+}
+aside nav a:not(.active) .icon {
+  color: #888;
+}
+aside nav.box:not(.right) a {
+  -webkit-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  -moz-box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+  box-shadow: 1px 0 0 #222, inset -1px 0 0 #141414;
+}
+aside nav.box.right a {
+  -webkit-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  -moz-box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+  box-shadow: -1px 0 0 #222, inset 1px 0 0 #141414;
+}
+aside nav.box a:active {
+  background: #141414;
+}
+/* -------------------------- LISTS -------------------------- */
+section .list li {
+  background: #fff;
+}
+section .list li:not(.anchor) {
+  border-bottom: inset 1px #ebebeb;
+}
+section .list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #bfbfbf;
+  -moz-box-shadow: inset 4px 0px 0px #bfbfbf;
+  box-shadow: inset 4px 0px 0px #bfbfbf;
+}
+section .list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #3fb58e;
+  -moz-box-shadow: inset 4px 0px 0px #3fb58e;
+  box-shadow: inset 4px 0px 0px #3fb58e;
+}
+section .list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #ee6557;
+  -moz-box-shadow: inset 4px 0px 0px #ee6557;
+  box-shadow: inset 4px 0px 0px #ee6557;
+}
+section .list li,
+section .list li a {
+  color: #333;
+}
+section .list li.anchor,
+section .list li a.anchor {
+  background: #222;
+}
+section .list li.dark,
+section .list li a.dark {
+  background: #595959;
+}
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.active,
+section .list li a.active {
+  background: #f17c70;
+}
+section .list li.light,
+section .list li a.light {
+  background: #ebebeb;
+  color: #7a7a7a;
+}
+section .list li.dark,
+section .list li a.dark,
+section .list li.selectable:active,
+section .list li a.selectable:active,
+section .list li.theme,
+section .list li a.theme,
+section .list li.anchor,
+section .list li a.anchor,
+section .list li.dark small,
+section .list li a.dark small,
+section .list li.selectable:active small,
+section .list li a.selectable:active small,
+section .list li.theme small,
+section .list li a.theme small,
+section .list li.anchor small,
+section .list li a.anchor small,
+section .list li.dark .right:not(.tag),
+section .list li a.dark .right:not(.tag),
+section .list li.selectable:active .right:not(.tag),
+section .list li a.selectable:active .right:not(.tag),
+section .list li.theme .right:not(.tag),
+section .list li a.theme .right:not(.tag),
+section .list li.anchor .right:not(.tag),
+section .list li a.anchor .right:not(.tag) {
+  color: #fff;
+}
+section .list li small,
+section .list li a small,
+section .list li .right:not(.tag),
+section .list li a .right:not(.tag) {
+  color: #7a7a7a;
+}
+.list:not(.indented) li.dark,
+.list:not(.indented) li.theme,
+.list:not(.indented) li.light {
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+aside .list li {
+  background: none;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
+}
+aside .list li.active {
+  background: #ee6557;
+  border-color: transparent;
+}
+aside .list li.active strong,
+aside .list li.active small,
+aside .list li.active .icon {
+  color: #fff;
+}
+aside .list li strong {
+  color: #999;
+}
+aside .list li small,
+aside .list li .icon {
+  color: #666;
+}
+/* -------------------------- TAG -------------------------- */
+.tag {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  font-weight: 700 !important;
+}
+.tag.count {
+  background-color: #ee6557;
+}
+.tag header .count {
+  background-color: THEME-dark !important;
+}
+footer .tag {
+  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
+}
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification {
+  color: #fff;
+}
+.notification .window.growl {
+  background: rgba(0,0,0,0.8);
+}
+.notification .window:not(.growl) {
+  background: #e6e6e6;
+  color: #222;
+  -webkit-box-shadow: 0 0 8px #000;
+  -moz-box-shadow: 0 0 8px #000;
+  box-shadow: 0 0 8px #000;
+}
+.notification .window:not(.growl) button,
+.notification .window:not(.growl) .button {
+  background: #fff !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  color: #ea3c2b !important;
+  -webkit-border-radius: 0px !important;
+  -moz-border-radius: 0px !important;
+  border-radius: 0px !important;
+  border: none !important;
+  margin-bottom: 1px;
+}
+.notification .window:not(.growl).error {
+  background: #dd2916;
+  color: #fff;
+}
+.notification .window:not(.growl).success {
+  background: #2f886b;
+  color: #fff;
+}
+/* -------------------------- BUTTONS -------------------------- */
+a.button,
+button {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
+  border: solid 1px rgba(0,0,0,0.1);
+}
+a.button:active,
+button:active {
+  -webkit-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  -moz-box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
+  border-color: none;
+}
+a.button.secondary,
+button.secondary {
+  color: #666 !important;
+}
+a.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
+button,
+.button,
+.tag {
+  background-color: #ea3c2b;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #bfbfbf;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #3fb58e;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #ee6557;
+}
+/* -------------------------- BUTTONS -------------------------- */
+form label,
+.form label {
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
+}
+form input[type="text"],
+.form input[type="text"],
+form input[type="password"],
+.form input[type="password"],
+form input[type="date"],
+.form input[type="date"],
+form input[type="datetime"],
+.form input[type="datetime"],
+form input[type="email"],
+.form input[type="email"],
+form input[type="number"],
+.form input[type="number"],
+form input[type="search"],
+.form input[type="search"],
+form input[type="tel"],
+.form input[type="tel"],
+form input[type="time"],
+.form input[type="time"],
+form input[type="url"],
+.form input[type="url"],
+form select,
+.form select,
+form textarea,
+.form textarea {
+  background-color: #fff;
+  color: rgba(0,0,0,0.75);
+  border: 1px solid #ddd;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+form input[type="text"].error,
+.form input[type="text"].error,
+form input[type="password"].error,
+.form input[type="password"].error,
+form input[type="date"].error,
+.form input[type="date"].error,
+form input[type="datetime"].error,
+.form input[type="datetime"].error,
+form input[type="email"].error,
+.form input[type="email"].error,
+form input[type="number"].error,
+.form input[type="number"].error,
+form input[type="search"].error,
+.form input[type="search"].error,
+form input[type="tel"].error,
+.form input[type="tel"].error,
+form input[type="time"].error,
+.form input[type="time"].error,
+form input[type="url"].error,
+.form input[type="url"].error,
+form select.error,
+.form select.error,
+form textarea.error,
+.form textarea.error,
+form input[type="text"]:required,
+.form input[type="text"]:required,
+form input[type="password"]:required,
+.form input[type="password"]:required,
+form input[type="date"]:required,
+.form input[type="date"]:required,
+form input[type="datetime"]:required,
+.form input[type="datetime"]:required,
+form input[type="email"]:required,
+.form input[type="email"]:required,
+form input[type="number"]:required,
+.form input[type="number"]:required,
+form input[type="search"]:required,
+.form input[type="search"]:required,
+form input[type="tel"]:required,
+.form input[type="tel"]:required,
+form input[type="time"]:required,
+.form input[type="time"]:required,
+form input[type="url"]:required,
+.form input[type="url"]:required,
+form select:required,
+.form select:required,
+form textarea:required,
+.form textarea:required {
+  border-color: color_alert;
+  color: color_alert;
+  background-color: rgba(198,15,19,0.1);
+}
+form input[type="text"]:focus,
+.form input[type="text"]:focus,
+form input[type="password"]:focus,
+.form input[type="password"]:focus,
+form input[type="date"]:focus,
+.form input[type="date"]:focus,
+form input[type="datetime"]:focus,
+.form input[type="datetime"]:focus,
+form input[type="email"]:focus,
+.form input[type="email"]:focus,
+form input[type="number"]:focus,
+.form input[type="number"]:focus,
+form input[type="search"]:focus,
+.form input[type="search"]:focus,
+form input[type="tel"]:focus,
+.form input[type="tel"]:focus,
+form input[type="time"]:focus,
+.form input[type="time"]:focus,
+form input[type="url"]:focus,
+.form input[type="url"]:focus,
+form select:focus,
+.form select:focus,
+form textarea:focus,
+.form textarea:focus {
+  background: #fafafa;
+  border-color: #ee6557;
+  color: rgba(0,0,0,0.75);
+}
+form input[type="text"][disabled],
+.form input[type="text"][disabled],
+form input[type="password"][disabled],
+.form input[type="password"][disabled],
+form input[type="date"][disabled],
+.form input[type="date"][disabled],
+form input[type="datetime"][disabled],
+.form input[type="datetime"][disabled],
+form input[type="email"][disabled],
+.form input[type="email"][disabled],
+form input[type="number"][disabled],
+.form input[type="number"][disabled],
+form input[type="search"][disabled],
+.form input[type="search"][disabled],
+form input[type="tel"][disabled],
+.form input[type="tel"][disabled],
+form input[type="time"][disabled],
+.form input[type="time"][disabled],
+form input[type="url"][disabled],
+.form input[type="url"][disabled],
+form select[disabled],
+.form select[disabled],
+form textarea[disabled],
+.form textarea[disabled] {
+  background: #eee;
+  border-color: #aaa;
+  color: #999;
+}
+form .select:after,
+.form .select:after {
+  background: #d0d4c6;
+  color: #fff;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+}
+form input[type=range],
+.form input[type=range] {
+  -webkit-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -moz-box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  box-shadow: 'inset 0 1px 2px rgba(0,0,0,0.1)';
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+form input[type=range]:not(.checkbox),
+.form input[type=range]:not(.checkbox) {
+  background-color: #ddd;
+}
+form input[type=range]:not(.checkbox):active,
+.form input[type=range]:not(.checkbox):active {
+  background-color: #f17c70;
+}
+form input[type=range].checkbox,
+.form input[type=range].checkbox {
+  background-color: #aaa;
+  color: rgba(255,255,255,0.6);
+}
+form input[type=range].checkbox.active,
+.form input[type=range].checkbox.active {
+  background-color: #f17c70;
+}
+form input[type=range]::-webkit-slider-thumb,
+.form input[type=range]::-webkit-slider-thumb {
+  -webkit-border-radius: FORM-border-radius;
+  -moz-border-radius: FORM-border-radius;
+  border-radius: FORM-border-radius;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
+}
+form input[type=range]::-webkit-slider-thumb::after,
+.form input[type=range]::-webkit-slider-thumb::after {
+  background: #fff;
+}
+form .progress .bar,
+.form .progress .bar {
+  background-color: #ddd;
+}
+form .progress .bar .value,
+.form .progress .bar .value {
+  background-color: #f17c70;
+}

src/stylesheets/theme.green.styl

@@ -0,0 +1,313 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/vendor.styl"
+@import url("http://fonts.googleapis.com/css?family=Roboto:100,300,400,700")
+WHITE = white
+
+/* -------------------------- THEME -------------------------- */
+CONTENT         = #f4f5f5
+COLOR_secondary = #BFBFBF
+COLOR_cancel    = #EE6557
+COLOR_accept    = #3FB58E
+DARK            = #222
+DARK_light      = lighten(DARK, 25%)
+DARK_dark       = darken(DARK, 15%)
+DARK_darkest    = darken(DARK, 30%)
+FORM_radius     = 1px
+LIST_color      = #333
+LIST_color_2nd  = lighten(LIST_color, 35%)
+LIST_border     = lighten(LIST_color, 90%)
+NAV_LINK        = #888
+NAV_LINK_ACTIVE = WHITE
+THEME           = COLOR_accept
+THEME_light     = lighten(THEME, 15%)
+THEME_dark      = darken(THEME, 15%)
+//?
+COLOR = #484a49
+
+
+body
+  background-color: DARK
+  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 400
+  font-size: 13px
+  line-height: 1.3em
+  letter-spacing: -0.05em
+
+.theme
+  &, li&, a&
+    background-color: THEME-light
+    &:active
+      background-color: THEME
+
+[data-control="pull"]
+    color: #666
+    text-shadow: 0 1px 0 white
+
+
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section
+  & > header
+    background-color: THEME
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
+    color: #fff
+  & > footer, & nav.groupbar
+    background-color: DARK
+    box-shadow inset 0 3px 0 DARK_dark
+  & > article, & > [data-control="pull"]
+    background-color: CONTENT
+    &.splash
+      background: THEME
+      color: #fff
+  &.aside
+    box-shadow -1px 0 2px rgba(0,0,0,0.2)
+    &.right
+      box-shadow 1px 0 2px rgba(0,0,0,0.2)
+
+DARKEST = darken(DARK_darkest, 15%)
+aside
+  background-color: DARK_dark
+  color: #fff
+  & > header, > footer
+    background-color: DARK_darkest
+  & > header
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
+
+
+/* -------------------------- NAVIGATION -------------------------- */
+nav
+  section > header > &
+    & a
+      color: #fff
+    &.box
+      &:not(.right) a
+        box-shadow 1px 0 0 THEME_light, inset -1px 0 0 THEME_dark
+      &.right a
+        box-shadow -1px 0 0 THEME_light, inset 1px 0 0 THEME_dark
+      & a:active
+        background: THEME_dark
+
+  section > &.groupbar > a.active
+    box-shadow inset 0 -3px 0 THEME
+
+  section > footer > & > a, &.groupbar > a
+    color: NAV_LINK
+    &.active
+      color: NAV_LINK_ACTIVE
+
+  section > footer > & > a
+    box-shadow 1px 0 0 DARK_dark
+    &.active
+      color:  NAV_LINK_ACTIVE
+      background-color: DARK_dark
+      box-shadow inset 0 3px 0 THEME
+
+  aside &
+    & a
+      &.active .icon
+        color: white
+      &:not(.active) .icon
+        color: NAV_LINK
+    &.box
+      &:not(.right) a
+        box-shadow 1px 0 0 DARK, inset -1px 0 0 DARKEST
+      &.right a
+        box-shadow -1px 0 0 DARK, inset 1px 0 0 DARKEST
+      & a:active
+        background: DARKEST
+
+
+/* -------------------------- LISTS -------------------------- */
+.list
+  section & li
+    background: #fff
+    &:not(.anchor)
+      border-bottom: inset 1px LIST_border
+    &.secondary
+      box-shadow: inset 4px 0px 0px COLOR_secondary
+    &.accept
+      box-shadow: inset 4px 0px 0px COLOR_accept
+    &.cancel
+      box-shadow: inset 4px 0px 0px COLOR_cancel
+    &, & a
+      color: LIST_color
+      &.anchor
+        background: DARK
+      &.dark
+        background: DARK_light
+      &.selectable:active, &.theme, &.active
+        background: THEME_light
+      &.light
+        background:  LIST_border
+        color: LIST_color_2nd
+      &.dark, &.selectable:active, &.theme, &.anchor
+        &, small, & .right:not(.tag)
+          color: #fff
+      & small, & .right:not(.tag)
+        color: LIST_color_2nd
+
+  &:not(.indented) li
+    &.dark, &.theme, &.light
+      border-bottom-color: rgba(0,0,0,0.1)
+
+  aside & li
+    background: none
+    &:not(:first-child)
+      border-top: solid 1px  DARK
+    &:not(:last-child)
+      border-bottom: solid 1px DARKEST
+    &.active
+      background: THEME
+      border-color: transparent
+      & strong, & small, & .icon
+        color: #fff
+    & strong
+      color: #999
+    & small, .icon
+      color: #666
+
+
+/* -------------------------- TAG -------------------------- */
+.tag
+  color: #fff
+  border-radius 2px
+  font-weight: 700 !important
+  &.count
+    background-color: THEME
+  header .count
+    background-color: THEME-dark !important
+  footer &
+    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
+
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification
+  color: #fff
+  & .window
+    &.growl
+      background: rgba(0,0,0,0.8)
+
+    &:not(.growl)
+      background: #e6e6e6
+      color: #222
+      box-shadow(0 0 8px #000)
+      & button, .button
+        background: #fff !important
+        box-shadow: none !important
+        color: THEME_dark !important
+        border-radius 0px !important
+        border: none !important
+        margin-bottom: 1px
+
+      &.error
+        background: darken(COLOR_cancel, 25%)
+        color: #fff
+      &.success
+        background: darken(COLOR_accept, 25%)
+        color: #fff
+
+/* -------------------------- BUTTONS -------------------------- */
+a.button, button
+  border-radius(FORM-border-radius)
+  color: white
+  border-radius 2px
+  box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
+  border: solid 1px rgba(0,0,0,0.1)
+
+  &:active
+    box-shadow inset 0 0 128px rgba(0,0,0,0.25)
+    border-color: none
+  &.secondary
+    color: #666 !important
+  &[disabled]
+    background-color: black
+
+button, .button, .tag
+  &
+    background-color: THEME_dark
+  &.secondary
+    background-color: COLOR_secondary
+  &.accept
+    background-color: COLOR_accept
+  &.cancel
+    background-color: COLOR_cancel
+
+
+
+
+/* -------------------------- BUTTONS -------------------------- */
+
+FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
+FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
+FORM_border_color = #D0D4C6
+
+form, .form
+  & label
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: solid 1px #eee
+    & .icon
+      color: #ccc
+
+  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
+    background-color: white
+    color: rgba(0, 0, 0, 0.75)
+    border: 1px solid #ddd
+    box-shadow inset 0 1px 2px rgba(0, 0, 0, 0.1)
+    border-radius (0px)
+    &.error, &:required
+      border-color: color_alert
+      color: color_alert
+      background-color: rgba(198, 15, 19, 0.1)
+    &:focus
+      background: #FAFAFA;
+      border-color: THEME;
+      color: rgba(0, 0, 0, 0.75)
+    &[disabled]
+        background: #eee
+        border-color: #aaa
+        color: #999
+
+  & .select:after
+    background: FORM_border_color
+    color: white
+    border-top-right-radius: FORM_radius
+    border-bottom-right-radius: FORM_radius
+
+  & input[type=range]
+    box-shadow  FORM_shadow_form
+    border-radius FORM_radius
+
+    &:not(.checkbox)
+      background-color: #ddd
+      &:active
+        background-color: THEME_light
+
+    &.checkbox
+      background-color: #aaaaaa
+      color: rgba(255,255,255,0.6)
+      &.active
+        background-color: THEME_light
+
+    &::-webkit-slider-thumb
+      border-radius: FORM-border-radius
+      background: #eee
+      box-shadow(inset 0 0 1px #bbb)
+
+    &::-webkit-slider-thumb::after
+      background: #fff
+
+  & .progress
+    & .bar
+      background-color: #ddd
+      & .value
+        background-color: THEME_light

src/stylesheets/theme.grey.styl

@@ -0,0 +1,312 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/vendor.styl"
+WHITE = white
+
+/* -------------------------- THEME -------------------------- */
+CONTENT         = #f4f5f5
+COLOR_secondary = #BFBFBF
+COLOR_cancel    = #EE6557
+COLOR_accept    = #3FB58E
+DARK            = #222
+DARK_light      = lighten(DARK, 25%)
+DARK_dark       = darken(DARK, 15%)
+DARK_darkest    = darken(DARK, 30%)
+FORM_radius     = 1px
+LIST_color      = #333
+LIST_color_2nd  = lighten(LIST_color, 35%)
+LIST_border     = lighten(LIST_color, 90%)
+NAV_LINK        = #888
+NAV_LINK_ACTIVE = WHITE
+THEME           = COLOR_secondary
+THEME_light     = lighten(THEME, 15%)
+THEME_dark      = darken(THEME, 15%)
+//?
+COLOR = #484a49
+
+
+body
+  background-color: DARK
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 400
+  font-size: 13px
+  line-height: 1.3em
+  letter-spacing: -0.05em
+
+.theme
+  &, li&, a&
+    background-color: THEME-light
+    &:active
+      background-color: THEME
+
+[data-control="pull"]
+    color: #666
+    text-shadow: 0 1px 0 white
+
+
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section
+  & > header
+    background-color: THEME
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
+    color: #fff
+  & > footer, & nav.groupbar
+    background-color: DARK
+    box-shadow inset 0 3px 0 DARK_dark
+  & > article, & > [data-control="pull"]
+    background-color: CONTENT
+    &.splash
+      background: THEME
+      color: #fff
+  &.aside
+    box-shadow -1px 0 2px rgba(0,0,0,0.2)
+    &.right
+      box-shadow 1px 0 2px rgba(0,0,0,0.2)
+
+DARKEST = darken(DARK_darkest, 15%)
+aside
+  background-color: DARK_dark
+  color: #fff
+  & > header, > footer
+    background-color: DARK_darkest
+  & > header
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
+
+
+/* -------------------------- NAVIGATION -------------------------- */
+nav
+  section > header > &
+    & a
+      color: #fff
+    &.box
+      &:not(.right) a
+        box-shadow 1px 0 0 THEME_light, inset -1px 0 0 THEME_dark
+      &.right a
+        box-shadow -1px 0 0 THEME_light, inset 1px 0 0 THEME_dark
+      & a:active
+        background: THEME_dark
+
+  section > &.groupbar > a.active
+    box-shadow inset 0 -3px 0 THEME
+
+  section > footer > & > a, &.groupbar > a
+    color: NAV_LINK
+    &.active
+      color: NAV_LINK_ACTIVE
+
+  section > footer > & > a
+    box-shadow 1px 0 0 DARK_dark
+    &.active
+      color:  NAV_LINK_ACTIVE
+      background-color: DARK_dark
+      box-shadow inset 0 3px 0 THEME
+
+  aside &
+    & a
+      &.active .icon
+        color: white
+      &:not(.active) .icon
+        color: NAV_LINK
+    &.box
+      &:not(.right) a
+        box-shadow 1px 0 0 DARK, inset -1px 0 0 DARKEST
+      &.right a
+        box-shadow -1px 0 0 DARK, inset 1px 0 0 DARKEST
+      & a:active
+        background: DARKEST
+
+
+/* -------------------------- LISTS -------------------------- */
+.list
+  section & li
+    background: #fff
+    &:not(.anchor)
+      border-bottom: inset 1px LIST_border
+    &.secondary
+      box-shadow: inset 4px 0px 0px COLOR_secondary
+    &.accept
+      box-shadow: inset 4px 0px 0px COLOR_accept
+    &.cancel
+      box-shadow: inset 4px 0px 0px COLOR_cancel
+    &, & a
+      color: LIST_color
+      &.anchor
+        background: DARK
+      &.dark
+        background: DARK_light
+      &.selectable:active, &.theme, &.active
+        background: THEME_light
+      &.light
+        background:  LIST_border
+        color: LIST_color_2nd
+      &.dark, &.selectable:active, &.theme, &.anchor
+        &, small, & .right:not(.tag)
+          color: #fff
+      & small, & .right:not(.tag)
+        color: LIST_color_2nd
+
+  &:not(.indented) li
+    &.dark, &.theme, &.light
+      border-bottom-color: rgba(0,0,0,0.1)
+
+  aside & li
+    background: none
+    &:not(:first-child)
+      border-top: solid 1px  DARK
+    &:not(:last-child)
+      border-bottom: solid 1px DARKEST
+    &.active
+      background: THEME
+      border-color: transparent
+      & strong, & small, & .icon
+        color: #fff
+    & strong
+      color: #999
+    & small, .icon
+      color: #666
+
+
+/* -------------------------- TAG -------------------------- */
+.tag
+  color: #fff
+  border-radius 2px
+  font-weight: 700 !important
+  &.count
+    background-color: THEME
+  header .count
+    background-color: THEME-dark !important
+  footer &
+    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
+
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification
+  color: #fff
+  & .window
+    &.growl
+      background: rgba(0,0,0,0.8)
+
+    &:not(.growl)
+      background: #e6e6e6
+      color: #222
+      box-shadow(0 0 8px #000)
+      & button, .button
+        background: #fff !important
+        box-shadow: none !important
+        color: THEME_dark !important
+        border-radius 0px !important
+        border: none !important
+        margin-bottom: 1px
+
+      &.error
+        background: darken(COLOR_cancel, 25%)
+        color: #fff
+      &.success
+        background: darken(COLOR_accept, 25%)
+        color: #fff
+
+/* -------------------------- BUTTONS -------------------------- */
+a.button, button
+  border-radius(FORM-border-radius)
+  color: white
+  border-radius 2px
+  box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
+  border: solid 1px rgba(0,0,0,0.1)
+
+  &:active
+    box-shadow inset 0 0 128px rgba(0,0,0,0.25)
+    border-color: none
+  &.secondary
+    color: #666 !important
+  &[disabled]
+    background-color: black
+
+button, .button, .tag
+  &
+    background-color: THEME_dark
+  &.secondary
+    background-color: COLOR_secondary
+  &.accept
+    background-color: COLOR_accept
+  &.cancel
+    background-color: COLOR_cancel
+
+
+
+
+/* -------------------------- BUTTONS -------------------------- */
+
+FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
+FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
+FORM_border_color = #D0D4C6
+
+form, .form
+  & label
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: solid 1px #eee
+    & .icon
+      color: #ccc
+
+  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
+    background-color: white
+    color: rgba(0, 0, 0, 0.75)
+    border: 1px solid #ddd
+    box-shadow inset 0 1px 2px rgba(0, 0, 0, 0.1)
+    border-radius (0px)
+    &.error, &:required
+      border-color: color_alert
+      color: color_alert
+      background-color: rgba(198, 15, 19, 0.1)
+    &:focus
+      background: #FAFAFA;
+      border-color: THEME;
+      color: rgba(0, 0, 0, 0.75)
+    &[disabled]
+        background: #eee
+        border-color: #aaa
+        color: #999
+
+  & .select:after
+    background: FORM_border_color
+    color: white
+    border-top-right-radius: FORM_radius
+    border-bottom-right-radius: FORM_radius
+
+  & input[type=range]
+    box-shadow  FORM_shadow_form
+    border-radius FORM_radius
+
+    &:not(.checkbox)
+      background-color: #ddd
+      &:active
+        background-color: THEME_light
+
+    &.checkbox
+      background-color: #aaaaaa
+      color: rgba(255,255,255,0.6)
+      &.active
+        background-color: THEME_light
+
+    &::-webkit-slider-thumb
+      border-radius: FORM-border-radius
+      background: #eee
+      box-shadow(inset 0 0 1px #bbb)
+
+    &::-webkit-slider-thumb::after
+      background: #fff
+
+  & .progress
+    & .bar
+      background-color: #ddd
+      & .value
+        background-color: THEME_light

src/stylesheets/theme.lungo.styl

@@ -36,7 +36,7 @@ COLOR = #484a49
 
 body
   background-color: DARK
-  font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
   font-weight: 400
   font-size: 13px
   line-height: 1.3em

src/stylesheets/theme.red.styl

@@ -0,0 +1,313 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "import/vendor.styl"
+@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700")
+WHITE = white
+
+/* -------------------------- THEME -------------------------- */
+CONTENT         = #f4f5f5
+COLOR_secondary = #BFBFBF
+COLOR_cancel    = #EE6557
+COLOR_accept    = #3FB58E
+DARK            = #222
+DARK_light      = lighten(DARK, 25%)
+DARK_dark       = darken(DARK, 15%)
+DARK_darkest    = darken(DARK, 30%)
+FORM_radius     = 1px
+LIST_color      = #333
+LIST_color_2nd  = lighten(LIST_color, 35%)
+LIST_border     = lighten(LIST_color, 90%)
+NAV_LINK        = #888
+NAV_LINK_ACTIVE = WHITE
+THEME           = COLOR_cancel
+THEME_light     = lighten(THEME, 15%)
+THEME_dark      = darken(THEME, 15%)
+//?
+COLOR = #484a49
+
+
+body
+  background-color: DARK
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 400
+  font-size: 13px
+  line-height: 1.3em
+  letter-spacing: -0.05em
+
+.theme
+  &, li&, a&
+    background-color: THEME-light
+    &:active
+      background-color: THEME
+
+[data-control="pull"]
+    color: #666
+    text-shadow: 0 1px 0 white
+
+
+/* -------------------------- LAYOUT COLORS -------------------------- */
+section
+  & > header
+    background-color: THEME
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
+    color: #fff
+  & > footer, & nav.groupbar
+    background-color: DARK
+    box-shadow inset 0 3px 0 DARK_dark
+  & > article, & > [data-control="pull"]
+    background-color: CONTENT
+    &.splash
+      background: THEME
+      color: #fff
+  &.aside
+    box-shadow -1px 0 2px rgba(0,0,0,0.2)
+    &.right
+      box-shadow 1px 0 2px rgba(0,0,0,0.2)
+
+DARKEST = darken(DARK_darkest, 15%)
+aside
+  background-color: DARK_dark
+  color: #fff
+  & > header, > footer
+    background-color: DARK_darkest
+  & > header
+    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 DARK, inset 0 -1px 0 DARKEST
+
+
+/* -------------------------- NAVIGATION -------------------------- */
+nav
+  section > header > &
+    & a
+      color: #fff
+    &.box
+      &:not(.right) a
+        box-shadow 1px 0 0 THEME_light, inset -1px 0 0 THEME_dark
+      &.right a
+        box-shadow -1px 0 0 THEME_light, inset 1px 0 0 THEME_dark
+      & a:active
+        background: THEME_dark
+
+  section > &.groupbar > a.active
+    box-shadow inset 0 -3px 0 THEME
+
+  section > footer > & > a, &.groupbar > a
+    color: NAV_LINK
+    &.active
+      color: NAV_LINK_ACTIVE
+
+  section > footer > & > a
+    box-shadow 1px 0 0 DARK_dark
+    &.active
+      color:  NAV_LINK_ACTIVE
+      background-color: DARK_dark
+      box-shadow inset 0 3px 0 THEME
+
+  aside &
+    & a
+      &.active .icon
+        color: white
+      &:not(.active) .icon
+        color: NAV_LINK
+    &.box
+      &:not(.right) a
+        box-shadow 1px 0 0 DARK, inset -1px 0 0 DARKEST
+      &.right a
+        box-shadow -1px 0 0 DARK, inset 1px 0 0 DARKEST
+      & a:active
+        background: DARKEST
+
+
+/* -------------------------- LISTS -------------------------- */
+.list
+  section & li
+    background: #fff
+    &:not(.anchor)
+      border-bottom: inset 1px LIST_border
+    &.secondary
+      box-shadow: inset 4px 0px 0px COLOR_secondary
+    &.accept
+      box-shadow: inset 4px 0px 0px COLOR_accept
+    &.cancel
+      box-shadow: inset 4px 0px 0px COLOR_cancel
+    &, & a
+      color: LIST_color
+      &.anchor
+        background: DARK
+      &.dark
+        background: DARK_light
+      &.selectable:active, &.theme, &.active
+        background: THEME_light
+      &.light
+        background:  LIST_border
+        color: LIST_color_2nd
+      &.dark, &.selectable:active, &.theme, &.anchor
+        &, small, & .right:not(.tag)
+          color: #fff
+      & small, & .right:not(.tag)
+        color: LIST_color_2nd
+
+  &:not(.indented) li
+    &.dark, &.theme, &.light
+      border-bottom-color: rgba(0,0,0,0.1)
+
+  aside & li
+    background: none
+    &:not(:first-child)
+      border-top: solid 1px  DARK
+    &:not(:last-child)
+      border-bottom: solid 1px DARKEST
+    &.active
+      background: THEME
+      border-color: transparent
+      & strong, & small, & .icon
+        color: #fff
+    & strong
+      color: #999
+    & small, .icon
+      color: #666
+
+
+/* -------------------------- TAG -------------------------- */
+.tag
+  color: #fff
+  border-radius 2px
+  font-weight: 700 !important
+  &.count
+    background-color: THEME
+  header .count
+    background-color: THEME-dark !important
+  footer &
+    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
+
+/* -------------------------- NOTIFICATION -------------------------- */
+.notification
+  color: #fff
+  & .window
+    &.growl
+      background: rgba(0,0,0,0.8)
+
+    &:not(.growl)
+      background: #e6e6e6
+      color: #222
+      box-shadow(0 0 8px #000)
+      & button, .button
+        background: #fff !important
+        box-shadow: none !important
+        color: THEME_dark !important
+        border-radius 0px !important
+        border: none !important
+        margin-bottom: 1px
+
+      &.error
+        background: darken(COLOR_cancel, 25%)
+        color: #fff
+      &.success
+        background: darken(COLOR_accept, 25%)
+        color: #fff
+
+/* -------------------------- BUTTONS -------------------------- */
+a.button, button
+  border-radius(FORM-border-radius)
+  color: white
+  border-radius 2px
+  box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
+  border: solid 1px rgba(0,0,0,0.1)
+
+  &:active
+    box-shadow inset 0 0 128px rgba(0,0,0,0.25)
+    border-color: none
+  &.secondary
+    color: #666 !important
+  &[disabled]
+    background-color: black
+
+button, .button, .tag
+  &
+    background-color: THEME_dark
+  &.secondary
+    background-color: COLOR_secondary
+  &.accept
+    background-color: COLOR_accept
+  &.cancel
+    background-color: COLOR_cancel
+
+
+
+
+/* -------------------------- BUTTONS -------------------------- */
+
+FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
+FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
+FORM_border_color = #D0D4C6
+
+form, .form
+  & label
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: solid 1px #eee
+    & .icon
+      color: #ccc
+
+  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
+    background-color: white
+    color: rgba(0, 0, 0, 0.75)
+    border: 1px solid #ddd
+    box-shadow inset 0 1px 2px rgba(0, 0, 0, 0.1)
+    border-radius (0px)
+    &.error, &:required
+      border-color: color_alert
+      color: color_alert
+      background-color: rgba(198, 15, 19, 0.1)
+    &:focus
+      background: #FAFAFA;
+      border-color: THEME;
+      color: rgba(0, 0, 0, 0.75)
+    &[disabled]
+        background: #eee
+        border-color: #aaa
+        color: #999
+
+  & .select:after
+    background: FORM_border_color
+    color: white
+    border-top-right-radius: FORM_radius
+    border-bottom-right-radius: FORM_radius
+
+  & input[type=range]
+    box-shadow  FORM_shadow_form
+    border-radius FORM_radius
+
+    &:not(.checkbox)
+      background-color: #ddd
+      &:active
+        background-color: THEME_light
+
+    &.checkbox
+      background-color: #aaaaaa
+      color: rgba(255,255,255,0.6)
+      &.active
+        background-color: THEME_light
+
+    &::-webkit-slider-thumb
+      border-radius: FORM-border-radius
+      background: #eee
+      box-shadow(inset 0 0 1px #bbb)
+
+    &::-webkit-slider-thumb::after
+      background: #fff
+
+  & .progress
+    & .bar
+      background-color: #ddd
+      & .value
+        background-color: THEME_light