diff --git a/datahub-web-react/src/CustomThemeProvider.tsx b/datahub-web-react/src/CustomThemeProvider.tsx index fc0b091b7723fe..8e582e564d49c6 100644 --- a/datahub-web-react/src/CustomThemeProvider.tsx +++ b/datahub-web-react/src/CustomThemeProvider.tsx @@ -1,6 +1,8 @@ import React, { useState } from 'react'; import { ThemeProvider } from 'styled-components'; +import GlobalThemeStyles from '@app/GlobalThemeStyles'; +import { loadIsDarkMode } from '@app/useIsDarkMode'; import { useIsThemeV2 } from '@app/useIsThemeV2'; import { useCustomThemeId } from '@app/useSetAppTheme'; import themes from '@conf/theme/themes'; @@ -15,15 +17,24 @@ const CustomThemeProvider = ({ children }: Props) => { // Note: AppConfigContext not provided yet, so both of these calls rely on the DEFAULT_APP_CONFIG const isThemeV2 = useIsThemeV2(); const customThemeId = useCustomThemeId(); + const isDarkMode = loadIsDarkMode(); // Note: If custom theme id is a json file, it will only be loaded later in useSetAppTheme - const defaultTheme = isThemeV2 ? themes.themeV2 : themes.themeV1; + let defaultTheme = themes.themeV1; + if (isThemeV2 && isDarkMode) { + defaultTheme = themes.themeV2Dark; + } else if (isThemeV2) { + defaultTheme = themes.themeV2; + } const customTheme = customThemeId ? themes[customThemeId] : null; const [theme, setTheme] = useState(customTheme ?? defaultTheme); return ( - {children} + + + {children} + ); }; diff --git a/datahub-web-react/src/alchemy-components/components/ActionsBar/ActionsBar.tsx b/datahub-web-react/src/alchemy-components/components/ActionsBar/ActionsBar.tsx index 7c8770efefa4f0..555f34ee91699c 100644 --- a/datahub-web-react/src/alchemy-components/components/ActionsBar/ActionsBar.tsx +++ b/datahub-web-react/src/alchemy-components/components/ActionsBar/ActionsBar.tsx @@ -10,9 +10,9 @@ const ActionsContainer = styled.div` width: fit-content; align-self: center; border-radius: 12px; - box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12); + box-shadow: ${(props) => props.theme.colors.shadowMd}; - background-color: white; + background-color: ${(props) => props.theme.colors.bg}; position: absolute; left: 50%; bottom: 2px; diff --git a/datahub-web-react/src/alchemy-components/components/AutoComplete/components.tsx b/datahub-web-react/src/alchemy-components/components/AutoComplete/components.tsx index 20668e27ee9224..a6a026a226fff1 100644 --- a/datahub-web-react/src/alchemy-components/components/AutoComplete/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/AutoComplete/components.tsx @@ -2,9 +2,9 @@ import styled from 'styled-components'; export const DropdownWrapper = styled.div` & .rc-virtual-list-scrollbar-thumb { - background: rgba(193, 196, 208, 0.8) !important; + background: ${({ theme }) => theme.colors.scrollbarThumb} !important; } & .rc-virtual-list-scrollbar-show { - background: rgba(193, 196, 208, 0.3) !important; + background: ${({ theme }) => theme.colors.scrollbarTrack} !important; } `; diff --git a/datahub-web-react/src/alchemy-components/components/Avatar/Avatar.tsx b/datahub-web-react/src/alchemy-components/components/Avatar/Avatar.tsx index c9ba03f56480ba..44d7e1ff5d11d5 100644 --- a/datahub-web-react/src/alchemy-components/components/Avatar/Avatar.tsx +++ b/datahub-web-react/src/alchemy-components/components/Avatar/Avatar.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { AvatarImage, AvatarImageWrapper, AvatarText, Container } from '@components/components/Avatar/components'; import { AvatarProps } from '@components/components/Avatar/types'; -import getAvatarColor, { getNameInitials } from '@components/components/Avatar/utils'; +import { getAvatarVariant, getNameInitials } from '@components/components/Avatar/utils'; import { AvatarType } from '@components/components/AvatarStack/types'; import { Icon } from '@components/components/Icon'; @@ -30,7 +30,7 @@ export const Avatar = ({ return ( {(type === AvatarType.user || imageUrl) && ( - + {!hasError && imageUrl ? ( setHasError(true)} /> ) : ( @@ -39,12 +39,12 @@ export const Avatar = ({ )} {type === AvatarType.group && !imageUrl && ( - + )} {type === AvatarType.role && !imageUrl && ( - + {mapRoleIcon(name)} )} diff --git a/datahub-web-react/src/alchemy-components/components/Avatar/components.ts b/datahub-web-react/src/alchemy-components/components/Avatar/components.ts index a2903d0dafc420..99a80b041061c2 100644 --- a/datahub-web-react/src/alchemy-components/components/Avatar/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Avatar/components.ts @@ -1,8 +1,12 @@ import styled from 'styled-components'; -import { getAvatarColorStyles, getAvatarNameSizes, getAvatarSizes } from '@components/components/Avatar/utils'; +import { + AvatarColorVariant, + getAvatarColorStyles, + getAvatarNameSizes, + getAvatarSizes, +} from '@components/components/Avatar/utils'; -import { colors } from '@src/alchemy-components/theme'; import { AvatarSizeOptions } from '@src/alchemy-components/theme/config'; export const Container = styled.div<{ $hasOnClick: boolean; $showInPill?: boolean }>` @@ -10,7 +14,7 @@ export const Container = styled.div<{ $hasOnClick: boolean; $showInPill?: boolea align-items: center; gap: 4px; border-radius: 20px; - border: ${(props) => props.$showInPill && `1px solid ${colors.gray[100]}`}; + border: ${(props) => props.$showInPill && `1px solid ${props.theme.colors.border}`}; padding: ${(props) => props.$showInPill && '3px 6px 3px 4px'}; ${(props) => @@ -23,7 +27,7 @@ export const Container = styled.div<{ $hasOnClick: boolean; $showInPill?: boolea `; export const AvatarImageWrapper = styled.div<{ - $color: string; + $variant: AvatarColorVariant; $size?: AvatarSizeOptions; $isOutlined?: boolean; }>` @@ -31,12 +35,12 @@ export const AvatarImageWrapper = styled.div<{ position: relative; border-radius: 50%; - color: ${(props) => props.$color}; - border: ${(props) => props.$isOutlined && `1px solid ${colors.gray[1800]}`}; + color: ${(props) => props.theme.colors.textSecondary}; + border: ${(props) => props.$isOutlined && `1px solid ${props.theme.colors.border}`}; display: flex; align-items: center; justify-content: center; - ${(props) => getAvatarColorStyles(props.$color)} + ${(props) => getAvatarColorStyles(props.$variant, props.theme.colors)} `; export const AvatarImage = styled.img` @@ -47,7 +51,7 @@ export const AvatarImage = styled.img` `; export const AvatarText = styled.span<{ $size?: AvatarSizeOptions }>` - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; font-weight: 600; font-size: ${(props) => getAvatarNameSizes(props.$size)}; `; diff --git a/datahub-web-react/src/alchemy-components/components/Avatar/utils.ts b/datahub-web-react/src/alchemy-components/components/Avatar/utils.ts index 3d4968da0a256f..6b08442a07c0d8 100644 --- a/datahub-web-react/src/alchemy-components/components/Avatar/utils.ts +++ b/datahub-web-react/src/alchemy-components/components/Avatar/utils.ts @@ -1,12 +1,10 @@ import { AvatarType } from '@components/components/AvatarStack/types'; -import { colors } from '@src/alchemy-components/theme'; - import { EntityType } from '@types'; export const getNameInitials = (userName: string) => { if (!userName) return ''; - const names = userName.trim().split(/[\s']+/); // Split by spaces or apostrophes + const names = userName.trim().split(/[\s']+/); if (names.length === 1) { const firstName = names[0]; return firstName.length > 1 ? firstName[0]?.toUpperCase() + firstName[1]?.toUpperCase() : firstName[0]; @@ -24,29 +22,47 @@ export function hashString(str: string) { // eslint-disable-next-line hash = (hash << 5) - hash + char; // eslint-disable-next-line - hash = hash & hash; // Convert to 32bit integer + hash = hash & hash; } return Math.abs(hash); } -const colorMap = { - [colors.violet[500]]: { backgroundColor: colors.gray[1000], border: `1px solid ${colors.violet[1000]}` }, - [colors.blue[1000]]: { backgroundColor: colors.gray[1100], border: `1px solid ${colors.blue[200]}` }, - [colors.gray[600]]: { backgroundColor: colors.gray[1500], border: `1px solid ${colors.gray[100]}` }, -}; +export type AvatarColorVariant = 'violet' | 'blue' | 'gray'; -const avatarColors = Object.keys(colorMap); +const AVATAR_VARIANTS: AvatarColorVariant[] = ['violet', 'blue', 'gray']; -export const getAvatarColorStyles = (color) => { - return { - ...colorMap[color], - }; -}; - -export default function getAvatarColor(name: string) { - return avatarColors[hashString(name) % avatarColors.length]; +export function getAvatarVariant(name: string): AvatarColorVariant { + return AVATAR_VARIANTS[hashString(name) % AVATAR_VARIANTS.length]; } +export const getAvatarColorStyles = ( + variant: AvatarColorVariant, + themeColors: { + bgSurfaceBrand: string; + avatarBorderBrand: string; + bgSurfaceInfo: string; + avatarBorderInformation: string; + bgSurface: string; + border: string; + }, +) => { + switch (variant) { + case 'violet': + return { + backgroundColor: themeColors.bgSurfaceBrand, + border: `1px solid ${themeColors.avatarBorderBrand}`, + }; + case 'blue': + return { + backgroundColor: themeColors.bgSurfaceInfo, + border: `1px solid ${themeColors.avatarBorderInformation}`, + }; + case 'gray': + default: + return { backgroundColor: themeColors.bgSurface, border: `1px solid ${themeColors.border}` }; + } +}; + export const getAvatarSizes = (size) => { const sizeMap = { sm: { width: '18px', height: '18px', fontSize: '8px' }, diff --git a/datahub-web-react/src/alchemy-components/components/AvatarStack/AvatarStackWithHover.tsx b/datahub-web-react/src/alchemy-components/components/AvatarStack/AvatarStackWithHover.tsx index b89f3b13a8274c..02af8e26f73378 100644 --- a/datahub-web-react/src/alchemy-components/components/AvatarStack/AvatarStackWithHover.tsx +++ b/datahub-web-react/src/alchemy-components/components/AvatarStack/AvatarStackWithHover.tsx @@ -32,7 +32,7 @@ const AvatarStackWithHover = ({ const renderTitle = (headerText, count) => ( - + {headerText} diff --git a/datahub-web-react/src/alchemy-components/components/Bar/Bar.tsx b/datahub-web-react/src/alchemy-components/components/Bar/Bar.tsx index dfac96932be258..eecd24964fee6e 100644 --- a/datahub-web-react/src/alchemy-components/components/Bar/Bar.tsx +++ b/datahub-web-react/src/alchemy-components/components/Bar/Bar.tsx @@ -1,25 +1,23 @@ import React from 'react'; +import { useTheme } from 'styled-components'; import { BarContainer, IndividualBar } from '@components/components/Bar/components'; import { BAR_HEIGHT_MULTIPLIER } from '@components/components/Bar/constant'; import { BarComponentProps } from '@components/components/Bar/types'; -import { colors } from '@src/alchemy-components/theme'; - -const defaultProps: BarComponentProps = { - color: colors.violet[500], - coloredBars: 2, - size: 'default', -}; -export const Bar = ({ - color = defaultProps.color, - coloredBars = defaultProps.coloredBars, - size = defaultProps.size, -}: BarComponentProps) => { +export const Bar = ({ color, coloredBars = 2, size = 'default' }: BarComponentProps) => { + const theme = useTheme(); + const resolvedColor = color ?? theme.colors.chartsBrandMedium; const Bars = Array.from({ length: 3 }, (_, index) => { const barHeight = (index + 2) * BAR_HEIGHT_MULTIPLIER[size]; return ( - + ); }); return {Bars}; diff --git a/datahub-web-react/src/alchemy-components/components/Bar/components.ts b/datahub-web-react/src/alchemy-components/components/Bar/components.ts index 806d2a93ed58ae..50fb4468726d19 100644 --- a/datahub-web-react/src/alchemy-components/components/Bar/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Bar/components.ts @@ -9,7 +9,7 @@ export const BarContainer = styled.div` export const IndividualBar = styled.div<{ height: number; isColored: boolean; color: string; size: string }>` width: ${(props) => (props.size === 'default' ? '5px' : '3px')}; height: ${(props) => props.height}px; - background-color: ${(props) => (props.isColored ? props.color : '#C6C0E0')}; + background-color: ${(props) => (props.isColored ? props.color : props.theme.colors.bgSurface)}; border-radius: 20px; transition: background-color 0.3s ease, diff --git a/datahub-web-react/src/alchemy-components/components/BarChart/BarChart.tsx b/datahub-web-react/src/alchemy-components/components/BarChart/BarChart.tsx index 60fd414c35fec9..35a7f8dad11d64 100644 --- a/datahub-web-react/src/alchemy-components/components/BarChart/BarChart.tsx +++ b/datahub-web-react/src/alchemy-components/components/BarChart/BarChart.tsx @@ -3,12 +3,13 @@ import { Group } from '@visx/group'; import { ParentSize } from '@visx/responsive'; import { Axis, AxisScale, BarSeries, Grid, Margin, Tooltip, XYChart } from '@visx/xychart'; import React, { useCallback, useMemo, useRef, useState } from 'react'; +import { useTheme } from 'styled-components'; import { ChartWrapper, StyledBarSeries } from '@components/components/BarChart/components'; import DynamicMarginSetter from '@components/components/BarChart/components/DynamicMarginSetter'; import TruncatableTick from '@components/components/BarChart/components/TruncatableTick'; -import { COLOR_SCHEME_TO_PARAMS, DEFAULT_COLOR_SCHEME } from '@components/components/BarChart/constants'; -import { barChartDefault } from '@components/components/BarChart/defaults'; +import { DEFAULT_COLOR_SCHEME, getColorSchemeParams } from '@components/components/BarChart/constants'; +import { getBarChartDefaults } from '@components/components/BarChart/defaults'; import useMergedProps from '@components/components/BarChart/hooks/useMergedProps'; import usePrepareAccessors from '@components/components/BarChart/hooks/usePrepareAccessors'; import usePreparedScales from '@components/components/BarChart/hooks/usePreparedScales'; @@ -24,30 +25,42 @@ import { import { getMockedProps } from '@components/components/BarChart/utils'; import { Popover } from '@components/components/Popover'; -import { colors } from '@src/alchemy-components/theme'; - export function BarChart({ data, isEmpty, horizontal, - xScale = barChartDefault.xScale, - yScale = barChartDefault.yScale, + xScale, + yScale, maxYDomainForZeroData, minYForZeroData, margin, - leftAxisProps = barChartDefault.leftAxisProps, - maxLengthOfLeftAxisLabel = barChartDefault.maxLengthOfLeftAxisLabel, - showLeftAxisLine = barChartDefault.showLeftAxisLine, - bottomAxisProps = barChartDefault.bottomAxisProps, - gridProps = barChartDefault.gridProps, + leftAxisProps, + maxLengthOfLeftAxisLabel, + showLeftAxisLine, + bottomAxisProps, + gridProps, popoverRenderer, dataTestId, }: BarChartProps) { + const theme = useTheme(); + const defaults = useMemo( + () => getBarChartDefaults(theme.colors.textSecondary, theme.colors.border), + [theme.colors.textSecondary, theme.colors.border], + ); + + const resolvedXScale = xScale ?? defaults.xScale; + const resolvedYScale = yScale ?? defaults.yScale; + const resolvedLeftAxisProps = leftAxisProps ?? defaults.leftAxisProps; + const resolvedMaxLengthOfLeftAxisLabel = maxLengthOfLeftAxisLabel ?? defaults.maxLengthOfLeftAxisLabel; + const resolvedShowLeftAxisLine = showLeftAxisLine ?? defaults.showLeftAxisLine; + const resolvedBottomAxisProps = bottomAxisProps ?? defaults.bottomAxisProps; + const resolvedGridProps = gridProps ?? defaults.gridProps; + const wrapperRef = useRef(null); const [selectedBarIndex, setSelectedBarIndex] = useState(null); const [howeredBarIndex, setHoweredBarIndex] = useState(null); @@ -66,30 +79,32 @@ export function BarChart({ const xAccessor: XAccessor = (datum) => datum.x; const yAccessor: YAccessor = (datum) => datum.y; const accessors = usePrepareAccessors(data, !!horizontal, xAccessor, yAccessor, minYForZeroData); - const scales = usePreparedScales(data, xScale, xAccessor, yScale, yAccessor, { + const scales = usePreparedScales(data, resolvedXScale, xAccessor, resolvedYScale, yAccessor, { horizontal, maxDomainValueForZeroData: maxYDomainForZeroData, }); const { computeNumTicks: computeLeftAxisNumTicks, ...mergedLeftAxisProps } = useMergedProps( - leftAxisProps, - barChartDefault.leftAxisProps, + resolvedLeftAxisProps, + defaults.leftAxisProps, ); const { computeNumTicks: computeBottomAxisNumTicks, ...mergedBottomAxisProps } = useMergedProps( - bottomAxisProps, - barChartDefault.bottomAxisProps, + resolvedBottomAxisProps, + defaults.bottomAxisProps, ); - const mergedGridProps = useMergedProps(gridProps, barChartDefault.gridProps); + const mergedGridProps = useMergedProps(resolvedGridProps, defaults.gridProps); + + const colorSchemeMap = useMemo(() => getColorSchemeParams(theme.colors), [theme.colors]); const gradientIdSuffix = useMemo(() => `bar${horizontal ? `-horizontal` : ''}`, [horizontal]); const colorAccessor: ColorAccessor = useCallback( (datum, index) => { - if (isEmpty) return colors.transparent; + if (isEmpty) return 'transparent'; const colorTheme = datum.colorScheme ?? DEFAULT_COLOR_SCHEME; - const colorThemeParams = COLOR_SCHEME_TO_PARAMS[colorTheme]; + const colorThemeParams = colorSchemeMap[colorTheme]; if (index === selectedBarIndex) return colorThemeParams.mainColor; if (index === howeredBarIndex) return colorThemeParams.mainColor; @@ -97,7 +112,7 @@ export function BarChart({ return `url(#${gradientIdSuffix}-${colorTheme}${isInversed ? '-inversed' : ''})`; }, - [selectedBarIndex, howeredBarIndex, gradientIdSuffix, isEmpty, accessors, horizontal], + [selectedBarIndex, howeredBarIndex, gradientIdSuffix, isEmpty, accessors, horizontal, colorSchemeMap], ); const renderGradients = () => { @@ -111,7 +126,7 @@ export function BarChart({ return ( <> {colorSchemes.map((colorScheme) => { - const colorSchemeParams = COLOR_SCHEME_TO_PARAMS[colorScheme ?? DEFAULT_COLOR_SCHEME]; + const colorSchemeParams = colorSchemeMap[colorScheme ?? DEFAULT_COLOR_SCHEME]; const { mainColor } = colorSchemeParams; const { alternativeColor } = colorSchemeParams; const fromColor = horizontal ? alternativeColor : mainColor; @@ -183,7 +198,7 @@ export function BarChart({ orientation="left" numTicks={computeLeftAxisNumTicks?.(width, height, dynamicMargin, data)} tickComponent={(props) => ( - + )} axisClassName="left-axis" {...mergedLeftAxisProps} @@ -206,12 +221,12 @@ export function BarChart({ x2={dynamicMargin.left} y1={0} y2={height - dynamicMargin.bottom} - stroke="white" + stroke={theme.colors.bg} strokeWidth={2} /> )} - {showLeftAxisLine && ( + {resolvedShowLeftAxisLine && ( => ({ + [ColorScheme.Violet]: { + mainColor: themeColors.chartsBrandMedium, + alternativeColor: themeColors.chartsBrandMediumAlpha, + }, + [ColorScheme.Blue]: { + mainColor: themeColors.chartsInformationMedium, + alternativeColor: themeColors.chartsInformationBase, + }, + [ColorScheme.Pink]: { + mainColor: themeColors.chartsWineMedium, + alternativeColor: themeColors.chartsWineLow, + }, + [ColorScheme.Orange]: { + mainColor: themeColors.chartsTangerineMedium, + alternativeColor: themeColors.chartsTangerineBase, + }, + [ColorScheme.Green]: { + mainColor: themeColors.chartsGreenMedium, + alternativeColor: themeColors.chartsGreenLow, + }, +}); export const COLOR_SCHEMES: ColorScheme[] = Object.values(ColorScheme); export const DEFAULT_COLOR_SCHEME = ColorScheme.Violet; -export const COLOR_SCHEME_TO_PARAMS = { - [ColorScheme.Violet]: VIOLET_COLOR_SCHEME_PRARAMS, - [ColorScheme.Blue]: BLUE_COLOR_SCHEME_PARAMS, - [ColorScheme.Pink]: RED_COLOR_SCHEME_PARAMS, - [ColorScheme.Orange]: ORANGE_COLOR_SCHEME_PARAMS, - [ColorScheme.Green]: GREEN_COLOR_SCHEME_PARAMS, +export const COLOR_SCHEME_TO_PARAMS: Record = { + [ColorScheme.Violet]: { mainColor: '#705EE4', alternativeColor: '#917FFF99' }, + [ColorScheme.Blue]: { mainColor: '#4897B4', alternativeColor: '#CCEBF6' }, + [ColorScheme.Pink]: { mainColor: '#E99393', alternativeColor: '#F2C1C1' }, + [ColorScheme.Orange]: { mainColor: '#FFD8B1', alternativeColor: '#FFF3E0' }, + [ColorScheme.Green]: { mainColor: '#92C573', alternativeColor: '#C0DEAF' }, }; export const DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL = 7; diff --git a/datahub-web-react/src/alchemy-components/components/BarChart/defaults.ts b/datahub-web-react/src/alchemy-components/components/BarChart/defaults.ts index ad58842b3cdd62..3cda9a6c810939 100644 --- a/datahub-web-react/src/alchemy-components/components/BarChart/defaults.ts +++ b/datahub-web-react/src/alchemy-components/components/BarChart/defaults.ts @@ -5,46 +5,48 @@ import { DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL } from '@components/components/BarCha import { BarChartProps, Datum } from '@components/components/BarChart/types'; import { abbreviateNumber } from '@components/components/dataviz/utils'; -import { colors } from '@src/alchemy-components/theme'; +function commonTickLabelProps(fillColor: string): TickLabelProps { + return { + fontSize: 10, + fontFamily: 'Mulish', + fill: fillColor, + }; +} -const commonTickLabelProps: TickLabelProps = { - fontSize: 10, - fontFamily: 'Mulish', - fill: colors.gray[1700], -}; +export function getBarChartDefaults(textColor: string, borderColor: string): Partial { + return { + xScale: { type: 'band', paddingInner: 0.4, paddingOuter: 0.1 }, + yScale: { type: 'linear', nice: true, round: true }, -export const barChartDefault: Partial = { - xScale: { type: 'band', paddingInner: 0.4, paddingOuter: 0.1 }, - yScale: { type: 'linear', nice: true, round: true }, - - leftAxisProps: { - tickFormat: abbreviateNumber, - tickLabelProps: { - ...commonTickLabelProps, - textAnchor: 'end', - width: 50, + leftAxisProps: { + tickFormat: abbreviateNumber, + tickLabelProps: { + ...commonTickLabelProps(textColor), + textAnchor: 'end', + width: 50, + }, + hideAxisLine: true, + hideTicks: true, + }, + maxLengthOfLeftAxisLabel: DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL, + showLeftAxisLine: false, + bottomAxisProps: { + tickFormat: (value) => dayjs(value).format('DD MMM'), + tickLabelProps: { + ...commonTickLabelProps(textColor), + textAnchor: 'middle', + verticalAnchor: 'start', + width: 20, + }, + hideAxisLine: true, + hideTicks: true, }, - hideAxisLine: true, - hideTicks: true, - }, - maxLengthOfLeftAxisLabel: DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL, - showLeftAxisLine: false, - bottomAxisProps: { - tickFormat: (value) => dayjs(value).format('DD MMM'), - tickLabelProps: { - ...commonTickLabelProps, - textAnchor: 'middle', - verticalAnchor: 'start', - width: 20, + gridProps: { + rows: true, + columns: false, + stroke: borderColor, + strokeWidth: 1, + lineStyle: {}, }, - hideAxisLine: true, - hideTicks: true, - }, - gridProps: { - rows: true, - columns: false, - stroke: '#e0e0e0', - strokeWidth: 1, - lineStyle: {}, - }, -}; + }; +} diff --git a/datahub-web-react/src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx b/datahub-web-react/src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx index 2be25692f9f901..118875dbb3d690 100644 --- a/datahub-web-react/src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx +++ b/datahub-web-react/src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx @@ -11,7 +11,7 @@ import { Icon } from '@components/components/Icon'; import { Text } from '@components/components/Text'; export const Breadcrumb = ({ items }: BreadcrumbProps) => { - const defaultSeparator = ; + const defaultSeparator = ; return ( @@ -30,8 +30,7 @@ export const Breadcrumb = ({ items }: BreadcrumbProps) => { content = ( @@ -40,7 +39,7 @@ export const Breadcrumb = ({ items }: BreadcrumbProps) => { ); } else { content = ( - + {item.label} ); diff --git a/datahub-web-react/src/alchemy-components/components/Breadcrumb/components.ts b/datahub-web-react/src/alchemy-components/components/Breadcrumb/components.ts index 3f531cc95b7d3b..ffab1d921d2f0f 100644 --- a/datahub-web-react/src/alchemy-components/components/Breadcrumb/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Breadcrumb/components.ts @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { Text } from '@components/components/Text'; -import { colors } from '@components/theme'; export const Wrapper = styled.nav` display: flex; @@ -18,7 +17,7 @@ export const BreadcrumbItemContainer = styled.span` `; export const BreadcrumbLink = styled(Link)<{ $isCurrent?: boolean }>` - color: ${(props) => (props.$isCurrent ? colors.gray[600] : colors.gray[1800])}; + color: ${(props) => (props.$isCurrent ? props.theme.colors.text : props.theme.colors.textTertiary)}; font-size: 12px; text-decoration: none; cursor: pointer; @@ -26,15 +25,15 @@ export const BreadcrumbLink = styled(Link)<{ $isCurrent?: boolean }>` export const BreadcrumbButton = styled(Text)<{ $isCurrent?: boolean }>` cursor: pointer; - color: ${(props) => (props.$isCurrent ? colors.gray[600] : colors.gray[1800])}; + color: ${(props) => (props.$isCurrent ? props.theme.colors.text : props.theme.colors.textTertiary)}; :hover { - color: ${colors.primary[500]}; + color: ${(props) => props.theme.colors.textHover}; } `; export const VerticalDivider = styled(Divider)` - color: ${colors.gray[100]}; + color: ${(props) => props.theme.colors.border}; height: 16px; width: 2px; margin: 0 4px; diff --git a/datahub-web-react/src/alchemy-components/components/Button/utils.ts b/datahub-web-react/src/alchemy-components/components/Button/utils.ts index bb70bdf21b2b88..06700f30648671 100644 --- a/datahub-web-react/src/alchemy-components/components/Button/utils.ts +++ b/datahub-web-react/src/alchemy-components/components/Button/utils.ts @@ -5,7 +5,7 @@ import { ButtonHTMLAttributes } from 'react'; import { CSSObject } from 'styled-components'; import { ButtonStyleProps, ButtonVariant } from '@components/components/Button/types'; -import { colors, radius, shadows, spacing, typography } from '@components/theme'; +import { radius, shadows, spacing, typography } from '@components/theme'; import { ColorOptions, SizeOptions } from '@components/theme/config'; import { getColor, getFontSize } from '@components/theme/utils'; @@ -33,39 +33,36 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions, theme bgColor: color500, hoverBgColor: color500, activeBgColor: getColor(color, 700, theme), - disabledBgColor: getColor('gray', 100, theme), + disabledBgColor: theme?.colors?.bgDisabled ?? getColor('gray', 100, theme), // Borders borderColor: color500, activeBorderColor: getColor(color, 300, theme), - disabledBorderColor: getColor('gray', 200, theme), + disabledBorderColor: theme?.colors?.borderDisabled ?? getColor('gray', 200, theme), // Text - textColor: colors.white, - disabledTextColor: getColor('gray', 300, theme), + textColor: theme?.colors?.textBrandOnBgFill ?? '#fff', + disabledTextColor: theme?.colors?.textDisabled ?? getColor('gray', 300, theme), }; - // Specific color override for white if (color === 'white') { - base.textColor = colors.black; - base.disabledTextColor = getColor('gray', 500, theme); + base.textColor = theme?.colors?.text ?? '#000'; + base.disabledTextColor = theme?.colors?.textDisabled ?? getColor('gray', 500, theme); } - // Specific color override for gray if (color === 'gray') { - base.textColor = getColor('gray', 500, theme); - base.bgColor = getColor('gray', 100, theme); - base.borderColor = getColor('gray', 100, theme); - - base.hoverBgColor = getColor('gray', 100, theme); - base.activeBgColor = getColor('gray', 200, theme); + base.textColor = theme?.colors?.textSecondary ?? getColor('gray', 500, theme); + base.bgColor = theme?.colors?.bgSurface ?? getColor('gray', 100, theme); + base.borderColor = theme?.colors?.bgSurface ?? getColor('gray', 100, theme); + base.hoverBgColor = theme?.colors?.bgHover ?? getColor('gray', 100, theme); + base.activeBgColor = theme?.colors?.bgActive ?? getColor('gray', 200, theme); } // Override styles for outline variant if (variant === 'outline') { return { ...base, - bgColor: colors.transparent, + bgColor: 'transparent', borderColor: color500, textColor: color500, @@ -82,12 +79,12 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions, theme ...base, textColor: color500, - bgColor: colors.transparent, - borderColor: colors.transparent, - hoverBgColor: colors.gray[1500], - activeBgColor: colors.transparent, - disabledBgColor: colors.transparent, - disabledBorderColor: colors.transparent, + bgColor: 'transparent', + borderColor: 'transparent', + hoverBgColor: theme?.colors?.bgHover ?? 'transparent', + activeBgColor: 'transparent', + disabledBgColor: 'transparent', + disabledBorderColor: 'transparent', }; } @@ -95,9 +92,9 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions, theme if (variant === 'secondary') { return { ...base, - bgColor: getColor('violet', 0), - hoverBgColor: getColor('violet', 100), - activeBgColor: getColor('violet', 200), + bgColor: theme?.colors?.bgSurfaceBrand ?? getColor('violet', 0, theme), + hoverBgColor: theme?.colors?.bgSurfaceBrandHover ?? getColor('violet', 100, theme), + activeBgColor: theme?.colors?.buttonSurfaceBrandFocus ?? getColor('violet', 200, theme), textColor: color500, borderColor: 'transparent', disabledBgColor: 'transparent', @@ -105,16 +102,16 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions, theme }; } - // Override styles for secondary variant + // Override styles for link variant if (variant === 'link') { return { ...base, textColor: color500, - bgColor: colors.transparent, - borderColor: colors.transparent, - activeBgColor: colors.transparent, - disabledBgColor: colors.transparent, - disabledBorderColor: colors.transparent, + bgColor: 'transparent', + borderColor: 'transparent', + activeBgColor: 'transparent', + disabledBgColor: 'transparent', + disabledBorderColor: 'transparent', }; } @@ -122,9 +119,6 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions, theme return base; }; -const themeV1PrimaryColor = '#1890ff'; -const themeV2PrimaryColor = '#533FD1'; - // Generate color styles for button const getButtonVariantStyles = ( variant: ButtonVariant, @@ -133,14 +127,8 @@ const getButtonVariantStyles = ( theme?: Theme, ): CSSObject => { const isPrimary = color === 'violet' || color === 'primary'; - // Adding a hack here for login/signup pages where v1 styles are still loaded by default - // Once we move to remove v1 styles we can revert this hack and always use styles from theme only - const resolvedPrimaryColor = - theme?.styles?.['primary-color'] === themeV1PrimaryColor - ? themeV2PrimaryColor - : (theme?.styles?.['primary-color'] ?? themeV2PrimaryColor); - const primaryGradient = `radial-gradient(115.48% 144.44% at 50% -44.44%, ${theme?.styles?.['primary-color-gradient'] || '#705EE4'} 38.97%, ${resolvedPrimaryColor} 100%)`; + const primaryGradient = theme?.colors?.brandGradient ?? colorStyles.bgColor; const variantStyles = { filled: { @@ -270,10 +258,10 @@ const getButtonPadding = (size: SizeOptions, hasChildren: boolean, isCircle: boo }; // Generate active styles for button -const getButtonActiveStyles = (colorStyles: ColorStyles) => ({ +const getButtonActiveStyles = (colorStyles: ColorStyles, theme?: Theme) => ({ borderColor: 'transparent', - backgroundColor: colorStyles.activeBgColor, // TODO: Figure out how to make the #fff interior border transparent - boxShadow: `0 0 0 2px #fff, 0 0 0 4px ${colorStyles.activeBgColor}`, + backgroundColor: colorStyles.activeBgColor, + boxShadow: `0 0 0 2px ${theme?.colors?.bg ?? 'transparent'}, 0 0 0 4px ${colorStyles.activeBgColor}`, }); // Generate loading styles for button @@ -306,7 +294,7 @@ export const getButtonStyle = (props: ButtonStyleProps & ButtonHTMLAttributes({ labelProps, showLeftAxisLine }: AxisLeftWeekdaysProps) { + const themeConfig = useTheme(); const { margin, squareSize, squareGap } = useCalendarState(); const yLineOffset = 5; @@ -30,7 +32,7 @@ export function AxisLeftWeekdays({ labelProps, showLeftAxisLine }: Ax return ( <> {WEEKDAYS.map((weekday, index) => renderTickLabel(index, weekday))} - {showLeftAxisLine && } + {showLeftAxisLine && } ); } diff --git a/datahub-web-react/src/alchemy-components/components/Card/components.ts b/datahub-web-react/src/alchemy-components/components/Card/components.ts index ca36a20a928c89..7194b12a99137e 100644 --- a/datahub-web-react/src/alchemy-components/components/Card/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Card/components.ts @@ -1,18 +1,18 @@ import styled from 'styled-components'; -import { colors, radius, spacing, typography } from '@src/alchemy-components/theme'; +import { radius, spacing, typography } from '@src/alchemy-components/theme'; import { IconAlignmentOptions } from '@src/alchemy-components/theme/config'; export const CardContainer = styled.div<{ isClickable?: boolean; width?: string; maxWidth?: string; height?: string }>( ({ isClickable, width, maxWidth, height, theme }) => ({ - border: `1px solid ${colors.gray[100]}`, + border: `1px solid ${theme.colors.border}`, borderRadius: radius.lg, padding: spacing.md, display: 'flex', flex: `1 1 ${maxWidth}`, minWidth: '150px', - boxShadow: '0px 1px 2px 0px rgba(33, 23, 95, 0.07)', - backgroundColor: colors.white, + boxShadow: theme.colors.shadowXs, + backgroundColor: theme.colors.bg, flexDirection: 'column', gap: spacing.md, maxWidth, @@ -21,7 +21,7 @@ export const CardContainer = styled.div<{ isClickable?: boolean; width?: string; '&:hover': isClickable ? { - border: `1px solid ${theme.styles['primary-color']}`, + border: `1px solid ${theme.colors.borderBrand}`, cursor: 'pointer', } : {}, @@ -43,10 +43,10 @@ export const TitleContainer = styled.div({ width: '100%', }); -export const Title = styled.div<{ $isEmpty?: boolean }>(({ $isEmpty }) => ({ +export const Title = styled.div<{ $isEmpty?: boolean }>(({ $isEmpty, theme }) => ({ fontSize: typography.fontSizes.lg, fontWeight: typography.fontWeights.bold, - color: $isEmpty ? colors.gray[1800] : colors.gray[600], + color: $isEmpty ? theme.colors.textTertiary : theme.colors.text, display: 'flex', alignItems: 'center', gap: spacing.xsm, @@ -59,10 +59,10 @@ export const SubTitleContainer = styled.div({ alignItems: 'center', }); -export const SubTitle = styled.div<{ $noOfSubtitleLines?: number }>(({ $noOfSubtitleLines }) => ({ +export const SubTitle = styled.div<{ $noOfSubtitleLines?: number }>(({ $noOfSubtitleLines, theme }) => ({ fontSize: typography.fontSizes.md, fontWeight: typography.fontWeights.normal, - color: colors.gray[1700], + color: theme.colors.textSecondary, lineHeight: 'normal', ...($noOfSubtitleLines diff --git a/datahub-web-react/src/alchemy-components/components/Carousel/Carousel.tsx b/datahub-web-react/src/alchemy-components/components/Carousel/Carousel.tsx index 614098c7bd750e..ba5b7bf302e723 100644 --- a/datahub-web-react/src/alchemy-components/components/Carousel/Carousel.tsx +++ b/datahub-web-react/src/alchemy-components/components/Carousel/Carousel.tsx @@ -2,8 +2,6 @@ import { Carousel as AntCarousel, CarouselProps as AntCarouselProps } from 'antd import React, { ReactNode, forwardRef } from 'react'; import styled, { css, keyframes } from 'styled-components'; -import colors from '@components/theme/foundations/colors'; - const scaleProgress = keyframes` 0% { transform: scale(0); @@ -38,7 +36,7 @@ const StyledCarousel = styled(AntCarousel)<{ $animateDot?: boolean; $dotDuration margin: 0 !important; padding: 0 !important; border-radius: 50%; - background: ${colors.gray[300]}; + background: ${({ theme }) => theme.colors.textDisabled}; border: none; opacity: 0.6; transition: @@ -47,13 +45,14 @@ const StyledCarousel = styled(AntCarousel)<{ $animateDot?: boolean; $dotDuration transform-origin: center; &:hover { - background: ${colors.gray[500]}; + background: ${({ theme }) => theme.colors.textSecondary}; opacity: 1; } } &.slick-active button { - background: ${({ $animateDot }) => ($animateDot ? colors.gray[300] : colors.primary[600])}; + background: ${({ $animateDot, theme }) => + $animateDot ? theme.colors.textDisabled : theme.colors.textBrand}; opacity: 1; position: relative; @@ -68,7 +67,7 @@ const StyledCarousel = styled(AntCarousel)<{ $animateDot?: boolean; $dotDuration width: 100%; height: 100%; border-radius: 50%; - background: ${colors.primary[600]}; + background: ${(props) => props.theme.colors.textBrand}; transform: scale(0); animation: ${scaleProgress} ${$dotDuration}ms ease-out forwards; } @@ -86,12 +85,12 @@ const StyledCarousel = styled(AntCarousel)<{ $animateDot?: boolean; $dotDuration &:before { font-size: 20px; - color: ${colors.gray[600]}; + color: ${({ theme }) => theme.colors.text}; transition: color 0.2s ease; } &:hover:before { - color: ${colors.primary[600]}; + color: ${(props) => props.theme.colors.textBrand}; } margin: 0 10px; } diff --git a/datahub-web-react/src/alchemy-components/components/Checkbox/components.ts b/datahub-web-react/src/alchemy-components/components/Checkbox/components.ts index 8abf5dceda1bab..49bd4d33191a56 100644 --- a/datahub-web-react/src/alchemy-components/components/Checkbox/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Checkbox/components.ts @@ -7,7 +7,7 @@ import { getCheckmarkPosition, } from '@components/components/Checkbox/utils'; import { formLabelTextStyles } from '@components/components/commonStyles'; -import { borders, colors, radius, spacing, transform, zIndices } from '@components/theme'; +import { borders, radius, spacing, transform, zIndices } from '@components/theme'; import { SizeOptions } from '@src/alchemy-components/theme/config'; @@ -20,15 +20,16 @@ export const CheckboxContainer = styled.div<{ justifyContent?: 'center' | 'flex- }), ); -export const Label = styled.div<{ clickable?: boolean }>(({ clickable }) => ({ +export const Label = styled.div<{ clickable?: boolean }>(({ clickable, theme }) => ({ ...formLabelTextStyles, + color: theme.colors.text, ...(clickable ? { cursor: 'pointer' } : {}), })); -export const Required = styled.span({ - color: colors.red[500], +export const Required = styled.span(({ theme }) => ({ + color: theme.colors.textError, marginLeft: spacing.xxsm, -}); +})); export const CheckboxBase = styled.div({ position: 'relative', @@ -40,13 +41,13 @@ export const StyledCheckbox = styled.input<{ checked: boolean; error: string; disabled: boolean; -}>(({ error, checked, disabled }) => ({ +}>(({ error, checked, disabled, theme }) => ({ position: 'absolute', opacity: 0, height: 0, width: 0, '&:checked + div': { - backgroundColor: getCheckboxColor(checked, error, disabled, 'background'), + backgroundColor: getCheckboxColor(checked, error, disabled, 'background', theme.colors), }, '&:checked + div:after': { display: 'block', @@ -65,12 +66,12 @@ export const Checkmark = styled.div<{ position: 'absolute', zIndex: zIndices.docked, borderRadius: '4px', - border: `${borders['1px']} ${getCheckboxColor(checked, error, disabled, undefined)}`, + border: `${borders['1px']} ${getCheckboxColor(checked, error, disabled, undefined, theme.colors)}`, transition: 'all 0.2s ease-in-out', cursor: disabled ? 'normal' : 'pointer', ':hover': { ...(!disabled && { - borderColor: theme.styles['primary-color'], + borderColor: theme.colors.borderBrand, }), }, '&:after': { @@ -81,20 +82,20 @@ export const Checkmark = styled.div<{ left: !intermediate ? '30%' : '45%', width: !intermediate ? '35%' : '0px', height: !intermediate ? '60%' : '50%', - border: disabled ? `solid ${colors.gray[300]}` : 'solid white', + border: disabled ? `solid ${theme.colors.borderDisabled}` : `solid ${theme.colors.textBrandOnBgFill}`, borderWidth: '0 2px 2px 0', transform: !intermediate ? 'rotate(45deg)' : transform.rotate[90], }, ...(disabled && { - backgroundColor: colors.gray[1500], + backgroundColor: theme.colors.bgDisabled, }), })); export const HoverState = styled.div<{ isHovering: boolean; error: string; checked: boolean; disabled: boolean }>( - ({ isHovering, error, checked }) => ({ + ({ isHovering, error, checked, theme }) => ({ width: '40px', height: '40px', - backgroundColor: !isHovering ? 'transparent' : getCheckboxHoverBackgroundColor(checked, error), + backgroundColor: !isHovering ? 'transparent' : getCheckboxHoverBackgroundColor(checked, error, theme.colors), position: 'absolute', borderRadius: radius.full, top: '-5px', diff --git a/datahub-web-react/src/alchemy-components/components/Checkbox/utils.ts b/datahub-web-react/src/alchemy-components/components/Checkbox/utils.ts index 50eec872746c94..906ad96d53c703 100644 --- a/datahub-web-react/src/alchemy-components/components/Checkbox/utils.ts +++ b/datahub-web-react/src/alchemy-components/components/Checkbox/utils.ts @@ -1,33 +1,35 @@ -import theme, { colors } from '@components/theme'; - import { SizeOptions } from '@src/alchemy-components/theme/config'; -const checkboxBackgroundDefault = { - default: colors.white, - checked: theme.semanticTokens.colors.primary, - error: theme.semanticTokens.colors.error, - disabled: colors.gray[1500], -}; - -const checkboxHoverColors = { - default: colors.gray[100], - error: colors.red[100], - checked: colors.violet[100], -}; - -export function getCheckboxColor(checked: boolean, error: string, disabled: boolean, mode: 'background' | undefined) { +export function getCheckboxColor( + checked: boolean, + error: string, + disabled: boolean, + mode: 'background' | undefined, + themeColors: { + bg: string; + bgSurface: string; + bgDisabled: string; + border: string; + textError: string; + iconBrand: string; + }, +) { if (disabled) { - return mode === 'background' ? checkboxBackgroundDefault.disabled : colors.gray[100]; + return mode === 'background' ? themeColors.bgDisabled : themeColors.border; } - if (error) return checkboxBackgroundDefault.error; - if (checked) return checkboxBackgroundDefault.checked; - return mode === 'background' ? checkboxBackgroundDefault.default : colors.gray[1800]; + if (error) return themeColors.textError; + if (checked) return themeColors.iconBrand; + return mode === 'background' ? themeColors.bg : themeColors.border; } -export function getCheckboxHoverBackgroundColor(checked: boolean, error: string) { - if (error) return checkboxHoverColors.error; - if (checked) return checkboxHoverColors.checked; - return checkboxHoverColors.default; +export function getCheckboxHoverBackgroundColor( + checked: boolean, + error: string, + themeColors: { bgHover: string; bgSurfaceErrorHover: string; bgSurfaceBrandHover: string }, +) { + if (error) return themeColors.bgSurfaceErrorHover; + if (checked) return themeColors.bgSurfaceBrandHover; + return themeColors.bgHover; } const sizeMap: Record = { diff --git a/datahub-web-react/src/alchemy-components/components/ColorPicker/ColorPicker.tsx b/datahub-web-react/src/alchemy-components/components/ColorPicker/ColorPicker.tsx index a2ef66b9b46daa..598e8f6b5c1226 100644 --- a/datahub-web-react/src/alchemy-components/components/ColorPicker/ColorPicker.tsx +++ b/datahub-web-react/src/alchemy-components/components/ColorPicker/ColorPicker.tsx @@ -1,4 +1,4 @@ -import { Input, colors } from '@components'; +import { Input } from '@components'; import React, { useCallback, useEffect, useState } from 'react'; import { CirclePicker, ColorResult } from 'react-color'; import styled from 'styled-components'; @@ -40,7 +40,7 @@ const ColorPreview = styled.div` height: 100px; border-radius: 8px 8px 0px 0px; margin-top: 24px; - border: 1px solid ${colors.gray[200]}; + border: 1px solid ${(props) => props.theme.colors.border}; `; const PickerWrapper = styled.div` diff --git a/datahub-web-react/src/alchemy-components/components/DatePicker/components.tsx b/datahub-web-react/src/alchemy-components/components/DatePicker/components.tsx index dac3000bc20c82..d62a9649c20406 100644 --- a/datahub-web-react/src/alchemy-components/components/DatePicker/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/DatePicker/components.tsx @@ -8,24 +8,24 @@ export const StyledAntdDatePicker = styled(AntdDatePicker)<{ $noDefaultPaddings? } &.acryl-date-picker .ant-picker-cell-today > .ant-picker-cell-inner::before { - border: 1px solid ${({ theme }) => theme.styles['primary-color']} !important; + border: 1px solid ${({ theme }) => theme.colors.borderBrand} !important; } `; export const StyledCalendarWrapper = styled.div` & .ant-picker-cell-selected > .ant-picker-cell-inner { - background: ${({ theme }) => theme.styles['primary-color']} !important; + background: ${({ theme }) => theme.colors.buttonFillBrand} !important; } & .ant-picker-cell-today > .ant-picker-cell-inner::before { - border: 1px solid ${({ theme }) => theme.styles['primary-color']} !important; + border: 1px solid ${({ theme }) => theme.colors.borderBrand} !important; } & .ant-picker-today-btn { - color: ${({ theme }) => theme.styles['primary-color']}; + color: ${({ theme }) => theme.colors.textBrand}; } & .ant-picker-header-view button:hover { - color: ${({ theme }) => theme.styles['primary-color']}; + color: ${({ theme }) => theme.colors.textHover}; } `; diff --git a/datahub-web-react/src/alchemy-components/components/DatePicker/styles.css b/datahub-web-react/src/alchemy-components/components/DatePicker/styles.css index 64a7be7eb39b4b..d6174ce4026ca5 100644 --- a/datahub-web-react/src/alchemy-components/components/DatePicker/styles.css +++ b/datahub-web-react/src/alchemy-components/components/DatePicker/styles.css @@ -1,15 +1,16 @@ .acryl-date-picker .ant-picker-cell-today > .ant-picker-cell-inner::before { - border: 1px solid #533fd1 !important; + border: 1px solid var(--theme-iconBrand, #533fd1) !important; } .acryl-date-picker .ant-picker-cell-selected > .ant-picker-cell-inner { - background: #533fd1 !important; + background: var(--theme-iconBrand, #533fd1) !important; + color: var(--theme-textOnFillBrand, #fff); } .acryl-date-picker .ant-picker-today-btn { - color: #533fd1; + color: var(--theme-iconBrand, #533fd1); } .acryl-date-picker .ant-picker-header-view button:hover { - color: #533fd1; + color: var(--theme-iconBrand, #533fd1); } diff --git a/datahub-web-react/src/alchemy-components/components/DatePicker/variants/dateSwitcher/components.tsx b/datahub-web-react/src/alchemy-components/components/DatePicker/variants/dateSwitcher/components.tsx index bd5aa3ce49f5dd..126ade1bc9c0ce 100644 --- a/datahub-web-react/src/alchemy-components/components/DatePicker/variants/dateSwitcher/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/DatePicker/variants/dateSwitcher/components.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import { CaretLeft, CaretRight } from 'phosphor-react'; import React, { useCallback, useMemo } from 'react'; import styled from 'styled-components'; @@ -8,8 +7,13 @@ import { SwitcherDirection } from '@components/components/DatePicker/variants/da import { Text } from '@components/components/Text/Text'; const StyledContainer = styled.div<{ $opened?: boolean; $disabled?: boolean }>` - border: 1px solid ${(props) => (props.$opened || props.$disabled ? colors.gray[1800] : colors.gray[100])}; - ${(props) => props.$opened && !props.$disabled && `outline: 1px solid ${colors.violet[300]};`} + border: 1px solid + ${(props) => { + if (props.$disabled) return props.theme.colors.borderDisabled; + if (props.$opened) return props.theme.colors.borderBrandFocused; + return props.theme.colors.border; + }}; + ${(props) => props.$opened && !props.$disabled && `outline: 1px solid ${props.theme.colors.borderBrandFocused};`} border-radius: 8px; padding: 8px; display: flex; @@ -18,42 +22,43 @@ const StyledContainer = styled.div<{ $opened?: boolean; $disabled?: boolean }>` justify-content: space-between; align-items: center; width: 100%; + background: ${(props) => props.theme.colors.bg}; - box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07); + box-shadow: ${(props) => props.theme.colors.shadowXs}; ${(props) => props.$disabled && ` - background: ${colors.gray[1500]}; + background: ${props.theme.colors.bgInputDisabled}; cursor: not-allowed; `} :hover, :focus, :active { - ${(props) => !props.$disabled && 'box-shadow: 0px 1px 2px 1px rgba(33, 23, 95, 0.07);'} + ${(props) => !props.$disabled && `box-shadow: ${props.theme.colors.shadowSm};`} } `; const Content = styled(Text)<{ $disabled?: boolean }>` - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; user-select: none; cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')}; :hover { - ${(props) => !props.$disabled && `color: ${props.theme.styles['primary-color']};`} + ${(props) => !props.$disabled && `color: ${props.theme.colors.textHover};`} } `; const CaretWrapper = styled.div<{ $disabled?: boolean }>` & svg { - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; display: flex; align-items: start; cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')}; :hover { - ${(props) => !props.$disabled && `color: ${props.theme.styles['primary-color']};`} + ${(props) => !props.$disabled && `color: ${props.theme.colors.textHover};`} } } `; diff --git a/datahub-web-react/src/alchemy-components/components/Drawer/components.tsx b/datahub-web-react/src/alchemy-components/components/Drawer/components.tsx index 39cb08750ef597..830cce57cc740c 100644 --- a/datahub-web-react/src/alchemy-components/components/Drawer/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/Drawer/components.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; export const StyledDrawer = styled(Drawer)` .ant-drawer-header { padding: 16px; - box-shadow: 0px 0px 6px 0px rgba(93, 102, 139, 0.2); + box-shadow: ${({ theme }) => theme.colors.shadowSm}; } .ant-drawer-body { diff --git a/datahub-web-react/src/alchemy-components/components/Drawer/constants.ts b/datahub-web-react/src/alchemy-components/components/Drawer/constants.ts index 7de115819df377..c490218dd07526 100644 --- a/datahub-web-react/src/alchemy-components/components/Drawer/constants.ts +++ b/datahub-web-react/src/alchemy-components/components/Drawer/constants.ts @@ -1,3 +1 @@ -import { colors } from '@src/alchemy-components/theme'; - -export const maskTransparentStyle = { backgroundColor: colors.transparent }; +export const maskTransparentStyle = { backgroundColor: 'transparent' }; diff --git a/datahub-web-react/src/alchemy-components/components/Dropdown/DefaultDropdownContainer.tsx b/datahub-web-react/src/alchemy-components/components/Dropdown/DefaultDropdownContainer.tsx index 24bfa59000317e..2b3d35e6c3ff5f 100644 --- a/datahub-web-react/src/alchemy-components/components/Dropdown/DefaultDropdownContainer.tsx +++ b/datahub-web-react/src/alchemy-components/components/Dropdown/DefaultDropdownContainer.tsx @@ -1,10 +1,10 @@ import styled from 'styled-components'; -import { colors, radius, shadows, spacing, transition, zIndices } from '@components/theme'; +import { radius, shadows, spacing, transition, zIndices } from '@components/theme'; -const DefaultDropdownContainer = styled.div<{ maxHeight?: number }>(({ maxHeight }) => ({ +const DefaultDropdownContainer = styled.div<{ maxHeight?: number }>(({ maxHeight, theme }) => ({ borderRadius: radius.md, - background: colors.white, + background: theme.colors.bg, zIndex: zIndices.dropdown, transition: `${transition.property.colors} ${transition.easing['ease-in-out']} ${transition.duration.normal}`, boxShadow: shadows.dropdown, diff --git a/datahub-web-react/src/alchemy-components/components/Dropdown/reset-dropdown-menu-styles.less b/datahub-web-react/src/alchemy-components/components/Dropdown/reset-dropdown-menu-styles.less index 380f39af0a4e5b..6df8efe6268825 100644 --- a/datahub-web-react/src/alchemy-components/components/Dropdown/reset-dropdown-menu-styles.less +++ b/datahub-web-react/src/alchemy-components/components/Dropdown/reset-dropdown-menu-styles.less @@ -15,8 +15,27 @@ } } -.ant-dropdown-menu-submenu-popup ul { - max-height: 80vh; - overflow-y: auto; - background: white; +// Submenu popups render in a portal — strip the outer wrapper bg/shadow +// and only keep styling on the inner ul.ant-dropdown-menu +.ant-dropdown-menu-submenu-popup { + background: transparent !important; + box-shadow: none !important; + + ul { + max-height: 80vh; + overflow-y: auto; + } + + > .ant-dropdown-menu { + border-radius: 12px; + padding: 8px; + } +} + +// When the submenu popup also has the reset class, remove the margin +// that's only needed for the root dropdown overlay +.datahub-reset-dropdown-menu-styles.ant-dropdown-menu-submenu-popup { + & .ant-dropdown-menu { + margin: 0; + } } diff --git a/datahub-web-react/src/alchemy-components/components/Editor/Editor.tsx b/datahub-web-react/src/alchemy-components/components/Editor/Editor.tsx index 14109ab43ab64c..7d3ee68edf6345 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/Editor.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/Editor.tsx @@ -1,6 +1,6 @@ import { EditorComponent, Remirror, TableComponents, ThemeProvider, useRemirror } from '@remirror/react'; import DOMPurify from 'dompurify'; -import React, { forwardRef, useEffect, useImperativeHandle } from 'react'; +import React, { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react'; import { useMount } from 'react-use'; import { BlockquoteExtension, @@ -25,8 +25,9 @@ import { TableExtension, UnderlineExtension, } from 'remirror/extensions'; +import { useTheme } from 'styled-components'; -import { EditorContainer, EditorTheme } from '@components/components/Editor/EditorTheme'; +import { EditorContainer, getEditorTheme } from '@components/components/Editor/EditorTheme'; import { OnChangeMarkdown } from '@components/components/Editor/OnChangeMarkdown'; import { FileDragDropExtension } from '@components/components/Editor/extensions/fileDragDrop/FileDragDropExtension'; import { htmlToMarkdown } from '@components/components/Editor/extensions/htmlToMarkdown'; @@ -38,7 +39,6 @@ import { FloatingToolbar } from '@components/components/Editor/toolbar/FloatingT import { TableCellMenu } from '@components/components/Editor/toolbar/TableCellMenu'; import { Toolbar } from '@components/components/Editor/toolbar/Toolbar'; import { EditorProps } from '@components/components/Editor/types'; -import { colors } from '@components/theme'; import { notEmpty } from '@app/entityV2/shared/utils'; @@ -60,6 +60,8 @@ export const Editor = forwardRef((props: EditorProps, ref) => { hideToolbar, compact, } = props; + const styledTheme = useTheme(); + const editorTheme = useMemo(() => getEditorTheme(styledTheme), [styledTheme]); const { manager, state, getContext } = useRemirror({ extensions: () => [ new BlockquoteExtension(), @@ -69,7 +71,7 @@ export const Editor = forwardRef((props: EditorProps, ref) => { new CodeExtension(), new DataHubMentionsExtension({}), new DropCursorExtension({ - color: colors.primary[100], + color: styledTheme.colors.borderBrandFocused, width: 2, }), new HardBreakExtension(), @@ -120,7 +122,7 @@ export const Editor = forwardRef((props: EditorProps, ref) => { $fixedBottomToolbar={fixedBottomToolbar} $compact={compact} > - + ({ + ...defaultRemirrorTheme, + fontSize: { + default: '14px', + }, + color: { + border: 'none', + outline: 'none', + primary: theme.colors.textSuccess, + table: { + ...defaultRemirrorTheme.color.table, + mark: theme.colors.textDisabled, + default: { + controller: theme.colors.bgHover, + border: theme.colors.border, + }, + selected: { + controller: theme.colors.bgHover, + border: theme.colors.border, + cell: theme.colors.bgSurface, + }, + preselect: { + controller: theme.colors.borderDisabled, + border: theme.colors.border, + }, + }, + }, +}); +/** @deprecated Use getEditorTheme(theme) instead */ export const EditorTheme: RemirrorThemeType = { ...defaultRemirrorTheme, fontSize: { @@ -29,19 +57,19 @@ export const EditorTheme: RemirrorThemeType = { primary: '#00B14F', table: { ...defaultRemirrorTheme.color.table, - mark: ANTD_GRAY[6], + mark: '#BFBFBF', default: { - controller: ANTD_GRAY[3], - border: ANTD_GRAY[4.5], + controller: '#F5F5F5', + border: '#D9D9D9', }, selected: { - controller: ANTD_GRAY[4], - border: ANTD_GRAY[4.5], - cell: ANTD_GRAY[2.5], + controller: '#F0F0F0', + border: '#D9D9D9', + cell: '#FAFAFA', }, preselect: { - controller: ANTD_GRAY[5], - border: ANTD_GRAY[6], + controller: '#D9D9D9', + border: '#BFBFBF', }, }, }, @@ -68,7 +96,7 @@ export const EditorContainer = styled.div<{ font-weight: 400; display: flex; flex: 1 1 auto; - border: ${(props) => (props.$readOnly || props.$hideBorder ? `none` : `1px solid ${ANTD_GRAY[4.5]}`)}; + border: ${(props) => (props.$readOnly || props.$hideBorder ? `none` : `1px solid ${props.theme.colors.border}`)}; border-radius: 12px; padding-bottom: ${(props) => (props.$fixedBottomToolbar ? '100px' : '0')}; @@ -90,14 +118,14 @@ export const EditorContainer = styled.div<{ line-height: ${(props) => (props.$compact ? '20px' : '1.5')}; white-space: pre-wrap; margin: 0; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; min-height: ${(props) => (props.$compact ? '80px' : 'auto')}; max-height: ${(props) => (props.$compact ? '80px' : 'auto')}; overflow-y: ${(props) => (props.$compact ? 'auto' : 'visible')}; a { font-weight: 500; - color: ${colors.primary[500]}; + color: ${(props) => props.theme.colors.hyperlinks}; } li { @@ -123,14 +151,14 @@ export const EditorContainer = styled.div<{ .autocomplete { padding: 0.2rem; - background: ${ANTD_GRAY[4]}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 4px; } table { display: block; th:not(.remirror-table-controller) { - background: ${ANTD_GRAY[2]}; + background: ${(props) => props.theme.colors.bgSurface}; } th:not(.remirror-table-controller), @@ -146,7 +174,7 @@ export const EditorContainer = styled.div<{ } &::-webkit-scrollbar-thumb { - background-color: ${colors.gray[300]}; + background-color: ${(props) => props.theme.colors.textDisabled}; border-radius: 2px; } } diff --git a/datahub-web-react/src/alchemy-components/components/Editor/extensions/fileDragDrop/FileNodeView.tsx b/datahub-web-react/src/alchemy-components/components/Editor/extensions/fileDragDrop/FileNodeView.tsx index 07130889c445f1..6bc460b0d2cc39 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/extensions/fileDragDrop/FileNodeView.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/extensions/fileDragDrop/FileNodeView.tsx @@ -14,7 +14,6 @@ import { handleFileDownload, } from '@components/components/Editor/extensions/fileDragDrop/fileUtils'; import { FileNode } from '@components/components/FileNode/FileNode'; -import { colors } from '@components/theme'; const FileContainer = styled.div<{ $isInline?: boolean }>` display: inline-block; @@ -26,7 +25,7 @@ const FileContainer = styled.div<{ $isInline?: boolean }>` .ProseMirror-selectednode & { border-radius: 8px; - background-color: ${colors.gray[1500]}; + background-color: ${props.theme.colors.bgSurface}; } ` : ` @@ -36,7 +35,7 @@ const FileContainer = styled.div<{ $isInline?: boolean }>` `} cursor: pointer; - color: ${({ theme }) => theme.styles['primary-color']}; + color: ${({ theme }) => theme.colors.textBrand}; `; const StyledFileNode = styled(FileNode)` @@ -44,7 +43,7 @@ const StyledFileNode = styled(FileNode)` `; const StyledSyntaxHighlighter = styled(SyntaxHighlighter)` - background-color: ${colors.gray[1500]} !important; + background-color: ${({ theme }) => theme.colors.bgSurface} !important; border: none !important; `; @@ -73,7 +72,7 @@ const VideoContainer = styled.div` min-width: 150px; max-width: 100%; width: 50%; - background-color: ${colors.black}; + background-color: ${(props) => props.theme.colors.overlayHeavy}; margin-top: 8px; `; @@ -90,7 +89,7 @@ const FileNameButtonWrapper = styled.div` :hover { border-radius: 8px; - background-color: ${colors.gray[1500]}; + background-color: ${({ theme }) => theme.colors.bgHover}; } `; diff --git a/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsComponent.tsx b/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsComponent.tsx index 587bde6c2a50b6..f1b1aae52c4b07 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsComponent.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsComponent.tsx @@ -10,7 +10,6 @@ import styled from 'styled-components'; import { MentionsDropdown } from '@components/components/Editor/extensions/mentions/MentionsDropdown'; import { useDataHubMentions } from '@components/components/Editor/extensions/mentions/useDataHubMentions'; import { calculateMentionsPlacement } from '@components/components/Editor/extensions/mentions/utils'; -import { colors } from '@components/theme'; import { useUserContext } from '@src/app/context/useUserContext'; import { useGetAutoCompleteMultipleResultsLazyQuery } from '@src/graphql/search.generated'; @@ -20,9 +19,9 @@ import { useGetAutoCompleteMultipleResultsLazyQuery } from '@src/graphql/search. * Used by both FloatingWrapper (document editor) and portal (chat sidebar). */ const DropdownWrapper = styled.div` - background: white; + background: ${(props) => props.theme.colors.bg}; border-radius: 12px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowMd}; overflow: hidden; .ant-spin-container { @@ -43,7 +42,7 @@ const PortalPositioner = styled.div<{ $bottom: string; $left: number }>` const StyledEmpty = styled(Empty)` margin: 16px; - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.textTertiary}; `; interface MentionsComponentProps { diff --git a/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsDropdown.tsx b/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsDropdown.tsx index 07f11536bde138..66b51e8da7a80f 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsDropdown.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsDropdown.tsx @@ -4,7 +4,6 @@ import { useDebounce } from 'react-use'; import styled from 'styled-components'; import { useDataHubMentions } from '@components/components/Editor/extensions/mentions/useDataHubMentions'; -import { colors } from '@components/theme'; import AutoCompleteItem from '@src/app/searchV2/autoComplete/AutoCompleteItem'; import { useEntityRegistry } from '@src/app/useEntityRegistry'; @@ -16,7 +15,7 @@ const HeaderItem = styled.div` padding: 8px 12px 4px; font-size: 12px; font-weight: 600; - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; text-transform: uppercase; letter-spacing: 0.5px; `; @@ -24,14 +23,14 @@ const HeaderItem = styled.div` const OptionItem = styled.div<{ readonly active?: boolean }>` min-height: 36px; padding: 6px 12px 6px 16px; - background: ${(props) => (props.active ? colors.gray[1500] : 'white')}; + background: ${(props) => (props.active ? props.theme.colors.bgHover : props.theme.colors.bg)}; transition: background 0.15s ease; cursor: pointer; display: flex; align-items: center; &:hover { - background: ${colors.gray[1500]}; + background: ${(props) => props.theme.colors.bgHover}; } `; diff --git a/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsNodeView.tsx b/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsNodeView.tsx index 6b0ff698b98077..aea7b2fefa8fbb 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsNodeView.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsNodeView.tsx @@ -5,7 +5,6 @@ import React from 'react'; import styled from 'styled-components'; import { IconStyleType } from '@src/app/entityV2/Entity'; -import { ANTD_GRAY } from '@src/app/entityV2/shared/constants'; import { HoverEntityTooltip } from '@src/app/recommendations/renderer/component/HoverEntityTooltip'; import { useEntityRegistry } from '@src/app/useEntityRegistry'; import { useGetEntityMentionNodeQuery } from '@src/graphql/search.generated'; @@ -15,7 +14,7 @@ const { Text } = Typography; const InvalidEntityText = styled(Text)` display: inline-block; font-weight: 500; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const ValidEntityText = styled(Text)` @@ -23,13 +22,12 @@ const ValidEntityText = styled(Text)` font-weight: 500; margin-left: 4px !important; word-break: break-all; - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; `; -// !important is needed to override inline styles const Container = styled.span` & > .anticon { - color: ${(props) => props.theme.styles['primary-color']} !important; + color: ${(props) => props.theme.colors.icon} !important; } `; diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButton.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButton.tsx index b02ed60ee14feb..1553a4b3378025 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButton.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButton.tsx @@ -2,16 +2,17 @@ import { Image } from '@phosphor-icons/react'; import { useCommands } from '@remirror/react'; import { Form, Input, Typography } from 'antd'; import React, { useState } from 'react'; +import { useTheme } from 'styled-components'; import { CommandButton } from '@components/components/Editor/toolbar/CommandButton'; import { Modal } from '@components/components/Modal'; -import { colors } from '@src/alchemy-components/theme'; - export const AddImageButton = () => { const [isModalVisible, setModalVisible] = useState(false); const [form] = Form.useForm(); const { insertImage } = useCommands(); + const styledTheme = useTheme(); + const iconColor = styledTheme.colors.icon; const handleButtonClick = () => { setModalVisible(true); @@ -37,7 +38,7 @@ export const AddImageButton = () => { <> } + icon={} commandName="insertImage" onClick={handleButtonClick} /> diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButtonV2.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButtonV2.tsx index 38bbf134be092d..63d439188bb2cf 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButtonV2.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButtonV2.tsx @@ -3,7 +3,7 @@ import { useCommands } from '@remirror/react'; import { Form } from 'antd'; import { FormInstance } from 'antd/es/form/Form'; import React, { useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { Button } from '@components/components/Button'; import { Dropdown } from '@components/components/Dropdown'; @@ -12,15 +12,14 @@ import { FileUploadContent } from '@components/components/Editor/toolbar/FileUpl import { Input } from '@components/components/Input'; import ButtonTabs from '@app/homeV3/modules/shared/ButtonTabs/ButtonTabs'; -import { colors } from '@src/alchemy-components/theme'; const UPLOAD_FILE_KEY = 'uploadFile'; const URL_KEY = 'url'; const ContentWrapper = styled.div` width: 300px; - background-color: ${colors.white}; - box-shadow: 0 4px 12px 0 rgba(9, 1, 61, 0.12); + background-color: ${({ theme }) => theme.colors.bg}; + box-shadow: ${({ theme }) => theme.colors.shadowMd}; display: flex; flex-direction: column; padding: 8px; @@ -69,6 +68,8 @@ function ImageUrlInput({ form, hideDropdown }: { form: FormInstance; hideDr export const AddImageButtonV2 = () => { const [showDropdown, setShowDropdown] = useState(false); const [form] = Form.useForm(); + const styledTheme = useTheme(); + const iconColor = styledTheme.colors.icon; const tabs = [ { @@ -102,7 +103,7 @@ export const AddImageButtonV2 = () => { > } + icon={} commandName="insertImage" onClick={handleButtonClick} /> diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddLinkButton.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddLinkButton.tsx index 47d25b4c259ef8..d158541668e6f5 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddLinkButton.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddLinkButton.tsx @@ -1,14 +1,15 @@ import { LinkSimpleHorizontal } from '@phosphor-icons/react'; import { useActive } from '@remirror/react'; import React, { useState } from 'react'; +import { useTheme } from 'styled-components'; import { CommandButton } from '@components/components/Editor/toolbar/CommandButton'; import { LinkModal } from '@components/components/Editor/toolbar/LinkModal'; -import { colors } from '@src/alchemy-components/theme'; - export const AddLinkButton = () => { const [isModalVisible, setModalVisible] = useState(false); + const styledTheme = useTheme(); + const iconColor = styledTheme.colors.icon; const active = useActive(true).link(); @@ -22,7 +23,7 @@ export const AddLinkButton = () => { <> } + icon={} commandName="insertLink" onClick={handleButtonClick} /> diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadButton.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadButton.tsx index cb7e874095838d..ebf508c6e88f94 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadButton.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadButton.tsx @@ -1,27 +1,29 @@ -import { Dropdown, Tooltip, colors } from '@components'; +import { Dropdown, Tooltip } from '@components'; import { useRemirrorContext } from '@remirror/react'; import { FileArrowUp } from 'phosphor-react'; import React, { useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { FileDragDropExtension } from '@components/components/Editor/extensions/fileDragDrop'; import { CommandButton } from '@components/components/Editor/toolbar/CommandButton'; import { FileUploadContent } from '@components/components/Editor/toolbar/FileUploadContent'; const DropdownContainer = styled.div` - box-shadow: 0 4px 12px 0 rgba(9, 1, 61, 0.12); + box-shadow: ${({ theme }) => theme.colors.shadowMd}; display: flex; flex-direction: column; padding: 8px; gap: 8px; border-radius: 12px; width: 192px; - background: ${colors.white}; + background: ${({ theme }) => theme.colors.bg}; `; export const FileUploadButton = () => { const remirrorContext = useRemirrorContext(); const fileExtension = remirrorContext.getExtension(FileDragDropExtension); + const styledTheme = useTheme(); + const iconColor = styledTheme.colors.icon; const [showDropdown, setShowDropdown] = useState(false); @@ -40,7 +42,7 @@ export const FileUploadButton = () => { > } + icon={} onClick={() => setShowDropdown(true)} commandName="uploadFile" /> diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadContent.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadContent.tsx index 52b75032abee64..f47a972c29ef5f 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadContent.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FileUploadContent.tsx @@ -126,7 +126,7 @@ export const FileUploadContent = ({ hideDropdown }: Props) => { Choose File - + Max size: 2GB diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FloatingToolbar.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FloatingToolbar.tsx index 8cbe6337ccc9f1..fa9222a3c4dbe0 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FloatingToolbar.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/FloatingToolbar.tsx @@ -16,20 +16,15 @@ import { CommandButton } from '@components/components/Editor/toolbar/CommandButt import { CodeIcon } from '@components/components/Editor/toolbar/Icons'; import { LinkModal } from '@components/components/Editor/toolbar/LinkModal'; -import { ANTD_GRAY } from '@src/app/entityV2/shared/constants'; - const { Text } = Typography; export const ToolbarContainer = styled.span` display: flex; align-items: center; padding: 2px; - background-color: ${ANTD_GRAY[1]}; + background-color: ${(props) => props.theme.colors.bg}; border-radius: 4px; - box-shadow: - 0 3px 6px -4px #0000001f, - 0 6px 16px #00000014, - 0 9px 28px 8px #0000000d; + box-shadow: ${(props) => props.theme.colors.shadowLg}; overflow: hidden; z-index: 300; `; diff --git a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/Toolbar.tsx b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/Toolbar.tsx index 9e20969b92d3bf..cb8353f8169c68 100644 --- a/datahub-web-react/src/alchemy-components/components/Editor/toolbar/Toolbar.tsx +++ b/datahub-web-react/src/alchemy-components/components/Editor/toolbar/Toolbar.tsx @@ -12,7 +12,7 @@ import { import { useActive, useCommands, useRemirrorContext } from '@remirror/react'; import { Divider } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { FileDragDropExtension } from '@components/components/Editor/extensions/fileDragDrop'; import { AddImageButton } from '@components/components/Editor/toolbar/AddImageButton'; @@ -24,7 +24,6 @@ import { FontSizeSelect } from '@components/components/Editor/toolbar/FontSizeSe import { HeadingMenu } from '@components/components/Editor/toolbar/HeadingMenu'; import { useAppConfig } from '@app/useAppConfig'; -import colors from '@src/alchemy-components/theme/foundations/colors'; const Container = styled.div<{ $fixedBottom?: boolean }>` position: ${(props) => (props.$fixedBottom ? 'fixed' : 'sticky')}; @@ -34,10 +33,10 @@ const Container = styled.div<{ $fixedBottom?: boolean }>` ? 'left: 50%; transform: translateX(-50%); max-width: 800px; width: fit-content;' : 'width: 100%;'} z-index: ${(props) => (props.$fixedBottom ? '1000' : '99')}; - background-color: white; + background-color: ${(props) => props.theme.colors.bg}; ${(props) => props.$fixedBottom - ? 'border-radius: 12px; border: 1px solid #e8e8e8;' + ? `border-radius: 12px; border: 1px solid ${props.theme.colors.border};` : 'border-top-left-radius: 12px; border-top-right-radius: 12px;'} padding: 8px !important; & button { @@ -46,10 +45,7 @@ const Container = styled.div<{ $fixedBottom?: boolean }>` display: flex; justify-content: start; align-items: center; - ${(props) => - props.$fixedBottom - ? 'box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 6px rgba(0, 0, 0, 0.08);' - : 'box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);'} + box-shadow: ${(props) => (props.$fixedBottom ? props.theme.colors.shadowLg : props.theme.colors.shadowSm)}; `; const InnerContainer = styled.div` @@ -75,6 +71,8 @@ export const Toolbar = ({ styles, fixedBottom }: Props) => { const { documentationFileUploadV1 } = config.featureFlags; const remirrorContext = useRemirrorContext(); const fileExtension = remirrorContext.getExtension(FileDragDropExtension); + const themeConfig = useTheme(); + const iconColor = themeConfig.colors.icon; const shouldShowImageButtonV2 = documentationFileUploadV1 && fileExtension.options.uploadFileProps?.onFileUpload; @@ -85,54 +83,54 @@ export const Toolbar = ({ styles, fixedBottom }: Props) => { } + icon={} style={{ marginRight: 2 }} commandName="toggleBold" active={active.bold()} onClick={() => commands.toggleBold()} /> } + icon={} style={{ marginRight: 2 }} commandName="toggleItalic" active={active.italic()} onClick={() => commands.toggleItalic()} /> } + icon={} style={{ marginRight: 2 }} commandName="toggleUnderline" active={active.underline()} onClick={() => commands.toggleUnderline()} /> } + icon={} commandName="toggleStrike" active={active.strike()} onClick={() => commands.toggleStrike()} /> } + icon={} commandName="toggleBulletList" active={active.bulletList()} onClick={() => commands.toggleBulletList()} /> } + icon={} commandName="toggleOrderedList" active={active.orderedList()} onClick={() => commands.toggleOrderedList()} /> } + icon={} commandName="toggleCode" active={active.code()} onClick={() => commands.toggleCode()} /> } + icon={} commandName="toggleCodeBlock" active={active.codeBlock()} onClick={() => commands.toggleCodeBlock()} @@ -141,10 +139,10 @@ export const Toolbar = ({ styles, fixedBottom }: Props) => { {shouldShowImageButtonV2 ? : } } + icon={} commandName="createTable" onClick={() => commands.createTable()} - disabled={active.table()} /* Disables nested tables */ + disabled={active.table()} /> diff --git a/datahub-web-react/src/alchemy-components/components/FileDragAndDropArea/FileDragAndDropArea.tsx b/datahub-web-react/src/alchemy-components/components/FileDragAndDropArea/FileDragAndDropArea.tsx index 73d4002103eb7b..69287684ca65b1 100644 --- a/datahub-web-react/src/alchemy-components/components/FileDragAndDropArea/FileDragAndDropArea.tsx +++ b/datahub-web-react/src/alchemy-components/components/FileDragAndDropArea/FileDragAndDropArea.tsx @@ -9,7 +9,7 @@ const Container = styled.div<{ $dragActive?: boolean }>` flex-direction: column; align-items: center; - border: 1px dashed ${(props) => (props.$dragActive ? colors.primary[500] : colors.gray[100])}; + border: 1px dashed ${({ $dragActive, theme }) => ($dragActive ? colors.primary[500] : theme.colors.border)}; border-radius: 12px; `; @@ -29,7 +29,7 @@ const IconContainer = styled.div` width: 32px; height: 32px; border-radius: 100%; - background-color: ${colors.gray[1000]}; + background-color: ${({ theme }) => theme.colors.bgSurfaceBrand}; `; const ActionTextContainer = styled.div` @@ -113,7 +113,7 @@ export function FileDragAndDropArea({ onFilesUpload, className }: Props) { > e.stopPropagation()}> - + @@ -124,9 +124,7 @@ export function FileDragAndDropArea({ onFilesUpload, className }: Props) { - - Max Size: 2GB - + Max Size: 2GB diff --git a/datahub-web-react/src/alchemy-components/components/FileNode/FileIcon.tsx b/datahub-web-react/src/alchemy-components/components/FileNode/FileIcon.tsx index de8813e84f9987..d39f5e15826143 100644 --- a/datahub-web-react/src/alchemy-components/components/FileNode/FileIcon.tsx +++ b/datahub-web-react/src/alchemy-components/components/FileNode/FileIcon.tsx @@ -16,5 +16,5 @@ interface Props { export function FileIcon({ extension, className }: Props) { const icon = useMemo(() => getFileIconFromExtension(extension || ''), [extension]); - return ; + return ; } diff --git a/datahub-web-react/src/alchemy-components/components/FileNode/FileNode.tsx b/datahub-web-react/src/alchemy-components/components/FileNode/FileNode.tsx index 1ec69cbe752478..655af1ec360a56 100644 --- a/datahub-web-react/src/alchemy-components/components/FileNode/FileNode.tsx +++ b/datahub-web-react/src/alchemy-components/components/FileNode/FileNode.tsx @@ -1,4 +1,4 @@ -import { Button, colors } from '@components'; +import { Button } from '@components'; import { Typography } from 'antd'; import React, { useCallback, useMemo } from 'react'; import styled from 'styled-components'; @@ -18,7 +18,7 @@ const Container = styled.div<{ $border?: boolean; $fontSize?: string }>` props.$border && ` border-radius: 8px; - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${props.theme.colors.border}; `} ${(props) => props.$fontSize && `font-size: ${props.$fontSize};`} @@ -42,7 +42,7 @@ const CloseButton = styled(Button)` `; const FileName = styled(Typography.Text)` - color: ${({ theme }) => theme?.styles?.['primary-color'] ?? colors.violet[500]}; + color: ${({ theme }) => theme.colors.textBrand}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.tsx b/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.tsx index e0bcfdef8a02b6..fa7d3cde04bf6d 100644 --- a/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.tsx +++ b/datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.tsx @@ -74,13 +74,13 @@ export function GraphCard({ {showEmptyMessageHeader && ( - + No Data )} - {emptyMessage} + {emptyMessage} {moreInfoModalContent && ( - setShowInfoModal(true)}> + setShowInfoModal(true)}> More info )} diff --git a/datahub-web-react/src/alchemy-components/components/GraphCard/MoreInfoModal.tsx b/datahub-web-react/src/alchemy-components/components/GraphCard/MoreInfoModal.tsx index eb3045a1aaef43..fad36d4c12fcee 100644 --- a/datahub-web-react/src/alchemy-components/components/GraphCard/MoreInfoModal.tsx +++ b/datahub-web-react/src/alchemy-components/components/GraphCard/MoreInfoModal.tsx @@ -7,7 +7,7 @@ export const StyledModal = styled(Modal)` font-family: ${typography.fonts.body}; &&& .ant-modal-content { - box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12); + box-shadow: ${(props) => props.theme.colors.shadowMd}; border-radius: 12px; } @@ -42,7 +42,7 @@ const MoreInfoModal = ({ showModal, handleClose, modalContent }: Props) => { centered footer={null} title={ - + No Data } diff --git a/datahub-web-react/src/alchemy-components/components/Heading/components.ts b/datahub-web-react/src/alchemy-components/components/Heading/components.ts index 4b0300bb5d1e14..e0a46a995cbaf0 100644 --- a/datahub-web-react/src/alchemy-components/components/Heading/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Heading/components.ts @@ -1,7 +1,8 @@ import styled from 'styled-components'; import { HeadingStyleProps } from '@components/components/Heading/types'; -import { colors, typography } from '@components/theme'; +import { typography } from '@components/theme'; +import { ColorOptions } from '@components/theme/config'; import { getColor, getFontSize } from '@components/theme/utils'; const headingStyles = { @@ -31,27 +32,20 @@ const headingStyles = { }, }; -// Default styles const baseStyles = { fontFamily: typography.fonts.heading, margin: 0, - - '& a': { - color: colors.violet[400], - textDecoration: 'none', - transition: 'color 0.15s ease', - - '&:hover': { - color: colors.violet[500], - }, - }, }; // Prop Driven Styles const propStyles = (props: HeadingStyleProps, isText = false) => { const styles = {} as any; if (props.size) styles.fontSize = getFontSize(props.size); - if (props.color) styles.color = getColor(props.color, props.colorLevel); + if (props.color) { + const semantic = props.theme.colors[props.color]; + styles.color = + typeof semantic === 'string' ? semantic : getColor(props.color as ColorOptions, props.colorLevel); + } if (props.weight) styles.fontWeight = typography.fontWeights[props.weight]; if (isText) styles.lineHeight = typography.lineHeights[props.size]; return styles; @@ -64,6 +58,14 @@ const headings = {} as any; const component = styled[heading.toLowerCase()]; headings[heading] = component({ ...baseStyles, ...headingStyles[heading] }, (props: HeadingStyleProps) => ({ ...propStyles(props), + '& a': { + color: props.theme.colors.hyperlinks, + textDecoration: 'none', + transition: 'color 0.15s ease', + '&:hover': { + color: props.theme.colors.textBrand, + }, + }, })); }); diff --git a/datahub-web-react/src/alchemy-components/components/Heading/types.ts b/datahub-web-react/src/alchemy-components/components/Heading/types.ts index fee32db458dc27..b29040c7f3e5cc 100644 --- a/datahub-web-react/src/alchemy-components/components/Heading/types.ts +++ b/datahub-web-react/src/alchemy-components/components/Heading/types.ts @@ -7,6 +7,8 @@ import type { FontWeightOptions, } from '@components/theme/config'; +import { Theme } from '@conf/theme/types'; + export interface HeadingPropsDefaults { type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; color: FontColorOptions; @@ -18,4 +20,6 @@ export interface HeadingProps extends Partial, Omit & Pick; +export interface HeadingStyleProps extends Omit, Pick { + theme: Theme; +} diff --git a/datahub-web-react/src/alchemy-components/components/Icon/Icon.tsx b/datahub-web-react/src/alchemy-components/components/Icon/Icon.tsx index 1d9e8ace3fa97e..8fbb6c3ca66ee7 100644 --- a/datahub-web-react/src/alchemy-components/components/Icon/Icon.tsx +++ b/datahub-web-react/src/alchemy-components/components/Icon/Icon.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { IconWrapper } from '@components/components/Icon/components'; import { IconProps, IconPropsDefaults } from '@components/components/Icon/types'; import { getIconComponent, getIconNames } from '@components/components/Icon/utils'; +import { ColorOptions } from '@components/theme/config'; import { getColor, getFontSize, getRotationTransform } from '@components/theme/utils'; import { useCustomTheme } from '@src/customThemeContext'; @@ -62,14 +63,18 @@ export const Icon = ({ return ( - + {(() => { + const semantic = theme?.colors?.[color ?? '']; + const resolvedColor = + typeof semantic === 'string' ? semantic : getColor(color as ColorOptions, colorLevel, theme); + return ( + + ); + })()} ); diff --git a/datahub-web-react/src/alchemy-components/components/IconLabel/components.ts b/datahub-web-react/src/alchemy-components/components/IconLabel/components.ts index 6abffb80dc63ff..2dabe38b15892c 100644 --- a/datahub-web-react/src/alchemy-components/components/IconLabel/components.ts +++ b/datahub-web-react/src/alchemy-components/components/IconLabel/components.ts @@ -16,6 +16,6 @@ export const Label = styled.span` font-family: Mulish; font-size: 14px; font-weight: 400; - color: #374066; + color: ${(props) => props.theme.colors.text}; white-space: normal; `; diff --git a/datahub-web-react/src/alchemy-components/components/IncidentPriorityLabel/components.ts b/datahub-web-react/src/alchemy-components/components/IncidentPriorityLabel/components.ts index 18c7cf62d0255c..197211acce7db7 100644 --- a/datahub-web-react/src/alchemy-components/components/IncidentPriorityLabel/components.ts +++ b/datahub-web-react/src/alchemy-components/components/IncidentPriorityLabel/components.ts @@ -8,6 +8,6 @@ export const Label = styled.span` font-family: Mulish; font-size: 14px; font-weight: 400; - color: #374066; + color: ${(props) => props.theme.colors.text}; white-space: normal; `; diff --git a/datahub-web-react/src/alchemy-components/components/IncidentStagePill/IncidentStagePill.tsx b/datahub-web-react/src/alchemy-components/components/IncidentStagePill/IncidentStagePill.tsx index 741d4657cd955a..1bf66708c1e6dc 100644 --- a/datahub-web-react/src/alchemy-components/components/IncidentStagePill/IncidentStagePill.tsx +++ b/datahub-web-react/src/alchemy-components/components/IncidentStagePill/IncidentStagePill.tsx @@ -1,41 +1,47 @@ import { CheckCircle, Circle, CircleDashed, CircleHalf, Hexagon } from '@phosphor-icons/react'; -import React from 'react'; +import React, { useMemo } from 'react'; +import { useTheme } from 'styled-components'; import { IncidentStageLabel } from '@components/components/IncidentStagePill/constant'; import { Pill } from '@components/components/Pills'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { IncidentStage } from '@src/types.generated'; -const INCIDENT_STAGE = { - [IncidentStage.Triage]: { - bgColor: colors.gray[1000], - color: colors.violet[500], - icon: , - }, - [IncidentStage.Investigation]: { - bgColor: colors.yellow[1200], - color: colors.yellow[1000], - icon: , - }, - [IncidentStage.WorkInProgress]: { - bgColor: colors.gray[1100], - color: colors.blue[1000], - icon: , - }, - [IncidentStage.Fixed]: { - bgColor: colors.gray[1300], - color: colors.green[1000], - icon: , - }, - [IncidentStage.NoActionRequired]: { - bgColor: colors.gray[100], - color: colors.gray[1700], - icon: , - }, -}; - export const IncidentStagePill = ({ stage, showLabel = false }: { stage: string; showLabel?: boolean }) => { + const theme = useTheme(); + const tc = theme?.colors; + + const INCIDENT_STAGE = useMemo( + () => ({ + [IncidentStage.Triage]: { + bgColor: tc?.bgSurfaceBrand, + color: tc?.iconBrand, + icon: , + }, + [IncidentStage.Investigation]: { + bgColor: tc?.bgSurfaceWarning, + color: tc?.iconWarning, + icon: , + }, + [IncidentStage.WorkInProgress]: { + bgColor: tc?.bgSurfaceInfo, + color: tc?.iconInformation, + icon: , + }, + [IncidentStage.Fixed]: { + bgColor: tc?.bgSurfaceSuccess, + color: tc?.iconSuccess, + icon: , + }, + [IncidentStage.NoActionRequired]: { + bgColor: tc?.border, + color: tc?.textSecondary, + icon: , + }, + }), + [tc], + ); + if (!stage) return ; const { icon, color, bgColor } = INCIDENT_STAGE[stage] || {}; diff --git a/datahub-web-react/src/alchemy-components/components/Input/Input.tsx b/datahub-web-react/src/alchemy-components/components/Input/Input.tsx index 905a0bec80abf1..0241088f5eab00 100644 --- a/datahub-web-react/src/alchemy-components/components/Input/Input.tsx +++ b/datahub-web-react/src/alchemy-components/components/Input/Input.tsx @@ -109,15 +109,24 @@ export const Input = ({ /> {!isPassword && ( - {invalid && } - {isSuccess && } - {warning && } + {invalid && } + {isSuccess && } + {warning && } )} {!!onClear && value && ( - + + )} + {isPassword && ( + setShowPassword(!showPassword)} icon={passwordIcon} size="lg" color="icon" /> )} - {isPassword && setShowPassword(!showPassword)} icon={passwordIcon} size="lg" />} {invalid && error && !errorOnHover && {error}} {warning && {warning}} diff --git a/datahub-web-react/src/alchemy-components/components/Input/components.ts b/datahub-web-react/src/alchemy-components/components/Input/components.ts index f0c0d8c61a673f..72f819147ae033 100644 --- a/datahub-web-react/src/alchemy-components/components/Input/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Input/components.ts @@ -1,13 +1,12 @@ import styled from 'styled-components'; -import type { InputProps } from '@components/components/Input/types'; import { INPUT_MAX_HEIGHT, formLabelTextStyles, inputPlaceholderTextStyles, inputValueTextStyles, } from '@components/components/commonStyles'; -import theme, { borders, colors, radius, spacing, typography } from '@components/theme'; +import { borders, radius, spacing, typography } from '@components/theme'; import { getStatusColors } from '@components/theme/utils'; const defaultFlexStyles = { @@ -28,40 +27,44 @@ export const InputWrapper = styled.div({ width: '100%', }); -export const InputContainer = styled.div( - ({ isSuccess, warning, isDisabled, isInvalid }: InputProps) => ({ - border: `${borders['1px']} ${getStatusColors(isSuccess, warning, isInvalid)}`, - backgroundColor: isDisabled ? colors.gray[1500] : colors.white, - paddingRight: spacing.md, - }), - { - ...defaultFlexStyles, - width: '100%', - maxHeight: INPUT_MAX_HEIGHT, - overflow: 'hidden', - borderRadius: radius.md, - flex: 1, - color: colors.gray[400], // 1st icon color - - '&:focus-within': { - borderColor: colors.violet[200], - outline: `${borders['1px']} ${colors.violet[200]}`, - }, +export const InputContainer = styled.div<{ + isSuccess?: boolean; + warning?: string; + isDisabled?: boolean; + isInvalid?: boolean; +}>(({ isSuccess, warning, isDisabled, isInvalid, theme }) => ({ + border: `${borders['1px']} ${getStatusColors(isSuccess, warning, isInvalid, theme.colors)}`, + backgroundColor: isDisabled ? theme.colors.bgInputDisabled : theme.colors.bg, + paddingRight: spacing.md, + ...defaultFlexStyles, + width: '100%', + maxHeight: INPUT_MAX_HEIGHT, + overflow: 'hidden' as const, + borderRadius: radius.md, + flex: 1, + color: theme.colors.icon, + boxShadow: theme.colors.shadowXs, + + '&:focus-within': { + borderColor: theme.colors.borderBrandFocused, + outline: `${borders['1px']} ${theme.colors.borderBrandFocused}`, }, -); +})); -export const InputField = styled.input({ +export const InputField = styled.input(({ theme }) => ({ padding: `${spacing.sm} ${spacing.md}`, lineHeight: typography.lineHeights.normal, maxHeight: INPUT_MAX_HEIGHT, border: borders.none, width: '100%', + backgroundColor: 'transparent', - // Shared common input text styles ...inputValueTextStyles(), + color: theme.colors.text, '&::placeholder': { ...inputPlaceholderTextStyles, + color: theme.colors.textPlaceholder, }, '&:focus': { @@ -69,32 +72,33 @@ export const InputField = styled.input({ }, '&:disabled': { - backgroundColor: colors.gray[1500], + backgroundColor: theme.colors.bgInputDisabled, cursor: 'not-allowed', }, -}); +})); -export const Required = styled.span({ - color: colors.red[500], -}); +export const Required = styled.span(({ theme }) => ({ + color: theme.colors.textError, +})); -export const Label = styled.div({ +export const Label = styled.div(({ theme }) => ({ ...formLabelTextStyles, + color: theme.colors.text, marginBottom: spacing.xsm, textAlign: 'left', -}); +})); -export const ErrorMessage = styled.div({ +export const ErrorMessage = styled.div(({ theme: t }) => ({ ...defaultMessageStyles, - color: theme.semanticTokens.colors.error, -}); + color: t.colors.textError, +})); -export const WarningMessage = styled.div({ +export const WarningMessage = styled.div(({ theme: t }) => ({ ...defaultMessageStyles, - color: theme.semanticTokens.colors.warning, -}); + color: t.colors.textWarning, +})); -export const HelperText = styled.div({ +export const HelperText = styled.div(({ theme }) => ({ ...defaultMessageStyles, - color: colors.gray[600], -}); + color: theme.colors.textSecondary, +})); diff --git a/datahub-web-react/src/alchemy-components/components/LineChart/components.tsx b/datahub-web-react/src/alchemy-components/components/LineChart/components.tsx index 073d510dc5765c..209a74017d04a7 100644 --- a/datahub-web-react/src/alchemy-components/components/LineChart/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/LineChart/components.tsx @@ -1,11 +1,9 @@ import React, { forwardRef, useEffect, useRef } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { GLYPH_DROP_SHADOW_FILTER } from '@components/components/LineChart/constants'; import { GlyphProps } from '@components/components/LineChart/types'; -import { colors } from '@src/alchemy-components/theme'; - export const ChartWrapper = styled.div` width: 100%; height: 100%; @@ -14,10 +12,14 @@ export const ChartWrapper = styled.div` `; export const Glyph = ({ x, y }: GlyphProps): React.ReactElement => { + const styledTheme = useTheme(); + const bgColor = styledTheme.colors.bg; + const brandColor = styledTheme.colors.iconBrand; + return ( - - + + ); }; diff --git a/datahub-web-react/src/alchemy-components/components/LineChart/defaults.tsx b/datahub-web-react/src/alchemy-components/components/LineChart/defaults.tsx index 7a07a478835056..04546f141cad16 100644 --- a/datahub-web-react/src/alchemy-components/components/LineChart/defaults.tsx +++ b/datahub-web-react/src/alchemy-components/components/LineChart/defaults.tsx @@ -9,73 +9,84 @@ import { Datum, LineChartProps } from '@components/components/LineChart/types'; import { roundToEven } from '@components/components/LineChart/utils'; import { abbreviateNumber } from '@components/components/dataviz/utils'; -import { colors } from '@src/alchemy-components/theme'; +function getCommonTickLabelProps(themeColors?: Record): TickLabelProps { + return { + fontSize: 10, + fontFamily: 'Mulish', + fill: themeColors?.textSecondary ?? '#5F5E6C', + }; +} -const commonTickLabelProps: TickLabelProps = { - fontSize: 10, - fontFamily: 'Mulish', - fill: colors.gray[1700], -}; +export function getLineChartDefaults(themeColors?: Record): LineChartProps { + const commonTickLabelProps = getCommonTickLabelProps(themeColors); -export const lineChartDefault: LineChartProps = { - data: [], - isEmpty: false, + return { + data: [], + isEmpty: false, - xScale: { type: 'time' }, - yScale: { type: 'linear', nice: true, round: true, zero: true }, - shouldAdjustYZeroPoint: true, + xScale: { type: 'time' }, + yScale: { type: 'linear', nice: true, round: true, zero: true }, + shouldAdjustYZeroPoint: true, - lineColor: colors.violet[500], - areaColor: 'url(#line-gradient)', - margin: { top: 0, right: 0, bottom: 0, left: 0 }, + lineColor: themeColors?.iconBrand ?? '#705EE4', + areaColor: 'url(#line-gradient)', + margin: { top: 0, right: 0, bottom: 0, left: 0 }, - leftAxisProps: { - tickFormat: abbreviateNumber, - tickLabelProps: { - ...commonTickLabelProps, - textAnchor: 'end', - width: 50, + leftAxisProps: { + tickFormat: abbreviateNumber, + tickLabelProps: { + ...commonTickLabelProps, + textAnchor: 'end', + width: 50, + }, + computeNumTicks: () => 5, + hideAxisLine: true, + hideTicks: true, }, - computeNumTicks: () => 5, - hideAxisLine: true, - hideTicks: true, - }, - showLeftAxisLine: false, - bottomAxisProps: { - tickFormat: (x) => dayjs(x).format('D MMM'), - tickLabelProps: { - ...commonTickLabelProps, - textAnchor: 'middle', - verticalAnchor: 'start', + showLeftAxisLine: false, + bottomAxisProps: { + tickFormat: (x) => dayjs(x).format('D MMM'), + tickLabelProps: { + ...commonTickLabelProps, + textAnchor: 'middle', + verticalAnchor: 'start', + }, + computeNumTicks: (width, _, margin, data) => { + const widthOfTick = 80; + const widthOfAxis = width - margin.right - margin.left; + const maxCountOfTicks = Math.ceil(widthOfAxis / widthOfTick); + const numOfTicks = roundToEven(maxCountOfTicks / 2); + return Math.max(Math.min(numOfTicks, data.length - 1), 1); + }, + hideAxisLine: true, + hideTicks: true, }, - computeNumTicks: (width, _, margin, data) => { - const widthOfTick = 80; - const widthOfAxis = width - margin.right - margin.left; - const maxCountOfTicks = Math.ceil(widthOfAxis / widthOfTick); - const numOfTicks = roundToEven(maxCountOfTicks / 2); - return Math.max(Math.min(numOfTicks, data.length - 1), 1); + showBottomAxisLine: true, + gridProps: { + rows: true, + columns: false, + stroke: themeColors?.border ?? '#e0e0e0', + computeNumTicks: () => 5, + lineStyle: {}, }, - hideAxisLine: true, - hideTicks: true, - }, - showBottomAxisLine: true, - gridProps: { - rows: true, - columns: false, - stroke: '#e0e0e0', - computeNumTicks: () => 5, - lineStyle: {}, - }, - renderGradients: () => ( - - ), - toolbarVerticalCrosshairStyle: { - stroke: colors.white, - strokeWidth: 2, - filter: GLYPH_DROP_SHADOW_FILTER, - }, - renderTooltipGlyph: (props) => , - showGlyphOnSingleDataPoint: true, - renderGlyphOnSingleDataPoint: Glyph, -}; + renderGradients: () => ( + + ), + toolbarVerticalCrosshairStyle: { + stroke: themeColors?.bg ?? '#FFFFFF', + strokeWidth: 2, + filter: GLYPH_DROP_SHADOW_FILTER, + }, + renderTooltipGlyph: (props) => , + showGlyphOnSingleDataPoint: true, + renderGlyphOnSingleDataPoint: Glyph, + }; +} + +export const lineChartDefault: LineChartProps = getLineChartDefaults(); diff --git a/datahub-web-react/src/alchemy-components/components/Link/components.ts b/datahub-web-react/src/alchemy-components/components/Link/components.ts index 1108750e0b3b57..596be281810caa 100644 --- a/datahub-web-react/src/alchemy-components/components/Link/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Link/components.ts @@ -4,7 +4,10 @@ import { LinkStyleProps } from '@components/components/Link/types'; import { getColor } from '@components/theme/utils'; export const StyledLink = styled.a` - color: ${(props) => getColor(props.color, props.colorLevel)}; + color: ${(props) => { + const semantic = props.theme.colors[props.color ?? '']; + return typeof semantic === 'string' ? semantic : getColor(props.color, props.colorLevel, props.theme); + }}; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; diff --git a/datahub-web-react/src/alchemy-components/components/LoadedImage/LoadedImage.tsx b/datahub-web-react/src/alchemy-components/components/LoadedImage/LoadedImage.tsx index 795c703924b9cd..12d159923255b0 100644 --- a/datahub-web-react/src/alchemy-components/components/LoadedImage/LoadedImage.tsx +++ b/datahub-web-react/src/alchemy-components/components/LoadedImage/LoadedImage.tsx @@ -2,7 +2,6 @@ import { Skeleton } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { colors } from '@src/alchemy-components'; import type { LoadedImageProps } from '@src/alchemy-components/components/LoadedImage/types'; const ImageContainer = styled.div<{ width?: string }>` @@ -34,13 +33,13 @@ const ImageSkeleton = styled(Skeleton.Image)<{ width?: string }>` const ErrorPlaceholder = styled.div<{ width?: string }>` width: ${(props) => props.width || 'auto'}; height: auto; - background: ${colors.gray[1500]}; + background: ${({ theme }) => theme.colors.bgSurface}; border-radius: 8px; - color: ${colors.gray[1800]}; + color: ${({ theme }) => theme.colors.textTertiary}; display: flex; align-items: center; justify-content: center; - border: 2px dashed ${colors.gray[1400]}; + border: 2px dashed ${({ theme }) => theme.colors.border}; font-size: 14px; min-height: 100px; `; diff --git a/datahub-web-react/src/alchemy-components/components/LoadedVideo/LoadedVideo.components.tsx b/datahub-web-react/src/alchemy-components/components/LoadedVideo/LoadedVideo.components.tsx index 5e83132ee46f2c..d4c1ca293c2d16 100644 --- a/datahub-web-react/src/alchemy-components/components/LoadedVideo/LoadedVideo.components.tsx +++ b/datahub-web-react/src/alchemy-components/components/LoadedVideo/LoadedVideo.components.tsx @@ -1,7 +1,5 @@ import styled from 'styled-components'; -import colors from '@components/theme/foundations/colors'; - const STORY_WIDTH = '600px'; const STORY_PADDING = '20px'; @@ -13,7 +11,7 @@ export const StoryContainer = styled.div` export const StoryTitle = styled.h3` margin-bottom: 20px; text-align: center; - color: ${colors.gray[600]}; + color: ${({ theme }) => theme.colors.text}; font-size: 18px; font-weight: 600; `; @@ -21,13 +19,13 @@ export const StoryTitle = styled.h3` export const StoryDescription = styled.p` margin-bottom: 20px; text-align: center; - color: ${colors.gray[1700]}; + color: ${({ theme }) => theme.colors.textSecondary}; font-size: 14px; line-height: 1.5; `; export const CarouselContainer = styled.div` - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${({ theme }) => theme.colors.border}; border-radius: 8px; padding: 20px; `; @@ -41,7 +39,7 @@ export const SlideTitle = styled.h4` margin-bottom: 16px; font-size: 16px; font-weight: 600; - color: ${colors.gray[600]}; + color: ${({ theme }) => theme.colors.text}; `; export const VideoContainer = styled.div` @@ -57,12 +55,12 @@ export const ErrorContainer = styled.div` justify-content: center; width: 400px; height: 225px; - background-color: ${colors.red[0]}; - border: 2px dashed ${colors.red[500]}; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; + border: 2px dashed ${({ theme }) => theme.colors.borderError}; border-radius: 8px; margin: 0 auto; font-size: 16px; - color: ${colors.red[500]}; + color: ${({ theme }) => theme.colors.textError}; font-weight: 500; `; @@ -72,12 +70,12 @@ export const LoadingContainer = styled.div` justify-content: center; width: 400px; height: 225px; - background-color: ${colors.gray[1500]}; - border: 2px dashed ${colors.gray[100]}; + background-color: ${({ theme }) => theme.colors.bgSurface}; + border: 2px dashed ${({ theme }) => theme.colors.border}; border-radius: 8px; margin: 0 auto; font-size: 16px; - color: ${colors.gray[1700]}; + color: ${({ theme }) => theme.colors.textSecondary}; font-weight: 500; `; @@ -90,7 +88,7 @@ export const LoadingOverlay = styled.div` display: flex; align-items: center; justify-content: center; - background-color: ${colors.gray[1500]}; + background-color: ${({ theme }) => theme.colors.bgSurface}; z-index: 1; border-radius: 4px; `; @@ -119,11 +117,11 @@ export const IndicatorDot = styled.div<{ $isActive: boolean }>` width: 12px; height: 12px; border-radius: 50%; - background-color: ${({ $isActive }) => ($isActive ? colors.primary[500] : colors.gray[100])}; + background-color: ${({ $isActive, theme }) => ($isActive ? theme.colors.textBrand : theme.colors.bgSurface)}; `; export const IndicatorText = styled.p` margin-top: 10px; font-size: 12px; - color: ${colors.gray[1800]}; + color: ${({ theme }) => theme.colors.textTertiary}; `; diff --git a/datahub-web-react/src/alchemy-components/components/Loader/components.tsx b/datahub-web-react/src/alchemy-components/components/Loader/components.tsx index ea6173363638e3..87e18351efe543 100644 --- a/datahub-web-react/src/alchemy-components/components/Loader/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/Loader/components.tsx @@ -3,8 +3,6 @@ import styled from 'styled-components'; import { AlignItemsOptions, JustifyContentOptions } from '@components/components/Loader/types'; -import { colors } from '@src/alchemy-components/theme'; - export const LoaderWrapper = styled.div<{ $marginTop?: number; $justifyContent: JustifyContentOptions; @@ -27,13 +25,13 @@ export const StyledLoadingOutlined = styled(LoadingOutlined)<{ $height: number } position: absolute; svg { - fill: ${({ theme }) => theme.styles['primary-color']}; + fill: ${({ theme }) => theme.colors.iconBrand}; } `; export const LoaderBackRing = styled.span<{ $height: number; $ringWidth: number }>` width: ${(props) => props.$height}px; height: ${(props) => props.$height}px; - border: ${(props) => props.$ringWidth}px solid ${colors.gray[100]}; + border: ${(props) => props.$ringWidth}px solid ${({ theme }) => theme.colors.border}; border-radius: 50%; `; diff --git a/datahub-web-react/src/alchemy-components/components/Menu/components/GroupItemRenderer.tsx b/datahub-web-react/src/alchemy-components/components/Menu/components/GroupItemRenderer.tsx index 198d4e800a5fc6..50c302c70eec25 100644 --- a/datahub-web-react/src/alchemy-components/components/Menu/components/GroupItemRenderer.tsx +++ b/datahub-web-react/src/alchemy-components/components/Menu/components/GroupItemRenderer.tsx @@ -5,7 +5,7 @@ import { GroupItemRendererProps } from '@components/components/Menu/types'; export default function GroupItemRenderer({ item }: GroupItemRendererProps) { return ( - + {item.title} ); diff --git a/datahub-web-react/src/alchemy-components/components/Menu/components/MenuItemRenderer.tsx b/datahub-web-react/src/alchemy-components/components/Menu/components/MenuItemRenderer.tsx index d0747692ea5a15..b170b17ddd013d 100644 --- a/datahub-web-react/src/alchemy-components/components/Menu/components/MenuItemRenderer.tsx +++ b/datahub-web-react/src/alchemy-components/components/Menu/components/MenuItemRenderer.tsx @@ -3,7 +3,6 @@ import React, { useMemo } from 'react'; import styled from 'styled-components'; import { MenuItemRendererProps } from '@components/components/Menu/types'; -import { FontColorLevelOptions, FontColorOptions } from '@components/theme/config'; import spacing from '@components/theme/foundations/spacing'; const Wrapper = styled.div` @@ -30,44 +29,31 @@ const SpaceFiller = styled.div` `; interface Colors { - titleColor: FontColorOptions; - titleColorLevel: FontColorLevelOptions; - descriptionColor: FontColorOptions; - descriptionColorLevel: FontColorLevelOptions; - iconColor: FontColorOptions; - iconColorLevel: FontColorLevelOptions; + titleColor?: string; + descriptionColor: string; + iconColor?: string; } const DEFAULT_COLORS: Colors = { - titleColor: 'gray', - titleColorLevel: 600, - descriptionColor: 'gray', - descriptionColorLevel: 1700, - iconColor: 'gray', - iconColorLevel: 1800, + descriptionColor: 'textSecondary', }; const DISABLED_COLORS: Colors = { - ...DEFAULT_COLORS, - titleColorLevel: 300, - descriptionColorLevel: 300, - iconColorLevel: 300, + titleColor: 'textDisabled', + descriptionColor: 'textDisabled', + iconColor: 'iconDisabled', }; const DANGER_COLORS: Colors = { - titleColor: 'red', - titleColorLevel: 1000, - descriptionColor: 'red', - descriptionColorLevel: 600, - iconColor: 'red', - iconColorLevel: 600, + titleColor: 'textError', + descriptionColor: 'textError', + iconColor: 'iconError', }; const DANGER_DISABLED_COLORS: Colors = { - ...DANGER_COLORS, - titleColorLevel: 300, - descriptionColorLevel: 300, - iconColorLevel: 300, + titleColor: 'textDisabled', + descriptionColor: 'textDisabled', + iconColor: 'iconDisabled', }; export default function MenuItemRenderer({ item }: MenuItemRendererProps) { @@ -83,22 +69,16 @@ export default function MenuItemRenderer({ item }: MenuItemRendererProps) { {item.icon && ( - + )} - + {item.title} {item.description && ( - + {item.description} )} @@ -106,7 +86,7 @@ export default function MenuItemRenderer({ item }: MenuItemRendererProps) { - {item.children && } + {item.children && } ); diff --git a/datahub-web-react/src/alchemy-components/components/Modal/Modal.tsx b/datahub-web-react/src/alchemy-components/components/Modal/Modal.tsx index 80814b0c639f21..46cc82c4418542 100644 --- a/datahub-web-react/src/alchemy-components/components/Modal/Modal.tsx +++ b/datahub-web-react/src/alchemy-components/components/Modal/Modal.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonProps, Heading, Icon, Text, typography } from '@components'; +import { Button, ButtonProps, Icon, Text, typography } from '@components'; import { Modal as AntModal, ModalProps as AntModalProps } from 'antd'; import React from 'react'; import styled from 'styled-components'; @@ -9,7 +9,7 @@ const StyledModal = styled(AntModal)<{ hasChildren: boolean }>` font-family: ${typography.fonts.body}; &&& .ant-modal-content { - box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12); + box-shadow: ${(props) => props.theme.colors.shadowMd}; border-radius: 12px; } @@ -17,7 +17,7 @@ const StyledModal = styled(AntModal)<{ hasChildren: boolean }>` //margin-bottom: 24px; padding: 12px 20px; border-radius: ${({ hasChildren }) => (hasChildren ? '12px 12px 0 0' : '12px')}; - border-bottom: ${({ hasChildren }) => (hasChildren ? `1px solid #F0F0F0` : '0')}; + border-bottom: ${(props) => (props.hasChildren ? `1px solid ${props.theme.colors.border}` : '0')}; } .ant-modal-body { @@ -39,6 +39,20 @@ const StyledModal = styled(AntModal)<{ hasChildren: boolean }>` } `; +const ModalTitle = styled.h1` + font-size: 20px; + font-weight: 700; + line-height: 1.3; + margin: 0; + color: ${(props) => props.theme.colors.text}; +`; + +const ModalSubtitle = styled.span` + font-size: 14px; + font-weight: 500; + color: ${(props) => props.theme.colors.textSecondary}; +`; + const ModalHeader = styled.div<{ hasChildren: boolean }>` display: flex; flex-direction: column; @@ -95,23 +109,19 @@ export function Modal({ centered closable={closable} onCancel={onCancel} - closeIcon={closable ? : null} + closeIcon={ + closable ? : null + } hasChildren={!!children} data-testid={dataTestId} title={ typeof title === 'string' ? ( - - {title} - + {title} {titlePill} - {!!subtitle && ( - - {subtitle} - - )} + {!!subtitle && {subtitle}} ) : (
{title}
diff --git a/datahub-web-react/src/alchemy-components/components/Notification/components/NotificationGlobalStyle.tsx b/datahub-web-react/src/alchemy-components/components/Notification/components/NotificationGlobalStyle.tsx index 8926f12cc6191e..e6ec89183736b3 100644 --- a/datahub-web-react/src/alchemy-components/components/Notification/components/NotificationGlobalStyle.tsx +++ b/datahub-web-react/src/alchemy-components/components/Notification/components/NotificationGlobalStyle.tsx @@ -1,7 +1,5 @@ import { createGlobalStyle } from 'styled-components'; -import { colors } from '@components/theme'; - export const NotificationGlobalStyle = createGlobalStyle` .ant-notification { z-index: 1013; // one above antd modal (which is 1012) @@ -23,6 +21,6 @@ export const NotificationGlobalStyle = createGlobalStyle` // Error styles .datahub-notification.ant-notification-notice-error { - background-color: ${colors.red[0]}; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; } `; diff --git a/datahub-web-react/src/alchemy-components/components/PageTitle/components.ts b/datahub-web-react/src/alchemy-components/components/PageTitle/components.ts index c0185f633b3685..8bc40d5d6735e3 100644 --- a/datahub-web-react/src/alchemy-components/components/PageTitle/components.ts +++ b/datahub-web-react/src/alchemy-components/components/PageTitle/components.ts @@ -1,37 +1,23 @@ import styled from 'styled-components'; import { getHeaderSubtitleStyles, getHeaderTitleStyles } from '@components/components/PageTitle/utils'; -import { colors, typography } from '@components/theme'; +import { typography } from '@components/theme'; -// Text Styles const titleStyles = { display: 'flex', alignItems: 'center', gap: 8, fontWeight: typography.fontWeights.bold, - color: colors.gray[600], }; const subTitleStyles = { fontWeight: typography.fontWeights.normal, - color: colors.gray[1700], }; -// Default styles const baseStyles = { fontFamily: typography.fonts.body, margin: 0, maxWidth: '100%', - - '& a': { - color: colors.violet[400], - textDecoration: 'none', - transition: 'color 0.15s ease', - - '&:hover': { - color: colors.violet[500], - }, - }, }; export const Container = styled.div` @@ -41,14 +27,32 @@ export const Container = styled.div` justify-content: start; `; -export const Title = styled.div<{ variant: string }>(({ variant }) => ({ +export const Title = styled.div<{ variant: string }>(({ variant, theme }) => ({ ...baseStyles, ...titleStyles, + color: theme.colors.text, ...getHeaderTitleStyles(variant), + '& a': { + color: theme.colors.hyperlinks, + textDecoration: 'none', + transition: 'color 0.15s ease', + '&:hover': { + color: theme.colors.textBrand, + }, + }, })); -export const SubTitle = styled.div<{ variant: string }>(({ variant }) => ({ +export const SubTitle = styled.div<{ variant: string }>(({ variant, theme }) => ({ ...baseStyles, ...subTitleStyles, + color: theme.colors.textSecondary, ...getHeaderSubtitleStyles(variant), + '& a': { + color: theme.colors.hyperlinks, + textDecoration: 'none', + transition: 'color 0.15s ease', + '&:hover': { + color: theme.colors.textBrand, + }, + }, })); diff --git a/datahub-web-react/src/alchemy-components/components/Pagination/components.ts b/datahub-web-react/src/alchemy-components/components/Pagination/components.ts index 6187a6247541ff..41f102a4b70b58 100644 --- a/datahub-web-react/src/alchemy-components/components/Pagination/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Pagination/components.ts @@ -1,12 +1,12 @@ import styled from 'styled-components'; -import { colors, spacing } from '@src/alchemy-components/theme'; +import { spacing } from '@src/alchemy-components/theme'; export const PaginationContainer = styled.div` display: flex; justify-content: center; margin: ${spacing.md}; - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; .ant-pagination { display: flex; @@ -24,7 +24,7 @@ export const PaginationContainer = styled.div` a { border-radius: 200px; - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; :hover { color: ${({ theme }) => theme.styles?.['primary-color']}; @@ -33,7 +33,7 @@ export const PaginationContainer = styled.div` } .ant-pagination-item-active > a { - background: ${colors.violet[0]}; + background: ${(props) => props.theme.colors.bgSurfaceBrand}; color: ${({ theme }) => theme.styles?.['primary-color']}; font-weight: 700; } @@ -45,27 +45,27 @@ export const PaginationContainer = styled.div` } button { - color: ${colors.gray[1800]}; - border: 1px solid ${colors.gray[100]}; + color: ${(props) => props.theme.colors.textTertiary}; + border: 1px solid ${(props) => props.theme.colors.border}; } .ant-pagination-options { span, .ant-select-item { - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; } } .ant-pagination-options-size-changer { .ant-select-selector { - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${(props) => props.theme.colors.border}; } &:hover:not(.ant-select-disabled), &.ant-select-focused:not(.ant-select-disabled) { .ant-select-selector { - border: 1px solid ${colors.gray[100]}; - box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07); + border: 1px solid ${(props) => props.theme.colors.border}; + box-shadow: ${(props) => props.theme.colors.shadowXs}; :hover { color: ${({ theme }) => theme.styles?.['primary-color']}; @@ -77,7 +77,7 @@ export const PaginationContainer = styled.div` .ant-pagination-next, .ant-pagination-prev { :hover { - box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07); + box-shadow: ${(props) => props.theme.colors.shadowXs}; button { color: ${({ theme }) => theme.styles?.['primary-color']}; @@ -88,7 +88,7 @@ export const PaginationContainer = styled.div` .ant-pagination-disabled:hover { box-shadow: none; button { - color: rgba(0, 0, 0, 0.25); + color: ${(props) => props.theme.colors.textDisabled}; } } diff --git a/datahub-web-react/src/alchemy-components/components/Pills/utils.ts b/datahub-web-react/src/alchemy-components/components/Pills/utils.ts index 46e30d0cd881cb..2d8500ea5a3876 100644 --- a/datahub-web-react/src/alchemy-components/components/Pills/utils.ts +++ b/datahub-web-react/src/alchemy-components/components/Pills/utils.ts @@ -14,16 +14,77 @@ interface ColorStyles { hoverColor?: string; } +function getSemanticPillColors(color: ColorOptions, themeColors: Record): ColorStyles | null { + const map: Partial> = { + green: { + primaryColor: themeColors.textOnSurfaceSuccess || themeColors.textSuccess, + bgColor: themeColors.bgSurfaceSuccess, + hoverColor: themeColors.bgSurfaceSuccessHover, + borderColor: themeColors.borderSuccess, + }, + red: { + primaryColor: themeColors.textOnSurfaceError || themeColors.textError, + bgColor: themeColors.bgSurfaceError, + hoverColor: themeColors.bgSurfaceErrorHover, + borderColor: themeColors.borderError, + }, + blue: { + primaryColor: themeColors.textOnSurfaceInformation || themeColors.textInformation, + bgColor: themeColors.bgSurfaceInfo, + hoverColor: themeColors.bgSurfaceInformationHover, + borderColor: themeColors.borderInformation, + }, + yellow: { + primaryColor: themeColors.textOnSurfaceWarning || themeColors.textWarning, + bgColor: themeColors.bgSurfaceWarning, + hoverColor: themeColors.bgSurfaceWarningHover, + borderColor: themeColors.borderWarning, + }, + violet: { + primaryColor: themeColors.textBrand, + bgColor: themeColors.bgSurfaceBrand, + hoverColor: themeColors.bgSurfaceBrandHover, + borderColor: themeColors.borderBrand, + }, + primary: { + primaryColor: themeColors.textBrand, + bgColor: themeColors.bgSurfaceBrand, + hoverColor: themeColors.bgSurfaceBrandHover, + borderColor: themeColors.borderBrand, + }, + gray: { + primaryColor: themeColors.textSecondary, + bgColor: themeColors.bgSurface, + hoverColor: themeColors.bgHover, + borderColor: themeColors.border, + }, + white: { + primaryColor: themeColors.textSecondary, + bgColor: themeColors.bgSurface, + hoverColor: themeColors.bgHover, + borderColor: themeColors.border, + }, + }; + return map[color] ?? null; +} + // Utility function to get color styles for pill - does not generate CSS function getPillColorStyles(variant: PillVariantOptions, color: ColorOptions, theme?: Theme): ColorStyles { - if (variant === 'version') { + const themeColors = theme?.colors as Record | undefined; + + if (variant === 'version' && themeColors) { return { - bgColor: getColor('gray', color === 'white' ? 1500 : 100, theme), - borderColor: getColor('gray', 100, theme), - primaryColor: getColor('gray', 1700, theme), + bgColor: themeColors.bgSurface, + borderColor: themeColors.border, + primaryColor: themeColors.textSecondary, }; } + if (themeColors) { + const semantic = getSemanticPillColors(color, themeColors); + if (semantic) return semantic; + } + return { primaryColor: getColor(color, 700, theme), bgColor: color === 'gray' ? getColor(color, 100, theme) : getColor(color, 0, theme), diff --git a/datahub-web-react/src/alchemy-components/components/Radio/components.ts b/datahub-web-react/src/alchemy-components/components/Radio/components.ts index bfe0a109666b0c..abf59af92053a8 100644 --- a/datahub-web-react/src/alchemy-components/components/Radio/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Radio/components.ts @@ -2,15 +2,15 @@ import styled from 'styled-components'; import { getRadioBorderColor, getRadioCheckmarkColor } from '@components/components/Radio/utils'; import { formLabelTextStyles } from '@components/components/commonStyles'; -import { borders, colors, radius, spacing } from '@components/theme'; +import { borders, radius, spacing } from '@components/theme'; export const RadioWrapper = styled.div<{ disabled: boolean; error: string }>(({ disabled, error, theme }) => ({ position: 'relative', margin: '20px', width: '20px', height: '20px', - border: `${borders['2px']} ${getRadioBorderColor(disabled, error)}`, - backgroundColor: colors.white, + border: `${borders['2px']} ${getRadioBorderColor(disabled, error, theme.colors)}`, + backgroundColor: theme.colors.bg, borderRadius: radius.full, display: 'flex', justifyContent: 'flex-start', @@ -19,19 +19,20 @@ export const RadioWrapper = styled.div<{ disabled: boolean; error: string }>(({ cursor: !disabled ? 'pointer' : 'none', transition: 'border 0.3s ease, outline 0.3s ease', '&:hover': { - border: `${borders['2px']} ${!disabled && !error ? theme.styles['primary-color'] : getRadioBorderColor(disabled, error)}`, - outline: !disabled && !error ? `${borders['2px']} ${colors.gray[200]}` : 'none', + border: `${borders['2px']} ${!disabled && !error ? theme.colors.borderBrand : getRadioBorderColor(disabled, error, theme.colors)}`, + outline: !disabled && !error ? `${borders['2px']} ${theme.colors.border}` : 'none', }, })); export const RadioBase = styled.div({}); -export const Label = styled.div({ +export const Label = styled.div(({ theme }) => ({ ...formLabelTextStyles, + color: theme.colors.text, display: 'flex', justifyContent: 'center', alignItems: 'center', -}); +})); export const RadioLabel = styled.div({ display: 'flex', @@ -39,27 +40,27 @@ export const RadioLabel = styled.div({ alignItems: 'center', }); -export const Required = styled.span({ - color: colors.red[500], +export const Required = styled.span(({ theme }) => ({ + color: theme.colors.textError, marginLeft: spacing.xxsm, -}); +})); -export const RadioHoverState = styled.div({ - border: `${borders['2px']} ${(props) => props.theme.styles['primary-color']}`, +export const RadioHoverState = styled.div(({ theme }) => ({ + border: `${borders['2px']} ${theme.colors.borderBrand}`, width: 'calc(100% - -3px)', height: 'calc(100% - -3px)', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: radius.full, -}); +})); export const Checkmark = styled.div<{ checked: boolean; disabled: boolean; error: string }>( - ({ checked, disabled, error }) => ({ + ({ checked, disabled, error, theme }) => ({ width: 'calc(100% - 6px)', height: 'calc(100% - 6px)', borderRadius: radius.full, - background: getRadioCheckmarkColor(checked, disabled, error), + background: getRadioCheckmarkColor(checked, disabled, error, theme.colors), display: checked ? 'inline-block' : 'none', position: 'absolute', top: '50%', diff --git a/datahub-web-react/src/alchemy-components/components/Radio/utils.ts b/datahub-web-react/src/alchemy-components/components/Radio/utils.ts index ed9dcc35d303b4..fdc22531778657 100644 --- a/datahub-web-react/src/alchemy-components/components/Radio/utils.ts +++ b/datahub-web-react/src/alchemy-components/components/Radio/utils.ts @@ -1,27 +1,26 @@ -import { colors } from '@components/theme'; - -const radioBorderColors = { - default: colors.gray[400], - disabled: colors.gray[300], - error: colors.red[500], -}; - -const radioCheckmarkColors = { - default: colors.white, - disabled: colors.gray[300], - checked: colors.violet[500], - error: colors.red[500], -}; - -export function getRadioBorderColor(disabled: boolean, error: string) { - if (disabled) return radioBorderColors.disabled; - if (error) return radioCheckmarkColors.error; - return radioBorderColors.default; +export function getRadioBorderColor( + disabled: boolean, + error: string, + themeColors: { radioButtonBorder: string; borderDisabled: string; textError: string }, +) { + if (disabled) return themeColors.borderDisabled; + if (error) return themeColors.textError; + return themeColors.radioButtonBorder; } -export function getRadioCheckmarkColor(checked: boolean, disabled: boolean, error: string) { - if (disabled) return radioCheckmarkColors.disabled; - if (error) return radioCheckmarkColors.error; - if (checked) return radioCheckmarkColors.checked; - return radioCheckmarkColors.default; +export function getRadioCheckmarkColor( + checked: boolean, + disabled: boolean, + error: string, + themeColors: { + radioButtonDotFill: string; + radioButtonDotDisabled: string; + iconBrand: string; + textError: string; + }, +) { + if (disabled) return themeColors.radioButtonDotDisabled; + if (error) return themeColors.textError; + if (checked) return themeColors.iconBrand; + return themeColors.radioButtonDotFill; } diff --git a/datahub-web-react/src/alchemy-components/components/SearchBar/components.ts b/datahub-web-react/src/alchemy-components/components/SearchBar/components.ts index 6e580c040d9db8..405ca34c9174e0 100644 --- a/datahub-web-react/src/alchemy-components/components/SearchBar/components.ts +++ b/datahub-web-react/src/alchemy-components/components/SearchBar/components.ts @@ -1,9 +1,7 @@ import { Input } from 'antd'; import styled from 'styled-components'; -import { getColor } from '@components/theme/utils'; - -import { colors, typography } from '@src/alchemy-components/theme'; +import { typography } from '@src/alchemy-components/theme'; export const StyledSearchBar = styled(Input)<{ $width?: string; $height?: string }>` height: ${(props) => props.$height}; @@ -11,39 +9,41 @@ export const StyledSearchBar = styled(Input)<{ $width?: string; $height?: string display: flex; align-items: center; border-radius: 8px; - border: 1px solid ${colors.gray[100]}; - box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07); + border: 1px solid ${(props) => props.theme.colors.border}; + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => props.theme.colors.shadowXs}; transition: all 0.1s ease; &.ant-input-affix-wrapper { - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${(props) => props.theme.colors.border}; + background-color: ${(props) => props.theme.colors.bg}; &:not(.ant-input-affix-wrapper-disabled) { &:hover { - border-color: ${colors.gray[100]}; + border-color: ${(props) => props.theme.colors.border}; } } &:focus, &-focused { - border-color: ${(props) => props.theme.styles['primary-color']}; - box-shadow: 0px 0px 0px 2px ${colors.violet[100]}; + border-color: ${(props) => props.theme.colors.borderBrand}; + box-shadow: 0px 0px 0px 2px ${(props) => props.theme.colors.borderBrandFocused}; } } input { - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; font-size: ${typography.fontSizes.md} !important; background-color: transparent; &::placeholder { - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.textPlaceholder}; } } .ant-input-prefix { width: 20px; - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.icon}; margin-right: 4px; svg { @@ -55,12 +55,12 @@ export const StyledSearchBar = styled(Input)<{ $width?: string; $height?: string &:hover, &:focus, &:focus-within { - border-color: ${({ theme }) => getColor('primary', 300, theme)} !important; + border-color: ${({ theme }) => theme.colors.borderBrandFocused} !important; box-shadow: none !important; } &.ant-input-affix-wrapper-focused { - border-color: ${(props) => props.theme.styles['primary-color']}; - box-shadow: 0px 0px 0px 2px ${colors.violet[100]}; + border-color: ${(props) => props.theme.colors.borderBrand}; + box-shadow: 0px 0px 0px 2px ${(props) => props.theme.colors.borderBrandFocused}; } `; diff --git a/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx b/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx index 410d99c0a11ce4..9550d8d22490a7 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx +++ b/datahub-web-react/src/alchemy-components/components/Select/AutoCompleteSelect.tsx @@ -154,7 +154,7 @@ export default function AutoCompleteSelect({ {!displayedSuggestions.length && ( - + No results found diff --git a/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx b/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx index 5607e5e7d22d64..88330dfab304fb 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx +++ b/datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx @@ -1,6 +1,7 @@ -import { Dropdown, Text, colors } from '@components'; +import { Dropdown, Text } from '@components'; import { isEqual } from 'lodash'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useTheme } from 'styled-components'; import { ActionButtonsContainer, @@ -71,6 +72,7 @@ export const BasicSelect = ({ visibilityDeps, ...props }: SelectProps) => { + const styledTheme = useTheme(); const [searchQuery, setSearchQuery] = useState(''); const selectRef = useRef(null); const dropdownRef = useRef(null); @@ -223,7 +225,11 @@ export const BasicSelect = ({ {option.label} {!!option.description && [
, - + {option.description} , ]} @@ -241,7 +247,9 @@ export const BasicSelect = ({ {option.icon} ({ {!!option.description && ( ` .ant-checkbox-inner { - border: 1px solid ${colors.gray[300]} !important; + border: 1px solid ${({ theme }) => theme.colors.border} !important; border-radius: 3px; } margin-left: auto; @@ -30,8 +29,8 @@ const StyledCheckbox = styled(Checkbox)<{ checked: boolean; indeterminate?: bool !props.indeterminate && ` .ant-checkbox-inner { - background-color: ${theme.semanticTokens.colors.primary}; - border-color: ${theme.semanticTokens.colors.primary} !important; + background-color: ${props.theme.colors.buttonFillBrand}; + border-color: ${props.theme.colors.borderBrand} !important; } `} ${(props) => @@ -39,7 +38,7 @@ const StyledCheckbox = styled(Checkbox)<{ checked: boolean; indeterminate?: bool ` .ant-checkbox-inner { &:after { - background-color: ${theme.semanticTokens.colors.primary}; + background-color: ${props.theme.colors.buttonFillBrand}; } } `} @@ -47,7 +46,7 @@ const StyledCheckbox = styled(Checkbox)<{ checked: boolean; indeterminate?: bool props.disabled && ` .ant-checkbox-inner { - background-color: ${colors.gray[200]} !important; + background-color: ${props.theme.colors.border} !important; } `} `; @@ -173,7 +172,6 @@ export const NestedOption = ({ icon="ChevronLeft" rotate={isOpen ? '90' : '270'} size="xl" - color="gray" style={{ cursor: 'pointer', marginLeft: '4px' }} /> )} diff --git a/datahub-web-react/src/alchemy-components/components/Select/components.ts b/datahub-web-react/src/alchemy-components/components/Select/components.ts index 4ec0b1a5dbc28e..60ef353a812874 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Select/components.ts @@ -15,7 +15,7 @@ import { inputPlaceholderTextStyles, inputValueTextStyles, } from '@components/components/commonStyles'; -import { colors, radius, shadows, spacing, transition, typography, zIndices } from '@components/theme'; +import { radius, shadows, spacing, transition, typography, zIndices } from '@components/theme'; const sharedTransition = `${transition.property.colors} ${transition.easing['ease-in-out']} ${transition.duration.normal}`; @@ -23,8 +23,8 @@ const sharedTransition = `${transition.property.colors} ${transition.easing['eas * Base Select component styling */ export const SelectBase = styled.div( - ({ isDisabled, isReadOnly, fontSize, isOpen, width, position }) => ({ - ...getSelectStyle({ isDisabled, isReadOnly, fontSize, isOpen }), + ({ isDisabled, isReadOnly, fontSize, isOpen, width, position, theme }) => ({ + ...getSelectStyle({ isDisabled, isReadOnly, fontSize, isOpen }, theme.colors), display: 'flex', flexDirection: 'row' as const, gap: spacing.xsm, @@ -35,7 +35,7 @@ export const SelectBase = styled.div( alignItems: 'center', overflow: 'auto', textWrapMode: 'nowrap', - backgroundColor: isDisabled ? colors.gray[1500] : colors.white, + backgroundColor: isDisabled ? theme.colors.bgInputDisabled : theme.colors.bg, width: width === 'full' ? '100%' : 'max-content', }), ); @@ -62,44 +62,47 @@ interface ContainerProps { isSelected?: boolean; } -export const Container = styled.div(({ size, width, $minWidth, $selectLabelVariant, isSelected }) => { - const getMinWidth = () => { - if ($minWidth) return $minWidth; - if (width === 'fit-content') return 'undefined'; - if ($selectLabelVariant === 'labeled') { - return isSelected ? '145px' : '103px'; - } - return '175px'; - }; - - const getWitdh = () => { - switch (width) { - case 'full': - return '100%'; - case 'fit-content': - return 'fit-content'; - default: - return `${width}px`; - } - }; - - return { - position: 'relative', - display: 'flex', - flexDirection: 'column', - width: getWitdh(), - gap: '4px', - transition: sharedTransition, - minWidth: getMinWidth(), - ...getSelectFontStyles(size), - ...inputValueTextStyles(size), - }; -}); +export const Container = styled.div( + ({ size, width, $minWidth, $selectLabelVariant, isSelected, theme }) => { + const getMinWidth = () => { + if ($minWidth) return $minWidth; + if (width === 'fit-content') return 'undefined'; + if ($selectLabelVariant === 'labeled') { + return isSelected ? '145px' : '103px'; + } + return '175px'; + }; + + const getWitdh = () => { + switch (width) { + case 'full': + return '100%'; + case 'fit-content': + return 'fit-content'; + default: + return `${width}px`; + } + }; + + return { + position: 'relative', + display: 'flex', + flexDirection: 'column', + width: getWitdh(), + gap: '4px', + transition: sharedTransition, + minWidth: getMinWidth(), + ...getSelectFontStyles(size), + ...inputValueTextStyles(size), + color: theme.colors.text, + }; + }, +); -export const DropdownContainer = styled.div<{ ignoreMaxHeight?: boolean }>(({ ignoreMaxHeight }) => ({ +export const DropdownContainer = styled.div<{ ignoreMaxHeight?: boolean }>(({ ignoreMaxHeight, theme }) => ({ ...getDropdownStyle(), borderRadius: radius.md, - background: colors.white, + background: theme.colors.bg, zIndex: zIndices.dropdown, transition: sharedTransition, boxShadow: shadows.dropdown, @@ -114,15 +117,15 @@ export const DropdownContainer = styled.div<{ ignoreMaxHeight?: boolean }>(({ ig })); // Styled components for SelectValue (Selected value display) -export const SelectValue = styled.span({ +export const SelectValue = styled.span(({ theme }) => ({ ...inputValueTextStyles(), - color: colors.gray[600], -}); + color: theme.colors.text, +})); -export const Placeholder = styled.span({ +export const Placeholder = styled.span(({ theme }) => ({ ...inputPlaceholderTextStyles, - color: colors.gray[1800], -}); + color: theme.colors.textPlaceholder, +})); export const ActionButtonsContainer = styled.div({ display: 'flex', @@ -154,16 +157,16 @@ export const OptionContainer = styled.div({ flexDirection: 'column', }); -export const DescriptionContainer = styled.span({ +export const DescriptionContainer = styled.span(({ theme }) => ({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', - color: colors.gray[500], + color: theme.colors.textSecondary, lineHeight: 'normal', fontSize: typography.fontSizes.sm, marginTop: spacing.xxsm, -}); +})); export const LabelsWrapper = styled.div<{ shouldShowGap?: boolean }>(({ shouldShowGap = false }) => ({ display: 'flex', @@ -178,73 +181,74 @@ export const OptionLabel = styled.label<{ isMultiSelect?: boolean; isDisabled?: boolean; applyHoverWidth?: boolean; -}>(({ isSelected, isMultiSelect, isDisabled, applyHoverWidth }) => ({ - ...getOptionLabelStyle(isSelected, isMultiSelect, isDisabled, applyHoverWidth), +}>(({ isSelected, isMultiSelect, isDisabled, applyHoverWidth, theme }) => ({ + ...getOptionLabelStyle(isSelected, isMultiSelect, isDisabled, applyHoverWidth, theme.colors), })); -export const SelectLabel = styled.label({ +export const SelectLabel = styled.label(({ theme }) => ({ ...formLabelTextStyles, + color: theme.colors.text, marginBottom: spacing.xxsm, - textAlign: 'left', -}); + textAlign: 'left' as const, +})); -export const StyledIcon = styled(Icon)({ +export const StyledIcon = styled(Icon)(({ theme }) => ({ flexShrink: 0, - color: colors.gray[1800], -}); + color: theme.colors.icon, +})); export const StyledClearButton = styled(Button).attrs({ variant: 'text', -})({ - color: colors.gray[1800], +})(({ theme }) => ({ + color: theme.colors.icon, padding: '0px', '&:hover': { border: 'none', - backgroundColor: colors.transparent, - borderColor: colors.transparent, + backgroundColor: 'transparent', + borderColor: 'transparent', boxShadow: shadows.none, }, '&:focus': { border: 'none', - backgroundColor: colors.transparent, - boxShadow: `0 0 0 2px ${colors.white}, 0 0 0 4px ${colors.violet[50]}`, + backgroundColor: 'transparent', + boxShadow: `0 0 0 2px ${theme.colors.bg}, 0 0 0 4px ${theme.colors.borderBrandFocused}`, }, -}); +})); export const ClearIcon = styled.span({ cursor: 'pointer', marginLeft: '8px', }); -export const ArrowIcon = styled.span<{ isOpen: boolean }>(({ isOpen }) => ({ +export const ArrowIcon = styled.span<{ isOpen: boolean }>(({ isOpen, theme }) => ({ marginLeft: 'auto', - border: 'solid black', + border: `solid ${theme.colors.border}`, borderWidth: '0 1px 1px 0', display: 'inline-block', padding: '3px', transform: isOpen ? 'rotate(-135deg)' : 'rotate(45deg)', })); -export const StyledCheckbox = styled(Checkbox)({ +export const StyledCheckbox = styled(Checkbox)(({ theme }) => ({ '.ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner': { - backgroundColor: `${(props) => props.theme.styles['primary-color']}`, - borderColor: `${(props) => props.theme.styles['primary-color']} !important`, + backgroundColor: theme.colors.buttonFillBrand, + borderColor: `${theme.colors.borderBrand} !important`, }, -}); +})); -export const StyledBubbleButton = styled(Button)({ - backgroundColor: colors.gray[200], - border: `1px solid ${colors.gray[200]}`, - color: colors.black, +export const StyledBubbleButton = styled(Button)(({ theme }) => ({ + backgroundColor: theme.colors.bgHover, + border: `1px solid ${theme.colors.border}`, + color: theme.colors.text, padding: '1px', -}); +})); export const HighlightedLabel = styled.span` - background-color: ${colors.gray[100]}; + background-color: ${(props) => props.theme.colors.bgHover}; padding: 4px 6px; border-radius: 8px; font-size: ${typography.fontSizes.sm}; - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; `; diff --git a/datahub-web-react/src/alchemy-components/components/Select/private/DropdownFooterActions.tsx b/datahub-web-react/src/alchemy-components/components/Select/private/DropdownFooterActions.tsx index 88f1e95ffd9e95..05c5ac3dc1ec4c 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/private/DropdownFooterActions.tsx +++ b/datahub-web-react/src/alchemy-components/components/Select/private/DropdownFooterActions.tsx @@ -4,15 +4,15 @@ import styled from 'styled-components'; import { SelectSizeOptions } from '@components/components/Select/types'; -import { colors, spacing } from '@src/alchemy-components/theme'; +import { spacing } from '@src/alchemy-components/theme'; -const FooterBase = styled.div({ +const FooterBase = styled.div(({ theme }) => ({ display: 'flex', justifyContent: 'flex-end', gap: spacing.sm, paddingTop: spacing.sm, - borderTop: `1px solid ${colors.gray[100]}`, -}); + borderTop: `1px solid ${theme.colors.border}`, +})); interface Props { onCancel?: () => void; diff --git a/datahub-web-react/src/alchemy-components/components/Select/private/DropdownSelectAllOption.tsx b/datahub-web-react/src/alchemy-components/components/Select/private/DropdownSelectAllOption.tsx index 39449e37f7cf50..ea633f4f9e495f 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/private/DropdownSelectAllOption.tsx +++ b/datahub-web-react/src/alchemy-components/components/Select/private/DropdownSelectAllOption.tsx @@ -2,17 +2,19 @@ import React from 'react'; import styled from 'styled-components'; import { LabelContainer, StyledCheckbox } from '@components/components/Select/components'; -import { colors, spacing, typography } from '@components/theme'; +import { spacing, typography } from '@components/theme'; -const SelectAllOption = styled.div<{ isSelected: boolean; isDisabled?: boolean }>(({ isSelected, isDisabled }) => ({ - cursor: isDisabled ? 'not-allowed' : 'pointer', - padding: spacing.xsm, - color: isSelected ? colors.violet[700] : colors.gray[500], - fontWeight: typography.fontWeights.semiBold, - fontSize: typography.fontSizes.md, - display: 'flex', - alignItems: 'center', -})); +const SelectAllOption = styled.div<{ isSelected: boolean; isDisabled?: boolean }>( + ({ isSelected, isDisabled, theme }) => ({ + cursor: isDisabled ? 'not-allowed' : 'pointer', + padding: spacing.xsm, + color: isSelected ? theme.colors.buttonFillBrand : theme.colors.textSecondary, + fontWeight: typography.fontWeights.semiBold, + fontSize: typography.fontSizes.md, + display: 'flex', + alignItems: 'center', + }), +); interface Props { label?: string; diff --git a/datahub-web-react/src/alchemy-components/components/Select/private/SelectActionButtons.tsx b/datahub-web-react/src/alchemy-components/components/Select/private/SelectActionButtons.tsx index 468cdbc28da671..a59c0c8942d99e 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/private/SelectActionButtons.tsx +++ b/datahub-web-react/src/alchemy-components/components/Select/private/SelectActionButtons.tsx @@ -5,27 +5,27 @@ import { Button } from '@components/components/Button'; import { ActionButtonsContainer, StyledIcon } from '@components/components/Select/components'; import { ActionButtonsProps } from '@components/components/Select/types'; -import { colors, shadows } from '@src/alchemy-components/theme'; +import { shadows } from '@src/alchemy-components/theme'; export const StyledClearButton = styled(Button).attrs({ variant: 'text', -})({ - color: colors.gray[1800], +})(({ theme }) => ({ + color: theme.colors.icon, padding: '0px', '&:hover': { border: 'none', - backgroundColor: colors.transparent, - borderColor: colors.transparent, + backgroundColor: 'transparent', + borderColor: 'transparent', boxShadow: shadows.none, }, '&:focus': { border: 'none', - backgroundColor: colors.transparent, - boxShadow: `0 0 0 2px ${colors.white}, 0 0 0 4px ${colors.violet[50]}`, + backgroundColor: 'transparent', + boxShadow: `0 0 0 2px ${theme.colors.bg}, 0 0 0 4px ${theme.colors.borderBrandFocused}`, }, -}); +})); export default function SelectActionButtons({ hasSelectedValues, @@ -55,7 +55,7 @@ export default function SelectActionButtons({ data-testid="button-clear" /> )} - + ); } diff --git a/datahub-web-react/src/alchemy-components/components/Select/utils.ts b/datahub-web-react/src/alchemy-components/components/Select/utils.ts index 3a6bcd8740539f..33f00a1efaf5ef 100644 --- a/datahub-web-react/src/alchemy-components/components/Select/utils.ts +++ b/datahub-web-react/src/alchemy-components/components/Select/utils.ts @@ -1,5 +1,5 @@ import { SelectStyleProps } from '@components/components/Select/types'; -import { colors, radius, spacing, typography } from '@components/theme'; +import { radius, spacing, typography } from '@components/theme'; import { getFontSize } from '@components/theme/utils'; export const getOptionLabelStyle = ( @@ -7,9 +7,10 @@ export const getOptionLabelStyle = ( isMultiSelect?: boolean, isDisabled?: boolean, applyHoverWidth?: boolean, + themeColors?: { text: string; textSecondary: string; bgSurfaceBrand: string; bgHover: string }, ) => { - const color = isSelected ? colors.gray[600] : colors.gray[500]; - const backgroundColor = !isDisabled && !isMultiSelect && isSelected ? colors.gray[1000] : 'transparent'; + const color = isSelected ? themeColors?.text : themeColors?.textSecondary; + const backgroundColor = !isDisabled && !isMultiSelect && isSelected ? themeColors?.bgSurfaceBrand : 'transparent'; return { cursor: isDisabled ? 'not-allowed' : 'pointer', @@ -24,7 +25,7 @@ export const getOptionLabelStyle = ( alignItems: 'center', width: applyHoverWidth ? '100%' : 'auto', '&:hover': { - backgroundColor: isSelected ? colors.violet[0] : colors.gray[1500], + backgroundColor: isSelected ? themeColors?.bgSurfaceBrand : themeColors?.bgHover, }, }; }; @@ -104,37 +105,49 @@ export const getMinHeight = (size) => { return minHeightStyles[size]; }; -export const getSelectStyle = (props: SelectStyleProps) => { +export const getSelectStyle = ( + props: SelectStyleProps, + themeColors?: { + border: string; + bg: string; + bgInputDisabled: string; + text: string; + textDisabled: string; + textPlaceholder: string; + borderBrandFocused: string; + borderInputFocus: string; + shadowXs: string; + shadowSm: string; + }, +) => { const { isDisabled, isReadOnly, fontSize, isOpen } = props; const baseStyle = { borderRadius: radius.md, - border: `1px solid ${colors.gray[100]}`, + border: `1px solid ${themeColors?.border}`, fontFamily: typography.fonts.body, - backgroundColor: isDisabled ? colors.gray[1500] : colors.white, - color: isDisabled ? colors.gray[300] : colors.gray[600], + backgroundColor: isDisabled ? themeColors?.bgInputDisabled : themeColors?.bg, + color: isDisabled ? themeColors?.textDisabled : themeColors?.text, cursor: isDisabled || isReadOnly ? 'not-allowed' : 'pointer', - boxShadow: '0px 1px 2px 0px rgba(33, 23, 95, 0.07)', + boxShadow: themeColors?.shadowXs, textWrap: 'nowrap', '&::placeholder': { - color: colors.gray[1900], + color: themeColors?.textPlaceholder, }, - // Open Styles ...(isOpen ? { - borderColor: colors.gray[1800], - outline: `1px solid ${colors.violet[200]}`, + borderColor: themeColors?.borderInputFocus, + outline: `1px solid ${themeColors?.borderBrandFocused}`, } : {}), - // Hover Styles ...(isDisabled || isReadOnly || isOpen ? {} : { '&:hover': { - boxShadow: '0px 1px 2px 1px rgba(33, 23, 95, 0.07)', + boxShadow: themeColors?.shadowSm, }, }), }; diff --git a/datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx b/datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx index f7bf954bcf0609..4f315cce713a3a 100644 --- a/datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx +++ b/datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx @@ -10,7 +10,6 @@ import { SelectItemCheckboxGroup } from '@components/components/SelectItemsPopov import { useEntityOperations } from '@components/components/SelectItemsPopover/hooks'; import { InlineListSearch } from '@src/app/entityV2/shared/components/search/InlineListSearch'; -import { REDESIGN_COLORS } from '@src/app/entityV2/shared/constants'; import { useEntityRegistry } from '@src/app/useEntityRegistry'; import { Entity, EntityType } from '@src/types.generated'; @@ -36,7 +35,7 @@ const StyledSubSection = styled(Typography.Text)` justify-content: space-between; font-weight: 700; line-height: 15.06px; - color: #5f6685; + color: ${(props) => props.theme.colors.textSecondary}; `; const StyledFooter = styled.div` @@ -44,7 +43,7 @@ const StyledFooter = styled.div` justify-content: center; gap: 16px; padding: 8px 0 0 0; - border-top: 1px solid ${REDESIGN_COLORS.SILVER_GREY}; + border-top: 1px solid ${(props) => props.theme.colors.border}; `; const StyledSelectContainer = styled.div` @@ -85,7 +84,7 @@ const StyledEmpty = styled(Empty)` .ant-empty-image { display: none; } - color: #8d95b1; + color: ${(props) => props.theme.colors.textTertiary}; margin-bottom 12px; `; diff --git a/datahub-web-react/src/alchemy-components/components/StructuredPopover/TooltipHeader.tsx b/datahub-web-react/src/alchemy-components/components/StructuredPopover/TooltipHeader.tsx index 0e790739157fb5..fa350b86c59b4e 100644 --- a/datahub-web-react/src/alchemy-components/components/StructuredPopover/TooltipHeader.tsx +++ b/datahub-web-react/src/alchemy-components/components/StructuredPopover/TooltipHeader.tsx @@ -3,8 +3,6 @@ import styled from 'styled-components'; import { TooltipHeaderProps } from '@components/components/StructuredPopover/types'; -import colors from '@src/alchemy-components/theme/foundations/colors'; - const Container = styled.div` display: flex; align-items: center; @@ -25,7 +23,7 @@ const PrimaryTitle = styled.div` const Title = styled.div` font-weight: 500; font-size: 14px; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; `; const TitleSuffix = styled.div` @@ -37,7 +35,7 @@ export const SubTitle = styled.div` font-size: 12px; flex-shrink: 1; min-width: 0; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const ActionContainer = styled.div` diff --git a/datahub-web-react/src/alchemy-components/components/StructuredPopover/components.ts b/datahub-web-react/src/alchemy-components/components/StructuredPopover/components.ts index 50c419d0bde589..bba2e5ad17bcd5 100644 --- a/datahub-web-react/src/alchemy-components/components/StructuredPopover/components.ts +++ b/datahub-web-react/src/alchemy-components/components/StructuredPopover/components.ts @@ -1,9 +1,7 @@ import styled from 'styled-components'; -import colors from '@src/alchemy-components/theme/foundations/colors'; - export const Title = styled.div` - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 14px; font-weight: 400; `; @@ -28,12 +26,12 @@ export const SectionHeader = styled.div` export const SectionTitle = styled.div` font-weight: 700; font-size: 12px; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; `; export const Content = styled.div` margin-top: 4px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 14px; `; diff --git a/datahub-web-react/src/alchemy-components/components/Switch/components.ts b/datahub-web-react/src/alchemy-components/components/Switch/components.ts index 67b3c053a83dfe..1751aa629b4d68 100644 --- a/datahub-web-react/src/alchemy-components/components/Switch/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Switch/components.ts @@ -10,15 +10,15 @@ import { getToggleSize, } from '@components/components/Switch/utils'; import { formLabelTextStyles } from '@components/components/commonStyles'; -import { borders, colors, shadows, spacing, transition } from '@components/theme'; +import { borders, spacing, transition } from '@components/theme'; import { ColorOptions, SizeOptions } from '@components/theme/config'; -import { getColor } from '@components/theme/utils'; -export const Label = styled.div({ +export const Label = styled.div(({ theme }) => ({ ...formLabelTextStyles, + color: theme.colors.text, display: 'flex', alignItems: 'flex-start', -}); +})); export const SwitchContainer = styled.label<{ labelPosition: SwitchLabelPosition; @@ -45,44 +45,38 @@ export const SwitchContainer = styled.label<{ }); export const Slider = styled.div<{ size?: SizeOptions; isSquare?: boolean; isDisabled?: boolean }>( - ({ size, isSquare, isDisabled }) => ({ + ({ size, isSquare, isDisabled, theme }) => ({ '&:before': { transition: `${transition.duration.normal} all`, content: '""', position: 'absolute', - minWidth: getToggleSize(size || 'md', 'slider'), // sliders width and height must be same + minWidth: getToggleSize(size || 'md', 'slider'), minHeight: getToggleSize(size || 'md', 'slider'), borderRadius: !isSquare ? '35px' : '0px', top: '50%', left: '2px', transform: 'translate(0, -50%)', - backgroundColor: !isDisabled ? colors.white : colors.gray[200], - boxShadow: ` - 0px 1px 2px 0px rgba(16, 24, 40, 0.06), - 0px 1px 3px 0px rgba(16, 24, 40, 0.12) - `, + backgroundColor: !isDisabled ? theme.colors.bg : theme.colors.bgDisabled, + boxShadow: theme.colors.shadowXs, }, borderRadius: !isSquare ? '32px' : '0px', minWidth: getToggleSize(size || 'md', 'input'), minHeight: getInputHeight(size || 'md'), - }), - { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', - - backgroundColor: colors.gray[100], + backgroundColor: theme.colors.border, padding: '2px', transition: `${transition.duration.normal} all`, boxSizing: 'content-box', - }, + }), ); -export const Required = styled.span({ - color: colors.red[500], +export const Required = styled.span(({ theme }) => ({ + color: theme.colors.textError, marginLeft: spacing.xxsm, -}); +})); export const StyledInput = styled.input<{ customSize?: SizeOptions; @@ -94,10 +88,7 @@ export const StyledInput = styled.input<{ position: absolute; &:checked + ${Slider} { - background: ${(props) => - !props.disabled - ? 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(83.44, 63, 209, 0.20) 100%), #533FD1' - : colors.gray[100]}; + background: ${(props) => (!props.disabled ? props.theme.colors.brandGradient : props.theme.colors.bgDisabled)}; &:before { transform: ${({ customSize }) => getSliderTransformPosition(customSize || 'md')}; @@ -105,27 +96,22 @@ export const StyledInput = styled.input<{ } &:focus-within + ${Slider} { - border-color: ${(props) => (props.checked ? getColor(props.colorScheme, 200, props.theme) : 'transparent')}; - outline: ${(props) => - props.checked ? `${borders['2px']} ${getColor(props.colorScheme, 200, props.theme)}` : 'none'}; - box-shadow: ${(props) => (props.checked ? shadows.xs : 'none')}; + border-color: ${(props) => (props.checked ? props.theme.colors.borderBrandFocused : 'transparent')}; + outline: ${(props) => (props.checked ? `${borders['2px']} ${props.theme.colors.borderBrandFocused}` : 'none')}; + box-shadow: ${(props) => (props.checked ? props.theme.colors.shadowFocusBrand : 'none')}; } `; -export const StyledIcon = styled(Icon)<{ checked?: boolean; size: SizeOptions }>( - ({ checked, size }) => ({ - left: getIconTransformPositionLeft(size, checked || false), - top: getIconTransformPositionTop(size), - color: checked ? colors.violet[500] : colors.gray[500], - }), - { - transition: `${transition.duration.normal} all`, - position: 'absolute', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, -); +export const StyledIcon = styled(Icon)<{ checked?: boolean; size: SizeOptions }>(({ checked, size, theme }) => ({ + left: getIconTransformPositionLeft(size, checked || false), + top: getIconTransformPositionTop(size), + color: checked ? theme.colors.iconBrand : theme.colors.icon, + transition: `${transition.duration.normal} all`, + position: 'absolute', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +})); export const IconContainer = styled.div({ position: 'relative', diff --git a/datahub-web-react/src/alchemy-components/components/Table/Table.tsx b/datahub-web-react/src/alchemy-components/components/Table/Table.tsx index e4c0de146864f5..562965f6afc3b6 100644 --- a/datahub-web-react/src/alchemy-components/components/Table/Table.tsx +++ b/datahub-web-react/src/alchemy-components/components/Table/Table.tsx @@ -87,7 +87,7 @@ export const Table = ({ return ( - Loading data... + Loading data... ); } diff --git a/datahub-web-react/src/alchemy-components/components/Table/components.ts b/datahub-web-react/src/alchemy-components/components/Table/components.ts index e9eabeedc460a7..0547fddcac6372 100644 --- a/datahub-web-react/src/alchemy-components/components/Table/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Table/components.ts @@ -1,24 +1,24 @@ import { Icon } from '@components'; import styled from 'styled-components'; -import { borders, colors, radius, spacing, typography } from '@src/alchemy-components/theme'; +import { borders, radius, spacing, typography } from '@src/alchemy-components/theme'; import { AlignmentOptions } from '@src/alchemy-components/theme/config'; export const TableContainer = styled.div<{ isScrollable?: boolean; maxHeight?: string; isBorderless?: boolean }>( - ({ isScrollable, maxHeight, isBorderless }) => ({ + ({ isScrollable, maxHeight, isBorderless, theme }) => ({ borderRadius: isBorderless ? radius.none : radius.lg, - border: isBorderless ? borders.none : `1px solid ${colors.gray[1400]}`, + border: isBorderless ? borders.none : `1px solid ${theme.colors.border}`, overflow: isScrollable ? 'auto' : 'hidden', width: '100%', maxHeight: maxHeight || '100%', '&::-webkit-scrollbar': { - height: '8px', // For horizontal scrollbar - visible - width: '0px', // For vertical scrollbar - invisible + height: '8px', + width: '0px', }, '& .selected-row': { - background: `${colors.gray[100]} !important`, + background: `${theme.colors.bgHover} !important`, }, }), ); @@ -28,30 +28,30 @@ export const BaseTable = styled.table({ width: '100%', }); -export const TableHeader = styled.thead({ - backgroundColor: colors.gray[1500], +export const TableHeader = styled.thead(({ theme }) => ({ + backgroundColor: theme.colors.bgSurface, borderRadius: radius.lg, - borderBottom: `1px solid ${colors.gray[1400]}`, + borderBottom: `1px solid ${theme.colors.border}`, position: 'sticky', top: 0, zIndex: 100, -}); +})); export const TableHeaderCell = styled.th<{ width?: string; maxWidth?: string; minWidth?: string; shouldAddRightBorder?: boolean; -}>(({ width, maxWidth, minWidth, shouldAddRightBorder }) => ({ +}>(({ width, maxWidth, minWidth, shouldAddRightBorder, theme }) => ({ padding: `${spacing.sm} ${spacing.md}`, - color: colors.gray[1700], + color: theme.colors.textSecondary, fontSize: typography.fontSizes.sm, fontWeight: typography.fontWeights.medium, textAlign: 'start', width: width || 'auto', maxWidth, minWidth, - borderRight: shouldAddRightBorder ? `1px solid ${colors.gray[1400]}` : borders.none, + borderRight: shouldAddRightBorder ? `1px solid ${theme.colors.border}` : borders.none, })); export const HeaderContainer = styled.div<{ alignment?: AlignmentOptions }>(({ alignment }) => ({ @@ -68,14 +68,14 @@ export const TableRow = styled.tr<{ isRowClickable?: boolean; isFocused?: boolean; canHover?: boolean; -}>(({ canExpand, isRowClickable, isFocused, canHover }) => ({ - background: canExpand ? colors.gray[100] : 'transparent', +}>(({ canExpand, isRowClickable, isFocused, canHover, theme }) => ({ + background: canExpand ? theme.colors.bgHover : 'transparent', ...(isFocused ? { - background: `linear-gradient(180deg, rgba(83,63,209,0.04) -3.99%, rgba(112,94,228,0.04) 53.04%, rgba(112,94,228,0.04) 100%)`, + background: theme.colors.bgSelectedSubtle, } : {}), - '&:hover': canHover ? { backgroundColor: colors.gray[1500] } : {}, + '&:hover': canHover ? { backgroundColor: theme.colors.bgHover } : {}, cursor: isRowClickable ? 'pointer' : 'normal', '&:last-child': { '& td': { @@ -85,7 +85,7 @@ export const TableRow = styled.tr<{ '& td:first-child': { fontWeight: typography.fontWeights.bold, - color: colors.gray[600], + color: theme.colors.text, fontSize: '12px', }, })); @@ -95,12 +95,12 @@ export const TableCell = styled.td<{ alignment?: AlignmentOptions; isGroupHeader?: boolean; isExpanded?: boolean; -}>(({ width, alignment, isGroupHeader, isExpanded }) => ({ +}>(({ width, alignment, isGroupHeader, theme }) => ({ padding: isGroupHeader ? `${spacing.xsm} ${spacing.xsm} ${spacing.xsm} ${spacing.md}` : `${spacing.md} ${spacing.xsm} ${spacing.md} ${spacing.md}`, - borderBottom: isGroupHeader && !isExpanded ? `1px solid ${colors.gray[200]}` : `1px solid ${colors.gray[100]}`, - color: colors.gray[1700], + borderBottom: `1px solid ${theme.colors.border}`, + color: theme.colors.textSecondary, fontSize: typography.fontSizes.md, fontWeight: typography.fontWeights.normal, overflow: 'hidden', @@ -115,16 +115,16 @@ export const SortIconsContainer = styled.div({ flexDirection: 'column', }); -export const SortIcon = styled(Icon)<{ isActive?: boolean }>(({ isActive }) => ({ +export const SortIcon = styled(Icon)<{ isActive?: boolean }>(({ isActive, theme }) => ({ margin: '-3px', - stroke: isActive ? colors.violet[600] : undefined, + stroke: isActive ? theme.colors.borderBrand : undefined, ':hover': { cursor: 'pointer', }, })); -export const LoadingContainer = styled.div({ +export const LoadingContainer = styled.div(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignItems: 'center', @@ -132,9 +132,9 @@ export const LoadingContainer = styled.div({ height: '100%', width: '100%', gap: spacing.sm, - color: colors.violet[700], + color: theme.colors.buttonFillBrand, fontSize: typography.fontSizes['3xl'], -}); +})); export const CheckboxWrapper = styled.div({ display: 'flex', diff --git a/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx b/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx index 1e52474f1f3742..2fd55f4dc88f4a 100644 --- a/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx +++ b/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx @@ -6,7 +6,6 @@ import { Pill } from '@components/components/Pills'; import { Tooltip } from '@components/components/Tooltip'; import { ErrorBoundary } from '@app/sharedV2/ErrorHandling/ErrorBoundary'; -import { colors } from '@src/alchemy-components/theme'; import { removeRuntimePath } from '@utils/runtimeBasePath'; const ScrollableTabsContainer = styled.div<{ $maxHeight?: string }>` @@ -38,7 +37,7 @@ const StyledTabsPrimary = styled(AntTabs)<{ .ant-tabs-tab { padding: 8px 0; font-size: 14px; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; } ${({ $addPaddingLeft }) => @@ -67,16 +66,21 @@ const StyledTabsPrimary = styled(AntTabs)<{ position: sticky; top: 0; z-index: 10; - background-color: white; + background-color: ${(props) => props.theme.colors.bg}; } `} .ant-tabs-tab-active .ant-tabs-tab-btn { - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; font-weight: 600; } + .ant-tabs-tab.ant-tabs-tab-disabled, + .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn { + color: ${(props) => props.theme.colors.textDisabled}; + } + .ant-tabs-ink-bar { - background-color: ${(props) => props.theme.styles['primary-color']}; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; } .ant-tabs-content-holder { @@ -116,7 +120,7 @@ const StyledTabsSecondary = styled(AntTabs)<{ padding: 8px 8px; border-radius: 4px; font-size: 14px; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; } ${({ $addPaddingLeft }) => @@ -139,14 +143,19 @@ const StyledTabsSecondary = styled(AntTabs)<{ } `} .ant-tabs-tab-active { - background-color: ${(props) => props.theme.styles['primary-color-light']}80; + background-color: ${(props) => props.theme.colors.bgSurfaceBrand}; } .ant-tabs-tab-active .ant-tabs-tab-btn { - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; font-weight: 600; } + .ant-tabs-tab.ant-tabs-tab-disabled, + .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn { + color: ${(props) => props.theme.colors.textDisabled}; + } + .ant-tabs-ink-bar { background-color: transparent; } @@ -168,7 +177,7 @@ const StyledTabsSecondary = styled(AntTabs)<{ } } - ${({ $stickyHeader }) => + ${({ $stickyHeader, theme }) => $stickyHeader && ` .ant-tabs-nav::before { @@ -186,7 +195,7 @@ const StyledTabsSecondary = styled(AntTabs)<{ left: 0; right: 0; height: 1px; - background-color: ${colors.gray[200]}; + background-color: ${theme.colors.bgSurface}; } `} @@ -204,7 +213,7 @@ const TabViewWrapper = styled.div<{ $disabled?: boolean }>` display: flex; align-items: center; gap: 4px; - ${({ $disabled }) => $disabled && `color: ${colors.gray[1800]};`} + ${({ $disabled, theme }) => $disabled && `color: ${theme.colors.textDisabled};`} `; function TabView({ tab }: { tab: Tab }) { diff --git a/datahub-web-react/src/alchemy-components/components/Text/components.ts b/datahub-web-react/src/alchemy-components/components/Text/components.ts index de1b290afd4108..0766d03fbe7e63 100644 --- a/datahub-web-react/src/alchemy-components/components/Text/components.ts +++ b/datahub-web-react/src/alchemy-components/components/Text/components.ts @@ -1,54 +1,68 @@ import styled from 'styled-components'; import { TextProps } from '@components/components/Text/types'; -import { colors, typography } from '@components/theme'; +import { typography } from '@components/theme'; +import { ColorOptions } from '@components/theme/config'; import { getColor, getFontSize } from '@components/theme/utils'; -// Text Styles +import { Theme } from '@conf/theme/types'; + +type ThemedTextProps = TextProps & { theme: Theme }; + const textStyles = { fontSize: typography.fontSizes.md, lineHeight: typography.lineHeights.md, fontWeight: typography.fontWeights.normal, }; -// Default styles const baseStyles = { fontFamily: typography.fonts.body, margin: 0, - - '& a': { - color: colors.violet[400], - textDecoration: 'none', - transition: 'color 0.15s ease', - - '&:hover': { - color: colors.violet[500], - }, - }, }; // Prop Driven Styles -const propStyles = (props: TextProps, isText = false) => { +const propStyles = (props: ThemedTextProps, isText = false) => { const styles = {} as any; if (props.size) styles.fontSize = getFontSize(props.size); - if (props.color) styles.color = getColor(props.color, props.colorLevel, props.theme); + if (props.color) { + const semantic = props.theme.colors[props.color]; + styles.color = + typeof semantic === 'string' + ? semantic + : getColor(props.color as ColorOptions, props.colorLevel, props.theme); + } if (props.weight) styles.fontWeight = typography.fontWeights[props.weight]; if (isText) styles.lineHeight = typography.lineHeights[props.lineHeight || props.size || 'md']; return styles; }; -export const P = styled.p({ ...baseStyles, ...textStyles }, (props: TextProps) => ({ - ...propStyles(props as TextProps, true), +const themeAwareOverrides = (props: ThemedTextProps) => ({ + '& a': { + color: props.theme.colors.hyperlinks, + textDecoration: 'none', + transition: 'color 0.15s ease', + '&:hover': { + color: props.theme.colors.textBrand, + }, + }, +}); + +export const P = styled.p({ ...baseStyles, ...textStyles }, (props: ThemedTextProps) => ({ + ...propStyles(props, true), + ...themeAwareOverrides(props), })); -export const Span = styled.span({ ...baseStyles, ...textStyles }, (props: TextProps) => ({ - ...propStyles(props as TextProps, true), +export const Span = styled.span({ ...baseStyles, ...textStyles }, (props: ThemedTextProps) => ({ + ...propStyles(props, true), + ...themeAwareOverrides(props), })); -export const Div = styled.div({ ...baseStyles, ...textStyles }, (props: TextProps) => ({ - ...propStyles(props as TextProps, true), +export const Div = styled.div({ ...baseStyles, ...textStyles }, (props: ThemedTextProps) => ({ + ...propStyles(props, true), + ...themeAwareOverrides(props), })); -export const Pre = styled.pre({ ...baseStyles, ...textStyles }, (props: TextProps) => ({ - ...propStyles(props as TextProps, true), +export const Pre = styled.pre({ ...baseStyles, ...textStyles }, (props: ThemedTextProps) => ({ + ...propStyles(props, true), + ...themeAwareOverrides(props), })); diff --git a/datahub-web-react/src/alchemy-components/components/TextArea/components.ts b/datahub-web-react/src/alchemy-components/components/TextArea/components.ts index 34164a6a1d0f66..ec930669098f39 100644 --- a/datahub-web-react/src/alchemy-components/components/TextArea/components.ts +++ b/datahub-web-react/src/alchemy-components/components/TextArea/components.ts @@ -1,13 +1,12 @@ import styled from 'styled-components'; import { Icon, IconNames } from '@components/components/Icon'; -import { TextAreaProps } from '@components/components/TextArea/types'; import { formLabelTextStyles, inputPlaceholderTextStyles, inputValueTextStyles, } from '@components/components/commonStyles'; -import theme, { borders, colors, radius, sizes, spacing, typography } from '@components/theme'; +import { borders, radius, sizes, spacing, typography } from '@components/theme'; import { getStatusColors } from '@components/theme/utils'; const minHeight = '100px'; @@ -35,38 +34,41 @@ export const StyledIcon = styled(Icon)({ marginTop: spacing.sm, }); -export const TextAreaContainer = styled.div( - ({ isSuccess, warning, isDisabled, isInvalid }: TextAreaProps) => ({ - border: `${borders['1px']} ${getStatusColors(isSuccess, warning, isInvalid)}`, - backgroundColor: isDisabled ? colors.gray[1500] : colors.white, - }), - { - ...defaultFlexStyles, - position: 'relative', - minWidth: '160px', - minHeight, - width: sizes.full, - borderRadius: radius.md, - flex: 1, - color: colors.gray[400], // first icon color - - '&:focus-within': { - borderColor: colors.violet[200], - outline: `${borders['1px']} ${colors.violet[200]}`, - }, +export const TextAreaContainer = styled.div<{ + isSuccess?: boolean; + warning?: string; + isDisabled?: boolean; + isInvalid?: boolean; +}>(({ isSuccess, warning, isDisabled, isInvalid, theme }) => ({ + border: `${borders['1px']} ${getStatusColors(isSuccess, warning, isInvalid, theme.colors)}`, + backgroundColor: isDisabled ? theme.colors.bgInputDisabled : theme.colors.bg, + ...defaultFlexStyles, + position: 'relative' as const, + minWidth: '160px', + minHeight, + width: sizes.full, + borderRadius: radius.md, + flex: 1, + color: theme.colors.icon, + boxShadow: theme.colors.shadowXs, + + '&:focus-within': { + borderColor: theme.colors.borderBrandFocused, + outline: `${borders['1px']} ${theme.colors.borderBrandFocused}`, }, -); +})); -export const TextAreaField = styled.textarea<{ icon?: IconNames }>(({ icon }) => ({ +export const TextAreaField = styled.textarea<{ icon?: IconNames }>(({ icon, theme }) => ({ padding: `${spacing.sm} ${spacing.md}`, borderRadius: radius.md, border: borders.none, width: '100%', minHeight, + backgroundColor: 'transparent', ...inputValueTextStyles(), + color: theme.colors.text, - // Account for icon placement ...(icon && { paddingLeft: spacing.xsm, }), @@ -77,32 +79,34 @@ export const TextAreaField = styled.textarea<{ icon?: IconNames }>(({ icon }) => '&::placeholder': { ...inputPlaceholderTextStyles, + color: theme.colors.textPlaceholder, }, '&:disabled': { - backgroundColor: colors.gray[1500], + backgroundColor: theme.colors.bgInputDisabled, }, })); -export const Label = styled.div({ +export const Label = styled.div(({ theme }) => ({ ...formLabelTextStyles, + color: theme.colors.text, marginBottom: spacing.xxsm, textAlign: 'left', -}); +})); -export const Required = styled.span({ - color: colors.red[500], -}); +export const Required = styled.span(({ theme }) => ({ + color: theme.colors.textError, +})); -export const ErrorMessage = styled.div({ +export const ErrorMessage = styled.div(({ theme: t }) => ({ ...defaultMessageStyles, - color: theme.semanticTokens.colors.error, -}); + color: t.colors.textError, +})); -export const WarningMessage = styled.div({ +export const WarningMessage = styled.div(({ theme: t }) => ({ ...defaultMessageStyles, - color: theme.semanticTokens.colors.warning, -}); + color: t.colors.textWarning, +})); export const StyledStatusIcon = styled(Icon)({ position: 'absolute', diff --git a/datahub-web-react/src/alchemy-components/components/Timeline/components.tsx b/datahub-web-react/src/alchemy-components/components/Timeline/components.tsx index ddbed572dcb15d..e41be217cbfcd8 100644 --- a/datahub-web-react/src/alchemy-components/components/Timeline/components.tsx +++ b/datahub-web-react/src/alchemy-components/components/Timeline/components.tsx @@ -1,8 +1,6 @@ import { Timeline as AntdTimeline } from 'antd'; import styled from 'styled-components'; -import { colors } from '@src/alchemy-components/theme'; - export const StyledAntdTimeline = styled(AntdTimeline)` .ant-timeline-item-head { padding: 0; @@ -10,6 +8,6 @@ export const StyledAntdTimeline = styled(AntdTimeline)` .ant-timeline-item-tail { border-width: 1px; - border-color: ${colors.gray[100]}; + border-color: ${({ theme }) => theme.colors.border}; } ` as typeof AntdTimeline; diff --git a/datahub-web-react/src/alchemy-components/components/Tooltip/Tooltip.tsx b/datahub-web-react/src/alchemy-components/components/Tooltip/Tooltip.tsx index a14019f76a88da..12848a99767864 100644 --- a/datahub-web-react/src/alchemy-components/components/Tooltip/Tooltip.tsx +++ b/datahub-web-react/src/alchemy-components/components/Tooltip/Tooltip.tsx @@ -1,14 +1,17 @@ import { Tooltip, TooltipProps } from 'antd'; import * as React from 'react'; - -import colors from '@components/theme/foundations/colors'; +import { useTheme } from 'styled-components'; export default function DataHubTooltip(props: TooltipProps & React.RefAttributes) { + const themeConfig = useTheme(); + const bgColor = themeConfig.colors.bg; + const textColor = themeConfig.colors.textSecondary; + return ( diff --git a/datahub-web-react/src/alchemy-components/components/WhiskerChart/WhiskerChart.tsx b/datahub-web-react/src/alchemy-components/components/WhiskerChart/WhiskerChart.tsx index e0bc2c18f3653b..274832ae10b431 100644 --- a/datahub-web-react/src/alchemy-components/components/WhiskerChart/WhiskerChart.tsx +++ b/datahub-web-react/src/alchemy-components/components/WhiskerChart/WhiskerChart.tsx @@ -7,7 +7,7 @@ import { BoxPlot } from '@visx/stats'; import { useTooltip } from '@visx/tooltip'; import { Margin } from '@visx/xychart'; import React, { useMemo, useRef, useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import DynamicMarginSetter from '@components/components/BarChart/components/DynamicMarginSetter'; import { @@ -25,8 +25,6 @@ import { import { computeWhiskerOffset } from '@components/components/WhiskerChart/utils'; import { abbreviateNumber } from '@components/components/dataviz/utils'; -import { colors } from '@src/alchemy-components/theme'; - const ChartWrapper = styled.div` width: 100%; height: 100%; @@ -47,6 +45,7 @@ function InternalWhiskerChart({ renderWhisker = whiskerChartDefaults.renderWhisker, }: InternalWhiskerChartProps) { const wrapperRef = useRef(null); + const themeConfig = useTheme(); const defaultMargin = useMemo(() => { const axisLabelMarginOffset = axisLabel !== undefined ? AXIS_LABEL_MARGIN_OFFSET : 0; @@ -102,7 +101,7 @@ function InternalWhiskerChart({ y2={minY} width={chartWidth} height={chartHeight} - stroke={colors.gray[100]} + stroke={themeConfig.colors.border} numTicks={5} /> @@ -123,7 +122,7 @@ function InternalWhiskerChart({ ))} - + - - {label}:  - - + {label}:  + {value} diff --git a/datahub-web-react/src/alchemy-components/components/commonStyles.ts b/datahub-web-react/src/alchemy-components/components/commonStyles.ts index 04069f5950bc40..ccba594c9841da 100644 --- a/datahub-web-react/src/alchemy-components/components/commonStyles.ts +++ b/datahub-web-react/src/alchemy-components/components/commonStyles.ts @@ -1,23 +1,20 @@ -import { colors, typography } from '@components/theme'; +import { typography } from '@components/theme'; export const INPUT_MAX_HEIGHT = '40px'; export const formLabelTextStyles = { fontWeight: typography.fontWeights.normal, fontSize: typography.fontSizes.md, - color: colors.gray[600], }; export const inputValueTextStyles = (size = 'md') => ({ fontFamily: typography.fonts.body, fontWeight: typography.fontWeights.normal, fontSize: typography.fontSizes[size], - color: colors.gray[700], }); export const inputPlaceholderTextStyles = { fontFamily: typography.fonts.body, fontWeight: typography.fontWeights.normal, fontSize: typography.fontSizes.md, - color: colors.gray[400], }; diff --git a/datahub-web-react/src/alchemy-components/theme/config/types.ts b/datahub-web-react/src/alchemy-components/theme/config/types.ts index d469725a6f0c57..9c511cffe7348b 100644 --- a/datahub-web-react/src/alchemy-components/theme/config/types.ts +++ b/datahub-web-react/src/alchemy-components/theme/config/types.ts @@ -80,7 +80,7 @@ export enum FontSizeValues { } export type FontSizeOptions = keyof typeof SizeValues | keyof typeof FontSizeValues; export type FontWeightOptions = 'normal' | 'medium' | 'semiBold' | 'bold'; -export type FontColorOptions = MiscColorOptions | ColorOptions; +export type FontColorOptions = MiscColorOptions | ColorOptions | (string & Record); export type FontColorLevelOptions = keyof Color; export type BorderRadiusOptions = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; diff --git a/datahub-web-react/src/alchemy-components/theme/utils.ts b/datahub-web-react/src/alchemy-components/theme/utils.ts index 7c54f5f3298b05..09f5c61989cea5 100644 --- a/datahub-web-react/src/alchemy-components/theme/utils.ts +++ b/datahub-web-react/src/alchemy-components/theme/utils.ts @@ -56,15 +56,20 @@ export const getRotationTransform = (rotate?: RotationOptions) => { * @param {string} [warning] - Warning definition, if any. * @returns {string} - The status color based on the provided flags. */ -export const getStatusColors = (isSuccess?: boolean, warning?: string, isInvalid?: boolean): string => { +export const getStatusColors = ( + isSuccess?: boolean, + warning?: string, + isInvalid?: boolean, + themeColors?: { borderError: string; borderSuccess: string; borderWarning: string; borderInput: string }, +): string => { if (isInvalid) { - return colors.red[600]; + return themeColors?.borderError ?? colors.red[600]; } if (isSuccess) { - return colors.green[600]; + return themeColors?.borderSuccess ?? colors.green[600]; } if (warning) { - return colors.yellow[600]; + return themeColors?.borderWarning ?? colors.yellow[600]; } - return colors.gray[100]; + return themeColors?.borderInput ?? colors.gray[100]; }; diff --git a/datahub-web-react/src/app/AdminConsole.tsx b/datahub-web-react/src/app/AdminConsole.tsx index fba4ea98ee3d10..df156dc12df506 100644 --- a/datahub-web-react/src/app/AdminConsole.tsx +++ b/datahub-web-react/src/app/AdminConsole.tsx @@ -3,14 +3,13 @@ import { Menu } from 'antd'; import Sider from 'antd/lib/layout/Sider'; import React, { useState } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useAppConfig } from '@app/useAppConfig'; const ToggleContainer = styled.div` - background-color: ${ANTD_GRAY[4]}; + background-color: ${(props) => props.theme.colors.bgSurface}; border-top-right-radius: 2px; border-bottom-right-radius: 2px; `; @@ -34,6 +33,7 @@ const ControlSlideOut = styled(Sider)` */ export const AdminConsole = (): JSX.Element => { const me = useUserContext(); + const theme = useTheme(); const [adminConsoleOpen, setAdminConsoleOpen] = useState(false); const { config } = useAppConfig(); @@ -59,7 +59,7 @@ export const AdminConsole = (): JSX.Element => { const toggleView = ( - + ); diff --git a/datahub-web-react/src/app/GlobalThemeStyles.tsx b/datahub-web-react/src/app/GlobalThemeStyles.tsx new file mode 100644 index 00000000000000..080a7d586f0ca2 --- /dev/null +++ b/datahub-web-react/src/app/GlobalThemeStyles.tsx @@ -0,0 +1,524 @@ +import { createGlobalStyle } from 'styled-components'; + +import { Theme } from '@conf/theme/types'; + +/** + * Global CSS overrides that make Ant Design components respect the active theme's + * semantic color tokens. These are injected via styled-components' createGlobalStyle, + * which receives the current theme from ThemeProvider. + * + * This bridges the gap between the build-time Ant Less variables and our + * runtime theme switching (light ↔ dark). + */ +const GlobalThemeStyles = createGlobalStyle<{ theme: Theme }>` + /* ── Base ─────────────────────────────────────────────── */ + :root { + --theme-bgSurface: ${(props) => props.theme.colors.bgSurface}; + --theme-bgSelected: ${(props) => props.theme.colors.bgSelected}; + --theme-bgSelectedSubtle: ${(props) => props.theme.colors.bgSelectedSubtle}; + --theme-bgHighlight: ${(props) => props.theme.colors.bgHighlight}; + --theme-shadowFocus: ${(props) => props.theme.colors.shadowFocus}; + --theme-shadowFocusBrand: ${(props) => props.theme.colors.shadowFocusBrand}; + --theme-overlayLight: ${(props) => props.theme.colors.overlayLight}; + --theme-overlayMedium: ${(props) => props.theme.colors.overlayMedium}; + --theme-overlayHeavy: ${(props) => props.theme.colors.overlayHeavy}; + --theme-icon: ${(props) => props.theme.colors.icon}; + --theme-iconBrand: ${(props) => props.theme.colors.iconBrand}; + --theme-textOnFillBrand: ${(props) => props.theme.colors.textOnFillBrand}; + } + + body { + background-color: ${(props) => props.theme.colors.bgSurfaceNewNav}; + color: ${(props) => props.theme.colors.text}; + } + + /* ── Ant Layout ───────────────────────────────────────── */ + .ant-layout { + background-color: transparent; + } + + /* ── Modals ───────────────────────────────────────────── */ + .ant-modal-content { + background-color: ${(props) => props.theme.colors.bg} !important; + color: ${(props) => props.theme.colors.text} !important; + } + .ant-modal-header { + background-color: ${(props) => props.theme.colors.bg} !important; + border-bottom-color: ${(props) => props.theme.colors.border}; + } + .ant-modal-header .ant-modal-title { + color: ${(props) => props.theme.colors.text} !important; + } + .ant-modal-footer { + border-top-color: ${(props) => props.theme.colors.border}; + } + .ant-modal-body { + background-color: ${(props) => props.theme.colors.bg} !important; + } + .ant-modal-close-x { + color: ${(props) => props.theme.colors.icon} !important; + } + .ant-modal-mask { + background-color: ${(props) => props.theme.colors.overlayHeavy}; + } + + /* ── Reactour (Product Tour) ────────────────────────── */ + .reactour__helper { + background-color: ${(props) => props.theme.colors.bg} !important; + color: ${(props) => props.theme.colors.text} !important; + } + .reactour__helper h1, + .reactour__helper h2, + .reactour__helper h3, + .reactour__helper h4, + .reactour__helper h5, + .reactour__helper h6 { + color: ${(props) => props.theme.colors.text} !important; + } + .reactour__helper p, + .reactour__helper span, + .reactour__helper div.ant-typography { + color: ${(props) => props.theme.colors.text} !important; + } + .reactour__helper a { + color: ${(props) => props.theme.colors.hyperlinks} !important; + } + .reactour__close { + color: ${(props) => props.theme.colors.icon} !important; + } + + /* ── Dropdowns ────────────────────────────────────────── */ + .ant-dropdown-menu { + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => props.theme.colors.shadowMd}; + } + .ant-dropdown-menu .ant-dropdown-menu-item, + .ant-dropdown-menu .ant-dropdown-menu-submenu-title { + color: ${(props) => props.theme.colors.text}; + } + .ant-dropdown-menu .ant-dropdown-menu-item:hover, + .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover { + background-color: ${(props) => props.theme.colors.bgHover}; + } + .ant-dropdown-menu .ant-dropdown-menu-item-danger, + .ant-dropdown-menu .ant-dropdown-menu-item-danger .anticon { + color: ${(props) => props.theme.colors.textError} !important; + } + .ant-dropdown-menu .ant-dropdown-menu-item-danger:hover { + background-color: ${(props) => props.theme.colors.bgSurfaceError} !important; + } + .ant-dropdown-menu-submenu-popup { + .ant-dropdown-menu, + .ant-dropdown-menu-sub { + background-color: ${(props) => props.theme.colors.bg} !important; + box-shadow: ${(props) => props.theme.colors.shadowMd} !important; + } + .ant-dropdown-menu-item, + .ant-dropdown-menu-submenu-title { + color: ${(props) => props.theme.colors.text} !important; + } + .ant-dropdown-menu-item:hover, + .ant-dropdown-menu-submenu-title:hover { + background-color: ${(props) => props.theme.colors.bgHover} !important; + } + } + .ant-select-dropdown { + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => props.theme.colors.shadowMd}; + } + .ant-select-item { + color: ${(props) => props.theme.colors.text}; + } + .ant-select-item-option-active:not(.ant-select-item-option-disabled) { + background-color: ${(props) => props.theme.colors.bgHover}; + } + .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { + background-color: ${(props) => props.theme.colors.bgSelected}; + color: ${(props) => props.theme.colors.textSelected}; + } + + /* ── Inputs ───────────────────────────────────────────── */ + .ant-input { + color: ${(props) => props.theme.colors.text}; + } + .ant-input:hover { + border-color: ${(props) => props.theme.colors.borderHover}; + } + .ant-input:focus, + .ant-input-focused { + border-color: ${(props) => props.theme.colors.borderInputFocus}; + box-shadow: ${(props) => props.theme.colors.shadowFocusBrand}; + } + .ant-input::placeholder { + color: ${(props) => props.theme.colors.textPlaceholder}; + } + .ant-input[disabled] { + background-color: ${(props) => props.theme.colors.bgInputDisabled}; + border-color: ${(props) => props.theme.colors.borderDisabled}; + color: ${(props) => props.theme.colors.textDisabled}; + } + .ant-select:not(.ant-select-customize-input) .ant-select-selector { + background-color: ${(props) => props.theme.colors.bgInput}; + color: ${(props) => props.theme.colors.text}; + border-color: ${(props) => props.theme.colors.borderInput}; + box-shadow: ${(props) => props.theme.colors.shadowXs}; + } + .ant-input-affix-wrapper { + background-color: ${(props) => props.theme.colors.bgInput}; + border-color: ${(props) => props.theme.colors.borderInput}; + box-shadow: ${(props) => props.theme.colors.shadowXs}; + } + .ant-input-affix-wrapper:hover { + border-color: ${(props) => props.theme.colors.borderHover}; + } + .ant-input-affix-wrapper-focused { + border-color: ${(props) => props.theme.colors.borderInputFocus}; + box-shadow: ${(props) => props.theme.colors.shadowFocusBrand}; + } + + /* ── Tables ───────────────────────────────────────────── */ + .ant-table { + background-color: ${(props) => props.theme.colors.bg} !important; + color: ${(props) => props.theme.colors.text} !important; + } + .ant-table-thead > tr > th { + background-color: ${(props) => props.theme.colors.bgSurface} !important; + color: ${(props) => props.theme.colors.text} !important; + border-bottom-color: ${(props) => props.theme.colors.border} !important; + } + .ant-table-tbody > tr > td { + border-bottom-color: ${(props) => props.theme.colors.border} !important; + color: ${(props) => props.theme.colors.text} !important; + } + .ant-table-tbody > tr:hover > td { + background-color: ${(props) => props.theme.colors.bgHover} !important; + } + .ant-table-placeholder { + background-color: ${(props) => props.theme.colors.bg} !important; + } + .ant-table-cell { + background-color: inherit !important; + } + + /* ── Cards ────────────────────────────────────────────── */ + .ant-card { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + border-color: ${(props) => props.theme.colors.border}; + } + .ant-card-head { + color: ${(props) => props.theme.colors.text}; + border-bottom-color: ${(props) => props.theme.colors.border}; + } + + /* ── Popover / Tooltip ────────────────────────────────── */ + .ant-popover-inner { + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => props.theme.colors.shadowMd}; + } + .ant-popover-inner-content { + color: ${(props) => props.theme.colors.text}; + } + .ant-popover-title { + color: ${(props) => props.theme.colors.text}; + border-bottom-color: ${(props) => props.theme.colors.border}; + } + + /* ── Tabs ─────────────────────────────────────────────── */ + .ant-tabs { + color: ${(props) => props.theme.colors.text}; + } + .ant-tabs-tab { + color: ${(props) => props.theme.colors.textSecondary}; + } + .ant-tabs-tab:hover { + color: ${(props) => props.theme.colors.textHover}; + } + .ant-tabs-tab-active .ant-tabs-tab-btn { + color: ${(props) => props.theme.colors.textBrand}; + } + .ant-tabs-tab.ant-tabs-tab-disabled, + .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn { + color: ${(props) => props.theme.colors.textDisabled}; + } + .ant-tabs-nav::before { + border-bottom-color: ${(props) => props.theme.colors.border} !important; + } + + /* ── List ─────────────────────────────────────────────── */ + .ant-list { + color: ${(props) => props.theme.colors.text}; + } + .ant-list-item { + border-bottom-color: ${(props) => props.theme.colors.border}; + } + + /* ── Menu ─────────────────────────────────────────────── */ + .ant-menu { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + } + .ant-menu-item:hover, + .ant-menu-item-active { + background-color: ${(props) => props.theme.colors.bgHover}; + } + .ant-menu-item-selected { + background-color: ${(props) => props.theme.colors.bgSelected}; + color: ${(props) => props.theme.colors.textSelected}; + } + + /* ── Divider ──────────────────────────────────────────── */ + .ant-divider { + border-top-color: ${(props) => props.theme.colors.border}; + } + + /* ── Typography ───────────────────────────────────────── */ + h1, h2, h3, h4, h5, h6, + .ant-typography { + color: ${(props) => props.theme.colors.text} !important; + } + .ant-typography.ant-typography-secondary { + color: ${(props) => props.theme.colors.textSecondary} !important; + } + .ant-typography h5, + h5.ant-typography { + color: ${(props) => props.theme.colors.text} !important; + } + + /* ── Tag ──────────────────────────────────────────────── */ + .ant-tag { + background-color: ${(props) => props.theme.colors.bgSurface}; + border-color: ${(props) => props.theme.colors.border}; + color: ${(props) => props.theme.colors.textSecondary}; + .ant-tag-close-icon { + color: ${(props) => props.theme.colors.icon}; + } + } + + /* ── Form ─────────────────────────────────────────────── */ + .ant-form-item-label > label { + color: ${(props) => props.theme.colors.text}; + } + + /* ── Checkbox ─────────────────────────────────────────── */ + .ant-checkbox-wrapper { + color: ${(props) => props.theme.colors.text}; + } + + /* ── Radio ────────────────────────────────────────────── */ + .ant-radio-wrapper { + color: ${(props) => props.theme.colors.text}; + } + + /* ── Alert ────────────────────────────────────────────── */ + .ant-alert { + color: ${(props) => props.theme.colors.text} !important; + } + .ant-alert-error { + background-color: ${(props) => props.theme.colors.bgSurfaceError} !important; + border-color: ${(props) => props.theme.colors.borderError} !important; + } + .ant-alert-warning { + background-color: ${(props) => props.theme.colors.bgSurfaceWarning} !important; + border-color: ${(props) => props.theme.colors.borderWarning} !important; + } + .ant-alert-info { + background-color: ${(props) => props.theme.colors.bgSurfaceInfo} !important; + border-color: ${(props) => props.theme.colors.borderInformation} !important; + } + .ant-alert-success { + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess} !important; + border-color: ${(props) => props.theme.colors.borderSuccess} !important; + } + .ant-alert-message { + color: ${(props) => props.theme.colors.text} !important; + } + .ant-alert-description { + color: ${(props) => props.theme.colors.textSecondary} !important; + } + + /* ── Drawer ───────────────────────────────────────────── */ + .ant-drawer-mask { + background-color: ${(props) => props.theme.colors.overlayHeavy}; + } + .ant-drawer-content { + background-color: ${(props) => props.theme.colors.bg}; + } + .ant-drawer-header { + background-color: ${(props) => props.theme.colors.bg}; + border-bottom-color: ${(props) => props.theme.colors.border}; + } + .ant-drawer-title { + color: ${(props) => props.theme.colors.text}; + } + + /* ── Buttons ──────────────────────────────────────────── */ + .ant-btn-default { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + border-color: ${(props) => props.theme.colors.border}; + } + .ant-btn-default:hover { + border-color: ${(props) => props.theme.colors.borderBrand}; + color: ${(props) => props.theme.colors.textBrand}; + } + .ant-btn-text { + color: ${(props) => props.theme.colors.text}; + } + .ant-btn-link { + color: ${(props) => props.theme.colors.textBrand}; + } + + /* ── Pagination ───────────────────────────────────────── */ + .ant-pagination-item { + background-color: ${(props) => props.theme.colors.bg}; + border-color: ${(props) => props.theme.colors.border}; + } + .ant-pagination-item a { + color: ${(props) => props.theme.colors.text}; + } + .ant-pagination-item-active { + border-color: ${(props) => props.theme.colors.borderBrand}; + } + .ant-pagination-prev .ant-pagination-item-link, + .ant-pagination-next .ant-pagination-item-link { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + border-color: ${(props) => props.theme.colors.border}; + } + + /* ── Breadcrumb ───────────────────────────────────────── */ + .ant-breadcrumb { + color: ${(props) => props.theme.colors.textTertiary}; + } + .ant-breadcrumb a { + color: ${(props) => props.theme.colors.textSecondary}; + } + .ant-breadcrumb-separator { + color: ${(props) => props.theme.colors.textTertiary}; + } + + /* ── Badge ────────────────────────────────────────────── */ + .ant-badge-count { + box-shadow: 0 0 0 1px ${(props) => props.theme.colors.bg}; + } + + /* ── Collapse / Accordion ─────────────────────────────── */ + .ant-collapse { + background-color: ${(props) => props.theme.colors.bgSurface}; + border-color: ${(props) => props.theme.colors.border}; + color: ${(props) => props.theme.colors.text}; + } + .ant-collapse-ghost { + background-color: transparent; + } + .ant-collapse > .ant-collapse-item { + border-bottom-color: ${(props) => props.theme.colors.border}; + } + .ant-collapse > .ant-collapse-item > .ant-collapse-header { + color: ${(props) => props.theme.colors.text}; + } + .ant-collapse-content { + background-color: ${(props) => props.theme.colors.bg}; + border-top-color: ${(props) => props.theme.colors.border}; + color: ${(props) => props.theme.colors.text}; + } + .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content { + background-color: transparent; + } + + /* ── Steps ────────────────────────────────────────────── */ + .ant-steps-item-title { + color: ${(props) => props.theme.colors.text}; + } + .ant-steps-item-description { + color: ${(props) => props.theme.colors.textSecondary}; + } + + /* ── Empty ────────────────────────────────────────────── */ + .ant-empty-description { + color: ${(props) => props.theme.colors.textSecondary}; + } + + /* ── Skeleton ─────────────────────────────────────────── */ + .ant-skeleton-content .ant-skeleton-title, + .ant-skeleton-content .ant-skeleton-paragraph > li { + background: ${(props) => props.theme.colors.bgSkeleton}; + } + .ant-skeleton-active .ant-skeleton-content .ant-skeleton-title, + .ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li { + background: linear-gradient( + 90deg, + ${(props) => props.theme.colors.bgSkeleton} 25%, + ${(props) => props.theme.colors.bgSkeletonShimmer} 37%, + ${(props) => props.theme.colors.bgSkeleton} 63% + ); + background-size: 400% 100%; + } + + /* ── Notification ─────────────────────────────────────── */ + .ant-notification-notice { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + box-shadow: ${(props) => props.theme.colors.shadowLg}; + } + + /* ── Message ──────────────────────────────────────────── */ + .ant-message-notice-content { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + box-shadow: ${(props) => props.theme.colors.shadowMd}; + } + + /* ── Spin ─────────────────────────────────────────────── */ + .ant-spin-text { + color: ${(props) => props.theme.colors.textSecondary}; + } + + /* ── Switch ───────────────────────────────────────────── */ + .ant-switch { + background-color: ${(props) => props.theme.colors.bgSurface}; + } + + /* ── Tooltip ──────────────────────────────────────────── */ + .ant-tooltip-inner { + background-color: ${(props) => props.theme.colors.bgSurfaceDarker}; + color: ${(props) => props.theme.colors.text}; + } + .ant-tooltip-arrow-content { + background-color: ${(props) => props.theme.colors.bgSurfaceDarker}; + } + + /* ── Segmented ────────────────────────────────────────── */ + .ant-segmented { + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.text}; + } + .ant-segmented-item-selected { + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + } + + /* ── Scrollbar ────────────────────────────────────────── */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + ::-webkit-scrollbar-track { + background: ${(props) => props.theme.colors.scrollbarTrack}; + } + ::-webkit-scrollbar-thumb { + background: ${(props) => props.theme.colors.scrollbarThumb}; + border-radius: 4px; + } + ::-webkit-scrollbar-thumb:hover { + background: ${(props) => props.theme.colors.scrollbarThumbHover}; + } + + /* ── Links ────────────────────────────────────────────── */ + a { + color: ${(props) => props.theme.colors.hyperlinks}; + } +`; + +export default GlobalThemeStyles; diff --git a/datahub-web-react/src/app/analytics/event.ts b/datahub-web-react/src/app/analytics/event.ts index 2fdf65c6987f73..6cdd95d18711c7 100644 --- a/datahub-web-react/src/app/analytics/event.ts +++ b/datahub-web-react/src/app/analytics/event.ts @@ -77,6 +77,8 @@ export enum EventType { ShowStandardHomepageEvent, ShowV2ThemeEvent, RevertV2ThemeEvent, + EnableDarkModeEvent, + DisableDarkModeEvent, CreateGlossaryEntityEvent, CreateDomainEvent, MoveDomainEvent, @@ -617,6 +619,14 @@ export interface RevertV2ThemeEvent extends BaseEvent { type: EventType.RevertV2ThemeEvent; } +export interface EnableDarkModeEvent extends BaseEvent { + type: EventType.EnableDarkModeEvent; +} + +export interface DisableDarkModeEvent extends BaseEvent { + type: EventType.DisableDarkModeEvent; +} + export interface HomePageExploreAllClickEvent extends BaseEvent { type: EventType.HomePageExploreAllClickEvent; } @@ -1424,6 +1434,8 @@ export type Event = | ShowStandardHomepageEvent | ShowV2ThemeEvent | RevertV2ThemeEvent + | EnableDarkModeEvent + | DisableDarkModeEvent | SsoEvent | CreateViewEvent | UpdateViewEvent diff --git a/datahub-web-react/src/app/analyticsDashboard/components/AnalyticsPage.tsx b/datahub-web-react/src/app/analyticsDashboard/components/AnalyticsPage.tsx index ccd17a69051452..412c47b81a3a84 100644 --- a/datahub-web-react/src/app/analyticsDashboard/components/AnalyticsPage.tsx +++ b/datahub-web-react/src/app/analyticsDashboard/components/AnalyticsPage.tsx @@ -6,7 +6,6 @@ import styled from 'styled-components'; import { ChartGroup } from '@app/analyticsDashboard/components/ChartGroup'; import { Highlight } from '@app/analyticsDashboard/components/Highlight'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import filterSearchQuery from '@app/search/utils/filterSearchQuery'; import { Message } from '@app/shared/Message'; import { useIsThemeV2 } from '@app/useIsThemeV2'; @@ -17,14 +16,14 @@ import { useListDomainsQuery } from '@graphql/domain.generated'; import { useGetHighlightsQuery } from '@graphql/highlights.generated'; const PageContainer = styled.div<{ isV2: boolean; $isShowNavBarRedesign?: boolean }>` - background-color: ${(props) => (props.isV2 ? '#fff' : 'inherit')}; + background-color: ${(props) => (props.isV2 ? props.theme.colors.bg : 'inherit')}; ${(props) => props.$isShowNavBarRedesign && ` height: 100%; margin: 5px; overflow: auto; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; `} ${(props) => !props.$isShowNavBarRedesign && @@ -56,7 +55,7 @@ const MetadataAnalyticsPlaceholder = styled.span` margin: 25px; margin-bottom: 50px; font-size: 18px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const DomainSelect = styled(Select)` @@ -69,7 +68,7 @@ const StyledSearchBar = styled(Input)` &&& { margin-left: 10px; border-radius: 70px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; width: 250px; } `; diff --git a/datahub-web-react/src/app/analyticsDashboard/components/ChartCard.tsx b/datahub-web-react/src/app/analyticsDashboard/components/ChartCard.tsx index e975d2ecf92901..77c593f8322e90 100644 --- a/datahub-web-react/src/app/analyticsDashboard/components/ChartCard.tsx +++ b/datahub-web-react/src/app/analyticsDashboard/components/ChartCard.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const ChartCard = styled(Card)<{ $shouldScroll: boolean }>` margin: 12px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; height: 440px; overflow-y: ${(props) => (props.$shouldScroll ? 'scroll' : 'hidden')}; `; diff --git a/datahub-web-react/src/app/analyticsDashboard/components/Highlight.tsx b/datahub-web-react/src/app/analyticsDashboard/components/Highlight.tsx index 7a5797f10146cd..11f2f87314288e 100644 --- a/datahub-web-react/src/app/analyticsDashboard/components/Highlight.tsx +++ b/datahub-web-react/src/app/analyticsDashboard/components/Highlight.tsx @@ -20,7 +20,7 @@ const HighlightCard = styled(Card)` text-align: center; line-height: 0; margin: 10px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; const TitleText = styled(Typography.Text)` diff --git a/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsChart.tsx b/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsChart.tsx index 4157de8b363c1e..c3ecb71c3ebd44 100644 --- a/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsChart.tsx +++ b/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsChart.tsx @@ -4,13 +4,12 @@ import { useTooltip, useTooltipInPortal } from '@visx/tooltip'; import { Axis, BarSeries, BarStack, Grid, Tooltip, XYChart } from '@visx/xychart'; import dayjs from 'dayjs'; import React, { useCallback, useMemo } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { Popover } from '@components/components/Popover'; import { TableChart } from '@app/analyticsDashboardV2/components/TableChart'; import { useAnalyticsChartColors } from '@app/analyticsDashboardV2/hooks/useAnalyticsChartColors'; -import { colors } from '@src/alchemy-components/theme'; import { AnalyticsChart as AnalyticsChartType, BarChart as BarChartType, TimeSeriesChart } from '@types'; @@ -43,7 +42,7 @@ const LegendArea = styled.div` flex-shrink: 0; display: flex; flex-direction: column; - border-top: 1px solid ${colors.gray[200]}; + border-top: 1px solid ${(props) => props.theme.colors.border}; padding-top: 12px; margin-top: 8px; max-height: 80px; @@ -63,22 +62,22 @@ const LegendScrollArea = styled.div` } &::-webkit-scrollbar-track { - background: ${colors.gray[100]}; + background: ${(props) => props.theme.colors.border}; border-radius: 3px; } &::-webkit-scrollbar-thumb { - background: ${colors.gray[300]}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { - background: ${colors.gray[400]}; + background: ${(props) => props.theme.colors.bgSurface}; } /* Firefox scrollbar */ scrollbar-width: thin; - scrollbar-color: ${colors.gray[300]} ${colors.gray[100]}; + scrollbar-color: ${(props) => props.theme.colors.textDisabled} ${(props) => props.theme.colors.border}; `; const LegendItem = styled.div<{ $isSelected?: boolean }>` @@ -91,11 +90,12 @@ const LegendItem = styled.div<{ $isSelected?: boolean }>` transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; - background-color: ${(props) => (props.$isSelected ? colors.violet[100] : 'transparent')}; - border: 1px solid ${(props) => (props.$isSelected ? colors.violet[400] : 'transparent')}; + background-color: ${(props) => (props.$isSelected ? props.theme.colors.bgSurfaceBrandHover : 'transparent')}; + border: 1px solid ${(props) => (props.$isSelected ? props.theme.colors.borderBrandFocused : 'transparent')}; &:hover { - background-color: ${(props) => (props.$isSelected ? colors.violet[100] : colors.gray[50])}; + background-color: ${(props) => + props.$isSelected ? props.theme.colors.bgSurfaceBrandHover : props.theme.colors.bgHover}; } `; @@ -105,27 +105,27 @@ const LegendColorBox = styled.div<{ color: string }>` background-color: ${(props) => props.color}; border-radius: 3px; flex-shrink: 0; - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid ${(props) => props.theme.colors.border}; `; const LegendLabel = styled.span<{ $isSelected?: boolean }>` font-size: 13px; - color: ${colors.gray[700]}; + color: ${(props) => props.theme.colors.textSecondary}; line-height: 1.3; white-space: nowrap; font-weight: ${(props) => (props.$isSelected ? 'bold' : 'normal')}; `; const TooltipContainer = styled.div` - background: white; - color: ${colors.gray[1700]}; + background: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.textSecondary}; padding: 8px 12px; border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 1000; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - border: 1px solid ${colors.gray[300]}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; + border: 1px solid ${(props) => props.theme.colors.border}; `; // Truncate label to max 11 characters total (based on "DATAPRODUCT" fitting perfectly) @@ -142,6 +142,7 @@ type StackedBarChartProps = { }; const StackedBarChartWithTooltip = ({ stackedBarChartData, allSegmentLabels, segmentColors }: StackedBarChartProps) => { + const theme = useTheme(); const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip<{ label: string; value: number; @@ -288,7 +289,7 @@ const StackedBarChartWithTooltip = ({ stackedBarChartData, allSegmentLabels, seg yScale={{ type: 'linear' }} margin={{ top: 20, right: 20, bottom: 80, left: 60 }} > - + { @@ -308,7 +309,7 @@ const StackedBarChartWithTooltip = ({ stackedBarChartData, allSegmentLabels, seg fontSize: 11, fontWeight: isSelected ? 'bold' : 'normal', textDecoration: isSelected ? 'underline' : 'none', - fill: isSelected ? colors.violet[600] : colors.gray[700], + fill: isSelected ? theme.colors.textBrand : theme.colors.textSecondary, onClick: () => handleBarClick(tickValue as number), style: { cursor: 'pointer' }, pointerEvents: 'all', @@ -405,6 +406,7 @@ const StackedBarChartWithTooltip = ({ stackedBarChartData, allSegmentLabels, seg }; export const AnalyticsChart = ({ chartData }: Props) => { + const theme = useTheme(); const isTable = chartData.__typename === 'TableChart'; const isEmpty = useMemo(() => { @@ -536,7 +538,7 @@ export const AnalyticsChart = ({ chartData }: Props) => { angle: -45, textAnchor: 'end', fontSize: 11, - fill: colors.gray[700], + fill: theme.colors.textSecondary, }, }} popoverRenderer={(datum) => { diff --git a/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsPage.tsx b/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsPage.tsx index f9908647bc0aea..7ec856f75ac750 100644 --- a/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsPage.tsx +++ b/datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsPage.tsx @@ -14,14 +14,14 @@ import { useListDomainsQuery } from '@graphql/domain.generated'; import { useGetHighlightsQuery } from '@graphql/highlights.generated'; const PageContainer = styled.div<{ isV2: boolean; $isShowNavBarRedesign?: boolean }>` - background-color: ${(props) => (props.isV2 ? '#fff' : 'inherit')}; + background-color: ${(props) => (props.isV2 ? props.theme.colors.bg : 'inherit')}; ${(props) => props.$isShowNavBarRedesign && ` height: 100%; margin: 5px; overflow: auto; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; `} ${(props) => !props.$isShowNavBarRedesign && @@ -199,7 +199,7 @@ export const AnalyticsPage = () => { {!metadataAnalyticsLoading && (!metadataAnalyticsData?.getMetadataAnalyticsCharts?.length || !metadataAnalyticsData?.getMetadataAnalyticsCharts[0]?.charts?.length) && ( - + No analytics data for this domain )} diff --git a/datahub-web-react/src/app/analyticsDashboardV2/components/ChartCard.tsx b/datahub-web-react/src/app/analyticsDashboardV2/components/ChartCard.tsx index e975d2ecf92901..77c593f8322e90 100644 --- a/datahub-web-react/src/app/analyticsDashboardV2/components/ChartCard.tsx +++ b/datahub-web-react/src/app/analyticsDashboardV2/components/ChartCard.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const ChartCard = styled(Card)<{ $shouldScroll: boolean }>` margin: 12px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; height: 440px; overflow-y: ${(props) => (props.$shouldScroll ? 'scroll' : 'hidden')}; `; diff --git a/datahub-web-react/src/app/applications/ApplicationsTableColumns.tsx b/datahub-web-react/src/app/applications/ApplicationsTableColumns.tsx index 80524806c0134d..7eb1d800a7184f 100644 --- a/datahub-web-react/src/app/applications/ApplicationsTableColumns.tsx +++ b/datahub-web-react/src/app/applications/ApplicationsTableColumns.tsx @@ -1,4 +1,4 @@ -import { Icon, colors, typography } from '@components'; +import { Icon, typography } from '@components'; import { Dropdown } from 'antd'; import React from 'react'; import Highlight from 'react-highlighter'; @@ -12,7 +12,7 @@ import { EntityType, Ownership } from '@src/types.generated'; const ApplicationName = styled.div` font-size: 14px; font-weight: 600; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -25,7 +25,7 @@ const ApplicationName = styled.div` const ApplicationDescription = styled.div` font-size: 14px; font-weight: 400; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; white-space: normal; line-height: 1.4; `; @@ -48,7 +48,7 @@ const MenuItem = styled.div` padding: 5px 70px 5px 5px; font-size: 14px; font-weight: 400; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; font-family: ${typography.fonts.body}; `; @@ -134,8 +134,9 @@ export const ApplicationActionsColumn = React.memo( }, { key: '2', + danger: true, label: ( - + Delete ), diff --git a/datahub-web-react/src/app/applications/ManageApplications.tsx b/datahub-web-react/src/app/applications/ManageApplications.tsx index 92520bd80f5563..675de69520c748 100644 --- a/datahub-web-react/src/app/applications/ManageApplications.tsx +++ b/datahub-web-react/src/app/applications/ManageApplications.tsx @@ -34,7 +34,7 @@ const LoadingBar = styled.div` left: 0; width: 100%; height: 4px; - background-color: #1890ff; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; z-index: 1000; animation: loading 2s infinite ease-in-out; diff --git a/datahub-web-react/src/app/auth/LogIn.tsx b/datahub-web-react/src/app/auth/LogIn.tsx index 15373deb646baf..1e1bd4bc07f8ae 100644 --- a/datahub-web-react/src/app/auth/LogIn.tsx +++ b/datahub-web-react/src/app/auth/LogIn.tsx @@ -22,26 +22,26 @@ const FormInput = styled(Input)` &&& { height: 32px; font-size: 12px; - border: 1px solid #555555; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 5px; background-color: transparent; - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; line-height: 1.5715; } > .ant-input { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 14px; background-color: transparent; } > .ant-input:hover { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 14px; background-color: transparent; } `; const SsoDivider = styled(Divider)` - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const SsoButton = styled(Button)` @@ -125,14 +125,14 @@ export const LogIn: React.VFC = () => { Username} + label={} > } data-testid="username" /> Password} + label={} > } type="password" data-testid="password" /> diff --git a/datahub-web-react/src/app/auth/ResetCredentials.tsx b/datahub-web-react/src/app/auth/ResetCredentials.tsx index bb35ed9740d8bf..ea8414e6dc97f0 100644 --- a/datahub-web-react/src/app/auth/ResetCredentials.tsx +++ b/datahub-web-react/src/app/auth/ResetCredentials.tsx @@ -24,19 +24,19 @@ const FormInput = styled(Input)` &&& { height: 32px; font-size: 12px; - border: 1px solid #555555; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 5px; background-color: transparent; - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; line-height: 1.5715; } > .ant-input { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 14px; background-color: transparent; } > .ant-input:hover { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 14px; background-color: transparent; } @@ -109,8 +109,7 @@ export const ResetCredentials: React.VFC = () => { Email} + label={Email} > } data-testid="email" /> @@ -129,8 +128,7 @@ export const ResetCredentials: React.VFC = () => { }), ]} name="password" - // eslint-disable-next-line jsx-a11y/label-has-associated-control - label={} + label={Password} > } type="password" data-testid="password" /> @@ -147,8 +145,9 @@ export const ResetCredentials: React.VFC = () => { }), ]} name="confirmPassword" - // eslint-disable-next-line jsx-a11y/label-has-associated-control - label={} + label={ + Confirm Password + } > } type="password" data-testid="confirmPassword" /> diff --git a/datahub-web-react/src/app/auth/SignUp.tsx b/datahub-web-react/src/app/auth/SignUp.tsx index 0fb465050f8ab0..327a29f8d6d185 100644 --- a/datahub-web-react/src/app/auth/SignUp.tsx +++ b/datahub-web-react/src/app/auth/SignUp.tsx @@ -28,19 +28,19 @@ const FormInput = styled(Input)` &&& { height: 32px; font-size: 12px; - border: 1px solid #555555; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 5px; background-color: transparent; - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; line-height: 1.5715; } > .ant-input { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 14px; background-color: transparent; } > .ant-input:hover { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 14px; background-color: transparent; } @@ -48,12 +48,12 @@ const FormInput = styled(Input)` const TitleSelector = styled(Select)` .ant-select-selector { - color: white; - border: 1px solid #555555 !important; + color: ${(props) => props.theme.colors.textOnFillDefault}; + border: 1px solid ${(props) => props.theme.colors.border} !important; background-color: transparent !important; } .ant-select-arrow { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; } `; @@ -156,16 +156,14 @@ export const SignUp: React.VFC = () => { Email} + label={Email} > } data-testid="email" /> Full Name} + label={Full Name} > } data-testid="name" /> @@ -184,8 +182,7 @@ export const SignUp: React.VFC = () => { }), ]} name="password" - // eslint-disable-next-line jsx-a11y/label-has-associated-control - label={} + label={Password} > } type="password" data-testid="password" /> @@ -202,16 +199,16 @@ export const SignUp: React.VFC = () => { }), ]} name="confirmPassword" - // eslint-disable-next-line jsx-a11y/label-has-associated-control - label={} + label={ + Confirm Password + } > } type="password" data-testid="confirmPassword" /> Title} + label={Title} > Data Analyst diff --git a/datahub-web-react/src/app/auth/shared/AuthPageContainer.tsx b/datahub-web-react/src/app/auth/shared/AuthPageContainer.tsx index 122ad016052223..e81eea9498c226 100644 --- a/datahub-web-react/src/app/auth/shared/AuthPageContainer.tsx +++ b/datahub-web-react/src/app/auth/shared/AuthPageContainer.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import React from 'react'; import styled from 'styled-components'; @@ -9,7 +8,7 @@ export const VideoWrapper = styled.div` width: 100%; height: 100vh; overflow: hidden; - background-color: ${colors.gray[1600]}; + background-color: ${(props) => props.theme.colors.bgSurfaceNewNav}; `; const BackgroundVideo = styled.video` diff --git a/datahub-web-react/src/app/auth/shared/ModalHeader.tsx b/datahub-web-react/src/app/auth/shared/ModalHeader.tsx index 5828a8ad12c73b..a3b795e98738f8 100644 --- a/datahub-web-react/src/app/auth/shared/ModalHeader.tsx +++ b/datahub-web-react/src/app/auth/shared/ModalHeader.tsx @@ -32,11 +32,11 @@ export default function ModalHeader({ subHeading }: Props) { - + Welcome to Datahub {subHeading && ( - + {subHeading} )} diff --git a/datahub-web-react/src/app/browse/BrowseResultCard.tsx b/datahub-web-react/src/app/browse/BrowseResultCard.tsx index fc248d15637ce3..092ea6e318adec 100644 --- a/datahub-web-react/src/app/browse/BrowseResultCard.tsx +++ b/datahub-web-react/src/app/browse/BrowseResultCard.tsx @@ -13,11 +13,11 @@ const styles = { const ResultCard = styled(Card)` && { - border-color: ${(props) => props.theme.styles['border-color-base']}; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + border-color: ${(props) => props.theme.colors.border}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; } &&:hover { - box-shadow: ${(props) => props.theme.styles['box-shadow-hover']}; + box-shadow: ${(props) => props.theme.colors.shadowMd}; } `; diff --git a/datahub-web-react/src/app/browse/BrowseResults.tsx b/datahub-web-react/src/app/browse/BrowseResults.tsx index 60ff47e18b288f..4139653a996a76 100644 --- a/datahub-web-react/src/app/browse/BrowseResults.tsx +++ b/datahub-web-react/src/app/browse/BrowseResults.tsx @@ -14,8 +14,8 @@ const EntityList = styled(List)` width: 100%; margin-top: 12px; padding: 16px 32px; - border-color: ${(props) => props.theme.styles['border-color-base']}; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + border-color: ${(props) => props.theme.colors.border}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; } `; diff --git a/datahub-web-react/src/app/browse/LegacyBrowsePath.tsx b/datahub-web-react/src/app/browse/LegacyBrowsePath.tsx index 565d69d3b6ff3e..23ef859bc545aa 100644 --- a/datahub-web-react/src/app/browse/LegacyBrowsePath.tsx +++ b/datahub-web-react/src/app/browse/LegacyBrowsePath.tsx @@ -1,4 +1,3 @@ -import { blue, grey } from '@ant-design/colors'; import { Breadcrumb, Row } from 'antd'; import React from 'react'; import { IconBaseProps } from 'react-icons/lib'; @@ -30,9 +29,9 @@ const LineageIconGroup = styled.div` const HoverableVscPreview = styled(({ isSelected: _, ...props }: IconBaseProps & { isSelected: boolean }) => ( ))` - color: ${(props) => (props.isSelected ? 'black' : grey[2])}; + color: ${(props) => (props.isSelected ? props.theme.colors.text : props.theme.colors.textTertiary)}; &:hover { - color: ${(props) => (props.isSelected ? 'black' : blue[4])}; + color: ${(props) => (props.isSelected ? props.theme.colors.text : props.theme.colors.textBrand)}; cursor: pointer; } `; @@ -40,9 +39,9 @@ const HoverableVscPreview = styled(({ isSelected: _, ...props }: IconBaseProps & const HoverableVscRepoForked = styled(({ isSelected: _, ...props }: IconBaseProps & { isSelected: boolean }) => ( ))` - color: ${(props) => (props.isSelected ? 'black' : grey[2])}; + color: ${(props) => (props.isSelected ? props.theme.colors.text : props.theme.colors.textTertiary)}; &:hover { - color: ${(props) => (props.isSelected ? 'black' : blue[4])}; + color: ${(props) => (props.isSelected ? props.theme.colors.text : props.theme.colors.textBrand)}; cursor: pointer; } transform: rotate(90deg); @@ -50,8 +49,8 @@ const HoverableVscRepoForked = styled(({ isSelected: _, ...props }: IconBaseProp const BrowseRow = styled(Row)` padding: 10px 100px; - border-bottom: 1px solid #dcdcdc; - background-color: ${(props) => props.theme.styles['body-background']}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; + background-color: ${(props) => props.theme.colors.bg}; display: flex; justify-content: space-between; `; diff --git a/datahub-web-react/src/app/businessAttribute/AttributeBrowser.tsx b/datahub-web-react/src/app/businessAttribute/AttributeBrowser.tsx index 451ff4f2050fd7..1365b03c5c289f 100644 --- a/datahub-web-react/src/app/businessAttribute/AttributeBrowser.tsx +++ b/datahub-web-react/src/app/businessAttribute/AttributeBrowser.tsx @@ -8,7 +8,7 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; import { ListBusinessAttributesQuery, useListBusinessAttributesQuery } from '@graphql/businessAttribute.generated'; const BrowserWrapper = styled.div` - color: #262626; + color: ${(props) => props.theme.colors.text}; font-size: 12px; max-height: calc(100% - 47px); padding: 10px 20px 20px 20px; diff --git a/datahub-web-react/src/app/businessAttribute/AttributeItem.tsx b/datahub-web-react/src/app/businessAttribute/AttributeItem.tsx index 1b3e3e73a24f87..8d40954f0954e9 100644 --- a/datahub-web-react/src/app/businessAttribute/AttributeItem.tsx +++ b/datahub-web-react/src/app/businessAttribute/AttributeItem.tsx @@ -1,16 +1,16 @@ import React from 'react'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useEntityRegistry } from '@app/useEntityRegistry'; const AttributeWrapper = styled.div` font-weight: normal; margin-bottom: 4px; + color: ${(props) => props.theme.colors.text}; `; const nameStyles = ` - color: #262626; + color: inherit; display: inline-block; height: 100%; padding: 3px 4px; @@ -24,7 +24,7 @@ export const NameWrapper = styled.span<{ showSelectStyles?: boolean }>` ${(props) => props.showSelectStyles && ` - background-color: ${ANTD_GRAY[3]}; + background-color: ${props.theme.colors.bgSurface}; cursor: pointer; `} } diff --git a/datahub-web-react/src/app/businessAttribute/BusinessAttributeItemMenu.tsx b/datahub-web-react/src/app/businessAttribute/BusinessAttributeItemMenu.tsx index 1731f8ce4ffa90..a419937dd92e2c 100644 --- a/datahub-web-react/src/app/businessAttribute/BusinessAttributeItemMenu.tsx +++ b/datahub-web-react/src/app/businessAttribute/BusinessAttributeItemMenu.tsx @@ -54,6 +54,7 @@ export default function BusinessAttributeItemMenu({ title, urn, onDelete }: Prop const items = [ { key: 'delete', + danger: true, label: (  Delete diff --git a/datahub-web-react/src/app/context/ContextDocumentsPage.tsx b/datahub-web-react/src/app/context/ContextDocumentsPage.tsx index 83c041e0987cfb..101ea452a81049 100644 --- a/datahub-web-react/src/app/context/ContextDocumentsPage.tsx +++ b/datahub-web-react/src/app/context/ContextDocumentsPage.tsx @@ -2,14 +2,13 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Result } from 'antd'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { Redirect } from 'react-router-dom'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useContextDocumentsPermissions } from '@app/context/useContextDocumentsPermissions'; import { useDocumentTree } from '@app/document/DocumentTreeContext'; import { useCreateDocumentTreeMutation } from '@app/document/hooks/useDocumentTreeMutations'; import { useLoadDocumentTree } from '@app/document/hooks/useLoadDocumentTree'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { colors } from '@src/alchemy-components'; import { EntityType } from '@types'; @@ -21,9 +20,9 @@ const ContentCard = styled.div` gap: 16px; height: 100%; width: 100%; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: 12px; - box-shadow: 0 0 6px 0px rgba(93, 102, 139, 0.2); + box-shadow: ${(props) => props.theme.colors.shadowSm}; margin: 4px; `; @@ -36,6 +35,7 @@ const ContentCard = styled.div` * 3. If no documents AND user cannot create: show unauthorized/empty state */ export default function ContextDocumentsPage() { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const { getRootNodes } = useDocumentTree(); const { loading: treeLoading } = useLoadDocumentTree(); @@ -105,7 +105,7 @@ export default function ContextDocumentsPage() { if (treeLoading) { return ( - + ); } @@ -114,7 +114,7 @@ export default function ContextDocumentsPage() { if (isCreating) { return ( - + ); } @@ -135,7 +135,7 @@ export default function ContextDocumentsPage() { // Fallback loading state while redirecting return ( - + ); } diff --git a/datahub-web-react/src/app/context/ContextSidebar.tsx b/datahub-web-react/src/app/context/ContextSidebar.tsx index fb51063ab5443b..8fccb10566f49b 100644 --- a/datahub-web-react/src/app/context/ContextSidebar.tsx +++ b/datahub-web-react/src/app/context/ContextSidebar.tsx @@ -9,7 +9,6 @@ import { useContextDocumentsPermissions } from '@app/context/useContextDocuments import { useDocumentTree } from '@app/document/DocumentTreeContext'; import { useCreateDocumentTreeMutation } from '@app/document/hooks/useDocumentTreeMutations'; import { useSearchDocuments } from '@app/document/hooks/useSearchDocuments'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { DocumentTree } from '@app/homeV2/layout/sidebar/documents/DocumentTree'; import { SearchResultItem } from '@app/homeV2/layout/sidebar/documents/SearchResultItem'; import ClickOutside from '@app/shared/ClickOutside'; @@ -32,7 +31,7 @@ const SidebarContainer = styled.div<{ max-height: 100%; width: ${(props) => (props.$isCollapsed ? `${SIDEBAR_COLLAPSED_WIDTH}px` : `${props.$width}px`)}; transition: width ${SIDEBAR_TRANSITION_MS}ms ease-in-out; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'}; display: flex; @@ -42,7 +41,7 @@ const SidebarContainer = styled.div<{ props.$isShowNavBarRedesign && ` margin: ${props.$isEntityProfile ? '5px 0px 6px 5px' : '0px 4px 0px 0px'}; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; `} `; @@ -58,7 +57,7 @@ const HeaderControls = styled.div<{ $isCollapsed: boolean }>` const SidebarTitle = styled.div` font-size: 16px; font-weight: bold; - color: #374066; + color: ${(props) => props.theme.colors.text}; white-space: nowrap; `; @@ -91,24 +90,21 @@ const SearchInputWrapper = styled.div` `; const SearchIcon = styled(SearchOutlined)` - color: ${REDESIGN_COLORS.TEXT_HEADING_SUB_LINK}; + color: ${(props) => props.theme.colors.text}; padding: 16px; width: 100%; font-size: 20px; cursor: pointer; &:hover { - color: ${REDESIGN_COLORS.LINK_HOVER_BLUE}; + color: ${(props) => props.theme.colors.hyperlinks}; } `; const ResultsWrapper = styled.div` - background-color: white; + background-color: ${(props) => props.theme.colors.bg}; border-radius: 5px; - box-shadow: - 0 3px 6px -4px rgb(0 0 0 / 12%), - 0 6px 16px 0 rgb(0 0 0 / 8%), - 0 9px 28px 8px rgb(0 0 0 / 5%); + box-shadow: ${(props) => props.theme.colors.shadowMd}; padding: 8px; position: absolute; max-height: 300px; @@ -129,7 +125,7 @@ const LoadingWrapper = styled(ResultsWrapper)` const EmptyState = styled.div` padding: 16px; text-align: center; - color: ${REDESIGN_COLORS.TEXT_HEADING_SUB_LINK}; + color: ${(props) => props.theme.colors.text}; font-size: 14px; `; @@ -149,16 +145,16 @@ const TreeContainer = styled.div` } &::-webkit-scrollbar-thumb { - background: #a9adbd; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { - background: #81879f; + background: ${(props) => props.theme.colors.bgSurface}; } scrollbar-width: thin; - scrollbar-color: #a9adbd transparent; + scrollbar-color: ${(props) => props.theme.colors.textDisabled} transparent; `; type Props = { diff --git a/datahub-web-react/src/app/dataviz/ChartCard.tsx b/datahub-web-react/src/app/dataviz/ChartCard.tsx index 033797dbd0dbd8..b2d11470df566b 100644 --- a/datahub-web-react/src/app/dataviz/ChartCard.tsx +++ b/datahub-web-react/src/app/dataviz/ChartCard.tsx @@ -2,18 +2,16 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Card = styled.div` display: flex; flex-direction: column; padding: 1rem; - background-color: white; - box-shadow: 0px 3px 6px 0px ${ANTD_GRAY[5]}; + background-color: ${(props) => props.theme.colors.bgSurface}; + box-shadow: 0px 3px 6px 0px ${(props) => props.theme.colors.border}; border-radius: 8px; text { - fill: ${ANTD_GRAY[8]}; + fill: ${(props) => props.theme.colors.textSecondary}; font-weight: 400 !important; } `; @@ -35,7 +33,7 @@ const Heading = styled(Typography.Text)` display: block; font-size: 14px;s font-weight: 600; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; min-width: 300px; `; diff --git a/datahub-web-react/src/app/dataviz/components.ts b/datahub-web-react/src/app/dataviz/components.ts index 9be7476522ce17..b3eb1981c3ab0d 100644 --- a/datahub-web-react/src/app/dataviz/components.ts +++ b/datahub-web-react/src/app/dataviz/components.ts @@ -12,7 +12,7 @@ export const ChartWrapper = styled.div` } .horizontalBarChartInlineLabel { - fill: #fff; + fill: ${(props) => props.theme.colors.bg}; font-weight: 600; font-family: 'Manrope', sans-serif; } diff --git a/datahub-web-react/src/app/domain/CreateDomainModal.tsx b/datahub-web-react/src/app/domain/CreateDomainModal.tsx index 5d832bda067937..62794945006196 100644 --- a/datahub-web-react/src/app/domain/CreateDomainModal.tsx +++ b/datahub-web-react/src/app/domain/CreateDomainModal.tsx @@ -37,11 +37,11 @@ const FormItemNoMargin = styled(FormItem)` const FormItemLabel = styled(Typography.Text)` font-weight: 600; - color: #373d44; + color: ${(props) => props.theme.colors.text}; `; const AdvancedLabel = styled(Typography.Text)` - color: #373d44; + color: ${(props) => props.theme.colors.text}; `; type Props = { diff --git a/datahub-web-react/src/app/domain/DomainItemMenu.tsx b/datahub-web-react/src/app/domain/DomainItemMenu.tsx index 99ccd357b0cabc..d844f364957c8c 100644 --- a/datahub-web-react/src/app/domain/DomainItemMenu.tsx +++ b/datahub-web-react/src/app/domain/DomainItemMenu.tsx @@ -53,6 +53,7 @@ export default function DomainItemMenu({ name, urn, onDelete }: Props) { const items = [ { key: 0, + danger: true, label: (  Delete diff --git a/datahub-web-react/src/app/domain/DomainSearch.tsx b/datahub-web-react/src/app/domain/DomainSearch.tsx index 975e7d3aac7f9c..f4336569a3a243 100644 --- a/datahub-web-react/src/app/domain/DomainSearch.tsx +++ b/datahub-web-react/src/app/domain/DomainSearch.tsx @@ -15,12 +15,9 @@ const DomainSearchWrapper = styled.div` `; const ResultsWrapper = styled.div` - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 5px; - box-shadow: - 0 3px 6px -4px rgb(0 0 0 / 12%), - 0 6px 16px 0 rgb(0 0 0 / 8%), - 0 9px 28px 8px rgb(0 0 0 / 5%); + box-shadow: ${(props) => props.theme.colors.shadowMd}; max-height: 380px; overflow: auto; padding: 8px; diff --git a/datahub-web-react/src/app/domain/DomainSearchResultItem.tsx b/datahub-web-react/src/app/domain/DomainSearchResultItem.tsx index 96e92ce525d9d6..8f3ae8bded7549 100644 --- a/datahub-web-react/src/app/domain/DomainSearchResultItem.tsx +++ b/datahub-web-react/src/app/domain/DomainSearchResultItem.tsx @@ -2,13 +2,12 @@ import React from 'react'; import Highlight from 'react-highlighter'; import { Link } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import DomainIcon from '@app/domain/DomainIcon'; import { getParentDomains } from '@app/domain/utils'; import { IconStyleType } from '@app/entity/Entity'; import EntityRegistry from '@app/entity/EntityRegistry'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import ParentEntities from '@app/search/filters/ParentEntities'; import { Entity, EntityType } from '@types'; @@ -21,7 +20,7 @@ type Props = { }; const SearchResult = styled(Link)` - color: #262626; + color: ${(props) => props.theme.colors.text}; display: flex; align-items: center; gap: 8px; @@ -29,8 +28,8 @@ const SearchResult = styled(Link)` padding: 6px 8px; width: 100%; &:hover { - background-color: ${ANTD_GRAY[3]}; - color: #262626; + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.text}; } `; @@ -43,6 +42,7 @@ const highlightMatchStyle = { }; function DomainSearchResultItem({ entity, entityRegistry, query, onResultClick }: Props) { + const theme = useTheme(); return ( @@ -50,7 +50,7 @@ function DomainSearchResultItem({ entity, entityRegistry, query, onResultClick } ) : ( diff --git a/datahub-web-react/src/app/domain/DomainsList.tsx b/datahub-web-react/src/app/domain/DomainsList.tsx index 4d786530ec3aae..96e46a314db939 100644 --- a/datahub-web-react/src/app/domain/DomainsList.tsx +++ b/datahub-web-react/src/app/domain/DomainsList.tsx @@ -4,7 +4,7 @@ import * as QueryString from 'query-string'; import { AlignType } from 'rc-table/lib/interface'; import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import CreateDomainModal from '@app/domain/CreateDomainModal'; import DomainIcon from '@app/domain/DomainIcon'; @@ -31,7 +31,7 @@ export const DomainsPaginationContainer = styled.div` padding: 12px; padding-left: 16px; border-bottom: 1px solid; - border-color: ${(props) => props.theme.styles['border-color-base']}; + border-color: ${(props) => props.theme.colors.border}; display: flex; justify-content: space-between; align-items: center; @@ -45,6 +45,7 @@ const DEFAULT_PAGE_SIZE = 25; export const DomainsList = () => { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const location = useLocation(); const params = QueryString.parse(location.search, { arrayFormat: 'comma' }); const paramsQuery = (params?.query as string) || undefined; @@ -96,7 +97,7 @@ export const DomainsList = () => { , ), diff --git a/datahub-web-react/src/app/domain/EmptyDomainDescription.tsx b/datahub-web-react/src/app/domain/EmptyDomainDescription.tsx index b232aa3780c7c5..785816c5dd06df 100644 --- a/datahub-web-react/src/app/domain/EmptyDomainDescription.tsx +++ b/datahub-web-react/src/app/domain/EmptyDomainDescription.tsx @@ -1,8 +1,6 @@ import { Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components/macro'; - -import { ANTD_GRAY } from '@app/entity/shared/constants'; +import styled, { useTheme } from 'styled-components/macro'; const StyledParagraph = styled(Typography.Paragraph)` text-align: justify; @@ -12,22 +10,24 @@ const StyledParagraph = styled(Typography.Paragraph)` `; function EmptyDomainDescription() { + const theme = useTheme(); return ( <> - Welcome to your Data Domains! It looks like this space - is ready to be transformed into a well-organized data universe. Start by creating your first domain - a - high-level category for your data assets. + Welcome to your Data Domains! It looks + like this space is ready to be transformed into a well-organized data universe. Start by creating your + first domain - a high-level category for your data assets. - Create Nested Domains: Want to dive deeper? You can - also create nested domains to add granularity and structure. Just like nesting Russian dolls, its all - about refining your organization. + Create Nested Domains: Want to dive + deeper? You can also create nested domains to add granularity and structure. Just like nesting Russian + dolls, its all about refining your organization. - Build Data Products: Once your domains are set, go a - step further! Organize your data assets into data products to realize a data mesh architecture. Data - products empower you to treat data as a product, making it more accessible and manageable. + Build Data Products: Once your domains + are set, go a step further! Organize your data assets into data products to realize a data mesh + architecture. Data products empower you to treat data as a product, making it more accessible and + manageable. Ready to embark on this data adventure? Click the Create Domain button to begin shaping your data diff --git a/datahub-web-react/src/app/domain/EmptyDomainsSection.tsx b/datahub-web-react/src/app/domain/EmptyDomainsSection.tsx index cffde970b4749e..0ba3018c597f69 100644 --- a/datahub-web-react/src/app/domain/EmptyDomainsSection.tsx +++ b/datahub-web-react/src/app/domain/EmptyDomainsSection.tsx @@ -3,8 +3,6 @@ import { Button, Empty, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const EmptyDomainContainer = styled.div` display: flex; justify-content: center; @@ -21,7 +19,7 @@ const StyledEmpty = styled(Empty)` max-height: 75vh; &::-webkit-scrollbar { width: 5px; - background: #d6d6d6; + background: ${(props) => props.theme.colors.bgSurface}; } } padding: 60px 40px; @@ -35,7 +33,7 @@ const StyledButton = styled(Button)` `; const IconContainer = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 40px; `; diff --git a/datahub-web-react/src/app/domain/nestedDomains/DomainsSidebarHeader.tsx b/datahub-web-react/src/app/domain/nestedDomains/DomainsSidebarHeader.tsx index 7e723e31837d1d..2b319af48ae036 100644 --- a/datahub-web-react/src/app/domain/nestedDomains/DomainsSidebarHeader.tsx +++ b/datahub-web-react/src/app/domain/nestedDomains/DomainsSidebarHeader.tsx @@ -9,11 +9,10 @@ import CreateDomainModal from '@app/domain/CreateDomainModal'; import { useDomainsContext } from '@app/domain/DomainsContext'; import DomainsTitle from '@app/domain/nestedDomains/DomainsTitle'; import { updateListDomainsCache } from '@app/domain/utils'; -import { ANTD_GRAY, ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { PageRoutes } from '@conf/Global'; const HeaderWrapper = styled.div` - border-bottom: 1px solid ${ANTD_GRAY[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.bgSurface}; padding: 16px; font-size: 20px; display: flex; @@ -23,7 +22,7 @@ const HeaderWrapper = styled.div` const StyledButton = styled(Button)` box-shadow: none; - border-color: ${ANTD_GRAY_V2[6]}; + border-color: ${(props) => props.theme.colors.border}; `; const StyledLink = styled(Link)` diff --git a/datahub-web-react/src/app/domain/nestedDomains/ManageDomainsPageV2.tsx b/datahub-web-react/src/app/domain/nestedDomains/ManageDomainsPageV2.tsx index 3d7d3187f515c3..7558d599e02e7a 100644 --- a/datahub-web-react/src/app/domain/nestedDomains/ManageDomainsPageV2.tsx +++ b/datahub-web-react/src/app/domain/nestedDomains/ManageDomainsPageV2.tsx @@ -9,12 +9,11 @@ import { useDomainsContext } from '@app/domain/DomainsContext'; import DomainsTitle from '@app/domain/nestedDomains/DomainsTitle'; import RootDomains from '@app/domain/nestedDomains/RootDomains'; import { updateListDomainsCache } from '@app/domain/utils'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { OnboardingTour } from '@app/onboarding/OnboardingTour'; import { DOMAINS_CREATE_DOMAIN_ID, DOMAINS_INTRO_ID } from '@app/onboarding/config/DomainsOnboardingConfig'; const PageWrapper = styled.div` - background-color: ${ANTD_GRAY_V2[1]}; + background-color: ${(props) => props.theme.colors.bgSurface}; flex: 1; display: flex; flex-direction: column; diff --git a/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx b/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx index ee38655dbc3576..0c8284642549d4 100644 --- a/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx +++ b/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNavigator.tsx @@ -1,10 +1,9 @@ import { Alert, Empty } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import DomainNode from '@app/domain/nestedDomains/domainNavigator/DomainNode'; import useListDomains from '@app/domain/useListDomains'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Domain } from '@types'; @@ -23,6 +22,7 @@ interface Props { export default function DomainNavigator({ domainUrnToHide, selectDomainOverride, displayDomainColoredIcon }: Props) { const { sortedDomains, error } = useListDomains({}); + const theme = useTheme(); const noDomainsFound: boolean = !sortedDomains || sortedDomains.length === 0; return ( @@ -32,7 +32,7 @@ export default function DomainNavigator({ domainUrnToHide, selectDomainOverride, )} {!noDomainsFound && diff --git a/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx b/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx index c9b6e90c62dedb..b650707dee414e 100644 --- a/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx +++ b/datahub-web-react/src/app/domain/nestedDomains/domainNavigator/DomainNode.tsx @@ -7,11 +7,9 @@ import DomainIcon from '@app/domain/DomainIcon'; import { useDomainsContext } from '@app/domain/DomainsContext'; import useHasDomainChildren from '@app/domain/nestedDomains/domainNavigator/useHasDomainChildren'; import useListDomains from '@app/domain/useListDomains'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import { BodyContainer, BodyGridExpander } from '@app/shared/components'; import { RotatingTriangle } from '@app/shared/sidebar/components'; -import { applyOpacity } from '@app/shared/styleUtils'; import useToggle from '@app/shared/useToggle'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -28,12 +26,11 @@ const NameWrapper = styled(Typography.Text)<{ isSelected: boolean; addLeftPaddin flex: 1; overflow: hidden; padding: 2px; - ${(props) => - props.isSelected && `background-color: ${applyOpacity(props.theme.styles['primary-color'] || '', 10)};`} + ${(props) => props.isSelected && `background-color: ${props.theme.colors.bgSelected};`} ${(props) => props.addLeftPadding && 'padding-left: 22px;'} &:hover { - ${(props) => !props.isSelected && `background-color: ${ANTD_GRAY_V2[1]};`} + ${(props) => !props.isSelected && `background-color: ${props.theme.colors.bgSurface};`} cursor: pointer; } diff --git a/datahub-web-react/src/app/domainV2/DomainAutocompleteOptions.tsx b/datahub-web-react/src/app/domainV2/DomainAutocompleteOptions.tsx index 6d896f3c70aeb1..72d98b630c789b 100644 --- a/datahub-web-react/src/app/domainV2/DomainAutocompleteOptions.tsx +++ b/datahub-web-react/src/app/domainV2/DomainAutocompleteOptions.tsx @@ -4,7 +4,6 @@ import styled from 'styled-components'; import { getParentDomains } from '@app/domain/utils'; import EntityRegistry from '@app/entity/EntityRegistry'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import ParentEntities from '@app/search/filters/ParentEntities'; @@ -18,7 +17,7 @@ const LoadingWrapper = styled.div` svg { height: 15px; width: 15px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; } `; const LabelWrapper = styled.div` diff --git a/datahub-web-react/src/app/domainV2/DomainItemMenu.tsx b/datahub-web-react/src/app/domainV2/DomainItemMenu.tsx index 3fd138d977cc82..16a49c8023378b 100644 --- a/datahub-web-react/src/app/domainV2/DomainItemMenu.tsx +++ b/datahub-web-react/src/app/domainV2/DomainItemMenu.tsx @@ -45,7 +45,7 @@ export default function DomainItemMenu({ name, urn, onDelete }: Props) { trigger={['click']} overlay={ - setShowDeleteModal(true)} key="delete"> + setShowDeleteModal(true)} key="delete" danger>  Delete diff --git a/datahub-web-react/src/app/domainV2/DomainSearch.tsx b/datahub-web-react/src/app/domainV2/DomainSearch.tsx index 77e052e5c0ae18..cefc97f5749db1 100644 --- a/datahub-web-react/src/app/domainV2/DomainSearch.tsx +++ b/datahub-web-react/src/app/domainV2/DomainSearch.tsx @@ -5,7 +5,6 @@ import { useDebounce } from 'react-use'; import styled from 'styled-components/macro'; import DomainSearchResultItem from '@app/domainV2/DomainSearchResultItem'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import ClickOutside from '@app/shared/ClickOutside'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -18,12 +17,9 @@ const DomainSearchWrapper = styled.div` `; const ResultsWrapper = styled.div` - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 5px; - box-shadow: - 0 3px 6px -4px rgb(0 0 0 / 12%), - 0 6px 16px 0 rgb(0 0 0 / 8%), - 0 9px 28px 8px rgb(0 0 0 / 5%); + box-shadow: ${(props) => props.theme.colors.shadowMd}; padding: 8px; position: absolute; max-height: 210px; @@ -46,7 +42,7 @@ const InputWrapper = styled.div` `; const SearchIcon = styled(SearchOutlined)` - color: ${REDESIGN_COLORS.TEXT_HEADING_SUB_LINK}; + color: ${(props) => props.theme.colors.text}; padding: 16px; width: 100%; font-size: 20px; diff --git a/datahub-web-react/src/app/domainV2/DomainSearchResultItem.tsx b/datahub-web-react/src/app/domainV2/DomainSearchResultItem.tsx index ebfadeb1d6e9c0..6927fd0f2eb154 100644 --- a/datahub-web-react/src/app/domainV2/DomainSearchResultItem.tsx +++ b/datahub-web-react/src/app/domainV2/DomainSearchResultItem.tsx @@ -7,10 +7,8 @@ import styled from 'styled-components/macro'; import { getParentDomains } from '@app/domainV2/utils'; import { IconStyleType } from '@app/entity/Entity'; import EntityRegistry from '@app/entity/EntityRegistry'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import ParentEntities from '@app/search/filters/ParentEntities'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { Domain, Entity, EntityType } from '@types'; @@ -22,7 +20,7 @@ type Props = { }; const SearchResult = styled(Link)` - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; display: flex; align-items: center; gap: 8px; @@ -30,8 +28,8 @@ const SearchResult = styled(Link)` padding: 6px 8px; width: 100%; &:hover { - background-color: ${ANTD_GRAY[3]}; - color: #262626; + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.text}; } `; @@ -45,14 +43,12 @@ const ContentWrapper = styled.div` const IconWrapper = styled.span``; -const highlightMatchStyle = { - fontWeight: 'bold', - background: 'none', - padding: 0, - color: colors.gray[600], -}; - function DomainSearchResultItem({ entity, entityRegistry, query, onResultClick }: Props) { + const highlightMatchStyle = { + fontWeight: 'bold', + background: 'none', + padding: 0, + }; return ( diff --git a/datahub-web-react/src/app/domainV2/DomainsList.tsx b/datahub-web-react/src/app/domainV2/DomainsList.tsx index 38835f2c83c006..bed2f0cc7e5ff2 100644 --- a/datahub-web-react/src/app/domainV2/DomainsList.tsx +++ b/datahub-web-react/src/app/domainV2/DomainsList.tsx @@ -4,7 +4,7 @@ import * as QueryString from 'query-string'; import { AlignType } from 'rc-table/lib/interface'; import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import CreateDomainModal from '@app/domainV2/CreateDomainModal'; import DomainIcon from '@app/domainV2/DomainIcon'; @@ -44,6 +44,7 @@ const DEFAULT_PAGE_SIZE = 25; export const DomainsList = () => { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const location = useLocation(); const params = QueryString.parse(location.search, { arrayFormat: 'comma' }); const paramsQuery = (params?.query as string) || undefined; @@ -95,7 +96,7 @@ export const DomainsList = () => { , ), diff --git a/datahub-web-react/src/app/domainV2/EmptyDomainDescription.tsx b/datahub-web-react/src/app/domainV2/EmptyDomainDescription.tsx index b232aa3780c7c5..785816c5dd06df 100644 --- a/datahub-web-react/src/app/domainV2/EmptyDomainDescription.tsx +++ b/datahub-web-react/src/app/domainV2/EmptyDomainDescription.tsx @@ -1,8 +1,6 @@ import { Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components/macro'; - -import { ANTD_GRAY } from '@app/entity/shared/constants'; +import styled, { useTheme } from 'styled-components/macro'; const StyledParagraph = styled(Typography.Paragraph)` text-align: justify; @@ -12,22 +10,24 @@ const StyledParagraph = styled(Typography.Paragraph)` `; function EmptyDomainDescription() { + const theme = useTheme(); return ( <> - Welcome to your Data Domains! It looks like this space - is ready to be transformed into a well-organized data universe. Start by creating your first domain - a - high-level category for your data assets. + Welcome to your Data Domains! It looks + like this space is ready to be transformed into a well-organized data universe. Start by creating your + first domain - a high-level category for your data assets. - Create Nested Domains: Want to dive deeper? You can - also create nested domains to add granularity and structure. Just like nesting Russian dolls, its all - about refining your organization. + Create Nested Domains: Want to dive + deeper? You can also create nested domains to add granularity and structure. Just like nesting Russian + dolls, its all about refining your organization. - Build Data Products: Once your domains are set, go a - step further! Organize your data assets into data products to realize a data mesh architecture. Data - products empower you to treat data as a product, making it more accessible and manageable. + Build Data Products: Once your domains + are set, go a step further! Organize your data assets into data products to realize a data mesh + architecture. Data products empower you to treat data as a product, making it more accessible and + manageable. Ready to embark on this data adventure? Click the Create Domain button to begin shaping your data diff --git a/datahub-web-react/src/app/domainV2/EmptyDomainsSection.tsx b/datahub-web-react/src/app/domainV2/EmptyDomainsSection.tsx index 1a3a2869ad29d5..4eca7dc640ec84 100644 --- a/datahub-web-react/src/app/domainV2/EmptyDomainsSection.tsx +++ b/datahub-web-react/src/app/domainV2/EmptyDomainsSection.tsx @@ -3,8 +3,6 @@ import { Button, Empty, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const EmptyDomainContainer = styled.div` display: flex; justify-content: center; @@ -21,7 +19,7 @@ const StyledEmpty = styled(Empty)` max-height: 75vh; &::-webkit-scrollbar { width: 5px; - background: #d6d6d6; + background: ${(props) => props.theme.colors.bgSurface}; } } padding: 20px; @@ -35,7 +33,7 @@ const StyledButton = styled(Button)` `; const IconContainer = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 40px; `; diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/DomainsSidebarHeader.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/DomainsSidebarHeader.tsx index 953fe424606431..f9f1dd65b4d78c 100644 --- a/datahub-web-react/src/app/domainV2/nestedDomains/DomainsSidebarHeader.tsx +++ b/datahub-web-react/src/app/domainV2/nestedDomains/DomainsSidebarHeader.tsx @@ -15,7 +15,7 @@ const Wrapper = styled.div` const DomainTitle = styled.div` font-size: 16px; font-weight: bold; - color: #374066; + color: ${(props) => props.theme.colors.text}; `; const StyledButton = styled(Button)` diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx index 142af3cb5a04de..639ea85838aaf4 100644 --- a/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx +++ b/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsPageV2.tsx @@ -12,7 +12,7 @@ import { PageTitle } from '@src/alchemy-components/components/PageTitle'; import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign'; const PageWrapper = styled.div<{ $isShowNavBarRedesign?: boolean }>` - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; flex: 1; display: flex; flex-direction: column; @@ -20,7 +20,7 @@ const PageWrapper = styled.div<{ $isShowNavBarRedesign?: boolean }>` border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'}; margin-left: ${(props) => (props.$isShowNavBarRedesign ? '0' : '12px')}; - ${(props) => props.$isShowNavBarRedesign && `box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']};`} + ${(props) => props.$isShowNavBarRedesign && `box-shadow: ${props.theme.colors.shadowSm};`} `; const Header = styled.div` diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsSidebar.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsSidebar.tsx index 06b8176b45966d..3c2190286e3c2e 100644 --- a/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsSidebar.tsx +++ b/datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsSidebar.tsx @@ -26,7 +26,7 @@ const StyledEntitySidebarContainer = styled.div<{ margin-bottom: ${(props) => (props.$isShowNavBarRedesign ? '0' : '12px')}; transition: width ${PLATFORM_BROWSE_TRANSITION_MS}ms ease-in-out; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'}; display: flex; @@ -35,7 +35,7 @@ const StyledEntitySidebarContainer = styled.div<{ props.$isShowNavBarRedesign && ` margin: ${props.$isEntityProfile ? '5px 12px 5px 5px' : '0 16px 0 0'}; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; `} `; diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/RootDomains.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/RootDomains.tsx index 9b9fb46ab186d5..ce21f55b890edc 100644 --- a/datahub-web-react/src/app/domainV2/nestedDomains/RootDomains.tsx +++ b/datahub-web-react/src/app/domainV2/nestedDomains/RootDomains.tsx @@ -22,11 +22,11 @@ const ResultWrapper = styled.div` margin-bottom: 12px; display: flex; align-items: center; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: 12px; overflow: hidden; - box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07); - border: 1px solid #ebecf0; + box-shadow: ${(props) => props.theme.colors.shadowXs}; + border: 1px solid ${(props) => props.theme.colors.border}; `; const LoadingWrapper = styled.div` diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNavigator.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNavigator.tsx index fda9a0b638de93..6caee29c519934 100644 --- a/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNavigator.tsx +++ b/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNavigator.tsx @@ -1,11 +1,10 @@ import { Alert, Empty } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import DomainNode from '@app/domainV2/nestedDomains/domainNavigator/DomainNode'; import { DomainNavigatorVariant } from '@app/domainV2/nestedDomains/types'; import useScrollDomains from '@app/domainV2/useScrollDomains'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import Loading from '@app/shared/Loading'; import { Domain } from '@types'; @@ -36,6 +35,7 @@ export default function DomainNavigator({ variant = 'select', }: Props) { const { domains, hasInitialized, loading, error, scrollRef } = useScrollDomains({}); + const theme = useTheme(); return ( @@ -44,7 +44,7 @@ export default function DomainNavigator({ )} {domains?.map((domain) => ( diff --git a/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNode.tsx b/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNode.tsx index 010c00a1f05581..4664e434e2337c 100644 --- a/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNode.tsx +++ b/datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNode.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components'; import { useDomainsContext as useDomainsContextV2 } from '@app/domainV2/DomainsContext'; import { DomainNavigatorVariant } from '@app/domainV2/nestedDomains/types'; import useScrollDomains from '@app/domainV2/useScrollDomains'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import Loading from '@app/shared/Loading'; import { BodyContainer, BodyGridExpander } from '@app/shared/components'; @@ -20,7 +19,7 @@ import { Domain } from '@types'; const NameWrapper = styled(Typography.Text)<{ $isSelected: boolean; $addLeftPadding: boolean }>` flex: 1; padding: 2px; - ${(props) => props.$isSelected && `color: ${props.theme.styles['primary-color']};`} + ${(props) => props.$isSelected && `color: ${props.theme.colors.textSelected};`} ${(props) => props.$addLeftPadding && 'padding-left: 22px;'} &:hover { @@ -37,7 +36,7 @@ const DisplayName = styled.span<{ $isSelected: boolean }>` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color: ${(props) => (props.$isSelected ? props.theme.styles['primary-color'] : REDESIGN_COLORS.BODY_TEXT_GREY)}; + color: ${(props) => (props.$isSelected ? props.theme.colors.textSelected : props.theme.colors.textSecondary)}; `; const ButtonWrapper = styled.span<{ $addLeftPadding: boolean; $isSelected: boolean }>` @@ -47,7 +46,7 @@ const ButtonWrapper = styled.span<{ $addLeftPadding: boolean; $isSelected: boole svg { font-size: 16px !important; color: ${(props) => - props.$isSelected ? props.theme.styles['primary-color'] : REDESIGN_COLORS.BODY_TEXT_GREY} !important; + props.$isSelected ? props.theme.colors.iconBrand : props.theme.colors.textSecondary} !important; } .ant-btn { @@ -60,27 +59,26 @@ const RowWrapper = styled.div<{ $isSelected: boolean; isOpen?: boolean; $variant align-items: center; display: flex; width: 100%; - border-bottom: ${({ $variant }) => - $variant === 'select' ? 'none' : `1px solid ${REDESIGN_COLORS.COLD_GREY_TEXT_BLUE_1}`}; + border-bottom: ${(props) => (props.$variant === 'select' ? 'none' : `1px solid ${props.theme.colors.border}`)}; padding: ${({ $variant }) => ($variant === 'select' ? '6px' : '12px')}; - ${(props) => props.isOpen && `background-color: ${REDESIGN_COLORS.SECTION_BACKGROUND};`} - ${(props) => props.$isSelected && `background-color: ${REDESIGN_COLORS.LIGHT_TEXT_DARK_BACKGROUND};`} + ${(props) => props.isOpen && `background-color: ${props.theme.colors.bgSurface};`} + ${(props) => props.$isSelected && `background-color: ${props.theme.colors.bgSurfaceBrand};`} &:hover { - background-color: ${REDESIGN_COLORS.COLD_GREY_TEXT_BLUE_1}; + background-color: ${(props) => props.theme.colors.bgHover}; ${ButtonWrapper} { svg { - color: ${(props) => props.theme.styles['primary-color']} !important; + color: ${(props) => props.theme.colors.iconBrand} !important; } } ${DisplayName} { - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textHover}; } } `; const StyledExpander = styled(BodyGridExpander)<{ paddingLeft: number }>` padding-left: 0px; - background: ${REDESIGN_COLORS.SECTION_BACKGROUND}; + background: ${(props) => props.theme.colors.bgSurface}; display: flex; width: 100%; overflow: auto; diff --git a/datahub-web-react/src/app/entity/Access/RoleEntity.tsx b/datahub-web-react/src/app/entity/Access/RoleEntity.tsx index 5f9c7d8f51a3f1..72834d352f5975 100644 --- a/datahub-web-react/src/app/entity/Access/RoleEntity.tsx +++ b/datahub-web-react/src/app/entity/Access/RoleEntity.tsx @@ -26,14 +26,14 @@ export class RoleEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/Access/RoleEntityProfile.tsx b/datahub-web-react/src/app/entity/Access/RoleEntityProfile.tsx index 0d75fcc833da4e..1e61c4d3fab6f4 100644 --- a/datahub-web-react/src/app/entity/Access/RoleEntityProfile.tsx +++ b/datahub-web-react/src/app/entity/Access/RoleEntityProfile.tsx @@ -1,4 +1,3 @@ -import { grey } from '@ant-design/colors'; import { Divider, Typography } from 'antd'; import React from 'react'; import { useParams } from 'react-router'; @@ -23,7 +22,7 @@ type RolePageParams = { const TitleLabel = styled(Typography.Text)` &&& { - color: ${grey[2]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 12px; display: block; line-height: 20px; @@ -37,13 +36,13 @@ const DescriptionLabel = styled(Typography.Text)` font-weight: bold; font-size: 14px; line-height: 28px; - color: rgb(38, 38, 38); + color: ${(props) => props.theme.colors.text}; } `; const TitleText = styled(Typography.Text)` &&& { - color: ${grey[10]}; + color: ${(props) => props.theme.colors.text}; font-weight: 700; font-size: 20px; line-height: 28px; diff --git a/datahub-web-react/src/app/entity/application/ApplicationEntity.tsx b/datahub-web-react/src/app/entity/application/ApplicationEntity.tsx index 78192f50277411..6186ee3591ec80 100644 --- a/datahub-web-react/src/app/entity/application/ApplicationEntity.tsx +++ b/datahub-web-react/src/app/entity/application/ApplicationEntity.tsx @@ -53,7 +53,10 @@ export class ApplicationEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } @@ -68,7 +71,7 @@ export class ApplicationEntity implements Entity { className={TYPE_ICON_CLASS_NAME} style={{ fontSize, - color: color || '#BFBFBF', + color: color || 'var(--theme-icon, #BFBFBF)', }} /> ); diff --git a/datahub-web-react/src/app/entity/businessAttribute/BusinessAttributeEntity.tsx b/datahub-web-react/src/app/entity/businessAttribute/BusinessAttributeEntity.tsx index d2cad8f094c425..986a9f624618fd 100644 --- a/datahub-web-react/src/app/entity/businessAttribute/BusinessAttributeEntity.tsx +++ b/datahub-web-react/src/app/entity/businessAttribute/BusinessAttributeEntity.tsx @@ -31,7 +31,7 @@ export class BusinessAttributeEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -45,7 +45,7 @@ export class BusinessAttributeEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/chart/ChartEntity.tsx b/datahub-web-react/src/app/entity/chart/ChartEntity.tsx index f8876718039620..14cbe1b8107379 100644 --- a/datahub-web-react/src/app/entity/chart/ChartEntity.tsx +++ b/datahub-web-react/src/app/entity/chart/ChartEntity.tsx @@ -44,7 +44,7 @@ export class ChartEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -57,7 +57,7 @@ export class ChartEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/chart/ChartQueryTab.tsx b/datahub-web-react/src/app/entity/chart/ChartQueryTab.tsx index 02bd34aa1d2ffc..224ee840b8c741 100644 --- a/datahub-web-react/src/app/entity/chart/ChartQueryTab.tsx +++ b/datahub-web-react/src/app/entity/chart/ChartQueryTab.tsx @@ -5,12 +5,11 @@ import styled from 'styled-components'; import { useBaseEntity } from '@app/entity/shared/EntityContext'; import { InfoItem } from '@app/entity/shared/components/styled/InfoItem'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { GetChartQuery } from '@graphql/chart.generated'; const InfoSection = styled.div` - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; padding: 16px 20px; `; @@ -27,7 +26,7 @@ const InfoItemContent = styled.div` const QueryText = styled(Typography.Paragraph)` margin-top: 20px; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; `; // NOTE: Yes, using `!important` is a shame. However, the SyntaxHighlighter is applying styles directly diff --git a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx index d5cf88b4a848d9..88698ba53fe7d1 100644 --- a/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx @@ -1,21 +1,20 @@ import { ClockCircleOutlined, EyeOutlined, QuestionCircleOutlined, TeamOutlined } from '@ant-design/icons'; import { Popover, Tooltip } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import ExpandingStat from '@app/entity/dataset/shared/ExpandingStat'; import { StatsSummary } from '@app/entity/shared/components/styled/StatsSummary'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; import { toLocalDateTimeString, toRelativeTimeString } from '@app/shared/time/timeUtils'; import { countFormatter, needsFormatting } from '@utils/formatter'; const StatText = styled.span` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-left: 4px; `; @@ -34,12 +33,13 @@ export const ChartStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { + const theme = useTheme(); const statsViews = [ (!!chartCount && ( ( - + {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} charts @@ -49,14 +49,14 @@ export const ChartStatsSummary = ({ undefined, (!!viewCount && ( - + {formatNumberWithoutAbbreviation(viewCount)} views )) || undefined, (!!uniqueUserCountLast30Days && ( - + {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users )) || @@ -76,7 +76,7 @@ export const ChartStatsSummary = ({ } > - + Changed {toRelativeTimeString(lastUpdatedMs)} diff --git a/datahub-web-react/src/app/entity/container/ContainerEntity.tsx b/datahub-web-react/src/app/entity/container/ContainerEntity.tsx index 0871b446cf7782..ab439d1d6fab43 100644 --- a/datahub-web-react/src/app/entity/container/ContainerEntity.tsx +++ b/datahub-web-react/src/app/entity/container/ContainerEntity.tsx @@ -35,7 +35,7 @@ export class ContainerEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -48,7 +48,7 @@ export class ContainerEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/container/preview/Preview.tsx b/datahub-web-react/src/app/entity/container/preview/Preview.tsx index 746171354f5d59..7b64e2b17b1e95 100644 --- a/datahub-web-react/src/app/entity/container/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/container/preview/Preview.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import DefaultPreviewCard from '@app/preview/DefaultPreviewCard'; import { capitalizeFirstLetterOnly } from '@app/shared/textUtil'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -24,7 +23,7 @@ import { } from '@types'; const StatText = styled(Typography.Text)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; export const Preview = ({ diff --git a/datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx b/datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx index 7c6bbb863560cc..a97cc543c449e0 100644 --- a/datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx +++ b/datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx @@ -43,7 +43,7 @@ export class DashboardEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -56,7 +56,7 @@ export class DashboardEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx index 48f6488cb1c418..22c196609f9da5 100644 --- a/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx @@ -1,23 +1,22 @@ import { ClockCircleOutlined, EyeOutlined, QuestionCircleOutlined, TeamOutlined } from '@ant-design/icons'; import { Popover, Tooltip } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import ExpandingStat from '@app/entity/dataset/shared/ExpandingStat'; import { StatsSummary } from '@app/entity/shared/components/styled/StatsSummary'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; import { toLocalDateTimeString, toRelativeTimeString } from '@app/shared/time/timeUtils'; import { countFormatter, needsFormatting } from '@utils/formatter'; const StatText = styled.span` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; @media (min-width: 1024px) { white-space: nowrap; `; const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-left: 4px; `; @@ -36,12 +35,13 @@ export const DashboardStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { + const theme = useTheme(); const statsViews = [ (!!chartCount && ( ( - + {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} charts @@ -51,14 +51,14 @@ export const DashboardStatsSummary = ({ undefined, (!!viewCount && ( - + {formatNumberWithoutAbbreviation(viewCount)} views )) || undefined, (!!uniqueUserCountLast30Days && ( - + {formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)} unique users )) || @@ -78,7 +78,7 @@ export const DashboardStatsSummary = ({ } > - + Changed {toRelativeTimeString(lastUpdatedMs)} diff --git a/datahub-web-react/src/app/entity/dataContract/DataContractEntity.tsx b/datahub-web-react/src/app/entity/dataContract/DataContractEntity.tsx index afe7efe7e3251f..d4a058dac4f903 100644 --- a/datahub-web-react/src/app/entity/dataContract/DataContractEntity.tsx +++ b/datahub-web-react/src/app/entity/dataContract/DataContractEntity.tsx @@ -18,7 +18,12 @@ export class DataContractEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ( + + ); } return ( @@ -26,7 +31,7 @@ export class DataContractEntity implements Entity { className={TYPE_ICON_CLASS_NAME} style={{ fontSize, - color: color || '#BFBFBF', + color: color || 'var(--theme-icon, #BFBFBF)', }} /> ); diff --git a/datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx b/datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx index 21df56fac00b1d..c02f68e23e5604 100644 --- a/datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx +++ b/datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx @@ -35,14 +35,14 @@ export class DataFlowEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx index 850b0d5cadb4bc..30a9cead54a394 100644 --- a/datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import DefaultPreviewCard from '@app/preview/DefaultPreviewCard'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -21,7 +20,7 @@ import { } from '@types'; const StatText = styled(Typography.Text)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; export const Preview = ({ diff --git a/datahub-web-react/src/app/entity/dataJob/DataJobEntity.tsx b/datahub-web-react/src/app/entity/dataJob/DataJobEntity.tsx index 599d66f59c075c..ac7f61e0b43ade 100644 --- a/datahub-web-react/src/app/entity/dataJob/DataJobEntity.tsx +++ b/datahub-web-react/src/app/entity/dataJob/DataJobEntity.tsx @@ -46,14 +46,14 @@ export class DataJobEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx b/datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx index 686b6040cce86f..84210946ed6b68 100644 --- a/datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx @@ -4,7 +4,6 @@ import React from 'react'; import styled from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import DefaultPreviewCard from '@app/preview/DefaultPreviewCard'; import { toRelativeTimeString } from '@app/shared/time/timeUtils'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -23,7 +22,7 @@ import { } from '@types'; const StatText = styled(Typography.Text)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; export const Preview = ({ diff --git a/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx b/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx index b49c978ebb654d..baab4b8e210087 100644 --- a/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx +++ b/datahub-web-react/src/app/entity/dataJob/tabs/RunsTab.tsx @@ -4,7 +4,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { getExecutionRequestStatusDisplayColor, getExecutionRequestStatusDisplayText, @@ -20,7 +19,7 @@ import LoadingSvg from '@images/datahub-logo-color-loading_pendulum.svg?react'; const ExternalUrlLink = styled.a` font-size: 16px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const PaginationControlContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/dataPlatform/DataPlatformEntity.tsx b/datahub-web-react/src/app/entity/dataPlatform/DataPlatformEntity.tsx index 8b3dbb864d6a5c..71a59a1bdfb55f 100644 --- a/datahub-web-react/src/app/entity/dataPlatform/DataPlatformEntity.tsx +++ b/datahub-web-react/src/app/entity/dataPlatform/DataPlatformEntity.tsx @@ -22,7 +22,7 @@ export class DataPlatformEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/dataProcessInstance/DataProcessInstanceEntity.tsx b/datahub-web-react/src/app/entity/dataProcessInstance/DataProcessInstanceEntity.tsx index 2b038801dc62f2..0ea38500ccf4a5 100644 --- a/datahub-web-react/src/app/entity/dataProcessInstance/DataProcessInstanceEntity.tsx +++ b/datahub-web-react/src/app/entity/dataProcessInstance/DataProcessInstanceEntity.tsx @@ -45,14 +45,14 @@ export class DataProcessInstanceEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/dataProduct/DataProductEntity.tsx b/datahub-web-react/src/app/entity/dataProduct/DataProductEntity.tsx index 23f8e125957d5c..0e3aaec8686e71 100644 --- a/datahub-web-react/src/app/entity/dataProduct/DataProductEntity.tsx +++ b/datahub-web-react/src/app/entity/dataProduct/DataProductEntity.tsx @@ -33,7 +33,7 @@ export class DataProductEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -46,7 +46,7 @@ export class DataProductEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx index 4ee0bd671c4329..f1ec51488b3a78 100644 --- a/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx @@ -57,7 +57,7 @@ export class DatasetEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -70,7 +70,7 @@ export class DatasetEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx b/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx index c443efb704486b..c15b382a50064e 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/OperationsTab.tsx @@ -4,7 +4,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { notEmpty } from '@app/entity/shared/utils'; import { getExecutionRequestStatusDisplayColor, @@ -22,7 +21,7 @@ import LoadingSvg from '@images/datahub-logo-color-loading_pendulum.svg?react'; const ExternalUrlLink = styled.a` font-size: 16px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const PaginationControlContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/dataset/profile/UsageFacepile.tsx b/datahub-web-react/src/app/entity/dataset/profile/UsageFacepile.tsx index 7cd58d287eac67..802e414d225834 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/UsageFacepile.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/UsageFacepile.tsx @@ -13,7 +13,7 @@ export type Props = { }; const AvatarStyled = styled(Avatar)<{ backgroundColor: string }>` - color: #fff; + color: ${(props) => props.theme.colors.textOnFillDefault}; background-color: ${(props) => props.backgroundColor}; `; diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx index d32a61712e60e5..8b9f4e61e55e3f 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaDescriptionField.tsx @@ -8,7 +8,6 @@ import analytics, { EntityActionType, EventType } from '@app/analytics'; import { useEntityData } from '@app/entity/shared/EntityContext'; import UpdateDescriptionModal from '@app/entity/shared/components/legacy/DescriptionModal'; import StripMarkdownText, { removeMarkdown } from '@app/entity/shared/components/styled/StripMarkdownText'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import PropagationDetails from '@app/entity/shared/propagation/PropagationDetails'; import { Editor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; import SchemaEditableContext from '@app/shared/SchemaEditableContext'; @@ -19,6 +18,7 @@ import { StringMapEntry } from '@types'; const EditIcon = styled(EditOutlined)` cursor: pointer; display: none; + color: ${(props) => props.theme.colors.iconSuccess}; `; const AddNewDescription = styled(Button)` @@ -51,17 +51,17 @@ const DescriptionContainer = styled.div` display: block; } & ins.diff { - background-color: #b7eb8f99; + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess}; text-decoration: none; &:hover { - background-color: #b7eb8faa; + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess}; } } & del.diff { - background-color: #ffa39e99; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; text-decoration: line-through; &: hover { - background-color: #ffa39eaa; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; } } `; @@ -69,7 +69,7 @@ const EditedLabel = styled(Typography.Text)` position: absolute; right: -10px; top: -15px; - color: rgba(150, 150, 150, 0.5); + color: ${(props) => props.theme.colors.textDisabled}; font-style: italic; `; @@ -88,7 +88,7 @@ const StyledViewer = styled(Editor)` const AttributeDescription = styled.div` margin-top: 8px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const StyledAttributeViewer = styled(Editor)` @@ -96,7 +96,7 @@ const StyledAttributeViewer = styled(Editor)` display: block; .remirror-editor.ProseMirror { padding: 0; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; @@ -166,10 +166,7 @@ export default function DescriptionField({ }; const EditButton = - (isSchemaEditable && description && ( - setShowAddModal(true)} /> - )) || - undefined; + (isSchemaEditable && description && setShowAddModal(true)} />) || undefined; const showAddDescription = isSchemaEditable && !description; diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx index 33fa35787fe26c..8a980b1c09c9be 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx @@ -10,11 +10,10 @@ import { Button, Input, Popover, Select, Tooltip, Typography } from 'antd'; import { debounce } from 'lodash'; import React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import CustomPagination from '@app/entity/dataset/profile/schema/components/CustomPagination'; import TabToolbar from '@app/entity/shared/components/styled/TabToolbar'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entity/shared/constants'; import getSchemaFilterFromQueryString from '@app/entity/shared/tabs/Dataset/Schema/utils/getSchemaFilterFromQueryString'; import { navigateToVersionedDatasetUrl } from '@app/entity/shared/tabs/Dataset/Schema/utils/navigateToVersionedDatasetUrl'; import { toRelativeTimeString } from '@app/shared/time/timeUtils'; @@ -115,7 +114,7 @@ const StyledQuestionCircleOutlined = styled(QuestionCircleOutlined)` &&& { margin-top: 14px; font-size: 16px; - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.textDisabled}; } `; @@ -166,6 +165,7 @@ export default function SchemaHeader({ }: Props) { const history = useHistory(); const location = useLocation(); + const theme = useTheme(); const onVersionChange = (version1, version2) => { if (version1 === null || version2 === null) { return; @@ -257,7 +257,9 @@ export default function SchemaHeader({ type="text" data-testid="schema-blame-button" onClick={() => setShowSchemaAuditView(!showSchemaAuditView)} - style={{ color: showSchemaAuditView ? REDESIGN_COLORS.BLUE : ANTD_GRAY[7] }} + style={{ + color: showSchemaAuditView ? theme.colors.textInformation : theme.colors.textTertiary, + }} > diff --git a/datahub-web-react/src/app/entity/dataset/profile/stats/historical/HistoricalStatsView.tsx b/datahub-web-react/src/app/entity/dataset/profile/stats/historical/HistoricalStatsView.tsx index c1ec9ff63b5c68..db64b410493f1d 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/stats/historical/HistoricalStatsView.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/stats/historical/HistoricalStatsView.tsx @@ -14,7 +14,7 @@ import { DatasetProfile, DateInterval } from '@types'; const HeaderRow = styled(Row)` padding-top: 24px; padding-bottom: 28px; - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const SubHeaderText = styled(Typography.Text)` diff --git a/datahub-web-react/src/app/entity/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx b/datahub-web-react/src/app/entity/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx index f88454c30756df..2e707b729ec0d5 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx @@ -8,7 +8,7 @@ import { DatasetProfile } from '@types'; export const ChartTable = styled(Table)` margin: 12px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; export type Props = { diff --git a/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/LatestStatsView.tsx b/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/LatestStatsView.tsx index 3b422ca47ce79b..1d81aa4973912f 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/LatestStatsView.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/LatestStatsView.tsx @@ -1,6 +1,6 @@ import { Affix, Row, Typography } from 'antd'; import React, { ReactNode } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import DataProfileView from '@app/entity/dataset/profile/stats/snapshot/SnapshotStatsView'; @@ -9,7 +9,7 @@ import { DatasetProfile } from '@types'; const HeaderRow = styled(Row)` padding-top: 24px; padding-bottom: 28px; - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; `; export type Props = { @@ -18,6 +18,7 @@ export type Props = { }; export default function LatestStatsView({ profile, toggleView }: Props) { + const theme = useTheme(); const reportedAtDate = new Date(profile.timestampMillis); return ( <> @@ -25,7 +26,7 @@ export default function LatestStatsView({ profile, toggleView }: Props) {
Latest Stats - + Reported on {reportedAtDate.toLocaleDateString()} at {reportedAtDate.toLocaleTimeString()}
diff --git a/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/SnapshotStatsView.tsx b/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/SnapshotStatsView.tsx index 2b44f340117356..9dd0e1236dbd9c 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/SnapshotStatsView.tsx +++ b/datahub-web-react/src/app/entity/dataset/profile/stats/snapshot/SnapshotStatsView.tsx @@ -1,7 +1,7 @@ import { Row, Table, Tag, Typography } from 'antd'; import { ColumnType, ColumnsType } from 'antd/lib/table'; import React, { useMemo } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { Highlight } from '@app/analyticsDashboard/components/Highlight'; import StatsSection from '@app/entity/dataset/profile/stats/StatsSection'; @@ -25,6 +25,7 @@ export type Props = { }; export default function DataProfileView({ profile }: Props) { + const theme = useTheme(); const columnStatsTableData = useMemo( () => profile.fieldProfiles?.map((doc) => ({ @@ -47,7 +48,7 @@ export default function DataProfileView({ profile }: Props) { * Returns a placeholder value to show in the column data table when data is null. */ const unknownValue = () => { - return unknown; + return unknown; }; /** diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx index 9eefd36b715ffb..f982350da1c380 100644 --- a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx @@ -1,12 +1,12 @@ import { ClockCircleOutlined, ConsoleSqlOutlined, HddOutlined, TableOutlined, TeamOutlined } from '@ant-design/icons'; import { Popover } from 'antd'; import React from 'react'; +import { useTheme } from 'styled-components'; import styled from 'styled-components/macro'; import ExpandingStat from '@app/entity/dataset/shared/ExpandingStat'; import { FormattedBytesStat } from '@app/entity/dataset/shared/FormattedBytesStat'; import { StatsSummary } from '@app/entity/shared/components/styled/StatsSummary'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; import { toLocalDateTimeString, toRelativeTimeString } from '@app/shared/time/timeUtils'; import { countFormatter, needsFormatting } from '@utils/formatter'; @@ -46,8 +46,9 @@ export const DatasetStatsSummary = ({ mode = 'normal', shouldWrap, }: Props) => { + const theme = useTheme(); const isTooltipMode = mode === 'tooltip-content'; - const displayedColor = isTooltipMode ? '' : (color ?? ANTD_GRAY[7]); + const displayedColor = isTooltipMode ? '' : (color ?? theme.colors.textTertiary); const statsViews = [ !!rowCount && ( @@ -101,7 +102,7 @@ export const DatasetStatsSummary = ({ } > - + Updated {toRelativeTimeString(lastUpdatedMs)} diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx index 70907084ee7934..8adf153968bbf3 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx @@ -20,7 +20,7 @@ const FormItemNoMargin = styled(FormItem)` `; const AdvancedLabel = styled(Typography.Text)` - color: #373d44; + color: ${(props) => props.theme.colors.text}; `; export function DataProductAdvancedOption({ builderState, updateBuilderState }: DataProductBuilderFormProps) { diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx index 758942bf9366eb..b09bfbd6241594 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx @@ -4,11 +4,10 @@ import styled from 'styled-components'; import { DataProductAdvancedOption } from '@app/entity/domain/DataProductsTab/DataProductAdvancedOption'; import { DataProductBuilderFormProps } from '@app/entity/domain/DataProductsTab/types'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Editor as MarkdownEditor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; const StyledEditor = styled(MarkdownEditor)` - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; `; export default function DataProductBuilderForm({ builderState, updateBuilderState }: DataProductBuilderFormProps) { diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductResult.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductResult.tsx index b0170d7b064753..9213b9956dee5c 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductResult.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductResult.tsx @@ -12,7 +12,7 @@ import { useDeleteDataProductMutation } from '@graphql/dataProduct.generated'; import { DataProduct, EntityType } from '@types'; const ResultWrapper = styled.div` - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 8px; max-width: 1200px; margin: 0 auto 8px auto; diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx index 148b5642bbadc5..1d247bf4d73561 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductsTab.tsx @@ -3,14 +3,13 @@ import { Button, Empty, Pagination } from 'antd'; import * as QueryString from 'query-string'; import React, { useState } from 'react'; import { useLocation } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { DomainsPaginationContainer } from '@app/domain/DomainsList'; import CreateDataProductModal from '@app/entity/domain/DataProductsTab/CreateDataProductModal'; import DataProductResult from '@app/entity/domain/DataProductsTab/DataProductResult'; import { useEntityData } from '@app/entity/shared/EntityContext'; import TabToolbar from '@app/entity/shared/components/styled/TabToolbar'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { SearchBar } from '@app/search/SearchBar'; import { DOMAINS_FILTER_NAME } from '@app/search/utils/constants'; import { scrollToTop } from '@app/shared/searchUtils'; @@ -25,7 +24,7 @@ const DataProductsPaginationWrapper = styled(DomainsPaginationContainer)` const ResultsWrapper = styled.div` flex: 1; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; padding: 16px; overflow: auto; `; @@ -45,6 +44,7 @@ const DEFAULT_PAGE_SIZE = 10; export default function DataProductsTab() { const { entityData } = useEntityData(); const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const location = useLocation(); const params = QueryString.parse(location.search, { arrayFormat: 'comma' }); const paramsQuery = (params?.query as string) || undefined; @@ -125,7 +125,7 @@ export default function DataProductsTab() { )} {loading && ( diff --git a/datahub-web-react/src/app/entity/domain/DomainEntity.tsx b/datahub-web-react/src/app/entity/domain/DomainEntity.tsx index 9667902e4476d1..ece9030f6f0f02 100644 --- a/datahub-web-react/src/app/entity/domain/DomainEntity.tsx +++ b/datahub-web-react/src/app/entity/domain/DomainEntity.tsx @@ -31,7 +31,7 @@ export class DomainEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -49,7 +49,7 @@ export class DomainEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/domain/preview/DomainEntitiesSnippet.tsx b/datahub-web-react/src/app/entity/domain/preview/DomainEntitiesSnippet.tsx index 2d46e05db3743b..c01577fced275c 100644 --- a/datahub-web-react/src/app/entity/domain/preview/DomainEntitiesSnippet.tsx +++ b/datahub-web-react/src/app/entity/domain/preview/DomainEntitiesSnippet.tsx @@ -4,14 +4,13 @@ import React from 'react'; import styled from 'styled-components'; import DomainIcon from '@app/domain/DomainIcon'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { pluralize } from '@app/shared/textUtil'; import { useHoverEntityTooltipContext } from '@src/app/recommendations/HoverEntityTooltipContext'; import { SearchResultFields_Domain_Fragment } from '@graphql/search.generated'; const Wrapper = styled.div` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; display: flex; align-items: center; diff --git a/datahub-web-react/src/app/entity/domain/preview/Preview.tsx b/datahub-web-react/src/app/entity/domain/preview/Preview.tsx index 01d6e7c90c8de8..3b91574551d085 100644 --- a/datahub-web-react/src/app/entity/domain/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/domain/preview/Preview.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTheme } from 'styled-components'; import DomainIcon from '@app/domain/DomainIcon'; import DomainEntitiesSnippet from '@app/entity/domain/preview/DomainEntitiesSnippet'; @@ -25,6 +26,7 @@ export const Preview = ({ logoComponent?: JSX.Element; }): JSX.Element => { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); return ( } diff --git a/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx b/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx index d2217acebc57be..6377a36115fe28 100644 --- a/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx +++ b/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx @@ -31,13 +31,13 @@ import ermodelrelationshipIcon from '@images/ermodelrelationshipIcon.svg'; export class ERModelRelationshipEntity implements Entity { type: EntityType = EntityType.ErModelRelationship; - icon = (fontSize: number, styleType: IconStyleType) => { + icon = (fontSize: number, styleType: IconStyleType, color?: string) => { if (styleType === IconStyleType.TAB_VIEW) { return ; } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { diff --git a/datahub-web-react/src/app/entity/ermodelrelationships/profile/sidebar/ERModelRelationshipSidebarCardinality.tsx b/datahub-web-react/src/app/entity/ermodelrelationships/profile/sidebar/ERModelRelationshipSidebarCardinality.tsx index 183a1b7e9a8321..82930830b87d90 100644 --- a/datahub-web-react/src/app/entity/ermodelrelationships/profile/sidebar/ERModelRelationshipSidebarCardinality.tsx +++ b/datahub-web-react/src/app/entity/ermodelrelationships/profile/sidebar/ERModelRelationshipSidebarCardinality.tsx @@ -6,7 +6,7 @@ import { SidebarHeader } from '@app/entity/shared/containers/profile/sidebar/Sid import { ErModelRelationship } from '@src/types.generated'; const CardinalitySidebar = styled.div` - color: #000000; + color: ${(props) => props.theme.colors.text}; font-weight: 400; display: flex; flex-flow: column nowrap; diff --git a/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx index d749d6fb09b13b..17322f0f3cd356 100644 --- a/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx +++ b/datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx @@ -27,14 +27,14 @@ class GlossaryNodeEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx b/datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx index f3e31d9158e5b9..18da2ac4389341 100644 --- a/datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx +++ b/datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx @@ -34,14 +34,14 @@ export class GlossaryTermEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/AddRelatedTermsModal.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/AddRelatedTermsModal.tsx index 19a18060cf457a..a523a2b1c10a9c 100644 --- a/datahub-web-react/src/app/entity/glossaryTerm/profile/AddRelatedTermsModal.tsx +++ b/datahub-web-react/src/app/entity/glossaryTerm/profile/AddRelatedTermsModal.tsx @@ -1,6 +1,6 @@ import { Button, Modal, Select, Tag, message } from 'antd'; import React, { useState } from 'react'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import { useEntityData, useRefetch } from '@app/entity/shared/EntityContext'; import GlossaryBrowser from '@app/glossary/GlossaryBrowser/GlossaryBrowser'; @@ -33,6 +33,7 @@ interface Props { function AddRelatedTermsModal(props: Props) { const { onClose, relationshipType } = props; + const theme = useTheme(); const [inputValue, setInputValue] = useState(''); const [selectedUrns, setSelectedUrns] = useState([]); const [selectedTerms, setSelectedTerms] = useState([]); @@ -158,7 +159,7 @@ function AddRelatedTermsModal(props: Props) { alignItems: 'center', whiteSpace: 'nowrap', opacity: 1, - color: '#434343', + color: theme.colors.text, lineHeight: '16px', }} > diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTerms.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTerms.tsx index 2ab9531ffc6849..46131a3af42588 100644 --- a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTerms.tsx +++ b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTerms.tsx @@ -14,7 +14,7 @@ const DetailWrapper = styled.div` `; const MenuWrapper = styled.div` - border-right: 2px solid #f5f5f5; + border-right: 2px solid ${(props) => props.theme.colors.border}; `; const Content = styled.div` diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx index 52a08e44bb56bc..3c0ecd737e842e 100644 --- a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx +++ b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx @@ -6,7 +6,6 @@ import styled from 'styled-components/macro'; import AddRelatedTermsModal from '@app/entity/glossaryTerm/profile/AddRelatedTermsModal'; import RelatedTerm from '@app/entity/glossaryTerm/profile/RelatedTerm'; import { EmptyTab } from '@app/entity/shared/components/styled/EmptyTab'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Message } from '@app/shared/Message'; import { Button } from '@src/alchemy-components'; @@ -30,7 +29,7 @@ const ListContainer = styled.div` const TitleContainer = styled.div` align-items: center; - border-bottom: solid 1px ${ANTD_GRAY[4]}; + border-bottom: solid 1px ${(props) => props.theme.colors.bgSurface}; display: flex; justify-content: space-between; padding: 15px 20px; diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx index 51f82ffae5964d..96b4fb0ce53160 100644 --- a/datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx +++ b/datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx @@ -31,7 +31,7 @@ const MenuIcon = styled(MoreOutlined)` const MenuItem = styled.div` font-size: 12px; padding: 0 4px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; interface Props { diff --git a/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx b/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx index e477588c373c32..edbf3547fd5c48 100644 --- a/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx +++ b/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx @@ -2,7 +2,6 @@ import { Button, Form, Modal } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Editor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; type Props = { @@ -12,7 +11,7 @@ type Props = { stagedDescription: string | undefined; }; const StyledEditor = styled(Editor)` - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; `; export default function EditGroupDescriptionModal({ diff --git a/datahub-web-react/src/app/entity/group/Group.tsx b/datahub-web-react/src/app/entity/group/Group.tsx index 26bc5fcc885a01..6db686771b3c06 100644 --- a/datahub-web-react/src/app/entity/group/Group.tsx +++ b/datahub-web-react/src/app/entity/group/Group.tsx @@ -28,7 +28,7 @@ export class GroupEntity implements Entity { ); diff --git a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx index b174ef4da216d6..c396eeff5be35e 100644 --- a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx +++ b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx @@ -19,7 +19,6 @@ import { SocialDetails, } from '@app/entity/shared/SidebarStyledComponents'; import StripMarkdownText, { removeMarkdown } from '@app/entity/shared/components/styled/StripMarkdownText'; -import { REDESIGN_COLORS } from '@app/entity/shared/constants'; import { Editor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; import { useBrowserTitle } from '@app/shared/BrowserTabTitleContext'; import CustomAvatar from '@app/shared/avatar/CustomAvatar'; @@ -58,7 +57,7 @@ const TITLES = { const GroupNameHeader = styled(Row)` font-size: 20px; line-height: 28px; - color: #262626; + color: ${(props) => props.theme.colors.text}; margin: 16px 16px 8px 8px; display: flex; align-items: center; @@ -85,7 +84,7 @@ const GroupTitle = styled(Typography.Title)` const EditIcon = styled(EditOutlined)` cursor: pointer; - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; `; const AddNewDescription = styled(Button)` display: none; @@ -116,17 +115,17 @@ const DescriptionContainer = styled.div` display: block; } & ins.diff { - background-color: #b7eb8f99; + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess}; text-decoration: none; &:hover { - background-color: #b7eb8faa; + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess}; } } & del.diff { - background-color: #ffa39e99; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; text-decoration: line-through; &: hover { - background-color: #ffa39eaa; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; } } `; diff --git a/datahub-web-react/src/app/entity/group/GroupMembers.tsx b/datahub-web-react/src/app/entity/group/GroupMembers.tsx index 956c57b154386b..d9fedca73929d1 100644 --- a/datahub-web-react/src/app/entity/group/GroupMembers.tsx +++ b/datahub-web-react/src/app/entity/group/GroupMembers.tsx @@ -2,7 +2,7 @@ import { MoreOutlined, UserAddOutlined, UserDeleteOutlined } from '@ant-design/i import { Button, Col, Dropdown, Empty, MenuProps, Modal, Pagination, Row, Typography, message } from 'antd'; import React, { useState } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { AddGroupMembersModal } from '@app/entity/group/AddGroupMembersModal'; import { CustomAvatar } from '@app/shared/avatar'; @@ -12,10 +12,6 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; import { useGetAllGroupMembersQuery, useRemoveGroupMembersMutation } from '@graphql/group.generated'; import { CorpUser, EntityType } from '@types'; -const ADD_MEMBER_STYLE = { - backGround: '#ffffff', - boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)', -}; const AVATAR_STYLE = { margin: '5px 5px 5px 0' }; /** @@ -41,7 +37,7 @@ const AddMemberText = styled(Typography.Text)` const MemberNameSection = styled.div` font-size: 20px; line-height: 28px; - color: #262626; + color: ${(props) => props.theme.colors.text}; display: flex; align-items: center; justify-content: start; @@ -59,7 +55,7 @@ const GroupMemberWrapper = styled.div` const MemberColumn = styled(Col)` padding: 19px 0 19px 0; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const MemberEditIcon = styled.div` @@ -71,7 +67,7 @@ const Name = styled.span` font-weight: bold; font-size: 14px; line-height: 22px; - color: #262626; + color: ${(props) => props.theme.colors.text}; margin-left: 8px; `; @@ -87,6 +83,7 @@ type Props = { }; export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeMembers }: Props) { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const [page, setPage] = useState(1); @@ -184,7 +181,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM return ( <> - + Add Member diff --git a/datahub-web-react/src/app/entity/group/GroupProfile.tsx b/datahub-web-react/src/app/entity/group/GroupProfile.tsx index ec41a78f2a5f93..7f242037f983f3 100644 --- a/datahub-web-react/src/app/entity/group/GroupProfile.tsx +++ b/datahub-web-react/src/app/entity/group/GroupProfile.tsx @@ -1,6 +1,6 @@ import { Col, Row } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { GroupAssets } from '@app/entity/group/GroupAssets'; import GroupInfoSidebar from '@app/entity/group/GroupInfoSideBar'; @@ -36,7 +36,7 @@ const GroupProfileWrapper = styled.div` `; const Content = styled.div` - color: #262626; + color: ${(props) => props.theme.colors.text}; height: calc(100vh - 60px); &&& .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap { @@ -48,6 +48,7 @@ const Content = styled.div` * Responsible for reading & writing groups. */ export default function GroupProfile() { + const theme = useTheme(); const { urn: encodedUrn } = useUserParams(); const urn = encodedUrn && decodeUrn(encodedUrn); const { loading, error, data, refetch } = useGetGroupQuery({ variables: { urn, membersCount: MEMBER_PAGE_SIZE } }); @@ -126,7 +127,14 @@ export default function GroupProfile() { - + diff --git a/datahub-web-react/src/app/entity/group/preview/Preview.tsx b/datahub-web-react/src/app/entity/group/preview/Preview.tsx index 3899ceba911bf9..f99d879335eda8 100644 --- a/datahub-web-react/src/app/entity/group/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/group/preview/Preview.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; import NoMarkdownViewer from '@app/entity/shared/components/styled/StripMarkdownText'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import SearchTextHighlighter from '@app/search/matches/SearchTextHighlighter'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -51,7 +50,7 @@ const PlatformText = styled(Typography.Text)` font-size: 12px; line-height: 20px; font-weight: 700; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const DescriptionContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/mlFeature/MLFeatureEntity.tsx b/datahub-web-react/src/app/entity/mlFeature/MLFeatureEntity.tsx index 9c93ea51ab6dc7..9ae40d801ac955 100644 --- a/datahub-web-react/src/app/entity/mlFeature/MLFeatureEntity.tsx +++ b/datahub-web-react/src/app/entity/mlFeature/MLFeatureEntity.tsx @@ -35,14 +35,14 @@ export class MLFeatureEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/mlFeatureTable/MLFeatureTableEntity.tsx b/datahub-web-react/src/app/entity/mlFeatureTable/MLFeatureTableEntity.tsx index 06405cd26d2a85..843ec97d3e92f7 100644 --- a/datahub-web-react/src/app/entity/mlFeatureTable/MLFeatureTableEntity.tsx +++ b/datahub-web-react/src/app/entity/mlFeatureTable/MLFeatureTableEntity.tsx @@ -35,14 +35,14 @@ export class MLFeatureTableEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx b/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx index db4ac1968a0ed5..56799a5c0a43ed 100644 --- a/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx +++ b/datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx @@ -35,14 +35,14 @@ export class MLModelEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/mlModel/profile/MLModelSummary.tsx b/datahub-web-react/src/app/entity/mlModel/profile/MLModelSummary.tsx index 7e7652b30b650b..50f0d86e5d0aae 100644 --- a/datahub-web-react/src/app/entity/mlModel/profile/MLModelSummary.tsx +++ b/datahub-web-react/src/app/entity/mlModel/profile/MLModelSummary.tsx @@ -10,7 +10,6 @@ import { InfoItem } from '@app/entity/shared/components/styled/InfoItem'; import { notEmpty } from '@app/entity/shared/utils'; import { TimestampPopover } from '@app/sharedV2/TimestampPopover'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { colors } from '@src/alchemy-components/theme'; import { GetMlModelQuery } from '@graphql/mlModel.generated'; import { EntityType, MlHyperParam, MlMetric } from '@types'; @@ -33,7 +32,7 @@ const InfoItemContent = styled.div` `; const JobLink = styled(Link)` - color: ${colors.blue[700]}; + color: ${(props) => props.theme.colors.textInformation}; &:hover { text-decoration: underline; } diff --git a/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx b/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx index ecd9d79aaaf150..9270bb58897531 100644 --- a/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx +++ b/datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx @@ -32,14 +32,14 @@ export class MLModelGroupEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/mlModelGroup/profile/ModelGroupModels.tsx b/datahub-web-react/src/app/entity/mlModelGroup/profile/ModelGroupModels.tsx index 22a2f93ed2ff6c..4c6fb99d08e923 100644 --- a/datahub-web-react/src/app/entity/mlModelGroup/profile/ModelGroupModels.tsx +++ b/datahub-web-react/src/app/entity/mlModelGroup/profile/ModelGroupModels.tsx @@ -9,7 +9,6 @@ import { notEmpty } from '@app/entity/shared/utils'; import { TimestampPopover } from '@app/sharedV2/TimestampPopover'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Pill } from '@src/alchemy-components/components/Pills'; -import { colors } from '@src/alchemy-components/theme'; import { GetMlModelGroupQuery } from '@graphql/mlModelGroup.generated'; import { EntityType } from '@types'; @@ -37,7 +36,7 @@ const NameLink = styled.a` font-size: 0.9rem; &:hover { - color: ${colors.blue[400]} !important; + color: ${(props) => props.theme.colors.textInformation} !important; } `; @@ -47,7 +46,7 @@ const TagContainer = styled.div` margin-top: 3px; flex-wrap: wrap; margin-right: 8px; - backgroundcolor: white; + background-color: ${(props) => props.theme.colors.bg}; gap: 5px; `; diff --git a/datahub-web-react/src/app/entity/mlPrimaryKey/MLPrimaryKeyEntity.tsx b/datahub-web-react/src/app/entity/mlPrimaryKey/MLPrimaryKeyEntity.tsx index d9e410dbec3fac..78ffccd2f900a1 100644 --- a/datahub-web-react/src/app/entity/mlPrimaryKey/MLPrimaryKeyEntity.tsx +++ b/datahub-web-react/src/app/entity/mlPrimaryKey/MLPrimaryKeyEntity.tsx @@ -33,14 +33,14 @@ export class MLPrimaryKeyEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx b/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx index 31613811691d96..9ae7dd0b1507cc 100644 --- a/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx +++ b/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx @@ -95,6 +95,7 @@ export const ActionsColumn = ({ ownershipType, setIsOpen, setOwnershipType, refe }, { key: 'delete', + danger: true, icon: ( Are you sure you want to delete this ownership type?} diff --git a/datahub-web-react/src/app/entity/query/QueryEntity.tsx b/datahub-web-react/src/app/entity/query/QueryEntity.tsx index 33b1069d40dec6..3e5ba4739427b1 100644 --- a/datahub-web-react/src/app/entity/query/QueryEntity.tsx +++ b/datahub-web-react/src/app/entity/query/QueryEntity.tsx @@ -22,7 +22,7 @@ export class QueryEntity implements Entity { className={TYPE_ICON_CLASS_NAME} style={{ fontSize, - color: color || '#BFBFBF', + color: color || 'var(--theme-icon, #BFBFBF)', }} /> ); diff --git a/datahub-web-react/src/app/entity/restricted/RestrictedEntity.tsx b/datahub-web-react/src/app/entity/restricted/RestrictedEntity.tsx index 348fe0fddd4dbf..f11debc7ab6648 100644 --- a/datahub-web-react/src/app/entity/restricted/RestrictedEntity.tsx +++ b/datahub-web-react/src/app/entity/restricted/RestrictedEntity.tsx @@ -21,14 +21,14 @@ export class RestrictedEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } return ( ); diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx index 4e8e08342cf5c2..0ea11a201a11fa 100644 --- a/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx +++ b/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx @@ -25,7 +25,6 @@ import { isMoveDisabled, shouldDisplayChildDeletionWarning, } from '@app/entity/shared/EntityDropdown/utils'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { getEntityPath } from '@app/entity/shared/containers/profile/utils'; import { useIsSeparateSiblingsMode } from '@app/entity/shared/siblingUtils'; import { AddIncidentModal } from '@app/entity/shared/tabs/Incident/components/AddIncidentModal'; @@ -59,7 +58,7 @@ export const MenuIcon = styled(MoreOutlined)<{ fontSize?: number }>` const MenuItem = styled.div` font-size: 12px; padding: 0 4px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; const StyledMenuItem = styled(Menu.Item)<{ disabled: boolean }>` @@ -70,7 +69,7 @@ const StyledMenuItem = styled(Menu.Item)<{ disabled: boolean }>` props.disabled ? ` ${MenuItem} { - color: ${ANTD_GRAY[7]}; + color: ${props.theme.colors.textTertiary}; } ` : ''} @@ -249,6 +248,7 @@ function EntityDropdown(props: Props) { menuItems.has(EntityMenuItems.DELETE) ? { key: 5, + danger: true, label: ( props.theme.colors.border}; `; export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => { diff --git a/datahub-web-react/src/app/entity/shared/SidebarStyledComponents.tsx b/datahub-web-react/src/app/entity/shared/SidebarStyledComponents.tsx index 8d66b17b0b8d71..beb774a8f20d8e 100644 --- a/datahub-web-react/src/app/entity/shared/SidebarStyledComponents.tsx +++ b/datahub-web-react/src/app/entity/shared/SidebarStyledComponents.tsx @@ -39,19 +39,19 @@ export const SideBarSubSection = styled.div` &::-webkit-scrollbar { height: 12px; width: 1px; - background: #d6d6d6; + background: ${(props) => props.theme.colors.scrollbarTrack}; } &::-webkit-scrollbar-thumb { - background: #d6d6d6; + background: ${(props) => props.theme.colors.scrollbarThumb}; -webkit-border-radius: 1ex; - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: ${(props) => props.theme.colors.shadowXs}; } `; export const EmptyValue = styled.div` &:after { content: 'None'; - color: #b7b7b7; + color: ${(props) => props.theme.colors.textDisabled}; font-style: italic; font-weight: 100; } @@ -60,7 +60,7 @@ export const EmptyValue = styled.div` export const Name = styled.div` font-size: 20px; line-height: 28px; - color: #262626; + color: ${(props) => props.theme.colors.text}; margin: 13px 0 7px 0; `; @@ -75,7 +75,7 @@ export const UserDetails = styled.div` export const TitleRole = styled.div` font-size: 14px; line-height: 22px; - color: #595959; + color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 7px; `; @@ -84,13 +84,13 @@ export const Team = styled.div` line-height: 20px; font-weight: 400; padding-bottom: 10px; - color: #8c8c8c; + color: ${(props) => props.theme.colors.textTertiary}; `; export const SocialDetails = styled.div` font-size: 12px; line-height: 20px; - color: #262626; + color: ${(props) => props.theme.colors.text}; text-align: left; margin: 6px 0; `; @@ -109,7 +109,7 @@ export const EditButton = styled.div` width: 100%; font-size: 12px; line-height: 20px; - color: #262626; + color: ${(props) => props.theme.colors.text}; } `; @@ -118,7 +118,7 @@ export const AboutSection = styled.div` font-weight: bold; font-size: 14px; line-height: 22px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; export const LocationSection = styled.div` @@ -126,7 +126,7 @@ export const LocationSection = styled.div` font-weight: bold; font-size: 14px; line-height: 26px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; export const LocationSectionText = styled.div` @@ -135,7 +135,7 @@ export const LocationSectionText = styled.div` font-size: 14px; line-height: 26px; margin-bottom: -10px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; export const AboutSectionText = styled.div` @@ -158,7 +158,7 @@ export const GroupsSection = styled.div` font-weight: bold; font-size: 14px; line-height: 22px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; export const TagsSection = styled.div` @@ -168,7 +168,7 @@ export const TagsSection = styled.div` export const NoDataFound = styled.span` font-size: 12px; - color: #262626; + color: ${(props) => props.theme.colors.text}; font-weight: 100; `; @@ -180,7 +180,7 @@ export const GroupsSeeMoreText = styled.span` font-weight: 500; font-size: 12px; line-height: 20px; - color: #1890ff; + color: ${(props) => props.theme.colors.hyperlinks}; cursor: pointer; `; @@ -190,7 +190,7 @@ export const DisplayCount = styled.span` font-weight: 500; font-size: 12px; line-height: 20px; - color: #8c8c8c; + color: ${(props) => props.theme.colors.textTertiary}; `; export const GroupSectionTitle = styled.span` diff --git a/datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx b/datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx index b8025fd900e3b1..2f3ab0a544d836 100644 --- a/datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx +++ b/datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx @@ -2,7 +2,6 @@ import { Button, Form, Modal, Typography } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Editor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; const FormLabel = styled(Typography.Text)` @@ -11,7 +10,7 @@ const FormLabel = styled(Typography.Text)` `; const StyledEditor = styled(Editor)` - border: 1px solid ${ANTD_GRAY[4.5]}; + border: 1px solid ${(props) => props.theme.colors.border}; `; const StyledViewer = styled(Editor)` diff --git a/datahub-web-react/src/app/entity/shared/components/legacy/MarkdownViewer.tsx b/datahub-web-react/src/app/entity/shared/components/legacy/MarkdownViewer.tsx index ab52706eee32c8..f06d1c6216a27b 100644 --- a/datahub-web-react/src/app/entity/shared/components/legacy/MarkdownViewer.tsx +++ b/datahub-web-react/src/app/entity/shared/components/legacy/MarkdownViewer.tsx @@ -11,6 +11,7 @@ const EditIcon = styled(EditOutlined)` top: 0; right: -8px; display: none; + color: ${(props) => props.theme.colors.iconSuccess}; `; const MarkdownContainer = styled.div<{ editable?: string }>` @@ -31,7 +32,7 @@ const MarkdownContainer = styled.div<{ editable?: string }>` const CustomButton = styled(Button)` padding: 0; - color: #6a737d; + color: ${(props) => props.theme.colors.textSecondary}; `; const MarkdownViewContainer = styled.div<{ @@ -54,7 +55,7 @@ const MarkdownViewContainer = styled.div<{ ` &::after { content: '...'; - color: #6a737d; + color: ${props.theme.colors.textSecondary}; position: absolute; bottom: 2rem; } @@ -113,7 +114,7 @@ export default function MarkdownViewer({ source, limit = 150, editable, onEditCl {showAll ? 'show less' : 'show more'} )} - {editable && } + {editable && } ); } diff --git a/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx b/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx index 334ed97b8c8aff..27bd332d139c70 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx @@ -1,13 +1,11 @@ -import { blue } from '@ant-design/colors'; import { InfoCircleOutlined } from '@ant-design/icons'; -import { Popover, Tooltip, colors } from '@components'; +import { Popover, Tooltip } from '@components'; import { Divider, Modal, Typography, message } from 'antd'; import moment from 'moment'; import React, { useState } from 'react'; import styled from 'styled-components'; import StripMarkdownText, { removeMarkdown } from '@app/entity/shared/components/styled/StripMarkdownText'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Editor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; import { getLocaleTimezone } from '@app/shared/time/timeUtils'; @@ -16,12 +14,12 @@ import { Deprecation } from '@types'; const DeprecatedContainer = styled.div` height: 18px; - border: 1px solid ${colors.red[500]}; + border: 1px solid ${(props) => props.theme.colors.borderError}; border-radius: 15px; display: flex; justify-content: center; align-items: center; - color: ${colors.red[500]}; + color: ${(props) => props.theme.colors.textError}; padding-top: 8px; padding-bottom: 8px; padding-right: 4px; @@ -46,7 +44,7 @@ const LastEvaluatedAtLabel = styled.div` margin: 0; display: flex; align-items: center; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const ThinDivider = styled(Divider)` @@ -61,9 +59,9 @@ const UndeprecatedIcon = styled(InfoCircleOutlined)` const IconGroup = styled.div` font-size: 12px; - color: 'black'; + color: ${(props) => props.theme.colors.text}; &:hover { - color: ${blue[4]}; + color: ${(props) => props.theme.colors.textBrand}; cursor: pointer; } `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/EntityIcon.tsx b/datahub-web-react/src/app/entity/shared/components/styled/EntityIcon.tsx index f9d852c5cc4245..11132a8a005fd1 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/EntityIcon.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/EntityIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { useTheme } from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { PlatformIcon } from '@app/search/filters/utils'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -14,12 +14,13 @@ interface Props { export default function EntityIcon({ entity, size = 14 }: Props) { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const genericEntityProps = entityRegistry.getGenericEntityProperties(entity.type, entity); const logoUrl = genericEntityProps?.platform?.properties?.logoUrl; const icon = logoUrl ? ( ) : ( - entityRegistry.getIcon(entity.type, size, IconStyleType.ACCENT, ANTD_GRAY[9]) + entityRegistry.getIcon(entity.type, size, IconStyleType.ACCENT, theme.colors.text) ); return <>{icon}; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/InfoItem.tsx b/datahub-web-react/src/app/entity/shared/components/styled/InfoItem.tsx index a0b31e70a9c464..fc1e58eeb0695f 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/InfoItem.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/InfoItem.tsx @@ -2,8 +2,6 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const HeaderInfoItem = styled.div<{ onClick?: () => void; width?: string }>` display: inline-block; text-align: left; @@ -16,7 +14,7 @@ const HeaderInfoItem = styled.div<{ onClick?: () => void; width?: string }>` const HeaderInfoTitle = styled(Typography.Text)` font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { diff --git a/datahub-web-react/src/app/entity/shared/components/styled/SeeMore.tsx b/datahub-web-react/src/app/entity/shared/components/styled/SeeMore.tsx index 47c4ef085af3c0..0e6d14e0a17de2 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/SeeMore.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/SeeMore.tsx @@ -1,11 +1,9 @@ import { Button } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - export const SeeMore = styled(Button)` margin-top: -20px; - background-color: ${ANTD_GRAY[4]}; + background-color: ${(props) => props.theme.colors.bgSurface}; padding: 8px; border: none; line-height: 8px; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx index 40bab995f230ac..189ada96e849ca 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx @@ -1,8 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - type Props = { stats: Array; shouldWrap?: boolean; @@ -18,7 +16,7 @@ const StatsContainer = styled.div<{ shouldWrap?: boolean }>` const StatDivider = styled.div` padding-left: 10px; margin-right: 10px; - border-right: 1px solid ${ANTD_GRAY[4]}; + border-right: 1px solid ${(props) => props.theme.colors.bgSurface}; height: 21px; `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/DropdownLabel.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/DropdownLabel.tsx index 0e002f8cc6150f..c53bcf6e71bd44 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/DropdownLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/DropdownLabel.tsx @@ -7,7 +7,7 @@ const StyledValue = styled.div` font-style: normal; font-weight: 400; line-height: 22px; - color: #373d44; + color: ${(props) => props.theme.colors.text}; `; const StyledDescription = styled.div` @@ -16,7 +16,7 @@ const StyledDescription = styled.div` font-style: normal; font-weight: 500; line-height: 16px; - color: #5e666e; + color: ${(props) => props.theme.colors.textSecondary}; `; interface Props { diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultiSelectInput.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultiSelectInput.tsx index 91b2cb6c67951b..52b93cff6ade07 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultiSelectInput.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultiSelectInput.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import DropdownLabel from '@app/entity/shared/components/styled/StructuredProperty/DropdownLabel'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import ValueDescription from '@app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/ValueDescription'; import { getStructuredPropertyValue } from '@app/entity/shared/utils'; @@ -13,7 +12,7 @@ const StyledCheckbox = styled(Checkbox)` display: flex; margin: 0 0 4px 0; .ant-checkbox-inner { - border-color: ${ANTD_GRAY_V2[8]}; + border-color: ${(props) => props.theme.colors.border}; } &&& { margin-left: 0; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultipleOpenEndedInput.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultipleOpenEndedInput.tsx index c57836a4cd536f..0d10a99398e74d 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultipleOpenEndedInput.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/MultipleOpenEndedInput.tsx @@ -3,15 +3,13 @@ import { Button, Input } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; - const MultiStringWrapper = styled.div``; const StyledInput = styled(Input)` width: 75%; min-width: 350px; max-width: 500px; - border: 1px solid ${ANTD_GRAY_V2[6]}; + border: 1px solid ${(props) => props.theme.colors.border}; `; const InputWrapper = styled.div` diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/NumberInput.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/NumberInput.tsx index d1814d1f623578..b62d288aa4c806 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/NumberInput.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/NumberInput.tsx @@ -3,11 +3,10 @@ import React, { ChangeEvent } from 'react'; import styled from 'styled-components'; import MultipleOpenEndedInput from '@app/entity/shared/components/styled/StructuredProperty/MultipleOpenEndedInput'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { PropertyCardinality } from '@src/types.generated'; const StyledInput = styled(Input)` - border: 1px solid ${ANTD_GRAY_V2[6]}; + border: 1px solid ${(props) => props.theme.colors.border}; width: 250px; `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/RichTextInput.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/RichTextInput.tsx index 273825f9cb5a0c..15a5a3ed556c52 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/RichTextInput.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/RichTextInput.tsx @@ -1,11 +1,10 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { Editor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; const StyledEditor = styled(Editor)` - border: 1px solid ${ANTD_GRAY_V2[6]}; + border: 1px solid ${(props) => props.theme.colors.border}; min-height: 115px; border-radius: 6px; width: 75%; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/SingleSelectInput.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/SingleSelectInput.tsx index 14592c2c43c364..03066b62044f38 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/SingleSelectInput.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/SingleSelectInput.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import DropdownLabel from '@app/entity/shared/components/styled/StructuredProperty/DropdownLabel'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import ValueDescription from '@app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/ValueDescription'; import { getStructuredPropertyValue } from '@app/entity/shared/utils'; @@ -12,7 +11,7 @@ import { AllowedValue } from '@types'; const StyledRadio = styled(Radio)` display: block; .ant-radio-inner { - border-color: ${ANTD_GRAY_V2[8]}; + border-color: ${(props) => props.theme.colors.border}; } `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/StringInput.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/StringInput.tsx index d64a93d0a0bd6d..4f89f202cc28af 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/StringInput.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StructuredProperty/StringInput.tsx @@ -3,7 +3,6 @@ import React, { ChangeEvent } from 'react'; import styled from 'styled-components'; import MultipleOpenEndedInput from '@app/entity/shared/components/styled/StructuredProperty/MultipleOpenEndedInput'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { PropertyCardinality } from '@types'; @@ -11,7 +10,7 @@ const StyledInput = styled(Input)` width: 75%; min-width: 350px; max-width: 500px; - border: 1px solid ${ANTD_GRAY_V2[6]}; + border: 1px solid ${(props) => props.theme.colors.border}; `; interface Props { diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StyledButton.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StyledButton.tsx index b3e744a5aac728..d07685b1dc07e2 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StyledButton.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StyledButton.tsx @@ -6,8 +6,8 @@ export default styled(Button)` padding-bottom: 5px; padding-right: 16px; padding-left: 16px; - box-shadow: 0px 0px 4px 0px #0000001a; - border: 1px solid #d9d9d9; + box-shadow: ${(props) => props.theme.colors.shadowXs}; + border: 1px solid ${(props) => props.theme.colors.border}; font-size: 12px; font-weight: 500; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StyledMDEditor.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StyledMDEditor.tsx index ca44fa319bf809..e69d9972f21509 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StyledMDEditor.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StyledMDEditor.tsx @@ -1,8 +1,6 @@ import MDEditor from '@uiw/react-md-editor'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - export default styled(MDEditor)` height: calc(100% - 46px) !important; z-index: 0; @@ -10,8 +8,8 @@ export default styled(MDEditor)` border-radius: 0; font-weight: 400; .w-md-editor-toolbar { - border-color: ${ANTD_GRAY[4]}; - background: white; + border-color: ${(props) => props.theme.colors.bgSurface}; + background: ${(props) => props.theme.colors.bgSurface}; padding: 0 20px; height: 46px !important; li { @@ -24,13 +22,13 @@ export default styled(MDEditor)` height: 16px; } &.active > button { - color: ${(props) => props.theme.styles['primary-color']}; - background-color: ${ANTD_GRAY[3]}; + color: ${(props) => props.theme.colors.textSelected}; + background-color: ${(props) => props.theme.colors.bgSurface}; } } } .w-md-editor-preview { - box-shadow: inset 1px 0 0 0 ${ANTD_GRAY[4]}; + box-shadow: inset 1px 0 0 0 ${(props) => props.theme.colors.bgSurface}; } .w-md-editor-content { height: calc(100% - 46px) !important; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StyledTable.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StyledTable.tsx index f0d1409a5f82db..d7d4c2e2bffeae 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StyledTable.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StyledTable.tsx @@ -1,19 +1,17 @@ import { Table } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - export const StyledTable = styled(Table)` overflow: inherit; height: inherit; &&& .ant-table-cell { - background-color: #fff; + background-color: ${(props) => props.theme.colors.bgSurface}; } &&& .ant-table-thead .ant-table-cell { font-weight: 600; font-size: 12px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; } && .ant-table-thead @@ -21,7 +19,7 @@ export const StyledTable = styled(Table)` > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not( [colspan] )::before { - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; } ` as typeof Table; // this above line preserves the Table component's generic-ness diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StyledTag.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StyledTag.tsx index d6203b001041f2..21485e0edd164d 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/StyledTag.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/StyledTag.tsx @@ -8,11 +8,17 @@ export const generateColor = new ColorHash({ export const StyledTag = styled(Tag)<{ $color: any; $colorHash?: string; fontSize?: number; highlightTag?: boolean }>` &&& { + background-color: ${(props) => props.theme.colors.bgSurface}; + border-color: ${(props) => props.theme.colors.border}; + color: ${(props) => props.theme.colors.textSecondary}; + .ant-tag-close-icon { + color: ${(props) => props.theme.colors.icon}; + } ${(props) => props.highlightTag && ` - background: ${props.theme.styles['highlight-color']}; - border: 1px solid ${props.theme.styles['highlight-border-color']}; + background: ${props.theme.colors.bgHighlight}; + border: 1px solid ${props.theme.colors.borderHover}; `} } ${(props) => props.fontSize && `font-size: ${props.fontSize}px;`} diff --git a/datahub-web-react/src/app/entity/shared/components/styled/TabToolbar.tsx b/datahub-web-react/src/app/entity/shared/components/styled/TabToolbar.tsx index 6d656f950a7b4d..d2680c1000a377 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/TabToolbar.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/TabToolbar.tsx @@ -1,15 +1,13 @@ import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - export default styled.div` display: flex; position: relative; z-index: 1; justify-content: space-between; height: 46px; - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; padding: 7px 16px; - box-shadow: 0px 2px 6px 0px #0000000d; + box-shadow: ${(props) => props.theme.colors.shadowXs}; flex: 0 0 auto; `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchResults.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchResults.tsx index a9b1d33306140a..8f2c50323b2100 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchResults.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchResults.tsx @@ -1,16 +1,15 @@ import { ExclamationCircleFilled, LoadingOutlined } from '@ant-design/icons'; -import { Text, colors } from '@components'; +import { Text } from '@components'; import { Button, Pagination, Spin, Typography } from 'antd'; import React from 'react'; import { useHistory } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { EntityActionProps, EntitySearchResults, } from '@app/entity/shared/components/styled/search/EntitySearchResults'; import MatchingViewsLabel from '@app/entity/shared/components/styled/search/MatchingViewsLabel'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { EntityAndType } from '@app/entity/shared/types'; import { SearchFiltersSection } from '@app/search/SearchFiltersSection'; import { combineSiblingsInSearchResults } from '@app/search/utils/combineSiblingsInSearchResults'; @@ -38,7 +37,7 @@ const FiltersContainer = styled.div` max-width: 260px; min-width: 260px; border-right: 1px solid; - border-color: ${(props) => props.theme.styles['border-color-base']}; + border-color: ${(props) => props.theme.colors.border}; `; const ResultContainer = styled.div` @@ -51,7 +50,7 @@ const PaginationInfoContainer = styled.span` padding: 8px; padding-left: 16px; border-top: 1px solid; - border-color: ${(props) => props.theme.styles['border-color-base']}; + border-color: ${(props) => props.theme.colors.border}; display: flex; justify-content: space-between; align-items: center; @@ -72,7 +71,7 @@ const LoadingContainer = styled.div` const StyledLoading = styled(LoadingOutlined)` font-size: 32px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-bottom: 18px; ]`; @@ -91,8 +90,8 @@ const WarningMessage = styled.div` display: flex; margin: 8px 16px 0 16px align-items: center; - color: ${colors.yellow[1000]}; - background-color: ${colors.yellow[0]}; + color: ${(props) => props.theme.colors.textWarning}; + background-color: ${(props) => props.theme.colors.bgSurfaceWarning}; border-radius: 8px; `; @@ -159,6 +158,7 @@ export const EmbeddedListSearchResults = ({ handleViewAllClickWarning, }: Props) => { const history = useHistory(); + const theme = useTheme(); const showSeparateSiblings = useIsShowSeparateSiblingsEnabled(); const combinedSiblingSearchResults = combineSiblingsInSearchResults( showSeparateSiblings, @@ -227,7 +227,7 @@ export const EmbeddedListSearchResults = ({ )} {isViewAllMode && ( - + Results may be incomplete.{' '} {platform && ( diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/MatchingViewsLabel.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/MatchingViewsLabel.tsx index eeab55d21c30fc..38155020ede946 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/search/MatchingViewsLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/search/MatchingViewsLabel.tsx @@ -3,20 +3,19 @@ import React from 'react'; import styled from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { DEFAULT_LIST_VIEWS_PAGE_SIZE } from '@app/entity/view/utils'; import { useListGlobalViewsQuery, useListMyViewsQuery } from '@graphql/view.generated'; import { DataHubViewType } from '@types'; +const StyledMatchingViewsLabel = styled.div` + color: ${(props) => props.theme.colors.textSecondary}; +`; + const MatchingViewsLabel = () => { const userContext = useUserContext(); const selectedViewUrn = userContext?.localState?.selectedViewUrn; - const StyledMatchingViewsLabel = styled.div` - color: ${ANTD_GRAY[8]}; - `; - /** * Fetch all personal/private views using listMyViews */ diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelect.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelect.tsx index 7b88d6cf2e2f42..eb28fb15ba6630 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelect.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelect.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components'; import TabToolbar from '@app/entity/shared/components/styled/TabToolbar'; import { EmbeddedListSearchResults } from '@app/entity/shared/components/styled/search/EmbeddedListSearchResults'; import { SearchSelectBar } from '@app/entity/shared/components/styled/search/SearchSelectBar'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { EntityAndType } from '@app/entity/shared/types'; import { isListSubset } from '@app/entity/shared/utils'; import { SearchBar } from '@app/search/SearchBar'; @@ -30,7 +29,7 @@ const SearchBarContainer = styled.div` justify-content: space-between; align-items: center; padding: 12px; - border-bottom: 1px solid ${ANTD_GRAY[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.bgSurface}; `; const SEARCH_BAR_STYLE = { diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectBar.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectBar.tsx index 7c2c0e54f4226a..e0c9f6c49920b4 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectBar.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectBar.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { SearchSelectActions } from '@app/entity/shared/components/styled/search/SearchSelectActions'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { EntityAndType } from '@app/entity/shared/types'; const CheckboxContainer = styled.div` @@ -21,7 +20,7 @@ const CancelButton = styled(Button)` && { margin-left: 8px; padding: 0px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/action/ActionDropdown.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/action/ActionDropdown.tsx index d64cd1758511b4..e25f90acdb871b 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/search/action/ActionDropdown.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/search/action/ActionDropdown.tsx @@ -3,7 +3,6 @@ import { Button, Dropdown, Tooltip } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { MenuItemStyle } from '@app/entity/view/menu/item/styledComponent'; const DownArrow = styled(CaretDownOutlined)` @@ -12,7 +11,7 @@ const DownArrow = styled(CaretDownOutlined)` font-size: 8px; margin-left: 2px; margin-top: 2px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; @@ -24,7 +23,7 @@ const DropdownWrapper = styled.div<{ disabled: boolean; }>` cursor: ${(props) => (props.disabled ? 'normal' : 'pointer')}; - color: ${(props) => (props.disabled ? ANTD_GRAY[7] : 'none')}; + color: ${(props) => (props.disabled ? props.theme.colors.textDisabled : 'none')}; display: flex; margin-left: 12px; margin-right: 12px; diff --git a/datahub-web-react/src/app/entity/shared/constants.ts b/datahub-web-react/src/app/entity/shared/constants.ts index ff6adf11d1690f..3ac1c84938cff0 100644 --- a/datahub-web-react/src/app/entity/shared/constants.ts +++ b/datahub-web-react/src/app/entity/shared/constants.ts @@ -1,34 +1,5 @@ import { EntityType } from '@types'; -// TODO(Gabe): integrate this w/ the theme -export const REDESIGN_COLORS = { - GREY: '#e5e5e5', - BLUE: '#1890FF', -}; - -export const ANTD_GRAY = { - 1: '#FFFFFF', - 2: '#FAFAFA', - 2.5: '#F8F8F8', - 3: '#F5F5F5', - 4: '#F0F0F0', - 4.5: '#E9E9E9', - 5: '#D9D9D9', - 6: '#BFBFBF', - 7: '#8C8C8C', - 8: '#595959', - 9: '#434343', -}; - -export const ANTD_GRAY_V2 = { - 1: '#F8F9Fa', - 2: '#F3F5F6', - 5: '#DDE0E4', - 6: '#B2B8BD', - 8: '#5E666E', - 10: '#1B1E22', -}; - export const EMPTY_MESSAGES = { documentation: { title: 'No documentation yet', diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx index c5f6c120d43802..1565ef38fb3e3a 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx @@ -9,7 +9,6 @@ import { useUpdateDomainEntityDataOnChange } from '@app/domain/utils'; import { EntityCapabilityType } from '@app/entity/Entity'; import { EntityContext } from '@app/entity/shared/EntityContext'; import { EntityMenuItems } from '@app/entity/shared/EntityDropdown/EntityDropdown'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { EntityHeader } from '@app/entity/shared/containers/profile/header/EntityHeader'; import { EntityTabs } from '@app/entity/shared/containers/profile/header/EntityTabs'; import { EntityProfileNavBar } from '@app/entity/shared/containers/profile/nav/EntityProfileNavBar'; @@ -109,17 +108,17 @@ const HeaderAndTabsFlex = styled.div` &::-webkit-scrollbar { height: 12px; width: 2px; - background: #f2f2f2; + background: ${(props) => props.theme.colors.scrollbarTrack}; } &::-webkit-scrollbar-thumb { - background: #cccccc; + background: ${(props) => props.theme.colors.scrollbarThumb}; -webkit-border-radius: 1ex; - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: ${(props) => props.theme.colors.shadowXs}; } `; const Header = styled.div` - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; padding: 20px 20px 0 20px; flex-shrink: 0; `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityCount.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityCount.tsx index b30da68212648c..3a26ca7f278ae9 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityCount.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityCount.tsx @@ -2,14 +2,12 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - export const EntityCountText = styled(Typography.Text)` display: inline-block; font-size: 12px; line-height: 20px; font-weight: 400; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; interface Props { diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeaderLoadingSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeaderLoadingSection.tsx index bbb87a905f1ab0..46c421c6fc3e9e 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeaderLoadingSection.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeaderLoadingSection.tsx @@ -2,13 +2,11 @@ import { Skeleton, Space } from 'antd'; import * as React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const ContextSkeleton = styled(Skeleton.Input)` && { width: 320px; border-radius: 4px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; @@ -16,7 +14,7 @@ const NameSkeleton = styled(Skeleton.Input)` && { width: 240px; border-radius: 4px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthPopover.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthPopover.tsx index 38e2a39a69ac40..1ef1861168e945 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthPopover.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthPopover.tsx @@ -1,8 +1,7 @@ import { Divider, Popover } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { EntityHealthStatus } from '@app/entity/shared/containers/profile/header/EntityHealthStatus'; import { HealthSummaryIconType, getHealthSummaryIcon, getHealthSummaryMessage } from '@app/shared/health/healthUtils'; @@ -22,7 +21,7 @@ const Icon = styled.span` const Title = styled.span` font-weight: bold; - color: ${ANTD_GRAY[1]}; + color: ${(props) => props.theme.colors.bg}; padding-top: 4px; padding-bottom: 4px; font-size: 14px; @@ -40,7 +39,7 @@ const StyledDivider = styled(Divider)` padding-left: 8px; margin-top: 8px; margin-bottom: 8px; - border-color: ${ANTD_GRAY[5]}; + border-color: ${(props) => props.theme.colors.border}; } `; @@ -53,6 +52,7 @@ type Props = { }; export const EntityHealthPopover = ({ health, baseUrl, children, fontSize, placement = 'right' }: Props) => { + const theme = useTheme(); return ( } - color="#262626" + color={theme.colors.bgSurfaceDarker} placement={placement} zIndex={10000000} > diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthStatus.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthStatus.tsx index 369384d49c2fc0..77268658d89aa9 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthStatus.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHealthStatus.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entity/shared/constants'; import { getHealthRedirectPath, getHealthTypeName } from '@app/shared/health/healthUtils'; import { HealthStatusType } from '@types'; @@ -11,7 +10,7 @@ const StatusContainer = styled.div` display: flex; justify-content: left; align-items: center; - color: ${ANTD_GRAY[1]}; + color: ${(props) => props.theme.colors.bg}; font-size: 14px; `; @@ -25,7 +24,7 @@ const Title = styled.span` const RedirectLink = styled(Link)` margin-left: 4px; - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; `; type Props = { diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ContainerLink.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ContainerLink.tsx index 6830d240ae1e71..4db844ba94c713 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ContainerLink.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ContainerLink.tsx @@ -5,7 +5,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Container, EntityType } from '@types'; @@ -13,11 +12,11 @@ import { Container, EntityType } from '@types'; const ContainerText = styled(Typography.Text)` font-size: 12px; line-height: 20px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const ContainerIcon = styled(FolderOpenOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; &&& { font-size: 12px; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx index 61b62308df5674..33a94fcd2b9b7d 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx @@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Dataset, EntityType } from '@types'; @@ -12,11 +11,11 @@ import { Dataset, EntityType } from '@types'; const DatasetText = styled(Typography.Text)` font-size: 12px; line-height: 20px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const DatasetIcon = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-right: 4px; font-size: 12px; `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx index 6daff61126f447..ee8eedde1a7dd0 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx @@ -1,16 +1,15 @@ import { FolderOutlined, RightOutlined } from '@ant-design/icons'; import { Tooltip, Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import useContentTruncation from '@app/shared/useContentTruncation'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { EntityType, GlossaryNode } from '@types'; export const StyledRightOutlined = styled(RightOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 8px; margin: 0 10px; `; @@ -26,7 +25,7 @@ export const ParentNodesWrapper = styled.div` `; export const Ellipsis = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-right: 2px; `; @@ -57,6 +56,7 @@ interface Props { export default function ParentNodesView({ parentNodes }: Props) { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const { contentRef, isContentTruncated } = useContentTruncation(parentNodes); return ( @@ -65,8 +65,8 @@ export default function ParentNodesView({ parentNodes }: Props) { <> {[...(parentNodes || [])]?.reverse()?.map((parentNode, idx) => ( <> - - + + {entityRegistry.getDisplayName(EntityType.GlossaryNode, parentNode)} {idx + 1 !== parentNodes?.length && } @@ -80,10 +80,10 @@ export default function ParentNodesView({ parentNodes }: Props) { {[...(parentNodes || [])]?.map((parentNode, idx) => ( <> - + {entityRegistry.getDisplayName(EntityType.GlossaryNode, parentNode)} - + {idx + 1 !== parentNodes?.length && } ))} diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx index df12a6b3018ca3..0fd31ed0acda38 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx @@ -3,7 +3,6 @@ import { Maybe } from 'graphql/jsutils/Maybe'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import ContainerLink from '@app/entity/shared/containers/profile/header/PlatformContent/ContainerLink'; import DatasetLink from '@app/entity/shared/containers/profile/header/PlatformContent/DatasetLink'; import { @@ -42,7 +41,7 @@ export const PlatformText = styled(Typography.Text)` font-size: 12px; line-height: 20px; font-weight: 700; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; white-space: nowrap; `; @@ -50,7 +49,7 @@ const PlatformDivider = styled.div` display: inline-block; padding-left: 8px; margin-right: 8px; - border-right: 1px solid ${ANTD_GRAY[4]}; + border-right: 1px solid ${(props) => props.theme.colors.bgSurface}; height: 18px; vertical-align: text-top; `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/StructuredPropertyBadge.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/StructuredPropertyBadge.tsx index 60daa21513fd27..5208070b285791 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/StructuredPropertyBadge.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/StructuredPropertyBadge.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { filterForAssetBadge } from '@app/entity/shared/containers/profile/header/utils'; import { mapStructuredPropertyToPropertyRow } from '@app/entity/shared/tabs/Properties/useStructuredProperties'; -import { Pill, Text, Tooltip, colors } from '@src/alchemy-components'; +import { Pill, Text, Tooltip } from '@src/alchemy-components'; import { getStructuredPropertyValue } from '@src/app/entity/shared/utils'; import { getDisplayName } from '@src/app/govern/structuredProperties/utils'; import { StructuredProperties } from '@src/types.generated'; @@ -13,7 +13,7 @@ export const MAX_PROP_BADGE_WIDTH = 150; const StyledTooltip = styled(Tooltip)` .ant-tooltip-inner { border-radius: 8px; - box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12); + box-shadow: ${(props) => props.theme.colors.shadowSm}; } `; @@ -36,6 +36,7 @@ interface Props { } const StructuredPropertyBadge = ({ structuredProperties }: Props) => { + const theme = useTheme(); const badgeStructuredProperty = structuredProperties?.properties?.find(filterForAssetBadge); const propRow = badgeStructuredProperty ? mapStructuredPropertyToPropertyRow(badgeStructuredProperty) : undefined; @@ -50,21 +51,21 @@ const StructuredPropertyBadge = ({ structuredProperties }: Props) => { const BadgeTooltip = () => { return ( - + {getDisplayName(badgeStructuredProperty.structuredProperty)} - + Value - {propRow?.values[0]?.value} + {propRow?.values[0]?.value} {relatedDescription && ( - + Description - {relatedDescription} + {relatedDescription} )} @@ -72,12 +73,7 @@ const StructuredPropertyBadge = ({ structuredProperties }: Props) => { }; return ( - } - color={colors.white} - overlayInnerStyle={{ width: 250, padding: 16 }} - > + } overlayInnerStyle={{ width: 250, padding: 16 }}> diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/nav/LineageSelector.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/nav/LineageSelector.tsx index b144f2a64f039a..fcc97dc9e58100 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/nav/LineageSelector.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/nav/LineageSelector.tsx @@ -1,11 +1,10 @@ -import { blue, grey } from '@ant-design/colors'; import { InfoCircleOutlined, PartitionOutlined } from '@ant-design/icons'; import { Badge } from 'antd'; import React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { ANTD_GRAY, ENTITY_TYPES_WITH_MANUAL_LINEAGE } from '@app/entity/shared/constants'; +import { ENTITY_TYPES_WITH_MANUAL_LINEAGE } from '@app/entity/shared/constants'; import { useIsSeparateSiblingsMode } from '@app/entity/shared/siblingUtils'; import { navigateToLineageUrl } from '@app/lineage/utils/navigateToLineageUrl'; import { useGetLineageTimeParams } from '@app/lineage/utils/useGetLineageTimeParams'; @@ -37,12 +36,12 @@ const IconGroup = styled.div<{ isSelected: boolean; disabled?: boolean }>` font-size: 14px; color: ${(props) => { if (props.disabled) { - return grey[2]; + return props.theme.colors.textDisabled; } - return !props.isSelected ? 'black' : props.theme.styles['primary-color'] || blue[4]; + return !props.isSelected ? props.theme.colors.text : props.theme.colors.textSelected; }}; &:hover { - color: ${(props) => (props.disabled ? grey[2] : props.theme.styles['primary-color'] || blue[4])}; + color: ${(props) => (props.disabled ? props.theme.colors.textDisabled : props.theme.colors.textHover)}; cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; } `; @@ -59,9 +58,9 @@ const LineageSummary = styled.div` const LineageBadge = styled(Badge)` &&& .ant-badge-count { - background-color: ${ANTD_GRAY[1]}; - color: ${ANTD_GRAY[9]}; - border: 1px solid ${ANTD_GRAY[5]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + border: 1px solid ${(props) => props.theme.colors.border}; font-size: 12px; font-weight: 600; height: 22px; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx index b6f2638c07a2ba..3e01face576e52 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { LineageSelector } from '@app/entity/shared/containers/profile/nav/LineageSelector'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { PageRoutes } from '@conf/Global'; @@ -12,15 +11,15 @@ import { EntityType } from '@types'; export const BrowseRow = styled(Row)` padding: 10px 20px; - background-color: ${(props) => props.theme.styles['body-background']}; + background-color: ${(props) => props.theme.colors.bg}; display: flex; justify-content: space-between; - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; export const BreadcrumbItem = styled(Breadcrumb.Item)<{ disabled?: boolean }>` &&& :hover { - color: ${(props) => (props.disabled ? ANTD_GRAY[7] : props.theme.styles['primary-color'])}; + color: ${(props) => (props.disabled ? props.theme.colors.textDisabled : props.theme.colors.textHover)}; cursor: pointer; } `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx index 6ad2f233fffb89..8a22527ae549bc 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components/macro'; import { useRouteToTab } from '@app/entity/shared/EntityContext'; import MarkdownViewer, { MarkdownView } from '@app/entity/shared/components/legacy/MarkdownViewer'; import NoMarkdownViewer, { removeMarkdown } from '@app/entity/shared/components/styled/StripMarkdownText'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useIsOnTab } from '@app/entity/shared/containers/profile/utils'; import CompactContext from '@app/shared/CompactContext'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -26,13 +25,13 @@ const ContentWrapper = styled.div` const BaContentWrapper = styled.div` margin-top: 8px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-bottom: 8px; font-size: 14px; ${MarkdownView} { font-size: 14px; } - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; interface Props { diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx index ae1c544f71d888..ccb38566767307 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import UsageFacepile from '@app/entity/dataset/profile/UsageFacepile'; import { useBaseEntity, useRouteToTab } from '@app/entity/shared/EntityContext'; import { InfoItem } from '@app/entity/shared/components/styled/InfoItem'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { SidebarHeader } from '@app/entity/shared/containers/profile/sidebar/SidebarHeader'; import { formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; @@ -14,7 +13,7 @@ import { DatasetProfile, Operation, UsageQueryResult } from '@types'; const HeaderInfoBody = styled(Typography.Text)` font-size: 16px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; `; const HeaderContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx index a52e2cb599634e..292a08dc73491d 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx @@ -4,14 +4,13 @@ import styled from 'styled-components'; import { useBaseEntity, useRouteToTab } from '@app/entity/shared/EntityContext'; import { InfoItem } from '@app/entity/shared/components/styled/InfoItem'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { SidebarHeader } from '@app/entity/shared/containers/profile/sidebar/SidebarHeader'; import { GetDatasetQuery } from '@graphql/dataset.generated'; const HeaderInfoBody = styled(Typography.Text)` font-size: 16px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; `; const HeaderContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx index c56ac84959f9ff..026b5e858b451b 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx @@ -1,11 +1,10 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Button, Empty, Form, Modal, Select, message } from 'antd'; import React, { useRef, useState } from 'react'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import DomainNavigator from '@app/domain/nestedDomains/domainNavigator/DomainNavigator'; import { getParentDomains } from '@app/domain/utils'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { tagRender } from '@app/entity/shared/containers/profile/sidebar/tagRenderer'; import { handleBatchError } from '@app/entity/shared/utils'; import ParentEntities from '@app/search/filters/ParentEntities'; @@ -43,7 +42,7 @@ const LoadingWrapper = styled.div` svg { height: 15px; width: 15px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; } `; @@ -54,6 +53,7 @@ const SearchResultContainer = styled.div` `; export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOkOverride, titleOverride }: Props) => { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const [isFocusedOnInput, setIsFocusedOnInput] = useState(false); const [inputValue, setInputValue] = useState(''); @@ -239,7 +239,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk } > diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx index cdafb883360658..c8cbe8da7b159c 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx @@ -2,7 +2,6 @@ import React from 'react'; import styled from 'styled-components/macro'; import { useBaseEntity, useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import LastIngested from '@app/entity/shared/containers/profile/sidebar/LastIngested'; import { EntitySidebarSection } from '@app/entity/shared/types'; @@ -11,7 +10,7 @@ const ContentContainer = styled.div` & > div { &:not(:first-child) { - border-top: 1px solid ${ANTD_GRAY[4]}; + border-top: 1px solid ${(props) => props.theme.colors.bgSurface}; } padding-top: 20px; margin-bottom: 20px; @@ -19,19 +18,19 @@ const ContentContainer = styled.div` &::-webkit-scrollbar { height: 12px; width: 2px; - background: #f2f2f2; + background: ${(props) => props.theme.colors.scrollbarTrack}; } &::-webkit-scrollbar-thumb { - background: #cccccc; + background: ${(props) => props.theme.colors.scrollbarThumb}; -webkit-border-radius: 1ex; - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: ${(props) => props.theme.colors.shadowXs}; } `; const LastIngestedSection = styled.div` padding: 12px 0 12px 0; margin-bottom: 0; - border-bottom: 1px solid ${ANTD_GRAY[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.bgSurface}; `; type Props = { diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/OptionalPromptsRemaining.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/OptionalPromptsRemaining.tsx index 2b89d56aa72745..5dbdfaf88b032d 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/OptionalPromptsRemaining.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/OptionalPromptsRemaining.tsx @@ -1,11 +1,10 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { pluralize } from '@app/shared/textUtil'; const OptionalPromptsWrapper = styled.div` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; margin-top: 4px; `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/components.ts b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/components.ts index 3c6aef5517d3db..cdd940af38c773 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/components.ts +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/FormInfo/components.ts @@ -34,7 +34,7 @@ export const StyledReadOutlined = styled(ReadOutlined)<{ addLineHeight?: boolean margin-right: 8px; height: 13.72px; width: 17.5px; - color: #373d44; + color: ${(props) => props.theme.colors.text}; ${(props) => props.addLineHeight && `line-height: 24px;`} `; @@ -42,19 +42,19 @@ export const StyledReadFilled = styled(ReadFilled)<{ addLineHeight?: boolean }>` margin-right: 8px; height: 13.72px; width: 17.5px; - color: #7532a4; + color: ${(props) => props.theme.colors.textBrand}; ${(props) => props.addLineHeight && `line-height: 24px;`} `; export const CTAWrapper = styled.div<{ shouldDisplayBackground?: boolean }>` - color: #373d44; + color: ${(props) => props.theme.colors.text}; font-size: 14px; ${(props) => props.shouldDisplayBackground && ` border-radius: 8px; padding: 16px; - background-color: #f9f0ff; - border: 1px solid #8338b8; + background-color: ${props.theme.colors.bgSurface}; + border: 1px solid ${props.theme.colors.borderBrand}; `} `; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/HeaderAndTabs.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/HeaderAndTabs.tsx index e1fa4129c2df1e..58240b65e7e878 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/HeaderAndTabs.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/HeaderAndTabs.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; let isResizing = false; @@ -15,6 +15,7 @@ const ResizableDiv = styled.div<{ width }>` `; const HeaderAndTabs = ({ children }: Props) => { + const theme = useTheme(); const initialWidth = 70 / (100 / document.documentElement.clientWidth); const [sidebarWidth, setSidebarWidth] = useState(initialWidth); @@ -58,7 +59,10 @@ const HeaderAndTabs = ({ children }: Props) => { {children} {/* eslint-disable jsx-a11y/no-static-element-interactions */} -
+
header
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/LastIngested.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/LastIngested.tsx index e8de9debbaffa0..3afc19b812b977 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/LastIngested.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/LastIngested.tsx @@ -1,19 +1,17 @@ -import { green, orange, red } from '@ant-design/colors'; import { QuestionCircleOutlined } from '@ant-design/icons'; import { Image, Popover } from 'antd'; import moment from 'moment-timezone'; import React from 'react'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { getDisplayedEntityType } from '@app/entity/shared/containers/profile/header/PlatformContent/PlatformContentContainer'; import { getPlatformName } from '@app/entity/shared/utils'; import { toLocalDateTimeString, toRelativeTimeString } from '@app/shared/time/timeUtils'; import { useEntityRegistry } from '@app/useEntityRegistry'; const StyledDot = styled.div<{ color: string }>` - border: 1px solid ${ANTD_GRAY[5]}; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 50%; background-color: ${(props) => props.color}; width: 10px; @@ -39,7 +37,7 @@ const PopoverContentWrapper = styled.div``; const MainContent = styled.div` align-items: center; display: flex; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const RelativeDescription = styled.div` @@ -49,13 +47,13 @@ const RelativeDescription = styled.div` `; const SubText = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 10px; font-style: italic; `; const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-left: 7px; font-size: 10px; `; @@ -85,30 +83,34 @@ const PreviewImage = styled(Image)` `; function TooltipContent() { + const theme = useTheme(); return (
- Synchronized in the past week + Synchronized in the past week - Synchronized in the past month + Synchronized in the past month - Synchronized more than a month ago + Synchronized more than a month ago
); } -export function getLastIngestedColor(lastIngested: number) { +export function getLastIngestedColor( + lastIngested: number, + colors: { textSuccess: string; textWarning: string; textError: string }, +) { const lastIngestedDate = moment(lastIngested); if (lastIngestedDate.isAfter(moment().subtract(1, 'week'))) { - return green[5]; + return colors.textSuccess; } if (lastIngestedDate.isAfter(moment().subtract(1, 'month'))) { - return orange[5]; + return colors.textWarning; } - return red[5]; + return colors.textError; } interface Props { @@ -116,10 +118,11 @@ interface Props { } function LastIngested({ lastIngested }: Props) { + const theme = useTheme(); const { entityData, entityType } = useEntityData(); const entityRegistry = useEntityRegistry(); const displayedEntityType = getDisplayedEntityType(entityData, entityRegistry, entityType); - const lastIngestedColor = getLastIngestedColor(lastIngested); + const lastIngestedColor = getLastIngestedColor(lastIngested, theme.colors); const platformName = getPlatformName(entityData); const platformLogoUrl = entityData?.platform?.properties?.logoUrl; diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/sidebar/OwnershipTypeSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/sidebar/OwnershipTypeSection.tsx index 74d4c6d825b06c..5808ebf9378ca2 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/sidebar/OwnershipTypeSection.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/sidebar/OwnershipTypeSection.tsx @@ -19,7 +19,7 @@ const OwnershipTypeNameText = styled(Typography.Text)` font-weight: 500; font-size: 10px; line-height: 14px; - color: #434343; + color: ${(props) => props.theme.colors.text}; `; const OwnersContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx index a2e5dbb0f292c9..916d4b8be862d1 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx @@ -1,8 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - type Props = { setSidePanelWidth: (width: number) => void; initialSize: number; @@ -11,7 +9,7 @@ type Props = { const ResizerBar = styled.div` min-height: 100%; - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; cursor: col-resize; `; export const ProfileSidebarResizer = ({ setSidePanelWidth, initialSize, isSidebarOnLeft }: Props) => { diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/__tests__/LastIngested.test.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/__tests__/LastIngested.test.tsx index 87bc718699fd9d..07ccb462d13641 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/__tests__/LastIngested.test.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/__tests__/LastIngested.test.tsx @@ -1,42 +1,47 @@ -import { green, orange, red } from '@ant-design/colors'; import moment from 'moment-timezone'; import { getLastIngestedColor } from '@app/entity/shared/containers/profile/sidebar/LastIngested'; +const mockColors = { + textSuccess: '#textSuccess', + textWarning: '#textWarning', + textError: '#textError', +}; + describe('getLastIngestedColor', () => { it('should return green if the last ingested date is the present moment', () => { const lastIngested = moment().valueOf(); - const lastIngestedColor = getLastIngestedColor(lastIngested); - expect(lastIngestedColor).toBe(green[5]); + const lastIngestedColor = getLastIngestedColor(lastIngested, mockColors); + expect(lastIngestedColor).toBe(mockColors.textSuccess); }); it('should return green if the last ingested date is less than a week ago from now', () => { const lastIngested = moment().subtract(1, 'day').valueOf(); - const lastIngestedColor = getLastIngestedColor(lastIngested); - expect(lastIngestedColor).toBe(green[5]); + const lastIngestedColor = getLastIngestedColor(lastIngested, mockColors); + expect(lastIngestedColor).toBe(mockColors.textSuccess); }); it('should return orange if the last ingested date is exactly a week ago', () => { const lastIngested = moment().subtract(1, 'week').valueOf(); - const lastIngestedColor = getLastIngestedColor(lastIngested); - expect(lastIngestedColor).toBe(orange[5]); + const lastIngestedColor = getLastIngestedColor(lastIngested, mockColors); + expect(lastIngestedColor).toBe(mockColors.textWarning); }); it('should return orange if the last ingested date is more than a week but less than a month ago', () => { const lastIngested = moment().subtract(2, 'week').valueOf(); - const lastIngestedColor = getLastIngestedColor(lastIngested); - expect(lastIngestedColor).toBe(orange[5]); + const lastIngestedColor = getLastIngestedColor(lastIngested, mockColors); + expect(lastIngestedColor).toBe(mockColors.textWarning); }); it('should return red if the last ingested date is exactly a month ago', () => { const lastIngested = moment().subtract(1, 'month').valueOf(); - const lastIngestedColor = getLastIngestedColor(lastIngested); - expect(lastIngestedColor).toBe(red[5]); + const lastIngestedColor = getLastIngestedColor(lastIngested, mockColors); + expect(lastIngestedColor).toBe(mockColors.textError); }); it('should return red if the last ingested date is more than a month ago', () => { const lastIngested = moment().subtract(3, 'month').valueOf(); - const lastIngestedColor = getLastIngestedColor(lastIngested); - expect(lastIngestedColor).toBe(red[5]); + const lastIngestedColor = getLastIngestedColor(lastIngested, mockColors); + expect(lastIngestedColor).toBe(mockColors.textError); }); }); diff --git a/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx b/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx index 5e5daac2af5d7d..d1826507bcc28e 100644 --- a/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx @@ -8,7 +8,6 @@ import { EventType } from '@app/analytics'; import analytics from '@app/analytics/analytics'; import { IconStyleType } from '@app/entity/Entity'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { getDisplayedEntityType } from '@app/entity/shared/containers/profile/header/PlatformContent/PlatformContentContainer'; import { useAppConfig } from '@app/useAppConfig'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -34,7 +33,7 @@ const EntityContent = styled.div` const EntityTypeWrapper = styled.div` font-size: 12px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const TypeIcon = styled.span` @@ -73,7 +72,7 @@ export default function EmbeddedHeader() { }); } - const typeIcon = entityRegistry.getIcon(entityType, 12, IconStyleType.ACCENT, ANTD_GRAY[8]); + const typeIcon = entityRegistry.getIcon(entityType, 12, IconStyleType.ACCENT, themeConfig.colors.textSecondary); const displayedEntityType = getDisplayedEntityType(entityData, entityRegistry, entityType); const entityName = entityRegistry.getDisplayName(entityType, entityData); const logoUrl = diff --git a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingAssertions.tsx b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingAssertions.tsx index 3ed9fd08cf1fc0..d03ca8149f261d 100644 --- a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingAssertions.tsx +++ b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingAssertions.tsx @@ -8,7 +8,7 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; const FailingSectionWrapper = styled.div` margin: 5px 0 0 34px; font-size: 14px; - color: black; + color: ${(props) => props.theme.colors.text}; `; const FailingDataWrapper = styled.div` diff --git a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingEntity.tsx b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingEntity.tsx index 34473f2d30ebb2..d9efebab9513b7 100644 --- a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingEntity.tsx +++ b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingEntity.tsx @@ -1,4 +1,3 @@ -import { red } from '@ant-design/colors'; import Icon from '@ant-design/icons/lib/components/Icon'; import { Typography } from 'antd'; import React from 'react'; @@ -16,8 +15,8 @@ const AssertionsSummaryWrapper = styled.span` font-size: 10px; font-weight: 700; line-height: 13px; - color: ${red[7]}; - border: 1px solid ${red[7]}; + color: ${(props) => props.theme.colors.textError}; + border: 1px solid ${(props) => props.theme.colors.borderError}; border-radius: 8px; margin-left: 5px; padding: 0 3px; diff --git a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingInputs.tsx b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingInputs.tsx index fd998d79528482..8a251f95268605 100644 --- a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingInputs.tsx +++ b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/FailingInputs.tsx @@ -1,9 +1,7 @@ -import { orange } from '@ant-design/colors'; import { DownOutlined, WarningFilled } from '@ant-design/icons'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import FailingAssertions from '@app/entity/shared/embed/UpstreamHealth/FailingAssertions'; import { UpstreamSummary } from '@app/entity/shared/embed/UpstreamHealth/utils'; @@ -14,17 +12,17 @@ const TextWrapper = styled.span` `; const StyledWarning = styled(WarningFilled)` - color: ${orange[5]}; + color: ${(props) => props.theme.colors.textWarning}; font-size: 14px; `; const FailingDetailsWrapper = styled.span` font-size: 14px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; margin-left: 8px; &:hover { cursor: pointer; - color: $ ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textHover}; } `; diff --git a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/UpstreamHealth.tsx b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/UpstreamHealth.tsx index 90387b4c90b280..97e274f9cbaf2f 100644 --- a/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/UpstreamHealth.tsx +++ b/datahub-web-react/src/app/entity/shared/embed/UpstreamHealth/UpstreamHealth.tsx @@ -1,11 +1,9 @@ -import { green } from '@ant-design/colors'; import { CheckCircleFilled, LoadingOutlined } from '@ant-design/icons'; import Icon from '@ant-design/icons/lib/components/Icon'; import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import FailingInputs from '@app/entity/shared/embed/UpstreamHealth/FailingInputs'; import { extractUpstreamSummary } from '@app/entity/shared/embed/UpstreamHealth/utils'; @@ -34,11 +32,11 @@ const UnknownText = styled.span` `; const StyledIcon = styled(Icon)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const StyledCheck = styled(CheckCircleFilled)` - color: ${green[6]}; + color: ${(props) => props.theme.colors.textSuccess}; font-size: 14px; `; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/EntityFormModal.tsx b/datahub-web-react/src/app/entity/shared/entityForm/EntityFormModal.tsx index 0f7797ccb431c1..11a4655418500f 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/EntityFormModal.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/EntityFormModal.tsx @@ -29,7 +29,7 @@ const StyledModal = styled(Modal)` const StyledClose = styled(CloseOutlined)` && { - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-size: 24px; margin: 18px 12px 0 0; } diff --git a/datahub-web-react/src/app/entity/shared/entityForm/Form.tsx b/datahub-web-react/src/app/entity/shared/entityForm/Form.tsx index 9ca1ee88ac01fb..d1c4bec118312f 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/Form.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/Form.tsx @@ -2,7 +2,6 @@ import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import useGetPromptInfo from '@app/entity/shared/containers/profile/sidebar/FormInfo/useGetPromptInfo'; import { getFormAssociation } from '@app/entity/shared/containers/profile/sidebar/FormInfo/utils'; import FormRequestedBy from '@app/entity/shared/entityForm/FormSelectionModal/FormRequestedBy'; @@ -20,7 +19,7 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; import { FormPrompt } from '@types'; const TabWrapper = styled.div` - background-color: ${ANTD_GRAY_V2[1]}; + background-color: ${(props) => props.theme.colors.bgSurface}; overflow: auto; padding: 24px; flex: 1; @@ -39,7 +38,7 @@ const SubTitle = styled(PromptSubTitle)` `; const RequestedByWrapper = styled(PromptSubTitle)` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; interface Props { diff --git a/datahub-web-react/src/app/entity/shared/entityForm/FormByEntity.tsx b/datahub-web-react/src/app/entity/shared/entityForm/FormByEntity.tsx index 3cdbdf298eef6b..4c1c49471f61f1 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/FormByEntity.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/FormByEntity.tsx @@ -2,7 +2,6 @@ import React from 'react'; import styled from 'styled-components'; import { EntityContext, useEntityContext } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import EntityInfo from '@app/entity/shared/containers/profile/sidebar/EntityInfo/EntityInfo'; import ProfileSidebar from '@app/entity/shared/containers/profile/sidebar/ProfileSidebar'; import { useEntityFormContext } from '@app/entity/shared/entityForm/EntityFormContext'; @@ -12,7 +11,7 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; import { useIsThemeV2 } from '@app/useIsThemeV2'; const ContentWrapper = styled.div` - background-color: ${ANTD_GRAY_V2[1]}; + background-color: ${(props) => props.theme.colors.bgSurface}; max-height: 100%; display: flex; flex-direction: column; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/FormPageHeader.tsx b/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/FormPageHeader.tsx index 7620a43ce877e0..244020171d1f86 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/FormPageHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/FormPageHeader.tsx @@ -5,11 +5,11 @@ import AppLogoLink from '@app/shared/AppLogoLink'; const Header = styled.div` padding: 12px 24px; - background-color: black; + background-color: ${(props) => props.theme.colors.bgSurfaceDarker}; font-size: 24px; display: flex; align-items: center; - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; justify-content: space-between; `; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/components.ts b/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/components.ts index 9d2b386ab9afef..9b26c6c7fcc1b6 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/components.ts +++ b/datahub-web-react/src/app/entity/shared/entityForm/FormHeader/components.ts @@ -1,13 +1,11 @@ import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; - import BackgroundDots from '@images/background_dots.svg'; export const BulkNavigationWrapper = styled.div<{ $hideBackground?: boolean }>` padding: 16px 68px 16px 24px; - background-color: ${ANTD_GRAY_V2[10]}; + background-color: ${(props) => props.theme.colors.bgSurfaceDarker}; display: flex; justify-content: flex-end; ${(props) => @@ -21,7 +19,7 @@ export const BulkNavigationWrapper = styled.div<{ $hideBackground?: boolean }>` export const NavigationWrapper = styled.div<{ isHidden: boolean }>` font-size: 20px; - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; display: flex; flex-wrap: nowrap; ${(props) => props.isHidden && 'opacity: 0;'} diff --git a/datahub-web-react/src/app/entity/shared/entityForm/FormSelectionModal/FormItem.tsx b/datahub-web-react/src/app/entity/shared/entityForm/FormSelectionModal/FormItem.tsx index 684e56e4dcd11c..326c4b4af8f1a7 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/FormSelectionModal/FormItem.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/FormSelectionModal/FormItem.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import useGetPromptInfo from '@app/entity/shared/containers/profile/sidebar/FormInfo/useGetPromptInfo'; import useIsUserAssigned from '@app/entity/shared/containers/profile/sidebar/FormInfo/useIsUserAssigned'; import { @@ -30,13 +29,13 @@ const FormName = styled.div` const FormAssigner = styled.div` font-size: 14px; - color: #373d44; + color: ${(props) => props.theme.colors.text}; margin-top: -4px; margin-bottom: 4px; `; const OptionalText = styled.div` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-weight: normal; `; @@ -47,7 +46,7 @@ const CompleteWrapper = styled.div` const FormInfoWrapper = styled.div` font-size: 12px; - color: #373d44; + color: ${(props) => props.theme.colors.text}; font-weight: 600; `; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/ProgressBar.tsx b/datahub-web-react/src/app/entity/shared/entityForm/ProgressBar.tsx index f611c5c17a5c14..a4a7fa21942b1d 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/ProgressBar.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/ProgressBar.tsx @@ -1,8 +1,7 @@ import { Progress } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import useGetPromptInfo from '@app/entity/shared/containers/profile/sidebar/FormInfo/useGetPromptInfo'; const StyledProgress = styled(Progress)` @@ -23,6 +22,7 @@ interface Props { formUrn: string; } export default function ProgressBar({ formUrn }: Props) { + const theme = useTheme(); const { totalRequiredSchemaFieldPrompts, numRequiredPromptsRemaining, requiredEntityPrompts } = useGetPromptInfo(formUrn); const totalRequiredPrompts = requiredEntityPrompts.length + totalRequiredSchemaFieldPrompts; @@ -32,8 +32,8 @@ export default function ProgressBar({ formUrn }: Props) { ); } diff --git a/datahub-web-react/src/app/entity/shared/entityForm/prompts/Prompt.tsx b/datahub-web-react/src/app/entity/shared/entityForm/prompts/Prompt.tsx index 8acbe9ed46dc79..b52a364b466317 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/prompts/Prompt.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/prompts/Prompt.tsx @@ -9,7 +9,7 @@ import { useSubmitFormPromptMutation } from '@graphql/form.generated'; import { FormPromptType, FormPrompt as PromptEntity, SchemaField, SubmitFormPromptInput } from '@types'; export const PromptWrapper = styled.div` - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 8px; padding: 24px; margin-bottom: 8px; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/CompletedPromptAuditStamp.tsx b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/CompletedPromptAuditStamp.tsx index 3d0325634e41ba..bd25801b29e35a 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/CompletedPromptAuditStamp.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/CompletedPromptAuditStamp.tsx @@ -3,8 +3,6 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; - import GreenCircleIcon from '@images/greenCircleTwoTone.svg?react'; const PadIcon = styled.div` @@ -20,7 +18,7 @@ const CompletedPromptContainer = styled.div` `; const AuditStamp = styled.div` - color: #373d44; + color: ${(props) => props.theme.colors.text}; font-size: 14px; font-family: Manrope; font-weight: 600; @@ -31,7 +29,7 @@ const AuditStamp = styled.div` `; const AuditStampSubTitle = styled.div` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; font-family: Manrope; font-weight: 500; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/StructuredPropertyPrompt.tsx b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/StructuredPropertyPrompt.tsx index 7de28ab51e888f..0e5abf2d8a39d2 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/StructuredPropertyPrompt.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/StructuredPropertyPrompt.tsx @@ -6,7 +6,6 @@ import StructuredPropertyInput from '@app/entity/shared/components/styled/Struct import CompletedPromptAuditStamp from '@app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/CompletedPromptAuditStamp'; import useStructuredPropertyPrompt from '@app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/useStructuredPropertyPrompt'; import usePromptCompletionInfo from '@app/entity/shared/entityForm/prompts/usePromptCompletionInfo'; -import { applyOpacity } from '@app/shared/styleUtils'; import { FormPrompt, SchemaField, SubmitFormPromptInput } from '@types'; @@ -14,7 +13,7 @@ const PromptWrapper = styled.div<{ displayBulkStyles?: boolean }>` display: flex; justify-content: space-between; height: min-content; - ${(props) => props.displayBulkStyles && `color: white;`} + ${(props) => props.displayBulkStyles && `color: ${props.theme.colors.textOnFillDefault};`} `; const PromptTitle = styled.div<{ displayBulkStyles?: boolean }>` @@ -27,11 +26,11 @@ const PromptTitle = styled.div<{ displayBulkStyles?: boolean }>` const RequiredText = styled.span<{ displayBulkStyles?: boolean }>` font-size: 12px; margin-left: 4px; - color: #a8071a; + color: ${(props) => props.theme.colors.textError}; ${(props) => props.displayBulkStyles && ` - color: #FFCCC7; + color: ${props.theme.colors.textError}; margin-left: 8px; `} `; @@ -52,7 +51,7 @@ const StyledButton = styled(Button)` margin-top: 16px; &:focus { - box-shadow: 0 0 3px 2px ${(props) => applyOpacity(props.theme.styles['primary-color'] || '', 50)}; + box-shadow: ${(props) => props.theme.colors.shadowFocusBrand}; } `; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/UrnInput/useUrnInput.tsx b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/UrnInput/useUrnInput.tsx index cb3a6210ac25b7..2b1fdab6546434 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/UrnInput/useUrnInput.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/UrnInput/useUrnInput.tsx @@ -20,7 +20,7 @@ const StyleTag = styled(Tag)` align-items: center; white-space: nowrap; opacity: 1; - color: #434343; + color: ${(props) => props.theme.colors.text}; line-height: 16px; font-size: 12px; max-width: 100%; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/ValueDescription.tsx b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/ValueDescription.tsx index f1b7606de92f24..07173ff3ed1e75 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/ValueDescription.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/prompts/StructuredPropertyPrompt/ValueDescription.tsx @@ -1,10 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; - const DescriptionText = styled.span` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const DescriptionSeparator = styled.span` diff --git a/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/DropdownHeader.tsx b/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/DropdownHeader.tsx index 8814ea79f99c9f..52fe58e7967533 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/DropdownHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/DropdownHeader.tsx @@ -4,7 +4,6 @@ import styled from 'styled-components'; import translateFieldPath from '@app/entity/dataset/profile/schema/utils/translateFieldPath'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { getNumPromptsCompletedForField } from '@app/entity/shared/containers/profile/sidebar/FormInfo/utils'; import { useEntityFormContext } from '@app/entity/shared/entityForm/EntityFormContext'; import { pluralize } from '@app/shared/textUtil'; @@ -22,13 +21,13 @@ const HeaderWrapper = styled.div` const PromptsRemainingText = styled.span` font-size: 14px; - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-weight: 400; `; const PromptsCompletedText = styled.span` font-size: 14px; - color: #373d44; + color: ${(props) => props.theme.colors.text}; font-weight: 600; `; diff --git a/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/SchemaFieldDropdown.tsx b/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/SchemaFieldDropdown.tsx index e54ffa7d8f482e..fae50d874bfd0c 100644 --- a/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/SchemaFieldDropdown.tsx +++ b/datahub-web-react/src/app/entity/shared/entityForm/schemaFieldPrompts/SchemaFieldDropdown.tsx @@ -16,7 +16,7 @@ const StyledCollapse = styled(Collapse)` padding: 12px 0; } &&& .ant-collapse-item { - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 5px; } .ant-collapse-content-box { diff --git a/datahub-web-react/src/app/entity/shared/propagation/PropagationDetails.tsx b/datahub-web-react/src/app/entity/shared/propagation/PropagationDetails.tsx index 8e0d7e3ebc39c5..0aadd7dfc79de1 100644 --- a/datahub-web-react/src/app/entity/shared/propagation/PropagationDetails.tsx +++ b/datahub-web-react/src/app/entity/shared/propagation/PropagationDetails.tsx @@ -1,6 +1,6 @@ import { Popover } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import PropagationEntityLink from '@app/entity/shared/propagation/PropagationEntityLink'; import { PropagateThunderbolt, PropagateThunderboltFilled } from '@app/entity/shared/propagation/PropagationIcon'; @@ -17,13 +17,13 @@ const PopoverTitle = styled.div` font-weight: bold; font-size: 14px; padding: 6px 0px; - color: #eeecfa; + color: ${(props) => props.theme.colors.textOnFillDefault}; `; const PopoverDescription = styled.div` max-width: 340px; font-size: 14px; - color: #eeecfa; + color: ${(props) => props.theme.colors.textOnFillDefault}; display: inline; padding: 0px 0px 8px 0px; `; @@ -39,7 +39,7 @@ const PopoverAttribute = styled.div` const PopoverAttributeTitle = styled.div` font-size: 14px; - color: #eeecfa; + color: ${(props) => props.theme.colors.textOnFillDefault}; font-weight: bold; margin: 8px 0px; overflow: hidden; @@ -55,6 +55,7 @@ interface Props { } export default function PropagationDetails({ sourceDetail }: Props) { + const themeConfig = useTheme(); const { isPropagated, origin: { entity: originEntity }, @@ -95,7 +96,7 @@ export default function PropagationDetails({ sourceDetail }: Props) { return ( diff --git a/datahub-web-react/src/app/entity/shared/propagation/PropagationIcon.tsx b/datahub-web-react/src/app/entity/shared/propagation/PropagationIcon.tsx index 5c57d4a2d1b96e..60af5ca36ed2fc 100644 --- a/datahub-web-react/src/app/entity/shared/propagation/PropagationIcon.tsx +++ b/datahub-web-react/src/app/entity/shared/propagation/PropagationIcon.tsx @@ -1,22 +1,20 @@ import { ThunderboltFilled } from '@ant-design/icons'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entity/shared/constants'; - export const PropagateThunderbolt = styled(ThunderboltFilled)` && { - color: #a7c7fa; + color: ${(props) => props.theme.colors.icon}; } font-size: 16px; &:hover { - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; } margin-right: 4px; `; export const PropagateThunderboltFilled = styled(ThunderboltFilled)` && { - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; } font-size: 16px; margin-right: 4px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessButtonHelpers.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessButtonHelpers.tsx index 196f2f1a3da0ba..11f06590e005cf 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessButtonHelpers.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessButtonHelpers.tsx @@ -2,8 +2,6 @@ import { Button, Tooltip } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entity/shared/constants'; - /** * Tooltip message for when user already has access */ @@ -14,8 +12,8 @@ export const ACCESS_GRANTED_TOOLTIP = 'You already have access to this role'; * Supports both enabled (request) and disabled (granted) states. */ export const AccessButton = styled(Button)` - background-color: ${REDESIGN_COLORS.BLUE}; - color: ${ANTD_GRAY[1]}; + background-color: ${(props) => props.theme.colors.bgSurfaceInfo}; + color: ${(props) => props.theme.colors.bg}; width: 80px; height: 30px; border-radius: 3.5px; @@ -23,22 +21,22 @@ export const AccessButton = styled(Button)` font-weight: bold; &:hover { - background-color: ${(props) => props.theme.styles['primary-color'] || '#18baff'}; - color: ${ANTD_GRAY[1]}; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; + color: ${(props) => props.theme.colors.bg}; border: none; } /* Disabled state when user already has access */ &:disabled { - background-color: ${ANTD_GRAY[3]}; - color: ${ANTD_GRAY[6]}; + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.textDisabled}; cursor: not-allowed; - border: 1px solid ${ANTD_GRAY[5]}; + border: 1px solid ${(props) => props.theme.colors.border}; &:hover { - background-color: ${ANTD_GRAY[3]}; - color: ${ANTD_GRAY[6]}; - border: 1px solid ${ANTD_GRAY[5]}; + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.textDisabled}; + border: 1px solid ${(props) => props.theme.colors.border}; } } `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx index 69f94c34b35adc..22b97f78ac6e3c 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/AccessManagement/AccessManagement.tsx @@ -5,7 +5,6 @@ import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { RoleAccessData, renderAccessButton, @@ -20,12 +19,12 @@ const StyledTable = styled(Table)` height: inherit; &&& .ant-table-cell { - background-color: #fff; + background-color: ${(props) => props.theme.colors.bgSurface}; } &&& .ant-table-thead .ant-table-cell { font-weight: 600; font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; } && .ant-table-thead @@ -33,7 +32,7 @@ const StyledTable = styled(Table)` > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not( [colspan] )::before { - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; } ` as typeof Table; @@ -41,8 +40,8 @@ const StyledTable = styled(Table)` * Styled component for empty access state display */ const EmptyAccessSection = styled.section` - background-color: ${ANTD_GRAY[1]}; - color: ${ANTD_GRAY[8]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.textSecondary}; width: 83px; text-align: center; border-radius: 3px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/TestResultsSummary.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/TestResultsSummary.tsx index 2403755f23338f..e8cc7cc1f00361 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/TestResultsSummary.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/TestResultsSummary.tsx @@ -1,9 +1,7 @@ import { CheckCircle, Stop, XCircle } from '@phosphor-icons/react'; import { Tooltip, Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; - -import { colors } from '@src/alchemy-components/theme'; +import styled, { useTheme } from 'styled-components'; const SummaryHeader = styled.div` width: 100%; @@ -12,7 +10,7 @@ const SummaryHeader = styled.div` padding-bottom: 20px; display: flex; align-items: center; - border-bottom: 1px solid ${colors.gray[100]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const SummaryContainer = styled.div``; @@ -39,14 +37,17 @@ type Props = { summary: TestsSummary; }; -const getSummaryIcon = (summary: TestsSummary) => { +const getSummaryIcon = ( + summary: TestsSummary, + theme: { colors: { text: string; textSuccess: string; textError: string } }, +) => { if (summary.total === 0) { - return ; + return ; } if (summary.passing === summary.total) { - return ; + return ; } - return ; + return ; }; const getSummaryMessage = (summary: TestsSummary) => { @@ -63,7 +64,8 @@ const getSummaryMessage = (summary: TestsSummary) => { }; export const TestResultsSummary = ({ summary }: Props) => { - const summaryIcon = getSummaryIcon(summary); + const theme = useTheme(); + const summaryIcon = getSummaryIcon(summary, theme); const summaryMessage = getSummaryMessage(summary); const subtitleMessage = `${summary.passing} passing tests, ${summary.failing} failing tests`; return ( diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/testUtils.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/testUtils.tsx index 0da8da7327fc46..d18cfb85bca297 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/testUtils.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Governance/testUtils.tsx @@ -1,11 +1,10 @@ import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; import React from 'react'; +import ColorTheme from '@src/conf/theme/colorThemes/types'; + import { TestResultType } from '@types'; -/** - * Returns the display text assoociated with an Test Result Type - */ export const getResultText = (result: TestResultType) => { switch (result) { case TestResultType.Success: @@ -17,28 +16,19 @@ export const getResultText = (result: TestResultType) => { } }; -/** - * Returns the display color assoociated with an TestResultType - */ -const SUCCESS_COLOR_HEX = '#4db31b'; -const FAILURE_COLOR_HEX = '#F5222D'; - -export const getResultColor = (result: TestResultType) => { +export const getResultColor = (result: TestResultType, colors?: Partial) => { switch (result) { case TestResultType.Success: - return SUCCESS_COLOR_HEX; + return colors?.iconSuccess ?? '#4db31b'; case TestResultType.Failure: - return FAILURE_COLOR_HEX; + return colors?.iconError ?? '#F5222D'; default: throw new Error(`Unsupported Test Result Type ${result} provided.`); } }; -/** - * Returns the display icon assoociated with an TestResultType - */ -export const getResultIcon = (result: TestResultType) => { - const resultColor = getResultColor(result); +export const getResultIcon = (result: TestResultType, colors?: Partial) => { + const resultColor = getResultColor(result, colors); switch (result) { case TestResultType.Success: return ; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx index e3a199b762c594..233b88b86adfaf 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueriesListSection.tsx @@ -3,7 +3,6 @@ import { Pagination, Tooltip, Typography } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import QueriesList from '@app/entity/shared/tabs/Dataset/Queries/QueriesList'; import { Query } from '@app/entity/shared/tabs/Dataset/Queries/types'; import { DEFAULT_PAGE_SIZE } from '@app/entity/shared/tabs/Dataset/Queries/utils/constants'; @@ -32,7 +31,7 @@ const StyledPagination = styled(Pagination)` const StyledInfoOutlined = styled(InfoCircleOutlined)` margin-left: 8px; font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryBuilderForm.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryBuilderForm.tsx index f2536e6986e37a..1bcc3f9a2c00a9 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryBuilderForm.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryBuilderForm.tsx @@ -3,18 +3,17 @@ import { Form, Input, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { QueryBuilderState } from '@app/entity/shared/tabs/Dataset/Queries/types'; import { Editor as MarkdownEditor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; const EditorWrapper = styled.div` - border: 1px solid ${ANTD_GRAY[5]}; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 1px; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const StyledEditor = styled(MarkdownEditor)` - border: 1px solid ${ANTD_GRAY[4.5]}; + border: 1px solid ${(props) => props.theme.colors.border}; `; const QUERY_EDITOR_HEIGHT = '240px'; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCard.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCard.tsx index 3ed4ebf13d5a79..2c54396a16b4a5 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCard.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCard.tsx @@ -1,15 +1,14 @@ import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import QueryCardDetails from '@app/entity/shared/tabs/Dataset/Queries/QueryCardDetails'; import QueryCardHeader from '@app/entity/shared/tabs/Dataset/Queries/QueryCardHeader'; import QueryCardQuery from '@app/entity/shared/tabs/Dataset/Queries/QueryCardQuery'; const Card = styled.div` - border: 1px solid ${ANTD_GRAY[5]}; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 4px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; height: 380px; width: 32%; margin-right: 6px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetails.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetails.tsx index d4d492433c5782..f9ddcc25fd7244 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetails.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetails.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import NoMarkdownViewer from '@app/entity/shared/components/styled/StripMarkdownText'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import QueryCardDetailsMenu from '@app/entity/shared/tabs/Dataset/Queries/QueryCardDetailsMenu'; import QueryCardEditButton from '@app/entity/shared/tabs/Dataset/Queries/QueryCardEditButton'; import { toLocalDateString } from '@app/shared/time/timeUtils'; @@ -12,7 +11,7 @@ const Title = styled(Typography.Title)<{ secondary?: boolean }>` && { margin: 0px; padding: 0px; - color: ${(props) => (props.secondary && ANTD_GRAY[6]) || ANTD_GRAY[9]}; + color: ${(props) => (props.secondary && props.theme.colors.textDisabled) || props.theme.colors.text}; } max-height: 40px; overflow: hidden; @@ -64,7 +63,7 @@ const Date = styled.div` const EmptyText = styled.div` && { - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.textDisabled}; } `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetailsMenu.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetailsMenu.tsx index 64280a3451a2bb..4707e33c7c4b0d 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetailsMenu.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardDetailsMenu.tsx @@ -58,6 +58,7 @@ export default function QueryCardDetailsMenu({ urn, onDeleted, index }: Props) { const items = [ { key: 0, + danger: true, label: (   Delete diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx index e89846dbd36459..3e690fbf02290f 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryCardQuery.tsx @@ -2,10 +2,8 @@ import React from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Statement = styled.div<{ fullHeight?: boolean }>` - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; height: ${(props) => (props.fullHeight && '378px') || '240px'}; margin: 0px 0px 4px 0px; border-radius: 8px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryModal.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryModal.tsx index ae31c7d16564a8..d421e05b130381 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryModal.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryModal.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import CopyQuery from '@app/entity/shared/tabs/Dataset/Queries/CopyQuery'; import { Editor as MarkdownEditor } from '@app/entity/shared/tabs/Documentation/components/editor/Editor'; @@ -36,21 +35,21 @@ const QueryDetails = styled.div` const QueryTitle = styled(Typography.Title)<{ secondary?: boolean }>` && { margin-bottom: 16px; - color: ${(props) => (props.secondary && ANTD_GRAY[6]) || undefined}; + color: ${(props) => (props.secondary && props.theme.colors.textDisabled) || undefined}; } `; const StyledViewer = styled(MarkdownEditor)<{ secondary?: boolean }>` .remirror-editor.ProseMirror { padding: 0; - color: ${(props) => (props.secondary && ANTD_GRAY[6]) || undefined}; + color: ${(props) => (props.secondary && props.theme.colors.textDisabled) || undefined}; } `; const QueryContainer = styled.div` height: 58vh; overflow-y: scroll; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 4px; `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx index e6494b012420b2..c99d9a86617ed3 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx @@ -10,7 +10,6 @@ import { useBaseEntity } from '@app/entity/shared/EntityContext'; import { CreateERModelRelationModal } from '@app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal'; import { ERModelRelationPreview } from '@app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview'; import { SearchSelectModal } from '@app/entity/shared/components/styled/search/SearchSelectModal'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useGetEntityWithSchema } from '@app/entity/shared/tabs/Dataset/Schema/useGetEntitySchema'; import { useEntityRegistry } from '@src/app/useEntityRegistry'; @@ -27,19 +26,19 @@ const StyledPagination = styled(Pagination)` `; const StyledInput = styled(Input)` border-radius: 70px; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid ${(props) => props.theme.colors.border}; max-width: 416px; height: 40px !important; `; const ThinDivider = styled(Divider)` height: 1px; width: 520px !important; - background: #f0f0f0; + background: ${(props) => props.theme.colors.bgSurface}; margin-left: -70px; margin-bottom: 0px; `; const NoERModelRelations = styled(Empty)` - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.textDisabled}; padding-top: 60px; `; export const RelationshipsTab = () => { diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTab.tsx index 55fd065d2a2037..491da6b4a86d73 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTab.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTab.tsx @@ -9,7 +9,6 @@ import SchemaRawView from '@app/entity/dataset/profile/schema/components/SchemaR import { KEY_SCHEMA_PREFIX } from '@app/entity/dataset/profile/schema/utils/constants'; import { groupByFieldPath } from '@app/entity/dataset/profile/schema/utils/utils'; import { useBaseEntity } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import SchemaContext from '@app/entity/shared/tabs/Dataset/Schema/SchemaContext'; import SchemaTable from '@app/entity/shared/tabs/Dataset/Schema/SchemaTable'; import { useGetEntityWithSchema } from '@app/entity/shared/tabs/Dataset/Schema/useGetEntitySchema'; @@ -26,7 +25,7 @@ import { useGetVersionedDatasetQuery } from '@graphql/versionedDataset.generated import { SchemaFieldBlame, SemanticVersionStruct } from '@types'; const NoSchema = styled(Empty)` - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.textDisabled}; padding-top: 60px; `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx index bf7db18c755afb..58dd14bef3a92a 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx @@ -1,14 +1,13 @@ import { ColumnsType } from 'antd/es/table'; import ResizeObserver from 'rc-resize-observer'; import React, { useEffect, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useVT } from 'virtualizedtableforantd4'; import useSchemaTitleRenderer from '@app/entity/dataset/profile/schema/utils/schemaTitleRenderer'; import translateFieldPath from '@app/entity/dataset/profile/schema/utils/translateFieldPath'; import { ExtendedSchemaFields } from '@app/entity/dataset/profile/schema/utils/types'; import { StyledTable } from '@app/entity/shared/components/styled/StyledTable'; -import { ANTD_GRAY, ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import ExpandIcon from '@app/entity/shared/tabs/Dataset/Schema/components/ExpandIcon'; import PropertiesColumn from '@app/entity/shared/tabs/Dataset/Schema/components/PropertiesColumn'; import SchemaFieldDrawer from '@app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer'; @@ -55,14 +54,14 @@ const TableContainer = styled.div` } &&& tbody > tr:hover > td { - background-color: ${ANTD_GRAY_V2[2]}; + background-color: ${(props) => props.theme.colors.bgHover}; } &&& .expanded-row { - background-color: ${(props) => props.theme.styles['highlight-color']} !important; + background-color: ${(props) => props.theme.colors.bgHighlight} !important; td { - background-color: ${(props) => props.theme.styles['highlight-color']} !important; + background-color: ${(props) => props.theme.colors.bgHighlight} !important; } } `; @@ -95,6 +94,7 @@ export default function SchemaTable({ hasProperties, inputFields, }: Props): JSX.Element { + const theme = useTheme(); const businessAttributesFlag = useBusinessAttributesFlag(); const hasUsageStats = useMemo(() => (usageStats?.aggregations?.fields?.length || 0) > 0, [usageStats]); const [tableHeight, setTableHeight] = useState(0); @@ -184,7 +184,7 @@ export default function SchemaTable({ render(record: SchemaField) { return { props: { - style: { backgroundColor: ANTD_GRAY[2.5] }, + style: { backgroundColor: theme.colors.bgSurface }, }, children: schemaBlameRenderer(record), }; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ChildCountLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ChildCountLabel.tsx index 420f9550dce62d..5f1cd437d00121 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ChildCountLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ChildCountLabel.tsx @@ -2,8 +2,6 @@ import { Badge } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; - type Props = { count: number; }; @@ -13,9 +11,9 @@ const ChildCountBadge = styled(Badge)` margin-top: 16px; margin-bottom: 16px; &&& .ant-badge-count { - background-color: ${ANTD_GRAY_V2[1]}; - color: ${ANTD_GRAY_V2[8]}; - box-shadow: 0 2px 1px -1px ${ANTD_GRAY_V2[6]}; + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.textSecondary}; + box-shadow: 0 2px 1px -1px ${(props) => props.theme.colors.textDisabled}; border-radius: 4px 4px 4px 4px; font-size: 12px; font-weight: 500; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ExpandIcon.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ExpandIcon.tsx index 4f71d662927a4d..ff8ef260cf34f7 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ExpandIcon.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ExpandIcon.tsx @@ -3,15 +3,13 @@ import { RenderExpandIconProps } from 'rc-table/lib/interface'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Prefix = styled.div<{ padding: number }>` padding-left: ${(props) => props.padding}px; position: absolute; min-height: 100%; - border-right: 2px solid ${ANTD_GRAY[4]}; - border-top: 1px solid white; - border-bottom: 1px solid white; + border-right: 2px solid ${(props) => props.theme.colors.bgSurface}; + border-top: 1px solid ${(props) => props.theme.colors.bg}; + border-bottom: 1px solid ${(props) => props.theme.colors.bg}; margin-bottom: -1px; top: -1px; `; @@ -21,14 +19,14 @@ const Padding = styled.span<{ padding: number }>` `; const Down = styled(DownOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-right: 5px; padding-top: 21px; vertical-align: top; `; const Right = styled(RightOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-right: 5px; padding-top: 21px; vertical-align: top; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx index ea22e36fab4157..5399c0fd4abf39 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ForeignKeyLabel.tsx @@ -1,9 +1,7 @@ -import { green } from '@ant-design/colors'; import { Badge } from 'antd'; import React, { useContext } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { FkContext } from '@app/entity/shared/tabs/Dataset/Schema/utils/selectedFkContext'; import { ForeignKeyConstraint } from '@types'; @@ -11,9 +9,10 @@ import { ForeignKeyConstraint } from '@types'; const ForeignKeyBadge = styled(Badge)<{ $highlight: boolean }>` margin-left: 4px; &&& .ant-badge-count { - background-color: ${(props) => (props.$highlight ? green[1] : ANTD_GRAY[1])}; - color: ${green[5]}; - border: 1px solid ${green[2]}; + background-color: ${(props) => + props.$highlight ? props.theme.colors.bgSurfaceSuccess : props.theme.colors.bg}; + color: ${(props) => props.theme.colors.textSuccess}; + border: 1px solid ${(props) => props.theme.colors.borderSuccess}; font-size: 12px; font-weight: 400; height: 22px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/NullableLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/NullableLabel.tsx index 03220ae8ed1c5e..fafc4357fd6981 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/NullableLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/NullableLabel.tsx @@ -1,16 +1,13 @@ -import { blue } from '@ant-design/colors'; import { Badge } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const NullableBadge = styled(Badge)` margin-left: 4px; &&& .ant-badge-count { - background-color: ${ANTD_GRAY[1]}; - color: ${blue[5]}; - border: 1px solid ${blue[3]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.textBrand}; + border: 1px solid ${(props) => props.theme.colors.borderBrand}; font-size: 12px; font-weight: 400; height: 22px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PartitioningKeyLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PartitioningKeyLabel.tsx index ef1bfb1648320a..81e1473eaa2bff 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PartitioningKeyLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PartitioningKeyLabel.tsx @@ -1,16 +1,13 @@ -import { blue } from '@ant-design/colors'; import { Badge } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const PartitioningKeyBadge = styled(Badge)` margin-left: 4px; &&& .ant-badge-count { - background-color: ${ANTD_GRAY[1]}; - color: ${blue[5]}; - border: 1px solid ${blue[2]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.textBrand}; + border: 1px solid ${(props) => props.theme.colors.borderBrand}; font-size: 12px; font-weight: 400; height: 22px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PrimaryKeyLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PrimaryKeyLabel.tsx index 0e9d7b21fcb48b..5907acb1b31dd4 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PrimaryKeyLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PrimaryKeyLabel.tsx @@ -1,16 +1,13 @@ -import { blue } from '@ant-design/colors'; import { Badge } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const PrimaryKeyBadge = styled(Badge)` margin-left: 4px; &&& .ant-badge-count { - background-color: ${ANTD_GRAY[1]}; - color: ${blue[5]}; - border: 1px solid ${blue[2]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.textBrand}; + border: 1px solid ${(props) => props.theme.colors.borderBrand}; font-size: 12px; font-weight: 400; height: 22px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PropertyTypeLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PropertyTypeLabel.tsx index 15a455146fb6cc..f03dfc6c675ddb 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PropertyTypeLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PropertyTypeLabel.tsx @@ -2,7 +2,6 @@ import { Badge } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY, ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { TypeData } from '@app/entity/shared/tabs/Properties/types'; import { truncate } from '@app/entity/shared/utils'; import { capitalizeFirstLetterOnly } from '@app/shared/textUtil'; @@ -24,9 +23,9 @@ export const PropertyTypeBadge = styled(Badge)<{ displayTransparent?: boolean }> background-color: transparent; ` : ` - background-color: ${ANTD_GRAY[1]}; - color: ${ANTD_GRAY_V2[8]}; - border: 1px solid ${ANTD_GRAY_V2[6]}; + background-color: ${props.theme.colors.bg}; + color: ${props.theme.colors.textSecondary}; + border: 1px solid ${props.theme.colors.border}; `} font-size: 12px; font-weight: 500; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/DrawerHeader.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/DrawerHeader.tsx index bfa04f4a092d3b..adf54b0d7adf79 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/DrawerHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/DrawerHeader.tsx @@ -3,13 +3,12 @@ import { Button } from 'antd'; import React, { useEffect } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { pluralize } from '@app/shared/textUtil'; import { SchemaField } from '@types'; const HeaderWrapper = styled.div` - border-bottom: 1px solid ${ANTD_GRAY_V2[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.bgSurface}; display: flex; justify-content: space-between; padding: 8px 16px; @@ -32,7 +31,7 @@ const StyledButton = styled(Button)` const FieldIndexText = styled.span` font-size: 14px; - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; margin: 0 8px; `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldHeader.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldHeader.tsx index 2649085c62d23d..422c3cb61d1632 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldHeader.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import translateFieldPath from '@app/entity/dataset/profile/schema/utils/translateFieldPath'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import MenuColumn from '@app/entity/shared/tabs/Dataset/Schema/components/MenuColumn'; import NullableLabel from '@app/entity/shared/tabs/Dataset/Schema/components/NullableLabel'; import PartitioningKeyLabel from '@app/entity/shared/tabs/Dataset/Schema/components/PartitioningKeyLabel'; @@ -16,7 +15,7 @@ const FieldHeaderWrapper = styled.div` padding: 16px; display: flex; justify-content: space-between; - border-bottom: 1px solid ${ANTD_GRAY_V2[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.bgSurface}; `; const FieldName = styled(Typography.Text)` diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx index b2fd00982c4ecb..40ace0020f49cb 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { pathMatchesNewPath } from '@app/entity/dataset/profile/schema/utils/utils'; import { useBaseEntity } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { SectionHeader, StyledDivider, @@ -21,7 +20,7 @@ const UsageBarWrapper = styled.div` `; const UsageBarBackground = styled.div` - background-color: ${ANTD_GRAY_V2[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 2px; height: 4px; width: ${USAGE_BAR_MAX_WIDTH}px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer.tsx index 71a25aecd93578..312c0269b281bd 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer.tsx @@ -24,7 +24,7 @@ const StyledDrawer = styled(Drawer)` } &&& .ant-drawer-content-wrapper { - border-left: 3px solid ${(props) => props.theme.styles['primary-color']}; + border-left: 3px solid ${(props) => props.theme.colors.borderBrand}; } `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx index a72c218b876822..4a2b9854ec99d6 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaRow.tsx @@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { useBaseEntity } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { FkContext } from '@app/entity/shared/tabs/Dataset/Schema/utils/selectedFkContext'; import { decodeSchemaField } from '@app/lineage/utils/columnLineageUtils'; import CompactContext from '@app/shared/CompactContext'; @@ -19,7 +18,7 @@ const ForeignKeyContent = styled.tr` flex-direction: column; width: 100%; margin-top: -587px; - box-shadow: inset 0 7px 16px -7px ${ANTD_GRAY[5]}; + box-shadow: inset 0 7px 16px -7px ${(props) => props.theme.colors.border}; `; const EntitySidePanel = styled.div` @@ -27,17 +26,17 @@ const EntitySidePanel = styled.div` max-height: 545px; padding: 8px; width: 900px; - border-right: 1px solid ${ANTD_GRAY[4]}; - background-color: white; + border-right: 1px solid ${(props) => props.theme.colors.bgSurface}; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const FieldBadge = styled(Badge)` margin-left: 4px; margin-top: 12px; &&& .ant-badge-count { - background-color: ${ANTD_GRAY[1]}; - color: ${ANTD_GRAY[9]}; - border: 1px solid ${ANTD_GRAY[6]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.text}; + border: 1px solid ${(props) => props.theme.colors.border}; font-size: 12px; font-weight: 400; height: 22px; @@ -52,7 +51,7 @@ const ConstraintSection = styled.div` min-height: 100%; display: flex; justify-content: space-between; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const TableTitle = styled.span` @@ -62,7 +61,7 @@ const TableTitle = styled.span` const BodyContent = styled.div` display: flex; flex-direction: row; - border-bottom: 1px solid ${ANTD_GRAY[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const HeaderContent = styled.div` @@ -71,7 +70,7 @@ const HeaderContent = styled.div` font-size: 16px; font-weight: 500; padding-left: 12px; - border-bottom: 1px solid ${ANTD_GRAY[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const ForiegnKeyTd = styled.td` @@ -81,7 +80,7 @@ const ForiegnKeyTd = styled.td` `; const DatasetLink = styled(Link)` - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; font-weight: 800; `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx index 7917712dab22fb..22a7e6d7c36b3a 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/TypeLabel.tsx @@ -2,7 +2,6 @@ import { Badge, Tooltip } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { truncate } from '@app/entity/shared/utils'; import { capitalizeFirstLetter } from '@app/shared/textUtil'; @@ -16,9 +15,9 @@ type Props = { const TypeBadge = styled(Badge)` margin-left: 4px; &&& .ant-badge-count { - background-color: ${ANTD_GRAY[1]}; - color: ${ANTD_GRAY[7]}; - border: 1px solid ${ANTD_GRAY[5]}; + background-color: ${(props) => props.theme.colors.bg}; + color: ${(props) => props.theme.colors.textTertiary}; + border: 1px solid ${(props) => props.theme.colors.border}; font-size: 12px; font-weight: 400; height: 22px; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useUsageStatsRenderer.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useUsageStatsRenderer.tsx index 5595213b2c2a55..bb4b61e8b3ae7e 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useUsageStatsRenderer.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useUsageStatsRenderer.tsx @@ -1,4 +1,3 @@ -import { geekblue } from '@ant-design/colors'; import { Tooltip } from 'antd'; import React, { useMemo } from 'react'; import styled from 'styled-components'; @@ -12,7 +11,7 @@ const USAGE_BAR_MAX_WIDTH = 50; export const UsageBar = styled.div<{ width: number }>` width: ${(props) => props.width}px; height: 4px; - background-color: ${geekblue[3]}; + background-color: ${(props) => props.theme.colors.bgSurfaceBrand}; border-radius: 2px; `; diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/StatsHeader.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/StatsHeader.tsx index 03cf364fdde055..088c41ee34a916 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/StatsHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/StatsHeader.tsx @@ -1,10 +1,9 @@ import { ClockCircleOutlined, LineChartOutlined } from '@ant-design/icons'; import { Button, Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import TabToolbar from '@app/entity/shared/components/styled/TabToolbar'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entity/shared/constants'; import LookbackWindowSelect from '@app/entity/shared/tabs/Dataset/Stats/historical/LookbackWindowSelect'; import { LookbackWindow } from '@app/entity/shared/tabs/Dataset/Stats/lookbackWindows'; import { ViewType } from '@app/entity/shared/tabs/Dataset/Stats/viewType'; @@ -21,7 +20,7 @@ const ReportedAtLabel = styled.div` margin: 0; display: flex; align-items: center; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { @@ -33,7 +32,8 @@ type Props = { }; export default function StatsHeader({ viewType, setViewType, reportedAt, lookbackWindow, setLookbackWindow }: Props) { - const latestButtonColor = viewType === ViewType.LATEST ? REDESIGN_COLORS.BLUE : ANTD_GRAY[8]; + const theme = useTheme(); + const latestButtonColor = viewType === ViewType.LATEST ? theme.colors.textInformation : theme.colors.textSecondary; const latestButton = ( ); - const historicalButtonColor = viewType === ViewType.HISTORICAL ? REDESIGN_COLORS.BLUE : ANTD_GRAY[8]; + const historicalButtonColor = + viewType === ViewType.HISTORICAL ? theme.colors.textInformation : theme.colors.textSecondary; const historicalButton = (
- + diff --git a/datahub-web-react/src/app/entity/user/preview/Preview.tsx b/datahub-web-react/src/app/entity/user/preview/Preview.tsx index 580cdedca8523c..e8c8330c8de47c 100644 --- a/datahub-web-react/src/app/entity/user/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/user/preview/Preview.tsx @@ -4,7 +4,6 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import SearchTextHighlighter from '@app/search/matches/SearchTextHighlighter'; import { CustomAvatar } from '@app/shared/avatar'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -50,7 +49,7 @@ const PlatformText = styled(Typography.Text)` font-size: 12px; line-height: 20px; font-weight: 700; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const AvatarContainer = styled.div` diff --git a/datahub-web-react/src/app/entity/view/builder/ViewBuilderForm.tsx b/datahub-web-react/src/app/entity/view/builder/ViewBuilderForm.tsx index e587e3ce04abc4..63af8467b7c918 100644 --- a/datahub-web-react/src/app/entity/view/builder/ViewBuilderForm.tsx +++ b/datahub-web-react/src/app/entity/view/builder/ViewBuilderForm.tsx @@ -1,9 +1,8 @@ import { Form, Input, Select, Typography } from 'antd'; import React, { useEffect } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { ViewTypeLabel } from '@app/entity/view/ViewTypeLabel'; import { ViewDefinitionBuilder } from '@app/entity/view/builder/ViewDefinitionBuilder'; import { ViewBuilderMode } from '@app/entity/view/builder/types'; @@ -23,6 +22,7 @@ type Props = { }; export const ViewBuilderForm = ({ urn, mode, state, updateState }: Props) => { + const theme = useTheme(); const userContext = useUserContext(); const [form] = Form.useForm(); @@ -98,10 +98,10 @@ export const ViewBuilderForm = ({ urn, mode, state, updateState }: Props) => { disabled={!canManageGlobalViews || isEditing || mode === ViewBuilderMode.PREVIEW} > - + - + diff --git a/datahub-web-react/src/app/entity/view/builder/ViewDefinitionBuilder.tsx b/datahub-web-react/src/app/entity/view/builder/ViewDefinitionBuilder.tsx index 41c8ef284fa7dd..cb6be149da55ce 100644 --- a/datahub-web-react/src/app/entity/view/builder/ViewDefinitionBuilder.tsx +++ b/datahub-web-react/src/app/entity/view/builder/ViewDefinitionBuilder.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { ViewBuilderMode } from '@app/entity/view/builder/types'; import { buildEntityCache, @@ -20,8 +19,8 @@ import { Entity, FacetFilter, FacetFilterInput, LogicalOperator } from '@types'; const Container = styled.div` border-radius: 4px; padding: 12px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; - border: 1px solid ${ANTD_GRAY[4]}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; margin-bottom: 20px; `; diff --git a/datahub-web-react/src/app/entity/view/menu/ViewDropdownMenu.tsx b/datahub-web-react/src/app/entity/view/menu/ViewDropdownMenu.tsx index d68672aabd5704..0fa2a92f7fda0b 100644 --- a/datahub-web-react/src/app/entity/view/menu/ViewDropdownMenu.tsx +++ b/datahub-web-react/src/app/entity/view/menu/ViewDropdownMenu.tsx @@ -259,6 +259,7 @@ export const ViewDropdownMenu = ({ canManageView ? { key: 3, + danger: true, label: , } : null, diff --git a/datahub-web-react/src/app/entity/view/menu/item/IconItemTitle.tsx b/datahub-web-react/src/app/entity/view/menu/item/IconItemTitle.tsx index b1534d406095fc..f4f21811990464 100644 --- a/datahub-web-react/src/app/entity/view/menu/item/IconItemTitle.tsx +++ b/datahub-web-react/src/app/entity/view/menu/item/IconItemTitle.tsx @@ -2,8 +2,6 @@ import { Tooltip } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const TitleContainer = styled.span` display: flex; align-items: center; @@ -13,7 +11,7 @@ const TitleContainer = styled.span` const IconContainer = styled.span` && { - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; margin-right: 12px; } `; diff --git a/datahub-web-react/src/app/entity/view/select/ViewSelect.tsx b/datahub-web-react/src/app/entity/view/select/ViewSelect.tsx index 02e3963b29a15f..55c8586c84131b 100644 --- a/datahub-web-react/src/app/entity/view/select/ViewSelect.tsx +++ b/datahub-web-react/src/app/entity/view/select/ViewSelect.tsx @@ -5,7 +5,6 @@ import { useHistory } from 'react-router'; import styled from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { ViewBuilder } from '@app/entity/view/builder/ViewBuilder'; import { ViewBuilderMode } from '@app/entity/view/builder/types'; import { ViewSelectDropdown } from '@app/entity/view/select/ViewSelectDropdown'; @@ -23,7 +22,7 @@ type ViewBuilderDisplayState = { }; const TriangleIcon = styled(VscTriangleDown)<{ isOpen: boolean }>` - color: ${(props) => (props.isOpen ? props.theme.styles['primary-color'] : ANTD_GRAY_V2[10])}; + color: ${(props) => (props.isOpen ? props.theme.colors.iconBrand : props.theme.colors.text)}; `; const DEFAULT_VIEW_BUILDER_DISPLAY_STATE = { @@ -44,13 +43,13 @@ const ViewSelectContainer = styled.div` &.ant-select-open { .ant-select-selection-placeholder, .ant-select-selection-item { - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; } } &:not(.ant-select-open) { .ant-select-selection-placeholder, .ant-select-selection-item { - color: ${ANTD_GRAY_V2[10]}; + color: ${(props) => props.theme.colors.text}; } } .ant-select-selection-placeholder, diff --git a/datahub-web-react/src/app/entity/view/select/ViewSelectFooter.tsx b/datahub-web-react/src/app/entity/view/select/ViewSelectFooter.tsx index b667820180f727..786e284e70d986 100644 --- a/datahub-web-react/src/app/entity/view/select/ViewSelectFooter.tsx +++ b/datahub-web-react/src/app/entity/view/select/ViewSelectFooter.tsx @@ -3,12 +3,11 @@ import { Button, Typography } from 'antd'; import React, { useRef } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY, ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { NoMarginButton } from '@app/entity/view/select/styledComponents'; const ButtonContainer = styled.div` display: flex; - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.textDisabled}; flex-direction: column; `; @@ -22,15 +21,15 @@ const CreateViewButton = styled(NoMarginButton)<{ bordered: boolean }>` margin-right: 8px; padding-left: 0px; - ${(props) => props.bordered && `border-top: 1px solid ${ANTD_GRAY_V2[5]};`} + ${(props) => props.bordered && `border-top: 1px solid ${props.theme.colors.border};`} } `; const ManageViewsButton = styled(Button)` &&& { - color: ${(props) => props.theme.styles['primary-color']}; - border-top: 1px solid ${ANTD_GRAY_V2[5]}; - background-color: ${ANTD_GRAY_V2[2]}; + color: ${(props) => props.theme.colors.textBrand}; + border-top: 1px solid ${(props) => props.theme.colors.border}; + background-color: ${(props) => props.theme.colors.bgSurface}; border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/datahub-web-react/src/app/entity/view/select/ViewSelectHeader.tsx b/datahub-web-react/src/app/entity/view/select/ViewSelectHeader.tsx index fa9967869dfe9c..63f46da7f11c83 100644 --- a/datahub-web-react/src/app/entity/view/select/ViewSelectHeader.tsx +++ b/datahub-web-react/src/app/entity/view/select/ViewSelectHeader.tsx @@ -1,7 +1,6 @@ import React, { useRef } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entity/shared/constants'; import { NoMarginButton } from '@app/entity/view/select/styledComponents'; const ButtonContainer = styled.div` @@ -12,7 +11,7 @@ const ButtonContainer = styled.div` const AllEntitiesButton = styled(NoMarginButton)` &&& { font-weight: normal; - border-bottom: 1px solid ${ANTD_GRAY_V2[5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; width: 100%; text-align: left; border-bottom-left-radius: 0; diff --git a/datahub-web-react/src/app/entity/view/select/ViewsTableColumns.tsx b/datahub-web-react/src/app/entity/view/select/ViewsTableColumns.tsx index 62324082eb3882..818bfc1394b8f9 100644 --- a/datahub-web-react/src/app/entity/view/select/ViewsTableColumns.tsx +++ b/datahub-web-react/src/app/entity/view/select/ViewsTableColumns.tsx @@ -1,9 +1,8 @@ import { Button, Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { ViewTypeLabel } from '@app/entity/view/ViewTypeLabel'; import { ViewDropdownMenu } from '@app/entity/view/menu/ViewDropdownMenu'; import { GlobalDefaultViewIcon } from '@app/entity/view/shared/GlobalDefaultViewIcon'; @@ -78,7 +77,8 @@ type ViewTypeColumnProps = { }; export function ViewTypeColumn({ viewType }: ViewTypeColumnProps) { - return ; + const theme = useTheme(); + return ; } type ActionColumnProps = { diff --git a/datahub-web-react/src/app/entity/view/select/styledComponents.tsx b/datahub-web-react/src/app/entity/view/select/styledComponents.tsx index a2ba05a83e9e5b..25fe8076211a83 100644 --- a/datahub-web-react/src/app/entity/view/select/styledComponents.tsx +++ b/datahub-web-react/src/app/entity/view/select/styledComponents.tsx @@ -2,8 +2,6 @@ import { RightOutlined } from '@ant-design/icons'; import { Button } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - export const NoMarginButton = styled(Button)` && { margin: 0px; @@ -13,6 +11,6 @@ export const NoMarginButton = styled(Button)` export const StyledRightOutlined = styled(RightOutlined)` && { font-size: 8px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; diff --git a/datahub-web-react/src/app/entity/view/shared/GlobalDefaultViewIcon.tsx b/datahub-web-react/src/app/entity/view/shared/GlobalDefaultViewIcon.tsx index e30f657683d5c1..9b16a40b04fdd0 100644 --- a/datahub-web-react/src/app/entity/view/shared/GlobalDefaultViewIcon.tsx +++ b/datahub-web-react/src/app/entity/view/shared/GlobalDefaultViewIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; +import { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { DefaultViewIcon } from '@app/entity/view/shared/DefaultViewIcon'; type Props = { @@ -8,5 +8,6 @@ type Props = { }; export const GlobalDefaultViewIcon = ({ title }: Props) => { - return ; + const theme = useTheme(); + return ; }; diff --git a/datahub-web-react/src/app/entity/view/shared/UserDefaultViewIcon.tsx b/datahub-web-react/src/app/entity/view/shared/UserDefaultViewIcon.tsx index 6ba383a3c81143..a953cfeebb500a 100644 --- a/datahub-web-react/src/app/entity/view/shared/UserDefaultViewIcon.tsx +++ b/datahub-web-react/src/app/entity/view/shared/UserDefaultViewIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; +import { useTheme } from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entity/shared/constants'; import { DefaultViewIcon } from '@app/entity/view/shared/DefaultViewIcon'; type Props = { @@ -8,5 +8,6 @@ type Props = { }; export const UserDefaultViewIcon = ({ title }: Props) => { - return ; + const theme = useTheme(); + return ; }; diff --git a/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx b/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx index 258af7aea8a9b6..f389f400c74f9e 100644 --- a/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx +++ b/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx @@ -26,13 +26,18 @@ export class RoleEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ( + + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/Access/RoleEntityProfile.tsx b/datahub-web-react/src/app/entityV2/Access/RoleEntityProfile.tsx index c1bf5b9dde4664..c967973eb8dfa6 100644 --- a/datahub-web-react/src/app/entityV2/Access/RoleEntityProfile.tsx +++ b/datahub-web-react/src/app/entityV2/Access/RoleEntityProfile.tsx @@ -1,4 +1,3 @@ -import { grey } from '@ant-design/colors'; import { Divider, Typography } from 'antd'; import React from 'react'; import { useParams } from 'react-router'; @@ -23,7 +22,7 @@ type RolePageParams = { const TitleLabel = styled(Typography.Text)` &&& { - color: ${grey[2]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 12px; display: block; line-height: 20px; @@ -37,13 +36,13 @@ const DescriptionLabel = styled(Typography.Text)` font-weight: bold; font-size: 14px; line-height: 28px; - color: rgb(38, 38, 38); + color: ${(props) => props.theme.colors.text}; } `; const TitleText = styled(Typography.Text)` &&& { - color: ${grey[10]}; + color: ${(props) => props.theme.colors.text}; font-weight: 700; font-size: 20px; line-height: 28px; diff --git a/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx b/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx index e36d5903fbecd5..91ce7a896580a6 100644 --- a/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx +++ b/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx @@ -47,7 +47,12 @@ export class ApplicationEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ( + + ); } if (styleType === IconStyleType.SVG) { @@ -57,7 +62,7 @@ export class ApplicationEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx b/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx index 7834a9aaad5a79..19433130c7271f 100644 --- a/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx +++ b/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx @@ -34,7 +34,7 @@ export class BusinessAttributeEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -44,7 +44,7 @@ export class BusinessAttributeEntity implements Entity { ); } - return ; + return ; }; displayName = (data: BusinessAttribute) => { diff --git a/datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx b/datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx index 9f01cac701580d..fbb4f813ee8520 100644 --- a/datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx +++ b/datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx @@ -93,7 +93,7 @@ export class ChartEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/chart/shared/ChartStatsSummary.tsx b/datahub-web-react/src/app/entityV2/chart/shared/ChartStatsSummary.tsx index b79ad90dab0748..d17d1f909223ca 100644 --- a/datahub-web-react/src/app/entityV2/chart/shared/ChartStatsSummary.tsx +++ b/datahub-web-react/src/app/entityV2/chart/shared/ChartStatsSummary.tsx @@ -2,22 +2,21 @@ import { ClockCircleOutlined, EyeOutlined, QuestionCircleOutlined, TeamOutlined import { Popover, Tooltip } from '@components'; import { Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import ExpandingStat from '@app/entityV2/dataset/shared/ExpandingStat'; import { StatsSummary } from '@app/entityV2/shared/components/styled/StatsSummary'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { PercentileLabel } from '@app/entityV2/shared/stats/PercentileLabel'; import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; import { toLocalDateTimeString, toRelativeTimeString } from '@app/shared/time/timeUtils'; import { countFormatter, needsFormatting } from '@utils/formatter'; const StatText = styled.span` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-left: 4px; `; @@ -42,6 +41,7 @@ export const ChartStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { + const theme = useTheme(); // acryl-main only. const effectiveViewCount = (!!viewCountLast30Days && viewCountLast30Days) || viewCount; const effectiveViewCountText = (!!viewCountLast30Days && 'views last month') || 'views'; @@ -51,7 +51,7 @@ export const ChartStatsSummary = ({ ( - + {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} charts @@ -61,7 +61,7 @@ export const ChartStatsSummary = ({ undefined, (!!effectiveViewCount && ( - + {formatNumber(effectiveViewCount)} {effectiveViewCountText} {!!viewCountPercentileLast30Days && ( - + {formatNumber(uniqueUserCountLast30Days)} users {!!uniqueUserPercentileLast30Days && ( @@ -102,7 +102,7 @@ export const ChartStatsSummary = ({ } > - + Changed {toRelativeTimeString(lastUpdatedMs)} diff --git a/datahub-web-react/src/app/entityV2/chart/summary/ChartFieldsTable.tsx b/datahub-web-react/src/app/entityV2/chart/summary/ChartFieldsTable.tsx index 8d61a08205935f..b84c6ea9df69a0 100644 --- a/datahub-web-react/src/app/entityV2/chart/summary/ChartFieldsTable.tsx +++ b/datahub-web-react/src/app/entityV2/chart/summary/ChartFieldsTable.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { CompactFieldIconWithTooltip } from '@app/sharedV2/icons/CompactFieldIcon'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -19,17 +18,17 @@ const TableContainer = styled.div` background-color: transparent; font-weight: 700; font-size: 14px; - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; } && .ant-table-tbody > tr > td { padding: 8px 5px; border-bottom: none; - border-right: 1px solid ${REDESIGN_COLORS.COLD_GREY_TEXT_BLUE_1}; + border-right: 1px solid ${(props) => props.theme.colors.border}; } `; const SeeMoreLink = styled(Link)` - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; font-size: 12px; font-weight: 600; `; @@ -89,7 +88,7 @@ export default function ChartFieldsTable({ urn, rows }: Props) { } const TypeWrapper = styled.span` - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; margin-right: 4px; width: 11px; `; @@ -97,14 +96,14 @@ const TypeWrapper = styled.span` const FieldPathText = styled(Typography.Text)` font-size: 12px; font-weight: 500; - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; `; const Description = styled(Typography.Text)` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; `; function nameRender(fieldPath: string, row: SchemaField) { diff --git a/datahub-web-react/src/app/entityV2/chart/summary/ChartSummaryOverview.tsx b/datahub-web-react/src/app/entityV2/chart/summary/ChartSummaryOverview.tsx index af0fa3c8ebf6cc..858daa7d52a4c8 100644 --- a/datahub-web-react/src/app/entityV2/chart/summary/ChartSummaryOverview.tsx +++ b/datahub-web-react/src/app/entityV2/chart/summary/ChartSummaryOverview.tsx @@ -19,7 +19,7 @@ const Count = styled.div` display: flex; justify-content: center; border-radius: 10px; - background-color: #e5ece9; + background-color: ${(props) => props.theme.colors.bgSurface}; font-size: 10px; font-weight: 400; margin-left: 8px; diff --git a/datahub-web-react/src/app/entityV2/chart/summary/SummaryQuerySection.tsx b/datahub-web-react/src/app/entityV2/chart/summary/SummaryQuerySection.tsx index 8f8cfcc3309485..cdb06847eb126c 100644 --- a/datahub-web-react/src/app/entityV2/chart/summary/SummaryQuerySection.tsx +++ b/datahub-web-react/src/app/entityV2/chart/summary/SummaryQuerySection.tsx @@ -4,14 +4,12 @@ import React, { useState } from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import styled from 'styled-components/macro'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; - const PreviewSyntax = styled(SyntaxHighlighter)` max-height: 68px; overflow: hidden !important; border-radius: 12px; max-width: 100%; - background: #fafafc !important; + background: ${(props) => props.theme.colors.bgSurface} !important; span { font-family: 'Roboto Mono', monospace; @@ -31,12 +29,12 @@ const Container = styled.div` `; const StyledButton = styled(Button)` - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; display: flex; width: fit-content; :hover { - color: ${REDESIGN_COLORS.HOVER_PURPLE}; + color: ${(props) => props.theme.colors.buttonFillBrand}; background: transparent; } `; diff --git a/datahub-web-react/src/app/entityV2/chart/summary/styledComponents.ts b/datahub-web-react/src/app/entityV2/chart/summary/styledComponents.ts index 7343777c8402bf..1e00942be0015a 100644 --- a/datahub-web-react/src/app/entityV2/chart/summary/styledComponents.ts +++ b/datahub-web-react/src/app/entityV2/chart/summary/styledComponents.ts @@ -1,7 +1,6 @@ import { Typography } from 'antd'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { HeaderTitle } from '@app/entityV2/shared/summary/HeaderComponents'; export const MainSection = styled.div` @@ -12,7 +11,7 @@ export const MainSection = styled.div` export const SummaryHeader = styled(Typography.Text)` margin-bottom: 20px; font-size: 18px; - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; font-weight: 500; `; @@ -20,7 +19,7 @@ export const VerticalDivider = styled.hr` align-self: stretch; height: auto; margin: 0 20px; - color: ${REDESIGN_COLORS.COLD_GREY_TEXT_BLUE_1}; + color: ${(props) => props.theme.colors.border}; border-width: 1px; opacity: 0.2; `; @@ -28,6 +27,6 @@ export const VerticalDivider = styled.hr` export const StyledTitle = styled(HeaderTitle)` margin-bottom: 12px; font-size: 14px; - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; font-weight: 700; `; diff --git a/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx b/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx index a7e8cd017a2b37..7a83e3539e5df1 100644 --- a/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx +++ b/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx @@ -47,7 +47,12 @@ export class ContainerEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ( + + ); } if (styleType === IconStyleType.SVG) { @@ -59,7 +64,7 @@ export class ContainerEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx b/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx index c645d191474c25..3d8ad85a98b76b 100644 --- a/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx @@ -92,7 +92,7 @@ export class DashboardEntity implements Entity { ); } - return ; + return ; }; isSearchEnabled = () => true; diff --git a/datahub-web-react/src/app/entityV2/dashboard/shared/DashboardStatsSummary.tsx b/datahub-web-react/src/app/entityV2/dashboard/shared/DashboardStatsSummary.tsx index e3b7c0b78b2867..6c1b27fbd674fa 100644 --- a/datahub-web-react/src/app/entityV2/dashboard/shared/DashboardStatsSummary.tsx +++ b/datahub-web-react/src/app/entityV2/dashboard/shared/DashboardStatsSummary.tsx @@ -2,24 +2,23 @@ import { ClockCircleOutlined, EyeOutlined, QuestionCircleOutlined, TeamOutlined import { Popover, Tooltip } from '@components'; import { Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import ExpandingStat from '@app/entityV2/dataset/shared/ExpandingStat'; import { StatsSummary } from '@app/entityV2/shared/components/styled/StatsSummary'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { PercentileLabel } from '@app/entityV2/shared/stats/PercentileLabel'; import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; import { toLocalDateTimeString, toRelativeTimeString } from '@app/shared/time/timeUtils'; import { countFormatter, needsFormatting } from '@utils/formatter'; const StatText = styled.span` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; @media (min-width: 1024px) { white-space: nowrap; `; const HelpIcon = styled(QuestionCircleOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-left: 4px; `; @@ -44,6 +43,7 @@ export const DashboardStatsSummary = ({ lastUpdatedMs, createdMs, }: Props) => { + const theme = useTheme(); // acryl-main only. const effectiveViewCount = (!!viewCountLast30Days && viewCountLast30Days) || viewCount; const effectiveViewCountText = (!!viewCountLast30Days && 'views last month') || 'views'; @@ -53,7 +53,7 @@ export const DashboardStatsSummary = ({ ( - + {isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}{' '} charts @@ -63,7 +63,7 @@ export const DashboardStatsSummary = ({ undefined, (!!effectiveViewCount && ( - + {formatNumber(effectiveViewCount)} {effectiveViewCountText} {!!viewCountPercentileLast30Days && ( @@ -78,7 +78,7 @@ export const DashboardStatsSummary = ({ undefined, (!!uniqueUserCountLast30Days && ( - + {formatNumber(uniqueUserCountLast30Days)} users {!!uniqueUserPercentileLast30Days && ( @@ -106,7 +106,7 @@ export const DashboardStatsSummary = ({ } > - + Changed {toRelativeTimeString(lastUpdatedMs)} diff --git a/datahub-web-react/src/app/entityV2/dashboard/summary/DashboardSummaryOverview.tsx b/datahub-web-react/src/app/entityV2/dashboard/summary/DashboardSummaryOverview.tsx index 1477d71c66db58..c0ad0cd607bf1f 100644 --- a/datahub-web-react/src/app/entityV2/dashboard/summary/DashboardSummaryOverview.tsx +++ b/datahub-web-react/src/app/entityV2/dashboard/summary/DashboardSummaryOverview.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { useBaseEntity, useEntityData } from '@app/entity/shared/EntityContext'; import { GenericEntityProperties } from '@app/entity/shared/types'; import { MainSection, StyledTitle, SummaryHeader, VerticalDivider } from '@app/entityV2/chart/summary/styledComponents'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SummaryColumns } from '@app/entityV2/shared/summary/ListComponents'; import SummaryCreatedBySection from '@app/entityV2/shared/summary/SummaryCreatedBySection'; import { HoverEntityTooltip } from '@app/recommendations/renderer/component/HoverEntityTooltip'; @@ -22,7 +21,7 @@ const Count = styled.div` display: flex; justify-content: center; border-radius: 10px; - background-color: #e5ece9; + background-color: ${(props) => props.theme.colors.bgSurface}; font-size: 10px; font-weight: 400; margin-left: 8px; @@ -35,7 +34,7 @@ const EntityItem = styled.div` gap: 8px; font-size: 14px; font-weight: 500; - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; `; const AssetSections = styled.div` diff --git a/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx b/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx index 8d78a7bff0ac06..5d98fa0d72fc5b 100644 --- a/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx @@ -18,13 +18,18 @@ export class DataContractEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ( + + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx b/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx index 3733d615d83a2a..573bda28212dff 100644 --- a/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx @@ -51,14 +51,17 @@ export class DataFlowEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataFlow/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/dataFlow/preview/Preview.tsx index 8ce98d877b8d47..9399755c1227da 100644 --- a/datahub-web-react/src/app/entityV2/dataFlow/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/dataFlow/preview/Preview.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { GenericEntityProperties } from '@app/entity/shared/types'; import { IconStyleType, PreviewType } from '@app/entityV2/Entity'; import { EntityMenuItems } from '@app/entityV2/shared/EntityDropdown/EntityMenuActions'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { getFirstSubType } from '@app/entityV2/shared/utils'; import DefaultPreviewCard from '@app/previewV2/DefaultPreviewCard'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -24,7 +23,7 @@ import { } from '@types'; const StatText = styled(Typography.Text)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; export const Preview = ({ diff --git a/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx b/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx index cd7b3fce74be77..509987d53f0bb0 100644 --- a/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx @@ -65,14 +65,17 @@ export class DataJobEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataJob/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/dataJob/preview/Preview.tsx index 7149825e6822ca..4fb8b53861954a 100644 --- a/datahub-web-react/src/app/entityV2/dataJob/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/dataJob/preview/Preview.tsx @@ -6,7 +6,6 @@ import styled from 'styled-components'; import { GenericEntityProperties } from '@app/entity/shared/types'; import { IconStyleType, PreviewType } from '@app/entityV2/Entity'; import { EntityMenuItems } from '@app/entityV2/shared/EntityDropdown/EntityMenuActions'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import DefaultPreviewCard from '@app/previewV2/DefaultPreviewCard'; import { toRelativeTimeString } from '@app/shared/time/timeUtils'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -25,7 +24,7 @@ import { } from '@types'; const StatText = styled(Typography.Text)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; export const Preview = ({ diff --git a/datahub-web-react/src/app/entityV2/dataJob/tabs/RunsTab.tsx b/datahub-web-react/src/app/entityV2/dataJob/tabs/RunsTab.tsx index 7e3b19fac2b1ac..40aee0551fd4fd 100644 --- a/datahub-web-react/src/app/entityV2/dataJob/tabs/RunsTab.tsx +++ b/datahub-web-react/src/app/entityV2/dataJob/tabs/RunsTab.tsx @@ -5,7 +5,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { getExecutionRequestStatusDisplayColor, getExecutionRequestStatusDisplayText, @@ -21,7 +20,7 @@ import LoadingSvg from '@images/datahub-logo-color-loading_pendulum.svg?react'; const ExternalUrlLink = styled.a` font-size: 16px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const PaginationControlContainer = styled.div` diff --git a/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx b/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx index 74a958e2422da7..bb2e11be72550b 100644 --- a/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx @@ -21,7 +21,7 @@ export class DataPlatformEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx b/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx index 5a54b4c57d1834..54b96ba528bd8f 100644 --- a/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx @@ -43,10 +43,10 @@ export class DataProcessInstanceEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } - return ; + return ; }; isSearchEnabled = () => false; diff --git a/datahub-web-react/src/app/entityV2/dataProduct/AddOutputPortCard.tsx b/datahub-web-react/src/app/entityV2/dataProduct/AddOutputPortCard.tsx index d84ad7c7e39bc9..6ebae9f839b1af 100644 --- a/datahub-web-react/src/app/entityV2/dataProduct/AddOutputPortCard.tsx +++ b/datahub-web-react/src/app/entityV2/dataProduct/AddOutputPortCard.tsx @@ -2,13 +2,12 @@ import { PlusOutlined } from '@ant-design/icons'; import React from 'react'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { Card } from '@app/sharedV2/cards/components'; const DataProductTitle = styled.div` font-size: 16px; font-weight: 400; - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; padding: 10px 14px; `; diff --git a/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx b/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx index 5d92a1d964d15a..49ab98f3d71170 100644 --- a/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx @@ -59,7 +59,10 @@ export class DataProductEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } @@ -72,7 +75,7 @@ export class DataProductEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataProduct/OutputPortsSection.tsx b/datahub-web-react/src/app/entityV2/dataProduct/OutputPortsSection.tsx index f662172f5751df..b2202118be3877 100644 --- a/datahub-web-react/src/app/entityV2/dataProduct/OutputPortsSection.tsx +++ b/datahub-web-react/src/app/entityV2/dataProduct/OutputPortsSection.tsx @@ -1,13 +1,12 @@ import OutputIcon from '@mui/icons-material/Output'; import RefreshIcon from '@mui/icons-material/Refresh'; import React, { useEffect, useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; // import AddOutputPortCard from './AddOutputPortCard'; import { StyledHeaderWrapper } from '@app/entityV2/dataProduct/AssetsSections'; import { SCREEN_WIDTH_BREAK_POINT } from '@app/entityV2/dataProduct/constants'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { SummaryTabHeaderTitle } from '@app/entityV2/shared/summary/HeaderComponents'; import { HorizontalList } from '@app/entityV2/shared/summary/ListComponents'; import { OUTPUT_PORTS_FIELD } from '@app/search/utils/constants'; @@ -36,12 +35,13 @@ const LoadMoreButton = styled(Card)` font-weight: 400; font-family: Mulish; padding: 10px 14px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const COUNT = 10; export const OutputPortsSection = () => { + const theme = useTheme(); const [additionalResults, setAdditionalResults] = useState([]); const [hasFetchedNewData, setHasFetchedNewData] = useState(false); const [start, setStart] = useState(0); @@ -90,7 +90,7 @@ export const OutputPortsSection = () => { } + icon={} title={`Output Ports (${numResults})`} /> diff --git a/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx index 884ae21de17c08..3af11835694319 100644 --- a/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx @@ -103,7 +103,7 @@ export class DatasetEntity implements Entity { return ( ); } @@ -115,7 +115,7 @@ export class DatasetEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataset/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/dataset/preview/Preview.tsx index fd1ff2be99034d..b5ae435b7b90ab 100644 --- a/datahub-web-react/src/app/entityV2/dataset/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/preview/Preview.tsx @@ -1,10 +1,10 @@ import React from 'react'; +import { useTheme } from 'styled-components'; import { GenericEntityProperties } from '@app/entity/shared/types'; import { IconStyleType, PreviewType } from '@app/entityV2/Entity'; import { DatasetStatsSummary as DatasetStatsSummaryView } from '@app/entityV2/dataset/shared/DatasetStatsSummary'; import { EntityMenuItems } from '@app/entityV2/shared/EntityDropdown/EntityMenuActions'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { PopularityTier } from '@app/entityV2/shared/containers/profile/sidebar/shared/utils'; import { DatasetLastUpdatedMs, summaryHasStats } from '@app/entityV2/shared/utils'; import DefaultPreviewCard from '@app/previewV2/DefaultPreviewCard'; @@ -101,6 +101,7 @@ export const Preview = ({ browsePaths?: BrowsePathV2; }): JSX.Element => { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const hasStats = !!columnCount || summaryHasStats(statsSummary); return ( @@ -138,7 +139,7 @@ export const Preview = ({ rowCount={rowCount} queryCountLast30Days={statsSummary?.queryCountLast30Days} uniqueUserCountLast30Days={statsSummary?.uniqueUserCountLast30Days} - color={ANTD_GRAY[8]} + color={theme.colors.textSecondary} /> ) } diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/OperationsTab.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/OperationsTab.tsx index 946f6cb3b78c15..1c85b52b125eee 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/OperationsTab.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/OperationsTab.tsx @@ -5,7 +5,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { notEmpty } from '@app/entityV2/shared/utils'; import { getExecutionRequestStatusDisplayColor, @@ -23,7 +22,7 @@ import LoadingSvg from '@images/datahub-logo-color-loading_pendulum.svg?react'; const ExternalUrlLink = styled.a` font-size: 16px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const PaginationControlContainer = styled.div` diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/InteriorTitleContent.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/InteriorTitleContent.tsx index 61cdca66cea5c6..5ce5b97dee303d 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/InteriorTitleContent.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/InteriorTitleContent.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import translateFieldPath from '@app/entityV2/dataset/profile/schema/utils/translateFieldPath'; import { ExtendedSchemaFields } from '@app/entityV2/dataset/profile/schema/utils/types'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import NullableLabel, { ForeignKeyLabel, PartitioningKeyLabel, @@ -36,14 +35,14 @@ const FieldPathContainer = styled.div` `; const DeprecatedContainer = styled.div` - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; `; const FieldPathText = styled(Typography.Text)<{ $isCompact: boolean }>` font-size: 12px; line-height: ${(props) => (props.$isCompact ? '14px' : '24px')}; font-weight: 600; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; display: flex; align-items: center; diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaDescriptionField.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaDescriptionField.tsx index a77cf19d58b8da..3200bfa22f931d 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaDescriptionField.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaDescriptionField.tsx @@ -8,7 +8,6 @@ import analytics, { EntityActionType, EventType } from '@app/analytics'; import { useEntityData } from '@app/entity/shared/EntityContext'; import UpdateDescriptionModal from '@app/entityV2/shared/components/legacy/DescriptionModal'; import { removeMarkdown } from '@app/entityV2/shared/components/styled/StripMarkdownText'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import SchemaEditableContext from '@app/shared/SchemaEditableContext'; import HoverCardAttributionDetails from '@app/sharedV2/propagation/HoverCardAttributionDetails'; import { Editor, Tooltip } from '@src/alchemy-components'; @@ -20,12 +19,13 @@ import { MetadataAttribution } from '@types'; const EditIcon = styled(EditOutlined)` cursor: pointer; display: none; + color: ${(props) => props.theme.colors.iconSuccess}; `; const AddNewDescription = styled(Button)` display: flex; width: 140px; - background-color: #fafafa; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 4px; align-items: center; justify-content: center; @@ -46,31 +46,31 @@ const DescriptionContainer = styled.div` font-size: 12px; font-weight: 400; line-height: 24px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; vertical-align: middle; &:hover ${EditIcon} { display: inline-block; } & ins.diff { - background-color: #b7eb8f99; + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess}; text-decoration: none; &:hover { - background-color: #b7eb8faa; + background-color: ${(props) => props.theme.colors.bgSurfaceSuccess}; } } & del.diff { - background-color: #ffa39e99; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; text-decoration: line-through; &: hover { - background-color: #ffa39eaa; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; } } `; const EditedLabel = styled(Typography.Text)` display: inline-block; margin-left: 8px; - color: rgba(150, 150, 150, 0.5); + color: ${(props) => props.theme.colors.textDisabled}; font-style: italic; position: relative; top: -2px; @@ -89,7 +89,7 @@ const StyledViewer = styled(Editor)` font-size: 12px; font-weight: 400; line-height: 24px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; vertical-align: middle; } `; @@ -160,9 +160,7 @@ export default function DescriptionField({ }; const enableEdits = isSchemaEditable && !isReadOnly; - const EditButton = - (enableEdits && description && setShowAddModal(true)} />) || - undefined; + const EditButton = (enableEdits && description && setShowAddModal(true)} />) || undefined; const showAddButton = enableEdits && !description; diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx index eececdfd1bcabe..511e28972f68b5 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx @@ -2,7 +2,6 @@ import { Checkbox } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { SchemaFilterType } from '@app/entityV2/shared/tabs/Dataset/Schema/utils/filterSchemaRows'; import { Button } from '@src/alchemy-components'; @@ -20,7 +19,7 @@ const StyledCheckbox = styled(Checkbox)` margin-left: -16px; padding-left: 16px; :hover { - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } width: 232px; `; diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx index abaadb86db93c0..8b1606d192447e 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaSearchInput.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import SchemaFilterSelectContent from '@app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SchemaFilterType } from '@app/entityV2/shared/tabs/Dataset/Schema/utils/filterSchemaRows'; import { pluralize } from '@app/shared/textUtil'; @@ -11,7 +10,7 @@ const MatchLabelText = styled.span` font-size: 12px; font-style: normal; font-weight: 700; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; padding-left: 10px; margin-top: 5px; `; diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/VersionSelector.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/VersionSelector.tsx index 6e44c27f748ce8..d2734492216fdc 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/VersionSelector.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/components/VersionSelector.tsx @@ -5,7 +5,6 @@ import React, { useEffect, useMemo } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { toRelativeTimeString } from '@app/shared/time/timeUtils'; import PlatformIcon from '@app/sharedV2/icons/PlatformIcon'; import navigateToUrl from '@app/utils/navigateToUrl'; @@ -23,11 +22,11 @@ const Wrapper = styled.div` const SchemaBlameSelector = styled(Select)` &&& .ant-select-selector { - background: ${REDESIGN_COLORS.LIGHT_GREY}; + background: ${(props) => props.theme.colors.bgSurface}; font-size: 14px; font-weight: 500; line-height: 24px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; min-width: 30px; margin-right: 10px; border-radius: 20px; diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/schema/utils/schemaTypeRenderer.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/schema/utils/schemaTypeRenderer.tsx index 3f76d7ae7acd20..c05fe04a463e8a 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/schema/utils/schemaTypeRenderer.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/schema/utils/schemaTypeRenderer.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { ExtendedSchemaFields } from '@app/entityV2/dataset/profile/schema/utils/types'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import TypeLabel from '@app/entityV2/shared/tabs/Dataset/Schema/components/TypeLabel'; const FieldTypeWrapper = styled.div` @@ -14,7 +13,7 @@ const FieldTypeWrapper = styled.div` const FieldTypeContainer = styled.div` vertical-align: top; display: flex; - color: ${REDESIGN_COLORS.GREY_500}; + color: ${(props) => props.theme.colors.textSecondary}; `; type InteriorTypeProps = { diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/HistoricalStatsView.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/HistoricalStatsView.tsx index 421d9474d075b5..5c129a463c3550 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/HistoricalStatsView.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/HistoricalStatsView.tsx @@ -20,7 +20,7 @@ import { DateInterval } from '@types'; const HeaderRow = styled(Row)` padding-top: 24px; padding-bottom: 28px; - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const SubHeaderText = styled(Typography.Text)` diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx index 3567374e4b4bd8..809d312cd3c4c5 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx @@ -9,7 +9,7 @@ import { DatasetProfile } from '@types'; export const ChartTable = styled(Table)` margin: 12px; - box-shadow: ${(props) => props.theme.styles['box-shadow']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; export type Props = { diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/LatestStatsView.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/LatestStatsView.tsx index b253ce627fc44f..9bd6b4a81d1ee9 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/LatestStatsView.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/LatestStatsView.tsx @@ -1,6 +1,6 @@ import { Affix, Row, Typography } from 'antd'; import React, { ReactNode } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import DataProfileView from '@app/entityV2/dataset/profile/stats/snapshot/SnapshotStatsView'; @@ -9,7 +9,7 @@ import { DatasetProfile } from '@types'; const HeaderRow = styled(Row)` padding-top: 24px; padding-bottom: 28px; - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; `; export type Props = { @@ -18,6 +18,7 @@ export type Props = { }; export default function LatestStatsView({ profile, toggleView }: Props) { + const theme = useTheme(); const reportedAtDate = new Date(profile.timestampMillis); return ( <> @@ -25,7 +26,7 @@ export default function LatestStatsView({ profile, toggleView }: Props) {
Latest Stats - + Reported on {reportedAtDate.toLocaleDateString()} at {reportedAtDate.toLocaleTimeString()}
diff --git a/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/SnapshotStatsView.tsx b/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/SnapshotStatsView.tsx index 279f52e12a0ec7..f068ba05eed93b 100644 --- a/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/SnapshotStatsView.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/profile/stats/snapshot/SnapshotStatsView.tsx @@ -1,7 +1,7 @@ import { Row, Table, Tag, Typography } from 'antd'; import { ColumnType, ColumnsType } from 'antd/lib/table'; import React, { useMemo } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { Highlight } from '@app/analyticsDashboard/components/Highlight'; import StatsSection from '@app/entityV2/dataset/profile/stats/StatsSection'; @@ -25,6 +25,7 @@ export type Props = { }; export default function DataProfileView({ profile }: Props) { + const theme = useTheme(); const columnStatsTableData = useMemo( () => profile.fieldProfiles?.map((doc) => ({ @@ -47,7 +48,7 @@ export default function DataProfileView({ profile }: Props) { * Returns a placeholder value to show in the column data table when data is null. */ const unknownValue = () => { - return unknown; + return unknown; }; /** diff --git a/datahub-web-react/src/app/entityV2/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entityV2/dataset/shared/DatasetStatsSummary.tsx index 49f16e83b4c8f7..788c0fd9ea93de 100644 --- a/datahub-web-react/src/app/entityV2/dataset/shared/DatasetStatsSummary.tsx +++ b/datahub-web-react/src/app/entityV2/dataset/shared/DatasetStatsSummary.tsx @@ -1,10 +1,10 @@ import { Typography } from 'antd'; import React from 'react'; +import { useTheme } from 'styled-components'; import styled from 'styled-components/macro'; import ExpandingStat from '@app/entityV2/dataset/shared/ExpandingStat'; import { StatsSummary } from '@app/entityV2/shared/components/styled/StatsSummary'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { PercentileLabel } from '@app/entityV2/shared/stats/PercentileLabel'; import LastUpdated from '@app/shared/LastUpdated'; import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; @@ -17,7 +17,7 @@ const StatText = styled.span<{ color: string }>` } font-size: 12px; font-family: 'Mulish', sans-serif; - color: #8894a9; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { @@ -54,8 +54,9 @@ export const DatasetStatsSummary = ({ subTypes, mode = 'normal', }: Props) => { + const theme = useTheme(); const isTooltipMode = mode === 'tooltip-content'; - const displayedColor = isTooltipMode ? '' : (color ?? ANTD_GRAY[7]); + const displayedColor = isTooltipMode ? '' : (color ?? theme.colors.textTertiary); const statsViews = [ !!rowCount && ( diff --git a/datahub-web-react/src/app/entityV2/document/DocumentEntity.tsx b/datahub-web-react/src/app/entityV2/document/DocumentEntity.tsx index e3e1f215f3eadd..97f6811572ea5d 100644 --- a/datahub-web-react/src/app/entityV2/document/DocumentEntity.tsx +++ b/datahub-web-react/src/app/entityV2/document/DocumentEntity.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import { FileText } from '@phosphor-icons/react'; import * as React from 'react'; @@ -33,7 +32,7 @@ export class DocumentEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -49,7 +48,7 @@ export class DocumentEntity implements Entity { ); } - return ; + return ; }; isSearchEnabled = () => true; diff --git a/datahub-web-react/src/app/entityV2/document/DocumentModal.tsx b/datahub-web-react/src/app/entityV2/document/DocumentModal.tsx index 70a58f997da68c..a4b9dea23b76be 100644 --- a/datahub-web-react/src/app/entityV2/document/DocumentModal.tsx +++ b/datahub-web-react/src/app/entityV2/document/DocumentModal.tsx @@ -1,5 +1,4 @@ import { LoadingOutlined } from '@ant-design/icons'; -import { colors } from '@components'; import React from 'react'; import styled from 'styled-components'; @@ -155,7 +154,7 @@ export const DocumentModal: React.FC = ({ {loading || !document ? ( - + ) : ( props.theme.colors.bg}; border-radius: 12px; display: flex; flex-direction: column; flex: 1; - box-shadow: 0 0 6px 0px rgba(93, 102, 139, 0.2); + box-shadow: ${(props) => props.theme.colors.shadowSm}; height: 100%; overflow: hidden; `; diff --git a/datahub-web-react/src/app/entityV2/document/DocumentProfile.tsx b/datahub-web-react/src/app/entityV2/document/DocumentProfile.tsx index 9b6aef76cbc453..47e480de0df1e6 100644 --- a/datahub-web-react/src/app/entityV2/document/DocumentProfile.tsx +++ b/datahub-web-react/src/app/entityV2/document/DocumentProfile.tsx @@ -1,5 +1,4 @@ import { LoadingOutlined } from '@ant-design/icons'; -import { colors } from '@components'; import React, { useEffect } from 'react'; import styled from 'styled-components'; @@ -21,8 +20,8 @@ const LoadingWrapper = styled.div` border-radius: 12px; padding: 20px; margin: 4px; - background-color: #ffffff; - box-shadow: 0 0 6px 0px rgba(93, 102, 139, 0.2); + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; /** @@ -53,7 +52,7 @@ export const DocumentProfile = ({ urn }: { urn: string }): JSX.Element => { if (loading || !document) { return ( - + ); } diff --git a/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentChangeTimelineContent.tsx b/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentChangeTimelineContent.tsx index 04f96fde5e58f1..4695fc7be2c292 100644 --- a/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentChangeTimelineContent.tsx +++ b/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentChangeTimelineContent.tsx @@ -9,7 +9,6 @@ import { ChangeMessage } from '@app/entityV2/document/changeHistory/changeMessag import { extractChangeDetails, getActorDisplayName } from '@app/entityV2/document/changeHistory/utils/changeUtils'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Popover, Text } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; import { DocumentChange, DocumentChangeType } from '@types'; @@ -30,7 +29,7 @@ const TimeRow = styled.div` `; const TimeText = styled(Text)` - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; `; interface DocumentChangeTimelineContentProps { diff --git a/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentHistoryTimeline.tsx b/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentHistoryTimeline.tsx index 5b262999008522..77042aaa1fc066 100644 --- a/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentHistoryTimeline.tsx +++ b/datahub-web-react/src/app/entityV2/document/changeHistory/DocumentHistoryTimeline.tsx @@ -46,7 +46,7 @@ export const DocumentHistoryTimeline: React.FC = ( if (changes.length === 0) { return ( - No change history yet! + No change history yet! ); } diff --git a/datahub-web-react/src/app/entityV2/document/changeHistory/PreviousVersionModal.tsx b/datahub-web-react/src/app/entityV2/document/changeHistory/PreviousVersionModal.tsx index a3cc07fbee42f0..306522ae0ff0fc 100644 --- a/datahub-web-react/src/app/entityV2/document/changeHistory/PreviousVersionModal.tsx +++ b/datahub-web-react/src/app/entityV2/document/changeHistory/PreviousVersionModal.tsx @@ -4,7 +4,6 @@ import styled from 'styled-components'; import { ConfirmationModal } from '@app/sharedV2/modals/ConfirmationModal'; import { Button, Editor } from '@src/alchemy-components'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { useUpdateDocumentContentsMutation } from '@graphql/document.generated'; @@ -33,7 +32,7 @@ const StyledEditor = styled(Editor)` .remirror-editor.ProseMirror { font-size: 15px; line-height: 1.7; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; } p:last-of-type { margin-bottom: 0; @@ -42,7 +41,7 @@ const StyledEditor = styled(Editor)` `; const EmptyContent = styled.div` - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; font-style: italic; padding: 20px; `; @@ -52,7 +51,7 @@ const ModalFooter = styled.div` justify-content: flex-end; gap: 8px; padding-top: 16px; - border-top: 1px solid #f0f0f0; + border-top: 1px solid ${(props) => props.theme.colors.border}; `; interface PreviousVersionModalProps { diff --git a/datahub-web-react/src/app/entityV2/document/changeHistory/changeMessages/ChangeMessageComponents.tsx b/datahub-web-react/src/app/entityV2/document/changeHistory/changeMessages/ChangeMessageComponents.tsx index 84876f5f90712a..5f22288b630be7 100644 --- a/datahub-web-react/src/app/entityV2/document/changeHistory/changeMessages/ChangeMessageComponents.tsx +++ b/datahub-web-react/src/app/entityV2/document/changeHistory/changeMessages/ChangeMessageComponents.tsx @@ -7,14 +7,13 @@ import { isSystemActor } from '@app/entityV2/document/changeHistory/utils/change import { useGetEntities } from '@app/sharedV2/useGetEntities'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Icon } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; import { DocumentChangeType, EntityType } from '@types'; const ActionText = styled.div` font-size: 14px; line-height: 20px; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; overflow-wrap: break-word; `; @@ -27,18 +26,18 @@ const ActorName = styled.span` const ClickableText = styled(Link)` font-weight: bold; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; text-decoration: none; cursor: pointer; &:hover { text-decoration: underline; - color: ${colors.gray[800]}; + color: ${(props) => props.theme.colors.text}; } `; const SeeVersionLink = styled.a` - color: ${colors.primary[500]}; + color: ${(props) => props.theme.colors.textBrand}; cursor: pointer; text-decoration: none; @@ -68,7 +67,7 @@ const ActorDisplay: React.FC = ({ actorName, actor }) => { if (isSystem) { return ( - + {actorName} ); diff --git a/datahub-web-react/src/app/entityV2/document/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/document/preview/Preview.tsx index 584273a702c144..36530cc71c9623 100644 --- a/datahub-web-react/src/app/entityV2/document/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/document/preview/Preview.tsx @@ -1,5 +1,6 @@ import { FileText } from '@phosphor-icons/react'; import React from 'react'; +import { useTheme } from 'styled-components'; import { GenericEntityProperties } from '@app/entity/shared/types'; import { PreviewType } from '@app/entityV2/Entity'; @@ -38,6 +39,7 @@ export const Preview = ({ headerDropdownItems?: Set; previewType: PreviewType; }): JSX.Element => { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const externalUrl = data?.externalUrl || null; const truncatedDescription = @@ -54,7 +56,7 @@ export const Preview = ({ platform={platformName} logoUrl={platformLogo || undefined} platformInstanceId={platformInstanceId} - typeIcon={} + typeIcon={} owners={owners} insights={insights} logoComponent={logoComponent} diff --git a/datahub-web-react/src/app/entityV2/document/summary/AddRelatedEntityDropdown.tsx b/datahub-web-react/src/app/entityV2/document/summary/AddRelatedEntityDropdown.tsx index 593b2350b0327e..634ac1f57b26b2 100644 --- a/datahub-web-react/src/app/entityV2/document/summary/AddRelatedEntityDropdown.tsx +++ b/datahub-web-react/src/app/entityV2/document/summary/AddRelatedEntityDropdown.tsx @@ -4,7 +4,6 @@ import React, { useCallback, useState } from 'react'; import styled from 'styled-components'; import { EntitySearchDropdown } from '@app/entityV2/shared/EntitySearchSelect/EntitySearchDropdown'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { AndFilterInput, EntityType } from '@types'; @@ -26,7 +25,7 @@ const AddButton = styled(Button)` border: none; border-radius: 4px; background: transparent; - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.icon}; cursor: pointer; transition: all 0.2s ease; diff --git a/datahub-web-react/src/app/entityV2/document/summary/DocumentSummaryTab.tsx b/datahub-web-react/src/app/entityV2/document/summary/DocumentSummaryTab.tsx index df95466218be01..64fa4355a80c6a 100644 --- a/datahub-web-react/src/app/entityV2/document/summary/DocumentSummaryTab.tsx +++ b/datahub-web-react/src/app/entityV2/document/summary/DocumentSummaryTab.tsx @@ -1,4 +1,4 @@ -import { Button, Tooltip, colors } from '@components'; +import { Button, Tooltip } from '@components'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; @@ -51,10 +51,10 @@ const TopRightButton = styled(Button)` display: flex; align-items: center; justify-content: center; - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.icon}; &:hover { - background-color: ${colors.gray[100]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; @@ -72,13 +72,13 @@ const ActionsMenuWrapper = styled.div` display: flex; align-items: center; justify-content: center; - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.icon}; min-width: auto; width: auto; height: auto; &:hover { - background-color: ${colors.gray[100]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } } `; @@ -88,12 +88,12 @@ const Breadcrumb = styled.div` align-items: center; gap: 8px; font-size: 14px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 0px; `; const BreadcrumbLink = styled.a` - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; text-decoration: none; cursor: pointer; @@ -103,7 +103,7 @@ const BreadcrumbLink = styled.a` `; const BreadcrumbSeparator = styled.span` - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; margin: 0 4px; `; diff --git a/datahub-web-react/src/app/entityV2/document/summary/EditableContent.tsx b/datahub-web-react/src/app/entityV2/document/summary/EditableContent.tsx index 06b6f397ff7756..26c909a78d12d9 100644 --- a/datahub-web-react/src/app/entityV2/document/summary/EditableContent.tsx +++ b/datahub-web-react/src/app/entityV2/document/summary/EditableContent.tsx @@ -11,7 +11,6 @@ import { useRefetch } from '@app/entity/shared/EntityContext'; import { RelatedSection } from '@app/entityV2/document/summary/RelatedSection'; import useFileUpload from '@app/shared/hooks/useFileUpload'; import useFileUploadAnalyticsCallbacks from '@app/shared/hooks/useFileUploadAnalyticsCallbacks'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { DocumentRelatedAsset, DocumentRelatedDocument, UploadDownloadScenario } from '@types'; @@ -37,7 +36,7 @@ const StyledEditor = styled(Editor)<{ $hideToolbar?: boolean }>` .remirror-editor.ProseMirror { font-size: 15px; line-height: 1.7; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; } p:last-of-type { margin-bottom: 0; diff --git a/datahub-web-react/src/app/entityV2/document/summary/EditableTitle.tsx b/datahub-web-react/src/app/entityV2/document/summary/EditableTitle.tsx index bbd04371b5f90b..639c422d70e621 100644 --- a/datahub-web-react/src/app/entityV2/document/summary/EditableTitle.tsx +++ b/datahub-web-react/src/app/entityV2/document/summary/EditableTitle.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { useDocumentPermissions } from '@app/document/hooks/useDocumentPermissions'; import { useUpdateDocumentTitleMutation } from '@app/document/hooks/useDocumentTreeMutations'; -import colors from '@src/alchemy-components/theme/foundations/colors'; const TitleContainer = styled.div` width: 100%; @@ -14,7 +13,7 @@ const TitleInput = styled.textarea<{ $editable: boolean }>` font-size: 32px; font-weight: 700; line-height: 1.4; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; border: none; outline: none; background: transparent; @@ -43,7 +42,7 @@ const TitleInput = styled.textarea<{ $editable: boolean }>` } &::placeholder { - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.icon}; opacity: 0.4; } `; diff --git a/datahub-web-react/src/app/entityV2/document/summary/RelatedSection.tsx b/datahub-web-react/src/app/entityV2/document/summary/RelatedSection.tsx index 8d6b1f4d5ef281..80dad1782881c4 100644 --- a/datahub-web-react/src/app/entityV2/document/summary/RelatedSection.tsx +++ b/datahub-web-react/src/app/entityV2/document/summary/RelatedSection.tsx @@ -7,7 +7,6 @@ import { ALLOWED_RELATED_ASSET_TYPES } from '@app/document/utils/documentUtils'; import { AddRelatedEntityDropdown } from '@app/entityV2/document/summary/AddRelatedEntityDropdown'; import { EntityLink } from '@app/homeV2/reference/sections/EntityLink'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { AndFilterInput, DocumentRelatedAsset, DocumentRelatedDocument, EntityType, FilterOperator } from '@types'; @@ -34,7 +33,7 @@ const SectionTitle = styled.h4` font-size: 14px; font-weight: 600; margin: 0; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; `; const List = styled.div` @@ -46,7 +45,7 @@ const List = styled.div` const EmptyState = styled.div` font-size: 14px; font-weight: 400; - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; text-align: start; padding: 0px; `; diff --git a/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductBuilderForm.tsx b/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductBuilderForm.tsx index 06de0da727432c..b94c0d60560dcf 100644 --- a/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductBuilderForm.tsx +++ b/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductBuilderForm.tsx @@ -4,10 +4,9 @@ import React from 'react'; import styled from 'styled-components'; import { DataProductBuilderState } from '@app/entityV2/domain/DataProductsTab/types'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; const StyledEditor = styled(Editor)` - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgHover}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductResult.tsx b/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductResult.tsx index 40268782039a39..d77bc5731d931b 100644 --- a/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductResult.tsx +++ b/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductResult.tsx @@ -4,14 +4,13 @@ import styled from 'styled-components'; import { PreviewType } from '@app/entityV2/Entity'; import EditDataProductModal from '@app/entityV2/domain/DataProductsTab/EditDataProductModal'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { useEntityRegistryV2 } from '@app/useEntityRegistry'; import { useEntityContext } from '@src/app/entity/shared/EntityContext'; import { DataProduct, EntityType } from '@types'; const TransparentButton = styled(Button)` - color: ${REDESIGN_COLORS.RED_ERROR}; + color: ${(props) => props.theme.colors.textError}; font-size: 12px; box-shadow: none; border: none; @@ -25,7 +24,7 @@ const TransparentButton = styled(Button)` &:hover { transition: 0.15s; opacity: 0.9; - color: ${REDESIGN_COLORS.RED_ERROR}; + color: ${(props) => props.theme.colors.textError}; } `; @@ -33,8 +32,8 @@ const ResultWrapper = styled.div` padding: 20px; display: flex; align-items: center; - border: 1px solid #ebecf0; - background: ${REDESIGN_COLORS.WHITE}; + border: 1px solid ${(props) => props.theme.colors.border}; + background: ${(props) => props.theme.colors.bg}; border-radius: 10px; &:hover ${TransparentButton} { diff --git a/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductsTab.tsx b/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductsTab.tsx index 1d7bb40c1d988e..29b524f4ba24fd 100644 --- a/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductsTab.tsx +++ b/datahub-web-react/src/app/entityV2/domain/DataProductsTab/DataProductsTab.tsx @@ -3,14 +3,13 @@ import { Button, Empty, Pagination } from 'antd'; import * as QueryString from 'query-string'; import React, { useState } from 'react'; import { useLocation } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { DomainsPaginationContainer } from '@app/domain/DomainsList'; import { useEntityContext, useEntityData } from '@app/entity/shared/EntityContext'; import CreateDataProductModal from '@app/entityV2/domain/DataProductsTab/CreateDataProductModal'; import DataProductResult from '@app/entityV2/domain/DataProductsTab/DataProductResult'; import TabToolbar from '@app/entityV2/shared/components/styled/TabToolbar'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SearchBar } from '@app/search/SearchBar'; import { DOMAINS_FILTER_NAME } from '@app/search/utils/constants'; import { scrollToTop } from '@app/shared/searchUtils'; @@ -33,7 +32,7 @@ const ResultsWrapper = styled.div` flex-direction: column; padding: 16px; gap: 12px; - background: ${REDESIGN_COLORS.BACKGROUND}; + background: ${(props) => props.theme.colors.bgSurface}; `; const StyledLoading = styled(LoadingOutlined)` @@ -49,6 +48,7 @@ const LoadingWrapper = styled.div` const DEFAULT_PAGE_SIZE = 10; export default function DataProductsTab() { + const theme = useTheme(); const { refetch } = useEntityContext(); const { entityData } = useEntityData(); const entityRegistry = useEntityRegistry(); @@ -137,7 +137,7 @@ export default function DataProductsTab() { )} {loading && ( diff --git a/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx b/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx index e6ead2b048673c..0d6bf6fcfd0090 100644 --- a/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx +++ b/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx @@ -49,7 +49,7 @@ export class DomainEntity implements Entity { } if (styleType === IconStyleType.HIGHLIGHT) { - return ; + return ; } if (styleType === IconStyleType.SVG) { @@ -63,7 +63,7 @@ export class DomainEntity implements Entity { ); } - return ; + return ; }; isSearchEnabled = () => true; diff --git a/datahub-web-react/src/app/entityV2/domain/preview/DomainEntitiesSnippet.tsx b/datahub-web-react/src/app/entityV2/domain/preview/DomainEntitiesSnippet.tsx index 301be93db9cdac..59e1a99a814230 100644 --- a/datahub-web-react/src/app/entityV2/domain/preview/DomainEntitiesSnippet.tsx +++ b/datahub-web-react/src/app/entityV2/domain/preview/DomainEntitiesSnippet.tsx @@ -4,13 +4,12 @@ import React from 'react'; import styled from 'styled-components'; import DomainIcon from '@app/domain/DomainIcon'; -import { ANTD_GRAY_V2 } from '@app/entityV2/shared/constants'; import { pluralize } from '@app/shared/textUtil'; import { SearchResultFields_Domain_Fragment } from '@graphql/search.generated'; const Wrapper = styled.div` - color: ${ANTD_GRAY_V2[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; display: flex; align-items: center; diff --git a/datahub-web-react/src/app/entityV2/domain/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/domain/preview/Preview.tsx index d97780427c433f..81024363295d0f 100644 --- a/datahub-web-react/src/app/entityV2/domain/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/domain/preview/Preview.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTheme } from 'styled-components'; import DomainIcon from '@app/domain/DomainIcon'; import { GenericEntityProperties } from '@app/entity/shared/types'; @@ -38,6 +39,7 @@ export const Preview = ({ previewType: PreviewType; }): JSX.Element => { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); return ( } diff --git a/datahub-web-react/src/app/entityV2/domain/summary/ContentSectionLoading.tsx b/datahub-web-react/src/app/entityV2/domain/summary/ContentSectionLoading.tsx index dda81649683b26..2d7403e490bbc6 100644 --- a/datahub-web-react/src/app/entityV2/domain/summary/ContentSectionLoading.tsx +++ b/datahub-web-react/src/app/entityV2/domain/summary/ContentSectionLoading.tsx @@ -2,14 +2,12 @@ import { Skeleton, Space } from 'antd'; import * as React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const TypeSkeleton = styled(Skeleton.Input)` && { width: 60px; height: 60px; border-radius: 8px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; diff --git a/datahub-web-react/src/app/entityV2/domain/summary/ContentsSection.tsx b/datahub-web-react/src/app/entityV2/domain/summary/ContentsSection.tsx index 3e96bd290aa36f..344a79f42e9b92 100644 --- a/datahub-web-react/src/app/entityV2/domain/summary/ContentsSection.tsx +++ b/datahub-web-react/src/app/entityV2/domain/summary/ContentsSection.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { useEntityContext, useEntityData } from '@app/entity/shared/EntityContext'; import ContentSectionLoading from '@app/entityV2/domain/summary/ContentSectionLoading'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { getContentsSummary, getDomainEntitiesFilterUrl, @@ -25,11 +24,11 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; import { useGetDomainEntitySummaryQuery } from '@graphql/domain.generated'; const ViewAllButton = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding: 2px; :hover { cursor: pointer; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; text-decoration: underline; } `; diff --git a/datahub-web-react/src/app/entityV2/domain/summary/DataProductsSection.tsx b/datahub-web-react/src/app/entityV2/domain/summary/DataProductsSection.tsx index f60418d41914b4..35c5ff777197ea 100644 --- a/datahub-web-react/src/app/entityV2/domain/summary/DataProductsSection.tsx +++ b/datahub-web-react/src/app/entityV2/domain/summary/DataProductsSection.tsx @@ -1,12 +1,11 @@ import AddRoundedIcon from '@mui/icons-material/AddRounded'; import React from 'react'; import { useHistory } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { IconStyleType } from '@app/entity/Entity'; import { useEntityData } from '@app/entity/shared/EntityContext'; import ContentSectionLoading from '@app/entityV2/domain/summary/ContentSectionLoading'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { navigateToDomainDataProducts } from '@app/entityV2/shared/containers/profile/sidebar/Domain/utils'; import SectionActionButton from '@app/entityV2/shared/containers/profile/sidebar/SectionActionButton'; import { DataProductMiniPreview } from '@app/entityV2/shared/links/DataProductMiniPreview'; @@ -24,12 +23,12 @@ import { useGetSearchResultsForMultipleQuery } from '@graphql/search.generated'; import { DataProduct, EntityType } from '@types'; const ViewAllButton = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding: 2px; :hover { cursor: pointer; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; text-decoration: underline; } `; @@ -41,6 +40,7 @@ const StyledCarousel = styled(Carousel)` export const DataProductsSection = () => { const { urn, entityType, entityData } = useEntityData(); const history = useHistory(); + const theme = useTheme(); const domainUrn = entityData?.urn || ''; const entityRegistry = useEntityRegistry(); @@ -70,7 +70,12 @@ export const DataProductsSection = () => { props.theme.colors.textSecondary}; padding: 0px; margin: 0px; display: flex; diff --git a/datahub-web-react/src/app/entityV2/domain/summary/OwnerDetail.tsx b/datahub-web-react/src/app/entityV2/domain/summary/OwnerDetail.tsx index f53f0930d17e4b..b0ab4dd7ffb9b7 100644 --- a/datahub-web-react/src/app/entityV2/domain/summary/OwnerDetail.tsx +++ b/datahub-web-react/src/app/entityV2/domain/summary/OwnerDetail.tsx @@ -2,7 +2,6 @@ import { Tooltip } from '@components'; import React from 'react'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import CustomAvatar from '@app/shared/avatar/CustomAvatar'; import { useEntityRegistryV2 } from '@app/useEntityRegistry'; @@ -12,7 +11,7 @@ const Details = styled.div` display: flex; align-items: center; gap: 5px; - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; font-size: 14px; font-weight: 500; `; diff --git a/datahub-web-react/src/app/entityV2/domain/summary/OwnersSection.tsx b/datahub-web-react/src/app/entityV2/domain/summary/OwnersSection.tsx index 86db2d4adbd0dd..7c5dcd7179368b 100644 --- a/datahub-web-react/src/app/entityV2/domain/summary/OwnersSection.tsx +++ b/datahub-web-react/src/app/entityV2/domain/summary/OwnersSection.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; import OwnerDetail from '@app/entityV2/domain/summary/OwnerDetail'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { getOwnershipTypeName } from '@app/entityV2/shared/containers/profile/sidebar/Ownership/ownershipUtils'; import { SummaryTabHeaderTitle } from '@app/entityV2/shared/summary/HeaderComponents'; @@ -14,7 +13,7 @@ import { Owner, OwnershipTypeEntity } from '@types'; const OwnershipTypeNameText = styled(Typography.Text)` font-weight: 500; font-size: 12px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; `; const OwnersContainer = styled.div` diff --git a/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx index a8fa5fc84e588e..8cd487bb2c2cb3 100644 --- a/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx +++ b/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx @@ -47,20 +47,22 @@ class GlossaryNodeEntity implements Entity { return ( ); } if (styleType === IconStyleType.ACCENT) { - return ; + return ( + + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx index 538f32a60bb8e4..4850f3dae891e2 100644 --- a/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx +++ b/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx @@ -59,20 +59,22 @@ export class GlossaryTermEntity implements Entity { return ( ); } if (styleType === IconStyleType.ACCENT) { - return ; + return ( + + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/AddRelatedTermsModal.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/AddRelatedTermsModal.tsx index 4029610f15c78a..ff182266ac0936 100644 --- a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/AddRelatedTermsModal.tsx +++ b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/AddRelatedTermsModal.tsx @@ -1,7 +1,7 @@ import { Modal } from '@components'; import { Select, Tag, message } from 'antd'; import React, { useState } from 'react'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import { useEntityData, useRefetch } from '@app/entity/shared/EntityContext'; import GlossaryBrowser from '@app/glossary/GlossaryBrowser/GlossaryBrowser'; @@ -38,6 +38,7 @@ interface Props { function AddRelatedTermsModal(props: Props) { const { onClose, relationshipType } = props; + const theme = useTheme(); const [inputValue, setInputValue] = useState(''); const [selectedUrns, setSelectedUrns] = useState([]); const [selectedTerms, setSelectedTerms] = useState([]); @@ -168,7 +169,7 @@ function AddRelatedTermsModal(props: Props) { alignItems: 'center', whiteSpace: 'nowrap', opacity: 1, - color: '#434343', + color: theme.colors.text, lineHeight: '16px', }} > diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTerms.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTerms.tsx index db218e6ec5c1d0..04c72c213f13a3 100644 --- a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTerms.tsx +++ b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTerms.tsx @@ -14,7 +14,7 @@ const DetailWrapper = styled.div` `; const MenuWrapper = styled.div` - border-right: 2px solid #f5f5f5; + border-right: 2px solid ${(props) => props.theme.colors.border}; flex-basis: 30%; flex-shrink: 1; `; diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/RelatedTerm.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/RelatedTerm.tsx index c1f8148a8fc244..da900d213938ac 100644 --- a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/RelatedTerm.tsx +++ b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/RelatedTerm.tsx @@ -11,7 +11,7 @@ import { useGetGlossaryTermQuery } from '@graphql/glossaryTerm.generated'; import { EntityType, TermRelationshipType } from '@types'; const TransparentButton = styled(Button)` - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; font-size: 12px; box-shadow: none; border: none; @@ -24,20 +24,20 @@ const TransparentButton = styled(Button)` &:hover { transition: 0.15s; opacity: 0.9; - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textHover}; } `; const ListItem = styled.div` position: relative; - border: 1px solid #ebebeb; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 11px; &:hover ${TransparentButton} { display: inline-block; } &:hover { - border: 1px solid ${(props) => props.theme.styles['primary-color']}; + border: 1px solid ${(props) => props.theme.colors.borderBrand}; } `; diff --git a/datahub-web-react/src/app/entityV2/group/AddGroupMembersModal.tsx b/datahub-web-react/src/app/entityV2/group/AddGroupMembersModal.tsx index 4d97279fcbde9c..00168d66c12f6f 100644 --- a/datahub-web-react/src/app/entityV2/group/AddGroupMembersModal.tsx +++ b/datahub-web-react/src/app/entityV2/group/AddGroupMembersModal.tsx @@ -2,9 +2,8 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Modal } from '@components'; import { Empty, Select, Tag, message } from 'antd'; import React, { useRef, useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { OwnerLabel } from '@app/shared/OwnerLabel'; import { useGetRecommendations } from '@app/shared/recommendation'; import { addUserFiltersToSearchInput } from '@app/shared/userSearchUtils'; @@ -40,11 +39,12 @@ const LoadingWrapper = styled.div` svg { height: 15px; width: 15px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; export const AddGroupMembersModal = ({ urn, visible, onCloseModal, onSubmit }: Props) => { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const [selectedMembers, setSelectedMembers] = useState([]); const [inputValue, setInputValue] = useState(''); @@ -201,7 +201,7 @@ export const AddGroupMembersModal = ({ urn, visible, onCloseModal, onSubmit }: P ) : null } diff --git a/datahub-web-react/src/app/entityV2/group/Group.tsx b/datahub-web-react/src/app/entityV2/group/Group.tsx index e210abf415a073..0c6ce3fe6b6d66 100644 --- a/datahub-web-react/src/app/entityV2/group/Group.tsx +++ b/datahub-web-react/src/app/entityV2/group/Group.tsx @@ -28,7 +28,7 @@ export class GroupEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/group/GroupInfoHeaderSection.tsx b/datahub-web-react/src/app/entityV2/group/GroupInfoHeaderSection.tsx index d5686f93962f4e..48498f0db1cab8 100644 --- a/datahub-web-react/src/app/entityV2/group/GroupInfoHeaderSection.tsx +++ b/datahub-web-react/src/app/entityV2/group/GroupInfoHeaderSection.tsx @@ -5,7 +5,6 @@ import React from 'react'; import styled from 'styled-components'; import { MemberCount } from '@app/entityV2/group/GroupSidebar'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { EntityRelationshipsResult } from '@types'; @@ -21,7 +20,7 @@ const GroupName = styled(Typography.Title)` margin-bottom: 0; word-break: break-all; font-size: 12px; - color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/datahub-web-react/src/app/entityV2/group/GroupMembers.tsx b/datahub-web-react/src/app/entityV2/group/GroupMembers.tsx index 507481d18c503b..86a63118c743da 100644 --- a/datahub-web-react/src/app/entityV2/group/GroupMembers.tsx +++ b/datahub-web-react/src/app/entityV2/group/GroupMembers.tsx @@ -2,7 +2,7 @@ import { MoreOutlined, UserAddOutlined, UserDeleteOutlined } from '@ant-design/i import { Button, Col, Dropdown, Empty, MenuProps, Pagination, Row, Typography, message } from 'antd'; import React, { useState } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { AddGroupMembersModal } from '@app/entityV2/group/AddGroupMembersModal'; import { CustomAvatar } from '@app/shared/avatar'; @@ -13,10 +13,6 @@ import { useEntityRegistry } from '@app/useEntityRegistry'; import { useGetAllGroupMembersQuery, useRemoveGroupMembersMutation } from '@graphql/group.generated'; import { CorpUser, EntityType } from '@types'; -const ADD_MEMBER_STYLE = { - backGround: '#ffffff', - boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.05)', -}; const AVATAR_STYLE = { margin: '5px 5px 5px 0' }; /** @@ -42,7 +38,7 @@ const AddMemberText = styled(Typography.Text)` const MemberNameSection = styled.div` font-size: 20px; line-height: 28px; - color: #262626; + color: ${(props) => props.theme.colors.text}; display: flex; align-items: center; justify-content: start; @@ -60,7 +56,7 @@ const GroupMemberWrapper = styled.div` const MemberColumn = styled(Col)` padding: 19px 0 19px 0; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const MemberEditIcon = styled.div` @@ -72,7 +68,7 @@ const Name = styled.span` font-weight: bold; font-size: 14px; line-height: 22px; - color: #262626; + color: ${(props) => props.theme.colors.text}; margin-left: 8px; `; @@ -94,6 +90,7 @@ type Props = { }; export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeMembers }: Props) { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const [page, setPage] = useState(1); @@ -177,7 +174,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM return ( <> - + props.theme.colors.bg}; border-radius: 8px; overflow: hidden; height: 100%; @@ -59,7 +58,7 @@ const GroupProfileWrapper = styled.div` const ContentContainer = styled.div<{ isVisible: boolean }>` flex: 1; - ${(props) => props.isVisible && `border-right: 1px solid ${REDESIGN_COLORS.SIDE_BAR_BORDER_RIGHT};`} + ${(props) => props.isVisible && `border-right: 1px solid ${props.theme.colors.border};`} overflow: inherit; `; @@ -78,6 +77,7 @@ type Props = { */ export default function GroupProfile({ urn }: Props) { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const location = useLocation(); const isCompact = React.useContext(CompactContext); const isInSearch = matchPath(location.pathname, PageRoutes.SEARCH_RESULTS) !== null; @@ -210,7 +210,7 @@ export default function GroupProfile({ urn }: Props) { md={17} sm={24} xs={24} - style={{ borderLeft: `1px solid ${colors.gray[100]}`, height: '100%' }} + style={{ borderLeft: `1px solid ${theme.colors.border}`, height: '100%' }} > diff --git a/datahub-web-react/src/app/entityV2/group/GroupProfileInfoCard.tsx b/datahub-web-react/src/app/entityV2/group/GroupProfileInfoCard.tsx index 98cb8d36c6db50..fecc84f3de05ee 100644 --- a/datahub-web-react/src/app/entityV2/group/GroupProfileInfoCard.tsx +++ b/datahub-web-react/src/app/entityV2/group/GroupProfileInfoCard.tsx @@ -1,6 +1,6 @@ import { Col, message } from 'antd'; import React, { useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; import { GroupBasicInfoSection } from '@app/entityV2/group/GroupBasicInfoSection'; @@ -12,7 +12,6 @@ import { GroupInfo, WhiteEditOutlinedIconStyle, } from '@app/entityV2/shared/SidebarStyledComponents'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import SectionActionButton from '@app/entityV2/shared/containers/profile/sidebar/SectionActionButton'; import CustomAvatar from '@app/shared/avatar/CustomAvatar'; @@ -33,18 +32,17 @@ export type SidebarData = { urn: string; }; -const AVATAR_STYLE = { +const BASE_AVATAR_STYLE = { borderRadius: '9px', zIndex: '2', height: '36px', width: '36px', - backgroundColor: REDESIGN_COLORS.AVATAR_STYLE_WHITE_BACKGROUND, }; const AvatarWithTitleContainer = styled.div` display: flex; padding: 10px; - background: ${REDESIGN_COLORS.GROUP_AVATAR_STYLE_GRADIENT}}; + background: ${(props) => props.theme.colors.brandGradient}; gap: 0.5rem; `; @@ -54,6 +52,8 @@ type Props = { }; export const GroupProfileInfoCard = ({ sidebarData, refetch }: Props) => { + const themeConfig = useTheme(); + const avatarStyle = { ...BASE_AVATAR_STYLE, backgroundColor: `${themeConfig.colors.bg}66` }; const { avatarName, name, @@ -106,7 +106,7 @@ export const GroupProfileInfoCard = ({ sidebarData, refetch }: Props) => { size={36} photoUrl={photoUrl} name={avatarName} - style={AVATAR_STYLE} + style={avatarStyle} /> diff --git a/datahub-web-react/src/app/entityV2/group/GroupSidebar.tsx b/datahub-web-react/src/app/entityV2/group/GroupSidebar.tsx index 60666aed08a564..2e95ef29318519 100644 --- a/datahub-web-react/src/app/entityV2/group/GroupSidebar.tsx +++ b/datahub-web-react/src/app/entityV2/group/GroupSidebar.tsx @@ -6,7 +6,6 @@ import { GroupProfileInfoCard, SidebarData } from '@app/entityV2/group/GroupProf import { GroupSidebarMembersSection } from '@app/entityV2/group/GroupSidebarMembersSection'; import { GroupSidebarOwnersSection } from '@app/entityV2/group/GroupSidebarOwnersSection'; import { Content, SideBar } from '@app/entityV2/shared/SidebarStyledComponents'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { AboutSidebarSection } from '@app/entityV2/shared/sidebarSection/AboutSidebarSection'; import { useUpdateCorpGroupPropertiesMutation } from '@graphql/group.generated'; @@ -18,7 +17,7 @@ type Props = { export const MemberCount = styled.div` font-size: 10px; - color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; font-weight: 400; text-align: left; `; diff --git a/datahub-web-react/src/app/entityV2/group/preview/Preview.tsx b/datahub-web-react/src/app/entityV2/group/preview/Preview.tsx index 1e36dc76b4c670..a75d07113546d4 100644 --- a/datahub-web-react/src/app/entityV2/group/preview/Preview.tsx +++ b/datahub-web-react/src/app/entityV2/group/preview/Preview.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { IconStyleType } from '@app/entityV2/Entity'; import NoMarkdownViewer from '@app/entityV2/shared/components/styled/StripMarkdownText'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import SearchTextHighlighter from '@app/searchV2/matches/SearchTextHighlighter'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -51,7 +50,7 @@ const PlatformText = styled(Typography.Text)` font-size: 12px; line-height: 20px; font-weight: 700; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const DescriptionContainer = styled.div` diff --git a/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx b/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx index 11cc2e901c1942..6bc8583c285287 100644 --- a/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx @@ -50,7 +50,7 @@ export class MLFeatureEntity implements Entity { return ( ); @@ -59,7 +59,7 @@ export class MLFeatureEntity implements Entity { return ( ); diff --git a/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx b/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx index 8d69e8047a7b79..4724a57c0c9519 100644 --- a/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx @@ -46,7 +46,7 @@ export class MLFeatureTableEntity implements Entity { return ( ); @@ -55,7 +55,7 @@ export class MLFeatureTableEntity implements Entity { return ( ); diff --git a/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx b/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx index e23212ee9ce469..0df2e42c1cb2fa 100644 --- a/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx @@ -53,14 +53,17 @@ export class MLModelEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/mlModel/profile/MLModelSummary.tsx b/datahub-web-react/src/app/entityV2/mlModel/profile/MLModelSummary.tsx index 5d6de328bf1682..2913f3921e237a 100644 --- a/datahub-web-react/src/app/entityV2/mlModel/profile/MLModelSummary.tsx +++ b/datahub-web-react/src/app/entityV2/mlModel/profile/MLModelSummary.tsx @@ -11,7 +11,6 @@ import { InfoItem } from '@app/entityV2/shared/components/styled/InfoItem'; import { notEmpty } from '@app/entityV2/shared/utils'; import { TimestampPopover } from '@app/sharedV2/TimestampPopover'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { colors } from '@src/alchemy-components/theme'; import { GetMlModelQuery } from '@graphql/mlModel.generated'; import { EntityType, MlHyperParam, MlMetric } from '@types'; @@ -36,7 +35,7 @@ const InfoItemContent = styled.div` `; const JobLink = styled(Link)` - color: ${colors.blue[700]}; + color: ${(props) => props.theme.colors.textInformation}; &:hover { text-decoration: underline; } @@ -45,7 +44,7 @@ const JobLink = styled(Link)` const FormattedJson = styled.pre` margin: 0; padding: 8px; - background-color: #f5f5f5; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; white-space: pre-wrap; diff --git a/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx b/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx index 61a2fa5a667ddb..f64b98dedb5e16 100644 --- a/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx @@ -48,14 +48,17 @@ export class MLModelGroupEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/mlModelGroup/profile/ModelGroupModels.tsx b/datahub-web-react/src/app/entityV2/mlModelGroup/profile/ModelGroupModels.tsx index cb68801eaf9849..0589140ec14104 100644 --- a/datahub-web-react/src/app/entityV2/mlModelGroup/profile/ModelGroupModels.tsx +++ b/datahub-web-react/src/app/entityV2/mlModelGroup/profile/ModelGroupModels.tsx @@ -10,7 +10,6 @@ import { notEmpty } from '@app/entityV2/shared/utils'; import { TimestampPopover } from '@app/sharedV2/TimestampPopover'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Pill } from '@src/alchemy-components/components/Pills'; -import { colors } from '@src/alchemy-components/theme'; import { GetMlModelGroupQuery } from '@graphql/mlModelGroup.generated'; import { EntityType } from '@types'; @@ -38,7 +37,7 @@ const NameLink = styled(Link)` font-size: 0.9rem; &:hover { - color: ${colors.blue[400]} !important; + color: ${(props) => props.theme.colors.textInformation} !important; } `; @@ -48,7 +47,7 @@ const TagContainer = styled.div` margin-top: 3px; flex-wrap: wrap; margin-right: 8px; - backgroundcolor: white; + background-color: ${(props) => props.theme.colors.bgSurface}; gap: 5px; `; diff --git a/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx b/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx index f60d0ecd87e4c3..45095c19ee24c1 100644 --- a/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx +++ b/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx @@ -38,14 +38,17 @@ export class MLPrimaryKeyEntity implements Entity { if (styleType === IconStyleType.HIGHLIGHT) { return ( - + ); } return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/ownership/table/ActionsColumn.tsx b/datahub-web-react/src/app/entityV2/ownership/table/ActionsColumn.tsx index 31613811691d96..9ae7dd0b1507cc 100644 --- a/datahub-web-react/src/app/entityV2/ownership/table/ActionsColumn.tsx +++ b/datahub-web-react/src/app/entityV2/ownership/table/ActionsColumn.tsx @@ -95,6 +95,7 @@ export const ActionsColumn = ({ ownershipType, setIsOpen, setOwnershipType, refe }, { key: 'delete', + danger: true, icon: ( Are you sure you want to delete this ownership type?} diff --git a/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx b/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx index 20937aa1826339..6459282ea99de4 100644 --- a/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx +++ b/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx @@ -27,7 +27,7 @@ export class QueryEntity implements Entity { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx b/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx index f696db3fee4855..e1fd5ac9769265 100644 --- a/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx +++ b/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx @@ -28,7 +28,7 @@ export class SchemaFieldEntity implements Entity { type: EntityType = EntityType.SchemaField; icon = (fontSize?: number, styleType?: IconStyleType, color = 'inherit') => ( - + ); isSearchEnabled = () => true; diff --git a/datahub-web-react/src/app/entityV2/shared/ActorAvatar.tsx b/datahub-web-react/src/app/entityV2/shared/ActorAvatar.tsx index 75545c5ee3752d..6186325bf23d3d 100644 --- a/datahub-web-react/src/app/entityV2/shared/ActorAvatar.tsx +++ b/datahub-web-react/src/app/entityV2/shared/ActorAvatar.tsx @@ -11,7 +11,7 @@ import { useIsEmbeddedProfile } from '@src/app/shared/useEmbeddedProfileLinkProp import defaultAvatar from '@images/default_avatar.png'; const AvatarStyled = styled(Avatar)<{ size?: number; $backgroundColor?: string }>` - color: #fff; + color: ${(props) => props.theme.colors.textBrandOnBgFill}; background-color: ${(props) => (props.$backgroundColor ? `${props.$backgroundColor}` : 'transparent')}; font-size: ${(props) => (props.size ? `${Math.max(props.size / 2.0, 10)}px` : '10px')} !important; height: ${(props) => (props.size ? props.size : 20)}px; diff --git a/datahub-web-react/src/app/entityV2/shared/DomainSelector/InfiniteScrollNestedSelect.tsx b/datahub-web-react/src/app/entityV2/shared/DomainSelector/InfiniteScrollNestedSelect.tsx index ed55e1e7c7307d..ecc1532b6923ac 100644 --- a/datahub-web-react/src/app/entityV2/shared/DomainSelector/InfiniteScrollNestedSelect.tsx +++ b/datahub-web-react/src/app/entityV2/shared/DomainSelector/InfiniteScrollNestedSelect.tsx @@ -17,8 +17,8 @@ const LoadingContainer = styled.div` justify-content: center; align-items: center; padding: 12px; - border-top: 1px solid #f0f0f0; - background: white; + border-top: 1px solid ${(props) => props.theme.colors.border}; + background: ${(props) => props.theme.colors.bgSurface}; `; export interface InfiniteScrollNestedSelectProps diff --git a/datahub-web-react/src/app/entityV2/shared/EntityDropdown/DomainParentSelect.tsx b/datahub-web-react/src/app/entityV2/shared/EntityDropdown/DomainParentSelect.tsx index c467a47102631a..566c1da3111eb5 100644 --- a/datahub-web-react/src/app/entityV2/shared/EntityDropdown/DomainParentSelect.tsx +++ b/datahub-web-react/src/app/entityV2/shared/EntityDropdown/DomainParentSelect.tsx @@ -1,11 +1,11 @@ import { CloseCircleFilled } from '@ant-design/icons'; import { Empty, Select } from 'antd'; import React, { MouseEvent } from 'react'; +import { useTheme } from 'styled-components'; import domainAutocompleteOptions from '@app/domainV2/DomainAutocompleteOptions'; import DomainNavigator from '@app/domainV2/nestedDomains/domainNavigator/DomainNavigator'; import useParentSelector from '@app/entityV2/shared/EntityDropdown/useParentSelector'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import ClickOutside from '@app/shared/ClickOutside'; import { BrowserWrapper } from '@app/shared/tags/AddTagsTermsModal'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -29,6 +29,7 @@ interface Props { } export default function DomainParentSelect({ selectedParentUrn, setSelectedParentUrn, isMoving }: Props) { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const { entityData } = useDomainsContext(); const domainUrn = entityData?.urn; @@ -89,7 +90,7 @@ export default function DomainParentSelect({ selectedParentUrn, setSelectedParen } options={domainAutocompleteOptions( diff --git a/datahub-web-react/src/app/entityV2/shared/EntityDropdown/EntityDropdown.tsx b/datahub-web-react/src/app/entityV2/shared/EntityDropdown/EntityDropdown.tsx index 30c250516b0f4b..d03d7fbe496abf 100644 --- a/datahub-web-react/src/app/entityV2/shared/EntityDropdown/EntityDropdown.tsx +++ b/datahub-web-react/src/app/entityV2/shared/EntityDropdown/EntityDropdown.tsx @@ -4,7 +4,7 @@ import { message } from 'antd'; import qs from 'query-string'; import React, { useState } from 'react'; import { Redirect, useHistory } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { EventType } from '@app/analytics'; import analytics from '@app/analytics/analytics'; @@ -47,7 +47,7 @@ const StyledMoreIcon = styled(MoreVertOutlinedIcon)` padding: 2px; :hover { - color: ${(p) => p.theme.styles['primary-color']}; + color: ${(p) => p.theme.colors.textHover}; } } `; @@ -73,6 +73,7 @@ interface Props { const EntityDropdown = (props: Props) => { const history = useHistory(); + const themeConfig = useTheme(); const { urn, @@ -201,7 +202,7 @@ const EntityDropdown = (props: Props) => { style={{ width: '16px', height: '16px', - color: '#8088A3', + color: themeConfig.colors.textTertiary, }} /> @@ -217,7 +218,7 @@ const EntityDropdown = (props: Props) => { style={{ fontFamily: 'Mulish', fontWeight: 600, - color: '#374066', + color: themeConfig.colors.text, fontSize: '14px', }} > diff --git a/datahub-web-react/src/app/entityV2/shared/EntityDropdown/styledComponents.tsx b/datahub-web-react/src/app/entityV2/shared/EntityDropdown/styledComponents.tsx index 779fd282dedaed..6e4201aecc75be 100644 --- a/datahub-web-react/src/app/entityV2/shared/EntityDropdown/styledComponents.tsx +++ b/datahub-web-react/src/app/entityV2/shared/EntityDropdown/styledComponents.tsx @@ -1,12 +1,10 @@ import { Button } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; - const MenuItem = styled.div` font-size: 12px; padding: 0 4px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; export const ActionMenuItem = styled(Button)<{ disabled?: boolean; fontSize?: number }>` @@ -20,20 +18,20 @@ export const ActionMenuItem = styled(Button)<{ disabled?: boolean; fontSize?: nu justify-content: center; overflow: hidden; border: none; - background-color: 'white'; - border: 1px solid #eee; - color: ${REDESIGN_COLORS.ACTION_ICON_GREY}; + background-color: ${(props) => props.theme.colors.bg}; + border: 1px solid ${(props) => props.theme.colors.border}; + color: ${(props) => props.theme.colors.icon}; box-shadow: none; &&:hover { - background-color: ${ANTD_GRAY[3]}; - color: ${(props) => props.theme.styles['primary-color']}; - border-color: ${(props) => props.theme.styles['primary-color']}; + background-color: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.textHover}; + border-color: ${(props) => props.theme.colors.borderBrand}; } ${(props) => props.disabled ? ` ${MenuItem} { - color: ${ANTD_GRAY[7]}; + color: ${props.theme.colors.textDisabled}; } ` : ''}; diff --git a/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/ActorsSearchSelect.tsx b/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/ActorsSearchSelect.tsx index aeba650e9f238e..d498d289231b17 100644 --- a/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/ActorsSearchSelect.tsx +++ b/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/ActorsSearchSelect.tsx @@ -175,7 +175,7 @@ export const ActorsSearchSelect: React.FC = ({ {displayName} {subtitle && ( - + {subtitle} )} diff --git a/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/EntitySearchDropdown.tsx b/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/EntitySearchDropdown.tsx index 28725a48b9b39a..04cb7c7c6d1a47 100644 --- a/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/EntitySearchDropdown.tsx +++ b/datahub-web-react/src/app/entityV2/shared/EntitySearchSelect/EntitySearchDropdown.tsx @@ -35,7 +35,7 @@ const EntityOptionContainer = styled.div` const LoadingState = styled.div` padding: 16px 12px; text-align: center; - color: #8c8c8c; + color: ${(props) => props.theme.colors.textTertiary}; display: flex; align-items: center; justify-content: center; @@ -45,7 +45,7 @@ const LoadingState = styled.div` const EmptyState = styled.div` padding: 16px 12px; text-align: center; - color: #8c8c8c; + color: ${(props) => props.theme.colors.textTertiary}; font-style: italic; `; diff --git a/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx b/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx index d0fbdaaf4578cb..131aa99c8b9adc 100644 --- a/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx +++ b/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx @@ -1,11 +1,8 @@ -import { colors } from '@components'; import DraftsOutlinedIcon from '@mui/icons-material/DraftsOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; import { Row } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; - /** * Styled Components- Users and Groups Side bar component * Description: The following styles are used for User and Groups UI for sidebar. @@ -43,18 +40,18 @@ export const SideBarSubSection = styled.div` &::-webkit-scrollbar { height: 12px; width: 1px; - background: #d6d6d6; + background: ${(props) => props.theme.colors.bgSurface}; } &::-webkit-scrollbar-thumb { - background: #d6d6d6; - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); + background: ${(props) => props.theme.colors.bgSurface}; + -webkit-box-shadow: ${(props) => props.theme.colors.shadowXs}; } `; export const EmptyValue = styled.div<{ color?: string }>` &:after { content: 'None'; - color: ${(props) => (props.color ? props.color : '#b7b7b7')}; + color: ${(props) => (props.color ? props.color : props.theme.colors.textDisabled)}; font-style: italic; font-weight: 100; } @@ -63,7 +60,7 @@ export const EmptyValue = styled.div<{ color?: string }>` export const Name = styled.div` font-size: 12px; line-height: 18px; - color: ${ANTD_GRAY_V2['11']}; + color: ${(props) => props.theme.colors.textSecondary}; text-align: left; display: flex; align-items: center; @@ -74,26 +71,26 @@ export const Name = styled.div` white-space: nowrap; } @media only screen and (min-width: 1200px) { - color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; } `; export const TitleRole = styled.div` font-size: 12px; line-height: 18px; - color: ${ANTD_GRAY_V2['11']}; + color: ${(props) => props.theme.colors.textSecondary}; text-align: left; white-space: wrap; @media only screen and (min-width: 1200px) { - color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; } `; export const RoleName = styled.div` text-align: center; - color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; border-radius: 30px; - background-color: #565657; + background-color: ${(props) => props.theme.colors.bgSurface}; padding: 3px 5px; text-transform: uppercase; font-size: 7px; @@ -101,14 +98,14 @@ export const RoleName = styled.div` position: relative; z-index: 2; @media only screen and (min-width: 1200px) { - background-color: ${ANTD_GRAY[1]}4a; + background-color: ${(props) => props.theme.colors.bg}4a; } `; export const Team = styled.div` font-size: 12px; line-height: 20px; - color: #8c8c8c; + color: ${(props) => props.theme.colors.textTertiary}; `; export const SocialDetails = styled.div` @@ -117,7 +114,7 @@ export const SocialDetails = styled.div` gap: 0.4rem; font-size: 12px; line-height: 20px; - color: ${ANTD_GRAY_V2['11']}; + color: ${(props) => props.theme.colors.textSecondary}; text-align: left; span { text-overflow: ellipsis; @@ -144,7 +141,7 @@ export const EditButton = styled.div` width: 100%; font-size: 12px; line-height: 20px; - color: #262626; + color: ${(props) => props.theme.colors.text}; } `; @@ -153,14 +150,14 @@ export const AboutSection = styled.div` font-weight: bold; font-size: 14px; line-height: 22px; - color: #262626; + color: ${(props) => props.theme.colors.text}; `; export const AboutSectionText = styled.div` font-size: 12px; font-weight: 100; line-height: 15px; - color: #434863; + color: ${(props) => props.theme.colors.text}; &&& .ant-typography { margin-bottom: 0; @@ -189,7 +186,7 @@ export const TagsSection = styled.div` export const NoDataFound = styled.span` font-size: 12px; - color: #262626; + color: ${(props) => props.theme.colors.text}; font-weight: 100; `; @@ -201,7 +198,7 @@ export const GroupsSeeMoreText = styled.span` font-weight: 500; font-size: 12px; line-height: 20px; - color: #1890ff; + color: ${(props) => props.theme.colors.hyperlinks}; cursor: pointer; `; @@ -211,7 +208,7 @@ export const DisplayCount = styled.span` font-weight: 500; font-size: 12px; line-height: 20px; - color: #8c8c8c; + color: ${(props) => props.theme.colors.textTertiary}; `; export const GroupSectionTitle = styled.span` @@ -234,7 +231,7 @@ export const Content = styled.div` width: 100%; &:not(:last-child) { border-bottom: 1px solid; - border-color: ${colors.gray[100]}; + border-color: ${(props) => props.theme.colors.border}; } } `; @@ -253,7 +250,7 @@ export const UserInfo = styled(Row)` display: flex; gap: 1rem; padding: 10px 10px; - background: ${ANTD_GRAY_V2['14']}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 10px; justify-content: center; @media only screen and (min-width: 1200px) { @@ -268,7 +265,7 @@ export const GroupInfo = styled.div` display: flex; flex-direction: column; flex-wrap: wrap; - background: ${ANTD_GRAY_V2['14']}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 10px; overflow: hidden; `; @@ -284,7 +281,7 @@ export const SocialInfo = styled.div` export const GradientContainer = styled.div<{ gradient?: string; height?: number }>` border-radius: 10px 10px 0px 0px; - background: ${(props) => (props.gradient ? props.gradient : REDESIGN_COLORS.PROFILE_AVATAR_STYLE_GRADIENT)}; + background: ${(props) => (props.gradient ? props.gradient : props.theme.colors.brandGradient)}; height: 65px; width: 100%; z-index: 1; @@ -312,13 +309,13 @@ export const EditProfileButtonContainer = styled.div` cursor: pointer; display: none; &&& div { - border-color: ${REDESIGN_COLORS.WHITE}; + border-color: ${(props) => props.theme.colors.bg}; height: 18px; width: 18px; display: flex; align-items: center; &:hover { - border-color: ${REDESIGN_COLORS.BORDER_4}; + border-color: ${(props) => props.theme.colors.borderBrand}; } } `; @@ -354,7 +351,7 @@ export const OwnershipContainer = styled(Row)` `; export const DisplayNameText = styled.span` - color: ${ANTD_GRAY_V2[12]}; + color: ${(props) => props.theme.colors.textSecondary}; font-family: Mulish; font-size: 12px; font-style: normal; @@ -368,20 +365,20 @@ export const NameTitleContainer = styled.div` `; export const WhiteEditOutlinedIconStyle = styled(EditOutlinedIcon)` - color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; height: 18px !important; width: 18px !important; &:hover, &:focus { - color: ${REDESIGN_COLORS.WHITE}; - border-color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.bg}; + border-color: ${(props) => props.theme.colors.bg}; } `; -const showMoreStyles = ` +const showMoreStyles = (props) => ` margin-top: 8px; padding: 0px; - color: ${ANTD_GRAY[7]}; + color: ${props.theme.colors.textTertiary}; text-align: left; `; @@ -389,7 +386,7 @@ export const ShowMoreButton = styled.div` ${showMoreStyles} :hover { cursor: pointer; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textTertiary}; text-decoration: underline; } `; @@ -399,9 +396,9 @@ export const ShowMoreText = styled.div` `; export const CountStyle = styled.div` - background-color: #ebecf0; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 100px; - color: #5b6282; + color: ${(props) => props.theme.colors.textSecondary}; padding: 0px 10px; margin: 0px 5px; font-size: 10px; diff --git a/datahub-web-react/src/app/entityV2/shared/TableLoadingSkeleton.tsx b/datahub-web-react/src/app/entityV2/shared/TableLoadingSkeleton.tsx index f7ff9179b1663c..89f1b04ea9f99f 100644 --- a/datahub-web-react/src/app/entityV2/shared/TableLoadingSkeleton.tsx +++ b/datahub-web-react/src/app/entityV2/shared/TableLoadingSkeleton.tsx @@ -2,8 +2,6 @@ import { Skeleton } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const Header = styled.div` width: 100%; padding-left: 40px; @@ -12,7 +10,7 @@ const Header = styled.div` padding-right: 40px; display: flex; align-items: center; - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const Body = styled.div``; diff --git a/datahub-web-react/src/app/entityV2/shared/announce/CreateEntityAnnouncementModal.tsx b/datahub-web-react/src/app/entityV2/shared/announce/CreateEntityAnnouncementModal.tsx index 111556a9a270e3..54f8a5760b6534 100644 --- a/datahub-web-react/src/app/entityV2/shared/announce/CreateEntityAnnouncementModal.tsx +++ b/datahub-web-react/src/app/entityV2/shared/announce/CreateEntityAnnouncementModal.tsx @@ -31,7 +31,7 @@ type Props = { const EditorContainer = styled.div` flex: 1; - border: 1px solid #d9d9d9; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 8px; .remirror-editor.ProseMirror { padding: 10px; diff --git a/datahub-web-react/src/app/entityV2/shared/components/legacy/DescriptionModal.tsx b/datahub-web-react/src/app/entityV2/shared/components/legacy/DescriptionModal.tsx index 3ec4e1e0ab7878..f55605486b1dc5 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/legacy/DescriptionModal.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/legacy/DescriptionModal.tsx @@ -1,4 +1,4 @@ -import { Editor, Modal, colors } from '@components'; +import { Editor, Modal } from '@components'; import { Form, Typography } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; @@ -24,7 +24,7 @@ const OriginalDocumentation = styled(Form.Item)` const EditorContainer = styled.div` height: 200px; overflow: auto; - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 12px; `; diff --git a/datahub-web-react/src/app/entityV2/shared/components/links/LinkIcon.tsx b/datahub-web-react/src/app/entityV2/shared/components/links/LinkIcon.tsx index ee4e023af0dd52..83d78791906eaf 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/links/LinkIcon.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/links/LinkIcon.tsx @@ -35,15 +35,7 @@ export function LinkIcon({ url, className, usePrimaryColor = true, style }: Prop return ; } - return ( - - ); + return ; }, [isDocumentationFileUploadV1Enabled, url, usePrimaryColor]); return ( diff --git a/datahub-web-react/src/app/entityV2/shared/components/search/styledComponents.tsx b/datahub-web-react/src/app/entityV2/shared/components/search/styledComponents.tsx index d1812d37bf635f..4a0977cd8b0022 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/search/styledComponents.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/search/styledComponents.tsx @@ -1,21 +1,20 @@ import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { Input } from '@src/alchemy-components'; export const StyledInput = styled(Input)` width: auto; - background: ${REDESIGN_COLORS.WHITE}; + background: ${(props) => props.theme.colors.bg}; font-size: 14px; font-weight: 500; line-height: 24px; - color: ${REDESIGN_COLORS.BODY_TEXT}; + color: ${(props) => props.theme.colors.textSecondary}; `; export const MatchLabelText = styled.span` font-size: 12px; font-weight: 400; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; padding: 4px 4px; `; @@ -31,43 +30,43 @@ export const SearchContainer = styled.div` .ant-input-group-wrapper { border-radius: 8px; - border: 1px solid ${REDESIGN_COLORS.SILVER_GREY}; - background: #f3f5fa; + border: 1px solid ${(props) => props.theme.colors.border}; + background: ${(props) => props.theme.colors.bgSurface}; } .ant-input-group-wrapper { - background-color: #ffffff !important; + background-color: ${(props) => props.theme.colors.bgSurface} !important; } .ant-input-wrapper { - background-color: #ffffff00 !important; + background-color: transparent !important; } .ant-input { border-radius: 0; - color: ${REDESIGN_COLORS.BODY_TEXT}; + color: ${(props) => props.theme.colors.textSecondary}; } .ant-input::placeholder { - color: ${REDESIGN_COLORS.BODY_TEXT} !important; + color: ${(props) => props.theme.colors.textSecondary} !important; opacity: 1; } .ant-input-affix-wrapper { border-radius: 8px; - border: 1px solid ${REDESIGN_COLORS.SILVER_GREY}; + border: 1px solid ${(props) => props.theme.colors.border}; transition: border-color 0.3s ease-in-out; cursor: text !important; } .ant-input-group-addon { border: none; - background-color: #ffffff00 !important; + background-color: transparent !important; left: 2px; } .ant-input-affix-wrapper:focus-within, .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover { - border: 1px solid ${(props) => props.theme.styles['primary-color']}; + border: 1px solid ${(props) => props.theme.colors.borderBrand}; } .ant-input-affix-wrapper::selection { diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx index 2a01dbd81cff58..042a1c57142764 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/DeprecationIcon.tsx @@ -1,4 +1,4 @@ -import { Tooltip, colors } from '@components'; +import { Tooltip } from '@components'; import { Divider, Typography, message } from 'antd'; import { TooltipPlacement } from 'antd/es/tooltip'; import moment from 'moment'; @@ -7,7 +7,6 @@ import styled from 'styled-components'; import analytics, { EventType } from '@app/analytics'; import MarkAsDeprecatedButton from '@app/entityV2/shared/components/styled/MarkAsDeprecatedButton'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import CompactMarkdownViewer from '@app/entityV2/shared/tabs/Documentation/components/CompactMarkdownViewer'; import { EntityLink } from '@app/homeV2/reference/sections/EntityLink'; import { getV1FieldPathFromSchemaFieldUrn } from '@app/lineageV2/lineageUtils'; @@ -25,7 +24,7 @@ const DeprecatedContainer = styled.div` justify-content: center; gap: 4px; align-items: center; - color: ${colors.red[500]}; + color: ${(props) => props.theme.colors.textError}; `; const DeprecatedTitle = styled(Typography.Text)` @@ -33,14 +32,14 @@ const DeprecatedTitle = styled(Typography.Text)` font-size: 16px; margin-bottom: 5px; font-weight: bold; - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; `; const DeprecatedSubTitle = styled(Typography.Text)` display: block; margin-bottom: 5px; font-size: 12px; - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; max-width: 100%; `; @@ -49,7 +48,7 @@ const LastEvaluatedAtLabel = styled.div` margin: 0; display: flex; align-items: center; - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 14px; `; @@ -69,10 +68,10 @@ const ThinDivider = styled(Divider)` const IconGroup = styled.div` padding-top: 10px; font-size: 12px; - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; &:hover { - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textHover}; cursor: pointer; } `; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/ExpandedOwner/OwnerContent.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/ExpandedOwner/OwnerContent.tsx index 913d1f2ce6b55b..32fa3981320fe9 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/ExpandedOwner/OwnerContent.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/ExpandedOwner/OwnerContent.tsx @@ -3,7 +3,6 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components/macro'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { getDescriptionFromType, getNameFromType, @@ -15,7 +14,7 @@ import { Owner } from '@types'; const TextWrapper = styled.span<{ fontSize?: number }>` ${(props) => props.fontSize && `font-size: ${props.fontSize}px;`} - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; max-width: 150px; text-overflow: ellipsis; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/InfoItem.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/InfoItem.tsx index 2f8a2b89a14259..fc1e58eeb0695f 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/InfoItem.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/InfoItem.tsx @@ -2,8 +2,6 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const HeaderInfoItem = styled.div<{ onClick?: () => void; width?: string }>` display: inline-block; text-align: left; @@ -16,7 +14,7 @@ const HeaderInfoItem = styled.div<{ onClick?: () => void; width?: string }>` const HeaderInfoTitle = styled(Typography.Text)` font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/SeeMore.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/SeeMore.tsx index fa7b726c63d18b..0e6d14e0a17de2 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/SeeMore.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/SeeMore.tsx @@ -1,11 +1,9 @@ import { Button } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - export const SeeMore = styled(Button)` margin-top: -20px; - background-color: ${ANTD_GRAY[4]}; + background-color: ${(props) => props.theme.colors.bgSurface}; padding: 8px; border: none; line-height: 8px; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/StatsSummary.tsx index e354088d32bbc4..8edf7c81f1c1c3 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/StatsSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/StatsSummary.tsx @@ -1,8 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - type Props = { stats: Array; }; @@ -15,7 +13,7 @@ const StatsContainer = styled.div<{ shouldWrap?: boolean }>` const StatDivider = styled.div` padding-left: 10px; margin-right: 10px; - border-right: 1px solid ${ANTD_GRAY[4]}; + border-right: 1px solid ${(props) => props.theme.colors.bgSurface}; height: 21px; `; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledButton.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledButton.tsx index b3e744a5aac728..d07685b1dc07e2 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledButton.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledButton.tsx @@ -6,8 +6,8 @@ export default styled(Button)` padding-bottom: 5px; padding-right: 16px; padding-left: 16px; - box-shadow: 0px 0px 4px 0px #0000001a; - border: 1px solid #d9d9d9; + box-shadow: ${(props) => props.theme.colors.shadowXs}; + border: 1px solid ${(props) => props.theme.colors.border}; font-size: 12px; font-weight: 500; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledMDEditor.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledMDEditor.tsx index d0453ec8539420..03d332b90157fa 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledMDEditor.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledMDEditor.tsx @@ -1,8 +1,6 @@ import MDEditor from '@uiw/react-md-editor'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - export default styled(MDEditor)` height: calc(100% - 46px) !important; z-index: 0; @@ -10,8 +8,8 @@ export default styled(MDEditor)` border-radius: 0; font-weight: 400; .w-md-editor-toolbar { - border-color: ${ANTD_GRAY[4]}; - background: white; + border-color: ${(props) => props.theme.colors.bgSurface}; + background: ${(props) => props.theme.colors.bgSurface}; padding: 0 20px; height: 46px !important; li { @@ -24,13 +22,13 @@ export default styled(MDEditor)` height: 16px; } &.active > button { - color: ${(props) => props.theme.styles['primary-color']}; - background-color: ${ANTD_GRAY[3]}; + color: ${(props) => props.theme.colors.textActive}; + background-color: ${(props) => props.theme.colors.bgSurface}; } } } .w-md-editor-preview { - box-shadow: inset 1px 0 0 0 ${ANTD_GRAY[4]}; + box-shadow: inset 1px 0 0 0 ${(props) => props.theme.colors.bgSurface}; } .w-md-editor-content { height: calc(100% - 46px) !important; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTable.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTable.tsx index 5ea962bcdd5e72..29af4887fb0e3d 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTable.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTable.tsx @@ -1,20 +1,18 @@ import { Table } from 'antd'; import styled from 'styled-components'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; - export const StyledTable = styled(Table)` overflow: inherit; height: inherit; &&& .ant-table-cell { - background-color: #fff; + background-color: ${(props) => props.theme.colors.bgSurface}; } &&& .ant-table-thead .ant-table-cell { font-weight: 700; font-size: 12px; - color: ${REDESIGN_COLORS.HEADING_COLOR}; - background-color: ${REDESIGN_COLORS.LIGHT_GREY}; + color: ${(props) => props.theme.colors.text}; + background-color: ${(props) => props.theme.colors.bgSurface}; } &&& .ant-table-thead > tr > th { padding-left: 10px; @@ -26,7 +24,7 @@ export const StyledTable = styled(Table)` > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not( [colspan] )::before { - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; } &&& tr { @@ -44,12 +42,12 @@ export const CompactStyledTable = styled(Table)` height: inherit; &&& .ant-table-cell { - background-color: #fff; + background-color: ${(props) => props.theme.colors.bgSurface}; } &&& .ant-table-thead .ant-table-cell { font-weight: 600; font-size: 12px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; } && .ant-table-thead @@ -57,7 +55,7 @@ export const CompactStyledTable = styled(Table)` > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not( [colspan] )::before { - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; } &&& td { diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTag.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTag.tsx index 7d5375642085e3..8b6694779f2706 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTag.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/StyledTag.tsx @@ -1,10 +1,7 @@ -import { colors } from '@components'; import { Tag } from 'antd'; import ColorHash from 'color-hash'; import styled, { css } from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; - export const generateColor = new ColorHash({ saturation: 0.9, }); @@ -24,12 +21,17 @@ export const StyledTag = styled(Tag)<{ overflow: hidden; text-overflow: ellipsis; &&& { - border-color: ${colors.gray[100]}; + background-color: ${(props) => props.theme.colors.bgSurface}; + border-color: ${(props) => props.theme.colors.border}; + color: ${(props) => props.theme.colors.textSecondary}; + .ant-tag-close-icon { + color: ${(props) => props.theme.colors.icon}; + } ${(props) => props.$highlightTag && ` - background: ${props.theme.styles['highlight-color']}; - border: 1px solid ${props.theme.styles['highlight-border-color']}; + background: ${props.theme.colors.bgHighlight}; + border: 1px solid ${props.theme.colors.borderHover}; `} } ${(props) => props.fontSize && `font-size: ${props.fontSize}px;`} @@ -48,7 +50,6 @@ export const StyledTag = styled(Tag)<{ margin-right: 4px; } `}; - color: ${REDESIGN_COLORS.DARK_GREY}; font-weight: 400; ${(props) => props.$showOneAndCount && diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx index ded14a8d8176b5..77915045866003 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/TabToolbar.tsx @@ -1,15 +1,13 @@ import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - export default styled.div` display: flex; position: relative; z-index: 1; justify-content: space-between; height: 46px; - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; padding: 8px 16px; - box-shadow: 0px 2px 6px 0px #0000000d; + box-shadow: ${(props) => props.theme.colors.shadowXs}; flex: 0 0 auto; `; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/DownloadAsCsvModal.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/DownloadAsCsvModal.tsx index 3750dd938e3317..c5f375c1fbada2 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/DownloadAsCsvModal.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/DownloadAsCsvModal.tsx @@ -1,9 +1,9 @@ import { ExclamationCircleFilled, LoadingOutlined } from '@ant-design/icons'; -import { Modal, Text, colors } from '@components'; +import { Modal, Text } from '@components'; import { Input, Spin, notification } from 'antd'; import React, { useContext, useState } from 'react'; import { useLocation } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import analytics, { EventType } from '@app/analytics'; import { useEntityData } from '@app/entity/shared/EntityContext'; @@ -23,8 +23,8 @@ const ImpactAnalysisWarning = styled.div` padding: 8px; display: flex; align-items: center; - color: ${colors.yellow[1000]}; - background-color: ${colors.yellow[0]}; + color: ${(props) => props.theme.colors.textWarning}; + background-color: ${(props) => props.theme.colors.bgSurfaceWarning}; margin-bottom: 16px; border-radius: 8px; `; @@ -66,6 +66,7 @@ export default function DownloadAsCsvModal({ setShowDownloadAsCsvModal, }: Props) { const { lineageSearchPath } = useContext(LineageTabContext); + const theme = useTheme(); const { entityData: entitySearchIsEmbeddedWithin } = useEntityData(); const location = useLocation(); @@ -215,7 +216,7 @@ export default function DownloadAsCsvModal({ > {lineageSearchPath === LineageSearchPath.Lightning && ( - +
Results may vary diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchHeader.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchHeader.tsx index 3caaeb304694af..11c0265b074bab 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchHeader.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchHeader.tsx @@ -1,7 +1,7 @@ import { ExclamationCircleFilled, FilterOutlined } from '@ant-design/icons'; import { Button as AntButton, Typography } from 'antd'; import React, { useContext, useState } from 'react'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import { EntityAndType } from '@app/entity/shared/types'; import TabToolbar from '@app/entityV2/shared/components/styled/TabToolbar'; @@ -11,7 +11,7 @@ import { SearchBar } from '@app/search/SearchBar'; import { DownloadSearchResults, DownloadSearchResultsInput } from '@app/search/utils/types'; import SearchMenuItems from '@app/sharedV2/search/SearchMenuItems'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { Button, colors } from '@src/alchemy-components'; +import { Button } from '@src/alchemy-components'; import { useSearchContext } from '@src/app/search/context/SearchContext'; import SearchSortSelect from '@src/app/searchV2/sorting/SearchSortSelect'; @@ -40,13 +40,13 @@ const ImpactAnalysisWarning = styled.div` padding: 12px 20px; display: flex; align-items: center; - background-color: ${colors.yellow[0]}; + background-color: ${(props) => props.theme.colors.bgSurfaceWarning}; z-index: 1; `; const StyledButton = styled(Button)` margin-left: auto; - color: #ee9521; + color: ${(props) => props.theme.colors.textWarning}; padding: 0; `; @@ -88,6 +88,7 @@ export default function EmbeddedListSearchHeader({ searchBarInputStyle, }: Props) { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const { selectedSortOption, setSelectedSortOption } = useSearchContext(); const { lineageSearchPath } = useContext(LineageTabContext); const [showLightningWarning, setShowLightningWarning] = useState(true); @@ -155,7 +156,7 @@ export default function EmbeddedListSearchHeader({ )} {showLightningWarning && lineageSearchPath === LineageSearchPath.Lightning && ( - + Some results shown may not exist yet in DataHub setShowLightningWarning(false)} diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchResults.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchResults.tsx index cc8738c6632856..68f25cdd76d606 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchResults.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchResults.tsx @@ -10,7 +10,6 @@ import { EntitySearchResults, } from '@app/entityV2/shared/components/styled/search/EntitySearchResults'; import MatchingViewsLabel from '@app/entityV2/shared/components/styled/search/MatchingViewsLabel'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SearchFiltersSection } from '@app/search/SearchFiltersSection'; import { UnionType } from '@app/search/utils/constants'; import { combineSiblingsInSearchResults } from '@app/searchV2/utils/combineSiblingsInSearchResults'; @@ -22,7 +21,7 @@ import { DataHubView, FacetFilterInput, FacetMetadata, SearchResults as SearchRe const SearchBody = styled.div<{ showFilters?: boolean }>` height: 100%; overflow: hidden; - background-color: ${REDESIGN_COLORS.BACKGROUND}; + background-color: ${(props) => props.theme.colors.bgSurface}; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: ${(p) => (p.showFilters ? '0.2fr auto' : '1fr')}; @@ -44,13 +43,13 @@ const PaginationInfo = styled(Typography.Text)` const FiltersContainer = styled.div` grid-area: filters; - background-color: ${REDESIGN_COLORS.WHITE}; + background-color: ${(props) => props.theme.colors.bg}; display: flex; flex-direction: column; max-width: 260px; min-width: 260px; border-right: 1px solid; - border-color: ${(props) => props.theme.styles['border-color-base']}; + border-color: ${(props) => props.theme.colors.border}; `; const ResultContainer = styled.div` @@ -68,8 +67,8 @@ const PaginationInfoContainer = styled.div` padding: 8px; padding-left: 16px; border-top: 1px solid; - border-color: ${(props) => props.theme.styles['border-color-base']}; - background-color: ${REDESIGN_COLORS.WHITE}; + border-color: ${(props) => props.theme.colors.border}; + background-color: ${(props) => props.theme.colors.bg}; display: flex; flex-direction: column; gap: 8px; @@ -103,12 +102,12 @@ const LoadingContainer = styled.div` const StyledLoading = styled(LoadingOutlined)` font-size: 32px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-bottom: 18px; `; const ViewsContainer = styled.div` - background-color: ${REDESIGN_COLORS.BORDER_2}; + background-color: ${(props) => props.theme.colors.bgSurface}; padding: 10px 16px; width: 100%; display: flex; @@ -117,21 +116,22 @@ const ViewsContainer = styled.div` `; const Pill = styled.div<{ selected?: boolean }>` - border: 1px solid ${(props) => (props.selected ? props.theme.styles['primary-color'] : `#797F98`)}; + border: 1px solid ${(props) => (props.selected ? props.theme.colors.borderBrand : props.theme.colors.border)}; white-space: nowrap; border-radius: 20px; padding: 5px 16px; - color: ${(props) => (props.selected ? props.theme.styles['primary-color'] : '#797F98')}; + color: ${(props) => (props.selected ? props.theme.colors.textBrand : props.theme.colors.textTertiary)}; cursor: pointer; display: flex; gap: 0.5rem; align-items: center; - background: ${(props) => (props.selected ? '#E5E2F8' : 'none')}; + background: ${(props) => (props.selected ? props.theme.colors.bgSurfaceBrand : 'none')}; `; const Count = styled.div<{ selected: boolean }>` - background-color: ${(props) => (props.selected ? props.theme.styles['primary-color'] : '#A3A7B9')}; - color: ${REDESIGN_COLORS.WHITE}; + background-color: ${(props) => + props.selected ? props.theme.colors.buttonFillBrand : props.theme.colors.textTertiary}; + color: ${(props) => props.theme.colors.bg}; border-radius: 20px; min-width: 25px; padding: 2px 4px; @@ -145,12 +145,12 @@ const Count = styled.div<{ selected: boolean }>` const LanguageIconStyle = styled(LanguageIcon)<{ selected?: boolean }>` font-size: 18px !important; - color: ${(props) => (props.selected ? props.theme.styles['primary-color'] : '#797F98')}; + color: ${(props) => (props.selected ? props.theme.colors.iconBrand : props.theme.colors.textTertiary)}; `; const ViewLabel = styled.span` font-weight: 700; - color: #5f6685; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 16px; margin-right: 8px; `; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/EntitySearchResults.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/EntitySearchResults.tsx index bc584d910ff94f..264b28ed5970f3 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/EntitySearchResults.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/EntitySearchResults.tsx @@ -41,7 +41,7 @@ export const ListItem = styled.div<{ isSelectMode: boolean; areMatchesExpanded; padding: 20px; display: flex; align-items: center; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: 10px; overflow: hidden; margin-bottom: ${({ areMatchesExpanded, compactUserSearchCardStyle }) => { @@ -50,13 +50,13 @@ export const ListItem = styled.div<{ isSelectMode: boolean; areMatchesExpanded; return MATCHES_CONTAINER_HEIGHT + 20; }}px; transition: margin-bottom 0.3s ease; - border: 1px solid #ebecf0; + border: 1px solid ${(props) => props.theme.colors.border}; ${(props) => props.areMatchesExpanded && ` - -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15); - box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15); + -webkit-box-shadow: ${props.theme.colors.shadowLg}; + -moz-box-shadow: ${props.theme.colors.shadowLg}; + box-shadow: ${props.theme.colors.shadowLg}; `} `; diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/MatchingViewsLabel.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/MatchingViewsLabel.tsx index 954f1133fbc6f2..cc67311a416997 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/MatchingViewsLabel.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/MatchingViewsLabel.tsx @@ -2,12 +2,10 @@ import { Button, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - import { DataHubView } from '@types'; const StyledMatchingViewsLabel = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; interface Props { diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelect.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelect.tsx index 373c1648edeed9..40ff94b1c3119f 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelect.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelect.tsx @@ -9,7 +9,6 @@ import { EntityAndType } from '@app/entity/shared/types'; import TabToolbar from '@app/entityV2/shared/components/styled/TabToolbar'; import { EmbeddedListSearchResults } from '@app/entityV2/shared/components/styled/search/EmbeddedListSearchResults'; import { SearchSelectBar } from '@app/entityV2/shared/components/styled/search/SearchSelectBar'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { isListSubset } from '@app/entityV2/shared/utils'; import { SearchBar } from '@app/search/SearchBar'; import { ENTITY_FILTER_NAME, UnionType } from '@app/search/utils/constants'; @@ -33,7 +32,7 @@ const SearchBarContainer = styled.div` justify-content: space-between; align-items: center; padding: 12px; - border-bottom: 1px solid ${ANTD_GRAY[4]}; + border-bottom: 1px solid ${(props) => props.theme.colors.bgSurface}; `; const SEARCH_BAR_STYLE = { diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectBar.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectBar.tsx index 017afbcbaa389e..391ee202cbcb5b 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectBar.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectBar.tsx @@ -32,7 +32,7 @@ const StyledCheckbox = styled(Checkbox)` const StyledButton = styled(Button)` margin-left: 8px; - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textBrand}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectUrnInput.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectUrnInput.tsx index 52c971f4b02eff..6c33a47ccdbc7b 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectUrnInput.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/SearchSelectUrnInput.tsx @@ -15,7 +15,7 @@ const Container = styled.div` width: 100%; min-height: 500px; height: 70vh; - border: 1px solid #f0f0f0; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 4px; `; @@ -38,7 +38,7 @@ const SubSearchSection = styled.div` const CurrentSection = styled.div` flex: 1; width: 40%; - border-left: 1px solid #f0f0f0; + border-left: 1px solid ${(props) => props.theme.colors.border}; display: flex; flex-direction: column; `; @@ -48,7 +48,7 @@ const SectionHeader = styled.div` margin-top: 10px; font-size: 16px; font-weight: 500; - color: #666; + color: ${(props) => props.theme.colors.textSecondary}; `; const ScrollableContent = styled.div` @@ -63,11 +63,11 @@ const SelectedItem = styled.div` border-radius: 4px; margin-bottom: 8px; align-items: center; - border: 1px solid #f0f0f0; + border: 1px solid ${(props) => props.theme.colors.border}; justify-content: space-between; &:hover { - background-color: #fafafa; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; @@ -150,7 +150,12 @@ export function SearchSelectUrnInput({ )} - removeEntity(entity)} /> + removeEntity(entity)} + /> )) diff --git a/datahub-web-react/src/app/entityV2/shared/components/styled/search/action/ActionDropdown.tsx b/datahub-web-react/src/app/entityV2/shared/components/styled/search/action/ActionDropdown.tsx index 5b826f8059d132..d9114913e0bf44 100644 --- a/datahub-web-react/src/app/entityV2/shared/components/styled/search/action/ActionDropdown.tsx +++ b/datahub-web-react/src/app/entityV2/shared/components/styled/search/action/ActionDropdown.tsx @@ -5,15 +5,13 @@ import MenuItem from 'antd/lib/menu/MenuItem'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const DownArrow = styled(CaretDownOutlined)` && { padding-top: 4px; font-size: 8px; margin-left: 2px; margin-top: 2px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; @@ -31,7 +29,7 @@ const DropdownWrapper = styled.div<{ disabled: boolean; }>` cursor: ${(props) => (props.disabled ? 'normal' : 'pointer')}; - color: ${(props) => (props.disabled ? ANTD_GRAY[7] : 'none')}; + color: ${(props) => (props.disabled ? props.theme.colors.textDisabled : 'none')}; display: flex; margin-left: 12px; margin-right: 12px; diff --git a/datahub-web-react/src/app/entityV2/shared/constants.ts b/datahub-web-react/src/app/entityV2/shared/constants.ts index 64c13cfd0eeb8a..41097f9ac7941b 100644 --- a/datahub-web-react/src/app/entityV2/shared/constants.ts +++ b/datahub-web-react/src/app/entityV2/shared/constants.ts @@ -1,146 +1,5 @@ import { EntityType } from '@types'; -// TODO(Gabe): integrate this w/ the theme -// These colors are deprecated, use the colors in @components/theme/foundations/colors -export const REDESIGN_COLORS = { - BACKGROUND: '#F4F5F7', - GREY: '#e5e5e5', - BLUE: '#1890FF', - DARK_GREY: '#56668E', - HEADING_COLOR: '#403D5C', - LIGHT_GREY: '#F6F7FA', - BACKGROUND_GREY: '#F5F5F5', - PRIMARY_DARK_GREEN: '#113633', - TERTIARY_GREEN: '#3CB47A', - WHITE_WIRE: '#F1F1F1', - WHITE: '#FFF', - BLACK: '#000', - SIDE_BAR: '#E8E6EB', - PRIMARY_PURPLE: '#736BA4', - BACKGROUND_PURPLE: '#8D76E9', - TEXT_HEADING: '#374066', - TITLE_PURPLE: '#533FD1', - TITLE_PURPLE_2: '#4232A7', - HOVER_PURPLE: '#3e2f9d', - HOVER_PURPLE_2: '#4b39bc', - PLACEHOLDER_PURPLE: '#9AA4BB', - HIGHLIGHT_PURPLE: '#F9F8FF', - LINK_HOVER_BLUE: '#5280E2', - RED_ERROR_BORDER: '#FFA39E', - BACKGROUND_SECONDARY_GRAY: '#AAA2CB0F', - BACKGROUND_GRAY_2: '#FAF9FC', - BACKGROUND_GRAY_3: '#F6F7FA', - BACKGROUND_GRAY_4: '#F8F7FE', - BACKGROUND_OVERLAY_BLACK: '#171723', - BACKGROUND_OVERLAY_BLACK_SEARCH: '#404053', - BACKGROUND_PRIMARY_1: '#533fd1', - BACKGROUND_PRIMARY_2: '#4232a7', - VIEW_PURPLE: '#9178f6', - BOX_SHADOW: '#E0E0E025', - BORDER_1: '#4b4b54', - BORDER_2: '#E6E6E6', - BORDER_3: '#EFEFEF', - BORDER_4: '#533FD1', - BORDER_5: '#8C7EE0', - SECONDARY_LIGHT_GREY: '#9DA7C0', - ACTION_ICON_GREY: '#676b75', - AVATAR_STYLE_WHITE_BACKGROUND: '#ffffff66', - GROUP_AVATAR_STYLE_GRADIENT: 'linear-gradient(0deg, #705EE4 0%, #533FD1 100%), #4C39BE', - PROFILE_AVATAR_STYLE_GRADIENT: 'linear-gradient(93deg, #705EE4 5.11%, #533FD1 112.87%), #4C39BE', - SIDE_BAR_BORDER_RIGHT: '#e8e8e8', - DARK_PURPLE: '#6C6B88', - LINK_GREY: '#586287', - TEXT_GREY: '#8D95B1', - WARNING_RED: '#d07b7b', - SUBTITLE: '#434863', - LIGHT_GREY_BORDER: '#ededed', - BACKGROUND_PURPLE_2: '#887fae', - FOUNDATION_BLUE_2: '#CFD1DA', - FOUNDATION_BLUE_4: '#81879F', - FOUNDATION_BLUE_5: '#5B6282', - SUB_TEXT: '#81879F', - COLD_GREY_TEXT: '#A9ADBD', - COLD_GREY_TEXT_BLUE_1: '#EBECF0', - LIGHT_GREY_PILL: '#F7F7F7', - RED_LIGHT: '#F6D5D5', - RED_NORMAL: '#CC6C6C', - RED_ERROR: '#d23939', - RED_800: '#7D4242', - BODY_TEXT: '#5f6685', - GREEN_LIGHT: '#d5e9c9', - GREEN_NORMAL: '#5f9240', - GREEN_800: '#41652C', - TEXT_HEADING_SUB_LINK: '#323A5D', - DARK_DIVIDER: '#797F98', - DEPRECATION_RED: '#CD0D24', - DEPRECATION_RED_LIGHT: '#E37878', - BODY_TEXT_GREY: '#5F6685', - SECTION_BACKGROUND: '#F6F6F6', - LIGHT_TEXT_DARK_BACKGROUND: '#EEECFA', - GREY_500: '#6b7280', - GREY_300: '#8088A3', - YELLOW_500: '#f6cf6a', - YELLOW_200: '#fcf1d3', - YELLOW_600: '#f4c449', - YELLOW_700: '#cfa73e', - WARNING_YELLOW: '#866C28', - YELLOW_BACKGROUND: '#FCEDC7', - TOOLTIP_BACKGROUND: '#272D48', - ICON_ON_DARK: '#F9FAFC', - SILVER_GREY: '#E9EAEE', - GREY_100: '#C1C4D0', - PURPLE_LIGHT: '#CAC3F1', -}; - -export const SEARCH_COLORS = { - TITLE_PURPLE: '#533FD1', - SUBTEXT_PURPPLE: '#3F54D1', - BACKGROUND_PURPLE: '#ece9f8', - PLATFORM_TEXT: '#56668E', - MATCH_BACKGROUND_GREY: '#5A617110', - MATCH_TEXT_GREY: '#8894A9', - LINK_BLUE: '#5280E2', -}; - -export const ANTD_GRAY = { - 1: '#FFFFFF', - 2: '#FAFAFA', - 2.5: '#F8F8F8', - 3: '#F5F5F5', - 4: '#F0F0F0', - 4.5: '#E9E9E9', - 5: '#D9D9D9', - 5.5: '#CCCCCC', - 6: '#BFBFBF', - 7: '#8C8C8C', - 8: '#595959', - 9: '#434343', - 10: '#272727', - 11: '#262626', -}; - -export const ANTD_GRAY_V2 = { - 1: '#F8F9Fa', - 2: '#F3F5F6', - 5: '#DDE0E4', - 6: '#B2B8BD', - 8: '#5E666E', - 10: '#1B1E22', - 11: '#6C6B88', - 12: '#52596c', - 13: '#ababab', - 14: '#f7f7f7', -}; - -export const LINEAGE_COLORS = { - BLUE_1: '#0958D9', - BLUE_2: '#1890FF', - PURPLE_1: '#5280E2', - PURPLE_2: '#324473', - PURPLE_3: SEARCH_COLORS.TITLE_PURPLE, - NODE_BORDER: ANTD_GRAY[6], -}; - export const EMPTY_MESSAGES = { documentation: { title: 'No documentation yet', diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/EntityProfile.tsx index 1c67ddb3f84858..8b6884de5fdcbf 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/EntityProfile.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/EntityProfile.tsx @@ -129,13 +129,10 @@ const Header = styled.div<{ $isShowNavBarRedesign?: boolean }>` `; const HeaderContent = styled.div<{ $isShowNavBarRedesign?: boolean }>` - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'}; - box-shadow: ${(props) => - props.$isShowNavBarRedesign - ? props.theme.styles['box-shadow-navbar-redesign'] - : '0px 0px 5px rgba(0, 0, 0, 0.08)'}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; flex: 1; flex-shrink: 0; padding: 0; @@ -153,16 +150,13 @@ const Body = styled.div<{ $isShowNavBarRedesign?: boolean }>` const BodyContent = styled.div<{ $isShowNavBarRedesign?: boolean }>` padding-top: 12px; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'}; display: flex; flex-direction: column; flex: 1; - box-shadow: ${(props) => - props.$isShowNavBarRedesign - ? props.theme.styles['box-shadow-navbar-redesign'] - : '0px 0px 5px rgba(0, 0, 0, 0.08)'}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; height: 100%; overflow: hidden; `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityCount.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityCount.tsx index 451cbf05926ad7..989193a3dc519c 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityCount.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityCount.tsx @@ -2,14 +2,12 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - export const EntityCountText = styled(Typography.Text)` display: inline-block; font-size: 12px; line-height: 20px; font-weight: 400; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; interface Props { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHeaderLoadingSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHeaderLoadingSection.tsx index a57f79966ff29a..301c75c08b61bb 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHeaderLoadingSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHeaderLoadingSection.tsx @@ -2,8 +2,6 @@ import { Skeleton, Space } from 'antd'; import * as React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const Wrapper = styled(Space)` min-height: 50px; width: 100%; @@ -14,7 +12,7 @@ const NameSkeleton = styled(Skeleton.Input)` height: 20px; width: 240px; border-radius: 4px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; margin-right: 12px; } `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthPopover.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthPopover.tsx index a3020322626596..96eb776d27835d 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthPopover.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthPopover.tsx @@ -1,9 +1,8 @@ import { Popover } from '@components'; import { Divider } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { EntityHealthStatus } from '@app/entityV2/shared/containers/profile/header/EntityHealthStatus'; import { HealthSummaryIconType, getHealthSummaryIcon, getHealthSummaryMessage } from '@app/shared/health/healthUtils'; @@ -23,7 +22,7 @@ const Icon = styled.span` const Title = styled.span` font-weight: bold; - color: ${ANTD_GRAY[1]}; + color: ${(props) => props.theme.colors.bg}; padding-top: 4px; padding-bottom: 4px; font-size: 14px; @@ -41,7 +40,7 @@ const StyledDivider = styled(Divider)` padding-left: 8px; margin-top: 8px; margin-bottom: 8px; - border-color: ${ANTD_GRAY[5]}; + border-color: ${(props) => props.theme.colors.border}; } `; @@ -54,6 +53,7 @@ type Props = { }; export const EntityHealthPopover = ({ health, baseUrl, children, fontSize, placement = 'right' }: Props) => { + const theme = useTheme(); return ( } - color="#262626" + color={theme.colors.bgTooltip} placement={placement} zIndex={10000000} > diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthStatus.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthStatus.tsx index 8c500caba4405b..77268658d89aa9 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthStatus.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityHealthStatus.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { getHealthRedirectPath, getHealthTypeName } from '@app/shared/health/healthUtils'; import { HealthStatusType } from '@types'; @@ -11,7 +10,7 @@ const StatusContainer = styled.div` display: flex; justify-content: left; align-items: center; - color: ${ANTD_GRAY[1]}; + color: ${(props) => props.theme.colors.bg}; font-size: 14px; `; @@ -25,7 +24,7 @@ const Title = styled.span` const RedirectLink = styled(Link)` margin-left: 4px; - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityName.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityName.tsx index 212ac7d1ea3079..e9399243e92c97 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityName.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityName.tsx @@ -1,9 +1,7 @@ import { Typography, message } from 'antd'; import React, { useContext, useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components/macro'; - -import colors from '@components/theme/foundations/colors'; +import styled, { useTheme } from 'styled-components/macro'; import { useDomainsContext } from '@app/domainV2/DomainsContext'; import { useEntityData, useRefetch } from '@app/entity/shared/EntityContext'; @@ -16,7 +14,6 @@ import { useReloadableContext } from '@app/sharedV2/reloadableContext/hooks/useR import { ReloadableKeyTypeNamespace } from '@app/sharedV2/reloadableContext/types'; import { getReloadableKeyType } from '@app/sharedV2/reloadableContext/utils'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { getColor } from '@src/alchemy-components/theme/utils'; import { useEmbeddedProfileLinkProps } from '@src/app/shared/useEmbeddedProfileLinkProps'; import { useUpdateNameMutation } from '@graphql/mutations.generated'; @@ -24,14 +21,14 @@ import { DataHubPageModuleType, EntityType } from '@types'; const EntityTitle = styled(Typography.Text)<{ $showEntityLink?: boolean }>` font-weight: 700; - color: ${(p) => p.theme.styles['primary-color']}; + color: ${(p) => p.theme.colors.textBrand}; line-height: normal; ${(props) => props.$showEntityLink && ` :hover { - color: ${(p) => getColor('primary', 600, p.theme)}; + color: ${(p) => p.theme.colors.textHover}; } `} &&& { @@ -46,7 +43,7 @@ const EntityTitle = styled(Typography.Text)<{ $showEntityLink?: boolean }>` margin-left: 2px; & svg { - fill: ${(p) => p.theme.styles['primary-color']}; + fill: ${(p) => p.theme.colors.iconBrand}; } } `; @@ -56,6 +53,7 @@ interface Props { } function EntityName(props: Props) { + const theme = useTheme(); const { isNameEditable } = props; const { isClosed: isSidebarClosed } = useContext(EntitySidebarContext); const refetch = useRefetch(); @@ -162,7 +160,7 @@ function EntityName(props: Props) { }} $showEntityLink={showEntityLink} ellipsis={{ - tooltip: { showArrow: false, color: 'white', overlayInnerStyle: { color: colors.gray[1700] } }, + tooltip: { showArrow: false, overlayInnerStyle: { color: theme.colors.textSecondary } }, }} key={`${updatedName}-${key}`} > @@ -172,7 +170,7 @@ function EntityName(props: Props) { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityPlatformLoadingSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityPlatformLoadingSection.tsx index 8a8aae53be1ebb..c606e5fc832d04 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityPlatformLoadingSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/EntityPlatformLoadingSection.tsx @@ -2,13 +2,11 @@ import { Skeleton, Space } from 'antd'; import * as React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const ContextSkeleton = styled(Skeleton.Input)` && { width: 320px; border-radius: 4px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/IconPicker/IconPicker.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/IconPicker/IconPicker.tsx index b88b38a5fa9d52..164480617d939c 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/IconPicker/IconPicker.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/IconPicker/IconPicker.tsx @@ -15,8 +15,9 @@ const CellContainer = styled.div<{ color?: string; selected?: boolean }>` display: flex; justify-content: center; align-items: center; - color: ${({ color }) => color || 'black'}; - border: ${({ selected }) => (selected ? '2px solid blue' : '1px solid lightgray')}; + color: ${({ color, theme }) => color || theme.colors.icon}; + border: ${({ selected, theme }) => + selected ? `2px solid ${theme.colors.borderBrand}` : `1px solid ${theme.colors.border}`}; `; const Cell = ({ diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ContainerLink.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ContainerLink.tsx index a53c2deafd7ccf..952f9f9e0c9c19 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ContainerLink.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ContainerLink.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import ContainerIcon from '@app/entityV2/shared/containers/profile/header/PlatformContent/ContainerIcon'; import { useEmbeddedProfileLinkProps } from '@app/shared/useEmbeddedProfileLinkProps'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -19,7 +18,7 @@ const ContainerText = styled.span` const StyledLink = styled(Link)` white-space: nowrap; :hover { - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } border-radius: 4px; overflow: hidden; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx index 404c235fd520e7..01848352167574 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesView.tsx @@ -2,16 +2,15 @@ import { FolderOutlined, RightOutlined } from '@ant-design/icons'; import { Tooltip } from '@components'; import { Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import useContentTruncation from '@app/shared/useContentTruncation'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { EntityType, GlossaryNode } from '@types'; export const StyledRightOutlined = styled(RightOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 8px; margin: 0 4px; `; @@ -29,7 +28,7 @@ export const ParentNodesWrapper = styled.div` `; export const Ellipsis = styled.span<{ $color?: string }>` - color: ${(props) => props.$color ?? ANTD_GRAY[7]}; + color: ${(props) => props.$color ?? props.theme.colors.textTertiary}; margin-right: 2px; `; @@ -61,6 +60,7 @@ interface Props { export default function ParentNodesView({ parentNodes }: Props) { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const { contentRef, isContentTruncated } = useContentTruncation(parentNodes); return ( @@ -69,8 +69,8 @@ export default function ParentNodesView({ parentNodes }: Props) { <> {[...(parentNodes || [])]?.reverse()?.map((parentNode, idx) => ( <> - - + + {entityRegistry.getDisplayName(EntityType.GlossaryNode, parentNode)} {idx + 1 !== parentNodes?.length && } @@ -85,10 +85,10 @@ export default function ParentNodesView({ parentNodes }: Props) { {[...(parentNodes || [])]?.map((parentNode, idx) => ( <> - + {entityRegistry.getDisplayName(EntityType.GlossaryNode, parentNode)} - + {idx + 1 !== parentNodes?.length && } ))} diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesViewForSearchRedesign.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesViewForSearchRedesign.tsx index 56b0414b6e3907..9b672cf4e178d8 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesViewForSearchRedesign.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/ParentNodesViewForSearchRedesign.tsx @@ -2,16 +2,15 @@ import { FolderOutlined, RightOutlined } from '@ant-design/icons'; import { Tooltip } from '@components'; import { Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import useContentTruncation from '@app/shared/useContentTruncation'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { EntityType, GlossaryNode } from '@types'; export const StyledRightOutlined = styled(RightOutlined)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 8px; margin: 0 4px; `; @@ -26,7 +25,7 @@ export const ParentNodesWrapper = styled.div` `; export const Ellipsis = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-right: 2px; `; @@ -37,7 +36,7 @@ export const StyledTooltip = styled(Tooltip)` `; const GlossaryNodeText = styled(Typography.Text)<{ color: string }>` - color: #56668e; + color: ${(props) => props.theme.colors.textSecondary}; font-family: Mulish; font-size: 10px; @@ -61,6 +60,7 @@ interface Props { export default function ParentNodesView({ parentNodes }: Props) { const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const { contentRef, isContentTruncated } = useContentTruncation(parentNodes); return ( @@ -69,8 +69,8 @@ export default function ParentNodesView({ parentNodes }: Props) { <> {[...(parentNodes || [])]?.reverse()?.map((parentNode, idx) => ( <> - - + + {entityRegistry.getDisplayName(EntityType.GlossaryNode, parentNode)} {idx + 1 !== parentNodes?.length && } @@ -85,10 +85,10 @@ export default function ParentNodesView({ parentNodes }: Props) { {[...(parentNodes || [])]?.map((parentNode, idx) => ( <> hihihihi - + {entityRegistry.getDisplayName(EntityType.GlossaryNode, parentNode)} - + {idx + 1 !== parentNodes?.length && } ))} diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx index d804b6d7d79b69..95ab0beb5971e8 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx @@ -38,7 +38,7 @@ const PlatformContentWrapper = styled.div` const PlatformText = styled(Typography.Text)` font-size: 10px; font-weight: 400; - color: #6c6b88; + color: ${(props) => props.theme.colors.textSecondary}; text-transform: capitalize; white-space: nowrap; `; @@ -46,7 +46,7 @@ const PlatformText = styled(Typography.Text)` const PlatformDivider = styled.div` display: inline-block; margin: 0 10px; - border-left: 1px solid #d5d5d5; + border-left: 1px solid ${(props) => props.theme.colors.border}; height: 16px; vertical-align: text-top; `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformHeaderIcons.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformHeaderIcons.tsx index d930e6cb6c50dd..d6dbeaeed4673e 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformHeaderIcons.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/PlatformHeaderIcons.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { CSSObject } from 'styled-components'; +import styled, { CSSObject, useTheme } from 'styled-components'; import StackPlatformImages from '@app/entityV2/shared/containers/profile/header/PlatformContent/StackPlatformImages'; import PlatformIcon from '@app/sharedV2/icons/PlatformIcon'; @@ -18,12 +18,6 @@ const PlatformContentWrapper = styled.div` flex-wrap: nowrap; `; -const iconStyles = { - borderRadius: '16px', - border: '1px solid #FFF', - padding: '10px', -}; - interface Props { platform?: DataPlatform; platforms?: DataPlatform[]; @@ -33,6 +27,12 @@ interface Props { function PlatformHeaderIcons(props: Props) { const { platform, platforms, size = 28, styles } = props; + const theme = useTheme(); + const iconStyles = { + borderRadius: '16px', + border: `1px solid ${theme.colors.bg}`, + padding: '10px', + }; return ( diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/StackPlatformImages.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/StackPlatformImages.tsx index 6b95d78eaa5e53..7a73d7f46706d8 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/StackPlatformImages.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/PlatformContent/StackPlatformImages.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { CSSObject } from 'styled-components'; +import styled, { CSSObject, useTheme } from 'styled-components'; import PlatformIcon from '@app/sharedV2/icons/PlatformIcon'; @@ -11,18 +11,18 @@ const Container = styled.div` position: relative; `; -const secondIconStyles = (isSmall: boolean) => ({ +const secondIconStyles = (isSmall: boolean, bgColor: string) => ({ marginLeft: isSmall ? '-10px' : '-16px', zIndex: 0, borderRadius: isSmall ? '8px' : '16px', - border: '1px solid #FFF', + border: `1px solid ${bgColor}`, padding: isSmall ? '4px' : '10px', }); -const firstIconStyles = (isSmall: boolean) => ({ +const firstIconStyles = (isSmall: boolean, bgColor: string) => ({ zIndex: 1, borderRadius: isSmall ? '8px' : '16px', - border: '1px solid #FFF', + border: `1px solid ${bgColor}`, padding: isSmall ? '4px' : '10px', }); @@ -35,6 +35,8 @@ interface Props { } const StackImages = ({ platforms, size = 28, styles }: Props) => { + const theme = useTheme(); + const bgColor = theme.colors.bg; const uniquePlatforms = platforms.reduce((acc, current) => { if (!acc.find((platform) => platform.urn === current.urn)) { acc.push(current); @@ -54,8 +56,8 @@ const StackImages = ({ platforms, size = 28, styles }: Props) => { size={size} styles={ styles - ? { ...secondIconStyles(areIconsSmall), ...styles } - : secondIconStyles(areIconsSmall) + ? { ...secondIconStyles(areIconsSmall, bgColor), ...styles } + : secondIconStyles(areIconsSmall, bgColor) } /> ) : ( @@ -64,8 +66,8 @@ const StackImages = ({ platforms, size = 28, styles }: Props) => { size={size} styles={ styles - ? { ...firstIconStyles(areIconsSmall), ...styles } - : firstIconStyles(areIconsSmall) + ? { ...firstIconStyles(areIconsSmall, bgColor), ...styles } + : firstIconStyles(areIconsSmall, bgColor) } /> )} diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/StructuredPropertyBadge.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/StructuredPropertyBadge.tsx index a35a15b4d0c0d2..e7197d2ed93c83 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/header/StructuredPropertyBadge.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/header/StructuredPropertyBadge.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { filterForAssetBadge } from '@app/entityV2/shared/containers/profile/header/utils'; import { mapStructuredPropertyToPropertyRow } from '@app/entityV2/shared/tabs/Properties/useStructuredProperties'; import HoverCardAttributionDetails from '@app/sharedV2/propagation/HoverCardAttributionDetails'; -import { Pill, Text, Tooltip, colors } from '@src/alchemy-components'; +import { Pill, Text, Tooltip } from '@src/alchemy-components'; import { getStructuredPropertyValue } from '@src/app/entity/shared/utils'; import { getDisplayName } from '@src/app/govern/structuredProperties/utils'; import { StructuredProperties } from '@src/types.generated'; @@ -14,7 +14,7 @@ export const MAX_PROP_BADGE_WIDTH = 150; const StyledTooltip = styled(Tooltip)` .ant-tooltip-inner { border-radius: 8px; - box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12); + box-shadow: ${(props) => props.theme.colors.shadowSm}; } `; @@ -38,6 +38,7 @@ interface Props { } const StructuredPropertyBadge = ({ structuredProperties }: Props) => { + const theme = useTheme(); const badgeStructuredProperty = structuredProperties?.properties?.find(filterForAssetBadge); const propRow = badgeStructuredProperty ? mapStructuredPropertyToPropertyRow(badgeStructuredProperty) : undefined; @@ -53,21 +54,21 @@ const StructuredPropertyBadge = ({ structuredProperties }: Props) => { const BadgeTooltip = () => { return ( - + {getDisplayName(badgeStructuredProperty.structuredProperty)} - + Value - {propertyValue} + {propertyValue} {relatedDescription && ( - + Description - {relatedDescription} + {relatedDescription} )} {attribution && } @@ -76,12 +77,7 @@ const StructuredPropertyBadge = ({ structuredProperties }: Props) => { }; return ( - } - color={colors.white} - overlayInnerStyle={{ width: 250, padding: 16 }} - > + } overlayInnerStyle={{ width: 250, padding: 16 }}> diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx index 3ef6e12f8ef871..9ab61186293b91 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx @@ -1,13 +1,12 @@ import React from 'react'; import styled from 'styled-components/macro'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import CompactMarkdownViewer from '@app/entityV2/shared/tabs/Documentation/components/CompactMarkdownViewer'; const ContentWrapper = styled.div` font-size: 12px; font-weight: 500; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; line-height: 20px; white-space: break-spaces; width: 100%; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Chart/Header/SidebarChartHeaderSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Chart/Header/SidebarChartHeaderSection.tsx index 8c366653710812..e9e7d98a1be405 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Chart/Header/SidebarChartHeaderSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Chart/Header/SidebarChartHeaderSection.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SidebarHeaderSectionColumns } from '@app/entityV2/shared/containers/profile/sidebar/SidebarHeaderSectionColumns'; import SidebarTopUsersHeaderSection from '@app/entityV2/shared/containers/profile/sidebar/shared/SidebarTopUsersHeaderSection'; import { getChartPopularityTier, userExists } from '@app/entityV2/shared/containers/profile/sidebar/shared/utils'; @@ -11,7 +10,7 @@ import { SidebarStatsColumn, getPopularityColumn } from '@app/entityV2/shared/co import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; const StatContent = styled.div` - color: ${REDESIGN_COLORS.FOUNDATION_BLUE_4}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 12px; font-weight: 600; `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/SidebarContentsSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/SidebarContentsSection.tsx index 7df93b2ff776f7..d609d132e71bec 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/SidebarContentsSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/SidebarContentsSection.tsx @@ -3,7 +3,6 @@ import { useHistory } from 'react-router'; import styled from 'styled-components/macro'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import SidebarContentsLoadingSection from '@app/entityV2/shared/containers/profile/sidebar/Container/SidebarContentsLoadingSection'; import { getContentsSummary, @@ -33,7 +32,7 @@ const ViewAllButton = styled.div` align-items: center; font-weight: bold; padding: 0px 2px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; :hover { cursor: pointer; } diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/utils.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/utils.tsx index 29b11988eb8dd2..0770cebf995156 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/utils.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Container/utils.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { pluralize } from '@app/shared/textUtil'; import { EntityRegistry } from '@src/entityRegistryContext'; @@ -10,7 +9,7 @@ import { AggregationMetadata, EntityType, FacetMetadata, SearchResults } from '@ const UNIT_SEPARATOR = '␞'; const SummaryText = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export type ContentTypeSummary = { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dashboard/Header/SidebarDashboardHeaderSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dashboard/Header/SidebarDashboardHeaderSection.tsx index 52aad8913580f0..5bd0d60c5821d0 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dashboard/Header/SidebarDashboardHeaderSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dashboard/Header/SidebarDashboardHeaderSection.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SidebarHeaderSectionColumns } from '@app/entityV2/shared/containers/profile/sidebar/SidebarHeaderSectionColumns'; import SidebarTopUsersHeaderSection from '@app/entityV2/shared/containers/profile/sidebar/shared/SidebarTopUsersHeaderSection'; import { getDashboardPopularityTier, userExists } from '@app/entityV2/shared/containers/profile/sidebar/shared/utils'; @@ -11,7 +10,7 @@ import { SidebarStatsColumn, getPopularityColumn } from '@app/entityV2/shared/co import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; const StatContent = styled.div` - color: ${REDESIGN_COLORS.FOUNDATION_BLUE_4}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 12px; font-weight: 600; `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx index 77212b372d2cc6..6cc1274f889f4e 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx @@ -2,7 +2,7 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Empty, Select, message } from 'antd'; import { debounce } from 'lodash'; import React, { useMemo, useRef, useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import analytics, { EntityActionType, EventType } from '@app/analytics'; import { getParentEntities } from '@app/entityV2/shared/containers/profile/header/getParentEntities'; @@ -14,7 +14,6 @@ import { ReloadableKeyTypeNamespace } from '@app/sharedV2/reloadableContext/type import { getReloadableKeyType } from '@app/sharedV2/reloadableContext/utils'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Modal, Text } from '@src/alchemy-components'; -import { ANTD_GRAY } from '@src/app/entityV2/shared/constants'; import { useGetRecommendations } from '@src/app/shared/recommendation'; import { getModalDomContainer } from '@src/utils/focus'; @@ -47,6 +46,7 @@ export default function SetDataProductModal({ setDataProduct, refetch, }: Props) { + const themeConfig = useTheme(); const entityRegistry = useEntityRegistry(); const { reloadByKeyType } = useReloadableContext(); const [batchSetDataProductMutation] = useBatchSetDataProductMutation(); @@ -232,7 +232,7 @@ export default function SetDataProductModal({ ) : null } diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/Header/SidebarDatasetHeaderSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/Header/SidebarDatasetHeaderSection.tsx index e867a8c86f4b2f..dd1778cfaccdc2 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/Header/SidebarDatasetHeaderSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/Header/SidebarDatasetHeaderSection.tsx @@ -3,7 +3,6 @@ import React from 'react'; import styled from 'styled-components'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { SidebarHeaderSectionColumns } from '@app/entityV2/shared/containers/profile/sidebar/SidebarHeaderSectionColumns'; import SidebarTopUsersHeaderSection from '@app/entityV2/shared/containers/profile/sidebar/shared/SidebarTopUsersHeaderSection'; import { @@ -16,7 +15,7 @@ import CompactContext from '@app/shared/CompactContext'; import { formatBytes, formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; const StatContent = styled.div` - color: ${REDESIGN_COLORS.FOUNDATION_BLUE_4}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 12px; font-weight: 600; `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx index af2564d642cca4..a585723273990d 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/StatsSidebarSection.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { useBaseEntity, useRouteToTab } from '@app/entity/shared/EntityContext'; import UsageFacepile from '@app/entityV2/dataset/profile/UsageFacepile'; import { InfoItem } from '@app/entityV2/shared/components/styled/InfoItem'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { SidebarHeader } from '@app/entityV2/shared/containers/profile/sidebar/SidebarHeader'; import { formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; @@ -14,7 +13,7 @@ import { Operation, UsageQueryResult } from '@types'; const HeaderInfoBody = styled(Typography.Text)` font-size: 16px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; `; const HeaderContainer = styled.div` diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx index a7fd3bbb542881..f4d0490e3a9f2a 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Dataset/View/SidebarViewDefinitionSection.tsx @@ -4,14 +4,13 @@ import styled from 'styled-components'; import { useBaseEntity, useRouteToTab } from '@app/entity/shared/EntityContext'; import { InfoItem } from '@app/entityV2/shared/components/styled/InfoItem'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { SidebarSection } from '@app/entityV2/shared/containers/profile/sidebar/SidebarSection'; import { GetDatasetQuery } from '@graphql/dataset.generated'; const HeaderInfoBody = styled(Typography.Text)` font-size: 16px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; `; const StatsButton = styled(Button)` diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx index d41097bfea5ff6..6d707cafec105b 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx @@ -1,10 +1,10 @@ import { Empty, Form, Select, message } from 'antd'; import React, { useRef, useState } from 'react'; +import { useTheme } from 'styled-components'; import domainAutocompleteOptions from '@app/domainV2/DomainAutocompleteOptions'; import DomainNavigator from '@app/domainV2/nestedDomains/domainNavigator/DomainNavigator'; import { useEntityContext } from '@app/entity/shared/EntityContext'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { handleBatchError } from '@app/entityV2/shared/utils'; import ClickOutside from '@app/shared/ClickOutside'; import { BrowserWrapper } from '@app/shared/tags/AddTagsTermsModal'; @@ -37,6 +37,7 @@ type SelectedDomain = { }; export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOkOverride, titleOverride }: Props) => { + const themeConfig = useTheme(); const { reloadByKeyType } = useReloadableContext(); const entityRegistry = useEntityRegistry(); const { entityType } = useEntityContext(); @@ -248,7 +249,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk } options={domainAutocompleteOptions(domainResult, searchLoading, entityRegistry)} diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarDataProductsSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarDataProductsSection.tsx index 43bf91432b4f29..3761bcce98f9c9 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarDataProductsSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarDataProductsSection.tsx @@ -3,7 +3,6 @@ import { useHistory } from 'react-router'; import styled from 'styled-components/macro'; import { useEntityData } from '@app/entity/shared/EntityContext'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { navigateToDomainDataProducts } from '@app/entityV2/shared/containers/profile/sidebar/Domain/utils'; import EmptySectionText from '@app/entityV2/shared/containers/profile/sidebar/EmptySectionText'; import { SidebarSection } from '@app/entityV2/shared/containers/profile/sidebar/SidebarSection'; @@ -26,7 +25,7 @@ const ViewAllButton = styled.div` font-weight: bold; padding: 0px 2px; margin-left: 8px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; :hover { cursor: pointer; } diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesLoadingSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesLoadingSection.tsx index 08dbe863503f58..62e7b82d68e4cd 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesLoadingSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesLoadingSection.tsx @@ -1,11 +1,11 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Spin } from 'antd'; import React from 'react'; - -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; +import { useTheme } from 'styled-components'; const SidebarEntitiesLoadingSection = () => { - return } />; + const theme = useTheme(); + return } />; }; export default SidebarEntitiesLoadingSection; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesSection.tsx index 4b52901b7edcfe..af5b96911a0ae9 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesSection.tsx @@ -3,7 +3,6 @@ import { useHistory } from 'react-router'; import styled from 'styled-components/macro'; import { useEntityContext, useEntityData } from '@app/entity/shared/EntityContext'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import SidebarEntitiesLoadingSection from '@app/entityV2/shared/containers/profile/sidebar/Domain/SidebarEntitiesLoadingSection'; import { getContentsSummary, @@ -33,7 +32,7 @@ const ViewAllButton = styled.div` align-items: center; font-weight: bold; padding: 0px 2px; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.textSecondary}; :hover { cursor: pointer; } diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/utils.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/utils.tsx index 8f1fea31cca888..3cc839caa412cd 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/utils.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/Domain/utils.tsx @@ -2,7 +2,6 @@ import * as QueryString from 'query-string'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import filtersToQueryStringParams from '@app/search/utils/filtersToQueryStringParams'; import { pluralize } from '@app/shared/textUtil'; import { EntityRegistry } from '@src/entityRegistryContext'; @@ -12,7 +11,7 @@ import { AggregationMetadata, EntityType, FacetMetadata, SearchResults } from '@ const UNIT_SEPARATOR = '␞'; const SummaryText = styled.span` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export type ContentTypeSummary = { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx index d04960b36aca2c..4a204efa600e12 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; @@ -6,7 +5,7 @@ import styled from 'styled-components'; const EmptyContentMessage = styled(Typography.Text)` font-size: 12px; font-weight: 400; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebar.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebar.tsx index c4de55a282eaeb..17e4eb6c11f619 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebar.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebar.tsx @@ -24,9 +24,9 @@ export const StyledEntitySidebarContainer = styled.div<{ return 'none'; } if (props.$isShowNavBarRedesign) { - return props.theme.styles['box-shadow-navbar-redesign']; + return props.theme.colors.shadowSm; } - return '0px 0px 6px 0px rgba(93, 102, 139, 0.2)'; + return props.theme.colors.shadowSm; }}; ${(props) => !props.isCollapsed && props.$width && `min-width: ${props.$width}px; max-width: ${props.$width}px;`} ${(props) => props.isCollapsed && 'min-width: 64px; max-width: 64px;'} @@ -51,8 +51,8 @@ export const StyledEntitySidebarContainer = styled.div<{ `; export const StyledSidebar = styled.div<{ isCard: boolean; isFocused?: boolean; $isShowNavBarRedesign?: boolean }>` - background-color: #ffffff; - box-shadow: ${(props) => (props.isCard ? '0px 0px 5px rgba(0, 0, 0, 0.08)' : 'none')}; + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => (props.isCard ? props.theme.colors.shadowSm : 'none')}; border-radius: ${(props) => { if (!props.isCard) return 'none'; return props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'; @@ -90,7 +90,7 @@ const Content = styled.div` const ContentContainer = styled.div<{ isVisible: boolean }>` flex: 1; - ${(props) => props.isVisible && 'border-right: 1px solid #e8e8e8;'} + ${(props) => props.isVisible && `border-right: 1px solid ${props.theme.colors.border};`} overflow: auto; display: flex; flex-direction: column; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebarSearchHeader.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebarSearchHeader.tsx index 52b07a9b40c7c0..ca058d05cbcdcf 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebarSearchHeader.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntityProfileSidebarSearchHeader.tsx @@ -45,7 +45,7 @@ export default function EntityProfileSidebarSearchHeader({ showViewDetails = tru ); - const historicalButtonColor = viewType === ViewType.HISTORICAL ? REDESIGN_COLORS.BLUE : ANTD_GRAY[8]; + const historicalButtonColor = + viewType === ViewType.HISTORICAL ? theme.colors.textInformation : theme.colors.textSecondary; const historicalButton = ( diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/styledComponents.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/styledComponents.tsx index 5316a8f0c00d77..912fe9bfe4d63c 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/styledComponents.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/styledComponents.tsx @@ -1,21 +1,5 @@ import styled from 'styled-components'; -// Helper functions to simplify logic -const getBackgroundColor = ({ isExpandedView, primary }: { isExpandedView?: boolean; primary?: boolean }) => { - if (isExpandedView) return 'inherit'; - return primary ? '#5280e8' : '#ffffff'; -}; - -const getColor = ({ isExpandedView, primary }: { isExpandedView?: boolean; primary?: boolean }) => { - if (primary) return '#fff'; - return isExpandedView ? '#000' : '#5280e8'; -}; - -const getBorder = ({ isExpandedView, primary }: { isExpandedView?: boolean; primary?: boolean }) => { - if (isExpandedView) return 'none'; - return primary ? '1px solid #5280e8' : '1px solid #f0f0f0'; -}; - export const ActionItemButton = styled.button<{ disabled?: boolean; primary?: boolean; isExpandedView?: boolean }>` border-radius: ${(props) => (props.isExpandedView ? `0px` : `20px`)}; width: 28px; @@ -26,13 +10,22 @@ export const ActionItemButton = styled.button<{ disabled?: boolean; primary?: bo align-items: center; justify-content: center; overflow: hidden; - background-color: ${(props) => getBackgroundColor(props)}; - color: ${(props) => getColor(props)}; + background-color: ${(props) => { + if (props.isExpandedView) return 'inherit'; + return props.primary ? props.theme.colors.buttonFillBrand : props.theme.colors.bg; + }}; + color: ${(props) => { + if (props.primary) return props.theme.colors.textOnFillBrand; + return props.isExpandedView ? props.theme.colors.text : props.theme.colors.textBrand; + }}; box-shadow: none; cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')}; &&:hover { ${(props) => !props.disabled && 'opacity: 0.8;'} } ${(props) => props.disabled && 'opacity: 0.5'}; - border: ${(props) => getBorder(props)}; + border: ${(props) => { + if (props.isExpandedView) return 'none'; + return props.primary ? `1px solid ${props.theme.colors.borderBrand}` : `1px solid ${props.theme.colors.border}`; + }}; `; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopoverContent.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopoverContent.tsx index 94656414b26a6b..b41fddbe19be64 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopoverContent.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopoverContent.tsx @@ -3,7 +3,6 @@ import { Divider, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { PrimaryButton } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/builder/details/PrimaryButton'; import { isExternalAssertion } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/isExternalAssertion'; import { toReadableLocalDateTimeString } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/utils'; @@ -63,7 +62,7 @@ const LastRunRow = styled.div` display: flex; align-items: center; font-weight: 500; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; .anticon-clock-circle { font-size: 10px; } @@ -73,7 +72,7 @@ const ReasonRow = styled.div``; const SecondaryHeader = styled.div` font-size: 10px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const ReasonText = styled.div``; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/AssertionSummarySection.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/AssertionSummarySection.tsx index 5a92c584b8ba54..d9e6e0195615ee 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/AssertionSummarySection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/AssertionSummarySection.tsx @@ -1,15 +1,13 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const Title = styled.div` padding: 0; margin: 0; margin-bottom: 4px; display: flex; align-items: center; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; font-weight: 600; font-size: 16px; margin-bottom: 18px; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/NoResultsSummary.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/NoResultsSummary.tsx index 1a535ae7ae5b82..917c8c4a53f0e2 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/NoResultsSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/NoResultsSummary.tsx @@ -1,10 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const SecondaryText = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; /** diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsLoadingItems.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsLoadingItems.tsx index 1c521beac0a187..c2dbfba1f6b757 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsLoadingItems.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsLoadingItems.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { range } from 'remirror'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { getResultDotIcon } from '@app/entityV2/shared/tabs/Dataset/Validations/assertionUtils'; import { AssertionResultType } from '@types'; @@ -12,7 +11,7 @@ const ItemSkeleton = styled(Skeleton.Input)` && { width: 100%; border-radius: 4px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTable.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTable.tsx index cd10774bb84722..e8ace356fba441 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTable.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTable.tsx @@ -2,7 +2,6 @@ import { Timeline } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { AssertionResultDot } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/AssertionResultDot'; import { NoResultsSummary } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/NoResultsSummary'; import { AssertionResultsLoadingItems } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsLoadingItems'; @@ -21,7 +20,7 @@ const StyledTimeline = styled.div` `; const ShowMoreButton = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; cursor: pointer; :hover { text-decoration: underline; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTableItem.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTableItem.tsx index 26a6e664917ae2..3b47884f312e2e 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTableItem.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/table/AssertionResultsTableItem.tsx @@ -2,7 +2,6 @@ import { Tooltip } from '@components'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { AssertionResultPopover } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopover'; import { getFormattedTimeString } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/utils'; import { @@ -23,7 +22,7 @@ const Container = styled.div<{ highlightColor?: string }>` padding: 4px 8px; border-radius: 4px; :hover { - background-color: ${(props) => props.highlightColor || ANTD_GRAY[2]}; + background-color: ${(props) => props.highlightColor || props.theme.colors.bgSurface}; } `; @@ -45,7 +44,7 @@ const ResultColumn = styled.div` const PreHeaderText = styled.div<{ color?: string }>` font-size: 12px; - color: ${(props) => props.color || ANTD_GRAY[7]}; + color: ${(props) => props.color || props.theme.colors.textTertiary}; `; const HeaderText = styled.div` diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionResultsTimelineViz.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionResultsTimelineViz.tsx index b2e21392f1c4e7..8446c5e2b3a665 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionResultsTimelineViz.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionResultsTimelineViz.tsx @@ -2,7 +2,6 @@ import { Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { StatusOverTimeAssertionResultChart } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/charts/StatusOverTimeAssertionResultChart'; import { AssertionResultChartData, @@ -34,7 +33,7 @@ const VizHeader = styled.div` const VizHeaderTitle = styled(Typography.Text)` margin-bottom: 20px; margin-top: 4px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; font-size: 16px; font-weight: 600; `; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionTimelineSkeleton.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionTimelineSkeleton.tsx index 0780fdbdc85352..544d2bd194dda8 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionTimelineSkeleton.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/AssertionTimelineSkeleton.tsx @@ -2,8 +2,6 @@ import { Col, Row, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const SKELETON_MARGIN_BOTTOM_PX = 12; const Body = styled.div` padding-bottom: ${SKELETON_MARGIN_BOTTOM_PX}px; @@ -31,8 +29,8 @@ const StyledCol = styled(Col)` const Box = styled.div` width: 100%; height: 100%; - background-color: ${ANTD_GRAY[3]}; - border: 1px solid ${ANTD_GRAY[4]}; + background-color: ${(props) => props.theme.colors.bgSurface}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; display: flex; align-items: center; justify-content: center; @@ -55,7 +53,7 @@ const LoadingTextContainer = styled.div` `; const LoadingText = styled(Typography.Text)` font-size: 14px; - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.textDisabled}; `; const NUM_GRID_BOXES = 12; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/charts/StatusOverTimeAssertionResultChart.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/charts/StatusOverTimeAssertionResultChart.tsx index 8bf53723a70512..744433499ee06f 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/charts/StatusOverTimeAssertionResultChart.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/result/timeline/charts/StatusOverTimeAssertionResultChart.tsx @@ -6,8 +6,8 @@ import { Group } from '@visx/group'; import { scaleUtc } from '@visx/scale'; import { LinePath } from '@visx/shape'; import React, { useMemo } from 'react'; +import { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { AssertionResultPopoverContent } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/shared/result/AssertionResultPopoverContent'; import { AssertionResultChartData, @@ -40,6 +40,7 @@ const CHART_AXIS_BOTTOM_HEIGHT = 40; * TODO(jayacryl) refactor to a pretty timeline line-view */ export const StatusOverTimeAssertionResultChart = ({ data, timeRange, chartDimensions, renderHeader }: Props) => { + const theme = useTheme(); const chartInnerHeight = chartDimensions.height - CHART_AXIS_BOTTOM_HEIGHT; const chartInnerWidth = chartDimensions.width - CHART_HORIZ_MARGIN; @@ -62,10 +63,10 @@ export const StatusOverTimeAssertionResultChart = ({ data, timeRange, chartDimen getCustomTimeScaleTickValue(v, timeRange)} - tickStroke={ANTD_GRAY[9]} + tickStroke={theme.colors.text} tickLength={4} tickLabelProps={{ fontSize: 11, @@ -80,7 +81,7 @@ export const StatusOverTimeAssertionResultChart = ({ data, timeRange, chartDimen tickValues={timeScaleTicks} height={chartInnerHeight} lineStyle={{ - stroke: ANTD_GRAY[5], + stroke: theme.colors.border, strokeLinecap: 'round', strokeWidth: 1, strokeDasharray: '1 4', @@ -123,7 +124,7 @@ export const StatusOverTimeAssertionResultChart = ({ data, timeRange, chartDimen left={xOffset} top={yOffset} fill={fillColor} - stroke="white" + stroke={theme.colors.bg} strokeWidth={2} size={100} filter="drop-shadow(0px 1px 2.5px rgb(0 0 0 / 0.05))" diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/schedule/AssertionScheduleSummarySection.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/schedule/AssertionScheduleSummarySection.tsx index 8e5004d2101aa9..32cf2d8810d7d2 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/schedule/AssertionScheduleSummarySection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/schedule/AssertionScheduleSummarySection.tsx @@ -3,7 +3,6 @@ import { Divider } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { TruncatedTextWithTooltip } from '@app/shared/TruncatedTextWithTooltip'; const Container = styled.div` @@ -26,12 +25,12 @@ const Title = styled.div` margin-bottom: 8px; display: flex; align-items: center; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-weight: 700; `; const StyledTruncatedText = styled(TruncatedTextWithTooltip)` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; const StyledDivider = styled(Divider)` diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/AssertionResultPill.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/AssertionResultPill.tsx index f2542e287839a8..0ed1d51f52087f 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/AssertionResultPill.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/AssertionResultPill.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { ResultStatusType, getResultStatusText, @@ -17,8 +16,8 @@ const Pill = styled.div<{ color: string; highlightColor: string }>` align-items: center; border-radius: 20px; padding: 4px 12px; - background-color: ${(props) => props.highlightColor || ANTD_GRAY[3]}; - color: ${(props) => props.color || ANTD_GRAY[3]}; + background-color: ${(props) => props.highlightColor || props.theme.colors.bgSurface}; + color: ${(props) => props.color || props.theme.colors.bgSurface}; :hover { opacity: 0.8; } diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessage.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessage.tsx index d95b5c75050fef..8c3f821c952a89 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessage.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessage.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { getDetailedErrorMessage } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/resultMessageUtils'; import { AssertionRunEvent } from '@types'; @@ -24,7 +23,7 @@ const Title = styled.div` `; const Message = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessageTooltip.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessageTooltip.tsx index bc150f1b3844d5..49250ee084e967 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessageTooltip.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessageTooltip.tsx @@ -4,7 +4,6 @@ import { TooltipPlacement } from 'antd/lib/tooltip'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { DetailedErrorMessage } from '@app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/DetailedErrorMessage'; import { AssertionRunEvent } from '@types'; @@ -12,7 +11,7 @@ import { AssertionRunEvent } from '@types'; const StyledInfoCircleOutlined = styled(InfoCircleOutlined)` margin-left: 8px; font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/SelectablePill.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/SelectablePill.tsx index da069d36b760d6..31f6307892f5c4 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/SelectablePill.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/shared/SelectablePill.tsx @@ -2,16 +2,15 @@ import { Tooltip } from '@components'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - const Pill = styled.div<{ selected: boolean }>` display: flex; justify-content: center; align-items: center; border-radius: 20px; padding: 4px 12px; - background-color: ${(props) => (props.selected ? props.theme.styles['primary-color'] : ANTD_GRAY[3])}; - color: ${(props) => (props.selected ? '#fff' : ANTD_GRAY)}; + background-color: ${(props) => + props.selected ? props.theme.colors.buttonFillBrand : props.theme.colors.bgSurface}; + color: ${(props) => (props.selected ? props.theme.colors.textOnFillBrand : props.theme.colors.text)}; :hover { opacity: 0.6; cursor: pointer; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/utils.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/utils.tsx index 4b32087f80f38a..ea32f741477bda 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/utils.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/summary/utils.tsx @@ -2,8 +2,8 @@ import { Tooltip } from '@components'; import { Typography } from 'antd'; import { Maybe } from 'graphql/jsutils/Maybe'; import React from 'react'; +import { useTheme } from 'styled-components'; -import { ANTD_GRAY_V2 } from '@app/entityV2/shared/constants'; import { DatasetAssertionDescription } from '@app/entityV2/shared/tabs/Dataset/Validations/DatasetAssertionDescription'; import { FieldAssertionDescription } from '@app/entityV2/shared/tabs/Dataset/Validations/FieldAssertionDescription'; import { @@ -409,6 +409,7 @@ export const useBuildAssertionPrimaryLabel = ( * @returns {JSX.Element} if sufficient data is present */ const useBuildSecondaryLabel = (assertionInfo?: Maybe): JSX.Element | null => { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); // 1. Fetching the most recent actor data. @@ -491,7 +492,7 @@ const useBuildSecondaryLabel = (assertionInfo?: Maybe): JSX.Eleme } > - + {secondaryLabelMessage} diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertionUtils.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertionUtils.tsx index e4e2a938c214c3..d8a92899d25fcd 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertionUtils.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertionUtils.tsx @@ -3,11 +3,6 @@ import { Location } from 'history'; import QueryString from 'query-string'; import React from 'react'; -import { ERROR_COLOR_HEX, FAILURE_COLOR_HEX, SUCCESS_COLOR_HEX } from '@components/theme/foundations/colors'; - -// TODO -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - import { AssertionResult, AssertionResultErrorType, @@ -58,24 +53,25 @@ export const getResultText = (result: AssertionResultType) => { }; /** - * Returns the display color associated with an AssertionResultType + * Returns the display color associated with an AssertionResultType. + * Accepts an optional theme to use semantic tokens; falls back to hardcoded values. */ -const INIT_COLOR_HEX = '#2F54EB'; -const NO_RESULTS_COLOR_HEX = ANTD_GRAY[8]; +export const getResultColor = (result?: AssertionResultType, theme?: { colors: Record }) => { + const initColor = theme?.colors?.textInformation ?? '#2F54EB'; + const noResultsColor = theme?.colors?.textTertiary ?? '#595959'; -export const getResultColor = (result?: AssertionResultType) => { if (!result) { - return NO_RESULTS_COLOR_HEX; + return noResultsColor; } switch (result) { case AssertionResultType.Success: - return SUCCESS_COLOR_HEX; + return theme?.colors?.iconSuccess ?? '#52C41A'; case AssertionResultType.Failure: - return FAILURE_COLOR_HEX; + return theme?.colors?.iconError ?? '#F5222D'; case AssertionResultType.Error: - return ERROR_COLOR_HEX; + return theme?.colors?.iconWarning ?? '#FAAD14'; case AssertionResultType.Init: - return INIT_COLOR_HEX; + return initColor; default: throw new Error(`Unsupported Assertion Result Type ${result} provided.`); } diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/ContractStructuredPropertiesSummary.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/ContractStructuredPropertiesSummary.tsx index 878127a5e95f43..c5eccb29dad140 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/ContractStructuredPropertiesSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/ContractStructuredPropertiesSummary.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { PropertiesTab } from '@app/entityV2/shared/tabs/Properties/PropertiesTab'; import { EntityContext } from '@src/app/entity/shared/EntityContext'; import { useEntityRegistry } from '@src/app/useEntityRegistry'; @@ -9,7 +8,7 @@ import { useEntityRegistry } from '@src/app/useEntityRegistry'; import { DataContract, EntityType } from '@types'; const TitleText = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-bottom: 20px; letter-spacing: 1px; `; @@ -20,7 +19,7 @@ const Container = styled.div` const PropertiesContainer = styled.div` width: 100%; border-radius: 8px; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowXs}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummary.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummary.tsx index 91fe4c28c370ad..9e5450fdf5b0c9 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummary.tsx @@ -2,9 +2,8 @@ import { Tooltip } from '@components'; import EditIcon from '@mui/icons-material/Edit'; import { Button, Typography } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { AssertionStatusSummary } from '@app/entityV2/shared/tabs/Dataset/Validations/acrylTypes'; import { getContractSummaryIcon, @@ -22,7 +21,7 @@ const SummaryHeader = styled.div` display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const SummaryContainer = styled.div``; @@ -54,13 +53,13 @@ const CreateButton = styled(Button)` align-items: center; gap: 0.3rem; margin-right: 12px; - border-color: ${(props) => props.theme.styles['primary-color']}; - color: ${(props) => props.theme.styles['primary-color']}; + border-color: ${(props) => props.theme.colors.borderBrand}; + color: ${(props) => props.theme.colors.textBrand}; letter-spacing: 2px; &&:hover { - color: white; - background-color: ${(props) => props.theme.styles['primary-color']}; - border-color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textOnFillBrand}; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; + border-color: ${(props) => props.theme.colors.borderBrand}; } `; @@ -85,7 +84,8 @@ export const DataContractSummary = ({ editDisabled, editDisabledMessage, }: Props) => { - const summaryIcon = getContractSummaryIcon(state, summary); + const theme = useTheme(); + const summaryIcon = getContractSummaryIcon(state, summary, theme.colors); const summaryTitle = getContractSummaryTitle(state, summary); const summaryMessage = getContractSummaryMessage(state, summary); return ( diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummaryFooter.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummaryFooter.tsx index d587767bed4cab..09d06b19f093ca 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummaryFooter.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummaryFooter.tsx @@ -3,7 +3,6 @@ import { Button } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { getAssertionsSummary } from '@app/entityV2/shared/tabs/Dataset/Validations/acrylUtils'; import { StyledCheckOutlined, @@ -25,12 +24,12 @@ const StatusContainer = styled.div` `; const StatusText = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-left: 4px; `; const ActionButton = styled(Button)` - color: ${REDESIGN_COLORS.BLUE}; + color: ${(props) => props.theme.colors.textInformation}; `; const StyledArrowRightOutlined = styled(ArrowRightOutlined)` diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataQualityContractSummary.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataQualityContractSummary.tsx index 434587c5f81409..63a041c0dab7e0 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataQualityContractSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/DataQualityContractSummary.tsx @@ -2,7 +2,6 @@ import { Table, Typography } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { DatasetAssertionDescription } from '@app/entityV2/shared/tabs/Dataset/Validations/DatasetAssertionDescription'; import { FieldAssertionDescription } from '@app/entityV2/shared/tabs/Dataset/Validations/FieldAssertionDescription'; import { SqlAssertionDescription } from '@app/entityV2/shared/tabs/Dataset/Validations/SqlAssertionDescription'; @@ -13,13 +12,13 @@ import { DataContractSummaryFooter } from '@app/entityV2/shared/tabs/Dataset/Val import { Assertion, AssertionType, DataQualityContract, DatasetAssertionInfo } from '@types'; const TitleText = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-bottom: 20px; letter-spacing: 1px; `; const ColumnHeader = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const Container = styled.div` @@ -35,7 +34,7 @@ const SummaryContainer = styled.div` const StyledTable = styled(Table)` width: 100%; border-radius: 8px; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowXs}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/FreshnessContractSummary.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/FreshnessContractSummary.tsx index ca30dd6f4b6625..ffffc6411565b0 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/FreshnessContractSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/FreshnessContractSummary.tsx @@ -3,7 +3,6 @@ import { Divider } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { DataContractSummaryFooter } from '@app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummaryFooter'; import { FreshnessScheduleSummary } from '@app/entityV2/shared/tabs/Dataset/Validations/contract/FreshnessScheduleSummary'; @@ -14,7 +13,7 @@ const Container = styled.div` `; const TitleText = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-bottom: 20px; letter-spacing: 1px; `; @@ -27,11 +26,11 @@ const ThinDivider = styled(Divider)` `; const Header = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; letter-spacing; 4px; padding-top: 8px; padding: 12px; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const Body = styled.div` @@ -41,13 +40,13 @@ const Body = styled.div` const Footer = styled.div` padding-top: 8px; padding: 12px; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; `; const SummaryContainer = styled.div` width: 100%; border-radius: 8px; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowXs}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/SchemaContractSummary.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/SchemaContractSummary.tsx index 8424328783d050..b363edfd9828aa 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/SchemaContractSummary.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/SchemaContractSummary.tsx @@ -2,19 +2,18 @@ import { Table } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { DataContractSummaryFooter } from '@app/entityV2/shared/tabs/Dataset/Validations/contract/DataContractSummaryFooter'; import { SchemaContract } from '@types'; const TitleText = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; margin-bottom: 20px; letter-spacing: 1px; `; const ColumnHeader = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const Container = styled.div` @@ -30,7 +29,7 @@ const SummaryContainer = styled.div` const StyledTable = styled(Table)` width: 100%; border-radius: 8px; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowXs}; height: 100%; `; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractAssertionGroupSelect.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractAssertionGroupSelect.tsx index 896c52d1a534c4..8c661f5d323ac7 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractAssertionGroupSelect.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractAssertionGroupSelect.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { AcrylDatasetAssertionsList } from '@app/entityV2/shared/tabs/Dataset/Validations/AcrylAssertionsList'; import { DataContractCategoryType } from '@app/entityV2/shared/tabs/Dataset/Validations/contract/builder/types'; @@ -11,14 +10,14 @@ const Category = styled.div` padding: 20px; font-weight: bold; font-size: 14px; - background-color: ${ANTD_GRAY[3]}; + background-color: ${(props) => props.theme.colors.bgSurface}; border-radius: 4px; `; const Hint = styled.span` font-weight: normal; font-size: 14px; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; `; type Props = { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractBuilder.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractBuilder.tsx index d5f44004e37d37..f8175208198255 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractBuilder.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/builder/DataContractBuilder.tsx @@ -3,7 +3,6 @@ import lodash from 'lodash'; import React, { useState } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { createAssertionGroups, tryExtractMonitorDetailsFromAssertionsWithMonitorsQuery, @@ -30,7 +29,7 @@ const BuilderContainer = styled.div` `; const AssertionsSection = styled.div` - border: 0.5px solid ${ANTD_GRAY[4]}; + border: 0.5px solid ${(props) => props.theme.colors.bgHover}; flex: 1; overflow: auto; min-height: 0; @@ -38,7 +37,7 @@ const AssertionsSection = styled.div` const HeaderText = styled.div` padding: 16px 20px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; font-size: 16px; `; @@ -47,7 +46,7 @@ const ActionContainer = styled.div` justify-content: space-between; flex-shrink: 0; padding: 16px 20px; - border-top: 1px solid ${ANTD_GRAY[4]}; + border-top: 1px solid ${(props) => props.theme.colors.bgHover}; margin-top: 0; `; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/utils.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/utils.tsx index 9c227179e6ada9..573708c0400c32 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/utils.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/contract/utils.tsx @@ -7,31 +7,33 @@ import { } from '@ant-design/icons'; import React from 'react'; -import { FAILURE_COLOR_HEX, SUCCESS_COLOR_HEX, WARNING_COLOR_HEX } from '@components/theme/foundations/colors'; - -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { AssertionStatusSummary } from '@app/entityV2/shared/tabs/Dataset/Validations/acrylTypes'; import { DataContractCategoryType } from '@app/entityV2/shared/tabs/Dataset/Validations/contract/builder/types'; +import ColorTheme from '@src/conf/theme/colorThemes/types'; import { Assertion, AssertionType, DataContract, DataContractState } from '@types'; -export const getContractSummaryIcon = (state: DataContractState, summary: AssertionStatusSummary) => { +export const getContractSummaryIcon = ( + state: DataContractState, + summary: AssertionStatusSummary, + colors: ColorTheme, +) => { if (state === DataContractState.Pending) { - return ; + return ; } if (summary.total === 0) { - return ; + return ; } if (summary.passing === summary.total) { - return ; + return ; } if (summary.failing > 0) { - return ; + return ; } if (summary.erroring > 0) { - return ; + return ; } - return ; + return ; }; export const getContractSummaryTitle = (state: DataContractState, summary: AssertionStatusSummary) => { diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/shared/styledComponents.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/shared/styledComponents.tsx index 9fb190f62fb4f2..5e80e56501ed8a 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/shared/styledComponents.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/shared/styledComponents.tsx @@ -1,33 +1,29 @@ import { CheckOutlined, ClockCircleOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons'; import styled from 'styled-components'; -import { FAILURE_COLOR_HEX, SUCCESS_COLOR_HEX, WARNING_COLOR_HEX } from '@components/theme/foundations/colors'; - -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; - export const StyledCheckOutlined = styled(CheckOutlined)` - color: ${SUCCESS_COLOR_HEX}; + color: ${(props) => props.theme.colors.iconSuccess}; font-size: 16px; margin-right: 4px; margin-left: 4px; `; export const StyledCloseOutlined = styled(CloseOutlined)` - color: ${FAILURE_COLOR_HEX}; + color: ${(props) => props.theme.colors.iconError}; font-size: 16px; margin-right: 4px; margin-left: 4px; `; export const StyledExclamationOutlined = styled(ExclamationCircleOutlined)` - color: ${WARNING_COLOR_HEX}; + color: ${(props) => props.theme.colors.iconWarning}; font-size: 16px; margin-right: 4px; margin-left: 4px; `; export const StyledClockCircleOutlined = styled(ClockCircleOutlined)` - color: ${ANTD_GRAY[6]}; + color: ${(props) => props.theme.colors.iconDisabled}; font-size: 16px; margin-right: 4px; margin-left: 4px; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/View/ViewDefinitionTab.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/View/ViewDefinitionTab.tsx index 2d4ecbd8d47435..563c28c8400100 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/View/ViewDefinitionTab.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Dataset/View/ViewDefinitionTab.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import { useBaseEntity } from '@app/entity/shared/EntityContext'; import { StyledSyntaxHighlighter } from '@app/entityV2/shared/StyledSyntaxHighlighter'; import { InfoItem } from '@app/entityV2/shared/components/styled/InfoItem'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { ViewHeader } from '@app/entityV2/shared/containers/profile/sidebar/SidebarLogicSection'; import CopyQuery from '@app/entityV2/shared/tabs/Dataset/Queries/CopyQuery'; import { DBT_URN } from '@app/ingest/source/builder/constants'; @@ -13,7 +12,7 @@ import { DBT_URN } from '@app/ingest/source/builder/constants'; import { GetDatasetQuery } from '@graphql/dataset.generated'; const InfoSection = styled.div` - border-bottom: 1px solid ${ANTD_GRAY[4.5]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; padding: 16px 20px; `; @@ -36,7 +35,7 @@ const FormattingSelector = styled.div``; */ const QueryText = styled(Typography.Paragraph)` margin-top: 20px; - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; span { font-family: 'Roboto Mono', monospace !important; } diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/DocumentationTab.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/DocumentationTab.tsx index 0db4b2c5cc273e..d8c80ac5148d3f 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/DocumentationTab.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/DocumentationTab.tsx @@ -8,7 +8,6 @@ import styled from 'styled-components'; import { useEntityData, useRouteToTab } from '@app/entity/shared/EntityContext'; import { EmptyTab } from '@app/entityV2/shared/components/styled/EmptyTab'; import TabToolbar from '@app/entityV2/shared/components/styled/TabToolbar'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { DescriptionEditor } from '@app/entityV2/shared/tabs/Documentation/components/DescriptionEditor'; import { DescriptionPreviewModal } from '@app/entityV2/shared/tabs/Documentation/components/DescriptionPreviewModal'; import { RelatedSection } from '@app/entityV2/shared/tabs/Documentation/components/RelatedSection'; @@ -23,10 +22,10 @@ const DocumentationContainer = styled.div` `; const StyledTabToolbar = styled(TabToolbar)` - background-color: ${REDESIGN_COLORS.LIGHT_GREY}; + background-color: ${(props) => props.theme.colors.bgSurface}; border-top-left-radius: 4px; border-bottom-left-radius: 4px; - border-left: 2px solid #5c3fd1; + border-left: 2px solid ${(props) => props.theme.colors.borderBrand}; padding: 8px 20px; margin: 2px 14px 2px 12px; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/AddContextDocumentPopover.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/AddContextDocumentPopover.tsx index 682dd782328216..442c3d87d1545b 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/AddContextDocumentPopover.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/AddContextDocumentPopover.tsx @@ -7,7 +7,6 @@ import { useUpdateDocument } from '@app/document/hooks/useUpdateDocument'; import { createDefaultDocumentInput, extractRelatedAssetUrns, mergeUrns } from '@app/document/utils/documentUtils'; import { DocumentPopoverBase } from '@app/homeV2/layout/sidebar/documents/shared/DocumentPopoverBase'; import { Button } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; import { GetDocumentDocument, useCreateDocumentMutation } from '@graphql/document.generated'; import { DocumentSourceType } from '@types'; @@ -15,15 +14,10 @@ import { DocumentSourceType } from '@types'; const NewDocumentButton = styled(Button)` width: 100%; justify-content: start; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; &:hover { - background: linear-gradient( - 180deg, - rgba(243, 244, 246, 0.5) -3.99%, - rgba(235, 236, 240, 0.5) 53.04%, - rgba(235, 236, 240, 0.5) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(139, 135, 157, 0.08); + background: ${(props) => props.theme.colors.bgHover}; + box-shadow: ${(props) => props.theme.colors.shadowFocus}; } padding: 12px 8px; `; diff --git a/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/LinkList.tsx b/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/LinkList.tsx index 8a76c743218ebb..c366ed9f124df4 100644 --- a/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/LinkList.tsx +++ b/datahub-web-react/src/app/entityV2/shared/tabs/Documentation/components/LinkList.tsx @@ -1,16 +1,14 @@ import { DeleteOutlined } from '@ant-design/icons'; -import { colors } from '@components'; import { Pencil } from '@phosphor-icons/react'; import { Button, List, Typography } from 'antd'; import React, { useCallback, useState } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled, { useTheme } from 'styled-components/macro'; import { useEntityData } from '@app/entity/shared/EntityContext'; import { EditLinkModal } from '@app/entityV2/shared/components/links/EditLinkModal'; import { LinkIcon } from '@app/entityV2/shared/components/links/LinkIcon'; import { useLinkUtils } from '@app/entityV2/shared/components/links/useLinkUtils'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { formatDateString } from '@app/entityV2/shared/containers/profile/utils'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -30,7 +28,7 @@ const LinkListItem = styled(List.Item)` } } &:hover { - background-color: ${ANTD_GRAY[2]}; + background-color: ${(props) => props.theme.colors.bgSurface}; ${LinkButtonsContainer} { > .ant-btn { opacity: 1; @@ -50,6 +48,7 @@ export const LinkList = () => { const [editingMetadata, setEditingMetadata] = useState(); const { entityData } = useEntityData(); const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const links = entityData?.institutionalMemory?.elements || []; const { handleDeleteLink } = useLinkUtils(editingMetadata); @@ -81,7 +80,7 @@ export const LinkList = () => { shape="circle" data-testid="edit-link-button" > - +