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/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx

@@ -20,7 +20,7 @@ import { PureComponent } from 'react';
 import rison from 'rison';
 import PropTypes from 'prop-types';
 import { CompactPicker } from 'react-color';
-import Button from 'src/components/Button';
+import { Button, AsyncSelect, EmptyState } from '@superset-ui/core/components';
 import {
   t,
   SupersetClient,
@@ -33,12 +33,10 @@ import {
   withTheme,
 } from '@superset-ui/core';
 import SelectControl from 'src/explore/components/controls/SelectControl';
-import { AsyncSelect } from 'src/components';
 import TextControl from 'src/explore/components/controls/TextControl';
 import CheckboxControl from 'src/explore/components/controls/CheckboxControl';
-import PopoverSection from 'src/components/PopoverSection';
+import PopoverSection from '@superset-ui/core/components/PopoverSection';
 import ControlHeader from 'src/explore/components/ControlHeader';
-import { EmptyState } from 'src/components/EmptyState';
 import {
   ANNOTATION_SOURCE_TYPES,
   ANNOTATION_TYPES,
@@ -901,7 +899,7 @@ class AnnotationLayer extends PureComponent {
     return (
       <>
         {this.props.error && (
-          <span style={{ color: this.props.theme.colors.error.base }}>
+          <span style={{ color: this.props.theme.colorError }}>
             ERROR: {this.props.error}
           </span>
         )}
@@ -967,11 +965,19 @@ class AnnotationLayer extends PureComponent {
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           {isNew ? (
-            <Button buttonSize="small" onClick={() => this.props.close()}>
+            <Button
+              buttonSize="small"
+              buttonStyle="secondary"
+              onClick={() => this.props.close()}
+            >
               {t('Cancel')}
             </Button>
           ) : (
-            <Button buttonSize="small" onClick={this.deleteAnnotation}>
+            <Button
+              buttonSize="small"
+              buttonStyle="secondary"
+              onClick={this.deleteAnnotation}
+            >
               {t('Remove')}
             </Button>
           )}

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { List } from 'src/components/List';
 import { connect } from 'react-redux';
 import { PureComponent } from 'react';
 import {
@@ -27,17 +26,19 @@ import {
   SupersetTheme,
   t,
   withTheme,
-  css,
 } from '@superset-ui/core';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
+import {
+  AsyncEsmComponent,
+  List,
+  InfoTooltip,
+} from '@superset-ui/core/components';
 import { getChartKey } from 'src/explore/exploreUtils';
 import { runAnnotationQuery } from 'src/components/Chart/chartAction';
 import CustomListItem from 'src/explore/components/controls/CustomListItem';
 import { ChartState, ExplorePageState } from 'src/explore/types';
 import { AnyAction } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
-import { Icons } from 'src/components/Icons';
+import { Icons } from '@superset-ui/core/components/Icons';
 import ControlPopover, {
   getSectionContainerElement,
 } from '../ControlPopover/ControlPopover';
@@ -188,31 +189,25 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
   renderInfo(anno: Annotation) {
     const { annotationError, annotationQuery, theme } = this.props;
     if (annotationQuery[anno.name]) {
-      return (
-        <Icons.SyncOutlined
-          iconColor={theme.colors.primary.base}
-          iconSize="m"
-        />
-      );
+      return <Icons.SyncOutlined iconColor={theme.colorPrimary} iconSize="m" />;
     }
     if (annotationError[anno.name]) {
       return (
-        <InfoTooltipWithTrigger
+        <InfoTooltip
           label="validation-errors"
-          bsStyle="danger"
+          type="error"
           tooltip={annotationError[anno.name]}
         />
       );
     }
     if (!anno.show) {
-      return <span style={{ color: theme.colors.error.base }}> Hidden </span>;
+      return <span style={{ color: theme.colorError }}> Hidden </span>;
     }
     return '';
   }
 
   render() {
     const { addedAnnotationIndex } = this.state;
-    const { theme } = this.props;
     const addedAnnotation =
       addedAnnotationIndex !== null
         ? this.props.value[addedAnnotationIndex]
@@ -246,7 +241,7 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
 
     return (
       <div>
-        <List bordered css={theme => ({ borderRadius: theme.gridUnit })}>
+        <List bordered css={theme => ({ borderRadius: theme.borderRadius })}>
           {annotations}
           <ControlPopover
             trigger="click"
@@ -265,10 +260,6 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
             <CustomListItem selectable>
               <Icons.PlusOutlined
                 iconSize="m"
-                css={css`
-                  margin: auto ${theme.gridUnit}px auto 0;
-                  vertical-align: tex-top;
-                `}
                 data-test="add-annotation-layer-button"
               />
               {t('Add annotation layer')}