@oinone/kunlun-theme 6.2.0

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

@@ -0,0 +1,146 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+import { prefix } from './constant';
+
+export const defaultWarningCSSVars = {
+  // default-warning
+  'default-warning-background': `var(--${prefix}-background)`,
+  'default-warning-border-width': `var(--${prefix}-border-width)`,
+  'default-warning-border-style': `var(--${prefix}-border-style)`,
+  'default-warning-border-color': `var(--${DEFAULT_PREFIX}-warning-color)`,
+  'default-warning-border-radius': `var(--${prefix}-border-radius)`,
+  'default-warning-outline': 'none',
+  'default-warning-shadow': 'none',
+  'default-warning-text-color': `var(--${DEFAULT_PREFIX}-warning-color)`,
+  // default-warning-active
+  'default-warning-background-active': `var(--${prefix}-default-warning-background)`,
+  'default-warning-border-width-active': `var(--${prefix}-default-warning-border-width)`,
+  'default-warning-border-style-active': `var(--${prefix}-default-warning-border-style)`,
+  'default-warning-border-color-active': `var(--${DEFAULT_PREFIX}-warning-color-active)`,
+  'default-warning-border-radius-active': `var(--${prefix}-default-warning-border-radius)`,
+  'default-warning-outline-active': `var(--${prefix}-default-warning-outline)`,
+  'default-warning-shadow-active': `var(--${prefix}-default-warning-shadow)`,
+  'default-warning-text-color-active': `var(--${DEFAULT_PREFIX}-warning-color-active)`,
+  // default-warning-focus
+  'default-warning-background-focus': `var(--${prefix}-default-warning-background)`,
+  'default-warning-border-width-focus': `var(--${prefix}-default-warning-border-width)`,
+  'default-warning-border-style-focus': `var(--${prefix}-default-warning-border-style)`,
+  'default-warning-border-color-focus': `var(--${DEFAULT_PREFIX}-warning-color-focus)`,
+  'default-warning-border-radius-focus': `var(--${prefix}-default-warning-border-radius)`,
+  'default-warning-outline-focus': `var(--${prefix}-default-warning-outline)`,
+  'default-warning-shadow-focus': `var(--${prefix}-default-warning-shadow)`,
+  'default-warning-text-color-focus': `var(--${DEFAULT_PREFIX}-warning-color-focus)`,
+  // default-warning-hover
+  'default-warning-background-hover': `var(--${prefix}-default-warning-background)`,
+  'default-warning-border-width-hover': `var(--${prefix}-default-warning-border-width)`,
+  'default-warning-border-style-hover': `var(--${prefix}-default-warning-border-style)`,
+  'default-warning-border-color-hover': `var(--${DEFAULT_PREFIX}-warning-color-hover)`,
+  'default-warning-border-radius-hover': `var(--${prefix}-default-warning-border-radius)`,
+  'default-warning-outline-hover': `var(--${prefix}-default-warning-outline)`,
+  'default-warning-shadow-hover': `var(--${prefix}-default-warning-shadow)`,
+  'default-warning-text-color-hover': `var(--${DEFAULT_PREFIX}-warning-color-hover)`,
+  // default-warning-visited
+  'default-warning-background-visited': `var(--${prefix}-default-warning-background)`,
+  'default-warning-border-width-visited': `var(--${prefix}-default-warning-border-width)`,
+  'default-warning-border-style-visited': `var(--${prefix}-default-warning-border-style)`,
+  'default-warning-border-color-visited': `var(--${prefix}-default-warning-border-color)`,
+  'default-warning-border-radius-visited': `var(--${prefix}-default-warning-border-radius)`,
+  'default-warning-outline-visited': `var(--${prefix}-default-warning-outline)`,
+  'default-warning-shadow-visited': `var(--${prefix}-default-warning-shadow)`,
+  'default-warning-text-color-visited': `var(--${prefix}-default-warning-text-color)`
+};
+
+export const primaryWarningCSSVars = {
+  // primary-warning
+  'primary-warning-background': `var(--${DEFAULT_PREFIX}-warning-color)`,
+  'primary-warning-border-width': `var(--${prefix}-primary-border-width)`,
+  'primary-warning-border-style': `var(--${prefix}-primary-border-style)`,
+  'primary-warning-border-color': `var(--${DEFAULT_PREFIX}-warning-color)`,
+  'primary-warning-border-radius': `var(--${prefix}-primary-border-radius)`,
+  'primary-warning-outline': 'none',
+  'primary-warning-shadow': 'none',
+  'primary-warning-text-color': '#ffffff',
+  // primary-warning-active
+  'primary-warning-background-active': `var(--${DEFAULT_PREFIX}-warning-color-active)`,
+  'primary-warning-border-width-active': `var(--${prefix}-primary-warning-border-width)`,
+  'primary-warning-border-style-active': `var(--${prefix}-primary-warning-border-style)`,
+  'primary-warning-border-color-active': `var(--${DEFAULT_PREFIX}-warning-color-active)`,
+  'primary-warning-border-radius-active': `var(--${prefix}-primary-warning-border-radius)`,
+  'primary-warning-outline-active': `var(--${prefix}-primary-warning-outline)`,
+  'primary-warning-shadow-active': `var(--${prefix}-primary-warning-shadow)`,
+  'primary-warning-text-color-active': `var(--${prefix}-primary-warning-text-color)`,
+  // primary-warning-focus
+  'primary-warning-background-focus': `var(--${DEFAULT_PREFIX}-warning-color-focus)`,
+  'primary-warning-border-width-focus': `var(--${prefix}-primary-warning-border-width)`,
+  'primary-warning-border-style-focus': `var(--${prefix}-primary-warning-border-style)`,
+  'primary-warning-border-color-focus': `var(--${DEFAULT_PREFIX}-warning-color-focus)`,
+  'primary-warning-border-radius-focus': `var(--${prefix}-primary-warning-border-radius)`,
+  'primary-warning-outline-focus': `var(--${prefix}-primary-warning-outline)`,
+  'primary-warning-shadow-focus': `var(--${prefix}-primary-warning-shadow)`,
+  'primary-warning-text-color-focus': `var(--${prefix}-primary-warning-text-color)`,
+  // primary-warning-hover
+  'primary-warning-background-hover': `var(--${DEFAULT_PREFIX}-warning-color-hover)`,
+  'primary-warning-border-width-hover': `var(--${prefix}-primary-warning-border-width)`,
+  'primary-warning-border-style-hover': `var(--${prefix}-primary-warning-border-style)`,
+  'primary-warning-border-color-hover': `var(--${DEFAULT_PREFIX}-warning-color-hover)`,
+  'primary-warning-border-radius-hover': `var(--${prefix}-primary-warning-border-radius)`,
+  'primary-warning-outline-hover': `var(--${prefix}-primary-warning-outline)`,
+  'primary-warning-shadow-hover': `var(--${prefix}-primary-warning-shadow)`,
+  'primary-warning-text-color-hover': `var(--${prefix}-primary-warning-text-color)`,
+  // primary-warning-visited
+  'primary-warning-background-visited': `var(--${prefix}-primary-warning-background)`,
+  'primary-warning-border-width-visited': `var(--${prefix}-primary-warning-border-width)`,
+  'primary-warning-border-style-visited': `var(--${prefix}-primary-warning-border-style)`,
+  'primary-warning-border-color-visited': `var(--${prefix}-primary-warning-border-color)`,
+  'primary-warning-border-radius-visited': `var(--${prefix}-primary-warning-border-radius)`,
+  'primary-warning-outline-visited': `var(--${prefix}-primary-warning-outline)`,
+  'primary-warning-shadow-visited': `var(--${prefix}-primary-warning-shadow)`,
+  'primary-warning-text-color-visited': `var(--${prefix}-primary-warning-text-color)`
+};
+
+export const linkWarningCSSVars = {
+  // link-warning
+  'link-warning-background': `var(--${prefix}-link-background)`,
+  'link-warning-border-width': `var(--${prefix}-link-border-width)`,
+  'link-warning-border-style': `var(--${prefix}-link-border-style)`,
+  'link-warning-border-color': `var(--${prefix}-link-border-color)`,
+  'link-warning-border-radius': `var(--${prefix}-link-border-radius)`,
+  'link-warning-outline': 'none',
+  'link-warning-shadow': 'none',
+  'link-warning-text-color': `var(--${DEFAULT_PREFIX}-warning-color)`,
+  // link-warning-active
+  'link-warning-background-active': `var(--${prefix}-link-warning-color)`,
+  'link-warning-border-width-active': `var(--${prefix}-link-warning-border-width)`,
+  'link-warning-border-style-active': `var(--${prefix}-link-warning-border-style)`,
+  'link-warning-border-color-active': `var(--${prefix}-link-warning-color)`,
+  'link-warning-border-radius-active': `var(--${prefix}-link-warning-border-radius)`,
+  'link-warning-outline-active': `var(--${prefix}-link-warning-outline)`,
+  'link-warning-shadow-active': `var(--${prefix}-link-warning-shadow)`,
+  'link-warning-text-color-active': `var(--${DEFAULT_PREFIX}-warning-color-active)`,
+  // link-warning-focus
+  'link-warning-background-focus': `var(--${prefix}-link-warning-color)`,
+  'link-warning-border-width-focus': `var(--${prefix}-link-warning-border-width)`,
+  'link-warning-border-style-focus': `var(--${prefix}-link-warning-border-style)`,
+  'link-warning-border-color-focus': `var(--${prefix}-link-warning-color)`,
+  'link-warning-border-radius-focus': `var(--${prefix}-link-warning-border-radius)`,
+  'link-warning-outline-focus': `var(--${prefix}-link-warning-outline)`,
+  'link-warning-shadow-focus': `var(--${prefix}-link-warning-shadow)`,
+  'link-warning-text-color-focus': `var(--${DEFAULT_PREFIX}-warning-color-focus)`,
+  // link-warning-hover
+  'link-warning-background-hover': `var(--${prefix}-link-warning-color)`,
+  'link-warning-border-width-hover': `var(--${prefix}-link-warning-border-width)`,
+  'link-warning-border-style-hover': `var(--${prefix}-link-warning-border-style)`,
+  'link-warning-border-color-hover': `var(--${prefix}-link-warning-color)`,
+  'link-warning-border-radius-hover': `var(--${prefix}-link-warning-border-radius)`,
+  'link-warning-outline-hover': `var(--${prefix}-link-warning-outline)`,
+  'link-warning-shadow-hover': `var(--${prefix}-link-warning-shadow)`,
+  'link-warning-text-color-hover': `var(--${DEFAULT_PREFIX}-warning-color-hover)`,
+  // link-warning-visited
+  'link-warning-background-visited': `var(--${prefix}-link-warning-background)`,
+  'link-warning-border-width-visited': `var(--${prefix}-link-warning-border-width)`,
+  'link-warning-border-style-visited': `var(--${prefix}-link-warning-border-style)`,
+  'link-warning-border-color-visited': `var(--${prefix}-link-warning-border-color)`,
+  'link-warning-border-radius-visited': `var(--${prefix}-link-warning-border-radius)`,
+  'link-warning-outline-visited': `var(--${prefix}-link-warning-outline)`,
+  'link-warning-shadow-visited': `var(--${prefix}-link-warning-shadow)`,
+  'link-warning-text-color-visited': `var(--${prefix}-link-warning-text-color)`
+};

