kaui 4.0.26 → 4.0.27

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 (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/kaui/account.css +177 -172
  3. data/app/assets/stylesheets/kaui/account_timeline.css +21 -21
  4. data/app/assets/stylesheets/kaui/admin_allowed_users.css +26 -26
  5. data/app/assets/stylesheets/kaui/audit_logs.css +41 -41
  6. data/app/assets/stylesheets/kaui/auth_pages.css +6 -6
  7. data/app/assets/stylesheets/kaui/breadcrumb.css +5 -5
  8. data/app/assets/stylesheets/kaui/chargebacks.css +9 -9
  9. data/app/assets/stylesheets/kaui/clock.css +9 -9
  10. data/app/assets/stylesheets/kaui/common.css +207 -207
  11. data/app/assets/stylesheets/kaui/custom_fields.css +64 -64
  12. data/app/assets/stylesheets/kaui/dashboard.css +3 -3
  13. data/app/assets/stylesheets/kaui/datatable.css +14 -14
  14. data/app/assets/stylesheets/kaui/header.css +17 -17
  15. data/app/assets/stylesheets/kaui/home.css +2 -2
  16. data/app/assets/stylesheets/kaui/invoice.css +113 -113
  17. data/app/assets/stylesheets/kaui/payment.css +120 -120
  18. data/app/assets/stylesheets/kaui/queues.css +48 -48
  19. data/app/assets/stylesheets/kaui/refunds.css +15 -15
  20. data/app/assets/stylesheets/kaui/role_definitions.css +9 -9
  21. data/app/assets/stylesheets/kaui/sidebar.css +14 -14
  22. data/app/assets/stylesheets/kaui/subscription.css +58 -58
  23. data/app/assets/stylesheets/kaui/tag_definitions.css +45 -45
  24. data/app/assets/stylesheets/kaui/tags.css +65 -65
  25. data/app/assets/stylesheets/kaui/tenants.css +152 -152
  26. data/app/assets/stylesheets/kaui/tooltip.css +5 -5
  27. data/app/assets/stylesheets/kaui/wallets.css +8 -8
  28. data/app/views/kaui/account_emails/_account_emails_table.html.erb +1 -1
  29. data/app/views/kaui/accounts/_add_parent.html.erb +1 -1
  30. data/app/views/kaui/payment_methods/_plugin_properties.html.erb +1 -1
  31. data/app/views/kaui/transactions/_control_plugin_names.html.erb +1 -1
  32. data/lib/kaui/version.rb +1 -1
  33. metadata +4 -4
data/app/assets/stylesheets/kaui/payment.css CHANGED
@@ -5,7 +5,7 @@
5
5
  padding-bottom: 0.625rem;
6
6
  font-size: 1rem;
7
7
  font-weight: 700;
8
- color: #777777;
8
+ color: var(--kb-on-surface-tertiary);
9
9
  }
10
10
 
11
11
  .payment-details {
@@ -45,7 +45,7 @@
45
45
  align-items: start;
46
46
  justify-content: space-between;
47
47
  padding: 0;
48
- border-bottom: 0.0625rem solid #E9EAEB;
48
+ border-bottom: 0.0625rem solid var(--kb-outline-primary);
49
49
  }
50
50
 
51
51
  .payments-index .payments-table th,
@@ -58,7 +58,7 @@
58
58
  font-weight: 600;
59
59
  font-size: 1.125rem;
60
60
  line-height: 1.75rem;
61
- color: #414651;
61
+ color: var(--kb-on-surface-secondary);
62
62
  margin-bottom: 1.25rem;
63
63
  }
64
64
 
@@ -67,7 +67,7 @@
67
67
  font-size: 0.875rem;
68
68
  line-height: 1.25rem;
69
69
  letter-spacing: 0;
70
- color: #414651;
70
+ color: var(--kb-on-surface-secondary);
71
71
  }
72
72
 
73
73
  .payments-index .payments .bundle-details-header p {
@@ -75,7 +75,7 @@
75
75
  font-size: 0.75rem;
76
76
  line-height: 1.25rem;
77
77
  letter-spacing: 0;
78
- color: #717680;
78
+ color: var(--kb-on-surface-quaternary);
79
79
  }
80
80
 
