swatches 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 769412fac114e7fecb099abbb8fe2b3cf327504f
+  data.tar.gz: 7987a2b3ecf464f59735340bcb3df69ecf04ec13
+SHA512:
+  metadata.gz: 54dbeeb5bc18c468ca3e18849df2c93631bc5cf26a4679830436ffd99e5a8618f689b2e3a3787997ee2b61fb0253c7bddb0cb6f3b30127e2247546d100152cde
+  data.tar.gz: 3f65d00e07931e64974a0f1f9c5333cc52420cc0311a346f15c8538c95295c45095e217060a26934405c460532780d8001dc6e8a219d90dd24fbb75db5475117

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 Ian McLean
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,104 @@
+# Swatches
+
+Swatches is a color framework built on SASS.  Used well, it gives your application an amazing flexibility with respect to color choices.
+
+## Basic Idea
+
+You provide Swatches with a list of base colors.  For each base color, a color swatch of twenty shades and tints will be generated--from black all the way to white.  These tints and shades will be made available to your application as SASS variables.
+
+For example, let's say that you had a color you want to call "red" that has the RGB values of (217, 83, 79).  Swatches will generate the following color variables for you:
+
+    $red-0: #000000;
+    $red-2: #080302;
+    $red-4: #0f0505;
+    $red-6: #170908;
+    $red-8: #1e0b0b;
+    $red-10: #260e0d;
+    $red-12: #2d1110;
+    $red-14: #341413;
+    $red-16: #3c1716;
+    $red-18: #441a18;
+    $red-20: #4b1c1b;
+    $red-22: #53201e;
+    $red-24: #5a2220;
+    $red-26: #622523;
+    $red-28: #692826;
+    $red-30: #702b29;
+    $red-32: #782e2b;
+    $red-34: #7f302e;
+    $red-36: #873331;
+    $red-38: #8e3633;
+    $red-40: #963936;
+    $red-42: #9d3c39;
+    $red-44: #a43f3c;
+    $red-46: #ac423e;
+    $red-48: #b44541;
+    $red-50: #bb4744;
+    $red-52: #c34a47;
+    $red-54: #ca4d49;
+    $red-56: #d2504c;
+    $red-58: #d9534f;
+    $red-60: #db5c58;
+    $red-62: #dc6460;
+    $red-64: #de6b68;
+    $red-66: #e07471;
+    $red-68: #e27c79;
+    $red-70: #e48582;
+    $red-72: #e58c8a;
+    $red-74: #e79492;
+    $red-76: #e99d9b;
+    $red-78: #eba5a3;
+    $red-80: #edadab;
+    $red-82: #eeb6b4;
+    $red-84: #f0bdbc;
+    $red-86: #f2c6c5;
+    $red-88: #f4cecd;
+    $red-90: #f6d6d5;
+    $red-92: #f7dede;
+    $red-94: #f9e6e6;
+    $red-96: #fbefef;
+    $red-98: #fdf7f7;
+    $red-100: #ffffff;
+
+If you use these variables in your SASS instead of directly hard-coding red values, then you could tweak your red hue to make it oranger by regenerating this "red" color using the RGB base color (217, 110, 79).  Swatches will update the SASS variables for you, and anywhere your app used these variables, the reds would now appear oranger.
+
+Note the numbers in the names of the color variables.  They represent the value of the color, from 0 (black) to 100 (white).  Two unrelated colors with the same value number ($blue-25 and $orange-25, for example) should visually seem to have a similar darkness.
+
+## Installing
+
+Install the engine in your Gemfile like so:
+
+    gem 'swatches', path: 'lib/swatches'
+
+Create a config/swatches.rb file in your application that looks like this:
+
+    Swatches.config.stylesheet_directory = 'app-layer/variables'
+
+    Swatches.config.colors = [
+        #--------COLOR NAME-----------RED-----GREEN--BLUE----#
+        %w(      app-blue               0     118    169     ),
+        %w(      app-sea-green         49     172    151     ),
+        %w(      app-orange           227     115     65     ),
+        %w(      app-plum             117      37     87     ),
+        %w(      app-gray             119     120    123     ),
+        %w(      sys-red              217      83     79     ),
+        %w(      sys-yellow           250     190     70     ),
+        %w(      sys-green             92     184     92     ),
+      ]
+
+config.colors is a list of named colors and their RGB values.  config.stylesheet_directory is the location where you want Swatches to put the generated color variables file.  It is a relative path that assumes you want to put the file somewhere in 'app/assets/stylesheets', so don't bother putting that part in your path.
+
+Finally, add a route to config/routes.rb so that you can easily preview your color swatches:
+
+    mount Swatches::Engine, :at => "/swatches",
+
+## Using
+
+Whenever you change the list of colors in config/swatches.rb, run the following rake task:
+
+    rake swatches:generate
+
+This will create a new _color-swatches.css.scss file and put it in the stylesheet directory named in config/swatches.rb.  Restart your web server for these new colors to take effect.
+
+You can preview these generated colors by navigating to /swatches in your application.
+

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Swatches'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/swatches/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/app/assets/stylesheets/swatches/_preview.css.scss

