@oinone/kunlun-theme 6.3.0 → 6.4.0

package/dist/types/src/style/default-minimalism/datetime/datetime.d.ts

@@ -0,0 +1,9 @@
+export declare const component = "datetime";
+export declare const cssVars: {
+    padding: string;
+    'text-color-hover': string;
+    'text-color-active': string;
+    'text-color-selected': string;
+    'cell-internal-text-color-hover': string;
+    'background-hover': string;
+};

package/dist/types/src/style/default-minimalism/drawer/drawer.d.ts

@@ -0,0 +1,9 @@
+export declare const component = "drawer";
+export declare const cssVars: {
+    'width-small': string;
+    'width-medium': string;
+    'width-large': string;
+    'height-small': string;
+    'height-medium': string;
+    'height-large': string;
+};

package/dist/types/src/style/default-minimalism/dropdown/index.d.ts

@@ -0,0 +1,14 @@
+export declare const component = "dropdown";
+export declare const cssVars: {
+    'background-color': string;
+    'background-hover': string;
+    'border-color': string;
+    'box-shadow': string;
+    color: string;
+    'color-hover': string;
+    'color-disabled': string;
+    'color-disabled-hover': string;
+    'item-background-color-hover': string;
+    'item-background-color-disabled-hover': string;
+    'button-text-color': string;
+};

package/dist/types/src/style/default-minimalism/form-item/form-item.d.ts

@@ -0,0 +1,9 @@
+export declare const component = "form-item";
+export declare const cssVars: {
+    config: {
+        readonlyShowPlaceholder: boolean;
+        disabledShowPlaceholder: boolean;
+    };
+    'label-color': string;
+    'label-weight': string;
+};

package/dist/types/src/style/default-minimalism/header/header.d.ts

@@ -0,0 +1,5 @@
+export declare const component = "header";
+export declare const cssVars: {
+    'border-bottom': string;
+    color: string;
+};

package/dist/types/src/style/default-minimalism/index.d.ts

@@ -0,0 +1 @@
+export * from './registry';

package/dist/types/src/style/default-minimalism/input/input.d.ts

@@ -0,0 +1,38 @@
+export declare const component = "input";
+export declare const cssVars: {
+    background: string;
+    'background-color': string;
+    'border-style': string;
+    'border-color': string;
+    outline: string;
+    shadow: string;
+    'text-color': string;
+    'counter-background': string;
+    'counter-color': string;
+    'background-hover': string;
+    'border-width-hover': string;
+    'border-style-hover': string;
+    'border-color-hover': string;
+    'border-radius-hover': string;
+    'outline-hover': string;
+    'shadow-hover': string;
+    'text-color-hover': string;
+    'background-focus': string;
+    'border-width-focus': string;
+    'border-style-focus': string;
+    'border-color-focus': string;
+    'border-radius-focus': string;
+    'outline-focus': string;
+    'shadow-focus': string;
+    'text-color-focus': string;
+    'readonly-border-color': string;
+    'error-border-color': string;
+    'disabled-border-color': string;
+    'addon-background': string;
+    'addon-color': string;
+    'tag-background': string;
+    'ready-delete-tag-background': string;
+    'ready-delete-tag-color': string;
+    'clear-background': string;
+    'clear-color': string;
+};

package/dist/types/src/style/default-minimalism/menu/menu.d.ts

