pulp-image 0.1.4 → 0.1.5

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/ui/styles.css +55 -49
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pulp-image",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "A CLI tool for processing images with resize, format conversion, and optimization",
5
5
  "type": "module",
6
6
  "main": "bin/pulp.js",
package/ui/styles.css CHANGED
@@ -1,32 +1,38 @@
1
1
  /* Citrus/Clementine Pulp Inspired Design - Cute but Clean */
2
2
 
3
3
  :root {
4
+ /* Citrus/Orange Theme - Matching Website Colors */
4
5
  --orange-primary: #ff8c42;
5
6
  --orange-light: #ffb366;
6
- --orange-dark: #e6732a;
7
- --orange-bg: #fff5e6;
8
- --orange-bg-light: #fffaf0;
7
+ --orange-dark: #d65a1a; /* Darkened for better contrast with white text */
8
+ --orange-deep: #b84a12; /* Even darker for buttons */
9
+ --orange-text: #c24e10; /* 4.5:1 contrast on white - WCAG AA compliant */
10
+ --orange-text-hover: #a33f0a; /* Darker for hover states */
11
+ --orange-bg: #fff8f0;
12
+ --orange-bg-light: #fffbf7;
9
13
  --orange-accent: #ffa366;
10
14
 
11
15
  --yellow-light: #ffe6cc;
12
16
  --yellow-bg: #fff9f0;
13
17
 
14
- --text-primary: #333;
15
- --text-secondary: #666;
16
- --text-muted: #999;
18
+ /* Text Colors - WCAG AA compliant on light backgrounds */
19
+ --text-primary: #2d2722; /* 12.5:1 on white */
20
+ --text-secondary: #5a5048; /* 6.5:1 on white */
21
+ --text-muted: #6e635a; /* 5.0:1 on white */
17
22
 
18
- --border-color: #ffd9b3;
23
+ --border-color: #ffe4cc;
19
24
  --border-radius: 8px;
20
25
  --border-radius-lg: 12px;
21
26
 
22
- --shadow-sm: 0 2px 4px rgba(255, 140, 66, 0.1);
23
- --shadow-md: 0 4px 6px rgba(255, 140, 66, 0.15);
24
- --shadow-lg: 0 8px 16px rgba(255, 140, 66, 0.2);
27
+ --shadow-sm: 0 2px 4px rgba(45, 39, 34, 0.04);
28
+ --shadow-md: 0 4px 12px rgba(45, 39, 34, 0.08);
29
+ --shadow-lg: 0 8px 24px rgba(45, 39, 34, 0.12);
25
30
 
26
- --success: #4caf50;
27
- --warning: #ff9800;
28
- --danger: #f44336;
29
- --info: #2196f3;
31
+ /* Semantic Colors - WCAG AA compliant on white backgrounds */
32
+ --success: #2e7d32; /* Darkened green - 5.6:1 contrast */
33
+ --warning: #e65100; /* Darkened orange - 4.6:1 contrast */
34
+ --danger: #c62828; /* Darkened red - 5.9:1 contrast */
35
+ --info: #1565c0; /* Darkened blue - 5.8:1 contrast */
30
36
  }
31
37
 
