Skip to main content

Migration from UXT 2.7.0

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. Download the Brand CSS theme and import it into your project. Note that it’s available exclusively for Siemens AG products. For non Siemens AG products please contact us.
  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.