✨ Make storybook wrapper to render both dark and light themes

frontend/.storybook/preview.js

@@ -1,5 +1,3 @@
-import "../resources/public/css/main.css";
-
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -10,6 +8,19 @@ const preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: "dark",
+      values: [
+        {
+          name: "dark",
+          value: "#18181a",
+        },
+        {
+          name: "light",
+          value: "#fff",
+        },
+      ],
+    },
   },
 };
 

frontend/src/app/main/ui/ds.cljs

@@ -6,15 +6,10 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.buttons.simple-button :as sb]
+   [app.main.ui.ds.buttons.simple-button :refer [simple-button]]
-   [rumext.v2 :as mf]))
+   [app.main.ui.ds.storybook :as sb]))
-
-(mf/defc story-wrapper
-  {::mf/wrap-props false}
-  [{:keys [children]}]
-  [:.default children])
 
 (def default
   "A export used for storybook"
-  #js {:SimpleButton sb/simple-button
+  #js {:SimpleButton simple-button
-       :StoryWrapper story-wrapper})
+       :StoryWrapper sb/story-wrapper})

frontend/src/app/main/ui/ds/buttons/simple_button.mdx

@@ -10,7 +10,3 @@ This is an example of **markdown** docs within storybook, for the component `<Si
 Here's how we can render a simple button:
 
 <Canvas of={SimpleButtonStories.Default} />
-
-Simple buttons can also have **icons**:
-
-<Canvas of={SimpleButtonStories.WithIcon} />

frontend/src/app/main/ui/ds/buttons/simple_button.scss

@@ -1,13 +1,7 @@
+@use "../colors.scss" as *;
+
 .button {
-  font-family: monospace;
+  appearance: none;
-
+  border: 0;
-  display: flex;
+  background: var(--color-accent-primary);
-  align-items: center;
-  column-gap: 0.5rem;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    stroke: #000;
-  }
 }

frontend/src/app/main/ui/ds/colors.scss

@@ -0,0 +1,23 @@
+// 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
+
+// Accent colors
+$mint-150: #7efff5;
+$purple-700: #6911d4;
+
+// Background colors
+$white: #fff;
+$gray-950: #18181a;
+
+:global(.light) {
+  --color-accent-primary: #{$mint-150};
+  --color-background-primary: #{$white};
+}
+
+:global(.default) {
+  --color-accent-primary: #{$purple-700};
+  --color-background-primary: #{$gray-950};
+}

frontend/src/app/main/ui/ds/storybook.cljs

@@ -0,0 +1,18 @@
+
+;; 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
+
+(ns app.main.ui.ds.storybook
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [rumext.v2 :as mf]))
+
+(mf/defc story-wrapper
+  {::mf/wrap-props false}
+  [{:keys [children]}]
+  [:article {:class (stl/css :story-wrapper)}
+   [:section {:class "default"} children]
+   [:section {:class "light"} children]])

frontend/src/app/main/ui/ds/storybook.scss

@@ -0,0 +1,6 @@
+@use "./colors.scss";
+
+.story-wrapper {
+  display: grid;
+  row-gap: 1rem;
+}