0.1.15

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.1.9",
+  "version": "0.1.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@doc-utils/markdown2html",
-      "version": "0.1.9",
+      "version": "0.1.15",
       "dependencies": {
         "bytefield-svg": "^1.6.1",
         "dompurify": "^2.3.6",
@@ -92,9 +92,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.16.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.5.tgz",
-      "integrity": "sha512-seOA34WMo9KB+UA78qaJoCO20RJzZGVXQ5Sh6FWu0g/hfT44nKXnej3/tCQl7FL97idFpBhisLYCTB50S0EirA==",
+      "version": "18.16.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.6.tgz",
+      "integrity": "sha512-N7KINmeB8IN3vRR8dhgHEp+YpWvGFcpDoh5XZ8jB5a00AdFKCKEyyGTOPTddUf4JqU1ZKTVxkOxakDvchNVI2Q==",
       "dev": true
     },
     "node_modules/@types/prismjs": {
@@ -989,9 +989,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/node-fetch": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz",
-      "integrity": "sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==",
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
+      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -2021,9 +2021,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.16.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.5.tgz",
-      "integrity": "sha512-seOA34WMo9KB+UA78qaJoCO20RJzZGVXQ5Sh6FWu0g/hfT44nKXnej3/tCQl7FL97idFpBhisLYCTB50S0EirA==",
+      "version": "18.16.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.6.tgz",
+      "integrity": "sha512-N7KINmeB8IN3vRR8dhgHEp+YpWvGFcpDoh5XZ8jB5a00AdFKCKEyyGTOPTddUf4JqU1ZKTVxkOxakDvchNVI2Q==",
       "dev": true
     },
     "@types/prismjs": {
@@ -2674,9 +2674,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node-fetch": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz",
-      "integrity": "sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==",
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
+      "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
       "requires": {
         "whatwg-url": "^5.0.0"
       },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.1.9",
+  "version": "0.1.15",
   "publishConfig": {
     "registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
   },

src/breadcrumb-nav.ts

@@ -0,0 +1,60 @@
+
+import { marked } from 'marked';
+import { ParsedAttributes, parse_attributes } from './attrs';
+import { MarkdownOptions } from './render';
+
+export interface BreadcrumbNavToken extends marked.Tokens.Generic {
+	text: string;
+	attrs: ParsedAttributes;
+	items: marked.Token[][];
+}
+
+export function breadcrumb_nav_ext(renderer: marked.Renderer, opts: MarkdownOptions) : marked.TokenizerExtension & marked.RendererExtension {
+	return {
+		name: 'breadcrumb_nav',
+		level: 'block',
+		start: (src) => src.match(/^\/\/\//)?.index,
+		tokenizer(src, tokens) {
+			const rule = /^\/\/\/(\/*)([^\n]+)?(?:\n)((?:[^\/]|\/\/?(?!\/\1))+)\/\/\/\1/;
+			const match = rule.exec(src);
+
+			if (match) {
+				const token: BreadcrumbNavToken = {
+					type: 'breadcrumb_nav',
+					raw: match[0],
+					text: match[3],
+					attrs: parse_attributes(match[2] || ''),
+					tokens: [ ],
+					items: [ ],
+				};
+
+				const lines = match[3].trim().split('\n');
+
+				for (const line of lines) {
+					const tokens = this.lexer.inlineTokens(line, [ ]);
+					token.tokens.push(...tokens);
+					token.items.push(tokens);
+				}
+
+				return token;
+			}
+		},
+		renderer(token: BreadcrumbNavToken) {
+			return `<nav aria-label="breadcrumbs" ${token.attrs.html_attrs.join(' ')}>\n`
+				+ `\t<ol>\n`
+				+ '\t\t'
+					+ token.items.map((tokens, index) =>{ 
+						let item = '<li>';
+
+						if (index) {
+							item += '<span class="separator" aria-hidden="true">/</span> ';
+						}
+
+						return item + this.parser.parseInline(tokens, renderer) + '</li>';
+					}).join('\n\t\t')
+				+ '\n'
+				+ `\t</ol>\n`
+				+ `</nav>`;
+		}
+	};
+}

src/html-sanitize.ts

@@ -2,13 +2,12 @@
 import { JSDOM } from 'jsdom';
 import createDOMPurify = require('dompurify');
 
-export function sanitize_html(html: string) : string {
+export type CustomElementHandling = createDOMPurify.Config['CUSTOM_ELEMENT_HANDLING'];
+
+export function sanitize_html(html: string, custom_elements?: CustomElementHandling) : string {
 	const { window } = new JSDOM('');
 	const dom_purify = createDOMPurify(window as any as Window);
 	return dom_purify.sanitize(html, {
-		CUSTOM_ELEMENT_HANDLING: {
-			tagNameCheck: (tag_name) => tag_name === 'svg-icon',
-			attributeNameCheck: (attr_name) => attr_name === 'icon',
-		}
+		CUSTOM_ELEMENT_HANDLING: custom_elements
 	});
 }

src/pikchr.ts

@@ -6,12 +6,12 @@ export function post_process_pikchr_svg(svg: string, size?: string) {
 
 	// text
 	for (const [ color, regex ] of Object.entries(text_regex)) {
-		svg = svg.replace(regex, `<text fill="${text_css_vars[color]}"`);
+		svg = svg.replace(regex, (_, $1) => `<text${$1}fill="${text_css_vars[color]}"`);
 	}
 
 	// shape fill
 	for (const [ color, regex ] of Object.entries(shape_fill_regex)) {
-		svg = svg.replace(regex, `<path style="fill:${fill_css_vars[color]}`);
+		svg = svg.replace(regex, (_, $1) => `<path${$1}style="fill:${fill_css_vars[color]}`);
 	}
 
 	// arrow heads
@@ -45,106 +45,106 @@ type CSSVarColor
 	;
 
 const text_regex: Record<CSSVarColor, RegExp> = {
-	black: /\b<text fill="rgb\(0,0,0\)"/gi,
-	red:   /\b<text fill="rgb\(255,0,0\)"/gi,
-	orange: /\b<text fill="rgb\(255,165,0\)"/gi,
-	yellow: /\b<text fill="rgb\(255,255,0\)"/gi,
-	green: /\b<text fill="rgb\(0,128,0\)"/gi,
-	teal: /\b<text fill="rgb\(0,128,128\)"/gi,
-	pink: /\b<text fill="rgb\(255,192,203\)"/gi,
-	purple: /\b<text fill="rgb\(128,0,128\)"/gi,
-	blue: /\b<text fill="rgb\(0,0,255\)"/gi,
-	indigo: /\b<text fill="rgb\(75,0,130\)"/gi,
-	magenta: /\b<text fill="rgb\(255,0,255\)"/gi,
-	brown: /\b<text fill="rgb\(165,42,42\)"/gi,
+	black:   /<text( | [^>]+ )fill="rgb\(0,0,0\)"/gi,
+	red:     /<text( | [^>]+ )fill="rgb\(255,0,0\)"/gi,
+	orange:  /<text( | [^>]+ )fill="rgb\(255,165,0\)"/gi,
+	yellow:  /<text( | [^>]+ )fill="rgb\(255,255,0\)"/gi,
+	green:   /<text( | [^>]+ )fill="rgb\(0,128,0\)"/gi,
+	teal:    /<text( | [^>]+ )fill="rgb\(0,128,128\)"/gi,
+	pink:    /<text( | [^>]+ )fill="rgb\(255,192,203\)"/gi,
+	purple:  /<text( | [^>]+ )fill="rgb\(128,0,128\)"/gi,
+	blue:    /<text( | [^>]+ )fill="rgb\(0,0,255\)"/gi,
+	indigo:  /<text( | [^>]+ )fill="rgb\(75,0,130\)"/gi,
+	magenta: /<text( | [^>]+ )fill="rgb\(255,0,255\)"/gi,
+	brown:   /<text( | [^>]+ )fill="rgb\(165,42,42\)"/gi,
 };
 
 const line_regex: Record<CSSVarColor, RegExp> = {
-	black: /stroke:rgb\(0,0,0\)/gi,
-	red:   /stroke:rgb\(255,0,0\)/gi,
-	orange: /stroke:rgb\(255,165,0\)/gi,
-	yellow: /stroke:rgb\(255,255,0\)/gi,
-	green: /stroke:rgb\(0,128,0\)/gi,
-	teal: /stroke:rgb\(0,128,128\)/gi,
-	pink: /stroke:rgb\(255,192,203\)/gi,
-	purple: /stroke:rgb\(128,0,128\)/gi,
-	blue: /stroke:rgb\(0,0,255\)/gi,
-	indigo: /stroke:rgb\(75,0,130\)/gi,
+	black:   /stroke:rgb\(0,0,0\)/gi,
+	red:     /stroke:rgb\(255,0,0\)/gi,
+	orange:  /stroke:rgb\(255,165,0\)/gi,
+	yellow:  /stroke:rgb\(255,255,0\)/gi,
+	green:   /stroke:rgb\(0,128,0\)/gi,
+	teal:    /stroke:rgb\(0,128,128\)/gi,
+	pink:    /stroke:rgb\(255,192,203\)/gi,
+	purple:  /stroke:rgb\(128,0,128\)/gi,
+	blue:    /stroke:rgb\(0,0,255\)/gi,
+	indigo:  /stroke:rgb\(75,0,130\)/gi,
 	magenta: /stroke:rgb\(255,0,255\)/gi,
-	brown: /stroke:rgb\(165,42,42\)/gi,
+	brown:   /stroke:rgb\(165,42,42\)/gi,
 };
 
 const shape_fill_regex = {
-	black: /\b<path style="fill:rgb\(0,0,0\)/gi,
-	red:   /\b<path style="fill:rgb\(255,0,0\)/gi,
-	orange: /\b<path style="fill:rgb\(255,165,0\)/gi,
-	yellow: /\b<path style="fill:rgb\(255,255,0\)/gi,
-	green: /\b<path style="fill:rgb\(0,128,0\)/gi,
-	teal: /\b<path style="fill:rgb\(0,128,128\)/gi,
-	pink: /\b<path style="fill:rgb\(255,192,203\)/gi,
-	purple: /\b<path style="fill:rgb\(128,0,128\)/gi,
-	blue: /\b<path style="fill:rgb\(0,0,255\)/gi,
-	indigo: /\b<path style="fill:rgb\(75,0,130\)/gi,
-	magenta: /\b<path style="fill:rgb\(255,0,255\)/gi,
-	brown: /\b<path style="fill:rgb\(165,42,42\)/gi,
+	black:    /<path( | [^>]+ )style="fill:rgb\(0,0,0\)/gi,
+	red:      /<path( | [^>]+ )style="fill:rgb\(255,0,0\)/gi,
+	orange:   /<path( | [^>]+ )style="fill:rgb\(255,165,0\)/gi,
+	yellow:   /<path( | [^>]+ )style="fill:rgb\(255,255,0\)/gi,
+	green:    /<path( | [^>]+ )style="fill:rgb\(0,128,0\)/gi,
+	teal:     /<path( | [^>]+ )style="fill:rgb\(0,128,128\)/gi,
+	pink:     /<path( | [^>]+ )style="fill:rgb\(255,192,203\)/gi,
+	purple:   /<path( | [^>]+ )style="fill:rgb\(128,0,128\)/gi,
+	blue:     /<path( | [^>]+ )style="fill:rgb\(0,0,255\)/gi,
+	indigo:   /<path( | [^>]+ )style="fill:rgb\(75,0,130\)/gi,
+	magenta:  /<path( | [^>]+ )style="fill:rgb\(255,0,255\)/gi,
+	brown:    /<path( | [^>]+ )style="fill:rgb\(165,42,42\)/gi,
 }
 
 const arrow_head_regex: Record<CSSVarColor, RegExp> = {
-	black: /fill:rgb\(0,0,0\)/gi,
-	red:   /fill:rgb\(255,0,0\)/gi,
-	orange: /fill:rgb:\(255,165,0\)/gi,
-	yellow: /fill:rgb:\(255,255,0\)/gi,
-	green: /fill:rgb:\(0,128,0\)/gi,
-	teal: /fill:rgb:\(0,128,128\)/gi,
-	pink: /fill:rgb:\(255,192,203\)/gi,
-	purple: /fill:rgb:\(128,0,128\)/gi,
-	blue: /fill:rgb:\(0,0,255\)/gi,
-	indigo: /fill:rgb:\(75,0,130\)/gi,
-	magenta: /fill:rgb:\(255,0,255\)/gi,
-	brown: /fill:rgb:\(165,42,42\)/gi,
+	black:    /fill:rgb\(0,0,0\)/gi,
+	red:      /fill:rgb\(255,0,0\)/gi,
+	orange:   /fill:rgb\(255,165,0\)/gi,
+	yellow:   /fill:rgb\(255,255,0\)/gi,
+	green:    /fill:rgb\(0,128,0\)/gi,
+	teal:     /fill:rgb\(0,128,128\)/gi,
+	pink:     /fill:rgb\(255,192,203\)/gi,
+	purple:   /fill:rgb\(128,0,128\)/gi,
+	blue:     /fill:rgb\(0,0,255\)/gi,
+	indigo:   /fill:rgb\(75,0,130\)/gi,
+	magenta:  /fill:rgb\(255,0,255\)/gi,
+	brown:    /fill:rgb\(165,42,42\)/gi,
 };
 
 const line_css_vars: Record<CSSVarColor, string> = {
-	black: 'var(--theme-line, currentcolor)',
-	red: 'var(--theme-chart-shape-red-line, currentcolor)',
-	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
-	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
-	green: 'var(--theme-chart-shape-green-line, currentcolor)',
-	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
-	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
-	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
-	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
-	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
-	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
-	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
+	black:    'var(--theme-line, currentcolor)',
+	red:      'var(--theme-chart-shape-red-line, currentcolor)',
+	orange:   'var(--theme-chart-shape-orange-line, currentcolor)',
+	yellow:   'var(--theme-chart-shape-yellow-line, currentcolor)',
+	green:    'var(--theme-chart-shape-green-line, currentcolor)',
+	teal:     'var(--theme-chart-shape-teal-line, currentcolor)',
+	pink:     'var(--theme-chart-shape-pink-line, currentcolor)',
+	purple:   'var(--theme-chart-shape-purple-line, currentcolor)',
+	blue:     'var(--theme-chart-shape-blue-line, currentcolor)',
+	indigo:   'var(--theme-chart-shape-indigo-line, currentcolor)',
+	magenta:  'var(--theme-chart-shape-magenta-line, currentcolor)',
+	brown:    'var(--theme-chart-shape-brown-line, currentcolor)',
 };
 
 const text_css_vars: Record<CSSVarColor, string> = {
-	black: 'var(--theme-text-body, currentcolor)',
-	red: 'var(--theme-chart-shape-red-line, currentcolor)',
-	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
-	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
-	green: 'var(--theme-chart-shape-green-line, currentcolor)',
-	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
-	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
-	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
-	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
-	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
-	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
-	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
+	black:    'var(--theme-text-body, currentcolor)',
+	red:      'var(--theme-chart-shape-red-line, currentcolor)',
+	orange:   'var(--theme-chart-shape-orange-line, currentcolor)',
+	yellow:   'var(--theme-chart-shape-yellow-line, currentcolor)',
+	green:    'var(--theme-chart-shape-green-line, currentcolor)',
+	teal:     'var(--theme-chart-shape-teal-line, currentcolor)',
+	pink:     'var(--theme-chart-shape-pink-line, currentcolor)',
+	purple:   'var(--theme-chart-shape-purple-line, currentcolor)',
+	blue:     'var(--theme-chart-shape-blue-line, currentcolor)',
+	indigo:   'var(--theme-chart-shape-indigo-line, currentcolor)',
+	magenta:  'var(--theme-chart-shape-magenta-line, currentcolor)',
+	brown:    'var(--theme-chart-shape-brown-line, currentcolor)',
 };
 
 const fill_css_vars: Record<CSSVarColor, string> = {
-	black: 'var(--theme-chart-shape-black-fill, transparent)',
-	red: 'var(--theme-chart-shape-red-fill, transparent)',
-	orange: 'var(--theme-chart-shape-orange-fill, transparent)',
-	yellow: 'var(--theme-chart-shape-yellow-fill, transparent)',
-	green: 'var(--theme-chart-shape-green-fill, transparent)',
-	teal: 'var(--theme-chart-shape-teal-fill, transparent)',
-	pink: 'var(--theme-chart-shape-pink-fill, transparent)',
-	purple: 'var(--theme-chart-shape-purple-fill, transparent)',
-	blue: 'var(--theme-chart-shape-blue-fill, transparent)',
-	indigo: 'var(--theme-chart-shape-indigo-fill, transparent)',
-	magenta: 'var(--theme-chart-shape-magenta-fill, transparent)',
-	brown: 'var(--theme-chart-shape-brown-fill, transparent)',
+	black:    'var(--theme-bg-heavy, transparent)',
+	red:      'var(--theme-chart-shape-red-fill, transparent)',
+	orange:   'var(--theme-chart-shape-orange-fill, transparent)',
+	yellow:   'var(--theme-chart-shape-yellow-fill, transparent)',
+	green:    'var(--theme-chart-shape-green-fill, transparent)',
+	teal:     'var(--theme-chart-shape-teal-fill, transparent)',
+	pink:     'var(--theme-chart-shape-pink-fill, transparent)',
+	purple:   'var(--theme-chart-shape-purple-fill, transparent)',
+	blue:     'var(--theme-chart-shape-blue-fill, transparent)',
+	indigo:   'var(--theme-chart-shape-indigo-fill, transparent)',
+	magenta:  'var(--theme-chart-shape-magenta-fill, transparent)',
+	brown:    'var(--theme-chart-shape-brown-fill, transparent)',
 };

src/render.ts

@@ -4,11 +4,12 @@ import { create_renderer } from './renderer';
 import { mark_ext } from './mark';
 import { section_ext } from './section';
 import { icon_ext } from './icon';
-import { sanitize_html } from './html-sanitize';
+import { CustomElementHandling, sanitize_html } from './html-sanitize';
 import { katex_block_ext, katex_inline_ext } from './katex';
 import { footnote_list_ext, footnote_ref_ext } from './footnotes';
 import { description_list_ext } from './description-list';
 import { resolve_async_bindings } from './async-steps';
+import { breadcrumb_nav_ext } from './breadcrumb-nav';
 
 export interface MarkdownOptions {
 	base_url?: string;
@@ -16,6 +17,7 @@ export interface MarkdownOptions {
 	inline?: boolean;
 	katex_macros?: Record<string, string>;
 	extensions?: MarkdownExtension[];
+	custom_elements?: CustomElementHandling;
 }
 
 export interface MarkdownExtension {
@@ -39,6 +41,7 @@ export async function render_markdown_to_html(markdown: string, options: Markdow
 			description_list_ext(marked_options.renderer, options),
 			section_ext(marked_options.renderer, options),
 			icon_ext(marked_options.renderer, options),
+			breadcrumb_nav_ext(marked_options.renderer, options),
 			...(options.extensions || [ ]).map((ext) => {
 				return ext(marked_options.renderer, options);
 			}),
@@ -64,5 +67,5 @@ export async function render_markdown_to_html(markdown: string, options: Markdow
 			});
 		});
 
-	return sanitize_html(unsafe_html);
+	return sanitize_html(unsafe_html, options.custom_elements);
 }

src/renderer.ts

@@ -90,6 +90,8 @@ function code(renderer: marked.Renderer, opts: MarkdownOptions) {
 			case 'bash:samp': {
 				// Find the first newline that is not preceeded by a "\"
 				const end_of_input = /(?<!\\)(?:\r\n|\r|\n)/.exec(code);
+
+				// todo: handling for multi-line heredocs?
 	
 				// If there is no such newline, the whole content is input
 				if (! end_of_input) {
@@ -195,7 +197,7 @@ function code(renderer: marked.Renderer, opts: MarkdownOptions) {
 
 const arg_pattern = /^(?:[a-zA-Z0-9_:-]+|"(?:[^"\n]|(?<=\\)")*")/;
 
-function parse_code_args(text: string) {
+function parse_code_args(text = '') {
 	const args: string[] = [ ];
 
 	text = text.trim();

src/vega/data-colors.ts

@@ -1,18 +1,27 @@
 
-// note: fallback colors come from "category10" scheme
-// https://vega.github.io/vega/docs/schemes/#category10
-// todo: css variables
 export const chart_data_colors = [
-	'var(--theme-chart-data-0, #1f77b4)',
-	'var(--theme-chart-data-1, #ff7f0e)',
-	'var(--theme-chart-data-2, #2ca02c)',
-	'var(--theme-chart-data-3, #d62728)',
-	'var(--theme-chart-data-4, #9467bd)',
-	'var(--theme-chart-data-5, #8c564b)',
-	'var(--theme-chart-data-6, #e377c2)',
-	'var(--theme-chart-data-7, #7f7f7f)',
-	'var(--theme-chart-data-8, #bcbd22)',
-	'var(--theme-chart-data-9, #17becf)',
+	'var(--theme-chart-shape-red-fill, #feaea5)',
+	'var(--theme-chart-shape-orange-fill, #fad6bc)',
+	'var(--theme-chart-shape-yellow-fill, #fffec6)',
+	'var(--theme-chart-shape-green-fill, #d6f9d5)',
+	'var(--theme-chart-shape-teal-fill, #b0ebe9)',
+	'var(--theme-chart-shape-pink-fill, #ffcae2)',
+	'var(--theme-chart-shape-purple-fill, #efdeff)',
+	'var(--theme-chart-shape-blue-fill, #caebff)',
+	'var(--theme-chart-shape-indigo-fill, #c2d6f9)',
+	'var(--theme-chart-shape-magenta-fill, #ebb5cd)',
+	'var(--theme-chart-shape-brown-fill, #e1c3b8)',
+  	'var(--theme-chart-shape-red-line, #ff806d)',
+  	'var(--theme-chart-shape-orange-line, #ffb780)',
+  	'var(--theme-chart-shape-yellow-line, #e1dc18)',
+  	'var(--theme-chart-shape-green-line, #66cc66)',
+  	'var(--theme-chart-shape-teal-line, #66cdcc)',
+  	'var(--theme-chart-shape-pink-line, #ff99cb)',
+  	'var(--theme-chart-shape-purple-line, #cc99fe)',
+  	'var(--theme-chart-shape-blue-line, #66cbff)',
+  	'var(--theme-chart-shape-indigo-line, #6295ee)',
+  	'var(--theme-chart-shape-magenta-line, #cc6698)',
+  	'var(--theme-chart-shape-brown-line, #bf8c71)',
 ];
 
 export function* chart_data_color_generator() : Generator<string, never> {