7 files changed, 105 insertions, 47 deletions

diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html
index a3e52ef9..f9e87485 100644
--- a/subprojects/frontend/index.html
+++ b/subprojects/frontend/index.html
@@ -10,7 +10,7 @@
     <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" sizes="180x180">
     <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99">
-    <meta name="theme-color" media="(prefers-color-scheme:light)" content="#fafafa">
+    <meta name="theme-color" media="(prefers-color-scheme:light)" content="#f5f5f5">
     <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b">
     <style>
       @import '@fontsource/jetbrains-mono/variable.css';
@@ -270,15 +270,15 @@
       }
 
       body {
-        color: #35373e;
-        background: #ffffff;
-        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+        color: #19202b;
+        background: #f5f5f5;
+        font-family: 'InterVariable', 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
       }
 
       @media (prefers-color-scheme: dark) {
         body {
           color: #ebebff;
-          background: #282c34;
+          background: #21252b;
         }
       }
     </style>
diff --git a/subprojects/frontend/src/Loading.tsx b/subprojects/frontend/src/Loading.tsx
index 72020a43..8c293239 100644
--- a/subprojects/frontend/src/Loading.tsx
+++ b/subprojects/frontend/src/Loading.tsx
@@ -2,18 +2,19 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-const LoadingRoot = styled('div')({
+const LoadingRoot = styled('div')(({ theme }) => ({
   width: '100%',
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-});
+  background: theme.palette.outer.background,
+}));
 
 export default function Loading() {
   return (
     <LoadingRoot>
-      <CircularProgress />
+      <CircularProgress size={60} color="inherit" />
     </LoadingRoot>
   );
 }
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 935a84e8..df43d2c9 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -1,10 +1,10 @@
 import Box from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useState } from 'react';
 
-import Loading from '../Loading';
 import { useRootStore } from '../RootStore';
 
 import EditorArea from './EditorArea';
@@ -12,6 +12,23 @@ import EditorButtons from './EditorButtons';
 import GenerateButton from './GenerateButton';
 import SearchPanelPortal from './SearchPanelPortal';
 
