Docs
This page document all settings you can use to adapt the design, the colors used and other global variables.Settings
| property | default | values |
|---|---|---|
--oli-s-magic
Make opinionated design decisions based on the markup
|
true
|
true |
false
|
--oli-s-layout
Page layout
|
horizontal
|
horizontal |
vertical
|
--oli-s-scroll-behavior
Always auto if prefers-reduced-motion is active
|
smooth
|
smooth |
auto
|
--oli-s-font-stack
Based on modernfontstacks.com
|
transitional
|
transitional |
geometric |
old |
humanist |
slab-serif |
monospace-slab-serif
|
--oli-s-page-max-width
Maximum width of the page
|
80rem
|
<length-percentage>
|
--oli-s-page-width
Page width
|
100%
|
<length-percentage>
|
--oli-s-page-start-column-width
Width of the start column
|
16rem
|
<length-percentage>
|
--oli-s-page-base-font-size
Base font size
|
var(--oli-g-text-size-base)
|
<length-percentage>
|
--oli-s-page-text-scale
Scalefactor for the page font size
|
1.4
|
<number>
|
--oli-s-page-line-height
Default line height of running text
|
1.7
|
<number> |
<length-percentage>
|
--oli-s-page-padding
Padding for header, main, footer
|
2rem
|
<length-percentage>
|
--oli-s-page-background-color
Background color for the page
|
var(--oli-g-colors-color-5)
|
<color>
|
--oli-s-page-color
Text color for the page
|
var(--oli-g-colors-black)
|
<color>
|
--oli-s-content-max-width
Maximum width for p, ol, ul, figure, blockquote, picture
|
68ch
|
<length-percentage>
|
--oli-s-content-vertical-offset
Extra block-start padding for the content in vertical layouts
|
initial
|
<length-percentage>
|
--oli-s-content-spacing
|
var(--oli-g-spacing-m)
|
<length-percentage>
|
--oli-s-heading-1-line-height
|
1.1
|
<number> |
<length-percentage>
|
--oli-s-heading-1-color
|
var(--oli-g-colors-color-1)
|
<color>
|
--oli-s-heading-1-font-weight
|
600
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-heading-1-margin-block
|
revert-layer
|
<length-percentage>
|
--oli-s-heading-1-scalefactor
|
7
|
<number>
|
--oli-s-heading-2-line-height
|
1.2
|
<number> |
<length-percentage>
|
--oli-s-heading-2-color
|
var(--oli-g-colors-color-1)
|
<color>
|
--oli-s-heading-2-font-weight
|
600
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-heading-2-margin-block
|
var(--oli-g-spacing-xl) var(--oli-g-spacing-l)
|
<length-percentage>
|
--oli-s-heading-2-scalefactor
|
5
|
<number>
|
--oli-s-heading-3-line-height
|
1.2
|
<number> |
<length-percentage>
|
--oli-s-heading-3-font-weight
|
600
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-heading-3-margin-block
|
var(--oli-g-spacing-xl) var(--oli-g-spacing-m)
|
<length-percentage>
|
--oli-s-heading-3-scalefactor
|
4
|
<number>
|
--oli-s-heading-4-line-height
|
1.2
|
<number> |
<length-percentage>
|
--oli-s-heading-4-font-weight
|
500
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-heading-4-margin-block
|
var(--oli-g-spacing-m) var(--oli-g-spacing-s)
|
<length-percentage>
|
--oli-s-heading-4-scalefactor
|
3
|
<number>
|
--oli-s-heading-5-scalefactor
|
2
|
<number>
|
--oli-s-heading-6-scalefactor
|
1
|
<number>
|
--oli-s-section-margin
|
{g-spacing.xxxl}
|
<length-percentage>
|
--oli-s-link-color
|
var(--oli-g-colors-color-3-600)
|
<color>
|
--oli-s-link-color-visited
|
var(--oli-g-colors-color-4-600)
|
<color>
|
--oli-s-states-error
|
var(--oli-g-colors-color-4-500)
|
<color>
|
--oli-s-states-highlight
|
var(--oli-g-colors-color-2-100)
|
<color>
|
--oli-s-header-background-color
|
var(--oli-g-colors-color-5-100)
|
<color>
|
--oli-s-header-border-image
|
conic-gradient(oklch(from var(--oli-s-header-background-color) l c h / 0.5) 0 0) fill 1 / /0 50vw
|
<border-image-source> |
<border-image-slice> |
<border-image-width> |
<border-image-outset> |
<border-image-repeat>
|
--oli-s-header-color
|
var(--oli-g-colors-color-1)
|
<color>
|
--oli-s-header-margin-block-end
|
var(--oli-g-spacing-l)
|
<length-percentage>
|
--oli-s-header-title-margin-block-end
Only in vertical layouts
|
var(--oli-g-spacing-xxl)
|
<length-percentage>
|
--oli-s-header-logo-inline-size
Only in vertical layouts
|
150px
|
<length-percentage>
|
--oli-s-main-nav-gap
|
var(--oli-g-spacing-m)
|
<length-percentage>
|
--oli-s-main-nav-gap-vertical
|
var(--oli-g-spacing-xxs)
|
<length-percentage>
|
--oli-s-main-nav-color
|
var(--oli-g-colors-color-4-500)
|
<color>
|
--oli-s-main-nav-color-active
|
var(--oli-g-colors-color-3-700)
|
<color>
|
--oli-s-main-nav-text-scale
|
1.5
|
<number>
|
--oli-s-footer-margin-block-start
|
var(--oli-g-spacing-xl)
|
<length-percentage>
|
--oli-s-figure-background-color
|
var(--oli-g-colors-color-2)
|
<color>
|
--oli-s-blockquote-margin-block
|
var(--oli-g-spacing-xxl)
|
<color>
|
--oli-s-blockquote-pseudo-before-color
|
var(--oli-g-colors-color-2)
|
<color>
|
--oli-s-hr-border-color
|
var(--oli-g-colors-color-5-200)
|
<color>
|
--oli-s-code-font-family
|
'Fira Code', monospace
|
<color>
|
--oli-s-strong-font-weight
|
600
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-table-background-color
|
var(--oli-g-colors-white)
|
<color>
|
--oli-s-table-th-font-weight
|
600
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-table-th-background-color
|
var(--oli-g-colors-color-2)
|
<color>
|
--oli-s-table-th-color
|
var(--oli-g-colors-color-1-700)
|
<color>
|
--oli-s-list-flex-direction
|
column
|
row |
row-reverse |
column |
column-reverse
|
--oli-s-list-marker-color
|
var(--oli-g-colors-color-1)
|
<color>
|
--oli-s-form-item-background-color
|
var(--oli-g-colors-color-5-200)
|
<color>
|
--oli-s-form-item-spacing
|
var(--oli-g-spacing-s)
|
<length-percentage>
|
--oli-s-form-button-background-color
|
var(--oli-g-colors-color-1)
|
<color>
|
--oli-s-form-button-background-color-pressed
|
var(--oli-g-colors-color-4-500)
|
<color>
|
--oli-s-form-button-background-color-disabled
|
var(--oli-g-colors-color-6-300)
|
<color>
|
--oli-s-form-button-color
|
var(--oli-g-colors-white)
|
<color>
|
--oli-s-form-legend-border-color
|
var(--oli-g-colors-color-2)
|
<color>
|
Globals
| property | default | values |
|---|
Colors
Primary colors
Primary color tokens
| property | value |
|---|---|
--oli-g-colors-black
|
oklch(0.32 0 271) |
--oli-g-colors-white
|
oklch(1 0 0) |
--oli-g-colors-color-1
|
oklch(0.47 0.09 130.31) |
--oli-g-colors-color-2
|
oklch(0.83 0.16 95) |
--oli-g-colors-color-3
|
oklch(0.2229 0.0902 274.54) |
--oli-g-colors-color-4
|
oklch(0.7269 0.1151 4.22) |
--oli-g-colors-color-5
|
oklch(0.955 0 271) |
--oli-g-colors-color-6
|
oklch(0.537 0.0254 274.4) |
--oli-g-colors-color-7
|
oklch(0.6892 0.2004 22.38) |
Secondary colors
color-1
color-1 tokens
| property | value |
|---|---|
--oli-g-colors-color-1-100
|
oklch(from var(--oli-g-colors-color-1) 0.9 c h) |
--oli-g-colors-color-1-200
|
oklch(from var(--oli-g-colors-color-1) 0.8 c h) |
--oli-g-colors-color-1-300
|
oklch(from var(--oli-g-colors-color-1) 0.7 c h) |
--oli-g-colors-color-1-400
|
oklch(from var(--oli-g-colors-color-1) 0.6 c h) |
--oli-g-colors-color-1-500
|
oklch(from var(--oli-g-colors-color-1) 0.5 c h) |
--oli-g-colors-color-1-600
|
oklch(from var(--oli-g-colors-color-1) 0.4 c h) |
--oli-g-colors-color-1-700
|
oklch(from var(--oli-g-colors-color-1) 0.3 c h) |
--oli-g-colors-color-1-800
|
oklch(from var(--oli-g-colors-color-1) 0.2 c h) |
--oli-g-colors-color-1-900
|
oklch(from var(--oli-g-colors-color-1) 0.1 c h) |
color-2
color-2 tokens
| property | value |
|---|---|
--oli-g-colors-color-2-100
|
oklch(from var(--oli-g-colors-color-2) 0.9 c h) |
--oli-g-colors-color-2-200
|
oklch(from var(--oli-g-colors-color-2) 0.8 c h) |
--oli-g-colors-color-2-300
|
oklch(from var(--oli-g-colors-color-2) 0.7 c h) |
--oli-g-colors-color-2-400
|
oklch(from var(--oli-g-colors-color-2) 0.6 c h) |
--oli-g-colors-color-2-500
|
oklch(from var(--oli-g-colors-color-2) 0.5 c h) |
--oli-g-colors-color-2-600
|
oklch(from var(--oli-g-colors-color-2) 0.4 c h) |
--oli-g-colors-color-2-700
|
oklch(from var(--oli-g-colors-color-2) 0.3 c h) |
--oli-g-colors-color-2-800
|
oklch(from var(--oli-g-colors-color-2) 0.2 c h) |
--oli-g-colors-color-2-900
|
oklch(from var(--oli-g-colors-color-2) 0.1 c h) |
color-3
color-3 tokens
| property | value |
|---|---|
--oli-g-colors-color-3-100
|
oklch(from var(--oli-g-colors-color-3) 0.9 c h) |
--oli-g-colors-color-3-200
|
oklch(from var(--oli-g-colors-color-3) 0.8 c h) |
--oli-g-colors-color-3-300
|
oklch(from var(--oli-g-colors-color-3) 0.7 c h) |
--oli-g-colors-color-3-400
|
oklch(from var(--oli-g-colors-color-3) 0.6 c h) |
--oli-g-colors-color-3-500
|
oklch(from var(--oli-g-colors-color-3) 0.5 c h) |
--oli-g-colors-color-3-600
|
oklch(from var(--oli-g-colors-color-3) 0.4 c h) |
--oli-g-colors-color-3-700
|
oklch(from var(--oli-g-colors-color-3) 0.3 c h) |
--oli-g-colors-color-3-800
|
oklch(from var(--oli-g-colors-color-3) 0.2 c h) |
--oli-g-colors-color-3-900
|
oklch(from var(--oli-g-colors-color-3) 0.1 c h) |
color-4
color-4 tokens
| property | value |
|---|---|
--oli-g-colors-color-4-100
|
oklch(from var(--oli-g-colors-color-4) 0.9 c h) |
--oli-g-colors-color-4-200
|
oklch(from var(--oli-g-colors-color-4) 0.8 c h) |
--oli-g-colors-color-4-300
|
oklch(from var(--oli-g-colors-color-4) 0.7 c h) |
--oli-g-colors-color-4-400
|
oklch(from var(--oli-g-colors-color-4) 0.6 c h) |
--oli-g-colors-color-4-500
|
oklch(from var(--oli-g-colors-color-4) 0.5 c h) |
--oli-g-colors-color-4-600
|
oklch(from var(--oli-g-colors-color-4) 0.4 c h) |
--oli-g-colors-color-4-700
|
oklch(from var(--oli-g-colors-color-4) 0.3 c h) |
--oli-g-colors-color-4-800
|
oklch(from var(--oli-g-colors-color-4) 0.2 c h) |
--oli-g-colors-color-4-900
|
oklch(from var(--oli-g-colors-color-4) 0.1 c h) |
color-5
color-5 tokens
| property | value |
|---|---|
--oli-g-colors-color-5-100
|
oklch(from var(--oli-g-colors-color-5) 0.9 c h) |
--oli-g-colors-color-5-200
|
oklch(from var(--oli-g-colors-color-5) 0.8 c h) |
--oli-g-colors-color-5-300
|
oklch(from var(--oli-g-colors-color-5) 0.7 c h) |
--oli-g-colors-color-5-400
|
oklch(from var(--oli-g-colors-color-5) 0.6 c h) |
--oli-g-colors-color-5-500
|
oklch(from var(--oli-g-colors-color-5) 0.5 c h) |
--oli-g-colors-color-5-600
|
oklch(from var(--oli-g-colors-color-5) 0.4 c h) |
--oli-g-colors-color-5-700
|
oklch(from var(--oli-g-colors-color-5) 0.3 c h) |
--oli-g-colors-color-5-800
|
oklch(from var(--oli-g-colors-color-5) 0.2 c h) |
--oli-g-colors-color-5-900
|
oklch(from var(--oli-g-colors-color-5) 0.1 c h) |
color-6
color-6 tokens
| property | value |
|---|---|
--oli-g-colors-color-6-100
|
oklch(from var(--oli-g-colors-color-6) 0.9 c h) |
--oli-g-colors-color-6-200
|
oklch(from var(--oli-g-colors-color-6) 0.8 c h) |
--oli-g-colors-color-6-300
|
oklch(from var(--oli-g-colors-color-6) 0.7 c h) |
--oli-g-colors-color-6-400
|
oklch(from var(--oli-g-colors-color-6) 0.6 c h) |
--oli-g-colors-color-6-500
|
oklch(from var(--oli-g-colors-color-6) 0.5 c h) |
--oli-g-colors-color-6-600
|
oklch(from var(--oli-g-colors-color-6) 0.4 c h) |
--oli-g-colors-color-6-700
|
oklch(from var(--oli-g-colors-color-6) 0.3 c h) |
--oli-g-colors-color-6-800
|
oklch(from var(--oli-g-colors-color-6) 0.2 c h) |
--oli-g-colors-color-6-900
|
oklch(from var(--oli-g-colors-color-6) 0.1 c h) |
color-7
color-7 tokens
| property | value |
|---|---|
--oli-g-colors-color-7-100
|
oklch(from var(--oli-g-colors-color-7) 0.9 c h) |
--oli-g-colors-color-7-200
|
oklch(from var(--oli-g-colors-color-7) 0.8 c h) |
--oli-g-colors-color-7-300
|
oklch(from var(--oli-g-colors-color-7) 0.7 c h) |
--oli-g-colors-color-7-400
|
oklch(from var(--oli-g-colors-color-7) 0.6 c h) |
--oli-g-colors-color-7-500
|
oklch(from var(--oli-g-colors-color-7) 0.5 c h) |
--oli-g-colors-color-7-600
|
oklch(from var(--oli-g-colors-color-7) 0.4 c h) |
--oli-g-colors-color-7-700
|
oklch(from var(--oli-g-colors-color-7) 0.3 c h) |
--oli-g-colors-color-7-800
|
oklch(from var(--oli-g-colors-color-7) 0.2 c h) |
--oli-g-colors-color-7-900
|
oklch(from var(--oli-g-colors-color-7) 0.1 c h) |