winbox-ui-next/es/_components/picker/style/token.less

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

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

@picker-size-small: @size-small;
@picker-size-medium: @size-medium;
@picker-size-default: @size-default;

@picker-size-small-font-size-text: @font-size-body-3;
@picker-size-medium-font-size-text: @font-size-body-3;
@picker-size-default-font-size-text: @font-size-body-3;

@picker-input-border-radius: @radius-small;

@picker-color-shadow_focus: var(
  ~'@{winbox-cssvars-prefix}-color-primary-light-2'
);
@picker-size-shadow_focus: @shadow-distance-none;
@picker-color-shadow_error_focus: var(
  ~'@{winbox-cssvars-prefix}-color-danger-light-2'
);
@picker-size-shadow_error_focus: @shadow-distance-none;

@picker-color-bg: var(~'@{winbox-cssvars-prefix}-color-bg-1');
@picker-color-bg_disabled: var(~'@{winbox-cssvars-prefix}-color-bg-1');
@picker-color-bg_hover: var(~'@{winbox-cssvars-prefix}-color-bg-1');
@picker-color-bg_focus: var(~'@{winbox-cssvars-prefix}-color-bg-1');
@picker-color-bg_error: var(~'@{winbox-cssvars-prefix}-color-danger-light-1');
@picker-color-bg_error_hover: var(
  ~'@{winbox-cssvars-prefix}-color-danger-light-2'
);
@picker-color-bg_error_focus: var(~'@{winbox-cssvars-prefix}-color-bg-2');

@picker-color-border: var(~'@{winbox-cssvars-prefix}-color-neutral-3');
@picker-color-border_hover: var(~'@{winbox-cssvars-prefix}-color-neutral-5');
@picker-color-border_focus: @color-primary-6;
@picker-color-border_disabled: var(~'@{winbox-cssvars-prefix}-color-neutral-3');
@picker-color-border_error: var(~'@{winbox-cssvars-prefix}-color-neutral-3');
@picker-color-border_error_hover: var(
  ~'@{winbox-cssvars-prefix}-color-neutral-3'
);
@picker-color-border_error_focus: @color-danger-6;

@picker-color-placeholder: var(~'@{winbox-cssvars-prefix}-color-text-3');
@picker-color-placeholder_disabled: var(
  ~'@{winbox-cssvars-prefix}-color-text-4'
);
@picker-color-text: var(~'@{winbox-cssvars-prefix}-color-text-2');
@picker-color-text_disabled: var(~'@{winbox-cssvars-prefix}-color-text-4');
@picker-color-icon: var(~'@{winbox-cssvars-prefix}-color-text-2');
@picker-color-icon_disabled: var(~'@{winbox-cssvars-prefix}-color-text-4');
@picker-color-separator: var(~'@{winbox-cssvars-prefix}-color-text-3');
@picker-color-separator_disabled: var(~'@{winbox-cssvars-prefix}-color-text-4');
@input-color-text_disabled: var(~'@{winbox-cssvars-prefix}-color-text-4');

@picker-padding-horizontal: @spacing-2;
@picker-input-padding-horizontal: @input-padding-horizontal -
  @picker-padding-horizontal; // 8px