lowcss.
0.26.0

Root CSS Variables

LowCSS provides CSS variables generated from your custom configuration, making it even easier to maintain a consistent color scheme across your project.

The following CSS variables are available, derived from the default configuration of LowCSS.

Colors Variables

The colors variables are generated from values in low.$colors:

Variable name Value
--low-cool-50 #F6F7F9
--low-cool-100 #E7E9EF
--low-cool-200 #CBD1DC
--low-cool-300 #ACB6C8
--low-cool-400 #8E9AB4
--low-cool-500 #6F7F9F
--low-cool-600 #5A6987
--low-cool-700 #455168
--low-cool-800 #313949
--low-cool-900 #1F242E
--low-cool-950 #14181F
--low-gray-50 #F9FAFA
--low-gray-100 #F3F4F5
--low-gray-200 #D5D9DC
--low-gray-300 #B7BDC3
--low-gray-400 #9BA3AC
--low-gray-500 #7C8792
--low-gray-600 #646E78
--low-gray-700 #4A5259
--low-gray-800 #31363A
--low-gray-900 #191C1F
--low-gray-950 #0C0D0E
--low-neutral-50 #FAFAFA
--low-neutral-100 #F5F5F5
--low-neutral-200 #E6E6E6
--low-neutral-300 #C9C9C9
--low-neutral-400 #ABABAB
--low-neutral-500 #8F8F8F
--low-neutral-600 #737373
--low-neutral-700 #545454
--low-neutral-800 #383838
--low-neutral-900 #1A1A1A
--low-neutral-950 #0D0D0D
--low-red-50 #FCE9EB
--low-red-100 #F9D2D6
--low-red-200 #F2A6AD
--low-red-300 #EC7985
--low-red-400 #E54D5C
--low-red-500 #DF2033
--low-red-600 #B21A29
--low-red-700 #86131F
--low-red-800 #590D14
--low-red-900 #2D060A
--low-red-950 #160305
--low-orange-50 #FEF0E6
--low-orange-100 #FEE1CD
--low-orange-200 #FDC49B
--low-orange-300 #FBA66A
--low-orange-400 #FA8938
--low-orange-500 #F96B06
--low-orange-600 #C75605
--low-orange-700 #954004
--low-orange-800 #642B02
--low-orange-900 #321501
--low-orange-950 #190B01
--low-yellow-50 #FFF9E5
--low-yellow-100 #FFF2CC
--low-yellow-200 #FFE699
--low-yellow-300 #FFD966
--low-yellow-400 #FFCC33
--low-yellow-500 #FFBF00
--low-yellow-600 #CC9900
--low-yellow-700 #997300
--low-yellow-800 #664D00
--low-yellow-900 #332600
--low-yellow-950 #191300
--low-green-50 #E5FBED
--low-green-100 #CBF6DB
--low-green-200 #9BEEB9
--low-green-300 #66E595
--low-green-400 #36DD73
--low-green-500 #1FB757
--low-green-600 #199446
--low-green-700 #126D34
--low-green-800 #0D4A23
--low-green-900 #062311
--low-green-950 #031108
--low-teal-50 #E3FCFA
--low-teal-100 #CCFAF6
--low-teal-200 #99F5ED
--low-teal-300 #66F0E4
--low-teal-400 #33EADB
--low-teal-500 #15D0C1
--low-teal-600 #11A79A
--low-teal-700 #0D7D74
--low-teal-800 #08534D
--low-teal-900 #042A27
--low-teal-950 #021311
--low-blue-50 #E6F0FF
--low-blue-100 #CDE1FE
--low-blue-200 #9BC4FD
--low-blue-300 #69A6FC
--low-blue-400 #3789FB
--low-blue-500 #056BFA
--low-blue-600 #0456C8
--low-blue-700 #034096
--low-blue-800 #022B64
--low-blue-900 #011532
--low-blue-950 #000B19
--low-indigo-50 #ECECFD
--low-indigo-100 #DEDEFC
--low-indigo-200 #B8B9F9
--low-indigo-300 #9799F7
--low-indigo-400 #7173F4
--low-indigo-500 #5053F1
--low-indigo-600 #1316EC
--low-indigo-700 #0E11B3
--low-indigo-800 #090B76
--low-indigo-900 #05063D
--low-indigo-950 #02031C
--low-violet-50 #F3ECFE
--low-violet-100 #E6D8FD
--low-violet-200 #CEB1FB
--low-violet-300 #B58BF9
--low-violet-400 #9C64F7
--low-violet-500 #843DF5
--low-violet-600 #610CE9
--low-violet-700 #4809AF
--low-violet-800 #300674
--low-violet-900 #18033A
--low-violet-950 #0C011D
--low-pink-50 #FDE8F2
--low-pink-100 #FBD5E8
--low-pink-200 #F6ACD1
--low-pink-300 #F282BA
--low-pink-400 #ED59A3
--low-pink-500 #E92F8C
--low-pink-600 #CB1570
--low-pink-700 #981054
--low-pink-800 #650B38
--low-pink-900 #33051C
--low-pink-950 #17020D
--low-black #000
--low-white #fff
--low-transparent transparent
--low-current currentColor

