@import '../variable/index.scss';

:root {
    // 颜色
    --color-primary: #{$color-primary};
    --color-second-primary: #{$color-second-primary};
    --color-blue: #{$color-blue};
    --color-orange: #{$color-orange};
    --color-sky-blue: #{$color-sky-blue};
    --color-green: #{$color-green};
    --color-yellow: #{$color-yellow};
    --color-red: #{$color-red};

    --color-black: #{$color-black};
    --color-black-1: #{$color-black-1};
    --color-black-2: #{$color-black-2};
    --color-black-3: #{$color-black-3};
    --color-black-4: #{$color-black-4};
    --color-black-5: #{$color-black-5};
    --color-white-1: #{$color-white-1};
    --color-white-2: #{$color-white-2};
    --color-white-3: #{$color-white-3};
    --color-white-4: #{$color-white-4};

    // 背景色
    --bg: #{$bg};
    --bg-white: #{$bg-white};
    --background-color: #{$background-color};
    --background-color-light: #{$background-color-light};

    // 主题色
    --primary-color: #{$primary-color};
    --second-primary-color: #{$second-primary-color};
    --info-color: #{$info-color};
    --success-color: #{$success-color};
    --warning-color: #{$warning-color};
    --danger-color: #{$danger-color};

    // 渐变色
    --gradient-primary: #{$gradient-primary};
    --gradient-second-primary: #{$gradient-second-primary};
    // --gradient-primary-disable: #{$gradient-blue-disable};
    // --gradient-second-primary-disable: #{$gradient-orange-disable};

    // 动画
    --animation-duration-base: #{$animation-duration-base};
    --animation-duration-fast: #{$animation-duration-fast};
    --animation-timing-function-enter: #{$animation-timing-function-enter};
    --animation-timing-function-leave: #{$animation-timing-function-leave};
    --cubic-bezier: #{$cubic-bezier};

    // 字体
    --font-size-xxs: #{$font-size-xxs};
    --font-size-xs: #{$font-size-xs};
    --font-size-sm: #{$font-size-sm};
    --font-size-md: #{$font-size-md};
    --font-size-lg: #{$font-size-lg};
    --font-size-xl: #{$font-size-xl};
    --font-size-xxl: #{$font-size-xxl};
    --font-size-xxxl: #{$font-size-xxxl};
    --font-weight-bold: #{$font-weight-bold};
    --base-font-family: #{$base-font-family};
    --price-integer-font-family: #{$price-integer-font-family};

    // 元件
    --text-color: #{$text-color};
    --active-color: #{$active-color};
    --active-opacity: #{$active-opacity};
    --disabled-opacity: #{$disabled-opacity};
    --text-link-color: #{$text-link-color};

    // Padding
    --padding-base: #{$padding-base};
    --padding-xs: #{$padding-xs};
    --padding-sm: #{$padding-sm};
    --padding-md: #{$padding-md};
    --padding-lg: #{$padding-lg};
    --padding-xl: #{$padding-xl};

    // 间距
    --vertical-gap: #{$vertical-gap};
    --horizontal-gap: #{$horizontal-gap};

    // 堆叠顺序
    --zindex-stick: #{$zindex-stick};
    --zindex-overlay: #{$zindex-overlay};
    --zindex-popup: #{$zindex-popup};

    // 透明度
    --opacity-disabled: #{$opacity-disabled};
    --opacity-overlay: #{$opacity-overlay};
    --opacity-toast: #{$opacity-toast};

    // 行高
    --line-height-xs: #{$line-height-xs};
    --line-height-sm: #{$line-height-sm};
    --line-height-md: #{$line-height-md};
    --line-height-lg: #{$line-height-lg};

    // Border
    --border-color: #{$border-color};
    --border-width-base: #{$border-width-base};
    --border-radius-sm: #{$border-radius-sm};
    --border-radius-md: #{$border-radius-md};
    --border-radius-lg: #{$border-radius-lg};
    --border-radius-max: #{$border-radius-max};
}