Remove colours repository

Now is implemented in theme

kitchen-sink/app/sections/color.html

@@ -6,21 +6,21 @@
     </header>
     <article class="scroll indented">
         <div>
-            <a href="#" class="button small blue">default</a>
-            <a href="#" class="button large blue">default</a>
-
-            <a href="#" class="button anchor disabled">disabled</a>
-            <a href="#" class="button anchor red">red</a>
-            <a href="#" class="button anchor lightgreen">lightgreen</a>
-            <a href="#" class="button anchor green">green</a>
-            <a href="#" class="button anchor blue">blue</a>
-            <a href="#" class="button anchor arcticblue">articblue</a>
-            <a href="#" class="button anchor orange">orange</a>
-            <a href="#" class="button anchor magenta">magenta</a>
-            <a href="#" class="button anchor pink">pink</a>
-            <a href="#" class="button anchor yellow">yellow</a>
-            <a href="#" class="button anchor twitter">twitter</a>
-            <a href="#" class="button anchor facebook">facebook</a>
+            <h1>Sizes</h1>
+            <p class="margin bottom">
+                <a href="#" class="button small">small</a>
+                <a href="#" class="button">default</a>
+                <a href="#" class="button large">large</a>
+            </p>
+            <a href="#" class="button anchor margin bottom">anchor</a>
+            <h1>Colors</h1>
+            <p>
+                <a href="#" class="button anchor margin bottom">default</a>
+                <a href="#" class="button anchor secondary margin bottom">secondary</a>
+                <a href="#" class="button anchor accept margin bottom">accept</a>
+                <a href="#" class="button anchor cancel margin bottom">cancel</a>
+                <a href="#" class="button anchor margin bottom" disabled=true>disabled</a>
+            </p>
         </div>
     </article>
 </section>

src/stylesheets/Lungo.theme.default.styl

@@ -9,7 +9,7 @@
 
 @import "import/vendor.styl"
 @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700")
-@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,700")
 THEME = #0093D5
 THEME_light =  #39ABE1
 
@@ -26,12 +26,22 @@ NOTIFICATION_alert = #ffb515
 NOTIFICATION_success = #009600
 FORM_border_radius = 1px
 
+
+/* COLORS */
+COLOR_SECONDARY = #ccc
+COLOR_CANCEL    = #e33100
+COLOR_ACCEPT    = #009600
+COLOR_THEME     = #237fd7
+
+
+
 body
   background: #000
-  font-family: "Open Sans", "Source Sans Pro","Titillium Web",  Helvetica, Arial, sans-serif
+  font-family: "Open Sans", "Titillium Web",  Helvetica, Arial, sans-serif
   font-weight: 400
-  font-size: 14px
+  font-size: 13px
   line-height: 1.3em
+  letter-spacing: -0.05em
 
 
 
@@ -51,7 +61,7 @@ body
 section
   & > header
     background-color: THEME
-    box-shadow inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1)
+    box-shadow 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1)
     & .title
       color: #fff
 
@@ -67,7 +77,7 @@ section
 
   & > article, & > [data-control="pull"]
     background: #f4f5f5
-    background-color: #ddd
+    // background-color: #ddd
 
   &.aside
     box-shadow -1px 0 0 rgba(0,0,0,0.2)
@@ -139,15 +149,22 @@ footer > nav > a, nav.groupbar > a
 
 
 
-LIST-border = #ddd
+LIST-border = #e5e5e5
 LIST-color = #111
-LIST-color-secondary = #666
+LIST-color-secondary = #555
 
 .list
   & li
     background: #fff
     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
 
@@ -190,7 +207,7 @@ LIST-color-secondary = #666
 .button, button
   border-radius(FORM-border-radius)
   color: white
-  border-radius 1px
+  border-radius 2px
   box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
   border: solid 1px rgba(0,0,0,0.1)
 
@@ -198,7 +215,17 @@ LIST-color-secondary = #666
     box-shadow inset 0 0 128px rgba(0,0,0,0.25)
     border-color: none
 
-
+  &
+    background-color: THEME
+  &.secondary
+    color: #666 !important
+    background-color: COLOR_SECONDARY
+  &.accept
+    background-color: COLOR_ACCEPT
+  &.cancel
+    background-color: COLOR_CANCEL
+  &[disabled]
+    background-color: black
 
 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'
@@ -274,6 +301,7 @@ form, .form
           text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
           font-size: 12px
 
+
 .bubble
   color: #fff
   border-radius 2px
@@ -309,3 +337,6 @@ form, .form
         border: solid 2px #fff
         box-shadow: 0 0 4px black
 
+
+
+

src/stylesheets/Lungo.widgets.colour.styl

