@tabula/ui-theme

Theme provider for the UI kit.

Installation

Use the package manager pnpm to install @tabula/ui-theme.

pnpm add @tabula/ui-theme

You can use npm or yarn too.

Usage

React

Packages provides UiTheme component which imports all required styles and provides layers and vars through context.

<UiTheme>
  <YourUiEntryPoint />
</UiTheme>

Also, it provides useUiTheme hook which allows to access to provided layers and vars.

const { layers, vars } = useUiTheme();

CSS

You can use provided layers in plain CSS or PostCSS:

@layer tbl--components {
  .selector {
    color: var(--tbl--colors--brand);
  }
}

Layers and variables have tbl-- prefix to avoid naming collisions.

You can use them in Sass too.

Sass

We provide modules for Sass too:

@use '~@tabula/ui-theme' as theme;

@layer theme.$layer--components {
  .selector {
    color: theme.$colors--brand;
  }
}

vanilla-extract

The package provides the first-citizen support of vanilla-extract:

import { style } from '@vanilla-extract/css';

import { uiLayers, uiTheme } from '@tabula/ui-theme';

export const selector = style({
  [uiLayers.components]: {
    color: uiTheme.colors.brand,
  }
});

Structure

There are two types of files, which can be used to configure theme.

The first are configuration files:

• src/fontFaces.css.ts - defines font faces;
• src/vars.css.ts - definitions of available CSS layers and tokens.

IMPORTANT: Do not require any modules in src/vars.css.ts. It can be a problem for tokens export to Sass.

The second are definition files:

• src/layers.css.ts - defines global CSS layers based on the layers list;
• src/theme.css.ts - defines global CSS variables based on tokens.

Also, we provides reboot.css.ts file which defines normalize styles.

License

This project is ISC licensed.