@roxyapi/ui 0.3.1 → 0.4.1

package/src/utils/kundli-styles.ts

@@ -0,0 +1,124 @@
+import { css } from 'lit';
+
+/**
+ * Shared CSS for every kundli renderer (`<roxy-vedic-kundli>`,
+ * `<roxy-divisional-chart>`, and any future `<roxy-navamsa-chart>`). Centralises
+ * the SVG layout (responsive viewBox + aspect ratio), the line/text classes,
+ * and the Lagna highlight so the three components stay visually identical.
+ *
+ * @remarks Font sizes are written in viewBox user units (the chart is 400×400
+ * inside a 1:1 aspect-ratio container), so they scale linearly from a 320px
+ * phone surface to a wall projector without raster loss. The Lagna palette
+ * tracks `--roxy-accent` so host themes flow through unchanged.
+ */
+export const kundliStyles = css`
+	.wrap {
+		display: grid;
+		gap: var(--roxy-space-md, 1rem);
+	}
+	.header {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--roxy-space-sm, 0.5rem);
+	}
+	.title {
+		font-size: var(--roxy-text-lg, 1.125rem);
+		font-weight: var(--roxy-weight-bold, 600);
+		margin: 0;
+	}
+	.kundli-tablist {
+		display: inline-flex;
+		gap: 2px;
+		border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+	}
+	.kundli-tab {
+		padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+		font-size: var(--roxy-text-sm, 0.875rem);
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		margin-bottom: -2px;
+		cursor: pointer;
+		color: var(--roxy-muted, #71717a);
+		font-family: inherit;
+		transition: color var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, ease);
+	}
+	.kundli-tab[aria-selected='true'] {
+		color: var(--roxy-accent-fg, #b45309);
+		border-bottom-color: var(--roxy-accent, #f59e0b);
+		font-weight: var(--roxy-weight-bold, 600);
+	}
+	.kundli-tab:hover:not([aria-selected='true']) {
+		color: var(--roxy-fg, #0a0a0a);
+	}
+	.kundli-tab:focus-visible {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
+	svg {
+		display: block;
+		width: 100%;
+		max-width: 560px;
+		aspect-ratio: 1 / 1;
+		height: auto;
+		margin: 0 auto;
+	}
+	.line {
+		fill: transparent;
+		stroke: var(--roxy-border, #d4d4d8);
+	}
+	.sign-text {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 11px;
+		font-weight: 500;
+		font-family: var(--roxy-font-sans);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.rashi-num {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 12px;
+		font-weight: 500;
+		font-family: var(--roxy-font-sans);
+	}
+	.house-num {
+		fill: var(--roxy-accent-fg, #b45309);
+		font-size: 11px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+		opacity: 0.85;
+	}
+	.planet-text {
+		fill: var(--roxy-fg, #0a0a0a);
+		font-size: 13px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+	}
+	.centre-label {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 14px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+		letter-spacing: 0.02em;
+	}
+	.lagna-marker {
+		fill: var(--roxy-accent-fg, #b45309);
+		font-size: 10px;
+		font-weight: 700;
+		font-family: var(--roxy-font-sans);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+	.lagna-bg {
+		fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+	}
+	.lagna-slash {
+		stroke: var(--roxy-accent, #f59e0b);
+		stroke-linecap: round;
+		opacity: 0.7;
+	}
+`;

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by scripts/sync-version.ts. Do not edit.
-export const ROXY_UI_VERSION = '0.3.1';
+export const ROXY_UI_VERSION = '0.4.1';