@ambasada/ui 0.8.19 → 0.8.21

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 (6) hide show
  1. package/README.md +6 -6
  2. package/dist/ambasada-ui.css +34 -24
  3. package/dist/components.css +21 -16
  4. package/dist/react.d.ts +1 -1
  5. package/dist/tokens.css +12 -7
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @ambasada/ui
2
2
 
3
- The Ambasada look for mini apps: design tokens (the Ambasada colours, Inter + JetBrains Mono, radii, spacing,
3
+ The ambasada look for mini apps: design tokens (the ambasada colours, Inter + JetBrains Mono, radii, spacing,
4
4
  the mono label, the shell's safe areas and host bar) and a small component set in plain CSS, with optional
5
5
  React wrappers. Light only, no framework, no runtime: one stylesheet a plain HTML page can `<link>`.
6
6
 
@@ -24,11 +24,11 @@ With no build step, the same three in one file from any npm CDN (the fonts load
24
24
  ```
25
25
 
26
26
  Optional: the `ambasada init` templates start unstyled, and only the mini app's in-app page (`ambasada miniapp
27
- enable`) loads it. Use it on your own pages if you want the Ambasada app's look.
27
+ enable`) loads it. Use it on your own pages if you want the ambasada app's look.
28
28
 
29
29
  ## Tokens
30
30
 
31
- All on `:root`, from the Ambasada hub (each has a source comment in `tokens.css`): `--color-accent` (the logo
31
+ All on `:root`, from the ambasada hub (each has a source comment in `tokens.css`): `--color-accent` (the logo
32
32
  red), `--color-accent-text` (red for small text), `--color-bg`, `--color-surface`, `--color-surface-2`,
33
33
  `--color-ink` / `-2` / `-3`, `--color-line`, `--color-success` / `warn` / `danger` / `info` and their `-soft`
34
34
  tints, `--card-*` (the member card palettes), `--font-sans`, `--font-mono`, `--text-*`, `--weight-*`,
@@ -37,7 +37,7 @@ tints, `--card-*` (the member card palettes), `--font-sans`, `--font-mono`, `--t
37
37
 
38
38
  The shell's insets, for anything you position yourself:
39
39
 
40
- | Variable | Default | Inside the Ambasada app |
40
+ | Variable | Default | Inside the ambasada app |
41
41
  |---|---|---|
42
42
  | `--ambasada-safe-area-top` / `bottom` / `left` / `right` | `env(safe-area-inset-*, 0px)` | set on `<html>` by `@ambasada/miniapp`'s `ready()` |
43
43
  | `--ambasada-host-bar` | `0px` | the height of the shell's top bar |
@@ -68,7 +68,7 @@ the margin on top of it small (8 px): an empty band above the home indicator is
68
68
  | `ui-empty` (`ui-empty-icon`) | Empty state: icon, `<strong>` title, hint, action. |
69
69
  | `ui-skeleton` | Grey bars (`<span>`s) while loading: skeletons, not spinners. |
70
70
 
71
- For tools built for the laptop that still open in the Ambasada app (the Developer app):
71
+ For tools built for the laptop that still open in the ambasada app (the Developer app):
72
72
 
73
73
  | Class | What |
74
74
  |---|---|
@@ -125,6 +125,6 @@ The wrappers render markup only and import no CSS (load the stylesheet yourself)
125
125
  with `react-dom/server`. React ≥ 18 is an optional peer dependency.
126
126
 
127
127
  Rules for the look (one red thing per screen, light only, sheets for forms): docs/DESIGN-SYSTEM.md and
128
- docs/MINI-APPS.md §9 in the Ambasada repo.
128
+ docs/MINI-APPS.md §9 in the ambasada repo.
129
129
 
130
130
  MIT, © CENTYSO. Inter and JetBrains Mono: SIL Open Font License 1.1 (`fonts/OFL-*.txt`).
package/dist/ambasada-ui.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ambasada/ui 0.8.19: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
1
+ /* @ambasada/ui 0.8.21: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
2
2
  /*
3
3
  * Inter and JetBrains Mono, self-hosted (variable, SIL Open Font License 1.1: fonts/OFL-*.txt). Latin and
4
4
  * Latin Extended, so Romanian ț and ș render. The URLs are relative to this file: bundlers copy the files,
@@ -40,14 +40,14 @@
40
40
  }
41
41
 
42
42
  /*
43
- * @ambasada/ui design tokens: the Ambasada look as CSS custom properties.
43
+ * @ambasada/ui design tokens: the ambasada look as CSS custom properties.
44
44
  *
45
- * Source of truth is the Ambasada hub (repo ambasada-landing, hub.ambasada.id / ambasada.pro):
45
+ * Source of truth is the ambasada hub (repo ambasada-landing, hub.ambasada.id / ambasada.pro):
46
46
  * - src/app/globals.css the @theme block ("V5 light + brand red")
47
47
  * - src/app/layout.tsx Inter + JetBrains Mono via next/font
48
48
  * - src/lib/member/card-style.ts wallet pass palettes (Apple / Google Wallet)
49
49
  * - src/app/card/frames.tsx WalletCard, the on-screen copy of the pass
50
- * Light only: the Ambasada app is light, and so are its mini apps (docs/MINI-APPS.md §9).
50
+ * Light only: the ambasada app is light, and so are its mini apps (docs/MINI-APPS.md §9).
51
51
  * Usage and rules: docs/DESIGN-SYSTEM.md. The fonts themselves are in fonts.css.
52
52
  */
53
53
 
@@ -55,7 +55,7 @@
55
55
  color-scheme: light;
56
56
 
57
57
  /* Brand */
58
- --color-accent: #ff002e; /* hub --color-accent, the logo red; "Ambasada red" pass palette rgb(255,0,46) */
58
+ --color-accent: #ff002e; /* hub --color-accent, the logo red; "ambasada red" pass palette rgb(255,0,46) */
59
59
  --color-accent-hover: #e5002a; /* hub .prose-ambasada a:hover */
60
60
  --color-accent-text: #e5002a; /* red for small text on light: #ff002e is 3.8:1 on bg, this is 4.6:1 (AA) */
61
61
  --color-accent-press: #b30020; /* hub tier-theme "Active" gradient end */
@@ -80,6 +80,11 @@
80
80
  --color-warn: #f59e0b; /* hub --color-warn */
81
81
  --color-danger: #dc2626; /* red-600: distinct from the brand red so errors never read as branding */
82
82
  --color-info: #2563eb; /* hub --color-info */
83
+ /* Status colours as text. The plain ones are for dots, icons and fills: as words on white or on their own tint
84
+ * they sit at 3.1 to 4.4:1. These reach AA (4.5:1) on --color-surface and on the matching -soft tint. */
85
+ --color-success-text: #15803d; /* green-700: 5.0:1 on white, 4.8:1 on success-soft */
86
+ --color-warn-text: #b45309; /* amber-700: 5.0:1 on white, 4.8:1 on warn-soft */
87
+ --color-danger-text: #b91c1c; /* red-700: 6.5:1 on white, 5.9:1 on danger-soft */
83
88
  --color-success-soft: #ecfdf3; /* tint of success for notices */
84
89
  --color-warn-soft: #fff8eb; /* tint of warn for notices */
85
90
  --color-danger-soft: #fef2f2; /* tint of danger for notices */
@@ -87,7 +92,7 @@
87
92
  --color-danger-line: #fecaca;
88
93
  --color-success-line: #bbf7d0;
89
94
 
90
- /* The member card (wallet pass, "Ambasada red" palette, src/lib/member/card-style.ts) */
95
+ /* The member card (wallet pass, "ambasada red" palette, src/lib/member/card-style.ts) */
91
96
  --card-bg: #ff002e; /* pass backgroundColor rgb(255,0,46) */
92
97
  --card-fg: #ffffff; /* pass foregroundColor rgb(255,255,255) */
93
98
  --card-label: #ffc8d2; /* pass labelColor rgb(255,200,210) */
@@ -103,7 +108,7 @@
103
108
  --font-native: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* hub .native-shell body */
104
109
 
105
110
  --text-label: 0.6875rem; /* 11px, hub .section-label (mono, uppercase, 0.1em): the mono label, .ui-label */
106
- --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows) */
111
+ --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows): mono uppercase labels only, never sentence text */
107
112
  --text-xs: 0.75rem; /* 12px, hub nav links */
108
113
  --text-sm: 0.875rem; /* 14px, hub body small / buttons */
109
114
  --text-base: 1rem; /* 16px */
@@ -150,7 +155,7 @@
150
155
  --duration: 200ms; /* hub .card transitions */
151
156
 
152
157
  /*
153
- * The Ambasada app's shell (docs/MINI-APPS.md §6). Inside the app, @ambasada/miniapp (applyCssVars, run by
158
+ * The ambasada app's shell (docs/MINI-APPS.md §6). Inside the app, @ambasada/miniapp (applyCssVars, run by
154
159
  * ready()) sets these on <html> from the shell context, which wins over :root. On the web the safe areas
155
160
  * fall back to the browser's own insets (non-zero only with viewport-fit=cover) and there is no host bar.
156
161
  */
@@ -261,8 +266,8 @@
261
266
  background: var(--color-accent);
262
267
  color: var(--color-on-accent);
263
268
  font: inherit;
264
- font-size: 0.9375rem;
265
- font-weight: var(--weight-medium);
269
+ font-size: var(--text-base);
270
+ font-weight: var(--weight-semibold); /* white on the brand red is 4:1: 16px semibold keeps it legible */
266
271
  line-height: 1.25;
267
272
  text-align: center;
268
273
  text-decoration: none;
@@ -281,9 +286,12 @@
281
286
  outline: 2px solid var(--color-accent);
282
287
  outline-offset: 2px;
283
288
  }
289
+ /* Off reads as off: grey, not a washed-out red that still looks like the action. */
284
290
  .ui-button:disabled,
285
291
  .ui-button[aria-disabled="true"] {
286
- opacity: 0.45;
292
+ background: var(--color-surface-2);
293
+ border-color: var(--color-line);
294
+ color: var(--color-ink-3);
287
295
  cursor: default;
288
296
  filter: none;
289
297
  }
@@ -291,6 +299,7 @@
291
299
  background: var(--color-surface);
292
300
  color: var(--color-ink);
293
301
  border-color: var(--color-line);
302
+ font-weight: var(--weight-medium); /* the one primary action is the semibold one */
294
303
  }
295
304
  .ui-button.secondary:hover {
296
305
  filter: none;
@@ -361,7 +370,7 @@
361
370
  filter: none;
362
371
  }
363
372
  .ui-row.danger .row-title {
364
- color: var(--color-danger);
373
+ color: var(--color-danger-text);
365
374
  }
366
375
  .ui-row.muted {
367
376
  opacity: 0.55;
@@ -410,7 +419,8 @@
410
419
  font-weight: var(--weight-semibold);
411
420
  text-align: right;
412
421
  }
413
- .row-right.plus { color: var(--color-success); }
422
+ .row-right.plus { color: var(--color-success-text); }
423
+ .row-right small { font-size: var(--text-xs); font-weight: var(--weight-regular); } /* the unit after a price */
414
424
  .row-chev {
415
425
  flex: none;
416
426
  color: var(--color-ink-3);
@@ -436,9 +446,9 @@
436
446
  border-radius: 50%;
437
447
  background: currentColor;
438
448
  }
439
- .ui-pill.good { background: var(--color-success-soft); color: var(--color-success); }
440
- .ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger); }
441
- .ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn); }
449
+ .ui-pill.good { background: var(--color-success-soft); color: var(--color-success-text); }
450
+ .ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger-text); }
451
+ .ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
442
452
  .ui-pill.accent { background: var(--color-accent-soft); color: var(--color-accent-text); }
443
453
  .ui-pill.pulse i {
444
454
  animation: ui-pulse 1.6s ease-in-out infinite;
@@ -598,8 +608,8 @@ body.ui-sheet-open { overflow: hidden; }
598
608
  color: var(--color-ink-3);
599
609
  line-height: 1.45;
600
610
  }
601
- .ui-field-hint.bad { color: var(--color-danger); }
602
- .ui-field-hint.good { color: var(--color-success); }
611
+ .ui-field-hint.bad { color: var(--color-danger-text); }
612
+ .ui-field-hint.good { color: var(--color-success-text); }
603
613
  .ui-input {
604
614
  display: block;
605
615
  width: 100%;
@@ -640,7 +650,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
640
650
  display: flex;
641
651
  align-items: center;
642
652
  justify-content: space-between;
643
- min-height: 48px;
653
+ min-height: 52px;
644
654
  border: 1px solid var(--color-line);
645
655
  border-radius: var(--radius-md);
646
656
  background: var(--color-surface);
@@ -648,7 +658,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
648
658
  }
649
659
  .ui-stepper button {
650
660
  width: 52px;
651
- height: 40px;
661
+ height: var(--tap);
652
662
  min-height: 0;
653
663
  padding: 0;
654
664
  display: grid;
@@ -662,15 +672,15 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
662
672
  .ui-stepper button:hover { filter: none; background: var(--color-line); }
663
673
  .ui-stepper button:disabled { opacity: 0.45; cursor: default; }
664
674
  .ui-stepper-value {
665
- font-size: 1.25rem;
675
+ font-size: var(--text-xl);
666
676
  font-weight: var(--weight-semibold);
667
677
  font-variant-numeric: tabular-nums;
668
678
  }
669
679
  .ui-stepper-value small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: var(--weight-regular); }
670
680
  .ui-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
671
681
  .ui-presets button {
672
- min-width: 48px;
673
- min-height: 36px;
682
+ min-width: 52px;
683
+ min-height: var(--tap);
674
684
  padding: 4px 14px;
675
685
  border-radius: var(--radius-pill);
676
686
  background: var(--color-surface);
@@ -722,7 +732,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
722
732
  @keyframes ui-shimmer { to { background-position: -200% 0; } }
723
733
 
724
734
  /* ── app shell (desktop tools) ──────────────────────────────────────────────
725
- * For apps built for the laptop that still open in the Ambasada app: a sidebar, a top bar, the content. Under
735
+ * For apps built for the laptop that still open in the ambasada app: a sidebar, a top bar, the content. Under
726
736
  * 900 px the sidebar becomes a drawer behind the top bar's menu button. Clears the host bar and the safe areas
727
737
  * once: the top bar takes the top, the content the bottom (docs/MINI-APPS.md §15 decision 11). */
728
738
 
package/dist/components.css CHANGED
@@ -87,8 +87,8 @@
87
87
  background: var(--color-accent);
88
88
  color: var(--color-on-accent);
89
89
  font: inherit;
90
- font-size: 0.9375rem;
91
- font-weight: var(--weight-medium);
90
+ font-size: var(--text-base);
91
+ font-weight: var(--weight-semibold); /* white on the brand red is 4:1: 16px semibold keeps it legible */
92
92
  line-height: 1.25;
93
93
  text-align: center;
94
94
  text-decoration: none;
@@ -107,9 +107,12 @@
107
107
  outline: 2px solid var(--color-accent);
108
108
  outline-offset: 2px;
109
109
  }
110
+ /* Off reads as off: grey, not a washed-out red that still looks like the action. */
110
111
  .ui-button:disabled,
111
112
  .ui-button[aria-disabled="true"] {
112
- opacity: 0.45;
113
+ background: var(--color-surface-2);
114
+ border-color: var(--color-line);
115
+ color: var(--color-ink-3);
113
116
  cursor: default;
114
117
  filter: none;
115
118
  }
@@ -117,6 +120,7 @@
117
120
  background: var(--color-surface);
118
121
  color: var(--color-ink);
119
122
  border-color: var(--color-line);
123
+ font-weight: var(--weight-medium); /* the one primary action is the semibold one */
120
124
  }
121
125
  .ui-button.secondary:hover {
122
126
  filter: none;
@@ -187,7 +191,7 @@
187
191
  filter: none;
188
192
  }
189
193
  .ui-row.danger .row-title {
190
- color: var(--color-danger);
194
+ color: var(--color-danger-text);
191
195
  }
192
196
  .ui-row.muted {
193
197
  opacity: 0.55;
@@ -236,7 +240,8 @@
236
240
  font-weight: var(--weight-semibold);
237
241
  text-align: right;
238
242
  }
239
- .row-right.plus { color: var(--color-success); }
243
+ .row-right.plus { color: var(--color-success-text); }
244
+ .row-right small { font-size: var(--text-xs); font-weight: var(--weight-regular); } /* the unit after a price */
240
245
  .row-chev {
241
246
  flex: none;
242
247
  color: var(--color-ink-3);
@@ -262,9 +267,9 @@
262
267
  border-radius: 50%;
263
268
  background: currentColor;
264
269
  }
265
- .ui-pill.good { background: var(--color-success-soft); color: var(--color-success); }
266
- .ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger); }
267
- .ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn); }
270
+ .ui-pill.good { background: var(--color-success-soft); color: var(--color-success-text); }
271
+ .ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger-text); }
272
+ .ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
268
273
  .ui-pill.accent { background: var(--color-accent-soft); color: var(--color-accent-text); }
269
274
  .ui-pill.pulse i {
270
275
  animation: ui-pulse 1.6s ease-in-out infinite;
@@ -424,8 +429,8 @@ body.ui-sheet-open { overflow: hidden; }
424
429
  color: var(--color-ink-3);
425
430
  line-height: 1.45;
426
431
  }
427
- .ui-field-hint.bad { color: var(--color-danger); }
428
- .ui-field-hint.good { color: var(--color-success); }
432
+ .ui-field-hint.bad { color: var(--color-danger-text); }
433
+ .ui-field-hint.good { color: var(--color-success-text); }
429
434
  .ui-input {
430
435
  display: block;
431
436
  width: 100%;
@@ -466,7 +471,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
466
471
  display: flex;
467
472
  align-items: center;
468
473
  justify-content: space-between;
469
- min-height: 48px;
474
+ min-height: 52px;
470
475
  border: 1px solid var(--color-line);
471
476
  border-radius: var(--radius-md);
472
477
  background: var(--color-surface);
@@ -474,7 +479,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
474
479
  }
475
480
  .ui-stepper button {
476
481
  width: 52px;
477
- height: 40px;
482
+ height: var(--tap);
478
483
  min-height: 0;
479
484
  padding: 0;
480
485
  display: grid;
@@ -488,15 +493,15 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
488
493
  .ui-stepper button:hover { filter: none; background: var(--color-line); }
489
494
  .ui-stepper button:disabled { opacity: 0.45; cursor: default; }
490
495
  .ui-stepper-value {
491
- font-size: 1.25rem;
496
+ font-size: var(--text-xl);
492
497
  font-weight: var(--weight-semibold);
493
498
  font-variant-numeric: tabular-nums;
494
499
  }
495
500
  .ui-stepper-value small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: var(--weight-regular); }
496
501
  .ui-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
497
502
  .ui-presets button {
498
- min-width: 48px;
499
- min-height: 36px;
503
+ min-width: 52px;
504
+ min-height: var(--tap);
500
505
  padding: 4px 14px;
501
506
  border-radius: var(--radius-pill);
502
507
  background: var(--color-surface);
@@ -548,7 +553,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
548
553
  @keyframes ui-shimmer { to { background-position: -200% 0; } }
549
554
 
550
555
  /* ── app shell (desktop tools) ──────────────────────────────────────────────
551
- * For apps built for the laptop that still open in the Ambasada app: a sidebar, a top bar, the content. Under
556
+ * For apps built for the laptop that still open in the ambasada app: a sidebar, a top bar, the content. Under
552
557
  * 900 px the sidebar becomes a drawer behind the top bar's menu button. Clears the host bar and the safe areas
553
558
  * once: the top bar takes the top, the content the bottom (docs/MINI-APPS.md §15 decision 11). */
554
559
 
package/dist/react.d.ts CHANGED
@@ -87,7 +87,7 @@ export declare function Skeleton({ lines }: {
87
87
  lines?: number;
88
88
  }): import("react").JSX.Element;
89
89
  /**
90
- * Sidebar, top bar, content: for apps built for the laptop that still open in the Ambasada app. Under 900 px the
90
+ * Sidebar, top bar, content: for apps built for the laptop that still open in the ambasada app. Under 900 px the
91
91
  * sidebar is a drawer: `open` shows it, the top bar's menu button and the scrim call `onMenu(next)`.
92
92
  */
93
93
  export declare function Shell({ sidebar, top, children, open, onMenu }: {
package/dist/tokens.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /*
2
- * @ambasada/ui design tokens: the Ambasada look as CSS custom properties.
2
+ * @ambasada/ui design tokens: the ambasada look as CSS custom properties.
3
3
  *
4
- * Source of truth is the Ambasada hub (repo ambasada-landing, hub.ambasada.id / ambasada.pro):
4
+ * Source of truth is the ambasada hub (repo ambasada-landing, hub.ambasada.id / ambasada.pro):
5
5
  * - src/app/globals.css the @theme block ("V5 light + brand red")
6
6
  * - src/app/layout.tsx Inter + JetBrains Mono via next/font
7
7
  * - src/lib/member/card-style.ts wallet pass palettes (Apple / Google Wallet)
8
8
  * - src/app/card/frames.tsx WalletCard, the on-screen copy of the pass
9
- * Light only: the Ambasada app is light, and so are its mini apps (docs/MINI-APPS.md §9).
9
+ * Light only: the ambasada app is light, and so are its mini apps (docs/MINI-APPS.md §9).
10
10
  * Usage and rules: docs/DESIGN-SYSTEM.md. The fonts themselves are in fonts.css.
11
11
  */
12
12
 
@@ -14,7 +14,7 @@
14
14
  color-scheme: light;
15
15
 
16
16
  /* Brand */
17
- --color-accent: #ff002e; /* hub --color-accent, the logo red; "Ambasada red" pass palette rgb(255,0,46) */
17
+ --color-accent: #ff002e; /* hub --color-accent, the logo red; "ambasada red" pass palette rgb(255,0,46) */
18
18
  --color-accent-hover: #e5002a; /* hub .prose-ambasada a:hover */
19
19
  --color-accent-text: #e5002a; /* red for small text on light: #ff002e is 3.8:1 on bg, this is 4.6:1 (AA) */
20
20
  --color-accent-press: #b30020; /* hub tier-theme "Active" gradient end */
@@ -39,6 +39,11 @@
39
39
  --color-warn: #f59e0b; /* hub --color-warn */
40
40
  --color-danger: #dc2626; /* red-600: distinct from the brand red so errors never read as branding */
41
41
  --color-info: #2563eb; /* hub --color-info */
42
+ /* Status colours as text. The plain ones are for dots, icons and fills: as words on white or on their own tint
43
+ * they sit at 3.1 to 4.4:1. These reach AA (4.5:1) on --color-surface and on the matching -soft tint. */
44
+ --color-success-text: #15803d; /* green-700: 5.0:1 on white, 4.8:1 on success-soft */
45
+ --color-warn-text: #b45309; /* amber-700: 5.0:1 on white, 4.8:1 on warn-soft */
46
+ --color-danger-text: #b91c1c; /* red-700: 6.5:1 on white, 5.9:1 on danger-soft */
42
47
  --color-success-soft: #ecfdf3; /* tint of success for notices */
43
48
  --color-warn-soft: #fff8eb; /* tint of warn for notices */
44
49
  --color-danger-soft: #fef2f2; /* tint of danger for notices */
@@ -46,7 +51,7 @@
46
51
  --color-danger-line: #fecaca;
47
52
  --color-success-line: #bbf7d0;
48
53
 
49
- /* The member card (wallet pass, "Ambasada red" palette, src/lib/member/card-style.ts) */
54
+ /* The member card (wallet pass, "ambasada red" palette, src/lib/member/card-style.ts) */
50
55
  --card-bg: #ff002e; /* pass backgroundColor rgb(255,0,46) */
51
56
  --card-fg: #ffffff; /* pass foregroundColor rgb(255,255,255) */
52
57
  --card-label: #ffc8d2; /* pass labelColor rgb(255,200,210) */
@@ -62,7 +67,7 @@
62
67
  --font-native: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* hub .native-shell body */
63
68
 
64
69
  --text-label: 0.6875rem; /* 11px, hub .section-label (mono, uppercase, 0.1em): the mono label, .ui-label */
65
- --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows) */
70
+ --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows): mono uppercase labels only, never sentence text */
66
71
  --text-xs: 0.75rem; /* 12px, hub nav links */
67
72
  --text-sm: 0.875rem; /* 14px, hub body small / buttons */
68
73
  --text-base: 1rem; /* 16px */
@@ -109,7 +114,7 @@
109
114
  --duration: 200ms; /* hub .card transitions */
110
115
 
111
116
  /*
112
- * The Ambasada app's shell (docs/MINI-APPS.md §6). Inside the app, @ambasada/miniapp (applyCssVars, run by
117
+ * The ambasada app's shell (docs/MINI-APPS.md §6). Inside the app, @ambasada/miniapp (applyCssVars, run by
113
118
  * ready()) sets these on <html> from the shell context, which wins over :root. On the web the safe areas
114
119
  * fall back to the browser's own insets (non-zero only with viewport-fit=cover) and there is no host bar.
115
120
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ambasada/ui",
3
- "version": "0.8.19",
4
- "description": "The Ambasada look for mini apps: design tokens (colours, Inter + JetBrains Mono, radii, spacing, safe areas) and a small component set in plain CSS, with optional React wrappers. One stylesheet to <link>.",
3
+ "version": "0.8.21",
4
+ "description": "The ambasada look for mini apps: design tokens (colours, Inter + JetBrains Mono, radii, spacing, safe areas) and a small component set in plain CSS, with optional React wrappers. One stylesheet to <link>.",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "sideEffects": [