Guide
Themes and styling
Stylesheets
The package contains three kinds of stylesheet. Loading the wrong one is the most common reason a screen does not look as expected:
| File | Job | Required? |
|---|---|---|
smart.default.css | The theme: the tokens (colours, fonts, spacing) every component reads. Any Smart UI theme works here. | Yes, one theme |
smart.industrial-elements.css | The components: how a faceplate, an alarm grid or a knob is drawn, in terms of the tokens. One file for all 54, or one per component from styles/default/. | Yes |
smart.industrial.css, smart.industrial-dark.css | The ISA-101 themes: a second set of token values for operator screens, selected with a theme attribute. They restyle the whole page, not only the Industrial components. | Optional |
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-dark.css" /> <body theme="industrial-dark">
Both ISA-101 themes can be loaded at the same time. The theme attribute selects one, and changing the attribute switches the page without a reload. The attribute can also be set on a single component, so one faceplate can use the dark theme on a light page. It takes effect on body and on the components themselves, not on other elements: a <div theme="industrial-dark"> does not change the components inside it.
The ISA-101 themes
ISA-101 recommends a grey background and reserves colour for abnormal conditions, so that an alarm is the only saturated colour on the screen. In the light theme, panels are near-white on the grey background, which keeps a dense screen readable under plant lighting. The dark theme follows the same rule for control rooms: surfaces are lighter than the background, so a panel is recognisable as a panel and the text has sufficient contrast.
The two themes use different neutral colours and the same colour meanings. The ISA-101 conformance statement describes how the themes use colour, gives the measured contrast of the alarm colours, explains why each meaning has a second token for text, and describes what the application has to do beyond loading a theme.
CSS variables
In addition to the --smart-* variables of the suite, the ISA-101 themes define a set of Industrial variables that the components and the screen templates use. Override them on body or on a container to adjust a screen. A component that has its own theme attribute sets the theme's values on itself, so an override meant for it has to be set on the component too. Without an Industrial theme, smart.industrial-elements.css gives the alarm, state and focus variables defaults derived from the suite theme's colours.
| Token | Meaning |
|---|---|
--smart-industrial-canvas | The page background. |
--smart-industrial-panel-background, -panel-border, -panel-header-background, -panel-shadow | Panels and their headers. |
--smart-industrial-readout-background, -readout-color | Numeric readouts. |
--smart-industrial-alarm-critical, -alarm-warning, -alarm-advisory, each with -color and -text | The three alarm priorities: the fill, the text on that fill, and the same meaning as text on a panel. |
--smart-industrial-ok, -unknown, each with -color and -text | Normal and unknown, the two states that must not look like alarms. |
--smart-industrial-running, -stopped, -manual, -maintenance | Equipment states. |
--smart-industrial-abnormal-background | The wash behind anything abnormal. |
--smart-industrial-accent-line, -accent-text | Emphasis without alarm meaning. |
--smart-industrial-focus, -focus-halo | Keyboard focus, which has to be visible on every surface. |
/* A site whose warning colour is amber rather than orange. */
body[theme="industrial-dark"] {
--smart-industrial-alarm-warning: #d8a300;
--smart-industrial-alarm-warning-color: #1a1a1a;
--smart-industrial-alarm-warning-text: #ffd24d;
}
Range bands
Smart.Industrial.apply() configures a smart-gauge, smart-tank or smart-slider (the three are in the package) from a named preset. The gauge and tank presets set range bands with the classes industrial-normal, industrial-advisory, industrial-warning and industrial-critical. The themes colour the advisory, warning and critical bands and keep the normal band neutral, so only abnormal ranges are coloured. Ranges defined manually can use the same classes.
Smart.Industrial.apply(document.querySelector('#p1'), 'pressure-gauge');
Smart.Industrial.apply(tank, 'level-tank', { unit: '%' });
Smart.Industrial.list(); //the preset names
Smart.Industrial.get('pressure-gauge'); //the property set, to inspect or extend
A preset's bands are computed once, as fractions of the preset's own scale (0 to 10 bar for the pressure gauge, for example). Overriding min or max without ranges moves the bands with the scale: each band edge stays at the same fraction of the new span, so Smart.Industrial.apply(gauge, 'pressure-gauge', { max: 16 }) puts the critical band at 15.2 to 16 bar. Bands given in ranges are used as written.
Per-component stylesheets
smart.industrial-elements.css contains the default values of the Industrial variables and the stylesheets of all 54 components, concatenated and minified. A page that uses two components can load their stylesheets instead:
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/default/smart.industrial-tokens.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/default/smart.faceplate.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/default/smart.alarmbanner.css" />
smart.industrial-tokens.css holds the default values of the Industrial variables and comes first. The CSS Styling page of each component lists the CSS variables it exposes, such as --smart-audit-max-height or --smart-bar-graph-height, for sizes and spacing that are set per screen rather than by the theme. Set those on the component itself: a component declares its own defaults on its own selector, so a value set on a container does not reach it.
Screen layout
The operator screens on the site share one stylesheet, industrial-demos.css, for the layout around the components: the .hmi-screen layout, the .hmi-header with its identity block, .hmi-panel, the .hmi-grid-* layouts, buttons, tables and the connection indicator. It is a template rather than part of the package and can be copied from a screen and modified. smart-hmi-shell is the packaged component for the header, the navigation and the alarm footer.