Storybook: add hardcoded color variables, fix missing import

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import '../app/styles/tailwind.css';
+import '../stories/theme.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

stories/Header.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button } from './Button';
+import Button from '../app/soapbox/components/ui/button/button';
+
 import './header.css';
 
 type User = {
@@ -42,12 +43,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
             <span className='welcome'>
               Welcome, <b>{user.name}</b>!
             </span>
-            <Button size='small' onClick={onLogout} label='Log out' />
+            <Button size='sm' onClick={onLogout} text='Log out' />
           </>
         ) : (
           <>
-            <Button size='small' onClick={onLogin} label='Log in' />
-            <Button primary size='small' onClick={onCreateAccount} label='Sign up' />
+            <Button size='sm' onClick={onLogin} text='Log in' />
+            <Button theme='primary' size='sm' onClick={onCreateAccount} text='Sign up' />
           </>
         )}
       </div>

stories/theme.css

@@ -0,0 +1,68 @@
+/* Soapbox default colors for Tailwind.
+   TODO: generate this file by reading a mock soapbox.json. */
+:root {
+  --color-primary-50: 242 249 253;
+  --color-primary-100: 230 243 251;
+  --color-primary-200: 192 224 245;
+  --color-primary-300: 79 168 228;
+  --color-primary-400: 54 155 224;
+  --color-primary-500: 4 130 216;
+  --color-primary-600: 4 117 194;
+  --color-primary-700: 3 98 162;
+  --color-primary-800: 1 39 65;
+  --color-primary-900: 1 25 41;
+  --color-success-50: 240 253 244;
+  --color-success-100: 220 252 231;
+  --color-success-200: 187 247 208;
+  --color-success-300: 134 239 172;
+  --color-success-400: 74 222 128;
+  --color-success-500: 34 197 94;
+  --color-success-600: 22 163 74;
+  --color-success-700: 21 128 61;
+  --color-success-800: 22 101 52;
+  --color-success-900: 20 83 45;
+  --color-danger-50: 254 242 242;
+  --color-danger-100: 254 226 226;
+  --color-danger-200: 254 202 202;
+  --color-danger-300: 252 165 165;
+  --color-danger-400: 248 113 113;
+  --color-danger-500: 239 68 68;
+  --color-danger-600: 220 38 38;
+  --color-danger-700: 185 28 28;
+  --color-danger-800: 153 27 27;
+  --color-danger-900: 127 29 29;
+  --color-gray-50: 248 250 250;
+  --color-gray-100: 241 244 246;
+  --color-gray-200: 221 228 232;
+  --color-gray-300: 158 178 191;
+  --color-gray-400: 145 167 181;
+  --color-gray-500: 117 145 163;
+  --color-gray-600: 105 131 147;
+  --color-gray-700: 88 109 122;
+  --color-gray-800: 35 44 49;
+  --color-gray-900: 22 28 31;
+  --color-gradient-start: 4 130 216;
+  --color-accent-50: 243 251 253;
+  --color-accent-100: 231 247 250;
+  --color-accent-200: 195 236 244;
+  --color-accent-300: 88 202 223;
+  --color-accent-400: 64 194 218;
+  --color-accent-500: 16 179 209;
+  --color-accent-600: 14 161 188;
+  --color-accent-700: 12 134 157;
+  --color-accent-800: 5 54 63;
+  --color-accent-900: 3 34 40;
+  --color-greentext: 120 153 34;
+  --color-secondary-50: 243 251 253;
+  --color-secondary-100: 231 247 250;
+  --color-secondary-200: 195 236 244;
+  --color-secondary-300: 88 202 223;
+  --color-secondary-400: 64 194 218;
+  --color-secondary-500: 16 179 209;
+  --color-secondary-600: 14 161 188;
+  --color-secondary-700: 12 134 157;
+  --color-secondary-800: 5 54 63;
+  --color-secondary-900: 3 34 40;
+  --color-accent-blue: 4 117 194;
+  --color-gradient-end: 16 179 209;
+}