FormToggle: Component wrongly styled

[mmtr]

Describe the bug
When rendering a FormToggle component outside WordPress, it is displayed with wrong styles because of the lack of the WordPress core styles.

To Reproduce

• Demo: https://mmtr.github.io/wordpress-components/#/form-toggle
• Code: https://github.com/mmtr/wordpress-components/blob/master/src/examples/form-toggle.jsx

Expected behavior
It is styled like if the component is rendered inside WordPress.

Screenshots

Desktop:

• OS: macOS High Sierra
• Browser: Chrome
• Version: 67

Additional context
Issue found while working on #8338 and Automattic/wp-calypso#26367

[jrtashjian]

@mmtr I've submitted a pull request for this bug. I've been using the components outside of Gutenberg a lot lately and have run into this same issue. I tracked down the issue to a style being applied to all components within the .block-editor class.

.block-editor * {
    box-sizing: inherit
}

This computed value of this on the .components-form-toggle class is box-sizing: border-box;. Applying this style to the following classes resolved part of the issue.

.components-form-toggle__thumb,
.components-form-toggle__track,
.components-form-toggle__on,
.components-form-toggle__off {
    box-sizing: border-box;
}

The SVG icon with the applied classes of .components-form-toggle__on and .components-form-toggle__off still had a slight offset. I noticed removing the line-height attribute on the entire page resolved the display. As I drilled down I saw that the .components-form-toggle within the block editor had received the display value of inline-block. Moving this style into the FormToggle component resolved this final issue.