[jp-sync] docs(grid): sync JP styling sections to match updated EN samples

docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx

@@ -343,17 +343,14 @@ igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ラ
  </DocsAside>
 
 ```scss
-$custom-theme: grid-theme(
-  $cell-active-border-color: #ffcd0f,
-  $cell-selected-background: #6f6f6f,
-  $row-hover-background: #f8e495,
-  $row-selected-background: #8d8d8d,
-  $header-background: #494949,
-  $header-text-color: #fff,
-  $expand-icon-color: #ffcd0f,
-  $expand-icon-hover-color: #e0b710,
-  $resize-line-color: #ffcd0f,
-  $row-highlight: #ffcd0f
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
 );
 ```
 
@@ -367,7 +364,7 @@ $custom-theme: grid-theme(
 
 ```scss
 :host {
-  @include tokens($custom-theme);
+  @include tokens($custom-grid);
 }
 ```
 

docs/angular/src/content/jp/components/treegrid/tree-grid.mdx

@@ -303,17 +303,14 @@ Tree Grid は、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass
 </DocsAside>
 
 ```scss
-$custom-theme: grid-theme(
-  $cell-active-border-color: #ffcd0f,
-  $cell-selected-background: #6f6f6f,
-  $row-hover-background: #f8e495,
-  $row-selected-background: #8d8d8d,
-  $header-background: #494949,
-  $header-text-color: #fff,
-  $expand-icon-color: #ffcd0f,
-  $expand-icon-hover-color: #e0b710,
-  $resize-line-color: #ffcd0f,
-  $row-highlight: #ffcd0f
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
 );
 ```
 
@@ -325,7 +322,7 @@ $custom-theme: grid-theme(
 
 ```scss
 :host {
-  @include tokens($custom-theme);
+  @include tokens($custom-grid);
 }
 ```
 

docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx

@@ -245,11 +245,13 @@ ngAfterViewInit(): void {
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-高度なフィルタリング ダイアログは <ApiLink type="QueryBuilder" /> コンポーネントを使用するため、<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を使用してスタイルを設定できます。ヘッダー タイトルのスタイルを設定するには、<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を拡張するカスタム テーマを作成し、`$header-foreground` パラメーターを設定します。
+高度なフィルタリング ダイアログは <ApiLink type="QueryBuilder" /> コンポーネントを使用するため、<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を使用してスタイルを設定できます。<ApiLink kind="sass" module="themes" type="query-builder-theme" label="query-builder-theme" code={true} /> を拡張するカスタム テーマを作成し、`$background`、`$foreground`、`$accent-color` パラメーターを設定します。
 
 ```scss
 $custom-query-builder: query-builder-theme(
-  $header-foreground: #512da8
+  $background: #1f2836,
+  $foreground: #f5f6e6,
+  $accent-color: #f5f6e6
 );
 ```
 
@@ -260,15 +262,6 @@ $custom-query-builder: query-builder-theme(
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
 
 ```scss
-$custom-query-builder: query-builder-theme(
-  $header-foreground: #512da8,
-  $color-expression-group-and:  #eb0000,
-  $color-expression-group-or: #0000f3,
-  $subquery-header-background: var(--ig-gray-300),
-  $subquery-border-color: var(--ig-warn-500),
-  $subquery-border-radius: rem(4px)
-);
-
 igx-advanced-filtering-dialog {
   @include tokens($custom-query-builder);
 }
@@ -283,15 +276,6 @@ igx-advanced-filtering-dialog {
 </DocsAside>
 
 ```scss
-$custom-query-builder: query-builder-theme(
-  $header-foreground: #512da8,
-  $color-expression-group-and:  #eb0000,
-  $color-expression-group-or: #0000f3,
-  $subquery-header-background: var(--ig-gray-300),
-  $subquery-border-color: var(--ig-warn-500),
-  $subquery-border-radius: rem(4px)
-);
-
 :host {
   ::ng-deep {
     igx-advanced-filtering-dialog {

docs/angular/src/content/jp/grids_templates/cell-editing.mdx

@@ -574,22 +574,50 @@ $color-palette: palette(
 これで、パレットを使用してテーマを定義できます。セルは <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> によってスタイル設定されているため、それを使用して {ComponentName} のテーマを生成できます。
 
 ```scss
-$custom-grid-theme: grid-theme(
+$grid-theme: grid-theme(
   $cell-editing-background: $blue,
+  $cell-editing-foreground: $white,
+  $cell-active-border-color: $blue,
   $cell-edited-value-color: $white,
-  $cell-active-border-color: $white,
-  $edit-mode-color: color($color-palette, "secondary", 200)
+  $edit-mode-color: color($color: "secondary", $variant: 200)
 );
 ```
 
 ### テーマを適用
 
-テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
+最後の手順は、カスタム パレットとグリッド テーマを**含める**ことです。
+
+<ComponentBlock for="Grid">
+
+```scss
+igx-grid {
+  @include palette($color-palette);
+  @include tokens($grid-theme);
+}
+```
+
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
 
 ```scss
-@include grid($custom-grid-theme);
+igx-tree-grid {
+  @include palette($color-palette);
+  @include tokens($grid-theme);
+}
 ```
 
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+igx-hierarchical-grid {
+  @include palette($color-palette);
+  @include tokens($grid-theme);
+}
+```
+
+</ComponentBlock>
+
 ### デモ
 
 上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます ([`input-group`](/input-group.md#スタイル設定)、[`datepicker`](/date-picker.md#スタイル設定) および [`checkbox`](/checkbox.md#スタイル設定))。

docs/angular/src/content/jp/grids_templates/column-resizing.mdx

@@ -313,12 +313,34 @@ column.autosize();
 
 最も簡単な方法は、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を拡張し、`$resize-line-color` パラメーター以外にも多くのパラメータを受け入れます。
 
+<ComponentBlock for="Grid">
+
 ``` scss
 $custom-grid-theme: grid-theme(
   $resize-line-color: #0288d1
 );
 ```
 
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
+
+``` scss
+$custom-grid-theme: grid-theme(
+  $resize-line-color: #dc38e8
+);
+```
+
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+``` scss
+$custom-grid-theme: grid-theme(
+  $resize-line-color: #07ea07
+);
+```
+
+</ComponentBlock>
+
 <DocsAside type="info" title="情報">
 上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
 </DocsAside>

docs/angular/src/content/jp/grids_templates/column-selection.mdx

@@ -120,27 +120,39 @@ API 操作の詳細については、[`API リファレンス`](#api-references)
 <ComponentBlock for="TreeGrid">
 
 ```scss
-$custom-grid-theme: grid-theme(
-  $row-selected-background: #011627,
-  $row-selected-text-color: #ecaa53,
-  $row-selected-hover-background: #011627,
-  $header-selected-text-color: #ecaa53,
-  $header-selected-background: #011627,
-  $expand-icon-color: #ecaa53,
-  $expand-icon-hover-color: #b64b80
+$background: #0b0119;
+$foreground: #eeece1;
+$accent: #f6b560;
+
+$grid-theme: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
+
+  $row-selected-background: #012724,
+  $row-selected-text-color: $accent,
+  $header-selected-text-color: $accent,
+  $header-selected-background: #012427,
+
+  $row-selected-hover-background: hsl(from #012427 h s 10%),
+  $row-selected-hover-text-color: $accent,
 );
 ```
 
 </ComponentBlock>
 <ComponentBlock for="Grid, HierarchicalGrid, PivotGrid">
 
 ```scss
+$background: #011627;
+$accent: #ecaa53;
+
 $custom-grid-theme: grid-theme(
-  $row-selected-background: #011627,
-  $row-selected-text-color: #ecaa53,
-  $row-selected-hover-background: #011627,
-  $header-selected-text-color: #ecaa53,
-  $header-selected-background: #011627
+  $row-selected-background: $background,
+  $row-selected-text-color: $accent,
+  $row-selected-hover-background: hsl(from $background h s 10%),
+  $row-selected-hover-text-color: $accent,
+  $header-selected-text-color: $accent,
+  $header-selected-background: $background,
 );
 ```
 
@@ -152,12 +164,13 @@ $custom-grid-theme: grid-theme(
 - **$row-selected-background**- 選択した部分の背景を設定します。
 - **$row-selected-text-color** - 選択した部分のテキスト色を設定します。
 - **$row-selected-hover-background** - ホバーされたセルまたは複数のセルの色を設定します。
+- **$row-selected-hover-text-color** - ホバーされたセルまたは複数のセルのテキスト色を設定します。
 - **$header-selected-text-color** - 選択した列ヘッダーのテキスト色を設定します。
 - **$header-selected-background** - 選択した列ヘッダーの背景色を設定します。
 
 ### CSS 変数の使用
 
-最後にカスタム `igx-grid` テーマを含めます。
+最後にカスタム グリッド テーマを**含めます**。
 
 ```scss
 :host {