@@ -0,0 +1,29 @@
+body {
+  background: #666;
+  padding: 30px;
+  font-family: Arial;
+}
+
+#container {
+  background: white;
+  padding: 30px;
+  border-radius: 20px;
+}
+
+.color-list {
+  list-style-type: none;
+  color: #000;
+  width: 240px;
+  float: left;
+}
+
+.color-list li {
+  padding: 8px;
+}
+
+.group:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+

data/app/assets/stylesheets/swatches/application.css.scss

@@ -0,0 +1 @@
+@import "swatches";

data/app/assets/stylesheets/swatches/swatches.css.scss.erb

@@ -0,0 +1,4 @@
+@import "<%= File.join(Swatches.config.stylesheet_directory, 'color-swatches') %>";
+@import "<%= File.join(Swatches.config.stylesheet_directory, 'preview-colors') %>";
+@import "swatches/preview";
+

data/app/controllers/swatches/application_controller.rb

@@ -0,0 +1,5 @@
+module Swatches
+  class ApplicationController < ActionController::Base
+    layout 'swatches/application'
+  end
+end

data/app/controllers/swatches/preview_controller.rb

@@ -0,0 +1,6 @@
+module Swatches
+  class PreviewController < ApplicationController
+    def index
+    end
+  end
+end

data/app/helpers/swatches/application_helper.rb

@@ -0,0 +1,4 @@
+module Swatches
+  module ApplicationHelper
+  end
+end

data/app/views/layouts/swatches/application.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Swatches</title>
+  <%= stylesheet_link_tag "swatches/application", :media => "all" %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+  <div id="container" class="group">
+    <%= yield %>
+  </div>
+
+</body>
+</html>

data/app/views/swatches/preview/index.html.erb

@@ -0,0 +1,20 @@
+<h2>Color Swatch Preview</h2>
+
+<p>
+  This is a preview of the colors found in the _preview-colors.css.scss file.
+</p>
+
+<p>
+  Refer to the README of the Swatches engine for more information.
+</p>
+
+<%- Swatches::Colors.names.each do |color_name| %>
+  <ul class="color-list">
+    <%- (0..50).each do |i| %>
+      <% c = "#{color_name}-#{i*2}" %>
+      <li class="<%= c %>">
+        <%= c %>
+      </li>
+    <% end %>
+  </ul>
+<% end %>

data/config/routes.rb

@@ -0,0 +1,3 @@
+Swatches::Engine.routes.draw do
+  root to: "preview#index"
+end

data/lib/swatches.rb

@@ -0,0 +1,7 @@
+require 'swatches/config'
+require 'swatches/engine'
+
+require 'swatches/colors'
+require 'swatches/tint_calculator'
+require 'swatches/swatch_generator'
+require 'swatches/file_generator'

data/lib/swatches/colors.rb

@@ -0,0 +1,17 @@
+# Add some convenience methods to what is essentially just an array of
+# color names and values
+module Swatches
+  class Colors
+
+    def self.names
+      Swatches.config.colors.map(&:first)
+    end
+
+    def self.each_color(&block)
+      Swatches.config.colors.each do |name, red, green, blue|
+        block.call(name, red.to_i, green.to_i, blue.to_i)
+      end
+    end
+
+  end
+end

