Color Swatch

fandhe-frontend-pre-styled-ui の color_swatch mod が提供するスタイル済み Color Swatch 部品です。

検証済みの Color 型から色見本を表示する部品です。検証済み型経由でのみ色値を受け取るため、任意の CSS カラー文字列を直接渡すことはできません。SwatchShape（Square/Circle/Rounded）で外形を切り替えられ、size（Xs〜Xl の 5 段、既定 Md）でサイズを切り替えられます。内側 1px の輪郭リングにより、淡色や半透明色でも外形が判別できます。

Demo

色見本の静的表示です。size / shape を組み合わせられます。半透明色は下地のチェッカーボード模様で透過が、内側 1px の輪郭リングで淡色でも外形が視認できます。

Size

Shape

Features

SwatchShape（Square/Circle/Rounded）で外形を切り替える（color_swatch.rs recipe 節）
検証済み Color 型のみを受け取り、--fd-swatch-color custom property 経由で色を出力する（color_swatch.rs モジュール冒頭「色値は検証済み型経由のみ」節）
呼び出し側の class/style/data-scope/data-part 偽装はすべて除去する（color_swatch.rs テスト caller_class_and_style_attrs_are_dropped_not_duplicated 等）
内側 1px の輪郭リング（box-shadow: inset）で淡色・低アルファ色でも外形が判別できる（イシュー #1558、color_swatch.rs モジュール冒頭「参照サイト比較」節）

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`value`	`Color`	`opaque black`	表示する色（検証済み型のみ受け取る、color_swatch.rs モジュール冒頭「色値は検証済み型経由のみ」節）。
`size`	`Size`	`Md`	サイズ（Xs〜Xl の 5 段、chakra-ui 同名段の実寸に整合。イシュー #1558）。
`shape`	`SwatchShape`	`Rounded`	外形（color_swatch.rs `SwatchShape` 節）。

Examples

Circle

円形の ColorSwatch の例です。

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	純粋な色見本表示であり固有の role/aria-* を出力しない（color_swatch.rs 全文で role/aria-* を grep しても 0 件）。