Skip to main content

UXT 2.7.0 to Siemens Industrial Experience design system

For a quick and easy migration without changing your code base, the iX-UXT CSS Theme is prepared for app developers using the CSS from UXT (User Experience Toolkit, formerly named MindSphere Design System).

info

For the full experience, please use the Siemens Industrial Experience components. The theme is intended for a quick, yet, incomplete switch from UXT as a legacy design system.

Usage

  1. When using UXT below v2.7.0, download the CSS theme and import it into your project.
    If you are using UXT v2.7.0 or higher, it is already part of the UXT CSS.
  2. Apply the class .ix to the .uxt-defaults element.
  3. Depending if you want to use the dark or light theme, add .uxt-ix-theme-dark or .uxt-ix-theme-light to your body element.

In the end, your setup should look like this:

<body class="uxt-ix-theme-dark">
...
<div class="uxt uxt-defaults ix"></div>
...
</body>
<body class="uxt-ix-theme-light">
...
<div class="uxt uxt-defaults ix"></div>
...
</body>

Note: We recommend using the CSS theme with UXT v2.7.0

Your layout might change in some places when applying the theme, including:

  1. Headings are notably smaller
  2. Buttons are slightly wider because of the bold label

Troubleshooting

If you're facing any other problems, please raise an issue in GitHub raising an issue.

Component name differences

As some of the components are named differently in Industrial Experience, please consult this list of the most important component name differences to help make your migration easier:

User Experience ToolkitIndustrial Experience
App barNav menu
BadgePill, chip
Busy indicatorSpinner
Button
- primary
- secondary
- ghost
Button
- primary filled
- primary outline
- primary ghost
Card gridLayout grid
ContainerCard
DialogModal
DropzoneUpload
ListEvent list
StepperWorkflow
MenuDropdown button
MessageMessage bar
NotificationToast
PagerPagination
PopoverTooltip, dropdown
SwitchToggle
Context regionPane (inline right)
Item regionPane (floating right)
Leading regionPane (inline left)

System icons

Key differences between UXT and Industrial Experience:

  • UXT offers an iconfont with 3 different styles (regular, bold, filled)
  • iX offers SVGs with mainly 1 style that corresponds to our bold and partially filled variants separately

When changing to the SVG icons by Industrial Experience, check whether your stylings still apply in your custom-built components.

Figma library

When switching from UXT to Industrial Experience, use the swap library feature as described here.