@@ -1,69 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Colour
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "import/constants.styl"
-@import "import/vendor.styl"
-
-a.grey, .grey
-  background-color: GREY
-a.dark-grey, .dark-grey
-  background-color: BLACK
-a.red, .red
-  background-color: RED
-a.lightgreen, .lightgreen
-  background-color: LIGHTGREEN
-a.green, .green
-  background-color: GREEN
-a.blue, .blue
-  background-color: BLUE
-a.arcticblue, .arcticblue
-  background-color: ARCTICBLUE
-a.orange, .orange
-  background-color: ORANGE
-a.purple, .purple
-  background-color: PURPLE
-a.magenta, .magenta
-  background-color: MAGENTA
-a.pink, .pink
-  background-color: PINK
-a.yellow, .yellow
-  background-color: YELLOW
-a.twitter, .twitter:not(span)
-  background-color: TWITTER
-a.facebook, .facebook:not(span)
-  background-color: FACEBOOK
-
-li.grey
-   box-shadow: inset 4px 0px 0px GREY
-li.dark-grey
-   box-shadow: inset 4px 0px 0px BLACK
-li.red
-   box-shadow: inset 4px 0px 0px RED
-li.lightgreen
-   box-shadow: inset 4px 0px 0px LIGHTGREEN
-li.green
-   box-shadow: inset 4px 0px 0px GREEN
-li.blue
-   box-shadow: inset 4px 0px 0px BLUE
-li.arcticblue
-   box-shadow: inset 4px 0px 0px ARCTICBLUE
-li.orange
-   box-shadow: inset 4px 0px 0px ORANGE
-li.purple
-   box-shadow: inset 4px 0px 0px PURPLE
-li.magenta
-   box-shadow: inset 4px 0px 0px MAGENTA
-li.pink
-   box-shadow: inset 4px 0px 0px PINK
-li.yellow
-   box-shadow: inset 4px 0px 0px YELLOW
-li.twitter
-   box-shadow: inset 4px 0px 0px TWITTER
-li.facebook
-   box-shadow: inset 4px 0px 0px FACEBOOK

src/stylesheets/css/Lungo.theme.default.css

@@ -7,13 +7,15 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
-@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
+/* COLORS */
 body {
   background: #000;
-  font-family: "Open Sans", "Source Sans Pro", "Titillium Web", Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", "Titillium Web", Helvetica, Arial, sans-serif;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.3em;
+  letter-spacing: -0.05em;
 }
 .theme,
 li.theme,
