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
@@ -7,14 +7,14 @@
7
7
  align-items: start;
8
8
  justify-content: space-between;
9
9
  padding: 0;
10
- border-bottom: 0.0625rem solid #e9eaeb;
10
+ border-bottom: 0.0625rem solid var(--kb-outline-primary);
11
11
  }
12
12
 
13
13
  .kaui-account-custom-fields-index .custom-fields .custom-fields-header h2 {
14
14
  font-weight: 600;
15
15
  font-size: 1.125rem;
16
16
  line-height: 1.75rem;
17
- color: #414651;
17
+ color: var(--kb-on-surface-secondary);
18
18
  margin-bottom: 1.25rem;
19
19
  }
20
20
 
@@ -23,7 +23,7 @@
23
23
  font-size: 0.875rem;
24
24
  line-height: 1.25rem;
25
25
  letter-spacing: 0;
26
- color: #414651;
26
+ color: var(--kb-on-surface-secondary);
27
27
  }
28
28
 
29
29
  .kaui-account-custom-fields-index .custom-fields .bundle-details-header p {
@@ -31,7 +31,7 @@
31
31
  font-size: 0.75rem;
32
32
  line-height: 1.25rem;
33
33
  letter-spacing: 0;
34
- color: #717680;
34
+ color: var(--kb-on-surface-quaternary);
35
35
  }
36
36
 
37
37
  .kaui-account-custom-fields-index .custom-fields .custom-fields-table {
@@ -45,7 +45,7 @@
45
45
  font-size: 0.875rem;
46
46
  line-height: 1.125rem;
47
47
  letter-spacing: 0;
48
- color: #717680;
48
+ color: var(--kb-on-surface-quaternary);
49
49
  text-transform: capitalize;
50
50
  }
51
51
 
@@ -55,7 +55,7 @@
55
55
  tr
56
56
  td:not(:first-child)
57
57
  a {
58
- color: #535862 !important;
58
+ color: var(--kb-on-surface-tertiary) !important;
59
59
  text-decoration: none !important;
60
60
  }
61
61
 
@@ -65,14 +65,14 @@
65
65
  .category-bedge {
66
66
  display: inline-block;
67
67
  padding: 0.125rem 0.5rem !important;
68
- border: 0.0625rem solid #f5f5f5 !important;
68
+ border: 0.0625rem solid var(--kb-surface-container) !important;
69
69
  border-radius: 624.9375rem;
70
70
  font-weight: 500 !important;
71
71
  font-size: 0.875rem !important;
72
72
  line-height: 1.125rem !important;
73
73
  text-align: start;
74
- color: #414651 !important;
75
- background-color: #fafafa;
74
+ color: var(--kb-on-surface-secondary) !important;
75
+ background-color: var(--kb-surface-container-low);
76
76
  text-transform: capitalize;
77
77
  }
78
78
 
@@ -82,14 +82,14 @@
82
82
  .phase-type {
83
83
  display: inline-block;
84
84
  padding: 0.125rem 0.5rem !important;
85
- border: 0.0625rem solid #d1e9ff !important;
85
+ border: 0.0625rem solid var(--kb-primary-50) !important;
86
86
  border-radius: 624.9375rem;
87
87
  font-weight: 500 !important;
88
88
  font-size: 0.875rem !important;
89
89
  line-height: 1.125rem !important;
90
90
  text-align: start;
91
- color: #175cd3 !important;
92
- background-color: #eff8ff;
91
+ color: var(--kb-primary) !important;
92
+ background-color: var(--kb-primary-25);
93
93
  text-transform: capitalize;
94
94
  }
95
95
 
@@ -99,7 +99,7 @@
99
99
  padding: 1rem 0.5rem !important;
100
100
  line-height: 1.125rem !important;
101
101
  text-align: start;
102
- color: #535862 !important;
102
+ color: var(--kb-on-surface-tertiary) !important;
103
103
  }
104
104
 
