SONAR-23093 New typography tailwind classes

6 files changed, 19 insertions, 71 deletions

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>