@oinone/kunlun-theme 6.2.0

package/src/color/index.ts

@@ -0,0 +1,3 @@
+export * from './dark-vars';
+export * from './default-vars';
+export * from './menu-color-vars';

package/src/color/menu-color-vars.ts

@@ -0,0 +1,130 @@
+import { currentOioThemeType } from '../init';
+import { darkVars } from './dark-vars';
+import { defaultVars } from './default-vars';
+
+interface IMenuColorVars {
+  'main-background': string;
+  'body-background': string;
+  'border-color': string;
+  'text-color': string;
+  'icon-color': string;
+  'text-color-rgb': string;
+  'primary-color': string;
+  'hover-background-color': string;
+  'text-color-secondary': string;
+  'active-parent-title-color': string;
+  'collapsed-button-background-color': string;
+  'designer-font-color': string;
+  'select-background': string;
+  'placeholder-color': string;
+  'select-color': string;
+  'select-dropdown-background': string;
+  'select-dropdown-selected-color': string;
+  'select-dropdown-color': string;
+  'select-dropdown-selected': string;
+  'select-dropdown-box-shadow': string;
+}
+
+/**
+ * 默认主题的菜单css变量
+ */
+const defaultMenuColorVars: IMenuColorVars = {
+  'main-background': defaultVars['main-background'],
+  'body-background': defaultVars['main-background'],
+  'border-color': defaultVars['border-color'],
+  'text-color': defaultVars['text-color'],
+  'icon-color': defaultVars['icon-color'],
+  'text-color-rgb': defaultVars['text-color-rgb'],
+  'primary-color': defaultVars['primary-color'],
+  'hover-background-color': defaultVars['hover-background-color'],
+  'text-color-secondary': defaultVars['text-color-secondary'],
+  'active-parent-title-color': 'rgba(0, 0, 0, 0.85)',
+  'collapsed-button-background-color': 'rgba(38, 38, 38, 0.05)',
+  'designer-font-color': '#333333',
+  'select-background': defaultVars['main-background'],
+  'placeholder-color': defaultVars['placeholder-color'],
+  'select-color': defaultVars['text-color'],
+  'select-dropdown-background': defaultVars['main-background'],
+  'select-dropdown-selected-color': defaultVars['primary-color'],
+  'select-dropdown-color': defaultVars['text-color-secondary'],
+  'select-dropdown-selected': defaultVars['hover-background-color'],
+  'select-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)'
+};
+
+/**
+ * 暗色主题的菜单css变量
+ */
+
+const darkMenuColorVars: IMenuColorVars = {
+  'main-background': darkVars['main-background'],
+  'body-background': darkVars['body-background'],
+  'border-color': darkVars['border-color'],
+  'text-color': darkVars['text-color'],
+  'icon-color': darkVars['icon-color'],
+  'text-color-rgb': darkVars['text-color-rgb'],
+  'primary-color': '#fff',
+  'hover-background-color': darkVars['hover-background-color'],
+  'text-color-secondary': darkVars['text-color-secondary'],
+  'active-parent-title-color': '#fff',
+  'collapsed-button-background-color': 'rgba(38, 38, 38, 0.05)',
+  'designer-font-color': '#333333',
+  'select-background': darkVars['body-background'],
+  'placeholder-color': darkVars['placeholder-color'],
+  'select-color': darkVars['text-color'],
+  'select-dropdown-background': darkVars['main-background'],
+  'select-dropdown-selected-color': '#fff',
+  'select-dropdown-color': darkVars['text-color'],
+  'select-dropdown-selected': darkVars['hover-background-color'],
+  'select-dropdown-box-shadow': '0px 0px 6px 0px rgba(0,0,0,0.2)'
+};
+
+export const getMenuColorVarsByTheme = () => {
+  const menuColorVars = currentOioThemeType === 'dark' ? darkMenuColorVars : defaultMenuColorVars;
+
+  return {
+    'background-color': menuColorVars['main-background'],
+    'border-color': menuColorVars['border-color'],
+    'font-color': menuColorVars['text-color'],
+    'expand-background-color': menuColorVars['main-background'],
+    'default-icon-color': menuColorVars['icon-color'],
+    'default-expand-icon-color': `rgba(${menuColorVars['text-color-rgb']}, 0.75)`,
+    'search-background-color': menuColorVars['body-background'],
+
+    'select-dropdown-background': menuColorVars['select-dropdown-background'],
+    'select-dropdown-color': menuColorVars['select-dropdown-color'],
+    'select-dropdown-selected-color': menuColorVars['select-dropdown-selected-color'],
+    'select-dropdown-selected': menuColorVars['select-dropdown-selected'],
+    'select-dropdown-box-shadow': menuColorVars['select-dropdown-box-shadow'],
+    'select-color': menuColorVars['select-color'],
+    'select-background': menuColorVars['select-background'],
+    'select-placeholder-color': menuColorVars['placeholder-color'],
+    'selected-icon-color': menuColorVars['primary-color'],
+    'selected-background-color': menuColorVars['hover-background-color'],
+    'selected-title-color': menuColorVars['primary-color'],
+    'selected-title-hover-color': menuColorVars['primary-color'],
+    'selected-root-title-color': menuColorVars['primary-color'],
+    'selected-root-icon-color': menuColorVars['primary-color'],
+    'selected-root-background-color': menuColorVars['hover-background-color'],
+
+    'hover-background-color': menuColorVars['hover-background-color'],
+
+    'root-title-hover-color': menuColorVars['primary-color'],
+    'root-title-hover-icon-color': menuColorVars['primary-color'],
+    'active-parent-title-color': menuColorVars['active-parent-title-color'],
+
+    'search-display': 'unset',
+    'search-background': menuColorVars['body-background'],
+
+    'collapsed-button-hover-background-color': menuColorVars['hover-background-color'],
+    'collapsed-button-background-color': menuColorVars['collapsed-button-background-color'],
+
+    'collapsed-button-title-color': menuColorVars['text-color-secondary'],
+
+    // 设计器菜单
+    'designer-font-color': menuColorVars['designer-font-color'],
+    'designer-background-color': menuColorVars['main-background'],
+    'designer-collapsed-button-hover-background-color': menuColorVars['hover-background-color'],
+    'designer-collapsed-button-background-color': menuColorVars['collapsed-button-background-color']
+  };
+};

