@bstage-sdk/design 0.8.0 → 0.8.2

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 (15) hide show
  1. package/css/admin.css +149 -0
  2. package/css/user.css +381 -0
  3. package/dist/admin/index.cjs +790 -0
  4. package/dist/admin/index.d.cts +642 -0
  5. package/dist/admin/index.d.ts +642 -0
  6. package/dist/admin/index.js +753 -0
  7. package/dist/index.cjs +18 -0
  8. package/dist/index.d.cts +25 -0
  9. package/dist/index.d.ts +25 -0
  10. package/dist/index.js +0 -0
  11. package/dist/user/index.cjs +723 -0
  12. package/dist/user/index.d.cts +576 -0
  13. package/dist/user/index.d.ts +576 -0
  14. package/dist/user/index.js +686 -0
  15. package/package.json +1 -1
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
+ }