Improve the code delimited by triple quotes. convert this css to @vanilla-extract/css styles:

""".newButtonWrapper {
display: flex;
flex-direction: row;
border: 2px solid ${Colors.border};
color: ${Colors.primary};
border-radius: 10px;
margin: 0px 12px 12px 0px;
cursor: pointer;
flex-grow: 0;
text-align: center;
background-color: white;
flex-shrink: 0;
font-size: 16px;
height: 42px;
position: relative;
align-items: center;
justify-content: center;
}
.newButtonWrapper:hover {
border: 2px solid ${Colors.primary};
}"""

Question

Improve the code delimited by triple quotes. convert this css to @vanilla-extract/css styles:

""".newButtonWrapper {
            display: flex;
            flex-direction: row;
            border: 2px solid ${Colors.border};
            color: ${Colors.primary};
            border-radius: 10px;
            margin: 0px 12px 12px 0px;
            cursor: pointer;
            flex-grow: 0;
            text-align: center;
            background-color: white;
            flex-shrink: 0;
            font-size: 16px;
            height: 42px;
            position: relative;
            align-items: center;
            justify-content: center;
          }
          .newButtonWrapper:hover {
            border: 2px solid ${Colors.primary};
          }"""

AI · Accepted Answer

import { style } from '@vanilla-extract/css';
import { Colors } from './your-colors-file';

export const newButtonWrapper = style({
  display: 'flex',
  flexDirection: 'row',
  border: `2px solid ${Colors.border}`,
  color: Colors.primary,
  borderRadius: '10px',
  margin: '0px 12px 12px 0px',
  cursor: 'pointer',
  flexGrow: 0,
  textAlign: 'center',
  backgroundColor: 'white',
  flexShrink: 0,
  fontSize: '16px',
  height: '42px',
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'center',

selectors: {
    '&:hover': {
      border: `2px solid ${Colors.primary}`,
    },
  },
});

Responses

Improve More Code