@marianmeres/stuic 3.19.0 → 3.21.0

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 (17) hide show
  1. package/dist/components/Cart/index.css +2 -2
  2. package/dist/components/Checkout/CheckoutOrderReview.svelte +13 -4
  3. package/dist/components/Checkout/_cart-review.css +3 -3
  4. package/dist/components/Checkout/_confirm-step.css +1 -1
  5. package/dist/components/Checkout/_delivery-options.css +3 -11
  6. package/dist/components/Checkout/_guest-or-login-form.css +1 -1
  7. package/dist/components/Checkout/_login-form.css +1 -1
  8. package/dist/components/Checkout/_order-confirmation.css +4 -12
  9. package/dist/components/Checkout/_order-review.css +4 -4
  10. package/dist/components/Checkout/_order-summary.css +3 -3
  11. package/dist/components/Checkout/_progress.css +5 -17
  12. package/dist/components/Checkout/_shared.css +4 -12
  13. package/dist/components/Checkout/_shipping-step.css +1 -1
  14. package/dist/components/ThemePreview/ThemePreview.svelte +15 -0
  15. package/dist/components/ThemePreview/index.css +18 -0
  16. package/docs/conventions.md +15 -0
  17. package/package.json +1 -1
package/dist/components/Cart/index.css CHANGED
@@ -137,7 +137,7 @@
137
137
  .stuic-cart-item[data-variant="summary"] {
138
138
  justify-content: space-between;
139
139
  align-items: baseline;
140
- font-size: 0.875rem;
140
+ font-size: var(--text-base);
141
141
  gap: 0.5rem;
142
142
  padding: 0;
143
143
  border: 0;
@@ -274,7 +274,7 @@
274
274
  background: transparent;
275
275
  border: none;
276
276
  cursor: pointer;
277
- font-size: 1rem;
277
+ font-size: var(--text-base);
278
278
  line-height: 1;
279
279
  color: inherit;
280
280
  transition: background var(--stuic-cart-transition);
package/dist/components/Checkout/CheckoutOrderReview.svelte CHANGED
@@ -169,15 +169,24 @@
169
169
  {#each order.items as item (item.product_id)}
170
170
  <div>
171
171
  <div class={unstyled ? undefined : "stuic-checkout-review-item"}>
172
- <span>{item.quantity} &times; {item.name}</span>
173
- <span>{fp(item.price * item.quantity)}</span>
172
+ <span>
173
+ {item.quantity} &times; {item.name}
174
+ {#if item.quantity > 1}
175
+ <span class="opacity-50">
176
+ ({t("checkout.review.each", { price: fp(item.price) })})
177
+ </span>
178
+ {/if}
179
+ </span>
180
+ <span>
181
+ {fp(item.price * item.quantity)}
182
+ </span>
174
183
  </div>
175
- {#if item.quantity > 1}
184
+ <!-- {#if item.quantity > 1}
176
185
  <span class={unstyled ? undefined : "stuic-checkout-review-item-each"}>
177
186
  <spam class="opacity-50">&rarr;</spam>
178
187
  {t("checkout.review.each", { price: fp(item.price) })}
179
188
  </span>
180
- {/if}
189
+ {/if} -->
181
190
  </div>
182
191
  {/each}
183
192
  </div>
package/dist/components/Checkout/_cart-review.css CHANGED
@@ -1,10 +1,10 @@
1
1
  :root {
2
2
  /* CheckoutCartReview */
3
- --stuic-checkout-cart-review-title-font-size: 1.125rem;
3
+ --stuic-checkout-cart-review-title-font-size: var(--text-lg);
4
4
  --stuic-checkout-cart-review-title-font-weight: 600;
5
- --stuic-checkout-cart-review-summary-font-size: 1.125rem;
5
+ --stuic-checkout-cart-review-summary-font-size: var(--text-lg);
6
6
  --stuic-checkout-cart-review-summary-total-font-weight: 700;
7
- --stuic-checkout-cart-review-summary-total-font-size: 1.25rem;
7
+ --stuic-checkout-cart-review-summary-total-font-size: var(--text-xl);
8
8
  --stuic-checkout-cart-review-summary-margin: 1rem 1rem 1rem 1rem;
9
9
  }
10
10
 
package/dist/components/Checkout/_confirm-step.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --stuic-checkout-confirm-step-grid-columns: var(--stuic-checkout-step-grid-columns);
5
5
  --stuic-checkout-confirm-step-sidebar-top: var(--stuic-checkout-step-sidebar-top);
6
6
  --stuic-checkout-confirm-step-validation-gap: 0.5rem;
7
- --stuic-checkout-confirm-step-heading-font-size: 1.125rem;
7
+ --stuic-checkout-confirm-step-heading-font-size: var(--text-lg);
8
8
  --stuic-checkout-confirm-step-heading-font-weight: 600;
9
9
  }
10
10
 
package/dist/components/Checkout/_delivery-options.css CHANGED
@@ -6,19 +6,11 @@
6
6
  --stuic-checkout-delivery-option-border-color: var(--stuic-color-border);
7
7
  --stuic-checkout-delivery-option-border-color-selected: var(--stuic-color-ring);
8
8
  --stuic-checkout-delivery-option-bg: var(--stuic-color-background);
9
- --stuic-checkout-delivery-option-bg-selected: color-mix(
10
- in srgb,
11
- var(--stuic-color-accent) 10%,
12
- transparent
13
- );
14
- --stuic-checkout-delivery-option-bg-hover: color-mix(
15
- in srgb,
16
- var(--stuic-color-muted) 10%,
17
- transparent
18
- );
9
+ --stuic-checkout-delivery-option-bg-selected: var(--stuic-color-surface-primary);
10
+ --stuic-checkout-delivery-option-bg-hover: var(--stuic-color-muted);
19
11
  --stuic-checkout-delivery-free-color: #16a34a;
20
12
  --stuic-checkout-delivery-description-color: var(--stuic-color-muted-foreground);
21
- --stuic-checkout-delivery-description-font-size: 0.875rem;
13
+ --stuic-checkout-delivery-description-font-size: var(--text-base);
22
14
  --stuic-checkout-delivery-updating-opacity: 0.6;
23
15
  }
24
16
 
package/dist/components/Checkout/_guest-or-login-form.css CHANGED
@@ -49,7 +49,7 @@
49
49
  gap: 1rem;
50
50
  margin: 1rem 0;
51
51
  color: var(--stuic-checkout-guest-or-login-divider-color);
52
- font-size: 0.875rem;
52
+ font-size: var(--text-sm);
53
53
  }
54
54
 
55
55
  .stuic-checkout-guest-or-login-divider::before,
package/dist/components/Checkout/_login-form.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --stuic-checkout-login-social-margin-top: 1.5rem;
10
10
  --stuic-checkout-login-social-gap: 0.75rem;
11
11
  --stuic-checkout-login-social-divider-color: var(--stuic-color-border);
12
- --stuic-checkout-login-social-divider-font-size: 0.875rem;
12
+ --stuic-checkout-login-social-divider-font-size: var(--text-sm);
13
13
  --stuic-checkout-login-social-divider-margin-bottom: 0.75rem;
14
14
  }
15
15
 
package/dist/components/Checkout/_order-confirmation.css CHANGED
@@ -2,11 +2,7 @@
2
2
  /* CheckoutOrderConfirmation */
3
3
  --stuic-checkout-confirmation-section-gap: 2rem;
4
4
  --stuic-checkout-confirmation-success-color: #16a34a;
5
- --stuic-checkout-confirmation-order-number-bg: color-mix(
6
- in srgb,
7
- var(--stuic-color-muted) 30%,
8
- transparent
9
- );
5
+ --stuic-checkout-confirmation-order-number-bg: var(--stuic-color-muted);
10
6
  --stuic-checkout-confirmation-order-number-font: ui-monospace, monospace;
11
7
  --stuic-checkout-confirmation-order-number-padding: 0.5rem 1rem;
12
8
  --stuic-checkout-confirmation-order-number-radius: 0.375rem;
@@ -52,25 +48,24 @@
52
48
  }
