diff --git a/packages/react-docs/pages/_app.page.js b/packages/react-docs/pages/_app.page.js
index 90159af454..c9909bb8b9 100644
--- a/packages/react-docs/pages/_app.page.js
+++ b/packages/react-docs/pages/_app.page.js
@@ -51,10 +51,7 @@ const EmotionCacheProvider = ({
const App = (props) => {
const customTheme = useConst(() => createTheme({
- config: {
- // Enable CSS variables replacement
- useCSSVariables: true,
- },
+ cssVariables: true, // Enable CSS variables replacement
components: {
// Set default props for specific components
//
diff --git a/packages/react-docs/pages/contributing/react-components-part-1.page.mdx b/packages/react-docs/pages/contributing/react-components-part-1.page.mdx
index cd068f786d..3f33b609c5 100644
--- a/packages/react-docs/pages/contributing/react-components-part-1.page.mdx
+++ b/packages/react-docs/pages/contributing/react-components-part-1.page.mdx
@@ -103,7 +103,7 @@ import React from 'react';
describe('Code', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true, // Enable CSS variables replacement
};
const { container } = render((
Hello World
diff --git a/packages/react-docs/pages/getting-started/css-variables/index.page.mdx b/packages/react-docs/pages/getting-started/css-variables/index.page.mdx
index 2b1c7fb280..b8eb07f0e1 100644
--- a/packages/react-docs/pages/getting-started/css-variables/index.page.mdx
+++ b/packages/react-docs/pages/getting-started/css-variables/index.page.mdx
@@ -15,10 +15,7 @@ import {
// Use `createTheme` to provide custom configuration
```
diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx
index 5908c95178..20a3c34c2b 100644
--- a/packages/react-docs/pages/getting-started/usage/index.page.mdx
+++ b/packages/react-docs/pages/getting-started/usage/index.page.mdx
@@ -47,10 +47,7 @@ import {
} from '@tonic-ui/react';
const customTheme = createTheme({
- config: {
- // Enable CSS variables replacement
- useCSSVariables: true,
- },
+ cssVariables: true, // Enable CSS variables replacement
components: {
// Set default props for specific components
//
@@ -192,9 +189,7 @@ Tonic UI supports converting theme tokens defined in the theme to CSS variables.
```jsx
```
@@ -303,9 +298,7 @@ import {
// Let's say you want to add more colors
const customTheme = createTheme({
- config: {
- useCSSVariables: true,
- },
+ cssVariables: true, // Enable CSS variables replacement
colors: {
brand: {
90: "#1a365d",
diff --git a/packages/react-docs/sandbox/create-react-app.js b/packages/react-docs/sandbox/create-react-app.js
index 8dce8cd40f..02fd3caa1e 100644
--- a/packages/react-docs/sandbox/create-react-app.js
+++ b/packages/react-docs/sandbox/create-react-app.js
@@ -74,10 +74,7 @@ const customColorStyle = merge(colorStyle, {
});
const customTheme = createTheme({
- config: {
- // Enable CSS variables replacement
- useCSSVariables: true,
- },
+ cssVariables: true, // Enable CSS variables replacement
components: {
// Set default props for specific components
//
diff --git a/packages/react/src/accordion/__tests__/Accordion.test.js b/packages/react/src/accordion/__tests__/Accordion.test.js
index d191a81598..6cbba8f801 100644
--- a/packages/react/src/accordion/__tests__/Accordion.test.js
+++ b/packages/react/src/accordion/__tests__/Accordion.test.js
@@ -15,7 +15,7 @@ import React from 'react';
describe('Accordion', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/badge/__tests__/Badge.test.js b/packages/react/src/badge/__tests__/Badge.test.js
index cabd1e088b..6df4ded73b 100644
--- a/packages/react/src/badge/__tests__/Badge.test.js
+++ b/packages/react/src/badge/__tests__/Badge.test.js
@@ -7,7 +7,7 @@ import React from 'react';
describe('Badge', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/button/__tests__/ButtonBase.test.js b/packages/react/src/button/__tests__/ButtonBase.test.js
index 03fc43f2bd..54172e8bf3 100644
--- a/packages/react/src/button/__tests__/ButtonBase.test.js
+++ b/packages/react/src/button/__tests__/ButtonBase.test.js
@@ -6,7 +6,7 @@ import React from 'react';
describe('ButtonBase', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/checkbox/__tests__/Checkbox.test.js b/packages/react/src/checkbox/__tests__/Checkbox.test.js
index 8070a89b7a..478f1f35ff 100644
--- a/packages/react/src/checkbox/__tests__/Checkbox.test.js
+++ b/packages/react/src/checkbox/__tests__/Checkbox.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
describe('Checkbox', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/code/__tests__/Code.test.js b/packages/react/src/code/__tests__/Code.test.js
index 41e7eed588..7828b0c080 100644
--- a/packages/react/src/code/__tests__/Code.test.js
+++ b/packages/react/src/code/__tests__/Code.test.js
@@ -7,7 +7,7 @@ import React from 'react';
describe('Code', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js b/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js
index cba47cfe8f..095496bf0c 100644
--- a/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js
+++ b/packages/react/src/date-pickers/DatePicker/__tests__/DatePicker.test.js
@@ -66,7 +66,7 @@ describe('DatePicker', () => {
it('should render correctly', async () => {
const user = userEvent.setup();
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const defaultValue = new Date('2024-08-01');
const inputFormat = 'yyyy-MM-dd';
diff --git a/packages/react/src/divider/__tests__/Divider.test.js b/packages/react/src/divider/__tests__/Divider.test.js
index 867cfa5cc8..2b89e55ec6 100644
--- a/packages/react/src/divider/__tests__/Divider.test.js
+++ b/packages/react/src/divider/__tests__/Divider.test.js
@@ -6,7 +6,7 @@ import React from 'react';
describe('Divider', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/drawer/__tests__/Drawer.test.js b/packages/react/src/drawer/__tests__/Drawer.test.js
index 626ab3434c..7d40476342 100644
--- a/packages/react/src/drawer/__tests__/Drawer.test.js
+++ b/packages/react/src/drawer/__tests__/Drawer.test.js
@@ -19,7 +19,7 @@ import React, { useCallback, useRef, useState } from 'react';
describe('Drawer', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { baseElement } = render((
{
const sizes = ['sm', 'md', 'lg'];
const variants = ['outline', 'filled', 'flush', 'unstyled'];
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/input/__tests__/InputControl.test.js b/packages/react/src/input/__tests__/InputControl.test.js
index 819a29fe37..da95df68a1 100644
--- a/packages/react/src/input/__tests__/InputControl.test.js
+++ b/packages/react/src/input/__tests__/InputControl.test.js
@@ -10,7 +10,7 @@ describe('InputControl', () => {
const sizes = ['sm', 'md', 'lg'];
const variants = ['outline', 'filled', 'flush', 'unstyled'];
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/menu/__tests__/Menu.test.js b/packages/react/src/menu/__tests__/Menu.test.js
index 2f10482a48..82ce68611a 100644
--- a/packages/react/src/menu/__tests__/Menu.test.js
+++ b/packages/react/src/menu/__tests__/Menu.test.js
@@ -41,7 +41,7 @@ describe('Menu', () => {
it('should render correctly', async () => {
const user = userEvent.setup();
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/modal/__tests__/Modal.test.js b/packages/react/src/modal/__tests__/Modal.test.js
index 9108e6c5c3..076e32ab74 100644
--- a/packages/react/src/modal/__tests__/Modal.test.js
+++ b/packages/react/src/modal/__tests__/Modal.test.js
@@ -19,7 +19,7 @@ import React, { useCallback, useRef, useState } from 'react';
describe('Modal', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { baseElement } = render((
diff --git a/packages/react/src/popover/__tests__/Popover.test.js b/packages/react/src/popover/__tests__/Popover.test.js
index 7a08e09737..68d3b616a8 100644
--- a/packages/react/src/popover/__tests__/Popover.test.js
+++ b/packages/react/src/popover/__tests__/Popover.test.js
@@ -9,7 +9,7 @@ describe('Popover', () => {
it('should render correctly', async () => {
const user = userEvent.setup();
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/portal/__tests__/Portal.test.js b/packages/react/src/portal/__tests__/Portal.test.js
index e50316f451..55b17acb19 100644
--- a/packages/react/src/portal/__tests__/Portal.test.js
+++ b/packages/react/src/portal/__tests__/Portal.test.js
@@ -6,7 +6,7 @@ import React from 'react';
describe('Portal', () => {
it('should render correctly', () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/progress/__tests__/Progress.test.js b/packages/react/src/progress/__tests__/Progress.test.js
index 6b44c13673..fe9708b23d 100644
--- a/packages/react/src/progress/__tests__/Progress.test.js
+++ b/packages/react/src/progress/__tests__/Progress.test.js
@@ -6,7 +6,7 @@ import React from 'react';
describe('LinearProgress', () => {
it('renders correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/radio/__tests__/Radio.test.js b/packages/react/src/radio/__tests__/Radio.test.js
index cafc02f694..8d9bf8afee 100644
--- a/packages/react/src/radio/__tests__/Radio.test.js
+++ b/packages/react/src/radio/__tests__/Radio.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
describe('Radio', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/search-input/__tests__/SearchInput.test.js b/packages/react/src/search-input/__tests__/SearchInput.test.js
index 320ff502c3..0ebd40f631 100644
--- a/packages/react/src/search-input/__tests__/SearchInput.test.js
+++ b/packages/react/src/search-input/__tests__/SearchInput.test.js
@@ -10,7 +10,7 @@ describe('SearchInput', () => {
const sizes = ['sm', 'md', 'lg'];
const variants = ['outline', 'filled', 'flush', 'unstyled'];
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/stack/__tests__/Stack.test.js b/packages/react/src/stack/__tests__/Stack.test.js
index 51e9e28866..631843fea4 100644
--- a/packages/react/src/stack/__tests__/Stack.test.js
+++ b/packages/react/src/stack/__tests__/Stack.test.js
@@ -7,7 +7,7 @@ import React from 'react';
describe('Stack', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
@@ -54,7 +54,7 @@ describe('Stack', () => {
it('should apply spacing between child elements', () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
render((
diff --git a/packages/react/src/switch/__tests__/Switch.test.js b/packages/react/src/switch/__tests__/Switch.test.js
index 7c76750937..e818943901 100644
--- a/packages/react/src/switch/__tests__/Switch.test.js
+++ b/packages/react/src/switch/__tests__/Switch.test.js
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from 'react';
describe('Switch', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/table/__tests__/Table.test.js b/packages/react/src/table/__tests__/Table.test.js
index 2e78179726..4351fd1674 100644
--- a/packages/react/src/table/__tests__/Table.test.js
+++ b/packages/react/src/table/__tests__/Table.test.js
@@ -61,7 +61,7 @@ describe('Table', () => {
it('should render correctly with `flexbox` layout', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
@@ -104,7 +104,7 @@ describe('Table', () => {
it('should render correctly with `table` layout', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/tabs/__tests__/Tabs.test.js b/packages/react/src/tabs/__tests__/Tabs.test.js
index dd2304cd7d..aeb4b76add 100644
--- a/packages/react/src/tabs/__tests__/Tabs.test.js
+++ b/packages/react/src/tabs/__tests__/Tabs.test.js
@@ -6,7 +6,7 @@ import React from 'react';
describe('Tabs', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/text/__tests__/Text.test.js b/packages/react/src/text/__tests__/Text.test.js
index 155d947726..03d0a6efe2 100644
--- a/packages/react/src/text/__tests__/Text.test.js
+++ b/packages/react/src/text/__tests__/Text.test.js
@@ -7,7 +7,7 @@ import React from 'react';
describe('TextLabel', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/text/__tests__/TextLabel.test.js b/packages/react/src/text/__tests__/TextLabel.test.js
index 502ca46a5d..85b44d9890 100644
--- a/packages/react/src/text/__tests__/TextLabel.test.js
+++ b/packages/react/src/text/__tests__/TextLabel.test.js
@@ -7,7 +7,7 @@ import React from 'react';
describe('TextLabel', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/textarea/__tests__/Textarea.test.js b/packages/react/src/textarea/__tests__/Textarea.test.js
index 0b078bb0cc..5df956b83d 100644
--- a/packages/react/src/textarea/__tests__/Textarea.test.js
+++ b/packages/react/src/textarea/__tests__/Textarea.test.js
@@ -9,7 +9,7 @@ describe('Textarea', () => {
it('should render correctly', async () => {
const variants = ['outline', 'filled', 'unstyled'];
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
<>
diff --git a/packages/react/src/theme/__tests__/createTheme.test.js b/packages/react/src/theme/__tests__/createTheme.test.js
index a5b8cea88f..760d592df2 100644
--- a/packages/react/src/theme/__tests__/createTheme.test.js
+++ b/packages/react/src/theme/__tests__/createTheme.test.js
@@ -3,10 +3,6 @@ import createTheme from '../createTheme';
describe('createTheme', () => {
it('should create a default theme', () => {
const theme = createTheme();
- // Internal properties
- expect(theme).toHaveProperty('config');
- expect(theme).toHaveProperty('components');
- // Theme properties
expect(theme).toHaveProperty('borders');
expect(theme).toHaveProperty('breakpoints');
expect(theme).toHaveProperty('colors');
@@ -43,21 +39,22 @@ describe('createTheme', () => {
expect(theme.components.Button.defaultProps.size).toBe('large');
});
- it('should generate a CSS variable map', () => {
- const theme = createTheme({ config: { useCSSVariables: true } });
- expect(theme.__cssVariableMap).toBeDefined();
- expect(Object.keys(theme.__cssVariableMap).length).toBeGreaterThan(0);
+ it('should not generate CSS variables with default configuration', () => {
+ const theme = createTheme();
+ expect(theme.vars).not.toBeDefined();
});
- it('should enable CSS variables when specified', () => {
- const theme = createTheme({ config: { useCSSVariables: true } });
- expect(theme.config.useCSSVariables).toBe(true);
- expect(theme).toHaveProperty('__cssVariableMap');
+ it('should generate CSS variables', () => {
+ const theme = createTheme({ cssVariables: true });
+ expect(theme.vars).toBeDefined();
+ expect(theme.vars.prefix).toBe('tonic');
+ expect(Object.keys(theme.vars).filter(x => x.startsWith('--'))[0]).toMatch(/^--tonic-/);
});
it('should apply custom prefix to CSS variables', () => {
- const theme = createTheme({ config: { prefix: 'custom' } });
- const cssVariableMap = theme.__cssVariableMap;
- expect(Object.keys(cssVariableMap)[0]).toMatch(/^--custom-/);
+ const theme = createTheme({ cssVariables: { prefix: 'custom' } });
+ expect(theme.vars).toBeDefined();
+ expect(theme.vars.prefix).toBe('custom');
+ expect(Object.keys(theme.vars).filter(x => x.startsWith('--'))[0]).toMatch(/^--custom-/);
});
});
diff --git a/packages/react/src/theme/createTheme.js b/packages/react/src/theme/createTheme.js
index 542691f45c..9735e1f5bc 100644
--- a/packages/react/src/theme/createTheme.js
+++ b/packages/react/src/theme/createTheme.js
@@ -5,38 +5,51 @@ import createCSSVariableMap from './utils/createCSSVariableMap';
const defaultCSSVariablePrefix = 'tonic';
-const cssVariableScales = Object.keys(tonicTheme);
-
const createTheme = (options = {}, ...args) => {
+ const {
+ // Configure CSS variables for the theme:
+ // - `false` (default): Disable CSS variables.
+ // - `true`: Enable CSS variables with default settings.
+ // - `{ prefix: 'tonic' }`: Enable CSS variables with a custom prefix.
+ cssVariables = false,
+ ...rest
+ } = options;
+
let theme = merge(
{
...tonicTheme,
- config: {
- prefix: defaultCSSVariablePrefix,
- useCSSVariables: false,
- },
- components: {},
},
- options,
+ rest,
);
// Merge additional arguments into the theme
theme = args.reduce((acc, arg) => merge(acc, arg), theme);
- // Generate a theme object filtered to include only scales supported by CSS variables
- const cssVariableTheme = Object.fromEntries(
- Object.entries(ensurePlainObject(theme)).filter(
- ([key]) => cssVariableScales.includes(key)
- )
- );
-
- // Create a map of CSS variables with the appropriate prefix
- const cssVariableMap = createCSSVariableMap(cssVariableTheme, { prefix: theme?.config?.prefix });
-
- // Merge the CSS variable map into the theme
- theme = merge(theme, {
- __cssVariableMap: cssVariableMap,
- });
+ if (cssVariables) {
+ // Determine the prefix for CSS variables:
+ // - Uses the `prefix` property from `cssVariables` if provided (e.g., `{ prefix: 'tonic' }`).
+ // - Defaults to `defaultCSSVariablePrefix` if no custom prefix is specified.
+ const cssVariablePrefix = cssVariables?.prefix ?? defaultCSSVariablePrefix;
+
+ // Generate a theme object filtered to include only scales supported by CSS variables
+ const cssVariableScales = Object.keys(tonicTheme);
+ const cssVariableTheme = Object.fromEntries(
+ Object.entries(ensurePlainObject(theme)).filter(
+ ([key]) => cssVariableScales.includes(key)
+ )
+ );
+
+ // Create a map of CSS variables with the appropriate prefix
+ const cssVariableMap = createCSSVariableMap(cssVariableTheme, { prefix: cssVariablePrefix });
+
+ // Merge CSS variables into the theme
+ theme = merge(theme, {
+ vars: {
+ prefix: cssVariablePrefix,
+ ...cssVariableMap,
+ },
+ });
+ }
return theme;
};
diff --git a/packages/react/src/tooltip/__tests__/Tooltip.test.js b/packages/react/src/tooltip/__tests__/Tooltip.test.js
index dc18f571d7..01fb0409c0 100644
--- a/packages/react/src/tooltip/__tests__/Tooltip.test.js
+++ b/packages/react/src/tooltip/__tests__/Tooltip.test.js
@@ -17,7 +17,7 @@ describe('Tooltip', () => {
it('should render correctly', async () => {
const user = userEvent.setup();
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/src/tree/__tests__/Tree.test.js b/packages/react/src/tree/__tests__/Tree.test.js
index 164ca1dcbb..f8d27d89ab 100644
--- a/packages/react/src/tree/__tests__/Tree.test.js
+++ b/packages/react/src/tree/__tests__/Tree.test.js
@@ -182,7 +182,7 @@ const TreeItemRender = ({
describe('Tree', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const treeNodes = buildTreeNodes();
const treeMap = buildTreeMap(treeNodes);
diff --git a/packages/react/src/truncate/__tests__/Truncate.test.js b/packages/react/src/truncate/__tests__/Truncate.test.js
index ad93b56201..a7133551ef 100644
--- a/packages/react/src/truncate/__tests__/Truncate.test.js
+++ b/packages/react/src/truncate/__tests__/Truncate.test.js
@@ -6,7 +6,7 @@ import React from 'react';
describe('Truncate', () => {
it('should render correctly', async () => {
const renderOptions = {
- useCSSVariables: true,
+ cssVariables: true,
};
const { container } = render((
diff --git a/packages/react/test-utils/render.js b/packages/react/test-utils/render.js
index 51f7ccd1a4..43f74d6674 100644
--- a/packages/react/test-utils/render.js
+++ b/packages/react/test-utils/render.js
@@ -6,7 +6,7 @@ import {
PortalManager,
ToastManager,
TonicProvider,
- theme,
+ createTheme,
} from '../src';
// https://emotion.sh/docs/@emotion/jest#tohavestylerule
@@ -20,13 +20,9 @@ const customRender = (ui, options) => {
colorMode={{
defaultValue: 'dark',
}}
- theme={{
- ...theme,
- config: {
- ...theme.config,
- useCSSVariables: options?.useCSSVariables,
- },
- }}
+ theme={createTheme({
+ cssVariables: options?.cssVariables,
+ })}
>
diff --git a/packages/styled-system/src/__tests__/sx.test.js b/packages/styled-system/src/__tests__/sx.test.js
index 62007ae858..5a59919f38 100644
--- a/packages/styled-system/src/__tests__/sx.test.js
+++ b/packages/styled-system/src/__tests__/sx.test.js
@@ -280,11 +280,8 @@ const defaultTheme = {
test('should pass', () => {
const theme = {
...defaultTheme,
- config: {
+ vars: {
prefix: 'tonic',
- useCSSVariables: true,
- },
- __cssVariableMap: {
'--tonic-borders-1': '.0625rem solid',
'--tonic-borders-2': '.125rem solid',
'--tonic-borders-3': '.1875rem solid',
diff --git a/packages/styled-system/src/config/__tests__/margin.test.js b/packages/styled-system/src/config/__tests__/margin.test.js
index 8084feaf1a..b8985e7f7e 100644
--- a/packages/styled-system/src/config/__tests__/margin.test.js
+++ b/packages/styled-system/src/config/__tests__/margin.test.js
@@ -7,11 +7,8 @@ const defaultTheme = {
const defaultThemeWithCSSVariables = {
...defaultTheme,
- config: {
+ vars: {
prefix: 'tonic',
- useCSSVariables: true,
- },
- __cssVariableMap: {
'--tonic-breakpoints-0': '40em',
'--tonic-breakpoints-1': '52em',
'--tonic-breakpoints-2': '64em',
diff --git a/packages/styled-system/src/config/__tests__/position.test.js b/packages/styled-system/src/config/__tests__/position.test.js
index 39752d7b02..3477f7b9cf 100644
--- a/packages/styled-system/src/config/__tests__/position.test.js
+++ b/packages/styled-system/src/config/__tests__/position.test.js
@@ -6,11 +6,8 @@ const defaultTheme = {
const defaultThemeWithCSSVariables = {
...defaultTheme,
- config: {
+ vars: {
prefix: 'tonic',
- useCSSVariables: true,
- },
- __cssVariableMap: {
'--tonic-space-0': 0,
'--tonic-space-1': 4,
'--tonic-space-2': 8,
diff --git a/packages/styled-system/src/utils/transforms.js b/packages/styled-system/src/utils/transforms.js
index 4f7e816df5..6ba97a5fc7 100644
--- a/packages/styled-system/src/utils/transforms.js
+++ b/packages/styled-system/src/utils/transforms.js
@@ -11,11 +11,11 @@ const isSimpleCSSVariable = (value) => {
// Negate the value, handling CSS variables and numeric values
const toNegativeValue = (scale, absoluteValue, options) => {
const theme = options?.props?.theme;
- const useCSSVariables = !!(theme?.config?.useCSSVariables); // defaults to false
+ const hasCSSVariables = !!theme?.vars; // Defaults to false
const n = getter(scale, absoluteValue, options);
// Handle CSS variables for negative values
- if (useCSSVariables && isSimpleCSSVariable(n)) {
+ if (hasCSSVariables && isSimpleCSSVariable(n)) {
// https://stackoverflow.com/questions/49469344/using-negative-css-custom-properties
return `calc(0px - ${n})`;
}
@@ -30,11 +30,15 @@ const toNegativeValue = (scale, absoluteValue, options) => {
export const getter = (scale, value, options) => {
const theme = options?.props?.theme;
- const prefix = theme?.config?.prefix; // defaults to 'tonic'
- const useCSSVariables = !!(theme?.config?.useCSSVariables); // defaults to false
+ const hasCSSVariables = !!theme?.vars; // Defaults to false
const result = get(scale, value);
- if (result !== undefined && useCSSVariables) {
+ if (result !== undefined && hasCSSVariables) {
+ // TODO: `theme?.config?.prefix` and `theme?.__cssVariableMap` are deprecated and will be removed in the next major release
+ const cssVariablePrefixFallback = theme?.config?.prefix;
+ const cssVariablePrefix = (theme?.vars?.prefix) ?? cssVariablePrefixFallback;
+ const cssVariablesFallback = theme?.__cssVariableMap;
+ const cssVariables = (theme?.vars) ?? cssVariablesFallback;
const contextScale = options?.context?.scale;
const cssVariable = toCSSVariable(
// | contextScale | value |
@@ -42,9 +46,9 @@ export const getter = (scale, value, options) => {
// | colors | 'blue:50' |
// | space | 0 |
[contextScale, String(value ?? '')].filter(Boolean).join('.'), // => 'colors.blue:50'
- { prefix, delimiter: '-' },
+ { prefix: cssVariablePrefix, delimiter: '-' },
); // => '--tonic-colors-blue-50'
- const cssVariableValue = theme?.__cssVariableMap?.[cssVariable]; // => '#578aef'
+ const cssVariableValue = cssVariables?.[cssVariable]; // => '#578aef'
if (cssVariableValue !== undefined) {
// => Replace '#578aef' with 'var(--tonic-colors-blue-50)'
return String(result ?? '').replaceAll(cssVariableValue, `var(${cssVariable})`);