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/queues.css CHANGED
@@ -7,28 +7,28 @@
7
7
  font-weight: 600;
8
8
  font-size: 1.5rem;
9
9
  line-height: 2rem;
10
- color: #181d27;
10
+ color: var(--kb-on-surface-primary);
11
11
  margin-bottom: 0.25rem;
12
12
  }
13
13
 
14
14
  .kaui-queues-index .queues-subtitle {
15
15
  font-size: 0.875rem;
16
16
  font-weight: 400;
17
- color: #535862;
17
+ color: var(--kb-on-surface-tertiary);
18
18
  margin-bottom: 0;
19
19
  }
20
20
 
21
21
  /* ── Main card ───────────────────────────────────────────── */
22
22
  .kaui-queues-index .queues-card {
23
- background: #ffffff;
24
- border: 0.0625rem solid #e9eaeb;
23
+ background: var(--kb-neutral-0);
24
+ border: 0.0625rem solid var(--kb-outline-primary);
25
25
  border-radius: 0.75rem;
26
26
  overflow: hidden;
27
27
  }
28
28
 
29
29
  /* ── Tab navigation ──────────────────────────────────────── */
30
30
  .kaui-queues-index .queues-nav-tabs {
31
- border-bottom: 0.0625rem solid #e9eaeb;
31
+ border-bottom: 0.0625rem solid var(--kb-outline-primary);
32
32
  gap: 0.25rem;
33
33
  }
34
34
 
@@ -40,7 +40,7 @@
40
40
  border: none;
41
41
  border-bottom: 0.125rem solid transparent;
42
42
  border-radius: 0;
43
- color: #717680;
43
+ color: var(--kb-on-surface-quaternary);
44
44
  font-weight: 500;
45
45
  font-size: 0.875rem;
46
46
  line-height: 1.25rem;
@@ -50,13 +50,13 @@
50
50
  }
51
51
 
52
52
  .kaui-queues-index .queues-nav-tabs .queues-tab-link:hover {
53
- color: #414651;
54
- border-bottom-color: #d1d5db;
53
+ color: var(--kb-on-surface-secondary);
54
+ border-bottom-color: var(--kb-outline-secondary);
55
55
  }
56
56
 
57
57
  .kaui-queues-index .queues-nav-tabs .queues-tab-link.active {
58
- color: #175cd3;
59
- border-bottom-color: #1570ef;
58
+ color: var(--kb-primary);
59
+ border-bottom-color: var(--kb-primary);
60
60
  }
61
61
 
62
62
  .kaui-queues-index .queues-nav-tabs .queues-tab-link .tab-icon {
@@ -80,15 +80,15 @@
80
80
  align-items: center;
81
81
  justify-content: space-between;
82
82
  padding: 1rem 1.25rem;
83
- background: #ffffff;
84
- border: 0.0625rem solid #e9eaeb;
83
+ background: var(--kb-neutral-0);
84
+ border: 0.0625rem solid var(--kb-outline-primary);
85
85
  border-radius: 0.5rem;
86
86
  }
87
87
 
88
88
  .kaui-queues-index .time-scope-label {
89
89
  font-weight: 500;
90
90
  font-size: 0.875rem;
91
- color: #414651;
91
+ color: var(--kb-on-surface-secondary);
92
92
  white-space: nowrap;
93
93
  }
94
94
 
@@ -98,10 +98,10 @@
98
98
  align-items: center;
99
99
  gap: 0.5rem;
100
100
  padding: 0.4375rem 0.875rem;
101
- border: 0.0625rem solid #d5d7da;
101
+ border: 0.0625rem solid var(--kb-outline-secondary);
102
102
  border-radius: 0.375rem;
103
- background: #ffffff;
104
- color: #414651;
103
+ background: var(--kb-neutral-0);
104
+ color: var(--kb-on-surface-secondary);
105
105
  font-weight: 500;
106
106
  font-size: 0.875rem;
107
107
  line-height: 1.25rem;
@@ -112,15 +112,15 @@
112
112
  }
113
113
 
114
114
  .kaui-queues-index .time-scope-btn:hover {
115
- border-color: #1570ef;
116
- color: #175cd3;
115
+ border-color: var(--kb-primary);
116
+ color: var(--kb-primary);
117
117
  text-decoration: none;
118
118
  }
119
119
 
120
120
  .kaui-queues-index .time-scope-btn.active {
121
- border-color: #1570ef;
122
- color: #175cd3;
123
- background: #eff6ff;
121
+ border-color: var(--kb-primary);
122
+ color: var(--kb-primary);
123
+ background: var(--kb-primary-25);
124
124
  }
125
125
 
