@oinone/kunlun-theme 6.2.0

package/src/style/default/dropdown/index.ts

@@ -0,0 +1,14 @@
+export const component = 'dropdown';
+
+export const cssVars = {
+  'background-color': 'var(--oio-background)',
+  'border-color': 'var(--oio-border-color)',
+  'box-shadow': '-2px 2px 6px 0px rgba(136, 156, 176, 0.2)',
+  color: 'var(--oio-text-color)',
+  'color-hover': 'var(--oio-hover-text-color)',
+  'color-disabled': 'var(--oio-disabled-color)',
+  'color-disabled-hover': 'var(--oio-disabled-color)',
+
+  'item-background-color-hover': 'var(--oio-hover-background-color)',
+  'item-background-color-disabled-hover': 'transparent'
+};

package/src/style/default/form-item/form-item.ts

@@ -0,0 +1,10 @@
+export const component = 'form-item';
+
+export const cssVars = {
+  config: {
+    // 只读模式展示占位符
+    readonlyShowPlaceholder: false,
+    // 禁用模式展示占位符
+    disabledShowPlaceholder: false
+  }
+};

package/src/style/default/header/header.ts

@@ -0,0 +1,6 @@
+export const component = 'header';
+
+export const cssVars = {
+  'border-bottom': `1px solid rgba(0, 0, 0, 0.06)`,
+  color: 'rgba(0,0,0,0.65)'
+};

package/src/style/default/index.ts

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

package/src/style/default/input/input.ts

