Theme
When using the included CSS files @forsakringskassan/docs-generator/style or @forsakringskassan/docs-generator/style/site.css these CSS variables are available for customizing the visual appearance of the site.
Global
Global styling, e.g. default values.
| Variable | Default value | Description |
|---|---|---|
--docs-font-family |
arial, "Helvetica Neue", sans-serif |
Default font-family. |
--docs-font-weight |
normal |
Default font-weight. |
--docs-text-color-default |
#1b1e23 |
Default text color for regular text. |
--docs-text-color-discrete |
#5f6165 |
Default text color for discrete text (text that is less important, usually appears a bit dimmer than regular text |
--docs-text-color-link |
#4a52b6 |
Link text color. |
--docs-text-color-link-hover |
#1b1e23 |
Link text color. |
--docs-info-color |
#4a52b6 |
Default info color. |
--docs-info-background |
#f5f6fa |
Default info background. |
--docs-warning-color |
#ffbe10 |
Default warning color. |
--docs-warning-background |
#fffcf3 |
Default warning background. |
--docs-error-color |
#ca1515 |
Default warning color. |
--docs-error-background |
#fcf3f3 |
Default warning background. |
Contextmenu
Style related to contextual menus
| Variable | Default value | Description |
|---|---|---|
--docs-contextmenu-background-color |
#ffffff |
Context menu background color |
--docs-contextmenu-border-color |
#ddddde |
Context menu border color |
--docs-contextmenu-highlight-color |
#e7f0e9 |
Context menu highlight color |
--docs-contextmenu-link-color-default |
var(--docs-text-color-default) |
Context menu link default color |
--docs-contextmenu-link-color-hover |
var(--docs-text-color-default) |
Context menu link hover color |
--docs-contextmenu-link-background-hover |
#ddddde |
Context menu link hover background color |
Heading
Headings h1, h2, etc.
| Variable | Default value | Description |
|---|---|---|
--docs-heading-font-family |
var(--docs-font-family) |
- |
--docs-heading-font-weight |
var(--docs-font-weight) |
- |
--docs-heading-line-height |
1.4 |
- |
Header
Style related to page header
| Variable | Default value | Description |
|---|---|---|
--docs-header-text-color-default |
#1b1e23 |
--docs-text-color-default is overridden with this value. |
--docs-header-text-color-discrete |
#5f6165 |
--docs-text-color-discrete is overridden with this value. |
Menu
Style related to the sidebar menu.
| Variable | Default value | Description |
|---|---|---|
--docs-menu-width-expanded |
230px |
Width of sidebar in desktop resolution. |
Messagebox
Style related to markdown messageboxes.
| Variable | Default value | Description |
|---|---|---|
--docs-messagebox-details-border |
#bbbbbd |
Border color for details variant |
--docs-messagebox-details-background |
#f4f4f4 |
Background color for details variant |
--docs-messagebox-info-border |
var(--docs-info-color) |
Border color for info variant |
--docs-messagebox-info-background |
var(--docs-info-background) |
Background color for info variant |
--docs-messagebox-warning-border |
var(--docs-warning-color) |
Border color for warning variant |
--docs-messagebox-warning-background |
var(--docs-warning-background) |
Background color for warning variant |
--docs-messagebox-danger-border |
var(--docs-error-color) |
Border color for danger variant |
--docs-messagebox-danger-background |
var(--docs-error-background) |
Background color for danger variant |
Motd
MOTD processor
| Variable | Default value | Description |
|---|---|---|
--docs-motd-text-color |
var(--docs-text-color-discrete) |
Text color |
--docs-motd-info-accent-color |
#4a52b6 |
Accent color, info variant |
--docs-motd-info-background-color |
#f5f6fa |
background color, info variant |
--docs-motd-link-color |
var(--docs-text-color-discrete) |
Link color |
--docs-motd-hover-color |
var(--docs-text-color-default) |
Link color |
Tags
Style for documentation tags
| Variable | Default value | Description |
|---|---|---|
--docs-tags-optional-background-color |
transparent |
Optional tag background color |
--docs-tags-optional-border-color |
#5f6165 |
Optional tag border color |
--docs-tags-optional-text-color |
var(--docs-text-color-discrete) |
Optional tag text color |
Topnav
Style related to topnav
| Variable | Default value | Description |
|---|---|---|
--docs-topnav-background-color |
transparent |
Background color |
--docs-topnav-link-color-default |
var(--docs-text-color-default) |
Link color |
--docs-topnav-link-color-hover |
var(--docs-text-color-link-hover) |
Link hover color |
--docs-topnav-link-color-highlight |
var(--docs-text-color-link-hover) |
Link highlight color |
--docs-topnav-border-color-hover |
#afcfb5 |
Border hover color |
--docs-topnav-border-color-highlight |
#116a3e |
Border highlight color |
Version
Version processor
| Variable | Default value | Description |
|---|---|---|
--docs-version-text-color |
var(--docs-text-color-discrete) |
Text color |
--docs-version-link-color |
var(--docs-text-color-discrete) |
Link color |
--docs-version-hover-color |
var(--docs-text-color-default) |
Link color |
Cookie
Cookie processor
| Variable | Default value | Description |
|---|---|---|
--docs-cookie-background-color |
#f5f6fa |
Background color |
--docs-cookie-border-color |
#4a52b6 |
Border color |
Code
Code mark-up
| Variable | Default value | Description |
|---|---|---|
--docs-code-background-color |
#f4f4f4 |
Default code background. |
--docs-code-optional-background-color |
#e5e5e5 |
darker code background. |