feat(APP-3507): Add aragon theming to storybook

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import aragonOdsTheme from './theme';
+
+addons.setConfig({
+    theme: aragonOdsTheme,
+});

.storybook/preview.tsx

@@ -29,18 +29,10 @@ const preview: Preview = {
         backgrounds: {
             default: 'neutral-50',
             values: [
-                {
-                    name: 'neutral-0',
-                    value: 'var(--ods-color-neutral-0)',
-                },
                 {
                     name: 'neutral-50',
                     value: 'var(--ods-color-neutral-50)',
                 },
-                {
-                    name: 'neutral-800',
-                    value: 'var(--ods-color-neutral-800)',
-                },
             ],
         },
     },

.storybook/theme.ts

@@ -0,0 +1,24 @@
+import { create } from '@storybook/theming';
+
+export default create({
+    base: 'light',
+    brandTitle: 'Aragon ODS',
+    brandUrl: 'https://aragon.org',
+    brandImage: 'https://i.postimg.cc/RVVSGThD/logo.png',
+    brandTarget: '_blank',
+    colorPrimary: '#003bf5',
+    colorSecondary: '#3164fa',
+    appBg: '#e4e7eb',
+    appContentBg: '#ffffff',
+    appBorderColor: '#cbd2d9',
+    appBorderRadius: 4,
+    textColor: '#323f4b',
+    textInverseColor: '#ffffff',
+    barTextColor: '#323f4b',
+    barSelectedColor: '#003bf5',
+    barBg: '#e4e7eb',
+    inputBg: '#ffffff',
+    inputBorder: '#cbd2d9',
+    inputTextColor: '#323f4b',
+    inputBorderRadius: 4,
+});

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   Add Aragon logo, remove dark background options and create custom theme using Aragon branding for ODS storybook
+
 ### Changed
 
 -   Update `@typescript-eslint` packages to v8