docs(grid): sync JP grids_templates styling sections to match updated EN samples

Author: Copilot

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 {

docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx

@@ -496,114 +496,49 @@ Excel スタイル フィルタリング コンポーネントを設定するに
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Excel スタイル フィルタリング ダイアログは、`filtering-row-background` パラメーターを使用して、グリッドのテーマから背景色を取得します。さらに、このダイアログ内の要素のテキスト色をカスタマイズするための専用の Excel スタイル フィルタリング パラメーターも用意されています。ダイアログ全体のスタイルを変更するには、カスタム テーマを作成する必要があります。
+Excel スタイル フィルタリング ダイアログのスタイルを設定する方法はいくつかあります。<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を使用してスタイルを設定できます。Excel スタイル フィルタリング ダイアログは、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> で定義された `$background`、`$foreground`、および `$accent-color` 値を継承します。また、ダイアログのテキスト色をカスタマイズするための専用パラメーターも提供しています。
 
-```scss
-$custom-grid: grid-theme(
-  $filtering-row-background: #ffcd0f,
-  $excel-filtering-header-foreground: #292826,
-  $excel-filtering-subheader-foreground: #292826,
-  $excel-filtering-actions-foreground: #006400,
-  $excel-filtering-actions-hover-foreground: #ffcd0f,
-  $excel-filtering-actions-disabled-foreground: #9e9e9e
-);
-```
+または、専用の <ApiLink kind="sass" module="themes" type="function-excel-filtering-theme" label="excel-filtering-theme" code={true} /> を使用すると、Excel スタイル フィルタリング ダイアログのみを完全にスタイル設定できます。
 
-ボタン、チェックボックス、リスト、さらにはドロップダウンなど、フィルタリング ダイアログのような Excel 内には明らかに多くのコンポーネントがあります。スタイルを設定するには、それぞれに個別のテーマを作成する必要があります。
+最も簡単な方法は、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> を使用することです。
 
 ```scss
-$custom-button: contained-button-theme(
-  $background: #ffcd0f,
-  $foreground: #292826,
-  $hover-background: #292826,
-  $hover-foreground: #ffcd0f
-);
-
-$flat-custom-button: flat-button-theme(
-  $foreground: #ffcd0f,
-);
-
-$custom-checkbox: checkbox-theme(
-  $empty-color: #292826,
-  $fill-color: #292826,
-  $tick-color: #ffcd0f,
-  $label-color: #292826
-);
-
-$custom-drop-down: drop-down-theme(
-  $background-color: #ffcd0f,
-  $item-text-color: #292826,
-  $hover-item-background: #292826,
-  $hover-item-text-color: #ffcd0f
-);
-
-$custom-input-group: input-group-theme(
-  $box-background: #ffcd0f,
-  $idle-text-color: #292826,
-  $focused-text-color: #292826,
-  $filled-text-color: #292826
-);
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
 
-$custom-list: list-theme(
-  $background: #ffcd0f
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
 );
-
 ```
 
-<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>
-
-この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、<ApiLink kind="sass" module="themes" type="function-button-theme" label="button-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-checkbox-theme" label="checkbox-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-list-theme" label="list-theme" code={true} /> テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。
+Excel スタイル フィルタリング ダイアログの背景色と前景色はグリッド テーマから継承されます。さらに、ボタンやチェックボックスなどのすべてのネストされたコンポーネントは、グリッド テーマからアクセント カラーを継承します。
 
-最後にコンポーネントのカスタム テーマを**含めます**。また、入力のプレース ホルダーの色プロパティを設定します。
+その後、新しく作成されたグリッド テーマを含める準備が整います。Excel スタイル フィルタリング ダイアログに固有の追加のスタイル変更を加えたい場合は、直接ターゲットにすることができます。
 
 ```scss
 :host {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-
-    .igx-excel-filter, 
-    .igx-excel-filter__secondary {
-        @include tokens($custom-button);
-        @include tokens($custom-checkbox);
-        @include tokens($custom-input-group);
-        @include tokens($custom-list);
-
-        .igx-input-group__input::placeholder {
-            color: #ffcd0f;
-        }
+
+    igx-grid-excel-style-filtering {
+        --ig-excel-filtering-background: #444;
     }
 }
 ```
 
-<DocsAside type="info" title="情報">
-`.igx-excel-filter` と `.igx-excel-filter__secondary` 内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイル フィルタリング ダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。
-</DocsAside>
-
 <DocsAside type="info" title="情報">
 コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
-:host {
-  ::ng-deep {
+:host ::ng-deep {
     @include tokens($custom-grid);
-    @include tokens($custom-drop-down);
-
-    .igx-excel-filter,
-    .igx-excel-filter__secondary {
-      @include tokens($custom-button);
-      @include tokens($flat-custom-button);
-      @include tokens($custom-checkbox);
-      @include tokens($custom-input-group);
-      @include tokens($custom-list);
-      
-      .igx-input-group__input::placeholder {
-        color: #ffcd0f;
-      }
+
+    igx-grid-excel-style-filtering {
+        --ig-excel-filtering-background: #444;
     }
-  }
 }
 ```
 
@@ -636,6 +571,7 @@ $custom-list: list-theme(
 - <ApiLink type="Column" />
 - <ApiLink type="{ComponentApiType}" />
 - <ApiLink kind="sass" module="themes" type="function-grid-theme" label="{ComponentName}Component スタイル" />
+- <ApiLink kind="sass" module="themes" type="function-excel-filtering-theme" label="Excel Filtering Theme"/>
 
 ## その他のリソース
 

docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx

@@ -284,6 +284,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 最も単純なアプローチに従って、<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} />  を拡張する新しいテーマを作成し、`$header-background`、`$header-text-color`、`$header-border-width`、`$header-border-style` および `$header-border-color` パラメーターを受け取ります。
 
+<ComponentBlock for="Grid">
+
 ```scss
 $custom-theme: grid-theme(
   $header-background: #e0f3ff,
@@ -294,6 +296,34 @@ $custom-theme: grid-theme(
 );
 ```
 
+</ComponentBlock>
+<ComponentBlock for="TreeGrid">
+
+```scss
+$custom-theme: grid-theme(
+  $header-background: #f1eaf6,
+  $header-text-color: #8c1bdd,
+  $header-border-width: 1px,
+  $header-border-style: solid,
+  $header-border-color: #d3b9e6,
+  $cell-active-border-color: #7409c1
+);
+```
+
+</ComponentBlock>
+<ComponentBlock for="HierarchicalGrid">
+
+```scss
+$custom-theme: grid-theme(
+  $header-background: #f8f8ed,
+  $header-text-color: #7a6551,
+  $header-border-style: dashed,
+  $header-border-color: rgba(0, 0, 0, 0.08)
+);
+```
+
+</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>