@mantine/code-highlight 7.3.0-alpha.1 → 7.3.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/code-highlight",
-  "version": "7.3.0-alpha.1",
+  "version": "7.3.0-alpha.2",
   "description": "Code highlight with Mantine theme",
   "homepage": "https://mantine.dev/others/prism/",
   "license": "MIT",
@@ -36,17 +36,17 @@
         "default": "./cjs/index.cjs"
       }
     },
-    "./styles.css": "./esm/index.css",
-    "./styles.layer.css": "./esm/index.layer.css"
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
   },
   "repository": {
     "url": "https://github.com/mantinedev/mantine.git",
     "type": "git",
-    "directory": "src/mantine-prism"
+    "directory": "packages/@mantine/code-highlight"
   },
   "peerDependencies": {
-    "@mantine/core": "7.3.0-alpha.1",
-    "@mantine/hooks": "7.3.0-alpha.1",
+    "@mantine/core": "7.3.0-alpha.2",
+    "@mantine/hooks": "7.3.0-alpha.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -55,8 +55,8 @@
     "highlight.js": "^11.9.0"
   },
   "devDependencies": {
-    "@mantine/core": "7.3.0-alpha.1",
-    "@mantine/hooks": "7.3.0-alpha.1",
-    "@tests/core": "1.0.0"
+    "@mantine-tests/core": "1.0.1",
+    "@mantine/core": "7.3.0-alpha.2",
+    "@mantine/hooks": "7.3.0-alpha.2"
   }
 }

package/esm/index.css

