fix: readme, delete injectFonts

ui-proto/theme/README.md

@@ -4,19 +4,29 @@
 
 ```typescript jsx
 import { ThemeProvider as ProtoThemeProvider } from '@atls-ui-proto/theme'
-import { GlobalStyles }                        from './global.styles' / локальные стили под проект
+import { GlobalStyles }                        from './global.styles' // локальные cтили под проект
 
 export const ThemeProvider = ({ children }) => (
   <>
-    <GlobalStyles />
+    <GlobalStyles/>
     <EmotionThemeProvider theme={theme}>
-      <ProtoThemeProvider children={children} />
+      <ProtoThemeProvider children={children}/>
     </EmotionThemeProvider>
   </>
 )
 ```
 
-## `injectFontFaces` - self-host шрифты
+## Self-host шрифты
+
+В theme проекта добавить файл fonts.d.ts
+
+```ts
+declare module '*.ttf'
+declare module '*.woff'
+declare module '*.woff2'
+declare module '*.eot'
+declare module '*.otf'
+```
 
 Кастомные шрифты складывать в такую структуру:
 
@@ -25,30 +35,47 @@ export const ThemeProvider = ({ children }) => (
     └── fonts
         ├── index.ts
         └── Roboto
-            ├── index.ts
-            └── Roboto-Regular.ttf
+            ├── Roboto-Regular.ttf
+            └── Roboto-Bold.ttf
+
+```
+
+И экспортировать их как модули:
+
+```tsx
+fonts / index.ts
+
+import robotoRegular from './Roboto/Roboto-Regular.ttf'
+import robotoBold    from './Roboto/Roboto-Bold.ttf'
+
+export { robotoRegular, robotoBold }
 ```
 
 Добавить в `GlobalStyles`:
 
 ```typescript jsx
-import { injectFontFaces } from '@atls-ui-proto/theme'
-import * as fonts          from './fonts'     // импортированные шрифты
-
-export const GlobalStyles = () => {
-  injectFontFaces([
-    {
-       src: fonts.RobotoRegular,     // импортированный файл как модуль
-       fileExt: 'ttf',               // расширение файла
-       fileName: 'Roboto-Regular',   // наименование файла
-       weight: 400,                  // вес
-    }
-  ])
-
-  return (...)
-}
+import { robotoRegular } from './fonts'     // импортированные шрифты
+import { robotoBold }    from './fonts'     // импортированные шрифты
+
+export const GlobalStyles = () => (
+  <Global styles={css`
+        @font-face {
+          font-family: 'Roboto-Regular';
+          src: local('Roboto-Regular') url(${robotoRegular}) format('truetype');
+        }
+        
+        @font-face {
+          font-family: 'Roboto-Bold';
+          src: local('Roboto-Bold') url(${robotoBold}) format('truetype');
+        }
+      `}
+  />
+)
 ```
 
+Тип
+для `format` [смотреть тут.](https://css-tricks.com/snippets/css/using-font-face-in-css/#aa-deepest-possible-browser-support)
+
 Добавить `fonts.ts`
 
 ```
@@ -60,7 +87,8 @@ export const GlobalStyles = () => {
 
 ```typescript
 export const fonts = {
-  primary: 'Roboto-Regular', // совпадает с fileName
+  primary: 'Roboto-Regular',
+  secondary: 'Roboto-Bold',
 }
 ```
 
@@ -80,12 +108,11 @@ module.exports = {
     config.module.rules.push({
       test: /\.(woff|woff2|eot|ttf|otf)$/i,
       type: 'asset/resource',
+      generator: {
+        filename: 'static/media/fonts/[name][ext]'
+      }
     })
 
-    config.resolve.alias['@emotion/react'] = require.resolve('@emotion/react')
-    config.resolve.alias['@emotion/styled'] = require.resolve('@emotion/styled')
-    config.resolve.alias['@emotion/css'] = require.resolve('@emotion/css')
-
     return config
   },
 }

ui-proto/theme/src/index.ts

@@ -1,5 +1,5 @@
-export * from './theme.provider'
-export * from './inject-fonts'
-export type { colors } from './theme'
-export type { fontSizes } from './theme'
-export type { fontWeights } from './theme'
+export { ThemeProvider } from './theme.provider'
+export { colors }        from './theme'
+export { fonts }         from './theme'
+export { fontSizes }     from './theme'
+export { fontWeights }   from './theme'