[wp-trac] [WordPress Trac] #25094: Twenty Fourteen: Audit Theme Customization Options

[WordPress Trac]

#25094: Twenty Fourteen: Audit Theme Customization Options
------------------------------+--------------------
 Reporter:  celloexpressions  |       Owner:
     Type:  enhancement       |      Status:  new
 Priority:  normal            |   Milestone:  3.8
Component:  Bundled Theme     |     Version:  trunk
 Severity:  normal            |  Resolution:
 Keywords:  has-patch         |
------------------------------+--------------------

Comment (by celloexpressions):

 [attachment:25094-accent-color.diff] is a first-pass at an accent color
 option. The value defined by the color picker overrides all instances of
 {{{#24890d}}} from {{{style.css}}}.

 Additionally, alternate shades are generated to replace the two other
 default shades of green, {{{#35921f}}} and {{{#5ff23d}}}. Here are some
 notes on the direction I took with the math for the offsets I used. Note
 that we need to adjust the default colors slightly:
 {{{
 1. Base color: links, ::selection, search/social default
 #24890d = rgb(36,137,13)

 2. Search/social box hover/active, button hover
 #35921f = rgb(53,146,31)
 base offset: (17,9,18)
 proposed generated offset: +14
 resulting default value: #32971b = rgb(50,151,27)

 3. Link hover, active buttons
 #5ff23d = rgb(95,242,61)
 base offset: (59,105,48)
 proposed generated offset: +71
 resulting default value: #6bd054 = rgb(107,208,84) (visually muted but
 works well)

 alternate option for 3: offset of 54 but use 105 for highest base value
 r/g/b
 resulting default value: #5af243 = rgb(90,242,67)
 }}}

 The algorithm works by converting to rgb, adding the offset value to each
 r/g/b value, then converting back. Applying the same offset to each vaalue
 ensures a similar hue with primarily a change in brightness.

 The selectors are currently a bit verbose, but that's what we have in
 {{{style.css}}} right now (I concatenated all instances of each color).
 Because we're generating colors and there are so many selectors, I think
 it's best to stick with {{{'transport' => 'refresh'}}}. I'd also rather do
 the output in {{{wp_head}}} so we can keep all of the customizer stuff in
 {{{customizer.php}}} (which will pretty much only have this once the
 social links are removed). We can also apply these customized colors to
 the editor styles; probably only needs the base color, for links and
 ::selection.

 In terms of the UI, this is fantastic. Users can use a very wide range of
 colors without things visually breaking (even fairly light/dark), and the
 generated variants seem to "just work." The variants are subtle enough
 that I don't think many users will want to customize them separately, and
 by generating them from the original color, Twenty Fourteen retains a
 cohesive look. Since this changes **all** of the non-grayscale colors in
 the theme, the resulting look is pretty custom with minimal effort.

 Next step is to discuss possible improvements to the implementation and
 address any concerns.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/25094#comment:17>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software