/* ============================================================================ REGEX — дизайн-система документации API. Три слоя, в порядке каскада: 1. :root — примитивы: цветовые рампы, типографика, отступы, радиусы, тени, тайминги. 2. :root / [data-theme=light] — семантика светлой темы. 3. [data-theme=dark] — семантика тёмной. 4. Слой совместимости — старые имена (--color-*, --text-*), на которые ещё ссылается swagger-override. Тему переключает атрибут data-theme на . Без него берётся системная (prefers-color-scheme), поэтому страница выглядит правильно ещё до того, как отработает JS. Прозрачности пишем классической записью `rgba(var(--x-rgb), .1)`. Современная `rgba(R G B / A)` в браузере валидна, но polished внутри ReDoc парсит цвета сам и на ней падает — вместе со всей страницей. Цвета семантики НЕ прописывай литералом в компонентах: бери --bg-*, --text-*, --border-*. Иначе тема перестанет переключаться. ========================================================================= */ :root { /* ---------- 1. Примитивы: цветовые рампы ---------- */ /* primary */ --primary-50: var(--blue-50); /* #e6f5fe (1×) */ --primary-50-rgb: var(--blue-50-rgb); --primary-100: var(--blue-100); /* #b0defd (1×) */ --primary-100-rgb: var(--blue-100-rgb); --primary-200: var(--blue-200); /* #8acffb (1×) */ --primary-200-rgb: var(--blue-200-rgb); --primary-300: var(--blue-300); /* #54b9fa (1×) */ --primary-300-rgb: var(--blue-300-rgb); --primary-400: var(--blue-400); /* #33abf9 (1×) */ --primary-400-rgb: var(--blue-400-rgb); --primary-400-10: var(--blue-400-10); /* #33abf91a */ --primary-400-15: var(--blue-400-15); /* #33abf926 */ --primary-400-20: var(--blue-400-20); /* #33abf933 */ --primary-400-25: var(--blue-400-25); /* #33abf940 */ --primary-400-50: var(--blue-400-50); /* #33abf980 */ --primary-400-75: var(--blue-400-75); /* #33abf9bf */ --primary-400-90: var(--blue-400-90); /* #33abf9e6 */ --primary-500: var(--blue-500); /* #0096f7 (83×) */ --primary-500-rgb: var(--blue-500-rgb); --primary-500-10: var(--blue-500-10); /* #0096f71a (8×) */ --primary-500-15: var(--blue-500-15); /* #0096f726 (2×) */ --primary-500-20: var(--blue-500-20); /* #0096f733 (3×) */ --primary-500-25: var(--blue-500-25); /* #0096f740 (1×) */ --primary-500-50: var(--blue-500-50); /* #0096f780 (4×) */ --primary-500-75: var(--blue-500-75); /* #0096f7bf */ --primary-500-90: var(--blue-500-90); /* #0096f7e6 */ --primary-600: var(--blue-600); /* #0089e1 (2×) */ --primary-600-rgb: var(--blue-600-rgb); --primary-700: var(--blue-700); /* #006baf (1×) */ --primary-700-rgb: var(--blue-700-rgb); --primary-800: var(--blue-800); /* #005388 (1×) */ --primary-800-rgb: var(--blue-800-rgb); --primary-900: var(--blue-900); /* #003f68 (3×) */ --primary-900-rgb: var(--blue-900-rgb); --primary-950: var(--blue-950); /* #003f68 (3×) */ --primary-950-rgb: var(--blue-950-rgb); --primary-1000: var(--blue-1000); /* #003f68 (3×) */ --primary-1000-rgb: var(--blue-1000-rgb); /* blue */ --blue-50: #e6f5fe; /* (1×) */ --blue-50-rgb: 230, 245, 254; --blue-100: #b0defd; /* (1×) */ --blue-100-rgb: 176, 222, 253; --blue-200: #8acffb; /* (1×) */ --blue-200-rgb: 138, 207, 251; --blue-300: #54b9fa; /* (1×) */ --blue-300-rgb: 84, 185, 250; --blue-400: #33abf9; /* (1×) */ --blue-400-rgb: 51, 171, 249; --blue-400-10: rgba(var(--blue-400-rgb), 0.1); /* #33abf91a */ --blue-400-15: rgba(var(--blue-400-rgb), 0.15); /* #33abf926 */ --blue-400-20: rgba(var(--blue-400-rgb), 0.2); /* #33abf933 */ --blue-400-25: rgba(var(--blue-400-rgb), 0.25); /* #33abf940 */ --blue-400-50: rgba(var(--blue-400-rgb), 0.5); /* #33abf980 */ --blue-400-75: rgba(var(--blue-400-rgb), 0.75); /* #33abf9bf */ --blue-400-90: rgba(var(--blue-400-rgb), 0.9); /* #33abf9e6 */ --blue-500: #0096f7; /* (83×) */ --blue-500-rgb: 0, 150, 247; --blue-500-10: rgba(var(--blue-500-rgb), 0.1); /* #0096f71a (8×) */ --blue-500-15: rgba(var(--blue-500-rgb), 0.15); /* #0096f726 (2×) */ --blue-500-20: rgba(var(--blue-500-rgb), 0.2); /* #0096f733 (3×) */ --blue-500-25: rgba(var(--blue-500-rgb), 0.25); /* #0096f740 (1×) */ --blue-500-50: rgba(var(--blue-500-rgb), 0.5); /* #0096f780 (4×) */ --blue-500-75: rgba(var(--blue-500-rgb), 0.75); /* #0096f7bf */ --blue-500-90: rgba(var(--blue-500-rgb), 0.9); /* #0096f7e6 */ --blue-600: #0089e1; /* (2×) */ --blue-600-rgb: 0, 137, 225; --blue-700: #006baf; /* (1×) */ --blue-700-rgb: 0, 107, 175; --blue-800: #005388; /* (1×) */ --blue-800-rgb: 0, 83, 136; --blue-900: #003f68; /* (3×) */ --blue-900-rgb: 0, 63, 104; --blue-950: #003f68; /* (3×) */ --blue-950-rgb: 0, 63, 104; --blue-1000: #003f68; /* (3×) */ --blue-1000-rgb: 0, 63, 104; /* slate */ --slate-50: #f5f8ff; /* (1×) */ --slate-50-rgb: 245, 248, 255; --slate-100: #ebf3ff; /* (50×) */ --slate-100-rgb: 235, 243, 255; --slate-200: #d6e2f5; /* (5×) */ --slate-200-rgb: 214, 226, 245; --slate-300: #b8c9e6; /* (4×) */ --slate-300-rgb: 184, 201, 230; --slate-400: #8fa7d1; /* (2×) */ --slate-400-rgb: 143, 167, 209; --slate-500: #6b84b5; /* (11×) */ --slate-500-rgb: 107, 132, 181; --slate-500-10: rgba(var(--slate-500-rgb), 0.1); /* #6b84b51a */ --slate-500-25: rgba(var(--slate-500-rgb), 0.25); /* #6b84b540 */ --slate-500-50: rgba(var(--slate-500-rgb), 0.5); /* #6b84b580 */ --slate-600: #4d6294; /* (8×) */ --slate-600-rgb: 77, 98, 148; --slate-700: #344573; /* (4×) */ --slate-700-rgb: 52, 69, 115; --slate-800: #1f2c57; /* (2×) */ --slate-800-rgb: 31, 44, 87; --slate-900: #101b4d; /* (2×) */ --slate-900-rgb: 16, 27, 77; --slate-950: #031242; /* (172×) */ --slate-950-rgb: 3, 18, 66; --slate-950-10: rgba(var(--slate-950-rgb), 0.1); /* #0312421a (60×) */ --slate-950-25: rgba(var(--slate-950-rgb), 0.25); /* #03124240 (7×) */ --slate-950-50: rgba(var(--slate-950-rgb), 0.5); /* #03124280 (18×) */ --slate-1000: #020a26; /* (3×) */ --slate-1000-rgb: 2, 10, 38; /* neutral */ --neutral-50: var(--slate-50); /* #f5f8ff (1×) */ --neutral-50-rgb: var(--slate-50-rgb); --neutral-100: var(--slate-100); /* #ebf3ff (50×) */ --neutral-100-rgb: var(--slate-100-rgb); --neutral-200: var(--slate-200); /* #d6e2f5 (5×) */ --neutral-200-rgb: var(--slate-200-rgb); --neutral-300: var(--slate-300); /* #b8c9e6 (4×) */ --neutral-300-rgb: var(--slate-300-rgb); --neutral-400: var(--slate-400); /* #8fa7d1 (2×) */ --neutral-400-rgb: var(--slate-400-rgb); --neutral-500: var(--slate-500); /* #6b84b5 (11×) */ --neutral-500-rgb: var(--slate-500-rgb); --neutral-500-10: var(--slate-500-10); /* #6b84b51a */ --neutral-500-25: var(--slate-500-25); /* #6b84b540 */ --neutral-500-50: var(--slate-500-50); /* #6b84b580 */ --neutral-600: var(--slate-600); /* #4d6294 (8×) */ --neutral-600-rgb: var(--slate-600-rgb); --neutral-700: var(--slate-700); /* #344573 (4×) */ --neutral-700-rgb: var(--slate-700-rgb); --neutral-800: var(--slate-800); /* #1f2c57 (2×) */ --neutral-800-rgb: var(--slate-800-rgb); --neutral-900: var(--slate-900); /* #101b4d (2×) */ --neutral-900-rgb: var(--slate-900-rgb); --neutral-950: var(--slate-950); /* #031242 (172×) */ --neutral-950-rgb: var(--slate-950-rgb); --neutral-950-10: var(--slate-950-10); /* #0312421a (60×) */ --neutral-950-25: var(--slate-950-25); /* #03124240 (7×) */ --neutral-950-50: var(--slate-950-50); /* #03124280 (18×) */ --neutral-1000: var(--slate-1000); /* #020a26 (3×) */ --neutral-1000-rgb: var(--slate-1000-rgb); /* gray */ --gray-50: #f9fafb; /* (1×) */ --gray-50-rgb: 249, 250, 251; --gray-100: #f3f4f6; /* (2×) */ --gray-100-rgb: 243, 244, 246; --gray-200: #e5e7eb; /* (1×) */ --gray-200-rgb: 229, 231, 235; --gray-300: #d1d5db; /* (2×) */ --gray-300-rgb: 209, 213, 219; --gray-400: #9ca3af; /* (3×) */ --gray-400-rgb: 156, 163, 175; --gray-500: #6b7280; /* (2×) */ --gray-500-rgb: 107, 114, 128; --gray-500-10: rgba(var(--gray-500-rgb), 0.1); /* #6b72801a */ --gray-500-25: rgba(var(--gray-500-rgb), 0.25); /* #6b728040 */ --gray-500-50: rgba(var(--gray-500-rgb), 0.5); /* #6b728080 */ --gray-600: #4b5563; /* (2×) */ --gray-600-rgb: 75, 85, 99; --gray-700: #374151; /* (1×) */ --gray-700-rgb: 55, 65, 81; --gray-800: #1f2937; /* (8×) */ --gray-800-rgb: 31, 41, 55; --gray-900: #111827; /* (1×) */ --gray-900-rgb: 17, 24, 39; --gray-950: #0b0f1a; /* (1×) */ --gray-950-rgb: 11, 15, 26; --gray-950-10: rgba(var(--gray-950-rgb), 0.1); /* #0b0f1a1a */ --gray-950-25: rgba(var(--gray-950-rgb), 0.25); /* #0b0f1a40 */ --gray-950-50: rgba(var(--gray-950-rgb), 0.5); /* #0b0f1a80 */ --gray-1000: #000000; /* (28×) */ --gray-1000-rgb: 0, 0, 0; /* white */ --white-50: rgba(var(--white-base-rgb), 0.05); /* #ffffff0d */ --white-100: rgba(var(--white-base-rgb), 0.1); /* #ffffff1a */ --white-200: rgba(var(--white-base-rgb), 0.2); /* #ffffff33 (11×) */ --white-300: rgba(var(--white-base-rgb), 0.3); /* #ffffff4d (5×) */ --white-400: rgba(var(--white-base-rgb), 0.4); /* #ffffff66 (4×) */ --white-500: rgba(var(--white-base-rgb), 0.5); /* #ffffff80 (6×) */ --white-600: rgba(var(--white-base-rgb), 0.6); /* #ffffff99 (7×) */ --white-700: rgba(var(--white-base-rgb), 0.7); /* #ffffffb3 (6×) */ --white-800: rgba(var(--white-base-rgb), 0.8); /* #ffffffcc (1×) */ --white-900: rgba(var(--white-base-rgb), 0.9); /* #ffffffe6 (4×) */ --white-1000: rgba(var(--white-base-rgb), 1); /* #ffffff (269×) */ --white-1000-rgb: 255, 255, 255; /* green */ --green-50: #e7f8f0; /* (4×) */ --green-50-rgb: 231, 248, 240; --green-100: #b6e9d1; /* (1×) */ --green-100-rgb: 182, 233, 209; --green-200: #92deba; /* (1×) */ --green-200-rgb: 146, 222, 186; --green-300: #60cf9b; /* (1×) */ --green-300-rgb: 96, 207, 155; --green-400: #41c588; /* (1×) */ --green-400-rgb: 65, 197, 136; --green-400-10: rgba(var(--green-400-rgb), 0.1); /* #41c5881a */ --green-400-15: rgba(var(--green-400-rgb), 0.15); /* #41c58826 */ --green-400-20: rgba(var(--green-400-rgb), 0.2); /* #41c58833 */ --green-400-25: rgba(var(--green-400-rgb), 0.25); /* #41c58840 */ --green-400-50: rgba(var(--green-400-rgb), 0.5); /* #41c58880 */ --green-400-75: rgba(var(--green-400-rgb), 0.75); /* #41c588bf */ --green-400-90: rgba(var(--green-400-rgb), 0.9); /* #41c588e6 */ --green-500: #12b76a; /* (5×) */ --green-500-rgb: 18, 183, 106; --green-500-10: rgba(var(--green-500-rgb), 0.1); /* #12b76a1a */ --green-500-15: rgba(var(--green-500-rgb), 0.15); /* #12b76a26 */ --green-500-20: rgba(var(--green-500-rgb), 0.2); /* #12b76a33 (1×) */ --green-500-25: rgba(var(--green-500-rgb), 0.25); /* #12b76a40 */ --green-500-50: rgba(var(--green-500-rgb), 0.5); /* #12b76a80 (3×) */ --green-500-75: rgba(var(--green-500-rgb), 0.75); /* #12b76abf */ --green-500-90: rgba(var(--green-500-rgb), 0.9); /* #12b76ae6 */ --green-600: #10a760; /* (2×) */ --green-600-rgb: 16, 167, 96; --green-700: #0d824b; /* (1×) */ --green-700-rgb: 13, 130, 75; --green-800: #0a653a; /* (1×) */ --green-800-rgb: 10, 101, 58; --green-900: #084d2d; /* (3×) */ --green-900-rgb: 8, 77, 45; --green-950: #084d2d; /* (3×) */ --green-950-rgb: 8, 77, 45; --green-1000: #084d2d; /* (3×) */ --green-1000-rgb: 8, 77, 45; /* success */ --success-50: var(--green-50); /* #e7f8f0 (4×) */ --success-50-rgb: var(--green-50-rgb); --success-100: var(--green-100); /* #b6e9d1 (1×) */ --success-100-rgb: var(--green-100-rgb); --success-200: var(--green-200); /* #92deba (1×) */ --success-200-rgb: var(--green-200-rgb); --success-300: var(--green-300); /* #60cf9b (1×) */ --success-300-rgb: var(--green-300-rgb); --success-400: var(--green-400); /* #41c588 (1×) */ --success-400-rgb: var(--green-400-rgb); --success-400-10: var(--green-400-10); /* #41c5881a */ --success-400-15: var(--green-400-15); /* #41c58826 */ --success-400-20: var(--green-400-20); /* #41c58833 */ --success-400-25: var(--green-400-25); /* #41c58840 */ --success-400-50: var(--green-400-50); /* #41c58880 */ --success-400-75: var(--green-400-75); /* #41c588bf */ --success-400-90: var(--green-400-90); /* #41c588e6 */ --success-500: var(--green-500); /* #12b76a (5×) */ --success-500-rgb: var(--green-500-rgb); --success-500-10: var(--green-500-10); /* #12b76a1a */ --success-500-15: var(--green-500-15); /* #12b76a26 */ --success-500-20: var(--green-500-20); /* #12b76a33 (1×) */ --success-500-25: var(--green-500-25); /* #12b76a40 */ --success-500-50: var(--green-500-50); /* #12b76a80 (3×) */ --success-500-75: var(--green-500-75); /* #12b76abf */ --success-500-90: var(--green-500-90); /* #12b76ae6 */ --success-600: var(--green-600); /* #10a760 (2×) */ --success-600-rgb: var(--green-600-rgb); --success-700: var(--green-700); /* #0d824b (1×) */ --success-700-rgb: var(--green-700-rgb); --success-800: var(--green-800); /* #0a653a (1×) */ --success-800-rgb: var(--green-800-rgb); --success-900: var(--green-900); /* #084d2d (3×) */ --success-900-rgb: var(--green-900-rgb); --success-950: var(--green-950); /* #084d2d (3×) */ --success-950-rgb: var(--green-950-rgb); --success-1000: var(--green-1000); /* #084d2d (3×) */ --success-1000-rgb: var(--green-1000-rgb); /* red */ --red-50: #fdeceb; /* (2×) */ --red-50-rgb: 253, 236, 235; --red-100: #f8c5c1; /* (1×) */ --red-100-rgb: 248, 197, 193; --red-200: #f5a9a3; /* (1×) */ --red-200-rgb: 245, 169, 163; --red-300: #f18179; /* (1×) */ --red-300-rgb: 241, 129, 121; --red-400: #ee695f; /* (1×) */ --red-400-rgb: 238, 105, 95; --red-400-10: rgba(var(--red-400-rgb), 0.1); /* #ee695f1a */ --red-400-15: rgba(var(--red-400-rgb), 0.15); /* #ee695f26 */ --red-400-20: rgba(var(--red-400-rgb), 0.2); /* #ee695f33 */ --red-400-25: rgba(var(--red-400-rgb), 0.25); /* #ee695f40 */ --red-400-50: rgba(var(--red-400-rgb), 0.5); /* #ee695f80 */ --red-400-75: rgba(var(--red-400-rgb), 0.75); /* #ee695fbf */ --red-400-90: rgba(var(--red-400-rgb), 0.9); /* #ee695fe6 */ --red-500: #ea4337; /* (11×) */ --red-500-rgb: 234, 67, 55; --red-500-10: rgba(var(--red-500-rgb), 0.1); /* #ea43371a */ --red-500-15: rgba(var(--red-500-rgb), 0.15); /* #ea433726 */ --red-500-20: rgba(var(--red-500-rgb), 0.2); /* #ea433733 */ --red-500-25: rgba(var(--red-500-rgb), 0.25); /* #ea433740 */ --red-500-50: rgba(var(--red-500-rgb), 0.5); /* #ea433780 (2×) */ --red-500-75: rgba(var(--red-500-rgb), 0.75); /* #ea4337bf */ --red-500-90: rgba(var(--red-500-rgb), 0.9); /* #ea4337e6 */ --red-600: #d53d32; /* (4×) */ --red-600-rgb: 213, 61, 50; --red-700: #a63027; /* (2×) */ --red-700-rgb: 166, 48, 39; --red-800: #81251e; /* (1×) */ --red-800-rgb: 129, 37, 30; --red-900: #621c17; /* (3×) */ --red-900-rgb: 98, 28, 23; --red-950: #621c17; /* (3×) */ --red-950-rgb: 98, 28, 23; --red-1000: #621c17; /* (3×) */ --red-1000-rgb: 98, 28, 23; /* error */ --error-50: var(--red-50); /* #fdeceb (2×) */ --error-50-rgb: var(--red-50-rgb); --error-100: var(--red-100); /* #f8c5c1 (1×) */ --error-100-rgb: var(--red-100-rgb); --error-200: var(--red-200); /* #f5a9a3 (1×) */ --error-200-rgb: var(--red-200-rgb); --error-300: var(--red-300); /* #f18179 (1×) */ --error-300-rgb: var(--red-300-rgb); --error-400: var(--red-400); /* #ee695f (1×) */ --error-400-rgb: var(--red-400-rgb); --error-400-10: var(--red-400-10); /* #ee695f1a */ --error-400-15: var(--red-400-15); /* #ee695f26 */ --error-400-20: var(--red-400-20); /* #ee695f33 */ --error-400-25: var(--red-400-25); /* #ee695f40 */ --error-400-50: var(--red-400-50); /* #ee695f80 */ --error-400-75: var(--red-400-75); /* #ee695fbf */ --error-400-90: var(--red-400-90); /* #ee695fe6 */ --error-500: var(--red-500); /* #ea4337 (11×) */ --error-500-rgb: var(--red-500-rgb); --error-500-10: var(--red-500-10); /* #ea43371a */ --error-500-15: var(--red-500-15); /* #ea433726 */ --error-500-20: var(--red-500-20); /* #ea433733 */ --error-500-25: var(--red-500-25); /* #ea433740 */ --error-500-50: var(--red-500-50); /* #ea433780 (2×) */ --error-500-75: var(--red-500-75); /* #ea4337bf */ --error-500-90: var(--red-500-90); /* #ea4337e6 */ --error-600: var(--red-600); /* #d53d32 (4×) */ --error-600-rgb: var(--red-600-rgb); --error-700: var(--red-700); /* #a63027 (2×) */ --error-700-rgb: var(--red-700-rgb); --error-800: var(--red-800); /* #81251e (1×) */ --error-800-rgb: var(--red-800-rgb); --error-900: var(--red-900); /* #621c17 (3×) */ --error-900-rgb: var(--red-900-rgb); --error-950: var(--red-950); /* #621c17 (3×) */ --error-950-rgb: var(--red-950-rgb); --error-1000: var(--red-1000); /* #621c17 (3×) */ --error-1000-rgb: var(--red-1000-rgb); /* orange */ --orange-50: #fff3e6; /* (3×) */ --orange-50-rgb: 255, 243, 230; --orange-100: #ffdbb0; /* (1×) */ --orange-100-rgb: 255, 219, 176; --orange-200: #ffc98a; /* (1×) */ --orange-200-rgb: 255, 201, 138; --orange-300: #ffb154; /* (1×) */ --orange-300-rgb: 255, 177, 84; --orange-400: #ffa133; /* (1×) */ --orange-400-rgb: 255, 161, 51; --orange-400-10: rgba(var(--orange-400-rgb), 0.1); /* #ffa1331a */ --orange-400-15: rgba(var(--orange-400-rgb), 0.15); /* #ffa13326 */ --orange-400-20: rgba(var(--orange-400-rgb), 0.2); /* #ffa13333 */ --orange-400-25: rgba(var(--orange-400-rgb), 0.25); /* #ffa13340 */ --orange-400-50: rgba(var(--orange-400-rgb), 0.5); /* #ffa13380 */ --orange-400-75: rgba(var(--orange-400-rgb), 0.75); /* #ffa133bf */ --orange-400-90: rgba(var(--orange-400-rgb), 0.9); /* #ffa133e6 */ --orange-500: #ff8a00; /* (5×) */ --orange-500-rgb: 255, 138, 0; --orange-500-10: rgba(var(--orange-500-rgb), 0.1); /* #ff8a001a */ --orange-500-15: rgba(var(--orange-500-rgb), 0.15); /* #ff8a0026 */ --orange-500-20: rgba(var(--orange-500-rgb), 0.2); /* #ff8a0033 */ --orange-500-25: rgba(var(--orange-500-rgb), 0.25); /* #ff8a0040 */ --orange-500-50: rgba(var(--orange-500-rgb), 0.5); /* #ff8a0080 (3×) */ --orange-500-75: rgba(var(--orange-500-rgb), 0.75); /* #ff8a00bf */ --orange-500-90: rgba(var(--orange-500-rgb), 0.9); /* #ff8a00e6 */ --orange-600: #e87e00; /* (2×) */ --orange-600-rgb: 232, 126, 0; --orange-700: #b56200; /* (1×) */ --orange-700-rgb: 181, 98, 0; --orange-800: #8c4c00; /* (2×) */ --orange-800-rgb: 140, 76, 0; --orange-900: #6b3a00; /* (3×) */ --orange-900-rgb: 107, 58, 0; --orange-950: #6b3a00; /* (3×) */ --orange-950-rgb: 107, 58, 0; --orange-1000: #6b3a00; /* (3×) */ --orange-1000-rgb: 107, 58, 0; /* warning */ --warning-50: var(--orange-50); /* #fff3e6 (3×) */ --warning-50-rgb: var(--orange-50-rgb); --warning-100: var(--orange-100); /* #ffdbb0 (1×) */ --warning-100-rgb: var(--orange-100-rgb); --warning-200: var(--orange-200); /* #ffc98a (1×) */ --warning-200-rgb: var(--orange-200-rgb); --warning-300: var(--orange-300); /* #ffb154 (1×) */ --warning-300-rgb: var(--orange-300-rgb); --warning-400: var(--orange-400); /* #ffa133 (1×) */ --warning-400-rgb: var(--orange-400-rgb); --warning-400-10: var(--orange-400-10); /* #ffa1331a */ --warning-400-15: var(--orange-400-15); /* #ffa13326 */ --warning-400-20: var(--orange-400-20); /* #ffa13333 */ --warning-400-25: var(--orange-400-25); /* #ffa13340 */ --warning-400-50: var(--orange-400-50); /* #ffa13380 */ --warning-400-75: var(--orange-400-75); /* #ffa133bf */ --warning-400-90: var(--orange-400-90); /* #ffa133e6 */ --warning-500: var(--orange-500); /* #ff8a00 (5×) */ --warning-500-rgb: var(--orange-500-rgb); --warning-500-10: var(--orange-500-10); /* #ff8a001a */ --warning-500-15: var(--orange-500-15); /* #ff8a0026 */ --warning-500-20: var(--orange-500-20); /* #ff8a0033 */ --warning-500-25: var(--orange-500-25); /* #ff8a0040 */ --warning-500-50: var(--orange-500-50); /* #ff8a0080 (3×) */ --warning-500-75: var(--orange-500-75); /* #ff8a00bf */ --warning-500-90: var(--orange-500-90); /* #ff8a00e6 */ --warning-600: var(--orange-600); /* #e87e00 (2×) */ --warning-600-rgb: var(--orange-600-rgb); --warning-700: var(--orange-700); /* #b56200 (1×) */ --warning-700-rgb: var(--orange-700-rgb); --warning-800: var(--orange-800); /* #8c4c00 (2×) */ --warning-800-rgb: var(--orange-800-rgb); --warning-900: var(--orange-900); /* #6b3a00 (3×) */ --warning-900-rgb: var(--orange-900-rgb); --warning-950: var(--orange-950); /* #6b3a00 (3×) */ --warning-950-rgb: var(--orange-950-rgb); --warning-1000: var(--orange-1000); /* #6b3a00 (3×) */ --warning-1000-rgb: var(--orange-1000-rgb); /* yellow */ --yellow-50: #fffaea; /* (1×) */ --yellow-50-rgb: 255, 250, 234; --yellow-100: #ffefbd; /* (1×) */ --yellow-100-rgb: 255, 239, 189; --yellow-200: #ffe79d; /* (1×) */ --yellow-200-rgb: 255, 231, 157; --yellow-300: #ffdb71; /* (1×) */ --yellow-300-rgb: 255, 219, 113; --yellow-400: #ffd555; /* (1×) */ --yellow-400-rgb: 255, 213, 85; --yellow-400-10: rgba(var(--yellow-400-rgb), 0.1); /* #ffd5551a */ --yellow-400-15: rgba(var(--yellow-400-rgb), 0.15); /* #ffd55526 */ --yellow-400-20: rgba(var(--yellow-400-rgb), 0.2); /* #ffd55533 */ --yellow-400-25: rgba(var(--yellow-400-rgb), 0.25); /* #ffd55540 */ --yellow-400-50: rgba(var(--yellow-400-rgb), 0.5); /* #ffd55580 */ --yellow-400-75: rgba(var(--yellow-400-rgb), 0.75); /* #ffd555bf */ --yellow-400-90: rgba(var(--yellow-400-rgb), 0.9); /* #ffd555e6 */ --yellow-500: #ffca2b; /* (6×) */ --yellow-500-rgb: 255, 202, 43; --yellow-500-10: rgba(var(--yellow-500-rgb), 0.1); /* #ffca2b1a (1×) */ --yellow-500-15: rgba(var(--yellow-500-rgb), 0.15); /* #ffca2b26 */ --yellow-500-20: rgba(var(--yellow-500-rgb), 0.2); /* #ffca2b33 */ --yellow-500-25: rgba(var(--yellow-500-rgb), 0.25); /* #ffca2b40 (1×) */ --yellow-500-50: rgba(var(--yellow-500-rgb), 0.5); /* #ffca2b80 */ --yellow-500-75: rgba(var(--yellow-500-rgb), 0.75); /* #ffca2bbf */ --yellow-500-90: rgba(var(--yellow-500-rgb), 0.9); /* #ffca2be6 */ --yellow-600: #e8b827; /* (1×) */ --yellow-600-rgb: 232, 184, 39; --yellow-700: #b58f1f; /* (1×) */ --yellow-700-rgb: 181, 143, 31; --yellow-800: #8c6f18; /* (1×) */ --yellow-800-rgb: 140, 111, 24; --yellow-900: #6b5512; /* (3×) */ --yellow-900-rgb: 107, 85, 18; --yellow-950: #6b5512; /* (3×) */ --yellow-950-rgb: 107, 85, 18; --yellow-1000: #6b5512; /* (3×) */ --yellow-1000-rgb: 107, 85, 18; /* info */ --info-50: var(--blue-50); /* #e6f5fe (1×) */ --info-50-rgb: var(--blue-50-rgb); --info-100: var(--blue-100); /* #b0defd (1×) */ --info-100-rgb: var(--blue-100-rgb); --info-200: var(--blue-200); /* #8acffb (1×) */ --info-200-rgb: var(--blue-200-rgb); --info-300: var(--blue-300); /* #54b9fa (1×) */ --info-300-rgb: var(--blue-300-rgb); --info-400: var(--blue-400); /* #33abf9 (1×) */ --info-400-rgb: var(--blue-400-rgb); --info-400-10: var(--blue-400-10); /* #33abf91a */ --info-400-15: var(--blue-400-15); /* #33abf926 */ --info-400-20: var(--blue-400-20); /* #33abf933 */ --info-400-25: var(--blue-400-25); /* #33abf940 */ --info-400-50: var(--blue-400-50); /* #33abf980 */ --info-400-75: var(--blue-400-75); /* #33abf9bf */ --info-400-90: var(--blue-400-90); /* #33abf9e6 */ --info-500: var(--blue-500); /* #0096f7 (83×) */ --info-500-rgb: var(--blue-500-rgb); --info-500-10: var(--blue-500-10); /* #0096f71a (8×) */ --info-500-15: var(--blue-500-15); /* #0096f726 (2×) */ --info-500-20: var(--blue-500-20); /* #0096f733 (3×) */ --info-500-25: var(--blue-500-25); /* #0096f740 (1×) */ --info-500-50: var(--blue-500-50); /* #0096f780 (4×) */ --info-500-75: var(--blue-500-75); /* #0096f7bf */ --info-500-90: var(--blue-500-90); /* #0096f7e6 */ --info-600: var(--blue-600); /* #0089e1 (2×) */ --info-600-rgb: var(--blue-600-rgb); --info-700: var(--blue-700); /* #006baf (1×) */ --info-700-rgb: var(--blue-700-rgb); --info-800: var(--blue-800); /* #005388 (1×) */ --info-800-rgb: var(--blue-800-rgb); --info-900: var(--blue-900); /* #003f68 (3×) */ --info-900-rgb: var(--blue-900-rgb); --info-950: var(--blue-950); /* #003f68 (3×) */ --info-950-rgb: var(--blue-950-rgb); --info-1000: var(--blue-1000); /* #003f68 (3×) */ --info-1000-rgb: var(--blue-1000-rgb); /* purple */ --purple-50: #f4e3ff; /* #f4e3ff (5×) */ --purple-50-rgb: 244, 227, 255; --purple-100: #eac5ff; /* #eac5ff (1×) */ --purple-100-rgb: 234, 197, 255; --purple-200: #e2a7ff; /* #e2a7ff (1×) */ --purple-200-rgb: 226, 167, 255; --purple-300: #db89ff; /* #db89ff (5×) */ --purple-300-rgb: 219, 137, 255; --purple-400: #cd64fe; /* #cd64fe (1×) */ --purple-400-rgb: 205, 100, 254; --purple-400-10: rgba(var(--purple-400-rgb), 0.1); /* #cd64fe1a */ --purple-400-15: rgba(var(--purple-400-rgb), 0.15); /* #cd64fe26 */ --purple-400-20: rgba(var(--purple-400-rgb), 0.2); /* #cd64fe33 */ --purple-400-25: rgba(var(--purple-400-rgb), 0.25); /* #cd64fe40 */ --purple-400-50: rgba(var(--purple-400-rgb), 0.5); /* #cd64fe80 */ --purple-400-75: rgba(var(--purple-400-rgb), 0.75); /* #cd64febf */ --purple-400-90: rgba(var(--purple-400-rgb), 0.9); /* #cd64fee6 */ --purple-500: #be40fb; /* #be40fb (5×) */ --purple-500-rgb: 190, 64, 251; --purple-500-10: rgba(var(--purple-500-rgb), 0.1); /* #be40fb1a */ --purple-500-15: rgba(var(--purple-500-rgb), 0.15); /* #be40fb26 */ --purple-500-20: rgba(var(--purple-500-rgb), 0.2); /* #be40fb33 */ --purple-500-25: rgba(var(--purple-500-rgb), 0.25); /* #be40fb40 */ --purple-500-50: rgba(var(--purple-500-rgb), 0.5); /* #be40fb80 */ --purple-500-75: rgba(var(--purple-500-rgb), 0.75); /* #be40fbbf */ --purple-500-90: rgba(var(--purple-500-rgb), 0.9); /* #be40fbe6 */ --purple-600: #ae1df9; /* #ae1df9 (2×) */ --purple-600-rgb: 174, 29, 249; --purple-700: #9909e7; /* #9909e7 (1×) */ --purple-700-rgb: 153, 9, 231; --purple-800: #7e09c0; /* #7e09c0 (2×) */ --purple-800-rgb: 126, 9, 192; --purple-900: #64099a; /* #64099a (2×) */ --purple-900-rgb: 100, 9, 154; /* Ступени 950 в исходной рампе не было, а --promotion-950 на неё ссылался — ссылка висела и цвет молча падал в inherit. Достроили серединой между 900 и 1000. */ --purple-950: #581e79; --purple-950-rgb: 88, 30, 121; --purple-1000: #4c3357; /* (1×) */ --purple-1000-rgb: 76, 51, 87; /* promotion */ --promotion-50: var(--purple-50); /* #f4e3ff (5×) */ --promotion-50-rgb: var(--purple-50-rgb); --promotion-100: var(--purple-100); /* #eac5ff (1×) */ --promotion-100-rgb: var(--purple-100-rgb); --promotion-200: var(--purple-200); /* #e2a7ff (1×) */ --promotion-200-rgb: var(--purple-200-rgb); --promotion-300: var(--purple-300); /* #db89ff (5×) */ --promotion-300-rgb: var(--purple-300-rgb); --promotion-400: var(--purple-400); /* #cd64fe (1×) */ --promotion-400-rgb: var(--purple-400-rgb); --promotion-400-10: var(--purple-400-10); /* #cd64fe1a */ --promotion-400-15: var(--purple-400-15); /* #cd64fe26 */ --promotion-400-20: var(--purple-400-20); /* #cd64fe33 */ --promotion-400-25: var(--purple-400-25); /* #cd64fe40 */ --promotion-400-50: var(--purple-400-50); /* #cd64fe80 */ --promotion-400-75: var(--purple-400-75); /* #cd64febf */ --promotion-400-90: var(--purple-400-90); /* #cd64fee6 */ --promotion-500: var(--purple-500); /* #be40fb (5×) */ --promotion-500-rgb: var(--purple-500-rgb); --promotion-500-10: var(--purple-500-10); /* #be40fb1a */ --promotion-500-15: var(--purple-500-15); /* #be40fb26 */ --promotion-500-20: var(--purple-500-20); /* #be40fb33 */ --promotion-500-25: var(--purple-500-25); /* #be40fb40 */ --promotion-500-50: var(--purple-500-50); /* #be40fb80 */ --promotion-500-75: var(--purple-500-75); /* #be40fbbf */ --promotion-500-90: var(--purple-500-90); /* #be40fbe6 */ --promotion-600: var(--purple-600); /* #ae1df9 (2×) */ --promotion-600-rgb: var(--purple-600-rgb); --promotion-700: var(--purple-700); /* #9909e7 (1×) */ --promotion-700-rgb: var(--purple-700-rgb); --promotion-800: var(--purple-800); /* #7e09c0 (2×) */ --promotion-800-rgb: var(--purple-800-rgb); --promotion-900: var(--purple-900); /* #64099a (2×) */ --promotion-900-rgb: var(--purple-900-rgb); --promotion-950: var(--purple-950); --promotion-950-rgb: var(--purple-950-rgb); --promotion-1000: var(--purple-1000); /* #4c3357 (1×) */ --promotion-1000-rgb: var(--purple-1000-rgb); /* ---------- 3. Типографика ---------- */ --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 36px; --font-size-5xl: 48px; --font-size-6xl: 60px; --font-size-7xl: 72px; --font-size-8xl: 96px; --font-size-9xl: 128px; /* line-height, по частоте в разметке */ --leading-none: 1; --leading-tight: 1.2; --leading-normal: 1.5; /* font-weight, встреченные начертания */ --weight-100: 100; /* 10× */ --weight-200: 200; /* 4× */ --weight-300: 300; /* 16× */ --weight-350: 350; /* 2× */ --weight-400: 400; /* 90× */ --weight-500: 500; /* 53× */ --weight-550: 550; /* 2× */ --weight-600: 600; /* 48× */ --weight-700: 700; /* 38× */ --weight-800: 800; /* 4× */ --weight-900: 900; /* 17× */ /* ---------- 4. Отступы ---------- */ /* Единой сетки нет: основной слой кратен 5px (60.9% употреблений), поверх наложена Tailwind-шкала кратная 4px. Имя = значение в px. */ /* Родная шкала проекта — чистая сетка 4px */ --spacing-0: 0px; --spacing-px: 1px; --spacing-0_5: 2px; --spacing-2xs: 2px; --spacing-1: 4px; --spacing-xs: 4px; --spacing-1_5: 6px; --spacing-sm: 6px; --spacing-2: 8px; --spacing-md: 8px; --spacing-2_5: 10px; --spacing-3: 12px; --spacing-lg: 12px; --spacing-3_5: 14px; --spacing-4: 16px; --spacing-xl: 16px; --spacing-5: 20px; --spacing-2xl: 20px; --spacing-6: 24px; --spacing-3xl: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-4xl: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-5xl: 40px; --spacing-11: 44px; --spacing-12: 48px; --spacing-6xl: 48px; --spacing-14: 56px; --spacing-7xl: 56px; --spacing-16: 64px; --spacing-20: 80px; --spacing-8xl: 80px; --spacing-24: 96px; --spacing-9xl: 96px; --spacing-28: 112px; --spacing-10xl: 120px; --spacing-32: 128px; --spacing-36: 144px; --spacing-40: 160px; --spacing-44: 176px; --spacing-48: 192px; --spacing-52: 208px; --spacing-56: 224px; --spacing-60: 240px; --spacing-64: 256px; --spacing-72: 288px; --spacing-80: 320px; --spacing-96: 384px; /* Фактически использованные в вёрстке значения (legacy, шкала 5px). */ /* Расходятся с --spacing-* выше: старый код токенами не пользуется. */ --space-2: 2px; /* 33× */ --space-3: 3px; /* 27× */ --space-4: 4px; /* 44× */ --space-5: 5px; /* 134× */ --space-6: 6px; /* 42× */ --space-8: 8px; /* 94× */ --space-10: 10px; /* 227× */ --space-12: 12px; /* 59× */ --space-15: 15px; /* 100× */ --space-16: 16px; /* 36× */ --space-18: 18px; /* 23× */ --space-20: 20px; /* 148× */ --space-24: 24px; /* 21× */ --space-25: 25px; /* 22× */ --space-30: 30px; /* 70× */ --space-40: 40px; /* 34× */ --space-50: 50px; /* 27× */ --space-60: 60px; /* 27× */ /* ---------- 5. Радиусы ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-4xl: 32px; --radius-full: 999px; /* ---------- 6. Тени ---------- */ --shadow-sm: 0px 6px 6px -4px rgba(3, 18, 66, 0.1); --shadow-md: 0px 24px 24px -24px rgba(3, 18, 66, 0.1); --shadow-lg: 0px 40px 40px -24px rgba(3, 18, 66, 0.1); /* ---------- 7. Анимация ---------- */ --duration-100: 100ms; /* 4× */ --duration-150: 150ms; /* 11× */ --duration-200: 200ms; /* 16× */ --duration-250: 250ms; /* 3× */ --duration-300: 300ms; /* 51× */ --duration-400: 400ms; /* 5× */ --duration-500: 500ms; /* 11× */ --duration-1000: 1000ms; /* 19× */ --duration-1400: 1400ms; /* 4× */ --duration-2000: 2000ms; /* 6× */ --duration-4000: 4000ms; /* 3× */ --ease-ease-in-out: ease-in-out; /* 34× */ --ease-ease: ease; /* 29× */ --ease-linear: linear; /* 18× */ --ease-ease-out: ease-out; /* 5× */ --ease-ease-in: ease-in; /* 3× */ /* ---------- 8. z-index (наблюдаемая лестница) ---------- */ --z-0: 0; /* 6× */ --z-1: 1; /* 15× */ --z-2: 2; /* 7× */ --z-3: 3; /* 4× */ --z-9: 9; /* 5× */ --z-10: 10; /* 7× */ --z-100: 100; /* 5× */ --z-101: 101; /* 2× */ --z-999: 999; /* 2× */ --z-1000: 1000; /* 3× */ --z-1100: 1100; /* 2× */ --z-1102: 1102; /* 2× */ --z-2000: 2000; /* 4× */ --z-9999: 9999; /* 5× */ /* ---------- 9. Брейкпоинты ---------- */ --bp-max-374: 374px; /* 4× */ --bp-max-440: 440px; /* 5× */ --bp-max-488: 488px; /* 11× */ --bp-max-550: 550px; /* 7× */ --bp-max-559: 559px; /* 4× */ --bp-max-767: 767px; /* 55× */ --bp-max-768: 768px; /* 10× */ --bp-min-768: 768px; /* 13× */ --bp-max-800: 800px; /* 5× */ --bp-min-960: 960px; /* 4× */ --bp-max-1024: 1024px; /* 15× */ --bp-min-1024: 1024px; /* 8× */ --bp-min-1025: 1025px; /* 4× */ --bp-max-1100: 1100px; /* 4× */ --bp-max-1200: 1200px; /* 24× */ --bp-min-1200: 1200px; /* 4× */ --bp-min-1280: 1280px; /* 4× */ /* ---------- 10. Прочие глобальные токены ---------- */ /* Сюда попадает то, что не легло ни в рампу, ни в семантику, но на что ссылаются другие токены — например --white-base-rgb, база всей полупрозрачной белой шкалы. Без них var()-цепочки рвутся. */ --accent-color: var(--text-primary, #0072bc); /* #0096f7 */ --scrollbar-size: 8px; --white-base-rgb: 255, 255, 255; } /* ---------- 2. СВЕТЛАЯ ТЕМА (по умолчанию) ---------- */ :root, [data-theme="light"] { --bg-default: var(--white-1000); --bg-default-rgb: var(--white-1000-rgb); --bg-disabled: var(--neutral-950-10); --bg-elevated: var(--white-1000); --bg-error: var(--error-50); --bg-hover: var(--neutral-500-10); --bg-info: var(--info-50); --bg-invert: var(--neutral-950); --bg-invert-rgb: var(--neutral-950-rgb); --bg-mask-over: var(--white-900); --bg-mask-under: var(--neutral-950-25); --bg-muted: var(--neutral-100); --bg-neutral: var(--neutral-950-10); --bg-primary: var(--primary-500); --bg-primary-10: var(--primary-500-10); --bg-primary-25: var(--primary-500-25); --bg-primary-50: var(--primary-500-50); --bg-primary-muted: var(--primary-50); --bg-promotion: var(--promotion-50); --bg-subtle: var(--neutral-500-10); --bg-success: var(--success-50); --bg-warning: var(--warning-50); --surface-dark: var(--neutral-950); --on-surface: var(--white-1000); --on-surface-muted: var(--white-300); --on-surface-secondary: var(--white-600); --text-default: var(--neutral-950); --text-disabled: var(--neutral-500); --text-error: var(--error-600); --text-error-darker: var(--error-800); --text-error-lighter: var(--error-500); --text-info: var(--info-600); --text-info-darker: var(--info-800); --text-info-lighter: var(--info-500); --text-invert: var(--neutral-50); --text-invert-secondary: var(--neutral-100); --text-link: var(--primary-600); --text-link-hover: var(--primary-700); --text-primary: var(--primary-500); --text-promotion: var(--promotion-600); --text-promotion-darker: var(--promotion-800); --text-promotion-lighter: var(--promotion-500); --text-secondary: var(--neutral-700); --text-subtle: var(--neutral-600); --text-success: var(--success-600); --text-success-darker: var(--success-800); --text-success-lighter: var(--success-500); --text-warning: var(--warning-600); --text-warning-darker: var(--warning-800); --text-warning-lighter: var(--warning-500); --icon-default: var(--neutral-900); --icon-disabled: var(--neutral-300); --icon-error: var(--error-500); --icon-info: var(--info-500); --icon-invert: var(--white-900); --icon-neutral: var(--neutral-300); --icon-primary: var(--primary-500); --icon-promotion: var(--promotion-500); --icon-secondary: var(--neutral-500); --icon-success: var(--success-500); --icon-warning: var(--warning-500); --border-default: var(--neutral-950-25); --border-error: var(--error-500-50); --border-info: var(--info-500-50); --border-primary: var(--primary-500); --border-primary-50: var(--primary-500-50); --border-promotion: var(--promotion-500-50); --border-strong: var(--neutral-950); --border-subtle: var(--neutral-950-10); --border-success: var(--success-500-50); --border-warning: var(--warning-500-50); --button-danger: var(--error-500); --button-danger-hover: var(--error-600); --button-danger-press: var(--error-700); --button-default: var(--neutral-950); --button-default-hover: var(--neutral-900); --button-default-press: var(--neutral-800); --button-neutral: var(--neutral-200); --button-neutral-hover: var(--neutral-300); --button-neutral-press: var(--neutral-200); --button-primary: var(--primary-500); --button-primary-hover: var(--primary-600); --button-primary-press: var(--primary-700); --button-secondary: var(--white-1000); --button-secondary-hover: var(--neutral-50); --button-secondary-press: var(--white-1000); } /* ---------- 3. ТЁМНАЯ ТЕМА ---------- */ [data-theme="dark"] { --bg-default: var(--neutral-900); --bg-default-rgb: var(--neutral-900-rgb); --bg-disabled: var(--neutral-700); --bg-elevated: var(--neutral-800); --bg-error: var(--error-900); --bg-hover: var(--white-100); --bg-info: var(--info-800); --bg-invert: var(--neutral-100); --bg-invert-rgb: var(--neutral-100-rgb); --bg-mask-over: var(--neutral-950-50); --bg-mask-under: var(--neutral-950-50); --bg-muted: var(--neutral-1000); --bg-neutral: var(--neutral-500-25); --bg-primary: var(--primary-500); --bg-primary-10: var(--primary-500-10); --bg-primary-25: var(--primary-500-25); --bg-primary-50: var(--primary-500-50); --bg-primary-muted: var(--primary-800); --bg-promotion: var(--promotion-900); --bg-subtle: var(--neutral-500-25); --bg-success: var(--success-900); --bg-warning: var(--warning-900); --surface-dark: var(--neutral-950); --on-surface: var(--white-1000); --on-surface-muted: var(--white-300); --on-surface-secondary: var(--white-600); --text-default: var(--white-900); --text-disabled: var(--white-400); --text-error: var(--error-400); --text-error-darker: var(--error-200); --text-error-lighter: var(--error-300); --text-info: var(--info-400); --text-info-darker: var(--info-200); --text-info-lighter: var(--info-300); --text-invert: var(--neutral-900); --text-invert-secondary: var(--neutral-800); --text-link: var(--primary-500); --text-link-hover: var(--primary-400); --text-primary: var(--primary-500); --text-promotion: var(--promotion-400); --text-promotion-darker: var(--promotion-200); --text-promotion-lighter: var(--promotion-300); --text-secondary: var(--white-700); --text-subtle: var(--white-600); --text-success: var(--success-400); --text-success-darker: var(--success-200); --text-success-lighter: var(--success-300); --text-warning: var(--warning-400); --text-warning-darker: var(--warning-200); --text-warning-lighter: var(--warning-300); --icon-default: var(--white-900); --icon-disabled: var(--neutral-400); --icon-error: var(--error-500); --icon-info: var(--info-500); --icon-invert: var(--neutral-800); --icon-neutral: var(--neutral-400); --icon-primary: var(--primary-500); --icon-promotion: var(--promotion-500); --icon-secondary: var(--white-500); --icon-success: var(--success-500); --icon-warning: var(--warning-500); --border-default: var(--white-200); --border-error: var(--error-500-50); --border-info: var(--info-500-50); --border-primary: var(--primary-500); --border-primary-50: var(--primary-500-50); --border-promotion: var(--promotion-500-50); --border-strong: var(--white-1000); --border-subtle: var(--white-100); --border-success: var(--success-500-50); --border-warning: var(--warning-500-50); --button-danger: var(--error-600); --button-danger-hover: var(--error-700); --button-danger-press: var(--error-800); --button-default: var(--white-900); --button-default-hover: var(--white-1000); --button-default-press: var(--white-800); --button-neutral: var(--neutral-900); --button-neutral-hover: var(--neutral-700); --button-neutral-press: var(--neutral-700); --button-primary: var(--primary-600); --button-primary-hover: var(--primary-400); --button-primary-press: var(--primary-500); --button-secondary: var(--neutral-900); --button-secondary-hover: var(--neutral-800); --button-secondary-press: var(--neutral-800); } /* ============================================================================ 4. Слой совместимости. swagger-override.css написан под прежний набор имён. Вместо того чтобы править 758 строк вручную, отображаем старые имена на новую семантику — тогда /try переезжает на бренд и получает светлую тему бесплатно. ========================================================================= */ :root { /* Размеры шрифта: старые --text-* были кеглями, новые --font-size-*. */ --text-xs: var(--font-size-xs); --text-sm: 13px; --text-base: var(--font-size-sm); --text-md: var(--font-size-base); --text-lg: var(--font-size-lg); --text-xl: var(--font-size-xl); --text-2xl: var(--font-size-2xl); --text-3xl: 28px; --text-4xl: var(--font-size-4xl); --text-5xl: 40px; --text-6xl: 42px; --font-weight-normal: var(--weight-400); --font-weight-medium: var(--weight-500); --font-weight-bold: var(--weight-700); --font-weight-extrabold: var(--weight-800); --leading-relaxed: var(--leading-normal); --tracking-tight: -0.8px; --tracking-normal: 0; --radius-none: 0; --spacing: var(--spacing-1); --shadow-text-soft: 0 3px 9.6px rgb(0 0 0 / 0.10); --shadow-card: var(--shadow-sm); --shadow-card-lg: var(--shadow-lg); --blur-sm: 8px; --blur-md: 12px; --blur-2xl: 40px; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.4, 0, 0.6, 1); --duration-fast: var(--duration-150); --duration-base: var(--duration-300); /* Чистый чёрный остаётся литералом: это текст на цветном бейдже метода (GET/POST). Бейдж в обеих темах цветной, так что переворачивать его подпись вместе с темой нельзя — контраст сломается. */ --color-black: #000; } /* Цветовые алиасы — тема-зависимые, поэтому отдельно от размеров. */ :root, [data-theme="light"] { --color-white: var(--text-default); --color-white-10: var(--neutral-950-10); --color-white-30: var(--neutral-950-25); --color-bg: var(--bg-default); --color-bg-1: var(--bg-muted); --color-bg-2: var(--neutral-100); --color-code-bg: var(--neutral-50); --color-hairline: var(--border-subtle); --color-hairline-strong: var(--border-default); --color-text-mute: var(--text-subtle); } [data-theme="dark"] { --color-white: var(--text-default); --color-white-10: var(--white-100); --color-white-30: var(--white-300); --color-bg: var(--bg-default); --color-bg-1: var(--bg-elevated); --color-bg-2: var(--neutral-800); --color-code-bg: var(--neutral-950); --color-hairline: var(--border-subtle); --color-hairline-strong: var(--border-default); --color-text-mute: var(--text-subtle); } /* Акценты бренда — одинаковы в обеих темах, меняется только подложка. */ :root { --color-accent-violet: var(--primary-500); --color-accent-violet-10: var(--primary-500-10); --color-accent-violet-glow: var(--primary-500-50); --color-accent-lime: var(--success-500); --color-accent-lime-glow: var(--success-500-50); --color-accent-blue: var(--info-500); --color-danger: var(--error-500); --color-danger-soft: var(--error-400); --color-danger-dim: var(--error-600); } /* ============================================================================ Системная тема — до того, как отработает JS. Условие :not([data-theme="light"]) обязательно: без него явный выбор светлой темы человеком проигрывал бы системной тёмной. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-default: var(--neutral-900); --bg-default-rgb: var(--neutral-900-rgb); --bg-disabled: var(--neutral-700); --bg-elevated: var(--neutral-800); --bg-error: var(--error-900); --bg-hover: var(--white-100); --bg-info: var(--info-800); --bg-invert: var(--neutral-100); --bg-invert-rgb: var(--neutral-100-rgb); --bg-mask-over: var(--neutral-950-50); --bg-mask-under: var(--neutral-950-50); --bg-muted: var(--neutral-1000); --bg-neutral: var(--neutral-500-25); --bg-primary: var(--primary-500); --bg-primary-10: var(--primary-500-10); --bg-primary-25: var(--primary-500-25); --bg-primary-50: var(--primary-500-50); --bg-primary-muted: var(--primary-800); --bg-promotion: var(--promotion-900); --bg-subtle: var(--neutral-500-25); --bg-success: var(--success-900); --bg-warning: var(--warning-900); --surface-dark: var(--neutral-950); --on-surface: var(--white-1000); --on-surface-muted: var(--white-300); --on-surface-secondary: var(--white-600); --text-default: var(--white-900); --text-disabled: var(--white-400); --text-error: var(--error-400); --text-error-darker: var(--error-200); --text-error-lighter: var(--error-300); --text-info: var(--info-400); --text-info-darker: var(--info-200); --text-info-lighter: var(--info-300); --text-invert: var(--neutral-900); --text-invert-secondary: var(--neutral-800); --text-link: var(--primary-500); --text-link-hover: var(--primary-400); --text-primary: var(--primary-500); --text-promotion: var(--promotion-400); --text-promotion-darker: var(--promotion-200); --text-promotion-lighter: var(--promotion-300); --text-secondary: var(--white-700); --text-subtle: var(--white-600); --text-success: var(--success-400); --text-success-darker: var(--success-200); --text-success-lighter: var(--success-300); --text-warning: var(--warning-400); --text-warning-darker: var(--warning-200); --text-warning-lighter: var(--warning-300); --icon-default: var(--white-900); --icon-disabled: var(--neutral-400); --icon-error: var(--error-500); --icon-info: var(--info-500); --icon-invert: var(--neutral-800); --icon-neutral: var(--neutral-400); --icon-primary: var(--primary-500); --icon-promotion: var(--promotion-500); --icon-secondary: var(--white-500); --icon-success: var(--success-500); --icon-warning: var(--warning-500); --border-default: var(--white-200); --border-error: var(--error-500-50); --border-info: var(--info-500-50); --border-primary: var(--primary-500); --border-primary-50: var(--primary-500-50); --border-promotion: var(--promotion-500-50); --border-strong: var(--white-1000); --border-subtle: var(--white-100); --border-success: var(--success-500-50); --border-warning: var(--warning-500-50); --button-danger: var(--error-600); --button-danger-hover: var(--error-700); --button-danger-press: var(--error-800); --button-default: var(--white-900); --button-default-hover: var(--white-1000); --button-default-press: var(--white-800); --button-neutral: var(--neutral-900); --button-neutral-hover: var(--neutral-700); --button-neutral-press: var(--neutral-700); --button-primary: var(--primary-600); --button-primary-hover: var(--primary-400); --button-primary-press: var(--primary-500); --button-secondary: var(--neutral-900); --button-secondary-hover: var(--neutral-800); --button-secondary-press: var(--neutral-800); } } /* ============================================================================ 5. Токены страницы документации. ReDoc собирает свои стили в JS на момент инициализации, поэтому цвета ему передаются готовыми значениями — страница читает их отсюда через getComputedStyle. Один источник правды: правим здесь, а не в JS. ========================================================================= */ :root, [data-theme="light"] { --docs-page-bg: var(--bg-default); --docs-sidebar-bg: var(--neutral-50); --docs-sidebar-border: var(--border-subtle); --docs-grid-line: rgba(3, 18, 66, 0.055); --docs-glow-primary: var(--primary-500-15); --docs-glow-accent: rgba(190, 64, 251, 0.05); /* Правая колонка с примерами кода остаётся тёмной в обеих темах: это код, и читается он на тёмном одинаково хорошо при любом окружении. */ --docs-panel-bg: var(--neutral-950); --docs-panel-text: var(--white-1000); --docs-code-bg: var(--neutral-1000, #020b2c); --docs-code-text: var(--blue-200); /* Вставки, которые ReDoc красит сам, а текст в них берёт из общей семантики: плашка базового URL и активная вкладка кода ответа. Фон обязан идти за темой, иначе выходит тёмное по тёмному в одной теме и белое по белому в другой — именно так они и ломались. */ --docs-inset-bg: var(--white-1000); /* Акцентный текст на подложке страницы. Чистые -500 дают на белом контраст ~2.8, то есть под порогом; на тёмном нужны, наоборот, светлее. Поэтому пара ступеней, а не один цвет на обе темы. */ --docs-accent-text: var(--primary-700); --docs-ok-text: var(--success-700); /* -700 читается на белом, но эта же переменная уходит на вкладки кодов ответа, а они лежат на тёмной правой панели — там -700 давал 2.6. -600 проходит по обоим фонам. */ --docs-danger-text: var(--error-600); --docs-warn-text: var(--warning-700); --docs-promo-text: var(--promotion-700); } [data-theme="dark"] { --docs-page-bg: var(--bg-default); --docs-sidebar-bg: var(--neutral-950); --docs-sidebar-border: var(--border-subtle); --docs-grid-line: rgba(255, 255, 255, 0.04); --docs-glow-primary: var(--primary-500-20); --docs-glow-accent: var(--promotion-500-10); --docs-panel-bg: var(--neutral-950); --docs-panel-text: var(--white-1000); --docs-code-bg: #020b2c; --docs-code-text: var(--blue-200); --docs-inset-bg: #020b2c; --docs-accent-text: var(--primary-300); --docs-ok-text: var(--success-400); --docs-danger-text: var(--error-400); --docs-warn-text: var(--warning-400); --docs-promo-text: var(--promotion-400); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --docs-page-bg: var(--bg-default); --docs-sidebar-bg: var(--neutral-950); --docs-sidebar-border: var(--border-subtle); --docs-grid-line: rgba(255, 255, 255, 0.04); --docs-glow-primary: var(--primary-500-20); --docs-glow-accent: var(--promotion-500-10); --docs-panel-bg: var(--neutral-950); --docs-panel-text: var(--white-1000); --docs-code-bg: #020b2c; --docs-code-text: var(--blue-200); --docs-inset-bg: #020b2c; --docs-accent-text: var(--primary-300); --docs-ok-text: var(--success-400); --docs-danger-text: var(--error-400); --docs-warn-text: var(--warning-400); --docs-promo-text: var(--promotion-400); } }