@happyvertical/smrt-sales 0.55.15 → 0.55.19

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.
@@ -41,7 +41,7 @@ function stageNameOf(stageId: string | null): string {
41
41
  }
42
42
  </script>
43
43
 
44
- <div class="sales-opportunity-board">
44
+ <div class="sales-opportunity-board" data-smrt-component="OpportunityBoard">
45
45
  {#if columns.length === 0}
46
46
  <p class="sales-opportunity-board__empty">No pipeline stages configured.</p>
47
47
  {:else}
@@ -121,6 +121,8 @@ function stageNameOf(stageId: string | null): string {
121
121
  </div>
122
122
 
123
123
  <style>
124
+ @layer smrt.reset, smrt.structure, smrt.theme;
125
+ @layer smrt.theme {
124
126
  .sales-opportunity-board {
125
127
  width: 100%;
126
128
  overflow-x: auto;
@@ -128,7 +130,7 @@ function stageNameOf(stageId: string | null): string {
128
130
 
129
131
  .sales-opportunity-board__empty {
130
132
  margin: 0;
131
- color: var(--smrt-color-on-surface-variant, #64748b);
133
+ color: var(--smrt-color-on-surface-variant);
132
134
  font-style: italic;
133
135
  }
134
136
 
@@ -141,18 +143,18 @@ function stageNameOf(stageId: string | null): string {
141
143
  .column {
142
144
  flex: 1 0 14rem;
143
145
  min-width: 14rem;
144
- background: var(--smrt-color-surface-container-low, #f9fafb);
145
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
146
- border-radius: var(--smrt-radius-md, 8px);
146
+ background: var(--smrt-color-surface-container-low);
147
+ border: 1px solid var(--smrt-color-outline-variant);
148
+ border-radius: var(--smrt-radius-md);
147
149
  padding: var(--smrt-spacing-2, 0.5rem);
148
150
  }
149
151
 
150
152
  .column.won {
151
- border-top: 3px solid var(--smrt-color-success, #16a34a);
153
+ border-top: 3px solid var(--smrt-color-success);
152
154
  }
153
155
 
154
156
  .column.lost {
155
- border-top: 3px solid var(--smrt-color-error, #dc2626);
157
+ border-top: 3px solid var(--smrt-color-error);
156
158
  }
157
159
 
158
160
  .column__title {
@@ -166,7 +168,7 @@ function stageNameOf(stageId: string | null): string {
166
168
  }
167
169
 
168
170
  .column__count {
169
- color: var(--smrt-color-on-surface-variant, #64748b);
171
+ color: var(--smrt-color-on-surface-variant);
170
172
  font-weight: var(--smrt-typography-weight-normal, 400);
171
173
  }
172
174
 
@@ -180,7 +182,7 @@ function stageNameOf(stageId: string | null): string {
180
182
  }
181
183
 
182
184
  .column__placeholder {
183
- color: var(--smrt-color-on-surface-variant, #64748b);
185
+ color: var(--smrt-color-on-surface-variant);
184
186
  text-align: center;
185
187
  padding: var(--smrt-spacing-2, 0.5rem);
186
188
  }
@@ -189,18 +191,18 @@ function stageNameOf(stageId: string | null): string {
189
191
  display: flex;
190
192
  flex-direction: column;
191
193
  gap: var(--smrt-spacing-1, 0.25rem);
192
- background: var(--smrt-color-surface, #fff);
193
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
194
- border-radius: var(--smrt-radius-sm, 4px);
194
+ background: var(--smrt-color-surface);
195
+ border: 1px solid var(--smrt-color-outline-variant);
196
+ border-radius: var(--smrt-radius-sm);
195
197
  padding: var(--smrt-spacing-2, 0.5rem);
196
198
  }
197
199
 
198
200
  .card--won {
199
- border-color: var(--smrt-color-success, #16a34a);
201
+ border-color: var(--smrt-color-success);
200
202
  }
201
203
 
202
204
  .card--lost {
203
- border-color: var(--smrt-color-error, #dc2626);
205
+ border-color: var(--smrt-color-error);
204
206
  }
205
207
 
206
208
  .card__name {
@@ -208,7 +210,7 @@ function stageNameOf(stageId: string | null): string {
208
210
  }
209
211
 
210
212
  .card__owner {
211
- color: var(--smrt-color-on-surface-variant, #64748b);
213
+ color: var(--smrt-color-on-surface-variant);
212
214
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
213
215
  }
214
216
 
@@ -227,4 +229,5 @@ function stageNameOf(stageId: string | null): string {
227
229
  display: inline-flex;
228
230
  gap: var(--smrt-spacing-1, 0.25rem);
229
231
  }
232
+ }
230
233
  </style>
@@ -97,7 +97,7 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
97
97
  }
98
98
  </script>
99
99
 
100
- <article class="sales-opportunity-detail">
100
+ <article class="sales-opportunity-detail" data-smrt-component="OpportunityDetail">
101
101
  <header class="head">
102
102
  <h2 class="head__name">{opportunity.name}</h2>
103
103
  <Badge variant={opportunityStatusBadgeVariant(opportunity.status)} size="sm">
@@ -298,6 +298,8 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
298
298
  </article>
299
299
 
300
300
  <style>
301
+ @layer smrt.reset, smrt.structure, smrt.theme;
302
+ @layer smrt.theme {
301
303
  .sales-opportunity-detail {
302
304
  display: flex;
303
305
  flex-direction: column;
@@ -323,7 +325,7 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
323
325
  }
324
326
 
325
327
  .facts__item dt {
326
- color: var(--smrt-color-on-surface-variant, #64748b);
328
+ color: var(--smrt-color-on-surface-variant);
327
329
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
328
330
  }
329
331
 
@@ -335,18 +337,18 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
335
337
  .outcome {
336
338
  margin: 0;
337
339
  padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
338
- border-radius: var(--smrt-radius-sm, 4px);
339
- background: var(--smrt-color-surface-container, #f3f4f6);
340
+ border-radius: var(--smrt-radius-sm);
341
+ background: var(--smrt-color-surface-container);
340
342
  }
341
343
 
342
344
  .outcome--won {
343
- background: var(--smrt-color-success-container, #dcfce7);
344
- color: var(--smrt-color-on-success-container, #14532d);
345
+ background: var(--smrt-color-success-container);
346
+ color: var(--smrt-color-on-success-container);
345
347
  }
346
348
 
347
349
  .outcome--lost {
348
- background: var(--smrt-color-error-container, #fee2e2);
349
- color: var(--smrt-color-on-error-container, #7f1d1d);
350
+ background: var(--smrt-color-error-container);
351
+ color: var(--smrt-color-on-error-container);
350
352
  }
351
353
 
352
354
  .controls {
@@ -379,12 +381,12 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
379
381
  font-size: var(--smrt-typography-title-small-size, 0.875rem);
380
382
  text-transform: uppercase;
381
383
  letter-spacing: 0.04em;
382
- color: var(--smrt-color-on-surface-variant, #64748b);
384
+ color: var(--smrt-color-on-surface-variant);
383
385
  }
384
386
 
385
387
  .empty {
386
388
  margin: 0;
387
- color: var(--smrt-color-on-surface-variant, #64748b);
389
+ color: var(--smrt-color-on-surface-variant);
388
390
  font-style: italic;
389
391
  }
390
392
 
@@ -403,20 +405,20 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
403
405
  align-items: baseline;
404
406
  gap: var(--smrt-spacing-2, 0.5rem);
405
407
  padding: var(--smrt-spacing-2, 0.5rem);
406
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
407
- border-radius: var(--smrt-radius-sm, 4px);
408
+ border: 1px solid var(--smrt-color-outline-variant);
409
+ border-radius: var(--smrt-radius-sm);
408
410
  }
409
411
 
410
412
  .timeline__item.next-action {
411
- border-color: var(--smrt-color-primary, #2563eb);
412
- background: var(--smrt-color-primary-container, #eff6ff);
413
+ border-color: var(--smrt-color-primary);
414
+ background: var(--smrt-color-primary-container);
413
415
  }
414
416
 
415
417
  .timeline__kind {
416
418
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
417
419
  text-transform: uppercase;
418
420
  letter-spacing: 0.04em;
419
- color: var(--smrt-color-on-surface-variant, #64748b);
421
+ color: var(--smrt-color-on-surface-variant);
420
422
  }
421
423
 
422
424
  .timeline__summary {
@@ -426,12 +428,12 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
426
428
  .timeline__dates {
427
429
  display: inline-flex;
428
430
  gap: var(--smrt-spacing-2, 0.5rem);
429
- color: var(--smrt-color-on-surface-variant, #64748b);
431
+ color: var(--smrt-color-on-surface-variant);
430
432
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
431
433
  }
432
434
 
433
435
  .timeline__dates .overdue {
434
- color: var(--smrt-color-error, #dc2626);
436
+ color: var(--smrt-color-error);
435
437
  font-weight: var(--smrt-typography-weight-medium, 500);
436
438
  }
437
439
 
@@ -456,12 +458,12 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
456
458
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
457
459
  text-transform: uppercase;
458
460
  letter-spacing: 0.04em;
459
- color: var(--smrt-color-on-surface-variant, #64748b);
461
+ color: var(--smrt-color-on-surface-variant);
460
462
  margin-right: var(--smrt-spacing-1, 0.25rem);
461
463
  }
462
464
 
463
465
  .conversions__note {
464
- color: var(--smrt-color-on-surface-variant, #64748b);
466
+ color: var(--smrt-color-on-surface-variant);
465
467
  margin-left: var(--smrt-spacing-1, 0.25rem);
466
468
  }
467
469
 
@@ -469,4 +471,5 @@ function isOpenNextAction(activity: SalesActivityView): boolean {
469
471
  font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
470
472
  font-size: var(--smrt-typography-body-small-size, 0.8125rem);
471
473
  }
474
+ }
472
475
  </style>
@@ -86,7 +86,7 @@ function methodLabel(method: string): string {
86
86
  }
87
87
  </script>
88
88
 
89
- <section class="sales-payout-review">
89
+ <section class="sales-payout-review" data-smrt-component="PayoutBatchReview">
90
90
  {#if payouts.length === 0}
91
91
  <p class="empty">No payout batches to review.</p>
92
92
  {:else}
@@ -254,6 +254,8 @@ function methodLabel(method: string): string {
254
254
  </section>
255
255
 
256
256
  <style>
257
+ @layer smrt.reset, smrt.structure, smrt.theme;
258
+ @layer smrt.theme {
257
259
  .sales-payout-review {
258
260
  display: flex;
259
261
  flex-direction: column;
@@ -262,7 +264,7 @@ function methodLabel(method: string): string {
262
264
 
263
265
  .empty {
264
266
  margin: 0;
265
- color: var(--smrt-color-on-surface-variant, #64748b);
267
+ color: var(--smrt-color-on-surface-variant);
266
268
  font-style: italic;
267
269
  }
268
270
 
@@ -286,7 +288,7 @@ function methodLabel(method: string): string {
286
288
  }
287
289
 
288
290
  .facts__item dt {
289
- color: var(--smrt-color-on-surface-variant, #64748b);
291
+ color: var(--smrt-color-on-surface-variant);
290
292
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
291
293
  text-transform: uppercase;
292
294
  letter-spacing: 0.04em;
@@ -301,7 +303,7 @@ function methodLabel(method: string): string {
301
303
  }
302
304
 
303
305
  .negative {
304
- color: var(--smrt-color-error, #dc2626);
306
+ color: var(--smrt-color-error);
305
307
  }
306
308
 
307
309
  .settled {
@@ -310,7 +312,7 @@ function methodLabel(method: string): string {
310
312
 
311
313
  .failed-note {
312
314
  margin: 0 0 var(--smrt-spacing-2, 0.5rem);
313
- color: var(--smrt-color-error, #dc2626);
315
+ color: var(--smrt-color-error);
314
316
  }
315
317
 
316
318
  .actions {
@@ -329,4 +331,5 @@ function methodLabel(method: string): string {
329
331
  font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
330
332
  font-size: var(--smrt-typography-body-small-size, 0.8125rem);
331
333
  }
334
+ }
332
335
  </style>
@@ -26,7 +26,7 @@ function methodLabel(method: string): string {
26
26
  }
27
27
  </script>
28
28
 
29
- <div class="sales-payout-history">
29
+ <div class="sales-payout-history" data-smrt-component="PayoutHistoryList">
30
30
  {#if payouts.length === 0}
31
31
  <p class="empty">No payouts yet.</p>
32
32
  {:else}
@@ -109,9 +109,11 @@ function methodLabel(method: string): string {
109
109
  </div>
110
110
 
111
111
  <style>
112
+ @layer smrt.reset, smrt.structure, smrt.theme;
113
+ @layer smrt.theme {
112
114
  .empty {
113
115
  margin: 0;
114
- color: var(--smrt-color-on-surface-variant, #64748b);
116
+ color: var(--smrt-color-on-surface-variant);
115
117
  font-style: italic;
116
118
  }
117
119
 
@@ -128,9 +130,9 @@ function methodLabel(method: string): string {
128
130
  display: flex;
129
131
  flex-direction: column;
130
132
  gap: var(--smrt-spacing-2, 0.5rem);
131
- background: var(--smrt-color-surface, #fff);
132
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
133
- border-radius: var(--smrt-radius-md, 8px);
133
+ background: var(--smrt-color-surface);
134
+ border: 1px solid var(--smrt-color-outline-variant);
135
+ border-radius: var(--smrt-radius-md);
134
136
  padding: var(--smrt-spacing-3, 0.75rem);
135
137
  }
136
138
 
@@ -152,7 +154,7 @@ function methodLabel(method: string): string {
152
154
  }
153
155
 
154
156
  .payout__method {
155
- color: var(--smrt-color-on-surface-variant, #64748b);
157
+ color: var(--smrt-color-on-surface-variant);
156
158
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
157
159
  }
158
160
 
@@ -164,7 +166,7 @@ function methodLabel(method: string): string {
164
166
  }
165
167
 
166
168
  .totals__item dt {
167
- color: var(--smrt-color-on-surface-variant, #64748b);
169
+ color: var(--smrt-color-on-surface-variant);
168
170
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
169
171
  text-transform: uppercase;
170
172
  letter-spacing: 0.04em;
@@ -179,7 +181,7 @@ function methodLabel(method: string): string {
179
181
  }
180
182
 
181
183
  .negative {
182
- color: var(--smrt-color-error, #dc2626);
184
+ color: var(--smrt-color-error);
183
185
  }
184
186
 
185
187
  .timeline {
@@ -193,25 +195,25 @@ function methodLabel(method: string): string {
193
195
 
194
196
  .timeline__step {
195
197
  padding: var(--smrt-spacing-0_5, 0.125rem) var(--smrt-spacing-2, 0.5rem);
196
- border-radius: var(--smrt-radius-full, 9999px);
197
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
198
+ border-radius: var(--smrt-radius-full);
199
+ border: 1px solid var(--smrt-color-outline-variant);
198
200
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
199
- color: var(--smrt-color-on-surface-variant, #64748b);
201
+ color: var(--smrt-color-on-surface-variant);
200
202
  }
201
203
 
202
204
  .timeline__step--done {
203
- background: var(--smrt-color-surface-container, #f3f4f6);
205
+ background: var(--smrt-color-surface-container);
204
206
  }
205
207
 
206
208
  .timeline__step--current {
207
- border-color: var(--smrt-color-primary, #2563eb);
208
- color: var(--smrt-color-primary, #2563eb);
209
+ border-color: var(--smrt-color-primary);
210
+ color: var(--smrt-color-primary);
209
211
  font-weight: var(--smrt-typography-weight-semibold, 600);
210
212
  }
211
213
 
212
214
  .timeline__step--current.timeline__step--failed {
213
- border-color: var(--smrt-color-error, #dc2626);
214
- color: var(--smrt-color-error, #dc2626);
215
+ border-color: var(--smrt-color-error);
216
+ color: var(--smrt-color-error);
215
217
  }
216
218
 
217
219
  .refs {
@@ -222,7 +224,7 @@ function methodLabel(method: string): string {
222
224
  }
223
225
 
224
226
  .refs__item dt {
225
- color: var(--smrt-color-on-surface-variant, #64748b);
227
+ color: var(--smrt-color-on-surface-variant);
226
228
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
227
229
  text-transform: uppercase;
228
230
  letter-spacing: 0.04em;
@@ -239,7 +241,8 @@ function methodLabel(method: string): string {
239
241
 
240
242
  .notes {
241
243
  margin: 0;
242
- color: var(--smrt-color-on-surface-variant, #64748b);
244
+ color: var(--smrt-color-on-surface-variant);
243
245
  font-size: var(--smrt-typography-body-small-size, 0.8125rem);
244
246
  }
247
+ }
245
248
  </style>
@@ -54,7 +54,7 @@ function submitCreate() {
54
54
  }
55
55
  </script>
56
56
 
57
- <div class="sales-referral-links">
57
+ <div class="sales-referral-links" data-smrt-component="ReferralLinkManager">
58
58
  {#if onCreate}
59
59
  <Form class="sales-referral-links-create" onsubmit={submitCreate}>
60
60
  <FormGroup
@@ -139,6 +139,8 @@ function submitCreate() {
139
139
  </div>
140
140
 
141
141
  <style>
142
+ @layer smrt.reset, smrt.structure, smrt.theme;
143
+ @layer smrt.theme {
142
144
  .sales-referral-links {
143
145
  display: flex;
144
146
  flex-direction: column;
@@ -161,7 +163,7 @@ function submitCreate() {
161
163
 
162
164
  .empty {
163
165
  margin: 0;
164
- color: var(--smrt-color-on-surface-variant, #64748b);
166
+ color: var(--smrt-color-on-surface-variant);
165
167
  font-style: italic;
166
168
  }
167
169
 
@@ -175,14 +177,14 @@ function submitCreate() {
175
177
  padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
176
178
  text-align: left;
177
179
  font-weight: var(--smrt-typography-weight-semibold, 600);
178
- background: var(--smrt-color-surface-container, #f3f4f6);
179
- border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
180
+ background: var(--smrt-color-surface-container);
181
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
180
182
  white-space: nowrap;
181
183
  }
182
184
 
183
185
  td {
184
186
  padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
185
- border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
187
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
186
188
  vertical-align: middle;
187
189
  }
188
190
 
@@ -213,4 +215,5 @@ function submitCreate() {
213
215
  clip: rect(0 0 0 0);
214
216
  white-space: nowrap;
215
217
  }
218
+ }
216
219
  </style>
@@ -21,7 +21,7 @@ export interface Props {
21
21
  let { referrals = [], locale }: Props = $props();
22
22
  </script>
23
23
 
24
- <div class="sales-referral-status">
24
+ <div class="sales-referral-status" data-smrt-component="ReferralStatusList">
25
25
  {#if referrals.length === 0}
26
26
  <p class="empty">No referrals yet.</p>
27
27
  {:else}
@@ -69,6 +69,8 @@ let { referrals = [], locale }: Props = $props();
69
69
  </div>
70
70
 
71
71
  <style>
72
+ @layer smrt.reset, smrt.structure, smrt.theme;
73
+ @layer smrt.theme {
72
74
  .sales-referral-status {
73
75
  width: 100%;
74
76
  overflow-x: auto;
@@ -76,7 +78,7 @@ let { referrals = [], locale }: Props = $props();
76
78
 
77
79
  .empty {
78
80
  margin: 0;
79
- color: var(--smrt-color-on-surface-variant, #64748b);
81
+ color: var(--smrt-color-on-surface-variant);
80
82
  font-style: italic;
81
83
  }
82
84
 
@@ -90,14 +92,14 @@ let { referrals = [], locale }: Props = $props();
90
92
  padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
91
93
  text-align: left;
92
94
  font-weight: var(--smrt-typography-weight-semibold, 600);
93
- background: var(--smrt-color-surface-container, #f3f4f6);
94
- border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
95
+ background: var(--smrt-color-surface-container);
96
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
95
97
  white-space: nowrap;
96
98
  }
97
99
 
98
100
  td {
99
101
  padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
100
- border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
102
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
101
103
  vertical-align: top;
102
104
  }
103
105
 
@@ -108,11 +110,12 @@ let { referrals = [], locale }: Props = $props();
108
110
 
109
111
  .secondary {
110
112
  display: block;
111
- color: var(--smrt-color-on-surface-variant, #64748b);
113
+ color: var(--smrt-color-on-surface-variant);
112
114
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
113
115
  }
114
116
 
115
117
  .credit {
116
118
  white-space: nowrap;
117
119
  }
120
+ }
118
121
  </style>
@@ -45,7 +45,7 @@ const tiles = $derived.by((): Tile[] => {
45
45
  });
46
46
  </script>
47
47
 
48
- <div class="sales-earnings-summary">
48
+ <div class="sales-earnings-summary" data-smrt-component="ReferrerEarningsSummary">
49
49
  {#if !balance}
50
50
  <p class="empty">No earnings yet.</p>
51
51
  {:else}
@@ -63,9 +63,11 @@ const tiles = $derived.by((): Tile[] => {
63
63
  </div>
64
64
 
65
65
  <style>
66
+ @layer smrt.reset, smrt.structure, smrt.theme;
67
+ @layer smrt.theme {
66
68
  .empty {
67
69
  margin: 0;
68
- color: var(--smrt-color-on-surface-variant, #64748b);
70
+ color: var(--smrt-color-on-surface-variant);
69
71
  font-style: italic;
70
72
  }
71
73
 
@@ -77,18 +79,18 @@ const tiles = $derived.by((): Tile[] => {
77
79
  }
78
80
 
79
81
  .tile {
80
- background: var(--smrt-color-surface, #fff);
81
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
82
- border-radius: var(--smrt-radius-md, 8px);
82
+ background: var(--smrt-color-surface);
83
+ border: 1px solid var(--smrt-color-outline-variant);
84
+ border-radius: var(--smrt-radius-md);
83
85
  padding: var(--smrt-spacing-3, 0.75rem);
84
86
  }
85
87
 
86
88
  .tile--emphasis {
87
- border-color: var(--smrt-color-primary, #2563eb);
89
+ border-color: var(--smrt-color-primary);
88
90
  }
89
91
 
90
92
  .tile dt {
91
- color: var(--smrt-color-on-surface-variant, #64748b);
93
+ color: var(--smrt-color-on-surface-variant);
92
94
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
93
95
  text-transform: uppercase;
94
96
  letter-spacing: 0.04em;
@@ -101,6 +103,7 @@ const tiles = $derived.by((): Tile[] => {
101
103
  }
102
104
 
103
105
  .tile dd.negative {
104
- color: var(--smrt-color-error, #dc2626);
106
+ color: var(--smrt-color-error);
105
107
  }
108
+ }
106
109
  </style>
@@ -48,7 +48,7 @@ const byStage = $derived(pipelineValueByStage(stages, opportunities));
48
48
  const rate = $derived(winRate(opportunities));
49
49
  </script>
50
50
 
51
- <div class="sales-dashboard">
51
+ <div class="sales-dashboard" data-smrt-component="SalesDashboard">
52
52
  <dl class="tiles">
53
53
  <div class="tile">
54
54
  <dt>Open opportunities</dt>
@@ -113,6 +113,8 @@ const rate = $derived(winRate(opportunities));
113
113
  </div>
114
114
 
115
115
  <style>
116
+ @layer smrt.reset, smrt.structure, smrt.theme;
117
+ @layer smrt.theme {
116
118
  .sales-dashboard {
117
119
  display: flex;
118
120
  flex-direction: column;
@@ -127,14 +129,14 @@ const rate = $derived(winRate(opportunities));
127
129
  }
128
130
 
129
131
  .tile {
130
- background: var(--smrt-color-surface, #fff);
131
- border: 1px solid var(--smrt-color-outline-variant, #d8dde6);
132
- border-radius: var(--smrt-radius-md, 8px);
132
+ background: var(--smrt-color-surface);
133
+ border: 1px solid var(--smrt-color-outline-variant);
134
+ border-radius: var(--smrt-radius-md);
133
135
  padding: var(--smrt-spacing-3, 0.75rem);
134
136
  }
135
137
 
136
138
  .tile dt {
137
- color: var(--smrt-color-on-surface-variant, #64748b);
139
+ color: var(--smrt-color-on-surface-variant);
138
140
  font-size: var(--smrt-typography-label-medium-size, 0.75rem);
139
141
  text-transform: uppercase;
140
142
  letter-spacing: 0.04em;
@@ -155,7 +157,7 @@ const rate = $derived(winRate(opportunities));
155
157
  font-size: var(--smrt-typography-title-small-size, 0.875rem);
156
158
  text-transform: uppercase;
157
159
  letter-spacing: 0.04em;
158
- color: var(--smrt-color-on-surface-variant, #64748b);
160
+ color: var(--smrt-color-on-surface-variant);
159
161
  }
160
162
 
161
163
  .stages__list {
@@ -172,7 +174,7 @@ const rate = $derived(winRate(opportunities));
172
174
  align-items: baseline;
173
175
  gap: var(--smrt-spacing-2, 0.5rem);
174
176
  padding: var(--smrt-spacing-1, 0.25rem) 0;
175
- border-bottom: 1px solid var(--smrt-color-outline-variant, #d8dde6);
177
+ border-bottom: 1px solid var(--smrt-color-outline-variant);
176
178
  font-size: var(--smrt-typography-body-medium-size, 0.875rem);
177
179
  }
178
180
 
@@ -182,11 +184,12 @@ const rate = $derived(winRate(opportunities));
182
184
  }
183
185
 
184
186
  .stages__count {
185
- color: var(--smrt-color-on-surface-variant, #64748b);
187
+ color: var(--smrt-color-on-surface-variant);
186
188
  font-size: var(--smrt-typography-body-small-size, 0.75rem);
187
189
  }
188
190
 
189
191
  .stages__value {
190
192
  font-weight: var(--smrt-typography-weight-semibold, 600);
191
193
  }
194
+ }
192
195
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@happyvertical/smrt-sales",
3
- "version": "0.55.15",
3
+ "version": "0.55.19",
4
4
  "smrtJsdoc": "strict",
5
5
  "description": "Modular sales for the SMRT framework: agreement execution, CRM, referral intake, neutral commissions, and reusable Svelte surfaces",
6
6
  "type": "module",
@@ -42,18 +42,18 @@
42
42
  "./manifest.json": "./dist/manifest.json"
43
43
  },
44
44
  "dependencies": {
45
- "@happyvertical/signatures": "^0.103.4",
46
- "@happyvertical/smrt-assets": "0.55.15",
47
- "@happyvertical/smrt-core": "0.55.15",
48
- "@happyvertical/smrt-tenancy": "0.55.15",
49
- "@happyvertical/smrt-ui": "0.55.15",
50
- "@happyvertical/sql": "^0.103.4"
45
+ "@happyvertical/signatures": "^0.103.5",
46
+ "@happyvertical/smrt-assets": "0.55.19",
47
+ "@happyvertical/smrt-core": "0.55.19",
48
+ "@happyvertical/smrt-tenancy": "0.55.19",
49
+ "@happyvertical/smrt-ui": "0.55.19",
50
+ "@happyvertical/sql": "^0.103.5"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "svelte": "^5.57.0"
54
54
  },
55
55
  "devDependencies": {
56
- "@happyvertical/smrt-vitest": "0.55.15",
56
+ "@happyvertical/smrt-vitest": "0.55.19",
57
57
  "@sveltejs/package": "^2.5.8",
58
58
  "@sveltejs/vite-plugin-svelte": "^7.3.0",
59
59
  "@types/node": "24.13.6",