# Responsive Foundation Profile

`responsive.config`는 typography와 spacing foundation의 responsive 출력 방식을 정하는 SCSS compile-time profile이다. `typo`와 `space`는 같은 mode를 공유하며, 소비자는 token 값을 다시 작성하지 않고 공통 stop 또는 foundation별 stop range를 선택한다.

이 profile은 `@orioncactuscorp/ui/foundations.css` 또는 `@orioncactuscorp/ui/styles.css` 같은 prebuilt CSS에는 적용되지 않는다. profile을 바꾸려면 SCSS source foundation을 직접 import해서 consumer build에서 컴파일해야 한다.

## Config

```scss
@use '@orioncactuscorp/ui/scss/foundations/responsive.config' with (
  $oc-responsive-mode: fluid,
  $oc-responsive-stops: (
    min,
    sm,
    md,
    lg,
    xl,
    hg,
  ),
  $oc-responsive-typo-stops: null,
  $oc-responsive-space-stops: null,
  $oc-responsive-space-profile: null,
  $oc-responsive-static-stop: null
);
```

### `$oc-responsive-mode`

- `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `fluidClamp()`로 보간한다.
- `stepped`: `clamp()` 없이 stop 값이 breakpoint에서 계단식으로 바뀐다.
- `static`: 선택한 stop 하나를 전체 viewport에 고정한다.

### `$oc-responsive-stops`

활성화할 기본 design stop 목록이다.

- `fluid`: active range로 사용한다. range 밖은 가까운 active stop 값으로 고정된다.
- `stepped`: 첫 stop은 base 값으로 출력하고, 이후 stop은 `respond-to(min, stop)` 기준 media에서 출력한다.
- `static`: foundation별 stops가 없을 때 fallback active range로 사용한다.

`sm`, `md`는 design stop 이름이다. 단일 `respond-to(sm/md)` mixin은 max-width 편의 API지만, `stepped` profile의 stop 전환은 `respond-to(min, stop)` 기준이다. 예를 들어 `md` 값은 `min-width: 769px`부터 적용된다.

### `$oc-responsive-typo-stops`

`typo` size/height token에만 적용할 design stop 목록이다. `null`이면 `$oc-responsive-stops`를 사용한다.

### `$oc-responsive-space-stops`

`space` token에만 적용할 design stop 목록이다. `null`이면 `$oc-responsive-stops`를 사용한다.

### `$oc-responsive-space-profile`

`space` token의 stepped 출력 방식을 바꾸는 profile이다. `null`이면 `$oc-responsive-mode: stepped`에서 active stops를 순서대로 출력한다.

현재 지원하는 profile type:

- `stepped-points`: named point별 target stop을 출력한다. `points.base`는 base `:root` 값이고, `min-md` 같은 point는 `respond-to(min, md)` 기준 media로 출력한다.

`max-active-defined` target은 `$oc-responsive-space-stops` 안에서 해당 token에 실제 값이 있는 마지막 stop을 사용한다. `$oc-space-overrides`에서 stop 값을 `null`로 지정하면 그 stop은 정의되지 않은 것으로 취급한다.

### `$oc-responsive-static-stop`

`static` mode에서 전체 foundation에 공통으로 사용할 stop이다. 생략하면 각 foundation의 active stops 첫 번째 stop을 사용한다. foundation별 stops가 없으면 `$oc-responsive-stops`의 첫 번째 stop을 사용한다.

## Examples

### Default Fluid

별도 설정 없이 `typo`와 `space`를 import하면 기본 fluid profile이 적용된다.

```scss
@use '@orioncactuscorp/ui/scss/foundations/typo';
@use '@orioncactuscorp/ui/scss/foundations/space';
```

### Stepped, sm~md Only

`sm` 값을 base로 쓰고, `md` 값은 `769px`부터 적용한다. `lg` 이상 stop은 출력하지 않으므로 `md` 값이 이후 viewport에서도 유지된다.

```scss
@use '@orioncactuscorp/ui/scss/foundations/responsive.config' with (
  $oc-responsive-mode: stepped,
  $oc-responsive-stops: (
    sm,
    md,
  )
);

@use '@orioncactuscorp/ui/scss/foundations/typo';
@use '@orioncactuscorp/ui/scss/foundations/space';
```

출력 형태:

```css
:root {
  --oc-typo-size-body1: 1rem;
}

@media screen and (min-width: 769px) {
  :root {
    --oc-typo-size-body1: 1.0625rem;
  }
}
```

### Separate Typo and Space Stops

mode는 `typo`와 `space`가 공유하되 active stop range만 다르게 지정할 수 있다. 아래 예시는 `typo`를 `sm` 값에 고정하고, `space`는 `sm` 값을 base로 쓰다가 `md` 이상에서 `md` 값으로 전환한다.

```scss
@use '@orioncactuscorp/ui/scss/foundations/responsive.config' with (
  $oc-responsive-mode: stepped,
  $oc-responsive-typo-stops: (
    sm,
  ),
  $oc-responsive-space-stops: (
    sm,
    md,
  )
);

