@truconsent/consent-notice 0.0.2 → 0.0.3

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.
@@ -7,8 +7,8 @@
7
7
  max-width: 1200px;
8
8
  margin: 0 auto;
9
9
  padding: 20px;
10
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11
- background: #f8fafc;
10
+ font-family: var(--font-type);
11
+ background: var(--banner-card-bg);
12
12
  min-height: 100vh;
13
13
  }
14
14
 
@@ -25,18 +25,18 @@
25
25
  padding: 12px 24px;
26
26
  border: none;
27
27
  border-radius: 8px;
28
- background: #ffffff;
29
- color: #6b7280;
28
+ background: var(--banner-bg);
29
+ color: var(--banner-text-muted);
30
30
  font-weight: 500;
31
31
  font-size: 14px;
32
32
  cursor: pointer;
33
33
  transition: all 0.2s ease;
34
- border: 1px solid #e5e7eb;
34
+ border: 1px solid var(--banner-border);
35
35
  }
36
36
 
37
37
  .rc-tab:hover {
38
- background: #f3f4f6;
39
- color: #374151;
38
+ background: var(--banner-hover-bg);
39
+ color: var(--banner-text);
40
40
  }
41
41
 
42
42
  .rc-tab-active {
@@ -50,45 +50,45 @@
50
50
  display: flex;
51
51
  align-items: center;
52
52
  gap: 8px;
53
- background: #dbeafe;
54
- border: 1px solid #bfdbfe;
53
+ background: var(--banner-info-bg);
54
+ border: 1px solid var(--banner-info-border);
55
55
  border-radius: 8px;
56
56
  padding: 12px 16px;
57
57
  margin-bottom: 32px;
58
58
  }
59
59
 
60
60
  .rc-principal-icon {
61
- color: #3b82f6;
61
+ color: var(--banner-primary-color);
62
62
  width: 20px;
63
63
  height: 20px;
64
64
  }
65
65
 
66
66
  .rc-principal-text {
67
- color: #1e40af;
67
+ color: var(--banner-primary-color);
68
68
  font-weight: 500;
69
69
  font-size: 14px;
70
70
  }
71
71
 
72
72
  /* ================= CONTENT WRAPPER ================ */
73
73
  .rc-content {
74
- background: white;
74
+ background: var(--banner-bg);
75
75
  border-radius: 12px;
76
76
  padding: 32px;
77
77
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
78
- border: 1px solid #e5e7eb;
78
+ border: 1px solid var(--banner-border);
79
79
  }
80
80
 
81
81
  /* ================= TYPOGRAPHY ================ */
82
82
  .rc-section-title {
83
83
  font-size: 24px;
84
84
  font-weight: 700;
85
- color: #111827;
85
+ color: var(--banner-text);
86
86
  margin: 0 0 8px 0;
87
87
  }
88
88
 
89
89
  .rc-section-subtitle {
90
90
  font-size: 16px;
91
- color: #6b7280;
91
+ color: var(--banner-text-muted);
92
92
  margin: 0 0 24px 0;
93
93
  }
94
94
 
@@ -122,9 +122,9 @@
122
122
  }
123
123
 
124
124
  .rc-btn-secondary {
125
- background: white;
126
- color: #374151;
127
- border: 1px solid #d1d5db;
125
+ background: var(--banner-bg);
126
+ color: var(--banner-text);
127
+ border: 1px solid var(--banner-border);
128
128
  padding: 12px 20px;
129
129
  border-radius: 8px;
130
130
  font-weight: 500;
@@ -134,14 +134,14 @@
134
134
  }
135
135
 
136
136
  .rc-btn-secondary:hover {
137
- background: #f9fafb;
138
- border-color: #9ca3af;
137
+ background: var(--banner-hover-bg);
138
+ border-color: var(--banner-text-muted);
139
139
  }
140
140
 
