Base Styles

Applies common base styles for HTML elements. This includes root font settings, colors, line heights, spacing, default display rules for semantic elements, form input styles, code blocks, tables, lists, and interactive elements like links. It ensures a consistent foundation across your UI.

Signature:

@mixin use-base();

Example:

@include termeh.use-base();

Dependencies

Base module uses the following Termeh global var():

Component	Type	Usage	Default
base → color	Color	Document background color	white
base → foreground	Color	Default text color	black
base → section	Color	Background color for <blockquote>, <code>, and <pre>	null
base → separator	Color	Color for <hr> and list decorators	null
font → family	List	Default font family	null
font → size	Number	Default font size	12px
font → weight	String	Default font weight	normal
mono → family	List	<code> and <pre> font family	null
mono → size	Number	<code> and <pre> font size	null
mono → weight	String	<code> and <pre> font weight	null
strong → foreground	Color	<strong> and <th> text color	null
strong → weight	String	<strong> and <th> font weight	bold
gap → micro	Number	Spacing between list items	8px
gap → macro	Number	Spacing between blocks	1.6em
base → direction	String	Document text direction	ltr
base → min-width	Number	Document minimum width	300px
line-height → normal	Number	Default line height	1.6em
radius → normal	Number	<blockquote> border radius	null

---

Base module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
primary	Selection background, scrollbar, and input accent color	error
primary → readable	Link color	null
primary → foreground	Selection text color	null

---

Base module uses the following Termeh size():

Size	Usage	Default
small	<small> font size	error