@bobbykim/manguito-theme 0.1.1 → 0.1.3

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 (8) hide show
  1. package/LICENSE.md +9 -9
  2. package/README.md +60 -0
  3. package/index.ts +10 -10
  4. package/package.json +3 -2
  5. package/theme/generateClass.ts +234 -231
  6. package/theme/theme.ts +567 -554
  7. package/theme/theme.types.ts +57 -57
  8. package/themeVariables.cjs +210 -210
package/theme/theme.types.ts CHANGED
@@ -1,57 +1,57 @@
1
- // Colors for bg-color and font-color
2
- export type ColorPalette =
3
- | 'primary'
4
- | 'secondary'
5
- | 'success'
6
- | 'info'
7
- | 'warning'
8
- | 'danger'
9
- | 'light-1'
10
- | 'light-2'
11
- | 'light-3'
12
- | 'light-4'
13
- | 'dark-1'
14
- | 'dark-2'
15
- | 'dark-3'
16
- | 'dark-4'
17
- | 'black'
18
- | 'white'
19
- | 'transparent'
20
- // Available spacings
21
- export type SpacingLevel =
22
- | '0'
23
- | '3xs'
24
- | '2xs'
25
- | 'xs'
26
- | 'sm'
27
- | 'md'
28
- | 'lg'
29
- | 'xl'
30
- | '2xl'
31
- | '3xl'
32
- // Available heading levels
33
- export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4'
34
- // Available heading sizes
35
- export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
36
- // Available body text sizes
37
- export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
38
- // Font weight
39
- export type FontWeight = 'light' | 'normal' | 'bold'
40
- // border positions
41
- export type Position = 'left' | 'right'
42
- // link targets
43
- export type CtaTarget = '_self' | '_blank'
44
- // Highlight positions
45
- export type Location = 'left' | 'top'
46
- // available ranges
47
- export type Range<T extends number> = number extends T ? number : _Range<T, []>
48
- export type _Range<
49
- T extends number,
50
- R extends unknown[]
51
- > = R['length'] extends T ? R['length'] : R['length'] | _Range<T, [T, ...R]>
52
- export type ButtonSize = 'small' | 'medium' | 'large'
53
- export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
54
- export type Directions = 'left' | 'right'
55
- export type ColumnWidth = 25 | 50 | 75 | 100
56
- export type CrossOrigin = 'use-credentials' | 'anonymous'
57
- export type InputType = 'text' | 'email' | 'password'
1
+ // Colors for bg-color and font-color
2
+ export type ColorPalette =
3
+ | 'primary'
4
+ | 'secondary'
5
+ | 'success'
6
+ | 'info'
7
+ | 'warning'
8
+ | 'danger'
9
+ | 'light-1'
10
+ | 'light-2'
11
+ | 'light-3'
12
+ | 'light-4'
13
+ | 'dark-1'
14
+ | 'dark-2'
15
+ | 'dark-3'
16
+ | 'dark-4'
17
+ | 'black'
18
+ | 'white'
19
+ | 'transparent'
20
+ // Available spacings
21
+ export type SpacingLevel =
22
+ | '0'
23
+ | '3xs'
24
+ | '2xs'
25
+ | 'xs'
26
+ | 'sm'
27
+ | 'md'
28
+ | 'lg'
29
+ | 'xl'
30
+ | '2xl'
31
+ | '3xl'
32
+ // Available heading levels
33
+ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4'
34
+ // Available heading sizes
35
+ export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
36
+ // Available body text sizes
37
+ export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
38
+ // Font weight
39
+ export type FontWeight = 'light' | 'normal' | 'bold'
40
+ // border positions
41
+ export type Position = 'left' | 'right'
42
+ // link targets
43
+ export type CtaTarget = '_self' | '_blank'
44
+ // Highlight positions
45
+ export type Location = 'left' | 'top'
46
+ // available ranges
47
+ export type Range<T extends number> = number extends T ? number : _Range<T, []>
48
+ export type _Range<
49
+ T extends number,
50
+ R extends unknown[]
51
+ > = R['length'] extends T ? R['length'] : R['length'] | _Range<T, [T, ...R]>
52
+ export type ButtonSize = 'small' | 'medium' | 'large'
53
+ export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
54
+ export type Directions = 'left' | 'right'
55
+ export type ColumnWidth = 25 | 50 | 75 | 100
56
+ export type CrossOrigin = 'use-credentials' | 'anonymous'
57
+ export type InputType = 'text' | 'email' | 'password'
package/themeVariables.cjs CHANGED
@@ -1,210 +1,210 @@
1
- const mclTheme = {
2
- fontSize: {
3
- xs: '12px',
4
- sm: '14px',
5
- md: '16px',
6
- lg: '18px',
7
- xl: '20px',
8
- },
9
- container: {
10
- center: true,
11
- screens: {
12
- sm: '640px',
13
- md: '768px',
14
- lg: '1024px',
15
- xl: '1280px',
16
- },
17
- },
18
- extend: {
19
- colors: {
20
- primary: '#ec489a',
21
- secondary: '#00feda',
22
- success: '#78be20',
23
- info: '#00a3e0',
24
- warning: '#f1ac18',
25
- danger: '#cc2f2f',
26
- 'light-1': '#fafafa',
27
- 'light-2': '#f1f1f1',
28
- 'light-3': '#e8e8e8',
29
- 'light-4': '#d0d0d0',
30
- 'dark-1': '#747474',
31
- 'dark-2': '#484848',
32
- 'dark-3': '#1f2937',
33
- 'dark-4': '#191919',
34
- },
35
- spacing: {
36
- '3xs': '4px',
37
- '2xs': '8px',
38
- xs: '16px',
39
- sm: '24px',
40
- md: '32px',
41
- lg: '48px',
42
- xl: '64px',
43
- '2xl': '96px',
44
- '3xl': '128px',
45
- },
46
- },
47
- }
48
-
49
- const mclHeading = ({ addComponents, theme }) => {
50
- addComponents({
51
- body: {
52
- // default font size
53
- fontSize: '1rem',
54
- lineHeight: '1.5',
55
- },
56
- h1: {
57
- // default medium size
58
- fontSize: '30px',
59
- fontWeight: 'bold',
60
- lineHeight: '1.2',
61
- '@screen md': { fontSize: '30px' },
62
- '@screen lg': { fontSize: '48px' },
63
- },
64
- '.h1-sm': {
65
- fontSize: '24px',
66
- fontWeight: 'bold',
67
- lineHeight: '1.2',
68
- '@screen md': { fontSize: '24px' },
69
- '@screen lg': { fontSize: '36px' },
70
- },
71
- '.h1-md': {
72
- fontSize: '30px',
73
- fontWeight: 'bold',
74
- lineHeight: '1.2',
75
- '@screen md': { fontSize: '30px' },
76
- '@screen lg': { fontSize: '48px' },
77
- },
78
- '.h1-lg': {
79
- fontSize: '36px',
80
- fontWeight: 'bold',
81
- lineHeight: '1.2',
82
- '@screen md': { fontSize: '36px' },
83
- '@screen lg': { fontSize: '56px' },
84
- },
85
- '.h1-xl': {
86
- fontSize: '56px',
87
- fontWeight: 'bold',
88
- lineHeight: '1.2',
89
- '@screen md': { fontSize: '56px' },
90
- '@screen lg': { fontSize: '72px' },
91
- },
92
- h2: {
93
- // default medium size
94
- fontSize: '24px',
95
- fontWeight: 'bold',
96
- lineHeight: '1.2',
97
- '@screen md': { fontSize: '24px' },
98
- '@screen lg': { fontSize: '36px' },
99
- },
100
- '.h2-sm': {
101
- fontSize: '18px',
102
- fontWeight: 'bold',
103
- lineHeight: '1.2',
104
- '@screen md': { fontSize: '18px' },
105
- '@screen lg': { fontSize: '24px' },
106
- },
107
- '.h2-md': {
108
- fontSize: '24px',
109
- fontWeight: 'bold',
110
- lineHeight: '1.2',
111
- '@screen md': { fontSize: '24px' },
112
- '@screen lg': { fontSize: '36px' },
113
- },
114
- '.h2-lg': {
115
- fontSize: '30px',
116
- fontWeight: 'bold',
117
- lineHeight: '1.2',
118
- '@screen md': { fontSize: '30px' },
119
- '@screen lg': { fontSize: '48px' },
120
- },
121
- '.h2-xl': {
122
- fontSize: '48px',
123
- fontWeight: 'bold',
124
- lineHeight: '1.2',
125
- '@screen md': { fontSize: '48px' },
126
- '@screen lg': { fontSize: '60px' },
127
- },
128
- h3: {
129
- // default medium size
130
- fontSize: '18px',
131
- fontWeight: 'bold',
132
- lineHeight: '1.2',
133
- '@screen md': { fontSize: '18px' },
134
- '@screen lg': { fontSize: '20px' },
135
- },
136
- '.h3-sm': {
137
- fontSize: '16px',
138
- fontWeight: 'bold',
139
- lineHeight: '1.2',
140
- '@screen md': { fontSize: '16px' },
141
- '@screen lg': { fontSize: '16px' },
142
- },
143
- '.h3-md': {
144
- fontSize: '18px',
145
- fontWeight: 'bold',
146
- lineHeight: '1.2',
147
- '@screen md': { fontSize: '18px' },
148
- '@screen lg': { fontSize: '20px' },
149
- },
150
- '.h3-lg': {
151
- fontSize: '18px',
152
- fontWeight: 'bold',
153
- lineHeight: '1.2',
154
- '@screen md': { fontSize: '18px' },
155
- '@screen lg': { fontSize: '24px' },
156
- },
157
- '.h3-xl': {
158
- fontSize: '30px',
159
- fontWeight: 'bold',
160
- lineHeight: '1.2',
161
- '@screen md': { fontSize: '30px' },
162
- '@screen lg': { fontSize: '36px' },
163
- },
164
- h4: {
165
- // default medium size
166
- fontSize: '16px',
167
- fontWeight: 'bold',
168
- lineHeight: '1.2',
169
- '@screen md': { fontSize: '16px' },
170
- '@screen lg': { fontSize: '18px' },
171
- },
172
- 'h4-sm': {
173
- fontSize: '14px',
174
- fontWeight: 'bold',
175
- lineHeight: '1.2',
176
- '@screen md': { fontSize: '14px' },
177
- '@screen lg': { fontSize: '16px' },
178
- },
179
- 'h4-md': {
180
- fontSize: '16px',
181
- fontWeight: 'bold',
182
- lineHeight: '1.2',
183
- '@screen md': { fontSize: '16px' },
184
- '@screen lg': { fontSize: '18px' },
185
- },
186
- 'h4-lg': {
187
- fontSize: '16px',
188
- fontWeight: 'bold',
189
- lineHeight: '1.2',
190
- '@screen md': { fontSize: '16px' },
191
- '@screen lg': { fontSize: '20px' },
192
- },
193
- 'h4-xl': {
194
- fontSize: '24px',
195
- fontWeight: 'bold',
196
- lineHeight: '1.2',
197
- '@screen md': { fontSize: '24px' },
198
- '@screen lg': { fontSize: '30px' },
199
- },
200
- '.mcl-link': {
201
- color: theme('colors.primary'),
202
- textDecoration: 'underline',
203
- },
204
- })
205
- }
206
-
207
- module.exports = {
208
- mclTheme: mclTheme,
209
- mclHeading: mclHeading,
210
- }
1
+ const mclTheme = {
2
+ fontSize: {
3
+ xs: '12px',
4
+ sm: '14px',
5
+ md: '16px',
6
+ lg: '18px',
7
+ xl: '20px',
8
+ },
9
+ container: {
10
+ center: true,
11
+ screens: {
12
+ sm: '640px',
13
+ md: '768px',
14
+ lg: '1024px',
15
+ xl: '1280px',
16
+ },
17
+ },
18
+ extend: {
19
+ colors: {
20
+ primary: '#ec489a',
21
+ secondary: '#00feda',
22
+ success: '#78be20',
23
+ info: '#00a3e0',
24
+ warning: '#f1ac18',
25
+ danger: '#cc2f2f',
26
+ 'light-1': '#fafafa',
27
+ 'light-2': '#f1f1f1',
28
+ 'light-3': '#e8e8e8',
29
+ 'light-4': '#d0d0d0',
30
+ 'dark-1': '#747474',
31
+ 'dark-2': '#484848',
32
+ 'dark-3': '#1f2937',
33
+ 'dark-4': '#191919',
34
+ },
35
+ spacing: {
36
+ '3xs': '4px',
37
+ '2xs': '8px',
38
+ xs: '16px',
39
+ sm: '24px',
40
+ md: '32px',
41
+ lg: '48px',
42
+ xl: '64px',
43
+ '2xl': '96px',
44
+ '3xl': '128px',
45
+ },
46
+ },
47
+ }
48
+
49
+ const mclHeading = ({ addComponents, theme }) => {
50
+ addComponents({
51
+ body: {
52
+ // default font size
53
+ fontSize: '1rem',
54
+ lineHeight: '1.5',
55
+ },
56
+ h1: {
57
+ // default medium size
58
+ fontSize: '30px',
59
+ fontWeight: 'bold',
60
+ lineHeight: '1.2',
61
+ '@screen md': { fontSize: '30px' },
62
+ '@screen lg': { fontSize: '48px' },
63
+ },
64
+ '.h1-sm': {
65
+ fontSize: '24px',
66
+ fontWeight: 'bold',
67
+ lineHeight: '1.2',
68
+ '@screen md': { fontSize: '24px' },
69
+ '@screen lg': { fontSize: '36px' },
70
+ },
71
+ '.h1-md': {
72
+ fontSize: '30px',
73
+ fontWeight: 'bold',
74
+ lineHeight: '1.2',
75
+ '@screen md': { fontSize: '30px' },
76
+ '@screen lg': { fontSize: '48px' },
77
+ },
78
+ '.h1-lg': {
79
+ fontSize: '36px',
80
+ fontWeight: 'bold',
81
+ lineHeight: '1.2',
82
+ '@screen md': { fontSize: '36px' },
83
+ '@screen lg': { fontSize: '56px' },
84
+ },
85
+ '.h1-xl': {
86
+ fontSize: '56px',
87
+ fontWeight: 'bold',
88
+ lineHeight: '1.2',
89
+ '@screen md': { fontSize: '56px' },
90
+ '@screen lg': { fontSize: '72px' },
91
+ },
92
+ h2: {
93
+ // default medium size
94
+ fontSize: '24px',
95
+ fontWeight: 'bold',
96
+ lineHeight: '1.2',
97
+ '@screen md': { fontSize: '24px' },
98
+ '@screen lg': { fontSize: '36px' },
99
+ },
100
+ '.h2-sm': {
101
+ fontSize: '18px',
102
+ fontWeight: 'bold',
103
+ lineHeight: '1.2',
104
+ '@screen md': { fontSize: '18px' },
105
+ '@screen lg': { fontSize: '24px' },
106
+ },
107
+ '.h2-md': {
108
+ fontSize: '24px',
109
+ fontWeight: 'bold',
110
+ lineHeight: '1.2',
111
+ '@screen md': { fontSize: '24px' },
112
+ '@screen lg': { fontSize: '36px' },
113
+ },
114
+ '.h2-lg': {
115
+ fontSize: '30px',
116
+ fontWeight: 'bold',
117
+ lineHeight: '1.2',
118
+ '@screen md': { fontSize: '30px' },
119
+ '@screen lg': { fontSize: '48px' },
120
+ },
121
+ '.h2-xl': {
122
+ fontSize: '48px',
123
+ fontWeight: 'bold',
124
+ lineHeight: '1.2',
125
+ '@screen md': { fontSize: '48px' },
126
+ '@screen lg': { fontSize: '60px' },
127
+ },
128
+ h3: {
129
+ // default medium size
130
+ fontSize: '18px',
131
+ fontWeight: 'bold',
132
+ lineHeight: '1.2',
133
+ '@screen md': { fontSize: '18px' },
134
+ '@screen lg': { fontSize: '20px' },
135
+ },
136
+ '.h3-sm': {
137
+ fontSize: '16px',
138
+ fontWeight: 'bold',
139
+ lineHeight: '1.2',
140
+ '@screen md': { fontSize: '16px' },
141
+ '@screen lg': { fontSize: '16px' },
142
+ },
143
+ '.h3-md': {
144
+ fontSize: '18px',
145
+ fontWeight: 'bold',
146
+ lineHeight: '1.2',
147
+ '@screen md': { fontSize: '18px' },
148
+ '@screen lg': { fontSize: '20px' },
149
+ },
150
+ '.h3-lg': {
151
+ fontSize: '18px',
152
+ fontWeight: 'bold',
153
+ lineHeight: '1.2',
154
+ '@screen md': { fontSize: '18px' },
155
+ '@screen lg': { fontSize: '24px' },
156
+ },
157
+ '.h3-xl': {
158
+ fontSize: '30px',
159
+ fontWeight: 'bold',
160
+ lineHeight: '1.2',
161
+ '@screen md': { fontSize: '30px' },
162
+ '@screen lg': { fontSize: '36px' },
163
+ },
164
+ h4: {
165
+ // default medium size
166
+ fontSize: '16px',
167
+ fontWeight: 'bold',
168
+ lineHeight: '1.2',
169
+ '@screen md': { fontSize: '16px' },
170
+ '@screen lg': { fontSize: '18px' },
171
+ },
172
+ 'h4-sm': {
173
+ fontSize: '14px',
174
+ fontWeight: 'bold',
175
+ lineHeight: '1.2',
176
+ '@screen md': { fontSize: '14px' },
177
+ '@screen lg': { fontSize: '16px' },
178
+ },
179
+ 'h4-md': {
180
+ fontSize: '16px',
181
+ fontWeight: 'bold',
182
+ lineHeight: '1.2',
183
+ '@screen md': { fontSize: '16px' },
184
+ '@screen lg': { fontSize: '18px' },
185
+ },
186
+ 'h4-lg': {
187
+ fontSize: '16px',
188
+ fontWeight: 'bold',
189
+ lineHeight: '1.2',
190
+ '@screen md': { fontSize: '16px' },
191
+ '@screen lg': { fontSize: '20px' },
192
+ },
193
+ 'h4-xl': {
194
+ fontSize: '24px',
195
+ fontWeight: 'bold',
196
+ lineHeight: '1.2',
197
+ '@screen md': { fontSize: '24px' },
198
+ '@screen lg': { fontSize: '30px' },
199
+ },
200
+ '.mcl-link': {
201
+ color: theme('colors.primary'),
202
+ textDecoration: 'underline',
203
+ },
204
+ })
205
+ }
206
+
207
+ module.exports = {
208
+ mclTheme: mclTheme,
209
+ mclHeading: mclHeading,
210
+ }