From f2828a5e42a3dddf389e0d9f5e6c325fe4516ce1 Mon Sep 17 00:00:00 2001 From: Alec Swanson Date: Tue, 12 Jul 2022 16:41:52 -0700 Subject: [PATCH] feat: integrate branding changes from the theme --- package.json | 8 +- .../components/GlobalFooter.js | 14 +- .../components/GlobalHeader.js | 68 ++- .../components/GlobalStyles/themes.js | 37 -- .../components/Layout/Layout.js | 2 - src/components/Breadcrumbs.js | 4 +- src/components/GetStartedFooter.js | 64 +-- src/components/GlobalStyles.js | 110 ----- .../GuidedInstallTileMostPopular.js | 12 +- src/components/IOBanner.js | 14 +- src/components/InstallButton.js | 23 +- .../LandingBanner/BannerBackground.js | 2 +- src/components/LandingBanner/index.js | 4 +- src/components/LandingPageFooter.js | 18 +- src/components/Markdown.js | 3 +- src/components/QuickstartAlerts.js | 4 +- src/components/QuickstartDashboards.js | 4 +- src/components/QuickstartDataSources.js | 4 +- src/components/QuickstartHowToUse.js | 17 +- src/components/QuickstartTile.js | 5 +- src/components/WhatsIncluded/Alerts.js | 2 +- src/components/WhatsIncluded/Dashboards.js | 2 +- src/components/WhatsIncluded/DataSources.js | 2 +- .../WhatsIncluded/WhatsIncludedHeader.jsx | 2 +- src/components/fonts.js | 43 -- src/components/styles.scss | 22 - src/fonts/sohnefonts/sohne-buch.otf | Bin 210840 -> 0 bytes src/fonts/sohnefonts/sohne-buchkursiv.otf | Bin 234368 -> 0 bytes .../sohnefonts/sohne-dreiviertelfett.otf | Bin 229308 -> 0 bytes .../sohne-dreiviertelfettkursiv.otf | Bin 241672 -> 0 bytes src/fonts/sohnefonts/sohne-extrafett.otf | Bin 193120 -> 0 bytes .../sohnefonts/sohne-extrafettkursiv.otf | Bin 209860 -> 0 bytes src/fonts/sohnefonts/sohne-extraleicht.otf | Bin 173904 -> 0 bytes .../sohnefonts/sohne-extraleichtkursiv.otf | Bin 196928 -> 0 bytes src/fonts/sohnefonts/sohne-fett.otf | Bin 229360 -> 0 bytes src/fonts/sohnefonts/sohne-fettkursiv.otf | Bin 241396 -> 0 bytes src/fonts/sohnefonts/sohne-halbfett.otf | Bin 230012 -> 0 bytes src/fonts/sohnefonts/sohne-halbfettkursiv.otf | Bin 241784 -> 0 bytes src/fonts/sohnefonts/sohne-kraftig.otf | Bin 196752 -> 0 bytes src/fonts/sohnefonts/sohne-kraftigkursiv.otf | Bin 212580 -> 0 bytes src/fonts/sohnefonts/sohne-leicht.otf | Bin 211140 -> 0 bytes src/fonts/sohnefonts/sohne-leichtkursiv.otf | Bin 234588 -> 0 bytes src/fonts/sohnefonts/sohnemono-buch.otf | Bin 30824 -> 0 bytes src/fonts/sohnefonts/sohnemono-kraftig.otf | Bin 31564 -> 0 bytes src/layouts/index.js | 13 +- src/pages/index.jsx | 25 +- src/templates/QuickstartDetails.js | 4 +- yarn.lock | 396 ++++++++++-------- 48 files changed, 304 insertions(+), 624 deletions(-) delete mode 100644 src/@newrelic/gatsby-theme-newrelic/components/GlobalStyles/themes.js delete mode 100644 src/components/GlobalStyles.js delete mode 100644 src/components/fonts.js delete mode 100644 src/fonts/sohnefonts/sohne-buch.otf delete mode 100644 src/fonts/sohnefonts/sohne-buchkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-dreiviertelfett.otf delete mode 100644 src/fonts/sohnefonts/sohne-dreiviertelfettkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-extrafett.otf delete mode 100644 src/fonts/sohnefonts/sohne-extrafettkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-extraleicht.otf delete mode 100644 src/fonts/sohnefonts/sohne-extraleichtkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-fett.otf delete mode 100644 src/fonts/sohnefonts/sohne-fettkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-halbfett.otf delete mode 100644 src/fonts/sohnefonts/sohne-halbfettkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-kraftig.otf delete mode 100644 src/fonts/sohnefonts/sohne-kraftigkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohne-leicht.otf delete mode 100644 src/fonts/sohnefonts/sohne-leichtkursiv.otf delete mode 100644 src/fonts/sohnefonts/sohnemono-buch.otf delete mode 100644 src/fonts/sohnefonts/sohnemono-kraftig.otf diff --git a/package.json b/package.json index dd4cd90b..5ac2ca0a 100644 --- a/package.json +++ b/package.json @@ -27,21 +27,21 @@ "@emotion/styled": "^11.3.0", "@mdx-js/mdx": "^1.6.19", "@mdx-js/react": "^1.6.19", - "@newrelic/gatsby-theme-newrelic": "^5.0.4", + "@newrelic/gatsby-theme-newrelic": "^6.6.0", "@splitsoftware/splitio-react": "^1.2.0", "gatsby": "^4.13.0", "gatsby-plugin-emotion": "^6.8.0", "gatsby-plugin-gatsby-cloud": "^4.13.0", - "gatsby-plugin-image": "^2.17.0", + "gatsby-plugin-image": "^2.18.0", "gatsby-plugin-manifest": "^3.13.0", "gatsby-plugin-mdx": "^2.8.0", "gatsby-plugin-react-helmet": "^4.8.0", "gatsby-plugin-sass": "^5.13.0", - "gatsby-plugin-sharp": "^4.17.0", + "gatsby-plugin-sharp": "^4.18.0", "gatsby-plugin-use-query-params": "^1.0.1", "gatsby-source-filesystem": "^3.8.0", "gatsby-transformer-json": "^3.3.0", - "gatsby-transformer-sharp": "^4.17.0", + "gatsby-transformer-sharp": "^4.18.0", "js-yaml": "^4.1.0", "pluralize": "^8.0.0", "react": "^17.0.1", diff --git a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js index 9d736c81..bf99e358 100644 --- a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js +++ b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js @@ -8,7 +8,7 @@ import NewLogo from './NewLogo'; import PropTypes from 'prop-types'; import React from 'react'; import { css } from '@emotion/react'; -import useThemeTranslation from '@newrelic/gatsby-theme-newrelic/src//hooks/useThemeTranslation'; +import useThemeTranslation from '@newrelic/gatsby-theme-newrelic/src/hooks/useThemeTranslation'; const HOME_LINK = 'https://newrelic.com'; @@ -67,20 +67,15 @@ const GlobalFooter = ({ className }) => { data-swiftype-index={false} className={className} css={css` - /* Color variables */ - --background-color: #1d252c; - --secondary-text-color: #898e91; - - color: var(--secondary-text-color); - background-color: var(--background-color); + background-color: var(--system-text-primary-light); + color: var(--system-text-secondary-light); /* fonts */ - font-family: Söhne-Buch; font-size: 18px; line-height: 24px; a { - color: var(--secondary-text-color); + color: var(--system-text-secondary-light); text-decoration: none; text-decoration-thickness: none; } @@ -95,7 +90,6 @@ const GlobalFooter = ({ className }) => {
{ display: none; @media screen and (min-width: ${NAV_BREAKPOINT}) { display: block; - background: #1d252c; + background: var(--system-text-primary-light); position: sticky; } @media screen and (max-width: ${NAV_BREAKPOINT}) { @@ -227,16 +227,10 @@ const GlobalHeader = ({ className, activeSite }) => { padding 2rem 0; flex: 0 0 auto; > a { - --active-color: #1d252c; - color: var(--white-hover-color); - font-family: Söhne-Buch; font-weight: 400; font-size: 1.125rem; padding: 2rem 1rem; display: block; - &:hover { - color: var(--white-hover-color); - } &:focus { outline: none; text-decoration-line: underline; @@ -246,8 +240,7 @@ const GlobalHeader = ({ className, activeSite }) => { >span { font-size: 100%; &:hover { - color: var(--white-hover-color); - border-bottom: 1.5px solid var(--white-hover-color); + border-bottom: 1.5px solid var(--secondary-text-color-inverted); } } } @@ -275,9 +268,8 @@ const GlobalHeader = ({ className, activeSite }) => { line-height: 1.1; > li { transition: all 0.2s ease-out; - color: var(--secondary-text-color); + color: var(--secondary-text-color-inverted); > a { - font-family: Söhne-Buch; font-weight: 400; font-size: 1.125rem; letter-spacing: -0.005em; @@ -318,15 +310,14 @@ const GlobalHeader = ({ className, activeSite }) => { text-underline-offset: 0.25rem; &:focus { --tw-text-opacity: 1; - color: var(--white-hover-color); + color: var(--system-text-primary-dark); } > span { - color: var(--white-hover-color); + color: var(--system-text-primary-dark); height: 1.375rem; &:hover { - color: var(--white-hover-color); - border-bottom: 1.5px solid var(--white-hover-color); + border-bottom: 1.5px solid var(--system-text-primary-dark); } } @media screen and (max-width: ${NAV_BREAKPOINT}) { @@ -359,11 +350,12 @@ const GlobalHeader = ({ className, activeSite }) => { color: rgb(28 231 131 / var(--tw-text-opacity)); } > span { - color: var(--btn-background-green); + color: var(--brand-button-primary-accent); height: 1.375rem; &:hover { - color: var(--btn-background-green); - border-bottom: 1.5px solid var(--btn-background-green); + color: var(--brand-button-primary-accent); + border-bottom: 1.5px solid + var(--brand-button-primary-accent); } } @media screen and (max-width: ${NAV_BREAKPOINT}) { @@ -387,7 +379,7 @@ const GlobalHeader = ({ className, activeSite }) => { display: none; position: relative; box-shadow: 0 0.25rem 1.875rem rgb(84 86 90 / 10%); - background: #1d252c; + background: var(--system-text-primary-light); border-bottom: 1px solid #83878b; @media screen and (max-width: ${NAV_BREAKPOINT}) { display: flex; @@ -494,10 +486,10 @@ const GlobalHeader = ({ className, activeSite }) => { ${isOpen ? ` - color: var(--btn-text-color); + color: var(--system-text-primary-dark); ` : ` - color: var(--btn-text-color); + color: var(--system-text-primary-dark); `} `} title="Toggle menu" @@ -516,7 +508,7 @@ const GlobalHeader = ({ className, activeSite }) => { position: absolute; width: 100vw; height: 100vh; - background-color: var(--color-white); + background-color: var(--primary-background-color); z-index: 200; @media screen and (min-width: 1128px) { @@ -546,9 +538,6 @@ const GlobalHeader = ({ className, activeSite }) => { border-bottom-width: 1px; --tw-border-opacity: 1; > a { - --active-color: var(--color-white); - font-family: Söhne-Buch; - color: var(--black-text-color); font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; @@ -557,21 +546,24 @@ const GlobalHeader = ({ className, activeSite }) => { &:focus { outline: none; outline-width: 0.25rem; - text-decoration-line: underline; text-underline-offset: 0.25rem; } - > span { - color: var(--black-hover-color); - &:hover { - color: var(--black-hover-color); - border-bottom: 1.5px solid var(--black-hover-color); + > span { + color: var(--primary-text-color); + &:hover { + color: var(--primary-text-color); + border-bottom: 1.5px solid var(--primary-text-color); + } + } } + } @media screen and (min-width: ${NAV_BREAKPOINT}) { flex-direction: row; } --list style-- list-style: none; + `} > {createNavList('main', activeSite)} @@ -607,7 +599,6 @@ const GlobalHeader = ({ className, activeSite }) => { css={css` ease; transition: background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease; - font-family:Söhne-Buch; font-weight: 400; font-size: 0.875rem; line-height: 1.93; @@ -622,11 +613,11 @@ const GlobalHeader = ({ className, activeSite }) => { vertical-align: middle; white-space: nowrap; padding: 0.6rem 1rem; - border-color: var(--color-neutrals-100); + border-color: var(--button-text-color); background-color: transparent; - color: var(--color-neutrals-100); + color: var(--button-text-color); &:hover { - color: var(--color-neutrals-100); + color: var(--button-text-color); background-color: transparent; } &:focus { @@ -655,7 +646,6 @@ const GlobalHeader = ({ className, activeSite }) => { padding: 0.6rem 1rem; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; - font-family: Söhne-Buch; font-weight: 400; font-size: 0.875rem; line-height: 1.93; @@ -667,9 +657,9 @@ const GlobalHeader = ({ className, activeSite }) => { text-align: center; vertical-align: middle; white-space: nowrap; - background-color: var(--color-neutrals-100); + background-color: var(--color-white); color: rgb(29, 37, 44); - border-color: var(--color-neutrals-100); + border-color: var(--color-white); margin-left: -4.49px; margin-right: 2px; &:focus { @@ -677,7 +667,7 @@ const GlobalHeader = ({ className, activeSite }) => { text-underline-offset: 0.25rem; } &:hover { - background-color: var(--color-neutrals-100); + background-color: var(--color-white); color: rgb(29, 37, 44); } > span{ diff --git a/src/@newrelic/gatsby-theme-newrelic/components/GlobalStyles/themes.js b/src/@newrelic/gatsby-theme-newrelic/components/GlobalStyles/themes.js deleted file mode 100644 index 0684857b..00000000 --- a/src/@newrelic/gatsby-theme-newrelic/components/GlobalStyles/themes.js +++ /dev/null @@ -1,37 +0,0 @@ -import { css } from '@emotion/react'; - -export default css` - .light-mode { - --primary-background-color: var(--color-white); - --primary-text-color: var(--color-neutrals-700); - --primary-text-hover-color: var(--color-neutrals-600); - - --secondary-background-color: var(--color-neutrals-100); - --secondary-text-color: var(--color-neutrals-600); - --secondary-text-hover-color: var(--color-neutrals-700); - - --tertiary-background-color: var(--color-neutrals-200); - - --accent-text-color: var(--color-neutrals-500); - --link-color: var(--color-brand-500); - --link-hover-color: var(--color-brand-300); - --border-color: var(--color-neutrals-400); - --border-hover-color: var(--color-neutrals-500); - --divider-color: var(--color-neutrals-100); - --heading-text-color: var(--color-neutrals-900); - - --callout-caution-background-color: #fce9e935; - --callout-important-background-color: #fff9cc30; - --callout-tip-background-color: #d1f7d925; - --callout-course-background-color: #00b3c310; - - input::placeholder { - color: var(--color-neutrals-600); - } - - *:not(pre) > code, - var { - background: var(--color-neutrals-200); - } - } -`; diff --git a/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js b/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js index 464d95aa..545e038f 100644 --- a/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js +++ b/src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js @@ -13,8 +13,6 @@ const Layout = ({ className, children }) => { className={className} css={css` --sidebar-width: 300px; - --primary-font-family: 'Söhne-Buch'; - font-family: 'Söhne-Buch', sans-serif; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js index a0fa507d..70b0a3ca 100644 --- a/src/components/Breadcrumbs.js +++ b/src/components/Breadcrumbs.js @@ -16,10 +16,10 @@ const Breadcrumbs = ({ segments, separator }) => { diff --git a/src/components/GetStartedFooter.js b/src/components/GetStartedFooter.js index f3076106..067ee9c4 100644 --- a/src/components/GetStartedFooter.js +++ b/src/components/GetStartedFooter.js @@ -11,17 +11,6 @@ const GetStartedFooter = ({ style = 'PRIMARY', ...props }) => { return (
{ font-size: 33px; - background-color: var(--nr1--color--accent); + background-color: var(--brand-button-primary-accent); > h3 { - color: var(--nr1--color--text--primary); - - font-family: Söhne-Buch; font-size: 44px; line-height: 50px; letter: -1.5%; + font-weight: 500; } @media screen and (max-width: ${MOBILE_BREAKPOINT}) { @@ -101,7 +88,6 @@ const GetStartedFooter = ({ style = 'PRIMARY', ...props }) => { > a { font-size: 18px; - font-weight: 400; line-height: 24px; width: 142px; @@ -130,31 +116,16 @@ const GetStartedFooter = ({ style = 'PRIMARY', ...props }) => {