Add theme selector

apps/storybook/.storybook/main.ts

@@ -13,9 +13,10 @@ const config: StorybookConfig = {
         actions: false,
       },
     },
+    "@storybook/addon-a11y",
     "@storybook/addon-actions",
+    "@storybook/addon-toolbars",
     "storybook-addon-designs",
-    "@storybook/addon-a11y",
     "storybook-addon-rtl",
   ],
   staticDirs: ["../public"],

apps/storybook/.storybook/preview.tsx

@@ -1,7 +1,33 @@
 import React from "react";
+import { Preview } from "@storybook/react";
+import ThemeProvider from "../../../packages/syntax-core/src/ThemeProvider/ThemeProvider";
 import "@cambly/syntax-design-tokens/dist/css/variables.css";
-import { initializeRTL } from "storybook-addon-rtl";
 
-initializeRTL();
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: "Global theme for components",
+      defaultValue: "classic",
+      toolbar: {
+        title: "Theme",
+        icon: "circlehollow",
+        items: ["classic", "cambio"],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme;
+      return (
+        <ThemeProvider themeName={theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;
 
 export const decorators = [(Story) => <Story />];

apps/storybook/package.json

@@ -27,6 +27,7 @@
     "@storybook/addon-docs": "7.0.7",
     "@storybook/addon-essentials": "7.0.7",
     "@storybook/addon-links": "7.0.7",
+    "@storybook/addon-toolbars": "^7.6.17",
     "@storybook/addons": "7.0.7",
     "@storybook/react": "7.0.7",
     "@storybook/react-vite": "7.0.7",
@@ -36,6 +37,7 @@
     "serve": "14.2.0",
     "storybook": "7.0.7",
     "storybook-addon-designs": "7.0.0-beta.2",
+    "storybook-addon-rtl": "^1.0.0",
     "storybook-dark-mode": "3.0.0",
     "typescript": "5.0.4",
     "vite": "4.3.4"

package.json

@@ -26,7 +26,6 @@
     "glob": "10.3.10",
     "jsdom": "22.0.0",
     "prettier": "2.8.8",
-    "storybook-addon-rtl": "^0.5.0",
     "stylelint": "15.6.0",
     "stylelint-config-css-modules": "4.2.0",
     "stylelint-config-standard": "33.0.0",

packages/syntax-core/src/Button/Button.module.css

@@ -72,6 +72,24 @@
   border-radius: 16px;
 }
 
+.smCambio {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 100px;
+}
+
+.mdCambio {
+  height: 48px;
+  padding: 0 24px;
+  border-radius: 100px;
+}
+
+.lgCambio {
+  height: 64px;
+  padding: 0 32px;
+  border-radius: 100px;
+}
+
 .icon {
   color: inherit;
 }

packages/syntax-core/src/Button/Button.tsx

@@ -123,8 +123,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const isHydrated = useIsHydrated();
     const { themeName } = useTheme();
 
-    console.log({ themeName });
-
     return (
       <button
         data-testid={dataTestId}
@@ -138,7 +136,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           styles.button,
           foregroundColor(color),
           backgroundColor(color),
-          styles[size],
+          themeName === "classic" ? styles[size] : styles[`${size}Cambio`],
           {
             [styles.fullWidth]: fullWidth,
             [styles.buttonGap]: size === "lg" || size === "md",

packages/syntax-core/src/index.tsx

@@ -19,6 +19,7 @@ import SelectList from "./SelectList/SelectList";
 import TapArea from "./TapArea/TapArea";
 import TextArea from "./TextArea/TextArea";
 import TextField from "./TextField/TextField";
+import ThemeProvider from "./ThemeProvider/ThemeProvider";
 import Tooltip from "./Tooltip/Tooltip";
 import Typography from "./Typography/Typography";
 
@@ -44,6 +45,7 @@ export {
   TapArea,
   TextArea,
   TextField,
+  ThemeProvider,
   Tooltip,
   Typography,
 };