@@ -1 +0,0 @@
-.m-5caae6d3{border-radius:var(--mantine-radius-xs);display:inline-block;font-family:var(--mantine-font-family-monospace);font-size:calc(.8125rem*var(--mantine-scale));line-height:var(--_code-line-height,var(--mantine-line-height));padding:calc(.0625rem*var(--mantine-scale)) calc(.1875rem*var(--mantine-scale))}.m-2c47c4fd{--_code-line-height:1.7;display:block;margin:0;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-e58679f3{align-items:flex-start;display:flex;justify-content:space-between}.m-be7e9c9c{display:flex;margin-right:calc(.4375rem*var(--mantine-scale));margin-top:calc(.4375rem*var(--mantine-scale))}.m-5caae85b,.m-d498bab7{background-color:transparent;color:var(--mantine-color-dimmed);margin:0;opacity:.8}@media (hover:hover){.m-5caae85b:hover,.m-d498bab7:hover{opacity:1}}@media (hover:none){.m-5caae85b:active,.m-d498bab7:active{opacity:1}}@media (max-width:40em){.m-5caae85b,.m-d498bab7{display:none}}.m-5caae85b{position:absolute;right:calc(.3125rem*var(--mantine-scale));top:calc(.3125rem*var(--mantine-scale));z-index:1}.m-5cac2e62{align-items:center;background-color:var(--_file-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_file-bd);border-left:0;border-top:0;color:var(--_file-color);cursor:var(--_file-cursor);display:flex;font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);font-weight:700;gap:calc(.4375rem*var(--mantine-scale));justify-content:center;line-height:1;margin:0;opacity:var(--_file-opacity);padding:calc(.4375rem*var(--mantine-scale)) calc(.75rem*var(--mantine-scale));user-select:none;white-space:nowrap}@media (hover:hover){.m-5cac2e62:hover{--_file-opacity:1}}@media (hover:none){.m-5cac2e62:active{--_file-opacity:1}}.m-5cac2e62:last-of-type{border-bottom-right-radius:var(--mantine-radius-sm)}.m-5cac2e62:only-child{--_file-cursor:default}.m-5cac2e62[data-active]{--_file-opacity:1;--_file-color:var(--_file-active-color)!important;--_file-bg:var(--_file-active-bg)}.m-5cac2e62{--_file-opacity:0.8;--_file-cursor:pointer}[data-mantine-color-scheme=light] .m-5cac2e62{--_file-color:var(--mantine-color-gray-8);--_file-bd:var(--mantine-color-gray-2);--_file-active-bg:var(--mantine-color-white);--_file-active-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-5cac2e62{--_file-color:var(--mantine-color-dark-0);--_file-bd:var(--mantine-color-dark-4);--_file-active-bg:var(--mantine-color-dark-6);--_file-active-color:var(--mantine-color-white)}.m-38d99e51{display:flex}.m-9f507240{max-height:var(--ch-max-collapsed-height);overflow:hidden;position:relative}.m-9f507240:before{background-image:linear-gradient(0deg,var(--_background) 16%,transparent 100%);border-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));content:"";inset:0;pointer-events:none;position:absolute;z-index:100}.m-9f507240[data-expanded]{max-height:none}.m-9f507240[data-expanded]:before{display:none}.m-c9378bc2{bottom:0;color:var(--mantine-color-anchor);font-size:var(--mantine-font-size-sm);left:50%;padding-bottom:var(--mantine-spacing-xs);padding-top:var(--mantine-spacing-xs);position:absolute;text-align:center;transform:translateX(-50%);width:100%;z-index:101}.m-c9378bc2[data-hidden]{display:none}.m-5cb1b9c8{margin-top:0;position:relative}.m-5cb1b9c8[data-collapsed] .mantine-ScrollArea-viewport>div{display:block!important}.m-b46cddfb{align-items:center;display:flex;flex:0;justify-content:center}.m-b46cddfb>svg{display:block}.m-1f5e827e{background:var(--_background);color:var(--_color)}[data-mantine-color-scheme=light] .m-1f5e827e{--_color:var(--mantine-color-gray-7);--_background:var(--mantine-color-gray-0);--code-comment-color:var(--mantine-color-gray-6);--code-keyword-color:var(--mantine-color-violet-8);--code-tag-color:var(--mantine-color-red-9);--code-literal-color:var(--mantine-color-blue-6);--code-string-color:var(--mantine-color-blue-9);--code-variable-color:var(--mantine-color-lime-9);--code-class-color:var(--mantine-color-orange-9)}[data-mantine-color-scheme=dark] .m-1f5e827e{--_color:var(--mantine-color-dark-1);--_background:var(--mantine-color-dark-8);--code-comment-color:var(--mantine-color-dark-3);--code-keyword-color:var(--mantine-color-violet-3);--code-tag-color:var(--mantine-color-yellow-4);--code-literal-color:var(--mantine-color-blue-4);--code-string-color:var(--mantine-color-green-6);--code-variable-color:var(--mantine-color-blue-2);--code-class-color:var(--mantine-color-orange-5)}.m-1f5e827e .hljs-comment,.m-1f5e827e .hljs-quote{color:var(--code-comment-color);font-style:italic}.m-1f5e827e .hljs-doctag,.m-1f5e827e .hljs-formula,.m-1f5e827e .hljs-keyword{color:var(--code-keyword-color)}.m-1f5e827e .hljs-deletion,.m-1f5e827e .hljs-name,.m-1f5e827e .hljs-section,.m-1f5e827e .hljs-selector-tag,.m-1f5e827e .hljs-subst{color:var(--code-tag-color)}.m-1f5e827e .hljs-literal{color:var(--code-literal-color)}.m-1f5e827e .hljs-addition,.m-1f5e827e .hljs-attribute,.m-1f5e827e .hljs-meta .hljs-string,.m-1f5e827e .hljs-regexp,.m-1f5e827e .hljs-string{color:var(--code-string-color)}.m-1f5e827e .hljs-attr,.m-1f5e827e .hljs-number,.m-1f5e827e .hljs-selector-attr,.m-1f5e827e .hljs-selector-class,.m-1f5e827e .hljs-selector-pseudo,.m-1f5e827e .hljs-template-variable,.m-1f5e827e .hljs-type,.m-1f5e827e .hljs-variable{color:var(--code-variable-color)}.m-1f5e827e .hljs-built_in,.m-1f5e827e .hljs-bullet,.m-1f5e827e .hljs-class .hljs-title,.m-1f5e827e .hljs-link,.m-1f5e827e .hljs-meta,.m-1f5e827e .hljs-selector-id,.m-1f5e827e .hljs-symbol,.m-1f5e827e .hljs-title,.m-1f5e827e .hljs-title.class_{color:var(--code-class-color)}.m-1f5e827e .hljs-emphasis{font-style:italic}.m-1f5e827e .hljs-strong{font-weight:700}.m-1f5e827e .hljs-link{text-decoration:underline}

