{"action":"created","comment":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/72487279","id":72487279,"diff_hunk":"@@ -0,0 +1,132 @@\n+define([\n+    'jquery'\n+], function($) {\n+    'use strict';\n+\n+    var $pane = $('#colors-preview .info-pane'),\n+        $title = $($pane).find('.color-info-title'),\n+        $desc = $($pane).find('.color-description'),\n+        $back = $($pane).find('.color-combinations.background'),\n+        $ref = $($pane).find('.color-reference'),\n+        $rgb = $($pane).find('.color-rgb'),\n+        $hex = $($pane).find('.color-hex');\n+\n+    var $button;\n+\n+    var colors;\n+\n+    var ColorHandler = {\n+\n+        init: function() {\n+            ColorHandler.setupJSONColors();\n+            ColorHandler.listenForClick();\n+            ColorHandler.listenForKeypress();\n+            ColorHandler.listenForClose();\n+        },\n+\n+        setupJSONColors: function() {\n+            $.ajax({\n+                async: false,\n+                url: '/public/js/colors.json',\n+                complete: function(data) {\n+                    colors = data.responseJSON;\n+                }\n+            });\n+        },\n+\n+        listenForClick: function() {\n+            var classes;\n+\n+            $('#colors-preview').on('click', 'button.swatch', function() {\n+                $button = $(this);\n+                classes = $($button).attr('class').split(/\\s+/);\n+\n+                ColorHandler.showInformationWindow(classes, $button);\n+            });\n+        },\n+\n+        listenForKeypress: function() {\n+            var key;\n+\n+            $(document).on('keydown', function(e) {\n+                key = e.which;\n+\n+                if (key === 27) {","path":"pldoc/static/js/colors.js","position":44,"original_position":54,"commit_id":"291adf65bca24832c9063af232eb342e7205fbf9","original_commit_id":"12a94f645cdf462a6484a88b89fcd8eecdeaad9a","user":{"login":"bjacobel","id":407639,"avatar_url":"https://avatars.githubusercontent.com/u/407639?v=3","gravatar_id":"","url":"https://api.github.com/users/bjacobel","html_url":"https://github.com/bjacobel","followers_url":"https://api.github.com/users/bjacobel/followers","following_url":"https://api.github.com/users/bjacobel/following{/other_user}","gists_url":"https://api.github.com/users/bjacobel/gists{/gist_id}","starred_url":"https://api.github.com/users/bjacobel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bjacobel/subscriptions","organizations_url":"https://api.github.com/users/bjacobel/orgs","repos_url":"https://api.github.com/users/bjacobel/repos","events_url":"https://api.github.com/users/bjacobel/events{/privacy}","received_events_url":"https://api.github.com/users/bjacobel/received_events","type":"User","site_admin":false},"body":"I'd just add a comment specifying what key 27 is for clarity, then.","created_at":"2016-07-27T17:44:58Z","updated_at":"2016-07-27T17:44:58Z","html_url":"https://github.com/edx/ux-pattern-library/pull/345#discussion_r72487279","pull_request_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345","_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/72487279"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/345#discussion_r72487279"},"pull_request":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345"}}},"pull_request":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345","id":78500750,"html_url":"https://github.com/edx/ux-pattern-library/pull/345","diff_url":"https://github.com/edx/ux-pattern-library/pull/345.diff","patch_url":"https://github.com/edx/ux-pattern-library/pull/345.patch","issue_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/345","number":345,"state":"open","locked":false,"title":"Updating color palettes and color swatch layout","user":{"login":"clrux","id":2112024,"avatar_url":"https://avatars.githubusercontent.com/u/2112024?v=3","gravatar_id":"","url":"https://api.github.com/users/clrux","html_url":"https://github.com/clrux","followers_url":"https://api.github.com/users/clrux/followers","following_url":"https://api.github.com/users/clrux/following{/other_user}","gists_url":"https://api.github.com/users/clrux/gists{/gist_id}","starred_url":"https://api.github.com/users/clrux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clrux/subscriptions","organizations_url":"https://api.github.com/users/clrux/orgs","repos_url":"https://api.github.com/users/clrux/repos","events_url":"https://api.github.com/users/clrux/events{/privacy}","received_events_url":"https://api.github.com/users/clrux/received_events","type":"User","site_admin":false},"body":"# [UXPL-36](https://openedx.atlassian.net/browse/UXPL-36)\r\n\r\n## Summary of work\r\n\r\nThis work updates our color palettes to provide primary and secondary values that work on both white and our light gray.\r\n\r\n## Additional details and background\r\n\r\nPreviously, our core blue and core pink did not work on gray and in some cases, they barely worked on white. As developers begin to utilize the pattern library and our colors more heavily, we needed to provide options that won't cause accessibility failures in tests and that allow for an easy, consistent approach to development.\r\n\r\nAlong with updated colors, with the help of the UX team, I've simplified the number of options. Our primary color palettes was reduced from 10 to 5, with the base options being accessible on both white and gray. I've eliminated our \"information\" color altogether, per UX request. I've also reduced our grayscale sets to just one, basing the gray off of Gabe's gray and eliminating our \"cool\" gray.\r\n\r\nI've updated the color swatch layout to better showcase these color options but displaying them on various background colors. This not only gives developers and sense of what any color might look like in context with a background color, but it also allows our accessibility tool to check the contrast with any combination, making the overall process more robust.\r\n\r\nEach color swatch is a button making the interface accessible to keyboard-only users, and each button is clickable revealing more information about the color, recommended use, and developer variables. The information was built using a JSON file so is easily maintainable.\r\n\r\nThe goal of the pattern library is \"easy consistency\". Too many color options reduces consistency, while too few options don't provide enough variation. The UX team and I felt that 5 color options, with the base option accessible, provides a nice balance between the two.\r\n\r\nI've also been working with Gabe from marketing to sync up the print-based colors with these, and visa versa.\r\n\r\n---\r\n\r\nI went through and updated color variables use in other patterns to use the new variables. In the event where a variable was removed, I am using the closest option. As a result, the overall layout and presentation changed, some ways more subtle than others.\r\n\r\n---\r\n\r\nBefore bumping the version in platform, I need to update any instances in platform that utilize stale variable names that were removed during this process.\r\n\r\n## Preview sandbox\r\n\r\nSoon...\r\n\r\n## Reviewers\r\n\r\n- [ ] @chris-mike or @roderickmorales\r\n- [ ] @andy-armstrong or @bjacobel \r\n\r\n### For your information only\r\n\r\n@dsjen, @cptvitamin, @cahrens, @alisan617, @AlasdairSwan \r\n","created_at":"2016-07-22T16:01:17Z","updated_at":"2016-07-27T17:44:58Z","closed_at":null,"merged_at":null,"merge_commit_sha":"628d3c91c7379fb0adf8593a6e9760059adff23b","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345/commits","review_comments_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345/comments","review_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments{/number}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/345/comments","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/291adf65bca24832c9063af232eb342e7205fbf9","head":{"label":"edx:clrux/updating-colors","ref":"clrux/updating-colors","sha":"291adf65bca24832c9063af232eb342e7205fbf9","user":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":29666334,"name":"ux-pattern-library","full_name":"edx/ux-pattern-library","owner":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/ux-pattern-library","description":"The (working) Visual, UI, and Front End Styleguide for edX.","fork":false,"url":"https://api.github.com/repos/edx/ux-pattern-library","forks_url":"https://api.github.com/repos/edx/ux-pattern-library/forks","keys_url":"https://api.github.com/repos/edx/ux-pattern-library/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/ux-pattern-library/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/ux-pattern-library/teams","hooks_url":"https://api.github.com/repos/edx/ux-pattern-library/hooks","issue_events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/events{/number}","events_url":"https://api.github.com/repos/edx/ux-pattern-library/events","assignees_url":"https://api.github.com/repos/edx/ux-pattern-library/assignees{/user}","branches_url":"https://api.github.com/repos/edx/ux-pattern-library/branches{/branch}","tags_url":"https://api.github.com/repos/edx/ux-pattern-library/tags","blobs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/ux-pattern-library/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/ux-pattern-library/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/ux-pattern-library/languages","stargazers_url":"https://api.github.com/repos/edx/ux-pattern-library/stargazers","contributors_url":"https://api.github.com/repos/edx/ux-pattern-library/contributors","subscribers_url":"https://api.github.com/repos/edx/ux-pattern-library/subscribers","subscription_url":"https://api.github.com/repos/edx/ux-pattern-library/subscription","commits_url":"https://api.github.com/repos/edx/ux-pattern-library/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/ux-pattern-library/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/ux-pattern-library/contents/{+path}","compare_url":"https://api.github.com/repos/edx/ux-pattern-library/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/ux-pattern-library/merges","archive_url":"https://api.github.com/repos/edx/ux-pattern-library/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/ux-pattern-library/downloads","issues_url":"https://api.github.com/repos/edx/ux-pattern-library/issues{/number}","pulls_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/ux-pattern-library/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/ux-pattern-library/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/labels{/name}","releases_url":"https://api.github.com/repos/edx/ux-pattern-library/releases{/id}","deployments_url":"https://api.github.com/repos/edx/ux-pattern-library/deployments","created_at":"2015-01-22T07:19:42Z","updated_at":"2016-07-18T14:55:15Z","pushed_at":"2016-07-27T17:37:13Z","git_url":"git://github.com/edx/ux-pattern-library.git","ssh_url":"git@github.com:edx/ux-pattern-library.git","clone_url":"https://github.com/edx/ux-pattern-library.git","svn_url":"https://github.com/edx/ux-pattern-library","homepage":"http://ux.edx.org","size":11723,"stargazers_count":246,"watchers_count":246,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":40,"mirror_url":null,"open_issues_count":6,"forks":40,"open_issues":6,"watchers":246,"default_branch":"master"}},"base":{"label":"edx:master","ref":"master","sha":"a5d7c0ac445eba4cf31f4c963a1a7aee39e92a4a","user":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":29666334,"name":"ux-pattern-library","full_name":"edx/ux-pattern-library","owner":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/ux-pattern-library","description":"The (working) Visual, UI, and Front End Styleguide for edX.","fork":false,"url":"https://api.github.com/repos/edx/ux-pattern-library","forks_url":"https://api.github.com/repos/edx/ux-pattern-library/forks","keys_url":"https://api.github.com/repos/edx/ux-pattern-library/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/ux-pattern-library/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/ux-pattern-library/teams","hooks_url":"https://api.github.com/repos/edx/ux-pattern-library/hooks","issue_events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/events{/number}","events_url":"https://api.github.com/repos/edx/ux-pattern-library/events","assignees_url":"https://api.github.com/repos/edx/ux-pattern-library/assignees{/user}","branches_url":"https://api.github.com/repos/edx/ux-pattern-library/branches{/branch}","tags_url":"https://api.github.com/repos/edx/ux-pattern-library/tags","blobs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/ux-pattern-library/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/ux-pattern-library/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/ux-pattern-library/languages","stargazers_url":"https://api.github.com/repos/edx/ux-pattern-library/stargazers","contributors_url":"https://api.github.com/repos/edx/ux-pattern-library/contributors","subscribers_url":"https://api.github.com/repos/edx/ux-pattern-library/subscribers","subscription_url":"https://api.github.com/repos/edx/ux-pattern-library/subscription","commits_url":"https://api.github.com/repos/edx/ux-pattern-library/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/ux-pattern-library/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/ux-pattern-library/contents/{+path}","compare_url":"https://api.github.com/repos/edx/ux-pattern-library/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/ux-pattern-library/merges","archive_url":"https://api.github.com/repos/edx/ux-pattern-library/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/ux-pattern-library/downloads","issues_url":"https://api.github.com/repos/edx/ux-pattern-library/issues{/number}","pulls_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/ux-pattern-library/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/ux-pattern-library/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/labels{/name}","releases_url":"https://api.github.com/repos/edx/ux-pattern-library/releases{/id}","deployments_url":"https://api.github.com/repos/edx/ux-pattern-library/deployments","created_at":"2015-01-22T07:19:42Z","updated_at":"2016-07-18T14:55:15Z","pushed_at":"2016-07-27T17:37:13Z","git_url":"git://github.com/edx/ux-pattern-library.git","ssh_url":"git@github.com:edx/ux-pattern-library.git","clone_url":"https://github.com/edx/ux-pattern-library.git","svn_url":"https://github.com/edx/ux-pattern-library","homepage":"http://ux.edx.org","size":11723,"stargazers_count":246,"watchers_count":246,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":40,"mirror_url":null,"open_issues_count":6,"forks":40,"open_issues":6,"watchers":246,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/345"},"issue":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/345"},"comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/345/comments"},"review_comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345/comments"},"review_comment":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/345/commits"},"statuses":{"href":"https://api.github.com/repos/edx/ux-pattern-library/statuses/291adf65bca24832c9063af232eb342e7205fbf9"}}}}
{"actor":{"display_login":"bjacobel"}}