Commit @4494a7386fac9424618ccbe27b4dab8f76dad322

임동욱 08-13

refactor: 입력 계열 공용 조각을 form-field 믹스인으로 추출

FoxInput·TextArea·PhoneNumber·Certified·Email·Address·FileUpload가 라벨·
헬퍼·입력 상자·상태 규칙을 같은 값으로 되풀이하고 있었다. 시안에서 이들이 모두
같은 공용 컴포넌트라 값이 갈라질 이유가 없다.

- @fox/styles/_form-field.scss 추가 — root·label·message·message-icon·
  box·box-size·field·auto-states·fixed-states
- 믹스인만 있어 @use 해도 CSS가 늘지 않는다(파티셜 단독·묶음 모두 확인)
- 컴포넌트마다 다른 것만 인자로: 상자 gap·교차정렬, 알맹이 글자 크기·줄높이,
  알맹이 element 이름(field/segment), 오류 판정 범위
- PhoneNumber unit은 조각이 다른 컴포넌트라 헬퍼 오류를 넓게 본다 —
  $invalid-within으로 그대로 유지

값은 하나도 바꾸지 않았다. 컴파일 결과를 규칙 단위로 대조해 304개 규칙의
선택자·선언·순서가 모두 동일함을 확인했다(선언 순서만 5개 규칙에서 다르며
서로 다른 속성이라 렌더링 동일).

Co-Authored-By: Claude Opus 5

@4494a7386fac9424618ccbe27b4dab8f76dad322

4494a73

@fox/styles/_form-field.scss (added)

+++ @fox/styles/_form-field.scss

...	...	@@ -0,0 +1,232 @@
	1	+// 입력 계열 공용 조각.
	2	+//
	3	+// 시안에서 form-label · helper-message · 입력 상자가 모두 같은 공용 컴포넌트라
	4	+// FoxInput · FoxTextArea · FoxPhoneNumber · FoxCertified · FoxEmail · FoxAddress ·
	5	+// FoxFileUpload가 같은 선언을 되풀이했다. 그 되풀이를 여기로 모은다.
	6	+//
	7	+// 믹스인만 있고 규칙이 없어 @use 해도 CSS가 늘지 않는다 — 부르는 자리에서만 나온다.
	8	+// 그래서 파티셜을 따로 쓰든 묶음(components.scss)으로 쓰든 출력은 그대로다.
	9	+
	10	+@use "abstracts" as fox;
	11	+
	12	+/// 비활성·읽기전용 상자. 두 상태의 모양이 같아 한곳에 둔다.
	13	+@mixin _disabled-box {
	14	+ border-width: fox.border(1);
	15	+ border-color: fox.color(input-border-disabled);
	16	+ background: fox.color(input-surface-disabled);
	17	+}
	18	+
	19	+/// 필드 한 벌의 바깥 틀. 라벨·상자·헬퍼가 세로로 쌓인다.
	20	+@mixin root($gap: 3) {
	21	+ display: flex;
	22	+ flex-direction: column;
	23	+ gap: fox.gap($gap);
	24	+ inline-size: 100%;
	25	+}
	26	+
	27	+/// 시안 form-label. 입력 크기와 무관하게 항상 label/md다(공용 컴포넌트라 크기를 따라가지
	28	+/// 않는다).
	29	+@mixin label {
	30	+ color: fox.color(font-neutral-default);
	31	+ font-family: fox.font-family(body);
	32	+ font-size: fox.font-size(label-md);
	33	+ font-weight: fox.font-weight(medium);
	34	+ line-height: 1;
	35	+ letter-spacing: -0.025em;
	36	+}
	37	+
	38	+/// 시안 helper-message. 오류·포커스 색은 상태 규칙이 덮는다.
	39	+@mixin message {
	40	+ display: flex;
	41	+ gap: fox.number(3);
	42	+ align-items: flex-start;
	43	+ margin: 0;
	44	+ color: fox.color(font-neutral-subtle);
	45	+ font-family: fox.font-family(body);
	46	+ font-size: fox.font-size(body-sm);
	47	+ font-weight: fox.font-weight(regular);
	48	+ line-height: 1.5;
	49	+ letter-spacing: -0.025em;
	50	+}
	51	+
	52	+/// helper-message 왼쪽 아이콘. 글줄 첫 줄에 맞춰 살짝 내린다.
	53	+@mixin message-icon {
	54	+ display: inline-flex;
	55	+ flex-shrink: 0;
	56	+ align-items: flex-start;
	57	+ padding-block-start: fox.padding(1);
	58	+
	59	+ > * {
	60	+ inline-size: fox.icon(3);
	61	+ block-size: fox.icon(3);
	62	+ }
	63	+}
	64	+
	65	+/// 입력 상자 껍데기. 높이·좌우 여백·모서리는 부르는 쪽이 정한다 — FoxInput은 크기
	66	+/// 수식어가, 나머지는 md 하나가 정한다. textarea는 세로 가운데 정렬을 쓰지 않으므로
	67	+/// `$align: null`로 끈다.
	68	+@mixin box($gap: 3, $align: center) {
	69	+ box-sizing: border-box;
	70	+ display: flex;
	71	+ align-items: $align;
	72	+ gap: fox.gap($gap);
	73	+ inline-size: 100%;
	74	+ border: fox.border(1) solid fox.color(input-border);
	75	+ background: fox.color(input-surface);
	76	+}
	77	+
	78	+/// 상자 하나짜리 크기(시안에 크기 축이 없는 컴포넌트용).
	79	+@mixin box-size($size: md) {
	80	+ block-size: fox.form(height-#{$size});
	81	+ padding-inline: fox.form(padding-#{$size});
	82	+ border-radius: fox.form(radius-#{$size});
	83	+}
	84	+
	85	+/// 상자 속 알맹이. 테두리·배경은 상자가 그리므로 여기선 지운다.
	86	+/// 글자 크기는 FoxInput만 크기 수식어가 정하므로 기본값이 없다.
	87	+///
	88	+/// 뒤에 중첩 규칙이 붙으므로 부르는 쪽이 선언을 더할 때는 `@include`보다 앞에 적는다 —
	89	+/// 뒤에 적으면 Sass가 같은 선택자를 한 번 더 낸다.
	90	+@mixin field($font-size: null, $line-height: 1) {
	91	+ flex: 1 0 0;
	92	+ min-inline-size: 0;
	93	+ margin: 0;
	94	+ padding: 0;
	95	+ border: none;
	96	+ background: none;
	97	+ color: fox.color(font-neutral-default);
	98	+ font-family: fox.font-family(body);
	99	+
	100	+ @if $font-size {
	101	+ font-size: fox.font-size($font-size);
	102	+ }
	103	+
	104	+ font-weight: fox.font-weight(regular);
	105	+ line-height: $line-height;
	106	+ letter-spacing: -0.025em;
	107	+
	108	+ &::placeholder {
	109	+ color: fox.color(font-neutral-subtler);
	110	+ }
	111	+
	112	+ // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
	113	+ &:focus {
	114	+ outline: none;
	115	+ }
	116	+
	117	+ &:disabled {
	118	+ color: fox.color(font-neutral-disabled-strong);
	119	+ cursor: default;
	120	+ }
	121	+}
	122	+
	123	+/// 상태 · 자동. 브라우저가 판단한다 — 포커스는 `:focus-within`, 비활성·읽기전용은
	124	+/// 네이티브 속성, 오류는 `aria-invalid="true"`. 뒤에 오는 규칙이 이긴다:
	125	+/// 포커스 < 오류 < 읽기전용 < 비활성.
	126	+///
	127	+/// $field 알맹이의 element 이름(`__field` · `__segment`).
	128	+/// $invalid-within `:has()`로 필드 전체가 오류인지 볼 때 찾을 것. 조각을 다른 컴포넌트에
	129	+/// 맡기는 경우(FoxPhoneNumber unit)는 알맹이가 없으므로 넓게 본다.
	130	+/// @content 컴포넌트 고유 규칙. `:not([data-state])` 안에 붙는다.
	131	+@mixin auto-states($block, $field: "field", $invalid-within: null) {
	132	+ $box: ".#{$block}__box";
	133	+ $input: ".#{$block}__#{$field}";
	134	+ $message: ".#{$block}__message";
	135	+ $within: "#{$input}[aria-invalid=\"true\"]";
	136	+
	137	+ @if $invalid-within {
	138	+ $within: $invalid-within;
	139	+ }
	140	+
	141	+ .#{$block}:not([data-state]) {
	142	+ #{$box}:focus-within {
	143	+ border-width: fox.border(2);
	144	+ border-color: fox.color(input-border-active);
	145	+ }
	146	+
	147	+ #{$box}:has(#{$input}[aria-invalid="true"]) {
	148	+ border-width: fox.border(2);
	149	+ border-color: fox.color(input-border-error);
	150	+ }
	151	+
	152	+ // 비활성도 `:read-only`에 걸리므로 떼어낸다.
	153	+ #{$box}:has(#{$input}:read-only:not(:disabled)) {
	154	+ @include _disabled-box;
	155	+ }
	156	+
	157	+ #{$box}:has(#{$input}:disabled) {
	158	+ @include _disabled-box;
	159	+ }
	160	+
	161	+ &:focus-within #{$message} {
	162	+ color: fox.color(font-system-information);
	163	+ }
	164	+
	165	+ &:has(#{$within}) #{$message} {
	166	+ color: fox.color(font-system-danger);
	167	+ }
	168	+
	169	+ @content;
	170	+ }
	171	+}
	172	+
	173	+/// 상태 · 고정. 루트에 `data-state`를 주면 그 모양으로 못박히고 자동 규칙은 꺼진다.
	174	+/// 카탈로그·스냅샷처럼 상태를 눈으로 비교해야 할 때 쓴다.
	175	+///
	176	+/// 시안의 focused·completed·error·view는 값이 들어찬 모습이라 플레이스홀더도 진하게 둔다.
	177	+@mixin fixed-states($block, $field: "field") {
	178	+ $root: ".#{$block}";
	179	+ $box: ".#{$block}__box";
	180	+ $input: ".#{$block}__#{$field}";
	181	+ $message: ".#{$block}__message";
	182	+
	183	+ #{$root}[data-state="default"] #{$box},
	184	+ #{$root}[data-state="completed"] #{$box} {
	185	+ border-width: fox.border(1);
	186	+ border-color: fox.color(input-border);
	187	+ background: fox.color(input-surface);
	188	+ }
	189	+
	190	+ #{$root}[data-state="focused"] #{$box} {
	191	+ border-width: fox.border(2);
	192	+ border-color: fox.color(input-border-active);
	193	+ background: fox.color(input-surface);
	194	+ }
	195	+
	196	+ #{$root}[data-state="error"] #{$box} {
	197	+ border-width: fox.border(2);
	198	+ border-color: fox.color(input-border-error);
	199	+ background: fox.color(input-surface);
	200	+ }
	201	+
	202	+ #{$root}[data-state="view"] #{$box},
	203	+ #{$root}[data-state="disabled"] #{$box} {
	204	+ @include _disabled-box;
	205	+ }
	206	+
	207	+ #{$root}[data-state="completed"] #{$input}::placeholder,
	208	+ #{$root}[data-state="focused"] #{$input}::placeholder,
	209	+ #{$root}[data-state="error"] #{$input}::placeholder,
	210	+ #{$root}[data-state="view"] #{$input}::placeholder {
	211	+ color: fox.color(font-neutral-default);
	212	+ }
	213	+
	214	+ #{$root}[data-state="disabled"] #{$input},
	215	+ #{$root}[data-state="disabled"] #{$input}::placeholder {
	216	+ color: fox.color(font-neutral-disabled-strong);
	217	+ }
	218	+
	219	+ #{$root}[data-state="focused"] #{$message} {
	220	+ color: fox.color(font-system-information);
	221	+ }
	222	+
	223	+ #{$root}[data-state="completed"] #{$message} {
	224	+ color: fox.color(font-system-success);
	225	+ }
	226	+
	227	+ #{$root}[data-state="error"] #{$message} {
	228	+ color: fox.color(font-system-danger);
	229	+ }
	230	+
	231	+ @content;
	232	+}

