@slidejs/theme 0.1.3 → 0.1.4

package/README.md

@@ -13,7 +13,7 @@ SlideJS 主题系统 - 运行时 CSS 变量 Hook API
 
 ## 设计理念
 
-### 高级 API（官方支持）
+## 高级 API（官方支持）
 
 使用标准变量名，不针对特定 runner：
 
@@ -258,45 +258,32 @@ interface StandardTheme {
 - `--slidejs-heading-color`
 - `--slidejs-code-background`
 
-## Runner 映射
+## 抽象主题属性
 
-每个 runner 会自动将标准变量映射到自己的变量：
-
-### Swiper
-
-- `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color`
-- `--slidejs-pagination-color` → `--slidejs-swiper-pagination-color`
-
-### Reveal.js
-
-- `--slidejs-background-color` → `--slidejs-revealjs-background-color`
-- `--slidejs-text-color` → `--slidejs-revealjs-text-color`
-
-### Splide
-
-- `--slidejs-arrow-color` → `--slidejs-splide-arrow-color`
-- `--slidejs-pagination-color` → `--slidejs-splide-pagination-color`
-
-## 低级 API（自行使用，风险自负）
-
-如果需要直接设置 runner 特定变量，请自行使用 DOM API：
+主题系统定义了从 Slide 抽象角度的通用主题属性：
 
 ```typescript
-// 不推荐：直接设置 runner 特定变量
-document.documentElement.style.setProperty('--slidejs-swiper-navigation-color', '#ff0000');
-
-// 或使用作用域
-const container = document.getElementById('slides');
-if (container) {
-  container.style.setProperty('--slidejs-swiper-navigation-color', '#ff0000');
+interface StandardTheme {
+  navigationColor?: string; // 导航控件颜色
+  paginationColor?: string; // 分页控件颜色
+  paginationActiveColor?: string; // 分页控件激活状态颜色
+  scrollbarBg?: string; // 滚动条背景色
+  scrollbarDragBg?: string; // 滚动条拖拽颜色
+  arrowColor?: string; // 导航箭头颜色
+  progressBarColor?: string; // 进度指示器颜色
+  backgroundColor?: string; // 幻灯片背景色
+  textColor?: string; // 文本颜色
+  linkColor?: string; // 链接颜色
+  headingColor?: string; // 标题颜色
+  codeBackground?: string; // 代码块背景色
 }
 ```
 
-**警告**：
+**重要**：
 
-- 这些变量不在 SlideJS 官方支持范围内
-- 可能导致兼容性问题
-- 不推荐使用
+- 这些是抽象主题属性，不涉及具体的 runner 实现
+- 各个 runner 可以自由决定如何应用这些抽象属性
+- 例如，`navigationColor` 可能被应用到按钮、箭头或其他导航控件，取决于 runner 的实现
 
 ## 预设主题详情
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/types.ts","../src/presets.ts","../src/hook.ts"],"sourcesContent":["/**\n * @slidejs/theme - 主题系统类型定义\n *\n * 定义标准化的主题配置接口，不针对特定 runner\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\n/**\n * 标准主题配置\n * 使用标准变量名，不包含 runner 名称\n *\n * 这些变量会被所有 runner 自动映射到自己的特定变量\n */\nexport interface StandardTheme {\n  /** 导航按钮颜色 */\n  navigationColor?: string;\n  /** 分页器颜色 */\n  paginationColor?: string;\n  /** 分页器激活颜色 */\n  paginationActiveColor?: string;\n  /** 滚动条背景色 */\n  scrollbarBg?: string;\n  /** 滚动条拖拽颜色 */\n  scrollbarDragBg?: string;\n  /** 箭头颜色（用于 Splide） */\n  arrowColor?: string;\n  /** 进度条颜色 */\n  progressBarColor?: string;\n  /** 背景色 */\n  backgroundColor?: string;\n  /** 文本颜色 */\n  textColor?: string;\n  /** 链接颜色 */\n  linkColor?: string;\n  /** 标题颜色 */\n  headingColor?: string;\n  /** 代码背景色 */\n  codeBackground?: string;\n}\n\n/**\n * 标准 CSS 变量名\n *\n * 这些是 SlideJS 官方支持的标准变量名\n * 所有 runner 会将这些变量映射到自己的特定变量\n */\nexport const STANDARD_CSS_VARIABLES = {\n  navigationColor: '--slidejs-navigation-color',\n  paginationColor: '--slidejs-pagination-color',\n  paginationActiveColor: '--slidejs-pagination-active-color',\n  scrollbarBg: '--slidejs-scrollbar-bg',\n  scrollbarDragBg: '--slidejs-scrollbar-drag-bg',\n  arrowColor: '--slidejs-arrow-color',\n  progressBarColor: '--slidejs-progress-bar-color',\n  backgroundColor: '--slidejs-background-color',\n  textColor: '--slidejs-text-color',\n  linkColor: '--slidejs-link-color',\n  headingColor: '--slidejs-heading-color',\n  codeBackground: '--slidejs-code-background',\n} as const;\n\n/**\n * Runner 特定 CSS 变量映射（仅供内部参考，不导出）\n *\n * 注意：\n * 1. 此接口不导出，仅供内部类型检查使用\n * 2. 实际的映射在 runner 的 CSS 文件中通过 CSS `var()` 函数完成\n * 3. 本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n * 4. 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负\n *\n * 映射关系（仅供参考）：\n * - Reveal.js: `--slidejs-background-color` → `--slidejs-revealjs-background-color`\n * - Swiper: `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color`\n * - Splide: `--slidejs-arrow-color` → `--slidejs-splide-arrow-color`\n *\n * 查看 runner 的 `style.css` 文件了解完整的映射关系。\n */\ninterface RunnerCSSVariableMap {\n  revealjs: {\n    '--slidejs-background-color': string;\n    '--slidejs-text-color': string;\n    '--slidejs-link-color': string;\n    '--slidejs-heading-color': string;\n    '--slidejs-code-background': string;\n  };\n  swiper: {\n    '--slidejs-navigation-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-scrollbar-bg': string;\n    '--slidejs-scrollbar-drag-bg': string;\n  };\n  splide: {\n    '--slidejs-arrow-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-progress-bar-color': string;\n  };\n}\n","/**\n * @slidejs/theme - 预设主题\n *\n * 提供内置的主题预设\n */\n\nimport type { StandardTheme } from './types';\n\n/**\n * 预设主题名称常量\n */\nconst PRESET_THEME_SOLARIZED_DARK = 'solarized-dark' as const;\nconst PRESET_THEME_SOLARIZED_LIGHT = 'solarized-light' as const;\n\n/**\n * Solarized Dark 主题\n *\n * 基于 Solarized 配色方案的深色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedDark: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#002b36', // base03 - 最暗的背景\n  textColor: '#839496', // base0 - 主要文本\n  headingColor: '#93a1a1', // base1 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(131, 148, 150, 0.2)', // base0 with opacity\n  scrollbarDragBg: 'rgba(131, 148, 150, 0.5)', // base0 with opacity\n\n  // 代码\n  codeBackground: '#073642', // base02 - 代码背景\n};\n\n/**\n * Solarized Light 主题\n *\n * 基于 Solarized 配色方案的浅色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedLight: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#fdf6e3', // base3 - 最亮的背景\n  textColor: '#657b83', // base00 - 主要文本\n  headingColor: '#586e75', // base01 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(101, 123, 131, 0.2)', // base00 with opacity\n  scrollbarDragBg: 'rgba(101, 123, 131, 0.5)', // base00 with opacity\n\n  // 代码\n  codeBackground: '#eee8d5', // base2 - 代码背景\n};\n\n/**\n * 预设主题映射\n * 使用常量作为键，确保类型安全\n */\nexport const presets = {\n  [PRESET_THEME_SOLARIZED_DARK]: solarizedDark,\n  [PRESET_THEME_SOLARIZED_LIGHT]: solarizedLight,\n} as const;\n\n/**\n * 预设主题名称类型\n */\nexport type PresetThemeName = keyof typeof presets;\n\n/**\n * 预设主题名称常量对象\n * 提供类型安全的命名空间访问\n */\nexport const Preset = {\n  SolarizedDark: PRESET_THEME_SOLARIZED_DARK,\n  SolarizedLight: PRESET_THEME_SOLARIZED_LIGHT,\n} as const;\n","/**\n * @slidejs/theme - CSS Hook API\n *\n * 提供运行时动态设置标准 CSS 变量的 API\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\nimport type { StandardTheme } from './types';\nimport { STANDARD_CSS_VARIABLES } from './types';\nimport { presets, type PresetThemeName } from './presets';\n\n/**\n * 设置 CSS 变量的辅助函数\n */\nfunction setCSSVariable(\n  element: HTMLElement | Document,\n  variableName: string,\n  value: string\n): void {\n  if (element instanceof Document) {\n    element.documentElement.style.setProperty(variableName, value);\n  } else {\n    element.style.setProperty(variableName, value);\n  }\n}\n\n/**\n * 应用标准主题（高级 API）\n * 设置标准 CSS 变量，runner 会将这些变量映射到自己的变量\n */\nfunction applyStandardTheme(element: HTMLElement | Document, theme: StandardTheme): void {\n  if (theme.navigationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.navigationColor, theme.navigationColor);\n  }\n  if (theme.paginationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.paginationColor, theme.paginationColor);\n  }\n  if (theme.paginationActiveColor) {\n    setCSSVariable(\n      element,\n      STANDARD_CSS_VARIABLES.paginationActiveColor,\n      theme.paginationActiveColor\n    );\n  }\n  if (theme.scrollbarBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarBg, theme.scrollbarBg);\n  }\n  if (theme.scrollbarDragBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarDragBg, theme.scrollbarDragBg);\n  }\n  if (theme.arrowColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.arrowColor, theme.arrowColor);\n  }\n  if (theme.progressBarColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.progressBarColor, theme.progressBarColor);\n  }\n  if (theme.backgroundColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.backgroundColor, theme.backgroundColor);\n  }\n  if (theme.textColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.textColor, theme.textColor);\n  }\n  if (theme.linkColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.linkColor, theme.linkColor);\n  }\n  if (theme.headingColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.headingColor, theme.headingColor);\n  }\n  if (theme.codeBackground) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.codeBackground, theme.codeBackground);\n  }\n}\n\n/**\n * CSS Hook API 类\n *\n * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n */\nexport class SlideThemeHook {\n  private target: HTMLElement | Document;\n\n  /**\n   * 创建主题 Hook 实例\n   *\n   * @param target - 目标元素或文档（默认为 document）\n   */\n  constructor(target?: HTMLElement | Document | string) {\n    if (typeof target === 'string') {\n      const element = document.querySelector(target);\n      if (!element) {\n        throw new Error(`Element not found: ${target}`);\n      }\n      this.target = element as HTMLElement;\n    } else if (target) {\n      this.target = target;\n    } else {\n      this.target = document;\n    }\n  }\n\n  /**\n   * 设置标准主题（高级 API）\n   * 使用标准变量名，不针对特定 runner\n   *\n   * 这是 SlideJS 官方支持的 API\n   *\n   * @param theme - 标准主题配置或预设主题名称\n   */\n  set(theme: StandardTheme | PresetThemeName): void {\n    if (typeof theme === 'string') {\n      const preset = presets[theme];\n      if (!preset) {\n        throw new Error(\n          `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n        );\n      }\n      applyStandardTheme(this.target, preset);\n    } else {\n      applyStandardTheme(this.target, theme);\n    }\n  }\n\n  /**\n   * 获取 CSS 变量值\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   * @returns CSS 变量值\n   */\n  get(variableName: string): string | null {\n    if (this.target instanceof Document) {\n      return getComputedStyle(this.target.documentElement).getPropertyValue(variableName).trim();\n    }\n    return getComputedStyle(this.target).getPropertyValue(variableName).trim();\n  }\n\n  /**\n   * 移除 CSS 变量\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   */\n  remove(variableName: string): void {\n    if (this.target instanceof Document) {\n      this.target.documentElement.style.removeProperty(variableName);\n    } else {\n      this.target.style.removeProperty(variableName);\n    }\n  }\n\n  /**\n   * 清除所有标准主题变量\n   */\n  clear(): void {\n    Object.values(STANDARD_CSS_VARIABLES).forEach(variableName => {\n      this.remove(variableName);\n    });\n  }\n}\n\n/**\n * 全局主题 Hook 实例（作用于 document）\n */\nexport const globalTheme = new SlideThemeHook();\n\n/**\n * 设置全局标准主题（高级 API）\n *\n * 这是 SlideJS 官方支持的 API\n * 使用标准变量名，所有 runner 会自动映射这些变量\n *\n * @param theme - 标准主题配置或预设主题名称\n *\n * @example\n * ```typescript\n * import { setTheme } from '@slidejs/theme';\n *\n * // 使用自定义主题\n * setTheme({\n *   navigationColor: '#ff0000',\n *   paginationColor: '#00ff00',\n * });\n *\n * // 使用预设主题\n * setTheme('solarized-dark');\n * setTheme('solarized-light');\n * ```\n */\nexport function setTheme(theme: StandardTheme | PresetThemeName): void {\n  if (typeof theme === 'string') {\n    const preset = presets[theme];\n    if (!preset) {\n      throw new Error(\n        `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n      );\n    }\n    globalTheme.set(preset);\n  } else {\n    globalTheme.set(theme);\n  }\n}\n\n/**\n * 创建作用域主题 Hook\n *\n * @param selector - CSS 选择器或 HTMLElement\n * @returns 主题 Hook 实例\n *\n * @example\n * ```typescript\n * import { useTheme } from '@slidejs/theme';\n *\n * const theme = useTheme('#my-slides');\n * theme.set({\n *   navigationColor: '#ff0000',\n * });\n * ```\n */\nexport function useTheme(selector?: HTMLElement | string): SlideThemeHook {\n  return new SlideThemeHook(selector);\n}\n"],"names":["STANDARD_CSS_VARIABLES","PRESET_THEME_SOLARIZED_DARK","PRESET_THEME_SOLARIZED_LIGHT","solarizedDark","solarizedLight","presets","Preset","setCSSVariable","element","variableName","value","applyStandardTheme","theme","SlideThemeHook","target","preset","globalTheme","setTheme","useTheme","selector"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/types.ts","../src/presets.ts","../src/hook.ts"],"sourcesContent":["/**\n * @slidejs/theme - 主题系统类型定义\n *\n * 定义抽象的主题配置接口，从 Slide 的角度定义通用主题属性\n * 各个 runner 可以自由决定如何应用这些抽象主题属性\n */\n\n/**\n * 抽象主题配置\n *\n * 从 Slide 的抽象角度定义主题属性，不涉及具体的 runner 实现\n * 各个 runner 可以自由决定如何将这些抽象属性应用到自己的实现中\n */\nexport interface StandardTheme {\n  /** 导航控件颜色 */\n  navigationColor?: string;\n  /** 分页控件颜色 */\n  paginationColor?: string;\n  /** 分页控件激活状态颜色 */\n  paginationActiveColor?: string;\n  /** 滚动条背景色 */\n  scrollbarBg?: string;\n  /** 滚动条拖拽颜色 */\n  scrollbarDragBg?: string;\n  /** 导航箭头颜色 */\n  arrowColor?: string;\n  /** 进度指示器颜色 */\n  progressBarColor?: string;\n  /** 幻灯片背景色 */\n  backgroundColor?: string;\n  /** 文本颜色 */\n  textColor?: string;\n  /** 链接颜色 */\n  linkColor?: string;\n  /** 标题颜色 */\n  headingColor?: string;\n  /** 代码块背景色 */\n  codeBackground?: string;\n}\n\n/**\n * 标准 CSS 变量名\n *\n * 这些是 SlideJS 定义的抽象主题 CSS 变量\n * 各个 runner 可以自由决定如何消费和应用这些变量\n */\nexport const STANDARD_CSS_VARIABLES = {\n  navigationColor: '--slidejs-navigation-color',\n  paginationColor: '--slidejs-pagination-color',\n  paginationActiveColor: '--slidejs-pagination-active-color',\n  scrollbarBg: '--slidejs-scrollbar-bg',\n  scrollbarDragBg: '--slidejs-scrollbar-drag-bg',\n  arrowColor: '--slidejs-arrow-color',\n  progressBarColor: '--slidejs-progress-bar-color',\n  backgroundColor: '--slidejs-background-color',\n  textColor: '--slidejs-text-color',\n  linkColor: '--slidejs-link-color',\n  headingColor: '--slidejs-heading-color',\n  codeBackground: '--slidejs-code-background',\n} as const;\n","/**\n * @slidejs/theme - 预设主题\n *\n * 提供内置的主题预设\n */\n\nimport type { StandardTheme } from './types';\n\n/**\n * 预设主题名称常量\n */\nconst PRESET_THEME_SOLARIZED_DARK = 'solarized-dark' as const;\nconst PRESET_THEME_SOLARIZED_LIGHT = 'solarized-light' as const;\n\n/**\n * Solarized Dark 主题\n *\n * 基于 Solarized 配色方案的深色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedDark: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#002b36', // base03 - 最暗的背景\n  textColor: '#839496', // base0 - 主要文本\n  headingColor: '#93a1a1', // base1 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(131, 148, 150, 0.2)', // base0 with opacity\n  scrollbarDragBg: 'rgba(131, 148, 150, 0.5)', // base0 with opacity\n\n  // 代码\n  codeBackground: '#073642', // base02 - 代码背景\n};\n\n/**\n * Solarized Light 主题\n *\n * 基于 Solarized 配色方案的浅色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedLight: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#fdf6e3', // base3 - 最亮的背景\n  textColor: '#657b83', // base00 - 主要文本\n  headingColor: '#586e75', // base01 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(101, 123, 131, 0.2)', // base00 with opacity\n  scrollbarDragBg: 'rgba(101, 123, 131, 0.5)', // base00 with opacity\n\n  // 代码\n  codeBackground: '#eee8d5', // base2 - 代码背景\n};\n\n/**\n * 预设主题映射\n * 使用常量作为键，确保类型安全\n */\nexport const presets = {\n  [PRESET_THEME_SOLARIZED_DARK]: solarizedDark,\n  [PRESET_THEME_SOLARIZED_LIGHT]: solarizedLight,\n} as const;\n\n/**\n * 预设主题名称类型\n */\nexport type PresetThemeName = keyof typeof presets;\n\n/**\n * 预设主题名称常量对象\n * 提供类型安全的命名空间访问\n */\nexport const Preset = {\n  SolarizedDark: PRESET_THEME_SOLARIZED_DARK,\n  SolarizedLight: PRESET_THEME_SOLARIZED_LIGHT,\n} as const;\n","/**\n * @slidejs/theme - CSS Hook API\n *\n * 提供运行时动态设置标准 CSS 变量的 API\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\nimport type { StandardTheme } from './types';\nimport { STANDARD_CSS_VARIABLES } from './types';\nimport { presets, type PresetThemeName } from './presets';\n\n/**\n * 设置 CSS 变量的辅助函数\n */\nfunction setCSSVariable(\n  element: HTMLElement | Document,\n  variableName: string,\n  value: string\n): void {\n  if (element instanceof Document) {\n    element.documentElement.style.setProperty(variableName, value);\n  } else {\n    element.style.setProperty(variableName, value);\n  }\n}\n\n/**\n * 应用抽象主题\n * 设置抽象主题 CSS 变量，各个 runner 可以自由决定如何应用这些变量\n */\nfunction applyStandardTheme(element: HTMLElement | Document, theme: StandardTheme): void {\n  if (theme.navigationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.navigationColor, theme.navigationColor);\n  }\n  if (theme.paginationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.paginationColor, theme.paginationColor);\n  }\n  if (theme.paginationActiveColor) {\n    setCSSVariable(\n      element,\n      STANDARD_CSS_VARIABLES.paginationActiveColor,\n      theme.paginationActiveColor\n    );\n  }\n  if (theme.scrollbarBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarBg, theme.scrollbarBg);\n  }\n  if (theme.scrollbarDragBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarDragBg, theme.scrollbarDragBg);\n  }\n  if (theme.arrowColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.arrowColor, theme.arrowColor);\n  }\n  if (theme.progressBarColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.progressBarColor, theme.progressBarColor);\n  }\n  if (theme.backgroundColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.backgroundColor, theme.backgroundColor);\n  }\n  if (theme.textColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.textColor, theme.textColor);\n  }\n  if (theme.linkColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.linkColor, theme.linkColor);\n  }\n  if (theme.headingColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.headingColor, theme.headingColor);\n  }\n  if (theme.codeBackground) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.codeBackground, theme.codeBackground);\n  }\n}\n\n/**\n * CSS Hook API 类\n *\n * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n */\nexport class SlideThemeHook {\n  private target: HTMLElement | Document;\n\n  /**\n   * 创建主题 Hook 实例\n   *\n   * @param target - 目标元素或文档（默认为 document）\n   */\n  constructor(target?: HTMLElement | Document | string) {\n    if (typeof target === 'string') {\n      const element = document.querySelector(target);\n      if (!element) {\n        throw new Error(`Element not found: ${target}`);\n      }\n      this.target = element as HTMLElement;\n    } else if (target) {\n      this.target = target;\n    } else {\n      this.target = document;\n    }\n  }\n\n  /**\n   * 设置标准主题（高级 API）\n   * 使用标准变量名，不针对特定 runner\n   *\n   * 这是 SlideJS 官方支持的 API\n   *\n   * @param theme - 标准主题配置或预设主题名称\n   */\n  set(theme: StandardTheme | PresetThemeName): void {\n    if (typeof theme === 'string') {\n      const preset = presets[theme];\n      if (!preset) {\n        throw new Error(\n          `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n        );\n      }\n      applyStandardTheme(this.target, preset);\n    } else {\n      applyStandardTheme(this.target, theme);\n    }\n  }\n\n  /**\n   * 获取 CSS 变量值\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   * @returns CSS 变量值\n   */\n  get(variableName: string): string | null {\n    if (this.target instanceof Document) {\n      return getComputedStyle(this.target.documentElement).getPropertyValue(variableName).trim();\n    }\n    return getComputedStyle(this.target).getPropertyValue(variableName).trim();\n  }\n\n  /**\n   * 移除 CSS 变量\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   */\n  remove(variableName: string): void {\n    if (this.target instanceof Document) {\n      this.target.documentElement.style.removeProperty(variableName);\n    } else {\n      this.target.style.removeProperty(variableName);\n    }\n  }\n\n  /**\n   * 清除所有标准主题变量\n   */\n  clear(): void {\n    Object.values(STANDARD_CSS_VARIABLES).forEach(variableName => {\n      this.remove(variableName);\n    });\n  }\n}\n\n/**\n * 全局主题 Hook 实例（作用于 document）\n */\nexport const globalTheme = new SlideThemeHook();\n\n/**\n * 设置全局标准主题（高级 API）\n *\n * 这是 SlideJS 官方支持的 API\n * 使用标准变量名，所有 runner 会自动映射这些变量\n *\n * @param theme - 标准主题配置或预设主题名称\n *\n * @example\n * ```typescript\n * import { setTheme } from '@slidejs/theme';\n *\n * // 使用自定义主题\n * setTheme({\n *   navigationColor: '#ff0000',\n *   paginationColor: '#00ff00',\n * });\n *\n * // 使用预设主题\n * setTheme('solarized-dark');\n * setTheme('solarized-light');\n * ```\n */\nexport function setTheme(theme: StandardTheme | PresetThemeName): void {\n  if (typeof theme === 'string') {\n    const preset = presets[theme];\n    if (!preset) {\n      throw new Error(\n        `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n      );\n    }\n    globalTheme.set(preset);\n  } else {\n    globalTheme.set(theme);\n  }\n}\n\n/**\n * 创建作用域主题 Hook\n *\n * @param selector - CSS 选择器或 HTMLElement\n * @returns 主题 Hook 实例\n *\n * @example\n * ```typescript\n * import { useTheme } from '@slidejs/theme';\n *\n * const theme = useTheme('#my-slides');\n * theme.set({\n *   navigationColor: '#ff0000',\n * });\n * ```\n */\nexport function useTheme(selector?: HTMLElement | string): SlideThemeHook {\n  return new SlideThemeHook(selector);\n}\n"],"names":["STANDARD_CSS_VARIABLES","PRESET_THEME_SOLARIZED_DARK","PRESET_THEME_SOLARIZED_LIGHT","solarizedDark","solarizedLight","presets","Preset","setCSSVariable","element","variableName","value","applyStandardTheme","theme","SlideThemeHook","target","preset","globalTheme","setTheme","useTheme","selector"],"mappings":"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"}

package/dist/index.d.ts

@@ -111,8 +111,8 @@ export declare const solarizedLight: StandardTheme;
 /**
  * 标准 CSS 变量名
  *
- * 这些是 SlideJS 官方支持的标准变量名
- * 所有 runner 会将这些变量映射到自己的特定变量
+ * 这些是 SlideJS 定义的抽象主题 CSS 变量
+ * 各个 runner 可以自由决定如何消费和应用这些变量
  */
 export declare const STANDARD_CSS_VARIABLES: {
     readonly navigationColor: "--slidejs-navigation-color";
@@ -132,33 +132,31 @@ export declare const STANDARD_CSS_VARIABLES: {
 /**
  * @slidejs/theme - 主题系统类型定义
  *
- * 定义标准化的主题配置接口，不针对特定 runner
- *
- * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。
- * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。
+ * 定义抽象的主题配置接口，从 Slide 的角度定义通用主题属性
+ * 各个 runner 可以自由决定如何应用这些抽象主题属性
  */
 /**
- * 标准主题配置
- * 使用标准变量名，不包含 runner 名称
+ * 抽象主题配置
  *
- * 这些变量会被所有 runner 自动映射到自己的特定变量
+ * 从 Slide 的抽象角度定义主题属性，不涉及具体的 runner 实现
+ * 各个 runner 可以自由决定如何将这些抽象属性应用到自己的实现中
  */
 export declare interface StandardTheme {
-    /** 导航按钮颜色 */
+    /** 导航控件颜色 */
     navigationColor?: string;
-    /** 分页器颜色 */
+    /** 分页控件颜色 */
     paginationColor?: string;
-    /** 分页器激活颜色 */
+    /** 分页控件激活状态颜色 */
     paginationActiveColor?: string;
     /** 滚动条背景色 */
     scrollbarBg?: string;
     /** 滚动条拖拽颜色 */
     scrollbarDragBg?: string;
-    /** 箭头颜色（用于 Splide） */
+    /** 导航箭头颜色 */
     arrowColor?: string;
-    /** 进度条颜色 */
+    /** 进度指示器颜色 */
     progressBarColor?: string;
-    /** 背景色 */
+    /** 幻灯片背景色 */
     backgroundColor?: string;
     /** 文本颜色 */
     textColor?: string;
@@ -166,7 +164,7 @@ export declare interface StandardTheme {
     linkColor?: string;
     /** 标题颜色 */
     headingColor?: string;
-    /** 代码背景色 */
+    /** 代码块背景色 */
     codeBackground?: string;
 }
 

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/types.ts","../src/presets.ts","../src/hook.ts"],"sourcesContent":["/**\n * @slidejs/theme - 主题系统类型定义\n *\n * 定义标准化的主题配置接口，不针对特定 runner\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\n/**\n * 标准主题配置\n * 使用标准变量名，不包含 runner 名称\n *\n * 这些变量会被所有 runner 自动映射到自己的特定变量\n */\nexport interface StandardTheme {\n  /** 导航按钮颜色 */\n  navigationColor?: string;\n  /** 分页器颜色 */\n  paginationColor?: string;\n  /** 分页器激活颜色 */\n  paginationActiveColor?: string;\n  /** 滚动条背景色 */\n  scrollbarBg?: string;\n  /** 滚动条拖拽颜色 */\n  scrollbarDragBg?: string;\n  /** 箭头颜色（用于 Splide） */\n  arrowColor?: string;\n  /** 进度条颜色 */\n  progressBarColor?: string;\n  /** 背景色 */\n  backgroundColor?: string;\n  /** 文本颜色 */\n  textColor?: string;\n  /** 链接颜色 */\n  linkColor?: string;\n  /** 标题颜色 */\n  headingColor?: string;\n  /** 代码背景色 */\n  codeBackground?: string;\n}\n\n/**\n * 标准 CSS 变量名\n *\n * 这些是 SlideJS 官方支持的标准变量名\n * 所有 runner 会将这些变量映射到自己的特定变量\n */\nexport const STANDARD_CSS_VARIABLES = {\n  navigationColor: '--slidejs-navigation-color',\n  paginationColor: '--slidejs-pagination-color',\n  paginationActiveColor: '--slidejs-pagination-active-color',\n  scrollbarBg: '--slidejs-scrollbar-bg',\n  scrollbarDragBg: '--slidejs-scrollbar-drag-bg',\n  arrowColor: '--slidejs-arrow-color',\n  progressBarColor: '--slidejs-progress-bar-color',\n  backgroundColor: '--slidejs-background-color',\n  textColor: '--slidejs-text-color',\n  linkColor: '--slidejs-link-color',\n  headingColor: '--slidejs-heading-color',\n  codeBackground: '--slidejs-code-background',\n} as const;\n\n/**\n * Runner 特定 CSS 变量映射（仅供内部参考，不导出）\n *\n * 注意：\n * 1. 此接口不导出，仅供内部类型检查使用\n * 2. 实际的映射在 runner 的 CSS 文件中通过 CSS `var()` 函数完成\n * 3. 本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n * 4. 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负\n *\n * 映射关系（仅供参考）：\n * - Reveal.js: `--slidejs-background-color` → `--slidejs-revealjs-background-color`\n * - Swiper: `--slidejs-navigation-color` → `--slidejs-swiper-navigation-color`\n * - Splide: `--slidejs-arrow-color` → `--slidejs-splide-arrow-color`\n *\n * 查看 runner 的 `style.css` 文件了解完整的映射关系。\n */\ninterface RunnerCSSVariableMap {\n  revealjs: {\n    '--slidejs-background-color': string;\n    '--slidejs-text-color': string;\n    '--slidejs-link-color': string;\n    '--slidejs-heading-color': string;\n    '--slidejs-code-background': string;\n  };\n  swiper: {\n    '--slidejs-navigation-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-scrollbar-bg': string;\n    '--slidejs-scrollbar-drag-bg': string;\n  };\n  splide: {\n    '--slidejs-arrow-color': string;\n    '--slidejs-pagination-color': string;\n    '--slidejs-pagination-active-color': string;\n    '--slidejs-progress-bar-color': string;\n  };\n}\n","/**\n * @slidejs/theme - 预设主题\n *\n * 提供内置的主题预设\n */\n\nimport type { StandardTheme } from './types';\n\n/**\n * 预设主题名称常量\n */\nconst PRESET_THEME_SOLARIZED_DARK = 'solarized-dark' as const;\nconst PRESET_THEME_SOLARIZED_LIGHT = 'solarized-light' as const;\n\n/**\n * Solarized Dark 主题\n *\n * 基于 Solarized 配色方案的深色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedDark: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#002b36', // base03 - 最暗的背景\n  textColor: '#839496', // base0 - 主要文本\n  headingColor: '#93a1a1', // base1 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(131, 148, 150, 0.2)', // base0 with opacity\n  scrollbarDragBg: 'rgba(131, 148, 150, 0.5)', // base0 with opacity\n\n  // 代码\n  codeBackground: '#073642', // base02 - 代码背景\n};\n\n/**\n * Solarized Light 主题\n *\n * 基于 Solarized 配色方案的浅色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedLight: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#fdf6e3', // base3 - 最亮的背景\n  textColor: '#657b83', // base00 - 主要文本\n  headingColor: '#586e75', // base01 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(101, 123, 131, 0.2)', // base00 with opacity\n  scrollbarDragBg: 'rgba(101, 123, 131, 0.5)', // base00 with opacity\n\n  // 代码\n  codeBackground: '#eee8d5', // base2 - 代码背景\n};\n\n/**\n * 预设主题映射\n * 使用常量作为键，确保类型安全\n */\nexport const presets = {\n  [PRESET_THEME_SOLARIZED_DARK]: solarizedDark,\n  [PRESET_THEME_SOLARIZED_LIGHT]: solarizedLight,\n} as const;\n\n/**\n * 预设主题名称类型\n */\nexport type PresetThemeName = keyof typeof presets;\n\n/**\n * 预设主题名称常量对象\n * 提供类型安全的命名空间访问\n */\nexport const Preset = {\n  SolarizedDark: PRESET_THEME_SOLARIZED_DARK,\n  SolarizedLight: PRESET_THEME_SOLARIZED_LIGHT,\n} as const;\n","/**\n * @slidejs/theme - CSS Hook API\n *\n * 提供运行时动态设置标准 CSS 变量的 API\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\nimport type { StandardTheme } from './types';\nimport { STANDARD_CSS_VARIABLES } from './types';\nimport { presets, type PresetThemeName } from './presets';\n\n/**\n * 设置 CSS 变量的辅助函数\n */\nfunction setCSSVariable(\n  element: HTMLElement | Document,\n  variableName: string,\n  value: string\n): void {\n  if (element instanceof Document) {\n    element.documentElement.style.setProperty(variableName, value);\n  } else {\n    element.style.setProperty(variableName, value);\n  }\n}\n\n/**\n * 应用标准主题（高级 API）\n * 设置标准 CSS 变量，runner 会将这些变量映射到自己的变量\n */\nfunction applyStandardTheme(element: HTMLElement | Document, theme: StandardTheme): void {\n  if (theme.navigationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.navigationColor, theme.navigationColor);\n  }\n  if (theme.paginationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.paginationColor, theme.paginationColor);\n  }\n  if (theme.paginationActiveColor) {\n    setCSSVariable(\n      element,\n      STANDARD_CSS_VARIABLES.paginationActiveColor,\n      theme.paginationActiveColor\n    );\n  }\n  if (theme.scrollbarBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarBg, theme.scrollbarBg);\n  }\n  if (theme.scrollbarDragBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarDragBg, theme.scrollbarDragBg);\n  }\n  if (theme.arrowColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.arrowColor, theme.arrowColor);\n  }\n  if (theme.progressBarColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.progressBarColor, theme.progressBarColor);\n  }\n  if (theme.backgroundColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.backgroundColor, theme.backgroundColor);\n  }\n  if (theme.textColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.textColor, theme.textColor);\n  }\n  if (theme.linkColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.linkColor, theme.linkColor);\n  }\n  if (theme.headingColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.headingColor, theme.headingColor);\n  }\n  if (theme.codeBackground) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.codeBackground, theme.codeBackground);\n  }\n}\n\n/**\n * CSS Hook API 类\n *\n * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n */\nexport class SlideThemeHook {\n  private target: HTMLElement | Document;\n\n  /**\n   * 创建主题 Hook 实例\n   *\n   * @param target - 目标元素或文档（默认为 document）\n   */\n  constructor(target?: HTMLElement | Document | string) {\n    if (typeof target === 'string') {\n      const element = document.querySelector(target);\n      if (!element) {\n        throw new Error(`Element not found: ${target}`);\n      }\n      this.target = element as HTMLElement;\n    } else if (target) {\n      this.target = target;\n    } else {\n      this.target = document;\n    }\n  }\n\n  /**\n   * 设置标准主题（高级 API）\n   * 使用标准变量名，不针对特定 runner\n   *\n   * 这是 SlideJS 官方支持的 API\n   *\n   * @param theme - 标准主题配置或预设主题名称\n   */\n  set(theme: StandardTheme | PresetThemeName): void {\n    if (typeof theme === 'string') {\n      const preset = presets[theme];\n      if (!preset) {\n        throw new Error(\n          `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n        );\n      }\n      applyStandardTheme(this.target, preset);\n    } else {\n      applyStandardTheme(this.target, theme);\n    }\n  }\n\n  /**\n   * 获取 CSS 变量值\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   * @returns CSS 变量值\n   */\n  get(variableName: string): string | null {\n    if (this.target instanceof Document) {\n      return getComputedStyle(this.target.documentElement).getPropertyValue(variableName).trim();\n    }\n    return getComputedStyle(this.target).getPropertyValue(variableName).trim();\n  }\n\n  /**\n   * 移除 CSS 变量\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   */\n  remove(variableName: string): void {\n    if (this.target instanceof Document) {\n      this.target.documentElement.style.removeProperty(variableName);\n    } else {\n      this.target.style.removeProperty(variableName);\n    }\n  }\n\n  /**\n   * 清除所有标准主题变量\n   */\n  clear(): void {\n    Object.values(STANDARD_CSS_VARIABLES).forEach(variableName => {\n      this.remove(variableName);\n    });\n  }\n}\n\n/**\n * 全局主题 Hook 实例（作用于 document）\n */\nexport const globalTheme = new SlideThemeHook();\n\n/**\n * 设置全局标准主题（高级 API）\n *\n * 这是 SlideJS 官方支持的 API\n * 使用标准变量名，所有 runner 会自动映射这些变量\n *\n * @param theme - 标准主题配置或预设主题名称\n *\n * @example\n * ```typescript\n * import { setTheme } from '@slidejs/theme';\n *\n * // 使用自定义主题\n * setTheme({\n *   navigationColor: '#ff0000',\n *   paginationColor: '#00ff00',\n * });\n *\n * // 使用预设主题\n * setTheme('solarized-dark');\n * setTheme('solarized-light');\n * ```\n */\nexport function setTheme(theme: StandardTheme | PresetThemeName): void {\n  if (typeof theme === 'string') {\n    const preset = presets[theme];\n    if (!preset) {\n      throw new Error(\n        `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n      );\n    }\n    globalTheme.set(preset);\n  } else {\n    globalTheme.set(theme);\n  }\n}\n\n/**\n * 创建作用域主题 Hook\n *\n * @param selector - CSS 选择器或 HTMLElement\n * @returns 主题 Hook 实例\n *\n * @example\n * ```typescript\n * import { useTheme } from '@slidejs/theme';\n *\n * const theme = useTheme('#my-slides');\n * theme.set({\n *   navigationColor: '#ff0000',\n * });\n * ```\n */\nexport function useTheme(selector?: HTMLElement | string): SlideThemeHook {\n  return new SlideThemeHook(selector);\n}\n"],"names":["STANDARD_CSS_VARIABLES","PRESET_THEME_SOLARIZED_DARK","PRESET_THEME_SOLARIZED_LIGHT","solarizedDark","solarizedLight","presets","Preset","setCSSVariable","element","variableName","value","applyStandardTheme","theme","SlideThemeHook","target","preset","globalTheme","setTheme","useTheme","selector"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../src/types.ts","../src/presets.ts","../src/hook.ts"],"sourcesContent":["/**\n * @slidejs/theme - 主题系统类型定义\n *\n * 定义抽象的主题配置接口，从 Slide 的角度定义通用主题属性\n * 各个 runner 可以自由决定如何应用这些抽象主题属性\n */\n\n/**\n * 抽象主题配置\n *\n * 从 Slide 的抽象角度定义主题属性，不涉及具体的 runner 实现\n * 各个 runner 可以自由决定如何将这些抽象属性应用到自己的实现中\n */\nexport interface StandardTheme {\n  /** 导航控件颜色 */\n  navigationColor?: string;\n  /** 分页控件颜色 */\n  paginationColor?: string;\n  /** 分页控件激活状态颜色 */\n  paginationActiveColor?: string;\n  /** 滚动条背景色 */\n  scrollbarBg?: string;\n  /** 滚动条拖拽颜色 */\n  scrollbarDragBg?: string;\n  /** 导航箭头颜色 */\n  arrowColor?: string;\n  /** 进度指示器颜色 */\n  progressBarColor?: string;\n  /** 幻灯片背景色 */\n  backgroundColor?: string;\n  /** 文本颜色 */\n  textColor?: string;\n  /** 链接颜色 */\n  linkColor?: string;\n  /** 标题颜色 */\n  headingColor?: string;\n  /** 代码块背景色 */\n  codeBackground?: string;\n}\n\n/**\n * 标准 CSS 变量名\n *\n * 这些是 SlideJS 定义的抽象主题 CSS 变量\n * 各个 runner 可以自由决定如何消费和应用这些变量\n */\nexport const STANDARD_CSS_VARIABLES = {\n  navigationColor: '--slidejs-navigation-color',\n  paginationColor: '--slidejs-pagination-color',\n  paginationActiveColor: '--slidejs-pagination-active-color',\n  scrollbarBg: '--slidejs-scrollbar-bg',\n  scrollbarDragBg: '--slidejs-scrollbar-drag-bg',\n  arrowColor: '--slidejs-arrow-color',\n  progressBarColor: '--slidejs-progress-bar-color',\n  backgroundColor: '--slidejs-background-color',\n  textColor: '--slidejs-text-color',\n  linkColor: '--slidejs-link-color',\n  headingColor: '--slidejs-heading-color',\n  codeBackground: '--slidejs-code-background',\n} as const;\n","/**\n * @slidejs/theme - 预设主题\n *\n * 提供内置的主题预设\n */\n\nimport type { StandardTheme } from './types';\n\n/**\n * 预设主题名称常量\n */\nconst PRESET_THEME_SOLARIZED_DARK = 'solarized-dark' as const;\nconst PRESET_THEME_SOLARIZED_LIGHT = 'solarized-light' as const;\n\n/**\n * Solarized Dark 主题\n *\n * 基于 Solarized 配色方案的深色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedDark: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#002b36', // base03 - 最暗的背景\n  textColor: '#839496', // base0 - 主要文本\n  headingColor: '#93a1a1', // base1 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(131, 148, 150, 0.2)', // base0 with opacity\n  scrollbarDragBg: 'rgba(131, 148, 150, 0.5)', // base0 with opacity\n\n  // 代码\n  codeBackground: '#073642', // base02 - 代码背景\n};\n\n/**\n * Solarized Light 主题\n *\n * 基于 Solarized 配色方案的浅色主题\n * 参考：https://ethanschoonover.com/solarized/\n */\nexport const solarizedLight: StandardTheme = {\n  // 基础颜色\n  backgroundColor: '#fdf6e3', // base3 - 最亮的背景\n  textColor: '#657b83', // base00 - 主要文本\n  headingColor: '#586e75', // base01 - 标题文本\n  linkColor: '#268bd2', // blue - 链接颜色\n\n  // 导航和分页\n  navigationColor: '#268bd2', // blue - 导航按钮\n  paginationColor: '#268bd2', // blue - 分页器\n  paginationActiveColor: '#2aa198', // cyan - 激活状态\n  arrowColor: '#268bd2', // blue - 箭头（Splide）\n  progressBarColor: '#2aa198', // cyan - 进度条\n\n  // 滚动条\n  scrollbarBg: 'rgba(101, 123, 131, 0.2)', // base00 with opacity\n  scrollbarDragBg: 'rgba(101, 123, 131, 0.5)', // base00 with opacity\n\n  // 代码\n  codeBackground: '#eee8d5', // base2 - 代码背景\n};\n\n/**\n * 预设主题映射\n * 使用常量作为键，确保类型安全\n */\nexport const presets = {\n  [PRESET_THEME_SOLARIZED_DARK]: solarizedDark,\n  [PRESET_THEME_SOLARIZED_LIGHT]: solarizedLight,\n} as const;\n\n/**\n * 预设主题名称类型\n */\nexport type PresetThemeName = keyof typeof presets;\n\n/**\n * 预设主题名称常量对象\n * 提供类型安全的命名空间访问\n */\nexport const Preset = {\n  SolarizedDark: PRESET_THEME_SOLARIZED_DARK,\n  SolarizedLight: PRESET_THEME_SOLARIZED_LIGHT,\n} as const;\n","/**\n * @slidejs/theme - CSS Hook API\n *\n * 提供运行时动态设置标准 CSS 变量的 API\n *\n * 注意：本包只提供高级 API（标准变量），不提供低级 API（runner 特定变量）。\n * 如果需要直接设置 runner 特定变量，请自行使用 DOM API，风险自负。\n */\n\nimport type { StandardTheme } from './types';\nimport { STANDARD_CSS_VARIABLES } from './types';\nimport { presets, type PresetThemeName } from './presets';\n\n/**\n * 设置 CSS 变量的辅助函数\n */\nfunction setCSSVariable(\n  element: HTMLElement | Document,\n  variableName: string,\n  value: string\n): void {\n  if (element instanceof Document) {\n    element.documentElement.style.setProperty(variableName, value);\n  } else {\n    element.style.setProperty(variableName, value);\n  }\n}\n\n/**\n * 应用抽象主题\n * 设置抽象主题 CSS 变量，各个 runner 可以自由决定如何应用这些变量\n */\nfunction applyStandardTheme(element: HTMLElement | Document, theme: StandardTheme): void {\n  if (theme.navigationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.navigationColor, theme.navigationColor);\n  }\n  if (theme.paginationColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.paginationColor, theme.paginationColor);\n  }\n  if (theme.paginationActiveColor) {\n    setCSSVariable(\n      element,\n      STANDARD_CSS_VARIABLES.paginationActiveColor,\n      theme.paginationActiveColor\n    );\n  }\n  if (theme.scrollbarBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarBg, theme.scrollbarBg);\n  }\n  if (theme.scrollbarDragBg) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.scrollbarDragBg, theme.scrollbarDragBg);\n  }\n  if (theme.arrowColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.arrowColor, theme.arrowColor);\n  }\n  if (theme.progressBarColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.progressBarColor, theme.progressBarColor);\n  }\n  if (theme.backgroundColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.backgroundColor, theme.backgroundColor);\n  }\n  if (theme.textColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.textColor, theme.textColor);\n  }\n  if (theme.linkColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.linkColor, theme.linkColor);\n  }\n  if (theme.headingColor) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.headingColor, theme.headingColor);\n  }\n  if (theme.codeBackground) {\n    setCSSVariable(element, STANDARD_CSS_VARIABLES.codeBackground, theme.codeBackground);\n  }\n}\n\n/**\n * CSS Hook API 类\n *\n * 只提供高级 API（标准变量），不提供低级 API（runner 特定变量）\n */\nexport class SlideThemeHook {\n  private target: HTMLElement | Document;\n\n  /**\n   * 创建主题 Hook 实例\n   *\n   * @param target - 目标元素或文档（默认为 document）\n   */\n  constructor(target?: HTMLElement | Document | string) {\n    if (typeof target === 'string') {\n      const element = document.querySelector(target);\n      if (!element) {\n        throw new Error(`Element not found: ${target}`);\n      }\n      this.target = element as HTMLElement;\n    } else if (target) {\n      this.target = target;\n    } else {\n      this.target = document;\n    }\n  }\n\n  /**\n   * 设置标准主题（高级 API）\n   * 使用标准变量名，不针对特定 runner\n   *\n   * 这是 SlideJS 官方支持的 API\n   *\n   * @param theme - 标准主题配置或预设主题名称\n   */\n  set(theme: StandardTheme | PresetThemeName): void {\n    if (typeof theme === 'string') {\n      const preset = presets[theme];\n      if (!preset) {\n        throw new Error(\n          `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n        );\n      }\n      applyStandardTheme(this.target, preset);\n    } else {\n      applyStandardTheme(this.target, theme);\n    }\n  }\n\n  /**\n   * 获取 CSS 变量值\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   * @returns CSS 变量值\n   */\n  get(variableName: string): string | null {\n    if (this.target instanceof Document) {\n      return getComputedStyle(this.target.documentElement).getPropertyValue(variableName).trim();\n    }\n    return getComputedStyle(this.target).getPropertyValue(variableName).trim();\n  }\n\n  /**\n   * 移除 CSS 变量\n   *\n   * @param variableName - CSS 变量名（标准变量或 runner 特定变量）\n   */\n  remove(variableName: string): void {\n    if (this.target instanceof Document) {\n      this.target.documentElement.style.removeProperty(variableName);\n    } else {\n      this.target.style.removeProperty(variableName);\n    }\n  }\n\n  /**\n   * 清除所有标准主题变量\n   */\n  clear(): void {\n    Object.values(STANDARD_CSS_VARIABLES).forEach(variableName => {\n      this.remove(variableName);\n    });\n  }\n}\n\n/**\n * 全局主题 Hook 实例（作用于 document）\n */\nexport const globalTheme = new SlideThemeHook();\n\n/**\n * 设置全局标准主题（高级 API）\n *\n * 这是 SlideJS 官方支持的 API\n * 使用标准变量名，所有 runner 会自动映射这些变量\n *\n * @param theme - 标准主题配置或预设主题名称\n *\n * @example\n * ```typescript\n * import { setTheme } from '@slidejs/theme';\n *\n * // 使用自定义主题\n * setTheme({\n *   navigationColor: '#ff0000',\n *   paginationColor: '#00ff00',\n * });\n *\n * // 使用预设主题\n * setTheme('solarized-dark');\n * setTheme('solarized-light');\n * ```\n */\nexport function setTheme(theme: StandardTheme | PresetThemeName): void {\n  if (typeof theme === 'string') {\n    const preset = presets[theme];\n    if (!preset) {\n      throw new Error(\n        `Unknown preset theme: ${theme}. Available presets: ${Object.keys(presets).join(', ')}`\n      );\n    }\n    globalTheme.set(preset);\n  } else {\n    globalTheme.set(theme);\n  }\n}\n\n/**\n * 创建作用域主题 Hook\n *\n * @param selector - CSS 选择器或 HTMLElement\n * @returns 主题 Hook 实例\n *\n * @example\n * ```typescript\n * import { useTheme } from '@slidejs/theme';\n *\n * const theme = useTheme('#my-slides');\n * theme.set({\n *   navigationColor: '#ff0000',\n * });\n * ```\n */\nexport function useTheme(selector?: HTMLElement | string): SlideThemeHook {\n  return new SlideThemeHook(selector);\n}\n"],"names":["STANDARD_CSS_VARIABLES","PRESET_THEME_SOLARIZED_DARK","PRESET_THEME_SOLARIZED_LIGHT","solarizedDark","solarizedLight","presets","Preset","setCSSVariable","element","variableName","value","applyStandardTheme","theme","SlideThemeHook","target","preset","globalTheme","setTheme","useTheme","selector"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidejs/theme",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "SlideJS Theme System - Runtime CSS Variable Hook API",
   "type": "module",
   "main": "./dist/index.cjs",