}
const BarChartTick = styled.text`
- fill: ${themeColor('pageContentLight')};
+ fill: var(--echoes-color-text-subdued);
text-anchor: middle;
`;
PopupPlacement,
PopupZLevel,
themeColor,
- themeContrast,
} from '../helpers';
import { useResizeObserver } from '../hooks/useResizeObserver';
import { Dropdown } from './Dropdown';
${tw`sw-truncate`}
${tw`sw-typo-default`}
- color: ${themeContrast('breadcrumb')};
+ color: var(--echoes-color-text-subdued);
background-color: ${themeColor('breadcrumb')};
`;
const BubbleChartTick = styled.text`
${tw`sw-typo-default`}
${tw`sw-select-none`}
- fill: ${themeColor('pageContentLight')};
+ fill: var(--echoes-color-text-subdued);
text-anchor: var(--align);
`;
*/
export const ItemHeader = styled(UnstyledItemHeader)`
background-color: ${themeColor('dropdownMenuHeader')};
- color: ${themeContrast('dropdownMenuHeader')};
+ color: var(--echoes-color-text-subdued);
${tw`sw-py-2 sw-px-3`}
`;
}
& span.stat {
- color: ${themeColor('facetItemLight')};
+ color: var(--echoes-color-text-subdued);
}
}
const HistogramTick = styled.text`
${tw`sw-typo-default`}
- fill: ${themeColor('pageContentLight')};
+ fill: var(--echoes-color-text-subdued);
${TooltipWrapper} & {
fill: ${themeContrast('primary')};
import { ReactNode } from 'react';
import tw from 'twin.macro';
import { themeBorder, themeColor } from '../helpers/theme';
+import { Note } from '../sonar-aligned';
import { BareButton } from '../sonar-aligned/components/buttons';
interface Props {
);
}
-const Note = styled.span`
- color: ${themeColor('pageContentLight')};
-
- ${tw`sw-typo-default`}
-`;
-
const ImageContainer = styled.div`
min-height: 116px;
flex: 1;
* See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3382706231/Button | Migration Guide} for more information.
*/
export const DiscreetInteractiveIcon = styled(InteractiveIcon)`
- --color: ${themeColor('discreetInteractiveIcon')};
+ --color: var(--echoes-color-icon-subdued);
`;
/**
*/
import styled from '@emotion/styled';
import tw from 'twin.macro';
-import { themeContrast } from '../helpers';
import { Key } from '../helpers/keyboard';
import { KeyboardHintKeys } from './KeyboardHintKeys';
const Body = styled.div`
${tw`sw-flex sw-gap-2 sw-justify-center`}
flex-wrap: wrap;
- color: ${themeContrast('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
`;
function isMacOS() {
${tw`sw-cursor-not-allowed`}
background-color: ${themeColor('selectionCardDisabled')};
- color: ${themeColor('selectionCardDisabledText')};
+ color: var(--echoes-color-text-disabled);
border: ${themeBorder('default', 'selectionCardBorderDisabled')};
}
`;
cursor: inherit;
.disabled & {
- color: ${themeContrast('selectionCardDisabled')};
+ color: var(--echoes-color-text-disabled);
}
`;
*/
export const StyledMutedText = styled(StyledText)`
${tw`sw-font-regular`};
- color: ${themeColor('dropdownMenuSubTitle')};
+ color: var(--echoes-color-text-subdued);
`;
/** @deprecated Use Heading from Echoes instead.
/** @deprecated Use Text (with `isSubdued` prop) from Echoes instead.
*/
export const LightLabel = styled.span`
- color: ${themeColor('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
`;
/** @deprecated Use Label or Text (with `isHighlighted` prop) from Echoes instead.
${tw`sw-break-words`};
hr {
- background-color: ${themeColor('tooltipSeparator')};
+ background-color: var(--echoes-color-text-subdued);
${tw`sw-mx-4`};
}
*/
import styled from '@emotion/styled';
import tw from 'twin.macro';
-import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
+import { themeBorder, themeColor } from '../helpers/theme';
interface Props {
children: React.ReactNode;
${tw`sw-mt-10`}
&::before {
- color: ${themeContrast('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
content: counter(li);
${tw`sw-inline-block`}
render(<TextMuted text="Hi" />);
expect(screen.getByText('Hi')).toHaveStyle({
- color: 'rgb(106, 117, 144)',
+ color: 'var(--echoes-color-text-subdued)',
});
});
.emotion-2 {
font: var(--echoes-typography-text-default-regular);
- fill: rgb(106,117,144);
+ fill: var(--echoes-color-text-subdued);
}
.e1vbniy52 .emotion-2 {
.emotion-2 {
font: var(--echoes-typography-text-default-regular);
- fill: rgb(106,117,144);
+ fill: var(--echoes-color-text-subdued);
}
.e1vbniy52 .emotion-2 {
.emotion-2 {
font: var(--echoes-typography-text-default-regular);
- fill: rgb(106,117,144);
+ fill: var(--echoes-color-text-subdued);
}
.e1vbniy52 .emotion-2 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
- color: rgb(106,117,144);
+ color: var(--echoes-color-text-subdued);
}
.emotion-2 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
- color: rgb(106,117,144);
+ color: var(--echoes-color-text-subdued);
}
.emotion-2 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
- color: rgb(106,117,144);
+ color: var(--echoes-color-text-subdued);
}
.emotion-2 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
- color: rgb(106,117,144);
+ color: var(--echoes-color-text-subdued);
}
.emotion-2 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
- color: rgb(106,117,144);
+ color: var(--echoes-color-text-subdued);
}
.emotion-2 {
import styled from '@emotion/styled';
import tw from 'twin.macro';
-import { themeBorder, themeColor, themeContrast } from '../../helpers';
+import { themeBorder, themeColor } from '../../helpers';
import { BareButton } from '../../sonar-aligned/components/buttons';
interface CodeViewerExpanderProps {
background-color: ${themeColor('codeLineEllipsis')};
&:hover {
- color: ${themeContrast('codeLineEllipsisHover')};
background-color: ${themeColor('codeLineEllipsisHover')};
}
${tw`sw-w-full sw-h-full`}
&:hover {
- color: ${themeColor('codeLineMetaHover')};
+ color: var(--echoes-color-text-subdued);
}
`;
import { memo, useState } from 'react';
import tw from 'twin.macro';
import { PopupPlacement, PopupZLevel } from '../../helpers/positioning';
-import { themeColor } from '../../helpers/theme';
import { DropdownToggler } from '../DropdownToggler';
import { LineMeta } from './LineStyles';
${tw`sw-cursor-pointer`}
&:hover {
- color: ${themeColor('codeLineMetaHover')};
+ color: var(--echoes-color-text-bold);
}
`;
${tw`sw-pr-2`}
${tw`sw-truncate`}
-${tw`sw-whitespace-nowrap`}
-${tw`sw-cursor-pointer`}
-${tw`sw-w-full sw-h-full`}
+ ${tw`sw-whitespace-nowrap`}
+ ${tw`sw-cursor-pointer`}
+ ${tw`sw-w-full sw-h-full`}
-&:hover {
- color: ${themeColor('codeLineMetaHover')};
+ &:hover {
+ color: var(--echoes-color-text-bold);
}
`;
background-color: ${themeColor('codeLineEllipsis')};
&:hover {
- color: ${themeColor('codeLineEllipsisHoverContrast')};
background-color: ${themeColor('codeLineEllipsisHover')};
}
`;
*/
import { useTheme } from '@emotion/react';
-import { themeColor, themeContrast } from '../../helpers/theme';
+import { themeColor } from '../../helpers/theme';
import { CustomIcon, IconProps } from './Icon';
/** @deprecated Use IconStatusResolved from Echoes instead, if possible.
* to replace all of the icons yet. There are situations where it is OK to ignore this deprecation
* warning when revisiting old code, but all new code should use the icons from Echoes.
*/
-export function StatusResolvedIcon({ fill = 'iconStatusResolved', ...iconProps }: IconProps) {
+export function StatusResolvedIcon({
+ fill = 'var(--echoes-color-icon-subdued)',
+ ...iconProps
+}: IconProps) {
const theme = useTheme();
return (
<path
clipRule="evenodd"
d="M11.3105 6.22789c.2884.29737.2811.77219-.0163 1.06054L8.27211 10.25c-.29414.2852-.76273.2816-1.05244-.0081l-2-1.99999c-.29289-.2929-.29289-.76777 0-1.06066.29289-.2929.76777-.2929 1.06066 0L7.7581 8.65901 10.25 6.21158c.2974-.28835.7722-.28105 1.0605.01631Z"
- fill={themeContrast('iconStatusResolved')({ theme })}
+ fill="var(--echoes-color-icon-on-color)"
fillRule="evenodd"
/>
</CustomIcon>
`;
export const StyledNote = styled.span`
- color: ${themeColor('inputPlaceholder')};
+ color: var(--echoes-color-text-placeholder);
top: calc(1px + ${theme('inset.2')});
${tw`sw-absolute`}
${tw`sw-truncate`};
&.is-placeholder {
- color: ${themeColor('inputPlaceholder')};
+ color: var(--echoes-color-text-placeholder);
}
&.is-disabled {
*/
import styled from '@emotion/styled';
import tw from 'twin.macro';
-import { themeColor, themeContrast } from '../../helpers/theme';
+import { themeColor } from '../../helpers/theme';
export const SubnavigationSubheading = styled.div`
${tw`sw-flex`}
${tw`sw-px-4 sw-pt-6 sw-pb-2`}
${tw`sw-w-full`}
- color: ${themeContrast('subnavigationSubheading')};
+ color: var(--echoes-color-text-subdued);
background-color: ${themeColor('subnavigationSubheading')};
`;
SubnavigationSubheading.displayName = 'SubnavigationSubheading';
.Toastify__close-button {
${tw`sw-pt-3 sw-pr-3`}
- color: ${themeColor('toastCloseIcon')};
+ color: var(--echoes-color-icon-subdued);
opacity: 1;
}
}),
placeholder: (base) => ({
...base,
- color: themeContrast('inputPlaceholder')({ theme }),
+ color: 'var(--echoes-color-text-placeholder)',
}),
};
}
import styled from '@emotion/styled';
import tw from 'twin.macro';
-import { themeColor } from '../../../helpers';
export const Note = styled.span`
- color: ${themeColor('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
${tw`sw-typo-default`}
`;
// Toasts
toast: COLORS.white,
toastText: secondary.darker,
- toastCloseIcon: secondary.dark,
toastErrorBorder: danger.light,
toastErrorIconBackground: danger.lightest,
dropdownMenuDisabled: COLORS.white,
dropdownMenuHeader: COLORS.white,
dropdownMenuDanger: danger.default,
- dropdownMenuSubTitle: secondary.dark,
// radio
radio: primary.default,
codeLineHover: secondary.light,
codeLineHighlighted: COLORS.blueGrey[100],
codeLineNewCodeUnderline: [...COLORS.indigo[300], 0.15],
- codeLineMetaHover: secondary.dark,
codeLineDuplication: secondary.default,
codeLineCovered: COLORS.green[300],
codeLineUncovered: danger.default,
codeLineLocationHighlighted: [...COLORS.blueGrey[200], 0.6],
codeLineEllipsis: COLORS.white,
codeLineEllipsisHover: secondary.light,
- codeLineEllipsisHoverContrast: secondary.dark,
codeLineIssueLocation: [...danger.lighter, 0.15],
codeLineIssueLocationSelected: [...danger.lighter, 0.5],
codeLineIssueMessageTooltip: secondary.darker,
inputSuccessFocus: COLORS.yellowGreen[400],
inputDisabled: secondary.light,
inputDisabledBorder: secondary.default,
- inputPlaceholder: secondary.dark,
// required input
inputRequired: danger.dark,
// tooltip
tooltipBackground: COLORS.blueGrey[600],
- tooltipSeparator: secondary.dark,
tooltipHighlight: secondary.default,
// avatar
bannerIcon: 'transparent',
bannerIconHover: [...COLORS.red[600], OPACITY_20_PERCENT],
bannerIconFocus: danger.default,
- discreetInteractiveIcon: secondary.dark,
destructiveIcon: 'transparent',
destructiveIconHover: danger.lightest,
destructiveIconFocus: danger.default,
iconSuccess: COLORS.green[600],
iconInfo: COLORS.blue[600],
iconStatus: COLORS.blueGrey[200],
- iconStatusResolved: secondary.dark,
iconNotificationsOn: COLORS.indigo[300],
iconHelperHint: COLORS.blueGrey[100],
iconRuleInheritanceOverride: danger.light,
facetItemSelected: COLORS.indigo[50],
facetItemSelectedHover: COLORS.indigo[100],
facetItemSelectedBorder: primary.light,
- facetItemLight: secondary.dark,
facetItemGraph: secondary.default,
facetKeyboardHint: COLORS.blueGrey[50],
facetToggleActive: COLORS.green[500],
// page
pageTitle: COLORS.blueGrey[700],
- pageContentLight: secondary.dark,
pageContent: secondary.darker,
pageContentDark: COLORS.blueGrey[600],
pageBlock: COLORS.white,
// selection card
selectionCardHeader: secondary.darker,
selectionCardDisabled: secondary.light,
- selectionCardDisabledText: secondary.dark,
selectionCardBorder: COLORS.blueGrey[100],
selectionCardBorderHover: COLORS.indigo[200],
selectionCardBorderSelected: primary.light,
// dropdown menu
dropdownMenu: secondary.darker,
- dropdownMenuHeader: secondary.dark,
// toggle buttons
toggle: secondary.darker,
codeLineNewCodeUnderline: COLORS.indigo[500],
codeLineCoveredUnderline: COLORS.green[700],
codeLineUncoveredUnderline: COLORS.red[700],
- codeLineEllipsisHover: secondary.dark,
codeLineLocationMarker: COLORS.red[900],
codeLineLocationMarkerSelected: COLORS.red[900],
codeLineIssueMessageTooltip: COLORS.blueGrey[25],
overviewCardErrorIcon: COLORS.red[500],
overviewCardSuccessIcon: COLORS.green[500],
- // breadcrumbs
- breadcrumb: secondary.dark,
-
// discreet select
discreetBackground: secondary.darker,
discreetHover: secondary.darker,
iconSeverityMajor: COLORS.white,
iconSeverityMinor: COLORS.white,
iconSeverityInfo: COLORS.white,
- iconStatusResolved: COLORS.white,
iconHelperHint: secondary.darker,
iconHelperHintRaised: COLORS.white,
subnavigation: secondary.darker,
subnavigationExecutionFlow: COLORS.blueGrey[700],
subnavigationHover: COLORS.blueGrey[700],
- subnavigationSubheading: secondary.dark,
-
- // footer
- footer: secondary.dark,
// page
pageBlock: secondary.darker,
iconSeverityDisabled: COLORS.white,
iconTypeDisabled: COLORS.white,
- // selection card
- selectionCardDisabled: secondary.dark,
-
// bubble charts
bubbleDefault: COLORS.blue[500],
import styled from '@emotion/styled';
import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
-import {
- FlagMessage,
- LAYOUT_VIEWPORT_MIN_WIDTH,
- PageContentFontWrapper,
- themeBorder,
- themeColor,
-} from 'design-system';
+import { FlagMessage, LAYOUT_VIEWPORT_MIN_WIDTH, themeBorder, themeColor } from 'design-system';
import React from 'react';
import { useIntl } from 'react-intl';
import InstanceMessage from '../../components/common/InstanceMessage';
return (
<StyledFooter className="sw-p-6" id="footer">
- <PageContentFontWrapper className="sw-typo-default sw-h-full sw-flex sw-flex-col sw-items-stretch">
+ <div className="sw-typo-default sw-h-full sw-flex sw-flex-col sw-items-stretch">
{appState?.productionDatabase === false && (
<FlagMessage className="sw-mb-4" id="evaluation_warning" variant="warning">
<p>
)}
</ul>
</div>
- </PageContentFontWrapper>
+ </div>
</StyledFooter>
);
}
const StyledFooter = styled.div`
+ color: var(--echoes-color-text-subdued);
background-color: ${themeColor('backgroundSecondary')};
border-top: ${themeBorder('default')};
box-sizing: border-box;
};
const BubbleChartWrapper = styled.div`
- color: ${themeColor('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
`;
const YAxis = styled.div`
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
-import { Badge, BranchIcon, themeBorder, themeContrast } from 'design-system';
+import { Badge, BranchIcon, themeBorder } from 'design-system';
import * as React from 'react';
import { ComponentQualifier } from '~sonar-aligned/types/component';
import { translate, translateWithParameters } from '../../../helpers/l10n';
}
const DivStyled = styled.div`
- color: ${themeContrast('breadcrumb')};
+ color: var(--echoes-color-text-subdued);
&:not(:last-child) {
border-bottom: ${themeBorder('default')};
}
`;
const ExpandButton = styled(BareButton)`
- color: ${themeContrast('subnavigationSubheading')};
+ color: var(--echoes-color-text-subdued);
border-bottom: ${themeBorder('default', 'currentColor')};
`;
}
const IssueInfo = styled.div`
- color: ${themeContrast('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
.active &,
:hover & {
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
-import {
- BareButton,
- ExecutionFlowIcon,
- SubnavigationItem,
- themeColor,
- themeContrast,
-} from 'design-system';
+import { BareButton, ExecutionFlowIcon, SubnavigationItem, themeColor } from 'design-system';
import React, { useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import SingleFileLocationNavigator from '../../../components/locations/SingleFileLocationNavigator';
`;
const StyledHotspotInfo = styled.div`
- color: ${themeContrast('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
`;
const StyledSeparator = styled.div`
<Table
columnCount={COLUMNS}
noHeaderTopBorder
- style={{ color: themeColor('dropdownMenuSubTitle')({ theme }) }}
+ style={{ color: 'var(--echoes-color-text-subdued)' }}
>
{addSeparator && <TableSeparator />}
{events?.length > 0 && (
import styled from '@emotion/styled';
import { Button } from '@sonarsource/echoes-react';
import classNames from 'classnames';
-import { Spinner, themeColor } from 'design-system';
+import { Spinner } from 'design-system';
import * as React from 'react';
import { formatMeasure } from '~sonar-aligned/helpers/measures';
import { MetricType } from '~sonar-aligned/types/metrics';
}
const StyledDiv = styled.div`
- color: ${themeColor('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
margin-top: 1rem /* 16px */;
`;
*/
import styled from '@emotion/styled';
import classNames from 'classnames';
-import { Badge, CommentIcon, SeparatorCircleIcon, themeColor } from 'design-system';
+import { Badge, CommentIcon, SeparatorCircleIcon } from 'design-system';
import * as React from 'react';
import { translate, translateWithParameters } from '../../../helpers/l10n';
import { isDefined } from '../../../helpers/types';
}
const IssueMetaListItem = styled.li`
- color: ${themeColor('pageContentLight')};
+ color: var(--echoes-color-text-subdued);
`;
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import styled from '@emotion/styled';
-import {
- FlagMessage,
- PageContentFontWrapper,
- RadioButton,
- SelectionCard,
- themeColor,
-} from 'design-system';
+import { FlagMessage, PageContentFontWrapper, RadioButton, SelectionCard } from 'design-system';
import { noop } from 'lodash';
import * as React from 'react';
import { getNewCodeDefinition } from '../../api/newCodeDefinition';
}
const StyledGlobalSettingWrapper = styled.div<{ selected: boolean }>`
- color: ${({ selected }) => (selected ? 'inherit' : themeColor('selectionCardDisabledText'))};
+ color: ${({ selected }) => (selected ? 'inherit' : 'var(--echoes-color-text-subdued)')};
`;
const LineNumberStyled = styled.div`
&:hover {
- color: ${themeColor('codeLineMetaHover')};
+ color: var(--echoes-color-text-subdued);
}
&:focus-visible {
projects / sonarqube.git / commitdiff