DOP-3783: Akzidenz Happen (#845)

mongodb · Jun 28, 2023 · 80fb816 · 80fb816
1 parent 32897ef
commit 80fb816
Show file tree

Hide file tree

Showing 64 changed files with 833 additions and 12,103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "@leafygreen-ui/text-input": "^10.1.0",
     "@leafygreen-ui/toast": "^6.1.4",
     "@leafygreen-ui/tooltip": "^7.1.0",
-    "@leafygreen-ui/typography": "^13.0.0",
+    "@leafygreen-ui/typography": "^16.5.1",
     "@loadable/component": "^5.14.1",
     "@mdb/consistent-nav": "1.2.38",
     "@mdb/flora": "^1.5.6",

diff --git a/src/components/OpenAPI/styles.js b/src/components/OpenAPI/styles.js
@@ -5,7 +5,7 @@ import { theme } from '../../theme/docsTheme';
 const badgeBorderRadius = '50px';
 const badgeBorderType = '1px solid';
 const codeFontFamily = 'Source Code Pro';
-const textFontFamily = '"Euclid Circular A", Akzidenz, "Helvetica Neue", Helvetica, Arial, sans-serif';
+const textFontFamily = '"Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif';
 
 // Redoc's documented theme option: https://github.com/Redocly/redoc/#redoc-theme-object
 // For more precise options: https://github.com/Redocly/redoc/blob/16f542bbfe856e5ae5eb40636ac79421fa2f397b/src/theme.ts

diff --git a/src/components/SearchResults/EmptyResults.js b/src/components/SearchResults/EmptyResults.js
@@ -42,7 +42,7 @@ const EmptyStateContainer = styled('div')`
   align-items: center;
   display: flex;
   flex-direction: column;
-  font-family: Akzidenz;
+  font-family: 'Euclid Circular A';
   letter-spacing: 0.5px;
   margin: 0 auto;
   max-width: ${MAX_WIDTH};

diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js
@@ -78,7 +78,7 @@ const StyledPreviewText = styled(Body)`
 `;
 
 const StyledResultTitle = styled('p')`
-  font-family: Akzidenz;
+  font-family: 'Euclid Circular A';
   font-size: ${theme.fontSize.small};
   line-height: ${theme.size.medium};
   letter-spacing: 0.5px;

diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
@@ -33,7 +33,7 @@ const SEARCH_RESULT_HEIGHT = '152px';
 const CALC_MARGIN = `calc(50vh - ${LANDING_MODULE_MARGIN} - ${LANDING_PAGE_MARGIN} - ${EMPTY_STATE_HEIGHT} / 2)`;
 
 const commonTextStyling = css`
-  font-family: Akzidenz;
+  font-family: 'Euclid Circular A';
   font-weight: bolder;
   letter-spacing: 0.5px;
   margin: 0;

diff --git a/src/components/Widgets/FeedbackWidget/views/CommentView.js b/src/components/Widgets/FeedbackWidget/views/CommentView.js
@@ -58,7 +58,7 @@ const StyledEmailInput = styled(TextInput)`
 
   // optional text styling
   div > div {
-    font-family: 'Euclid Circular A', Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+    font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
     color: #b8c4c2;
   }
 `;

diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js
@@ -14,16 +14,11 @@ import useSnootyMetadata from '../utils/use-snooty-metadata';
 // These fonts are ported over from @mdb/flora design system repo
 // They are used on the content areas and are not included in Snooty itself
 // Without consistent-nav, this is needed to keep the experience the same for the content writers' previews
-const AKZIDENZ_FAMILY = 'Akzidenz-Grotesk Std';
 const EUCLID_CIRCULAR_FAMILY = 'Euclid Circular A';
 const MONGODB_VALUE_SERIF_FAMILY = 'MongoDB Value Serif';
 const SOURCE_CODE_PRO_FAMILY = 'Source Code Pro';
 
 const FONT_SRCS = {
-  [AKZIDENZ_FAMILY]: {
-    light: 'https://static.mongodb.com/com/fonts/akzidenzgroteskbq_light-webfont.woff2',
-    medium: 'https://static.mongodb.com/com/fonts/akzidenzgroteskbq_medium-webfont.woff2',
-  },
   [EUCLID_CIRCULAR_FAMILY]: {
     regular: 'https://static.mongodb.com/com/fonts/EuclidCircularA-Regular-WebXL.woff2',
     medium: 'https://static.mongodb.com/com/fonts/EuclidCircularA-Medium-WebXL.woff2',
@@ -79,22 +74,6 @@ const globalCSS = css`
   }
 
   /* Fonts that are usually provided by flora through consistent-nav */
