@alveole/theme 0.40.0 → 0.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +124 -8
  2. package/dist/ThemeProvider.d.ts.map +1 -1
  3. package/dist/ThemeProvider.js +2 -1
  4. package/dist/constants/Font.d.ts +10 -2
  5. package/dist/constants/Font.d.ts.map +1 -1
  6. package/dist/constants/Font.js +20 -4
  7. package/dist/constants/Typography.d.ts +63 -35
  8. package/dist/constants/Typography.d.ts.map +1 -1
  9. package/dist/constants/Typography.js +29 -29
  10. package/dist/helpers/injectVariableCSS.d.ts +1 -0
  11. package/dist/helpers/injectVariableCSS.d.ts.map +1 -1
  12. package/dist/helpers/injectVariableCSS.js +18 -0
  13. package/dist/type/Typography.d.ts +1 -1
  14. package/dist/type/Typography.d.ts.map +1 -1
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -25,7 +25,7 @@ export default function App() {
25
25
 
26
26
  function Screen() {
27
27
  const { spacing } = useTheme();
28
- return <Box style={{ margin: spacing('100') }}>Contenu</Box>;
28
+ return <Box style={{ margin: spacing('2W') }}>Contenu</Box>;
29
29
  }
30
30
  ```
31
31
 
@@ -35,8 +35,10 @@ function Screen() {
35
35
  // Exemple.styles.tsx
36
36
  import { makeStyles } from '@alveole/theme';
37
37
 
38
- export const useStyles = makeStyles(({ spacing }) => ({
39
- container: { padding: spacing('150') },
38
+ export const useStyles = makeStyles(({ spacing, text, color }) => ({
39
+ container: { padding: spacing('3W') },
40
+ title: text.Titres['H3 - MD'],
41
+ label: { color: color.Neutre[700] },
40
42
  }));
41
43
  ```
42
44
 
@@ -50,6 +52,118 @@ function Exemple() {
50
52
  }
51
53
  ```
52
54
 
55
+ ## Spacing
56
+
57
+ Les clés de spacing suivent une nomenclature `V` (verticals, multiples de 2px) et `W` (horizontals, multiples de 8px) :
58
+
59
+ | Clé | px |
60
+ | ------ | --- |
61
+ | `0V` | 0 |
62
+ | `0,5V` | 2 |
63
+ | `1V` | 4 |
64
+ | `1,5V` | 6 |
65
+ | `1W` | 8 |
66
+ | `3V` | 12 |
67
+ | `2W` | 16 |
68
+ | `3W` | 24 |
69
+ | `4W` | 32 |
70
+ | `5W` | 40 |
71
+ | `6W` | 48 |
72
+ | `8W` | 64 |
73
+ | `12W` | 96 |
74
+ | `15W` | 120 |
75
+
76
+ ```tsx
77
+ const { spacing, externalPadding } = useTheme();
78
+
79
+ spacing('3W'); // 24
80
+ externalPadding(); // 16 sur mobile, 24 sur desktop
81
+ ```
82
+
83
+ ## Typographies
84
+
85
+ Les styles de texte sont organisés en trois catégories :
86
+
87
+ ```tsx
88
+ const { text } = useTheme();
89
+
90
+ // Titres alternatifs (Barlow Bold)
91
+ text['Titres alternatifs'].XS; // 48px
92
+ text['Titres alternatifs'].XL; // 80px
93
+
94
+ // Titres (Inter Bold — tailles adaptées mobile/desktop)
95
+ text.Titres['H1 - XL']; // Barlow SemiBold, 40px desktop / 32px mobile
96
+ text.Titres['H3 - MD']; // 28px desktop / 24px mobile
97
+ text.Titres['H6 - XXS']; // 20px desktop / 18px mobile
98
+
99
+ // Corps de texte
100
+ text['Corps de texte'].SM.Regular; // Inter Regular, 14px
101
+ text['Corps de texte'].MD.SemiBold; // Inter SemiBold, 16px
102
+ text['Corps de texte'].LG.Medium; // Inter Medium, 18px
103
+ ```
104
+
105
+ ## Fonts
106
+
107
+ Les fonts sont chargées automatiquement par `ThemeProvider`. Deux familles sont disponibles : **Inter** (corps de texte) et **Barlow** (titres).
108
+
109
+ Sur le web, les fonts sont injectées via des `@font-face` CSS standards (`font-family: Inter; font-weight: 500`). Sur native, elles utilisent le système expo-font.
110
+
111
+ ```tsx
112
+ const { font } = useTheme();
113
+
114
+ font['Inter-Regular']; // 'Inter-Regular' (native) ou utilisé via font-weight (web)
115
+ font['Barlow-Bold'];
116
+ ```
117
+
118
+ ### fontStyle helper
119
+
120
+ Pour créer des styles typés avec la bonne font selon la plateforme :
121
+
122
+ ```tsx
123
+ import { fontStyle } from '@alveole/theme';
124
+
125
+ const style = {
126
+ ...fontStyle('Inter-Bold'), // { fontFamily: 'Inter', fontWeight: '600' } sur web
127
+ fontSize: 16, // { fontFamily: 'Inter-Bold' } sur native
128
+ };
129
+ ```
130
+
131
+ ## Radius
132
+
133
+ ```tsx
134
+ const { radius } = useTheme();
135
+
136
+ radius('sm'); // 4
137
+ radius('md'); // 6
138
+ radius('lg'); // 10
139
+ radius('full'); // 99999
140
+ ```
141
+
142
+ ## Breakpoints & variante
143
+
144
+ ```tsx
145
+ const { variant, isVariant } = useTheme();
146
+
147
+ variant; // 'mobile' | 'tablet' | 'desktop'
148
+ isVariant('mobile'); // boolean
149
+ ```
150
+
151
+ | Variante | Largeur |
152
+ | --------- | ------------- |
153
+ | `mobile` | < 768px |
154
+ | `tablet` | 768px – 991px |
155
+ | `desktop` | ≥ 992px |
156
+
157
+ ## Couleurs
158
+
159
+ ```tsx
160
+ const { color } = useTheme();
161
+
162
+ color.Neutre[700];
163
+ color.Mandarine[50];
164
+ color.alpha(color.Neutre[900], 0.5); // 'rgba(55, 58, 63, 0.5)'
165
+ ```
166
+
53
167
  ## Personnaliser la palette
54
168
 
55
169
  ```tsx
@@ -63,7 +177,7 @@ function Exemple() {
63
177
  </ThemeProvider>
64
178
  ```
65
179
 
66
- > (Recommandé) Vous pouvez définir un fichier de configuration à la racine de votre projet `alveole.config.js` afin de surcharger les tokens du thème.
180
+ > (Recommandé) Vous pouvez définir un fichier `alveole.config.js` à la racine pour centraliser la surcharge :
67
181
 
68
182
  ```js
69
183
  const { Colors } = require('@alveole/theme');
@@ -86,18 +200,17 @@ module.exports = { palette };
86
200
 
87
201
  // Utiliser dans le provider :
88
202
  // import config from '@/alveole.config.js';
89
- // ...
90
203
  // <ThemeProvider color={config.palette}>
91
204
  ```
92
205
 
93
206
  ## Variables CSS (web)
94
207
 
95
- Sur le web, les variables CSS sont injectées automatiquement si besoin par une lib web.
208
+ Sur le web, `ThemeProvider` injecte automatiquement des variables CSS pour les couleurs, l'espacement et les fonts :
96
209
 
97
210
  ```css
98
211
  /* Spacing */
99
- var(--spacing-050)
100
- var(--spacing-150)
212
+ var(--spacing-2W)
213
+ var(--spacing-3W)
101
214
 
102
215
  /* Colors */
103
216
  var(--color-Neutre-200)
@@ -109,3 +222,6 @@ var(--color-Mandarine-50)
109
222
  - Typage du thème : `src/type/Theme.ts`
110
223
  - Palette : `src/constants/Palette.ts`
111
224
  - Typographies : `src/constants/Typography.ts`
225
+ - Spacing : `src/constants/Spacing.ts`
226
+ - Radius : `src/constants/Radius.ts`
227
+ - Fonts : `src/constants/Font.ts`
package/dist/ThemeProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAChD,aAAa,GAAG;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAyBtD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAChD,aAAa,GAAG;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBA0BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}
package/dist/ThemeProvider.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as SystemUI from 'expo-system-ui';
3
3
  import React, { createContext, useContext } from 'react';
4
4
  import { Platform } from 'react-native';
5
- import { injectFontSmoothingCSS, injectVariableCSS } from './helpers/injectVariableCSS';
5
+ import { injectFontFaceCSS, injectFontSmoothingCSS, injectVariableCSS } from './helpers/injectVariableCSS';
6
6
  import { useThemeBuilder } from './helpers/useThemeBuilder';
7
7
  import { ThemeProviderLoader } from './ThemeProviderLoader';
8
8
  const ThemeContext = createContext(null);
@@ -20,6 +20,7 @@ export const ThemeProvider = (props) => {
20
20
  if (Platform.OS === 'web') {
21
21
  injectVariableCSS(theme);
22
22
  injectFontSmoothingCSS();
23
+ injectFontFaceCSS();
23
24
  }
24
25
  }, []);
