Variable is not set

[cojoclaudiu]

Hello, I have a issue with applying a theme to a component and I'm not sure if I'm doing something wrong.

import { createTheme } from "@vanilla-extract/css";

export const [themeClass, vars] = createTheme({
  input: {
    hover: { border: "0.1rem solid rgba(88, 86, 214, 1)" },
    border: "0.1rem solid rgba(209, 209, 214, 1)",
    outline: "0.4rem solid rgba(88, 86, 214, 0.2)",
    height: "4.5rem",
    width: "100%",
    boxShadow: "0 0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.082)",
    color: "rgba(0, 0, 0, 1)",
    marginTop: "0.9rem",
    borderRadius: "1rem",
    padding: "0 1.4rem",

    label: {
      fontSize: "1.6rem",
      fontWeight: "700",
      color: "rgba(141, 141, 147, 1)",
    },

    icon: {
      height: "100%",
      width: "4.6rem",
    },
  },
});

export const { input } = vars;

Here is how I'm appling the styles to my component:

import { style, globalStyle } from "@vanilla-extract/css";
import { input } from "../../theme/styles.css";

export const labelName = style({
  fontSize: input.label.fontSize,
  fontWeight: input.label.fontWeight,
  color: input.label.color,
});

Here is what I see

Thank you for help.

[mattcompiles]

Looks right, but you'll need to apply the themeClass as well, otherwise nothing is setting the CSS variables so they don't have a value.

[cojoclaudiu]

Thank you for the replay, I'm not sure how I can apply the theme and I don't see in the docs any example.

[cojoclaudiu]

It is possible to do soemthing like this?

export const inputWrapper = (focus: boolean) =>
  style({
    outline: focus ? "0.4rem solid rgba(88, 86, 214, 0.2)" : "none",
    border: focus
      ? "0.1rem solid rgba(88, 86, 214, 1)"
      : "0.1rem solid rgba(209, 209, 214, 1)",

    selectors: {
      "&:hover": {
        border: "0.1rem solid rgba(88, 86, 214, 1)",
      },
    },
  });

Or I need to switch between classes inside the component?

[mattcompiles]

Sorry, you can't call style at runtime so this isn't possible. Maybe have a look at Recipes if you're looking to put some of your component logic code into your styles.

[sriadimanav]

can someone please provide an example for applying themeClass or at-least add a reference link
the documentation for this library is very weak, i must say
@mattcompiles

[askoufis]

@sriadimanav Applying themeClass is just like applying any other class/style. This is documented here. If you believe the documentation is lacking, please raise an issue, or even better, contribute a PR.