81
81
  .payments-index .payments .payments-table {
@@ -89,12 +89,12 @@
89
89
  font-size: 0.875rem;
90
90
  line-height: 1.125rem;
91
91
  letter-spacing: 0;
92
- color: #717680;
92
+ color: var(--kb-on-surface-quaternary);
93
93
  text-transform: capitalize;
94
94
  }
95
95
 
96
96
  .payments-index .payments .payments-table tr td:not(:first-child) a {
97
- color: #535862 !important;
97
+ color: var(--kb-on-surface-tertiary) !important;
98
98
  text-decoration: none !important;
99
99
  }
100
100
 
@@ -112,9 +112,9 @@
112
112
  gap: 0.125rem;
113
113
  padding: 0.125rem 0.5rem;
114
114
  border-radius: 62.4375rem;
115
- background-color: #ECFDF3;
116
- border: 0.0625rem solid #DCFAE6;
117
- color: #067647;
115
+ background-color: var(--kb-success-25);
116
+ border: 0.0625rem solid var(--kb-success-50);
117
+ color: var(--kb-success-hover);
118
118
  font-weight: 500;
119
119
  font-size: 0.75rem;
120
120
  line-height: 1.125rem;
@@ -137,9 +137,9 @@
137
137
  gap: 0.125rem;
138
138
  padding: 0.125rem 0.5rem;
139
139
  border-radius: 62.4375rem;
140
- background-color: #FEF3F2;
141
- border: 0.0625rem solid #FEE4E2;
142
- color: #B42318;
140
+ background-color: var(--kb-error-25);
141
+ border: 0.0625rem solid var(--kb-error-50);
142
+ color: var(--kb-error-hover);
143
143
  font-weight: 500;
144
144
  font-size: 0.75rem;
145
145
  line-height: 1.125rem;
@@ -162,9 +162,9 @@
162
162
  gap: 0.125rem;
163
163
  padding: 0.125rem 0.5rem;
164
164
  border-radius: 62.4375rem;
165
- background-color: #FAFAFA;
166
- border: 0.0625rem solid #F5F5F5;
167
- color: #414651;
165
+ background-color: var(--kb-surface-container-low);
166
+ border: 0.0625rem solid var(--kb-surface-container);
167
+ color: var(--kb-on-surface-secondary);
168
168
  font-weight: 500;
169
169
  font-size: 0.75rem;
170
170
  line-height: 1.125rem;
@@ -174,28 +174,28 @@
174
174
  .payments-index .payments .payments-table .category-bedge {
175
175
  display: inline-block;
176
176
  padding: 0.125rem 0.5rem !important;
177
- border: 0.0625rem solid #F5F5F5 !important;
177
+ border: 0.0625rem solid var(--kb-surface-container) !important;
178
178
  border-radius: 624.9375rem;
179
179
  font-weight: 500 !important;
180
180
  font-size: 0.875rem !important;
181
181
  line-height: 1.125rem !important;
182
182
  text-align: start;
183
- color: #414651 !important;
184
- background-color: #FAFAFA;
183
+ color: var(--kb-on-surface-secondary) !important;
184
+ background-color: var(--kb-surface-container-low);
185
185
  text-transform: capitalize;
186
186
  }
187
187
 
188
188
  .payments-index .payments .payments-table .phase-type {
189
189
  display: inline-block;
190
190
  padding: 0.125rem 0.5rem !important;
191
- border: 0.0625rem solid #D1E9FF !important;
191
+ border: 0.0625rem solid var(--kb-primary-50) !important;
192
192
  border-radius: 624.9375rem;
193
193
  font-weight: 500 !important;
194
194
  font-size: 0.875rem !important;
195
195
  line-height: 1.125rem !important;
196
196
  text-align: start;
197
- color: #175CD3 !important;
198
- background-color: #EFF8FF;
197
+ color: var(--kb-primary) !important;
198
+ background-color: var(--kb-primary-25);
199
199
  text-transform: capitalize;
200
200
  }
201
201
 
@@ -205,7 +205,7 @@
205
205
  padding: 1rem 0.75rem !important;
206
206
  line-height: 1.125rem !important;
207
207
  text-align: start;
208
- color: #535862 !important;
208
+ color: var(--kb-on-surface-tertiary) !important;
209
209
  }
210
210
 
