SOURCE CODE: Uize.Widgets.ColorInfo.Css (view docs)

<%@ required ('Uize.Widgets.CssUtil'); %>
<%
  var _cssUtil = Uize.Widgets.CssUtil;
%>
.`` {
  display: inline-block;
  padding: 10px;
  margin-bottom: 0;
}

.`contents` {
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

.`heading` {
  font-family: "Courier New", "Courier";
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.`body` {
  padding: 5px;
  background: #fff;
}

.`swatch`, .`asBg`, .`asColor` {
  width: 105px;
  padding: 1px;
  border: 1px solid #666;
  font-size: 11px;
  text-align: center;
}

.`swatch` {
  height: 75px;
}

.`asColor` {
  position: relative;
}

.`onWhite`, .`onBlack` {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.`whiteText` {
  color: #fff;
}

.`blackText` {
  color: #000;
}

.`onWhite` {
  left: 0;
  background-color: #fff;
}

.`onBlack` {
  left: 50%;
  background-color: #000;
}

.`subheader` {
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 4px;
}

/*** styling for different sizes ***/
<%
  Uize.forEach (
    _cssUtil.sizes,
    function (_size,_sizeName) {
      var
        _sizeOuter = _size.outer,
        _sizeFont = Math.round (_sizeOuter * .5),
        _paddingTop = Math.floor ((_sizeOuter - _sizeFont) / 2)
      ;
%>  /*** <%= _sizeName %> ***/
    .`<%= _sizeName %>` .`heading` {
      font-size: <%= _sizeFont %>px;
      line-height: <%= _sizeFont %>px;
      padding: <%= _paddingTop %>px 0 <%= _sizeOuter - _sizeFont - _paddingTop %>px 0;
    }
<%    }
  );
%>