chore: fixing centrano1 font name in token by removing space (#522)

## **Description**

This PR standardizes the font family name to "CentraNo1" (without space)
across design tokens to align with Mobile and Extension implementations.

1. Reason for change: There was an inconsistency where Portfolio used
"Centra No1" (with space) while Mobile and Extension used "CentraNo1"
(without space). This inconsistency caused the design tokens to display
incorrectly.
2. Improvement: Consolidates all references to use "CentraNo1" without
space, matching the Mobile and Extension implementation, which fixes the
font display in design tokens and ensures consistency across platforms.

## **Related issues**

Fixes: Cross-platform font family name inconsistency causing display
issues in design tokens

## **Manual testing steps**

1. Verify font family name is "CentraNo1" (without space) in:
   - CSS variables (`--font-family-sans`)
   - Storybook documentation
   - Typography tokens
2. Confirm font renders correctly in design token examples
3. Verify changes align with existing Mobile and Extension
implementations

## **Screenshots/Recordings**

### **Before**
- Mobile/Extension: `"CentraNo1"` (correct)
- Portfolio: `"Centra No1"` (inconsistent)
- Design Tokens: Mixed usage causing display issues

<img width="1510" alt="Screenshot 2025-03-27 at 11 14 01 AM"
src="https://github.com/user-attachments/assets/7997f5cf-a466-4c50-a629-9c8031c175aa"
/>


### **After**
Consistent usage across all platforms:
```css
--font-family-sans: 'CentraNo1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
```



<img width="1509" alt="Screenshot 2025-03-27 at 11 13 11 AM"
src="https://github.com/user-attachments/assets/0ad7a106-0329-4b21-ba63-ea7b35aa871a"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgewrmarshall

packages/design-tokens/CHANGELOG.md

@@ -11,11 +11,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- **BREAKING:** Replaced Euclid Circular B with Centra No1 as the primary font family ([#499](https://github.com/MetaMask/metamask-design-system/pull/499)). See the [migration guide](./MIGRATION.md#from-version-510-to-600) for details.
+- **BREAKING:** Replaced Euclid Circular B with CentraNo1 as the primary font family ([#499](https://github.com/MetaMask/metamask-design-system/pull/499)). See the [migration guide](./MIGRATION.md#from-version-510-to-600) for details.
 
   - Removed `--font-family-euclid-circular-b` and `--font-family-roboto` CSS variables
-  - Changed `--font-family-sans` to use Centra No1 with updated fallback chain
-  - Updated font files from Euclid Circular B to Centra No1 (where 'Book' is the 400 weight variant)
+  - Changed `--font-family-sans` to use CentraNo1 with updated fallback chain
+  - Updated font files from Euclid Circular B to CentraNo1 (where 'Book' is the 400 weight variant)
   - Applications using the design system will need to update font imports and references
 
 ## [5.1.0]

packages/design-tokens/MIGRATION.md

@@ -11,7 +11,7 @@ This guide provides detailed instructions for migrating your project from one ve
 
 ### Font Family Changes (Breaking Changes)
 
-In version 6.0.0, we've completely replaced Euclid Circular B with Centra No1 as our primary font family. This is a breaking change that affects both web and React Native applications.
+In version 6.0.0, we've completely replaced Euclid Circular B with CentraNo1 as our primary font family. This is a breaking change that affects both web and React Native applications.
 
 #### CSS Changes
 
@@ -29,7 +29,7 @@ In version 6.0.0, we've completely replaced Euclid Circular B with Centra No1 as
 --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;
 
 /* After */
---font-family-sans: 'Centra No1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+--font-family-sans: 'CentraNo1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 ```
 
 #### React Native Font Changes
@@ -66,17 +66,17 @@ The font weight tokens remain the same (400, 500, 700), but the font file names
 
 ### Migration Steps
 
-1. Update font imports to use Centra No1 instead of Euclid Circular B
-2. Replace all instances of `font-family: 'Euclid Circular B'` with `font-family: 'Centra No1'`
+1. Update font imports to use CentraNo1 instead of Euclid Circular B
+2. Replace all instances of `font-family: 'Euclid Circular B'` with `font-family: 'CentraNo1'`
 3. Update font file references:
    - Use 'CentraNo1-Book' for weight 400 (previously 'EuclidCircularB-Regular')
    - Use 'CentraNo1-Medium' for weight 500
    - Use 'CentraNo1-Bold' for weight 700
 4. For React Native applications:
-   - Update font file imports to use new Centra No1 .otf files
+   - Update font file imports to use new CentraNo1 .otf files
    - Update font family references in your styles
 5. For web applications:
-   - Update font file imports to use new Centra No1 .woff2 files
+   - Update font file imports to use new CentraNo1 .woff2 files
    - Update @font-face declarations
 6. Remove any references to Roboto font family as it's no longer included in the fallback chain
 

packages/design-tokens/src/css/typography.css

@@ -3,7 +3,7 @@
  */
 :root {
   /* font family */
-  --font-family-sans: 'Centra No1', 'Helvetica Neue', Helvetica, Arial,
+  --font-family-sans: 'CentraNo1', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   /* font sizes */
   --font-size-base: 16px;

packages/design-tokens/src/figma/tokens.json

@@ -344,7 +344,7 @@
     },
     "fontFamilies": {
       "centra-no1": {
-        "value": "Centra No1",
+        "value": "CentraNo1",
         "type": "fontFamilies"
       }
     },

packages/design-tokens/src/js/typography/fontFamilies.ts

@@ -1,3 +1,3 @@
 export const fontFamilies = {
-  sans: 'Centra No1',
+  sans: 'CentraNo1',
 };

packages/design-tokens/stories/Typography.mdx

@@ -9,7 +9,7 @@ Good typography improves readability, legibility and prioritization of informati
 
 ## Font Family
 
-The main font family used in MetaMask products is **Centra No1**.
+The main font family used in MetaMask products is **CentraNo1**.
 
 <Canvas of={TypographyStories.FontFamily} />
 
@@ -24,7 +24,7 @@ The main font family used in MetaMask products is **Centra No1**.
   <tbody>
     <tr>
       <td>
-        <strong>Centra No1</strong>
+        <strong>CentraNo1</strong>
       </td>
       <td>
         <code>Token not exported</code>

packages/design-tokens/stories/Typography.stories.tsx

@@ -35,7 +35,7 @@ export const FontFamily: StoryFn<typeof Text> = (...args) => {
   return (
     <>
       <Text style={styles.displayMD} {...args}>
-        Centra No1
+        CentraNo1
       </Text>
     </>
   );