winbox-ui-next/lib/avatar/style/token.less

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

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

@avatar-size-default: @size-10;
@avatar-font-size-text: 20px;
@avatar-color-text: var(~'@{winbox-cssvars-prefix}-color-white');
@avatar-color-bg: var(~'@{winbox-cssvars-prefix}-color-fill-4');
@avatar-color-group-item-border: var(~'@{winbox-cssvars-prefix}-color-bg-2');
@avatar-group-item-border-width: 2px;
@avatar-group-item-margin-left: -10px;
@avatar-group-popover-item-spacing: @spacing-2;
@avatar-font-weight-text: @font-weight-400;

@avatar-circle-border-radius: @radius-circle;
@avatar-square-border-radius: @radius-small;

@avatar-size-trigger-button: @size-5;
@avatar-color-trigger-button-bg: var(
  ~'@{winbox-cssvars-prefix}-color-neutral-2'
);
@avatar-color-trigger-button-bg_hover: var(
  ~'@{winbox-cssvars-prefix}-color-neutral-3'
);
@avatar-color-trigger-mask-icon:var (~'@{winbox-cssvars-prefix}-color-white');
@avatar-opacity-trigger-mask-bg: @opacity-6;
@avatar-color-trigger-icon-button: var(
  ~'@{winbox-cssvars-prefix}-color-fill-4'
);
@avatar-spacing-trigger-button-right: @spacing-2;
@avatar-spacing-trigger-button-bottom: @spacing-2;
@avatar-size-trigger-icon: @size-3;
@avatar-border-trigger-button-radius: @radius-circle;

@avatar-font-size-max-count: 20px;
@avatar-color-max-count-text: var(~'@{winbox-cssvars-prefix}-color-white');