compass-ui 0.0.3 → 0.0.4

data/.gitignore

@@ -1,9 +1,9 @@
+Gemfile.lock
 .bundle
 .sass-cache/
 *.swp
 *~
 .DS_Store
-bin/*
 *.gem
 demos/stylesheets/
 demos/.sass-cache

data/CHANGELOG.md

@@ -1,8 +1,23 @@
 # Compass-UI Changelog
 
-### 0.0.3 - extracted from the compass-bearing project
+### v0.0.4
 
-## 0.0.2 - part of the compass-bearing project
+- Equating smoothness with jquery-ui-base theme when installing icons
+- Changing default background-type to 'default' from 'flat'
+- Adding compass-ui executable and icon files
+- Removing Gemfile.lock from source control
+- Small updates to demos
+- Fix $ui-focus variables to default to same state as hover variables
+
+### v0.0.3 - extracted from the compass-bearing project
+
+- Fix for absolution tab borders
+- Adding background color when using background-image in jquery-ui-background
+- Breaking out state-focus into it's own set
+- Adding font-weight variables and reorganizing link-colors
+- Adding extractions from compass-bearing to initialize compass-ui project
+
+## v0.0.2 - part of the compass-bearing project
 
 - Switch to using image-url and relative theme url, instead of hard-coded images url
 - Made _compass-bearing the default for pulling in a jquery base theme
@@ -16,7 +31,7 @@
 - Changed jQuery UI theme variable naming scheme (from $jquery- variables to $ui-)
 - Moved dependencies from Gemfile to gemspec
 
-## 0.0.1 - previously part of the compass-bearing project
+## v0.0.1 - previously part of the compass-bearing project
 
 - Initial release
 - Unstable and no longer supported, please see subsequent versions or pull from the Github repository. 

data/README.md

@@ -26,6 +26,22 @@ Then, include the theme when needed:
 @include absolution-theme;
 ```
 
+## Installing Theme Icons 
+
+Icon sets and backgrounds for the available themes can be copied to your project using the compass-ui executable. 
+
+      compass-ui help [TASK]                   # Describe available tasks or one specific task
+      compass-ui install THEME [-d DIRECTORY]  # Installs the icons from one of the available themes.
+      compass-ui list                          # Lists the available icon themes.
+
+By default, they will be copied to an 'images' directory in your current working directory. You can, however, pass a directory option to override the default. 
+
+E.g. the following command will install the smoothness icons to the 'app/assets/images/smoothness' directory in your current working directory. 
+
+```bash
+$ compass-ui install smoothness -d "app/assets/images"
+```
+
 ## Existing Themes
 
 * jQuery UI - Base Theme (import with `@import "compass-ui/theme/jquery-ui-base"`).
@@ -60,6 +76,175 @@ Place this after your variable overrides.
 
 See the demos for a more detailed example. 
 
+## jQuery UI Base Variables 
+
+**A note on background types:**
+
+> The *-background-type can currently be set as 'default' or 'image'. If set to 'default', it will use whatever you set the background to as-is. If set to 'image', it will set the `background-color` to the given color and use the compass `background-image` function to create a background-image. For example, when using linear-gradient, you'll want to use the 'image' type, but when explicity setting a background image in the background, you'll want to use the 'default' type. 
+
+Examples: 
+
+```sass
+// Using the default background type to explicitly set a background
+$ui-header-background: #cccccc image-url("#{$ui-images-url}ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
+$ui-header-background-type: default;
+
+// Using the image background type to create a linear gradient 
+$ui-default-background-color: #e6e6e6;
+$ui-default-background: linear-gradient(#ededed,#f1f1f1);
+$ui-default-background-type: image;
+```
+
+For convenience, here are the variables that can be overridden to create a new theme: 
+
+```sass
+// Default Radius
+$ui-border-radius: 5px;
+
+// Default Fonts
+$ui-font-family: Verdana, Arial, sans-serif;
+
+$ui-fixed-font-family: "andale mono", "lucida console", monospace;
+
+$ui-font-size: 1.1em;
+
+$ui-widget-font-size: 1em;
+
+$ui-form-font-size: 1em;
+
+$ui-font-color: #222222;
+
+// ------------------------------------------
+// Icon Images 
+// ------------------------------------------
+
+// Location of the icons and other theme related images. Note that this 
+// is relative to the images directory as defined in the compass config.rb file. 
+$ui-images-url: "jquery-ui-base/";
+
+// Individual icon images that relate to each of the jQuery UI states 
+$ui-icons: "ui-icons_222222_256x240.png";
+$ui-icons-content: $ui-icons;
+$ui-icons-header: $ui-icons;
+$ui-icons-default: "ui-icons_888888_256x240.png";
+$ui-icons-hover: "ui-icons_454545_256x240.png";
+$ui-icons-focus: $ui-icons-hover;
+$ui-icons-active: "ui-icons_454545_256x240.png";
+$ui-icons-highlight: "ui-icons_2e83ff_256x240.png";
+$ui-icons-error: "ui-icons_cd0a0a_256x240.png";
+
+// ------------------------------------------
+// Color Scheme
+// ------------------------------------------
+
+// Content
+$ui-content-border-width: 1px;
+$ui-content-border-style: solid;
+$ui-content-border-color: #aaaaaa;
+$ui-content-color: $ui-font-color;
+$ui-content-background-color: $ui-white;
+$ui-content-background: $ui-white;
+$ui-content-background-type: default;
+$ui-content-link-color: $ui-content-color;
+
+// Header
+$ui-header-border-width: 1px;
+$ui-header-border-style: solid;
+$ui-header-border-color: #aaaaaa;
+$ui-header-color: $ui-font-color;
+$ui-header-link-color: $ui-header-color;
+$ui-header-font-weight: bold;
+$ui-header-background-color: #cccccc;
+$ui-header-background: linear-gradient(#e2e2e2,#cccccc);
+$ui-header-background-type: image;
+
+// State-Default
+$ui-default-border-width: 1px;
+$ui-default-border-style: solid;
+$ui-default-border-color: #d3d3d3;
+$ui-default-color: #555555;
+$ui-default-link-color: $ui-default-color;
+$ui-default-font-weight: normal;
+$ui-default-background-color: #e6e6e6;
+$ui-default-background: linear-gradient(#ededed,#f1f1f1);
+$ui-default-background-type: image;
+
+// State-Hover
+$ui-hover-border-width: 1px;
+$ui-hover-border-style: solid;
+$ui-hover-border-color: #999999;
+$ui-hover-color: #212121;
+$ui-hover-link-color: $ui-hover-color;
+$ui-hover-font-weight: normal;
+$ui-hover-background-color: #dadada;
+$ui-hover-background: linear-gradient(#e4e4e4,#eaeaea);
+$ui-hover-background-type: image;
+
+// State-Focus
+$ui-focus-border-width: $ui-hover-border-width;
+$ui-focus-border-style: $ui-hover-border-style;
+$ui-focus-border-color: $ui-hover-border-color;
+$ui-focus-color: $ui-hover-color;
+$ui-focus-link-color: $ui-hover-color;
+$ui-focus-font-weight: $ui-hover-font-weight;
+$ui-focus-background-color: $ui-hover-background-color;
+$ui-focus-background: $ui-hover-background;
+$ui-focus-background-type: $ui-hover-background-type;
+
+// State-Active
+$ui-active-border-width: 1px;
+$ui-active-border-style: solid;
+$ui-active-border-color: #aaaaaa;
+$ui-active-color: #212121;
+$ui-active-link-color: $ui-active-color;
+$ui-active-font-weight: normal;
+$ui-active-background-color: #ffffff;
+$ui-active-background: linear-gradient(#fefefe,#ffffff);
+$ui-active-background-type: image;
+
+// State-Highlight
+$ui-highlight-border-width: 1px;
+$ui-highlight-border-style: solid;
+$ui-highlight-border-color: #fcefa1;
+$ui-highlight-color: #363636;
+$ui-highlight-link-color: $ui-highlight-color;
+$ui-highlight-background-color: #fbf9ee;
+$ui-highlight-background: linear-gradient(#fcfaf1, #fbfaf3);
+$ui-highlight-background-type: image;
+
+// State-Error
+$ui-error-border-width: 1px;
+$ui-error-border-style: solid;
+$ui-error-border-color: #cd0a0a;
+$ui-error-color: #cd0a0a;
+$ui-error-link-color: $ui-default-color;
+$ui-error-background-color: #fef1ec;
+$ui-error-background: linear-gradient(#fef6f3, #fef8f6);
+$ui-error-background-type: image;
+
+// State-Primary
+$ui-priority-font-weight: bold;
+
+// Priority-Secondary
+$ui-priority-secondary-opacity: .7;
+$ui-priority-secondary-font-weight: normal;
+
+// State-Disabled
+$ui-disabled-opacity: .35;
+
+// Overlay
+$ui-overlay-opacity: .3;
+$ui-overlay-background-color: #aaaaaa;
+$ui-overlay-background: $ui-overlay-background-color;
+$ui-overlay-background-type: default;
+
+// Shadow
+$ui-shadow-opacity: .3;
+$ui-shadow-background-color: #aaaaaa;
+$ui-shadow-background: $ui-shadow-background-color;
+$ui-shadow-background-type: default;
+```
+
 ## Attribution
 Absolution Theme, Copyright 2010, [Michael Vanderheeren][mvan]
 

data/bin/compass-ui

@@ -0,0 +1,37 @@
+#!/usr/bin/env ruby
+require 'thor'
+
+class CompassUI < Thor
+  include Thor::Actions
+  
+  def self.source_root
+    File.join(File.dirname(__FILE__), '..', 'templates', 'images')
+  end
+
+  desc "install THEME [-d DIRECTORY]", "Installs the icons from one of the available themes."
+  method_options %w(directory -d) => :string
+  def install(theme)
+    # smoothness and jquery-ui use the same set
+    theme_name = theme
+    theme = (theme == 'smoothness' ? 'jquery-ui-base' : theme)
+    install_dir = options[:directory] 
+    install_dir ||= 'images'
+    source_dir = File.join(CompassUI.source_root, theme)
+    if File.exists?(source_dir) and File.directory?(source_dir)
+      directory(theme, File.join(install_dir, theme_name))
+    else
+      say "Unable to find theme: #{theme}!", Thor::Shell::Color::RED
+    end
+  end
+
+  desc "list", "Lists the available icon themes."
+  def list
+    say 'Available icon themes:', Thor::Shell::Color::CYAN
+    Dir.foreach(CompassUI.source_root) do |dir|
+      next if ['.','..'].include?(dir)
+      say dir unless !File.directory?(File.join(CompassUI.source_root, dir))
+    end
+  end
+end
+
+CompassUI.start

data/compass-ui.gemspec

@@ -18,6 +18,6 @@ Gem::Specification.new do |s|
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
 
-  s.add_dependency 'compass', [">= 0.11.1"]
+  s.add_runtime_dependency 'compass', [">= 0.11.1"]
 
 end

data/demos/index.html

@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta http-equiv="Cache-Control" content="no-cache" />
+
     <title>Compass-UI</title>
     <link type="text/css" href="stylesheets/default.css" rel="stylesheet" />	
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
@@ -14,6 +16,32 @@
       <div id="header">
         <h1>Compass-UI Theme Tests</h1>
       </div>
+      <div id="sidebar">
+        <h2 id="showing">
+          Currently Showing:
+          <span>jQuery-UI Base Theme</span>
+        </h2>
+
+        <div id="toggle-css">
+          <strong>Choose a theme to test:</strong> 
+          <a href="#" rel="stylesheets/default.css"
+            data-summary="The jQuery UI Base Theme from Compass-UI">jQuery Base Theme</a>
+          <a href="#" rel="stylesheets/absolution.css"
+            data-summary="The Absolution Theme from Michaël Vanderheeren">Absolution Theme</a>
+          <a href="#" rel="stylesheets/smoothness.css"
+            data-summary="The Smoothness Theme from the jQuery UI Themeroller">Smoothness Theme</a>
+          <a href="#" rel="stylesheets/dot-luv.css"
+            data-summary="The gaudy Dot Luv Theme from the jQuery UI Themeroller">Dot Luv Theme</a>
+          <a href="#" rel="stylesheets/color-test.css"
+            data-summary="An external color test to demonstrate working with Compass-UI outside the gem itself">Color Test</a>
+        </div>
+
+        <p>
+          <strong>Resources:</strong>
+          <a href="https://github.com/patrickward/compass-ui">Github Project</a>
+        </p>
+
+      </div>
       <div id="content">
         <p>
           Compass-UI is a jQuery UI theme builder for the Compass CSS authoring framework. 
@@ -38,27 +66,6 @@
         <div id="demo-combinations">Loading...</div>
         <div id="demo-form">Loading...</div>
       </div>
-      <div id="sidebar">
-        <h2 id="showing">
-          Currently Showing: <br>
-          <span>jQuery-UI Base Theme</span>
-        </h2>
-
-        <div id="toggle-css">
-          <strong>Choose a theme to test:</strong> 
-          <a href="#" rel="stylesheets/default.css">jQuery Base Theme</a>
-          <a href="#" rel="stylesheets/absolution.css">Absolution Theme</a>
-          <a href="#" rel="stylesheets/smoothness.css">Smoothness Theme</a>
-          <a href="#" rel="stylesheets/dot-luv.css">Dot Luv Theme</a>
-          <a href="#" rel="stylesheets/color-test.css">Color Test</a>
-        </div>
-
-        <p>
-          <strong>Resources:</strong>
-          <a href="https://github.com/patrickward/compass-ui">Github Project</a>
-        </p>
-
-      </div>
     </div>
   </body>
 </html>

data/demos/js/demo.js

@@ -176,14 +176,19 @@ $(function(){
   // Switch styles 
   $('#toggle-css a').click(function() {
     var name = $(this).html();
+    var summary = $(this).attr('data-summary');
+    summary = name + '<br><span class="summary">' + summary + '</span>';
     $('link[rel=stylesheet]').attr({href: $(this).attr('rel') + '?' + Date.now() });
     $('h2#showing span')
       .fadeOut('slow', function() {
         $(this)
-          .html(name)
+          .html(summary)
           .fadeIn('slow');
       });
   });
 
+  // trigger a click on the first theme choice
+  $('#toggle-css a:first').click();
+
 });
 

data/demos/sass/_base.scss

@@ -1,5 +1,5 @@
 // @import "normalize";
 @import "compass/reset";
-@import "blueprint/grid";
+// @import "blueprint/grid";
 @import "demo";
 

data/demos/sass/_demo.scss

@@ -6,18 +6,29 @@ $test-blue-dark: #0064CD;
 $test-red: #9D261D;
 $test-orange: #F89406;
 $test-green: #46A546;
+$test-green-light: lighten($test-green, 45%);
+$test-green-medium: lighten($test-green, 30%);
+$test-green-dark: darken($test-green, 18%);
 
 body{ 
-  font: 62.5% Arial, Helvetica, sans-serif;
-  margin: 20px 0;
+  font: 62.5% "Trebuchet MS", Helvetica, Arial, sans-serif;
+  // font: 100% "Trebuchet MS", Helvetica, sans-serif;
 }
 
 
 #container {
-  @include container;
+  // @include container;
+  margin: 20px auto;
+  // width: 60%;
+  width: 90%;
+  max-width: 960px;
 
   #header, #footer {
-    @include column(24, true);
+    // @include column(24, true);
+    margin: 0 auto 20px; 
+    // width: 93.75%; /* 900px / 960px */
+    width: 100%;
+
     background-color: $test-blue-dark;
     @include background-image(linear-gradient($test-blue, $test-blue-dark));
     @include border-radius(5px);
