You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by jl...@apache.org on 2025/08/18 21:04:34 UTC
(superset) branch master updated: feat: completely migrate from DeprecatedThemeColors to Antd semantic tokens (#34732)
This is an automated email from the ASF dual-hosted git repository.
jli pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 1f482b42eb feat: completely migrate from DeprecatedThemeColors to Antd semantic tokens (#34732)
1f482b42eb is described below
commit 1f482b42eb20cf77b42e9acaed7e9b77a9cf9d18
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon Aug 18 14:04:26 2025 -0700
feat: completely migrate from DeprecatedThemeColors to Antd semantic tokens (#34732)
Co-authored-by: Claude <no...@anthropic.com>
---
.../plugin-chart/templates/src/types.erb | 2 +-
.../src/components/SQLPopover.tsx | 2 +-
.../src/chart/components/FallbackComponent.tsx | 4 +-
.../src/components/Checkbox/CheckboxIcons.tsx | 4 +-
.../src/components/DeleteModal/index.tsx | 2 +-
.../src/components/Dropdown/index.tsx | 4 +-
.../DropdownContainer/DropdownContainer.tsx | 10 ++---
.../src/components/Icons/Icons.stories.tsx | 19 ++++----
.../src/components/Label/index.tsx | 4 +-
.../src/components/ListViewCard/index.tsx | 2 +-
.../superset-ui-core/src/components/Menu/index.tsx | 6 +--
.../src/components/Metadata/index.tsx | 2 +-
.../src/components/PopoverDropdown/index.tsx | 4 +-
.../src/components/PopoverSection/index.tsx | 6 +--
.../src/components/RefreshLabel/index.tsx | 2 +-
.../src/components/Select/styles.tsx | 8 ++--
.../Table/cell-renderers/NullCell/index.tsx | 2 +-
.../header-renderers/HeaderWithRadioGroup.tsx | 2 +-
.../superset-ui-core/src/components/Tabs/Tabs.tsx | 4 +-
.../src/components/TruncatedList/index.tsx | 2 +-
.../superset-ui-core/src/theme/Theme.test.tsx | 5 ++-
.../packages/superset-ui-core/src/theme/Theme.tsx | 16 +------
.../packages/superset-ui-core/src/theme/types.ts | 36 +--------------
.../superset-ui-core/src/theme/utils.test.ts | 52 ----------------------
.../packages/superset-ui-core/src/theme/utils.ts | 47 -------------------
.../shared/components/ResizableChartDemo.tsx | 2 +-
.../CountryMap.stories.tsx | 2 +-
.../legacy-plugin-chart-calendar/src/Calendar.js | 2 +-
.../src/ReactCalendar.jsx | 40 ++++++++---------
.../src/ReactCountryMap.jsx | 10 ++---
.../src/HorizonChart.jsx | 2 +-
.../src/PairedTTest.jsx | 6 +--
.../src/ReactParallelCoordinates.jsx | 14 +++---
.../src/ReactPartition.jsx | 10 ++---
.../legacy-plugin-chart-rose/src/ReactRose.jsx | 6 +--
.../src/ReactWorldMap.jsx | 2 +-
.../legacy-plugin-chart-world-map/src/WorldMap.js | 6 +--
.../src/components/Legend.tsx | 6 +--
.../src/components/Tooltip.tsx | 4 +-
.../legacy-preset-chart-nvd3/src/ReactNVD3.jsx | 6 +--
.../src/styles/index.tsx | 24 +++++-----
.../BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx | 4 +-
.../BigNumberWithTrendline/transformProps.ts | 4 +-
.../src/Heatmap/transformProps.ts | 4 +-
.../src/Timeseries/transformers.ts | 16 +++----
.../src/PivotTableChart.tsx | 4 +-
.../src/react-pivottable/Styles.js | 10 ++---
.../src/chart/WordCloud.tsx | 2 +-
.../src/SqlLab/components/QueryTable/styles.ts | 2 +-
.../src/SqlLab/components/SaveQuery/index.tsx | 2 +-
.../SqlLab/components/SqlEditorTabHeader/index.tsx | 2 +-
superset-frontend/src/components/Chart/Chart.tsx | 2 +-
.../Chart/ChartContextMenu/ChartContextMenu.tsx | 6 +--
.../Chart/DrillDetail/DrillDetailTableControls.tsx | 2 +-
.../src/components/GridTable/Header.tsx | 2 +-
.../src/components/ListView/CrossLinks.tsx | 2 +-
.../src/components/ListView/CrossLinksTooltip.tsx | 2 +-
.../src/components/ListView/Filters/Search.tsx | 5 +--
.../src/components/ListView/ListView.tsx | 4 +-
.../components/MessageToasts/ToastPresenter.tsx | 2 +-
.../src/components/TableSelector/index.tsx | 2 +-
.../components/AddSliceCard/AddSliceCard.tsx | 4 +-
.../components/BuilderComponentPane/index.tsx | 2 +-
.../DashboardBuilder/DashboardBuilder.tsx | 2 +-
.../DashboardBuilder/DashboardWrapper.tsx | 4 +-
.../components/FiltersBadge/DetailsPanel/index.tsx | 2 +-
.../dashboard/components/FiltersBadge/Styles.tsx | 10 ++---
.../dashboard/components/FiltersBadge/index.tsx | 6 +--
.../src/dashboard/components/Header/index.jsx | 8 ++--
.../src/dashboard/components/IconButton.tsx | 2 +-
.../OverwriteConfirm/OverwriteConfirmModal.tsx | 2 +-
.../src/dashboard/components/dnd/DragHandle.tsx | 2 +-
.../components/filterscope/FilterScope.test.tsx | 2 +-
.../components/filterscope/FilterScopeSelector.jsx | 4 +-
.../components/gridComponents/Divider.jsx | 2 +-
.../dashboard/components/gridComponents/Tab.jsx | 6 +--
.../gridComponents/new/DraggableNewComponent.tsx | 43 +++++-------------
.../dashboard/components/menu/WithPopoverMenu.tsx | 6 +--
.../FilterBar/CrossFilters/CrossFilter.tsx | 2 +-
.../FilterBar/CrossFilters/CrossFilterTitle.tsx | 6 +--
.../ScopingModal/ChartsScopingListPanel.tsx | 4 +-
.../CrossFilters/ScopingModal/ScopingTreePanel.tsx | 2 +-
.../FilterBar/FilterControls/FilterDivider.tsx | 2 +-
.../nativeFilters/FilterBar/Horizontal.tsx | 4 +-
.../nativeFilters/FilterBar/Vertical.tsx | 2 +-
.../nativeFilters/FilterCard/DependenciesRow.tsx | 2 +-
.../nativeFilters/FilterCard/NameRow.tsx | 2 +-
.../components/nativeFilters/FilterCard/Styles.ts | 2 +-
.../FiltersConfigForm/DependencyList.tsx | 4 +-
.../FiltersConfigForm/FiltersConfigForm.tsx | 2 +-
.../FiltersConfigForm/RemovedFilter.tsx | 2 +-
.../FiltersConfigModal/FiltersConfigModal.tsx | 2 +-
.../util/useFilterFocusHighlightStyles.ts | 2 +-
.../explore/components/DataTableControl/index.tsx | 6 +--
.../components/DataTablesPane/DataTablesPane.tsx | 11 +----
.../explore/components/DatasourcePanel/index.tsx | 4 +-
.../explore/components/RunQueryButton/index.tsx | 2 +-
.../controls/AnnotationLayerControl/index.tsx | 2 +-
.../ColumnConfigControl/ColumnConfigControl.tsx | 2 +-
.../ColumnConfigControl/ColumnConfigItem.tsx | 17 ++++---
.../ConditionalFormattingControl.tsx | 4 +-
.../components/controls/CustomListItem/index.tsx | 2 +-
.../controls/DatasourceControl/index.jsx | 2 +-
.../controls/DndColumnSelectControl/Option.tsx | 4 +-
.../index.tsx | 2 +-
.../controls/LayerConfigsControl/FlatLayerTree.tsx | 8 ++--
.../LayerConfigsControl/LayerConfigsControl.tsx | 8 ++--
.../LayerConfigsPopoverContent.tsx | 11 ++---
.../controls/MapViewControl/MapViewControl.tsx | 9 +---
.../MetricControl/AdhocMetricEditPopoverTitle.tsx | 4 +-
.../components/controls/OptionControls/index.tsx | 16 +++----
.../controls/TimeSeriesColumnControl/index.jsx | 2 +-
.../components/controls/VizTypeControl/VizTile.tsx | 4 +-
.../controls/VizTypeControl/VizTypeGallery.tsx | 2 +-
.../alerts/components/NotificationMethod.tsx | 2 +-
.../features/alerts/components/RecipientIcon.tsx | 2 +-
.../annotationLayers/AnnotationLayerModal.tsx | 2 +-
.../DatabaseConnectionForm/TableCatalog.tsx | 2 +-
.../databases/DatabaseModal/SSHTunnelForm.tsx | 2 +-
.../src/features/databases/DatabaseModal/styles.ts | 14 +++---
.../AddDataset/EditDataset/UsageTab/index.tsx | 4 +-
.../features/datasets/AddDataset/Footer/index.tsx | 2 +-
.../datasets/AddDataset/LeftPanel/index.tsx | 6 +--
superset-frontend/src/features/datasets/styles.ts | 16 +++----
superset-frontend/src/features/home/EmptyState.tsx | 2 +-
superset-frontend/src/features/home/Menu.tsx | 6 +--
superset-frontend/src/features/home/RightMenu.tsx | 4 +-
.../src/features/home/SavedQueries.tsx | 2 +-
superset-frontend/src/features/home/SubMenu.tsx | 6 +--
.../src/features/queries/QueryPreviewModal.tsx | 8 ++--
.../src/features/queries/SyntaxHighlighterCopy.tsx | 10 ++---
.../src/features/reports/ReportModal/styles.tsx | 4 +-
.../src/features/themes/types.test.ts | 11 ++---
.../filters/components/Range/RangeFilterPlugin.tsx | 6 +--
.../filters/components/Time/TimeFilterPlugin.tsx | 15 ++++++-
superset-frontend/src/filters/components/common.ts | 19 ++++++--
superset-frontend/src/hooks/useThemeMenuItems.tsx | 6 +--
superset-frontend/src/pages/AllEntities/index.tsx | 6 +--
.../src/pages/DashboardList/index.tsx | 2 +-
superset-frontend/src/pages/DatasetList/index.tsx | 6 +--
.../src/pages/QueryHistoryList/index.tsx | 6 +--
.../src/pages/SavedQueryList/index.tsx | 2 +-
superset-frontend/src/pages/UserInfo/index.tsx | 4 +-
superset-frontend/src/utils/downloadAsImage.ts | 2 +-
superset-frontend/src/views/CRUD/utils.tsx | 2 +-
.../src/visualizations/TimeTable/SparklineCell.tsx | 10 ++---
.../src/visualizations/TimeTable/TimeTable.jsx | 2 +-
147 files changed, 378 insertions(+), 552 deletions(-)
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 4666626993..851e84601e 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 af0ff77db9..4542c8f163 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 d5ff70c954..9f704f3c36 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 (
<div
css={(theme: SupersetTheme) => ({
- 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 9eb1bc5d5e..d6c7e2a7fb 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 = () => {
>
<path
d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
- fill={theme.colors.grayscale.light1}
+ fill={theme.colorFill}
/>
<path d="M14 10H4V8H14V10Z" fill="white" />
</svg>
@@ -71,7 +71,7 @@ export const CheckboxUnchecked = () => {
>
<path
d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
- fill={theme.colors.grayscale.light2}
+ fill={theme.colorFillSecondary}
/>
<path d="M16 2V16H2V2H16V2Z" fill="white" />
</svg>
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 1e9518091c..9bbe0213d0 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 ae2135b184..11741bed6f 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 84a08e2748..7429abc8d1 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(
/>
<Icons.DownOutlined
iconSize="m"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={css`
.anticon {
display: flex;
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx b/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx
index fa45056fdb..b008f77606 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx
@@ -28,14 +28,17 @@ export default {
component: BaseIconComponent,
};
-const palette: Record<string, string | null> = { Default: null };
-Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
- Object.entries(family as Record<string, string>).forEach(
- ([colorName, colorValue]) => {
- palette[`${familyName} / ${colorName}`] = colorValue;
- },
- );
-});
+const palette: Record<string, string | null> = {
+ 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 b84ee843f3..6c37e1d637 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 9a5fb7863c..197659535f 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 6437881a69..f37bc8dd95 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 b40ba71fbb..06ef917074 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 60b6cc1ad7..a6ea94b77b 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 2e395e8a42..488778905e 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({
<Icons.InfoCircleOutlined
role="img"
iconSize="s"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
/>
</Tooltip>
)}
<Icons.CheckOutlined
iconSize="s"
role="img"
- iconColor={
- isSelected ? theme.colorPrimary : theme.colors.grayscale.base
- }
+ iconColor={isSelected ? theme.colorPrimary : theme.colorIcon}
/>
</div>
<div
diff --git a/superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx
index 88b680ab1e..f7a89c5bc3 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx
@@ -45,7 +45,7 @@ const RefreshLabel = ({
onClick={disabled ? undefined : onClick}
css={(theme: SupersetTheme) => ({
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 1dd1964607..e1e4b0833b 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 e01b7c672e..a9ef5d640b 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 cd54635b06..4b48f2bf46 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) {
>
<Icons.SettingOutlined
iconSize="m"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={css`
margin-top: ${theme.sizeUnit * 0.75}px;
margin-right: ${theme.sizeUnit}px;
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx b/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx
index 2688e0b5ed..5ea5c0e509 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.tsx
@@ -83,7 +83,7 @@ const Tabs = Object.assign(StyledTabs, {
const StyledEditableTabs = styled(StyledTabs)`
${({ theme }) => `
.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 0348d064cc..3d4251aeb8 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 d639f89d52..288f1f6dbe 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 4b2431a26f..3d22041455 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 ec260dafc9..39dfc4d671 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<AntdTokens, AllowedAntdTokenKeys>;
-/** 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 7e810337c6..dc9e1b938b 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 ae5c975895..b8ce580ea7 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 5e1d20386f..24d3327703 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 581a9976d7..31f26840db 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 (
<div
style={{
- color: theme.colors.grayscale.base,
+ color: theme.colorTextLabel,
textAlign: 'center',
padding: 20,
}}
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
index d97557a77b..904579867b 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
@@ -124,7 +124,7 @@ function Calendar(element, props) {
colorScale,
min: legendColors[0],
max: legendColors[legendColors.length - 1],
- empty: theme.colors.grayscale.light5,
+ empty: theme.colorBgElevated,
},
displayLegend: showLegend,
itemName: '',
diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx
index 8c8edd1a5e..7c6f684e66 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/ReactCalendar.jsx
@@ -32,8 +32,8 @@ const Calendar = ({ className, ...otherProps }) => {
.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 b857b36040..ba8f06eaeb 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 05b4b6e9aa..e78dafd509 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 f15a85f447..8d71604391 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 740d4043df..f6e4ba890f 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 538c67fa9e..c55d00b4a9 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 b7a2c0c800..2a9a1fc590 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 b9459598e4..6343e59fb5 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 2ec81a62d3..2fd9e5f6a4 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 4249289541..137da24fd3 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 7b58d08745..096d2edcd6 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 35cada7e4d..70d49f3db3 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 8757614bc9..c67829cb5e 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 56a47a2315..8df356fdfd 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 124aa49522..2e172448d6 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 a4d5c60484..ea1b52f92c 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 74f40a7f0c..3a1f01f5f6 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 66f0b9429c..c2a3f22b3e 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 2af50216ad..86dd63f4f6 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 d634e06a59..11b2fe2179 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<FullWordCloudProps, WordCloudState> {
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 03f0eb3e67..198733de44 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 dec0de19da..82782e59f5 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 1f4f5c3691..e78977d1ac 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<Props> = ({ queryEditor }) => {
[QueryState.TimedOut]: theme.colorError,
};
- return statusColors[state] || theme.colors.grayscale.light2;
+ return statusColors[state] || theme.colorIcon;
};
return (
<TabTitleWrapper>
diff --git a/superset-frontend/src/components/Chart/Chart.tsx b/superset-frontend/src/components/Chart/Chart.tsx
index b9cfd4bd19..8e6de71c66 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<ChartProps, {}> {
diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
index 20c65effed..7bc4bb2242 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')}
<MenuItemTooltip
title={crossFilteringTooltipTitle}
- color={
- !isCrossFilterDisabled
- ? theme.colors.grayscale.base
- : undefined
- }
+ color={!isCrossFilterDisabled ? theme.colorIcon : undefined}
/>
</div>
)}
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx
index b507cd6848..e6a3f112cc 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({
>
<RowCountLabel loading={loading && !totalCount} rowcount={totalCount} />
<Icons.ReloadOutlined
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
iconSize="l"
aria-label={t('Reload')}
role="button"
diff --git a/superset-frontend/src/components/GridTable/Header.tsx b/superset-frontend/src/components/GridTable/Header.tsx
index 46ef009170..456a7ddb22 100644
--- a/superset-frontend/src/components/GridTable/Header.tsx
+++ b/superset-frontend/src/components/GridTable/Header.tsx
@@ -70,7 +70,7 @@ const HeaderAction = styled.div`
box-shadow: 0 0 2px var(--ag-chip-border-color);
border-radius: 50%;
&:hover {
- box-shadow: 0 0 4px ${({ theme }) => 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 d0bbcc03e8..dcf2c2f00f 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 52517869ab..ffde1da90c 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 355709d284..cad88f9740 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={
- <Icons.SearchOutlined
- iconColor={theme.colors.grayscale.light1}
- iconSize="l"
- />
+ <Icons.SearchOutlined iconColor={theme.colorIcon} iconSize="l" />
}
/>
</FilterContainer>
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index 732c87fc2d..bdb215770b 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 f1e06262e2..1de0e15978 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<VisualProps>(
}
.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 a557a7c033..c53063f93a 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 d684456a98..6e98110537 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<{
<span
css={(theme: Theme) => 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 e279d3e35a..e8ff251d81 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 5be93425bd..19215399dd 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 65e44e33bf..4d5190e79d 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 69ee0bbfb7..40b4da99c9 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 (
<Popover
- color={`${theme.colors.grayscale.dark2}cc`}
+ color={`${theme.colorBgElevated}cc`}
content={content}
open={popoverVisible}
onOpenChange={handleVisibility}
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 92436e46e0..301b4ac4d5 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -21,8 +21,8 @@ import { css, styled } from '@superset-ui/core';
export const Pill = styled.div`
${({ theme }) => 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 319484642b..6829ff7eb2 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 bcec8ee648..2df789fcb0 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 d5c3d3059f..9e5b9c96e4 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 6c3e2e71e1..77f6e2d3cc 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 47793e647c..f12d173f95 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 fdca5bdbab..7261fbfa01 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 c834911c33..7f1e6022f9 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 5ba5b926ba..466b77d0b7 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 2c6f145ec6..e6357d04a9 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 8f384dc688..3733bfdead 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<DraggableNewCom
>
{({ dragSourceRef }) => (
<NewComponent ref={dragSourceRef} data-test="new-component">
- <NewComponentContent>
- <NewComponentPlaceholder
- className={cx('new-component-placeholder', className)}
- >
- {IconComponent && <IconComponent iconSize="xl" />}
- </NewComponentPlaceholder>
- {label}
- </NewComponentContent>
- <Icons.Drag iconSize="xl" />
+ <NewComponentPlaceholder
+ className={cx('new-component-placeholder', className)}
+ >
+ {IconComponent && <IconComponent iconSize="xl" />}
+ </NewComponentPlaceholder>
+ {label}
</NewComponent>
)}
</DragDroppable>
diff --git a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
index 741058263f..2d7005b526 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 a4b5ab2fc2..6bce8b7a92 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 e217e1dd14..7cf1954565 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 9d0a62b2b9..da1da7e843 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}
<Icons.DeleteOutlined
- iconColor={theme.colors.grayscale.light3}
+ iconColor={theme.colorIcon}
iconSize="xl"
onClick={(event: React.MouseEvent<HTMLElement>) => {
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 d0669b2c55..9af2fbae2c 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 f77c574e20..2201794f0d 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 c58ca06d87..da3ea53826 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 e67f0fcbd0..3e8d86a0f4 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 c0d9446399..53c4d893a1 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) => {
>
<Icons.InfoCircleOutlined
iconSize="m"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={css`
margin-left: ${theme.sizeUnit}px;
`}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
index 2fc3f10083..7f16a57a24 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
@@ -73,7 +73,7 @@ export const NameRow = ({
>
<Icons.EditOutlined
iconSize="l"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={() => 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 319f915182..c949f8e7c0 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 9114ebe12a..3cb79cb114 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 ccc059ba20..f1760d9df7 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 ecf7ccac3b..499b571e0c 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 7e47cd95d2..fa1d2c7968 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({
<StyledExpandButtonWrapper>
<ToggleIcon
iconSize="l"
- iconColor={theme.colors.grayscale.dark2}
+ iconColor={theme.colorIcon}
onClick={toggleExpand}
/>
</StyledExpandButtonWrapper>
diff --git a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
index 0ab38fabbc..3beb62d57a 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 dcaef57be4..05267ef118 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 = ({
>
<Icons.SettingOutlined
iconSize="m"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={{ marginRight: `${theme.sizeUnit}px` }}
onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
/>
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 1c44cd3b86..161c856d66 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<string>(ResultTypes.Results);
const [isRequest, setIsRequest] = useState<Record<ResultTypes, boolean>>({
results: false,
@@ -189,7 +182,7 @@ export const DataTablesPane = ({
)}
</TableControlsWrapper>
);
- }, [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 d5a4841b33..4552a43a79 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 d5ddd8097f..c03cdc1eba 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 ? (
<Button onClick={onStop} buttonStyle="danger" disabled={!canStopQuery}>
- <Icons.Square iconSize="xs" iconColor={theme.colors.primary.light5} />
+ <Icons.Square iconSize="xs" iconColor={theme.colorIcon} />
{t('Stop')}
</Button>
) : (
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
index ba97733c69..dc95723fbc 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<Props, PopoverState> {
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 32d5b7235f..135541ae4a 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<T extends ColumnConfig>({
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 7c26b9f7eb..31ef15f731 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 && (
<Icons.EyeInvisibleOutlined
iconSize="s"
- iconColor={colors.grayscale.base}
+ iconColor={theme.colorIcon}
/>
)}
<Icons.RightOutlined css={caretIconStyle} />
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 09820d44d6..6724b269f8 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 744acb292b..ba0fe7abcb 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 b8f8f27554..410bff801c 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 9174de76f6..f214a4159e 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({
>
<Icons.CloseOutlined
iconSize="m"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={css`
vertical-align: sub;
`}
@@ -89,7 +89,7 @@ export default function Option({
css={css`
margin: ${theme.sizeUnit}px;
`}
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
/>
</CaretContainer>
)}
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 9b529a722c..150fca4deb 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 b5abe9adb1..a218189ece 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 a218040dab..03ea65cf97 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 ef1c530d65..f760f020b9 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 e418fe1f0c..8c7416be69 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 ec7de28693..136b7a4e9c 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<AdhocMetricEditPopoverTitleProps> = ({
<TitleLabel>{title?.label || defaultLabel}</TitleLabel>
<Icons.EditOutlined
- iconColor={
- isHovered ? theme.colorPrimary : theme.colors.grayscale.base
- }
+ iconColor={isHovered ? theme.colorPrimary : theme.colorIcon}
iconSize="m"
/>
</span>
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 28029f8aaf..dfbec224dc 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 = ({
>
<Icons.CloseOutlined
iconSize="m"
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
css={css`
vertical-align: sub;
`}
@@ -414,7 +414,7 @@ export const OptionControlLabel = ({
css={css`
margin: ${theme.sizeUnit}px;
`}
- iconColor={theme.colors.grayscale.light1}
+ iconColor={theme.colorIcon}
/>
</CaretContainer>
)}
diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 6a57fffd2c..cb3dd375fd 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 16709831e6..e1f73ce5fc 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 b5f888e7c0..a9e037e04a 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 f785bddce5..4c53cce544 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 b86e21136e..2baf5c7702 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 681e44b747..a6f520d991 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 f7318029cc..37940d3683 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 = ({
<Icons.CloseOutlined
css={(theme: SupersetTheme) => 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 dd38bb6b2a..fa073b8a0f 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 285aa0d988..e9bd68750f 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 43078fc2b8..1a7c23271f 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<Chart> = [
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 0688836de7..632a3f9ead 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={
<Icons.DownOutlined
iconSize="xs"
- iconColor={theme.colors.grayscale.light5}
+ iconColor={theme.colorTextLightSolid}
/>
}
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 68ec8cf76d..8906c0915f 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 1564dbe7a2..df3055d25e 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 6700cac1ae..09c8c233cb 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 acfedb981b..b9705851e4 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 588f19c504..426603ff8a 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 c76681cd2b..61c0fb6445 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 8bc7c39fb3..79da4e47a2 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 f4f9e1cf35..447b3e7d8a 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 ec8a8c6d55..4b38e381a3 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 0455b39126..2b158c5cfa 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 cc80b6f709..1d4e5c190e 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 a4bdd43480..60d0d53d06 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) {
<Tooltip title={message} placement="top">
<Icons.InfoCircleOutlined
iconSize="m"
- iconColor={
- status === 'error'
- ? theme.colors.error.base
- : theme.colors.grayscale.base
- }
+ iconColor={status === 'error' ? theme.colorError : theme.colorIcon}
className="tooltip-icon"
/>
</Tooltip>
diff --git a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
index 15d2c8b446..a2f11978d3 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 6ba9eabb14..87b7b08221 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 67e4411929..dfea58caf2 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 ? (
- <Icons.FormatPainterOutlined
- style={{ color: theme.colors.error.base }}
- />
+ <Icons.FormatPainterOutlined style={{ color: theme.colorError }} />
) : (
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 659b32164a..f29f4e0bff 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 675c518002..ce1c601903 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 b3c0f89e9d..6739824bf1 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 5ea28f0ba9..dc4de5b309 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 = (
- <Icons.CircleSolid iconColor={theme.colors.grayscale.light1} />
+ <Icons.CircleSolid iconColor={theme.colorIcon} />
);
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 0dfc659d36..1342d3fb2e 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 061cba8ce0..8c96cb7958 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 9f1297e408..e8e36bc27e 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 ef021e51fa..f7e4082cfb 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 fcf93e6bb9..9fde1b80a6 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 55d9882d78..a5bd693dc5 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}`,
}
}
>