Skip to content

Commit 8ef91af

Browse files
SOIVclaude
SOIV
and
claude
committed
refactor(controls): CSS를 컴포넌트별 파일로 분리
controls.css 단일 파일을 17개 컴포넌트별 파일로 분리하고 index.css에서 @import로 통합. package.json exports 경로 업데이트. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 255f35b commit 8ef91af

20 files changed

Lines changed: 835 additions & 885 deletions

‎packages/controls/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"import": "./dist/index.js",
1111
"types": "./dist/index.d.ts"
1212
},
13-
"./styles": "./src/styles/controls.css"
13+
"./styles": "./src/styles/index.css"
1414
},
1515
"scripts": {
1616
"build": "tsc",

‎packages/controls/src/styles/alert.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.fs-alert {
2+
display: flex;
3+
align-items: flex-start;
4+
gap: 10px;
5+
padding: 12px 14px;
6+
border-radius: 10px;
7+
border: 1px solid;
8+
font-size: 13px;
9+
line-height: 1.5;
10+
}
11+
.fs-alert-icon {
12+
font-size: 15px;
13+
flex-shrink: 0;
14+
line-height: 1.4;
15+
}
16+
.fs-alert-body { flex: 1; }
17+
.fs-alert-title {
18+
font-weight: 700;
19+
margin: 0 0 2px;
20+
}
21+
.fs-alert-msg { margin: 0; }
22+
.fs-alert-close {
23+
background: none;
24+
border: none;
25+
cursor: pointer;
26+
color: inherit;
27+
opacity: 0.6;
28+
font-size: 14px;
29+
padding: 0;
30+
line-height: 1;
31+
flex-shrink: 0;
32+
}
33+
.fs-alert-close:hover { opacity: 1; }
34+
35+
.fs-alert-success {
36+
background: var(--ok-subtle);
37+
border-color: color-mix(in srgb, var(--ok) 25%, transparent);
38+
color: var(--ok);
39+
}
40+
.fs-alert-warning {
41+
background: var(--warn-subtle);
42+
border-color: color-mix(in srgb, var(--warn) 25%, transparent);
43+
color: var(--warn);
44+
}
45+
.fs-alert-error {
46+
background: var(--err-subtle);
47+
border-color: color-mix(in srgb, var(--err) 25%, transparent);
48+
color: var(--err);
49+
}
50+
.fs-alert-info {
51+
background: var(--info-subtle);
52+
border-color: color-mix(in srgb, var(--info) 25%, transparent);
53+
color: var(--info);
54+
}

‎packages/controls/src/styles/button.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.fs-btn {
2+
display: inline-flex;
3+
align-items: center;
4+
justify-content: center;
5+
gap: 6px;
6+
border: 1px solid var(--border);
7+
border-radius: 8px;
8+
padding: 8px 14px;
9+
font-size: 13px;
10+
font-weight: 600;
11+
font-family: inherit;
12+
line-height: 1;
13+
cursor: pointer;
14+
background: var(--bg-elevated);
15+
color: var(--text-muted);
16+
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
17+
white-space: nowrap;
18+
user-select: none;
19+
text-decoration: none;
20+
}
21+
.fs-btn:focus-visible {
22+
outline: none;
23+
box-shadow: 0 0 0 3px var(--focus-ring);
24+
}
25+
.fs-btn:hover:not(:disabled) {
26+
background: var(--bg-hover);
27+
color: var(--text);
28+
}
29+
.fs-btn:disabled {
30+
opacity: 0.45;
31+
cursor: not-allowed;
32+
}
33+
34+
/* Variants */
35+
.fs-btn-primary {
36+
background: var(--accent);
37+
color: #fff;
38+
border-color: transparent;
39+
}
40+
.fs-btn-primary:hover:not(:disabled) {
41+
background: var(--accent-hover);
42+
border-color: transparent;
43+
color: #fff;
44+
}
45+
.fs-btn-danger {
46+
background: var(--err-subtle);
47+
color: var(--err);
48+
border-color: color-mix(in srgb, var(--err) 20%, transparent);
49+
}
50+
.fs-btn-danger:hover:not(:disabled) {
51+
background: color-mix(in srgb, var(--err) 18%, transparent);
52+
}
53+
.fs-btn-ghost {
54+
background: transparent;
55+
border-color: transparent;
56+
color: var(--text-muted);
57+
}
58+
.fs-btn-ghost:hover:not(:disabled) {
59+
background: var(--bg-hover);
60+
color: var(--text);
61+
border-color: transparent;
62+
}
63+
64+
/* Sizes */
65+
.fs-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
66+
.fs-btn-lg { padding: 11px 20px; font-size: 15px; border-radius: 10px; }
67+
68+
/* Modifiers */
69+
.fs-btn-block { width: 100%; }
70+
.fs-btn-loading { pointer-events: none; opacity: 0.75; }
71+
72+
/* Loading spinner inside button */
73+
.fs-btn-spinner {
74+
width: 12px;
75+
height: 12px;
76+
border: 2px solid currentColor;
77+
border-top-color: transparent;
78+
border-radius: 50%;
79+
animation: fs-spin 0.6s linear infinite;
80+
flex-shrink: 0;
81+
}

‎packages/controls/src/styles/checkbox.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.fs-checkbox-wrap {
2+
display: inline-flex;
3+
align-items: center;
4+
gap: 8px;
5+
cursor: pointer;
6+
user-select: none;
7+
}
8+
.fs-checkbox-wrap input {
9+
appearance: none;
10+
width: 16px;
11+
height: 16px;
12+
border: 1.5px solid var(--border);
13+
border-radius: 4px;
14+
background: var(--bg-elevated);
15+
transition: border-color 120ms ease, background 120ms ease;
16+
flex-shrink: 0;
17+
cursor: pointer;
18+
position: relative;
19+
}
20+
.fs-checkbox-wrap input:focus-visible {
21+
outline: none;
22+
box-shadow: 0 0 0 3px var(--focus-ring);
23+
}
24+
.fs-checkbox-wrap input:checked,
25+
.fs-checkbox-wrap input:indeterminate {
26+
background: var(--accent);
27+
border-color: var(--accent);
28+
}
29+
.fs-checkbox-wrap input:checked::after {
30+
content: "";
31+
position: absolute;
32+
left: 4px;
33+
top: 1px;
34+
width: 5px;
35+
height: 9px;
36+
border: 2px solid #fff;
37+
border-top: none;
38+
border-left: none;
39+
transform: rotate(45deg);
40+
}
41+
.fs-checkbox-wrap input:indeterminate::after {
42+
content: "";
43+
position: absolute;
44+
left: 3px;
45+
top: 6px;
46+
width: 8px;
47+
height: 2px;
48+
background: #fff;
49+
border-radius: 1px;
50+
}
51+
.fs-checkbox-wrap input:disabled {
52+
opacity: 0.45;
53+
cursor: not-allowed;
54+
}
55+
.fs-checkbox-label {
56+
font-size: 14px;
57+
color: var(--text);
58+
}
59+
.fs-checkbox-group {
60+
display: grid;
61+
gap: 8px;
62+
}

0 commit comments

Comments
 (0)