diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js index aba800b5cd3da..5096007d2cc61 100644 --- a/site/.storybook/preview.js +++ b/site/.storybook/preview.js @@ -4,6 +4,7 @@ import { light, dark } from "../src/theme" import { addDecorator } from "node_modules/@storybook/react" import { createMemoryHistory } from "history" import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom" +import "../src/theme/global-fonts" addDecorator(withThemes(ThemeProvider, [light, dark])) diff --git a/site/package.json b/site/package.json index f20d3ccabb8f6..1df8072216806 100644 --- a/site/package.json +++ b/site/package.json @@ -23,10 +23,12 @@ "typegen": "xstate typegen 'src/**/*.ts'" }, "dependencies": { + "@fontsource/fira-code": "4.5.5", + "@fontsource/inter": "4.5.4", "@material-ui/core": "4.9.4", "@material-ui/icons": "4.5.1", "@material-ui/lab": "4.0.0-alpha.42", - "@xstate/react": "^2.0.1", + "@xstate/react": "2.0.1", "axios": "0.26.1", "formik": "2.2.9", "history": "5.3.0", @@ -34,7 +36,7 @@ "react-dom": "17.0.2", "react-router-dom": "6.2.2", "swr": "1.2.2", - "xstate": "^4.30.6", + "xstate": "4.30.6", "yup": "0.32.11" }, "devDependencies": { @@ -47,15 +49,17 @@ "@storybook/react": "6.4.19", "@testing-library/react": "12.1.4", "@types/express": "4.17.13", - "@types/jest": "^27.4.1", + "@types/jest": "27.4.1", "@types/node": "14.18.12", "@types/react": "17.0.40", "@types/react-dom": "17.0.13", "@types/superagent": "4.1.15", "@typescript-eslint/eslint-plugin": "5.15.0", "@typescript-eslint/parser": "5.15.0", - "@xstate/cli": "^0.1.4", + "@xstate/cli": "0.1.4", "copy-webpack-plugin": "10.2.4", + "css-loader": "6.7.1", + "css-minimizer-webpack-plugin": "3.4.1", "eslint": "8.11.0", "eslint-config-prettier": "8.5.0", "eslint-import-resolver-alias": "1.1.2", @@ -71,10 +75,12 @@ "jest": "27.5.1", "jest-junit": "13.0.0", "jest-runner-eslint": "1.0.0", - "msw": "^0.39.2", + "mini-css-extract-plugin": "2.6.0", + "msw": "0.39.2", "prettier": "2.6.0", "react-hot-loader": "4.13.0", "sql-formatter": "4.0.2", + "style-loader": "3.3.1", "ts-jest": "27.1.3", "ts-loader": "9.2.8", "ts-node": "10.7.0", diff --git a/site/src/app.tsx b/site/src/app.tsx index e375f60d5810f..e9078ef4105be 100644 --- a/site/src/app.tsx +++ b/site/src/app.tsx @@ -16,6 +16,7 @@ import { WorkspacePage } from "./pages/workspaces/[workspace]" import { HealthzPage } from "./pages/healthz" import { AuthAndNav, RequireAuth } from "./components/Page" import { XServiceProvider } from "./xServices/StateContext" +import "./theme/global-fonts" export const App: React.FC = () => { return ( diff --git a/site/src/theme/global-fonts.ts b/site/src/theme/global-fonts.ts new file mode 100644 index 0000000000000..3510ab06a585e --- /dev/null +++ b/site/src/theme/global-fonts.ts @@ -0,0 +1,7 @@ +// Monospace fonts used for code, button styles, and banners +import "@fontsource/fira-code/400.css" +import "@fontsource/fira-code/600.css" +// Main body copy font +import "@fontsource/inter/300.css" +import "@fontsource/inter/400.css" +import "@fontsource/inter/600.css" diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts index ffa2f46f8f7af..84339f9ef62f2 100644 --- a/site/webpack.dev.ts +++ b/site/webpack.dev.ts @@ -10,6 +10,8 @@ import { commonWebpackConfig } from "./webpack.common" const commonPlugins = commonWebpackConfig.plugins || [] +const commonRules = commonWebpackConfig.module?.rules || [] + const config: Configuration = { ...commonWebpackConfig, @@ -68,6 +70,20 @@ const config: Configuration = { // https://webpack.js.org/configuration/mode/#mode-development mode: "development", + module: { + rules: [ + ...commonRules, + + { + test: /\.css$/i, + // Use simple style-loader for CSS modules. This places styles directly + // in