package/src/init/currentTheme.ts

@@ -0,0 +1,7 @@
+import { ThemeType } from '../typing';
+
+export let currentOioThemeType: ThemeType = 'default';
+
+export function setCurrentThemeType(themeType: ThemeType) {
+  currentOioThemeType = themeType;
+}

package/src/init/index.ts

@@ -0,0 +1,2 @@
+export * from './currentTheme';
+export * from './initTheme';

package/src/init/initTheme.ts

@@ -0,0 +1,14 @@
+import { registerDarkThemeFn, registerDefaultThemeFn } from '../style';
+import { DefaultSideBarTheme, ThemeType } from '../typing';
+import { setCurrentThemeType } from './currentTheme';
+
+interface DefaultComponentTheme {
+  sideBarTheme: DefaultSideBarTheme;
+}
+
+export function initOioComponentTheme(config: Partial<DefaultComponentTheme>) {
+  const mode = config.sideBarTheme?.mode || 'default';
+  setCurrentThemeType(mode.toLocaleLowerCase() as ThemeType);
+  registerDefaultThemeFn();
+  registerDarkThemeFn();
+}

package/src/mount/constant.ts

@@ -0,0 +1 @@
+export const DEFAULT_PREFIX = 'oio';

package/src/mount/index.ts

@@ -0,0 +1,69 @@
+import { getTheme } from '../register';
+import { DefaultThemeName, ThemeName } from '../typing';
+import { DEFAULT_PREFIX } from './constant';
+
+/**
+ * el:
+ * 初始化时为body
+ * 应用加载时应用父类class
+ * 页面加载时页面父类class
+ */
+const THEME_CONFIG: Record<string, any> = {};
+
+export function genCSSVars(themes: ThemeName[], el?: string, prefix?: string) {
+  const headNode = document.querySelector('head')!;
+
+  const element = el
+    ? (document.getElementsByClassName(el)[0] as HTMLElement)
+    : (document.documentElement as HTMLElement);
+  if (!element) {
+    throw new Error('挂载dom匹配失败');
+  }
+
+  const styleTags = Array.from(document.getElementsByTagName('style')) || [];
+
+  // 每次构建的时候，都需要初始化默认主题
+  const currentThemes = [DefaultThemeName.DEFAULT_MEDIUM, ...themes];
+
+  const cssVars = currentThemes
+    .map((t) => getTheme(t) || {})
+    .reduce((preVars, nextVars) => {
+      return Object.assign(preVars, nextVars);
+    }, {});
+
+  if (!Object.keys(cssVars).length) {
+    return;
+  }
+
+  const className = 'oio-theme';
+  const themeTag = styleTags.find((tag) => tag.getAttribute('theme-id') === className);
+
+  const styleRules = Object.keys(cssVars)
+    .map((key) => {
+      if (Object.prototype.toString.call(cssVars[key]) === '[object Object]') {
+        THEME_CONFIG[key] = cssVars[key];
+        return '';
+      }
+      return `--${prefix || DEFAULT_PREFIX}-${key}: ${cssVars[key]};`;
+    })
+    .filter((v) => v);
+
+  const innerHTML = `:root{${styleRules.join('')}}`;
+
+  if (themeTag) {
+    themeTag.innerHTML = innerHTML;
+  } else {
+    const style = document.createElement('style');
+
+    [
+      { key: 'type', value: 'text/css' },
+      { key: 'theme-id', value: className }
+    ].forEach(({ key, value }) => style!.setAttribute(key, value));
+
+    style.innerHTML = innerHTML;
+
+    headNode.appendChild(style);
+  }
+}
+
+export { DEFAULT_PREFIX, THEME_CONFIG };

