@soxa-ui/theme-base 0.0.0-stage → 0.3.0-beta.1

package/src/reset.css

@@ -0,0 +1,172 @@
+/* ─── Сброс узлов библиотеки ─────────────────────────────────
+ * Тема не стилизует страницу (корневой `AGENTS.md`, «Темы: у пакета темы
+ * свои инструкции»): глобального сброса у неё нет, а то, на что опираются
+ * части soxa, даёт этот сброс — только узлам библиотеки. Нужен он частям, а
+ * не облику, поэтому он в общем слое, а не в теме.
+ *
+ * Выведен из `tailwindcss/preflight.css` правило за правилом: на preflight
+ * части опирались, пока тема oren подключала Tailwind целиком. Правило,
+ * которое задевает узел с классом `so-*` или его псевдоэлемент, перенесено
+ * тем же селектором, суженным до таких узлов, с нулевой специфичностью
+ * (`:where`): правила темы перекрывают его, как перекрывали preflight. Узел
+ * библиотеки — элемент, у которого класс начинается с `so-`
+ * (`[class^='so-'], [class*=' so-']`): у каждого узла разметки библиотеки
+ * такой класс есть. Внутренние узлы без класса сброс называет через класс их
+ * компонента: поле `<input>` у Input, CheckBox и Switch, `<textarea>` у
+ * Textarea, `<svg>` рисунка в иконке Web Components (`<span class="so-icon">`)
+ * и группы строк сетки Calendar (`thead`, `tbody`). Узлы самого рисунка
+ * иконки (`g`, `path`) сброс не называет: свойства коробки рисунок SVG не
+ * читает, а свой рисунок в иконке бывает и у приложения (`<svg so-icon>` с
+ * путями у Angular).
+ *
+ * Чего здесь нет — намеренно:
+ * - правил `html`, `:host` и `body`: шрифт, высота строки, `tab-size`,
+ *   подсветка касания и отступ `body` — типографика страницы, дело
+ *   приложения, и части берут шрифт приложения;
+ * - правил на всё внутри части (`.so-x *`): содержимое слотов — узлы
+ *   приложения;
+ * - правил тегов, которых узлами библиотеки не бывает (`hr`, `abbr`, `b`,
+ *   `code`, `small`, `sub`, `img`, `select`, `summary`, `progress`…), и
+ *   псевдоэлементов, которых у них нет: `::backdrop` (верхнего слоя
+ *   библиотека не берёт), `::file-selector-button`, спиннеров числа и
+ *   частей поля даты (полей `file`, `number`, `date` и `search` у неё нет).
+ *   Ссылка `a` — узел библиотеки: её тегом корня ставит потребитель
+ *   (`<Button tag="a">`).
+ *
+ * Слой — `so.reset`, нижний в слое базы (`index.css`): остальные правила
+ * базы и правила темы встают над ним без спора специфичностью. Сторож того,
+ * что тема не задевает страницу, — `__tests__/sealed.spec.ts`; что облик
+ * частей не изменился — `npm run compare:styles` (`packages/playground/AGENTS.md`,
+ * «Сравнение стилей»). */
+
+/* Коробка от рамки, без полей и отступов браузера, рамка — сплошная нулевой
+ * толщины: ширину рамки задаёт тема, и рамка сразу видна. */
+:where([class^='so-'], [class*=' so-']),
+:where([class^='so-'], [class*=' so-'])::before,
+:where([class^='so-'], [class*=' so-'])::after,
+:where(
+	.so-input > input,
+	.so-check-box > input,
+	.so-switch > input,
+	.so-textarea > textarea,
+	.so-icon > svg,
+	.so-calendar__grid > thead,
+	.so-calendar__grid > tbody
+) {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	border: 0 solid;
+}
+
+/* Ссылка — цвета и оформления текста места, как кнопка. */
+:where(a:is([class^='so-'], [class*=' so-'])) {
+	color: inherit;
+	-webkit-text-decoration: inherit;
+	text-decoration: inherit;
+}
+
+/* Заголовок окна и выезжающей панели — кеглем и начертанием места: их задаёт
+ * тема. */
+:where(h2:is([class^='so-'], [class*=' so-'])) {
+	font-size: inherit;
+	font-weight: inherit;
+}
+
+/* Таблица и сетка Calendar: без отступа строки, цвет рамки — от места, рамки
+ * ячеек слиты. */
+:where(table:is([class^='so-'], [class*=' so-'])) {
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+}
+
+/* Кольцо фокуса Firefox — нынешнее, `auto`: там, где кольцо не рисует тема.
+ * Другие браузеры этот псевдокласс не знают, и `:where` для них пуст. */
+:where(:is([class^='so-'], [class*=' so-']):-moz-focusring) {
+	outline: auto;
+}
+
+/* Списки Pagination и Toasts — без маркеров. */
+:where(ol:is([class^='so-'], [class*=' so-'])) {
+	list-style: none;
+}
+
+/* Рисунок — блоком, а не строкой текста: без зазора под базовой линией. */
+:where(svg:is([class^='so-'], [class*=' so-']), .so-icon > svg) {
+	display: block;
+	vertical-align: middle;
+}
+
+/* Кнопки и поля — шрифтом и цветом места, без фона, скругления и
+ * прозрачности браузера. */
+:where(
+	button:is([class^='so-'], [class*=' so-']),
+	input:is([class^='so-'], [class*=' so-']),
+	textarea:is([class^='so-'], [class*=' so-']),
+	.so-input > input,
+	.so-check-box > input,
+	.so-switch > input,
+	.so-textarea > textarea
+) {
+	font: inherit;
+	font-feature-settings: inherit;
+	font-variation-settings: inherit;
+	letter-spacing: inherit;
+	color: inherit;
+	border-radius: 0;
+	background-color: transparent;
+	opacity: 1;
+}
+
+/* Подсказка пустого поля — полупрозрачный текст поля, а не серый браузера.
+ * Смесь — в браузерах, которые с `currentcolor` в ней не падают (Safari до 17
+ * падал). */
+:where(
+	input:is([class^='so-'], [class*=' so-']),
+	textarea:is([class^='so-'], [class*=' so-']),
+	.so-input > input,
+	.so-textarea > textarea
+)::placeholder {
+	opacity: 1;
+}
+
+@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+	:where(
+		input:is([class^='so-'], [class*=' so-']),
+		textarea:is([class^='so-'], [class*=' so-']),
+		.so-input > input,
+		.so-textarea > textarea
+	)::placeholder {
+		color: color-mix(in oklab, currentcolor 50%, transparent);
+	}
+}
+
+/* Многострочное поле тянется только по высоте. */
+:where(textarea:is([class^='so-'], [class*=' so-']), .so-textarea > textarea) {
+	resize: vertical;
+}
+
+/* Без красной тени Firefox у невалидного поля: ошибку рисует тема. */
+:where(
+	:is(
+		input:is([class^='so-'], [class*=' so-']),
+		textarea:is([class^='so-'], [class*=' so-']),
+		.so-input > input,
+		.so-check-box > input,
+		.so-switch > input,
+		.so-textarea > textarea
+	):-moz-ui-invalid
+) {
+	box-shadow: none;
+}
+
+/* Скругление кнопки в Safari на iOS. */
+:where(button:is([class^='so-'], [class*=' so-'])) {
+	appearance: button;
+}
+
+/* `hidden` на части прячет её и тогда, когда тема задаёт ей `display`. */
+:where(:is([class^='so-'], [class*=' so-'])[hidden]:not([hidden='until-found'])) {
+	display: none !important;
+}

