wip darkmode

2026-02-17 21:30:31 +00:00 · 2025-08-04 12:25:27 +02:00
parent 456a9e1ad9
commit d9a716a46f
170 changed files with 2006 additions and 1018 deletions
--- a/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.tsx
@@ -47,16 +47,21 @@ export default function APAgingSummaryTable({
 }

 const APAgingSummaryDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-total-border-top: #bbb;
+  --color-table-total-border-top: var(--color-dark-gray5);
+
  .table {
    .tbody .tr {
      .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
      }
      &:not(.no-results) {
        .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
          padding-top: 0.4rem;
          padding-bottom: 0.4rem;
        }
@@ -67,8 +72,9 @@ const APAgingSummaryDataTable = styled(ReportDataTable)`
          font-weight: 500;

          .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            border-top: 1px solid var(--color-table-total-border-top);
+            border-bottom-width: 3px;
+            border-bottom-style: double;
          }
        }
      }
--- a/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx
@@ -47,17 +47,21 @@ export default function ReceivableAgingSummaryTable({
 }

 const ARAgingSummaryDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-total-border-top: #bbb;
+  --color-table-total-border-top: var(--color-dark-gray5);
+
  .table {
    .tbody .tr {
      .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
      }
-
      &:not(.no-results) {
        .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
          padding-top: 0.4rem;
          padding-bottom: 0.4rem;
        }
@@ -68,8 +72,9 @@ const ARAgingSummaryDataTable = styled(ReportDataTable)`
          font-weight: 500;

          .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            border-top: 1px solid var(--color-table-total-border-top);
+            border-bottom-width: 3px;
+            border-bottom-style: double;
          }
        }
      }
