@primeuix/themes v3.0.0: Presets not working anymore

[MAN-Sendance]

Until now, my preset looked like the following. However, since the upgrade to v3, two issues have occurred. First, my secondary color is not accepted anymore. Second, dt is throwing an error -

TS2322: Type ({dt}: { dt: any; }) => string is not assignable to type ExtendedCSS
Type ({dt}: { dt: any; }) => string is not assignable to type

const primaryColor = palette('#ff8400');
const secondaryColor = palette('#11484f');

const MyPreset = definePreset(Aura, {
  semantic: {
    primary: primaryColor,
    secondary: secondaryColor,
    colorScheme: {
      light: {
        surface: {
          0: '#ffffff',
          50: '{zinc.50}',
          100: '{zinc.100}',
          200: '{zinc.200}',
          300: '{zinc.300}',
          400: '{zinc.400}',
          500: '{zinc.500}',
          600: '{zinc.600}',
          700: '{zinc.700}',
          800: '{zinc.800}',
          900: '{zinc.900}',
          950: '{zinc.950}',
        },
      },
    },
  },
  components: {
    drawer: {
      css: ({ dt }: { dt: any }): string => `
        .p-drawer {
          height: calc(100vh - 64px); /* 4rem = height of top nav */
        }

        .p-menu {
          border: none;
        }

        .p-submenu-header {
          padding: 1rem 0;
        }
    `,
    },
    menu: {
      colorScheme: {
        light: {
          root: {
            shadow:
              'rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;',
          },
          item: {
            focusBackground: '{primary.hover.color}',
            color: '{secondary.500}',
            focusColor: 'white',
            icon: {
              color: '{secondary.500}',
              focusColor: 'white',
            },
          },
          submenuLabel: {
            fontWeight: '{navigation.submenu.label.font.weight}',
            background: '{navigation.submenu.label.background}',
            color: '{secondary.500}',
          },
        },
        dark: {
          root: {
            shadow:
              'rgba(255, 255, 255, 0.7) 0px 4px 8px, rgba(255, 255, 255, 0.4) 0px 6px 20px',
          },
          item: {
            focusBackground: '{primary.hover.color}',
            color: 'white',
            focusColor: 'white',
            icon: {
              color: 'white',
              focusColor: 'white',
            },
          },
          submenuLabel: {
            fontWeight: '{navigation.submenu.label.font.weight}',
            background: '{navigation.submenu.label.background}',
            color: 'white',
          },
        },
      },
      css: ({ dt }: { dt: any }): any => `
        .active {
          background-color: ${dt('primary.hover.color')};
          color: white;
        }
      `,
    },
    tabs: {
      tabpanel: {
        padding: '0',
      },
      css: (): any => `
        .p-tab {
          display: flex;
        }
    `,
    },
  },
  css: ({ dt }: { dt: string }): string => `
        /* Global CSS */
        body {
          color: ${dt('secondary.500')} !important;
          font-family: Manrope, sans-serif !important;
          margin: 0;
        }
    `,
});

[cetincakiroglu]

Hi,

Thanks for reporting the issue, we'll check it.

[MAN-Sendance]

Any news?

[cetincakiroglu]

Hi,

Could you please try it with the latest version and let us know if the issue still exists? "@primeuix/themes" 3.0.1 released 3 days ago.

[MAN-Sendance]

Still exists.

[cetincakiroglu]

Hi,

Thanks for the feedback, we're working on it.

[samaelsimoes]

Hi! Looking at your code snippet and the TypeScript error (TS2322), this issue happens because in @primeuix/themes v3 the type signatures for css functions and the dt helper were refined to be much stricter.

Additionally, the secondary semantic token is no longer resolved directly at the root of the semantic object in certain preset structures without proper token extension.

To bypass the TypeScript error immediately without removing your custom css functions, you can remove the explicit strict type annotations and let TypeScript infer the correct context types:

1. Fix for css functions (removing explicit typing on dt):
   Instead of typing ({ dt }: { dt: any }), let @primeuix/themes infer it automatically:

drawer: {
css: ({ dt }) => .p-drawer { height: calc(100vh - 64px); } // ...,
},

2. Regarding secondary:
   If your custom secondary color is breaking the theme compilation, a safe workaround is mapping it inside a custom color scale or injecting it via global CSS variables in the root preset css block, rather than declaring it directly under the root semantic object if v3 expects a specific token path (like colorScheme.light.semantic).

If anyone found a clean way to type dt in v3 without resorting to //@ts-ignore, feel free to share!

[mertsincan]

Hi,

Fixed now. Typing the preset css as a function is covered in the primeuix/styled 1.1.0 and themes 3.0.2 post: https://blog.primeui.dev/blog/primeuix-styled-1-1-0-and-themes-3-0-2/#typing-a-function-as-preset-css

You can also use dt inside a plain string, without wrapping it in a function. There is an example in the design tokens post: https://blog.primeui.dev/blog/design-tokens-in-primeui/#css-in-the-preset