@rxova/astro-ui 0.0.0 → 0.2.0

package/src/styles/mermaid.css

@@ -0,0 +1,75 @@
+/**
+ * Theme-aware mermaid diagrams for `rehype-mermaid`'s build-time SVG, which bakes in a light palette.
+ * Mermaid scopes its own <style> by id, which outranks any class rule, so the colours here need !important.
+ */
+
+.sl-markdown-content svg[aria-roledescription] {
+  max-width: 100%;
+  height: auto;
+  /* Mermaid sizes the viewBox to the diagram; let it breathe on the page. */
+  margin-block: 1.5rem;
+}
+
+/* Node and cluster surfaces. */
+.sl-markdown-content svg[aria-roledescription] .node rect,
+.sl-markdown-content svg[aria-roledescription] .node circle,
+.sl-markdown-content svg[aria-roledescription] .node polygon,
+.sl-markdown-content svg[aria-roledescription] .node path,
+.sl-markdown-content svg[aria-roledescription] .label-container {
+  fill: var(--rx-card) !important;
+  stroke: var(--rx-rule-strong) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription] .cluster rect {
+  fill: color-mix(in srgb, var(--rx-tag-bg) 60%, transparent) !important;
+  stroke: var(--rx-rule) !important;
+}
+
+/* All text: labels, cluster titles, edge labels, actor names. */
+.sl-markdown-content svg[aria-roledescription] text,
+.sl-markdown-content svg[aria-roledescription] .nodeLabel,
+.sl-markdown-content svg[aria-roledescription] .edgeLabel,
+.sl-markdown-content svg[aria-roledescription] .cluster-label,
+.sl-markdown-content svg[aria-roledescription] .messageText,
+.sl-markdown-content svg[aria-roledescription] .loopText {
+  fill: var(--rx-fg) !important;
+  color: var(--rx-fg) !important;
+}
+
+/* Edge labels sit on an opaque plate; mermaid renders them as HTML in a <foreignObject>, so cover both. */
+.sl-markdown-content svg[aria-roledescription] .edgeLabel,
+.sl-markdown-content svg[aria-roledescription] .edgeLabel *,
+.sl-markdown-content svg[aria-roledescription] .labelBkg {
+  background-color: var(--rx-bg) !important;
+  color: var(--rx-fg) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription] .edgeLabel rect,
+.sl-markdown-content svg[aria-roledescription] .labelBkg rect {
+  fill: var(--rx-bg) !important;
+}
+
+/* Connectors. */
+.sl-markdown-content svg[aria-roledescription] .edgePath path,
+.sl-markdown-content svg[aria-roledescription] .flowchart-link,
+.sl-markdown-content svg[aria-roledescription] line,
+.sl-markdown-content svg[aria-roledescription] .messageLine0,
+.sl-markdown-content svg[aria-roledescription] .messageLine1 {
+  stroke: var(--rx-faint) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription] marker path,
+.sl-markdown-content svg[aria-roledescription] .arrowMarkerPath {
+  fill: var(--rx-faint) !important;
+  stroke: var(--rx-faint) !important;
+}
+
+/* Sequence-diagram participant boxes and lifelines. */
+.sl-markdown-content svg[aria-roledescription='sequence'] .actor {
+  fill: var(--rx-card) !important;
+  stroke: var(--rx-rule-strong) !important;
+}
+
+.sl-markdown-content svg[aria-roledescription='sequence'] .actor-line {
+  stroke: var(--rx-rule-strong) !important;
+}

package/src/styles/starlight.css