@use '@orioncactuscorp/ui/scss/foundations/typo';
@use '@orioncactuscorp/ui/scss/foundations/space';
```

`$oc-responsive-typo-stops` 또는 `$oc-responsive-space-stops`를 생략하면 기존처럼 `$oc-responsive-stops`를 fallback으로 사용한다. `static` mode에서 `$oc-responsive-static-stop`을 생략한 경우에도 각 foundation의 첫 active stop을 고정값으로 사용한다.

### Two-Mode Figma Viewport

Figma `Viewport` collection이 `Mobile(md)`와 `Desktop(min, md)`처럼 두 mode만 갖고, `Desktop(min, md)`가 token별 desktop target 값을 가리킬 때는 `space`에 `stepped-points` profile을 사용한다.

```scss
@use '@orioncactuscorp/ui/scss/foundations/responsive.config' with (
  $oc-responsive-mode: stepped,
  $oc-responsive-typo-stops: (
    sm,
  ),
  $oc-responsive-space-stops: (
    md,
    lg,
    xl,
  ),
  $oc-responsive-space-profile: (
    type: stepped-points,
    points: (
      base: md,
      min-md: max-active-defined,
    ),
  )
);

@use '@orioncactuscorp/ui/scss/foundations/space' with (
  $oc-space-overrides: (
    section-padding-viewport-x: (
      md: 20,
      xl: 32,
    ),
    section-padding-viewport-y: (
      md: 16,
      xl: 24,
    ),
    item-gap-small: (
      xl: null,
    ),
  )
);
```

이 profile은 `space`의 base 값을 각 token의 `md`로 출력하고, `769px+`부터 `$oc-responsive-space-stops` 안의 마지막 정의값으로 전환한다. 예를 들어 `item-padding-xsmall`은 `md -> xl`, `item-gap-tiny`는 `md -> lg`, `item-gap-small`은 `xl: null` 때문에 `md -> lg`로 출력된다.

### Static md

전체 viewport에서 `md` 값을 사용한다. 한 stop만 쓸 때 `fluid`나 `stepped`도 결과적으로 static처럼 출력되지만, 고정 의도를 드러내려면 `static` mode를 권장한다.

```scss
@use '@orioncactuscorp/ui/scss/foundations/responsive.config' with (
  $oc-responsive-mode: static,
  $oc-responsive-static-stop: md
);

@use '@orioncactuscorp/ui/scss/foundations/typo';
@use '@orioncactuscorp/ui/scss/foundations/space';
```

출력 형태:

```css
:root {
  --oc-typo-size-body1: 1.0625rem;
  --oc-space-section-padding-viewport-x: 2rem;
}
```

## Full Foundation Rebuild

`foundations.css`를 profile 적용 버전으로 대체하려면 consumer entry에서 foundation SCSS를 직접 import한다.

```scss
@use '@orioncactuscorp/ui/scss/foundations/responsive.config' with (
  $oc-responsive-mode: static,
  $oc-responsive-static-stop: md
);
@use '@orioncactuscorp/ui/scss/foundations/color.global' as *;
@use '@orioncactuscorp/ui/scss/foundations/color.theme.light' as *;
@use '@orioncactuscorp/ui/scss/foundations/color.theme.dark' as *;
@use '@orioncactuscorp/ui/scss/foundations/breakpoint' as *;
@use '@orioncactuscorp/ui/scss/foundations/typo' as *;
@use '@orioncactuscorp/ui/scss/foundations/space' as *;
@use '@orioncactuscorp/ui/scss/foundations/atomic' as *;
@use '@orioncactuscorp/ui/scss/foundations/focus' as *;
@use '@orioncactuscorp/ui/scss/foundations/motion' as *;
@use '@orioncactuscorp/ui/scss/foundations/zindex' as *;
```

이 consumer SCSS를 `@orioncactuscorp/ui/foundations.css` 대신 import한다.

`reset.css`는 package prebuilt CSS를 그대로 import해도 된다.

```tsx
import '@orioncactuscorp/ui/reset.css';
import './foundations.scss';
```

## Scope

- responsive profile은 현재 `typo` size/height와 `space` token을 제어한다.
- Typography letter spacing과 weight는 고정 token map을 유지한다.
- `atomic` radius token은 `responsive.config` 대상이 아니며 기존 foundation 동작을 유지한다.
- CSS variable runtime override와 SCSS compile-time profile은 서로 다른 customization 경로다.