# configuration/constants/diagram.constants.ts

> 41 lines of code and 13 definitions.

Tree: Bane's Lab Build Scripts
Language: typescript
Layer: infrastructure
Canonical: https://banes-lab.com/anatomy/build-scripts#file-build-scripts-configuration-constants-diagram-constants-ts
Source text: https://banes-lab.com/source/build-scripts/configuration/constants/diagram.constants.ts.txt

Listed in [configuration/constants](https://banes-lab.com/api/source/build-scripts/configuration/constants.md), after [configuration/constants/config.constants.ts](https://banes-lab.com/source/build-scripts/configuration/constants/config.constants.ts.md) and before [configuration/constants/exclusion.constants.ts](https://banes-lab.com/source/build-scripts/configuration/constants/exclusion.constants.ts.md).

## Definitions

- `MERMAID_PACKAGE` (lexical_declaration, line 1, exported)
- `ELK_PACKAGE` (lexical_declaration, line 2, exported)
- `MERMAID_BUNDLE` (lexical_declaration, line 3, exported)
- `ELK_BUNDLE` (lexical_declaration, line 4, exported)
- `MERMAID_ROUTE` (lexical_declaration, line 5, exported)
- `ELK_ROUTE` (lexical_declaration, line 6, exported)
- `FONT_ROUTE` (lexical_declaration, line 7, exported)
- `STYLESHEET_FILE` (lexical_declaration, line 8, exported)
- `DIAGRAM_FILE_PREFIX` (lexical_declaration, line 9, exported)
- `DIAGRAM_FILE_SUFFIX` (lexical_declaration, line 10, exported)
- `MEDIA_TYPES` (lexical_declaration, line 12, exported)
- `FONT_FACES` (lexical_declaration, line 20, exported)
- `THEME_TOKENS` (lexical_declaration, line 26, exported)

## Contained in

- [configuration/constants](https://banes-lab.com/anatomy/build-scripts/folder-build-scripts-configuration-constants.md)

## Source

```typescript
export const MERMAID_PACKAGE = "mermaid";
export const ELK_PACKAGE = "@mermaid-js/layout-elk";
export const MERMAID_BUNDLE = "mermaid.esm.min.mjs";
export const ELK_BUNDLE = "mermaid-layout-elk.esm.min.mjs";
export const MERMAID_ROUTE = "/mermaid/";
export const ELK_ROUTE = "/elk/";
export const FONT_ROUTE = "/fonts/";
export const STYLESHEET_FILE = "diagrams.generated.css";
export const DIAGRAM_FILE_PREFIX = "diagram.";
export const DIAGRAM_FILE_SUFFIX = ".generated.svg";

export const MEDIA_TYPES: ReadonlyMap<string, string> = new Map([
    [".mjs", "text/javascript"],
    [".js", "text/javascript"],
    [".json", "application/json"],
    [".woff2", "font/woff2"],
    [".html", "text/html; charset=utf-8"],
]);

export const FONT_FACES: readonly (readonly [string, string, string])[] = [
    ["JetBrains Mono", "400", "jetbrains-mono.regular.font.woff2"],
    ["JetBrains Mono", "500", "jetbrains-mono.medium.font.woff2"],
    ["JetBrains Mono", "700", "jetbrains-mono.bold.font.woff2"],
];

export const THEME_TOKENS: readonly (readonly [string, string])[] = [
    ["primaryColor", "--banes-lab-main"],
    ["primaryTextColor", "--white-alpha-tertiary"],
    ["primaryBorderColor", "--white-alpha-border"],
    ["secondaryColor", "--code-block"],
    ["secondaryTextColor", "--text-light-gray"],
    ["secondaryBorderColor", "--white-alpha-border"],
    ["tertiaryColor", "--black-alpha-overlay"],
    ["tertiaryTextColor", "--text-light-gray"],
    ["tertiaryBorderColor", "--white-alpha-border"],
    ["lineColor", "--tab-accent"],
    ["textColor", "--text-light-gray"],
    ["nodeTextColor", "--white"],
    ["clusterBkg", "--card-bg"],
    ["clusterBorder", "--white-alpha-border"],
    ["edgeLabelBackground", "--code-block"],
    ["titleColor", "--white"],
    ["fontFamily", "--font-family-base"],
];
```