swatches 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +104 -0
- data/Rakefile +37 -0
- data/app/assets/javascripts/swatches/application.js +13 -0
- data/app/assets/stylesheets/swatches/_preview.css.scss +29 -0
- data/app/assets/stylesheets/swatches/application.css.scss +1 -0
- data/app/assets/stylesheets/swatches/swatches.css.scss.erb +4 -0
- data/app/controllers/swatches/application_controller.rb +5 -0
- data/app/controllers/swatches/preview_controller.rb +6 -0
- data/app/helpers/swatches/application_helper.rb +4 -0
- data/app/views/layouts/swatches/application.html.erb +15 -0
- data/app/views/swatches/preview/index.html.erb +20 -0
- data/config/routes.rb +3 -0
- data/lib/swatches.rb +7 -0
- data/lib/swatches/colors.rb +17 -0
- data/lib/swatches/config.rb +17 -0
- data/lib/swatches/engine.rb +9 -0
- data/lib/swatches/file_generator.rb +100 -0
- data/lib/swatches/swatch_generator.rb +24 -0
- data/lib/swatches/tint_calculator.rb +53 -0
- data/lib/swatches/version.rb +3 -0
- data/lib/tasks/swatches_tasks.rake +6 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +15 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/bin/setup +29 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +26 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +41 -0
- data/test/dummy/config/environments/production.rb +79 -0
- data/test/dummy/config/environments/test.rb +42 -0
- data/test/dummy/config/initializers/assets.rb +11 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +4 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/swatches_test.rb +7 -0
- data/test/test_helper.rb +20 -0
- metadata +188 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 769412fac114e7fecb099abbb8fe2b3cf327504f
|
4
|
+
data.tar.gz: 7987a2b3ecf464f59735340bcb3df69ecf04ec13
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 54dbeeb5bc18c468ca3e18849df2c93631bc5cf26a4679830436ffd99e5a8618f689b2e3a3787997ee2b61fb0253c7bddb0cb6f3b30127e2247546d100152cde
|
7
|
+
data.tar.gz: 3f65d00e07931e64974a0f1f9c5333cc52420cc0311a346f15c8538c95295c45095e217060a26934405c460532780d8001dc6e8a219d90dd24fbb75db5475117
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2016 Ian McLean
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,104 @@
|
|
1
|
+
# Swatches
|
2
|
+
|
3
|
+
Swatches is a color framework built on SASS. Used well, it gives your application an amazing flexibility with respect to color choices.
|
4
|
+
|
5
|
+
## Basic Idea
|
6
|
+
|
7
|
+
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.
|
8
|
+
|
9
|
+
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:
|
10
|
+
|
11
|
+
$red-0: #000000;
|
12
|
+
$red-2: #080302;
|
13
|
+
$red-4: #0f0505;
|
14
|
+
$red-6: #170908;
|
15
|
+
$red-8: #1e0b0b;
|
16
|
+
$red-10: #260e0d;
|
17
|
+
$red-12: #2d1110;
|
18
|
+
$red-14: #341413;
|
19
|
+
$red-16: #3c1716;
|
20
|
+
$red-18: #441a18;
|
21
|
+
$red-20: #4b1c1b;
|
22
|
+
$red-22: #53201e;
|
23
|
+
$red-24: #5a2220;
|
24
|
+
$red-26: #622523;
|
25
|
+
$red-28: #692826;
|
26
|
+
$red-30: #702b29;
|
27
|
+
$red-32: #782e2b;
|
28
|
+
$red-34: #7f302e;
|
29
|
+
$red-36: #873331;
|
30
|
+
$red-38: #8e3633;
|
31
|
+
$red-40: #963936;
|
32
|
+
$red-42: #9d3c39;
|
33
|
+
$red-44: #a43f3c;
|
34
|
+
$red-46: #ac423e;
|
35
|
+
$red-48: #b44541;
|
36
|
+
$red-50: #bb4744;
|
37
|
+
$red-52: #c34a47;
|
38
|
+
$red-54: #ca4d49;
|
39
|
+
$red-56: #d2504c;
|
40
|
+
$red-58: #d9534f;
|
41
|
+
$red-60: #db5c58;
|
42
|
+
$red-62: #dc6460;
|
43
|
+
$red-64: #de6b68;
|
44
|
+
$red-66: #e07471;
|
45
|
+
$red-68: #e27c79;
|
46
|
+
$red-70: #e48582;
|
47
|
+
$red-72: #e58c8a;
|
48
|
+
$red-74: #e79492;
|
49
|
+
$red-76: #e99d9b;
|
50
|
+
$red-78: #eba5a3;
|
51
|
+
$red-80: #edadab;
|
52
|
+
$red-82: #eeb6b4;
|
53
|
+
$red-84: #f0bdbc;
|
54
|
+
$red-86: #f2c6c5;
|
55
|
+
$red-88: #f4cecd;
|
56
|
+
$red-90: #f6d6d5;
|
57
|
+
$red-92: #f7dede;
|
58
|
+
$red-94: #f9e6e6;
|
59
|
+
$red-96: #fbefef;
|
60
|
+
$red-98: #fdf7f7;
|
61
|
+
$red-100: #ffffff;
|
62
|
+
|
63
|
+
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.
|
64
|
+
|
65
|
+
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.
|
66
|
+
|
67
|
+
## Installing
|
68
|
+
|
69
|
+
Install the engine in your Gemfile like so:
|
70
|
+
|
71
|
+
gem 'swatches', path: 'lib/swatches'
|
72
|
+
|
73
|
+
Create a config/swatches.rb file in your application that looks like this:
|
74
|
+
|
75
|
+
Swatches.config.stylesheet_directory = 'app-layer/variables'
|
76
|
+
|
77
|
+
Swatches.config.colors = [
|
78
|
+
#--------COLOR NAME-----------RED-----GREEN--BLUE----#
|
79
|
+
%w( app-blue 0 118 169 ),
|
80
|
+
%w( app-sea-green 49 172 151 ),
|
81
|
+
%w( app-orange 227 115 65 ),
|
82
|
+
%w( app-plum 117 37 87 ),
|
83
|
+
%w( app-gray 119 120 123 ),
|
84
|
+
%w( sys-red 217 83 79 ),
|
85
|
+
%w( sys-yellow 250 190 70 ),
|
86
|
+
%w( sys-green 92 184 92 ),
|
87
|
+
]
|
88
|
+
|
89
|
+
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.
|
90
|
+
|
91
|
+
Finally, add a route to config/routes.rb so that you can easily preview your color swatches:
|
92
|
+
|
93
|
+
mount Swatches::Engine, :at => "/swatches",
|
94
|
+
|
95
|
+
## Using
|
96
|
+
|
97
|
+
Whenever you change the list of colors in config/swatches.rb, run the following rake task:
|
98
|
+
|
99
|
+
rake swatches:generate
|
100
|
+
|
101
|
+
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.
|
102
|
+
|
103
|
+
You can preview these generated colors by navigating to /swatches in your application.
|
104
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
|
9
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
+
rdoc.rdoc_dir = 'rdoc'
|
11
|
+
rdoc.title = 'Swatches'
|
12
|
+
rdoc.options << '--line-numbers'
|
13
|
+
rdoc.rdoc_files.include('README.rdoc')
|
14
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
+
end
|
16
|
+
|
17
|
+
APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
|
18
|
+
load 'rails/tasks/engine.rake'
|
19
|
+
|
20
|
+
|
21
|
+
load 'rails/tasks/statistics.rake'
|
22
|
+
|
23
|
+
|
24
|
+
|
25
|
+
Bundler::GemHelper.install_tasks
|
26
|
+
|
27
|
+
require 'rake/testtask'
|
28
|
+
|
29
|
+
Rake::TestTask.new(:test) do |t|
|
30
|
+
t.libs << 'lib'
|
31
|
+
t.libs << 'test'
|
32
|
+
t.pattern = 'test/**/*_test.rb'
|
33
|
+
t.verbose = false
|
34
|
+
end
|
35
|
+
|
36
|
+
|
37
|
+
task default: :test
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// compiled file.
|
9
|
+
//
|
10
|
+
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
|
11
|
+
// about supported directives.
|
12
|
+
//
|
13
|
+
//= require_tree .
|
@@ -0,0 +1,29 @@
|
|
1
|
+
body {
|
2
|
+
background: #666;
|
3
|
+
padding: 30px;
|
4
|
+
font-family: Arial;
|
5
|
+
}
|
6
|
+
|
7
|
+
#container {
|
8
|
+
background: white;
|
9
|
+
padding: 30px;
|
10
|
+
border-radius: 20px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.color-list {
|
14
|
+
list-style-type: none;
|
15
|
+
color: #000;
|
16
|
+
width: 240px;
|
17
|
+
float: left;
|
18
|
+
}
|
19
|
+
|
20
|
+
.color-list li {
|
21
|
+
padding: 8px;
|
22
|
+
}
|
23
|
+
|
24
|
+
.group:after {
|
25
|
+
content: "";
|
26
|
+
display: table;
|
27
|
+
clear: both;
|
28
|
+
}
|
29
|
+
|
@@ -0,0 +1 @@
|
|
1
|
+
@import "swatches";
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Swatches</title>
|
5
|
+
<%= stylesheet_link_tag "swatches/application", :media => "all" %>
|
6
|
+
<%= csrf_meta_tags %>
|
7
|
+
</head>
|
8
|
+
<body>
|
9
|
+
|
10
|
+
<div id="container" class="group">
|
11
|
+
<%= yield %>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
</body>
|
15
|
+
</html>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<h2>Color Swatch Preview</h2>
|
2
|
+
|
3
|
+
<p>
|
4
|
+
This is a preview of the colors found in the _preview-colors.css.scss file.
|
5
|
+
</p>
|
6
|
+
|
7
|
+
<p>
|
8
|
+
Refer to the README of the Swatches engine for more information.
|
9
|
+
</p>
|
10
|
+
|
11
|
+
<%- Swatches::Colors.names.each do |color_name| %>
|
12
|
+
<ul class="color-list">
|
13
|
+
<%- (0..50).each do |i| %>
|
14
|
+
<% c = "#{color_name}-#{i*2}" %>
|
15
|
+
<li class="<%= c %>">
|
16
|
+
<%= c %>
|
17
|
+
</li>
|
18
|
+
<% end %>
|
19
|
+
</ul>
|
20
|
+
<% end %>
|
data/config/routes.rb
ADDED
data/lib/swatches.rb
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
# Add some convenience methods to what is essentially just an array of
|
2
|
+
# color names and values
|
3
|
+
module Swatches
|
4
|
+
class Colors
|
5
|
+
|
6
|
+
def self.names
|
7
|
+
Swatches.config.colors.map(&:first)
|
8
|
+
end
|
9
|
+
|
10
|
+
def self.each_color(&block)
|
11
|
+
Swatches.config.colors.each do |name, red, green, blue|
|
12
|
+
block.call(name, red.to_i, green.to_i, blue.to_i)
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1,100 @@
|
|
1
|
+
require 'fileutils'
|
2
|
+
|
3
|
+
module Swatches
|
4
|
+
class FileGenerator
|
5
|
+
|
6
|
+
def self.write!
|
7
|
+
ensure_app_stylesheet_directory_exists
|
8
|
+
write_color_variables_file
|
9
|
+
write_swatch_preview_file
|
10
|
+
end
|
11
|
+
|
12
|
+
private
|
13
|
+
|
14
|
+
def self.color_variables_filename
|
15
|
+
File.join(app_stylesheet_directory, '_color-swatches.css.scss')
|
16
|
+
end
|
17
|
+
|
18
|
+
def self.swatch_preview_filename
|
19
|
+
File.join(engine_stylesheet_directory, '_preview-colors.css.scss')
|
20
|
+
end
|
21
|
+
|
22
|
+
def self.app_stylesheet_directory
|
23
|
+
File.join(Rails.root, 'app', 'assets', 'stylesheets', Swatches.config.stylesheet_directory)
|
24
|
+
end
|
25
|
+
|
26
|
+
def self.engine_stylesheet_directory
|
27
|
+
File.join(Rails.root, 'app', 'assets', 'stylesheets', Swatches.config.stylesheet_directory)
|
28
|
+
end
|
29
|
+
|
30
|
+
def self.ensure_app_stylesheet_directory_exists
|
31
|
+
FileUtils.mkdir_p(app_stylesheet_directory)
|
32
|
+
end
|
33
|
+
|
34
|
+
def self.write_color_variables_file
|
35
|
+
File.open(color_variables_filename, 'w') do |f|
|
36
|
+
f.puts header
|
37
|
+
Swatches::Colors.each_color do |name, red, green, blue|
|
38
|
+
write_color_variables(f, name, red, green, blue)
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
42
|
+
|
43
|
+
def self.write_swatch_preview_file
|
44
|
+
File.open(swatch_preview_filename, 'w') do |f|
|
45
|
+
f.puts header
|
46
|
+
Swatches::Colors.each_color do |name, red, green, blue|
|
47
|
+
write_preview_css(f, name, red, green, blue)
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
51
|
+
|
52
|
+
def self.header
|
53
|
+
# The ASCII-art below looks funny because we have to escape backslashes.
|
54
|
+
<<-HEADER.strip_heredoc
|
55
|
+
/***********************************************************************
|
56
|
+
* _____ _______ ____ _____ *
|
57
|
+
* / ____|__ __/ __ \\| __ \\ THIS IS A GENERATED FILE. *
|
58
|
+
* | (___ | | | | | | |__) | *
|
59
|
+
* \\___ \\ | | | | | | ___/ DO NOT EDIT. *
|
60
|
+
* ____) | | | | |__| | | *
|
61
|
+
* |_____/ |_| \\____/|_| *
|
62
|
+
* *
|
63
|
+
***********************************************************************
|
64
|
+
* *
|
65
|
+
* This file was generated by the Swatches engine. Refer to its *
|
66
|
+
* README for details. *
|
67
|
+
* *
|
68
|
+
***********************************************************************/
|
69
|
+
|
70
|
+
|
71
|
+
HEADER
|
72
|
+
end
|
73
|
+
|
74
|
+
def self.write_color_variables(f, name, red, green, blue)
|
75
|
+
swatch_header = <<-SWATCH_HEADER.strip_heredoc
|
76
|
+
/*
|
77
|
+
* COLOR SWATCH FOR COLOR "#{name.upcase}"
|
78
|
+
*
|
79
|
+
* Base Color
|
80
|
+
* red: #{red}
|
81
|
+
* green: #{green}
|
82
|
+
* blue: #{blue}
|
83
|
+
*
|
84
|
+
*/
|
85
|
+
SWATCH_HEADER
|
86
|
+
f.puts swatch_header
|
87
|
+
base_color = Sass::Script::Color.new(red: red, green: green, blue: blue)
|
88
|
+
swatch_generator = Swatches::SwatchGenerator.new(base_color, name)
|
89
|
+
f.puts swatch_generator.to_sass
|
90
|
+
f.puts
|
91
|
+
end
|
92
|
+
|
93
|
+
def self.write_preview_css(f, name, red, green, blue)
|
94
|
+
(0..50).each do |i|
|
95
|
+
f.puts ".#{name}-#{i*2} { background-color: $#{name}-#{i*2} }"
|
96
|
+
end
|
97
|
+
end
|
98
|
+
|
99
|
+
end
|
100
|
+
end
|