Releases: carbon-design-system/gatsby-theme-carbon
v1.3.1
v1.3.0
New
gatsby-theme-carbon/styles/_global.scss
You can inject global styles into the theme's style bundle by shadowing gatsby-theme-carbon/styles/_global.scss
in your project's src
directory. This technique is especially useful for node_module
dependencies that assume a single bundle (such as individual carbon-components
).
For your application's local styles, you can just import your style sheet directly into a gatsby-browser.js
file at the root of your project.
TLDR
- If needed, shadow
_global.scss
to inject global dependencies such as individualcarbon-components
_global.scss
does nothing if it's not shadowed_global.scss
gets injected after our globals but before theme styles.
Bug fixes
v1.2.1
v1.2.0
New
-
Video component enhancements #160
- You can now use local videos from your static directory
- You can also add posters/subtitle files to these local videos
-
We separated the MDXProvider from the components. A shadowed MDXProvider will now receive the default components as props. This allows the users to spread the default components into a new object and override individual components #170
-
The markdown components now use sass modules and have their styles colocated in a single file. #170
-
Since the
h1
role effectively consumed by the page header, we now styleh1
tags the same ash2
tags with one exception:h1
components have no margin-top. This means the start of your content should be either a PageDescription or anh1
tag (single #).We recommend the former strategy. For most content, we think
PageDescription
→AnchorLinks
creates a nice hierarchy.
Fixes
v1.1.1
v1.1.0
@channel we just published v1.1.0 That allows you to enable and configure WebP image processing (it’s disabled by default). This dramatically improves image performance on browsers that support it.
But primarily it activates the AI link in the the website-switcher. Congrats to @lhumphrey and the folks on AI for the first public use of the theme. You can check it out here, or click the link in the switcher ;)
v1.0.1
v1.0.0
New since pre-release
- Side-nav and page-tab scrolling
- homepage alignment fixes
- body copy length adjustments
- add italic plex + document italics
New in v1.0.0
- Add metadata from siteMetadata
This will automatically inject a title, description and keywords into the head of your document. Simply provide them to siteMetadata in your gatsby-config.js
file.
module.exports = {
siteMetadata: {
title: 'Gatsby Theme Carbon',
description: 'A Gatsby theme for the carbon design system',
keywords: 'gatsby,theme,carbon',
},
__experimentalThemes: [
{
resolve: 'gatsby-theme-carbon',
},
],
};
-
All of our components are global now, if it comes from us you don't need to import it at the top of your
.mdx
files~~`import { PageDescription, Row, Column } from 'gatsby-theme-carbon'`~~
- Add Link styles to markdown w/ support for local links
- Added manifest config to example w/ docs
- Add default favicon
- Update sass build: blazing fast hot module reloading and smaller bundle size
- gatsby-image: higher default image quality, and WebP for browsers that support it
- Tabs component!
Breaking
Two possible breaking changes:
-
If you were using the theme options to configure some manifest options (name, short_name, short_url, background/theme color) the preferred method is to now pass those options into the manifest plugin itself. We were just passing them in for you anyway.
This configuration is demonstrated in the example project.
-
If you're using a
carbon-components-react
component for your own custom components, you'll need to import the styles for that component.While you can just include the entire css stylesheet from carbon-components, we recommend importing just the component you need (example below). You can read more about importing Carbon's individual components' styles from our medium post here.
The new Link component demonstrates this pattern.
v1.0.0-alpha.0
v1.0.0-alpha.0
v0.7.0
Bug fixes
- Overlay and navigation state improvements
- Alignment fixes for Cards and Footer
- PageHeader height adjustments
Features
- ImageCard – Customizable image block for assembling stylized groups of links
- New
Switcher
with updated default links and styles - ArticleCard subtitle
- Email Icon for all cards
- Global Search custom hook interface
- New example doc pages for components
- Add support for Plex special characters and additional font weights
- Advanced configuration and shadowing guides
- 404 implementation
- Modifying image compression
- Global Search
- Extra font weights
Breaking changes
- Global Search is disabled by default, you'll need to turn it on and configure a custom hook for your chose search provider
- If you've shadowed/overridden components previously to accommodate for spacing issues, give the new, native, updates a try.