@bstage-sdk/design 0.1.0

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.
Files changed (17) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +57 -0
  3. package/css/admin.css +149 -0
  4. package/css/user.css +381 -0
  5. package/dist/admin/index.cjs +790 -0
  6. package/dist/admin/index.d.cts +642 -0
  7. package/dist/admin/index.d.ts +642 -0
  8. package/dist/admin/index.js +753 -0
  9. package/dist/index.cjs +18 -0
  10. package/dist/index.d.cts +25 -0
  11. package/dist/index.d.ts +25 -0
  12. package/dist/index.js +0 -0
  13. package/dist/user/index.cjs +723 -0
  14. package/dist/user/index.d.cts +576 -0
  15. package/dist/user/index.d.ts +576 -0
  16. package/dist/user/index.js +686 -0
  17. package/package.json +76 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 bemyfriends Inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,57 @@
1
+ # @bstage-sdk/design
2
+
3
+ bstage 커스텀 템플릿을 bstage 디자인 시스템에 맞추기 위한 **디자인 토큰**을 제공한다.
4
+
5
+ - 토큰 **이름**만 제공한다(값은 복붙하지 않는다). 배포 시엔 플랫폼이 `:root`에 깔아둔 실제 값을 상속하고, 개발 중엔 이 패키지의 fallback CSS가 기본 bstage 톤을 보여준다.
6
+ - 토큰 이름은 **FE 원본(SSOT)에서 생성**되어 프로덕션과 항상 일치한다 (`--user-mode-*` / `--admin-mode-*`).
7
+
8
+ > 값 배선(`bstage dev` 주입·프로덕션 제외)과 디자인 가이드(`AGENTS.md`) 통합은 별도 문서에서 다룬다.
9
+
10
+ ## 타깃 선택 — 서브패스로 구분
11
+
12
+ 유저 / 어드민 중 대상에 맞는 서브패스를 import 한다.
13
+
14
+ ```ts
15
+ import { color, shadow, textStyle, cssVar } from '@bstage-sdk/design/user'
16
+ // 어드민: '@bstage-sdk/design/admin'
17
+ ```
18
+
19
+ ## 사용
20
+
21
+ ```tsx
22
+ import { color, textStyle } from '@bstage-sdk/design/user'
23
+
24
+ function ProfileCard() {
25
+ return (
26
+ <div style={{ background: color.surface.card, color: color.text.primary }}>
27
+ <h3 style={textStyle('16/title/semibold')}>이름</h3>
28
+ <p style={{ ...textStyle('14/body/reg'), color: color.text.secondary }}>소속</p>
29
+ </div>
30
+ )
31
+ }
32
+ ```
33
+
34
+ - **`color`** — 카테고리별 중첩. `color.text.secondary` → `'var(--user-mode-text-secondary)'`
35
+ - **`shadow`** — `shadow['default-large']` → `'var(--user-mode-shadow-default-large)'`
36
+ - **`cssVar(slug)`** — 타입 안전 접근. `cssVar('text/secondary')`
37
+ - **`textStyle(token)`** — 타이포그래피 인라인 스타일. user는 `'16/title/semibold'`, admin은 `'16/title/med'`
38
+ - **원자료**: `modeColors` / `flatColors` / `shadowTokens` / `typographyTokens` / `fontWeightMap` / `fontFamily`
39
+
40
+ 값은 `var(--...)` 참조라, 실제 색은 얹힌 환경의 `:root`가 결정한다(배포=플랫폼, 개발=fallback CSS).
41
+
42
+ ## CSS fallback
43
+
44
+ 개발/미리보기에서 bstage 톤을 보려면 fallback CSS를 호스트 `:root`에 깐다(자세한 자동 주입은 `bstage dev`):
45
+
46
+ ```css
47
+ @import '@bstage-sdk/design/css/user.css'; /* light + dark */
48
+ /* 어드민: '@bstage-sdk/design/css/admin.css' (light 전용) */
49
+ ```
50
+
51
+ 이 CSS는 `:root`-scoped **fallback** 이다(`:host` 하드 주입 없음). 프로덕션 번들에는 포함하지 않는다.
52
+
53
+ ## 토큰 갱신 (유지보수자용)
54
+
55
+ 토큰은 손으로 관리하지 않는다. b.stage 디자인 시스템 원본(SSOT)에서 생성해
56
+ `src/{user,admin}/tokens.generated.ts`로 커밋한다. 원본이 이 저장소에 없으므로 생성 자체는
57
+ 빌드에 포함하지 않고, 산출물만 두어 값이 프로덕션과 어긋나지 않게 한다.
package/css/admin.css ADDED
@@ -0,0 +1,149 @@
1
+ /* ================================================================
2
+ * bstage 디자인 토큰 — dev fallback (admin)
3
+ * @bstage-sdk/design 생성물. 개발/미리보기 전용(:root fallback).
4
+ * 배포 시엔 플랫폼 :root 값을 상속하며 이 파일은 번들되지 않는다.
5
+ * ================================================================ */
6
+
7
+ :root {
8
+ --admin-mode-bg-base: #ffffff;
9
+ --admin-mode-bg-bstage-admin: #f5f6f8;
10
+ --admin-mode-bg-elevated: #ffffff;
11
+ --admin-mode-bg-grouped-blue: #f5f8ff;
12
+ --admin-mode-bg-grouped-default: #ffffff;
13
+ --admin-mode-bg-grouped-strong: #f5f6f8;
14
+ --admin-mode-bg-grouped-strong-weak: #f9fafb;
15
+ --admin-mode-border-blue: #397af6;
16
+ --admin-mode-border-blue-weak-a: #397af61a;
17
+ --admin-mode-border-bstage: #343d46;
18
+ --admin-mode-border-bstage-strong: #1a1e23;
19
+ --admin-mode-border-bstage-weak: #71777e;
20
+ --admin-mode-border-default-a: #59667226;
21
+ --admin-mode-border-divider-a: #5966721a;
22
+ --admin-mode-border-divider-weak-a: #5966720d;
23
+ --admin-mode-border-eraser: #ffffff;
24
+ --admin-mode-border-green: #32b27c;
25
+ --admin-mode-border-green-weak-a: #32b27c1a;
26
+ --admin-mode-border-red: #f41616;
27
+ --admin-mode-border-red-weak-a: #f416161a;
28
+ --admin-mode-border-strong-a: #5966724d;
29
+ --admin-mode-border-stronger-a: #59667280;
30
+ --admin-mode-border-yellow: #f29900;
31
+ --admin-mode-border-yellow-weak-a: #ff99001a;
32
+ --admin-mode-bstagein-plan-essential: #fdaffd;
33
+ --admin-mode-bstagein-plan-plus: #151515;
34
+ --admin-mode-bstagein-plan-standard: #3067ec;
35
+ --admin-mode-chart-default: #595eff;
36
+ --admin-mode-chart-green: #11ce8c;
37
+ --admin-mode-chart-grey: #bdbdbd;
38
+ --admin-mode-chart-orange: #ff8057;
39
+ --admin-mode-chart-red: #ff505a;
40
+ --admin-mode-chart-sky: #54c1fb;
41
+ --admin-mode-chart-strong: #5055e6;
42
+ --admin-mode-chart-stronger: #2c30b0;
43
+ --admin-mode-chart-weak: #cdcfff;
44
+ --admin-mode-chart-yellow: #ffce50;
45
+ --admin-mode-icon-blue: #397af6;
46
+ --admin-mode-icon-green: #32b27c;
47
+ --admin-mode-icon-indigo: #5754f5;
48
+ --admin-mode-icon-primary: #3a424a;
49
+ --admin-mode-icon-red: #f41616;
50
+ --admin-mode-icon-secondary-a: #596672d9;
51
+ --admin-mode-icon-tertiary-a: #5966724d;
52
+ --admin-mode-icon-yellow: #f29900;
53
+ --admin-mode-overlay-dim-a: #00000080;
54
+ --admin-mode-overlay-dim-weak-a: #0000001a;
55
+ --admin-mode-overlay-hover-a: #0000001a;
56
+ --admin-mode-overlay-hover-blue-a: #397af61a;
57
+ --admin-mode-overlay-hover-blue-weak-a: #397af60d;
58
+ --admin-mode-overlay-hover-red-a: #f416161a;
59
+ --admin-mode-overlay-hover-weak-a: #3453700d;
60
+ --admin-mode-surface-avatar-default-a: #3453700d;
61
+ --admin-mode-surface-avatar-random-01: #fa8a8a;
62
+ --admin-mode-surface-avatar-random-02: #ffcc80;
63
+ --admin-mode-surface-avatar-random-03: #5bc196;
64
+ --admin-mode-surface-avatar-random-04: #4dbecd;
65
+ --admin-mode-surface-avatar-random-05: #7976f7;
66
+ --admin-mode-surface-avatar-random-06: #aba9fa;
67
+ --admin-mode-surface-avatar-random-07: #9c6beb;
68
+ --admin-mode-surface-display-blue: #397af6;
69
+ --admin-mode-surface-display-blue-weak-a: #397af61a;
70
+ --admin-mode-surface-display-blue-weakest-a: #397af608;
71
+ --admin-mode-surface-display-bstage: #343d46;
72
+ --admin-mode-surface-display-default: #ffffff;
73
+ --admin-mode-surface-display-green: #32b27c;
74
+ --admin-mode-surface-display-green-weak-a: #32b27c1a;
75
+ --admin-mode-surface-display-grey-a: #3453701a;
76
+ --admin-mode-surface-display-grey-weak-a: #3453700d;
77
+ --admin-mode-surface-display-red: #f41616;
78
+ --admin-mode-surface-display-red-weak-a: #f416161a;
79
+ --admin-mode-surface-display-toast: #0a1116;
80
+ --admin-mode-surface-display-tooltip: #596672;
81
+ --admin-mode-surface-display-yellow: #ff9900;
82
+ --admin-mode-surface-display-yellow-weak-a: #ff99001a;
83
+ --admin-mode-surface-form-base: #ffffff;
84
+ --admin-mode-surface-form-blue: #397af6;
85
+ --admin-mode-surface-form-blue-weak-a: #397af626;
86
+ --admin-mode-surface-form-bstage: #343d46;
87
+ --admin-mode-surface-form-bstage-strong: #1a1e23;
88
+ --admin-mode-surface-form-bstage-weak: #71777e;
89
+ --admin-mode-surface-form-default: #ebeef1;
90
+ --admin-mode-surface-form-default-a: #3453701a;
91
+ --admin-mode-surface-form-green-weak-a: #32b27c1a;
92
+ --admin-mode-surface-form-red: #f41616;
93
+ --admin-mode-surface-form-red-weak-a: #f4161626;
94
+ --admin-mode-surface-form-strong-a: #34537033;
95
+ --admin-mode-surface-form-toggle: #3453704d;
96
+ --admin-mode-surface-form-weak-a: #3453700d;
97
+ --admin-mode-surface-form-yellow-weak-a: #f299001a;
98
+ --admin-mode-text-blue: #397af6;
99
+ --admin-mode-text-green: #32b27c;
100
+ --admin-mode-text-indigo: #5754f5;
101
+ --admin-mode-text-primary: #2a2b2f;
102
+ --admin-mode-text-purple: #8346e7;
103
+ --admin-mode-text-red: #f41616;
104
+ --admin-mode-text-secondary: #676d72;
105
+ --admin-mode-text-sub-a: #596672b3;
106
+ --admin-mode-text-tertiary-a: #596672b3;
107
+ --admin-mode-text-yellow: #f29900;
108
+ --admin-mode-shadow-default-large: 0px 16px 36px -4px #1a1a1a33, 0px 0px 1px 0px #1a1a1a2e;
109
+ --admin-mode-shadow-default-medium: 0px 8px 32px -2px #1a1a1a29, 0px 0px 1px 0px #00000026;
110
+ --admin-mode-shadow-default-small: 0px 4px 8px -1px #1a1a1a1f, 0px 0px 1px 0px #1a1a1a1f;
111
+ --admin-mode-shadow-default-xsmall: 0px 1px 1px 0px #1a1a1a1a, 0px 0px 1px 0px #1a1a1a1a;
112
+
113
+ --admin-always-black005-a: #0000000d;
114
+ --admin-always-black010-a: #0000001a;
115
+ --admin-always-black030-a: #0000004d;
116
+ --admin-always-black050-a: #00000080;
117
+ --admin-always-black060-a: #00000099;
118
+ --admin-always-black100-a: #000000;
119
+ --admin-always-green100: #32b27c;
120
+ --admin-always-grey135: #243a4e;
121
+ --admin-always-indigo100: #5754f5;
122
+ --admin-always-overlay-hover-white010-a: #ffffff1a;
123
+ --admin-always-purple100: #8346e7;
124
+ --admin-always-red085: #f74444;
125
+ --admin-always-service-rankingpoll-thumb-a: #ffadddcc;
126
+ --admin-always-white010-a: #ffffff1a;
127
+ --admin-always-white015-a: #ffffff26;
128
+ --admin-always-white025-a: #ffffff40;
129
+ --admin-always-white050-a: #ffffff80;
130
+ --admin-always-white060-a: #ffffff99;
131
+ --admin-always-white070-a: #ffffffb3;
132
+ --admin-always-white080-a: #ffffffcc;
133
+ --admin-always-white100: #ffffff;
134
+ --admin-always-yellow100: #ff9900;
135
+ --admin-auto-border-divider-on-dark: #ffffff26;
136
+ --admin-auto-border-divider-on-light: #0000000f;
137
+ --admin-auto-icon-primary-on-dark: #ffffff;
138
+ --admin-auto-icon-primary-on-light: #00000099;
139
+ --admin-auto-icon-secondary-on-dark: #ffffff80;
140
+ --admin-auto-icon-secondary-on-light: #0000004d;
141
+ --admin-auto-overlay-hover-on-dark: #ffffff1a;
142
+ --admin-auto-overlay-hover-on-light: #0000001a;
143
+ --admin-auto-text-primary-on-dark: #ffffff;
144
+ --admin-auto-text-primary-on-light: #000000;
145
+ --admin-auto-text-secondary-on-dark: #ffffff80;
146
+ --admin-auto-text-secondary-on-light: #00000080;
147
+
148
+ --admin-font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
149
+ }
package/css/user.css ADDED
@@ -0,0 +1,381 @@
1
+ /* ================================================================
2
+ * bstage 디자인 토큰 — dev fallback (user)
3
+ * @bstage-sdk/design 생성물. 개발/미리보기 전용(:root fallback).
4
+ * 배포 시엔 플랫폼 :root 값을 상속하며 이 파일은 번들되지 않는다.
5
+ * ================================================================ */
6
+
7
+ :root {
8
+ --user-mode-bg-base: #ffffff;
9
+ --user-mode-bg-blue-grey: #eff1f7;
10
+ --user-mode-bg-elevated: #ffffff;
11
+ --user-mode-bg-grouped-strong: #f7f7f7;
12
+ --user-mode-bg-grouped-weak: #f7f7f7;
13
+ --user-mode-bg-grouped-weak-a: #0000000f;
14
+ --user-mode-bg-highlight: #e6e6e6;
15
+ --user-mode-bg-invert-weak-a: #ffffff26;
16
+ --user-mode-border-blue: #148aff;
17
+ --user-mode-border-blue-weak-a: #148aff4d;
18
+ --user-mode-border-default-a: #0000001a;
19
+ --user-mode-border-divider-weaker: #f7f7f7;
20
+ --user-mode-border-green: #00b84d;
21
+ --user-mode-border-green-weak-a: #00b84d4d;
22
+ --user-mode-border-grey: #7a7a7a;
23
+ --user-mode-border-grey-weak-a: #7a7a7a4d;
24
+ --user-mode-border-invert: #ffffff;
25
+ --user-mode-border-red: #ff4a40;
26
+ --user-mode-border-red-weak-a: #ff4a404d;
27
+ --user-mode-border-strong-a: #00000033;
28
+ --user-mode-border-stronger: #454545;
29
+ --user-mode-border-weak-a: #0000000f;
30
+ --user-mode-border-yellow: #f29900;
31
+ --user-mode-border-yellow-weak-a: #f299004d;
32
+ --user-mode-icon-blue: #148aff;
33
+ --user-mode-icon-green: #00b84d;
34
+ --user-mode-icon-grey: #7a7a7a;
35
+ --user-mode-icon-invert: #ffffff;
36
+ --user-mode-icon-primary: #000000;
37
+ --user-mode-icon-quaternary-a: #0000004d;
38
+ --user-mode-icon-red: #ff4a40;
39
+ --user-mode-icon-secondary-a: #000000ba;
40
+ --user-mode-icon-tertiary-a: #00000080;
41
+ --user-mode-icon-yellow: #f29900;
42
+ --user-mode-overlay-hover-a: #0000001a;
43
+ --user-mode-overlay-hover-grey-a: #4545451a;
44
+ --user-mode-overlay-press-a: #00000026;
45
+ --user-mode-overlay-press-grey-a: #45454526;
46
+ --user-mode-service-live: #e2012d;
47
+ --user-mode-service-live-weak-a: #e2012d4d;
48
+ --user-mode-service-membership: #ffb010;
49
+ --user-mode-service-membership-weak-a: #eb91001f;
50
+ --user-mode-service-noti: #020f81;
51
+ --user-mode-service-pop-bg: linear-gradient(135deg, #faf7de 13.08%, #e7edfd 87.56%);
52
+ --user-mode-surface-card: #ffffff;
53
+ --user-mode-surface-display-bar-bottom: #fdfdfd;
54
+ --user-mode-surface-display-bar-top: #ffffff;
55
+ --user-mode-surface-display-lock: #bfbfbf;
56
+ --user-mode-surface-form-blue: #148aff;
57
+ --user-mode-surface-form-blue-weak-a: #007aff26;
58
+ --user-mode-surface-form-gradient-h: linear-gradient(90deg, #ffffff 0%, #ffffff00 100%);
59
+ --user-mode-surface-form-green: #00bf59;
60
+ --user-mode-surface-form-green-weak-a: #00b84d26;
61
+ --user-mode-surface-form-grey: #999999;
62
+ --user-mode-surface-form-grey-weak-a: #6666661f;
63
+ --user-mode-surface-form-inverted: #151515;
64
+ --user-mode-surface-form-inverted-deep: #000000;
65
+ --user-mode-surface-form-primary-a: #0000000f;
66
+ --user-mode-surface-form-red: #ff4a40;
67
+ --user-mode-surface-form-red-weak-a: #ff4a4026;
68
+ --user-mode-surface-form-secondary-a: #0000000a;
69
+ --user-mode-surface-form-yellow: #f29900;
70
+ --user-mode-surface-form-yellow-weak-a: #f299001f;
71
+ --user-mode-text-blue: #148aff;
72
+ --user-mode-text-green: #00b84d;
73
+ --user-mode-text-grey: #666666;
74
+ --user-mode-text-invert-a: #ffffffed;
75
+ --user-mode-text-primary: #151515;
76
+ --user-mode-text-primary-a: #000000ed;
77
+ --user-mode-text-quaternary: #999999;
78
+ --user-mode-text-quaternary-a: #00000080;
79
+ --user-mode-text-red: #ff4a40;
80
+ --user-mode-text-secondary: #454545;
81
+ --user-mode-text-secondary-a: #000000ba;
82
+ --user-mode-text-tertiary: #666666;
83
+ --user-mode-text-tertiary-a: #00000099;
84
+ --user-mode-text-yellow: #f29900;
85
+ --user-mode-shadow-default-large: 0px 1px 2px 0px #1a1a1a05, 0px 8px 48px 0px #1a1a1a26;
86
+ --user-mode-shadow-default-medium: 0px 1px 2px 0px #00000005, 0px 4px 24px 0px #1a1a1a1a;
87
+ --user-mode-shadow-default-small: 0px 1px 2px 0px #1a1a1a05, 0px 2px 8px 0px #1a1a1a1a;
88
+ --user-mode-shadow-default-xlarge: 0px 1px 2px 0px #1a1a1a05, 0px 16px 72px 0px #1a1a1a26;
89
+ --user-mode-shadow-default-xsmall: 0px 1px 2px 0px #1a1a1a05, 0px 0px 4px 0px #1a1a1a26;
90
+ --user-mode-shadow-weak-large: 0px 1px 2px 0px #1a1a1a05, 0px 8px 48px 0px #1a1a1a1f;
91
+ --user-mode-shadow-weak-medium: 0px 1px 2px 0px #00000005, 0px 4px 20px 0px #1a1a1a14;
92
+ --user-mode-shadow-weak-small: 0px 1px 2px 0px #1a1a1a05, 0px 2px 8px 0px #1a1a1a14;
93
+ --user-mode-shadow-weak-xlarge: 0px 1px 2px 0px #1a1a1a05, 0px 16px 72px 0px #1a1a1a1f;
94
+ --user-mode-shadow-weak-xsmall: 0px 1px 1px 0px #1a1a1a05, 0px 0px 4px 0px #1a1a1a14;
95
+
96
+ --user-always-avatar-bg01: #aa47bc;
97
+ --user-always-avatar-bg02: #7a1fa2;
98
+ --user-always-avatar-bg03: #7e57c2;
99
+ --user-always-avatar-bg04: #512da7;
100
+ --user-always-avatar-bg05: #5c6bc0;
101
+ --user-always-avatar-bg06: #0288d1;
102
+ --user-always-avatar-bg07: #00579c;
103
+ --user-always-avatar-bg08: #0098a6;
104
+ --user-always-avatar-bg09: #00887a;
105
+ --user-always-avatar-bg10: #689f39;
106
+ --user-always-avatar-bg11: #33691e;
107
+ --user-always-avatar-bg12: #004c3f;
108
+ --user-always-avatar-bg13: #ec407a;
109
+ --user-always-avatar-bg14: #c2175b;
110
+ --user-always-avatar-bg15: #bf360c;
111
+ --user-always-avatar-bg16: #f5511e;
112
+ --user-always-avatar-bg17: #ef6c00;
113
+ --user-always-avatar-bg18: #8c6e63;
114
+ --user-always-avatar-bg19: #5d4038;
115
+ --user-always-avatar-bg20: #78909c;
116
+ --user-always-avatar-bg21: #465a65;
117
+ --user-always-black006-a: #0000000f;
118
+ --user-always-black010-a: #0000001a;
119
+ --user-always-black015-a: #00000026;
120
+ --user-always-black020-a: #00000033;
121
+ --user-always-black030-a: #0000004d;
122
+ --user-always-black050-a: #00000080;
123
+ --user-always-black060-a: #00000099;
124
+ --user-always-black080-a: #000000cc;
125
+ --user-always-black100: #000000;
126
+ --user-always-grey-strong: #232323;
127
+ --user-always-grey085: #5c5c5c;
128
+ --user-always-lightgrey006-a: #9999990f;
129
+ --user-always-lightgrey010-a: #9999991a;
130
+ --user-always-lightgrey015-a: #99999926;
131
+ --user-always-lightgrey020-a: #99999933;
132
+ --user-always-lightgrey030-a: #9999994d;
133
+ --user-always-lightgrey050-a: #99999980;
134
+ --user-always-lightgrey080-a: #999999cc;
135
+ --user-always-lightgrey100: #999999;
136
+ --user-always-palette05: linear-gradient(135deg, #db2667 0%, #f4a368 100%);
137
+ --user-always-service-live-pop: #df3868;
138
+ --user-always-service-live-red: #ff0000;
139
+ --user-always-service-mnet: #ff477f;
140
+ --user-always-service-mnetapp: #ff477f;
141
+ --user-always-service-point: linear-gradient(135deg, #1cac3c 0%, #1ca6bb 100%);
142
+ --user-always-service-pop-ing: linear-gradient(135deg, #db2667 0%, #f4a368 100%);
143
+ --user-always-service-popgrey-weak-a: #707ca00f;
144
+ --user-always-service-post-thumb-a: #aa89f5cc;
145
+ --user-always-service-rankingpoll-thumb-a: #FFADDD80;
146
+ --user-always-service-red080-a: #f5254acc;
147
+ --user-always-service-survey: #597eff;
148
+ --user-always-service-survey-thumb-a: #7192f5cc;
149
+ --user-always-service-ticket: #00bf59;
150
+ --user-always-white006-a: #ffffff0f;
151
+ --user-always-white010-a: #ffffff1a;
152
+ --user-always-white015-a: #ffffff26;
153
+ --user-always-white020-a: #ffffff33;
154
+ --user-always-white030-a: #ffffff4d;
155
+ --user-always-white050-a: #ffffff80;
156
+ --user-always-white060-a: #ffffff99;
157
+ --user-always-white080-a: #ffffffcc;
158
+ --user-always-white100: #ffffff;
159
+ --user-auto-icon-primary-on-dark: #ffffff;
160
+ --user-auto-icon-primary-on-light: #000000ed;
161
+ --user-auto-icon-secondary-on-dark: #ffffff;
162
+ --user-auto-icon-secondary-on-light: #000000ba;
163
+ --user-auto-text-primary-on-dark: #ffffff;
164
+ --user-auto-text-primary-on-light: #000000;
165
+ --user-auto-text-secondary-on-dark: #ffffffcc;
166
+ --user-auto-text-secondary-on-light: #000000cc;
167
+ --user-picker-button: #654bff;
168
+ --user-picker-button-weak-a: #654bff26;
169
+ --user-picker-on-button: #ffffff;
170
+ --user-picker-star: #7266ff;
171
+ --user-pop-bg-tl01: #c9d0ea;
172
+ --user-pop-bg-tl02: #f2de6f;
173
+ --user-pop-bg-tl03: #fca783;
174
+ --user-pop-bg-tl04: #a0dda6;
175
+ --user-pop-bg-tl05: #a2bce3;
176
+ --user-pop-bg-tl06: #f7b3cf;
177
+ --user-pop-bg-tl07: #bfa2e3;
178
+ --user-pop-bg-tl08: #fb8686;
179
+ --user-pop-bg-tl09: #eec2c2;
180
+ --user-pop-bg-tl10: #e2d1b0;
181
+ --user-pop-bubble-tl01: #7984b1;
182
+ --user-pop-bubble-tl03: #e3703f;
183
+ --user-pop-bubble-tl04: #5fac70;
184
+ --user-pop-bubble-tl05: #587ab1;
185
+ --user-pop-bubble-tl06: #ca7094;
186
+ --user-pop-bubble-tl07: #8067b5;
187
+ --user-pop-bubble-tl08: #cb4e4e;
188
+ --user-pop-bubble-tl09: #cb8181;
189
+ --user-pop-bubble-tl1: #a79272;
190
+ --user-pop-item-gradient01: linear-gradient(135deg, #fbf3ac 0%, #ffe1fc 100%);
191
+ --user-pop-item-gradient02: linear-gradient(135deg, #cbe6ff 0%, #d5ffdf 100%);
192
+ --user-pop-item-gradient03: linear-gradient(135deg, #e4ceff 0%, #ffe4cc 100%);
193
+ --user-pop-item-gradient04: linear-gradient(135deg, #ffdcb3 0%, #c9f8ff 100%);
194
+ --user-pop-item-gradient05: linear-gradient(135deg, #ffd0ec 0%, #d3fcff 100%);
195
+ --user-pop-item-gradient06: linear-gradient(135deg, #feb5b5 0%, #d6fee1 100%);
196
+
197
+ --user-font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
198
+ }
199
+
200
+ @media (prefers-color-scheme: dark) {
201
+ :root:not([data-bspoke="light"]) {
202
+ --user-mode-bg-base: #151515;
203
+ --user-mode-bg-blue-grey: #1f2023;
204
+ --user-mode-bg-elevated: #232323;
205
+ --user-mode-bg-grouped-strong: #000000;
206
+ --user-mode-bg-grouped-weak: #111111;
207
+ --user-mode-bg-grouped-weak-a: #ffffff0f;
208
+ --user-mode-bg-highlight: #2f2f2f;
209
+ --user-mode-bg-invert-weak-a: #00000026;
210
+ --user-mode-border-blue: #0090ff;
211
+ --user-mode-border-blue-weak-a: #0090ff4d;
212
+ --user-mode-border-default-a: #ffffff1a;
213
+ --user-mode-border-divider-weaker: #0d0d0d;
214
+ --user-mode-border-green: #0be06f;
215
+ --user-mode-border-green-weak-a: #0be06f4d;
216
+ --user-mode-border-grey: #b3b3b3;
217
+ --user-mode-border-grey-weak-a: #b3b3b34d;
218
+ --user-mode-border-invert: #0d0d0d;
219
+ --user-mode-border-red: #ff4747;
220
+ --user-mode-border-red-weak-a: #ff47474d;
221
+ --user-mode-border-strong-a: #ffffff33;
222
+ --user-mode-border-stronger: #eeeeee;
223
+ --user-mode-border-weak-a: #ffffff0a;
224
+ --user-mode-border-yellow: #f5b625;
225
+ --user-mode-border-yellow-weak-a: #f5b6254d;
226
+ --user-mode-icon-blue: #0090ff;
227
+ --user-mode-icon-green: #0be06f;
228
+ --user-mode-icon-grey: #b3b3b3;
229
+ --user-mode-icon-invert: #0d0d0d;
230
+ --user-mode-icon-primary: #ffffff;
231
+ --user-mode-icon-quaternary-a: #ffffff4d;
232
+ --user-mode-icon-red: #ff4747;
233
+ --user-mode-icon-secondary-a: #ffffffba;
234
+ --user-mode-icon-tertiary-a: #ffffff80;
235
+ --user-mode-icon-yellow: #f5b625;
236
+ --user-mode-overlay-hover-a: #ffffff14;
237
+ --user-mode-overlay-hover-grey-a: #4545451a;
238
+ --user-mode-overlay-press-a: #ffffff33;
239
+ --user-mode-overlay-press-grey-a: #45454526;
240
+ --user-mode-service-live: #e51a42;
241
+ --user-mode-service-live-weak-a: #e51a4226;
242
+ --user-mode-service-membership: #ffbf00;
243
+ --user-mode-service-membership-weak-a: #ffbf001f;
244
+ --user-mode-service-noti: #0c198b;
245
+ --user-mode-service-pop-bg: linear-gradient(135deg, #3b3a2d 13.08%, #232732 87.56%);
246
+ --user-mode-surface-card: #232323;
247
+ --user-mode-surface-display-bar-bottom: #151515;
248
+ --user-mode-surface-display-bar-top: #151515;
249
+ --user-mode-surface-display-lock: #2f2f2f;
250
+ --user-mode-surface-form-blue: #0090ff;
251
+ --user-mode-surface-form-blue-weak-a: #0f97ff1f;
252
+ --user-mode-surface-form-gradient-h: linear-gradient(90deg, #151515 0%, #15151500 100%);
253
+ --user-mode-surface-form-green: #00cc5f;
254
+ --user-mode-surface-form-green-weak-a: #0be06f14;
255
+ --user-mode-surface-form-grey: #7a7a7a;
256
+ --user-mode-surface-form-grey-weak-a: #b3b3b314;
257
+ --user-mode-surface-form-inverted: #f7f7f7;
258
+ --user-mode-surface-form-inverted-deep: #ffffff;
259
+ --user-mode-surface-form-primary-a: #ffffff0f;
260
+ --user-mode-surface-form-red: #ff4747;
261
+ --user-mode-surface-form-red-weak-a: #ff47471f;
262
+ --user-mode-surface-form-secondary-a: #ffffff0a;
263
+ --user-mode-surface-form-yellow: #f5b625;
264
+ --user-mode-surface-form-yellow-weak-a: #f5b62514;
265
+ --user-mode-text-blue: #0090ff;
266
+ --user-mode-text-green: #0be06f;
267
+ --user-mode-text-grey: #b3b3b3;
268
+ --user-mode-text-invert-a: #000000ed;
269
+ --user-mode-text-primary: #eeeeee;
270
+ --user-mode-text-primary-a: #ffffffed;
271
+ --user-mode-text-quaternary: #777777;
272
+ --user-mode-text-quaternary-a: #ffffff80;
273
+ --user-mode-text-red: #ff4747;
274
+ --user-mode-text-secondary: #bababa;
275
+ --user-mode-text-secondary-a: #ffffffba;
276
+ --user-mode-text-tertiary: #999999;
277
+ --user-mode-text-tertiary-a: #ffffff99;
278
+ --user-mode-text-yellow: #f5b625;
279
+ --user-mode-shadow-default-large: 0px 1px 2px 0px #00000033, 0px 8px 48px 0px #00000099;
280
+ --user-mode-shadow-default-medium: 0px 1px 2px 0px #00000033, 0px 4px 24px 0px #00000066;
281
+ --user-mode-shadow-default-small: 0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000066;
282
+ --user-mode-shadow-default-xlarge: 0px 1px 2px 0px #00000033, 0px 16px 72px 0px #00000099;
283
+ --user-mode-shadow-default-xsmall: 0px 1px 2px 0px #00000033, 0px 0px 4px 0px #00000066;
284
+ --user-mode-shadow-weak-large: 0px 1px 2px 0px #0000001a, 0px 8px 48px 0px #00000066;
285
+ --user-mode-shadow-weak-medium: 0px 1px 2px 0px #0000001a, 0px 4px 24px 0px #00000033;
286
+ --user-mode-shadow-weak-small: 0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000033;
287
+ --user-mode-shadow-weak-xlarge: 0px 1px 2px 0px #0000001a, 0px 16px 72px 0px #00000066;
288
+ --user-mode-shadow-weak-xsmall: 0px 1px 2px 0px #0000001a, 0px 0px 4px 0px #00000033;
289
+ }
290
+ }
291
+
292
+ :root[data-bspoke="dark"],
293
+ :root.dark {
294
+ --user-mode-bg-base: #151515;
295
+ --user-mode-bg-blue-grey: #1f2023;
296
+ --user-mode-bg-elevated: #232323;
297
+ --user-mode-bg-grouped-strong: #000000;
298
+ --user-mode-bg-grouped-weak: #111111;
299
+ --user-mode-bg-grouped-weak-a: #ffffff0f;
300
+ --user-mode-bg-highlight: #2f2f2f;
301
+ --user-mode-bg-invert-weak-a: #00000026;
302
+ --user-mode-border-blue: #0090ff;
303
+ --user-mode-border-blue-weak-a: #0090ff4d;
304
+ --user-mode-border-default-a: #ffffff1a;
305
+ --user-mode-border-divider-weaker: #0d0d0d;
306
+ --user-mode-border-green: #0be06f;
307
+ --user-mode-border-green-weak-a: #0be06f4d;
308
+ --user-mode-border-grey: #b3b3b3;
309
+ --user-mode-border-grey-weak-a: #b3b3b34d;
310
+ --user-mode-border-invert: #0d0d0d;
311
+ --user-mode-border-red: #ff4747;
312
+ --user-mode-border-red-weak-a: #ff47474d;
313
+ --user-mode-border-strong-a: #ffffff33;
314
+ --user-mode-border-stronger: #eeeeee;
315
+ --user-mode-border-weak-a: #ffffff0a;
316
+ --user-mode-border-yellow: #f5b625;
317
+ --user-mode-border-yellow-weak-a: #f5b6254d;
318
+ --user-mode-icon-blue: #0090ff;
319
+ --user-mode-icon-green: #0be06f;
320
+ --user-mode-icon-grey: #b3b3b3;
321
+ --user-mode-icon-invert: #0d0d0d;
322
+ --user-mode-icon-primary: #ffffff;
323
+ --user-mode-icon-quaternary-a: #ffffff4d;
324
+ --user-mode-icon-red: #ff4747;
325
+ --user-mode-icon-secondary-a: #ffffffba;
326
+ --user-mode-icon-tertiary-a: #ffffff80;
327
+ --user-mode-icon-yellow: #f5b625;
328
+ --user-mode-overlay-hover-a: #ffffff14;
329
+ --user-mode-overlay-hover-grey-a: #4545451a;
330
+ --user-mode-overlay-press-a: #ffffff33;
331
+ --user-mode-overlay-press-grey-a: #45454526;
332
+ --user-mode-service-live: #e51a42;
333
+ --user-mode-service-live-weak-a: #e51a4226;
334
+ --user-mode-service-membership: #ffbf00;
335
+ --user-mode-service-membership-weak-a: #ffbf001f;
336
+ --user-mode-service-noti: #0c198b;
337
+ --user-mode-service-pop-bg: linear-gradient(135deg, #3b3a2d 13.08%, #232732 87.56%);
338
+ --user-mode-surface-card: #232323;
339
+ --user-mode-surface-display-bar-bottom: #151515;
340
+ --user-mode-surface-display-bar-top: #151515;
341
+ --user-mode-surface-display-lock: #2f2f2f;
342
+ --user-mode-surface-form-blue: #0090ff;
343
+ --user-mode-surface-form-blue-weak-a: #0f97ff1f;
344
+ --user-mode-surface-form-gradient-h: linear-gradient(90deg, #151515 0%, #15151500 100%);
345
+ --user-mode-surface-form-green: #00cc5f;
346
+ --user-mode-surface-form-green-weak-a: #0be06f14;
347
+ --user-mode-surface-form-grey: #7a7a7a;
348
+ --user-mode-surface-form-grey-weak-a: #b3b3b314;
349
+ --user-mode-surface-form-inverted: #f7f7f7;
350
+ --user-mode-surface-form-inverted-deep: #ffffff;
351
+ --user-mode-surface-form-primary-a: #ffffff0f;
352
+ --user-mode-surface-form-red: #ff4747;
353
+ --user-mode-surface-form-red-weak-a: #ff47471f;
354
+ --user-mode-surface-form-secondary-a: #ffffff0a;
355
+ --user-mode-surface-form-yellow: #f5b625;
356
+ --user-mode-surface-form-yellow-weak-a: #f5b62514;
357
+ --user-mode-text-blue: #0090ff;
358
+ --user-mode-text-green: #0be06f;
359
+ --user-mode-text-grey: #b3b3b3;
360
+ --user-mode-text-invert-a: #000000ed;
361
+ --user-mode-text-primary: #eeeeee;
362
+ --user-mode-text-primary-a: #ffffffed;
363
+ --user-mode-text-quaternary: #777777;
364
+ --user-mode-text-quaternary-a: #ffffff80;
365
+ --user-mode-text-red: #ff4747;
366
+ --user-mode-text-secondary: #bababa;
367
+ --user-mode-text-secondary-a: #ffffffba;
368
+ --user-mode-text-tertiary: #999999;
369
+ --user-mode-text-tertiary-a: #ffffff99;
370
+ --user-mode-text-yellow: #f5b625;
371
+ --user-mode-shadow-default-large: 0px 1px 2px 0px #00000033, 0px 8px 48px 0px #00000099;
372
+ --user-mode-shadow-default-medium: 0px 1px 2px 0px #00000033, 0px 4px 24px 0px #00000066;
373
+ --user-mode-shadow-default-small: 0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000066;
374
+ --user-mode-shadow-default-xlarge: 0px 1px 2px 0px #00000033, 0px 16px 72px 0px #00000099;
375
+ --user-mode-shadow-default-xsmall: 0px 1px 2px 0px #00000033, 0px 0px 4px 0px #00000066;
376
+ --user-mode-shadow-weak-large: 0px 1px 2px 0px #0000001a, 0px 8px 48px 0px #00000066;
377
+ --user-mode-shadow-weak-medium: 0px 1px 2px 0px #0000001a, 0px 4px 24px 0px #00000033;
378
+ --user-mode-shadow-weak-small: 0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000033;
379
+ --user-mode-shadow-weak-xlarge: 0px 1px 2px 0px #0000001a, 0px 16px 72px 0px #00000066;
380
+ --user-mode-shadow-weak-xsmall: 0px 1px 2px 0px #0000001a, 0px 0px 4px 0px #00000033;
381
+ }