@slexn/codecenter-ui 1.0.0

package/src/styles.css

@@ -0,0 +1,684 @@
+@import "tailwindcss";
+@import "vue-sonner/style.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-profile-1: var(--profile-1);
+  --color-profile-2: var(--profile-2);
+  --color-profile-3: var(--profile-3);
+  --color-profile-4: var(--profile-4);
+  --color-profile-5: var(--profile-5);
+  --color-profile-foreground: var(--profile-foreground);
+  --color-contribution-graph-level-0: var(--contribution-graph-level-0);
+  --color-contribution-graph-level-1: var(--contribution-graph-level-1);
+  --color-contribution-graph-level-2: var(--contribution-graph-level-2);
+  --color-contribution-graph-level-3: var(--contribution-graph-level-3);
+  --color-contribution-graph-level-4: var(--contribution-graph-level-4);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.94 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --profile-1: oklch(0.55 0.18 262);
+    --profile-2: oklch(0.58 0.15 154);
+    --profile-3: oklch(0.66 0.17 68);
+    --profile-4: oklch(0.56 0.19 332);
+    --profile-5: oklch(0.57 0.19 27);
+    --profile-foreground: oklch(0.985 0 0);
+    --contribution-graph-level-0: oklch(0.94 0 0);
+    --contribution-graph-level-1: oklch(0.9 0.06 155);
+    --contribution-graph-level-2: oklch(0.76 0.11 155);
+    --contribution-graph-level-3: oklch(0.62 0.13 153);
+    --contribution-graph-level-4: oklch(0.46 0.12 152);
+    --chat-code-background: oklch(1 0 0);
+    --chat-code-background-elevated: oklch(1 0 0 / 96%);
+    --chat-code-background-glow: oklch(1 0 0 / 0%);
+    --chat-code-border: oklch(0.9 0 0);
+    --chat-code-control-hover: oklch(0.96 0 0);
+    --chat-code-dialog-overlay: oklch(0 0 0 / 42%);
+    --chat-code-foreground: oklch(0.145 0 0);
+    --chat-code-highlight: oklch(1 0 0);
+    --chat-code-line-number: oklch(0.56 0 0 / 82%);
+    --chat-code-muted: oklch(0.46 0 0 / 88%);
+    --chat-code-scrollbar: oklch(0.72 0 0 / 65%);
+    --chat-code-shadow: oklch(0 0 0 / 10%);
+    --diff-tool-background: oklch(1 0 0);
+    --diff-tool-background-elevated: oklch(1 0 0 / 96%);
+    --diff-tool-background-glow: oklch(1 0 0 / 0%);
+    --diff-tool-border: oklch(0.9 0 0);
+    --diff-tool-control-hover: oklch(0.96 0 0);
+    --diff-tool-dialog-overlay: oklch(0 0 0 / 42%);
+    --diff-tool-foreground: oklch(0.145 0 0);
+    --diff-tool-highlight: oklch(1 0 0);
+    --diff-tool-line-number: oklch(0.56 0 0 / 82%);
+    --diff-tool-muted: oklch(0.46 0 0 / 88%);
+    --diff-tool-scrollbar: oklch(0.72 0 0 / 65%);
+    --diff-tool-shadow: oklch(0 0 0 / 10%);
+    --diff-tool-addition-background: oklch(0.96 0.04 145 / 82%);
+    --diff-tool-addition-foreground: oklch(0.38 0.14 145);
+    --diff-tool-addition-gutter: oklch(0.92 0.05 145 / 88%);
+    --diff-tool-deletion-background: oklch(0.96 0.035 25 / 82%);
+    --diff-tool-deletion-foreground: oklch(0.46 0.16 25);
+    --diff-tool-deletion-gutter: oklch(0.92 0.05 25 / 88%);
+    --diff-tool-empty-background: oklch(0.96 0 0);
+    --code-token-comment: oklch(0.54 0.02 80);
+    --code-token-function: oklch(0.5 0.18 315);
+    --code-token-keyword: oklch(0.52 0.22 330);
+    --code-token-literal: oklch(0.52 0.17 45);
+    --code-token-number: oklch(0.48 0.16 35);
+    --code-token-operator: oklch(0.36 0.04 30);
+    --code-token-params: oklch(0.3 0.03 30);
+    --code-token-property: oklch(0.42 0.15 145);
+    --code-token-punctuation: oklch(0.42 0.02 80);
+    --code-token-string: oklch(0.43 0.15 130);
+    --code-token-tag: oklch(0.48 0.16 25);
+    --code-diff-addition-background: oklch(0.96 0.04 145 / 82%);
+    --code-diff-addition-foreground: oklch(0.38 0.14 145);
+    --code-diff-addition-gutter: oklch(0.92 0.05 145 / 88%);
+    --code-diff-deletion-background: oklch(0.96 0.035 25 / 82%);
+    --code-diff-deletion-foreground: oklch(0.46 0.16 25);
+    --code-diff-deletion-gutter: oklch(0.92 0.05 25 / 88%);
+    --code-diff-metadata-background: oklch(0.96 0 0);
+    --code-diff-metadata-foreground: oklch(0.46 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --overlay: oklch(0 0 0 / 8%);
+    --ring: oklch(0.708 0 0);
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    color-scheme: dark;
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --profile-1: oklch(0.67 0.16 262);
+    --profile-2: oklch(0.7 0.14 154);
+    --profile-3: oklch(0.78 0.15 68);
+    --profile-4: oklch(0.68 0.17 332);
+    --profile-5: oklch(0.68 0.17 27);
+    --profile-foreground: oklch(0.145 0 0);
+    --contribution-graph-level-0: oklch(1 0 0 / 9%);
+    --contribution-graph-level-1: oklch(0.31 0.08 155);
+    --contribution-graph-level-2: oklch(0.42 0.11 155);
+    --contribution-graph-level-3: oklch(0.55 0.14 153);
+    --contribution-graph-level-4: oklch(0.7 0.16 150);
+    --chat-code-background: oklch(0.145 0.01 260);
+    --chat-code-background-elevated: oklch(0.19 0.012 260 / 84%);
+    --chat-code-background-glow: oklch(1 0 0 / 10%);
+    --chat-code-border: oklch(1 0 0 / 14%);
+    --chat-code-control-hover: oklch(1 0 0 / 10%);
+    --chat-code-dialog-overlay: oklch(0.18 0.01 260 / 78%);
+    --chat-code-foreground: oklch(0.9 0.02 255);
+    --chat-code-highlight: oklch(1 0 0 / 8%);
+    --chat-code-line-number: oklch(0.66 0.025 255 / 76%);
+    --chat-code-muted: oklch(0.72 0.025 255 / 82%);
+    --chat-code-scrollbar: oklch(1 0 0 / 20%);
+    --chat-code-shadow: oklch(0 0 0 / 18%);
+    --diff-tool-background: oklch(0.145 0.01 260);
+    --diff-tool-background-elevated: oklch(0.19 0.012 260 / 84%);
+    --diff-tool-background-glow: oklch(1 0 0 / 10%);
+    --diff-tool-border: oklch(1 0 0 / 14%);
+    --diff-tool-control-hover: oklch(1 0 0 / 10%);
+    --diff-tool-dialog-overlay: oklch(0.18 0.01 260 / 78%);
+    --diff-tool-foreground: oklch(0.9 0.02 255);
+    --diff-tool-highlight: oklch(1 0 0 / 8%);
+    --diff-tool-line-number: oklch(0.66 0.025 255 / 76%);
+    --diff-tool-muted: oklch(0.72 0.025 255 / 82%);
+    --diff-tool-scrollbar: oklch(1 0 0 / 20%);
+    --diff-tool-shadow: oklch(0 0 0 / 18%);
+    --diff-tool-addition-background: oklch(0.28 0.08 145 / 46%);
+    --diff-tool-addition-foreground: oklch(0.83 0.14 145);
+    --diff-tool-addition-gutter: oklch(0.34 0.1 145 / 62%);
+    --diff-tool-deletion-background: oklch(0.27 0.08 25 / 48%);
+    --diff-tool-deletion-foreground: oklch(0.84 0.13 25);
+    --diff-tool-deletion-gutter: oklch(0.34 0.1 25 / 62%);
+    --diff-tool-empty-background: oklch(1 0 0 / 8%);
+    --code-token-comment: oklch(0.67 0.03 255);
+    --code-token-function: oklch(0.8 0.11 265);
+    --code-token-keyword: oklch(0.8 0.18 318);
+    --code-token-literal: oklch(0.84 0.13 65);
+    --code-token-number: oklch(0.79 0.12 205);
+    --code-token-operator: oklch(0.8 0.04 255);
+    --code-token-params: oklch(0.82 0.04 255);
+    --code-token-property: oklch(0.8 0.13 175);
+    --code-token-punctuation: oklch(0.76 0.03 255);
+    --code-token-string: oklch(0.8 0.14 220);
+    --code-token-tag: oklch(0.84 0.13 38);
+    --code-diff-addition-background: oklch(0.28 0.08 145 / 46%);
+    --code-diff-addition-foreground: oklch(0.83 0.14 145);
+    --code-diff-addition-gutter: oklch(0.34 0.1 145 / 62%);
+    --code-diff-deletion-background: oklch(0.27 0.08 25 / 48%);
+    --code-diff-deletion-foreground: oklch(0.84 0.13 25);
+    --code-diff-deletion-gutter: oklch(0.34 0.1 25 / 62%);
+    --code-diff-metadata-background: oklch(1 0 0 / 8%);
+    --code-diff-metadata-foreground: oklch(0.78 0.03 255);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --overlay: oklch(0 0 0 / 62%);
+    --ring: oklch(0.556 0 0);
+  }
+
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    min-width: 320px;
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family:
+      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+  }
+}
+
+@layer components {
+  [data-slot="chat-code-block"],
+  [data-slot="chat-code-dialog"] {
+    border-color: var(--chat-code-border);
+    background:
+      radial-gradient(circle at top right, var(--chat-code-background-glow), transparent 32rem),
+      var(--chat-code-background);
+    color: var(--chat-code-foreground);
+  }
+
+  [data-slot="diff-tool"],
+  [data-slot="diff-tool-dialog"] {
+    border-color: var(--diff-tool-border);
+    background:
+      radial-gradient(circle at top right, var(--diff-tool-background-glow), transparent 32rem),
+      var(--diff-tool-background);
+    color: var(--diff-tool-foreground);
+  }
+
+  [data-slot="chat-code-block"] {
+    box-shadow:
+      inset 0 1px 0 var(--chat-code-highlight),
+      0 12px 28px var(--chat-code-shadow);
+  }
+
+  [data-slot="diff-tool"] {
+    box-shadow:
+      inset 0 1px 0 var(--diff-tool-highlight),
+      0 12px 28px var(--diff-tool-shadow);
+  }
+
+  [data-slot="diff-tool"] {
+    contain: inline-size paint;
+    max-width: min(100%, calc(100vw - 2rem));
+  }
+
+  [data-slot="chat-code-dialog-overlay"] {
+    background: var(--chat-code-dialog-overlay);
+    backdrop-filter: blur(14px);
+  }
+
+  [data-slot="diff-tool-dialog-overlay"] {
+    background: var(--diff-tool-dialog-overlay);
+    backdrop-filter: blur(14px);
+  }
+
+  [data-slot="chat-code-dialog"],
+  [data-slot="diff-tool-dialog"] {
+    max-height: min(90vh, 920px);
+  }
+
+  [data-slot="chat-code-dialog-header"] {
+    border-color: var(--chat-code-border);
+    background: var(--chat-code-background-elevated);
+    color: var(--chat-code-muted);
+  }
+
+  [data-slot="chat-code-toolbar"] {
+    border-color: var(--chat-code-border);
+    background: var(--chat-code-background-elevated);
+    color: var(--chat-code-muted);
+    backdrop-filter: blur(12px);
+  }
+
+  [data-slot="diff-tool-dialog-header"],
+  [data-slot="diff-tool-toolbar"],
+  [data-slot="diff-tool-side-header"] {
+    border-color: var(--diff-tool-border);
+    background: var(--diff-tool-background-elevated);
+    color: var(--diff-tool-muted);
+  }
+
+  [data-slot="chat-code-copy"],
+  [data-slot="chat-code-expand-trigger"],
+  [data-slot="chat-code-collapse-trigger"] {
+    color: var(--chat-code-muted);
+  }
+
+  [data-slot="diff-tool-copy"],
+  [data-slot="diff-tool-expand-trigger"],
+  [data-slot="diff-tool-collapse-trigger"] {
+    color: var(--diff-tool-muted);
+  }
+
+  [data-slot="chat-code-copy"]:hover,
+  [data-slot="chat-code-expand-trigger"]:hover,
+  [data-slot="chat-code-collapse-trigger"]:hover {
+    background: var(--chat-code-control-hover);
+    color: var(--chat-code-foreground);
+  }
+
+  [data-slot="diff-tool-copy"]:hover,
+  [data-slot="diff-tool-expand-trigger"]:hover,
+  [data-slot="diff-tool-collapse-trigger"]:hover {
+    background: var(--diff-tool-control-hover);
+    color: var(--diff-tool-foreground);
+  }
+
+  [data-slot="chat-code-scroll"] {
+    scrollbar-color: var(--chat-code-scrollbar) transparent;
+    scrollbar-gutter: stable;
+  }
+
+  [data-slot="diff-tool-scroll"],
+  [data-slot="diff-tool-pane"] {
+    scrollbar-color: var(--diff-tool-scrollbar) transparent;
+    scrollbar-gutter: stable;
+  }
+
+  [data-slot="chat-code-scroll"]::-webkit-scrollbar,
+  [data-slot="diff-tool-scroll"]::-webkit-scrollbar,
+  [data-slot="diff-tool-pane"]::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  [data-slot="chat-code-scroll"]::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background: var(--chat-code-scrollbar);
+    background-clip: content-box;
+  }
+
+  [data-slot="diff-tool-scroll"]::-webkit-scrollbar-thumb,
+  [data-slot="diff-tool-pane"]::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background: var(--diff-tool-scrollbar);
+    background-clip: content-box;
+  }
+
+  [data-slot="chat-code-line-number"] {
+    border-color: var(--chat-code-border);
+    background: var(--chat-code-background);
+    color: var(--chat-code-line-number);
+  }
+
+  [data-slot="diff-tool-line-number"] {
+    border-color: var(--diff-tool-border);
+    background: var(--diff-tool-background);
+    color: var(--diff-tool-line-number);
+  }
+
+  [data-slot="diff-tool-cell"] {
+    background: var(--diff-tool-background);
+    color: var(--diff-tool-foreground);
+    overflow: hidden;
+  }
+
+  [data-slot="diff-tool-line"] {
+    min-height: 1.5rem;
+  }
+
+  [data-slot="diff-tool-cell"][data-side="right"],
+  [data-slot="diff-tool-side-header"][data-side="right"] {
+    border-color: var(--diff-tool-border);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="empty"] {
+    background: var(--diff-tool-empty-background);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="addition"] {
+    background: var(--diff-tool-addition-background);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="deletion"] {
+    background: var(--diff-tool-deletion-background);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="addition"] [data-slot="diff-tool-line-number"] {
+    background: var(--diff-tool-addition-gutter);
+    color: var(--diff-tool-addition-foreground);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="deletion"] [data-slot="diff-tool-line-number"] {
+    background: var(--diff-tool-deletion-gutter);
+    color: var(--diff-tool-deletion-foreground);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="empty"] [data-slot="diff-tool-line-number"] {
+    background: var(--diff-tool-empty-background);
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="addition"] [data-slot="diff-tool-token"] {
+    color: var(--diff-tool-addition-foreground);
+    font-weight: 600;
+  }
+
+  [data-slot="diff-tool-cell"][data-diff="deletion"] [data-slot="diff-tool-token"] {
+    color: var(--diff-tool-deletion-foreground);
+    font-weight: 600;
+  }
+
+  [data-slot="chat-code-line"]:first-child > [data-slot="chat-code-line-number"],
+  [data-slot="chat-code-line"]:first-child > [data-slot="chat-code-line-content"] {
+    padding-top: 1rem;
+  }
+
+  [data-slot="chat-code-line"]:last-child > [data-slot="chat-code-line-number"],
+  [data-slot="chat-code-line"]:last-child > [data-slot="chat-code-line-content"] {
+    padding-bottom: 1rem;
+  }
+
+  [data-slot="chat-code-line"][data-diff="addition"] {
+    background: var(--code-diff-addition-background);
+  }
+
+  [data-slot="chat-code-line"][data-diff="deletion"] {
+    background: var(--code-diff-deletion-background);
+  }
+
+  [data-slot="chat-code-line"][data-diff="metadata"] {
+    background: var(--code-diff-metadata-background);
+  }
+
+  [data-slot="chat-code-line"][data-diff="addition"] > [data-slot="chat-code-line-number"] {
+    background: var(--code-diff-addition-gutter);
+    color: var(--code-diff-addition-foreground);
+  }
+
+  [data-slot="chat-code-line"][data-diff="deletion"] > [data-slot="chat-code-line-number"] {
+    background: var(--code-diff-deletion-gutter);
+    color: var(--code-diff-deletion-foreground);
+  }
+
+  [data-slot="chat-code-line"][data-diff="metadata"] > [data-slot="chat-code-line-number"] {
+    background: var(--code-diff-metadata-background);
+    color: var(--code-diff-metadata-foreground);
+  }
+
+  [data-slot="chat-code-line"][data-diff="addition"] [data-slot="chat-code-token"],
+  [data-slot="chat-code-token"] .hljs-addition {
+    color: var(--code-diff-addition-foreground);
+    font-weight: 600;
+  }
+
+  [data-slot="chat-code-line"][data-diff="deletion"] [data-slot="chat-code-token"],
+  [data-slot="chat-code-token"] .hljs-deletion {
+    color: var(--code-diff-deletion-foreground);
+    font-weight: 600;
+  }
+
+  [data-slot="chat-code-line"][data-diff="metadata"] [data-slot="chat-code-token"],
+  [data-slot="chat-code-token"] .hljs-meta {
+    color: var(--code-diff-metadata-foreground);
+    font-weight: 600;
+  }
+
+  [data-slot="chat-code-token"] .hljs-comment,
+  [data-slot="chat-code-token"] .hljs-quote {
+    color: var(--code-token-comment);
+    font-style: italic;
+  }
+
+  [data-slot="chat-code-token"] .hljs-title,
+  [data-slot="chat-code-token"] .hljs-title.function_ {
+    color: var(--code-token-function);
+    font-weight: 600;
+  }
+
+  [data-slot="chat-code-token"] .hljs-doctag,
+  [data-slot="chat-code-token"] .hljs-keyword,
+  [data-slot="chat-code-token"] .hljs-meta,
+  [data-slot="chat-code-token"] .hljs-section {
+    color: var(--code-token-keyword);
+    font-weight: 600;
+  }
+
+  [data-slot="chat-code-token"] .hljs-built_in,
+  [data-slot="chat-code-token"] .hljs-class,
+  [data-slot="chat-code-token"] .hljs-literal,
+  [data-slot="chat-code-token"] .hljs-symbol,
+  [data-slot="chat-code-token"] .hljs-title.class_,
+  [data-slot="chat-code-token"] .hljs-type {
+    color: var(--code-token-literal);
+  }
+
+  [data-slot="chat-code-token"] .hljs-number {
+    color: var(--code-token-number);
+  }
+
+  [data-slot="chat-code-token"] .hljs-operator {
+    color: var(--code-token-operator);
+  }
+
+  [data-slot="chat-code-token"] .hljs-params {
+    color: var(--code-token-params);
+  }
+
+  [data-slot="chat-code-token"] .hljs-attr,
+  [data-slot="chat-code-token"] .hljs-attribute,
+  [data-slot="chat-code-token"] .hljs-property,
+  [data-slot="chat-code-token"] .hljs-selector-attr,
+  [data-slot="chat-code-token"] .hljs-selector-class,
+  [data-slot="chat-code-token"] .hljs-selector-id,
+  [data-slot="chat-code-token"] .hljs-template-variable,
+  [data-slot="chat-code-token"] .hljs-variable {
+    color: var(--code-token-property);
+    font-weight: 500;
+  }
+
+  [data-slot="chat-code-token"] .hljs-punctuation {
+    color: var(--code-token-punctuation);
+  }
+
+  [data-slot="chat-code-token"] .hljs-link,
+  [data-slot="chat-code-token"] .hljs-regexp,
+  [data-slot="chat-code-token"] .hljs-string {
+    color: var(--code-token-string);
+  }
+
+  [data-slot="chat-code-token"] .hljs-name,
+  [data-slot="chat-code-token"] .hljs-selector-tag,
+  [data-slot="chat-code-token"] .hljs-tag {
+    color: var(--code-token-tag);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-comment,
+  [data-slot="diff-tool-token"] .hljs-quote {
+    color: var(--code-token-comment);
+    font-style: italic;
+  }
+
+  [data-slot="diff-tool-token"] .hljs-title,
+  [data-slot="diff-tool-token"] .hljs-title.function_ {
+    color: var(--code-token-function);
+    font-weight: 600;
+  }
+
+  [data-slot="diff-tool-token"] .hljs-doctag,
+  [data-slot="diff-tool-token"] .hljs-keyword,
+  [data-slot="diff-tool-token"] .hljs-meta,
+  [data-slot="diff-tool-token"] .hljs-section {
+    color: var(--code-token-keyword);
+    font-weight: 600;
+  }
+
+  [data-slot="diff-tool-token"] .hljs-built_in,
+  [data-slot="diff-tool-token"] .hljs-class,
+  [data-slot="diff-tool-token"] .hljs-literal,
+  [data-slot="diff-tool-token"] .hljs-symbol,
+  [data-slot="diff-tool-token"] .hljs-title.class_,
+  [data-slot="diff-tool-token"] .hljs-type {
+    color: var(--code-token-literal);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-number {
+    color: var(--code-token-number);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-operator {
+    color: var(--code-token-operator);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-params {
+    color: var(--code-token-params);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-attr,
+  [data-slot="diff-tool-token"] .hljs-attribute,
+  [data-slot="diff-tool-token"] .hljs-property,
+  [data-slot="diff-tool-token"] .hljs-selector-attr,
+  [data-slot="diff-tool-token"] .hljs-selector-class,
+  [data-slot="diff-tool-token"] .hljs-selector-id,
+  [data-slot="diff-tool-token"] .hljs-template-variable,
+  [data-slot="diff-tool-token"] .hljs-variable {
+    color: var(--code-token-property);
+    font-weight: 500;
+  }
+
+  [data-slot="diff-tool-token"] .hljs-punctuation {
+    color: var(--code-token-punctuation);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-link,
+  [data-slot="diff-tool-token"] .hljs-regexp,
+  [data-slot="diff-tool-token"] .hljs-string {
+    color: var(--code-token-string);
+  }
+
+  [data-slot="diff-tool-token"] .hljs-name,
+  [data-slot="diff-tool-token"] .hljs-selector-tag,
+  [data-slot="diff-tool-token"] .hljs-tag {
+    color: var(--code-token-tag);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-comment,
+  [data-slot="tool-parameters-token"] .hljs-quote {
+    color: var(--code-token-comment);
+    font-style: italic;
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-title,
+  [data-slot="tool-parameters-token"] .hljs-title.function_ {
+    color: var(--code-token-function);
+    font-weight: 600;
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-doctag,
+  [data-slot="tool-parameters-token"] .hljs-keyword,
+  [data-slot="tool-parameters-token"] .hljs-meta,
+  [data-slot="tool-parameters-token"] .hljs-section {
+    color: var(--code-token-keyword);
+    font-weight: 600;
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-built_in,
+  [data-slot="tool-parameters-token"] .hljs-class,
+  [data-slot="tool-parameters-token"] .hljs-literal,
+  [data-slot="tool-parameters-token"] .hljs-symbol,
+  [data-slot="tool-parameters-token"] .hljs-title.class_,
+  [data-slot="tool-parameters-token"] .hljs-type {
+    color: var(--code-token-literal);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-number {
+    color: var(--code-token-number);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-operator {
+    color: var(--code-token-operator);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-params {
+    color: var(--code-token-params);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-attr,
+  [data-slot="tool-parameters-token"] .hljs-attribute,
+  [data-slot="tool-parameters-token"] .hljs-property,
+  [data-slot="tool-parameters-token"] .hljs-selector-attr,
+  [data-slot="tool-parameters-token"] .hljs-selector-class,
+  [data-slot="tool-parameters-token"] .hljs-selector-id,
+  [data-slot="tool-parameters-token"] .hljs-template-variable,
+  [data-slot="tool-parameters-token"] .hljs-variable {
+    color: var(--code-token-property);
+    font-weight: 500;
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-punctuation {
+    color: var(--code-token-punctuation);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-link,
+  [data-slot="tool-parameters-token"] .hljs-regexp,
+  [data-slot="tool-parameters-token"] .hljs-string {
+    color: var(--code-token-string);
+  }
+
+  [data-slot="tool-parameters-token"] .hljs-name,
+  [data-slot="tool-parameters-token"] .hljs-selector-tag,
+  [data-slot="tool-parameters-token"] .hljs-tag {
+    color: var(--code-token-tag);
+  }
+}