@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
Add Outline tag type to PHUITagView
Summary: Adds a new tag type, starts to try to clean up the mess that are PHUITags
Test Plan:
Review UIExamples.
{F4972323}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D17991
+216
-58
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'ff161f2d',
11
11
'conpherence.pkg.js' => 'b5b51108',
12
-
'core.pkg.css' => '5ffe8b79',
12
+
'core.pkg.css' => '6e9cf0af',
13
13
'core.pkg.js' => '599698a7',
14
14
'darkconsole.pkg.js' => '1f9a31bc',
15
15
'differential.pkg.css' => '7d4cfa59',
···
172
172
'rsrc/css/phui/phui-segment-bar-view.css' => 'b1d1b892',
173
173
'rsrc/css/phui/phui-spacing.css' => '042804d6',
174
174
'rsrc/css/phui/phui-status.css' => 'd5263e49',
175
-
'rsrc/css/phui/phui-tag-view.css' => 'cc4fd402',
175
+
'rsrc/css/phui/phui-tag-view.css' => '3fa7765e',
176
176
'rsrc/css/phui/phui-timeline-view.css' => '313c7f22',
177
177
'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7',
178
178
'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
···
882
882
'phui-segment-bar-view-css' => 'b1d1b892',
883
883
'phui-spacing-css' => '042804d6',
884
884
'phui-status-list-view-css' => 'd5263e49',
885
-
'phui-tag-view-css' => 'cc4fd402',
885
+
'phui-tag-view-css' => '3fa7765e',
886
886
'phui-theme-css' => '9f261c6b',
887
887
'phui-timeline-view-css' => '313c7f22',
888
888
'phui-two-column-view-css' => 'ce9fa0b7',
+2
-2
src/applications/phid/PhabricatorObjectHandle.php
+2
-2
src/applications/phid/PhabricatorObjectHandle.php
···
407
407
408
408
public function renderTag() {
409
409
return id(new PHUITagView())
410
-
->setType(PHUITagView::TYPE_OBJECT)
411
-
->setShade($this->getTagColor())
410
+
->setType(PHUITagView::TYPE_SHADE)
411
+
->setColor($this->getTagColor())
412
412
->setIcon($this->getIcon())
413
413
->setHref($this->getURI())
414
414
->setName($this->getLinkName());
+2
-2
src/applications/phid/view/PHUIHandleTagListView.php
+2
-2
src/applications/phid/view/PHUIHandleTagListView.php
···
121
121
122
122
private function newPlaceholderTag() {
123
123
return id(new PHUITagView())
124
-
->setType(PHUITagView::TYPE_OBJECT)
125
-
->setShade(PHUITagView::COLOR_DISABLED)
124
+
->setType(PHUITagView::TYPE_SHADE)
125
+
->setColor(PHUITagView::COLOR_DISABLED)
126
126
->setSlimShady($this->slim);
127
127
}
128
128
+29
-5
src/applications/uiexample/examples/PHUITagExample.php
+29
-5
src/applications/uiexample/examples/PHUITagExample.php
···
162
162
$tags = array();
163
163
foreach ($shades as $shade) {
164
164
$tags[] = id(new PHUITagView())
165
-
->setType(PHUITagView::TYPE_OBJECT)
166
-
->setShade($shade)
165
+
->setType(PHUITagView::TYPE_SHADE)
166
+
->setColor($shade)
167
167
->setIcon('fa-tags')
168
168
->setName(ucwords($shade))
169
169
->setHref('#');
170
170
$tags[] = hsprintf(' ');
171
171
$tags[] = id(new PHUITagView())
172
-
->setType(PHUITagView::TYPE_OBJECT)
173
-
->setShade($shade)
172
+
->setType(PHUITagView::TYPE_SHADE)
173
+
->setColor($shade)
174
174
->setSlimShady(true)
175
175
->setIcon('fa-tags')
176
176
->setName(ucwords($shade))
···
182
182
->appendChild($tags)
183
183
->addPadding(PHUI::PADDING_LARGE);
184
184
185
+
$outlines = PHUITagView::getOutlines();
186
+
$tags = array();
187
+
foreach ($outlines as $outline) {
188
+
$tags[] = id(new PHUITagView())
189
+
->setType(PHUITagView::TYPE_OUTLINE)
190
+
->setShade($outline)
191
+
->setName($outline);
192
+
$tags[] = hsprintf(' ');
193
+
$tags[] = id(new PHUITagView())
194
+
->setType(PHUITagView::TYPE_OUTLINE)
195
+
->setShade($outline)
196
+
->setSlimShady(true)
197
+
->setName($outline);
198
+
$tags[] = hsprintf('<br /><br />');
199
+
}
200
+
201
+
$content5 = id(new PHUIBoxView())
202
+
->appendChild($tags)
203
+
->addPadding(PHUI::PADDING_LARGE);
204
+
185
205
$box = id(new PHUIObjectBoxView())
186
206
->setHeaderText(pht('Inline'))
187
207
->appendChild($intro);
···
202
222
->setHeaderText(pht('Shades'))
203
223
->appendChild($content4);
204
224
205
-
return array($box, $box1, $box2, $box3, $box4);
225
+
$box5 = id(new PHUIObjectBoxView())
226
+
->setHeaderText(pht('Outlines'))
227
+
->appendChild($content5);
228
+
229
+
return array($box, $box1, $box2, $box3, $box4, $box5);
206
230
}
207
231
}
+47
-6
src/view/phui/PHUITagView.php
+47
-6
src/view/phui/PHUITagView.php
···
6
6
const TYPE_OBJECT = 'object';
7
7
const TYPE_STATE = 'state';
8
8
const TYPE_SHADE = 'shade';
9
+
const TYPE_OUTLINE = 'outline';
9
10
10
11
const COLOR_RED = 'red';
11
12
const COLOR_ORANGE = 'orange';
···
15
16
const COLOR_VIOLET = 'violet';
16
17
const COLOR_GREEN = 'green';
17
18
const COLOR_BLACK = 'black';
19
+
const COLOR_SKY = 'sky';
20
+
const COLOR_FIRE = 'fire';
18
21
const COLOR_GREY = 'grey';
19
22
const COLOR_WHITE = 'white';
20
23
const COLOR_PINK = 'pink';
···
29
32
private $href;
30
33
private $name;
31
34
private $phid;
35
+
private $color;
32
36
private $backgroundColor;
33
37
private $dotColor;
34
38
private $closed;
···
41
45
$this->type = $type;
42
46
switch ($type) {
43
47
case self::TYPE_SHADE:
48
+
case self::TYPE_OUTLINE:
44
49
break;
45
50
case self::TYPE_OBJECT:
46
51
$this->setBackgroundColor(self::COLOR_OBJECT);
···
52
57
return $this;
53
58
}
54
59
60
+
/* Deprecated, use setColor */
55
61
public function setShade($shade) {
56
-
$this->shade = $shade;
62
+
$this->color = $shade;
63
+
return $this;
64
+
}
65
+
66
+
public function setColor($color) {
67
+
$this->color = $color;
57
68
return $this;
58
69
}
59
70
···
109
120
'phui-tag-type-'.$this->type,
110
121
);
111
122
112
-
if ($this->shade) {
123
+
if ($this->color) {
124
+
$classes[] = 'phui-tag-'.$this->color;
125
+
}
126
+
127
+
if ($this->slimShady) {
128
+
$classes[] = 'phui-tag-slim';
129
+
}
130
+
131
+
if ($this->type == self::TYPE_SHADE) {
113
132
$classes[] = 'phui-tag-shade';
114
-
$classes[] = 'phui-tag-shade-'.$this->shade;
115
-
if ($this->slimShady) {
116
-
$classes[] = 'phui-tag-shade-slim';
117
-
}
118
133
}
119
134
120
135
if ($this->icon) {
···
238
253
239
254
public static function getShadeName($shade) {
240
255
return idx(self::getShadeMap(), $shade, $shade);
256
+
}
257
+
258
+
public static function getOutlines() {
259
+
return array_keys(self::getOutlineMap());
260
+
}
261
+
262
+
public static function getOutlineMap() {
263
+
return array(
264
+
self::COLOR_RED => pht('Red'),
265
+
self::COLOR_ORANGE => pht('Orange'),
266
+
self::COLOR_YELLOW => pht('Yellow'),
267
+
self::COLOR_BLUE => pht('Blue'),
268
+
self::COLOR_INDIGO => pht('Indigo'),
269
+
self::COLOR_VIOLET => pht('Violet'),
270
+
self::COLOR_GREEN => pht('Green'),
271
+
self::COLOR_GREY => pht('Grey'),
272
+
self::COLOR_PINK => pht('Pink'),
273
+
self::COLOR_SKY => pht('Sky'),
274
+
self::COLOR_FIRE => pht('Fire'),
275
+
self::COLOR_BLACK => pht('Black'),
276
+
self::COLOR_DISABLED => pht('Disabled'),
277
+
);
278
+
}
279
+
280
+
public static function getOutlineName($outline) {
281
+
return idx(self::getOutlineMap(), $outline, $outline);
241
282
}
242
283
243
284
+133
-40
webroot/rsrc/css/phui/phui-tag-view.css
+133
-40
webroot/rsrc/css/phui/phui-tag-view.css
···
161
161
162
162
*/
163
163
164
-
.phui-tag-shade {
164
+
.phui-tag-view.phui-tag-type-shade {
165
165
font-weight: normal;
166
166
}
167
167
168
-
.phui-tag-shade .phui-icon-view {
168
+
.phui-tag-view.phui-tag-type-shade .phui-icon-view {
169
169
font-size: 12px;
170
170
}
171
171
172
-
.phui-tag-shade-slim .phui-icon-view {
172
+
173
+
/* - Slim Tags -----------------------------------------------------------------
174
+
175
+
A thinner tag for object list, workboards.
176
+
177
+
*/
178
+
179
+
.phui-tag-slim .phui-icon-view {
173
180
font-size: 11px;
174
181
}
175
182
176
-
.phui-tag-shade-slim .phui-tag-core {
183
+
.phui-tag-slim .phui-tag-core {
177
184
font-size: {$smallerfontsize};
178
185
}
186
+
179
187
180
188
/* - Red -------------------------------------------------------------------- */
181
189
182
-
.phui-tag-shade-red .phui-tag-core,
190
+
.phui-tag-red .phui-tag-core,
183
191
.jx-tokenizer-token.red {
184
192
background: {$sh-redbackground};
185
193
border-color: {$sh-lightredborder};
186
194
color: {$sh-redtext};
187
195
}
188
196
189
-
.phui-tag-shade-red .phui-icon-view,
197
+
.phui-tag-red .phui-icon-view,
190
198
.jx-tokenizer-token.red .phui-icon-view,
191
199
.jx-tokenizer-token.red .jx-tokenizer-x {
192
200
color: {$sh-redicon};
193
201
}
194
202
195
-
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core,
203
+
a.phui-tag-view:hover.phui-tag-red .phui-tag-core,
196
204
.jx-tokenizer-token.red:hover {
197
205
border-color: {$sh-redborder};
198
206
}
199
207
200
208
/* - Orange ----------------------------------------------------------------- */
201
209
202
-
.phui-tag-shade-orange .phui-tag-core,
210
+
.phui-tag-orange .phui-tag-core,
203
211
.jx-tokenizer-token.orange {
204
212
background: {$sh-orangebackground};
205
213
border-color: {$sh-lightorangeborder};
206
214
color: {$sh-orangetext};
207
215
}
208
216
209
-
.phui-tag-shade-orange .phui-icon-view,
217
+
.phui-tag-orange .phui-icon-view,
210
218
.jx-tokenizer-token.orange .phui-icon-view,
211
219
.jx-tokenizer-token.orange .jx-tokenizer-x {
212
220
color: {$sh-orangeicon};
213
221
}
214
222
215
-
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core,
223
+
a.phui-tag-view:hover.phui-tag-orange .phui-tag-core,
216
224
.jx-tokenizer-token.orange:hover {
217
225
border-color: {$sh-orangeborder};
218
226
}
219
227
220
228
/* - Yellow ----------------------------------------------------------------- */
221
229
222
-
.phui-tag-shade-yellow .phui-tag-core,
230
+
.phui-tag-yellow .phui-tag-core,
223
231
.jx-tokenizer-token.yellow {
224
232
background: {$sh-yellowbackground};
225
233
border-color: {$sh-lightyellowborder};
226
234
color: {$sh-yellowtext};
227
235
}
228
236
229
-
.phui-tag-shade-yellow .phui-icon-view,
237
+
.phui-tag-yellow .phui-icon-view,
230
238
.jx-tokenizer-token.yellow .phui-icon-view,
231
239
.jx-tokenizer-token.yellow .jx-tokenizer-x {
232
240
color: {$sh-yellowicon};
233
241
}
234
242
235
-
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core,
243
+
a.phui-tag-view:hover.phui-tag-yellow .phui-tag-core,
236
244
.jx-tokenizer-token.yellow:hover {
237
245
border-color: {$sh-yellowborder};
238
246
}
239
247
240
248
/* - Blue ------------------------------------------------------------------- */
241
249
242
-
.phui-tag-shade-blue .phui-tag-core,
250
+
.phui-tag-blue .phui-tag-core,
243
251
.jx-tokenizer-token.blue {
244
252
background: {$sh-bluebackground};
245
253
border-color: {$sh-lightblueborder};
246
254
color: {$sh-bluetext};
247
255
}
248
256
249
-
.phui-tag-shade-blue .phui-icon-view,
257
+
.phui-tag-blue .phui-icon-view,
250
258
.jx-tokenizer-token.blue .phui-icon-view,
251
259
.jx-tokenizer-token.blue .jx-tokenizer-x {
252
260
color: {$sh-blueicon};
253
261
}
254
262
255
-
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
263
+
a.phui-tag-view:hover.phui-tag-blue .phui-tag-core,
256
264
.jx-tokenizer-token.blue:hover {
257
265
border-color: {$sh-blueborder};
258
266
}
259
267
260
268
/* - Sky ------------------------------------------------------------------- */
261
269
262
-
.phui-tag-shade-sky .phui-tag-core,
270
+
.phui-tag-sky .phui-tag-core,
263
271
.jx-tokenizer-token.sky {
264
272
background: #E0F0FA;
265
273
border-color: {$sh-lightblueborder};
266
274
color: {$sh-bluetext};
267
275
}
268
276
269
-
.phui-tag-shade-sky .phui-icon-view,
277
+
.phui-tag-sky .phui-icon-view,
270
278
.jx-tokenizer-token.sky .phui-icon-view,
271
279
.jx-tokenizer-token.sky .jx-tokenizer-x {
272
280
color: {$sh-blueicon};
273
281
}
274
282
275
-
a.phui-tag-view:hover.phui-tag-shade-sky .phui-tag-core,
283
+
a.phui-tag-view:hover.phui-tag-sky .phui-tag-core,
276
284
.jx-tokenizer-token.sky:hover {
277
285
border-color: {$sh-blueborder};
278
286
}
279
287
280
288
/* - Indigo ----------------------------------------------------------------- */
281
289
282
-
.phui-tag-shade-indigo .phui-tag-core,
290
+
.phui-tag-indigo .phui-tag-core,
283
291
.jx-tokenizer-token.indigo {
284
292
background: {$sh-indigobackground};
285
293
border-color: {$sh-lightindigoborder};
286
294
color: {$sh-indigotext};
287
295
}
288
296
289
-
.phui-tag-shade-indigo .phui-icon-view,
297
+
.phui-tag-indigo .phui-icon-view,
290
298
.jx-tokenizer-token.indigo .phui-icon-view,
291
299
.jx-tokenizer-token.indigo .jx-tokenizer-x {
292
300
color: {$sh-indigoicon};
293
301
}
294
302
295
-
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core,
303
+
a.phui-tag-view:hover.phui-tag-indigo .phui-tag-core,
296
304
.jx-tokenizer-token.indigo:hover {
297
305
border-color: {$sh-indigoborder};
298
306
}
299
307
300
308
/* - Green ------------------------------------------------------------------ */
301
309
302
-
.phui-tag-shade-green .phui-tag-core,
310
+
.phui-tag-green .phui-tag-core,
303
311
.jx-tokenizer-token.green {
304
312
background: {$sh-greenbackground};
305
313
border-color: {$sh-lightgreenborder};
306
314
color: {$sh-greentext};
307
315
}
308
316
309
-
.phui-tag-shade-green .phui-icon-view,
317
+
.phui-tag-green .phui-icon-view,
310
318
.jx-tokenizer-token.green .phui-icon-view,
311
319
.jx-tokenizer-token.green .jx-tokenizer-x {
312
320
color: {$sh-greenicon};
313
321
}
314
322
315
-
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core,
323
+
a.phui-tag-view:hover.phui-tag-green .phui-tag-core,
316
324
.jx-tokenizer-token.green:hover {
317
325
border-color: {$sh-greenborder};
318
326
}
319
327
320
328
/* - Violet ----------------------------------------------------------------- */
321
329
322
-
.phui-tag-shade-violet .phui-tag-core,
330
+
.phui-tag-violet .phui-tag-core,
323
331
.jx-tokenizer-token.violet {
324
332
background: {$sh-violetbackground};
325
333
border-color: {$sh-lightvioletborder};
326
334
color: {$sh-violettext};
327
335
}
328
336
329
-
.phui-tag-shade-violet .phui-icon-view,
337
+
.phui-tag-violet .phui-icon-view,
330
338
.jx-tokenizer-token.violet .phui-icon-view,
331
339
.jx-tokenizer-token.violet .jx-tokenizer-x {
332
340
color: {$sh-violeticon};
333
341
}
334
342
335
-
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core,
343
+
a.phui-tag-view:hover.phui-tag-violet .phui-tag-core,
336
344
.jx-tokenizer-token.violet:hover {
337
345
border-color: {$sh-violetborder};
338
346
}
339
347
340
348
/* - Pink ------------------------------------------------------------------- */
341
349
342
-
.phui-tag-shade-pink .phui-tag-core,
350
+
.phui-tag-pink .phui-tag-core,
343
351
.jx-tokenizer-token.pink {
344
352
background: {$sh-pinkbackground};
345
353
border-color: {$sh-lightpinkborder};
346
354
color: {$sh-pinktext};
347
355
}
348
356
349
-
.phui-tag-shade-pink .phui-icon-view,
357
+
.phui-tag-pink .phui-icon-view,
350
358
.jx-tokenizer-token.pink .phui-icon-view,
351
359
.jx-tokenizer-token.pink .jx-tokenizer-x {
352
360
color: {$sh-pinkicon};
353
361
}
354
362
355
-
a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core,
363
+
a.phui-tag-view:hover.phui-tag-pink .phui-tag-core,
356
364
.jx-tokenizer-token.pink:hover {
357
365
border-color: {$sh-pinkborder};
358
366
}
359
367
360
368
/* - Grey ------------------------------------------------------------------- */
361
369
362
-
.phui-tag-shade-grey .phui-tag-core,
370
+
.phui-tag-grey .phui-tag-core,
363
371
.jx-tokenizer-token.grey {
364
372
background: {$sh-greybackground};
365
373
border-color: {$sh-lightgreyborder};
366
374
color: {$sh-greytext};
367
375
}
368
376
369
-
.phui-tag-shade-grey .phui-icon-view,
377
+
.phui-tag-grey .phui-icon-view,
370
378
.jx-tokenizer-token.grey .phui-icon-view,
371
379
.jx-tokenizer-token.grey .jx-tokenizer-x {
372
380
color: {$sh-greyicon};
373
381
}
374
382
375
-
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
383
+
a.phui-tag-view:hover.phui-tag-grey .phui-tag-core,
376
384
.jx-tokenizer-token.grey:hover {
377
385
border-color: {$sh-greyborder};
378
386
}
379
387
380
388
/* - Checkered -------------------------------------------------------------- */
381
389
382
-
.phui-tag-shade-checkered .phui-tag-core,
390
+
.phui-tag-checkered .phui-tag-core,
383
391
.jx-tokenizer-token.checkered {
384
392
background: url(/rsrc/image/checker_lighter.png);
385
393
border-style: dashed;
···
388
396
text-shadow: 1px 1px #fff;
389
397
}
390
398
391
-
.phui-tag-shade-checkered .phui-icon-view,
399
+
.phui-tag-checkered .phui-icon-view,
392
400
.jx-tokenizer-token.checkered .phui-icon-view,
393
401
.jx-tokenizer-token.checkered .jx-tokenizer-x {
394
402
color: {$sh-greyicon};
395
403
}
396
404
397
-
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
405
+
a.phui-tag-view:hover.phui-tag-checkered .phui-tag-core,
398
406
.jx-tokenizer-token.checkered:hover {
399
407
border-style: solid;
400
408
border-color: {$sh-greyborder};
···
402
410
403
411
/* - Disabled --------------------------------------------------------------- */
404
412
405
-
.phui-tag-shade-disabled .phui-tag-core {
413
+
.phui-tag-disabled .phui-tag-core {
406
414
background-color: {$sh-disabledbackground};
407
415
border-color: {$sh-lightdisabledborder};
408
416
color: {$sh-disabledtext};
409
417
}
410
418
411
-
.phui-tag-shade-disabled .phui-icon-view {
419
+
.phui-tag-disabled .phui-icon-view {
412
420
color: {$sh-disabledicon};
413
421
}
414
422
415
-
a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
423
+
a.phui-tag-view:hover.phui-tag-disabled .phui-tag-core {
416
424
border-color: {$sh-disabledborder};
417
425
}
426
+
427
+
/* - Outline Tags --------------------------------------------------------------
428
+
429
+
Basic Tag with a bold border and white background
430
+
431
+
*/
432
+
433
+
.phui-tag-type-outline {
434
+
text-transform: uppercase;
435
+
font-weight: normal;
436
+
}
437
+
438
+
.phui-tag-view.phui-tag-type-outline .phui-tag-core {
439
+
background: #fff;
440
+
padding: 0 6px 1px 6px;
441
+
}
442
+
443
+
.phui-tag-slim.phui-tag-type-outline .phui-tag-core {
444
+
font-size: {$smallestfontsize};
445
+
}
446
+
447
+
.phui-tag-type-outline.phui-tag-red .phui-tag-core {
448
+
color: {$red};
449
+
border-color: {$red};
450
+
}
451
+
452
+
.phui-tag-type-outline.phui-tag-orange .phui-tag-core {
453
+
color: {$orange};
454
+
border-color: {$orange};
455
+
}
456
+
457
+
.phui-tag-type-outline.phui-tag-yellow .phui-tag-core {
458
+
color: {$yellow};
459
+
border-color: {$yellow};
460
+
}
461
+
462
+
.phui-tag-type-outline.phui-tag-green .phui-tag-core {
463
+
color: {$green};
464
+
border-color: {$green};
465
+
}
466
+
467
+
.phui-tag-type-outline.phui-tag-blue .phui-tag-core {
468
+
color: {$blue};
469
+
border-color: {$blue};
470
+
}
471
+
472
+
.phui-tag-type-outline.phui-tag-indigo .phui-tag-core {
473
+
color: {$indigo};
474
+
border-color: {$indigo};
475
+
}
476
+
477
+
.phui-tag-type-outline.phui-tag-violet .phui-tag-core {
478
+
color: {$violet};
479
+
border-color: {$violet};
480
+
}
481
+
482
+
.phui-tag-type-outline.phui-tag-grey .phui-tag-core {
483
+
color: {$bluetext};
484
+
border-color: {$bluetext};
485
+
}
486
+
487
+
.phui-tag-type-outline.phui-tag-disabled .phui-tag-core {
488
+
color: {$lightgreytext};
489
+
border-color: {$lightgreytext};
490
+
}
491
+
492
+
.phui-tag-type-outline.phui-tag-pink .phui-tag-core {
493
+
color: {$pink};
494
+
border-color: {$pink};
495
+
}
496
+
497
+
.phui-tag-type-outline.phui-tag-sky .phui-tag-core {
498
+
color: {$sky};
499
+
border-color: {$sky};
500
+
}
501
+
502
+
.phui-tag-type-outline.phui-tag-fire .phui-tag-core {
503
+
color: {$fire};
504
+
border-color: {$fire};
505
+
}
506
+
507
+
.phui-tag-type-outline.phui-tag-black .phui-tag-core {
508
+
color: #000;
509
+
border-color: #000;
510
+
}