OLYSENSE Design System

Disclaimer
One of the goals of the OLYSENSE Design System is to bring uniformity and consistency to Olympus products. The OLYSENSE Design System is meant to be a tool that accelerates your development efforts, not a blocker that slows you down. Keep in mind, the more that you customize a particular component, the further you distance your application from the goal of uniformity and consistency. With great power comes great responsibility. Customization should be used sparingly and as an escape hatch when it’s truly necessary and appropriate. When in doubt, reach out to the design system team to discuss a particular customization.

CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required. Our components use a shadow DOM to encapsulate their styles and behaviors. As a result, you can’t simply target their internals with the usual CSS selectors. Instead, components expose “parts” that can be targeted with the CSS part selector , or ::part().

Here’s an example that modifies the tag component with custom styling.

Default

<ods-tag id="tag-example" size="medium">Default</ods-tag>

<style>
  #tag-example::part(base) {
    background-color: var(--ods-sys-color-surface-container);
    border: solid 1px var(--ods-sys-color-status-danger);
    color: var(--ods-sys-color-status-danger);
    font-family: var(--ods-sys-font-family-base);
  }
</style>

import { OdsTag } from '@ods/components/react.tag';
import './basic.css';

/*
// basic.css

#tag-example::part(base) {
  background-color: var(--ods-sys-color-surface-container);
  border: solid 1px var(--ods-sys-color-status-danger);
  color: var(--ods-sys-color-status-danger);
}
*/

const Example = () => {
  return (
    <OdsTag id='tag-example' size="medium">Default</OdsTag>
  )
}

export default Example;

At first glance, this approach might seem a bit verbose or even limiting, but it comes with a few important advantages:

Customizations can be made to components with explicit selectors, such as ::part(icon), rather than implicit selectors, such as .button > div > span + .icon, that are much more fragile.
The internal structure of a component will likely change as it evolves. By exposing CSS parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component’s API, it’s guaranteed to be supported and can’t be removed until a major version of the library is released.

Most (but not all) components expose parts. You can find them in each component’s API documentation under the “CSS Parts” section.