@sms-frontend/components/lib/Tabs/style/token.less

SMS Design React UI Library.

@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-default-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-default-header-height_rounded: @size-8;

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

@tabs-color-title-text: var(--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(--color-text-4);
@tabs-color-title-text_disabled_active: var(--color-primary-light-3);

@tabs-line-size-header-border: @border-1;
@tabs-line-color-header-border: var(--color-neutral-3);
@tabs-line-size-ink-stroke: 2px;
@tabs-line-color-ink-bg: @color-primary-6;
@tabs-line-color-ink-bg_disabled: var(--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(--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(--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(--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(--color-fill-1);
@tabs-card-gutter-color-title-bg_hover: var(--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(--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(--color-primary-light-3);
@tabs-text-color-title-bg_hover: var(--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(--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(--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(--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(--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(--color-fill-4);
@tabs-margin-add-icon-left: @spacing-4;
@tabs-color-icon: var(--color-text-2);
@tabs-color-icon_disabled: var(--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;