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

package/src/components/accordion.css

@@ -0,0 +1,96 @@
+/* ─── Accordion ───────────────────────────────────────────────
+ * Секции в столбец: у каждой — строка заголовка (Button) и панель под ней.
+ *
+ *   .so-accordion                     корень — столбец секций
+ *     .so-accordion-item              секция
+ *       .so-accordion-item__header    заголовок — Button
+ *         .so-accordion-item__arrow   обёртка стрелки в слоте у края
+ *       .so-accordion-item__body      место панели
+ *         .so-accordion-item__content панель — содержимое секции
+ *
+ * Раскрытая секция — `data-selected` её корня (пишет расширение выбора).
+ * Закрытая панель схлопнута строкой сетки места (`0fr`) — содержимое на
+ * месте, в дереве, а высоты у него нет; раскрытая встаёт во всю высоту
+ * содержимого (`1fr`). Схлопывается строка сетки, а не высота: высоту
+ * содержимого знать не нужно, и тема может вести раскрытие переходом строки.
+ *
+ * Зазоры — переменные корня документа: между секциями, поле заголовка и поле
+ * раскрытой панели по оси блока. Умолчания — числа темы oren; тема задаёт
+ * свои на корне документа.
+ *
+ * Облик — вид заголовка, поворот стрелки раскрытой секции и раскрытие
+ * переходом (движение) — рисует тема. */
+
+:root {
+	--so-accordion-gap: 0.25rem;
+	--so-accordion-header-padding: 0.5rem;
+	--so-accordion-content-padding: 0.5rem;
+}
+
+.so-accordion {
+	display: flex;
+	flex-direction: column;
+	gap: var(--so-accordion-gap);
+}
+
+.so-accordion-item {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+/* Заголовок — во всю строку секции, содержимое — по её началу, в RTL это
+ * правый край. Только своя область текста: правило по любой `.so-button` в
+ * секции доставало бы и кнопки в её содержимом. Отступы детей области —
+ * нулевой специфичности: дети — содержимое потребителя, и его собственный
+ * класс с отступом обязан их перекрыть (`button.css`). */
+.so-accordion-item__header {
+	justify-content: flex-start;
+	width: 100%;
+	padding-block: var(--so-accordion-header-padding);
+}
+
+.so-accordion-item__header > .so-button__text {
+	text-align: start;
+}
+
+:where(.so-accordion-item__header > .so-button__text > *) {
+	margin-inline: 0 auto;
+}
+
+/* Стрелка — обёртка слота, а не сама иконка: подменишь иконку через
+ * `leading-icon` или `trailing-icon` — тема повернёт и её. Обёртка — коробка,
+ * а не строка: к строчной коробке поворот не применяется. */
+.so-accordion-item__arrow {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+/* Пустая обёртка — слот стрелки задан, но этой секции ничего не нарисовал, а
+ * стрелки по умолчанию на её стороне нет — места в ряду заголовка не
+ * занимает: иначе зазор ряда сдвинул бы текст. */
+.so-accordion-item__arrow:empty {
+	display: none;
+}
+
+.so-accordion-item__body {
+	display: grid;
+	grid-template-rows: 0fr;
+}
+
+/* Раскрытие — только своей панели: правило через потомка раскрывало бы и
+ * секции Accordion, вложенного в содержимое. */
+.so-accordion-item[data-selected='true'] > .so-accordion-item__body {
+	grid-template-rows: 1fr;
+}
+
+/* Строка `0fr` схлопывает содержимое панели, но не её поле: поле — только
+ * раскрытой, иначе у свёрнутой секции оставалась бы пустая полоса. */
+.so-accordion-item__content {
+	overflow: hidden;
+	padding-block: 0;
+}
+
+.so-accordion-item[data-selected='true'] > .so-accordion-item__body > .so-accordion-item__content {
+	padding-block: var(--so-accordion-content-padding);
+}

package/src/components/button.css

@@ -0,0 +1,139 @@
+/* ─── Button ──────────────────────────────────────────────────
+ * Строка из трёх мест: слот `leading` у начала кнопки, область текста,
+ * слот `trailing` у конца. Область текста растёт на всё место между слотами
+ * — середина целиком её, — и слоты стоят у краёв, как бы ни была широка
+ * кнопка.
+ *
+ * Шкала размеров — переменные корня документа по размеру (`sm`…`2xl`):
+ * высота, поле по строке, зазор между частями строки и кегль. Кегля у
+ * `normal` нет: кнопка берёт кегль места. Шкала — не только Button: по ней с
+ * кнопкой в одну строку встают части других компонентов (клетка Pagination,
+ * плитка дня Calendar, строка Table, кнопки шапки окна), и числа они берут
+ * отсюда, а не копируют. Умолчания — числа темы oren; тема задаёт свои на
+ * корне документа.
+ *
+ * Облик — фон, текст, рамка, скругление, кольцо фокуса и виды — рисует тема. */
+
+:root {
+	--so-button-height-sm: 1.75rem;
+	--so-button-height-normal: 2rem;
+	--so-button-height-lg: 2.25rem;
+	--so-button-height-xl: 2.5rem;
+	--so-button-height-2xl: 2.75rem;
+
+	--so-button-padding-sm: 0.375rem;
+	--so-button-padding-normal: 0.625rem;
+	--so-button-padding-lg: 0.75rem;
+	--so-button-padding-xl: 0.875rem;
+	--so-button-padding-2xl: 1rem;
+
+	--so-button-gap-sm: 0.25rem;
+	--so-button-gap-normal: 0.375rem;
+	--so-button-gap-lg: 0.5rem;
+	--so-button-gap-xl: 0.625rem;
+	--so-button-gap-2xl: 0.75rem;
+
+	/* The font of a Button counts from the font of the place, which `normal`
+	 * takes as is: `sm` is 2px smaller, `lg`, `xl` and `2xl` 2px, 4px and 8px
+	 * larger — 14 / 16 / 18 / 20 / 24px at a 16px place, 12 / 14 / 16 / 18 /
+	 * 22px at 14px. `em` resolves where the variable is read, against the
+	 * parent, that is the place the part stands in. */
+	--so-button-font-size-sm: calc(1em - 0.125rem);
+	--so-button-line-height-sm: calc(1.25 / 0.875);
+	--so-button-font-size-lg: calc(1em + 0.125rem);
+	--so-button-line-height-lg: calc(1.75 / 1.125);
+	--so-button-font-size-xl: calc(1em + 0.25rem);
+	--so-button-line-height-xl: calc(1.75 / 1.25);
+	--so-button-font-size-2xl: calc(1em + 0.5rem);
+	--so-button-line-height-2xl: calc(2 / 1.5);
+}
+
+/* Строка по центру по обеим осям, не выше места, где стоит. `relative` —
+ * опора для того, что встаёт поверх кнопки: зона нажатия кнопки сортировки
+ * Table — псевдоэлемент кнопки в 24 px. */
+.so-button {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	max-height: 100%;
+	cursor: pointer;
+}
+
+/* Область текста — блок, растущий на всё место между слотами. Строчное
+ * содержимое области (текст) двигает `text-align`, блочное — нет, а иконка
+ * в слоте по умолчанию — блок (корень `.so-icon`, `icon.css`; `svg`
+ * библиотеки — сброс, `reset.css`). Поэтому блочного ребёнка двигают
+ * авто-отступы; строчного они не трогают — у строчного элемента `auto`
+ * считается нулём, — и одно правило держит и текст, и иконку. Без этого в
+ * кнопке шире своей иконки крестик стоял у начала: так было у квадратной
+ * кнопки закрытия Popover.
+ *
+ * Флекса вместо блока нет намеренно: у флекс-контейнера текст — анонимный
+ * флекс-элемент, и многоточие пропало бы. Отступы детей — нулевой
+ * специфичности: дети — содержимое потребителя, и его собственный класс с
+ * отступом обязан их перекрыть. Строки списков ставят содержимое к началу
+ * строки своим правилом (тема, по контексту). */
+.so-button__text {
+	flex-grow: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-align: center;
+}
+
+:where(.so-button__text > *) {
+	margin-inline: auto;
+}
+
+/* Выключенная — `data-disabled`: ядро пишет его на любом теге. Нативный
+ * атрибут есть только у части тегов (у Button на `span` его нет никогда), и
+ * он переезжает вместе с тегом: селектор по нему молча перестал бы
+ * срабатывать. Гаснет кнопка целиком (`disabled.css`) и нажатий не ловит. */
+.so-button[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+.so-button[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+.so-button--size-sm {
+	height: var(--so-button-height-sm);
+	padding-inline: var(--so-button-padding-sm);
+	gap: var(--so-button-gap-sm);
+	font-size: var(--so-button-font-size-sm);
+	line-height: var(--so-button-line-height-sm);
+}
+
+.so-button--size-normal {
+	height: var(--so-button-height-normal);
+	padding-inline: var(--so-button-padding-normal);
+	gap: var(--so-button-gap-normal);
+}
+
+.so-button--size-lg {
+	height: var(--so-button-height-lg);
+	padding-inline: var(--so-button-padding-lg);
+	gap: var(--so-button-gap-lg);
+	font-size: var(--so-button-font-size-lg);
+	line-height: var(--so-button-line-height-lg);
+}
+
+.so-button--size-xl {
+	height: var(--so-button-height-xl);
+	padding-inline: var(--so-button-padding-xl);
+	gap: var(--so-button-gap-xl);
+	font-size: var(--so-button-font-size-xl);
+	line-height: var(--so-button-line-height-xl);
+}
+
+.so-button--size-2xl {
+	height: var(--so-button-height-2xl);
+	padding-inline: var(--so-button-padding-2xl);
+	gap: var(--so-button-gap-2xl);
+	font-size: var(--so-button-font-size-2xl);
+	line-height: var(--so-button-line-height-2xl);
+}