package/src/CodeHighlight.module.css

@@ -1,173 +0,0 @@
-.code {
-  display: inline-block;
-  padding: rem(1px) rem(3px);
-  font-size: rem(13px);
-  border-radius: var(--mantine-radius-xs);
-  line-height: var(--_code-line-height, var(--mantine-line-height));
-  font-family: var(--mantine-font-family-monospace);
-}
-
-.pre {
-  display: block;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
-  margin: 0;
-  --_code-line-height: 1.7;
-}
-
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.controls {
-  display: flex;
-  margin-top: rem(7px);
-  margin-right: rem(7px);
-}
-
-.copy,
-.control {
-  background-color: transparent;
-  opacity: 0.8;
-  margin: 0;
-  color: var(--mantine-color-dimmed);
-
-  @mixin hover {
-    opacity: 1;
-  }
-
-  @media (max-width: 40em) {
-    display: none;
-  }
-}
-
-.copy {
-  position: absolute;
-  top: rem(5px);
-  right: rem(5px);
-  z-index: 1;
-}
-
-.file {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--mantine-font-size-xs);
-  gap: rem(7px);
-  padding: rem(7px) rem(12px);
-  font-family: var(--mantine-font-family-monospace);
-  font-weight: 700;
-  line-height: 1;
-  user-select: none;
-  cursor: var(--_file-cursor);
-  border: rem(1px) solid var(--_file-bd);
-  border-top: 0;
-  border-left: 0;
-  color: var(--_file-color);
-  opacity: var(--_file-opacity);
-  background-color: var(--_file-bg);
-  white-space: nowrap;
-  margin: 0;
-
-  @mixin hover {
-    --_file-opacity: 1;
-  }
-
-  &:last-of-type {
-    border-bottom-right-radius: var(--mantine-radius-sm);
-  }
-
-  &:only-child {
-    --_file-cursor: default;
-  }
-
-  &[data-active] {
-    --_file-opacity: 1;
-    --_file-color: var(--_file-active-color) !important;
-    --_file-bg: var(--_file-active-bg);
-  }
-
-  --_file-opacity: 0.8;
-  --_file-cursor: pointer;
-
-  @mixin light {
-    --_file-color: var(--mantine-color-gray-8);
-    --_file-bd: var(--mantine-color-gray-2);
-    --_file-active-bg: var(--mantine-color-white);
-    --_file-active-color: var(--mantine-color-black);
-  }
-
-  @mixin dark {
-    --_file-color: var(--mantine-color-dark-0);
-    --_file-bd: var(--mantine-color-dark-4);
-    --_file-active-bg: var(--mantine-color-dark-6);
-    --_file-active-color: var(--mantine-color-white);
-  }
-}
-
-.files {
-  display: flex;
-}
-
-.codeWrapper {
-  max-height: var(--ch-max-collapsed-height);
-  overflow: hidden;
-  position: relative;
-
-  &::before {
-    content: '';
-    z-index: 100;
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background-image: linear-gradient(0deg, var(--_background) 16%, rgba(0, 0, 0, 0) 100%);
-    border-radius: calc(var(--mantine-radius-md) - rem(1px));
-  }
-
-  &[data-expanded] {
-    max-height: none;
-
-    &::before {
-      display: none;
-    }
-  }
-}
-
-.showCodeButton {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: var(--mantine-font-size-sm);
-  color: var(--mantine-color-anchor);
-  width: 100%;
-  text-align: center;
-  z-index: 101;
-  padding-top: var(--mantine-spacing-xs);
-  padding-bottom: var(--mantine-spacing-xs);
-
-  &[data-hidden] {
-    display: none;
-  }
-}
-
-.root {
-  margin-top: 0;
-  position: relative;
-
-  &[data-collapsed] :global(.mantine-ScrollArea-viewport > div) {
-    display: block !important;
-  }
-}
-
-.fileIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0;
-
-  & > svg {
-    display: block;
-  }
-}

