fix(bootstrap): 统一 outline 按钮运行时主题色（by AI）

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.0.11 (2026-08-17)
+
+### Fixes
+- **Outline Theme Colors**: `btn-outline-*` now follows every runtime semantic color configured through `Bootstrap.config`, including default, hover, active, and disabled states.
+
 ## 1.0.9 (2026-06-27)
 
 ### Fixes

README.md

@@ -5,7 +5,7 @@ Bootstrap 5.3 自包含集成引擎。
 ## 0. 快速开始 (Quick Start)
 直接在 HTML 中引入（无需打包，完全非 ESM 注入）：
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.10/dist/bootstrap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.11/dist/bootstrap.min.js"></script>
 ```
 
 ## 1. 运行时接口
@@ -21,7 +21,7 @@ Bootstrap 5.3 自包含集成引擎。
 
 #### 参数 `options`:
 - **主题色**: `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `light`, `dark` (Hex 字符串)。
-  - *行为*: 自动更新 CSS 变量并注入深度样式补丁（覆盖按钮、表单控件、开关、进度条等硬编码样式）。实心按钮保留较深的 hover / active 状态。
+  - *行为*: 自动更新 CSS 变量并注入深度样式补丁（覆盖实心与 outline 按钮、表单控件、开关、进度条等硬编码样式）。按钮保留明确的 hover / active 状态。
   - *链接按钮*: 支持 `btn-link-primary`、`btn-link-info` 等全部语义色类；hover / active 会随配置色变深。也兼容组合写法 `btn btn-link btn-link-info`。
 - **暗黑模式**:
   - `darkMode`: (Boolean) 直接设置主题。`true` 为 dark，`false` 为 light。

TEST.md

@@ -0,0 +1,6 @@
+# Test Report
+
+## v1.0.11 - 2026-08-17
+
+- `npm test`: Playwright verifies configured primary colors for solid, link, and outline button variables, including outline hover and active states.
+- `npm run build`: Vite produces the self-contained browser bundle and minified bundle.

dist/bootstrap.js

@@ -7270,6 +7270,16 @@ url("data:font/woff;base64,d09GRgABAAAAAsBAAAsAAAAHavgAAQAAAAAAAAAAAAAAAAAAAAAAA
                             --bs-btn-disabled-bg: var(--bs-${name}) !important;
                             --bs-btn-disabled-border-color: var(--bs-${name}) !important;
                         }
+                        .btn-outline-${name} {
+                            --bs-btn-color: var(--bs-${name}) !important;
+                            --bs-btn-border-color: var(--bs-${name}) !important;
+                            --bs-btn-hover-bg: var(--bs-${name}) !important;
+                            --bs-btn-hover-border-color: var(--bs-${name}) !important;
+                            --bs-btn-active-bg: ${activeColor} !important;
+                            --bs-btn-active-border-color: ${activeColor} !important;
+                            --bs-btn-disabled-color: var(--bs-${name}) !important;
+                            --bs-btn-disabled-border-color: var(--bs-${name}) !important;
+                        }
                         .bg-${name} { background-color: var(--bs-${name}) !important; }
                         .text-${name} { color: var(--bs-${name}) !important; }
                         .border-${name} { border-color: var(--bs-${name}) !important; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apigo.cc/bootstrap",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "main": "dist/bootstrap.js",
   "files": [

src/index.js

@@ -44,6 +44,16 @@ export const Bootstrap = {
                             --bs-btn-disabled-bg: var(--bs-${name}) !important;
                             --bs-btn-disabled-border-color: var(--bs-${name}) !important;
                         }
+                        .btn-outline-${name} {
+                            --bs-btn-color: var(--bs-${name}) !important;
+                            --bs-btn-border-color: var(--bs-${name}) !important;
+                            --bs-btn-hover-bg: var(--bs-${name}) !important;
+                            --bs-btn-hover-border-color: var(--bs-${name}) !important;
+                            --bs-btn-active-bg: ${activeColor} !important;
+                            --bs-btn-active-border-color: ${activeColor} !important;
+                            --bs-btn-disabled-color: var(--bs-${name}) !important;
+                            --bs-btn-disabled-border-color: var(--bs-${name}) !important;
+                        }
                         .bg-${name} { background-color: var(--bs-${name}) !important; }
                         .text-${name} { color: var(--bs-${name}) !important; }
                         .border-${name} { border-color: var(--bs-${name}) !important; }

test/bootstrap.spec.js

@@ -39,16 +39,26 @@ test('bootstrap self-contained integration', async ({ page }) => {
         link.className = 'btn btn-link-primary'
         document.body.appendChild(link)
 
+        const outline = document.createElement('button')
+        outline.className = 'btn btn-outline-primary'
+        document.body.appendChild(outline)
+
         const primaryStyle = getComputedStyle(primary)
         const linkStyle = getComputedStyle(link)
+        const outlineStyle = getComputedStyle(outline)
         const result = {
             base: primaryStyle.getPropertyValue('--bs-btn-bg').trim(),
             hover: primaryStyle.getPropertyValue('--bs-btn-hover-bg').trim(),
             link: linkStyle.getPropertyValue('--bs-btn-color').trim(),
-            linkHover: linkStyle.getPropertyValue('--bs-btn-hover-color').trim()
+            linkHover: linkStyle.getPropertyValue('--bs-btn-hover-color').trim(),
+            outline: outlineStyle.getPropertyValue('--bs-btn-color').trim(),
+            outlineBorder: outlineStyle.getPropertyValue('--bs-btn-border-color').trim(),
+            outlineHover: outlineStyle.getPropertyValue('--bs-btn-hover-bg').trim(),
+            outlineActive: outlineStyle.getPropertyValue('--bs-btn-active-bg').trim()
         }
         primary.remove()
         link.remove()
+        outline.remove()
         return result
     })
     expect(buttonColors.base).toBe('#ff0000')
@@ -56,4 +66,8 @@ test('bootstrap self-contained integration', async ({ page }) => {
     expect(buttonColors.hover).not.toBe(buttonColors.base)
     expect(buttonColors.link).toBe('#ff0000')
     expect(buttonColors.linkHover).toBe('#d90000')
+    expect(buttonColors.outline).toBe('#ff0000')
+    expect(buttonColors.outlineBorder).toBe('#ff0000')
+    expect(buttonColors.outlineHover).toBe('#ff0000')
+    expect(buttonColors.outlineActive).toBe('#cc0000')
 });