126
126
  /* ── Radio dot indicator ─────────────────────────────────── */
@@ -130,15 +130,15 @@
130
130
  width: 0.9375rem;
131
131
  height: 0.9375rem;
132
132
  border-radius: 50%;
133
- border: 0.125rem solid #d1d5db;
134
- background: #ffffff;
133
+ border: 0.125rem solid var(--kb-outline-secondary);
134
+ background: var(--kb-neutral-0);
135
135
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
136
136
  }
137
137
 
138
138
  .kaui-queues-index .time-scope-btn.active .radio-dot {
139
- border-color: #1570ef;
140
- background-color: #1570ef;
141
- box-shadow: inset 0 0 0 0.1875rem #ffffff;
139
+ border-color: var(--kb-primary);
140
+ background-color: var(--kb-primary);
141
+ box-shadow: inset 0 0 0 0.1875rem var(--kb-neutral-0);
142
142
  }
143
143
 
144
144
  /* ── Search bar ──────────────────────────────────────────── */
@@ -151,7 +151,7 @@
151
151
  .kaui-queues-index .search-label {
152
152
  font-weight: 500;
153
153
  font-size: 0.875rem;
154
- color: #414651;
154
+ color: var(--kb-on-surface-secondary);
155
155
  white-space: nowrap;
156
156
  }
157
157
 
@@ -165,23 +165,23 @@
165
165
  width: 20rem;
166
166
  height: 2.25rem;
167
167
  padding: 0.375rem 2.25rem 0.375rem 0.875rem;
168
- border: 0.0625rem solid #e5e7eb;
168
+ border: 0.0625rem solid var(--kb-outline-primary);
169
169
  border-radius: 0.375rem;
170
170
  font-weight: 500;
171
171
  font-size: 0.875rem;
172
172
  line-height: 1.25rem;
173
- color: #414651;
173
+ color: var(--kb-on-surface-secondary);
174
174
  outline: none;
175
175
  transition: border-color 0.15s ease;
176
176
  }
177
177
 
178
178
  .kaui-queues-index .queues-search-input:focus {
179
- border-color: #1570ef;
179
+ border-color: var(--kb-primary);
180
180
  box-shadow: 0 0 0 0.1875rem rgba(21, 112, 239, 0.12);
181
181
  }
182
182
 
183
183
  .kaui-queues-index .queues-search-input::placeholder {
184
- color: #9ca3af;
184
+ color: var(--kb-on-surface-quaternary);
185
185
  font-weight: 400;
186
186
  }
187
187
 
@@ -201,7 +201,7 @@
201
201
  padding: 1rem 0.5rem !important;
202
202
  line-height: 1.125rem !important;
203
203
  text-align: start;
204
- color: #535862 !important;
204
+ color: var(--kb-on-surface-tertiary) !important;
205
205
  display: table-cell !important;
206
206
  text-align: left !important;
207
207
  vertical-align: top;
@@ -214,9 +214,9 @@
214
214
  font-weight: 500 !important;
215
215
  font-size: 0.75rem !important;
216
216
  line-height: 1.125rem !important;
217
- color: #414651 !important;
217
+ color: var(--kb-on-surface-secondary) !important;
218
218
  border-radius: 0.125rem !important;
219
- border: 0.0625rem solid #d5d7da !important;
219
+ border: 0.0625rem solid var(--kb-outline-secondary) !important;
220
220
  }
221
221
 
222
222
  .kaui-queues-index .queues .bus-table td pre,
@@ -225,9 +225,9 @@
225
225
  font-weight: 500 !important;
226
226
  font-size: 0.75rem !important;
227
227
  line-height: 1.125rem !important;
228
- color: #414651 !important;
228
+ color: var(--kb-on-surface-secondary) !important;
229
229
  border-radius: 0.5rem !important;
230
- border: 0.0625rem solid #d5d7da !important;
230
+ border: 0.0625rem solid var(--kb-outline-secondary) !important;
231
231
  }
232
232
 
233
233
  .kaui-queues-index .queues .bus-table th,
@@ -237,7 +237,7 @@
237
237
  font-size: 0.875rem;
238
238
  line-height: 1.125rem;
239
239
  letter-spacing: 0;
240
- color: #717680;
240
+ color: var(--kb-on-surface-quaternary);
241
241
  text-transform: capitalize;
242
242
  }
243
243
 
@@ -265,30 +265,30 @@
265
265
  display: inline-flex !important;
266
266
  align-items: center !important;
267
267
  justify-content: center !important;
268
- color: #717680 !important;
268
+ color: var(--kb-on-surface-quaternary) !important;
269
269
  text-decoration: none;
