feat: add shiki library to libs.json and remove unused shiki source file; update body color in SCSS

core/js/src/shiki.ts

@@ -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<HTMLElement>(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<HTMLElement>('[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<string>(['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)
-}

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'

core/libs.json

@@ -160,6 +160,12 @@
       "index.global.min.js"
     ]
   },
+  "shiki": {
+    "npm": "shiki",
+    "js": [
+      "dist/bundle-web.mjs"
+    ]
+  },
   "turbo": {
     "npm": "@hotwired/turbo",
     "js": [

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;

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'] {