Configuração global
Cor de destaque = #8758F0
        ↓
Barra promocional
Cor de fundo = [Usar global: Cor de destaque]
        ↓
#8758F0 (atualiza sozinho se o global mudar)

{
  "groups": [
    {
      "name": "Cores",
      "settings": [
        {
          "id": "color_secondary",
          "type": "color",
          "label": "Cor de destaque",
          "default": "#8758F0"
        }
      ]
    }
  ]
}

{
  "id": "backgroundColor",
  "type": "color",
  "label": "Cor de fundo",
  "default": "@theme.color_secondary",
  "themeLink": "color_secondary"
}

"themeLink": ["color_primary", "color_secondary"]

import { InlineText, SectionChrome, useThemeSetting } from '@corvex/runtime';

export default function PromoBarSection({
  settings = {},
  isEditing,
  onSettingsChange,
}) {
  const text = settings.text ?? 'Frete grátis acima de R$ 199';
  const bg = useThemeSetting(
    settings.backgroundColor ?? '@theme.color_secondary',
    '#8758F0'
  );

  return (
    <SectionChrome
      settings={settings}
      isEditing={isEditing}
      onSettingsChange={onSettingsChange}
    >
      <div className="promo-bar" style={{ background: bg }}>
        <InlineText
          tag="span"
          propKey="text"
          value={text}
          isEditing={isEditing}
          onChange={(v) => onSettingsChange?.({ text: v })}
        />
      </div>
    </SectionChrome>
  );
}

.promo-bar {
  background: var(--accent-primary);
}

// section
const bg = useThemeSetting(backgroundColor, '#8758F0');
return <PromoBadge text={text} background={bg} />;

// snippet
export default function PromoBadge({ text, background }) {
  return <span style={{ background }}>{text}</span>;
}