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
|
humanist
|
transitional |
geometric |
old |
humanist |
slab-serif |
monospace-slab-serif
|
--oli-s-break-points-m
|
48rem
|
|
--oli-s-break-points-l
|
64rem
|
|
--oli-s-page-max-width
Maximum width of the page
|
80rem
|
<length-percentage>
|
--oli-s-page-start-column-width
Width of the start column
|
16rem
|
<length-percentage>
|
--oli-s-page-base-font-size-s
|
var(--oli-g-text-size-base-s)
|
|
--oli-s-page-base-font-size-m
|
var(--oli-g-text-size-base-m)
|
<number>
|
--oli-s-page-text-scale
Scalefactor for the page font size
|
1
|
<number>
|
--oli-s-page-line-height-s
|
1.7
|
|
--oli-s-page-line-height-m
|
1.7
|
|
--oli-s-page-padding
Padding for header, main, footer
|
clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
|
<length-percentage>
|
--oli-s-page-background-color
Background color for the page
|
var(--oli-g-colors-background)
|
<color>
|
--oli-s-page-color
Text color for the page
|
var(--oli-g-colors-text)
|
<color>
|
--oli-s-content-max-width
Maximum width for p, ol, ul, figure, blockquote, picture
|
54rem
|
<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-content-hyphens
|
none
|
<length-percentage>
|
--oli-s-heading-1-line-height
|
1.1
|
<number> |
<length-percentage>
|
--oli-s-heading-1-color
|
var(--oli-g-colors-highlight)
|
<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
|
5
|
<number>
|
--oli-s-heading-2-line-height
|
1.2
|
<number> |
<length-percentage>
|
--oli-s-heading-2-color
|
var(--oli-g-colors-highlight)
|
<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-m)
|
<length-percentage>
|
--oli-s-heading-2-scalefactor
|
3
|
<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
|
2
|
<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
|
1
|
<number>
|
--oli-s-heading-5-scalefactor
|
1
|
<number>
|
--oli-s-heading-6-scalefactor
|
1
|
<number>
|
--oli-s-section-background-color
|
transparent
|
<color>
|
--oli-s-section-color
|
inherit
|
<color>
|
--oli-s-section-margin
|
{g-spacing.xxl}
|
<length-percentage>
|
--oli-s-section-padding-block
|
0
|
<length-percentage>
|
--oli-s-link-color
|
var(--oli-g-colors-cta)
|
<color>
|
--oli-s-link-color-visited
|
var(--oli-g-colors-cta-alt)
|
<color>
|
--oli-s-states-error
|
var(--oli-g-colors-state-error)
|
<color>
|
--oli-s-states-highlight
|
var(--oli-g-colors-state-highlight)
|
<color>
|
--oli-s-header-alignment
|
end
|
<color>
|
--oli-s-header-background-color
|
transparent
|
<color>
|
--oli-s-header-border-image
|
conic-gradient(transparent 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-highlight)
|
<color>
|
--oli-s-header-margin-block-end
|
var(--oli-g-spacing-xxxl)
|
<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-m)
|
<length-percentage>
|
--oli-s-main-nav-color
|
var(--oli-g-colors-cta-alt)
|
<color>
|
--oli-s-main-nav-color-active
|
var(--oli-g-colors-cta)
|
<color>
|
--oli-s-main-nav-text-scale
|
0.5
|
<number>
|
--oli-s-footer-margin-block-start
|
var(--oli-g-spacing-xl)
|
<length-percentage>
|
--oli-s-figure-background-color
|
var(--oli-g-colors-background-alt2)
|
<color>
|
--oli-s-figure-color
|
var(--oli-g-colors-text)
|
<color>
|
--oli-s-blockquote-margin-block
|
var(--oli-g-spacing-xxl)
|
<color>
|
--oli-s-blockquote-pseudo-before-color
|
var(--oli-g-colors-highlight)
|
<color>
|
--oli-s-hr-border-color
|
var(--oli-g-colors-highlight)
|
<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-background)
|
<color>
|
--oli-s-table-th-font-weight
|
600
|
<font-weight-absolute> |
bolder |
lighter
|
--oli-s-table-th-background-color
|
var(--oli-g-colors-background-alt2)
|
<color>
|
--oli-s-table-th-color
|
var(--oli-g-colors-text)
|
<color>
|
--oli-s-list-flex-direction
|
column
|
row |
row-reverse |
column |
column-reverse
|
--oli-s-list-marker-color
|
var(--oli-g-colors-highlight)
|
<color>
|
--oli-s-form-item-background-color
|
var(--oli-g-colors-background)
|
<color>
|
--oli-s-form-item-spacing
|
var(--oli-g-spacing-s)
|
<length-percentage>
|
--oli-s-form-button-background-color
|
var(--oli-g-colors-cta)
|
<color>
|
--oli-s-form-button-background-color-pressed
|
var(--oli-g-colors-cta-alt)
|
<color>
|
--oli-s-form-button-background-color-disabled
|
var(--oli-g-colors-state-disabled)
|
<color>
|
--oli-s-form-button-border-radius
|
3px
|
<length-percentage>
|
--oli-s-form-button-color
|
var(--oli-g-colors-light)
|
<color>
|
--oli-s-form-legend-border-color
|
var(--oli-g-colors-highlight)
|
<color>
|
--oli-s-text-scale
|
1.26
|
<number>
|
--oli-s-page-base-font-size-m
|
1.1rem
|
<number>
|
Globals
| property | default | values |
|---|---|---|
--oli-g-text-size-base-s
|
0.95rem
|
|
--oli-g-text-size-base-m
|
1.2rem
|
|
--oli-g-spacing-base
|
clamp(0.5rem, 0.3333rem + 0.8333vw, 1rem)
|
<length-percentage>
|
--oli-g-spacing-scale
|
1.414
|
<number>
|
--oli-g-spacing-xxxs
Defaults to 6px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), -3))
|
<length-percentage>
|
--oli-g-spacing-xxs
Defaults to 8px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), -2))
|
<length-percentage>
|
--oli-g-spacing-xs
Defaults to 11px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), -1))
|
<length-percentage>
|
--oli-g-spacing-s
Defaults to 16px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), 0))
|
<length-percentage>
|
--oli-g-spacing-m
Defaults to 23px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), 1))
|
<length-percentage>
|
--oli-g-spacing-l
Defaults to 32px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), 2))
|
<length-percentage>
|
--oli-g-spacing-xl
Defaults to 45px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), 3))
|
<length-percentage>
|
--oli-g-spacing-xxl
Defaults to 63px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), 4))
|
<length-percentage>
|
--oli-g-spacing-xxxl
Defaults to 90px
|
calc(var(--oli-g-spacing-base) * pow(var(--oli-g-spacing-scale), 5))
|
<length-percentage>
|
Colors
Primary colors
Primary color tokens
| property | value |
|---|---|
--oli-g-colors-base-hue
|
130 |
--oli-g-colors-base-chroma
|
0.09 |
--oli-g-colors-base-light
|
0.5 |
--oli-g-colors-light
|
oklch(from var(--oli-g-colors-neutral-10) 0.96 c h) |
--oli-g-colors-dark
|
var(--oli-g-colors-main-80) |
--oli-g-colors-main
|
oklch(var(--oli-g-colors-base-light) var(--oli-g-colors-base-chroma) var(--oli-g-colors-base-hue)) |
--oli-g-colors-neutral
|
oklch(from var(--oli-g-colors-main) l calc(c - 0.087) h) |
--oli-g-colors-contrast
|
oklch(from var(--oli-g-colors-main) l c calc(h + 240)) |
--oli-g-colors-contrast2
|
oklch(from var(--oli-g-colors-main) l calc(c + 0.05) calc(h - 50)) |
Secondary colors
main
main tokens
| property | value |
|---|---|
--oli-g-colors-main-10
|
oklch(from var(--oli-g-colors-main) 0.9 c h) |
--oli-g-colors-main-20
|
oklch(from var(--oli-g-colors-main) 0.8 c h) |
--oli-g-colors-main-30
|
oklch(from var(--oli-g-colors-main) 0.7 c h) |
--oli-g-colors-main-40
|
oklch(from var(--oli-g-colors-main) 0.6 c h) |
--oli-g-colors-main-50
|
oklch(from var(--oli-g-colors-main) 0.5 c h) |
--oli-g-colors-main-60
|
oklch(from var(--oli-g-colors-main) 0.4 c h) |
--oli-g-colors-main-70
|
oklch(from var(--oli-g-colors-main) 0.3 c h) |
--oli-g-colors-main-80
|
oklch(from var(--oli-g-colors-main) 0.2 c h) |
--oli-g-colors-main-90
|
oklch(from var(--oli-g-colors-main) 0.1 c h) |
neutral
neutral tokens
| property | value |
|---|---|
--oli-g-colors-neutral-10
|
oklch(from var(--oli-g-colors-neutral) 0.9 c h) |
--oli-g-colors-neutral-20
|
oklch(from var(--oli-g-colors-neutral) 0.8 c h) |
--oli-g-colors-neutral-30
|
oklch(from var(--oli-g-colors-neutral) 0.7 c h) |
--oli-g-colors-neutral-40
|
oklch(from var(--oli-g-colors-neutral) 0.6 c h) |
--oli-g-colors-neutral-50
|
oklch(from var(--oli-g-colors-neutral) 0.5 c h) |
--oli-g-colors-neutral-60
|
oklch(from var(--oli-g-colors-neutral) 0.4 c h) |
--oli-g-colors-neutral-70
|
oklch(from var(--oli-g-colors-neutral) 0.3 c h) |
--oli-g-colors-neutral-80
|
oklch(from var(--oli-g-colors-neutral) 0.2 c h) |
--oli-g-colors-neutral-90
|
oklch(from var(--oli-g-colors-neutral) 0.1 c h) |
contrast
contrast tokens
| property | value |
|---|---|
--oli-g-colors-contrast-10
|
oklch(from var(--oli-g-colors-contrast) 0.9 c h) |
--oli-g-colors-contrast-20
|
oklch(from var(--oli-g-colors-contrast) 0.8 c h) |
--oli-g-colors-contrast-30
|
oklch(from var(--oli-g-colors-contrast) 0.7 c h) |
--oli-g-colors-contrast-40
|
oklch(from var(--oli-g-colors-contrast) 0.6 c h) |
--oli-g-colors-contrast-50
|
oklch(from var(--oli-g-colors-contrast) 0.5 c h) |
--oli-g-colors-contrast-60
|
oklch(from var(--oli-g-colors-contrast) 0.4 c h) |
--oli-g-colors-contrast-70
|
oklch(from var(--oli-g-colors-contrast) 0.3 c h) |
--oli-g-colors-contrast-80
|
oklch(from var(--oli-g-colors-contrast) 0.2 c h) |
--oli-g-colors-contrast-90
|
oklch(from var(--oli-g-colors-contrast) 0.1 c h) |
contrast2
contrast2 tokens
| property | value |
|---|---|
--oli-g-colors-contrast2-10
|
oklch(from var(--oli-g-colors-contrast2) 0.9 c h) |
--oli-g-colors-contrast2-20
|
oklch(from var(--oli-g-colors-contrast2) 0.8 c h) |
--oli-g-colors-contrast2-30
|
oklch(from var(--oli-g-colors-contrast2) 0.7 c h) |
--oli-g-colors-contrast2-40
|
oklch(from var(--oli-g-colors-contrast2) 0.6 c h) |
--oli-g-colors-contrast2-50
|
oklch(from var(--oli-g-colors-contrast2) 0.5 c h) |
--oli-g-colors-contrast2-60
|
oklch(from var(--oli-g-colors-contrast2) 0.4 c h) |
--oli-g-colors-contrast2-70
|
oklch(from var(--oli-g-colors-contrast2) 0.3 c h) |
--oli-g-colors-contrast2-80
|
oklch(from var(--oli-g-colors-contrast2) 0.2 c h) |
--oli-g-colors-contrast2-90
|
oklch(from var(--oli-g-colors-contrast2) 0.1 c h) |