cannot set tooltipSuccessBackground custom color in astro

[Igor Garbuz]

Following the doc i've tried to set a custom color for the success tooltip after the copy button is clicked.
my astro config looks like:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

import expressiveCode, { setLuminance } from "astro-expressive-code";

export default defineConfig({
  site: 'https://example.com',
  integrations: [expressiveCode({
    themes: ['dark-plus'],
    frames: {
      showCopyToClipboardButton: true,
    },
    styleOverrides: {
      tooltipSuccessBackground: '#fc2003',
      // tooltipSuccessBackground: () => setLuminance('#fc2003', 0.18),
    },
  }), mdx(), sitemap()],
});

here I've tried to set tooltipSuccessBackground to a string value of a color, but also tried the hook setLuminance. Neither of two worked.

Using

    "astro-expressive-code": "^0.33.5",
    "astro": "^4.5.12",

I've also tried some other copy button related styles, but neither of them worked.

[Hippo]

The styleOverrides settings you are trying to set are contributed by the frames plugin and must therefore be nested inside a frames sub-object.

An example showing the nesting can be found here: https://expressive-code.com/key-features/frames/#configuration

You can add a // @ts-check comment to the top of the config file to get feedback from your editor if you're trying to set incorrect options.

Hope that helps!

[Igor Garbuz]

Thanks indeed that was the solution 🙏
relation between frames and styleOverrides was a bit unclear in the doc, top-level frames does not have the parent styleOverrides, but it can be nested inside.