package/src/style/dark/checkbox/checkbox.ts

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

package/src/style/dark/component-theme.ts

@@ -0,0 +1,174 @@
+import {
+  largeInputSizeVars,
+  largeMenuSizeVars,
+  largePaginationSizeVars,
+  largeSelectSizeVars,
+  largeTableSizeVars,
+  largeTabsSizeVars,
+  largeTreeSelectSizeVars,
+  mediumInputSizeVars,
+  mediumMenuSizeVars,
+  mediumPaginationSizeVars,
+  mediumSelectSizeVars,
+  mediumTableSizeVars,
+  mediumTabsSizeVars,
+  mediumTreeSelectSizeVars,
+  smallMenuSizeVars,
+  smallPaginationSizeVars,
+  smallSelectSizeVars,
+  smallTableSizeVars,
+  smallTabsSizeVars,
+  smallTreeSelectSizeVars
+} from '../../size';
+import { component as AppSwitch, cssVars as AppSwitchCSSVars } from './app-switch/app-switch';
+import { component as Button, cssVars as ButtonCSSVars } from './button';
+import { component as Checkbox, cssVars as checkboxCSSVars } from './checkbox/checkbox';
+import { component as Drawer, cssVars as DrawerCSSVars } from './drawer/drawer';
+import { component as Dropdown, cssVars as DropdownCSSVars } from './dropdown';
+import { component as FormItem, cssVars as FormItemCSSVars } from './form-item/form-item';
+import { component as Header, cssVars as HeaderCSSVars } from './header/header';
+import { component as Input, cssVars as InputCSSVars } from './input/input';
+import { component as Menu, cssVars as MenuCSSVars } from './menu/menu';
+import { component as Modal, cssVars as ModalCSSVars } from './modal/modal';
+import { component as MultiTab, cssVars as MultiTabCSSVars } from './multi-tab/multi-tab';
+import { component as Pagination, cssVars as PaginationCSSVars } from './pagination/pagination';
+import { component as Popconfirm, cssVars as PopconfirmCSSVars } from './popconfirm/popconfirm';
+import { component as RichText, cssVars as RichTextCSSVars } from './rich-text/rich-text';
+import { component as Scrollbar, cssVars as ScrollbarCSSVars } from './scrollbar/scrollbar';
+import { component as Select, cssVars as SelectCSSVars } from './select/select';
+import { component as Switch, cssVars as switchCSSVars } from './switch/switch';
+import { component as Table, cssVars as TableCSSVars } from './table/table';
+import { component as Tabs } from './tabs/tabs';
+import { component as Textarea, cssVars as TextareaCSSVars } from './textarea/textarea';
+import { component as Transfer, cssVars as TransferCSSVars } from './transfer/transfer';
+import { component as TreeSelect } from './tree-select/tree-select';
+import { component as Upload, cssVars as UploadCSSVars } from './upload/upload';
+
+export const getComponentTheme = () => {
+  return {
+    [MultiTab]: {
+      large: { ...MultiTabCSSVars },
+      medium: { ...MultiTabCSSVars },
+      small: { ...MultiTabCSSVars }
+    },
+    [Button]: {
+      large: ButtonCSSVars,
+      medium: ButtonCSSVars,
+      small: ButtonCSSVars
+    },
+    [Input]: {
+      large: {
+        ...InputCSSVars,
+        ...largeInputSizeVars
+      },
+      medium: {
+        ...InputCSSVars,
+        ...mediumInputSizeVars
+      },
+      small: {
+        ...InputCSSVars,
+        ...mediumInputSizeVars
+      }
+    },
+    [Checkbox]: {
+      large: { ...checkboxCSSVars },
+      medium: { ...checkboxCSSVars },
+      small: { ...checkboxCSSVars }
+    },
+    [Switch]: {
+      large: { ...switchCSSVars },
+      medium: { ...switchCSSVars },
+      small: { ...switchCSSVars }
+    },
+    [Pagination]: {
+      large: { ...PaginationCSSVars, ...largePaginationSizeVars },
+      medium: { ...PaginationCSSVars, ...mediumPaginationSizeVars },
+      small: { ...PaginationCSSVars, ...smallPaginationSizeVars }
+    },
+    [Select]: {
+      large: { ...SelectCSSVars, ...largeSelectSizeVars },
+      medium: { ...SelectCSSVars, ...mediumSelectSizeVars },
+      small: { ...SelectCSSVars, ...smallSelectSizeVars }
+    },
+    [Textarea]: {
+      large: TextareaCSSVars,
+      medium: TextareaCSSVars,
+      small: TextareaCSSVars
+    },
+    [Upload]: {
+      large: UploadCSSVars,
+      medium: UploadCSSVars,
+      small: UploadCSSVars
+    },
+    [Menu]: {
+      large: { ...MenuCSSVars(), ...largeMenuSizeVars },
+      medium: { ...MenuCSSVars(), ...mediumMenuSizeVars },
+      small: { ...MenuCSSVars(), ...smallMenuSizeVars }
+    },
+    [AppSwitch]: {
+      large: AppSwitchCSSVars,
+      medium: AppSwitchCSSVars,
+      small: AppSwitchCSSVars
+    },
+    [Table]: {
+      large: { ...TableCSSVars, ...largeTableSizeVars },
+      medium: { ...TableCSSVars, ...mediumTableSizeVars },
+      small: { ...TableCSSVars, ...smallTableSizeVars }
+    },
+    [Header]: {
+      large: HeaderCSSVars,
+      medium: HeaderCSSVars,
+      small: HeaderCSSVars
+    },
+    [Modal]: {
+      large: ModalCSSVars,
+      medium: ModalCSSVars,
+      small: ModalCSSVars
+    },
+    [Popconfirm]: {
+      large: PopconfirmCSSVars,
+      medium: PopconfirmCSSVars,
+      small: PopconfirmCSSVars
+    },
+    [TreeSelect]: {
+      large: largeTreeSelectSizeVars,
+      medium: mediumTreeSelectSizeVars,
+      small: smallTreeSelectSizeVars
+    },
+    [Transfer]: {
+      large: TransferCSSVars,
+      medium: TransferCSSVars,
+      small: TransferCSSVars
+    },
+    [Scrollbar]: {
+      large: ScrollbarCSSVars,
+      medium: ScrollbarCSSVars,
+      small: ScrollbarCSSVars
+    },
+    [Drawer]: {
+      large: DrawerCSSVars,
+      medium: DrawerCSSVars,
+      small: DrawerCSSVars
+    },
+    [Dropdown]: {
+      large: DropdownCSSVars,
+      medium: DropdownCSSVars,
+      small: DropdownCSSVars
+    },
+    [FormItem]: {
+      large: FormItemCSSVars,
+      medium: FormItemCSSVars,
+      small: FormItemCSSVars
+    },
+    [RichText]: {
+      large: RichTextCSSVars,
+      medium: RichTextCSSVars,
+      small: RichTextCSSVars
+    },
+    [Tabs]: {
+      large: largeTabsSizeVars,
+      medium: mediumTabsSizeVars,
+      small: smallTabsSizeVars
+    }
+  };
+};

