@blaaiz/docs-core 0.1.0

package/styles/auth.css

@@ -0,0 +1,462 @@
+/*
+ * @blaaiz/docs-core — sign-in and error screens.
+ *
+ * Standalone screens that render outside the fumadocs shell (the sign-in gate,
+ * 404, and runtime errors). Import once in the site's global stylesheet:
+ *   @import '@blaaiz/docs-core/styles/auth.css';
+ *
+ * Colours come from the framework's --color-fd-* tokens (set by buildThemeCss +
+ * the fumadocs preset), so the brand flows through with nothing hardcoded.
+ */
+
+/* ── Shared canvas ─────────────────────────────────────────────────────── */
+
+.auth-screen,
+.error-screen {
+  position: relative;
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: var(--color-fd-background);
+  overflow: hidden;
+}
+
+/* A soft brand-tinted glow, top-centre, and a faint grid. Purely decorative. */
+.auth-ambient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    60% 50% at 50% -10%,
+    color-mix(in oklab, var(--color-fd-primary) 22%, transparent),
+    transparent 70%
+  );
+}
+
+.auth-ambient::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(
+      to right,
+      color-mix(in oklab, var(--color-fd-border) 55%, transparent) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--color-fd-border) 55%, transparent) 1px,
+      transparent 1px
+    );
+  background-size: 44px 44px;
+  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 75%);
+  mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 75%);
+  opacity: 0.5;
+}
+
+/* ── Card ──────────────────────────────────────────────────────────────── */
+
+.auth-card,
+.error-card {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 400px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 18px;
+  padding: 32px;
+  background: color-mix(in oklab, var(--color-fd-card) 92%, transparent);
+  backdrop-filter: blur(8px);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 12px 32px -12px rgba(0, 0, 0, 0.18);
+}
+
+.error-card {
+  text-align: center;
+  max-width: 440px;
+}
+
+/* ── Brand ─────────────────────────────────────────────────────────────── */
+
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: -0.01em;
+  color: var(--color-fd-foreground);
+}
+
+.auth-brand img {
+  height: 24px;
+  width: auto;
+}
+
+.auth-brand .auth-logo-dark {
+  display: none;
+}
+
+.dark .auth-brand .auth-logo-light {
+  display: none;
+}
+
+.dark .auth-brand .auth-logo-dark {
+  display: inline;
+}
+
+.auth-dot {
+  width: 22px;
+  height: 22px;
+  border-radius: 7px;
+  display: inline-grid;
+  place-items: center;
+  color: #fff;
+  background: var(--color-fd-primary);
+  box-shadow: 0 2px 8px -2px color-mix(in oklab, var(--color-fd-primary) 60%, transparent);
+}
+
+/* ── Copy ──────────────────────────────────────────────────────────────── */
+
+.auth-title {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 22px 0 6px;
+  color: var(--color-fd-foreground);
+}
+
+.auth-sub {
+  color: var(--color-fd-muted-foreground);
+  font-size: 14px;
+  line-height: 1.55;
+  margin: 0 0 22px;
+}
+
+.auth-sub b {
+  color: var(--color-fd-foreground);
+  font-weight: 600;
+}
+
+/* ── Identity chip (secret step: "signing in as …") ────────────────────── */
+
+.auth-identity {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 18px;
+  padding: 9px 12px;
+  border-radius: 11px;
+  border: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-foreground) 3%, var(--color-fd-card));
+  font-size: 13.5px;
+}
+
+.auth-identity svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--color-fd-muted-foreground);
+}
+
+.auth-identity-email {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-fd-foreground);
+  font-weight: 500;
+}
+
+.auth-change {
+  flex: none;
+  font-size: 12.5px;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--color-fd-primary);
+}
+
+.auth-change:hover {
+  text-decoration: underline;
+}
+
+/* ── Inline error banner ───────────────────────────────────────────────── */
+
+.auth-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  margin: 0 0 20px;
+  padding: 11px 13px;
+  border-radius: 11px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #b42318;
+  background: color-mix(in oklab, #e5484d 12%, var(--color-fd-card));
+  border: 1px solid color-mix(in oklab, #e5484d 30%, transparent);
+}
+
+.dark .auth-error {
+  color: #ff9a94;
+}
+
+.auth-error svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+}
+
+/* ── Form ──────────────────────────────────────────────────────────────── */
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.auth-label {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.auth-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.auth-field svg {
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
+  color: var(--color-fd-muted-foreground);
+  pointer-events: none;
+}
+
+.auth-input {
+  width: 100%;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 10px;
+  padding: 11px 12px 11px 38px;
+  font-size: 14px;
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-background);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.auth-input::placeholder {
+  color: var(--color-fd-muted-foreground);
+}
+
+.auth-submit {
+  margin-top: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground, #fff);
+  border: none;
+  border-radius: 10px;
+  padding: 11px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    filter 0.15s ease,
+    transform 0.05s ease;
+}
+
+.auth-submit:hover {
+  filter: brightness(1.06);
+}
+
+.auth-submit:active {
+  transform: translateY(0.5px);
+}
+
+/* ── Divider ───────────────────────────────────────────────────────────── */
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 18px 0;
+  color: var(--color-fd-muted-foreground);
+  font-size: 12px;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-fd-border);
+}
+
+/* ── Google ────────────────────────────────────────────────────────────── */
+
+.auth-google {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 10px;
+  padding: 11px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-card);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.auth-google:hover {
+  border-color: color-mix(in oklab, var(--color-fd-foreground) 24%, var(--color-fd-border));
+  background: color-mix(in oklab, var(--color-fd-foreground) 3%, var(--color-fd-card));
+}
+
+.auth-google svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ── Footer note ───────────────────────────────────────────────────────── */
+
+.auth-foot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin: 22px 0 0;
+  font-size: 12px;
+  color: var(--color-fd-muted-foreground);
+}
+
+.auth-foot svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* ── Error screen ──────────────────────────────────────────────────────── */
+
+.error-glyph {
+  display: inline-grid;
+  place-items: center;
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 4px;
+  border-radius: 16px;
+  color: var(--color-fd-primary);
+  background: color-mix(in oklab, var(--color-fd-primary) 12%, var(--color-fd-card));
+  border: 1px solid color-mix(in oklab, var(--color-fd-primary) 26%, transparent);
+}
+
+.error-glyph svg {
+  width: 28px;
+  height: 28px;
+}
+
+.error-glyph[data-kind='forbidden'] {
+  color: #d97706;
+  background: color-mix(in oklab, #d97706 12%, var(--color-fd-card));
+  border-color: color-mix(in oklab, #d97706 26%, transparent);
+}
+
+.error-glyph[data-kind='server'],
+.error-glyph[data-kind='offline'] {
+  color: #dc2626;
+  background: color-mix(in oklab, #dc2626 11%, var(--color-fd-card));
+  border-color: color-mix(in oklab, #dc2626 26%, transparent);
+}
+
+.error-code {
+  margin: 16px 0 0;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-fd-muted-foreground);
+}
+
+.error-title {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 8px 0 0;
+  color: var(--color-fd-foreground);
+}
+
+.error-desc {
+  margin: 10px auto 0;
+  max-width: 34ch;
+  font-size: 14.5px;
+  line-height: 1.6;
+  color: var(--color-fd-muted-foreground);
+}
+
+.error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.error-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  white-space: nowrap;
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition:
+    filter 0.15s ease,
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.error-btn svg {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+
+.error-btn-primary {
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground, #fff);
+}
+
+.error-btn-primary:hover {
+  filter: brightness(1.06);
+}
+
+.error-btn-ghost {
+  background: transparent;
+  color: var(--color-fd-foreground);
+  border-color: var(--color-fd-border);
+}
+
+.error-btn-ghost:hover {
+  border-color: color-mix(in oklab, var(--color-fd-foreground) 24%, var(--color-fd-border));
+  background: color-mix(in oklab, var(--color-fd-foreground) 3%, var(--color-fd-card));
+}

package/styles/docs.css

@@ -0,0 +1,247 @@
+/*
+ * @blaaiz/docs-core — base docs styling.
+ *
+ * Import after the fumadocs stylesheets:
+ *   @import '@blaaiz/docs-core/styles/docs.css';
+ *
+ * Brand colours come from the site's docs.config (see buildThemeCss); nothing
+ * here hardcodes a palette.
+ */
+
+/* Widen the layout so the sidebar sits flush-left; taller, breathable nav. */
+:root {
+  --fd-layout-width: 1920px;
+  --fd-nav-height: 4.25rem;
+}
+
+/* House preference: no visible focus ring. Tab order and :focus behaviour are
+   untouched — only the outline and the Tailwind ring (a box-shadow) are hidden.
+   Real box-shadows survive because only the ring variables are zeroed. */
+:focus,
+:focus-visible {
+  outline: none !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-offset-shadow: 0 0 #0000 !important;
+  --tw-ring-color: transparent !important;
+}
+
+/* More inward breathing room for the main content. */
+@media (min-width: 768px) {
+  #nd-page {
+    padding-inline: 4rem;
+  }
+}
+
+/* Center the page column on ultra-wide screens. Fumadocs' notebook layout caps
+   a page's children (900px, or 1285px on `full` pages such as the API
+   reference — see its page container slot) but leaves them left-aligned in the
+   grid area, so a wide viewport piles the slack on the right. Cap the article
+   at the same width plus our 4rem padding per side and center it: children
+   fill it edge to edge and everything stays aligned, including the fixed API
+   rail, which follows its in-flow spacer. Re-check the two width tokens on
+   fumadocs-ui upgrades. */
+#nd-page {
+  width: 100%;
+  max-width: calc(900px + 8rem);
+  justify-self: center;
+}
+
+/* Full-width pages — fumadocs marks them with the `*:max-w-[1285px]` class. */
+#nd-page[class*='1285'] {
+  max-width: calc(1285px + 8rem);
+}
+
+/* Headings stay bright while body text stays subtle. */
+#nd-page :is(h1, h2, h3, h4) {
+  color: #18181b;
+}
+
+.dark #nd-page :is(h1, h2, h3, h4) {
+  color: #f4f4f6;
+}
+
+/* Wider, more prominent search in the top bar. */
+button:has(kbd) {
+  width: 100%;
+  max-width: min(340px, 40vw);
+}
+
+/* Taller top bar. */
+#nd-subnav > div:first-child {
+  height: 4.5rem;
+  padding-inline: 1.5rem;
+}
+
+/* Prev/next footer, clearly separated from the page. */
+#nd-page .grid:has(> a[class*='rounded-lg']) {
+  margin-top: 4rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-fd-border);
+}
+
+#nd-page a[class*='rounded-lg'][class*='p-4'] {
+  padding: 1rem 1.25rem;
+  border-radius: 0.75rem;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+#nd-page a[class*='rounded-lg'][class*='p-4']:hover {
+  border-color: var(--color-fd-primary);
+  background: color-mix(in oklab, var(--color-fd-primary) 7%, transparent);
+}
+
+/* Breathing room between the doc column and the code rail. */
+#nd-page div[class*='gap-x-6'] {
+  column-gap: 3rem;
+}
+
+/* Code blocks — shared chrome. */
+#nd-page figure.shiki {
+  position: relative;
+  border-radius: 0.85rem;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+}
+
+.dark #nd-page figure.shiki {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+#nd-page figure.shiki pre {
+  line-height: 2;
+}
+
+#nd-page figure.shiki [role='region'] {
+  padding-inline: 0.25rem;
+}
+
+/* Guide code blocks: the window-dots header strip. The API rail panels opt out
+   in api-reference.css — rail location is the reliable variant marker. */
+#nd-page figure.shiki {
+  padding-top: 2.75rem;
+}
+
+#nd-page figure.shiki::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 2.75rem;
+  background: color-mix(in oklab, var(--color-fd-card) 88%, black);
+  border-bottom: 1px solid var(--color-fd-border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+#nd-page figure.shiki::after {
+  content: '';
+  position: absolute;
+  top: 1.05rem;
+  left: 1rem;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #ff5f57;
+  box-shadow:
+    18px 0 0 #febc2e,
+    36px 0 0 #28c840;
+}
+
+/* Copy button sits in the header strip, vertically centered. */
+#nd-page figure.shiki > button {
+  top: 1.375rem;
+  right: 0.7rem;
+  transform: translateY(-50%);
+}
+
+/* Mintlify-style callouts: the whole box is tinted with the type colour. */
+.cl {
+  display: flex;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid;
+  border-radius: 12px;
+  margin: 20px 0;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.cl-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.cl-body {
+  min-width: 0;
+}
+
+.cl-body > :first-child {
+  margin-top: 0;
+}
+
+.cl-body > :last-child {
+  margin-bottom: 0;
+}
+
+.cl-note,
+.cl-info {
+  background: rgba(76, 99, 245, 0.08);
+  border-color: rgba(76, 99, 245, 0.35);
+  color: #3547c4;
+}
+
+.cl-tip {
+  background: rgba(22, 163, 74, 0.09);
+  border-color: rgba(22, 163, 74, 0.35);
+  color: #15803d;
+}
+
+.cl-warning,
+.cl-danger {
+  background: rgba(217, 119, 6, 0.1);
+  border-color: rgba(217, 119, 6, 0.38);
+  color: #b45309;
+}
+
+.dark .cl-note,
+.dark .cl-info {
+  background: rgba(124, 140, 255, 0.09);
+  border-color: rgba(124, 140, 255, 0.3);
+  color: #b7c0ff;
+}
+
+.dark .cl-tip {
+  background: rgba(34, 197, 94, 0.09);
+  border-color: rgba(34, 197, 94, 0.28);
+  color: #6ee7a0;
+}
+
+.dark .cl-warning,
+.dark .cl-danger {
+  background: rgba(245, 158, 11, 0.1);
+  border-color: rgba(245, 158, 11, 0.3);
+  color: #f2c261;
+}
+
+/* No macOS rubber-band bounce; grayscale antialiasing (as Mintlify). */
+html {
+  overscroll-behavior: none;
+}
+
+body {
+  overscroll-behavior: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Title row with the Copy-page action pinned right (the button styles itself). */
+.page-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.page-head > h1 {
+  margin: 0;
+}