Merge pull request #20 from tailscale/storybook-theming

Tailscale theming for Storybook

Author: ptruby

.storybook/manager.ts

@@ -0,0 +1,25 @@
+import { addons } from 'storybook/manager-api';
+import { create } from "storybook/theming"
+import './storybook.css';
+
+addons.setConfig({
+  theme: create({
+  base: "light",
+  fontBase: "'Inter', sans-serif",
+
+  brandTitle: "Tailscale Design System",
+  brandUrl: "https://tailscale.com",
+  brandImage: "/images/tailscale-logo.svg",
+  brandTarget: "_self",
+
+  colorPrimary: "#4b70cc",
+  colorSecondary: "#4b70cc",
+
+  // UI
+  appBg: "#ffffff",
+
+  // Text colors
+  textColor: "#232222",
+  textInverseColor: "#ffffff",
+}),
+})

.storybook/preview.ts renamed to .storybook/preview.tsx

@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react";
+import { create } from "storybook/theming";
 import '../src/tailwind.css';
+import './storybook.css';
 
 const preview: Preview = {
   parameters: {
@@ -9,6 +11,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: create({
+        base: "light",
+        fontBase: "'Inter', sans-serif",
+      }),
+    },
   },
   tags: ['autodocs'],
 };

.storybook/storybook.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  src: url("../src/assets/fonts/Inter.var.latin.woff2") format("woff2-variations");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+  src: url("../src/assets/fonts/Inter.var.italic.latin.woff2") format("woff2-variations");
+}