Appearance on Bitbucket Data Center 8.9.18: (expected)
Appearance on Bitbucket data Center 8.19.0 LTS: (broken)
Our package.json lists @atlaskit/toggle at ^14.0.1 and @atlaskit/theme at ^14.0.3.
As far as I know there is no custom CSS we have that is overriding this.
NOTE: I have isolated this from any custom CSS by creating a page that does nothing but render a <Toggle size="large" /> at its react root.
@atlaskit/toggle at ^13.0.2 does not show this behavior.
Actually I take that back, @atlaskit/toggle = "^13.0.2" does show this behavior, but @atlaskit/theme was excluded in our pre-regressed version.
For what it’s worth, removing these libraries has not produced a meaningful workaround.
I might try to create a minimal reproducible example.
I have been able to reproduce this on 8.17 as well. My guess is that this starts being the case around 8.16 when dark theme support was introduced.
Hey Scott 
Thanks for reporting. We recently refactored the internal styles of our packages, using a new css-in-js library (CompiledCSS). We published an RFC about it with more info: RFC-73 Migrating our components to Compiled CSS-in-JS
The issue is likely due to your bundler configuration, which bundler are you using for your app?
Cheers
Hi Daniel,
We’re using webpack. I’m reviewing RFC-73 and seeing if I can find a workaround vis. the suggestions within.
Hi Daniel,
I just rebuilt our webpack config according to RFC-73 and the issue persists.
Looks great in Bitbucket 8.12, looks awful in Bitbucket 8.19 LTS.
FWIW we are also using styled-components. Not sure if that is a factor.
I don’t think the root cause here is that we’re not extracting atlaskit CompiledCSS correctly. Again, a core issue here is that our styles present correctly in Bitbucket <8.16 and incorrectly in Bitbucket >=8.16.
There’s a couple of entries in the page’s <head> - <style data-theme="spacing"> only present in the newer Bitbucket Data Center products which, when removed, fixes the spacing issue.
Unfortunately this something I’m only able to do at runtime.
This issue continues to exist in the latest version of @atlaskit/theme and @atlaskit/toggle
One thing I’ve discovered is that the AUI CSS reset sets the font-size to 14px instead of the 16px standard. As a result, @atlaskit/toggle which uses measurements in REMs is drawn completely wrong because it expects a 16px standard.
This works fine in older bitbucket because the variables aren’t there, so it uses the (correct) fallback.
This works fine in Connect apps on cloud products because we own our iFrame which has the default (16px) font size, leading to correct REM calculations.
I actually think this is a defect in Toggle. I have been able to reproduce this in a minimal example on a data center app. As soon as tokens are used that refer to rems, the AUI CSS reset kicks in, changes the font-size at html to 14px, which distorts the toggle. At the least, changing the font size should change the toggle accordingly, not distort it.
I was not able to fix this and instead hardcoded the fallback sizes for the toggle in custom CSS.
