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/plugins/plugin-chart-table/src/DataTable/components/SelectPageSize.tsx

@@ -17,8 +17,9 @@
  * under the License.
  */
 import { memo } from 'react';
-import { t } from '@superset-ui/core';
+import { css, t } from '@superset-ui/core';
 import { formatSelectOptions } from '@superset-ui/chart-controls';
+import { RawAntdSelect } from '@superset-ui/core/components';
 
 export type SizeOption = [number, string];
 
@@ -33,16 +34,18 @@ function DefaultSelectRenderer({
   options,
   onChange,
 }: SelectPageSizeRendererProps) {
+  const { Option } = RawAntdSelect;
+
   return (
     <span className="dt-select-page-size form-inline">
       {t('Show')}{' '}
-      <select
-        className="form-control input-sm"
+      <RawAntdSelect<number>
         value={current}
-        onBlur={() => {}}
-        onChange={e => {
-          onChange(Number((e.target as HTMLSelectElement).value));
-        }}
+        onChange={value => onChange(value)}
+        size="small"
+        css={theme => css`
+          width: ${theme.sizeUnit * 18}px;
+        `}
       >
         {options.map(option => {
           const [size, text] = Array.isArray(option)
@@ -50,16 +53,16 @@ function DefaultSelectRenderer({
             : [option, option];
           const sizeLabel = size === 0 ? t('all') : size;
           return (
-            <option
-              aria-label={t('Show %s entries', sizeLabel)}
+            <Option
               key={size}
-              value={size}
+              value={Number(size)}
+              aria-label={t('Show %s entries', sizeLabel)}
             >
               {text}
-            </option>
+            </Option>
           );
         })}
-      </select>{' '}
+      </RawAntdSelect>{' '}
       {t('entries')}
     </span>
   );