@@ -29,6 +40,7 @@ body{
       color: white;
       margin: 6px;
       padding: 10px 0;
+      text-transform: uppercase;
     }
     
   }
@@ -41,12 +53,16 @@ body{
   // }
 
   #content {
-    @include column(18);
+    // @include column(18);
     padding-top: 10px;
+    float: left; 
+    width: 80%; /* 566px / 900px */
   }
 
   #sidebar {
-    @include column(6, true);
+    // @include column(6, true);
+    float: right;
+    width: 20%; /* 331px / 900px */
 
     a {
       display: block;
@@ -65,6 +81,21 @@ body{
   }
 }
 
+// media queries
+
+@media screen and (max-width: 768px) {
+  #container {
+    margin: 20px;
+    width: auto;
+
+    #sidebar, #content, #header, #footer {
+      margin: 0 0 20px;
+      width: 100%;
+    }
+  }
+}
+
+
 .demoHeaders { 
   margin-top: 2em; 
   margin-bottom: 1em;
@@ -102,14 +133,18 @@ h2 {
 
 h2#showing {
   @include border-radius(5px);
-  // @include background-image(linear-gradient($test-blue, $test-blue-dark));
-  // @include background-image(linear-gradient(lighten($test-orange, 20%), $test-orange));
   background-color: $test-green;
-  @include background-image(linear-gradient(lighten($test-green, 20%), $test-green));
-  color: darken($test-green, 18%);
+  @include background-image(linear-gradient($test-green-medium, $test-green));
+  color: $test-green-dark;
   padding: 0.9em;
   span {
     color: white;
+    display: block;
+  }
+  span.summary {
+    font-size: 0.7em;
+    color: #ffffff;
+    padding-top: 6px;
   }
 }
 

data/lib/compass-ui/version.rb

@@ -1,3 +1,3 @@
 module CompassUI
-  VERSION = '0.0.3'
+  VERSION = '0.0.4'
 end

data/stylesheets/compass-ui/jquery-ui/_theme.scss

@@ -36,8 +36,10 @@
   @include jquery-ui-overlays;
 }
 
