fix: remove all less styling! (#33445)

Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>

superset-frontend/plugins/plugin-chart-table/src/Styles.tsx

@@ -16,38 +16,50 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { css, styled } from '@superset-ui/core';
 
 export default styled.div`
   ${({ theme }) => css`
+    /* Base table styles */
     table {
       width: 100%;
       min-width: auto;
       max-width: none;
       margin: 0;
+      border-collapse: collapse;
     }
 
+    /* Cell styling */
     th,
     td {
       min-width: 4.3em;
+      padding: 0.75rem;
+      vertical-align: top;
     }
 
+    /* Header styling */
     thead > tr > th {
       padding-right: 0;
       position: relative;
-      background: ${theme.colorBgLayout};
+      background-color: ${theme.colorBgBase};
       text-align: left;
       border-bottom: 2px solid ${theme.colorSplit};
       color: ${theme.colorText};
+      vertical-align: bottom;
     }
+
+    /* Icons in header */
     th svg {
-      color: ${theme.colorIcon};
-      margin: ${theme.sizeUnit / 2}px;
+      margin: 1px ${theme.sizeUnit / 2}px;
+      fill-opacity: 0.2;
     }
+
     th.is-sorted svg {
       color: ${theme.colorText};
+      fill-opacity: 1;
     }
+
+    /* Table body styling */
     .table > tbody > tr:first-of-type > td,
     .table > tbody > tr:first-of-type > th {
       border-top: 0;
@@ -58,24 +70,59 @@ export default styled.div`
       border-top: 1px solid ${theme.colorSplit};
     }
 
+    /* Bootstrap-like condensed table styles */
+    table.table-condensed,
+    table.table-sm {
+      font-size: ${theme.fontSizeSM}px;
+    }
+
+    table.table-condensed th,
+    table.table-condensed td,
+    table.table-sm th,
+    table.table-sm td {
+      padding: 0.3rem;
+    }
+
+    /* Bootstrap-like bordered table styles */
+    table.table-bordered {
+      border: 1px solid ${theme.colorSplit};
+    }
+
+    table.table-bordered th,
+    table.table-bordered td {
+      border: 1px solid ${theme.colorSplit};
+    }
+
+    /* Bootstrap-like striped table styles */
+    table.table-striped tbody tr:nth-of-type(odd) {
+      background-color: ${theme.colorBgLayout};
+    }
+
+    /* Controls and metrics */
     .dt-controls {
       padding-bottom: 0.65em;
     }
+
     .dt-metric {
       text-align: right;
     }
+
     .dt-totals {
       font-weight: ${theme.fontWeightStrong};
     }
+
     .dt-is-null {
       color: ${theme.colorTextTertiary};
     }
+
     td.dt-is-filter {
       cursor: pointer;
     }
+
     td.dt-is-filter:hover {
       background-color: ${theme.colorPrimaryBgHover};
     }
+
     td.dt-is-active-filter,
     td.dt-is-active-filter:hover {
       background-color: ${theme.colorPrimaryBgHover};
@@ -85,17 +132,20 @@ export default styled.div`
       float: right;
     }
 
+    /* Cell truncation */
     .dt-truncate-cell {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
     .dt-truncate-cell:hover {
       overflow: visible;
       white-space: normal;
       height: auto;
     }
 
+    /* Pagination styling */
     .dt-pagination {
       text-align: right;
       /* use padding instead of margin so clientHeight can capture it */
@@ -134,6 +184,7 @@ export default styled.div`
     .right-border-only {
       border-right: 2px solid ${theme.colorSplit};
     }
+
     table .right-border-only:last-child {
       border-right: none;
     }

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -644,7 +644,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             css={css`
               float: right;
               & svg {
-                color: ${theme.colorText} !important;
+                color: ${theme.colorIcon} !important;
               }
             `}
           >
@@ -758,7 +758,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         isUsingTimeComparison &&
         Array.isArray(basicColorFormatters) &&
         basicColorFormatters.length > 0;
-
       const valueRange =
         !hasBasicColorFormatters &&
         !hasColumnColorFormatters &&
@@ -832,14 +831,12 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                 ? basicColorColumnFormatters[row.index][column.key]?.mainArrow
                 : '';
           }
-
           const StyledCell = styled.td`
             color: ${theme.colorText};
-            background-color: ${theme.colorBgBase};
             text-align: ${sharedStyle.textAlign};
             white-space: ${value instanceof Date ? 'nowrap' : undefined};
             position: relative;
-            background: ${backgroundColor || undefined};
+            background: ${backgroundColor || theme.colorWhite};
             padding-left: ${column.isChildColumn
               ? `${theme.sizeUnit * 5}px`
               : `${theme.sizeUnit}px`};
@@ -1033,7 +1030,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                   align-items: center;
                   & svg {
                     margin-left: ${theme.sizeUnit}px;
-                    color: ${theme.colorText} !important;
+                    color: ${theme.colorBorder} !important;
                   }
                 `}
               >