Merge branch 'main' into DT-1248-link-hover-styles

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
   "*.{ts,js}": ["pnpm lint:fix", "prettier --write"],
-  "*.{css,postcss,svelte}": ["stylelint --fix", "pnpm lint:fix"],
+  "*.{css,postcss}": ["stylelint --fix"],
+  "*.svelte": ["stylelint --fix", "pnpm lint:fix"],
   "*.{json,md}": "prettier --write"
 }

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Badge from '$lib/holocene/badge.svelte';
   import CompatibilityBadge from '$lib/holocene/compatibility-badge.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -36,7 +37,6 @@
     {translate('task-queue')}:
     <span class="select-all font-normal">{taskQueue}</span>
   </h2>
-
   {#if versionSets?.length}
     <h2 class="text-base font-medium" data-testid="version-sets">
       {translate('workers', 'version-sets')}
@@ -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">
@@ -83,8 +83,14 @@
       {/each}
     </Table>
   {/if}
-  <h2 class="text-base font-medium" data-testid="workers">
+  <h2
+    class="text-base font-medium flex items-center gap-2"
+    data-testid="workers"
+  >
     {translate('workers', 'workers')}
+    <Badge type="count" class="rounded-sm"
+      >{workers?.pollers?.length || 0}</Badge
+    >
   </h2>
   <Table class="mb-6 w-full min-w-[600px] table-fixed">
     <caption class="sr-only" slot="caption"

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/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: {