@@ -0,0 +1,38 @@
+export declare const component = "menu";
+export declare const cssVars: () => {
+    'background-color': string;
+    'border-color': string;
+    'font-color': string;
+    'expand-background-color': string;
+    'default-icon-color': string;
+    'default-expand-icon-color': string;
+    'search-background-color': string;
+    'select-dropdown-background': string;
+    'select-dropdown-color': string;
+    'select-dropdown-selected-color': string;
+    'select-dropdown-selected': string;
+    'select-dropdown-box-shadow': string;
+    'select-color': string;
+    'select-background': string;
+    'select-placeholder-color': string;
+    'selected-icon-color': string;
+    'selected-background-color': string;
+    'selected-title-color': string;
+    'selected-title-hover-color': string;
+    'selected-root-title-color': string;
+    'selected-root-icon-color': string;
+    'selected-root-background-color': string;
+    'hover-background-color': string;
+    'root-title-hover-color': string;
+    'root-title-hover-icon-color': string;
+    'active-parent-title-color': string;
+    'search-display': string;
+    'search-background': string;
+    'collapsed-button-hover-background-color': string;
+    'collapsed-button-background-color': string;
+    'collapsed-button-title-color': string;
+    'designer-font-color': string;
+    'designer-background-color': string;
+    'designer-collapsed-button-hover-background-color': string;
+    'designer-collapsed-button-background-color': string;
+};

package/dist/types/src/style/default-minimalism/modal/modal.d.ts

@@ -0,0 +1,10 @@
+export declare const component = "modal";
+export declare const cssVars: {
+    color: string;
+    'width-small': string;
+    'width-medium': string;
+    'width-large': string;
+    'height-small': string;
+    'height-medium': string;
+    'height-large': string;
+};

package/dist/types/src/style/default-minimalism/multi-tab/multi-tab.d.ts

@@ -0,0 +1,57 @@
+export declare const component = "multi-tabs";
+export declare const cssVars: {
+    /**
+     * 标准样式
+     */
+    background: string;
+    color: string;
+    'active-color': string;
+    'active-font-weight': number;
+    'active-background': string;
+    'icon-color': string;
+    'hover-background-color': string;
+    /**
+     * 内联样式
+     */
+    'background-color-inline': string;
+    'color-inline': string;
+    'active-color-inline': string;
+    'active-background-color-inline': string;
+    'hover-background-color-inline': string;
+    /**
+     * theme1
+     */
+    'background-color-theme1': string;
+    'background-color-active-theme1': string;
+    'border-color-theme1': string;
+    /**
+     * theme1 inline
+     */
+    'background-color-theme1-inline': string;
+    'background-color-active-theme1-inline': string;
+    'active-color-active-theme1-inline': string;
+    'icon-color-active-theme1-inline': string;
+    /**
+     * theme2
+     */
+    'background-color-theme2': string;
+    'border-color-theme2': string;
+    /**
+     * theme3
+     */
+    'background-color-theme3': string;
+    'background-color-active-theme3': string;
+    'active-color-active-theme3': string;
+    'icon-color-active-theme3': string;
+    /**
+     * theme3 inline
+     */
+    'background-color-theme3-inline': string;
+    /**
+     * theme4 inline
+     */
+    'background-color-theme4-inline': string;
+    'background-color-active-theme4-inline': string;
+    'active-color-active-theme4-inline': string;
+    'icon-color-active-theme4-inline': string;
+};

package/dist/types/src/style/default-minimalism/pagination/pagination.d.ts

@@ -0,0 +1,12 @@
+export declare const component = "pagination";
+export declare const cssVars: {
+    background: string;
+    'border-color': string;
+    'text-color': string;
+    'background-active': string;
+    'border-color-active': string;
+    'text-color-active': string;
+    'background-hover': string;
+    'border-color-hover': string;
+    'text-color-hover': string;
+};

package/dist/types/src/style/default-minimalism/popconfirm/popconfirm.d.ts

@@ -0,0 +1,7 @@
+export declare const component = "popconfirm";
+export declare const cssVars: {
+    background: string;
+    color: string;
+    borderColor: string;
+    arrowBackground: string;
+};

package/dist/types/src/style/default-minimalism/registry.d.ts

@@ -0,0 +1 @@
+export declare function registerDefaultModernThemeFn(): void;

package/dist/types/src/style/default-minimalism/rich-text/rich-text.d.ts