270
270
  border: 0 !important;
271
271
  }
272
272
 
273
273
  .kaui-queues-index .queues .dataTables_paginate .paginate_button:hover {
274
- background-color: #f3f4f6;
274
+ background-color: var(--kb-surface-container);
275
275
  }
276
276
 
277
277
  .kaui-queues-index .queues .dataTables_paginate .paginate_button.current {
278
- background-color: #f5f5f5 !important;
278
+ background-color: var(--kb-surface-container) !important;
279
279
  border-radius: 0.375rem !important;
280
- color: #414651 !important;
280
+ color: var(--kb-on-surface-secondary) !important;
281
281
  }
282
282
 
283
283
  .kaui-queues-index .queues .dataTables_paginate .paginate_button.first,
284
284
  .kaui-queues-index .queues .dataTables_paginate .paginate_button.last,
285
285
  .kaui-queues-index .queues .dataTables_paginate .paginate_button.next,
286
286
  .kaui-queues-index .queues .dataTables_paginate .paginate_button.previous {
287
- border: 0.0625rem solid #e5e7eb;
287
+ border: 0.0625rem solid var(--kb-outline-primary);
288
288
  border-radius: 0.5rem;
289
- background-color: white;
289
+ background-color: var(--kb-neutral-0);
290
290
  padding: 0.5rem 0.875rem;
291
- color: #374151;
291
+ color: var(--kb-neutral-600);
292
292
  }
293
293
 
294
294
  .kaui-queues-index .queues #bus-table_wrapper .row:nth-of-type(2),
@@ -328,8 +328,8 @@
328
328
  to right,
329
329
  transparent 0%,
330
330
  transparent 0.375rem,
331
- #d1d5db 0.375rem,
332
- #d5d7da 0.5rem
331
+ var(--kb-outline-secondary) 0.375rem,
332
+ var(--kb-outline-secondary) 0.5rem
333
333
  );
334
334
  }
335
335
 
@@ -339,7 +339,7 @@
339
339
  top: 1rem;
340
340
  width: 0.5rem;
341
341
  height: 1.125rem;
342
- background-color: #fff !important;
342
+ background-color: var(--kb-neutral-0) !important;
343
343
  border-radius: 50%;
344
344
  z-index: 1;
345
345
  }
@@ -351,7 +351,7 @@
351
351
  top: 0.3125rem;
352
352
  width: 0.5rem;
353
353
  height: 0.5rem;
354
- background-color: #d5d7da !important;
354
+ background-color: var(--kb-outline-secondary) !important;
355
355
  border-radius: 50%;
356
356
  z-index: 1;
357
357
  }
data/app/assets/stylesheets/kaui/refunds.css CHANGED
@@ -6,7 +6,7 @@
6
6
  font-size: 1.125rem;
7
7
  line-height: 1.75rem;
8
8
  letter-spacing: 0;
9
- color: #1b1c1e;
9
+ color: var(--kb-on-surface-primary);
10
10
  padding: 1.5rem 0;
11
11
  }
12
12
 
@@ -14,7 +14,7 @@
14
14
  display: inline-flex;
15
15
  justify-content: center;
16
16
  align-items: center;
17
- border: 0.0625rem solid #d5d7da;
17
+ border: 0.0625rem solid var(--kb-outline-secondary);
18
18
  border-radius: 0.375rem;
19
19
  width: 2.5rem;
20
20
  height: 2.5rem;
@@ -32,11 +32,11 @@
32
32
  font-size: 0.875rem !important;
33
33
  font-weight: 500 !important;
34
34
  line-height: 1.25rem !important;
35
- color: #414651 !important;
35
+ color: var(--kb-on-surface-secondary) !important;
36
36
  }
37
37
 
