@ambasada/ui 0.8.20 → 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 +8 -8
  3. package/dist/components.css +1 -1
  4. package/dist/react.d.ts +1 -1
  5. package/dist/tokens.css +6 -6
  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.20: 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 */
@@ -92,7 +92,7 @@
92
92
  --color-danger-line: #fecaca;
93
93
  --color-success-line: #bbf7d0;
94
94
 
95
- /* 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) */
96
96
  --card-bg: #ff002e; /* pass backgroundColor rgb(255,0,46) */
97
97
  --card-fg: #ffffff; /* pass foregroundColor rgb(255,255,255) */
98
98
  --card-label: #ffc8d2; /* pass labelColor rgb(255,200,210) */
@@ -155,7 +155,7 @@
155
155
  --duration: 200ms; /* hub .card transitions */
156
156
 
157
157
  /*
158
- * 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
159
159
  * ready()) sets these on <html> from the shell context, which wins over :root. On the web the safe areas
160
160
  * fall back to the browser's own insets (non-zero only with viewport-fit=cover) and there is no host bar.
161
161
  */
@@ -732,7 +732,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
732
732
  @keyframes ui-shimmer { to { background-position: -200% 0; } }
733
733
 
734
734
  /* ── app shell (desktop tools) ──────────────────────────────────────────────
735
- * 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
736
736
  * 900 px the sidebar becomes a drawer behind the top bar's menu button. Clears the host bar and the safe areas
737
737
  * once: the top bar takes the top, the content the bottom (docs/MINI-APPS.md §15 decision 11). */
738
738
 
package/dist/components.css CHANGED
@@ -553,7 +553,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
553
553
  @keyframes ui-shimmer { to { background-position: -200% 0; } }
554
554
 
555
555
  /* ── app shell (desktop tools) ──────────────────────────────────────────────
556
- * 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
557
557
  * 900 px the sidebar becomes a drawer behind the top bar's menu button. Clears the host bar and the safe areas
558
558
  * once: the top bar takes the top, the content the bottom (docs/MINI-APPS.md §15 decision 11). */
559
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 */
@@ -51,7 +51,7 @@
51
51
  --color-danger-line: #fecaca;
52
52
  --color-success-line: #bbf7d0;
53
53
 
54
- /* 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) */
55
55
  --card-bg: #ff002e; /* pass backgroundColor rgb(255,0,46) */
56
56
  --card-fg: #ffffff; /* pass foregroundColor rgb(255,255,255) */
57
57
  --card-label: #ffc8d2; /* pass labelColor rgb(255,200,210) */
@@ -114,7 +114,7 @@
114
114
  --duration: 200ms; /* hub .card transitions */
115
115
 
116
116
  /*
117
- * 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
118
118
  * ready()) sets these on <html> from the shell context, which wins over :root. On the web the safe areas
119
119
  * fall back to the browser's own insets (non-zero only with viewport-fit=cover) and there is no host bar.
120
120
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ambasada/ui",
3
- "version": "0.8.20",
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": [