211
211
  .payments-index .payments .search table th:first-of-type, .search table td:first-of-type {
@@ -223,7 +223,7 @@
223
223
  }
224
224
 
225
225
  .payments-index .payments .cancel-menu li:hover {
226
- background-color: #FAFAFA !important;
226
+ background-color: var(--kb-surface-container-low) !important;
227
227
  }
228
228
 
229
229
  .payments-index .payments .cancel-menu li a {
@@ -231,7 +231,7 @@
231
231
  font-size: 0.875rem !important;
232
232
  line-height: 1.25rem !important;
233
233
  letter-spacing: 0 !important;
234
- color: #717680 !important;
234
+ color: var(--kb-on-surface-quaternary) !important;
235
235
  text-transform: capitalize !important;
236
236
  text-decoration: none;
237
237
  }
@@ -240,7 +240,7 @@
240
240
  background-color: transparent !important;
241
241
  border: none !important;
242
242
  padding: 0 !important;
243
- color: #D92D20 !important;
243
+ color: var(--kb-error) !important;
244
244
  flex-direction: row-reverse;
245
245
  text-transform: capitalize;
246
246
  gap: 0.0625rem;
@@ -268,13 +268,13 @@
268
268
  font-size: 0.875rem;
269
269
  line-height: 1.25rem;
270
270
  letter-spacing: 0;
271
- color: #535862;
271
+ color: var(--kb-on-surface-tertiary);
272
272
  margin-left: 0.75rem;
273
273
  text-decoration: none;
274
274
  }
275
275
 
276
276
  .payments-index .payments .pagination a:not(:first-child):not(:last-child) {
277
- color: #717680;
277
+ color: var(--kb-on-surface-quaternary);
278
278
  display: flex;
279
279
  align-items: center;
280
280
  padding: 0.5rem 1rem;
@@ -285,8 +285,8 @@
285
285
  }
286
286
 
287
287
  .payments-index .payments .pagination a:not(:first-child):not(:last-child).btn-primary {
288
- color: #414651;
289
- background-color: #F5F5F5 !important;
288
+ color: var(--kb-on-surface-secondary);
289
+ background-color: var(--kb-surface-container) !important;
290
290
  border: 0 !important;
291
291
  }
292
292
 
@@ -305,28 +305,28 @@
305
305
  display: inline-flex !important;
306
306
  align-items: center !important;
307
307
  justify-content: center !important;
308
- color: #717680 !important;
308
+ color: var(--kb-on-surface-quaternary) !important;
309
309
  text-decoration: none;
310
310
  border: 0 !important;
311
311
  }
312
312
 
313
313
  .payments-index .payments .dataTables_paginate .paginate_button:hover {
314
- background-color: #F3F4F6;
314
+ background-color: var(--kb-surface-container);
315
315
  }
316
316
 
317
317
  .payments-index .payments .dataTables_paginate .paginate_button.current {
318
- background-color: #F5F5F5 !important;
318
+ background-color: var(--kb-surface-container) !important;
319
319
  border-radius: 0.375rem !important;
320
- color: #414651 !important;
320
+ color: var(--kb-on-surface-secondary) !important;
321
321
  }
322
322
 
323
323
  .payments-index .payments .dataTables_paginate .paginate_button.last,
324
324
  .payments-index .payments .dataTables_paginate .paginate_button.previous {
325
- border: 0.0625rem solid #E5E7EB;
325
+ border: 0.0625rem solid var(--kb-outline-primary);
326
326
  border-radius: 0.5rem;
327
- background-color: white;
327
+ background-color: var(--kb-neutral-0);
328
328
  padding: 0.5rem 0.875rem;
329
- color: #374151;
329
+ color: var(--kb-neutral-600);
330
330
  }
331
331
 
332
332
 
@@ -355,10 +355,10 @@
355
355
  float: right;
356
356
  margin-bottom: 0.625rem;
357
357
  margin-left: 0.625rem;
358
- background-color: white;
359
- color: black;
358
+ background-color: var(--kb-neutral-0);
359
+ color: var(--kb-neutral-900);
360
360
  text-transform: none;
361
- border: 0.0625rem solid #ccc;
361
+ border: 0.0625rem solid var(--kb-outline-secondary);
362
362
  padding: 0.5rem 0.9375rem;
363
363
  }
364
364
 