6918d4f

4494a73

@fox/styles/_fox-address.scss

--- @fox/styles/_fox-address.scss

+++ @fox/styles/_fox-address.scss


 //     export하지 않는다.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-address {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
   // 우편번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.

   }
 
   &__message {
-    display: flex;
-    gap: fox.number(3);
-    align-items: flex-start;
-    margin: 0;
-    color: fox.color(font-neutral-subtle);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(body-sm);
-    font-weight: fox.font-weight(regular);
-    line-height: 1.5;
-    letter-spacing: -0.025em;
+    @include field.message;
   }
 
   &__message-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: flex-start;
-    padding-block-start: fox.padding(1);
-
-    > * {
-      inline-size: fox.icon(3);
-      block-size: fox.icon(3);
-    }
+    @include field.message-icon;
   }
 
   &:has([aria-invalid="true"]) .fox-address__message {

6918d4f

4494a73

@fox/styles/_fox-certified.scss

--- @fox/styles/_fox-certified.scss

+++ @fox/styles/_fox-certified.scss


 // 인증번호 상자의 상태는 FoxInput과 같은 방식으로 브라우저가 판단한다 — 포커스는
 // `:focus-within`, 비활성은 네이티브 속성. 시안에 상태 변형이 없어 고정 표기는 두지 않는다.
 //
+// 라벨·상자·알맹이는 `form-field` 믹스인이 갖는다. 상태만 여기서 직접 적는다 —
+// `data-state` 고정 표기가 없어 자동 규칙 두 줄이면 끝난다.
+//
 // 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
 //   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
 //     export하지 않는다.
-//   - box-sizing / flex: 구조 규칙.
+//   - flex: 구조 규칙.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-certified {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
   // 전화번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.

   }
 
   &__box {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: fox.gap(3);
-    inline-size: 100%;
-    block-size: fox.form(height-md);
-    padding-inline: fox.form(padding-md);
-    border: fox.border(1) solid fox.color(input-border);
-    border-radius: fox.form(radius-md);
-    background: fox.color(input-surface);
+    @include field.box;
+    @include field.box-size(md);
   }
 
   &__field {
-    flex: 1 0 0;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(regular);
-    line-height: 1;
-    letter-spacing: -0.025em;
-
-    &::placeholder {
-      color: fox.color(font-neutral-subtler);
-    }
-
-    // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
-    &:focus {
-      outline: none;
-    }
-
-    &:disabled {
-      color: fox.color(font-neutral-disabled-strong);
-      cursor: default;
-    }
+    @include field.field($font-size: label-md);
   }
 
   &__timer {

6918d4f

4494a73

@fox/styles/_fox-email.scss

--- @fox/styles/_fox-email.scss

+++ @fox/styles/_fox-email.scss


 //     export하지 않는다.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-email {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
   // 좁아지면 칸이 찌그러지는 대신 줄이 넘어간다.

   }
 
   &__message {
-    display: flex;
-    gap: fox.number(3);
-    align-items: flex-start;
-    margin: 0;
-    color: fox.color(font-neutral-subtle);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(body-sm);
-    font-weight: fox.font-weight(regular);
-    line-height: 1.5;
-    letter-spacing: -0.025em;
+    @include field.message;
   }
 
   &__message-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: flex-start;
-    padding-block-start: fox.padding(1);
-
-    > * {
-      inline-size: fox.icon(3);
-      block-size: fox.icon(3);
-    }
+    @include field.message-icon;
   }
 
   &:has([aria-invalid="true"]) .fox-email__message {

6918d4f

4494a73

@fox/styles/_fox-file-upload.scss

--- @fox/styles/_fox-file-upload.scss

+++ @fox/styles/_fox-file-upload.scss


 //   - 목록의 margin/padding/list-style 0: `<ul>`의 브라우저 기본값 지우기.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   // area 모드는 상자와 목록 사이가 한 단계 넓다.
   &--area {

   }
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
   &__description {

6918d4f

4494a73

@fox/styles/_fox-input.scss

--- @fox/styles/_fox-input.scss

+++ @fox/styles/_fox-input.scss


 //   - 고정: 루트에 `data-state`를 주면 그 모양으로 못박힌다. 자동 규칙은 전부 꺼진다.
 //     카탈로그·스냅샷처럼 상태를 눈으로 비교해야 할 때 쓴다.
 //
-// 라벨은 입력 크기와 무관하게 항상 label/md다(시안의 form-label이 공용 컴포넌트라 크기를
-// 따라가지 않는다).
+// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다 — 입력 계열 여섯
+// 컴포넌트가 같은 값을 쓴다. 이 파일에는 FoxInput만의 것(크기 축, 아이콘, 지우기 버튼)이
+// 남는다.
 //
 // 아이콘 크기 24/20/16은 시안이 변수를 걸지 않았지만 상자의 나머지 치수가 전부 `form/*`
 // 반응형 토큰이라 아이콘도 `form-icon-*`(PC 24/20/16 · 모바일 20/16/12)에 맞춘다.
 //
 // 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
-//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.
-//   - 헬퍼 메시지의 line-height 1.5: 위와 같다.
-//   - box-sizing / cursor / flex / appearance 관련: 구조·상호작용 규칙.
+//   - cursor / flex / appearance 관련: 구조·상호작용 규칙.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-input {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
+  // 크기(높이·좌우 여백·모서리)는 아래 크기 수식어가 정한다.
   &__box {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: fox.gap(3);
-    inline-size: 100%;
-    background: fox.color(input-surface);
-    border: fox.border(1) solid fox.color(input-border);
+    @include field.box;
   }
 
+  // 글자 크기도 크기 수식어가 정한다.
   &__field {
-    flex: 1 0 0;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-weight: fox.font-weight(regular);
-    line-height: 1;
-    letter-spacing: -0.025em;
-
-    &::placeholder {
-      color: fox.color(font-neutral-subtler);
-    }
-
-    // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
-    &:focus {
-      outline: none;
-    }
-
-    &:disabled {
-      color: fox.color(font-neutral-disabled-strong);
-      cursor: default;
-    }
+    @include field.field;
   }
 
   &__icon,

   }
 
   &__message {
-    display: flex;
-    gap: fox.number(3);
-    align-items: flex-start;
-    margin: 0;
-    color: fox.color(font-neutral-subtle);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(body-sm);
-    font-weight: fox.font-weight(regular);
-    line-height: 1.5;
-    letter-spacing: -0.025em;
+    @include field.message;
   }
 
   &__message-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: flex-start;
-    padding-block-start: fox.padding(1);
-
-    > * {
-      inline-size: fox.icon(3);
-      block-size: fox.icon(3);
-    }
+    @include field.message-icon;
   }
 
   // ── 크기 ──────────────────────────────────────────────────────────────────

   }
 }
 
