@govflanders/vl-widget-global-header-types 1.0.32 → 1.0.34

package/README.md

@@ -1,5 +1,3 @@
-# Global Header Widget types
-
 The **`@govflanders/vl-widget-global-header-types`** package provides TypeScript types and interfaces for interacting with the **Global Header Widget**. This widget is embedded in customer web pages and exposes a client object (`window.globalHeaderClient`) that allows for dynamic configuration and interaction with the global header.
 
 By using the types defined in this package, developers can ensure type-safe interactions with the widget while improving their development experience (DX) by utilizing autocompletion and built-in documentation.
@@ -103,141 +101,7 @@ client.setMainLinks([
 
 The `window.globalHeaderClient` object offers several methods for interacting with the widget. Each method is typed and returns promises, making asynchronous operations easier to handle. Below is a detailed breakdown of each method, its parameters, and the expected return values.
 
-### getConfig(): Promise\<Config\>
-Retrieve the current widget configuration.
-
-### branding
-
-The `branding` object contains methods for interacting with branding configurations.
-
-- **getLevel(): Promise\<number\>**
-  Fetch the current branding level of the widget.
-
-- **setLevel(level: number): Promise\<boolean\>**
-  Set the branding level of the widget.
-
-- **getColor(colorKey: string): Promise\<string\>**
-  Fetch a specific branding color based on the provided color key.
-
-- **setColor(colorConfig: { key: string, value: string }): Promise\<boolean\>**
-  Set a specific branding color for the widget.
-
-- **getColors(): Promise\<BrandingConfigColors\>**
-  Fetch the entire set of branding colors.
-
-- **setColors(colors: BrandingConfigColors): Promise\<boolean\>**
-  Set multiple branding colors for the widget.
-
-- **getHost(): Promise\<Partial\<BrandingConfigHost\>\>**
-  Retrieve the host configuration for branding.
-
-- **setHost(host: BrandingConfigHost): Promise\<boolean\>**
-  Set the host branding configuration.
-
-- **getUmbrella(): Promise\<Partial\<BrandingConfigUmbrella\>\>**
-  Retrieve the umbrella configuration for branding.
-
-- **setUmbrella(umbrella: BrandingConfigUmbrella): Promise\<boolean\>**
-  Set the umbrella branding configuration.
-
-- **getVariables(): Promise\<Record\<string, string\>\>**
-  Fetch branding-related variables as a dictionary.
-
-### contact
-
-The `contact` object contains methods related to managing service points.
-
-- **setServicePoints(servicePoints: Translatable\<ServicePoints\>): Promise\<Translatable\<ServicePoints\>\>**
-  Update the service points displayed in the widget.
-
-- **getServicePoints(): Promise\<EnrichedServicePoints\>**
-  Fetch the current service points from the widget.
-
-- **resetServicePoints(): Promise\<boolean\>**
-  Reset the service points to the initial values defined in the widget’s configuration.
-
-- **open(): Promise\<boolean\>**
-	Opens the contact interface.
-
-- **close(): Promise\<boolean\>**
-	Closes the contact interface.
-
-- **toggle(): Promise\<boolean\>**
-	Toggles the visibility of the contact interface.
-
-- **isOpen(): Promise\<boolean\>**
-	Checks whether the contact interface is currently open.
-
-### accessMenu
-
-The `accessMenu` object contains methods for managing the access menu's links and profile.
-
-- **setProfile(profileConfig: Partial\<ProfileConfig\>): Promise\<boolean\>**
-  Set or update the profile configuration for the widget.
-
-- **getProfile(): Promise\<Partial\<ProfileConfig\>\>**
-  Retrieve the current profile configuration for the widget.
-
-- **setMainLinks(mainLinks: MainLink[]): Promise\<boolean\>**
-  Sets the main navigation links that are displayed within the widget. These links will only be visible for widgets that support sessions, and they are displayed only when the user is logged in.
-
-- **addApplicationMenuLink(link: ApplicationMenuLink): Promise\<ApplicationMenuLink[]\>**
-  Add a single link to the application menu.
-
-- **addApplicationMenuLinks(links: ApplicationMenuLink[]): Promise\<ApplicationMenuLink[]\>**
-  Add multiple links to the application menu.
-
-- **setApplicationMenuLinks(links: ApplicationMenuLink[]): Promise\<ApplicationMenuLink[]\>**
-  Replace all application menu links.
-
-### setNavigationEnabled(enabled: boolean): Promise\<boolean\>
-
-Enable or disable the host and branding navigation.
-
-### mount(element?: HTMLElement): Promise\<boolean\>
-
-The `mount` method allows you to control where the **Global Header Widget** is rendered on the page. There are two main ways to integrate the widget, depending on whether you want to manually control its placement or let it render automatically:
-
-1. **Using the 'entry' script**:
-   When you include the widget via the following script:
-
-   ```html
-   <script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/entry"></script>
-   ```
-
-   The widget is **not automatically rendered** on the page. Instead, you must call the `mount` method from the `window.globalHeaderClient` object to display it. This gives you control over where and when the widget is added. You can either:
-
-   - **Mount to a specific element**:
-     Pass an HTML element to the `mount` method to render the widget inside that element.
-
-     ```typescript
-     const element = document.getElementById('customHeader');
-     window.globalHeaderClient.mount(element);
-     ```
-
-   - **Mount without specifying an element**:
-     If no element is provided, the widget will automatically render at the top of the page.
-
-     ```typescript
-     window.globalHeaderClient.mount();
-     ```
-
-2. **Using the 'embed' script**:
-   If you use this script instead:
-
-   ```html
-   <script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/embed"></script>
-   ```
-
-   The widget will **automatically render** as a `<div>` at the location where the script is placed in the HTML. No additional action is needed to mount the widget in this case. For accessibility reasons, the header is marked with `role="banner"`. If you prefer not to include this role (e.g., to avoid multiple banner roles on a page), use the mount method described above with a `<div>` element.
-
-#### Return Value
-
-The `mount` method returns a promise that resolves to `true` if the widget was successfully mounted, or `false` otherwise.
-
-### unmount(): Promise\<boolean\>
-
-The `unmount` method unmounts the widget from the element it's mounted at.
+Checkout the [GlobalHeaderClient](./interfaces/GlobalHeaderClient.html) here to see how to use it.
 
 ## Migration guide: Upgrading from v4 to v5
 
@@ -247,7 +111,7 @@ If you’re currently using version 4 of the Global Header Widget, please follow
 
 No more client library or polyfill scripts: In version 5, you no longer need to include any additional client library or polyfill script links in your HTML. Access to the `window.globalHeaderClient` object is automatically provided when you include either the entry script or the embed script.
 Action Required:
-- Remove any `<script>` tags that reference client libraries or polyfil libraries for the widget.
+- Remove any `<script>` tags that reference client libraries or polyfill libraries for the widget.
 - Ensure that either the entry script or the embed script is included in your HTML.
 
 ### 2. Eliminate installable packages
@@ -274,6 +138,7 @@ Action Required:
 Example:
 
 ```diff
+// Using widgets V4
 - vl.widget.client.capture(
 -   // Verplichte capture functie.
 -   function(widget) {
@@ -282,6 +147,7 @@ Example:
 -     }
 -   },
 - );
+// Using widgets V5
 + globalHeaderClient.contact.resetServicePoints();
 ```
 

package/dist/client.d.ts

@@ -1,216 +1,206 @@
-import { Translatable } from './i18n';
-import { MainLink, ProfileConfig } from './access-menu';
-import { EnrichedServicePoints, ServicePoints } from './contact';
-import { BrandingConfigColors, BrandingConfigHost, BrandingConfigUmbrella, Config } from './config';
-import { ApplicationMenuLink } from './access-menu';
-export type Handlers = {
-    /**
-     * Get the current configuration
-     * @returns A promise that resolves to the current configuration
-     */
-    getConfig: Handler<undefined, Config>;
-    /**
-     * Set the service points
-     * @param servicePoints The service points to set
-     * @returns A promise that resolves to the set service points
-     */
-    setServicePoints: Handler<Translatable<ServicePoints>, Translatable<ServicePoints>>;
-    /**
-     * Get the current service points
-     * @returns A promise that resolves to the current service points
-     */
-    getServicePoints: Handler<undefined, EnrichedServicePoints>;
-    /**
-     * Reset the service points to the initial values from the configuration.
-     *
-     * This method reverts the service points back to their original state
-     * as defined in the initial configuration, effectively overriding any
-     * previously set service points.
-     *
-     * @return {Promise<this>}
-     *   A promise that resolves when the service points have been reset.
-     */
-    resetServicePoints: Handler<undefined, boolean>;
-    /**
-     * Set the profile configuration
-     * @param profileConfig The profile configuration to set
-     * @returns A promise that resolves to true if the profile configuration was set, false otherwise
-     */
-    setProfile: Handler<Partial<ProfileConfig>, boolean>;
-    /**
-     * Get the profile configuration
-     * @returns A promise that resolves to the current profile configuration
-     */
-    getProfile: Handler<undefined, Partial<ProfileConfig>>;
-    /**
-     * Set the main links
-     * @param mainLinks The main links to set
-     * @returns A promise that resolves to true if the main links were set, false otherwise
-     */
-    setMainLinks: Handler<Translatable<MainLink>[], boolean>;
-    /**
-     * Add an application menu link
-     * @param link The link to add
-     * @returns A promise that resolves to the updated application menu
-     */
-    addApplicationMenuLink: Handler<ApplicationMenuLink, ApplicationMenuLink[]>;
-    /**
-     * Add multiple application menu links
-     * @param links The links to add
-     * @returns A promise that resolves to the updated application menu
-     */
-    addApplicationMenuLinks: Handler<ApplicationMenuLink[], ApplicationMenuLink[]>;
-    /**
-     * Set the application menu links
-     * @param links The links to set
-     * @returns A promise that resolves to the updated application menu
-     */
-    setApplicationMenuLinks: Handler<ApplicationMenuLink[], ApplicationMenuLink[]>;
-    /**
-     * Set the navigation enabled state
-     * @param enabled The navigation enabled state
-     * @returns A promise that resolves to true if the navigation enabled state was set, false otherwise
-     */
-    setNavigationEnabled: Handler<boolean, boolean>;
-    /**
-     * Get the level of branding
-     * @returns A promise that resolves to the branding level
-     */
-    getBrandingLevel: Handler<undefined, number>;
-    /**
-     * Set the branding level
-     * @param level The level of branding to set
-     * @returns A promise that resolves to true if the branding level was set
-     */
-    setBrandingLevel: Handler<number, boolean>;
-    /**
-     * Get the branding colors
-     * @returns A promise that resolves to the branding colors
-     */
-    getBrandingColors: Handler<undefined, BrandingConfigColors>;
-    /**
-     * Get a specific branding color by type
-     * @param type The type of branding color to get
-     * @returns A promise that resolves to the branding color
-     */
-    getBrandingColor: Handler<keyof BrandingConfigColors, string>;
-    /**
-     * Set the branding colors
-     * @param colors The colors to set
-     * @returns A promise that resolves to true if the branding colors were set
-     */
-    setBrandingColors: Handler<BrandingConfigColors, boolean>;
-    /**
-     * Set a specific branding color by type
-     * @param type The type of branding color to set
-     * @param value The color value to set
-     * @returns A promise that resolves to true if the branding color was set
-     */
-    setBrandingColor: Handler<{
-        type: keyof BrandingConfigColors;
-        value: string;
-    }, boolean>;
-    /**
-     * Get the host context
-     * @returns A promise that resolves to the branding host settings
-     */
-    getBrandingHost: Handler<undefined, Partial<BrandingConfigHost>>;
-    /**
-     * Set the host context
-     * @param host The branding host settings to set
-     * @returns A promise that resolves to true if the branding host was set
-     */
-    setBrandingHost: Handler<Partial<BrandingConfigHost>, boolean>;
-    /**
-     * Get the umbrella context
-     * @returns A promise that resolves to the branding umbrella settings
-     */
-    getBrandingUmbrella: Handler<undefined, Partial<BrandingConfigUmbrella>>;
-    /**
-     * Set the umbrella context
-     * @param umbrella The branding umbrella settings to set
-     * @returns A promise that resolves to true if the branding umbrella was set
-     */
-    setBrandingUmbrella: Handler<Partial<BrandingConfigUmbrella>, boolean>;
-    /**
-     * Get the branding CSS variables
-     * @returns A promise that resolves to the branding CSS variables
-     */
-    getBrandingVariables: Handler<undefined, Record<string, string>>;
-    /**
-     * Mount an element
-     * @param element The element to mount
-     * @returns A promise that resolves to true if the element was mounted, false otherwise
-     */
-    mount: Handler<HTMLElement | void, boolean>;
-    /**
-     * Unmount an element
-     * @returns A promise that resolves to true if the element was unmounted, false otherwise
-     */
-    unmount: Handler<undefined, boolean>;
-    openContact: Handler<undefined, boolean>;
-    closeContact: Handler<undefined, boolean>;
-    toggleContact: Handler<undefined, boolean>;
-    isContactOpen: Handler<undefined, boolean>;
-};
-type PromiseResolver<T> = (value: T | PromiseLike<T>) => void;
-type PromiseRejecter = (reason?: any) => void;
-export type Handler<Args, Return> = (args: Args, resolve: PromiseResolver<Return>, reject: PromiseRejecter) => void;
-type ArgumentTypes = {
-    [HandlersKey in keyof Handlers]: Handlers[HandlersKey] extends Handler<infer Args, any> ? Args : never;
-};
-type ReturnTypes = {
-    [HandlersKey in keyof Handlers]: Handlers[HandlersKey] extends Handler<any, infer Return> ? Return : never;
-};
-export type ClientMethods = {
-    [K in keyof Handlers]: ArgumentTypes[K] extends undefined ? () => Promise<ReturnTypes[K]> : (args: ArgumentTypes[K]) => Promise<ReturnTypes[K]>;
-};
-export type QueueItem<Key extends keyof Handlers> = {
-    [K in keyof Handlers]: {
-        key: K;
-        args: ArgumentTypes[K];
-        resolve: PromiseResolver<ReturnTypes[K]>;
-        reject: PromiseRejecter;
-    };
-}[Key];
-export interface GlobalHeaderLinker {
-    queue: QueueItem<keyof Handlers>[];
-    update: () => void;
-}
+/**
+ * The `window.globalHeaderClient` object offers several methods for interacting with the widget.
+ * Each method is typed and returns promises, making asynchronous operations easier to handle.
+ */
 export interface GlobalHeaderClient {
     contact: {
+        /**
+         * Get the current service points
+         * @returns A promise that resolves to the current service points
+         */
         getServicePoints: ClientMethods['getServicePoints'];
+        /**
+         * Set the service points
+         * @param servicePoints The service points to set
+         * @returns A promise that resolves to the set service points
+         */
         setServicePoints: ClientMethods['setServicePoints'];
+        /**
+         * Reset the service points to the initial values from the configuration.
+         *
+         * This method reverts the service points back to their original state
+         * as defined in the initial configuration, effectively overriding any
+         * previously set service points.
+         *
+         * @returns A promise that resolves when the service points have been reset.
+         */
         resetServicePoints: ClientMethods['resetServicePoints'];
+        /**
+         * Open the contact panel.
+         * @returns A promise that resolves to true if the contact panel was opened.
+         */
         open: ClientMethods['openContact'];
+        /**
+         * Close the contact panel.
+         * @returns A promise that resolves to true if the contact panel was closed.
+         */
         close: ClientMethods['closeContact'];
+        /**
+         * Toggle the contact panel.
+         * @returns A promise that resolves to true if the contact panel is now open.
+         */
         toggle: ClientMethods['toggleContact'];
+        /**
+         * Check if the contact panel is open.
+         * @returns A promise that resolves to true if the contact panel is open.
+         */
         isOpen: ClientMethods['isContactOpen'];
     };
     accessMenu: {
+        /**
+         * Set the main links
+         * @param mainLinks The main links to set
+         * @returns A promise that resolves to true if the main links were set, false otherwise
+         */
         setMainLinks: ClientMethods['setMainLinks'];
+        /**
+         * Add an application menu link
+         * @param link The link to add
+         * @returns A promise that resolves to the updated application menu
+         */
         addApplicationMenuLink: ClientMethods['addApplicationMenuLink'];
+        /**
+         * Add multiple application menu links
+         * @param links The links to add
+         * @returns A promise that resolves to the updated application menu
+         */
         addApplicationMenuLinks: ClientMethods['addApplicationMenuLinks'];
+        /**
+         * Set the application menu links
+         * @param links The links to set
+         * @returns A promise that resolves to the updated application menu
+         */
         setApplicationMenuLinks: ClientMethods['setApplicationMenuLinks'];
+        /**
+         * Set the profile configuration
+         * @param profileConfig The profile configuration to set
+         * @returns A promise that resolves to true if the profile configuration was set, false otherwise
+         */
         setProfile: ClientMethods['setProfile'];
+        /**
+         * Get the profile configuration
+         * @returns A promise that resolves to the current profile configuration
+         */
         getProfile: ClientMethods['getProfile'];
     };
     branding: {
+        /**
+         * Get the level of branding
+         * @returns A promise that resolves to the branding level
+         */
         getLevel: ClientMethods['getBrandingLevel'];
+        /**
+         * Set the branding level
+         * @param level The level of branding to set
+         * @returns A promise that resolves to true if the branding level was set
+         */
         setLevel: ClientMethods['setBrandingLevel'];
+        /**
+         * Get the branding colors
+         * @returns A promise that resolves to the branding colors
+         */
         getColors: ClientMethods['getBrandingColors'];
+        /**
+         * Get a specific branding color by type
+         * @param type The type of branding color to get
+         * @returns A promise that resolves to the branding color
+         */
         getColor: ClientMethods['getBrandingColor'];
-        setColor: ClientMethods['setBrandingColor'];
+        /**
+         * Set the branding colors
+         * @param colors The colors to set
+         * @returns A promise that resolves to true if the branding colors were set
+         */
         setColors: ClientMethods['setBrandingColors'];
+        /**
+         * Set a specific branding color by type
+         * @param args The type of branding color and value to set
+         * @returns A promise that resolves to true if the branding color was set
+         */
+        setColor: ClientMethods['setBrandingColor'];
+        /**
+         * Get the host context
+         * @returns A promise that resolves to the branding host settings
+         */
         getHost: ClientMethods['getBrandingHost'];
+        /**
+         * Set the host context
+         * @param host The branding host settings to set
+         * @returns A promise that resolves to true if the branding host was set
+         */
         setHost: ClientMethods['setBrandingHost'];
+        /**
+         * Get the umbrella context
+         * @returns A promise that resolves to the branding umbrella settings
+         */
         getUmbrella: ClientMethods['getBrandingUmbrella'];
+        /**
+         * Set the umbrella context
+         * @param umbrella The branding umbrella settings to set
+         * @returns A promise that resolves to true if the branding umbrella was set
+         */
         setUmbrella: ClientMethods['setBrandingUmbrella'];
+        /**
+         * Get the branding CSS variables
+         * @returns A promise that resolves to the branding CSS variables
+         */
         getVariables: ClientMethods['getBrandingVariables'];
     };
+    /**
+     * Set the navigation enabled state
+     * @param enabled The navigation enabled state
+     * @returns A promise that resolves to true if the navigation enabled state was set, false otherwise
+     */
     setNavigationEnabled: ClientMethods['setNavigationEnabled'];
+    /**
+     * Get the current configuration
+     * @returns A promise that resolves to the current configuration
+     */
     getConfig: ClientMethods['getConfig'];
+    /**
+     * The `mount` method allows you to control where the **Global Header Widget** is rendered on the page. There are two main ways to integrate the widget, depending on whether you want to manually control its placement or let it render automatically:
+     *
+     * 1. **Using the 'entry' script**:
+     *    When you include the widget via the following script:
+     *
+     *    ```html
+     *    <script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/entry"></script>
+     *    ```
+     *
+     *    The widget is **not automatically rendered** on the page. Instead, you must call the `mount` method from the `window.globalHeaderClient` object to display it. This gives you control over where and when the widget is added. You can either:
+     *
+     *    - **Mount to a specific element**:
+     *      Pass an HTML element to the `mount` method to render the widget inside that element.
+     *
+     *      ```typescript
+     *      const element = document.getElementById('customHeader');
+     *      window.globalHeaderClient.mount(element);
+     *      ```
+     *
+     *    - **Mount without specifying an element**:
+     *      If no element is provided, the widget will automatically render at the top of the page.
+     *
+     *      ```typescript
+     *      window.globalHeaderClient.mount();
+     *      ```
+     *
+     * 2. **Using the 'embed' script**:
+     *    If you use this script instead:
+     *
+     *    ```html
+     *    <script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/embed"></script>
+     *    ```
+     *
+     *    The widget will **automatically render** as a `<div>` at the location where the script is placed in the HTML. No additional action is needed to mount the widget in this case. For accessibility reasons, the header is marked with `role="banner"`. If you prefer not to include this role (e.g., to avoid multiple banner roles on a page), use the mount method described above with a `<div>` element.
+     *
+     * @param element The element to mount
+     * @returns A promise that resolves to `true` if the element was mounted, `false` otherwise
+     */
     mount: ClientMethods['mount'];
+    /**
+     * Unmount an element
+     * @returns A promise that resolves to true if the element was unmounted, false otherwise
+     */
     unmount: ClientMethods['unmount'];
 }
 declare global {
@@ -219,4 +209,3 @@ declare global {
         globalHeaderLinker: GlobalHeaderLinker;
     }
 }
-export {};

package/docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

package/docs/assets/highlight.css

@@ -0,0 +1,120 @@
+:root {
+    --light-hl-0: #800000;
+    --dark-hl-0: #808080;
+    --light-hl-1: #800000;
+    --dark-hl-1: #569CD6;
+    --light-hl-2: #000000;
+    --dark-hl-2: #D4D4D4;
+    --light-hl-3: #E50000;
+    --dark-hl-3: #9CDCFE;
+    --light-hl-4: #0000FF;
+    --dark-hl-4: #CE9178;
+    --light-hl-5: #000000FF;
+    --dark-hl-5: #D4D4D4;
+    --light-hl-6: #001080;
+    --dark-hl-6: #9CDCFE;
+    --light-hl-7: #795E26;
+    --dark-hl-7: #DCDCAA;
+    --light-hl-8: #008000;
+    --dark-hl-8: #6A9955;
+    --light-hl-9: #A31515;
+    --dark-hl-9: #CE9178;
+    --light-hl-10: #0000FF;
+    --dark-hl-10: #569CD6;
+    --light-hl-11: #AF00DB;
+    --dark-hl-11: #C586C0;
+    --light-hl-12: #0070C1;
+    --dark-hl-12: #4FC1FF;
+    --light-hl-13: #267F99;
+    --dark-hl-13: #4EC9B0;
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --code-background: var(--dark-code-background);
+} }
+
+:root[data-theme='light'] {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
+    --code-background: var(--light-code-background);
+}
+
+:root[data-theme='dark'] {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+.hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
+pre, code { background: var(--code-background); }