@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Tweak colors of new magic tokens
Summary: Uses shades for token colors, makes function tokens white/blue.
Test Plan:
Used the new tokens in UIExamples, Differential.
{F376191}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Differential Revision: https://secure.phabricator.com/D12465
+156
-97
+24
-23
resources/celerity/map.php
+24
-23
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'bf29d341',
11
-
'core.pkg.js' => '347cd64a',
10
+
'core.pkg.css' => '7d05ad2a',
11
+
'core.pkg.js' => 'a626d14c',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
13
'differential.pkg.css' => '3500921f',
14
14
'differential.pkg.js' => 'c0506961',
···
27
27
'rsrc/css/aphront/panel-view.css' => '8427b78d',
28
28
'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
29
29
'rsrc/css/aphront/table-view.css' => '59e2c0f8',
30
-
'rsrc/css/aphront/tokenizer.css' => 'c10c061e',
30
+
'rsrc/css/aphront/tokenizer.css' => '86a13f7f',
31
31
'rsrc/css/aphront/tooltip.css' => '7672b60f',
32
32
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
33
33
'rsrc/css/aphront/typeahead-browse.css' => 'efe293a0',
···
147
147
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
148
148
'rsrc/css/phui/phui-spacing.css' => '042804d6',
149
149
'rsrc/css/phui/phui-status.css' => '888cedb8',
150
-
'rsrc/css/phui/phui-tag-view.css' => 'ea469f3a',
150
+
'rsrc/css/phui/phui-tag-view.css' => '402691cc',
151
151
'rsrc/css/phui/phui-text.css' => 'cf019f54',
152
152
'rsrc/css/phui/phui-timeline-view.css' => 'b0fbc4d7',
153
153
'rsrc/css/phui/phui-workboard-view.css' => '3279cbbf',
···
450
450
'rsrc/js/core/KeyboardShortcutManager.js' => 'c1700f6f',
451
451
'rsrc/js/core/MultirowRowManager.js' => 'b5d57730',
452
452
'rsrc/js/core/Notification.js' => '0c6946e7',
453
-
'rsrc/js/core/Prefab.js' => '4c292cc5',
453
+
'rsrc/js/core/Prefab.js' => 'b972bdcd',
454
454
'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
455
455
'rsrc/js/core/TextAreaUtils.js' => '5c93c52c',
456
456
'rsrc/js/core/Title.js' => 'df5e11d2',
···
510
510
'aphront-pager-view-css' => '2e3539af',
511
511
'aphront-panel-view-css' => '8427b78d',
512
512
'aphront-table-view-css' => '59e2c0f8',
513
-
'aphront-tokenizer-control-css' => 'c10c061e',
513
+
'aphront-tokenizer-control-css' => '86a13f7f',
514
514
'aphront-tooltip-css' => '7672b60f',
515
515
'aphront-two-column-view-css' => '16ab3ad2',
516
516
'aphront-typeahead-control-css' => '0e403212',
···
744
744
'phabricator-notification-menu-css' => '3c9d8aa1',
745
745
'phabricator-object-selector-css' => '029a133d',
746
746
'phabricator-phtize' => 'd254d646',
747
-
'phabricator-prefab' => '4c292cc5',
747
+
'phabricator-prefab' => 'b972bdcd',
748
748
'phabricator-profile-css' => '1a20dcbf',
749
749
'phabricator-remarkup-css' => 'e10512ff',
750
750
'phabricator-search-results-css' => '15c71110',
···
806
806
'phui-remarkup-preview-css' => '19ad512b',
807
807
'phui-spacing-css' => '042804d6',
808
808
'phui-status-list-view-css' => '888cedb8',
809
-
'phui-tag-view-css' => 'ea469f3a',
809
+
'phui-tag-view-css' => '402691cc',
810
810
'phui-text-css' => 'cf019f54',
811
811
'phui-timeline-view-css' => 'b0fbc4d7',
812
812
'phui-workboard-view-css' => '3279cbbf',
···
1158
1158
'4a2430d7' => array(
1159
1159
'phui-fontkit-css',
1160
1160
),
1161
-
'4c292cc5' => array(
1162
-
'javelin-install',
1163
-
'javelin-util',
1164
-
'javelin-dom',
1165
-
'javelin-typeahead',
1166
-
'javelin-tokenizer',
1167
-
'javelin-typeahead-preloaded-source',
1168
-
'javelin-typeahead-ondemand-source',
1169
-
'javelin-dom',
1170
-
'javelin-stratcom',
1171
-
'javelin-util',
1172
-
),
1173
1161
'4d94d9c3' => array(
1174
1162
'javelin-behavior',
1175
1163
'javelin-stratcom',
···
1481
1469
'phabricator-tooltip',
1482
1470
'changeset-view-manager',
1483
1471
),
1472
+
'86a13f7f' => array(
1473
+
'aphront-typeahead-control-css',
1474
+
'phui-tag-view-css',
1475
+
),
1484
1476
'87cb6b51' => array(
1485
1477
'javelin-behavior',
1486
1478
'javelin-dom',
···
1719
1711
'javelin-dom',
1720
1712
'javelin-util',
1721
1713
),
1714
+
'b972bdcd' => array(
1715
+
'javelin-install',
1716
+
'javelin-util',
1717
+
'javelin-dom',
1718
+
'javelin-typeahead',
1719
+
'javelin-tokenizer',
1720
+
'javelin-typeahead-preloaded-source',
1721
+
'javelin-typeahead-ondemand-source',
1722
+
'javelin-dom',
1723
+
'javelin-stratcom',
1724
+
'javelin-util',
1725
+
),
1722
1726
'bba9eedf' => array(
1723
1727
'javelin-behavior',
1724
1728
'javelin-stratcom',
···
1763
1767
'javelin-dom',
1764
1768
'javelin-util',
1765
1769
'phabricator-shaped-request',
1766
-
),
1767
-
'c10c061e' => array(
1768
-
'aphront-typeahead-control-css',
1769
1770
),
1770
1771
'c1700f6f' => array(
1771
1772
'javelin-install',
+17
-22
webroot/rsrc/css/aphront/tokenizer.css
+17
-22
webroot/rsrc/css/aphront/tokenizer.css
···
1
1
/**
2
2
* @provides aphront-tokenizer-control-css
3
3
* @requires aphront-typeahead-control-css
4
+
* @requires phui-tag-view-css
4
5
*/
5
6
6
7
body div.jx-tokenizer {
···
52
53
a.jx-tokenizer-x {
53
54
margin-left: 4px;
54
55
color: {$bluetext};
56
+
float: right;
55
57
}
56
58
57
59
a.jx-tokenizer-x:hover {
···
60
62
}
61
63
62
64
a.jx-tokenizer-token {
63
-
padding: 2px 6px 3px;
65
+
padding: 2px 6px;
64
66
border: 1px solid {$lightblueborder};
65
67
margin: 3px 2px 0 4px;
66
-
background: #dee7f8;
68
+
background-color: {$sh-bluebackground};
67
69
float: left;
68
70
cursor: pointer;
69
71
border-radius: 3px;
70
-
color: {$darkbluetext};
72
+
color: {$sh-bluetext};
71
73
min-height: 16px;
72
74
}
73
75
74
76
a.jx-tokenizer-token:hover {
75
77
text-decoration: none;
76
-
border-color: {$blueborder};
77
-
background: #CDD9F0;
78
+
border-color: {$sh-blueborder};
78
79
}
79
80
80
81
.jx-tokenizer-token .phui-icon-view {
81
82
display: inline-block;
82
83
margin: 2px 4px -3px 0;
83
-
color: {$bluetext};
84
+
color: {$sh-blueicon};
84
85
}
85
86
86
87
a.jx-tokenizer-token-function {
87
-
border-color: {$sh-lightyellowborder};
88
-
background: {$sh-yellowbackground};
89
-
color: {$sh-yellowtext};
88
+
border-color: {$sh-lightgreyborder};
89
+
background: #fff;
90
90
}
91
91
92
92
a.jx-tokenizer-token-function:hover {
93
-
border-color: {$sh-yellowborder};
94
-
background: {$lightyellow};
95
-
}
96
-
97
-
.jx-tokenizer-token-function .phui-icon-view {
98
-
color: {$sh-yellowicon};
93
+
background: #fff;
99
94
}
100
95
101
96
a.jx-tokenizer-token-disabled {
102
-
border-color: {$sh-lightgreyborder};
103
-
background: {$sh-greybackground};
104
-
color: {$sh-greytext};
97
+
background-color: {$sh-disabledbackground};
98
+
border-color: {$sh-lightdisabledborder};
99
+
color: {$sh-disabledtext};
105
100
}
106
101
107
102
a.jx-tokenizer-token-disabled:hover {
108
-
border-color: {$sh-greyborder};
109
-
background: {$greybackground};
103
+
border-color: {$sh-disabledborder};
104
+
background-color: {$sh-disabledbackground};
110
105
}
111
106
112
107
.jx-tokenizer-token-disabled .phui-icon-view {
113
-
color: {$sh-greyicon};
108
+
color: {$sh-disabledicon};
114
109
}
115
110
116
111
a.jx-tokenizer-token-invalid {
···
121
116
122
117
a.jx-tokenizer-token-invalid:hover {
123
118
border-color: {$sh-redborder};
124
-
background: {$lightred};
119
+
background: {$sh-redbackground};
125
120
}
126
121
127
122
.jx-tokenizer-token-invalid .phui-icon-view {
+115
-52
webroot/rsrc/css/phui/phui-tag-view.css
+115
-52
webroot/rsrc/css/phui/phui-tag-view.css
···
140
140
border-color: #d7d7d7;
141
141
}
142
142
143
+
.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
144
+
margin-top: 4px;
145
+
}
146
+
147
+
.phui-object-item .phabricator-handle-tag-list {
148
+
display: inline;
149
+
}
150
+
151
+
.phui-object-item .phabricator-handle-tag-list-item {
152
+
display: inline;
153
+
margin: 0 4px 2px 0;
154
+
}
155
+
156
+
143
157
/* - Shaded Tags ---------------------------------------------------------------
144
158
145
159
For object representation inside text areas and lists.
···
162
176
font-size: 12px;
163
177
}
164
178
165
-
.phui-tag-shade-red .phui-tag-core {
166
-
background-color: {$sh-redbackground};
179
+
/* - Red -------------------------------------------------------------------- */
180
+
181
+
.phui-tag-shade-red .phui-tag-core,
182
+
.jx-tokenizer-token.red {
183
+
background: {$sh-redbackground};
167
184
border-color: {$sh-lightredborder};
168
185
color: {$sh-redtext};
169
186
}
170
187
171
-
.phui-tag-shade-red .phui-icon-view {
188
+
.phui-tag-shade-red .phui-icon-view,
189
+
.jx-tokenizer-token.red .phui-icon-view,
190
+
.jx-tokenizer-token.red .jx-tokenizer-x {
172
191
color: {$sh-redicon};
173
192
}
174
193
175
-
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core {
194
+
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core,
195
+
.jx-tokenizer-token.red:hover {
176
196
border-color: {$sh-redborder};
177
197
}
178
198
179
-
.phui-tag-shade-orange .phui-tag-core {
180
-
background-color: {$sh-orangebackground};
199
+
/* - Orange ----------------------------------------------------------------- */
200
+
201
+
.phui-tag-shade-orange .phui-tag-core,
202
+
.jx-tokenizer-token.orange {
203
+
background: {$sh-orangebackground};
181
204
border-color: {$sh-lightorangeborder};
182
205
color: {$sh-orangetext};
183
206
}
184
207
185
-
.phui-tag-shade-orange .phui-icon-view {
208
+
.phui-tag-shade-orange .phui-icon-view,
209
+
.jx-tokenizer-token.orange .phui-icon-view,
210
+
.jx-tokenizer-token.orange .jx-tokenizer-x {
186
211
color: {$sh-orangeicon};
187
212
}
188
213
189
-
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core {
214
+
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core,
215
+
.jx-tokenizer-token.orange:hover {
190
216
border-color: {$sh-orangeborder};
191
217
}
192
218
193
-
.phui-tag-shade-yellow .phui-tag-core {
194
-
background-color: {$sh-yellowbackground};
219
+
/* - Yellow ----------------------------------------------------------------- */
220
+
221
+
.phui-tag-shade-yellow .phui-tag-core,
222
+
.jx-tokenizer-token.yellow {
223
+
background: {$sh-yellowbackground};
195
224
border-color: {$sh-lightyellowborder};
196
225
color: {$sh-yellowtext};
197
226
}
198
227
199
-
.phui-tag-shade-yellow .phui-icon-view {
228
+
.phui-tag-shade-yellow .phui-icon-view,
229
+
.jx-tokenizer-token.yellow .phui-icon-view,
230
+
.jx-tokenizer-token.yellow .jx-tokenizer-x {
200
231
color: {$sh-yellowicon};
201
232
}
202
233
203
-
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core {
234
+
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core,
235
+
.jx-tokenizer-token.yellow:hover {
204
236
border-color: {$sh-yellowborder};
205
237
}
206
238
207
-
.phui-tag-shade-blue .phui-tag-core {
208
-
background-color: {$sh-bluebackground};
239
+
/* - Blue ------------------------------------------------------------------- */
240
+
241
+
.phui-tag-shade-blue .phui-tag-core,
242
+
.jx-tokenizer-token.blue {
243
+
background: {$sh-bluebackground};
209
244
border-color: {$sh-lightblueborder};
210
245
color: {$sh-bluetext};
211
246
}
212
247
213
-
.phui-tag-shade-blue .phui-icon-view {
248
+
.phui-tag-shade-blue .phui-icon-view,
249
+
.jx-tokenizer-token.blue .phui-icon-view,
250
+
.jx-tokenizer-token.blue .jx-tokenizer-x {
214
251
color: {$sh-blueicon};
215
252
}
216
253
217
-
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core {
254
+
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
255
+
.jx-tokenizer-token.blue:hover {
218
256
border-color: {$sh-blueborder};
219
257
}
220
258
221
-
.phui-tag-shade-indigo .phui-tag-core {
222
-
background-color: {$sh-indigobackground};
259
+
/* - Indigo ----------------------------------------------------------------- */
260
+
261
+
.phui-tag-shade-indigo .phui-tag-core,
262
+
.jx-tokenizer-token.indigo {
263
+
background: {$sh-indigobackground};
223
264
border-color: {$sh-lightindigoborder};
224
265
color: {$sh-indigotext};
225
266
}
226
267
227
-
.phui-tag-shade-indigo .phui-icon-view {
268
+
.phui-tag-shade-indigo .phui-icon-view,
269
+
.jx-tokenizer-token.indigo .phui-icon-view,
270
+
.jx-tokenizer-token.indigo .jx-tokenizer-x {
228
271
color: {$sh-indigoicon};
229
272
}
230
273
231
-
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core {
274
+
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core,
275
+
.jx-tokenizer-token.indigo:hover {
232
276
border-color: {$sh-indigoborder};
233
277
}
234
278
235
-
.phui-tag-shade-green .phui-tag-core {
236
-
background-color: {$sh-greenbackground};
279
+
/* - Green ------------------------------------------------------------------ */
280
+
281
+
.phui-tag-shade-green .phui-tag-core,
282
+
.jx-tokenizer-token.green {
283
+
background: {$sh-greenbackground};
237
284
border-color: {$sh-lightgreenborder};
238
285
color: {$sh-greentext};
239
286
}
240
287
241
-
.phui-tag-shade-green .phui-icon-view {
288
+
.phui-tag-shade-green .phui-icon-view,
289
+
.jx-tokenizer-token.green .phui-icon-view,
290
+
.jx-tokenizer-token.green .jx-tokenizer-x {
242
291
color: {$sh-greenicon};
243
292
}
244
293
245
-
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core {
294
+
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core,
295
+
.jx-tokenizer-token.green:hover {
246
296
border-color: {$sh-greenborder};
247
297
}
248
298
249
-
.phui-tag-shade-violet .phui-tag-core {
250
-
background-color: {$sh-violetbackground};
299
+
/* - Violet ----------------------------------------------------------------- */
300
+
301
+
.phui-tag-shade-violet .phui-tag-core,
302
+
.jx-tokenizer-token.violet {
303
+
background: {$sh-violetbackground};
251
304
border-color: {$sh-lightvioletborder};
252
305
color: {$sh-violettext};
253
306
}
254
307
255
-
.phui-tag-shade-violet .phui-icon-view {
308
+
.phui-tag-shade-violet .phui-icon-view,
309
+
.jx-tokenizer-token.violet .phui-icon-view,
310
+
.jx-tokenizer-token.violet .jx-tokenizer-x {
256
311
color: {$sh-violeticon};
257
312
}
258
313
259
-
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core {
314
+
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core,
315
+
.jx-tokenizer-token.violet:hover {
260
316
border-color: {$sh-violetborder};
261
317
}
262
318
263
-
.phui-tag-shade-pink .phui-tag-core {
264
-
background-color: {$sh-pinkbackground};
319
+
/* - Pink ------------------------------------------------------------------- */
320
+
321
+
.phui-tag-shade-pink .phui-tag-core,
322
+
.jx-tokenizer-token.pink {
323
+
background: {$sh-pinkbackground};
265
324
border-color: {$sh-lightpinkborder};
266
325
color: {$sh-pinktext};
267
326
}
268
327
269
-
.phui-tag-shade-pink .phui-icon-view {
328
+
.phui-tag-shade-pink .phui-icon-view,
329
+
.jx-tokenizer-token.pink .phui-icon-view,
330
+
.jx-tokenizer-token.pink .jx-tokenizer-x {
270
331
color: {$sh-pinkicon};
271
332
}
272
333
273
-
a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core {
334
+
a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core,
335
+
.jx-tokenizer-token.pink:hover {
274
336
border-color: {$sh-pinkborder};
275
337
}
276
338
277
-
.phui-tag-shade-grey .phui-tag-core {
278
-
background-color: {$sh-greybackground};
339
+
/* - Grey ------------------------------------------------------------------- */
340
+
341
+
.phui-tag-shade-grey .phui-tag-core,
342
+
.jx-tokenizer-token.grey {
343
+
background: {$sh-greybackground};
279
344
border-color: {$sh-lightgreyborder};
280
345
color: {$sh-greytext};
281
346
}
282
347
283
-
.phui-tag-shade-grey .phui-icon-view {
348
+
.phui-tag-shade-grey .phui-icon-view,
349
+
.jx-tokenizer-token.grey .phui-icon-view,
350
+
.jx-tokenizer-token.grey .jx-tokenizer-x {
284
351
color: {$sh-greyicon};
285
352
}
286
353
287
-
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
354
+
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
355
+
.jx-tokenizer-token.grey:hover {
288
356
border-color: {$sh-greyborder};
289
357
}
290
358
291
-
.phui-tag-shade-checkered .phui-tag-core {
359
+
/* - Checkered -------------------------------------------------------------- */
360
+
361
+
.phui-tag-shade-checkered .phui-tag-core,
362
+
.jx-tokenizer-token.checkered {
292
363
background: url(/rsrc/image/checker_lighter.png);
293
364
border-style: dashed;
294
365
border-color: {$sh-greyborder};
···
296
367
text-shadow: 1px 1px #fff;
297
368
}
298
369
299
-
.phui-tag-shade-checkered .phui-icon-view {
370
+
.phui-tag-shade-checkered .phui-icon-view,
371
+
.jx-tokenizer-token.checkered .phui-icon-view,
372
+
.jx-tokenizer-token.checkered .jx-tokenizer-x {
300
373
color: {$sh-greyicon};
301
374
}
302
375
303
-
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
376
+
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
377
+
.jx-tokenizer-token.checkered:hover {
304
378
border-style: solid;
305
379
border-color: {$sh-greyborder};
306
380
}
381
+
382
+
/* - Disabled --------------------------------------------------------------- */
307
383
308
384
.phui-tag-shade-disabled .phui-tag-core {
309
385
background-color: {$sh-disabledbackground};
···
318
394
a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
319
395
border-color: {$sh-disabledborder};
320
396
}
321
-
322
-
.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
323
-
margin-top: 4px;
324
-
}
325
-
326
-
.phui-object-item .phabricator-handle-tag-list {
327
-
display: inline;
328
-
}
329
-
330
-
.phui-object-item .phabricator-handle-tag-list-item {
331
-
display: inline;
332
-
margin: 0 4px 2px 0;
333
-
}