Theme override tokens

[just214]

It could be useful to be able to overwrite certain parts of a pre-defined theme value at the instance level.

A good example is a box-shadow. Currently, you can leave off the color value and fill it in later with a locally-scoped variable:

const { styled } = createCss({
  theme: {
    shadows: {
      sm: "0 1px 3px 0", // no color provided
    },
  },
});

const Button = styled("button", {
  $$shadowColor: "lightskyblue",
  shadow: "$sm $$shadowColor",
});

But, as far as I know, this falls apart when combining multiple shadows into a single value:

Can't do this:

const { styled } = createCss({
  theme: {
    shadows: {
      sm: "3px 3px, -1em 0 0.4em",
    },
  },
});

const Button = styled("button", {
  $$shadowColor: "lightskyblue",
  shadow: "$sm $$shadowColor",
});

A proposed solution: Locally-scoped theme override tokens

Here is the basic idea:

// Your theme
const { styled } = createCss({
  theme: {
    shadows: {
      // Insert override tokens for any values that you want to be able to override later.
      sm: "3px 3px $$shadowColor, -1em 0 0.4em $$shadowColor2",
      // You can provide a default value, which allows the locally-scoped token to be optional
      $$shadowColor: "dodgerblue",
      ...
    },

  },
});

// Usage
const Button = styled("button", {
  shadow: "$sm",
  $$shadowColor: "lightskyblue",  // overrides the default value of "dodgerblue",
  // TypeScript error: $$shadowColor2 is required (since no default value was provided in the theme)
})

[peduarte]

Interesting idea, thank you for sharing 💯

Currently, this is outside of our scope, but let's keep this discussion going. I'm curious about what others think too.

To give you some context: The shadows token wasn't really intended to contain multiple shadows. The idea is that you'd have one shadow configuration per token. That way, shadows can be mix and matched or used independently.

Right now the best option that comes to mind is to use single shadow tokens, then compose them at the usage level:

const { styled } = createCss({
  theme: {
    shadows: {
      s1: "3px 3px",
      s2: "-1em 0 0.4em"
    }
  }
});

const Button = styled("button", {
  $$shadowColor: "red",
  boxShadow: "$s1 $$shadowColor, $s2 $$shadowColor"
});

[just214]

No problem and that makes sense. I appreciate the background info. If I think of other use-cases for this feature, I'll be sure to bring them up here.