Inskinerator

This tool is more useful for creating new variations on the default skin.
For example, you can use `-D` to pass HTML color names to create a
[“fire” themed variant][d2]:

    ./inskinerator -b default \
        -D text-color=lightyellow \
        -D header-color=yellow \
        -D background-color=black \
        -D pri-accent-color=red \
        -D sec-accent-color=darkorange

Note that we don’t necessarily have to override any of the late-defined
colors, as they get the following defaults if not overridden:

| Variable         | Late-Defined Value           |
|------------------|------------------------------|
| title-color      | $pri-accent-color            |
| header-color     | $text-color                  |
| footer-color     | $text-color + 40% lightness  |
| ter-accent-color | inverse of $pri-accent-color |

Or, you can use HTML RGB specs to create this [“PDP-11/70” theme][d3]:

    ./inskinerator -b default \
        -D text-color=\#000 \
        -D header-color=\#B3003B \
        -D title-color=\#622A5A \
        -D pri-accent-color=\#B3003B \
        -D sec-accent-color=\#AE98CD \
        -D ter-accent-color=\#B3003B

Note that `background-color` isn’t needed: we got that from the default
skin.  We can’t do without “black” for the text color, since the default
uses [a very dark gray](/file/skins/default/vars.scss), not black.  But
note also that we pass such strings through as-is, so that HTML’s
allowance for the #000 shortcut works.

You may also mix HTML color names and RGB specs to create this
[mint green variant][d4] of the default skin:

     ./inskinerator -b default \
        -D text-color=\#003300 \
        -D header-color=darkgreen \
        -D title-color=green \
        -D background-color=mintcream \
        -D pri-accent-color=lightseagreen \
        -D sec-accent-color=\#CCFFE6 \
        -D ter-accent-color=darkgreen

[Fizzbuck Light][d5]:

    ./inskinerator -b default \
        -D text-color=black \
        -D pri-accent-color=\#3B579A \
        -D sec-accent-color=lightgray

    print <<USAGE;
usage: inskinerator --base/-b BASE [--override/-o OVERRIDE] \
        [--output/-f OUTPUT] [--define/-D VAR=VALUE]

    All skins allow overriding at least these variables:

        -D text-color=COLOR
        -D pri-accent-color=COLOR
        -D sec-accent-color=COLOR
        -D background-color=COLOR

        -D title-color=COLOR
        -D header-color=COLOR
        -D footer-color=COLOR
        -D ter-accent-color=COLOR

    The final group are late-defined variables, defined by default in
    terms of the first group.  If you don't override them, you get the
    default definitions without duplicating their late definitions.
    Thus, a "complete" variables-only override can be done by redefining
    only variables in the first group.

    VALUEs for COLOR variables are any legal CSS color: 'white',
    '#abcdef', '#888', etc.

    Output goes to stdout if you don't give a file name via --output/-f.

USAGE

# Build SCSS to compile
my $scss = $common_vars . $base_vars;
$scss .= $override_vars if defined $override_vars;
for my $vname (keys %vars) {
    $scss .= "\$$vname: $vars{$vname};\n";
}
$scss .= <<LATE_VARIABLES;
    \$footer-color:     adjust-color(\$text-color, \$lightness: +40) !default;
    \$title-color:      \$pri-accent-color !default;
    \$header-color:     \$text-color !default;
    \$ter-accent-color: invert(\$pri-accent-color) !default;
LATE_VARIABLES
$scss .= $base_adjust     if defined $base_adjust;
$scss .= $override_adjust if defined $override_adjust;
$scss .= $common_css;
$scss .= $base_css;
$scss .= $override_css    if defined $override_css;
$scss .= $override_prism  if defined $override_prism;
$scss .= $base_media      if defined $base_media;

  border-radius: 3px;
  padding: 2px;
}


/**** Headers, footers, menus, and titles ****/




h1      { font-size: 2.00em; margin-left: 10pt; }
h2      { font-size: 1.50em; margin-left: 20pt; }
h3      { font-size: 1.15em; margin-left: 30pt; }
h4      { font-size: 1.05em; margin-left: 50pt; }
h5, pre {                    margin-left: 50pt; }

.header {
  .status, .title { font-weight: bold; }
  .status {
    color: $header-color;
    text-align: right;
    white-space: nowrap;
  }
}
.title {
  h1 {
    color: $title-color;
    font-size: 2.00em;
    &:after { color: $header-color; }
  }
}
.submenu {
    a, label { color: $header-color; }
}

  text-decoration: underline;
}


/* Page title, above menu bars */

.title {
  color: $title-color;
  float: left;
}
.title h1 {
  display: inline;

}
.title h1:after {
  content: " / ";
  color: $light-text-color;
  font-weight: normal;
}
.status {

  text-decoration: none;
  color: $light-text-color;
  border-right: 1px solid $sec-accent-color;
}
.mainmenu a.active,
.mainmenu a:hover {
  color: $dark-text-color;
  border-bottom: 2px solid $ter-accent-color;
}
div#hbdrop {
  background-color: $background-color;
  border: 1px solid $dark-text-color;
  border-top: $background-color;
  border-radius: 0 0 0.5em 0.5em;
  display: none;

/* Main document area; elements common to most pages. */

.content {
  padding-top: 10px;
  font-size: 0.8em;
  color: $text-color;

  h1, h2, h3, h4, h5 {
    color: $header-color;
  }
}
.content blockquote {
  padding: 0 15px;
}
.content h1 {
  font-size: 1.25em;
}

$text-color:       hsl(0, 0, 27);       /* #454545 */
$pri-accent-color: hsl(210, 53, 51);    /* #4082C4 */
$sec-accent-color: hsl(0, 0, 92);       /* #EBEBEB */
$background-color: white;               /* #FFFFFF */