Ignition Perspective symbol factory animation

Ignition
15

You really should look into using a custom theme and css variables for all of your standard colours, as it provides far better standardisation than any other method (or than simply using magic colours).

You can reference css variables and use them as component property values using:
var(--VARIABLE_NAME)

This is an example of my custom style variable.css below. Mostly I reference these within Perspective Styles, however I also do reference some of the directly in component property values when Styles can’t be used.

:root {
    /* Views */
    --page-background: #E8E6E3;
    /* Device Statuses */
    --dev-sym-foi: #2FCCEB;
    --dev-sym-faulted: #F05142; /* pastel red */
    --dev-sym-faulted-flash: #8e160b; /* pastel red */
    --dev-txt-faulted: #FFF;
	--dev-txtbg-faulted: var(--dev-sym-faulted); /* pastel red */
	--dev-txtbg-faulted-flash: var(--dev-sym-faulted-flash); /* pastel red */    
    
	--dev-sym-running: #42F042;
    --dev-sym-running-flash: #0b8e0b;
    --dev-txt-running: #2b2b2b;
	--dev-txtbg-running: var(--dev-sym-running); /* pastel red */
	--dev-txtbg-running-flash: var(--dev-sym-running-flash); /* pastel green dark*/
    
	
	--dev-txt-stopped: #2b2b2b;
	--dev-sym-stopped: #f7f7f7; /* grey-medium */
	--dev-sym-stopped-flash: #d8d8d8; /* grey-dark */
	--dev-txtbg-stopped: #dedede; /* grey-medium */
	--dev-txtbg-stopped-flash: #c3c3c3; /* grey-dark */
	
    --dev-sym-invalid: magenta; /* magenta */
	--dev-txt-invalid: #2b2b2b;
	--dev-txtbg-invalid: var(--dev-sym-invalid); /* magenta */
	
    --dev-sym-abnormal: #FFAC47;
	--dev-txt-abnormal: #2b2b2b;
	--dev-txtbg-abnormal: var(--dev-sym-abnormal); /* orange*/
	
	/* Device Modes */
	--dev-txt-auto: #2b2b2b;
    --dev-auto: #AAAAAA;
	
	--dev-txt-manual: #2b2b2b;
	--dev-manual: #FFAC47;
	
	--dev-txt-maintenance: #2b2b2b;
	--dev-maintenance: #F0F042;
	
	/* Pipework Contents Fill Colours */
	--pipe-cip-off: #D3BCC9;
	--pipe-cip-on: #E38ABB;
	
	--pipe-water-off: #BBC8D3;
	--pipe-water-on: #B8DDF9;
	
    --pipe-oil-off: #c6b4a7;
    --pipe-oil-on: #795236;
}

For example, you can set a component’s props.style.color value to var(--pip-cip-on)

3 Likes