@arco-design/web-react/lib/Table/style/token.less

Arco Design React UI Library.

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

@table-size-default-padding-horizontal: @spacing-7;
@table-size-default-padding-vertical: 9px;
@table-size-middle-padding-horizontal: @spacing-7;
@table-size-middle-padding-vertical: 7px;
@table-size-small-padding-horizontal: @spacing-7;
@table-size-small-padding-vertical: 5px;
@table-size-mini-padding-horizontal: @spacing-7;
@table-size-mini-padding-vertical: 2px;

@table-size-default-font-size: @font-size-body-3;
@table-size-middle-font-size: @font-size-body-3;
@table-size-small-font-size: @font-size-body-3;
@table-size-mini-font-size: @font-size-body-1;

@table-size-default-font-header-size: @font-size-body-3;
@table-size-middle-font-header-size: @font-size-body-3;
@table-size-small-font-header-size: @font-size-body-3;
@table-size-mini-font-header-size: @font-size-body-1;

@table-border-width: @border-1;
@table-border-style: solid;

@table-size-expand-button: 14px;
@table-spacing-expand-button-margin-right: @spacing-2;
@table-font-size-expand-button: 12px;
@table-border-radius-expand-button: 2px;

@table-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-border-radius: @radius-medium;

@table-color-text-header-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
@table-color-bg-header-cell: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@table-color-bg-header-sorted-cell: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-color-bg-header-sorted-cell_hover: rgba(var(~'@{arco-cssvars-prefix}-gray-4'), 0.5);
@table-color-header-filters-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@table-color-header-filters-icon_active: @color-primary-6;
@table-color-bg-header-filters-icon_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@table-font-size-filters-icon: 16px;
@table-size-filters-width: 24px;
@table-font-weight-header-text: @font-weight-500;

@table-color-text-body-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
@table-color-bg-body-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');
@table-color-bg-body-sorted-cell: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-stripe-row: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-stripe-row_dark: var(~'@{arco-cssvars-prefix}-color-bg-3');
@table-color-bg-body-row_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-row_active: var(~'@{arco-cssvars-prefix}-color-fill-1');

@table-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@table-color-expand-icon-border: @color-transparent;
@table-color-expand-icon-border_hover: @color-transparent;
@table-color-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@table-color-bg-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-color-bg-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@table-color-bg-expand-content: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-expand-content_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-border-expand-icon-width: @border-1;
@table-spacing-header-sorter-icon-margin-left: @spacing-4;

@table-color-header-sorter-icon: var(~'@{arco-cssvars-prefix}-color-neutral-5');
@table-color-header-sorter-icon_next: var(~'@{arco-cssvars-prefix}-color-neutral-6');
@table-color-header-sorter-icon_active: @color-primary-6;
@table-spacing-header-sorter-icon-margin-left: @spacing-4;
@table-size-header-sorter-icon-height: 8px;
@table-font-size-header-sorter-icon: 12px;
@table-position-header-sorter-icon-up-top: -2px;
@table-position-header-sorter-icon-down-top: -3px;

// Popup
@table-color-bg-filters-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');
@table-color-border-filters-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-popup-min-width: 100px;
@table-popup-max-height: 200px;
@table-popup-border-radius: @radius-medium;

// box shadow
@table-shadow-left: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
@table-shadow-right: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
@table-size-shadow-wrapper-width: 10px;

// editable row
@table-color-editable-body-cell-border: var(~'@{arco-cssvars-prefix}-color-white');

// pagination
@table-spacing-pagination-margin: @spacing-6;

// selection
@table-size-selection-col-width: 40px;

@table-size-expand-icon-col-width: 40px;
@table-color-body-background: var(~'@{arco-cssvars-prefix}-color-bg-2');

@table-color-bg-tfoot: var(~'@{arco-cssvars-prefix}-color-neutral-2');