Replies: 1 comment
-
|
We setup the demo pages to use background-1 because, while most components can be placed above background-1 or background-2, they most often will be placed above background-1. However, when building a new iTwin application the HTML's I think it makes the most sense to change the body to background-2 to avoid confusion when building iTwin apps using iTwinUI. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Continuation of #33 (comment)
Preface
Now that we've released header and sidenav components, this is important to bring up.
When we first started iTwinUI, this is what we had in mind:
variables defined in theme.scss
iTwinUI/src/style/theme.scss
Lines 123 to 127 in a9fc7b6
The problem
For some reason, we are using background-1 in
.iui-body, not background-2.iTwinUI/src/style/global.scss
Lines 5 to 7 in a9fc7b6
Currently, when header and sidenav are placed above background-1, they just look bad/wrong and there isn't enough contrast. So the user would have to know all this context and need to manually override with background-2 (and that's asking too much from the user).
Solutions?
The "easy" solution would be to just change the default in
.iui-bodyto background-2. Since we are pre-1.0, this wouldn't be a big deal for the css package. But iTwinUI-react is at 1.X and is advertised as "stable", so doing this would be a huge visual change, affecting every user. If we do this, we'd probably have to make a bigger announcement.However, header and sidenav were just released and don't have many users, so we can change the styles there. Specifically, we can explore using something that looks good against a body with background-1.Something else to also keep in mind when making this decision is how it could affect high-contrast themes (when we add those in the future).
Update
See #163 😄
Beta Was this translation helpful? Give feedback.
All reactions