32
38
  * {
@@ -55,7 +61,7 @@ body {
55
61
 
56
62
  /* Header */
57
63
  .header {
58
- background: linear-gradient(135deg, #ffa366 0%, #ff8c42 50%, #ff7a3d 100%);
64
+ background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange-deep) 100%);
59
65
  color: white;
60
66
  padding: 1.5rem 2rem;
61
67
  text-align: center;
@@ -108,13 +114,13 @@ body {
108
114
 
109
115
  .brand-subtitle .version {
110
116
  font-size: 0.7rem;
111
- opacity: 0.75;
112
- font-weight: 400;
117
+ font-weight: 500;
113
118
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
114
- background: rgba(255, 255, 255, 0.12);
115
- padding: 0.15rem 0.35rem;
116
- border-radius: 3px;
119
+ background: rgba(255, 255, 255, 0.25);
120
+ padding: 0.2rem 0.5rem;
121
+ border-radius: 4px;
117
122
  margin-left: 0.25rem;
123
+ border: 1px solid rgba(255, 255, 255, 0.3);
118
124
  }
119
125
 
120
126
  /* Tabs */
@@ -139,12 +145,12 @@ body {
139
145
 
140
146
  .tab-button:hover {
141
147
  background: rgba(255, 140, 66, 0.1);
142
- color: var(--orange-primary);
148
+ color: var(--orange-text);
143
149
  }
144
150
 
145
151
  .tab-button.active {
146
- color: var(--orange-primary);
147
- border-bottom-color: var(--orange-primary);
152
+ color: var(--orange-text);
153
+ border-bottom-color: var(--orange-dark);
148
154
  background: white;
149
155
  }
150
156
 
@@ -218,7 +224,7 @@ body {
218
224
  .folder-open-fallback-path {
219
225
  font-size: 0.85rem;
220
226
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
221
- color: var(--orange-primary);
227
+ color: var(--orange-text);
222
228
  background: white;
223
229
  padding: 0.5rem 0.75rem;
224
230
  border-radius: 4px;
@@ -240,7 +246,7 @@ body {
240
246
 
241
247
  .preview-text {
242
248
  font-size: 0.85rem;
243
- color: var(--orange-primary);
249
+ color: var(--orange-text);
244
250
  font-family: 'Courier New', monospace;
245
251
  padding: 0.5rem;
246
252
  background: var(--orange-bg);
@@ -249,7 +255,7 @@ body {
249
255
  }
250
256
 
251
257
  .value-display {
252
- color: var(--orange-primary);
258
+ color: var(--orange-text);
253
259
  font-weight: 600;
254
260
  margin-left: 0.5rem;
255
261
  }
@@ -313,7 +319,7 @@ body {
313
319
 
314
320
  .toggle-file-list-btn {
315
321
  padding: 0.25rem 0.75rem;
316
- background: var(--orange-primary);
322
+ background: var(--orange-dark);
317
323
  color: white;
318
324
  border: none;
319
325
  border-radius: 4px;
@@ -323,7 +329,7 @@ body {
323
329
  }
324
330
 
325
331
  .toggle-file-list-btn:hover {
326
- background: var(--orange-dark);
332
+ background: var(--orange-deep);
327
333
  }
328
334
 
329
335
  .toggle-file-list-btn-secondary {
@@ -403,12 +409,12 @@ body {
403
409
  .advanced-options-summary {
404
410
  cursor: pointer;
405
411
  font-weight: 600;
406
- color: var(--orange-primary);
412
+ color: var(--orange-text);
407
413
  user-select: none;
408
414
  }
409
415
 
410
416
  .advanced-options-summary:hover {
411
- color: var(--orange-dark);
417
+ color: var(--orange-text-hover);
412
418
  }
413
419
 
414
420
  .advanced-options-content {
@@ -462,14 +468,14 @@ body {
462
468
  width: 20px;
463
469
  height: 20px;
464
470
  border-radius: 50%;
465
- background: var(--orange-primary);
471
+ background: var(--orange-dark);
466
472
  cursor: pointer;
467
473
  box-shadow: var(--shadow-sm);
468
474
  transition: all 0.2s;
469
475
  }
470
476
 
471
477
  .slider-input::-webkit-slider-thumb:hover {
472
- background: var(--orange-dark);
478
+ background: var(--orange-deep);
473
479
  transform: scale(1.1);
474
480
  }
475
481
 
@@ -477,7 +483,7 @@ body {
477
483
  width: 20px;
478
484
  height: 20px;
479
485
  border-radius: 50%;
480
- background: var(--orange-primary);
486
+ background: var(--orange-dark);
481
487
  cursor: pointer;
482
488
  border: none;
483
489
  box-shadow: var(--shadow-sm);
@@ -523,7 +529,7 @@ body {
523
529
  }
524
530
 
525
531
  .toggle-input:checked + .toggle-slider {
526
- background: var(--orange-primary);
532
+ background: var(--orange-dark);
527
533
  }
528
534
 
529
535
  .toggle-input:checked + .toggle-slider::before {
@@ -576,7 +582,7 @@ body {
576
582
  width: 18px;
577
583
  height: 18px;
578
584
  cursor: pointer;
579
- accent-color: var(--orange-primary);
585
+ accent-color: var(--orange-dark);
580
586
  }
581
587
 
582
588
  /* Color Picker */
@@ -625,13 +631,13 @@ body {
625
631
  }
626
632
 
627
633
  .button-primary {
628
- background: var(--orange-primary);
634
+ background: var(--orange-dark);
629
635
  color: white;
630
636
  flex: 1;
631
637
  }
632
638
 
633
639
  .button-primary:hover:not(:disabled) {
634
- background: var(--orange-dark);
640
+ background: var(--orange-deep);
635
641
  box-shadow: var(--shadow-md);
636
642
  transform: translateY(-1px);
637
643
  }
@@ -643,8 +649,8 @@ body {
643
649
 
644
650
  .button-secondary {
645
651
  background: white;
646
- color: var(--orange-primary);
647
- border: 2px solid var(--orange-primary);
652
+ color: var(--orange-text);
653
+ border: 2px solid var(--orange-dark);
648
654
  }
649
655
 
650
656
  .button-secondary:hover:not(:disabled) {
@@ -664,7 +670,7 @@ body {
664
670
  }
665
671
 
666
672
  .results-title {
667
- color: var(--orange-primary);
673
+ color: var(--orange-text);
668
674
  margin-bottom: 1.5rem;
669
675
  }
670
676
 
@@ -673,7 +679,7 @@ body {
673
679
  background: var(--orange-bg-light);
674
680
  border-radius: var(--border-radius);
675
681
  margin-bottom: 1rem;
676
- border-left: 4px solid var(--orange-primary);
682
+ border-left: 4px solid var(--orange-dark);
677
683
  }
678
684
 
679
685
  .result-item.success {
@@ -748,11 +754,11 @@ body {
748
754
  padding: 1.5rem;
749
755
  background: linear-gradient(135deg, var(--orange-bg) 0%, var(--yellow-light) 100%);
750
756
  border-radius: var(--border-radius-lg);
751
- border: 2px solid var(--orange-primary);
757
+ border: 2px solid var(--orange-dark);
752
758
  }
753
759
 
754
760
  .result-summary-title {
755
- color: var(--orange-primary);
761
+ color: var(--orange-text);
756
762
  margin-bottom: 1rem;
757
763
  font-size: 1.25rem;
758
764
  }
@@ -774,7 +780,7 @@ body {
774
780
  .summary-stat-value {
775
781
  font-size: 1.5rem;
776
782
  font-weight: 700;
777
- color: var(--orange-primary);
783
+ color: var(--orange-text);
778
784
  }
779
785
 
780
786
  .summary-stat-label {
@@ -789,12 +795,12 @@ body {
789
795
  }
790
796
 
791
797
  .help-content h2 {
792
- color: var(--orange-primary);
798
+ color: var(--orange-text);
793
799
  margin-bottom: 1rem;
794
800
  }
795
801
 
796
802
  .help-content h3 {
797
- color: var(--orange-dark);
803
+ color: var(--orange-text-hover);
798
804
  margin-top: 2rem;
799
805
  margin-bottom: 1rem;
800
806
  }
@@ -824,7 +830,7 @@ body {
824
830
  padding: 0.25rem 0.5rem;
825
831
  border-radius: 4px;
826
832
  font-family: 'Courier New', monospace;
827
- color: var(--orange-primary);
833
+ color: var(--orange-text);
828
834
  }
829
835
 
830
836
  .help-examples {
@@ -836,13 +842,13 @@ body {
836
842
  padding: 1rem;
837
843
  background: var(--orange-bg-light);
838
844
  border-radius: var(--border-radius);
839
- border-left: 4px solid var(--orange-primary);
845
+ border-left: 4px solid var(--orange-dark);
840
846
  }
841
847
 
842
848
  .example-block code {
843
849
  display: block;
844
850
  font-family: 'Courier New', monospace;
845
- color: var(--orange-primary);
851
+ color: var(--orange-text);
846
852
  font-weight: 600;
847
853
  margin-bottom: 0.5rem;
848
854
  }