fix(theme): remove font (#11)

.changeset/slow-crabs-clean.md

@@ -0,0 +1,5 @@
+---
+"@interlay/theme": patch
+---
+
+fix/remove theme font

.eslintignore

@@ -1,4 +1,14 @@
+*.css
+.changeset
 dist
+scripts/*
+*.config.js
+.DS_Store
 node_modules
 coverage
 build
+!.storybook
+!.commitlintrc.cjs
+!.lintstagedrc
+!jest.config.js
+!tsup.config.ts

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Inter:bold,medium,light,regular" rel="stylesheet" />

.storybook/preview.tsx

@@ -1,8 +1,9 @@
 import type { Preview } from '@storybook/react';
+
 import React from 'react';
-import { InterlayUIProvider } from "../packages/core/system/src";
-import "../packages/core/theme/src/css/theme.interlay.css";
 
+import { InterlayUIProvider } from '../packages/core/system/src';
+import '../packages/core/theme/src/css/theme.interlay.css';
 
 const preview: Preview = {
   parameters: {
@@ -15,19 +16,19 @@ const preview: Preview = {
     }
   },
   decorators: [
-    (Story, {globals: {locale}}) => {
+    (Story, { globals: { locale } }) => {
       const direction =
         // @ts-ignore
-        locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined;
+        locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl' ? 'rtl' : undefined;
 
       return (
         <InterlayUIProvider locale={locale}>
-          <div lang={locale} dir={direction}>
+          <div dir={direction} lang={locale} style={{ fontFamily: 'Inter' }}>
             <Story />
           </div>
         </InterlayUIProvider>
       );
-    },
+    }
   ]
 };
 

packages/components/package.json

@@ -38,11 +38,11 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
+    "@interlay/coin-icons": "workspace:*",
     "@interlay/hooks": "workspace:*",
     "@interlay/icons": "workspace:*",
-    "@interlay/coin-icons": "workspace:*",
-    "@interlay/theme": "workspace:*",
     "@interlay/system": "workspace:*",
+    "@interlay/theme": "workspace:*",
     "@react-aria/accordion": "3.0.0-alpha.20",
     "@react-aria/breadcrumbs": "^3.5.4",
     "@react-aria/button": "^3.8.1",
@@ -76,7 +76,6 @@
     "@react-stately/toggle": "^3.6.1",
     "@react-stately/tooltip": "^3.4.3",
     "@react-stately/tree": "^3.7.1",
-    "@react-types/meter": "^3.3.3",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
@@ -85,14 +84,16 @@
     "styled-components": ">=6.0.0"
   },
   "devDependencies": {
+    "@interlay/test-utils": "workspace:*",
     "@react-types/grid": "^3.2.0",
+    "@react-types/meter": "^3.3.3",
     "@react-types/shared": "^3.19.0",
+    "@react-types/tabs": "^3.3.2",
     "@types/react-transition-group": "^4.4.6",
     "@types/styled-components": "^5.1.26",
     "clean-package": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@interlay/test-utils": "workspace:*",
     "styled-components": "^6.0.7"
   },
   "clean-package": "../../clean-package.config.json"

packages/core/theme/src/css/theme.base.css

@@ -1,38 +1,11 @@
 @import url('reset.css');
 
-@font-face {
-  font-family: 'inter';
-  src: url('../fonts/inter/Inter-Light.ttf') format('truetype');
-  font-weight: 300; /* light */
-  font-style: normal;
-}
-@font-face {
-  font-family: 'inter';
-  src: url('../fonts/inter/Inter-Regular.ttf') format('truetype');
-  font-weight: 400; /* regular */
-  font-style: normal;
-}
-@font-face {
-  font-family: 'inter';
-  src: url('../fonts/inter/Inter-Medium.ttf') format('truetype');
-  font-weight: 500; /* medium */
-  font-style: normal;
-}
-@font-face {
-  font-family: 'inter';
-  src: url('../fonts/inter/Inter-Bold.ttf') format('truetype');
-  font-weight: 700; /* bold */
-  font-style: normal;
-}
-
 * {
   box-sizing: border-box;
-  font-family: 'inter';
+  font-family: inherit;
 }
 
 :root {
-  --fonts-primary: 'inter';
-
   --font-weights-light: 300;
   --font-weights-book: 400;
   --font-weights-medium: 500;