Style

The @itwin/core-react package includes Sass variables and mixins for colors and themes, breakpoints, opacity, sizing, spacing and typography.

Colors and Themes

There are two color themes delivered in @itwin/core-react: 'light' and 'dark'. The color values for each theme are defined in core-react/style/colorthemes.scss. This file is imported in @itwin/core-react by UiCore.ts and that should be the only place where it is imported. (It should not be imported by any *.scss or other core-react files.)

The color theme system uses CSS variables (aka. CSS custom properties) to define the color values. The values of the CSS variables are changed when the name of the "data-theme" document element attribute is set. The ThemeManager component in the @itwin/appui-react package does this by calling document.documentElement.setAttribute("data-theme", theme).

Sass variables are used in the UI components to reference the CSS variables set to the themed colors. These themed color Sass variables are defined in the core-react/style/themecolors.scss file and begin with $buic-. These should be used when styling a themed component. There are older Sass variables that begin with $uicore-. These should not be used when styling a themed component. Examples of these variables include $uicore-text-color, $uicore-green and $uicore-blue.

Basic Themed Colors

The following Sass variables define the basic background and foreground themed colors:

There are additional Sass variables defined in core-react/style/themecolors.scss for different contexts. For instance, the $buic-text-color and $buic-icon-color variables are assigned to $buic-foreground-body. $buic-background-control is assigned to $buic-background-1. $buic-background-control-stroke is assigned to $buic-background-5.

Since there are variables defined for the different background contexts, they should be used within those contexts, and the $buic-background-1 through $buic-background-5 variables should rarely be used directly.

@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";

.my-component {
  color: $buic-text-color;
  background-color: $buic-background-control;
}

Breakpoints

Several breakpoints are defined for dealing with screens and devices with different heights and widths. Internally, these breakpoints use CSS @media queries.

Example

@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";

.toolAssistance-separator {
  @include for-tablet-landscape-down {
    display: none;
  }
}

Opacity

Different opacity stops are defined in the core-react/style/opacity.scss file.

Spacing

Different spacing values are defined in the core-react/style/space.scss file.

Typography

Different font sizes, weights and families are defined in the core-react/style/typography.scss file.

The core-react/text/index.scss file also brings in several mixins that assist with styling text. The uicore-text mixin takes a text type name and defines font size, weight & line height.

There are also specific mixins for the text types.

There are also React components for the different text types. E.g.

import { BodyText, LeadingText, SmallText } from "@itwin/core-react";

  <LeadingText>Dialog Title</LeadingText>
  <BodyText>Normal message text</BodyText>
  <SmallText>Detailed message explanation</SmallText>

Note: Contrary to the variable name, the leading text is normally used for title bar text.

Scrollbar

A couple of Sass mixins are provided for standardizing the look of a scrollbar. uicore-touch-scrolling provides smooth scrolling on touch devices. uicore-scrollbar defines a standard scrollbar look in Chrome/Webkit based browsers. For any container CSS class that shows a scrollbar, the uicore-touch-scrolling and uicore-scrollbar mixins should be included.

Example

@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";

.my-scrollable-container {
  @include uicore-touch-scrolling;
  @include uicore-scrollbar();
}

Standard z-index Values

The uicore-z-index mixin sets a standard z-index for CSS classes. The following Ids can be passed to the uicore-z-index mixin and are listed in order from lowest to top-most:

• view-overlay
• widget-grip
• dragged-widget
• zone-target
• zone-outline
• toolbar-panels
• tool-settings-popup
• status-popup
• status-message
• modal-frontstage-overlay
• modal-frontstage
• dialog
• dialog-popup
• tooltip
• context-menu-z
• dragdrop
• cursor-overlay
• drag-target
• drag-preview
• backstage-overlay
• backstage

Example

@import "~@itwin/core-react/lib/cjs/core-react/z-index";

.my-tooltip {
  @include uicore-z-index(tooltip);
}

Last Updated: 02 February, 2022