diff --git a/core/js/src/shiki.ts b/core/js/src/shiki.ts deleted file mode 100644 index 092d3de72..000000000 --- a/core/js/src/shiki.ts +++ /dev/null @@ -1,84 +0,0 @@ -type ShikiHighlighter = { - codeToHtml: (code: string, options: { lang: string; theme: string }) => string -} - -const shikiSelector = 'pre code[class*="language-"], pre code[data-language]' -const shikiCodeBlocks = Array.from(document.querySelectorAll(shikiSelector)) - -const getShikiLanguage = (codeBlock: HTMLElement): string => { - const dataLanguage = codeBlock.dataset.language - if (dataLanguage) { - return dataLanguage - } - - const languageClass = Array.from(codeBlock.classList).find((className) => className.startsWith('language-')) - return languageClass ? languageClass.replace('language-', '') : 'text' -} - -const getShikiTheme = (codeBlock: HTMLElement): string => { - return codeBlock.dataset.shikiTheme || codeBlock.closest('[data-shiki-theme]')?.dataset.shikiTheme || 'github-dark' -} - -const getShikiBlocksToHighlight = (codeBlocks: HTMLElement[]): HTMLElement[] => { - return codeBlocks.filter((codeBlock) => { - const pre = codeBlock.closest('pre') - return pre && !pre.classList.contains('shiki') && pre.dataset.shikiProcessed !== 'true' - }) -} - -const highlightShikiBlocks = async (codeBlocks: HTMLElement[]) => { - if (!codeBlocks.length) { - return - } - - const languages = new Set(['text']) - - codeBlocks.forEach((codeBlock) => { - languages.add(getShikiLanguage(codeBlock)) - }) - - const { createHighlighter, createCssVariablesTheme } = await import('shiki') - - const theme = createCssVariablesTheme({ - name: 'css-variables', - variablePrefix: '--shiki-', - variableDefaults: {}, - fontStyle: true - }) - - const highlighter = (await createHighlighter({ - langs: Array.from(languages).filter(Boolean), - themes: [theme], - })) as ShikiHighlighter - - codeBlocks.forEach((codeBlock) => { - const pre = codeBlock.closest('pre') - if (!pre || pre.dataset.shikiProcessed === 'true') { - return - } - - const language = getShikiLanguage(codeBlock) - const code = codeBlock.textContent || '' - - let highlightedHtml = '' - try { - highlightedHtml = highlighter.codeToHtml(code, { lang: language, theme: 'css-variables' }) - } catch (error) { - highlightedHtml = highlighter.codeToHtml(code, { lang: 'text', theme: 'css-variables' }) - } - - const wrapper = document.createElement('div') - wrapper.innerHTML = highlightedHtml - const highlightedPre = wrapper.firstElementChild - - if (highlightedPre) { - pre.dataset.shikiProcessed = 'true' - pre.replaceWith(highlightedPre) - } - }) -} - -const shikiBlocksToHighlight = getShikiBlocksToHighlight(shikiCodeBlocks) -if (shikiBlocksToHighlight.length) { - void highlightShikiBlocks(shikiBlocksToHighlight) -} diff --git a/core/js/tabler.ts b/core/js/tabler.ts index 5a72fce00..1ddc24a76 100644 --- a/core/js/tabler.ts +++ b/core/js/tabler.ts @@ -8,7 +8,6 @@ import './src/switch-icon' import './src/tab' import './src/toast' import './src/sortable' -import './src/shiki' // Re-export everything from bootstrap.ts (single source of truth) export * from './src/bootstrap' diff --git a/core/libs.json b/core/libs.json index e9fe1cc5b..171d8ae36 100644 --- a/core/libs.json +++ b/core/libs.json @@ -160,6 +160,12 @@ "index.global.min.js" ] }, + "shiki": { + "npm": "shiki", + "js": [ + "dist/bundle-web.mjs" + ] + }, "turbo": { "npm": "@hotwired/turbo", "js": [ diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index ab8ada47e..33eb77c8a 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -367,7 +367,7 @@ $negative-spacers: null !default; // Body $body-text-align: null !default; -$body-color: $gray-900 !default; +$body-color: $gray-600 !default; $body-bg: $white !default; $body-secondary-color: rgba($body-color, 0.75) !default; diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss index f16e16f29..3eabbdd15 100644 --- a/core/scss/tabler-themes.scss +++ b/core/scss/tabler-themes.scss @@ -15,17 +15,17 @@ } [data-bs-theme-base='gray'] { - --#{$prefix}gray-50: $gray-50; - --#{$prefix}gray-100: $gray-100; - --#{$prefix}gray-200: $gray-200; - --#{$prefix}gray-300: $gray-300; - --#{$prefix}gray-400: $gray-400; - --#{$prefix}gray-500: $gray-500; - --#{$prefix}gray-600: $gray-600; - --#{$prefix}gray-700: $gray-700; - --#{$prefix}gray-800: $gray-800; - --#{$prefix}gray-900: $gray-900; - --#{$prefix}gray-950: $gray-950; + --#{$prefix}gray-50: #{$gray-50}; + --#{$prefix}gray-100: #{$gray-100}; + --#{$prefix}gray-200: #{$gray-200}; + --#{$prefix}gray-300: #{$gray-300}; + --#{$prefix}gray-400: #{$gray-400}; + --#{$prefix}gray-500: #{$gray-500}; + --#{$prefix}gray-600: #{$gray-600}; + --#{$prefix}gray-700: #{$gray-700}; + --#{$prefix}gray-800: #{$gray-800}; + --#{$prefix}gray-900: #{$gray-900}; + --#{$prefix}gray-950: #{$gray-950}; } [data-bs-theme-base='zinc'] {