// Prefix
$--css-prefix             : vx-;

// color
$--color-black            : #333!default;   
$--color-assist           : rgba($--color-black,0.55)!default;
$--color-light            : rgba(0,0,0,0.35)!default;
$--color-border           : rgb(229, 229, 229)!default;
$--color-divider          : #ddd!default;
$--color-primary          : #3399ff!default;
$--color-error            : #f56c6c!default;
$--color-warning          : #ff9900!default;
$--color-danger           : $--color-error!default;
$--color-touch-active     : rgba(0,0,0,0.1)!default;
$--color-background       : #f7f7f7!default;
$colors : (
  color-black: $--color-black,
  color-assist: $--color-assist,
  color-light: $--color-light,
  color-divider: $--color-divider,
  color-border: $--color-border,
  color-primary: $--color-primary,
  color-error: $--color-error,
  color-warning: $--color-warning,
  color-danger: $--color-danger,
  color-background: $--color-background
);

$--font-size-default      : 0.28rem!default;
$--font-size-small        : 0.24rem!default;
$--font-size-large        : 0.32rem!default;
$--font-size-xl           : 0.38rem!default;
$font-sizes: (
  font-size-default: $--font-size-default,
  font-size-small: $--font-size-small,
  font-size-large: $--font-size-large,
  font-size-xl: $--font-size-xl
);

$--box-size-height-default: 0.92rem!default;
$--box-size-height-small  : 0.64rem!default;
$box-size-heights: (
  box-size-height-default: $--box-size-height-default,
  box-size-height-small: $--box-size-height-small
);

// Border color
$--border-radius     : 0.14rem!default;
$--border-radius-dpr2     : $--border-radius * 2;
$--border-radius-dpr3     : $--border-radius * 3;
$--border-radius-dpr4     : $--border-radius * 4;
$--border-radius-dpr5     : $--border-radius * 5;
$--border-radius-dpr6     : $--border-radius * 6;
$--border-radius-dprs: (
  2: $--border-radius-dpr2,
  3: $--border-radius-dpr3,
  4: $--border-radius-dpr4,
  5: $--border-radius-dpr5,
  6: $--border-radius-dpr6
);

// Animation
$--animation-time         : .3s!default;
$--transition-time        : .2s!default;
$--ease-in-out            : ease-in-out!default;

:export {
  color: {
    black: $--color-black;
    assist: $--color-assist;
    light: $--color-light;
    primary: $--color-primary;
    warning: $--color-warning;
    danger: $--color-danger;
    error: $--color-error;
    background: $--color-background;
    border: $--color-border;
    divider: $--color-divider;
    touch-active: $--color-touch-active;
  };
  font-size: {
    default: $--font-size-default;
    small: $--font-size-small;
    large: $--font-size-large;
    xl: $--font-size-xl;
  };
  box-size-height: {
    default: $--box-size-height-default;
    small: $--box-size-height-small;
  };
  border-radius: $--border-radius;
}