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.
See Content width for optional maximum widths for content, text and live examples.
Global
Global styling, e.g. default values.
| Variable | Default value | Description |
|---|---|---|
--docs-background-color |
#ffffff |
Default background color |
--docs-font-family |
"Inter Variable", sans-serif |
Default font-family. |
--docs-line-height |
1.5 |
Default line-height. |
--docs-font-line-height |
var(--docs-line-height) |
Deprecated alias for --docs-line-height. Set --docs-line-height to customize line height. |
--docs-font-size |
16px |
Default font-size. |
--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. |
Badge
Component badges
| Variable | Default value | Description |
|---|---|---|
--docs-badge-component-color |
var(--docs-text-color-default) |
Component badge text color |
--docs-badge-component-background |
#ddddde |
Component badge background color |
--docs-badge-component-border |
#ddddde |
Component badge border color |
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-font-weight-h1 |
var(--docs-font-weight) |
Default font-weight for h1 headings. |
--docs-heading-font-weight-h2 |
var(--docs-font-weight) |
Default font-weight for h2 headings. |
--docs-heading-font-weight-h3 |
var(--docs-font-weight) |
Default font-weight for h3 headings. |
--docs-heading-font-weight-h4 |
var(--docs-font-weight) |
Default font-weight for h4 headings. |
--docs-heading-font-weight-h5 |
var(--docs-font-weight) |
Default font-weight for h5 headings. |
--docs-heading-font-weight-h6 |
var(--docs-font-weight) |
Default font-weight for h6 headings. |
--docs-heading-letter-spacing-h1 |
-0.5px |
Default letter-spacing for h1 headings. |
--docs-heading-letter-spacing-h2 |
-0.3px |
Default letter-spacing for h2 headings. |
--docs-heading-letter-spacing-h3 |
-0.3px |
Default letter-spacing for h3 headings. |
--docs-heading-letter-spacing-h4 |
-0.3px |
Default letter-spacing for h4 headings. |
--docs-heading-line-height |
1.4 |
- |
--docs-heading-margin-bottom-h1 |
1.5rem |
Default margin-bottom for h1 headings. |
--docs-heading-margin-bottom-h2 |
1rem |
Default margin-bottom for h2 headings. |
--docs-heading-margin-bottom-h3 |
1rem |
Default margin-bottom for h3 headings. |
--docs-heading-margin-bottom-h4 |
0.5rem |
Default margin-bottom for h4 headings. |
--docs-heading-margin-bottom-h5 |
0.5rem |
Default margin-bottom for h5 headings. |
--docs-heading-margin-bottom-h6 |
0.5rem |
Default margin-bottom for h6 headings. |
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. |
--docs-header-background-color |
transparent |
Background color for page header. |
--docs-header-border-color |
#ddddde |
Border color for page header. |
Focus
Style for outline on focus
| Variable | Default value | Description |
|---|---|---|
--docs-focus-box-shadow |
0 0 0 2px #1b1e23, 0 0 0 4px #ffffff,0 0 0 6px #1b1e23 |
Triple-layer focus ring for accessibility. |
Footer
Style related to page footer
| Variable | Default value | Description |
|---|---|---|
--docs-footer-text-color-default |
#1b1e23 |
--docs-text-color-default is overridden with this value. |
--docs-footer-text-color-discrete |
#5f6165 |
--docs-text-color-discrete is overridden with this value. |
--docs-footer-text-color-link |
#4a52b6 |
Link color |
--docs-footer-text-color-link-hover |
#1b1e23 |
Link color |
--docs-footer-background-color |
transparent |
Background color for page footer. |
--docs-footer-border-color |
#ddddde |
Border color for page footer. |
Menu
Style related to the sidebar menu.
| Variable | Default value | Description |
|---|---|---|
--docs-menu-background-color |
transparent |
Background color for sidebar. |
--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 |
Outline
Style related to outline
| Variable | Default value | Description |
|---|---|---|
--docs-outline-heading-heading-color |
#5f6165 |
Header color |
--docs-outline-list-border-color |
#ddddde |
Outline border color in small device mode |
--docs-outline-active-border-color |
#116a3e |
Border color for the current active item |
--docs-outline-hover-background-color |
#ddddde |
Background color during hover |
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 |
--docs-tags-deprecated-background-color |
var(--docs-error-color) |
Deprecated tag background color |
--docs-tags-deprecated-border-color |
#1b1e23 |
Deprecated tag border color |
--docs-tags-deprecated-text-color |
var(--docs-error-background) |
Deprecated 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 |
Search
Style related to search processor
| Variable | Default value | Description |
|---|---|---|
--docs-search-text-color |
inherit |
--docs-text-color-default is overridden with this value. |
--docs-search-background-color |
var(--docs-background-color) |
Background color for search dialog |
--docs-search-border-color |
#000 |
Border color for search dialog |
--docs-search-button-color-hover |
#f4f4f4 |
Button hover in top navigation |
Version
Version processor
| Variable | Default value | Description |
|---|---|---|
--docs-version-text-color |
var(--docs-text-color-discrete) |
--docs-text-color-default is overridden with this value. |
--docs-version-link-color |
var(--docs-text-color-discrete) |
Link color |
--docs-version-hover-color |
var(--docs-text-color-default) |
Link color |
--docs-version-background-color |
var(--docs-background-color) |
Background color for version dialog |
--docs-version-border-color |
#000 |
Border color for version dialog |
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-border-color |
#ddddde |
Default code border. |
--docs-code-optional-background-color |
#e5e5e5 |
darker code background. |
Navigation
Style related to navigation
| Variable | Default value | Description |
|---|---|---|
--docs-navigation-active-background |
#ddd |
Link active background color |
--docs-navigation-highlight-color |
#116a3e |
Link highlight color |
--docs-navigation-hover-color |
#ddd |
Link hover color |