CSS only

The @caspeco/casper-ui-css package contains the Casper UI theme variables for projects that can’t use the Theme Provider (built with React). It doesn’t include any components.

• theme.css declares every Casper UI theme variable under the casper-ui-theme class, including dark mode overrides.
• The JS entry exports the theme variable enums, such as ThemeColor, as plain objects.

The package is generated from the library’s theme, so the values always match the components.

Usage

1. Install the package:

   npm install @caspeco/casper-ui-css

2. Import the stylesheet once, among your global styles:

   import "@caspeco/casper-ui-css/theme.css";

3. Add the casper-ui-theme class to the element that should have the variables. The variables are available within that element only:

   <my-widget class="casper-ui-theme"></my-widget>

   To use them on the whole page, add the class to the html element instead:

   <html class="casper-ui-theme"></html>

4. Reference the variables in CSS:

   .card {
     background-color: var(--theme-colors-surface-wlv);
     padding: var(--theme-spacing-medium);
   }

   Or through the enums in JS/TS:

   import { ThemeColor, ThemeSpace } from "@caspeco/casper-ui-css";
   
   element.style.backgroundColor = ThemeColor.Surface; // "var(--theme-colors-surface-wlv)"
   element.style.padding = ThemeSpace.Medium;

Together with the Theme Provider

The Theme Provider declares the same variables on the html element. Since this package only declares them within casper-ui-theme elements, it can be used on the same page without overriding the Theme Provider’s variables, even if the versions differ.

Dark mode

The dark mode colors are used when the casper-ui-theme element, or any element above it, has the dark class. That means it follows the Theme Provider’s color mode automatically, since it sets the dark class on the html element.

<!-- The whole page -->
<html class="casper-ui-theme dark"></html>

<!-- Only within this element -->
<my-widget class="casper-ui-theme dark"></my-widget>

Versioning

The package follows Semantic versioning, separately from @caspeco/casper-ui-library:

• Major when a variable or enum member is removed or renamed
• Minor when a variable or enum member is added
• Patch when only variable values change