diff --git a/apps/admin/styles/globals.css b/apps/admin/styles/globals.css index 7f7f2483a57..e54456f00ae 100644 --- a/apps/admin/styles/globals.css +++ b/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 */ diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css index ba7f052d193..cd448373c1b 100644 --- a/apps/space/styles/globals.css +++ b/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"; diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index ab520abe293..0d66dd89cfd 100644 --- a/apps/web/styles/globals.css +++ b/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"; diff --git a/packages/propel/.storybook/tailwind.css b/packages/propel/.storybook/tailwind.css index aca4ed08ea0..eacec4b5f28 100644 --- a/packages/propel/.storybook/tailwind.css +++ b/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"; diff --git a/packages/tailwind-config/fonts/Inter/LICENSE b/packages/tailwind-config/fonts/Inter/LICENSE new file mode 100644 index 00000000000..46d45c6a1b0 --- /dev/null +++ b/packages/tailwind-config/fonts/Inter/LICENSE @@ -0,0 +1 @@ +Inter[slnt,wght].ttf: Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter) \ No newline at end of file diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-200.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-200.woff2 new file mode 100644 index 00000000000..c59d2397ed7 Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-200.woff2 differ diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-300.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-300.woff2 new file mode 100644 index 00000000000..2d99c5bcfaf Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-300.woff2 differ diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-500.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-500.woff2 new file mode 100644 index 00000000000..21db79416d8 Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-500.woff2 differ diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-600.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-600.woff2 new file mode 100644 index 00000000000..da1c039b755 Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-600.woff2 differ diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-700.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-700.woff2 new file mode 100644 index 00000000000..775f7575e65 Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-700.woff2 differ diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-800.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-800.woff2 new file mode 100644 index 00000000000..39b9673d88b Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-800.woff2 differ diff --git a/packages/tailwind-config/fonts/Inter/inter-v13-latin-regular.woff2 b/packages/tailwind-config/fonts/Inter/inter-v13-latin-regular.woff2 new file mode 100644 index 00000000000..d228a4af2fc Binary files /dev/null and b/packages/tailwind-config/fonts/Inter/inter-v13-latin-regular.woff2 differ diff --git a/packages/tailwind-config/fonts/LICENSE.txt b/packages/tailwind-config/fonts/Material-Symbols-Rounded/LICENSE.txt similarity index 100% rename from packages/tailwind-config/fonts/LICENSE.txt rename to packages/tailwind-config/fonts/Material-Symbols-Rounded/LICENSE.txt diff --git a/packages/tailwind-config/fonts/material-symbols-rounded-v168-latin-regular.woff2 b/packages/tailwind-config/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 similarity index 100% rename from packages/tailwind-config/fonts/material-symbols-rounded-v168-latin-regular.woff2 rename to packages/tailwind-config/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2 diff --git a/packages/tailwind-config/fonts/index.css b/packages/tailwind-config/fonts/index.css new file mode 100644 index 00000000000..dd5c519aa29 --- /dev/null +++ b/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; +} diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json index 920a16c4256..6647b09c969 100644 --- a/packages/tailwind-config/package.json +++ b/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" } } diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css index 4facc275f2f..e8e458b515e 100644 --- a/packages/tailwind-config/variables.css +++ b/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"] *)); @@ -1151,31 +1137,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); diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx index 12503bc462c..cd68872e554 100644 --- a/packages/ui/src/dropdowns/custom-menu.tsx +++ b/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" diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css index 434ca7f9100..3d3d7597f58 100644 --- a/packages/ui/styles/globals.css +++ b/packages/ui/styles/globals.css @@ -1 +1,2 @@ @import "@plane/tailwind-config/index.css"; +@import "@plane/tailwind-config/fonts.css"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1e1eeb46fdd..231d572a054 100644 --- a/pnpm-lock.yaml +++ b/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