The design system's CSS reset is a collection of HTML element-specific styles that simplifies the development process while providing cross-browser sensible defaults to build from.
Our reset CSS is bundled with the rest of the design system's styles, so to use it all you need to do is import the design system's CSS using your preferred method. Even if you haven't imported one of our components, your application should visually align with the design system.
If you're curious to see what changes have been made, you can preview our reset styles in Storybook. We'll break down the major changes for you to review below.
The CSS reset introduces globally-defined defaults that will impact the entire application once the CSS has been imported. These defaults include (but aren't limited to):
box-sizing: border-boxis set on every element — including
*::after. This ensures that the declared width of element is never exceeded due to padding or border.
scroll-behavior: smoothset on
:focus-within. This is a CSS-only solution that provides smooth anchor scrolling.
- Animations, transitions, and smooth scroll are removed on all elements - including
*::afterfor users who have
prefers-reduced-motionenabled to respect their preferences.
<body>element effectively replaces the
- In addition,
background-colorto a theme's specified background.
- In addition,
outlineis removed on elements with the
tabindex="-1"declared. This removes focus rings for non-interactive elements, e.g., when activating a skip link will then send focus to a
<main>or heading element.
- To avoid margin collapse, all elements will only rely on their respective top margins to better control layout. All bottom margins have been removed.
All heading elements will receive the font styles defined by their parent element using the
font: inherit rule.
font is a shorthand property that encompasses several font styles, but the key thing to note is a heading will now inherit the
font-size of its parent or
<body> element. This rule ensures the semantics of a heading element are distinct from its appearance. If you need to style a heading, refer to our headings or utility class documentation.
Links behave as they previously did, with one exception—the
text-decoration-color is now set to
currentColor. This change was made under the assumption that all link underlines will have the same color as its text, regardless of that text's state.
<ul> elements have been styled to match their
.ds-c-list counterpart, with one key difference - they use
flex to better control list item spacing and assist with commonly used inline list patterns.
If you find yourself in need of an inline list, you can add
flex-direction: row locally to your project. Likewise, if the spacing between list elements isn't to your liking,
gap can be changed to the value that fits your project best.
One last change worth mentioning for lists is that unstyled lists are defined under the
role="list" attribute. This makes something like
<ul role="list"> visually the same as applying the
.ds-c-list--bare class. Because unstyled lists have accessibility concerns, we opted to include this style rule to ensure proper markup is used.
Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
<select>elements receive the font styles defined by their parent element using the
cursor: not-allowedto prevent user confusion.
- Checkboxes and radio buttons use
accent-color(set to a theme's defined "checked" color). This makes sure the
:checkedstate of these inputs matches the theme of your site, even if you aren't using our Choice component.
paddingso they can be easily used as wrappers for individual inputs or groups of inputs.