version 1.13.5 : add theme schema

2025-05-31 02:11:57 +07:00
parent bcafa9b5d9
commit d967120677
24 changed files with 788 additions and 165 deletions
--- a/contents/docs/changelog/version-1/index.mdx
+++ b/contents/docs/changelog/version-1/index.mdx
@@ -1,12 +1,35 @@
 ---
-title: Changelog
+title: Release Version 1.0+
 description: List of latest changes and updates on DocuBook
 date: 24-05-2025
 ---

-## Version History
+<Note type="note" title="Version History">
+  This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
+</Note>

-> This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
+<div className="sr-only">
+### v 1.13.5
+</div>
+
+<Release version="1.13.5" date="2025-05-31" title="Add Theme schema for consistent theme">
+  <Changes type="added">
+    - Add Theme schema
+    - Add Freshlime theme
+    - Add Coffee theme
+    - Add llms context for generated theme with AI
+  </Changes>
+  <Changes type="improved">
+    - Markdown support for theme-colors
+    - consistent theme-colors page
+    - all components now consistent with theme-colors
+    - syntax with theme-colors
+  </Changes>
+  <Changes type="fixed">
+    - fix bug FileTree component
+    - fix issue markdown with theme-colors
+  </Changes>
+</Release>

 <div className="sr-only">
 ### v 1.13.0
