Is it possible to get a quick sanity check code review

[dagda1]

Would it be possible to get a quick sanity check code review to see if I'm on the right track?

I've created this codesandbox to illustrate where I am and here is an Input.cs.ts file from an <Input /> component:

import { composeStyles, style } from '@vanilla-extract/css';
import { vars } from '../../../style/themes/vars.css';

const base = style({
  background: vars.input.borderWidth,
  border: `${vars.input.borderWidth} solid ${vars.input.borderColor}`,
  ':focus': {
    background: vars.input.focus.bg,
    border: `${vars.input.focus.borderWidth} solid ${vars.input.focus.borderColor}`,
    outline: `${vars.outlineWidth} solid ${vars.outlineColor}`,
  },
});

export const input = composeStyles(base);

export const invalid = composeStyles(
  base,
  style({
    borderColor: vars.input.invalid.borderColor,
    ':focus': {
      borderColor: vars.input.focus.borderColor,
    },
  }),
);

I've had a look at your braid design system and had a go at extracting the basic bits.

[mattcompiles]

There's quite a lot of code in there to go over. One thing I did notice though is your sprinkles file needs to be .css.ts instead of just .ts.

[dagda1]

@mattcompiles you are correct, it is too big now. Thanks for the pointer.