@@ -33,9 +35,9 @@ a.theme:active {
 }
 section > header {
   background-color: #0093d5;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
+  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
 }
 section > header .title {
   color: #fff;
@@ -61,7 +63,6 @@ section > footer > nav a.current {
 section > article,
 section > [data-control="pull"] {
   background: #f4f5f5;
-  background-color: #ddd;
 }
 section.aside {
   -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
@@ -161,7 +162,22 @@ nav.groupbar > a.current {
 }
 .list li {
   background: #fff;
-  border-bottom: inset 1px #ddd;
+  border-bottom: inset 1px #e5e5e5;
+}
+.list li.secondary {
+  -webkit-box-shadow: inset 4px 0px 0px #ccc;
+  -moz-box-shadow: inset 4px 0px 0px #ccc;
+  box-shadow: inset 4px 0px 0px #ccc;
+}
+.list li.accept {
+  -webkit-box-shadow: inset 4px 0px 0px #009600;
+  -moz-box-shadow: inset 4px 0px 0px #009600;
+  box-shadow: inset 4px 0px 0px #009600;
+}
+.list li.cancel {
+  -webkit-box-shadow: inset 4px 0px 0px #e33100;
+  -moz-box-shadow: inset 4px 0px 0px #e33100;
+  box-shadow: inset 4px 0px 0px #e33100;
 }
 .list li,
 .list li a {
@@ -195,7 +211,7 @@ nav.groupbar > a.current {
 }
 .list li.light,
 .list li a.light {
-  background: #ddd;
+  background: #e5e5e5;
   -webkit-text-shadow: 0 1px 0 #eee;
   -moz-text-shadow: 0 1px 0 #eee;
   text-shadow: 0 1px 0 #eee;
@@ -221,7 +237,7 @@ nav.groupbar > a.current {
 .list li a small,
 .list li .right:not(.bubble),
 .list li a .right:not(.bubble) {
-  color: #666;
+  color: #555;
 }
 .list:not(.indented) li.dark,
 .list:not(.indented) li.theme,
@@ -242,9 +258,9 @@ button {
   -moz-border-radius: FORM-border-radius;
   border-radius: FORM-border-radius;
   color: #fff;
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
+  -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);
@@ -257,6 +273,27 @@ button:active {
   box-shadow: inset 0 0 128px rgba(0,0,0,0.25);
   border-color: none;
 }
+.button,
+button {
+  background-color: #0093d5;
+}
+.button.secondary,
+button.secondary {
+  color: #666 !important;
+  background-color: #ccc;
+}
+.button.accept,
+button.accept {
+  background-color: #009600;
+}
+.button.cancel,
+button.cancel {
+  background-color: #e33100;
+}
+.button[disabled],
+button[disabled] {
+  background-color: #000;
+}
 form label,
 .form label {
   color: #999;

src/stylesheets/css/Lungo.widgets.colour.css

@@ -1,134 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo.Widgets
- * @class Colour
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-a.grey,
-.grey {
-  background-color: #ccc;
-}
-a.dark-grey,
-.dark-grey {
-  background-color: #000;
-}
-a.red,
-.red {
-  background-color: #e33100;
-}
-a.lightgreen,
-.lightgreen {
-  background-color: #91bd09;
-}
-a.green,
-.green {
-  background-color: #009600;
-}
-a.blue,
-.blue {
-  background-color: #237fd7;
-}
-a.arcticblue,
-.arcticblue {
-  background-color: #2daebf;
-}
-a.orange,
-.orange {
-  background-color: #ff5c00;
-}
-a.purple,
-.purple {
-  background-color: #7b658d;
-}
-a.magenta,
-.magenta {
-  background-color: #a9014b;
-}
-a.pink,
-.pink {
-  background-color: #ff007f;
-}
-a.yellow,
-.yellow {
-  background-color: #ffb515;
-}
-a.twitter,
-.twitter:not(span) {
-  background-color: #35cdff;
-}
-a.facebook,
-.facebook:not(span) {
-  background-color: #3b5998;
-}
-li.grey {
-  -webkit-box-shadow: inset 4px 0px 0px #ccc;
-  -moz-box-shadow: inset 4px 0px 0px #ccc;
-  box-shadow: inset 4px 0px 0px #ccc;
-}
-li.dark-grey {
-  -webkit-box-shadow: inset 4px 0px 0px #000;
-  -moz-box-shadow: inset 4px 0px 0px #000;
-  box-shadow: inset 4px 0px 0px #000;
-}
-li.red {
-  -webkit-box-shadow: inset 4px 0px 0px #e33100;
-  -moz-box-shadow: inset 4px 0px 0px #e33100;
-  box-shadow: inset 4px 0px 0px #e33100;
-}
-li.lightgreen {
-  -webkit-box-shadow: inset 4px 0px 0px #91bd09;
-  -moz-box-shadow: inset 4px 0px 0px #91bd09;
-  box-shadow: inset 4px 0px 0px #91bd09;
-}
-li.green {
-  -webkit-box-shadow: inset 4px 0px 0px #009600;
-  -moz-box-shadow: inset 4px 0px 0px #009600;
-  box-shadow: inset 4px 0px 0px #009600;
-}
-li.blue {
-  -webkit-box-shadow: inset 4px 0px 0px #237fd7;
-  -moz-box-shadow: inset 4px 0px 0px #237fd7;
-  box-shadow: inset 4px 0px 0px #237fd7;
-}
-li.arcticblue {
-  -webkit-box-shadow: inset 4px 0px 0px #2daebf;
-  -moz-box-shadow: inset 4px 0px 0px #2daebf;
-  box-shadow: inset 4px 0px 0px #2daebf;
-}
-li.orange {
-  -webkit-box-shadow: inset 4px 0px 0px #ff5c00;
-  -moz-box-shadow: inset 4px 0px 0px #ff5c00;
-  box-shadow: inset 4px 0px 0px #ff5c00;
-}
-li.purple {
-  -webkit-box-shadow: inset 4px 0px 0px #7b658d;
-  -moz-box-shadow: inset 4px 0px 0px #7b658d;
-  box-shadow: inset 4px 0px 0px #7b658d;
-}
-li.magenta {
-  -webkit-box-shadow: inset 4px 0px 0px #a9014b;
-  -moz-box-shadow: inset 4px 0px 0px #a9014b;
-  box-shadow: inset 4px 0px 0px #a9014b;
-}
-li.pink {
-  -webkit-box-shadow: inset 4px 0px 0px #ff007f;
-  -moz-box-shadow: inset 4px 0px 0px #ff007f;
-  box-shadow: inset 4px 0px 0px #ff007f;
-}
-li.yellow {
-  -webkit-box-shadow: inset 4px 0px 0px #ffb515;
-  -moz-box-shadow: inset 4px 0px 0px #ffb515;
-  box-shadow: inset 4px 0px 0px #ffb515;
-}
-li.twitter {
-  -webkit-box-shadow: inset 4px 0px 0px #35cdff;
-  -moz-box-shadow: inset 4px 0px 0px #35cdff;
-  box-shadow: inset 4px 0px 0px #35cdff;
-}
-li.facebook {
-  -webkit-box-shadow: inset 4px 0px 0px #3b5998;
-  -moz-box-shadow: inset 4px 0px 0px #3b5998;
-  box-shadow: inset 4px 0px 0px #3b5998;
-}