Resolve PR 267 conflicts

.github/workflows/claude-code-review.yml

@@ -54,4 +54,3 @@ jobs:
           # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
           # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
           claude_args: '--allowed-tools "Bash(gh issue view:*),Bash(gh search:*),Bash(gh issue list:*),Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh pr list:*)"'
-

.github/workflows/claude.yml

@@ -48,3 +48,53 @@
           # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
           # claude_args: '--allowed-tools Bash(gh pr:*)'
 
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'
+

src/components/HomepageFeatures/styles.module.css

@@ -171,13 +171,13 @@
 }
 
 .latestBadge {
-  background: var(--ifm-color-success);
-  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
+  background: #41F2CC;
+  color: #000000 !important;
 }
 
 .latestBadge:hover {
-  background: var(--ifm-color-success-dark);
-  color: white !important;
+  background: #34C263;
+  color: #000000 !important;
 }
 
 [data-theme='dark'] .versionBadge {
@@ -191,13 +191,13 @@
 }
 
 [data-theme='dark'] .latestBadge {
-  background: var(--ifm-color-success-darker);
-  color: var(--ifm-color-success-lightest);
+  background: #27914A;
+  color: #D9FACB !important;
 }
 
 [data-theme='dark'] .latestBadge:hover {
-  background: var(--ifm-color-success);
-  color: white !important;
+  background: #41F2CC;
+  color: #000000 !important;
 }
 
 /* Dark mode color improvements */

src/css/custom.css

@@ -47,6 +47,48 @@
     font-display: swap;
 }
 
