Add styling for the html VAR element, which is currently unaddressed by PicoCSS

[pbarney]

The Problem:

Currently, the <var> element is not addressed by PicoCSS (at least as far as version 2.1.1).

Background:

<var> represents a symbol whose value can vary and is stylistically similar to the <code>,<samp> and <kbd> elements, but under PicoCSS, it currently has no styling other than the browser defaults.

As one of the five HTML text-level elements for code and computer-related content (<code>, <var>, <kbd>, <samp>, and <pre>), defaults for <var> are generally the same as <code>, <samp>, and <kbd>. The few differences (a larger, italicized serif font) are listed in a CSS block below, but otherwise, the style PicoCSS uses on the other three elements would be a great match for <var>.

It's of great use to anyone who writes HTML content about math and programming, and as someone who frequently writes programming articles (and is in the middle of switching to PicoCSS), I'd love to have this wrapped into the source rather than having to add my own separate styles for <var>.

My request:

Please include var in the same declaration blocks where you define samp, so that it inherits PicoCSS’s existing code-element styling.

Someone might suggest, "just use <samp> or <code> instead," but consistent semantic meaning in HTML markup is very important to me and others, especially when providing javascript interactions where readers might test variables directly to see different results.

Default Browser Style Differences between <var> and <code>/<samp>/<kbd>:

These are the only differences between <var> and the other elements in the default browser styles:

var {
    font-family: serif;
    font-size: 16px;
    font-style: italic;
}

code, samp, kbd {
    font-family: monospace;
    font-size: 13px;
    font-style: normal;
}

How I'm currently mitigating the problem:

Currently, I need to add the following custom CSS to make <var> conform to PicoCSS styling:

var {
  --pico-font-family: var(--pico-font-family-monospace);
  font-size: 0.875em;
  font-family: var(--pico-font-family);
  border-radius: var(--pico-border-radius);
  background: var(--pico-code-background-color);
  color: var(--pico-code-color);
  font-weight: var(--pico-font-weight);
  line-height: initial;
  display: inline-block;
  padding: 0.375rem;
}
pre var {
  font-size: inherit;
  font-family: inherit;
}
pre > var {
  display: block;
  padding: var(--pico-spacing);
  background: none;
  line-height: var(--pico-line-height);
}

Additionally, I remove the default italic styling as well with font-style: inherit, but that is a personal choice.

Please consider this addition. I think it would make PicoCSS’s code-related element support complete and consistent.

[tonystar]

✅ fixed in Blades CSS via @anyblades/pico v2.4.0

cc #640