Morning TS Team! We are facing some side effects on tertiary buttons when providing a value for "--ts-var-root-color". The root color is then overriding the tertiary button text color in the Liveboard styling section. How can this be handled? https://cdn.discordapp.com/attachments/1143209464875462756/1505859867418693652/renditionDownload.png?ex=6a0c28c9&is=6a0ad749&hm=48829801d55c3d2684f4fa184160b7d446a1deada5e5a4fb9e7afacf5a1a1d93& https://cdn.discordapp.com/attachments/1143209464875462756/1505859867821211749/renditionDownload.png?ex=6a0c28ca&is=6a0ad74a&hm=9f7a1f24623c1484ac50ced0c448e1b15c78d50e1d22e7febd99ac4ae7a72733&

message has been deleted

This is expected behavior when a broad/root token cascades into component tokens. Use a more specific Liveboard styling token for the tertiary button text so it no longer inherits from your root color.

javascript
import { init, AuthType, LiveboardEmbed } from '@thoughtspot/visual-embed-sdk';

init({
  thoughtSpotHost: 'https://your-ts-host',
  authType: AuthType.None,
  customizations: {
    style: {
      customCSS: {
        variables: {
          // Keep your root brand token
          '--ts-var-root-color': '#1D2B64',

          // Explicitly control Liveboard styling button colors
          '--ts-var-liveboard-styling-button-background': '#1D2B64',
          '--ts-var-liveboard-styling-button-hover-text-color': '#FFFFFF',
        },
      },
    },
  },
});

new LiveboardEmbed('#tsEmbed', {
  liveboardId: 'YOUR_LIVEBOARD_ID',
}).render();

If your issue is specifically the tertiary button text in the Styling panel default state (not just hover), I could not find a dedicated documented variable for that exact state in the official ThoughtSpot documentation. In that case, the safe approach is: 1. keep

--ts-var-root-color

for global branding, and 2. override available Liveboard styling button tokens (like hover/background) to prevent unreadable combinations. Reference:

CustomCssVariables

includes Liveboard styling-specific variables such as: -

--ts-var-liveboard-styling-button-background

-

--ts-var-liveboard-styling-button-hover-text-color

on the official interface page.

Hi @thomas.wagner.xing Can you try setting the tertiary color in your theme? The tertiary button color is picked from the root color by default. You can also check the CSS variable behavior here:https://developers.thoughtspot.com/docs/css-variables-reference#_button_elements

Hi @Ruchi Anand ! We had some color set for the tertiary buttons 3 months ago and it caused problems on some filter buttons, so we deactivated it (example attached). Since then the UI changed for the Edit mode so can try it again. https://cdn.discordapp.com/attachments/1505859867330482277/1506554878066036856/Screenshot_2026-02-12_at_12.26.56.png?ex=6a0eb011&is=6a0d5e91&hm=c5f7dd04e8468838d269ac52c2235f7023bc445f1faad404ced8aff5d0096362&

Sure, let me know if it doesn't work or need my help!

Unfortunately that doesn't work @Ruchi Anand . The syling button doesn't seem to be a proper tertiary button because it only uses the tertiary text button color (--ts-var-button--tertiary-color) but ignores the other three ts variables (--ts-var-button--tertiary-background, --ts-var-button--tertiary--hover-background, --ts-var-button--tertiary--active-background) https://cdn.discordapp.com/attachments/1505859867330482277/1506563077951455282/image.png?ex=6a0eb7b4&is=6a0d6634&hm=40990892f29ee403094363d065448ca042e3e286c6773f360e14b2a30e8d2f2b& https://cdn.discordapp.com/attachments/1505859867330482277/1506563078165368892/image.png?ex=6a0eb7b4&is=6a0d6634&hm=44da9f2b3a345ceac8bec850571b1d8af1db984d73435fc1b839225d4c6d9f55& https://cdn.discordapp.com/attachments/1505859867330482277/1506563078366691450/image.png?ex=6a0eb7b4&is=6a0d6634&hm=9ca2e0fac81473993288e3165883ea4cdd6180c0e72cae80aa4f1624611cc60e&

Okay, can you tell me what exact change you need? I will check on my end and provide a solution.

We need this "Properties linked to Dashboards" to be visible even when using "--ts-var-root-color" (because our root color is dark, and also tertiary button text color is dark) https://cdn.discordapp.com/attachments/1505859867330482277/1506563950504841307/image.png?ex=6a0eb884&is=6a0d6704&hm=58cff64de0f9a08691c776601b8a83558e459a130472de98768ffb3111a265d9&

Hi @thomas.wagner.xing Can you try using

rules_UNSTABLE

for this specific button override? I will also check internally with the team on supporting the tertiary variables properly for this component.

rules_UNSTABLE: {
  'button[data-testid="unlink-styles"]': {
    "background-color": "#ffffff !important",
  },

  'button[data-testid="unlink-styles"] p': {
    color: "yellow !important",
  },

  'button[data-testid="unlink-styles"]:hover': {
    "background-color": "#DDDDDD !important",
  },
},

Great thank you @Ruchi Anand that worked, I also had to change the svg color. Much appreciated! Do you know any solution for the second issue I posted here: https://discord.com/channels/1143209406037758065/1505911516401107105/1505911516401107105 ? In that case we can't use unstable css rules I think because the users pick whatever color they want in the styling section.

Yeah, this needs to get fixed on the component layer, i have mentioned this to the team. they are working on it.

great thank you @Ruchi Anand