+/* Hubot Sans Family */
+@font-face {
+    font-family: "Hubot Sans";
+    src: url("/fonts/HubotSans-Regular.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Hubot Sans";
+    src: url("/fonts/HubotSans-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Hubot Sans";
+    src: url("/fonts/HubotSans-SemiBold.ttf") format("truetype");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Hubot Sans";
+    src: url("/fonts/HubotSans-Bold.ttf") format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Syne (variable font) */
+@font-face {
+    font-family: "Syne";
+    src: url("/fonts/Syne-VariableFont_wght.ttf") format("truetype-variations");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
 :root {
     --ifm-color-primary: #5851DB;
     --ifm-color-primary-dark: #232058;
@@ -72,6 +114,32 @@
     --ifm-breadcrumb-size-multiplier: 0.9;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: Hubot Sans, HubotSans-fallback, Courier New, monospace;
+    --ifm-color-primary: #5851DB;
+    --ifm-color-primary-dark: #232058;
+    --ifm-color-primary-darker: #1A1536;
+    --ifm-color-primary-darkest: #12102C;
+    --ifm-color-primary-light: #5851DB;
+    --ifm-color-primary-lighter: #7974E2;
+    --ifm-color-primary-lightest: #9B97E9;
+    --ifm-code-font-size: 95%;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+    --ifm-font-family-base: Syne, Syne-fallback, Trebuchet MS, Verdana, sans-serif;
+    --ifm-color-emphasis-600: #767386;
+    --ifm-color-success: #34C263;
+    --ifm-color-success-dark: #27914A;
+    --ifm-button-background-color: #5851DB;
+}
+
+.table-of-contents {
+    font-size: 0.9rem;
+}
+
+.breadcrumbs {
+    --ifm-breadcrumb-size-multiplier: 0.9;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: Hubot Sans, HubotSans-fallback, Courier New, monospace;
 }
@@ -86,6 +154,14 @@ h1, h2, h3, h4, h5, h6 {
     --ifm-color-primary-lighter: #9B97E9;
     --ifm-color-primary-lightest: #BCB9F1;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+    --ifm-color-primary: #5851DB;
+    --ifm-color-primary-dark: #4641AF;
+    --ifm-color-primary-darker: #353183;
+    --ifm-color-primary-darkest: #232058;
+    --ifm-color-primary-light: #7974E2;
+    --ifm-color-primary-lighter: #9B97E9;
+    --ifm-color-primary-lightest: #BCB9F1;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 /* Additional custom styles */
@@ -102,15 +178,15 @@ html {
 }
 
 .button--outline {
-    font-weight: 600;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+  font-weight: 600;
+  background: rgba(88, 81, 219, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(88, 81, 219, 0.3);
 }
 
 .button--outline:hover {
-    background: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(88, 81, 219, 0.2);
+  border-color: rgba(88, 81, 219, 0.5);
 }
 
 /* Navbar responsive improvements */
@@ -155,14 +231,14 @@ html {
 
 /* Option 2: Smart Version Selector with Latest Emphasis */
 .navbar-item-latest {
-    font-weight: 600 !important;
-    color: var(--ifm-color-primary-darkest) !important;
-    background: linear-gradient(90deg, rgba(88, 81, 219, 0.08), rgba(88, 81, 219, 0.03));
-    border-left: 3px solid var(--ifm-color-primary);
-    padding-left: 12px !important;
-    margin: 2px 0;
-    border-radius: 0 4px 4px 0;
-    position: relative;
+  font-weight: 600 !important;
+  color: var(--ifm-color-primary-darkest) !important;
+  background: linear-gradient(90deg, rgba(88, 81, 219, 0.08), rgba(88, 81, 219, 0.03));
+  border-left: 3px solid var(--ifm-color-primary);
+  padding-left: 12px !important;
+  margin: 2px 0;
+  border-radius: 0 4px 4px 0;
+  position: relative;
 }
 
 .navbar-item-latest::after {
@@ -183,26 +259,26 @@ html {
 }
 
 .navbar-item-legacy:hover {
-    color: var(--ifm-color-primary) !important;
-    opacity: 1;
-    background: rgba(42, 82, 152, 0.05);
-    border-radius: 4px;
+  color: var(--ifm-color-primary) !important;
+  opacity: 1;
+  background: rgba(88, 81, 219, 0.05);
+  border-radius: 4px;
 }
 
 /* Dark mode adjustments */
 [data-theme='dark'] .navbar-item-latest {
-    color: var(--ifm-color-primary-lightest) !important;
-    background: linear-gradient(90deg, rgba(77, 127, 216, 0.1), rgba(77, 127, 216, 0.04));
-    border-left-color: var(--ifm-color-primary-light);
+  color: var(--ifm-color-primary-lightest) !important;
+  background: linear-gradient(90deg, rgba(139, 81, 219, 0.1), rgba(139, 81, 219, 0.04));
+  border-left-color: var(--ifm-color-primary-light);
 }
 
 [data-theme='dark'] .navbar-item-legacy {
     color: var(--ifm-color-emphasis-500) !important;
 }
 
 [data-theme='dark'] .navbar-item-legacy:hover {
-    color: var(--ifm-color-primary-light) !important;
-    background: rgba(77, 127, 216, 0.08);
+  color: var(--ifm-color-primary-light) !important;
+  background: rgba(139, 81, 219, 0.08);
 }
 
 /* Product grouping visual separation */
@@ -255,15 +331,15 @@ html {
 /* Start of Selection */
 /* Apply borders only to images within docs pages */
 .theme-doc-markdown img {
-    border: 1px solid #E2E1DC;
-    border-radius: 4px;
+  border: 1px solid #E2E1DC;
+  border-radius: 4px;
 }
 
 /* End of Selection */
 
 /* Dark mode image borders */
 [data-theme='dark'] img {
-    border-color: #3a3a3a;
+  border-color: #48445F;
 }
 
 /* Add this to your /src/css/custom.css file */
@@ -347,10 +423,15 @@ html {
 
 /* Highlight search terms more prominently */
 .DocSearch-Hit-content mark {
-    background-color: var(--ifm-color-primary-lighter);
-    color: var(--ifm-font-color-base);
-    font-weight: 600;
-    padding: 0 2px;
+  background-color: #FDF0CC;
+  color: var(--ifm-font-color-base);
+  font-weight: 600;
+  padding: 0 2px;
+}
+
+[data-theme='dark'] .DocSearch-Hit-content mark {
+  background-color: #624800;
+  color: var(--ifm-color-white);
 }
 
 /* Add product/version badges if needed */

src/theme/Root.js

@@ -1,9 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ProductMetaTags from '@site/src/components/ProductMetaTags';
 
 // Default implementation from Docusaurus
 // https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/Root/index.tsx
 export default function Root({ children }) {
+  useEffect(() => {
+    // Update favicon based on color mode using MutationObserver
+    const updateFavicon = () => {
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      const favicon = document.querySelector("link[rel='icon']");
+      if (favicon) {
+        favicon.href = isDark
+          ? '/branding/favicon-light.ico'
+          : '/branding/favicon-dark.ico';
+      }
+    };
+
+    // Initial update
+    updateFavicon();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(updateFavicon);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <>
       <ProductMetaTags />