106 lines
4.0 KiB
CSS
106 lines
4.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
/* Consumer projects can override these accent tokens after importing @panic/web-ui styles. */
|
|
--accent-300: 168 155 191;
|
|
--accent-400: 149 135 173;
|
|
--accent-500: 125 111 152;
|
|
--accent-600: 106 93 132;
|
|
--accent-contrast: 255 255 255;
|
|
--bg-page: #16121a;
|
|
--surface-bg: rgba(24, 24, 27, 0.45);
|
|
--surface-bg-strong: rgba(24, 24, 27, 0.62);
|
|
--datepicker-menu-bg: #18181b;
|
|
--surface-border: rgba(82, 82, 91, 0.6);
|
|
--surface-divider: rgba(63, 63, 70, 0.85);
|
|
--text-primary: #d5cfdf;
|
|
--text-secondary: #bcb7c8;
|
|
--text-muted: #a1a1aa;
|
|
--text-soft: #8f8b9c;
|
|
--field-bg: rgba(24, 24, 27, 0.6);
|
|
--field-border: #3f3f46;
|
|
--field-disabled-bg: rgba(24, 24, 27, 0.5);
|
|
--field-disabled-border: #3f3f46;
|
|
--field-disabled-text: #bbb6c3;
|
|
--field-disabled-placeholder: #71717a;
|
|
--field-selection-bg: rgb(var(--accent-500) / 0.42);
|
|
--field-selection-text: var(--text-primary);
|
|
--ghost-bg: rgba(24, 24, 27, 0.5);
|
|
--ghost-border: #3f3f46;
|
|
--ghost-hover: rgba(39, 39, 42, 0.7);
|
|
--ghost-disabled-bg: rgba(24, 24, 27, 0.3);
|
|
--ghost-disabled-border: #27272a;
|
|
--ghost-disabled-text: #71717a;
|
|
--primary-disabled-bg: #3f3f46;
|
|
--primary-disabled-text: #a1a1aa;
|
|
--table-head-bg: rgba(24, 24, 27, 0.8);
|
|
--table-row-divider: #27272a;
|
|
--auth-chrome-bg: rgba(24, 24, 27, 0.7);
|
|
--auth-glass-blur: 22px;
|
|
--auth-sidebar-mobile-width: min(86vw, 320px);
|
|
--auth-right-sidebar-mobile-width: min(86vw, 340px);
|
|
--error-border: rgba(252, 165, 165, 0.3);
|
|
--error-bg: rgba(239, 68, 68, 0.1);
|
|
--error-text: #fecaca;
|
|
--mdx-link: rgb(var(--accent-500));
|
|
--mdx-link-hover: rgb(var(--accent-400));
|
|
--mdx-inline-code-bg: #27272a;
|
|
--mdx-inline-code-border: #3f3f46;
|
|
--mdx-codeblock-bg: #18181b;
|
|
--mdx-codeblock-border: #3f3f46;
|
|
--mdx-codeblock-text: #e4e4e7;
|
|
--mdx-codeblock-gutter: #a1a1aa;
|
|
--mdx-codeblock-active: #27272a;
|
|
--mdx-codeblock-selection: rgb(var(--accent-500) / 0.35);
|
|
--mdx-codeblock-bracket: rgb(var(--accent-500) / 0.45);
|
|
--shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
:root[data-theme='light'] {
|
|
--bg-page: #f7f7fb;
|
|
--surface-bg: rgba(255, 255, 255, 0.9);
|
|
--surface-bg-strong: rgba(255, 255, 255, 0.98);
|
|
--datepicker-menu-bg: #ffffff;
|
|
--surface-border: rgba(161, 161, 170, 0.45);
|
|
--surface-divider: rgba(212, 212, 216, 0.9);
|
|
--text-primary: #52485c;
|
|
--text-secondary: #514e60;
|
|
--text-muted: #52525b;
|
|
--text-soft: #71717a;
|
|
--field-bg: rgba(253, 253, 253, 0.8);
|
|
--field-border: #d4d4d8;
|
|
--field-disabled-bg: rgba(248, 248, 248, 0.8);
|
|
--field-disabled-border: #d7d7d7;
|
|
--field-disabled-text: #71717a;
|
|
--field-disabled-placeholder: #a1a1aa;
|
|
--field-selection-bg: rgb(var(--accent-500) / 0.24);
|
|
--field-selection-text: var(--text-primary);
|
|
--ghost-bg: rgba(255, 255, 255, 0.88);
|
|
--ghost-border: #d4d4d8;
|
|
--ghost-hover: #f4f4f5;
|
|
--ghost-disabled-bg: #f4f4f5;
|
|
--ghost-disabled-border: #e4e4e7;
|
|
--ghost-disabled-text: #a1a1aa;
|
|
--primary-disabled-bg: #e4e4e7;
|
|
--primary-disabled-text: #a1a1aa;
|
|
--table-head-bg: #f4f4f5;
|
|
--table-row-divider: #e4e4e7;
|
|
--auth-chrome-bg: rgba(255, 255, 255, 0.7);
|
|
--auth-glass-blur: 15px;
|
|
--error-border: rgba(248, 113, 113, 0.35);
|
|
--error-bg: rgba(254, 226, 226, 0.8);
|
|
--error-text: #991b1b;
|
|
--mdx-link: rgb(var(--accent-500));
|
|
--mdx-link-hover: rgb(var(--accent-600));
|
|
--mdx-inline-code-bg: #f4f4f5;
|
|
--mdx-inline-code-border: #d4d4d8;
|
|
--mdx-codeblock-bg: #ffffff;
|
|
--mdx-codeblock-border: #d4d4d8;
|
|
--mdx-codeblock-text: #18181b;
|
|
--mdx-codeblock-gutter: #71717a;
|
|
--mdx-codeblock-active: #f4f4f5;
|
|
--mdx-codeblock-selection: rgb(var(--accent-500) / 0.22);
|
|
--mdx-codeblock-bracket: rgb(var(--accent-500) / 0.32);
|
|
--shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
|
|
}
|