{"action":"created","issue":{"url":"https://api.github.com/repos/jquery/css-chassis/issues/43","labels_url":"https://api.github.com/repos/jquery/css-chassis/issues/43/labels{/name}","comments_url":"https://api.github.com/repos/jquery/css-chassis/issues/43/comments","events_url":"https://api.github.com/repos/jquery/css-chassis/issues/43/events","html_url":"https://github.com/jquery/css-chassis/issues/43","id":59709147,"number":43,"title":"Create Semantic Color Variable Names","user":{"login":"sfrisk","id":51331,"avatar_url":"https://avatars.githubusercontent.com/u/51331?v=3","gravatar_id":"","url":"https://api.github.com/users/sfrisk","html_url":"https://github.com/sfrisk","followers_url":"https://api.github.com/users/sfrisk/followers","following_url":"https://api.github.com/users/sfrisk/following{/other_user}","gists_url":"https://api.github.com/users/sfrisk/gists{/gist_id}","starred_url":"https://api.github.com/users/sfrisk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sfrisk/subscriptions","organizations_url":"https://api.github.com/users/sfrisk/orgs","repos_url":"https://api.github.com/users/sfrisk/repos","events_url":"https://api.github.com/users/sfrisk/events{/privacy}","received_events_url":"https://api.github.com/users/sfrisk/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jquery/css-chassis/labels/Phase%20One:%20CSS%20Framework","name":"Phase One: CSS Framework","color":"d4c5f9"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-03-03T21:33:30Z","updated_at":"2015-03-09T15:16:03Z","closed_at":null,"body":"Add to the _colors.scss files the variable names for the base colors we'll be using.  Include variable names for the follow:\r\n\r\n* default-font\r\n* background\r\n* default-button\r\n* success\r\n* error\r\n* link\r\n\r\nCan anyone else think of some base colors that would be needed? "},"comment":{"url":"https://api.github.com/repos/jquery/css-chassis/issues/comments/77872669","html_url":"https://github.com/jquery/css-chassis/issues/43#issuecomment-77872669","issue_url":"https://api.github.com/repos/jquery/css-chassis/issues/43","id":77872669,"user":{"login":"samatdav","id":9495022,"avatar_url":"https://avatars.githubusercontent.com/u/9495022?v=3","gravatar_id":"","url":"https://api.github.com/users/samatdav","html_url":"https://github.com/samatdav","followers_url":"https://api.github.com/users/samatdav/followers","following_url":"https://api.github.com/users/samatdav/following{/other_user}","gists_url":"https://api.github.com/users/samatdav/gists{/gist_id}","starred_url":"https://api.github.com/users/samatdav/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samatdav/subscriptions","organizations_url":"https://api.github.com/users/samatdav/orgs","repos_url":"https://api.github.com/users/samatdav/repos","events_url":"https://api.github.com/users/samatdav/events{/privacy}","received_events_url":"https://api.github.com/users/samatdav/received_events","type":"User","site_admin":false},"created_at":"2015-03-09T15:16:03Z","updated_at":"2015-03-09T15:16:03Z","body":"I did a quick research and found two great sources about having great variable names:\r\n\r\n1. \"Choosing great variable names\" \r\nthesassway.com/beginner/variable-naming\r\nIn a nutshell: \r\n$red is bad\r\n$brand-color is good\r\n\r\n2. Official styleguide for color\r\nsass-lang.com/styleguide/color\r\nIn the \"Usage\" section there is a way how they call variables at sass-lang.org itself:\r\n$color-shadow\r\n$color-primary \r\n$color-accent \r\n$color-background \r\n$color-background-shade \r\n$color-background-invert \r\n$color-text \r\n$color-text-weak \r\n$color-text-strong \r\n$color-text-heading \r\n$color-text-invert \r\n$color-text-strong-invert \r\n$color-background \r\n$color-text-link \r\n$color-primary \r\n$color-text-link-visited \r\n$color-text-link-hover \r\n$color-border\r\n\r\nAs you can see at sass website it is simply \"color-\" + element. In the first link it is element + \"-color\". I personally like any one as long as it is consistent. I believe it is important to find balance between descriptiveness and laconicism. For that reason I propose the following names for the variables ordered by my personal preference:\r\n\r\n*default-font\r\n⋅⋅*$color-text\r\n⋅⋅*$text-color\r\n⋅⋅*$color-text-default\r\n⋅⋅*$text-default-color\r\n*background\r\n⋅⋅*$color-background\r\n⋅⋅*$background-color\r\n*default-button\r\n⋅⋅*$color-button\r\n⋅⋅*$button-color\r\n⋅⋅*$color-default-button\r\n⋅⋅*$default-button-color\r\n*success\r\n⋅⋅*$color-success\r\n⋅⋅*$success-color\r\n*error\r\n⋅⋅*$color-error\r\n⋅⋅*$error-color\r\n*link\r\n⋅⋅*$color-link\r\n⋅⋅*$link-color"}}