import CssBaseline from "@material-ui/core/CssBaseline" ; import { fade } from "@material-ui/core/styles" ; import React from "react" ; import { makeStyles } from "./styles" ; const useStyles = makeStyles ( ( theme ) => ( { "@global" : { "@import" : "url('https://rsms.me/inter/inter.css')" , "@keyframes hoverControlStart" : { from : { transform : "scale(1)" } , to : { transform : "scale(1.4)" } } , "@keyframes hoverControl" : { from : { transform : "scale(1.4)" } , to : { transform : "scale(1.6)" } } , "@keyframes hoverSwitchStart" : { from : { boxShadow : `0 0 0 0 ${ theme . palette . saleor . active [ 5 ] }` } , to : { boxShadow : `0 0 0 3px ${ theme . palette . saleor . active [ 5 ] }` } } , "@keyframes hoverSwitch" : { from : { boxShadow : `0 0 0 3px ${ theme . palette . saleor . active [ 5 ] }` } , to : { boxShadow : `0 0 0 5px ${ theme . palette . saleor . active [ 5 ] }` } } , ":root" : { "--background-paper" : theme . palette . background . paper , "--background-default" : theme . palette . background . default } , "::selection" : { background : fade ( theme . palette . primary . main , 0.2 ) } , html : { fontSize : "62.5%" } , a : { color : theme . palette . primary . main , textDecoration : "none" } } } ) , { name : "Baseline" } ) ; export const Baseline = ( ) => { useStyles ( ) ; return < CssBaseline />; } ; Baseline . displayName = "Baseline" ;