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

Less plugin for Baidu Light DLS.

@import "../global.less";

/* Metrics */
@dls-tab-height-s: @dls-height-unit * 10;
@dls-tab-height-m: @dls-height-unit * 11;
@dls-tab-height-l: @dls-height-unit * 12;

@dls-tab-max-width-normal-s: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-normal-s * 2
);
@dls-tab-max-width-normal-m: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-normal-m * 2
);
@dls-tab-max-width-normal-l: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-normal-l * 2
);

@dls-tab-max-width-simple-s: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-simple-s * 2
);
@dls-tab-max-width-simple-m: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-simple-m * 2
);
@dls-tab-max-width-simple-l: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-simple-l * 2
);

@dls-tab-max-width-strong-m: dls-sum(
  8em,
  @dls-tab-icon-size,
  @dls-tab-icon-size,
  @dls-tab-content-spacing,
  @dls-tab-content-spacing,
  @dls-tab-padding-strong-m * 2
);

@dls-tab-min-width-normal-s: 2em;
@dls-tab-min-width-normal-m: 2em;
@dls-tab-min-width-normal-l: 2em;
@dls-tab-min-width-simple-s: 2em;
@dls-tab-min-width-simple-m: 2em;
@dls-tab-min-width-simple-l: 2em;
@dls-tab-min-width-normal-m: 2em;

// padding-x per tab
@dls-tab-padding-normal-s: 0;
@dls-tab-padding-normal-m: 0;
@dls-tab-padding-normal-l: 0;

@dls-tab-padding-simple-s: 0;
@dls-tab-padding-simple-m: 0;
@dls-tab-padding-simple-l: 0;

@dls-tab-padding-strong-m: @dls-padding-unit * 6;

// spacing between tabs
@dls-tab-spacing-normal-s: @dls-padding-unit * 6;
@dls-tab-spacing-normal-m: @dls-padding-unit * 8;
@dls-tab-spacing-normal-l: @dls-padding-unit * 12;

@dls-tab-spacing-simple-s: @dls-padding-unit * 8;
@dls-tab-spacing-simple-m: @dls-padding-unit * 10;
@dls-tab-spacing-simple-l: @dls-padding-unit * 12;

@dls-tab-spacing-strong-m: 0;

// padding-x of the tab menu
@dls-tab-menu-padding-normal: var(--dls-tab-menu-spacing-around);

// spacing between tab label and icons
@dls-tab-content-spacing: @dls-padding-unit * 1;
@dls-tab-remove-spacing: @dls-padding-unit * 0.5;

// spacing for nav buttons
@dls-tab-nav-spacing-normal-s: @dls-padding-unit * 3;
@dls-tab-nav-spacing-normal-m: @dls-padding-unit * 4;
@dls-tab-nav-spacing-normal-l: @dls-padding-unit * 6;

@dls-tab-nav-spacing-simple-s: @dls-padding-unit * 4;
@dls-tab-nav-spacing-simple-m: @dls-padding-unit * 5;
@dls-tab-nav-spacing-simple-l: @dls-padding-unit * 6;

@dls-tab-nav-spacing-strong-m: @dls-padding-unit * 3;

// add button and extra content are treated as tab items
// thus they have the same spacing as normal tabs (except for strong)

/* Typography */
// Sizes
@dls-tab-font-size-s: @dls-font-size-0;
@dls-tab-font-size-m: @dls-font-size-1;
@dls-tab-font-size-l: @dls-font-size-2;

// Colors
@dls-tab-font-color: @dls-foreground-color-neutral;
@dls-tab-font-color-hover: @dls-foreground-color-neutral-hover;
@dls-tab-font-color-focus: @dls-tab-font-color-hover;
@dls-tab-font-color-active: @dls-foreground-color-neutral-active;
@dls-tab-font-color-disabled: @dls-foreground-color-neutral-disabled;

@dls-tab-font-color-current: @dls-foreground-color-primary;
@dls-tab-font-color-current-hover: @dls-foreground-color-primary-hover;
@dls-tab-font-color-current-focus: @dls-tab-font-color-current-hover;
@dls-tab-font-color-current-active: @dls-foreground-color-primary-active;

@dls-tab-background-color-focus: @dls-background-color-focus;

// Weights
@dls-tab-font-weight-current: @dls-font-weight-1;

/* Container */
@dls-tab-container-separator-color: @dls-line-color-2;
@dls-tab-container-border-width: 1px;

/* Panel */
@dls-tab-panel-padding-top: @dls-padding-unit * 4;

/* Misc */
// Overflow shadow
@dls-tab-overflow-shadow-right: @dls-shadow-2;
@dls-tab-overflow-shadow-left: @dls-shadow-2;

// Indicator
@dls-tab-indicator-color: @dls-foreground-color-primary;
@dls-tab-indicator-width: 2px;

// Icon size
@dls-tab-icon-size: @dls-icon-size-normal;
@dls-tab-icon-size-aux: calc(1em - 2px);

/* Variant-specific */
// Simple
@dls-tab-separator-height-simple: 1em;
@dls-tab-separator-color: @dls-line-color-2;

// Strong
@dls-tab-menu-height-strong-m: @dls-padding-unit * 12;

@dls-tab-nav-spacing-extra-strong-m: @dls-padding-unit * 6;

@dls-tab-menu-padding-strong-m: @dls-padding-unit * 4;

@dls-tab-border-radius-strong-m: @dls-border-radius-3;
@dls-tab-container-border-radius-strong-m: @dls-border-radius-2;

@dls-tab-container-border-color-strong: @dls-line-color-0;

@dls-tab-menu-background-color-strong: @dls-color-gray-2;

@dls-tab-background-color-strong: transparent;
@dls-tab-background-color-strong-hover: @dls-color-gray-1;
@dls-tab-background-color-strong-focus: @dls-background-color-focus;
@dls-tab-background-color-strong-active: @dls-color-gray-3;
@dls-tab-background-color-strong-disabled: @dls-tab-background-color-strong;

@dls-tab-background-color-strong-current: @dls-background-color-base-1;
@dls-tab-background-color-strong-current-hover: @dls-tab-background-color-strong-current;
@dls-tab-background-color-strong-current-focus: @dls-tab-background-color-strong-current-hover;
@dls-tab-background-color-strong-current-active: @dls-tab-background-color-strong-current-hover;

@dls-tab-font-color-strong: @dls-foreground-color-neutral;
@dls-tab-font-color-strong-hover: @dls-foreground-color-neutral-hover;
@dls-tab-font-color-strong-focus: @dls-tab-font-color-strong-hover;
@dls-tab-font-color-strong-active: @dls-foreground-color-neutral-active;
@dls-tab-font-color-strong-disabled: @dls-foreground-color-neutral-disabled;

@dls-tab-font-color-strong-current: @dls-foreground-color-primary;
@dls-tab-font-color-strong-current-hover: @dls-foreground-color-primary-hover;
@dls-tab-font-color-strong-current-focus: @dls-tab-font-color-strong-current-hover;
@dls-tab-font-color-strong-current-active: @dls-foreground-color-primary-active;