feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

superset-frontend/src/SqlLab/components/ColumnElement/ColumnElement.test.tsx

@@ -32,23 +32,23 @@ describe('ColumnElement', () => {
   it('renders a proper primary key', () => {
     const { container } = render(<ColumnElement column={table.columns[0]} />);
     expect(container.querySelector('i.fa-key')).toBeInTheDocument();
-    expect(container.querySelector('.col-name')?.firstChild).toHaveTextContent(
-      'id',
-    );
+    expect(
+      container.querySelector('[data-test="col-name"]')?.firstChild,
+    ).toHaveTextContent('id');
   });
   it('renders a multi-key column', () => {
     const { container } = render(<ColumnElement column={table.columns[1]} />);
     expect(container.querySelector('i.fa-link')).toBeInTheDocument();
     expect(container.querySelector('i.fa-bookmark')).toBeInTheDocument();
-    expect(container.querySelector('.col-name')?.firstChild).toHaveTextContent(
-      'first_name',
-    );
+    expect(
+      container.querySelector('[data-test="col-name"]')?.firstChild,
+    ).toHaveTextContent('first_name');
   });
   it('renders a column with no keys', () => {
     const { container } = render(<ColumnElement column={table.columns[2]} />);
     expect(container.querySelector('i')).not.toBeInTheDocument();
-    expect(container.querySelector('.col-name')?.firstChild).toHaveTextContent(
-      'last_name',
-    );
+    expect(
+      container.querySelector('[data-test="col-name"]')?.firstChild,
+    ).toHaveTextContent('last_name');
   });
 });

superset-frontend/src/SqlLab/components/ColumnElement/index.tsx

@@ -19,7 +19,7 @@
 import { ReactNode } from 'react';
 import { ClassNames } from '@emotion/react';
 import { styled, useTheme, t } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
+import { Flex, Tooltip } from '@superset-ui/core/components';
 
 const StyledTooltip = (props: any) => {
   const theme = useTheme();
@@ -28,8 +28,8 @@ const StyledTooltip = (props: any) => {
       {({ css }) => (
         <Tooltip
           overlayClassName={css`
-            .antd5-tooltip-inner {
-              max-width: ${theme.gridUnit * 125}px;
+            .ant-tooltip-inner {
+              max-width: ${theme.sizeUnit * 125}px;
               word-wrap: break-word;
               text-align: center;
 
@@ -37,8 +37,8 @@ const StyledTooltip = (props: any) => {
                 background: transparent;
                 border: none;
                 text-align: left;
-                color: ${theme.colors.grayscale.light5};
-                font-size: ${theme.typography.sizes.xs}px;
+                color: ${theme.colorBgLayout};
+                font-size: ${theme.fontSizeXS}px;
               }
             }
           `}
@@ -50,7 +50,7 @@ const StyledTooltip = (props: any) => {
 };
 
 const Hr = styled.hr`
-  margin-top: ${({ theme }) => theme.gridUnit * 1.5}px;
+  margin-top: ${({ theme }) => theme.sizeUnit * 1.5}px;
 `;
 
 const iconMap = {
@@ -98,21 +98,22 @@ const ColumnElement = ({ column }: ColumnElementProps) => {
             </>
           }
         >
-          <i className={`fa text-muted m-l-2 ${iconMap[key.type]}`} />
+          {' '}
+          <i className={`fa text-muted ${iconMap[key.type]}`} />
         </StyledTooltip>
       </span>
     ));
   }
   return (
-    <div className="clearfix table-column">
-      <div className="pull-left m-l-10 col-name">
+    <Flex align="center" justify="space-between">
+      <div data-test="col-name">
         {columnName}
         {icons}
       </div>
-      <NowrapDiv className="pull-right text-muted">
+      <NowrapDiv className="text-muted">
         <small> {column.type}</small>
       </NowrapDiv>
-    </div>
+    </Flex>
   );
 };