Chore(Style): introduce branding from nodejs Website Redesign (#5079)

Chore(style): introduce branding from nodejs Website Redesign

Co-authored-by: Claudio Wunder <[email protected]>

pages/_app.mdx

@@ -3,6 +3,7 @@ import { LocaleProvider } from '../providers/localeProvider';
 import { SiteProvider } from '../providers/siteProvider';
 import sourceSansPro from '../util/sourceSansPro';
 import '../styles/styles.scss';
+import '../styles/tokens.scss';
 
 export default function App({ Component, pageProps }) {
   return (

public/static/js/legacyMain.js

@@ -2,6 +2,7 @@ const themeAttr = 'data-theme';
 
 const setTheme = theme => {
   document.querySelector('html').setAttribute(themeAttr, theme);
+  document.body.className = theme;
   window.localStorage.setItem('theme', theme);
 };
 

styles/layout/_dark-theme.scss

@@ -1,4 +1,4 @@
-[data-theme='dark'] {
+.dark {
   color-scheme: dark;
 
   .dark-theme-switcher {

styles/page-modules/_blog-index.scss

@@ -21,7 +21,7 @@ nav.pagination {
 
 @media screen and (max-width: 700px) {
   .blog-index,
-  [data-theme='dark'] .blog-index {
+  .dark .blog-index {
     .summary {
       margin-left: 0;
       p {

styles/tokens.scss

@@ -0,0 +1,172 @@
+body {
+  --mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  --sans: 'Open Sans', sans-serif;
+
+  /* Colors */
+  --brand2: #c5e5b4;
+  --brand3: #99cc7d;
+  --brand4: #84ba64;
+  --brand5: #5fa04e;
+  --brand6: #417e38;
+  --brand7: #2c682c;
+  --brand8: #215127;
+  --brand9: #1a3f1d;
+  --brand10: #edf2eb;
+  --brand11: #448533;
+  --black0: #ffffff;
+  --black1: #f6f7f9;
+  --black2: #e9edf0;
+  --black3: #d9e1e4;
+  --black4: #cbd4d9;
+  --black5: #b1bcc2;
+  --black6: #929fa5;
+  --black7: #6b7880;
+  --black8: #556066;
+  --black9: #2c3437;
+  --black10: #1f272a;
+  --black11: #515c62;
+  --black12: #505d65;
+  --body0: #f2f2f2;
+  --warning1: #fdf3e7;
+  --warning2: #fad9b0;
+  --warning3: #f5bc75;
+  --warning4: #e99c40;
+  --warning5: #d07912;
+  --warning6: #ae5f00;
+  --warning7: #8b4d04;
+  --warning8: #683d08;
+  --warning9: #4d2f0b;
+  --danger1: #fbf1f0;
+  --danger2: #fad3d4;
+  --danger3: #fab6b7;
+  --danger4: #fa8e8e;
+  --danger5: #f65354;
+  --danger6: #de1a1b;
+  --danger7: #b80c0c;
+  --danger8: #900e0e;
+  --danger9: #661514;
+  --info1: #e9f4fa;
+  --info2: #bce6fc;
+  --info3: #8ed4f8;
+  --info4: #52baed;
+  --info5: #229ad6;
+  --info6: #0c7bb3;
+  --info7: #066291;
+  --info8: #074d71;
+  --info9: #0a3953;
+  --purple1: #f7f1fb;
+  --purple2: #ead9fb;
+  --purple3: #dbbdf9;
+  --purple4: #c79bf2;
+  --purple5: #af74e8;
+  --purple6: #9756d6;
+  --purple7: #7d3cbe;
+  --purple8: #642b9e;
+  --purple9: #361b52;
+  --pink1: #fbf0f4;
+  --pink2: #fbd4e6;
+  --pink3: #fbb4d2;
+  --pink4: #f68bb7;
+  --pink5: #ed5393;
+  --pink6: #d6246e;
+  --pink7: #b01356;
+  --pink8: #8b1245;
+  --pink9: #411526;
+  --color-brand-primary: var(--brand5);
+  --color-text-primary: var(--black9);
+  --color-text-secondary: var(--black7);
+  --color-text-high-contrast: var(--black12);
+  --color-text-accent: var(--brand11);
+  --color-border-primary: var(--black4);
+  --color-border-secondary: var(--black3);
+  --color-border-accent: var(--color-brand-primary);
+  --color-fill-app: var(--black0);
+  --color-fill-body: var(--body0);
+  --color-fill-canvas: var(--black1);
+  --color-fill-side-nav: var(--black1);
+  --color-fill-top-nav: var(--black0);
+  --color-fill-banner: #9992;
+  --color-fill-action: var(--brand5);
+  --color-fill-button: var(--brand5);
+  --color-dropdown-background: var(--black3);
+  --color-dropdown-hover: var(--black4);
+  --color-blog-card-background: var(--brand2);
+
+  /*for actionable elements*/
+
+  /* Typography */
+  --base-type-face: var(--sans);
+  --font-size-display1: 6rem;
+  --font-size-display2: 4.8rem;
+  --font-size-display3: 3.4rem;
+  --font-size-display4: 2.3rem;
+  --font-size-display5: 1.8rem;
+  --font-size-headline: 2.4rem;
+  --font-size-subheading: 2rem;
+  --font-size-body1: 1.6rem;
+  --font-size-body2: 1.4rem;
+  --font-size-body3: 1.3rem;
+  --font-size-caption: 1.2rem;
+  --font-size-overline: 1rem;
+  --font-size-code: 1.6rem;
+  --line-height-display1: 7.2rem;
+  --line-height-display2: 5.7rem;
+  --line-height-display3: 4.08rem;
+  --line-height-display4: 2.8rem;
+  --line-height-display5: 1.5rem;
+  --line-height-headline: 2.88rem;
+  --line-height-subheading: 3rem;
+  --line-height-body1: 2.4rem;
+  --line-height-body2: 2.1rem;
+  --line-height-caption: 1.8rem;
+  --line-height-overline: 1.5rem;
+  --line-height-code: 2.4rem;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 900;
+  --font-style-regular: normal;
+
+  /* Spacing */
+  --space-01: 0.1rem;
+  --space-02: 0.2rem;
+  --space-04: 0.4rem;
+  --space-07: 0.7rem;
+  --space-08: 0.8rem;
+  --space-12: 1.2rem;
+  --space-13: 1.3rem;
+  --space-14: 1.4rem;
+  --space-16: 1.6rem;
+  --space-20: 2rem;
+  --space-24: 2.4rem;
+  --space-32: 3.2rem;
+  --space-40: 4rem;
+  --space-48: 4.8rem;
+  --space-64: 6.4rem;
+  --space-80: 8rem;
+  --space-96: 9.6rem;
+  --space-128: 12.8rem;
+  --space-160: 16rem;
+}
+
+.dark {
+  /* Colors */
+  --color-brand-primary: var(--brand5);
+  --color-text-primary: var(--black4);
+  --color-text-secondary: var(--black6);
+  --color-text-high-contrast: var(--black4);
+  --color-text-accent: var(--brand4);
+  --color-border-primary: var(--black4);
+  --color-border-secondary: var(--black3);
+  --color-border-accent: var(--brand4);
+  --color-fill-app: #090c15;
+  --color-fill-body: #090c15;
+  --color-fill-canvas: #090c15;
+  --color-fill-side-nav: #0d111d;
+  --color-fill-top-nav: #090c15;
+  --color-fill-action: var(--brand4);
+  --color-fill-button: var(--pink5);
+  --color-dropdown-background: var(--black10);
+  --color-dropdown-hover: var(--black11);
+  --color-blog-card-background: var(--black9);
+}