105
105
  .kaui-account-custom-fields-index .custom-fields .search table th:first-of-type,
@@ -118,7 +118,7 @@
118
118
  }
119
119
 
120
120
  .kaui-account-custom-fields-index .custom-fields .cancel-menu li:hover {
121
- background-color: #fafafa !important;
121
+ background-color: var(--kb-surface-container-low) !important;
122
122
  }
123
123
 
124
124
  .kaui-account-custom-fields-index .custom-fields .cancel-menu li a {
@@ -126,7 +126,7 @@
126
126
  font-size: 0.875rem !important;
127
127
  line-height: 1.25rem !important;
128
128
  letter-spacing: 0 !important;
129
- color: #717680 !important;
129
+ color: var(--kb-on-surface-quaternary) !important;
130
130
  text-transform: capitalize !important;
131
131
  text-decoration: none;
132
132
  }
@@ -135,7 +135,7 @@
135
135
  background-color: transparent !important;
136
136
  border: none !important;
137
137
  padding: 0 !important;
138
- color: #d92d20 !important;
138
+ color: var(--kb-error) !important;
139
139
  flex-direction: row-reverse;
140
140
  text-transform: capitalize;
141
141
  gap: 0.0625rem;
@@ -163,7 +163,7 @@
163
163
  font-size: 0.875rem;
164
164
  line-height: 1.25rem;
165
165
  letter-spacing: 0;
166
- color: #535862;
166
+ color: var(--kb-on-surface-tertiary);
167
167
  margin-left: 0.75rem;
168
168
  text-decoration: none;
169
169
  }
@@ -172,7 +172,7 @@
172
172
  .custom-fields
173
173
  .pagination
174
174
  a:not(:first-child):not(:last-child) {
175
- color: #717680;
175
+ color: var(--kb-on-surface-quaternary);
176
176
  display: flex;
177
177
  align-items: center;
178
178
  padding: 0.5rem 1rem;
@@ -186,8 +186,8 @@
186
186
  .custom-fields
187
187
  .pagination
188
188
  a:not(:first-child):not(:last-child).btn-primary {
189
- color: #414651;
190
- background-color: #f5f5f5 !important;
189
+ color: var(--kb-on-surface-secondary);
190
+ background-color: var(--kb-surface-container) !important;
191
191
  border: 0 !important;
192
192
  }
193
193
 
@@ -210,7 +210,7 @@
210
210
  display: inline-flex !important;
211
211
  align-items: center !important;
212
212
  justify-content: center !important;
213
- color: #717680 !important;
213
+ color: var(--kb-on-surface-quaternary) !important;
214
214
  text-decoration: none;
215
215
  border: 0 !important;
216
216
  }
@@ -219,16 +219,16 @@
219
219
  .custom-fields
220
220
  .dataTables_paginate
221
221
  .paginate_button:hover {
222
- background-color: #f3f4f6;
222
+ background-color: var(--kb-surface-container);
223
223
  }
224
224
 
225
225
  .kaui-account-custom-fields-index
226
226
  .custom-fields
227
227
  .dataTables_paginate
228
228
  .paginate_button.current {
229
- background-color: #f5f5f5 !important;
229
+ background-color: var(--kb-surface-container) !important;
230
230
  border-radius: 0.375rem !important;
231
- color: #414651 !important;
231
+ color: var(--kb-on-surface-secondary) !important;
232
232
  }
233
233
 
234
234
  .kaui-account-custom-fields-index
@@ -239,11 +239,11 @@
239
239
  .custom-fields
240
240
  .dataTables_paginate
241
241
  .paginate_button.previous {
242
- border: 0.0625rem solid #e5e7eb;
242
+ border: 0.0625rem solid var(--kb-outline-primary);
243
243
  border-radius: 0.5rem;
244
- background-color: white;
244
+ background-color: var(--kb-neutral-0);
245
245
  padding: 0.5rem 0.875rem;
246
- color: #374151;
246
+ color: var(--kb-neutral-600);
247
247
  }
