diff options
| author | Jeremy Davis <jeremy.davis@sonarsource.com> | 2024-09-20 10:03:29 +0200 |
|---|---|---|
| committer | sonartech <sonartech@sonarsource.com> | 2024-09-24 20:03:04 +0000 |
| commit | a4c4684f7779c4223e8100a4beccbd24f5a0d0c3 (patch) | |
| tree | 6ddd16fc75b6fda3e734e9d8a000fc494c390e2b /server | |
| parent | 88d60eb5226f7edd31f6df0f4ae2579844032dd7 (diff) | |
| download | sonarqube-a4c4684f7779c4223e8100a4beccbd24f5a0d0c3.tar.gz sonarqube-a4c4684f7779c4223e8100a4beccbd24f5a0d0c3.zip | |
SONAR-23093 New typography tailwind classes
Diffstat (limited to 'server')
279 files changed, 682 insertions, 810 deletions
diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx index f5f464b7fa1..dee353256f2 100644 --- a/server/sonar-web/design-system/src/components/Accordion.tsx +++ b/server/sonar-web/design-system/src/components/Accordion.tsx @@ -83,7 +83,7 @@ const accordionStyle = (props: ThemedProps) => css` outline 0.2s ease; & > button { - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} } ${tw`sw-rounded-2`} ${tw`sw-overflow-hidden`} diff --git a/server/sonar-web/design-system/src/components/Banner.tsx b/server/sonar-web/design-system/src/components/Banner.tsx index f7053a03924..a53d34c4341 100644 --- a/server/sonar-web/design-system/src/components/Banner.tsx +++ b/server/sonar-web/design-system/src/components/Banner.tsx @@ -114,7 +114,7 @@ const BannerInner = styled.div` ${tw`sw-box-border`} ${tw`sw-flex sw-items-center sw-justify-between sw-gap-3`} ${tw`sw-px-4`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} `; const BannerCloseIcon = styled(InteractiveIconBase)<{ diff --git a/server/sonar-web/design-system/src/components/BarChart.tsx b/server/sonar-web/design-system/src/components/BarChart.tsx index 71a5e4d8828..5b15de8dafe 100644 --- a/server/sonar-web/design-system/src/components/BarChart.tsx +++ b/server/sonar-web/design-system/src/components/BarChart.tsx @@ -96,7 +96,7 @@ function Xvalues<T>( return ( <BarChartTick - className="sw-body-sm sw-cursor-pointer" + className="sw-typo-default sw-cursor-pointer" dy="-0.5em" // eslint-disable-next-line react/no-array-index-key key={index} diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx index 5d981c9ce65..909515ccd40 100644 --- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx +++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx @@ -179,7 +179,7 @@ export function BreadcrumbsFullWidth(props: Omit<Props, 'innerRef' | 'maxWidth'> const BreadcrumbWrapper = styled.nav` ${tw`sw-flex sw-items-center`} ${tw`sw-truncate`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} color: ${themeContrast('breadcrumb')}; background-color: ${themeColor('breadcrumb')}; diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index bdca3c8f6a7..f398cd08252 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx @@ -367,7 +367,7 @@ export function BubbleChart<T>(props: BubbleChartProps<T>) { <div className="sw-flex sw-items-center sw-justify-end sw-h-control sw-mb-4"> <Tooltip content={zoomTooltipText}> <span> - <Note className="sw-body-sm-highlight">{zoomLabel}</Note> + <Note className="sw-typo-semibold">{zoomLabel}</Note> {': '} {zoomLevelLabel} </span> @@ -444,7 +444,7 @@ const BubbleChartGrid = styled.line` `; const BubbleChartTick = styled.text` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-select-none`} fill: ${themeColor('pageContentLight')}; text-anchor: var(--align); diff --git a/server/sonar-web/design-system/src/components/CodeSnippet.tsx b/server/sonar-web/design-system/src/components/CodeSnippet.tsx index 6ca4d79d813..931031b855a 100644 --- a/server/sonar-web/design-system/src/components/CodeSnippet.tsx +++ b/server/sonar-web/design-system/src/components/CodeSnippet.tsx @@ -102,7 +102,7 @@ const Wrapper = styled.div` const StyledClipboardButton = styled(ClipboardButton)` ${tw`sw-select-none`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-top-6 sw-right-6`} ${tw`sw-absolute`} diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx index c8027c1fc24..50a4cbb9d25 100644 --- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx +++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx @@ -303,7 +303,7 @@ export const DropdownMenuWrapper = styled.ul` ${tw`sw-box-border`}; ${tw`sw-min-w-input-small`} ${tw`sw-py-2`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} &:focus { outline: none; @@ -319,7 +319,7 @@ const itemStyle = (props: ThemedProps) => css` transition: none; ${tw`sw-flex sw-items-center`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-box-border`} ${tw`sw-w-full`} ${tw`sw-text-left`} diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx index f92d58c30a0..22c4e344ce1 100644 --- a/server/sonar-web/design-system/src/components/FacetBox.tsx +++ b/server/sonar-web/design-system/src/components/FacetBox.tsx @@ -204,7 +204,7 @@ const Header = styled.div` const HeaderTitle = styled.span<{ disabled?: boolean; }>` - ${tw`sw-body-sm-highlight`}; + ${tw`sw-typo-semibold`}; color: ${({ disabled }) => disabled ? themeColor('facetHeaderDisabled') : themeColor('facetHeader')}; diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx index 91e258c9f3e..761cecb2b8a 100644 --- a/server/sonar-web/design-system/src/components/FacetItem.tsx +++ b/server/sonar-web/design-system/src/components/FacetItem.tsx @@ -102,14 +102,14 @@ BaseFacetItem.displayName = 'FacetItem'; // so that tests don't see the obfuscat export const FacetItem = styled(BaseFacetItem)``; const StyledButton = styled(ButtonSecondary)<{ active?: boolean; small?: boolean }>` - ${tw`sw-body-sm`}; + ${tw`sw-typo-default`}; ${tw`sw-box-border`}; ${tw`sw-h-7`}; ${tw`sw-px-1`}; ${tw`sw-rounded-1`}; ${tw`sw-w-full`}; - ${({ small }) => (small ? tw`sw-body-xs sw-pr-0` : '')}; + ${({ small }) => (small ? tw`sw-typo-sm sw-pr-0` : '')}; --background: ${({ active }) => (active ? themeColor('facetItemSelected') : 'transparent')}; --backgroundHover: ${({ active }) => (active ? themeColor('facetItemSelected') : 'transparent')}; diff --git a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx index bf35fcfd35d..3704dff64f3 100644 --- a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx +++ b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx @@ -24,7 +24,7 @@ import { ButtonProps, DangerButtonSecondary } from '../sonar-aligned/components/ import { ChevronRightIcon } from './icons/ChevronRightIcon'; const StyledFailedQGConditionLink = styled(DangerButtonSecondary)` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-h-7`} ${tw`sw-pl-2`} ${tw`sw-pr-1`} diff --git a/server/sonar-web/design-system/src/components/FlowStep.tsx b/server/sonar-web/design-system/src/components/FlowStep.tsx index 0803b7d7ce1..1c4ed82be74 100644 --- a/server/sonar-web/design-system/src/components/FlowStep.tsx +++ b/server/sonar-web/design-system/src/components/FlowStep.tsx @@ -49,7 +49,7 @@ export function FlowStep(props: Props) { const StyledLink = styled(BaseLink)` ${tw`sw-p-1 sw-rounded-1/2`} ${tw`sw-flex sw-items-center sw-flex-wrap sw-gap-2`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} color: ${themeColor('pageContent')}; border-bottom: none; diff --git a/server/sonar-web/design-system/src/components/Histogram.tsx b/server/sonar-web/design-system/src/components/Histogram.tsx index b054114ef41..1aba9da6317 100644 --- a/server/sonar-web/design-system/src/components/Histogram.tsx +++ b/server/sonar-web/design-system/src/components/Histogram.tsx @@ -138,7 +138,7 @@ export class Histogram extends React.PureComponent<Props> { } const HistogramTick = styled.text` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} fill: ${themeColor('pageContentLight')}; ${TooltipWrapper} & { diff --git a/server/sonar-web/design-system/src/components/HtmlFormatter.tsx b/server/sonar-web/design-system/src/components/HtmlFormatter.tsx index dd61152a607..84377e23e21 100644 --- a/server/sonar-web/design-system/src/components/HtmlFormatter.tsx +++ b/server/sonar-web/design-system/src/components/HtmlFormatter.tsx @@ -22,12 +22,12 @@ import tw from 'twin.macro'; import { themeBorder, themeColor } from '../helpers'; export const HtmlFormatter = styled.div` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} a { color: ${themeColor('linkDefault')}; border-bottom: ${themeBorder('default', 'linkDefault')}; - ${tw`sw-no-underline sw-body-sm-highlight`}; + ${tw`sw-no-underline sw-typo-semibold`}; &:visited { color: ${themeColor('linkDefault')}; @@ -54,7 +54,7 @@ export const HtmlFormatter = styled.div` h2, h3 { color: ${themeColor('pageContentDark')}; - ${tw`sw-body-md-highlight`} + ${tw`sw-typo-lg-semibold`} ${tw`sw-my-6`} } @@ -62,7 +62,7 @@ export const HtmlFormatter = styled.div` h5, h6 { color: ${themeColor('pageContentDark')}; - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-mt-6 sw-mb-2`} } @@ -128,7 +128,7 @@ export const HtmlFormatter = styled.div` th { ${tw`sw-py-1 sw-px-3`} - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-text-center`} background-color: ${themeColor('backgroundPrimary')}; border: ${themeBorder('default')}; diff --git a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx index b4cb668ec0d..72895b5662c 100644 --- a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx +++ b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx @@ -48,7 +48,7 @@ export function IllustratedSelectionCard(props: Props) { const Note = styled.span` color: ${themeColor('pageContentLight')}; - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} `; const ImageContainer = styled.div` diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx index 5138a25c643..5da1315a8a4 100644 --- a/server/sonar-web/design-system/src/components/Link.tsx +++ b/server/sonar-web/design-system/src/components/Link.tsx @@ -186,7 +186,7 @@ export const NakedLink = styled(BaseLink)` /** @deprecated Use either Link or LinkStandalone from Echoes instead. */ export const DrilldownLink = styled(StyledBaseLink)` - ${tw`sw-heading-lg`} + ${tw`sw-heading-xl`} ${tw`sw-tracking-tight`} ${tw`sw-whitespace-nowrap`} diff --git a/server/sonar-web/design-system/src/components/LocationMarker.tsx b/server/sonar-web/design-system/src/components/LocationMarker.tsx index 979ae3aeebe..fb7dfd480a0 100644 --- a/server/sonar-web/design-system/src/components/LocationMarker.tsx +++ b/server/sonar-web/design-system/src/components/LocationMarker.tsx @@ -55,7 +55,7 @@ export const LocationMarker = forwardRef<HTMLDivElement, Props>(InternalLocation export const StyledMarker = styled.div` ${tw`sw-flex sw-grow-0 sw-items-center sw-justify-center`} - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-rounded-1/2`} height: 1.125rem; diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx index 09740e5e417..35666e032cd 100644 --- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx +++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx @@ -98,7 +98,7 @@ export function DisabledTabLink(props: { label: string; overlay: React.ReactNode // Styling for <NavLink> due to its special className function, it conflicts when styled with Emotion. const NavBarTabLinkWrapper = styled.li` - ${tw`sw-body-md`}; + ${tw`sw-typo-lg`}; & > a { ${tw`sw-pb-3`}; ${tw`sw-block`}; @@ -122,13 +122,13 @@ const NavBarTabLinkWrapper = styled.li` & > a.active > span[data-text], & > a[aria-expanded='true'] > span[data-text], & > a:active > span { - ${tw`sw-body-md-highlight`}; + ${tw`sw-typo-lg-semibold`}; } // This is a hack to have a link take the space of the bold font, so when active other ones are not moving & > a > span[data-text]::before { ${tw`sw-block`}; - ${tw`sw-body-md-highlight`}; + ${tw`sw-typo-lg-semibold`}; ${tw`sw-h-0`}; ${tw`sw-overflow-hidden`}; ${tw`sw-invisible`}; diff --git a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx index 58f701d369d..7ebad7a3529 100644 --- a/server/sonar-web/design-system/src/components/NewCodeLegend.tsx +++ b/server/sonar-web/design-system/src/components/NewCodeLegend.tsx @@ -34,7 +34,7 @@ export const NewCodeLegendIcon = styled.span` const NewCodeLegendText = styled.span` ${tw`sw-align-middle`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-ml-2`} color: ${themeColor('graphCursorLineColor')}; `; diff --git a/server/sonar-web/design-system/src/components/Pill.tsx b/server/sonar-web/design-system/src/components/Pill.tsx index 63deaf24560..b6d40d221c7 100644 --- a/server/sonar-web/design-system/src/components/Pill.tsx +++ b/server/sonar-web/design-system/src/components/Pill.tsx @@ -84,7 +84,7 @@ export const Pill = forwardRef<HTMLButtonElement, Readonly<PillProps>>( ); const reusedStyles = css` - ${tw`sw-body-xs`}; + ${tw`sw-typo-sm`}; ${tw`sw-w-fit`}; ${tw`sw-inline-block`}; ${tw`sw-whitespace-nowrap`}; diff --git a/server/sonar-web/design-system/src/components/SelectionCard.tsx b/server/sonar-web/design-system/src/components/SelectionCard.tsx index 82317246792..f81c23b68f2 100644 --- a/server/sonar-web/design-system/src/components/SelectionCard.tsx +++ b/server/sonar-web/design-system/src/components/SelectionCard.tsx @@ -153,7 +153,7 @@ const StyledContent = styled.div` `; const StyledRecommended = styled.div` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-py-2 sw-px-4`} ${tw`sw-box-border`} ${tw`sw-rounded-b-2`} @@ -172,7 +172,7 @@ const StyledRecommendedIcon = styled(RecommendedIcon)` const StyledLabel = styled.label` ${tw`sw-flex`} ${tw`sw-mb-3 sw-gap-2`} - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} color: ${themeColor('selectionCardHeader')}; cursor: inherit; diff --git a/server/sonar-web/design-system/src/components/SpotlightTour.tsx b/server/sonar-web/design-system/src/components/SpotlightTour.tsx index a5481d261f0..caa21689bb6 100644 --- a/server/sonar-web/design-system/src/components/SpotlightTour.tsx +++ b/server/sonar-web/design-system/src/components/SpotlightTour.tsx @@ -140,7 +140,7 @@ function TooltipComponent({ return ( <StyledPopupWrapper - className="sw-p-3 sw-body-sm sw-relative sw-border-0" + className="sw-p-3 sw-typo-default sw-relative sw-border-0" onClick={handleClick} style={{ width }} zLevel={PopupZLevel.Absolute} @@ -161,7 +161,7 @@ function TooltipComponent({ }, 100); }} > - <strong className="sw-body-md-highlight sw-mb-2">{step.title}</strong> + <strong className="sw-typo-lg-semibold sw-mb-2">{step.title}</strong> <WrapperButton className="sw-w-[30px] sw-h-[30px] sw--mt-2 sw--mr-2 sw-flex sw-justify-center" {...skipProps} diff --git a/server/sonar-web/design-system/src/components/Tabs.tsx b/server/sonar-web/design-system/src/components/Tabs.tsx index 21be271c780..e216eb2b33b 100644 --- a/server/sonar-web/design-system/src/components/Tabs.tsx +++ b/server/sonar-web/design-system/src/components/Tabs.tsx @@ -113,7 +113,7 @@ const TabButton = styled(BareButton)<{ ${tw`sw-relative`}; ${tw` sw-mb-[-1px]`}; ${tw`sw-flex sw-items-center`}; - ${(props) => (props.large ? tw`sw-body-md sw-px-6 sw-py-4` : tw`sw-body-sm sw-px-3 sw-py-1`)} + ${(props) => (props.large ? tw`sw-typo-lg sw-px-6 sw-py-4` : tw`sw-typo-default sw-px-3 sw-py-1`)} ${tw`sw-font-semibold`}; ${tw`sw-rounded-t-1`}; diff --git a/server/sonar-web/design-system/src/components/Text.tsx b/server/sonar-web/design-system/src/components/Text.tsx index 7b80879f1fa..08437dcce22 100644 --- a/server/sonar-web/design-system/src/components/Text.tsx +++ b/server/sonar-web/design-system/src/components/Text.tsx @@ -163,7 +163,7 @@ export const LightLabel = styled.span` export const DarkLabel = styled.label` color: ${themeColor('pageContentDark')}; - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} `; /** @deprecated Use Text from Echoes instead. @@ -177,5 +177,5 @@ export const LightPrimary = styled.span` export const Highlight = styled.strong` color: ${themeColor('pageContentDark')}; - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} `; diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx index 2ce932bdf20..58862d1a5d0 100644 --- a/server/sonar-web/design-system/src/components/Tooltip.tsx +++ b/server/sonar-web/design-system/src/components/Tooltip.tsx @@ -466,7 +466,7 @@ export const TooltipWrapper = styled.div` ${tw`sw-block`}; ${tw`sw-box-border`}; ${tw`sw-h-auto`}; - ${tw`sw-body-sm`}; + ${tw`sw-typo-default`}; &.top { margin-top: -${ARROW_MARGIN}px; @@ -494,7 +494,8 @@ const TooltipWrapperArrow = styled.div` ${tw`sw-w-0`}; ${tw`sw-h-0`}; ${tw`sw-border-solid`}; - ${tw`sw-border-transparent`}; + border-color: var(--echoes-color-support-transparent); + ${TooltipWrapper}.top & { border-width: ${ARROW_HEIGHT}px ${ARROW_WIDTH}px 0; border-top-color: ${themeColor('tooltipBackground')}; diff --git a/server/sonar-web/design-system/src/components/TutorialStep.tsx b/server/sonar-web/design-system/src/components/TutorialStep.tsx index c03575a2398..12d050e8890 100644 --- a/server/sonar-web/design-system/src/components/TutorialStep.tsx +++ b/server/sonar-web/design-system/src/components/TutorialStep.tsx @@ -38,7 +38,7 @@ export function TutorialStep({ children, title, stepNumber }: Props) { const StepDetails = styled.div` h3 { - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-my-2`} color: ${themeColor('pageContent')}; @@ -47,7 +47,7 @@ const StepDetails = styled.div` &, h4, h5 { - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-mb-2`} color: ${themeColor('pageContent')}; @@ -55,7 +55,7 @@ const StepDetails = styled.div` `; const Title = styled.h2` - ${tw`sw-body-md-highlight`} + ${tw`sw-typo-lg-semibold`} ${tw`sw-inline-block`} ${tw`sw-mb-4`} @@ -74,7 +74,7 @@ const Step = styled.li<{ stepNumber?: number }>` ${tw`sw-inline-block`} ${tw`sw-align-middle`} - ${tw`sw-heading-md`} + ${tw`sw-heading-lg`} ${tw`sw-mr-2 sw--mt-1`} } diff --git a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx index 8a50ced11bc..f4ba243fd5d 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Banner-test.tsx @@ -44,7 +44,7 @@ it('should render with close button', async () => { function setupWithProps(props: Partial<FCProps<typeof Banner>> = {}) { return renderWithContext( <Banner {...props} variant="warning"> - <Note className="sw-body-sm">{props.children ?? 'Test Message'}</Note> + <Note className="sw-typo-default">{props.children ?? 'Test Message'}</Note> </Banner>, ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx b/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx index da35487386d..c7929c29baa 100644 --- a/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/NewCodeLegend-test.tsx @@ -26,8 +26,7 @@ it('should render NewCodeLegend', () => { render(<NewCodeLegend text="the text" />); expect(screen.getByText('the text')).toHaveStyle({ - 'font-size': tailwindBaseConfig.theme.fontSize.sm[0], - 'line-height': tailwindBaseConfig.theme.fontSize.sm[1], + font: 'var(--echoes-typography-text-default-regular)', 'margin-left': tailwindBaseConfig.theme.spacing[2], }); }); diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap index 838e266cad2..6b27c088c74 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap @@ -35,10 +35,7 @@ exports[`should highlight code content correctly 1`] = ` -ms-flex-align: center; align-items: center; height: 2.25rem; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; + font: var(--echoes-typography-text-default-semi-bold); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; @@ -54,10 +51,7 @@ exports[`should highlight code content correctly 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); right: 1.5rem; top: 1.5rem; position: absolute; @@ -96,10 +90,7 @@ exports[`should highlight code content correctly 1`] = ` } .emotion-6 code { - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; + font: var(--echoes-typography-code-default); background: rgb(252,252,253); color: rgb(51,53,60); } @@ -121,10 +112,7 @@ exports[`should highlight code content correctly 1`] = ` } .emotion-6 .hljs-comment { - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-style: italic; + font: var(--echoes-typography-code-comment); color: rgb(109,111,119); } @@ -249,10 +237,7 @@ exports[`should show full size when multiline with no editing 1`] = ` -ms-flex-align: center; align-items: center; height: 2.25rem; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; + font: var(--echoes-typography-text-default-semi-bold); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; @@ -268,10 +253,7 @@ exports[`should show full size when multiline with no editing 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); right: 1.5rem; top: 1.5rem; position: absolute; @@ -310,10 +292,7 @@ exports[`should show full size when multiline with no editing 1`] = ` } .emotion-6 code { - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; + font: var(--echoes-typography-code-default); background: rgb(252,252,253); color: rgb(51,53,60); } @@ -335,10 +314,7 @@ exports[`should show full size when multiline with no editing 1`] = ` } .emotion-6 .hljs-comment { - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-style: italic; + font: var(--echoes-typography-code-comment); color: rgb(109,111,119); } @@ -465,10 +441,7 @@ exports[`should show reduced size when single line with no editing 1`] = ` -ms-flex-align: center; align-items: center; height: 2.25rem; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 600; + font: var(--echoes-typography-text-default-semi-bold); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; @@ -484,10 +457,7 @@ exports[`should show reduced size when single line with no editing 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); right: 1.5rem; top: 1.5rem; position: absolute; @@ -528,10 +498,7 @@ exports[`should show reduced size when single line with no editing 1`] = ` } .emotion-6 code { - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; + font: var(--echoes-typography-code-default); background: rgb(252,252,253); color: rgb(51,53,60); } @@ -553,10 +520,7 @@ exports[`should show reduced size when single line with no editing 1`] = ` } .emotion-6 .hljs-comment { - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-style: italic; + font: var(--echoes-typography-code-comment); color: rgb(109,111,119); } diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap index 8842fe3afeb..8e31fe80996 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/Histogram-test.tsx.snap @@ -53,10 +53,7 @@ exports[`renders correctly with yValues 1`] = ` } .emotion-2 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); fill: rgb(106,117,144); } @@ -142,10 +139,7 @@ exports[`renders correctly with yValues and yTicks 1`] = ` } .emotion-2 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); fill: rgb(106,117,144); } @@ -261,10 +255,7 @@ exports[`renders correctly with yValues, yTicks, and yTooltips 1`] = ` } .emotion-2 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); fill: rgb(106,117,144); } diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap index 4b2719e5a41..7e61c609169 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineFinding-test.tsx.snap @@ -24,10 +24,7 @@ exports[`should render correctly as button 1`] = ` box-sizing: border-box; padding-top: 0.75rem; padding-bottom: 0.75rem; - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 1rem; - line-height: 1.5rem; - font-weight: 600; + font: var(--echoes-typography-text-large-semi-bold); cursor: default; border: 1px solid rgb(253,162,155); color: rgb(62,67,87); diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap index ca308966a94..bb8bcca7efc 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/LineWrapper-test.tsx.snap @@ -9,10 +9,7 @@ exports[`should render with correct styling 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 400; + font: var(--echoes-typography-code-default); } <tbody> diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx index 3d30a04bb25..42a89edee41 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx @@ -86,7 +86,7 @@ const LineFindingStyled = styled(BareButton)<{ selected: boolean }>` ${tw`sw-w-full`} ${tw`sw-box-border`} ${(props) => (props.selected ? tw`sw-py-3` : tw`sw-py-2`)}; - ${(props) => (props.selected ? tw`sw-body-md-highlight` : tw`sw-body-sm`)}; + ${(props) => (props.selected ? tw`sw-typo-lg-semibold` : tw`sw-typo-default`)}; ${(props) => (props.selected ? tw`sw-cursor-default` : tw`sw-cursor-pointer`)}; border: ${(props) => diff --git a/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx b/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx index 94517bc24ee..37db11650d7 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineMarker.tsx @@ -59,7 +59,7 @@ function LineMarkerFunc( const Message = styled.div` ${tw`sw-absolute`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-rounded-1/2`} ${tw`sw-px-1`} ${tw`sw-left-0`} diff --git a/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx b/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx index c576954ab47..a4213b78d44 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineStyles.tsx @@ -25,7 +25,7 @@ import { BareButton } from '../../sonar-aligned'; export const SCMHighlight = styled.h6` color: ${themeColor('tooltipHighlight')}; - ${tw`sw-body-sm-highlight`}; + ${tw`sw-typo-semibold`}; ${tw`sw-text-right`}; ${tw`sw-min-w-[6rem]`}; ${tw`sw-mr-4`}; diff --git a/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx b/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx index cf56db418b3..fe75c4bc716 100644 --- a/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx +++ b/server/sonar-web/design-system/src/components/icons/RequiredIcon.tsx @@ -26,7 +26,7 @@ export function RequiredIcon(props: React.ComponentPropsWithoutRef<'em'>) { } export const StyledEm = styled.em` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-not-italic`} ${tw`sw-ml-2`} color: ${themeColor('inputRequired')}; diff --git a/server/sonar-web/design-system/src/components/input/DatePicker.tsx b/server/sonar-web/design-system/src/components/input/DatePicker.tsx index 89d4c415549..52b31445c44 100644 --- a/server/sonar-web/design-system/src/components/input/DatePicker.tsx +++ b/server/sonar-web/design-system/src/components/input/DatePicker.tsx @@ -157,7 +157,7 @@ export class DatePicker extends React.PureComponent<Props, State> { <div className={classNames('sw-p-2')}> <DayPicker captionLayout="dropdown-buttons" - className="sw-body-sm" + className="sw-typo-default" components={{ Caption: CustomCalendarNavigation, }} diff --git a/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx b/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx index 2b85c6dd65f..26183140f8b 100644 --- a/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx +++ b/server/sonar-web/design-system/src/components/input/DiscreetSelect.tsx @@ -81,7 +81,7 @@ const StyledSelect = styled(InputSelect)` ${tw`sw-p-0`}; ${tw`sw-cursor-pointer`}; ${tw`sw-flex sw-items-center`}; - ${tw`sw-body-sm`}; + ${tw`sw-typo-default`}; ${tw`sw-select-none`}; &:hover { diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx index 3690c438216..ecd47e6d768 100644 --- a/server/sonar-web/design-system/src/components/input/InputField.tsx +++ b/server/sonar-web/design-system/src/components/input/InputField.tsx @@ -93,7 +93,7 @@ const baseStyle = (props: ThemedProps) => css` width: var(--inputSize); transition: border-color 0.2s ease; - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-box-border`} ${tw`sw-rounded-2`} ${tw`sw-px-3 sw-py-2`} diff --git a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx index 39fbfece029..83e3aeb24eb 100644 --- a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx +++ b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx @@ -39,7 +39,7 @@ export function InputMultiSelect(props: Props) { return ( <StyledWrapper - className={classNames('sw-flex sw-justify-between sw-px-2 sw-body-sm', className)} + className={classNames('sw-flex sw-justify-between sw-px-2 sw-typo-default', className)} id={id} onClick={props.onClick} role="combobox" diff --git a/server/sonar-web/design-system/src/components/input/InputSearch.tsx b/server/sonar-web/design-system/src/components/input/InputSearch.tsx index 8e88c655fc1..9e9d5d76915 100644 --- a/server/sonar-web/design-system/src/components/input/InputSearch.tsx +++ b/server/sonar-web/design-system/src/components/input/InputSearch.tsx @@ -210,7 +210,7 @@ export const StyledInputWrapper = styled.div` ${tw`sw-rounded-2`} ${tw`sw-box-border`} ${tw`sw-pl-10`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-w-full sw-h-control`} &::placeholder { @@ -259,7 +259,7 @@ export const StyledNote = styled.span` ${tw`sw-absolute`} ${tw`sw-left-12 sw-right-10`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-text-right`} ${tw`sw-truncate`} ${tw`sw-pointer-events-none`} diff --git a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx index f8a0ebc09a0..dbfcfb1854f 100644 --- a/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx +++ b/server/sonar-web/design-system/src/components/input/SearchSelectDropdownControl.tsx @@ -118,7 +118,7 @@ const StyledControl = styled.div` ${tw`sw-rounded-2`}; ${tw`sw-box-border`}; ${tw`sw-px-3`}; - ${tw`sw-body-sm`}; + ${tw`sw-typo-default`}; ${tw`sw-h-control`}; ${tw`sw-leading-6`}; ${tw`sw-cursor-pointer`}; diff --git a/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx b/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx index 534425515e6..52261123f24 100644 --- a/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx +++ b/server/sonar-web/design-system/src/components/lists/NumberedListItem.tsx @@ -34,7 +34,7 @@ export const NumberedListItem = styled.li` border-radius: 20px; content: counter(li); - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-p-1`} ${tw`sw-mr-3`} ${tw`sw-inline-block`} diff --git a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx index fae7eda53cf..4bb9f68df7a 100644 --- a/server/sonar-web/design-system/src/components/modal/ModalBody.tsx +++ b/server/sonar-web/design-system/src/components/modal/ModalBody.tsx @@ -40,7 +40,7 @@ export function ModalBody({ children, isScrollable = true, isOverflowVisible = f } const StyledMain = styled.div` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-px-3`} // to accomodate a possible scrollbar ${tw`-sw-mx-3`} ${tw`sw-my-12`} diff --git a/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx b/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx index 113c7351864..2355e5c1ef5 100644 --- a/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx +++ b/server/sonar-web/design-system/src/components/modal/ModalHeader.tsx @@ -37,14 +37,14 @@ export function ModalHeader({ description, title }: Props) { } const Description = styled.p` - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-mt-2`} color: ${themeColor('pageContent')}; `; const Title = styled.h2` - ${tw`sw-heading-lg`} + ${tw`sw-heading-xl`} color: ${themeColor('pageTitle')}; `; diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap index ecd2e830c0d..b2f36f6b060 100644 --- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalBody-test.tsx.snap @@ -2,10 +2,7 @@ exports[`renders with children 1`] = ` .emotion-0 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.75rem; diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap index 96ff38fe463..1e7ed6edeb5 100644 --- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalHeader-test.tsx.snap @@ -2,10 +2,7 @@ exports[`should render with title 1`] = ` .emotion-0 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 1.5rem; - line-height: 1.75rem; - font-weight: 600; + font: var(--echoes-typography-heading-xlarge); color: rgb(29,33,47); } @@ -23,18 +20,12 @@ exports[`should render with title 1`] = ` exports[`should render with title and description 1`] = ` .emotion-0 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 1.5rem; - line-height: 1.75rem; - font-weight: 600; + font: var(--echoes-typography-heading-xlarge); color: rgb(29,33,47); } .emotion-2 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); margin-top: 0.5rem; color: rgb(62,67,87); } @@ -58,10 +49,7 @@ exports[`should render with title and description 1`] = ` exports[`should use the default title if not provided 1`] = ` .emotion-0 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 1.5rem; - line-height: 1.75rem; - font-weight: 600; + font: var(--echoes-typography-heading-xlarge); color: rgb(29,33,47); } diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx index ded1108c55f..8e68df56f3f 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx +++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx @@ -82,7 +82,7 @@ export function SubnavigationAccordion(props: Props) { const SubnavigationAccordionItem = styled(BareButton)` ${tw`sw-flex sw-items-center sw-justify-between`} ${tw`sw-box-border`} - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-p-4`} ${tw`sw-w-full`} ${tw`sw-cursor-pointer`} diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx index fc1008ff91f..0c24195963d 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx +++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationHeading.tsx @@ -24,7 +24,7 @@ import { themeColor, themeContrast } from '../../helpers/theme'; export const SubnavigationHeading = styled.div` ${tw`sw-flex sw-items-center sw-justify-between`} ${tw`sw-box-border`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-p-4`} ${tw`sw-w-full`} diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx index 1059fda1364..7372373aab2 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx +++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationItem.tsx @@ -68,7 +68,7 @@ export function SubnavigationLinkItem({ children, ...props }: NavLinkProps) { const ItemBaseStyle = (props: ThemedProps) => css` ${tw`sw-flex sw-items-center sw-justify-between`} ${tw`sw-box-border`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-py-4 sw-pr-4`} ${tw`sw-w-full`} ${tw`sw-cursor-pointer`} diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx index 1cf80e4e5e0..6b4ebff6bd3 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx +++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx @@ -24,7 +24,7 @@ import { themeColor, themeContrast } from '../../helpers/theme'; export const SubnavigationSubheading = styled.div` ${tw`sw-flex`} ${tw`sw-box-border`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-px-4 sw-pt-6 sw-pb-2`} ${tw`sw-w-full`} diff --git a/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx b/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx index 41d63e54447..ee77829bfa6 100644 --- a/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx +++ b/server/sonar-web/design-system/src/components/toast-message/__tests__/toast-utils-test.tsx @@ -33,7 +33,7 @@ it('should call react-toastify with the right args', () => { addGlobalErrorMessage(<span>error</span>, { position: 'top-left' }); expect(toast).toHaveBeenCalledWith( - <div className="fs-mask sw-body-sm sw-p-3 sw-pb-4" data-testid="global-message__ERROR"> + <div className="fs-mask sw-typo-default sw-p-3 sw-pb-4" data-testid="global-message__ERROR"> <span>error</span> </div>, { icon: <FlagErrorIcon />, type: 'error', position: 'top-left' }, @@ -42,7 +42,7 @@ it('should call react-toastify with the right args', () => { addGlobalSuccessMessage('it worked'); expect(toast).toHaveBeenCalledWith( - <div className="fs-mask sw-body-sm sw-p-3 sw-pb-4" data-testid="global-message__SUCCESS"> + <div className="fs-mask sw-typo-default sw-p-3 sw-pb-4" data-testid="global-message__SUCCESS"> it worked </div>, { icon: <FlagSuccessIcon />, type: 'success' }, diff --git a/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx b/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx index 4aba037b8a0..128ae48ce7c 100644 --- a/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx +++ b/server/sonar-web/design-system/src/components/toast-message/toast-utils.tsx @@ -45,7 +45,10 @@ export function dismissAllGlobalMessages() { function createToast(message: ReactNode, level: MessageLevel, overrides?: ToastOptions) { return toast( - <div className="fs-mask sw-body-sm sw-p-3 sw-pb-4" data-testid={`global-message__${level}`}> + <div + className="fs-mask sw-typo-default sw-p-3 sw-pb-4" + data-testid={`global-message__${level}`} + > {message} </div>, { diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx index 6b05991c12b..792f0a2c8dd 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessage.tsx @@ -146,7 +146,7 @@ export const StyledFlag = styled.div<{ ${tw`sw-overflow-auto`} ${tw`sw-text-left`} ${tw`sw-px-3 sw-py-2`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} color: ${themeContrast('flagMessageBackground')}; } `; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx index 6fe74085ab2..89c765fdb18 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/FlagMessageV2.tsx @@ -158,14 +158,14 @@ const IconWrapper = styled.div<{ `; const Title = styled.span` - ${tw`sw-body-md-highlight`} + ${tw`sw-typo-lg-semibold`} color: ${themeColor('flagMessageText')}; `; const StyledFlagContent = styled.div` ${tw`sw-pt-1/2`} ${tw`sw-overflow-auto`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} `; const DismissButton = styled.button<{ diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx index 6de60ff4b2e..8fee1ad857f 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/Table.tsx @@ -84,7 +84,7 @@ export function Table(props: Readonly<TableProps>) { {caption && ( <caption> - <div className="sw-py-4 sw-text-middle sw-flex sw-justify-center sw-body-sm-highlight"> + <div className="sw-py-4 sw-text-middle sw-flex sw-justify-center sw-typo-semibold"> {caption} </div> </caption> @@ -286,13 +286,13 @@ const StyledTable = styled.table<{ gridTemplate?: string }>` const CellComponentStyled = styled.td` color: ${themeColor('pageContent')}; ${tw`sw-items-center`} - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} ${tw`sw-py-4 sw-px-2`} ${tw`sw-align-middle`} thead > tr > & { color: ${themeColor('pageTitle')}; - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} } `; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx index d36d304732a..8c3a171086a 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx @@ -132,7 +132,7 @@ export const buttonStyle = (props: ThemedProps) => css` ${tw`sw-inline-flex sw-items-center`} ${tw`sw-h-control`} - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} ${tw`sw-py-2 sw-px-4`} ${tw`sw-rounded-2`} ${tw`sw-cursor-pointer`} diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx index 8ae52b955d5..279def52d0e 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Note.tsx @@ -25,5 +25,5 @@ import { themeColor } from '../../../helpers'; export const Note = styled.span` color: ${themeColor('pageContentLight')}; - ${tw`sw-body-sm`} + ${tw`sw-typo-default`} `; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx index 1abade832f7..30f71f3b4af 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/typography/Title.tsx @@ -25,7 +25,7 @@ import { themeColor } from '../../../helpers/theme'; /** @deprecated Use Heading from Echoes instead. */ export const Title = styled.h1` - ${tw`sw-heading-lg`} + ${tw`sw-heading-xl`} ${tw`sw-mb-4`} color: ${themeColor('pageTitle')}; `; @@ -33,7 +33,7 @@ export const Title = styled.h1` /** @deprecated Use Heading from Echoes instead. */ export const SubTitle = styled.h2` - ${tw`sw-heading-md`} + ${tw`sw-heading-lg`} ${tw`sw-mb-4`} color: ${themeColor('pageTitle')}; `; @@ -43,13 +43,13 @@ export const SubTitle = styled.h2` export const HeadingDark = styled.h2` color: ${themeColor('pageContentDark')}; - ${tw`sw-body-sm-highlight`} + ${tw`sw-typo-semibold`} `; /** @deprecated Use Heading from Echoes instead. */ export const SubHeading = styled.h3` - ${tw`sw-body-md-highlight`} + ${tw`sw-typo-lg-semibold`} ${tw`sw-mb-2`} color: ${themeColor('pageContent')}; `; diff --git a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx index 48b1869c56d..ddb3bbf1659 100644 --- a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx +++ b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx @@ -34,7 +34,7 @@ const COLUMNS = ['50%', '50%']; export default function FormattingHelp() { return ( - <PageContentFontWrapper className="sw-body-md sw-p-6 sw-h-screen"> + <PageContentFontWrapper className="sw-typo-lg sw-p-6 sw-h-screen"> <Helmet defer={false} title={translate('formatting.page')} /> <Title>Formatting Syntax</Title> <Table diff --git a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx index 88cc3c86170..cf98fb64906 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalFooter.tsx @@ -50,11 +50,11 @@ export default function GlobalFooter({ hideLoggedInInfo }: Readonly<GlobalFooter return ( <StyledFooter className="sw-p-6" id="footer"> - <PageContentFontWrapper className="sw-body-sm sw-h-full sw-flex sw-flex-col sw-items-stretch"> + <PageContentFontWrapper 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> - <span className="sw-body-md-highlight"> + <span className="sw-typo-lg-semibold"> {intl.formatMessage({ id: 'footer.production_database_warning' })} </span> diff --git a/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx b/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx index 6053ebd3de9..fec94ea941a 100644 --- a/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/NonAdminPagesContainer.tsx @@ -35,7 +35,7 @@ export default function NonAdminPagesContainer() { if (component && isApplication(component.qualifier) && !component.canBrowseAllChildProjects) { return ( <CenteredLayout - className="sw-py-8 sw-body-md sw-flex sw-flex-col sw-items-center" + className="sw-py-8 sw-typo-lg sw-flex sw-flex-col sw-items-center" id="code-page" > <FlagMessage className="it__alert-no-access-all-child-project sw-mt-10" variant="error"> diff --git a/server/sonar-web/src/main/js/app/components/NotFound.tsx b/server/sonar-web/src/main/js/app/components/NotFound.tsx index 2eb7ca4f6cf..80559d2dd77 100644 --- a/server/sonar-web/src/main/js/app/components/NotFound.tsx +++ b/server/sonar-web/src/main/js/app/components/NotFound.tsx @@ -26,7 +26,7 @@ export default function NotFound() { return ( <> <Helmet defaultTitle={translate('404_not_found')} defer={false} /> - <PageContentFontWrapper className="sw-body-md"> + <PageContentFontWrapper className="sw-typo-lg"> <CenteredLayout className="sw-flex sw-flex-col sw-items-center"> <Card className="sw-m-14 sw-w-abs-600"> <Title>{translate('page_not_found')}</Title> diff --git a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx index 565db26147f..a94b983f60b 100644 --- a/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx +++ b/server/sonar-web/src/main/js/app/components/PluginRiskConsent.tsx @@ -72,7 +72,7 @@ export function PluginRiskConsent(props: Readonly<PluginRiskConsentProps>) { <Helmet defer={false} title={translate('plugin_risk_consent.page')} /> <Card - className="sw-body-md sw-min-w-[500px] sw-mx-auto sw-w-[40%] sw-text-center" + className="sw-typo-lg sw-min-w-[500px] sw-mx-auto sw-w-[40%] sw-text-center" data-testid="plugin-risk-consent-page" > <Title className="sw-mb-4">{translate('plugin_risk_consent.title')}</Title> diff --git a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx index 9835794633f..7e669fc20a0 100644 --- a/server/sonar-web/src/main/js/app/components/ResetPassword.tsx +++ b/server/sonar-web/src/main/js/app/components/ResetPassword.tsx @@ -39,7 +39,7 @@ export interface ResetPasswordProps { export function ResetPassword({ currentUser }: Readonly<ResetPasswordProps>) { return ( <LargeCenteredLayout className="sw-h-screen sw-pt-10"> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <Helmet defer={false} title={translate('my_account.reset_password.page')} /> <div className="sw-flex sw-justify-center"> <div> diff --git a/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx b/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx index 63d1429414a..fca28a707dd 100644 --- a/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx +++ b/server/sonar-web/src/main/js/app/components/indexation/IndexationNotificationRenderer.tsx @@ -72,7 +72,7 @@ export default function IndexationNotificationRenderer(props: IndexationNotifica return ( <div className={type === undefined ? 'sw-hidden' : ''}> <StyledBanner - className="sw-body-sm sw-py-3 sw-px-4 sw-gap-4" + className="sw-typo-default sw-py-3 sw-px-4 sw-gap-4" type={type ?? IndexationNotificationType.Completed} aria-live="assertive" role="alert" diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx index 803a51eaddf..bcc5b4834a4 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavProjectBindingErrorNotif.tsx @@ -47,7 +47,7 @@ export default function ComponentNavProjectBindingErrorNotif( } return ( - <StyledBanner className="sw-body-sm sw-py-3 sw-px-4 sw-gap-4"> + <StyledBanner className="sw-typo-default sw-py-3 sw-px-4 sw-gap-4"> <FlagWarningIcon /> <FormattedMessage id="component_navigation.pr_deco.error_detected_X" values={{ action }} /> </StyledBanner> diff --git a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx index e66abae6eb9..c4387b5af82 100644 --- a/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx +++ b/server/sonar-web/src/main/js/app/components/promotion-notification/PromotionNotification.tsx @@ -52,7 +52,7 @@ export function PromotionNotification(props: CurrentUserContextInterface) { <Image alt="SonarQube + SonarLint" height={80} src="/images/sq-sl.svg" /> </div> <PromotionNotificationContent className="sw-flex-1 sw-px-2 sw-py-4"> - <span className="sw-body-sm-highlight">{translate('promotion.sonarlint.title')}</span> + <span className="sw-typo-semibold">{translate('promotion.sonarlint.title')}</span> <p className="sw-mt-2">{translate('promotion.sonarlint.content')}</p> </PromotionNotificationContent> <div className="sw-ml-2 sw-pl-2 sw-flex sw-flex-col sw-items-stretch"> diff --git a/server/sonar-web/src/main/js/apps/account/Account.tsx b/server/sonar-web/src/main/js/apps/account/Account.tsx index 84a1b46b1f5..66bc4c26dd5 100644 --- a/server/sonar-web/src/main/js/apps/account/Account.tsx +++ b/server/sonar-web/src/main/js/apps/account/Account.tsx @@ -57,7 +57,7 @@ export default function Account() { )} <LargeCenteredLayout as="main"> - <PageContentFontWrapper className="sw-body-sm sw-py-8"> + <PageContentFontWrapper className="sw-typo-default sw-py-8"> <Helmet defaultTitle={title} defer={false} diff --git a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx index e9ae7d5fa6f..0f4461ab637 100644 --- a/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx +++ b/server/sonar-web/src/main/js/apps/account/components/UserCard.tsx @@ -29,7 +29,7 @@ export default function UserCard({ user }: Props) { return ( <> <Avatar hash={user.avatar} name={user.name} size="md" /> - <span className="sw-heading-md fs-mask">{user.name}</span> + <span className="sw-heading-lg fs-mask">{user.name}</span> </> ); } diff --git a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx index aa7f9a13d9c..741e133ade1 100644 --- a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx +++ b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.tsx @@ -42,7 +42,7 @@ export default function GlobalNotifications(props: Readonly<Props>) { </Heading> {!props.header && ( - <div className="sw-body-sm-highlight sw-mb-2">{translate('notifications.send_email')}</div> + <div className="sw-typo-semibold sw-mb-2">{translate('notifications.send_email')}</div> )} <Table className="sw-w-full" columnCount={2} header={props.header ?? null}> diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx index cce33e291ee..4d272bb374d 100644 --- a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx +++ b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx @@ -48,10 +48,10 @@ export function Notifications({ const header = emailOnly ? undefined : ( <tr> - <th className="sw-body-sm-highlight">{translate('events')}</th> + <th className="sw-typo-semibold">{translate('events')}</th> {channels.map((channel) => ( - <th className="sw-body-sm-highlight sw-text-right" key={channel}> + <th className="sw-typo-semibold sw-text-right" key={channel}> {translate('notification.channel', channel)} </th> ))} diff --git a/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx index 48bfa4f5e8c..ac4a396384a 100644 --- a/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx +++ b/server/sonar-web/src/main/js/apps/account/notifications/ProjectNotifications.tsx @@ -70,7 +70,7 @@ export default function ProjectNotifications({ <Link to={getProjectUrl(project.project)}>{project.projectName}</Link> </div> {!header && ( - <div className="sw-body-sm-highlight sw-mb-2">{translate('notifications.send_email')}</div> + <div className="sw-typo-semibold sw-mb-2">{translate('notifications.send_email')}</div> )} <Table diff --git a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx index 030f84a9681..ef49cf4a4ea 100644 --- a/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx +++ b/server/sonar-web/src/main/js/apps/account/profile/Profile.tsx @@ -55,7 +55,7 @@ export function Profile({ currentUser }: ProfileProps) { return ( <div className="sw-flex sw-items-center sw-mb-2"> - <strong className="sw-body-sm-highlight sw-mr-1">{translate('my_profile.login')}:</strong> + <strong className="sw-typo-semibold sw-mr-1">{translate('my_profile.login')}:</strong> {currentUser.login && <span id="login">{currentUser.login}</span>} {isExternalProvider && <UserExternalIdentity user={currentUser} />} </div> @@ -69,7 +69,7 @@ export function Profile({ currentUser }: ProfileProps) { return ( <div className="sw-mb-2"> - <strong className="sw-body-sm-highlight sw-mr-1">{translate('my_profile.email')}:</strong> + <strong className="sw-typo-semibold sw-mr-1">{translate('my_profile.email')}:</strong> <span id="email">{currentUser.email}</span> </div> ); diff --git a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx index 49d2bc1d7c7..841ff8048f7 100644 --- a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx +++ b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx @@ -80,7 +80,7 @@ export default function ProjectCard({ project }: Readonly<Props>) { <Tooltip content={qualityGateLabel}> <span className="sw-flex sw-items-center"> <QualityGateIndicator status={(project.qualityGate as Status) ?? 'NONE'} /> - <LightPrimary className="sw-ml-2 sw-body-sm-highlight">{formatted}</LightPrimary> + <LightPrimary className="sw-ml-2 sw-typo-semibold">{formatted}</LightPrimary> </span> </Tooltip> </div> diff --git a/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx b/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx index f177b304a49..a0d7051dda6 100644 --- a/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx +++ b/server/sonar-web/src/main/js/apps/account/security/Tokens.tsx @@ -35,7 +35,7 @@ export default function Tokens({ login }: Readonly<Props>) { {translate('my_account.security')} </Heading> - <div className="sw-body-md sw-mb-4 sw-mr-4"> + <div className="sw-typo-lg sw-mb-4 sw-mr-4"> <InstanceMessage message={translate('my_account.tokens_description')} /> </div> diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx index a60cd4d2b49..cadc1390946 100644 --- a/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/audit-logs/components/AuditAppRenderer.tsx @@ -78,7 +78,7 @@ export default function AuditAppRenderer(props: Readonly<AuditAppRendererProps>) return ( <LargeCenteredLayout as="main" id="audit-logs-page"> - <PageContentFontWrapper className="sw-body-sm sw-my-8"> + <PageContentFontWrapper className="sw-typo-default sw-my-8"> <Helmet title={translate('audit_logs.page')} /> <Title>{translate('audit_logs.page')}</Title> diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx index c5b584c14ea..dca8016317f 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/BackgroundTasksApp.tsx @@ -228,7 +228,7 @@ export class BackgroundTasksApp extends React.PureComponent<Props, State> { return ( <LargeCenteredLayout id="background-tasks"> - <PageContentFontWrapper className="sw-my-4 sw-body-sm"> + <PageContentFontWrapper className="sw-my-4 sw-typo-default"> <Suggestions suggestion={DocLink.BackgroundTasks} /> <Helmet defer={false} title={translate('background_tasks.page')} /> <Spinner isLoading={!types}> diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx index 129f1d84c68..60c45253ebb 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx @@ -38,7 +38,7 @@ function StatPendingCount({ appState, onCancelAllPending, pendingCount }: Readon return ( <div className="sw-flex sw-items-center"> - <span className="sw-body-md-highlight sw-mr-1">{pendingCount}</span> + <span className="sw-typo-lg-semibold sw-mr-1">{pendingCount}</span> {translate('background_tasks.pending')} {appState.canAdmin && pendingCount > 0 && ( <ConfirmButton diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx index 20f5542e456..593e204266e 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingTime.tsx @@ -37,7 +37,7 @@ export default function StatPendingTime({ pendingCount, pendingTime }: Readonly< } return ( <div className="sw-flex sw-items-center"> - <span className="sw-body-md-highlight sw-mr-1">{formatMeasure(pendingTime, 'MILLISEC')}</span> + <span className="sw-typo-lg-semibold sw-mr-1">{formatMeasure(pendingTime, 'MILLISEC')}</span> {translate('background_tasks.pending_time')} <HelpTooltip className="sw-ml-1" diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx index 9124ce7b2ab..6ce2fada30f 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatStillFailing.tsx @@ -36,14 +36,14 @@ export default function StatStillFailing({ failingCount, onShowFailing }: Readon <div className="sw-flex sw-items-center "> {failingCount > 0 ? ( <StandoutLink - className="sw-body-md-highlight sw-align-baseline" + className="sw-typo-lg-semibold sw-align-baseline" to="#" onClick={onShowFailing} > {failingCount} </StandoutLink> ) : ( - <span className="sw-body-md-highlight">{failingCount}</span> + <span className="sw-typo-lg-semibold">{failingCount}</span> )} <span className="sw-ml-1">{translate('background_tasks.failures')}</span> <HelpTooltip className="sw-ml-1" overlay={translate('background_tasks.failing_count')}> diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx index c746616f053..690495b61ae 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx +++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Stats.tsx @@ -34,7 +34,7 @@ export interface Props { export default function Stats({ component, pendingCount, pendingTime, ...props }: Readonly<Props>) { return ( - <section className="sw-flex sw-items-center sw-my-4 sw-gap-8 sw-body-md"> + <section className="sw-flex sw-items-center sw-my-4 sw-gap-8 sw-typo-lg"> <StatPendingCount onCancelAllPending={props.onCancelAllPending} pendingCount={pendingCount} /> {!component && ( <> diff --git a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx index 97019251bdd..fbd6149c099 100644 --- a/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/change-admin-password/ChangeAdminPasswordAppRenderer.tsx @@ -66,7 +66,7 @@ export default function ChangeAdminPasswordAppRenderer( <CenteredLayout className="sw-h-screen"> <Helmet defer={false} title={translate('users.change_admin_password.page')} /> - <PageContentFontWrapper className="sw-body-sm sw-flex sw-flex-col sw-items-center sw-justify-center"> + <PageContentFontWrapper className="sw-typo-default sw-flex sw-flex-col sw-items-center sw-justify-center"> <Card className="sw-mx-auto sw-mt-24 sw-w-abs-600 sw-flex sw-items-stretch sw-flex-col"> {success ? ( <FlagMessage className="sw-my-8" variant="success"> diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx index 9b622c22503..806f2912122 100644 --- a/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/code/components/CodeAppRenderer.tsx @@ -142,7 +142,7 @@ export default function CodeAppRenderer(props: Readonly<Props>) { const isPortfolio = isPortfolioLike(qualifier); return ( - <LargeCenteredLayout className="sw-py-8 sw-body-md" id="code-page"> + <LargeCenteredLayout className="sw-py-8 sw-typo-lg" id="code-page"> <Helmet defer={false} title={sourceViewer !== undefined ? sourceViewer.name : defaultTitle} /> <A11ySkipTarget anchor="code_main" /> @@ -203,7 +203,7 @@ export default function CodeAppRenderer(props: Readonly<Props>) { </div> {(showComponentList || showSearch) && ( - <div className="sw-flex sw-items-end sw-body-sm"> + <div className="sw-flex sw-items-end sw-typo-default"> <KeyboardHint className="sw-mr-4 sw-ml-6" command={`${KeyboardKeys.DownArrow} ${KeyboardKeys.UpArrow}`} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx index 9aeee494b4f..7e9a83ac755 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx @@ -583,7 +583,7 @@ export class CodingRulesApp extends React.PureComponent<Props, State> { </Helmet> )} <LargeCenteredLayout id="coding-rules-page"> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <div className="sw-grid sw-gap-x-12 sw-gap-y-6 sw-grid-cols-12 sw-w-full"> <StyledContentWrapper as="nav" diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx index e0052eaf7c8..e5180548a6f 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/PageActions.tsx @@ -29,7 +29,7 @@ export interface PageActionsProps { export default function PageActions(props: Readonly<PageActionsProps>) { return ( - <div className="sw-body-sm sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1"> + <div className="sw-typo-default sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1"> <KeyboardHint title={translate('coding_rules.to_select_rules')} command="ArrowUp ArrowDown" /> <KeyboardHint title={translate('coding_rules.to_navigate')} command="ArrowLeft ArrowRight" /> diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx index 4d16aa93642..a3713635afc 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ProfileFacet.tsx @@ -110,7 +110,7 @@ export default class ProfileFacet extends React.PureComponent<Props> { <FacetToggleActiveStyle selected={!!activation} aria-checked={activation} - className="js-active sw-body-xs" + className="js-active sw-typo-sm" onClick={isCompare ? this.stopPropagation : this.handleActiveClick} role="radio" tabIndex={-1} @@ -120,7 +120,7 @@ export default class ProfileFacet extends React.PureComponent<Props> { <FacetToggleInActiveStyle selected={!activation} aria-checked={!activation} - className="js-inactive sw-body-xs sw-ml-1" + className="js-inactive sw-typo-sm sw-ml-1" onClick={isCompare ? this.stopPropagation : this.handleInactiveClick} role="radio" tabIndex={-1} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx index e9b3835e384..612cc5a2d4d 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderActions.tsx @@ -44,7 +44,7 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) { const TAGS_TO_DISPLAY = 1; return ( - <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-body-xs"> + <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-typo-sm"> {/* Type */} <DocHelpTooltip content={ @@ -110,8 +110,8 @@ export default function RuleDetailsHeaderActions(props: Readonly<Props>) { {/* Tags */} <div className="it__coding-rules-detail-property" data-meta="tags"> <TagsList - className="sw-body-xs" - tagsClassName="sw-body-xs" + className="sw-typo-sm" + tagsClassName="sw-typo-sm" allowUpdate={canWrite} tagsToDisplay={TAGS_TO_DISPLAY} tags={allTags.length > 0 ? allTags : [translate('coding_rules.no_tags')]} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx index f4a47bcbe32..b8e472a8ee4 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx @@ -38,7 +38,7 @@ export default function RuleDetailsHeaderMeta(props: Readonly<Props>) { const externalEngine = ruleDetails.repo.replace(new RegExp(`^${EXTERNAL_RULE_REPO_PREFIX}`), ''); return ( - <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-body-xs" as="ul"> + <Note className="sw-flex sw-flex-wrap sw-items-center sw-gap-2 sw-typo-sm" as="ul"> {/* Template */} {!ruleDetails.isExternal && ruleDetails.isTemplate && ( <> diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx index cb4e432e848..fbcd523b835 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx @@ -243,11 +243,7 @@ export default function RuleListItem(props: Readonly<Props>) { <div className="sw-flex sw-items-center"> {renderActivation()} - <Link - className="sw-body-sm-highlight" - onClick={handleNameClick} - to={getRuleUrl(rule.key)} - > + <Link className="sw-typo-semibold" onClick={handleNameClick} to={getRuleUrl(rule.key)}> {rule.name} </Link> </div> @@ -263,13 +259,13 @@ export default function RuleListItem(props: Readonly<Props>) { </div> <div className="sw-flex sw-items-center"> - <div className="sw-grow sw-flex sw-gap-2 sw-items-center sw-body-xs"> + <div className="sw-grow sw-flex sw-gap-2 sw-items-center sw-typo-sm"> {rule.impacts.length > 0 && ( <SoftwareImpactPillList softwareImpacts={rule.impacts} type="rule" /> )} </div> - <TextSubdued as="ul" className="sw-flex sw-gap-1 sw-items-center sw-body-xs"> + <TextSubdued as="ul" className="sw-flex sw-gap-1 sw-items-center sw-typo-sm"> <li>{rule.langName}</li> <SeparatorCircleIcon aria-hidden as="li" /> @@ -324,8 +320,8 @@ export default function RuleListItem(props: Readonly<Props>) { <li> <TagsList allowUpdate={false} - className="sw-body-xs" - tagsClassName="sw-body-xs" + className="sw-typo-sm" + tagsClassName="sw-typo-sm" tags={allTags} /> </li> diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx index f2b71316ca8..a3395ea2989 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/components/ComponentMeasuresApp.tsx @@ -200,7 +200,7 @@ export default function ComponentMeasuresApp() { <LargeCenteredLayout id="component-measures" className="sw-pt-8"> <Suggestions suggestionGroup="component_measures" /> <Helmet defer={false} title={translate('layout.measures')} /> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <Spinner isLoading={isLoading} /> {measures.length > 0 ? ( diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx index ccece093bb7..1560017daaa 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx @@ -59,13 +59,13 @@ export default function MeasureHeader(props: Readonly<Props>) { <div className="sw-mb-4"> <div className="sw-flex sw-items-center sw-justify-between sw-gap-4"> <div className="it__measure-details-metric sw-flex sw-items-center sw-gap-1"> - <strong className="sw-body-md-highlight">{title}</strong> + <strong className="sw-typo-lg-semibold">{title}</strong> <div className="sw-flex sw-items-center sw-ml-2"> <Measure branchLike={branchLike} componentKey={component.key} - className={classNames('it__measure-details-value sw-body-md')} + className={classNames('it__measure-details-value sw-typo-lg')} metricKey={metric.key} metricType={metric.type} value={measureValue} diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx index 67f507873ab..a2b6b3d4596 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/BubbleChartView.tsx @@ -198,7 +198,7 @@ export default function BubbleChartView(props: Readonly<Props>) { <div className="sw-text-right"> {bubbleMetrics.colors && ( <span className="sw-mr-3"> - <strong className="sw-body-sm-highlight"> + <strong className="sw-typo-semibold"> {translate('component_measures.legend.color')} </strong>{' '} {bubbleMetrics.colors.length > 1 @@ -209,7 +209,7 @@ export default function BubbleChartView(props: Readonly<Props>) { : getLocalizedMetricName(bubbleMetrics.colors[0])} </span> )} - <strong className="sw-body-sm-highlight"> + <strong className="sw-typo-semibold"> {translate('component_measures.legend.size')} </strong>{' '} {getLocalizedMetricName(bubbleMetrics.size)} @@ -231,7 +231,7 @@ export default function BubbleChartView(props: Readonly<Props>) { } return ( - <BubbleChartWrapper className="sw-relative sw-body-sm"> + <BubbleChartWrapper className="sw-relative sw-typo-default"> {renderChartHeader()} {renderBubbleChart()} <div className="sw-text-center">{getLocalizedMetricName(bubbleMetrics.x)}</div> diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx index b52c5f101cf..674b934c3b5 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/drilldown/ComponentsList.tsx @@ -55,9 +55,11 @@ export default function ComponentsList({ components, metric, metrics, ...props } otherMetrics.length > 0 && ( <TableRow> <ContentCell /> - <NumericalCell className="sw-body-sm">{getLocalizedMetricName(metric)}</NumericalCell> + <NumericalCell className="sw-typo-default"> + {getLocalizedMetricName(metric)} + </NumericalCell> {otherMetrics.map((metric) => ( - <NumericalCell className="sw-body-sm" key={metric.key}> + <NumericalCell className="sw-typo-default" key={metric.key}> {getLocalizedMetricName(metric)} </NumericalCell> ))} diff --git a/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx b/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx index c7a46d59b37..a2909d2340e 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx +++ b/server/sonar-web/src/main/js/apps/component-measures/sidebar/DomainSubnavigation.tsx @@ -78,7 +78,7 @@ export default function DomainSubnavigation(props: Readonly<Props>) { <SubnavigationAccordion header={ <div className="sw-flex sw-items-center sw-gap-3"> - <strong className="sw-body-sm-highlight">{getLocalizedMetricDomain(domain.name)}</strong> + <strong className="sw-typo-semibold">{getLocalizedMetricDomain(domain.name)}</strong> {helper && ( <HelpTooltip overlay={helper}> <HelperHintIcon aria-hidden="false" description={helper} /> diff --git a/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx index fce1c4f4f2a..26a4acdd163 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Azure/AzurePersonalAccessTokenForm.tsx @@ -77,10 +77,10 @@ export default function AzurePersonalAccessTokenForm({ return ( <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}> - <LightPrimary as="h2" className="sw-heading-md"> + <LightPrimary as="h2" className="sw-heading-lg"> {translate('onboarding.create_project.pat_form.title')} </LightPrimary> - <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm"> + <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default"> {translate('onboarding.create_project.pat_form.help.azure')} </LightPrimary> diff --git a/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx index 4113350fa63..422dab7e26d 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Azure/AzureProjectCreateRenderer.tsx @@ -93,7 +93,7 @@ export default function AzureProjectCreateRenderer( <PageContentFontWrapper> <header className="sw-mb-10"> <Title className="sw-mb-4">{translate('onboarding.create_project.azure.title')}</Title> - <LightPrimary className="sw-body-sm"> + <LightPrimary className="sw-typo-default"> {isMonorepoSupported ? ( <FormattedMessage id="onboarding.create_project.azure.subtitle.with_monorepo" diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx index 2d4c2d071d9..40d9b01f55d 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudPersonalAccessTokenForm.tsx @@ -70,10 +70,10 @@ export default function BitbucketCloudPersonalAccessTokenForm({ return ( <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}> - <LightPrimary as="h2" className="sw-heading-md"> + <LightPrimary as="h2" className="sw-heading-lg"> {translate('onboarding.create_project.pat_form.title')} </LightPrimary> - <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm"> + <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default"> {translate('onboarding.create_project.pat_form.help.bitbucket_cloud')} </LightPrimary> diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx index 4c238b03e48..a2c3e2cc7c2 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudProjectCreateRender.tsx @@ -77,7 +77,7 @@ export default function BitbucketCloudProjectCreateRenderer( <Title className="sw-mb-4"> {translate('onboarding.create_project.bitbucketcloud.title')} </Title> - <LightPrimary className="sw-body-sm"> + <LightPrimary className="sw-typo-default"> {isMonorepoSupported ? ( <FormattedMessage id="onboarding.create_project.bitbucketcloud.subtitle.with_monorepo" diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx index f7159a41b88..3e49260dbfe 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloud/BitbucketCloudSearchForm.tsx @@ -90,7 +90,7 @@ export default function BitbucketCloudSearchForm(props: BitbucketCloudSearchForm {repositories.length === 0 ? ( <div className="sw-py-6 sw-px-2"> - <LightPrimary className="sw-body-sm">{translate('no_results')}</LightPrimary> + <LightPrimary className="sw-typo-default">{translate('no_results')}</LightPrimary> </div> ) : ( <ul className="sw-flex sw-flex-col sw-gap-3"> diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx index 9c4eb92bbba..c6d24ce76ef 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx @@ -73,7 +73,7 @@ export default function BitbucketProjectCreateRenderer( <PageContentFontWrapper> <header className="sw-mb-10"> <Title className="sw-mb-4">{translate('onboarding.create_project.bitbucket.title')}</Title> - <LightPrimary className="sw-body-sm"> + <LightPrimary className="sw-typo-default"> {isMonorepoSupported ? ( <FormattedMessage id="onboarding.create_project.bitbucket.subtitle.with_monorepo" diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx index 43dd9588214..9cae8a1ddc8 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketServerPersonalAccessTokenForm.tsx @@ -70,10 +70,10 @@ export default function BitbucketServerPersonalAccessTokenForm({ return ( <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}> - <LightPrimary as="h2" className="sw-heading-md"> + <LightPrimary as="h2" className="sw-heading-lg"> {translate('onboarding.create_project.pat_form.title')} </LightPrimary> - <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm"> + <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default"> {translate('onboarding.create_project.pat_form.help.bitbucket')} </LightPrimary> diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx index ebb236a41a2..f654001be48 100644 --- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx @@ -144,7 +144,7 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp const filteredAlm = separateAvailableOptions(almCounts); return ( - <div className="sw-body-sm"> + <div className="sw-typo-default"> <div className="sw-flex sw-flex-col"> <Title className="sw-mb-10">{translate('onboarding.create_project.select_method')}</Title> <LightPrimary> diff --git a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx index 45026131cf5..18d2ead9a5c 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx @@ -114,7 +114,7 @@ export default function GitHubProjectCreateRenderer( <> <header className="sw-mb-10"> <Title className="sw-mb-4">{translate('onboarding.create_project.github.title')}</Title> - <LightPrimary className="sw-body-sm"> + <LightPrimary className="sw-typo-default"> {isMonorepoSupported ? ( <FormattedMessage id="onboarding.create_project.github.subtitle.with_monorepo" diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx index 8886ac9e903..379da46bbdc 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GItlabPersonalAccessTokenForm.tsx @@ -69,10 +69,10 @@ export default function GitlabPersonalAccessTokenForm({ return ( <form className="sw-mt-3 sw-w-[50%]" onSubmit={handleSubmit}> - <LightPrimary as="h2" className="sw-heading-md"> + <LightPrimary as="h2" className="sw-heading-lg"> {translate('onboarding.create_project.pat_form.title')} </LightPrimary> - <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-body-sm"> + <LightPrimary as="p" className="sw-mt-2 sw-mb-4 sw-typo-default"> {translate('onboarding.create_project.pat_form.help.gitlab')} </LightPrimary> diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx index a496c18867c..974471703d2 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx @@ -102,7 +102,7 @@ export default function GitlabProjectCreateRenderer( <> <header className="sw-mb-10"> <Title className="sw-mb-4">{translate('onboarding.create_project.gitlab.title')}</Title> - <LightPrimary className="sw-body-sm"> + <LightPrimary className="sw-typo-default"> {isMonorepoSupported ? ( <FormattedMessage id="onboarding.create_project.gitlab.subtitle.with_monorepo" diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx index 1a8ff2baffa..02c29d3343f 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx @@ -86,7 +86,7 @@ export default function GitlabProjectSelectionForm( {projects.length === 0 ? ( <div className="sw-py-6 sw-px-2"> - <LightPrimary className="sw-body-sm">{translate('no_results')}</LightPrimary> + <LightPrimary className="sw-typo-default">{translate('no_results')}</LightPrimary> </div> ) : ( <ul className="sw-flex sw-flex-col sw-gap-3"> diff --git a/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx b/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx index 098dec33862..ff1a907b764 100644 --- a/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/components/AlmRepoItem.tsx @@ -99,24 +99,22 @@ export default function AlmRepoItem({ /> {sqProjectKey ? ( <DiscreetLink className="sw-truncate" to={getProjectUrl(sqProjectKey)}> - <LightPrimary className="sw-body-sm-highlight sw-truncate"> + <LightPrimary className="sw-typo-semibold sw-truncate"> {primaryTextNode} </LightPrimary> </DiscreetLink> ) : ( - <LightPrimary className="sw-body-sm-highlight sw-truncate"> - {primaryTextNode} - </LightPrimary> + <LightPrimary className="sw-typo-semibold sw-truncate">{primaryTextNode}</LightPrimary> )} </div> <div className="sw-max-w-full sw-min-w-0 sw-ml-2 sw-flex sw-items-center"> - <LightLabel className="sw-body-sm sw-truncate">{secondaryTextNode}</LightLabel> + <LightLabel className="sw-typo-default sw-truncate">{secondaryTextNode}</LightLabel> </div> </div> {almUrl !== undefined && ( <div className="sw-flex sw-items-center sw-flex-shrink-0 sw-ml-2"> <Link - className="sw-body-sm-highlight" + className="sw-typo-semibold" onClick={(e) => e.stopPropagation()} target="_blank" to={almUrl} @@ -130,7 +128,7 @@ export default function AlmRepoItem({ {sqProjectKey ? ( <div className="sw-flex sw-items-center"> <CheckIcon /> - <LightPrimary className="sw-ml-2 sw-body-sm"> + <LightPrimary className="sw-ml-2 sw-typo-default"> {translate('onboarding.create_project.repository_imported')} </LightPrimary> </div> diff --git a/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx index 57ae8afee50..04bfcf42525 100644 --- a/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/components/NewCodeDefinitionSelection.tsx @@ -185,7 +185,7 @@ export default function NewCodeDefinitionSelection(props: Props) { <section aria-label={translate('onboarding.create_project.new_code_definition.title')} id="project-ncd-selection" - className="sw-body-sm" + className="sw-typo-default" > <div className="sw-flex sw-justify-between"> <FormattedMessage diff --git a/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx b/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx index acc72882975..9fb6f764e22 100644 --- a/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/components/RepositoryList.tsx @@ -104,7 +104,7 @@ export default function RepositoryList(props: Readonly<RepositoryListProps>) { {repositories.length === 0 ? ( <div className="sw-py-6 sw-px-2"> - <LightPrimary className="sw-body-sm"> + <LightPrimary className="sw-typo-default"> {formatMessage({ id: 'no_results' })} </LightPrimary> </div> @@ -143,7 +143,7 @@ export default function RepositoryList(props: Readonly<RepositoryListProps>) { <SideColumn> {selected.size > 0 && ( <SetupBox className="sw-rounded-2 sw-p-8 sw-mb-0"> - <SetupBoxTitle className="sw-mb-2 sw-heading-md"> + <SetupBoxTitle className="sw-mb-2 sw-heading-lg"> <FormattedMessage id="onboarding.create_project.x_repositories_selected" values={{ count: selected.size }} diff --git a/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx index 3cb08d4dc3e..bc7a765f741 100644 --- a/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/manual/ManualProjectCreate.tsx @@ -139,7 +139,7 @@ export default function ManualProjectCreate(props: Readonly<Props>) { return ( <section aria-label={translate('onboarding.create_project.manual.title')} - className="sw-body-sm" + className="sw-typo-default" > <div className="sw-flex sw-justify-between"> <FormattedMessage @@ -163,7 +163,7 @@ export default function ManualProjectCreate(props: Readonly<Props>) { <div className="sw-max-w-[50%] sw-mt-2"> <form id="create-project-manual" - className="sw-flex-col sw-body-sm" + className="sw-flex-col sw-typo-default" onSubmit={handleFormSubmit} > <ProjectValidation onChange={setProject} /> diff --git a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx index 6e79893b4eb..22414a46fca 100644 --- a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx +++ b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx @@ -47,7 +47,7 @@ export default function GroupsApp() { return ( <LargeCenteredLayout> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('user_groups.page')} /> <main> <Header manageProvider={manageProvider?.provider} /> diff --git a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx index 13e0be93493..f7aa1b2d1a9 100644 --- a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx +++ b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx @@ -82,7 +82,7 @@ export default function ListItem(props: Readonly<ListItemProps>) { return ( <TableRow data-id={name}> <ContentCell> - <div className="sw-body-sm-highlight">{name}</div> + <div className="sw-typo-semibold">{name}</div> {group.default && <span className="sw-ml-1">({translate('default')})</span>} {managed && renderIdentityProviderIcon(manageProvider)} {isGroupLocal() && <Badge className="sw-ml-1">{translate('local')}</Badge>} diff --git a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx index 4da4b20756a..2fd9f000a79 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/ComponentBreadcrumbs.tsx @@ -58,7 +58,7 @@ export default function ComponentBreadcrumbs({ 'issues.on_file_x', `${displayProject ? issue.projectName + ', ' : ''}${componentName}`, )} - className="sw-flex sw-box-border sw-body-sm sw-w-full sw-pb-2 sw-pt-4 sw-truncate" + className="sw-flex sw-box-border sw-typo-default sw-w-full sw-pb-2 sw-pt-4 sw-truncate" > {displayProject && ( <span title={projectName}> diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx index 23f787fd285..c9d1aa14aa0 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeader.tsx @@ -166,7 +166,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> { <div className="sw-mr-8 sw-flex-1 sw-flex sw-flex-col sw-gap-4 sw-min-w-0"> <div className="sw-flex sw-flex-col sw-gap-2"> <div className="sw-flex sw-items-center"> - <PageContentFontWrapper className="sw-body-md-highlight" as="h1"> + <PageContentFontWrapper className="sw-typo-lg-semibold" as="h1"> <IssueMessageHighlighting message={issue.message} messageFormattings={issue.messageFormattings} diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx index 36b99e6805b..df464f021d5 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistory.tsx @@ -81,15 +81,15 @@ export default function IssueReviewHistory(props: HotspotReviewHistoryProps) { {history.map((historyElt, historyIndex) => { const { user, type, diffs, date, html, key, updatable, markdown } = historyElt; return ( - <li className="sw-p-2 sw-body-sm" key={historyIndex}> - <div className="sw-body-sm-highlight sw-mb-1"> + <li className="sw-p-2 sw-typo-default" key={historyIndex}> + <div className="sw-typo-semibold sw-mb-1"> <DateTimeFormatter date={date} /> </div> <LightLabel as="div" className="sw-flex sw-gap-2"> {user.name && ( <div className="sw-flex sw-items-center sw-gap-1"> <Avatar hash={user.avatar} name={user.name} size="xs" /> - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {user.active ? user.name : translateWithParameters('user.x_deleted', user.name)} </span> </div> @@ -113,7 +113,7 @@ export default function IssueReviewHistory(props: HotspotReviewHistoryProps) { {type === ReviewHistoryType.Comment && key && html && markdown && ( <div className="sw-mt-2 sw-flex sw-justify-between"> <CommentBox - className="sw-pl-2 sw-ml-2 sw-body-sm" + className="sw-pl-2 sw-ml-2 sw-typo-default" // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={{ __html: sanitizeUserInput(html) }} /> diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx index 286d41fb721..eaf4194e02f 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssueReviewHistoryAndComments.tsx @@ -79,7 +79,7 @@ export default class IssueReviewHistoryAndComments extends React.PureComponent<P <div> <PageTitle as="h2" - className="sw-body-md-highlight" + className="sw-typo-lg-semibold" text={translate('hotspot.section.activity')} /> diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx index 30af209bcb4..c9995f74bc7 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx @@ -1314,7 +1314,7 @@ export class App extends React.PureComponent<Props, State> { return ( <PageWrapperStyle id="issues-page"> <LargeCenteredLayout> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <div className="sw-w-full sw-flex" id="issues-page"> {openIssue ? ( <Helmet diff --git a/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx b/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx index 89412f5463f..3fb7375712e 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/NoIssues.tsx @@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n'; export default function NoIssues() { return ( <div className="sw-text-center sw-py-8"> - <Highlight as="h3" className="sw-body-md-highlight"> + <Highlight as="h3" className="sw-typo-lg-semibold"> {translate('issues.no_issues')} </Highlight> </div> diff --git a/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx b/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx index 3ebb196a69e..1926d410bf9 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/NoMyIssues.tsx @@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n'; export default function NoMyIssues() { return ( <div className="sw-text-center sw-py-8"> - <Highlight as="h3" className="sw-body-md-highlight"> + <Highlight as="h3" className="sw-typo-lg-semibold"> {translate('issues.no_my_issues')} </Highlight> </div> diff --git a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx index c33c4e5d548..c77ad71029c 100644 --- a/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx +++ b/server/sonar-web/src/main/js/apps/issues/components/PageActions.tsx @@ -35,7 +35,7 @@ export default function PageActions(props: PageActionsProps) { const { canSetHome, effortTotal, paging } = props; return ( - <div className="sw-body-sm sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1"> + <div className="sw-typo-default sw-flex sw-items-center sw-gap-6 sw-justify-end sw-flex-1"> <KeyboardHint title={translate('issues.to_select_issues')} command="ArrowUp ArrowDown" /> <KeyboardHint title={translate('issues.to_navigate')} command="ArrowLeft ArrowRight" /> diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx index 43b7d9d983a..5dc6902547c 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueItemLocationsQuantity.tsx @@ -34,7 +34,7 @@ export default function IssueItemLocationsQuantity(props: Props) { <div className="sw-flex sw-items-center sw-justify-center sw-gap-1 sw-overflow-hidden"> <ExecutionFlowIcon /> <span className="sw-truncate" title={`${quantity} ${message}`}> - <span className="sw-body-sm-highlight">{quantity}</span> {message} + <span className="sw-typo-semibold">{quantity}</span> {message} </span> </div> ); diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx index 61c41a0a45e..0a4a2f4e719 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx @@ -57,9 +57,12 @@ export default function IssueLocation(props: Readonly<Props>) { return ( <StyledButton aria-label={normalizedMessage} aria-current={selected} onClick={handleClick}> <StyledLocation - className={classNames('sw-p-1 sw-rounded-1/2 sw-flex sw-gap-2 sw-body-sm sw-text-left', { - selected, - })} + className={classNames( + 'sw-p-1 sw-rounded-1/2 sw-flex sw-gap-2 sw-typo-default sw-text-left', + { + selected, + }, + )} ref={(n) => (node.current = n)} > <LocationMarker selected={selected} text={concealed ? undefined : index + 1} /> diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx index bb2f02a738c..a9f6ddb40d5 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx @@ -132,7 +132,7 @@ export default class IssueLocationsCrossFile extends PureComponent<Props, State> return ( <div key={groupIndex}> - <ComponentName className="sw-pb-1 sw-body-sm-highlight"> + <ComponentName className="sw-pb-1 sw-typo-semibold"> {collapsePath(group.componentName ?? '', COLLAPSE_PATH_LIMIT)} </ComponentName> {group.locations.length > 0 && ( diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx index 7c8abd5f118..a2c414dd1d1 100644 --- a/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx +++ b/server/sonar-web/src/main/js/apps/issues/sidebar/FiltersHeader.tsx @@ -31,7 +31,7 @@ export function FiltersHeader({ displayReset, onReset }: Props) { return ( <div className="sw-mb-5"> <div className="sw-flex sw-h-9 sw-items-center sw-justify-between"> - <PageTitle className="sw-body-md-highlight" as="h2" text={translate('filters')} /> + <PageTitle className="sw-typo-lg-semibold" as="h2" text={translate('filters')} /> {displayReset && ( <Button onClick={onReset} variety={ButtonVariety.DangerOutline}> diff --git a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx index 4ce2fcc1842..0e0feb96711 100644 --- a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx @@ -175,7 +175,7 @@ export default class App extends React.PureComponent<Props, State> { <Helmet defaultTitle={translate('maintenance.page')} defer={false} /> <CenteredLayout className="sw-flex sw-justify-around sw-mt-32" id="bd"> - <Card className="sw-body-sm sw-p-10 sw-w-abs-400" id="nonav"> + <Card className="sw-typo-default sw-p-10 sw-w-abs-400" id="nonav"> {systemStatus === 'OFFLINE' && ( <> <MaintenanceTitle className="text-danger"> diff --git a/server/sonar-web/src/main/js/apps/marketplace/App.tsx b/server/sonar-web/src/main/js/apps/marketplace/App.tsx index fbb876c1a4d..cc305eb0f2b 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/App.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/App.tsx @@ -167,7 +167,7 @@ class App extends React.PureComponent<Props, State> { return ( <LargeCenteredLayout as="main" id="marketplace-page"> - <PageContentFontWrapper className="sw-body-sm sw-py-8"> + <PageContentFontWrapper className="sw-typo-default sw-py-8"> <Helmet title={translate('marketplace.page')} /> <Header currentEdition={currentEdition} /> <EditionBoxes currentEdition={currentEdition} /> diff --git a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx index 9e02ad24d8d..46b2d4999b9 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/Header.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/Header.tsx @@ -31,7 +31,7 @@ export default function Header({ currentEdition }: Readonly<Props>) { <header id="marketplace-header"> <Title>{translate('marketplace.page')}</Title> {currentEdition && ( - <div className="sw-body-sm-highlight"> + <div className="sw-typo-semibold"> {translate('marketplace.page.you_are_running', currentEdition)} </div> )} diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx index 1e0a0c7522e..4e6df25032f 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx @@ -55,7 +55,7 @@ export default function PluginAvailable(props: Readonly<PluginAvailableProps>) { /> {plugin.update.requires.length > 0 && ( <p className="sw-mt-2"> - <strong className="sw-body-sm-highlight"> + <strong className="sw-typo-semibold"> {translateWithParameters( 'marketplace.installing_this_plugin_will_also_install_x', plugin.update.requires diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx index 2985475d641..7c86eda1cf1 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLog.tsx @@ -32,7 +32,7 @@ export interface Props { export default function PluginChangeLog({ release, update }: Props) { return ( <div className="sw-p-4"> - <span className="sw-body-md-highlight">{translate('changelog')}</span> + <span className="sw-typo-lg-semibold">{translate('changelog')}</span> <UnorderedList> {update.previousUpdates && sortBy(update.previousUpdates, (prevUpdate) => prevUpdate.release?.date).map( diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx index e436531f096..3ff5cb76cef 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx @@ -28,7 +28,7 @@ interface Props { export default function PluginDescription(props: Readonly<Props>) { return ( <CellComponent> - <strong className="sw-body-sm-highlight">{props.plugin.name}</strong> + <strong className="sw-typo-semibold">{props.plugin.name}</strong> {props.plugin.category && <Badge className="sw-ml-2">{props.plugin.category}</Badge>} {props.plugin.description && <div className="sw-mt-2">{props.plugin.description}</div>} </CellComponent> diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx index 7e1692ce31b..66730e8d6d6 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx @@ -48,7 +48,7 @@ export default function PluginInstalled({ <ContentCell> <StyledUnorderedList> <ListItem className="sw-mt-0"> - <strong className="sw-mr-1 sw-body-sm-highlight">{plugin.version}</strong> + <strong className="sw-mr-1 sw-typo-semibold">{plugin.version}</strong> {translate('marketplace._installed')} </ListItem> <PluginUpdates pluginName={plugin.name} updates={plugin.updates} /> diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx index 5457c590c68..c20f5791ce4 100644 --- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx +++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdates.tsx @@ -34,7 +34,7 @@ export default function PluginUpdates({ pluginName, updates }: Readonly<PluginUp } return ( <ListItem> - <strong className="sw-body-sm-highlight">{translate('marketplace.updates')}:</strong> + <strong className="sw-typo-semibold">{translate('marketplace.updates')}:</strong> <UnorderedList className="sw-mt-2"> {updates.map((update) => update.release ? ( diff --git a/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx index 98a00733f1c..9e6b76baf78 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/ActivityPanel.tsx @@ -112,7 +112,7 @@ export function ActivityPanel(props: ActivityPanelProps) { return ( <div> - <h2 className="sw-pt-6 sw-pb-4 sw-body-md-highlight">{translate('overview.activity')}</h2> + <h2 className="sw-pt-6 sw-pb-4 sw-typo-lg-semibold">{translate('overview.activity')}</h2> <Card className="sw-rounded-2" data-test="overview__activity-panel"> <GraphsHeader graph={graph} metrics={metrics} onUpdateGraph={props.onGraphChange} /> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx index 4c920a2e017..fd40ed024ae 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/Analysis.tsx @@ -72,9 +72,9 @@ export function Analysis(props: Readonly<AnalysisProps>) { ); return ( - <div data-analysis-key={analysis.key} className="sw-body-sm"> + <div data-analysis-key={analysis.key} className="sw-typo-default"> <div className="sw-flex sw-justify-between sw-mb-1"> - <div className="sw-body-sm-highlight"> + <div className="sw-typo-semibold"> <DateTimeFormatter date={analysis.date} /> </div> {qualityGateStatus !== undefined && ( @@ -91,7 +91,7 @@ export function Analysis(props: Readonly<AnalysisProps>) { ), }} /> - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> <FormattedMessage id={`metric.level.${qualityGateStatus}`} /> </span> </div> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx index 0eb0427a9ac..75248625512 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx @@ -54,7 +54,7 @@ export default function BranchMetaTopBar({ const locMeasure = findMeasure(measures, MetricKey.ncloc); const leftSection = ( - <h1 className="sw-flex sw-gap-2 sw-items-center sw-heading-md">{branch.name}</h1> + <h1 className="sw-flex sw-gap-2 sw-items-center sw-heading-lg">{branch.name}</h1> ); const rightSection = ( <div className="sw-flex sw-gap-2 sw-items-center"> @@ -93,7 +93,7 @@ export default function BranchMetaTopBar({ ); return ( - <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-body-sm sw-mb-2"> + <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-typo-default sw-mb-2"> {leftSection} {rightSection} </div> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx index 518ae206260..aba16a8306b 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx @@ -187,7 +187,7 @@ export default function BranchOverviewRenderer(props: BranchOverviewRendererProp tourCompleted={tourCompleted} /> )} - <div className="overview sw-my-6 sw-body-sm"> + <div className="overview sw-my-6 sw-typo-default"> <A11ySkipTarget anchor="overview_main" /> {projectIsEmpty ? ( diff --git a/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx b/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx index aebb8322dae..86638afb2c4 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/Event.tsx @@ -81,7 +81,7 @@ export function Event({ event }: Props) { <QualityGateIndicator status={event.qualityGate.status} size="sm" /> )} </div> - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate(`event.quality_gate.${event.qualityGate.status}`)} </span> </div> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx index 23df1709b69..244e289b2af 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx @@ -99,11 +99,11 @@ export default function NewCodeMeasuresPanel(props: Readonly<Props>) { if (newIssuesCondition && !isApp) { issuesFooter = issuesConditionFailed ? ( <TextError - className="sw-font-regular sw-body-xs sw-inline" + className="sw-font-regular sw-typo-sm sw-inline" text={getConditionRequiredLabel(newIssuesCondition, intl, true)} /> ) : ( - <LightLabel className="sw-body-xs"> + <LightLabel className="sw-typo-sm"> {getConditionRequiredLabel(newIssuesCondition, intl)} </LightLabel> ); diff --git a/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx index 12ba4763629..e2aa9d5bc01 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/OverallCodeMeasuresPanel.tsx @@ -134,7 +134,7 @@ export default function OverallCodeMeasuresPanel(props: Readonly<OverallCodeMeas /> } > - <TextSubdued className="sw-body-xs sw-mt-3"> + <TextSubdued className="sw-typo-sm sw-mt-3"> {intl.formatMessage({ id: 'overview.accepted_issues.help', })} diff --git a/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx b/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx index 212e1691027..745419f6407 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/PromotedSection.tsx @@ -61,7 +61,7 @@ export default function PromotedSection({ return ( <StyledWrapper className="sw-p-4 sw-pl-6 sw-my-6 sw-rounded-2"> <div className="sw-flex sw-justify-between sw-mb-2"> - <StyledTitle className="sw-body-md-highlight">{title}</StyledTitle> + <StyledTitle className="sw-typo-lg-semibold">{title}</StyledTitle> <ButtonIcon Icon={IconX} @@ -71,7 +71,7 @@ export default function PromotedSection({ variety={ButtonVariety.DefaultGhost} /> </div> - <p className="sw-body-sm sw-mb-4">{content}</p> + <p className="sw-typo-default sw-mb-4">{content}</p> <div> <ButtonPrimary className="sw-mr-2" onClick={handlePrimaryButtonClick}> {primaryButtonLabel} diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx index e5c87c3ab8e..c0391986fac 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx @@ -178,7 +178,7 @@ export class QualityGateCondition extends React.PureComponent<Props> { <div className="sw-flex sw-flex-col sw-text-sm"> <div className="sw-flex sw-items-center"> <IssueTypeIcon className="sw-mr-2" type={metric.key} /> - <span className="sw-body-sm-highlight sw-text-ellipsis sw-max-w-abs-300"> + <span className="sw-typo-semibold sw-text-ellipsis sw-max-w-abs-300"> {this.getPrimaryText()} </span> </div> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx index 4bbd8bcc1ce..ab4451a094e 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanel.tsx @@ -129,7 +129,7 @@ export function QualityGatePanel(props: QualityGatePanelProps) { {showCaycWarningInApp && ( <InfoCard - className="sw-body-sm" + className="sw-typo-default" footer={ <LinkStandalone to={caycUrl}> <FormattedMessage id="overview.quality_gate.conditions.cayc.link" /> @@ -142,7 +142,7 @@ export function QualityGatePanel(props: QualityGatePanelProps) { {showCaycWarningInProject && ( <InfoCard - className="sw-body-sm" + className="sw-typo-default" footer={ <LinkStandalone to={caycUrl}> <FormattedMessage id="overview.quality_gate.conditions.cayc.link" /> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx index 64993e86a8f..345d80b2e07 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGatePanelSection.tsx @@ -54,7 +54,7 @@ export function QualityGatePanelSection(props: QualityGatePanelSectionProps) { open={!collapsed} header={ <div className="sw-flex sw-flex-col sw-text-sm"> - <span className="sw-body-sm-highlight">{qgStatus.name}</span> + <span className="sw-typo-semibold">{qgStatus.name}</span> </div> } > diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx index ab93b482172..a742f8365d0 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx @@ -83,7 +83,7 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow className="sw-overflow-hidden sw-rounded-2 sw-flex-col" > <div className="sw-flex sw-items-center"> - <ColorBold className="sw-body-sm-highlight"> + <ColorBold className="sw-typo-semibold"> {intl.formatMessage({ id: `software_quality.${softwareQuality}` })} </ColorBold> {failed && ( @@ -120,7 +120,7 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow ) : ( <StyledDash className="sw-font-bold" name="-" /> )} - <TextSubdued className="sw-self-end sw-body-sm sw-pb-1"> + <TextSubdued className="sw-self-end sw-typo-default sw-pb-1"> {intl.formatMessage({ id: 'overview.measures.software_impact.total_open_issues' })} </TextSubdued> </div> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx index 79bc8d400e7..3520e7ab4ec 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/SonarLintPromotion.tsx @@ -56,7 +56,7 @@ export function SonarLintPromotion({ currentUser, qgConditions }: SonarLintPromo return null; } return ( - <InfoCard className="it__overview__sonarlint-promotion sw-body-sm"> + <InfoCard className="it__overview__sonarlint-promotion sw-typo-default"> <FormattedMessage id="overview.fix_failed_conditions_with_sonarlint" defaultMessage={translate('overview.fix_failed_conditions_with_sonarlint')} diff --git a/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx b/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx index 9bb4f6f2f5c..308f3b6aab1 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/AfterMergeNote.tsx @@ -34,7 +34,7 @@ export default function AfterMergeNote({ measures, overallMetric }: Readonly<Pro const afterMergeValue = findMeasure(measures, overallMetric)?.value; return afterMergeValue ? ( - <Note className="sw-mt-2 sw-body-xs sw-inline-block"> + <Note className="sw-mt-2 sw-typo-sm sw-inline-block"> <strong className="sw-mr-1">{formatMeasure(afterMergeValue, MetricType.Percent)}</strong> <FormattedMessage id="component_measures.facet_category.overall_category.estimated" /> </Note> diff --git a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx index ce1c5a38b4f..4676d3ec19c 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/IssueMeasuresCardInner.tsx @@ -48,7 +48,7 @@ export function IssueMeasuresCardInner(props: Readonly<IssueMeasuresCardInnerPro 'sw-opacity-60': disabled, })} > - <ColorBold className="sw-flex sw-items-center sw-gap-2 sw-body-sm-highlight"> + <ColorBold className="sw-flex sw-items-center sw-gap-2 sw-typo-semibold"> {header} {failed && ( diff --git a/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx b/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx index 5fcb961d0f3..e4afb3c688d 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/LastAnalysisLabel.tsx @@ -36,7 +36,7 @@ export default function LastAnalysisLabel({ analysisDate }: Readonly<Props>) { id: 'overview.last_analysis_x', }, { - date: <DateFromNow className="sw-body-sm-highlight" date={analysisDate} />, + date: <DateFromNow className="sw-typo-semibold" date={analysisDate} />, }, )} </span> diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx index 7b21eb3a755..02251afceb1 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCard.tsx @@ -42,7 +42,7 @@ export default function MeasuresCard( return ( <div> - <ColorBold className="sw-body-sm-highlight">{translate(label)}</ColorBold> + <ColorBold className="sw-typo-semibold">{translate(label)}</ColorBold> {failed && ( <Badge className="sw-mt-1/2 sw-px-1 sw-ml-2" variant="deleted"> {translate('overview.measures.failed_badge')} diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx index 21abfe5068c..ae16789d347 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardNumber.tsx @@ -54,7 +54,7 @@ export default function MeasuresCardNumber( failed={conditionFailed} {...rest} > - <span className="sw-body-xs sw-mt-3"> + <span className="sw-typo-sm sw-mt-3"> {showRequired && condition && (conditionFailed ? ( diff --git a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx index 2102107d12f..762fa4ac9f4 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx +++ b/server/sonar-web/src/main/js/apps/overview/components/MeasuresCardPercent.tsx @@ -111,7 +111,7 @@ export default function MeasuresCardPercent( icon={renderIcon(measurementType, value)} > {shouldRenderRequiredLabel && ( - <span className="sw-body-xs sw-mt-3"> + <span className="sw-typo-sm sw-mt-3"> {conditionFailed ? ( <TextError className="sw-font-regular sw-inline" @@ -123,7 +123,7 @@ export default function MeasuresCardPercent( </span> )} <div - className={classNames('sw-flex sw-body-xs sw-justify-between sw-items-center', { + className={classNames('sw-flex sw-typo-sm sw-justify-between sw-items-center', { 'sw-mt-1': shouldRenderRequiredLabel, 'sw-mt-3': !shouldRenderRequiredLabel, })} @@ -141,7 +141,7 @@ export default function MeasuresCardPercent( isDefined(linesValue) ? `${formattedMeasure} (${linesValue})` : '0', localizeMetric(linesMetric), )} - className="sw-body-sm-highlight sw--mt-[3px]" + className="sw-typo-semibold sw--mt-[3px]" to={linesUrl} > {formattedMeasure} diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx index b04f9a478ff..e4ee0a0dd8f 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/BranchQualityGateConditions.tsx @@ -79,7 +79,7 @@ function FailedQGCondition( const url = getQGConditionUrl(component.key, condition, branchLike); return ( - <StyledConditionButton className="sw-px-3 sw-py-2 sw-rounded-1 sw-body-sm" to={url}> + <StyledConditionButton className="sw-px-3 sw-py-2 sw-rounded-1 sw-typo-default" to={url}> <Badge className="sw-mr-2 sw-px-1" variant="deleted"> {translate('overview.measures.failed_badge')} </Badge> @@ -126,7 +126,7 @@ function FailedRatingMetric({ condition }: Readonly<FailedMetricProps>) { rating: `${intl.formatMessage({ id: `metric_domain.${domain}`, })} ${intl.formatMessage({ id: 'metric.type.RATING' }).toLowerCase()}`, - value: <strong className="sw-body-sm-highlight">{formatMeasure(actual, type)}</strong>, + value: <strong className="sw-typo-semibold">{formatMeasure(actual, type)}</strong>, threshold: formatMeasure(error, type), }, )} @@ -149,7 +149,7 @@ function FailedGeneralMetric({ condition }: Readonly<FailedMetricProps>) { { metric: ( <> - <strong className="sw-body-sm-highlight sw-mr-1"> + <strong className="sw-typo-semibold sw-mr-1"> {formatMeasure( condition.actual, getShortType(metric.type), diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx index 8bfbca3dccc..f2719e08a55 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx @@ -131,11 +131,11 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>) issuesCondition && (isIssuesConditionFailed ? ( <TextError - className="sw-font-regular sw-body-xs sw-inline" + className="sw-font-regular sw-typo-sm sw-inline" text={getConditionRequiredLabel(issuesCondition, intl, true)} /> ) : ( - <LightLabel className="sw-body-xs"> + <LightLabel className="sw-typo-sm"> {getConditionRequiredLabel(issuesCondition, intl)} </LightLabel> )) @@ -160,7 +160,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>) ) } footer={ - <TextSubdued className="sw-body-xs"> + <TextSubdued className="sw-typo-sm"> {intl.formatMessage({ id: 'overview.accepted_issues.help' })} </TextSubdued> } @@ -188,7 +188,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>) } side={TooltipSide.Top} > - <span className="sw-body-sm sw-cursor-default"> + <span className="sw-typo-default sw-cursor-default"> <IconQuestionMark color="echoes-color-icon-subdued" /> </span> </Tooltip> @@ -201,7 +201,7 @@ export default function MeasuresCardPanel(props: React.PropsWithChildren<Props>) url={fixedUrl} icon={fixedCount !== undefined && fixedCount !== '0' && <TrendDownCircleIcon />} footer={ - <TextSubdued className="sw-body-xs"> + <TextSubdued className="sw-typo-sm"> {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.help' })} </TextSubdued> } diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx index 6484ef39909..d896877f22d 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestMetaTopBar.tsx @@ -37,7 +37,7 @@ export default function PullRequestMetaTopBar({ pullRequest, measures }: Readonl const leftSection = ( <div> - <strong className="sw-body-sm-highlight sw-mr-1"> + <strong className="sw-typo-semibold sw-mr-1"> {formatMeasure( getLeakValue(findMeasure(measures, MetricKey.new_lines)), MetricType.ShortInteger, @@ -53,7 +53,7 @@ export default function PullRequestMetaTopBar({ pullRequest, measures }: Readonl ); return ( - <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-body-sm"> + <div className="sw-flex sw-justify-between sw-whitespace-nowrap sw-typo-default"> {leftSection} {rightSection} </div> diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx index f83f694ba7b..8621c4c1b3d 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx @@ -92,7 +92,7 @@ export default function PullRequestOverview(props: Readonly<Readonly<Props>>) { return ( <CenteredLayout> - <PageContentFontWrapper className="it__pr-overview sw-mt-12 sw-mb-8 sw-grid sw-grid-cols-12 sw-body-sm"> + <PageContentFontWrapper className="it__pr-overview sw-mt-12 sw-mb-8 sw-grid sw-grid-cols-12 sw-typo-default"> <div className="sw-col-start-2 sw-col-span-10"> <PullRequestMetaTopBar pullRequest={pullRequest} measures={measures} /> <BasicSeparator className="sw-my-4" /> diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx index b787eac55b3..d6c355e5c71 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/SonarLintAd.tsx @@ -64,7 +64,7 @@ export default function SonarLintAd({ status }: Readonly<Props>) { return ( <StyledSummaryCard className="it__overview__sonarlint-promotion sw-flex sw-flex-col sw-mt-4"> <div className="sw-flex sw-justify-between"> - <SubTitle as="h2" className="sw-body-md-highlight"> + <SubTitle as="h2" className="sw-typo-lg-semibold"> {intl.formatMessage({ id: 'overview.sonarlint_ad.header' })} </SubTitle> <DiscreetInteractiveIcon @@ -80,14 +80,14 @@ export default function SonarLintAd({ status }: Readonly<Props>) { <TickLink message={intl.formatMessage({ id: 'overview.sonarlint_ad.details_3' })} /> <TickLink message={intl.formatMessage({ id: 'overview.sonarlint_ad.details_4' })} /> <TickLink - className="sw-body-sm-highlight" + className="sw-typo-semibold" message={intl.formatMessage({ id: 'overview.sonarlint_ad.details_5' })} /> </ul> <SubnavigationFlowSeparator className="sw-mb-4" /> <div> <StandoutLink - className="sw-text-left sw-body-sm-highlight" + className="sw-text-left sw-typo-semibold" to="https://www.sonarsource.com/products/sonarlint/features/connected-mode/?referrer=sonarqube" > {intl.formatMessage({ id: 'overview.sonarlint_ad.learn_more' })} @@ -99,7 +99,7 @@ export default function SonarLintAd({ status }: Readonly<Props>) { function TickLink({ className, message }: Readonly<{ className?: string; message: string }>) { return ( - <ListItem className={`sw-body-sm ${className}`}> + <ListItem className={`sw-typo-default ${className}`}> <CheckIcon fill="iconTrendPositive" /> <LightLabel className="sw-pl-1">{message}</LightLabel> </ListItem> diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx index a7786499ffe..15705cbc40c 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Home.tsx @@ -36,7 +36,7 @@ interface Props { export default function Home(props: Props) { return ( <LargeCenteredLayout id="users-page"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('permission_templates.page')} /> <Header ready={props.ready} refresh={props.refresh} /> diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx index d4f96c2fa0c..22d0ef3b1f9 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Template.tsx @@ -337,7 +337,7 @@ export default class Template extends React.PureComponent<Props, State> { return ( <LargeCenteredLayout id="permission-template"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={template.name} /> <TemplateHeader diff --git a/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx b/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx index 8fb1fbeabf2..57566f63873 100644 --- a/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx +++ b/server/sonar-web/src/main/js/apps/permissions/global/components/PermissionsGlobalApp.tsx @@ -258,7 +258,7 @@ class PermissionsGlobalApp extends React.PureComponent<Props, State> { ); return ( <LargeCenteredLayout id="project-permissions-page"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('global_permissions.permission')} /> <PageHeader /> <AllHoldersList diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx index 3741378ba1f..dd458cd1b06 100644 --- a/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx +++ b/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx @@ -362,7 +362,7 @@ class PermissionsProjectApp extends React.PureComponent<Props, State> { return ( <LargeCenteredLayout id="project-permissions-page"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('permissions.page')} /> <PageHeader diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx index 9ed8ee1f261..c7cc6ee879e 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx @@ -128,11 +128,11 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro return ( <div> {this.props.initializing ? ( - <div className="sw-p-4 sw-body-sm"> + <div className="sw-p-4 sw-typo-default"> <Spinner /> </div> ) : ( - <div className="sw-p-4 sw-body-sm"> + <div className="sw-p-4 sw-typo-default"> <LightLabel>{translate('no_results')}</LightLabel> </div> )} @@ -154,7 +154,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro > {newCodePeriod.baselineAnalysisKey !== undefined && newCodePeriod.firstNewCodeAnalysisKey === undefined && ( - <BaselineMarker className="sw-body-sm sw-mb-2"> + <BaselineMarker className="sw-typo-default sw-mb-2"> <span className="sw-py-1/2 sw-px-1"> {translate('project_activity.new_code_period_start')} </span> @@ -199,7 +199,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro data-day={toShortISO8601String(Number(day))} key={day} > - <div className="sw-body-md-highlight sw-mb-3"> + <div className="sw-typo-lg-semibold sw-mb-3"> <DateFormatter date={Number(day)} long /> </div> <ul className="it__project-activity-analyses-list"> diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx index 1597f4291ed..f7f790ca090 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx @@ -121,7 +121,7 @@ function ProjectActivityAnalysis(props: ProjectActivityAnalysisProps) { ref={(ref) => (node = ref)} > <div className="it__project-activity-time"> - <ActivityTime className="sw-h-page sw-body-sm-highlight sw-text-right sw-mr-2 sw-py-1/2"> + <ActivityTime className="sw-h-page sw-typo-semibold sw-text-right sw-mr-2 sw-py-1/2"> <TimeFormatter date={parsedDate} long={false}> {(formattedTime) => ( <time dateTime={parsedDate.toISOString()}>{formattedTime}</time> @@ -201,7 +201,7 @@ function ProjectActivityAnalysis(props: ProjectActivityAnalysisProps) { </ActivityAnalysisListItem> </Tooltip> {isBaseline && ( - <BaselineMarker className="sw-body-sm sw-mt-2"> + <BaselineMarker className="sw-typo-default sw-mt-2"> <span className="sw-py-1/2 sw-px-1"> {translate('project_activity.new_code_period_start')} </span> diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx index 7b76d0800d8..5a1bcea0ee8 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageFilters.tsx @@ -62,7 +62,7 @@ export default function ProjectActivityPageFilters(props: ProjectActivityPageFil {!isPortfolioLike(project.qualifier) && ( <InputSelect aria-label={translate('project_activity.filter_events')} - className="sw-mr-8 sw-body-sm sw-w-abs-200" + className="sw-mr-8 sw-typo-default sw-w-abs-200" isClearable onChange={(data: LabelValueSelectOption) => handleCategoryChange(data)} options={options} diff --git a/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx b/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx index 4eda24865bd..90f0f0bdef2 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/ProjectBranchesApp.tsx @@ -37,7 +37,7 @@ function ProjectBranchesApp(props: ProjectBranchesAppProps) { return ( <LargeCenteredLayout id="project-branch-like"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <header className="sw-mb-5"> <Helmet defer={false} title={translate('project_branch_pull_request.page')} /> <Title className="sw-mb-4">{translate('project_branch_pull_request.page')}</Title> diff --git a/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx b/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx index d104562c702..87a48fd31e6 100644 --- a/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx +++ b/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx @@ -36,7 +36,7 @@ export default function App() { return ( <CenteredLayout> <Helmet defer={false} title={translate('deletion.page')} /> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Header component={component} /> <Form component={component} /> </PageContentFontWrapper> diff --git a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx index 7c000544a0f..bae2834be5d 100644 --- a/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectDump/ProjectDumpApp.tsx @@ -40,7 +40,7 @@ export function ProjectDumpApp({ component, hasFeature }: Readonly<Props>) { return ( <LargeCenteredLayout id="project-dump"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <header className="sw-mb-5"> <Helmet defer={false} title={translate('project_dump.page')} /> <Title className="sw-mb-4">{translate('project_dump.page')}</Title> @@ -61,7 +61,7 @@ export function ProjectDumpApp({ component, hasFeature }: Readonly<Props>) { <> <div className="sw-mb-4"> - <h2 className="sw-heading-md">{translate('project_dump.export')}</h2> + <h2 className="sw-heading-lg">{translate('project_dump.export')}</h2> </div> <Export componentKey={component.key} /> <BasicSeparator className="sw-my-8" /> diff --git a/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx b/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx index 165815cefc3..2f9a9d73b34 100644 --- a/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx +++ b/server/sonar-web/src/main/js/apps/projectDump/components/Import.tsx @@ -196,7 +196,7 @@ export default function Import(props: Readonly<Props>) { return ( <> <div className="sw-my-4"> - <h2 className="sw-heading-md">{translate('project_dump.import')}</h2> + <h2 className="sw-heading-lg">{translate('project_dump.import')}</h2> </div> <Spinner isLoading={isLoading}> diff --git a/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx b/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx index a6cd0ba1bba..764111dae0e 100644 --- a/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectInformation/ProjectInformationApp.tsx @@ -74,7 +74,7 @@ function ProjectInformationApp(props: Props) { <main> <LargeCenteredLayout> <PageContentFontWrapper> - <div className="overview sw-my-6 sw-body-sm"> + <div className="overview sw-my-6 sw-typo-default"> <Title className="sw-mb-12"> {translate(isApp ? 'application' : 'project', 'info.title')} </Title> diff --git a/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx b/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx index d7bb648fc4b..c9577dffcec 100644 --- a/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectKey/ProjectKeyApp.tsx @@ -45,7 +45,7 @@ function ProjectKeyApp({ component, router }: Props) { return ( <LargeCenteredLayout id="project-key"> <Helmet defer={false} title={translate('update_key.page')} /> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <header className="sw-mt-8 sw-mb-4"> <Title className="sw-mb-4">{translate('update_key.page')}</Title> <div className="sw-mb-2">{translate('update_key.page.description')}</div> diff --git a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx index 936480ca774..7d20cbb1b82 100644 --- a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx @@ -65,12 +65,12 @@ export default function UpdateForm(props: UpdateFormProps) { <div className="sw-mt-2"> {translate('update_key.old_key')} {': '} - <strong className="sw-body-md-highlight">{component.key}</strong> + <strong className="sw-typo-lg-semibold">{component.key}</strong> </div> <div className="sw-mt-2"> {translate('update_key.new_key')} {': '} - <strong className="sw-body-md-highlight">{newKey}</strong> + <strong className="sw-typo-lg-semibold">{newKey}</strong> </div> </> } diff --git a/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx b/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx index 21dfb68add7..eb6e1fce254 100644 --- a/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectLinks/ProjectLinksApp.tsx @@ -103,7 +103,7 @@ export class ProjectLinksApp extends React.PureComponent<Props, State> { const { loading, links } = this.state; return ( <LargeCenteredLayout> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('project_links.page')} /> <Header onCreate={this.handleCreateLink} /> <Spinner loading={loading}> diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx index 6e8dd56f300..31360afa2ad 100644 --- a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchNewCodeDefinitionSettingModal.tsx @@ -175,7 +175,7 @@ export default class BranchNewCodeDefinitionSettingModal extends React.PureCompo const formBody = ( <form id={FORM_ID} onSubmit={this.handleSubmit}> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <p className="sw-mb-3">{translate('baseline.new_code_period_for_branch_x.question')}</p> <div className="sw-flex sw-flex-col sw-mb-10 sw-gap-4" role="radiogroup"> <NewCodeDefinitionPreviousVersionOption diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx index 440a8d74b05..955daf83711 100644 --- a/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/ProjectNewCodeDefinitionApp.tsx @@ -197,7 +197,7 @@ function ProjectNewCodeDefinitionApp(props: Readonly<ProjectNewCodeDefinitionApp <Helmet defer={false} title={translate('project_baseline.page')} /> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <AppHeader canAdmin={!!appState.canAdmin} /> <Spinner loading={isLoading} /> diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx index 50528c55e9b..fb03e5d49ae 100644 --- a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx @@ -128,7 +128,7 @@ export default function ProjectQualityGateAppRenderer(props: ProjectQualityGateA return ( <LargeCenteredLayout id="project-quality-gate"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Suggestions suggestion={DocLink.CaYC} /> <Helmet defer={false} title={translate('project_quality_gate.page')} /> <A11ySkipTarget anchor="qg_main" /> diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx index 788c1c708cb..6cf48a25acf 100644 --- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/ProjectQualityProfilesAppRenderer.tsx @@ -92,7 +92,7 @@ export default function ProjectQualityProfilesAppRenderer( return ( <LargeCenteredLayout id="project-quality-profiles"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Suggestions suggestion={DocLink.InstanceAdminQualityProfiles} /> <Helmet defer={false} title={translate('project_quality_profiles.page')} /> <A11ySkipTarget anchor="profiles_main" /> diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx index 0a2ea49e239..3d9eeead93c 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx @@ -314,7 +314,7 @@ export class AllProjects extends React.PureComponent<Props, State> { </Heading> <LargeCenteredLayout> - <PageContentFontWrapper className="sw-flex sw-w-full sw-body-md"> + <PageContentFontWrapper className="sw-flex sw-w-full sw-typo-lg"> {this.renderSide()} <main className="sw-flex sw-flex-col sw-box-border sw-min-w-0 sw-pl-12 sw-pt-6 sw-flex-1"> diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx index 9427e0e0053..a6c279a5fc4 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyFavoriteSearch.tsx @@ -29,10 +29,10 @@ export default function EmptyFavoriteSearch({ query }: { query: Query }) { return ( <div aria-live="assertive" className="sw-py-8 sw-text-center"> <FishVisual /> - <Highlight as="h3" className="sw-body-md-highlight sw-mt-6"> + <Highlight as="h3" className="sw-typo-lg-semibold sw-mt-6"> {translate('no_results_search.favorites')} </Highlight> - <div className="sw-my-4 sw-body-sm"> + <div className="sw-my-4 sw-typo-default"> <FormattedMessage defaultMessage={translate('no_results_search.favorites.2')} id="no_results_search.favorites.2" diff --git a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx index 13d74b44a65..d7b8bcca91f 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/EmptyInstance.tsx @@ -40,14 +40,14 @@ export function EmptyInstance(props: EmptyInstanceProps) { return ( <div className="sw-text-center sw-py-8"> <FishVisual /> - <Highlight as="h3" className="sw-body-md-highlight sw-mt-6"> + <Highlight as="h3" className="sw-typo-lg-semibold sw-mt-6"> {showNewProjectButton ? translate('projects.no_projects.empty_instance.new_project') : translate('projects.no_projects.empty_instance')} </Highlight> {showNewProjectButton && ( <div> - <p className="sw-mt-2 sw-body-sm"> + <p className="sw-mt-2 sw-typo-default"> {translate('projects.no_projects.empty_instance.how_to_add_projects')} </p> <Button diff --git a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx index 24697a8bc3a..77180ed4125 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/NoFavoriteProjects.tsx @@ -24,16 +24,16 @@ import { translate } from '../../../helpers/l10n'; export default function NoFavoriteProjects() { return ( <div className="sw-py-8 sw-text-center"> - <Highlight as="h3" className="sw-mb-2 sw-body-md-highlight"> + <Highlight as="h3" className="sw-mb-2 sw-typo-lg-semibold"> {translate('projects.no_favorite_projects')} </Highlight> <div> - <p className="sw-mt-2 sw-body-sm"> + <p className="sw-mt-2 sw-typo-default"> {translate('projects.no_favorite_projects.engagement')} </p> <p className="sw-mt-6"> - <StandoutLink className="sw-mt-6 sw-body-sm-highlight" to="/projects/all"> + <StandoutLink className="sw-mt-6 sw-typo-semibold" to="/projects/all"> {translate('projects.explore_projects')} </StandoutLink> </p> diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx index 266fdf17d95..66f6fe5c1a6 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx @@ -89,11 +89,11 @@ export default function PageHeader(props: Readonly<Props>) { <div className="sw-flex sw-items-center"> {total != null && ( <> - <LightPrimary id="projects-total" className="sw-body-sm-highlight sw-mr-1"> + <LightPrimary id="projects-total" className="sw-typo-semibold sw-mr-1"> {total} </LightPrimary> - <LightLabel className="sw-body-sm">{translate('projects_')}</LightLabel> + <LightLabel className="sw-typo-default">{translate('projects_')}</LightLabel> </> )} diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx index 966ff0e3b05..37632472565 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.tsx @@ -74,11 +74,11 @@ export default function PageSidebar(props: PageSidebarProps) { }, [onClearAll, heading]); return ( - <div className="sw-body-sm sw-px-4 sw-pt-12 sw-pb-24"> + <div className="sw-typo-default sw-px-4 sw-pt-12 sw-pb-24"> <FavoriteFilter /> <div className="sw-flex sw-items-center sw-justify-between"> - <StyledPageTitle className="sw-body-md-highlight" as="h2" tabIndex={-1} ref={heading}> + <StyledPageTitle className="sw-typo-lg-semibold" as="h2" tabIndex={-1} ref={heading}> {translate('filters')} </StyledPageTitle> diff --git a/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx index 83f88e689bc..13e491fe113 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/PerspectiveSelect.tsx @@ -49,13 +49,13 @@ export default function PerspectiveSelect(props: Readonly<Props>) { <StyledPageTitle id="aria-projects-perspective" as="label" - className="sw-body-sm-highlight sw-mr-2" + className="sw-typo-semibold sw-mr-2" > {translate('projects.perspective')} </StyledPageTitle> <Select ariaLabelledBy="aria-projects-perspective" - className="sw-mr-4 sw-body-sm" + className="sw-mr-4 sw-typo-default" hasDropdownAutoWidth isNotClearable onChange={handleChange} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx index e861202b865..bf18d43871b 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx @@ -73,16 +73,12 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> { return ( <div className="sw-flex sw-items-center"> - <StyledPageTitle - id="aria-projects-sort" - as="label" - className="sw-body-sm-highlight sw-mr-2" - > + <StyledPageTitle id="aria-projects-sort" as="label" className="sw-typo-semibold sw-mr-2"> {translate('projects.sort_by')} </StyledPageTitle> <Select ariaLabelledBy="aria-projects-sort" - className="sw-body-sm" + className="sw-typo-default" onChange={this.handleSortChange} data={this.getOptions()} optionComponent={ProjectsSortingSelectItem} diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx index 59890b720d8..36d965f4b0b 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx @@ -141,7 +141,7 @@ function renderFirstLine( <QualityGateIndicator status={(measures[MetricKey.alert_status] as Status) ?? 'NONE'} /> - <LightPrimary className="sw-ml-2 sw-body-sm-highlight">{formatted}</LightPrimary> + <LightPrimary className="sw-ml-2 sw-typo-semibold">{formatted}</LightPrimary> </span> </Tooltip> )} @@ -151,12 +151,12 @@ function renderFirstLine( {isDefined(analysisDate) && analysisDate !== '' && ( <DateTimeFormatter date={analysisDate}> {(formattedAnalysisDate) => ( - <span className="sw-body-sm-highlight" title={formattedAnalysisDate}> + <span className="sw-typo-semibold" title={formattedAnalysisDate}> <FormattedMessage id="projects.last_analysis_on_x" defaultMessage={translate('projects.last_analysis_on_x')} values={{ - date: <DateFromNow className="sw-body-sm" date={analysisDate} />, + date: <DateFromNow className="sw-typo-default" date={analysisDate} />, }} /> </span> @@ -170,7 +170,7 @@ function renderFirstLine( <SeparatorCircleIcon className="sw-mx-1" /> <div> - <span className="sw-body-sm-highlight sw-mr-1" data-key={MetricKey.new_lines}> + <span className="sw-typo-semibold sw-mr-1" data-key={MetricKey.new_lines}> <Measure componentKey={key} metricKey={MetricKey.new_lines} @@ -179,7 +179,7 @@ function renderFirstLine( /> </span> - <span className="sw-body-sm">{translate('metric.new_lines.name')}</span> + <span className="sw-typo-default">{translate('metric.new_lines.name')}</span> </div> </> ) @@ -188,7 +188,7 @@ function renderFirstLine( <SeparatorCircleIcon className="sw-mx-1" /> <div> - <span className="sw-body-sm-highlight sw-mr-1" data-key={MetricKey.ncloc}> + <span className="sw-typo-semibold sw-mr-1" data-key={MetricKey.ncloc}> <Measure componentKey={key} metricKey={MetricKey.ncloc} @@ -197,12 +197,12 @@ function renderFirstLine( /> </span> - <span className="sw-body-sm">{translate('metric.ncloc.name')}</span> + <span className="sw-typo-default">{translate('metric.ncloc.name')}</span> </div> <SeparatorCircleIcon className="sw-mx-1" /> - <span className="sw-body-sm" data-key={MetricKey.ncloc_language_distribution}> + <span className="sw-typo-default" data-key={MetricKey.ncloc_language_distribution}> <ProjectCardLanguages distribution={measures.ncloc_language_distribution} /> </span> </> @@ -213,7 +213,7 @@ function renderFirstLine( <SeparatorCircleIcon className="sw-mx-1" /> <Tags - className="sw-body-sm" + className="sw-typo-default" emptyText={translate('issue.no_tag')} ariaTagsListLabel={translate('issue.tags')} tooltip={Tooltip} @@ -257,7 +257,7 @@ function renderSecondLine( isEmpty(analysisDate) && isLoggedIn(currentUser) && isScannable && ( - <Link className="sw-ml-2 sw-body-sm-highlight" to={getProjectUrl(key)}> + <Link className="sw-ml-2 sw-typo-semibold" to={getProjectUrl(key)}> {translate('projects.configure_analysis')} </Link> )} diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx index 2047d0f73c2..9a58494823a 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasure.tsx @@ -37,7 +37,7 @@ export default function ProjectCardMeasure( className={classNames('it__project_card_measure sw-text-center', className)} > <div className="sw-flex sw-justify-center">{children}</div> - <div className="sw-body-sm sw-mt-1 sw-whitespace-nowrap" title={label}> + <div className="sw-typo-default sw-mt-1 sw-whitespace-nowrap" title={label}> {label} </div> </div> diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx index 457f82dc06e..30b3e2c55b2 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx @@ -59,7 +59,7 @@ function renderNewIssues(props: ProjectCardMeasuresProps) { metricKey={MetricKey.new_violations} metricType={MetricType.ShortInteger} value={measures[MetricKey.new_violations]} - className="sw-ml-2 sw-body-md-highlight" + className="sw-ml-2 sw-typo-lg-semibold" /> </ProjectCardMeasure> ); @@ -78,7 +78,7 @@ function renderCoverage(props: ProjectCardMeasuresProps) { metricKey={coverageMetric} metricType={MetricType.Percent} value={measures[coverageMetric]} - className="sw-ml-2 sw-body-md-highlight" + className="sw-ml-2 sw-typo-lg-semibold" /> </div> </ProjectCardMeasure> @@ -108,7 +108,7 @@ function renderDuplication(props: ProjectCardMeasuresProps) { metricKey={duplicationMetric} metricType={MetricType.Percent} value={measures[duplicationMetric]} - className="sw-ml-2 sw-body-md-highlight" + className="sw-ml-2 sw-typo-lg-semibold" /> </div> </ProjectCardMeasure> @@ -186,7 +186,7 @@ function renderRatings(props: ProjectCardMeasuresProps) { metricKey={metricKey} metricType={metricType} value={measureValue} - className="sw-ml-2 sw-body-md-highlight" + className="sw-ml-2 sw-typo-lg-semibold" /> </ProjectCardMeasure> ); diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx index bae3f637d03..2d712d4042b 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/Header.tsx @@ -47,7 +47,7 @@ export default function Header(props: Readonly<Props>) { <div className="sw-mr-2"> <span className="sw-mr-1"> {translate('settings.projects.default_visibility_of_new_projects')}{' '} - <strong className="sw-body-sm-highlight"> + <strong className="sw-typo-semibold"> {defaultProjectVisibility ? translate('visibility', defaultProjectVisibility) : '—'} </strong> </span> diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx index 8447e0d8dae..cae0045a101 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectManagementApp.tsx @@ -204,7 +204,7 @@ class ProjectManagementApp extends React.PureComponent<Props, State> { const { defaultProjectVisibility } = this.state; return ( <LargeCenteredLayout as="main" id="projects-management-page"> - <PageContentFontWrapper className="sw-body-sm sw-my-8"> + <PageContentFontWrapper className="sw-typo-default sw-my-8"> <Helmet defer={false} title={translate('projects_management')} /> <Header diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx index cb7f7bf5492..4e38f09a6fb 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/App.tsx @@ -77,7 +77,7 @@ export default function App() { return ( <LargeCenteredLayout id="quality-gates-page"> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <Helmet defer={false} titleTemplate={translateWithParameters( diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx index 7ef1a49af76..b57025d0bc9 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCompliantBanner.tsx @@ -55,7 +55,7 @@ export default function CaycCompliantBanner() { /> </div> <div className="sw-my-2">{translate('quality_gates.cayc.banner.description2')}</div> - <ul className="sw-body-sm sw-flex sw-flex-col sw-gap-2"> + <ul className="sw-typo-default sw-flex sw-flex-col sw-gap-2"> {Object.values(OPTIMIZED_CAYC_CONDITIONS).map((condition) => ( <li key={condition.metric}> <CheckIcon className="sw-mr-1 sw-pt-1/2" /> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx index 623fb39b27c..8a3320b73c5 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx @@ -66,7 +66,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>) const body = ( <div className="sw-mb-10"> - <SubHeading as="p" className="sw-body-sm"> + <SubHeading as="p" className="sw-typo-default"> <FormattedMessage id={ isOptimizing @@ -81,7 +81,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>) {sortedMissingConditions.length > 0 && ( <> - <Title as="h4" className="sw-mb-2 sw-mt-4 sw-body-sm-highlight"> + <Title as="h4" className="sw-mb-2 sw-mt-4 sw-typo-semibold"> {translateWithParameters( 'quality_gates.cayc.review_update_modal.add_condition.header', sortedMissingConditions.length, @@ -98,7 +98,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>) {sortedWeakConditions.length > 0 && ( <> - <Title as="h4" className="sw-mb-2 sw-mt-4 sw-body-sm-highlight"> + <Title as="h4" className="sw-mb-2 sw-mt-4 sw-typo-semibold"> {translateWithParameters( 'quality_gates.cayc.review_update_modal.modify_condition.header', sortedWeakConditions.length, @@ -113,7 +113,7 @@ export default function CaycReviewUpdateConditionsModal(props: Readonly<Props>) </> )} - <Title as="h4" className="sw-mb-2 sw-mt-4 sw-body-sm-highlight"> + <Title as="h4" className="sw-mb-2 sw-mt-4 sw-typo-semibold"> {translate('quality_gates.cayc.review_update_modal.description2')} </Title> </div> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx index 581878af0cc..208823ed7bf 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx @@ -150,7 +150,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) <header className="sw-flex sw-items-center sw-mb-4 sw-justify-between"> <div className="sw-flex"> - <HeadingDark className="sw-body-md-highlight sw-m-0"> + <HeadingDark className="sw-typo-lg-semibold sw-m-0"> {translate('quality_gates.conditions')} </HeadingDark> {!qualityGate.isBuiltIn && ( @@ -218,7 +218,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) </HighlightedSection> {hasFeature(Feature.BranchSupport) && ( - <Note className="sw-mb-2 sw-body-sm"> + <Note className="sw-mb-2 sw-typo-default"> {translate('quality_gates.conditions.cayc', 'description')} </Note> )} @@ -241,7 +241,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) /> {hasFeature(Feature.BranchSupport) && ( - <Note className="sw-mb-2 sw-body-sm"> + <Note className="sw-mb-2 sw-typo-default"> {translate('quality_gates.conditions.new_code', 'description')} </Note> )} @@ -263,7 +263,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) /> {hasFeature(Feature.BranchSupport) && ( - <Note className="sw-mb-2 sw-body-sm"> + <Note className="sw-mb-2 sw-typo-default"> {translate('quality_gates.conditions.overall_code', 'description')} </Note> )} @@ -273,7 +273,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) {qualityGate.caycStatus !== CaycStatus.NonCompliant && !editing && canEdit && ( <div className="sw-mt-4 it__qg-unfollow-cayc"> - <SubHeading as="p" className="sw-mb-2 sw-body-sm"> + <SubHeading as="p" className="sw-mb-2 sw-typo-default"> <FormattedMessage id="quality_gates.cayc_unfollow.description" defaultMessage={translate('quality_gates.cayc_unfollow.description')} @@ -289,7 +289,7 @@ export default function Conditions({ qualityGate, isFetching }: Readonly<Props>) )} {existingConditions.length === 0 && ( - <div className="sw-mt-4 sw-body-sm"> + <div className="sw-mt-4 sw-typo-default"> <LightPrimary as="p">{translate('quality_gates.no_conditions')}</LightPrimary> </div> )} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx index 63ab8c16e65..074bc1e3294 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsTable.tsx @@ -37,17 +37,17 @@ function Header() { return ( <TableRow> <ContentCell> - <Title className="sw-body-sm-highlight sw-m-0 sw-whitespace-nowrap"> + <Title className="sw-typo-semibold sw-m-0 sw-whitespace-nowrap"> {translate('quality_gates.conditions.metric')} </Title> </ContentCell> <ContentCell> - <Title className="sw-body-sm-highlight sw-m-0 sw-whitespace-nowrap"> + <Title className="sw-typo-semibold sw-m-0 sw-whitespace-nowrap"> {translate('quality_gates.conditions.operator')} </Title> </ContentCell> <NumericalCell> - <Title className="sw-body-sm-highlight sw-m-0 sw-whitespace-nowrap"> + <Title className="sw-typo-semibold sw-m-0 sw-whitespace-nowrap"> {translate('quality_gates.conditions.value')} </Title> </NumericalCell> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx index 6b8a8fa5a3d..af4c589e3d8 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx @@ -48,7 +48,7 @@ export function DetailsContent(props: DetailsContentProps) { <div className="sw-mt-10"> <div className="sw-flex sw-flex-col"> - <SubTitle as="h3" className="sw-body-md-highlight"> + <SubTitle as="h3" className="sw-typo-lg-semibold"> {translate('quality_gates.projects')} <DocHelpTooltip className="sw-ml-2" content={translate('quality_gates.projects.help')}> <HelperHintIcon /> @@ -56,7 +56,9 @@ export function DetailsContent(props: DetailsContentProps) { </SubTitle> {qualityGate.isDefault ? ( - <p className="sw-body-sm sw-mb-2">{translate('quality_gates.projects_for_default')}</p> + <p className="sw-typo-default sw-mb-2"> + {translate('quality_gates.projects_for_default')} + </p> ) : ( <Projects canEdit={actions.associateProjects} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx index 93896aa991d..91b08676d36 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx @@ -54,7 +54,7 @@ export default function ListHeader({ canCreate }: Readonly<Props>) { return ( <div className="sw-flex sw-justify-between sw-pb-4"> <div className="sw-flex sw-justify-between"> - <Title className="sw-flex sw-items-center sw-body-md-highlight sw-mb-0"> + <Title className="sw-flex sw-items-center sw-typo-lg-semibold sw-mb-0"> {translate('quality_gates.page')} </Title> <DocHelpTooltip diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx index 163ce1bc8a0..050f12fa617 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/PermissionItem.tsx @@ -52,7 +52,7 @@ export default function PermissionItem(props: PermissionItemProps) { <ContentCell> <div className="sw-flex sw-flex-col"> - <strong className="sw-body-sm-highlight">{item.name}</strong> + <strong className="sw-typo-semibold">{item.name}</strong> {isUser(item) && <Note>{item.login}</Note>} </div> </ContentCell> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx index 5fc9f6ad88e..c68d7ce6cfe 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx @@ -93,7 +93,7 @@ function OptionRenderer(option: Readonly<QGPermissionOption>) { <> <Avatar hash={option.avatar} name={option.name} /> <div className="sw-ml-2"> - <strong className="sw-body-sm-highlight sw-mr-1">{option.name}</strong> + <strong className="sw-typo-semibold sw-mr-1">{option.name}</strong> <br /> <Note>{option.login}</Note> </div> @@ -101,7 +101,7 @@ function OptionRenderer(option: Readonly<QGPermissionOption>) { ) : ( <> <GenericAvatar Icon={IconPeople} name={option.name} /> - <strong className="sw-body-sm-highlight sw-ml-2">{option.name}</strong> + <strong className="sw-typo-semibold sw-ml-2">{option.name}</strong> </> )} </div> diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx index fb01e1f2165..3e8bb3fe389 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsRenderer.tsx @@ -58,10 +58,10 @@ export default function QualityGatePermissionsRenderer(props: QualityGatePermiss return ( <div data-testid="quality-gate-permissions"> - <SubTitle as="h3" className="sw-body-md-highlight"> + <SubTitle as="h3" className="sw-typo-lg-semibold"> {translate('quality_gates.permissions')} </SubTitle> - <p className="sw-body-sm">{translate('quality_gates.permissions.help')}</p> + <p className="sw-typo-default">{translate('quality_gates.permissions.help')}</p> <div className={classNames({ 'sw-my-2': users.length + groups.length > 0 })}> <Spinner loading={loading}> <Table columnCount={3} columnWidths={['40px', 'auto', '1%']} width="100%"> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx index 6825ad39b45..17d5027a8fa 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonContainer.tsx @@ -60,7 +60,7 @@ export function ComparisonContainer(props: Readonly<Props>) { }; return ( - <div className="sw-body-sm"> + <div className="sw-typo-default"> <div className="sw-flex sw-items-center"> <ComparisonForm onCompare={handleCompare} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx index 066ec051989..d0081200487 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResults.tsx @@ -260,7 +260,7 @@ function Parameters({ params }: Readonly<{ params?: Params }>) { <ul> {Object.keys(params).map((key) => ( <li className="sw-mt-2 sw-break-all" key={key}> - <code className="sw-body-sm"> + <code className="sw-typo-default"> {key} {': '} {params[key]} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx index 42892367d05..65f38fc6e79 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileNotFound.tsx @@ -27,10 +27,10 @@ export default function ProfileNotFound() { return ( <div className="sw-text-center sw-mt-4"> - <h1 className="sw-body-md-highlight sw-mb-4"> + <h1 className="sw-typo-lg-semibold sw-mb-4"> {intl.formatMessage({ id: 'quality_profiles.not_found' })} </h1> - <Link className="sw-body-sm-highlight" to={PROFILE_PATH}> + <Link className="sw-typo-semibold" to={PROFILE_PATH}> {intl.formatMessage({ id: 'quality_profiles.back_to_list' })} </Link> </div> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx index c34c384bb7f..849368e199b 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.tsx @@ -80,17 +80,15 @@ export default function ProfileHeader(props: Props) { > <div className="sw-flex sw-items-center sw-gap-3 sw-self-start"> {!isProfileComparePath(location.pathname) && ( - <PageContentFontWrapper className="sw-body-sm sw-flex sw-gap-3"> + <PageContentFontWrapper className="sw-typo-default sw-flex sw-gap-3"> <div> - <strong className="sw-body-sm-highlight"> + <strong className="sw-typo-semibold"> {translate('quality_profiles.updated_')} </strong>{' '} <DateFromNow date={profile.rulesUpdatedAt} /> </div> <div> - <strong className="sw-body-sm-highlight"> - {translate('quality_profiles.used_')} - </strong>{' '} + <strong className="sw-typo-semibold">{translate('quality_profiles.used_')}</strong>{' '} <DateFromNow date={profile.lastUsed} /> </div> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx index 91715485d45..48edea8a0e5 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsGroup.tsx @@ -61,7 +61,7 @@ export default function ProfilePermissionsGroup(props: Readonly<Props>) { name={group.name} size="xs" /> - <strong className="sw-body-sm-highlight sw-truncate fs-mask">{group.name}</strong> + <strong className="sw-typo-semibold sw-truncate fs-mask">{group.name}</strong> </div> <DestructiveIcon Icon={TrashIcon} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx index 2f2c2e7e849..ebcfe1e2999 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsUser.tsx @@ -62,7 +62,7 @@ export default function ProfilePermissionsGroup(props: Readonly<Props>) { size="xs" /> <div className="sw-truncate fs-mask"> - <strong className="sw-body-sm-highlight">{user.name}</strong> + <strong className="sw-typo-semibold">{user.name}</strong> <Note className="sw-block">{user.login}</Note> </div> </div> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx index 4b3080b4499..7902e0cc685 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionDeprecated.tsx @@ -63,7 +63,7 @@ export default function EvolutionDeprecated({ profiles }: Readonly<Props>) { )} </FlagMessage> - <ul className="sw-flex sw-flex-col sw-gap-4 sw-body-sm"> + <ul className="sw-flex sw-flex-col sw-gap-4 sw-typo-default"> {sortedProfiles.map((profile) => ( <li className="sw-flex sw-flex-col sw-gap-1" key={profile.key}> <div className="sw-truncate"> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx index 0e680661200..493df10b0ff 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx @@ -74,7 +74,7 @@ export default function EvolutionRules() { {intl.formatMessage({ id: 'quality_profiles.latest_new_rules' })} </Heading> - <ul className="sw-flex sw-flex-col sw-gap-4 sw-body-sm"> + <ul className="sw-flex sw-flex-col sw-gap-4 sw-typo-default"> {latestRules.map((rule) => ( <li className="sw-flex sw-flex-col sw-gap-1" key={rule.key}> <div className="sw-truncate"> @@ -98,7 +98,7 @@ export default function EvolutionRules() { </ul> {latestRulesTotal > RULES_LIMIT && ( - <div className="sw-mt-6 sw-body-sm-highlight"> + <div className="sw-mt-6 sw-typo-semibold"> <Link to={getRulesUrl({ available_since: periodStartDate })}> {intl.formatMessage( { id: 'quality_profiles.latest_new_rules.see_all_x' }, diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx index d44fe4cab52..a27fb3fccc2 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionStagnant.tsx @@ -49,7 +49,7 @@ export default function EvolutionStagnant(props: Readonly<Props>) { {intl.formatMessage({ id: 'quality_profiles.not_updated_more_than_year' })} </FlagMessage> - <ul className="sw-flex sw-flex-col sw-gap-4 sw-body-sm"> + <ul className="sw-flex sw-flex-col sw-gap-4 sw-typo-default"> {outdated.map((profile) => ( <li className="sw-flex sw-flex-col sw-gap-1" key={profile.key}> <div className="sw-truncate"> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx index 13ba07cab46..e962950d18e 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/LanguageSelect.tsx @@ -54,7 +54,7 @@ export default function LanguageSelect(props: Readonly<Props>) { return ( <div className="sw-mb-4"> - <span className="sw-mr-2 sw-body-sm-highlight"> + <span className="sw-mr-2 sw-typo-semibold"> {intl.formatMessage({ id: 'quality_profiles.filter_by' })} </span> <SearchSelectDropdown diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx index 1fd5d6c299a..0f12c4fae50 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx @@ -66,7 +66,7 @@ export default function PageHeader(props: Readonly<Props>) { {translate('quality_profiles.page')} </Heading> - <div className="sw-body-sm"> + <div className="sw-typo-default"> {intl.formatMessage({ id: 'quality_profiles.intro' })} <Link className="sw-ml-2" to={docUrl}> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx index 4535bd0c076..d59e4f62cc9 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/EmptyHotspotsPage.tsx @@ -43,7 +43,7 @@ export default function EmptyHotspotsPage(props: EmptyHotspotsPageProps) { height={100} src={`/images/${filtered && !filterByFile ? 'filter-large' : 'hotspot-large'}.svg`} /> - <span className="sw-mt-10 sw-body-sm-highlight"> + <span className="sw-mt-10 sw-typo-semibold"> {translate(`hotspots.${emptyTranslationKey}.title`)} </span> <Note className="sw-w-abs-400 sw-text-center sw-mt-4"> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx index a2531185977..7171a35f459 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotDisabledFilterTooltip.tsx @@ -28,13 +28,13 @@ export function HotspotDisabledFilterTooltip() { const docUrl = useDocUrl(DocLink.InstanceAdminReindexation); return ( - <div className="sw-body-sm sw-w-[190px]"> + <div className="sw-typo-default sw-w-[190px]"> <p> {translate('indexation.page_unavailable.description')}{' '} {translate('indexation.filter_unavailable.description')} </p> <hr className="sw-mx-0 sw-my-3 sw-p-0 sw-w-full" /> - <span className="sw-body-sm-highlight">{translate('indexation.learn_more')}</span> + <span className="sw-typo-semibold">{translate('indexation.learn_more')}</span> <Link className="sw-ml-1" onMouseDown={(e) => { diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx index a1ad559a864..34fd6605f0f 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeader.tsx @@ -81,7 +81,7 @@ export function HotspotHeader(props: HotspotHeaderProps) { discreet /> </StyledPageTitle> - <div className="sw-mt-2 sw-mb-4 sw-body-sm"> + <div className="sw-mt-2 sw-mb-4 sw-typo-default"> <LightLabel>{rule.name}</LightLabel> <Link className="sw-ml-1" to={getRuleUrl(rule.key)} target="_blank"> {rule.key} diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx index 0cc28d8a11f..0fb243e5796 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx @@ -38,17 +38,17 @@ export default function HotspotHeaderRightSection(props: Props) { <HotspotHeaderInfo title={translate('hotspots.risk_exposure')}> <div className="sw-flex sw-items-center"> <HotspotRating className="sw-mr-1" rating={hotspot.rule.vulnerabilityProbability} /> - <LightLabel className="sw-body-sm"> + <LightLabel className="sw-typo-default"> {translate('risk_exposure', hotspot.rule.vulnerabilityProbability)} </LightLabel> </div> </HotspotHeaderInfo> <HotspotHeaderInfo title={translate('category')}> - <LightLabel className="sw-body-sm">{categoryStandard}</LightLabel> + <LightLabel className="sw-typo-default">{categoryStandard}</LightLabel> </HotspotHeaderInfo> {hotspot.codeVariants && hotspot.codeVariants.length > 0 && ( <HotspotHeaderInfo title={translate('issues.facet.codeVariants')} className="sw-truncate"> - <LightLabel className="sw-body-sm"> + <LightLabel className="sw-typo-default"> <Tooltip content={hotspot.codeVariants.join(', ')}> <span>{hotspot.codeVariants.join(', ')}</span> </Tooltip> @@ -71,7 +71,7 @@ interface HotspotHeaderInfoProps { function HotspotHeaderInfo({ children, title, className }: HotspotHeaderInfoProps) { return ( <div className={classNames('sw-min-w-abs-150 sw-max-w-abs-250', className)}> - <div className="sw-body-sm-highlight">{title}:</div> + <div className="sw-typo-semibold">{title}:</div> {children} </div> ); diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx index b78c1a5c048..7935ec3d93a 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx @@ -124,9 +124,7 @@ export default class HotspotList extends React.Component<Props, State> { <div className="sw-mb-4" key={riskGroup.risk}> <SubnavigationHeading as="h2" className="sw-px-0"> <span className="sw-flex sw-items-center"> - <span className="sw-body-sm-highlight"> - {translate('hotspots.risk_exposure')}: - </span> + <span className="sw-typo-semibold">{translate('hotspots.risk_exposure')}:</span> <HotspotRating className="sw-ml-2 sw-mr-1" rating={riskGroup.risk} /> {translate('risk_exposure', riskGroup.risk)} </span> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx index 677656426d4..2196eb6b01f 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx @@ -86,7 +86,7 @@ export default function HotspotListItem(props: HotspotListItemProps) { id="hotspots.location" defaultMessage={translate(locationMessage)} values={{ - 0: <span className="sw-body-sm-highlight">{locations.length}</span>, + 0: <span className="sw-typo-semibold">{locations.length}</span>, }} /> </span> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx index 10e956c4bc6..6fd32b8bc53 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListMeta.tsx @@ -50,7 +50,7 @@ export default function HotspotListMeta(props: Readonly<HotspotListMetaProps>) { translate(`hotspots.${emptyTranslationKey}.title`)} </span> {(hotspotsTotal > 0 || hasSelectedHotspot) && ( - <span className="sw-body-sm"> + <span className="sw-typo-default"> <FormattedMessage id="hotspots.list_title" defaultMessage={ @@ -59,7 +59,7 @@ export default function HotspotListMeta(props: Readonly<HotspotListMetaProps>) { : translate(`hotspots.list_title.${statusFilter}`) } values={{ - 0: <strong className="sw-body-sm-highlight">{hotspotsTotal}</strong>, + 0: <strong className="sw-typo-semibold">{hotspotsTotal}</strong>, }} /> </span> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx index 45f70529053..5b0cf3fbd3f 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistory.tsx @@ -56,15 +56,15 @@ export default function HotspotReviewHistory(props: HotspotReviewHistoryProps) { {history.map((historyElt, historyIndex) => { const { user, type, diffs, date, html, key, updatable, markdown } = historyElt; return ( - <li className="sw-p-2 sw-body-sm" key={historyIndex}> - <div className="sw-body-sm-highlight sw-mb-1"> + <li className="sw-p-2 sw-typo-default" key={historyIndex}> + <div className="sw-typo-semibold sw-mb-1"> <DateTimeFormatter date={date} /> </div> <LightLabel as="div" className="sw-flex sw-gap-2"> {user.name && ( <div className="sw-flex sw-items-center sw-gap-1"> <Avatar hash={user.avatar} name={user.name} size="xs" /> - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {user.active ? user.name : translateWithParameters('user.x_deleted', user.name)} </span> </div> @@ -87,7 +87,7 @@ export default function HotspotReviewHistory(props: HotspotReviewHistoryProps) { {type === ReviewHistoryType.Comment && key && html && markdown && ( <div className="sw-mt-2 sw-flex sw-justify-between"> <CommentBox - className="sw-pl-2 sw-ml-2 sw-body-sm" + className="sw-pl-2 sw-ml-2 sw-typo-default" // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={{ __html: sanitizeUserInput(html) }} /> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx index 84e8590b686..184451bc23c 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotReviewHistoryAndComments.tsx @@ -83,7 +83,7 @@ export default class HotspotReviewHistoryAndComments extends React.PureComponent <div className="it__hs-review-history"> <PageTitle as="h2" - className="sw-body-md-highlight" + className="sw-typo-lg-semibold" text={translate('hotspot.section.activity')} /> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx index 81761c5c5dd..bcf5b869bcd 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx @@ -84,7 +84,7 @@ function HotspotSidebarHeader(props: SecurityHotspotsAppRendererProps) { {component && ( <Measure branchLike={branchLike} - className="it__hs-review-percentage sw-body-sm-highlight sw-ml-2" + className="it__hs-review-percentage sw-typo-semibold sw-ml-2" componentKey={component.key} metricKey={ isBranch(branchLike) && !filters.inNewCodePeriod @@ -97,7 +97,7 @@ function HotspotSidebarHeader(props: SecurityHotspotsAppRendererProps) { )} </Spinner> - <span className="sw-body-sm sw-ml-1"> + <span className="sw-typo-default sw-ml-1"> {translate('metric.security_hotspots_reviewed.name')} </span> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx index 81dd5767bcb..422a0f918f3 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/StatusUpdateSuccessModal.tsx @@ -59,11 +59,11 @@ export default function StatusUpdateSuccessModal(props: StatusUpdateSuccessModal <p className="sw-hidden" id="modal_header_title"> {modalTitle} </p> - <h2 className="sw-heading-md sw-text-center"> + <h2 className="sw-heading-lg sw-text-center"> {translateWithParameters('hotspots.successful_status_change_to_x', statusLabel)} </h2> - <div className="sw-text-center sw-mt-8 sw-body-sm"> + <div className="sw-text-center sw-mt-8 sw-typo-default"> <FormattedMessage id="hotspots.successfully_changed_to_x" defaultMessage={translate('hotspots.find_in_status_filter_x')} diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap index 42915e44d78..ce907df4286 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotDisabledFilterTooltip-test.tsx.snap @@ -46,7 +46,7 @@ exports[`should render correctly and stop event propagation 1`] = ` <div> <div - class="sw-body-sm sw-w-[190px]" + class="sw-typo-default sw-w-[190px]" > <p> indexation.page_unavailable.description @@ -57,7 +57,7 @@ exports[`should render correctly and stop event propagation 1`] = ` class="sw-mx-0 sw-my-3 sw-p-0 sw-w-full" /> <span - class="sw-body-sm-highlight" + class="sw-typo-semibold" > indexation.learn_more </span> diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx index 04468e298a2..15e3dc4c1f0 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx +++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusDescription.tsx @@ -33,13 +33,13 @@ export default function StatusDescription(props: StatusDescriptionProps) { return ( <div> <h2> - <LightPrimary className="sw-body-sm-highlight"> + <LightPrimary className="sw-typo-semibold"> {`${translate('status')}: `} {translate('hotspots.status_option', statusOption)} </LightPrimary> </h2> <Description className="sw-mt-1"> - <LightLabel className="sw-body-sm"> + <LightLabel className="sw-typo-default"> {translate('hotspots.status_option', statusOption, 'description')} </LightLabel> </Description> diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx index dd45a7060e3..21ea7d31278 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/Login.tsx @@ -57,7 +57,7 @@ export default function Login(props: Readonly<LoginProps>) { <Helmet defer={false} title={translate('login.page')} /> <Image alt="" className="sw-mt-32" src="/images/sonar-logo-horizontal.png" /> <Card className="sw-my-14 sw-p-0 sw-w-abs-350"> - <PageContentFontWrapper className="sw-body-md sw-flex sw-flex-col sw-items-center sw-py-8 sw-px-4"> + <PageContentFontWrapper className="sw-typo-lg sw-flex sw-flex-col sw-items-center sw-py-8 sw-px-4"> <Image alt="" className="sw-mb-6" src="/images/embed-doc/sq-icon.svg" width={28} /> <Title className="sw-mb-6">{translate('login.login_to_sonarqube')}</Title> <Spinner isLoading={loading}> diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx index 3f7a91b5e80..0c00fc5f49d 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/Logout.tsx @@ -39,7 +39,7 @@ export default function Logout() { return ( <CenteredLayout> - <PageContentFontWrapper className="sw-body-md sw-mt-14 sw-text-center"> + <PageContentFontWrapper className="sw-typo-lg sw-mt-14 sw-text-center"> {translate('logging_out')} </PageContentFontWrapper> </CenteredLayout> diff --git a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx index d94e2c0a8cc..d4dd0f9eba2 100644 --- a/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx +++ b/server/sonar-web/src/main/js/apps/sessions/components/Unauthorized.tsx @@ -28,7 +28,7 @@ export default function Unauthorized() { return ( <CenteredLayout id="bd"> <Helmet defer={false} title={translate('unauthorized.page')} /> - <PageContentFontWrapper className="sw-body-md sw-flex sw-justify-center" id="nonav"> + <PageContentFontWrapper className="sw-typo-lg sw-flex sw-justify-center" id="nonav"> <Card className="sw-w-abs-500 sw-my-14 sw-text-center"> <p id="unauthorized">{translate('unauthorized.message')}</p> diff --git a/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx index c51f3bbf7e5..884ce277337 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/SettingsAppRenderer.tsx @@ -75,7 +75,7 @@ function SettingsAppRenderer(props: Readonly<SettingsAppRendererProps>) { <PageContentFontWrapper className="sw-my-8"> <PageHeader component={component} definitions={definitions} /> - <div className="sw-body-sm sw-flex sw-items-stretch sw-justify-between"> + <div className="sw-typo-default sw-flex sw-items-stretch sw-justify-between"> <div className="sw-min-w-abs-250"> <AllCategoriesList categories={categories} diff --git a/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx index ad11a8197ad..0ca4394b761 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/SettingsSearchRenderer.tsx @@ -85,7 +85,7 @@ export default function SettingsSearchRenderer(props: Readonly<SettingsSearchRen onClick={props.onClickOutside} to={buildSettingLink(r, component)} > - <h3 className="sw-body-sm-highlight">{r.name ?? r.subCategory}</h3> + <h3 className="sw-typo-semibold">{r.name ?? r.subCategory}</h3> {isRealSettingKey(r.key) && ( <StyledNote>{translateWithParameters('settings.key_x', r.key)}</StyledNote> )} diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx index 0a2b1bdf067..317878dd22d 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormRenderer.tsx @@ -107,7 +107,7 @@ export default class AlmBindingDefinitionFormRenderer extends React.PureComponen const formBody = ( <form id={FORM_ID} onSubmit={handleSubmit}> - <PageContentFontWrapper className="sw-body-sm" ref={errorListElementRef}> + <PageContentFontWrapper className="sw-typo-default" ref={errorListElementRef}> {validationError && !canSubmit && ( <FlagMessage variant="error" className="sw-w-full sw-mb-2"> <div> diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx index 1d86f614874..a18e176b0f4 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/ProvisioningSection.tsx @@ -94,7 +94,7 @@ export default function ProvisioningSection(props: Readonly<Props>) { value={ProvisioningType.jit} > <div> - <div className="sw-body-sm-highlight">{jitTitle}</div> + <div className="sw-typo-semibold">{jitTitle}</div> <div className="sw-mt-1">{jitDescription}</div> </div> @@ -114,12 +114,12 @@ export default function ProvisioningSection(props: Readonly<Props>) { disabled={!hasFeatureEnabled || hasDifferentProvider} > <div> - <div className="sw-body-sm-highlight">{autoTitle}</div> + <div className="sw-typo-semibold">{autoTitle}</div> <div className="sw-mt-1"> {hasFeatureEnabled ? ( <> {hasDifferentProvider && ( - <p className="sw-mb-2 sw-body-sm-highlight"> + <p className="sw-mb-2 sw-typo-semibold"> {translate('settings.authentication.form.other_provisioning_enabled')} </p> )} diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx index 929ec4946a9..966260e0c89 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationConfiguration.tsx @@ -129,21 +129,15 @@ export default function EmailNotificationConfiguration(props: Readonly<Props>) { <form id={FORM_ID} onSubmit={onSubmit}> <NumberedList> <NumberedListItem className="sw-pt-6"> - <span className="sw-body-sm-highlight"> - {translate('email_notification.subheading.1')} - </span> + <span className="sw-typo-semibold">{translate('email_notification.subheading.1')}</span> <AuthenticationSelector configuration={newConfiguration} onChange={onChange} /> </NumberedListItem> <NumberedListItem className="sw-pt-6"> - <span className="sw-body-sm-highlight"> - {translate('email_notification.subheading.2')} - </span> + <span className="sw-typo-semibold">{translate('email_notification.subheading.2')}</span> <CommonSMTP configuration={newConfiguration} onChange={onChange} /> </NumberedListItem> <NumberedListItem className="sw-pt-6"> - <span className="sw-body-sm-highlight"> - {translate('email_notification.subheading.3')} - </span> + <span className="sw-typo-semibold">{translate('email_notification.subheading.3')}</span> <SenderInformation configuration={newConfiguration} onChange={onChange} /> </NumberedListItem> </NumberedList> diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx index e76898e482e..8685ae4a7f0 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailNotificationOverview.tsx @@ -40,7 +40,7 @@ export default function EmailNotificationOverview(props: Readonly<EmailTestModal <BasicSeparator className="sw-my-6" /> <div className="sw-flex sw-justify-between"> <div className="sw-grid sw-gap-4"> - <span className="sw-body-md-highlight sw-col-span-2"> + <span className="sw-typo-lg-semibold sw-col-span-2"> {translate('email_notification.overview.heading')} </span> @@ -100,7 +100,7 @@ export default function EmailNotificationOverview(props: Readonly<EmailTestModal function PublicValue({ messageKey, value }: Readonly<{ messageKey: string; value: string }>) { return ( <> - <label className="sw-body-sm-highlight">{translate(messageKey)}</label> + <label className="sw-typo-semibold">{translate(messageKey)}</label> <div data-testid={`${messageKey}.value`}> <CodeSnippet className="sw-px-1 sw-truncate" isOneLine noCopy snippet={value} /> </div> @@ -111,7 +111,7 @@ function PublicValue({ messageKey, value }: Readonly<{ messageKey: string; value function PrivateValue({ messageKey }: Readonly<{ messageKey: string }>) { return ( <> - <label className="sw-body-sm-highlight">{translate(messageKey)}</label> + <label className="sw-typo-semibold">{translate(messageKey)}</label> <span data-testid={`${messageKey}.value`}> <FormattedMessage id="email_notification.overview.private" /> </span> diff --git a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx index 781b06a166b..962284abd66 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/email-notification/EmailTestModal.tsx @@ -133,7 +133,7 @@ export default function EmailTestModal() { title={formatMessage({ id: 'email_notification.test.modal_title' })} > <div className="sw-flex sw-justify-between sw-items-center"> - <span className="sw-body-md-highlight"> + <span className="sw-typo-lg-semibold"> {formatMessage({ id: 'email_notification.test.title' })} </span> <Button onClick={() => setIsOpen(true)} variety={ButtonVariety.Default}> diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx index f18538e6834..bdc8b5a2f9e 100644 --- a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx +++ b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx @@ -72,7 +72,7 @@ export default class EncryptionApp extends React.PureComponent<{}, State> { return ( <LargeCenteredLayout id="encryption-page"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('property.category.security.encryption')} /> <header> <Title>{translate('property.category.security.encryption')}</Title> diff --git a/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx b/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx index 0e901c5fc50..efc7d96a17d 100644 --- a/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx +++ b/server/sonar-web/src/main/js/apps/system/components/SystemApp.tsx @@ -127,7 +127,7 @@ class SystemApp extends React.PureComponent<Props, State> { return ( <LargeCenteredLayout as="main"> <Helmet defer={false} title={translate('system_info.page')} /> - <PageContentFontWrapper className="sw-body-sm sw-pb-8"> + <PageContentFontWrapper className="sw-typo-default sw-pb-8"> <div> <UpdateNotification /> </div> diff --git a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx index 713bcef1726..b8ea9408732 100644 --- a/server/sonar-web/src/main/js/apps/users/UsersApp.tsx +++ b/server/sonar-web/src/main/js/apps/users/UsersApp.tsx @@ -97,7 +97,7 @@ export default function UsersApp() { return ( <LargeCenteredLayout as="main" id="users-page"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Helmet defer={false} title={translate('users.page')} /> <Header manageProvider={manageProvider?.provider} /> {manageProvider?.provider === Provider.Github && <GitHubSynchronisationWarning short />} @@ -117,11 +117,11 @@ export default function UsersApp() { value={search} /> <div className="sw-flex sw-items-center sw-ml-4"> - <StyledPageTitle as="label" className="sw-body-sm-highlight sw-mr-2"> + <StyledPageTitle as="label" className="sw-typo-semibold sw-mr-2"> {translate('users.filter.by')} </StyledPageTitle> <InputSelect - className="sw-body-sm" + className="sw-typo-default" size="medium" id="users-activity-filter" isDisabled={isLoading} diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx index 7bbe0507467..3fb53db1e74 100644 --- a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx @@ -290,9 +290,7 @@ export function TokensForm(props: Readonly<Props>) { > {tokens && tokens.length <= 0 ? ( <TableRow> - <ContentCell className="sw-body-lg" colSpan={7}> - {translate('users.no_tokens')} - </ContentCell> + <ContentCell colSpan={7}>{translate('users.no_tokens')}</ContentCell> </TableRow> ) : ( tokens?.map((token) => ( diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx index eb52a7cac45..7fe3adb9f5c 100644 --- a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx @@ -37,7 +37,7 @@ export default function UserListItemIdentity({ identityProvider, user, managePro return ( <div> <div className="sw-flex sw-flex-col"> - <strong className="it__user-name sw-body-sm-highlight">{user.name}</strong> + <strong className="it__user-name sw-typo-semibold">{user.name}</strong> <Note className="it__user-login">{user.login}</Note> </div> {isDefined(user.email) && user.email !== '' && ( diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx index c041e68f028..872b3ab08f1 100644 --- a/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx +++ b/server/sonar-web/src/main/js/apps/web-api-v2/WebApiApp.tsx @@ -67,7 +67,7 @@ export default function WebApiApp() { return ( <ApiFilterContext.Provider value={contextValue}> <LargeCenteredLayout> - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <Helmet defer={false} title={translate('api_documentation.page')} /> <Spinner isLoading={isLoading}> {data && ( diff --git a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx index 1e79da3a816..8ae9c881ed4 100644 --- a/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx +++ b/server/sonar-web/src/main/js/apps/web-api-v2/components/ApiParameters.tsx @@ -108,7 +108,7 @@ export default function ApiParameters({ data }: Readonly<Props>) { id="api_documentation.v2.enum_description" values={{ values: ( - <div className="sw-body-sm-highlight"> + <div className="sw-typo-semibold"> {parameter.schema.enum.join(', ')} </div> ), diff --git a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx index 44679081db0..e5111ae3543 100644 --- a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx +++ b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.tsx @@ -167,7 +167,7 @@ export class WebApiApp extends React.PureComponent<Props, State> { return ( <LargeCenteredLayout> - <PageContentFontWrapper className="sw-body-sm sw-w-full sw-flex"> + <PageContentFontWrapper className="sw-typo-default sw-w-full sw-flex"> <Helmet defer={false} title={translate('api_documentation.page')} /> <div className="sw-w-full sw-flex"> <NavContainer diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx index 6c9827abee7..a1ed019d0ca 100644 --- a/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/webhooks/components/App.tsx @@ -101,7 +101,7 @@ export function App({ component }: AppProps) { return ( <LargeCenteredLayout id="project-webhooks"> - <PageContentFontWrapper className="sw-my-8 sw-body-sm"> + <PageContentFontWrapper className="sw-my-8 sw-typo-default"> <Suggestions suggestion={DocLink.Webhooks} /> <Helmet defer={false} title={translate('webhooks.page')} /> <PageHeader> diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx index 4096625c911..92bd714356c 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx @@ -116,13 +116,11 @@ export default function SourceViewerHeader(props: Readonly<Props>) { return ( <div className="sw-flex sw-flex-col sw-gap-1" key={quality}> - <Note className="it__source-viewer-header-measure-label sw-body-lg"> - {qualityTitle} - </Note> + <Note className="it__source-viewer-header-measure-label">{qualityTitle}</Note> <span> <StyledDrilldownLink - className="sw-body-md" + className="sw-typo-lg" aria-label={intl.formatMessage( { id: 'source_viewer.issue_link_x' }, { @@ -140,13 +138,13 @@ export default function SourceViewerHeader(props: Readonly<Props>) { })} <div className="sw-flex sw-flex-col sw-gap-1" key={IssueType.SecurityHotspot}> - <Note className="it__source-viewer-header-measure-label sw-body-lg"> + <Note className="it__source-viewer-header-measure-label"> {intl.formatMessage({ id: `issue.type.${IssueType.SecurityHotspot}` })} </Note> <span> <StyledDrilldownLink - className="sw-body-md" + className="sw-typo-lg" to={getComponentSecurityHotspotsUrl(project, branchLike, { files: path, ...DEFAULT_ISSUES_QUERY, @@ -172,7 +170,7 @@ export default function SourceViewerHeader(props: Readonly<Props>) { return ( <StyledHeaderContainer className={ - 'it__source-viewer-header sw-body-sm sw-flex sw-items-center sw-px-4 sw-py-3 ' + + 'it__source-viewer-header sw-typo-default sw-flex sw-items-center sw-px-4 sw-py-3 ' + 'sw-relative' } > @@ -206,37 +204,31 @@ export default function SourceViewerHeader(props: Readonly<Props>) { <div className="sw-flex sw-gap-6 sw-items-center"> {isDefined(measures[unitTestsOrLines]) && ( <div className="sw-flex sw-flex-col sw-gap-1"> - <Note className="it__source-viewer-header-measure-label sw-body-lg"> + <Note className="it__source-viewer-header-measure-label"> {intl.formatMessage({ id: `metric.${unitTestsOrLines}.name` })} </Note> - <span className="sw-body-lg"> - {formatMeasure(measures[unitTestsOrLines], MetricType.ShortInteger)} - </span> + <span>{formatMeasure(measures[unitTestsOrLines], MetricType.ShortInteger)}</span> </div> )} {isDefined(measures.coverage) && ( <div className="sw-flex sw-flex-col sw-gap-1"> - <Note className="it__source-viewer-header-measure-label sw-body-lg"> + <Note className="it__source-viewer-header-measure-label"> {intl.formatMessage({ id: 'metric.coverage.name' })} </Note> - <span className="sw-body-lg"> - {formatMeasure(measures.coverage, MetricType.Percent)} - </span> + <span>{formatMeasure(measures.coverage, MetricType.Percent)}</span> </div> )} {isDefined(measures.duplicationDensity) && ( <div className="sw-flex sw-flex-col sw-gap-1"> - <Note className="it__source-viewer-header-measure-label sw-body-lg"> + <Note className="it__source-viewer-header-measure-label"> {intl.formatMessage({ id: 'duplications' })} </Note> - <span className="sw-body-lg"> - {formatMeasure(measures.duplicationDensity, MetricType.Percent)} - </span> + <span>{formatMeasure(measures.duplicationDensity, MetricType.Percent)}</span> </div> )} diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx index 98dbcb80733..4ec2ff70e53 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/components/DuplicationPopup.tsx @@ -121,7 +121,7 @@ export default class DuplicationPopup extends PureComponent<Props> { <DuplicationHighlight>{duplicationHeader}</DuplicationHighlight> {duplications.map((duplication) => ( <div className="sw-my-2" key={duplication.file.key}> - <div className="sw-flex sw-flex-wrap sw-body-sm"> + <div className="sw-flex sw-flex-wrap sw-typo-default"> {this.isDifferentComponent(duplication.file, this.props.sourceViewerFile) && ( <div className="sw-mr-4"> <QualifierIcon className="sw-mr-1" qualifier={ComponentQualifier.Project} /> diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx index 1ef69f5ddf1..f3a9eaff1d1 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx @@ -165,7 +165,7 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> { } > <Button suffix={<IconChevronDown />}> - <span className="sw-body-sm sw-flex"> + <span className="sw-typo-default sw-flex"> {translate('project_activity.graphs.custom.add')} </span> </Button> diff --git a/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx index 363e77fd65f..58caf7160e4 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/DefinitionChangeEventInner.tsx @@ -139,9 +139,9 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State const { event, readonly } = this.props; const { expanded } = this.state; return ( - <div className="sw-w-full sw-body-sm sw-py-1/2"> + <div className="sw-w-full sw-typo-default sw-py-1/2"> <div className="sw-flex sw-justify-between"> - <Note className="sw-mr-1 sw-body-sm-highlight"> + <Note className="sw-mr-1 sw-typo-semibold"> {translate('event.category', event.category)} </Note> diff --git a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx index 68d72ffc5b9..ac98fba7d3c 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx @@ -47,7 +47,7 @@ export default function EventInner({ event, readonly }: EventInnerProps) { } else if (isRichQualityProfileEvent(event)) { return ( <div> - <Note className="sw-mr-1 sw-body-sm-highlight"> + <Note className="sw-mr-1 sw-typo-semibold"> {translate('event.category', event.category)} </Note> <Note> @@ -69,11 +69,11 @@ export default function EventInner({ event, readonly }: EventInnerProps) { <div className="sw-min-w-0 sw-flex-1 sw-py-1/2"> <div className="sw-flex sw-items-start"> <span> - <Note className="sw-mr-1 sw-body-sm-highlight"> + <Note className="sw-mr-1 sw-typo-semibold"> {translate('event.category', event.category)} {event.category === 'VERSION' && ':'} </Note> - <Note className="sw-body-sm" title={event.description}> + <Note className="sw-typo-default" title={event.description}> {event.name} </Note> </span> diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx index b50b4413050..78d22c7c9ec 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx @@ -62,7 +62,7 @@ export default function GraphsHeader(props: Props) { return ( <div className={className}> <ButtonGroup> - <label htmlFor="graph-type" className="sw-body-sm-highlight"> + <label htmlFor="graph-type" className="sw-typo-semibold"> {translate('project_activity.graphs.choose_type')} </label> <Select diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx index a701dff7596..2cea7573ddc 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx @@ -71,7 +71,10 @@ export function GraphsLegendItem({ ) : ( <ChartLegend className="sw-mr-2" index={index} /> )} - <span className="sw-body-sm" style={{ color: themeColor('graphCursorLineColor')({ theme }) }}> + <span + className="sw-typo-default" + style={{ color: themeColor('graphCursorLineColor')({ theme }) }} + > {name} </span> {isDeprecated && ( diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx index 45138350586..e7b2b5f0f6c 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx @@ -104,7 +104,7 @@ export class GraphsTooltipsClass extends React.PureComponent<Props> { > <div className="sw-p-2"> <div - className="sw-body-md-highlight sw-whitespace-nowrap" + className="sw-typo-lg-semibold sw-whitespace-nowrap" style={{ color: themeColor('selectionCardHeader')({ theme }) }} > <DateTimeFormatter date={selectedDate} /> diff --git a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx index 2c89199f271..32bcd2c6df0 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx @@ -57,10 +57,10 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State> const { event, readonly } = this.props; const { expanded } = this.state; return ( - <div className="sw-w-full sw-body-sm sw-py-1/2"> + <div className="sw-w-full sw-typo-default sw-py-1/2"> <div className="sw-flex sw-justify-between"> <div className="sw-flex sw-items-center"> - <Note className="sw-mr-1 sw-body-sm-highlight"> + <Note className="sw-mr-1 sw-typo-semibold"> {translate('event.category', event.category)} </Note> diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx index 2f86e9e75ed..4e7f000e30c 100644 --- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx +++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx @@ -345,7 +345,7 @@ export class AdvancedTimelineClass extends React.PureComponent<Props, State> { <g key={tick}> {formatYTick != null && ( <text - className="line-chart-tick line-chart-tick-x sw-body-sm" + className="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" textAnchor="end" @@ -382,7 +382,7 @@ export class AdvancedTimelineClass extends React.PureComponent<Props, State> { return ( <text - className="line-chart-tick sw-body-sm" + className="line-chart-tick sw-typo-default" // eslint-disable-next-line react/no-array-index-key key={index} textAnchor="end" diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap index b44f642ade9..b9c083f888e 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap @@ -170,7 +170,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -179,7 +179,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -188,7 +188,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -197,7 +197,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -206,7 +206,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -215,7 +215,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -224,7 +224,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -233,7 +233,7 @@ exports[`should render correctly: Zoom enabled 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -434,7 +434,7 @@ exports[`should render correctly: basisCurve 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -443,7 +443,7 @@ exports[`should render correctly: basisCurve 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -452,7 +452,7 @@ exports[`should render correctly: basisCurve 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -461,7 +461,7 @@ exports[`should render correctly: basisCurve 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -470,7 +470,7 @@ exports[`should render correctly: basisCurve 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -479,7 +479,7 @@ exports[`should render correctly: basisCurve 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -488,7 +488,7 @@ exports[`should render correctly: basisCurve 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -497,7 +497,7 @@ exports[`should render correctly: basisCurve 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -698,7 +698,7 @@ exports[`should render correctly: default 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -707,7 +707,7 @@ exports[`should render correctly: default 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -716,7 +716,7 @@ exports[`should render correctly: default 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -725,7 +725,7 @@ exports[`should render correctly: default 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -734,7 +734,7 @@ exports[`should render correctly: default 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -743,7 +743,7 @@ exports[`should render correctly: default 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -752,7 +752,7 @@ exports[`should render correctly: default 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -761,7 +761,7 @@ exports[`should render correctly: default 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -815,7 +815,7 @@ exports[`should render correctly: format y tick 1`] = ` <g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -834,7 +834,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -853,7 +853,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -872,7 +872,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -891,7 +891,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -910,7 +910,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -929,7 +929,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -948,7 +948,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -967,7 +967,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -986,7 +986,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1005,7 +1005,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1024,7 +1024,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1043,7 +1043,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1062,7 +1062,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1081,7 +1081,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1100,7 +1100,7 @@ exports[`should render correctly: format y tick 1`] = ` </g> <g> <text - class="line-chart-tick line-chart-tick-x sw-body-sm" + class="line-chart-tick line-chart-tick-x sw-typo-default" dx="-1em" dy="0.3em" text-anchor="end" @@ -1122,7 +1122,7 @@ exports[`should render correctly: format y tick 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -1131,7 +1131,7 @@ exports[`should render correctly: format y tick 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -1140,7 +1140,7 @@ exports[`should render correctly: format y tick 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -1149,7 +1149,7 @@ exports[`should render correctly: format y tick 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -1158,7 +1158,7 @@ exports[`should render correctly: format y tick 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -1167,7 +1167,7 @@ exports[`should render correctly: format y tick 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -1176,7 +1176,7 @@ exports[`should render correctly: format y tick 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -1185,7 +1185,7 @@ exports[`should render correctly: format y tick 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -1394,7 +1394,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -1403,7 +1403,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -1412,7 +1412,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -1421,7 +1421,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -1430,7 +1430,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -1439,7 +1439,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -1448,7 +1448,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -1457,7 +1457,7 @@ exports[`should render correctly: leakPeriodDate 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -1541,7 +1541,7 @@ exports[`should render correctly: level metric 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -1550,7 +1550,7 @@ exports[`should render correctly: level metric 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -1559,7 +1559,7 @@ exports[`should render correctly: level metric 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -1568,7 +1568,7 @@ exports[`should render correctly: level metric 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -1577,7 +1577,7 @@ exports[`should render correctly: level metric 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -1586,7 +1586,7 @@ exports[`should render correctly: level metric 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -1595,7 +1595,7 @@ exports[`should render correctly: level metric 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -1604,7 +1604,7 @@ exports[`should render correctly: level metric 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -1804,7 +1804,7 @@ exports[`should render correctly: no areas 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -1813,7 +1813,7 @@ exports[`should render correctly: no areas 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -1822,7 +1822,7 @@ exports[`should render correctly: no areas 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -1831,7 +1831,7 @@ exports[`should render correctly: no areas 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -1840,7 +1840,7 @@ exports[`should render correctly: no areas 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -1849,7 +1849,7 @@ exports[`should render correctly: no areas 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -1858,7 +1858,7 @@ exports[`should render correctly: no areas 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -1867,7 +1867,7 @@ exports[`should render correctly: no areas 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -1973,7 +1973,7 @@ exports[`should render correctly: rating metric 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -1982,7 +1982,7 @@ exports[`should render correctly: rating metric 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -1991,7 +1991,7 @@ exports[`should render correctly: rating metric 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -2000,7 +2000,7 @@ exports[`should render correctly: rating metric 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -2009,7 +2009,7 @@ exports[`should render correctly: rating metric 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -2018,7 +2018,7 @@ exports[`should render correctly: rating metric 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -2027,7 +2027,7 @@ exports[`should render correctly: rating metric 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -2036,7 +2036,7 @@ exports[`should render correctly: rating metric 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -2237,7 +2237,7 @@ exports[`should render correctly: selected date 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -2246,7 +2246,7 @@ exports[`should render correctly: selected date 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -2255,7 +2255,7 @@ exports[`should render correctly: selected date 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -2264,7 +2264,7 @@ exports[`should render correctly: selected date 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -2273,7 +2273,7 @@ exports[`should render correctly: selected date 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -2282,7 +2282,7 @@ exports[`should render correctly: selected date 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -2291,7 +2291,7 @@ exports[`should render correctly: selected date 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -2300,7 +2300,7 @@ exports[`should render correctly: selected date 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -2526,7 +2526,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -2535,7 +2535,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -2544,7 +2544,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -2553,7 +2553,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -2562,7 +2562,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -2571,7 +2571,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -2580,7 +2580,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -2589,7 +2589,7 @@ exports[`should render correctly: split point, but not Rating 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" @@ -2798,7 +2798,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` transform="translate(0, 20)" > <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 15, 24)" x="15" @@ -2807,7 +2807,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` October </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 20, 24)" x="20" @@ -2816,7 +2816,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 25, 24)" x="25" @@ -2825,7 +2825,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 30, 24)" x="30" @@ -2834,7 +2834,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` 06 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 35, 24)" x="35" @@ -2843,7 +2843,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` Wed 02 </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 40, 24)" x="40" @@ -2852,7 +2852,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` 06 AM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 45, 24)" x="45" @@ -2861,7 +2861,7 @@ exports[`should render correctly: zoomSpeed 1`] = ` 12 PM </text> <text - class="line-chart-tick sw-body-sm" + class="line-chart-tick sw-typo-default" text-anchor="end" transform="rotate(-35, 50, 24)" x="50" diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap index 1acc158dd24..582d44ea4d2 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/LanguageDistribution-test.tsx.snap @@ -6,10 +6,7 @@ exports[`should render correctly 1`] = ` } .emotion-2 { - font-family: Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 400; + font: var(--echoes-typography-text-default-regular); fill: rgb(106,117,144); } diff --git a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx index 0a04807749c..0d2b577a250 100644 --- a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx +++ b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx @@ -37,7 +37,7 @@ export default function ActivityLink(props: ActivityLinkProps) { const { branchLike, component, graph, label, metric } = props; return ( <StandoutLink - className="sw-body-sm-highlight" + className="sw-typo-semibold" to={ metric !== undefined && graph !== undefined && isCustomGraph(graph) ? getMeasureHistoryUrl(component, metric, branchLike) diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.tsx b/server/sonar-web/src/main/js/components/common/EmptySearch.tsx index 1cc17046347..d452db59c42 100644 --- a/server/sonar-web/src/main/js/components/common/EmptySearch.tsx +++ b/server/sonar-web/src/main/js/components/common/EmptySearch.tsx @@ -25,10 +25,10 @@ export default function EmptySearch() { return ( <div aria-live="assertive" className="sw-text-center sw-py-8"> <FishVisual /> - <Highlight as="h3" className="sw-body-md-highlight sw-mt-6"> + <Highlight as="h3" className="sw-typo-lg-semibold sw-mt-6"> {translate('no_results_search')} </Highlight> - <p className="sw-body-sm sw-mt-2">{translate('no_results_search.2')}</p> + <p className="sw-typo-default sw-mt-2">{translate('no_results_search.2')}</p> </div> ); } diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx index 22fc0692d78..4439c0b6d6e 100644 --- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx +++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx @@ -76,7 +76,7 @@ export default function ListFooter(props: ListFooterProps) { button = ( <Button data-test="reload" - className="sw-ml-2 sw-body-sm" + className="sw-ml-2 sw-typo-default" isDisabled={loading} onClick={props.reload} > @@ -88,7 +88,7 @@ export default function ListFooter(props: ListFooterProps) { <Button aria-label={loadMoreAriaLabel} data-test="show-more" - className="sw-ml-2 sw-body-sm" + className="sw-ml-2 sw-typo-default" isDisabled={loading} onClick={onLoadMore} > @@ -103,7 +103,7 @@ export default function ListFooter(props: ListFooterProps) { ref={rootNode} className={classNames( 'list-footer', // .list-footer is only used by Selenium tests; we should find a way to remove it. - 'sw-body-sm sw-flex sw-items-center sw-justify-center', + 'sw-typo-default sw-flex sw-items-center sw-justify-center', { 'sw-opacity-50 sw-duration-500 sw-ease-in-out': !ready }, className, )} diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx index 10b2c7336a1..9377e2076b1 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx @@ -54,7 +54,7 @@ export default function IssueActionsBar(props: Readonly<Props>) { return ( <div className="sw-flex sw-gap-3 sw-min-w-0"> - <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-body-sm sw-min-w-0"> + <ul className="it__issue-header-actions sw-flex sw-items-center sw-gap-3 sw-typo-default sw-min-w-0"> <HighlightRing as="li" className="sw-relative" diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx index 0bdebede08d..d82b792b1e8 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx @@ -49,10 +49,10 @@ export default function IssueMetaBar(props: Readonly<Props>) { const hasComments = !!issue.comments?.length; const issueMetaListItemClassNames = - 'sw-body-xs sw-overflow-hidden sw-whitespace-nowrap sw-max-w-abs-150'; + 'sw-typo-sm sw-overflow-hidden sw-whitespace-nowrap sw-max-w-abs-150'; return ( - <ul className="sw-flex sw-items-center sw-gap-1 sw-body-xs sw-whitespace-nowrap"> + <ul className="sw-flex sw-items-center sw-gap-1 sw-typo-sm sw-whitespace-nowrap"> {issue.line && ( <> <IssueMetaListItem className={issueMetaListItemClassNames}> diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx index 0e16b83a796..f3fa3136df0 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueTags.tsx @@ -66,8 +66,8 @@ export class IssueTags extends React.PureComponent<Props> { <Tags allowUpdate={this.props.canSetTags && !component?.needIssueSync} ariaTagsListLabel={translate('issue.tags')} - className="js-issue-edit-tags sw-body-xs" - tagsClassName="sw-body-xs" + className="js-issue-edit-tags sw-typo-sm" + tagsClassName="sw-typo-sm" emptyText={translate('issue.no_tag')} menuId="issue-tags-menu" onClose={this.handleClose} diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap index 930baff4a3c..9891aa5fe8e 100644 --- a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/MeasureIndicator-test.tsx.snap @@ -107,7 +107,7 @@ exports[`renders correctly for passed quality gate 1`] = ` </svg> </div> <span - class="sw-body-md" + class="sw-typo-lg" > OK </span> diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx index 0a1a5384b8a..535803665c5 100644 --- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx +++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx @@ -101,7 +101,7 @@ export default function NewCodeDefinitionSelector(props: Props) { return ( <PageContentFontWrapper> <p className="sw-mt-10"> - <strong className="sw-body-md-highlight"> + <strong className="sw-typo-lg-semibold"> {isMultipleProjects ? translate('new_code_definition.question.multiple_projects') : translate('new_code_definition.question')} diff --git a/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx b/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx index 482ebc1ab19..7ee5e86902b 100644 --- a/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx +++ b/server/sonar-web/src/main/js/components/rules/IssueSuggestionCodeTab.tsx @@ -47,7 +47,7 @@ export function IssueSuggestionCodeTab({ branchLike, issue, language }: Readonly {isPending && !isLoading && !isError && ( <div className="sw-flex sw-flex-col sw-items-center"> <OverviewQGPassedIcon className="sw-mt-6" /> - <p className="sw-body-sm-highlight sw-mt-4"> + <p className="sw-typo-semibold sw-mt-4"> {translate('issues.code_fix.let_us_suggest_fix')} </p> <Button @@ -62,7 +62,7 @@ export function IssueSuggestionCodeTab({ branchLike, issue, language }: Readonly {isLoading && ( <div className="sw-flex sw-pt-6 sw-flex-col sw-items-center"> <InProgressVisual /> - <p className="sw-body-sm-highlight sw-mt-4"> + <p className="sw-typo-semibold sw-mt-4"> {translate('issues.code_fix.fix_is_being_generated')} </p> </div> @@ -70,7 +70,7 @@ export function IssueSuggestionCodeTab({ branchLike, issue, language }: Readonly {isError && ( <div className="sw-flex sw-flex-col sw-items-center"> <OverviewQGNotComputedIcon className="sw-mt-6" /> - <p className="sw-body-sm-highlight sw-mt-4"> + <p className="sw-typo-semibold sw-mt-4"> {translate('issues.code_fix.something_went_wrong')} </p> <p className="sw-my-4">{translate('issues.code_fix.not_able_to_generate_fix')}</p> diff --git a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx index 6ed51b5592b..ca1341902e4 100644 --- a/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx +++ b/server/sonar-web/src/main/js/components/rules/RuleDescription.tsx @@ -141,7 +141,7 @@ export default class RuleDescription extends React.PureComponent<Props, State> { applyCodeDifferences(node); }} > - <h2 className="sw-body-sm-highlight sw-mb-4"> + <h2 className="sw-typo-semibold sw-mb-4"> {translate('coding_rules.description_context.title')} </h2> {isDefined(introductionSection) && ( diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx index d45e49f4606..f885f379a11 100644 --- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx @@ -137,18 +137,18 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender } return ( - <div className="sw-body-sm"> + <div className="sw-typo-default"> <AnalysisStatus component={component} className="sw-mb-4 sw-w-max" /> {selectedTutorial === undefined && ( <div className="sw-flex sw-flex-col"> - <Title className="sw-mb-6 sw-heading-lg"> + <Title className="sw-mb-6 sw-heading-xl"> {translate('onboarding.tutorial.page.title')} </Title> <LightPrimary>{translate('onboarding.tutorial.page.description')}</LightPrimary> - <SubTitle className="sw-mt-12 sw-mb-4 sw-heading-md"> + <SubTitle className="sw-mt-12 sw-mb-4 sw-heading-lg"> {translate('onboarding.tutorial.choose_method')} </SubTitle> diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx index 6c6384c478d..0eab6c241d0 100644 --- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx @@ -59,7 +59,7 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) { {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')} </LinkStandalone> ) : ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link')} </span> ), @@ -109,7 +109,7 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) { values={{ extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />, field: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.env_variables.field')} </span> ), diff --git a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx index ba6e822ca13..600bbdc6bc4 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx @@ -58,7 +58,7 @@ export function AllSet(props: AllSetProps) { {translate('onboarding.tutorial.ci_outro.done')} </SubTitle> <MessageContainer> - <p className="sw-body-sm sw-mb-4"> + <p className="sw-typo-default sw-mb-4"> {translate('onboarding.tutorial.ci_outro.refresh_text')} </p> <ul className="sw-mb-6"> diff --git a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx index 72316591853..105e1f20e2d 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/EditTokenModal.tsx @@ -165,7 +165,7 @@ export default class EditTokenModal extends React.PureComponent<Props, State> { const intro = translate('onboarding.token.text', type); return ( - <div className="sw-body-sm"> + <div className="sw-typo-default"> <FormattedMessage defaultMessage={intro} id={intro} diff --git a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx index 897a895b9c6..7f173010596 100644 --- a/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/components/TokenStepGenerator.tsx @@ -49,7 +49,7 @@ export default function TokenStepGenerator(props: TokenStepGeneratorProps) { </ButtonSecondary> ), field: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.env_variables.field')} </span> ), diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx index 26fb3f005d9..82669d1f110 100644 --- a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx @@ -64,7 +64,7 @@ export default function SecretStep(props: SecretStepProps) { {translate('onboarding.tutorial.with.github_action.secret.intro.link')} </LinkStandalone> ) : ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.with.github_action.secret.intro.link')} </span> ), @@ -139,7 +139,7 @@ export default function SecretStep(props: SecretStepProps) { values={{ extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />, field: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.env_variables.field')} </span> ), diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx index 6799bada383..260e3bf6536 100644 --- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx @@ -61,7 +61,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep id="onboarding.tutorial.with.gitlab_ci.variables.section.description" values={{ /* This link will be added when the backend provides the project URL */ - link: <span className="sw-body-sm-highlight">{pipelineDescriptionLinkLabel}</span>, + link: <span className="sw-typo-semibold">{pipelineDescriptionLinkLabel}</span>, }} /> @@ -87,7 +87,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep id="onboarding.tutorial.with.gitlab_ci.variables.step3" values={{ value: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')} </span> ), @@ -102,7 +102,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep id="onboarding.tutorial.with.gitlab_ci.variables.section.step4" values={{ value: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')} </span> ), @@ -122,7 +122,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep id="onboarding.tutorial.with.gitlab_ci.variables.section2.description" values={{ /* This link will be added when the backend provides the project URL */ - link: <span className="sw-body-sm-highlight">{pipelineDescriptionLinkLabel}</span>, + link: <span className="sw-typo-semibold">{pipelineDescriptionLinkLabel}</span>, }} /> @@ -149,7 +149,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep values={{ extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />, field: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.env_variables.field')} </span> ), @@ -163,7 +163,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep id="onboarding.tutorial.with.gitlab_ci.variables.step3" values={{ value: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.with.gitlab_ci.variables.step3.value')} </span> ), @@ -178,7 +178,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep id="onboarding.tutorial.with.gitlab_ci.variables.section2.step4" values={{ value: ( - <span className="sw-body-sm-highlight"> + <span className="sw-typo-semibold"> {translate('onboarding.tutorial.with.gitlab_ci.variables.section.step4.value')} </span> ), diff --git a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx index 8f01f1ff9e9..98e4080383f 100644 --- a/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx +++ b/server/sonar-web/src/main/js/components/tutorials/other/OtherTutorial.tsx @@ -58,7 +58,7 @@ export default class OtherTutorial extends React.PureComponent<Props, State> { const { step, token } = this.state; return ( - <PageContentFontWrapper className="sw-body-sm"> + <PageContentFontWrapper className="sw-typo-default"> <div className="sw-mb-4"> <Title>{translate('onboarding.project_analysis.header')} </Title> <LightLabel>{translate('onboarding.project_analysis.description')}</LightLabel> diff --git a/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx b/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx index 9f2bad69747..356732ce473 100644 --- a/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx +++ b/server/sonar-web/src/main/js/components/ui/AdminPageHeader.tsx @@ -34,9 +34,9 @@ export function AdminPageHeader({ children, className, description, title }: Rea return ( <div className={classNames('sw-flex sw-justify-between', className)}> <header className="sw-flex-1"> - <AdminPageTitle className="sw-heading-lg">{title}</AdminPageTitle> + <AdminPageTitle className="sw-heading-xl">{title}</AdminPageTitle> {description && ( - <AdminPageDescription className="sw-body-sm sw-pt-4 sw-max-w-9/12"> + <AdminPageDescription className="sw-typo-default sw-pt-4 sw-max-w-9/12"> {description} </AdminPageDescription> )} diff --git a/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx b/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx index c92f9b9d1f4..29b5d9f616e 100644 --- a/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx +++ b/server/sonar-web/src/main/js/components/ui/FilesCounter.tsx @@ -35,7 +35,7 @@ interface Props { export default function FilesCounter({ className, current, total }: Props) { return ( <Note className={classNames('sw-whitespace-nowrap', className)}> - <Counter className="sw-body-sm-highlight"> + <Counter className="sw-typo-semibold"> {isDefined(current) && formatMeasure(current, MetricType.Integer) + '/'} {formatMeasure(total, MetricType.Integer)} </Counter>{' '} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx index adb623f07e2..937e24e1984 100644 --- a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx @@ -50,7 +50,7 @@ export default class WorkspaceHeader extends React.PureComponent<Props> { render() { return ( <StyledWorkSpaceHeader> - <StyledWorkspaceName className="sw-body-sm sw-inline-flex sw-items-center"> + <StyledWorkspaceName className="sw-typo-default sw-inline-flex sw-items-center"> {this.props.children} </StyledWorkspaceName> diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx index 6448a4b30a5..b5cd9db3356 100644 --- a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx @@ -39,7 +39,7 @@ export default class WorkspaceNavItem extends React.PureComponent<Props> { return ( <StyledWorkspaceNavItem className="sw-mr-2"> <StyledWorkSpaceNavItemButton - className="sw-body-sm sw-pr-8 sw-pl-2" + className="sw-typo-default sw-pr-8 sw-pl-2" onClick={this.handleNameClick} > {this.props.children} diff --git a/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx index 6e95c19302c..b195fe6c0ab 100644 --- a/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx +++ b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx @@ -29,13 +29,30 @@ import RatingComponent from '../../../app/components/metrics/RatingComponent'; import RatingTooltipContent from '../../../components/measure/RatingTooltipContent'; import { BranchLike } from '../../../types/branch-like'; +type FontClass = + | 'sw-heading-xs' + | 'sw-heading-sm' + | 'sw-heading-md' + | 'sw-heading-lg' + | 'sw-heading-xl' + | 'sw-typo-default' + | 'sw-typo-semibold' + | 'sw-typo-bold' + | 'sw-typo-sm' + | 'sw-typo-sm-semibold' + | 'sw-typo-lg' + | 'sw-typo-lg-semibold' + | 'sw-typo-label' + | 'sw-typo-helper-text' + | 'sw-typo-display'; + interface Props { badgeSize?: 'xs' | 'sm' | 'md'; branchLike?: BranchLike; className?: string; componentKey: string; decimals?: number; - fontClassName?: `sw-body-${string}` | `sw-heading-lg`; + fontClassName?: FontClass; forceRatingMetric?: boolean; metricKey: string; metricType: string; @@ -97,7 +114,7 @@ export default function Measure({ className="sw-mr-2" size={small ? 'sm' : 'md'} /> - <span className={small ? '' : 'sw-body-md'}>{formatted}</span> + <span className={small ? '' : 'sw-typo-lg'}>{formatted}</span> </> ); } diff --git a/server/sonar-web/tailwind-echoes.js b/server/sonar-web/tailwind-echoes.js new file mode 100644 index 00000000000..90499536334 --- /dev/null +++ b/server/sonar-web/tailwind-echoes.js @@ -0,0 +1,81 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +const plugin = require('tailwindcss/plugin'); + +module.exports = plugin(({ addUtilities }) => { + const echoes = { + '.code': { + font: 'var(--echoes-typography-code-default)', + }, + '.code-highlight': { + font: 'var(--echoes-typography-code-highlight)', + }, + '.code-comment': { + font: 'var(--echoes-typography-code-comment)', + }, + '.heading-xs': { + font: 'var(--echoes-typography-heading-xsmall)', + }, + '.heading-sm': { + font: 'var(--echoes-typography-heading-small)', + }, + '.heading-md': { + font: 'var(--echoes-typography-heading-medium)', + }, + '.heading-lg': { + font: 'var(--echoes-typography-heading-large)', + }, + '.heading-xl': { + font: 'var(--echoes-typography-heading-xlarge)', + }, + '.typo-default': { + font: 'var(--echoes-typography-text-default-regular)', + }, + '.typo-semibold': { + font: 'var(--echoes-typography-text-default-semi-bold)', + }, + '.typo-bold': { + font: 'var(--echoes-typography-text-default-bold)', + }, + '.typo-sm': { + font: 'var(--echoes-typography-text-small-medium)', + }, + '.typo-sm-semibold': { + font: 'var(--echoes-typography-text-small-semi-bold)', + }, + '.typo-lg': { + font: 'var(--echoes-typography-text-large-regular)', + }, + '.typo-lg-semibold': { + font: 'var(--echoes-typography-text-large-semi-bold)', + }, + '.typo-label': { + font: 'var(--echoes-typography-others-label)', + }, + '.typo-helper-text': { + font: 'var(--echoes-typography-others-helper-text)', + }, + '.typo-display': { + font: 'var(--echoes-typography-display-default)', + }, + }; + + addUtilities(echoes); +}); diff --git a/server/sonar-web/tailwind-utilities.js b/server/sonar-web/tailwind-utilities.js deleted file mode 100644 index d91b17b99ff..00000000000 --- a/server/sonar-web/tailwind-utilities.js +++ /dev/null @@ -1,93 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -const plugin = require('tailwindcss/plugin'); - -module.exports = plugin(({ addUtilities, theme }) => { - const newUtilities = { - '.heading-xl': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.xl'), - 'line-height': theme('fontSize').xl[1], - 'font-weight': theme('fontWeight.semibold'), - }, - '.heading-lg': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.lg'), - 'line-height': theme('fontSize').lg[1], - 'font-weight': theme('fontWeight.semibold'), - }, - '.heading-md': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.md'), - 'line-height': theme('fontSize').md[1], - 'font-weight': theme('fontWeight.semibold'), - }, - '.body-md': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.base'), - 'line-height': theme('fontSize').base[1], - 'font-weight': theme('fontWeight.regular'), - }, - '.body-md-highlight': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.base'), - 'line-height': theme('fontSize').base[1], - 'font-weight': theme('fontWeight.semibold'), - }, - '.body-sm': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.sm'), - 'line-height': theme('fontSize').sm[1], - 'font-weight': theme('fontWeight.regular'), - }, - '.body-xs': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.xs'), - 'line-height': theme('fontSize').xs[1], - 'font-weight': theme('fontWeight.regular'), - }, - '.body-sm-highlight': { - 'font-family': theme('fontFamily.sans'), - 'font-size': theme('fontSize.sm'), - 'line-height': theme('fontSize').sm[1], - 'font-weight': theme('fontWeight.semibold'), - }, - '.code': { - 'font-family': theme('fontFamily.mono'), - 'font-size': theme('fontSize.sm'), - 'line-height': theme('fontSize').code[1], - 'font-weight': theme('fontWeight.regular'), - }, - '.code-highlight': { - 'font-family': theme('fontFamily.mono'), - 'font-size': theme('fontSize.sm'), - 'line-height': theme('fontSize').code[1], - 'font-weight': theme('fontWeight.bold'), - }, - '.code-comment': { - 'font-family': theme('fontFamily.mono'), - 'font-size': theme('fontSize.sm'), - 'line-height': theme('fontSize').code[1], - 'font-style': 'italic', - }, - }; - - addUtilities(newUtilities); -}); diff --git a/server/sonar-web/tailwind.base.config.js b/server/sonar-web/tailwind.base.config.js index 3580352def3..2a05793daf6 100644 --- a/server/sonar-web/tailwind.base.config.js +++ b/server/sonar-web/tailwind.base.config.js @@ -19,11 +19,12 @@ */ const path = require('path'); const { fontFamily } = require('tailwindcss/defaultTheme'); -const utilities = require('./tailwind-utilities'); +const echoesUtilities = require('./tailwind-echoes'); module.exports = { prefix: 'sw-', // Prefix all tailwind classes with the sw- prefix to avoid collisions theme: { + colors: {}, // Define cursors cursor: { auto: 'auto', @@ -146,57 +147,9 @@ module.exports = { }, corePlugins: { // Please respect the alphabetical order in the below plugins - alignItems: true, // .sw-items-x classes - alignSelf: true, // .sw-self-x classes - borderRadius: true, // .sw-rounded-x classes - boxSizing: true, // .sw-box-x classes - cursor: true, // .sw-cursor-not-allowed - display: true, // display classes .sw-grid .sw-flex - flex: true, // .sw-flex-1 .sw-flex-auto ... classes - flexDirection: true, // .sw-flex-row .sw-flex-col-reverse ... classes - flexGrow: true, // .sw-flex-grow .sw-flex-grow-0 classes - flexShrink: true, // .sw-flex-shrink .sw-flex-shrink-0 classes - flexWrap: true, // .sw-flex-wrap sw-flex-nowrap ... classes - fontFamily: true, // .sw-font-sans .sw-font-mono classes - fontSize: true, // .sw-text-sm and similar classes - fontWeight: true, // .sw-font-x classes - gap: true, // .sw-gap-x classes based on spacing - gridAutoFlow: true, // all css grid related classes: .sw-grid-cols-x .sw-col-span-x - gridColumn: true, - gridColumnEnd: true, - gridColumnStart: true, - gridRow: true, - gridRowEnd: true, - gridRowStart: true, - gridTemplateColumns: true, - gridTemplateRows: true, - height: true, // height classes .sw-h-x based on spacing + some more - inset: true, // placement classes .sw-top-x based on spacing + some more - justifyContent: true, // .sw-justify-x classes - lineHeight: true, // .sw-leading-x classes - margin: true, // .sw-m-x classes based on spacing - maxHeight: true, // sw-max-height classes .sw-max-h-x based on spacing + some more - maxWidth: true, // sw-max-width classes .sw-max-w-x based on spacing + some more - minHeight: true, // sw-min-height classes .sw-min-h-x based on spacing + some more - minWidth: true, // sw-min-width classes .sw-min-w-x based on spacing + some more - opacity: true, // sw-opacity-x classes - order: true, // .sw-order-x classes - overflow: true, // .sw-overflow-x classes - padding: true, // .sw-p-x classes based on spacing - pointerEvents: true, //.sw-pointer-events-none .sw-pointer-events-auto - position: true, // position classes .sw-relative .sw-absolute preflight: false, // disable preflight - textAlign: true, // .sw-text-x classes - textOverflow: true, // .sw-text-ellipsis, .sw-truncate - textTransform: true, // sw-uppercase, .sw-capitalize - userSelect: true, // .sw-select-none classes - verticalAlign: true, // .sw-align-x classes - width: true, // .sw-w-x classes based on spacing + some more - whitespace: true, // sw-whitespace-x classes - wordBreak: true, // .sw-break-normal, sw-break-all, sw-break-words classes - zIndex: true, // .sw-z-x classes }, - plugins: [utilities], + plugins: [echoesUtilities], content: [ path.resolve(__dirname, './src/**/!(__tests__|@types|api)/*.{ts,tsx}'), path.resolve(__dirname, './design-system/src/**/!(__tests__|@types|theme|helpers)/*.{ts,tsx}'), |