@@ -0,0 +1,46 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'input';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'background-color': '#ffffff',
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'counter-background': '#ffffff',
+  'counter-color': 'rgba(0, 0, 0, 0.25)',
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb),0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`,
+  // readonly
+  'readonly-border-color': `var(--${DEFAULT_PREFIX}-readonly-border-color)`,
+  'error-border-color': '#ff4d4f',
+  // disabled
+  'disabled-border-color': `var(--${DEFAULT_PREFIX}-disabled-border-color)`,
+
+  'addon-background': '#F7F7F7',
+  'addon-color': ' rgba(0,0,0,0.65)',
+  'tag-background': 'rgba(3,93,255, 0.1)',
+  'clear-background': '#fff',
+  'clear-color': 'rgba(0,0,0,.25)'
+};

package/src/style/default/menu/menu.ts

@@ -0,0 +1,7 @@
+import { getMenuColorVarsByTheme } from '../../../color';
+
+export const component = 'menu';
+
+export const cssVars = () => {
+  return getMenuColorVarsByTheme();
+};

package/src/style/default/modal/modal.ts

@@ -0,0 +1,11 @@
+export const component = 'modal';
+
+export const cssVars = {
+  color: 'rgba(0, 0, 0, 0.85)',
+  'width-small': '560px',
+  'width-medium': '890px',
+  'width-large': '1200px',
+  'height-small': '40vh',
+  'height-medium': '60vh',
+  'height-large': '90vh'
+};

package/src/style/default/multi-tab/multi-tab.ts

@@ -0,0 +1,67 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'multi-tabs';
+
+export const cssVars = {
+  /**
+   * 标准样式
+   */
+  background: '#e9e9e9',
+  color: `var(--${DEFAULT_PREFIX}-text-color-secondary)`,
+  'active-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'active-font-weight': 500,
+  'active-background': '#ffffff',
+  'icon-color': 'rgba(0, 0, 0, 0.2)',
+  'hover-background-color': '#f6f6f6',
+
+  /**
+   * 内联样式
+   */
+  'background-color-inline': '#ffffff',
+  'color-inline': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'active-color-inline': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'active-background-color-inline': `var(--${DEFAULT_PREFIX}-body-background)`,
+  'hover-background-color-inline': `var(--${DEFAULT_PREFIX}-body-background)`,
+
+  /**
+   * theme1
+   */
+  'background-color-theme1': '#f6f6f6',
+  'background-color-active-theme1': '#ffffff',
+  'border-color-theme1': '#e2e6e9',
+
+  /**
+   * theme1 inline
+   */
+  'background-color-theme1-inline': '#ffffff',
+  'background-color-active-theme1-inline': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.2)`,
+  'active-color-active-theme1-inline': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'icon-color-active-theme1-inline': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`,
+
+  /**
+   * theme2
+   */
+  'background-color-theme2': '#ffffff',
+  'border-color-theme2': '#e2e6e9',
+
+  /**
+   * theme3
+   */
+  'background-color-theme3': '#f6f6f6',
+  'background-color-active-theme3': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.2)`,
+  'active-color-active-theme3': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'icon-color-active-theme3': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`,
+
+  /**
+   * theme3 inline
+   */
+  'background-color-theme3-inline': '#ffffff',
+
+  /**
+   * theme4 inline
+   */
+  'background-color-theme4-inline': '#ffffff',
+  'background-color-active-theme4-inline': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.2)`,
+  'active-color-active-theme4-inline': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'icon-color-active-theme4-inline': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`
+};

package/src/style/default/pagination/pagination.ts

@@ -0,0 +1,9 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'pagination';
+
+export const cssVars = {
+  background: `var(--${DEFAULT_PREFIX}-background)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color-secondary)`
+};

package/src/style/default/popconfirm/popconfirm.ts

@@ -0,0 +1,8 @@
+export const component = 'popconfirm';
+
+export const cssVars = {
+  background: 'var(--oio-background)',
+  color: 'var(--oio-text-color)',
+  borderColor: 'var(--oio-border-color)',
+  arrowBackground: 'ar(--oio-background)'
+};

package/src/style/default/registry.ts

@@ -0,0 +1,63 @@
+import { registerTheme } from '../../register';
+import { ThemeSize } from '../../typing';
+import { getComponentTheme } from './component-theme';
+
+import { defaultVars } from '../../color/default-vars';
+import { defaultLargeSizeVars, defaultMediumSizeVars, defaultSmallSizeVars } from '../../size';
+
+function registerComponentThemeWithBase(baseCssVars) {
+  return function registerComponentTheme(
+    component: string,
+    componentCSSVars: Record<string, string | number | boolean | Record<string, unknown>>
+  ): void {
+    Object.entries(componentCSSVars).forEach(([key, value]) => {
+      baseCssVars[`${component}-${key}`] = value;
+    });
+  };
+}
+
+function registerDefaultTheme(size: ThemeSize) {
+  const defaultSizeVars =
+    // eslint-disable-next-line no-nested-ternary
+    size === 'large' ? defaultLargeSizeVars : size === 'medium' ? defaultMediumSizeVars : defaultSmallSizeVars;
+
+  const cssVars = {
+    ...defaultVars,
+    ...defaultSizeVars
+  };
+
+  const registerComponentTheme = registerComponentThemeWithBase(cssVars);
+
+  /**
+   * componentTheme 数据格式如下：
+   *
+   * {
+   *   input: {
+   *     large: {.....},
+   *     medium: {.....},
+   *     small: {.....},
+   *   },
+   *   button: {
+   *     large: {.....},
+   *     medium: {.....},
+   *     small: {.....},
+   *   },
+   *   .....
+   * }
+   */
+
+  const componentTheme = getComponentTheme();
+  Object.entries(componentTheme).forEach(([key, value]) => {
+    if (value[size]) {
+      registerComponentTheme(key, value[size]);
+    }
+  });
+
+  registerTheme(`default-${size}`, cssVars);
+}
+
+export function registerDefaultThemeFn() {
+  registerDefaultTheme('large');
+  registerDefaultTheme('medium');
+  registerDefaultTheme('small');
+}

package/src/style/default/rich-text/rich-text.ts

@@ -0,0 +1,25 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'rich-text';
+
+export const cssVars = {
+  'textarea-bg-color': `var(--${DEFAULT_PREFIX}-background)`,
+  'textarea-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'textarea-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'textarea-slight-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'textarea-slight-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'textarea-slight-bg-color': `var(--${DEFAULT_PREFIX}-body-background)`,
+  'textarea-selected-border-color': '#b4d5ff',
+  'textarea-handler-bg-color': '#4290f7',
+  'toolbar-color': `var(--${DEFAULT_PREFIX}-select-dropdown-color)`,
+  'toolbar-bg-color': `var(--${DEFAULT_PREFIX}-select-dropdown-background)`,
+  'toolbar-active-color': `var(--${DEFAULT_PREFIX}-select-dropdown-selected-color)`,
+  'toolbar-active-bg-color': `var(--${DEFAULT_PREFIX}-select-dropdown-selected)`,
+  'toolbar-color-active-bg-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'toolbar-disabled-color': `var(--${DEFAULT_PREFIX}-disabled-color)`,
+  'toolbar-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'modal-button-bg-color': '#fafafa',
+  'modal-button-border-color': '#d9d9d9',
+  'button-tooltip-bg-color': '#333',
+  'button-tooltip-color': '#fff'
+};

package/src/style/default/scrollbar/scrollbar.ts

@@ -0,0 +1,6 @@
+export const component = 'scrollbar';
+
+export const cssVars = {
+  'thumb-background-color': '#d9d9d9',
+  'thumb-background-color-hover': '#cccccc'
+};

package/src/style/default/select/select.ts

@@ -0,0 +1,49 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'select';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'counter-background': '#ffffff',
+  'counter-color': 'rgba(0, 0, 0, 0.25)',
+  'counter-font-size': `var(--${DEFAULT_PREFIX}-font-size-sm)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(3,93,255,0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`,
+  // readonly
+  'readonly-border-color': `var(--${DEFAULT_PREFIX}-readonly-border-color)`,
+  'item-readonly-bg': `var(--${DEFAULT_PREFIX}-primary-color-rgb)`,
+  'item-readonly-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'item-readonly-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+
+  'dropdown-background': '#fff',
+  'dropdown-selected-color': 'var(--oio-primary-color)',
+  'dropdown-color': 'var(--oio-text-color-secondary)',
+  'dropdown-selected': 'rgba(var(--oio-primary-color-rgb), 0.1)',
+  'dropdown-box-shadow':
+    '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+};

package/src/style/default/switch/switch.ts

@@ -0,0 +1,5 @@
+export const component = 'switch';
+
+export const cssVars = {
+  background: 'rgba(0, 0, 0, 0.25)'
+};

package/src/style/default/table/table.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'table';
+
+export const cssVars = {
+  'thead-bg': '#f7f8fa',
+  'body-bg': '#ffffff',
+  'text-color': 'rgba(0, 0, 0, 0.65)',
+  'title-color': 'rgba(0, 0, 0, 0.85)',
+  'title-font-weight': 500,
+  'title-sort-icon-size': '11px',
+  'tr-height': `var(--${DEFAULT_PREFIX}-height-lg)`,
+  'tr-stripe-bg': '#fafafa',
+  'tr-checked-bg': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.1)`,
+  'tr-hover-bg': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.1)`,
+  'row-border': 'rgba(243, 243, 243, 1)', // 无效参数
+  'row-body-border': '#e8eaec',
+  config: {
+    border: 'full',
+    stripe: true,
+    isCurrent: true,
+    isHover: true
+  }
+};
+
+// export const cssVars = {
+//   'thead-bg': '#ffffff',
+//   'body-bg': '#ffffff',
+//   'title-color': 'rgba(0, 0, 0, 0.85)',
+//   'title-font-weight': 'bold',
+//   'title-sort-icon-size': '11px',
+//   'tr-height': `var(--${DEFAULT_PREFIX}-height-lg)`,
+//   'tr-stripe-bg': '#fafafa',
+//   'tr-checked-bg': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.1)`,
+//   'tr-hover-bg': `rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb), 0.1)`,
+//   'row-border': 'rgba(243, 243, 243, 1)',
+//   'row-body-border': '#e8eaec',
+//   config: {
+//     border: 'oinone-custom-border',
+//     stripe: false,
+//     isCurrent: true,
+//     isHover: true
+//   }
+// };

