From d3f37e40dd3b50a406320812e47324e259911c18 Mon Sep 17 00:00:00 2001
From: Paul Rubritz <paulr@tailscale.com>
Date: Thu, 23 Oct 2025 16:26:29 -0400
Subject: [PATCH] Tailscale theming for Storybook

Signed-off-by: Paul Rubritz <paulr@tailscale.com>
---
 .storybook/manager.ts                  | 25 +++++++++++++++++++++++++
 .storybook/{preview.ts => preview.tsx} |  9 ++++++++-
 .storybook/storybook.css               | 15 +++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 .storybook/manager.ts
 rename .storybook/{preview.ts => preview.tsx} (58%)
 create mode 100644 .storybook/storybook.css

diff --git a/.storybook/manager.ts b/.storybook/manager.ts
new file mode 100644
index 0000000..8fd9134
--- /dev/null
+++ b/.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",
+}),
+})
\ No newline at end of file
diff --git a/.storybook/preview.ts b/.storybook/preview.tsx
similarity index 58%
rename from .storybook/preview.ts
rename to .storybook/preview.tsx
index 3c579c1..9e5e4be 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react";
-import '../src/tailwind.css';
+import { create } from "storybook/theming";
+import './storybook.css';
 
 const preview: Preview = {
   parameters: {
@@ -9,6 +10,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: create({
+        base: "light",
+        fontBase: "'Inter', sans-serif",
+      }),
+    },
   },
   tags: ['autodocs'],
 };
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
new file mode 100644
index 0000000..cfc20f5
--- /dev/null
+++ b/.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");
+}
\ No newline at end of file