38
38
  .process-refund-modal .question-circle {
39
- color: #a4a7ae;
39
+ color: var(--kb-on-surface-quaternary);
40
40
  font-size: 1rem;
41
41
  width: 1rem;
42
42
  height: 1rem;
@@ -59,7 +59,7 @@
59
59
  .process-refund-modal .form-group.d-flex .form-control:focus {
60
60
  outline: none;
61
61
  box-shadow: none;
62
- border: 0.0625rem solid #1a73e8;
62
+ border: 0.0625rem solid var(--kb-primary);
63
63
  }
64
64
 
65
65
  .process-refund-modal .form-group select.form-control {
@@ -82,7 +82,7 @@
82
82
  font-weight: 500;
83
83
  font-size: 0.875rem;
84
84
  line-height: 1.25rem;
85
- color: #414651;
85
+ color: var(--kb-on-surface-secondary);
86
86
  display: flex;
87
87
  align-items: center;
88
88
  gap: 0.375rem;
@@ -95,19 +95,19 @@
95
95
 
96
96
  .process-refund-modal .form-group.d-flex .currency-group .currency {
97
97
  border-left: 0 !important;
98
- border: 0.0625rem solid #ced4da;
98
+ border: 0.0625rem solid var(--kb-outline-secondary);
99
99
  border-radius: 0 0.375rem 0.375rem 0 !important;
100
100
  padding: 0.375rem 0.75rem;
101
101
  font-weight: 400;
102
102
  font-size: 1rem;
103
103
  line-height: 1.5rem;
104
- color: #535862;
104
+ color: var(--kb-on-surface-tertiary);
105
105
  }
106
106
 
107
107
  .process-refund-modal .toggle-segment {
108
108
  display: flex;
109
109
  align-items: center;
110
- border: 0.0625rem solid #d5d7da;
110
+ border: 0.0625rem solid var(--kb-outline-secondary);
111
111
  width: fit-content;
112
112
  border-radius: 0.375rem;
113
113
  overflow: hidden;
@@ -119,8 +119,8 @@
119
119
  align-items: center;
120
120
  padding: 0.625rem 1rem !important;
121
121
  cursor: pointer;
122
- color: #414651;
123
- border-right: 0.0625rem solid #d5d7da;
122
+ color: var(--kb-on-surface-secondary);
123
+ border-right: 0.0625rem solid var(--kb-outline-secondary);
124
124
  font-weight: 500;
125
125
  font-size: 0.875rem;
126
126
  line-height: 1.25rem;
@@ -155,7 +155,7 @@
155
155
  left: 0;
156
156
  width: 0.5rem;
157
157
  height: 0.5rem;
158
- background-color: #17b26a;
158
+ background-color: var(--kb-success-pressed);
159
159
  border-radius: 50%;
160
160
  }
161
161
 
@@ -163,9 +163,9 @@
163
163
  .toggle-segment
164
164
  .checkbox
165
165
  label:has(input[type="radio"]:checked) {
166
- background-color: #fafafa;
166
+ background-color: var(--kb-surface-container-low);
167
167
  font-weight: 600;
168
- color: #252b37;
168
+ color: var(--kb-neutral-700);
169
169
  gap: 1rem;
170
170
  }
171
171
 
@@ -181,5 +181,5 @@
181
181
  font-weight: 400;
182
182
  font-size: 0.875rem;
183
183
  line-height: 1.25rem;
184
- color: #535862;
184
+ color: var(--kb-on-surface-tertiary);
185
185
  }
data/app/assets/stylesheets/kaui/role_definitions.css CHANGED
@@ -6,7 +6,7 @@
6
6
  font-size: 1.125rem;
7
7
  line-height: 1.75rem;
8
8
  letter-spacing: 0;
9
- color: #1b1c1e;
9
+ color: var(--kb-on-surface-primary);
10
10
  padding: 1rem 0;
11
11
  margin-bottom: 1.5rem;
12
12
  }
@@ -15,7 +15,7 @@
15
15
  display: inline-flex;
16
16
  justify-content: center;
17
17
  align-items: center;
18
- border: 0.0625rem solid #d5d7da;
18
+ border: 0.0625rem solid var(--kb-outline-secondary);
19
19
  border-radius: 0.375rem;
20
20
  width: 2.5rem;
21
21
  height: 2.5rem;
@@ -31,7 +31,7 @@
31
31
  font-size: 0.875rem !important;
32
32
  font-weight: 500 !important;
33
33
  line-height: 1.25rem !important;
34
- color: #414651 !important;
34
+ color: var(--kb-on-surface-secondary) !important;
35
35
  }
36
36
 
37
37
  .kaui-role-definitions-new .form-control {
@@ -44,7 +44,7 @@
44
44
  font-weight: 400;
45
45
  font-size: 0.875rem;
46
46
  line-height: 1.25rem;
47
- color: #535862;
47
+ color: var(--kb-on-surface-tertiary);
48
48
  }
49
49
 
50
50
  .kaui-role-definitions-new .border-button {
@@ -52,7 +52,7 @@
52
52
  display: inline-flex;
53
53
  justify-content: center;
54
54
  align-items: center;
55
- border: 0.0625rem solid #d5d7da;
55
+ border: 0.0625rem solid var(--kb-outline-secondary);
56
56
  border-radius: 0.375rem;
57
57
  width: 2.5rem;
58
58
  height: 2.5rem;
@@ -83,12 +83,12 @@
83
83
  }
84
84
 
