Referenced token value is a CSS variable instead of a HEX color

[ronaldruzicka]

Bug report

Describe the bug

Not sure if it is a bug or a feature request, but when you have some colors token and you create another one from it, e.g. as an alias, it's value is not a hex color but a css variable.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository: codesandbox: https://codesandbox.io/s/stitches-react-chueg?file=/src/stitches.config.ts

1. Go to stitches.config.ts
2. Check colors.greenMain and colors.success -> success is an alias from colors.greenMain
3. Scroll down to bottom of the file, there is a console.log with the values from theme.colors[token].value
4. See there is a value #33d718 for greenMain, but var(--colors-greenMain) for success

Expected behavior

I would expect that colors.success is also a hex color, because otherwise it's not possible to make other computations for example adding transparency or mixing with other colors, like using tint or shade functions from polished library

Screenshots

System information

• OS: macOS Monterey 12.2
• Browser (if applies) Brave 1.34.81
• Version of Stitches: 1.2.6

[well1791]

This is precisely what I was looking for!

Here's what I ended up with

  // Component/styles.ts

  export const expContainer = css({
    [`.${themes.light} &`]: {
      bg: opacify(0.35, themes.light.colors.sectionExpCardBg.value),  // not intended
    },

    [`.${themes.blackAndWhite} &`]: {
      bg: opacify(0.35, theme.colors.whiteA11.value),  // not intended
    },

    [`.${themes.dark} &`]: {
      bg: opacify(0.2, theme.colors.blackA11.value),
    },
  }

Ideally I was looking for something like

// Component/index.tsx
import { opacify } from 'polished'

import useSelectedTheme from 'src/hooks/useSelectedTheme'
import { themes } from 'src/shared/theme'
import * as stl from './styles'

export default React.forwardRef<HTMLDivElement, Props>(
  ({ data, prevBtn, nextBtn, ...props }: Props, ref) => {
    const [selectedTheme] = useSelectedTheme()
    // here `sectionExpCardBg.value` value should be the equivalent to the value of whiteA or blackA
    const bg = opacify(0.35, themes[selectedTheme].colors.sectionExpCardBg.value)
    // ...

          <div
            className={stl.expContainer({
              css: { $$bg: bg },
            })}
          >

and then

// Component/styles.ts

export const expContainer = css({
  bg: '$$bg',
}

Is there a way to get the final color? 🤔

[mateuszaliyev]

I find const assertion to be the cleanest solution for the time being.

import { createStitches } from "@stitches/react";

const colors = {
  aquamarine: "#7ee7c6",
  black: "#000000",
  gainsboro: "#dfdfdf",
  mint: "#80e6c8",
  pink: "#ff70c2",
  platinum: "#ebebeb",
  purple: "#a47be8",
  red: "#ff705c",
  white: "#ffffff",
} as const;

export const { config, css, getCssText, globalCss, styled, theme } =
  createStitches({
    theme: {
      colors: {
        ...colors,

        background: colors.white,
        error: colors.red,
        text: colors.black,
      },
    },
  });

console.log(theme.colors.error.value); // #ff705c