# CSS Variables

컴포넌트가 노출하는 component contract 변수(`--oc-{component}-*`)의 계약입니다. 어떤 변수를 consumer CSS에서 덮어도 되는지, 어떤 변수는 구현 세부라 건드리면 안 되는지를 컴포넌트별로 정리합니다.

foundation 토큰(`--oc-color-*`, `--oc-space-*`, `--oc-atomic-*` 등)은 [Token Reference](./tokens.md)를 참조하세요. 이 문서의 표는 계약이며, 변경·제거 규칙은 [Stability Policy](./stability.md)를 따릅니다.

## 분류

| 구분      | 의미                                                                                                       | 안정성                                             |
| --------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
| override  | 브랜드·레이아웃 커스터마이징을 위해 값을 지정할 수 있는 변수입니다.                                        | 제거·이름 변경·의미 변경은 major에서만 진행합니다. |
| 읽기 전용 | 컴포넌트가 계산하거나 측정해 노출하는 값입니다. `var()`로 읽어 쓰되 값을 지정하지 마세요.                  | 제거·이름 변경·의미 변경은 major에서만 진행합니다. |
| internal  | 파생값, JavaScript가 런타임에 쓰는 값, 컴포넌트 geometry를 유지하는 구현 세부입니다. 값을 지정하지 마세요. | 예고 없이 바뀌거나 사라질 수 있습니다.             |

분류 기준은 다음과 같습니다.

- **override**: 색, 간격(padding·gap), radius, 크기(width·height·content height)처럼 브랜드나 레이아웃에 맞춰 바꾸는 값. size·variant별로 기본값이 바뀌거나 문서·예시에서 override 대상으로 안내하는 변수가 여기에 속합니다.
- **internal**: 다른 변수에서 계산한 중간값, drag·측정처럼 JavaScript가 프레임 단위로 쓰는 값, 바꾸면 컴포넌트 내부 정렬이나 motion이 깨지는 값.
- 판단이 애매하면 internal로 둡니다. internal 변수를 override로 승격하는 것은 minor에서 할 수 있지만, override를 internal로 내리는 것은 breaking change이기 때문입니다.

