@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--radius-sm: calc(var(--radius) - 1px);
--radius-md: calc(var(--radius) - 1px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 1px);
--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-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
/* File type colors */
--color-type-components: var(--chart-2);
--color-type-components-fg: var(--chart-2);
--color-type-hooks: var(--chart-3);
--color-type-hooks-fg: var(--chart-3);
--color-type-utilities: var(--chart-1);
--color-type-utilities-fg: var(--chart-1);
--color-type-configuration: var(--chart-5);
--color-type-configuration-fg: var(--chart-5);
--color-type-styles: var(--chart-4);
--color-type-styles-fg: var(--chart-4);
--color-type-types: var(--primary);
--color-type-types-fg: var(--primary);
--color-type-tests: var(--accent);
--color-type-tests-fg: var(--accent);
--color-type-documentation: var(--muted);
--color-type-documentation-fg: var(--muted-foreground);
/* Vector visualization semantic type colors */
--color-vector-functions: oklch(0.6 0.08 220); /* Blue */
--color-vector-react: oklch(0.65 0.12 15); /* Red */
--color-vector-classes: oklch(0.65 0.1 140); /* Green */
--color-vector-types: oklch(0.7 0.1 65); /* Orange */
--color-vector-config: oklch(0.65 0.08 280); /* Purple */
--color-vector-unknown: oklch(0.5 0.02 240); /* Gray */
/* Status colors */
--color-success: oklch(0.75 0.12 140);
--color-success-foreground: oklch(0.98 0.005 240);
--color-warning: oklch(0.8 0.12 65);
--color-warning-foreground: oklch(0.15 0.01 240);
--color-info: var(--primary);
--color-info-foreground: var(--primary-foreground);
}
:root {
--radius: 0.225rem;
--background: oklch(0.98 0.01 240);
--foreground: oklch(0.25 0.02 240);
--card: oklch(0.98 0.014 240);
--card-foreground: oklch(0.1 0.02 240);
--popover: oklch(0.99 0.003 240);
--popover-foreground: oklch(0.25 0.02 240);
--primary: oklch(0.65 0.08 200);
--primary-foreground: oklch(0.98 0.005 240);
--secondary: oklch(0.92 0.02 240);
--secondary-foreground: oklch(0.35 0.03 240);
--muted: oklch(0.94 0.01 240);
--muted-foreground: oklch(0.55 0.02 240);
--accent: oklch(0.88 0.03 220);
--accent-foreground: oklch(0.25 0.02 240);
--destructive: oklch(0.75 0.15 25);
--border: oklch(0.88 0.01 240);
--input: oklch(0.88 0.01 240);
--ring: oklch(0.65 0.08 200);
--chart-1: oklch(0.75 0.12 45);
--chart-2: oklch(0.7 0.08 180);
--chart-3: oklch(0.65 0.06 220);
--chart-4: oklch(0.8 0.1 90);
--chart-5: oklch(0.75 0.09 75);
--sidebar: oklch(0.96 0.004 240);
--sidebar-foreground: oklch(0.25 0.02 240);
--sidebar-primary: oklch(0.65 0.08 200);
--sidebar-primary-foreground: oklch(0.98 0.005 240);
--sidebar-accent: oklch(0.92 0.02 240);
--sidebar-accent-foreground: oklch(0.35 0.03 240);
--sidebar-border: oklch(0.88 0.01 240);
--sidebar-ring: oklch(0.65 0.08 200);
--color-semantic-ui_component: #e57373;
--color-semantic-page_component: #f06292;
--color-semantic-layout_component: #ba68c8;
--color-semantic-modal_component: #ce93d8;
--color-semantic-form_component: #81d4fa;
--color-semantic-hook: #64b5f6;
--color-semantic-context: #4dd0e1;
--color-semantic-state_management: #81c784;
--color-semantic-api_integration: #ffd54f;
--color-semantic-data_model: #a1887f;
--color-semantic-utility: #90a4ae;
--color-semantic-configuration: #bdbdbd;
--color-semantic-styling: #ffb74d;
--color-semantic-testing: #aed581;
--color-semantic-documentation: #fff176;
--color-semantic-error_handling: #e57373;
--color-semantic-performance: #4fc3f7;
--color-semantic-security: #9575cd;
--color-semantic-monitoring: #f06292;
--color-semantic-type_definition: #ffd54f;
--color-semantic-business_logic: #81c784;
--color-semantic-algorithm: #ba68c8;
--color-semantic-unknown: #b0bec5;
--prism-keyword: #d73a49;
--prism-string: #032f62;
--prism-comment: #6a737d;
--prism-function: #6f42c1;
--prism-number: #005cc5;
--prism-operator: #d73a49;
--prism-punctuation: #24292e;
--prism-class: #6f42c1;
--prism-property: #005cc5;
--prism-variable: #e36209;
}
.dark {
--background: oklch(0.15 0.01 240);
--foreground: oklch(0.75 0.01 240);
--card: oklch(0.145 0.01 240);
--card-foreground: oklch(0.85 0.02 240);
--popover: oklch(0.22 0.015 240);
--popover-foreground: oklch(0.85 0.02 240);
--primary: oklch(0.7 0.06 200);
--primary-foreground: oklch(0.15 0.01 240);
--secondary: oklch(0.28 0.02 240);
--secondary-foreground: oklch(0.85 0.02 240);
--muted: oklch(0.28 0.02 240);
--muted-foreground: oklch(0.65 0.02 240);
--accent: oklch(0.32 0.025 240);
--accent-foreground: oklch(0.85 0.02 240);
--destructive: oklch(0.7 0.12 25);
--border: oklch(0.2 0.02 240);
--input: oklch(0.35 0.02 240);
--ring: oklch(0.7 0.06 200);
--chart-1: oklch(0.65 0.1 45);
--chart-2: oklch(0.6 0.07 180);
--chart-3: oklch(0.55 0.05 220);
--chart-4: oklch(0.7 0.08 90);
--chart-5: oklch(0.65 0.07 75);
--sidebar: oklch(0.18 0.012 240);
--sidebar-foreground: oklch(0.85 0.02 240);
--sidebar-primary: oklch(0.7 0.06 200);
--sidebar-primary-foreground: oklch(0.15 0.01 240);
--sidebar-accent: oklch(0.28 0.02 240);
--sidebar-accent-foreground: oklch(0.85 0.02 240);
--sidebar-border: oklch(0.35 0.02 240);
--sidebar-ring: oklch(0.7 0.06 200);
--color-semantic-ui_component: #b71c1c;
--color-semantic-page_component: #ad1457;
--color-semantic-layout_component: #6a1b9a;
--color-semantic-modal_component: #8e24aa;
--color-semantic-form_component: #0288d1;
--color-semantic-hook: #1976d2;
--color-semantic-context: #00838f;
--color-semantic-state_management: #388e3c;
--color-semantic-api_integration: #ffa000;
--color-semantic-data_model: #5d4037;
--color-semantic-utility: #455a64;
--color-semantic-configuration: #757575;
--color-semantic-styling: #f57c00;
--color-semantic-testing: #689f38;
--color-semantic-documentation: #fbc02d;
--color-semantic-error_handling: #c62828;
--color-semantic-performance: #0288d1;
--color-semantic-security: #512da8;
--color-semantic-monitoring: #ad1457;
--color-semantic-type_definition: #ffa000;
--color-semantic-business_logic: #388e3c;
--color-semantic-algorithm: #6a1b9a;
--color-semantic-unknown: #37474f;
--prism-keyword: #ff7b72;
--prism-string: #a5d6ff;
--prism-comment: #8b949e;
--prism-function: #d2a8ff;
--prism-number: #79c0ff;
--prism-operator: #ff7b72;
--prism-punctuation: #c9d1d9;
--prism-class: #d2a8ff;
--prism-property: #79c0ff;
--prism-variable: #ffa657;
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
font-family: 'JetBrains Mono', monospace;
}
}
@layer utilities {
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
}
/* Hide Plotly hover arrows/callouts */
.js-plotly-plot .hoverlayer .axistext,
.js-plotly-plot .hoverlayer .hovertext .nums,
.js-plotly-plot .hoverlayer .hovertext .name,
.js-plotly-plot .hoverlayer .hovertext .legendtoggle,
.js-plotly-plot .hoverlayer .hovertext .hovertext-bg,
.js-plotly-plot .hoverlayer .hovertext .hovertext-arrow {
display: none !important;
}
/* Custom Prism.js theme overrides for better integration with our design system */
pre[class*="language-"] {
background: var(--muted);
border-radius: var(--radius);
margin: 0;
padding: 1rem;
overflow: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
}
code[class*="language-"] {
background: none;
color: var(--foreground);
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
text-shadow: none;
}
.token.keyword {
color: var(--prism-keyword);
}
.token.string {
color: var(--prism-string);
}
.token.comment {
color: var(--prism-comment);
font-style: italic;
}
.token.function {
color: var(--prism-function);
}
.token.number {
color: var(--prism-number);
}
.token.operator {
color: var(--prism-operator);
}
.token.punctuation {
color: var(--prism-punctuation);
}
.token.class-name {
color: var(--prism-class);
}
.token.property {
color: var(--prism-property);
}
.token.variable {
color: var(--prism-variable);
}
.token.boolean {
color: var(--prism-keyword);
}
.token.null {
color: var(--prism-keyword);
}
.token.undefined {
color: var(--prism-keyword);
}
.token.regex {
color: var(--prism-string);
}
.token.tag {
color: var(--prism-keyword);
}
.token.attr-name {
color: var(--prism-property);
}
.token.attr-value {
color: var(--prism-string);
}
/* Remove Prism's default background */
.token.selector,
.token.important,
.token.atrule {
color: var(--prism-keyword);
}
/* Line numbers if needed */
.line-numbers .line-numbers-rows {
border-right: 1px solid var(--border);
}
.line-numbers-rows > span:before {
color: var(--muted-foreground);
}