@@ -0,0 +1,22 @@
+export declare const component = "rich-text";
+export declare const cssVars: {
+    'textarea-bg-color': string;
+    'textarea-color': string;
+    'textarea-border-color': string;
+    'textarea-slight-border-color': string;
+    'textarea-slight-color': string;
+    'textarea-slight-bg-color': string;
+    'textarea-selected-border-color': string;
+    'textarea-handler-bg-color': string;
+    'toolbar-color': string;
+    'toolbar-bg-color': string;
+    'toolbar-active-color': string;
+    'toolbar-active-bg-color': string;
+    'toolbar-color-active-bg-color': string;
+    'toolbar-disabled-color': string;
+    'toolbar-border-color': string;
+    'modal-button-bg-color': string;
+    'modal-button-border-color': string;
+    'button-tooltip-bg-color': string;
+    'button-tooltip-color': string;
+};

package/dist/types/src/style/default-minimalism/scrollbar/scrollbar.d.ts

@@ -0,0 +1,5 @@
+export declare const component = "scrollbar";
+export declare const cssVars: {
+    'thumb-background-color': string;
+    'thumb-background-color-hover': string;
+};

package/dist/types/src/style/default-minimalism/select/select.d.ts

@@ -0,0 +1,41 @@
+export declare const component = "select";
+export declare const cssVars: {
+    background: string;
+    'border-width': string;
+    'border-style': string;
+    'border-color': string;
+    'border-radius': string;
+    outline: string;
+    shadow: string;
+    'text-color': string;
+    'counter-background': string;
+    'counter-color': string;
+    'counter-font-size': string;
+    'background-hover': string;
+    'border-width-hover': string;
+    'border-style-hover': string;
+    'border-color-hover': string;
+    'border-radius-hover': string;
+    'outline-hover': string;
+    'shadow-hover': string;
+    'text-color-hover': string;
+    'background-focus': string;
+    'border-width-focus': string;
+    'border-style-focus': string;
+    'border-color-focus': string;
+    'border-radius-focus': string;
+    'outline-focus': string;
+    'shadow-focus': string;
+    'text-color-focus': string;
+    'readonly-border-color': string;
+    'item-readonly-bg': string;
+    'item-readonly-color': string;
+    'item-readonly-radius': string;
+    'dropdown-background': string;
+    'dropdown-selected-color': string;
+    'dropdown-color': string;
+    'dropdown-selected': string;
+    'dropdown-hover-color': string;
+    'dropdown-hover-background': string;
+    'dropdown-box-shadow': string;
+};

package/dist/types/src/style/default-minimalism/switch/switch.d.ts

@@ -0,0 +1,4 @@
+export declare const component = "switch";
+export declare const cssVars: {
+    background: string;
+};

package/dist/types/src/style/default-minimalism/table/table.d.ts

@@ -0,0 +1,21 @@
+export declare const component = "table";
+export declare const cssVars: {
+    'thead-bg': string;
+    'body-bg': string;
+    'text-color': string;
+    'title-color': string;
+    'title-font-weight': number;
+    'title-sort-icon-size': string;
+    'tr-height': string;
+    'tr-stripe-bg': string;
+    'tr-checked-bg': string;
+    'tr-hover-bg': string;
+    'row-border': string;
+    'row-body-border': string;
+    config: {
+        border: string;
+        stripe: boolean;
+        isCurrent: boolean;
+        isHover: boolean;
+    };
+};

package/dist/types/src/style/default-minimalism/tabs/tabs.d.ts

@@ -0,0 +1,6 @@
+export declare const component = "tabs";
+export declare const cssVars: {
+    'card-tab-background': string;
+    'card-tab-active-background': string;
+    'active-text-color': string;
+};

package/dist/types/src/style/default-minimalism/textarea/textarea.d.ts

@@ -0,0 +1,27 @@
+export declare const component = "textarea";
+export declare const cssVars: {
+    background: string;
+    'border-width': string;
+    'border-style': string;
+    'border-color': string;
+    'border-radius': string;
+    outline: string;
+    shadow: string;
+    'text-color': string;
+    'background-hover': string;
+    'border-width-hover': string;
+    'border-style-hover': string;
+    'border-color-hover': string;
+    'border-radius-hover': string;
+    'outline-hover': string;
+    'shadow-hover': string;
+    'text-color-hover': string;
+    'background-focus': string;
+    'border-width-focus': string;
+    'border-style-focus': string;
+    'border-color-focus': string;
+    'border-radius-focus': string;
+    'outline-focus': string;
+    'shadow-focus': string;
+    'text-color-focus': string;
+};

