Use Fontsource fonts, add type support to Tailwind config (#1600)

* Add type support for Tailwind config

* Use fontsource fonts

* Remove unused class

* Remove unused component

* Use colors from current theme

* Remove fonts

* Update snapshots

* Remove unused colors

colors.cjs

@@ -1,15 +1,12 @@
 const colors = {
   primary: { DEFAULT: '#18181b' }, // gray-900
   secondary: '#64748b', // blue-gray-500
-  primaryText: '#141414',
-  spaceGray: { DEFAULT: '#141414' },
   white: '#ffffff',
   offWhite: '#F8F8F7',
   danger: '#b91c1c', // red-700
   success: '#bbf7d0', // green-200
   black: '#000000',
   lightBlue: '#DFFBFF',
-  lightPurple: '#DDD6FE',
   blue: {
     50: '#eff6ff',
     100: '#dbeafe',

package.json

@@ -78,6 +78,9 @@
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.2",
     "@crownframework/svelte-error-boundary": "^1.0.3",
+    "@fontsource-variable/inter": "^5.0.8",
+    "@fontsource/noto-sans-mono": "^5.0.9",
+    "@fontsource/poppins": "^5.0.8",
     "@lezer/highlight": "^1.1.3",
     "@sveltejs/package": "^2.0.2",
     "@sveltejs/svelte-virtual-list": "^3.0.1",

src/app.css

@@ -1,120 +1,36 @@
+@import '@fontsource-variable/inter';
+@import '@fontsource/poppins';
+@import '@fontsource/noto-sans-mono';
+
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
 @layer base {
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter'), local('inter'),
-      url('/src/lib/vendor/css/fonts/Inter/Inter-Light.ttf');
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter'), local('inter'),
-      url('/src/lib/vendor/css/fonts/Inter/Inter-Regular.ttf');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter'), local('inter'),
-      url('/src/lib/vendor/css/fonts/Inter/Inter-Medium.ttf');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter'), local('inter'),
-      url('/src/lib/vendor/css/fonts/Inter/Inter-SemiBold.ttf');
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-Light.ttf');
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
+  *,
+  html,
+  body {
+    box-sizing: border-box;
   }
 
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-Regular.ttf');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
+  body {
+    font-family: theme('fontFamily.primary');
+    position: relative;
+    overscroll-behavior: none;
   }
 
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-Medium.ttf');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  titles,
+  labels {
+    font-family: theme('fontFamily.secondary');
   }
 
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-SemiBold.ttf');
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
+  input[type='search']::-webkit-search-cancel-button {
+    display: none;
   }
-
-  @font-face {
-    font-family: 'Noto Sans Mono';
-    src: local('Noto Sans Mono'), local('noto sans mono'),
-      url('/src/lib/vendor/css/fonts/NotoSansMono/NotoSansMono-VariableFont_wdth\,wght.ttf');
-    font-display: swap;
-  }
-}
-
-*,
-html,
-body {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: Inter, sans-serif;
-  position: relative;
-  overscroll-behavior: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-titles,
-labels {
-  font-family: Poppins, sans-serif;
-}
-
-.hljs {
-  max-height: 25em;
-  overflow-y: scroll;
-}
-
-.noto {
-  font-family: 'Noto Sans Mono', monospace;
-}
-
-input[type='search']::-webkit-search-cancel-button {
-  display: none;
 }

src/histoire.css

@@ -4,48 +4,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  @font-face {
-    font-family: 'Inter';
-    src: local('Inter'), local('inter'),
-      url('/src/lib/vendor/css/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf');
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-Light.ttf');
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-Regular.ttf');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-Medium.ttf');
-    font-style: medium;
-    font-weight: 500;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Poppins';
-    src: local('Poppins'), local('poppins'),
-      url('/src/lib/vendor/css/fonts/Poppins/Poppins-SemiBold.ttf');
-    font-style: medium;
-    font-weight: 600;
-    font-display: swap;
-  }
-}

src/lib/components/workers-list.svelte

@@ -63,7 +63,7 @@
             </CompatibilityBadge>
           </td>
           <td class="text-left" data-testid="version-compatible-builds">
-            <div class="flex gap-2 noto flex-wrap">
+            <div class="flex gap-2 font-mono flex-wrap">
               {#each getNonDefaultVersionsForSet(set.buildIds) as buildId}
                 <CompatibilityBadge active={false} {buildId}>
                   <svelte:fragment slot="default-worker">

src/lib/components/workflow/workflow-count.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { WorkflowStatus as Status } from '$lib/types/workflows';
-  
+
   import WorkflowStatus from '../workflow-status.svelte';
 
   export let status: Status;
@@ -16,7 +16,7 @@
   on:click={() => onStatusClick(status)}
   on:keypress={() => onStatusClick(status)}
 >
-  <p class="noto text-sm lg:text-lg">{count.toLocaleString()}</p>
+  <p class="font-mono text-sm lg:text-lg">{count.toLocaleString()}</p>
   <WorkflowStatus {status} />
 </div>
 

src/lib/holocene/__snapshots__/button.test.ts.snap

@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Button > class 1`] = `"<button type=\\"button\\" class=\\"button primary custom-class svelte-1pbdb4t\\">  </button>"`;
+exports[`Button > class 1`] = `"<button type=\\"button\\" class=\\"button primary custom-class svelte-1b5wh91\\">  </button>"`;
 
-exports[`Button > default 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1pbdb4t\\">  </button>"`;
+exports[`Button > default 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\">  </button>"`;
 
-exports[`Button > disabled 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1pbdb4t\\" disabled=\\"\\">  </button>"`;
+exports[`Button > disabled 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\" disabled=\\"\\">  </button>"`;
 
-exports[`Button > icon 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1pbdb4t\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>download</title><path d=\\"M11.625 16.375C11.7188 16.4688 11.8438 16.5 12 16.5C12.125 16.5 12.25 16.4688 12.3438 16.375L16.8438 11.875C17.0312 11.6875 17.0312 11.3438 16.8438 11.1562C16.6562 10.9688 16.3125 10.9688 16.125 11.1562L12.5 14.8125V5.5C12.5 5.25 12.25 5 12 5C11.7188 5 11.5 5.25 11.5 5.5V14.8125L7.84375 11.1562C7.65625 10.9688 7.3125 10.9688 7.125 11.1562C6.9375 11.3438 6.9375 11.6875 7.125 11.875L11.625 16.375ZM17.5 18H6.5C6.21875 18 6 18.25 6 18.5C6 18.7812 6.21875 19 6.5 19H17.5C17.75 19 18 18.7812 18 18.5C18 18.25 17.75 18 17.5 18Z\\" fill=\\"currentcolor\\"></path></svg></span>  </button>"`;
+exports[`Button > icon 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\"><span><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>download</title><path d=\\"M11.625 16.375C11.7188 16.4688 11.8438 16.5 12 16.5C12.125 16.5 12.25 16.4688 12.3438 16.375L16.8438 11.875C17.0312 11.6875 17.0312 11.3438 16.8438 11.1562C16.6562 10.9688 16.3125 10.9688 16.125 11.1562L12.5 14.8125V5.5C12.5 5.25 12.25 5 12 5C11.7188 5 11.5 5.25 11.5 5.5V14.8125L7.84375 11.1562C7.65625 10.9688 7.3125 10.9688 7.125 11.1562C6.9375 11.3438 6.9375 11.6875 7.125 11.875L11.625 16.375ZM17.5 18H6.5C6.21875 18 6 18.25 6 18.5C6 18.7812 6.21875 19 6.5 19H17.5C17.75 19 18 18.7812 18 18.5C18 18.25 17.75 18 17.5 18Z\\" fill=\\"currentcolor\\"></path></svg></span>  </button>"`;
 
-exports[`Button > loading 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1pbdb4t\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>  </button>"`;
+exports[`Button > loading 1`] = `"<button type=\\"button\\" class=\\"button primary svelte-1b5wh91\\"><span class=\\"animate-spin\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>spinner</title><path d=\\"M7.375 6.40625C6.84375 6.40625 6.375 6.875 6.375 7.40625C6.375 7.96875 6.84375 8.40625 7.375 8.40625C7.9375 8.40625 8.375 7.96875 8.375 7.40625C8.375 6.875 7.9375 6.40625 7.375 6.40625ZM7.375 15.625C6.84375 15.625 6.375 16.0625 6.375 16.625C6.375 17.1562 6.84375 17.625 7.375 17.625C7.9375 17.625 8.375 17.1562 8.375 16.625C8.375 16.0625 7.9375 15.625 7.375 15.625ZM12 17.5C11.4375 17.5 11 17.9688 11 18.5C11 19.0625 11.4375 19.5 12 19.5C12.5312 19.5 13 19.0625 13 18.5C13 17.9688 12.5312 17.5 12 17.5ZM5.5 11C4.9375 11 4.5 11.4688 4.5 12C4.5 12.5625 4.9375 13 5.5 13C6.03125 13 6.5 12.5625 6.5 12C6.5 11.4688 6.03125 11 5.5 11ZM12 4.5C11.4375 4.5 11 4.96875 11 5.5C11 6.0625 11.4375 6.5 12 6.5C12.5312 6.5 13 6.0625 13 5.5C13 4.96875 12.5312 4.5 12 4.5ZM18.5 11C17.9375 11 17.5 11.4688 17.5 12C17.5 12.5625 17.9375 13 18.5 13C19.0312 13 19.5 12.5625 19.5 12C19.5 11.4688 19.0312 11 18.5 11ZM16.5938 15.625C16.0312 15.625 15.5938 16.0625 15.5938 16.625C15.5938 17.1562 16.0312 17.625 16.5938 17.625C17.125 17.625 17.5938 17.1562 17.5938 16.625C17.5938 16.0625 17.125 15.625 16.5938 15.625Z\\" fill=\\"currentcolor\\"></path></svg></span>  </button>"`;
 
-exports[`Button > secondary 1`] = `"<button type=\\"button\\" class=\\"button secondary svelte-1pbdb4t\\">  </button>"`;
+exports[`Button > secondary 1`] = `"<button type=\\"button\\" class=\\"button secondary svelte-1b5wh91\\">  </button>"`;
 
-exports[`Button > secondary disabled 1`] = `"<button type=\\"button\\" class=\\"button secondary svelte-1pbdb4t\\">  </button>"`;
+exports[`Button > secondary disabled 1`] = `"<button type=\\"button\\" class=\\"button secondary svelte-1b5wh91\\">  </button>"`;

src/lib/holocene/compatibility-badge.svelte

@@ -6,7 +6,7 @@
   export let buildId = '';
 </script>
 
-<p class="select-all flex gap-2 noto">
+<p class="select-all flex gap-2 font-mono">
   {#if defaultVersion && buildId}
     <span class:active-version={active} class:version={!active}>
       <Icon name="merge" />{buildId}

tailwind.config.cjs

@@ -1,15 +1,17 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 const temporalColors = require('./colors.cjs');
 
+/** @type {import('tailwindcss').Config} */
 const config = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
     colors: temporalColors,
-    textColor: temporalColors,
-    backgroundColor: temporalColors,
+    textColor: ({ theme }) => theme('colors'),
+    backgroundColor: ({ theme }) => theme('colors'),
     fontFamily: {
-      primary: ['Inter', ...defaultTheme.fontFamily.sans],
+      primary: ['Inter Variable', ...defaultTheme.fontFamily.sans],
       secondary: ['Poppins', ...defaultTheme.fontFamily.sans],
+      mono: ['Noto Sans Mono', ...defaultTheme.fontFamily.mono],
     },
     extend: {
       animation: {