package/src/style/dark/drawer/drawer.ts

@@ -0,0 +1,10 @@
+export const component = 'drawer';
+
+export const cssVars = {
+  'width-small': '560px',
+  'width-medium': '890px',
+  'width-large': '1200px',
+  'height-small': '40vh',
+  'height-medium': '60vh',
+  'height-large': '90vh'
+};

package/src/style/dark/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': '0px 0px 6px 0px rgba(0, 0, 0, 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/dark/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/dark/header/header.ts

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

package/src/style/dark/index.ts

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

package/src/style/dark/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: '#15232E',
+  'background-color': '#15232E',
+  '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': '#303B48',
+  'addon-color': 'rgba(255,255,255,0.65)',
+  'tag-background': 'rgba(3,93,255,0.2)',
+  'clear-background': '#000',
+  'clear-color': 'var(--oio-text-color)'
+};

package/src/style/dark/menu/menu.ts

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

package/src/style/dark/modal/modal.ts

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

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

@@ -0,0 +1,67 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'multi-tabs';
+
+export const cssVars = {
+  /**
+   * 标准样式
+   */
+  background: `var(--${DEFAULT_PREFIX}-body-background)`,
+  color: `var(--${DEFAULT_PREFIX}-text-color)`,
+  'active-color': '#ffffff',
+  'active-font-weight': 500,
+  'active-background': `var(--${DEFAULT_PREFIX}-background)`,
+  'icon-color': 'rgba(255, 255, 255, 0.3)',
+  'hover-background-color': 'rgba(255, 255, 255, 0.10)',
+
+  /**
+   * 内联样式
+   */
+  'background-color-inline': `var(--${DEFAULT_PREFIX}-background)`,
+  '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': `var(--${DEFAULT_PREFIX}-body-background)`,
+  'background-color-active-theme1': `var(--${DEFAULT_PREFIX}-background)`,
+  'border-color-theme1': 'var(--oio-border-color)',
+
+  /**
+   * theme1 inline
+   */
+  'background-color-theme1-inline': `var(--${DEFAULT_PREFIX}-background)`,
+  'background-color-active-theme1-inline': `rgba(255, 255, 255, 0.2)`,
+  'active-color-active-theme1-inline': `#ffffff`,
+  'icon-color-active-theme1-inline': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`,
+
+  /**
+   * theme2
+   */
+  'background-color-theme2': `var(--${DEFAULT_PREFIX}-background)`,
+  'border-color-theme2': 'var(--oio-border-color)',
+
+  /**
+   * theme3
+   */
+  'background-color-theme3': `var(--${DEFAULT_PREFIX}-body-background)`,
+  'background-color-active-theme3': `rgba(255, 255, 255, 0.2)`,
+  'active-color-active-theme3': `#ffffff`,
+  'icon-color-active-theme3': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`,
+
+  /**
+   * theme3 inline
+   */
+  'background-color-theme3-inline': `var(--${DEFAULT_PREFIX}-background)`,
+
+  /**
+   * theme4 inline
+   */
+  'background-color-theme4-inline': `var(--${DEFAULT_PREFIX}-background)`,
+  'background-color-active-theme4-inline': `rgba(255, 255, 255, 0.2)`,
+  'active-color-active-theme4-inline': `#ffffff`,
+  'icon-color-active-theme4-inline': `var(--${DEFAULT_PREFIX}-multi-tabs-icon-color)`
+};

package/src/style/dark/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)`
+};

package/src/style/dark/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/dark/registry.ts

@@ -0,0 +1,62 @@
+import { darkVars } from '../../color';
+import { registerTheme } from '../../register';
+import { defaultLargeSizeVars, defaultMediumSizeVars, defaultSmallSizeVars } from '../../size';
+import { ThemeSize } from '../../typing';
+import { getComponentTheme } from './component-theme';
+
+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 = {
+    ...darkVars,
+    ...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(`dark-${size}`, cssVars);
+}
+
+export function registerDarkThemeFn() {
+  registerDefaultTheme('large');
+  registerDefaultTheme('medium');
+  registerDefaultTheme('small');
+}

package/src/style/dark/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': '#333e4c',
+  '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}-select-dropdown-selected)`,
+  '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/dark/scrollbar/scrollbar.ts

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