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 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
@@ -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
 
@@ -1,3 +1,3 @@
1
1
  module Palat
2
- VERSION = '0.1.0'
2
+ VERSION = '0.1.1'
3
3
  end
Binary file
@@ -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