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).
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
- 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. - Apply the class
.ix
to the.uxt-defaults
element. - Depending if you want to use the dark or light theme, add
.uxt-ix-theme-dark
or.uxt-ix-theme-light
to yourbody
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:
- Headings are notably smaller
- 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 Toolkit | Industrial Experience |
---|---|
App bar | Nav menu |
Badge | Pill, chip |
Busy indicator | Spinner |
Button - primary - secondary - ghost | Button - primary filled - primary outline - primary ghost |
Card grid | Layout grid |
Container | Card |
Dialog | Modal |
Dropzone | Upload |
List | Event list |
Stepper | Workflow |
Menu | Dropdown button |
Message | Message bar |
Notification | Toast |
Pager | Pagination |
Popover | Tooltip, dropdown |
Switch | Toggle |
Context region | Pane (inline right) |
Item region | Pane (floating right) |
Leading region | Pane (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.