141
141
  .rc-btn-danger {
142
- background: white;
143
- color: #dc2626;
144
- border: 1px solid #dc2626;
142
+ background: var(--banner-bg);
143
+ color: var(--banner-danger-btn);
144
+ border: 1px solid var(--banner-danger-btn);
145
145
  padding: 12px 20px;
146
146
  border-radius: 8px;
147
147
  font-weight: 500;
@@ -151,7 +151,7 @@
151
151
  }
152
152
 
153
153
  .rc-btn-danger:hover {
154
- background: #fef2f2;
154
+ background: var(--banner-danger-bg);
155
155
  }
156
156
 
157
157
  .rc-btn-icon {
@@ -167,10 +167,10 @@
167
167
  }
168
168
 
169
169
  .rc-consent-item {
170
- border: 1px solid #e5e7eb;
170
+ border: 1px solid var(--banner-border);
171
171
  border-radius: 12px;
172
172
  padding: 24px;
173
- background: #ffffff;
173
+ background: var(--banner-bg);
174
174
  position: relative;
175
175
  }
176
176
 
@@ -188,7 +188,7 @@
188
188
  .rc-consent-title {
189
189
  font-size: 18px;
190
190
  font-weight: 600;
191
- color: #111827;
191
+ color: var(--banner-text);
192
192
  margin: 0;
193
193
  flex: 1;
194
194
  }
@@ -201,7 +201,7 @@
201
201
  }
202
202
 
203
203
  .rc-info-icon {
204
- color: #6b7280;
204
+ color: var(--banner-text-muted);
205
205
  width: 20px;
206
206
  height: 20px;
207
207
  cursor: pointer;
@@ -209,7 +209,7 @@
209
209
  }
210
210
 
211
211
  .rc-info-icon:hover {
212
- color: #374151;
212
+ color: var(--banner-text);
213
213
  }
214
214
 
215
215
  .rc-badge {
@@ -222,18 +222,18 @@
222
222
  }
223
223
 
224
224
  .rc-badge-mandatory {
225
- background: #fecaca;
226
- color: #991b1b;
225
+ background: var(--banner-danger-bg);
226
+ color: var(--banner-danger-text);
227
227
  }
228
228
 
229
229
  .rc-badge-optional {
230
- background: #d1fae5;
231
- color: #065f46;
230
+ background: var(--banner-success-bg);
231
+ color: var(--banner-success-text);
232
232
  }
233
233
 
234
234
  .rc-consent-description {
235
235
  font-size: 14px;
236
- color: #6b7280;
236
+ color: var(--banner-text-muted);
237
237
  margin: 0 0 16px 0;
238
238
  line-height: 1.5;
239
239
  }
@@ -253,12 +253,12 @@
253
253
 
254
254
  .rc-detail-label {
255
255
  font-weight: 500;
256
- color: #374151;
256
+ color: var(--banner-text);
257
257
  min-width: 120px;
258
258
  }
259
259
 
260
260
  .rc-detail-value {
261
- color: #6b7280;
261
+ color: var(--banner-text-muted);
262
262
  }
263
263
 
264
264
  .rc-consent-status {
@@ -276,7 +276,7 @@
276
276
  }
277
277
 
278
278
  .rc-status-label {
279
- color: #374151;
279
+ color: var(--banner-text);
280
280
  font-weight: 500;
281
281
  }
282
282
 
@@ -288,13 +288,13 @@
288
288
  }
289
289
 
290
290
  .rc-status-yes {
291
- background: #d1fae5;
292
- color: #065f46;
291
+ background: var(--banner-success-bg);
292
+ color: var(--banner-success-text);
293
293
  }
294
294
 
295
295
  .rc-status-no {
296
- background: #fef2f2;
297
- color: #991b1b;
296
+ background: var(--banner-danger-bg);
297
+ color: var(--banner-danger-text);
298
298
  }
299
299
 
300
300
  /* ================= TOGGLE SWITCH ================ */