--- a/contents/docs/getting-started/theme-colors/coffee/index.mdx
+++ b/contents/docs/getting-started/theme-colors/coffee/index.mdx
@@ -0,0 +1,167 @@
+---
+title: Coffee
+description: A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.
+date: 2025-05-30
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+/* Rich Coffee Theme */
+@layer base {
+    :root {
+        --background: 35 40% 96%;
+        --foreground: 25 25% 10%;
+        --card: 0 0% 100%;
+        --card-foreground: 25 25% 10%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 25 25% 10%;
+        --primary: 25 60% 40%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 35 30% 90%;
+        --secondary-foreground: 25 25% 10%;
+        --muted: 35 20% 94%;
+        --muted-foreground: 25 15% 35%;
+        --accent: 30 50% 38%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 5 85% 45%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 30 15% 85%;
+        --input: 30 15% 88%;
+        --ring: 25 60% 40%;
+        --radius: 0.5rem;
+        --chart-1: 25 60% 45%;
+        --chart-2: 30 55% 45%;
+        --chart-3: 35 50% 42%;
+        --chart-4: 20 45% 38%;
+        --chart-5: 40 45% 40%;
+        --line-number-color: rgba(0, 0, 0, 0.08);
+    }
+
+    .dark {
+        --background: 30 10% 6%;
+        --foreground: 35 20% 94%;
+        --card: 30 10% 8%;
+        --card-foreground: 35 20% 94%;
+        --popover: 30 10% 8%;
+        --popover-foreground: 35 20% 94%;
+        --primary: 30 45% 52%;
+        --primary-foreground: 30 10% 6%;
+        --secondary: 30 12% 14%;
+        --secondary-foreground: 35 20% 94%;
+        --muted: 30 10% 16%;
+        --muted-foreground: 30 15% 60%;
+        --accent: 28 40% 48%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 5 80% 55%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 30 10% 20%;
+        --input: 30 10% 20%;
+        --ring: 30 45% 52%;
+        --chart-1: 30 45% 52%;
+        --chart-2: 28 40% 50%;
+        --chart-3: 32 45% 50%;
+        --chart-4: 25 35% 46%;
+        --chart-5: 35 40% 48%;
+        --line-number-color: rgba(255, 255, 255, 0.12);
+    }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Rich Coffee Theme - Syntax Highlighting */
+
+/* Light Mode */
+.keyword {
+  color: hsl(25 60% 35%); /* Rich coffee brown */
+}
+
+.function {
+  color: hsl(30 55% 38%); /* Warm coffee brown */
+}
+
+.punctuation {
+  color: hsl(30 15% 55%); /* Muted brown */
+}
+
+.comment {
+  color: hsl(25 15% 45%); /* Muted brown */
+  font-style: italic;
+  opacity: 0.9;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: hsl(32 50% 40%); /* Warm brown with hint of orange */
+}
+
+.tag {
+  color: hsl(25 65% 30%); /* Dark rich coffee */
+}
+
+.attr-name {
+  color: hsl(28 55% 38%); /* Warm brown */
+}
+
+.attr-value {
+  color: hsl(35 55% 35%); /* Slightly orange brown */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: hsl(30 50% 65%); /* Light warm brown */
+}
+
+.dark .function {
+  color: hsl(28 55% 68%); /* Light warm brown */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: hsl(35 50% 72%); /* Light warm brown with hint of orange */
+}
+
+.dark .tag {
+  color: hsl(30 50% 75%); /* Light warm brown */
+}
+
+.dark .attr-name {
+  color: hsl(28 45% 70%); /* Light warm brown */
+}
+
+.dark .attr-value {
+  color: hsl(35 50% 70%); /* Light warm brown with hint of orange */
+}
+
+.dark .comment {
+  color: hsl(30 15% 65%); /* Light brown-gray */
+  opacity: 0.8;
+}
+
+.dark .punctuation {
+  color: hsl(30 15% 70%); /* Light brown-gray */
+  opacity: 0.9;
+}
+```
+</TabsContent>
+</Tabs>
--- a/contents/docs/getting-started/theme-colors/default/index.mdx
+++ b/contents/docs/getting-started/theme-colors/default/index.mdx
@@ -0,0 +1,163 @@
+---
+title: Default Theme
+description: This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.
+date: 2025-05-20
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+    /* Modern Blue Theme */
+@layer base {
+    :root {
+        --background: 210 40% 98%;
+        --foreground: 220 30% 15%;
+        --card: 0 0% 100%;
+        --card-foreground: 220 30% 15%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 220 30% 15%;
+        --primary: 210 81% 56%; /* #2281E3 */
+        --primary-foreground: 0 0% 100%;
+        --secondary: 210 30% 90%;
+        --secondary-foreground: 220 30% 15%;
+        --muted: 210 20% 92%;
+        --muted-foreground: 220 15% 50%;
+        --accent: 200 100% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 210 20% 85%;
+        --input: 210 20% 85%;
+        --ring: 210 81% 56%;
+        --radius: 0.5rem;
+        --chart-1: 210 81% 56%;
+        --chart-2: 200 100% 40%;
+        --chart-3: 220 76% 60%;
+        --chart-4: 190 90% 50%;
+        --chart-5: 230 86% 45%;
+        --line-number-color: rgba(0, 0, 0, 0.05);
+        }
+
+    .dark {
+        --background: 220 25% 10%;
+        --foreground: 210 30% 96%;
+        --card: 220 25% 15%;
+        --card-foreground: 210 30% 96%;
+        --popover: 220 25% 15%;
+        --popover-foreground: 210 30% 96%;
+        --primary: 210 100% 65%;
+        --primary-foreground: 220 25% 10%;
+        --secondary: 215 25% 20%;
+        --secondary-foreground: 210 30% 96%;
+        --muted: 215 20% 25%;
+        --muted-foreground: 215 20% 65%;
+        --accent: 200 100% 60%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 70%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 215 20% 25%;
+        --input: 215 20% 25%;
+        --ring: 210 100% 65%;
+        --chart-1: 210 100% 65%;
+        --chart-2: 200 100% 60%;
+        --chart-3: 220 90% 70%;
+        --chart-4: 190 100% 65%;
+        --chart-5: 230 90% 60%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
+        }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Modern Blue Theme */
+/* Light Mode */
+.keyword {
+  color: #1d4ed8; /* Darker blue for better contrast */
+}
+
+.function {
+  color: #0369a1; /* Deep blue */
+}
+
+.punctuation {
+  color: #4b5563; /* Slate gray */
+}
+
+.comment {
+  color: #6b7280; /* Muted gray */
+  font-style: italic;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: #0d9488; /* Teal for better distinction */
+}
+
+.tag {
+  color: #1d4ed8; /* Matching keyword color */
+}
+
+.attr-name {
+  color: #0284c7; /* Sky blue */
+}
+
+.attr-value {
+  color: #2563eb; /* Primary blue */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: #60a5fa; /* Soft blue */
+}
+
+.dark .function {
+  color: #38bdf8; /* Sky blue */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: #2dd4bf; /* Teal */
+}
+
+.dark .tag {
+  color: #60a5fa; /* Matching keyword color */
+}
+
+.dark .attr-name {
+  color: #7dd3fc; /* Lighter blue */
+}
+
+.dark .attr-value {
+  color: #3b82f6; /* Brighter blue */
+}
+
+.dark .comment {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+
+.dark .punctuation {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+```
+</TabsContent>
+</Tabs>
--- a/contents/docs/getting-started/theme-colors/freshlime/index.mdx
+++ b/contents/docs/getting-started/theme-colors/freshlime/index.mdx
@@ -0,0 +1,164 @@
+---
+title: Fresh Lime
+description: A fresh and vibrant freshlime-themed color scheme that's easy on the eyes while maintaining excellent readability.
+date: 2025-05-30
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+    /* Fresh Lime Theme */
+@layer base {
+    :root {
+        --background: 85 45% 98%;
+        --foreground: 85 30% 10%;
+        --card: 0 0% 100%;
+        --card-foreground: 85 30% 10%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 85 30% 10%;
+        --primary: 85 70% 45%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 85 40% 90%;
+        --secondary-foreground: 85 30% 10%;
+        --muted: 85 30% 92%;
+        --muted-foreground: 85 15% 45%;
+        --accent: 85 60% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 85 25% 88%;
+        --input: 85 25% 88%;
+        --ring: 85 70% 45%;
+        --radius: 0.5rem;
+        --chart-1: 85 70% 45%;
+        --chart-2: 85 60% 40%;
+        --chart-3: 85 80% 40%;
+        --chart-4: 85 85% 35%;
+        --chart-5: 85 90% 30%;
+        --line-number-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .dark {
+        --background: 85 20% 8%;
+        --foreground: 85 30% 96%;
+        --card: 85 20% 10%;
+        --card-foreground: 85 30% 96%;
+        --popover: 85 20% 10%;
+        --popover-foreground: 85 30% 96%;
+        --primary: 85 75% 55%;
+        --primary-foreground: 85 20% 8%;
+        --secondary: 85 25% 18%;
+        --secondary-foreground: 85 30% 96%;
+        --muted: 85 20% 20%;
+        --muted-foreground: 85 20% 70%;
+        --accent: 85 70% 50%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 65%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 85 25% 22%;
+        --input: 85 25% 22%;
+        --ring: 85 75% 55%;
+        --chart-1: 85 75% 55%;
+        --chart-2: 85 70% 50%;
+        --chart-3: 85 80% 45%;
+        --chart-4: 85 85% 40%;
+        --chart-5: 85 90% 35%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
+    }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Fresh Lime Theme - Syntax Highlighting */
+
+/* Light Mode */
+.keyword {
+  color: hsl(85 70% 30%); /* Dark lime green */
+}
+
+.function {
+  color: hsl(85 65% 35%); /* Slightly lighter lime */
+}
+
+.punctuation {
+  color: hsl(85 15% 50%); /* Muted green-gray */
+}
+
+.comment {
+  color: hsl(85 15% 50%); /* Muted green-gray */
+  font-style: italic;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: hsl(85 50% 35%); /* Medium lime green */
+}
+
+.tag {
+  color: hsl(85 70% 25%); /* Darker lime */
+}
+
+.attr-name {
+  color: hsl(85 60% 35%); /* Lime green */
+}
+
+.attr-value {
+  color: hsl(85 70% 30%); /* Dark lime green */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: hsl(85 75% 65%); /* Bright lime */
+}
+
+.dark .function {
+  color: hsl(85 75% 60%); /* Slightly less bright lime */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: hsl(85 60% 70%); /* Light lime */
+}
+
+.dark .tag {
+  color: hsl(85 70% 70%); /* Bright lime */
+}
+
+.dark .attr-name {
+  color: hsl(85 65% 70%); /* Light lime */
+}
+
+.dark .attr-value {
+  color: hsl(85 75% 65%); /* Bright lime */
+}
+
+.dark .comment {
+  color: hsl(85 15% 60%); /* Light gray-green */
+}
+
+.dark .punctuation {
+  color: hsl(85 20% 70%); /* Light gray-green */
+}
+```
+</TabsContent>
+</Tabs>
--- a/contents/docs/getting-started/theme-colors/index.mdx
+++ b/contents/docs/getting-started/theme-colors/index.mdx
@@ -0,0 +1,9 @@
+---
+title : Theme Colors
+description : Color system used in DocuBook for styling UI elements
+date : 2025-05-20
+---
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Outlet path="getting-started/theme-colors" />
--- a/contents/docs/getting-started/theme-colors/llms/index.mdx
+++ b/contents/docs/getting-started/theme-colors/llms/index.mdx
@@ -0,0 +1,66 @@
+---
+title: Llms.txt - Generate Custom Theme
+description: Complete guide for creating and using AI-generated custom themes based on LLMS context.
+date: 2025-05-31
+---
+
+## Introduction
+This document explains how to create and implement custom color themes using AI with LLMS context. The context includes a consistent color palette for both light and dark modes, along with syntax highlighting colors for code.
+
+## Generate New Theme
+
+<Stepper>
+  <StepperItem title="Step 1: Access LLM for Color Generation">
+    Ensure you have access to a language model (LLM) that supports color palette generation
+  </StepperItem>
+  <StepperItem title="Step 2: Prepare Color Context">
+    Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
+  </StepperItem>
+  <StepperItem title="Step 3: Define Color Requirements">
+    Determine your preferred color scheme or theme requirements
+  </StepperItem>
+  <StepperItem title="Step 4: Generate New Theme">
+    Use the following prompt to request a new theme from the AI:
+
+    ```markdown
+    Create a new color theme based on the provided context with the following requirements:
+    1. Different primary color `#2281E3` - changes to your brand color
+    2. Maintain good contrast for accessibility
+    3. Include variants for both light and dark modes
+    4. Keep the same structure as the provided context
+    ```
+  </StepperItem>
+</Stepper>
+
+## Implementation
+After receiving the new color palette:
+
+1. Copy the generated CSS code to your theme file
+2. Update CSS variables in `globals.css`
+3. Adjust syntax colors in `syntax.css` if needed
+4. Test the theme across different devices and display modes
+
+## Example Implementation
+```css
+:root {
+  --primary: 210 81% 56%;  /* Primary color */
+  --secondary: 210 30% 90%;  /* Secondary color */
+  /* ... and so on */
+}
+
+.dark {
+  --primary: 210 100% 65%;  /* Dark mode primary color */
+  /* ... and so on */
+}
+```
+
+## Tips and Recommendations
+- Always test color contrast to ensure accessibility
+- Maintain consistency with existing themes
+- Use tools like [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify contrast ratios
+- Keep backups of previous theme versions before making major changes
+
+## Troubleshooting
+- If colors don't change, ensure CSS variables are properly imported
+- Check CSS selector specificity if styles conflict
+- Verify dark/light mode toggling is working correctly