@kids-reporter/routing-ui 0.1.0-alpha.3 → 0.1.0-alpha.4

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 (24) hide show
  1. package/dist/components/input.js +1 -1
  2. package/dist/components/input.js.map +1 -1
  3. package/dist/constants/default-values.js +1 -1
  4. package/dist/constants/default-values.js.map +1 -1
  5. package/dist/footer.js +4 -4
  6. package/dist/footer.js.map +1 -1
  7. package/dist/header/desktop-header.js +2 -2
  8. package/dist/header/desktop-header.js.map +1 -1
  9. package/dist/header/menu/header-menu-item.js +1 -1
  10. package/dist/header/menu/header-menu-item.js.map +1 -1
  11. package/dist/header/menu/index.js +1 -1
  12. package/dist/header/menu/index.js.map +1 -1
  13. package/dist/header/shared-components.js +3 -3
  14. package/dist/header/shared-components.js.map +1 -1
  15. package/dist/styles.css +167 -168
  16. package/package.json +1 -1
  17. package/src/components/input.tsx +1 -1
  18. package/src/constants/default-values.tsx +1 -1
  19. package/src/footer.tsx +4 -4
  20. package/src/header/desktop-header.tsx +2 -2
  21. package/src/header/menu/header-menu-item.tsx +1 -1
  22. package/src/header/menu/index.tsx +1 -1
  23. package/src/header/shared-components.tsx +3 -3
  24. package/src/styles.css +167 -168
package/src/styles.css CHANGED
@@ -153,209 +153,208 @@
153
153
  }
154
154
 
