Commit @5977e695bd111551a06448c26e854d2652662f11

임동욱 08-18

fix: 1단계 마커가 그 안의 2·3단계까지 덮어쓰던 문제

2단계 줄에 `-`와 점이 함께 나왔다. 항목이 항목을 품는 구조인데 단계별 규칙을 후손
선택자로 적어, `.--lv1 .__marker`가 그 안에 중첩된 2·3단계 마커에도 걸렸다.

단계별 규칙을 자식 결합자로 바꿔 자기 줄만 고르게 했다.
`.--lv1 > .__row > .__marker`

카탈로그의 34개 항목을 전부 훑어 글자와 도형이 함께 있는 줄이 없음을 확인했고,
여섯 조합이 시안대로 하나씩만 나온다 — 점 6px / `-` / 빈 원 4px / `1.` / `a.` / `①`.
시안 대조 20항목도 그대로 통과한다.

Co-Authored-By: Claude Opus 5

@5977e695bd111551a06448c26e854d2652662f11

b65f1b3

5977e69

@fox/styles/_fox-bullet-list-item.scss

--- @fox/styles/_fox-bullet-list-item.scss

+++ @fox/styles/_fox-bullet-list-item.scss

...	...	@@ -13,6 +13,9 @@
13	13	// 시안의 bullet은 따로 두지 않았다 — 마커가 목록 밖에서 홀로 쓰이는 자리가 없고, 크기와
14	14	// 모양이 전부 단계·번호 여부로 갈리기 때문이다. 그 두 축이 여기 수식어로 들어와 있다.
15	15	//
	16	+// ⚠️ 단계별 규칙은 반드시 자식 결합자(`>`)로 자기 줄만 고른다. 항목이 항목을 품는 구조라
	17	+// 후손 선택자를 쓰면 1단계 규칙이 그 안의 2·3단계 마커까지 덮어쓴다.
	18	+//
16	19	// 마커는 폭이 고정이고 글만 남는 폭을 먹는다. 그래서 글이 길어져도 마커 오른쪽에서만
17	20	// 접히고 마커 아래로 흘러내리지 않는다.
18	21	//
...	...	@@ -75,26 +78,21 @@
75	78	}
76	79
77	80	// ── 기호 마커 ─────────────────────────────────────────────────────────────
78		- // 1·3단계는 시안에서 도형이라 가상 요소로 그린다. 2단계는 글자 `-`라 React가 넣는다.
79		- &--unordered.fox-bullet-list-item--lv1 &__marker::before,
80		- &--unordered.fox-bullet-list-item--lv3 &__marker::before {
	81	+ // 1단계 채운 원과 3단계 빈 원은 시안에서 도형이라 가상 요소로 그린다.
	82	+ &--unordered#{&}--lv1 > #{&}__row > #{&}__marker::before,
	83	+ &--unordered#{&}--lv3 > #{&}__row > #{&}__marker::before {
81	84	content: "";
82	85	display: block;
83	86	background: fox.color(element-neutral-default);
84	87	}
85	88
86		- &--unordered.fox-bullet-list-item--lv2 &__marker {
87		- font-size: fox.font-size(body-md);
88		- letter-spacing: -0.025em;
89		- }
90		-
91		- &--unordered.fox-bullet-list-item--lv1 &__marker::before {
	89	+ &--unordered#{&}--lv1 > #{&}__row > #{&}__marker::before {
92	90	inline-size: 0.6rem;
93	91	block-size: 0.6rem;
94	92	border-radius: fox.radius(max);
95	93	}
96	94
97		- &--unordered.fox-bullet-list-item--lv3 &__marker::before {
	95	+ &--unordered#{&}--lv3 > #{&}__row > #{&}__marker::before {
98	96	box-sizing: border-box;
99	97	inline-size: 0.4rem;
100	98	block-size: 0.4rem;
...	...	@@ -103,38 +101,39 @@
103	101	background: none;
104	102	}
105	103
106		- // ── 번호 마커 ─────────────────────────────────────────────────────────────
107		- &--ordered.fox-bullet-list-item--lv1 &__marker {
	104	+ // 2단계 `-`와 번호는 시안에서 글자라 크기만 정한다.
	105	+ &--unordered#{&}--lv2 > #{&}__row > #{&}__marker,
	106	+ &--ordered#{&}--lv1 > #{&}__row > #{&}__marker {
108	107	font-size: fox.font-size(body-md);
109	108	letter-spacing: -0.025em;
110	109	}
111	110
112		- &--ordered.fox-bullet-list-item--lv2 &__marker {
	111	+ &--ordered#{&}--lv2 > #{&}__row > #{&}__marker {
113	112	font-size: fox.font-size(body-sm);
114	113	letter-spacing: -0.025em;
115	114	}
116	115
117		- &--ordered.fox-bullet-list-item--lv3 &__marker {
	116	+ &--ordered#{&}--lv3 > #{&}__row > #{&}__marker {
118	117	font-size: fox.font-size(body-xsm);
119	118	letter-spacing: -0.025em;
120	119	}
121	120
122	121	// ── 3단계 ─────────────────────────────────────────────────────────────────
123	122	// 마커 칸이 한 단계 좁아지고 왼쪽으로 조금 밀려 있다.
124		- &--lv3 &__marker {
	123	+ &--lv3 > #{&}__row > #{&}__marker {
125	124	block-size: 2.3rem;
126	125	padding-inline-start: fox.padding(2);
127	126	}
128	127
129		- &--unordered.fox-bullet-list-item--lv3 &__marker {
	128	+ &--unordered#{&}--lv3 > #{&}__row > #{&}__marker {
130	129	inline-size: 1.6rem;
131	130	}
132	131
133		- &--ordered.fox-bullet-list-item--lv3 &__marker {
	132	+ &--ordered#{&}--lv3 > #{&}__row > #{&}__marker {
134	133	inline-size: 2.4rem;
135	134	}
136	135
137		- &--lv3 &__text {
	136	+ &--lv3 > #{&}__row > #{&}__text {
138	137	font-size: fox.font-size(body-sm);
139	138	}
140	139	}

Add a comment

Open 0
Closed 0

List

Delete comment