-  @font-face {
-    font-family: ${AKZIDENZ_FAMILY};
-    src: url(${FONT_SRCS[AKZIDENZ_FAMILY].light}) format('woff2');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: ${AKZIDENZ_FAMILY};
-    src: url(${FONT_SRCS[AKZIDENZ_FAMILY].medium}) format('woff2');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-  }
-
   @font-face {
     font-family: ${EUCLID_CIRCULAR_FAMILY};
     src: url(${FONT_SRCS[EUCLID_CIRCULAR_FAMILY].regular}) format('woff2');

diff --git a/src/styles/fonts/akzidgrostdita.eot b/src/styles/fonts/akzidgrostdita.eot
diff --git a/src/styles/fonts/akzidgrostdita.svg b/src/styles/fonts/akzidgrostdita.svg
diff --git a/src/styles/fonts/akzidgrostdita.ttf b/src/styles/fonts/akzidgrostdita.ttf
diff --git a/src/styles/fonts/akzidgrostdita.woff b/src/styles/fonts/akzidgrostdita.woff
diff --git a/src/styles/fonts/akzidgrostdlig.eot b/src/styles/fonts/akzidgrostdlig.eot
diff --git a/src/styles/fonts/akzidgrostdlig.svg b/src/styles/fonts/akzidgrostdlig.svg
diff --git a/src/styles/fonts/akzidgrostdlig.ttf b/src/styles/fonts/akzidgrostdlig.ttf
diff --git a/src/styles/fonts/akzidgrostdlig.woff b/src/styles/fonts/akzidgrostdlig.woff
diff --git a/src/styles/fonts/akzidgrostdligcnd.eot b/src/styles/fonts/akzidgrostdligcnd.eot
diff --git a/src/styles/fonts/akzidgrostdligcnd.svg b/src/styles/fonts/akzidgrostdligcnd.svg
diff --git a/src/styles/fonts/akzidgrostdligcnd.ttf b/src/styles/fonts/akzidgrostdligcnd.ttf
diff --git a/src/styles/fonts/akzidgrostdligcnd.woff b/src/styles/fonts/akzidgrostdligcnd.woff
diff --git a/src/styles/fonts/akzidgrostdligita.eot b/src/styles/fonts/akzidgrostdligita.eot
diff --git a/src/styles/fonts/akzidgrostdligita.svg b/src/styles/fonts/akzidgrostdligita.svg
diff --git a/src/styles/fonts/akzidgrostdligita.ttf b/src/styles/fonts/akzidgrostdligita.ttf
diff --git a/src/styles/fonts/akzidgrostdligita.woff b/src/styles/fonts/akzidgrostdligita.woff
diff --git a/src/styles/fonts/akzidgrostdmed.eot b/src/styles/fonts/akzidgrostdmed.eot
diff --git a/src/styles/fonts/akzidgrostdmed.svg b/src/styles/fonts/akzidgrostdmed.svg
diff --git a/src/styles/fonts/akzidgrostdmed.ttf b/src/styles/fonts/akzidgrostdmed.ttf
diff --git a/src/styles/fonts/akzidgrostdmed.woff b/src/styles/fonts/akzidgrostdmed.woff
diff --git a/src/styles/fonts/akzidgrostdmedita.eot b/src/styles/fonts/akzidgrostdmedita.eot
diff --git a/src/styles/fonts/akzidgrostdmedita.svg b/src/styles/fonts/akzidgrostdmedita.svg
diff --git a/src/styles/fonts/akzidgrostdmedita.ttf b/src/styles/fonts/akzidgrostdmedita.ttf
diff --git a/src/styles/fonts/akzidgrostdmedita.woff b/src/styles/fonts/akzidgrostdmedita.woff
diff --git a/src/styles/fonts/akzidgrostdreg.eot b/src/styles/fonts/akzidgrostdreg.eot
diff --git a/src/styles/fonts/akzidgrostdreg.svg b/src/styles/fonts/akzidgrostdreg.svg
diff --git a/src/styles/fonts/akzidgrostdreg.ttf b/src/styles/fonts/akzidgrostdreg.ttf
diff --git a/src/styles/fonts/akzidgrostdreg.woff b/src/styles/fonts/akzidgrostdreg.woff
diff --git a/src/styles/mongodb-docs.css b/src/styles/mongodb-docs.css
@@ -530,7 +530,7 @@ th {
   --mms-gray5: #babdbe;
   --mms-green2: #13aa52;
   --mms-warning-text: #ffb618;
-  --sans-serif: 'Akzidenz', 'Helvetica Neue', sans-serif;
+  --sans-serif: 'Euclid Circular A', 'Helvetica Neue', sans-serif;
   --monospace: 'Source Code Pro', monospace;
   --hr-style: 1px solid #e0e7e8;
   --hr-style: 1px solid var(--light-grey-primary);
@@ -966,63 +966,6 @@ div td pre {
   font-style: normal;
   font-weight: 400;
 }
-@font-face {
-  font-family: Akzidenz;
-  src: url(fonts/akzidgrostdreg.eot);
-  src: url(fonts/akzidgrostdreg.eot#iefix) format('embedded-opentype'), url(fonts/akzidgrostdreg.woff) format('woff'),
-    url(fonts/akzidgrostdreg.ttf) format('truetype');
-  font-style: normal;
-  font-weight: 400;
-}
-@font-face {
-  font-family: Akzidenz;
-  src: url(fonts/akzidgrostdita.eot);
-  src: url(fonts/akzidgrostdita.eot#iefix) format('embedded-opentype'), url(fonts/akzidgrostdita.woff) format('woff'),
-    url(fonts/akzidgrostdita.ttf) format('truetype');
-  font-style: italic;
-  font-weight: 400;
-}
-@font-face {
-  font-family: Akzidenz;
-  src: url(fonts/akzidgrostdmed.eot);
-  src: url(fonts/akzidgrostdmed.eot#iefix) format('embedded-opentype'), url(fonts/akzidgrostdmed.woff) format('woff'),
-    url(fonts/akzidgrostdmed.ttf) format('truetype');
-  font-style: normal;
-  font-weight: 500;
-}
-@font-face {
-  font-family: Akzidenz;
-  src: url(fonts/akzidgrostdmed.eot);
-  src: url(fonts/akzidgrostdmed.eot#iefix) format('embedded-opentype'), url(fonts/akzidgrostdmed.woff) format('woff'),
-    url(fonts/akzidgrostdmed.ttf) format('truetype');
-  font-style: normal;
-  font-weight: 700;
-}
-@font-face {
-  font-family: Akzidenz;
-  src: url(fonts/akzidgrostdmedita.eot);
-  src: url(fonts/akzidgrostdmedita.eot#iefix) format('embedded-opentype'),
-    url(fonts/akzidgrostdmedita.woff) format('woff'), url(fonts/akzidgrostdmedita.ttf) format('truetype');
-  font-style: italic;
-  font-weight: 700;
-}
-@font-face {
-  font-family: Akzidenz;
-  font-family: 'Akzidenz Grotesk BQ Light';
-  src: url(fonts/akzidgrostdlig.eot);
-  src: url(fonts/akzidgrostdlig.eot#iefix) format('embedded-opentype'), url(fonts/akzidgrostdlig.woff) format('woff'),
-    url(fonts/akzidgrostdlig.ttf) format('truetype');
-  font-style: normal;
-  font-weight: 200;
-}
-@font-face {
-  font-family: Akzidenz;
-  src: url(fonts/akzidgrostdligita.eot);
-  src: url(fonts/akzidgrostdligita.eot#iefix) format('embedded-opentype'),
-    url(fonts/akzidgrostdligita.woff) format('woff'), url(fonts/akzidgrostdligita.ttf) format('truetype');
-  font-style: italic;
-  font-weight: 200;
-}
 
 div.document {
   margin-left: 25px;
@@ -1050,7 +993,7 @@ dl.binary {
   height: 0;
 }
 body {
-  font-family: "Euclid Circular A", Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   padding: 0;
   color: #21313C;
   margin: 0;

diff --git a/tests/unit/__snapshots__/BlockQuote.test.js.snap b/tests/unit/__snapshots__/BlockQuote.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
   margin: unset;
-  font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
   font-size: 13px;
   line-height: 20px;
@@ -29,7 +29,7 @@ exports[`renders correctly 1`] = `
 .emotion-8 {
   font-size: 13px;
   line-height: 20px;
-  font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -48,6 +48,13 @@ exports[`renders correctly 1`] = `
   text-decoration: none!important;
 }
 
+.emotion-8:hover,
+.emotion-8:focus,
+.emotion-8:visited {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
 .emotion-8:focus {
   outline: none;
 }
@@ -66,24 +73,14 @@ exports[`renders correctly 1`] = `
   border-radius: 2px;
 }
 
-.constant-classname:focus .emotion-9::after {
+.lg-ui-0001:focus .emotion-9::after {
   background-color: #0498EC;
 }
 
-.constant-classname:hover .emotion-9::after {
+.lg-ui-0001:hover .emotion-9::after {
   background-color: #E8EDEB;
 }
 
-.emotion-10 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  position: relative;
-  bottom: 4px;
-  left: -1px;
-  height: 12px;
-}
-
 <blockquote>
     <p
       class="emotion-0"
@@ -117,33 +114,16 @@ exports[`renders correctly 1`] = `
         <p
           class="emotion-0"
         >
-          <span
-            class="constant-classname emotion-8"
+          <a
+            class="lg-ui-0001 emotion-8"
+            href=""
           >
             <span
               class="emotion-9"
             >
               programmatic access
             </span>
-            <svg
-              alt=""
-              aria-hidden="true"
-              class="emotion-10"
-              height="16"
-              role="presentation"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.823 2.4491C13.8201 2.30008 13.6999 2.17994 13.5509 2.17704L9.5062 2.09836C9.25654 2.09351 9.12821 2.39519 9.30482 2.5718L10.3856 3.65257L7.93433 6.10383C7.87964 6.15852 7.83047 6.21665 7.78683 6.27752L5.99909 8.06525C5.46457 8.59977 5.46457 9.4664 5.99909 10.0009C6.53361 10.5354 7.40023 10.5354 7.93475 10.0009L9.72249 8.21317C9.78336 8.16953 9.84148 8.12037 9.89618 8.06567L12.3474 5.61441L13.4282 6.69518C13.6048 6.87179 13.9065 6.74347 13.9016 6.4938L13.823 2.4491Z"
-                fill="currentColor"
-              />
-              <path
-                d="M7.25 3.12893C7.66421 3.12893 8 3.46472 8 3.87893C8 4.29315 7.66421 4.62893 7.25 4.62893H4C3.72386 4.62893 3.5 4.85279 3.5 5.12893V11.9929C3.5 12.2691 3.72386 12.4929 4 12.4929H10.864C11.1401 12.4929 11.364 12.2691 11.364 11.9929V8.75C11.364 8.33579 11.6998 8 12.114 8C12.5282 8 12.864 8.33579 12.864 8.75V11.9929C12.864 13.0975 11.9686 13.9929 10.864 13.9929H4C2.89543 13.9929 2 13.0975 2 11.9929V5.12893C2 4.02436 2.89543 3.12893 4 3.12893H7.25Z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
+          </a>
           
 through a number of programming APIs.
         </p>