Fix breakpoints selected item styling (#1840)

Added the proper `aria` attributes to two selectors to make sure the
intended design renders correctly for the selected item.


https://github.com/webstudio-is/webstudio-builder/assets/16368791/f6914be2-e5b5-49b5-bb5f-5425257b706b

Pinging @taylornowotny for a quick review.

Co-authored-by: Oleg Isonen <oleg008@gmail.com>

packages/design-system/src/components/toolbar.tsx

@@ -58,7 +58,7 @@ export const toggleItemStyle = css(textVariants.labelsTitleCase, {
   transition: "200ms background",
 
   "&:focus-visible": toolbarItemFocusRing,
-  "&:hover, &[data-state=on], &[data-state=open]": {
+  "&:hover, &[data-state=on], &[data-state=open], &[aria-checked=true]": {
     background: theme.colors.backgroundTopbarHover,
   },
   variants: {
@@ -69,7 +69,7 @@ export const toggleItemStyle = css(textVariants.labelsTitleCase, {
     variant: {
       subtle: {
         color: theme.colors.foregroundSubtle,
-        "&:hover, &[data-state=on]": {
+        "&:hover, &[data-state=on], &[aria-checked=true]": {
           color: "inherit",
         },
       },