From 8d1842939036ee38e0f9299dd25e860c245aec39 Mon Sep 17 00:00:00 2001
From: Orest Bida <dev@orestbida.com>
Date: Mon, 25 Sep 2023 21:48:20 +0200
Subject: [PATCH] Feat: added css themes

---
 playground/index.html                   | 111 +++++++-
 playground/plugins/shiki-highlighter.js | 323 +++++++++++++++---------
 playground/src/main.css                 | 114 ++++++++-
 3 files changed, 423 insertions(+), 125 deletions(-)

diff --git a/playground/index.html b/playground/index.html
index 7a31cf18..a9787dec 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -355,37 +355,128 @@ <h4>Misc</h4>
 
             <br>
             <br>
-            <section>
+            <div>
 
                 <h4>Themes</h4>
 
                 <div class="themes">
                     <label for="default-light">
                         <input type="radio" id="default-light" name="theme" checked>
-                        <span class="input-label">Light theme (default)</span>
+                        <span class="input-label">
+                            <span class="theme-type">(builtin)</span>
+                            <span class="theme-name">Light theme</span>
+
+                        </span>
                     </label>
 
                     <label for="cc--darkmode">
                         <input type="radio" id="cc--darkmode" name="theme">
-                        <span class="input-label">Dark theme (default)</span>
+                        <span class="input-label">
+                            <span class="theme-type">(builtin)</span>
+                            <span class="theme-name">Dark theme</span>
+                        </span>
                     </label>
 
-                    <label for="cc--dark-turquoise">
+                    <label for="cc--dark-turquoise" aria-label="Dark Turquoise">
                         <input type="radio" id="cc--dark-turquoise" name="theme">
-                        <span class="input-label">Dark Turquoise</span>
+                        <span class="input-label">
+                            <span class="theme-type">(custom)</span>
+                            <span class="theme-name">Dark Turquoise</span>
+                        </span>
                     </label>
 
                     <label for="cc--light-funky">
                         <input type="radio" id="cc--light-funky" name="theme">
-                        <span class="input-label">Light Funky</span>
+                        <span class="input-label">
+                            <span class="theme-type">(custom)</span>
+                            <span class="theme-name">Light Funky</span>
+                        </span>
                     </label>
 
-                    <label for="cc--elegant-black">
+                    <!-- <label for="cc--elegant-black">
                         <input disabled type="radio" id="cc--elegant-black" name="theme">
-                        <span class="input-label">Elegant Black 🚧</span>
-                    </label>
+                        <span class="input-label">
+                            <span class="theme-type">(custom)</span>
+                            <span class="theme-name">Elegant Black 🚧</span>
+                        </span>
+                    </label> -->
                 </div>
