@truconsent/consent-notice 0.0.2 → 0.0.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.
@@ -7,9 +7,9 @@
7
7
  left: 0;
8
8
  right: 0;
9
9
  z-index: 9900;
10
- background-color: white;
10
+ background-color: var(--banner-bg);
11
11
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.08);
12
- border-top: 1px solid #eaeaea;
12
+ border-top: 1px solid var(--banner-border);
13
13
  font-family: var(--font-type, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
14
14
  font-size: var(--font-size, inherit);
15
15
  min-height: 300px;
@@ -25,7 +25,7 @@
25
25
  .trubanner-modal-container {
26
26
  position: relative;
27
27
  z-index: 60;
28
- background-color: white;
28
+ background-color: var(--banner-bg);
29
29
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
30
30
  border-radius: 0.75rem;
31
31
  font-family: var(--font-type, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
@@ -55,8 +55,8 @@
55
55
  position: sticky;
56
56
  top: 0;
57
57
  z-index: 1000;
58
- background-color: white;
59
- border-bottom: 1px solid #f0f0f0;
58
+ background-color: var(--banner-bg);
59
+ border-bottom: 1px solid var(--banner-border);
60
60
  border-top-left-radius: inherit;
61
61
  border-top-right-radius: inherit;
62
62
  flex-shrink: 0;
@@ -65,12 +65,9 @@
65
65
  /* Info box under header */
66
66
  .trubanner-info-box {
67
67
  margin: 0.5rem 0 0.25rem;
68
- background-color: #eff6ff;
69
- /* blue-50 */
70
- border: 1px solid #dbeafe;
71
- /* blue-200 */
72
- color: #1e40af;
73
- /* blue-800 */
68
+ background-color: var(--banner-info-bg);
69
+ border: 1px solid var(--banner-info-border);
70
+ color: var(--banner-primary-color);
74
71
  border-radius: 10px;
75
72
  padding: 10px 12px;
76
73
  font-size: 0.875rem;
@@ -91,7 +88,7 @@
91
88
  justify-content: center;
92
89
  border-radius: 6px;
93
90
  overflow: hidden;
94
- background-color: #f9f9f9;
91
+ background-color: var(--banner-card-bg);
95
92
  flex-shrink: 0;
96
93
  }
97
94
 
@@ -109,13 +106,13 @@
109
106
  .trubanner-title {
110
107
  font-size: 1.1rem;
111
108
  font-weight: 600;
112
- color: #111;
109
+ color: var(--banner-text);
113
110
  margin-bottom: 0.15rem;
114
111
  }
115
112
 
116
113
  .trubanner-subtitle {
117
114
  font-size: 0.8rem;
118
- color: var(--banner-secondary-color, #555);
115
+ color: var(--banner-secondary-color);
119
116
  line-height: 1.4;
120
117
  }
121
118
 
@@ -129,7 +126,7 @@
129
126
  }
130
127
 
131
128
  .trubanner-purpose-card {
132
- border: 1px solid #e5e7eb;
129
+ border: 1px solid var(--banner-border);
133
130
  border-radius: 12px;
134
131
  padding: 1rem;
135
132
  position: relative;
@@ -137,7 +134,7 @@
137
134
  transition: transform 0.2s, box-shadow 0.2s;
138
135
  display: flex;
139
136
  flex-direction: column;
140
- background-color: white;
137
+ background-color: var(--banner-card-bg);
141
138
  width: 100%;
142
139
  flex-shrink: 0;
143
140
  }
@@ -177,15 +174,15 @@
177
174
  .trubanner-purpose-title {
178
175
  font-size: 1rem;
179
176
  font-weight: 600;
180
- color: #111;
177
+ color: var(--banner-text);
181
178
  line-height: 1.2;
182
179
  }
183
180
 
184
181
  .trubanner-purpose-id {
185
182
  font-size: 0.75rem;
186
- color: #6b7280;
183
+ color: var(--banner-text-muted);
187
184
  font-weight: 500;
188
- background-color: #f3f4f6;
185
+ background-color: var(--banner-hover-bg);
189
186
  padding: 0.125rem 0.375rem;
190
187
  border-radius: 12px;
191
188
  }
@@ -193,7 +190,7 @@
193
190
  .trubanner-purpose-description {
194
191
  font-size: 0.875rem;
195
192
  line-height: 1.4;
196
- color: #4b5563;
193
+ color: var(--banner-text-muted);
197
194
  margin-bottom: 0.75rem;
198
195
  display: -webkit-box;
199
196
  -webkit-line-clamp: 3;
@@ -218,26 +215,26 @@
218
215
  }
219
216
 
220
217
  .trubanner-badge {
221
- background-color: #fef2f2;
222
- color: #dc2626;
218
+ background-color: var(--banner-danger-bg);
219
+ color: var(--banner-danger-text);
223
220
  padding: 0.15rem 0.5rem;
224
221
  border-radius: 9999px;
225
222
  font-size: 0.6875rem;
226
223
  font-weight: 600;
227
224
  white-space: nowrap;
228
225
  line-height: 1.2;
229
- border: 1px solid #fecaca;
226
+ border: 1px solid var(--banner-danger-text);
230
227
  }
231
228
 
232
229
  .trubanner-validity-value {
233
230
  font-size: 0.6875rem;
234
- color: #6b7280;
231
+ color: var(--banner-text-muted);
235
232
  padding: 0.125rem 0.5rem;
236
- background-color: #f3f4f6;
233
+ background-color: var(--banner-hover-bg);
237
234
  border-radius: 12px;
238
235
  white-space: nowrap;
239
236
  line-height: 1.2;
240
- border: 1px solid #d1d5db;
237
+ border: 1px solid var(--banner-border);
241
238
  }
242
239
 
243
240
  .trubanner-data-grid {
@@ -248,18 +245,17 @@
248
245
  }
249
246
 
250
247
  .trubanner-data-section {
251
- background-color: #f8fafc;
248
+ background-color: var(--banner-info-bg);
252
249
  border-radius: 10px;
253
250
  padding: 0.75rem;
254
- border: 1px solid #bfdbfe;
255
- /* blue-200 */
251
+ border: 1px solid var(--banner-info-border);
256
252
  }
257
253
 
258
254
  .trubanner-section-label {
259
255
  font-size: 0.72rem;
260
256
  font-weight: 700;
261
257
  margin-bottom: 0.5rem;
262
- color: #374151;
258
+ color: var(--banner-text);
263
259
  text-transform: uppercase;
264
260
  letter-spacing: 0.04em;
265
261
  }
@@ -271,11 +267,12 @@
271
267
  }
272
268
 
273
269
  .trubanner-data-item {
274
- background-color: #fff;
270
+ background-color: var(--banner-bg);
271
+ color: var(--banner-text);
275
272
  border-radius: 9999px;
276
273
  padding: 0.25rem 0.5rem;
277
274
  font-size: 0.75rem;
278
- border: 1px solid #bfdbfe;
275
+ border: 1px solid var(--banner-info-border);
279
276
  /* blue-200 */
280
277
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
281
278
  line-height: 1.2;
@@ -292,16 +289,16 @@
292
289
 
293
290
  .trubanner-item-id {
294
291
  font-weight: 700;
295
- color: #1d4ed8;
292
+ color: var(--banner-primary-color);
296
293
  font-size: 0.7rem;
297
294
  padding: 0.1rem 0.4rem;
298
- background: #eff6ff;
299
- border: 1px solid #bfdbfe;
295
+ background: var(--banner-info-bg);
296
+ border: 1px solid var(--banner-info-border);
300
297
  border-radius: 9999px;
301
298
  }
302
299
 
303
300
  .trubanner-item-name {
304
- color: #374151;
301
+ color: var(--banner-text-muted);
305
302
  }
306
303
 
307
304
  .trubanner-actions {
@@ -311,8 +308,8 @@
311
308
  gap: 0.75rem;
312
309
  margin-top: 0.5rem;
313
310
  padding: 0.75rem 1rem;
314
- border-top: 1px solid #f0f0f0;
315
- background-color: #fafafa;
311
+ border-top: 1px solid var(--banner-border);
312
+ background-color: var(--banner-bg);
316
313
  }
317
314
 
318
315
  .trubanner-action-buttons {
@@ -331,20 +328,20 @@
331
328
  }
332
329
 
333
330
  .trubanner-button-secondary {
334
- background-color: #f3f4f6;
335
- color: #ef4444;
336
- border-color: #e5e7eb;
331
+ background-color: var(--banner-hover-bg);
332
+ color: var(--banner-danger-text);
333
+ border-color: var(--banner-border);
337
334
  }
338
335
 
339
336
  .trubanner-button-secondary:hover {
340
- background-color: #fef2f2;
341
- border-color: #fecaca;
337
+ background-color: var(--banner-danger-bg);
338
+ border-color: var(--banner-danger-btn);
342
339
  }
343
340
 
344
341
  .trubanner-button-primary {
345
- background-color: var(--banner-primary-color, #3b82f6);
342
+ background-color: var(--banner-primary-color);
346
343
  color: white;
347
- border-color: var(--banner-primary-color, #3b82f6);
344
+ border-color: var(--banner-primary-color);
348
345
  }
349
346
 
350
347
  .trubanner-button-primary:hover {
@@ -362,8 +359,8 @@
362
359
 
363
360
  .trubanner-footer-wrapper {
364
361
  flex-shrink: 0;
365
- background-color: white;
366
- border-top: 1px solid #f0f0f0;
362
+ background-color: var(--banner-bg);
363
+ border-top: 1px solid var(--banner-border);
367
364
  }
368
365
 
369
366
  /* Toggle Switch styles (Modern) */
@@ -384,7 +381,7 @@
384
381
  .switch .track {
385
382
  width: 44px;
386
383
  height: 24px;
387
- background: #e5e7eb;
384
+ background: var(--banner-border);
388
385
  border-radius: 9999px;
389
386
  transition: background-color 0.2s;
390
387
  display: inline-block;
@@ -396,14 +393,14 @@
396
393
  top: 2px;
397
394
  width: 20px;
398
395
  height: 20px;
399
- background: #fff;
396
+ background: var(--banner-bg);
400
397
  border-radius: 9999px;
401
398
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
402
399
  transition: transform 0.2s;
403
400
  }
404
401
 
405
402
  .switch input:checked+.track {
406
- background: #16a34a;
403
+ background: var(--banner-success-text);
407
404
  }
408
405
 
409
406
  .switch input:checked+.track+.thumb {
@@ -419,7 +416,7 @@
419
416
 
420
417
  .trubanner-mobile .trubanner-header-wrapper {
421
418
  padding: 0.5rem 0.5rem 0.3rem !important;
422
- border-bottom: 1px solid #f0f0f0;
419
+ border-bottom: 1px solid var(--banner-border);
423
420
  }
424
421
 
425
422
  .trubanner-mobile .trubanner-logo {
@@ -434,13 +431,13 @@
434
431
  font-weight: 600 !important;
435
432
  line-height: 1.1 !important;
436
433
  margin-bottom: 0.1rem !important;
437
- color: #111 !important;
434
+ color: var(--banner-text) !important;
438
435
  }
439
436
 
440
437
  .trubanner-mobile .trubanner-subtitle {
441
438
  font-size: 0.68rem !important;
442
439
  line-height: 1.2 !important;
443
- color: var(--banner-secondary-color, #555) !important;
440
+ color: var(--banner-secondary-color) !important;
444
441
  width: 100% !important;
445
442
  margin-top: 0 !important;
446
443
  }
@@ -461,8 +458,8 @@
461
458
  gap: 0.375rem !important;
462
459
  padding: 0.5rem !important;
463
460
  margin-top: 0 !important;
464
- border-top: 1px solid #f0f0f0 !important;
465
- background-color: white !important;
461
+ border-top: 1px solid var(--banner-border) !important;
462
+ background-color: var(--banner-bg) !important;
466
463
  }
467
464
 
468
465
  .trubanner-mobile .trubanner-button {