diff --git a/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/types.erb b/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/types.erb index 4666626993a..851e84601e4 100644 --- a/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/types.erb +++ b/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/types.erb @@ -25,7 +25,7 @@ import { export interface <%= packageLabel %>StylesProps { height: number; width: number; - headerFontSize: keyof typeof supersetTheme.typography.sizes; + headerFontSize: 'fontSizeSM' | 'fontSize' | 'fontSizeLG' | 'fontSizeXL' | 'fontSizeHeading1' | 'fontSizeHeading2' | 'fontSizeHeading3' | 'fontSizeHeading4' | 'fontSizeHeading5'; boldText: boolean; } diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx index af0ff77db9e..4542c8f1635 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx @@ -24,7 +24,7 @@ import { css, styled, useTheme, t } from '@superset-ui/core'; const StyledCalculatorIcon = styled(CalculatorOutlined)` ${({ theme }) => css` - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIcon}; font-size: ${theme.fontSizeSM}px; & svg { margin-left: ${theme.sizeUnit}px; diff --git a/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx b/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx index d5ff70c954c..9f704f3c362 100644 --- a/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx +++ b/superset-frontend/packages/superset-ui-core/src/chart/components/FallbackComponent.tsx @@ -27,8 +27,8 @@ export default function FallbackComponent({ error, height, width }: Props) { return (
({ - backgroundColor: theme.colors.grayscale.dark2, - color: theme.colors.grayscale.light5, + backgroundColor: theme.colorBgContainer, + color: theme.colorText, overflow: 'auto', padding: 32, })} diff --git a/superset-frontend/packages/superset-ui-core/src/components/Checkbox/CheckboxIcons.tsx b/superset-frontend/packages/superset-ui-core/src/components/Checkbox/CheckboxIcons.tsx index 9eb1bc5d5ea..d6c7e2a7fb1 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Checkbox/CheckboxIcons.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Checkbox/CheckboxIcons.tsx @@ -52,7 +52,7 @@ export const CheckboxHalfChecked = () => { > @@ -71,7 +71,7 @@ export const CheckboxUnchecked = () => { > diff --git a/superset-frontend/packages/superset-ui-core/src/components/DeleteModal/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/DeleteModal/index.tsx index 1e9518091c7..9bbe0213d0d 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/DeleteModal/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/DeleteModal/index.tsx @@ -27,7 +27,7 @@ const StyledDiv = styled.div` padding-top: 8px; width: 50%; label { - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorTextLabel}; } `; diff --git a/superset-frontend/packages/superset-ui-core/src/components/Dropdown/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Dropdown/index.tsx index ae2135b1845..11741bed6f0 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Dropdown/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Dropdown/index.tsx @@ -31,7 +31,7 @@ const MenuDots = styled.div` width: ${({ theme }) => theme.sizeUnit * 0.75}px; height: ${({ theme }) => theme.sizeUnit * 0.75}px; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.grayscale.light1}; + background-color: ${({ theme }) => theme.colorFill}; font-weight: ${({ theme }) => theme.fontWeightNormal}; display: inline-flex; @@ -53,7 +53,7 @@ const MenuDots = styled.div` width: ${({ theme }) => theme.sizeUnit * 0.75}px; height: ${({ theme }) => theme.sizeUnit * 0.75}px; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.grayscale.light1}; + background-color: ${({ theme }) => theme.colorFill}; } &::before { diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx index 84a08e27482..7429abc8d10 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.tsx @@ -325,13 +325,13 @@ export const DropdownContainer = forwardRef( } ::-webkit-scrollbar-thumb { border-radius: 9px; - background-color: ${theme.colors.grayscale.light1}; + background-color: ${theme.colorFillSecondary}; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { - background-color: ${theme.colors.grayscale.light4}; - border-left: 1px solid ${theme.colors.grayscale.light2}; + background-color: ${theme.colorFillQuaternary}; + border-left: 1px solid ${theme.colorFillTertiary}; } } `} @@ -368,7 +368,7 @@ export const DropdownContainer = forwardRef( color={ (dropdownTriggerCount ?? overflowingCount) > 0 ? theme.colorPrimary - : theme.colors.grayscale.light1 + : theme.colorTextSecondary } showZero css={css` @@ -377,7 +377,7 @@ export const DropdownContainer = forwardRef( /> = { Default: null }; -Object.entries(supersetTheme.colors).forEach(([familyName, family]) => { - Object.entries(family as Record).forEach( - ([colorName, colorValue]) => { - palette[`${familyName} / ${colorName}`] = colorValue; - }, - ); -}); +const palette: Record = { + Default: null, + Primary: supersetTheme.colorPrimary, + Success: supersetTheme.colorSuccess, + Warning: supersetTheme.colorWarning, + Error: supersetTheme.colorError, + Info: supersetTheme.colorInfo, + Text: supersetTheme.colorText, + 'Text Secondary': supersetTheme.colorTextSecondary, + Icon: supersetTheme.colorIcon, +}; const IconSet = styled.div` display: grid; diff --git a/superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx index b84ee843f3c..6c37e1d637d 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx @@ -25,7 +25,7 @@ import type { LabelProps } from './types'; export function Label(props: LabelProps) { const theme = useTheme(); - const { transitionTiming } = theme; + // Use Ant Design's motion duration instead of deprecated transitionTiming const { type = 'default', monospace = false, @@ -46,7 +46,7 @@ export function Label(props: LabelProps) { const borderColorHover = onClick ? baseColor.borderHover : borderColor; const labelStyles = css` - transition: background-color ${transitionTiming}s; + transition: background-color ${theme.motionDurationMid}; white-space: nowrap; cursor: ${onClick ? 'pointer' : 'default'}; overflow: hidden; diff --git a/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx index 9a5fb7863c5..197659535f8 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx @@ -53,7 +53,7 @@ const StyledCard = styled(Card)` const Cover = styled.div` height: 264px; - border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border-bottom: 1px solid ${({ theme }) => theme.colorSplit}; overflow: hidden; .cover-footer { diff --git a/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx index 6437881a69c..f37bc8dd95e 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Menu/index.tsx @@ -53,7 +53,7 @@ const StyledMenuItem = styled(AntdMenu.Item)` justify-content: space-between; } a { - transition: background-color ${theme.motionDurationMid}s; + transition: background-color ${theme.motionDurationMid}; &:after { content: ''; position: absolute; @@ -63,7 +63,7 @@ const StyledMenuItem = styled(AntdMenu.Item)` height: 3px; opacity: 0; transform: translateX(-50%); - transition: translate ${theme.motionDurationMid}s; + transition: translate ${theme.motionDurationMid}; } &:focus { @media (max-width: 767px) { @@ -140,7 +140,7 @@ const StyledSubMenu = styled(AntdMenu.SubMenu)` height: 3px; opacity: 0; transform: translateX(-50%); - transition: all ${theme.transitionTiming}s; + transition: all ${theme.motionDurationMid}; } } `} diff --git a/superset-frontend/packages/superset-ui-core/src/components/Metadata/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Metadata/index.tsx index b40ba71fbb5..06ef9170745 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Metadata/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Metadata/index.tsx @@ -30,7 +30,7 @@ const MetadataWrapper = styled.div` const MetadataText = styled.span` font-size: ${({ theme }) => theme.fontSizeXS}px; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; font-weight: ${({ theme }) => theme.fontWeightStrong}; `; diff --git a/superset-frontend/packages/superset-ui-core/src/components/PopoverDropdown/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/PopoverDropdown/index.tsx index 60b6cc1ad7d..a6ea94b77b6 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/PopoverDropdown/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/PopoverDropdown/index.tsx @@ -60,12 +60,12 @@ const menuItemStyles = (theme: any) => css` } &:hover { - background: ${theme.colors.grayscale.light3}; + background: ${theme.colorFillQuaternary}; } &.active { font-weight: ${theme.fontWeightStrong}; - background: ${theme.colors.grayscale.light2}; + background: ${theme.colorFillTertiary}; } } diff --git a/superset-frontend/packages/superset-ui-core/src/components/PopoverSection/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/PopoverSection/index.tsx index 2e395e8a427..488778905e2 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/PopoverSection/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/PopoverSection/index.tsx @@ -66,16 +66,14 @@ export default function PopoverSection({ )}
({ cursor: 'pointer', - color: theme.colors.grayscale.base, + color: theme.colorIcon, '&:hover': { color: theme.colorPrimary }, })} /> diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx index 1dd1964607c..e1e4b0833b6 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx @@ -104,17 +104,17 @@ export const StyledLoadingText = styled.div` ${({ theme }) => ` margin-left: ${theme.sizeUnit * 3}px; line-height: ${theme.sizeUnit * 8}px; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; `} `; export const StyledHelperText = styled.div` ${({ theme }) => ` padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; font-size: ${theme.fontSizeSM}px; cursor: default; - border-bottom: 1px solid ${theme.colors.grayscale.light2}; + border-bottom: 1px solid ${theme.colorBorderSecondary}; `} `; @@ -140,6 +140,6 @@ export const StyledErrorMessage = styled.div` export const StyledBulkActionsContainer = styled(Flex)` ${({ theme }) => ` padding: ${theme.sizeUnit}px; - border-top: 1px solid ${theme.colors.grayscale.light3}; + border-top: 1px solid ${theme.colorSplit}; `} `; diff --git a/superset-frontend/packages/superset-ui-core/src/components/Table/cell-renderers/NullCell/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Table/cell-renderers/NullCell/index.tsx index e01b7c672ec..a9ef5d640b6 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Table/cell-renderers/NullCell/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Table/cell-renderers/NullCell/index.tsx @@ -20,7 +20,7 @@ import { styled } from '../../../..'; import { Constants } from '../../..'; const GrayCell = styled.span` - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; `; function NullCell() { diff --git a/superset-frontend/packages/superset-ui-core/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/packages/superset-ui-core/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index cd54635b064..4b48f2bf465 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -74,7 +74,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) { > ` .ant-tabs-content-holder { - background: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgContainer}; } & > .ant-tabs-nav { @@ -99,7 +99,7 @@ const StyledEditableTabs = styled(StyledTabs)` `; const StyledCloseOutlined = styled(Icons.CloseOutlined)` - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; `; export const EditableTabs = Object.assign(StyledEditableTabs, { TabPane: StyledTabPane, diff --git a/superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx index 0348d064ccd..3d4251aeb85 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx @@ -79,7 +79,7 @@ const StyledVisibleItem = styled.span` const StyledTooltipItem = styled.div` .link { - color: ${({ theme }) => theme.colors.grayscale.light5}; + color: ${({ theme }) => theme.colorTextTertiary}; display: block; text-decoration: underline; } diff --git a/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx b/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx index d639f89d527..288f1f6dbe5 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx +++ b/superset-frontend/packages/superset-ui-core/src/theme/Theme.test.tsx @@ -58,8 +58,9 @@ describe('Theme', () => { // Verify default font family is set expect(theme.theme.fontFamily).toContain('Inter'); - // Verify the theme is initialized with colors - expect(theme.theme.colors).toBeDefined(); + // Verify the theme is initialized with semantic color tokens + expect(theme.theme.colorText).toBeDefined(); + expect(theme.theme.colorBgBase).toBeDefined(); }); it('creates a theme with custom tokens when provided', () => { 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 4b2431a26fa..3d220414559 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx +++ b/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx @@ -43,7 +43,6 @@ import { } from '@emotion/react'; import createCache from '@emotion/cache'; import { noop } from 'lodash'; -import { isThemeDark } from './utils/themeUtils'; import { GlobalStyles } from './GlobalStyles'; import { @@ -53,15 +52,9 @@ import { SupersetTheme, allowedAntdTokens, SharedAntdTokens, - DeprecatedThemeColors, } from './types'; -import { - normalizeThemeConfig, - serializeThemeConfig, - getSystemColors, - getDeprecatedColors, -} from './utils'; +import { normalizeThemeConfig, serializeThemeConfig } from './utils'; /* eslint-disable theme-colors/no-literal-colors */ @@ -166,15 +159,8 @@ export class Theme { ...Theme.defaultTokens, ...antdConfig.token, // Passing through the extra, superset-specific tokens ...tokens, - colors: {} as DeprecatedThemeColors, // Placeholder that will be filled in the second phase }; - // Second phase: Now that theme is initialized, we can determine if it's dark - // and generate the legacy colors correctly - const systemColors = getSystemColors(tokens); - const isDark = isThemeDark(this.theme); // Use utility function with theme - this.theme.colors = getDeprecatedColors(systemColors, isDark); - // Update the providers with the fully formed theme this.updateProviders( this.theme, diff --git a/superset-frontend/packages/superset-ui-core/src/theme/types.ts b/superset-frontend/packages/superset-ui-core/src/theme/types.ts index ec260dafc91..39dfc4d6717 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/types.ts +++ b/superset-frontend/packages/superset-ui-core/src/theme/types.ts @@ -108,36 +108,6 @@ export interface ColorVariants { textActive: string; } -export interface DeprecatedColorVariations { - base: string; - light1: string; - light2: string; - light3: string; - light4: string; - light5: string; - dark1: string; - dark2: string; - dark3: string; - dark4: string; - dark5: string; -} - -export interface DeprecatedThemeColors { - primary: DeprecatedColorVariations; - error: DeprecatedColorVariations; - warning: DeprecatedColorVariations; - success: DeprecatedColorVariations; - info: DeprecatedColorVariations; - grayscale: DeprecatedColorVariations; -} - -export interface LegacySupersetTheme { - // Old colors structure with light/dark semantics still heavily referenced in code base - // TODO: replace/realign with antd-type tokens - colors: DeprecatedThemeColors; - transitionTiming: number; -} - export interface SupersetSpecificTokens { // Font-related fontSizeXS: string; @@ -391,10 +361,8 @@ export type AllowedAntdTokenKeys = Extract< export type SharedAntdTokens = Pick; -/** The final shape for our custom theme object, combining old theme + shared antd + superset specifics. */ -export type SupersetTheme = LegacySupersetTheme & - SharedAntdTokens & - SupersetSpecificTokens; +/** The final shape for our custom theme object, combining shared antd + superset specifics. */ +export type SupersetTheme = SharedAntdTokens & SupersetSpecificTokens; export interface ThemeStorage { getItem(key: string): string | null; diff --git a/superset-frontend/packages/superset-ui-core/src/theme/utils.test.ts b/superset-frontend/packages/superset-ui-core/src/theme/utils.test.ts index 7e810337c64..dc9e1b938b7 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/utils.test.ts +++ b/superset-frontend/packages/superset-ui-core/src/theme/utils.test.ts @@ -24,8 +24,6 @@ import { normalizeThemeConfig, getAntdConfig, getSystemColors, - getDeprecatedColors, - genDeprecatedColorVariations, } from './utils'; import { type AnyThemeConfig, @@ -34,17 +32,6 @@ import { ThemeAlgorithm, } from './types'; -// Mock tinycolor2 for consistent testing -jest.mock('tinycolor2', () => { - const mockMix = jest.fn().mockImplementation(() => ({ - toHexString: jest.fn().mockReturnValue('#mixed-color'), - })); - - return { - mix: mockMix, - }; -}); - describe('Theme utilities', () => { describe('isSerializableConfig', () => { it('returns true when algorithm is undefined', () => { @@ -362,43 +349,4 @@ describe('Theme utilities', () => { }); }); }); - - describe('genDeprecatedColorVariations', () => { - it('generates color variations for light mode', () => { - const result = genDeprecatedColorVariations('#base-color', false); - - expect(result.base).toBe('#base-color'); - expect(result.light1).toBe('#mixed-color'); - expect(result.dark1).toBe('#mixed-color'); - }); - - it('generates color variations for dark mode', () => { - const result = genDeprecatedColorVariations('#base-color', true); - - expect(result.base).toBe('#base-color'); - expect(result.light1).toBe('#mixed-color'); - expect(result.dark1).toBe('#mixed-color'); - }); - }); - - describe('getDeprecatedColors', () => { - it('generates deprecated colors from system colors', () => { - const systemColors = { - colorPrimary: '#primary', - colorError: '#error', - colorWarning: '#warning', - colorSuccess: '#success', - colorInfo: '#info', - }; - - const result = getDeprecatedColors(systemColors, false); - - expect(result.primary.base).toBe('#primary'); - expect(result.error.base).toBe('#error'); - expect(result.warning.base).toBe('#warning'); - expect(result.success.base).toBe('#success'); - expect(result.info.base).toBe('#info'); - expect(result.grayscale.base).toBe('#666'); - }); - }); }); diff --git a/superset-frontend/packages/superset-ui-core/src/theme/utils.ts b/superset-frontend/packages/superset-ui-core/src/theme/utils.ts index ae5c9758954..b8ce580ea7b 100644 --- a/superset-frontend/packages/superset-ui-core/src/theme/utils.ts +++ b/superset-frontend/packages/superset-ui-core/src/theme/utils.ts @@ -17,13 +17,10 @@ * under the License. */ import { theme as antdThemeImport } from 'antd'; -import tinycolor from 'tinycolor2'; import { type AntdThemeConfig, type AnyThemeConfig, type SerializableThemeConfig, - type DeprecatedColorVariations, - type DeprecatedThemeColors, type SystemColors, type SupersetTheme, ThemeAlgorithm, @@ -144,50 +141,6 @@ export function getAntdConfig( }; } -/** - * Generate deprecated color variations from a base color - */ -export function genDeprecatedColorVariations( - color: string, - isDark: boolean, -): DeprecatedColorVariations { - const bg = isDark ? '#FFF' : '#000'; - const fg = isDark ? '#000' : '#FFF'; - const adjustColor = (c: string, perc: number, tgt: string): string => - tinycolor.mix(c, tgt, perc).toHexString(); - return { - base: color, - light1: adjustColor(color, 20, fg), - light2: adjustColor(color, 45, fg), - light3: adjustColor(color, 70, fg), - light4: adjustColor(color, 90, fg), - light5: adjustColor(color, 95, fg), - dark1: adjustColor(color, 10, bg), - dark2: adjustColor(color, 20, bg), - dark3: adjustColor(color, 40, bg), - dark4: adjustColor(color, 60, bg), - dark5: adjustColor(color, 80, bg), - }; -} - -/** - * Generate deprecated theme colors from system colors - */ -export function getDeprecatedColors( - systemColors: SystemColors, - isDark: boolean, -): DeprecatedThemeColors { - const sc: SystemColors = systemColors; - return { - primary: genDeprecatedColorVariations(sc.colorPrimary, isDark), - error: genDeprecatedColorVariations(sc.colorError, isDark), - warning: genDeprecatedColorVariations(sc.colorWarning, isDark), - success: genDeprecatedColorVariations(sc.colorSuccess, isDark), - info: genDeprecatedColorVariations(sc.colorInfo, isDark), - grayscale: genDeprecatedColorVariations('#666', isDark), - }; -} - /** * Extract system colors from Ant Design tokens */ diff --git a/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx b/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx index 5e1d20386f5..24d33277031 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/shared/components/ResizableChartDemo.tsx @@ -24,7 +24,7 @@ import { ResizeCallbackData } from 'react-resizable'; import ResizablePanel, { Size } from './ResizablePanel'; export const SupersetBody = styled.div` - background: ${({ theme }) => theme.colors.grayscale.light4}; + background: ${({ theme }) => theme.colorBgLayout}; padding: 16px; min-height: 100%; diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMap.stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMap.stories.tsx index 581a9976d7f..31f26840db7 100644 --- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMap.stories.tsx +++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map/CountryMap.stories.tsx @@ -84,7 +84,7 @@ export const BasicCountryMapStory = ( return (
{ .d3-tip { line-height: 1; padding: ${theme.sizeUnit * 3}px; - background: ${theme.colors.grayscale.dark2}; - color: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgElevated}; + color: ${theme.colorTextLightSolid}; border-radius: 4px; pointer-events: none; z-index: 1000; @@ -46,7 +46,7 @@ const Calendar = ({ className, ...otherProps }) => { font-size: ${theme.fontSizeXS}; width: 100%; line-height: 1; - color: ${theme.colors.grayscale.dark2}; + color: ${theme.colorBgElevated}; position: absolute; pointer-events: none; } @@ -112,8 +112,8 @@ export default styled(Calendar)` .superset-legacy-chart-calendar .d3-tip { line-height: 1; padding: ${theme.sizeUnit * 3}px; - background: ${theme.colors.grayscale.dark2}; - color: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgElevated}; + color: ${theme.colorTextLightSolid}; border-radius: ${theme.borderRadius}px; pointer-events: none; z-index: 1000; @@ -124,7 +124,7 @@ export default styled(Calendar)` } .cal-heatmap-container .graph-label { - fill: ${theme.colors.grayscale.base}; + fill: ${theme.colorTextTertiary}; font-size: ${theme.fontSizeXS}px; } @@ -134,11 +134,11 @@ export default styled(Calendar)` } .cal-heatmap-container .graph-rect { - fill: ${theme.colors.grayscale.light2}; + fill: ${theme.colorBorder}; } .cal-heatmap-container .graph-subdomain-group rect:hover { - stroke: ${theme.colors.grayscale.dark2}; + stroke: ${theme.colorBgElevated}; stroke-width: 1px; } @@ -152,23 +152,23 @@ export default styled(Calendar)` } .cal-heatmap-container .qi { - background-color: ${theme.colors.grayscale.base}; - fill: ${theme.colors.grayscale.base}; + background-color: ${theme.colorTextTertiary}; + fill: ${theme.colorTextTertiary}; } .cal-heatmap-container .q1 { - background-color: ${theme.colors.warning.light2}; - fill: ${theme.colors.warning.light2}; + background-color: ${theme.colorWarningBg}; + fill: ${theme.colorWarningBg}; } .cal-heatmap-container .q2 { - background-color: ${theme.colors.warning.light1}; - fill: ${theme.colors.warning.light1}; + background-color: ${theme.colorWarning}; + fill: ${theme.colorWarning}; } .cal-heatmap-container .q3 { - background-color: ${theme.colors.success.light1}; - fill: ${theme.colors.success.light1}; + background-color: ${theme.colorSuccess}; + fill: ${theme.colorSuccess}; } .cal-heatmap-container .q4 { @@ -177,8 +177,8 @@ export default styled(Calendar)` } .cal-heatmap-container .q5 { - background-color: ${theme.colors.success.dark1}; - fill: ${theme.colors.success.dark1}; + background-color: ${theme.colorSuccessActive}; + fill: ${theme.colorSuccessActive}; } .cal-heatmap-container rect.highlight { @@ -207,7 +207,7 @@ export default styled(Calendar)` .ch-tooltip { padding: ${theme.sizeUnit * 2}px; background: ${theme.colorText}; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextLightSolid}; font-size: ${theme.fontSizeSM}px; line-height: 1.4; width: 140px; @@ -215,7 +215,7 @@ export default styled(Calendar)` z-index: 99999; text-align: center; border-radius: ${theme.borderRadius}px; - box-shadow: 2px 2px 2px ${theme.colors.grayscale.dark2}; + box-shadow: 2px 2px 2px ${theme.colorBorder}; display: none; box-sizing: border-box; } diff --git a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx index b857b360408..ba8f06eaebf 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-country-map/src/ReactCountryMap.jsx @@ -30,7 +30,7 @@ const CountryMap = ({ className, ...otherProps }) => ( export default styled(CountryMap)` ${({ theme }) => ` .superset-legacy-chart-country-map svg { - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgContainer}; } .superset-legacy-chart-country-map { @@ -38,13 +38,13 @@ export default styled(CountryMap)` } .superset-legacy-chart-country-map .background { - fill: ${theme.colors.grayscale.light5}; + fill: ${theme.colorBgContainer}; pointer-events: all; } .superset-legacy-chart-country-map .map-layer { - fill: ${theme.colors.grayscale.light5}; - stroke: ${theme.colors.grayscale.light1}; + fill: ${theme.colorBgContainer}; + stroke: ${theme.colorBorderSecondary}; } .superset-legacy-chart-country-map .effect-layer { @@ -69,7 +69,7 @@ export default styled(CountryMap)` .superset-legacy-chart-country-map path.region { cursor: pointer; - stroke: ${theme.colors.grayscale.light2}; + stroke: ${theme.colorSplit}; } `} `; diff --git a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx index 05b4b6e9aac..e78dafd509b 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx @@ -65,7 +65,7 @@ const StyledDiv = styled.div` } .superset-legacy-chart-horizon .horizon-row { - border-bottom: solid 1px ${theme.colors.grayscale.light2}; + border-bottom: solid 1px ${theme.colorBorderSecondary}; border-top: 0; padding: 0; margin: 0; diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx index f15a85f4476..8d716043918 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx @@ -70,7 +70,7 @@ const StyledDiv = styled.div` } .reactable-data tr:hover { - background-color: ${theme.colors.grayscale.light3}; + background-color: ${theme.colorFillTertiary}; } .reactable-data tr .false { @@ -90,14 +90,14 @@ const StyledDiv = styled.div` } .reactable-data .control td { - background-color: ${theme.colors.grayscale.light3}; + background-color: ${theme.colorFillTertiary}; } .reactable-header-sortable:hover, .reactable-header-sortable:focus, .reactable-header-sort-asc, .reactable-header-sort-desc { - background-color: ${theme.colors.grayscale.light3}; + background-color: ${theme.colorFillTertiary}; position: relative; } diff --git a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx index 740d4043df6..f6e4ba890f4 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx @@ -39,7 +39,7 @@ export default styled(ParallelCoordinates)` overflow: auto; div.row { &:hover { - background-color: ${theme.colors.grayscale.light2}; + background-color: ${theme.colorBgTextHover}; } } } @@ -62,14 +62,14 @@ export default styled(ParallelCoordinates)` fill: transparent; } .parcoords rect.background:hover { - fill: ${addAlpha(theme.colors.grayscale.base, 0.2)}; + fill: ${addAlpha(theme.colorBorder, 0.2)}; } .parcoords .resize rect { - fill: ${addAlpha(theme.colors.grayscale.dark2, 0.1)}; + fill: ${addAlpha(theme.colorText, 0.1)}; } .parcoords rect.extent { - fill: ${addAlpha(theme.colors.grayscale.light5, 0.25)}; - stroke: ${addAlpha(theme.colors.grayscale.dark2, 0.6)}; + fill: ${addAlpha(theme.colorBgContainer, 0.25)}; + stroke: ${addAlpha(theme.colorText, 0.6)}; } .parcoords .axis line, .parcoords .axis path { @@ -93,7 +93,7 @@ export default styled(ParallelCoordinates)` -moz-user-select: none; -ms-user-select: none; user-select: none; - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgContainer}; } /* data table styles */ @@ -106,7 +106,7 @@ export default styled(ParallelCoordinates)` margin: 0px; } .parcoords .row:nth-of-type(odd) { - background: ${addAlpha(theme.colors.grayscale.dark2, 0.05)}; + background: ${addAlpha(theme.colorText, 0.05)}; } .parcoords .header { font-weight: ${theme.fontWeightStrong}; diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx index 538c67fa9eb..c55d00b4a94 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx @@ -40,8 +40,8 @@ export default styled(Partition)` } .superset-legacy-chart-partition rect { - stroke: ${theme.colors.grayscale.light2}; - fill: ${theme.colors.grayscale.light1}; + stroke: ${theme.borderColorSecondary}; + fill: ${theme.colorBgLayout}; fill-opacity: 80%; transition: fill-opacity 180ms linear; cursor: pointer; @@ -57,7 +57,7 @@ export default styled(Partition)` } .superset-legacy-chart-partition g:hover text { - fill: ${theme.colors.grayscale.dark2}; + fill: ${theme.colorTextHeading}; } .superset-legacy-chart-partition .partition-tooltip { @@ -67,14 +67,14 @@ export default styled(Partition)` opacity: 0; padding: ${theme.sizeUnit}px; pointer-events: none; - background-color: ${theme.colors.grayscale.dark2}; + background-color: ${theme.colorBgElevated}; border-radius: ${theme.borderRadius}px; } .partition-tooltip td { padding-left: ${theme.sizeUnit}px; font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorTextSecondary}; } `} `; diff --git a/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx b/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx index b7a2c0c800b..2a9a1fc590d 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-rose/src/ReactRose.jsx @@ -29,8 +29,8 @@ const Rose = ({ className, ...otherProps }) => ( .tooltip { line-height: 1; padding: ${theme.sizeUnit * 3}px; - background: ${theme.colors.grayscale.dark2}; - color: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgElevated}; + color: ${theme.colorText}; border-radius: 4px; pointer-events: none; z-index: 1000; @@ -46,7 +46,7 @@ export default styled(Rose)` ${({ theme }) => ` .superset-legacy-chart-rose path { transition: fill-opacity 180ms linear; - stroke: ${theme.colors.grayscale.light5}; + stroke: ${theme.colorBorder}; stroke-width: 1px; stroke-opacity: 1; fill-opacity: 0.75; diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx index b9459598e4f..6343e59fb5d 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/ReactWorldMap.jsx @@ -39,7 +39,7 @@ export default styled(WorldMapComponent)` .superset-legacy-chart-world-map { position: relative; svg { - background-color: ${({ theme }) => theme.colors.grayscale.light5}; + background-color: ${({ theme }) => theme.colorBgLayout}; } } .hoverinfo { diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index 2ec81a62d3d..2fd9e5f6a47 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -203,14 +203,14 @@ function WorldMap(element, props) { height, data: processedData, fills: { - defaultFill: theme.colors.grayscale.light2, + defaultFill: theme.colorBorder, }, geographyConfig: { popupOnHover: !inContextMenu, highlightOnHover: !inContextMenu, borderWidth: 1, borderColor: theme.colorSplit, - highlightBorderColor: theme.colors.grayscale.light5, + highlightBorderColor: theme.colorIcon, highlightFillColor: color, highlightBorderWidth: 1, popupTemplate: (geo, d) => @@ -232,7 +232,7 @@ function WorldMap(element, props) { animate: true, highlightOnHover: !inContextMenu, highlightFillColor: color, - highlightBorderColor: theme.colors.grayscale.dark2, + highlightBorderColor: theme.colorTextSecondary, highlightBorderWidth: 2, highlightBorderOpacity: 1, highlightFillOpacity: 0.85, diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx index 42492895418..137da24fd37 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Legend.tsx @@ -27,8 +27,8 @@ const StyledLegend = styled.div` ${({ theme }) => ` font-size: ${theme.fontSizeSM}px; position: absolute; - background: ${theme.colors.grayscale.light5}; - box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colors.grayscale.light2}; + background: ${theme.colorBgElevated}; + box-shadow: 0 0 ${theme.sizeUnit}px ${theme.colorBorderSecondary}; margin: ${theme.sizeUnit * 6}px; padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 5}px; outline: none; @@ -42,7 +42,7 @@ const StyledLegend = styled.div` & li a { display: flex; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; text-decoration: none; padding: ${theme.sizeUnit}px 0; diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx index 7b58d087458..096d2edcd62 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx +++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/components/Tooltip.tsx @@ -38,8 +38,8 @@ const StyledDiv = styled.div<{ top: number; left: number }>` left: ${left}px; padding: ${theme.sizeUnit * 2}px; margin: ${theme.sizeUnit * 2}px; - background: ${theme.colors.grayscale.dark2}; - color: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgElevated}; + color: ${theme.colorText}; maxWidth: 300px; fontSize: ${theme.fontSizeSM}px; zIndex: 9; diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx index 35cada7e4dd..70d49f3db3e 100644 --- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx +++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/ReactNVD3.jsx @@ -164,15 +164,15 @@ export default styled(NVD3)` .d3-tip.nv-event-annotation-layer-NATIVE { width: 200px; border-radius: 2px; - background-color: ${({ theme }) => theme.colors.grayscale.base}; + background-color: ${({ theme }) => theme.colorBgContainer}; fill-opacity: 0.6; margin: ${({ theme }) => theme.sizeUnit * 2}px; padding: ${({ theme }) => theme.sizeUnit * 2}px; - color: ${({ theme }) => theme.colors.grayscale.light5}; + color: ${({ theme }) => theme.colorTextLightSolid}; &:after { content: '\\25BC'; font-size: ${({ theme }) => theme.fontSize}; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; position: absolute; bottom: -14px; left: 94px; diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx index 8757614bc9b..c67829cb5e2 100644 --- a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx +++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx @@ -130,13 +130,13 @@ export const MenuContainer = styled.div` gap: ${theme.sizeUnit * 2}px; &:hover { - background-color: ${theme.colors.primary.light4}; + background-color: ${theme.colorPrimaryBgHover}; } } .menu-divider { height: 1px; - background-color: ${theme.colors.grayscale.light2}; + background-color: ${theme.colorBorderSecondary}; margin: ${theme.sizeUnit}px 0; } `} @@ -165,12 +165,12 @@ export const PopoverContainer = styled.div` export const PaginationContainer = styled.div` ${({ theme }) => ` - border: 1px solid ${theme.colors.grayscale.light2}; + border: 1px solid ${theme.colorBorderSecondary}; display: flex; align-items: center; justify-content: flex-end; padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px; - border-top: 1px solid ${theme.colors.grayscale.light2}; + border-top: 1px solid ${theme.colorBorderSecondary}; font-size: ${theme.fontSize}px; color: ${theme.colorTextBase}; transform: translateY(-${theme.sizeUnit}px); @@ -222,7 +222,7 @@ export const PageButton = styled.div<{ disabled?: boolean }>` svg { height: ${theme.sizeUnit * 3}px; width: ${theme.sizeUnit * 3}px; - fill: ${disabled ? theme.colors.grayscale.light1 : theme.colors.grayscale.dark2}; + fill: ${disabled ? theme.colorTextQuaternary : theme.colorTextSecondary}; } `} `; @@ -239,14 +239,14 @@ export const InfoText = styled.div` max-width: 242px; ${({ theme }) => ` padding: 0 ${theme.sizeUnit * 2}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextBase}; font-size: ${theme.fontSizeSM}px; `} `; export const ColumnLabel = styled.span` ${({ theme }) => ` - color: ${theme.colors.grayscale.dark2}; + color: ${theme.colorTextLabel}; `} `; @@ -292,7 +292,7 @@ export const StyledChartContainer = styled.div<{ } .dt-is-active-filter { - background: ${theme.colors.primary.light3}; + background: ${theme.colorPrimaryBg}; :hover { background-color: ${theme.colorPrimaryBgHover}; } @@ -386,7 +386,7 @@ export const StyledChartContainer = styled.div<{ .input-wrapper svg { pointer-events: none; transform: translate(${theme.sizeUnit * 7}px, ${theme.sizeUnit / 2}px); - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextBase}; } .input-wrapper input { @@ -396,16 +396,16 @@ export const StyledChartContainer = styled.div<{ ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 8}px; line-height: 1.8; border-radius: ${theme.borderRadius}px; - border: 1px solid ${theme.colors.grayscale.light2}; + border: 1px solid ${theme.colorBorderSecondary}; background-color: transparent; outline: none; &:focus { - border-color: ${theme.colors.primary.base}; + border-color: ${theme.colorPrimary}; } &::placeholder { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextQuaternary}; } } `} diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx index 56a47a2315b..8df356fdfd5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx @@ -169,7 +169,7 @@ export default function PopKPI(props: PopKPIProps) { const getArrowIndicatorColor = () => { if (!comparisonColorEnabled || percentDifferenceNumber === 0) { - return theme.colors.grayscale.base; + return theme.colorTextTertiary; } if (percentDifferenceNumber > 0) { @@ -190,7 +190,7 @@ export default function PopKPI(props: PopKPIProps) { `; const defaultBackgroundColor = theme.colorBgContainer; - const defaultTextColor = theme.colors.grayscale.base; + const defaultTextColor = theme.colorTextTertiary; const { backgroundColor, textColor } = useMemo(() => { let bgColor = defaultBackgroundColor; let txtColor = defaultTextColor; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index 124aa495227..2e172448d65 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts @@ -25,6 +25,7 @@ import { getXAxisLabel, Metric, getValueFormatter, + supersetTheme, t, tooltipHtml, } from '@superset-ui/core'; @@ -78,7 +79,6 @@ export default function transformProps( queriesData, formData, rawFormData, - theme, hooks, inContextMenu, datasource: { currencyFormats = {}, columnFormats = {} }, @@ -281,7 +281,7 @@ export default function transformProps( }, { offset: 1, - color: theme.colors.grayscale.light5, + color: supersetTheme.colorBgContainer, }, ]), }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts index a4d5c604844..ea1b52f92c1 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts @@ -176,9 +176,9 @@ export default function transformProps( }, emphasis: { itemStyle: { - borderColor: supersetTheme.colors.grayscale.light5, + borderColor: supersetTheme.colorBgContainer, shadowBlur: 10, - shadowColor: supersetTheme.colors.grayscale.dark2, + shadowColor: supersetTheme.colorTextBase, }, }, }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 74f40a7f0c6..3a1f01f5f6b 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -424,7 +424,7 @@ export function transformIntervalAnnotation( const intervalLabel: SeriesLabelOption = showLabel ? { show: true, - color: theme.colors.grayscale.dark2, + color: theme.colorTextLabel, position: 'insideTop', verticalAlign: 'top', fontWeight: 'bold', @@ -432,19 +432,19 @@ export function transformIntervalAnnotation( emphasis: { position: 'insideTop', verticalAlign: 'top', - backgroundColor: theme.colors.grayscale.light5, + backgroundColor: theme.colorPrimaryBgHover, }, } : { show: false, - color: theme.colors.grayscale.dark2, + color: theme.colorTextLabel, // @ts-ignore emphasis: { fontWeight: 'bold', show: true, position: 'insideTop', verticalAlign: 'top', - backgroundColor: theme.colors.grayscale.light5, + backgroundColor: theme.colorPrimaryBgHover, }, }; series.push({ @@ -505,25 +505,25 @@ export function transformEventAnnotation( const eventLabel: SeriesLineLabelOption = showLabel ? { show: true, - color: theme.colors.grayscale.dark2, + color: theme.colorTextLabel, position: 'insideEndTop', fontWeight: 'bold', formatter: (params: CallbackDataParams) => params.name, // @ts-ignore emphasis: { - backgroundColor: theme.colors.grayscale.light5, + backgroundColor: theme.colorPrimaryBgHover, }, } : { show: false, - color: theme.colors.grayscale.dark2, + color: theme.colorTextLabel, position: 'insideEndTop', // @ts-ignore emphasis: { formatter: (params: CallbackDataParams) => params.name, fontWeight: 'bold', show: true, - backgroundColor: theme.colors.grayscale.light5, + backgroundColor: theme.colorPrimaryBgHover, }, }; diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx index 66f0b9429c4..c2a3f22b3ec 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx @@ -64,12 +64,12 @@ const METRIC_KEY = t('Metric'); const vals = ['value']; const StyledPlusSquareOutlined = styled(PlusSquareOutlined)` - stroke: ${({ theme }) => theme.colors.grayscale.light2}; + stroke: ${({ theme }) => theme.colorBorderSecondary}; stroke-width: 16px; `; const StyledMinusSquareOutlined = styled(MinusSquareOutlined)` - stroke: ${({ theme }) => theme.colors.grayscale.light2}; + stroke: ${({ theme }) => theme.colorBorderSecondary}; stroke-width: 16px; `; diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js index 2af50216ad7..86dd63f4f6e 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js @@ -62,7 +62,7 @@ export const Styles = styled.div` table.pvtTable thead th.pvtSubtotalLabel, table.pvtTable tbody tr:last-of-type th, table.pvtTable tbody tr:last-of-type td { - border-bottom: 1px solid ${theme.colors.grayscale.light2}; + border-bottom: 1px solid ${theme.colorSplit}; } table.pvtTable @@ -77,7 +77,7 @@ export const Styles = styled.div` table.pvtTable tbody tr td:last-of-type, table.pvtTable thead tr th:last-of-type:not(.pvtSubtotalLabel) { - border-right: 1px solid ${theme.colors.grayscale.light2}; + border-right: 1px solid ${theme.colorSplit}; } table.pvtTable @@ -104,9 +104,9 @@ export const Styles = styled.div` table.pvtTable tbody tr td { color: ${theme.colorPrimaryText}; padding: ${theme.sizeUnit}px; - background-color: ${theme.colors.grayscale.light5}; - border-top: 1px solid ${theme.colors.grayscale.light2}; - border-left: 1px solid ${theme.colors.grayscale.light2}; + background-color: ${theme.colorBgBase}; + border-top: 1px solid ${theme.colorSplit}; + border-left: 1px solid ${theme.colorSplit}; vertical-align: top; text-align: right; } diff --git a/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx b/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx index d634e06a594..11b2fe2179b 100644 --- a/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx +++ b/superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx @@ -106,7 +106,7 @@ class WordCloud extends PureComponent { text: 'Text', }, defaultEncoding: { - color: { value: this.props.theme.colors.grayscale.dark2 }, + color: { value: this.props.theme.colorTextLabel }, fontFamily: { value: this.props.theme.fontFamily }, fontSize: { value: 20 }, fontWeight: { value: 'bold' }, diff --git a/superset-frontend/src/SqlLab/components/QueryTable/styles.ts b/superset-frontend/src/SqlLab/components/QueryTable/styles.ts index 03f0eb3e679..198733de44d 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/styles.ts +++ b/superset-frontend/src/SqlLab/components/QueryTable/styles.ts @@ -33,7 +33,7 @@ export const verticalAlign = css` export const StyledTooltip = styled(IconTooltip)` padding-right: ${({ theme }) => theme.sizeUnit * 2}px; span { - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; &: hover { color: ${({ theme }) => theme.colorPrimary}; } diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx index dec0de19da8..82782e59f5e 100644 --- a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx +++ b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx @@ -65,7 +65,7 @@ const Styles = styled.span` span[role='img']:not([aria-label='down']) { display: flex; margin: 0; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; svg { vertical-align: -${({ theme }) => theme.sizeUnit * 1.25}px; margin: 0; diff --git a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx index 1f4f5c36912..e78977d1aca 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx @@ -125,7 +125,7 @@ const SqlEditorTabHeader: FC = ({ queryEditor }) => { [QueryState.TimedOut]: theme.colorError, }; - return statusColors[state] || theme.colors.grayscale.light2; + return statusColors[state] || theme.colorIcon; }; return ( diff --git a/superset-frontend/src/components/Chart/Chart.tsx b/superset-frontend/src/components/Chart/Chart.tsx index b9cfd4bd190..8e6de71c66b 100644 --- a/superset-frontend/src/components/Chart/Chart.tsx +++ b/superset-frontend/src/components/Chart/Chart.tsx @@ -165,7 +165,7 @@ const MessageSpan = styled.span` text-align: center; margin: ${({ theme }) => theme.sizeUnit * 4}px auto; width: fit-content; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; `; class Chart extends PureComponent { diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx index 20c65effed3..7bc4bb22420 100644 --- a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx +++ b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx @@ -286,11 +286,7 @@ const ChartContextMenu = ( {t('Add cross-filter')}
)} diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx index b507cd6848f..e6a3f112cc9 100644 --- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx +++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx @@ -123,7 +123,7 @@ export default function TableControls({ > theme.colors.grayscale.light1}; + box-shadow: 0 0 4px ${({ theme }) => theme.colorBorderSecondary}; } } `; diff --git a/superset-frontend/src/components/ListView/CrossLinks.tsx b/superset-frontend/src/components/ListView/CrossLinks.tsx index d0bbcc03e86..dcf2c2f00f3 100644 --- a/superset-frontend/src/components/ListView/CrossLinks.tsx +++ b/superset-frontend/src/components/ListView/CrossLinks.tsx @@ -53,7 +53,7 @@ const StyledCrossLinks = styled.div` .count { cursor: pointer; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextSecondary}; font-weight: ${theme.fontWeightStrong}; } } diff --git a/superset-frontend/src/components/ListView/CrossLinksTooltip.tsx b/superset-frontend/src/components/ListView/CrossLinksTooltip.tsx index 52517869ab7..ffde1da90cb 100644 --- a/superset-frontend/src/components/ListView/CrossLinksTooltip.tsx +++ b/superset-frontend/src/components/ListView/CrossLinksTooltip.tsx @@ -30,7 +30,7 @@ export type CrossLinksTooltipProps = { const StyledLinkedTooltip = styled.div` .link { - color: ${({ theme }) => theme.colors.grayscale.light5}; + color: ${({ theme }) => theme.colorLink}; display: block; text-decoration: underline; } diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx index 355709d284c..cad88f97407 100644 --- a/superset-frontend/src/components/ListView/Filters/Search.tsx +++ b/superset-frontend/src/components/ListView/Filters/Search.tsx @@ -96,10 +96,7 @@ function SearchFilter( onPressEnter={handleSubmit} onBlur={handleSubmit} prefix={ - + } /> diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index 732c87fc2d2..bdb215770b3 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -88,7 +88,7 @@ const ListViewStyles = styled.div` .row-count-container { margin-top: ${theme.sizeUnit * 2}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; } `} `; @@ -160,7 +160,7 @@ const ViewModeContainer = styled.div` } .active { - background-color: ${theme.colors.grayscale.base}; + background-color: ${theme.colorText}; svg { color: ${theme.colorBgLayout}; diff --git a/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx b/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx index f1e06262e20..1de0e159786 100644 --- a/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx +++ b/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx @@ -63,7 +63,7 @@ const StyledToastPresenter = styled.div( } .toast > button { - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorTextLightSolid}; opacity: 1; } diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx index a557a7c0339..c53063f93ae 100644 --- a/superset-frontend/src/components/TableSelector/index.tsx +++ b/superset-frontend/src/components/TableSelector/index.tsx @@ -68,7 +68,7 @@ const TableSelectorWrapper = styled.div` } .table-length { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; } .select { diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx index d684456a98c..6e981105376 100644 --- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx +++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx @@ -96,7 +96,7 @@ const MetadataItem: FC<{ css` margin-right: ${theme.sizeUnit * 4}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; `} > {label} @@ -214,7 +214,7 @@ const AddSliceCard: FC<{ color: ${theme.colorText}; &:hover { - //background: ${theme.colors.grayscale.light4}; + //background: ${theme.colorFillTertiary}; } opacity: ${isSelected ? 0.4 : 'unset'}; diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx index e279d3e35a4..e8ff251d81b 100644 --- a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx +++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx @@ -53,7 +53,7 @@ const BuilderComponentPane = ({ topOffset = 0 }) => ( position: absolute; height: 100%; width: ${BUILDER_PANE_WIDTH}px; - box-shadow: -4px 0 4px 0 ${rgba(theme.colors.grayscale.dark2, 0.1)}; + box-shadow: -4px 0 4px 0 ${rgba(theme.colorBorder, 0.1)}; background-color: ${theme.colorBgBase}; `} > diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index 5be93425bdd..19215399dd1 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -140,7 +140,7 @@ const DashboardContentWrapper = styled.div` /* drop shadow for top-level tabs only */ & .dashboard-component-tabs { box-shadow: 0 ${theme.sizeUnit}px ${theme.sizeUnit}px 0 - ${addAlpha(theme.colors.grayscale.dark2, 0.1)}; + ${addAlpha(theme.colorBorderSecondary, 0.1)}; padding-left: ${theme.sizeUnit * 2}px; /* note this is added to tab-level padding, to match header */ } diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx index 65e44e33bf0..4d5190e79df 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx @@ -44,8 +44,8 @@ const StyledDiv = styled.div` } & .empty-droptarget:before { display: block; - border-color: ${theme.colors.primary.light1}; - background-color: ${theme.colors.primary.light3}; + border-color: ${theme.colorPrimary}; + background-color: ${theme.colorPrimaryBg}; } & .grid-row:after { border-style: hidden; diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx index 69ee0bbfb7b..40b4da99c92 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx @@ -175,7 +175,7 @@ const DetailsPanelPopover = ({ return ( css` display: flex; - color: ${theme.colors.grayscale.light5}; - background: ${theme.colors.grayscale.base}; + color: ${theme.colorBgBase}; + background: ${theme.colorText}; border-radius: 1em; vertical-align: text-top; padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px; @@ -36,7 +36,7 @@ export const Pill = styled.div` svg { position: relative; - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorBgBase}; width: 1em; height: 1em; display: inline-block; @@ -115,7 +115,7 @@ export const FiltersDetailsContainer = styled.div` max-width: 300px; overflow-x: hidden; - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorBgBase}; `} `; @@ -129,7 +129,7 @@ export const Separator = styled.div` ${({ theme }) => css` width: 100%; height: 1px; - background-color: ${theme.colors.grayscale.light1}; + background-color: ${theme.colorBorderSecondary}; margin: ${theme.sizeUnit * 4}px 0; `} `; diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx index 319484642bb..6829ff7eb24 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx +++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx @@ -63,14 +63,14 @@ const StyledFilterCount = styled.div` margin-right: ${theme.sizeUnit}px; padding-left: ${theme.sizeUnit * 2}px; padding-right: ${theme.sizeUnit * 2}px; - background: ${theme.colors.grayscale.light4}; + background: ${theme.colorBgContainer}; border-radius: 4px; height: 100%; .anticon { vertical-align: middle; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIcon}; &:hover { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorIconHover}; } } diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx index bcec8ee6484..2df789fcb01 100644 --- a/superset-frontend/src/dashboard/components/Header/index.jsx +++ b/superset-frontend/src/dashboard/components/Header/index.jsx @@ -130,18 +130,18 @@ const StyledUndoRedoButton = styled(Button)` `; const undoRedoStyle = theme => css` - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorIcon}; &:hover { - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIconHover}; } `; const undoRedoEmphasized = theme => css` - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIcon}; `; const undoRedoDisabled = theme => css` - color: ${theme.colors.grayscale.light2}; + color: ${theme.colorTextDisabled}; `; const saveBtnStyle = theme => css` diff --git a/superset-frontend/src/dashboard/components/IconButton.tsx b/superset-frontend/src/dashboard/components/IconButton.tsx index d5c3d3059f8..9e5b9c96e4e 100644 --- a/superset-frontend/src/dashboard/components/IconButton.tsx +++ b/superset-frontend/src/dashboard/components/IconButton.tsx @@ -29,7 +29,7 @@ const StyledDiv = styled.div` display: flex; align-items: center; cursor: pointer; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; &:hover { color: ${({ theme }) => theme.colorPrimary}; } diff --git a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx index 6c3e2e71e1c..77f6e2d3ccd 100644 --- a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx +++ b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx @@ -58,7 +58,7 @@ const StackableHeader = styled(Button)<{ top: number }>` ${({ theme, top }) => ` position: sticky; top: ${top}px; - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgContainer}; margin: 0px; padding: 8px 4px; z-index: 1; diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx index 47793e647c9..f12d173f957 100644 --- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx +++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx @@ -35,7 +35,7 @@ const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>` transform: rotate(90deg); `} & path { - fill: ${theme.colors.grayscale.base}; + fill: ${theme.colorIcon}; } `} `; diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx b/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx index fdca5bdbabe..7261fbfa01f 100644 --- a/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx +++ b/superset-frontend/src/dashboard/components/filterscope/FilterScope.test.tsx @@ -170,7 +170,7 @@ function getCheckboxState(name: string): CheckboxState { const fill = svgPath.getAttribute('fill'); return fill === supersetTheme.colorPrimary ? CHECKED - : fill === supersetTheme.colors.grayscale.light1 + : fill === supersetTheme.colorTextSecondary ? INDETERMINATE : UNCHECKED; } diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx index c834911c336..7f1e6022f97 100644 --- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx +++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx @@ -227,7 +227,7 @@ const ScopeSelector = styled.div` border-radius: ${theme.borderRadius}px; margin-top: ${theme.sizeUnit * -2}px; box-shadow: inset 0 0 0 2px ${theme.colorBorder}; - background: ${theme.colors.grayscale.light3}; + background: ${theme.colorFill}; } } @@ -309,7 +309,7 @@ const ActionsContainer = styled.div` ${({ theme }) => ` height: ${theme.sizeUnit * 16}px; - border-top: ${theme.sizeUnit / 4}px solid ${theme.colors.primary.light3}; + border-top: ${theme.sizeUnit / 4}px solid ${theme.colorPrimaryBg}; padding: ${theme.sizeUnit * 6}px; margin: 0 0 0 ${-theme.sizeUnit * 6}px; text-align: right; diff --git a/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx b/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx index 5ba5b926ba5..466b77d0b78 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx @@ -47,7 +47,7 @@ const DividerLine = styled.div` content: ''; height: 1px; width: 100%; - background-color: ${theme.colors.grayscale.light2}; + background-color: ${theme.colorSplit}; display: block; } diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx index 2c6f145ec69..e6357d04a92 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx @@ -78,13 +78,11 @@ const defaultProps = { }; const TabTitleContainer = styled.div` - ${({ isHighlighted, theme: { sizeUnit, colors } }) => ` + ${({ isHighlighted, theme: { sizeUnit, colorPrimaryBg } }) => ` padding: ${sizeUnit}px ${sizeUnit * 8}px ${sizeUnit}px ${sizeUnit * 2}px; margin: ${-sizeUnit}px ${sizeUnit * -2}px; transition: box-shadow 0.2s ease-in-out; - ${ - isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colors.primary.light1};` - } + ${isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};`} `} `; diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx index 8f384dc688e..3733bfdeada 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.tsx @@ -19,7 +19,6 @@ import { PureComponent } from 'react'; import cx from 'classnames'; import { css, styled } from '@superset-ui/core'; -import { Icons } from '@superset-ui/core/components/Icons'; import { DragDroppable } from 'src/dashboard/components/dnd/DragDroppable'; import { NEW_COMPONENTS_SOURCE_ID } from 'src/dashboard/util/constants'; import { NEW_COMPONENT_SOURCE_TYPE } from 'src/dashboard/util/componentTypes'; @@ -37,33 +36,18 @@ interface DraggableNewComponentProps { const NewComponent = styled.div` ${({ theme }) => css` display: flex; + flex-direction: row; + flex-wrap: nowrap; align-items: center; - justify-content: space-between; - padding: 0 ${theme.sizeUnit}px; - margin: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px; - - // hack to make the drag preview image corners rounded - transform: translate(0, 0); - color: ${theme.colorText}; - background-color: ${theme.colorBgLayout}; - border-radius: ${theme.borderRadius}px; + padding: ${theme.sizeUnit * 4}px; + background: ${theme.colorBgContainer}; cursor: move; - - &:hover { - background-color: ${theme.colorPrimaryBgHover}; + &:not(.static):hover { + background: ${theme.colorFillContentHover}; } `} `; -const NewComponentContent = styled.div` - ${({ theme }) => css` - display: flex; - align-items: center; - min-width: 0; - margin-right: ${theme.sizeUnit * 2}px; - `} -`; - const NewComponentPlaceholder = styled.div` ${({ theme }) => css` position: relative; @@ -99,15 +83,12 @@ export default class DraggableNewComponent extends PureComponent {({ dragSourceRef }) => ( - - - {IconComponent && } - - {label} - - + + {IconComponent && } + + {label} )} diff --git a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx index 741058263fb..2d7005b526d 100644 --- a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx +++ b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx @@ -75,8 +75,8 @@ const PopoverMenuStyles = styled.div` top: -42px; height: ${theme.sizeUnit * 10}px; padding: 0 ${theme.sizeUnit * 4}px; - background: ${theme.colors.grayscale.light5}; - box-shadow: 0 1px 2px 1px ${addAlpha(theme.colors.grayscale.dark2, 0.35)}; + background: ${theme.colorBgContainer}; + box-shadow: 0 1px 2px 1px ${addAlpha(theme.colorTextBase, 0.35)}; font-size: ${theme.fontSize}px; cursor: default; z-index: 3000; @@ -93,7 +93,7 @@ const PopoverMenuStyles = styled.div` content: ''; width: 1px; height: 100%; - background: ${theme.colors.grayscale.light2}; + background: ${theme.colorSplit}; margin: 0 ${theme.sizeUnit * 4}px; } `} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx index a4b5ab2fc25..6bce8b7a92a 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx @@ -103,7 +103,7 @@ const CrossFilter = (props: { margin-bottom: ${theme.sizeUnit * 4}px; margin-top: ${theme.sizeUnit * 4}px; `} - background: ${theme.colors.grayscale.light2}; + background: ${theme.colorSplit}; `} /> )} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx index e217e1dd143..7cf19545654 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx @@ -33,7 +33,7 @@ const StyledCrossFilterTitle = styled.div` ${({ theme }) => ` display: flex; font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; vertical-align: middle; align-items: center; `} @@ -42,13 +42,13 @@ const StyledCrossFilterTitle = styled.div` const StyledIconSearch = styled(Icons.SearchOutlined)` ${({ theme }) => ` & > span.anticon.anticon-search { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorIcon}; margin-left: ${theme.sizeUnit}px; transition: 0.3s; vertical-align: middle; line-height: 0; &:hover { - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIconHover}; } } `} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx index 9d0a62b2b9f..da1da7e8433 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx @@ -71,7 +71,7 @@ const ScopingTitle = ({ > {label} ) => { event.stopPropagation(); @@ -150,7 +150,7 @@ export const ChartsScopingListPanel = ({ css={css` width: 100%; height: 1px; - background-color: ${theme.colors.grayscale.light3}; + background-color: ${theme.colorSplit}; margin: ${theme.sizeUnit * 3}px 0; `} /> diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx index d0669b2c551..9af2fbae2c0 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx @@ -51,7 +51,7 @@ interface ScopingTreePanelProps { const InfoText = styled.div` ${({ theme }) => css` font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextSecondary}; margin-bottom: ${theme.sizeUnit * 7}px; `} `; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx index f77c574e209..2201794f0da 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx @@ -130,7 +130,7 @@ const HorizontalOverflowDivider = ({ ${truncationCSS}; display: block; font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextDescription}; margin: ${theme.sizeUnit}px 0 0 0; `} > diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx index c58ca06d879..da3ea538263 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx @@ -36,7 +36,7 @@ const HorizontalBar = styled.div` theme.sizeUnit * 3 }px ${theme.sizeUnit * 4}px; background: ${theme.colorBgBase}; - box-shadow: inset 0px -2px 2px -1px ${theme.colors.grayscale.light2}; + box-shadow: inset 0px -2px 2px -1px ${theme.colorSplit}; `} `; @@ -57,7 +57,7 @@ const HorizontalBarContent = styled.div` const FilterBarEmptyStateContainer = styled.div` ${({ theme }) => ` font-weight: ${theme.fontWeightStrong}; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; font-size: ${theme.fontSizeSM}px; padding-left: ${theme.sizeUnit * 2}px; `} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx index e67f0fcbd05..3e8d86a0f4f 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx @@ -63,7 +63,7 @@ const Bar = styled.div<{ width: number }>` flex-direction: column; flex-grow: 1; width: ${width}px; - background: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgContainer}; border-right: 1px solid ${theme.colorSplit}; border-bottom: 1px solid ${theme.colorSplit}; min-height: 100%; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx index c0d94463997..53c4d893a1d 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx @@ -101,7 +101,7 @@ export const DependenciesRow = memo(({ filter }: FilterCardRowProps) => { > css` cursor: pointer; `} diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts index 319f9151824..c949f8e7c08 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts @@ -41,7 +41,7 @@ export const Row = styled.div` export const RowLabel = styled.span` ${({ theme }) => css` - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; padding-right: ${theme.sizeUnit * 4}px; margin-right: auto; white-space: nowrap; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx index 9114ebe12af..3cb79cb1142 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx @@ -57,7 +57,7 @@ const DeleteFilter = styled(Icons.DeleteOutlined)` ${({ theme }) => ` cursor: pointer; margin-left: ${theme.sizeUnit * 2}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIcon}; &:hover { color: ${theme.colorText}; } @@ -79,7 +79,7 @@ const RowPanel = styled.div` const Label = styled.div` font-size: ${({ theme }) => theme.fontSizeSM}px; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; margin-bottom: ${({ theme }) => theme.sizeUnit}px; `; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx index ccc059ba200..f1760d9df70 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx @@ -183,7 +183,7 @@ const FilterTypeInfo = styled.div<{ expanded: boolean }>` ${({ theme, expanded }) => ` width: ${expanded ? '49%' : `${FORM_ITEM_WIDTH}px`}; font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; margin: ${theme.sizeUnit * 2}px 0px diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx index ecf7ccac3bf..499b571e0cd 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/RemovedFilter.tsx @@ -27,7 +27,7 @@ const RemovedContent = styled.div` text-align: center; justify-content: center; align-items: center; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; `; type RemovedFilterProps = { diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx index 7e47cd95d24..fa1d2c79688 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx @@ -740,7 +740,7 @@ function FiltersConfigModal({ diff --git a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts index 0ab38fabbc5..3beb62d57aa 100644 --- a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts +++ b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts @@ -31,7 +31,7 @@ const useFilterFocusHighlightStyles = (chartId: number) => { const focusedChartStyles = useMemo( () => ({ - borderColor: theme.colors.primary.light2, + borderColor: theme.colorPrimaryBorder, opacity: 1, boxShadow: `0px 0px ${theme.sizeUnit * 2}px ${theme.colorPrimary}`, pointerEvents: 'auto', diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index dcaef57be44..05267ef1180 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -42,7 +42,7 @@ import { prepareCopyToClipboardTabularData } from 'src/utils/common'; import { getTimeColumns, setTimeColumns } from './utils'; export const CellNull = styled('span')` - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextTertiary}; `; export const CopyButton = styled(Button)` @@ -161,7 +161,7 @@ const FormatPickerContainer = styled.div` const FormatPickerLabel = styled.span` font-size: ${({ theme }) => theme.fontSizeSM}px; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px; `; @@ -216,7 +216,7 @@ const DataTableTemporalHeaderCell = ({ > ) => e.stopPropagation()} /> diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx index 1c44cd3b862..161c856d669 100644 --- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx +++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx @@ -17,13 +17,7 @@ * under the License. */ import { useCallback, useEffect, useMemo, useState, MouseEvent } from 'react'; -import { - isFeatureEnabled, - FeatureFlag, - styled, - t, - useTheme, -} from '@superset-ui/core'; +import { isFeatureEnabled, FeatureFlag, styled, t } from '@superset-ui/core'; import { Icons } from '@superset-ui/core/components/Icons'; import Tabs from '@superset-ui/core/components/Tabs'; import { @@ -96,7 +90,6 @@ export const DataTablesPane = ({ setForceQuery, canDownload, }: DataTablesPaneProps) => { - const theme = useTheme(); const [activeTabKey, setActiveTabKey] = useState(ResultTypes.Results); const [isRequest, setIsRequest] = useState>({ results: false, @@ -189,7 +182,7 @@ export const DataTablesPane = ({ )} ); - }, [handleCollapseChange, panelOpen, theme.colors.grayscale.base]); + }, [handleCollapseChange, panelOpen]); const queryResultsPanes = useResultsPane({ errorMessage, diff --git a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx index d5a4841b336..4552a43a792 100644 --- a/superset-frontend/src/explore/components/DatasourcePanel/index.tsx +++ b/superset-frontend/src/explore/components/DatasourcePanel/index.tsx @@ -87,7 +87,7 @@ const DatasourceContainer = styled.div` .field-length { margin-bottom: ${theme.sizeUnit * 2}px; font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextTertiary}; } .form-control.input-md { display: inline-flex; @@ -97,7 +97,7 @@ const DatasourceContainer = styled.div` } .type-label { font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextSecondary}; } .Control { padding-bottom: 0; diff --git a/superset-frontend/src/explore/components/RunQueryButton/index.tsx b/superset-frontend/src/explore/components/RunQueryButton/index.tsx index d5ddd8097fb..c03cdc1eba7 100644 --- a/superset-frontend/src/explore/components/RunQueryButton/index.tsx +++ b/superset-frontend/src/explore/components/RunQueryButton/index.tsx @@ -43,7 +43,7 @@ export const RunQueryButton = ({ const theme = useTheme(); return loading ? ( ) : ( diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index ba97733c69a..dc95723fbce 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -220,7 +220,7 @@ class AnnotationLayerControl extends PureComponent { css={theme => ({ '&:hover': { cursor: 'pointer', - backgroundColor: theme.colors.grayscale.light4, + backgroundColor: theme.colorFillContentHover, }, })} content={this.renderPopover( diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx index 32d5b7235f7..135541ae4a1 100644 --- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx +++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx @@ -173,7 +173,7 @@ export default function ColumnConfigControl({ fontSize: theme.fontSizeXS, color: theme.colorTextLabel, ':hover': { - backgroundColor: theme.colors.grayscale.light4, + backgroundColor: theme.colorFillContentHover, }, }} onClick={() => setShowAllColumns(!showAllColumns)} diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx index 7c26b9f7eb5..31ef15f731d 100644 --- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx +++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx @@ -34,7 +34,8 @@ export default memo(function ColumnConfigItem({ width, height, }: ColumnConfigItemProps) { - const { colors, sizeUnit } = useTheme(); + const theme = useTheme(); + const { sizeUnit } = theme; const caretWidth = sizeUnit * 6; const outerContainerStyle = css({ @@ -42,20 +43,20 @@ export default memo(function ColumnConfigItem({ alignItems: 'center', cursor: 'pointer', padding: `${sizeUnit}px ${2 * sizeUnit}px`, - borderBottom: `1px solid ${colors.grayscale.light2}`, + borderBottom: `1px solid ${theme.colorBorderSecondary}`, position: 'relative', paddingRight: `${caretWidth}px`, ':last-child': { borderBottom: 'none', }, ':hover': { - background: colors.grayscale.light4, + background: theme.colorFillTertiary, }, '> .fa': { - color: colors.grayscale.light2, + color: theme.colorTextTertiary, }, ':hover > .fa': { - color: colors.grayscale.light1, + color: theme.colorTextSecondary, }, }); @@ -78,11 +79,9 @@ export default memo(function ColumnConfigItem({ top: 3 * sizeUnit, transform: 'translateY(-50%)', gap: sizeUnit, - color: colors.grayscale.light1, + color: theme.colorTextSecondary, }); - const theme = useTheme(); - const caretIconStyle = css({ fontSize: `${theme.fontSizeSM}px`, fontWeight: theme.fontWeightNormal, @@ -114,7 +113,7 @@ export default memo(function ColumnConfigItem({ {column.isChildColumn && column.config?.visible === false && ( )} diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx index 09820d44d62..6724b269f8e 100644 --- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx +++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx @@ -53,11 +53,11 @@ export const FormatterContainer = styled(OptionControlContainer)` export const CloseButton = styled.button` ${({ theme }) => css` - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorIcon}; height: 100%; width: ${theme.sizeUnit * 6}px; border: none; - border-right: solid 1px ${theme.colors.grayscale.dark2}0C; + border-right: solid 1px ${theme.colorBorder}; padding: 0; outline: none; border-bottom-left-radius: 3px; diff --git a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx index 744acb292b8..ba0fe7abcb1 100644 --- a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx +++ b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx @@ -42,7 +42,7 @@ export default function CustomListItem(props: CustomListItemProps) { if (selectable) { css['&:hover'] = { cursor: 'pointer', - backgroundColor: theme.colors.grayscale.light4, + backgroundColor: theme.colorFillSecondary, }; } diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx index b8f8f275543..410bff801c5 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx @@ -127,7 +127,7 @@ const Styles = styled.div` flex: none; } span[aria-label='dataset-physical'] { - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; } span[aria-label='more'] { color: ${({ theme }) => theme.colorPrimary}; diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx index 9174de76f64..f214a4159e1 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx @@ -61,7 +61,7 @@ export default function Option({ > )} diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx index 9b529a722ca..150fca4debc 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx @@ -57,7 +57,7 @@ const SelectWithLabel = styled(Select)<{ labelText: string }>` content: ${({ labelText }) => labelText || '\\A0'}; display: inline-block; white-space: nowrap; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; width: max-content; } `; diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx index b5abe9adb16..a218189ece6 100644 --- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx +++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx @@ -36,12 +36,12 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)` border: none; border-radius: ${theme.borderRadius}px; - background-color: ${theme.colors.grayscale.light3}; + background-color: ${theme.colorFill}; font-size: ${theme.fontSizeSM}px; font-weight: ${theme.fontWeightNormal}; &:hover { - background-color: ${theme.colors.grayscale.light3}; + background-color: ${theme.colorFill}; } & .layer-tree-item-close { @@ -70,12 +70,12 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)` & > button { border: none; background-color: unset; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; } & > button:hover { background-color: unset; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; } `} `; diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx index a218040dab3..03ea65cf975 100644 --- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx +++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx @@ -32,7 +32,7 @@ export const StyledFlatLayerTree = styled(FlatLayerTree)` border: solid; border-width: 1px; border-radius: ${theme.borderRadius}px; - border-color: ${theme.colors.grayscale.light2}; + border-color: ${theme.colorBorderSecondary}; & .add-layer-btn { display: flex; @@ -40,13 +40,13 @@ export const StyledFlatLayerTree = styled(FlatLayerTree)` margin: 4px; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; font-size: ${theme.fontSizeSM}px; font-weight: ${theme.fontWeightNormal}; &:hover { - background-color: ${theme.colors.grayscale.light4}; - border-color: ${theme.colors.grayscale.light2}; + background-color: ${theme.colorFillTertiary}; + border-color: ${theme.colorBorderSecondary}; } } diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx index ef1c530d654..f760f020b92 100644 --- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx +++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx @@ -21,7 +21,6 @@ import { css, JsonValue, styled, t } from '@superset-ui/core'; import { Button } from '@superset-ui/core/components/Button'; import { Form } from '@superset-ui/core/components/Form'; import Tabs from '@superset-ui/core/components/Tabs'; -import { mix } from 'polished'; import { Data as GsData } from 'geostyler-data'; import { Style as GsStyle } from 'geostyler-style'; import WfsDataParser, { @@ -59,7 +58,7 @@ export const StyledCloseButton = styled(Button)` margin-right: 4px; line-height: 1.5715; border-radius: ${theme.borderRadius}px; - background-color: ${theme.colors.primary.light4}; + background-color: ${theme.colorPrimaryBg}; color: ${theme.colorPrimaryText}; font-size: ${theme.fontSizeSM}px; font-weight: ${theme.fontWeightStrong}; @@ -71,11 +70,7 @@ export const StyledCloseButton = styled(Button)` border-style: none; border-color: transparent; &:hover { - background-color: ${mix( - 0.1, - theme.colorPrimary, - theme.colors.primary.light4, - )}; + background-color: ${theme.colorPrimaryBgHover}; color: ${theme.colorPrimaryText}; } `} @@ -113,7 +108,7 @@ export const StyledSaveButton = styled(Button)` line-height: 1.5715; border-radius: ${theme.borderRadius}px; background-color: ${theme.colorPrimary}; - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorTextLightSolid}; font-size: ${theme.fontSizeSM}px; font-weight: ${theme.fontWeightStrong}; text-transform: uppercase; diff --git a/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx b/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx index e418fe1f0c4..8c7416be69d 100644 --- a/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx +++ b/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx @@ -20,7 +20,6 @@ import { ControlHeader } from '@superset-ui/chart-controls'; import { css, styled, t } from '@superset-ui/core'; import { Button, Popover } from '@superset-ui/core/components'; import { FC, useState } from 'react'; -import { mix } from 'polished'; import { MapViewConfigs, MapViewConfigsControlProps } from './types'; import MapViewPopoverContent from './MapViewPopoverContent'; import ExtentTag from './ExtentTag'; @@ -32,7 +31,7 @@ export const StyledExtentButton = styled(Button)` margin-right: 4px; line-height: 1.5715; border-radius: ${theme.borderRadius}px; - background-color: ${theme.colors.primary.light4}; + background-color: ${theme.colorPrimaryBg}; color: ${theme.colorPrimaryText}; font-size: ${theme.fontSizeSM}px; font-weight: ${theme.fontWeightStrong}; @@ -46,11 +45,7 @@ export const StyledExtentButton = styled(Button)` margin-left: 9px; margin-top: 10px; &:hover { - background-color: ${mix( - 0.1, - theme.colorPrimary, - theme.colors.primary.light4, - )}; + background-color: ${theme.colorPrimaryBgHover}; color: ${theme.colorPrimaryText}; } `} diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx index ec7de286931..136b7a4e9ca 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx @@ -122,9 +122,7 @@ const AdhocMetricEditPopoverTitle: FC = ({ {title?.label || defaultLabel}   diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx index 28029f8aaff..dfbec224dc9 100644 --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx @@ -85,7 +85,7 @@ export const CaretContainer = styled.div` export const CloseContainer = styled.div` height: auto; width: ${({ theme }) => theme.sizeUnit * 6}px; - border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; + border-right: solid 1px ${({ theme }) => theme.colorBorder}; cursor: pointer; `; @@ -158,7 +158,7 @@ export const DndLabelsContainer = styled.div<{ &:after { display: ${isLoading || (canDrop && isOver) ? 'block' : 'none'}; background-color: ${ - isLoading ? theme.colors.grayscale.light3 : theme.colorPrimary + isLoading ? theme.colorFillTertiary : theme.colorPrimary }; z-index: 11; opacity: 35%; @@ -195,19 +195,19 @@ export const AddControlLabel = styled.div<{ height: ${({ theme }) => theme.sizeUnit * 6}px; padding-left: ${({ theme }) => theme.sizeUnit}px; font-size: ${({ theme }) => theme.fontSizeSM}px; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; border: dashed 1px ${({ theme }) => theme.colorSplit}; border-radius: ${({ theme }) => theme.borderRadius}px; cursor: ${({ cancelHover }) => (cancelHover ? 'inherit' : 'pointer')}; :hover { background-color: ${({ cancelHover, theme }) => - cancelHover ? 'inherit' : theme.colors.grayscale.light4}; + cancelHover ? 'inherit' : theme.colorFillSecondary}; } :active { background-color: ${({ cancelHover, theme }) => - cancelHover ? 'inherit' : theme.colors.grayscale.light3}; + cancelHover ? 'inherit' : theme.colorFillTertiary}; } svg { margin-right: ${({ theme }) => theme.sizeUnit}px; @@ -227,7 +227,7 @@ export const AddIconButton = styled.button` :disabled { cursor: not-allowed; - background-color: ${({ theme }) => theme.colors.grayscale.light1}; + background-color: ${({ theme }) => theme.colorBgContainerDisabled}; } `; @@ -384,7 +384,7 @@ export const OptionControlLabel = ({ > )} diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx index 6a57fffd2c6..cb3dd375fdd 100644 --- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx @@ -92,7 +92,7 @@ const StyledCol = styled(Col)` const StyledTooltip = styled(InfoTooltip)` margin-left: ${({ theme }) => theme.sizeUnit}px; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorIcon}; `; const ButtonBar = styled.div` diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx index 16709831e6f..e1f73ce5fce 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx @@ -90,7 +90,7 @@ export const VizTile = ({ css={css` display: flex; align-items: center; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; font-weight: ${theme.fontWeightStrong}; border-radius: 6px; white-space: nowrap; @@ -111,7 +111,7 @@ export const VizTile = ({ ${isActive && css` width: 100%; - background-color: ${theme.colors.grayscale.light4}; + background-color: ${theme.colorBgContainer}; transition: width ${TILE_TRANSITION_TIME} ease-out, background-color ${TILE_TRANSITION_TIME} ease-out; diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx index b5f888e7c0b..a9e037e04ac 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx @@ -294,7 +294,7 @@ const HighlightLabel = styled.div` border: 1px solid ${theme.colorPrimaryText}; box-sizing: border-box; border-radius: ${theme.borderRadius}px; - background: ${theme.colors.grayscale.light5}; + background: ${theme.colorBgContainer}; line-height: ${theme.sizeUnit * 2.5}px; color: ${theme.colorPrimaryText}; font-size: ${theme.fontSizeSM}px; diff --git a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx index f785bddce51..4c53cce544e 100644 --- a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx +++ b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx @@ -62,7 +62,7 @@ const StyledNotificationMethod = styled.div` .helper { margin-top: ${theme.sizeUnit * 2}px; font-size: ${theme.fontSizeSM}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorTextSecondary}; } } diff --git a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx index b86e21136e8..2baf5c77027 100644 --- a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx +++ b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx @@ -23,7 +23,7 @@ import { Icons } from '@superset-ui/core/components/Icons'; import { NotificationMethodOption } from '../types'; const notificationStyledIcon = (theme: SupersetTheme) => css` - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorIcon}; margin-right: ${theme.sizeUnit * 2}px; `; diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx index 681e44b747c..a6f520d991b 100644 --- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx +++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx @@ -81,7 +81,7 @@ const LayerContainer = styled.div` input::placeholder, textarea::placeholder { - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextPlaceholder}; } `; diff --git a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx index f7318029cca..37940d3683f 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/TableCatalog.tsx @@ -68,7 +68,7 @@ export const TableCatalog = ({ css` align-self: center; - background: ${theme.colors.grayscale.light4}; + background: ${theme.colorFillSecondary}; margin: 5px 5px 8px 5px; &.anticon > * { diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx index dd38bb6b2a7..fa073b8a0f1 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx @@ -34,7 +34,7 @@ import { AuthType } from '.'; const StyledDiv = styled.div` padding-top: ${({ theme }) => theme.sizeUnit * 2}px; label { - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px; } `; diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts index 285aa0d988b..e9bd68750f0 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts +++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts @@ -171,7 +171,7 @@ export const formHelperStyles = (theme: SupersetTheme) => css` .helper { display: block; padding: ${theme.sizeUnit}px 0; - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; font-size: ${theme.fontSizeSM}px; text-align: left; } @@ -200,7 +200,7 @@ export const formStyles = (theme: SupersetTheme) => css` } } .helper { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; font-size: ${theme.fontSizeSM}px; margin-top: ${theme.sizeUnit * 1.5}px; } @@ -261,7 +261,7 @@ export const StyledInputContainer = styled.div` input::placeholder, textarea::placeholder { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextPlaceholder}; } textarea, @@ -346,7 +346,7 @@ export const TabHeader = styled.div` padding: 0px; .helper { - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorTextSecondary}; font-size: ${({ theme }) => theme.fontSizeSM}px; margin: 0px; } @@ -364,7 +364,7 @@ export const CreateHeaderSubtitle = styled.div` `; export const EditHeaderTitle = styled.div` - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; font-size: ${({ theme }) => theme.fontSizeSM}px; `; @@ -386,7 +386,7 @@ export const CredentialInfoForm = styled.div` } .label-paste { - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; font-size: 11px; line-height: 16px; } @@ -406,7 +406,7 @@ export const CredentialInfoForm = styled.div` padding: ${({ theme }) => theme.sizeUnit * 1.5}px ${({ theme }) => theme.sizeUnit * 2}px; &::placeholder { - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextPlaceholder}; } } diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx index 43078fc2b87..1a7c23271f7 100644 --- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx @@ -55,7 +55,7 @@ const getLinkProps = (dashboard: ChartLinkedDashboard) => ({ }); const tooltipItemCSS = (theme: SupersetTheme) => css` - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorTextPlaceholder}; text-decoration: underline; &:hover { color: inherit; @@ -124,7 +124,7 @@ const columns: ColumnsType = [ const emptyStateTableCSS = (theme: SupersetTheme) => css` && th.ant-table-cell { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; } .ant-table-placeholder { diff --git a/superset-frontend/src/features/datasets/AddDataset/Footer/index.tsx b/superset-frontend/src/features/datasets/AddDataset/Footer/index.tsx index 0688836de75..632a3f9ead4 100644 --- a/superset-frontend/src/features/datasets/AddDataset/Footer/index.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/Footer/index.tsx @@ -154,7 +154,7 @@ function Footer({ icon={ } trigger={['click']} diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx index 68ec8cf76de..8906c0915f9 100644 --- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx @@ -73,7 +73,7 @@ const LeftPanelStyle = styled.div` padding: ${theme.sizeUnit * 1.75}px; border-radius: ${theme.borderRadius}px; :hover { - background-color: ${theme.colors.grayscale.light4} + background-color: ${theme.colorFillTertiary} } } @@ -82,7 +82,7 @@ const LeftPanelStyle = styled.div` padding: ${theme.sizeUnit * 1.75}px; border-radius: ${theme.borderRadius}px; background-color: ${theme.colorPrimaryText}; - color: ${theme.colors.grayscale.light5}; + color: ${theme.colorTextLightSolid}; } .options, .options-highlighted { @@ -111,7 +111,7 @@ const LeftPanelStyle = styled.div` margin-bottom: ${theme.sizeUnit * 2.5}px; } p { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextSecondary}; } } `} diff --git a/superset-frontend/src/features/datasets/styles.ts b/superset-frontend/src/features/datasets/styles.ts index 1564dbe7a27..df3055d25e3 100644 --- a/superset-frontend/src/features/datasets/styles.ts +++ b/superset-frontend/src/features/datasets/styles.ts @@ -86,7 +86,7 @@ export const StyledCreateDatasetTitle = styled.div` export const StyledLayoutLeftPanel = styled.div` ${({ theme }) => ` height: 100%; - border-right: 1px solid ${theme.colors.grayscale.light2}; + border-right: 1px solid ${theme.colorBorderSecondary}; `} `; @@ -97,7 +97,7 @@ export const StyledLayoutDatasetPanel = styled.div` export const StyledLayoutRightPanel = styled.div` ${({ theme }) => ` - border-left: 1px solid ${theme.colors.grayscale.light2}; + border-left: 1px solid ${theme.colorBorderSecondary}; color: ${theme.colorSuccess}; `} `; @@ -106,11 +106,11 @@ export const StyledLayoutFooter = styled.div` ${({ theme }) => ` height: ${theme.sizeUnit * 16}px; width: 100%; - border-top: 1px solid ${theme.colors.grayscale.light2}; - border-bottom: 1px solid ${theme.colors.grayscale.light2}; + border-top: 1px solid ${theme.colorBorderSecondary}; + border-bottom: 1px solid ${theme.colorBorderSecondary}; color: ${theme.colorInfo}; border-top: ${theme.sizeUnit / 4}px solid - ${theme.colors.grayscale.light2}; + ${theme.colorBorderSecondary}; padding: ${theme.sizeUnit * 4}px; display: flex; justify-content: flex-end; @@ -127,7 +127,7 @@ export const HeaderComponentStyles = styled.div` &:disabled { svg { - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorIconHover}; } } } @@ -137,7 +137,7 @@ export const disabledSaveBtnStyles = (theme: SupersetTheme) => css` width: ${theme.sizeUnit * 21.5}px; &:disabled { - background-color: ${theme.colors.grayscale.light3}; - color: ${theme.colors.grayscale.light1}; + background-color: ${theme.colorBgContainerDisabled}; + color: ${theme.colorTextDisabled}; } `; diff --git a/superset-frontend/src/features/home/EmptyState.tsx b/superset-frontend/src/features/home/EmptyState.tsx index 6700cac1ae3..09c8c233cb7 100644 --- a/superset-frontend/src/features/home/EmptyState.tsx +++ b/superset-frontend/src/features/home/EmptyState.tsx @@ -28,7 +28,7 @@ import { WelcomeTable } from './types'; const EmptyContainer = styled.div` min-height: 200px; display: flex; - color: ${({ theme }) => theme.colors.grayscale.light2}; + color: ${({ theme }) => theme.colorTextDescription}; flex-direction: column; justify-content: space-around; `; diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx index acfedb981b9..b9705851e4c 100644 --- a/superset-frontend/src/features/home/Menu.tsx +++ b/superset-frontend/src/features/home/Menu.tsx @@ -83,8 +83,8 @@ const StyledHeader = styled.header` } } .navbar-brand-text { - border-left: 1px solid ${theme.colors.grayscale.light2}; - border-right: 1px solid ${theme.colors.grayscale.light2}; + border-left: 1px solid ${theme.colorBorderSecondary}; + border-right: 1px solid ${theme.colorBorderSecondary}; height: 100%; color: ${theme.colorText}; padding-left: ${theme.sizeUnit * 4}px; @@ -130,7 +130,7 @@ const { SubMenu } = MainNav; const StyledSubMenu = styled(SubMenu)` ${({ theme }) => css` [data-icon="caret-down"] { - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIcon}; font-size: ${theme.fontSizeXS}px; margin-left: ${theme.sizeUnit}px; } diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx index 588f19c5045..426603ff8a0 100644 --- a/superset-frontend/src/features/home/RightMenu.tsx +++ b/superset-frontend/src/features/home/RightMenu.tsx @@ -66,7 +66,7 @@ const extensionsRegistry = getExtensionsRegistry(); const versionInfoStyles = (theme: SupersetTheme) => css` padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 7}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; font-size: ${theme.fontSizeSM}px; white-space: nowrap; `; @@ -100,7 +100,7 @@ const StyledMenuItem = styled.div<{ disabled?: boolean }>` } ${disabled && css` - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextDisabled}; `} `} `; diff --git a/superset-frontend/src/features/home/SavedQueries.tsx b/superset-frontend/src/features/home/SavedQueries.tsx index c76681cd2b9..61c0fb64457 100644 --- a/superset-frontend/src/features/home/SavedQueries.tsx +++ b/superset-frontend/src/features/home/SavedQueries.tsx @@ -332,7 +332,7 @@ export const SavedQueries = ({ height: theme.sizeUnit * 40, border: 'none', overflow: 'hidden', - color: theme.colors.grayscale.dark2, + color: theme.colorText, wordBreak: 'break-all', whiteSpace: 'pre-wrap', }} diff --git a/superset-frontend/src/features/home/SubMenu.tsx b/superset-frontend/src/features/home/SubMenu.tsx index 8bc7c39fb31..79da4e47a22 100644 --- a/superset-frontend/src/features/home/SubMenu.tsx +++ b/superset-frontend/src/features/home/SubMenu.tsx @@ -114,15 +114,15 @@ const StyledHeader = styled.div<{ backgroundColor?: string }>` `; const styledDisabled = (theme: SupersetTheme) => css` - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextDisabled}; cursor: not-allowed; &:hover { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextDisabled}; } .ant-menu-item-selected { - background-color: ${theme.colors.grayscale.light1}; + background-color: ${theme.colorBgContainerDisabled}; } `; diff --git a/superset-frontend/src/features/queries/QueryPreviewModal.tsx b/superset-frontend/src/features/queries/QueryPreviewModal.tsx index f4f9e1cf35a..447b3e7d8a7 100644 --- a/superset-frontend/src/features/queries/QueryPreviewModal.tsx +++ b/superset-frontend/src/features/queries/QueryPreviewModal.tsx @@ -28,13 +28,13 @@ import useQueryPreviewState from 'src/features/queries/hooks/useQueryPreviewStat import { QueryObject } from 'src/views/CRUD/types'; const QueryTitle = styled.div` - color: ${({ theme }) => theme.colors.primary.light2}; + color: ${({ theme }) => theme.colorTextSecondary}; font-size: ${({ theme }) => theme.fontSizeSM}px; margin-bottom: 0; `; const QueryLabel = styled.div` - color: ${({ theme }) => theme.colors.grayscale.dark2}; + color: ${({ theme }) => theme.colorText}; font-size: ${({ theme }) => theme.fontSize}px; padding: 4px 0 24px 0; `; @@ -54,14 +54,14 @@ const TabButton = styled.div` &.active, &:focus, &:hover { - background: ${({ theme }) => theme.colors.primary.light4}; + background: ${({ theme }) => theme.colorPrimaryBg}; border-bottom: none; border-radius: ${({ theme }) => theme.borderRadius}px; margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px; } &:hover:not(.active) { - background: ${({ theme }) => theme.colors.primary.light5}; + background: ${({ theme }) => theme.colorPrimaryBgHover}; } `; const StyledModal = styled(Modal)` diff --git a/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx b/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx index ec8a8c6d553..4b38e381a33 100644 --- a/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx +++ b/superset-frontend/src/features/queries/SyntaxHighlighterCopy.tsx @@ -45,20 +45,20 @@ const SyntaxHighlighterWrapper = styled.div` visibility: hidden; margin: -4px; padding: 4px; - background: ${({ theme }) => theme.colors.grayscale.light4}; + background: ${({ theme }) => theme.colorBgContainer}; border-radius: ${({ theme }) => theme.borderRadius}px; - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; cursor: pointer; transition: all 0.2s ease; &:hover { - background: ${({ theme }) => theme.colors.grayscale.light2}; - color: ${({ theme }) => theme.colors.grayscale.dark1}; + background: ${({ theme }) => theme.colorFillContentHover}; + color: ${({ theme }) => theme.colorIconHover}; } &:focus { visibility: visible; - outline: 2px solid ${({ theme }) => theme.colors.primary.base}; + outline: 2px solid ${({ theme }) => theme.colorPrimary}; outline-offset: 2px; } } diff --git a/superset-frontend/src/features/reports/ReportModal/styles.tsx b/superset-frontend/src/features/reports/ReportModal/styles.tsx index 0455b391262..2b158c5cfae 100644 --- a/superset-frontend/src/features/reports/ReportModal/styles.tsx +++ b/superset-frontend/src/features/reports/ReportModal/styles.tsx @@ -32,7 +32,7 @@ export const StyledTopSection = styled.div` `${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 2}px`}; label { font-size: ${({ theme }) => theme.fontSizeSM}px; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; } `; @@ -45,7 +45,7 @@ export const StyledBottomSection = styled.div` } .control-label { font-size: ${({ theme }) => theme.fontSizeSM}px; - color: ${({ theme }) => theme.colors.grayscale.light1}; + color: ${({ theme }) => theme.colorTextSecondary}; } `; diff --git a/superset-frontend/src/features/themes/types.test.ts b/superset-frontend/src/features/themes/types.test.ts index cc80b6f709a..1d4e5c190e4 100644 --- a/superset-frontend/src/features/themes/types.test.ts +++ b/superset-frontend/src/features/themes/types.test.ts @@ -25,7 +25,7 @@ describe('Theme Types', () => { const validTheme: ThemeObject = { id: 1, theme_name: 'Test Theme', - json_data: '{"colors": {"primary": "#1890ff"}}', + json_data: '{"token": {"colorPrimary": "#1890ff"}}', uuid: '123e4567-e89b-12d3-a456-426614174000', is_system: false, is_system_default: false, @@ -68,7 +68,7 @@ describe('Theme Types', () => { const systemTheme: ThemeObject = { id: 2, theme_name: 'System Theme', - json_data: '{"colors": {"primary": "#000000"}}', + json_data: '{}', is_system: true, is_system_default: true, is_system_dark: false, @@ -100,12 +100,13 @@ describe('Theme Types', () => { it('should parse valid JSON data', () => { const theme: ThemeObject = { theme_name: 'Parse Test', - json_data: '{"colors": {"primary": "#1890ff", "secondary": "#52c41a"}}', + json_data: + '{"token": {"colorPrimary": "#1890ff", "colorSuccess": "#52c41a"}}', }; const parsed = JSON.parse(theme.json_data!); - expect(parsed.colors.primary).toBe('#1890ff'); - expect(parsed.colors.secondary).toBe('#52c41a'); + expect(parsed.token.colorPrimary).toBe('#1890ff'); + expect(parsed.token.colorSuccess).toBe('#52c41a'); }); it('should handle empty JSON', () => { diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx index a4bdd434809..60d0d53d06e 100644 --- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx +++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx @@ -508,11 +508,7 @@ export default function RangeFilterPlugin(props: PluginFilterRangeProps) { diff --git a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx index 15d2c8b446d..a2f11978d3a 100644 --- a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx +++ b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx @@ -45,8 +45,19 @@ const ControlContainer = styled.div<{ width: 100%; & > div, & > div:hover { - ${({ validateStatus, theme }) => - validateStatus && `border-color: ${theme.colors[validateStatus]?.base}`} + ${({ validateStatus, theme }) => { + if (!validateStatus) return ''; + switch (validateStatus) { + case 'error': + return `border-color: ${theme.colorError}`; + case 'warning': + return `border-color: ${theme.colorWarning}`; + case 'info': + return `border-color: ${theme.colorInfo}`; + default: + return `border-color: ${theme.colorError}`; + } + }} } & > div { width: 100%; diff --git a/superset-frontend/src/filters/components/common.ts b/superset-frontend/src/filters/components/common.ts index 6ba9eabb144..87b7b08221c 100644 --- a/superset-frontend/src/filters/components/common.ts +++ b/superset-frontend/src/filters/components/common.ts @@ -37,10 +37,21 @@ export const StatusMessage = styled.div<{ status?: 'error' | 'warning' | 'info' | 'help'; centerText?: boolean; }>` - color: ${({ theme, status = 'error' }) => - status === 'help' - ? theme.colors.grayscale.light1 - : theme.colors[status]?.base}; + color: ${({ theme, status = 'error' }) => { + if (status === 'help') { + return theme.colorTextSecondary; + } + switch (status) { + case 'error': + return theme.colorError; + case 'warning': + return theme.colorWarning; + case 'info': + return theme.colorInfo; + default: + return theme.colorError; + } + }}; text-align: ${({ centerText }) => (centerText ? 'center' : 'left')}; width: 100%; `; diff --git a/superset-frontend/src/hooks/useThemeMenuItems.tsx b/superset-frontend/src/hooks/useThemeMenuItems.tsx index 67e4411929c..dfea58caf24 100644 --- a/superset-frontend/src/hooks/useThemeMenuItems.tsx +++ b/superset-frontend/src/hooks/useThemeMenuItems.tsx @@ -63,13 +63,11 @@ export const useThemeMenuItems = ({ const selectedThemeModeIcon = useMemo( () => hasLocalOverride ? ( - + ) : ( themeIconMap[themeMode] ), - [hasLocalOverride, theme.colors.error.base, themeIconMap, themeMode], + [hasLocalOverride, theme.colorError, themeIconMap, themeMode], ); const themeOptions: MenuItem[] = [ diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx index 659b32164a4..f29f4e0bffc 100644 --- a/superset-frontend/src/pages/AllEntities/index.tsx +++ b/superset-frontend/src/pages/AllEntities/index.tsx @@ -49,7 +49,7 @@ const additionalItemsStyles = (theme: SupersetTheme) => css` const AllEntitiesContainer = styled.div` ${({ theme }) => ` - background-color: ${theme.colors.grayscale.light4}; + background-color: ${theme.colorBgContainer}; .select-control { margin-left: ${theme.sizeUnit * 4}px; margin-right: ${theme.sizeUnit * 4}px; @@ -57,7 +57,7 @@ const AllEntitiesContainer = styled.div` } .select-control-label { font-size: ${theme.sizeUnit * 3}px; - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; margin-bottom: ${theme.sizeUnit * 1}px; } .entities { @@ -72,7 +72,7 @@ const AllEntitiesContainer = styled.div` const AllEntitiesNav = styled.div` ${({ theme }) => ` height: ${theme.sizeUnit * 12.5}px; - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgBase}; margin-bottom: ${theme.sizeUnit * 4}px; .navbar-brand { margin-left: ${theme.sizeUnit * 2}px; diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx index 675c5180020..ce1c6019036 100644 --- a/superset-frontend/src/pages/DashboardList/index.tsx +++ b/superset-frontend/src/pages/DashboardList/index.tsx @@ -115,7 +115,7 @@ export interface Dashboard { } const Actions = styled.div` - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorIcon}; `; const DASHBOARD_COLUMNS_TO_FETCH = [ diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx index b3c0f89e9da..6739824bf1a 100644 --- a/superset-frontend/src/pages/DatasetList/index.tsx +++ b/superset-frontend/src/pages/DatasetList/index.tsx @@ -91,7 +91,7 @@ const FlexRowContainer = styled.div` const Actions = styled.div` ${({ theme }) => css` - color: ${theme.colors.grayscale.base}; + color: ${theme.colorIcon}; .disabled { svg, @@ -102,12 +102,12 @@ const Actions = styled.div` } } } - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextDisabled}; .ant-menu-item:hover { cursor: default; } &::after { - color: ${theme.colors.grayscale.light1}; + color: ${theme.colorTextDisabled}; } } `} diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx b/superset-frontend/src/pages/QueryHistoryList/index.tsx index 5ea28f0ba99..dc4de5b3096 100644 --- a/superset-frontend/src/pages/QueryHistoryList/index.tsx +++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx @@ -98,7 +98,7 @@ const StyledTableLabel = styled.div` `; const StyledPopoverItem = styled.div` - color: ${({ theme }) => theme.colors.grayscale.dark2}; + color: ${({ theme }) => theme.colorText}; `; const TimerLabel = styled(Label)` @@ -194,7 +194,7 @@ function QueryList({ addDangerToast }: QueryListProps) { iconColor={ status === QueryState.Failed ? theme.colorError - : theme.colors.grayscale.base + : theme.colorIcon } /> ); @@ -206,7 +206,7 @@ function QueryList({ addDangerToast }: QueryListProps) { statusConfig.label = t('Running'); } else if (status === QueryState.TimedOut) { statusConfig.name = ( - + ); statusConfig.label = t('Offline'); } else if ( diff --git a/superset-frontend/src/pages/SavedQueryList/index.tsx b/superset-frontend/src/pages/SavedQueryList/index.tsx index 0dfc659d366..1342d3fb2ee 100644 --- a/superset-frontend/src/pages/SavedQueryList/index.tsx +++ b/superset-frontend/src/pages/SavedQueryList/index.tsx @@ -99,7 +99,7 @@ const StyledTableLabel = styled.div` `; const StyledPopoverItem = styled.div` - color: ${({ theme }) => theme.colors.grayscale.dark2}; + color: ${({ theme }) => theme.colorText}; `; function SavedQueryList({ diff --git a/superset-frontend/src/pages/UserInfo/index.tsx b/superset-frontend/src/pages/UserInfo/index.tsx index 061cba8ce06..8c96cb79582 100644 --- a/superset-frontend/src/pages/UserInfo/index.tsx +++ b/superset-frontend/src/pages/UserInfo/index.tsx @@ -39,7 +39,7 @@ const StyledHeader = styled.div` display: inline-block; line-height: ${theme.sizeUnit * 9}px; width: 100%; - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgContainer}; margin-bottom: ${theme.sizeUnit * 6}px; `} `; @@ -48,7 +48,7 @@ const DescriptionsContainer = styled.div` ${({ theme }) => css` margin: 0px ${theme.sizeUnit * 3}px ${theme.sizeUnit * 6}px ${theme.sizeUnit * 3}px; - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgContainer}; `} `; diff --git a/superset-frontend/src/utils/downloadAsImage.ts b/superset-frontend/src/utils/downloadAsImage.ts index 9f1297e408e..e8e36bc27e8 100644 --- a/superset-frontend/src/utils/downloadAsImage.ts +++ b/superset-frontend/src/utils/downloadAsImage.ts @@ -266,7 +266,7 @@ export default function downloadAsImageOptimized( : true; const dataUrl = await domToImage.toJpeg(clone, { - bgcolor: theme?.colors.grayscale.light4, + bgcolor: theme?.colorBgContainer, filter, quality: IMAGE_DOWNLOAD_QUALITY, height: clone.scrollHeight, diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx index ef021e51fa0..f7e4082cfb7 100644 --- a/superset-frontend/src/views/CRUD/utils.tsx +++ b/superset-frontend/src/views/CRUD/utils.tsx @@ -69,7 +69,7 @@ import { Dashboard, Filter, TableTab } from './types'; })(); export const Actions = styled.div` - color: ${({ theme }) => theme.colors.grayscale.base}; + color: ${({ theme }) => theme.colorText}; `; const createFetchResourceMethod = diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx index fcf93e6bb94..9fde1b80a60 100644 --- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx +++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx @@ -94,10 +94,10 @@ const SparklineCell = ({ }: Props) => { const theme = useTheme(); const xyTheme = buildChartTheme({ - backgroundColor: `${theme.colors.grayscale.light5}`, - colors: [`${theme.colors.grayscale.base}`], - gridColor: `${theme.colors.grayscale.light1}`, - gridColorDark: `${theme.colors.grayscale.base}`, + backgroundColor: `${theme.colorBgContainer}`, + colors: [`${theme.colorText}`], + gridColor: `${theme.colorSplit}`, + gridColorDark: `${theme.colorBorder}`, tickLength: 6, }); @@ -191,7 +191,7 @@ const SparklineCell = ({ })} width={innerWidth} strokeDasharray="3 3" - stroke={`${theme.colors.grayscale.light1}`} + stroke={`${theme.colorSplit}`} tickValues={[min, max]} /> )} diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx index 55d9882d788..a5bd693dc53 100644 --- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx +++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx @@ -237,7 +237,7 @@ const TimeTable = ({ css={theme => color && { boxShadow: `inset 0px -2.5px 0px 0px ${color}`, - borderRight: `2px solid ${theme.colors.grayscale.light5}`, + borderRight: `2px solid ${theme.colorBorderSecondary}`, } } >