/* ============================================================================= ChatGPT / OpenAI theme — framework-agnostic ----------------------------------------------------------------------------- Значения взяты 1:1 из официального дизайн-системы OpenAI Apps SDK UI (@openai/apps-sdk-ui@0.2.2, dist/es/styles/*). Это та же палитра, шрифты, радиусы и тени, что используются в интерфейсе ChatGPT. Чистый CSS без Tailwind/@theme — можно подключить в любом проекте. Тема переключается атрибутом data-theme="light" | "dark" на . По умолчанию (без атрибута) — светлая. Блок prefers-color-scheme внизу включает тёмную автоматически по системной настройке. Полная официальная версия с токенами компонентов лежит в ./chatgpt/. ============================================================================= */ :root { /* ---- Шрифты (системный стек, как в ChatGPT) ---- */ --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---- Типографическая шкала (size / line-height) ---- */ --font-heading-5xl: 4.5rem/4.5rem; /* 72 / 72 */ --font-heading-4xl: 3.75rem/3.75rem; /* 60 / 60 */ --font-heading-3xl: 3rem/3rem; /* 48 / 48 */ --font-heading-2xl: 2.25rem/2.625rem; /* 36 / 42 */ --font-heading-xl: 2rem/2.375rem; /* 32 / 38 */ --font-heading-lg: 1.5rem/1.75rem; /* 24 / 28 */ --font-heading-md: 1.25rem/1.625rem; /* 20 / 26 */ --font-heading-sm: 1.125rem/1.625rem; /* 18 / 26 */ --font-heading-xs: 1rem/1.5rem; /* 16 / 24 */ --font-text-lg: 1.125rem/1.8125rem; /* 18 / 29 */ --font-text-md: 1rem/1.5rem; /* 16 / 24 */ --font-text-sm: 0.875rem/1.25rem; /* 14 / 20 */ --font-text-xs: 0.75rem/1.125rem; /* 12 / 18 */ /* ---- Радиусы ---- */ --radius-2xs: 0.125rem; /* 2px */ --radius-xs: 0.25rem; /* 4px */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.625rem; /* 10px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.25rem; /* 20px */ --radius-4xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ---- Шаг сетки/отступов (база 4px) ---- */ --spacing: 0.25rem; /* ---- Брейкпоинты ---- */ --breakpoint-xs: 380px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* ---- Движение ---- */ --cubic-enter: cubic-bezier(0.19, 1, 0.22, 1); --cubic-exit: cubic-bezier(0.8, 0, 0.4, 1); --transition-duration-basic: 150ms; /* ---- Акцент (фирменный зелёный OpenAI) ---- */ --green-400: #04b84c; --green-500: #00a240; --green-600: #008635; --green-700: #00692a; /* ---- Статусные цвета ---- */ --blue-500: #0169cc; /* info / focus ring */ --orange-500: #e25507; /* warning */ --yellow-600: #ba8e00; /* caution */ --red-500: #e02e2a; /* danger */ --purple-500: #8046d9; /* discovery */ --white: #ffffff; --black: #000000; } /* =========================== СВЕТЛАЯ ТЕМА (по умолчанию) =================== */ :root, [data-theme="light"] { color-scheme: light; /* Серая шкала */ --gray-0: #ffffff; --gray-50: #f9f9f9; --gray-75: #f3f3f3; --gray-100: #ededed; --gray-150: #dfdfdf; --gray-200: #cdcdcd; --gray-400: #8f8f8f; --gray-500: #5d5d5d; --gray-600: #414141; --gray-800: #212121; --gray-900: #181818; --gray-1000: #0d0d0d; /* Поверхности */ --color-surface: var(--gray-0); /* основной фон страницы — #ffffff */ --color-surface-secondary: var(--gray-50); /* боковая панель / секции — #f9f9f9 */ --color-surface-tertiary: var(--gray-75); /* #f3f3f3 */ --color-surface-elevated: var(--gray-0); /* Текст */ --color-text: var(--gray-1000); /* основной — #0d0d0d */ --color-text-secondary: var(--gray-500); /* #5d5d5d */ --color-text-tertiary: var(--gray-400); /* #8f8f8f */ --color-text-inverse: var(--gray-0); /* Границы */ --color-border-subtle: rgb(13 13 13 / 5%); --color-border: rgb(13 13 13 / 10%); --color-border-strong: rgb(13 13 13 / 15%); /* Кнопка-«primary» (тёмная заливка на светлом фоне — фирменный приём ChatGPT) */ --color-primary-bg: var(--gray-900); --color-primary-bg-hover: var(--gray-600); --color-primary-text: var(--gray-0); /* Фокус-ринг */ --color-ring: var(--blue-500); /* Тени */ --shadow-100: 0 1px 2px -1px rgb(0 0 0 / 8%); --shadow-200: 0 2px 4px -1px rgb(0 0 0 / 8%); --shadow-300: 0 4px 8px -2px rgb(0 0 0 / 10%); --shadow-400: 0 8px 16px -4px rgb(0 0 0 / 12%); --scrollbar-color: rgb(13 13 13 / 30%); } /* =============================== ТЁМНАЯ ТЕМА ============================== */ [data-theme="dark"] { color-scheme: dark; /* Серая шкала (инвертирована) */ --gray-0: #0d0d0d; --gray-50: #131313; --gray-75: #161616; --gray-100: #181818; --gray-150: #1c1c1c; --gray-200: #212121; --gray-400: #414141; --gray-500: #767676; --gray-600: #8f8f8f; --gray-800: #cdcdcd; --gray-900: #ededed; --gray-1000: #ffffff; /* Поверхности — основной фон ChatGPT dark = #212121 */ --color-surface: var(--gray-200); /* #212121 */ --color-surface-secondary: var(--gray-100); /* #181818 */ --color-surface-tertiary: var(--gray-50); /* #131313 */ --color-surface-elevated: var(--gray-300, #303030); /* Текст */ --color-text: var(--gray-1000); /* #ffffff */ --color-text-secondary: #afafaf; --color-text-tertiary: #8f8f8f; --color-text-inverse: #0d0d0d; /* Границы */ --color-border-subtle: rgb(255 255 255 / 6%); --color-border: rgb(255 255 255 / 12%); --color-border-strong: rgb(255 255 255 / 20%); /* Primary-кнопка (светлая заливка на тёмном фоне) */ --color-primary-bg: var(--gray-900); --color-primary-bg-hover: var(--gray-800); --color-primary-text: #0d0d0d; --color-ring: #0285ff; --shadow-100: 0 1px 2px -1px rgb(0 0 0 / 20%); --shadow-200: 0 2px 4px -1px rgb(0 0 0 / 20%); --shadow-300: 0 4px 8px -2px rgb(0 0 0 / 36%); --shadow-400: 0 8px 16px -4px rgb(0 0 0 / 30%); --scrollbar-color: rgb(255 255 255 / 30%); } /* Автоопределение по системе, если data-theme не задан вручную */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --gray-0: #0d0d0d; --gray-50: #131313; --gray-75: #161616; --gray-100: #181818; --gray-150: #1c1c1c; --gray-200: #212121; --gray-400: #414141; --gray-500: #767676; --gray-600: #8f8f8f; --gray-800: #cdcdcd; --gray-900: #ededed; --gray-1000: #ffffff; --color-surface: var(--gray-200); --color-surface-secondary: var(--gray-100); --color-surface-tertiary: var(--gray-50); --color-surface-elevated: #303030; --color-text: var(--gray-1000); --color-text-secondary: #afafaf; --color-text-tertiary: #8f8f8f; --color-text-inverse: #0d0d0d; --color-border-subtle: rgb(255 255 255 / 6%); --color-border: rgb(255 255 255 / 12%); --color-border-strong: rgb(255 255 255 / 20%); --color-primary-text: #0d0d0d; --color-ring: #0285ff; --shadow-100: 0 1px 2px -1px rgb(0 0 0 / 20%); --shadow-200: 0 2px 4px -1px rgb(0 0 0 / 20%); --shadow-300: 0 4px 8px -2px rgb(0 0 0 / 36%); --shadow-400: 0 8px 16px -4px rgb(0 0 0 / 30%); --scrollbar-color: rgb(255 255 255 / 30%); } } /* ---- Базовые глобальные стили (по образцу globals из дизайн-системы) ---- */ html { color: var(--color-text); background-color: var(--color-surface); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } b, strong { font-weight: var(--font-weight-semibold); } * { scrollbar-color: var(--scrollbar-color) transparent; scrollbar-width: thin; }