This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch template_less_preset_theme_editor in repository https://gitbox.apache.org/repos/asf/superset.git
commit 3272a65bae65df41512ef917f2ddb4acee604ae7 Author: Maxime Beauchemin <[email protected]> AuthorDate: Tue Apr 1 13:50:50 2025 -0700 fix links and bring GlobalStyles to superset-ui/core --- superset-frontend/.storybook/preview.jsx | 1 - .../superset-ui-core/src/theme/GlobalStyles.tsx | 89 +++++++++++++++++++++ .../packages/superset-ui-core/src/theme/Theme.tsx | 2 + superset-frontend/src/GlobalStyles.tsx | 92 ---------------------- .../src/components/ThemeEditor/index.tsx | 14 ++-- superset-frontend/src/theme.ts | 3 + superset-frontend/src/views/App.tsx | 2 - 7 files changed, 102 insertions(+), 101 deletions(-) diff --git a/superset-frontend/.storybook/preview.jsx b/superset-frontend/.storybook/preview.jsx index dfbe752eef..6f56faec57 100644 --- a/superset-frontend/.storybook/preview.jsx +++ b/superset-frontend/.storybook/preview.jsx @@ -22,7 +22,6 @@ import { combineReducers, createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import reducerIndex from 'spec/helpers/reducerIndex'; -import { GlobalStyles } from '../src/GlobalStyles'; import { Global } from '@emotion/react'; import { App, Layout, Space, Content } from 'antd-v5'; diff --git a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx new file mode 100644 index 0000000000..36f978ac24 --- /dev/null +++ b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx @@ -0,0 +1,89 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { css, useTheme, Global } from '@emotion/react'; + +export const GlobalStyles = () => { + const theme = useTheme(); + console.log('YOYO2', theme.colorLink); + return ( + <Global + key={`global-${theme.colorLink}`} + styles={css` + body { + background-color: ${theme.colorBgBase}; + } + + a { + color: ${theme.colorLink}; + } + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + th { + font-weight: ${theme.fontWeightStrong}; + } + + .echarts-tooltip[style*='visibility: hidden'] { + display: none !important; + } + + .antd5-dropdown, + .ant-dropdown, + .ant-select-dropdown, + .antd5-modal-wrap, + .antd5-modal-mask, + .antd5-picker-dropdown, + .ant-popover, + .antd5-popover { + z-index: ${theme.zIndexPopupBase} !important; + } + + .column-config-popover { + & .antd5-input-number { + width: 100%; + } + && .btn-group svg { + line-height: 0; + top: 0; + } + & .btn-group > .btn { + padding: 5px 10px 6px; + } + && .ant-tabs { + margin-top: ${theme.sizeUnit * -3}px; + } + & .ant-tabs-nav { + margin-left: ${theme.sizeUnit * -4}px; + margin-right: ${theme.sizeUnit * -4}px; + margin-bottom: ${theme.sizeUnit * 2}px; + } + && .ant-tabs-tab { + flex: 1; + margin-right: 0; + } + } + `} + /> + ); +}; diff --git a/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx b/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx index 5c9280a069..e2657aaa55 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx +++ b/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx @@ -27,6 +27,7 @@ import { CacheProvider as EmotionCacheProvider, } from '@emotion/react'; import createCache from '@emotion/cache'; +import { GlobalStyles } from './GlobalStyles'; import { AntdThemeConfig, @@ -290,6 +291,7 @@ export class Theme { return ( <EmotionCacheProvider value={themeState.emotionCache}> <EmotionThemeProvider theme={themeState.theme}> + <GlobalStyles /> <ConfigProvider theme={themeState.antdConfig} prefixCls="antd5"> {children} </ConfigProvider> diff --git a/superset-frontend/src/GlobalStyles.tsx b/superset-frontend/src/GlobalStyles.tsx deleted file mode 100644 index bc3a3e2285..0000000000 --- a/superset-frontend/src/GlobalStyles.tsx +++ /dev/null @@ -1,92 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -import { css } from '@superset-ui/core'; -import { Global } from '@emotion/react'; -import 'react-js-cron/dist/styles.css'; - -export const GlobalStyles = () => ( - <Global - styles={theme => css` - body { - background-color: ${theme.colorBgBase}; - } - - a { - color: ${theme.colorLink}; - } - - h1, - h2, - h3, - h4, - h5, - h6, - strong, - th { - font-weight: ${theme.fontWeightStrong}; - } - // CSS hack to resolve the issue caused by the invisible echart tooltip on - // https://github.com/apache/superset/issues/30058 - .echarts-tooltip[style*='visibility: hidden'] { - display: none !important; - } - - // Ant Design is applying inline z-index styles causing troubles - // TODO: Remove z-indexes when Ant Design is fully upgraded to v5 - // Prefer vanilla Ant Design z-indexes that should work out of the box - .antd5-dropdown, - .ant-dropdown, - .ant-select-dropdown, - .antd5-modal-wrap, - .antd5-modal-mask, - .antd5-picker-dropdown, - .ant-popover, - .antd5-popover { - z-index: ${theme.zIndexPopupBase} !important; - } - - // TODO: Remove when buttons have been upgraded to Ant Design 5. - // Check src/components/Modal for more info. - .column-config-popover { - & .antd5-input-number { - width: 100%; - } - && .btn-group svg { - line-height: 0; - top: 0; - } - & .btn-group > .btn { - padding: 5px 10px 6px; - } - && .ant-tabs { - margin-top: ${theme.sizeUnit * -3}px; - } - & .ant-tabs-nav { - margin-left: ${theme.sizeUnit * -4}px; - margin-right: ${theme.sizeUnit * -4}px; - margin-bottom: ${theme.sizeUnit * 2}px; - } - && .ant-tabs-tab { - flex: 1; - margin-right: 0; - } - } - `} - /> -); diff --git a/superset-frontend/src/components/ThemeEditor/index.tsx b/superset-frontend/src/components/ThemeEditor/index.tsx index c5f955c14a..04251fdb70 100644 --- a/superset-frontend/src/components/ThemeEditor/index.tsx +++ b/superset-frontend/src/components/ThemeEditor/index.tsx @@ -218,17 +218,19 @@ export default function ThemeEditor() { // fallback to empty overrides } - const merged = mergeWith({}, tokens, overrides); - merged.algorithm = [ - isDark ? 'dark' : 'default', - ...(isCompact ? ['compact'] : []), - ]; - return merged; + return { + token: { ...tokens, ...overrides }, + algorithm: [ + isDark ? 'dark' : 'default', + ...(isCompact ? ['compact'] : []), + ], + }; }; const applyTheme = () => { try { const antdTheme = getMergedTheme(); + console.log('ANTD', antdTheme); themeObject.setConfig(antdTheme); setIsModalOpen(false); } catch (e) { diff --git a/superset-frontend/src/theme.ts b/superset-frontend/src/theme.ts index 20a874c063..ea36a6446c 100644 --- a/superset-frontend/src/theme.ts +++ b/superset-frontend/src/theme.ts @@ -20,3 +20,6 @@ import './assets/stylesheets/superset.less'; // Importing Antd under its own stylesheet to prevent unintentional theming import './assets/stylesheets/antd/index.less'; + +// Styles for the crontab-related lib +import 'react-js-cron/dist/styles.css'; diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx index d74b0e3377..9ee4e94755 100644 --- a/superset-frontend/src/views/App.tsx +++ b/superset-frontend/src/views/App.tsx @@ -26,7 +26,6 @@ import { } from 'react-router-dom'; import { bindActionCreators } from 'redux'; import { css } from '@superset-ui/core'; -import { GlobalStyles } from 'src/GlobalStyles'; import ErrorBoundary from 'src/components/ErrorBoundary'; import Layout from 'src/components/Layout'; import Loading from 'src/components/Loading'; @@ -77,7 +76,6 @@ const App = () => ( <ScrollToTop /> <LocationPathnameLogger /> <RootContextProviders> - <GlobalStyles /> <Menu data={bootstrapData.common.menu_data} isFrontendRoute={isFrontendRoute}