package/src/CodeHighlight.story.tsx

@@ -1,273 +0,0 @@
-import React, { useState } from 'react';
-import { CodeHighlightTabs } from './CodeHighlightTabs';
-import { CodeHighlight } from './CodeHighlight';
-import { InlineCodeHighlight } from './InlineCodeHighlight';
-
-export default { title: 'CodeHighlight' };
-
-const tsxCode = `
-import { forwardRef } from 'react';
-import { Group, Avatar, Text, Select } from '@mantine/core';
-
-// Data for select
-// You can use any data structure you want
-
-const data = [
-  {
-    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
-    label: 'Bender Bending Rodríguez',
-    value: 'Bender Bending Rodríguez',
-    description: 'Fascinated with cooking',
-  },
-
-  {
-    image: 'https://img.icons8.com/clouds/256/000000/futurama-mom.png',
-    label: 'Carol Miller',
-    value: 'Carol Miller',
-    description: 'One of the richest people on Earth',
-  },
-  {
-    image: 'https://img.icons8.com/clouds/256/000000/homer-simpson.png',
-    label: 'Homer Simpson',
-    value: 'Homer Simpson',
-    description: 'Overweight, lazy, and often ignorant',
-  },
-  {
-    image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png',
-    label: 'Spongebob Squarepants',
-    value: 'Spongebob Squarepants',
-    description: 'Not just a sponge',
-  },
-];
-
-interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
-  image: string;
-  label: string;
-  description: string;
-}
-
-const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
-  ({ image, label, description, ...others }: ItemProps, ref) => (
-    <div ref={ref} {...others}>
-      <Group noWrap>
-        <Avatar src={image} />
-
-        <div>
-          <Text size="sm">{label}</Text>
-          <Text size="xs" opacity={0.65}>
-            {description}
-          </Text>
-        </div>
-      </Group>
-    </div>
-  )
-);
-
-function Demo() {
-  return (
-    <Select
-      label="Choose employee of the month"
-      placeholder="Pick one"
-      itemComponent={SelectItem}
-      data={data}
-      searchable
-      maxDropdownHeight={400}
-      nothingFound="Nobody here"
-      filter={(value, item) =>
-        item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
-        item.description.toLowerCase().includes(value.toLowerCase().trim())
-      }
-    />
-  );
-}
-`;
-
-const cssCode = `.root {
-  --ai-size-xs: rem(18px);
-  --ai-size-sm: rem(22px);
-  --ai-size-md: rem(28px);
-  --ai-size-lg: rem(34px);
-  --ai-size-xl: rem(44px);
-
-  --_bg: var(--ai-bg);
-  --_color: var(--ai-color);
-  --_cursor: pointer;
-
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  user-select: none;
-
-  width: var(--ai-size);
-  height: var(--ai-size);
-  min-width: var(--ai-size);
-  min-height: var(--ai-size);
-  border-radius: var(--ai-radius);
-  background: var(--_bg);
-  color: var(--_color);
-  border: var(--ai-bd);
-  cursor: var(--_cursor);
-
-  @mixin hover {
-    &:not([data-loading]):not(:disabled):not([data-disabled]) {
-      --_bg: var(--ai-hover);
-    }
-  }
-
-  @mixin light {
-    --_loading-overlay-bg: rgba(255, 255, 255, 0.35);
-    --_disabled-bg: var(--mantine-color-gray-1);
-    --_disabled-color: var(--mantine-color-gray-5);
-  }
-
-  @mixin dark {
-    --_loading-overlay-bg: rgba(0, 0, 0, 0.35);
-    --_disabled-bg: var(--mantine-color-dark-6);
-    --_disabled-color: var(--mantine-color-dark-3);
-  }
-
-  &[data-loading] {
-    --_cursor: not-allowed;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: rem(-1px);
-      border-radius: var(--ai-radius);
-      background-color: var(--_loading-overlay_bg);
-    }
-  }
-
-  &:disabled:not([data-loading]),
-  &[data-disabled]:not([data-loading]) {
-    --_cursor: not-allowed;
-    --_bg: var(--_disabled-bg);
-    --_color: var(--_disabled-color);
-  }
-}
-
-.loader {
-  z-index: 1;
-}
-`;
-
-function TsIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width={18} height={18} {...props}>
-      <path fill="#1976d2" d="M6 6h36v36H6z" />
-      <path
-        fill="#fff"
-        d="M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"
-      />
-    </svg>
-  );
-}
-
-function CSSIcon(props: React.ComponentProps<'svg'>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width={18} height={18} {...props}>
-      <path fill="#0277BD" d="M41 5H7l3 34 14 4 14-4 3-34z" />
-      <path fill="#039BE5" d="M24 8v31.9l11.2-3.2L37.7 8z" />
-      <path fill="#FFF" d="M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z" />
-      <path
-        fill="#EEE"
-        d="M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"
-      />
-    </svg>
-  );
-}
-
-export function Usage() {
-  return (
-    <div style={{ padding: 40 }}>
-      <CodeHighlight code={tsxCode} highlightOnClient />
-    </div>
-  );
-}
-
-export function Unstyled() {
-  return (
-    <div style={{ padding: 40 }}>
-      <CodeHighlight code={tsxCode} highlightOnClient unstyled />
-    </div>
-  );
-}
-
-export function Tabs() {
-  return (
-    <div style={{ padding: 40 }}>
-      <CodeHighlightTabs
-        code={[
-          { code: tsxCode, language: 'tsx', icon: <TsIcon />, fileName: 'Component.tsx' },
-          { code: cssCode, language: 'css', icon: <CSSIcon />, fileName: 'Component.module.css' },
-          {
-            code: cssCode,
-            language: 'css',
-            icon: <CSSIcon />,
-            fileName: 'Long-file-name-that-will-break-to-another-line.css',
-          },
-        ]}
-        defaultExpanded={false}
-      >
-        {tsxCode}
-      </CodeHighlightTabs>
-    </div>
-  );
-}
-
-export function TabsUnstyled() {
-  return (
-    <div style={{ padding: 40 }}>
-      <CodeHighlightTabs
-        unstyled
-        code={[
-          { code: tsxCode, language: 'tsx', icon: <TsIcon />, fileName: 'Component.tsx' },
-          { code: cssCode, language: 'css', icon: <CSSIcon />, fileName: 'Component.module.css' },
-          {
-            code: cssCode,
-            language: 'css',
-            icon: <CSSIcon />,
-            fileName: 'Long-file-name-that-will-break-to-another-line.css',
-          },
-        ]}
-        defaultExpanded={false}
-      >
-        {tsxCode}
-      </CodeHighlightTabs>
-    </div>
-  );
-}
-
-export function Inline() {
-  return (
-    <div style={{ padding: 40 }}>
-      <p>
-        Hello there! this is{' '}
-        <InlineCodeHighlight code="import React from 'react';" language="tsx" /> some code Lorem
-        ipsum dolor sit amet consectetur adipisicing elit. Aliquid reiciendis, facilis repudiandae
-        vero mollitia non dolorum cupiditate assumenda odio unde quaerat beatae explicabo veritatis
-        nam temporibus! Quibusdam quod enim voluptatibus?
-      </p>
-    </div>
-  );
-}
-
-export function DataChangesOverTime() {
-  const [code, setCode] = useState('a');
-  return (
-    <>
-      <button
-        type="button"
-        onClick={() => {
-          setCode((c) => (c === 'a' ? 'b' : 'a'));
-        }}
-      >
-        Toggle
-      </button>
-      <CodeHighlight code={code} />
-      {code}
-    </>
-  );
-}