package/dist/types/src/style/default-minimalism/transfer/transfer.d.ts

@@ -0,0 +1,5 @@
+export declare const component = "transfer";
+export declare const cssVars: {
+    'background-color': string;
+    'header-border-color': string;
+};

package/dist/types/src/style/default-minimalism/tree-select/tree-select.d.ts

@@ -0,0 +1 @@
+export declare const component = "tree-select";

package/dist/types/src/style/default-minimalism/upload/upload.d.ts

@@ -0,0 +1,27 @@
+export declare const component = "upload";
+export declare const cssVars: {
+    background: string;
+    'border-width': string;
+    'border-style': string;
+    'border-color': string;
+    'border-radius': string;
+    outline: string;
+    shadow: string;
+    'text-color': string;
+    'background-hover': string;
+    'border-width-hover': string;
+    'border-style-hover': string;
+    'border-color-hover': string;
+    'border-radius-hover': string;
+    'outline-hover': string;
+    'shadow-hover': string;
+    'text-color-hover': string;
+    'background-focus': string;
+    'border-width-focus': string;
+    'border-style-focus': string;
+    'border-color-focus': string;
+    'border-radius-focus': string;
+    'outline-focus': string;
+    'shadow-focus': string;
+    'text-color-focus': string;
+};

package/dist/types/src/style/index.d.ts

@@ -1,2 +1,4 @@
 export * from './default';
+export * from './default-minimalism';
 export * from './dark';
+export * from './dark-minimalism';

package/dist/types/src/typing.d.ts

@@ -7,9 +7,15 @@ export declare enum DefaultThemeName {
     DEFAULT_LARGE = "default-large",
     DEFAULT_MEDIUM = "default-medium",
     DEFAULT_SMALL = "default-small",
+    DEFAULT_MINIMALISM_LARGE = "default-minimalism-large",
+    DEFAULT_MINIMALISM_MEDIUM = "default-minimalism-medium",
+    DEFAULT_MINIMALISM_SMALL = "default-minimalism-small",
     DARK_LARGE = "dark-large",
     DARK_MEDIUM = "dark-medium",
-    DARK_SMALL = "dark-small"
+    DARK_SMALL = "dark-small",
+    DARK_MINIMALISM_LARGE = "dark-minimalism-large",
+    DARK_MINIMALISM_MEDIUM = "dark-minimalism-medium",
+    DARK_MINIMALISM_SMALL = "dark-minimalism-small"
 }
-export declare type ThemeName = 'default-large' | 'default-medium' | 'default-small' | 'dark-large' | 'dark-medium' | 'dark-small' | string;
+export declare type ThemeName = 'default-large' | 'default-medium' | 'default-small' | 'default-minimalism-large' | 'default-minimalism-medium' | 'default-minimalism-small' | 'dark-large' | 'dark-medium' | 'dark-small' | 'dark-minimalism-large' | 'dark-minimalism-medium' | 'dark-minimalism-small' | string;
 export declare const isSystemTheme: (name: ThemeName) => boolean;

package/dist/types/src/utils/ColorHelper.d.ts

