use static style bindings

Author: Andrew Seguin

src/app/pages/system-variables/system-variables.html

@@ -21,8 +21,8 @@ <h2 id="colors">Colors</h2>
 <div class="demo-group">
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-sys-primary)'"
-         [style.color]="'var(--mat-sys-on-primary)'">
+         style="background-color: var(--mat-sys-primary);
+                color: var(--mat-sys-on-primary)">
       <div class="demo-name">Primary</div>
       <div class="demo-variable demo-code">--mat-sys-primary</div>
     </div>
@@ -46,8 +46,8 @@ <h2 id="colors">Colors</h2>
 
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-sys-surface)'"
-         [style.color]="'var(--mat-sys-on-surface)'">
+         style="background-color: var(--mat-sys-surface);
+                color: var(--mat-sys-on-surface)">
       <div class="demo-name">Surface</div>
       <div class="demo-variable code">--mat-sys-surface</div>
     </div>
@@ -70,8 +70,8 @@ <h2 id="colors">Colors</h2>
 
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-sys-error)'"
-         [style.color]="'var(--mat-sys-on-error)'">
+         style="background-color: var(--mat-sys-error);
+                color: var(--mat-sys-on-error)">
       <div class="demo-name">Error</div>
       <div class="demo-variable demo-code">--mat-sys-error</div>
     </div>
@@ -93,8 +93,8 @@ <h2 id="colors">Colors</h2>
 
   <div class="demo-color-container">
     <div class="demo-heading"
-         [style.background-color]="'var(--mat-sys-outline)'"
-         [style.color]="'var(--mat-sys-surface)'">
+         style="background-color: var(--mat-sys-outline);
+                color: var(--mat-sys-surface)">
       <div class="demo-name">Outline</div>
       <div class="demo-variable demo-code">--mat-sys-outline </div>
     </div>