@oinone/kunlun-theme 6.2.0

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

@@ -0,0 +1,48 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'select';
+const prefix = `${DEFAULT_PREFIX}-${component}`;
+
+export const cssVars = {
+  // default
+  background: '#15232E',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': `var(--${DEFAULT_PREFIX}-border-color)`,
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'counter-background': '#15232E',
+  'counter-color': 'rgba(255,255,255,0.65)',
+  'counter-font-size': `var(--${DEFAULT_PREFIX}-font-size-sm)`,
+  // default-hover
+  'background-hover': `var(--${prefix}-background)`,
+  'border-width-hover': `var(--${prefix}-border-width)`,
+  'border-style-hover': `var(--${prefix}-border-style)`,
+  'border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${prefix}-text-color)`,
+  // default-focus
+  'background-focus': `var(--${prefix}-background)`,
+  'border-width-focus': `var(--${prefix}-border-width)`,
+  'border-style-focus': `var(--${prefix}-border-style)`,
+  'border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `0px 0px 0px 2px rgba(3,93,255,0.1);`,
+  'text-color-focus': `var(--${prefix}-text-color)`,
+  // readonly
+  'readonly-border-color': `var(--${DEFAULT_PREFIX}-readonly-border-color)`,
+  'item-readonly-bg': `var(--${DEFAULT_PREFIX}-primary-color-rgb)`,
+  'item-readonly-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'item-readonly-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+
+  'dropdown-background': '#1F2935',
+  'dropdown-selected-color': '#fff',
+  'dropdown-color': 'rgba(255,255,255,0.65)',
+  'dropdown-selected': 'rgba(255,255,255,0.1)',
+  'dropdown-box-shadow': '0px 0px 6px 0px rgba(0,0,0,0.2)'
+};

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

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

package/src/style/dark/table/table.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+
+export const component = 'table';
+
+export const cssVars = {
+  'thead-bg': `var(--oio-background)`,
+  'body-bg': `var(--oio-background)`,
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  'title-color': 'rgba(255,255,255,0.85)',
+  'title-font-weight': 500,
+  'title-sort-icon-size': '11px',
+  'tr-height': `var(--${DEFAULT_PREFIX}-height-lg)`,
+  'tr-stripe-bg': 'rgba(255,255,255,0.1)',
+  'tr-checked-bg': 'rgba(255,255,255,0.1)',
+  'tr-hover-bg': 'rgba(255,255,255,0.1)',
+  'row-border': 'rgba(51,62,76,1)',
+  'row-body-border': 'rgba(51,62,76,1)',
+  config: {
+    border: 'full',
+    stripe: false,
+    isCurrent: true,
+    isHover: true
+  }
+};
+
+// export const cssVars = {
+//   'thead-bg': `var(--oio-background)`,
+//   'body-bg': `var(--oio-background)`,
+//   'title-color': 'rgba(255,255,255,0.85)',
+//   'title-font-weight': bold,
+//   'title-sort-icon-size': '11px',
+//   'tr-height': `var(--${DEFAULT_PREFIX}-height-lg)`,
+//   'tr-stripe-bg': 'rgba(255,255,255,0.1)',
+//   'tr-checked-bg': 'rgba(255,255,255,0.1)',
+//   'tr-hover-bg': 'rgba(255,255,255,0.1)',
+//   'row-border': 'rgba(51,62,76,1)',
+//   'row-body-border': 'rgba(51,62,76,1)',
+//   config: {
+//     border: 'oinone-custom-border',
+//     stripe: false,
+//     isCurrent: true,
+//     isHover: true
+//   }
+// };

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

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

package/src/style/dark/textarea/textarea.ts

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

package/src/style/dark/transfer/transfer.ts

@@ -0,0 +1,6 @@
+export const component = 'transfer';
+
+export const cssVars = {
+  'background-color': 'var(--oio-background)',
+  'header-border-color': 'var(--oio-border-color)'
+};

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

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

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