-// ── 상태 · 자동 ─────────────────────────────────────────────────────────────
-// 뒤에 오는 규칙이 이긴다: 포커스 < 오류 < 읽기전용 < 비활성.
-.fox-input:not([data-state]) {
-  .fox-input__box:focus-within {
-    border-width: fox.border(2);
-    border-color: fox.color(input-border-active);
+@include field.auto-states("fox-input");
+
+@include field.fixed-states("fox-input") {
+  .fox-input[data-state="focused"] .fox-input__clear {
+    display: inline-flex;
   }
-
-  .fox-input__box:has(.fox-input__field[aria-invalid="true"]) {
-    border-width: fox.border(2);
-    border-color: fox.color(input-border-error);
-  }
-
-  // 비활성도 `:read-only`에 걸리므로 떼어낸다.
-  .fox-input__box:has(.fox-input__field:read-only:not(:disabled)) {
-    border-width: fox.border(1);
-    border-color: fox.color(input-border-disabled);
-    background: fox.color(input-surface-disabled);
-  }
-
-  .fox-input__box:has(.fox-input__field:disabled) {
-    border-width: fox.border(1);
-    border-color: fox.color(input-border-disabled);
-    background: fox.color(input-surface-disabled);
-  }
-
-  &:focus-within .fox-input__message {
-    color: fox.color(font-system-information);
-  }
-
-  &:has(.fox-input__field[aria-invalid="true"]) .fox-input__message {
-    color: fox.color(font-system-danger);
-  }
-}
-
-// ── 상태 · 고정 ─────────────────────────────────────────────────────────────
-// 시안의 focused·completed·error·view는 값이 들어찬 모습이라 플레이스홀더도 진하게 둔다.
-.fox-input[data-state="default"] .fox-input__box,
-.fox-input[data-state="completed"] .fox-input__box {
-  border-width: fox.border(1);
-  border-color: fox.color(input-border);
-  background: fox.color(input-surface);
-}
-
-.fox-input[data-state="focused"] .fox-input__box {
-  border-width: fox.border(2);
-  border-color: fox.color(input-border-active);
-  background: fox.color(input-surface);
-}
-
-.fox-input[data-state="error"] .fox-input__box {
-  border-width: fox.border(2);
-  border-color: fox.color(input-border-error);
-  background: fox.color(input-surface);
-}
-
-.fox-input[data-state="view"] .fox-input__box,
-.fox-input[data-state="disabled"] .fox-input__box {
-  border-width: fox.border(1);
-  border-color: fox.color(input-border-disabled);
-  background: fox.color(input-surface-disabled);
-}
-
-.fox-input[data-state="completed"] .fox-input__field::placeholder,
-.fox-input[data-state="focused"] .fox-input__field::placeholder,
-.fox-input[data-state="error"] .fox-input__field::placeholder,
-.fox-input[data-state="view"] .fox-input__field::placeholder {
-  color: fox.color(font-neutral-default);
-}
-
-.fox-input[data-state="disabled"] .fox-input__field,
-.fox-input[data-state="disabled"] .fox-input__field::placeholder {
-  color: fox.color(font-neutral-disabled-strong);
-}
-
-.fox-input[data-state="focused"] .fox-input__message {
-  color: fox.color(font-system-information);
-}
-
-.fox-input[data-state="completed"] .fox-input__message {
-  color: fox.color(font-system-success);
-}
-
-.fox-input[data-state="error"] .fox-input__message {
-  color: fox.color(font-system-danger);
-}
-
-.fox-input[data-state="focused"] .fox-input__clear {
-  display: inline-flex;
 }

6918d4f

4494a73

@fox/styles/_fox-phone-number.scss

--- @fox/styles/_fox-phone-number.scss

+++ @fox/styles/_fox-phone-number.scss


 // 상태는 FoxInput과 같은 두 갈래다(자동 / `data-state` 고정). combine 상자에만 규칙이
 // 필요하다 — unit은 조각이 알아서 따라온다.
 //
+// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다.
+//
 // 시안에 크기 축이 없다. 상자는 md 하나뿐이다.
 //
 // 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
 //   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
 //     export하지 않는다.
-//   - box-sizing / flex / text-align: 구조 규칙.
+//   - flex / text-align: 구조 규칙.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-phone-number {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
   // ── unit ──────────────────────────────────────────────────────────────────

 
   // ── combine ───────────────────────────────────────────────────────────────
   &__box {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: fox.gap(2);
-    inline-size: 100%;
-    block-size: fox.form(height-md);
-    padding-inline: fox.form(padding-md);
-    border: fox.border(1) solid fox.color(input-border);
-    border-radius: fox.form(radius-md);
-    background: fox.color(input-surface);
+    @include field.box($gap: 2);
+    @include field.box-size(md);
   }
 
   &__segment {
-    flex: 1 0 0;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(regular);
-    line-height: 1;
-    letter-spacing: -0.025em;
     text-align: center;
 
-    &::placeholder {
-      color: fox.color(font-neutral-subtler);
-    }
-
-    // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
-    &:focus {
-      outline: none;
-    }
-
-    &:disabled {
-      color: fox.color(font-neutral-disabled-strong);
-      cursor: default;
-    }
+    @include field.field($font-size: label-md);
   }
 
   &__message {
-    display: flex;
-    gap: fox.number(3);
-    align-items: flex-start;
-    margin: 0;
-    color: fox.color(font-neutral-subtle);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(body-sm);
-    font-weight: fox.font-weight(regular);
-    line-height: 1.5;
-    letter-spacing: -0.025em;
+    @include field.message;
   }
 
   &__message-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: flex-start;
-    padding-block-start: fox.padding(1);
-
-    > * {
-      inline-size: fox.icon(3);
-      block-size: fox.icon(3);
-    }
+    @include field.message-icon;
   }
 }
 