@@ -0,0 +1,162 @@
+/**
+ * Maps rxova tokens onto Starlight's theme variables; load via `customCss` so it wins without
+ * !important. One block covers both modes because every --rx-* neutral already flips.
+ */
+
+@import '@rxova/brand/tokens.css';
+@import './footer.css';
+
+:root {
+  /* Accent. */
+  --sl-color-accent: var(--rx-primary);
+  --sl-color-accent-low: color-mix(in srgb, var(--rx-primary) 20%, var(--rx-bg));
+  --sl-color-accent-high: var(--rx-primary-lightest);
+  --sl-color-text-accent: var(--rx-primary);
+
+  /* Neutral ladder. "white" and "black" are Starlight's names for the two
+     contrast extremes, not literal colours — they invert with the theme. */
+  --sl-color-white: var(--rx-fg);
+  --sl-color-gray-1: var(--rx-fg);
+  --sl-color-gray-2: var(--rx-muted);
+  --sl-color-gray-3: var(--rx-faint);
+  --sl-color-gray-4: var(--rx-rule-strong);
+  --sl-color-gray-5: var(--rx-rule);
+  --sl-color-gray-6: var(--rx-tag-bg);
+  --sl-color-gray-7: var(--rx-card);
+  --sl-color-black: var(--rx-bg);
+
+  /* Surfaces. Nav and sidebar sit flush with the page — the hairline does the
+     separating, not a fill change. */
+  --sl-color-bg: var(--rx-bg);
+  --sl-color-bg-nav: var(--rx-bg);
+  --sl-color-bg-sidebar: var(--rx-bg);
+  --sl-color-bg-inline-code: var(--rx-tag-bg);
+  --sl-color-bg-badge: var(--rx-tag-bg);
+
+  --sl-color-hairline: var(--rx-rule);
+  --sl-color-hairline-light: var(--rx-rule);
+  --sl-color-hairline-shade: var(--rx-rule-strong);
+  --sl-color-backdrop-overlay: color-mix(in srgb, var(--rx-bg) 80%, transparent);
+
+  /* Type. */
+  --sl-font: var(--rx-font-sans);
+  --sl-font-mono: var(--rx-font-mono);
+
+  --sl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+  --sl-shadow-md: 0 4px 12px -4px rgb(0 0 0 / 0.12);
+  --sl-shadow-lg: var(--rx-shadow-soft);
+}
+
+/* Starlight ships a slightly cooler focus ring; align it with the accent. */
+:root {
+  --sl-color-focus: var(--rx-primary);
+}
+
+/* --- Shared chrome ------------------------------------------------------- */
+
+/* The gradient, the brand's only chroma, gets exactly two placements: the header hairline and
+   the switcher's current-project dot. */
+.site-title::after {
+  content: none;
+}
+
+header.header {
+  border-bottom: 1px solid var(--sl-color-hairline);
+  background: var(--sl-color-bg-nav);
+}
+
+/* In a schema-2 page bundle rxova-website renders the umbrella header outside `.page`; keep
+   Starlight's sticky docs bar below it. */
+html[data-rxova-shell] {
+  --rx-shell-header-height: 3.5rem;
+}
+
+html[data-rxova-shell] .page > header.header {
+  inset-block-start: var(--rx-shell-header-height);
+}
+
+html[data-rxova-shell] .sidebar-pane {
+  inset-block-start: calc(var(--rx-shell-header-height) + var(--sl-nav-height));
+}
+
+html[data-rxova-shell] mobile-starlight-toc nav {
+  top: calc(var(--rx-shell-header-height) + var(--sl-nav-height) - 1px);
+}
+
+/* Starlight 0.42 dropped the <starlight-menu-button> wrapper for a bare
+   button.sl-menu-button; the peer range still covers the older markup. */
+html[data-rxova-shell] starlight-menu-button button,
+html[data-rxova-shell] .sl-menu-button {
+  top: calc(
+    var(--rx-shell-header-height) + (var(--sl-nav-height) - var(--sl-menu-button-size)) / 2
+  );
+}
+
+@media (min-width: 72rem) {
+  html[data-rxova-shell] .right-sidebar {
+    top: var(--rx-shell-header-height);
+    height: calc(100vh - var(--rx-shell-header-height));
+  }
+}
+
+@media (max-width: 34rem) {
+  html[data-rxova-shell] {
+    --rx-shell-header-height: 3.25rem;
+  }
+}
+
+/* Site title: the rxova mark sits beside the project wordmark. */
+.rx-site-title {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--rx-fg);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  text-decoration: none;
+}
+
+.rx-site-title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rx-site-title a:hover {
+  color: var(--rx-fg);
+}
+
+.rx-site-title img {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--rx-radius-sm);
+}
+
+.rx-site-title__sep {
+  width: 1px;
+  height: 1.1rem;
+  background: var(--rx-rule-strong);
+}
+
+.rx-site-title__project {
+  color: var(--rx-muted);
+  font-weight: 500;
+}
+
+/* Project switcher. */
+.rx-switcher {
+  position: relative;
+}
+
+.rx-switcher__current::before {
+  content: '';
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-inline-end: 0.5rem;
+  border-radius: var(--rx-radius-pill);
+  background: var(--rx-gradient);
+}
+
+/* --- Footer -------------------------------------------------------------- */
+
+/* Footer styles live in footer.css (imported above) because /blog and /updates need them too. */