CSS Variables

Tip Top UI uses CSS variables (custom properties) to define colors, sizes, paddings and other properties. You can customize the CSS variables by defining them in your own stylesheets.

:root {
  --tipTop-color-primary: "#209f47";
  --tipTop-fontFamily-text: "Comic Sans";
}

The CSS custom properties are prefixed with tipTop- to avoid conflicts with third party CSS variables.

The documentation for each component includes the unique CSS variables they use.