25
26
  React.useEffect(() => {
package/dist/constants/Font.d.ts CHANGED
@@ -1,15 +1,23 @@
1
+ import { TextStyle } from 'react-native';
1
2
  export declare const FontsMap: {
2
3
  readonly 'Barlow-Light': any;
3
4
  readonly 'Barlow-Regular': any;
4
5
  readonly 'Barlow-Medium': any;
5
- readonly 'Barlow-SemiBold': any;
6
6
  readonly 'Barlow-Bold': any;
7
7
  readonly 'Inter-Light': any;
8
8
  readonly 'Inter-Regular': any;
9
9
  readonly 'Inter-Medium': any;
10
- readonly 'Inter-SemiBold': any;
11
10
  readonly 'Inter-Bold': any;
12
11
  };
13
12
  export type Font = keyof typeof FontsMap;
14
13
  export declare const Fonts: Record<Font, Font>;
14
+ export declare const FontWeightMap: Record<Font, {
15
+ family: string;
16
+ familyWithFallback: string;
17
+ weight: NonNullable<TextStyle['fontWeight']>;
18
+ }>;
19
+ export declare const fontStyle: (font: Font) => {
20
+ fontFamily: string;
21
+ fontWeight?: TextStyle["fontWeight"];
22
+ };
15
23
  //# sourceMappingURL=Font.d.ts.map
package/dist/constants/Font.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Font.d.ts","sourceRoot":"","sources":["../../src/constants/Font.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;CAaX,CAAC;AAGX,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,QAAQ,CAAC;AACzC,eAAO,MAAM,KAAK,EAA0E,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC"}
1
+ {"version":3,"file":"Font.d.ts","sourceRoot":"","sources":["../../src/constants/Font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,QAAQ;;;;;;;;;CAWX,CAAC;AAGX,MAAM,MAAM,IAAI,GAAG,MAAM,OAAO,QAAQ,CAAC;AACzC,eAAO,MAAM,KAAK,EAA0E,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAI/G,eAAO,MAAM,aAAa,EAAE,MAAM,CAChC,IAAI,EACJ;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,kBAAkB,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAA;CAAE,CAU7F,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,KAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;CAIhG,CAAC"}
package/dist/constants/Font.js CHANGED
@@ -1,15 +1,31 @@
1
+ import { Platform } from 'react-native';
1
2
  export const FontsMap = {
2
3
  // Barlow
3
4
  'Barlow-Light': require('../../assets/fonts/Barlow/Barlow-Light.ttf'),
4
5
  'Barlow-Regular': require('../../assets/fonts/Barlow/Barlow-Regular.ttf'),
5
6
  'Barlow-Medium': require('../../assets/fonts/Barlow/Barlow-Medium.ttf'),
6
- 'Barlow-SemiBold': require('../../assets/fonts/Barlow/Barlow-SemiBold.ttf'),
7
- 'Barlow-Bold': require('../../assets/fonts/Barlow/Barlow-Bold.ttf'),
7
+ 'Barlow-Bold': require('../../assets/fonts/Barlow/Barlow-SemiBold.ttf'),
8
8
  // Inter
9
9
  'Inter-Light': require('../../assets/fonts/Inter/Inter-Light.ttf'),
10
10
  'Inter-Regular': require('../../assets/fonts/Inter/Inter-Regular.ttf'),
11
11
  'Inter-Medium': require('../../assets/fonts/Inter/Inter-Medium.ttf'),
12
- 'Inter-SemiBold': require('../../assets/fonts/Inter/Inter-SemiBold.ttf'),
13
- 'Inter-Bold': require('../../assets/fonts/Inter/Inter-Bold.ttf'),
12
+ 'Inter-Bold': require('../../assets/fonts/Inter/Inter-SemiBold.ttf'),
14
13
  };
15
14
  export const Fonts = Object.fromEntries(Object.keys(FontsMap).map(font => [font, font]));
15
+ const SANS_SERIF_FALLBACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif";
16
+ export const FontWeightMap = {
17
+ 'Barlow-Light': { family: 'Barlow', familyWithFallback: `Barlow, ${SANS_SERIF_FALLBACK}`, weight: '300' },
18
+ 'Barlow-Regular': { family: 'Barlow', familyWithFallback: `Barlow, ${SANS_SERIF_FALLBACK}`, weight: '400' },
19
+ 'Barlow-Medium': { family: 'Barlow', familyWithFallback: `Barlow, ${SANS_SERIF_FALLBACK}`, weight: '500' },
20
+ 'Barlow-Bold': { family: 'Barlow', familyWithFallback: `Barlow, ${SANS_SERIF_FALLBACK}`, weight: '600' },
21
+ 'Inter-Light': { family: 'Inter', familyWithFallback: `Inter, ${SANS_SERIF_FALLBACK}`, weight: '300' },
22
+ 'Inter-Regular': { family: 'Inter', familyWithFallback: `Inter, ${SANS_SERIF_FALLBACK}`, weight: '400' },
23
+ 'Inter-Medium': { family: 'Inter', familyWithFallback: `Inter, ${SANS_SERIF_FALLBACK}`, weight: '500' },
24
+ 'Inter-Bold': { family: 'Inter', familyWithFallback: `Inter, ${SANS_SERIF_FALLBACK}`, weight: '600' },
25
+ };
26
+ export const fontStyle = (font) => {
27
+ if (Platform.OS !== 'web')
28
+ return { fontFamily: font };
29
+ const { familyWithFallback, weight } = FontWeightMap[font];
30
+ return { fontFamily: familyWithFallback, fontWeight: weight };
31
+ };
package/dist/constants/Typography.d.ts CHANGED
@@ -2,193 +2,221 @@ export declare const isMobile: boolean;
2
2
  export declare const CustomTypography: {
3
3
  readonly 'Titres alternatifs': {
4
4
  readonly XS: {
5
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
6
5
  readonly fontSize: 48;
7
6
  readonly lineHeight: 56;
8
7
  readonly letterSpacing: 0;
8
+ readonly fontFamily: string;
9
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
9
10
  };
10
11
  readonly SM: {
11
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
12
12
  readonly fontSize: 56;
13
13
  readonly lineHeight: 64;
14
14
  readonly letterSpacing: 0;
15
+ readonly fontFamily: string;
16
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
15
17
  };
16
18
  readonly MD: {
17
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
18
19
  readonly fontSize: 64;
19
20
  readonly lineHeight: 72;
20
21
  readonly letterSpacing: 0;
22
+ readonly fontFamily: string;
23
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
21
24
  };
22
25
  readonly LG: {
23
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
24
26
  readonly fontSize: 72;
25
27
  readonly lineHeight: 80;
26
28
  readonly letterSpacing: 0;
29
+ readonly fontFamily: string;
30
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
27
31
  };
28
32
  readonly XL: {
29
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
30
33
  readonly fontSize: 80;
31
34
  readonly lineHeight: 88;
32
35
  readonly letterSpacing: 0;
36
+ readonly fontFamily: string;
37
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
33
38
  };
34
39
  };
35
40
  /** Les titres sont de tailles distinctes selon la platform (Mobile/Web) - Pas de React ici */
36
41
  readonly Titres: {
37
42
  /** Font size: 18/20 */
38
43
  readonly 'H6 - XXS': {
39
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
40
44
  readonly fontSize: 18 | 20;
41
45
  readonly lineHeight: 24 | 28;
42
46
  readonly letterSpacing: 0;
47
+ readonly fontFamily: string;
48
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
43
49
  };
44
50
  /** Font size: 20/22 */
45
51
  readonly 'H5 - XS': {
46
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
47
52
  readonly fontSize: 20 | 22;
48
53
  readonly lineHeight: 28;
49
54
  readonly letterSpacing: 0;
55
+ readonly fontFamily: string;
56
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
50
57
  };
51
58
  /** Font size: 22/24 */
52
59
  readonly 'H4 - SM': {
53
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
54
60
  readonly fontSize: 24 | 22;
55
61
  readonly lineHeight: 28 | 32;
56
62
  readonly letterSpacing: 0;
63
+ readonly fontFamily: string;
64
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
57
65
  };
58
66
  /** Font size: 24/28 */
59
67
  readonly 'H3 - MD': {
60
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
61
68
  readonly fontSize: 24 | 28;
62
69
  readonly lineHeight: 36 | 32;
63
70
  readonly letterSpacing: 0;
71
+ readonly fontFamily: string;
72
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
64
73
  };
65
74
  /** Font size: 28/32 */
66
75
  readonly 'H2 - LG': {
67
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
68
76
  readonly fontSize: 28 | 32;
69
77
  readonly lineHeight: 36 | 32;
70
78
  readonly letterSpacing: 0;
79
+ readonly fontFamily: string;
80
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
71
81
  };
72
82
  /** Font size: 40/48 */
73
83
  readonly 'H1 - XL': {
74
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
75
84
  readonly fontSize: 32 | 40;
76
85
  readonly lineHeight: 48 | 40;
77
86
  readonly letterSpacing: 0;
87
+ readonly fontFamily: string;
88
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
78
89
  };
79
90
  };
80
91
  readonly 'Corps de texte': {
81
92
  readonly XS: {
82
- readonly Regular: {
83
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
93
+ readonly CapsBold: {
84
94
  readonly fontSize: 12;
85
95
  readonly lineHeight: 20;
86
96
  readonly letterSpacing: 0;
97
+ readonly textTransform: "uppercase";
87
98
  };
88
- readonly Bold: {
89
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
99
+ readonly SemiBold: {
90
100
  readonly fontSize: 12;
91
101
  readonly lineHeight: 20;
92
102
  readonly letterSpacing: 0;
103
+ readonly fontFamily: string;
104
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
93
105
  };
94
- readonly Caps: {
95
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
106
+ readonly fontFamily: string;
107
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
108
+ readonly Regular: {
96
109
  readonly fontSize: 12;
97
110
  readonly lineHeight: 20;
98
111
  readonly letterSpacing: 0;
99
- readonly textTransform: "uppercase";
112
+ readonly fontFamily: string;
113
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
100
114
  };
101
- readonly CapsBold: {
102
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
115
+ readonly Bold: {
103
116
  readonly fontSize: 12;
104
117
  readonly lineHeight: 20;
105
118
  readonly letterSpacing: 0;
106
- readonly textTransform: "uppercase";
119
+ readonly fontFamily: string;
120
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
107
121
  };
108
- readonly SemiBold: {
109
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
122
+ readonly Caps: {
110
123
  readonly fontSize: 12;
111
124
  readonly lineHeight: 20;
112
125
  readonly letterSpacing: 0;
126
+ readonly textTransform: "uppercase";
127
+ readonly fontFamily: string;
128
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
113
129
  };
114
130
  };
115
131
  readonly SM: {
116
132
  readonly Regular: {
117
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
118
133
  readonly fontSize: 14;
119
134
  readonly lineHeight: 20;
120
135
  readonly letterSpacing: 0;
136
+ readonly fontFamily: string;
137
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
121
138
  };
122
139
  readonly Medium: {
123
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
124
140
  readonly fontSize: 14;
125
141
  readonly lineHeight: 20;
126
142
  readonly letterSpacing: 0;
143
+ readonly fontFamily: string;
144
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
127
145
  };
128
146
  readonly SemiBold: {
129
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
130
147
  readonly fontSize: 14;
131
148
  readonly lineHeight: 20;
132
149
  readonly letterSpacing: 0;
150
+ readonly fontFamily: string;
151
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
133
152
  };
134
153
  readonly Bold: {
135
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
136
154
  readonly fontSize: 14;
137
155
  readonly lineHeight: 20;
138
156
  readonly letterSpacing: 0;
157
+ readonly fontFamily: string;
158
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
139
159
  };
140
160
  readonly CapsBold: {
141
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
142
161
  readonly fontSize: 14;
143
162
  readonly lineHeight: 20;
144
163
  readonly letterSpacing: 0;
145
164
  readonly textTransform: "uppercase";
165
+ readonly fontFamily: string;
166
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
146
167
  };
147
168
  };
148
169
  readonly MD: {
149
170
  readonly Regular: {
150
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
151
171
  readonly fontSize: 16;
152
172
  readonly lineHeight: 24;
153
173
  readonly letterSpacing: 0;
174
+ readonly fontFamily: string;
175
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
154
176
  };
155
177
  readonly Medium: {
156
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
157
178
  readonly fontSize: 16;
158
179
  readonly lineHeight: 24;
159
180
  readonly letterSpacing: 0;
181
+ readonly fontFamily: string;
182
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
160
183
  };
161
184
  readonly SemiBold: {
162
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
163
185
  readonly fontSize: 16;
164
186
  readonly lineHeight: 24;
165
187
  readonly letterSpacing: 0;
188
+ readonly fontFamily: string;
189
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
166
190
  };
167
191
  readonly Bold: {
168
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
169
192
  readonly fontSize: 16;
170
193
  readonly lineHeight: 24;
171
194
  readonly letterSpacing: 0;
195
+ readonly fontFamily: string;
196
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
172
197
  };
173
198
  };
174
199
  readonly LG: {
175
200
  readonly Regular: {
176
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
177
201
  readonly fontSize: 18;
178
202
  readonly lineHeight: 28;
179
203
  readonly letterSpacing: 0;
204
+ readonly fontFamily: string;
205
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
180
206
  };
181
207
  readonly Medium: {
182
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
183
208
  readonly fontSize: 18;
184
209
  readonly lineHeight: 28;
185
210
  readonly letterSpacing: 0;
211
+ readonly fontFamily: string;
212
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
186
213
  };
187
214
  readonly SemiBold: {
188
- readonly fontFamily: "Barlow-Light" | "Barlow-Regular" | "Barlow-Medium" | "Barlow-SemiBold" | "Barlow-Bold" | "Inter-Light" | "Inter-Regular" | "Inter-Medium" | "Inter-SemiBold" | "Inter-Bold";
189
215
  readonly fontSize: 18;
190
216
  readonly lineHeight: 28;
191
217
  readonly letterSpacing: 0;
218
+ readonly fontFamily: string;
219
+ readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
192
220
  };
193
221
  };
194
222
  };
package/dist/constants/Typography.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/constants/Typography.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,SAAyF,CAAC;AAE/G,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkC3B,8FAA8F;;QAE5F,uBAAuB;;;;;;;QAOvB,uBAAuB;;;;;;;QAOvB,uBAAuB;;;;;;;QAOvB,uBAAuB;;;;;;;QAOvB,uBAAuB;;;;;;;QAOvB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAC"}
1
+ {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/constants/Typography.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,SAAyF,CAAC;AAE/G,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkC3B,8FAA8F;;QAE5F,uBAAuB;;;;;;;;QAOvB,uBAAuB;;;;;;;;QAOvB,uBAAuB;;;;;;;;QAOvB,uBAAuB;;;;;;;;QAOvB,uBAAuB;;;;;;;;QAOvB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAC"}
package/dist/constants/Typography.js CHANGED
@@ -1,35 +1,35 @@
1
1
  import { Platform } from 'react-native';
2
- import { Fonts } from './Font';
2
+ import { fontStyle } from './Font';
3
3
  const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
4
4
  export const isMobile = Platform.OS !== 'web' || userAgent.includes('iPhone') || userAgent.includes('Android');
5
5
  export const CustomTypography = {
6
6
  'Titres alternatifs': {
7
7
  XS: {
8
- fontFamily: Fonts['Barlow-Bold'],
8
+ ...fontStyle('Barlow-Bold'),
9
9
  fontSize: 48,
10
10
  lineHeight: 56,
11
11
  letterSpacing: 0,
12
12
  },
13
13
  SM: {
14
- fontFamily: Fonts['Barlow-Bold'],
14
+ ...fontStyle('Barlow-Bold'),
15
15
  fontSize: 56,
16
16
  lineHeight: 64,
17
17
  letterSpacing: 0,
18
18
  },
19
19
  MD: {
20
- fontFamily: Fonts['Barlow-Bold'],
20
+ ...fontStyle('Barlow-Bold'),
21
21
  fontSize: 64,
22
22
  lineHeight: 72,
23
23
  letterSpacing: 0,
24
24
  },
25
25
  LG: {
26
- fontFamily: Fonts['Barlow-Bold'],
26
+ ...fontStyle('Barlow-Bold'),
27
27
  fontSize: 72,
28
28
  lineHeight: 80,
29
29
  letterSpacing: 0,
30
30
  },
31
31
  XL: {
32
- fontFamily: Fonts['Barlow-Bold'],
32
+ ...fontStyle('Barlow-Bold'),
33
33
  fontSize: 80,
34
34
  lineHeight: 88,
35
35
  letterSpacing: 0,
@@ -39,42 +39,42 @@ export const CustomTypography = {
39
39
  Titres: {
40
40
  /** Font size: 18/20 */
41
41
  'H6 - XXS': {
42
- fontFamily: Fonts['Inter-Bold'],
42
+ ...fontStyle('Inter-Bold'),
43
43
  fontSize: !isMobile ? 20 : 18,
44
44
  lineHeight: !isMobile ? 28 : 24,
45
45
  letterSpacing: 0,
46
46
  },
47
47
  /** Font size: 20/22 */
48
48
  'H5 - XS': {
49
- fontFamily: Fonts['Inter-Bold'],
49
+ ...fontStyle('Inter-Bold'),
50
50
  fontSize: !isMobile ? 22 : 20,
51
51
  lineHeight: 28,
52
52
  letterSpacing: 0,
53
53
  },
54
54
  /** Font size: 22/24 */
55
55
  'H4 - SM': {
56
- fontFamily: Fonts['Inter-Bold'],
56
+ ...fontStyle('Inter-Bold'),
57
57
  fontSize: !isMobile ? 24 : 22,
58
58
  lineHeight: !isMobile ? 32 : 28,
59
59
  letterSpacing: 0,
60
60
  },
61
61
  /** Font size: 24/28 */
62
62
  'H3 - MD': {
63
- fontFamily: Fonts['Inter-Bold'],
63
+ ...fontStyle('Inter-Bold'),
64
64
  fontSize: !isMobile ? 28 : 24,
65
65
  lineHeight: !isMobile ? 36 : 32,
66
66
  letterSpacing: 0,
67
67
  },
68
68
  /** Font size: 28/32 */
69
69
  'H2 - LG': {
70
- fontFamily: Fonts['Inter-Bold'],
70
+ ...fontStyle('Inter-Bold'),
71
71
  fontSize: !isMobile ? 32 : 28,
72
72
  lineHeight: !isMobile ? 36 : 32,
73
73
  letterSpacing: 0,
74
74
  },
75
75
  /** Font size: 40/48 */
76
76
  'H1 - XL': {
77
- fontFamily: Fonts['Barlow-SemiBold'],
77
+ ...fontStyle('Barlow-Bold'),
78
78
  fontSize: !isMobile ? 40 : 32,
79
79
  lineHeight: !isMobile ? 48 : 40,
80
80
  letterSpacing: 0,
@@ -83,33 +83,33 @@ export const CustomTypography = {
83
83
  'Corps de texte': {
84
84
  XS: {
85
85
  Regular: {
86
- fontFamily: Fonts['Inter-Regular'],
86
+ ...fontStyle('Inter-Regular'),
87
87
  fontSize: 12,
88
88
  lineHeight: 20,
89
89
  letterSpacing: 0,
90
90
  },
91
91
  Bold: {
92
- fontFamily: Fonts['Inter-Bold'],
92
+ ...fontStyle('Inter-Bold'),
93
93
  fontSize: 12,
94
94
  lineHeight: 20,
95
95
  letterSpacing: 0,
96
96
  },
97
97
  Caps: {
98
- fontFamily: Fonts['Inter-Regular'],
98
+ ...fontStyle('Inter-Regular'),
99
99
  fontSize: 12,
100
100
  lineHeight: 20,
101
101
  letterSpacing: 0,
102
102
  textTransform: 'uppercase',
103
103
  },
104
+ ...fontStyle('Inter-Bold'),
104
105
  CapsBold: {
105
- fontFamily: Fonts['Inter-SemiBold'],
106
106
  fontSize: 12,
107
107
  lineHeight: 20,
108
108
  letterSpacing: 0,
109
109
  textTransform: 'uppercase',
110
110
  },
111
111
  SemiBold: {
112
- fontFamily: Fonts['Inter-SemiBold'],
112
+ ...fontStyle('Inter-Bold'),
113
113
  fontSize: 12,
114
114
  lineHeight: 20,
115
115
  letterSpacing: 0,
@@ -117,31 +117,31 @@ export const CustomTypography = {
117
117
  },
118
118
  SM: {
119
119
  Regular: {
120
- fontFamily: Fonts['Inter-Regular'],
120
+ ...fontStyle('Inter-Regular'),
121
121
  fontSize: 14,
122
122
  lineHeight: 20,
123
123
  letterSpacing: 0,
124
124
  },
125
125
  Medium: {
126
- fontFamily: Fonts['Inter-Medium'],
126
+ ...fontStyle('Inter-Medium'),
127
127
  fontSize: 14,
128
128
  lineHeight: 20,
129
129
  letterSpacing: 0,
130
130
  },
131
131
  SemiBold: {
132
- fontFamily: Fonts['Inter-SemiBold'],
132
+ ...fontStyle('Inter-Bold'),
133
133
  fontSize: 14,
134
134
  lineHeight: 20,
135
135
  letterSpacing: 0,
136
136
  },
137
137
  Bold: {
138
- fontFamily: Fonts['Inter-Bold'],
138
+ ...fontStyle('Inter-Bold'),
139
139
  fontSize: 14,
140
140
  lineHeight: 20,
141
141
  letterSpacing: 0,
142
142
  },
143
143
  CapsBold: {
144
- fontFamily: Fonts['Inter-SemiBold'],
144
+ ...fontStyle('Inter-Bold'),
145
145
  fontSize: 14,
146
146
  lineHeight: 20,
147
147
  letterSpacing: 0,
@@ -150,25 +150,25 @@ export const CustomTypography = {
150
150
  },
151
151
  MD: {
152
152
  Regular: {
153
- fontFamily: Fonts['Inter-Regular'],
153
+ ...fontStyle('Inter-Regular'),
154
154
  fontSize: 16,
155
155
  lineHeight: 24,
156
156
  letterSpacing: 0,
157
157
  },
158
158
  Medium: {
159
- fontFamily: Fonts['Inter-Medium'],
159
+ ...fontStyle('Inter-Medium'),
160
160
  fontSize: 16,
161
161
  lineHeight: 24,
162
162
  letterSpacing: 0,
163
163
  },
164
164
  SemiBold: {
165
- fontFamily: Fonts['Inter-SemiBold'],
165
+ ...fontStyle('Inter-Bold'),
166
166
  fontSize: 16,
167
167
  lineHeight: 24,
168
168
  letterSpacing: 0,
169
169
  },
170
170
  Bold: {
171
- fontFamily: Fonts['Inter-Bold'],
171
+ ...fontStyle('Inter-Bold'),
172
172
  fontSize: 16,
173
173
  lineHeight: 24,
174
174
  letterSpacing: 0,
@@ -176,19 +176,19 @@ export const CustomTypography = {
176
176
  },
177
177
  LG: {
178
178
  Regular: {
179
- fontFamily: Fonts['Inter-Regular'],
179
+ ...fontStyle('Inter-Regular'),
180
180
  fontSize: 18,
181
181
  lineHeight: 28,
182
182
  letterSpacing: 0,
183
183
  },
184
184
  Medium: {
185
- fontFamily: Fonts['Inter-Medium'],
185
+ ...fontStyle('Inter-Medium'),
186
186
  fontSize: 18,
187
187
  lineHeight: 28,
188
188
  letterSpacing: 0,
189
189
  },
190
190
  SemiBold: {
191
- fontFamily: Fonts['Inter-SemiBold'],
191
+ ...fontStyle('Inter-Bold'),
192
192
  fontSize: 18,
193
193
  lineHeight: 28,
194
194
  letterSpacing: 0,
package/dist/helpers/injectVariableCSS.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Theme } from '../type';
2
+ export declare const injectFontFaceCSS: () => void;
2
3
  export declare const injectFontSmoothingCSS: () => void;
3
4
  export declare const injectVariableCSS: (theme: Theme) => void;
4
5
  //# sourceMappingURL=injectVariableCSS.d.ts.map
package/dist/helpers/injectVariableCSS.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAoBhC,eAAO,MAAM,sBAAsB,YAYlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC"}
1
+ {"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAoBhC,eAAO,MAAM,iBAAiB,YAiB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,YAYlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC"}
package/dist/helpers/injectVariableCSS.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Spacings } from '../constants';
2
+ import { FontWeightMap, FontsMap } from '../constants/Font';
2
3
  const generateCSSVariables = (theme) => {
3
4
  const lines = [];
4
5
  // Couleurs
@@ -13,6 +14,23 @@ const generateCSSVariables = (theme) => {
13
14
  });
14
15
  return `:root {\n${lines.join('\n')}\n}`;
15
16
  };
17
+ export const injectFontFaceCSS = () => {
18
+ if (typeof document === 'undefined')
19
+ return;
20
+ const styleId = 'theme-font-faces';
21
+ if (document.getElementById(styleId))
22
+ return;
23
+ const rules = Object.entries(FontsMap)
24
+ .map(([key, src]) => {
25
+ const { family, weight } = FontWeightMap[key];
26
+ return `@font-face {\n font-family: '${family}';\n src: url('${src}') format('truetype');\n font-weight: ${weight};\n font-style: normal;\n}`;
27
+ })
28
+ .join('\n');
29
+ const styleTag = document.createElement('style');
30
+ styleTag.id = styleId;
31
+ styleTag.innerHTML = rules;
32
+ document.head.appendChild(styleTag);
33
+ };
16
34
  export const injectFontSmoothingCSS = () => {
17
35
  if (typeof document === 'undefined')
18
36
  return;
package/dist/type/Typography.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { TextStyle } from 'react-native';
2
2
  import type { Heights, Sizes } from '../constants';
3
- export type CustomStyle = Pick<TextStyle, 'fontSize' | 'lineHeight' | 'fontWeight' | 'fontFamily'>;
3
+ export type CustomStyle = Pick<TextStyle, 'fontSize' | 'lineHeight' | 'fontWeight' | 'fontFamily' | 'letterSpacing'>;
4
4
  export interface Typography {
5
5
  fontSize: typeof Sizes;
6
6
  lineHeight: typeof Heights;
package/dist/type/Typography.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/type/Typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;AAEnG,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,KAAK,CAAC;IACvB,UAAU,EAAE,OAAO,OAAO,CAAC;CAC5B"}
1
+ {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/type/Typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAErH,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,KAAK,CAAC;IACvB,UAAU,EAAE,OAAO,OAAO,CAAC;CAC5B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/theme",
3
- "version": "0.40.0",
3
+ "version": "0.42.0",
4
4
  "description": "Shared theme tokens and utilities.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",