@stratakit/foundations

Foundational pieces of StrataKit.

This package includes:

- CSS reset and global styles
- Design tokens, exposed as "CSS variables".
- component
- component

Installation

Using your package manager of choice, install the latest version of @stratakit/foundations.

``console npm add @stratakit/foundations`

> [!NOTE] > This package is a dependency of@stratakit/mui and does not need to be installed explicitly if you're already using @stratakit/mui.

`Usage`

To use StrataKit in your app, you’ll need to wrap your application's entrypoint with StrataKit's component, which requires the colorScheme and density props.

`jsx import { Root } from "@stratakit/foundations";

export function App() { return ( {/ Use StrataKit components here /} ); }`

This will ensure StrataKit's styles are loaded to either the document or the encompassing shadow root.

Once that’s in place, you can import and use components from @stratakit/bricks and other @stratakit packages.

By default, StrataKit's CSS variables are made available to the _entire page_ (including the element, which will automatically use an appropriate background-color). The synchronizeColorScheme prop can be set to false to prevent this behavior, which can be useful if you want to isolate StrataKit's styles to only the parts of the page that are wrapped in .

> [!NOTE] > If you are trying to use this package alongside the current stable version of iTwinUI, you will also need to set up the theme bridge.

`$3`

StrataKit uses InterVariable as its interface font. In the future, other fonts may also be added for different purposes. We recommend self-hosting all fonts for robustness, security and performance reasons.

To self-host InterVariable, download the InterVariable.woff2 and InterVariable-Italic.woff2 font files from the official website, and serve them alongside your other assets. Then include the following CSS in the of your document, replacing the placeholder paths with the correct path to where the fonts are located:

`html`

Build tools such as Vite can handle url() references and automatically copy these files into your output directory with hashed file names. These files can then be safely served with HTTP caching without blocking upgrades to newer versions of the fonts.

> [!NOTE] > If the component cannot find InterVariable as a font in the document, it will automatically add a fallback which uses Inter’s CDN. In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.

`Contributing`

Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating issues.

If you're interested in contributing code, please read CONTRIBUTING.md` for more information.

Usage

To use StrataKit in your app, you’ll need to wrap your application's entrypoint with StrataKit's component, which requires the colorScheme and density props.

jsx
import { Root } from "@stratakit/foundations";

export function App() {
	return (
		
			{/ Use StrataKit components here /}
		
	);
}

This will ensure StrataKit's styles are loaded to either the document or the encompassing shadow root.

Once that’s in place, you can import and use components from @stratakit/bricks and other @stratakit packages.

 to prevent this behavior, which can be useful if you want to isolate StrataKit's styles to only the parts of the page that are wrapped in

.

> [!NOTE]
> If you are trying to use this package alongside the current stable version of iTwinUI, you will also need to set up the theme bridge.

$3

StrataKit uses InterVariable as its interface font. In the future, other fonts may also be added for different purposes. We recommend self-hosting all fonts for robustness, security and performance reasons.

To self-host InterVariable, download the InterVariable.woff2 and InterVariable-Italic.woff2

 font files from the official website, and serve them alongside your other assets. Then include the following CSS in the

of your document, replacing the placeholder paths with the correct path to where the fonts are located:

html

Build tools such as Vite can handle url()

 references and automatically copy these files into your output directory with hashed file names. These files can then be safely served with HTTP caching without blocking upgrades to newer versions of the fonts.

> [!NOTE]
> If the

component cannot find InterVariable

 as a font in the document, it will automatically add a fallback which uses Inter’s CDN. In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.