Our v10.4.0 release offers a wide range of enhancements and improvements in the following areas:
We also introduced general updates to our website and have an ongoing support project for managing issue triage and fixing bugs.
$disabled-0*color tokens for dark themes
$highlighttoken in dark themes
$hover-primary-texttoken in dark themes
$hover-uitoken in g90 theme
@carbon/icons-reactnow supports an entrypoint
index.js, you no longer are required to specify the path for an icon
Accessibility updates to Tooltips
Update toggle labels to be accessible
Accessibility updates for underlying Listbox
Data Table updates
Accessibility updates for Overflow Menu
Icon button: added disabled state #121
Checkbox: missing indeterminate state (G90 and G100 theme) #128
Data table: Corrected pinning in icon symbols (G10 theme) #129
Overflow menu: duplicated symbols removed (G100 theme) #137
Skeleton states: updated to use new tokens #138
Tooltip: re-organized symbol structure #140
Pagination: updated symbol structure for standalone variation, add number states #130
Modal: added footer symbol and single action option #116
Progress indicator: added vertical variation #123
Color tokens: added #138
Text style: added “body-short-02/text-03” #136
Following the Carbon v10 release, we restructured our repos and much of the Carbon site. Older links may not work.
Carbon v10 is released. The Carbon Design System adopts the new IBM Design Language.
The Carbon v10 launch is just around the corner, and we’ve officially entered Beta! That means the core team has been hard at work ensuring the new system is ready to ship. We have tons of improvements headed your way, including implementation of the new IBM Design Language and an all-new website.
We expect v10 to launch mid-March, so keep your eyes peeled. If you’re interested in getting started before our public launch, we’re always looking for beta testers to help us squash bugs and improve the Carbon Design System.
A new Experimental section has been added to the website. Experimental components, designs, patterns, and other resources are work that is still under development.
Experimental components, designs, and other resources are presented for testing and feedback. They are not intended for production use.
$ui-05 – #5A6872(passing 4.5:1, high contrast border, secondary icons)
$ui-04 – #8897A2(passing 3:1, now used for emphasis borders)
$ui-03 – #DFE3E6(not passing 3:1, now used for subtle borders)
$support-01 – #E0182D(passing 4.5:1)
$support-01 – #CDD1D4(not passing 4,5:1, used only for placeholder text)
$field-01 – #F4F7FB(input field background on
$field-02 – #FFFFFF(input field background on
$inverse-02 – #272d33(passing 4,5:1)
There are four new hover tokens added to the Carbon palette. They can now be found on the Swatches page and are available in the Design Kit and palette plugin
$hover-primary – #30588c
$hover-primary-text – #294c86
$hover-row – #5596e6at 10% opacity
$hover-secondary – #3d70b2
$hover-danger – #bd1427
16x16px(24x24px is no longer being supported).
--glyphmodifier has been deprecated. Most of the glyph variations were replaced with a
--solid modifier. Check out the icon migration docs to see the status of all the icons.
There is a new section called Utilities which gives guidance on common pattern handlings. Unlike the component section, these guidelines offer usage guidance with minimal code documentation. To read more about each of these utilities see the sections below:
The Themes page has been moved to the Style section.
We have tokenized our spacing and now offer two systemized scales. The Spacing Scale defines space within a component while the Layout Scale is used to help position elements on a page. Check out the new Spacing section to learn more about these scales and read the rest of the spacing guidelines.
We have recorded a Carbon Design Kit with Sketch Libraries Tutorial over on our YouTube channel. It goes over how to download the Carbon Sketch Kit, import a Sketch Library, as well as how to get and accept library updates/notifications. It also gives a brief overview of how the Library is organized and how to use the overrides panel and library symbols.
The Carbon Design Kit now includes Sketch Libraries, a better way to share and version symbols across Sketch files. Check out our Sketch Libraries wiki to get a quick tutorial on libraries.
With the latest release of the Design Kit, we’ve included the Sketch Palettes plugin, which allows you to load in pre-saved palettes for Sketch. You can import Carbon’s four color palettes (Carbon default theme, Data Vis primary, Data Vis secondary, and Data Vis tertiary) into your working Sketch document. There’s also a variety of other plugins we recommend to help improve your workflow using Sketch.
Download the latest kit today! Carbon design kit.
Interested in getting some 1:1 time with the Carbon team? Carbon Sessions is a chance for anyone using the Carbon Design System to ask questions and get feedback. Sessions happen very Wednesday morning (Central Standard Time). Time slots are around 10 minutes, but feel free to book more than one if you need additional time.
Sign up for a Carbon Sessions time slot if you’re interested in chatting further!
We’re excited to bring some added functionality that enhances our Dropdown component. Filtering, Multi-select, and Inline Dropdown are new additions to our basic Dropdown component.
Note: This component is currently only available in React.
Small Toggle is a style variation of our traditional Toggle component. It’s more compact in size, which allows them to be used in Data Tables or inline with Form elements.
Bar Graph is the newest addition to our Data Visualization collection. It comes in two variations: Bar Graph and Grouped Bar Graph. You can use this component to represent quantitative information, such as comparing the taco sales between Austin taco shops in the month of June.
We have created several Data Visualization Tooltip variations to show the value for a specific data point or increment range. Tooltips appear on hover above or below a data representation, depending on the use case.