Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Aug 30, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
add89b7
Add type support for Tailwind config
stevekinney Aug 29, 2023
bf34366
Use fontsource fonts
stevekinney Aug 29, 2023
c49a090
Remove unused class
stevekinney Aug 29, 2023
705882c
Remove unused component
stevekinney Aug 29, 2023
5b4b7f1
Use colors from current theme
stevekinney Aug 29, 2023
3bcfafc
Remove fonts
stevekinney Aug 29, 2023
946ce72
Update snapshots
stevekinney Aug 30, 2023
8165912
Remove unused colors
stevekinney Aug 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions colors.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 21 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

130 changes: 23 additions & 107 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
45 changes: 0 additions & 45 deletions src/histoire.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
2 changes: 1 addition & 1 deletion src/lib/components/workers-list.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/workflow/workflow-count.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion ...w/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions src/lib/holocene/__snapshots__/button.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>"`;
2 changes: 1 addition & 1 deletion src/lib/holocene/compatibility-badge.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-Black.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-ExtraBold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-ExtraLight.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-Medium.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-SemiBold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-Thin.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Inter/Inter-VariableFont_slnt,wght.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/NotoSansMono/NotoSansMono-VariableFont_wdth,wght.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-Black.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-ExtraBold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-ExtraLight.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-Medium.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-SemiBold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed src/lib/vendor/css/fonts/Poppins/Poppins-Thin.ttf
View file
Open in desktop
Binary file not shown.
8 changes: 5 additions & 3 deletions tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down