-            </section>
+
+                <div class="custom-themes">
+
+                    <!-- !!!--CustomBlock type="info" title="How to use custom themes" details
+                        <ol>
+                            <li>Copy the CSS inside a <code>&lt;style&gt;</code> tag or inside a <code>.css</code> file. </li>
+                            <li>Add the theme's class to the <code>body</code> element; e.g. <code>&lt;body class="theme_funky"&gt;</code></li>
+                        </ol>
+                    --!!! -->
+
+                    <!--SHIKI language="css" details title="Dark Turquoise (CSS)" lineNumbers
+                    .cc--dark-turquoise {
+                        color-scheme: dark;
+                        --cc-bg: #161a1c;
+                        --cc-primary-color: rgb(239, 244, 246);
+                        --cc-secondary-color: #b1bdc3;
+                        --cc-btn-primary-bg: #60fed2;
+                        --cc-btn-primary-color: #000;
+                        --cc-btn-primary-hover-bg: #4dd4ae;
+                        --cc-btn-primary-hover-color: #000;
+                        --cc-btn-secondary-bg: #242c31;
+                        --cc-btn-secondary-color: var(--cc-primary-color);
+                        --cc-btn-secondary-hover-bg: #d4dae0;
+                        --cc-btn-secondary-hover-color: #000;
+                        --cc-cookie-category-block-bg: #1e2428;
+                        --cc-cookie-category-block-border: #1e2428;
+                        --cc-cookie-category-block-hover-bg: #242c31;
+                        --cc-cookie-category-block-hover-border: #242c31;
+                        --cc-cookie-category-expanded-block-hover-bg: #242c31;
+                        --cc-cookie-category-expanded-block-bg: #1e2428;
+                        --cc-toggle-readonly-bg: #343e45;
+                        --cc-overlay-bg: rgba(4, 6, 8, .85)!important;
+                        --cc-toggle-on-knob-bg: var(--cc-bg);
+                        --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg);
+                        --cc-separator-border-color: #222a30;
+                        --cc-footer-border-color: #212529;
+                        --cc-footer-bg: #0f1112;
+                    }
+                    -->
+
+                    <!--SHIKI language="css" details title="Light Funky (CSS)" lineNumbers
+                    .cc--light-funky {
+                        --cc-bg: #f9faff;
+                        --cc-primary-color: #112954;
+                        --cc-secondary-color: #112954;
+                        --cc-btn-primary-bg: #3859d0;
+                        --cc-btn-primary-color: var(--cc-bg);
+                        --cc-btn-primary-hover-bg: #213657;
+                        --cc-btn-primary-hover-color: #fff;
+                        --cc-btn-secondary-bg: #dfe7f9;
+                        --cc-btn-secondary-color: var(--cc-secondary-color);
+                        --cc-btn-secondary-hover-bg: #c6d1ea;
+                        --cc-btn-secondary-hover-color: #000;
+                        --cc-cookie-category-block-bg: #ebeff9;
+                        --cc-cookie-category-block-border: #ebeff9;
+                        --cc-cookie-category-block-hover-bg: #dbe5f9;
+                        --cc-cookie-category-block-hover-border: #dbe5f9;
+                        --cc-cookie-category-expanded-block-hover-bg: #ebeff9;
+                        --cc-cookie-category-expanded-block-bg: #ebeff9;
+                        --cc-overlay-bg: rgba(219, 232, 255, 0.85)!important;
+                        --cc-toggle-readonly-bg: #cbd8f1;
+                        --cc-toggle-on-knob-bg: var(--cc-bg);
+                        --cc-toggle-off-bg: #8fa8d6;
+                        --cc-toggle-readonly-knob-bg: var(--cc-bg);
+                        --cc-separator-border-color: #f1f3f5;
+                        --cc-footer-border-color: #f1f3f5;
+                        --cc-footer-bg: var(--cc-bg);
+                        --cc-btn-border-radius: 1rem .6rem 1.3rem .5rem / .5rem 1rem;
+                        --cc-modal-border-radius: var(--cc-btn-border-radius);
+                        --cc-pm-toggle-border-radius: var(--cc-btn-border-radius);
+                    }
+                    -->
+                </div>
+            </div>
+
+
 
             <br>
             <br>