248
248
 
249
249
  .kaui-account-custom-fields-index .custom-fields #custom_fields-table_filter {
@@ -263,12 +263,12 @@
263
263
  width: 20rem;
264
264
  height: 2.2rem;
265
265
  padding: 0.3rem 1rem;
266
- border: 0.0625rem solid #e5e7eb;
266
+ border: 0.0625rem solid var(--kb-outline-primary);
267
267
  border-radius: 0.375rem;
268
268
  font-weight: 500;
269
269
  font-size: 0.875rem;
270
270
  line-height: 1.25rem;
271
- color: #414651;
271
+ color: var(--kb-on-surface-secondary);
272
272
  outline: none;
273
273
  }
274
274
 
@@ -276,7 +276,7 @@
276
276
  .custom-fields
277
277
  #custom_fields-table_filter
278
278
  input:focus {
279
- border-color: blue;
279
+ border-color: var(--kb-primary);
280
280
  }
281
281
 
282
282
  .kaui-account-custom-fields-index
@@ -295,9 +295,9 @@
295
295
  span {
296
296
  padding: 0.125rem 0.5rem;
297
297
  border-radius: 62.4375rem;
298
- background-color: #eff8ff;
299
- border: 0.0625rem solid #d1e9ff;
300
- color: #175cd3;
298
+ background-color: var(--kb-primary-25);
299
+ border: 0.0625rem solid var(--kb-primary-50);
300
+ color: var(--kb-primary);
301
301
  font-weight: 500;
302
302
  font-size: 0.75rem;
303
303
  line-height: 1.125rem;
@@ -310,14 +310,14 @@
310
310
  align-items: start;
311
311
  justify-content: space-between;
312
312
  padding: 0;
313
- border-bottom: 0.0625rem solid #e9eaeb;
313
+ border-bottom: 0.0625rem solid var(--kb-outline-primary);
314
314
  }
315
315
 
316
316
  .kaui-custom-fields-index .custom-fields-details-header h2 {
317
317
  font-weight: 600;
318
318
  font-size: 1.125rem;
319
319
  line-height: 1.5rem;
320
- color: #414651;
320
+ color: var(--kb-on-surface-secondary);
321
321
  margin-bottom: 1.25rem;
322
322
  }
323
323
 
@@ -332,7 +332,7 @@
332
332
  font-size: 0.875rem;
333
333
  line-height: 1.125rem;
334
334
  letter-spacing: 0;
335
- color: #717680;
335
+ color: var(--kb-on-surface-quaternary);
336
336
  text-transform: capitalize;
337
337
  white-space: nowrap;
338
338
  }
@@ -343,7 +343,7 @@
343
343
  padding: 1rem 0.5rem !important;
344
344
  line-height: 1.125rem !important;
345
345
  text-align: start;
346
- color: #535862 !important;
346
+ color: var(--kb-on-surface-tertiary) !important;
347
347
  }
348
348
 
349
349
  .kaui-custom-fields-index
