This is an automated email from the ASF dual-hosted git repository. msyavuz pushed a commit to branch msyavuz/fix/theming-visual-bugs-3 in repository https://gitbox.apache.org/repos/asf/superset.git
commit aa8e27e448141f16962b83c9e90ef7c1427f6a3e Author: Mehmet Salih Yavuz <[email protected]> AuthorDate: Thu Jul 31 16:16:06 2025 +0300 fix: use theme colors in time filter --- .../controls/DateFilterControl/components/DateLabel.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx index b4643bf32b..67d076e60e 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx @@ -30,10 +30,6 @@ export type DateLabelProps = { onClick?: (event: MouseEvent) => void; }; -// This is the color that antd components (such as Select or Input) use on hover -// TODO: use theme.colorPrimary here and in antd components -const ACTIVE_BORDER_COLOR = '#45BED6'; - const LabelContainer = styled.div<{ isActive?: boolean; isPlaceholder?: boolean; @@ -47,10 +43,9 @@ const LabelContainer = styled.div<{ padding: 0 ${theme.sizeUnit * 3}px; - background-color: ${theme.colors.grayscale.light5}; + background-color: ${theme.colorBgContainer}; - border: 1px solid - ${isActive ? ACTIVE_BORDER_COLOR : theme.colors.grayscale.light2}; + border: 1px solid ${isActive ? theme.colorPrimary : theme.colorBorder}; border-radius: ${theme.borderRadius}px; cursor: pointer; @@ -58,11 +53,11 @@ const LabelContainer = styled.div<{ transition: border-color 0.3s cubic-bezier(0.65, 0.05, 0.36, 1); :hover, :focus { - border-color: ${ACTIVE_BORDER_COLOR}; + border-color: ${theme.colorPrimary}; } .date-label-content { - color: ${isPlaceholder ? theme.colors.grayscale.light1 : theme.colorText}; + color: ${isPlaceholder ? theme.colorTextPlaceholder : theme.colorText}; overflow: hidden; text-overflow: ellipsis; min-width: 0; @@ -71,6 +66,7 @@ const LabelContainer = styled.div<{ } span[role='img'] { + color: ${isPlaceholder ? theme.colorTextPlaceholder : theme.colorText}; margin-left: auto; padding-left: ${theme.sizeUnit}px;
