refactor: improvements to styles and added catppuccin and minLight th…

…emes
poppinss · Aug 23, 2024 · 57a2786 · 57a2786
1 parent 0102411
commit 57a2786
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 7 deletions.
diff --git a/examples/html.ts b/examples/html.ts
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-import { dump } from '../formatters/html/main.js'
+import { dump, themes } from '../formatters/html/main.js'
 import { obj } from './values.js'
 
-console.log(dump(obj))
+console.log(dump(obj, { styles: themes.minLight }))
diff --git a/formatters/html/formatter.ts b/formatters/html/formatter.ts
@@ -101,10 +101,10 @@ export class HTMLFormatter {
    * to activate the frontend iteractions.
    */
   #wrapOutput(code: string) {
-    const id = nanoid()
+    const id = `dump-${nanoid()}`
     const nonce = this.#cspNonce ? ` nonce="${this.#cspNonce}"` : ''
     return (
-      `<div id="dump-${id}" class="dumper-dump">` +
+      `<div id="${id}" class="dumper-dump">` +
       `<pre style="${this.styles.pre}"><code>${code}</code></pre>` +
       `<script${nonce}>dumperActivate('${id}')</script>` +
       '</div>'

diff --git a/formatters/html/themes.ts b/formatters/html/themes.ts
@@ -13,10 +13,10 @@ import type { HTMLPrinterStyles } from './types.js'
  * Default styles to use for pretty printing
  * the HTML output.
  */
-export const themes: Record<string, HTMLPrinterStyles> = {
+export const themes = {
   nightOwl: {
     pre: 'background-color: #061626; color: #c792ea; font-family: Menlo, Monaco, Consolas, monospace; line-height: 24px; font-size: 15px; overflow-x: scroll; position:relative; z-index:99999;',
-    toggle: 'color: #637777; background: none; border: none;',
+    toggle: 'color: #978f63; background: none; border: none;',
     braces: 'color: #ffd700;',
     brackets: 'color: #ffd700;',
     number: 'color: #f78c6c;',
@@ -47,4 +47,70 @@ export const themes: Record<string, HTMLPrinterStyles> = {
     blobLabel: 'color: #7fdbca;',
     unknownLabel: 'color: #7fdbca;',
   },
-}
+  minLight: {
+    pre: 'background-color: #fff; color: #212121; font-family: Menlo, Monaco, Consolas, monospace; line-height: 24px; font-size: 15px; overflow-x: scroll; position:relative; z-index:99999;',
+    toggle: 'color: #8992be; background: none; border: none;',
+    braces: 'color: #0431fa;',
+    brackets: 'color: #0431fa;',
+    number: 'color: #1976d2;',
+    bigInt: 'color: #1976d2; font-weight: bold;',
+    boolean: 'color: #1976d2; font-style: italic;',
+    string: 'color: #22863a;',
+    null: 'color: #9c9c9d;',
+    undefined: 'color: #9c9c9d;',
+    prototypeLabel: 'color: #9c9c9d;',
+    symbol: 'color: #d32f2f;',
+    regex: 'color: #1976d2;',
+    date: 'color: #7b3814;',
+    buffer: 'color: #7b3814;',
+    functionLabel: 'color: #6f42c1;',
+    arrayLabel: 'color: #d32f2f;',
+    objectLabel: 'color: #d32f2f;',
+    mapLabel: 'color: #d32f2f;',
+    setLabel: 'color: #d32f2f;',
+    objectKey: 'color: #212121;',
+    objectKeyPrefix: 'color: #9c9c9d; font-style: italic; font-weight: bold',
+    classLabel: 'color: #6f42c1;',
+    weakSetLabel: 'color: #7b3814;',
+    weakRefLabel: 'color: #7b3814;',
+    weakMapLabel: 'color: #7b3814;',
+    observableLabel: 'color: #7b3814;',
+    promiseLabel: 'color: #7b3814;',
+    generatorLabel: 'color: #7b3814;',
+    blobLabel: 'color: #7b3814;',
+    unknownLabel: 'color: #7b3814;',
+  },
+  catppuccin: {
+    pre: 'background-color: #1e1e2e; color: #94e2d5; font-family: Menlo, Monaco, Consolas, monospace; line-height: 24px; font-size: 15px; overflow-x: scroll; position:relative; z-index:99999;',
+    toggle: 'color: #85656e; background: none; border: none;',
+    braces: 'color: #f38ba8;',
+    brackets: 'color: #f38ba8;',
+    number: 'color: #fab387;',
+    bigInt: 'color: #fab387; font-weight: bold;',
+    boolean: 'color: #cba6f7; font-style: italic;',
+    string: 'color: #a6e3a1;',
+    null: 'color: #94e2d5;',
+    undefined: 'color: #94e2d5;',
+    prototypeLabel: 'color: #6c7086;',
+    symbol: 'color: #f9e2af;',
+    regex: 'color: #cba6f7;',
+    date: 'color: #94e2d5;',
+    buffer: 'color: #94e2d5;',
+    functionLabel: 'color: #cba6f7;',
+    arrayLabel: 'color: #f9e2af;',
+    objectLabel: 'color: #f9e2af;',
+    mapLabel: 'color: #f9e2af;',
+    setLabel: 'color: #f9e2af;',
+    objectKey: 'color: #89b4fa;',
+    objectKeyPrefix: 'color: #6c7086; font-style: italic; font-weight: bold',
+    classLabel: 'color: #cba6f7;',
+    weakSetLabel: 'color: #94e2d5;',
+    weakRefLabel: 'color: #94e2d5;',
+    weakMapLabel: 'color: #94e2d5;',
+    observableLabel: 'color: #94e2d5;',
+    promiseLabel: 'color: #94e2d5;',
+    generatorLabel: 'color: #94e2d5;',
+    blobLabel: 'color: #94e2d5;',
+    unknownLabel: 'color: #94e2d5;',
+  },
+} satisfies Record<string, HTMLPrinterStyles>