@@ -366,10 +366,10 @@
366
366
  float: right;
367
367
  margin-bottom: 0.625rem;
368
368
  margin-left: 0.625rem;
369
- background-color: white;
370
- color: black;
369
+ background-color: var(--kb-neutral-0);
370
+ color: var(--kb-neutral-900);
371
371
  text-transform: none;
372
- border: 0.0625rem solid #ccc;
372
+ border: 0.0625rem solid var(--kb-outline-secondary);
373
373
  padding: 0.5rem 0.9375rem;
374
374
  }
375
375
 
@@ -393,11 +393,11 @@
393
393
  font-weight: 500;
394
394
  font-size: 0.875rem;
395
395
  line-height: 1.25rem;
396
- color: #252B37;
396
+ color: var(--kb-neutral-700);
397
397
  }
398
398
 
399
399
  .payments-index .label-group-item-manual:active {
400
- background: #FAFAFA;
400
+ background: var(--kb-surface-container-low);
401
401
  cursor: grabbing;
402
402
  }
403
403
 
@@ -406,7 +406,7 @@
406
406
  }
407
407
 
408
408
  .payments-index .label-group-item-manual:has(input[type="checkbox"]:checked) {
409
- background-color: #FAFAFA;
409
+ background-color: var(--kb-surface-container-low);
410
410
  border-radius: 0.25rem;
411
411
  cursor: pointer !important;
412
412
  }
@@ -422,7 +422,7 @@
422
422
 
423
423
  .payments-index .dropdown-menu.ui-sortable {
424
424
  scrollbar-width: thin;
425
- scrollbar-color: #ccc transparent;
425
+ scrollbar-color: var(--kb-outline-secondary) transparent;
426
426
  border-radius: 0.375rem;
427
427
  border: 0.0625rem solid #00000014 !important;
428
428
  margin: 0.625rem 0 0;
@@ -434,7 +434,7 @@
434
434
  }
435
435
 
436
436
  .payments-index .dropdown-menu.ui-sortable::-webkit-scrollbar-thumb {
437
- background-color: #ccc;
437
+ background-color: var(--kb-outline-secondary);
438
438
  border-radius: 0.1875rem;
439
439
  }
440
440
 
@@ -466,7 +466,7 @@
466
466
 
467
467
  .payments-index .modal-footer {
468
468
  align-items: center;
469
- border-top: 0.0625rem solid #E9EAEB;
469
+ border-top: 0.0625rem solid var(--kb-outline-primary);
470
470
  display: flex;
471
471
  gap: 0.75rem;
472
472
  justify-content: space-between;
@@ -498,46 +498,46 @@
498
498
  }
499
499
 
500
500
  .payments-index .advanced-search-button-secondary {
501
- background: #FFFFFF;
502
- border: 0.0625rem solid #B2DDFF;
503
- color: #175CD3;
501
+ background: var(--kb-neutral-0);
502
+ border: 0.0625rem solid var(--kb-primary-container);
503
+ color: var(--kb-primary);
504
504
  }
505
505
 
506
506
  .payments-index .advanced-search-button-secondary:hover {
507
- background: #EFF6FF;
508
- border-color: #84CAFF;
509
- color: #175CD3;
507
+ background: var(--kb-primary-25);
508
+ border-color: var(--kb-primary-200);
509
+ color: var(--kb-primary);
510
510
  }
511
511
 
512
512
  .payments-index .advanced-search-button-ghost {
513
- background: #FFFFFF;
514
- border: 0.0625rem solid #D5D7DA;
515
- color: #414651;
513
+ background: var(--kb-neutral-0);
514
+ border: 0.0625rem solid var(--kb-outline-secondary);
515
+ color: var(--kb-on-surface-secondary);
516
516
  }
517
517
 
518
518
  .payments-index .advanced-search-button-ghost:hover {
519
- background: #FAFAFA;
520
- border-color: #A4A7AE;
521
- color: #181D27;
519
+ background: var(--kb-surface-container-low);
520
+ border-color: var(--kb-on-surface-quaternary);
521
+ color: var(--kb-on-surface-primary);
522
522
  }
523
523
 
