CSS: base
* — The opt-in global reset: box-sizing, the page surface, base text colour and font, color-scheme, and link defaults.
Source: base.css
Usage
css
@import "@pantoken/components/base.css";Examples
html
<html>
<body>
<a href="/">A styled link on the base surface.</a>
</body>
</html>Pseudo-elements
| Pseudo-element | Description |
|---|---|
::after | Included in the universal box-sizing: border-box reset so its generated box sizes predictably. |
::before | Included in the universal box-sizing: border-box reset so its generated box sizes predictably. |
::selection | Tints highlighted text with a translucent primary navigation colour. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-background-page | <color> | light-dark(#F2F4F5, #10141A)LightDark |
--instui-color-text-base | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-color-text-interactive-navigation-primary-base | <color> | light-dark(#2369A4, #7FB4F1)LightDark |
--instui-color-text-interactive-navigation-primary-hover | <color> | light-dark(#1A5281, #ACCDF7)LightDark |
--instui-component-text-content-font-size | <length> | 1rem |
--instui-component-text-content-line-height | <percentage> | 150% |
--instui-focus-outline-color | <color> | invert | — |
--instui-focus-outline-color-danger | <color> | invert | — |
--instui-focus-outline-color-inverse | <color> | invert | — |
--instui-focus-outline-color-start | <color> | invert | — |
--instui-focus-outline-color-success | <color> | invert | — |
--instui-focus-outline-inset | — | — |
--instui-focus-outline-offset | <length> | — |
--instui-focus-outline-radius | <length> | — |
--instui-focus-outline-style | auto | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | — |
--instui-focus-outline-transition | — | — |
--instui-focus-outline-width | <length> | — |
--instui-font-family-base | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |