@jjlmoya/utils-cooking 1.7.0 → 1.9.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.
@@ -1,569 +0,0 @@
1
- .pizza-container {
2
- --color-primary: #f97316;
3
- --color-primary-dark: #ea580c;
4
- --color-primary-light: #fed7aa;
5
- --color-secondary: #3b82f6;
6
- --color-secondary-dark: #1e40af;
7
- --color-secondary-light: #bfdbfe;
8
- --color-bg: #fff;
9
- --color-border: #e2e8f0;
10
- --color-text-primary: #1e293b;
11
- --color-text-secondary: #64748b;
12
- --color-text-tertiary: #94a3b8;
13
- --color-white: #fff;
14
- --color-blue-400: #60a5fa;
15
- --color-blue-500: #3b82f6;
16
- --color-blue-100: #dbeafe;
17
- --color-blue-300: #93c5fd;
18
- --color-orange-100: #fed7aa;
19
- --color-orange-300: #fdba74;
20
- --color-slate-200: #e2e8f0;
21
- --color-slate-400: #cbd5e1;
22
- --color-slate-800: #1e293b;
23
- --color-slate-900: #0f172a;
24
- --color-amber-100: #fef08a;
25
- --color-orange-400: #fb923c;
26
- --color-orange-600: #b45309;
27
- --color-orange-700: #92400e;
28
- --color-orange-900: #78350f;
29
- --color-bg-dark: #0f172a;
30
- --color-border-dark: #1e293b;
31
-
32
- width: 100%;
33
- }
34
-
35
- .theme-dark .pizza-container {
36
- --color-bg: #0f172a;
37
- --color-border: #1e293b;
38
- --color-text-primary: #f1f5f9;
39
- --color-text-secondary: #cbd5e1;
40
- --color-text-tertiary: #64748b;
41
- }
42
-
43
- .pizza-grid {
44
- display: grid;
45
- gap: 1.5rem;
46
- grid-template-columns: 1fr;
47
- }
48
-
49
- @media (min-width: 1024px) {
50
- .pizza-grid {
51
- grid-template-columns: repeat(2, 1fr);
52
- gap: 2rem;
53
- }
54
- }
55
-
56
- .pizza-controls {
57
- display: flex;
58
- flex-direction: column;
59
- gap: 1.5rem;
60
- }
61
-
62
- @media (min-width: 1024px) {
63
- .pizza-controls {
64
- grid-column: span 1;
65
- grid-row: span 2;
66
- }
67
- }
68
-
69
- .pizza-card {
70
- background-color: var(--color-bg);
71
- border-radius: 1.5rem;
72
- padding: 1.5rem;
73
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
74
- border: 1px solid var(--color-border);
75
- }
76
-
77
- @media (min-width: 768px) {
78
- .pizza-card {
79
- padding: 2rem;
80
- }
81
- }
82
-
83
- .pizza-title {
84
- font-size: 1.5rem;
85
- font-weight: 700;
86
- margin-bottom: 2rem;
87
- display: flex;
88
- align-items: center;
89
- gap: 0.75rem;
90
- color: var(--color-text-primary);
91
- }
92
-
93
- .pizza-icon {
94
- width: 1.5rem;
95
- height: 1.5rem;
96
- color: var(--color-primary);
97
- }
98
-
99
- .pizza-controls-space {
100
- display: flex;
101
- flex-direction: column;
102
- gap: 2.5rem;
103
- }
104
-
105
- .pizza-control-group {
106
- display: flex;
107
- flex-direction: column;
108
- gap: 1rem;
109
- }
110
-
111
- .pizza-label-row {
112
- display: flex;
113
- justify-content: space-between;
114
- margin-bottom: 1rem;
115
- align-items: center;
116
- }
117
-
118
- .pizza-label {
119
- font-size: 0.875rem;
120
- font-weight: 500;
121
- color: var(--color-text-secondary);
122
- text-transform: uppercase;
123
- letter-spacing: 0.05em;
124
- }
125
-
126
- .pizza-value {
127
- font-size: 1.5rem;
128
- font-weight: 700;
129
- font-variant-numeric: tabular-nums;
130
- color: var(--color-text-primary);
131
- }
132
-
133
- .pizza-value-blue {
134
- color: var(--color-secondary);
135
- }
136
-
137
- .pizza-unit {
138
- font-size: 0.875rem;
139
- font-weight: 400;
140
- color: var(--color-text-tertiary);
141
- margin-left: 0.25rem;
142
- }
143
-
144
- .pizza-slider {
145
- width: 100%;
146
- height: 0.5rem;
147
- background-color: #e2e8f0;
148
- border-radius: 0.5rem;
149
- appearance: none;
150
- cursor: pointer;
151
- accent-color: var(--color-primary);
152
- transition: all 0.2s;
153
- }
154
-
155
- .pizza-slider:hover {
156
- accent-color: var(--color-primary-dark);
157
- }
158
-
159
- .pizza-slider-blue {
160
- accent-color: var(--color-secondary);
161
- }
162
-
163
- .pizza-slider-blue:hover {
164
- accent-color: var(--color-secondary-dark);
165
- }
166
-
167
- .pizza-slider::-webkit-slider-thumb {
168
- -webkit-appearance: none;
169
- appearance: none;
170
- width: 1.25rem;
171
- height: 1.25rem;
172
- border-radius: 50%;
173
- background: currentcolor;
174
- cursor: pointer;
175
- box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
176
- }
177
-
178
- .pizza-slider::-moz-range-thumb {
179
- width: 1.25rem;
180
- height: 1.25rem;
181
- border-radius: 50%;
182
- background: currentcolor;
183
- cursor: pointer;
184
- border: none;
185
- box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
186
- }
187
-
188
- .theme-dark .pizza-slider::-webkit-slider-thumb {
189
- box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.5);
190
- }
191
-
192
- .theme-dark .pizza-slider::-moz-range-thumb {
193
- box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.5);
194
- }
195
-
196
- .pizza-range-labels {
197
- display: flex;
198
- justify-content: space-between;
199
- font-size: 0.75rem;
200
- color: var(--color-text-tertiary);
201
- margin-top: 0.5rem;
202
- }
203
-
204
- .pizza-tip {
205
- background-color: rgba(249, 115, 22, 0.05);
206
- border-radius: 1.5rem;
207
- padding: 1.5rem;
208
- border: 1px solid rgba(249, 115, 22, 0.1);
209
- display: flex;
210
- gap: 1rem;
211
- }
212
-
213
- .pizza-tip-icon-wrapper {
214
- padding: 0.75rem;
215
- background-color: rgba(249, 115, 22, 0.1);
216
- border-radius: 0.75rem;
217
- height: fit-content;
218
- flex-shrink: 0;
219
- }
220
-
221
- .pizza-tip-icon {
222
- width: 1.5rem;
223
- height: 1.5rem;
224
- color: var(--color-orange-600);
225
- }
226
-
227
- .pizza-tip-title {
228
- font-weight: 700;
229
- color: var(--color-orange-900);
230
- margin-bottom: 0.25rem;
231
- }
232
-
233
- .theme-dark .pizza-tip-title {
234
- color: var(--color-orange-100);
235
- }
236
-
237
- .pizza-tip-text {
238
- font-size: 0.875rem;
239
- color: var(--color-orange-700);
240
- line-height: 1.5;
241
- }
242
-
243
- .theme-dark .pizza-tip-text {
244
- color: var(--color-amber-100);
245
- }
246
-
247
- .pizza-recipe {
248
- }
249
-
250
- @media (min-width: 1024px) {
251
- .pizza-recipe {
252
- grid-column: span 1;
253
- grid-row: span 1;
254
- }
255
- }
256
-
257
- .pizza-recipe-card {
258
- background-color: var(--color-bg-dark);
259
- color: var(--color-white);
260
- border-radius: 1.5rem;
261
- padding: 1.5rem;
262
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
263
- }
264
-
265
- @media (min-width: 768px) {
266
- .pizza-recipe-card {
267
- padding: 3rem;
268
- }
269
- }
270
-
271
- .pizza-recipe-header {
272
- display: flex;
273
- flex-direction: column;
274
- gap: 1rem;
275
- margin-bottom: 3rem;
276
- }
277
-
278
- @media (min-width: 768px) {
279
- .pizza-recipe-header {
280
- flex-direction: row;
281
- align-items: center;
282
- justify-content: space-between;
283
- gap: 1rem;
284
- }
285
- }
286
-
287
- .pizza-recipe-title {
288
- font-size: 1.875rem;
289
- font-weight: 700;
290
- }
291
-
292
- .pizza-yeast-buttons {
293
- display: flex;
294
- gap: 0.5rem;
295
- background-color: rgba(255, 255, 255, 0.1);
296
- padding: 0.25rem;
297
- border-radius: 0.75rem;
298
- width: 100%;
299
- }
300
-
301
- @media (min-width: 768px) {
302
- .pizza-yeast-buttons {
303
- width: auto;
304
- }
305
- }
306
-
307
- .pizza-yeast-btn {
308
- flex: 1;
309
- padding: 0.5rem 1rem;
310
- border-radius: 0.5rem;
311
- background-color: transparent;
312
- color: var(--color-text-tertiary);
313
- border: none;
314
- font-size: 0.875rem;
315
- font-weight: 500;
316
- cursor: pointer;
317
- transition: all 0.2s;
318
- text-align: center;
319
- }
320
-
321
- .pizza-yeast-btn:hover {
322
- background-color: rgba(255, 255, 255, 0.1);
323
- }
324
-
325
- @media (min-width: 768px) {
326
- .pizza-yeast-btn {
327
- flex: none;
328
- }
329
- }
330
-
331
- .pizza-yeast-btn-active {
332
- background-color: rgba(255, 255, 255, 0.1);
333
- color: var(--color-white);
334
- }
335
-
336
- .pizza-recipe-grid {
337
- display: grid;
338
- grid-template-columns: 1fr;
339
- gap: 3rem;
340
- }
341
-
342
- @media (min-width: 768px) {
343
- .pizza-recipe-grid {
344
- grid-template-columns: repeat(2, 1fr);
345
- gap: 2rem;
346
- }
347
- }
348
-
349
- .pizza-recipe-group {
350
- display: flex;
351
- flex-direction: column;
352
- gap: 1rem;
353
- }
354
-
355
- .pizza-recipe-label {
356
- display: flex;
357
- align-items: center;
358
- gap: 0.75rem;
359
- font-size: 0.75rem;
360
- font-weight: 700;
361
- text-transform: uppercase;
362
- letter-spacing: 0.05em;
363
- transition: color 0.2s;
364
- }
365
-
366
- .pizza-recipe-label-white {
367
- color: var(--color-slate-400);
368
- }
369
-
370
- .pizza-recipe-label-white:hover {
371
- color: var(--color-white);
372
- }
373
-
374
- .pizza-recipe-label-blue {
375
- color: var(--color-blue-400);
376
- }
377
-
378
- .pizza-recipe-label-blue:hover {
379
- color: var(--color-blue-300);
380
- }
381
-
382
- .pizza-recipe-label-gray {
383
- color: var(--color-slate-400);
384
- }
385
-
386
- .pizza-recipe-label-gray:hover {
387
- color: var(--color-slate-200);
388
- }
389
-
390
- .pizza-recipe-label-orange {
391
- color: var(--color-orange-400);
392
- }
393
-
394
- .pizza-recipe-label-orange:hover {
395
- color: var(--color-orange-300);
396
- }
397
-
398
- .pizza-recipe-icon {
399
- width: 1.25rem;
400
- height: 1.25rem;
401
- }
402
-
403
- .pizza-recipe-value {
404
- font-size: 3rem;
405
- font-weight: 900;
406
- letter-spacing: -0.05em;
407
- font-variant-numeric: tabular-nums;
408
- }
409
-
410
- @media (min-width: 768px) {
411
- .pizza-recipe-value {
412
- font-size: 3.75rem;
413
- }
414
- }
415
-
416
- .pizza-recipe-value-blue {
417
- color: var(--color-blue-100);
418
- }
419
-
420
- .pizza-recipe-value-orange {
421
- color: var(--color-orange-100);
422
- }
423
-
424
- .pizza-recipe-unit {
425
- font-size: 1.125rem;
426
- font-weight: 400;
427
- color: var(--color-text-secondary);
428
- margin-left: 0.25rem;
429
- }
430
-
431
- .pizza-recipe-bar {
432
- height: 0.25rem;
433
- width: 100%;
434
- background-color: var(--color-slate-800);
435
- border-radius: 0.25rem;
436
- overflow: hidden;
437
- }
438
-
439
- .pizza-recipe-bar-fill {
440
- height: 100%;
441
- background-color: var(--color-white);
442
- width: 100%;
443
- transform-origin: left;
444
- transition: transform 1s;
445
- border-radius: 0.25rem;
446
- }
447
-
448
- .pizza-recipe-bar-fill-blue {
449
- background-color: var(--color-blue-500);
450
- }
451
-
452
- .pizza-recipe-note {
453
- font-size: 0.75rem;
454
- color: var(--color-text-secondary);
455
- margin-top: 0.5rem;
456
- }
457
-
458
- .pizza-recipe-total {
459
- margin-top: 3rem;
460
- padding-top: 2rem;
461
- border-top: 1px solid rgba(255, 255, 255, 0.1);
462
- display: flex;
463
- justify-content: space-between;
464
- align-items: flex-end;
465
- }
466
-
467
- .pizza-recipe-total-label {
468
- font-size: 0.875rem;
469
- color: var(--color-slate-400);
470
- }
471
-
472
- .pizza-recipe-total-value {
473
- font-size: 1.5rem;
474
- font-weight: 700;
475
- }
476
-
477
- .pizza-visual {
478
- }
479
-
480
- @media (min-width: 1024px) {
481
- .pizza-visual {
482
- grid-column: span 1;
483
- grid-row: span 1;
484
- }
485
- }
486
-
487
- .pizza-visual-card {
488
- background-color: var(--color-bg);
489
- border-radius: 1.5rem;
490
- padding: 1.5rem;
491
- border: 1px solid var(--color-border);
492
- display: flex;
493
- flex-direction: column;
494
- align-items: center;
495
- justify-content: center;
496
- min-height: 20rem;
497
- }
498
-
499
- .pizza-visual-container {
500
- position: relative;
501
- width: 100%;
502
- max-width: 20rem;
503
- height: 16rem;
504
- display: flex;
505
- align-items: center;
506
- justify-content: center;
507
- }
508
-
509
- .pizza-visual-dough {
510
- border-radius: 50%;
511
- background-color: #f3e5ab;
512
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
513
- transition: all 0.5s;
514
- position: relative;
515
- z-index: 10;
516
- }
517
-
518
- .pizza-visual-dough::after {
519
- content: "";
520
- position: absolute;
521
- inset: 0;
522
- border-radius: 50%;
523
- background: linear-gradient(
524
- 135deg,
525
- rgba(255, 255, 255, 0.4) 0%,
526
- rgba(0, 0, 0, 0.05) 100%
527
- );
528
- }
529
-
530
- .pizza-visual-reference {
531
- position: absolute;
532
- bottom: 0;
533
- right: 1rem;
534
- display: flex;
535
- flex-direction: column;
536
- align-items: center;
537
- opacity: 0.3;
538
- pointer-events: none;
539
- z-index: 0;
540
- }
541
-
542
- .pizza-visual-reference-icon {
543
- width: 6rem;
544
- height: 6rem;
545
- color: var(--color-slate-400);
546
- }
547
-
548
- .pizza-visual-reference-label {
549
- font-size: 0.625rem;
550
- text-transform: uppercase;
551
- letter-spacing: 0.05em;
552
- font-weight: 700;
553
- color: var(--color-slate-400);
554
- }
555
-
556
- .pizza-visual-diameter {
557
- position: absolute;
558
- bottom: -2rem;
559
- font-size: 0.75rem;
560
- color: var(--color-text-tertiary);
561
- }
562
-
563
- .pizza-visual-text {
564
- margin-top: 2rem;
565
- text-align: center;
566
- font-size: 0.875rem;
567
- color: var(--color-text-secondary);
568
- max-width: 16rem;
569
- }