Skip to content
This repository has been archived by the owner on Dec 8, 2023. It is now read-only.

Commit

Permalink
feat: integrate branding changes from the theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@aswanson-nr
aswanson-nr committed Jul 12, 2022
1 parent 31427bf commit f2828a5
Show file tree
Hide file tree
Showing 48 changed files with 304 additions and 624 deletions.
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 4 additions & 10 deletions src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
}
Expand All @@ -95,7 +90,6 @@ const GlobalFooter = ({ className }) => {
<div
css={css`
display: grid;
background: #1d252c;
justify-content: space-between;
max-width: 1248px;
margin: 0 auto;
Expand Down
68 changes: 29 additions & 39 deletions src/@newrelic/gatsby-theme-newrelic/components/GlobalHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const GlobalHeader = ({ className, activeSite }) => {
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}) {
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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}) {
Expand Down Expand Up @@ -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}) {
Expand All @@ -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;
Expand Down Expand Up @@ -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"
Expand All @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -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)}
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -667,17 +657,17 @@ 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 {
text-decoration-line: underline;
text-underline-offset: 0.25rem;
}
&:hover {
background-color: var(--color-neutrals-100);
background-color: var(--color-white);
color: rgb(29, 37, 44);
}
> span{
Expand Down
37 changes: 0 additions & 37 deletions src/@newrelic/gatsby-theme-newrelic/components/GlobalStyles/themes.js
View file

This file was deleted.

2 changes: 0 additions & 2 deletions src/@newrelic/gatsby-theme-newrelic/components/Layout/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Breadcrumbs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const Breadcrumbs = ({ segments, separator }) => {
<Link
to={segment.url}
css={css`
color: var(--brand-highlight-green);
color: var(--brand-button-primary-accent);
text-decoration: none;
&:hover {
color: var(--brand-highlight-green);
color: var(--brand-button-primary-accent);
}
`}
>
Expand Down
Loading

0 comments on commit f2828a5

Please sign in to comment.