@@ -0,0 +1,33 @@
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export declare class ColorHelper {
+    /**
+     * 将十六进制颜色转换为RGB对象
+     * @param {string} hex - 十六进制颜色字符串，如 '#035DFF'
+     * @returns {Object} RGB对象，包含r, g, b属性，值为0-255
+     */
+    static hexToRgb(hex: string): RGB;
+    /**
+     * 将RGB对象转换为十六进制颜色
+     * @param {Object} rgb - RGB对象，包含r, g, b属性，值为0-255
+     * @returns {string} 十六进制颜色字符串，如 '#E6EFFE'
+     */
+    static rgbToHex(rgb: RGB): string;
+    /**
+     * 将单个颜色分量转换为两位十六进制数
+     * @param {number} c - 颜色分量，值为0-255
+     * @returns {string} 两位十六进制字符串
+     */
+    private static componentToHex;
+    /**
+     * 计算半透明颜色在背景色上的等效不透明颜色
+     * @param {string} color - 半透明颜色的十六进制字符串，如 '#035DFF'
+     * @param {number} alpha - 透明度，0-1之间的数值，如0.1
+     * @param {string} backgroundColor - 背景色的十六进制字符串，默认为白色 '#FFFFFF'
+     * @returns {string} 等效的不透明颜色的十六进制字符串
+     */
+    static getAlphaColor(color: string, alpha: number, backgroundColor?: string): string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oinone/kunlun-theme",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "main": "index.ts",
   "scripts": {
     "prebuild": "rimraf dist",
@@ -10,5 +10,8 @@
     "x-prepublishOnly": "node ../../scripts/prepublish-only.js",
     "x-postpublish": "node ../../scripts/postpublish.js"
   },
+  "dependencies": {
+    "@oinone/kunlun-config": "6.4.0"
+  },
   "gitHead": "2b4c0c7911626c105ca71c2d41e54af470e2e079"
 }

package/rollup.config.js

@@ -1,4 +1,4 @@
 import pkg from './package.json';
 import rollupConfig from '../../scripts/build.config.js';
 
-export default rollupConfig(pkg.name);
+export default rollupConfig(pkg.name, ['@oinone/kunlun-config']);

package/src/color/dark-minimalism-vars.ts

