@arco-design/web-vue/lib/tag/style/token.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/theme/index.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'));

// vue overwrite token
@tag-size-medium: @tag-size-default;
@tag-size-medium-font-size: @tag-size-default-font-size;