@xfilecom/xframe 0.1.26 → 0.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/defaults.json
CHANGED
package/package.json
CHANGED
|
@@ -9,38 +9,78 @@
|
|
|
9
9
|
*
|
|
10
10
|
* :root 의 --xfc-* 는 어느 시점에 두어도 var() 해석 시 최종 값이 쓰이고,
|
|
11
11
|
* 아래 .xfc-btn 규칙은 base.css 다음에 로드되어야 덮어쓰기가 됩니다.
|
|
12
|
+
*
|
|
13
|
+
* ---------------------------------------------------------------------------
|
|
14
|
+
* @xfilecom/front-core 참조 인덱스 (여기서 덮어쓸 대상을 빠르게 찾기)
|
|
15
|
+
* 원본: 패키지 src/tokens.css · src/base.css · src/index.ts
|
|
16
|
+
* (패키지 메이저 시 목록이 달라질 수 있음 — 필요하면 소스 파일을 직접 확인)
|
|
17
|
+
* ---------------------------------------------------------------------------
|
|
18
|
+
*
|
|
19
|
+
* :root {
|
|
20
|
+
* --xfc-accent: #0d9488;
|
|
21
|
+
* --xfc-accent-hover: #0f766e;
|
|
22
|
+
* --xfc-accent-fg: #ffffff;
|
|
23
|
+
* --xfc-bg-muted: #f0fdfa;
|
|
24
|
+
* --xfc-radius-xs: 10px;
|
|
25
|
+
* --xfc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--xfc-accent) 30%, transparent);
|
|
26
|
+
*
|
|
27
|
+
* --xfc-space-lg: 18px;
|
|
28
|
+
* --xfc-space-xl: 26px;
|
|
29
|
+
* }
|
|
30
|
+
*
|
|
31
|
+
* [tokens.css — :root 변수]
|
|
32
|
+
* Surfaces: --xfc-bg, --xfc-bg-elevated, --xfc-bg-muted, --xfc-bg-disabled
|
|
33
|
+
* Text: --xfc-fg, --xfc-fg-strong, --xfc-fg-label, --xfc-fg-muted,
|
|
34
|
+
* --xfc-fg-placeholder, --xfc-fg-icon
|
|
35
|
+
* Lines: --xfc-border, --xfc-border-strong, --xfc-border-header
|
|
36
|
+
* Brand: --xfc-accent, --xfc-accent-hover, --xfc-accent-fg
|
|
37
|
+
* Status: --xfc-danger, --xfc-success, --xfc-success-bg, --xfc-warning, --xfc-warning-bg
|
|
38
|
+
* Toast: --xfc-toast-info-bg, --xfc-toast-success-bg, --xfc-toast-warn-bg,
|
|
39
|
+
* --xfc-toast-error-bg, --xfc-toast-shadow, --xfc-toast-radius
|
|
40
|
+
* Effects: --xfc-input-shadow, --xfc-card-shadow
|
|
41
|
+
* Radius: --xfc-radius-xs|sm|md|lg|full
|
|
42
|
+
* Space: --xfc-space-xs|sm|md|lg|xl|2xl
|
|
43
|
+
* Type: --xfc-font-sans, --xfc-font-mono, --xfc-text-display|appbar|section|body|small|input,
|
|
44
|
+
* --xfc-leading-tight|normal|label|menu
|
|
45
|
+
* Focus: --xfc-focus-ring
|
|
46
|
+
*
|
|
47
|
+
* [base.css — 전역]
|
|
48
|
+
* *, body(폰트·배경·색), a / a:hover
|
|
49
|
+
*
|
|
50
|
+
* [base.css — Typography .xfc-text]
|
|
51
|
+
* 베이스 .xfc-text
|
|
52
|
+
* 변형: --title, --appbar, --section, --subtitle, --body, --small, --muted, --accent, --label-block
|
|
53
|
+
*
|
|
54
|
+
* [base.css — Layout]
|
|
55
|
+
* .xfc-stack + --column | --row | --gap-none|sm|md|lg | --align-start|center|stretch
|
|
56
|
+
* .xfc-box + --p-sm | --p-md | --p-lg
|
|
57
|
+
* .xfc-card
|
|
58
|
+
*
|
|
59
|
+
* [base.css — Button .xfc-btn]
|
|
60
|
+
* variant 클래스: --primary, --secondary, --outline, --muted, --ghost
|
|
61
|
+
* (React: Button variant prop 과 동일 이름)
|
|
62
|
+
*
|
|
63
|
+
* [base.css — Input]
|
|
64
|
+
* .xfc-input, ::placeholder, :focus, :disabled
|
|
65
|
+
*
|
|
66
|
+
* [base.css — Badge .xfc-badge]
|
|
67
|
+
* --neutral, --accent, --success, --danger
|
|
68
|
+
* (React: Badge tone prop)
|
|
69
|
+
*
|
|
70
|
+
* [base.css — LoadingOverlay]
|
|
71
|
+
* .xfc-loading-overlay, --spinner, --message (+ keyframes, reduced-motion)
|
|
72
|
+
*
|
|
73
|
+
* [base.css — Toast]
|
|
74
|
+
* .xfc-toast-list, .xfc-toast + --info|--success|--warn|--error
|
|
75
|
+
* .xfc-toast__icon, .xfc-toast__message, .xfc-toast-dismiss
|
|
76
|
+
*
|
|
77
|
+
* [base.css — Inline errors]
|
|
78
|
+
* .xfc-inline-error-list, .xfc-inline-error-item, .xfc-inline-error-dismiss
|
|
79
|
+
*
|
|
80
|
+
* [index.ts — export 목록]
|
|
81
|
+
* Badge, Box, Button, Card, InlineErrorList, Input, LoadingOverlay, Stack, Text,
|
|
82
|
+
* Toast, ToastList, ToastSeverityIcon (+ 각종 Props·ToastEntry 등 타입)
|
|
83
|
+
* 상수: XFRAME_FRONT_CORE_VERSION, tokenVars (위 --xfc-* 이름을 TS에서 참조할 때)
|
|
84
|
+
* 서브패스 import: @xfilecom/front-core/atoms
|
|
85
|
+
* ---------------------------------------------------------------------------
|
|
12
86
|
*/
|
|
13
|
-
|
|
14
|
-
:root {
|
|
15
|
-
--xfc-accent: #0d9488;
|
|
16
|
-
--xfc-accent-hover: #0f766e;
|
|
17
|
-
--xfc-accent-fg: #ffffff;
|
|
18
|
-
--xfc-bg-muted: #f0fdfa;
|
|
19
|
-
--xfc-radius-xs: 10px;
|
|
20
|
-
--xfc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--xfc-accent) 30%, transparent);
|
|
21
|
-
/* 버튼·인풋 등 padding 에 쓰이는 토큰 */
|
|
22
|
-
--xfc-space-lg: 18px;
|
|
23
|
-
--xfc-space-xl: 26px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* 스캐폴드 기본 예시 — primary 버튼 톤 (base.css 이후 로드 전제) */
|
|
27
|
-
.xfc-btn {
|
|
28
|
-
min-height: 44px;
|
|
29
|
-
font-weight: 800;
|
|
30
|
-
letter-spacing: 0.08em;
|
|
31
|
-
text-transform: uppercase;
|
|
32
|
-
font-size: 0.8125rem;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.xfc-btn--primary {
|
|
36
|
-
border: 2px solid color-mix(in srgb, var(--xfc-accent-fg) 35%, transparent);
|
|
37
|
-
box-shadow:
|
|
38
|
-
0 1px 0 color-mix(in srgb, #000 18%, transparent),
|
|
39
|
-
0 8px 24px color-mix(in srgb, var(--xfc-accent) 40%, transparent);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.xfc-btn--primary:hover:not(:disabled) {
|
|
43
|
-
box-shadow:
|
|
44
|
-
0 2px 0 color-mix(in srgb, #000 22%, transparent),
|
|
45
|
-
0 10px 28px color-mix(in srgb, var(--xfc-accent) 48%, transparent);
|
|
46
|
-
}
|