diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
return array(
'names' =>
array(
- 'core.pkg.css' => '47277ca5',
+ 'core.pkg.css' => 'c2e44da2',
'core.pkg.js' => '8c184823',
'darkconsole.pkg.js' => 'df001cab',
'differential.pkg.css' => '4a93db37',
@@ -142,7 +142,7 @@
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
'rsrc/css/phui/phui-spacing.css' => '042804d6',
'rsrc/css/phui/phui-status.css' => '2f562399',
- 'rsrc/css/phui/phui-tag-view.css' => '652934b3',
+ 'rsrc/css/phui/phui-tag-view.css' => '67017012',
'rsrc/css/phui/phui-text.css' => '23e9b4b7',
'rsrc/css/phui/phui-timeline-view.css' => 'bbd990d0',
'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
@@ -787,7 +787,7 @@
'phui-remarkup-preview-css' => '19ad512b',
'phui-spacing-css' => '042804d6',
'phui-status-list-view-css' => '2f562399',
- 'phui-tag-view-css' => '652934b3',
+ 'phui-tag-view-css' => '67017012',
'phui-text-css' => '23e9b4b7',
'phui-timeline-view-css' => 'bbd990d0',
'phui-workboard-view-css' => '2bf82d00',
diff --git a/src/applications/uiexample/examples/PHUITagExample.php b/src/applications/uiexample/examples/PHUITagExample.php
--- a/src/applications/uiexample/examples/PHUITagExample.php
+++ b/src/applications/uiexample/examples/PHUITagExample.php
@@ -163,7 +163,8 @@
->setType(PHUITagView::TYPE_OBJECT)
->setShade($shade)
->setIcon('fa-tags')
- ->setName(ucwords($shade));
+ ->setName(ucwords($shade))
+ ->setHref('#');
$tags[] = hsprintf('
');
}
diff --git a/src/infrastructure/celerity/CelerityResourceTransformer.php b/src/infrastructure/celerity/CelerityResourceTransformer.php
--- a/src/infrastructure/celerity/CelerityResourceTransformer.php
+++ b/src/infrastructure/celerity/CelerityResourceTransformer.php
@@ -222,16 +222,89 @@
'darkbluetext' => '#464C5C',
// Base Greens
- 'lightgreenborder' => '#bfdac1',
- 'greenborder' => '#8cb89c',
+ 'lightgreenborder' => '#bfdac1',
+ 'greenborder' => '#8cb89c',
+ 'greentext' => '#3e6d35',
+ 'lightgreenbackground' => '#e6f2e4',
// Base Red
- 'lightredborder' => '#f4c6c6',
- 'redborder' => '#eb9797',
+ 'lightredborder' => '#f4c6c6',
+ 'redborder' => '#eb9797',
+ 'redtext' => '#802b2b',
+ 'lightredbackground' => '#f5e1e1',
// Base Violet
- 'lightvioletborder' => '#cfbddb',
- 'violetborder' => '#b589ba',
+ 'lightvioletborder' => '#cfbddb',
+ 'violetborder' => '#b589ba',
+ 'violettext' => '#603c73',
+ 'lightvioletbackground' => '#e9dfee',
+
+ // Shades are a more muted set of our base colors
+ // better suited to blending into other UIs.
+
+ // Shade Red
+ 'sh-lightredborder' => '#eac0c0',
+ 'sh-redborder' => '#d1abab',
+ 'sh-redicon' => '#c85a5a',
+ 'sh-redtext' => '#a53737',
+ 'sh-redbackground' => '#f7e6e6',
+
+ // Shade Orange
+ 'sh-lightorangeborder' => '#f6d0b1',
+ 'sh-orangeborder' => '#dbb99e',
+ 'sh-orangeicon' => '#e78331',
+ 'sh-orangetext' => '#ba6016',
+ 'sh-orangebackground' => '#fbede1',
+
+ // Shade Yellow
+ 'sh-lightyellowborder' => '#e2cfbd',
+ 'sh-yellowborder' => '#c9b8a8',
+ 'sh-yellowicon' => '#9b946e',
+ 'sh-yellowtext' => '#726f56',
+ 'sh-yellowbackground' => '#fdf3da',
+
+ // Shade Green
+ 'sh-lightgreenborder' => '#b4ddb5',
+ 'sh-greenborder' => '#a0c4a1',
+ 'sh-greenicon' => '#4ca74e',
+ 'sh-greentext' => '#326d34',
+ 'sh-greenbackground' => '#ddefdd',
+
+ // Shade Blue
+ 'sh-lightblueborder' => '#bfcfda',
+ 'sh-blueborder' => '#a7b5bf',
+ 'sh-blueicon' => '#6b748c',
+ 'sh-bluetext' => '#464c5c',
+ 'sh-bluebackground' => '#dee7f8',
+
+ // Shade Indigo
+ 'sh-lightindigoborder' => '#f3c7ea',
+ 'sh-indigoborder' => '#d5aecd',
+ 'sh-indigoicon' => '#e26fcb',
+ 'sh-indigotext' => '#da49be',
+ 'sh-indigobackground' => '#fbeaf8',
+
+ // Shade Violet
+ 'sh-lightvioletborder' => '#d5c2df',
+ 'sh-violetborder' => '#bcabc5',
+ 'sh-violeticon' => '#9260ad',
+ 'sh-violettext' => '#69427f',
+ 'sh-violetbackground' => '#efe8f3',
+
+ // Shade Grey
+ 'sh-lightgreyborder' => '#cbcbcb',
+ 'sh-greyborder' => '#b2b2b2',
+ 'sh-greyicon' => '#757575',
+ 'sh-greytext' => '#555555',
+ 'sh-greybackground' => '#e7e7e7',
+
+ // Shade Disabled
+ 'sh-lightdisabledborder' => '#e5e5e5',
+ 'sh-disabledborder' => '#cbcbcb',
+ 'sh-disabledicon' => '#bababa',
+ 'sh-disabledtext' => '#a6a6a6',
+ 'sh-disabledbackground' => '#f3f3f3',
+
);
}
diff --git a/src/view/phui/PHUITagView.php b/src/view/phui/PHUITagView.php
--- a/src/view/phui/PHUITagView.php
+++ b/src/view/phui/PHUITagView.php
@@ -19,6 +19,7 @@
const COLOR_WHITE = 'white';
const COLOR_BLUEGREY = 'bluegrey';
const COLOR_CHECKERED = 'checkered';
+ const COLOR_DISABLED = 'disabled';
const COLOR_OBJECT = 'object';
const COLOR_PERSON = 'person';
@@ -113,7 +114,7 @@
$color = null;
if ($this->shade) {
$classes[] = 'phui-tag-shade';
- $color = 'phui-tag-shade-'.$this->shade;
+ $classes[] = 'phui-tag-shade-'.$this->shade;;
} else if ($this->backgroundColor) {
$color = 'phui-tag-color-'.$this->backgroundColor;
}
@@ -132,7 +133,7 @@
if ($this->icon) {
$icon = id(new PHUIIconView())
- ->setIconFont($this->icon, $this->shade);
+ ->setIconFont($this->icon);
$classes[] = 'phui-tag-icon-view';
} else {
$icon = null;
@@ -218,10 +219,9 @@
self::COLOR_INDIGO,
self::COLOR_VIOLET,
self::COLOR_GREEN,
- self::COLOR_BLACK,
self::COLOR_GREY,
- self::COLOR_BLUEGREY,
self::COLOR_CHECKERED,
+ self::COLOR_DISABLED,
);
}
diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@@ -132,6 +132,22 @@
border-color: #f1f7ff;
}
+a.phui-tag-view:hover
+ .phui-tag-core.phui-tag-color-person {
+ border-color: #d9ebfd;
+}
+
+a.phui-tag-view:hover
+ .phui-tag-core.phui-tag-color-object {
+ border-color: #d7d7d7;
+}
+
+/* - Shaded Tags ---------------------------------------------------------------
+
+ For object representation inside text areas and lists.
+
+*/
+
.phui-tag-shade {
font-weight: normal;
}
@@ -139,81 +155,148 @@
.phui-tag-shade .phui-icon-view {
font-size: 12px;
top: 2px;
+ left: 6px;
}
-.phui-tag-shade-bluegrey {
- background-color: {$lightbluebackground};
- border-color: {$lightbluetext};
- color: {$bluetext};
+.phui-tag-shade-red .phui-tag-core {
+ background-color: {$sh-redbackground};
+ border-color: {$sh-lightredborder};
+ color: {$sh-redtext};
}
-.phui-tag-shade-red {
- background-color: {$lightred};
- border-color: {$red};
- color: {$red}
+.phui-tag-shade-red .phui-icon-view {
+ color: {$sh-redicon};
}
-.phui-tag-shade-orange {
- background-color: {$lightorange};
- border-color: {$orange};
- color: {$orange};
+a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core {
+ border-color: {$sh-redborder};
}
-.phui-tag-shade-yellow {
- background-color: {$lightyellow};
- border-color: {$yellow};
- color: {$yellow};
+.phui-tag-shade-orange .phui-tag-core {
+ background-color: {$sh-orangebackground};
+ border-color: {$sh-lightorangeborder};
+ color: {$sh-orangetext};
}
-.phui-tag-shade-blue {
- background-color: {$lightblue};
- border-color: {$blue};
- color: {$blue};
+.phui-tag-shade-orange .phui-icon-view {
+ color: {$sh-orangeicon};
}
-.phui-tag-shade-indigo {
- background-color: {$lightindigo};
- border-color: {$indigo};
- color: {$indigo};
+a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core {
+ border-color: {$sh-orangeborder};
}
-.phui-tag-shade-green {
- background-color: {$lightgreen};
- border-color: {$green};
- color: {$green};
+.phui-tag-shade-yellow .phui-tag-core {
+ background-color: {$sh-yellowbackground};
+ border-color: {$sh-lightyellowborder};
+ color: {$sh-yellowtext};
}
-.phui-tag-shade-violet {
- background-color: {$lightviolet};
- border-color: {$violet};
- color: {$violet};
+.phui-tag-shade-yellow .phui-icon-view {
+ color: {$sh-yellowicon};
}
-.phui-tag-shade-black {
- background-color: {$darkgreybackground};
- border-color: #333333;
+a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core {
+ border-color: {$sh-yellowborder};
}
-.phui-tag-shade-grey {
- background-color: {$lightgreybackground};
- border-color: {$lightgreytext};
- color: {$lightgreytext};
+.phui-tag-shade-blue .phui-tag-core {
+ background-color: {$sh-bluebackground};
+ border-color: {$sh-lightblueborder};
+ color: {$sh-bluetext};
+}
+
+.phui-tag-shade-blue .phui-icon-view {
+ color: {$sh-blueicon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core {
+ border-color: {$sh-blueborder};
+}
+
+.phui-tag-shade-indigo .phui-tag-core {
+ background-color: {$sh-indigobackground};
+ border-color: {$sh-lightindigoborder};
+ color: {$sh-indigotext};
+}
+
+.phui-tag-shade-indigo .phui-icon-view {
+ color: {$sh-indigoicon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core {
+ border-color: {$sh-indigoborder};
+}
+
+.phui-tag-shade-green .phui-tag-core {
+ background-color: {$sh-greenbackground};
+ border-color: {$sh-lightgreenborder};
+ color: {$sh-greentext};
+}
+
+.phui-tag-shade-green .phui-icon-view {
+ color: {$sh-greenicon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core {
+ border-color: {$sh-greenborder};
+}
+
+.phui-tag-shade-violet .phui-tag-core {
+ background-color: {$sh-violetbackground};
+ border-color: {$sh-lightvioletborder};
+ color: {$sh-violettext};
+}
+
+.phui-tag-shade-violet .phui-icon-view {
+ color: {$sh-violeticon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core {
+ border-color: {$sh-violetborder};
+}
+
+.phui-tag-shade-grey .phui-tag-core {
+ background-color: {$sh-greybackground};
+ border-color: {$sh-lightgreyborder};
+ color: {$sh-greytext};
}
-.phui-tag-shade-checkered {
- background: url(/rsrc/image/checker_light.png);
+.phui-tag-shade-grey .phui-icon-view {
+ color: {$sh-greyicon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
+ border-color: {$sh-greyborder};
+}
+
+.phui-tag-shade-checkered .phui-tag-core {
+ background: url(/rsrc/image/checker_lighter.png);
border-style: dashed;
- border-color: {$greyborder};
- color: black;
+ border-color: {$sh-greyborder};
+ color: {$sh-greytext};
text-shadow: 1px 1px #fff;
}
-a.phui-tag-view:hover
- .phui-tag-core.phui-tag-color-person {
- border-color: #d9ebfd;
+.phui-tag-shade-checkered .phui-icon-view {
+ color: {$sh-greyicon};
}
-a.phui-tag-view:hover
- .phui-tag-core.phui-tag-color-object {
- border-color: #d7d7d7;
+a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
+ border-style: solid;
+ border-color: {$sh-greyborder};
+}
+
+.phui-tag-shade-disabled .phui-tag-core {
+ background-color: {$sh-disabledbackground};
+ border-color: {$sh-lightdisabledborder};
+ color: {$sh-disabledtext};
+}
+
+.phui-tag-shade-disabled .phui-icon-view {
+ color: {$sh-disabledicon};
+}
+
+a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
+ border-color: {$sh-disabledborder};
}