package/src/register/index.ts

@@ -0,0 +1,23 @@
+import { ThemeName } from '../typing';
+
+const themeMap = new Map<string, Record<string, unknown>>();
+
+const registerTheme = (theme: ThemeName, cssVars: Record<string, unknown>) => {
+  themeMap.set(theme, cssVars);
+};
+
+const getTheme = (theme: ThemeName) => {
+  return themeMap.get(theme);
+};
+
+const registerThemeItem = (theme: ThemeName, cssVars: Record<string, unknown>) => {
+  const _theme = theme;
+  const themeObj = themeMap.get(_theme);
+  if (themeObj) {
+    Object.assign(themeObj, cssVars);
+  } else {
+    themeMap.set(_theme, cssVars);
+  }
+};
+
+export { themeMap, registerTheme, getTheme, registerThemeItem };

package/src/size/default/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/default/large.ts

@@ -0,0 +1,43 @@
+export const defaultLargeSizeVars = {
+  // font
+  'font-size': '14px',
+  'font-size-lg': '16px',
+  'font-size-sm': '12px',
+
+  padding: '24px',
+  margin: '24px',
+
+  'row-gap': '24px',
+
+  'line-height': '18px',
+  'line-height-lg': '20px',
+  'line-height-sm': '16px',
+  'line-height-xs': '14px',
+  'line-height-xxs': '12px',
+  // radius
+  'border-radius': '4px',
+  'border-radius-lg': '8px',
+  'border-radius-sm': '2px',
+
+  // padding
+  'padding-lg': '24px',
+  'padding-md': '16px',
+  'padding-sm': '12px',
+  'padding-xs': '8px',
+  'padding-xxs': '4px',
+  // margin
+  'margin-lg': '24px',
+  'margin-md': '16px',
+  'margin-sm': '12px',
+  'margin-xs': '8px',
+  'margin-xxs': '4px',
+  // height
+  height: '40px',
+  'height-lg': '54px',
+  'height-sm': '32px',
+
+  'min-height': '32px',
+
+  'label-height': '30px',
+  'horizontal-label-height': '32px'
+};

package/src/size/default/medium.ts

@@ -0,0 +1,43 @@
+export const defaultMediumSizeVars = {
+  // font
+  'font-size': '14px',
+  'font-size-lg': '16px',
+  'font-size-sm': '12px',
+
+  padding: '16px',
+  margin: '16px',
+
+  'row-gap': '16px',
+
+  'line-height': '18px',
+  'line-height-lg': '20px',
+  'line-height-sm': '16px',
+  'line-height-xs': '14px',
+  'line-height-xxs': '12px',
+  // radius
+  'border-radius': '4px',
+  'border-radius-lg': '8px',
+  'border-radius-sm': '2px',
+
+  // padding
+  'padding-lg': '16px',
+  'padding-md': '12px',
+  'padding-sm': '8px',
+  'padding-xs': '4px',
+  'padding-xxs': '2px',
+  // margin
+  'margin-lg': '16px',
+  'margin-md': '12px',
+  'margin-sm': '8px',
+  'margin-xs': '4px',
+  'margin-xxs': '2px',
+  // height
+  height: '32px',
+  'height-lg': '48px',
+  'height-sm': '32px',
+
+  'min-height': '32px',
+
+  'label-height': '28px',
+  'horizontal-label-height': '32px'
+};

package/src/size/default/small.ts