@@ -354,9 +354,9 @@
354
354
  span {
355
355
  padding: 0.125rem 0.5rem;
356
356
  border-radius: 62.4375rem;
357
- background-color: #eff8ff;
358
- border: 0.0625rem solid #d1e9ff;
359
- color: #175cd3;
357
+ background-color: var(--kb-primary-25);
358
+ border: 0.0625rem solid var(--kb-primary-50);
359
+ color: var(--kb-primary);
360
360
  font-weight: 500;
361
361
  font-size: 0.75rem;
362
362
  line-height: 1.125rem;
@@ -370,9 +370,9 @@
370
370
  .true {
371
371
  padding: 0.125rem 0.5rem;
372
372
  border-radius: 62.4375rem;
373
- background-color: #ecfdf3;
374
- border: 0.0625rem solid #dcfae6;
375
- color: #067647;
373
+ background-color: var(--kb-success-25);
374
+ border: 0.0625rem solid var(--kb-success-50);
375
+ color: var(--kb-success-hover);
376
376
  font-weight: 500;
377
377
  font-size: 0.75rem;
378
378
  line-height: 1.125rem;
@@ -386,16 +386,16 @@
386
386
  .false {
387
387
  padding: 0.125rem 0.5rem;
388
388
  border-radius: 62.4375rem;
389
- background-color: #fef3f2;
390
- border: 0.0625rem solid #fee4e2;
391
- color: #b42318;
389
+ background-color: var(--kb-error-25);
390
+ border: 0.0625rem solid var(--kb-error-50);
391
+ color: var(--kb-error-hover);
392
392
  font-weight: 500;
393
393
  font-size: 0.75rem;
394
394
  line-height: 1.125rem;
395
395
  }
396
396
 
397
397
  .kaui-custom-fields-index .tag-definitions-table tbody tr td:nth-of-type(6) a {
398
- color: #d92d20;
398
+ color: var(--kb-error);
399
399
  font-weight: 500;
400
400
  font-size: 0.875rem;
401
401
  line-height: 1.125rem;
@@ -412,21 +412,21 @@
412
412
  width: 20rem;
413
413
  height: 2.2rem;
414
414
  padding: 0.3rem 1rem;
415
- border: 0.0625rem solid #e5e7eb;
415
+ border: 0.0625rem solid var(--kb-outline-primary);
416
416
  border-radius: 0.375rem;
417
417
  font-weight: 500;
418
418
  font-size: 0.875rem;
419
419
  line-height: 1.25rem;
420
- color: #414651;
420
+ color: var(--kb-on-surface-secondary);
421
421
  outline: none;
422
422
  }
423
423
 
424
424
  .kaui-custom-fields-index #custom_fields-table_filter input:focus {
425
- border-color: blue;
425
+ border-color: var(--kb-primary);
426
426
  }
427
427
 
428
428
  .kaui-custom-fields-index .pagination a:not(:first-child):not(:last-child) {
429
- color: #717680;
429
+ color: var(--kb-on-surface-quaternary);
430
430
  display: flex;
431
431
  align-items: center;
432
432
  padding: 0.5rem 1rem;
@@ -439,8 +439,8 @@
439
439
  .kaui-custom-fields-index
440
440
  .pagination
441
441
  a:not(:first-child):not(:last-child).btn-primary {
442
- color: #414651;
443
- background-color: #f5f5f5 !important;
442
+ color: var(--kb-on-surface-secondary);
443
+ background-color: var(--kb-surface-container) !important;
444
444
  border: 0 !important;
445
445
  }
446
446
 
@@ -463,28 +463,28 @@
463
463
  display: inline-flex !important;
464
464
  align-items: center !important;
465
465
  justify-content: center !important;
466
- color: #717680 !important;
466
+ color: var(--kb-on-surface-quaternary) !important;
467
467
  text-decoration: none;
468
468
  border: 0 !important;
469
469
  }
470
470
 
471
471
  .kaui-custom-fields-index .dataTables_paginate .paginate_button:hover {
472
- background-color: #f3f4f6;
472
+ background-color: var(--kb-surface-container);
473
473
  }
474
474
 
475
475
  .kaui-custom-fields-index .dataTables_paginate .paginate_button.current {
476
- background-color: #f5f5f5 !important;
476
+ background-color: var(--kb-surface-container) !important;
477
477
  border-radius: 0.375rem !important;
478
- color: #414651 !important;
478
+ color: var(--kb-on-surface-secondary) !important;
479
479
  }
480
480
 
481
481
  .kaui-custom-fields-index .dataTables_paginate .paginate_button.last,
482
482
  .kaui-custom-fields-index .dataTables_paginate .paginate_button.previous {
483
- border: 0.0625rem solid #e5e7eb;
483
+ border: 0.0625rem solid var(--kb-outline-primary);
484
484
  border-radius: 0.5rem;
485
- background-color: white;
485
+ background-color: var(--kb-neutral-0);
486
486
  padding: 0.5rem 0.875rem;
487
- color: #374151;
487
+ color: var(--kb-neutral-600);
488
488
  }
489
489
 
490
490
  /* app/views/kaui/custom_fields/new.html.erb */
@@ -497,7 +497,7 @@
497
497
  font-size: 1.125rem;
498
498
  line-height: 1.75rem;
499
499
  letter-spacing: 0;
500
- color: #1b1c1e;
500
+ color: var(--kb-on-surface-primary);
501
501
  padding: 1.5rem 0;
502
502
  }
