{"action":"closed","issue":{"url":"https://api.github.com/repos/material-components/material-components-web/issues/754","repository_url":"https://api.github.com/repos/material-components/material-components-web","labels_url":"https://api.github.com/repos/material-components/material-components-web/issues/754/labels{/name}","comments_url":"https://api.github.com/repos/material-components/material-components-web/issues/754/comments","events_url":"https://api.github.com/repos/material-components/material-components-web/issues/754/events","html_url":"https://github.com/material-components/material-components-web/issues/754","id":232495291,"number":754,"title":"Simplify css variables for theming purpose","user":{"login":"jgoux","id":1443499,"avatar_url":"https://avatars3.githubusercontent.com/u/1443499?v=3","gravatar_id":"","url":"https://api.github.com/users/jgoux","html_url":"https://github.com/jgoux","followers_url":"https://api.github.com/users/jgoux/followers","following_url":"https://api.github.com/users/jgoux/following{/other_user}","gists_url":"https://api.github.com/users/jgoux/gists{/gist_id}","starred_url":"https://api.github.com/users/jgoux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jgoux/subscriptions","organizations_url":"https://api.github.com/users/jgoux/orgs","repos_url":"https://api.github.com/users/jgoux/repos","events_url":"https://api.github.com/users/jgoux/events{/privacy}","received_events_url":"https://api.github.com/users/jgoux/received_events","type":"User","site_admin":false},"labels":[{"id":494904469,"url":"https://api.github.com/repos/material-components/material-components-web/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":{"login":"traviskaufman","id":1185269,"avatar_url":"https://avatars3.githubusercontent.com/u/1185269?v=3","gravatar_id":"","url":"https://api.github.com/users/traviskaufman","html_url":"https://github.com/traviskaufman","followers_url":"https://api.github.com/users/traviskaufman/followers","following_url":"https://api.github.com/users/traviskaufman/following{/other_user}","gists_url":"https://api.github.com/users/traviskaufman/gists{/gist_id}","starred_url":"https://api.github.com/users/traviskaufman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/traviskaufman/subscriptions","organizations_url":"https://api.github.com/users/traviskaufman/orgs","repos_url":"https://api.github.com/users/traviskaufman/repos","events_url":"https://api.github.com/users/traviskaufman/events{/privacy}","received_events_url":"https://api.github.com/users/traviskaufman/received_events","type":"User","site_admin":false},"assignees":[{"login":"traviskaufman","id":1185269,"avatar_url":"https://avatars3.githubusercontent.com/u/1185269?v=3","gravatar_id":"","url":"https://api.github.com/users/traviskaufman","html_url":"https://github.com/traviskaufman","followers_url":"https://api.github.com/users/traviskaufman/followers","following_url":"https://api.github.com/users/traviskaufman/following{/other_user}","gists_url":"https://api.github.com/users/traviskaufman/gists{/gist_id}","starred_url":"https://api.github.com/users/traviskaufman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/traviskaufman/subscriptions","organizations_url":"https://api.github.com/users/traviskaufman/orgs","repos_url":"https://api.github.com/users/traviskaufman/repos","events_url":"https://api.github.com/users/traviskaufman/events{/privacy}","received_events_url":"https://api.github.com/users/traviskaufman/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2017-05-31T08:43:40Z","updated_at":"2017-06-01T15:35:56Z","closed_at":"2017-06-01T15:35:56Z","body":"Hello,\r\n\r\nI'm a React user and I'd like to use a CSS-in-JS solution to easily theme material-components-web.\r\n\r\nThanks to css variables, it shouldn't be too hard, so I started by extracting these from the dist css file (thanks `/--mdc-.+?: .+?;/g` :D) : \r\n\r\n```css\r\n--mdc-theme-accent: #ff4081;\r\n--mdc-theme-background: #fff;\r\n--mdc-theme-primary: #3f51b5;\r\n--mdc-theme-text-disabled-on-accent: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);\r\n--mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);\r\n--mdc-theme-text-disabled-on-primary: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-hint-on-accent: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);\r\n--mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);\r\n--mdc-theme-text-hint-on-primary: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-icon-on-accent: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);\r\n--mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);\r\n--mdc-theme-text-icon-on-primary: rgba(255, 255, 255, 0.5);\r\n--mdc-theme-text-primary-on-accent: white;\r\n--mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);\r\n--mdc-theme-text-primary-on-dark: white;\r\n--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);\r\n--mdc-theme-text-primary-on-primary: white;\r\n--mdc-theme-text-secondary-on-accent: rgba(255, 255, 255, 0.7);\r\n--mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);\r\n--mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);\r\n--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);\r\n--mdc-theme-text-secondary-on-primary: rgba(255, 255, 255, 0.7);\r\n\r\n/* Other variables not under the mdc-theme scope */\r\n--mdc-dialog-dark-theme-bg-color: #303030;\r\n--mdc-permanent-drawer-dark-theme-bg-color: #212121;\r\n--mdc-persistent-drawer-dark-theme-bg-color: #212121;\r\n--mdc-ripple-fg-scale: 1;\r\n--mdc-ripple-fg-size: 0;\r\n--mdc-ripple-fg-translate-end: 0;\r\n--mdc-ripple-fg-translate-start: 0;\r\n--mdc-ripple-left: 0;\r\n--mdc-ripple-surface-height: 0;\r\n--mdc-ripple-surface-width: 0;\r\n--mdc-ripple-top: 0;\r\n--mdc-toolbar-ratio-to-extend-flexible: 4;\r\n```\r\n\r\nCould you explain why all the variables aren't under the mdc-theme scope ?\r\n\r\nAlso, I'd like to apply [material design palettes](https://material.io/guidelines/style/color.html#color-color-tool) to select my primary and accent colors. What's the story between material-components-web and material design palettes ?\r\n\r\nWouldn't be interesting to put these as variables and use them in place of all the colors here ? \r\n\r\nExample taking the official red palette as primary color : \r\n```css\r\n:root {\r\n--mdc-theme-primary-50: #FFEBEE;\r\n--mdc-theme-primary-100: #FFCDD2;\r\n--mdc-theme-primary-200: #EF9A9A;\r\n--mdc-theme-primary-300: #E57373;\r\n--mdc-theme-primary-400: #EF5350;\r\n--mdc-theme-primary-500: #F44336;\r\n--mdc-theme-primary-600: #E53935;\r\n--mdc-theme-primary-700: #D32F2F;\r\n--mdc-theme-primary-800: #C62828;\r\n--mdc-theme-primary-900: #B71C1C;\r\n--mdc-theme-primary-A100: #FF8A80;\r\n--mdc-theme-primary-A200: #FF5252;\r\n--mdc-theme-primary-A400: #FF1744;\r\n--mdc-theme-primary-A700: #D50000;\r\n}\r\n```\r\n\r\nThen you could use that to color all the primary components.\r\nI started to experiment the palette generation using only the `500` color : https://codesandbox.io/s/kZN3kNpQK\r\n\r\nAlso, I'm pretty sure all the `mdc-theme-text-*` variables could be derived from the primary/secondary color (using constrast calculation). Do you intend to provide a javascript helper or any documentation about this ?\r\n\r\nTo sum up, I'd like to be able to theme a whole application providing only one primary color and one accent color. I think all the other colors could be derived from that."}}
{"actor":{"display_login":"traviskaufman"}}