@@ -0,0 +1,43 @@
+export const defaultSmallSizeVars = {
+  // font
+  'font-size': '14px',
+  'font-size-lg': '16px',
+  'font-size-sm': '12px',
+
+  padding: '12px',
+  margin: '12px',
+
+  'row-gap': '12px',
+
+  'line-height': '18px',
+  'line-height-lg': '20px',
+  'line-height-sm': '12px',
+  'line-height-xs': '14px',
+  'line-height-xxs': '12px',
+  // radius
+  'border-radius': '4px',
+  'border-radius-lg': '8px',
+  'border-radius-sm': '2px',
+
+  // padding
+  'padding-lg': '12px',
+  'padding-md': '10px',
+  'padding-sm': '8px',
+  'padding-xs': '4px',
+  'padding-xxs': '2px',
+  // margin
+  'margin-lg': '12px',
+  'margin-md': '10px',
+  'margin-sm': '8px',
+  'margin-xs': '4px',
+  'margin-xxs': '2px',
+  // height
+  height: '24px',
+  'height-lg': '40px',
+  'height-sm': '24px',
+
+  'min-height': '24px',
+
+  'label-height': '24px',
+  'horizontal-label-height': '32px'
+};

package/src/size/index.ts

@@ -0,0 +1,8 @@
+export * from './default';
+export * from './input';
+export * from './table';
+export * from './menu';
+export * from './pagination';
+export * from './select';
+export * from './tree-select';
+export * from './tabs';

package/src/size/input/index.ts

@@ -0,0 +1,2 @@
+export * from './large';
+export * from './medium';

package/src/size/input/large.ts

@@ -0,0 +1,8 @@
+import { DEFAULT_PREFIX } from '../../mount';
+
+export const largeInputSizeVars = {
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  'line-height': '22px',
+  'counter-font-size': `var(--${DEFAULT_PREFIX}-font-size-sm)`
+};

package/src/size/input/medium.ts

@@ -0,0 +1,8 @@
+import { DEFAULT_PREFIX } from '../../mount';
+
+export const mediumInputSizeVars = {
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  'line-height': '22px',
+  'counter-font-size': `var(--${DEFAULT_PREFIX}-font-size-sm)`
+};

package/src/size/menu/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/menu/large.ts

@@ -0,0 +1,23 @@
+export const largeMenuSizeVars = {
+  padding: `0 16px`,
+
+  'margin-top': `4px`,
+
+  'item-height': `40px`,
+  'item-margin-top': `4px`,
+  'area-width': `263px`,
+
+  'collapsed-popup-item-padding': `0 16px`,
+  'collapsed-popup-margin-left': `-16px`,
+  'collapsed-button-border-radius': `4px`,
+  'collapsed-button-height': `40px`,
+  'collapsed-button-line-height': `38px`,
+  'designer-collapsed-button-height': `40px`,
+  'designer-collapsed-button-line-height': `30px`,
+  'designer-collapsed-button-border-radius': `4px`,
+
+  'border-radius': `4px`,
+  'selected-root-border-radius': `4px`,
+
+  'selected-margin-top': `4px`
+};

package/src/size/menu/medium.ts

@@ -0,0 +1,23 @@
+export const mediumMenuSizeVars = {
+  padding: `0 16px`,
+
+  'margin-top': `8px`,
+
+  'item-height': `32px`,
+  'item-margin-top': `4px`,
+  'area-width': `263px`,
+
+  'collapsed-popup-item-padding': `0 16px`,
+  'collapsed-popup-margin-left': `-16px`,
+  'collapsed-button-border-radius': `4px`,
+  'collapsed-button-height': `32px`,
+  'collapsed-button-line-height': `30px`,
+  'designer-collapsed-button-height': `32px`,
+  'designer-collapsed-button-line-height': `30px`,
+  'designer-collapsed-button-border-radius': `4px`,
+
+  'border-radius': `4px`,
+  'selected-root-border-radius': `4px`,
+
+  'selected-margin-top': `4px`
+};

package/src/size/menu/small.ts

@@ -0,0 +1,23 @@
+export const smallMenuSizeVars = {
+  padding: `0 16px`,
+
+  'margin-top': `8px`,
+
+  'item-height': `24px`,
+  'item-margin-top': `4px`,
+  'area-width': `263px`,
+
+  'collapsed-popup-item-padding': `0 16px`,
+  'collapsed-popup-margin-left': `-16px`,
+  'collapsed-button-border-radius': `4px`,
+  'collapsed-button-height': `24px`,
+  'collapsed-button-line-height': `22px`,
+  'designer-collapsed-button-height': `24px`,
+  'designer-collapsed-button-line-height': `22px`,
+  'designer-collapsed-button-border-radius': `4px`,
+
+  'border-radius': `4px`,
+  'selected-root-border-radius': `4px`,
+
+  'selected-margin-top': `4px`
+};