524
524
  .payments-index .advanced-search-button-primary {
525
- background: #2E90FA;
526
- border: 0.0625rem solid #2E90FA;
527
- color: #FFFFFF;
525
+ background: var(--kb-primary-400);
526
+ border: 0.0625rem solid var(--kb-primary-400);
527
+ color: var(--kb-neutral-0);
528
528
  }
529
529
 
530
530
  .payments-index .advanced-search-button-primary:hover {
531
- background: #175CD3;
532
- border-color: #175CD3;
533
- color: #FFFFFF;
531
+ background: var(--kb-primary);
532
+ border-color: var(--kb-primary);
533
+ color: var(--kb-neutral-0);
534
534
  }
535
535
 
536
536
  .payments-index .modal-title {
537
537
  font-weight: 600;
538
538
  font-size: 1.125rem;
539
539
  line-height: 1.75rem;
540
- color: #181D27;
540
+ color: var(--kb-on-surface-primary);
541
541
  }
542
542
 
543
543
  .payments-index .close-button {
@@ -556,7 +556,7 @@
556
556
  display: inline-flex;
557
557
  justify-content: center;
558
558
  align-items: center;
559
- border: 0.0625rem solid #D5D7DA;
559
+ border: 0.0625rem solid var(--kb-outline-secondary);
560
560
  border-radius: 0.375rem;
561
561
  width: 2.5rem;
562
562
  height: 2.5rem;
@@ -585,7 +585,7 @@
585
585
  font-weight: 500;
586
586
  font-size: 0.875rem;
587
587
  line-height: 1.25rem;
588
- color: #414651;
588
+ color: var(--kb-on-surface-secondary);
589
589
  margin-top: -1.25rem;
590
590
  min-width: 9.59375rem;
591
591
  }
@@ -642,14 +642,14 @@
642
642
  .payments-index #search-labels-container .label {
643
643
  margin-left: 0.3125rem;
644
644
  margin-bottom: 0.3125rem;
645
- color: white;
645
+ color: var(--kb-neutral-0);
646
646
  }
647
647
 
648
648
  .payments-index .col-form-label {
649
649
  font-weight: 500;
650
650
  font-size: 0.875rem;
651
651
  line-height: 1.25rem;
652
- color: #414651;
652
+ color: var(--kb-on-surface-secondary);
653
653
  padding: 0;
654
654
  }
655
655
 
@@ -666,8 +666,8 @@
666
666
  }
667
667
 
668
668
  .payments-index .advanced-search-group {
669
- background: #EFF6FF;
670
- border: 0.125rem solid #B2DDFF;
669
+ background: var(--kb-primary-25);
670
+ border: 0.125rem solid var(--kb-primary-container);
671
671
  border-radius: 0.75rem;
672
672
  padding: 1rem;
673
673
  }
@@ -683,7 +683,7 @@
683
683
 
