components/Tabs/style/token.less
@import '../../style/theme/default.less';

@tabs-size-mini-font-size: @font-size-body-1;
@tabs-size-small-font-size: @font-size-body-3;
@tabs-size-default-font-size: @font-size-body-3;
@tabs-size-large-font-size: @font-size-body-3;

@tabs-size-mini-font-size_card: @font-size-body-1;
@tabs-size-small-font-size_card: @font-size-body-3;
@tabs-size-default-font-size_card: @font-size-body-3;
@tabs-size-large-font-size_card: @font-size-body-3;

@tabs-size-default-font-size_text: @font-size-body-3;

@tabs-size-mini-font-size_rounded: @font-size-body-1;
@tabs-size-small-font-size_rounded: @font-size-body-3;
@tabs-size-default-font-size_rounded: @font-size-body-3;
@tabs-size-large-font-size_rounded: @font-size-body-3;

@tabs-size-mini-font-size_capsule: @font-size-body-1;
@tabs-size-small-font-size_capsule: @font-size-body-3;
@tabs-size-default-font-size_capsule: @font-size-body-3;
@tabs-size-large-font-size_capsule: @font-size-body-3;

@tabs-size-mini-header-height_line: @size-8;
@tabs-size-small-header-height_line: @size-9;
@tabs-size-default-header-height_line: @size-10;
@tabs-size-large-header-height_line: @size-11;

@tabs-size-mini-header-height: @size-6;
@tabs-size-small-header-height: @size-7;
@tabs-size-default-header-height: @size-8;
@tabs-size-large-header-height: @size-9;

@tabs-size-mini-header-height_capsule: @size-6;
@tabs-size-small-header-height_capsule: @size-7;
@tabs-size-default-header-height_capsule: @size-8;
@tabs-size-large-header-height_capsule: @size-9;

@tabs-size-default-header-height_text: @size-8;

@tabs-size-mini-header-height_rounded: @size-6;
@tabs-size-small-header-height_rounded: @size-7;
@tabs-size-default-header-height_rounded: @size-8;
@tabs-size-large-header-height_rounded: @size-9;

@tabs-padding-title-text-vertical: 1px;
@tabs-padding-title-text-horizontal: @spacing-4;

@tabs-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@tabs-color-title-text_active: @color-primary-6;
@tabs-color-title-text_hover: @tabs-color-title-text;
@tabs-color-title-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@tabs-color-title-text_disabled_active: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@tabs-line-size-header-border: @border-1;
@tabs-line-color-header-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@tabs-line-size-ink-stroke: 2px;
@tabs-line-color-ink-bg: @color-primary-6;
@tabs-line-color-ink-bg_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@tabs-line-font-title-text-weight_active: @font-weight-500;
@tabs-line-margin-title-horizontal: @spacing-10;
@tabs-line-margin-title-horizontal_first: @spacing-7;
@tabs-line-margin-title-vertical: @spacing-6;
@tabs-line-padding-title-horizontal_vertical: @spacing-8;
@tabs-line-color-title-bg: @color-transparent;
@tabs-line-color-title-bg_active: @color-transparent;
@tabs-line-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@tabs-line-font-title-text-weight_hover: @font-weight-400;
@tabs-line-border-radius: @radius-small;

@tabs-card-border-width: @border-1;
@tabs-card-color-title-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@tabs-card-padding-title-horizontal: @spacing-7;
@tabs-card-padding-title-right_editable: @spacing-6;
@tabs-card-border-radius: @radius-small;
@tabs-card-color-title-bg: @color-transparent;
@tabs-card-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tabs-card-color-title-bg_disabled: @tabs-card-color-title-bg;
@tabs-card-color-title-bg_active: @color-transparent;
@tabs-card-border-content-width: @border-1;

@tabs-card-gutter-spacing-horizontal: @spacing-2;
@tabs-card-gutter-color-title-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
@tabs-card-gutter-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tabs-card-gutter-color-title-bg_active: @color-transparent;
@tabs-card-gutter-color-title-bg_disabled: @tabs-card-gutter-color-title-bg;

@tabs-text-size-separator-height: @size-3;
@tabs-text-size-separator-width: 2px;
@tabs-text-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tabs-text-margin-title-horizontal: @spacing-4;
@tabs-text-color-title-bg: @color-transparent;
@tabs-text-color-title-bg_active: @color-transparent;
@tabs-text-color-title-bg_disabled: @color-transparent;
@tabs-text-color-title-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@tabs-text-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@tabs-rounded-padding-title-horizontal: @spacing-7;
@tabs-rounded-margin-title-horizontal: @spacing-6;
@tabs-rounded-color-title-bg: @color-transparent;
@tabs-rounded-color-title-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tabs-rounded-color-title-bg_disabled: @color-transparent;
@tabs-rounded-color-title-bg_hover: @tabs-rounded-color-title-bg_active;

@tabs-capsule-color-header-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tabs-capsule-margin-title-horizontal: 3px;
@tabs-capsule-padding-title-horizontal: @spacing-6;
@tabs-capsule-padding-header-vertical: 3px;
@tabs-capsule-padding-header-horizontal: 3px;
@tabs-capsule-border-header-radius: @radius-small;
@tabs-capsule-border-title-radius: @radius-small;

@tabs-capsule-color-title-bg: @color-transparent;
@tabs-capsule-color-title-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
@tabs-capsule-color-title-bg_hover: @tabs-capsule-color-title-bg_active;
@tabs-capsule-size-separator-width: 1px;
@tabs-capsule-size-separator-height: 14px;
@tabs-capsule-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');

@tabs-margin-close-icon-left: @spacing-4;
@tabs-size-icon: @size-3;
@tabs-size-icon-bg: @size-4;
@tabs-card-color-close-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
@tabs-margin-add-icon-left: @spacing-4;
@tabs-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@tabs-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@tabs-spacing-nav-icon-header: @spacing-3;
@tabs-padding-header-wrapper-horizontal: @spacing-5;
@tabs-padding-header-wrapper-vertical: @spacing-3;

@tabs-content-padding: @spacing-7;

// focus shadow
@tabs-box-shadow-radius: 2px;
@tabs-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
