Introduction
LowCSS provides a default theme that includes a set of CSS variables. LowCSS uses a @theme directive to define these variables, which can be used to customize the appearance of your application.
@theme {
--color-primary: #1d4ed8;
--color-secondary: #f59e0b;
}
@import "lowcss/utilities.css";
These variables are used to generate the utility classes, so based on the previous example, you can use the following classes:
<div class="bg-primary text-secondary p-4">
This div has a primary background and secondary text color.
</div>
You can also use the @theme directive to define your own custom CSS variables, which can be used in your application.
This allows you to create a consistent design system that can be easily maintained and updated.
.button {
background-color: var(--color-primary);
/* ... */
}
Variables Namespaces
Theme variables in LowCSS are organized into namespaces, which helps to map the variables to their respective utility classes.
| Namespace | Description |
--animate-*
|
Animation utilities like animate-pulse.
|
--blur-*
|
Blur utilities like blur-sm.
|
--border-width-*
|
Border width utilities like border-2.
|
--breakpoint-*
|
Breakpoints for responsive design like sm, md, lg, and xl.
|
--brightness-*
|
Brightness utilities like brightness-50.
|
--color-*
|
Color utilities like bg-blue-500, text-gray-950, and border-grey-200.
|
--container-*
|
Used to generate max-w-lg utilities.
|
--contrast-*
|
Contrast utilities like contrast-100.
|
--font-family-*
|
Font family utilities like font-sans.
|
--font-size-*
|
Font size utilities like text-lg.
|
--font-weight-*
|
Font weight utilities like font-bold.
|
--gap-*
|
Gap utilities like gap-4.
|
--leading-*
|
Line height utilities like leading-tight.
|
--opacity-*
|
Opacity utilities like opacity-50.
|
--order-*
|
Order utilities like order-10.
|
--radius-*
|
Border radius utilities like rounded-md.
|
--saturate-*
|
Saturation utilities like saturate-150.
|
--shadow-*
|
Box shadow utilities like shadow-sm.
|
--spacing-*
|
Spacing utilities like m-0, p-2, w-64, and h-px.
|
--tracking-*
|
Letter spacing utilities like tracking-normal.
|
--z-index-*
|
Z-index utilities like z-10.
|
Default Theme
For a complete list of the default theme variables, you can refer to the source theme.css stylesheet. This file contains all the variables used in LowCSS, allowing you to customize your theme as needed.
Colors
The following colors are used for generating text, background, and border utilities.
| Variable | Value | Preview |
--color-gray-50
|
hsl(0, 0%, 98%)
|
|
--color-gray-100
|
hsl(0, 0%, 96%)
|
|
--color-gray-200
|
hsl(0, 0%, 90%)
|
|
--color-gray-300
|
hsl(0, 0%, 79%)
|
|
--color-gray-400
|
hsl(0, 0%, 67%)
|
|
--color-gray-500
|
hsl(0, 0%, 56%)
|
|
--color-gray-600
|
hsl(0, 0%, 45%)
|
|
--color-gray-700
|
hsl(0, 0%, 33%)
|
|
--color-gray-800
|
hsl(0, 0%, 22%)
|
|
--color-gray-900
|
hsl(0, 0%, 10%)
|
|
--color-gray-950
|
hsl(0, 0%, 5%)
|
|
--color-red-50
|
hsl(355, 90%, 96%)
|
|
--color-red-100
|
hsl(355, 80%, 91%)
|
|
--color-red-200
|
hsl(355, 70%, 80%)
|
|
--color-red-300
|
hsl(355, 65%, 70%)
|
|
--color-red-400
|
hsl(355, 60%, 60%)
|
|
--color-red-500
|
hsl(355, 55%, 50%)
|
|
--color-red-600
|
hsl(355, 55%, 40%)
|
|
--color-red-700
|
hsl(355, 55%, 30%)
|
|
--color-red-800
|
hsl(355, 55%, 20%)
|
|
--color-red-900
|
hsl(355, 55%, 10%)
|
|
--color-red-950
|
hsl(355, 55%, 5%)
|
|
--color-orange-50
|
hsl(30, 95%, 96%)
|
|
--color-orange-100
|
hsl(30, 90%, 91%)
|
|
--color-orange-200
|
hsl(30, 85%, 80%)
|
|
--color-orange-300
|
hsl(30, 80%, 70%)
|
|
--color-orange-400
|
hsl(30, 75%, 60%)
|
|
--color-orange-500
|
hsl(30, 70%, 50%)
|
|
--color-orange-600
|
hsl(30, 70%, 40%)
|
|
--color-orange-700
|
hsl(30, 70%, 30%)
|
|
--color-orange-800
|
hsl(30, 70%, 20%)
|
|
--color-orange-900
|
hsl(30, 70%, 10%)
|
|
--color-orange-950
|
hsl(30, 70%, 5%)
|
|
--color-yellow-50
|
hsl(50, 95%, 96%)
|
|
--color-yellow-100
|
hsl(50, 90%, 91%)
|
|
--color-yellow-200
|
hsl(50, 85%, 80%)
|
|
--color-yellow-300
|
hsl(50, 80%, 70%)
|
|
--color-yellow-400
|
hsl(50, 75%, 60%)
|
|
--color-yellow-500
|
hsl(50, 70%, 50%)
|
|
--color-yellow-600
|
hsl(50, 70%, 40%)
|
|
--color-yellow-700
|
hsl(50, 70%, 30%)
|
|
--color-yellow-800
|
hsl(50, 70%, 20%)
|
|
--color-yellow-900
|
hsl(50, 70%, 10%)
|
|
--color-yellow-950
|
hsl(50, 70%, 5%)
|
|
--color-green-50
|
hsl(140, 80%, 96%)
|
|
--color-green-100
|
hsl(140, 75%, 91%)
|
|
--color-green-200
|
hsl(140, 70%, 80%)
|
|
--color-green-300
|
hsl(140, 65%, 70%)
|
|
--color-green-400
|
hsl(140, 60%, 60%)
|
|
--color-green-500
|
hsl(140, 55%, 50%)
|
|
--color-green-600
|
hsl(140, 55%, 40%)
|
|
--color-green-700
|
hsl(140, 55%, 30%)
|
|
--color-green-800
|
hsl(140, 55%, 20%)
|
|
--color-green-900
|
hsl(140, 55%, 10%)
|
|
--color-green-950
|
hsl(140, 55%, 5%)
|
|
--color-blue-50
|
hsl(210, 90%, 96%)
|
|
--color-blue-100
|
hsl(210, 85%, 91%)
|
|
--color-blue-200
|
hsl(210, 80%, 80%)
|
|
--color-blue-300
|
hsl(210, 75%, 70%)
|
|
--color-blue-400
|
hsl(210, 70%, 60%)
|
|
--color-blue-500
|
hsl(210, 65%, 50%)
|
|
--color-blue-600
|
hsl(210, 65%, 40%)
|
|
--color-blue-700
|
hsl(210, 65%, 30%)
|
|
--color-blue-800
|
hsl(210, 65%, 20%)
|
|
--color-blue-900
|
hsl(210, 65%, 10%)
|
|
--color-blue-950
|
hsl(210, 65%, 5%)
|
|
--color-violet-50
|
hsl(270, 80%, 96%)
|
|
--color-violet-100
|
hsl(270, 75%, 91%)
|
|
--color-violet-200
|
hsl(270, 70%, 80%)
|
|
--color-violet-300
|
hsl(270, 65%, 70%)
|
|
--color-violet-400
|
hsl(270, 60%, 60%)
|
|
--color-violet-500
|
hsl(270, 55%, 50%)
|
|
--color-violet-600
|
hsl(270, 55%, 40%)
|
|
--color-violet-700
|
hsl(270, 55%, 30%)
|
|
--color-violet-800
|
hsl(270, 55%, 20%)
|
|
--color-violet-900
|
hsl(270, 55%, 10%)
|
|
--color-violet-950
|
hsl(270, 55%, 5%)
|
|
--color-pink-50
|
hsl(330, 90%, 96%)
|
|
--color-pink-100
|
hsl(330, 85%, 91%)
|
|
--color-pink-200
|
hsl(330, 80%, 80%)
|
|
--color-pink-300
|
hsl(330, 75%, 70%)
|
|
--color-pink-400
|
hsl(330, 70%, 60%)
|
|
--color-pink-500
|
hsl(330, 65%, 50%)
|
|
--color-pink-600
|
hsl(330, 65%, 40%)
|
|
--color-pink-700
|
hsl(330, 65%, 30%)
|
|
--color-pink-800
|
hsl(330, 65%, 20%)
|
|
--color-pink-900
|
hsl(330, 65%, 10%)
|
|
--color-pink-950
|
hsl(330, 65%, 5%)
|
|
--color-white
|
hsl(0, 0%, 100%)
|
|
--color-black
|
hsl(0, 0%, 0%)
|
Font Family
The following font families are used for generating font-family utilities.
| Variable | Value | Preview |
--font-family-sans
|
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
|
Lorem ipsum dolor sit amet...
|
--font-family-serif
|
"Merriweather", Georgia, Cambria, "Times New Roman", Times, serif
|
Lorem ipsum dolor sit amet...
|
--font-family-mono
|
"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
|
Lorem ipsum dolor sit amet...
|
Font Size
The following font sizes are used for generating font-size utilities. The values are defined in rem units, which are relative to the root font size.
| Variable | Value | Preview |
--font-size-3xs
|
0.5rem
|
Text in 3xs
|
--font-size-2xs
|
0.625rem
|
Text in 2xs
|
--font-size-xs
|
0.75rem
|
Text in xs
|
--font-size-sm
|
0.875rem
|
Text in sm
|
--font-size-base
|
1rem
|
Text in base
|
--font-size-lg
|
1.125rem
|
Text in lg
|
--font-size-xl
|
1.25rem
|
Text in xl
|
--font-size-2xl
|
1.5rem
|
Text in 2xl
|
--font-size-3xl
|
1.875rem
|
Text in 3xl
|
--font-size-4xl
|
2.25rem
|
Text in 4xl
|
--font-size-5xl
|
3rem
|
Text in 5xl
|
--font-size-6xl
|
3.75rem
|
Text in 6xl
|
--font-size-7xl
|
4.5rem
|
Text in 7xl
|
--font-size-8xl
|
6rem
|
Text in 8xl
|
--font-size-9xl
|
8rem
|
Text in 9xl
|
Font Weight
The following font weights are used for generating font-weight utilities. These values are typically used to control the thickness of the text.
| Variable | Value | Preview |
--font-weight-thin
|
100
|
Text in thin
|
--font-weight-extralight
|
200
|
Text in extralight
|
--font-weight-light
|
300
|
Text in light
|
--font-weight-normal
|
400
|
Text in normal
|
--font-weight-medium
|
500
|
Text in medium
|
--font-weight-semibold
|
600
|
Text in semibold
|
--font-weight-bold
|
700
|
Text in bold
|
--font-weight-extrabold
|
800
|
Text in extrabold
|
--font-weight-black
|
900
|
Text in black
|
Line Height
The following line heights are used for generating line-height utilities. These values help control the vertical spacing between lines of text.
| Variable | Value | Preview |
--leading-none
|
1
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat...
|
--leading-tight
|
1.25
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat...
|
--leading-snug
|
1.375
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat...
|
--leading-normal
|
1.5
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat...
|
--leading-relaxed
|
1.625
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat...
|
--leading-loose
|
2
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat...
|
Letter Spacing
The following letter spacing values are used for generating letter-spacing utilities. These values control the space between characters in text.
| Variable | Value | Preview |
--tracking-tighter
|
-0.05em
|
Text with letter spacing tighter
|
--tracking-tight
|
-0.025em
|
Text with letter spacing tight
|
--tracking-normal
|
0
|
Text with letter spacing normal
|
--tracking-wide
|
0.025em
|
Text with letter spacing wide
|
--tracking-wider
|
0.05em
|
Text with letter spacing wider
|
--tracking-widest
|
0.1em
|
Text with letter spacing widest
|
Border Radius
The following border radius values are used for generating border-radius utilities. These values help create rounded corners on elements.
| Variable | Value | Preview |
--radius-xs
|
0.125rem
|
|
--radius-sm
|
0.25rem
|
|
--radius-md
|
0.375rem
|
|
--radius-lg
|
0.5rem
|
|
--radius-xl
|
0.75rem
|
|
--radius-2xl
|
1rem
|
|
--radius-3xl
|
1.5rem
|
|
--radius-4xl
|
2rem
|
|
--radius-full
|
9999px
|
|
--radius-none
|
0
|
Border Width
The following border width values are used for generating border-width utilities. These values control the thickness of borders on elements.
| Variable | Value | Preview |
--border-width-0
|
0
|
|
--border-width-1
|
1px
|
|
--border-width-2
|
2px
|
|
--border-width-4
|
4px
|
|
--border-width-6
|
6px
|
|
--border-width-8
|
8px
|
Spacing
The following spacing values are used for generating margin, padding, width, and height utilities. These values help control the space around and within elements.
| Variable | Value | Preview |
--spacing-0
|
0
|
|
--spacing-1
|
0.25rem
|
|
--spacing-2
|
0.5rem
|
|
--spacing-3
|
0.75rem
|
|
--spacing-4
|
1rem
|
|
--spacing-5
|
1.25rem
|
|
--spacing-6
|
1.5rem
|
|
--spacing-7
|
1.75rem
|
|
--spacing-8
|
2rem
|
|
--spacing-9
|
2.25rem
|
|
--spacing-10
|
2.5rem
|
|
--spacing-11
|
2.75rem
|
|
--spacing-12
|
3rem
|
|
--spacing-14
|
3.5rem
|
|
--spacing-16
|
4rem
|
|
--spacing-20
|
5rem
|
|
--spacing-24
|
6rem
|
|
--spacing-28
|
7rem
|
|
--spacing-32
|
8rem
|
|
--spacing-36
|
9rem
|
|
--spacing-40
|
10rem
|
|
--spacing-44
|
11rem
|
|
--spacing-48
|
12rem
|
|
--spacing-52
|
13rem
|
|
--spacing-56
|
14rem
|
|
--spacing-60
|
15rem
|
|
--spacing-64
|
16rem
|
|
--spacing-72
|
18rem
|
|
--spacing-80
|
20rem
|
|
--spacing-88
|
22rem
|
|
--spacing-96
|
24rem
|
|
--spacing-px
|
1px
|
|
--spacing-half
|
50%
|
|
--spacing-full
|
100%
|
|
--spacing-auto
|
auto
|
Shadows
The following shadow values are used for generating box-shadow utilities. These values help create depth and emphasis on elements.
| Variable | Value | Preview |
--shadow-sm
|
0 0.25rem 1rem -0.125rem rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02)
|
|
--shadow-md
|
0 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.02)
|
|
--shadow-lg
|
0rem 1rem 1rem -0.5rem rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.02)
|
|
--shadow-none
|
none
|
Opacities
The following opacity values are used for generating opacity utilities. These values help control the transparency of elements.
| Variable | Value | Preview |
--opacity-0
|
0
|
|
--opacity-10
|
0.1
|
|
--opacity-20
|
0.2
|
|
--opacity-30
|
0.3
|
|
--opacity-40
|
0.4
|
|
--opacity-50
|
0.5
|
|
--opacity-60
|
0.6
|
|
--opacity-70
|
0.7
|
|
--opacity-80
|
0.8
|
|
--opacity-90
|
0.9
|
|
--opacity-100
|
100
|
Animations
The following animation values are used for generating animation utilities. These values help create dynamic effects on elements.
| Variable | Value | Preview |
--animate-bounce
|
bounce 1s infinite
|
|
--animate-fadein
|
fadein ease 1s
|
|
--animate-fadeout
|
fadeout ease 1s
|
|
--animate-ping
|
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
|
|
--animate-pulse
|
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
|
|
--animate-spin
|
spin 1s linear infinite
|