@yh-ui/theme 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present YH-UI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/component-theme.cjs

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentThemeProps = exports.COMPONENT_THEME_KEY = void 0;
+exports.createComponentThemes = createComponentThemes;
+exports.mergeComponentThemes = mergeComponentThemes;
+exports.provideComponentThemes = provideComponentThemes;
+exports.useComponentTheme = useComponentTheme;
+var _vue = require("vue");
+const COMPONENT_THEME_KEY = exports.COMPONENT_THEME_KEY = Symbol("component-theme");
+const componentThemeProps = exports.componentThemeProps = {
+  /** 组件主题变量覆盖 */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};
+function useComponentTheme(componentName, localOverrides) {
+  const globalThemes = (0, _vue.inject)(COMPONENT_THEME_KEY, {});
+  const mergedVars = (0, _vue.computed)(() => {
+    const globalVars = globalThemes[componentName] || {};
+    const local = (0, _vue.unref)(localOverrides) || {};
+    return {
+      ...globalVars,
+      ...local
+    };
+  });
+  const themeStyle = (0, _vue.computed)(() => {
+    const vars = mergedVars.value;
+    const style = {};
+    Object.entries(vars).forEach(([key, value]) => {
+      if (value !== void 0) {
+        const cssVarName = `--yh-${componentName}-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+        style[cssVarName] = value;
+      }
+    });
+    return style;
+  });
+  const hasCustomTheme = (0, _vue.computed)(() => {
+    return Object.keys(mergedVars.value).length > 0;
+  });
+  return {
+    themeVars: mergedVars,
+    themeStyle,
+    hasCustomTheme
+  };
+}
+function provideComponentThemes(themes) {
+  (0, _vue.provide)(COMPONENT_THEME_KEY, themes);
+}
+function createComponentThemes(themes) {
+  return themes;
+}
+function mergeComponentThemes(base, overrides) {
+  const result = {
+    ...base
+  };
+  Object.keys(overrides).forEach(key => {
+    const baseVars = result[key] || {};
+    const overrideVars = overrides[key] || {};
+    result[key] = {
+      ...baseVars,
+      ...overrideVars
+    };
+  });
+  return result;
+}

package/dist/component-theme.d.ts

@@ -0,0 +1,269 @@
+/**
+ * YH-UI 组件级主题覆盖
+ * @description 支持单个组件实例的主题定制，类似 Naive UI 的 themeOverrides
+ */
+import type { InjectionKey, PropType, ExtractPropTypes } from 'vue';
+import { type MaybeRef } from 'vue';
+/** 组件主题变量 */
+export interface ComponentThemeVars {
+    textColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    hoverBgColor?: string;
+    hoverTextColor?: string;
+    hoverBorderColor?: string;
+    activeBgColor?: string;
+    activeTextColor?: string;
+    activeBorderColor?: string;
+    disabledBgColor?: string;
+    disabledTextColor?: string;
+    disabledBorderColor?: string;
+    height?: string;
+    padding?: string;
+    gap?: string;
+    boxShadow?: string;
+    transition?: string;
+    [key: string]: string | undefined;
+}
+/** 组件主题配置 */
+export interface ComponentTheme<T extends ComponentThemeVars = ComponentThemeVars> {
+    /** 组件类型名称 */
+    name: string;
+    /** 主题变量 */
+    vars: T;
+    /** 是否继承父级主题 */
+    inherit?: boolean;
+}
+/** 全局组件主题覆盖 */
+export type GlobalComponentThemes = Partial<Record<string, ComponentThemeVars>>;
+export declare const COMPONENT_THEME_KEY: InjectionKey<GlobalComponentThemes>;
+export declare const componentThemeProps: {
+    /** 组件主题变量覆盖 */
+    readonly themeOverrides: {
+        readonly type: PropType<ComponentThemeVars>;
+        readonly default: undefined;
+    };
+};
+export type ComponentThemeProps = ExtractPropTypes<typeof componentThemeProps>;
+/**
+ * 使用组件主题
+ * @param componentName 组件名称
+ * @param localOverrides 本地覆盖（props.themeOverrides）
+ * @returns CSS 变量样式对象
+ */
+export declare function useComponentTheme(componentName: string, localOverrides?: MaybeRef<ComponentThemeVars | undefined>): {
+    themeVars: import("vue").ComputedRef<{
+        [x: string]: string | undefined;
+        textColor?: string;
+        bgColor?: string;
+        borderColor?: string;
+        borderRadius?: string;
+        fontSize?: string;
+        fontWeight?: string;
+        hoverBgColor?: string;
+        hoverTextColor?: string;
+        hoverBorderColor?: string;
+        activeBgColor?: string;
+        activeTextColor?: string;
+        activeBorderColor?: string;
+        disabledBgColor?: string;
+        disabledTextColor?: string;
+        disabledBorderColor?: string;
+        height?: string;
+        padding?: string;
+        gap?: string;
+        boxShadow?: string;
+        transition?: string;
+    }>;
+    themeStyle: import("vue").ComputedRef<Record<string, string>>;
+    hasCustomTheme: import("vue").ComputedRef<boolean>;
+};
+/**
+ * 提供全局组件主题
+ * @param themes 组件主题配置
+ */
+export declare function provideComponentThemes(themes: GlobalComponentThemes): void;
+/** Button 组件主题变量 */
+export interface ButtonThemeVars extends ComponentThemeVars {
+    primaryBgColor?: string;
+    primaryTextColor?: string;
+    primaryBorderColor?: string;
+    successBgColor?: string;
+    successTextColor?: string;
+    warningBgColor?: string;
+    warningTextColor?: string;
+    dangerBgColor?: string;
+    dangerTextColor?: string;
+    infoBgColor?: string;
+    infoTextColor?: string;
+    roundBorderRadius?: string;
+}
+/** Input 组件主题变量 */
+export interface InputThemeVars extends ComponentThemeVars {
+    placeholderColor?: string;
+    focusBorderColor?: string;
+    focusShadow?: string;
+    prefixColor?: string;
+    suffixColor?: string;
+}
+/** Select 组件主题变量 */
+export interface SelectThemeVars extends ComponentThemeVars {
+    optionHoverBgColor?: string;
+    optionSelectedBgColor?: string;
+    optionSelectedTextColor?: string;
+    dropdownBgColor?: string;
+    dropdownBorderColor?: string;
+    dropdownShadow?: string;
+}
+/** Table 组件主题变量 */
+export interface TableThemeVars extends ComponentThemeVars {
+    headerBgColor?: string;
+    headerTextColor?: string;
+    rowHoverBgColor?: string;
+    rowStripeBgColor?: string;
+    rowSelectedBgColor?: string;
+    cellPadding?: string;
+    borderWidth?: string;
+}
+/** Card 组件主题变量 */
+export interface CardThemeVars extends ComponentThemeVars {
+    headerBgColor?: string;
+    headerBorderColor?: string;
+    bodyPadding?: string;
+    footerBgColor?: string;
+}
+/** Modal/Dialog 组件主题变量 */
+export interface ModalThemeVars extends ComponentThemeVars {
+    maskBgColor?: string;
+    headerPadding?: string;
+    bodyPadding?: string;
+    footerPadding?: string;
+    closeIconColor?: string;
+    closeIconHoverColor?: string;
+}
+/** Menu 组件主题变量 */
+export interface MenuThemeVars extends ComponentThemeVars {
+    itemHoverBgColor?: string;
+    itemActiveBgColor?: string;
+    itemActiveTextColor?: string;
+    subMenuBgColor?: string;
+    groupTitleColor?: string;
+    iconSize?: string;
+    itemHeight?: string;
+}
+/** Tooltip/Popover 组件主题变量 */
+export interface TooltipThemeVars extends ComponentThemeVars {
+    arrowSize?: string;
+    maxWidth?: string;
+    contentPadding?: string;
+}
+/** Tag 组件主题变量 */
+export interface TagThemeVars extends ComponentThemeVars {
+    closeBtnColor?: string;
+    closeBtnHoverColor?: string;
+    defaultBgColor?: string;
+    primaryBgColor?: string;
+    successBgColor?: string;
+    warningBgColor?: string;
+    dangerBgColor?: string;
+    infoBgColor?: string;
+}
+/** Alert 组件主题变量 */
+export interface AlertThemeVars extends ComponentThemeVars {
+    iconSize?: string;
+    titleFontSize?: string;
+    descriptionFontSize?: string;
+    closeBtnSize?: string;
+    successBgColor?: string;
+    warningBgColor?: string;
+    errorBgColor?: string;
+    infoBgColor?: string;
+}
+/** Tabs 组件主题变量 */
+export interface TabsThemeVars extends ComponentThemeVars {
+    tabGap?: string;
+    tabPadding?: string;
+    tabActiveTextColor?: string;
+    tabActiveBorderColor?: string;
+    tabHoverTextColor?: string;
+    panePadding?: string;
+    inkBarHeight?: string;
+}
+/** Form 组件主题变量 */
+export interface FormThemeVars extends ComponentThemeVars {
+    labelWidth?: string;
+    labelFontSize?: string;
+    labelColor?: string;
+    requiredMarkColor?: string;
+    errorColor?: string;
+    helpColor?: string;
+    itemMarginBottom?: string;
+}
+/** Calendar 组件主题变量 */
+export interface CalendarThemeVars extends ComponentThemeVars {
+    headerBgColor?: string;
+    headerTextColor?: string;
+    titleFontSize?: string;
+    dayFontSize?: string;
+    dayTextColor?: string;
+    dayHoverBgColor?: string;
+    daySelectedBgColor?: string;
+    daySelectedTextColor?: string;
+    todayTextColor?: string;
+    weekendTextColor?: string;
+}
+/** Tree 组件主题变量 */
+export interface TreeThemeVars extends ComponentThemeVars {
+    nodeHoverBgColor?: string;
+    nodeSelectedBgColor?: string;
+    nodeSelectedTextColor?: string;
+    nodeHeight?: string;
+    indentSize?: string;
+    labelFontSize?: string;
+    labelTextColor?: string;
+    expandIconColor?: string;
+    expandIconHoverColor?: string;
+}
+/** Mention 组件主题变量 */
+export interface MentionThemeVars extends ComponentThemeVars {
+    dropdownShadow?: string;
+    dropdownBgColor?: string;
+    optionHoverBgColor?: string;
+    optionActiveTextColor?: string;
+}
+export interface AllComponentThemes {
+    button?: ButtonThemeVars;
+    input?: InputThemeVars;
+    select?: SelectThemeVars;
+    table?: TableThemeVars;
+    card?: CardThemeVars;
+    modal?: ModalThemeVars;
+    dialog?: ModalThemeVars;
+    menu?: MenuThemeVars;
+    tooltip?: TooltipThemeVars;
+    popover?: TooltipThemeVars;
+    tag?: TagThemeVars;
+    alert?: AlertThemeVars;
+    tabs?: TabsThemeVars;
+    form?: FormThemeVars;
+    calendar?: CalendarThemeVars;
+    tree?: TreeThemeVars;
+    mention?: MentionThemeVars;
+    [key: string]: ComponentThemeVars | undefined;
+}
+/**
+ * 创建组件主题配置
+ * @param themes 组件主题配置
+ * @returns 类型安全的组件主题配置
+ */
+export declare function createComponentThemes<T extends AllComponentThemes>(themes: T): T;
+/**
+ * 合并组件主题
+ * @param base 基础主题
+ * @param overrides 覆盖主题
+ * @returns 合并后的主题
+ */
+export declare function mergeComponentThemes(base: AllComponentThemes, overrides: AllComponentThemes): AllComponentThemes;

package/dist/component-theme.mjs

@@ -0,0 +1,54 @@
+import { inject, provide, computed, unref } from "vue";
+export const COMPONENT_THEME_KEY = Symbol("component-theme");
+export const componentThemeProps = {
+  /** 组件主题变量覆盖 */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};
+export function useComponentTheme(componentName, localOverrides) {
+  const globalThemes = inject(COMPONENT_THEME_KEY, {});
+  const mergedVars = computed(() => {
+    const globalVars = globalThemes[componentName] || {};
+    const local = unref(localOverrides) || {};
+    return {
+      ...globalVars,
+      ...local
+    };
+  });
+  const themeStyle = computed(() => {
+    const vars = mergedVars.value;
+    const style = {};
+    Object.entries(vars).forEach(([key, value]) => {
+      if (value !== void 0) {
+        const cssVarName = `--yh-${componentName}-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+        style[cssVarName] = value;
+      }
+    });
+    return style;
+  });
+  const hasCustomTheme = computed(() => {
+    return Object.keys(mergedVars.value).length > 0;
+  });
+  return {
+    themeVars: mergedVars,
+    themeStyle,
+    hasCustomTheme
+  };
+}
+export function provideComponentThemes(themes) {
+  provide(COMPONENT_THEME_KEY, themes);
+}
+export function createComponentThemes(themes) {
+  return themes;
+}
+export function mergeComponentThemes(base, overrides) {
+  const result = { ...base };
+  Object.keys(overrides).forEach((key) => {
+    const baseVars = result[key] || {};
+    const overrideVars = overrides[key] || {};
+    result[key] = { ...baseVars, ...overrideVars };
+  });
+  return result;
+}

package/dist/index.cjs

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _tokens = require("./tokens/index.cjs");
+Object.keys(_tokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokens[key];
+    }
+  });
+});
+var _theme = require("./theme.cjs");
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _theme[key];
+    }
+  });
+});
+var _componentTheme = require("./component-theme.cjs");
+Object.keys(_componentTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _componentTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _componentTheme[key];
+    }
+  });
+});

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @yh-ui/theme - Theme System
+ * @description 设计令牌和主题系统
+ */
+export * from './tokens';
+export * from './theme';
+export * from './component-theme';

package/dist/index.mjs

@@ -0,0 +1,3 @@
+export * from "./tokens/index.mjs";
+export * from "./theme.mjs";
+export * from "./component-theme.mjs";