Merge pull request #7154 from Expensify/Rory-StorybookFacelift

(cherry picked from commit ea70c2e)

.storybook/main.js

@@ -7,4 +7,7 @@ module.exports = {
         '@storybook/addon-essentials',
         '@storybook/addon-a11y',
     ],
+    staticDirs: [
+        './public',
+    ],
 };

.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<link rel="icon" type="image/png" href="logo.png" />
+<link rel="stylesheet" type="text/css" href="index.css" />

.storybook/manager.js

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

.storybook/public/index.css

@@ -0,0 +1,20 @@
+.search-field *, .sidebar-item, .search-result-item--label {
+    color: #fff !important;
+}
+
+.sidebar-subheading *, .search-result-item {
+    color: #fff;
+}
+
+a.sidebar-item > svg {
+    color: #03d47c;
+}
+
+.search-result-item--label span {
+    color: #ffffffaa !important;
+}
+
+#panel-tab-content :is(input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type) {
+    background: #ff7101;
+    color: #fff;
+}

.storybook/theme.js

@@ -0,0 +1,15 @@
+import {create} from '@storybook/theming';
+import colors from '../src/styles/colors';
+
+export default create({
+    appBg: colors.dark,
+    barSelectedColor: colors.blue,
+    base: 'light',
+    brandTitle: 'Expensify UI Docs',
+    brandImage: 'logomark.svg',
+    colorPrimary: colors.dark,
+    colorSecondary: colors.orange,
+    fontBase: 'GTAmericaExp-Regular',
+    fontCode: 'monospace',
+    textInverseColor: colors.black,
+});