{"action":"closed","issue":{"url":"https://api.github.com/repos/jxnblk/styled-system/issues/234","repository_url":"https://api.github.com/repos/jxnblk/styled-system","labels_url":"https://api.github.com/repos/jxnblk/styled-system/issues/234/labels{/name}","comments_url":"https://api.github.com/repos/jxnblk/styled-system/issues/234/comments","events_url":"https://api.github.com/repos/jxnblk/styled-system/issues/234/events","html_url":"https://github.com/jxnblk/styled-system/issues/234","id":339428231,"node_id":"MDU6SXNzdWUzMzk0MjgyMzE=","number":234,"title":"Define component styles without exposing them to props","user":{"login":"sapegin","id":70067,"node_id":"MDQ6VXNlcjcwMDY3","avatar_url":"https://avatars2.githubusercontent.com/u/70067?v=4","gravatar_id":"","url":"https://api.github.com/users/sapegin","html_url":"https://github.com/sapegin","followers_url":"https://api.github.com/users/sapegin/followers","following_url":"https://api.github.com/users/sapegin/following{/other_user}","gists_url":"https://api.github.com/users/sapegin/gists{/gist_id}","starred_url":"https://api.github.com/users/sapegin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sapegin/subscriptions","organizations_url":"https://api.github.com/users/sapegin/orgs","repos_url":"https://api.github.com/users/sapegin/repos","events_url":"https://api.github.com/users/sapegin/events{/privacy}","received_events_url":"https://api.github.com/users/sapegin/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-07-09T12:27:07Z","updated_at":"2018-07-15T15:51:10Z","closed_at":"2018-07-15T15:51:10Z","author_association":"NONE","body":"I’d like to define component styles like this (for example):\r\n\r\n```js\r\nconst Card = system(\r\n    {\r\n        px: 5,\r\n        py: 3,\r\n        borderWidth: 1,\r\n        borderColor: 'primary',\r\n        borderRadius: 'base',\r\n    }\r\n);\r\n```\r\n\r\nBut don’t want users to be able to do:\r\n\r\n```html\r\n<Card borderColor=\"red\" />\r\n```\r\n\r\nIf we add some kind of a props filter, so you could do:\r\n\r\n```js\r\nconst Card = system({\r\n  borderColor: 'lightGray'\r\n}, props => ({\r\n  borderColor: props.variation === 'primary' ? 'primary' : 'lightGray'\r\n}))\r\n```\r\n\r\nThat would make styled-system / system-components two times more useful in my opinion.\r\n\r\nI may have missed something and there is a way to do that already. If not, I'd like to try to implement that if you like the API (or have better ideas). What do you think? "}}
{"actor":{"display_login":"sapegin"}}