diff --git a/playground/plugins/shiki-highlighter.js b/playground/plugins/shiki-highlighter.js
index 583943d8..e762620f 100644
--- a/playground/plugins/shiki-highlighter.js
+++ b/playground/plugins/shiki-highlighter.js
@@ -23,146 +23,243 @@ async function ShikiHighlight(opts = {}) {
          * @returns {string}
          */
         transformIndexHtml(html) {
-
             let htmlString = html;
+            htmlString = shikiHighlightBlock(html, shiki);
+            htmlString = createCustomBlock(htmlString);
+            return htmlString;
+        }
+    };
+}
+
+/**
+ * @param {string} html
+ * @param {import('shiki-es').Highlighter} shiki
+ */
+function shikiHighlightBlock(html, shiki) {
 
-            const codeBlocks = html.matchAll(/<!--SHIKI (.*?)-->/gs);
+    let htmlString = html;
+    const codeBlocks = html.matchAll(/<!--SHIKI (.*?)-->/gs);
+
+    for(const block of codeBlocks) {
+
+        /**
+         * @type {string}
+         */
+        const blockString = block[0];
+        const split = blockString.split('\n');
+
+        if(split.length < 1)
+            continue;
+
+        /**
+         * All attributes (everything after "<!--SHIKI")
+         */
+        const attrs = split[0].split('<!--SHIKI')[1].trim();
+        const indentationSpaces = split[split.length - 1].split(' ').length - 1;
 
-            for(const block of codeBlocks) {
+        const title = (attrs.match(/title="([^"]+)"/i))?.[1] || '';
+        const language = (attrs.match(/language="([^"]+)"/i))?.[1] || '';
+        const highlightIndexes = getIndexes((attrs.match(/highlight="([^"]+)"/i))?.[1] || '');
+        const focusIndexes = getIndexes((attrs.match(/focus="([^"]+)"/i))?.[1] || '');
+        const showLineNumbers = attrs.includes('lineNumbers');
+        const isDetails = attrs.includes('details');
+        const fetchRelease = attrs.includes('fetchRelease');
 
-                /**
-                 * @type {string}
-                 */
-                const blockString = block[0];
-                const split = blockString.split('\n');
+        const shouldHighlightLines = Object.keys(highlightIndexes).length > 0;
+        const shouldFocusLines = Object.keys(focusIndexes).length > 0;
 
-                if(split.length < 1)
-                    continue;
+        /**
+         * code content
+         */
+        let body = split.slice(1, split.length - 1);
 
-                /**
-                 * All attributes (everything after "<!--SHIKI")
-                 */
-                const attrs = split[0].split('<!--SHIKI')[1].trim();
-                const indentationSpaces = split[split.length - 1].split(' ').length - 1;
+        /**
+         * Fixed indentation and replace '\r' with '\n'
+         */
+        let bodyCleaned = body.map(row => {
 
-                const title = (attrs.match(/title="([^"]+)"/i))?.[1] || '';
-                const language = (attrs.match(/language="([^"]+)"/i))?.[1] || '';
-                const highlightIndexes = getIndexes((attrs.match(/highlight="([^"]+)"/i))?.[1] || '');
-                const focusIndexes = getIndexes((attrs.match(/focus="([^"]+)"/i))?.[1] || '');
-                const showLineNumbers = attrs.includes('lineNumbers');
-                const isDetails = attrs.includes('details');
-                const fetchRelease = attrs.includes('fetchRelease');
+            const emptyRow = row.trim() === '';
 
-                const shouldHighlightLines = Object.keys(highlightIndexes).length > 0;
-                const shouldFocusLines = Object.keys(focusIndexes).length > 0;
+            if(emptyRow)
+                row = '';
 
-                /**
-                 * code content
-                 */
-                let body = split.slice(1, split.length - 1);
+            return (!emptyRow && row.slice(0, indentationSpaces).trim() === ''
+                ? row.slice(indentationSpaces)
+                : row).replace('\r', '');
 
-                /**
-                 * Fixed indentation and replace '\r' with '\n'
-                 */
-                let bodyCleaned = body.map(row => {
+        }).join('\n');
 
-                    const emptyRow = row.trim() === '';
+        /**
+            * Number of lines of code
+            */
+        const nRows = body.length;
 
-                    if(emptyRow)
-                        row = '';
+        /**
+            * Html string for line numbers
+            */
+        let lineNumbers = '';
 
-                    return (!emptyRow && row.slice(0, indentationSpaces).trim() === ''
-                        ? row.slice(indentationSpaces)
-                        : row).replace('\r', '');
+        if(showLineNumbers){
 
-                }).join('\n');
+            lineNumbers = '<div class="hl__numbers" aria-hidden="true">';
 
-                /**
-                 * Number of lines of code
-                 */
-                const nRows = body.length;
+            for(let i=1; i<=nRows; i++){
+                const className = [];
 
-                /**
-                 * Html string for line numbers
-                 */
-                let lineNumbers = '';
+                if(shouldFocusLines && focusIndexes[i] === true)
+                    className.push('line--focus');
 
-                if(showLineNumbers){
+                if(shouldHighlightLines && highlightIndexes[i] === true)
+                    className.push('line--highlight');
 
-                    lineNumbers = '<div class="hl__numbers" aria-hidden="true">';
+                lineNumbers += `<span class="${className.join(' ')}"></span>`;
+            }
 
-                    for(let i=1; i<=nRows; i++){
-                        const className = [];
+            lineNumbers += '</div>';
+        }
 
-                        if(shouldFocusLines && focusIndexes[i] === true)
-                            className.push('line--focus');
+        const tokens = shiki.codeToThemedTokens(bodyCleaned, language);
 
-                        if(shouldHighlightLines && highlightIndexes[i] === true)
-                            className.push('line--highlight');
+        const preHtml = renderToHtml(tokens, {
+            elements: {
+                pre({ children }) {
+                    return `<pre class="hl__shiki">${children}</pre>`;
+                },
+                code({ children }) {
+                    return `<code tabindex="0">${children}</code>`;
+                },
+                line({index, children}) {
+                    let focus = shouldFocusLines && focusIndexes[index + 1] === true;
+                    let className = 'line' + (focus ? ' line--focus' : '');
 
-                        lineNumbers += `<span class="${className.join(' ')}"></span>`;
-                    }
+                    if(fetchRelease)
+                        children = children.replaceAll('{{latest_release}}', '<span data-latest-release></span>');
 
-                    lineNumbers += '</div>';
+                    return  `<span class="${className}">${children}</span>`;
                 }
+            }
+        });
+
+        const tag = title && isDetails
+            ? 'details'
+            : 'div';
+
+        const titleTag = title && isDetails
+            ? 'summary'
+            : 'div';
+
+        const className = `hl hl--${tag}`
+            + (showLineNumbers ? ' hl--line-numbers' : '')
+            + (shouldFocusLines ? ' hl--line-focus' : '');
+
+        const renderedCodeBlock = `
+        <${tag}
+            class="${className}"
+        >
+            ${title
+                ? `<${titleTag} class="hl__title">${title.trim()}</${titleTag}>`
+                : ''
+            }
+            <div class="hl__content">
+                ${preHtml}
+                ${showLineNumbers ? lineNumbers : ''}
+            </div>
+        </${tag}>`;
+
+        /**
+            * Replace html comment with the proper rendered code block
+            */
+        htmlString = htmlString.replace(blockString, renderedCodeBlock);
+    }
+
+    return htmlString;
+}
+
+/**
+ * @param {string} html
+ */
+function createCustomBlock(html) {
+
+    let htmlString = html;
+    const codeBlocks = html.matchAll(/!!!--CustomBlock (.*?)--!!!/gs);
+
+    for(const block of codeBlocks) {
+
+        /**
+         * @type {string}
+         */
+        const blockString = block[0];
+        const split = blockString.split('\n');
+
+        if(split.length < 1)
+            continue;
+
+        /**
+         * All attributes (everything after "<!--SHIKI")
+         */
+        const attrs = split[0].split('!!!--CustomBlock')[1].trim();
+        const indentationSpaces = split[split.length - 1].split(' ').length - 1;
+
+        const title = (attrs.match(/title="([^"]+)"/i))?.[1] || '';
+        const type = (attrs.match(/type="([^"]+)"/i))?.[1] || '';
+        const isDetails = attrs.includes('details');
+        const fetchRelease = attrs.includes('fetchRelease');
+
+        /**
+         * code content
+         */
+        let body = split.slice(1, split.length - 1);
+
+        /**
+         * Fixed indentation and replace '\r' with '\n'
+         */
+        let bodyCleaned = body.map(row => {
+
+            const emptyRow = row.trim() === '';
+
+            if(emptyRow)
+                row = '';
+
+            return (!emptyRow && row.slice(0, indentationSpaces).trim() === ''
+                ? row.slice(indentationSpaces)
+                : row).replace('\r', '');
+
+        }).join('\n');
+
+        if(fetchRelease)
+            bodyCleaned = bodyCleaned.replaceAll('{{latest_release}}', '<span data-latest-release></span>');
+
+        const tag = title && isDetails
+            ? 'details'
+            : 'div';
 
-                const tokens = shiki.codeToThemedTokens(bodyCleaned, language);
-
-                const preHtml = renderToHtml(tokens, {
-                    elements: {
-                        pre({ children }) {
-                            return `<pre class="hl__shiki">${children}</pre>`;
-                        },
-                        code({ children }) {
-                            return `<code tabindex="0">${children}</code>`;
-                        },
-                        line({index, children}) {
-                            let focus = shouldFocusLines && focusIndexes[index + 1] === true;
-                            let className = 'line' + (focus ? ' line--focus' : '');
-
-                            if(fetchRelease)
-                                children = children.replaceAll('{{latest_release}}', '<span data-latest-release></span>');
-
-                            return  `<span class="${className}">${children}</span>`;
-                        }
-                    }
-                });
-
-                const tag = title && isDetails
-                    ? 'details'
-                    : 'div';
-
-                const titleTag = title && isDetails
-                    ? 'summary'
-                    : 'div';
-
-                const className = `hl hl--${tag}`
-                    + (showLineNumbers ? ' hl--line-numbers' : '')
-                    + (shouldFocusLines ? ' hl--line-focus' : '');
-
-                const renderedCodeBlock = `
-                <${tag}
-                    class="${className}"
-                >
-                    ${title
-                        ? `<${titleTag} class="hl__title">${title.trim()}</${titleTag}>`
-                        : ''
-                    }
-                    <div class="hl__content">
-                        ${preHtml}
-                        ${showLineNumbers ? lineNumbers : ''}
-                    </div>
-                </${tag}>`;
-
-                /**
-                 * Replace html comment with the proper rendered code block
-                 */
-                htmlString = htmlString.replace(blockString, renderedCodeBlock);
+        const titleTag = title && isDetails
+            ? 'summary'
+            : 'div';
+
+        const className = `custom-block custom-block--${type}`
+            + (isDetails ? ' custom-block--details' : '');
+
+        const customBlock = `
+        <${tag}
+            class="${className}"
+        >
+            ${title
+                ? `<${titleTag} class="custom-block__title">${title.trim()}</${titleTag}>`
+                : ''
             }
+            <div class="custom-block__desc">
+                ${bodyCleaned}
+            </div>
+        </${tag}>`;
 
-            return htmlString;
-        }
-    };
+        /**
+            * Replace html comment with the proper rendered code block
+            */
+        htmlString = htmlString.replace(blockString, customBlock);
+    }
+
+    return htmlString;
 }
 
 /**
diff --git a/playground/src/main.css b/playground/src/main.css
index 829f8bdc..2e79e34d 100644
--- a/playground/src/main.css
+++ b/playground/src/main.css
@@ -577,8 +577,8 @@ button:hover{
 
 .themes {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 0.4rem;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 0.5rem;
 }
 
 .themes label {
@@ -607,6 +607,20 @@ button:hover{
     border-radius: 0.4rem;
     pointer-events: none;
     border: .125rem solid transparent;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+.themes .theme-type {
+    font-weight: 600;
+    font-size: .8rem;
+}
+
+.themes .theme-name {
+    font-size: 1.2em;
+    margin-bottom: 1rem;
+    font-weight: 600;
 }
 
 .themes input:focus + .input-label{
@@ -631,6 +645,102 @@ button:hover{
     background: #555c5c;
 }
 
+.custom-themes {
+    margin-top: 1rem;
+}
+
+.custom-themes .hl {
+    margin-bottom: 0;
+    overflow: hidden;
+}
+
+.custom-themes .hl__title:hover{
+    background-color: #191e22;
+}
+
+.custom-themes .hl__title {
+    font-size: .9rem;
+    color: #b0c4d4;
+}
+
+.custom-block {
+    font-size: 0.9rem;
+    padding: 1rem 1.4rem;
+    margin: 1rem 0;
+    border-radius: 0.5rem;
+}
+.custom-block--info {
+    background-color: #3c637747;
+    border: 0.0625rem solid rgba(210, 238, 255, 0.04);
+}
+.custom-block--info .custom-block__title {
+    color: #7ec9e7;
+}
+
+.custom-block[open] > summary::before {
+    transform: translateY(-10%) rotate(225deg);
+}
+
+.custom-block[open] summary {
+    border-bottom: 0.0625rem solid #232a31;
+}
+
+.custom-block summary {
+    cursor: pointer;
+    transition: color .2s ease, background-color .2s ease;
+}
+
+.custom-block summary::before {
+    border-style: solid;
+    border-width: 0 0.125rem 0.125rem 0;
+    padding: 0.2em;
+    display: inline-block;
+    top: 0.0625rem;
+    position: relative;
+    content: "";
+    margin-right: 1em;
+    transform: translateY(-50%) rotate(45deg);
+}
+
+.custom-block--warning {
+    background-color: #2c282647;
+    border: 0.0625rem solid rgba(255, 240, 210, 0.04);
+}
+.custom-block .custom-block--warning .custom-block__title {
+    color: #e7b97e;
+}
+.custom-block .custom-block--tip .custom-block__title {
+    color: #7ee79a;
+}
+.custom-block--details {
+    padding: 0;
+}
+.custom-block--details .custom-block__desc {
+    padding: 1em 1.4em;
+}
+.custom-block summary {
+    padding-bottom: 0;
+    display: block;
+    padding: 0.75em 1.4em;
+}
+.custom-block__title {
+    font-weight: 600;
+}
+.custom-block__desc {
+    overflow: hidden;
+}
+.custom-block__desc p, .custom-block__desc ul {
+    margin-bottom: 0;
+    margin-top: 0.8125rem;
+}
+.custom-block__desc > *:first-child {
+    margin-top: 0;
+}
+.custom-block__desc > *:last-child {
+    margin-bottom: 0;
+}
+
+
 /** Edit translations modal **/
 
 .dialog-container,