--- a/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx
@@ -55,13 +55,16 @@ export default function BalanceSheetTable({
 }

 const BalanceSheetDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+
  .table {
    .tbody .tr {
      .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
-        color: #252A31;
+        color: var(--color-table-text-color);
      }
      &.is-expanded {
        .td:not(.name) .cell-inner {
@@ -70,19 +73,22 @@ const BalanceSheetDataTable = styled(ReportDataTable)`
      }
      &.row_type--TOTAL {
        .td {
+          color: var(--color-table-total-text-color);
          font-weight: 500;
-          border-top: 1px solid #bbb;
-          color: #000;
+          border-top-width: 1px;
+          border-top-style: solid;
        }
      }
-
      &:last-of-type .td {
-        border-bottom: 1px solid #bbb;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
      }
      &.row_type--TOTAL.row-id--ASSETS,
      &.row_type--TOTAL.row-id--LIABILITY_EQUITY {
        .td {
-          border-bottom: 3px double #000;
+          color: var(--color-table-total-text-color);
+          border-bottom-width: 3px;
+          border-bottom-style: double;
        }
      }
    }
--- a/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx
@@ -57,25 +57,28 @@ const CashflowStatementDataTable = styled(DataTable)`
    .tbody {
      .tr:not(.no-results) {
        .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
          padding-top: 0.32rem;
          padding-bottom: 0.32rem;
-          color: #252a31;
        }
        &.row_type--ACCOUNTS {
-          border-top: 1px solid #bbb;
+          .td {
+            border-top-width: 1px;
+            border-top-style: solid;
+          }
        }
        &.row-id--CASH_END_PERIOD {
-          border-bottom: 3px double #333;
+          .td {
+            border-bottom-width: 3px;
+            border-bottom-style: double;
+          }
        }
        &.row_type--TOTAL {
          font-weight: 500;

-          .td {
-            color: #000;
-          }
          &:not(:first-child) .td {
-            border-top: 1px solid #bbb;
+            border-top-width: 1px;
+            border-top-style: solid;
          }
        }
      }
--- a/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.tsx
@@ -43,21 +43,34 @@ export default function CustomersBalanceSummaryTable({
 }

 const CustomerBalanceDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #000;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
  .table {
    .tbody {
      .tr:not(.no-results) {
        .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
          padding-top: 0.4rem;
          padding-bottom: 0.4rem;
        }
-
        &.row_type--TOTAL {
-          font-weight: 500;
-
          .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            font-weight: 500;
+            border-top-width: 1px;
+            font-weight: 500;
+            border-top-width: 1px;
+            border-top-style: solid;
+            border-top-color: var(--x-table-total-border-top-color);
+            border-bottom-style: double;
+            border-bottom-width: 3px;
+            border-bottom-color: var(--x-table-total-border-bottom-color);
          }
        }
      }
--- a/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx
@@ -57,6 +57,11 @@ export default function CustomersTransactionsTable({
 }

 const CustomersTransactionsDataTable = styled(DataTable)`
+  --color-table-border-left-color: #ececec;
+  --color-table-customer-border-color: #ddd;
+  --color-table-border-left-color: var(--color-dark-gray4);
+  --color-table-customer-border-color: var(--color-dark-gray4);
+
  .table {
    .tbody {
      .tr .td {
@@ -64,10 +69,10 @@ const CustomersTransactionsDataTable = styled(DataTable)`
        padding-bottom: 0.36rem;
      }
      .tr:not(.no-results) .td:not(:first-of-type) {
-        border-left: 1px solid #ececec;
+        border-left: 1px solid var(--color-table-border-left-color);
      }
      .tr:last-child .td {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom-width: 1px;
      }

      .tr.row_type {
@@ -83,7 +88,7 @@ const CustomersTransactionsDataTable = styled(DataTable)`
            }
          }
          &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
          }
        }
        &--OPENING_BALANCE,
@@ -97,12 +102,12 @@ const CustomersTransactionsDataTable = styled(DataTable)`
            }
          }
          &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
          }
        }
        &--CUSTOMER:last-child {
          .td {
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid var(--color-table-customer-border-color);
          }
        }
      }
--- a/packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialReportPage.tsx
@@ -21,9 +21,9 @@ export const FinancialComputeAlert = styled.div`
  position: relative;
  padding: 8px 20px;
  border-radius: 2px;
-  background-color: #fdecda;
  color: #342515;
  font-size: 13px;
+  background-color: var(--color-financial-report-background);

  button {
    font-size: 12px;
--- a/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
@@ -1,15 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField } from 'formik';
 import {
  PopoverInteractionKind,
  Tooltip,
  MenuItem,
  Position,
-  FormGroup,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
+import {
+  FFormGroup,
+  FSelect,
+  MODIFIER,
+  FormattedMessage as T,
+} from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { filterAccountsOptions } from './constants';

@@ -19,13 +22,11 @@ const SUBMENU_POPOVER_MODIFIERS = {
  preventOverflow: { boundariesElement: 'viewport', padding: 40 },
 };

-
 export default function FinancialStatementsFilter({
  items = filterAccountsOptions,
  label = <T id={'filter_accounts'} />,
  ...restProps
 }) {
-
  const filterRenderer = (item, { handleClick, modifiers, query }) => {
    return (
      <Tooltip
@@ -43,29 +44,19 @@ export default function FinancialStatementsFilter({
  };

  return (
-    <FastField name={'filterByOption'}>
-      {({ form: { setFieldValue }, field: { value } }) => (
-        <FormGroup
-          label={label}
-          className="form-group--select-list bp4-fill"
-          inline={false}
-        >
-          <ListSelect
-            items={items}
-            itemRenderer={filterRenderer}
-            popoverProps={{ minimal: true }}
-            filterable={false}
-            selectedItem={value}
-            selectedItemProp={'key'}
-            textProp={'name'}
-            onItemSelect={(item) => {
-              setFieldValue('filterByOption', item.key);
-            }}
-            className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
-            {...restProps}
-          />
-        </FormGroup>
-      )}
-    </FastField>
+    <FFormGroup name={'filterByOption'} label={label} inline={false}>
+      <FSelect
+        name={'filterByOption'}
+        items={items}
+        itemRenderer={filterRenderer}
+        popoverProps={{ minimal: true }}
+        filterable={false}
+        textAccessor={'name'}
+        labelAccessor={'name'}
+        valueAccessor={'key'}
+        className={classNames(CLASSES.SELECT_LIST_FILL_POPOVER)}
+        {...restProps}
+      />
+    </FFormGroup>
  );
 }
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.tsx
@@ -69,6 +69,14 @@ export default function GeneralLedgerTable({ companyName }) {
 }

 const GeneralLedgerDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: #000;
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-border-color: #ececec;
+  --color-table-border-color: var(--color-dark-gray4);
+  --color-table-total-border-color: #ddd;
+  --color-table-total-border-color: var(--color-dark-gray4);
+
  .tbody {
    .tr .td {
      padding-top: 0.2rem;
@@ -80,10 +88,10 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
      }
    }
    .tr:not(.no-results) .td:not(:first-of-type) {
-      border-left: 1px solid #ececec;
+      border-left: 1px solid var(--color-table-border-color);
    }
    .tr:last-child .td {
-      border-bottom: 1px solid #ececec;
+      border-bottom: 1px solid var(--color-table-border-color);
    }
    .tr.row_type {
      &--ACCOUNT {
@@ -100,7 +108,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
      &--OPENING_BALANCE,
      &--CLOSING_BALANCE {
        .td {
-          color: #000;
+          color: var(--color-table-total-text-color);
        }
        .date {
          font-weight: 500;
@@ -118,7 +126,7 @@ const GeneralLedgerDataTable = styled(ReportDataTable)`
          font-weight: 500;
        }
        .td {
-          border-top: 1px solid #ddd;
+          border-top: 1px solid var(--color-table-total-border-color);
        }
      }
    }