data/lib/swatches/config.rb

@@ -0,0 +1,17 @@
+module Swatches
+  class Config
+    attr_writer :stylesheet_directory, :colors
+
+    def colors
+      @colors
+    end
+
+    def stylesheet_directory
+      @stylesheet_directory
+    end
+  end
+
+  def self.config
+    @@config ||= Config.new
+  end
+end

data/lib/swatches/engine.rb

@@ -0,0 +1,9 @@
+module Swatches
+  class Engine < ::Rails::Engine
+    isolate_namespace Swatches
+    initializer "swatches.configure" do |app|
+      require File.join(Rails.root, 'config', 'swatches')
+    end
+    config.assets.precompile += %w( swatches.css )
+  end
+end

data/lib/swatches/file_generator.rb

@@ -0,0 +1,100 @@
+require 'fileutils'
+
+module Swatches
+  class FileGenerator
+
+    def self.write!
+      ensure_app_stylesheet_directory_exists
+      write_color_variables_file
+      write_swatch_preview_file
+    end
+
+  private
+
+    def self.color_variables_filename
+      File.join(app_stylesheet_directory, '_color-swatches.css.scss')
+    end
+
+    def self.swatch_preview_filename
+      File.join(engine_stylesheet_directory, '_preview-colors.css.scss')
+    end
+
+    def self.app_stylesheet_directory
+      File.join(Rails.root, 'app', 'assets', 'stylesheets', Swatches.config.stylesheet_directory)
+    end
+
+    def self.engine_stylesheet_directory
+      File.join(Rails.root, 'app', 'assets', 'stylesheets', Swatches.config.stylesheet_directory)
+    end
+
+    def self.ensure_app_stylesheet_directory_exists
+      FileUtils.mkdir_p(app_stylesheet_directory)
+    end
+
+    def self.write_color_variables_file
+      File.open(color_variables_filename, 'w') do |f|
+        f.puts header
+        Swatches::Colors.each_color do |name, red, green, blue|
+          write_color_variables(f, name, red, green, blue)
+        end
+      end
+    end
+
+    def self.write_swatch_preview_file
+      File.open(swatch_preview_filename, 'w') do |f|
+        f.puts header
+        Swatches::Colors.each_color do |name, red, green, blue|
+          write_preview_css(f, name, red, green, blue)
+        end
+      end
+    end
+
+    def self.header
+      # The ASCII-art below looks funny because we have to escape backslashes.
+      <<-HEADER.strip_heredoc
+        /***********************************************************************
+         *     _____ _______ ____  _____                                       *
+         *    / ____|__   __/ __ \\|  __ \\       THIS IS A GENERATED FILE.      *
+         *   | (___    | | | |  | | |__) |                                     *
+         *    \\___ \\   | | | |  | |  ___/       DO NOT EDIT.                   *
+         *    ____) |  | | | |__| | |                                          *
+         *   |_____/   |_|  \\____/|_|                                          *
+         *                                                                     *
+         ***********************************************************************
+         *                                                                     *
+         *  This file was generated by the Swatches engine.  Refer to its      *
+         *  README for details.                                                *
+         *                                                                     *
+         ***********************************************************************/
+
+
+      HEADER
+    end
+
+    def self.write_color_variables(f, name, red, green, blue)
+      swatch_header = <<-SWATCH_HEADER.strip_heredoc
+        /*
+         *  COLOR SWATCH FOR COLOR "#{name.upcase}"
+         *
+         *  Base Color
+         *    red:   #{red}
+         *    green: #{green}
+         *    blue:  #{blue}
+         *
+         */
+      SWATCH_HEADER
+      f.puts swatch_header
+      base_color = Sass::Script::Color.new(red: red, green: green, blue: blue)
+      swatch_generator = Swatches::SwatchGenerator.new(base_color, name)
+      f.puts swatch_generator.to_sass
+      f.puts
+    end
+
+    def self.write_preview_css(f, name, red, green, blue)
+      (0..50).each do |i|
+        f.puts ".#{name}-#{i*2} { background-color: $#{name}-#{i*2} }"
+      end
+    end
+
+  end
+end