684
684
  .payments-index .search-field + .search-field::before {
685
685
  align-self: center;
686
- color: #2E90FA;
686
+ color: var(--kb-primary-400);
687
687
  content: 'AND';
688
688
  font-size: 0.875rem;
689
689
  font-weight: 700;
@@ -693,7 +693,7 @@
693
693
 
694
694
  .payments-index .advanced-search-rule-row {
695
695
  align-items: center;
696
- background: #FFFFFF;
696
+ background: var(--kb-neutral-0);
697
697
  border-radius: 0.75rem;
698
698
  display: grid;
699
699
  gap: 0.75rem;
@@ -719,10 +719,10 @@
719
719
  .payments-index .advanced-search-add-rule {
720
720
  align-items: center;
721
721
  align-self: flex-start;
722
- background: #FFFFFF;
723
- border: 0.0625rem solid #D5D7DA;
722
+ background: var(--kb-neutral-0);
723
+ border: 0.0625rem solid var(--kb-outline-secondary);
724
724
  border-radius: 0.75rem;
725
- color: #535862;
725
+ color: var(--kb-on-surface-tertiary);
726
726
  display: inline-flex;
727
727
  font-weight: 500;
728
728
  gap: 0.5rem;
@@ -731,7 +731,7 @@
731
731
  }
732
732
 
733
733
  .payments-index .advanced-search-add-rule:hover {
734
- background: #FFFFFF;
734
+ background: var(--kb-neutral-0);
735
735
  }
736
736
 
737
737
  .payments-index .filter-bar-container {
@@ -753,7 +753,7 @@
753
753
  display: inline-flex;
754
754
  justify-content: center;
755
755
  align-items: center;
756
- border: 0.0625rem solid #D5D7DA;
756
+ border: 0.0625rem solid var(--kb-outline-secondary);
757
757
  border-radius: 0.375rem;
758
758
  width: 2.5rem;
759
759
  height: 2.5rem;
@@ -794,14 +794,14 @@
794
794
  align-items: start;
795
795
  justify-content: space-between;
796
796
  padding: 0;
797
- border-bottom: 0.0625rem solid #E9EAEB;
797
+ border-bottom: 0.0625rem solid var(--kb-outline-primary);
798
798
  }
799
799
 
800
800
  .payments-show .payments .payments-header h2 {
801
801
  font-weight: 600;
802
802
  font-size: 1.125rem;
803
803
  line-height: 1.75rem;
804
- color: #414651;
804
+ color: var(--kb-on-surface-secondary);
805
805
  margin-bottom: 1.25rem;
806
806
  }
807
807
 
@@ -824,7 +824,7 @@
824
824
  }
825
825
 
826
826
  .payments-show .payment-table tr td:not(:first-child) a {
827
- color: #535862 !important;
827
+ color: var(--kb-on-surface-tertiary) !important;
828
828
  text-decoration: none !important;
829
829
  }
830
830
 
@@ -834,7 +834,7 @@
834
834
  font-size: 0.875rem;
835
835
  line-height: 1.125rem;
836
836
  letter-spacing: 0;
837
- color: #717680;
837
+ color: var(--kb-on-surface-quaternary);
838
838
  text-transform: capitalize;
839
839
  }
840
840
 
@@ -845,7 +845,7 @@
845
845
  line-height: 1.125rem !important;
846
846
  text-align: start;
847
847
  vertical-align: baseline !important;
848
- color: #535862 !important;
848
+ color: var(--kb-on-surface-tertiary) !important;
849
849
  }
850
850
 
851
851
  .payments-show .payment-table .alert-success {
@@ -854,9 +854,9 @@
854
854
  gap: 0.125rem;
855
855
  padding: 0.125rem 0.5rem;
856
856
  border-radius: 62.4375rem;
857
- background-color: #ECFDF3;
858
- border: 0.0625rem solid #DCFAE6;
859
- color: #067647;
857
+ background-color: var(--kb-success-25);
858
+ border: 0.0625rem solid var(--kb-success-50);
859
+ color: var(--kb-success-hover);
860
860
  font-weight: 500;
861
861
  font-size: 0.75rem;
862
862
  line-height: 1.125rem;
@@ -874,14 +874,14 @@
874
874
  .payments-show .payment-table .phase-type {
875
875
  display: inline-block;
876
876
  padding: 0.125rem 0.5rem !important;
877
- border: 0.0625rem solid #D1E9FF !important;
877
+ border: 0.0625rem solid var(--kb-primary-50) !important;
878
878
  border-radius: 624.9375rem;
879
879
  font-weight: 500 !important;
880
880
  font-size: 0.75rem !important;
881
881
  line-height: 1.125rem !important;
882
882
  text-align: start;
883
- color: #175CD3 !important;
884
- background-color: #EFF8FF;
883
+ color: var(--kb-primary) !important;
884
+ background-color: var(--kb-primary-25);
885
885
  text-transform: capitalize;
886
886
  }
887
887
 
@@ -901,9 +901,9 @@
901
901
  gap: 0.125rem;
902
902
  padding: 0.125rem 0.5rem;
903
903
  border-radius: 62.4375rem;
904
- background-color: #FEF3F2;
905
- border: 0.0625rem solid #FEE4E2;
906
- color: #B42318;
904
+ background-color: var(--kb-error-25);
905
+ border: 0.0625rem solid var(--kb-error-50);
906
+ color: var(--kb-error-hover);
907
907
  font-weight: 500;
908
908
  font-size: 0.75rem;
909
909
  line-height: 1.125rem;
@@ -924,7 +924,7 @@
924
924
  font-weight: 600;
925
925
  font-size: 0.875rem;
926
926
  line-height: 1.25rem;
927
- color: #414651;
927
+ color: var(--kb-on-surface-secondary);
928
928
  }
929
929
 
930
930
  .payments-show .payments-detail p,
