+
+
Border Radius
+ updateGlobal("borderRadius", e.target.value)}
+ >
+
+
+
+
+
+
+
+
Accent Color
+ updateGlobal("accentColor", value)}
+ />
+
+
+
+
Font Family
+ updateGlobal("fontFamily", e.target.value)}
+ >
+
+ {Object.keys(fontMetricsMap)
+ .filter((item) => {
+ return (
+ [
+ "-apple-system",
+ "BlinkMacSystemFont",
+ "Segoe UI",
+ ].includes(item) === false
+ );
+ })
+ .map((font) => (
+
+ ))}
+
+
+
+ }
+ >
+
+
+
+
+ );
+ },
+ });
+});
diff --git a/app/client/packages/storybook/.storybook/appsmith-theme.js b/app/client/packages/storybook/.storybook/appsmith-theme.js
new file mode 100644
index 0000000000..943f4f5312
--- /dev/null
+++ b/app/client/packages/storybook/.storybook/appsmith-theme.js
@@ -0,0 +1,25 @@
+import { create } from "@storybook/theming";
+
+export default create({
+ // UI
+ appBg: "#FFFFFF",
+ appContentBg: "#FFFFFF",
+ appBorderColor: "#E3E8EF",
+ appBorderRadius: 0,
+
+ // Toolbar default and active colors
+ barSelectedColor: "#191919",
+
+ // Form colors
+ inputBg: "#FFFFFF",
+ inputBorder: "#E3E8EF",
+ inputTextColor: "#364252",
+ inputBorderRadius: 0,
+
+ base: "light",
+ brandTitle: "Appsmith Design System",
+ brandUrl: "https://www.appsmith.com/",
+ brandImage:
+ "https://global-uploads.webflow.com/61531b23c347e4fbd4a84209/61531b23c347e41e24a8423e_Logo.svg",
+ brandTarget: "_blank",
+});
diff --git a/app/client/packages/storybook/.storybook/decorators/resizor.js b/app/client/packages/storybook/.storybook/decorators/resizor.js
new file mode 100644
index 0000000000..259bb68431
--- /dev/null
+++ b/app/client/packages/storybook/.storybook/decorators/resizor.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { Resizable } from "re-resizable";
+
+export const resizor = (Story, args) => {
+ const { parameters } = args;
+
+ return (
+