You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: practitioner audit pass, North-default kundli, theme docs, mobile polish
Round of practitioner-audit fixes against the canonical Vedic + Western
references plus the blind-test friction report.
- Vedic kundli default flipped to North, tab order North/South/East. Match
matrimonial + Hindi-belt market expectation. South kundli cells now show
house numbers next to the sign abbr; East cells gain a house-number badge
in the same pattern. Centre label case unified to D1 Rashi sentence case.
- Natal chart: angle markers ASC, DSC, MC, IC, PoF, Vtx render at the tip
of the tick arrow. Stellium-aware angular fan-out for tight conjunctions
with a thin leader line back to the planet's true position on the rim.
- Synastry: per-planet tooltip carries degree, sign, retrograde; visible
degree label beside each glyph; person index subscript so the two rings
read in monochrome; Asc1 and Asc2 markers derived from person ascendants.
- Dasha timeline: now indicator inside the active mahadasha bar at the
fractional position; birth dasha balance line; collapsed details for
the active period interpretation.
- Panchang: tithi now shows paksha qualifier; Next transitions section
surfaces tithi, nakshatra, yoga, karana end times.
- Choghadiya: current period highlighted with outline glow and Now badge.
- Ashtakavarga: collapsed 7 heat tokens to a single base hue, opacity
mix per tier. Fixes Sarva totals 20-40 painting solid red and lets text
follow --roxy-fg cleanly in both themes.
- Mobile container queries on natal SVG text and bhinna table cells so
320 px viewports stay readable; bhinna scroll mask hints overflow.
- Base styles: font-variant-emoji: text on :host to keep Unicode planet
glyphs monochrome across macOS, iOS, Android, Windows.
- README quick-start path replaced silent-401 import.meta.env reference
with explicit YOUR_API_KEY; added Vedic kundli vanilla HTML alongside
natal; surfaced the envelope-unwrap rule; theme switcher moved to FAQ.
- AGENTS.md: theming and dark mode table at the top of the rules.
Copy file name to clipboardExpand all lines: AGENTS.md
+27-1Lines changed: 27 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -319,12 +319,38 @@ export default function BirthChartView({ data }: { data: unknown }) {
319
319
}
320
320
```
321
321
322
+
## Theming and dark mode
323
+
324
+
Components react to three signals in priority order. No events to dispatch. No JS bridge to write.
325
+
326
+
| Signal | Where | Effect |
327
+
|---|---|---|
328
+
|`prefers-color-scheme: dark`| OS | Default. Follows user system setting. |
329
+
|`data-theme="light"` or `data-theme="dark"`|`<html>` / `<body>` / any ancestor / the component itself | Wins over OS. Per-element override scope works. |
330
+
|`.dark` class | Any ancestor | Equivalent to `data-theme="dark"`. Use when the host stack already ships a `.dark` toggle (Tailwind, shadcn). |
331
+
332
+
To toggle at runtime:
333
+
334
+
```ts
335
+
document.documentElement.dataset.theme='dark'; // or 'light'
336
+
```
337
+
338
+
That single line re-themes every Roxy UI component on the page. Persist user choice in `localStorage` from your own code; the library does not own preferences.
Every visible aspect of the chart is driven by `--roxy-*` CSS custom properties on `:host`. Override any token on `:root`, on `:host`, or per element. Do not write Tailwind utility classes inside the components; the Shadow DOM boundary stops them at the door.
347
+
322
348
## Rules every agent must follow
323
349
324
350
- Always call `/location/search` first before any chart endpoint that takes latitude, longitude, or timezone. Use `<roxy-location-search>` for the input UI.
325
351
- Pass the response object directly. Components are stateless; they do not fetch internally except for `<roxy-location-search>`, `<roxy-endpoint-form>`, and the widgets auto-mount script.
326
352
- Use the typed SDK from `@roxyapi/sdk` so prop shapes match the spec automatically.
327
-
- Theming is CSS custom properties on `:root` or per element. Do not write Tailwind classes inside the components; the shadow DOM ignores them.
353
+
- Theming is CSS custom properties on `:root` or per element. Switch light and dark via `data-theme` on any ancestor (see the table above). Do not write Tailwind classes inside the components; the shadow DOM ignores them.
328
354
- Honor reduced motion. The library already respects `prefers-reduced-motion: reduce` and the `--roxy-motion-duration` variable.
329
355
- A11y violations are CI failures. Do not paste over `role` or `aria-*` attributes; the components emit them correctly already.
330
356
- Component types come from the OpenAPI spec via `@hey-api/openapi-ts`. Do not redefine response shapes locally; if a field is missing, fix the spec, regenerate, propagate.
@@ -76,16 +76,39 @@ Light, dark, your brand. Override one CSS variable and every component updates.
76
76
}
77
77
```
78
78
79
-
Pick a tone, set the vars, every chart and card follows. Full token reference at [THEMING.md](https://github.com/RoxyAPI/ui/blob/main/packages/ui/THEMING.md). Live tweaker on the [demo site](https://roxyapi.github.io/ui/).
79
+
Pick a tone, set the vars, every chart and card follows. Full token reference at [THEMING.md](https://github.com/RoxyAPI/ui/blob/main/packages/ui/THEMING.md). Live tweaker on the [demo site](https://roxyapi.github.io/ui/). See the [FAQ](#faq) for switching between light and dark at runtime.
80
80
81
-
## Gallery (chart-heavy components)
81
+
## Gallery
82
+
83
+
Every chart, table, and card adapts to light and dark automatically. Hover any image on GitHub to inspect tooltips.
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/natal-chart-light.png"alt="Natal chart wheel with 14 planets, real house cusps, IC DC Part of Fortune Vertex, aspect lines">
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-light.png"alt="Synastry dual-wheel with inter-aspects">
98
+
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-light.png"alt="Synastry dual-wheel with inter-aspects table">
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/vedic-kundli-light.png"alt="Vedic kundli D1 rashi chart, South Indian style with Lagna marker">
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-light.png"alt="Vimshottari mahadasha and antardasha timeline with progress bars">
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/shadbala-table-light.png"alt="Six-fold planetary strength bars with rupas and adequacy badges">
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-light.png"alt="Tarot spread with three-card layout and reading">
158
+
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-light.png"alt="Three-card tarot spread with position labels and reading">
<imgsrc="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/numerology-card-light.png"alt="Life path number card with archetype, keywords, and interpretation">
123
179
</picture>
124
180
</td>
125
181
</tr>
@@ -138,7 +194,7 @@ Tables, cards, forms, and helper components in the [live demo](https://roxyapi.g
138
194
139
195
## Start with one component
140
196
141
-
Vanilla HTML. Three lines. No build step.
197
+
Vanilla HTML. No build step. Replace `YOUR_API_KEY` with a publishable key from <https://roxyapi.com/account>.
142
198
143
199
```html
144
200
<script
@@ -149,15 +205,31 @@ Vanilla HTML. Three lines. No build step.
Then add the kundli, the panchang, the dasha timeline, the tarot spread.
216
+
> **Unwrap `data` before passing to the component.** The SDK returns `{ data, error, request, response }`. Pass the envelope and the chart renders `[object Object]`. This is the most common integration bug.
217
+
218
+
Want a Vedic kundli instead? Same shape, different SDK method:
Persist the choice in `localStorage` from your own code; the components do not own user preferences. Per-element overrides also work, so one chart can run in dark on an otherwise light page:
0 commit comments