Removed font files import from mds

There is an inconsistence between libraries as we are importing the default fonts in the applicaions by using GlobalStyles. The disadvantage of this is that there is a flickering between renders in the initial load until the fonts get loaded.

This PR removes de default font imports by levearing this to the application where you are going to use mds.

Signed-off-by: Benjamin Perez <[email protected]>

README.md

@@ -10,6 +10,115 @@ You can test this package using the embedded storybook. Please follow these step
 2. Start Story book by running `yarn storybook`
 3. Open any browser and go to `http://localhost:6006`
 
+## How to implement in your application
+
+To implement the MinIO Design System in your application, you can follow these steps:
+
+1. Install the package by running `yarn add http://github.com/minio/mds#[Version]`. Replace `[Version]` with the version you want to install.
+2. Import the required Geist & Geist Mono fonts in your application using your preferred method, Font Variants described as follows: 
+
+```css
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistBoldWoff2}) format("woff2")`,
+      fontWeight: "bold",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistMediumWoff2}) format("woff2")`,
+      fontWeight: 500,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistSemiBoldWoff2}) format("woff2")`,
+      fontWeight: 600,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistLightWoff2}) format("woff2")`,
+      fontWeight: 300,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistUltraLightWoff2}) format("woff2")`,
+      fontWeight: 200,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistBlackWoff2}) format('woff2')`,
+      fontWeight: 900,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistRegularWoff2}) format('woff2')`,
+      fontWeight: "normal",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "Geist",
+      src: `url(${GeistThinWoff2}) format('woff2')`,
+      fontWeight: 100,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+  {
+    "@font-face": {
+      fontFamily: "GeistMono",
+      src: `url(${GeistMonoRegularWoff2}) format('woff2')`,
+      fontWeight: 400,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+    },
+  },
+
+```
+3. Create an `mds.d.ts` file in the root of your project and add the following code and import it into your tsconfig.json file:
+
+```typescript
+import { ThemeDefinition } from "mds";
+
+import "@emotion/react";
+
+declare module "@emotion/react" {
+  export type Theme = ThemeDefinition;
+}
+```
+This is required to have the correct types for the theme object in your application.
+
+4. Import the required components in your application. For example, to import the Button component, you can use `import { Button } from 'mds'`.
+5. Use the imported component in your application.
+
+
+
 ## Build distribution files
 
 To create distribution files you can run `yarn build` or `make build` in source folder. This will create the required dist folders.

src/components/GlobalStyles/index.tsx

@@ -16,100 +16,6 @@
 
 import { css, Global, useTheme } from "@emotion/react";
 
-import GeistBlackWoff2 from "../assets/fonts/Geist/Geist-Black.woff2";
-import GeistBoldWoff2 from "../assets/fonts/Geist/Geist-Bold.woff2";
-import GeistLightWoff2 from "../assets/fonts/Geist/Geist-Light.woff2";
-import GeistMediumWoff2 from "../assets/fonts/Geist/Geist-Medium.woff2";
-import GeistRegularWoff2 from "../assets/fonts/Geist/Geist-Regular.woff2";
-import GeistSemiBoldWoff2 from "../assets/fonts/Geist/Geist-SemiBold.woff2";
-import GeistThinWoff2 from "../assets/fonts/Geist/Geist-Thin.woff2";
-import GeistUltraLightWoff2 from "../assets/fonts/Geist/Geist-UltraLight.woff2";
-import GeistMonoRegularWoff2 from "../assets/fonts/Geist/GeistMono-Regular.woff2";
-
-const geistFonts = css([
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistBoldWoff2}) format("woff2")`,
-      fontWeight: "bold",
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistMediumWoff2}) format("woff2")`,
-      fontWeight: 500,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistSemiBoldWoff2}) format("woff2")`,
-      fontWeight: 600,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistLightWoff2}) format("woff2")`,
-      fontWeight: 300,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistUltraLightWoff2}) format("woff2")`,
-      fontWeight: 200,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistBlackWoff2}) format('woff2')`,
-      fontWeight: 900,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistRegularWoff2}) format('woff2')`,
-      fontWeight: "normal",
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "Geist",
-      src: `url(${GeistThinWoff2}) format('woff2')`,
-      fontWeight: 100,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-  {
-    "@font-face": {
-      fontFamily: "GeistMono",
-      src: `url(${GeistMonoRegularWoff2}) format('woff2')`,
-      fontWeight: 400,
-      fontStyle: "normal",
-      fontDisplay: "swap",
-    },
-  },
-]);
-
 const GlobalStyles = () => {
   const theme = useTheme();
 
@@ -299,7 +205,7 @@ const GlobalStyles = () => {
       },
     });
 
-  return <Global styles={[geistFonts, globalCSS]} />;
+  return <Global styles={[globalCSS]} />;
 };
 
 export default GlobalStyles;