`--_-` prefix로 시작하는 변수는 모두 internal입니다. 아래 [Internal 변수](#internal-변수) 목록은 `--oc-` prefix를 쓰지만 internal인 기존 변수입니다. 이 변수들은 하위 호환을 위해 이름을 유지하며, 새로 추가하는 internal 변수는 `--_-{component}-*` 이름을 씁니다.

표에 없는 `--oc-{component}-*` 이름은 계약이 아닙니다.

## 값을 지정하는 위치

컴포넌트 CSS는 `@layer oc-components` 안에 있으므로, layer 밖에 있는 consumer CSS가 specificity와 로드 순서에 상관없이 우선합니다. 자세한 내용은 [Selector Contract의 Cascade layer](./selector-contract.md#cascade-layer)를 참조하세요.

- 변수는 해당 컴포넌트의 루트(`className`이 붙는 요소)에 지정합니다. size·variant별 기본값을 루트에 다시 선언하는 변수가 많아서, 상위 요소에 지정한 값은 상속되기 전에 컴포넌트 기본값에 가려질 수 있습니다. 표에서 (`CellItem`에 지정)처럼 표시한 변수는 루트가 아니라 표시된 컴포넌트에 지정합니다.
- Alert, Menu, Modal, Tooltip처럼 Root와 Content로 나뉜 compound 컴포넌트는 DOM을 렌더링하는 Content 컴포넌트(`AlertContent`, `MenuContent`, `ModalContent`, `TooltipContent`)의 `className`에 지정합니다.
- 컴포넌트가 다른 컴포넌트를 slot에 품는 경우, 바깥 컴포넌트가 그 slot에서 안쪽 컴포넌트의 변수를 다시 지정할 수 있습니다. 예를 들어 `TextInput`은 `content` slot에서 Field control 변수를 지정합니다. 이때는 해당 slot selector에 값을 지정하세요.
- 상태별 값은 컴포넌트가 노출하는 상태 selector(`[data-oc-disabled='true']`, `[data-oc-invalid='true']` 등)와 함께 지정합니다.

```css
.brandButton {
  --oc-button-radius: var(--oc-atomic-radius-max);
  --oc-button-padding-x: var(--oc-space-item-padding-large);
}

[data-oc-component='text-input'][data-oc-invalid='true']
  [data-oc-part='content'] {
  --oc-field-control-stroke-color: var(--oc-color-theme-status-negative);
}
```

## Disabled 표현

disabled 상태는 컴포넌트 성격에 따라 두 가지 방식 중 하나로 표현합니다. 별도의 disabled 전용 토큰은 두지 않습니다.

| 방식                  | 대상                                                                                                             | 동작                                                                                                                                                                                             |
| --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 색 토큰 교체          | Button, TextButton, IconButton, BackgroundIconButton, Badge, Field 계열처럼 자기 콘텐츠의 색을 소유하는 컴포넌트 | disabled에서 배경·글자·선 색을 `--oc-color-theme-interaction-disable`, `--oc-color-theme-label-disable` 같은 disable 시맨틱 토큰으로 교체합니다. 이 색 토큰이 disabled 상태의 시맨틱 계약입니다. |
| 컨테이너 opacity fade | Cell, Accordion, Checkbox·Radio·Switch처럼 임의의 자식 콘텐츠를 담는 컴포넌트                                    | 자식 콘텐츠의 색을 일일이 바꿀 수 없으므로 컨테이너 전체를 흐리게 합니다. 흐림 정도는 컴포넌트 밀도에 맞춘 값이며 internal입니다.                                                                |

색 토큰 교체 방식의 컴포넌트에서 disabled 색을 바꾸려면 disabled 상태 selector와 함께 해당 override 변수를 지정하세요. 예를 들어 BackgroundIconButton은 `--oc-background-icon-button-disabled-background-color`를 제공합니다.

## 컴포넌트별 변수

### ActionArea

| 변수                                   | 구분     | 용도                                                            |
| -------------------------------------- | -------- | --------------------------------------------------------------- |
| `--oc-action-area-actions-gap`         | override | action 버튼 사이 간격                                           |
| `--oc-action-area-background-color`    | override | 배경 색. `ActionAreaLayout`에서는 Footer나 그 조상에 지정       |
| `--oc-action-area-container-max-width` | override | action 영역 최대 폭                                             |
| `--oc-action-area-gap`                 | override | 추가 콘텐츠와 action 묶음 사이 간격. 기본은 상하 padding과 같음 |
| `--oc-action-area-padding-block`       | override | 상하 padding                                                    |
| `--oc-action-area-padding-block-end`   | override | 하단 padding                                                    |
| `--oc-action-area-padding-block-start` | override | 상단 padding                                                    |
| `--oc-action-area-padding-inline`      | override | 좌우 padding                                                    |
| `--oc-action-area-layout-block-size`   | override | `ActionAreaLayout` 높이, `scroll="document"`에서는 최소 높이    |

### Alert

| 변수               | 구분     | 용도             |
| ------------------ | -------- | ---------------- |
| `--oc-alert-width` | override | Alert surface 폭 |

### Background

| 변수                     | 구분     | 용도                |
| ------------------------ | -------- | ------------------- |
| `--oc-background-radius` | override | 배경 surface radius |

### BackgroundIconButton

| 변수                                                    | 구분     | 용도                     |
| ------------------------------------------------------- | -------- | ------------------------ |
| `--oc-background-icon-button-background-color`          | override | 배경 색                  |
| `--oc-background-icon-button-color`                     | override | 아이콘 색                |
| `--oc-background-icon-button-disabled-background-color` | override | disabled fill 색         |
| `--oc-background-icon-button-radius`                    | override | 배경과 focus ring radius |

### Badge

| 변수                          | 구분     | 용도                     |
| ----------------------------- | -------- | ------------------------ |
| `--oc-badge-accent-color`     | override | accent variant의 기준 색 |
| `--oc-badge-background-color` | override | 배경 색                  |
| `--oc-badge-border-color`     | override | inset border 색          |
| `--oc-badge-border-width`     | override | inset border 두께        |
| `--oc-badge-color`            | override | 글자·아이콘 색           |
| `--oc-badge-padding-x`        | override | 좌우 padding             |
| `--oc-badge-padding-y`        | override | 상하 padding             |
| `--oc-badge-radius`           | override | radius                   |

### Button

| 변수                           | 구분     | 용도                          |
| ------------------------------ | -------- | ----------------------------- |
| `--oc-button-background-color` | override | 배경 색                       |
| `--oc-button-border-color`     | override | border 색                     |
| `--oc-button-color`            | override | 글자·아이콘·loading 스피너 색 |
| `--oc-button-content-height`   | override | content 줄 높이               |
| `--oc-button-gap`              | override | icon과 label 사이 간격        |
| `--oc-button-padding-x`        | override | 좌우 padding                  |
| `--oc-button-padding-y`        | override | 상하 padding                  |
| `--oc-button-radius`           | override | radius                        |

### Carousel

| 변수                   | 구분     | 용도                                       |
| ---------------------- | -------- | ------------------------------------------ |
| `--oc-carousel-radius` | override | root 모서리 radius (기본 `0`, 클리핑 포함) |

### Cell

| 변수                               | 구분     | 용도                                  |
| ---------------------------------- | -------- | ------------------------------------- |
| `--oc-cell-content-min-block-size` | override | content 최소 높이 (`CellItem`에 지정) |
| `--oc-cell-divider-color`          | override | item 사이 divider 색                  |
| `--oc-cell-gap`                    | override | slot 사이 간격                        |
| `--oc-cell-padding-inline`         | override | 좌우 padding                          |

### Checkbox

| 변수                             | 구분     | 용도                   |
| -------------------------------- | -------- | ---------------------- |
| `--oc-checkbox-background-color` | override | 선택 상태 배경 색      |
| `--oc-checkbox-color`            | override | 선택 상태 체크 표시 색 |

### Divider

| 변수                 | 구분     | 용도  |
| -------------------- | -------- | ----- |
| `--oc-divider-color` | override | 선 색 |

### Field

| 변수                                        | 구분     | 용도                                              |
| ------------------------------------------- | -------- | ------------------------------------------------- |
| `--oc-field-control-background-color`       | override | control 배경 색                                   |
| `--oc-field-control-content-padding-block`  | override | control 내부 상하 padding                         |
| `--oc-field-control-content-padding-inline` | override | control 내부 좌우 padding                         |
| `--oc-field-control-gap`                    | override | control 내부 slot 사이 간격                       |
| `--oc-field-control-stroke-color`           | override | control 외곽선 색                                 |
| `--oc-field-floating-reserve`               | override | floating label 예약 공간                          |
| `--oc-field-floating-scale`                 | override | floating label 축소 비율                          |
| `--oc-field-label-color`                    | override | label 색                                          |
| `--oc-field-label-inline-size`              | override | horizontal label 폭 (`labelWidth` prop과 같은 값) |
| `--oc-field-label-max-inline-size`          | override | horizontal label 최대 폭                          |

### InputGroup

| 변수                              | 구분     | 용도         |
| --------------------------------- | -------- | ------------ |
| `--oc-input-group-label-color`    | override | label 색     |
| `--oc-input-group-padding-inline` | override | 좌우 padding |
| `--oc-input-group-padding-top`    | override | 상단 padding |

### Interaction

| 변수                                | 구분      | 용도                        |
| ----------------------------------- | --------- | --------------------------- |
| `--oc-interaction-color`            | override  | 상태 레이어 색              |
| `--oc-interaction-opacity-factor`   | override  | 상태 레이어 강도 배율       |
| `--oc-interaction-radius`           | override  | 상태 레이어 radius          |
| `--oc-interaction-time`             | override  | 상태 레이어 transition 시간 |
| `--oc-interaction-touch-target-min` | override  | 확장 터치 영역 최소 크기    |
| `--oc-interaction-opacity-active`   | 읽기 전용 | active 상태 레이어 opacity  |
| `--oc-interaction-opacity-focus`    | 읽기 전용 | focus 상태 레이어 opacity   |
| `--oc-interaction-opacity-hover`    | 읽기 전용 | hover 상태 레이어 opacity   |

### Loading

| 변수                       | 구분     | 용도                                                           |
| -------------------------- | -------- | -------------------------------------------------------------- |
| `--oc-loading-color`       | override | 스피너 색                                                      |
| `--oc-loading-track-color` | override | 확정 진행(`value`)일 때 보이는 트랙 색. 기본은 스피너 색의 28% |

### Menu

| 변수                        | 구분     | 용도                                                                 |
| --------------------------- | -------- | -------------------------------------------------------------------- |
| `--oc-menu-content-padding` | override | popup padding과 separator 확장 폭. 셀 radius도 실제 여백에 맞춰 파생 |
| `--oc-menu-max-inline-size` | override | 메뉴 최대 너비 (기본 `24em`), 화면 가용 폭으로 추가 제한             |
| `--oc-menu-max-block-size`  | override | 메뉴 최대 높이 (기본 가용 높이), 화면 가용 높이로 추가 제한          |
| `--oc-menu-z-index`         | override | popup paint-order 단계                                               |

### Modal

| 변수                                       | 구분      | 용도                                                                     |
| ------------------------------------------ | --------- | ------------------------------------------------------------------------ |
| `--oc-modal-container-padding-block`       | override  | container 상하 padding                                                   |
| `--oc-modal-container-padding-block-start` | override  | container 상단 padding                                                   |
| `--oc-modal-container-padding-inline`      | override  | container 좌우 padding                                                   |
| `--oc-modal-fixed-block-size`              | override  | `resize="fixed"` 요청 높이                                               |
| `--oc-modal-fixed-max-block-size`          | override  | `resize="fixed"` 최대 높이                                               |
| `--oc-modal-footer-padding-block`          | override  | footer 상하 padding                                                      |
| `--oc-modal-footer-padding-inline`         | override  | footer 좌우 padding                                                      |
| `--oc-modal-header-edge-offset-inline`     | override  | header 양끝 버튼의 바깥 offset                                           |
| `--oc-modal-header-gap`                    | override  | leading·title·trailing 영역 사이 간격 (기본 `--oc-space-item-gap-small`) |
| `--oc-modal-header-padding-block`          | override  | header 상하 padding                                                      |
| `--oc-modal-header-padding-inline`         | override  | header 좌우 padding                                                      |
| `--oc-modal-large-padding-block`           | override  | `large` 상하 padding                                                     |
| `--oc-modal-large-padding-inline`          | override  | `large` 좌우 padding                                                     |
| `--oc-modal-large-width`                   | override  | `large` 폭                                                               |
| `--oc-modal-max-height`                    | override  | 최대 높이                                                                |
| `--oc-modal-medium-padding-block`          | override  | `medium` 상하 padding                                                    |
| `--oc-modal-medium-padding-inline`         | override  | `medium` 좌우 padding                                                    |
| `--oc-modal-medium-width`                  | override  | `medium` 폭                                                              |
| `--oc-modal-popup-fixed-max-block-size`    | override  | popup placement의 `resize="fixed"` 최대 높이                             |
| `--oc-modal-radius`                        | override  | surface radius                                                           |
| `--oc-modal-reject-distance`               | override  | 거부 피드백 motion 이동 거리                                             |
| `--oc-modal-sheet-block-start-clearance`   | override  | bottom sheet 상단 최소 여백                                              |
| `--oc-modal-small-padding-block`           | override  | `small` 상하 padding                                                     |
| `--oc-modal-small-padding-inline`          | override  | `small` 좌우 padding                                                     |
| `--oc-modal-small-width`                   | override  | `small` 폭                                                               |
| `--oc-modal-width`                         | override  | 폭 (size별 폭보다 우선)                                                  |
| `--oc-modal-footer-height`                 | 읽기 전용 | 측정된 footer 높이                                                       |
| `--oc-modal-header-height`                 | 읽기 전용 | 측정된 header 높이                                                       |

### PageIndicator

| 변수                               | 구분     | 용도                                                        |
| ---------------------------------- | -------- | ----------------------------------------------------------- |
| `--oc-page-indicator-active-color` | override | 활성 점 색                                                  |
| `--oc-page-indicator-color`        | override | 기준색. 비활성 점은 이 색의 16%, 작은 점의 `+`는 61%로 파생 |

### PositionSnap

| 변수                         | 구분     | 용도                        |
| ---------------------------- | -------- | --------------------------- |
| `--oc-position-snap-z-index` | override | positioner paint-order 단계 |

### ProgressIndicator

| 변수                                       | 구분     | 용도              |
| ------------------------------------------ | -------- | ----------------- |
| `--oc-progress-indicator-background-color` | override | track 색          |
| `--oc-progress-indicator-block-size`       | override | 선 두께           |
| `--oc-progress-indicator-color`            | override | 진행 indicator 색 |
| `--oc-progress-indicator-radius`           | override | radius            |

### Radio

| 변수                          | 구분     | 용도              |
| ----------------------------- | -------- | ----------------- |
| `--oc-radio-background-color` | override | 선택 상태 배경 색 |
| `--oc-radio-color`            | override | 선택 상태 dot 색  |

### ScrollArea

| 변수                                                     | 구분     | 용도                                                                                                          |
| -------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
| `--oc-scroll-area-edge-bleed`                            | override | `ScrollAreaEdge`가 chrome 너머 콘텐츠 쪽으로 번질 수 있는 최대 길이, 스크롤한 거리만큼만 적용                 |
| `--oc-scroll-area-edge-blur`                             | override | `progressive-blur` 가장자리의 최대 blur 반경                                                                  |
| `--oc-scroll-area-edge-blur-floor`                       | override | `progressive-blur`가 chrome 전체에 유지하는 최소 blur 반경, 기본 최대 반경의 1/16(1px), `hard`는 1/8(2px)     |
| `--oc-scroll-area-edge-color`                            | override | `ScrollAreaEdge`의 scrim·tint 색, 보통 스크롤 영역의 표면 색                                                  |
| `--oc-scroll-area-edge-fade-size`                        | override | chrome 안쪽 끝에서 tint가 미리 사라지기 시작하는 길이(바닥 blur는 chrome 전체 유지), 기본 `0px`               |
| `--oc-scroll-area-edge-inset-block-end`                  | override | 아래 가장자리를 덮는 chrome(footer 등) 높이                                                                   |
| `--oc-scroll-area-edge-inset-block-start`                | override | 위 가장자리를 덮는 chrome(header 등) 높이                                                                     |
| `--oc-scroll-area-edge-tint-opacity`                     | override | chrome을 덮는 `progressive-blur` tint의 진하기, 기본 `--oc-color-global-opacity-74` (`ScrollAreaEdge`에 지정) |
| `--oc-scroll-area-padding`                               | override | scrollbar track 여백                                                                                          |
| `--oc-scroll-area-radius`                                | override | `ScrollArea`가 채우는 둥근 표면의 모서리 반경, 스크롤바를 모서리 곡선에서 띄움, 기본 `0px`                    |
| `--oc-scroll-area-scrollbar-vertical-inset-inline-start` | override | 세로 커스텀 스크롤바의 inline 시작 위치, 기본 `auto`                                                          |
| `--oc-scroll-area-scrollbar-vertical-inset-inline-end`   | override | 세로 커스텀 스크롤바의 inline 끝 위치, 기본 `0px`                                                             |
| `--oc-scroll-area-size`                                  | override | scrollbar 두께                                                                                                |

세로 스크롤바의 inline 위치 변수는 scrollbar part가 아닌 `ScrollArea` host에 지정합니다. 커스텀 스크롤바에만 적용되며 네이티브 스크롤바의 위치는 바꾸지 않습니다. 일반 모드의 길이·백분율은 `ScrollArea` 상자를, `root` 모드에서는 기본적으로 viewport를 기준으로 합니다. `transform`, `filter`, `contain` 등으로 fixed containing block을 만드는 조상이 있으면 root 스크롤바도 그 조상 기준이 될 수 있습니다.

`inline-start`/`inline-end`는 문서 방향을 따릅니다. LTR의 `inline-end`는 오른쪽, RTL에서는 왼쪽입니다. 시작 쪽에 배치하려면 `inline-start`에 원하는 값을 지정하고 `inline-end`를 `auto`로 지정하세요. 이 변수는 스크롤바만 이동하며 콘텐츠 열 폭과 가로 스크롤바·edge의 배치는 바꾸지 않습니다.

예를 들어 root 본문과 fixed 카탈로그가 화면을 절반씩 나눠 쓰는 레이아웃에서 본문 스크롤바를 열 경계에 배치할 수 있습니다. `.main`은 `<ScrollArea as='main' root className={styles.main}>`에 지정합니다.

```scss
@use '@orioncactuscorp/ui/scss/mixins/breakpoint' as *;

.main {
  --oc-scroll-area-scrollbar-vertical-inset-inline-end: 0px;

  @include respond-to(min, md) {
    --oc-scroll-area-scrollbar-vertical-inset-inline-end: 50%;

    inline-size: 50%;
  }
}
```

`--oc-scroll-area-radius`는 `ScrollArea`가 둥근 표면을 꽉 채울 때 그 표면의 모서리 반경을 `ScrollArea` 자신에게 지정합니다. 스크롤바는 모서리 곡선이 끝나는 지점부터 시작해, 곡선과의 간격을 옆면 간격(`--oc-scroll-area-padding`)과 같게 유지합니다. header·footer chrome이 이미 모서리를 덮으면 chrome 위치를 그대로 씁니다. Menu와 Modal은 내부에서 지정하므로 별도 설정이 필요 없습니다.

- 단일 length만 받습니다. `20px 20px 0 0` 같은 여러 모서리 값이나 `%`는 `0px`으로 처리되어 보정하지 않습니다.
- 상속되지 않습니다. 둥근 카드 같은 조상에 지정하면 적용되지 않고, 중첩된 `ScrollArea`에도 전달되지 않습니다.
- 원형 모서리 기준입니다. 모서리 클리핑은 바꾸지 않으므로 표면을 가진 쪽이 계속 담당합니다.
- `@property`를 지원하지 않는 브라우저에서는 여러 모서리 값을 지정하면 스크롤바 위치가 무효가 될 수 있습니다.

```scss
.cardScroll {
  // <ScrollArea className={styles.cardScroll}>가 둥근 카드를 꽉 채우는 경우
  --oc-scroll-area-radius: var(--oc-atomic-radius-medium);
}
```

### SectionHeader

| 변수                        | 구분     | 용도    |
| --------------------------- | -------- | ------- |
| `--oc-section-header-color` | override | 글자 색 |

### SegmentedControl

| 변수                                          | 구분     | 용도                                                                                                        |
| --------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------- |
| `--oc-segmented-control-label-color`          | override | 미선택 label 색                                                                                             |
| `--oc-segmented-control-label-disabled-color` | override | disabled label 색                                                                                           |
| `--oc-segmented-control-label-selected-color` | override | 선택 label 색                                                                                               |
| `--oc-segmented-control-padding`              | override | track과 thumb 사이 여백 (기본 large `0.25rem`, medium·small `0.1875rem`, 전체 높이는 같은 size Button 유지) |
| `--oc-segmented-control-radius`               | override | track radius (thumb radius는 여백만큼 작게 파생)                                                            |
| `--oc-segmented-control-thumb-color`          | override | thumb 색                                                                                                    |
| `--oc-segmented-control-thumb-shadow`         | override | thumb 그림자                                                                                                |
| `--oc-segmented-control-track-color`          | override | track 색                                                                                                    |

### Skeleton

| 변수                        | 구분     | 용도                           |
| --------------------------- | -------- | ------------------------------ |
| `--oc-skeleton-block-size`  | override | 높이 (`height` prop과 같은 값) |
| `--oc-skeleton-color`       | override | 색 (`color` prop과 같은 값)    |
| `--oc-skeleton-inline-size` | override | 폭 (`width` prop과 같은 값)    |
| `--oc-skeleton-opacity`     | override | opacity                        |
| `--oc-skeleton-radius`      | override | radius                         |

### Slider

| 변수                             | 구분     | 용도                                |
| -------------------------------- | -------- | ----------------------------------- |
| `--oc-slider-indicator-color`    | override | 채움(선택 구간) 색                  |
| `--oc-slider-thumb-border-color` | override | thumb 바깥 라인 색 (1.5px, 바깥쪽)  |
| `--oc-slider-thumb-color`        | override | thumb 색 (기본은 두 테마 모두 흰색) |
| `--oc-slider-thumb-shadow`       | override | thumb 그림자                        |
| `--oc-slider-track-color`        | override | track 색                            |

disabled 상태의 track·채움 색과 thumb 그림자 제거는 override보다 우선합니다.

### Switch

| 변수                           | 구분     | 용도               |
| ------------------------------ | -------- | ------------------ |
| `--oc-switch-background-color` | override | 선택 상태 track 색 |
| `--oc-switch-color`            | override | thumb 색           |

### Tabs

| 변수                                      | 구분     | 용도                    |
| ----------------------------------------- | -------- | ----------------------- |
| `--oc-tabs-edge-fade-size`                | override | scroll 가장자리 fade 폭 |
| `--oc-tabs-indicator-block-size`          | override | indicator 두께          |
| `--oc-tabs-indicator-color`               | override | indicator 색            |
| `--oc-tabs-indicator-disabled-color`      | override | disabled indicator 색   |
| `--oc-tabs-indicator-radius`              | override | indicator radius        |
| `--oc-tabs-label-color`                   | override | label 색                |
| `--oc-tabs-label-disabled-color`          | override | disabled label 색       |
| `--oc-tabs-label-hover-color`             | override | hover label 색          |
| `--oc-tabs-label-selected-color`          | override | 선택 label 색           |
| `--oc-tabs-list-gap`                      | override | tab 사이 간격           |
| `--oc-tabs-list-padding-block`            | override | list 상하 padding       |
| `--oc-tabs-list-padding-inline`           | override | list 좌우 padding       |
| `--oc-tabs-tab-interaction-margin-inline` | override | tab hit area 좌우 확장  |
| `--oc-tabs-tab-padding-block`             | override | tab 상하 padding        |

### TextButton

| 변수                         | 구분     | 용도                   |
| ---------------------------- | -------- | ---------------------- |
| `--oc-text-button-color`     | override | 글자·아이콘 색         |
| `--oc-text-button-gap`       | override | icon과 label 사이 간격 |
| `--oc-text-button-padding-x` | override | 좌우 padding           |
| `--oc-text-button-padding-y` | override | 상하 padding           |

### Tooltip

| 변수                   | 구분     | 용도                   |
| ---------------------- | -------- | ---------------------- |
| `--oc-tooltip-z-index` | override | popup paint-order 단계 |

## Internal 변수

아래 변수는 `--oc-` prefix를 쓰지만 internal입니다. 값을 지정하지 마세요.

- **Accordion**: `--oc-accordion-chevron-rotation`, `--oc-accordion-current-divider-color`, `--oc-accordion-disclosure-indicator-padding-block`, `--oc-accordion-disclosure-indicator-size`, `--oc-accordion-summary-press-scale`
- **ActionArea**: `--oc-action-area-layout-action-area-padding-block`
- **Background**: `--oc-background-back-color`, `--oc-background-back-opacity`, `--oc-background-backdrop-filter`, `--oc-background-blur`, `--oc-background-front-color`, `--oc-background-front-opacity`
- **BackgroundIconButton**: `--oc-background-icon-button-blend-opacity`, `--oc-background-icon-button-size`, `--oc-background-icon-button-webkit-blend-opacity`, `--oc-background-icon-button-webkit-blend-opacity-add`
- **Badge**: `--oc-badge-accent-background-color`, `--oc-badge-accent-background-opacity`, `--oc-badge-background-opacity`
- **Button**: `--oc-button-control-size`, `--oc-button-icon-padding-block`, `--oc-button-icon-size`, `--oc-button-label-padding-x`
- **Cell**: `--oc-cell-current-divider-color`, `--oc-cell-disabled-opacity`, `--oc-cell-icon-size`, `--oc-cell-interaction-margin-inline`, `--oc-cell-interaction-radius`, `--oc-cell-padding`, `--oc-cell-press-scale`
- **Checkbox**: `--oc-checkbox-content-height`, `--oc-checkbox-control-size`
- **CheckMark**: `--oc-check-mark-content-height`, `--oc-check-mark-control-size`
- **Divider**: `--oc-divider-spacing`
- **Field**: `--oc-field-control-autofill-surface-color`, `--oc-field-control-autofill-tint-color`, `--oc-field-control-content-padding-block-start`, `--oc-field-control-outline-color`, `--oc-field-control-stroke-width`, `--oc-field-floating-content-height`, `--oc-field-floating-leading-offset`, `--oc-field-floating-leading-size`, `--oc-field-floating-rest-offset`, `--oc-field-floating-trailing-offset`, `--oc-field-floating-trailing-size`, `--oc-field-label-row-block-size`, `--oc-field-outside-padding-block-start`
- **FloatingWindow**: `--oc-floating-window-stack-offset`, `--oc-floating-window-x`, `--oc-floating-window-y`
- **InputGroup**: `--oc-input-group-label-reserve`, `--oc-input-group-label-scale`
- **Interaction**: `--oc-interaction-default-opacity-factor`, `--oc-interaction-inset-x`, `--oc-interaction-inset-y`, `--oc-interaction-scale`, `--oc-interaction-z-index`
- **Loading**: `--oc-loading-size`
- **Menu**: `--oc-menu-transform-origin`
- **Modal**: `--oc-disclosure-indicator-rotation`, `--oc-modal-backdrop-opacity`, `--oc-modal-backdrop-z-index`, `--oc-modal-container-padding-block-end`, `--oc-modal-navigation-block-size`, `--oc-modal-navigation-indicator-padding-block`, `--oc-modal-navigation-indicator-size`, `--oc-modal-navigation-panel-transition-max-block-size`, `--oc-modal-overshoot-fill-height`, `--oc-modal-peek-height`, `--oc-modal-resize-rest-translate-y`, `--oc-modal-resize-target-scrollport-height`, `--oc-modal-scale`, `--oc-modal-settled-translate-y`, `--oc-modal-sheet-height`, `--oc-modal-stack-offset`, `--oc-modal-translate-x`, `--oc-modal-translate-y`, `--oc-modal-viewport-z-index`, `--oc-modal-visible-sheet-height`
- **Radio**: `--oc-radio-content-height`, `--oc-radio-control-size`, `--oc-radio-icon-scale`
- **ScrollArea**: `--oc-scroll-area-scrollbar-horizontal-inset-block-end`, `--oc-scroll-area-scrollbar-horizontal-inset-block-start`, `--oc-scroll-area-scrollbar-horizontal-inset-inline-end`, `--oc-scroll-area-scrollbar-horizontal-inset-inline-start`, `--oc-scroll-area-scrollbar-vertical-inset-block-end`, `--oc-scroll-area-scrollbar-vertical-inset-block-start`, `--oc-scroll-area-thumb-height`, `--oc-scroll-area-thumb-width`
- **SectionHeader**: `--oc-section-header-heading-height`
- **Select**: `--oc-select-indicator-size`, `--oc-select-leading-content-size`, `--oc-select-leading-offset`, `--oc-select-trailing-content-size`, `--oc-select-trailing-offset`, `--oc-select-content-icon-size`
- **Switch**: `--oc-switch-content-height`, `--oc-switch-control-size`, `--oc-switch-interaction-z-index`, `--oc-switch-thumb-size`, `--oc-switch-thumb-translate`, `--oc-switch-thumb-translate-checked`, `--oc-switch-thumb-z-index`, `--oc-switch-track-color`, `--oc-switch-track-height`, `--oc-switch-track-width`, `--oc-switch-track-z-index`
- **Tabs**: `--oc-tabs-internal-edge-fade-end-size`, `--oc-tabs-internal-edge-fade-start-size`
- **TextArea**: `--oc-text-area-control-block-size`, `--oc-text-area-min-rows`, `--oc-text-area-supporting-content-offset`, `--oc-text-area-supporting-content-size`, `--oc-text-area-content-icon-size`
- **TextButton**: `--oc-text-button-icon-padding-block`, `--oc-text-button-icon-size`
- **TextInput**: `--oc-text-input-leading-content-size`, `--oc-text-input-leading-offset`, `--oc-text-input-trailing-content-size`, `--oc-text-input-trailing-offset`, `--oc-text-input-content-icon-size`
- **Tooltip**: `--oc-tooltip-transform-origin`