test: add a test for the custom root selector

packages/react/src/theme/__tests__/__snapshots__/createTheme.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createTheme should apply custom \`rootSelector\` for CSS variables 1`] = `
+<style
+  data-emotion="css-global"
+  data-s=""
+>
+  
+  :root[data-color-scheme]{--tonic-borders-1:.0625rem solid;--tonic-borders-2:.125rem solid;--tonic-borders-3:.1875rem solid;--tonic-borders-4:.25rem solid;--tonic-borders-5:.3125rem solid;--tonic-breakpoints-0:320px;--tonic-breakpoints-1:640px;--tonic-breakpoints-2:1024px;--tonic-breakpoints-3:1280px;--tonic-breakpoints-4:1680px;--tonic-breakpoints-sm:320px;--tonic-breakpoints-md:640px;--tonic-breakpoints-lg:1024px;--tonic-breakpoints-xl:1280px;--tonic-breakpoints-2xl:1680px;--tonic-colors-transparent:transparent;--tonic-colors-current:currentColor;--tonic-colors-red-100:#6e0002;--tonic-colors-red-90:#9d0003;--tonic-colors-red-80:#b80003;--tonic-colors-red-70:#d71920;--tonic-colors-red-60:#e52630;--tonic-colors-red-50:#f24c4f;--tonic-colors-red-40:#f46f71;--tonic-colors-red-30:#fd999a;--tonic-colors-red-20:#fcc3c4;--tonic-colors-red-10:#fee1e2;--tonic-colors-magenta-100:#750037;--tonic-colors-magenta-90:#960043;--tonic-colors-magenta-80:#b3004c;--tonic-colors-magenta-70:#ca0455;--tonic-colors-magenta-60:#dc1d68;--tonic-colors-magenta-50:#e94181;--tonic-colors-magenta-40:#f36fa0;--tonic-colors-magenta-30:#f9a0c1;--tonic-colors-magenta-20:#fcc3d8;--tonic-colors-magenta-10:#fee1ec;--tonic-colors-purple-100:#460086;--tonic-colors-purple-90:#5300a5;--tonic-colors-purple-80:#6304ca;--tonic-colors-purple-70:#771ddc;--tonic-colors-purple-60:#8f41e9;--tonic-colors-purple-50:#ab6ff3;--tonic-colors-purple-40:#bb89f6;--tonic-colors-purple-30:#cca6f9;--tonic-colors-purple-20:#ddc3fc;--tonic-colors-purple-10:#eee1fe;--tonic-colors-blue-100:#002a7e;--tonic-colors-blue-90:#00349d;--tonic-colors-blue-80:#003db8;--tonic-colors-blue-70:#0547cd;--tonic-colors-blue-60:#1e5ede;--tonic-colors-blue-50:#578aef;--tonic-colors-blue-40:#6f9bf4;--tonic-colors-blue-30:#95b7fc;--tonic-colors-blue-20:#c3d6fc;--tonic-colors-blue-10:#e1ebfe;--tonic-colors-green-100:#003011;--tonic-colors-green-90:#00461a;--tonic-colors-green-80:#005c24;--tonic-colors-green-70:#00712e;--tonic-colors-green-60:#008539;--tonic-colors-green-50:#00a94f;--tonic-colors-green-40:#04c45a;--tonic-colors-green-30:#40e884;--tonic-colors-green-20:#89f6b2;--tonic-colors-green-10:#c3fcd8;--tonic-colors-teal-100:#004034;--tonic-colors-teal-90:#005242;--tonic-colors-teal-80:#006451;--tonic-colors-teal-70:#00755f;--tonic-colors-teal-60:#00866c;--tonic-colors-teal-50:#00a584;--tonic-colors-teal-40:#04caa1;--tonic-colors-teal-30:#41e9c5;--tonic-colors-teal-20:#89f6df;--tonic-colors-teal-10:#c3fcf0;--tonic-colors-cyan-100:#003664;--tonic-colors-cyan-90:#004575;--tonic-colors-cyan-80:#005486;--tonic-colors-cyan-70:#006496;--tonic-colors-cyan-60:#0075a5;--tonic-colors-cyan-50:#0095bf;--tonic-colors-cyan-40:#10b4d3;--tonic-colors-cyan-30:#41d8e9;--tonic-colors-cyan-20:#89f0f6;--tonic-colors-cyan-10:#c3f9fc;--tonic-colors-gray-100:#151515;--tonic-colors-gray-90:#212121;--tonic-colors-gray-80:#303030;--tonic-colors-gray-70:#424242;--tonic-colors-gray-60:#5e5e5e;--tonic-colors-gray-50:#8a8a8a;--tonic-colors-gray-40:#adadad;--tonic-colors-gray-30:#c9c9c9;--tonic-colors-gray-20:#e0e0e0;--tonic-colors-gray-10:#f2f2f2;--tonic-colors-orange-50:#ff7633;--tonic-colors-yellow-50:#faba2a;--tonic-colors-white-emphasis:rgba(255, 255, 255, 1.0);--tonic-colors-white-primary:rgba(255, 255, 255, .92);--tonic-colors-white-secondary:rgba(255, 255, 255, .60);--tonic-colors-white-tertiary:rgba(255, 255, 255, .47);--tonic-colors-white-disabled:rgba(255, 255, 255, .28);--tonic-colors-black-emphasis:rgba(0, 0, 0, 1.0);--tonic-colors-black-primary:rgba(0, 0, 0, .92);--tonic-colors-black-secondary:rgba(0, 0, 0, .65);--tonic-colors-black-tertiary:rgba(0, 0, 0, .54);--tonic-colors-black-disabled:rgba(0, 0, 0, .30);--tonic-fonts-base:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;--tonic-fonts-mono:"Segoe UI Mono","SFMono-Medium","SF Mono",Menlo,Consolas,Courier,monospace;--tonic-fontSizes-xs:.75rem;--tonic-fontSizes-sm:.875rem;--tonic-fontSizes-md:1rem;--tonic-fontSizes-lg:1.125rem;--tonic-fontSizes-xl:1.25rem;--tonic-fontSizes-2xl:1.5rem;--tonic-fontSizes-3xl:1.75rem;--tonic-fontSizes-4xl:2rem;--tonic-fontWeights-thin:100;--tonic-fontWeights-extralight:200;--tonic-fontWeights-light:300;--tonic-fontWeights-normal:400;--tonic-fontWeights-medium:500;--tonic-fontWeights-semibold:600;--tonic-fontWeights-bold:700;--tonic-fontWeights-extrabold:800;--tonic-fontWeights-black:900;--tonic-lineHeights-normal:normal;--tonic-lineHeights-base:1.5;--tonic-lineHeights-xs:1.125rem;--tonic-lineHeights-sm:1.25rem;--tonic-lineHeights-md:1.375rem;--tonic-lineHeights-lg:1.5rem;--tonic-lineHeights-xl:1.75rem;--tonic-lineHeights-2xl:2rem;--tonic-lineHeights-3xl:2.25rem;--tonic-lineHeights-4xl:2.5rem;--tonic-outlines-1:.0625rem solid;--tonic-outlines-2:.125rem solid;--tonic-outlines-3:.1875rem solid;--tonic-outlines-4:.25rem solid;--tonic-outlines-5:.3125rem solid;--tonic-radii-circle:50%;--tonic-radii-none:0;--tonic-radii-sm:.1875rem;--tonic-radii-md:.375rem;--tonic-radii-lg:.75rem;--tonic-shadows-none:none;--tonic-sizes-1q:.0625rem;--tonic-sizes-2q:.125rem;--tonic-sizes-3q:.1875rem;--tonic-sizes-4q:.25rem;--tonic-sizes-5q:.3125rem;--tonic-sizes-6q:.375rem;--tonic-sizes-7q:.4375rem;--tonic-sizes-8q:.5rem;--tonic-sizes-9q:.5625rem;--tonic-sizes-10q:.625rem;--tonic-sizes-1h:.125rem;--tonic-sizes-2h:.25rem;--tonic-sizes-3h:.375rem;--tonic-sizes-4h:.5rem;--tonic-sizes-5h:.625rem;--tonic-sizes-6h:.75rem;--tonic-sizes-7h:.875rem;--tonic-sizes-8h:1rem;--tonic-sizes-9h:1.125rem;--tonic-sizes-10h:1.25rem;--tonic-sizes-1x:.25rem;--tonic-sizes-2x:.5rem;--tonic-sizes-3x:.75rem;--tonic-sizes-4x:1rem;--tonic-sizes-5x:1.25rem;--tonic-sizes-6x:1.5rem;--tonic-sizes-7x:1.75rem;--tonic-sizes-8x:2rem;--tonic-sizes-9x:2.25rem;--tonic-sizes-10x:2.5rem;--tonic-sizes-11x:2.75rem;--tonic-sizes-12x:3rem;--tonic-sizes-13x:3.25rem;--tonic-sizes-14x:3.5rem;--tonic-sizes-15x:3.75rem;--tonic-sizes-16x:4rem;--tonic-sizes-17x:4.25rem;--tonic-sizes-18x:4.5rem;--tonic-sizes-19x:4.75rem;--tonic-sizes-20x:5rem;--tonic-sizes-24x:6rem;--tonic-sizes-32x:8rem;--tonic-sizes-40x:10rem;--tonic-sizes-48x:12rem;--tonic-sizes-56x:14rem;--tonic-sizes-64x:16rem;--tonic-space-1q:.0625rem;--tonic-space-2q:.125rem;--tonic-space-3q:.1875rem;--tonic-space-4q:.25rem;--tonic-space-5q:.3125rem;--tonic-space-6q:.375rem;--tonic-space-7q:.4375rem;--tonic-space-8q:.5rem;--tonic-space-9q:.5625rem;--tonic-space-10q:.625rem;--tonic-space-1h:.125rem;--tonic-space-2h:.25rem;--tonic-space-3h:.375rem;--tonic-space-4h:.5rem;--tonic-space-5h:.625rem;--tonic-space-6h:.75rem;--tonic-space-7h:.875rem;--tonic-space-8h:1rem;--tonic-space-9h:1.125rem;--tonic-space-10h:1.25rem;--tonic-space-1x:.25rem;--tonic-space-2x:.5rem;--tonic-space-3x:.75rem;--tonic-space-4x:1rem;--tonic-space-5x:1.25rem;--tonic-space-6x:1.5rem;--tonic-space-7x:1.75rem;--tonic-space-8x:2rem;--tonic-space-9x:2.25rem;--tonic-space-10x:2.5rem;--tonic-space-11x:2.75rem;--tonic-space-12x:3rem;--tonic-space-13x:3.25rem;--tonic-space-14x:3.5rem;--tonic-space-15x:3.75rem;--tonic-space-16x:4rem;--tonic-space-17x:4.25rem;--tonic-space-18x:4.5rem;--tonic-space-19x:4.75rem;--tonic-space-20x:5rem;--tonic-space-24x:6rem;--tonic-space-32x:8rem;--tonic-space-40x:10rem;--tonic-space-48x:12rem;--tonic-space-56x:14rem;--tonic-space-64x:16rem;--tonic-zIndices-hide:-1;--tonic-zIndices-auto:auto;--tonic-zIndices-base:0;--tonic-zIndices-dropdown:1000;--tonic-zIndices-sticky:1100;--tonic-zIndices-fixed:1200;--tonic-zIndices-overlay:1300;--tonic-zIndices-drawer:1400;--tonic-zIndices-modal:1500;--tonic-zIndices-popover:1600;--tonic-zIndices-toast:1700;--tonic-zIndices-tooltip:1800;}
+</style>
+`;

