fix(smart table): use primary colors (#1746)

src/framework/theme/styles/global/tables/_smart-table.theme.scss

@@ -96,12 +96,24 @@
  justify-content: center;
  font-size: 1.75rem !important;
  padding: nb-theme(smart-table-filter-padding);
- background: nb-theme(color-success-500);
- color: #ffffff;
+ border-color: nb-theme(smart-table-add-button-border-color);
+ background-color: nb-theme(smart-table-add-button-background-color);
+ color: nb-theme(smart-table-add-button-text-color);
  border-radius: 0.375rem;
 
+ &:focus {
+ border-color: nb-theme(smart-table-add-button-focus-border-color);
+ }
+
  &:hover {
  text-decoration: none;
+ background-color: nb-theme(smart-table-add-button-hover-background-color);
+ border-color: nb-theme(smart-table-add-button-hover-border-color);
+ }
+
+ &:active {
+ background-color: nb-theme(smart-table-add-button-active-background-color);
+ border-color: nb-theme(smart-table-add-button-active-border-color);
  }
  }
  }
@@ -138,13 +150,13 @@
  .ng2-smart-action-add-create:hover,
  .ng2-smart-action-edit-edit:hover,
  .ng2-smart-action-edit-save:hover {
- color: nb-theme(color-success-500);
+ color: nb-theme(smart-table-action-add-edit-hover-text-color);
  }
 
  .ng2-smart-action-add-cancel:hover,
  .ng2-smart-action-delete-delete:hover,
  .ng2-smart-action-edit-cancel:hover {
- color: nb-theme(color-danger-500);
+ color: nb-theme(smart-table-action-cancel-delete-hover-text-color);
  }
  }
 
@@ -171,36 +183,47 @@
 
  .page-item.disabled .page-link, .page-item.disabled .page-link:focus, .page-item.disabled .page-link:hover {
  background-color: nb-theme(smart-table-paging-hover);
- color: nb-theme(button-outline-success-text-color);
+ color: nb-theme(smart-table-paging-disabled-text-color);
  }
  }
 
  .pagination {
- font-family: nb-theme(button-text-font-family);
- font-size: nb-theme(button-medium-text-font-size);
- line-height: nb-theme(button-medium-text-line-height);
+ font-family: nb-theme(smart-table-paging-font-family);
+ font-size: nb-theme(smart-table-paging-font-size);
+ line-height: nb-theme(smart-table-paging-line-height);
  border: nb-theme(smart-table-paging-border-color) solid nb-theme(smart-table-paging-border-width);
  border-radius: nb-theme(smart-table-border-radius);
 
  li {
+ overflow: hidden;
+
  &:not(:last-child) {
  @include nb-ltr(border-right, 1px solid nb-theme(smart-table-separator));
  @include nb-rtl(border-left, 1px solid nb-theme(smart-table-separator));
  }
 
  a.page-link-prev, a.page-link-next {
- font-size: nb-theme(button-medium-text-font-size);
+ font-size: nb-theme(smart-table-paging-font-size);
+ line-height: nb-theme(smart-table-paging-line-height);
  }
 
  a, > span {
- background: transparent;
- color: nb-theme(button-outline-success-text-color);
+ font-size: nb-theme(smart-table-paging-font-size);
+ line-height: nb-theme(smart-table-paging-line-height);
+ background-color: transparent;
+ color: nb-theme(smart-table-paging-page-text-color);
  padding: 0.75rem 1.25rem;
  border: none;
 
+ &:focus {
+ border-color: nb-theme(smart-table-paging-page-focus-border-color);
+ color: nb-theme(smart-table-paging-page-focus-text-color);
+ }
+
  &:hover {
  background-color: nb-theme(smart-table-paging-hover);
- color: nb-theme(button-outline-success-text-color);
+ border-color: nb-theme(smart-table-paging-hover-border-color);
+ color: nb-theme(smart-table-paging-hover-text-color);
  text-decoration: none;
  }
  }

src/framework/theme/styles/themes/_mapping.scss

@@ -406,19 +406,40 @@ $eva-mapping: (
  smart-table-fg: text-basic-color,
  smart-table-bg: background-basic-color-1,
 
- smart-table-bg-even: #f5f7fc,
+ smart-table-bg-even: background-basic-color-2,
  smart-table-fg-secondary: text-basic-color,
- smart-table-bg-active: #e6f3ff,
+ smart-table-bg-active: background-basic-color-3,
  smart-table-padding: 0.875rem 1.25rem,
  smart-table-filter-padding: 0.375rem 0.5rem,
  smart-table-separator: divider-color,
  smart-table-border-radius: border-radius,
 
+ smart-table-action-add-edit-hover-text-color: color-primary-default,
+ smart-table-action-cancel-delete-hover-text-color: color-danger-default,
+
+ smart-table-add-button-border-color: button-filled-primary-border-color,
+ smart-table-add-button-background-color: button-filled-primary-background-color,
+ smart-table-add-button-text-color: button-filled-primary-text-color,
+ smart-table-add-button-focus-border-color: button-filled-primary-focus-border-color,
+ smart-table-add-button-hover-background-color: button-filled-primary-hover-background-color,
+ smart-table-add-button-hover-border-color: button-filled-primary-hover-border-color,
+ smart-table-add-button-active-background-color: button-filled-primary-active-background-color,
+ smart-table-add-button-active-border-color: button-filled-primary-active-border-color,
+
+ smart-table-paging-font-family: button-text-font-family,
+ smart-table-paging-font-size: button-medium-text-font-size,
+ smart-table-paging-line-height: button-medium-text-line-height,
  smart-table-paging-border-color: divider-color,
  smart-table-paging-border-width: divider-width,
- smart-table-paging-fg-active: #ffffff,
- smart-table-paging-bg-active: color-success-default,
- smart-table-paging-hover: rgba(0, 0, 0, 0.05),
+ smart-table-paging-fg-active: text-control-color,
+ smart-table-paging-bg-active: color-primary-default,
+ smart-table-paging-hover: transparent,
+ smart-table-paging-hover-border-color: button-outline-primary-hover-border-color,
+ smart-table-paging-hover-text-color: button-outline-primary-hover-text-color,
+ smart-table-paging-disabled-text-color: button-outline-primary-disabled-text-color,
+ smart-table-paging-page-text-color: button-outline-primary-text-color,
+ smart-table-paging-page-focus-border-color: button-outline-primary-focus-border-color,
+ smart-table-paging-page-focus-text-color: button-outline-primary-focus-text-color,
 
  toastr-background-color: background-basic-color-1,
  toastr-border-color: border-basic-color-3,