53
49
 
54
50
  .stuic-checkout-confirmation-order-number > span {
55
- font-size: 0.875rem;
51
+ font-size: var(--text-sm);
56
52
  color: var(--stuic-checkout-confirmation-subtitle-color);
57
53
  }
58
54
 
59
55
  .stuic-checkout-confirmation-order-number > code {
60
56
  font-family: var(--stuic-checkout-confirmation-order-number-font);
61
57
  font-weight: 700;
62
- font-size: 1.125rem;
58
+ font-size: var(--text-lg);
63
59
  }
64
60
 
65
61
  .stuic-checkout-confirmation-email {
66
62
  text-align: center;
67
- font-size: 0.875rem;
68
63
  color: var(--stuic-checkout-confirmation-email-color);
69
64
  margin: 0;
70
65
  }
71
66
 
72
67
  .stuic-checkout-confirmation-section-title {
73
- font-size: 1rem;
68
+ font-size: var(--text-base);
74
69
  font-weight: 500;
75
70
  margin: 0 0 0.75rem;
76
71
  }
@@ -88,19 +83,16 @@
88
83
  }
89
84
 
90
85
  .stuic-checkout-confirmation-subsection-label {
91
- font-size: 0.875rem;
92
86
  font-weight: 500;
93
87
  color: var(--stuic-checkout-confirmation-subsection-label-color);
94
88
  margin: 0 0 0.25rem;
95
89
  }
