@tabula/ui-theme
v3.3.1
Published
Theme provider for the UI kit
Downloads
222
Maintainers
Readme
@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
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.