+function EditorLoading(): JSX.Element {
+  const [skeletonSizes] = useState(() =>
+    new Array(10).fill(0).map(() => Math.random() * 60 + 10),
+  );
+
+  return (
+    <Box mx={2}>
+      {skeletonSizes.map((length, i) => (
+        /* eslint-disable-next-line react/no-array-index-key --
+          Random placeholders have no identity.
+        */
+        <Skeleton key={i} width={`${length}%`} />
+      ))}
+    </Box>
+  );
+}
+
 function EditorPane(): JSX.Element {
   const { editorStore } = useRootStore();
 
@@ -23,7 +40,7 @@ function EditorPane(): JSX.Element {
       </Toolbar>
       <Box flexGrow={1} flexShrink={1} overflow="auto">
         {editorStore === undefined ? (
-          <Loading />
+          <EditorLoading />
         ) : (
           <>
             <SearchPanelPortal editorStore={editorStore} />
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index ca07d602..dfeeb547 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -14,8 +14,10 @@ export default styled('div', {
 })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
   const editorFontStyle = {
     ...theme.typography.editor,
+    fontWeight: theme.typography.fontWeightEditorNormal,
     [theme.breakpoints.down('sm')]: {
-      fontSize: '0.875rem',
+      // `rem` for JetBrains MonoVariable make the text too large in Safari.
+      fontSize: '14px',
       lineHeight: 1.43,
     },
   };
@@ -29,7 +31,12 @@ export default styled('div', {
       color: theme.palette.text.secondary,
     },
     '.cm-gutters': {
-      background: theme.palette.background.default,
+      background: `linear-gradient(
+        to right,
+        ${theme.palette.background.default} 0%,
+        ${theme.palette.background.default} calc(100% - 12px),
+        transparent 100%
+      )`,
       border: 'none',
     },
     '.cm-content': {
@@ -93,7 +100,7 @@ export default styled('div', {
       fontStyle: 'italic',
     },
     '.tok-problem-containment': {
-      fontWeight: theme.typography.fontWeightBold,
+      fontWeight: theme.typography.fontWeightEditorBold,
       textDecorationSkipInk: 'none',
     },
     '.tok-problem-error': {
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 7e6ff4f7..895f1ca1 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -11,6 +11,7 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import ToggleButton from '@mui/material/ToggleButton';
 import Toolbar from '@mui/material/Toolbar';
+import { styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useState } from 'react';
@@ -18,7 +19,13 @@ import React, { useCallback, useState } from 'react';
 import type SearchPanelStore from './SearchPanelStore';
 
 const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)';
-const ABBREVIATE_MEDIA_QUERY = '@media (max-width: 720px)';
+
+const DimLabel = styled(FormControlLabel)(({ theme }) => ({
+  '.MuiFormControlLabel-label': {
+    ...theme.typography.body2,
+    color: theme.palette.text.secondary,
+  },
+}));
 
 function SearchToolbar({
   searchPanelStore,
@@ -31,7 +38,6 @@ function SearchToolbar({
     invalidRegexp,
   } = searchPanelStore;
   const split = useMediaQuery(SPLIT_MEDIA_QUERY);
-  const abbreviate = useMediaQuery(ABBREVIATE_MEDIA_QUERY);
   const [showRepalceState, setShowReplaceState] = useState(false);
 
   const showReplace = !split || showRepalceState || replace !== '';
@@ -132,7 +138,7 @@ function SearchToolbar({
             alignItems="center"
             rowGap={0.5}
           >
-            <FormControlLabel
+            <DimLabel
               control={
                 <Checkbox
                   checked={caseSensitive}
@@ -144,10 +150,9 @@ function SearchToolbar({
                   size="small"
                 />
               }
-              aria-label="Match case"
-              label={abbreviate ? 'Case' : 'Match case'}
+              label="Match case"
             />
-            <FormControlLabel
+            <DimLabel
               control={
                 <Checkbox
                   checked={literal}
@@ -159,10 +164,9 @@ function SearchToolbar({
                   size="small"
                 />
               }
-              aria-label="Literal"
-              label={abbreviate ? 'Lit' : 'Literal'}
+              label="Literal"
             />
-            <FormControlLabel
+            <DimLabel
               control={
                 <Checkbox
                   checked={regexp}
@@ -248,7 +252,15 @@ function SearchToolbar({
           </Stack>
         </Stack>
       </Stack>
-      <Stack direction="row" alignSelf="stretch" alignItems="start" mt="1px">
+      <Stack
+        direction="row"
+        alignSelf="stretch"
+        alignItems="start"
+        mt="1px"
+        sx={{
+          [SPLIT_MEDIA_QUERY]: { display: 'none' },
+        }}
+      >
         <IconButton
           aria-label="Close find/replace"
           onClick={() => searchPanelStore.close()}
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 3a0703fe..0c780e85 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -43,11 +43,15 @@ interface HighlightPalette {
 
 declare module '@mui/material/styles' {
   interface TypographyVariants {
+    fontWeightEditorNormal: number;
+    fontWeightEditorBold: number;
     editor: TypographyStyle;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-shadow -- Augment imported interface.
   interface TypographyVariantsOptions {
+    fontWeightEditorNormal: number;
+    fontWeightEditorBold: number;
     editor: TypographyStyle;
   }
 
@@ -63,11 +67,14 @@ declare module '@mui/material/styles' {
 }
 
 const typography: TypographyVariantsOptions = {
+  fontWeightEditorNormal: 400,
+  fontWeightEditorBold: 600,
   editor: {
     fontFamily:
       '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace',
     fontFeatureSettings: '"liga", "calt"',
-    fontSize: '1rem',
+    // `rem` for JetBrains MonoVariable make the text too large in Safari.
+    fontSize: '16px',
     fontWeight: 400,
     lineHeight: 1.5,
     letterSpacing: 0,
@@ -78,10 +85,20 @@ const typography: TypographyVariantsOptions = {
 const components: Components = {
   MuiButton: {
     styleOverrides: {
-      root: { '&.rounded': { borderRadius: '50em' } },
-      text: { '&.rounded': { padding: '6px 16px' } },
-      textSizeSmall: { '&.rounded': { padding: '4px 10px' } },
-      textSizeLarge: { '&.rounded': { padding: '8px 22px' } },
+      root: {
+        '&.rounded': { borderRadius: '50em' },
+        '.MuiButton-startIcon': { marginRight: 6 },
+        '.MuiButton-endIcon': { marginLeft: 6 },
+      },
+      text: { '&.rounded': { padding: '6px 14px' } },
+      textSizeSmall: {
+        fontSize: '0.875rem',
+        '&.rounded': { padding: '4px 8px' },
+      },
+      textSizeLarge: {
+        fontSize: '1rem',
+        '&.rounded': { padding: '8px 20px' },
+      },
     },
   },
   MuiToggleButton: {
@@ -142,31 +159,31 @@ const lightTheme = createResponsiveTheme({
     success: { main: '#50a14f' },
     info: { main: '#4078f2' },
     background: {
-      default: '#ffffff',
-      paper: '#ffffff',
+      default: '#fff',
+      paper: '#fff',
     },
     text: {
-      primary: '#35373e',
+      primary: '#19202b',
       secondary: '#696c77',
-      disabled: '#8e8f97',
+      disabled: '#a0a1a7',
     },
-    divider: alpha('#35373e', 0.21),
+    divider: alpha('#19202b', 0.16),
     outer: {
-      background: '#fafafa',
-      border: '#d4d4d6',
+      background: '#f5f5f5',
+      border: '#d6d7d9',
     },
     highlight: {
       number: '#0084bc',
       parameter: '#6a3e3e',
-      comment: '#8e8f97',
-      activeLine: '#fafafa',
+      comment: '#a0a1a7',
+      activeLine: '#f5f5f5',
       selection: '#c8e4fb',
-      lineNumber: '#8e8f97',
-      foldPlaceholder: alpha('#35373e', 0.08),
+      lineNumber: '#a0a1a7',
+      foldPlaceholder: alpha('#19202b', 0.08),
       activeLintRange: alpha('#f2a60d', 0.28),
       occurences: {
-        read: alpha('#35373e', 0.16),
-        write: alpha('#35373e', 0.16),
+        read: alpha('#19202b', 0.16),
+        write: alpha('#19202b', 0.16),
       },
       search: {
         match: '#00bcd4',
@@ -178,7 +195,11 @@ const lightTheme = createResponsiveTheme({
 });
 
 const darkTheme = createResponsiveTheme({
-  typography,
+  typography: {
+    ...typography,
+    fontWeightEditorNormal: 350,
+    fontWeightEditorBold: 550,
+  },
   components: {
     ...components,
     MuiSnackbarContent: {
@@ -218,7 +239,7 @@ const darkTheme = createResponsiveTheme({
     text: {
       primary: '#ebebff',
       secondary: '#abb2bf',
-      disabled: '#828997',
+      disabled: '#5c6370',
     },
     divider: alpha('#abb2bf', 0.24),
     outer: {
@@ -228,10 +249,10 @@ const darkTheme = createResponsiveTheme({
     highlight: {
       number: '#6188a6',
       parameter: '#c8ae9d',
-      comment: '#828997',
+      comment: '#5c6370',
       activeLine: '#21252b',
       selection: '#3e4453',
-      lineNumber: '#828997',
+      lineNumber: '#5c6370',
       foldPlaceholder: alpha('#ebebff', 0.12),
       activeLintRange: alpha('#fbc346', 0.28),
       occurences: {
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index f2e0f15c..0c13f133 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -110,7 +110,7 @@ export default defineConfig({
         short_name: 'Refinery',
         description:
           'An efficient graph sovler for generating well-formed models',
-        theme_color: '#21252b',
+        theme_color: '#f5f5f5',
         display_override: ['window-controls-overlay'],
         display: 'standalone',
         background_color: '#21252b',