96
90
 
97
91
  .stuic-checkout-confirmation-address {
98
- font-size: 0.875rem;
99
92
  line-height: 1.5;
100
93
  }
101
94
 
102
95
  .stuic-checkout-confirmation-delivery-detail {
103
- font-size: 0.875rem;
104
96
  color: var(--stuic-checkout-confirmation-delivery-detail-color);
105
97
  }
106
98
 
package/dist/components/Checkout/_order-review.css CHANGED
@@ -1,15 +1,15 @@
1
1
  :root {
2
2
  /* CheckoutOrderReview */
3
3
  --stuic-checkout-review-section-gap: 1.5rem;
4
- --stuic-checkout-review-header-font-size: 1rem;
4
+ --stuic-checkout-review-header-font-size: var(--text-base);
5
5
  --stuic-checkout-review-header-font-weight: 500;
6
6
  --stuic-checkout-review-item-gap: 0.5rem;
7
7
  --stuic-checkout-review-address-color: var(--stuic-color-muted-foreground);
8
- --stuic-checkout-review-address-font-size: 0.875rem;
8
+ --stuic-checkout-review-address-font-size: var(--text-base);
9
9
  --stuic-checkout-review-delivery-estimate-color: var(--stuic-color-muted-foreground);
10
- --stuic-checkout-review-delivery-estimate-font-size: 0.875rem;
10
+ --stuic-checkout-review-delivery-estimate-font-size: var(--text-base);
11
11
  --stuic-checkout-review-item-each-color: var(--stuic-color-muted-foreground);
12
- --stuic-checkout-review-item-each-font-size: 0.8125rem;
12
+ --stuic-checkout-review-item-each-font-size: var(--text-base);
13
13
  --stuic-checkout-review-billing-same-color: var(--stuic-color-muted-foreground);
14
14
  }
15
15
 
package/dist/components/Checkout/_order-summary.css CHANGED
@@ -2,9 +2,9 @@
2
2
  /* CheckoutOrderSummary */
3
3
  --stuic-checkout-summary-gap: 0.25rem;
4
4
  --stuic-checkout-summary-label-color: inherit;
