# mamba-layout
Shared Mamba Vue layout shell, styles, locale helpers, and a standalone browser layout build.
## ⚠️ Important: Required CDN Links and Styles
**The following CDN links and styles are REQUIRED and cannot be omitted or modified:**
### Required Links (must be included in ``):
```html
My App
Hello World
Your content goes here
```
### Dark Mode CSS
The layout uses CSS variables that automatically adapt to dark mode. When dark mode is active, the following variables change:
```css
/* Light mode (default) */
:root {
--ui-bg-page: #ffffff;
--ui-bg-card: #ffffff;
--ui-text-primary: #303133;
--ui-text-secondary: #606266;
--ui-border-default: #dcdfe6;
}
/* Dark mode (automatically applied when theme="dark") */
:root.dark {
--ui-bg-page: #1a1a1a;
--ui-bg-card: #2a2a2a;
--ui-text-primary: #e5e5e5;
--ui-text-secondary: #a0a0a0;
--ui-border-default: #404040;
}
```
To customize dark mode colors for your content:
```css
/* Your custom dark mode styles */
:root.dark {
--ui-bg-page: #0f0f0f; /* Custom dark background */
--ui-bg-card: #1f1f1f; /* Custom dark card */
--ui-text-primary: #ffffff; /* Custom text color */
--ui-text-secondary: #b0b0b0; /* Custom secondary text */
}
```
### Available CSS Variables
#### 主题颜色
```css
/* 基础颜色 */
--ui-color-primary /* 主色 */
--ui-color-success /* 成功色 */
--ui-color-warning /* 警告色 */
--ui-color-destructive /* 危险色 */
--ui-color-info /* 信息色 */
```
#### 背景和前景色
```css
/* 页面背景 */
--ui-bg-page /* 页面背景色 */
--ui-bg-card /* 卡片背景色 */
--ui-bg-muted /* 次要背景色 */
--ui-bg-disabled /* 禁用背景色 */
--ui-bg-overlay /* 遮罩层背景色 */
--ui-bg-inverse /* 反色背景色 */
/* 颜色变量（底层） */
--ui-color-background /* 背景色 */
--ui-color-foreground /* 前景色 */
--ui-color-card /* 卡片背景色 */
--ui-color-card-foreground /* 卡片前景色 */
--ui-color-muted /* 柔和背景色 */
--ui-color-accent /* 强调色 */
--ui-color-overlay /* 遮罩色 */
--ui-color-inverse /* 反色 */
--ui-color-on-brand /* 品牌色上的文字颜色 */
```
#### 文字颜色
```css
/* 文字颜色 */
--ui-text-primary /* 主要文字 */
--ui-text-secondary /* 次要文字 */
--ui-text-muted /* 柔和文字 */
--ui-text-placeholder /* 占位符文字 */
--ui-text-disabled /* 禁用文字 */
--ui-text-on-brand /* 品牌色上的文字 */
```
#### 边框颜色
```css
/* 边框颜色 */
--ui-border-default /* 默认边框 */
--ui-border-soft /* 柔和边框 */
--ui-border-strong /* 强边框 */
--ui-ring /* 焦点环颜色 */
/* 颜色变量（底层） */
--ui-color-border /* 边框色 */
--ui-color-border-soft /* 柔和边框色 */
--ui-color-border-strong /* 强边框色 */
--ui-color-ring /* 焦点环颜色 */
```
#### 顶部导航栏颜色
```css
/* 顶部导航栏 */
--ui-topnav-bg /* 导航栏背景色 */
--ui-topnav-accent /* 导航栏强调色 */
--ui-topnav-foreground /* 导航栏前景色 */
--ui-topnav-muted /* 导航栏柔和文字 */
--ui-topnav-border /* 导航栏边框 */
--ui-topnav-hover /* 悬停背景色 */
--ui-topnav-surface /* 表面背景色 */
--ui-topnav-shadow /* 导航栏阴影 */
--ui-topnav-active-bg /* 激活状态背景色 */
--ui-topnav-active-fg /* 激活状态文字色 */
--ui-avatar-bg /* 头像背景色 */
```
#### 侧边栏颜色
```css
/* 侧边栏 */
--ui-sidebar-bg /* 侧边栏背景色 */
--ui-sidebar-accent /* 侧边栏强调色 */
--ui-sidebar-foreground /* 侧边栏前景色 */
--ui-sidebar-border /* 侧边栏边框 */
--ui-sidebar-active-bg /* 激活项背景色 */
--ui-sidebar-active-fg /* 激活项文字色 */
--ui-sidebar-hover-bg /* 悬停背景色 */
```
#### 徽章颜色
```css
/* 徽章背景色 */
--ui-badge-purple-bg /* 紫色徽章背景 */
--ui-badge-purple-fg /* 紫色徽章文字 */
--ui-badge-blue-bg /* 蓝色徽章背景 */
--ui-badge-blue-fg /* 蓝色徽章文字 */
--ui-badge-green-bg /* 绿色徽章背景 */
--ui-badge-green-fg /* 绿色徽章文字 */
--ui-badge-orange-bg /* 橙色徽章背景 */
--ui-badge-orange-fg /* 橙色徽章文字 */
--ui-badge-yellow-bg /* 黄色徽章背景 */
--ui-badge-yellow-fg /* 黄色徽章文字 */
```
#### 表格颜色
```css
/* 表格 */
--ui-table-header-bg /* 表头背景色 */
--ui-table-row-bg /* 表格行背景色 */
--ui-table-row-alt-bg /* 表格交替行背景色 */
```
#### 登录页颜色
```css
/* 登录页 */
--ui-login-page-bg /* 登录页背景色 */
--ui-login-panel-bg /* 登录面板背景色 */
--ui-login-panel-border /* 登录面板边框 */
--ui-login-hero-overlay /* 英雄区遮罩 */
--ui-login-feature-bg /* 功能项背景色 */
--ui-login-feature-border /* 功能项边框 */
--ui-login-feature-icon /* 功能项图标颜色 */
--ui-login-action-bg /* 操作按钮背景色 */
--ui-login-action-border /* 操作按钮边框 */
--ui-login-action-text /* 操作按钮文字 */
--ui-login-input-bg /* 输入框背景色 */
--ui-login-input-border /* 输入框边框 */
--ui-login-input-border-hover /* 输入框悬停边框 */
--ui-login-input-placeholder /* 输入框占位符 */
--ui-login-input-icon /* 输入框图标颜色 */
```
#### 字体
```css
/* 字体 */
--ui-font-heading /* 标题字体 */
--ui-font-body /* 正文字体 */
--ui-font-mono /* 等宽字体 */
```
#### 圆角
```css
/* 圆角 */
--ui-radius-sm /* 小圆角 */
--ui-radius-control /* 控件圆角 */
--ui-radius-card /* 卡片圆角 */
--ui-radius-modal /* 模态框圆角 */
--ui-radius-pill /* 胶囊圆角 */
--ui-body-radius /* 页面主体圆角 */
```
#### 间距
```css
/* 间距 */
--ui-space-inline /* 内联间距 */
--ui-space-control /* 控件间距 */
--ui-space-card /* 卡片间距 */
--ui-space-section /* 区块间距 */
```
#### 阴影
```css
/* 阴影 */
--ui-shadow-card /* 卡片阴影 */
--ui-shadow-pop /* 弹出层阴影 */
```
#### 过渡动画
```css
/* 过渡动画 */
--ui-transition-fast /* 快速过渡 */
--ui-transition-base /* 基础过渡 */
```
#### 布局
```css
/* 布局 */
--ui-layout-shell-bg /* 布局壳背景渐变 */
```
### AI Usage Guidelines
**⚠️ Important for AI Code Generation:**
When using Mamba Layout, **DO NOT** generate the following components as they are already provided by the `` element:
- ❌ **Sidebar/Navigation Menu** - The layout includes a built-in sidebar with navigation
- ❌ **Top Header Bar** - The layout includes a built-in header with logo and actions
- ❌ **Layout Structure** - Do not create flex/grid containers for overall page layout
- ❌ **Theme Toggle Button** - Dark mode is handled automatically by the layout
**What to generate:**
- ✅ **Page Content Only** - Place your actual page content inside `` tags
- ✅ **Data Cards** - Statistics cards, metric displays
- ✅ **Charts & Visualizations** - Data charts, graphs
- ✅ **Tables** - Data tables, lists
- ✅ **Forms** - Input forms, filters
- ✅ **Custom Components** - Any business-specific UI components
**Example for AI Prompts:**
```
Create a dashboard page with statistics cards and charts using Mamba Layout.
Only generate the page content that goes inside the element.
Do NOT create sidebar, header, or navigation as they are provided by the layout.
```
**Correct Usage:**
```html
```
**Incorrect Usage (what NOT to do):**
```html
...
```