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>
This commit is contained in:
Maxime Beauchemin
2025-06-20 13:38:58 -07:00
committed by GitHub
parent 2cc1ef88c8
commit dd129fa403
1267 changed files with 32958 additions and 23592 deletions

View File

@@ -21,8 +21,9 @@ import { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
import { css, styled, t, useTheme } from '@superset-ui/core';
import { useSingleViewResource } from 'src/views/CRUD/hooks';
import { Icons } from 'src/components/Icons';
import Modal from 'src/components/Modal';
import { Icons } from '@superset-ui/core/components/Icons';
import { Typography } from '@superset-ui/core/components/Typography';
import { Input, Modal } from '@superset-ui/core/components';
import withToasts from 'src/components/MessageToasts/withToasts';
import { OnlyKeyWithType } from 'src/utils/types';
@@ -43,28 +44,28 @@ interface AnnotationLayerModalProps {
}
const StyledAnnotationLayerTitle = styled.div`
margin: ${({ theme }) => theme.gridUnit * 2}px auto
${({ theme }) => theme.gridUnit * 4}px auto;
margin: ${({ theme }) => theme.sizeUnit * 2}px auto
${({ theme }) => theme.sizeUnit * 4}px auto;
`;
const LayerContainer = styled.div`
margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
margin-bottom: ${({ theme }) => theme.sizeUnit * 10}px;
.control-label {
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
.required {
margin-left: ${({ theme }) => theme.gridUnit / 2}px;
color: ${({ theme }) => theme.colors.error.base};
margin-left: ${({ theme }) => theme.sizeUnit / 2}px;
color: ${({ theme }) => theme.colorError};
}
textarea,
input[type='text'] {
padding: ${({ theme }) => theme.gridUnit * 1.5}px
${({ theme }) => theme.gridUnit * 2}px;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
border-radius: ${({ theme }) => theme.gridUnit}px;
padding: ${({ theme }) => theme.sizeUnit * 1.5}px
${({ theme }) => theme.sizeUnit * 2}px;
border: 1px solid ${({ theme }) => theme.colorBorder};
border-radius: ${({ theme }) => theme.borderRadius}px;
width: 50%;
}
@@ -235,19 +236,19 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
show={show}
width="55%"
title={
<h4 data-test="annotation-layer-modal-title">
<Typography.Title level={4} data-test="annotation-layer-modal-title">
{isEditMode ? (
<Icons.EditOutlined
iconSize="l"
css={css`
margin: auto ${theme.gridUnit * 2}px auto 0;
margin: auto ${theme.sizeUnit * 2}px auto 0;
`}
/>
) : (
<Icons.PlusOutlined
iconSize="m"
css={css`
margin: auto ${theme.gridUnit * 2}px auto 0;
margin: auto ${theme.sizeUnit * 2}px auto 0;
vertical-align: text-top;
`}
/>
@@ -255,18 +256,18 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
{isEditMode
? t('Edit annotation layer properties')
: t('Add annotation layer')}
</h4>
</Typography.Title>
}
>
<StyledAnnotationLayerTitle>
<h4>{t('Basic information')}</h4>
<Typography.Title level={4}>{t('Basic information')}</Typography.Title>
</StyledAnnotationLayerTitle>
<LayerContainer>
<div className="control-label">
{t('Annotation layer name')}
<span className="required">*</span>
</div>
<input
<Input
name="name"
onChange={onTextChange}
type="text"
@@ -275,7 +276,7 @@ const AnnotationLayerModal: FunctionComponent<AnnotationLayerModalProps> = ({
</LayerContainer>
<LayerContainer>
<div className="control-label">{t('description')}</div>
<textarea
<Input.TextArea
name="descr"
value={currentLayer?.descr}
placeholder={t('Description (this can be seen in the list)')}