nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-18
fix: 자동완성 배경 처리를 @fox 폼 필드 공통으로 올림 
로그인 카드 안에만 두었던 `:autofill` 우회를 `_form-field.scss`의 `field` 믹스인으로 옮긴다.
자동완성이 칠하는 배경은 특정 화면 문제가 아니라 텍스트 입력 전부에 해당한다.

- `_autofilled` 믹스인 신설. 배경은 `background`로 덮이지 않아 안쪽을 가득 채우는 inset
  그림자로 가리고, 글자색은 `color`가 먹지 않아 `-webkit-text-fill-color`로 맞춘다.
- 처음엔 표준(`:autofill`)과 접두사(`:-webkit-autofill`)를 따로 적었으나, Lightning CSS가
  browserslist 타깃을 보고 접두사를 표준형으로 합쳐 같은 규칙이 두 번 나오기만 했다
  (컴파일 결과 8건 → 정리 후 4건). 표준 하나만 남겼다.

적용 범위 — 자체 ``을 가진 fox-input · fox-text-area · fox-certified ·
fox-phone-number 넷에 직접 붙고, fox-email · fox-address · fox-file-upload는 내부에서
fox-input을 조립하므로 `.fox-input__field` 규칙으로 함께 덮인다. 즉 @fox의 모든 텍스트
입력이 커버된다.

Co-Authored-By: Claude Opus 5
@6f38284d761d8d032b9b7d3d4fffb8262bdaf124
1d51286
6f38284
@fox/styles/_form-field.scss
--- @fox/styles/_form-field.scss
+++ @fox/styles/_form-field.scss
@@ -78,6 +78,17 @@
 
 ///
 
 /// 뒤에 중첩 규칙이 붙으므로 부르는 쪽이 선언을 더할 때는 `@include`보다 앞에 적는다 —
 
 /// 뒤에 적으면 Sass가 같은 선택자를 한 번 더 낸다.
 
+/// 자동완성이 칠한 배경·글자색을 디자인 값으로 되돌린다.
 
+///
 
+/// 브라우저는 자동완성한 칸에 자기 배경을 칠하는데 `background`로는 덮이지 않는다. 안쪽을
 
+/// 가득 채우는 `inset` 그림자로 가리는 것이 표준 우회다. 글자색도 `color`가 먹지 않아
 
+/// `-webkit-text-fill-color`로만 바꿀 수 있다.
 
+@mixin _autofilled {
 
+  box-shadow: inset 0 0 0 100rem fox.color(input-surface);
 
+  -webkit-text-fill-color: fox.color(font-neutral-default);
 
+  caret-color: fox.color(font-neutral-default);
 
+}
 
+
 
 @mixin field($font-size: null, $line-height: 1) {
 
   flex: 1 0 0;
 
   min-inline-size: 0;
@@ -109,6 +120,12 @@
 
     color: fox.color(font-neutral-disabled-strong);
 
     cursor: default;
 
   }
 
+
 
+  // 표준 `:autofill`만 쓴다 — 접두사(`:-webkit-autofill`)를 함께 적어도 Lightning CSS가
 
+  // browserslist 타깃을 보고 표준형으로 합쳐 버려서 같은 규칙이 두 번 나올 뿐이다.
 
+  &:autofill {
 
+    @include _autofilled;
 
+  }
 
 }
 
 
 /// 상태 · 자동. 브라우저가 판단한다 — 포커스는 `:focus-within`, 비활성·읽기전용은
1d51286
6f38284
app/(public)/login/login.module.scss
--- app/(public)/login/login.module.scss
+++ app/(public)/login/login.module.scss
@@ -87,19 +87,6 @@
 
   block-size: 100%;
 
 }
 
 
-// 브라우저 자동완성이 채운 칸은 Chrome이 자기 배경(연한 파랑)을 칠한다 — 일반 CSS로는 못
 
-// 덮어서 `inset` 그림자로 가리는 것이 표준 우회다. 글자색은 `-webkit-text-fill-color`로만
 
-// 바꿀 수 있다. 전환을 길게 잡는 편법 대신 그림자를 쓰므로 애니메이션이 필요 없다.
 
-//
 
-// @fox에도 앱 어디에도 이 처리가 없어 모든 FoxInput이 같은 상태다 — 여기서는 로그인 카드
 
-// 안으로 범위를 좁혀 두었다. 디자인시스템에 올릴지는 별도 판단이 필요하다.
 
-.card :global(.fox-input__field):autofill,
 
-.card :global(.fox-input__field):-webkit-autofill {
 
-  box-shadow: inset 0 0 0 100rem fox.color(input-surface);
 
-  -webkit-text-fill-color: fox.color(font-neutral-default);
 
-  caret-color: fox.color(font-neutral-default);
 
-}
 
-
 
 .helper {
 
   inline-size: 100%;
 
   margin: 0;
Add a comment
List