package/src/swipe.css

@@ -0,0 +1,71 @@
+/* ─── Полоса жеста ───────────────────────────────────────────
+ * «Смахнуть, чтобы закрыть» — у слоёв, которые смахивают: панелей Popover,
+ * Select и DatePicker, выезжающей панели Drawer. Полосу, за которую тянут,
+ * рисует разметка прямым потомком панели, пока жест включён (`swipe`), под
+ * `aria-hidden`: сама она ничего не делает, тянут её жестом.
+ *
+ * Зона захвата — сторона в минимум цели указателя (`--so-target-size`,
+ * `target.css`): полосу берут пальцем. Вдоль края она во всю его длину, и
+ * цель не меньше квадрата минимума. Где зона стоит, решает слой — край
+ * панели у якоря (`anchored.css`), край панели Popover в контейнере
+ * (`components/popover.css`) и низ карточки выбора месяца Calendar
+ * (`components/calendar.css`), край Drawer (`components/drawer.css`); здесь
+ * — то, что у полосы одно: курсор «можно взять» и штрих посередине зоны.
+ *
+ * Штрих — псевдоэлемент полосы: здесь его место и размер, вдоль края. У
+ * бокового края он поперёк строки — длину и толщину меняет правило края у
+ * слоя. Длина и толщина — переменные корня документа; умолчания — числа темы
+ * oren, тема задаёт свои на корне документа.
+ *
+ * Сдвиг во время жеста плагин жеста пишет инлайном в слой, который тянут, —
+ * переменной `--so-swipe-offset` (px со знаком оси окна), — а в `translate`
+ * его кладёт база, у каждого слоя в его файле: слой идёт за указателем в
+ * любом режиме движения, это его место, а не переход.
+ *
+ * Сдвиг принадлежит слою, который тянут, и другой слой его не наследует:
+ * свой ноль у каждого слоя с жестом объявлен здесь, а инлайн плагина у того,
+ * который тянут, его перекрывает. Слой, открытый внутри смахиваемой панели
+ * (`contained`), иначе взял бы её сдвиг себе в `translate` и уехал вдвое.
+ * Регистрация `@property` с `inherits: false` дала бы то же не во всех
+ * браузерах темы: Firefox до 128 её не знает, а полифил Tailwind регистрацию
+ * в слое не видит. Потомок, который не слой, сдвиг наследует — так карточка
+ * выбора месяца Calendar идёт за жестом своей панели
+ * (`components/calendar.css`).
+ *
+ * Облик — цвет и форма штриха, его вид в режиме принудительных цветов — и
+ * движение — возврат отпущенного слоя, уход смахнутого и въезд — рисует
+ * тема. */
+
+.so-popover__panel,
+.so-select__panel,
+.so-date-picker__panel,
+.so-drawer,
+.so-toasts-item {
+	--so-swipe-offset: 0px;
+}
+
+:root {
+	--so-swipe-grip-length: 2.25rem;
+	--so-swipe-grip-thickness: 0.25rem;
+}
+
+.so-popover__handle,
+.so-select__handle,
+.so-date-picker__handle,
+.so-drawer__handle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: grab;
+}
+
+.so-popover__handle::before,
+.so-select__handle::before,
+.so-date-picker__handle::before,
+.so-drawer__handle::before {
+	content: '';
+	display: block;
+	flex-shrink: 0;
+	inline-size: var(--so-swipe-grip-length);
+	block-size: var(--so-swipe-grip-thickness);
+}

