Standalone cookie consent does not support the `theme` option

[ahukkanen]

Describe the bug

The theme option does not work with the standalone cookie consent script following the documentation at:
https://hds.hel.fi/storybook/react/static-cookie-consent-editor/siteSettingsEditor.html

How to reproduce

1. Build the cookie consent script with the following entrypoint:

import { CookieConsentCore } from "hds-js";
import cookieSettings from "./settings";

document.addEventListener("DOMContentLoaded", () => {
  CookieConsentCore.create(cookieSettings, {
    language: "fi",
    theme: "black",
    targetSelector: "body",
    spacerParentSelector: "body",
    pageContentSelector: "body",
    submitEvent: true,
    settingsPageSelector: null,
    focusTargetSelector: null,
    disableAutoRender: false,
  });
});

2. See that the black theme is not applied correctly (see the screenshot)

Expected behavior

I would expect the black theme to work with the standalone script.

Possible solution

Looking at the code, I am assuming the theme options are not applied correctly at the template, e.g. here to a button element:

helsinki-design-system/packages/react/src/components/cookieConsentCore/template.js

Line 191 in 3cd5926

<button type="submit" class="hds-button hds-button--secondary hds-cc__selected-cookies-button" data-approved="selected">

From the generated CSS in the shadow root element I can see this CSS for the black button which would indicate the button requires the theme class:

.hds-button--secondary.hds-button--theme-black {
  --border-color: var(--color-black);
  --border-color-hover: var(--color-black);
  --border-color-focus: var(--color-black)
}

Another option would be to expose the elements inside the shadow DOM to the host document as shadow parts. This would allow more flexible custom styling.

Screenshots

Device information

(any)

Additional context

N/A

[laurakarhu]

Thanks for reporting! We'll fix this!