@lukso/web-components 1.7.3 → 1.8.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 (48) hide show
  1. package/dist/components/index.cjs +2 -2
  2. package/dist/components/index.js +2 -2
  3. package/dist/components/lukso-button/index.cjs +52 -8
  4. package/dist/components/lukso-button/index.d.ts +12 -3
  5. package/dist/components/lukso-button/index.d.ts.map +1 -1
  6. package/dist/components/lukso-button/index.js +52 -8
  7. package/dist/components/lukso-card/index.cjs +5 -5
  8. package/dist/components/lukso-card/index.d.ts.map +1 -1
  9. package/dist/components/lukso-card/index.js +5 -5
  10. package/dist/components/lukso-icon/index.cjs +2 -2
  11. package/dist/components/lukso-icon/index.js +2 -2
  12. package/dist/components/lukso-input/index.cjs +11 -9
  13. package/dist/components/lukso-input/index.d.ts.map +1 -1
  14. package/dist/components/lukso-input/index.js +11 -9
  15. package/dist/components/lukso-modal/index.cjs +2 -2
  16. package/dist/components/lukso-modal/index.js +2 -2
  17. package/dist/components/lukso-navbar/index.cjs +4 -3
  18. package/dist/components/lukso-navbar/index.d.ts.map +1 -1
  19. package/dist/components/lukso-navbar/index.js +4 -3
  20. package/dist/components/lukso-profile/index.cjs +2 -2
  21. package/dist/components/lukso-profile/index.js +2 -2
  22. package/dist/components/lukso-sanitize/index.cjs +1 -1
  23. package/dist/components/lukso-sanitize/index.js +1 -1
  24. package/dist/components/lukso-tag/index.cjs +5 -5
  25. package/dist/components/lukso-tag/index.d.ts.map +1 -1
  26. package/dist/components/lukso-tag/index.js +5 -5
  27. package/dist/components/lukso-test/index.cjs +1 -1
  28. package/dist/components/lukso-test/index.js +1 -1
  29. package/dist/components/lukso-username/index.cjs +4 -4
  30. package/dist/components/lukso-username/index.js +4 -4
  31. package/dist/components/lukso-wizard/index.cjs +2 -2
  32. package/dist/components/lukso-wizard/index.js +2 -2
  33. package/dist/index-687bd80b.cjs +67 -0
  34. package/dist/index-f9b6cb04.js +59 -0
  35. package/dist/index.cjs +2 -2
  36. package/dist/index.js +2 -2
  37. package/dist/shared/tailwind-element/index.cjs +1 -1
  38. package/dist/shared/tailwind-element/index.js +1 -1
  39. package/dist/{style-map-e193a4d9.cjs → style-map-086bae47.cjs} +1 -1
  40. package/dist/{style-map-3f88f525.js → style-map-ec9692b2.js} +1 -1
  41. package/dist/styles/main.css +61 -46
  42. package/dist/styles/main.css.map +1 -1
  43. package/package.json +1 -1
  44. package/tailwind.config.cjs +13 -0
  45. package/tools/sass/typography.scss +76 -56
  46. package/tools/styles/main.css +61 -46
  47. package/dist/index-4aafbf5c.cjs +0 -67
  48. package/dist/index-e1077e02.js +0 -59
package/tools/sass/typography.scss CHANGED
@@ -4,139 +4,159 @@
4
4
  * This file contains all typography classes used in designs.
5
5
  * They should be used instead of individual font attributes.
6
6
  *
7
- * You can use them same as the normal Tailwind classes, e.g.: class="heading-1"
7
+ * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"
8
8
  */
9
9
 
