You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2025/05/06 00:23:03 UTC
(superset) 05/05: align on colorBorder
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 38c04708ccc147cb836189c82a6b0a0e43f66ef7
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 5 17:22:18 2025 -0700
align on colorBorder
---
.../superset-ui-chart-controls/src/components/SQLPopover.tsx | 2 +-
.../src/SqlLab/components/TemplateParamsEditor/index.tsx | 2 +-
superset-frontend/src/dashboard/components/CssEditor/index.tsx | 2 +-
.../dashboard/components/DashboardBuilder/DashboardBuilder.tsx | 2 +-
.../components/OverwriteConfirm/OverwriteConfirmModal.tsx | 2 +-
.../src/dashboard/components/filterscope/FilterScopeSelector.jsx | 2 +-
.../src/dashboard/components/gridComponents/Column.jsx | 2 +-
.../src/dashboard/components/menu/BackgroundStyleDropdown.tsx | 2 +-
.../nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx | 2 +-
.../src/explore/components/ExploreContentPopover.tsx | 2 +-
.../controls/ColumnConfigControl/ColumnConfigControl.tsx | 2 +-
.../ConditionalFormattingControl/ConditionalFormattingControl.tsx | 8 ++------
.../src/explore/components/controls/TextAreaControl.jsx | 2 +-
.../explore/components/controls/VizTypeControl/VizTypeGallery.tsx | 8 ++++----
.../src/features/annotationLayers/AnnotationLayerModal.tsx | 2 +-
superset-frontend/src/features/databases/DatabaseModal/styles.ts | 2 +-
superset-frontend/src/pages/Home/index.tsx | 2 +-
17 files changed, 21 insertions(+), 25 deletions(-)
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 b0cd193949..af760bcf42 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/src/SqlLab/components/TemplateParamsEditor/index.tsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx
index d23290ea4e..2f8019f4d1 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/dashboard/components/CssEditor/index.tsx b/superset-frontend/src/dashboard/components/CssEditor/index.tsx
index 1744f03496..506578916a 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 7ee7f37813..9ec4b6d2b6 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -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/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
index ac91e3b73b..636a040645 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 160e39d582..fff0ef7f20 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 2593a5906c..2e0154cc1c 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 d2b331ad0d..30f126061d 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 bfe8a2d667..8e7baa09d0 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/explore/components/ExploreContentPopover.tsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
index 110782d651..22407c1d6c 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/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
index a232f0e190..60e5c2da99 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
@@ -129,7 +129,7 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
<ControlHeader {...props} />
<div
css={{
- border: `1px solid ${theme.colors.grayscale.light2}`,
+ border: `1px solid ${theme.colorBorder}`,
borderRadius: theme.borderRadius,
}}
>
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 2562df27aa..5f52c9c1f5 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -36,7 +36,7 @@ import {
const FormattersContainer = styled.div`
${({ theme }) => css`
padding: ${theme.sizeUnit}px;
- border: solid 1px ${theme.colors.grayscale.light2};
+ border: solid 1px ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
`}
`;
@@ -146,10 +146,7 @@ const ConditionalFormattingControl = ({
{conditionalFormattingConfigs.map((config, index) => (
<FormatterContainer key={index}>
<CloseButton onClick={() => onDelete(index)}>
- <Icons.CloseOutlined
- iconSize="m"
- iconColor={theme.colors.grayscale.light1}
- />
+ <Icons.CloseOutlined iconSize="m" />
</CloseButton>
<FormattingPopover
title={t('Edit formatter')}
@@ -169,7 +166,6 @@ const ConditionalFormattingControl = ({
css={css`
margin-top: ${theme.sizeUnit}px;
`}
- iconColor={theme.colors.grayscale.light1}
/>
</CaretContainer>
</OptionControlContainer>
diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
index ecb614f8bd..913d8e4243 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 cf2bb358df..40a868ab77 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`
@@ -263,7 +263,7 @@ const Examples = styled.div`
img {
height: 100%;
border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
}
`;
@@ -275,7 +275,7 @@ 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: 1px solid ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
transition: border-color ${theme.motionDurationMid};
}
@@ -285,7 +285,7 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
}
&:hover:not(.selected) img {
- border: 1px solid ${theme.colors.grayscale.light1};
+ border: 1px solid ${theme.colorBorder};
}
.viztype-label {
diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
index 231dd7c2de..ba8d3fba1a 100644
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
@@ -63,7 +63,7 @@ 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: 1px solid ${({ theme }) => theme.colorBorder};
border-radius: ${({ theme }) => 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 d597bff8c5..8b27ba81e1 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@@ -279,7 +279,7 @@ 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: 1px solid ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
&[name='name'] {
diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx
index 86b81bbc88..7eff41df7a 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 {