@remember-web/mixin 0.2.2 → 0.2.4
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/dist/src/typography/const.cjs.js +34 -72
- package/dist/src/typography/const.cjs.js.map +1 -1
- package/dist/src/typography/const.d.ts +34 -69
- package/dist/src/typography/const.d.ts.map +1 -1
- package/dist/src/typography/const.esm.js +34 -72
- package/dist/src/typography/const.esm.js.map +1 -1
- package/dist/src/typography/utils.cjs.js +1 -1
- package/dist/src/typography/utils.cjs.js.map +1 -1
- package/dist/src/typography/utils.esm.js +1 -1
- package/dist/src/typography/utils.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/typography/const.ts +34 -72
- package/src/typography/utils.ts +1 -1
|
@@ -9,141 +9,103 @@ var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
|
9
9
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
10
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
11
|
/* eslint-disable @typescript-eslint/naming-convention */
|
|
12
|
-
|
|
13
12
|
var LEGACY_TYPOGRAPHY_STYLES = {
|
|
14
13
|
Headline2_B: {
|
|
15
14
|
fontSize: 24,
|
|
16
|
-
lineHeight:
|
|
15
|
+
lineHeight: 34,
|
|
17
16
|
fontWeight: 600
|
|
18
17
|
},
|
|
19
18
|
Headline3_B: {
|
|
20
19
|
fontSize: 20,
|
|
21
|
-
lineHeight:
|
|
20
|
+
lineHeight: 26,
|
|
22
21
|
fontWeight: 600
|
|
23
22
|
},
|
|
24
23
|
Headline4_B: {
|
|
25
24
|
fontSize: 16,
|
|
26
|
-
lineHeight:
|
|
25
|
+
lineHeight: 26,
|
|
27
26
|
fontWeight: 600
|
|
28
27
|
},
|
|
29
28
|
Headline4_M: {
|
|
30
29
|
fontSize: 16,
|
|
31
|
-
lineHeight:
|
|
30
|
+
lineHeight: 26,
|
|
32
31
|
fontWeight: 400
|
|
33
32
|
},
|
|
34
33
|
Body1_B: {
|
|
35
34
|
fontSize: 14,
|
|
36
|
-
lineHeight:
|
|
35
|
+
lineHeight: 24,
|
|
37
36
|
fontWeight: 600
|
|
38
37
|
},
|
|
39
38
|
Body1_M: {
|
|
40
39
|
fontSize: 14,
|
|
41
|
-
lineHeight:
|
|
40
|
+
lineHeight: 24,
|
|
42
41
|
fontWeight: 400
|
|
43
42
|
},
|
|
44
43
|
Body2_B: {
|
|
45
44
|
fontSize: 12,
|
|
46
|
-
lineHeight:
|
|
45
|
+
lineHeight: 19,
|
|
47
46
|
fontWeight: 600
|
|
48
47
|
},
|
|
49
48
|
Body2_M: {
|
|
50
49
|
fontSize: 12,
|
|
51
|
-
lineHeight:
|
|
50
|
+
lineHeight: 19,
|
|
52
51
|
fontWeight: 400
|
|
53
52
|
},
|
|
54
53
|
Caption_B: {
|
|
55
54
|
fontSize: 10,
|
|
56
|
-
lineHeight:
|
|
55
|
+
lineHeight: 14,
|
|
57
56
|
fontWeight: 600
|
|
58
57
|
}
|
|
59
58
|
};
|
|
60
59
|
var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
|
|
61
|
-
// Title Style
|
|
62
|
-
Display1: {
|
|
63
|
-
fontSize: 48,
|
|
64
|
-
lineHeight: 1.3,
|
|
65
|
-
fontWeight: 700
|
|
66
|
-
},
|
|
67
|
-
Display2: {
|
|
68
|
-
fontSize: 40,
|
|
69
|
-
lineHeight: 1.3,
|
|
70
|
-
fontWeight: 700
|
|
71
|
-
},
|
|
72
|
-
Display3: {
|
|
73
|
-
fontSize: 32,
|
|
74
|
-
lineHeight: 1.3,
|
|
75
|
-
fontWeight: 700
|
|
76
|
-
},
|
|
77
60
|
Headline: {
|
|
78
61
|
fontSize: 24,
|
|
79
|
-
lineHeight:
|
|
62
|
+
lineHeight: 34,
|
|
80
63
|
fontWeight: 600
|
|
81
64
|
},
|
|
82
65
|
Title1: {
|
|
83
66
|
fontSize: 20,
|
|
84
|
-
lineHeight:
|
|
85
|
-
fontWeight: 600
|
|
86
|
-
},
|
|
87
|
-
Title2: {
|
|
88
|
-
fontSize: 18,
|
|
89
|
-
lineHeight: 1.3,
|
|
67
|
+
lineHeight: 26,
|
|
90
68
|
fontWeight: 600
|
|
91
69
|
},
|
|
92
|
-
|
|
93
|
-
fontSize: 16,
|
|
94
|
-
lineHeight: 1.3,
|
|
95
|
-
fontWeight: 500
|
|
96
|
-
},
|
|
97
|
-
SubTitle2: {
|
|
98
|
-
fontSize: 14,
|
|
99
|
-
lineHeight: 1.3,
|
|
100
|
-
fontWeight: 500
|
|
101
|
-
},
|
|
102
|
-
// Body Style
|
|
103
|
-
DisplayBody: {
|
|
70
|
+
Display: {
|
|
104
71
|
fontSize: 20,
|
|
105
|
-
lineHeight:
|
|
106
|
-
fontWeight: 400
|
|
107
|
-
},
|
|
108
|
-
ArticleBody: {
|
|
109
|
-
fontSize: 18,
|
|
110
|
-
lineHeight: 1.45,
|
|
72
|
+
lineHeight: 26,
|
|
111
73
|
fontWeight: 400
|
|
112
74
|
},
|
|
113
|
-
|
|
114
|
-
fontSize: 18,
|
|
115
|
-
lineHeight: 1.55,
|
|
116
|
-
fontWeight: 400
|
|
117
|
-
},
|
|
118
|
-
Body1: {
|
|
75
|
+
Title2: {
|
|
119
76
|
fontSize: 16,
|
|
120
|
-
lineHeight:
|
|
121
|
-
fontWeight:
|
|
77
|
+
lineHeight: 26,
|
|
78
|
+
fontWeight: 600
|
|
122
79
|
},
|
|
123
|
-
|
|
80
|
+
ArticleBody: {
|
|
124
81
|
fontSize: 16,
|
|
125
|
-
lineHeight:
|
|
82
|
+
lineHeight: 26,
|
|
126
83
|
fontWeight: 400
|
|
127
84
|
},
|
|
128
|
-
|
|
85
|
+
Subtitle1: {
|
|
129
86
|
fontSize: 14,
|
|
130
|
-
lineHeight:
|
|
131
|
-
fontWeight:
|
|
87
|
+
lineHeight: 24,
|
|
88
|
+
fontWeight: 600
|
|
132
89
|
},
|
|
133
|
-
|
|
90
|
+
Body1: {
|
|
134
91
|
fontSize: 14,
|
|
135
|
-
lineHeight:
|
|
92
|
+
lineHeight: 24,
|
|
136
93
|
fontWeight: 400
|
|
137
94
|
},
|
|
138
|
-
|
|
95
|
+
Subtitle2: {
|
|
139
96
|
fontSize: 12,
|
|
140
|
-
lineHeight:
|
|
141
|
-
fontWeight:
|
|
97
|
+
lineHeight: 19,
|
|
98
|
+
fontWeight: 600
|
|
142
99
|
},
|
|
143
|
-
|
|
100
|
+
Body2: {
|
|
101
|
+
fontSize: 12,
|
|
102
|
+
lineHeight: 19,
|
|
103
|
+
fontWeight: 400
|
|
104
|
+
},
|
|
105
|
+
Caption: {
|
|
144
106
|
fontSize: 10,
|
|
145
|
-
lineHeight:
|
|
146
|
-
fontWeight:
|
|
107
|
+
lineHeight: 14,
|
|
108
|
+
fontWeight: 600
|
|
147
109
|
}
|
|
148
110
|
});
|
|
149
111
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nconst LEGACY_TYPOGRAPHY_STYLES = {\n Headline2_B: {\n fontSize: 24,\n lineHeight: 34,\n fontWeight: 600,\n },\n Headline3_B: {\n fontSize: 20,\n lineHeight: 26,\n fontWeight: 600,\n },\n Headline4_B: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 600,\n },\n Headline4_M: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 400,\n },\n Body1_B: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 600,\n },\n Body1_M: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 400,\n },\n Body2_B: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 600,\n },\n Body2_M: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 400,\n },\n Caption_B: {\n fontSize: 10,\n lineHeight: 14,\n fontWeight: 600,\n },\n} as const;\n\nexport const TYPOGRAPHY_STYLES = {\n ...LEGACY_TYPOGRAPHY_STYLES,\n Headline: {\n fontSize: 24,\n lineHeight: 34,\n fontWeight: 600,\n },\n Title1: {\n fontSize: 20,\n lineHeight: 26,\n fontWeight: 600,\n },\n Display: {\n fontSize: 20,\n lineHeight: 26,\n fontWeight: 400,\n },\n Title2: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 600,\n },\n ArticleBody: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 400,\n },\n Subtitle1: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 600,\n },\n Body1: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 400,\n },\n Subtitle2: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 600,\n },\n Body2: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 400,\n },\n Caption: {\n fontSize: 10,\n lineHeight: 14,\n fontWeight: 600,\n },\n} as const;\n\n/**\n * {@link https://github.com/orioncactus/pretendard#html-1}\n */\nexport const PRETENDARD_FONT_FAMILY =\n \"Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif\";\n"],"names":["LEGACY_TYPOGRAPHY_STYLES","Headline2_B","fontSize","lineHeight","fontWeight","Headline3_B","Headline4_B","Headline4_M","Body1_B","Body1_M","Body2_B","Body2_M","Caption_B","TYPOGRAPHY_STYLES","_objectSpread","Headline","Title1","Display","Title2","ArticleBody","Subtitle1","Body1","Subtitle2","Body2","Caption","PRETENDARD_FONT_FAMILY"],"mappings":";;;;;;;;;;AAAA;AACA,IAAMA,wBAAwB,GAAG;AAC/BC,EAAAA,WAAW,EAAE;AACXC,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDC,EAAAA,WAAW,EAAE;AACXH,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDE,EAAAA,WAAW,EAAE;AACXJ,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDG,EAAAA,WAAW,EAAE;AACXL,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDI,EAAAA,OAAO,EAAE;AACPN,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDK,EAAAA,OAAO,EAAE;AACPP,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDM,EAAAA,OAAO,EAAE;AACPR,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDO,EAAAA,OAAO,EAAE;AACPT,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDQ,EAAAA,SAAS,EAAE;AACTV,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;AACd,GAAA;AACF,CAAU,CAAA;IAEGS,iBAAiB,GAAAC,aAAA,CAAAA,aAAA,KACzBd,wBAAwB,CAAA,EAAA,EAAA,EAAA;AAC3Be,EAAAA,QAAQ,EAAE;AACRb,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDY,EAAAA,MAAM,EAAE;AACNd,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDa,EAAAA,OAAO,EAAE;AACPf,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDc,EAAAA,MAAM,EAAE;AACNhB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDe,EAAAA,WAAW,EAAE;AACXjB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDgB,EAAAA,SAAS,EAAE;AACTlB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDiB,EAAAA,KAAK,EAAE;AACLnB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDkB,EAAAA,SAAS,EAAE;AACTpB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDmB,EAAAA,KAAK,EAAE;AACLrB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDoB,EAAAA,OAAO,EAAE;AACPtB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,EAAE;AACdC,IAAAA,UAAU,EAAE,GAAA;AACd,GAAA;AAAC,CACO,EAAA;;AAEV;AACA;AACA;AACO,IAAMqB,sBAAsB,GACjC;;;;;"}
|
|
@@ -1,132 +1,97 @@
|
|
|
1
1
|
export declare const TYPOGRAPHY_STYLES: {
|
|
2
|
-
readonly Display1: {
|
|
3
|
-
readonly fontSize: 48;
|
|
4
|
-
readonly lineHeight: 1.3;
|
|
5
|
-
readonly fontWeight: 700;
|
|
6
|
-
};
|
|
7
|
-
readonly Display2: {
|
|
8
|
-
readonly fontSize: 40;
|
|
9
|
-
readonly lineHeight: 1.3;
|
|
10
|
-
readonly fontWeight: 700;
|
|
11
|
-
};
|
|
12
|
-
readonly Display3: {
|
|
13
|
-
readonly fontSize: 32;
|
|
14
|
-
readonly lineHeight: 1.3;
|
|
15
|
-
readonly fontWeight: 700;
|
|
16
|
-
};
|
|
17
2
|
readonly Headline: {
|
|
18
3
|
readonly fontSize: 24;
|
|
19
|
-
readonly lineHeight:
|
|
4
|
+
readonly lineHeight: 34;
|
|
20
5
|
readonly fontWeight: 600;
|
|
21
6
|
};
|
|
22
7
|
readonly Title1: {
|
|
23
8
|
readonly fontSize: 20;
|
|
24
|
-
readonly lineHeight:
|
|
25
|
-
readonly fontWeight: 600;
|
|
26
|
-
};
|
|
27
|
-
readonly Title2: {
|
|
28
|
-
readonly fontSize: 18;
|
|
29
|
-
readonly lineHeight: 1.3;
|
|
9
|
+
readonly lineHeight: 26;
|
|
30
10
|
readonly fontWeight: 600;
|
|
31
11
|
};
|
|
32
|
-
readonly
|
|
33
|
-
readonly fontSize: 16;
|
|
34
|
-
readonly lineHeight: 1.3;
|
|
35
|
-
readonly fontWeight: 500;
|
|
36
|
-
};
|
|
37
|
-
readonly SubTitle2: {
|
|
38
|
-
readonly fontSize: 14;
|
|
39
|
-
readonly lineHeight: 1.3;
|
|
40
|
-
readonly fontWeight: 500;
|
|
41
|
-
};
|
|
42
|
-
readonly DisplayBody: {
|
|
12
|
+
readonly Display: {
|
|
43
13
|
readonly fontSize: 20;
|
|
44
|
-
readonly lineHeight:
|
|
45
|
-
readonly fontWeight: 400;
|
|
46
|
-
};
|
|
47
|
-
readonly ArticleBody: {
|
|
48
|
-
readonly fontSize: 18;
|
|
49
|
-
readonly lineHeight: 1.45;
|
|
50
|
-
readonly fontWeight: 400;
|
|
51
|
-
};
|
|
52
|
-
readonly ArticleBodyReading: {
|
|
53
|
-
readonly fontSize: 18;
|
|
54
|
-
readonly lineHeight: 1.55;
|
|
14
|
+
readonly lineHeight: 26;
|
|
55
15
|
readonly fontWeight: 400;
|
|
56
16
|
};
|
|
57
|
-
readonly
|
|
17
|
+
readonly Title2: {
|
|
58
18
|
readonly fontSize: 16;
|
|
59
|
-
readonly lineHeight:
|
|
60
|
-
readonly fontWeight:
|
|
19
|
+
readonly lineHeight: 26;
|
|
20
|
+
readonly fontWeight: 600;
|
|
61
21
|
};
|
|
62
|
-
readonly
|
|
22
|
+
readonly ArticleBody: {
|
|
63
23
|
readonly fontSize: 16;
|
|
64
|
-
readonly lineHeight:
|
|
24
|
+
readonly lineHeight: 26;
|
|
65
25
|
readonly fontWeight: 400;
|
|
66
26
|
};
|
|
67
|
-
readonly
|
|
27
|
+
readonly Subtitle1: {
|
|
68
28
|
readonly fontSize: 14;
|
|
69
|
-
readonly lineHeight:
|
|
70
|
-
readonly fontWeight:
|
|
29
|
+
readonly lineHeight: 24;
|
|
30
|
+
readonly fontWeight: 600;
|
|
71
31
|
};
|
|
72
|
-
readonly
|
|
32
|
+
readonly Body1: {
|
|
73
33
|
readonly fontSize: 14;
|
|
74
|
-
readonly lineHeight:
|
|
34
|
+
readonly lineHeight: 24;
|
|
75
35
|
readonly fontWeight: 400;
|
|
76
36
|
};
|
|
77
|
-
readonly
|
|
37
|
+
readonly Subtitle2: {
|
|
78
38
|
readonly fontSize: 12;
|
|
79
|
-
readonly lineHeight:
|
|
80
|
-
readonly fontWeight:
|
|
39
|
+
readonly lineHeight: 19;
|
|
40
|
+
readonly fontWeight: 600;
|
|
81
41
|
};
|
|
82
|
-
readonly
|
|
42
|
+
readonly Body2: {
|
|
43
|
+
readonly fontSize: 12;
|
|
44
|
+
readonly lineHeight: 19;
|
|
45
|
+
readonly fontWeight: 400;
|
|
46
|
+
};
|
|
47
|
+
readonly Caption: {
|
|
83
48
|
readonly fontSize: 10;
|
|
84
|
-
readonly lineHeight:
|
|
85
|
-
readonly fontWeight:
|
|
49
|
+
readonly lineHeight: 14;
|
|
50
|
+
readonly fontWeight: 600;
|
|
86
51
|
};
|
|
87
52
|
readonly Headline2_B: {
|
|
88
53
|
readonly fontSize: 24;
|
|
89
|
-
readonly lineHeight:
|
|
54
|
+
readonly lineHeight: 34;
|
|
90
55
|
readonly fontWeight: 600;
|
|
91
56
|
};
|
|
92
57
|
readonly Headline3_B: {
|
|
93
58
|
readonly fontSize: 20;
|
|
94
|
-
readonly lineHeight:
|
|
59
|
+
readonly lineHeight: 26;
|
|
95
60
|
readonly fontWeight: 600;
|
|
96
61
|
};
|
|
97
62
|
readonly Headline4_B: {
|
|
98
63
|
readonly fontSize: 16;
|
|
99
|
-
readonly lineHeight:
|
|
64
|
+
readonly lineHeight: 26;
|
|
100
65
|
readonly fontWeight: 600;
|
|
101
66
|
};
|
|
102
67
|
readonly Headline4_M: {
|
|
103
68
|
readonly fontSize: 16;
|
|
104
|
-
readonly lineHeight:
|
|
69
|
+
readonly lineHeight: 26;
|
|
105
70
|
readonly fontWeight: 400;
|
|
106
71
|
};
|
|
107
72
|
readonly Body1_B: {
|
|
108
73
|
readonly fontSize: 14;
|
|
109
|
-
readonly lineHeight:
|
|
74
|
+
readonly lineHeight: 24;
|
|
110
75
|
readonly fontWeight: 600;
|
|
111
76
|
};
|
|
112
77
|
readonly Body1_M: {
|
|
113
78
|
readonly fontSize: 14;
|
|
114
|
-
readonly lineHeight:
|
|
79
|
+
readonly lineHeight: 24;
|
|
115
80
|
readonly fontWeight: 400;
|
|
116
81
|
};
|
|
117
82
|
readonly Body2_B: {
|
|
118
83
|
readonly fontSize: 12;
|
|
119
|
-
readonly lineHeight:
|
|
84
|
+
readonly lineHeight: 19;
|
|
120
85
|
readonly fontWeight: 600;
|
|
121
86
|
};
|
|
122
87
|
readonly Body2_M: {
|
|
123
88
|
readonly fontSize: 12;
|
|
124
|
-
readonly lineHeight:
|
|
89
|
+
readonly lineHeight: 19;
|
|
125
90
|
readonly fontWeight: 400;
|
|
126
91
|
};
|
|
127
92
|
readonly Caption_B: {
|
|
128
93
|
readonly fontSize: 10;
|
|
129
|
-
readonly lineHeight:
|
|
94
|
+
readonly lineHeight: 14;
|
|
130
95
|
readonly fontWeight: 600;
|
|
131
96
|
};
|
|
132
97
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../src/typography/const.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../src/typography/const.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB,iOAC6L,CAAC"}
|
|
@@ -3,141 +3,103 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
5
|
/* eslint-disable @typescript-eslint/naming-convention */
|
|
6
|
-
|
|
7
6
|
var LEGACY_TYPOGRAPHY_STYLES = {
|
|
8
7
|
Headline2_B: {
|
|
9
8
|
fontSize: 24,
|
|
10
|
-
lineHeight:
|
|
9
|
+
lineHeight: 34,
|
|
11
10
|
fontWeight: 600
|
|
12
11
|
},
|
|
13
12
|
Headline3_B: {
|
|
14
13
|
fontSize: 20,
|
|
15
|
-
lineHeight:
|
|
14
|
+
lineHeight: 26,
|
|
16
15
|
fontWeight: 600
|
|
17
16
|
},
|
|
18
17
|
Headline4_B: {
|
|
19
18
|
fontSize: 16,
|
|
20
|
-
lineHeight:
|
|
19
|
+
lineHeight: 26,
|
|
21
20
|
fontWeight: 600
|
|
22
21
|
},
|
|
23
22
|
Headline4_M: {
|
|
24
23
|
fontSize: 16,
|
|
25
|
-
lineHeight:
|
|
24
|
+
lineHeight: 26,
|
|
26
25
|
fontWeight: 400
|
|
27
26
|
},
|
|
28
27
|
Body1_B: {
|
|
29
28
|
fontSize: 14,
|
|
30
|
-
lineHeight:
|
|
29
|
+
lineHeight: 24,
|
|
31
30
|
fontWeight: 600
|
|
32
31
|
},
|
|
33
32
|
Body1_M: {
|
|
34
33
|
fontSize: 14,
|
|
35
|
-
lineHeight:
|
|
34
|
+
lineHeight: 24,
|
|
36
35
|
fontWeight: 400
|
|
37
36
|
},
|
|
38
37
|
Body2_B: {
|
|
39
38
|
fontSize: 12,
|
|
40
|
-
lineHeight:
|
|
39
|
+
lineHeight: 19,
|
|
41
40
|
fontWeight: 600
|
|
42
41
|
},
|
|
43
42
|
Body2_M: {
|
|
44
43
|
fontSize: 12,
|
|
45
|
-
lineHeight:
|
|
44
|
+
lineHeight: 19,
|
|
46
45
|
fontWeight: 400
|
|
47
46
|
},
|
|
48
47
|
Caption_B: {
|
|
49
48
|
fontSize: 10,
|
|
50
|
-
lineHeight:
|
|
49
|
+
lineHeight: 14,
|
|
51
50
|
fontWeight: 600
|
|
52
51
|
}
|
|
53
52
|
};
|
|
54
53
|
var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
|
|
55
|
-
// Title Style
|
|
56
|
-
Display1: {
|
|
57
|
-
fontSize: 48,
|
|
58
|
-
lineHeight: 1.3,
|
|
59
|
-
fontWeight: 700
|
|
60
|
-
},
|
|
61
|
-
Display2: {
|
|
62
|
-
fontSize: 40,
|
|
63
|
-
lineHeight: 1.3,
|
|
64
|
-
fontWeight: 700
|
|
65
|
-
},
|
|
66
|
-
Display3: {
|
|
67
|
-
fontSize: 32,
|
|
68
|
-
lineHeight: 1.3,
|
|
69
|
-
fontWeight: 700
|
|
70
|
-
},
|
|
71
54
|
Headline: {
|
|
72
55
|
fontSize: 24,
|
|
73
|
-
lineHeight:
|
|
56
|
+
lineHeight: 34,
|
|
74
57
|
fontWeight: 600
|
|
75
58
|
},
|
|
76
59
|
Title1: {
|
|
77
60
|
fontSize: 20,
|
|
78
|
-
lineHeight:
|
|
79
|
-
fontWeight: 600
|
|
80
|
-
},
|
|
81
|
-
Title2: {
|
|
82
|
-
fontSize: 18,
|
|
83
|
-
lineHeight: 1.3,
|
|
61
|
+
lineHeight: 26,
|
|
84
62
|
fontWeight: 600
|
|
85
63
|
},
|
|
86
|
-
|
|
87
|
-
fontSize: 16,
|
|
88
|
-
lineHeight: 1.3,
|
|
89
|
-
fontWeight: 500
|
|
90
|
-
},
|
|
91
|
-
SubTitle2: {
|
|
92
|
-
fontSize: 14,
|
|
93
|
-
lineHeight: 1.3,
|
|
94
|
-
fontWeight: 500
|
|
95
|
-
},
|
|
96
|
-
// Body Style
|
|
97
|
-
DisplayBody: {
|
|
64
|
+
Display: {
|
|
98
65
|
fontSize: 20,
|
|
99
|
-
lineHeight:
|
|
100
|
-
fontWeight: 400
|
|
101
|
-
},
|
|
102
|
-
ArticleBody: {
|
|
103
|
-
fontSize: 18,
|
|
104
|
-
lineHeight: 1.45,
|
|
66
|
+
lineHeight: 26,
|
|
105
67
|
fontWeight: 400
|
|
106
68
|
},
|
|
107
|
-
|
|
108
|
-
fontSize: 18,
|
|
109
|
-
lineHeight: 1.55,
|
|
110
|
-
fontWeight: 400
|
|
111
|
-
},
|
|
112
|
-
Body1: {
|
|
69
|
+
Title2: {
|
|
113
70
|
fontSize: 16,
|
|
114
|
-
lineHeight:
|
|
115
|
-
fontWeight:
|
|
71
|
+
lineHeight: 26,
|
|
72
|
+
fontWeight: 600
|
|
116
73
|
},
|
|
117
|
-
|
|
74
|
+
ArticleBody: {
|
|
118
75
|
fontSize: 16,
|
|
119
|
-
lineHeight:
|
|
76
|
+
lineHeight: 26,
|
|
120
77
|
fontWeight: 400
|
|
121
78
|
},
|
|
122
|
-
|
|
79
|
+
Subtitle1: {
|
|
123
80
|
fontSize: 14,
|
|
124
|
-
lineHeight:
|
|
125
|
-
fontWeight:
|
|
81
|
+
lineHeight: 24,
|
|
82
|
+
fontWeight: 600
|
|
126
83
|
},
|
|
127
|
-
|
|
84
|
+
Body1: {
|
|
128
85
|
fontSize: 14,
|
|
129
|
-
lineHeight:
|
|
86
|
+
lineHeight: 24,
|
|
130
87
|
fontWeight: 400
|
|
131
88
|
},
|
|
132
|
-
|
|
89
|
+
Subtitle2: {
|
|
133
90
|
fontSize: 12,
|
|
134
|
-
lineHeight:
|
|
135
|
-
fontWeight:
|
|
91
|
+
lineHeight: 19,
|
|
92
|
+
fontWeight: 600
|
|
136
93
|
},
|
|
137
|
-
|
|
94
|
+
Body2: {
|
|
95
|
+
fontSize: 12,
|
|
96
|
+
lineHeight: 19,
|
|
97
|
+
fontWeight: 400
|
|
98
|
+
},
|
|
99
|
+
Caption: {
|
|
138
100
|
fontSize: 10,
|
|
139
|
-
lineHeight:
|
|
140
|
-
fontWeight:
|
|
101
|
+
lineHeight: 14,
|
|
102
|
+
fontWeight: 600
|
|
141
103
|
}
|
|
142
104
|
});
|
|
143
105
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nconst LEGACY_TYPOGRAPHY_STYLES = {\n Headline2_B: {\n fontSize: 24,\n lineHeight: 34,\n fontWeight: 600,\n },\n Headline3_B: {\n fontSize: 20,\n lineHeight: 26,\n fontWeight: 600,\n },\n Headline4_B: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 600,\n },\n Headline4_M: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 400,\n },\n Body1_B: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 600,\n },\n Body1_M: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 400,\n },\n Body2_B: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 600,\n },\n Body2_M: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 400,\n },\n Caption_B: {\n fontSize: 10,\n lineHeight: 14,\n fontWeight: 600,\n },\n} as const;\n\nexport const TYPOGRAPHY_STYLES = {\n ...LEGACY_TYPOGRAPHY_STYLES,\n Headline: {\n fontSize: 24,\n lineHeight: 34,\n fontWeight: 600,\n },\n Title1: {\n fontSize: 20,\n lineHeight: 26,\n fontWeight: 600,\n },\n Display: {\n fontSize: 20,\n lineHeight: 26,\n fontWeight: 400,\n },\n Title2: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 600,\n },\n ArticleBody: {\n fontSize: 16,\n lineHeight: 26,\n fontWeight: 400,\n },\n Subtitle1: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 600,\n },\n Body1: {\n fontSize: 14,\n lineHeight: 24,\n fontWeight: 400,\n },\n Subtitle2: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 600,\n },\n Body2: {\n fontSize: 12,\n lineHeight: 19,\n fontWeight: 400,\n },\n Caption: {\n fontSize: 10,\n lineHeight: 14,\n fontWeight: 600,\n },\n} as const;\n\n/**\n * {@link https://github.com/orioncactus/pretendard#html-1}\n */\nexport const PRETENDARD_FONT_FAMILY =\n \"Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif\";\n"],"names":["LEGACY_TYPOGRAPHY_STYLES","Headline2_B","fontSize","lineHeight","fontWeight","Headline3_B","Headline4_B","Headline4_M","Body1_B","Body1_M","Body2_B","Body2_M","Caption_B","TYPOGRAPHY_STYLES","_objectSpread","Headline","Title1","Display","Title2","ArticleBody","Subtitle1","Body1","Subtitle2","Body2","Caption","PRETENDARD_FONT_FAMILY"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ var getTypographyStyles = function getTypographyStyles(typographyStyle) {
|
|
|
19
19
|
fontSize = _TYPOGRAPHY_STYLES$ty.fontSize,
|
|
20
20
|
lineHeight = _TYPOGRAPHY_STYLES$ty.lineHeight,
|
|
21
21
|
fontWeight = _TYPOGRAPHY_STYLES$ty.fontWeight;
|
|
22
|
-
return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n font-weight: ", ";\n "])), _const.PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
|
|
22
|
+
return styledComponents.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", "px;\n font-weight: ", ";\n "])), _const.PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight};\n font-weight: ${fontWeight};\n `;\n};\n\n/**\n * 말줄임표 표시 (1줄)\n *\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n */\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/**\n * 말줄임표 표시\n *\n * line = 1 인 경우, \\\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n *\n * line > 1 인 경우, \\\n * overflow: hidden; \\\n * text-overflow: ellipsis; \\\n * display: -webkit-box; \\\n * -webkit-box-orient: vertical; \\\n * -webkit-line-clamp: ${line};\n */\nexport const ellipsis = (line = 1) => {\n if (line === 1) {\n return textEllipsis;\n }\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${line};\n `;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAOb;AACA;AACA;AACA;;AAEE;;;;AAEA;AAMF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACsC;;AAElC;AACF;;AASF;;;;"}
|
|
1
|
+
{"version":3,"file":"utils.cjs.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n font-weight: ${fontWeight};\n `;\n};\n\n/**\n * 말줄임표 표시 (1줄)\n *\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n */\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/**\n * 말줄임표 표시\n *\n * line = 1 인 경우, \\\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n *\n * line > 1 인 경우, \\\n * overflow: hidden; \\\n * text-overflow: ellipsis; \\\n * display: -webkit-box; \\\n * -webkit-box-orient: vertical; \\\n * -webkit-line-clamp: ${line};\n */\nexport const ellipsis = (line = 1) => {\n if (line === 1) {\n return textEllipsis;\n }\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${line};\n `;\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAAa;AAOb;AACA;AACA;AACA;;AAEE;;;;AAEA;AAMF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACsC;;AAElC;AACF;;AASF;;;;"}
|
|
@@ -13,7 +13,7 @@ var getTypographyStyles = function getTypographyStyles(typographyStyle) {
|
|
|
13
13
|
fontSize = _TYPOGRAPHY_STYLES$ty.fontSize,
|
|
14
14
|
lineHeight = _TYPOGRAPHY_STYLES$ty.lineHeight,
|
|
15
15
|
fontWeight = _TYPOGRAPHY_STYLES$ty.fontWeight;
|
|
16
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n font-weight: ", ";\n "])), PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
|
|
16
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", "px;\n font-weight: ", ";\n "])), PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight};\n font-weight: ${fontWeight};\n `;\n};\n\n/**\n * 말줄임표 표시 (1줄)\n *\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n */\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/**\n * 말줄임표 표시\n *\n * line = 1 인 경우, \\\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n *\n * line > 1 인 경우, \\\n * overflow: hidden; \\\n * text-overflow: ellipsis; \\\n * display: -webkit-box; \\\n * -webkit-box-orient: vertical; \\\n * -webkit-line-clamp: ${line};\n */\nexport const ellipsis = (line = 1) => {\n if (line === 1) {\n return textEllipsis;\n }\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${line};\n `;\n};\n"],"names":[],"mappings":";;;;;AAAa;AAOb;AACA;AACA;AACA;;AAEE;;;;AAEA;AAMF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACsC;;AAElC;AACF;;AASF;;"}
|
|
1
|
+
{"version":3,"file":"utils.esm.js","sources":["../../../src/typography/utils.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\n\nimport { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './const';\nimport type { TypographyStyle } from './types';\n\n/**\n * 해당 스타일명에 해당하는 css 조각을 반환\n * @see TYPOGRAPHY_STYLES\n */\nexport const getTypographyStyles = (typographyStyle: TypographyStyle) => {\n const { fontSize, lineHeight, fontWeight } =\n TYPOGRAPHY_STYLES[typographyStyle];\n return css`\n font-family: ${PRETENDARD_FONT_FAMILY};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n font-weight: ${fontWeight};\n `;\n};\n\n/**\n * 말줄임표 표시 (1줄)\n *\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n */\nexport const textEllipsis = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\n/**\n * 말줄임표 표시\n *\n * line = 1 인 경우, \\\n * white-space: nowrap; \\\n * overflow: hidden; \\\n * text-overflow: ellipsis;\n *\n * line > 1 인 경우, \\\n * overflow: hidden; \\\n * text-overflow: ellipsis; \\\n * display: -webkit-box; \\\n * -webkit-box-orient: vertical; \\\n * -webkit-line-clamp: ${line};\n */\nexport const ellipsis = (line = 1) => {\n if (line === 1) {\n return textEllipsis;\n }\n\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${line};\n `;\n};\n"],"names":[],"mappings":";;;;;AAAa;AAOb;AACA;AACA;AACA;;AAEE;;;;AAEA;AAMF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACsC;;AAElC;AACF;;AASF;;"}
|
package/package.json
CHANGED
package/src/typography/const.ts
CHANGED
|
@@ -1,141 +1,103 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/naming-convention */
|
|
2
|
-
|
|
3
2
|
const LEGACY_TYPOGRAPHY_STYLES = {
|
|
4
3
|
Headline2_B: {
|
|
5
4
|
fontSize: 24,
|
|
6
|
-
lineHeight:
|
|
5
|
+
lineHeight: 34,
|
|
7
6
|
fontWeight: 600,
|
|
8
7
|
},
|
|
9
8
|
Headline3_B: {
|
|
10
9
|
fontSize: 20,
|
|
11
|
-
lineHeight:
|
|
10
|
+
lineHeight: 26,
|
|
12
11
|
fontWeight: 600,
|
|
13
12
|
},
|
|
14
13
|
Headline4_B: {
|
|
15
14
|
fontSize: 16,
|
|
16
|
-
lineHeight:
|
|
15
|
+
lineHeight: 26,
|
|
17
16
|
fontWeight: 600,
|
|
18
17
|
},
|
|
19
18
|
Headline4_M: {
|
|
20
19
|
fontSize: 16,
|
|
21
|
-
lineHeight:
|
|
20
|
+
lineHeight: 26,
|
|
22
21
|
fontWeight: 400,
|
|
23
22
|
},
|
|
24
23
|
Body1_B: {
|
|
25
24
|
fontSize: 14,
|
|
26
|
-
lineHeight:
|
|
25
|
+
lineHeight: 24,
|
|
27
26
|
fontWeight: 600,
|
|
28
27
|
},
|
|
29
28
|
Body1_M: {
|
|
30
29
|
fontSize: 14,
|
|
31
|
-
lineHeight:
|
|
30
|
+
lineHeight: 24,
|
|
32
31
|
fontWeight: 400,
|
|
33
32
|
},
|
|
34
33
|
Body2_B: {
|
|
35
34
|
fontSize: 12,
|
|
36
|
-
lineHeight:
|
|
35
|
+
lineHeight: 19,
|
|
37
36
|
fontWeight: 600,
|
|
38
37
|
},
|
|
39
38
|
Body2_M: {
|
|
40
39
|
fontSize: 12,
|
|
41
|
-
lineHeight:
|
|
40
|
+
lineHeight: 19,
|
|
42
41
|
fontWeight: 400,
|
|
43
42
|
},
|
|
44
43
|
Caption_B: {
|
|
45
44
|
fontSize: 10,
|
|
46
|
-
lineHeight:
|
|
45
|
+
lineHeight: 14,
|
|
47
46
|
fontWeight: 600,
|
|
48
47
|
},
|
|
49
48
|
} as const;
|
|
50
49
|
|
|
51
50
|
export const TYPOGRAPHY_STYLES = {
|
|
52
51
|
...LEGACY_TYPOGRAPHY_STYLES,
|
|
53
|
-
// Title Style
|
|
54
|
-
Display1: {
|
|
55
|
-
fontSize: 48,
|
|
56
|
-
lineHeight: 1.3,
|
|
57
|
-
fontWeight: 700,
|
|
58
|
-
},
|
|
59
|
-
Display2: {
|
|
60
|
-
fontSize: 40,
|
|
61
|
-
lineHeight: 1.3,
|
|
62
|
-
fontWeight: 700,
|
|
63
|
-
},
|
|
64
|
-
Display3: {
|
|
65
|
-
fontSize: 32,
|
|
66
|
-
lineHeight: 1.3,
|
|
67
|
-
fontWeight: 700,
|
|
68
|
-
},
|
|
69
52
|
Headline: {
|
|
70
53
|
fontSize: 24,
|
|
71
|
-
lineHeight:
|
|
54
|
+
lineHeight: 34,
|
|
72
55
|
fontWeight: 600,
|
|
73
56
|
},
|
|
74
57
|
Title1: {
|
|
75
58
|
fontSize: 20,
|
|
76
|
-
lineHeight:
|
|
77
|
-
fontWeight: 600,
|
|
78
|
-
},
|
|
79
|
-
Title2: {
|
|
80
|
-
fontSize: 18,
|
|
81
|
-
lineHeight: 1.3,
|
|
59
|
+
lineHeight: 26,
|
|
82
60
|
fontWeight: 600,
|
|
83
61
|
},
|
|
84
|
-
|
|
85
|
-
fontSize: 16,
|
|
86
|
-
lineHeight: 1.3,
|
|
87
|
-
fontWeight: 500,
|
|
88
|
-
},
|
|
89
|
-
SubTitle2: {
|
|
90
|
-
fontSize: 14,
|
|
91
|
-
lineHeight: 1.3,
|
|
92
|
-
fontWeight: 500,
|
|
93
|
-
},
|
|
94
|
-
// Body Style
|
|
95
|
-
DisplayBody: {
|
|
62
|
+
Display: {
|
|
96
63
|
fontSize: 20,
|
|
97
|
-
lineHeight:
|
|
98
|
-
fontWeight: 400,
|
|
99
|
-
},
|
|
100
|
-
ArticleBody: {
|
|
101
|
-
fontSize: 18,
|
|
102
|
-
lineHeight: 1.45,
|
|
64
|
+
lineHeight: 26,
|
|
103
65
|
fontWeight: 400,
|
|
104
66
|
},
|
|
105
|
-
|
|
106
|
-
fontSize: 18,
|
|
107
|
-
lineHeight: 1.55,
|
|
108
|
-
fontWeight: 400,
|
|
109
|
-
},
|
|
110
|
-
Body1: {
|
|
67
|
+
Title2: {
|
|
111
68
|
fontSize: 16,
|
|
112
|
-
lineHeight:
|
|
113
|
-
fontWeight:
|
|
69
|
+
lineHeight: 26,
|
|
70
|
+
fontWeight: 600,
|
|
114
71
|
},
|
|
115
|
-
|
|
72
|
+
ArticleBody: {
|
|
116
73
|
fontSize: 16,
|
|
117
|
-
lineHeight:
|
|
74
|
+
lineHeight: 26,
|
|
118
75
|
fontWeight: 400,
|
|
119
76
|
},
|
|
120
|
-
|
|
77
|
+
Subtitle1: {
|
|
121
78
|
fontSize: 14,
|
|
122
|
-
lineHeight:
|
|
123
|
-
fontWeight:
|
|
79
|
+
lineHeight: 24,
|
|
80
|
+
fontWeight: 600,
|
|
124
81
|
},
|
|
125
|
-
|
|
82
|
+
Body1: {
|
|
126
83
|
fontSize: 14,
|
|
127
|
-
lineHeight:
|
|
84
|
+
lineHeight: 24,
|
|
128
85
|
fontWeight: 400,
|
|
129
86
|
},
|
|
130
|
-
|
|
87
|
+
Subtitle2: {
|
|
131
88
|
fontSize: 12,
|
|
132
|
-
lineHeight:
|
|
133
|
-
fontWeight:
|
|
89
|
+
lineHeight: 19,
|
|
90
|
+
fontWeight: 600,
|
|
134
91
|
},
|
|
135
|
-
|
|
92
|
+
Body2: {
|
|
93
|
+
fontSize: 12,
|
|
94
|
+
lineHeight: 19,
|
|
95
|
+
fontWeight: 400,
|
|
96
|
+
},
|
|
97
|
+
Caption: {
|
|
136
98
|
fontSize: 10,
|
|
137
|
-
lineHeight:
|
|
138
|
-
fontWeight:
|
|
99
|
+
lineHeight: 14,
|
|
100
|
+
fontWeight: 600,
|
|
139
101
|
},
|
|
140
102
|
} as const;
|
|
141
103
|
|
package/src/typography/utils.ts
CHANGED
|
@@ -15,7 +15,7 @@ export const getTypographyStyles = (typographyStyle: TypographyStyle) => {
|
|
|
15
15
|
return css`
|
|
16
16
|
font-family: ${PRETENDARD_FONT_FAMILY};
|
|
17
17
|
font-size: ${fontSize}px;
|
|
18
|
-
line-height: ${lineHeight};
|
|
18
|
+
line-height: ${lineHeight}px;
|
|
19
19
|
font-weight: ${fontWeight};
|
|
20
20
|
`;
|
|
21
21
|
};
|