@@ -360,7 +360,7 @@ input:checked+.rc-slider:before {
360
360
  /* ================= TRANSPARENCY SECTION ================ */
361
361
  .rc-transparency-text {
362
362
  font-size: 16px;
363
- color: #374151;
363
+ color: var(--banner-text);
364
364
  line-height: 1.6;
365
365
  margin: 0;
366
366
  }
@@ -374,7 +374,7 @@ input:checked+.rc-slider:before {
374
374
  }
375
375
 
376
376
  .rc-dpo-icon {
377
- color: #3b82f6;
377
+ color: var(--banner-primary-color);
378
378
  width: 24px;
379
379
  height: 24px;
380
380
  }
@@ -400,7 +400,7 @@ input:checked+.rc-slider:before {
400
400
  }
401
401
 
402
402
  .rc-dpo-item-icon {
403
- color: #6b7280;
403
+ color: var(--banner-text-muted);
404
404
  width: 20px;
405
405
  height: 20px;
406
406
  margin-top: 2px;
@@ -415,12 +415,12 @@ input:checked+.rc-slider:before {
415
415
  .rc-dpo-label {
416
416
  font-size: 14px;
417
417
  font-weight: 500;
418
- color: #374151;
418
+ color: var(--banner-text);
419
419
  }
420
420
 
421
421
  .rc-dpo-value {
422
422
  font-size: 14px;
423
- color: #6b7280;
423
+ color: var(--banner-text-muted);
424
424
  }
425
425
 
426
426
  .rc-dpo-info-item {
@@ -430,14 +430,14 @@ input:checked+.rc-slider:before {
430
430
  }
431
431
 
432
432
  .rc-dpo-time-icon {
433
- color: #6b7280;
433
+ color: var(--banner-text-muted);
434
434
  width: 16px;
435
435
  height: 16px;
436
436
  }
437
437
 
438
438
  .rc-response-box {
439
- background: #eff6ff;
440
- border: 1px solid #bfdbfe;
439
+ background: var(--banner-info-bg);
440
+ border: 1px solid var(--banner-info-border);
441
441
  border-radius: 8px;
442
442
  padding: 16px;
443
443
  margin-top: 8px;
@@ -446,13 +446,13 @@ input:checked+.rc-slider:before {
446
446
  .rc-response-title {
447
447
  font-size: 16px;
448
448
  font-weight: 600;
449
- color: #1e40af;
449
+ color: var(--banner-primary-color);
450
450
  margin: 0 0 8px 0;
451
451
  }
452
452
 
453
453
  .rc-response-text {
454
454
  font-size: 14px;
455
- color: #1e40af;
455
+ color: var(--banner-primary-color);
456
456
  margin: 0;
457
457
  line-height: 1.5;
458
458
  }
@@ -463,8 +463,8 @@ input:checked+.rc-slider:before {
463
463
  display: grid;
464
464
  grid-template-columns: repeat(2, 1fr);
465
465
  gap: 24px 32px;
466
- background: #fff;
467
- border: 1px solid #e5e7eb;
466
+ background: var(--banner-bg);
467
+ border: 1px solid var(--banner-border);
468
468
  border-radius: 8px;
469
469
  padding: 24px;
470
470
  margin-top: 16px;
@@ -482,27 +482,24 @@ input:checked+.rc-slider:before {
482
482
  grid-column: 1 / -1;
483
483
  }
484
484
 
485
- /* icon styling */
486
485
  .rc-nominee-icon {
487
486
  flex-shrink: 0;
488
487
  width: 20px;
489
488
  height: 20px;
490
- color: #6b7280;
489
+ color: var(--banner-text-muted);
491
490
  }
492
491
 
493
- /* labels are bold, smaller text */
494
492
  .rc-nominee-label {
495
493
  display: block;
496
494
  font-size: 0.875rem;
497
495
  font-weight: 600;
498
- color: #374151;
496
+ color: var(--banner-text);
499
497
  }
500
498
 
501
- /* values are regular weight, muted color */
502
499
  .rc-nominee-value {
503
500
  display: block;
504
501
  font-size: 0.875rem;
505
- color: #6b7280;
502
+ color: var(--banner-text-muted);
506
503
  margin-top: 2px;
507
504
  }
508
505
 
@@ -549,8 +546,8 @@ input:checked+.rc-slider:before {
549
546
  display: flex;
550
547
  align-items: flex-start;
551
548
  gap: 12px;
552
- background: #fef3c7;
553
- border: 1px solid #fbbf24;
549
+ background: var(--banner-warning-bg);
550
+ border: 1px solid var(--banner-warning-border);
554
551
  border-radius: 8px;
555
552
  padding: 16px;
556
553
  margin-bottom: 24px;
@@ -563,7 +560,7 @@ input:checked+.rc-slider:before {
563
560
 
564
561
  .rc-nominee-warning p {
565
562
  font-size: 14px;
566
- color: #92400e;
563
+ color: var(--banner-warning-text);
567
564
  margin: 0;
568
565
  line-height: 1.5;
569
566
  }
@@ -589,15 +586,17 @@ input:checked+.rc-slider:before {
589
586
  .rc-form-label {
590
587
  font-size: 14px;
591
588
  font-weight: 500;
592
- color: #374151;
589
+ color: var(--banner-text);
593
590
  }
594
591
 
595
592
  .rc-form-input,
596
593
  .rc-form-select,
597
594
  .rc-form-textarea {
598
595
  padding: 12px 16px;
599
- border: 1px solid #d1d5db;
596
+ border: 1px solid var(--banner-border);
600
597
  border-radius: 8px;
598
+ background: var(--banner-bg);
599
+ color: var(--banner-text);
601
600
  font-size: 14px;
602
601
  transition: border-color 0.2s ease;
603
602
  }
@@ -622,10 +621,9 @@ input:checked+.rc-slider:before {
622
621
  margin-top: 8px;
623
622
  }
624
623
 
625
- /* ================= GRIEVANCE SECTION ================ */
626
624
  .rc-grievance-form {
627
- background: #f8fafc;
628
- border: 1px solid #e5e7eb;
625
+ background: var(--banner-card-bg);
626
+ border: 1px solid var(--banner-border);
629
627
  border-radius: 12px;
630
628
  padding: 24px;
631
629
  margin-bottom: 32px;
@@ -641,14 +639,14 @@ input:checked+.rc-slider:before {
641
639
  .rc-tickets-title {
642
640
  font-size: 18px;
643
641
  font-weight: 600;
644
- color: #111827;
642
+ color: var(--banner-text);
645
643
  margin: 0 0 16px 0;
646
644
  }
647
645
 
648
646
  .rc-empty-state {
649
647
  text-align: center;
650
648
  padding: 40px 20px;
651
- color: #6b7280;
649
+ color: var(--banner-text-muted);
652
650
  }
653
651
 
654
652
  .rc-ticket-list {
@@ -658,8 +656,8 @@ input:checked+.rc-slider:before {
658
656
  }
659
657
 
660
658
  .rc-ticket-item {
661
- background: #f8fafc;
662
- border: 1px solid #e5e7eb;
659
+ background: var(--banner-card-bg);
660
+ border: 1px solid var(--banner-border);
663
661
  border-radius: 8px;
664
662
  padding: 20px;
665
663
  }
@@ -674,13 +672,13 @@ input:checked+.rc-slider:before {
674
672
  .rc-ticket-subject {
675
673
  font-size: 16px;
676
674
  font-weight: 600;
677
- color: #111827;
675
+ color: var(--banner-text);
678
676
  margin: 0;
679
677
  }
680
678
 
681
679
  .rc-ticket-status {
682
- background: #d1fae5;
683
- color: #065f46;
680
+ background: var(--banner-success-bg);
681
+ color: var(--banner-success-text);
684
682
  padding: 4px 12px;
685
683
  border-radius: 20px;
686
684
  font-size: 12px;
@@ -690,7 +688,7 @@ input:checked+.rc-slider:before {
690
688
 
691
689
  .rc-ticket-description {
692
690
  font-size: 14px;
693
- color: #6b7280;
691
+ color: var(--banner-text-muted);
694
692
  margin: 0;
695
693
  line-height: 1.5;
696
694
  }
@@ -702,7 +700,7 @@ input:checked+.rc-slider:before {
702
700
  left: 0;
703
701
  width: 100%;
704
702
  height: 100%;
705
- background: rgba(0, 0, 0, 0.5);
703
+ background: var(--banner-overlay);
706
704
  display: flex;
707
705
  justify-content: center;
708
706
  align-items: center;
@@ -711,7 +709,7 @@ input:checked+.rc-slider:before {
711
709
  }
712
710
 
713
711
  .rc-modal {
714
- background: white;
712
+ background: var(--banner-bg);
715
713
  border-radius: 12px;
716
714
  padding: 32px;
717
715
  max-width: 700px;
@@ -719,7 +717,7 @@ input:checked+.rc-slider:before {
719
717
  max-height: 90vh;
720
718
  overflow-y: auto;
721
719
  position: relative;
722
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
720
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
723
721
  }
724
722
 
725
723
  .rc-modal-small {
@@ -732,34 +730,34 @@ input:checked+.rc-slider:before {
732
730
  align-items: center;
733
731
  margin-bottom: 16px;
734
732
  padding-bottom: 16px;
735
- border-bottom: 1px solid #e5e7eb;
733
+ border-bottom: 1px solid var(--banner-border);
736
734
  }
737
735
 
738
736
  .rc-modal-title {
739
737
  font-size: 20px;
740
738
  font-weight: 700;
741
- color: #111827;
739
+ color: var(--banner-text);
742
740
  margin: 0;
743
741
  }
744
742
 
745
743
  .rc-modal-close {
746
- background: #f3f4f6;
744
+ background: var(--banner-hover-bg);
747
745
  border: none;
748
746
  cursor: pointer;
749
747
  padding: 8px;
750
748
  border-radius: 6px;
751
- color: #6b7280;
749
+ color: var(--banner-text-muted);
752
750
  transition: all 0.2s ease;
753
751
  }
754
752
 
755
753
  .rc-modal-close:hover {
756
- background: #e5e7eb;
757
- color: #374151;
754
+ background: var(--banner-card-bg);
755
+ color: var(--banner-text);
758
756
  }
759
757
 
760
758
  .rc-modal-subtitle {
761
759
  font-size: 14px;
762
- color: #6b7280;
760
+ color: var(--banner-text-muted);
763
761
  margin-bottom: 24px;
764
762
  }
765
763
 
@@ -771,15 +769,15 @@ input:checked+.rc-slider:before {
771
769
 
772
770
  .rc-modal-section {
773
771
  padding: 20px;
774
- background: #f8fafc;
772
+ background: var(--banner-card-bg);
775
773
  border-radius: 8px;
776
- border: 1px solid #e5e7eb;
774
+ border: 1px solid var(--banner-border);
777
775
  }
778
776
 
779
777
  .rc-modal-section-title {
780
778
  font-size: 16px;
781
779
  font-weight: 600;
782
- color: #111827;
780
+ color: var(--banner-text);
783
781
  margin: 0 0 16px 0;
784
782
  }
785
783
 
@@ -793,11 +791,11 @@ input:checked+.rc-slider:before {
793
791
 
794
792
  .rc-modal-field-label {
795
793
  min-width: 140px;
796
- color: #374151;
794
+ color: var(--banner-text);
797
795
  }
798
796
 
799
797
  .rc-modal-field-value {
800
- color: #6b7280;
798
+ color: var(--banner-text-muted);
801
799
  flex: 1;
802
800
  }
803
801
 
@@ -851,10 +849,6 @@ input:checked+.rc-slider:before {
851
849
  }
852
850
 
853
851
  .rc-modal-success {
854
- display: flex;
855
- flex-direction: column;
856
- align-items: center;
857
- justify-content: center;
858
852
  text-align: center;
859
853
  padding: 32px;
860
854
  }