Fix theme to access it from a component

[viktoria-schwarz]

Right now it doesn't work to access a theme value by theme.color.red60 or theme.space[0] (or similar) but it should work.

[sebald]

Can you add an example code? :)

[viktoria-schwarz]

E.g. in Field.tsx

const errorClassName = useStyles({ color: 'color.red60' });

cannot access the theme and therefore can't assign the color.

We could solve it by adding const theme = useTheme() and access the color by theme.color.red60 but then "Theme object is possibly undefined".

[viktoria-schwarz]

@sebald Do we actually need a createTheme in which we can enforce values like some colors, spacings etc.? Because if not I don't know how to solve the "is possibly undefined" error...

[sebald]

We definitely need to talk about this. I guess we need a minimal theme.

[sebald]

const errorClassName = useStyles({ color: 'color.red60' });

Whoops ... this should read {color: 'red60' }

[viktoria-schwarz]

A minimal theme that we can use as a fallback, in the case that in the theme which is used a certain value is missing?

[viktoria-schwarz]

True, this works, but not if red60 is not defined, but let's talk about this next week and close this issue for now?

[sebald]

A minimal theme that we can use as a fallback, in the case that in the theme which is used a certain value is missing?

Yeah, something like that. We should talk about the theme as a whole I guess. Like should we remove the prefixes? Should we use semantic objects for scales instead of arrays? (https://seek-oss.github.io/braid-design-system/foundations/layout#spacing)

[viktoria-schwarz]

Probably a good idea. And also using semantic objects for e.g. colors like "warning" or "error" instead of orange and red color values.

[sebald]

@viktoria-schwarz close this? 🤔