package/src/target.css

@@ -0,0 +1,46 @@
+/* ─── Зона нажатия мелкой кнопки ─────────────────────────────
+ * Минимум цели указателя — 24 px (WCAG 2.5.8, AA). Кнопки в строке поля —
+ * очистка Input, NumberInput и DateInput, кнопки шага NumberInput, стрелка
+ * Select, очистка и кнопка календаря DatePicker — на мелких размерах меньше
+ * него: строка слота на `sm` — 20 px. Цель им добирает зона — невидимый
+ * квадрат по центру кнопки со стороной в минимум цели: нажатие по ней —
+ * нажатие по кнопке, а сама кнопка выглядит по-прежнему. Зона — псевдоэлемент
+ * кнопки и стоит от неё, а кнопка позиционирована (`relative` у Button,
+ * `button.css`; стрелка Select — не кнопка, а обёртка слота, и `relative` ей
+ * ставит её правило, `components/select.css`). Зона симметрична: зеркало под
+ * RTL ей не нужно, а поворот стрелки Select её не сдвигает.
+ *
+ * С `normal` кнопка не меньше зоны сама. На `sm` зона выходит за кнопку на
+ * 2 px с каждой стороны: по высоте — в просвет слота до рамки, по строке — в
+ * поле слота у края поля или в зазор до соседа в слоте. Соседа без зоны
+ * (кнопку потребителя в слоте) она не задевает, а с зоной сходится встык —
+ * кнопки шага между собой, очистка со стрелкой Select или с кнопкой календаря
+ * DatePicker. У начала первой кнопки слота вплотную стоит ввод — поле или ряд
+ * частей даты, — и зона заходит на него на те же 2 px: нажатие у самого края
+ * ввода достаётся кнопке — очистке, а без неё стрелке Select или кнопке
+ * календаря, которые открывают панель.
+ *
+ * Сторона зоны — переменная корня документа, одна на всех, у кого зона есть:
+ * её же берут крестик тега (`components/tags.css`), кнопка сортировки Table
+ * (`components/table.css`) и зона захвата полосы жеста (`swipe.css`).
+ * Умолчание — число темы oren; тема задаёт своё на корне документа.
+ *
+ * Список — кнопки в строке поля; у крестика тега и кнопки сортировки Table
+ * зона — в файле их блока, своим селектором. */
+
+:root {
+	--so-target-size: 1.5rem;
+}
+
+.so-input__clear::before,
+.so-number-input__clear::before,
+.so-number-input__decrement::before,
+.so-number-input__increment::before,
+.so-select__arrow::before,
+.so-date-input__clear::before,
+.so-date-picker__clear::before,
+.so-date-picker__trigger::before {
+	content: '';
+	position: absolute;
+	inset: calc(50% - var(--so-target-size) / 2);
+}