Skip to content

Commit

Permalink
docs: add CSS Theme Variables page
Browse files Browse the repository at this point in the history
  • Loading branch information
cheton committed Dec 4, 2024
1 parent d54ab26 commit 2416dd7
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/react-docs/config/sidebar-routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const routes = [
{ title: 'Usage', path: 'getting-started/usage' },
{ title: 'Color Mode', path: 'getting-started/color-mode' },
{ title: 'Color Style', path: 'getting-started/color-style' },
{ title: 'CSS Variables', path: 'getting-started/css-variables' },
{ title: 'CSS Theme Variables', path: 'getting-started/css-theme-variables' },
{ title: 'Icons', path: 'getting-started/icons' },
{ title: 'The sx prop', path: 'getting-started/the-sx-prop' },
{ title: 'Security', path: 'getting-started/security' },
Expand Down Expand Up @@ -68,6 +68,7 @@ export const routes = [
<ToolsConfigurationIcon size="4x" {...props} />
),
routes: [
{ title: 'CSS Theme Variables', path: 'customization/css-theme-variables' },
{ title: 'Shadow DOM', path: 'customization/shadow-dom' },
],
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# CSS Theme Variables

Learn how to adopt CSS theme variables.

## Getting Started

To use CSS theme variables, create a theme with `cssVariables: true` and wrap your app with `TonicProvider`.

After rendering, you will see CSS variables in the `:root` stylesheet of your HTML document. By default, these variables are prefixed with `--tonic`:

```jsx
import {
TonicProvider,
createTheme,
} from '@tonic-ui/react';

const theme = createTheme({ cssVariables: true });

function App() {
return (
<TonicProvider theme={theme}>
{/* Your app content */}
</TonicProvider>
);
}
```

The resulting CSS variables will look like this:

```css
:root {
--tonic-borders-1: .0625rem solid;
--tonic-borders-2: .125rem solid;
/* More variables */
}
```

## Customizing Variable Prefix

You can customize the variable prefix by providing a string to the `prefix` property in the theme configuration.

```js
createTheme({
cssVariables: {
prefix: 'custom',
},
});
```

```css
:root {
--custom-borders-1: .0625rem solid;
--custom-borders-2: .125rem solid;
/* More variables */
}
```

If you prefer not to use any prefix, set `prefix` to an empty string:

```js
createTheme({
cssVariables: {
prefix: '',
},
});
```

```css
:root {
--borders-1: .0625rem solid;
--borders-2: .125rem solid;
/* More variables */
}
```

## Using Variables Inside Shadow DOM

To apply CSS theme variables inside shadow DOM, specify a different root selector using the `rootSelector` option:

```js
createTheme({
cssVariables: {
rootSelector: ':host',
},
});
```

```css
:host {
--tonic-borders-1: .0625rem solid;
--tonic-borders-2: .125rem solid;
/* More variables */
}
```
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# CSS Variables
# CSS Theme Variables

## Overview

Expand Down

0 comments on commit 2416dd7

Please sign in to comment.