diff --git a/astro.config.mjs b/astro.config.mjs index 518839f..cb31c7b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,8 +1,6 @@ import { defineConfig } from 'astro/config'; import solidJs from "@astrojs/solid-js"; import remarkBreaks from 'remark-breaks'; -import rehypeMermaid from 'rehype-mermaid'; -import rehypeShiki from '@shikijs/rehype' import mdx from "@astrojs/mdx"; import shikiTheme from "./src/styles/xydark.json"; @@ -14,12 +12,9 @@ export default defineConfig({ integrations: [solidJs(), mdx(), sitemap()], markdown: { remarkPlugins: [remarkBreaks], - rehypePlugins: [ - rehypeMermaid, - [rehypeShiki, { - theme: shikiTheme, - }] ], - syntaxHighlight: false, + shikiConfig: { + theme: shikiTheme, + } }, build: { site: 'https://www.xypnox.com', diff --git a/package.json b/package.json index 8b7504f..9089ff4 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "iconify-icon": "^1.0.8", "lodash.debounce": "^4.0.8", "nanoid": "^5.0.4", - "rehype-mermaid": "^2.1.0", "remark-breaks": "^4.0.0", "sharp": "^0.32.6", "solid-js": "^1.7.7", @@ -32,7 +31,6 @@ "tinycolor2": "^1.6.0" }, "devDependencies": { - "@shikijs/rehype": "1.0.0-beta.2", "@types/lodash.debounce": "^4.0.9", "@types/node": "^20.9.3", "@types/tinycolor2": "^1.4.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72659e1..2954bd4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,9 +38,6 @@ dependencies: nanoid: specifier: ^5.0.4 version: 5.0.4 - rehype-mermaid: - specifier: ^2.1.0 - version: 2.1.0 remark-breaks: specifier: ^4.0.0 version: 4.0.0 @@ -58,9 +55,6 @@ dependencies: version: 1.6.0 devDependencies: - '@shikijs/rehype': - specifier: 1.0.0-beta.2 - version: 1.0.0-beta.2 '@types/lodash.debounce': specifier: ^4.0.9 version: 4.0.9 @@ -587,10 +581,6 @@ packages: to-fast-properties: 2.0.0 dev: false - /@braintree/sanitize-url@6.0.4: - resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==} - dev: false - /@emmetio/abbreviation@2.3.3: resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} dependencies: @@ -1008,12 +998,6 @@ packages: engines: {node: '>=14'} dev: false - /@fortawesome/fontawesome-free@6.5.1: - resolution: {integrity: sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==} - engines: {node: '>=6'} - requiresBuild: true - dev: false - /@iconify/types@2.0.0: resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} dev: false @@ -1097,27 +1081,6 @@ packages: fastq: 1.15.0 dev: false - /@shikijs/core@1.0.0-beta.2: - resolution: {integrity: sha512-H0r+V4/47hXZzFW2qXRqjLwNtiUE5bQankMw2m2RE1hLgHSjp/skyBZYDXjhG9y7ei3sIZAj8s4vx31EzxxrhQ==} - dev: true - - /@shikijs/rehype@1.0.0-beta.2: - resolution: {integrity: sha512-mH4t72DG+F576C5PTLoWj7uTfBUPYifa9unFIWHgjHcXHs7Z6fPYOrOpdcM4AhdSdEd6AgkmF5WV5YtrE9+kBQ==} - dependencies: - '@shikijs/transformers': 1.0.0-beta.2 - '@types/hast': 3.0.4 - hast-util-to-string: 3.0.0 - shiki: 1.0.0-beta.2 - unified: 11.0.4 - unist-util-visit: 5.0.0 - dev: true - - /@shikijs/transformers@1.0.0-beta.2: - resolution: {integrity: sha512-8SbhI7BDUc+rHX0UtZYxidTGfmdoTRK1FtPspu0Zd3shFy5wvHbmb1xvtpmZ1vdXzsO8WUb6RRE3SGvHCpQGrg==} - dependencies: - shiki: 1.0.0-beta.2 - dev: true - /@solid-primitives/event-listener@2.3.0(solid-js@1.7.7): resolution: {integrity: sha512-0DS7DQZvCExWSpurVZC9/wjI8RmkhuOtWOy6Pp1Woq9ElMT9/bfjNpkwXsOwisLpcTqh9eUs17kp7jtpWcC20w==} peerDependencies: @@ -1200,20 +1163,6 @@ packages: '@babel/types': 7.23.0 dev: false - /@types/d3-scale-chromatic@3.0.3: - resolution: {integrity: sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==} - dev: false - - /@types/d3-scale@4.0.8: - resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==} - dependencies: - '@types/d3-time': 3.0.3 - dev: false - - /@types/d3-time@3.0.3: - resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==} - dev: false - /@types/debug@4.1.9: resolution: {integrity: sha512-8Hz50m2eoS56ldRlepxSBa6PWEVCtzUo/92HgLc2qTMnotJNIm7xP+UZhyWoYsyOdd5dxZ+NZLb24rsKyFs2ow==} dependencies: @@ -1236,11 +1185,6 @@ packages: '@types/unist': 2.0.8 dev: false - /@types/hast@3.0.4: - resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} - dependencies: - '@types/unist': 3.0.0 - /@types/json5@0.0.30: resolution: {integrity: sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==} dev: false @@ -1314,6 +1258,7 @@ packages: /@types/unist@3.0.0: resolution: {integrity: sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==} + dev: false /@volar/kit@1.10.1(typescript@5.2.2): resolution: {integrity: sha512-+aR3rvgER14VfjFflhD6k161uLdshpuK1tQUrnl8phpKtSGJDXHkTl/WkNk2xCEuE4goShS9nTvruTyrI9gGBw==} @@ -1574,6 +1519,7 @@ packages: /bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} + dev: false /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -1784,11 +1730,6 @@ packages: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} dev: false - /commander@7.2.0: - resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} - engines: {node: '>= 10'} - dev: false - /common-ancestor-path@1.0.1: resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} dev: false @@ -1802,18 +1743,6 @@ packages: engines: {node: '>= 0.6'} dev: false - /cose-base@1.0.3: - resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==} - dependencies: - layout-base: 1.0.2 - dev: false - - /cose-base@2.2.0: - resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==} - dependencies: - layout-base: 2.0.1 - dev: false - /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1827,314 +1756,6 @@ packages: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} dev: false - /cytoscape-cose-bilkent@4.1.0(cytoscape@3.28.1): - resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==} - peerDependencies: - cytoscape: ^3.2.0 - dependencies: - cose-base: 1.0.3 - cytoscape: 3.28.1 - dev: false - - /cytoscape-fcose@2.2.0(cytoscape@3.28.1): - resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==} - peerDependencies: - cytoscape: ^3.2.0 - dependencies: - cose-base: 2.2.0 - cytoscape: 3.28.1 - dev: false - - /cytoscape@3.28.1: - resolution: {integrity: sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==} - engines: {node: '>=0.10'} - dependencies: - heap: 0.2.7 - lodash: 4.17.21 - dev: false - - /d3-array@2.12.1: - resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} - dependencies: - internmap: 1.0.1 - dev: false - - /d3-array@3.2.4: - resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==} - engines: {node: '>=12'} - dependencies: - internmap: 2.0.3 - dev: false - - /d3-axis@3.0.0: - resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==} - engines: {node: '>=12'} - dev: false - - /d3-brush@3.0.0: - resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==} - engines: {node: '>=12'} - dependencies: - d3-dispatch: 3.0.1 - d3-drag: 3.0.0 - d3-interpolate: 3.0.1 - d3-selection: 3.0.0 - d3-transition: 3.0.1(d3-selection@3.0.0) - dev: false - - /d3-chord@3.0.1: - resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==} - engines: {node: '>=12'} - dependencies: - d3-path: 3.1.0 - dev: false - - /d3-color@3.1.0: - resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==} - engines: {node: '>=12'} - dev: false - - /d3-contour@4.0.2: - resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==} - engines: {node: '>=12'} - dependencies: - d3-array: 3.2.4 - dev: false - - /d3-delaunay@6.0.4: - resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==} - engines: {node: '>=12'} - dependencies: - delaunator: 5.0.1 - dev: false - - /d3-dispatch@3.0.1: - resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==} - engines: {node: '>=12'} - dev: false - - /d3-drag@3.0.0: - resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==} - engines: {node: '>=12'} - dependencies: - d3-dispatch: 3.0.1 - d3-selection: 3.0.0 - dev: false - - /d3-dsv@3.0.1: - resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==} - engines: {node: '>=12'} - hasBin: true - dependencies: - commander: 7.2.0 - iconv-lite: 0.6.3 - rw: 1.3.3 - dev: false - - /d3-ease@3.0.1: - resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==} - engines: {node: '>=12'} - dev: false - - /d3-fetch@3.0.1: - resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==} - engines: {node: '>=12'} - dependencies: - d3-dsv: 3.0.1 - dev: false - - /d3-force@3.0.0: - resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==} - engines: {node: '>=12'} - dependencies: - d3-dispatch: 3.0.1 - d3-quadtree: 3.0.1 - d3-timer: 3.0.1 - dev: false - - /d3-format@3.1.0: - resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==} - engines: {node: '>=12'} - dev: false - - /d3-geo@3.1.0: - resolution: {integrity: sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==} - engines: {node: '>=12'} - dependencies: - d3-array: 3.2.4 - dev: false - - /d3-hierarchy@3.1.2: - resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==} - engines: {node: '>=12'} - dev: false - - /d3-interpolate@3.0.1: - resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==} - engines: {node: '>=12'} - dependencies: - d3-color: 3.1.0 - dev: false - - /d3-path@1.0.9: - resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==} - dev: false - - /d3-path@3.1.0: - resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==} - engines: {node: '>=12'} - dev: false - - /d3-polygon@3.0.1: - resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==} - engines: {node: '>=12'} - dev: false - - /d3-quadtree@3.0.1: - resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==} - engines: {node: '>=12'} - dev: false - - /d3-random@3.0.1: - resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==} - engines: {node: '>=12'} - dev: false - - /d3-sankey@0.12.3: - resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==} - dependencies: - d3-array: 2.12.1 - d3-shape: 1.3.7 - dev: false - - /d3-scale-chromatic@3.0.0: - resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==} - engines: {node: '>=12'} - dependencies: - d3-color: 3.1.0 - d3-interpolate: 3.0.1 - dev: false - - /d3-scale@4.0.2: - resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==} - engines: {node: '>=12'} - dependencies: - d3-array: 3.2.4 - d3-format: 3.1.0 - d3-interpolate: 3.0.1 - d3-time: 3.1.0 - d3-time-format: 4.1.0 - dev: false - - /d3-selection@3.0.0: - resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==} - engines: {node: '>=12'} - dev: false - - /d3-shape@1.3.7: - resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==} - dependencies: - d3-path: 1.0.9 - dev: false - - /d3-shape@3.2.0: - resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==} - engines: {node: '>=12'} - dependencies: - d3-path: 3.1.0 - dev: false - - /d3-time-format@4.1.0: - resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==} - engines: {node: '>=12'} - dependencies: - d3-time: 3.1.0 - dev: false - - /d3-time@3.1.0: - resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==} - engines: {node: '>=12'} - dependencies: - d3-array: 3.2.4 - dev: false - - /d3-timer@3.0.1: - resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==} - engines: {node: '>=12'} - dev: false - - /d3-transition@3.0.1(d3-selection@3.0.0): - resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==} - engines: {node: '>=12'} - peerDependencies: - d3-selection: 2 - 3 - dependencies: - d3-color: 3.1.0 - d3-dispatch: 3.0.1 - d3-ease: 3.0.1 - d3-interpolate: 3.0.1 - d3-selection: 3.0.0 - d3-timer: 3.0.1 - dev: false - - /d3-zoom@3.0.0: - resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==} - engines: {node: '>=12'} - dependencies: - d3-dispatch: 3.0.1 - d3-drag: 3.0.0 - d3-interpolate: 3.0.1 - d3-selection: 3.0.0 - d3-transition: 3.0.1(d3-selection@3.0.0) - dev: false - - /d3@7.8.5: - resolution: {integrity: sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==} - engines: {node: '>=12'} - dependencies: - d3-array: 3.2.4 - d3-axis: 3.0.0 - d3-brush: 3.0.0 - d3-chord: 3.0.1 - d3-color: 3.1.0 - d3-contour: 4.0.2 - d3-delaunay: 6.0.4 - d3-dispatch: 3.0.1 - d3-drag: 3.0.0 - d3-dsv: 3.0.1 - d3-ease: 3.0.1 - d3-fetch: 3.0.1 - d3-force: 3.0.0 - d3-format: 3.1.0 - d3-geo: 3.1.0 - d3-hierarchy: 3.1.2 - d3-interpolate: 3.0.1 - d3-path: 3.1.0 - d3-polygon: 3.0.1 - d3-quadtree: 3.0.1 - d3-random: 3.0.1 - d3-scale: 4.0.2 - d3-scale-chromatic: 3.0.0 - d3-selection: 3.0.0 - d3-shape: 3.2.0 - d3-time: 3.1.0 - d3-time-format: 4.1.0 - d3-timer: 3.0.1 - d3-transition: 3.0.1(d3-selection@3.0.0) - d3-zoom: 3.0.0 - dev: false - - /dagre-d3-es@7.0.10: - resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==} - dependencies: - d3: 7.8.5 - lodash-es: 4.17.21 - dev: false - - /dayjs@1.11.10: - resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} - dev: false - /debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -2187,15 +1808,10 @@ packages: engines: {node: '>=4.0.0'} dev: false - /delaunator@5.0.1: - resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==} - dependencies: - robust-predicates: 3.0.2 - dev: false - /dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} + dev: false /detect-libc@2.0.2: resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} @@ -2210,6 +1826,7 @@ packages: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} dependencies: dequal: 2.0.3 + dev: false /diff@5.1.0: resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==} @@ -2220,10 +1837,6 @@ packages: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} dev: false - /dompurify@3.0.8: - resolution: {integrity: sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ==} - dev: false - /dset@3.1.2: resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==} engines: {node: '>=4'} @@ -2237,10 +1850,6 @@ packages: resolution: {integrity: sha512-aoCqgU6r9+o9/S7wkcSbmPRFi7OWZWiXS9rtjEd+Ouyu/Xyw5RSq2XN8s5Qp8IaFOLiRrhQCphCIjAxgG3eCAg==} dev: false - /elkjs@0.9.1: - resolution: {integrity: sha512-JWKDyqAdltuUcyxaECtYG6H4sqysXSLeoXuGUBfRNESMTkj+w+qdb0jya8Z/WI0jVd03WQtCGhS6FOFtlhD5FQ==} - dev: false - /emmet@2.4.6: resolution: {integrity: sha512-dJfbdY/hfeTyf/Ef7Y7ubLYzkBvPQ912wPaeVYpAxvFxkEBf/+hJu4H6vhAvFN6HlxqedlfVn2x1S44FfQ97pg==} dependencies: @@ -2266,11 +1875,6 @@ packages: once: 1.4.0 dev: false - /entities@4.5.0: - resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} - engines: {node: '>=0.12'} - dev: false - /es-module-lexer@1.3.1: resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==} dev: false @@ -2424,6 +2028,7 @@ packages: /extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} + dev: false /fast-fifo@1.3.2: resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==} @@ -2562,34 +2167,6 @@ packages: engines: {node: '>= 0.4.0'} dev: false - /hast-util-from-dom@5.0.0: - resolution: {integrity: sha512-d6235voAp/XR3Hh5uy7aGLbM3S4KamdW0WEgOaU1YoewnuYw4HXb5eRtv9g65m/RFGEfUY1Mw4UqCc5Y8L4Stg==} - dependencies: - '@types/hast': 3.0.4 - hastscript: 8.0.0 - web-namespaces: 2.0.1 - dev: false - - /hast-util-from-html-isomorphic@2.0.0: - resolution: {integrity: sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==} - dependencies: - '@types/hast': 3.0.4 - hast-util-from-dom: 5.0.0 - hast-util-from-html: 2.0.1 - unist-util-remove-position: 5.0.0 - dev: false - - /hast-util-from-html@2.0.1: - resolution: {integrity: sha512-RXQBLMl9kjKVNkJTIO6bZyb2n+cUH8LFaSSzo82jiLT6Tfc+Pt7VQCS+/h3YwG4jaNE2TA2sdJisGWR+aJrp0g==} - dependencies: - '@types/hast': 3.0.4 - devlop: 1.1.0 - hast-util-from-parse5: 8.0.1 - parse5: 7.1.2 - vfile: 6.0.1 - vfile-message: 4.0.2 - dev: false - /hast-util-from-parse5@7.1.2: resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==} dependencies: @@ -2602,37 +2179,12 @@ packages: web-namespaces: 2.0.1 dev: false - /hast-util-from-parse5@8.0.1: - resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==} - dependencies: - '@types/hast': 3.0.4 - '@types/unist': 3.0.0 - devlop: 1.1.0 - hastscript: 8.0.0 - property-information: 6.3.0 - vfile: 6.0.1 - vfile-location: 5.0.2 - web-namespaces: 2.0.1 - dev: false - - /hast-util-is-element@3.0.0: - resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} - dependencies: - '@types/hast': 3.0.4 - dev: false - /hast-util-parse-selector@3.1.1: resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==} dependencies: '@types/hast': 2.3.6 dev: false - /hast-util-parse-selector@4.0.0: - resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} - dependencies: - '@types/hast': 3.0.4 - dev: false - /hast-util-raw@7.2.3: resolution: {integrity: sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==} dependencies: @@ -2698,21 +2250,6 @@ packages: zwitch: 2.0.4 dev: false - /hast-util-to-string@3.0.0: - resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==} - dependencies: - '@types/hast': 3.0.4 - dev: true - - /hast-util-to-text@4.0.0: - resolution: {integrity: sha512-EWiE1FSArNBPUo1cKWtzqgnuRQwEeQbQtnFJRYV1hb1BWDgrAlBU0ExptvZMM/KSA82cDpm2sFGf3Dmc5Mza3w==} - dependencies: - '@types/hast': 3.0.4 - '@types/unist': 3.0.0 - hast-util-is-element: 3.0.0 - unist-util-find-after: 5.0.0 - dev: false - /hast-util-whitespace@2.0.1: resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} dev: false @@ -2727,20 +2264,6 @@ packages: space-separated-tokens: 2.0.2 dev: false - /hastscript@8.0.0: - resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} - dependencies: - '@types/hast': 3.0.4 - comma-separated-tokens: 2.0.3 - hast-util-parse-selector: 4.0.0 - property-information: 6.3.0 - space-separated-tokens: 2.0.2 - dev: false - - /heap@0.2.7: - resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==} - dev: false - /html-entities@2.3.3: resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} dev: false @@ -2781,13 +2304,6 @@ packages: safer-buffer: 2.1.2 dev: false - /iconv-lite@0.6.3: - resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} - engines: {node: '>=0.10.0'} - dependencies: - safer-buffer: 2.1.2 - dev: false - /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: false @@ -2808,15 +2324,6 @@ packages: resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==} dev: false - /internmap@1.0.1: - resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==} - dev: false - - /internmap@2.0.3: - resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} - engines: {node: '>=12'} - dev: false - /is-alphabetical@2.0.1: resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} dev: false @@ -2907,6 +2414,7 @@ packages: /is-plain-obj@4.1.0: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} + dev: false /is-reference@3.0.2: resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} @@ -2979,10 +2487,6 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: false - /khroma@2.1.0: - resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==} - dev: false - /kind-of@6.0.3: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} engines: {node: '>=0.10.0'} @@ -2998,14 +2502,6 @@ packages: engines: {node: '>=6'} dev: false - /layout-base@1.0.2: - resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} - dev: false - - /layout-base@2.0.1: - resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==} - dev: false - /load-yaml-file@0.2.0: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} @@ -3030,10 +2526,6 @@ packages: p-locate: 5.0.0 dev: false - /lodash-es@4.17.21: - resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} - dev: false - /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} dev: false @@ -3042,10 +2534,6 @@ packages: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: false - /lodash@4.17.21: - resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - dev: false - /log-symbols@5.1.0: resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==} engines: {node: '>=12'} @@ -3313,43 +2801,6 @@ packages: engines: {node: '>= 8'} dev: false - /mermaid-isomorphic@2.1.1: - resolution: {integrity: sha512-iShQaYYfGYakKs6fbwVjaTAaTVYm02aIvq8QZJFZMEJ18it2YMhW7QF23jLc1SgXHfVLbeWVoQ27jar2X8KP9g==} - dependencies: - '@fortawesome/fontawesome-free': 6.5.1 - mermaid: 10.7.0 - playwright-core: 1.41.1 - transitivePeerDependencies: - - supports-color - dev: false - - /mermaid@10.7.0: - resolution: {integrity: sha512-PsvGupPCkN1vemAAjScyw4pw34p4/0dZkSrqvAB26hUvJulOWGIwt35FZWmT9wPIi4r0QLa5X0PB4YLIGn0/YQ==} - dependencies: - '@braintree/sanitize-url': 6.0.4 - '@types/d3-scale': 4.0.8 - '@types/d3-scale-chromatic': 3.0.3 - cytoscape: 3.28.1 - cytoscape-cose-bilkent: 4.1.0(cytoscape@3.28.1) - cytoscape-fcose: 2.2.0(cytoscape@3.28.1) - d3: 7.8.5 - d3-sankey: 0.12.3 - dagre-d3-es: 7.0.10 - dayjs: 1.11.10 - dompurify: 3.0.8 - elkjs: 0.9.1 - khroma: 2.1.0 - lodash-es: 4.17.21 - mdast-util-from-markdown: 1.3.1 - non-layered-tidy-tree-layout: 2.0.2 - stylis: 4.3.1 - ts-dedent: 2.2.0 - uuid: 9.0.1 - web-worker: 1.3.0 - transitivePeerDependencies: - - supports-color - dev: false - /micromark-core-commonmark@1.1.0: resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==} dependencies: @@ -3713,11 +3164,6 @@ packages: engines: {node: '>=10'} dev: false - /mini-svg-data-uri@1.4.4: - resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} - hasBin: true - dev: false - /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: false @@ -3796,10 +3242,6 @@ packages: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} dev: false - /non-layered-tidy-tree-layout@2.0.2: - resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==} - dev: false - /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} @@ -3912,12 +3354,6 @@ packages: resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} dev: false - /parse5@7.1.2: - resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} - dependencies: - entities: 4.5.0 - dev: false - /path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -3970,12 +3406,6 @@ packages: find-up: 4.1.0 dev: false - /playwright-core@1.41.1: - resolution: {integrity: sha512-/KPO5DzXSMlxSX77wy+HihKGOunh3hqndhqeo/nMxfigiKzogn8kfL0ZBDu0L1RKgan5XHCPmn6zXd2NUJgjhg==} - engines: {node: '>=16'} - hasBin: true - dev: false - /postcss@8.4.31: resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} engines: {node: ^10 || ^12 || >=14} @@ -4095,22 +3525,6 @@ packages: picomatch: 2.3.1 dev: false - /rehype-mermaid@2.1.0: - resolution: {integrity: sha512-YgzHXaUTzp+loffUvAoX+vtNNl36WL12GWYv4farPeW9GRFfYdgNg15O/3nADAW/Yh5/997Vv+0WaWOJ24/YSg==} - dependencies: - '@types/hast': 3.0.4 - hast-util-from-html-isomorphic: 2.0.0 - hast-util-to-text: 4.0.0 - mermaid-isomorphic: 2.1.1 - mini-svg-data-uri: 1.4.4 - space-separated-tokens: 2.0.2 - unified: 11.0.3 - unist-util-visit-parents: 6.0.1 - vfile: 6.0.1 - transitivePeerDependencies: - - supports-color - dev: false - /rehype-parse@8.0.5: resolution: {integrity: sha512-Ds3RglaY/+clEX2U2mHflt7NlMA72KspZ0JLUJgBBLpRddBcEw3H8uYZQliQriku22NZpYMfjDdSgHcjxue24A==} dependencies: @@ -4267,10 +3681,6 @@ packages: engines: {iojs: '>=1.0.0', node: '>=0.10.0'} dev: false - /robust-predicates@3.0.2: - resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==} - dev: false - /rollup@3.29.4: resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==} engines: {node: '>=14.18.0', npm: '>=8.0.0'} @@ -4285,10 +3695,6 @@ packages: queue-microtask: 1.2.3 dev: false - /rw@1.3.3: - resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} - dev: false - /s.color@0.0.15: resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==} @@ -4382,12 +3788,6 @@ packages: vscode-textmate: 8.0.0 dev: false - /shiki@1.0.0-beta.2: - resolution: {integrity: sha512-hPJcD6F5BRp2yfeBcERqQIVeEPjE2g+r5MVq/tonz2SxT6o79e84Y9iW+a5TyGXWtXAKiW5jd4lGevJ4yIUixA==} - dependencies: - '@shikijs/core': 1.0.0-beta.2 - dev: true - /signal-exit@3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} dev: false @@ -4587,10 +3987,6 @@ packages: inline-style-parser: 0.1.1 dev: false - /stylis@4.3.1: - resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} - dev: false - /suf-log@2.5.3: resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==} dependencies: @@ -4666,10 +4062,6 @@ packages: /trough@2.1.0: resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==} - - /ts-dedent@2.2.0: - resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} - engines: {node: '>=6.10'} dev: false /tsconfig-resolver@3.0.1: @@ -4752,25 +4144,6 @@ packages: vfile: 6.0.1 dev: false - /unified@11.0.4: - resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==} - dependencies: - '@types/unist': 3.0.0 - bail: 2.0.2 - devlop: 1.1.0 - extend: 3.0.2 - is-plain-obj: 4.1.0 - trough: 2.1.0 - vfile: 6.0.1 - dev: true - - /unist-util-find-after@5.0.0: - resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==} - dependencies: - '@types/unist': 3.0.0 - unist-util-is: 6.0.0 - dev: false - /unist-util-generated@2.0.1: resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==} dev: false @@ -4785,6 +4158,7 @@ packages: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} dependencies: '@types/unist': 3.0.0 + dev: false /unist-util-modify-children@3.1.1: resolution: {integrity: sha512-yXi4Lm+TG5VG+qvokP6tpnk+r1EPwyYL04JWDxLvgvPV40jANh7nm3udk65OOWquvbMDe+PL9+LmkxDpTv/7BA==} @@ -4812,13 +4186,6 @@ packages: unist-util-visit: 4.1.2 dev: false - /unist-util-remove-position@5.0.0: - resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==} - dependencies: - '@types/unist': 3.0.0 - unist-util-visit: 5.0.0 - dev: false - /unist-util-stringify-position@3.0.3: resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} dependencies: @@ -4829,6 +4196,7 @@ packages: resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} dependencies: '@types/unist': 3.0.0 + dev: false /unist-util-visit-children@2.0.2: resolution: {integrity: sha512-+LWpMFqyUwLGpsQxpumsQ9o9DG2VGLFrpz+rpVXYIEdPy57GSy5HioC0g3bg/8WP9oCLlapQtklOzQ8uLS496Q==} @@ -4848,6 +4216,7 @@ packages: dependencies: '@types/unist': 3.0.0 unist-util-is: 6.0.0 + dev: false /unist-util-visit@4.1.2: resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} @@ -4863,6 +4232,7 @@ packages: '@types/unist': 3.0.0 unist-util-is: 6.0.0 unist-util-visit-parents: 6.0.1 + dev: false /update-browserslist-db@1.0.13(browserslist@4.22.1): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} @@ -4879,11 +4249,6 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: false - /uuid@9.0.1: - resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} - hasBin: true - dev: false - /uvu@0.5.6: resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==} engines: {node: '>=8'} @@ -4906,13 +4271,6 @@ packages: vfile: 5.3.7 dev: false - /vfile-location@5.0.2: - resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==} - dependencies: - '@types/unist': 3.0.0 - vfile: 6.0.1 - dev: false - /vfile-message@3.1.4: resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==} dependencies: @@ -4925,6 +4283,7 @@ packages: dependencies: '@types/unist': 3.0.0 unist-util-stringify-position: 4.0.0 + dev: false /vfile@5.3.7: resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==} @@ -4941,6 +4300,7 @@ packages: '@types/unist': 3.0.0 unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 + dev: false /vite-plugin-solid@2.7.0(solid-js@1.7.7)(vite@4.4.10): resolution: {integrity: sha512-avp/Jl5zOp/Itfo67xtDB2O61U7idviaIp4mLsjhCa13PjKNasz+IID0jYTyqUp9SFx6/PmBr6v4KgDppqompg==} @@ -5175,10 +4535,6 @@ packages: resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} dev: false - /web-worker@1.3.0: - resolution: {integrity: sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==} - dev: false - /which-pm-runs@1.1.0: resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==} engines: {node: '>=4'} diff --git a/src/components/themeManager/loadTheme.astro b/src/components/themeManager/loadTheme.astro index 3182f52..9641fd6 100644 --- a/src/components/themeManager/loadTheme.astro +++ b/src/components/themeManager/loadTheme.astro @@ -1,35 +1,42 @@ --- // Get localStorage themeVars string, and set it as the CSS variables --- + - diff --git a/src/content/blog/sample-blog/index.mdx b/src/content/blog/sample-blog/index.mdx index d82a722..549d892 100644 --- a/src/content/blog/sample-blog/index.mdx +++ b/src/content/blog/sample-blog/index.mdx @@ -207,13 +207,10 @@ graph TD; C-->D; ``` -A Table +import TestSvg from "./test-svg.svg"; + + -| Syntax | Description | Test Text | -| ----------- | ----------- | ----------- | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Table | Data | Here's this | ## Tasks and lists diff --git a/src/content/blog/sample-blog/test-svg.svg b/src/content/blog/sample-blog/test-svg.svg new file mode 100644 index 0000000..e78ea53 --- /dev/null +++ b/src/content/blog/sample-blog/test-svg.svg @@ -0,0 +1,21 @@ + + + + + + + + Theme ManagerPaletteVariablesStyles diff --git a/src/content/blog/themescura/introducing-themescura.mdx b/src/content/blog/themescura/introducing-themescura.mdx index c06a96a..f291712 100644 --- a/src/content/blog/themescura/introducing-themescura.mdx +++ b/src/content/blog/themescura/introducing-themescura.mdx @@ -11,7 +11,7 @@ hidden: true You can try out themescura from the popup at the bottom right corner, or visit the [customize](/customize) page of this website for the [Guide](/customize#guide) and [Showcase](/customize#theme-showcase). -Before reading the post, try to customize the look so that it matches your tastes. Remember, this post is only as beautiful as you can make it. +Before reading the post, try to customize the look so that it matches your tastes. Remember, this post is only as beautiful as you can make it. Which of course by extension applies to this entire site. # What it does @@ -27,17 +27,50 @@ Themescura takes a palette of initial variables and generates a set of CSS varia # Motivation +During the past few years developing frontends for websites and webapps, I noticed repeating several basic steps again and again to iterate and maintain the styles and themes. And from the learnings I devised a few guidelines for myself to manage the complexities. And after testing out and implementing the system in different places, I feel confident to present a first draft. + +When asked why? I could take the easy way and answer Why not? But that would be dishonest. + +The current philosophy of software design and development goes something like this: + +The UX and Design folks determine the ideal layout and UX for the application, the brand styles if exist are used or new styles are developed and finally the Frontend is tasked with implementing the design. + + With a single style you can only make a website look one way. -Humans are not uni-themed. -There is no perfect theme. + +The current customization abilities of software are limited to: +1. Dark/Light Mode +2. Primary Color Customization +3. Few customizable Colors +4. Browser based customizations via extensions + - Stylus + - Arc + +The current tools available for designing/iterating a theme include: + +1. Isolated design tools such as Color Palette pickers, font pickers, font scale makers, etc etc. +2. Variables in Figma and such, but iterating over those requires expertise in the relatively new Figma features and money (Multiple themes and styles require pro plans, I am sorry but I am poor) +3. Tools specific to frameworks, such as tailwind palette generators, bootstrap/etc themes. + +Humans are not uni-themed. We don't have a single static preference. We change our opinions and tastes often. There may be strong standing takes, but the minor details of most of our preferences remain in constant flux. + +There is no perfect theme. Long ago, I used to assume that there existed this elusive "one theme", that once found could be used for everything and no changes to themes would be needed. + +But there is no perfect theme. To assure you, assume that you do have a perfect theme. Then everyone should use that theme, and once everyone uses that theme, then what is even the point of a theme? Everything looks somewhat the same. Bland, white and sans-serifed, filled with adds and generic flat illustrations. Customization has been hard ever since. Could making it easier/more accessible change the way frontend and software is perceived? -For a sense of control. +Most tech folks that I talk to shy away from design/frontend for they assume they don't get it. But I suspect it is more because the tools to iterate and check whether something designed was "right"/"wrong" are very slow. The feedback mechanism is a snail. + +Moreover, it seems there is a perception that for a thing to look good it has to be handed over to a designer, who will pick the perfect layout, fonts, colors etc to make it look good. + +Honestly though, how many tools need a "different" brand image to be useful? And does it make sense shoving the "uniqueness" down the throats of end users who are fed up (I hope) of the extremely fast evolution of modern web/app design. -Every website should be customizable. +For a sense of control. Giving options gives control. I feel more confident using a piece of software the more I feel that I am in control of it. + +Every website should be customizable. This one is a personal dream. And by every website I mean every-fucking-website. The problems with current customization. @@ -46,6 +79,7 @@ A person who: - Doesn't know the details of typography - But can still determine by looking at something whether the font/colors make sense +So that I can automate the way I design themes. I have designed several websites and applications and I have found that I can create the themes/styles/brand by defining the base parameters and then how everything else is defined related to them. Similar to how palette is used to define the theme. # How it works @@ -53,3 +87,218 @@ A person who: Where AI Unfortunately, to the disappointment of several, there is no AI underneath. + +Everything starts with the palette: + +```ts +const defaultPaletteColors = { + primary: '#ff0000', + secondary: '#ffff00', + + background: '#000000', + surface: '#222', + text: '#ffffff', +} + +type PaletteColors = typeof defaultPaletteColors + +const defaultBasePalette = { + border: { + radius: '0.2rem', + }, + + font: { + family: 'Jost', + size: fontSizes, + }, +} + +type BasePalette = typeof defaultBasePalette + +export interface ThemePalette { + name: string; + id: string; + base: BasePalette; + vars: { + light: PaletteColors; + dark: PaletteColors; + } +} +``` + +The palette is used to generate the colors: + +```ts + +const generateModeVarsFromPaletteColors = (palette: PaletteColors): ThemeVars => { + + // verify if theme is dark or light by + // checking if background is dark or light + const isDark = tinycolor(palette.background).isDark() + + // the color between surface and background (middle earth) + const midErth = tinycolor.mix(palette.surface, palette.background, 50).toString() + + return { + primary: { + color: palette.primary, + // For now, between black and white depending on primary color + // This is used to set the color of the text over the surfaces with primary background + contrast: tinycolor(palette.primary).isDark() + ? '#ffffff' + : '#000000', + }, + secondary: { color: palette.secondary, }, // Duh + colors: { purple: palette.primary, /* More could be added */ }, + background: palette.background, + surface: palette.surface, + border: { + style: 'solid', + // Border color is between text and midErth + color: tinycolor.mix(palette.text, midErth, 80).toString() + }, + + text: palette.text, + heading: + tinycolor(palette.text)[isDark ? 'brighten' : 'darken']().toString(), + + + // Fade with midErth + fadeText: tinycolor.mix(palette.text, midErth, 30).toString(), + cardShadow: `0 1rem 2rem 0 rgba(0, 0, 0, ${isDark ? 0.6 : 0.2})`, + + // We can use these inside new vars + card: { + // The controls for the cards would be implemented later + border: '2px dashed var(--border-color)', + background: 'linear-gradient(-45deg, var(--background), var(--background), var(--surface))', + backgroundPosition: '90% 0', + backgroundSize: '200%', + borderHover: '2px solid var(--border-color)', + backgroundPositionHover: '10% 20%', + }, + + // For now we use the primary color, less noise + bold: palette.primary, + italic: palette.primary, + strikethrough: palette.primary, + + // Variables for variables. + gradient: { + 'color-1': 'var(--primary-color)', + 'color-2': 'var(--colors-purple)', + }, + 'animated-gradient': 'linear-gradient(-60deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-1), var(--secondary-color), var(--gradient-color-1), var(--gradient-color-2))' + } +} + + +export const generateThemeFromPalette = (palette: ThemePalette): UITheme => { + const theme: UITheme = { + id: palette.id, + name: palette.name, + base: { + layout, + ...palette.base, + }, + vars: { + light: generateModeVarsFromPaletteColors(palette.vars.light), + dark: generateModeVarsFromPaletteColors(palette.vars.dark), + } + } + + return theme +} +``` + +Note that the structure of the function could be anything, we can generate a lot of css variables dependent on each other, spacings, border radius, etc. We could have several naming schemes for a list of variables for example: _1. TShirt sizes_ (sm, md, base/regular, lg, xl, xxl ...) _2. Numeric_ (1,2,3) (100-200-900), and different scaling mechanisms: _1. Linear_ (2, 4, 6, 8, 10) _2. Geometric_ (2, 4, 8, 16, 32) etc. + +The generated theme object consists of the set of css variables and their values in the nested object. + +We could use this theme object directly to theme our css if we were using css in js, however, every time we change this object, the styles have to then be regenerated for every change. A better way would be to have a theme object that had instead of values, just "pointers" to the changing variables. Which are CSS Variables. + +So instead of using the generated theme with direct values we use another generated object that instead of having the values, we have css variables that will have those values. + +We separate the structure and the theme's values so we can change the values, and only care about it's structure during usage. The generated css variables are inserted in a single style tag and are applied to the root. + + + +Nested themes can also be declared in between via setting the variables on the parent element that will nest the objects that require the custom theme. An example of using different themes in children can be found in the examples shared in [Dark Modes](/blag/posts/dark-modes) blog post. + + + +## Apply and Edit + +It should be obvious that we should not load the theme editor every single time for every single page. + +We separate the code that is needed for applying the theme and for editing the theme. + +The application of the theme on page load happens by very small JS script: + +```js +const themeCss = localStorage.getItem('xypnoxCssTheme'); +let style = document.getElementById('_themeVars'); + +if (style && themeCss) { + const themeString = JSON.parse(themeCss); + // Insert the theme variables if they exist in localstorage + if (themeString) style.innerHTML = `:root { ${themeString} }`; +} + +const themes = localStorage.getItem('xypnox-themes'); +const themeConfig = localStorage.getItem('xypnox-themeConfig'); + +if (themes && themeConfig) { + const themesPalette = JSON.parse(themes); + const themeConfigPalette = JSON.parse(themeConfig); + // find theme from config in palettes + const theme = themesPalette.find((theme) => theme.id === themeConfigPalette.theme); + const fontFamily = theme.base.font.family; + // console.log({ theme, fontFamily }); + + const getFirstFont = (style/* string */) => { + const font = style.split(',')[0]; + return font.replace(/"/g, ''); + } + // Insert font family link to load the theme font from google fonts + const link = document.createElement('link'); + link.href = `https://fonts.googleapis.com/css2?family=${getFirstFont(fontFamily)}:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap`; + link.rel = 'stylesheet'; + link.classList.add('_fontFamily'); + document.head.appendChild(link); +} +``` + +The editor is written with SolidJS to piggyback on the reactive system. The reactive state is replicated in localstorage and thus can be set and then used by the applying script. + + + +# What can be improved + +A lot honestly. + +There could be separate font families for different portions of the website, for example, a heading font and a post content font family. + +Although typescript helps a lot as the theme gets typed, using css variables by hand results in hard to maintain code, which could be improved by improving the developer tooling. + +There could be checks to ensure contrast ratios for the text and background and surface colors. + +There could be more intuitive controls in the form of contrast, saturation and tint etc instead of the five colors only. + +There could be component specific styles defined in the generated theme as well. + +The icons are fixed for now and it is hard to have a 1:1 icon pack replacements like we have 1:1 font replacements for most alphanumeric characters. + +The themes could be pooled in a shared "registry", allowing people to share the themes with each other. (The current size of the palette is short enough to be shared just by copy pasting it's JSON). + +User defined preferences/palette could be shared across websites, so the user could theme multiple websites using their preferred palette of colors and fonts. + +More importantly there could be a representation of the theme generation step: how the palette effects the generated variables. Preferably in the form of a node graph editor instead of scripting it in code. + + +# What changes + +The idea that a website's theme is static. The idea that user facing customization is hard. The idea that to allow customization we need to save the themes/preferences on the server. + + + diff --git a/src/theme.ts b/src/theme.ts index 5034cf5..ad3172a 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -151,9 +151,6 @@ export const modeVars = { colors: { purple: '#6b5eff', - dev: '#63f6ff', - design: '#ff5370', - literature: '#72ff80', }, background: '#0f111a', @@ -247,9 +244,6 @@ const lightTheme: ThemeVars = { colors: { purple: '#569867', - dev: '#008a93', - design: '#ac1a65', - literature: '#0e7718', }, background: '#d7d7ea', @@ -302,9 +296,6 @@ const BrutalistTheme: UITheme = { colors: { purple: '#2080ff', - dev: '#444', - design: '#444', - literature: '#444', }, background: '#f0f0f0', @@ -390,6 +381,30 @@ const defaultPaletteColors = { type PaletteColors = typeof defaultPaletteColors +const defaultBasePalette = { + border: { + radius: '0.2rem', + }, + + font: { + family: 'Jost', + size: fontSizes, + }, +} + +type BasePalette = typeof defaultBasePalette + +export interface ThemePalette { + name: string; + id: string; + base: BasePalette; + vars: { + light: PaletteColors; + dark: PaletteColors; + } +} + + export const defaultThemePalette = { name: 'Aster', id: 'default_aster', @@ -455,7 +470,6 @@ const brutalistPalette: ThemePalette = { }, } } -export type ThemePalette = typeof defaultThemePalette export const defaultPalettes: ThemePalette[] = [ defaultThemePalette, @@ -466,41 +480,42 @@ const generateModeVarsFromPaletteColors = (palette: PaletteColors): ThemeVars => // verify if theme is dark or light by // checking if background is dark or light - // and if text is dark or light const isDark = tinycolor(palette.background).isDark() - const betweenSurfaceAndBackground = tinycolor.mix(palette.surface, palette.background, 50).toString() + // the color between surface and background (middle earth) + const midErth = tinycolor.mix(palette.surface, palette.background, 50).toString() return { primary: { color: palette.primary, - contrast: tinycolor(palette.primary).isDark() ? '#ffffff' : '#000000', - }, - secondary: { - color: palette.secondary, - }, - colors: { - purple: palette.primary, - dev: tinycolor(palette.primary).spin(60).toString(), - design: tinycolor(palette.primary).spin(120).toString(), - literature: tinycolor(palette.primary).spin(180).toString(), + // For now, between black and white depending on primary color + // This is used to set the color of the text over the surfaces with primary background + contrast: tinycolor(palette.primary).isDark() + ? '#ffffff' + : '#000000', }, + secondary: { color: palette.secondary, }, // Duh + colors: { purple: palette.primary, /* More could be added */ }, background: palette.background, surface: palette.surface, border: { style: 'solid', - // Border color is between text and surface - color: tinycolor.mix(palette.text, betweenSurfaceAndBackground, 80).toString() + // Border color is between text and midErth + color: tinycolor.mix(palette.text, midErth, 80).toString() }, - // brightten if dark, darken if light - heading: isDark ? - tinycolor(palette.text).brighten().toString() : - tinycolor(palette.text).darken().toString(), + text: palette.text, - fadeText: tinycolor.mix(palette.text, betweenSurfaceAndBackground, 30).toString(), - cardShadow: `0 6px 12px 0 rgba(0, 0, 0, ${isDark ? 0.6 : 0.2})`, + heading: + tinycolor(palette.text)[isDark ? 'brighten' : 'darken']().toString(), + + // Fade with midErth + fadeText: tinycolor.mix(palette.text, midErth, 30).toString(), + cardShadow: `0 1rem 2rem 0 rgba(0, 0, 0, ${isDark ? 0.6 : 0.2})`, + + // We can use these inside new vars card: { + // The controls for the cards would be implemented later border: '2px dashed var(--border-color)', background: 'linear-gradient(-45deg, var(--background), var(--background), var(--surface))', backgroundPosition: '90% 0', @@ -509,15 +524,16 @@ const generateModeVarsFromPaletteColors = (palette: PaletteColors): ThemeVars => backgroundPositionHover: '10% 20%', }, + // For now we use the primary color, less noise bold: palette.primary, italic: palette.primary, strikethrough: palette.primary, + // Variables for variables. gradient: { 'color-1': 'var(--primary-color)', 'color-2': 'var(--colors-purple)', }, - 'animated-gradient': 'linear-gradient(-60deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-1), var(--secondary-color), var(--gradient-color-1), var(--gradient-color-2))' } }