@remember-web/mixin 0.2.4 → 0.2.6

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 (14) hide show
  1. package/dist/src/typography/const.cjs.js +87 -66
  2. package/dist/src/typography/const.cjs.js.map +1 -1
  3. package/dist/src/typography/const.d.ts +81 -51
  4. package/dist/src/typography/const.d.ts.map +1 -1
  5. package/dist/src/typography/const.esm.js +87 -62
  6. package/dist/src/typography/const.esm.js.map +1 -1
  7. package/dist/src/typography/utils.cjs.js +1 -1
  8. package/dist/src/typography/utils.cjs.js.map +1 -1
  9. package/dist/src/typography/utils.esm.js +1 -1
  10. package/dist/src/typography/utils.esm.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/colors/color.stories.tsx +1 -1
  13. package/src/typography/const.ts +85 -58
  14. package/src/typography/utils.ts +1 -1
package/dist/src/typography/const.cjs.js CHANGED
@@ -1,113 +1,134 @@
1
1
  'use strict';
2
2
 
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
-
5
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
6
-
7
- var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
8
-
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
- 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
- /* eslint-disable @typescript-eslint/naming-convention */
12
- var LEGACY_TYPOGRAPHY_STYLES = {
13
- Headline2_B: {
3
+ var TYPOGRAPHY_STYLES = {
4
+ // Title Style
5
+ DisplayTitle1: {
6
+ fontSize: 48,
7
+ lineHeight: 1.3,
8
+ fontWeight: 700
9
+ },
10
+ DisplayTitle2: {
11
+ fontSize: 40,
12
+ lineHeight: 1.3,
13
+ fontWeight: 700
14
+ },
15
+ DisplayTitle3: {
16
+ fontSize: 32,
17
+ lineHeight: 1.3,
18
+ fontWeight: 700
19
+ },
20
+ Headline: {
14
21
  fontSize: 24,
15
- lineHeight: 34,
22
+ lineHeight: 1.3,
16
23
  fontWeight: 600
17
24
  },
18
- Headline3_B: {
25
+ Title1: {
19
26
  fontSize: 20,
20
- lineHeight: 26,
27
+ lineHeight: 1.3,
21
28
  fontWeight: 600
22
29
  },
23
- Headline4_B: {
24
- fontSize: 16,
25
- lineHeight: 26,
30
+ Title2: {
31
+ fontSize: 18,
32
+ lineHeight: 1.3,
26
33
  fontWeight: 600
27
34
  },
28
- Headline4_M: {
35
+ SubTitle1: {
29
36
  fontSize: 16,
30
- lineHeight: 26,
31
- fontWeight: 400
37
+ lineHeight: 1.3,
38
+ fontWeight: 600
32
39
  },
33
- Body1_B: {
40
+ SubTitle2: {
34
41
  fontSize: 14,
35
- lineHeight: 24,
42
+ lineHeight: 1.3,
36
43
  fontWeight: 600
37
44
  },
38
- Body1_M: {
39
- fontSize: 14,
40
- lineHeight: 24,
45
+ DisplayBody: {
46
+ fontSize: 20,
47
+ lineHeight: 1.45,
41
48
  fontWeight: 400
42
49
  },
43
- Body2_B: {
44
- fontSize: 12,
45
- lineHeight: 19,
50
+ // Body Style
51
+ UIBody1: {
52
+ fontSize: 18,
53
+ lineHeight: 1.45,
54
+ fontWeight: 400
55
+ },
56
+ UIBody1_B: {
57
+ fontSize: 18,
58
+ lineHeight: 1.45,
46
59
  fontWeight: 600
47
60
  },
48
- Body2_M: {
49
- fontSize: 12,
50
- lineHeight: 19,
61
+ UIBody2: {
62
+ fontSize: 16,
63
+ lineHeight: 1.45,
51
64
  fontWeight: 400
52
65
  },
53
- Caption_B: {
54
- fontSize: 10,
55
- lineHeight: 14,
56
- fontWeight: 600
57
- }
58
- };
59
- var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
60
- Headline: {
61
- fontSize: 24,
62
- lineHeight: 34,
66
+ UIBody2_B: {
67
+ fontSize: 16,
68
+ lineHeight: 1.45,
63
69
  fontWeight: 600
64
70
  },
65
- Title1: {
66
- fontSize: 20,
67
- lineHeight: 26,
71
+ UIBody3: {
72
+ fontSize: 14,
73
+ lineHeight: 1.45,
74
+ fontWeight: 400
75
+ },
76
+ UIBody3_B: {
77
+ fontSize: 14,
78
+ lineHeight: 1.45,
68
79
  fontWeight: 600
69
80
  },
70
- Display: {
71
- fontSize: 20,
72
- lineHeight: 26,
81
+ ArticleBody1: {
82
+ fontSize: 18,
83
+ lineHeight: 1.55,
73
84
  fontWeight: 400
74
85
  },
75
- Title2: {
76
- fontSize: 16,
77
- lineHeight: 26,
86
+ ArticleBody1_B: {
87
+ fontSize: 18,
88
+ lineHeight: 1.55,
78
89
  fontWeight: 600
79
90
  },
80
- ArticleBody: {
91
+ ArticleBody2: {
81
92
  fontSize: 16,
82
- lineHeight: 26,
93
+ lineHeight: 1.6,
83
94
  fontWeight: 400
84
95
  },
85
- Subtitle1: {
86
- fontSize: 14,
87
- lineHeight: 24,
96
+ ArticleBody2_B: {
97
+ fontSize: 16,
98
+ lineHeight: 1.6,
88
99
  fontWeight: 600
89
100
  },
90
- Body1: {
101
+ ArticleBody3: {
91
102
  fontSize: 14,
92
- lineHeight: 24,
103
+ lineHeight: 1.6,
93
104
  fontWeight: 400
94
105
  },
95
- Subtitle2: {
96
- fontSize: 12,
97
- lineHeight: 19,
106
+ ArticleBody3_B: {
107
+ fontSize: 14,
108
+ lineHeight: 1.6,
98
109
  fontWeight: 600
99
110
  },
100
- Body2: {
111
+ Caption1: {
101
112
  fontSize: 12,
102
- lineHeight: 19,
103
- fontWeight: 400
113
+ lineHeight: 1.35,
114
+ fontWeight: 500
104
115
  },
105
- Caption: {
116
+ Caption1_B: {
117
+ fontSize: 12,
118
+ lineHeight: 1.35,
119
+ fontWeight: 600
120
+ },
121
+ Caption2: {
106
122
  fontSize: 10,
107
- lineHeight: 14,
123
+ lineHeight: 1.35,
124
+ fontWeight: 500
125
+ },
126
+ Caption2_B: {
127
+ fontSize: 10,
128
+ lineHeight: 1.35,
108
129
  fontWeight: 600
109
130
  }
110
- });
131
+ };
111
132
 
112
133
  /**
113
134
  * {@link https://github.com/orioncactus/pretendard#html-1}
package/dist/src/typography/const.cjs.js.map CHANGED
@@ -1 +1 @@
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":"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"}
1
+ {"version":3,"file":"const.cjs.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["export const TYPOGRAPHY_STYLES = {\n // Title Style\n DisplayTitle1: {\n fontSize: 48,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n DisplayTitle2: {\n fontSize: 40,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n DisplayTitle3: {\n fontSize: 32,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Headline: {\n fontSize: 24,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title1: {\n fontSize: 20,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title2: {\n fontSize: 18,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n SubTitle1: {\n fontSize: 16,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n SubTitle2: {\n fontSize: 14,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n DisplayBody: {\n fontSize: 20,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n // Body Style\n UIBody1: {\n fontSize: 18,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody1_B: {\n fontSize: 18,\n lineHeight: 1.45,\n fontWeight: 600,\n },\n UIBody2: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody2_B: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 600,\n },\n UIBody3: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody3_B: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 600,\n },\n ArticleBody1: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 400,\n },\n ArticleBody1_B: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 600,\n },\n ArticleBody2: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n ArticleBody2_B: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 600,\n },\n ArticleBody3: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n ArticleBody3_B: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 600,\n },\n Caption1: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption1_B: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 600,\n },\n Caption2: {\n fontSize: 10,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption2_B: {\n fontSize: 10,\n lineHeight: 1.35,\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":["TYPOGRAPHY_STYLES","DisplayTitle1","fontSize","lineHeight","fontWeight","DisplayTitle2","DisplayTitle3","Headline","Title1","Title2","SubTitle1","SubTitle2","DisplayBody","UIBody1","UIBody1_B","UIBody2","UIBody2_B","UIBody3","UIBody3_B","ArticleBody1","ArticleBody1_B","ArticleBody2","ArticleBody2_B","ArticleBody3","ArticleBody3_B","Caption1","Caption1_B","Caption2","Caption2_B","PRETENDARD_FONT_FAMILY"],"mappings":"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"}
package/dist/src/typography/const.d.ts CHANGED
@@ -1,97 +1,127 @@
1
1
  export declare const TYPOGRAPHY_STYLES: {
2
+ readonly DisplayTitle1: {
3
+ readonly fontSize: 48;
4
+ readonly lineHeight: 1.3;
5
+ readonly fontWeight: 700;
6
+ };
7
+ readonly DisplayTitle2: {
8
+ readonly fontSize: 40;
9
+ readonly lineHeight: 1.3;
10
+ readonly fontWeight: 700;
11
+ };
12
+ readonly DisplayTitle3: {
13
+ readonly fontSize: 32;
14
+ readonly lineHeight: 1.3;
15
+ readonly fontWeight: 700;
16
+ };
2
17
  readonly Headline: {
3
18
  readonly fontSize: 24;
4
- readonly lineHeight: 34;
19
+ readonly lineHeight: 1.3;
5
20
  readonly fontWeight: 600;
6
21
  };
7
22
  readonly Title1: {
8
23
  readonly fontSize: 20;
9
- readonly lineHeight: 26;
24
+ readonly lineHeight: 1.3;
10
25
  readonly fontWeight: 600;
11
26
  };
12
- readonly Display: {
13
- readonly fontSize: 20;
14
- readonly lineHeight: 26;
15
- readonly fontWeight: 400;
16
- };
17
27
  readonly Title2: {
18
- readonly fontSize: 16;
19
- readonly lineHeight: 26;
28
+ readonly fontSize: 18;
29
+ readonly lineHeight: 1.3;
20
30
  readonly fontWeight: 600;
21
31
  };
22
- readonly ArticleBody: {
32
+ readonly SubTitle1: {
23
33
  readonly fontSize: 16;
24
- readonly lineHeight: 26;
25
- readonly fontWeight: 400;
34
+ readonly lineHeight: 1.3;
35
+ readonly fontWeight: 600;
26
36
  };
27
- readonly Subtitle1: {
37
+ readonly SubTitle2: {
28
38
  readonly fontSize: 14;
29
- readonly lineHeight: 24;
39
+ readonly lineHeight: 1.3;
30
40
  readonly fontWeight: 600;
31
41
  };
32
- readonly Body1: {
33
- readonly fontSize: 14;
34
- readonly lineHeight: 24;
42
+ readonly DisplayBody: {
43
+ readonly fontSize: 20;
44
+ readonly lineHeight: 1.45;
35
45
  readonly fontWeight: 400;
36
46
  };
37
- readonly Subtitle2: {
38
- readonly fontSize: 12;
39
- readonly lineHeight: 19;
47
+ readonly UIBody1: {
48
+ readonly fontSize: 18;
49
+ readonly lineHeight: 1.45;
50
+ readonly fontWeight: 400;
51
+ };
52
+ readonly UIBody1_B: {
53
+ readonly fontSize: 18;
54
+ readonly lineHeight: 1.45;
40
55
  readonly fontWeight: 600;
41
56
  };
42
- readonly Body2: {
43
- readonly fontSize: 12;
44
- readonly lineHeight: 19;
57
+ readonly UIBody2: {
58
+ readonly fontSize: 16;
59
+ readonly lineHeight: 1.45;
45
60
  readonly fontWeight: 400;
46
61
  };
47
- readonly Caption: {
48
- readonly fontSize: 10;
49
- readonly lineHeight: 14;
62
+ readonly UIBody2_B: {
63
+ readonly fontSize: 16;
64
+ readonly lineHeight: 1.45;
50
65
  readonly fontWeight: 600;
51
66
  };
52
- readonly Headline2_B: {
53
- readonly fontSize: 24;
54
- readonly lineHeight: 34;
55
- readonly fontWeight: 600;
67
+ readonly UIBody3: {
68
+ readonly fontSize: 14;
69
+ readonly lineHeight: 1.45;
70
+ readonly fontWeight: 400;
56
71
  };
57
- readonly Headline3_B: {
58
- readonly fontSize: 20;
59
- readonly lineHeight: 26;
72
+ readonly UIBody3_B: {
73
+ readonly fontSize: 14;
74
+ readonly lineHeight: 1.45;
60
75
  readonly fontWeight: 600;
61
76
  };
62
- readonly Headline4_B: {
63
- readonly fontSize: 16;
64
- readonly lineHeight: 26;
77
+ readonly ArticleBody1: {
78
+ readonly fontSize: 18;
79
+ readonly lineHeight: 1.55;
80
+ readonly fontWeight: 400;
81
+ };
82
+ readonly ArticleBody1_B: {
83
+ readonly fontSize: 18;
84
+ readonly lineHeight: 1.55;
65
85
  readonly fontWeight: 600;
66
86
  };
67
- readonly Headline4_M: {
87
+ readonly ArticleBody2: {
68
88
  readonly fontSize: 16;
69
- readonly lineHeight: 26;
89
+ readonly lineHeight: 1.6;
70
90
  readonly fontWeight: 400;
71
91
  };
72
- readonly Body1_B: {
73
- readonly fontSize: 14;
74
- readonly lineHeight: 24;
92
+ readonly ArticleBody2_B: {
93
+ readonly fontSize: 16;
94
+ readonly lineHeight: 1.6;
75
95
  readonly fontWeight: 600;
76
96
  };
77
- readonly Body1_M: {
97
+ readonly ArticleBody3: {
78
98
  readonly fontSize: 14;
79
- readonly lineHeight: 24;
99
+ readonly lineHeight: 1.6;
80
100
  readonly fontWeight: 400;
81
101
  };
82
- readonly Body2_B: {
83
- readonly fontSize: 12;
84
- readonly lineHeight: 19;
102
+ readonly ArticleBody3_B: {
103
+ readonly fontSize: 14;
104
+ readonly lineHeight: 1.6;
85
105
  readonly fontWeight: 600;
86
106
  };
87
- readonly Body2_M: {
107
+ readonly Caption1: {
88
108
  readonly fontSize: 12;
89
- readonly lineHeight: 19;
90
- readonly fontWeight: 400;
109
+ readonly lineHeight: 1.35;
110
+ readonly fontWeight: 500;
111
+ };
112
+ readonly Caption1_B: {
113
+ readonly fontSize: 12;
114
+ readonly lineHeight: 1.35;
115
+ readonly fontWeight: 600;
116
+ };
117
+ readonly Caption2: {
118
+ readonly fontSize: 10;
119
+ readonly lineHeight: 1.35;
120
+ readonly fontWeight: 500;
91
121
  };
92
- readonly Caption_B: {
122
+ readonly Caption2_B: {
93
123
  readonly fontSize: 10;
94
- readonly lineHeight: 14;
124
+ readonly lineHeight: 1.35;
95
125
  readonly fontWeight: 600;
96
126
  };
97
127
  };
package/dist/src/typography/const.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../src/typography/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB,iOAC6L,CAAC"}
package/dist/src/typography/const.esm.js CHANGED
@@ -1,107 +1,132 @@
1
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
-
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
- 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
- /* eslint-disable @typescript-eslint/naming-convention */
6
- var LEGACY_TYPOGRAPHY_STYLES = {
7
- Headline2_B: {
1
+ var TYPOGRAPHY_STYLES = {
2
+ // Title Style
3
+ DisplayTitle1: {
4
+ fontSize: 48,
5
+ lineHeight: 1.3,
6
+ fontWeight: 700
7
+ },
8
+ DisplayTitle2: {
9
+ fontSize: 40,
10
+ lineHeight: 1.3,
11
+ fontWeight: 700
12
+ },
13
+ DisplayTitle3: {
14
+ fontSize: 32,
15
+ lineHeight: 1.3,
16
+ fontWeight: 700
17
+ },
18
+ Headline: {
8
19
  fontSize: 24,
9
- lineHeight: 34,
20
+ lineHeight: 1.3,
10
21
  fontWeight: 600
11
22
  },
12
- Headline3_B: {
23
+ Title1: {
13
24
  fontSize: 20,
14
- lineHeight: 26,
25
+ lineHeight: 1.3,
15
26
  fontWeight: 600
16
27
  },
17
- Headline4_B: {
18
- fontSize: 16,
19
- lineHeight: 26,
28
+ Title2: {
29
+ fontSize: 18,
30
+ lineHeight: 1.3,
20
31
  fontWeight: 600
21
32
  },
22
- Headline4_M: {
33
+ SubTitle1: {
23
34
  fontSize: 16,
24
- lineHeight: 26,
25
- fontWeight: 400
35
+ lineHeight: 1.3,
36
+ fontWeight: 600
26
37
  },
27
- Body1_B: {
38
+ SubTitle2: {
28
39
  fontSize: 14,
29
- lineHeight: 24,
40
+ lineHeight: 1.3,
30
41
  fontWeight: 600
31
42
  },
32
- Body1_M: {
33
- fontSize: 14,
34
- lineHeight: 24,
43
+ DisplayBody: {
44
+ fontSize: 20,
45
+ lineHeight: 1.45,
35
46
  fontWeight: 400
36
47
  },
37
- Body2_B: {
38
- fontSize: 12,
39
- lineHeight: 19,
48
+ // Body Style
49
+ UIBody1: {
50
+ fontSize: 18,
51
+ lineHeight: 1.45,
52
+ fontWeight: 400
53
+ },
54
+ UIBody1_B: {
55
+ fontSize: 18,
56
+ lineHeight: 1.45,
40
57
  fontWeight: 600
41
58
  },
42
- Body2_M: {
43
- fontSize: 12,
44
- lineHeight: 19,
59
+ UIBody2: {
60
+ fontSize: 16,
61
+ lineHeight: 1.45,
45
62
  fontWeight: 400
46
63
  },
47
- Caption_B: {
48
- fontSize: 10,
49
- lineHeight: 14,
50
- fontWeight: 600
51
- }
52
- };
53
- var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES), {}, {
54
- Headline: {
55
- fontSize: 24,
56
- lineHeight: 34,
64
+ UIBody2_B: {
65
+ fontSize: 16,
66
+ lineHeight: 1.45,
57
67
  fontWeight: 600
58
68
  },
59
- Title1: {
60
- fontSize: 20,
61
- lineHeight: 26,
69
+ UIBody3: {
70
+ fontSize: 14,
71
+ lineHeight: 1.45,
72
+ fontWeight: 400
73
+ },
74
+ UIBody3_B: {
75
+ fontSize: 14,
76
+ lineHeight: 1.45,
62
77
  fontWeight: 600
63
78
  },
64
- Display: {
65
- fontSize: 20,
66
- lineHeight: 26,
79
+ ArticleBody1: {
80
+ fontSize: 18,
81
+ lineHeight: 1.55,
67
82
  fontWeight: 400
68
83
  },
69
- Title2: {
70
- fontSize: 16,
71
- lineHeight: 26,
84
+ ArticleBody1_B: {
85
+ fontSize: 18,
86
+ lineHeight: 1.55,
72
87
  fontWeight: 600
73
88
  },
74
- ArticleBody: {
89
+ ArticleBody2: {
75
90
  fontSize: 16,
76
- lineHeight: 26,
91
+ lineHeight: 1.6,
77
92
  fontWeight: 400
78
93
  },
79
- Subtitle1: {
80
- fontSize: 14,
81
- lineHeight: 24,
94
+ ArticleBody2_B: {
95
+ fontSize: 16,
96
+ lineHeight: 1.6,
82
97
  fontWeight: 600
83
98
  },
84
- Body1: {
99
+ ArticleBody3: {
85
100
  fontSize: 14,
86
- lineHeight: 24,
101
+ lineHeight: 1.6,
87
102
  fontWeight: 400
88
103
  },
89
- Subtitle2: {
90
- fontSize: 12,
91
- lineHeight: 19,
104
+ ArticleBody3_B: {
105
+ fontSize: 14,
106
+ lineHeight: 1.6,
92
107
  fontWeight: 600
93
108
  },
94
- Body2: {
109
+ Caption1: {
95
110
  fontSize: 12,
96
- lineHeight: 19,
97
- fontWeight: 400
111
+ lineHeight: 1.35,
112
+ fontWeight: 500
113
+ },
114
+ Caption1_B: {
115
+ fontSize: 12,
116
+ lineHeight: 1.35,
117
+ fontWeight: 600
98
118
  },
99
- Caption: {
119
+ Caption2: {
100
120
  fontSize: 10,
101
- lineHeight: 14,
121
+ lineHeight: 1.35,
122
+ fontWeight: 500
123
+ },
124
+ Caption2_B: {
125
+ fontSize: 10,
126
+ lineHeight: 1.35,
102
127
  fontWeight: 600
103
128
  }
104
- });
129
+ };
105
130
 
106
131
  /**
107
132
  * {@link https://github.com/orioncactus/pretendard#html-1}
package/dist/src/typography/const.esm.js.map CHANGED
@@ -1 +1 @@
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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"}
1
+ {"version":3,"file":"const.esm.js","sources":["../../../src/typography/const.ts"],"sourcesContent":["export const TYPOGRAPHY_STYLES = {\n // Title Style\n DisplayTitle1: {\n fontSize: 48,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n DisplayTitle2: {\n fontSize: 40,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n DisplayTitle3: {\n fontSize: 32,\n lineHeight: 1.3,\n fontWeight: 700,\n },\n Headline: {\n fontSize: 24,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title1: {\n fontSize: 20,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n Title2: {\n fontSize: 18,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n SubTitle1: {\n fontSize: 16,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n SubTitle2: {\n fontSize: 14,\n lineHeight: 1.3,\n fontWeight: 600,\n },\n DisplayBody: {\n fontSize: 20,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n // Body Style\n UIBody1: {\n fontSize: 18,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody1_B: {\n fontSize: 18,\n lineHeight: 1.45,\n fontWeight: 600,\n },\n UIBody2: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody2_B: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 600,\n },\n UIBody3: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody3_B: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 600,\n },\n ArticleBody1: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 400,\n },\n ArticleBody1_B: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 600,\n },\n ArticleBody2: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n ArticleBody2_B: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 600,\n },\n ArticleBody3: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n ArticleBody3_B: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 600,\n },\n Caption1: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption1_B: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 600,\n },\n Caption2: {\n fontSize: 10,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption2_B: {\n fontSize: 10,\n lineHeight: 1.35,\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":["TYPOGRAPHY_STYLES","DisplayTitle1","fontSize","lineHeight","fontWeight","DisplayTitle2","DisplayTitle3","Headline","Title1","Title2","SubTitle1","SubTitle2","DisplayBody","UIBody1","UIBody1_B","UIBody2","UIBody2_B","UIBody3","UIBody3_B","ArticleBody1","ArticleBody1_B","ArticleBody2","ArticleBody2_B","ArticleBody3","ArticleBody3_B","Caption1","Caption1_B","Caption2","Caption2_B","PRETENDARD_FONT_FAMILY"],"mappings":"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"}
package/dist/src/typography/utils.cjs.js CHANGED
@@ -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: ", "px;\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: ", ";\n font-weight: ", ";\n "])), _const.PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
23
23
  };
24
24
 
25
25
  /**
package/dist/src/typography/utils.cjs.js.map CHANGED
@@ -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}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;;;;"}
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;;;;"}
package/dist/src/typography/utils.esm.js CHANGED
@@ -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: ", "px;\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: ", ";\n font-weight: ", ";\n "])), PRETENDARD_FONT_FAMILY, fontSize, lineHeight, fontWeight);
17
17
  };
18
18
 
19
19
  /**
package/dist/src/typography/utils.esm.js.map CHANGED
@@ -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}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;;"}
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;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remember-web/mixin",
3
- "version": "0.2.4",
3
+ "version": "0.2.6",
4
4
  "description": "Remember Web Mixins",
5
5
  "homepage": "https://dramancompany.github.io/remember-web-packages/",
6
6
  "author": "Remember",
package/src/colors/color.stories.tsx CHANGED
@@ -31,7 +31,7 @@ const ColorChip = ({
31
31
  style={{ padding: 8, display: 'flex', justifyContent: 'space-between' }}
32
32
  >
33
33
  <Typography variant="Title1">{colorName}</Typography>
34
- <Typography variant="Body1" color={colors.contents100}>
34
+ <Typography variant="UIBody2" color={colors.contents100}>
35
35
  {getHexFromRuiCssVariable({
36
36
  colorVariable: color as RUIColorVariable,
37
37
  theme,
package/src/typography/const.ts CHANGED
@@ -1,102 +1,129 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
- const LEGACY_TYPOGRAPHY_STYLES = {
3
- Headline2_B: {
1
+ export const TYPOGRAPHY_STYLES = {
2
+ // Title Style
3
+ DisplayTitle1: {
4
+ fontSize: 48,
5
+ lineHeight: 1.3,
6
+ fontWeight: 700,
7
+ },
8
+ DisplayTitle2: {
9
+ fontSize: 40,
10
+ lineHeight: 1.3,
11
+ fontWeight: 700,
12
+ },
13
+ DisplayTitle3: {
14
+ fontSize: 32,
15
+ lineHeight: 1.3,
16
+ fontWeight: 700,
17
+ },
18
+ Headline: {
4
19
  fontSize: 24,
5
- lineHeight: 34,
20
+ lineHeight: 1.3,
6
21
  fontWeight: 600,
7
22
  },
8
- Headline3_B: {
23
+ Title1: {
9
24
  fontSize: 20,
10
- lineHeight: 26,
25
+ lineHeight: 1.3,
11
26
  fontWeight: 600,
12
27
  },
13
- Headline4_B: {
14
- fontSize: 16,
15
- lineHeight: 26,
28
+ Title2: {
29
+ fontSize: 18,
30
+ lineHeight: 1.3,
16
31
  fontWeight: 600,
17
32
  },
18
- Headline4_M: {
33
+ SubTitle1: {
19
34
  fontSize: 16,
20
- lineHeight: 26,
21
- fontWeight: 400,
35
+ lineHeight: 1.3,
36
+ fontWeight: 600,
22
37
  },
23
- Body1_B: {
38
+ SubTitle2: {
24
39
  fontSize: 14,
25
- lineHeight: 24,
40
+ lineHeight: 1.3,
26
41
  fontWeight: 600,
27
42
  },
28
- Body1_M: {
29
- fontSize: 14,
30
- lineHeight: 24,
43
+ DisplayBody: {
44
+ fontSize: 20,
45
+ lineHeight: 1.45,
31
46
  fontWeight: 400,
32
47
  },
33
- Body2_B: {
34
- fontSize: 12,
35
- lineHeight: 19,
48
+ // Body Style
49
+ UIBody1: {
50
+ fontSize: 18,
51
+ lineHeight: 1.45,
52
+ fontWeight: 400,
53
+ },
54
+ UIBody1_B: {
55
+ fontSize: 18,
56
+ lineHeight: 1.45,
36
57
  fontWeight: 600,
37
58
  },
38
- Body2_M: {
39
- fontSize: 12,
40
- lineHeight: 19,
59
+ UIBody2: {
60
+ fontSize: 16,
61
+ lineHeight: 1.45,
41
62
  fontWeight: 400,
42
63
  },
43
- Caption_B: {
44
- fontSize: 10,
45
- lineHeight: 14,
64
+ UIBody2_B: {
65
+ fontSize: 16,
66
+ lineHeight: 1.45,
46
67
  fontWeight: 600,
47
68
  },
48
- } as const;
49
-
50
- export const TYPOGRAPHY_STYLES = {
51
- ...LEGACY_TYPOGRAPHY_STYLES,
52
- Headline: {
53
- fontSize: 24,
54
- lineHeight: 34,
55
- fontWeight: 600,
69
+ UIBody3: {
70
+ fontSize: 14,
71
+ lineHeight: 1.45,
72
+ fontWeight: 400,
56
73
  },
57
- Title1: {
58
- fontSize: 20,
59
- lineHeight: 26,
74
+ UIBody3_B: {
75
+ fontSize: 14,
76
+ lineHeight: 1.45,
60
77
  fontWeight: 600,
61
78
  },
62
- Display: {
63
- fontSize: 20,
64
- lineHeight: 26,
79
+ ArticleBody1: {
80
+ fontSize: 18,
81
+ lineHeight: 1.55,
65
82
  fontWeight: 400,
66
83
  },
67
- Title2: {
68
- fontSize: 16,
69
- lineHeight: 26,
84
+ ArticleBody1_B: {
85
+ fontSize: 18,
86
+ lineHeight: 1.55,
70
87
  fontWeight: 600,
71
88
  },
72
- ArticleBody: {
89
+ ArticleBody2: {
73
90
  fontSize: 16,
74
- lineHeight: 26,
91
+ lineHeight: 1.6,
75
92
  fontWeight: 400,
76
93
  },
77
- Subtitle1: {
78
- fontSize: 14,
79
- lineHeight: 24,
94
+ ArticleBody2_B: {
95
+ fontSize: 16,
96
+ lineHeight: 1.6,
80
97
  fontWeight: 600,
81
98
  },
82
- Body1: {
99
+ ArticleBody3: {
83
100
  fontSize: 14,
84
- lineHeight: 24,
101
+ lineHeight: 1.6,
85
102
  fontWeight: 400,
86
103
  },
87
- Subtitle2: {
88
- fontSize: 12,
89
- lineHeight: 19,
104
+ ArticleBody3_B: {
105
+ fontSize: 14,
106
+ lineHeight: 1.6,
90
107
  fontWeight: 600,
91
108
  },
92
- Body2: {
109
+ Caption1: {
93
110
  fontSize: 12,
94
- lineHeight: 19,
95
- fontWeight: 400,
111
+ lineHeight: 1.35,
112
+ fontWeight: 500,
113
+ },
114
+ Caption1_B: {
115
+ fontSize: 12,
116
+ lineHeight: 1.35,
117
+ fontWeight: 600,
118
+ },
119
+ Caption2: {
120
+ fontSize: 10,
121
+ lineHeight: 1.35,
122
+ fontWeight: 500,
96
123
  },
97
- Caption: {
124
+ Caption2_B: {
98
125
  fontSize: 10,
99
- lineHeight: 14,
126
+ lineHeight: 1.35,
100
127
  fontWeight: 600,
101
128
  },
102
129
  } as const;
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}px;
18
+ line-height: ${lineHeight};
19
19
  font-weight: ${fontWeight};
20
20
  `;
21
21
  };