10
10
  @layer base {
11
- .heading-h1 {
11
+ // Headers - Inter
12
+
13
+ .heading-inter-26-semi-bold {
12
14
  @apply text-26 not-italic font-600 leading-31 font-inter;
13
15
  }
14
16
 
15
- .heading-h2 {
17
+ .heading-inter-21-semi-bold {
16
18
  @apply text-21 not-italic font-600 leading-26 font-inter;
17
19
  }
18
20
 
19
- .heading-h3 {
21
+ .heading-inter-17-semi-bold {
20
22
  @apply text-17 not-italic font-600 leading-22 font-inter;
21
23
  }
22
24
 
23
- .heading-h4 {
25
+ .heading-inter-12-bold-uppercase {
24
26
  @apply text-12 not-italic font-700 leading-15 font-inter uppercase tracking-[.02em];
25
27
  }
26
28
 
27
- .heading-h5 {
29
+ .heading-inter-14-bold {
28
30
  @apply text-14 not-italic font-700 leading-17 font-inter;
29
31
  }
30
32
 
31
- .heading-h1-medium-apax {
32
- @apply text-44 not-italic font-500 leading-40 font-apax;
33
+ // Headers - Apax
34
+
35
+ .heading-apax-48-regular {
36
+ @apply text-48 not-italic font-400 leading-58 font-apax;
37
+ }
38
+
39
+ .heading-apax-48-bold {
40
+ @apply text-48 not-italic font-500 leading-58 font-apax;
33
41
  }
34
42
 
35
- .heading-h1-regular-apax {
43
+ .heading-apax-44-regular {
36
44
  @apply text-44 not-italic font-400 leading-40 font-apax;
37
45
  }
38
46
 
39
- .heading-h2-medium-apax {
40
- @apply text-24 not-italic font-500 leading-28 font-apax;
47
+ .heading-apax-44-medium {
48
+ @apply text-44 not-italic font-500 leading-40 font-apax;
49
+ }
50
+
51
+ .heading-apax-40-regular {
52
+ @apply text-40 not-italic font-400 leading-48 font-apax;
53
+ }
54
+
55
+ .heading-apax-40-bold {
56
+ @apply text-40 not-italic font-500 leading-48 font-apax;
57
+ }
58
+
59
+ .heading-apax-32-regular {
60
+ @apply text-32 not-italic font-400 leading-38 font-apax;
61
+ }
62
+
63
+ .heading-apax-32-medium {
64
+ @apply text-32 not-italic font-500 leading-38 font-apax;
41
65
  }
42
66
 
43
- .heading-h3-medium-apax {
44
- @apply text-16 not-italic font-500 leading-19 font-apax;
67
+ .heading-apax-24-medium {
68
+ @apply text-24 not-italic font-500 leading-28 font-apax;
45
69
  }
46
70
 
47
- .heading-h4-medium-apax {
48
- @apply text-14 not-italic font-500 leading-20 font-apax;
71
+ // Navbar
72
+
73
+ .nav-apax-14-medium-uppercase {
74
+ @apply text-14 not-italic font-500 leading-17 font-apax uppercase tracking-[.08em];
49
75
  }
50
76
 
51
- .heading-h4-medium-uppercase-apax {
52
- @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
77
+ .nav-apax-12-medium-uppercase {
78
+ @apply text-12 not-italic font-500 leading-14 font-apax uppercase tracking-[.08em];
53
79
  }
54
80
 
55
- .heading-h5-medium-apax {
56
- @apply text-8 not-italic font-500 leading-10 font-apax;
81
+ .nav-apax-10-regular {
82
+ @apply text-10 not-italic font-400 leading-12 font-apax;
57
83
  }
58
84
 
59
- .heading-h5-medium-uppercase-apax {
85
+ .nav-apax-8-medium-uppercase {
60
86
  @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
61
87
  }
62
88
 
63
89
  // Paragraph
64
90
 
65
- .paragraph-16-regular {
91
+ .paragraph-inter-16-regular {
66
92
  @apply text-16 not-italic font-400 leading-24 font-inter;
67
93
  }
68
94
 
69
- .paragraph-16-semi-bold {
95
+ .paragraph-inter-16-semi-bold {
70
96
  @apply text-16 not-italic font-600 leading-24 font-inter;
71
97
  }
72
98
 
73
- .paragraph-14-regular {
99
+ .paragraph-inter-16-bold-underlined {
100
+ @apply text-16 not-italic font-600 leading-24 font-inter underline;
101
+ }
102
+
103
+ .paragraph-inter-14-regular {
74
104
  @apply text-14 not-italic font-400 leading-22 font-inter;
75
105
  }
76
106
 
77
- .paragraph-14-medium {
107
+ .paragraph-inter-14-medium {
78
108
  @apply text-14 not-italic font-500 leading-22 font-inter;
79
109
  }
80
110
 
81
- .paragraph-14-semi-bold {
111
+ .paragraph-inter-14-semi-bold {
82
112
  @apply text-14 not-italic font-600 leading-22 font-inter;
83
113
  }
84
114
 
85
- .paragraph-12-regular {
115
+ .paragraph-inter-13-regular {
116
+ @apply text-13 not-italic font-400 leading-20 font-inter;
117
+ }
118
+
119
+ .paragraph-inter-12-regular {
86
120
  @apply text-12 not-italic font-400 leading-20 font-inter;
87
121
  }
88
122
 
89
- .paragraph-12-medium {
123
+ .paragraph-inter-12-medium {
90
124
  @apply text-12 not-italic font-500 leading-20 font-inter;
91
125
  }
92
126
 
93
- .paragraph-12-semi-bold {
127
+ .paragraph-inter-12-semi-bold {
94
128
  @apply text-12 not-italic font-600 leading-20 font-inter;
95
129
  }
96
130
 
97
- // Currency
98
-
99
- .currency-10-semi-bold {
131
+ .paragraph-inter-10-semi-bold {
100
132
  @apply text-10 not-italic font-600 leading-12 font-inter;
101
133
  }
102
134
 
103
- .currency-10-bold-uppercase {
135
+ .paragraph-inter-10-bold-uppercase {
104
136
  @apply text-10 not-italic font-700 leading-12 font-inter uppercase;
105
137
  }
106
138
 
107
- .currency-14-semi-bold {
108
- @apply text-14 not-italic font-600 leading-17 font-inter;
109
- }
110
-
111
- // utility
112
-
113
- .link {
114
- @apply text-17 not-italic font-600 leading-22 font-inter;
115
- }
116
-
117
- .button-text {
118
- @apply text-17 not-italic font-600 leading-17 font-inter;
119
- }
120
-
121
- .caption {
122
- @apply text-13 not-italic font-400 leading-20 font-inter;
123
- }
124
-
125
- // Monospaced
126
-
127
- .monospaced-16-regular {
139
+ .paragraph-ptmono-16-regular {
128
140
  @apply text-16 not-italic font-400 leading-22 font-mono;
129
141
  }
130
142
 
131
- .monospaced-16-bold {
143
+ .paragraph-ptmono-16-bold {
132
144
  @apply text-16 not-italic font-700 leading-22 font-mono;
133
145
  }
134
146
 
135
- .monospaced-12-bold {
147
+ .paragraph-ptmono-12-bold {
136
148
  @apply text-12 not-italic font-700 leading-14 font-mono;
137
149
  }
138
150
 
139
- .monospaced-10-bold {
151
+ .paragraph-ptmono-12-regular {
152
+ @apply text-12 not-italic font-400 leading-14 font-mono;
153
+ }
154
+
155
+ .paragraph-ptmono-10-bold {
140
156
  @apply text-10 not-italic font-700 leading-14 font-mono;
141
157
  }
158
+
159
+ .paragraph-ptmono-10-regular {
160
+ @apply text-10 not-italic font-400 leading-14 font-mono;
161
+ }
142
162
  }
package/tools/styles/main.css CHANGED
@@ -183,102 +183,117 @@
183
183
  * This file contains all typography classes used in designs.
184
184
  * They should be used instead of individual font attributes.
185
185
  *
186
- * You can use them same as the normal Tailwind classes, e.g.: class="heading-1"
186
+ * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"
187
187
  */
188
188
  @layer base {
189
- .heading-h1 {
189
+ .heading-inter-26-semi-bold {
190
190
  @apply text-26 not-italic font-600 leading-31 font-inter;
191
191
  }
192
- .heading-h2 {
192
+ .heading-inter-21-semi-bold {
193
193
  @apply text-21 not-italic font-600 leading-26 font-inter;
194
194
  }
195
- .heading-h3 {
195
+ .heading-inter-17-semi-bold {
196
196
  @apply text-17 not-italic font-600 leading-22 font-inter;
197
197
  }
198
- .heading-h4 {
198
+ .heading-inter-12-bold-uppercase {
199
199
  @apply text-12 not-italic font-700 leading-15 font-inter uppercase tracking-[.02em];
200
200
  }
201
- .heading-h5 {
201
+ .heading-inter-14-bold {
202
202
  @apply text-14 not-italic font-700 leading-17 font-inter;
203
203
  }
204
- .heading-h1-medium-apax {
205
- @apply text-44 not-italic font-500 leading-40 font-apax;
204
+ .heading-apax-48-regular {
205
+ @apply text-48 not-italic font-400 leading-58 font-apax;
206
+ }
207
+ .heading-apax-48-bold {
208
+ @apply text-48 not-italic font-500 leading-58 font-apax;
206
209
  }
207
- .heading-h1-regular-apax {
210
+ .heading-apax-44-regular {
208
211
  @apply text-44 not-italic font-400 leading-40 font-apax;
209
212
  }
210
- .heading-h2-medium-apax {
211
- @apply text-24 not-italic font-500 leading-28 font-apax;
213
+ .heading-apax-44-medium {
214
+ @apply text-44 not-italic font-500 leading-40 font-apax;
215
+ }
216
+ .heading-apax-40-regular {
217
+ @apply text-40 not-italic font-400 leading-48 font-apax;
212
218
  }
213
- .heading-h3-medium-apax {
214
- @apply text-16 not-italic font-500 leading-19 font-apax;
219
+ .heading-apax-40-bold {
220
+ @apply text-40 not-italic font-500 leading-48 font-apax;
215
221
  }
216
- .heading-h4-medium-apax {
217
- @apply text-14 not-italic font-500 leading-20 font-apax;
222
+ .heading-apax-32-regular {
223
+ @apply text-32 not-italic font-400 leading-38 font-apax;
218
224
  }
219
- .heading-h4-medium-uppercase-apax {
220
- @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
225
+ .heading-apax-32-medium {
226
+ @apply text-32 not-italic font-500 leading-38 font-apax;
221
227
  }
222
- .heading-h5-medium-apax {
223
- @apply text-8 not-italic font-500 leading-10 font-apax;
228
+ .heading-apax-24-medium {
229
+ @apply text-24 not-italic font-500 leading-28 font-apax;
230
+ }
231
+ .nav-apax-14-medium-uppercase {
232
+ @apply text-14 not-italic font-500 leading-17 font-apax uppercase tracking-[.08em];
233
+ }
234
+ .nav-apax-12-medium-uppercase {
235
+ @apply text-12 not-italic font-500 leading-14 font-apax uppercase tracking-[.08em];
224
236
  }
225
- .heading-h5-medium-uppercase-apax {
237
+ .nav-apax-10-regular {
238
+ @apply text-10 not-italic font-400 leading-12 font-apax;
239
+ }
240
+ .nav-apax-8-medium-uppercase {
226
241
  @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
227
242
  }
228
- .paragraph-16-regular {
243
+ .paragraph-inter-16-regular {
229
244
  @apply text-16 not-italic font-400 leading-24 font-inter;
230
245
  }
231
- .paragraph-16-semi-bold {
246
+ .paragraph-inter-16-semi-bold {
232
247
  @apply text-16 not-italic font-600 leading-24 font-inter;
233
248
  }
234
- .paragraph-14-regular {
249
+ .paragraph-inter-16-bold-underlined {
250
+ @apply text-16 not-italic font-600 leading-24 font-inter underline;
251
+ }
252
+ .paragraph-inter-14-regular {
235
253
  @apply text-14 not-italic font-400 leading-22 font-inter;
236
254
  }
237
- .paragraph-14-medium {
255
+ .paragraph-inter-14-medium {
238
256
  @apply text-14 not-italic font-500 leading-22 font-inter;
239
257
  }
240
- .paragraph-14-semi-bold {
258
+ .paragraph-inter-14-semi-bold {
241
259
  @apply text-14 not-italic font-600 leading-22 font-inter;
242
260
  }
243
- .paragraph-12-regular {
261
+ .paragraph-inter-13-regular {
262
+ @apply text-13 not-italic font-400 leading-20 font-inter;
263
+ }
264
+ .paragraph-inter-12-regular {
244
265
  @apply text-12 not-italic font-400 leading-20 font-inter;
245
266
  }
246
- .paragraph-12-medium {
267
+ .paragraph-inter-12-medium {
247
268
  @apply text-12 not-italic font-500 leading-20 font-inter;
248
269
  }
249
- .paragraph-12-semi-bold {
270
+ .paragraph-inter-12-semi-bold {
250
271
  @apply text-12 not-italic font-600 leading-20 font-inter;
251
272
  }
252
- .currency-10-semi-bold {
273
+ .paragraph-inter-10-semi-bold {
253
274
  @apply text-10 not-italic font-600 leading-12 font-inter;
254
275
  }
255
- .currency-10-bold-uppercase {
276
+ .paragraph-inter-10-bold-uppercase {
256
277
  @apply text-10 not-italic font-700 leading-12 font-inter uppercase;
257
278
  }
258
- .currency-14-semi-bold {
259
- @apply text-14 not-italic font-600 leading-17 font-inter;
260
- }
261
- .link {
262
- @apply text-17 not-italic font-600 leading-22 font-inter;
263
- }
264
- .button-text {
265
- @apply text-17 not-italic font-600 leading-17 font-inter;
266
- }
267
- .caption {
268
- @apply text-13 not-italic font-400 leading-20 font-inter;
269
- }
270
- .monospaced-16-regular {
279
+ .paragraph-ptmono-16-regular {
271
280
  @apply text-16 not-italic font-400 leading-22 font-mono;
272
281
  }
273
- .monospaced-16-bold {
282
+ .paragraph-ptmono-16-bold {
274
283
  @apply text-16 not-italic font-700 leading-22 font-mono;
275
284
  }
276
- .monospaced-12-bold {
285
+ .paragraph-ptmono-12-bold {
277
286
  @apply text-12 not-italic font-700 leading-14 font-mono;
278
287
  }
279
- .monospaced-10-bold {
288
+ .paragraph-ptmono-12-regular {
289
+ @apply text-12 not-italic font-400 leading-14 font-mono;
290
+ }
291
+ .paragraph-ptmono-10-bold {
280
292
  @apply text-10 not-italic font-700 leading-14 font-mono;
281
293
  }
294
+ .paragraph-ptmono-10-regular {
295
+ @apply text-10 not-italic font-400 leading-14 font-mono;
296
+ }
282
297
  }
283
298
  @tailwind base;
284
299
  @tailwind components;