packages/react/src/theme/__tests__/createTheme.test.js

@@ -1,3 +1,5 @@
+import { Box } from '@tonic-ui/react/src';
+import { render } from '@tonic-ui/react/test-utils/render';
 import createTheme from '../createTheme';
 
 describe('createTheme', () => {
@@ -77,4 +79,24 @@ describe('createTheme', () => {
       expect(isValid).toBe(true);
     });
   });
+
+  it('should apply custom `rootSelector` for CSS variables', () => {
+    const customRootSelector = ':root[data-color-scheme]';
+    const themeOptions = {
+      cssVariables: {
+        rootSelector: customRootSelector,
+      },
+    };
+
+    const theme = createTheme(themeOptions);
+    expect(theme.rootSelector).toBe(customRootSelector);
+
+    const TestComponent = (props) => (
+      <Box backgroundColor="gray:50" {...props} />
+    );
+    render(<TestComponent />, { theme: themeOptions });
+
+    const styleElement = document.querySelector('style[data-emotion="css-global"]');
+    expect(styleElement).toMatchSnapshot();
+  });
 });

packages/react/test-utils/render.js

@@ -15,14 +15,22 @@ import {
 expect.extend(matchers);
 
 const customRender = (ui, options) => {
+  const {
+    theme: themeOptions = {
+      cssVariables: {
+        prefix: 'tonic',
+        rootSelector: ':root',
+      },
+    },
+    ...rest
+  } = { ...options };
+
   const wrapper = ({ children }) => (
     <TonicProvider
       colorMode={{
         defaultValue: 'dark',
       }}
-      theme={createTheme({
-        cssVariables: true,
-      })}
+      theme={createTheme(themeOptions)}
     >
       <PortalManager>
         <ToastManager>
@@ -32,7 +40,7 @@ const customRender = (ui, options) => {
     </TonicProvider>
   );
 
-  return render(ui, { wrapper, ...options });
+  return render(ui, { wrapper, ...rest });
 };
 
 // re-export everything