refactoring ui variables for colors

internal_packages/account-sidebar/lib/account-sidebar-tag-item.cjsx

@@ -5,7 +5,7 @@ React = require 'react'
 module.exports =
 AccountSidebarTagItem = React.createClass
   render: ->
-    unread = if @props.tag.unreadCount > 0 then <div className="unread">{@props.tag.unreadCount}</div> else []
+    unread = if @props.tag.unreadCount > 0 then <div className="unread item-count-box">{@props.tag.unreadCount}</div> else []
     classSet =  React.addons.classSet
       'item': true
       'item-tag': true

internal_packages/account-sidebar/stylesheets/account-sidebar.less

@@ -27,16 +27,9 @@
 
   .item-tag {
     .unread {
-      display: inline;
       float: right;
-      vertical-align: baseline;
-      background: @source-list-bg;
-      margin-top: floor(@line-height-large - @line-height-small)/2;
-      line-height: @line-height-small;
-      padding: @padding-xs-vertical @padding-xs-horizontal @padding-xs-vertical @padding-xs-horizontal;
       color: @source-list-active-bg;
-      border-radius: @border-radius-small;
-      font-weight: 500;
+      background: @source-list-bg;
     }
     img {
     }

internal_packages/thread-list/lib/thread-list-tabular.cjsx

@@ -34,10 +34,6 @@ ThreadListTabular = React.createClass
       <div tabIndex=1
            className="thread-list-container thread-list-tabular">
 
-        <div className="thread-list-headers">
-          {@_threadHeaders()}
-        </div>
-
         <div className="thread-rows">
           {@_threadRows()}
         </div>
@@ -72,17 +68,26 @@ ThreadListTabular = React.createClass
         LabelComponent = label.view
         <LabelComponent thread={thread} />
 
+    numMessages = (thread) ->
+      numMsg = thread.numMessages()
+      if numMsg < 1 then "" else numMsg
+
     c2 = new ThreadListColumn
       name: "Subject"
-      flex: 6
+      flex: 3
       resolver: (thread) ->
         <span>
-          <span className="subject">{subject(thread)}</span>&nbsp;&nbsp;&nbsp;
-          <span className="snippet">{thread.snippet}</span>
-          {labelComponents(thread)}
+          <span className="subject">{subject(thread)}</span>
+          <span className="message-count item-count-box">{numMessages(thread)}</span>
         </span>
 
     c3 = new ThreadListColumn
+      name: "Snippet"
+      flex: 4
+      resolver: (thread) ->
+        <span className="snippet">{thread.snippet}</span>
+
+    c4 = new ThreadListColumn
       name: "Date"
       flex: 1
       resolver: (thread, parentComponent) ->
@@ -90,15 +95,17 @@ ThreadListTabular = React.createClass
           {parentComponent.threadTime()}
         </span>
 
-    return [c0, c1, c2, c3]
+    return [c0, c1, c2, c3, c4]
 
   _threadHeaders: ->
-    for col in @state.columns
-      <div className="thread-list-header thread-list-column"
-           key={"header-#{col.name}"}
-           style={flex: "#{@_columnFlex()[col.name]}"}>
-        {col.name}
-      </div>
+    return <div></div>
+    # TODO: There's currently no styling for headers
+    # for col in @state.columns
+    #   <div className="thread-list-header thread-list-column"
+    #        key={"header-#{col.name}"}
+    #        style={flex: "#{@_columnFlex()[col.name]}"}>
+    #     {col.name}
+    #   </div>
 
   # The `numTags` attribute is only used to trigger a re-render of the
   # ThreadListTabularItem when a tag gets added or removed (like a star).

internal_packages/thread-list/stylesheets/thread-list.less

@@ -12,6 +12,11 @@
   -webkit-user-select: none;
   display: flex;
   position: relative;
+
+  .message-count {
+    color: @text-color-inverse;
+    background: @background-tertiary;
+  }
 }
 
 .thread-list-container {
@@ -110,7 +115,8 @@
 
   .thread-rows {
     overflow: auto;
-    padding-top: @font-size-base * 2; /* height of thread-list-headers*/
+    // Add back when when we re-implement thread-list-headers
+    // padding-top: @font-size-base * 2; /* height of thread-list-headers*/
   }
 
   .thread-list-column {

src/flux/models/thread.coffee

@@ -41,6 +41,9 @@ class Thread extends Model
   @naturalSortOrder: ->
     Thread.attributes.lastMessageTimestamp.descending()
 
+  # TODO Implement me
+  numMessages: -> Math.round(Math.random() * 5)
+
   fromJSON: (json) =>
     super(json)
     @unread = @isUnread()

static/mixins/common-ui-elements.less

@@ -0,0 +1,11 @@
+// A Mixin holding common UI elements.
+
+// A box to hold counts of things (like number of items in a tag, or
+// number of messages in a thread)
+.item-count-box {
+  display: inline;
+  padding: @padding-xs-vertical @padding-xs-horizontal @padding-xs-vertical @padding-xs-horizontal;
+  margin-top: floor(@line-height-large - @line-height-small)/2;
+  line-height: @line-height-small;
+  border-radius: @border-radius-small;
+}

static/type.less

@@ -96,10 +96,10 @@ mark,
 
 // Contextual colors
 .text-muted {
-  color: @text-muted;
+  color: @text-color-subtle;
 }
 .text-primary {
-  .text-emphasis-variant(@brand-primary);
+  .text-emphasis-variant(@accent-primary);
 }
 .text-success {
   .text-emphasis-variant(@state-success-text);
@@ -121,7 +121,7 @@ mark,
   // Given the contrast here, this is the only class to have its color inverted
   // automatically.
   color: #fff;
-  .bg-variant(@brand-primary);
+  .bg-variant(@accent-primary);
 }
 .bg-success {
   .bg-variant(@state-success-bg);
@@ -260,4 +260,4 @@ address {
   margin-bottom: @line-height-computed;
   font-style: normal;
   line-height: @line-height-base;
-}
+}

static/variables/ui-mixins.less

@@ -1,2 +1,3 @@
+@import "../mixins/common-ui-elements.less";
 @import "../mixins/text-emphasis.less";
 @import "../mixins/background-variant.less";

static/variables/ui-variables.less

@@ -1,57 +1,74 @@
-//
-// Variables
-// --------------------------------------------------
+// Color abstraction heirarcy:
+// 1. Hex code (#428bca)
+// 2. Common color name (@blue)
+// 3. Generic color descriptor (@accent-primary, @background-primary)
+// --------
+// 4. Generic usage descriptor (@input-background, @button-background)
+// 5. Application-specific usage (@unread-label-background)
 
-// Mostly drawn from Bootstrap's variables.less
+// Typography abstraction heirarcy
+// 1. Font-face (FaktPro)
+// 2. Common name (@bold, @italic)
+// 3. Generic font descriptor mixins (.bold, .italic, .h1, .h2)
+// --------
+// 4. Generic usage descriptor (.btn-text, .p-body)
+// 5. Application-specific usage (.message-list-h1, .salesforce-h1)
 
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
+//=============================== Colors ===============================//
+//== Brand colors
+@nilas-yellow:      #D5DC28;
+@nilas-yellow-dark: #A0C23A;
+@nilas-green:       #5CB346;
+@nilas-green-dark:  #078E46;
+@nilas-blue:        #11A1A2;
+@nilas-blue-dark:   #0F7982;
+@nilas-black:       #313435;
 
-@gray-base:              #0a0b0c;
-@gray-darker:            lighten(@gray-base, 13.5%); // #222
-@gray-dark:              lighten(@gray-base, 20%);   // #333
-@gray:                   lighten(@gray-base, 33.5%); // #555
-@gray-light:             lighten(@gray-base, 46.7%); // #777
-@gray-lighter:           lighten(@gray-base, 92.5%); // #eee
+//== Generic colors
+@black:        @nilas-black;
+@gray-base:    #0a0b0c;
+@gray-darker:  lighten(@gray-base, 13.5%); // #222
+@gray-dark:    lighten(@gray-base, 20%);   // #333
+@gray:         lighten(@gray-base, 33.5%); // #555
+@gray-light:   lighten(@gray-base, 46.7%); // #777
+@gray-lighter: lighten(@gray-base, 92.5%); // #eee
+@white:        #ffffff;
 
-@brand-primary:         #428bca;
-@brand-success:         #5cb85c;
-@brand-info:            #5bc0de;
-@brand-warning:         #f0ad4e;
-@brand-danger:          #d9534f;
+//== Color descriptors
+@accent-primary:   @nilas-blue;
+@accent-secondary: @nilas-yellow;
+
+@background-primary:   #ffffff;
+@background-secondary: #f6f6f6;
+@background-tertiary:  #6d7987;
+
+@info-color:    @nilas-blue-dark;
+@success-color: @nilas-green;
+@warning-color: #f0ad4e;
+@error-color:   #d9534f;
+@danger-color:  #d9534f;
 
 
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
+//============================= Typography =============================//
 
-//** Background color for `<body>`.
-@body-bg:               #fff;
-//** Global text color on `<body>`.
-@text-color:            @gray-dark;
-@text-muted:            @gray-light;
+@text-color: @black;
+@text-color-inverse: @white;
+@text-color-subtle: fadeout(@text-color, 50%);
 
-//** Global textual link color.
-@link-color:            @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color:      darken(@link-color, 15%);
-//** Link hover decoration.
-@link-hover-decoration: underline;
+@text-color-link: @nilas-blue;
+@text-color-link-hover: @nilas-blue-dark;
+@text-color-link-active: @nilas-blue-dark;
+
+@text-color-highlight: @black;
+@text-color-selected: @white;
+@text-color-info: @light-blue;
+@text-color-success: @green;
+@text-color-warning: #ff982d;
+@text-color-error: @red;
+@text-color-destructive: @red;
 
 
 
-//== Panels and Sidebars
-//
-//
-@panel-background-color: @gray-lighter;
-@toolbar-background-color: @gray-lighter;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
 @font-face {
   font-family: 'FaktPro';
   font-style: normal;
@@ -179,23 +196,23 @@
 @btn-default-border:             #ccc;
 
 @btn-primary-color:              #fff;
-@btn-primary-bg:                 @brand-primary;
+@btn-primary-bg:                 @accent-primary;
 @btn-primary-border:             darken(@btn-primary-bg, 5%);
 
 @btn-success-color:              #fff;
-@btn-success-bg:                 @brand-success;
+@btn-success-bg:                 @success-color;
 @btn-success-border:             darken(@btn-success-bg, 5%);
 
 @btn-info-color:                 #fff;
-@btn-info-bg:                    @brand-info;
+@btn-info-bg:                    @info-color;
 @btn-info-border:                darken(@btn-info-bg, 5%);
 
 @btn-warning-color:              #fff;
-@btn-warning-bg:                 @brand-warning;
+@btn-warning-bg:                 @warning-color;
 @btn-warning-border:             darken(@btn-warning-bg, 5%);
 
 @btn-danger-color:               #fff;
-@btn-danger-bg:                  @brand-danger;
+@btn-danger-bg:                  @danger-color;
 @btn-danger-border:              darken(@btn-danger-bg, 5%);
 
 @btn-link-disabled-color:        @gray-light;
@@ -381,17 +398,6 @@
 @unread-color: #009ec4; //!
 @action-color: @green;
 
-@text-color-highlight: @black;
-@text-color-selected: @white;
-@text-color-subtle: fadeout(@text-color, 50%);
-@text-color-inverse: white;
-@text-color-info: @light-blue;
-@text-color-link: @light-blue;
-@text-color-success: @green;
-@text-color-warning: #ff982d;
-@text-color-error: @red;
-@text-color-destructive: @red;
-
 @progress-bar-fill: @light-blue;
 @progress-bar-background: @light-gray;
 
@@ -462,4 +468,9 @@
 @standard-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
 @standard-shadow-up: 0 -1px 2px 0 rgba(0, 0, 0, 0.22);
 
-@btn-shadow: 0 1px 0.5px 0 rgba(0, 0, 0, 0.20);
+@btn-shadow: 0 1px 0.5px 0 rgba(0, 0, 0, 0.20);
+
+@body-bg: @white;
+//== Panels and Sidebars
+@panel-background-color: @gray-lighter;
+@toolbar-background-color: @gray-lighter;