[angular-18]: Add semiFiltered in indicators.less and fix section tab border.

less/general.less

@@ -432,6 +432,7 @@ a:hover .text-usage-counts-hover:extend(.uk-text-background) {
 
 .filter-button-toggle, .filter-button-toggle.mat-button-toggle-checked {
   --mat-standard-button-toggle-height:  @global-control-small-height;
+  --mat-standard-button-toggle-label-text-size: @global-xsmall-font-size;
   background-color: @global-inverse-color;
 
   & > button > span {

less/indicators.less

@@ -3,12 +3,18 @@
 @section-container-margin-top: @global-font-size + 2*@global-xsmall-gutter;
 @section-tab-padding: @global-xsmall-gutter @global-gutter;
 @section-tab-background: @muted-color;
-@section-tab-border: @global-border-width solid @gray-300;
+@section-tab-border: @section-container-border;
 @section-tab-color: @placeholder-color;
 @section-tab-active-color: @global-primary-background;
 @section-tab-active-background: @section-container-background;
 @section-tab-width: @width-small-width;
 
+&.semiFiltered {
+  &, & > * > .highcharts-series-group {
+    opacity: 0.5;
+  }
+}
+
 .number-preview {
   border: @global-border-width solid @global-border;
   background: transparent;

library-css/material.scss

@@ -40,16 +40,16 @@ $warn-color: (
         900: #BD640D,
         contrast: (50: #ffffff)
 );
-$my-app-primary: mat.define-palette($primary-color);
-$my-app-accent: mat.define-palette($secondary-color);
-$my-app-warn: mat.define-palette($warn-color);
-$my-app-theme: mat.define-light-theme((
+$my-app-primary: mat.m2-define-palette($primary-color);
+$my-app-accent: mat.m2-define-palette($secondary-color);
+$my-app-warn: mat.m2-define-palette($warn-color);
+$my-app-theme: mat.m2-define-light-theme((
         color: (
                 primary: $my-app-primary,
                 accent: $my-app-accent,
                 warn: $my-app-warn
         ),
-        typography: mat.define-typography-config(),
+        typography: mat.m2-define-typography-config(),
         density: 0,
 ));