fix skeleton color

apps/app/src/components/ItemsTree/ItemsTreeContentSkeleton.module.scss

@@ -0,0 +1,14 @@
+@use '~/styles/mixins';
+
+@use './items-tree-variables';
+
+
+.text-skeleton-level1 {
+  @include mixins.grw-skeleton-text($font-size:16px, $line-height: items-tree-variables.$list-item-height);
+  padding-left: 12px;
+}
+
+.text-skeleton-level2 {
+  @extend .text-skeleton-level1;
+  padding-left: 12px + items-tree-variables.$list-item-padding-left * 2;
+}

apps/app/src/components/ItemsTree/ItemsTreeContentSkeleton.tsx

@@ -1,16 +1,14 @@
-import React from 'react';
-
 import { Skeleton } from '~/components/Skeleton';
 
-import styles from './ItemsTree.module.scss';
+import styles from './ItemsTreeContentSkeleton.module.scss';
 
 const ItemsTreeContentSkeleton = (): JSX.Element => {
 
   return (
-    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-3`}>
-      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text']} pe-3`} />
-      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text-child']} pe-3`} />
-      <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text-child']} pe-3`} />
+    <ul className="list-group py-3">
+      <Skeleton additionalClass={`${styles['text-skeleton-level1']} pe-3`} />
+      <Skeleton additionalClass={`${styles['text-skeleton-level2']} pe-3`} />
+      <Skeleton additionalClass={`${styles['text-skeleton-level2']} pe-3`} />
     </ul>
   );
 };

apps/app/src/components/Skeleton.module.scss

@@ -0,0 +1,4 @@
+.grw-skeleton {
+  --bs-list-group-color: rgba(var(--bs-tertiary-color-rgb), 0.2);
+  background-color: var(--bs-list-group-color);
+}

apps/app/src/components/Skeleton.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import styles from './Skeleton.module.scss';
+
+const moduleClass = styles['grw-skeleton'] ?? '';
+
 
 type SkeletonProps = {
   additionalClass?: string,
@@ -12,7 +15,7 @@ export const Skeleton = (props: SkeletonProps): JSX.Element => {
 
   return (
     <div className={`${additionalClass ?? ''}`}>
-      <div className={`grw-skeleton h-100 w-100 ${roundedPill ? 'rounded-pill' : ''}`}></div>
+      <div className={`grw-skeleton ${moduleClass} h-100 w-100 ${roundedPill ? 'rounded-pill' : ''}`}></div>
     </div>
   );
 };