@@ -932,7 +932,7 @@
932
932
  font-weight: 400;
933
933
  font-size: 0.75rem;
934
934
  line-height: 1.25rem;
935
- color: #717680;
935
+ color: var(--kb-on-surface-quaternary);
936
936
  text-decoration: none;
937
937
  }
938
938
 
@@ -946,19 +946,19 @@
946
946
  padding: 0 !important;
947
947
  background-color: transparent !important;
948
948
  border: none !important;
949
- color: #175CD3 !important;
949
+ color: var(--kb-primary) !important;
950
950
  }
951
951
 
952
952
  .payments-show .invoice-totals p {
953
953
  font-weight: 500 !important;
954
954
  font-size: 0.875rem !important;
955
955
  line-height: 1.25rem !important;
956
- color: #414651 !important;
956
+ color: var(--kb-on-surface-secondary) !important;
957
957
  margin-bottom: 0.5rem !important;
958
958
  }
959
959
 
960
960
  .payments-show .payment-link a {
961
- color: #717680 !important;
961
+ color: var(--kb-on-surface-quaternary) !important;
962
962
  text-decoration: none !important;
963
963
  }
964
964
 
@@ -989,15 +989,15 @@
989
989
  font-weight: 500;
990
990
  font-size: 0.875rem;
991
991
  line-height: 1.25rem;
992
- color: #252B37;
992
+ color: var(--kb-neutral-700);
993
993
  }
994
994
 
995
995
  .payments-show .label-group-item-manual:active {
996
- background: #FAFAFA;
996
+ background: var(--kb-surface-container-low);
997
997
  }
998
998
 
999
999
  .payments-show .label-group-item-manual:has(input[type="checkbox"]:checked) {
1000
- background-color: #FAFAFA;
1000
+ background-color: var(--kb-surface-container-low);
1001
1001
  border-radius: 0.25rem;
1002
1002
  cursor: pointer !important;
1003
1003
  }
@@ -1007,7 +1007,7 @@
1007
1007
  }
1008
1008
 
1009
1009
  .payments-show .tag-as-select-box::-webkit-scrollbar-thumb {
1010
- background-color: #ccc;
1010
+ background-color: var(--kb-outline-secondary);
1011
1011
  border-radius: 0.1875rem;
1012
1012
  }
1013
1013
 
@@ -1035,7 +1035,7 @@
1035
1035
  }
1036
1036
 
1037
1037
  .payments-show .gateway-link a {
1038
- color: #175CD3 !important;
1038
+ color: var(--kb-primary) !important;
1039
1039
  text-decoration: none !important;
1040
1040
  }
1041
1041
 
@@ -1050,7 +1050,7 @@
1050
1050
  .payments-show .payment-method-details .detail-item b {
1051
1051
  display: block;
1052
1052
  margin-bottom: 0.25rem;
1053
- color: #414651 !important;
1053
+ color: var(--kb-on-surface-secondary) !important;
1054
1054
  font-weight: 600;
1055
1055
  font-size: 0.875rem !important;
1056
1056
  line-height: 1.25rem;
@@ -1059,7 +1059,7 @@
1059
1059
 
1060
1060
  .payments-show .payment-method-details .detail-item span {
1061
1061
  display: block;
1062
- color: #717680 !important;
1062
+ color: var(--kb-on-surface-quaternary) !important;
1063
1063
  font-weight: 400;
1064
1064
  font-size: 0.875rem !important;
1065
1065
  line-height: 1.25rem;
@@ -1076,7 +1076,7 @@
1076
1076
  font-size: 1.125rem;
1077
1077
  line-height: 1.75rem;
1078
1078
  letter-spacing: 0;
1079
- color: #1B1C1E;
1079
+ color: var(--kb-on-surface-primary);
1080
1080
  padding: 1rem 0;
1081
1081
  margin-bottom: 1.5rem;
1082
1082
  }
@@ -1085,7 +1085,7 @@
1085
1085
  display: inline-flex;
1086
1086
  justify-content: center;
1087
1087
  align-items: center;
1088
- border: 0.0625rem solid #D5D7DA;
1088
+ border: 0.0625rem solid var(--kb-outline-secondary);
1089
1089
  border-radius: 0.375rem;
1090
1090
  width: 2.5rem;
1091
1091
  height: 2.5rem;
@@ -1103,11 +1103,11 @@
1103
1103
  font-size: 0.875rem !important;
1104
1104
  font-weight: 500 !important;
1105
1105
  line-height: 1.25rem !important;
1106
- color: #414651 !important;
1106
+ color: var(--kb-on-surface-secondary) !important;
1107
1107
  }
