components/Switch/style/token.less
@import '../../style/theme/default.less';

// Global
@switch-size-default: @size-6;
@switch-size-small: @size-4;
@switch-font-size-text: @font-size-caption;

// circle and round
@switch-size-dot-default: @size-4;
@switch-size-dot-small: 12px;

// line
@switch-line-size-dot-default: @size-5;
@switch-line-size-dot-small: @size-4;

// Circle
@switch-circle-default-width: @size-10;
@switch-circle-small-width: @size-7;

// Round
@switch-round-default-width: @size-10;
@switch-round-small-width: @size-7;

// Line
@switch-line-default-width: @size-9;
@switch-line-small-width: @size-7;
@switch-line-height-bg-line: 6px;
@switch-line-color-dot-shadow: var(~'@{arco-cssvars-prefix}-color-neutral-6');

@switch-color-bg_on: @color-primary-6;
@switch-color-bg_off: var(~'@{arco-cssvars-prefix}-color-fill-4');
@switch-color-bg_on_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-bg_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@switch-color-bg_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-bg_off_loading: var(~'@{arco-cssvars-prefix}-color-fill-2');
@switch-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-bg-white');
@switch-color-text_on: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_off: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_on_disabled: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_off_disabled: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@switch-color-text_off_loading: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-dot-icon_on: @color-primary-6;
@switch-color-dot-icon_off: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@switch-color-dot-icon_on_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-dot-icon_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@switch-color-dot-icon_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-dot-icon_off_loading: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@switch-color-box-shadow_checked: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-box-shadow_default: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
