@aziontech/theme 1.12.0 → 1.13.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/tailwind/semantic-texts-plugin.js +65 -65
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aziontech/theme",
3
3
  "type": "module",
4
- "version": "1.12.0",
4
+ "version": "1.13.0",
5
5
  "author": "aziontech",
6
6
  "license": "MIT",
7
7
  "repository": {
package/src/tailwind/semantic-texts-plugin.js CHANGED
@@ -1,21 +1,4 @@
1
- /**
2
- * Tailwind plugin to expose semantic text styles (typography).
3
- *
4
- * This adds typography components like display-1, body-1, etc.
5
- *
6
- * Usage in tailwind.config.js:
7
- * ```javascript
8
- * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
9
- * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin';
10
- *
11
- * export default {
12
- * theme,
13
- * plugins: [semanticTexts()],
14
- * };
15
- * ```
16
- */
17
-
18
- // Lazy-require to avoid hard dependency for consumers
1
+ // Tailwind plugin that registers semantic typography utility classes.
19
2
  const plugin = (() => {
20
3
  try {
21
4
  return require('tailwindcss/plugin');
@@ -24,14 +7,9 @@ const plugin = (() => {
24
7
  }
25
8
  })();
26
9
 
27
- /**
28
- * Generate semantic text style components
29
- * @returns {import('tailwindcss/plugin').Plugin}
30
- */
31
10
  export const semanticTexts = () => {
32
11
  return plugin(({ addComponents, theme }) => {
33
12
  const deprecatedTexts = {
34
- // Display styles - Desktop
35
13
  '.display-1': {
36
14
  fontSize: '3rem',
37
15
  lineHeight: '1.10',
@@ -63,7 +41,6 @@ export const semanticTexts = () => {
63
41
  letterSpacing: '-.05rem',
64
42
  },
65
43
 
66
- // Display styles - Mobile
67
44
  '.display-1-mobile': {
68
45
  fontSize: '2.5rem',
69
46
  lineHeight: '1.15',
@@ -95,7 +72,6 @@ export const semanticTexts = () => {
95
72
  letterSpacing: '-.05rem',
96
73
  },
97
74
 
98
- // Body styles
99
75
  '.body-1': {
100
76
  fontSize: '1rem',
101
77
  lineHeight: '1.4rem',
@@ -103,7 +79,7 @@ export const semanticTexts = () => {
103
79
  letterSpacing: '-.05rem',
104
80
  },
105
81
  '.body-2': {
106
- fontSize: '.875rem',
82
+ fontSize: '0.875rem',
107
83
  lineHeight: '1.4rem',
108
84
  fontFamily: 'Sora',
109
85
  letterSpacing: '-.05rem',
@@ -112,63 +88,71 @@ export const semanticTexts = () => {
112
88
 
113
89
  const texts = {
114
90
  '.text-big-number-md': {
115
- fontSize: '4.5rem', // 7xl
91
+ fontSize: '2.25rem',
116
92
  lineHeight: '1.20',
117
93
  },
118
- '.text-heading-2xl': {
119
- fontSize: '3.75rem', // text-6xl
94
+ '.text-big-number-sm': {
95
+ fontSize: '1.25rem',
96
+ lineHeight: '1.20',
97
+ },
98
+ '.text-big-number-lg': {
99
+ fontSize: '3.75rem',
100
+ lineHeight: '1.20',
101
+ },
102
+ '.text-heading-2xl': {
103
+ fontSize: '3.75rem',
120
104
  lineHeight: '1.2',
121
105
  },
122
106
  '.text-heading-xl': {
123
- fontSize: '2.25rem', // text-4xl
107
+ fontSize: '2.25rem',
124
108
  lineHeight: '1.2',
125
109
  },
126
110
  '.text-heading-lg': {
127
- fontSize: '1.875rem', // text-3xl
111
+ fontSize: '1.875rem',
128
112
  lineHeight: '1.2',
129
113
  },
130
114
  '.text-heading-md': {
131
- fontSize: '1.5rem', // text-2xl
115
+ fontSize: '1.5rem',
132
116
  lineHeight: '1.2',
133
117
  },
134
118
  '.text-heading-sm': {
135
- fontSize: '1.125rem', // text-lg
119
+ fontSize: '1.125rem',
136
120
  lineHeight: '1.2',
137
121
  },
138
- '.text-body-lg': {
139
- fontSize: '18px', // text-lg
122
+ '.text-body-lg': {
123
+ fontSize: '1.125rem',
140
124
  lineHeight: '1.5',
141
125
  },
142
126
  '.text-body-md': {
143
- fontSize: '16px', // text-base
127
+ fontSize: '1rem',
144
128
  lineHeight: '1.5',
145
129
  },
146
130
  '.text-body-sm': {
147
- fontSize: '14px', // text-sm
131
+ fontSize: '0.875rem',
148
132
  lineHeight: '1.5',
149
133
  },
150
134
  '.text-body-xs': {
151
- fontSize: '12px', // text-xs
135
+ fontSize: '0.75rem',
152
136
  lineHeight: '1.5',
153
137
  },
154
138
  '.text-body-xss': {
155
- fontSize: '10px',
139
+ fontSize: '0.625rem',
156
140
  lineHeight: '1.5',
157
141
  },
158
142
  '.text-overline-md': {
159
- fontSize: '14px', // text-sm
143
+ fontSize: '0.875rem',
160
144
  lineHeight: '1.4',
161
145
  letterSpacing: '0.08em',
162
146
  textTransform: 'uppercase',
163
147
  },
164
148
  '.text-overline-sm': {
165
- fontSize: '12px', // text-xs
149
+ fontSize: '0.75rem',
166
150
  lineHeight: '1.4',
167
151
  letterSpacing: '0.08em',
168
152
  textTransform: 'uppercase',
169
153
  },
170
154
  '.text-overline-xs': {
171
- fontSize: '10px',
155
+ fontSize: '0.625rem',
172
156
  lineHeight: '1.4',
173
157
  letterSpacing: '0.08em',
174
158
  textTransform: 'uppercase',
@@ -178,52 +162,68 @@ export const semanticTexts = () => {
178
162
  const responsiveTexts = {
179
163
  [`@media (max-width: ${theme('screens.md', '768px')})`]: {
180
164
  '.text-big-number-md': {
181
- fontSize: '3rem',
165
+ fontSize: '1.5rem',
166
+ lineHeight: '1.20',
167
+ },
168
+ '.text-big-number-sm': {
169
+ fontSize: '1.25rem',
170
+ lineHeight: '1.20',
171
+ },
172
+ '.text-big-number-lg': {
173
+ fontSize: '2.25rem',
182
174
  lineHeight: '1.20',
183
175
  },
184
176
  '.text-heading-2xl': {
185
- fontSize: '3rem', // text-5xl
177
+ fontSize: '3rem',
186
178
  },
187
179
  '.text-heading-xl': {
188
- fontSize: '1.875rem', // text-3xl
180
+ fontSize: '1.875rem',
189
181
  },
190
182
  '.text-heading-lg': {
191
- fontSize: '1.125rem', // text-lg
183
+ fontSize: '1.125rem',
192
184
  },
193
185
  '.text-heading-md': {
194
- fontSize: '1.25rem', // text-xl
186
+ fontSize: '1.25rem',
195
187
  },
196
188
  '.text-heading-sm': {
197
- fontSize: '1rem', // text-base
189
+ fontSize: '1rem',
198
190
  },
199
191
  '.text-body-lg': {
200
- fontSize: '16px', // text-base
192
+ fontSize: '1rem',
201
193
  },
202
194
  '.text-body-md': {
203
- fontSize: '16px', // mantém
195
+ fontSize: '1rem',
204
196
  },
205
197
  '.text-body-sm': {
206
- fontSize: '14px',
198
+ fontSize: '0.875rem',
207
199
  },
208
200
  '.text-body-xs': {
209
- fontSize: '12px',
201
+ fontSize: '0.75rem',
210
202
  },
211
203
  '.text-body-xss': {
212
- fontSize: '10px',
204
+ fontSize: '0.625rem',
213
205
  },
214
206
  '.text-overline-md': {
215
- fontSize: '14px',
207
+ fontSize: '0.875rem',
216
208
  },
217
209
  '.text-overline-sm': {
218
- fontSize: '12px',
210
+ fontSize: '0.75rem',
219
211
  },
220
212
  '.text-overline-xs': {
221
- fontSize: '10px',
213
+ fontSize: '0.625rem',
222
214
  },
223
215
  },
224
216
  [`@media (max-width: ${theme('screens.sm', '640px')})`]: {
225
217
  '.text-big-number-md': {
226
- fontSize: '3rem',
218
+ fontSize: '1.25rem',
219
+ lineHeight: '1.20',
220
+ },
221
+ '.text-big-number-sm': {
222
+ fontSize: '1rem',
223
+ lineHeight: '1.20',
224
+ },
225
+ '.text-big-number-lg': {
226
+ fontSize: '1.5rem',
227
227
  lineHeight: '1.20',
228
228
  },
229
229
  '.text-heading-2xl': {
@@ -242,28 +242,28 @@ export const semanticTexts = () => {
242
242
  fontSize: '0.875rem',
243
243
  },
244
244
  '.text-body-lg': {
245
- fontSize: '16px',
245
+ fontSize: '1rem',
246
246
  },
247
247
  '.text-body-md': {
248
- fontSize: '16px',
248
+ fontSize: '1rem',
249
249
  },
250
250
  '.text-body-sm': {
251
- fontSize: '14px',
251
+ fontSize: '0.875rem',
252
252
  },
253
253
  '.text-body-xs': {
254
- fontSize: '12px',
254
+ fontSize: '0.75rem',
255
255
  },
256
256
  '.text-body-xss': {
257
- fontSize: '10px',
257
+ fontSize: '0.625rem',
258
258
  },
259
259
  '.text-overline-md': {
260
- fontSize: '12px',
260
+ fontSize: '0.75rem',
261
261
  },
262
262
  '.text-overline-sm': {
263
- fontSize: '12px',
263
+ fontSize: '0.75rem',
264
264
  },
265
265
  '.text-overline-xs': {
266
- fontSize: '10px',
266
+ fontSize: '0.625rem',
267
267
  },
268
268
  },
269
269