palat 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -5
  3. data/Rakefile +271 -52
  4. data/circle.yml +1 -0
  5. data/lib/palat/generator.rb +16 -9
  6. data/lib/palat/version.rb +1 -1
  7. data/logo.png +0 -0
  8. data/palat.gemspec +1 -1
  9. metadata +11 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 31fb0db12819677d6316f8d7e14604b6dc21cb70
4
- data.tar.gz: 187c5f184156df83a445fd9baca0f7f245055439
3
+ metadata.gz: c9a3b69fb303d36b31c57097ad97af5b3dfa3e53
4
+ data.tar.gz: 98f290a1771c92360f762cd9426430e854e22941
5
5
  SHA512:
6
- metadata.gz: 95bb594dfac5ed4cd53a1b47605ddab01ba70a417547f61ca7729ff58a99053d79e2cfd8d05511e5e7274da1f6b0ee3c0f4b52dc1c6a7aac8d8f4080098f51df
7
- data.tar.gz: 7d26d6df2de1af2e18d037c0f4086d5a2e3f3b9afead34cc7d3c4b73230043459856cd3e5a682f651bf08960388301886d00f260d28ce096be55b901306b582e
6
+ metadata.gz: 7a8bada548f37e6b7d737e2f5693d1f0ebddc645f8fd1ae444ae340eef3c734effaf63a4a070f70fac38fb71a19102acff282be94a75f0d21197b740fa9d3b60
7
+ data.tar.gz: 65f44d5af982fc53a708cdb85cda6caee8f2109e36ecad576c901d1449a23c7cc444a4f253524a2b5b63b8fc6b2db705453329808cfc41de3e6b7a5d6b6d01e2
data/README.md CHANGED
@@ -1,13 +1,10 @@
1
- palat
2
- =======
3
-
4
1
  ![palat logo](https://dobt-captured.s3.amazonaws.com/ajb/palat_logo.png)
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 'Color Test'
21
- script(src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')
22
- script %{
23
- $(document).on('keydown', function(e){
24
- if (e.keyCode == 192) $('.debug').toggle();
25
- if (e.keyCode == 70) $('.input').toggle();
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: 0;
32
- font-size: 1.125rem;
33
- line-height: 2rem;
34
- font-family: sans-serif;
35
- font-weight: 400;
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: 5px 0;
42
- font-size: 4.29rem;
99
+ margin: 0 0 1.5rem;
100
+ font-size: 3rem;
43
101
  line-height: 5rem;
44
- font-family: serif;
45
- font-weight: 100;
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
- width: 25%;
54
- padding: 25px;
55
- display: inline-block;
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: 10px;
75
- font-size: 13px;
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&nbsp;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: 'color_test_section', style: "background-color: #{generator.background_color.to_hex}") {
92
- h2('Header', style: "color: #{generator.base_color.to_hex}")
93
- label {
94
- span 'Text ', style: "color: #{generator.base_color.to_hex}"
95
- abbr '*', style: "color: #{generator.error_color.to_hex}"
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
@@ -8,4 +8,5 @@ deployment:
8
8
  commands:
9
9
  - git config --global user.email "ops@dobt.co"
10
10
  - git config --global user.name "CircleCI"
11
+ - gem install rake
11
12
  - script/deploy
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}: #{v}"
52
+ str << "#{k}: <code>#{v}</code>"
51
53
  end
52
54
 
53
- str << "Background brightness: #{background_color.brightness}"
55
+ str << "Background brightness: <code>#{background_color.brightness}</code>"
54
56
 
55
- str << "Ratio: #{contrast(background_color, base_color).round(2)}"
56
- str << "Error Ratio: #{contrast(background_color, error_color).round(2)}"
57
- str << "Error Bubble Ratio: #{contrast(error_bubble_background, error_bubble_color).round(2)}"
58
- str << "Input ratio: #{contrast(input_background, input_color).round(2)}"
59
- str << "Error satur: #{error_color.hsl.s.round(2)}"
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
@@ -1,3 +1,3 @@
1
1
  module Palat
2
- VERSION = '0.1.0'
2
+ VERSION = '0.1.1'
3
3
  end
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', '~> 0.0.1'
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.0
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-03-09 00:00:00.000000000 Z
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