{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/26596","repository_url":"https://api.github.com/repos/twbs/bootstrap","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/26596/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/26596/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/26596/events","html_url":"https://github.com/twbs/bootstrap/issues/26596","id":326585849,"node_id":"MDU6SXNzdWUzMjY1ODU4NDk=","number":26596,"title":"Proposal: use CSS variables inside bootstrap","user":{"login":"tobi-or-not-tobi","id":4745807,"node_id":"MDQ6VXNlcjQ3NDU4MDc=","avatar_url":"https://avatars3.githubusercontent.com/u/4745807?v=4","gravatar_id":"","url":"https://api.github.com/users/tobi-or-not-tobi","html_url":"https://github.com/tobi-or-not-tobi","followers_url":"https://api.github.com/users/tobi-or-not-tobi/followers","following_url":"https://api.github.com/users/tobi-or-not-tobi/following{/other_user}","gists_url":"https://api.github.com/users/tobi-or-not-tobi/gists{/gist_id}","starred_url":"https://api.github.com/users/tobi-or-not-tobi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tobi-or-not-tobi/subscriptions","organizations_url":"https://api.github.com/users/tobi-or-not-tobi/orgs","repos_url":"https://api.github.com/users/tobi-or-not-tobi/repos","events_url":"https://api.github.com/users/tobi-or-not-tobi/events{/privacy}","received_events_url":"https://api.github.com/users/tobi-or-not-tobi/received_events","type":"User","site_admin":false},"labels":[{"id":210556,"node_id":"MDU6TGFiZWwyMTA1NTY=","url":"https://api.github.com/repos/twbs/bootstrap/labels/css","name":"css","color":"563d7c","default":false},{"id":148230,"node_id":"MDU6TGFiZWwxNDgyMzA=","url":"https://api.github.com/repos/twbs/bootstrap/labels/feature","name":"feature","color":"4bb14b","default":false},{"id":250176882,"node_id":"MDU6TGFiZWwyNTAxNzY4ODI=","url":"https://api.github.com/repos/twbs/bootstrap/labels/v4","name":"v4","color":"563d7c","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":18,"created_at":"2018-05-25T16:16:34Z","updated_at":"2018-07-09T07:11:38Z","closed_at":"2018-07-09T02:27:55Z","author_association":"NONE","body":"I like sass variables and they're great during buildtime. But projects that need a microfrontend architecture (i.e. webcomponents) tend not to rebuild components. They rather reuse existing components and provide the style context to it. \r\n\r\nUsing CSS variables will allow to provide runtime configuration for styling, such as colors. CSS variables can work in conjunction of SASS. \r\nI'm happy with a few the first couple of CSS variables in bootstrap, but as [already mentioned](https://github.com/twbs/bootstrap/issues/23349#issuecomment-346813716) they're only exposed and not used by bootstrap itself. This means, if a project likes to override these CSS variables at runtime, there's no effect with the bootstrap components themself. \r\n\r\nIs there anything against going into the CSS variable direction? [Browser support is really great](https://caniuse.com/#feat=css-variables) and the fallback option will keep non-supported browsers happy. \r\n\r\nI understand this is a big change though. It woudl work like this:\r\n\r\nIntialize CSS vars. We use use double-double fallback to ensure we have a fallack and do not need to repeately add the fallback everywhere. \r\n```\r\n:root {\r\n    --primary: var(--primary-color, #{$primary});\r\n}\r\n```\r\n\r\nThen for each and every component that uses the primary color, we could use the --primary variable instead. For example on a button, it would go like this (just a few lines that i'm using in my sandbox project, so its not so relevant to bootstrap sources):\r\n```\r\n.btn {\r\n    &-primary {\r\n        background-color: var(--primary);\r\n        border-color: var(--primary);\r\n        &:hover,\r\n        &:not(:disabled):not(.disabled):active {\r\n            background-color: var(--primary-darken);\r\n            border-color: var(--primary-darken);\r\n        }\r\n    }\r\n}\r\n```\r\n\r\nThis would allow to change the color at runtime. \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/403381771","html_url":"https://github.com/twbs/bootstrap/issues/26596#issuecomment-403381771","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/26596","id":403381771,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMzM4MTc3MQ==","user":{"login":"tobi-or-not-tobi","id":4745807,"node_id":"MDQ6VXNlcjQ3NDU4MDc=","avatar_url":"https://avatars3.githubusercontent.com/u/4745807?v=4","gravatar_id":"","url":"https://api.github.com/users/tobi-or-not-tobi","html_url":"https://github.com/tobi-or-not-tobi","followers_url":"https://api.github.com/users/tobi-or-not-tobi/followers","following_url":"https://api.github.com/users/tobi-or-not-tobi/following{/other_user}","gists_url":"https://api.github.com/users/tobi-or-not-tobi/gists{/gist_id}","starred_url":"https://api.github.com/users/tobi-or-not-tobi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tobi-or-not-tobi/subscriptions","organizations_url":"https://api.github.com/users/tobi-or-not-tobi/orgs","repos_url":"https://api.github.com/users/tobi-or-not-tobi/repos","events_url":"https://api.github.com/users/tobi-or-not-tobi/events{/privacy}","received_events_url":"https://api.github.com/users/tobi-or-not-tobi/received_events","type":"User","site_admin":false},"created_at":"2018-07-09T07:11:38Z","updated_at":"2018-07-09T07:11:38Z","author_association":"NONE","body":"@mdo do I get it right that the vision is that CSS custom properties are not for Bootstrap? \r\n\r\nThe runtime configurability of CSS custom properties over build-time configurability are huge, imho. Webapps are going to change with smaller reusable webcomponents, using view encapsulation that _cannot_ be controlled with a global css. Cloud native applications prefer configurability over extensibility. \r\n\r\nImagine we would change the primary color for an app with a large number of webcomponents. Without CSS custom properties, it means that we need to rebuild and redeploy all the webcomponents (assuming primary color is used everywhere) and clients can no longer use the cached components (which is so important . Moreover, the components are not reusable as the CSS is baken into the component. \r\n\r\nUsing CSS custom properties is going to make a much better story. Web components can be reused by multiple apps; CSS custom properties _do_ pass the encapsulated shadow DOM by design; changing CSS custom properties do not require a new build, deployment and the components do not need to be evicted from caches."}}
{"actor":{"display_login":"tobi-or-not-tobi"}}