Passing props to css.ts file - Mantine V7 & VanillaExtract

[midnight oak]

Hi, how can i pass some props to my .css.ts files? Currently im trying to pass them as var, and then use assignInlineVars to assign any value to it, but it seems to doesnt work.

Do you have any ideas? 😐 Thats the code:

    <Box
      {...props}
      className={clsx(classes.card, className)}
      style={
        (assignInlineVars({
          [classes.radiusVar]: 16,
        }),

Now its throwing error because of number (16) instead of string, but it doesnt matter, when i do for example '16px' its still doesnt works.

Thats my .css.ts file:

import { createVar, style } from '@vanilla-extract/css'

export const radiusVar = createVar()

export const card = style({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  flexShrink: 0,
  borderRadius: radiusVar,
})

Second question is: How can i use mantine functions for example "rgba" or "lighten" on vars that looks like (var(--test_asdasd)" ?

Or its not possible and i should handle all values in inline styles instead of classes?

[floral bloom]

https://mantine.dev/styles/data-attributes/

you could try using data attributes for selective styling

[midnight oak]

But like this im able to handle something when its true/false, i cant pass dynamic values to my styles?

[shell flame]

Add css variable in style prop, for example, <Box style={{ '--my-var': 'red' }} />

[midnight oak]

hmm 🤔 What am i doing wrong?

[shell flame]

https://stackoverflow.com/questions/52005083/how-to-define-css-variables-in-style-attribute-in-react-and-typescript

[midnight oak]

Thanks guys!

And the second question, is it possible to use mantine functions like rgba, lighten etc to these var variables?

[shell flame]

No

[midnight oak]

  const mantineColorValue = color ? cssVars.colors[color]![colorShade] : undefined
  const designColorValue = designColor ? cssVars.other[designColor] : undefined

  // the default color is the theme accent
  const cardColor = designColorValue || mantineColorValue || cssVars.other.primary

  return (
    <Box
      {...props}
      className={clsx(classes.card, className)}
      style={
        {
          [classes.radius]: rem(radius),
          [classes.backgroundColor]: !outlined ? rgba(cardColor, 0.1) : 'transparent',
          [classes.borderColor]: outlined ? cssVars.other.line : 'transparent',
          [classes.size]: rem(size),
        } as CSSProperties
      }
    >

Hmm, so maybe there is any workaround? Im generating background of item with using rgba on passed color, but without possibility to use rgba its hard 🤔

Its not possible to maybe somehow parse it for a second to a real RGB or HEX value?