@@ -0,0 +1,117 @@
+import { DEFAULT_PREFIX } from '../mount';
+
+export const darkModernVars = {
+  // primary
+  'primary-color-rgb': '3, 93, 255', // 主色
+  'primary-color': '#035DFF', // 主色
+  'primary-color-hover': '#3F84FF', // 主悬停色
+  'primary-color-focus': '#3F84FF', // 主焦点色
+  'primary-color-active': '#024CDE', // 主激活色
+  'primary-color-outline': '#035DFF', // 主轮廓色
+  // success
+  'success-color': '#6DD400', // 成功色
+  'success-color-hover': '#90DE3D', // 成功悬停色
+  'success-color-focus': '#90DE3D', // 成功悬停色
+  'success-color-active': '#6BBB00', // 成功激活色
+  'success-color-outline': '#6DD400', // 成功轮廓色
+  // waring
+  'warning-color': '#F7B500', // 警告色
+  'warning-color-hover': '#F9C73D', // 警告悬停色
+  'warning-color-focus': '#F9C73D', // 警告悬停色
+  'warning-color-active': '#D99200', // 警告激活色
+  'warning-color-outline': '#F7B500', // 警告轮廓色
+  // info
+  'info-color': '#8c8c8c', // 通知色
+  'info-color-hover': '#999999', // 通知悬停色
+  'info-color-focus': '#999999', // 通知悬停色
+  'info-color-active': '#666666', // 通知激活色
+  'info-color-outline': '#8c8c8c', // 通知轮廓色
+  // error
+  'error-color': '#E02020', // 错误色
+  'error-color-hover': '#E75555',
+  'error-color-focus': '#E75555',
+  'error-color-active': '#C51C26',
+  'error-color-outline': '#E02020',
+
+  // 消息icon颜色
+  'notification-info': '#035DFF',
+  'notification-error': '#FF4D4F',
+  'notification-success': '#52C41A',
+  'notification-warning': '#FAAD14',
+
+  // background
+  background: '#1F2935',
+  'body-background': '#15232E',
+  'search-background': '#1F2935',
+  'header-background': '#1F2935',
+  'main-background': '#1F2935',
+  'footer-background': '#1F2935',
+  'menu-background': '#1F2935',
+  'multi-tabs-background': '#F3F7FA',
+  'stripe-color': 'rgba(255, 255, 255, 0.1)',
+  'placeholder-color': 'rgba(255,255,255,0.25)',
+
+  // hover
+  'hover-background-color': `rgba(255, 255, 255, 0.1)`,
+  'hover-text-color': `var(--oio-text-color)`,
+
+  // selected
+  'selected-background-color': 'rgba(255, 255, 255, 0.1)',
+  'selected-text-color': `var(--${DEFAULT_PREFIX}-text-color-secondary)`,
+
+  // font
+  'font-family':
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol','Noto Color Emoji';",
+  'text-color': 'rgba(255,255,255,0.65)',
+  'text-color-rgb': '38, 38, 38',
+  'text-color-secondary': 'rgba(255,255,255,0.45)',
+  'text-color-three': 'rgba(255,255,255,0.25)',
+
+  /**
+   * @deprecated Please use --${DEFAULT_PREFIX}-font-weight-bold property.
+   */
+  'font-weight-thick': `var(--${DEFAULT_PREFIX}-font-weight-bold)`,
+  'font-weight': '400',
+  'font-weight-lighter': 'lighter',
+  'font-weight-bold': 'bold',
+  'font-weight-bolder': 'bolder',
+
+  // 只读色调
+  'readonly-color': 'rgba(255,255,255,0.65)',
+  'readonly-bg': '#1D2E3C',
+  'readonly-active-bg': '#1D2E3C',
+  'readonly-border-color': '#333e4c',
+
+  // 禁用色调
+  'disabled-color': 'rgba(255,255,255,0.25)',
+  'disabled-bg': '#1D2E3C',
+  'disabled-active-bg': '#1D2E3C',
+  'disabled-border-color': '#333e4c',
+
+  // border
+  'border-color': '#333e4c',
+  'border-color-danger': '#E02020',
+  'border-width': '1px',
+  'border-style': 'solid',
+
+  // common
+  'icon-color': 'rgba(255,255,255,0.65)',
+  'default-icon-color': 'rgba(255,255,255,0.65)',
+  'normal-icon-filter': `var(--${DEFAULT_PREFIX}-icon-filter)`,
+  'icon-filter': 'invert(0.7) hue-rotate(180deg) brightness(0.5)',
+  'icon-filter-opacity': '0.4',
+  'close-icon-background': 'transparent',
+  'group-border-width': '0px',
+  'box-shadow-size': '0px',
+  'box-shadow': '0px 0px 6px 0px rgba(0,0,0,0.2)',
+  'addon-color-pick-background': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'addon-color-pick-readonly-background': 'rgba(92,104,127, 0.25)',
+  'addon-color-pick-border-color': '#ffffff',
+  'addon-color-pick-icon-color': '#ffffff',
+  'addon-color-pick-dropdown-background': `var(--${DEFAULT_PREFIX}-background)`,
+  'addon-color-pick-dropdown-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'user-dropdown-icon-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'tag-select-background': 'rgba(255,255,255,0.1)',
+  'spin-background': 'rgba(31,41,53,0.7)',
+  'gemini-mini-icon-color': 'rgba(3,93,255, 0.2)'
+};

package/src/color/dark-vars.ts

@@ -48,11 +48,16 @@ export const darkVars = {
   'footer-background': '#1F2935',
   'menu-background': '#1F2935',
   'multi-tabs-background': '#F3F7FA',
+  'stripe-color': 'rgba(255, 255, 255, 0.1)',
   'placeholder-color': 'rgba(255,255,255,0.25)',
 
   // hover
   'hover-background-color': `rgba(255, 255, 255, 0.1)`,
-  'hover-text-color': `var(--oio-text-color)`,
+  'hover-text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+
+  // selected
+  'selected-background-color': 'rgba(255, 255, 255, 0.1)',
+  'selected-text-color': `var(--${DEFAULT_PREFIX}-text-color-secondary)`,
 
   // font
   'font-family':