package/src/size/pagination/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/pagination/large.ts

@@ -0,0 +1,5 @@
+export const largePaginationSizeVars = {
+  height: '32px',
+  'item-height': '30px',
+  'item-width': '32px'
+};

package/src/size/pagination/medium.ts

@@ -0,0 +1,5 @@
+export const mediumPaginationSizeVars = {
+  height: '32px',
+  'item-height': '30px',
+  'item-width': '32px'
+};

package/src/size/pagination/small.ts

@@ -0,0 +1,5 @@
+export const smallPaginationSizeVars = {
+  height: '24px',
+  'item-height': '22px',
+  'item-width': '24px'
+};

package/src/size/select/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/select/large.ts

@@ -0,0 +1,3 @@
+export const largeSelectSizeVars = {
+  'line-height': '22px'
+};

package/src/size/select/medium.ts

@@ -0,0 +1,3 @@
+export const mediumSelectSizeVars = {
+  'line-height': '22px'
+};

package/src/size/select/small.ts

@@ -0,0 +1,3 @@
+export const smallSelectSizeVars = {
+  'line-height': '16px'
+};

package/src/size/table/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/table/large.ts

@@ -0,0 +1,5 @@
+export const largeTableSizeVars = {
+  'thead-height': '54px',
+  'user-prefer-top': '12px',
+  'user-prefer-right': '22px'
+};

package/src/size/table/medium.ts

@@ -0,0 +1,5 @@
+export const mediumTableSizeVars = {
+  'thead-height': '48px',
+  'user-prefer-top': '8px',
+  'user-prefer-right': '22px'
+};

package/src/size/table/small.ts

@@ -0,0 +1,5 @@
+export const smallTableSizeVars = {
+  'thead-height': '40px',
+  'user-prefer-top': '4px',
+  'user-prefer-right': '22px'
+};

package/src/size/tabs/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/tabs/large.ts

@@ -0,0 +1,5 @@
+import { DEFAULT_PREFIX } from '../../mount';
+
+export const largeTabsSizeVars = {
+  'font-size': `var(--${DEFAULT_PREFIX}-font-size-lg)`
+};

package/src/size/tabs/medium.ts

@@ -0,0 +1,5 @@
+import { DEFAULT_PREFIX } from '../../mount';
+
+export const mediumTabsSizeVars = {
+  'font-size': `var(--${DEFAULT_PREFIX}-font-size)`
+};

package/src/size/tabs/small.ts

@@ -0,0 +1,5 @@
+import { DEFAULT_PREFIX } from '../../mount';
+
+export const smallTabsSizeVars = {
+  'font-size': `var(--${DEFAULT_PREFIX}-font-size)`
+};

package/src/size/tree-select/index.ts

@@ -0,0 +1,3 @@
+export * from './large';
+export * from './medium';
+export * from './small';

package/src/size/tree-select/large.ts

@@ -0,0 +1,4 @@
+export const largeTreeSelectSizeVars = {
+  'selection-height': '24px',
+  'selection-line-height': '22px'
+};

package/src/size/tree-select/medium.ts

@@ -0,0 +1,4 @@
+export const mediumTreeSelectSizeVars = {
+  'selection-height': '24px',
+  'selection-line-height': '22px'
+};

package/src/size/tree-select/small.ts

@@ -0,0 +1,4 @@
+export const smallTreeSelectSizeVars = {
+  'selection-height': '16px',
+  'selection-line-height': '16px'
+};

package/src/style/dark/app-switch/app-switch.ts

@@ -0,0 +1,14 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'app-switch';
+
+export const cssVars = {
+  'background-color': '#333E4C',
+  'border-color': 'var(--oio-border-color)',
+  'app-name-overflow': `unset`,
+  'app-name-margin-right': `8px`,
+  'app-name-caret-down-display': `unset`,
+  'logo-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'designer-background-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'designer-logo-color': `var(--${DEFAULT_PREFIX}-primary-color)`
+};

package/src/style/dark/button/constant.ts

@@ -0,0 +1,4 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'button';
+export const prefix = `${DEFAULT_PREFIX}-${component}`;