feat(svg): use IBM Plex Mono for background text

ghstack-source-id: fa0526ebc5591fbfa8ee36db10adbd6b1ac0a6d8
Pull Request resolved: #23

package.json

@@ -22,6 +22,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@ibm/plex": "^6.4.1",
         "@vitejs/plugin-react": "^4.2.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

src/components/typography/fonts.tsx

@@ -0,0 +1,50 @@
+import RedactedOtf from '../../assets/fonts/redacted/otf/RedactedScript-Bold.otf'
+import RedactedTtf from '../../assets/fonts/redacted/ttf/RedactedScript-Bold.ttf'
+import RedactedWoff2 from '../../assets/fonts/redacted/woff/RedactedScript-Bold.woff2'
+import IBMPlexMonoBoldWoff from '@ibm/plex/IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Bold.woff'
+import IBMPlexMonoBoldWoff2 from '@ibm/plex/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Bold.woff2'
+import IBMPlexMonoLightWoff from '@ibm/plex/IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Light.woff'
+import IBMPlexMonoLightWoff2 from '@ibm/plex/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Light.woff2'
+
+export const IBMPlexMono = () => (
+    <style jsx global>
+        {`
+            @font-face {
+                font-family: 'IBM Plex Mono';
+                font-style: normal;
+                font-weight: 700;
+                src:
+                    local('IBM Plex Mono Bold'),
+                    local('IBMPlexMono-Bold'),
+                    url('${IBMPlexMonoBoldWoff2}') format('woff2'),
+                    url('${IBMPlexMonoBoldWoff}') format('woff');
+            }
+
+            @font-face {
+                font-family: 'IBM Plex Mono';
+                font-style: normal;
+                font-weight: 300;
+                src:
+                    local('IBM Plex Mono Light'),
+                    local('IBMPlexMono-Light'),
+                    url('${IBMPlexMonoLightWoff2}') format('woff2'),
+                    url('${IBMPlexMonoLightWoff}') format('woff');
+            }
+        `}
+    </style>
+)
+
+export const RedactedFont = () => (
+    <style jsx global>
+        {`
+            @font-face {
+                font-family: 'Redacted';
+                font-weight: bold;
+                src:
+                    url('${RedactedOtf}') format('woff2'),
+                    url('${RedactedTtf}') format('opentype'),
+                    url('${RedactedWoff2}') format('truetype');
+            }
+        `}
+    </style>
+)

src/components/typography/index.tsx

@@ -1,10 +1,6 @@
 import { PropsWithChildren } from 'react'
-import { classnames } from '../../lib/classnames'
-
-import RedactedOtf from '../../assets/fonts/redacted/otf/RedactedScript-Bold.otf'
-import RedactedTtf from '../../assets/fonts/redacted/ttf/RedactedScript-Bold.ttf'
-import RedactedWoff2 from '../../assets/fonts/redacted/woff/RedactedScript-Bold.woff2'
 import { TbExternalLink } from 'react-icons/tb'
+import { classnames } from '../../lib/classnames'
 
 export const Description = ({
     background,
@@ -135,17 +131,3 @@ export const Redacted = ({
         `}</style>
     </>
 )
-
-export const RedactedFont = () => (
-    <style jsx global>
-        {`
-            @font-face {
-                font-family: 'Redacted';
-                src:
-                    url('${RedactedOtf}') format('woff2'),
-                    url('${RedactedTtf}') format('opentype'),
-                    url('${RedactedWoff2}') format('truetype');
-            }
-        `}
-    </style>
-)

src/main.tsx

@@ -4,13 +4,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { IndexPage } from '.'
-import { RedactedFont } from './components/typography'
+import { IBMPlexMono, RedactedFont } from './components/typography/fonts'
 
 function Main() {
     return (
         <>
             <IndexPage />
             <RedactedFont />
+            <IBMPlexMono />
         </>
     )
 }

yarn.lock

@@ -559,6 +559,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ibm/plex@npm:^6.4.1":
+  version: 6.4.1
+  resolution: "@ibm/plex@npm:6.4.1"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.1"
+  checksum: 10c0/0b69bbbdcdfc2d7ac3212e99e0711d706d5ba283d27916d4bc45ab5eeef5cc9837003e9566f3ecc05b4c1422f56247558918720cff91ca8ac46516bdd7b735c4
+  languageName: node
+  linkType: hard
+
+"@ibm/telemetry-js@npm:^1.5.1":
+  version: 1.8.0
+  resolution: "@ibm/telemetry-js@npm:1.8.0"
+  bin:
+    ibmtelemetry: dist/collect.js
+  checksum: 10c0/4e417594dbc63da64a7b8160a1af777674f023a5af0a4e0c6f4cba991bf0a8c99d098a1c3d9f3bb4fbe3b70f59097f9169bf4ca80d8405927dea0b7b0bafd432
+  languageName: node
+  linkType: hard
+
 "@img/sharp-darwin-arm64@npm:0.33.2":
   version: 0.33.2
   resolution: "@img/sharp-darwin-arm64@npm:0.33.2"
@@ -1343,6 +1361,7 @@ __metadata:
     "@fortawesome/fontawesome-svg-core": "npm:^6.1.1"
     "@fortawesome/free-solid-svg-icons": "npm:^6.1.1"
     "@fortawesome/react-fontawesome": "npm:^0.2.0"
+    "@ibm/plex": "npm:^6.4.1"
     "@types/node": "npm:20.4.5"
     "@types/react": "npm:^18.2.59"
     "@types/react-dom": "npm:^18.2.19"