Merge pull request #81 from HubSpot/amead/update-docs-styling-remove-…

…hard-coded-white

Fix styling issue on Islands page causing column text to be hard/impossible to read

docs/reference/islands.md

@@ -55,14 +55,14 @@ export default function InteractiveComponent({ defaultCount }) {
 
 Name | Type | Default | Description
 -- | -- | -- | --
-<span style="color:white">**clientOnly**</span> | `boolean` | `false` | When set to `true` the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser.
-<span style="color:white">**hydrateOn**</span> | `"load" \| "visible" \| "idle"` | `"load"` | When rendering a page with Islands on the server, the output includes a script to initialize Islands on the client. Hydrating means downloading and initializing the Island component code, so using these different hydration types strategically to defer some of that work can help boost initial page load performance! See [Hydration Types](#hydration-types) below for more information.
-<span style="color:white">**id**</span> | `string` | - | By default we generate a unique ID string for your island such as `island-123456`. But if you wish to provide your own island ID, you can use this prop.
-<span style="color:white">**module***</span> | `React.Component` | - | Please keep in mind that the component passed in as the value of this prop must include the `?island` suffix as a part of the import RUL. Refer to the `InteractiveComponent` example at the top of the docs.
-<span style="color:white">**wrapperTag**</span> | `string `| `"div"` | The string provided must be a valid HTML element tag (e.g. 'span', 'article', 'section', etc).
-<span style="color:white">**wrapperClassName**</span> | `string` | - | This props gets passed through to the wrapping element around the island. Refer to the `wrapperTag` prop for how to customize which HTML element is used as the wrapping element.
-<span style="color:white">**wrapperStyle**</span> | `CSSProperties` | - | The `CSSProperties` provided will be applied inline to the `wrapperTag` of the island.
-<span style="color:white">**Wrapper**</span> | `React.Component` | - | This prop allows you to provide a custom context provider that will wrap the React tree of your island component. This is particularly useful for integrating with [CSS-in-JS libraries](https://github.hubspot.com/cms-react/reference/styling.html#styled-components), such as styled-components, or other context providers that need to encapsulate the component's subtree for applying styles or context values. Please remember that when using the `Wrapper` prop you **must import the component passed with a `?client` suffix** to make sure it can be bundled for the client.
+<span>**clientOnly**</span> | `boolean` | `false` | When set to `true` the Island won’t be rendered on the server. This can be useful for components that rely on logic/libraries that can only run in the browser.
+<span>**hydrateOn**</span> | `"load" \| "visible" \| "idle"` | `"load"` | When rendering a page with Islands on the server, the output includes a script to initialize Islands on the client. Hydrating means downloading and initializing the Island component code, so using these different hydration types strategically to defer some of that work can help boost initial page load performance! See [Hydration Types](#hydration-types) below for more information.
+<span>**id**</span> | `string` | - | By default we generate a unique ID string for your island such as `island-123456`. But if you wish to provide your own island ID, you can use this prop.
+<span>**module**</span> | `React.Component` | - | Please keep in mind that the component passed in as the value of this prop must include the `?island` suffix as a part of the import RUL. Refer to the `InteractiveComponent` example at the top of the docs.
+<span>**wrapperTag**</span> | `string `| `"div"` | The string provided must be a valid HTML element tag (e.g. 'span', 'article', 'section', etc).
+<span>**wrapperClassName**</span> | `string` | - | This props gets passed through to the wrapping element around the island. Refer to the `wrapperTag` prop for how to customize which HTML element is used as the wrapping element.
+<span>**wrapperStyle**</span> | `CSSProperties` | - | The `CSSProperties` provided will be applied inline to the `wrapperTag` of the island.
+<span>**Wrapper**</span> | `React.Component` | - | This prop allows you to provide a custom context provider that will wrap the React tree of your island component. This is particularly useful for integrating with [CSS-in-JS libraries](https://github.hubspot.com/cms-react/reference/styling.html#styled-components), such as styled-components, or other context providers that need to encapsulate the component's subtree for applying styles or context values. Please remember that when using the `Wrapper` prop you **must import the component passed with a `?client` suffix** to make sure it can be bundled for the client.
 
 ### [Hydration types](#hydration-types)
 The default behavior of the island initialization script is to eagerly hydrate all Islands as soon as possible, i.e., on `load`, but there are other strategies available when hydrating components: