less-plugin-dls/tokens/components/number-input.less

Less plugin for Baidu Light DLS.

@import "../global.less";
@import "./input.less";

/* Metrics */

// Heights
@dls-number-input-height-xs: @dls-input-height-xs;
@dls-number-input-height-s: @dls-input-height-s;
@dls-number-input-height-m: @dls-input-height-m;

// Widths

// Normal
@dls-number-input-spin-icon-size-normal: 0.85em;
@dls-number-input-spin-button-min-width-normal: 18px;
@dls-number-input-spin-button-width-normal-xs: max(
  @dls-number-input-spin-button-min-width-normal,
  (@dls-number-input-height-xs / 2)
);
@dls-number-input-spin-button-width-normal-s: max(
  @dls-number-input-spin-button-min-width-normal,
  (@dls-number-input-height-s / 2)
);
@dls-number-input-spin-button-width-normal-m: max(
  @dls-number-input-spin-button-min-width-normal,
  (@dls-number-input-height-m / 2)
);

@dls-number-input-digits-normal: 6;
// digits + spin button + horizontal paddings + left border
@dls-number-input-width-normal-xs: dls-sum(
  unit(@dls-number-input-digits-normal, ch),
  @dls-number-input-spin-button-width-normal-xs,
  @dls-input-padding * 2,
  1px
);
@dls-number-input-width-normal-s: dls-sum(
  unit(@dls-number-input-digits-normal, ch),
  @dls-number-input-spin-button-width-normal-s,
  @dls-input-padding * 2,
  1px
);
@dls-number-input-width-normal-m: dls-sum(
  unit(@dls-number-input-digits-normal, ch),
  @dls-number-input-spin-button-width-normal-m,
  @dls-input-padding * 2,
  1px
);

// Strong
@dls-number-input-spin-icon-size-strong: 1em;
// Strong spin buttons' width and height share the same value

@dls-number-input-digits-strong: 6;

@dls-number-input-width-strong-xs: dls-sum(
  unit(@dls-number-input-digits-strong, ch),
  @dls-number-input-height-xs * 2,
  @dls-input-padding * 2
);
@dls-number-input-width-strong-s: dls-sum(
  unit(@dls-number-input-digits-strong, ch),
  @dls-number-input-height-s * 2,
  @dls-input-padding * 2
);
@dls-number-input-width-strong-m: dls-sum(
  unit(@dls-number-input-digits-strong, ch),
  @dls-number-input-height-m * 2,
  @dls-input-padding * 2
);

// Shared
@dls-number-input-spin-icon-color: @dls-foreground-color-neutral-weak;
@dls-number-input-spin-icon-color-disabled: @dls-foreground-color-neutral-weak-disabled;