Bohdan Triapitsyn
3feee346da
Dialogs and settings window now use the standard background color Removed dialog from the glass utility styles Preserves existing glass effects for other surfaces
531 lines
19 KiB
CSS
531 lines
19 KiB
CSS
@layer base {
|
||
:root {
|
||
color-scheme: light;
|
||
--oc-safe-area-top: 0px;
|
||
--oc-safe-area-right: 0px;
|
||
--oc-safe-area-bottom: 0px;
|
||
--oc-safe-area-bottom-visual: 0px;
|
||
--oc-safe-area-left: 0px;
|
||
--oc-header-height: 56px;
|
||
--oc-visual-viewport-offset-top: 0px;
|
||
--oc-visual-viewport-height: 100dvh;
|
||
--oc-wco-left-inset: 0px;
|
||
--oc-wco-right-inset: 0px;
|
||
--oc-wco-titlebar-height: 0px;
|
||
--ui-regular-font-weight: 400;
|
||
--oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
|
||
--oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
|
||
--padding-scale: 1;
|
||
/* Shared glass surfaces. Semantic surface tokens provide each tint. */
|
||
--oc-glass-blur: 22px;
|
||
--oc-glass-opacity: 52%;
|
||
--oc-glass-popover-opacity: 50%;
|
||
--oc-glass-tooltip-opacity: 62%;
|
||
--oc-glass-saturation: 1.24;
|
||
|
||
/* Semantic typography defaults (must match SEMANTIC_TYPOGRAPHY) */
|
||
--text-markdown: 0.9375rem;
|
||
--text-code: 0.8125rem;
|
||
--text-ui-header: 0.9375rem;
|
||
--text-ui-label: 0.8750rem;
|
||
--text-meta: 0.875rem;
|
||
--text-micro: 0.875rem;
|
||
--text-settings-page-title: 1.125rem;
|
||
|
||
/* Default Light Theme */
|
||
--background: oklch(0.97 0.02 85); /* Warm sand background */
|
||
--foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--card: oklch(0.99 0.01 90); /* Bright sand card */
|
||
--card-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--popover: oklch(0.99 0.01 90); /* Bright sand popover */
|
||
--popover-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--primary: oklch(0.65 0.2 55); /* Primary accent - orange */
|
||
--primary-foreground: oklch(0.99 0.01 90); /* Light text on primary */
|
||
--secondary: oklch(0.92 0.02 80); /* Light sand */
|
||
--secondary-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--muted: oklch(0.9 0.015 75); /* Muted sand */
|
||
--muted-foreground: oklch(0.45 0.02 50); /* Medium warm text */
|
||
--accent: oklch(0.92 0.02 80); /* Light sand accent */
|
||
--accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--destructive: oklch(0.55 0.25 25); /* Warm red */
|
||
--destructive-foreground: oklch(0.99 0.01 90); /* Light text */
|
||
--border: oklch(0.85 0.02 70); /* Warm border */
|
||
--input: oklch(0.88 0.02 75); /* Input background */
|
||
--ring: oklch(0.65 0.2 55); /* Focus ring color */
|
||
--radius: 0.5625rem;
|
||
--chart-1: oklch(0.58 0.15 230); /* Blue */
|
||
--chart-2: oklch(0.58 0.15 145); /* Oasis green */
|
||
--chart-3: oklch(0.65 0.2 55); /* Orange */
|
||
--chart-4: oklch(0.55 0.18 30); /* Rose */
|
||
--chart-5: oklch(0.6 0.16 85); /* Golden sand */
|
||
--sidebar: oklch(0.95 0.02 80); /* Slightly darker sand */
|
||
--sidebar-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--sidebar-primary: oklch(0.65 0.2 55); /* Primary accent */
|
||
--sidebar-primary-foreground: oklch(0.99 0.01 90); /* Light text */
|
||
--sidebar-accent: oklch(0.9 0.02 75); /* Light sand accent */
|
||
--sidebar-accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||
--sidebar-border: oklch(0.85 0.02 70); /* Warm border */
|
||
--sidebar-ring: oklch(0.65 0.2 55); /* Focus ring */
|
||
}
|
||
|
||
.dark {
|
||
--oc-glass-blur: 26px;
|
||
--oc-glass-opacity: 50%;
|
||
--oc-glass-popover-opacity: 52%;
|
||
--oc-glass-tooltip-opacity: 64%;
|
||
--oc-glass-saturation: 1.16;
|
||
/* Default Dark Theme - using OKLCH color space */
|
||
--background: oklch(0.16 0.01 30); /* #151313 */
|
||
--foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--card: oklch(0.19 0.01 40); /* #1C1B1A */
|
||
--card-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--popover: oklch(0.24 0.01 40); /* #282726 */
|
||
--popover-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--primary: oklch(0.77 0.17 85); /* #edb449 - golden sand */
|
||
--primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||
--secondary: oklch(0.29 0.01 40); /* #343331 */
|
||
--secondary-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--muted: oklch(0.33 0.01 40); /* #403E3C */
|
||
--muted-foreground: oklch(0.75 0.02 80); /* #b6b4ab */
|
||
--accent: oklch(0.29 0.01 40); /* #343331 */
|
||
--accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--destructive: oklch(0.65 0.15 30); /* #d98678 */
|
||
--destructive-foreground: oklch(0.9 0.02 80); /* #e1dcd0 */
|
||
--border: oklch(0.31 0.01 35); /* #393836 */
|
||
--input: oklch(0.33 0.01 40); /* #403E3C */
|
||
--ring: oklch(0.77 0.17 85); /* #edb449 */
|
||
--chart-1: oklch(0.68 0.12 230); /* #5aa9d9 - blue */
|
||
--chart-2: oklch(0.68 0.12 145); /* #81af6c - green */
|
||
--chart-3: oklch(0.7 0.13 95); /* #c2974d - yellow */
|
||
--chart-4: oklch(0.65 0.14 45); /* #d8886d - coral */
|
||
--chart-5: oklch(0.68 0.12 55); /* #d29470 - orange */
|
||
--sidebar: oklch(0.16 0.01 30); /* #151313 */
|
||
--sidebar-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--sidebar-primary: oklch(0.77 0.17 85); /* #edb449 */
|
||
--sidebar-primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||
--sidebar-accent: oklch(0.24 0.01 40); /* #282726 */
|
||
--sidebar-accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||
--sidebar-border: oklch(0.31 0.01 35); /* #393836 */
|
||
--sidebar-ring: oklch(0.77 0.17 85); /* #edb449 */
|
||
}
|
||
|
||
* {
|
||
border-color: var(--border); /* Theme border token (interactive.border) — opaque and theme-aware */
|
||
}
|
||
|
||
body {
|
||
background-color: hsl(var(--background));
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
* {
|
||
@apply border-border outline-none;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
|
||
font-weight: var(--ui-regular-font-weight, 400);
|
||
}
|
||
|
||
/* Prevent rubber-band scrolling of the page itself.
|
||
App scroll should live inside dedicated scroll containers. */
|
||
:root,
|
||
:root body,
|
||
:root #root {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
overscroll-behavior: none;
|
||
overscroll-behavior-y: none;
|
||
}
|
||
|
||
:root.desktop-runtime body,
|
||
:root.desktop-runtime #root {
|
||
background: var(--background) !important;
|
||
background-color: var(--background) !important;
|
||
}
|
||
|
||
.font-sans {
|
||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
|
||
}
|
||
|
||
.font-mono,
|
||
code,
|
||
pre {
|
||
font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
|
||
}
|
||
|
||
/* Restore default list styling inside markdown content - override Tailwind preflight */
|
||
.markdown-content ul,
|
||
.markdown-content ol {
|
||
padding-left: 2em !important;
|
||
}
|
||
|
||
.markdown-content ul {
|
||
list-style-type: none !important;
|
||
}
|
||
|
||
.markdown-content ul > li {
|
||
position: relative;
|
||
}
|
||
|
||
.markdown-content ul > li::before {
|
||
content: "–";
|
||
position: absolute;
|
||
left: -1.25em;
|
||
color: inherit;
|
||
}
|
||
|
||
.markdown-content ol {
|
||
list-style-type: decimal !important;
|
||
list-style-position: outside !important;
|
||
}
|
||
|
||
.markdown-content li {
|
||
display: list-item !important;
|
||
}
|
||
|
||
/* Remove focus rings globally (except inputs/textareas/dropdowns/selects/explicit accent rings) */
|
||
*:focus:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]):not(.focus-ring-accent):not([data-focus-ring="accent"]) {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
*:focus-visible:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]):not(.focus-ring-accent):not([data-focus-ring="accent"]) {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.focus-ring-accent:focus-visible,
|
||
[data-focus-ring="accent"]:focus-visible {
|
||
outline: 2px solid var(--primary-base) !important;
|
||
outline-offset: 2px !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
/* Shared translucent surfaces. Each variant only chooses its semantic tint;
|
||
blur, accessibility fallbacks, and floating-surface elevation stay common.
|
||
Utilities remain able to opt an individual consumer out. */
|
||
.oc-glass-popover,
|
||
.oc-glass-tooltip,
|
||
.oc-glass-panel {
|
||
background-color: color-mix(in srgb, var(--oc-glass-color) var(--oc-glass-opacity), transparent);
|
||
-webkit-backdrop-filter: blur(var(--oc-glass-blur)) saturate(var(--oc-glass-saturation));
|
||
backdrop-filter: blur(var(--oc-glass-blur)) saturate(var(--oc-glass-saturation));
|
||
}
|
||
|
||
.oc-glass-popover {
|
||
--oc-glass-color: var(--surface-elevated);
|
||
--oc-glass-opacity: var(--oc-glass-popover-opacity);
|
||
}
|
||
|
||
.oc-glass-tooltip {
|
||
--oc-glass-color: var(--surface-elevated);
|
||
--oc-glass-opacity: var(--oc-glass-tooltip-opacity);
|
||
}
|
||
|
||
.oc-glass-panel {
|
||
--oc-glass-color: var(--surface-muted);
|
||
}
|
||
|
||
.oc-glass-floating {
|
||
box-shadow:
|
||
inset 0 1px 0 0 rgb(255 255 255 / 0.8),
|
||
inset 0 0 0 1px rgb(0 0 0 / 0.04),
|
||
0 0 0 1px rgb(0 0 0 / 0.1),
|
||
0 1px 2px -0.5px rgb(0 0 0 / 0.08),
|
||
0 4px 8px -2px rgb(0 0 0 / 0.08),
|
||
0 12px 20px -4px rgb(0 0 0 / 0.08);
|
||
}
|
||
|
||
.dark .oc-glass-floating {
|
||
box-shadow:
|
||
inset 0 1px 0 0 rgb(255 255 255 / 0.12),
|
||
inset 0 0 0 1px rgb(255 255 255 / 0.08),
|
||
0 0 0 1px rgb(0 0 0 / 0.36),
|
||
0 1px 1px -0.5px rgb(0 0 0 / 0.22),
|
||
0 3px 3px -1.5px rgb(0 0 0 / 0.2),
|
||
0 6px 6px -3px rgb(0 0 0 / 0.16);
|
||
}
|
||
|
||
.oc-glass-backdrop {
|
||
-webkit-backdrop-filter: blur(4px);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||
.oc-glass-popover,
|
||
.oc-glass-tooltip,
|
||
.oc-glass-panel {
|
||
background-color: var(--oc-glass-color);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-transparency: reduce) {
|
||
.oc-glass-popover,
|
||
.oc-glass-tooltip,
|
||
.oc-glass-panel,
|
||
.oc-glass-backdrop {
|
||
-webkit-backdrop-filter: none;
|
||
backdrop-filter: none;
|
||
}
|
||
|
||
.oc-glass-popover,
|
||
.oc-glass-tooltip,
|
||
.oc-glass-panel {
|
||
background-color: var(--oc-glass-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
@theme inline {
|
||
--radius-none: 0;
|
||
--radius-sm: 0.25rem; /* 4px */
|
||
--radius-md: 0.4375rem; /* 7px */
|
||
--radius-lg: 0.5625rem; /* 9px */
|
||
--radius-xl: 0.75rem; /* 12px */
|
||
--radius-full: 9999px;
|
||
|
||
/* Semantic spacing aliases (4/8px grid) */
|
||
--space-1: var(--spacing-1); /* 4px */
|
||
--space-2: var(--spacing-2); /* 8px */
|
||
--space-3: var(--spacing-3); /* 12px */
|
||
--space-4: var(--spacing-4); /* 16px */
|
||
--space-6: var(--spacing-6); /* 24px */
|
||
--space-8: var(--spacing-8); /* 32px */
|
||
|
||
/* Elevation / stacking */
|
||
--z-base: 0;
|
||
--z-raised: 10;
|
||
--z-overlay: 40;
|
||
--z-modal: 50;
|
||
--transition-fast: 150ms ease-in-out;
|
||
|
||
/* Override Tailwind spacing scale with custom properties that respect --padding-scale */
|
||
--spacing-0: 0;
|
||
--spacing-0\.5: calc(0.125rem * var(--padding-scale, 1));
|
||
--spacing-1: calc(0.25rem * var(--padding-scale, 1));
|
||
--spacing-1\.5: calc(0.375rem * var(--padding-scale, 1));
|
||
--spacing-2: calc(0.5rem * var(--padding-scale, 1));
|
||
--spacing-2\.5: calc(0.625rem * var(--padding-scale, 1));
|
||
--spacing-3: calc(0.75rem * var(--padding-scale, 1));
|
||
--spacing-3\.5: calc(0.875rem * var(--padding-scale, 1));
|
||
--spacing-4: calc(1rem * var(--padding-scale, 1));
|
||
--spacing-5: calc(1.25rem * var(--padding-scale, 1));
|
||
--spacing-6: calc(1.5rem * var(--padding-scale, 1));
|
||
--spacing-7: calc(1.75rem * var(--padding-scale, 1));
|
||
--spacing-8: calc(2rem * var(--padding-scale, 1));
|
||
--spacing-9: calc(2.25rem * var(--padding-scale, 1));
|
||
--spacing-10: calc(2.5rem * var(--padding-scale, 1));
|
||
--spacing-11: calc(2.75rem * var(--padding-scale, 1));
|
||
--spacing-12: calc(3rem * var(--padding-scale, 1));
|
||
--spacing-14: calc(3.5rem * var(--padding-scale, 1));
|
||
--spacing-16: calc(4rem * var(--padding-scale, 1));
|
||
--spacing-20: calc(5rem * var(--padding-scale, 1));
|
||
--spacing-24: calc(6rem * var(--padding-scale, 1));
|
||
--spacing-28: calc(7rem * var(--padding-scale, 1));
|
||
--spacing-32: calc(8rem * var(--padding-scale, 1));
|
||
--spacing-36: calc(9rem * var(--padding-scale, 1));
|
||
--spacing-40: calc(10rem * var(--padding-scale, 1));
|
||
--spacing-44: calc(11rem * var(--padding-scale, 1));
|
||
--spacing-48: calc(12rem * var(--padding-scale, 1));
|
||
--spacing-52: calc(13rem * var(--padding-scale, 1));
|
||
--spacing-56: calc(14rem * var(--padding-scale, 1));
|
||
--spacing-60: calc(15rem * var(--padding-scale, 1));
|
||
--spacing-64: calc(16rem * var(--padding-scale, 1));
|
||
--spacing-72: calc(18rem * var(--padding-scale, 1));
|
||
--spacing-80: calc(20rem * var(--padding-scale, 1));
|
||
--spacing-96: calc(24rem * var(--padding-scale, 1));
|
||
|
||
--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-status-success: var(--status-success);
|
||
--color-status-warning: var(--status-warning);
|
||
--color-status-error: var(--status-error);
|
||
--color-status-info: var(--status-info);
|
||
--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);
|
||
|
||
/* Surface layer tokens (Theme.colors.surface.*) */
|
||
--color-surface-background: var(--surface-background);
|
||
--color-surface-foreground: var(--surface-foreground);
|
||
--color-surface-muted: var(--surface-muted);
|
||
--color-surface-muted-foreground: var(--surface-muted-foreground);
|
||
--color-surface-elevated: var(--surface-elevated);
|
||
--color-surface-elevated-foreground: var(--surface-elevated-foreground);
|
||
--color-surface-overlay: var(--surface-overlay);
|
||
--color-surface-subtle: var(--surface-subtle);
|
||
|
||
/* Interactive state tokens (Theme.colors.interactive.*) */
|
||
--color-interactive-hover: var(--interactive-hover);
|
||
--color-interactive-active: var(--interactive-active);
|
||
--color-interactive-selection: var(--interactive-selection);
|
||
--color-interactive-selection-foreground: var(--interactive-selection-foreground);
|
||
--color-interactive-border-hover: var(--interactive-border-hover);
|
||
--color-interactive-border-focus: var(--interactive-border-focus);
|
||
--color-interactive-focus-ring: var(--interactive-focus-ring);
|
||
|
||
/* Short aliases (optional) */
|
||
--color-border-hover: var(--interactive-border-hover);
|
||
--color-border-focus: var(--interactive-border-focus);
|
||
|
||
/* Markdown typography variables */
|
||
--markdown-body-font-size: var(--text-markdown);
|
||
--markdown-body-line-height: var(--markdown-body-line-height);
|
||
--markdown-h1-font-size: var(--text-markdown);
|
||
--markdown-h1-line-height: var(--markdown-h1-line-height);
|
||
--markdown-h2-font-size: var(--text-markdown);
|
||
--markdown-h2-line-height: var(--markdown-h2-line-height);
|
||
--markdown-h3-font-size: var(--text-markdown);
|
||
--markdown-h3-line-height: var(--markdown-h3-line-height);
|
||
--markdown-h4-font-size: var(--text-markdown);
|
||
--markdown-h4-line-height: var(--markdown-h4-line-height);
|
||
--markdown-h5-font-size: var(--text-markdown);
|
||
--markdown-h5-line-height: var(--markdown-h5-line-height);
|
||
--markdown-h6-font-size: var(--text-markdown);
|
||
--markdown-h6-line-height: var(--markdown-h6-line-height);
|
||
--markdown-list-font-size: var(--text-markdown);
|
||
--markdown-list-line-height: var(--markdown-list-line-height);
|
||
--markdown-code-block-font-size: var(--text-code);
|
||
--markdown-code-block-line-height: var(--markdown-code-block-line-height);
|
||
|
||
/* Markdown color variables */
|
||
--markdown-heading1: var(--markdown-heading1);
|
||
--markdown-heading2: var(--markdown-heading2);
|
||
--markdown-heading3: var(--markdown-heading3);
|
||
--markdown-heading4: var(--markdown-heading4);
|
||
--markdown-link: var(--markdown-link);
|
||
--markdown-link-hover: var(--markdown-link-hover);
|
||
--markdown-list-marker: var(--markdown-list-marker);
|
||
--markdown-inline-code: var(--markdown-inline-code);
|
||
--markdown-inline-code-bg: var(--markdown-inline-code-bg);
|
||
--markdown-blockquote: var(--markdown-blockquote);
|
||
--markdown-blockquote-border: var(--markdown-blockquote-border);
|
||
|
||
/* Markdown spacing defaults */
|
||
--markdown-paragraph-spacing: 0.75rem;
|
||
--markdown-heading-primary-top: 0.75rem;
|
||
--markdown-heading-primary-bottom: 0.35rem;
|
||
--markdown-heading-secondary-top: 0.6rem;
|
||
--markdown-heading-secondary-bottom: 0.3rem;
|
||
--markdown-blockquote-spacing: 0.6rem;
|
||
--markdown-blockquote-padding: 0.75rem;
|
||
--markdown-divider-spacing: 0.85rem;
|
||
--markdown-table-spacing: 0.9rem;
|
||
--markdown-heading1-size: var(--text-markdown);
|
||
--markdown-heading2-size: var(--text-markdown);
|
||
--markdown-heading3-size: var(--text-markdown);
|
||
--markdown-heading4-size: var(--text-markdown);
|
||
--markdown-heading5-size: var(--text-markdown);
|
||
--markdown-heading6-size: var(--text-markdown);
|
||
--font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
--font-heading: var(--font-sans);
|
||
--font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Cascadia Mono", "Segoe UI Mono", monospace;
|
||
--font-family-sans: var(--font-sans);
|
||
--font-family-mono: var(--font-mono);
|
||
}
|
||
|
||
/* Agent color system using theme variables */
|
||
@layer components {
|
||
/* Agent color variants - each maps to theme colors */
|
||
.agent-primary {
|
||
--agent-color: var(--primary);
|
||
--agent-color-bg: var(--primary);
|
||
}
|
||
|
||
.agent-info {
|
||
--agent-color: var(--status-info);
|
||
--agent-color-bg: var(--status-info);
|
||
}
|
||
|
||
.agent-keyword {
|
||
--agent-color: var(--syntax-keyword);
|
||
--agent-color-bg: var(--syntax-keyword);
|
||
}
|
||
|
||
.agent-success {
|
||
--agent-color: var(--status-success);
|
||
--agent-color-bg: var(--status-success);
|
||
}
|
||
|
||
.agent-function {
|
||
--agent-color: var(--syntax-function);
|
||
--agent-color-bg: var(--syntax-function);
|
||
}
|
||
|
||
.agent-number {
|
||
--agent-color: var(--syntax-number);
|
||
--agent-color-bg: var(--syntax-number);
|
||
}
|
||
|
||
.agent-type {
|
||
--agent-color: var(--syntax-type);
|
||
--agent-color-bg: var(--syntax-type);
|
||
}
|
||
|
||
.agent-warning {
|
||
--agent-color: var(--status-warning);
|
||
--agent-color-bg: var(--status-warning);
|
||
}
|
||
|
||
.agent-variable {
|
||
--agent-color: var(--syntax-variable);
|
||
--agent-color-bg: var(--syntax-variable);
|
||
}
|
||
|
||
/* Apply colors with opacity for badges */
|
||
.agent-badge {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||
border: 1px solid rgb(from var(--agent-color) r g b / 0.2);
|
||
color: var(--agent-color);
|
||
}
|
||
|
||
.agent-badge:hover {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.15);
|
||
border-color: rgb(from var(--agent-color) r g b / 0.3);
|
||
}
|
||
|
||
/* Agent dot indicator */
|
||
.agent-dot {
|
||
background: var(--agent-color);
|
||
}
|
||
|
||
/* Agent list item */
|
||
.agent-list-item:hover {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.05);
|
||
}
|
||
|
||
.agent-list-item.active {
|
||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||
border-color: rgb(from var(--agent-color) r g b / 0.2);
|
||
}
|
||
}
|