Continuing to iterate on theming

server/files/javascript/semantic.js

@@ -109,7 +109,6 @@ semantic.ready = function() {
           name,
           value
         ;
-        console.log(lines);
         $.each(lines, function(index, line) {
           // clear whitespace
           line = $.trim(line);
@@ -128,31 +127,48 @@ semantic.ready = function() {
       },
 
       changeTheme: function(theme) {
-        if(theme === 'customize') {
-          // placeholder
-        }
-        else {
-          $.api({
-            url      : '/build/less/themes/{$theme}/{$type}s/{$element}.variables',
+        var
+          variableURL = '/build/less/themes/{$theme}/{$type}s/{$element}.variables',
+          overrideURL = '/build/less/themes/{$theme}/{$type}s/{$element}.overrides',
+          urlData     = {
+            theme   : theme,
+            type    : $themeDropdown.data('type'),
+            element : $themeDropdown.data('element')
+          }
+        ;
+        $themeDropdown
+          .api({
+            on       : 'now',
+            url      : variableURL,
             dataType : 'text',
-            urlData  : {
-              theme   : theme,
-              type    : $themeDropdown.data('type'),
-              element : $themeDropdown.data('element')
-            },
+            urlData  : urlData,
             success: function(content) {
               less.modifyVars( handler.less.parseFile(content) );
+              $themeDropdown
+                .api({
+                  on       : 'now',
+                  url      : overrideURL,
+                  dataType : 'text',
+                  urlData  : urlData,
+                  success: function(content) {
+                    if( $('style.override').size() > 0 ) {
+                      $('style.override').remove();
+                    }
+                    $('<style>' + content + '</style>')
+                      .addClass('override')
+                      .appendTo('body')
+                    ;
+                  }
+                })
+              ;
             }
-          });
-        }
+          })
+        ;
       }
 
     },
 
     create: {
-      tick: function() {
-
-      },
       examples: function(json) {
         var
           types      = json['Types'],

server/partials/header.html.eco

@@ -34,8 +34,8 @@
         </div>
       </div>
       <div class="ui primary button">
-        Download
-        <i class="download icon"></i>
+        Add to Download Package
+        <i class="add icon"></i>
       </div>
       <% end %>
     </div>

src/themes/chubby/elements/button.overrides

@@ -1,11 +1,8 @@
 /*******************************
            Overrides
 *******************************/
-@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
 
-.ui.button {
-  font-family: 'Open Sans Condensed', sans-serif;
-}
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
 
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {

src/themes/chubby/elements/button.variables

@@ -3,6 +3,8 @@
 --------------------*/
 
 /* Button Variables */
+@fontFamily: 'Source Sans Pro', sans-serif;
+
 @textTransform: none;
 @fontWeight: normal;
 @textColor: #333333;
@@ -43,8 +45,8 @@
 @mini: 0.7rem;
 @tiny: 0.75rem;
 @small: 0.8rem;
-@medium: 0.85rem;
-@large: 0.92rem;
-@big: 1rem;
-@huge: 1.125rem;
-@massive: 1.2rem;
+@medium: 0.92rem;
+@large: 1rem;
+@big: 1.125rem;
+@huge: 1.2rem;
+@massive: 1.3rem;