🔧 Fix @penpot/ui Storybook: load DS tokens, fonts, and SVG icon sprite

frontend/packages/ui/.storybook/main.ts

@@ -5,7 +5,8 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
-  addons: [],
+  addons: [getAbsolutePath('@storybook/addon-themes')],
+  staticDirs: ['../../../resources/public'],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {

frontend/packages/ui/.storybook/preview.ts

@@ -0,0 +1,49 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+import { withThemeByClassName } from "@storybook/addon-themes";
+
+// Design-system CSS: defines --color-*, --sp-*, fonts, resets, etc.
+import "../../../resources/public/css/ds.css";
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: "light",
+      dark: "default",
+    },
+    defaultTheme: "dark",
+    parentSelector: "body",
+  }),
+];
+
+/** @type { import('@storybook/react-vite').Preview } */
+const preview = {
+  decorators,
+
+  parameters: {
+    controls: {
+      disableSaveFromUI: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      options: {
+        theme: { name: "theme", value: "var(--color-background-secondary)" },
+      },
+    },
+  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: "theme",
+    },
+  },
+};
+
+export default preview;

frontend/packages/ui/package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
+    "@storybook/addon-themes": "10.3.5",
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
     "@testing-library/dom": "10.4.1",