1108
1108
 
1109
1109
  .process-payment-modal .question-circle {
1110
- color: #A4A7AE;
1110
+ color: var(--kb-on-surface-quaternary);
1111
1111
  font-size: 1rem;
1112
1112
  width: 1rem;
1113
1113
  height: 1rem;
@@ -1152,7 +1152,7 @@
1152
1152
  font-weight: 500;
1153
1153
  font-size: 0.875rem;
1154
1154
  line-height: 1.25rem;
1155
- color: #414651;
1155
+ color: var(--kb-on-surface-secondary);
1156
1156
  display: flex;
1157
1157
  align-items: center;
1158
1158
  gap: 0.375rem;
@@ -1165,13 +1165,13 @@
1165
1165
 
1166
1166
  .process-payment-modal .form-group.d-flex .currency-group .currency {
1167
1167
  border-left: 0 !important;
1168
- border: 0.0625rem solid #ced4da;
1168
+ border: 0.0625rem solid var(--kb-outline-secondary);
1169
1169
  border-radius: 0 0.375rem 0.375rem 0 !important;
1170
1170
  padding: 0.375rem 0.75rem;
1171
1171
  font-weight: 400;
1172
1172
  font-size: 1rem;
1173
1173
  line-height: 1.5rem;
1174
- color: #535862;
1174
+ color: var(--kb-on-surface-tertiary);
1175
1175
  }
1176
1176
 
1177
1177
  .process-payment-modal .help-block {
@@ -1179,7 +1179,7 @@
1179
1179
  font-weight: 400;
1180
1180
  font-size: 0.875rem;
1181
1181
  line-height: 1.25rem;
1182
- color: #535862;
1182
+ color: var(--kb-on-surface-tertiary);
1183
1183
  }
1184
1184
 
1185
1185
  app/views/kaui/payment_methods/_new_creditcard_payment_method.html.erb
@@ -1188,11 +1188,11 @@ app/views/kaui/payment_methods/_new_creditcard_payment_method.html.erb
1188
1188
  font-size: 0.875rem !important;
1189
1189
  font-weight: 500 !important;
1190
1190
  line-height: 1.25rem !important;
1191
- color: #414651 !important;
1191
+ color: var(--kb-on-surface-secondary) !important;
1192
1192
  }
1193
1193
 
1194
1194
  .add-new-payment-method-modal .question-circle {
1195
- color: #A4A7AE;
1195
+ color: var(--kb-on-surface-quaternary);
1196
1196
  font-size: 1rem;
1197
1197
  width: 1rem;
1198
1198
  height: 1rem;
@@ -1235,7 +1235,7 @@ app/views/kaui/payment_methods/_new_creditcard_payment_method.html.erb
1235
1235
  padding-left: 0;
1236
1236
  padding-right: 0;
1237
1237
  width: fit-content;
1238
- color: #A4A7AE;
1238
+ color: var(--kb-on-surface-quaternary);
1239
1239
  font-weight: 400;
1240
1240
  font-size: 1rem;
1241
1241
  line-height: 1.75rem;
@@ -1249,14 +1249,14 @@ app/views/kaui/payment_methods/_new_creditcard_payment_method.html.erb
1249
1249
 
1250
1250
  .add-new-payment-method-modal .expiry-date:focus-within div:nth-child(2),
1251
1251
  .add-new-payment-method-modal .expiry-date:focus-within input {
1252
- border-color: #1570ef;
1252
+ border-color: var(--kb-primary);
1253
1253
  }
1254
1254
 
1255
1255
  .add-new-payment-method-modal .checkbox label {
1256
1256
  font-weight: 500;
1257
1257
  font-size: 0.875rem;
1258
1258
  line-height: 1.25rem;
1259
- color: #414651;
1259
+ color: var(--kb-on-surface-secondary);
1260
1260
  display: flex;
1261
1261
  align-items: center;
1262
1262
  gap: 0.375rem;