@nuskin/foundation-ui-components 1.9.4 → 1.10.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.
package/package.json
CHANGED
|
@@ -5,7 +5,6 @@ import HtmlTagVariantMapping from './HtmlTagVariantMap';
|
|
|
5
5
|
|
|
6
6
|
const NsTypography = ({
|
|
7
7
|
children,
|
|
8
|
-
fontStyle = 'normal',
|
|
9
8
|
weight = 'normal',
|
|
10
9
|
className = '',
|
|
11
10
|
variant = 'body-l',
|
|
@@ -20,7 +19,6 @@ const NsTypography = ({
|
|
|
20
19
|
return (
|
|
21
20
|
<StyledTypography
|
|
22
21
|
as={htmlTagVariant}
|
|
23
|
-
fontStyle={fontStyle}
|
|
24
22
|
className={className}
|
|
25
23
|
weight={weight}
|
|
26
24
|
variant={variant}
|
|
@@ -4,24 +4,123 @@ import { NsTypographyProps } from './types.d';
|
|
|
4
4
|
const { paletteColor } = ColorUtils;
|
|
5
5
|
|
|
6
6
|
const variantStyles = {
|
|
7
|
-
h1:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
7
|
+
h1: {
|
|
8
|
+
'font-size': '42px',
|
|
9
|
+
'line-height': '48px',
|
|
10
|
+
'letter-spacing': '0px',
|
|
11
|
+
margin: '0px',
|
|
12
|
+
},
|
|
13
|
+
h2: {
|
|
14
|
+
'font-size': '36px',
|
|
15
|
+
'line-height': '42px',
|
|
16
|
+
'letter-spacing': '0px',
|
|
17
|
+
margin: '0px',
|
|
18
|
+
},
|
|
19
|
+
h3: {
|
|
20
|
+
'font-size': '32px',
|
|
21
|
+
'line-height': '38px',
|
|
22
|
+
'letter-spacing': '0px',
|
|
23
|
+
margin: '0px',
|
|
24
|
+
},
|
|
25
|
+
h4: {
|
|
26
|
+
'font-size': '26px',
|
|
27
|
+
'line-height': '34px',
|
|
28
|
+
'letter-spacing': '0px',
|
|
29
|
+
margin: '0px',
|
|
30
|
+
},
|
|
31
|
+
h5: {
|
|
32
|
+
'font-size': '22px',
|
|
33
|
+
'line-height': '28px',
|
|
34
|
+
'letter-spacing': '0px',
|
|
35
|
+
'font-weight': '700',
|
|
36
|
+
margin: '0px',
|
|
37
|
+
},
|
|
38
|
+
h6: {
|
|
39
|
+
'font-size': '18px',
|
|
40
|
+
'line-height': '24px',
|
|
41
|
+
'letter-spacing': '0px',
|
|
42
|
+
'font-weight': '600',
|
|
43
|
+
margin: '0px',
|
|
44
|
+
},
|
|
45
|
+
'title-l': {
|
|
46
|
+
'font-size': '22px',
|
|
47
|
+
'line-height': '28px',
|
|
48
|
+
'letter-spacing': '2px',
|
|
49
|
+
'font-weight': '700',
|
|
50
|
+
margin: '0px',
|
|
51
|
+
},
|
|
52
|
+
'title-m': {
|
|
53
|
+
'font-size': '16px',
|
|
54
|
+
'line-height': '20px',
|
|
55
|
+
'letter-spacing': '4px',
|
|
56
|
+
'font-weight': '700',
|
|
57
|
+
margin: '0px',
|
|
58
|
+
},
|
|
59
|
+
'title-s': {
|
|
60
|
+
'font-size': '16px',
|
|
61
|
+
'line-height': '16px',
|
|
62
|
+
'letter-spacing': '4px',
|
|
63
|
+
'font-weight': '700',
|
|
64
|
+
margin: '0px',
|
|
65
|
+
},
|
|
66
|
+
'label-l': {
|
|
67
|
+
'font-size': '20px',
|
|
68
|
+
'line-height': '26px',
|
|
69
|
+
'letter-spacing': '0px',
|
|
70
|
+
'font-weight': '600',
|
|
71
|
+
margin: '8px',
|
|
72
|
+
},
|
|
73
|
+
'label-m': {
|
|
74
|
+
'font-size': '16px',
|
|
75
|
+
'line-height': '22px',
|
|
76
|
+
'letter-spacing': '0px',
|
|
77
|
+
'font-weight': '600',
|
|
78
|
+
margin: '8px',
|
|
79
|
+
},
|
|
80
|
+
'label-s': {
|
|
81
|
+
'font-size': '14px',
|
|
82
|
+
'line-height': '20px',
|
|
83
|
+
'letter-spacing': '0px',
|
|
84
|
+
'font-weight': '700',
|
|
85
|
+
margin: '6px',
|
|
86
|
+
},
|
|
87
|
+
'body-xl': {
|
|
88
|
+
'font-size': '18px',
|
|
89
|
+
'line-height': '22px',
|
|
90
|
+
'letter-spacing': '0px',
|
|
91
|
+
margin: '22px',
|
|
92
|
+
},
|
|
93
|
+
'body-l': {
|
|
94
|
+
'font-size': '16px',
|
|
95
|
+
'line-height': '22px',
|
|
96
|
+
'letter-spacing': '0px',
|
|
97
|
+
margin: '20px',
|
|
98
|
+
},
|
|
99
|
+
'body-m': {
|
|
100
|
+
'font-size': '14px',
|
|
101
|
+
'line-height': '20px',
|
|
102
|
+
'letter-spacing': '0px',
|
|
103
|
+
margin: '18px',
|
|
104
|
+
},
|
|
105
|
+
'body-s': {
|
|
106
|
+
'font-size': '12px',
|
|
107
|
+
'line-height': '16px',
|
|
108
|
+
'letter-spacing': '1px',
|
|
109
|
+
margin: '16px',
|
|
110
|
+
},
|
|
111
|
+
'body-xs': {
|
|
112
|
+
'font-size': '10px',
|
|
113
|
+
'line-height': '14px',
|
|
114
|
+
'letter-spacing': '2px',
|
|
115
|
+
margin: '14px',
|
|
116
|
+
},
|
|
117
|
+
CTA: {
|
|
118
|
+
'font-size': '14px',
|
|
119
|
+
'line-height': '20px',
|
|
120
|
+
'letter-spacing': '0.14px',
|
|
121
|
+
'font-weight': '600',
|
|
122
|
+
margin: '0px',
|
|
123
|
+
},
|
|
25
124
|
};
|
|
26
125
|
|
|
27
126
|
const fontWeightMap = {
|
|
@@ -34,7 +133,6 @@ export const StyledTypography = styled.div<NsTypographyProps>`
|
|
|
34
133
|
font-family: Inter;
|
|
35
134
|
color: ${({ color, colorOverride }) => (colorOverride?.startsWith('#') ? colorOverride : paletteColor(color))};
|
|
36
135
|
font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
|
|
37
|
-
font-style: ${({ fontStyle }) => fontStyle};
|
|
38
136
|
${({ variant = 'h1' }) => variantStyles[variant]};
|
|
39
137
|
text-decoration-line: ${({ decoration }) => decoration};
|
|
40
138
|
`;
|
|
@@ -26,7 +26,6 @@ export type HtmlTagVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' |
|
|
|
26
26
|
export type NsTypographyProps = {
|
|
27
27
|
variant: Variants;
|
|
28
28
|
decoration?: 'underline' | 'none';
|
|
29
|
-
fontStyle?: 'italic' | 'normal';
|
|
30
29
|
weight?: 'bold' | 'normal' | 'light';
|
|
31
30
|
color?: FoundationTheme.PaletteColors;
|
|
32
31
|
component?: 'div' | 'span' | 'p';
|