diff --git a/packages/example/src/pages/components/Accordion.mdx b/packages/example/src/pages/components/Accordion.mdx index 964f5fa0c..cd1c39a91 100644 --- a/packages/example/src/pages/components/Accordion.mdx +++ b/packages/example/src/pages/components/Accordion.mdx @@ -13,7 +13,7 @@ The `` and `` components are used together to display -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 index 5ada365e5..58c29c99e 100644 --- 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 +| 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 +``` + + + + + +![Square](/images/square.png) + + + + +![Light dark](./images/light-dark.jpg) + + + + + + +![Plane image](./images/plane.jpg) + + + + + + +![color pallete array](/images/color-grid.svg) + + + + +![Square](/images/square.png) + + + + + + + + + +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. + + + + + +If your content is full width, you don't need `Row` and `Column` + +![color array](images/colors.png) + + + + + + + + +Column one + +![color array](images/colors.png) + + + + +Column two + +![color array](images/colors.png) + + + + + + + + ## IBM Design for AI - Site Title and Description + Site title and description Manifest Favicon Additional font weights - Image Compression - Global Search + Image compression + Global search Edit on Github link Other options -## 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 index 1dabff385..272c4837a 100644 --- 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 index feff12eaf..64df2c8e8 100644 --- 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 index a4cf0517b..8e8ce8d2f 100644 --- 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 ( <>
{ role="presentation" tabIndex="-1" /> -
+
{children}
diff --git a/packages/gatsby-theme-carbon/src/components/EditLink/EditLink.module.scss b/packages/gatsby-theme-carbon/src/components/EditLink/EditLink.module.scss index abadc903d..f6fe5e8f5 100644 --- 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 index 2b5e0273d..114dcc74f 100644 --- 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 index 262ecae02..7161461a3 100644 --- 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 index d936812bf..c63f6e003 100644 --- 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} /> - + {children}