fix(Dialog): title to have correct sentiment (#3928)

* fix(Dialog): title to have correct sentiment * fix: font and text
scaleway · Jul 3, 2024 · 7dee114 · 7dee114
1 parent b1e5948
commit 7dee114
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 16 deletions.
diff --git a/.changeset/clever-schools-design.md b/.changeset/clever-schools-design.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Dialog />` title to have the correct neutral color
diff --git a/.storybook/assets/fonts/space-grotesk/SpaceGrotesk.woff2 b/.storybook/assets/fonts/space-grotesk/SpaceGrotesk.woff2
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -16,8 +16,7 @@ import JetBrains from './assets/fonts/jetbrains/JetBrainsMono-Regular.woff2'
 import InterSemiBoldWoff2 from './assets/fonts/inter/Inter-SemiBold.woff2'
 import InterMediumWoff2 from './assets/fonts/inter/Inter-Medium.woff2'
 import InterRegularWoff2 from './assets/fonts/inter/Inter-Regular.woff2'
-import SpaceGroteskMediumWoff2 from './assets/fonts/space-grotesk/SpaceGrotesk-Medium.woff2'
-import SpaceGroteskRegularWoff2 from './assets/fonts/space-grotesk/SpaceGrotesk-Regular.woff2'
+import SpaceGrotesk from './assets/fonts/space-grotesk/SpaceGrotesk.woff2'
 import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 
 if (isChromatic()) seedrandom('manual-seed', { global: true })
@@ -122,19 +121,10 @@ export const globalStyles = css`
     font-weight: 400;
     font-display: swap;
   }
-  @font-face {
+@font-face {
     font-family: 'Space Grotesk';
     font-style: normal;
-    src: url(${SpaceGroteskMediumWoff2}) format('woff2');
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Space Grotesk';
-    font-style: normal;
-    src: url(${SpaceGroteskRegularWoff2}) format('woff2');
-    font-weight: 400;
-    font-display: swap;
+    src: url(${SpaceGrotesk}) format('woff2');
   }
 `
 

diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -22,7 +22,7 @@ You will also need to import fonts in your project by adding:
   rel="stylesheet"
 />
 <link
-  href="https://fonts.cdnfonts.com/css/space-grotesk?styles=24816,24815"
+  href="https://fonts.cdnfonts.com/css/space-grotesk?styles=24816,24815,24817"
   rel="stylesheet"
 />
 ```

diff --git a/packages/ui/src/components/Dialog/index.tsx b/packages/ui/src/components/Dialog/index.tsx
@@ -64,7 +64,11 @@ export const BaseDialog = ({
             : 'check'
         }
       />
-      <StyledTextTitle as="h2" variant="headingSmallStronger">
+      <StyledTextTitle
+        as="h2"
+        variant="headingSmallStronger"
+        sentiment="neutral"
+      >
         {title}
       </StyledTextTitle>
     </>

diff --git a/packages/ui/src/components/Dialog/subComponents/Text.tsx b/packages/ui/src/components/Dialog/subComponents/Text.tsx
@@ -5,7 +5,7 @@ type DialogTextProps = {
 }
 
 export const DialogText = ({ children }: DialogTextProps) => (
-  <Text as="p" variant="body">
+  <Text as="p" variant="body" sentiment="neutral">
     {children}
   </Text>
 )