@bstage-sdk/design 0.6.2 → 0.7.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 (15) hide show
  1. package/package.json +1 -1
  2. package/css/admin.css +0 -149
  3. package/css/user.css +0 -381
  4. package/dist/admin/index.cjs +0 -790
  5. package/dist/admin/index.d.cts +0 -642
  6. package/dist/admin/index.d.ts +0 -642
  7. package/dist/admin/index.js +0 -753
  8. package/dist/index.cjs +0 -18
  9. package/dist/index.d.cts +0 -25
  10. package/dist/index.d.ts +0 -25
  11. package/dist/index.js +0 -0
  12. package/dist/user/index.cjs +0 -723
  13. package/dist/user/index.d.cts +0 -576
  14. package/dist/user/index.d.ts +0 -576
  15. package/dist/user/index.js +0 -686
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bstage-sdk/design",
3
- "version": "0.6.2",
3
+ "version": "0.7.0",
4
4
  "description": "bstage 디자인 토큰 SDK — 커스텀 템플릿을 bstage 디자인 시스템에 맞춘다",
5
5
  "type": "module",
6
6
  "publishConfig": {
package/css/admin.css DELETED
@@ -1,149 +0,0 @@
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 DELETED
@@ -1,381 +0,0 @@
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
- }