503
503
 
@@ -505,7 +505,7 @@
505
505
  display: inline-flex;
506
506
  justify-content: center;
507
507
  align-items: center;
508
- border: 0.0625rem solid #d5d7da;
508
+ border: 0.0625rem solid var(--kb-outline-secondary);
509
509
  border-radius: 0.375rem;
510
510
  width: 2.5rem;
511
511
  height: 2.5rem;
@@ -521,7 +521,7 @@
521
521
  font-size: 0.875rem !important;
522
522
  font-weight: 500 !important;
523
523
  line-height: 1.25rem !important;
524
- color: #414651 !important;
524
+ color: var(--kb-on-surface-secondary) !important;
525
525
  }
526
526
 
527
527
  .add-new-custom-field-details select.form-control {
@@ -536,7 +536,7 @@
536
536
  .add-new-custom-field-details select:focus {
537
537
  box-shadow: none;
538
538
  outline: none;
539
- border-color: #1570ef;
539
+ border-color: var(--kb-primary);
540
540
  }
541
541
 
542
542
  .add-new-custom-field-details .form-group .form-control {
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  .dashboard-card-divider {
15
- border-top: 0.0625rem solid #e9ecef;
15
+ border-top: 0.0625rem solid var(--kb-surface-container-high);
16
16
  }
17
17
 
18
18
  .dashboard-card-icon {
@@ -35,8 +35,8 @@
35
35
  .disabled-setting-card .tooltip-text {
36
36
  visibility: hidden !important;
37
37
  position: absolute;
38
- background-color: #333;
39
- color: white;
38
+ background-color: var(--kb-neutral-700);
39
+ color: var(--kb-neutral-0);
40
40
  text-align: center;
41
41
  padding: 5px 10px;
42
42
  border-radius: 4px;
@@ -1,6 +1,6 @@
1
1
  /* 2. Table wrapper — white card with rounded corners & soft shadow */
2
2
  .dataTables_wrapper {
3
- background: #fff;
3
+ background: var(--kb-neutral-0);
4
4
  margin-bottom: 2rem;
5
5
  }
6
6
 
@@ -36,37 +36,37 @@ table th:first-of-type,
36
36
  font-weight: 600 !important;
37
37
  font-size: 0.875rem;
38
38
  line-height: 1.25rem;
39
- color: blue;
39
+ color: var(--kb-primary);
40
40
  }
41
41
 
42
42
  tbody tr td:first-of-type a {
43
- color: #1570ef !important;
43
+ color: var(--kb-primary) !important;
44
44
  text-decoration: none;
45
45
  }
46
46
 
47
47
  table.dataTable thead th {
48
- background-color: #fafafa;
48
+ background-color: var(--kb-surface-container-low);
49
49
  font-weight: 500 !important;
50
50
  padding: 0.75rem;
51
51
  border: 0rem !important;
52
52
  font-size: 0.75rem;
53
53
  line-height: 1.125rem;
54
- color: #717680;
54
+ color: var(--kb-on-surface-quaternary);
55
55
  text-transform: capitalize;
56
56
  }
57
57
 
58
58
  table.dataTable tbody td {
59
59
  padding: 0.9375rem 0.75rem !important;
60
60
  vertical-align: middle;
61
- border-bottom: 0.0625rem solid #e9eaeb !important;
61
+ border-bottom: 0.0625rem solid var(--kb-outline-primary) !important;
62
62
  font-weight: 400 !important;
63
63
  font-size: 0.875rem;
64
64
  line-height: 1.25rem;
65
- color: #535862;
65
+ color: var(--kb-on-surface-tertiary);
66
66
  }
67
67
 
68
68
  table.dataTable tbody tr:hover {
69
- background-color: #f5f7fa;
69
+ background-color: var(--kb-surface-container-low);
70
70
  }
71
71
 
72
72
  table.dataTable td input[type="checkbox"] {
@@ -82,7 +82,7 @@ table.dataTable td input[type="checkbox"] {
82
82
  .dataTables_filter input {
83
83
  border-radius: 0.5rem;
84
84
  padding: 0.4rem 0.75rem;
85
- border: 0.0625rem solid #ced4da;
85
+ border: 0.0625rem solid var(--kb-outline-secondary);
86
86
  font-size: 0.9rem;
87
87
  width: auto;
88
88
  display: inline-block;
@@ -101,14 +101,14 @@ table.dataTable td input[type="checkbox"] {
101
101
  font-size: 0.875rem !important;
102
102
  font-weight: 500 !important;
103
103
  line-height: 1.25rem !important;
104
- color: #414651 !important;
105
- border: 0.0625rem solid #d5d7da !important;
104
+ color: var(--kb-on-surface-secondary) !important;
105
+ border: 0.0625rem solid var(--kb-outline-secondary) !important;
106
106
  }
107
107
 
108
108
  .paginate_button.current,
109
109
  .paginate_button:hover {
110
- background: #fff !important;
111
- color: #414651 !important;
110
+ background: var(--kb-neutral-0) !important;
111
+ color: var(--kb-on-surface-secondary) !important;
112
112
  opacity: 0.6;
113
113
  transition: opacity 0.2s ease-in-out;
114
114
  -webkit-transition: opacity 0.2s ease-in-out;
@@ -125,5 +125,5 @@ table.dataTable td input[type="checkbox"] {
125
125
  font-size: 0.875rem !important;
126
126
  font-weight: 400 !important;
127
127
  line-height: 1.25rem !important;
128
- color: #717680 !important;
128
+ color: var(--kb-on-surface-quaternary) !important;
129
129
  }
@@ -3,8 +3,8 @@
3
3
  */
4
4
  header {
5
5
  padding: 1.5625rem 0;
6
- background: #fff;
7
- border-bottom: 0.0625rem solid #ccc;
6
+ background: var(--kb-neutral-0);
7
+ border-bottom: 0.0625rem solid var(--kb-outline-secondary);
8
8
  }
9
9
  header img {
10
10
  vertical-align: middle;
@@ -88,19 +88,19 @@ header nav ul li {
88
88
  vertical-align: middle;
89
89
  }
90
90
  header nav ul li a {
91
- color: #777777;
91
+ color: var(--kb-on-surface-tertiary);
92
92
  padding: 0 0.625rem;
93
- border-right: 0.0625rem solid #ccc;
93
+ border-right: 0.0625rem solid var(--kb-outline-secondary);
94
94
  }
95
95
  header nav ul li a:hover {
96
- color: #000;
96
+ color: var(--kb-neutral-900);
97
97
  }
98
98
  header nav ul li:last-of-type a {
99
99
  border: 0;
100
100
  }
101
101
 
102
102
  .title-nav-area {
103
- background: #c7e4e7;
103
+ background: var(--kb-primary-50);
104
104
  margin: 0 0 1.875rem;
105
105
  font-size: 0;
106
106
  margin-top: -2.5rem;
@@ -128,7 +128,7 @@ header nav ul li:last-of-type a {
128
128
  width: 30%;
129
129
  padding: 0.75rem 0;
130
130
  text-align: center;
131
- border-bottom: 0.0625rem solid #fff;
131
+ border-bottom: 0.0625rem solid var(--kb-neutral-0);
132
132
  }
133
133
  .title-nav-area a:nth-of-type(4),
134
134
  .title-nav-area a:nth-of-type(5),
@@ -140,7 +140,7 @@ header nav ul li:last-of-type a {
140
140
  .title-nav-area a:nth-of-type(5),
141
141
  .title-nav-area p:nth-of-type(3),
142
142
  .title-nav-area p:nth-of-type(5) {
143
- border-right: 0.0625rem solid #fff;
143
+ border-right: 0.0625rem solid var(--kb-neutral-0);
144
144
  }
145
145
  }
146
146
  @media (max-width: 28.125rem) {
@@ -155,7 +155,7 @@ header nav ul li:last-of-type a {
155
155
  .title-nav-area p:nth-of-type(2),
156
156
  .title-nav-area p:nth-of-type(4),
157
157
  .title-nav-area p:nth-of-type(5) {
158
- border-right: 0.0625rem solid #fff;
158
+ border-right: 0.0625rem solid var(--kb-neutral-0);
159
159
  }
160
160
  .title-nav-area a:nth-of-type(3),
161
161
  .title-nav-area p:nth-of-type(3) {
@@ -171,17 +171,17 @@ header nav ul li:last-of-type a {
171
171
  }
172
172
  }
173
173
  .title-nav-area a {
174
- color: #666666;
174
+ color: var(--kb-on-surface-tertiary);
175
175
  text-transform: uppercase;
176
- border-left: 0.0625rem solid #fff;
176
+ border-left: 0.0625rem solid var(--kb-neutral-0);
177
177
  }
178
178
  .title-nav-area a:hover,
179
179
  .title-nav-area a.current {
180
- color: #fff;
181
- background: #00919d;
180
+ color: var(--kb-neutral-0);
181
+ background: var(--kb-primary);
182
182
  }
183
183
  .title-nav-area a:last-of-type {
184
- border-right: 0.0625rem solid #fff;
184
+ border-right: 0.0625rem solid var(--kb-neutral-0);
185
185
  }
186
186
  .title-nav-area p {
187
187
  font-weight: normal;
@@ -199,7 +199,7 @@ header nav ul li:last-of-type a {
199
199
  border-radius: 0.5rem;
200
200
  }
201
201
  .search-box input.form-control::-webkit-input-placeholder {
202
- color: #717680;
202
+ color: var(--kb-on-surface-quaternary);
203
203
  font-weight: 400;
204
204
  font-size: 1rem;
205
205
  font-style: normal !important;
@@ -225,12 +225,12 @@ ul.header-menu li span {
225
225
  overflow-y: auto;
226
226
  }
227
227
  .header-tag {
228
- border: 0.0625rem solid #ccc;
228
+ border: 0.0625rem solid var(--kb-outline-secondary);
229
229
  }
230
230
  .header-tag a {
231
231
  text-transform: none;
232
232
  font-size: 1rem;
233
233
  }
234
234
  .header-tag:hover {
235
- background-color: #fff !important;
235
+ background-color: var(--kb-neutral-0) !important;
236
236
  }
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .home #home_searchform input[type="submit"] {
37
- background: #00919d url("kaui/search_white.png") no-repeat center center;
37
+ background: var(--kb-primary) url("kaui/search_white.png") no-repeat center center;
38
38
  height: 3.125rem;
39
39
  padding: 0 1.25rem;
40
40
  text-indent: 6249.99375rem;
@@ -63,7 +63,7 @@
63
63
  height: 16.25rem;
64
64
  padding: 2.1875rem 7.5rem 6.25rem 1.875rem;
65
65
  font-size: 1.125rem;
66
- color: #666;
66
+ color: var(--kb-on-surface-tertiary);
67
67
  display: block;
68
68
  position: fixed;
69
69
  bottom: 0;