package/src/CodeHighlight.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { render, tests } from '@tests/core';
-import { CodeHighlight, CodeHighlightProps, CodeHighlightStylesNames } from './CodeHighlight';
-
-const defaultProps: CodeHighlightProps = {
-  code: 'test-code',
-};
-
-describe('@mantine/code-highlight/CodeHighlight', () => {
-  tests.itSupportsSystemProps<CodeHighlightProps, CodeHighlightStylesNames>({
-    component: CodeHighlight,
-    props: defaultProps,
-    polymorphic: true,
-    styleProps: true,
-    extend: true,
-    variant: true,
-    size: true,
-    classes: true,
-    id: true,
-    refType: HTMLDivElement,
-    displayName: '@mantine/core/CodeHighlight',
-    stylesApiSelectors: ['root', 'code', 'copy', 'pre'],
-  });
-
-  it('renders copy button based on withCopyButton prop', () => {
-    const { container, rerender } = render(<CodeHighlight {...defaultProps} withCopyButton />);
-    expect(container.querySelector('.mantine-CodeHighlight-copy')).toBeInTheDocument();
-
-    rerender(<CodeHighlight {...defaultProps} withCopyButton={false} />);
-    expect(container.querySelector('.mantine-CodeHighlight-copy')).not.toBeInTheDocument();
-  });
-});