-// ── 상태 · 자동 (combine 상자) ──────────────────────────────────────────────
-// 뒤에 오는 규칙이 이긴다: 포커스 < 오류 < 읽기전용 < 비활성.
-.fox-phone-number:not([data-state]) {
-  .fox-phone-number__box:focus-within {
-    border-width: fox.border(2);
-    border-color: fox.color(input-border-active);
-  }
+// unit 모양은 조각(FoxSelect·FoxInput)이 제 상태를 갖고 있어 combine 상자에만 규칙이
+// 필요하다. 다만 헬퍼 색은 두 모양 모두 물들어야 하므로 오류 표시를 넓게 본다 — unit에는
+// `__segment`가 없다.
+@include field.auto-states(
+  "fox-phone-number",
+  $field: "segment",
+  $invalid-within: "[aria-invalid=\"true\"]"
+);
 
-  .fox-phone-number__box:has(.fox-phone-number__segment[aria-invalid="true"]) {
-    border-width: fox.border(2);
-    border-color: fox.color(input-border-error);
-  }
-
-  // 비활성도 `:read-only`에 걸리므로 떼어낸다.
-  .fox-phone-number__box:has(.fox-phone-number__segment:read-only:not(:disabled)) {
-    border-width: fox.border(1);
-    border-color: fox.color(input-border-disabled);
-    background: fox.color(input-surface-disabled);
-  }
-
-  .fox-phone-number__box:has(.fox-phone-number__segment:disabled) {
-    border-width: fox.border(1);
-    border-color: fox.color(input-border-disabled);
-    background: fox.color(input-surface-disabled);
-  }
-
-  &:focus-within .fox-phone-number__message {
-    color: fox.color(font-system-information);
-  }
-
-  &:has([aria-invalid="true"]) .fox-phone-number__message {
-    color: fox.color(font-system-danger);
-  }
-}
-
-// ── 상태 · 고정 ─────────────────────────────────────────────────────────────
-.fox-phone-number[data-state="default"] .fox-phone-number__box,
-.fox-phone-number[data-state="completed"] .fox-phone-number__box {
-  border-width: fox.border(1);
-  border-color: fox.color(input-border);
-  background: fox.color(input-surface);
-}
-
-.fox-phone-number[data-state="focused"] .fox-phone-number__box {
-  border-width: fox.border(2);
-  border-color: fox.color(input-border-active);
-  background: fox.color(input-surface);
-}
-
-.fox-phone-number[data-state="error"] .fox-phone-number__box {
-  border-width: fox.border(2);
-  border-color: fox.color(input-border-error);
-  background: fox.color(input-surface);
-}
-
-.fox-phone-number[data-state="view"] .fox-phone-number__box,
-.fox-phone-number[data-state="disabled"] .fox-phone-number__box {
-  border-width: fox.border(1);
-  border-color: fox.color(input-border-disabled);
-  background: fox.color(input-surface-disabled);
-}
-
-.fox-phone-number[data-state="completed"] .fox-phone-number__segment::placeholder,
-.fox-phone-number[data-state="focused"] .fox-phone-number__segment::placeholder,
-.fox-phone-number[data-state="error"] .fox-phone-number__segment::placeholder,
-.fox-phone-number[data-state="view"] .fox-phone-number__segment::placeholder {
-  color: fox.color(font-neutral-default);
-}
-
-.fox-phone-number[data-state="disabled"] .fox-phone-number__segment,
-.fox-phone-number[data-state="disabled"] .fox-phone-number__segment::placeholder {
-  color: fox.color(font-neutral-disabled-strong);
-}
-
-.fox-phone-number[data-state="focused"] .fox-phone-number__message {
-  color: fox.color(font-system-information);
-}
-
-.fox-phone-number[data-state="completed"] .fox-phone-number__message {
-  color: fox.color(font-system-success);
-}
-
-.fox-phone-number[data-state="error"] .fox-phone-number__message {
-  color: fox.color(font-system-danger);
-}
+@include field.fixed-states("fox-phone-number", $field: "segment");

6918d4f

4494a73

@fox/styles/_fox-text-area.scss

--- @fox/styles/_fox-text-area.scss

+++ @fox/styles/_fox-text-area.scss


 //     플레이스홀더와 입력값의 네이티브 차이라 규칙이 필요 없다.
 //   - 고정: 루트에 `data-state`를 주면 그 모양으로 못박힌다.
 //
+// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다. 이 파일에는
+// FoxTextArea만의 것(여러 줄 여백, 카운터)이 남는다.
+//
 // 시안에 크기 축이 없다 — 상자 하나뿐이고 높이는 줄 수가 정한다(시안은 5줄).
 //
 // 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
-//   - line-height(본문·헬퍼 1.5, 라벨·카운터 1) / letter-spacing: 시안 텍스트 스타일의
-//     값이나 Figma가 변수로 export하지 않는다.
-//   - box-sizing / resize / flex 관련: 구조·상호작용 규칙. 시안에 리사이즈 핸들이 없어
-//     막아 둔다 — 높이가 필요하면 `rows`로 정한다.
+//   - line-height(카운터 1) / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
+//     export하지 않는다.
+//   - resize / flex 관련: 구조·상호작용 규칙. 시안에 리사이즈 핸들이 없어 막아 둔다 —
+//     높이가 필요하면 `rows`로 정한다.
 
 @use "abstracts" as fox;
+@use "form-field" as field;
 
 .fox-text-area {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(3);
-  inline-size: 100%;
+  @include field.root;
 
   &__label {
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(label-md);
-    font-weight: fox.font-weight(medium);
-    line-height: 1;
-    letter-spacing: -0.025em;
+    @include field.label;
   }
 
+  // 여러 줄이라 세로 가운데 정렬을 끄고, 크기 축이 없어 md 여백을 직접 준다.
   &__box {
-    box-sizing: border-box;
-    display: flex;
-    gap: fox.gap(3);
-    inline-size: 100%;
+    @include field.box($align: null);
+
     padding-inline: fox.form(padding-md);
     padding-block: fox.padding(5);
-    border: fox.border(1) solid fox.color(input-border);
     border-radius: fox.form(radius-lg);
-    background: fox.color(input-surface);
   }
 
   &__field {
-    flex: 1 0 0;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
     resize: none;
-    color: fox.color(font-neutral-default);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(body-md);
-    font-weight: fox.font-weight(regular);
-    line-height: 1.5;
-    letter-spacing: -0.025em;
 
-    &::placeholder {
-      color: fox.color(font-neutral-subtler);
-    }
-
-    // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
-    &:focus {
-      outline: none;
-    }
-
-    &:disabled {
-      color: fox.color(font-neutral-disabled-strong);
-      cursor: default;
-    }
+    @include field.field($font-size: body-md, $line-height: 1.5);
   }
 
   // 헬퍼는 왼쪽에서 남는 폭을 먹고 카운터는 오른쪽에 붙는다.

     inline-size: 100%;
   }
 
+  // 카운터와 한 줄에 서므로 남는 폭을 먹는다.
   &__message {
-    display: flex;
+    @include field.message;
+
     flex: 1 0 0;
-    gap: fox.number(3);
-    align-items: flex-start;
     min-inline-size: 0;
-    margin: 0;
-    color: fox.color(font-neutral-subtle);
-    font-family: fox.font-family(body);
-    font-size: fox.font-size(body-sm);
-    font-weight: fox.font-weight(regular);
-    line-height: 1.5;
-    letter-spacing: -0.025em;
   }
 
   &__message-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: flex-start;
-    padding-block-start: fox.padding(1);
-
-    > * {
-      inline-size: fox.icon(3);
-      block-size: fox.icon(3);
-    }
+    @include field.message-icon;
   }
 
   &__counter {

   }
 }
 