-@mixin jquery-ui-background($background-color, $background, $type: flat) {
-  @if $type == flat {
+@mixin jquery-ui-background($background-color, $background, $type: default) {
+  @if $type == default {
+    background: $background;
+  } @else if $type == flat {
     background: $background;
   } @else {
     background: $background-color;

data/stylesheets/compass-ui/theme/_absolution.scss

@@ -73,10 +73,10 @@ $ui-content-border-color: #a9a9a9;
 $ui-content-color: #333333;
 $ui-content-link-color: $ui-content-color;
 $ui-content-background-color: #fdfdfd;
-// If the background is flat, add a full background description: 
+// If the background is default, add a full background description: 
 // $ui-content-background: #ffffff url(...);
 $ui-content-background: linear-gradient($ui-content-background-color,#ececec);
-$ui-content-background-type: gradient;
+$ui-content-background-type: image;
 
 // header
 $ui-header-border-color: $ui-content-border-color;
@@ -89,7 +89,7 @@ $ui-header-background: $ui-content-background;
 $ui-titlebar-color: #ffffff;
 $ui-titlebar-background-color: #4c4c4e;
 $ui-titlebar-background: linear-gradient($ui-titlebar-background-color, #282425);
-$ui-titlebar-background-type: gradient;
+$ui-titlebar-background-type: image;
 
 
 // state-default
@@ -118,7 +118,7 @@ $ui-highlight-border-color: #8b9fc2;
 $ui-highlight-color: #363636;
 $ui-highlight-background-color: #7cc5e3;
 $ui-highlight-background: $ui-highlight-background-color;
-$ui-highlight-background-type: flat;
+$ui-highlight-background-type: default;
 $ui-highlight-link-color: $ui-highlight-color;
 
 // state-error
@@ -126,7 +126,7 @@ $ui-error-border-color: #953737;
 $ui-error-color: #363636;
 $ui-error-background-color: #f35757;
 $ui-error-background: $ui-error-background-color; 
-$ui-error-background-type: flat;
+$ui-error-background-type: default;
 $ui-error-link-color: $ui-error-color;
 
 // state-primary
@@ -141,11 +141,11 @@ $ui-disabled-opacity: .35;
 $ui-overlay-opacity: .3;
 $ui-overlay-background-color: #aaaaaa;
 $ui-overlay-background: linear-gradient($ui-overlay-background-color,adjust-lightness($ui-overlay-background-color, -5));
-$ui-overlay-background-type: gradient;
+$ui-overlay-background-type: image;
 
 // shadow
 $ui-shadow-opacity: .3;
 $ui-shadow-background-color: #aaaaaa;
 $ui-shadow-background: linear-gradient($ui-shadow-background-color,adjust-lightness($ui-shadow-background-color, -5));
-$ui-shadow-background-type: gradient;
+$ui-shadow-background-type: image;
 

data/stylesheets/compass-ui/theme/_dot-luv.scss

@@ -42,7 +42,7 @@ $ui-content-border-color: #000000;
 $ui-content-color: $ui-font-color;
 $ui-content-background-color: #111111;
 $ui-content-background: #111111 image-url("#{$ui-images-url}ui-bg_gloss-wave_20_111111_500x100.png") 50% top repeat-x;
-$ui-content-background-type: flat;
+$ui-content-background-type: default;
 $ui-content-link-color: $ui-content-color;
 
 // Header
@@ -50,7 +50,7 @@ $ui-header-border-color: #0b3e6f;
 $ui-header-color: #f6f6f6; 
 $ui-header-background-color: #0b3e6f;
 $ui-header-background: #0b3e6f image-url("#{$ui-images-url}ui-bg_diagonals-thick_15_0b3e6f_40x40.png") 50% 50% repeat;
-$ui-header-background-type: flat;
+$ui-header-background-type: default;
 $ui-header-link-color: $ui-header-color;
 
 // State-Default
@@ -58,7 +58,7 @@ $ui-default-border-color: #333333;
 $ui-default-color: #ffffff;
 $ui-default-background-color: #333333;
 $ui-default-background: #333333 image-url("#{$ui-images-url}ui-bg_dots-small_20_333333_2x2.png") 50% 50% repeat;
-$ui-default-background-type: flat;
+$ui-default-background-type: default;
 $ui-default-link-color: $ui-default-color;
 
 // State-Hover
@@ -66,7 +66,7 @@ $ui-hover-border-color: #222222;
 $ui-hover-color: #ffffff;
 $ui-hover-background-color: #00498f;
 $ui-hover-background: #00498f image-url("#{$ui-images-url}ui-bg_dots-small_40_00498f_2x2.png") 50% 50% repeat;
-$ui-hover-background-type: flat;
+$ui-hover-background-type: default;
 $ui-hover-link-color: $ui-hover-color;
 
 // State-Active
@@ -74,7 +74,7 @@ $ui-active-border-color: #096ac8;
 $ui-active-color: #75abff;
 $ui-active-background-color: #292929;
 $ui-active-background: #292929 image-url("#{$ui-images-url}ui-bg_flat_40_292929_40x100.png") 50% 50% repeat-x;
-$ui-active-background-type: flat;
+$ui-active-background-type: default;
 $ui-active-link-color: $ui-active-color;
 
 // State-Highlight
@@ -82,7 +82,7 @@ $ui-highlight-border-color: #052f57;
 $ui-highlight-color: #ffffff;
 $ui-highlight-background-color: #0b58a2;
 $ui-highlight-background: #0b58a2 image-url("#{$ui-images-url}ui-bg_dots-medium_30_0b58a2_4x4.png") 50% 50% repeat;
-$ui-highlight-background-type: flat;
+$ui-highlight-background-type: default;
 $ui-highlight-link-color: $ui-highlight-color;
 
 // State-Error
@@ -90,7 +90,7 @@ $ui-error-border-color: #cd0a0a;
 $ui-error-color: #ffffff;
 $ui-error-background-color: #a32d00;
 $ui-error-background: #a32d00 image-url("#{$ui-images-url}ui-bg_dots-small_30_a32d00_2x2.png") 50% 50% repeat;
-$ui-error-background-type: flat;
+$ui-error-background-type: default;
 $ui-error-link-color: $ui-default-color;
 
 // State-Primary
@@ -105,11 +105,11 @@ $ui-disabled-opacity: .35;
 $ui-overlay-opacity: .3;
 $ui-overlay-background-color: #aaaaaa;
 $ui-overlay-background: $ui-overlay-background-color;
-$ui-overlay-background-type: flat;
+$ui-overlay-background-type: default;
 
 // Shadow
 $ui-shadow-opacity: .3;
 $ui-shadow-background-color: #aaaaaa;
 $ui-shadow-background: $ui-shadow-background-color;
-$ui-shadow-background-type: flat;
+$ui-shadow-background-type: default;
 

data/stylesheets/compass-ui/theme/_jquery-ui-base.scss

@@ -23,14 +23,13 @@ $ui-widget-font-size: 1em !default;
 
 $ui-form-font-size: 1em !default;
 
-
 $ui-font-color: #222222 !default;
 
 // ------------------------------------------
 // Icon Images 
 // ------------------------------------------
 
-// Location of the icons and other them related images. Note that this 
+// Location of the icons and other theme related images. Note that this 
 // is relative to the images directory as defined in the compass config.rb file. 
 $ui-images-url: "jquery-ui-base/" !default;
 
@@ -49,7 +48,6 @@ $ui-icons-error: "ui-icons_cd0a0a_256x240.png" !default;
 // Color Scheme
 // ------------------------------------------
 
-
 // Content
 $ui-content-border-width: 1px !default;
 $ui-content-border-style: solid !default;
@@ -57,7 +55,7 @@ $ui-content-border-color: #aaaaaa !default;
 $ui-content-color: $ui-font-color !default;
 $ui-content-background-color: $ui-white !default;
 $ui-content-background: $ui-white !default;
-$ui-content-background-type: flat !default;
+$ui-content-background-type: default !default;
 $ui-content-link-color: $ui-content-color !default;
 
 // Header
@@ -69,7 +67,7 @@ $ui-header-link-color: $ui-header-color !default;
 $ui-header-font-weight: bold !default;
 $ui-header-background-color: #cccccc !default;
 $ui-header-background: linear-gradient(#e2e2e2,#cccccc) !default;
-$ui-header-background-type: gradient !default;
+$ui-header-background-type: image !default;
 
 // State-Default
 $ui-default-border-width: 1px !default;
@@ -80,7 +78,7 @@ $ui-default-link-color: $ui-default-color !default;
 $ui-default-font-weight: normal !default;
 $ui-default-background-color: #e6e6e6 !default;
 $ui-default-background: linear-gradient(#ededed,#f1f1f1) !default;
-$ui-default-background-type: gradient !default;
+$ui-default-background-type: image !default;
 
 // State-Hover
 $ui-hover-border-width: 1px !default;
@@ -91,18 +89,18 @@ $ui-hover-link-color: $ui-hover-color !default;
 $ui-hover-font-weight: normal !default;
 $ui-hover-background-color: #dadada !default;
 $ui-hover-background: linear-gradient(#e4e4e4,#eaeaea) !default;
-$ui-hover-background-type: gradient !default;
+$ui-hover-background-type: image !default;
 
 // State-Focus
-$ui-focus-border-width: 1px !default;
-$ui-focus-border-style: solid !default;
-$ui-focus-border-color: #999999 !default;
-$ui-focus-color: #212121 !default;
+$ui-focus-border-width: $ui-hover-border-width !default;
+$ui-focus-border-style: $ui-hover-border-style !default;
+$ui-focus-border-color: $ui-hover-border-color !default;
+$ui-focus-color: $ui-hover-color !default;
 $ui-focus-link-color: $ui-hover-color !default;
-$ui-focus-font-weight: normal !default;
-$ui-focus-background-color: #dadada !default;
-$ui-focus-background: linear-gradient(#e4e4e4,#eaeaea) !default;
-$ui-focus-background-type: gradient !default;
+$ui-focus-font-weight: $ui-hover-font-weight !default;
+$ui-focus-background-color: $ui-hover-background-color !default;
+$ui-focus-background: $ui-hover-background !default;
+$ui-focus-background-type: $ui-hover-background-type !default;
 
 // State-Active
 $ui-active-border-width: 1px !default;
@@ -113,7 +111,7 @@ $ui-active-link-color: $ui-active-color !default;
 $ui-active-font-weight: normal !default;
 $ui-active-background-color: #ffffff !default;
 $ui-active-background: linear-gradient(#fefefe,#ffffff) !default;
-$ui-active-background-type: gradient !default;
+$ui-active-background-type: image !default;
 
 // State-Highlight
 $ui-highlight-border-width: 1px !default;
@@ -123,7 +121,7 @@ $ui-highlight-color: #363636 !default;
 $ui-highlight-link-color: $ui-highlight-color !default;
 $ui-highlight-background-color: #fbf9ee !default;
 $ui-highlight-background: linear-gradient(#fcfaf1, #fbfaf3) !default;
-$ui-highlight-background-type: gradient !default;
+$ui-highlight-background-type: image !default;
 
 // State-Error
 $ui-error-border-width: 1px !default;
@@ -133,7 +131,7 @@ $ui-error-color: #cd0a0a !default;
 $ui-error-link-color: $ui-default-color !default;
 $ui-error-background-color: #fef1ec !default;
 $ui-error-background: linear-gradient(#fef6f3, #fef8f6) !default;
-$ui-error-background-type: gradient !default;
+$ui-error-background-type: image !default;
 
 // State-Primary
 $ui-priority-font-weight: bold !default;
@@ -149,12 +147,12 @@ $ui-disabled-opacity: .35 !default;
 $ui-overlay-opacity: .3 !default;
 $ui-overlay-background-color: #aaaaaa !default;
 $ui-overlay-background: $ui-overlay-background-color !default;
-$ui-overlay-background-type: flat !default;
+$ui-overlay-background-type: default !default;
 
 // Shadow
 $ui-shadow-opacity: .3 !default;
 $ui-shadow-background-color: #aaaaaa !default;
 $ui-shadow-background: $ui-shadow-background-color !default;
-$ui-shadow-background-type: flat !default;
+$ui-shadow-background-type: default !default;
 
 

data/stylesheets/compass-ui/theme/_smoothness.scss

@@ -11,25 +11,25 @@
 
 // // Header
 $ui-header-background: #cccccc image-url("#{$ui-images-url}ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
-$ui-header-background-type: flat;
+$ui-header-background-type: default;
 
 // State-Default
 $ui-default-background: $ui-default-background-color image-url("#{$ui-images-url}ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
-$ui-default-background-type: flat;
+$ui-default-background-type: default;
 
 // State-Hover
 $ui-hover-background: $ui-hover-background-color image-url("#{$ui-images-url}ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x; 
-$ui-hover-background-type: flat;
+$ui-hover-background-type: default;
 
 // State-Active
 $ui-active-background: #ffffff image-url("#{$ui-images-url}ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; 
-$ui-active-background-type: flat;
+$ui-active-background-type: default;
 
 // State-Highlight
 $ui-highlight-background: #fbf9ee image-url("#{$ui-images-url}ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
-$ui-highlight-background-type: flat;
+$ui-highlight-background-type: default;
 
 // State-Error
 $ui-error-background: #fef1ec image-url("#{$ui-images-url}ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
-$ui-error-background-type: flat;
+$ui-error-background-type: default;
 

data/stylesheets/compass-ui/theme/absolution/_autocomplete.scss

@@ -23,10 +23,10 @@
     border: 1px solid #a9a9a9;
 
     @include border-radius(5px);
-    @include jquery-ui-background(#eff0f0, linear-gradient(#eff0f0, #ffffff), gradient);
+    @include jquery-ui-background(#eff0f0, linear-gradient(#eff0f0, #ffffff), image);
     &:hover, 
     &:focus {
-      @include jquery-ui-background(#dfe0e1, linear-gradient(#dfe0e1, #ffffff), gradient);
+      @include jquery-ui-background(#dfe0e1, linear-gradient(#dfe0e1, #ffffff), image);
     }
   }
 
@@ -35,7 +35,7 @@
     border-width: $ui-default-border-width;
     border-style: $ui-default-border-style;
     border-color: $ui-default-border-color;
-    @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient);
+    @include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
   }
 
 }

data/stylesheets/compass-ui/theme/absolution/_datepicker.scss

@@ -20,19 +20,19 @@
       top: 4px;
       border: 1px solid #000000;
       cursor: pointer; 
-      @include jquery-ui-background(#6a6b6e, linear-gradient(#6a6b6e, #3e3e3e), gradient);
+      @include jquery-ui-background(#6a6b6e, linear-gradient(#6a6b6e, #3e3e3e), image);
       color: #ffffff;
       &:hover {
         color: $ui-hover-color;
         border-width: $ui-hover-border-width;
         border-style: $ui-hover-border-style;
         border-color: $ui-hover-border-color;
-        @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, gradient);
+        @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, image);
       }
       &:active {
         color: $ui-active-color;
         border-color: $ui-active-border-color;
-        @include jquery-ui-background($ui-active-background-color, $ui-active-background, gradient);
+        @include jquery-ui-background($ui-active-background-color, $ui-active-background, image);
       }
     }
 
@@ -58,7 +58,7 @@
         border-color: $ui-default-border-color;
         @include border-radius(5px);
         color: $ui-default-color;
-        @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient);
+        @include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
       }
 
       .ui-state-focus, 
@@ -67,7 +67,7 @@
         border-color: $ui-default-border-color;
         @include border-radius(5px);
         color: $ui-default-color;
-        @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient);
+        @include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
       }
 
       .ui-state-hover,
@@ -76,7 +76,7 @@
         border-color: $ui-hover-border-color;
         @include border-radius(5px);
         color: $ui-hover-color;
-        @include jquery-ui-background($ui-default-background-color, $ui-hover-background, gradient);
+        @include jquery-ui-background($ui-default-background-color, $ui-hover-background, image);
       }
 
       .ui-state-active,
@@ -85,7 +85,7 @@
         border-color: $ui-active-border-color;
         @include border-radius(5px);
         color: $ui-active-color;
-        @include jquery-ui-background($ui-default-background-color, $ui-active-background, gradient);
+        @include jquery-ui-background($ui-default-background-color, $ui-active-background, image);
       }
 
     }

data/stylesheets/compass-ui/theme/absolution/_dialog.scss

@@ -41,7 +41,7 @@
 
       .ui-dialog-titlebar-close {
         border-color: #000000;
-        @include jquery-ui-background(#6a6b6e, linear-gradient(#6a6b6e, #3e3e3e), gradient);
+        @include jquery-ui-background(#6a6b6e, linear-gradient(#6a6b6e, #3e3e3e), image);
         color: $ui-titlebar-color;
 
         .ui-icon {

data/stylesheets/compass-ui/theme/absolution/_slider.scss

@@ -4,15 +4,15 @@
       color: $ui-default-color;
       border-color: $ui-default-border-color;
       
-      @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient);
+      @include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
 
       &:hover {
         border-color: #b8b8b8;
-        @include jquery-ui-background(#ffffff, linear-gradient(#ffffff, #cacbcc), gradient);
+        @include jquery-ui-background(#ffffff, linear-gradient(#ffffff, #cacbcc), image);
       }
       &:hover {
         border-color: #b8b8b8;
-        @include jquery-ui-background(#cacbcc, linear-gradient(#cacbcc, #ffffff), gradient);
+        @include jquery-ui-background(#cacbcc, linear-gradient(#cacbcc, #ffffff), image);
       }
     }
   }
@@ -25,7 +25,7 @@
     }
     .ui-widget-header {
       color: #ffffff;
-      @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, gradient);
+      @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, image);
     }
 
     .ui-widget-header { font-weight: bold; }
@@ -39,7 +39,7 @@
     }
     .ui-widget-header {
       color: #ffffff;
-      @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, gradient);
+      @include jquery-ui-background($ui-hover-background-color, $ui-hover-background, image);
     }
 
     .ui-widget-header { font-weight: bold; }

data/stylesheets/compass-ui/theme/absolution/_tabs.scss

@@ -34,13 +34,13 @@
 
         &.ui-state-hover {
           color: inherit;
-          @include jquery-ui-background(#dadada, linear-gradient(#dadada, #b0b0b0), gradient);
+          @include jquery-ui-background(#dadada, linear-gradient(#dadada, #b0b0b0), image);
         }
 
         &.ui-state-active,
         &.ui-tabs-selected {
           color: inherit;
-          @include jquery-ui-background(#bcbcbc, linear-gradient(#bcbcbc, #e4e4e4), gradient);
+          @include jquery-ui-background(#bcbcbc, linear-gradient(#bcbcbc, #e4e4e4), image);
         }
       }
     }
@@ -55,7 +55,7 @@
       border-width: $ui-default-border-width;
       border-style: $ui-default-border-style;
       border-color: $ui-default-border-color;
-      @include jquery-ui-background($ui-default-background-color, $ui-default-background, gradient);
+      @include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
     }
   }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-ui
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-09-04 00:00:00.000000000Z
+date: 2011-09-05 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &2173155480 !ruby/object:Gem::Requirement
+  requirement: &2153205300 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,21 +21,22 @@ dependencies:
         version: 0.11.1
   type: :runtime
   prerelease: false
-  version_requirements: *2173155480
+  version_requirements: *2153205300
 description: Compass-UI is a jQuery UI theme builder for the Compass CSS Authoring
   Framework.
 email:
 - oss@patrickward.com
-executables: []
+executables:
+- compass-ui
 extensions: []
 extra_rdoc_files: []
 files:
 - .gitignore
 - CHANGELOG.md
 - Gemfile
-- Gemfile.lock
 - LICENSE.md
 - README.md
+- bin/compass-ui
 - compass-ui.gemspec
 - demos/config.rb
 - demos/images/absolution/selector.png
@@ -121,6 +122,35 @@ files:
 - stylesheets/compass-ui/theme/absolution/_progressbar.scss
 - stylesheets/compass-ui/theme/absolution/_slider.scss
 - stylesheets/compass-ui/theme/absolution/_tabs.scss
+- templates/images/absolution/selector.png
+- templates/images/absolution/ui-icons_222222_256x240.png
+- templates/images/absolution/ui-icons_eeeeee_256x240.png
+- templates/images/absolution/ui-icons_ffffff_256x240.png
+- templates/images/dot-luv/ui-bg_diagonals-thick_15_0b3e6f_40x40.png
+- templates/images/dot-luv/ui-bg_dots-medium_30_0b58a2_4x4.png
+- templates/images/dot-luv/ui-bg_dots-small_20_333333_2x2.png
+- templates/images/dot-luv/ui-bg_dots-small_30_a32d00_2x2.png
+- templates/images/dot-luv/ui-bg_dots-small_40_00498f_2x2.png
+- templates/images/dot-luv/ui-bg_flat_0_aaaaaa_40x100.png
+- templates/images/dot-luv/ui-bg_flat_40_292929_40x100.png
+- templates/images/dot-luv/ui-bg_gloss-wave_20_111111_500x100.png
+- templates/images/dot-luv/ui-icons_00498f_256x240.png
+- templates/images/dot-luv/ui-icons_98d2fb_256x240.png
+- templates/images/dot-luv/ui-icons_9ccdfc_256x240.png
+- templates/images/dot-luv/ui-icons_ffffff_256x240.png
+- templates/images/jquery-ui-base/ui-bg_flat_0_aaaaaa_40x100.png
+- templates/images/jquery-ui-base/ui-bg_flat_75_ffffff_40x100.png
+- templates/images/jquery-ui-base/ui-bg_glass_55_fbf9ee_1x400.png
+- templates/images/jquery-ui-base/ui-bg_glass_65_ffffff_1x400.png
+- templates/images/jquery-ui-base/ui-bg_glass_75_dadada_1x400.png
+- templates/images/jquery-ui-base/ui-bg_glass_75_e6e6e6_1x400.png
+- templates/images/jquery-ui-base/ui-bg_glass_95_fef1ec_1x400.png
+- templates/images/jquery-ui-base/ui-bg_highlight-soft_75_cccccc_1x100.png
+- templates/images/jquery-ui-base/ui-icons_222222_256x240.png
+- templates/images/jquery-ui-base/ui-icons_2e83ff_256x240.png
+- templates/images/jquery-ui-base/ui-icons_454545_256x240.png
+- templates/images/jquery-ui-base/ui-icons_888888_256x240.png
+- templates/images/jquery-ui-base/ui-icons_cd0a0a_256x240.png
 - templates/project/_compass-ui.scss
 - templates/project/manifest.rb
 homepage: https://github.com/patrickward/compass-ui

data/Gemfile.lock

@@ -1,22 +0,0 @@
-PATH
-  remote: .
-  specs:
-    compass-ui (0.0.1)
-      compass (>= 0.11.1)
-
-GEM
-  remote: http://rubygems.org/
-  specs:
-    chunky_png (1.2.1)
-    compass (0.11.5)
-      chunky_png (~> 1.2)
-      fssm (>= 0.2.7)
-      sass (~> 3.1)
-    fssm (0.2.7)
-    sass (3.1.7)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  compass-ui!