package/src/CodeHighlight.theme.module.css

@@ -1,95 +0,0 @@
-.theme {
-  color: var(--_color);
-  background: var(--_background);
-
-  @mixin light {
-    --_color: var(--mantine-color-gray-7);
-    --_background: var(--mantine-color-gray-0);
-    --code-comment-color: var(--mantine-color-gray-6);
-    --code-keyword-color: var(--mantine-color-violet-8);
-    --code-tag-color: var(--mantine-color-red-9);
-    --code-literal-color: var(--mantine-color-blue-6);
-    --code-string-color: var(--mantine-color-blue-9);
-    --code-variable-color: var(--mantine-color-lime-9);
-    --code-class-color: var(--mantine-color-orange-9);
-  }
-
-  @mixin dark {
-    --_color: var(--mantine-color-dark-1);
-    --_background: var(--mantine-color-dark-8);
-    --code-comment-color: var(--mantine-color-dark-3);
-    --code-keyword-color: var(--mantine-color-violet-3);
-    --code-tag-color: var(--mantine-color-yellow-4);
-    --code-literal-color: var(--mantine-color-blue-4);
-    --code-string-color: var(--mantine-color-green-6);
-    --code-variable-color: var(--mantine-color-blue-2);
-    --code-class-color: var(--mantine-color-orange-5);
-  }
-
-  :global(.hljs-comment),
-  :global(.hljs-quote) {
-    font-style: italic;
-    color: var(--code-comment-color);
-  }
-
-  :global(.hljs-doctag),
-  :global(.hljs-formula),
-  :global(.hljs-keyword) {
-    color: var(--code-keyword-color);
-  }
-
-  :global(.hljs-deletion),
-  :global(.hljs-name),
-  :global(.hljs-section),
-  :global(.hljs-selector-tag),
-  :global(.hljs-subst) {
-    color: var(--code-tag-color);
-  }
-
-  :global(.hljs-literal) {
-    color: var(--code-literal-color);
-  }
-
-  :global(.hljs-addition),
-  :global(.hljs-attribute),
-  :global(.hljs-meta .hljs-string),
-  :global(.hljs-regexp),
-  :global(.hljs-string) {
-    color: var(--code-string-color);
-  }
-
-  :global(.hljs-attr),
-  :global(.hljs-number),
-  :global(.hljs-selector-attr),
-  :global(.hljs-selector-class),
-  :global(.hljs-selector-pseudo),
-  :global(.hljs-template-variable),
-  :global(.hljs-type),
-  :global(.hljs-variable) {
-    color: var(--code-variable-color);
-  }
-
-  :global(.hljs-bullet),
-  :global(.hljs-link),
-  :global(.hljs-meta),
-  :global(.hljs-selector-id),
-  :global(.hljs-symbol),
-  :global(.hljs-title),
-  :global(.hljs-built_in),
-  :global(.hljs-class .hljs-title),
-  :global(.hljs-title.class_) {
-    color: var(--code-class-color);
-  }
-
-  :global(.hljs-emphasis) {
-    font-style: italic;
-  }
-
-  :global(.hljs-strong) {
-    font-weight: 700;
-  }
-
-  :global(.hljs-link) {
-    text-decoration: underline;
-  }
-}