feature: use css variables to overwrite colors

Here’s a rewritten version of your pull request description:

Summary

This update introduces the ability to use colors directly instead of relying on predefined classes. This approach minimizes errors; if the internal SCSS changes, there's no need to update the corresponding code.

Implementation

An internal function has been implemented to facilitate color creation:

const colorDictionary: { [key: string]: string } = {
  "1": "#f51720",
  "2": "#008d7c",
  "3": "#ffbc05",
  "4": "#8aff05",
  "5": "#ff7ec3",
  "6": "#05d1ff",
  "7": "#6200d1",
  "8": "#424600",
  "9": "#613900",
} as const;

export const annotationColors = createAnnotationColors(colorDictionary);

Usage

The colors can be easily applied as shown below:

{
    start: 5,
    end: 9,
    color: annotationColors["1"],
    target: "text",
    id: "1",
    label: "typo",
},

GhentCDH / vue_component_annotated_text

feature: use css variables to overwrite colors #19

Summary

Implementation

Usage