/* ============================================================ SYSTEM COMPONENT: STUDIO PANEL — дорога домой и пульт (gbppl-panel-4, Тон 2026-08-24, Sandbox 25.08, This page 26.08, Mode 26.08, Device 27.08, вторая компоновка gbppl-panel-8 27.08, разбор Тона по Proposed gbppl-panel-9 27.08, Classic снят gbppl-panel-10 27.08, гардероб и счёт gbppl-panel-11 28.08, счёт на ярлыке gbppl-panel-12 28.08, многослойный ящик gbppl-panel-layers-1 01.09, тумблер вместо табов gbppl-panel-mode-toggle-1 01.09, потолок и флип дока gbppl-panel-dock-1 01.09, складные полки и Demo внутри прототипа gbppl-panel-sections-1 01.09, отрыв от края и плоская полоса gbppl-panel-float-2 01.09, лист дропдауна и дверь в детали версии gbppl-panel-version-1 04.09, ПАНЕЛЬ 3.0 gbppl-panel-30-1 16.09, правки Тона по живой панели gbppl-panel-30-2 16.09) ------------------------------------------------------------ ПАНЕЛЬ 3.0 (gbppl-panel-30-1, 16.09). Проект утверждён Тоном на кликабельном макете sandbox\panel-brow-mock.html; полная история решений — в шапке макета и в шапке studio-panel.js. Здесь то, что досталось каскаду, и ЗАКОН, с которого волна начинается. ЗАКОН ЛИНИЙ (Тон 16.09, дословно, с припиской «запомни это»): НИ ОДНА ПЛАШКА НЕ ВЫЛЕЗАЕТ ЗА ВЕРТИКАЛЬНЫЕ ЛИНИИ КОНТЕНТА ПАНЕЛИ. Ни активная, ни наведённая, ни выделение строки списка. Приём «margin 0 -8px + padding 0 8px», которым строки списка расширяли свою землю до кромки полки, ЗАПРЕЩЁН — во всех рядах, списках и в ряду экранов. Взамен строка не имеет горизонтальных полей вовсе: её земля ровно та же ширина, что колонка текста, и левый край плашки стоит на той же линии, что айбрау над ней. Три места, где кровотёк жил и снят: .gbsp-link (строки команд Demo и лента комментариев), .gbsp-copy (правое поле) и .gbsp-back (левое). ЧТО ЕЩЁ ПЕРЕСТРОЕНО, СПИСКОМ: 1. ЯЗЫЧОК СТАЛ КОЛОННОЙ. .gbsp-tabcol — одно тело у внешней кромки: кнопка STUDIO и под волоском три квадратные плашки модов. Фон, рамка, радиус и тень переехали с .gbsp-tab на колонну, кнопка осталась голой. Плашки видны всегда, поэтому кнопка сворачивания .gbsp-min (жившая только у плавающего ящика) снята целиком. 2. ПЛАШКА ВМЕСТО КАРТОЧКИ. Выбранный мод и выбранный экран — Blue 600 с белым глифом. Карточка Zinc 700 осталась ровно там, где выбор делается СЛОВАМИ (фильтр комментов): слово в цветной плашке кричало бы громче собственной полки. 3. ШАПКА = КОНТЕКСТ. Ряд иконок-дверей снят, на его месте имя страницы и статус (бывшая полка .gbsp-sec--who). 4. ПОДВАЛ = НАВИГАЦИЯ СЛОВАМИ. Строка состояния снята. 5. АЙБРАУ ВЕРНУЛСЯ ЗАГОЛОВКОМ ПОЛКИ (Тон: «view не является заголовком секции — переделать на заголовок секции»), в роли Eyebrow системы: 12 / 600 / .12em / Zinc 500, как в shell.css. Своих цифр у него нет, и мокапные 10.5 в файл не поехали: 12 — пол системы (Рассел), ниже не опускаемся. 6. СТРОКА ВЫБОРА СТАЛА ПОХОЖА НА СЕЛЕКТ (Тон 16.09: «сейчас поле не выглядит как селект»): ступень высоты, честные поля с обеих сторон, земля и рамка поля, шеврон у правого поля, ховер в две ступени (земля и рамка). Логика взята у .gba-select (auth.css): инсет шеврона равен pad-x поля, глиф 16. Подчёркнутого облика продуктового поля студия не носит — у неё своя микросистема. ------------------------------------------------------------ ПАКЕТ ПРАВОК ПО ЖИВОЙ ПАНЕЛИ (gbppl-panel-30-2, Тон 16.09) ------------------------------------------------------------ Четыре его замечания, увиденные уже на собранной панели: а. «Нижний левый угол должен быть скруглён, такой же, как бровка». Радиус вернулся на СВОБОДНЫЕ кромки ящика — там, где ему ничто не мешает; шов с колонной остался прямым (довод gbppl-panel-10 цел, он был про верхний угол). Зеркало для левого дока и три угла у плавающего. б. «Правую часть чуть-чуть светлее, и разделительные линии чуть-чуть светлее, и иконки, весь muted-текст чуть-чуть светлее». Всё — ступенями одной шкалы Zinc, ни одного нового цвета: тело 900 → 800, волоски и рамки внутри тела 800 → 700, земля наведения на теле 800 → 700, примечание 500 → 400, подпись 400 → 300, неактивный глиф 500 → 400. Иерархия сдвинута ЦЕЛИКОМ: подпись громче примечания ровно на ступень, как и была. Колонна и подвал остались на 950 — рама темнее содержимого. в. «Сделать его подчёркнутым внизу, иначе не читается как выбранный элемент» — про активный раздел в подвале. Правило и довод у .gbsp-go ниже. г. Скроллбар светлых страниц «нетипичный для браузера». ВИНОВНИК НЕ ЗДЕСЬ: неохваченные `::-webkit-scrollbar` живут в live\checkout.html (строки 1948-1951), красят полосу ВСЕГО документа и в этой волне не правятся — чужой файл. Тёмная тонкая полоса ВНУТРИ ящика объявлена на .gbsp-panel и .gbsp-menu, документу не достаётся. ------------------------------------------------------------ Тон, 24.08: «когда мы заходим с хаба, пропадает надпись Design Studio и мы не можем вернуться на хаб. Нужна точка возвращения: чтобы всегда была доступна навигация с правой стороны — вот эта открывающаяся панель управления». Живые страницы прототипа (live\index.html и дальше) носят хром САЙТА, а не студии: студийного бара с замком там нет и быть не должно — иначе клиент видит нашу мебель поверх своей. Значит, дверь назад обязана жить рядом с содержимым, но не в нём. ОДИН ПУЛЬТ (gbppl-panel-4, 26.08). До этого дня у прототипа было ДВА пульта у одного и того же края: этот и PROTO — служебная консоль портала и чекаута, нарочно «неоформленная» (Zinc 950, моноширинный регистр 9-11px, радиус 6), чтобы её нельзя было прочесть как часть дизайна (решение 12.08, после того как Valerie приняла старую плашку за дизайн). Тон 26.08: «обязательно свести язык к Studio, одной волной» и «нужно просто унифицировать всё под одну логику». РЕШЕНИЕ 12.08 СНЯТО. Пульт один, и он говорит системным голосом: Inter, шкала Zinc, синий на активном, радиус 5, шрифты 14-16 (Тон 24.08: «мелкие шрифты... стандартный размер 16 пикселей»). Ни одного нового цвета, радиуса и кривой: всё из system\assets\tokens.css. Страничные переключатели, ради которых PROTO жил, переехали в секцию «This page» ниже. ГДЕ СТОИТ. На КАЖДОЙ странице студии и прототипа. Один язычок, одно место, один порядок секций: навигация «you are in» → Prototype (версия страницы, элементы, строка Demo) → инструменты (Mode, Device) → комментарии этой страницы → подвал (gbppl-panel-8: сначала «где я и что смотрю», потом «чем смотрю»). Порядок ОДИН на всех, а видно не всё сразу: с gbppl-panel-11 полка объявляет, в каких режимах она нужна (правила «Гардероб» ниже). Страница, которой нечего переключать, просто не объявляет групп, и секции This page у неё нет; страница без инспектора не объявляет режима, и группы Mode у неё нет. СЛОЙ. z-index 60 — выше всей стопки прототипа (хедер 31, дроверы 40, модалка 50). Дорога домой не должна оказаться под тем, что она открывает. ЧИСЛА СВЕДЕНЫ К ШКАЛЕ (gbppl-studio-tokens-1, Тон 27.08: «система не только в компонентах, но и в паттернах, в отступах, в шрифтах, абсолютно во всём; строим систему, начиная с нашей собственной студии»). Каждое число в этом файле теперь либо ступень (--space-*, --radius, --header-h, --gb-btn-*, --eyebrow-*, --mo-*), либо calc() из ступеней с объяснением, либо помечено единым комментом NO TOKEN и вынесено в раздел 8 скилла. Что изменилось в геометрии: разделитель ящика стал СИММЕТРИЧНЫМ 12 / 12 (было 14 сверху и 12 снизу у секций, 10 и 12 у титула: один и тот же волосок жил на двух ритмах), подсказка группы и зазор перед «· current» встали на ступень --space-8 (было 6). Остальное байт в байт. ------------------------------------------------------------ МНОГОСЛОЙНЫЙ ЯЩИК (gbppl-panel-layers-1, Тон 01.09) ------------------------------------------------------------ Четыре пункта Тона дословно приведены в шапке studio-panel.js. Что из них досталось этому файлу: ШИРЕ. 232 → 320 = `--space-64 * 5`, та же мера, что у рельса контролов витрины (lab F, принят Тоном 29.08): у студии одна ширина боковой полосы, а не две. Тон: «панель чуть шире при открытии, сейчас она слишком узкая». На узком окне ящик садится на ширину окна минус --space-48: язычок 26px обязан остаться в кадре. НИЖЕ ПОТОЛОК, ВЫШЕ ЯКОРЬ. Ящик стоял на якоре 112 и брал max-height 100vh - 32: на окне 720 он кончался на 800-й строке, то есть 80px консоли лежали ЗА нижней кромкой и были недостижимы (fixed не прокручивается). Потолок теперь считается ОТ ЯКОРЯ, а на низком окне якорь поднимается к верхнему полю: ниже 800 окно перестаёт держать консоль под шапкой (замер корня самой тяжёлой страницы 656 + 128 полей = 784). РИТМ РАЗДЕЛИТЕЛЯ 12 / 12 → 8 / 8. Двойная выгода: 8 это ступень шкалы, а 12 было половиной ступени с NO TOKEN (запись 27.08), и пять разделителей ящика отдают 40px высоты. Открытое решение Тона про --space-12 этим закрывается в пользу существующей ступени. ОДИН СТОЛБЕЦ ПОДПИСЕЙ. Строка выбора (.gbsp-pick), группа команд (.gbsp-group--acts) и ряд девайсов (.gbsp-seggroup--inline) носят одну раскладку: имя слева, управление справа. Ящик читается сверху вниз по левому краю, а не по чередующимся полкам. Единственный, кто стоит без подписи, — тумблер Mode: трек с тремя словами и счётом занимает всю полосу ящика (замер в studio-panel.js), а коробка тумблера и без подписи не притворяется ничем другим. ДВЕ СЕКЦИИ ВМЕСТО «THIS PAGE» (gbppl-proto-model-1, Тон 01.09). Prototype (что собрано: версия страницы и строки элементов из реестра) и Demo (что покрутить: сценарий, команды, записка). Ни одного нового объекта в файле: строка элемента — та же .gbsp-pick, что у версии, записка — тот же .gbsp-note, что стоял под группой команд. Прибавилось ровно два правила: подвал варианта на слое (.gbsp-opt__foot: статус-слово и провенанс) и снятое поле у записки, вставшей своей строкой. ВТОРОЙ СЛОЙ. .gbsp-layer замещает корень в потоке; шапка слоя говорит языком gb-drawer (стрелка назад слева, заголовок за ней), и заголовок носит .gbsp-title, то есть встаёт на место титула «Design Studio»: у поверхности одна шапка. НИ ОДНОГО ТАБА (gbppl-panel-mode-toggle-1, Тон 01.09: «Мне вообще не нравятся эти табы для переключения... было бы отлично вообще убрать эти табы отовсюду из панели управления, они меня просто ужасно бесят»). Подчёркивание сняли ВЕЗДЕ, где оно оставалось: Mode стал системным --inverse (семья родилась в toggle.css этой волной, первый носитель — здесь), ряд девайсов и фильтр комментов остались рядами, но говорят «выбрано» цветом, как строки навигации, а полоса над кадром — тем же. В ящике теперь два способа сказать «выбрано»: карточка тумблера и Blue 400. И СТРОКА ВЫБОРА С ОДНИМ ЗНАЧЕНИЕМ ТОЖЕ КЛИКАЕТСЯ (там же, Тон: «даже если версия всего одна, мы всё равно могли перейти и посмотреть её описание и всё прочее»), а записки вариантов на слое открываются двумя строками с разворотом («короткое summary на одну-две строки, а дальше expandable block»). ------------------------------------------------------------ ПОТОЛОК 80vh И ДВА ДОКА (gbppl-panel-dock-1, Тон 01.09) ------------------------------------------------------------ Тон: «панель будет открываться процентов на 70-80 высоты viewport, внутри при необходимости скролл, чтобы панель не уходила за viewport, как панель в Figma»; и следом, согласившись с уточнением: растёт по содержимому до потолка, а не стоит на 80vh всегда — иначе под короткой навигацией висит мёртвая пустота. ЯКОРЬ 112 СНОВА СВЯЩЕНЕН НА ВСЕХ ОКНАХ. Подъём якоря к верхнему полю ниже 900 (gbppl-panel-layers-1) отменён вместе с порогом и его NO TOKEN: он лечил вылет за нижнюю кромку ценой того, что открытая консоль накрывала правый край шапки САЙТА на каждом ноутбуке (замер 1280x720: ящик стоял на 16 и лежал поверх Book a meeting). Ту же болезнь лечит потолок, и лечит её честнее: панель не уходит за вьюпорт, потому что ей не разрешено вырасти настолько, а не потому что она подвинулась под хром страницы. ФОРМУЛА, И ОБА ЕЁ ЧЛЕНА НУЖНЫ: max-height: min(80vh, 100vh - якорь - нижнее поле) Второй член — геометрия: ящик начинается на --gbsp-top и обязан оставить снизу одно поле --space-16. Первый — доля, названная Тоном. Они меняются местами ровно на 640px высоты окна (0.8H = H - 128), то есть на всех рабочих окнах правит 80vh (720: 576 против 592; 1080: 864 против 952), а ниже 640 — перевёрнутый телефон и такие же узкие полосы — правит геометрия (390 высоты: 262, и ящик всё равно в кадре). 80 = NO TOKEN: шкалы долей вьюпорта в системе нет. Из вилки Тона «70-80» взят верх, потому что на самом низком окне, за которое он отвечает (720), геометрия и так отдаёт 82%: 70 отрезало бы ещё 72px у портала, который и без того прокручивается, ничего не выиграв. ФЛИП ДОКА. Тон: панель поверх страницы может накрывать элемент, который нужно проинспектировать. Сдвиг содержимого отвергнут (он ломает честную ширину, а честный ответ на «покажи в 1280» — кадр девайса); ответ для Full window — перенести ящик к противоположному краю. Тихая кнопка в шапке, сторона в localStorage gbppl-dock, дефолт правый. Зеркалятся ровно четыре вещи: край (right/left), порядок ящика и язычка (row-reverse), срезанная граница у обоих и радиус язычка, поле сцены под язычок. Тень --shadow-panel не зеркалится, потому что её нечем зеркалить: у неё нулевой сдвиг по X (0 8px 24px), и на левом краю она стоит ровно так же. ------------------------------------------------------------ КОНСОЛЬ 2.0: ОДНА ФИГУРА НА ВЕСЬ ПУЛЬТ (gbppl-panel2-build-1, мокап утверждён Тоном 03.09 после трёх раундов правок) ------------------------------------------------------------ Постановка Тона: навигация по разделам студии = РЯД ИКОНОК в шапке (Hub своим жёлобом, Live / Sandbox / Design System — общим); ниже имя страницы и её статус; ниже настройки прототипа строками «подпись слева, контрол справа»; ниже Mode, Device и фильтр комментов — жёлобы во всю ширину с РАВНЫМИ долями. ЯЗЫК, В ОДНОМ АБЗАЦЕ. У всего пульта одна фигура: ЖЁЛОБ (Zinc 900 на грунте Zinc 950, волосок рамки Zinc 800, радиус --radius, инсет --gbsp-inset), внутри которого ЯЧЕЙКИ делят ширину поровну. Выбранная ячейка — КАРТОЧКА: Zinc 700 с белыми чернилами, тёмное зеркало белой карточки на сером из разведки контролов (вариант A, CONTROLS-RECON). Строка выбора — тот же жёлоб, надетый как пикер: одно значение и шеврон. В пульте нет ни одного продуктового компонента: ни .gb-toggle, ни .gb-btn, ни капса. Это и есть СТУДИЙНАЯ МИКРОСИСТЕМА (решение Тона 02.09: «подчёркнутые инпуты только core-продукту, студия говорит на своём языке»). ПОЧЕМУ ТУМБЛЕР УШЁЛ. Mode стоял системным --inverse (gbppl-panel-mode-toggle-1, Тон 01.09: «заменил бы их на наш Toggle Button»). Компонент честно решал задачу двух-трёх слов, но не решал задачу РАВНЫХ ДОЛЕЙ: --spread делит трек по длине слов, и три ячейки выходили 60 / 82 / 127. Тон 03.09 на мокапе: «child-элементы внутри должны заполнять его равномерно... расстояния между сегментами неровные». Равные доли — свойство жёлоба, и как только жёлоб появился ради навигации, второй фигуры на тот же вопрос уже не нужно. Тогл остаётся продуктовым компонентом на чекауте, где он и был замерен. ЧЕГО В ПУЛЬТЕ БОЛЬШЕ НЕТ И ПОЧЕМУ 1. СТРОКИ-ТИТУЛА «DESIGN STUDIO» (развилка волны). Ряд иконок съел шапку целиком, и возвращать титул отдельной строкой значит отдать 30px ради слова, которое и так стоит у кромки: ярлык STUDIO виден ВСЕГДА, и он единственное, что видно у закрытого пульта. Имя поверхности говорится там, где его читают. 2. АЙБРАУ ПОЛОК и вместе с ними СВОРАЧИВАНИЯ СЕКЦИЙ: у складной полки нет ручки, если у неё нет заголовка. Складывание просили ради вертикали (Тон 01.09: «мы экономим вертикальное пространство»), и эту работу теперь делает сама компоновка — навигация из списка в 190px стала рядом в 34, ящик на чекауте 595 → 430 (замер 1280). Вопрос Тону в отчёте. 3. ПОДПИСЕЙ СЛЕВА У Mode / Device / Comments: с колонкой подписи ячейка выходит 65, а «Comment» со счётом просит 82, и равные доли ломаются — то самое, за чем шла правка. Имя группы уходит в aria-label, а вслух его говорит строка состояния внизу. 4. РАЗДЕЛИТЕЛЯ МЕЖДУ Mode И Device (был по слову Тона 27.08). Два жёлоба разделяет ступень --space-8: у каждого своя рамка, и волосок между двумя рамками — третья линия на один стык. ТРИ ГОЛОСА ТЕКСТА, И ОНИ РАЗНЫЕ (Тон 03.09, дословно: «подписи к селектам слева имеют тот же шрифт, что и объяснительный текст снизу. Так не может быть»). В мокапе обе роли были 12 Zinc 500, и это правда была одна роль на две работы. Разведены: ЗНАЧЕНИЕ в контроле 14 / 500 / белый — то, что выбрано ПОДПИСЬ настройки 12 / 600 / Zinc 400 — имя настройки ПРИМЕЧАНИЕ 12 / 400 / Zinc 500 — ремарка о состоянии Все три кегля — ступени, которые в доме уже стоят (16 базовый, 14 вторичный, 12 пол системы); ниже 12 не опускаемся (Рассел), и Zinc 600 примечанию не отдан нарочно: 3.4:1 на Zinc 950 — это не «тише», это «не читается». ============================================================ */ /* ЯКОРЬ ОБЪЯВЛЕН НА ХОЗЯИНЕ, А НЕ НА .gbsp (gbppl-panel-float-2). Его читают трое: сам ящик, его потолок и контур посадочного места .gbsp-snap, а тот — БРАТ ящика, не потомок, и с объявления на .gbsp ничего бы не унаследовал. Место вычисления при этом не изменилось по смыслу: gb-studio-panel — такой же остров шкалы, как .gbsp, и на вендорном каталоге --space-32 приходит ему нашим (ловушка 21в считает опасным только :root). */ gb-studio-panel { display: contents; --gbsp-top: calc(var(--header-h) + var(--space-32)); /* ШИРИНА ЯЗЫЧКА-КОЛОННЫ (gbppl-panel-30-1). --space-48 — ступень шкалы и ровно то число, которое макет дал колонне; читают её двое, сама колонна и поле сцены под неё, поэтому оно объявлено именем, а не написано дважды. Было 26 (NO TOKEN, замер слова 12-го кегля): в колонну с плашками 36 оно не встаёт. ПЛАШКА 36 — ступень сетки высот контролов (72/64/56/48/40/36/32/ 28, раздел 5 скилла), взятая ПЛОСКО, без порогов: кромка пульта не масштабируется вместе со страницей, и колонна 48 обязана держать плашку на всех ширинах. */ --gbsp-tabw: var(--space-48); --gbsp-plaque: 36px; } .gbsp { position: fixed; right: 0; /* gbppl-panel-5: anchored near the top, not the vertical centre. Centred, the open panel landed on whatever sat mid-page, on the checkout that was the order totals. One rule for every page (Ton 26.08: one console, one logic). 112 = шапка сайта (--header-h 80) плюс одна ступень --space-32: якорь стоит не «где-то сверху», а на ступень ниже хрома страницы. */ /* Якорь объявлен ИМЕНЕМ, потому что его читают двое: сам ящик и его потолок (gbppl-panel-layers-1). Пока это были два независимых числа, потолок 100vh - 32 не знал про якорь 112, и на окне 720 ящик кончался на 800-й строке: 80px консоли лежали за нижней кромкой и были недостижимы, потому что fixed не прокручивается. gbppl-panel-dock-1: якорь один на ВСЕ окна, медиазапрос, поднимавший его ниже 900, снят (шапка страницы дороже сотни пикселей ящика). gbppl-panel-float-2: само объявление переехало на gb-studio-panel (причина в комменте у хозяина), здесь остался расход. */ top: var(--gbsp-top); transform: none; /* panel-about-1, DECLARED Ton 30.09 14:26: prototype drawers and overlays (email sheet z1101, customizer z1000) stay below studio controls. The description uses the native modal top layer above all of them. gbppl-comments-layer-1 (07.10): 1102 became 1202. The pins and the instrument's drawer had to leave the page band (they opened behind the customizer window), so the whole studio moved into one band above it at its old numbers plus 1100 (list in comments.css, THE LAYER AND THE PIN). The console climbs with it so it stays over the drawer (1181) and the instrument (1185), as it did at 1102 over 81 and 85. The rule of 30.09 holds: still over every prototype layer. */ z-index: 1202; /* NO TOKEN: studio band */ display: flex; /* ОБЕ ФИГУРЫ РОСТОМ В СВОЁ СОДЕРЖИМОЕ (gbppl-panel-30-1). Было stretch: язычок был полосой во всю высоту ящика и тянулся за ним. Колонна с плашками своего роста — кнопка плюс три плашки, — и stretch тянул бы ЯЩИК за колонной: свёрнутая в воздухе полоса получала 228px пустоты под шапкой (поймано скрином, не числом). ДОПИСКА gbppl-panel-30-6 (Тон 16.09, вечером, дословно): «высота бровки должна тянуться под высоту основной панели — она должна её заполнять. Если панель растёт, растёт и бровка. Минимальные высоты остаются». То есть половина запрета выше ОТМЕНЕНА ЕГО СЛОВОМ: у ОТКРЫТОГО ящика колонна тянется. Вторая половина жива и остаётся причиной, по которой здесь по-прежнему flex-start: тянуть обе фигуры разом нельзя, иначе свёрнутая в воздухе полоса снова получит 228px пустоты. Поэтому тянется ОДНА фигура и только в одном состоянии — правило у .gbsp-tabcol ниже. */ align-items: flex-start; font-family: var(--font-sans); /* ИНСЕТ ЖЁЛОБА, ОДНО ЧИСЛО НА ВЕСЬ ПУЛЬТ (gbppl-panel2-build-1). NO TOKEN: 2 = четверть ступени --space-8. Это не отступ, а ЗАЗОР между стенкой жёлоба и карточкой внутри — та же роль, что у инсета 4 в .gb-toggle (toggle.css, «половина 8»), только жёлоб вдвое ниже тогла и половина здесь читалась бы полем. Из него же считается радиус ячейки: концентрический радиус = внешний минус инсет, поэтому 3 в файле не пишется ни разу. */ --gbsp-inset: 2px; } /* НИЗКОЕ ОКНО БОЛЬШЕ НЕ ПОДНИМАЕТ ЯКОРЬ (gbppl-panel-dock-1, Тон 01.09). Медиазапрос `max-height: 899px` ставил ящик на --space-16 и вместе с NO TOKEN 900 прожил один день: на ноутбучном окне открытая консоль ложилась поверх правого края шапки САЙТА, то есть поверх того самого прототипа, который через неё смотрят. Болезнь, ради которой якорь поднимали (ящик уходил за нижнюю кромку), лечится потолком .gbsp-panel ниже, и 112 снова стоит на всех окнах без исключения (gbppl-panel-5, Тон 26.08: одна консоль, одна логика). */ /* ============================================================ ЯЗЫЧОК-КОЛОННА (gbppl-panel-30-1) ------------------------------------------------------------ Одно тело у внешней кромки ящика, лицом к странице: кнопка STUDIO и под волоском плашки модов. Фон, рамка, радиус и тень принадлежат КОЛОННЕ — раньше их носила сама кнопка, и вторая фигура рядом с ней читалась бы как второй предмет. Кнопка внутри осталась голой. Колонна стоит и при закрытом ящике, и при открытом, и у любого дока: режим — первое, что спрашивают у пульта, и спрашивать его через открывание ящика больше не нужно (Тон 16.09). ============================================================ */ .gbsp-tabcol { flex: 0 0 auto; display: flex; flex-direction: column; background: var(--zinc-950); /* gbppl-panel-3, Ton 26.08: white tab vanished on white pages; dark like PROTO, quiet */ border: 1px solid var(--zinc-800); border-right: none; border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow-panel); } /* Язычок: единственная кнопка, открывающая и закрывающая ящик. Слово вертикально, как у PROTO, системным кеглем. */ .gbsp-tab { width: var(--gbsp-tabw); padding: 14px 0; /* NO TOKEN: рост язычка под слово, замер; облик v2 ниже переписывает обе меры */ display: flex; flex-direction: column; align-items: center; gap: 10px; /* NO TOKEN: зазор шеврона и слова внутри язычка, переписан обликом v2 */ background: none; border: 0; border-radius: var(--radius) 0 0 0; color: var(--zinc-400); font-family: inherit; cursor: pointer; transition: color var(--mo-micro) var(--mo-move); } .gbsp-tab:hover { color: var(--white); } .gbsp-tab:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; } /* ---- БРОВКА: ТРИ ПЛАШКИ МОДОВ ---- Волосок отбивает её от кнопки тем же Zinc 800, каким отбиты полки ящика; поля 6 с боков (та же три четверти ступени, что зазор глифа и слова внутри ячейки) оставляют линию короче колонны, чтобы она читалась разделителем, а не рамкой. ПУСТАЯ БРОВКА НЕ РИСУЕТСЯ ВОВСЕ: страница без инспектора не объявляет режимов, и полоса под кнопкой была бы обещанием переключателя, которого нет. */ .gbsp-brow { display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-8) / 2); /* воздух 4 между плашками, слово Тона 16.09 */ margin: 0 calc(var(--space-8) * .75); padding: var(--space-8) 0; border-top: 1px solid var(--zinc-800); } .gbsp-brow:empty { display: none; } /* КОЛОННА ЗАПОЛНЯЕТ ЯЩИК (gbppl-panel-30-6, слово Тона в дописке у .gbsp выше). Тянется ровно ОДНА фигура и ровно в ОДНОМ состоянии — у открытого ящика, при любом доке, включая плавающий. Свёрнутое состояние не тронуто: там ящика либо нет вовсе (пристыкованный), либо он ниже колонны (плавающая полоса), и растяжка вернула бы ту самую пустоту, из-за которой запрет 30-1 и родился. ПЛАШКИ ОСТАЮТСЯ НАВЕРХУ САМИ: колонна — flex-колонка без justify-content, её дети стоят от начала, а ниже идёт просто тело колонны. Ни одного нового правила под «прижать кверху» не нужно. ПЕТЛИ НЕТ. Пол ящика (--gbsp-colh, gbppl-panel-30-4) считается по КОНТЕНТНОМУ росту колонны — сумме её детей, — а не по её коробке, которая теперь зависит от ящика. Замер живёт в studio-panel.js (measureColumn), и там же объяснено, почему он смотрит на детей. */ gb-studio-panel .gbsp:not(.is-collapsed) .gbsp-tabcol { align-self: stretch; } /* ---- ПЛАШКА: КВАДРАТ СО ГЛИФОМ ---- Она же ячейка ряда экранов (--wide), и это одна вещь нарочно: Тон 16.09 связал их прямо («активный девайс в ряду Device — так же»). Выбранная — Blue 600 целиком с белым глифом; никаких боковых чёрточек и подчёркиваний в консоли не осталось ни одного. Радиус системный: концентрической поправки здесь нет, потому что плашка не лежит в жёлобе, она стоит на грунте. */ .gbsp-plaque { flex: 0 0 auto; width: var(--gbsp-plaque); height: var(--gbsp-plaque); display: grid; place-items: center; position: relative; padding: 0; background: none; border: 0; border-radius: var(--radius); /* Неактивный глиф 400, не 500 (gbppl-panel-30-2, «иконки чуть-чуть светлее»). Колонна осталась на грунте 950, поэтому земля наведения у плашки прежняя — двигались ЧЕРНИЛА, а не рельеф. */ color: var(--zinc-400); font-family: inherit; cursor: pointer; transition: background var(--mo-micro) var(--mo-move), color var(--mo-micro) var(--mo-move); } .gbsp-plaque:hover { background: var(--zinc-800); color: var(--zinc-300); } .gbsp-plaque:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; } .gbsp-plaque.is-on, .gbsp-plaque.is-on:hover { background: var(--blue-600); color: var(--white); } /* Ряд экранов: те же плашки, только делят полосу поровну. Жёлоба под ними НЕТ — коробка вокруг глифов сделала бы их другим предметом, чем плашки на кромке, а Тон связал их одним словом. Ограда между ячейками (.gbsp-trough--fenced) осталась там, где выбор делается словами: слова без неё слипаются в фразу (Тон 03.09). */ .gbsp-plaquerow { display: flex; gap: calc(var(--space-8) / 2); } .gbsp-plaque--wide { flex: 1 1 0; width: auto; } .gbsp-tab svg { display: block; width: 14px; height: 14px; } /* NO TOKEN: мера глифа, шкалы размеров иконок в системе нет (раздел 8) */ /* Шеврон смотрит туда, куда уедет панель: вправо — спрятать, влево — показать. */ .gbsp.is-collapsed .gbsp-tab svg { transform: rotate(180deg); } .gbsp-tab__word { writing-mode: vertical-rl; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .gbsp-panel { /* ШИРИНА (gbppl-panel-layers-1, Тон 01.09: «панель чуть шире при открытии, сейчас она слишком узкая»). Было 232 — ширина, которую задавал ряд из шести чипов девайсов (gbppl-panel-8, замер 27.08); чипы с тех пор стали иконками, а строки выбора и имена версий просят места для СЛОВ. 320 = --space-64 * 5, и это не новое число: ровно столько носит рельс контролов витрины (стенд lab F, принят Тоном 29.08). У студии одна ширина боковой полосы, а не две. На узком окне ящик садится на ширину окна минус КОЛОННА со своей рамкой: колонна стоит СЛЕВА от ящика и обязана остаться в кадре целиком (gbppl-panel-30-1). Было «минус --space-48» при ярлыке 26 — запас 22px; колонна ровно --space-48 плюс волосок рамки, и без поправки на волосок её левая грань уезжала за кромку окна на 360 (замер: коробка вставала на x = -1). */ width: min(calc(var(--space-64) * 5), calc(100vw - var(--gbsp-tabw) - 1px)); /* ПОЛЕ ПЕРЕЕХАЛО НА ПОЛКИ (gbppl-panel2-build-1). Ящик держал --space-16 по всему периметру, и разделители полок шли ОТ ТЕКСТА ДО ТЕКСТА, оставляя 16 белого слева и справа от линии. В мокапе линия идёт от кромки до кромки, как в панели Figma: значит поле принадлежит полке, а не коробке. Число то же, ступень та же, переехало место объявления. */ padding: 0; /* ЯЩИК РАСТЁТ СО СВОИМ СОДЕРЖИМЫМ И УПИРАЕТСЯ В ПОТОЛОК (gbppl-panel-dock-1, Тон 01.09: «панель будет открываться процентов на 70-80 высоты viewport, внутри при необходимости скролл, чтобы панель не уходила за viewport, как панель в Figma»). Рост даёт сама пара max-height + overflow: у навигации хаба ящик 476px и никакой пустоты под ней, у портала он встаёт в потолок и прокручивается внутри — как поле с авторостом (auth.css, gbppl-field-autogrow-1). ДВА ЧЛЕНА ПОТОЛКА. Геометрия: ящик начинается на --gbsp-top и оставляет снизу одно поле --space-16 (gbppl-panel-layers-1, потолок считается ОТ ЯКОРЯ). Доля: 80vh, слово Тона. Правит меньший, и меняются они местами ровно на 640px высоты окна (0.8H = H - 128): выше — доля (720: 576 против 592, 1080: 864 против 952), ниже — геометрия (перевёрнутый телефон 390: 262). Панель не уходит за вьюпорт ни на одном окне и не накрывает шапку страницы ни на одном. NO TOKEN на 80: шкалы долей вьюпорта в системе нет; из вилки «70-80» взят верх, потому что на самом низком окне, за которое отвечает Тон (720), геометрия и так отдаёт 82%, а 70 отрезало бы ещё 72px у портала, который и без того прокручивается. */ max-height: min(80vh, calc(100vh - var(--gbsp-top) - var(--space-16))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--zinc-600) transparent; /* полоса прокрутки не светит белым по тёмному; ступенью выше вместе с телом (gbppl-panel-30-2), иначе ползунок 700 тонет в грунте 800 */ /* ТЕЛО СВЕТЛЕЕ КРОМКИ (gbppl-panel-30-1, решение 4 макета: «язычок Zinc 950, тело панели Zinc 900, волоски Zinc 800 — левая кромка темнее тела, как просил Тон»). Ящик перестал быть одной плитой: колонна и подвал держат грунт 950, тело поднимается, и контролы внутри садятся обратно на 950 — рельеф читается ступенями одной шкалы, без единого нового цвета. ЕЩЁ ОДНА СТУПЕНЬ ВВЕРХ (gbppl-panel-30-2, Тон на живой панели: «правую часть чуть-чуть светлее, и разделительные линии чуть-чуть светлее, и иконки, весь muted-текст чуть-чуть светлее»). Тело 900 → 800, и ВМЕСТЕ С НИМ едет всё, что на нём лежит: волоски полок и рамки контролов 800 → 700, земля наведения 800 → 700, приглушённые чернила на ступень вверх с сохранением иерархии (примечание 500 → 400, подпись 400 → 300). Колонна и подвал остаются на 950: рама темнее содержимого — это и есть тот рельеф, который Тон просил в первом пакете. */ background: var(--zinc-800); border: 1px solid var(--zinc-700); border-right: none; /* УГЛОВ У ЯЩИКА СНОВА НЕТ (gbppl-panel-30-6). История в две ступени, и обе слово Тона. 30-2: «нижний левый должен быть скруглён, такой же, как бровка» — тогда колонна кончалась выше ящика, нижний левый угол лежал НИЖЕ неё, ни к чему не прижат, и радиус там был честен. 30-6: колонна тянется на всю высоту ящика, и левая кромка стала ШВОМ ЦЕЛИКОМ — сверху донизу. Скругление на шве это зарубка, ровно та, из-за которой gbppl-panel-10 снял радиус в первый раз. Правый край вровень с кромкой окна, значит нулей снова четыре, а скруглённым остаётся угол САМОЙ КОЛОННЫ — он теперь и стоит на нижней кромке ящика. */ border-radius: 0; box-shadow: var(--shadow-panel); /* ЯЩИК НЕ БЫВАЕТ КОРОЧЕ КОЛОННЫ (gbppl-panel-30-4, баг со скрина Тона на sandboxes.html: «колонна торчит ниже нижней кромки ящика»). Полок на такой странице всего две, ящик выходит 204, колонна 228 — и 24px плашки Comment висят в воздухе под ящиком. ПОЧЕМУ НЕ ОБЩИЙ stretch. `align-items: stretch` у .gbsp тянет ОБЕ фигуры к большей: колонну — за ящиком и свёрнутую плавающую шапку — за колонной (228px пустоты под титулом, gbppl-panel-30-1). Зло симметричное, и лечить им нельзя. С gbppl-panel-30-6 колонна у ОТКРЫТОГО ящика тянется по слову Тона — но своим `align-self`, а не общим правилом контейнера, и пол ящика это не отменяет: он считается по КОНТЕНТНОМУ росту колонны и остаётся тем же числом, тянется она или нет. ПОЭТОМУ ПОЛ, А НЕ РАСТЯЖКА, и число приходит ЗАМЕРОМ у владельца: --gbsp-colh пишет studio-panel.js с живой высоты колонны (watchColumn), потому что рост колонны зависит от числа плашек, а их приносят владельцы режимов. Ни одного 228 в файле нет. Только ОТКРЫТЫЙ ПРИСТЫКОВАННЫЙ ящик: у свёрнутого его нет вовсе, а у плавающего колонна главнее ящика по определению (её фигуру выбирает место, gbppl-panel-float-2). */ display: flex; flex-direction: column; } /* Полки держат свою высоту и не жмутся: с flex-раскладкой у детей появился бы flex-shrink 1, и на длинном ящике секции ужимались бы вместо прокрутки. Ноль-ноль-auto возвращает поведение блочного потока, каким оно было до этой волны. */ .gbsp-panel > * { flex: 0 0 auto; } /* Лишняя высота достаётся ТЕЛУ, а подвал остаётся прижат к низу: он рама ящика, и висеть посреди Zinc 800 ему нечего. */ .gbsp-foot { margin-top: auto; } /* ПОЛ НЕ ПЕРЕРАСТАЕТ ПОТОЛОК. По спецификации min-height бьёт max-height, и на низком окне (300px высоты: потолок 172, колонна 228) пол вытолкнул бы ящик за нижнюю кромку — ровно та беда, ради которой потолок и считается от якоря (gbppl-panel-dock-1, Тон: «панель не уходит за viewport»). Поэтому пол берётся как МЕНЬШЕЕ из роста колонны и тех же двух членов потолка: те же имена, та же арифметика, ни одного нового числа. */ gb-studio-panel:not([data-dock="float"]) .gbsp:not(.is-collapsed) .gbsp-panel { min-height: min(var(--gbsp-colh, 0px), 80vh, calc(100vh - var(--gbsp-top) - var(--space-16))); } /* И ТОТ ЖЕ ПОЛ У ПЛАВАЮЩЕГО ОТКРЫТОГО (gbppl-panel-30-6). В 30-4 его тут не было нарочно: «у плавающего колонна главнее ящика по определению». Довод жил ровно до слова Тона о том, что колонна заполняет ящик: раз обе фигуры у открытого кончаются вместе, то и пол у них один, иначе на короткой странице (sandboxes, замер: ящик 204, колонна 228) колонна снова свисает на 23px — тот самый вид, который Тон и назвал сломанным. Потолок у плавающего один, доля 80vh, им же и ограничен пол. Свёрнутая полоса не тронута: у неё колонна выше по определению фигуры. */ gb-studio-panel[data-dock="float"] .gbsp:not(.is-collapsed) .gbsp-panel { min-height: min(var(--gbsp-colh, 0px), 80vh); } .gbsp.is-collapsed .gbsp-panel { display: none; } /* ============================================================ ВТОРОЙ ДОК: ТОТ ЖЕ ЯЩИК У ЛЕВОГО КРАЯ (gbppl-panel-dock-1, Тон 01.09) ------------------------------------------------------------ Причина одна и она не про вкус: консоль стоит ПОВЕРХ страницы, и в Full window она рано или поздно накрывает ровно тот элемент, который надо посмотреть. Сдвигать под неё содержимое нельзя — страница перестанет быть шириной в окно, а честная ширина и есть то, ради чего смотрят прототип (для «покажи в 1280» есть кадр девайса). Значит, ящик уходит к противоположному краю, и уходит целиком: язычок, ящик, слои и сцена кадра. СТОРОНА — НАСТРОЙКА, А НЕ СОСТОЯНИЕ РАБОТЫ, поэтому она в localStorage (`gbppl-dock`), а не в памяти вкладки, как открытость ящика: где человеку удобно держать пульт, он решает один раз. Дефолт правый, то есть без записи всё стоит ровно там, где стояло. ЗЕРКАЛЯТСЯ ЧЕТЫРЕ ВЕЩИ, И ВСЕ ЧЕТЫРЕ ГЕОМЕТРИЧЕСКИЕ: край окна, порядок «язычок ↔ ящик» (row-reverse, разметка не трогается), срезанная граница у ящика и у язычка вместе с радиусом язычка, и поле сцены, оставленное под язычок. Тень не зеркалится: у --shadow-panel нулевой сдвиг по X, и на левом краю она та же. ЧТО НЕ ЗЕРКАЛИТСЯ НАРОЧНО. Шапка: заголовок читается слева на любом краю окна, и кнопка стоит в хвосте строки — как крестик в шапке дровера, а не как ручка у ближней кромки. Слово на язычке: vertical-rl читается сверху вниз на обеих сторонах, и переворот ради симметрии заставил бы читать снизу вверх. Приход слоя (translateX от +16): это шаг ВГЛУБЬ, направление у него от порядка чтения, а не от края окна. ============================================================ */ gb-studio-panel[data-dock="left"] .gbsp { right: auto; left: 0; flex-direction: row-reverse; } gb-studio-panel[data-dock="left"] .gbsp-panel { border-right: 1px solid var(--zinc-700); border-left: none; /* Зеркало правила выше, gbppl-panel-30-6: шов теперь во всю высоту и справа, углов у ящика нет; скруглён нижний ПРАВЫЙ угол колонны. */ border-radius: 0; } gb-studio-panel[data-dock="left"] .gbsp-tabcol { border-left: none; border-right: 1px solid var(--zinc-800); border-radius: 0 var(--radius) var(--radius) 0; } gb-studio-panel[data-dock="left"] .gbsp-tab { border-radius: 0 var(--radius) 0 0; } /* Шеврон по-прежнему смотрит туда, куда уедет панель, — просто «туда» стало другой стороной. Обе строки специфичнее базовых (0-3-2 и 0-4-2 против 0-3-1), порядок в файле здесь ничего не решает. */ gb-studio-panel[data-dock="left"] .gbsp .gbsp-tab svg { transform: rotate(180deg); } gb-studio-panel[data-dock="left"] .gbsp.is-collapsed .gbsp-tab svg { transform: none; } /* Полоса под язычок на сцене кадра меняется сторонами вместе с ним: кадр обязан стоять по центру ОСТАВШЕГОСЯ места и не уезжать под пульт, с какого бы края тот ни стоял. */ gb-studio-panel[data-dock="left"] .gbsp-stage { padding-right: var(--space-16); padding-left: calc(var(--space-16) + var(--gbsp-tabw)); } /* ============================================================ ТРЕТЬЕ МЕСТО: ЯЩИК ОТРЫВАЕТСЯ ОТ КРАЯ (gbppl-panel-float-2, Тон 01.09) ------------------------------------------------------------ Тон, дословно: «ты добавил панели свойство переноситься влево-вправо, но не добавил свойство детачить её, чтобы можно было просто таскать руками» и «нужно ещё одно свойство: сворачивать её в одну плоскую горизонтальную панель Design Studio». ОДНО ЗНАЧЕНИЕ НА ВСЕ ТРИ МЕСТА. data-dock принимает left | right | float, и третье не отменяет памяти о стороне: сторона лежит в `gbppl-dock` и ждёт возвращения, координата — в `gbppl-float`. Отсюда и раскладка каскада: три взаимоисключающих значения одного атрибута, порядок правил в файле ничего не решает. ЗА ЧТО ТАСКАТЬ. За шапку ящика — ту самую строку, где стоит титул DESIGN STUDIO. Второй ручки не заводится: шапка у поверхности одна (.gbsp-head в корне, .gbsp-layerhead на слое), и обе ведут себя одинаково, чтобы жест не пропадал на втором уровне. Кнопки внутри шапки остаются кнопками (курсор pointer, скрипт не начинает таскание с них). ЧТО МЕНЯЕТСЯ У ОТОРВАННОГО ЯЩИКА, И ВСЁ ЭТО ГЕОМЕТРИЯ: 1. Место: left/top вместо края окна (координаты приходят инлайном, --gbsp-x / --gbsp-y, их пишет скрипт при таскании). 2. Форма: полный радиус и рамка на все четыре стороны. У пристыкованного ящика радиуса нет нарочно (gbppl-panel-10: плоскость вровень с кромкой), и ровно та же причина работает наоборот — свободностоящая фигура держит радиус, как язычок. Тень ОСТАЁТСЯ --shadow-panel: ступени «сильнее» в системе нет (в tokens.css четыре тени, панельная самая тяжёлая), а выдумывать пятую волна не имеет права (закон 0a.4). Оторванность читается формой: четыре рамки и четыре угла против трёх и нуля. 3. Потолок: 80vh, доля Тона, без второго члена от якоря — якоря у плавающего ящика нет. Геометрический член заменён КЛАМПОМ в скрипте: коробка не выпускается за поля --space-16 ни при таскании, ни при ресайзе окна, поэтому «не уходит за viewport» держится тем же обещанием, только другим механизмом. 4. Язычка нет. Вертикальный ярлык — фигура, рождённая КРОМКОЙ: он к ней прижимается, его слово читается вдоль неё, и берёт он у окна 26px ширины. Посреди экрана прижиматься не к чему, поэтому у оторванного ящика ярлыка нет вовсе, а свёрнутое состояние у него своё (ниже). 5. Сцена кадра перестаёт беречь полосу под язычок: у кромки больше никто не стоит, и кадр берёт всю ширину. ============================================================ */ gb-studio-panel[data-dock="float"] .gbsp { right: auto; left: var(--gbsp-x, 0px); top: var(--gbsp-y, var(--gbsp-top)); } /* КОЛОННА ОСТАЁТСЯ И В ВОЗДУХЕ (gbppl-panel-30-1). До этой волны у оторванного ящика ярлыка не было вовсе, а сворачивала его кнопка в шапке: вертикальный ярлык — фигура, рождённая КРОМКОЙ, и посреди экрана ему не к чему прижиматься. С плашками модов довод переворачивается: режим обязан быть виден любой фигурой и любым доком (Тон 16.09), а колонна с плашками — не ярлык у кромки, а борт пульта. Кнопка .gbsp-min поэтому снята, и сворачивает ящик всюду одна и та же кнопка STUDIO. */ gb-studio-panel[data-dock="float"] .gbsp-panel { border: 1px solid var(--zinc-700); /* В ВОЗДУХЕ СВОБОДНЫ ДВЕ СТОРОНЫ (gbppl-panel-30-6). С 30-2 здесь стояло три угла: колонна кончалась выше ящика, и нижний левый был свободен. Теперь она тянется на всю его высоту (открытый) или сама выше него (свёрнутая полоса) — в обоих случаях левая кромка ящика шов сверху донизу. Свободны правые два, и они же единственные скруглённые; левую пару округляет колонна своей формой. Поэтому у плавающего открытого и плавающего свёрнутого радиус теперь ОДИН и тот же, и второго правила под свёрнутое больше не нужно. */ border-radius: 0 var(--radius) var(--radius) 0; /* ТЕНЬ НА СТУПЕНЬ ТЯЖЕЛЕЕ — ЭТО ТА ЖЕ СТУПЕНЬ ДВАЖДЫ. В tokens.css четыре тени, и --shadow-panel из них самая тяжёлая: «сильнее» в шкале просто нет, а выдумывать пятую волна не имеет права (закон 0a.4). Оторванная коробка обязана читаться поднятой над страницей, поэтому объявленная ступень кладётся в два слоя: ни одного нового числа, а плотность вдвое. Открыто Тону: завести ли в системе --shadow-float отдельной ступенью. */ box-shadow: var(--shadow-panel), var(--shadow-panel); /* Доля Тона без геометрического члена: якоря нет, низ стережёт кламп (studio-panel.js, clampFloat). NO TOKEN на 80 — тот же, что у пристыкованного потолка, шкалы долей вьюпорта в системе нет. */ max-height: 80vh; } gb-studio-panel[data-dock="float"] .gbsp-stage { padding-left: var(--space-16); padding-right: var(--space-16); } /* ---- ПЛОСКАЯ ПОЛОСА: ЯЩИК, СЛОЖЕННЫЙ ДО СВОЕЙ ШАПКИ ---- Тон: «сворачивать её в одну плоскую горизонтальную панель Design Studio». Полоса не новый объект: это .gbsp-head, оставшийся один. Ящик складывается ровно так же, как складывается его полка (gbppl-panel-sections-1) — шапка остаётся, тело уходит, шеврон поворачивается на те же -90°. Языка не прибавилось ни на жест. ПОЧЕМУ ПОЛОСА ТОЛЬКО У ОТОРВАННОГО, А У ПРИСТЫКОВАННОГО ЯЗЫЧОК — И ЭТО РЕШЕНО ГЛАЗАМИ, НЕ РАССУЖДЕНИЕМ. Второй вариант (полоса становится свёрнутой фигурой ВЕЗДЕ, язычок уходит) был собран и снят на тех же страницах, что и первый. На 1280 он хорош: тихая плита «DESIGN STUDIO» у якоря читается лучше вертикального ярлыка. На 390 он проваливается: та же плита берёт 320 из 390 (82% ширины) и ложится поперёк героя, тогда как язычок стоит 26px у кромки. Закрытая консоль обязана быть настолько узкой, насколько может, — за этим закрытие и нужно, и об этом же был флип дока («панель накрывает то, что надо посмотреть», gbppl-panel-dock-1). Значит, у кромки остаётся ярлык, на всех ширинах и байт в байт как был. Отсюда правило: не «два способа свернуть», а ОДИН жест и ДВЕ фигуры, и фигуру выбирает МЕСТО. У кромки сворачивание отдаёт странице всю ширину и оставляет ярлык; посреди экрана отдавать нечего и прижиматься не к чему — вертикальный ярлык в пустоте не фигура. В каждом месте ровно один контрол сворачивания и ровно один клик. Следствие для узких окон: ниже 1024 полёта нет (wireDrag), значит нет и полосы, и свёрнутая консоль там всегда язычок. ВЫСОТА ПОЛОСЫ — ОДНА СТРОКА УПРАВЛЕНИЯ, и с gbppl-panel2-build-1 это строка НАВИГАЦИИ, а не строка титула: поле --space-16, жёлоб разделов (ячейка 28 плюс два инсета и два волоска = 34), поле --space-16, плюс рамка ящика — итого 68 против прежних 56. Своих чисел по-прежнему ноль, просто в шапке теперь стоит ряд, а не слово. Пара обнулений (нижнее поле, линия под шапкой) снята: линии у шапки больше нет вовсе, а срезанное нижнее поле делало полосу кривой — 16 сверху и 0 снизу (поймано скрином, не числом). */ gb-studio-panel[data-dock="float"] .gbsp.is-collapsed .gbsp-panel { display: block; } /* Своего радиуса у свёрнутой полосы больше нет: с gbppl-panel-30-6 у плавающего ящика он один на оба состояния (правило выше). */ gb-studio-panel[data-dock="float"] .gbsp.is-collapsed .gbsp-panel > :not(.gbsp-head) { display: none; } /* ---- РУЧКА ---- Курсор появляется только там, где таскание работает: с 1024 и выше (порог объяснён у wireDrag в studio-panel.js). touch-action снят с ручки, чтобы жест не уезжал в прокрутку страницы на сенсорном ноутбуке. */ @media (min-width: 1024px) { .gbsp-head, .gbsp-layerhead { cursor: grab; touch-action: none; user-select: none; } .gbsp-head button, .gbsp-layerhead button { cursor: pointer; } .gbsp.is-dragging .gbsp-head, .gbsp.is-dragging .gbsp-layerhead { cursor: grabbing; } } /* ---- ПРИМАГНИЧИВАНИЕ: МЕСТО, КУДА ЯЩИК СЯДЕТ ---- Пока ручка в зоне --space-48 от кромки, у этой кромки стоит контур посадочного места: ровно та коробка, которую займёт пристыкованный ящик (якорь --gbsp-top, ширина ящика, потолок пристыкованной формулы). Контур, а не заливка: заливке понадобилась бы полупрозрачность, которой в системе нет, а Blue 400 и толщина 2 уже значат в консоли «вот это выбрано» (фокус строк, активный пункт). Второй голос того же ответа — рамка самого ящика, она тоже переходит в Blue 400: снимок должен показывать намёк, даже когда ящик стоит поверх контура. СЛОЙ 61, ВЫШЕ САМОЙ КОНСОЛИ, И ЭТО НАРОЧНО. Ящик во время таскания стоит РОВНО НАД посадочным местом и закрыл бы контур собой; намёк, видный на 16px с краю, — не намёк. Контур ничего не ловит (pointer-events: none) и живёт ровно столько, сколько длится жест, поэтому «выше пульта» здесь не спор за место, а порядок рисования. Монтируется ВНУТРЬ (ловушка 19/21): в document.body он читал бы --space-* вендорного бандла на каталоге. */ .gbsp-snap { position: fixed; top: var(--gbsp-top); z-index: 1203; /* NO TOKEN: studio band, one over the console (gbppl-comments-layer-1) */ width: min(calc(var(--space-64) * 5), calc(100vw - var(--gbsp-tabw) - 1px)); height: min(80vh, calc(100vh - var(--gbsp-top) - var(--space-16))); pointer-events: none; outline: 2px solid var(--blue-400); outline-offset: -2px; } .gbsp-snap[data-side="left"] { left: 0; } .gbsp-snap[data-side="right"] { right: 0; } gb-studio-panel[data-dock="float"] .gbsp.is-snapping .gbsp-panel { border-color: var(--blue-400); } /* ============================================================ РАЗДЕЛИТЕЛЬ ЯЩИКА, ОДИН НА ВСЕ ПОЛКИ (gbppl-studio-tokens-1) ------------------------------------------------------------ Волосок Zinc 800 между полками ящика жил на ПЯТИ копиях одной и той же пары отступов и на двух разных ритмах: секции держали 14 сверху и 12 снизу, титул 10 до линии и 12 после. Одна и та же линия обязана стоять в одном ритме, и ритм СИММЕТРИЧЕН (6a.3 скилла: воздух сверху равен воздуху снизу). 12 носило NO TOKEN: половина ступени --space-24, на шкале --space-* такой нет. С gbppl-panel-layers-1 ритм СТАЛ СТУПЕНЬЮ: 8 / 8. Два довода сразу. Ступень 8 объявлена в шкале, и NO TOKEN уходит из файла (открытое решение Тона про --space-12 закрывается в пользу существующей ступени, а не новой). И пять разделителей ящика отдают 40px высоты — ровно то, за чем Тон 01.09 просил компактность. Прижать линию к словам 8 не может: полки после этой волны — строки в одну высоту, а не абзацы. ЛИНИЯ МЕЖДУ ГРУППАМИ ОДНОЙ СЕКЦИИ ОСТАЛАСЬ ТОЛЬКО У СЕГМЕНТОВ (Тон 27.08: «между Mode и Device нужен разделитель»). Группы секции This page стали строками выбора, и волосок между двумя соседними строками читался бы как граница таблицы: список строк разделяет собственный ритм, как в навигации этажом выше. ============================================================ */ /* ПОЛКА = ПОЛЕ --space-16 И ЛИНИЯ ОТ КРОМКИ ДО КРОМКИ (gbppl-panel2-build-1). Пара margin/padding 8 + 8 у линии ушла вместе с полем ящика: полка носит своё поле сама, и разделителем работает её верхняя граница. Воздух над линией и под ней равен по устройству, а не по паре чисел (6a.3), потому что это одно и то же поле двух соседних полок. */ .gbsp-sec, .gbsp-foot { padding: var(--space-16); /* Волосок между полками — 700 с gbppl-panel-30-2: на теле 800 линия 800 не существует вовсе. Волоски КОЛОННЫ остались на 800: они лежат на грунте 950, где 800 читается ровно так же, как 700 на 800, и трогать их значило бы менять то, что и так верно. */ border-top: 1px solid var(--zinc-700); } /* Две группы жёлобов в одной полке разделяет ступень, а не линия (пункт 4 шапки файла). */ .gbsp-seggroup + .gbsp-seggroup { margin-top: var(--space-8); } /* ============================================================ ШАПКА ЯЩИКА = НАВИГАЦИЯ ПО РАЗДЕЛАМ (gbppl-panel2-build-1) ------------------------------------------------------------ Шапка была строкой титула с кнопкой дока в хвосте (gbppl-panel-dock-1). Теперь в ней стоят четыре раздела студии иконками и две тихие кнопки пульта. Класс не переименован НАМЕРЕННО: за .gbsp-head ящик таскают (wireDrag), на неё садится счёт непрочитанного у оторванной фигуры (paintTabBadge), и она же остаётся одна, когда ящик сложен в плоскую полосу. Сменилось содержимое строки, не её роль. Линии под шапкой у неё своей нет: её рисует верхняя граница следующей полки, как между любыми двумя полками ящика. ЦЕНА В ВЫСОТЕ, НАЗВАННАЯ ВСЛУХ: плоская полоса свёрнутого оторванного ящика была 320x56 (титул 24 плюс два поля 16). Ряд навигации выше титула на 10 (жёлоб 34 против строки 24), и полоса стала 320x68. Полоса — это шапка, оставшаяся одна, и она честно следует за тем, что в шапке стоит. */ .gbsp-head { display: flex; /* Имя в две строки, команды квадратами: ряд равняется по ВЕРХУ, а не по середине, иначе квадраты уезжают под вторую строку. */ align-items: flex-start; gap: var(--space-8); padding: var(--space-16); } /* КОНТЕКСТ ЗАНИМАЕТ СТРОКУ ЦЕЛИКОМ (gbppl-panel-30-1): имя страницы и статус — единственное, что здесь стоит, и длинному имени есть куда лечь. Ряд иконок-дверей (.gbsp-nav__hub / .gbsp-nav__three) снят вместе с navCell: разделы студии зовутся словами в подвале. */ .gbsp-who { flex: 1 1 auto; min-width: 0; } /* panel-about-1, Ton 30.09: the panel keeps one short line of copy and its existing details door becomes Full description. */ .gbsp-short { margin: var(--space-16) 0 0; color: var(--zinc-300); font-size: 14px; line-height: 1.5; } .gbsp-who > .gbsp-link { width: 100%; text-align: left; font-size: 14px; } gb-studio-panel[data-about-open] > .gbsp { visibility: hidden; pointer-events: none; } /* Native dialog supplies modal focus and inert background. 5vh/5vw and the full-screen phone rule are the dimensions Ton declared. */ .gbsp-about { box-sizing: border-box; position: fixed; inset: 5vh 5vw; margin: 0; width: 90vw; height: 90vh; max-width: none; max-height: none; padding: 0; background: var(--zinc-800); color: var(--zinc-200); border: 1px solid var(--zinc-700); border-radius: var(--radius); box-shadow: var(--shadow-panel); font: 16px/1.5 var(--font-sans); overflow: hidden; } .gbsp-about::backdrop { background: color-mix(in srgb, var(--zinc-950) 80%, transparent); } .gbsp-about__content { box-sizing: border-box; height: 100%; overflow-y: auto; padding: var(--space-48); } .gbsp-about__close { position: absolute; top: var(--space-16); right: var(--space-16); display: grid; place-items: center; width: var(--space-48); height: var(--space-48); padding: 0; border: 0; border-radius: var(--radius); background: var(--zinc-900); color: var(--zinc-200); cursor: pointer; } .gbsp-about__close:hover { background: var(--zinc-700); color: var(--white); } .gbsp-about__close:focus-visible, .gbsp-flow__card:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; } .gbsp-about h2, .gbsp-about h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.35; color: var(--white); } .gbsp-about h2 { padding-right: var(--space-48); } .gbsp-about p { margin: 0; } .gbsp-about__version { color: var(--zinc-300); } .gbsp-about__intro { max-width: calc(var(--space-64) * 12); } .gbsp-about__desc { display: grid; gap: var(--space-16); margin-top: var(--space-24); } .gbsp-about__flow { margin-top: var(--space-48); } /* Ton via Ren 30.09 14:54: full-width equal cards. The 200px minimum is composed from three 64px steps and one 8px step. */ .gbsp-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-64) * 3 + var(--space-8))), 1fr)); grid-auto-rows: 1fr; gap: var(--space-24); margin: var(--space-24) 0 0; padding: 0; list-style: none; } .gbsp-flow > li { min-width: 0; } .gbsp-flow__card, body.gb-demo a.gbsp-flow__card { display: flex; flex-direction: column; gap: var(--space-8); box-sizing: border-box; height: 100%; padding: var(--space-16); border: 1px solid var(--zinc-700); border-radius: var(--radius); background: var(--zinc-900); color: var(--zinc-200); text-decoration: none; } .gbsp-flow__card:hover, body.gb-demo a.gbsp-flow__card:hover { background: var(--zinc-700); } .gbsp-flow__card.is-current, body.gb-demo a.gbsp-flow__card.is-current { border-color: var(--blue-400); } .gbsp-flow__card.is-current .gbsp-flow__title { color: var(--blue-400); } .gbsp-flow__preview { display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius); background: var(--zinc-800); } .gbsp-flow__preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .gbsp-flow__placeholder { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; padding: var(--space-16); text-align: center; color: var(--zinc-300); } .gbsp-flow__title { color: var(--white); font-weight: 600; } /* Ton via Ren 30.09 15:02: notes may occupy two lines. */ .gbsp-flow__note { color: var(--zinc-300); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; } @media (max-width: 639px) { .gbsp-about { inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; } .gbsp-about__content { padding: var(--space-24); } } /* Тихие кнопки пульта стоят своей парой в хвосте строки, и зазор между ними — тот же инсет, что внутри жёлоба: они соседи по одной коробке, а не две отдельные вещи. */ .gbsp-tools { flex: 0 0 auto; display: flex; gap: var(--gbsp-inset); } /* Заголовок остался ровно у одного места — у ШАПКИ СЛОЯ. Капс 14/600/.12em ушёл вместе со строкой-титулом: в пульте больше нет ни одного капса, и заголовок второго уровня говорит тем же голосом, что имя страницы этажом выше, на ступень тише (14 против 16). */ .gbsp-title { display: block; color: var(--white); font-size: 14px; font-weight: 600; line-height: 1.35; } .gbsp-list { margin: 0; padding: 0; list-style: none; } .gbsp-link, body.gb-demo a.gbsp-link { /* тот же антидот, что в header.css */ display: block; /* NO TOKEN на 7: пол ряда списка. Строка 16/1.35 = 21.6, и 7 сверху и снизу дают ряд 36, нижнюю ступень сетки высот (раздел 5); со ступенью --space-8 ряд стал бы 38 и мимо сетки. ЗАКОН ЛИНИЙ (Тон 16.09): горизонтальных полей у строки нет вовсе, и отрицательного поля, которым её земля вылезала к кромке полки, тоже. Земля наведения ровно той же ширины, что колонка текста, и левый край плашки стоит на линии айбрау над ней. */ padding: 7px 0; margin: 0; border-radius: var(--radius); /* ЛЕСТНИЦА ЧЕРНИЛ ЕДЕТ ЦЕЛИКОМ (gbppl-panel-30-2). Подпись ушла с 400 на 300, и строка списка, оставшись на 300, села бы на ту же ступень, что подпись, — а до этого была на ступень громче. Плюс контраст: 300 на теле 800 отдаёт 10.08 против прежних 11.99 на 900, и это единственное место, где осветление грунта РОНЯЛО читаемость. Обе беды лечит один шаг вверх. Четыре рунга после правки: значение white, строка 200, подпись 300, примечание 400. */ color: var(--zinc-200); font-size: 16px; font-weight: 400; line-height: 1.35; text-decoration: none; transition: color var(--mo-micro) var(--mo-move), background var(--mo-micro) var(--mo-move); } .gbsp-link:hover, body.gb-demo a.gbsp-link:hover { color: var(--white); background: var(--zinc-700); } /* Страница, на которой стоишь, — СОСТОЯНИЕ, значит синее (Тон-5). */ .gbsp-link.is-active, body.gb-demo a.gbsp-link.is-active { color: var(--blue-400); font-weight: 500; } /* state stays blue; 400 reads on Zinc 950 */ /* ============================================================ СЕКЦИЯ ЯЩИКА: ЛИНИЯ И ЯРЛЫК (gbppl-panel-2, Тон 25.08: «открыть любую страницу и сразу увидеть, есть ли для неё что-то в разработке»). ------------------------------------------------------------ Каждая следующая полка ящика отделена линией, а не вторым голосом: строки носят тот же .gbsp-link (Тон-6, у нас уже есть такое), меняется только шапка группы. Она в роли Eyebrow (12/600/.12em Zinc 500, shell.css), потому что это ярлык группы, а не заголовок раздела: имя «Design Studio» наверху остаётся единственным титулом панели. ============================================================ */ /* АЙБРАУ ПОЛКИ СНЯТ (gbppl-panel2-build-1, пункт 2 шапки файла). Он был единственным капсом ящика и стоял над каждой полкой; в мокапе полок с заголовками не осталось ни одной — навигация стала рядом иконок, «Prototype» стал именем страницы, а Mode, Device и фильтр комментов называют себя сами словами своих ячеек. Имя полки продолжает жить в aria-label её жёлоба: разметка говорит то, что больше не нарисовано. */ /* ============================================================ ЖЁЛОБ И ЯЧЕЙКА: ОДНА ФИГУРА НА ВЕСЬ ПУЛЬТ (gbppl-panel2-build-1, мокап утверждён Тоном 03.09) ------------------------------------------------------------ Здесь стояла СКЛАДНАЯ ПОЛКА (gbppl-panel-sections-1, Тон 01.09: «нужно сделать секции сворачиваемыми»). Она снята вместе с айбрау, за который складывалась: ручки без заголовка не бывает, а заголовков у полок в новой компоновке нет. Причина, по которой складывание просили, — вертикаль («мы экономим вертикальное пространство»), и её отдаёт сама компоновка: список навигации в 190px стал рядом в 34, ящик на чекауте 595 → 430. Вопрос Тону открыт и стоит в отчёте волны. ЖЁЛОБ (trough) — коробка Zinc 900 на грунте Zinc 950 с волоском рамки Zinc 800 и радиусом системы. ЯЧЕЙКИ внутри делят его ширину ПОРОВНУ (flex: 1 1 0), между ними тот же инсет, что от стенки. Выбранная ячейка — КАРТОЧКА Zinc 700 с белыми чернилами. ВЫСОТА ЖЁЛОБА НЕ ОБЪЯВЛЕНА НИ РАЗУ, и это нарочно. Мокап называл 34 у навигации и 30 у остальных — ни одно из двух не лежит на сетке высот (72/64/56/48/40/36/32/28, раздел 5). Объявлена ВЫСОТА ЯЧЕЙКИ, и обе лежат: ячейка навигации --gb-btn-xsmall-h = 28, пол сетки, живое решение Тона 02.09 («палец важнее кривой»); ячейка контрола --space-24 = 24, ступень шкалы и та же коробка, что у тихих кнопок пульта. Жёлоб получает свой рост от ячейки плюс два инсета плюс два волоска: 34 и 30 приходят сами, как следствие, и в файле их нет. РАДИУС ЯЧЕЙКИ КОНЦЕНТРИЧЕСКИЙ: внешний --radius минус инсет. В мокапе он был написан цифрой 3; здесь он считается, поэтому второго радиуса в системе не появляется. ТЕНИ У КАРТОЧКИ НЕТ. В мокапе под ней лежала 0 1px 2px rgba(0,0,0,.45) — пятая тень, которой в tokens.css нет, а заводить её волна не имеет права (закон 0a.4). Zinc 700 на Zinc 900 читается подъёмом и без неё; проверено глазами на скрине. ============================================================ */ /* ЖЁЛОБ ОПУСТИЛСЯ НА ГРУНТ 950 (gbppl-panel-30-1): тело ящика стало Zinc 900, и коробка контрола обязана лежать НИЖЕ него, а не сливаться с ним. Рамка и радиус прежние. */ .gbsp-trough { display: flex; align-items: stretch; gap: var(--gbsp-inset); padding: var(--gbsp-inset); background: var(--zinc-950); border: 1px solid var(--zinc-700); border-radius: var(--radius); } .gbsp-cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--space-8) * .75); /* NO TOKEN 6: зазор слова и счёта внутри ячейки; --space-8 разводит их шире, чем стоит внутри одной вещи */ height: var(--space-24); padding: 0; background: none; border: 0; border-radius: calc(var(--radius) - var(--gbsp-inset)); color: var(--zinc-400); font-family: inherit; font-size: 14px; font-weight: 500; /* ---- СТРОКА РОСТОМ В ЯЧЕЙКУ, И ЭТО НЕ ВКУС, А АРТЕФАКТ ---- Тон 03.09, посмотрев собранную панель: «у тогла текст чуть вверх поднят по вертикальной оси». Правда, и правда измеримая. Здесь стояло line-height: 1, то есть строка 14 в ячейке 24, и центрировал её align-items. Полулидинг при этом отрицательный ((14 − 16.81) / 2 = −1.4), и Chrome раскладывает его по краям НЕ поровну: замер бокса строки давал 3.22 сверху против 3.95 снизу — 0.73 разницы, слова висели в верхней половине карточки. Чернила говорили то же: «Comment» 5.75 / 6.63, «View» 5.50 / 6.63. Лечение без единого нового числа: строка ростом РОВНО В ЯЧЕЙКУ, тот же --space-24, которым объявлена её высота. Лидинг становится положительным, делить его пополам больше нечего, и бокс строки встаёт по центру сам: замер после — 3.54 / 3.64, разница 0.10 на всех текстовых ячейках, 4 страницы x 3 ширины. ЧТО ПРОБОВАЛОСЬ И НЕ ВЗЯТО. `text-box: trim-both cap alphabetic` — правильный инструмент и Chrome его знает (152), но домашний Inter стоит статическими начертаниями без метрики cap, и на живой странице свойство не сдвинуло ни пикселя (замерено). Компенсация паддингом (1px) перекидывает ошибку в другую сторону той же величины, а 0.5px это подпиксельный костыль. Строка 23 вместо 24 возвращает то же округление, что и 14 (проверено глазами на скрине: неотличимо от исходного). */ line-height: var(--space-24); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--mo-micro) var(--mo-move), color var(--mo-micro) var(--mo-move); } /* Ячейка навигации — ссылка, и правило `a { color: inherit }` демо-тела бьёт её по специфичности (ловушка 1): антидот парой, как в header.css. */ a.gbsp-cell, body.gb-demo a.gbsp-cell { color: var(--zinc-400); text-decoration: none; } .gbsp-cell:hover, body.gb-demo a.gbsp-cell:hover { background: var(--zinc-800); color: var(--white); } .gbsp-cell:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; } /* ОДИН СПОСОБ СКАЗАТЬ «ВЫБРАНО» (gbppl-panel-30-1, Тон 16.09): плашка Blue 600 целиком с белыми чернилами. Карточка Zinc 700 умерла вместе с чёрточками и подчёркиваниями; синий — состояние (Тон-5), и в пульте он теперь значит ровно это и только это. */ .gbsp-cell.is-on, body.gb-demo a.gbsp-cell.is-on { background: var(--blue-600); color: var(--white); } /* ---- КАЖДАЯ ЯЧЕЙКА СВОЯ ЗОНА ---- Тон 03.09: «невыбранные значения не выглядят кликабельными... Inspect Comment слипаются в фразу». Волосок в двухпиксельном жёлобе — та же ограда, что уже стоит между жёлобом Hub и жёлобом трёх разделов, только внутри одной коробки: слова перестают быть предложением и каждая ячейка читается зоной до касания. ОГРАДА ОТСТУПАЕТ ОТ КАРТОЧКИ — и от той, что выбрана, и от той, на которую навели: карточка должна лежать НАД жёлобом, а линия, упирающаяся в её край, приклеивает её обратно. Вертикальный отступ ограды в ДОЛЯХ, а не в пикселях: 20% высоты ячейки — это 4.8 у контрола и 5.6 у навигации, ровно та пропорция, что была нарисована, и ни одного нового числа. */ .gbsp-trough--fenced .gbsp-cell { position: relative; } .gbsp-trough--fenced .gbsp-cell + .gbsp-cell::before { content: ''; position: absolute; left: calc(var(--gbsp-inset) / -2 - .5px); top: 20%; bottom: 20%; width: 1px; background: var(--zinc-700); } .gbsp-trough--fenced .gbsp-cell.is-on::before, .gbsp-trough--fenced .gbsp-cell.is-on + .gbsp-cell::before, .gbsp-trough--fenced .gbsp-cell:hover::before, .gbsp-trough--fenced .gbsp-cell:hover + .gbsp-cell::before { opacity: 0; } /* ЖЁЛОБ НАВИГАЦИИ СНЯТ (gbppl-panel-30-1): разделов иконками в шапке больше нет, они зовутся словами в подвале. Правило --icons ушло вместе с ним: ряд экранов стоит плашками (.gbsp-plaquerow) и держит шкалу целой своим flex-рядом без переносов. */ /* ============================================================ АЙБРАУ ПОЛКИ (gbppl-panel-30-1, Тон 16.09: «view не является заголовком секции — переделать на заголовок секции») ------------------------------------------------------------ Роль Eyebrow системы, значение в значение: 12 / 600 / .12em / Zinc 500 (shell.css, раздел 3 скилла). Своих цифр у заголовка нет, и мокапные 10.5 сюда не поехали: 12 — пол системы (Рассел), ниже не опускаемся. У ПОЛКИ МОДА РЯДОМ СО СЛОВОМ ГЛИФ, и это не украшение: тот же рисунок стоит на плашке, которой полку открыли. Тон 16.09 после первого захода: «нет ментального коннекта иконки слева с тем, что справа» — связь держит рисунок. Глиф говорит Blue 400, потому что плашка, на которую нажали, синяя, а Blue 600 на Zinc 900 тёмен (то же правило, по которому состояние на тёмном носит 400). СЧЁТ ПРИЖАТ К ПРАВОЙ ЛИНИИ и говорит не капсом: это не второе имя полки, а её цифры. Кегль тот же 12, вес 400 — регистр примечания (панель 2.0), трекинга нет. ============================================================ */ /* ЧЕРНИЛА НА СТУПЕНЬ ВВЕРХ (gbppl-panel-30-2): грунт под айбрау стал Zinc 800, и Zinc 500 на нём уходит в шум. Иерархия сдвинута ЦЕЛИКОМ, а не схлопнута: примечание 500 → 400, подпись 400 → 300, и подпись по-прежнему громче примечания ровно на ступень. */ .gbsp-brow-t { display: flex; align-items: center; gap: calc(var(--space-8) * .75); margin: 0 0 var(--space-8); color: var(--zinc-400); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; } .gbsp-brow-t__glyph { flex: 0 0 auto; display: flex; color: var(--blue-400); } .gbsp-brow-t__word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gbsp-brow-t__cnt { margin-left: auto; padding-left: var(--space-8); color: var(--zinc-400); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; } .gbsp-brow-t__cnt[hidden] { display: none; } /* СЧЁТ ПОЛКИ КОММЕНТОВ ПЕЧАТАЕТ ЕЁ ВЛАДЕЛЕЦ (comments.js, .gbc-count первой строкой тела), а стоять он должен в заголовке — так в макете. Панель перевешивает СТРОКУ в свой слот (studio-panel.js, mirrorCount), а оригинал гасит здесь: узел остаётся на месте, потому что paintShelf ищет его внутри своего тела. */ .gbsp-sec--comments .gbc-count { display: none; } /* ---- ХИНТ РЕЖИМА ---- Единственный абзац, оставшийся в консоли. Слова приносит владелец режима своей опцией (inspect.js), панель их не сочиняет. Коробка — тот же грунт 950 и тот же волосок, что у контролов: это не карточка и не алерт, а тихая записка на поверхности. */ .gbsp-hint { margin: 0; padding: var(--space-8); background: var(--zinc-950); border: 1px solid var(--zinc-700); border-radius: var(--radius); color: var(--zinc-300); font-size: 12px; font-weight: 400; line-height: 1.55; } /* ============================================================ ИМЯ СТРАНИЦЫ И ЕЁ СТАТУС (gbppl-panel2-build-1) ------------------------------------------------------------ Мокап разложил то, что раньше было одной строкой выбора: имя прототипа стоит само по себе, а имя ВЕРСИИ живёт в строке Version ниже. Это единственное место ящика с кеглем 16 и весом 600 — базовый кегль системы (Рассел) и единственный заголовок пульта после того, как строка-титул «DESIGN STUDIO» снята. Подпись под именем отвечает на один вопрос: в каком контейнере лежит то, на что смотришь (Тон-12, Тон-13). «Sandbox», «Live», имя раздела в остальной студии. Разделитель «·» — тот же, что держит пары в тайтлах вкладок (правила копии, раздел 3). И ИМЯ ВЕРСИИ ТОЙ ЖЕ ПОДПИСЬЮ (gbppl-panel-version-1, Тон 04.09, продиктованная строка: «Checkout page · Sandbox · V1 · Today's flow»). Хвост «not on Live yet» ушёл: слово Sandbox отвечает на тот же вопрос, и место в 320px отдано тому, чего в строке не было. Подпись стала РЯДОМ из двух вещей — сами слова и тихая дверь в детали версии, — поэтому у неё появилась обёртка .gbsp-name__line; воздух 4 сверху переехал на обёртку, чтобы у ряда была одна прижимка к имени, а не две. ============================================================ */ .gbsp-name { display: block; color: var(--white); font-size: 16px; font-weight: 600; line-height: 1.25; } .gbsp-name__line { display: flex; align-items: center; gap: calc(var(--space-8) / 2); /* половина ступени: глиф стоит ВОЗЛЕ слова, то же деление пополам, что у поля строки выбора */ margin-top: 4px; /* NO TOKEN: пол ступени --space-8, подпись прижата к своему имени — то же число и та же причина, что у .gbsp-opt__desc */ } .gbsp-name__sub { display: block; min-width: 0; color: var(--zinc-400); font-size: 12px; font-weight: 400; line-height: 1.35; } /* ---- ДВЕРЬ В ДЕТАЛИ ВЕРСИИ (gbppl-panel-version-1) ---- Тон 04.09: записка «что поменялось» уезжает из выбора в иконку «детали» возле названия. Фигура НЕ новая: это тот же тихий квадрат, что носят .gbsp-back, .gbsp-dock и .gbsp-copy (правила ниже, в блоке второго слоя), с той же землёй на наведении и тем же кольцом фокуса. Отличие одно и оно от места: квадрат стоит в строке 12-го кегля, поэтому коробка глифа 16, а не 20. */ .gbsp-info { flex: 0 0 auto; width: var(--space-24); height: var(--space-24); display: grid; place-items: center; padding: 0; /* тот же сброс UA-паддинга, что у тихих квадратов выше (gbppl-panel-30-5) */ margin: calc(var(--space-8) / -2) 0; /* квадрат выше строки 12/1.35 на 8: половина сверху, половина снизу, ряд не растёт */ background: none; border: 0; border-radius: calc(var(--radius) - var(--gbsp-inset)); color: var(--zinc-400); cursor: pointer; transition: background var(--mo-micro) var(--mo-move), color var(--mo-micro) var(--mo-move); } .gbsp-info:hover { background: var(--zinc-700); color: var(--white); } .gbsp-info:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; } /* ============================================================ СТРОКА НАСТРОЙКИ: ПОДПИСЬ СЛЕВА, КОНТРОЛ СПРАВА (gbppl-panel2-build-1) ------------------------------------------------------------ Форма из Figma и из разведки контролов: имя настройки стоит в своей колонке, контрол заливает остаток строки. Тон 03.09: «контейнер не тянется на всю ширину. Он должен заливать всё пространство». КОЛОНКА ПОДПИСИ 72 = --space-64 + --space-8. В мокапе она была 74; ближайшая сумма ступеней — 72, разница 2px, а самая длинная подпись («Version») занимает 46.6 при кегле 12/600, то есть запас 25px. Своего числа здесь не заводится. ============================================================ */ .gbsp-row { display: flex; align-items: center; gap: var(--space-8); } .gbsp-row + .gbsp-row { margin-top: var(--space-8); } .gbsp-row__label { flex: 0 0 calc(var(--space-64) + var(--space-8)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gbsp-row__ctl { flex: 1 1 auto; min-width: 0; display: flex; /* ЯКОРЬ РАСКРЫТОГО ЛИСТА (gbppl-panel-version-1). Дропдаун строки Version лежит здесь же, у своей строки, а не в body: слой студии, смонтированный мимо островов шкалы, читает чужие --space-* (ловушка 21), да и уезжать при прокрутке ящика он обязан вместе со своим полем. */ position: relative; } .gbsp-row__ctl > * { flex: 1 1 auto; min-width: 0; } /* ============================================================ ТРИ ГОЛОСА ТЕКСТА (Тон 03.09: «подписи к селектам слева имеют тот же шрифт, что и объяснительный текст снизу. Так не может быть») ------------------------------------------------------------ ПОДПИСЬ НАСТРОЙКИ — имя вещи, её читают каждый раз, чтобы найти нужную строку: 12 / 600 / Zinc 400. Вес и чернила на ступень громче примечания, кегль на ступень тише значения. ПРИМЕЧАНИЕ — фоновая ремарка о состоянии, её читают один раз: 12 / 400 / Zinc 500. Тише по весу и по чернилам, тот же кегль, потому что 12 — пол системы и ниже не опускаемся (Рассел). Zinc 600 примечанию не отдан: 3.4:1 на Zinc 950 не читается вовсе. ============================================================ */ .gbsp-row__label, .gbsp-group__title { display: block; color: var(--zinc-300); font-size: 12px; font-weight: 600; line-height: 1.35; } /* ============================================================ СЕКЦИЯ THIS PAGE (gbppl-panel-4, Тон 26.08: «свести язык к Studio, одной волной») ------------------------------------------------------------ Переключатели самой страницы. Третья и последняя секция, за той же линией и в том же голосе, что Sandbox: eyebrow над списком, строки .gbsp-link, выбранная синяя. Собственных цветов, радиусов и кеглей здесь НЕТ — если строке чего-то не хватает, значит не хватает панели, и правится панель. ПОЧЕМУ ОПЦИИ НЕ КНОПКИ. docs.css, решение Тона 26.08: «контролы не кнопки, инструмент не должен выглядеть как предмет». У PROTO каждый переключатель носил рамку и фон и читался как предмет интерфейса; здесь это строка списка, ровно такая же, как строка песочницы этажом выше. Тег остался