[WEB-5675] chore: implement fontsource as the fonts library (#8398)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
df69886080
commit
3876bf054c
28 changed files with 108 additions and 104 deletions
|
|
@ -10,6 +10,11 @@ import { LogoSpinner } from "@/components/common/logo-spinner";
|
|||
import globalStyles from "@/styles/globals.css?url";
|
||||
import type { Route } from "./+types/root";
|
||||
import { AppProviders } from "./providers";
|
||||
// fonts
|
||||
import "@fontsource-variable/inter";
|
||||
import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
|
||||
import "@fontsource/material-symbols-rounded";
|
||||
import "@fontsource/ibm-plex-mono";
|
||||
|
||||
const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
|
||||
const APP_DESCRIPTION =
|
||||
|
|
@ -22,6 +27,13 @@ export const links: LinksFunction = () => [
|
|||
{ rel: "shortcut icon", href: faviconIco },
|
||||
{ rel: "manifest", href: `/site.webmanifest.json` },
|
||||
{ rel: "stylesheet", href: globalStyles },
|
||||
{
|
||||
rel: "preload",
|
||||
href: interVariableWoff2,
|
||||
as: "font",
|
||||
type: "font/woff2",
|
||||
crossOrigin: "anonymous",
|
||||
},
|
||||
];
|
||||
|
||||
export function Layout({ children }: { children: ReactNode }) {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@bprogress/core": "catalog:",
|
||||
"@fontsource-variable/inter": "5.2.8",
|
||||
"@fontsource/ibm-plex-mono": "5.2.7",
|
||||
"@fontsource/material-symbols-rounded": "5.2.30",
|
||||
"@headlessui/react": "^1.7.19",
|
||||
"@plane/constants": "workspace:*",
|
||||
"@plane/hooks": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import "@plane/tailwind-config/index.css";
|
||||
@import "@plane/propel/styles/fonts";
|
||||
|
||||
.shadow-custom {
|
||||
box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@ import type { Route } from "./+types/root";
|
|||
// local imports
|
||||
import ErrorPage from "./error";
|
||||
import { AppProviders } from "./providers";
|
||||
// fonts
|
||||
import "@fontsource-variable/inter";
|
||||
import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
|
||||
import "@fontsource/material-symbols-rounded";
|
||||
import "@fontsource/ibm-plex-mono";
|
||||
|
||||
const APP_TITLE = "Plane Publish | Make your Plane boards public with one-click";
|
||||
const APP_DESCRIPTION = "Plane Publish is a customer feedback management tool built on top of plane.so";
|
||||
|
|
@ -24,6 +29,13 @@ export const links: Route.LinksFunction = () => [
|
|||
{ rel: "shortcut icon", href: faviconIco },
|
||||
{ rel: "manifest", href: siteWebmanifest },
|
||||
{ rel: "stylesheet", href: globalStyles },
|
||||
{
|
||||
rel: "preload",
|
||||
href: interVariableWoff2,
|
||||
as: "font",
|
||||
type: "font/woff2",
|
||||
crossOrigin: "anonymous",
|
||||
},
|
||||
];
|
||||
|
||||
export const headers: Route.HeadersFunction = () => ({
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@bprogress/core": "catalog:",
|
||||
"@fontsource-variable/inter": "5.2.8",
|
||||
"@fontsource/ibm-plex-mono": "5.2.7",
|
||||
"@fontsource/material-symbols-rounded": "5.2.30",
|
||||
"@headlessui/react": "^1.7.19",
|
||||
"@plane/constants": "workspace:*",
|
||||
"@plane/editor": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "@plane/tailwind-config/index.css";
|
||||
@import "@plane/editor/styles";
|
||||
@import "@plane/propel/styles/fonts";
|
||||
@import "@plane/propel/styles/react-day-picker.css";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import Script from "next/script";
|
|||
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
import "@/styles/power-k.css";
|
||||
import "@/styles/emoji.css";
|
||||
|
||||
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,11 @@ import type { Route } from "./+types/root";
|
|||
// local
|
||||
import { CustomErrorComponent } from "./error";
|
||||
import { AppProvider } from "./provider";
|
||||
// fonts
|
||||
import "@fontsource-variable/inter";
|
||||
import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
|
||||
import "@fontsource/material-symbols-rounded";
|
||||
import "@fontsource/ibm-plex-mono";
|
||||
|
||||
const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
|
||||
|
||||
|
|
@ -33,6 +38,13 @@ export const links: LinksFunction = () => [
|
|||
{ rel: "apple-touch-icon", sizes: "512x512", href: icon512 },
|
||||
{ rel: "manifest", href: "/manifest.json" },
|
||||
{ rel: "stylesheet", href: globalStyles },
|
||||
{
|
||||
rel: "preload",
|
||||
href: interVariableWoff2,
|
||||
as: "font",
|
||||
type: "font/woff2",
|
||||
crossOrigin: "anonymous",
|
||||
},
|
||||
];
|
||||
|
||||
export function Layout({ children }: { children: ReactNode }) {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@
|
|||
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "catalog:",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
|
||||
"@bprogress/core": "catalog:",
|
||||
"@fontsource-variable/inter": "5.2.8",
|
||||
"@fontsource/ibm-plex-mono": "5.2.7",
|
||||
"@fontsource/material-symbols-rounded": "5.2.30",
|
||||
"@headlessui/react": "^1.7.19",
|
||||
"@intercom/messenger-js-sdk": "^0.0.12",
|
||||
"@plane/constants": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "@plane/tailwind-config/index.css";
|
||||
@import "@plane/editor/styles";
|
||||
@import "@plane/propel/styles/fonts";
|
||||
@import "@plane/propel/styles/react-day-picker.css";
|
||||
@import "./power-k.css";
|
||||
@import "./emoji.css";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@import "@plane/tailwind-config/index.css";
|
||||
@import "../src/styles/fonts/index.css";
|
||||
@import "../src/styles/react-day-picker.css";
|
||||
|
|
|
|||
|
|
@ -58,8 +58,6 @@
|
|||
"./tooltip": "./dist/tooltip/index.js",
|
||||
"./utils": "./dist/utils/index.js",
|
||||
"./package.json": "./package.json",
|
||||
"./styles/fonts.css": "./dist/styles/fonts/index.css",
|
||||
"./styles/fonts": "./dist/styles/fonts/index.css",
|
||||
"./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
|
||||
"./styles/react-day-picker": "./dist/styles/react-day-picker.css"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ export function Logo({ logo, size = 16, type = "material" }: Props) {
|
|||
const value = in_use === "emoji" ? emoji?.value : icon?.name;
|
||||
|
||||
if (!value) return loadingSkeleton;
|
||||
if (!isMaterialSymbolsFontLoaded && type === "material") return loadingSkeleton;
|
||||
|
||||
// Emoji rendering
|
||||
if (in_use === "emoji") {
|
||||
|
|
@ -66,6 +65,8 @@ export function Logo({ logo, size = 16, type = "material" }: Props) {
|
|||
return <LucideIconElement style={{ color, height: size, width: size }} />;
|
||||
}
|
||||
|
||||
if (!isMaterialSymbolsFontLoaded) return loadingSkeleton;
|
||||
|
||||
// Material icon
|
||||
return (
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
Inter[slnt,wght].ttf: Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1 +0,0 @@
|
|||
MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf: Copyright 2022, 2022 Google LLC. All Rights Reserved.
|
||||
Binary file not shown.
|
|
@ -1,87 +0,0 @@
|
|||
/* inter-200 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url("./Inter/inter-v13-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* inter-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("./Inter/inter-v13-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* inter-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("./Inter/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* inter-500 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url("./Inter/inter-v13-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* inter-600 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("./Inter/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* inter-700 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("./Inter/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* inter-800 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: Inter;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url("./Inter/inter-v13-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* material-symbols-rounded-regular - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Material Symbols Rounded";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("./Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
.material-symbols-rounded {
|
||||
font-family: "Material Symbols Rounded";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
font-feature-settings: "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -44,8 +44,6 @@ export default defineConfig({
|
|||
exports: {
|
||||
customExports: (exports) => ({
|
||||
...exports,
|
||||
"./styles/fonts.css": "./dist/styles/fonts/index.css",
|
||||
"./styles/fonts": "./dist/styles/fonts/index.css",
|
||||
"./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
|
||||
"./styles/react-day-picker": "./dist/styles/react-day-picker.css",
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -830,10 +830,10 @@
|
|||
/* ---------- Font family ---------- */
|
||||
--font-*: initial;
|
||||
--font-heading:
|
||||
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-body:
|
||||
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--font-code:
|
||||
"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
|
@ -1134,11 +1134,27 @@
|
|||
@utility scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar: {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility material-symbols-rounded {
|
||||
font-family: "Material Symbols Rounded";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
font-feature-settings: "liga";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Tailwind typography plugin overwrites */
|
||||
@utility prose {
|
||||
--tw-prose-body: var(--text-color-primary);
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
@import "@plane/tailwind-config/index.css";
|
||||
@import "@plane/propel/styles/fonts";
|
||||
|
|
|
|||
42
pnpm-lock.yaml
generated
42
pnpm-lock.yaml
generated
|
|
@ -192,6 +192,15 @@ importers:
|
|||
'@bprogress/core':
|
||||
specifier: 'catalog:'
|
||||
version: 1.3.4
|
||||
'@fontsource-variable/inter':
|
||||
specifier: 5.2.8
|
||||
version: 5.2.8
|
||||
'@fontsource/ibm-plex-mono':
|
||||
specifier: 5.2.7
|
||||
version: 5.2.7
|
||||
'@fontsource/material-symbols-rounded':
|
||||
specifier: 5.2.30
|
||||
version: 5.2.30
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.19
|
||||
version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -425,6 +434,15 @@ importers:
|
|||
'@bprogress/core':
|
||||
specifier: 'catalog:'
|
||||
version: 1.3.4
|
||||
'@fontsource-variable/inter':
|
||||
specifier: 5.2.8
|
||||
version: 5.2.8
|
||||
'@fontsource/ibm-plex-mono':
|
||||
specifier: 5.2.7
|
||||
version: 5.2.7
|
||||
'@fontsource/material-symbols-rounded':
|
||||
specifier: 5.2.30
|
||||
version: 5.2.30
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.19
|
||||
version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -573,6 +591,15 @@ importers:
|
|||
'@bprogress/core':
|
||||
specifier: 'catalog:'
|
||||
version: 1.3.4
|
||||
'@fontsource-variable/inter':
|
||||
specifier: 5.2.8
|
||||
version: 5.2.8
|
||||
'@fontsource/ibm-plex-mono':
|
||||
specifier: 5.2.7
|
||||
version: 5.2.7
|
||||
'@fontsource/material-symbols-rounded':
|
||||
specifier: 5.2.30
|
||||
version: 5.2.30
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.19
|
||||
version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -2095,6 +2122,15 @@ packages:
|
|||
'@floating-ui/utils@0.2.10':
|
||||
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
|
||||
|
||||
'@fontsource-variable/inter@5.2.8':
|
||||
resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
|
||||
|
||||
'@fontsource/ibm-plex-mono@5.2.7':
|
||||
resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
|
||||
|
||||
'@fontsource/material-symbols-rounded@5.2.30':
|
||||
resolution: {integrity: sha512-svIEPUzsJGdBMr0PwLH3wKndh7ZNB8IVlyKZPKvbGEX0f36gpGPzE2EZiXppb4UJgDUnyjphWzjJ28StuK6NCg==}
|
||||
|
||||
'@formatjs/ecma402-abstract@2.3.4':
|
||||
resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
|
||||
|
||||
|
|
@ -10154,6 +10190,12 @@ snapshots:
|
|||
|
||||
'@floating-ui/utils@0.2.10': {}
|
||||
|
||||
'@fontsource-variable/inter@5.2.8': {}
|
||||
|
||||
'@fontsource/ibm-plex-mono@5.2.7': {}
|
||||
|
||||
'@fontsource/material-symbols-rounded@5.2.30': {}
|
||||
|
||||
'@formatjs/ecma402-abstract@2.3.4':
|
||||
dependencies:
|
||||
'@formatjs/fast-memoize': 2.2.7
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue