Variables

Leaf has two variable files divided as follows:

  1. Initial variables: Literal values like:

    • Colors: $bright-green: rgb(0, 226, 152)
    • Font sizes: $size-1: 3rem
    • Dimensions: $container-gap: 32px
    • Other: $radius: 3px

  2. Derived variables: Values calculated from the values from the previews file, like:

    • Colors:
      • $accent: $bright-green
      • $size-normal: $size-6

Initial variables

Variable Type Default value
$black color
rgb(0, 0, 0)
$darker-grey color
rgb(85, 85, 85)
$dark-grey color
rgb(118, 118, 118)
$grey color
rgb(176, 176, 176)
$grey-light color
rgb(185, 185, 185)
$grey-lighter color
rgb(242, 242, 242)
$white color
rgb(255, 255, 255)
$bright-green color
rgb(0, 226, 152)
$blue color
rgb(0, 155, 239)
$green color
rgb(0, 161, 37)
$light-green color
rgb(190, 255, 205)
$yellow color
rgb(239, 193, 0)
$light-yellow color
rgb(255, 232, 145)
$red color
rgb(211, 44, 76)
$light-red color
rgb(255, 208, 217)
$light-red color
rgb(255, 208, 217)
$family-sans-serif font-family BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace font-family monospace
$render-mode keyword optimizeLegibility
$use-roboto boolean false
$body-size size 16px
$body-line-height size 1.5
$size-1 size 3rem
$size-2 size 2.5rem
$size-3 size 2rem
$size-4 size 1.5rem
$size-5 size 1.25rem
$size-6 size 1rem
$size-7 size 0.75rem
$weight-light font-weight 300
$weight-normal font-weight 400
$weight-medium font-weight 500
$weight-semibold font-weight 600
$weight-bold font-weight 700
$columns-count number 12
$columns-gutter size 10px
$columns-gutter-md size 20px
$container-gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $container-gap)
$widescreen computed 1152px + (2 * $container-gap)
$fullhd computed 1344px + (2 * $container-gap)
$easing keyword ease-out
$radius size 3px
$radius-rounded size 290486px
$speed duration 86ms

Derived variables

Name Type Default value Computed value
$primary color $black
rgb(0, 0, 0)
$accent color $bright-green
rgb(0, 226, 152)
$accent-alt color $blue
rgb(0, 155, 239)
$link color $accent-alt
rgb(0, 155, 239)
$success color $green
rgb(0, 161, 37)
$light-success color $light-green
rgb(190, 255, 205)
$warning color $yellow
rgb(239, 193, 0)
$light-warning color $light-yellow
rgb(255, 232, 145)
$danger color $red
rgb(211, 44, 76)
$light-danger color $light-red
rgb(255, 208, 217)
$info color $blue
rgb(0, 155, 239)
$light color $grey-lighter
rgb(242, 242, 242)
$dark color $darker-grey
rgb(85, 85, 85)
$black-invert color findColorInvert($black)
#fff
$bright-green-invert color findColorInvert($bright-green)
#000)
$blue-invert color findColorInvert($blue)
#fff
$green-invert color findColorInvert($green)
#fff
$light-green-invert color findColorInvert($light-green)
#000
$yellow-invert color findColorInvert($yellow)
#000
$light-yellow-invert color findColorInvert($light-yellow)
#000
$red-invert color findColorInvert($red)
#fff
$light-red-invert color findColorInvert($light-red)
#000
$primary-invert color findColorInvert($black-invert)
#fff
$accent-invert color findColorInvert($bright-green-invert)
#000
$accent-alt-invert color findColorInvert($blue-invert)
#fff
$success-invert color findColorInvert($green-invert)
#fff
$light-success-invert color findColorInvert($light-green-invert)
#000
$warning-invert color findColorInvert($yellow-invert)
#000
$light-warning-invert color findColorInvert($light-yellow-invert)
#000
$danger-invert color findColorInvert($red-invert)
#fff
$light-danger-invert color findColorInvert($light-red-invert)
#000
$info-invert color findColorInvert($blue-invert)
#fff
$light-invert color $dark
rgb(85, 85, 85)
$dark-invert color $light
rgb(242, 242, 242)
$text color $black
rgb(0, 0, 0)
$text-invert color findColorInvert($text)
rgb(255, 255, 255)
$family-primary font-family $family-sans-serif BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-code font-family $family-monospace monospace
$size-small size $size-7 0.75rem
$size-normal size $size-6 1rem
$size-medium size $size-5 1.25rem
$size-large size $size-4 1.5rem
$colors list ( "primary": ($primary, $primary-invert), "accent": ($accent, $accent-invert), "accent-alt": ($accent-alt, $accent-alt-invert), "success": ($success, $success-invert), "light-success": ($light-success, $light-success-invert), "warning": ($warning, $warning-invert), "light-warning": ($light-warning, $light-warning-invert), "danger": ($danger, $danger-invert), "light-danger": ($light-danger, $light-danger-invert), "info": ($info, $info-invert) )
$sizes lists $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7
← Columns →