155
155
  @layer utilities {
156
- /* Typography Utilities - Headlines Large */
157
- .prose-h1-large {
158
- font-family: var(--font-family-noto);
159
- font-size: var(--font-size-h1-large);
160
- font-weight: 700;
161
- line-height: var(--line-height-normal);
162
- letter-spacing: var(--letter-spacing-wide);
156
+ body.no-scroll {
157
+ overflow: hidden;
163
158
  }
159
+ }
164
160
 
165
- .prose-h2-large {
166
- font-family: var(--font-family-noto);
167
- font-size: var(--font-size-h2-large);
168
- font-weight: 700;
169
- line-height: var(--line-height-normal);
170
- letter-spacing: var(--letter-spacing-wide);
171
- }
161
+ /* Typography Utilities - Headlines Large */
162
+ @utility prose-h1-large {
163
+ font-family: var(--font-family-noto);
164
+ font-size: var(--font-size-h1-large);
165
+ font-weight: 700;
166
+ line-height: var(--line-height-normal);
167
+ letter-spacing: 2.4px;
168
+ }
172
169
 
173
- .prose-h3-large {
174
- font-family: var(--font-family-noto);
175
- font-size: var(--font-size-h3-large);
176
- font-weight: 700;
177
- line-height: var(--line-height-normal);
178
- letter-spacing: var(--letter-spacing-wide);
179
- }
170
+ @utility prose-h2-large {
171
+ font-family: var(--font-family-noto);
172
+ font-size: var(--font-size-h2-large);
173
+ font-weight: 700;
174
+ line-height: var(--line-height-normal);
175
+ letter-spacing: 2px;
176
+ }
180
177
 
181
- .prose-h4-large {
182
- font-family: var(--font-family-noto);
183
- font-size: var(--font-size-h4-large);
184
- font-weight: 700;
185
- line-height: var(--line-height-normal);
186
- letter-spacing: var(--letter-spacing-wide);
187
- }
178
+ @utility prose-h3-large {
179
+ font-family: var(--font-family-noto);
180
+ font-size: var(--font-size-h3-large);
181
+ font-weight: 700;
182
+ line-height: var(--line-height-normal);
183
+ letter-spacing: 1.6px;
184
+ }
188
185
 
189
- .prose-h5-large {
190
- font-family: var(--font-family-noto);
191
- font-size: var(--font-size-h5-large);
192
- font-weight: 700;
193
- line-height: var(--line-height-normal);
194
- letter-spacing: var(--letter-spacing-wide);
195
- }
186
+ @utility prose-h4-large {
187
+ font-family: var(--font-family-noto);
188
+ font-size: var(--font-size-h4-large);
189
+ font-weight: 700;
190
+ line-height: var(--line-height-normal);
191
+ letter-spacing: 1.4px;
192
+ }
196
193
 
197
- .prose-h6-large {
198
- font-family: var(--font-family-noto);
199
- font-size: var(--font-size-h6-large);
200
- font-weight: 700;
201
- line-height: var(--line-height-normal);
202
- letter-spacing: var(--letter-spacing-wide);
203
- }
194
+ @utility prose-h5-large {
195
+ font-family: var(--font-family-noto);
196
+ font-size: var(--font-size-h5-large);
197
+ font-weight: 700;
198
+ line-height: var(--line-height-normal);
199
+ letter-spacing: 1.1px;
200
+ }
204
201
 
205
- /* Typography Utilities - Headlines Small */
206
- .prose-h1-small {
207
- font-family: var(--font-family-noto);
208
- font-size: var(--font-size-h1-small);
209
- font-weight: 700;
210
- line-height: var(--line-height-normal);
211
- letter-spacing: 1.6px;
212
- }
202
+ @utility prose-h6-large {
203
+ font-family: var(--font-family-noto);
204
+ font-size: var(--font-size-h6-large);
205
+ font-weight: 700;
206
+ line-height: var(--line-height-normal);
207
+ letter-spacing: 0.9px;
208
+ }
213
209
 
214
- .prose-h2-small {
215
- font-family: var(--font-family-noto);
216
- font-size: var(--font-size-h2-small);
217
- font-weight: 700;
218
- line-height: var(--line-height-normal);
219
- letter-spacing: 1.4px;
220
- }
210
+ /* Typography Utilities - Headlines Small */
211
+ @utility prose-h1-small {
212
+ font-family: var(--font-family-noto);
213
+ font-size: var(--font-size-h1-small);
214
+ font-weight: 700;
215
+ line-height: var(--line-height-normal);
216
+ letter-spacing: 1.6px;
217
+ }
221
218
 
222
- .prose-h3-small {
223
- font-family: var(--font-family-noto);
224
- font-size: var(--font-size-h3-small);
225
- font-weight: 700;
226
- line-height: var(--line-height-normal);
227
- letter-spacing: var(--letter-spacing-wide);
228
- }
219
+ @utility prose-h2-small {
220
+ font-family: var(--font-family-noto);
221
+ font-size: var(--font-size-h2-small);
222
+ font-weight: 700;
223
+ line-height: var(--line-height-normal);
224
+ letter-spacing: 1.4px;
225
+ }
229
226
 
230
- .prose-h4-small {
231
- font-family: var(--font-family-noto);
232
- font-size: var(--font-size-h4-small);
233
- font-weight: 700;
234
- line-height: var(--line-height-normal);
235
- letter-spacing: var(--letter-spacing-wide);
236
- }
227
+ @utility prose-h3-small {
228
+ font-family: var(--font-family-noto);
229
+ font-size: var(--font-size-h3-small);
230
+ font-weight: 700;
231
+ line-height: var(--line-height-normal);
232
+ letter-spacing: 1.2px;
233
+ }
237
234
 
238
- .prose-h5-small {
239
- font-family: var(--font-family-noto);
240
- font-size: var(--font-size-h5-small);
241
- font-weight: 700;
242
- line-height: var(--line-height-normal);
243
- letter-spacing: var(--letter-spacing-wide);
244
- }
235
+ @utility prose-h4-small {
236
+ font-family: var(--font-family-noto);
237
+ font-size: var(--font-size-h4-small);
238
+ font-weight: 700;
239
+ line-height: var(--line-height-normal);
240
+ letter-spacing: 1.1px;
241
+ }
245
242
 
246
- .prose-h6-small {
247
- font-family: var(--font-family-noto);
248
- font-size: var(--font-size-h6-small);
249
- font-weight: 700;
250
- line-height: var(--line-height-normal);
251
- letter-spacing: var(--letter-spacing-wide);
252
- }
243
+ @utility prose-h5-small {
244
+ font-family: var(--font-family-noto);
245
+ font-size: var(--font-size-h5-small);
246
+ font-weight: 700;
247
+ line-height: var(--line-height-normal);
248
+ letter-spacing: 1px;
249
+ }
253
250
 
254
- /* Typography Utilities - Paragraphs */
255
- .prose-p1 {
256
- font-family: var(--font-family-noto);
257
- font-size: var(--font-size-p1);
258
- font-weight: 500;
259
- line-height: var(--line-height-normal);
260
- letter-spacing: var(--letter-spacing-wide);
261
- }
251
+ @utility prose-h6-small {
252
+ font-family: var(--font-family-noto);
253
+ font-size: var(--font-size-h6-small);
254
+ font-weight: 700;
255
+ line-height: var(--line-height-normal);
256
+ letter-spacing: 0.9px;
257
+ }
262
258
 
263
- .prose-p1-bold {
264
- font-family: var(--font-family-noto);
265
- font-size: var(--font-size-p1);
266
- font-weight: 700;
267
- line-height: var(--line-height-normal);
268
- letter-spacing: var(--letter-spacing-wide);
269
- }
259
+ /* Typography Utilities - Paragraphs */
260
+ @utility prose-p1 {
261
+ font-family: var(--font-family-noto);
262
+ font-size: var(--font-size-p1);
263
+ font-weight: 500;
264
+ line-height: var(--line-height-normal);
265
+ letter-spacing: 0.8px;
266
+ }
270
267
 
271
- .prose-p2 {
272
- font-family: var(--font-family-noto);
273
- font-size: var(--font-size-p2);
274
- font-weight: 500;
275
- line-height: var(--line-height-normal);
276
- letter-spacing: var(--letter-spacing-wide);
277
- }
268
+ @utility prose-p1-bold {
269
+ font-family: var(--font-family-noto);
270
+ font-size: var(--font-size-p1);
271
+ font-weight: 700;
272
+ line-height: var(--line-height-normal);
273
+ letter-spacing: 0.8px;
274
+ }
278
275
 
279
- .prose-p2-bold {
280
- font-family: var(--font-family-noto);
281
- font-size: var(--font-size-p2);
282
- font-weight: 700;
283
- line-height: var(--line-height-normal);
284
- letter-spacing: var(--letter-spacing-wide);
285
- }
276
+ @utility prose-p2 {
277
+ font-family: var(--font-family-noto);
278
+ font-size: var(--font-size-p2);
279
+ font-weight: 500;
280
+ line-height: var(--line-height-normal);
281
+ letter-spacing: 0.7px;
282
+ }
286
283
 
287
- .prose-p3 {
288
- font-family: var(--font-family-noto);
289
- font-size: var(--font-size-p3);
290
- font-weight: 500;
291
- line-height: var(--line-height-normal);
292
- letter-spacing: var(--letter-spacing-wide);
293
- }
284
+ @utility prose-p2-bold {
285
+ font-family: var(--font-family-noto);
286
+ font-size: var(--font-size-p2);
287
+ font-weight: 700;
288
+ line-height: var(--line-height-normal);
289
+ letter-spacing: 0.7px;
290
+ }
294
291
 
295
- .prose-p3-bold {
296
- font-family: var(--font-family-noto);
297
- font-size: var(--font-size-p3);
298
- font-weight: 700;
299
- line-height: var(--line-height-normal);
300
- letter-spacing: var(--letter-spacing-wide);
301
- }
292
+ @utility prose-p3 {
293
+ font-family: var(--font-family-noto);
294
+ font-size: var(--font-size-p3);
295
+ font-weight: 500;
296
+ line-height: var(--line-height-normal);
297
+ letter-spacing: 0.6px;
298
+ }
302
299
 
303
- .prose-p4 {
304
- font-family: var(--font-family-noto);
305
- font-size: var(--font-size-p4);
306
- font-weight: 500;
307
- line-height: var(--line-height-normal);
308
- letter-spacing: var(--letter-spacing-wide);
309
- }
300
+ @utility prose-p3-bold {
301
+ font-family: var(--font-family-noto);
302
+ font-size: var(--font-size-p3);
303
+ font-weight: 700;
304
+ line-height: var(--line-height-normal);
305
+ letter-spacing: 0.6px;
306
+ }
310
307
 
311
- .prose-p4-bold {
312
- font-family: var(--font-family-noto);
313
- font-size: var(--font-size-p4);
314
- font-weight: 700;
315
- line-height: var(--line-height-normal);
316
- letter-spacing: var(--letter-spacing-wide);
317
- }
308
+ @utility prose-p4 {
309
+ font-family: var(--font-family-noto);
310
+ font-size: var(--font-size-p4);
311
+ font-weight: 500;
312
+ line-height: var(--line-height-normal);
313
+ letter-spacing: 0.5px;
314
+ }
318
315
 
319
- /* Swei Marker Sans Font Variants */
320
- .font-swei {
321
- font-family: var(--font-family-swei);
322
- }
316
+ @utility prose-p4-bold {
317
+ font-family: var(--font-family-noto);
318
+ font-size: var(--font-size-p4);
319
+ font-weight: 700;
320
+ line-height: var(--line-height-normal);
321
+ letter-spacing: 0.5px;
322
+ }
323
323
 
324
- /* Theme Color Utilities */
325
- .theme-red {
326
- --theme-color: var(--color-red-400);
327
- }
328
- .theme-yellow {
329
- --theme-color: var(--color-yellow-400);
330
- }
331
- .theme-blue {
332
- --theme-color: var(--color-blue-400);
333
- }
324
+ /* Swei Marker Sans Font Variants */
325
+ @utility font-swei {
326
+ font-family: var(--font-family-swei);
327
+ }
334
328
 
335
- /* Custom Scrollbar Utilities */
336
- .scrollbar-thin {
337
- scrollbar-width: thin;
338
- scrollbar-color: var(--color-neutral-gray-300) transparent;
339
- }
329
+ @utility scrollbar-thin {
330
+ scrollbar-width: thin;
331
+ scrollbar-color: var(--color-neutral-300) transparent;
340
332
 
341
- .scrollbar-thin::-webkit-scrollbar {
333
+ &::-webkit-scrollbar {
342
334
  width: 6px;
343
335
  }
344
336
 
345
- .scrollbar-thin::-webkit-scrollbar-track {
337
+ &::-webkit-scrollbar-track {
346
338
  background: transparent;
347
339
  }
348
340
 
349
- .scrollbar-thin::-webkit-scrollbar-thumb {
341
+ &::-webkit-scrollbar-thumb {
350
342
  background: transparent;
351
343
  border-radius: 3px;
352
344
  }
353
345
 
354
- .scrollbar-thin::-webkit-scrollbar-thumb:hover {
346
+ &::-webkit-scrollbar-thumb:hover {
355
347
  background: transparent;
356
348
  }
349
+ }
357
350
 
358
- body.no-scroll {
359
- overflow: hidden;
360
- }
351
+ /* Theme Color Utilities */
352
+ @utility theme-red {
353
+ --theme-color: var(--color-red-400);
354
+ }
355
+ @utility theme-yellow {
356
+ --theme-color: var(--color-yellow-400);
357
+ }
358
+ @utility theme-blue {
359
+ --theme-color: var(--color-blue-400);
361
360
  }