themeVariable validation not allowing valid CSS attributes with dashes

[MikeSQ]

Description

When I try to use either the css function light-dark() or css variables like var(--bs-blue) to help make the diagrams I'm creating react well with light mode/dark mode changes in the hosting application, the validation is removing them.

Steps to reproduce

1. Create new diagram, specifying CSS variables or the light-dark() function such as this:

---
title: Sequence Diagram
config:
  themeVariables:
    activationBorderColor: var(--bs-green)
    activationBkgColor: light-dark(lavender, saddlebrown)
---
sequenceDiagram
    autonumber
    participant Alice
    participant Bob
    Alice ->>+ Bob: Hello Bob
    Bob ->>- Alice: Hello Alice

Loading

2. Observe: The generated styling does not define the requested variables at all

Screenshots

Code Sample

Setup

• Mermaid version: 11.4.1
• Browser and Version: Edge 134.0.3109.0 (Official build) dev (64-bit)

Suggested Solutions

I think the issue is with the validation code found in sanitizeDirective.ts. It loops through with a regex and blanks out anything not matching the regex as so:

for (const k of Object.keys(args.themeVariables)) {
      const val = args.themeVariables[k];
      if (val?.match && !val.match(/^[\d "#%(),.;A-Za-z]+$/)) {
        args.themeVariables[k] = '';
      }
    }

I think it should be sufficient to add the dash character as a valid match, but I'm not sure if it was omitted for a specific reason. I think changing it to something like this would work for allowing the CSS variables and the light-dark() function:

for (const k of Object.keys(args.themeVariables)) {
      const val = args.themeVariables[k];
      if (val?.match && !val.match(/^[\d \-"#%(),.;A-Za-z]+$/)) {
        args.themeVariables[k] = '';
      }
    }

Here is a quick test I ran to verify expected behavior

var origRegex = /^[\d "#%(),.;A-Za-z]+$/
var proposedRegex = /^[\d \-"#%(),.;A-Za-z]+$/
var tester = { testVars: "--var(--bs-green)", testFunc: "light-dark(lavender, saddlebrown)" }

var testFunc = function(objecToTest, regexToUse) {
    for (const k of Object.keys(objecToTest)) {
      const val =objecToTest[k];
      if (val?.match && !val.match(regexToUse)) {
        objecToTest[k] = '';
      }
    }
    console.log(`After applying ${regexToUse}:`)
    console.dir(objecToTest)
}

testFunc({ ...tester}, origRegex)
testFunc({ ...tester}, proposedRegex)

Additional Context

No response