Should we reinstate boilerplate color swatches?

[tylersticka]

The only two projects that use Drizzle so far have both restored the color swatches. That suggests to me that we should consider adding them back.

I'd like if we abandoned the design we inherited from Fabricator. Some ideas for improvement might be:

• Put gutters between swatches to avoid any unrealistic (and unnecessary) color combinations.
• Avoid situations where a smaller amount of secondary colors would appear more prominent than primary colors.
• Include additional color information where applicable, such as class names for color-related helpers.

Food for thought! 🍔

[erikjung]

I think that having them included is fine. I agree with the design changes, and I also wonder if we can achieve them using SUIT CSS classes instead of making component CSS for them.

This gets pretty close:

{{#each drizzle.data.toolkit.contents.colors}}
  <ul class="drizzle-Grid drizzle-Grid--withGutter drizzle-u-listUnstyled">
    {{#each this}}
      <li class="
       drizzle-Grid-cell
       drizzle-u-sizeFull
       drizzle-u-md-sizeFill">
        <div style="border-top: 8em solid {{this}}"></div>
        <strong>{{@key}}</strong>
        <br>{{this}}
      </li>
    {{/each}}
  </ul>
{{/each}}

[tylersticka]

We could also use an inline <svg> element if we wanted to make the <img> act like an actual image...

<svg viewBox="0 0 300 150" preserveAspectRatio="none" style="width: 100%; height: 8em;">
  <rect width="100%" height="100%" fill="{{this}}"/>
</svg>

[erikjung]

That seems like what some would call a better idea 👍

[megnotarte]

Small

[tylersticka]

@nicolemors @saralohr @erikjung @mrgerardorodriguez How do we feel about this prototype I whipped up?

Instead of a border-top, each swatch is an inline <svg>. This has a few benefits. Firstly, the sample actually has semantic meaning now... I'm marking this up with <figure> because, even if no CSS loads, the image will be retained. But it also means the size can be determined in the markup simply by adjusting the width and height attributes of the element.

This also makes it easy to include a very faint semi-transparent stroke around the sample, helping the lighter colors stand out against any background.

[saralohr]

I dig it.

[erikjung]

@tylersticka I like this too.

[gerardo-rodriguez]

Nice! I agree, great work @tylersticka! 👍

[tylersticka]

Thanks, all!

Just to confuse things, I also did this variation: http://codepen.io/tylersticka/pen/reowXa

I don't think I like it as much because I find it slightly harder to read. But figured I'd share just for the heck of it. 😁

[gerardo-rodriguez]

@tylersticka Oh, neat! I hadn't heard of TinyColor, that's cool. I like the idea, but you are right, some of the white text color is a bit harder to read.

[saralohr]

I do like the cleanliness of R3, but the color name info is kinda nice in R2, and it's a tad easier to read. I'm good with either of these options.