docs: update storybook theme (#1989)

- add colors to match zeroheight documentation styles

.eslintrc

@@ -25,6 +25,7 @@
           "**/*.config.{js,ts,mjs}",
           "**/*.setup.{js,ts}",
           ".storybook/**",
+          ".storybook/*.{ts,js}",
           "scripts/stylelint/**",
           "plopfile.js"
         ]

.storybook/Theme.ts

@@ -0,0 +1,43 @@
+import { create } from '@storybook/theming/create';
+
+// Docs: https://storybook.js.org/docs/7.6/configure/theming
+// Keys from https://github.com/storybookjs/storybook/blob/next/code/lib/theming/src/themes/light.ts
+export default create({
+  base: 'light',
+  brandTitle: 'Education Design System',
+  brandUrl: 'https://github.com/chanzuckerberg/edu-design-system',
+  // brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+  brandTarget: '_blank',
+
+  // UI Fonts
+  fontBase: '"Graphik", sans-serif',
+  fontCode: '"Consolas", monospace',
+
+  // Primary scale colors
+  // colorPrimary: '#254EAC', // TODO not sure where this applies : eds-color-blue-650
+  colorSecondary: '#6C6967', // Selection and other colors : color-neutral-550
+
+  // App Chrome
+  appBg: '#FDF9F8', // Sidebar : color-neutral-025
+  appContentBg: '#FFFFFF', // Main documentation container : eds-color-white
+  appPreviewBg: '#FFFFFF', // Story Preview container : eds-color-white
+  appBorderColor: '#EEE7E4', // neutral-100
+  appBorderRadius: 4, // border-radius-md
+
+  // Text Colors
+  textColor: '#212121', // NOTE: zeroheight's default color
+  textInverseColor: '#FFFFFF', // text-utility-inverse
+
+  // Toolbar default and active colors
+  barTextColor: '#FFFFFF', // eds-color-white
+  barSelectedColor: '#FFFFFF', // eds-color-white
+  barBg: '#0F2163', // Content panel bar : color-blue-850
+
+  // Form Colors
+  buttonBg: '#FFFFFF', // eds-color-white
+  buttonBorder: '#0F2163', // color-background-utility-interactive-high-emphasis
+  inputBg: '#FFFFFF',
+  inputBorder: '#6C6967', // color-border-utility-default-medium-emphasis
+  inputTextColor: '#0F2163', // color-text-utility-default-primary
+  inputBorderRadius: 2, // border-radius-sm
+});

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -11,9 +11,10 @@ import '../src/design-tokens/tier-1-definitions/fonts.css';
 // Import storybook-specific CSS
 import './css/styleguide-only.css';
 
-import type { Story } from '@storybook/react';
+import type { Preview, Story } from '@storybook/react';
 import React from 'react';
 
+import Theme from './Theme';
 import { storybookViewports } from '../src/util/viewports';
 
 export const decorators = [
@@ -58,10 +59,13 @@ function createCurrentReleaseConfig(usingLabel: string) {
   };
 }
 
-export const parameters = {
+export const parameters: Preview['parameters'] = {
   viewport: {
     viewports: storybookViewports,
   },
+  docs: {
+    theme: Theme,
+  },
   backgrounds: {
     values: [
       // TODO: remove the following three when the last 1.0 components have been migrated

package.json

@@ -133,11 +133,13 @@
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
     "@storybook/addon-styling": "^1.3.7",
+    "@storybook/manager-api": "^7.6.19",
     "@storybook/react": "^7.6.19",
     "@storybook/react-webpack5": "^7.6.19",
     "@storybook/test": "^7.6.19",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^7.6.19",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",

yarn.lock

@@ -2887,11 +2887,13 @@ __metadata:
     "@storybook/addon-interactions": "npm:^7.6.19"
     "@storybook/addon-links": "npm:^7.6.19"
     "@storybook/addon-styling": "npm:^1.3.7"
+    "@storybook/manager-api": "npm:^7.6.19"
     "@storybook/react": "npm:^7.6.19"
     "@storybook/react-webpack5": "npm:^7.6.19"
     "@storybook/test": "npm:^7.6.19"
     "@storybook/testing-library": "npm:^0.2.2"
     "@storybook/testing-react": "npm:^2.0.1"
+    "@storybook/theming": "npm:^7.6.19"
     "@testing-library/jest-dom": "npm:^6.4.5"
     "@testing-library/react": "npm:^14.3.1"
     "@testing-library/user-event": "npm:^14.5.2"
@@ -5877,7 +5879,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:7.6.19":
+"@storybook/manager-api@npm:7.6.19, @storybook/manager-api@npm:^7.6.19":
   version: 7.6.19
   resolution: "@storybook/manager-api@npm:7.6.19"
   dependencies:
@@ -6207,7 +6209,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:7.6.19":
+"@storybook/theming@npm:7.6.19, @storybook/theming@npm:^7.6.19":
   version: 7.6.19
   resolution: "@storybook/theming@npm:7.6.19"
   dependencies: