less-plugin-dls/tokens/components/tag.less

Less plugin for Baidu Light DLS.

@import "../global.less";

/* Metrics */
@dls-tag-height-s: @dls-height-unit * 6;
@dls-tag-height-m: @dls-height-unit * 7;

@dls-tag-border-radius-s: @dls-border-radius-1;
@dls-tag-border-radius-m: @dls-border-radius-1;

@dls-tag-padding: @dls-padding-unit * 2;
@dls-tag-content-spacing: @dls-padding-unit * 2;
@dls-tag-list-spacing: @dls-padding-unit * 1;

@dls-tag-font-size-s: @dls-font-size-0;
@dls-tag-font-size-m: @dls-font-size-1;

// Close icon
// interactive styles are the same as icon buttons
@dls-tag-icon-size-aux: calc(1em - 2px);

/* Colors */
@dls-tag-color: @dls-foreground-color-neutral-light; // @deprecated
@dls-tag-color-selected: @dls-foreground-color-primary; // @deprecated

@dls-tag-color-default: @dls-color-gray-7;
@dls-tag-color-default-selected: @dls-color-brand-7;

@dls-tag-color-info: @dls-foreground-color-info-primary;
@dls-tag-color-success: @dls-foreground-color-success-primary;
@dls-tag-color-warning: @dls-foreground-color-warning-primary;
@dls-tag-color-error: @dls-foreground-color-error-primary;

@dls-tag-font-color-default: @dls-foreground-color-neutral;
@dls-tag-font-color-selected: @dls-foreground-color-primary-reverse;
@dls-tag-font-color-reverse: @dls-foreground-color-reverse;

/* Predefined named colors */
@dls-tag-color-turquoise: #4db2b2;
@dls-tag-color-violet: #5e1ae5;
@dls-tag-color-green: #4bac3a;

/* Opacity */
@dls-tag-font-opacity-disabled: 0.3;
@dls-tag-font-opacity-selected-disabled: 1;
@dls-tag-font-opacity-reverse-disabled: 1;

@dls-tag-background-opacity: 0.08;
@dls-tag-background-opacity-hover: 0.2;
@dls-tag-background-opacity-active: 0.3;
@dls-tag-background-opacity-disabled: 0.1;

@dls-tag-background-opacity-selected: 1;
@dls-tag-background-opacity-selected-hover: 0.6;
@dls-tag-background-opacity-selected-active: 0.8;
@dls-tag-background-opacity-selected-disabled: 0.1;

@dls-tag-background-opacity-reverse: 1;
@dls-tag-background-opacity-reverse-hover: 0.6;
@dls-tag-background-opacity-reverse-active: 0.8;
@dls-tag-background-opacity-reverse-disabled: 0.1;

@dls-tag-border-opacity: 0.1;
@dls-tag-border-opacity-disabled: 0.1;