Font Family Variables

The font family variables are generated from values in low.$font-families;

Variable name Value
--low-font-sans -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif
--low-font-serif Georgia,Cambria,Times New Roman,Times,serif
--low-font-mono SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace

Font Size Variables

Font sizes variables were added in v0.23.0.

The font size variables are generated from values in low.$font-sizes;

Variable name Value
--low-font-3xs 0.5rem
--low-font-2xs 0.625rem
--low-font-xs 0.75rem
--low-font-sm 0.875rem
--low-font-base 1rem
--low-font-lg 1.125rem
--low-font-xl 1.25rem
--low-font-2xl 1.5rem
--low-font-3xl 1.875rem
--low-font-4xl 2.25rem
--low-font-5xl 3rem
--low-font-6xl 3.75rem
--low-font-7xl 4.5rem
--low-font-8xl 6rem
--low-font-9xl 8rem

Font Weight Variables

Font weights variables were added in v0.23.0.

The font weight variables are generated from values in low.$font-weights;

Variable name Value
--low-font-thin 100
--low-font-extralight 200
--low-font-light 300
--low-font-normal 400
--low-font-medium 500
--low-font-semibold 600
--low-font-bold 700
--low-font-extrabold 800
--low-font-black 900

Tracking Variables

Tracking variables were added in v0.23.0.

The tracking variables (used for letter-spacing) are generated from values in low.$trackings;

Variable name Value
--low-tracking-tighter -0.05em
--low-tracking-tight -0.025em
--low-tracking-normal 0
--low-tracking-wide 0.025em
--low-tracking-wider 0.05em
--low-tracking-widest 0.1em

Leading Variables

Leading variables were added in v0.23.0.

The leading variables (used for line-height) are generated from values in low.$leadings;

Variable name Value
--low-leading-3 0.75rem
--low-leading-4 1rem
--low-leading-5 1.25rem
--low-leading-6 1.5rem
--low-leading-7 1.75rem
--low-leading-8 2rem
--low-leading-9 2.25rem
--low-leading-10 2.5rem
--low-leading-none 1
--low-leading-tight 1.25
--low-leading-snug 1.375
--low-leading-normal 1.5
--low-leading-relaxed 1.625
--low-leading-loose 2

Spacing Variables

Spacing variables were added in v0.23.0.

The spacing variables are generated from values in low.$spacing;

Variable name Value
--low-space-0 0
--low-space-1 0.25rem
--low-space-2 0.5rem
--low-space-3 0.75rem
--low-space-4 1rem
--low-space-5 1.25rem
--low-space-6 1.5rem
--low-space-7 1.75rem
--low-space-8 2rem
--low-space-9 2.25rem
--low-space-10 2.5rem
--low-space-11 2.75rem
--low-space-12 3rem
--low-space-14 3.5rem
--low-space-16 4rem
--low-space-20 5rem
--low-space-24 6rem
--low-space-28 7rem
--low-space-32 8rem
--low-space-36 9rem
--low-space-40 10rem
--low-space-44 11rem
--low-space-48 12rem
--low-space-52 13rem
--low-space-56 14rem
--low-space-60 15rem
--low-space-64 16rem
--low-space-72 18rem
--low-space-80 20rem
--low-space-88 22rem
--low-space-96 24rem
--low-space-px 1px
--low-space-0.5 0.125rem
--low-space-1.5 0.375rem
--low-space-2.5 0.625rem
--low-space-3.5 0.875rem
--low-space-half 50%
--low-space-full 100%

Using CSS Variables

You can access the CSS variables in your CSS or SASS code. For example:

.my-element {
    background-color: var(--low-blue-600);
    color: var(--low-white);
}
Designed by Josemi. Source code available on GitHub.