Production floor

Stack Light <smart-stack-light>

StackLight displays the tower light of a machine as a column of coloured segments that can be off, on, flashing or flashing fast, with an optional horn.

Stylesheet

The component is styled by source/styles/default/smart.stacklight.css, which is included in smart.industrial-elements.css. It uses the theme's CSS variables and the Industrial tokens (--smart-industrial-*) described in the Themes and Styling guide, so it follows the theme applied to the page.

CSS variables

The component declares 12 CSS variables of its own, on the component itself. Set them in a rule that selects the component, loaded after the component's stylesheet: smart-stack-light, or a class or an id on it. A value set on a container does not reach the component, because the component's own declaration replaces the inherited one.

smart-stack-light {
    --smart-stack-segment-width: ...;
    --smart-stack-segment-height: ...;
    --smart-stack-gap: ...;
    --smart-stack-flash-rate: ...;
    --smart-stack-red: ...;
    --smart-stack-amber: ...;
    --smart-stack-green: ...;
    --smart-stack-blue: ...;
    --smart-stack-white: ...;
    --smart-stack-off-opacity: ...;
    --smart-stack-body: ...;
    --smart-stack-color: ...;
}

/* one instance */
#stackLight {
    --smart-stack-segment-width: ...;
}

2 variables are written inline by the component's script, and an inline value replaces any stylesheet rule:

• --smart-stack-flash-rate is written on the component from the flashRate property.
• --smart-stack-color is written on each light from the color of its entry in segments, for a light without a named state.

Set these through the property rather than in CSS.

Themes

Two ISA-101 themes ship with the package: smart.industrial.css and smart.industrial-dark.css. Load one after the base theme and set theme="industrial" or theme="industrial-dark" on the body element. The demo page switches between the three.

<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" />

<body theme="industrial">