storybookjs · ndelangen · Feb 2, 2023 · Jan 31, 2023 · Jan 31, 2023 · Feb 1, 2023
diff --git a/code/frameworks/nextjs/template/cli/js/Introduction.mdx b/code/frameworks/nextjs/template/cli/js/Introduction.mdx
@@ -16,7 +16,7 @@ import StackAlt from './assets/stackalt.svg';
   {`
     .subheading {
       --mediumdark: '#999999';
-      font-weight: 900;
+      font-weight: 700;
       font-size: 13px;
       color: #999;
       letter-spacing: 6px;

diff --git a/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx b/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx
@@ -16,7 +16,7 @@ import StackAlt from './assets/stackalt.svg';
   {`
     .subheading {
       --mediumdark: '#999999';
-      font-weight: 900;
+      font-weight: 700;
       font-size: 13px;
       color: #999;
       letter-spacing: 6px;

diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
@@ -7,15 +7,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <% if (favicon.endsWith('.svg')) {%>
-      <link rel="icon" type="image/svg+xml" href="./<%= favicon %>">
+    <link rel="icon" type="image/svg+xml" href="./<%= favicon %>" />
     <% } else if (favicon.endsWith('.ico')) { %>
-      <link rel="icon" type="image/x-icon" href="./<%= favicon %>">
+    <link rel="icon" type="image/x-icon" href="./<%= favicon %>" />
     <% } %>
 
+    <link rel="preload" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+
     <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
 
     <style>
-      #storybook-root[hidden]{
+      #storybook-root[hidden] {
         display: none !important;
       }
     </style>
@@ -42,9 +46,9 @@
 
       <% files.js.forEach(file => { %>
       import '<%= file %>';
-      <% }); %>     
-    </script>    
+      <% }); %>
+    </script>
 
-    <link href="./sb-preview/runtime.mjs" rel="preload" as="script">
+    <link href="./sb-preview/runtime.mjs" rel="preload" as="script" />
   </body>
 </html>
diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html
@@ -1,31 +1,41 @@
 <!DOCTYPE html>
 <!--suppress HtmlUnknownTarget -->
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Storybook</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script>
-      window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
-      window.LOGLEVEL = '[LOGLEVEL HERE]';
-      window.FRAMEWORK_OPTIONS = '[FRAMEWORK_OPTIONS HERE]';
-      window.CHANNEL_OPTIONS = '[CHANNEL_OPTIONS HERE]';
-      window.FEATURES = '[FEATURES HERE]';
-      window.STORIES = '[STORIES HERE]';
-      window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
-      window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
-
-      // We do this so that "module && module.hot" etc. in Storybook source code
-      // doesn't fail (it will simply be disabled)
-      window.module = undefined;
-      </script>
-    <!-- [HEAD HTML SNIPPET HERE] -->
-  </head>
-  <body>
-    <!-- [BODY HTML SNIPPET HERE] -->
-    <div id="storybook-root"></div>
-    <div id="storybook-docs"></div>
-    <script type="module" src="./sb-preview/runtime.mjs"></script>
-    <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Storybook</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="preload" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
+  <link rel="preload" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin />
+  <link rel="preload" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
+  <link rel="preload" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin />
+  <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+
+  <script>
+    window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
+    window.LOGLEVEL = '[LOGLEVEL HERE]';
+    window.FRAMEWORK_OPTIONS = '[FRAMEWORK_OPTIONS HERE]';
+    window.CHANNEL_OPTIONS = '[CHANNEL_OPTIONS HERE]';
+    window.FEATURES = '[FEATURES HERE]';
+    window.STORIES = '[STORIES HERE]';
+    window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
+    window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
+
+    // We do this so that "module && module.hot" etc. in Storybook source code
+    // doesn't fail (it will simply be disabled)
+    window.module = undefined;
+  </script>
+  <!-- [HEAD HTML SNIPPET HERE] -->
+</head>
+
+<body>
+  <!-- [BODY HTML SNIPPET HERE] -->
+  <div id="storybook-root"></div>
+  <div id="storybook-docs"></div>
+  <script type="module" src="./sb-preview/runtime.mjs"></script>
+  <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
+</body>
+
+</html>
diff --git a/code/lib/builder-webpack5/templates/preview.ejs b/code/lib/builder-webpack5/templates/preview.ejs
@@ -10,6 +10,12 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="preload" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
     htmlWebpackPlugin.files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet" />

diff --git a/code/lib/cli/rendererAssets/common/Introduction.mdx b/code/lib/cli/rendererAssets/common/Introduction.mdx
@@ -14,7 +14,7 @@ import StackAlt from './assets/stackalt.svg';
   {`
     .subheading {
       --mediumdark: '#999999';
-      font-weight: 900;
+      font-weight: 700;
       font-size: 13px;
       color: #999;
       letter-spacing: 6px;

diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/cli/rendererAssets/common/header.css
@@ -13,7 +13,7 @@ svg {
 }
 
 h1 {
-  font-weight: 900;
+  font-weight: 700;
   font-size: 20px;
   line-height: 1;
   margin: 6px 0 6px 10px;

diff --git a/code/lib/cli/rendererAssets/common/page.css b/code/lib/cli/rendererAssets/common/page.css
@@ -9,7 +9,7 @@ section {
 }
 
 section h2 {
-  font-weight: 900;
+  font-weight: 700;
   font-size: 32px;
   line-height: 1;
   margin: 0 0 4px;

diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
@@ -13,32 +13,41 @@ import type {
   CoreConfig,
   Options,
   StorybookConfig,
+  PresetPropertyFn,
 } from '@storybook/types';
 import { loadCsf } from '@storybook/csf-tools';
-import { join } from 'path';
+import { dirname, join } from 'path';
 import { dedent } from 'ts-dedent';
 import { parseStaticDir } from '../utils/server-statics';
 
 const defaultFavicon = require.resolve('@storybook/core-server/public/favicon.svg');
 
+export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = []) => [
+  {
+    from: join(dirname(require.resolve('@storybook/manager/package.json')), 'static'),
+    to: '/sb-manager-assets',
+  },
+  ...values,
+];
+
 export const favicon = async (
   value: string,
   options: Pick<Options, 'presets' | 'configDir' | 'staticDir'>
 ) => {
   if (value) {
     return value;
   }
-  const staticDirs = await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs');
+  const staticDirsValue = await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs');
 
-  const statics = staticDirs
-    ? staticDirs.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`))
+  const statics = staticDirsValue
+    ? staticDirsValue.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`))
     : options.staticDir;
 
   if (statics && statics.length > 0) {
     const lists = await Promise.all(
       statics.map(async (dir) => {
         const results = [];
-        const relativeDir = staticDirs
+        const relativeDir = staticDirsValue
           ? getDirectoryFromWorkingDir({
               configDir: options.configDir,
               workingDir: process.cwd(),

diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
@@ -87,7 +87,6 @@ export const typography = {
   weight: {
     regular: 400,
     bold: 700,
-    black: 900,
   },
   size: {
     s1: 12,

diff --git a/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx b/code/ui/blocks/src/components/ArgsTable/SectionRow.tsx
@@ -38,7 +38,7 @@ const Section = styled.td(({ theme }) => ({
   position: 'relative',
   letterSpacing: '0.35em',
   textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s1 - 1,
   color:
     theme.base === 'light'

diff --git a/code/ui/blocks/src/components/DocsPage.tsx b/code/ui/blocks/src/components/DocsPage.tsx
@@ -44,7 +44,7 @@ export interface DocsPageProps {
 export const Title = styled.h1(withReset, ({ theme }) => ({
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   lineHeight: '32px',
 
   [`@media (min-width: ${breakpoint}px)`]: {
@@ -197,7 +197,7 @@ export const DocsContent = styled.div(({ theme }) => {
       ...reset,
       ...headers,
       fontSize: `${theme.typography.size.l1}px`,
-      fontWeight: theme.typography.weight.black,
+      fontWeight: theme.typography.weight.bold,
     },
     [toGlobalSelector('h2')]: {
       ...reset,

diff --git a/code/ui/blocks/src/components/Title.tsx b/code/ui/blocks/src/components/Title.tsx
@@ -7,7 +7,7 @@ const breakpoint = 600;
 export const Title = styled.h1(withReset, ({ theme }: { theme: Theme }) => ({
   color: theme.color.defaultText,
   fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   lineHeight: '32px',
 
   [`@media (min-width: ${breakpoint}px)`]: {

diff --git a/code/ui/blocks/src/components/Typeset.stories.tsx b/code/ui/blocks/src/components/Typeset.stories.tsx
@@ -6,7 +6,7 @@ export default {
 };
 
 const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'];
-const fontWeight = 900;
+const fontWeight = 700;
 const fontFamily = 'monospace';
 
 export const WithFontSizes = () => <Typeset fontSizes={fontSizes} />;

diff --git a/code/ui/components/src/tooltip/TooltipMessage.tsx b/code/ui/components/src/tooltip/TooltipMessage.tsx
@@ -5,7 +5,7 @@ import { styled } from '@storybook/theming';
 import { Link } from '../typography/link/link';
 
 const Title = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
 }));
 
 const Desc = styled.span();
@@ -16,7 +16,7 @@ const Links = styled.div(({ theme }) => ({
 
   '> *': {
     margin: '0 8px',
-    fontWeight: theme.typography.weight.black,
+    fontWeight: theme.typography.weight.bold,
   },
 }));
 

diff --git a/code/ui/components/src/typography/DocumentWrapper.tsx b/code/ui/components/src/typography/DocumentWrapper.tsx
@@ -6,7 +6,7 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
 
   h1: {
     fontSize: `${theme.typography.size.l1}px`,
-    fontWeight: theme.typography.weight.black,
+    fontWeight: theme.typography.weight.bold,
   },
   h2: {
     fontSize: `${theme.typography.size.m2}px`,

diff --git a/code/ui/components/src/typography/elements/H1.tsx b/code/ui/components/src/typography/elements/H1.tsx
@@ -3,5 +3,5 @@ import { withReset, headerCommon } from '../lib/common';
 
 export const H1 = styled.h1(withReset, headerCommon, ({ theme }) => ({
   fontSize: `${theme.typography.size.l1}px`,
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
 }));
diff --git a/code/ui/components/src/typography/typography.stories.mdx b/code/ui/components/src/typography/typography.stories.mdx
@@ -41,7 +41,7 @@ font-family:
 <Typeset
   fontFamily={typography.fonts.base}
   fontSizes={fontSizes}
-  fontWeight={typography.weight.black}
+  fontWeight={typography.weight.bold}
   sampleText={sampleText}
 />
 

diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
@@ -44,6 +44,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "static/**/*",
     "README.md",
     "*.js",
     "*.d.ts"

diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx
@@ -32,7 +32,7 @@ const Wrapper = styled.div<{ isMain: boolean }>(({ isMain }) => ({
 }));
 
 const RefHead = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s2 - 1,
 
   // Similar to ListItem.tsx

diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx
@@ -137,7 +137,7 @@ export const RootNode = styled.div(({ theme }) => ({
   marginTop: 16,
   marginBottom: 4,
   fontSize: `${theme.typography.size.s1 - 1}px`,
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   lineHeight: '16px',
   minHeight: 20,
   letterSpacing: '0.35em',

diff --git a/code/ui/manager/src/settings/about.tsx b/code/ui/manager/src/settings/about.tsx
@@ -13,7 +13,7 @@ const Header = styled.header(({ theme }) => ({
   marginBottom: 20,
   fontSize: theme.typography.size.m3,
   color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   alignItems: 'center',
   display: 'flex',
 
@@ -27,7 +27,7 @@ const Header = styled.header(({ theme }) => ({
 const Subheading = styled.span(({ theme }) => ({
   letterSpacing: '0.35em',
   textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s2 - 1,
   lineHeight: '24px',
   color: theme.textMutedColor,

diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx
@@ -13,7 +13,7 @@ import SettingsFooter from './SettingsFooter';
 const Header = styled.header(({ theme }) => ({
   marginBottom: 20,
   fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.black,
+  fontWeight: theme.typography.weight.bold,
   alignItems: 'center',
   display: 'flex',
 }));

diff --git a/code/ui/manager/static/fonts.css b/code/ui/manager/static/fonts.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./nunito-sans-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./nunito-sans-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./nunito-sans-bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./nunito-sans-bold-italic.woff2') format('woff2');
+}
diff --git a/code/ui/manager/static/nunito-sans-bold-italic.woff2 b/code/ui/manager/static/nunito-sans-bold-italic.woff2
diff --git a/code/ui/manager/static/nunito-sans-bold.woff2 b/code/ui/manager/static/nunito-sans-bold.woff2
diff --git a/code/ui/manager/static/nunito-sans-italic.woff2 b/code/ui/manager/static/nunito-sans-italic.woff2
diff --git a/code/ui/manager/static/nunito-sans-regular.woff2 b/code/ui/manager/static/nunito-sans-regular.woff2