--- a/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.tsx
@@ -56,6 +56,13 @@ export function InventoryItemDetailsTable({
 }

 const InventoryItemDetailsDataTable = styled(ReportDataTable)`
+  --color-table-text: var(--color-light-gray1);
+  --color-table-total-text: var(--color-light-gray4);
+  --color-table-border: #ececec;
+  --color-report-table-border: var(--color-dark-gray4);
+  --color-table-total-border: #ddd;
+  --color-table-total-border: var(--color-dark-gray4);;
+
  .table {
    .tbody {
      .tr .td {
@@ -64,20 +71,17 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
      }

      .tr:not(.no-results) .td:not(:first-of-type) {
-        border-left: 1px solid #ececec;
+        border-left: 1px solid var(--color-report-table-border);
      }
-
      .tr:last-child .td {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--color-table-total-border);
      }
-
      .tr.row_type {
        &--ITEM {
          .td {
            &.transaction_type {
              border-left-color: transparent;
            }
-
            &.date {
              .cell-inner {
                white-space: nowrap;
@@ -86,7 +90,7 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
            }
          }
          &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-total-border);
          }
        }

@@ -94,6 +98,10 @@ const InventoryItemDetailsDataTable = styled(ReportDataTable)`
        &--OPENING_ENTRY,
        &--CLOSING_ENTRY {
          font-weight: 500;
+
+          .td {
+            color: var(--color-table-total-text);
+          }
        }

        &--ITEM {
--- a/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/JournalTable.tsx
@@ -65,14 +65,20 @@ export function JournalTable({ companyName }) {
 }

 const JournalDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+  --color-table-border-color: var(--color-dark-gray4);
+  --color-table-total-border-color: #dbdbdb;
+  --color-table-total-border-color: var(--color-table-border-color);
+
  .table {
    .tbody {
      .tr:not(.no-results) .td {
        padding: 0.3rem 0.4rem;
-        color: #000;
+        color: var(--color-table-text-color);
        border-bottom-color: transparent;
+        border-left: 1px solid var(--color-table-border-color);
        min-height: 28px;
-        border-left: 1px solid #ececec;

        &:first-of-type {
          border-left: 0;
@@ -80,11 +86,12 @@ const JournalDataTable = styled(ReportDataTable)`
      }
      .tr:not(.no-results):last-child {
        .td {
-          border-bottom: 1px solid #dbdbdb;
+          border-bottom: 1px solid var(--color-table-total-border-color);
        }
      }
      .tr.row_type--TOTAL{
        font-weight: 600;
+        color: var(--color-table-total-text-color);
      }
      .tr:not(.no-results) {
        height: 28px;
--- a/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx
@@ -55,13 +55,16 @@ export default function ProfitLossSheetTable({
 }

 const ProfitLossDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+
  .table {
    .tbody .tr {
      .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
        padding-top: 0.32rem;
        padding-bottom: 0.32rem;
-        color: #252A31;
+        color: var(--color-table-text-color);
      }
      &.is-expanded {
        .td:not(.name) .cell-inner {
@@ -71,12 +74,14 @@ const ProfitLossDataTable = styled(ReportDataTable)`
      &.row_type--TOTAL {
        .td {
          font-weight: 500;
-          border-top: 1px solid #bbb;
-          color: #000;
+          border-top-width: 1px;
+          border-top-style: solid;
+          color: var(--color-table-total-text-color);
        }
      }
      &:last-of-type .td {
-        border-bottom: 3px double #000;
+        border-bottom-width: 3px;
+        border-bottom-style: double;
      }
    }
  }
--- a/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.tsx
@@ -52,16 +52,31 @@ const PurchasesByItemsSheet = styled(FinancialSheet)`
 `;

 const PurchasesByItemsDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #000;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
  .table {
    .tbody {
      .tr .td {
+        border-bottom-width: 0;
        padding-top: 0.36rem;
        padding-bottom: 0.36rem;
      }
      .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
+        border-top-width: 1px;
        font-weight: 500;
-        border-bottom: 3px double #000;
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: var(--x-table-total-border-top-color);
+        border-bottom-style: double;
+        border-bottom-width: 3px;
+        border-bottom-color: var(--x-table-total-border-bottom-color);
      }
    }
  }
--- a/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.tsx
@@ -52,17 +52,31 @@ const SalesByItemsSheet = styled(FinancialSheet)`
 `;

 const SalesByItemsDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #000;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
  .table {
    .tbody {
      .tr .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
      }
      .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
+        border-top-width: 1px;
        font-weight: 500;
-        border-bottom: 3px double #000;
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: var(--x-table-total-border-top-color);
+        border-bottom-style: double;
+        border-bottom-width: 3px;
+        border-bottom-color: var(--x-table-total-border-bottom-color);
      }
    }
  }
--- a/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/SelectDisplayColumnsBy.tsx
@@ -1,8 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup } from '@blueprintjs/core';
-import { FastField } from 'formik';
-import { Row, Col, ListSelect, FormattedMessage as T } from '@/components';
+import {
+  Row,
+  Col,
+  FSelect,
+  FormattedMessage as T,
+  FFormGroup,
+} from '@/components';
 import { displayColumnsByOptions } from './constants';

 /**
@@ -14,29 +18,22 @@ export default function SelectsListColumnsBy(props) {
  return (
    <Row>
      <Col xs={4}>
-        <FastField name={'displayColumnsType'}>
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'display_report_columns'} />}
-              className="form-group-display-columns-by form-group--select-list bp4-fill"
-              inline={false}
-              {...formGroupProps}
-            >
-              <ListSelect
-                items={displayColumnsByOptions}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'key'}
-                textProp={'name'}
-                onItemSelect={(item) => {
-                  form.setFieldValue('displayColumnsType', item.key);
-                }}
-                popoverProps={{ minimal: true }}
-                {...selectListProps}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        <FFormGroup
+          name={'displayColumnsType'}
+          label={<T id={'display_report_columns'} />}
+          inline={false}
+          {...formGroupProps}
+        >
+          <FSelect
+            name={'displayColumnsType'}
+            items={displayColumnsByOptions}
+            valueAccessor={'key'}
+            textAccessor={'name'}
+            filterable={false}
+            popoverProps={{ minimal: true }}
+            {...selectListProps}
+          />
+        </FFormGroup>
      </Col>
    </Row>
  );
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.tsx
@@ -48,20 +48,24 @@ export default function TrialBalanceSheetTable({ companyName }) {
 }

 const TrialBalanceDataTable = styled(ReportDataTable)`
+  --color-table-text-color: var(--color-light-gray1);
+  --color-table-total-text-color: var(--color-light-gray4);
+
  .table {
    .tbody {
      .tr .td {
-        border-bottom: 0;
+        border-bottom-width: 0;
        padding-top: 0.36rem;
        padding-bottom: 0.36rem;
-      }
-      .balance.td {
-        border-top-color: #000;
+        color: var(--color-table-text-color);
      }
      .tr.row_type--TOTAL .td {
-        border-top: 1px solid #bbb;
        font-weight: 500;
-        border-bottom: 3px double #000;
+        color: var(--color-table-total-text-color);
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-bottom-width: 3px;
+        border-bottom-style: double;
      }
    }
  }
--- a/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.tsx
@@ -44,21 +44,34 @@ export default function VendorsBalanceSummaryTable({
 const VendorBalanceFinancialSheet = styled(FinancialSheet)``;

 const VendorBalanceDataTable = styled(ReportDataTable)`
+  --x-table-total-border-bottom-color: #333;
+  --x-table-total-border-top-color: #bbb;
+  --x-table-total-border-bottom-color: var(
+    --color-datatable-constrant-cell-border
+  );
+  --x-table-total-border-top-color: var(
+    --color-datatable-constrant-cell-border
+  );
+
  .table {
    .tbody {
      .tr:not(.no-results) {
        .td {
-          border-bottom: 0;
+          border-bottom-width: 0;
          padding-top: 0.4rem;
          padding-bottom: 0.4rem;
        }
-
        &.row_type--TOTAL {
-          font-weight: 500;
-
          .td {
-            border-top: 1px solid #bbb;
-            border-bottom: 3px double #333;
+            font-weight: 500;
+            border-top-width: 1px;
+            font-weight: 500;
+            border-top-width: 1px;
+            border-top-style: solid;
+            border-top-color: var(--x-table-total-border-top-color);
+            border-bottom-style: double;
+            border-bottom-width: 3px;
+            border-bottom-color: var(--x-table-total-border-bottom-color);
          }
        }
      }
--- a/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.tsx
@@ -60,19 +60,23 @@ export default function VendorsTransactionsTable({
 }

 const VendorsTransactionsDataTable = styled(DataTable)`
+  --color-table-border-left-color: #ececec;
+  --color-table-customer-border-color: #ddd;
+  --color-table-border-left-color: var(--color-dark-gray4);
+  --color-table-customer-border-color: var(--color-dark-gray4);
+
  .table {
    .tbody {
      .tr .td {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
      }
-      .tr:not(.no-results) .td {
-        border-left: 1px solid #ececec;
+      .tr:not(.no-results) .td:not(:first-of-type) {
+        border-left: 1px solid var(--color-table-border-left-color);
      }
      .tr:last-child .td {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom-width: 1px;
      }
-
      .tr.row_type {
        &--VENDOR {
          .td {
@@ -81,7 +85,7 @@ const VendorsTransactionsDataTable = styled(DataTable)`
            }
          }
          &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
          }
        }
        &--OPENING_BALANCE,
@@ -95,12 +99,12 @@ const VendorsTransactionsDataTable = styled(DataTable)`
            }
          }
          &:not(:first-child).is-expanded .td {
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--color-table-customer-border-color);
          }
        }
        &--VENDOR:last-child {
          .td {
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid var(--color-table-customer-border-color);
          }
        }
      }