mamba-layout 0.47.0 → 0.48.0

package/README.md

@@ -110,25 +110,196 @@ To customize dark mode colors for your content:
 
 ### 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
-/* Background colors */
---ui-bg-page          /* Page background */
---ui-bg-card          /* Card background */
---ui-bg-muted         /* Muted/secondary background */
---ui-bg-overlay       /* Overlay background */
+/* 字体 */
+--ui-font-heading                 /* 标题字体 */
+--ui-font-body                    /* 正文字体 */
+--ui-font-mono                    /* 等宽字体 */
+```
 
-/* Text colors */
---ui-text-primary     /* Primary text */
---ui-text-secondary   /* Secondary text */
---ui-text-disabled    /* Disabled text */
+#### 圆角
+
+```css
+/* 圆角 */
+--ui-radius-sm                    /* 小圆角 */
+--ui-radius-control               /* 控件圆角 */
+--ui-radius-card                  /* 卡片圆角 */
+--ui-radius-modal                 /* 模态框圆角 */
+--ui-radius-pill                  /* 胶囊圆角 */
+--ui-body-radius                  /* 页面主体圆角 */
+```
 
-/* Border colors */
---ui-border-default   /* Default border */
---ui-border-light     /* Light border */
+#### 间距
 
-/* Other */
---ui-radius-control   /* Border radius for controls */
---ui-shadow-card      /* Card shadow */
+```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