ECHOES-490 Support nested theme providers (#220)

design-tokens/build.js

@@ -140,8 +140,14 @@ function buildThemedTokens(themedTokenGroups, baseDesignTokenGroup) {
               options: {
                 fileHeader: 'licence-header',
                 selector:
+                  /*
+                   * For any theme that is not the default theme, the `html`
+                   * attribute increases the specificity so that it can override
+                   * the default theme. Otherwise, the order in which the CSS
+                   * selectors appear in the CSS file would matter.
+                   */
                   theme.name === DEFAULT_THEME
-                    ? ':root'
+                    ? `:root, [${THEME_DATA_ATTRIBUTE}='${theme.name}']`
                     : `html[${THEME_DATA_ATTRIBUTE}='${theme.name}'], [${THEME_DATA_ATTRIBUTE}='${theme.name}']`,
               },
             },

src/generated/design-tokens-light.css

@@ -20,7 +20,7 @@
  * GENERATED FILE: do not edit directly.
  */
 
-:root {
+:root, [data-echoes-theme='light'] {
   --echoes-color-background-neutral: rgb(239,242,249); /* Use it in components with neutral sentiment */
   --echoes-color-background-neutral-bolder: rgb(225,230,243); /* Use it in components with neutral sentiment that need a bolder highlight */
   --echoes-color-background-default: rgb(255,255,255); /* Go to color for backgrounds.. eg: cards, modals, popovers, etc... */

stories/ThemeProvider-stories.tsx

@@ -0,0 +1,91 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import { Text, Theme, ThemeProvider } from '../src';
+import { basicWrapperDecorator } from './helpers/BasicWrapper';
+
+function Background({ children, style }: ComponentProps<'div'>) {
+  return (
+    <div style={{ backgroundColor: 'var(--echoes-color-background-neutral)', ...style }}>
+      {children}
+    </div>
+  );
+}
+
+const meta: Meta<typeof ThemeProvider> = {
+  component: ThemeProvider,
+  title: 'Echoes/ThemeProvider',
+  argTypes: {
+    asChild: { control: { type: 'boolean' } },
+    theme: { control: { type: 'select' }, options: Object.values(Theme) },
+  },
+  args: {
+    asChild: false,
+    theme: Theme.light,
+  },
+  decorators: [basicWrapperDecorator],
+  render: ({ children, ...args }) => (
+    <ThemeProvider {...args}>
+      <Background style={{ padding: 24 }}>
+        <Text>{children}</Text>
+      </Background>
+    </ThemeProvider>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ThemeProvider>;
+
+export const Default: Story = {
+  args: {
+    children: 'My Theme',
+  },
+};
+
+export const WithDarkTheme: Story = {
+  args: {
+    children: 'Dark Theme',
+    theme: Theme.dark,
+  },
+};
+
+export const WithNestedTheme: Story = {
+  args: {
+    children: 'Dark Theme',
+    theme: Theme.dark,
+  },
+  render: ({ children, ...args }) => (
+    <ThemeProvider {...args}>
+      <Background style={{ padding: 24 }}>
+        <div style={{ marginBottom: 24 }}>
+          <Text>{children}</Text>
+        </div>
+        <ThemeProvider theme={Theme.light}>
+          <Background style={{ padding: 24 }}>
+            <Text>Light Theme</Text>
+          </Background>
+        </ThemeProvider>
+      </Background>
+    </ThemeProvider>
+  ),
+};