[WEB-5649] [WEB-5675] fix: local font files #8377

apps/admin/styles/globals.css

@@ -1,4 +1,5 @@
 @import "@plane/tailwind-config/index.css";
+@import "@plane/tailwind-config/fonts.css";
 
 .shadow-custom {
   box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */

apps/space/styles/globals.css

@@ -1,4 +1,5 @@
 @import "@plane/tailwind-config/index.css";
+@import "@plane/tailwind-config/fonts.css";
 @import "@plane/editor/styles";
 @import "@plane/propel/styles/react-day-picker.css";
 @plugin "@tailwindcss/typography";

apps/web/styles/globals.css

@@ -1,4 +1,5 @@
 @import "@plane/tailwind-config/index.css";
+@import "@plane/tailwind-config/fonts.css";
 @import "@plane/editor/styles";
 @import "@plane/propel/styles/react-day-picker.css";
 @import "./power-k.css";

packages/propel/.storybook/tailwind.css

@@ -1,2 +1,3 @@
 @import "@plane/tailwind-config/index.css";
+@import "@plane/tailwind-config/fonts.css";
 @import "../src/styles/react-day-picker.css";

packages/tailwind-config/fonts/Inter/LICENSE

@@ -0,0 +1 @@
+Inter[slnt,wght].ttf: Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)

packages/tailwind-config/fonts/index.css

@@ -0,0 +1,87 @@
+/* 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;
+}

packages/tailwind-config/package.json

@@ -15,11 +15,7 @@
   },
   "exports": {
     "./index.css": "./index.css",
+    "./fonts.css": "./fonts/index.css",
     "./postcss.config.js": "./postcss.config.js"
-  },
-  "dependencies": {
-    "@fontsource/ibm-plex-mono": "5.2.7",
-    "@fontsource/inter": "5.2.8",
-    "@fontsource/material-symbols-rounded": "5.2.30"
   }
 }

packages/tailwind-config/variables.css

@@ -1,17 +1,3 @@
-@import "@fontsource/inter/200.css";
-@import "@fontsource/inter/300.css";
-@import "@fontsource/inter/400.css";
-@import "@fontsource/inter/500.css";
-@import "@fontsource/inter/600.css";
-@import "@fontsource/inter/700.css";
-@import "@fontsource/inter/800.css";
-@import "@fontsource/ibm-plex-mono/200.css";
-@import "@fontsource/ibm-plex-mono/300.css";
-@import "@fontsource/ibm-plex-mono/400.css";
-@import "@fontsource/ibm-plex-mono/500.css";
-@import "@fontsource/ibm-plex-mono/600.css";
-@import "@fontsource/ibm-plex-mono/700.css";
-
 @custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *));
 @custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *));
 @custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *));
@@ -1154,31 +1140,6 @@
   }
 }
 
-/* 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("./fonts/material-symbols-rounded-v168-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-}
-
-@utility material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
-  font-weight: normal;
-  font-style: normal;
-  font-size: 1.5rem;
-  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);

packages/ui/src/dropdowns/custom-menu.tsx

@@ -418,7 +418,6 @@ function SubMenu(props: ICustomSubMenuProps) {
             {...attributes.popper}
             className={cn(
               "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 p-1 text-11",
-              "ring-1 ring-black ring-opacity-5", // Additional styling to make it stand out
               contentClassName
             )}
             data-prevent-outside-click="true"

packages/ui/styles/globals.css

@@ -1 +1,2 @@
 @import "@plane/tailwind-config/index.css";
+@import "@plane/tailwind-config/fonts.css";

pnpm-lock.yaml

@@ -1256,16 +1256,6 @@ importers:
         version: 5.8.3
 
   packages/tailwind-config:
-    dependencies:
-      '@fontsource/ibm-plex-mono':
-        specifier: 5.2.7
-        version: 5.2.7
-      '@fontsource/inter':
-        specifier: 5.2.8
-        version: 5.2.8
-      '@fontsource/material-symbols-rounded':
-        specifier: 5.2.30
-        version: 5.2.30
     devDependencies:
       '@tailwindcss/postcss':
         specifier: 4.1.17
@@ -2099,15 +2089,6 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
-  '@fontsource/ibm-plex-mono@5.2.7':
-    resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
-
-  '@fontsource/inter@5.2.8':
-    resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
-
-  '@fontsource/material-symbols-rounded@5.2.30':
-    resolution: {integrity: sha512-svIEPUzsJGdBMr0PwLH3wKndh7ZNB8IVlyKZPKvbGEX0f36gpGPzE2EZiXppb4UJgDUnyjphWzjJ28StuK6NCg==}
-
   '@formatjs/ecma402-abstract@2.3.4':
     resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
 
@@ -10167,12 +10148,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@fontsource/ibm-plex-mono@5.2.7': {}
-
-  '@fontsource/inter@5.2.8': {}
-
-  '@fontsource/material-symbols-rounded@5.2.30': {}
-
   '@formatjs/ecma402-abstract@2.3.4':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7