Global Variables

First Published On:
April 25, 2024
Last Updated:
April 26, 2024

Summary

Figure 1. Animation demonstrating state layer implementation.

No items found.

Global Variables are exactly what they sound like. They are the preset variables, set on the :root of the DOM, which make up the backbone of the LiftKit system. There are two types: color and size. LiftKit doesn't currently have a global variable for typeface, because it only uses a single font family, which makes using a variable unnecessary. You can simply set the font family on the :root element directly with the CSS property font-family.

Color variables

We'll discuss the actual color system itself in the next section. For now, you just need to know how the variables are written, because the rest of this documentation will assume you know how to read them.

Color variables are named using the following syntax: --[Color Mode]__[Swatch Name]_lkv"

  1. Color Mode refers to either light or dark mode.
  2. Swatch Name refers to the actual color you're choosing. They're the same thing as design tokens in Material 3, but I think "Swatch Name" is easier for beginners to understand while meaning the same thing.
  3. "_lkv" simply stands for "LiftKit Variable" It's put at the end so that, if you ever want to write a function that modifies ONLY the LiftKit variables, this gives you an easy way to target them.

Size variables

Size variables are simpler and don't use the _lkv ending, because you really, really shouldn't modify these.

There are two kinds of size variables.

  1. Base sizes: (xxs to xxl) are the basic "building block" sizes that are used in utility classes that have a size in the name like .m-top__xxs or .p-right__ xl.
  2. Increments are the "steps" you can use when you need to scale something up or down. To scale up, multiply by this variable. To scale down, divide.
    1. wholestep is like scaling by 1 order of magnitude
    2. halfstep is like scaling by half an order of magnitude
    3. quarterstep is like scaling by "juuuuuust a little bit" (aka one-fourth an order of magnitude. It's really small.)

Recommended Usage

Customization

Resources that mention this topic

No items found.