5
- --stuic-checkout-summary-label-font-size: 0.875rem;
6
- --stuic-checkout-summary-value-font-size: 0.875rem;
7
- --stuic-checkout-summary-total-font-size: 1.125rem;
5
+ --stuic-checkout-summary-label-font-size: var(--text-base);
6
+ --stuic-checkout-summary-value-font-size: var(--text-base);
7
+ --stuic-checkout-summary-total-font-size: var(--text-lg);
8
8
  --stuic-checkout-summary-total-font-weight: 700;
9
9
  --stuic-checkout-summary-border-color: var(--stuic-color-border);
10
10
  --stuic-checkout-summary-discount-color: #16a34a;
package/dist/components/Checkout/_progress.css CHANGED
@@ -1,25 +1,13 @@
1
1
  :root {
2
2
  /* CheckoutProgress */
3
3
  --stuic-checkout-progress-gap: 0.25rem;
4
- --stuic-checkout-progress-font-size: 0.875rem;
4
+ --stuic-checkout-progress-font-size: var(--text-base);
5
5
  --stuic-checkout-progress-current-color: var(--stuic-color-foreground);
6
6
  --stuic-checkout-progress-current-font-weight: 700;
7
- --stuic-checkout-progress-past-color: var(--stuic-color-muted-foreground);
8
- --stuic-checkout-progress-future-color: color-mix(
9
- in srgb,
10
- var(--stuic-color-muted-foreground) 50%,
11
- transparent
12
- );
13
- --stuic-checkout-progress-separator-color: color-mix(
14
- in srgb,
15
- var(--stuic-color-muted-foreground) 30%,
16
- transparent
17
- );
18
- --stuic-checkout-progress-button-hover-bg: color-mix(
19
- in srgb,
20
- var(--stuic-color-muted) 20%,
21
- transparent
22
- );
7
+ --stuic-checkout-progress-past-color: var(--stuic-color-foreground);
8
+ --stuic-checkout-progress-future-color: var(--stuic-color-muted-foreground);
9
+ --stuic-checkout-progress-separator-color: var(--stuic-color-border);
10
+ --stuic-checkout-progress-button-hover-bg: var(--stuic-color-muted);
23
11
  --stuic-checkout-progress-button-radius: 0.25rem;
24
12
  }
25
13
 
package/dist/components/Checkout/_shared.css CHANGED
@@ -16,23 +16,15 @@
16
16
  --stuic-checkout-input-focus-ring: var(--stuic-color-ring);
17
17
 
18
18
  /* Label styling */
19
- --stuic-checkout-label-font-size: 0.875rem;
19
+ --stuic-checkout-label-font-size: var(--text-base);
20
20
  --stuic-checkout-label-font-weight: 500;
21
21
  --stuic-checkout-label-margin-bottom: 0.25rem;
22
22
 
23
23
  /* Error styling */
24
24
  --stuic-checkout-error-color: var(--stuic-color-destructive);
25
- --stuic-checkout-error-font-size: 0.875rem;
26
- --stuic-checkout-error-bg: color-mix(
27
- in srgb,
28
- var(--stuic-color-destructive) 5%,
29
- transparent
30
- );
31
- --stuic-checkout-error-border-color: color-mix(
32
- in srgb,
33
- var(--stuic-color-destructive) 30%,
34
- transparent
35
- );
25
+ --stuic-checkout-error-font-size: var(--text-base);
26
+ --stuic-checkout-error-bg: var(--stuic-color-surface-destructive);
27
+ --stuic-checkout-error-border-color: var(--stuic-color-surface-destructive-border);
36
28
 
37
29
  /* Card sections (used in ReviewStep, OrderReview, etc.) */
38
30
  --stuic-checkout-card-border-color: var(--stuic-color-border);
package/dist/components/Checkout/_shipping-step.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --stuic-checkout-shipping-step-sidebar-top: var(--stuic-checkout-step-sidebar-top);
6
6
  --stuic-checkout-shipping-step-section-gap: 2rem;
