feat: add all the colors to dev toolbar components (#7191)

Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/en/reference/dev-toolbar-app-reference.mdx

@@ -287,7 +287,7 @@ The size of the button (`small`, `medium`, `large`).
 
 #### `button-style`
 
-The style of the button (`ghost`, `outline`, `purple`, `gray`, `red`). When using `ghost`, the button itself is invisible and only the content of the button will be shown.
+The style of the button (`ghost`, `outline`, `purple`, `gray`, `red`, `green`, `yellow`, `blue`). When using `ghost`, the button itself is invisible and only the content of the button will be shown.
 
 In JavaScript, set this property using the `buttonStyle` property to avoid conflict with the native `style` property.
 
@@ -307,7 +307,7 @@ The size of the badge (`small`, `large`).
 
 #### `badge-style`
 
-The style (color) of the badge (`purple`, `gray`, `red`, `green`, `yellow`).
+The style (color) of the badge (`purple`, `gray`, `red`, `green`, `yellow`, `blue`).
 
 In JavaScript, set this property using the `badgeStyle` property to avoid conflict with the native `style` property.
 
@@ -324,6 +324,12 @@ The slot of the component will be used as the content of the card.
 <astro-dev-toolbar-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-toolbar-card>
 ```
 
+#### `card-style`
+
+The style of the card (`purple`, `gray`, `red`, `green`, `yellow`, `blue`). The color is only applied to the border of the card on hover.
+
+In JavaScript, set this property using the `cardStyle`.
+
 ### `astro-dev-toolbar-toggle`
 
 Shows a toggle element, acting as a checkbox. This element internally is a simple wrapper around a native `<input type="checkbox">` element. The checkbox element can be accessed using the `input` property.
@@ -336,9 +342,15 @@ toggle.input.addEventListener('change', (evt) => {
 });
 ```
 
+#### `toggle-style`
+
+The style of the toggle (`purple`, `gray`, `red`, `green`, `yellow`, `blue`).
+
+In JavaScript, set this property using the `toggleStyle` property.
+
 ### `astro-dev-toolbar-highlight`
 
-Can be used to highlight an element on the page. In most cases, you'll want to position and resize this element using the `top`, `left`, `width` and `height` CSS properties to match the element you want to highlight. An [icon](#icons) can also be specified using the `icon` attribute and will be shown in the top right corner of the highlight.
+Can be used to highlight an element on the page. In most cases, you'll want to position and resize this element using the `top`, `left`, `width` and `height` CSS properties to match the element you want to highlight.
 
 ```html
 <!-- Highlight the entire page -->
@@ -358,6 +370,14 @@ highlight.style.height = `${rect.height + 15}px`;
 highlight.icon = 'astro:logo';
 ```
 
+#### `style`
+
+The style of the highlight (`purple`, `gray`, `red`, `green`, `yellow`, `blue`).
+
+#### `icon`
+
+An [icon](#icons) to show in the top right corner of the highlight.
+
 ### `astro-dev-toolbar-tooltip`
 
 Shows a tooltip with different sections. This component is set to `display: none;` by default and can be made visible using a `data-show="true"` attribute.