chore(design-system): use Roboto font in the storybook internals [AR-65595]

.changeset/full-carpets-roll.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/vite-plugin-design-system': patch
+---
+
+Export fonts URLs

packages/design-system/.storybook/create-font-links-html.ts

@@ -0,0 +1,12 @@
+import { fontPreconnectURLs, fontStylesheetURLs } from '@drivenets/vite-plugin-design-system';
+
+export function createFontLinksHtml() {
+	const preconnect = fontPreconnectURLs.map((href) => `<link rel="preconnect" href="${href}" crossorigin />`);
+
+	const stylesheets = fontStylesheetURLs.flatMap((href) => [
+		`<link rel="preload" as="style" href="${href}" />`,
+		`<link rel="stylesheet" href="${href}" />`,
+	]);
+
+	return [...preconnect, ...stylesheets].join('\n');
+}

packages/design-system/.storybook/main.ts

@@ -5,6 +5,9 @@ import remarkGfm from 'remark-gfm';
 // @ts-expect-error - See https://storybook.js.org/docs/faq#extensionless-imports-in-storybook-main-config
 import { reactCompilerRolldownPlugin } from '../rolldown/react-compiler-rolldown-plugin.ts';
 
+// @ts-expect-error - See https://storybook.js.org/docs/faq#extensionless-imports-in-storybook-main-config
+import { createFontLinksHtml } from './create-font-links-html.ts';
+
 const config: StorybookConfig = {
 	stories: ['../src/**/!(*.docs).mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 	addons: [
@@ -23,6 +26,7 @@ const config: StorybookConfig = {
 		'@storybook/addon-mcp',
 	],
 	framework: '@storybook/react-vite',
+	managerHead: (head = '') => `${head}\n${createFontLinksHtml()}`,
 	viteFinal: (viteConfig) => {
 		if (!Array.isArray(viteConfig.plugins)) {
 			viteConfig.plugins = [];

packages/design-system/.storybook/manager.ts

@@ -0,0 +1,4 @@
+import { addons } from 'storybook/manager-api';
+import { darkTheme } from './themes';
+
+addons.setConfig({ theme: darkTheme });

packages/design-system/.storybook/preview.ts

@@ -1,9 +1,13 @@
 import type { Preview } from '@storybook/react-vite';
 import '../src/styles/styles.scss';
+import { lightTheme } from './themes';
 
 const preview: Preview = {
 	tags: ['autodocs'],
 	parameters: {
+		docs: {
+			theme: lightTheme,
+		},
 		options: {
 			storySort: {
 				order: [

packages/design-system/.storybook/themes.ts

@@ -0,0 +1,16 @@
+import { create as createTheme, type ThemeVarsPartial } from 'storybook/theming';
+
+const fonts = {
+	fontBase: 'Roboto',
+	fontCode: 'Fira Mono',
+} satisfies Omit<ThemeVarsPartial, 'base'>;
+
+export const lightTheme = createTheme({
+	base: 'light',
+	...fonts,
+});
+
+export const darkTheme = createTheme({
+	base: 'dark',
+	...fonts,
+});

packages/vite-plugin/src/index.ts

@@ -1,22 +1,22 @@
 import type { Plugin } from 'vite';
 
+export const fontPreconnectURLs = ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'] as const;
+
+export const fontStylesheetURLs = [
+	'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap',
+	'https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
+	'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block',
+	'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block',
+] as const;
+
 export function vitePluginDesignSystem(): Plugin {
 	return {
 		name: 'vite-plugin-design-system',
 		transformIndexHtml(html) {
-			const stylesheets = [
-				'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap',
-				'https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
-				'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block',
-				'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block',
-			];
-
-			const preconnect = ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'];
-
 			return {
 				html,
 				tags: [
-					...preconnect.map((href) => ({
+					...fontPreconnectURLs.map((href) => ({
 						tag: 'link',
 						attrs: {
 							rel: 'preconnect',
@@ -26,7 +26,7 @@ export function vitePluginDesignSystem(): Plugin {
 						injectTo: 'head' as const,
 					})),
 
-					...stylesheets.flatMap((href) => [
+					...fontStylesheetURLs.flatMap((href) => [
 						{
 							tag: 'link',
 							attrs: {