cleanup around storybook and styles

.storybook/main.tsx

@@ -25,7 +25,7 @@ const config: StorybookConfig = {
         ...config.resolve.alias,
         icons: path.resolve(__dirname, "/src/icons"),
         providers: path.resolve(__dirname, "/src/providers"),
-        "ui/components": path.resolve(__dirname, "/src/ui/components"),
+        "ui/compositions": path.resolve(__dirname, "/src/ui/compositions"),
         "ui/layout": path.resolve(__dirname, "/src/ui/layout"),
         "ui/primitives": path.resolve(__dirname, "/src/ui/primitives"),
       };

.storybook/manager-head.html

@@ -0,0 +1,14 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+  rel="stylesheet">
+
+
+<style>
+  #storybook-root {
+    width: 100%;
+    display: grid;
+    place-items: center;
+  }
+</style>

.storybook/manager.tsx

@@ -0,0 +1,8 @@
+import { addons } from "@storybook/manager-api";
+import "../src/index.css";
+import "../src/theme.css";
+import theme from "./theme";
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/preview-head.html

@@ -10,8 +10,4 @@
     display: grid;
     place-items: center;
   }
-</style>
-
-<script>
-  // document.documentElement.classList.add("sds-theme-purple")
-</script>
+</style>

.storybook/preview.tsx

@@ -1,14 +1,12 @@
 import type { Preview } from "@storybook/react";
-import "../src/theme.css";
 import "../src/index.css";
+import "../src/theme.css";
+import theme from "./theme";
 
 const preview: Preview = {
   parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
+    docs: {
+      theme: theme,
     },
   },
 };

.storybook/theme.tsx

@@ -0,0 +1,39 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  // Typography
+  fontBase: '"Inter", sans-serif',
+  fontCode: '"Roboto Mono", monospace',
+
+  brandTitle: "Fima SDS",
+  brandUrl: "https://figma.com",
+  brandTarget: "_self",
+
+  //
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#f5f5f5",
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: "#1e1e1e",
+  textInverseColor: "#ffffff",
+
+  // Toolbar default and active colors
+  barTextColor: "#9E9E9E",
+  barSelectedColor: "#585C6D",
+  barHoverColor: "#585C6D",
+  barBg: "#ffffff",
+
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#f5f5f5",
+  inputTextColor: "#1e1e1e",
+  inputBorderRadius: 2,
+});

figma.config.json

@@ -5,7 +5,7 @@
     "react": {
       "importPaths": {
         "*": "ui",
-        "src/ui/components/**/*": "ui/components",
+        "src/ui/compositions/**/*": "ui/compositions",
         "src/ui/layout/**/*": "ui/layout",
         "src/ui/primitives/**/*": "ui/primitives",
         "src/icons/*": "icons"