feat: add support for dark mode pages (#283)

* feat: add support for theme to nav from frontmatter * chore: add dark classname to pages * fix: update container classnames * fix: left nav styles at dark plus markdown styles * fix: left nav styles for dark mode * chore: stylelint * chore: add docs * chore: remove important from styles * chore: fix merge * feat: add dark mode for missing components * fix: fix text color * chore: update blockquote color on dark * chore: change back to dark * chore: remove from docs * chore: cleanup
carbon-design-system · Aug 8, 2019 · 55237ad · 55237ad · vercel · Aug 8, 2019
1 parent cc2889c
commit 55237ad
Show file tree

Hide file tree

Showing 19 changed files with 296 additions and 32 deletions.
diff --git a/packages/example/src/pages/components/Accordion.mdx b/packages/example/src/pages/components/Accordion.mdx
@@ -13,7 +13,7 @@ The `<Accordion>` and `<AccordionItem>` components are used together to display
 <Accordion>
 <AccordionItem title="Title 1">
 
-In ac nisi ut mauris venenatis blandit a et ante. Mauris eu congue velit, eget dictum diam. Etiam sed turpis quis ligula interdum lobortis eu et libero. Praesent nec eros sit amet elit tempor egestas cursus non nulla. Vestibulum dictum luctus lorem in rhoncus. 
+In ac nisi ut mauris venenatis blandit a et ante. Mauris eu congue velit, eget dictum diam. Etiam sed turpis quis ligula interdum lobortis eu et libero. Praesent nec eros sit amet elit tempor egestas cursus non nulla. Vestibulum dictum luctus lorem in rhoncus.
 
 Nullam vestibulum blandit libero, ac tempus felis tristique id. Aliquam rhoncus vestibulum dui eu dictum. Morbi congue purus eu libero sodales, nec sollicitudin ligula tempor.
 

diff --git a/packages/example/src/pages/gallery/index.mdx b/packages/example/src/pages/gallery/index.mdx
@@ -8,6 +8,137 @@ We have a multitude of sites using the gatsby theme for both public and internal
 
 </PageDescription>
 
+| Tables   |      Are      | Cool |
+| -------- | :-----------: | ---: |
+| col 3 is | right-aligned |    1 |
+| col 2 is |   centered    |    2 |
+
+There must be at least 3 dashes separating each header cell.
+The outer pipes (|) are optional, and you don't need to make the
+raw Markdown line up prettily. You can also use inline Markdown.
+
+| Markdown | Less      | Pretty     |
+| -------- | --------- | ---------- |
+| _Still_  | `renders` | **nicely** |
+| 1        | 2         | 3          |
+
+```markdown path=/directory/file.mdx src=https://gatsby-theme-carbon.now.sh
+### Path and src
+```
+
+```markdown path=/directory/file.mdx
+### Just path
+```
+
+```markdown src=https://gatsby-theme-carbon.now.sh
+### Just src
+```
+
+```markdown
+### No path or src
+```
+
+<Row className="image-card-group">
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      title="Title"
+      subTitle="Subtitle"
+      href="/"
+      >
+
+![Square](/images/square.png)
+
+  </ImageCard>
+  <ImageCard
+      title="Dark title"
+      titleColor="dark"
+      aspectRatio="1:1"
+      href="/"
+      actionIcon="arrowRight"
+      subTitleColor="light"
+      subTitle="Light subtitle"
+      >
+
+![Light dark](./images/light-dark.jpg)
+
+  </ImageCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      title="Title"
+      subTitle="Subtitle"
+      aspectRatio="1:2"
+      href="/"
+      actionIcon="download"
+      titleColor="light"
+      subTitleColor="light"
+      >
+
+![Plane image](./images/plane.jpg)
+
+  </ImageCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ImageCard
+      aspectRatio="1:1"
+      href="/"
+      hoverColor="dark"
+      >
+
+![color pallete array](/images/color-grid.svg)
+
+  </ImageCard>
+      <ImageCard
+      disabled
+      aspectRatio="1:1"
+      href="/"
+      >
+
+![Square](/images/square.png)
+
+  </ImageCard>
+</Column>
+</Row>
+
+<Tabs>
+
+<Tab label="Text">
+
+The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you'll need to use our `Row` and `Column` helpers as demonstrated in the "Two images" tab.
+
+</Tab>
+
+<Tab label="Single image">
+
+If your content is full width, you don't need `Row` and `Column`
+
+![color array](images/colors.png)
+
+</Tab>
+
+<Tab label="Two images">
+
+<Row>
+<Column colSm={6} colLg={6}>
+
+Column one
+
+![color array](images/colors.png)
+
+</Column>
+<Column colSm={6} colLg={6}>
+
+Column two
+
+![color array](images/colors.png)
+
+</Column>
+</Row>
+
+</Tab>
+
+</Tabs>
+
 ## IBM Design for AI
 
 <FeatureCard

diff --git a/packages/example/src/pages/guides/configuration.mdx b/packages/example/src/pages/guides/configuration.mdx
@@ -9,17 +9,17 @@ Gatsby themes allow you to override configuration from the theme by defining the
 </PageDescription>
 
 <AnchorLinks>
-  <AnchorLink>Site Title and Description</AnchorLink>
+  <AnchorLink>Site title and description</AnchorLink>
   <AnchorLink>Manifest</AnchorLink>
   <AnchorLink>Favicon</AnchorLink>
   <AnchorLink>Additional font weights</AnchorLink>
-  <AnchorLink>Image Compression</AnchorLink>
-  <AnchorLink>Global Search</AnchorLink>
+  <AnchorLink>Image compression</AnchorLink>
+  <AnchorLink>Global search</AnchorLink>
   <AnchorLink>Edit on Github link</AnchorLink>
   <AnchorLink>Other options</AnchorLink>
 </AnchorLinks>
 
-## Site Title and Description
+## Site title and description
 
 To add a title and description to each page, simply provide them to siteMetadata in your `gatsby-config.js` file.
 
@@ -79,7 +79,23 @@ plugins: [
   ],
 ```
 
-## Image Compression
+## Additional font weights
+
+If needed, you can add support for additional Plex font weights. Don't forget to specify italics for the additional weights if needed.
+
+```js
+plugins: [
+    {
+      resolve: 'gatsby-theme-carbon',
+      options: {
+		// will get added to default [300, 400, 600]
+        additionalFontWeights: ['200', '200i]
+      },
+    },
+  ],
+```
+
+## Image compression
 
 You can enable WebP by passing `withWebp: true` or providing your own optimization level. See the gatsby-remark-images [plugin options](https://www.gatsbyjs.org/packages/gatsby-remark-images/#options). You can also tweak the image quality based on design tolerance and performance thresholds.
 
@@ -97,7 +113,7 @@ module.exports = {
 };
 ```
 
-## Global Search
+## Global search
 
 The GlobalSearch component is disabled by default. If you'd like to implement search functionality, you'll need to follow these two steps:
 

diff --git a/packages/gatsby-theme-carbon/src/components/AnchorLinks/AnchorLinks.module.scss b/packages/gatsby-theme-carbon/src/components/AnchorLinks/AnchorLinks.module.scss
@@ -2,10 +2,12 @@
   margin-bottom: 0;
   margin-top: $spacing-05;
   width: 100%;
+
   @include carbon--breakpoint('md') {
     margin-bottom: $spacing-07;
     width: 75%;
   }
+
   @include carbon--breakpoint('lg') {
     width: 58.33%;
   }
@@ -76,3 +78,20 @@
     column-count: 2;
   }
 }
