cpk-ui 0.4.2 → 0.5.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 (5) hide show
  1. package/components/uis/Typography/Typography.d.ts +12 -10
  2. package/components/uis/Typography/Typography.d.ts.map +1 -1
  3. package/components/uis/Typography/Typography.js +108 -40
  4. package/package.json +1 -1
  5. package/src/components/uis/Typography/Typography.tsx +129 -44
package/components/uis/Typography/Typography.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  import { Text } from 'react-native';
2
2
  import { CpkTheme } from '../../../utils/theme';
3
+ type FontFamilyOptions = {
4
+ normal: string;
5
+ thin?: string;
6
+ bold?: string;
7
+ };
8
+ type FontFamilyConfig = {
9
+ heading?: FontFamilyOptions;
10
+ body?: FontFamilyOptions;
11
+ };
3
12
  export declare const Typography: {
4
13
  Title: import("kstyled").StyledComponent<typeof Text, {
5
14
  theme?: CpkTheme;
@@ -84,14 +93,7 @@ export declare const TypographyInverted: {
84
93
  $fontWeight?: "normal" | "bold" | "thin";
85
94
  }, {}>;
86
95
  };
87
- export declare const setFontFamily: (fontFamilies: {
88
- normal: string;
89
- thin?: string;
90
- bold?: string;
91
- }) => void;
92
- export declare const getFontFamilies: () => {
93
- normal: string;
94
- thin: string;
95
- bold: string;
96
- };
96
+ export declare const setFontFamily: (fontFamilies: FontFamilyConfig) => void;
97
+ export declare const getFontFamilies: (isHeading: boolean) => FontFamilyOptions;
98
+ export {};
97
99
  //# sourceMappingURL=Typography.d.ts.map
package/components/uis/Typography/Typography.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Typography/Typography.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,IAAI,EAAY,MAAM,cAAc,CAAC;AACxD,OAAO,EAAC,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AAuN7D,eAAO,MAAM,UAAU;;gBAzMI,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;CAoN5E,CAAC;AAEF,eAAO,MAAM,kBAAkB;;gBAtNJ,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;CAiO5E,CAAC;AAQF,eAAO,MAAM,aAAa,GAAI,cAAc;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,KAAG,IA4CH,CAAC;AAGF,eAAO,MAAM,eAAe;;;;CAA4B,CAAC"}
1
+ {"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Typography/Typography.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,IAAI,EAAkC,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AAK7D,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAmPF,eAAO,MAAM,UAAU;;gBA7OI,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;CAwP5E,CAAC;AAEF,eAAO,MAAM,kBAAkB;;gBA1PJ,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;;gBAAlD,QAAQ;sBAAgB,QAAQ,GAAG,MAAM,GAAG,MAAM;;CAqQ5E,CAAC;AAeF,eAAO,MAAM,aAAa,GAAI,cAAc,gBAAgB,KAAG,IA6E9D,CAAC;AAGF,eAAO,MAAM,eAAe,GAAI,WAAW,OAAO,KAAG,iBAOpD,CAAC"}
package/components/uis/Typography/Typography.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import React, { useMemo } from 'react';
3
- import { Text, TextInput } from 'react-native';
3
+ import { Text, TextInput, Platform, StyleSheet } from 'react-native';
4
4
  import { isEmptyObject } from '../../../utils/theme';
5
5
  import { light } from '../../../utils/colors';
6
6
  import { styled, css } from 'kstyled';
7
- const createBaseText = (colorResolver, fallbackColor) => styled(Text) `
7
+ const createBaseText = (colorResolver, fallbackColor, isHeading) => styled(Text) `
8
8
  font-family: ${({ $fontWeight }) => {
9
- const { normal, thin = normal, bold = normal } = getFontFamilies();
9
+ const fontFamilies = getFontFamilies(isHeading);
10
+ const { normal, thin = normal, bold = normal } = fontFamilies;
10
11
  switch ($fontWeight) {
11
12
  case 'bold':
12
13
  return bold;
@@ -23,132 +24,158 @@ const createBaseText = (colorResolver, fallbackColor) => styled(Text) `
23
24
  return colorResolver(theme);
24
25
  }};
25
26
  `;
26
- const createTextComponent = ({ BaseText, fontSize, lineHeight, fontWeight, }) => React.memo(({ style, children, ...props }) => {
27
+ const createTextComponent = ({ BaseText, fontSize, lineHeight, fontWeight, isHeading, }) => React.memo(({ style, children, ...props }) => {
28
+ const fontFamilies = getFontFamilies(isHeading);
29
+ const isCustomFont = Platform?.OS === 'android' && fontFamilies.normal !== 'Pretendard';
30
+ // On Android, remove fontWeight when custom font is applied
31
+ const effectiveFontWeight = isCustomFont ? undefined : fontWeight;
27
32
  // Memoize style calculation
28
33
  const textStyle = useMemo(() => [
29
34
  css `
30
35
  font-size: ${fontSize}px;
31
36
  line-height: ${lineHeight}px;
32
- font-weight: ${fontWeight};
37
+ ${effectiveFontWeight ? `font-weight: ${effectiveFontWeight};` : ''}
33
38
  `,
34
39
  { includeFontPadding: false },
35
40
  style,
36
- ], [style]);
37
- return (_jsx(BaseText, { ...props, "$fontWeight": fontWeight, style: textStyle, children: children }));
41
+ ], [style, effectiveFontWeight]);
42
+ return (_jsx(BaseText, { ...props, "$fontWeight": effectiveFontWeight, style: textStyle, children: children }));
38
43
  });
39
- const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');
40
- const InvertedBaseText = createBaseText((theme) => theme.text.contrast, light.text.contrast);
44
+ const StandardHeadingBaseText = createBaseText((theme) => theme.text.basic, 'gray', true);
45
+ const StandardBodyBaseText = createBaseText((theme) => theme.text.basic, 'gray', false);
46
+ const InvertedHeadingBaseText = createBaseText((theme) => theme.text.contrast, light.text.contrast, true);
47
+ const InvertedBodyBaseText = createBaseText((theme) => theme.text.contrast, light.text.contrast, false);
41
48
  const Title = createTextComponent({
42
- BaseText: StandardBaseText,
49
+ BaseText: StandardHeadingBaseText,
43
50
  fontSize: 36,
44
51
  lineHeight: 50.4,
45
52
  fontWeight: 'bold',
53
+ isHeading: true,
46
54
  });
47
55
  const Heading1 = createTextComponent({
48
- BaseText: StandardBaseText,
56
+ BaseText: StandardHeadingBaseText,
49
57
  fontSize: 28,
50
58
  lineHeight: 39.2,
51
59
  fontWeight: 'bold',
60
+ isHeading: true,
52
61
  });
53
62
  const Heading2 = createTextComponent({
54
- BaseText: StandardBaseText,
63
+ BaseText: StandardHeadingBaseText,
55
64
  fontSize: 26,
56
65
  lineHeight: 36.4,
57
66
  fontWeight: 'bold',
67
+ isHeading: true,
58
68
  });
59
69
  const Heading3 = createTextComponent({
60
- BaseText: StandardBaseText,
70
+ BaseText: StandardHeadingBaseText,
61
71
  fontSize: 24,
62
72
  lineHeight: 33.6,
63
73
  fontWeight: 'bold',
74
+ isHeading: true,
64
75
  });
65
76
  const Heading4 = createTextComponent({
66
- BaseText: StandardBaseText,
77
+ BaseText: StandardHeadingBaseText,
67
78
  fontSize: 22,
68
79
  lineHeight: 30.8,
69
80
  fontWeight: 'bold',
81
+ isHeading: true,
70
82
  });
71
83
  const Heading5 = createTextComponent({
72
- BaseText: StandardBaseText,
84
+ BaseText: StandardHeadingBaseText,
73
85
  fontSize: 20,
74
86
  lineHeight: 28,
75
87
  fontWeight: 'bold',
88
+ isHeading: true,
76
89
  });
77
90
  const Body1 = createTextComponent({
78
- BaseText: StandardBaseText,
91
+ BaseText: StandardBodyBaseText,
79
92
  fontSize: 18,
80
93
  lineHeight: 25.2,
94
+ isHeading: false,
81
95
  });
82
96
  const Body2 = createTextComponent({
83
- BaseText: StandardBaseText,
97
+ BaseText: StandardBodyBaseText,
84
98
  fontSize: 16,
85
99
  lineHeight: 22.4,
100
+ isHeading: false,
86
101
  });
87
102
  const Body3 = createTextComponent({
88
- BaseText: StandardBaseText,
103
+ BaseText: StandardBodyBaseText,
89
104
  fontSize: 14,
90
105
  lineHeight: 19.6,
106
+ isHeading: false,
91
107
  });
92
108
  const Body4 = createTextComponent({
93
- BaseText: StandardBaseText,
109
+ BaseText: StandardBodyBaseText,
94
110
  fontSize: 12,
95
111
  lineHeight: 16.4,
112
+ isHeading: false,
96
113
  });
97
114
  const InvertedTitle = createTextComponent({
98
- BaseText: InvertedBaseText,
115
+ BaseText: InvertedHeadingBaseText,
99
116
  fontSize: 36,
100
117
  lineHeight: 50.4,
101
118
  fontWeight: 'bold',
119
+ isHeading: true,
102
120
  });
103
121
  const InvertedHeading1 = createTextComponent({
104
- BaseText: InvertedBaseText,
122
+ BaseText: InvertedHeadingBaseText,
105
123
  fontSize: 28,
106
124
  lineHeight: 39.2,
107
125
  fontWeight: 'bold',
126
+ isHeading: true,
108
127
  });
109
128
  const InvertedHeading2 = createTextComponent({
110
- BaseText: InvertedBaseText,
129
+ BaseText: InvertedHeadingBaseText,
111
130
  fontSize: 26,
112
131
  lineHeight: 36.4,
113
132
  fontWeight: 'bold',
133
+ isHeading: true,
114
134
  });
115
135
  const InvertedHeading3 = createTextComponent({
116
- BaseText: InvertedBaseText,
136
+ BaseText: InvertedHeadingBaseText,
117
137
  fontSize: 24,
118
138
  lineHeight: 33.6,
119
139
  fontWeight: 'bold',
140
+ isHeading: true,
120
141
  });
121
142
  const InvertedHeading4 = createTextComponent({
122
- BaseText: InvertedBaseText,
143
+ BaseText: InvertedHeadingBaseText,
123
144
  fontSize: 22,
124
145
  lineHeight: 30.8,
125
146
  fontWeight: 'bold',
147
+ isHeading: true,
126
148
  });
127
149
  const InvertedHeading5 = createTextComponent({
128
- BaseText: InvertedBaseText,
150
+ BaseText: InvertedHeadingBaseText,
129
151
  fontSize: 20,
130
152
  lineHeight: 28,
131
153
  fontWeight: 'bold',
154
+ isHeading: true,
132
155
  });
133
156
  const InvertedBody1 = createTextComponent({
134
- BaseText: InvertedBaseText,
157
+ BaseText: InvertedBodyBaseText,
135
158
  fontSize: 18,
136
159
  lineHeight: 25.2,
160
+ isHeading: false,
137
161
  });
138
162
  const InvertedBody2 = createTextComponent({
139
- BaseText: InvertedBaseText,
163
+ BaseText: InvertedBodyBaseText,
140
164
  fontSize: 16,
141
165
  lineHeight: 22.4,
166
+ isHeading: false,
142
167
  });
143
168
  const InvertedBody3 = createTextComponent({
144
- BaseText: InvertedBaseText,
169
+ BaseText: InvertedBodyBaseText,
145
170
  fontSize: 14,
146
171
  lineHeight: 19.6,
172
+ isHeading: false,
147
173
  });
148
174
  const InvertedBody4 = createTextComponent({
149
- BaseText: InvertedBaseText,
175
+ BaseText: InvertedBodyBaseText,
150
176
  fontSize: 12,
151
177
  lineHeight: 16.4,
178
+ isHeading: false,
152
179
  });
153
180
  export const Typography = {
154
181
  Title,
@@ -175,24 +202,52 @@ export const TypographyInverted = {
175
202
  Body4: InvertedBody4,
176
203
  };
177
204
  let currentFontFamilies = {
178
- normal: 'Pretendard',
179
- thin: 'Pretendard-Thin',
180
- bold: 'Pretendard-Bold',
205
+ heading: {
206
+ normal: 'Pretendard',
207
+ thin: 'Pretendard-Thin',
208
+ bold: 'Pretendard-Bold',
209
+ },
210
+ body: {
211
+ normal: 'Pretendard',
212
+ thin: 'Pretendard-Thin',
213
+ bold: 'Pretendard-Bold',
214
+ },
181
215
  };
182
216
  export const setFontFamily = (fontFamilies) => {
183
- currentFontFamilies = { ...currentFontFamilies, ...fontFamilies };
217
+ if (fontFamilies.heading) {
218
+ currentFontFamilies.heading = {
219
+ ...currentFontFamilies.heading,
220
+ ...fontFamilies.heading,
221
+ };
222
+ }
223
+ if (fontFamilies.body) {
224
+ currentFontFamilies.body = {
225
+ ...currentFontFamilies.body,
226
+ ...fontFamilies.body,
227
+ };
228
+ }
184
229
  // Memoize font family getter function
185
- const getFontFamily = (fontWeight) => {
230
+ const getFontFamily = (fontWeight, userFontFamily, isHeading) => {
231
+ // If user explicitly set fontFamily, use it (override)
232
+ if (userFontFamily) {
233
+ return userFontFamily;
234
+ }
235
+ const fontFamilies = isHeading ? currentFontFamilies.heading : currentFontFamilies.body;
236
+ if (!fontFamilies) {
237
+ // Fallback to default Pretendard if not configured
238
+ return 'Pretendard';
239
+ }
240
+ const { normal, thin = normal, bold = normal } = fontFamilies;
186
241
  switch (fontWeight) {
187
242
  case 'bold':
188
243
  case '700':
189
- return currentFontFamilies.bold;
244
+ return bold;
190
245
  case '100':
191
246
  case '200':
192
247
  case '300':
193
- return currentFontFamilies.thin;
248
+ return thin;
194
249
  default:
195
- return currentFontFamilies.normal;
250
+ return normal;
196
251
  }
197
252
  };
198
253
  const applyFontFamily = (Component) => {
@@ -201,10 +256,16 @@ export const setFontFamily = (fontFamilies) => {
201
256
  // @ts-ignore
202
257
  Component.render = function (...args) {
203
258
  const origin = oldRender.call(this, ...args);
204
- const fontWeight = origin.props.style?.fontWeight;
259
+ // Flatten styles using React Native's StyleSheet.flatten
260
+ const flatStyle = StyleSheet.flatten(origin.props.style) ?? {};
261
+ const fontWeight = flatStyle?.fontWeight;
262
+ const userFontFamily = flatStyle?.fontFamily;
263
+ // Default to body fonts for direct Text/TextInput usage
264
+ // Heading fonts are applied via Typography components
265
+ const isHeading = false;
205
266
  const updatedStyle = [
206
267
  {
207
- fontFamily: getFontFamily(fontWeight),
268
+ fontFamily: getFontFamily(fontWeight, userFontFamily, isHeading),
208
269
  includeFontPadding: false,
209
270
  },
210
271
  origin.props.style,
@@ -218,4 +279,11 @@ export const setFontFamily = (fontFamilies) => {
218
279
  applyFontFamily(TextInput);
219
280
  };
220
281
  // Memoize font families getter
221
- export const getFontFamilies = () => currentFontFamilies;
282
+ export const getFontFamilies = (isHeading) => {
283
+ const fontFamilies = isHeading ? currentFontFamilies.heading : currentFontFamilies.body;
284
+ return fontFamilies || {
285
+ normal: 'Pretendard',
286
+ thin: 'Pretendard-Thin',
287
+ bold: 'Pretendard-Bold',
288
+ };
289
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cpk-ui",
3
- "version": "0.4.2",
3
+ "version": "0.5.0",
4
4
  "main": "index",
5
5
  "react-native": "index",
6
6
  "module": "index",
package/src/components/uis/Typography/Typography.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, {ReactNode, useMemo} from 'react';
2
- import {StyleProp, Text, TextInput} from 'react-native';
2
+ import {StyleProp, Text, TextInput, Platform, StyleSheet} from 'react-native';
3
3
  import {CpkTheme, isEmptyObject} from '../../../utils/theme';
4
4
  import {light} from '../../../utils/colors';
5
5
  import {type TextStyle} from 'react-native';
@@ -11,12 +11,19 @@ type FontFamilyOptions = {
11
11
  bold?: string;
12
12
  };
13
13
 
14
+ type FontFamilyConfig = {
15
+ heading?: FontFamilyOptions;
16
+ body?: FontFamilyOptions;
17
+ };
18
+
14
19
  const createBaseText = (
15
20
  colorResolver: (theme: CpkTheme) => string,
16
21
  fallbackColor: string,
22
+ isHeading: boolean,
17
23
  ) => styled(Text)<{theme?: CpkTheme; $fontWeight?: 'normal' | 'bold' | 'thin'}>`
18
24
  font-family: ${({$fontWeight}) => {
19
- const {normal, thin = normal, bold = normal} = getFontFamilies();
25
+ const fontFamilies = getFontFamilies(isHeading);
26
+ const {normal, thin = normal, bold = normal} = fontFamilies;
20
27
  switch ($fontWeight) {
21
28
  case 'bold':
22
29
  return bold;
@@ -41,11 +48,13 @@ const createTextComponent = ({
41
48
  fontSize,
42
49
  lineHeight,
43
50
  fontWeight,
51
+ isHeading,
44
52
  }: {
45
53
  BaseText: TextComponentType;
46
54
  fontSize: number;
47
55
  lineHeight: number;
48
56
  fontWeight?: 'normal' | 'bold' | 'thin';
57
+ isHeading: boolean;
49
58
  }) =>
50
59
  React.memo(({
51
60
  style,
@@ -55,21 +64,27 @@ const createTextComponent = ({
55
64
  style?: StyleProp<TextStyle>;
56
65
  children?: ReactNode;
57
66
  }) => {
67
+ const fontFamilies = getFontFamilies(isHeading);
68
+ const isCustomFont = Platform?.OS === 'android' && fontFamilies.normal !== 'Pretendard';
69
+
70
+ // On Android, remove fontWeight when custom font is applied
71
+ const effectiveFontWeight = isCustomFont ? undefined : fontWeight;
72
+
58
73
  // Memoize style calculation
59
74
  const textStyle = useMemo(() => [
60
75
  css`
61
76
  font-size: ${fontSize}px;
62
77
  line-height: ${lineHeight}px;
63
- font-weight: ${fontWeight};
78
+ ${effectiveFontWeight ? `font-weight: ${effectiveFontWeight};` : ''}
64
79
  `,
65
80
  {includeFontPadding: false},
66
81
  style,
67
- ], [style]);
82
+ ], [style, effectiveFontWeight]);
68
83
 
69
84
  return (
70
85
  <BaseText
71
86
  {...props}
72
- $fontWeight={fontWeight}
87
+ $fontWeight={effectiveFontWeight}
73
88
  style={textStyle}
74
89
  >
75
90
  {children}
@@ -77,142 +92,169 @@ const createTextComponent = ({
77
92
  );
78
93
  }) as unknown as TextComponentType;
79
94
 
80
- const StandardBaseText = createBaseText((theme) => theme.text.basic, 'gray');
81
- const InvertedBaseText = createBaseText(
95
+ const StandardHeadingBaseText = createBaseText((theme) => theme.text.basic, 'gray', true);
96
+ const StandardBodyBaseText = createBaseText((theme) => theme.text.basic, 'gray', false);
97
+ const InvertedHeadingBaseText = createBaseText(
98
+ (theme) => theme.text.contrast,
99
+ light.text.contrast,
100
+ true,
101
+ );
102
+ const InvertedBodyBaseText = createBaseText(
82
103
  (theme) => theme.text.contrast,
83
104
  light.text.contrast,
105
+ false,
84
106
  );
85
107
 
86
108
  const Title = createTextComponent({
87
- BaseText: StandardBaseText,
109
+ BaseText: StandardHeadingBaseText,
88
110
  fontSize: 36,
89
111
  lineHeight: 50.4,
90
112
  fontWeight: 'bold',
113
+ isHeading: true,
91
114
  });
92
115
 
93
116
  const Heading1 = createTextComponent({
94
- BaseText: StandardBaseText,
117
+ BaseText: StandardHeadingBaseText,
95
118
  fontSize: 28,
96
119
  lineHeight: 39.2,
97
120
  fontWeight: 'bold',
121
+ isHeading: true,
98
122
  });
99
123
 
100
124
  const Heading2 = createTextComponent({
101
- BaseText: StandardBaseText,
125
+ BaseText: StandardHeadingBaseText,
102
126
  fontSize: 26,
103
127
  lineHeight: 36.4,
104
128
  fontWeight: 'bold',
129
+ isHeading: true,
105
130
  });
106
131
 
107
132
  const Heading3 = createTextComponent({
108
- BaseText: StandardBaseText,
133
+ BaseText: StandardHeadingBaseText,
109
134
  fontSize: 24,
110
135
  lineHeight: 33.6,
111
136
  fontWeight: 'bold',
137
+ isHeading: true,
112
138
  });
113
139
 
114
140
  const Heading4 = createTextComponent({
115
- BaseText: StandardBaseText,
141
+ BaseText: StandardHeadingBaseText,
116
142
  fontSize: 22,
117
143
  lineHeight: 30.8,
118
144
  fontWeight: 'bold',
145
+ isHeading: true,
119
146
  });
120
147
 
121
148
  const Heading5 = createTextComponent({
122
- BaseText: StandardBaseText,
149
+ BaseText: StandardHeadingBaseText,
123
150
  fontSize: 20,
124
151
  lineHeight: 28,
125
152
  fontWeight: 'bold',
153
+ isHeading: true,
126
154
  });
127
155
 
128
156
  const Body1 = createTextComponent({
129
- BaseText: StandardBaseText,
157
+ BaseText: StandardBodyBaseText,
130
158
  fontSize: 18,
131
159
  lineHeight: 25.2,
160
+ isHeading: false,
132
161
  });
133
162
 
134
163
  const Body2 = createTextComponent({
135
- BaseText: StandardBaseText,
164
+ BaseText: StandardBodyBaseText,
136
165
  fontSize: 16,
137
166
  lineHeight: 22.4,
167
+ isHeading: false,
138
168
  });
139
169
 
140
170
  const Body3 = createTextComponent({
141
- BaseText: StandardBaseText,
171
+ BaseText: StandardBodyBaseText,
142
172
  fontSize: 14,
143
173
  lineHeight: 19.6,
174
+ isHeading: false,
144
175
  });
145
176
 
146
177
  const Body4 = createTextComponent({
147
- BaseText: StandardBaseText,
178
+ BaseText: StandardBodyBaseText,
148
179
  fontSize: 12,
149
180
  lineHeight: 16.4,
181
+ isHeading: false,
150
182
  });
151
183
 
152
184
  const InvertedTitle = createTextComponent({
153
- BaseText: InvertedBaseText,
185
+ BaseText: InvertedHeadingBaseText,
154
186
  fontSize: 36,
155
187
  lineHeight: 50.4,
156
188
  fontWeight: 'bold',
189
+ isHeading: true,
157
190
  });
158
191
 
159
192
  const InvertedHeading1 = createTextComponent({
160
- BaseText: InvertedBaseText,
193
+ BaseText: InvertedHeadingBaseText,
161
194
  fontSize: 28,
162
195
  lineHeight: 39.2,
163
196
  fontWeight: 'bold',
197
+ isHeading: true,
164
198
  });
165
199
 
166
200
  const InvertedHeading2 = createTextComponent({
167
- BaseText: InvertedBaseText,
201
+ BaseText: InvertedHeadingBaseText,
168
202
  fontSize: 26,
169
203
  lineHeight: 36.4,
170
204
  fontWeight: 'bold',
205
+ isHeading: true,
171
206
  });
172
207
 
173
208
  const InvertedHeading3 = createTextComponent({
174
- BaseText: InvertedBaseText,
209
+ BaseText: InvertedHeadingBaseText,
175
210
  fontSize: 24,
176
211
  lineHeight: 33.6,
177
212
  fontWeight: 'bold',
213
+ isHeading: true,
178
214
  });
179
215
 
180
216
  const InvertedHeading4 = createTextComponent({
181
- BaseText: InvertedBaseText,
217
+ BaseText: InvertedHeadingBaseText,
182
218
  fontSize: 22,
183
219
  lineHeight: 30.8,
184
220
  fontWeight: 'bold',
221
+ isHeading: true,
185
222
  });
186
223
 
187
224
  const InvertedHeading5 = createTextComponent({
188
- BaseText: InvertedBaseText,
225
+ BaseText: InvertedHeadingBaseText,
189
226
  fontSize: 20,
190
227
  lineHeight: 28,
191
228
  fontWeight: 'bold',
229
+ isHeading: true,
192
230
  });
193
231
 
194
232
  const InvertedBody1 = createTextComponent({
195
- BaseText: InvertedBaseText,
233
+ BaseText: InvertedBodyBaseText,
196
234
  fontSize: 18,
197
235
  lineHeight: 25.2,
236
+ isHeading: false,
198
237
  });
199
238
 
200
239
  const InvertedBody2 = createTextComponent({
201
- BaseText: InvertedBaseText,
240
+ BaseText: InvertedBodyBaseText,
202
241
  fontSize: 16,
203
242
  lineHeight: 22.4,
243
+ isHeading: false,
204
244
  });
205
245
 
206
246
  const InvertedBody3 = createTextComponent({
207
- BaseText: InvertedBaseText,
247
+ BaseText: InvertedBodyBaseText,
208
248
  fontSize: 14,
209
249
  lineHeight: 19.6,
250
+ isHeading: false,
210
251
  });
211
252
 
212
253
  const InvertedBody4 = createTextComponent({
213
- BaseText: InvertedBaseText,
254
+ BaseText: InvertedBodyBaseText,
214
255
  fontSize: 12,
215
256
  lineHeight: 16.4,
257
+ isHeading: false,
216
258
  });
217
259
 
218
260
  export const Typography = {
@@ -241,31 +283,59 @@ export const TypographyInverted = {
241
283
  Body4: InvertedBody4,
242
284
  };
243
285
 
244
- let currentFontFamilies = {
245
- normal: 'Pretendard',
246
- thin: 'Pretendard-Thin',
247
- bold: 'Pretendard-Bold',
286
+ let currentFontFamilies: FontFamilyConfig = {
287
+ heading: {
288
+ normal: 'Pretendard',
289
+ thin: 'Pretendard-Thin',
290
+ bold: 'Pretendard-Bold',
291
+ },
292
+ body: {
293
+ normal: 'Pretendard',
294
+ thin: 'Pretendard-Thin',
295
+ bold: 'Pretendard-Bold',
296
+ },
248
297
  };
249
298
 
250
- export const setFontFamily = (fontFamilies: {
251
- normal: string;
252
- thin?: string;
253
- bold?: string;
254
- }): void => {
255
- currentFontFamilies = {...currentFontFamilies, ...fontFamilies};
299
+ export const setFontFamily = (fontFamilies: FontFamilyConfig): void => {
300
+ if (fontFamilies.heading) {
301
+ currentFontFamilies.heading = {
302
+ ...currentFontFamilies.heading,
303
+ ...fontFamilies.heading,
304
+ };
305
+ }
306
+
307
+ if (fontFamilies.body) {
308
+ currentFontFamilies.body = {
309
+ ...currentFontFamilies.body,
310
+ ...fontFamilies.body,
311
+ };
312
+ }
256
313
 
257
314
  // Memoize font family getter function
258
- const getFontFamily = (fontWeight: string | undefined): string => {
315
+ const getFontFamily = (fontWeight: string | undefined, userFontFamily: string | undefined, isHeading: boolean): string => {
316
+ // If user explicitly set fontFamily, use it (override)
317
+ if (userFontFamily) {
318
+ return userFontFamily;
319
+ }
320
+
321
+ const fontFamilies = isHeading ? currentFontFamilies.heading : currentFontFamilies.body;
322
+ if (!fontFamilies) {
323
+ // Fallback to default Pretendard if not configured
324
+ return 'Pretendard';
325
+ }
326
+
327
+ const {normal, thin = normal, bold = normal} = fontFamilies;
328
+
259
329
  switch (fontWeight) {
260
330
  case 'bold':
261
331
  case '700':
262
- return currentFontFamilies.bold;
332
+ return bold;
263
333
  case '100':
264
334
  case '200':
265
335
  case '300':
266
- return currentFontFamilies.thin;
336
+ return thin;
267
337
  default:
268
- return currentFontFamilies.normal;
338
+ return normal;
269
339
  }
270
340
  };
271
341
 
@@ -277,11 +347,19 @@ export const setFontFamily = (fontFamilies: {
277
347
  Component.render = function (...args: any) {
278
348
  const origin = oldRender.call(this, ...args);
279
349
 
280
- const fontWeight = origin.props.style?.fontWeight;
350
+ // Flatten styles using React Native's StyleSheet.flatten
351
+ const flatStyle = StyleSheet.flatten(origin.props.style) ?? {};
352
+
353
+ const fontWeight = flatStyle?.fontWeight;
354
+ const userFontFamily = flatStyle?.fontFamily;
355
+
356
+ // Default to body fonts for direct Text/TextInput usage
357
+ // Heading fonts are applied via Typography components
358
+ const isHeading = false;
281
359
 
282
360
  const updatedStyle = [
283
361
  {
284
- fontFamily: getFontFamily(fontWeight),
362
+ fontFamily: getFontFamily(fontWeight, userFontFamily, isHeading),
285
363
  includeFontPadding: false,
286
364
  },
287
365
  origin.props.style,
@@ -298,4 +376,11 @@ export const setFontFamily = (fontFamilies: {
298
376
  };
299
377
 
300
378
  // Memoize font families getter
301
- export const getFontFamilies = () => currentFontFamilies;
379
+ export const getFontFamilies = (isHeading: boolean): FontFamilyOptions => {
380
+ const fontFamilies = isHeading ? currentFontFamilies.heading : currentFontFamilies.body;
381
+ return fontFamilies || {
382
+ normal: 'Pretendard',
383
+ thin: 'Pretendard-Thin',
384
+ bold: 'Pretendard-Bold',
385
+ };
386
+ };