# Field Soft

`field-soft` 是 daisyUI 5 表單欄位的選用 modifier，柔化一般框線與 focus outline，同時保留 daisyUI 的尺寸、語意色彩、Ghost 與 disabled 行為。

## 基本使用

```html
<input type="text" class="input field-soft" placeholder="姓名">

<select class="select field-soft">
   <option>台北</option>
   <option>台中</option>
</select>

<input type="file" class="file-input field-soft">

<textarea class="textarea field-soft" placeholder="備註"></textarea>
```

一般狀態的 border 使用 `--input-color` 35%，focus 時的 outline 使用 `--input-color` 12%。元件原本的 border width、outline width 與 outline offset 不變。

## 語意色彩

`field-soft` 直接讀取 daisyUI 元件的 `--input-color`，因此可與所有欄位語意色彩搭配，並自動跟隨 Theme：

```html
<input class="input input-primary field-soft">
<select class="select select-success field-soft"></select>
<input type="file" class="file-input file-input-warning field-soft">
<textarea class="textarea textarea-error field-soft"></textarea>
```

## Ghost 組合

Ghost 與 `field-soft` 可以同時使用：

```html
<input class="input input-ghost field-soft" placeholder="次要欄位">
```

- 未聚焦：維持 Ghost 的透明背景與透明 border。
- focus／focus-within：恢復 `field-soft` 的 35% border 與 12% outline。
- `select` 展開時：`field-soft` 同樣套用於 `:open` 狀態。

這讓同一份表單可以全面套用 `field-soft`，再以 Ghost 降低特定欄位的一般視覺重要度，而不會在 focus 時出現更深的原生 outline。

## Disabled

disabled 欄位不套用柔和框線，完整保留 daisyUI 的 disabled border、背景與文字對比：

```html
<input class="input field-soft" value="不可修改" disabled>
```

## CSS 變數

| 變數 | 預設值 | 用途 |
| --- | --- | --- |
| `--uic-field-soft-border-opacity` | `35%` | 一般與 focus border 相對於 `--input-color` 的比例 |
| `--uic-field-soft-outline-opacity` | `12%` | focus outline 相對於 `--input-color` 的比例 |
| `--uic-field-soft-border-color` | 自動計算 | 最終 border 顏色，可直接覆寫 |
| `--uic-field-soft-outline-color` | 自動計算 | 最終 outline 顏色，可直接覆寫 |

```html
<input
   class="input field-soft"
   style="--uic-field-soft-border-opacity: 25%; --uic-field-soft-outline-opacity: 8%;"
>
```

也可以在 Theme 或表單容器設定變數，讓其中所有 `field-soft` 欄位共用相同比例。

`field-soft` 只作用於 `.input`、`.select`、`.file-input` 與 `.textarea`，不會改變其它 daisyUI 元件。