7
7
  --stuic-checkout-shipping-step-checkbox-gap: 0.5rem;
8
- --stuic-checkout-shipping-step-heading-font-size: 1.125rem;
8
+ --stuic-checkout-shipping-step-heading-font-size: var(--text-lg);
9
9
  --stuic-checkout-shipping-step-heading-font-weight: 600;
10
10
  }
11
11
 
package/dist/components/ThemePreview/ThemePreview.svelte CHANGED
@@ -160,6 +160,21 @@
160
160
  <strong>Accent Highlight</strong>
161
161
  <p>This box uses accent colors to draw attention.</p>
162
162
  </div>
163
+
164
+ <div class="highlight-box destructive">
165
+ <strong>Destructive Highlight</strong>
166
+ <p>This box uses destructive intent colors for error or danger content.</p>
167
+ </div>
168
+
169
+ <div class="highlight-box warning">
170
+ <strong>Warning Highlight</strong>
171
+ <p>This box uses warning intent colors for cautionary content.</p>
172
+ </div>
173
+
174
+ <div class="highlight-box success">
175
+ <strong>Success Highlight</strong>
176
+ <p>This box uses success intent colors for positive feedback.</p>
177
+ </div>
163
178
  </section>
164
179
 
165
180
  <!-- INTENT BUTTONS -->
package/dist/components/ThemePreview/index.css CHANGED
@@ -385,6 +385,24 @@
385
385
  border: 1px solid var(--stuic-color-surface-accent-border);
386
386
  }
387
387
 
388
+ .stuic-theme-preview .highlight-box.destructive {
389
+ background: var(--stuic-color-surface-destructive);
390
+ color: var(--stuic-color-surface-destructive-foreground);
391
+ border: 1px solid var(--stuic-color-surface-destructive-border);
392
+ }
393
+
394
+ .stuic-theme-preview .highlight-box.warning {
395
+ background: var(--stuic-color-surface-warning);
396
+ color: var(--stuic-color-surface-warning-foreground);
397
+ border: 1px solid var(--stuic-color-surface-warning-border);
398
+ }
399
+
400
+ .stuic-theme-preview .highlight-box.success {
401
+ background: var(--stuic-color-surface-success);
402
+ color: var(--stuic-color-surface-success-foreground);
403
+ border: 1px solid var(--stuic-color-surface-success-border);
404
+ }
405
+
388
406
  /* ============================================================================
389
407
  TYPOGRAPHY SECTION
390
408
  ============================================================================ */
package/docs/conventions.md CHANGED
@@ -217,6 +217,21 @@ export {
217
217
  - Use `twMerge()` for class prop merging
218
218
  - Prefer `bg-linear-to-r` over `bg-gradient-to-r` (v4 canonical)
219
219
 
220
+ ### Font Size Tokens
221
+
222
+ Use Tailwind v4 `--text-*` variables instead of hardcoded `rem` values for `font-size`:
223
+
224
+ | Token | Value | Usage |
225
+ | ---------------- | --------- | ----------------------------------------- |
226
+ | `var(--text-xs)` | 0.75rem | Badges, avatar initials, section titles |
227
+ | `var(--text-sm)` | 0.875rem | Dividers, decorative text (use sparingly) |
228
+ | `var(--text-base)` | 1rem | Body text, labels, descriptions |
229
+ | `var(--text-lg)` | 1.125rem | Headings, totals, summary text |
230
+ | `var(--text-xl)` | 1.25rem | Large totals, prominent values |
231
+ | `var(--text-2xl)` | 1.5rem | Hero text, large avatars |
232
+
233
+ **`--text-sm` guideline:** Only use for truly secondary, non-essential text (e.g. divider labels like "or continue with"). Avoid for content that users need to read comfortably (labels, descriptions, error messages).
234
+
220
235
  ---
221
236
 
222
237
  ## Documentation
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marianmeres/stuic",
3
- "version": "3.19.0",
3
+ "version": "3.21.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "!dist/**/*.test.*",