@guruhotel/aura-ui/esm/toolbar/toolbar.styles.js

⚛️ React UI library by GuruHotel

import{rounded as o}from"../common-variants";import{styled as r}from"../theme";import*as e from"@radix-ui/react-toolbar";import{itemStyles as a}from"./toolbar.constants";export const StyledToolbar=r(e.Root,{display:"flex",width:"100%",padding:"$3",minWidth:"max-content",backgroundColor:"white",boxShadow:"0 2px 10px $colors$blackA7",variants:{rounded:o},defaultVariants:{rounded:"sm"}});export const StyledButton=r(e.Button,{...a,paddingLeft:10,paddingRight:10,color:"white",variants:{colorScheme:{text:{backgroundColor:"$text9","&:hover":{color:"white",backgroundColor:"$text11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $text7"}},guru:{backgroundColor:"$guru9","&:hover":{color:"white",backgroundColor:"$guru11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $guru7"}},fellow:{backgroundColor:"$fellow9","&:hover":{color:"white",backgroundColor:"$fellow11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $fellow7"}},darkie:{backgroundColor:"$darkie9","&:hover":{color:"white",backgroundColor:"$darkie11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $darkie7"}},red:{backgroundColor:"$red9","&:hover":{color:"white",backgroundColor:"$red11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $red7"}},nature:{backgroundColor:"$nature9","&:hover":{color:"white",backgroundColor:"$nature11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $nature7"}},sunshine:{backgroundColor:"$sunshine9","&:hover":{color:"white",backgroundColor:"$sunshine11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $sunshine7"}},violet:{backgroundColor:"$violet9","&:hover":{color:"white",backgroundColor:"$violet11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $violet7"}},gray:{backgroundColor:"$gray9","&:hover":{color:"white",backgroundColor:"$gray11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $gray7"}},primary:{backgroundColor:"$primary9","&:hover":{color:"white",backgroundColor:"$primary11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $primary7"}},secondary:{backgroundColor:"$secondary9","&:hover":{color:"white",backgroundColor:"$secondary11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $secondary7"}},utilitary:{backgroundColor:"$utilitary9","&:hover":{color:"white",backgroundColor:"$utilitary11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $utilitary7"}}}},defaultVariants:{colorScheme:"guru"}});export const StyledLink=r(e.Link,{...a,backgroundColor:"transparent",color:"$gray11",display:"inline-flex",justifyContent:"center",alignItems:"center",variants:{colorScheme:{text:{"&:hover":{backgroundColor:"$text3",color:"$text11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $text7"}},guru:{"&:hover":{backgroundColor:"$guru3",color:"$guru11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $guru7"}},fellow:{"&:hover":{backgroundColor:"$fellow3",color:"$fellow11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $fellow7"}},darkie:{"&:hover":{backgroundColor:"$darkie3",color:"$darkie11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $darkie7"}},red:{"&:hover":{backgroundColor:"$red3",color:"$red11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $red7"}},nature:{"&:hover":{backgroundColor:"$nature3",color:"$nature11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $nature7"}},sunshine:{"&:hover":{backgroundColor:"$sunshine3",color:"$sunshine11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $sunshine7"}},violet:{"&:hover":{backgroundColor:"$violet3",color:"$violet11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $violet7"}},gray:{"&:hover":{backgroundColor:"$gray3",color:"$gray11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $gray7"}},primary:{"&:hover":{backgroundColor:"$primary3",color:"$primary11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $primary7"}},secondary:{"&:hover":{backgroundColor:"$secondary3",color:"$secondary11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $secondary7"}},utilitary:{"&:hover":{backgroundColor:"$utilitary3",color:"$utilitary11",cursor:"pointer"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $utilitary7"}}}},defaultVariants:{colorScheme:"guru"}});export const StyledSeparator=r(e.Separator,{width:1,backgroundColor:"$gray6",margin:"0 10px"});export const StyledToggleGroup=r(e.ToggleGroup,{display:"inline-flex",borderRadius:4});export const StyledToggleItem=r(e.ToggleItem,{...a,boxShadow:0,backgroundColor:"white",marginLeft:2,"&:first-child":{marginLeft:0},variants:{colorScheme:{text:{"&[data-state=on]":{backgroundColor:"$text5",color:"$text11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $text7"},"&:hover":{backgroundColor:"$text3",color:"$text11"}},guru:{"&[data-state=on]":{backgroundColor:"$guru5",color:"$guru11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $guru7"},"&:hover":{backgroundColor:"$guru3",color:"$guru11"}},fellow:{"&[data-state=on]":{backgroundColor:"$fellow5",color:"$fellow11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $fellow7"},"&:hover":{backgroundColor:"$fellow3",color:"$fellow11"}},darkie:{"&[data-state=on]":{backgroundColor:"$darkie5",color:"$darkie11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $darkie7"},"&:hover":{backgroundColor:"$darkie3",color:"$darkie11"}},red:{"&[data-state=on]":{backgroundColor:"$red5",color:"$red11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $red7"},"&:hover":{backgroundColor:"$red3",color:"$red11"}},nature:{"&[data-state=on]":{backgroundColor:"$nature5",color:"$nature11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $nature7"},"&:hover":{backgroundColor:"$nature3",color:"$nature11"}},sunshine:{"&[data-state=on]":{backgroundColor:"$sunshine5",color:"$sunshine11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $sunshine7"},"&:hover":{backgroundColor:"$sunshine3",color:"$sunshine11"}},violet:{"&[data-state=on]":{backgroundColor:"$violet5",color:"$violet11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $violet7"},"&:hover":{backgroundColor:"$violet3",color:"$violet11"}},gray:{"&[data-state=on]":{backgroundColor:"$gray5",color:"$gray11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $gray7"},"&:hover":{backgroundColor:"$gray3",color:"$gray11"}},primary:{"&[data-state=on]":{backgroundColor:"$primary5",color:"$primary11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $primary7"},"&:hover":{backgroundColor:"$primary3",color:"$primary11"}},secondary:{"&[data-state=on]":{backgroundColor:"$secondary5",color:"$secondary11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $secondary7"},"&:hover":{backgroundColor:"$secondary3",color:"$secondary11"}},utilitary:{"&[data-state=on]":{backgroundColor:"$utilitary5",color:"$utilitary11"},"&:focus":{position:"relative",boxShadow:"0 0 0 2px $utilitary7"},"&:hover":{backgroundColor:"$utilitary3",color:"$utilitary11"}}}},defaultVariants:{colorScheme:"guru"}});