Yes.
A lot of users approached Perspective Styles form the beginning as a way to define broad-scope settings across components because Perspective themes were not fully developed and fleshed-out. This approach worked to move users along, but from a maintenance and adaptability perspective, this is the wrong approach.
Style settings and colors which are intended to be used throughout the project should be applied through a project’s theme, and Perspective Style Classes should be used in instances like one-offs, or when you want an appearance based on some property or state. In this way, Style Classes prevent you from needing to bind potentially dozens of individual style properties against a value.
In your case, you should provide an additional file of colors in the theme directory - themes/custom_colors.css
with a color like --kg-light-grey: #e7dbdb
(don’t add your color to the existing list of named colors) and make sure to import this file within the top-level theme files.
themes/light.css
should look like this, as should the other themes you want to use your colors in:
@import "./light/index.css";
@import "./custom_colors.css";
Then, you can access your color anywhere on the project just as @PGriffith suggested: var(--kg-light-grey)
.
Binding the Style Class in use to the Alarm state is going to be a little trickier, but should be something like this:
Note that this binding is on the
classes
property, not style
. In this example, “ActiveAlarm” is a Perspective Style Class at the top level of the Styles directory and houses style settings I want applied to components in the event a specified Alarm is in an active state.