@arco-design/web-react/lib/Tag/style/token.less

Arco Design React UI Library.

@import '../../style/theme/default.less';

@tag-border-width: 1px;
@tag-border-type: solid;
@tag-padding-horizontal: 8px;
@tag-padding-vertical: 0;
@tag-icon-margin-right: @spacing-2;
@tag-text-font-weight: @font-weight-500;
@tag-border-radius: @radius-small;

@tag-size-small: @size-5;
@tag-size-default: @size-6;
@tag-size-medium: @size-7;
@tag-size-large: @size-8;

@tag-size-small-font-size: 12px;
@tag-size-default-font-size: 12px;
@tag-size-medium-font-size: 14px;
@tag-size-large-font-size: 14px;

@tag-color-bg-not-checked_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@tag-custom-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);

@tag-default-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tag-default-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tag-default-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@tag-default-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@tag-default-color-border: @color-transparent;
@tag-default-bordered-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@tag-default-color-border_hover: @color-transparent;

@tag-red-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-red-1'));;
@tag-red-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-red-2'));;
@tag-red-color-border: @color-transparent;
@tag-red-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-red-6'));;
@tag-red-color-border_hover: @color-transparent;
@tag-red-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-red-6'));;
@tag-red-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-red-2'));;
@tag-red-color-text:  rgb(var(~'@{arco-cssvars-prefix}-red-6'));;

@tag-orangered-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-orangered-1'));;
@tag-orangered-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));;
@tag-orangered-color-border: @color-transparent;
@tag-orangered-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));;
@tag-orangered-color-border_hover: @color-transparent;
@tag-orangered-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));;
@tag-orangered-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));;
@tag-orangered-color-text:  rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));;

@tag-orange-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-orange-1'));;
@tag-orange-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orange-2'));;
@tag-orange-color-border: @color-transparent;
@tag-orange-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
@tag-orange-color-border_hover: @color-transparent;
@tag-orange-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-orange-6'));;
@tag-orange-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orange-2'));;
@tag-orange-color-text:  rgb(var(~'@{arco-cssvars-prefix}-orange-6'));;

@tag-gold-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-gold-1'));;
@tag-gold-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gold-3'));;
@tag-gold-color-border: @color-transparent;
@tag-gold-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;
@tag-gold-color-border_hover: @color-transparent;
@tag-gold-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;
@tag-gold-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gold-2'));;
@tag-gold-color-text:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;

@tag-lime-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-lime-1'));;
@tag-lime-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-lime-2'));;
@tag-lime-color-border: @color-transparent;
@tag-lime-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-lime-6'));;
@tag-lime-color-border_hover: @color-transparent;
@tag-lime-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-lime-6'));;
@tag-lime-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-lime-2'));;
@tag-lime-color-text:  rgb(var(~'@{arco-cssvars-prefix}-lime-6'));;

@tag-green-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-green-1'));;
@tag-green-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-green-2'));;
@tag-green-color-border: @color-transparent;
@tag-green-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-green-6'));;
@tag-green-color-border_hover: @color-transparent;
@tag-green-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-green-6'));;
@tag-green-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-green-2'));;
@tag-green-color-text:  rgb(var(~'@{arco-cssvars-prefix}-green-6'));;

@tag-cyan-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-cyan-1'));;
@tag-cyan-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));;
@tag-cyan-color-border: @color-transparent;
@tag-cyan-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));;
@tag-cyan-color-border_hover: @color-transparent;
@tag-cyan-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));;
@tag-cyan-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));;
@tag-cyan-color-text:  rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));;

@tag-blue-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-blue-1'));;
@tag-blue-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-blue-2'));;
@tag-blue-color-border: @color-transparent;
@tag-blue-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-blue-6'));;
@tag-blue-color-border_hover: @color-transparent;
@tag-blue-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-blue-6'));;
@tag-blue-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-blue-2'));;
@tag-blue-color-text:  rgb(var(~'@{arco-cssvars-prefix}-blue-6'));;

@tag-arcoblue-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));;
@tag-arcoblue-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));;
@tag-arcoblue-color-border: @color-transparent;
@tag-arcoblue-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));;
@tag-arcoblue-color-border_hover: @color-transparent;
@tag-arcoblue-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));;
@tag-arcoblue-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));;
@tag-arcoblue-color-text:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));;

@tag-purple-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-purple-1'));;
@tag-purple-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-purple-2'));;
@tag-purple-color-border: @color-transparent;
@tag-purple-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-purple-6'));;
@tag-purple-color-border_hover: @color-transparent;
@tag-purple-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-purple-6'));;
@tag-purple-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-purple-2'));;
@tag-purple-color-text:  rgb(var(~'@{arco-cssvars-prefix}-purple-6'));;

@tag-pinkpurple-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-1'));;
@tag-pinkpurple-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-2'));;
@tag-pinkpurple-color-border: @color-transparent;
@tag-pinkpurple-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));;
@tag-pinkpurple-color-border_hover: @color-transparent;
@tag-pinkpurple-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));;
@tag-pinkpurple-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-2'));;
@tag-pinkpurple-color-text:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));;

@tag-magenta-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-magenta-1'));;
@tag-magenta-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));;
@tag-magenta-color-border: @color-transparent;
@tag-magenta-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));;
@tag-magenta-color-border_hover: @color-transparent;
@tag-magenta-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));;
@tag-magenta-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));;
@tag-magenta-color-text:  rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));;

@tag-gray-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-gray-2'));;
@tag-gray-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gray-3'));;
@tag-gray-color-border: @color-transparent;
@tag-gray-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-gray-6'));;
@tag-gray-color-border_hover: @color-transparent;
@tag-gray-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-gray-6'));;
@tag-gray-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gray-3'));;
@tag-gray-color-text:  rgb(var(~'@{arco-cssvars-prefix}-gray-6'));;