1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 12:52:42 +01:00

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
This commit is contained in:
Chad Little 2015-04-19 09:08:19 -07:00
parent 8f61eb45ab
commit 6c0b8b7d04
3 changed files with 156 additions and 97 deletions

View file

@ -7,8 +7,8 @@
*/
return array(
'names' => array(
'core.pkg.css' => 'bf29d341',
'core.pkg.js' => '347cd64a',
'core.pkg.css' => '7d05ad2a',
'core.pkg.js' => 'a626d14c',
'darkconsole.pkg.js' => '8ab24e01',
'differential.pkg.css' => '3500921f',
'differential.pkg.js' => 'c0506961',
@ -27,7 +27,7 @@ return array(
'rsrc/css/aphront/panel-view.css' => '8427b78d',
'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
'rsrc/css/aphront/table-view.css' => '59e2c0f8',
'rsrc/css/aphront/tokenizer.css' => 'c10c061e',
'rsrc/css/aphront/tokenizer.css' => '86a13f7f',
'rsrc/css/aphront/tooltip.css' => '7672b60f',
'rsrc/css/aphront/two-column.css' => '16ab3ad2',
'rsrc/css/aphront/typeahead-browse.css' => 'efe293a0',
@ -147,7 +147,7 @@ return array(
'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
'rsrc/css/phui/phui-spacing.css' => '042804d6',
'rsrc/css/phui/phui-status.css' => '888cedb8',
'rsrc/css/phui/phui-tag-view.css' => 'ea469f3a',
'rsrc/css/phui/phui-tag-view.css' => '402691cc',
'rsrc/css/phui/phui-text.css' => 'cf019f54',
'rsrc/css/phui/phui-timeline-view.css' => 'b0fbc4d7',
'rsrc/css/phui/phui-workboard-view.css' => '3279cbbf',
@ -450,7 +450,7 @@ return array(
'rsrc/js/core/KeyboardShortcutManager.js' => 'c1700f6f',
'rsrc/js/core/MultirowRowManager.js' => 'b5d57730',
'rsrc/js/core/Notification.js' => '0c6946e7',
'rsrc/js/core/Prefab.js' => '4c292cc5',
'rsrc/js/core/Prefab.js' => 'b972bdcd',
'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
'rsrc/js/core/TextAreaUtils.js' => '5c93c52c',
'rsrc/js/core/Title.js' => 'df5e11d2',
@ -510,7 +510,7 @@ return array(
'aphront-pager-view-css' => '2e3539af',
'aphront-panel-view-css' => '8427b78d',
'aphront-table-view-css' => '59e2c0f8',
'aphront-tokenizer-control-css' => 'c10c061e',
'aphront-tokenizer-control-css' => '86a13f7f',
'aphront-tooltip-css' => '7672b60f',
'aphront-two-column-view-css' => '16ab3ad2',
'aphront-typeahead-control-css' => '0e403212',
@ -744,7 +744,7 @@ return array(
'phabricator-notification-menu-css' => '3c9d8aa1',
'phabricator-object-selector-css' => '029a133d',
'phabricator-phtize' => 'd254d646',
'phabricator-prefab' => '4c292cc5',
'phabricator-prefab' => 'b972bdcd',
'phabricator-profile-css' => '1a20dcbf',
'phabricator-remarkup-css' => 'e10512ff',
'phabricator-search-results-css' => '15c71110',
@ -806,7 +806,7 @@ return array(
'phui-remarkup-preview-css' => '19ad512b',
'phui-spacing-css' => '042804d6',
'phui-status-list-view-css' => '888cedb8',
'phui-tag-view-css' => 'ea469f3a',
'phui-tag-view-css' => '402691cc',
'phui-text-css' => 'cf019f54',
'phui-timeline-view-css' => 'b0fbc4d7',
'phui-workboard-view-css' => '3279cbbf',
@ -1158,18 +1158,6 @@ return array(
'4a2430d7' => array(
'phui-fontkit-css',
),
'4c292cc5' => array(
'javelin-install',
'javelin-util',
'javelin-dom',
'javelin-typeahead',
'javelin-tokenizer',
'javelin-typeahead-preloaded-source',
'javelin-typeahead-ondemand-source',
'javelin-dom',
'javelin-stratcom',
'javelin-util',
),
'4d94d9c3' => array(
'javelin-behavior',
'javelin-stratcom',
@ -1481,6 +1469,10 @@ return array(
'phabricator-tooltip',
'changeset-view-manager',
),
'86a13f7f' => array(
'aphront-typeahead-control-css',
'phui-tag-view-css',
),
'87cb6b51' => array(
'javelin-behavior',
'javelin-dom',
@ -1719,6 +1711,18 @@ return array(
'javelin-dom',
'javelin-util',
),
'b972bdcd' => array(
'javelin-install',
'javelin-util',
'javelin-dom',
'javelin-typeahead',
'javelin-tokenizer',
'javelin-typeahead-preloaded-source',
'javelin-typeahead-ondemand-source',
'javelin-dom',
'javelin-stratcom',
'javelin-util',
),
'bba9eedf' => array(
'javelin-behavior',
'javelin-stratcom',
@ -1764,9 +1768,6 @@ return array(
'javelin-util',
'phabricator-shaped-request',
),
'c10c061e' => array(
'aphront-typeahead-control-css',
),
'c1700f6f' => array(
'javelin-install',
'javelin-util',

View file

@ -1,6 +1,7 @@
/**
* @provides aphront-tokenizer-control-css
* @requires aphront-typeahead-control-css
* @requires phui-tag-view-css
*/
body div.jx-tokenizer {
@ -52,6 +53,7 @@ body input.jx-typeahead-placeholder {
a.jx-tokenizer-x {
margin-left: 4px;
color: {$bluetext};
float: right;
}
a.jx-tokenizer-x:hover {
@ -60,57 +62,50 @@ a.jx-tokenizer-x:hover {
}
a.jx-tokenizer-token {
padding: 2px 6px 3px;
padding: 2px 6px;
border: 1px solid {$lightblueborder};
margin: 3px 2px 0 4px;
background: #dee7f8;
background-color: {$sh-bluebackground};
float: left;
cursor: pointer;
border-radius: 3px;
color: {$darkbluetext};
color: {$sh-bluetext};
min-height: 16px;
}
a.jx-tokenizer-token:hover {
text-decoration: none;
border-color: {$blueborder};
background: #CDD9F0;
border-color: {$sh-blueborder};
}
.jx-tokenizer-token .phui-icon-view {
display: inline-block;
margin: 2px 4px -3px 0;
color: {$bluetext};
color: {$sh-blueicon};
}
a.jx-tokenizer-token-function {
border-color: {$sh-lightyellowborder};
background: {$sh-yellowbackground};
color: {$sh-yellowtext};
border-color: {$sh-lightgreyborder};
background: #fff;
}
a.jx-tokenizer-token-function:hover {
border-color: {$sh-yellowborder};
background: {$lightyellow};
}
.jx-tokenizer-token-function .phui-icon-view {
color: {$sh-yellowicon};
background: #fff;
}
a.jx-tokenizer-token-disabled {
border-color: {$sh-lightgreyborder};
background: {$sh-greybackground};
color: {$sh-greytext};
background-color: {$sh-disabledbackground};
border-color: {$sh-lightdisabledborder};
color: {$sh-disabledtext};
}
a.jx-tokenizer-token-disabled:hover {
border-color: {$sh-greyborder};
background: {$greybackground};
border-color: {$sh-disabledborder};
background-color: {$sh-disabledbackground};
}
.jx-tokenizer-token-disabled .phui-icon-view {
color: {$sh-greyicon};
color: {$sh-disabledicon};
}
a.jx-tokenizer-token-invalid {
@ -121,7 +116,7 @@ a.jx-tokenizer-token-invalid {
a.jx-tokenizer-token-invalid:hover {
border-color: {$sh-redborder};
background: {$lightred};
background: {$sh-redbackground};
}
.jx-tokenizer-token-invalid .phui-icon-view {

View file

@ -140,6 +140,20 @@ a.phui-tag-view:hover
border-color: #d7d7d7;
}
.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
margin-top: 4px;
}
.phui-object-item .phabricator-handle-tag-list {
display: inline;
}
.phui-object-item .phabricator-handle-tag-list-item {
display: inline;
margin: 0 4px 2px 0;
}
/* - Shaded Tags ---------------------------------------------------------------
For object representation inside text areas and lists.
@ -162,133 +176,190 @@ a.phui-tag-view:hover
font-size: 12px;
}
.phui-tag-shade-red .phui-tag-core {
background-color: {$sh-redbackground};
/* - Red -------------------------------------------------------------------- */
.phui-tag-shade-red .phui-tag-core,
.jx-tokenizer-token.red {
background: {$sh-redbackground};
border-color: {$sh-lightredborder};
color: {$sh-redtext};
}
.phui-tag-shade-red .phui-icon-view {
.phui-tag-shade-red .phui-icon-view,
.jx-tokenizer-token.red .phui-icon-view,
.jx-tokenizer-token.red .jx-tokenizer-x {
color: {$sh-redicon};
}
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core,
.jx-tokenizer-token.red:hover {
border-color: {$sh-redborder};
}
.phui-tag-shade-orange .phui-tag-core {
background-color: {$sh-orangebackground};
/* - Orange ----------------------------------------------------------------- */
.phui-tag-shade-orange .phui-tag-core,
.jx-tokenizer-token.orange {
background: {$sh-orangebackground};
border-color: {$sh-lightorangeborder};
color: {$sh-orangetext};
}
.phui-tag-shade-orange .phui-icon-view {
.phui-tag-shade-orange .phui-icon-view,
.jx-tokenizer-token.orange .phui-icon-view,
.jx-tokenizer-token.orange .jx-tokenizer-x {
color: {$sh-orangeicon};
}
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core,
.jx-tokenizer-token.orange:hover {
border-color: {$sh-orangeborder};
}
.phui-tag-shade-yellow .phui-tag-core {
background-color: {$sh-yellowbackground};
/* - Yellow ----------------------------------------------------------------- */
.phui-tag-shade-yellow .phui-tag-core,
.jx-tokenizer-token.yellow {
background: {$sh-yellowbackground};
border-color: {$sh-lightyellowborder};
color: {$sh-yellowtext};
}
.phui-tag-shade-yellow .phui-icon-view {
.phui-tag-shade-yellow .phui-icon-view,
.jx-tokenizer-token.yellow .phui-icon-view,
.jx-tokenizer-token.yellow .jx-tokenizer-x {
color: {$sh-yellowicon};
}
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core,
.jx-tokenizer-token.yellow:hover {
border-color: {$sh-yellowborder};
}
.phui-tag-shade-blue .phui-tag-core {
background-color: {$sh-bluebackground};
/* - Blue ------------------------------------------------------------------- */
.phui-tag-shade-blue .phui-tag-core,
.jx-tokenizer-token.blue {
background: {$sh-bluebackground};
border-color: {$sh-lightblueborder};
color: {$sh-bluetext};
}
.phui-tag-shade-blue .phui-icon-view {
.phui-tag-shade-blue .phui-icon-view,
.jx-tokenizer-token.blue .phui-icon-view,
.jx-tokenizer-token.blue .jx-tokenizer-x {
color: {$sh-blueicon};
}
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
.jx-tokenizer-token.blue:hover {
border-color: {$sh-blueborder};
}
.phui-tag-shade-indigo .phui-tag-core {
background-color: {$sh-indigobackground};
/* - Indigo ----------------------------------------------------------------- */
.phui-tag-shade-indigo .phui-tag-core,
.jx-tokenizer-token.indigo {
background: {$sh-indigobackground};
border-color: {$sh-lightindigoborder};
color: {$sh-indigotext};
}
.phui-tag-shade-indigo .phui-icon-view {
.phui-tag-shade-indigo .phui-icon-view,
.jx-tokenizer-token.indigo .phui-icon-view,
.jx-tokenizer-token.indigo .jx-tokenizer-x {
color: {$sh-indigoicon};
}
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core,
.jx-tokenizer-token.indigo:hover {
border-color: {$sh-indigoborder};
}
.phui-tag-shade-green .phui-tag-core {
background-color: {$sh-greenbackground};
/* - Green ------------------------------------------------------------------ */
.phui-tag-shade-green .phui-tag-core,
.jx-tokenizer-token.green {
background: {$sh-greenbackground};
border-color: {$sh-lightgreenborder};
color: {$sh-greentext};
}
.phui-tag-shade-green .phui-icon-view {
.phui-tag-shade-green .phui-icon-view,
.jx-tokenizer-token.green .phui-icon-view,
.jx-tokenizer-token.green .jx-tokenizer-x {
color: {$sh-greenicon};
}
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core,
.jx-tokenizer-token.green:hover {
border-color: {$sh-greenborder};
}
.phui-tag-shade-violet .phui-tag-core {
background-color: {$sh-violetbackground};
/* - Violet ----------------------------------------------------------------- */
.phui-tag-shade-violet .phui-tag-core,
.jx-tokenizer-token.violet {
background: {$sh-violetbackground};
border-color: {$sh-lightvioletborder};
color: {$sh-violettext};
}
.phui-tag-shade-violet .phui-icon-view {
.phui-tag-shade-violet .phui-icon-view,
.jx-tokenizer-token.violet .phui-icon-view,
.jx-tokenizer-token.violet .jx-tokenizer-x {
color: {$sh-violeticon};
}
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core,
.jx-tokenizer-token.violet:hover {
border-color: {$sh-violetborder};
}
.phui-tag-shade-pink .phui-tag-core {
background-color: {$sh-pinkbackground};
/* - Pink ------------------------------------------------------------------- */
.phui-tag-shade-pink .phui-tag-core,
.jx-tokenizer-token.pink {
background: {$sh-pinkbackground};
border-color: {$sh-lightpinkborder};
color: {$sh-pinktext};
}
.phui-tag-shade-pink .phui-icon-view {
.phui-tag-shade-pink .phui-icon-view,
.jx-tokenizer-token.pink .phui-icon-view,
.jx-tokenizer-token.pink .jx-tokenizer-x {
color: {$sh-pinkicon};
}
a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core,
.jx-tokenizer-token.pink:hover {
border-color: {$sh-pinkborder};
}
.phui-tag-shade-grey .phui-tag-core {
background-color: {$sh-greybackground};
/* - Grey ------------------------------------------------------------------- */
.phui-tag-shade-grey .phui-tag-core,
.jx-tokenizer-token.grey {
background: {$sh-greybackground};
border-color: {$sh-lightgreyborder};
color: {$sh-greytext};
}
.phui-tag-shade-grey .phui-icon-view {
.phui-tag-shade-grey .phui-icon-view,
.jx-tokenizer-token.grey .phui-icon-view,
.jx-tokenizer-token.grey .jx-tokenizer-x {
color: {$sh-greyicon};
}
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
.jx-tokenizer-token.grey:hover {
border-color: {$sh-greyborder};
}
.phui-tag-shade-checkered .phui-tag-core {
/* - Checkered -------------------------------------------------------------- */
.phui-tag-shade-checkered .phui-tag-core,
.jx-tokenizer-token.checkered {
background: url(/rsrc/image/checker_lighter.png);
border-style: dashed;
border-color: {$sh-greyborder};
@ -296,15 +367,20 @@ a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
text-shadow: 1px 1px #fff;
}
.phui-tag-shade-checkered .phui-icon-view {
.phui-tag-shade-checkered .phui-icon-view,
.jx-tokenizer-token.checkered .phui-icon-view,
.jx-tokenizer-token.checkered .jx-tokenizer-x {
color: {$sh-greyicon};
}
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
.jx-tokenizer-token.checkered:hover {
border-style: solid;
border-color: {$sh-greyborder};
}
/* - Disabled --------------------------------------------------------------- */
.phui-tag-shade-disabled .phui-tag-core {
background-color: {$sh-disabledbackground};
border-color: {$sh-lightdisabledborder};
@ -318,16 +394,3 @@ a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
border-color: {$sh-disabledborder};
}
.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
margin-top: 4px;
}
.phui-object-item .phabricator-handle-tag-list {
display: inline;
}
.phui-object-item .phabricator-handle-tag-list-item {
display: inline;
margin: 0 4px 2px 0;
}