package/src/style/default/tabs/tabs.ts

@@ -0,0 +1 @@
+export const component = 'tabs';

package/src/style/default/textarea/textarea.ts

@@ -0,0 +1,34 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'textarea';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(var(--${DEFAULT_PREFIX}-primary-color-rgb),0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`
+};

package/src/style/default/transfer/transfer.ts

@@ -0,0 +1,6 @@
+export const component = 'transfer';
+
+export const cssVars = {
+  'background-color': '#f7f7f7',
+  'header-border-color': '#e3e7ee'
+};

package/src/style/default/tree-select/tree-select.ts

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

package/src/style/default/upload/upload.ts

@@ -0,0 +1,34 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'upload';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': 'dashed',
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `var(--${prefix}-shadow)`,
+  'text-color-focus': `var(--${prefix}-text-color)`
+};

package/src/style/index.ts

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

package/src/typing.ts

@@ -0,0 +1,31 @@
+export type ThemeType = 'default' | 'dark';
+
+export type ThemeSize = 'large' | 'medium' | 'small';
+
+export interface DefaultSideBarTheme {
+  mode?: ThemeType;
+}
+
+export enum DefaultThemeName {
+  DEFAULT_LARGE = 'default-large',
+  DEFAULT_MEDIUM = 'default-medium',
+  DEFAULT_SMALL = 'default-small',
+
+  DARK_LARGE = 'dark-large',
+  DARK_MEDIUM = 'dark-medium',
+  DARK_SMALL = 'dark-small'
+}
+
+export type ThemeName =
+  | 'default-large'
+  | 'default-medium'
+  | 'default-small'
+  | 'dark-large'
+  | 'dark-medium'
+  | 'dark-small'
+  | string;
+
+export const isSystemTheme = (name: ThemeName) => {
+  const values = Object.values(DefaultThemeName);
+  return values.includes(name as any);
+};