-// ── 상태 · 자동 ─────────────────────────────────────────────────────────────
-// 뒤에 오는 규칙이 이긴다: 포커스 < 오류 < 읽기전용 < 비활성.
-.fox-text-area:not([data-state]) {
-  .fox-text-area__box:focus-within {
-    border-width: fox.border(2);
-    border-color: fox.color(input-border-active);
-  }
-
-  .fox-text-area__box:has(.fox-text-area__field[aria-invalid="true"]) {
-    border-width: fox.border(2);
-    border-color: fox.color(input-border-error);
-  }
-
-  // 비활성도 `:read-only`에 걸리므로 떼어낸다.
-  .fox-text-area__box:has(.fox-text-area__field:read-only:not(:disabled)) {
-    border-width: fox.border(1);
-    border-color: fox.color(input-border-disabled);
-    background: fox.color(input-surface-disabled);
-  }
-
-  .fox-text-area__box:has(.fox-text-area__field:disabled) {
-    border-width: fox.border(1);
-    border-color: fox.color(input-border-disabled);
-    background: fox.color(input-surface-disabled);
-  }
-
-  &:focus-within .fox-text-area__message {
-    color: fox.color(font-system-information);
-  }
-
-  &:has(.fox-text-area__field[aria-invalid="true"]) .fox-text-area__message {
-    color: fox.color(font-system-danger);
-  }
-
+@include field.auto-states("fox-text-area") {
   // 시안의 오류 변형에서만 카운터 현재값이 빨갛다.
   &:has(.fox-text-area__field[aria-invalid="true"]) .fox-text-area__counter-current {
     color: fox.color(font-system-danger);
   }
 }
 
-// ── 상태 · 고정 ─────────────────────────────────────────────────────────────
-// 시안의 focused·completed·error·view는 값이 들어찬 모습이라 플레이스홀더도 진하게 둔다.
-.fox-text-area[data-state="default"] .fox-text-area__box,
-.fox-text-area[data-state="completed"] .fox-text-area__box {
-  border-width: fox.border(1);
-  border-color: fox.color(input-border);
-  background: fox.color(input-surface);
-}
-
-.fox-text-area[data-state="focused"] .fox-text-area__box {
-  border-width: fox.border(2);
-  border-color: fox.color(input-border-active);
-  background: fox.color(input-surface);
-}
-
-.fox-text-area[data-state="error"] .fox-text-area__box {
-  border-width: fox.border(2);
-  border-color: fox.color(input-border-error);
-  background: fox.color(input-surface);
-}
-
-.fox-text-area[data-state="view"] .fox-text-area__box,
-.fox-text-area[data-state="disabled"] .fox-text-area__box {
-  border-width: fox.border(1);
-  border-color: fox.color(input-border-disabled);
-  background: fox.color(input-surface-disabled);
-}
-
-.fox-text-area[data-state="completed"] .fox-text-area__field::placeholder,
-.fox-text-area[data-state="focused"] .fox-text-area__field::placeholder,
-.fox-text-area[data-state="error"] .fox-text-area__field::placeholder,
-.fox-text-area[data-state="view"] .fox-text-area__field::placeholder {
-  color: fox.color(font-neutral-default);
-}
-
-.fox-text-area[data-state="disabled"] .fox-text-area__field,
-.fox-text-area[data-state="disabled"] .fox-text-area__field::placeholder {
-  color: fox.color(font-neutral-disabled-strong);
-}
-
-.fox-text-area[data-state="focused"] .fox-text-area__message {
-  color: fox.color(font-system-information);
-}
-
-.fox-text-area[data-state="completed"] .fox-text-area__message {
-  color: fox.color(font-system-success);
-}
-
-.fox-text-area[data-state="error"] .fox-text-area__message {
-  color: fox.color(font-system-danger);
-}
-
-.fox-text-area[data-state="error"] .fox-text-area__counter-current {
-  color: fox.color(font-system-danger);
+@include field.fixed-states("fox-text-area") {
+  .fox-text-area[data-state="error"] .fox-text-area__counter-current {
+    color: fox.color(font-system-danger);
+  }
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -22,20 +22,13 @@
22	22	// export하지 않는다.
23	23
24	24	@use "abstracts" as fox;
	25	+@use "form-field" as field;
25	26
26	27	.fox-address {
27		- display: flex;
28		- flex-direction: column;
29		- gap: fox.gap(3);
30		- inline-size: 100%;
	28	+ @include field.root;
31	29
32	30	&__label {
33		- color: fox.color(font-neutral-default);
34		- font-family: fox.font-family(body);
35		- font-size: fox.font-size(label-md);
36		- font-weight: fox.font-weight(medium);
37		- line-height: 1;
38		- letter-spacing: -0.025em;
	31	+ @include field.label;
39	32	}
40	33
41	34	// 우편번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.
...	...	@@ -52,28 +45,11 @@
52	45	}
53	46
54	47	&__message {
55		- display: flex;
56		- gap: fox.number(3);
57		- align-items: flex-start;
58		- margin: 0;
59		- color: fox.color(font-neutral-subtle);
60		- font-family: fox.font-family(body);
61		- font-size: fox.font-size(body-sm);
62		- font-weight: fox.font-weight(regular);
63		- line-height: 1.5;
64		- letter-spacing: -0.025em;
	48	+ @include field.message;
65	49	}
66	50
67	51	&__message-icon {
68		- display: inline-flex;
69		- flex-shrink: 0;
70		- align-items: flex-start;
71		- padding-block-start: fox.padding(1);
72		-
73		- > * {
74		- inline-size: fox.icon(3);
75		- block-size: fox.icon(3);
76		- }
	52	+ @include field.message-icon;
77	53	}
78	54
79	55	&:has([aria-invalid="true"]) .fox-address__message {

...	...	@@ -27,26 +27,22 @@
27	27	// 인증번호 상자의 상태는 FoxInput과 같은 방식으로 브라우저가 판단한다 — 포커스는
28	28	// `:focus-within`, 비활성은 네이티브 속성. 시안에 상태 변형이 없어 고정 표기는 두지 않는다.
29	29	//
	30	+// 라벨·상자·알맹이는 `form-field` 믹스인이 갖는다. 상태만 여기서 직접 적는다 —
	31	+// `data-state` 고정 표기가 없어 자동 규칙 두 줄이면 끝난다.
	32	+//
30	33	// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
31	34	// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
32	35	// export하지 않는다.
33		-// - box-sizing / flex: 구조 규칙.
	36	+// - flex: 구조 규칙.
34	37
35	38	@use "abstracts" as fox;
	39	+@use "form-field" as field;
36	40
37	41	.fox-certified {
38		- display: flex;
39		- flex-direction: column;
40		- gap: fox.gap(3);
41		- inline-size: 100%;
	42	+ @include field.root;
42	43
43	44	&__label {
44		- color: fox.color(font-neutral-default);
45		- font-family: fox.font-family(body);
46		- font-size: fox.font-size(label-md);
47		- font-weight: fox.font-weight(medium);
48		- line-height: 1;
49		- letter-spacing: -0.025em;
	45	+ @include field.label;
50	46	}
51	47
52	48	// 전화번호는 남는 폭을 먹고 버튼은 글자만큼만 차지한다.
...	...	@@ -63,45 +59,12 @@
63	59	}
64	60
65	61	&__box {
66		- box-sizing: border-box;
67		- display: flex;
68		- align-items: center;
69		- gap: fox.gap(3);
70		- inline-size: 100%;
71		- block-size: fox.form(height-md);
72		- padding-inline: fox.form(padding-md);
73		- border: fox.border(1) solid fox.color(input-border);
74		- border-radius: fox.form(radius-md);
75		- background: fox.color(input-surface);
	62	+ @include field.box;
	63	+ @include field.box-size(md);
76	64	}
77	65
78	66	&__field {
79		- flex: 1 0 0;
80		- min-inline-size: 0;
81		- margin: 0;
82		- padding: 0;
83		- border: none;
84		- background: none;
85		- color: fox.color(font-neutral-default);
86		- font-family: fox.font-family(body);
87		- font-size: fox.font-size(label-md);
88		- font-weight: fox.font-weight(regular);
89		- line-height: 1;
90		- letter-spacing: -0.025em;
91		-
92		- &::placeholder {
93		- color: fox.color(font-neutral-subtler);
94		- }
95		-
96		- // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
97		- &:focus {
98		- outline: none;
99		- }
100		-
101		- &:disabled {
102		- color: fox.color(font-neutral-disabled-strong);
103		- cursor: default;
104		- }
	67	+ @include field.field($font-size: label-md);
105	68	}
106	69
107	70	&__timer {

...	...	@@ -24,20 +24,13 @@
24	24	// export하지 않는다.
25	25
26	26	@use "abstracts" as fox;
	27	+@use "form-field" as field;
27	28
28	29	.fox-email {
29		- display: flex;
30		- flex-direction: column;
31		- gap: fox.gap(3);
32		- inline-size: 100%;
	30	+ @include field.root;
33	31
34	32	&__label {
35		- color: fox.color(font-neutral-default);
36		- font-family: fox.font-family(body);
37		- font-size: fox.font-size(label-md);
38		- font-weight: fox.font-weight(medium);
39		- line-height: 1;
40		- letter-spacing: -0.025em;
	33	+ @include field.label;
41	34	}
42	35
43	36	// 좁아지면 칸이 찌그러지는 대신 줄이 넘어간다.
...	...	@@ -65,28 +58,11 @@
65	58	}
66	59
67	60	&__message {
68		- display: flex;
69		- gap: fox.number(3);
70		- align-items: flex-start;
71		- margin: 0;
72		- color: fox.color(font-neutral-subtle);
73		- font-family: fox.font-family(body);
74		- font-size: fox.font-size(body-sm);
75		- font-weight: fox.font-weight(regular);
76		- line-height: 1.5;
77		- letter-spacing: -0.025em;
	61	+ @include field.message;
78	62	}
79	63
80	64	&__message-icon {
81		- display: inline-flex;
82		- flex-shrink: 0;
83		- align-items: flex-start;
84		- padding-block-start: fox.padding(1);
85		-
86		- > * {
87		- inline-size: fox.icon(3);
88		- block-size: fox.icon(3);
89		- }
	65	+ @include field.message-icon;
90	66	}
91	67
92	68	&:has([aria-invalid="true"]) .fox-email__message {

...	...	@@ -27,12 +27,10 @@
27	27	// - 목록의 margin/padding/list-style 0: `<ul>`의 브라우저 기본값 지우기.
28	28
29	29	@use "abstracts" as fox;
	30	+@use "form-field" as field;
30	31
31	32	.fox-file-upload {
32		- display: flex;
33		- flex-direction: column;
34		- gap: fox.gap(3);
35		- inline-size: 100%;
	33	+ @include field.root;
36	34
37	35	// area 모드는 상자와 목록 사이가 한 단계 넓다.
38	36	&--area {
...	...	@@ -40,12 +38,7 @@
40	38	}
41	39
42	40	&__label {
43		- color: fox.color(font-neutral-default);
44		- font-family: fox.font-family(body);
45		- font-size: fox.font-size(label-md);
46		- font-weight: fox.font-weight(medium);
47		- line-height: 1;
48		- letter-spacing: -0.025em;
	41	+ @include field.label;
49	42	}
50	43
51	44	&__description {

...	...	@@ -20,70 +20,34 @@
20	20	// - 고정: 루트에 `data-state`를 주면 그 모양으로 못박힌다. 자동 규칙은 전부 꺼진다.
21	21	// 카탈로그·스냅샷처럼 상태를 눈으로 비교해야 할 때 쓴다.
22	22	//
23		-// 라벨은 입력 크기와 무관하게 항상 label/md다(시안의 form-label이 공용 컴포넌트라 크기를
24		-// 따라가지 않는다).
	23	+// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다 — 입력 계열 여섯
	24	+// 컴포넌트가 같은 값을 쓴다. 이 파일에는 FoxInput만의 것(크기 축, 아이콘, 지우기 버튼)이
	25	+// 남는다.
25	26	//
26	27	// 아이콘 크기 24/20/16은 시안이 변수를 걸지 않았지만 상자의 나머지 치수가 전부 `form/*`
27	28	// 반응형 토큰이라 아이콘도 `form-icon-*`(PC 24/20/16 · 모바일 20/16/12)에 맞춘다.
28	29	//
29	30	// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
30		-// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.
31		-// - 헬퍼 메시지의 line-height 1.5: 위와 같다.
32		-// - box-sizing / cursor / flex / appearance 관련: 구조·상호작용 규칙.
	31	+// - cursor / flex / appearance 관련: 구조·상호작용 규칙.
33	32
34	33	@use "abstracts" as fox;
	34	+@use "form-field" as field;
35	35
36	36	.fox-input {
37		- display: flex;
38		- flex-direction: column;
39		- gap: fox.gap(3);
40		- inline-size: 100%;
	37	+ @include field.root;
41	38
42	39	&__label {
43		- color: fox.color(font-neutral-default);
44		- font-family: fox.font-family(body);
45		- font-size: fox.font-size(label-md);
46		- font-weight: fox.font-weight(medium);
47		- line-height: 1;
48		- letter-spacing: -0.025em;
	40	+ @include field.label;
49	41	}
50	42
	43	+ // 크기(높이·좌우 여백·모서리)는 아래 크기 수식어가 정한다.
51	44	&__box {
52		- box-sizing: border-box;
53		- display: flex;
54		- align-items: center;
55		- gap: fox.gap(3);
56		- inline-size: 100%;
57		- background: fox.color(input-surface);
58		- border: fox.border(1) solid fox.color(input-border);
	45	+ @include field.box;
59	46	}
60	47
	48	+ // 글자 크기도 크기 수식어가 정한다.
61	49	&__field {
62		- flex: 1 0 0;
63		- min-inline-size: 0;
64		- margin: 0;
65		- padding: 0;
66		- border: none;
67		- background: none;
68		- color: fox.color(font-neutral-default);
69		- font-family: fox.font-family(body);
70		- font-weight: fox.font-weight(regular);
71		- line-height: 1;
72		- letter-spacing: -0.025em;
73		-
74		- &::placeholder {
75		- color: fox.color(font-neutral-subtler);
76		- }
77		-
78		- // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
79		- &:focus {
80		- outline: none;
81		- }
82		-
83		- &:disabled {
84		- color: fox.color(font-neutral-disabled-strong);
85		- cursor: default;
86		- }
	50	+ @include field.field;
87	51	}
88	52
89	53	&__icon,
...	...	@@ -110,28 +74,11 @@
110	74	}
111	75
112	76	&__message {
113		- display: flex;
114		- gap: fox.number(3);
115		- align-items: flex-start;
116		- margin: 0;
117		- color: fox.color(font-neutral-subtle);
118		- font-family: fox.font-family(body);
119		- font-size: fox.font-size(body-sm);
120		- font-weight: fox.font-weight(regular);
121		- line-height: 1.5;
122		- letter-spacing: -0.025em;
	77	+ @include field.message;
123	78	}
124	79
125	80	&__message-icon {
126		- display: inline-flex;
127		- flex-shrink: 0;
128		- align-items: flex-start;
129		- padding-block-start: fox.padding(1);
130		-
131		- > * {
132		- inline-size: fox.icon(3);
133		- block-size: fox.icon(3);
134		- }
	81	+ @include field.message-icon;
135	82	}
136	83
137	84	// ── 크기 ──────────────────────────────────────────────────────────────────
...	...	@@ -193,93 +140,10 @@
193	140	}
194	141	}
195	142
196		-// ── 상태 · 자동 ─────────────────────────────────────────────────────────────
197		-// 뒤에 오는 규칙이 이긴다: 포커스 < 오류 < 읽기전용 < 비활성.
198		-.fox-input:not([data-state]) {
199		- .fox-input__box:focus-within {
200		- border-width: fox.border(2);
201		- border-color: fox.color(input-border-active);
	143	+@include field.auto-states("fox-input");
	144	+
	145	+@include field.fixed-states("fox-input") {
	146	+ .fox-input[data-state="focused"] .fox-input__clear {
	147	+ display: inline-flex;
202	148	}
203		-
204		- .fox-input__box:has(.fox-input__field[aria-invalid="true"]) {
205		- border-width: fox.border(2);
206		- border-color: fox.color(input-border-error);
207		- }
208		-
209		- // 비활성도 `:read-only`에 걸리므로 떼어낸다.
210		- .fox-input__box:has(.fox-input__field:read-only:not(:disabled)) {
211		- border-width: fox.border(1);
212		- border-color: fox.color(input-border-disabled);
213		- background: fox.color(input-surface-disabled);
214		- }
215		-
216		- .fox-input__box:has(.fox-input__field:disabled) {
217		- border-width: fox.border(1);
218		- border-color: fox.color(input-border-disabled);
219		- background: fox.color(input-surface-disabled);
220		- }
221		-
222		- &:focus-within .fox-input__message {
223		- color: fox.color(font-system-information);
224		- }
225		-
226		- &:has(.fox-input__field[aria-invalid="true"]) .fox-input__message {
227		- color: fox.color(font-system-danger);
228		- }
229		-}
230		-
231		-// ── 상태 · 고정 ─────────────────────────────────────────────────────────────
232		-// 시안의 focused·completed·error·view는 값이 들어찬 모습이라 플레이스홀더도 진하게 둔다.
233		-.fox-input[data-state="default"] .fox-input__box,
234		-.fox-input[data-state="completed"] .fox-input__box {
235		- border-width: fox.border(1);
236		- border-color: fox.color(input-border);
237		- background: fox.color(input-surface);
238		-}
239		-
240		-.fox-input[data-state="focused"] .fox-input__box {
241		- border-width: fox.border(2);
242		- border-color: fox.color(input-border-active);
243		- background: fox.color(input-surface);
244		-}
245		-
246		-.fox-input[data-state="error"] .fox-input__box {
247		- border-width: fox.border(2);
248		- border-color: fox.color(input-border-error);
249		- background: fox.color(input-surface);
250		-}
251		-
252		-.fox-input[data-state="view"] .fox-input__box,
253		-.fox-input[data-state="disabled"] .fox-input__box {
254		- border-width: fox.border(1);
255		- border-color: fox.color(input-border-disabled);
256		- background: fox.color(input-surface-disabled);
257		-}
258		-
259		-.fox-input[data-state="completed"] .fox-input__field::placeholder,
260		-.fox-input[data-state="focused"] .fox-input__field::placeholder,
261		-.fox-input[data-state="error"] .fox-input__field::placeholder,
262		-.fox-input[data-state="view"] .fox-input__field::placeholder {
263		- color: fox.color(font-neutral-default);
264		-}
265		-
266		-.fox-input[data-state="disabled"] .fox-input__field,
267		-.fox-input[data-state="disabled"] .fox-input__field::placeholder {
268		- color: fox.color(font-neutral-disabled-strong);
269		-}
270		-
271		-.fox-input[data-state="focused"] .fox-input__message {
272		- color: fox.color(font-system-information);
273		-}
274		-
275		-.fox-input[data-state="completed"] .fox-input__message {
276		- color: fox.color(font-system-success);
277		-}
278		-
279		-.fox-input[data-state="error"] .fox-input__message {
280		- color: fox.color(font-system-danger);
281		-}
282		-
283		-.fox-input[data-state="focused"] .fox-input__clear {
284		- display: inline-flex;
285	149	}

...	...	@@ -29,28 +29,23 @@
29	29	// 상태는 FoxInput과 같은 두 갈래다(자동 / `data-state` 고정). combine 상자에만 규칙이
30	30	// 필요하다 — unit은 조각이 알아서 따라온다.
31	31	//
	32	+// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다.
	33	+//
32	34	// 시안에 크기 축이 없다. 상자는 md 하나뿐이다.
33	35	//
34	36	// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
35	37	// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
36	38	// export하지 않는다.
37		-// - box-sizing / flex / text-align: 구조 규칙.
	39	+// - flex / text-align: 구조 규칙.
38	40
39	41	@use "abstracts" as fox;
	42	+@use "form-field" as field;
40	43
41	44	.fox-phone-number {
42		- display: flex;
43		- flex-direction: column;
44		- gap: fox.gap(3);
45		- inline-size: 100%;
	45	+ @include field.root;
46	46
47	47	&__label {
48		- color: fox.color(font-neutral-default);
49		- font-family: fox.font-family(body);
50		- font-size: fox.font-size(label-md);
51		- font-weight: fox.font-weight(medium);
52		- line-height: 1;
53		- letter-spacing: -0.025em;
	48	+ @include field.label;
54	49	}
55	50
56	51	// ── unit ──────────────────────────────────────────────────────────────────
...	...	@@ -79,156 +74,32 @@
79	74
80	75	// ── combine ───────────────────────────────────────────────────────────────
81	76	&__box {
82		- box-sizing: border-box;
83		- display: flex;
84		- align-items: center;
85		- gap: fox.gap(2);
86		- inline-size: 100%;
87		- block-size: fox.form(height-md);
88		- padding-inline: fox.form(padding-md);
89		- border: fox.border(1) solid fox.color(input-border);
90		- border-radius: fox.form(radius-md);
91		- background: fox.color(input-surface);
	77	+ @include field.box($gap: 2);
	78	+ @include field.box-size(md);
92	79	}
93	80
94	81	&__segment {
95		- flex: 1 0 0;
96		- min-inline-size: 0;
97		- margin: 0;
98		- padding: 0;
99		- border: none;
100		- background: none;
101		- color: fox.color(font-neutral-default);
102		- font-family: fox.font-family(body);
103		- font-size: fox.font-size(label-md);
104		- font-weight: fox.font-weight(regular);
105		- line-height: 1;
106		- letter-spacing: -0.025em;
107	82	text-align: center;
108	83
109		- &::placeholder {
110		- color: fox.color(font-neutral-subtler);
111		- }
112		-
113		- // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
114		- &:focus {
115		- outline: none;
116		- }
117		-
118		- &:disabled {
119		- color: fox.color(font-neutral-disabled-strong);
120		- cursor: default;
121		- }
	84	+ @include field.field($font-size: label-md);
122	85	}
123	86
124	87	&__message {
125		- display: flex;
126		- gap: fox.number(3);
127		- align-items: flex-start;
128		- margin: 0;
129		- color: fox.color(font-neutral-subtle);
130		- font-family: fox.font-family(body);
131		- font-size: fox.font-size(body-sm);
132		- font-weight: fox.font-weight(regular);
133		- line-height: 1.5;
134		- letter-spacing: -0.025em;
	88	+ @include field.message;
135	89	}
136	90
137	91	&__message-icon {
138		- display: inline-flex;
139		- flex-shrink: 0;
140		- align-items: flex-start;
141		- padding-block-start: fox.padding(1);
142		-
143		- > * {
144		- inline-size: fox.icon(3);
145		- block-size: fox.icon(3);
146		- }
	92	+ @include field.message-icon;
147	93	}
148	94	}
149	95
150		-// ── 상태 · 자동 (combine 상자) ──────────────────────────────────────────────
151		-// 뒤에 오는 규칙이 이긴다: 포커스 < 오류 < 읽기전용 < 비활성.
152		-.fox-phone-number:not([data-state]) {
153		- .fox-phone-number__box:focus-within {
154		- border-width: fox.border(2);
155		- border-color: fox.color(input-border-active);
156		- }
	96	+// unit 모양은 조각(FoxSelect·FoxInput)이 제 상태를 갖고 있어 combine 상자에만 규칙이
	97	+// 필요하다. 다만 헬퍼 색은 두 모양 모두 물들어야 하므로 오류 표시를 넓게 본다 — unit에는
	98	+// `__segment`가 없다.
	99	+@include field.auto-states(
	100	+ "fox-phone-number",
	101	+ $field: "segment",
	102	+ $invalid-within: "[aria-invalid=\"true\"]"
	103	+);
157	104
158		- .fox-phone-number__box:has(.fox-phone-number__segment[aria-invalid="true"]) {
159		- border-width: fox.border(2);
160		- border-color: fox.color(input-border-error);
161		- }
162		-
163		- // 비활성도 `:read-only`에 걸리므로 떼어낸다.
164		- .fox-phone-number__box:has(.fox-phone-number__segment:read-only:not(:disabled)) {
165		- border-width: fox.border(1);
166		- border-color: fox.color(input-border-disabled);
167		- background: fox.color(input-surface-disabled);
168		- }
169		-
170		- .fox-phone-number__box:has(.fox-phone-number__segment:disabled) {
171		- border-width: fox.border(1);
172		- border-color: fox.color(input-border-disabled);
173		- background: fox.color(input-surface-disabled);
174		- }
175		-
176		- &:focus-within .fox-phone-number__message {
177		- color: fox.color(font-system-information);
178		- }
179		-
180		- &:has([aria-invalid="true"]) .fox-phone-number__message {
181		- color: fox.color(font-system-danger);
182		- }
183		-}
184		-
185		-// ── 상태 · 고정 ─────────────────────────────────────────────────────────────
186		-.fox-phone-number[data-state="default"] .fox-phone-number__box,
187		-.fox-phone-number[data-state="completed"] .fox-phone-number__box {
188		- border-width: fox.border(1);
189		- border-color: fox.color(input-border);
190		- background: fox.color(input-surface);
191		-}
192		-
193		-.fox-phone-number[data-state="focused"] .fox-phone-number__box {
194		- border-width: fox.border(2);
195		- border-color: fox.color(input-border-active);
196		- background: fox.color(input-surface);
197		-}
198		-
199		-.fox-phone-number[data-state="error"] .fox-phone-number__box {
200		- border-width: fox.border(2);
201		- border-color: fox.color(input-border-error);
202		- background: fox.color(input-surface);
203		-}
204		-
205		-.fox-phone-number[data-state="view"] .fox-phone-number__box,
206		-.fox-phone-number[data-state="disabled"] .fox-phone-number__box {
207		- border-width: fox.border(1);
208		- border-color: fox.color(input-border-disabled);
209		- background: fox.color(input-surface-disabled);
210		-}
211		-
212		-.fox-phone-number[data-state="completed"] .fox-phone-number__segment::placeholder,
213		-.fox-phone-number[data-state="focused"] .fox-phone-number__segment::placeholder,
214		-.fox-phone-number[data-state="error"] .fox-phone-number__segment::placeholder,
215		-.fox-phone-number[data-state="view"] .fox-phone-number__segment::placeholder {
216		- color: fox.color(font-neutral-default);
217		-}
218		-
219		-.fox-phone-number[data-state="disabled"] .fox-phone-number__segment,
220		-.fox-phone-number[data-state="disabled"] .fox-phone-number__segment::placeholder {
221		- color: fox.color(font-neutral-disabled-strong);
222		-}
223		-
224		-.fox-phone-number[data-state="focused"] .fox-phone-number__message {
225		- color: fox.color(font-system-information);
226		-}
227		-
228		-.fox-phone-number[data-state="completed"] .fox-phone-number__message {
229		- color: fox.color(font-system-success);
230		-}
231		-
232		-.fox-phone-number[data-state="error"] .fox-phone-number__message {
233		- color: fox.color(font-system-danger);
234		-}
	105	+@include field.fixed-states("fox-phone-number", $field: "segment");

...	...	@@ -21,71 +21,40 @@
21	21	// 플레이스홀더와 입력값의 네이티브 차이라 규칙이 필요 없다.
22	22	// - 고정: 루트에 `data-state`를 주면 그 모양으로 못박힌다.
23	23	//
	24	+// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다. 이 파일에는
	25	+// FoxTextArea만의 것(여러 줄 여백, 카운터)이 남는다.
	26	+//
24	27	// 시안에 크기 축이 없다 — 상자 하나뿐이고 높이는 줄 수가 정한다(시안은 5줄).
25	28	//
26	29	// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
27		-// - line-height(본문·헬퍼 1.5, 라벨·카운터 1) / letter-spacing: 시안 텍스트 스타일의
28		-// 값이나 Figma가 변수로 export하지 않는다.
29		-// - box-sizing / resize / flex 관련: 구조·상호작용 규칙. 시안에 리사이즈 핸들이 없어
30		-// 막아 둔다 — 높이가 필요하면 `rows`로 정한다.
	30	+// - line-height(카운터 1) / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
	31	+// export하지 않는다.
	32	+// - resize / flex 관련: 구조·상호작용 규칙. 시안에 리사이즈 핸들이 없어 막아 둔다 —
	33	+// 높이가 필요하면 `rows`로 정한다.
31	34
32	35	@use "abstracts" as fox;
	36	+@use "form-field" as field;
33	37
34	38	.fox-text-area {
35		- display: flex;
36		- flex-direction: column;
37		- gap: fox.gap(3);
38		- inline-size: 100%;
	39	+ @include field.root;
39	40
40	41	&__label {
41		- color: fox.color(font-neutral-default);
42		- font-family: fox.font-family(body);
43		- font-size: fox.font-size(label-md);
44		- font-weight: fox.font-weight(medium);
45		- line-height: 1;
46		- letter-spacing: -0.025em;
	42	+ @include field.label;
47	43	}
48	44
	45	+ // 여러 줄이라 세로 가운데 정렬을 끄고, 크기 축이 없어 md 여백을 직접 준다.
49	46	&__box {
50		- box-sizing: border-box;
51		- display: flex;
52		- gap: fox.gap(3);
53		- inline-size: 100%;
	47	+ @include field.box($align: null);
	48	+
54	49	padding-inline: fox.form(padding-md);
55	50	padding-block: fox.padding(5);
56		- border: fox.border(1) solid fox.color(input-border);
57	51	border-radius: fox.form(radius-lg);
58		- background: fox.color(input-surface);
59	52	}
60	53
61	54	&__field {
62		- flex: 1 0 0;
63		- min-inline-size: 0;
64		- margin: 0;
65		- padding: 0;
66		- border: none;
67		- background: none;
68	55	resize: none;
69		- color: fox.color(font-neutral-default);
70		- font-family: fox.font-family(body);
71		- font-size: fox.font-size(body-md);
72		- font-weight: fox.font-weight(regular);
73		- line-height: 1.5;
74		- letter-spacing: -0.025em;
75	56
76		- &::placeholder {
77		- color: fox.color(font-neutral-subtler);
78		- }
79		-
80		- // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다.
81		- &:focus {
82		- outline: none;
83		- }
84		-
85		- &:disabled {
86		- color: fox.color(font-neutral-disabled-strong);
87		- cursor: default;
88		- }
	57	+ @include field.field($font-size: body-md, $line-height: 1.5);
89	58	}
90	59
91	60	// 헬퍼는 왼쪽에서 남는 폭을 먹고 카운터는 오른쪽에 붙는다.
...	...	@@ -97,31 +66,16 @@
97	66	inline-size: 100%;
98	67	}
99	68
	69	+ // 카운터와 한 줄에 서므로 남는 폭을 먹는다.
100	70	&__message {
101		- display: flex;
	71	+ @include field.message;
	72	+
102	73	flex: 1 0 0;
103		- gap: fox.number(3);
104		- align-items: flex-start;
105	74	min-inline-size: 0;
106		- margin: 0;
107		- color: fox.color(font-neutral-subtle);
108		- font-family: fox.font-family(body);
109		- font-size: fox.font-size(body-sm);
110		- font-weight: fox.font-weight(regular);
111		- line-height: 1.5;
112		- letter-spacing: -0.025em;
113	75	}
114	76
115	77	&__message-icon {
116		- display: inline-flex;
117		- flex-shrink: 0;
118		- align-items: flex-start;
119		- padding-block-start: fox.padding(1);
120		-
121		- > * {
122		- inline-size: fox.icon(3);
123		- block-size: fox.icon(3);
124		- }
	78	+ @include field.message-icon;
125	79	}
126	80
127	81	&__counter {
...	...	@@ -143,98 +97,15 @@
143	97	}
144	98	}
145	99
146		-// ── 상태 · 자동 ─────────────────────────────────────────────────────────────
147		-// 뒤에 오는 규칙이 이긴다: 포커스 < 오류 < 읽기전용 < 비활성.
148		-.fox-text-area:not([data-state]) {
149		- .fox-text-area__box:focus-within {
150		- border-width: fox.border(2);
151		- border-color: fox.color(input-border-active);
152		- }
153		-
154		- .fox-text-area__box:has(.fox-text-area__field[aria-invalid="true"]) {
155		- border-width: fox.border(2);
156		- border-color: fox.color(input-border-error);
157		- }
158		-
159		- // 비활성도 `:read-only`에 걸리므로 떼어낸다.
160		- .fox-text-area__box:has(.fox-text-area__field:read-only:not(:disabled)) {
161		- border-width: fox.border(1);
162		- border-color: fox.color(input-border-disabled);
163		- background: fox.color(input-surface-disabled);
164		- }
165		-
166		- .fox-text-area__box:has(.fox-text-area__field:disabled) {
167		- border-width: fox.border(1);
168		- border-color: fox.color(input-border-disabled);
169		- background: fox.color(input-surface-disabled);
170		- }
171		-
172		- &:focus-within .fox-text-area__message {
173		- color: fox.color(font-system-information);
174		- }
175		-
176		- &:has(.fox-text-area__field[aria-invalid="true"]) .fox-text-area__message {
177		- color: fox.color(font-system-danger);
178		- }
179		-
	100	+@include field.auto-states("fox-text-area") {
180	101	// 시안의 오류 변형에서만 카운터 현재값이 빨갛다.
181	102	&:has(.fox-text-area__field[aria-invalid="true"]) .fox-text-area__counter-current {
182	103	color: fox.color(font-system-danger);
183	104	}
184	105	}
185	106
186		-// ── 상태 · 고정 ─────────────────────────────────────────────────────────────
187		-// 시안의 focused·completed·error·view는 값이 들어찬 모습이라 플레이스홀더도 진하게 둔다.
188		-.fox-text-area[data-state="default"] .fox-text-area__box,
189		-.fox-text-area[data-state="completed"] .fox-text-area__box {
190		- border-width: fox.border(1);
191		- border-color: fox.color(input-border);
192		- background: fox.color(input-surface);
193		-}
194		-
195		-.fox-text-area[data-state="focused"] .fox-text-area__box {
196		- border-width: fox.border(2);
197		- border-color: fox.color(input-border-active);
198		- background: fox.color(input-surface);
199		-}
200		-
201		-.fox-text-area[data-state="error"] .fox-text-area__box {
202		- border-width: fox.border(2);
203		- border-color: fox.color(input-border-error);
204		- background: fox.color(input-surface);
205		-}
206		-
207		-.fox-text-area[data-state="view"] .fox-text-area__box,
208		-.fox-text-area[data-state="disabled"] .fox-text-area__box {
209		- border-width: fox.border(1);
210		- border-color: fox.color(input-border-disabled);
211		- background: fox.color(input-surface-disabled);
212		-}
213		-
214		-.fox-text-area[data-state="completed"] .fox-text-area__field::placeholder,
215		-.fox-text-area[data-state="focused"] .fox-text-area__field::placeholder,
216		-.fox-text-area[data-state="error"] .fox-text-area__field::placeholder,
217		-.fox-text-area[data-state="view"] .fox-text-area__field::placeholder {
218		- color: fox.color(font-neutral-default);
219		-}
220		-
221		-.fox-text-area[data-state="disabled"] .fox-text-area__field,
222		-.fox-text-area[data-state="disabled"] .fox-text-area__field::placeholder {
223		- color: fox.color(font-neutral-disabled-strong);
224		-}
225		-
226		-.fox-text-area[data-state="focused"] .fox-text-area__message {
227		- color: fox.color(font-system-information);
228		-}
229		-
230		-.fox-text-area[data-state="completed"] .fox-text-area__message {
231		- color: fox.color(font-system-success);
232		-}
233		-
234		-.fox-text-area[data-state="error"] .fox-text-area__message {
235		- color: fox.color(font-system-danger);
236		-}
237		-
238		-.fox-text-area[data-state="error"] .fox-text-area__counter-current {
239		- color: fox.color(font-system-danger);
	107	+@include field.fixed-states("fox-text-area") {
	108	+ .fox-text-area[data-state="error"] .fox-text-area__counter-current {
	109	+ color: fox.color(font-system-danger);
	110	+ }
240	111	}

Delete comment