@voraus/css

The voraus look as plain class names, for any page that can load a stylesheet. This is the layer that reaches the HTML which Sphinx and Doxygen generate and vdoc hosts, where no React component can go.

Usage

<link rel="stylesheet" href="voraus.css" /> <button class="voraus-btn voraus-btn--gradient">Start</button>

@voraus/tokens is a peer dependency: its stylesheet declares every value this one reads.

The button variants are MUI's words

text, outlined and contained are the variants MUI already names, and gradient is the one addition. Sharing the vocabulary means a Sphinx page and a React app do not call the same thing two different things, and the MUI layer adds a theme rather than a second set of names.

The gradient button draws the brand gradient, as vorausrobotik.com sets its primary button. The shape of every variant comes from the control tokens, so the same class draws the pill of the website and the square control of the console.

Steps count themselves

.voraus-step colors its point with the color the gradient has where the step stands. It works that out from its own position with sibling-index() and sibling-count(), so neither the markup nor a script states it. A browser without them draws every point at the start of the gradient. A step without a label is labeled with its number by the stylesheet.

Tabs are found by their role

.voraus-tabs draws every element in it with role="tab", and the one with aria-selected="true" as the chosen one. Markup written by someone else, such as the tabs of Docusaurus, gets the same row, and the attributes are needed anyway, so a screen reader announces the tabs as tabs.

The mark of the header

The header shows the wordmark while it has room for it beside the actions, and the symbol once it has not. A container query on the brand decides it, so it needs no script. It applies to a brand that holds both marks:

<a class="voraus-header__brand" href="/" aria-label="voraus robotik">
  <span class="voraus-header__wordmark">
    <img class="voraus-logo voraus-logo--light" src="wordmark-gradient.svg" alt="" />
    <img class="voraus-logo voraus-logo--dark" src="wordmark-gradient-negative.svg" alt="" />
  </span>
  <span class="voraus-header__symbol">
    <img class="voraus-logo" src="symbol-white-on-gradient.svg" alt="" />
  </span>
</a>

A brand without .voraus-header__symbol keeps its width and never switches.

One script, for the header

header.js is the one file here that is not a stylesheet. Whether the links of a header still fit on one line is a question CSS cannot answer across browsers, so it measures that and sets data-collapsed on the header, which header.css reads:

<script type="module">
  import { observeHeader } from '@voraus/css/header.js'
  observeHeader(document.querySelector('.voraus-header'))
</script>

Without it the header still renders and its menu still opens, but the links never move into the menu. VorausAppBar in @voraus/react calls the same function.

Rules this package holds itself to

No value is written here. The tests fail on a literal hex, rgb() or hsl(), and on a var() naming a token that @voraus/tokens does not declare. The second check matters because the two packages are released separately: without it a renamed token shows up as a page rendering with no color at all, and CSS reports nothing.

Fonts

Not loaded here. Roboto belongs to the asset layer, and a page without it falls through to the system stack named in --voraus-font-family-body.