@remember-web/mixin 0.2.4 → 0.2.5

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 +58 -77
  2. package/dist/src/typography/const.cjs.js.map +1 -1
  3. package/dist/src/typography/const.d.ts +52 -62
  4. package/dist/src/typography/const.d.ts.map +1 -1
  5. package/dist/src/typography/const.esm.js +58 -73
  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 +57 -70
  14. package/src/typography/utils.ts +1 -1
package/dist/src/typography/const.cjs.js CHANGED
@@ -1,113 +1,94 @@
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
32
- },
33
- Body1_B: {
34
- fontSize: 14,
35
- lineHeight: 24,
37
+ lineHeight: 1.3,
36
38
  fontWeight: 600
37
39
  },
38
- Body1_M: {
40
+ SubTitle2: {
39
41
  fontSize: 14,
40
- lineHeight: 24,
41
- fontWeight: 400
42
- },
43
- Body2_B: {
44
- fontSize: 12,
45
- lineHeight: 19,
42
+ lineHeight: 1.3,
46
43
  fontWeight: 600
47
44
  },
48
- Body2_M: {
49
- fontSize: 12,
50
- lineHeight: 19,
45
+ DisplayBody: {
46
+ fontSize: 20,
47
+ lineHeight: 1.45,
51
48
  fontWeight: 400
52
49
  },
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,
63
- fontWeight: 600
50
+ // Body Style
51
+ UIBody1: {
52
+ fontSize: 18,
53
+ lineHeight: 1.45,
54
+ fontWeight: 400
64
55
  },
65
- Title1: {
66
- fontSize: 20,
67
- lineHeight: 26,
68
- fontWeight: 600
56
+ UIBody2: {
57
+ fontSize: 16,
58
+ lineHeight: 1.45,
59
+ fontWeight: 400
69
60
  },
70
- Display: {
71
- fontSize: 20,
72
- lineHeight: 26,
61
+ UIBody3: {
62
+ fontSize: 14,
63
+ lineHeight: 1.45,
73
64
  fontWeight: 400
74
65
  },
75
- Title2: {
76
- fontSize: 16,
77
- lineHeight: 26,
78
- fontWeight: 600
66
+ ArticleBody1: {
67
+ fontSize: 18,
68
+ lineHeight: 1.55,
69
+ fontWeight: 400
79
70
  },
80
- ArticleBody: {
71
+ ArticleBody2: {
81
72
  fontSize: 16,
82
- lineHeight: 26,
73
+ lineHeight: 1.6,
83
74
  fontWeight: 400
84
75
  },
85
- Subtitle1: {
86
- fontSize: 14,
87
- lineHeight: 24,
88
- fontWeight: 600
89
- },
90
- Body1: {
76
+ ArticleBody3: {
91
77
  fontSize: 14,
92
- lineHeight: 24,
78
+ lineHeight: 1.6,
93
79
  fontWeight: 400
94
80
  },
95
- Subtitle2: {
81
+ Caption1: {
96
82
  fontSize: 12,
97
- lineHeight: 19,
98
- fontWeight: 600
83
+ lineHeight: 1.35,
84
+ fontWeight: 500
99
85
  },
100
- Body2: {
101
- fontSize: 12,
102
- lineHeight: 19,
103
- fontWeight: 400
104
- },
105
- Caption: {
86
+ Caption2: {
106
87
  fontSize: 10,
107
- lineHeight: 14,
108
- fontWeight: 600
88
+ lineHeight: 1.35,
89
+ fontWeight: 500
109
90
  }
110
- });
91
+ };
111
92
 
112
93
  /**
113
94
  * {@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 UIBody2: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody3: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n ArticleBody1: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 400,\n },\n ArticleBody2: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n ArticleBody3: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n Caption1: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption2: {\n fontSize: 10,\n lineHeight: 1.35,\n fontWeight: 500,\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","UIBody2","UIBody3","ArticleBody1","ArticleBody2","ArticleBody3","Caption1","Caption2","PRETENDARD_FONT_FAMILY"],"mappings":";;AAAO,IAAMA,iBAAiB,GAAG;AAC/B;AACAC,EAAAA,aAAa,EAAE;AACbC,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDC,EAAAA,aAAa,EAAE;AACbH,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDE,EAAAA,aAAa,EAAE;AACbJ,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDG,EAAAA,QAAQ,EAAE;AACRL,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDI,EAAAA,MAAM,EAAE;AACNN,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDK,EAAAA,MAAM,EAAE;AACNP,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDM,EAAAA,SAAS,EAAE;AACTR,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDO,EAAAA,SAAS,EAAE;AACTT,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDQ,EAAAA,WAAW,EAAE;AACXV,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACD;AACAS,EAAAA,OAAO,EAAE;AACPX,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDU,EAAAA,OAAO,EAAE;AACPZ,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDW,EAAAA,OAAO,EAAE;AACPb,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDY,EAAAA,YAAY,EAAE;AACZd,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDa,EAAAA,YAAY,EAAE;AACZf,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDc,EAAAA,YAAY,EAAE;AACZhB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDe,EAAAA,QAAQ,EAAE;AACRjB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDgB,EAAAA,QAAQ,EAAE;AACRlB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;AACd,GAAA;AACF,EAAU;;AAEV;AACA;AACA;AACO,IAAMiB,sBAAsB,GACjC;;;;;"}
package/dist/src/typography/const.d.ts CHANGED
@@ -1,98 +1,88 @@
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;
26
- };
27
- readonly Subtitle1: {
28
- readonly fontSize: 14;
29
- readonly lineHeight: 24;
34
+ readonly lineHeight: 1.3;
30
35
  readonly fontWeight: 600;
31
36
  };
32
- readonly Body1: {
37
+ readonly SubTitle2: {
33
38
  readonly fontSize: 14;
34
- readonly lineHeight: 24;
35
- readonly fontWeight: 400;
36
- };
37
- readonly Subtitle2: {
38
- readonly fontSize: 12;
39
- readonly lineHeight: 19;
39
+ readonly lineHeight: 1.3;
40
40
  readonly fontWeight: 600;
41
41
  };
42
- readonly Body2: {
43
- readonly fontSize: 12;
44
- readonly lineHeight: 19;
42
+ readonly DisplayBody: {
43
+ readonly fontSize: 20;
44
+ readonly lineHeight: 1.45;
45
45
  readonly fontWeight: 400;
46
46
  };
47
- readonly Caption: {
48
- readonly fontSize: 10;
49
- readonly lineHeight: 14;
50
- readonly fontWeight: 600;
47
+ readonly UIBody1: {
48
+ readonly fontSize: 18;
49
+ readonly lineHeight: 1.45;
50
+ readonly fontWeight: 400;
51
51
  };
52
- readonly Headline2_B: {
53
- readonly fontSize: 24;
54
- readonly lineHeight: 34;
55
- readonly fontWeight: 600;
52
+ readonly UIBody2: {
53
+ readonly fontSize: 16;
54
+ readonly lineHeight: 1.45;
55
+ readonly fontWeight: 400;
56
56
  };
57
- readonly Headline3_B: {
58
- readonly fontSize: 20;
59
- readonly lineHeight: 26;
60
- readonly fontWeight: 600;
57
+ readonly UIBody3: {
58
+ readonly fontSize: 14;
59
+ readonly lineHeight: 1.45;
60
+ readonly fontWeight: 400;
61
61
  };
62
- readonly Headline4_B: {
63
- readonly fontSize: 16;
64
- readonly lineHeight: 26;
65
- readonly fontWeight: 600;
62
+ readonly ArticleBody1: {
63
+ readonly fontSize: 18;
64
+ readonly lineHeight: 1.55;
65
+ readonly fontWeight: 400;
66
66
  };
67
- readonly Headline4_M: {
67
+ readonly ArticleBody2: {
68
68
  readonly fontSize: 16;
69
- readonly lineHeight: 26;
69
+ readonly lineHeight: 1.6;
70
70
  readonly fontWeight: 400;
71
71
  };
72
- readonly Body1_B: {
72
+ readonly ArticleBody3: {
73
73
  readonly fontSize: 14;
74
- readonly lineHeight: 24;
75
- readonly fontWeight: 600;
76
- };
77
- readonly Body1_M: {
78
- readonly fontSize: 14;
79
- readonly lineHeight: 24;
74
+ readonly lineHeight: 1.6;
80
75
  readonly fontWeight: 400;
81
76
  };
82
- readonly Body2_B: {
77
+ readonly Caption1: {
83
78
  readonly fontSize: 12;
84
- readonly lineHeight: 19;
85
- readonly fontWeight: 600;
79
+ readonly lineHeight: 1.35;
80
+ readonly fontWeight: 500;
86
81
  };
87
- readonly Body2_M: {
88
- readonly fontSize: 12;
89
- readonly lineHeight: 19;
90
- readonly fontWeight: 400;
91
- };
92
- readonly Caption_B: {
82
+ readonly Caption2: {
93
83
  readonly fontSize: 10;
94
- readonly lineHeight: 14;
95
- readonly fontWeight: 600;
84
+ readonly lineHeight: 1.35;
85
+ readonly fontWeight: 500;
96
86
  };
97
87
  };
98
88
  /**
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB,iOAC6L,CAAC"}
package/dist/src/typography/const.esm.js CHANGED
@@ -1,107 +1,92 @@
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
26
- },
27
- Body1_B: {
28
- fontSize: 14,
29
- lineHeight: 24,
35
+ lineHeight: 1.3,
30
36
  fontWeight: 600
31
37
  },
32
- Body1_M: {
38
+ SubTitle2: {
33
39
  fontSize: 14,
34
- lineHeight: 24,
35
- fontWeight: 400
36
- },
37
- Body2_B: {
38
- fontSize: 12,
39
- lineHeight: 19,
40
+ lineHeight: 1.3,
40
41
  fontWeight: 600
41
42
  },
42
- Body2_M: {
43
- fontSize: 12,
44
- lineHeight: 19,
43
+ DisplayBody: {
44
+ fontSize: 20,
45
+ lineHeight: 1.45,
45
46
  fontWeight: 400
46
47
  },
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,
57
- fontWeight: 600
48
+ // Body Style
49
+ UIBody1: {
50
+ fontSize: 18,
51
+ lineHeight: 1.45,
52
+ fontWeight: 400
58
53
  },
59
- Title1: {
60
- fontSize: 20,
61
- lineHeight: 26,
62
- fontWeight: 600
54
+ UIBody2: {
55
+ fontSize: 16,
56
+ lineHeight: 1.45,
57
+ fontWeight: 400
63
58
  },
64
- Display: {
65
- fontSize: 20,
66
- lineHeight: 26,
59
+ UIBody3: {
60
+ fontSize: 14,
61
+ lineHeight: 1.45,
67
62
  fontWeight: 400
68
63
  },
69
- Title2: {
70
- fontSize: 16,
71
- lineHeight: 26,
72
- fontWeight: 600
64
+ ArticleBody1: {
65
+ fontSize: 18,
66
+ lineHeight: 1.55,
67
+ fontWeight: 400
73
68
  },
74
- ArticleBody: {
69
+ ArticleBody2: {
75
70
  fontSize: 16,
76
- lineHeight: 26,
71
+ lineHeight: 1.6,
77
72
  fontWeight: 400
78
73
  },
79
- Subtitle1: {
74
+ ArticleBody3: {
80
75
  fontSize: 14,
81
- lineHeight: 24,
82
- fontWeight: 600
83
- },
84
- Body1: {
85
- fontSize: 14,
86
- lineHeight: 24,
76
+ lineHeight: 1.6,
87
77
  fontWeight: 400
88
78
  },
89
- Subtitle2: {
90
- fontSize: 12,
91
- lineHeight: 19,
92
- fontWeight: 600
93
- },
94
- Body2: {
79
+ Caption1: {
95
80
  fontSize: 12,
96
- lineHeight: 19,
97
- fontWeight: 400
81
+ lineHeight: 1.35,
82
+ fontWeight: 500
98
83
  },
99
- Caption: {
84
+ Caption2: {
100
85
  fontSize: 10,
101
- lineHeight: 14,
102
- fontWeight: 600
86
+ lineHeight: 1.35,
87
+ fontWeight: 500
103
88
  }
104
- });
89
+ };
105
90
 
106
91
  /**
107
92
  * {@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 UIBody2: {\n fontSize: 16,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n UIBody3: {\n fontSize: 14,\n lineHeight: 1.45,\n fontWeight: 400,\n },\n ArticleBody1: {\n fontSize: 18,\n lineHeight: 1.55,\n fontWeight: 400,\n },\n ArticleBody2: {\n fontSize: 16,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n ArticleBody3: {\n fontSize: 14,\n lineHeight: 1.6,\n fontWeight: 400,\n },\n Caption1: {\n fontSize: 12,\n lineHeight: 1.35,\n fontWeight: 500,\n },\n Caption2: {\n fontSize: 10,\n lineHeight: 1.35,\n fontWeight: 500,\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","UIBody2","UIBody3","ArticleBody1","ArticleBody2","ArticleBody3","Caption1","Caption2","PRETENDARD_FONT_FAMILY"],"mappings":"AAAO,IAAMA,iBAAiB,GAAG;AAC/B;AACAC,EAAAA,aAAa,EAAE;AACbC,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDC,EAAAA,aAAa,EAAE;AACbH,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDE,EAAAA,aAAa,EAAE;AACbJ,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDG,EAAAA,QAAQ,EAAE;AACRL,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDI,EAAAA,MAAM,EAAE;AACNN,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDK,EAAAA,MAAM,EAAE;AACNP,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDM,EAAAA,SAAS,EAAE;AACTR,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDO,EAAAA,SAAS,EAAE;AACTT,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDQ,EAAAA,WAAW,EAAE;AACXV,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACD;AACAS,EAAAA,OAAO,EAAE;AACPX,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDU,EAAAA,OAAO,EAAE;AACPZ,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDW,EAAAA,OAAO,EAAE;AACPb,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDY,EAAAA,YAAY,EAAE;AACZd,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDa,EAAAA,YAAY,EAAE;AACZf,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDc,EAAAA,YAAY,EAAE;AACZhB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,GAAG;AACfC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDe,EAAAA,QAAQ,EAAE;AACRjB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;GACb;AACDgB,EAAAA,QAAQ,EAAE;AACRlB,IAAAA,QAAQ,EAAE,EAAE;AACZC,IAAAA,UAAU,EAAE,IAAI;AAChBC,IAAAA,UAAU,EAAE,GAAA;AACd,GAAA;AACF,EAAU;;AAEV;AACA;AACA;AACO,IAAMiB,sBAAsB,GACjC;;;;"}
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.5",
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,103 +1,90 @@
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,
22
- },
23
- Body1_B: {
24
- fontSize: 14,
25
- lineHeight: 24,
35
+ lineHeight: 1.3,
26
36
  fontWeight: 600,
27
37
  },
28
- Body1_M: {
38
+ SubTitle2: {
29
39
  fontSize: 14,
30
- lineHeight: 24,
31
- fontWeight: 400,
32
- },
33
- Body2_B: {
34
- fontSize: 12,
35
- lineHeight: 19,
40
+ lineHeight: 1.3,
36
41
  fontWeight: 600,
37
42
  },
38
- Body2_M: {
39
- fontSize: 12,
40
- lineHeight: 19,
43
+ DisplayBody: {
44
+ fontSize: 20,
45
+ lineHeight: 1.45,
41
46
  fontWeight: 400,
42
47
  },
43
- Caption_B: {
44
- fontSize: 10,
45
- lineHeight: 14,
46
- fontWeight: 600,
47
- },
48
- } as const;
49
-
50
- export const TYPOGRAPHY_STYLES = {
51
- ...LEGACY_TYPOGRAPHY_STYLES,
52
- Headline: {
53
- fontSize: 24,
54
- lineHeight: 34,
55
- fontWeight: 600,
48
+ // Body Style
49
+ UIBody1: {
50
+ fontSize: 18,
51
+ lineHeight: 1.45,
52
+ fontWeight: 400,
56
53
  },
57
- Title1: {
58
- fontSize: 20,
59
- lineHeight: 26,
60
- fontWeight: 600,
54
+ UIBody2: {
55
+ fontSize: 16,
56
+ lineHeight: 1.45,
57
+ fontWeight: 400,
61
58
  },
62
- Display: {
63
- fontSize: 20,
64
- lineHeight: 26,
59
+ UIBody3: {
60
+ fontSize: 14,
61
+ lineHeight: 1.45,
65
62
  fontWeight: 400,
66
63
  },
67
- Title2: {
68
- fontSize: 16,
69
- lineHeight: 26,
70
- fontWeight: 600,
64
+ ArticleBody1: {
65
+ fontSize: 18,
66
+ lineHeight: 1.55,
67
+ fontWeight: 400,
71
68
  },
72
- ArticleBody: {
69
+ ArticleBody2: {
73
70
  fontSize: 16,
74
- lineHeight: 26,
71
+ lineHeight: 1.6,
75
72
  fontWeight: 400,
76
73
  },
77
- Subtitle1: {
78
- fontSize: 14,
79
- lineHeight: 24,
80
- fontWeight: 600,
81
- },
82
- Body1: {
74
+ ArticleBody3: {
83
75
  fontSize: 14,
84
- lineHeight: 24,
76
+ lineHeight: 1.6,
85
77
  fontWeight: 400,
86
78
  },
87
- Subtitle2: {
79
+ Caption1: {
88
80
  fontSize: 12,
89
- lineHeight: 19,
90
- fontWeight: 600,
81
+ lineHeight: 1.35,
82
+ fontWeight: 500,
91
83
  },
92
- Body2: {
93
- fontSize: 12,
94
- lineHeight: 19,
95
- fontWeight: 400,
96
- },
97
- Caption: {
84
+ Caption2: {
98
85
  fontSize: 10,
99
- lineHeight: 14,
100
- fontWeight: 600,
86
+ lineHeight: 1.35,
87
+ fontWeight: 500,
101
88
  },
102
89
  } as const;
103
90
 
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
  };