@arco-design/web-vue/es/table/style/token.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/theme/index.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-row_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-row_active: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-row_active_dark: var(
  ~'@{arco-cssvars-prefix}-color-neutral-2'
);

@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-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-size-header-sorter-icon-width: 14px;
@table-font-size-header-sorter-icon: 12px;
@table-position-header-sorter-icon-up-top: -2px;
@table-position-header-sorter-icon-down-top: -3px;
@table-position-header-sorter-icon-left: 1px;

// 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-size-drag-handle-col-width: 40px;
@table-size-body-min-width: 40px;
@table-color-body-background: var(~'@{arco-cssvars-prefix}-color-bg-2');

// vue overwrite token
@table-size-large-padding-horizontal: @table-size-default-padding-horizontal;
@table-size-large-padding-vertical: @table-size-default-padding-vertical;
@table-size-large-font-size: @table-size-default-font-size;
@table-size-large-font-header-size: @table-size-default-font-header-size;

@table-size-medium-padding-horizontal: @table-size-middle-padding-horizontal;
@table-size-medium-padding-vertical: @table-size-middle-padding-vertical;
@table-size-medium-font-size: @table-size-middle-font-size;
@table-size-medium-font-header-size: @table-size-middle-font-header-size;

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

// filter icon align left
@table-filters-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// new
@table-color-border_resizing: @color-primary-6;