+
+// dark background
+:global(.container--dark) .link {
+  color: $carbon--white-0;
+
+  &:before {
+    color: $carbon--white-0;
+  }
+
+  &:hover {
+    color: $carbon--blue-40;
+
+    &::before {
+      color: $carbon--blue-40;
+    }
+  }
+}
diff --git a/packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss b/packages/gatsby-theme-carbon/src/components/Aside/Aside.module.scss
@@ -20,3 +20,8 @@
   width: 75%;
   padding-right: $spacing-05;
 }
+
+// dark background
+:global(.container--dark) .aside:before {
+  background: $carbon--white-0;
+}
diff --git a/packages/gatsby-theme-carbon/src/components/Container/Container.js b/packages/gatsby-theme-carbon/src/components/Container/Container.js
@@ -1,10 +1,12 @@
+/* eslint-disable import/no-duplicates */
 import React, { useContext, useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
 import cx from 'classnames';
 import NavContext from '../../util/context/NavContext';
 import useWindowSize from '../../util/hooks/useWindowSize';
 import { overlay, visible } from './Container.module.scss';
 
-const Container = ({ children, homepage }) => {
+const Container = ({ children, homepage, theme }) => {
   const { leftNavIsOpen, switcherIsOpen, toggleNavState } = useContext(
     NavContext
   );
@@ -31,6 +33,12 @@ const Container = ({ children, homepage }) => {
     return navOpen && windowSize.innerWidth && windowSize.innerWidth < 1056;
   })();
 
+  const containerClassNames = classnames({
+    container: theme !== 'dark' || !homepage,
+    'container--homepage': homepage,
+    'container--dark': theme === 'dark',
+  });
+
   return (
     <>
       <div
@@ -40,12 +48,7 @@ const Container = ({ children, homepage }) => {
         role="presentation"
         tabIndex="-1"
       />
-      <div
-        aria-hidden={overlayVisible}
-        className={`${
-          homepage ? 'container--homepage container' : 'container'
-        }`}
-      >
+      <div aria-hidden={overlayVisible} className={containerClassNames}>
         {children}
       </div>
     </>

diff --git a/packages/gatsby-theme-carbon/src/components/EditLink/EditLink.module.scss b/packages/gatsby-theme-carbon/src/components/EditLink/EditLink.module.scss
@@ -2,6 +2,7 @@
   @include carbon--type-style('body-short-01');
   transition: color $transition--base;
   color: $text-02;
+
   &:hover {
     color: $text-01;
   }
@@ -11,3 +12,11 @@
   position: relative;
   top: 9rem;
 }
+
+:global(.container--dark) .link {
+  color: $carbon--white-0;
+
+  &:hover {
+    color: $carbon--white-0;
+  }
+}
diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss b/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss
@@ -1,8 +1,10 @@
+.container--dark,
 .container--homepage {
   background: $carbon--gray-100;
   color: $carbon--white-0;
 }
 
+.container--dark a,
 .container--homepage a {
   color: $carbon--blue-40;
 }

diff --git a/packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss b/packages/gatsby-theme-carbon/src/components/ImageCard/image-card.scss
@@ -124,3 +124,8 @@
   svg {
   fill: $carbon--gray-70; //$disabled-02 for gray 90
 }
+
+// dark background
+.container--dark .#{$prefix}--image-card__img {
+  background: $carbon--gray-100;
+}
diff --git a/packages/gatsby-theme-carbon/src/components/Layout.js b/packages/gatsby-theme-carbon/src/components/Layout.js
@@ -13,6 +13,7 @@ import '../styles/index.scss';
 const Layout = ({
   children,
   homepage,
+  theme,
   shouldHideHeader,
   titleType,
   pageTitle,
@@ -48,8 +49,9 @@ const Layout = ({
         shouldHideHeader={shouldHideHeader}
         homepage={homepage}
         is404Page={is404}
+        theme={theme}
       />
-      <Container homepage={homepage}>
+      <Container homepage={homepage} theme={theme}>
         <MDXProvider>{children}</MDXProvider>
         <Footer />
       </Container>

diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
@@ -58,7 +58,10 @@ const LeftNav = props => {
         aria-label="Side navigation"
         className={classnames({
           'bx--side-nav--website': true,
-          'bx--side-nav--website--light': !props.homepage,
+          'bx--side-nav--website--dark':
+            props.theme === 'dark' || props.homepage,
+          'bx--side-nav--website--light':
+            props.theme !== 'dark' && !props.homepage,
         })}
       >
         <SideNavItems>