feat(cdk-experimental/tree): use shared example classes (#31494)

Author: wagnermaciel

src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.css

@@ -24,19 +24,6 @@
   list-style: none;
 }
 
-.example-tree-item[aria-selected='true'] {
-  background-color: var(--mat-sys-inverse-primary);
-}
-
-.example-tree-item[aria-selected='false'] {
-  background-color: var(--mat-sys-background);
-}
-
-.example-tree-item[aria-disabled='true'] {
-  background-color: var(--mat-sys-surface-container);
-  color: var(--mat-sys-on-surface-variant);
-}
-
 .example-tree-item-content {
   display: flex;
   align-items: center;

src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts

@@ -25,14 +25,14 @@ interface ExampleNode {
   template: `
     <li
       cdkTreeItem
-      class="example-tree-item"
+      class="example-tree-item example-selectable"
       [value]="node().value"
       [label]="node().label || node().value"
       [disabled]="node().disabled"
       #treeItem="cdkTreeItem"
     >
       <span
-        class="example-tree-item-content"
+        class="example-tree-item-content example-stateful"
         [style.paddingLeft.px]="(treeItem.pattern.level() - 1) * 24"
       >
         <mat-icon class="example-tree-item-icon" aria-hidden="true">

src/dev-app/common-classes.css

@@ -3,6 +3,10 @@
   color: var(--mat-sys-on-surface);
 }
 
+.example-stateful {
+  background-color: color-mix(in srgb, var(--mat-sys-surface) 10%, transparent);
+}
+
 [aria-disabled='true'] .example-stateful,
 .example-stateful[aria-disabled='true'] {
   color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);