Customizing Theme

export const config = {
  light: vars({

    ... // other tokens
    //updated '--color-primary-0' value
    '--color-primary-0': '#C0C0C0',

    /* Added a new background color for light mode */
    '--color-background-new': '#BAE7FC',

   /* Add a new token with custom font-size */
   '--custom-font-size': '80'

  }),
  dark: vars({
     ... // other tokens
      /* Added a new background color for dark mode */
    '--color-background-new': '#89D6FA',

   /* Add a new token with custom font-size */
   '--custom-font-size': '80'
  }),
};

theme: {
    extend: {
      colors: {
        background: {
          ... // other color values,
          /* Added a new background color */
          new: 'var(--color-background-new)',
        },
      },
        fontSize: {
          ... // other font size values,
          /* Added a new font size token */
         'custom-heading-xl':'var(--custom-font-size)'
      },
    },
    plugins: [],
  },

// Text style props are from here https://gluestack.io/ui/docs/components/text (step 3, the one from styles.tsx)
const textStyleProps = {};

//ref @see https://www.tailwind-variants.org/docs/api-reference#config-optional
const config = {
  twMerge: true,
  twMergeConfig: {
    classGroups: {
      'font-size': [
        {
          text: ['custom-heading-xl'],
        },
      ],
    },
  },
};

export const textStyle = tva(...textStyleProps, config);