@oinone/kunlun-theme 6.3.0 → 6.4.0

package/src/style/dark-minimalism/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: `var(--${DEFAULT_PREFIX}-background)`,
+  '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/default/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/default/component-theme.ts

@@ -39,11 +39,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 = () => ({
   [MultiTab]: {
@@ -171,8 +172,13 @@ 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/default/datetime/datetime.ts

@@ -1,5 +1,11 @@
+import { DEFAULT_PREFIX } from '../../../mount';
 export const component = 'datetime';
 
 export const cssVars = {
-  padding: `4px 12px`
+  padding: `4px 12px`,
+  'text-color-hover': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'text-color-active': '#fff',
+  'text-color-selected': '#fff',
+  'cell-internal-text-color-hover': '#fff',
+  'background-hover': `var(--${DEFAULT_PREFIX}-hover-background-color)`
 };

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

@@ -1,14 +1,18 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
 export const component = 'dropdown';
 
 export const cssVars = {
-  'background-color': 'var(--oio-background)',
-  'border-color': 'var(--oio-border-color)',
+  'background-color': `var(--${DEFAULT_PREFIX}-background)`,
+  'background-hover': `var(--${DEFAULT_PREFIX}-hover-background-color)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-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)',
+  color: `var(--${DEFAULT_PREFIX}-text-color)`,
+  'color-hover': `var(--${DEFAULT_PREFIX}-hover-text-color)`,
+  'color-disabled': `var(--${DEFAULT_PREFIX}-disabled-color)`,
+  'color-disabled-hover': `var(--${DEFAULT_PREFIX}-disabled-color)`,
 
-  'item-background-color-hover': 'var(--oio-hover-background-color)',
-  'item-background-color-disabled-hover': 'transparent'
+  'item-background-color-hover': `var(--${DEFAULT_PREFIX}-hover-background-color)`,
+  'item-background-color-disabled-hover': 'transparent',
+  'button-text-color': `var(--${DEFAULT_PREFIX}-button-link-text-color)`
 };

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

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

package/src/style/default/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': '#F7F7F7',
   'addon-color': ' rgba(0,0,0,0.65)',
   'tag-background': 'rgba(3,93,255, 0.1)',
+  'ready-delete-tag-background': 'rgba(224, 32, 32, 0.1)',
+  'ready-delete-tag-color': '#ff4d4f',
   'clear-background': '#fff',
   'clear-color': 'rgba(0,0,0,.25)'
 };

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

@@ -11,7 +11,7 @@ export const cssVars = {
   'active-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
   'active-font-weight': 500,
   'active-background': '#ffffff',
-  'icon-color': 'rgba(0, 0, 0, 0.2)',
+  'icon-color': 'rgba(0, 0, 0, 0.3)',
   'hover-background-color': '#f6f6f6',
 
   /**

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

@@ -5,5 +5,11 @@ 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)`
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'background-active': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'border-color-active': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'text-color-active': `#fff`,
+  'background-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'text-color-hover': '#fff'
 };

package/src/style/default/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,6 +44,8 @@ export const cssVars = {
   '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-hover-color': 'var(--oio-text-color-secondary)',
+  'dropdown-hover-background': '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/tabs/tabs.ts

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

package/src/style/default-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': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'border-color': 'none',
+  '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/default-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/default-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/default-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 };

package/src/style/default-minimalism/button/info.ts

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