Added more docs

docs/helpers/fonts.md

@@ -1,17 +1,45 @@
-# Fonts
+# Acode Fonts Module
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+A straightforward API for managing fonts in your Acode project.
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+## Quick Start
 
-## Contribute to the Documentation
+```javascript
+const fonts = acode.require('fonts');
+```
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+## Core Methods
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+### `add(name, css)`
+Adds a new font to your project.
 
-For more information, see official [Guide](https://acode.app/plugin-docs).
+**Parameters:**
+- `name`: Unique identifier for the font
+- `css`: CSS `@font-face` declaration
+
+**Example:**
+```javascript
+fonts.add(
+  'Developer Mono', 
+  `@font-face {
+    font-family: 'Developer Mono';
+    src: url('/fonts/devmono.woff2') format('woff2');
+    font-weight: 400;
+  }`
+);
+```
+
+### `get(name)`
+Retrieves a specific font's details.
+
+**Returns:** Font object with `name` and `css` properties
+
+```javascript
+const font = fonts.get('Developer Mono');
+```
+
+### `getNames()`
+Lists all available font names.
+
+```javascript
+const fontList = fonts.getNames();

docs/helpers/theme-builder.md

@@ -1,5 +1,117 @@
 # Theme Builder
 
+
+### Introduction
+
+The `ThemeBuilder` api from the `acode` core libraries  provides a solution for creating and customizing themes in Acode . It offers control over various UI elements, colors, and styles.
+
+### Basic Usage
+
+1. **Import the ThemeBuilder Class**
+
+```javascript
+const ThemeBuilder = acode.require('themeBuilder');
+```
+
+2. **Create a Theme Instance**
+
+```javascript
+const myTheme = new ThemeBuilder("MyDarkTheme", "dark");
+```
+
+- **Theme Name**: A descriptive name reflecting the theme's style (e.g., `"MyDarkTheme"`)
+- **Theme Mode**: Specifies the base mode (`"light"` or `"dark"`)
+
+3. **Customize Theme Properties**
+
+```javascript
+myTheme.primaryColor = "#333";
+myTheme.secondaryColor = "#666";
+myTheme.textColor = "#ffffff";
+myTheme.backgroundColor = "#121212";
+```
+
+### Customizable Theme Properties
+
+#### Color Palette
+- `primaryColor`: Main color for primary elements
+- `secondaryColor`: Accent color for secondary elements
+- `textColor`: Main text color
+- `backgroundColor`: Application background color
+- `activeColor`: Color for active elements
+- `dangerColor`: Color for error or destructive actions
+- `linkTextColor`: Color for clickable links
+
+#### Typography
+- `fontFamily`: Font type and fallbacks
+- `fontSize`: Base font size
+- `fontWeight`: Text thickness
+
+#### Specific Element Styles
+- `buttonBackgroundColor`: Button background
+- `buttonTextColor`: Button text color
+- `borderColor`: Element border color
+- `popupBackgroundColor`: Popup/modal background
+- `scrollbarColor`: Scrollbar color
+
+### More Styling Options
+
+#### Color Manipulation
+```javascript
+// Generate a darker version of the primary color
+const darkenedPrimaryColor = myTheme.darkenPrimaryColor();
+```
+
+#### Theme Types
+- `"light"`: Light color scheme
+- `"dark"`: Dark color scheme
+
+### Complete Theme Configuration Example
+
+```javascript
+const myCustomTheme = new ThemeBuilder("ModernDark", "dark");
+
+// Color Configuration
+myCustomTheme.primaryColor = "#2196F3";
+myCustomTheme.secondaryColor = "#FF4081";
+myCustomTheme.textColor = "#FFFFFF";
+myCustomTheme.backgroundColor = "#121212";
+
+// Typography
+myCustomTheme.fontFamily = "Roboto, sans-serif";
+myCustomTheme.fontSize = "16px";
+myCustomTheme.fontWeight = "400";
+
+// Element-Specific Styles
+myCustomTheme.buttonBackgroundColor = "#2196F3";
+myCustomTheme.buttonTextColor = "#FFFFFF";
+myCustomTheme.borderColor = "#333333";
+```
+
+### Best Practices
+- Choose a consistent color palette
+- Ensure sufficient contrast between text and background
+- Test your theme across different components and states
+- Use the `darkenPrimaryColor()` method for dynamic color variations
+
+### Supported CSS Custom Properties
+
+The ThemeBuilder generates the following CSS custom properties:
+- `--primary-color`
+- `--secondary-color`
+- `--text-color`
+- `--background-color`
+- `--active-color`
+- `--button-background-color`
+- `--border-color`
+- And many more...
+
+### Notes
+- Always import the ThemeBuilder from the `acode` library
+- Theme customization is flexible and supports both light and dark modes
+- You can override default styles for specific UI components
+- for theme management check the `themes`documentation
+=======
 **Theme Builder**
 
 **Introduction**
@@ -35,3 +147,4 @@ To create a new theme for your application, you'll need to utilize the `ThemeBui
    * `fontWeight`
    * // ... and many more
 
+

docs/helpers/themes.md

@@ -1,17 +1,44 @@
-# Themes
+# Acode Theme Management
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+Acode provides a flexible and intuitive module for managing themes, enabling developers to seamlessly add, retrieve, update, and list themes within their project.
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+## API Overview
 
-## Contribute to the Documentation
+```javascript
+const themes = acode.require('themes');
+```
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+## Methods
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+### `add(theme: ThemeBuilder)`
+
+Adds a new theme to the theme collection.
+
+**Parameters:**
+- `theme` (required): An instance of ThemeBuilder defining the theme's properties
+
+**Example:**
+```javascript
+const theme = new ThemeBuilder('Modern Dark', 'dark');
+themes.add(theme);
+```
+
+### `get(name: string)`
+
+Retrieves a specific theme by its name.
+
+**Parameters:**
+- `name` (required): The unique name of the theme to retrieve
+
+**Returns:** 
+- ThemeBuilder instance representing the requested theme
+
+**Example:**
+```javascript
+const theme = themes.get('Modern Dark');
+```
+
+### `update(theme: ThemeBuilder)`
+
+Updates an existing theme in the theme collection.
 
-For more information, see official [Guide](https://acode.app/plugin-docs).