@oinone/kunlun-theme 6.3.0 → 6.4.0

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

@@ -0,0 +1,117 @@
+import { DEFAULT_PREFIX } from '../mount';
+
+export const defaultModernVars = {
+  // 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-rgb': '224, 32, 32', // 错误色
+  '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: '#ffffff',
+  'body-background': '#F3F7FA',
+  'search-background': '#ffffff',
+  'header-background': '#ffffff',
+  'main-background': '#ffffff',
+  'footer-background': '#ffffff',
+  'menu-background': '#ffffff',
+  'stripe-color': '#f7f8fa',
+
+  'placeholder-color': 'rgba(0,0,0,0.25)',
+
+  // hover
+  'hover-background-color': '#F7F8FA',
+  'hover-text-color': `var(--${DEFAULT_PREFIX}-text-color-secondary)`,
+
+  // selected
+  'selected-background-color': '#EBF2FF',
+  'selected-text-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+
+  // 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(0,0,0,0.85)',
+  'text-color-rgb': '38, 38, 38',
+  'text-color-secondary': 'rgba(0,0,0,0.65)',
+  'text-color-three': 'rgba(0,0,0,0.45)',
+  /**
+   * @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(0,0,0,0.85)',
+  'readonly-bg': '#F7F7F7',
+  'readonly-active-bg': '#F7F7F7',
+  'readonly-border-color': 'rgba(217,217,217,1)',
+
+  // 禁用色调
+  'disabled-color': 'rgba(0, 0, 0, 0.45)',
+  'disabled-bg': '#F7F7F7',
+  'disabled-active-bg': '#F7F7F7',
+  'disabled-border-color': 'rgba(217,217,217,1)',
+
+  // border
+  'border-color': '#e3e7ee',
+  'border-color-danger': '#E02020',
+  'border-width': '1px',
+  'border-style': 'solid',
+
+  // common
+  'icon-color': 'rgba(0, 0, 0, 0.45)',
+  'default-icon-color': 'rgba(0, 0, 0, 0.45)',
+  'normal-icon-filter': '',
+  'icon-filter': 'invert(0.7) hue-rotate(180deg) brightness(0.5)',
+  'icon-filter-opacity': '0.2',
+  'close-icon-background': 'transparent',
+  'group-border-width': '1px',
+  'box-shadow-size': '6px',
+  'box-shadow': 'rgba(136, 156, 176, 0.1) 0px 2px 4px 0px',
+  'addon-color-pick-background': '#ffffff',
+  'addon-color-pick-readonly-background': `var(--${DEFAULT_PREFIX}-disabled-bg)`,
+  'addon-color-pick-border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'addon-color-pick-icon-color': '#909399',
+  'addon-color-pick-dropdown-background': '#ffffff',
+  'addon-color-pick-dropdown-border-color': '#e4e7ed',
+  'user-dropdown-icon-color': `rgba(0, 0, 0, 0.45)`,
+  'tag-select-background': '#f1f1f1',
+  'spin-background': '',
+  'gemini-mini-icon-color': '#cfe1ff'
+};

package/src/color/default-vars.ts

@@ -1,34 +1,63 @@
 import { DEFAULT_PREFIX } from '../mount';
+import { ColorHelper } from '../utils/ColorHelper';
+
+const standardColorVars = {
+  /**
+   * 主色
+   */
+  'primary-color': '#035dff',
+  /**
+   * 成功色
+   */
+  'success-color': '#6dd400',
+  /**
+   * 警告色
+   */
+  'warning-color': '#f7b500',
+  /**
+   * 通知色
+   */
+  'info-color': '#8c8c8c',
+  /**
+   * 错误色
+   */
+  'error-color': '#e02020'
+};
+
+function computeAlphaColor(colors: Record<string, string>): Record<string, string> {
+  const newColors: Record<string, string> = {};
+  for (const [key, color] of Object.entries(colors)) {
+    newColors[`${key}-10`] = ColorHelper.getAlphaColor(color, 0.1);
+  }
+  return newColors;
+}
 
 export const defaultVars = {
+  ...standardColorVars,
+  ...computeAlphaColor(standardColorVars),
   // 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', // 通知轮廓色
+  'info-color-outline': '#8C8C8C', // 通知轮廓色
   // error
   'error-color-rgb': '224, 32, 32', // 错误色
-  'error-color': '#E02020', // 错误色
   'error-color-hover': '#E75555',
   'error-color-focus': '#E75555',
   'error-color-active': '#C51C26',
@@ -48,12 +77,17 @@ export const defaultVars = {
   'main-background': '#ffffff',
   'footer-background': '#ffffff',
   'menu-background': '#ffffff',
+  'stripe-color': '#f7f8fa',
 
   'placeholder-color': 'rgba(0,0,0,0.25)',
 
   // hover
   'hover-background-color': `rgba(3, 93, 255, 0.1)`,
-  'hover-text-color': `var(--oio-primary-color)`,
+  'hover-text-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+
+  // selected
+  'selected-background-color': '#EBF2FF',
+  'selected-text-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
 
   // font
   'font-family':
@@ -79,7 +113,7 @@ export const defaultVars = {
   'readonly-border-color': 'rgba(217,217,217,1)',
 
   // 禁用色调
-  'disabled-color': 'rgba(0, 0, 0, 0.25)',
+  'disabled-color': 'rgba(0, 0, 0, 0.45)',
   'disabled-bg': '#F7F7F7',
   'disabled-active-bg': '#F7F7F7',
   'disabled-border-color': 'rgba(217,217,217,1)',
@@ -91,8 +125,8 @@ export const defaultVars = {
   'border-style': 'solid',
 
   // common
-  'icon-color': 'rgba(0, 0, 0, 0.25)',
-  'default-icon-color': 'rgba(0, 0, 0, 0.25)',
+  'icon-color': 'rgba(0, 0, 0, 0.45)',
+  'default-icon-color': 'rgba(0, 0, 0, 0.45)',
   'normal-icon-filter': '',
   'icon-filter': 'invert(0.7) hue-rotate(180deg) brightness(0.5)',
   'icon-filter-opacity': '0.2',
@@ -106,7 +140,7 @@ export const defaultVars = {
   'addon-color-pick-icon-color': '#909399',
   'addon-color-pick-dropdown-background': '#ffffff',
   'addon-color-pick-dropdown-border-color': '#e4e7ed',
-  'user-dropdown-icon-color': `rgba(0, 0, 0, 0.25)`,
+  'user-dropdown-icon-color': `rgba(0, 0, 0, 0.45)`,
   'tag-select-background': '#f1f1f1',
   'spin-background': '',
   'gemini-mini-icon-color': '#cfe1ff'

package/src/color/index.ts

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

package/src/init/initTheme.ts

@@ -1,4 +1,9 @@
-import { registerDarkThemeFn, registerDefaultThemeFn } from '../style';
+import {
+  registerDarkThemeFn,
+  registerDefaultThemeFn,
+  registerDefaultModernThemeFn,
+  registerDarkModernThemeFn
+} from '../style';
 import { DefaultSideBarTheme, ThemeType } from '../typing';
 import { setCurrentThemeType } from './currentTheme';
 
@@ -11,4 +16,6 @@ export function initOioComponentTheme(config: Partial<DefaultComponentTheme>) {
   setCurrentThemeType(mode.toLocaleLowerCase() as ThemeType);
   registerDefaultThemeFn();
   registerDarkThemeFn();
+  registerDefaultModernThemeFn();
+  registerDarkModernThemeFn();
 }

package/src/mount/index.ts

@@ -1,3 +1,4 @@
+import { ConfigProviderSPI } from '@oinone/kunlun-config';
 import { getTheme } from '../register';
 import { DefaultThemeName, ThemeName } from '../typing';
 import { DEFAULT_PREFIX } from './constant';
@@ -10,6 +11,15 @@ import { DEFAULT_PREFIX } from './constant';
  */
 const THEME_CONFIG: Record<string, any> = {};
 
+ConfigProviderSPI.register(
+  { name: 'theme', priority: 100 },
+  {
+    getConfig(key) {
+      return THEME_CONFIG[key] || THEME_CONFIG[`${key}-config`];
+    }
+  }
+);
+
 export function genCSSVars(themes: ThemeName[], el?: string, prefix?: string) {
   const headNode = document.querySelector('head')!;
 

package/src/style/dark/card/card.ts

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

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

@@ -38,11 +38,12 @@ import { component as Scrollbar, cssVars as ScrollbarCSSVars } from './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 Tabs, cssVars as TabsCSSVars } 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';
+import { component as Card, cssVars as CardCSSVars } from './card/card';
 
 export const getComponentTheme = () => {
   return {
@@ -166,9 +167,14 @@ export const getComponentTheme = () => {
       small: RichTextCSSVars
     },
     [Tabs]: {
-      large: largeTabsSizeVars,
-      medium: mediumTabsSizeVars,
-      small: smallTabsSizeVars
+      large: { ...largeTabsSizeVars, ...TabsCSSVars },
+      medium: { ...mediumTabsSizeVars, ...TabsCSSVars },
+      small: { ...smallTabsSizeVars, ...TabsCSSVars }
+    },
+    [Card]: {
+      large: CardCSSVars,
+      medium: CardCSSVars,
+      small: CardCSSVars
     }
   };
 };

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

@@ -6,5 +6,7 @@ export const cssVars = {
     readonlyShowPlaceholder: false,
     // 禁用模式展示占位符
     disabledShowPlaceholder: false
-  }
+  },
+  'label-color': 'var(--oio-text-color)',
+  'label-weight': 'bold'
 };

package/src/style/dark/input/input.ts

@@ -27,7 +27,7 @@ export const cssVars = {
   '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-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
   '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);`,
@@ -41,6 +41,8 @@ export const cssVars = {
   'addon-background': '#303B48',
   'addon-color': 'rgba(255,255,255,0.65)',
   'tag-background': 'rgba(3,93,255,0.2)',
+  'ready-delete-tag-background': 'rgba(224, 32, 32, 0.2)',
+  'ready-delete-tag-color': '#ff4d4f',
   'clear-background': '#000',
   'clear-color': 'var(--oio-text-color)'
 };

package/src/style/dark/select/select.ts

@@ -29,7 +29,7 @@ export const cssVars = {
   '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-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
   'border-radius-focus': `var(--${prefix}-border-radius)`,
   'outline-focus': `var(--${prefix}-outline)`,
   'shadow-focus': `0px 0px 0px 2px rgba(3,93,255,0.1);`,
@@ -44,5 +44,7 @@ export const cssVars = {
   'dropdown-selected-color': '#fff',
   'dropdown-color': 'rgba(255,255,255,0.65)',
   'dropdown-selected': 'rgba(255,255,255,0.1)',
+  'dropdown-hover-color': 'rgba(255,255,255,0.65)',
+  'dropdown-hover-background': 'rgba(255,255,255,0.1)',
   'dropdown-box-shadow': '0px 0px 6px 0px rgba(0,0,0,0.2)'
 };

package/src/style/dark/tabs/tabs.ts

@@ -1 +1,7 @@
 export const component = 'tabs';
+
+export const cssVars = {
+  'card-tab-background': 'var(--oio-background)',
+  'card-tab-active-background': 'var(--oio-stripe-color)',
+  'active-text-color': '#fff'
+};

package/src/style/dark-minimalism/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-minimalism/button/constant.ts

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

package/src/style/dark-minimalism/button/danger.ts

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

package/src/style/dark-minimalism/button/index.ts

@@ -0,0 +1,28 @@
+import { component } from './constant';
+import { defaultDangerCSSVars, linkDangerCSSVars, primaryDangerCSSVars } from './danger';
+import { defaultInfoCSSVars, linkInfoCSSVars, primaryInfoCSSVars } from './info';
+import { defaultCSSVars, linkCSSVars, primaryCSSVars } from './standard';
+import { defaultSuccessCSSVars, linkSuccessCSSVars, primarySuccessCSSVars } from './success';
+import { defaultWarningCSSVars, linkWarningCSSVars, primaryWarningCSSVars } from './warning';
+
+export const cssVars = {
+  ...defaultCSSVars,
+  ...defaultDangerCSSVars,
+  ...defaultInfoCSSVars,
+  ...defaultSuccessCSSVars,
+  ...defaultWarningCSSVars,
+
+  ...primaryCSSVars,
+  ...primaryDangerCSSVars,
+  ...primaryInfoCSSVars,
+  ...primarySuccessCSSVars,
+  ...primaryWarningCSSVars,
+
+  ...linkCSSVars,
+  ...linkDangerCSSVars,
+  ...linkInfoCSSVars,
+  ...linkSuccessCSSVars,
+  ...linkWarningCSSVars
+};
+
+export { component };