CSS Variables

Varvara CSS is customizable using CSS Variables (also called CSS custom properties).

Border

CSS Variable Default Value
--va-border-width 1px
--va-border-color var(--va-foreground-color-default)

Icon

CSS Variable Default Value
--va-icon-color var(--va-foreground-color-default)
--va-icon-height calc(var(--va-icon-width) * 0.6)
--va-icons-stroke-width var(--va-border-width)
--va-icon-width var(--va-space-3)

Colors

CSS Variable Default Value
--va-color-primary light-dark(mediumvioletred, #9fe88d)

Foreground

CSS Variable Default Value
--va-foreground-color-default light-dark(#29353d, #b3ccd6)
--va-foreground-color-muted color-mix(in srgb, var(--va-foreground-color-default) 20%, var(--va-background-color-default))

Background

CSS Variable Default Value
--va-background-color-default light-dark(#f3f5f7, #2a303c)
--va-background-color-hover color-mix(in srgb, var(--va-foreground-color-default) 5%, var(--va-background-color-default))

Typography

Font family

CSS Variable Default Value
--va-font-family-default 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
--va-font-family-headings 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

Font size

CSS Variable Default Value
--va-font-size-ratio 1
--va-font-size-00 calc(0.5rem * var(--va-font-size-ratio))
--va-font-size-0 calc(0.75rem * var(--va-font-size-ratio))
--va-font-size-1 calc(1rem * var(--va-font-size-ratio))
--va-font-size-2 calc(1.1rem * var(--va-font-size-ratio))
--va-font-size-3 calc(1.25rem * var(--va-font-size-ratio))
--va-font-size-4 calc(1.5rem * var(--va-font-size-ratio))
--va-font-size-5 calc(2rem * var(--va-font-size-ratio))
--va-font-size-6 calc(2.5rem * var(--va-font-size-ratio))
--va-font-size-7 calc(3rem * var(--va-font-size-ratio))
--va-font-size-8 calc(3.5rem * var(--va-font-size-ratio))

Space

CSS Variable Default Value
--va-space-ratio 1
--va-space-000 calc(-0.5rem * var(--va-space-ratio))
--va-space-00 calc(-0.25rem * var(--va-space-ratio))
--va-space-1 calc(0.25rem * var(--va-space-ratio))
--va-space-2 calc(0.5rem * var(--va-space-ratio))
--va-space-3 calc(0.75rem * var(--va-space-ratio))
--va-space-4 calc(1rem * var(--va-space-ratio))
--va-space-5 calc(1.25rem * var(--va-space-ratio))
--va-space-6 calc(1.5rem * var(--va-space-ratio))
--va-space-7 calc(1.75rem * var(--va-space-ratio))
--va-space-8 calc(2rem * var(--va-space-ratio))
--va-space-9 calc(3rem * var(--va-space-ratio))
--va-space-10 calc(4rem * var(--va-space-ratio))
--va-space-11 calc(5rem * var(--va-space-ratio))
--va-space-12 calc(7.5rem * var(--va-space-ratio))
--va-space-13 calc(10rem * var(--va-space-ratio))
--va-space-14 calc(15rem * var(--va-space-ratio))
--va-space-15 calc(20rem * var(--va-space-ratio))