How best to document color variables in the style guide?

[webmaven]

I am beginning a style guide project, and am looking for more examples of using KSS (which is brilliant, BTW). Right now, I am wondering how best to display 'swatches' of color variables.

I have a variables.less file that includes definitions such as:

@base:#fff;
@baseMed: darken(@base, 5%);
@baseLess: darken(@base, 15%);
@baseMin: darken(@base, 30%);

I could add a table where the cells have bgcolor, or perhaps a set of spans of class swatch, but I am sure others have implemented better solutions that I would prefer to borrow.

[webmaven]

I am currently using the following markup for documentation in my variables.less file (that also has the variable definitions):

/* ## Colors ## 

<div id="colors">
<div class="callout-grid color-grid row">
              <div id="base">
                <h3>Base</h3>
                <dl>
                  <dt>@base</dt>
                  <dd>#ffffff</dd>
                  <dt class="med">@baseMed</dt>
                  <dd>5% darker</dd>
                  <dt class="less">@baseLess</dt>
                  <dd>15% darker</dd>
                  <dt class="min">@baseMin</dt>
                  <dd>30% darker</dd>
                </dl>
                <p>The underlying color of the site. Commonly used for background and for elements placed on reversed or colored backgrounds.</p>
              </div>
              <div id="inverse">
                <h3>Inverse</h3>
                <dl>
                  <dt>@inverse</dt>
                  <dd>#000000</dd>
                  <dt class="med">@inverseMed</dt>
                  <dd>10% lighter</dd>
                  <dt class="less">@inverseLess</dt>
                  <dd>20% lighter</dd>
                  <dt class="min">@inverseMin</dt>
                  <dd>40% lighter</dd>
                </dl>
                <p>The rough opposite of @base. Used for base text and other high-contrast items.</p>
              </div>
              <div id="accent">
                <h3>Accent</h3>
                <dl>
                  <dt>@accent</dt>
                  <dd>#518dcf</dd>
                  <dt class="med">@accentMed</dt>
                  <dd>5% darker</dd>
                  <dt class="less">@accentLess</dt>
                  <dd>10% darker</dd>
                  <dt class="min">@accentMin</dt>
                  <dd>20% darker</dd>
                </dl>
                <p>The main spot color for the site. In this case, a medium-dark blue.</p>
              </div>
              <div id="accent-alt">
                <h3>AccentAlt</h3>
                <dl>
                  <dt>@accentAlt</dt>
                  <dd>@accent, 15% lighter</dd>
                  <dt class="med">@accentAltMed</dt>
                  <dd>@accent, 20% lighter</dd>
                  <dt class="less">@accentAltLess</dt>
                  <dd>@accent, 40% lighter</dd>
                </dl>
                <p>An alternate version of the Primary spot color.</p>
              </div>
            </div>
          </div>

 */

And the less to style this is in another file that currently gets @imported into Kalei's:

@import url('../../common/css/variables.less');

#colors {
  .color-grid {
    padding: 1.5em;
    p {
    clear: both;
    padding-top: 1em;
    }
    dl {
      margin-bottom: 0;
      dt { clear: left; }
      dt, dd {
        border-bottom: 1px dotted @baseMed;
        padding-top: .25em;
        float: left;
        width: 48%;
      }
      dt:before {
        content: " "; // just a non-breaking space. We're creating a box.
        display: block;
        height: 1.25em;
        width:  1.25em;
        border: 1px solid @baseMin;
        float: left;
        margin-right: .25em;
      }
    }
    div {
    width: 38%;
    float: left;
    }
    #base {
      dt:before { background-color: @base; }
      .med:before { background-color: @baseMed; }
      .less:before { background-color: @baseLess; }
      .min:before { background-color: @baseMin; }
    }
    #inverse {
      dt:before { background-color: @inverse; }
      .med:before { background-color: @inverseMed; }
      .less:before { background-color: @inverseLess; }
      .min:before { background-color: @inverseMin; }
    }
    #accent {
      dt:before { background-color: @accent; }
      .med:before { background-color: @accentMed; }
      .less:before { background-color: @accentLess; }
      .min:before { background-color: @accentMin; }
    }
    #accent-alt {
      dt:before { background-color: @accentAlt; }
      .med:before { background-color: @accentAltMed; }
      .less:before { background-color: @accentAltLess; }
    }
  }
}
.color-blocks li {
  a:before {
        content: " "; // just a non-breaking space. We're creating a box.
        display: block;
        height: 1.25em;
        width:  1.25em;
        border: 1px solid @baseMin;
        float: left;
        margin-right: .25em;
  }
  a[href="#base"]:before {background-color: @base;}
  a[href="#inverse"]:before {background-color: @inverse;}
  a[href="#accent"]:before {background-color: @accent;}
  a[href="#accent-alt"]:before {background-color: @accentAlt;}
}

[webmaven]

Was this code at all useful? Should I just close the issue?

[MartinMuzatko]

I'm interested in this as well, a already built in solution to document variables would be great! I have yet to try out the solution outlined above