[jp-sync] Sync JP badge docs: add/improve outline sections

docs/xplat/src/content/jp/components/inputs/badge.mdx

@@ -20,8 +20,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} Badge の例
 
-<Sample src="/inputs/badge/outlined" height={60} alt="{Platform} Badge の例" />
-
+<Sample src="/inputs/badge/overview" height={60} alt="{Platform} Badge の例" />
 
 <igc-divider></igc-divider>
 
@@ -121,98 +120,103 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));
 
 </PlatformBlock>
 
-バッジの周囲に微妙な境界線を表示するには、バッジの <ApiLink pkg="core" type="Badge" member="outlined" label="Outlined" /> 属性を設定できます。
+## 例
+
+### バリエーション
+
+{ProductName} バッジは、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値 `primary` (デフォルト)、`info`、`success`、`warning`、または `danger` のいずれかを <ApiLink pkg="core" type="Badge" member="variant" label="Variant" /> 属性に割り当てることにより、バリエーションを変更できます。
 
 <PlatformBlock for="React">
 
 ```tsx
-<IgrBadge outlined={true} ></IgrBadge>
+<IgrBadge variant="success" ></IgrBadge>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
 
 ```html
-<igc-badge outlined></igc-badge>
+<igc-badge variant="success"></igc-badge>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
 ```razor
-<IgbBadge Outlined="true" />
+<IgbBadge Variant="@StyleVariant.Success" />
 ```
 
 </PlatformBlock>
 
-## 例
+<Sample src="/inputs/badge/variants" height={60} alt="{Platform} Badge の例" />
 
-### バリエーション
+バッジにカスタム背景色が `--background-color` CSS 変数で設定されていても、バリアントの色が常に優先され、バッジに適用されます。
 
-{ProductName} バッジは、いくつかの事前定義されたスタイルのバリエーションをサポートします。サポートされている値 `primary` (デフォルト)、`info`、`success`、`warning`、または `danger` のいずれかを <ApiLink pkg="core" type="Badge" member="variant" label="Variant" /> 属性に割り当てることにより、バリエーションを変更できます。
+### 形状
+
+バッジ コンポーネントは、`rounded` (デフォルト) および `square` 形状をサポートします。これらの値は、<ApiLink pkg="core" type="Badge" member="shape" label="Shape" /> 属性に割り当てることができます。
 
 <PlatformBlock for="React">
 
 ```tsx
-<IgrBadge variant="success" ></IgrBadge>
+<IgrBadge shape="square" ></IgrBadge>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
 
 ```html
-<igc-badge variant="success"></igc-badge>
+<igc-badge shape="square"></igc-badge>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
 ```razor
-<IgbBadge Variant="@BadgeVariant.Success" />
+<IgbBadge Shape="@BadgeShape.Square" />
 ```
 
 </PlatformBlock>
 
-<Sample src="/inputs/badge/variants" height={60} alt="{Platform} Badge の例" />
-
-
+<Sample src="/inputs/badge/shape" height={60} alt="{Platform} Badge の例" />
 
+バッジの形状が `square` の場合、`--border-radius` CSS 変数を使用してカスタムのボーダー半径を設定することでさらにカスタマイズできます。
 
-### 形状
+### アウトライン
 
-バッジ コンポーネントは、`rounded` (デフォルト) 形状と `square` をサポートします。これらの値は、<ApiLink pkg="core" type="Badge" member="shape" label="Shape" /> 属性に割り当てることができます。
+バッジには、<ApiLink pkg="core" type="Badge" member="outlined" label="outlined" /> 属性を設定すると、周囲に控えめなボーダーを表示することもできます。
 
 <PlatformBlock for="React">
 
 ```tsx
-<IgrBadge shape="square" ></IgrBadge>
+<IgrBadge outlined={true} ></IgrBadge>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
 
 ```html
-<igc-badge shape="square"></igc-badge>
+<igc-badge outlined></igc-badge>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
 ```razor
-<IgbBadge Shape="@BadgeShape.Square" />
+<IgbBadge Outlined="true" />
 ```
 
 </PlatformBlock>
 
-<Sample src="/inputs/badge/shape" height={60} alt="{Platform} Badge の例" />
-
+<Sample src="/inputs/badge/outlined" height={60} alt="{Platform} Badge の例" />
 
+アウトライン バッジのボーダーの色は、`--border-color` CSS 変数を使用してカスタマイズすることもできます。
 
 ### Dot
 
@@ -252,8 +256,8 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));
 
 ```css
 igc-badge::part(base) {
-    --background-color: var(--ig-error-A100);
-    --border-radius: 2px;
+  --background-color: var(--ig-error-A100);
+  --border-radius: 2px;
 }
 ```