{"action":"created","issue":{"url":"https://api.github.com/repos/bolt-design-system/bolt/issues/819","repository_url":"https://api.github.com/repos/bolt-design-system/bolt","labels_url":"https://api.github.com/repos/bolt-design-system/bolt/issues/819/labels{/name}","comments_url":"https://api.github.com/repos/bolt-design-system/bolt/issues/819/comments","events_url":"https://api.github.com/repos/bolt-design-system/bolt/issues/819/events","html_url":"https://github.com/bolt-design-system/bolt/pull/819","id":344504113,"node_id":"MDExOlB1bGxSZXF1ZXN0MjAzODg0Mjc2","number":819,"title":"Bolt Theming System Refactor","user":{"login":"sghoweri","id":1617209,"node_id":"MDQ6VXNlcjE2MTcyMDk=","avatar_url":"https://avatars2.githubusercontent.com/u/1617209?v=4","gravatar_id":"","url":"https://api.github.com/users/sghoweri","html_url":"https://github.com/sghoweri","followers_url":"https://api.github.com/users/sghoweri/followers","following_url":"https://api.github.com/users/sghoweri/following{/other_user}","gists_url":"https://api.github.com/users/sghoweri/gists{/gist_id}","starred_url":"https://api.github.com/users/sghoweri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sghoweri/subscriptions","organizations_url":"https://api.github.com/users/sghoweri/orgs","repos_url":"https://api.github.com/users/sghoweri/repos","events_url":"https://api.github.com/users/sghoweri/events{/privacy}","received_events_url":"https://api.github.com/users/sghoweri/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":57,"created_at":"2018-07-25T15:53:03Z","updated_at":"2018-07-31T16:55:24Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/bolt-design-system/bolt/pulls/819","html_url":"https://github.com/bolt-design-system/bolt/pull/819","diff_url":"https://github.com/bolt-design-system/bolt/pull/819.diff","patch_url":"https://github.com/bolt-design-system/bolt/pull/819.patch"},"body":"\r\nBolt’s new theming system aims to solve several *incredibly challenging* problems:\r\n\r\n1. Achieve more visually consistent cross browser compatibility with CSS Variables (especially in IE 11), given that the previous theming system implementations (using a pure progressive enhancement strategy) have consistently been viewed as “flawed” or “broken” when comparing the color differences in certain UI elements.\r\n\r\nIn a nutshell, massively refactor how the theming system in Bolt is configured and used throughout the design system while addressing THE biggest pain-point with the original theming system we rolled out in Bolt: IE 11 support.\r\n\r\n### Before (in IE 11)\r\n![image](https://user-images.githubusercontent.com/1617209/43214332-f1f6eb78-9006-11e8-8e65-ce257b916ff0.png)\r\n\r\n![image](https://user-images.githubusercontent.com/1617209/43214370-04c93378-9007-11e8-8f1f-bd11fa7c5eaa.png)\r\n\r\n### After (in IE 11)\r\n\r\n![image](https://user-images.githubusercontent.com/1617209/43214383-0e4b1448-9007-11e8-8842-a1e296ef7119.png)\r\n\r\n![image](https://user-images.githubusercontent.com/1617209/43214414-24656cd8-9007-11e8-8483-d88767d74095.png)\r\n\r\n2. Provide relatively easy to use tools + workflow to simplify and better standardize how to apply CSS variable-based styles to components in the design system, both for net new components + upgrading existing components.\r\n\r\nEx. How do I wire up a piece of UI to have it’s text color be based on the themed region it’s placed within?\r\n\r\n3. Solve how theming system design tokens work with UI interactive states (hover, active, etc)\r\n\r\n4. Solve how the theming system spells out sufficient levels of text contrast used in top of a themed region’s background + inside of UI elements (which themselves change color based on the different interactive states)\r\n\r\n5. Establish a unified place to define the values / variables used in the theming system\r\n\r\n6. Consolidate theming system logic and values shared across every theme vs shared across all light vs all dark themes vs unique to one specific theme\r\n\r\n7. Provide a setup that allows us to override and update the theming system inheritance model as needed (ex. if we wanted to change the headline color used in xlight vs light themes (instead of being the same like they are currently)\r\n\r\n8. Automatically generate theme-specific classes, outputting CSS variables based on the options defined in the theming system config\r\n\r\n9. Solve for the absurdly difficult theme-inside-a-theme inheritance challenge in browsers that don’t support CSS vars\r\n\r\n10. Validate the theming system values being attempted to be used have been defined in the global config (ie. don’t allow someone to use a variable that doesn’t actually exist)"},"comment":{"url":"https://api.github.com/repos/bolt-design-system/bolt/issues/comments/409292205","html_url":"https://github.com/bolt-design-system/bolt/pull/819#issuecomment-409292205","issue_url":"https://api.github.com/repos/bolt-design-system/bolt/issues/819","id":409292205,"node_id":"MDEyOklzc3VlQ29tbWVudDQwOTI5MjIwNQ==","user":{"login":"bolt-bot","id":36777128,"node_id":"MDQ6VXNlcjM2Nzc3MTI4","avatar_url":"https://avatars0.githubusercontent.com/u/36777128?v=4","gravatar_id":"","url":"https://api.github.com/users/bolt-bot","html_url":"https://github.com/bolt-bot","followers_url":"https://api.github.com/users/bolt-bot/followers","following_url":"https://api.github.com/users/bolt-bot/following{/other_user}","gists_url":"https://api.github.com/users/bolt-bot/gists{/gist_id}","starred_url":"https://api.github.com/users/bolt-bot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bolt-bot/subscriptions","organizations_url":"https://api.github.com/users/bolt-bot/orgs","repos_url":"https://api.github.com/users/bolt-bot/repos","events_url":"https://api.github.com/users/bolt-bot/events{/privacy}","received_events_url":"https://api.github.com/users/bolt-bot/received_events","type":"User","site_admin":false},"created_at":"2018-07-31T16:55:24Z","updated_at":"2018-07-31T16:55:24Z","author_association":"COLLABORATOR","body":"<h3>:zap: Sauce Labs Test for chrome Passed!</h3>\n<a href=\"https://assets.saucelabs.com/jobs/815741e97e9945b8be94541aff5d1b7b/0001screenshot.png\" target=\"_blank\">\n<img align=\"right\" width=\"50%\" src=\"https://assets.saucelabs.com/jobs/815741e97e9945b8be94541aff5d1b7b/0001screenshot.png\" alt=\"Image of chrome test\"></a>\n\n<details open>\n  <summary>Test Details</summary>\n  <ul>\n    <li>Browser Name: Chrome</li>\n    <li>Browser Version: 47.0.2526.73</li>\n    <li>Browser Platform: Mac OS X</li>\n    <li><a href=\"https://saucelabs.com/beta/tests/815741e97e9945b8be94541aff5d1b7b/commands\" target=\"_blank\">View Test in Sauce Labs</a></li>\n  </ul>\n</details>"}}
{"actor":{"display_login":"bolt-bot"}}