QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-12 19:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

37
superset-frontend/src/features/queries/QueryPreviewModal.tsx
View File

@@ -18,9 +18,8 @@
*/
import { useState } from 'react';
import { styled, t } from '@superset-ui/core';
import Modal from 'src/components/Modal';
import cx from 'classnames';
import Button from 'src/components/Button';
import { Button, Modal } from '@superset-ui/core/components';
import withToasts, {
ToastProps,
} from 'src/components/MessageToasts/withToasts';
@@ -29,51 +28,51 @@ import useQueryPreviewState from 'src/features/queries/hooks/useQueryPreviewStat
import { QueryObject } from 'src/views/CRUD/types';
const QueryTitle = styled.div`
color: ${({ theme }) => theme.colors.secondary.light2};
font-size: ${({ theme }) => theme.typography.sizes.s}px;
color: ${({ theme }) => theme.colors.primary.light2};
font-size: ${({ theme }) => theme.fontSizeSM}px;
margin-bottom: 0;
`;
const QueryLabel = styled.div`
color: ${({ theme }) => theme.colors.grayscale.dark2};
font-size: ${({ theme }) => theme.typography.sizes.m}px;
font-size: ${({ theme }) => theme.fontSize}px;
padding: 4px 0 24px 0;
`;
const QueryViewToggle = styled.div`
margin: 0 0 ${({ theme }) => theme.gridUnit * 6}px 0;
margin: 0 0 ${({ theme }) => theme.sizeUnit * 6}px 0;
`;
const TabButton = styled.div`
display: inline;
font-size: ${({ theme }) => theme.typography.sizes.s}px;
padding: ${({ theme }) => theme.gridUnit * 2}px
${({ theme }) => theme.gridUnit * 4}px;
margin-right: ${({ theme }) => theme.gridUnit * 4}px;
color: ${({ theme }) => theme.colors.secondary.dark1};
font-size: ${({ theme }) => theme.fontSizeSM}px;
padding: ${({ theme }) => theme.sizeUnit * 2}px
${({ theme }) => theme.sizeUnit * 4}px;
margin-right: ${({ theme }) => theme.sizeUnit * 4}px;
color: ${({ theme }) => theme.colorPrimaryText};
&.active,
&:focus,
&:hover {
background: ${({ theme }) => theme.colors.secondary.light4};
background: ${({ theme }) => theme.colors.primary.light4};
border-bottom: none;
border-radius: ${({ theme }) => theme.borderRadius}px;
margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
&:hover:not(.active) {
background: ${({ theme }) => theme.colors.secondary.light5};
background: ${({ theme }) => theme.colors.primary.light5};
}
`;
const StyledModal = styled(Modal)`
.antd5-modal-body {
padding: ${({ theme }) => theme.gridUnit * 6}px;
.ant-modal-body {
padding: ${({ theme }) => theme.sizeUnit * 6}px;
}
pre {
font-size: ${({ theme }) => theme.typography.sizes.xs}px;
font-weight: ${({ theme }) => theme.typography.weights.normal};
line-height: ${({ theme }) => theme.typography.sizes.l}px;
font-size: ${({ theme }) => theme.fontSizeXS}px;
font-weight: ${({ theme }) => theme.fontWeightNormal};
line-height: ${({ theme }) => theme.fontSizeLG}px;
height: 375px;
border: none;
}

17
superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
View File

@@ -18,8 +18,7 @@
*/
import { FunctionComponent } from 'react';
import { styled, t } from '@superset-ui/core';
import Modal from 'src/components/Modal';
import Button from 'src/components/Button';
import { Button, Modal } from '@superset-ui/core/components';
import SyntaxHighlighterCopy from 'src/features/queries/SyntaxHighlighterCopy';
import withToasts, {
ToastProps,
@@ -27,26 +26,26 @@ import withToasts, {
import useQueryPreviewState from 'src/features/queries/hooks/useQueryPreviewState';
const QueryTitle = styled.div`
color: ${({ theme }) => theme.colors.secondary.light2};
font-size: ${({ theme }) => theme.typography.sizes.s}px;
color: ${({ theme }) => theme.colors.primary.light2};
font-size: ${({ theme }) => theme.fontSizeSM}px;
margin-bottom: 0;
`;
const QueryLabel = styled.div`
color: ${({ theme }) => theme.colors.grayscale.dark2};
font-size: ${({ theme }) => theme.typography.sizes.m}px;
font-size: ${({ theme }) => theme.fontSize}px;
padding: 4px 0 16px 0;
`;
const StyledModal = styled(Modal)`
.antd5-modal-body {
.ant-modal-body {
padding: 24px;
}
pre {
font-size: ${({ theme }) => theme.typography.sizes.xs}px;
font-weight: ${({ theme }) => theme.typography.weights.normal};
line-height: ${({ theme }) => theme.typography.sizes.l}px;
font-size: ${({ theme }) => theme.fontSizeXS}px;
font-weight: ${({ theme }) => theme.fontWeightNormal};
line-height: ${({ theme }) => theme.fontSizeLG}px;
height: 375px;
border: none;
}

4
superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx
View File

@@ -24,7 +24,7 @@ import markdownSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/mar
import jsonSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
import { Icons } from 'src/components/Icons';
import { Icons } from '@superset-ui/core/components/Icons';
import { ToastProps } from 'src/components/MessageToasts/withToasts';
import copyTextToClipboard from 'src/utils/copy';
@@ -81,7 +81,7 @@ export default function SyntaxHighlighterCopy({
<Icons.CopyOutlined
tabIndex={0}
role="button"
onClick={e => {
onClick={(e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
e.currentTarget.blur();
copyToClipboard(children);