radiant-docs 0.1.46 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/package-lock.json

@@ -17,6 +17,7 @@
         "@astrojs/sitemap": "^3.7.2",
         "@aws-sdk/client-s3": "^3.964.0",
         "@fontsource/google-sans-flex": "^5.2.2",
+        "@iconify-json/fluent": "^1.2.47",
         "@iconify-json/lucide": "^1.2.79",
         "@iconify-json/simple-icons": "^1.2.69",
         "@iconify/react": "^6.0.2",
@@ -1995,6 +1996,15 @@
         "node": ">=10.10.0"
       }
     },
+    "node_modules/@iconify-json/fluent": {
+      "version": "1.2.47",
+      "resolved": "https://registry.npmjs.org/@iconify-json/fluent/-/fluent-1.2.47.tgz",
+      "integrity": "sha512-YA9pCYNW3bqXMD1rMIkK0vqLK90UyE63hfI1cB2sQwGAbEFhi+VUz5mvcXYfb7bl5R8N5sLZNI2Kr0Q3Yo9M4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/lucide": {
       "version": "1.2.79",
       "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.79.tgz",

package/template/package.json

@@ -21,6 +21,7 @@
     "@astrojs/sitemap": "^3.7.2",
     "@aws-sdk/client-s3": "^3.964.0",
     "@fontsource/google-sans-flex": "^5.2.2",
+    "@iconify-json/fluent": "^1.2.47",
     "@iconify-json/lucide": "^1.2.79",
     "@iconify-json/simple-icons": "^1.2.69",
     "@iconify/react": "^6.0.2",

package/template/src/components/user/Callout.astro

@@ -1,112 +1,167 @@
 ---
 import Icon from "../ui/Icon.astro";
-import warningIcon from "../../assets/icons/warning.svg?url";
-import infoIcon from "../../assets/icons/info.svg?url";
-import lightbulbIcon from "../../assets/icons/lightbulb.svg?url";
-import dangerIcon from "../../assets/icons/danger.svg?url";
-import successIcon from "../../assets/icons/check.svg?url";
 import { validateProps } from "../../lib/component-error";
 
 type CalloutType = "warning" | "info" | "tip" | "danger" | "success";
 
 interface Props {
   type?: CalloutType;
-  title?: string;
-  icon?: string;
+  title?: string | false;
+  icon?: string | false;
+  accent?: boolean;
   color?: string;
 }
 
 const typeDefaults: Record<
   CalloutType,
-  { icon: string; color: string; iconColor: string; title: string }
+  { icon: string; color: string; title: string }
 > = {
   warning: {
-    icon: warningIcon,
-    color: "bg-amber-500",
-    iconColor: "text-amber-500 dark:text-amber-400",
+    icon: "fluent:warning-16-filled",
+    color: "#FF990A",
     title: "Warning",
   },
   info: {
-    icon: infoIcon,
-    color: "bg-sky-600/80",
-    iconColor: "text-sky-600/80 dark:text-sky-400",
+    icon: "fluent:info-16-filled",
+    color: "#5589C5",
     title: "Info",
   },
   tip: {
-    icon: lightbulbIcon,
-    color: "bg-yellow-500",
-    iconColor: "text-yellow-500 dark:text-yellow-400",
+    icon: "fluent:lightbulb-filament-24-filled",
+    color: "#FFB400",
     title: "Tip",
   },
   danger: {
-    icon: dangerIcon,
-    color: "bg-red-600",
-    iconColor: "text-red-600 dark:text-red-400",
+    icon: "fluent:diamond-dismiss-24-filled",
+    color: "#E5484D",
     title: "Danger",
   },
   success: {
-    icon: successIcon,
-    color: "bg-green-600",
-    iconColor: "text-green-600 dark:text-green-400",
+    icon: "fluent:checkmark-starburst-24-filled",
+    color: "#46A758",
     title: "Success",
   },
 };
 
-const { type = "info", title, icon, color } = Astro.props;
+const rawProps = Astro.props as { icon?: unknown; title?: unknown };
+const rawIcon = rawProps.icon;
+const rawTitle = rawProps.title;
+const { type = "info", title, icon, accent = true, color } = Astro.props;
 
 validateProps(
   "Callout",
-  { type, title, icon, color },
+  { type, title, icon, accent, color },
   {
     type: { enum: ["warning", "info", "tip", "danger", "success"] },
-    title: { type: "string" },
-    icon: { type: "string" },
+    title: { type: ["string", "boolean"] },
+    icon: { type: ["string", "boolean"] },
+    accent: { type: "boolean" },
     color: { type: "string" },
   },
   Astro.url.pathname,
 );
 
+if (rawIcon === true) {
+  throw new Error(
+    `[USER_ERROR]: <Callout>: Invalid prop "icon": expected string or false, got true (in ${Astro.url.pathname})`,
+  );
+}
+
+if (rawTitle === true) {
+  throw new Error(
+    `[USER_ERROR]: <Callout>: Invalid prop "title": expected string or false, got true (in ${Astro.url.pathname})`,
+  );
+}
+
 const defaults = typeDefaults[type];
-const resolvedTitle = title ?? defaults.title;
+const resolvedTitle = title === false ? null : (title ?? defaults.title);
+const resolvedIcon = icon === false ? null : (icon ?? defaults.icon);
+const resolvedColor = color ?? defaults.color;
+const isIconifyName = (value: string) => {
+  const parts = value.split(":");
+  return (
+    parts.length === 2 &&
+    /^[a-z0-9-]+$/i.test(parts[0]) &&
+    /^[a-z0-9-]+$/i.test(parts[1])
+  );
+};
+const shouldUseIconComponent =
+  typeof resolvedIcon === "string" && isIconifyName(resolvedIcon);
+const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
 ---
 
 <aside
   class:list={[
-    "rd-prose-block relative space-y-1 rounded-xl border-[0.5px]. border-neutral-900/8 bg-white px-4 py-3.5 pl-6 dark:border-neutral-800 dark:bg-(--rd-code-surface) shadow-[0px_1px_3px_0px_rgba(0,0,0,0.04),0px_0px_0px_0.8px_rgba(0,0,0,0.06)_inset,0px_-1px_0px_0px_rgba(0,0,0,0.06)_inset]",
+    "rd-prose-block relative space-y-1 rounded-xl border-[0.5px] bg-neutral-50/70 border-neutral-900/8 px-4 py-3.5 dark:border-white/6 dark:bg-(--rd-code-surface) shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]",
+    accent ? "pl-6" : "pl-4",
   ]}
   role="note"
 >
-  <div
-    class:list={[
-      "absolute left-2.5 inset-y-2.5 w-[2px] rounded-full mb-0",
-      defaults.color,
-    ]}
-    style={color && { backgroundColor: color }}
-  >
-  </div>
-  <div class="flex items-center gap-2 not-prose mb-3">
-    {
-      icon ? (
-        <Icon
-          name={icon}
-          class={`size-4 ${defaults.iconColor}`}
-          style={color && { color: color }}
-        />
-      ) : (
-        <img src={defaults.icon} alt="" width="16" height="16" class="" />
-      )
-    }
-    <h6
-      class:list={[
-        "font-semibold text-sm text-neutral-900 dark:text-neutral-100",
-      ]}
-    >
-      {resolvedTitle}
-    </h6>
-  </div>
-  <div
-    class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300"
-  >
-    <slot />
-  </div>
+  {
+    accent && (
+      <div
+        class="absolute left-2.5 inset-y-2.5 w-[2px] rounded-full mb-0"
+        style={{ backgroundColor: resolvedColor }}
+      />
+    )
+  }
+  {
+    hasTitle ? (
+      <>
+        <div
+          class:list={[
+            "flex items-start gap-2 not-prose",
+            resolvedIcon && shouldUseIconComponent ? "mb-2" : "mb-1",
+          ]}
+        >
+          {resolvedIcon && shouldUseIconComponent ? (
+            <Icon
+              name={resolvedIcon}
+              class="size-5 shrink-0"
+              style={{ color: resolvedColor }}
+            />
+          ) : resolvedIcon ? (
+            <img
+              src={resolvedIcon}
+              alt=""
+              width="16"
+              height="16"
+              class="shrink-0 border border-white"
+            />
+          ) : null}
+          <h6
+            class:list={[
+              "font-semibold text-sm text-neutral-900 dark:text-neutral-100",
+            ]}
+          >
+            {resolvedTitle}
+          </h6>
+        </div>
+        <div class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300">
+          <slot />
+        </div>
+      </>
+    ) : (
+      <div class="flex items-start gap-2">
+        {resolvedIcon && shouldUseIconComponent ? (
+          <Icon
+            name={resolvedIcon}
+            class="mt-0.5 size-5 shrink-0"
+            style={{ color: resolvedColor }}
+          />
+        ) : resolvedIcon ? (
+          <img
+            src={resolvedIcon}
+            alt=""
+            width="16"
+            height="16"
+            class="mt-0.5 shrink-0 border border-white"
+          />
+        ) : null}
+        <div class="prose-rules prose-sm! max-w-none! min-w-0 flex-1 *:max-w-none! text-neutral-700 dark:text-neutral-300">
+          <slot />
+        </div>
+      </div>
+    )
+  }
 </aside>

package/template/src/styles/global.css

@@ -140,7 +140,7 @@
   --tw-prose-invert-links: white;
   --tw-prose-invert-bold: white;
   --tw-prose-invert-counters: var(--color-neutral-400);
-  --tw-prose-invert-bullets: var(--color-neutral-600);
+  --tw-prose-invert-bullets: inherit;
   --tw-prose-invert-hr: var(--color-neutral-700);
   --tw-prose-invert-quotes: var(--color-neutral-100);
   --tw-prose-invert-quote-borders: var(--color-neutral-700);
@@ -291,21 +291,25 @@
 
 /* Markdown table styling */
 .prose-rules :where(table) {
-  @apply w-full overflow-hidden rounded-xl border border-neutral-200 shadow-xs dark:border-neutral-800;
+  @apply w-full overflow-hidden rounded-[12px] border border-neutral-900/7  dark:border-white/4 dark:bg-neutral-800/15;
   border-collapse: separate;
   border-spacing: 0;
 }
 
 .prose-rules :where(thead th) {
-  @apply bg-neutral-50 dark:bg-neutral-900/60;
+  @apply bg-neutral-100/60 dark:bg-neutral-800/40;
+}
+
+.prose-rules :where(tbody tr:nth-child(even) td) {
+  @apply bg-neutral-50/50 dark:bg-neutral-800/10;
 }
 
 .prose-rules :where(th, td) {
-  @apply border-b border-neutral-200 px-4 py-2 align-top dark:border-neutral-800;
+  @apply border-b border-neutral-900/4 px-4 py-2 align-top dark:border-white/2;
 }
 
 .prose-rules :where(th + th, td + td) {
-  @apply border-l border-neutral-200 dark:border-neutral-800;
+  @apply border-l border-neutral-900/4 dark:border-white/2;
 }
 
 .prose-rules :where(tbody tr:last-child td) {
@@ -314,7 +318,7 @@
 
 /* Code single-line styling */
 :is(.prose, .prose-rules) :not(pre) > code {
-  @apply px-1.5 bg-neutral-100/80 text-neutral-700/90 rounded-sm leading-none font-mono font-normal border border-neutral-900/6 after:hidden before:hidden dark:bg-neutral-800/80 dark:text-neutral-200 dark:border-neutral-700/80;
+  @apply mx-px px-[5px] pr-1 bg-neutral-100/80 text-neutral-700/90 rounded-sm leading-none font-mono font-normal border border-neutral-900/4 after:hidden before:hidden dark:bg-neutral-800/90 dark:text-neutral-200/90 dark:border-white/3;
 }
 
 [data-rd-code-theme] [data-rd-token] {
@@ -336,9 +340,20 @@
   margin-bottom: 0;
 }
 
-/* <ol> numbers */
-.prose :where(ol > li)::marker {
-  @apply font-medium;
+:is(.prose, .prose-rules) :where(ul > li)::marker {
+  color: color-mix(in oklab, currentColor 40%, transparent);
+}
+
+:is(.prose, .prose-rules) :where(ol > li)::marker {
+  color: color-mix(in oklab, currentColor 70%, transparent);
+}
+
+.dark :is(.prose, .prose-rules) :where(ul > li)::marker {
+  color: color-mix(in oklab, currentColor 30%, transparent);
+}
+
+.dark :is(.prose, .prose-rules) :where(ol > li)::marker {
+  color: color-mix(in oklab, currentColor 60%, transparent);
 }
 
 /* Animations */

package/template/src/assets/icons/check.svg

@@ -1,33 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  x="0px"
-  y="0px"
-  width="18px"
-  height="18px"
-  viewBox="0 0 18 18"
->
-  <path
-    d="M9.305 1.848L14.555 3.528C14.969 3.661 15.25 4.046 15.25 4.48V11C15.25 14.03 10.566 15.748 9.308 16.155C9.105 16.221 8.895 16.221 8.692 16.155C7.434 15.748 2.75 14.03 2.75 11V4.48C2.75 4.045 3.031 3.66 3.445 3.528L8.695 1.848C8.893 1.785 9.106 1.785 9.305 1.848Z"
-    fill="#16a34a"
-    fill-opacity="0.7"
-    data-color="color-2"
-    data-stroke="none"
-  ></path>
-  <path
-    d="M9.305 1.848L14.555 3.528C14.969 3.661 15.25 4.046 15.25 4.48V11C15.25 14.03 10.566 15.748 9.308 16.155C9.105 16.221 8.895 16.221 8.692 16.155C7.434 15.748 2.75 14.03 2.75 11V4.48C2.75 4.045 3.031 3.66 3.445 3.528L8.695 1.848C8.893 1.785 9.106 1.785 9.305 1.848Z"
-    stroke="#16a34a"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M6.49701 9.75L8.10601 11.25L11.503 6.75"
-    stroke="white"
-    opacity="0.9"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-</svg>

package/template/src/assets/icons/danger.svg

@@ -1,37 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
->
-  <path
-    opacity="0.8"
-    d="M5.63604 1.5H12.364L16.5 5.63604V12.364L12.364 16.5H5.63604L1.5 12.364V5.63604L5.63604 1.5Z"
-    fill="#dc2626"
-  ></path>
-  <path
-    d="M5.63604 1.5H12.364L16.5 5.63604V12.364L12.364 16.5H5.63604L1.5 12.364V5.63604L5.63604 1.5Z"
-    stroke="#dc2626"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <g transform="translate(0 -0.5)">
-    <path
-      d="M9 6.75V9.75"
-      stroke="white"
-      opacity="0.9"
-      stroke-width="1.8"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill="none"
-    ></path>
-    <path
-      d="M9 13.5C8.448 13.5 8 13.05 8 12.5C8 11.95 8.448 11.5 9 11.5C9.552 11.5 10 11.9501 10 12.5C10 13.0499 9.552 13.5 9 13.5Z"
-      fill="white"
-      opacity="0.9"
-      data-stroke="none"
-    ></path>
-  </g>
-</svg>

package/template/src/assets/icons/info.svg

@@ -1,36 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
->
-  <circle opacity="0.6" cx="9" cy="9" r="7.5" fill="#0284c7"></circle>
-  <circle
-    cx="9"
-    cy="9"
-    r="7.5"
-    stroke="#0284c7"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></circle>
-  <path
-    d="M9 12V9"
-    stroke="white"
-    opacity="0.9"
-    stroke-width="1.9"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M9 6H9.0075"
-    stroke="white"
-    opacity="0.9"
-    stroke-width="1.9"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-</svg>

package/template/src/assets/icons/lightbulb.svg

@@ -1,74 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  x="0px"
-  y="0px"
-  width="18px"
-  height="18px"
-  viewBox="0 0 18 18"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M7.97299 4.358C11.045 3.714 13.75 6.041 13.75 9C13.75 10.867 12.6695 12.475 11.1028 13.25H6.89719C5.11109 12.367 3.95699 10.399 4.31499 8.202C4.62299 6.315 6.10099 4.75 7.97299 4.358Z"
-    fill="#eab308"
-    opacity="0.7"
-    data-color="color-2"
-    data-stroke="none"
-  ></path>
-  <path
-    d="M9 0.75V1.75"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M14.834 3.16599L14.127 3.87299"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M17.25 9H16.25"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M3.16602 3.16599L3.87302 3.87299"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M0.75 9H1.75"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M13.75 8.99999C13.75 6.04069 11.0445 3.71348 7.97199 4.35818C6.09979 4.75108 4.62099 6.31669 4.31449 8.20489C3.93509 10.5427 5.26679 12.6193 7.24999 13.407V15.25C7.24999 16.0784 7.92159 16.75 8.74999 16.75H9.24999C10.0784 16.75 10.75 16.0784 10.75 15.25V13.407C12.505 12.71 13.75 11.004 13.75 8.99999Z"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M6.89697 13.25H11.103"
-    stroke="#eab308"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-</svg>

package/template/src/assets/icons/sparkle.svg

@@ -1,22 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  data-testid="geist-icon"
-  height="16"
-  stroke-linejoin="round"
-  viewBox="0 0 16 16"
-  width="16"
-  style="color: currentcolor"
->
-  <path
-    d="M2.5 0.5V0H3.5V0.5C3.5 1.60457 4.39543 2.5 5.5 2.5H6V3V3.5H5.5C4.39543 3.5 3.5 4.39543 3.5 5.5V6H3H2.5V5.5C2.5 4.39543 1.60457 3.5 0.5 3.5H0V3V2.5H0.5C1.60457 2.5 2.5 1.60457 2.5 0.5Z"
-    fill="currentColor"
-  ></path>
-  <path
-    d="M14.5 4.5V5H13.5V4.5C13.5 3.94772 13.0523 3.5 12.5 3.5H12V3V2.5H12.5C13.0523 2.5 13.5 2.05228 13.5 1.5V1H14H14.5V1.5C14.5 2.05228 14.9477 2.5 15.5 2.5H16V3V3.5H15.5C14.9477 3.5 14.5 3.94772 14.5 4.5Z"
-    fill="currentColor"
-  ></path>
-  <path
-    d="M8.40706 4.92939L8.5 4H9.5L9.59294 4.92939C9.82973 7.29734 11.7027 9.17027 14.0706 9.40706L15 9.5V10.5L14.0706 10.5929C11.7027 10.8297 9.82973 12.7027 9.59294 15.0706L9.5 16H8.5L8.40706 15.0706C8.17027 12.7027 6.29734 10.8297 3.92939 10.5929L3 10.5V9.5L3.92939 9.40706C6.29734 9.17027 8.17027 7.29734 8.40706 4.92939Z"
-    fill="currentColor"
-  ></path>
-</svg>

package/template/src/assets/icons/warning.svg

@@ -1,37 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  x="0px"
-  y="0px"
-  width="18px"
-  height="18px"
-  viewBox="0 0 18 18"
->
-  <path
-    opacity="0.7"
-    d="M7.63796 3.48996L2.21295 12.89C1.60795 13.9399 2.36395 15.25 3.57495 15.25H14.425C15.636 15.25 16.392 13.9399 15.787 12.89L10.362 3.48996C9.75696 2.44996 8.24296 2.44996 7.63796 3.48996Z"
-    fill="#f59e0b"
-    data-color="color-2"
-    data-stroke="none"
-  ></path>
-  <path
-    d="M7.63796 3.48996L2.21295 12.89C1.60795 13.9399 2.36395 15.25 3.57495 15.25H14.425C15.636 15.25 16.392 13.9399 15.787 12.89L10.362 3.48996C9.75696 2.44996 8.24296 2.44996 7.63796 3.48996Z"
-    stroke="#f59e0b"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M9 6.75V9.75"
-    stroke="#78350f"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  ></path>
-  <path
-    d="M9 13.5C8.448 13.5 8 13.05 8 12.5C8 11.95 8.448 11.5 9 11.5C9.552 11.5 10 11.9501 10 12.5C10 13.0499 9.552 13.5 9 13.5Z"
-    fill="#78350f"
-    data-stroke="none"
-  ></path>
-</svg>