@remember-web/mixin 0.1.14 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/src/colors/theme.cjs.js +2 -0
  2. package/dist/src/colors/theme.cjs.js.map +1 -1
  3. package/dist/src/colors/theme.d.ts.map +1 -1
  4. package/dist/src/colors/theme.esm.js +2 -0
  5. package/dist/src/colors/theme.esm.js.map +1 -1
  6. package/dist/src/colors/utils.cjs.js +1 -1
  7. package/dist/src/colors/utils.cjs.js.map +1 -1
  8. package/dist/src/colors/utils.d.ts.map +1 -1
  9. package/dist/src/colors/utils.esm.js +1 -1
  10. package/dist/src/colors/utils.esm.js.map +1 -1
  11. package/dist/src/colors/variables.cjs.js +2 -0
  12. package/dist/src/colors/variables.cjs.js.map +1 -1
  13. package/dist/src/colors/variables.d.ts +1 -0
  14. package/dist/src/colors/variables.d.ts.map +1 -1
  15. package/dist/src/colors/variables.esm.js +2 -1
  16. package/dist/src/colors/variables.esm.js.map +1 -1
  17. package/dist/src/index.cjs.js +1 -0
  18. package/dist/src/index.cjs.js.map +1 -1
  19. package/dist/src/index.esm.js +1 -1
  20. package/dist/src/provider/styles.cjs.js +1 -1
  21. package/dist/src/provider/styles.cjs.js.map +1 -1
  22. package/dist/src/provider/styles.d.ts.map +1 -1
  23. package/dist/src/provider/styles.esm.js +1 -1
  24. package/dist/src/provider/styles.esm.js.map +1 -1
  25. package/dist/src/typography/const.cjs.js +71 -34
  26. package/dist/src/typography/const.cjs.js.map +1 -1
  27. package/dist/src/typography/const.d.ts +69 -34
  28. package/dist/src/typography/const.d.ts.map +1 -1
  29. package/dist/src/typography/const.esm.js +71 -34
  30. package/dist/src/typography/const.esm.js.map +1 -1
  31. package/dist/src/typography/utils.cjs.js +1 -1
  32. package/dist/src/typography/utils.cjs.js.map +1 -1
  33. package/dist/src/typography/utils.esm.js +1 -1
  34. package/dist/src/typography/utils.esm.js.map +1 -1
  35. package/package.json +2 -5
  36. package/src/colors/color.stories.tsx +2 -3
  37. package/src/colors/theme.ts +2 -0
  38. package/src/colors/utils.ts +2 -2
  39. package/src/colors/variables.ts +1 -0
  40. package/src/provider/styles.ts +1 -1
  41. package/src/typography/const.ts +71 -34
  42. package/src/typography/utils.ts +1 -1
package/src/typography/const.ts CHANGED
@@ -3,102 +3,139 @@
3
3
  const LEGACY_TYPOGRAPHY_STYLES = {
4
4
  Headline2_B: {
5
5
  fontSize: 24,
6
- lineHeight: 34,
6
+ lineHeight: '34px',
7
7
  fontWeight: 600,
8
8
  },
9
9
  Headline3_B: {
10
10
  fontSize: 20,
11
- lineHeight: 26,
11
+ lineHeight: '26px',
12
12
  fontWeight: 600,
13
13
  },
14
14
  Headline4_B: {
15
15
  fontSize: 16,
16
- lineHeight: 26,
16
+ lineHeight: '26px',
17
17
  fontWeight: 600,
18
18
  },
19
19
  Headline4_M: {
20
20
  fontSize: 16,
21
- lineHeight: 26,
21
+ lineHeight: '26px',
22
22
  fontWeight: 400,
23
23
  },
24
24
  Body1_B: {
25
25
  fontSize: 14,
26
- lineHeight: 24,
26
+ lineHeight: '24px',
27
27
  fontWeight: 600,
28
28
  },
29
29
  Body1_M: {
30
30
  fontSize: 14,
31
- lineHeight: 24,
31
+ lineHeight: '24px',
32
32
  fontWeight: 400,
33
33
  },
34
34
  Body2_B: {
35
35
  fontSize: 12,
36
- lineHeight: 19,
36
+ lineHeight: '19px',
37
37
  fontWeight: 600,
38
38
  },
39
39
  Body2_M: {
40
40
  fontSize: 12,
41
- lineHeight: 19,
41
+ lineHeight: '19px',
42
42
  fontWeight: 400,
43
43
  },
44
44
  Caption_B: {
45
45
  fontSize: 10,
46
- lineHeight: 14,
46
+ lineHeight: '14px',
47
47
  fontWeight: 600,
48
48
  },
49
49
  } as const;
50
50
 
51
51
  export const TYPOGRAPHY_STYLES = {
52
52
  ...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
+ },
53
69
  Headline: {
54
70
  fontSize: 24,
55
- lineHeight: 34,
71
+ lineHeight: 1.3,
56
72
  fontWeight: 600,
57
73
  },
58
74
  Title1: {
59
75
  fontSize: 20,
60
- lineHeight: 26,
76
+ lineHeight: 1.3,
77
+ fontWeight: 600,
78
+ },
79
+ Title2: {
80
+ fontSize: 18,
81
+ lineHeight: 1.3,
61
82
  fontWeight: 600,
62
83
  },
63
- Display: {
84
+ Subtitle1: {
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: {
64
96
  fontSize: 20,
65
- lineHeight: 26,
97
+ lineHeight: 1.45,
66
98
  fontWeight: 400,
67
99
  },
68
- Title2: {
100
+ ArticleBody: {
101
+ fontSize: 18,
102
+ lineHeight: 1.45,
103
+ fontWeight: 400,
104
+ },
105
+ ArticleBodyReading: {
106
+ fontSize: 18,
107
+ lineHeight: 1.55,
108
+ fontWeight: 400,
109
+ },
110
+ Body1: {
69
111
  fontSize: 16,
70
- lineHeight: 26,
71
- fontWeight: 600,
112
+ lineHeight: 1.45,
113
+ fontWeight: 400,
72
114
  },
73
- ArticleBody: {
115
+ Body1Reading: {
74
116
  fontSize: 16,
75
- lineHeight: 26,
117
+ lineHeight: 1.6,
76
118
  fontWeight: 400,
77
119
  },
78
- Subtitle1: {
120
+ Body2: {
79
121
  fontSize: 14,
80
- lineHeight: 24,
81
- fontWeight: 600,
122
+ lineHeight: 1.45,
123
+ fontWeight: 400,
82
124
  },
83
- Body1: {
125
+ Body2Reading: {
84
126
  fontSize: 14,
85
- lineHeight: 24,
127
+ lineHeight: 1.6,
86
128
  fontWeight: 400,
87
129
  },
88
- Subtitle2: {
89
- fontSize: 12,
90
- lineHeight: 19,
91
- fontWeight: 600,
92
- },
93
- Body2: {
130
+ Caption1: {
94
131
  fontSize: 12,
95
- lineHeight: 19,
96
- fontWeight: 400,
132
+ lineHeight: 1.35,
133
+ fontWeight: 500,
97
134
  },
98
- Caption: {
135
+ Caption2: {
99
136
  fontSize: 10,
100
- lineHeight: 14,
101
- fontWeight: 600,
137
+ lineHeight: 1.35,
138
+ fontWeight: 500,
102
139
  },
103
140
  } as const;
104
141
 
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
  };