palat 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +2 -5
- data/Rakefile +271 -52
- data/circle.yml +1 -0
- data/lib/palat/generator.rb +16 -9
- data/lib/palat/version.rb +1 -1
- data/logo.png +0 -0
- data/palat.gemspec +1 -1
- metadata +11 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c9a3b69fb303d36b31c57097ad97af5b3dfa3e53
|
4
|
+
data.tar.gz: 98f290a1771c92360f762cd9426430e854e22941
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7a8bada548f37e6b7d737e2f5693d1f0ebddc645f8fd1ae444ae340eef3c734effaf63a4a070f70fac38fb71a19102acff282be94a75f0d21197b740fa9d3b60
|
7
|
+
data.tar.gz: 65f44d5af982fc53a708cdb85cda6caee8f2109e36ecad576c901d1449a23c7cc444a4f253524a2b5b63b8fc6b2db705453329808cfc41de3e6b7a5d6b6d01e2
|
data/README.md
CHANGED
@@ -1,13 +1,10 @@
|
|
1
|
-
palat
|
2
|
-
=======
|
3
|
-
|
4
1
|

|
5
2
|
|
6
3
|
[![RubyGem][gem]](http://rubygems.org/gems/palat)
|
7
4
|
|
8
|
-
Generate beautiful, accessible color schemes. Used in [Screendoor](https://www.dobt.co/screendoor/) to allow our users to customize their [public-facing forms](https://dobt.forms.fm).
|
5
|
+
Generate beautiful, accessible color schemes from a single background color. Used in [Screendoor](https://www.dobt.co/screendoor/) to allow our users to customize their [public-facing forms](https://dobt.forms.fm).
|
9
6
|
|
10
|
-
[View some examples →](dobtco.github.io/palat)
|
7
|
+
[View some examples →](https://dobtco.github.io/palat)
|
11
8
|
|
12
9
|
## Usage
|
13
10
|
|
data/Rakefile
CHANGED
@@ -15,44 +15,166 @@ task :generate_preview do
|
|
15
15
|
def content
|
16
16
|
rawtext "<!doctype html>"
|
17
17
|
|
18
|
-
html {
|
18
|
+
html(lang: 'en') {
|
19
19
|
head {
|
20
|
-
title '
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
});
|
27
|
-
}.html_safe
|
28
|
-
|
20
|
+
title 'Palat'
|
21
|
+
meta(name: 'description', content: 'A Ruby gem that generates beautiful, accessible color schemes.')
|
22
|
+
meta(name: 'viewport', content: 'width=device-width')
|
23
|
+
meta('http-equiv': 'X-UA-Compatible', content: 'IE=edge')
|
24
|
+
meta('charset': 'utf-8')
|
25
|
+
link(rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Monda:400,700')
|
29
26
|
style %{
|
30
27
|
body {
|
31
|
-
margin:
|
32
|
-
font-size:
|
33
|
-
line-height:
|
34
|
-
font-family: sans-serif;
|
35
|
-
font-weight:
|
28
|
+
margin: 1em 5%;
|
29
|
+
font-size: 100%;
|
30
|
+
line-height: 1.5;
|
31
|
+
font-family: 'Monda', 'HelveticaNeue', sans-serif;
|
32
|
+
font-weight: normal;
|
36
33
|
-webkit-font-smoothing: antialiased;
|
37
34
|
-moz-osx-font-smoothing: grayscale;
|
35
|
+
background-color: #200457;
|
36
|
+
background-image: -webkit-radial-gradient(top left farthest-corner, rgba(217,59,46,0.5) 0%, rgba(217,59,46,0) 90%),
|
37
|
+
-webkit-radial-gradient(top right farthest-corner, rgba(46,68,217,0.4) 0%, rgba(46,68,217,0) 85%),
|
38
|
+
-webkit-linear-gradient(rgba(32,4,87,0),rgb(32,4,87) 500px);
|
39
|
+
background-image: radial-gradient(farthest-corner at top left, rgba(217,59,46,0.5) 0%, rgba(217,59,46,0) 90%),
|
40
|
+
radial-gradient(farthest-corner at top right, rgba(46,68,217,0.4) 0%, rgba(46,68,217,0) 85%),
|
41
|
+
linear-gradient(rgba(32,4,87,0),rgb(32,4,87) 500px);
|
42
|
+
|
43
|
+
}
|
44
|
+
|
45
|
+
@-webkit-keyframes press {
|
46
|
+
from {
|
47
|
+
background-color: rgba(255,255,255,0.8);
|
48
|
+
color: rgba(0,0,0,0.5);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
@keyframes press {
|
53
|
+
from {
|
54
|
+
background-color: rgba(255,255,255,0.8);
|
55
|
+
color: rgba(0,0,0,0.5);
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
.keycodes_wrapper {
|
60
|
+
margin: 0 auto 1.5em;
|
61
|
+
font-size: 2em;
|
62
|
+
color: #fff;
|
63
|
+
text-align: center;
|
64
|
+
mix-blend-mode: overlay;
|
65
|
+
}
|
66
|
+
|
67
|
+
.keycode {
|
68
|
+
display: inline-block;
|
69
|
+
margin: 0 0.75em;
|
70
|
+
}
|
71
|
+
|
72
|
+
.keycode strong {
|
73
|
+
font-weight: normal;
|
74
|
+
display: inline-block;
|
75
|
+
width: 4rem;
|
76
|
+
height: 4rem;
|
77
|
+
line-height: 1.5rem;
|
78
|
+
padding: 1.25rem 0;
|
79
|
+
text-align: center;
|
80
|
+
background: rgba(255,255,255,0.05);
|
81
|
+
border: 1px solid #fff;
|
82
|
+
box-shadow: 0 0.125em 0 rgba(255,255,255,0.9);
|
83
|
+
border-radius: 0.25em;
|
84
|
+
margin-bottom: 0.5em;
|
85
|
+
}
|
86
|
+
|
87
|
+
.keycode.is_pressed strong {
|
88
|
+
-webkit-animation: press 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
89
|
+
animation: press 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
90
|
+
}
|
91
|
+
|
92
|
+
.keycode span {
|
93
|
+
font-size: 0.875rem;
|
94
|
+
opacity: 0.9;
|
95
|
+
display: block;
|
38
96
|
}
|
39
97
|
|
40
98
|
h2 {
|
41
|
-
margin:
|
42
|
-
font-size:
|
99
|
+
margin: 0 0 1.5rem;
|
100
|
+
font-size: 3rem;
|
43
101
|
line-height: 5rem;
|
44
|
-
font-
|
45
|
-
|
102
|
+
font-weight: bold;
|
103
|
+
text-align: center;
|
104
|
+
}
|
105
|
+
|
106
|
+
.label {
|
107
|
+
margin-bottom: 0.5rem;
|
108
|
+
}
|
109
|
+
|
110
|
+
code {
|
111
|
+
font-family: monospace;
|
112
|
+
font-size: 1.25em;
|
46
113
|
}
|
47
114
|
|
48
115
|
* {
|
49
116
|
box-sizing: border-box;
|
50
117
|
}
|
51
118
|
|
119
|
+
.logo img {
|
120
|
+
display: block;
|
121
|
+
max-width: 50%;
|
122
|
+
margin: 0 auto;
|
123
|
+
}
|
124
|
+
|
125
|
+
.header {
|
126
|
+
padding: 2rem 0;
|
127
|
+
}
|
128
|
+
|
129
|
+
.header p,
|
130
|
+
.footer {
|
131
|
+
color: #fff;
|
132
|
+
max-width: 40rem;
|
133
|
+
margin: 2.5em auto 1.5em;
|
134
|
+
text-align: center;
|
135
|
+
margin-bottom: 1.5em;
|
136
|
+
}
|
137
|
+
|
138
|
+
.footer {
|
139
|
+
font-size: 0.75em;
|
140
|
+
clear: left;
|
141
|
+
display: table;
|
142
|
+
}
|
143
|
+
|
144
|
+
.footer a,
|
145
|
+
.footer a:hover,
|
146
|
+
.footer a:focus,
|
147
|
+
.footer a:active {
|
148
|
+
color: #fff;
|
149
|
+
}
|
150
|
+
|
151
|
+
.color_test_section_wrapper {
|
152
|
+
margin: 1em 0;
|
153
|
+
border-radius: 4px;
|
154
|
+
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
|
155
|
+
transition: -ms-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
|
156
|
+
transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
|
157
|
+
transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
|
158
|
+
}
|
159
|
+
|
160
|
+
.color_test_section_wrapper:hover {
|
161
|
+
-ms-transform: scale(1.03);
|
162
|
+
-webkit-transform: scale(1.03);
|
163
|
+
transform: scale(1.03);
|
164
|
+
}
|
165
|
+
|
52
166
|
.color_test_section {
|
53
|
-
|
54
|
-
|
55
|
-
|
167
|
+
padding: 2em;
|
168
|
+
}
|
169
|
+
|
170
|
+
.color_test_swatch {
|
171
|
+
background: rgba(255,255,255,0.6);
|
172
|
+
padding: 0.25em 2em;
|
173
|
+
font-size: 0.875em;
|
174
|
+
border-top-left-radius: 4px;
|
175
|
+
border-top-right-radius: 4px;
|
176
|
+
text-align: center;
|
177
|
+
margin: 1px;
|
56
178
|
}
|
57
179
|
|
58
180
|
.input {
|
@@ -62,6 +184,9 @@ task :generate_preview do
|
|
62
184
|
border-radius: 4px;
|
63
185
|
border-style: solid;
|
64
186
|
border-width: 1px;
|
187
|
+
white-space: nowrap;
|
188
|
+
overflow: hidden;
|
189
|
+
text-overflow: ellipsis;
|
65
190
|
}
|
66
191
|
|
67
192
|
.error_bubble {
|
@@ -71,52 +196,146 @@ task :generate_preview do
|
|
71
196
|
}
|
72
197
|
|
73
198
|
.debug {
|
74
|
-
margin-top:
|
75
|
-
font-size:
|
199
|
+
margin-top: 1.5rem;
|
200
|
+
font-size: 0.75rem;
|
201
|
+
padding: 1rem;
|
202
|
+
height: 40em;
|
203
|
+
border-radius: 4px;
|
204
|
+
}
|
205
|
+
|
206
|
+
.debug strong {
|
207
|
+
margin-top: 1rem;
|
208
|
+
display: block;
|
209
|
+
}
|
210
|
+
|
211
|
+
.debug strong:first-of-type {
|
212
|
+
margin: 0;
|
213
|
+
}
|
214
|
+
|
215
|
+
@media screen and (min-width: 850px) {
|
216
|
+
body {
|
217
|
+
font-size: 125%;
|
218
|
+
}
|
219
|
+
.color_test_section_wrapper {
|
220
|
+
float: left;
|
221
|
+
width: 46%;
|
222
|
+
margin: 2%;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
@media screen and (min-width: 1600px) {
|
227
|
+
.color_test_section_wrapper {
|
228
|
+
width: 22%;
|
229
|
+
margin: 1.5%;
|
230
|
+
}
|
231
|
+
}
|
232
|
+
|
233
|
+
@media screen and (min-width: 1800px) {
|
234
|
+
body {
|
235
|
+
font-size: 150%;
|
236
|
+
}
|
76
237
|
}
|
77
238
|
}.squish.html_safe
|
78
239
|
}
|
79
240
|
|
80
241
|
body {
|
242
|
+
|
243
|
+
div(class: 'header') {
|
244
|
+
a(href: 'https://github.com/dobtco/palat',
|
245
|
+
title: 'Fork Palat on Github',
|
246
|
+
class: 'logo') {
|
247
|
+
img(src: 'logo.png',
|
248
|
+
alt: 'Palat')
|
249
|
+
}
|
250
|
+
|
251
|
+
p 'A Ruby gem that generates beautiful, accessible color schemes from a single background color.'.html_safe
|
252
|
+
|
253
|
+
p 'Designed to meet WCAG 2.0 Level AA contrast ratio guidelines.'
|
254
|
+
}
|
255
|
+
|
256
|
+
div(class: 'keycodes_wrapper') {
|
257
|
+
div(class: 'keycode keycode_tilde') {
|
258
|
+
strong '~'
|
259
|
+
span 'Toggle variables'
|
260
|
+
}
|
261
|
+
|
262
|
+
div(class: 'keycode keycode_e') {
|
263
|
+
strong 'e'
|
264
|
+
span 'Toggle error state'
|
265
|
+
}
|
266
|
+
}
|
267
|
+
|
81
268
|
test_color_array.each do |color|
|
82
269
|
render_section(color)
|
83
270
|
end
|
271
|
+
|
272
|
+
div(class: 'footer') {
|
273
|
+
p "Made by <a href='https://www.dobt.co'>The Department of Better Technology.</a>".html_safe
|
274
|
+
p { a 'Fork Palat on Github', href: 'https://www.github.com/dobtco/palat/' }
|
275
|
+
}
|
84
276
|
}
|
277
|
+
|
278
|
+
script(src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')
|
279
|
+
script %{
|
280
|
+
$(document).on('keydown', function(e){
|
281
|
+
if (e.keyCode == 192) {
|
282
|
+
$('.debug').toggle();
|
283
|
+
$('.keycode_tilde').addClass('is_pressed').on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {
|
284
|
+
$('.keycode_tilde').removeClass('is_pressed');
|
285
|
+
});
|
286
|
+
}
|
287
|
+
if (e.keyCode == 69) {
|
288
|
+
$('.input').toggle();
|
289
|
+
$('.keycode_e').addClass('is_pressed').on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {
|
290
|
+
$('.keycode_e').removeClass('is_pressed');
|
291
|
+
});
|
292
|
+
}
|
293
|
+
});
|
294
|
+
}.html_safe
|
85
295
|
}
|
86
296
|
end
|
87
297
|
|
88
298
|
def render_section(color)
|
89
299
|
generator = Palat::Generator.new(color)
|
90
300
|
|
91
|
-
div(class: '
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
301
|
+
div(class: 'color_test_section_wrapper', style: "background-color: #{generator.background_color.to_hex}") {
|
302
|
+
|
303
|
+
div(class: 'color_test_swatch') {
|
304
|
+
code generator.background_color.to_hex
|
305
|
+
}
|
306
|
+
|
307
|
+
div(class: 'color_test_section') {
|
308
|
+
h2('Header', style: "color: #{generator.base_color.to_hex}")
|
309
|
+
div(class: 'label') {
|
310
|
+
span 'Label ', style: "color: #{generator.base_color.to_hex}"
|
311
|
+
abbr '*', style: "color: #{generator.error_color.to_hex}"
|
312
|
+
}
|
313
|
+
div(
|
314
|
+
'This is my input', class: 'input',
|
315
|
+
style: "border-color: rgba(#{generator.base_color.to_hex},0.6);
|
316
|
+
background-color: #{generator.input_background.to_hex};
|
317
|
+
color: #{generator.input_color.to_hex};"
|
318
|
+
)
|
319
|
+
div(
|
320
|
+
'This is my input', class: 'input error_input error_input_focus',
|
321
|
+
style: "display: none;
|
322
|
+
border-color: #{generator.error_color.to_hex};
|
323
|
+
background-color: #{generator.input_background_focus.to_hex};
|
324
|
+
color: #{generator.input_color.to_hex};"
|
325
|
+
)
|
326
|
+
div(
|
327
|
+
'Error!', class: 'error_bubble',
|
328
|
+
style: "background-color: #{generator.error_bubble_background.to_hex};
|
329
|
+
color: #{generator.error_bubble_color.to_hex};"
|
330
|
+
)
|
331
|
+
|
332
|
+
div(
|
333
|
+
generator.to_debug_s.html_safe, class: 'debug',
|
334
|
+
style: "display: none;
|
335
|
+
color: #{generator.base_color.to_hex};
|
336
|
+
background-color: #{generator.input_background.to_hex}"
|
337
|
+
)
|
96
338
|
}
|
97
|
-
div(
|
98
|
-
'This is my input', class: 'input',
|
99
|
-
style: "border-color: rgba(#{generator.base_color.to_hex},0.6);
|
100
|
-
background-color: #{generator.input_background.to_hex};
|
101
|
-
color: #{generator.input_color.to_hex};"
|
102
|
-
)
|
103
|
-
div(
|
104
|
-
'This is my input', class: 'input error_input error_input_focus',
|
105
|
-
style: "display: none;
|
106
|
-
border-color: #{generator.error_color.to_hex};
|
107
|
-
background-color: #{generator.input_background_focus.to_hex};
|
108
|
-
color: #{generator.input_color.to_hex};"
|
109
|
-
)
|
110
|
-
div(
|
111
|
-
'Error!', class: 'error_bubble',
|
112
|
-
style: "background-color: #{generator.error_bubble_background.to_hex};
|
113
|
-
color: #{generator.error_bubble_color.to_hex};"
|
114
|
-
)
|
115
|
-
|
116
|
-
div(
|
117
|
-
generator.to_debug_s.html_safe, class: 'debug',
|
118
|
-
style: "color: #{generator.base_color.to_hex}; display: none;"
|
119
|
-
)
|
120
339
|
}
|
121
340
|
end
|
122
341
|
end
|
data/circle.yml
CHANGED
data/lib/palat/generator.rb
CHANGED
@@ -46,20 +46,27 @@ class Palat::Generator
|
|
46
46
|
def to_debug_s
|
47
47
|
str = []
|
48
48
|
|
49
|
+
str << "<strong>Colors</strong>"
|
50
|
+
|
49
51
|
to_h.each do |k, v|
|
50
|
-
str << "#{k}:
|
52
|
+
str << "#{k}: <code>#{v}</code>"
|
51
53
|
end
|
52
54
|
|
53
|
-
str << "Background brightness:
|
55
|
+
str << "Background brightness: <code>#{background_color.brightness}</code>"
|
54
56
|
|
55
|
-
str << "
|
56
|
-
str << "
|
57
|
-
str << "Error
|
58
|
-
str << "
|
59
|
-
str << "
|
60
|
-
str << "Conservative light: #{conservative_background_light?}"
|
61
|
-
str << "Conservative dark: #{conservative_background_dark?}"
|
57
|
+
str << "<strong>Contrast Ratios</strong>"
|
58
|
+
str << "BG / Text: <code>#{contrast(background_color, base_color).round(2)}</code>"
|
59
|
+
str << "BG / Error BG: <code>#{contrast(background_color, error_color).round(2)}</code>"
|
60
|
+
str << "Error BG / Text: <code>#{contrast(error_bubble_background, error_bubble_color).round(2)}</code>"
|
61
|
+
str << "Input BG / Text: <code>#{contrast(input_background, input_color).round(2)}</code>"
|
62
62
|
|
63
|
+
str << "<strong>Saturation</strong>"
|
64
|
+
str << "Error: <code>#{error_color.hsl.s.round(2) * 100} saturation</code>"
|
65
|
+
if conservative_background_light?
|
66
|
+
str << "Background: conservative light"
|
67
|
+
elsif conservative_background_dark?
|
68
|
+
str << "Background: conservative dark"
|
69
|
+
end
|
63
70
|
str.join("<br>")
|
64
71
|
end
|
65
72
|
|
data/lib/palat/version.rb
CHANGED
data/logo.png
ADDED
Binary file
|
data/palat.gemspec
CHANGED
@@ -19,7 +19,7 @@ Gem::Specification.new do |s|
|
|
19
19
|
|
20
20
|
s.homepage = 'http://github.com/dobtco/palat'
|
21
21
|
|
22
|
-
s.add_dependency 'chroma', '
|
22
|
+
s.add_dependency 'chroma', '>= 0.0.1', '< 0.2'
|
23
23
|
s.add_dependency 'chroma_wcag_contrast', '~> 0.0.1'
|
24
24
|
|
25
25
|
s.add_development_dependency 'fortitude'
|
metadata
CHANGED
@@ -1,29 +1,35 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: palat
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Adam Becker
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-
|
11
|
+
date: 2016-06-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: chroma
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
|
-
- - "
|
17
|
+
- - ">="
|
18
18
|
- !ruby/object:Gem::Version
|
19
19
|
version: 0.0.1
|
20
|
+
- - "<"
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '0.2'
|
20
23
|
type: :runtime
|
21
24
|
prerelease: false
|
22
25
|
version_requirements: !ruby/object:Gem::Requirement
|
23
26
|
requirements:
|
24
|
-
- - "
|
27
|
+
- - ">="
|
25
28
|
- !ruby/object:Gem::Version
|
26
29
|
version: 0.0.1
|
30
|
+
- - "<"
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '0.2'
|
27
33
|
- !ruby/object:Gem::Dependency
|
28
34
|
name: chroma_wcag_contrast
|
29
35
|
requirement: !ruby/object:Gem::Requirement
|
@@ -83,6 +89,7 @@ files:
|
|
83
89
|
- lib/palat/fake_rgba.rb
|
84
90
|
- lib/palat/generator.rb
|
85
91
|
- lib/palat/version.rb
|
92
|
+
- logo.png
|
86
93
|
- palat.gemspec
|
87
94
|
- script/cibuild
|
88
95
|
- script/deploy
|