diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index ccb4d0f1175..08682f0b907 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -53944,7 +53944,7 @@ "@storybook/react-webpack5": "8.2.9", "babel-loader": "^9.1.3", "fork-ts-checker-webpack-plugin": "^9.0.2", - "ts-loader": "^9.5.1", + "ts-loader": "^9.5.2", "typescript": "^5.7.2" }, "peerDependencies": { diff --git a/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb b/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb index 7f9e6383e03..5fd08d655b1 100644 --- a/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb +++ b/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb @@ -30,7 +30,7 @@ import { <%= packageLabel %>Props, <%= packageLabel %>StylesProps } from './type const Styles = styled.div<<%= packageLabel %>StylesProps>` background-color: ${({ theme }) => theme.colors.primary.light2}; padding: ${({ theme }) => theme.sizeUnit * 4}px; - border-radius: ${({ theme }) => theme.sizeUnit * 2}px; + border-radius: ${({ theme }) => theme.borderRadius}px; height: ${({ height }) => height}px; width: ${({ width }) => width}px; `; 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 b0cd193949b..af760bcf425 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 @@ -65,7 +65,7 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => { readOnly wrapEnabled style={{ - border: `1px solid ${theme.colors.grayscale.light2}`, + border: `1px solid ${theme.colorBorder}`, background: theme.colorPrimaryBg, maxWidth: theme.sizeUnit * 100, }} 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 521ad32e7c2..538c67fa9eb 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx +++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx @@ -68,7 +68,7 @@ export default styled(Partition)` padding: ${theme.sizeUnit}px; pointer-events: none; background-color: ${theme.colors.grayscale.dark2}; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; } .partition-tooltip td { 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 092aa007f30..5e42550f266 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 @@ -209,7 +209,7 @@ function WorldMap(element, props) { popupOnHover: !inContextMenu, highlightOnHover: !inContextMenu, borderWidth: 1, - borderColor: theme.colors.grayscale.light5, + borderColor: theme.colorSplit, highlightBorderColor: theme.colors.grayscale.light5, highlightFillColor: color, highlightBorderWidth: 1, 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 511ae2308f4..3746e1d01e9 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 @@ -60,7 +60,7 @@ const SymbolWrapper = styled.span` background-color: ${backgroundColor}; color: ${textColor}; padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px; - border-radius: ${theme.sizeUnit * 2}px; + border-radius: ${theme.borderRadius}px; margin-right: ${theme.sizeUnit}px; `} `; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx index 53a2b44adda..b6209a227e6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx @@ -396,7 +396,7 @@ export default styled(BigNumberVis)` margin: -0.5em 0 0.4em; line-height: 1; padding: ${theme.sizeUnit}px; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; } } diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx b/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx index 77314c6bdea..2e7e27ae1eb 100644 --- a/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx +++ b/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx @@ -23,7 +23,7 @@ import { HandlebarsProps, HandlebarsStylesProps } from './types'; const Styles = styled.div` padding: ${({ theme }) => theme.sizeUnit * 4}px; - border-radius: ${({ theme }) => theme.sizeUnit * 2}px; + border-radius: ${({ theme }) => theme.borderRadius}px; height: ${({ height }) => height}px; width: ${({ width }) => width}px; overflow: auto; diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx index d23290ea4e6..2f8019f4d17 100644 --- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx +++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx @@ -27,7 +27,7 @@ import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor'; const StyledConfigEditor = styled(ConfigEditor)` &.ace_editor { - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border: 1px solid ${({ theme }) => theme.colorBorder}; } `; diff --git a/superset-frontend/src/components/CronPicker/index.tsx b/superset-frontend/src/components/CronPicker/index.tsx index abbddaf9b3d..9d1ad227518 100644 --- a/superset-frontend/src/components/CronPicker/index.tsx +++ b/superset-frontend/src/components/CronPicker/index.tsx @@ -186,7 +186,7 @@ export const CronPicker = styled((props: CronProps) => ( .react-js-cron-custom-select .antd5-select-selection-placeholder { flex: auto; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; } .react-js-cron-custom-select .antd5-select-selection-overflow-item { @@ -195,7 +195,7 @@ export const CronPicker = styled((props: CronProps) => ( .react-js-cron-select > div:first-of-type, .react-js-cron-custom-select { - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; } `} `; diff --git a/superset-frontend/src/components/Datasource/Field.tsx b/superset-frontend/src/components/Datasource/Field.tsx index 071cb5a2da9..70f2751e11c 100644 --- a/superset-frontend/src/components/Datasource/Field.tsx +++ b/superset-frontend/src/components/Datasource/Field.tsx @@ -81,7 +81,7 @@ export default function Field({ {!compact && description && (
({ - color: theme.colors.grayscale.base, + color: theme.colorText, [inline ? 'marginLeft' : 'marginTop']: theme.sizeUnit, })} > diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx index 63aa682f40a..3b96c5a0d72 100644 --- a/superset-frontend/src/components/EmptyState/index.tsx +++ b/superset-frontend/src/components/EmptyState/index.tsx @@ -78,7 +78,7 @@ const EmptyStateContainer = styled.div` color: inherit; text-decoration: underline; &:hover { - color: ${theme.colors.grayscale.base}; + color: ${theme.colorText}; } } `} diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx index c515f472664..312988a586b 100644 --- a/superset-frontend/src/components/ListView/Filters/Search.tsx +++ b/superset-frontend/src/components/ListView/Filters/Search.tsx @@ -44,7 +44,7 @@ const Container = styled.div` `; const StyledInput = styled(Input)` - border-radius: ${({ theme }) => theme.sizeUnit}px; + border-radius: ${({ theme }) => theme.borderRadius}px; `; function SearchFilter( diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index 9a267e4a549..68cae5545f4 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -146,7 +146,7 @@ const ViewModeContainer = styled.div` .toggle-button { display: inline-block; - border-radius: ${({ theme }) => theme.sizeUnit / 2}px; + border-radius: ${({ theme }) => theme.borderRadius}px; padding: ${({ theme }) => theme.sizeUnit}px; padding-bottom: ${({ theme }) => theme.sizeUnit * 0.5}px; diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx index 8f315cb8d6e..b93e9f4b726 100644 --- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx +++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx @@ -126,7 +126,7 @@ const SliceAddedBadgePlaceholder: FC<{ css={(theme: Theme) => css` /* Display styles */ border: 1px solid ${theme.colorBorder}; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; color: ${theme.colorPrimaryText}; font-size: ${theme.fontSizeXS}px; letter-spacing: 0.02em; @@ -152,7 +152,7 @@ const SliceAddedBadge: FC<{ placeholder?: HTMLDivElement }> = ({ css={(theme: Theme) => css` /* Display styles */ border: 1px solid ${theme.colorBorder}; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; color: ${theme.colorPrimaryText}; font-size: ${theme.fontSizeXS}px; letter-spacing: 0.02em; @@ -206,7 +206,7 @@ const AddSliceCard: FC<{ data-test="chart-card" css={(theme: Theme) => css` border: 1px solid ${theme.colorBorder}; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; padding: ${theme.sizeUnit * 4}px; margin: 0 ${theme.sizeUnit * 3}px ${theme.sizeUnit * 3}px ${theme.sizeUnit * 3}px; diff --git a/superset-frontend/src/dashboard/components/CssEditor/index.tsx b/superset-frontend/src/dashboard/components/CssEditor/index.tsx index 1744f03496b..506578916a1 100644 --- a/superset-frontend/src/dashboard/components/CssEditor/index.tsx +++ b/superset-frontend/src/dashboard/components/CssEditor/index.tsx @@ -50,7 +50,7 @@ const StyledWrapper = styled.div` } } .css-editor { - border: 1px solid ${theme.colors.grayscale.light1}; + border: 1px solid ${theme.colorBorder}; } `} `; diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index 05e5be16773..9ec4b6d2b6b 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -117,7 +117,7 @@ const StyledHeader = styled.div` left: ${theme.sizeUnit}px; top: ${theme.sizeUnit}px; border: 1px dashed transparent; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; opacity: 0.5; } `} @@ -216,7 +216,7 @@ const DashboardContentWrapper = styled.div` .grid-row:after, .dashboard-component-tabs > .hover-menu + div:after { - border: 1px dashed ${theme.colors.grayscale.light2}; + border: 1px dashed ${theme.colorBorder}; } /* provide hit area in case row contents is edge to edge */ diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx index 6b62f097ab9..9b3b5c50545 100644 --- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx +++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx @@ -70,7 +70,7 @@ const GridContent = styled.div` display: flex; align-items: center; justify-content: center; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; overflow: hidden; &:before { @@ -79,7 +79,7 @@ const GridContent = styled.div` width: calc(100% - ${theme.sizeUnit * 2}px); height: calc(100% - ${theme.sizeUnit * 2}px); border: 1px dashed transparent; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; opacity: 0.5; } } diff --git a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx index ac91e3b73b6..636a040645b 100644 --- a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx +++ b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx @@ -42,7 +42,7 @@ const StyledTitle = styled.h2` const StyledEditor = styled.div` ${({ theme }) => ` table { - border: 1px ${theme.colors.grayscale.light2} solid; + border: 1px ${theme.colorBorder} solid; } pre { font-size: 11px; diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx index 160e39d5827..fff0ef7f203 100644 --- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx +++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx @@ -292,7 +292,7 @@ const ScopeSelector = styled.div` right: ${theme.sizeUnit * 4}px; top: ${theme.sizeUnit * 4}px; border-radius: ${theme.borderRadius}px; - border: 1px solid ${theme.colors.grayscale.light2}; + border: 1px solid ${theme.colorBorder}; padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px; font-size: ${theme.fontSize}px; outline: none; diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx index 2593a5906c6..2e0154cc1cb 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx @@ -83,7 +83,7 @@ const ColumnStyles = styled.div` left: 0; z-index: 1; pointer-events: none; - border: 1px dashed ${theme.colors.grayscale.light2}; + border: 1px dashed ${theme.colorBorder}; } .dashboard--editing .resizable-container--resizing:hover > &:after, .dashboard--editing .hover-menu:hover + &:after { diff --git a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx index d2b331ad0dc..30f126061d5 100644 --- a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx +++ b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx @@ -48,7 +48,7 @@ const BackgroundStyleOption = styled.div` background: transparent; &:before { background: ${theme.colors.grayscale.light5}; - border: 1px solid ${theme.colors.grayscale.light2}; + border: 1px solid ${theme.colorBorder}; } } /* Create the transparent rect icon */ diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx index bfe8a2d667f..8e7baa09d0b 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx @@ -47,7 +47,7 @@ const StyledCrossFilterColumn = styled('span')` const StyledTag = styled(Tag)` ${({ theme }) => ` - border: 1px solid ${theme.colors.grayscale.light3}; + border: 1px solid ${theme.colorBorder}; border-radius: 2px; .anticon-close { vertical-align: middle; diff --git a/superset-frontend/src/dashboard/styles.ts b/superset-frontend/src/dashboard/styles.ts index 3e1cb73ef51..b63cd015ee7 100644 --- a/superset-frontend/src/dashboard/styles.ts +++ b/superset-frontend/src/dashboard/styles.ts @@ -95,7 +95,7 @@ export const focusStyle = (theme: SupersetTheme) => css` .header-controls span { &:focus-visible { box-shadow: 0 0 0 2px ${theme.colorPrimaryText}; - border-radius: ${theme.sizeUnit / 2}px; + border-radius: ${theme.borderRadius}px; outline: none; text-decoration: none; } diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx index 57c36e23b30..0ecfca02209 100644 --- a/superset-frontend/src/explore/components/ControlHeader.tsx +++ b/superset-frontend/src/explore/components/ControlHeader.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { FC, ReactNode, useMemo, useRef } from 'react'; +import { FC, ReactNode } from 'react'; import { t, css, useTheme, SupersetTheme } from '@superset-ui/core'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; import { FormLabel, Tooltip } from 'src/components'; @@ -64,22 +64,6 @@ const ControlHeader: FC = ({ danger, }) => { const theme = useTheme(); - const hasHadNoErrors = useRef(false); - const labelColor = useMemo(() => { - if (!validationErrors.length) { - hasHadNoErrors.current = true; - } - - if (hasHadNoErrors.current) { - if (validationErrors.length) { - return theme.colorErrorText; - } - - return 'unset'; - } - - return theme.colorWarningText; - }, [theme.colorErrorText, theme.colorWarningText, validationErrors.length]); if (!label) { return null; @@ -138,7 +122,7 @@ const ControlHeader: FC = ({ position: relative; `} > - {leftNode && {leftNode}} + {leftNode && {leftNode} } = ({ {danger && ( - @@ -177,12 +161,7 @@ const ControlHeader: FC = ({ placement="top" title={validationErrors?.join(' ')} > - + {' '} )} diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index 182049fbbc6..993aacf0a78 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -556,10 +556,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => { sectionHasHadNoErrors.current[sectionId] = true; } - const errorColor = sectionHasHadNoErrors.current[sectionId] - ? theme.colorWarningText - : theme.colorErrorText; - const PanelHeader = () => ( { id={`${kebabCase('validation-errors')}-tooltip`} title={t('This section contains validation errors')} > - + )} @@ -696,10 +687,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => { dataTabHasHadNoErrors.current = true; } - const errorColor = dataTabHasHadNoErrors.current - ? theme.colorWarningText - : theme.colorErrorText; - return ( <> {t('Data')} @@ -715,11 +702,9 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => { placement="right" title={props.errorMessage} > - diff --git a/superset-frontend/src/explore/components/ExploreContentPopover.tsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx index 110782d6512..22407c1d6ce 100644 --- a/superset-frontend/src/explore/components/ExploreContentPopover.tsx +++ b/superset-frontend/src/explore/components/ExploreContentPopover.tsx @@ -27,6 +27,6 @@ export const ExplorePopoverContent = styled.div` cursor: nwse-resize; } .filter-sql-editor { - border: ${({ theme }) => theme.colors.grayscale.light2} solid thin; + border: ${({ theme }) => theme.colorBorder} solid thin; } `; diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 48f639539e5..0c9cf9c7004 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -238,7 +238,7 @@ class AnnotationLayerControl extends PureComponent { return (
- ({ borderRadius: theme.sizeUnit })}> + ({ borderRadius: theme.borderRadius })}> {annotations} ({ - borderRadius: theme.sizeUnit, + borderRadius: theme.borderRadius, })} > {this.props.value.map((o, i) => { diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx index e51807b4fa5..60e5c2da997 100644 --- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx +++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx @@ -129,8 +129,8 @@ export default function ColumnConfigControl({
{columnsWithChildInfo.map(col => ( diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx index 9d20db321b2..5f52c9c1f5e 100644 --- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx +++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx @@ -36,8 +36,8 @@ import { const FormattersContainer = styled.div` ${({ theme }) => css` padding: ${theme.sizeUnit}px; - border: solid 1px ${theme.colors.grayscale.light2}; - border-radius: ${theme.sizeUnit}px; + border: solid 1px ${theme.colorBorder}; + border-radius: ${theme.borderRadius}px; `} `; @@ -146,10 +146,7 @@ const ConditionalFormattingControl = ({ {conditionalFormattingConfigs.map((config, index) => ( onDelete(index)}> - + diff --git a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx index 06a170c9a0c..5ffda26c259 100644 --- a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx +++ b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx @@ -29,12 +29,12 @@ export default function CustomListItem(props: CustomListItemProps) { const css: Record | string>> = { '&.antd5-list-item': { ':first-of-type': { - borderTopLeftRadius: theme.sizeUnit, - borderTopRightRadius: theme.sizeUnit, + borderTopLeftRadius: theme.borderRadius, + borderTopRightRadius: theme.borderRadius, }, ':last-of-type': { - borderBottomLeftRadius: theme.sizeUnit, - borderBottomRightRadius: theme.sizeUnit, + borderBottomLeftRadius: theme.borderRadius, + borderBottomRightRadius: theme.borderRadius, }, }, }; diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx index 037ce6ece2c..7104a72228e 100644 --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx @@ -104,7 +104,7 @@ export const HeaderContainer = styled.div` export const LabelsContainer = styled.div` padding: ${({ theme }) => theme.sizeUnit}px; border: solid 1px ${({ theme }) => theme.colorSplit}; - border-radius: ${({ theme }) => theme.sizeUnit}px; + border-radius: ${({ theme }) => theme.borderRadius}px; `; const borderPulse = keyframes` @@ -133,19 +133,19 @@ export const DndLabelsContainer = styled.div<{ padding: ${theme.sizeUnit}px; border: ${ !isLoading && isDragging - ? `dashed 1px ${canDrop ? theme.colorBorder : theme.colorErrorBgHover}` + ? `dashed 1px ${canDrop ? theme.colorSplit : theme.colorErrorBgHover}` : `solid 1px ${ isLoading && isDragging ? theme.colorWarningBgHover : theme.colorBorder }` }; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; &:before, &:after { content: ' '; position: absolute; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; } &:before { display: ${isDragging || isLoading ? 'block' : 'none'}; @@ -198,8 +198,8 @@ export const AddControlLabel = styled.div<{ padding-left: ${({ theme }) => theme.sizeUnit}px; font-size: ${({ theme }) => theme.fontSizeSM}px; color: ${({ theme }) => theme.colors.grayscale.light1}; - border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2}; - border-radius: ${({ theme }) => theme.sizeUnit}px; + border: dashed 1px ${({ theme }) => theme.colorSplit}; + border-radius: ${({ theme }) => theme.borderRadius}px; cursor: ${({ cancelHover }) => (cancelHover ? 'inherit' : 'pointer')}; :hover { @@ -211,6 +211,9 @@ export const AddControlLabel = styled.div<{ background-color: ${({ cancelHover, theme }) => cancelHover ? 'inherit' : theme.colors.grayscale.light3}; } + svg { + margin-right: ${({ theme }) => theme.sizeUnit}px; + } `; export const AddIconButton = styled.button` diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx index ecb614f8bda..913d8e4243b 100644 --- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx +++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx @@ -83,7 +83,7 @@ class TextAreaControl extends Component { const minLines = inModal ? 40 : this.props.minLines || 12; if (this.props.language) { const style = { - border: `1px solid ${this.props.theme.colors.grayscale.light1}`, + border: `1px solid ${this.props.theme.colorBorder}`, minHeight: `${minLines}em`, width: 'auto', ...this.props.textAreaStyles, diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx index a58e2804d57..a6d278fccf7 100644 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx @@ -222,7 +222,7 @@ const IconsPane = styled.div` const DetailsPane = (theme: SupersetTheme) => css` grid-area: details; - border-top: 1px solid ${theme.colors.grayscale.light2}; + border-top: 1px solid ${theme.colorBorder}; `; const DetailsPopulated = (theme: SupersetTheme) => css` @@ -262,8 +262,8 @@ const Examples = styled.div` img { height: 100%; - border-radius: ${({ theme }) => theme.sizeUnit}px; - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border-radius: ${({ theme }) => theme.borderRadius}px; + border: 1px solid ${({ theme }) => theme.colorBorder}; } `; @@ -275,17 +275,17 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css` img { min-width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px; min-height: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px; - border: 1px solid ${theme.colors.grayscale.light2}; - border-radius: ${theme.sizeUnit}px; + border: 1px solid ${theme.colorBorder}; + border-radius: ${theme.borderRadius}px; transition: border-color ${theme.motionDurationMid}; } &.selected img { - border: 2px solid ${theme.colors.primary.light2}; + border: 2px solid ${theme.colorPrimaryBorder}; } &:hover:not(.selected) img { - border: 1px solid ${theme.colors.grayscale.light1}; + border: 1px solid ${theme.colorBorder}; } .viztype-label { @@ -298,7 +298,7 @@ const HighlightLabel = styled.div` ${({ theme }) => ` border: 1px solid ${theme.colorPrimaryText}; box-sizing: border-box; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; background: ${theme.colors.grayscale.light5}; line-height: ${theme.sizeUnit * 2.5}px; color: ${theme.colorPrimaryText}; diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx index e9192bb3fc2..0469d1ff4f2 100644 --- a/superset-frontend/src/features/alerts/AlertReportModal.tsx +++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx @@ -315,7 +315,7 @@ export const StyledInputContainer = styled.div` padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px; border-style: none; border: 1px solid ${theme.colorBorder}; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; &[name='description'] { flex: 1 1 auto; diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx index 5e2622aa568..46713354b17 100644 --- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx +++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx @@ -31,7 +31,7 @@ const PAGE_SIZE = 10; const AllEntitiesTableContainer = styled.div` text-align: left; - border-radius: ${({ theme }) => theme.sizeUnit * 1}px 0; + border-radius: ${({ theme }) => theme.borderRadius}px 0; .table { table-layout: fixed; } diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx index cf98f44e293..ba8d3fba1aa 100644 --- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx +++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx @@ -63,8 +63,8 @@ const LayerContainer = styled.div` input[type='text'] { padding: ${({ theme }) => theme.sizeUnit * 1.5}px ${({ theme }) => theme.sizeUnit * 2}px; - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - border-radius: ${({ theme }) => theme.sizeUnit}px; + border: 1px solid ${({ theme }) => theme.colorBorder}; + border-radius: ${({ theme }) => theme.borderRadius}px; width: 50%; } diff --git a/superset-frontend/src/features/annotations/AnnotationModal.tsx b/superset-frontend/src/features/annotations/AnnotationModal.tsx index c4273866a45..10de4a00f9a 100644 --- a/superset-frontend/src/features/annotations/AnnotationModal.tsx +++ b/superset-frontend/src/features/annotations/AnnotationModal.tsx @@ -45,7 +45,7 @@ const StyledAnnotationTitle = styled.div` const StyledJsonEditor = styled(JsonEditor)` border-radius: ${({ theme }) => theme.borderRadius}px; - border: 1px solid ${({ theme }) => theme.colors.primary.light2}; + border: 1px solid ${({ theme }) => theme.colorPrimaryBorder}; `; const AnnotationContainer = styled.div` diff --git a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx index da37b58a559..b4965051e80 100644 --- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx +++ b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx @@ -69,8 +69,8 @@ const TemplateContainer = styled.div( input[type='text'] { padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px; - border: 1px solid ${theme.colors.grayscale.light2}; - border-radius: ${theme.sizeUnit}px; + border: 1px solid ${theme.colorBorder}; + border-radius: ${theme.borderRadius}px; width: 50%; } `, diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts index 3d6f4d265df..0620600831c 100644 --- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts +++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts @@ -179,8 +179,8 @@ export const formHelperStyles = (theme: SupersetTheme) => css` export const wideButton = (theme: SupersetTheme) => css` width: 100%; - border: 1px solid ${theme.colors.primary.dark2}; - color: ${theme.colors.primary.dark2}; + border: 1px solid ${theme.colorPrimaryText}; + color: ${theme.colorPrimaryText}; &:hover, &:focus { border: 1px solid ${theme.colorPrimary}; @@ -279,8 +279,8 @@ export const StyledInputContainer = styled.div` input[type='number'] { padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px; border-style: none; - border: 1px solid ${theme.colors.grayscale.light2}; - border-radius: ${theme.sizeUnit}px; + border: 1px solid ${theme.colorBorder}; + border-radius: ${theme.borderRadius}px; &[name='name'] { flex: 0 1 auto; @@ -307,8 +307,8 @@ export const StyledInputContainer = styled.div` export const StyledJsonEditor = styled(JsonEditor)` flex: 1 1 auto; - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - border-radius: ${({ theme }) => theme.sizeUnit}px; + border: 1px solid ${({ theme }) => theme.colorBorder}; + border-radius: ${({ theme }) => theme.borderRadius}px; `; export const StyledExpandableForm = styled.div` @@ -367,7 +367,7 @@ export const TabHeader = styled.div` `; export const CreateHeaderTitle = styled.div` - color: ${({ theme }) => theme.colors.grayscale.dark2}; + color: ${({ theme }) => theme.colorText}; font-weight: ${({ theme }) => theme.fontWeightStrong}; font-size: ${({ theme }) => theme.fontSize}px; `; @@ -414,8 +414,8 @@ export const CredentialInfoForm = styled.div` .input-form { height: 100px; width: 100%; - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; - border-radius: ${({ theme }) => theme.sizeUnit}px; + border: 1px solid ${({ theme }) => theme.colorBorder}; + border-radius: ${({ theme }) => theme.borderRadius}px; resize: vertical; padding: ${({ theme }) => theme.sizeUnit * 1.5}px ${({ theme }) => theme.sizeUnit * 2}px; diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx index 98c6c1dd02c..a3693d091ef 100644 --- a/superset-frontend/src/pages/ChartCreation/index.tsx +++ b/superset-frontend/src/pages/ChartCreation/index.tsx @@ -75,7 +75,7 @@ const StyledContainer = styled.div` width: 100%; max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px; max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT}px); - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; background-color: ${theme.colorBgContainer}; margin-left: auto; margin-right: auto; @@ -106,7 +106,7 @@ const StyledContainer = styled.div` & .viz-gallery { border: 1px solid ${theme.colorBorder}; - border-radius: ${theme.sizeUnit}px; + border-radius: ${theme.borderRadius}px; margin: ${theme.sizeUnit}px 0px; max-height: calc(100vh - ${ELEMENTS_EXCEPT_VIZ_GALLERY}px); flex: 1; diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx index 86b81bbc88d..7eff41df7ac 100644 --- a/superset-frontend/src/pages/Home/index.tsx +++ b/superset-frontend/src/pages/Home/index.tsx @@ -104,7 +104,7 @@ const WelcomeContainer = styled.div` } .antd5-card.ant-card-bordered { - border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border: 1px solid ${({ theme }) => theme.colorBorder}; } .loading-cards {