@oinone/kunlun-theme 6.2.0

package/src/style/default/button/standard.ts

@@ -0,0 +1,146 @@
+import { DEFAULT_PREFIX } from '../../../mount';
+import { prefix } from './constant';
+
+export const defaultCSSVars = {
+  // default
+  background: '#ffffff',
+  'border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'border-color': '#d9d9d9',
+  'border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  outline: 'none',
+  shadow: 'none',
+  'text-color': `var(--${DEFAULT_PREFIX}-text-color)`,
+  // default-active
+  'background-active': `var(--${prefix}-background)`,
+  'border-width-active': `var(--${prefix}-border-width)`,
+  'border-style-active': `var(--${prefix}-border-style)`,
+  'border-color-active': `var(--${prefix}-border-color)`,
+  'border-radius-active': `var(--${prefix}-border-radius)`,
+  'outline-active': `var(--${prefix}-outline)`,
+  'shadow-active': `var(--${prefix}-shadow)`,
+  'text-color-active': `var(--${DEFAULT_PREFIX}-primary-color-active)`,
+  // 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(--${prefix}-border-color)`,
+  'border-radius-focus': `var(--${prefix}-border-radius)`,
+  'outline-focus': `var(--${prefix}-outline)`,
+  'shadow-focus': `var(--${prefix}-shadow)`,
+  'text-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
+  // 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(--${prefix}-border-color)`,
+  'border-radius-hover': `var(--${prefix}-border-radius)`,
+  'outline-hover': `var(--${prefix}-outline)`,
+  'shadow-hover': `var(--${prefix}-shadow)`,
+  'text-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  // default-visited
+  'background-visited': `var(--${prefix}-background)`,
+  'border-width-visited': `var(--${prefix}-border-width)`,
+  'border-style-visited': `var(--${prefix}-border-style)`,
+  'border-color-visited': `var(--${prefix}-border-color)`,
+  'border-radius-visited': `var(--${prefix}-border-radius)`,
+  'outline-visited': `var(--${prefix}-outline)`,
+  'shadow-visited': `var(--${prefix}-shadow)`,
+  'text-color-visited': `var(--${prefix}-text-color)`
+};
+
+export const primaryCSSVars = {
+  // primary
+  'primary-background': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'primary-border-width': `var(--${DEFAULT_PREFIX}-border-width)`,
+  'primary-border-style': `var(--${DEFAULT_PREFIX}-border-style)`,
+  'primary-border-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  'primary-border-radius': `var(--${DEFAULT_PREFIX}-border-radius)`,
+  'primary-outline': `var(--${DEFAULT_PREFIX}-primary-color-outline)`,
+  'primary-shadow': 'none',
+  'primary-text-color': '#ffffff',
+  // primary-active
+  'primary-background-active': `var(--${DEFAULT_PREFIX}-primary-color-active)`,
+  'primary-border-width-active': `var(--${prefix}-primary-border-width)`,
+  'primary-border-style-active': `var(--${prefix}-primary-border-style)`,
+  'primary-border-color-active': `var(--${DEFAULT_PREFIX}-primary-color-active)`,
+  'primary-border-radius-active': `var(--${prefix}-primary-border-radius)`,
+  'primary-outline-active': `var(--${prefix}-primary-outline)`,
+  'primary-shadow-active': `var(--${prefix}-primary-shadow)`,
+  'primary-text-color-active': `var(--${prefix}-primary-text-color)`,
+  // primary-focus
+  'primary-background-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
+  'primary-border-width-focus': `var(--${prefix}-primary-border-width)`,
+  'primary-border-style-focus': `var(--${prefix}-primary-border-style)`,
+  'primary-border-color-focus': `var(--${DEFAULT_PREFIX}-primary-color-focus)`,
+  'primary-border-radius-focus': `var(--${prefix}-primary-border-radius)`,
+  'primary-outline-focus': `var(--${prefix}-primary-outline)`,
+  'primary-shadow-focus': `var(--${prefix}-primary-shadow)`,
+  'primary-text-color-focus': `var(--${prefix}-primary-text-color)`,
+  // primary-hover
+  'primary-background-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'primary-border-width-hover': `var(--${prefix}-primary-border-width)`,
+  'primary-border-style-hover': `var(--${prefix}-primary-border-style)`,
+  'primary-border-color-hover': `var(--${DEFAULT_PREFIX}-primary-color-hover)`,
+  'primary-border-radius-hover': `var(--${prefix}-primary-border-radius)`,
+  'primary-outline-hover': `var(--${prefix}-primary-outline)`,
+  'primary-shadow-hover': `var(--${prefix}-primary-shadow)`,
+  'primary-text-color-hover': `var(--${prefix}-primary-text-color)`,
+  // primary-visited
+  'primary-background-visited': `var(--${prefix}-primary-background)`,
+  'primary-border-width-visited': `var(--${prefix}-primary-border-width)`,
+  'primary-border-style-visited': `var(--${prefix}-primary-border-style)`,
+  'primary-border-color-visited': `var(--${prefix}-primary-border-color)`,
+  'primary-border-radius-visited': `var(--${prefix}-primary-border-radius)`,
+  'primary-outline-visited': `var(--${prefix}-primary-outline)`,
+  'primary-shadow-visited': `var(--${prefix}-primary-shadow)`,
+  'primary-text-color-visited': `var(--${prefix}-primary-text-color)`
+};
+
+export const linkCSSVars = {
+  // link
+  'link-background': 'transparent',
+  'link-border-width': 'none',
+  'link-border-style': 'none',
+  'link-border-color': 'none',
+  'link-border-radius': 'none',
+  'link-outline': 'none',
+  'link-shadow': 'none',
+  'link-text-color': `var(--${DEFAULT_PREFIX}-primary-color)`,
+  // link-active
+  'link-background-active': `var(--${prefix}-link-background)`,
+  'link-border-width-active': `var(--${prefix}-link-border-width)`,
+  'link-border-style-active': `var(--${prefix}-link-border-style)`,
+  'link-border-color-active': `var(--${prefix}-link-border-color)`,
+  'link-border-radius-active': `var(--${prefix}-link-border-radius)`,
+  'link-outline-active': `var(--${prefix}-link-outline)`,
+  'link-shadow-active': `var(--${prefix}-link-shadow)`,
+  'link-text-color-active': `var(--${prefix}-link-text-color)`,
+  // link-focus
+  'link-background-focus': `var(--${prefix}-link-background)`,
+  'link-border-width-focus': `var(--${prefix}-link-border-width)`,
+  'link-border-style-focus': `var(--${prefix}-link-border-style)`,
+  'link-border-color-focus': `var(--${prefix}-link-border-color)`,
+  'link-border-radius-focus': `var(--${prefix}-link-border-radius)`,
+  'link-outline-focus': `var(--${prefix}-link-outline)`,
+  'link-shadow-focus': `var(--${prefix}-link-shadow)`,
+  'link-text-color-focus': `var(--${prefix}-link-text-color)`,
+  // link-hover
+  'link-background-hover': `var(--${prefix}-link-background)`,
+  'link-border-width-hover': `var(--${prefix}-link-border-width)`,
+  'link-border-style-hover': `var(--${prefix}-link-border-style)`,
+  'link-border-color-hover': `var(--${prefix}-link-border-color)`,
+  'link-border-radius-hover': `var(--${prefix}-link-border-radius)`,
+  'link-outline-hover': `var(--${prefix}-link-outline)`,
+  'link-shadow-hover': `var(--${prefix}-link-shadow)`,
+  'link-text-color-hover': `var(--${prefix}-link-text-color)`,
+  // link-visited
+  'link-background-visited': `var(--${prefix}-link-background)`,
+  'link-border-width-visited': `var(--${prefix}-link-border-width)`,
+  'link-border-style-visited': `var(--${prefix}-link-border-style)`,
+  'link-border-color-visited': `var(--${prefix}-link-border-color)`,
+  'link-border-radius-visited': `var(--${prefix}-link-border-radius)`,
+  'link-outline-visited': `var(--${prefix}-link-outline)`,
+  'link-shadow-visited': `var(--${prefix}-link-shadow)`,
+  'link-text-color-visited': `var(--${prefix}-link-text-color)`
+};

package/src/style/default/button/success.ts

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

package/src/style/default/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/default/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/default/component-theme.ts

@@ -0,0 +1,178 @@
+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 Datetime, cssVars as DatetimeCSSVars } from './datetime/datetime';
+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 = () => ({
+  [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 }
+  },
+  [Datetime]: {
+    large: { ...DatetimeCSSVars },
+    medium: { ...DatetimeCSSVars },
+    small: { ...DatetimeCSSVars }
+  },
+  [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/default/datetime/datetime.ts

@@ -0,0 +1,5 @@
+export const component = 'datetime';
+
+export const cssVars = {
+  padding: `4px 12px`
+};

package/src/style/default/drawer/drawer.ts

@@ -0,0 +1,10 @@
+export const component = 'drawer';
+
+export const cssVars = {
+  'width-small': '20%',
+  'width-medium': '40%',
+  'width-large': '80%',
+  'height-small': '40vh',
+  'height-medium': '60vh',
+  'height-large': '90vh'
+};