85
85
  .kaui-role-definitions-new .premissions-group .chip {
86
- background: #fafafa !important;
86
+ background: var(--kb-surface-container-low) !important;
87
87
  padding: 0.125rem 0.375rem !important;
88
88
  border-radius: 0.25rem !important;
89
- border: 0.0625rem solid #f5f5f5 !important;
89
+ border: 0.0625rem solid var(--kb-surface-container) !important;
90
90
  display: flex !important;
91
- color: #414651 !important;
91
+ color: var(--kb-on-surface-secondary) !important;
92
92
  align-items: center !important;
93
93
  font-size: 0.75rem !important;
94
94
  margin: 0 !important;
@@ -101,7 +101,7 @@
101
101
  .kaui-role-definitions-new .premissions-group .chip .remove-chip {
102
102
  margin-left: 0.5rem;
103
103
  cursor: pointer;
104
- color: #666;
104
+ color: var(--kb-on-surface-tertiary);
105
105
  }
106
106
 
107
107
  .kaui-role-definitions-new .premissions-group .chip-text-input {
data/app/assets/stylesheets/kaui/sidebar.css CHANGED
@@ -5,14 +5,14 @@
5
5
  flex-direction: column;
6
6
  padding: 0;
7
7
  width: 8.4375rem;
8
- background-color: #fff;
8
+ background-color: var(--kb-neutral-0);
9
9
  }
10
10
 
11
11
  .account-sidebar-area .container p {
12
12
  font-weight: 600;
13
13
  font-size: 1.125rem;
14
14
  line-height: 1.75rem;
15
- color: #414651;
15
+ color: var(--kb-on-surface-secondary);
16
16
  margin-bottom: 1.25rem;
17
17
  }
18
18
 
@@ -22,7 +22,7 @@
22
22
  gap: 0.5rem;
23
23
  padding: 0.5rem;
24
24
  text-decoration: none;
25
- color: #717680;
25
+ color: var(--kb-on-surface-quaternary);
26
26
  font-size: 0.875rem;
27
27
  border-radius: 0.5rem;
28
28
  font-weight: 500;
@@ -30,8 +30,8 @@
30
30
  }
31
31
 
32
32
  .account-sidebar-area .container a.current {
33
- background-color: #EFF8FF;
34
- color: #175CD3;
33
+ background-color: var(--kb-primary-25);
34
+ color: var(--kb-primary);
35
35
  }
36
36
 
37
37
  .account-sidebar-area .container a .icon {
@@ -42,8 +42,8 @@
42
42
 
43
43
  .account-sidebar-area .container span.label.label-danger {
44
44
  margin-left: 1rem;
45
- color: #fff;
46
- background: #dc3545;
45
+ color: var(--kb-neutral-0);
46
+ background: var(--kb-error-pressed);
47
47
  padding: 0.125rem 0.5rem;
48
48
  border-radius: 0.25rem;
49
49
  font-size: 0.75rem;
@@ -66,14 +66,14 @@
66
66
  flex-direction: column;
67
67
  padding: 0;
68
68
  width: 9rem;
69
- background-color: #fff;
69
+ background-color: var(--kb-neutral-0);
70
70
  }
71
71
 
72
72
  .setting-sidebar-area .container p {
73
73
  font-weight: 600;
74
74
  font-size: 1.125rem;
75
75
  line-height: 1.75rem;
76
- color: #414651;
76
+ color: var(--kb-on-surface-secondary);
77
77
  margin-bottom: 1.25rem;
78
78
  }
79
79
 
@@ -83,7 +83,7 @@
83
83
  gap: 0.5rem;
84
84
  padding: 0.5rem;
85
85
  text-decoration: none;
86
- color: #717680;
86
+ color: var(--kb-on-surface-quaternary);
87
87
  font-size: 0.875rem;
88
88
  border-radius: 0.5rem;
89
89
  font-weight: 500;
@@ -91,8 +91,8 @@
91
91
  }
92
92
 
93
93
  .setting-sidebar-area .container a.current {
94
- background-color: #eff8ff;
95
- color: #175cd3;
94
+ background-color: var(--kb-primary-25);
95
+ color: var(--kb-primary);
96
96
  }
97
97
 
98
98
  .setting-sidebar-area .container a .icon {
@@ -103,8 +103,8 @@
103
103
 
104
104
  .setting-sidebar-area .container span.label.label-danger {
105
105
  margin-left: 1rem;
106
- color: #fff;
107
- background: #dc3545;
106
+ color: var(--kb-neutral-0);
107
+ background: var(--kb-error-pressed);
108
108
  padding: 0.125rem 0.5rem;
109
109
  border-radius: 0.25rem;
110
110
  font-size: 0.75rem;