griffincss-utils 0.16.0

package/scss/_spacing.scss

@@ -0,0 +1,125 @@
+// Griffincss — Spacing Utilities
+// Внешние и внутренние отступы. Шаг шкалы — 0.25rem.
+//
+// Шкала разрежена намеренно: мелкий шаг нужен только у малых значений,
+// дальше идут секционные отступы 2.5rem, 3rem и 4rem. Промежуточные величины
+// задаются своим CSS — генерировать 17 ступеней ради трёх используемых незачем.
+//
+// Адаптивность — суффиксом брейкпоинта: .gr-p-4-md. Префиксная форма
+// .gr-md\:p-4 удалена в v0.7.0; в библиотеке остался один синтаксис.
+
+@use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
+
+$gr-spacing-base: 0.25rem !default;
+$gr-spacing-steps: (0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16) !default;
+
+// Один и тот же набор правил выводится дважды: без суффикса и внутри
+// каждого медиа-запроса. Миксин держит оба вывода в одном определении —
+// разойтись они не могут.
+@mixin gr-spacing-scale($suffix: '') {
+  @each $i in $gr-spacing-steps {
+    $val: $i * $gr-spacing-base;
+
+    .gr-m-#{$i}#{$suffix}  { margin: $val; }
+
+    .gr-p-#{$i}#{$suffix} {
+      // Зазор — источник, padding — следствие. Тогда спор .gr-p-* и
+      // .gr-radius за padding перестаёт что-либо значить: обе стороны
+      // приходят к одному значению. Только равномерный отступ:
+      // у осевых и односторонних зазор для каскада не определён.
+      --gr-p: #{$val};
+
+      padding: var(--gr-p);
+    }
+
+
+    .gr-mt-#{$i}#{$suffix} { margin-top: $val; }
+    .gr-mr-#{$i}#{$suffix} { margin-right: $val; }
+    .gr-mb-#{$i}#{$suffix} { margin-bottom: $val; }
+    .gr-ml-#{$i}#{$suffix} { margin-left: $val; }
+
+    .gr-pt-#{$i}#{$suffix} { padding-top: $val; }
+    .gr-pr-#{$i}#{$suffix} { padding-right: $val; }
+    .gr-pb-#{$i}#{$suffix} { padding-bottom: $val; }
+    .gr-pl-#{$i}#{$suffix} { padding-left: $val; }
+
+    // Логические односторонние отступы: start — начало строки, end — конец.
+    // В LTR совпадают с left/right, в RTL меняются местами сами, без правил
+    // на [dir] и :dir().
+    //
+    // Адаптивных вариантов у них нет намеренно. Полный набор — 12 ступеней
+    // на четырёх свойствах и пяти брейкпоинтах, 240 селекторов и +1086 Б
+    // gzip; переход mx/px на одно свойство компенсирует из них 123 Б.
+    // Ступени сохранены все до одной — класс заменяется на логический
+    // один-в-один, — а платой за это стал отказ от суффикса брейкпоинта:
+    // так прирост держится в 240 Б gzip, а raw-размер файла даже падает.
+    @if $suffix == '' {
+      .gr-ms-#{$i} { margin-inline-start: $val; }
+      .gr-me-#{$i} { margin-inline-end: $val; }
+
+      .gr-ps-#{$i} { padding-inline-start: $val; }
+      .gr-pe-#{$i} { padding-inline-end: $val; }
+    }
+
+    // Осевые — одно логическое свойство вместо пары физических: в LTR
+    // результат тот же, в RTL корректный, а объявлений вдвое меньше.
+    .gr-mx-#{$i}#{$suffix} { margin-inline: $val; }
+
+    .gr-my-#{$i}#{$suffix} {
+      margin-top: $val;
+      margin-bottom: $val;
+    }
+
+    .gr-px-#{$i}#{$suffix} { padding-inline: $val; }
+
+    .gr-py-#{$i}#{$suffix} {
+      padding-top: $val;
+      padding-bottom: $val;
+    }
+  }
+
+  // Авто-отступы: центрирование и прижатие к краю
+  .gr-mx-auto#{$suffix} {
+    margin-inline: auto;
+  }
+
+  .gr-ml-auto#{$suffix} {
+    margin-left: auto;
+  }
+
+  .gr-mr-auto#{$suffix} {
+    margin-right: auto;
+  }
+
+  // Прижатие к краю строки, а не к стороне экрана: в RTL .gr-ms-auto
+  // отодвигает элемент вправо, .gr-me-auto — влево. Суффикса брейкпоинта
+  // нет по той же причине, что и у остальных логических классов.
+  @if $suffix == '' {
+    .gr-ms-auto {
+      margin-inline-start: auto;
+    }
+
+    .gr-me-auto {
+      margin-inline-end: auto;
+    }
+  }
+}
+
+@include gr-spacing-scale;
+
+// Адаптивные варианты
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width >= $bp-value) {
+    @include gr-spacing-scale('-#{$bp-name}');
+  }
+}
+
+// Контейнерные варианты: тот же набор правил, но шириной меряется ближайший
+// предок с .gr-cq, а не окно. Суффикс отличается одной буквой — .gr-p-4-cmd
+// против .gr-p-4-md, — потому что синтаксис адаптивности в библиотеке один.
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-media($bp-name) {
+    @include gr-spacing-scale('-c#{$bp-name}');
+  }
+}

package/scss/_typography.scss

@@ -0,0 +1,251 @@
+// Griffincss — Typography Utilities
+// Font sizes, weights, alignment, transform, line-height, decoration, font families
+
+@use 'sass:math';
+@use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
+
+// Font size scale
+$gr-text-sizes: (
+  xs:   0.75rem,
+  sm:   0.875rem,
+  base: 1rem,
+  lg:   1.125rem,
+  xl:   1.25rem,
+  2xl:  1.5rem,
+  3xl:  1.875rem,
+  4xl:  2.25rem,
+  5xl:  3rem,
+  6xl:  3.75rem
+);
+
+@each $name, $size in $gr-text-sizes {
+  .gr-text-#{$name} { font-size: $size; }
+}
+
+// Относительные размеры: шаг в пикселях от текущего размера, а не от корня.
+// Нужны там, где блок должен подстраиваться под окружение, не зная, в каком
+// месте шаблона его покажут: виджет с одним и тем же содержимым в шапке
+// и в подвале, подгружаемый из БД текст.
+//
+// Шаг задан в px, а не долей em, намеренно: при родителе 16px .gr-text-rel-sm
+// даёт ровно 14px, как и базовый .gr-text-sm, — попадание в шкалу точное,
+// без округлений. Обратная сторона в том, что шаг фиксирован: при родителе
+// 32px тот же класс даст 30px, а не 28px.
+//
+// Ступени base здесь нет: класс, не меняющий размер, не нужен — его роль
+// играет отсутствие класса.
+//
+// Адаптивных вариантов у набора нет намеренно — размер здесь задаёт
+// вложенность, а не ширина окна или контейнера.
+$gr-text-rel-steps: (
+  xs:  -4px,
+  sm:  -2px,
+  lg:   2px,
+  xl:   4px,
+  2xl:  6px,
+  3xl:  8px
+);
+
+@each $gr-name, $gr-delta in $gr-text-rel-steps {
+  .gr-text-rel-#{$gr-name} {
+    // Знак разворачивается в отдельную ветку: calc(1em + -4px) валиден,
+    // но читается в devtools хуже, чем calc(1em - 4px).
+    @if $gr-delta < 0 {
+      font-size: calc(1em - #{math.abs($gr-delta)});
+    } @else {
+      font-size: calc(1em + #{$gr-delta});
+    }
+  }
+}
+
+// Font weight
+$gr-weights: (
+  "thin":       100,
+  "extralight": 200,
+  "light":      300,
+  "normal":     400,
+  "medium":     500,
+  "semibold":   600,
+  "bold":       700,
+  "extrabold":  800,
+  "black":      900
+);
+
+@each $name, $weight in $gr-weights {
+  .gr-font-#{$name} { font-weight: $weight; }
+}
+
+// Text alignment
+// left/right буквальны и остаются такими: их выбирают, когда сторона
+// действительно нужна физическая. Разворот по направлению письма даёт
+// пара start/end — в LTR она совпадает с left/right, в RTL меняется местами.
+.gr-text-left    { text-align: left; }
+.gr-text-center  { text-align: center; }
+.gr-text-right   { text-align: right; }
+.gr-text-justify { text-align: justify; }
+.gr-text-start   { text-align: start; }
+.gr-text-end     { text-align: end; }
+
+// Text transform
+.gr-uppercase  { text-transform: uppercase; }
+.gr-lowercase  { text-transform: lowercase; }
+.gr-capitalize { text-transform: capitalize; }
+
+// Line height
+$gr-leading: (
+  tight:  1.25,
+  snug:   1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose:  2
+);
+
+@each $name, $value in $gr-leading {
+  .gr-leading-#{$name} { line-height: $value; }
+}
+
+// Text decoration
+.gr-underline     { text-decoration: underline; }
+.gr-no-underline  { text-decoration: none; }
+.gr-line-through  { text-decoration: line-through; }
+
+// Font style
+.gr-italic     { font-style: italic; }
+.gr-not-italic { font-style: normal; }
+
+// Whitespace and wrapping
+.gr-break-words {
+  overflow-wrap: break-word;
+}
+
+.gr-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gr-whitespace-nowrap { white-space: nowrap; }
+.gr-whitespace-pre    { white-space: pre; }
+.gr-whitespace-normal { white-space: normal; }
+
+// Обрезка по числу строк. -webkit-box здесь не пережиток: обрезка по строкам
+// работает только внутри этой раскладки, стандартного эквивалента нет.
+// Свойство line-clamp пишется рядом с префиксным — как только поддержка
+// станет повсеместной, префиксную строку можно снять без правки классов.
+@each $gr-lines in (1, 2, 3, 4, 5, 6) {
+  .gr-line-clamp-#{$gr-lines} {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: $gr-lines;
+    line-clamp: $gr-lines;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.gr-line-clamp-none {
+  display: block;
+  overflow: visible;
+  -webkit-line-clamp: none;
+  line-clamp: none;
+}
+
+// Маркеры списка. Ресет снимает их только с ul[role="list"] / ol[role="list"],
+// эти классы дают тот же результат там, где менять разметку нельзя.
+.gr-list-none {
+  // Свойство логическое, а не padding-left: маркерный отступ в RTL лежит
+  // справа, и физическая сторона снимала бы не тот отступ.
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.gr-list-disc    { list-style: disc; }
+.gr-list-decimal { list-style: decimal; }
+.gr-list-inside  { list-style-position: inside; }
+.gr-list-outside { list-style-position: outside; }
+
+// Перенос строк в заголовках и абзацах: balance выравнивает длину строк
+// в коротком тексте, pretty убирает висячие слова в длинном.
+.gr-text-balance { text-wrap: balance; }
+.gr-text-pretty  { text-wrap: pretty; }
+
+// Font families
+.gr-font-sans  { font-family: var(--gr-font-sans); }
+.gr-font-serif { font-family: var(--gr-font-serif); }
+.gr-font-mono  { font-family: var(--gr-font-mono); }
+
+// Адаптивный набор — один на оба вида запроса. Оконный вариант получает
+// суффикс брейкпоинта, контейнерный — тот же суффикс с буквой c; правила
+// описаны один раз, поэтому разойтись не могут.
+@mixin gr-typography-scale($suffix) {
+  // Font sizes responsive
+  @each $name, $size in $gr-text-sizes {
+    .gr-text-#{$name}#{$suffix} { font-size: $size; }
+  }
+
+  // Font weights responsive
+  @each $name, $weight in $gr-weights {
+    .gr-font-#{$name}#{$suffix} { font-weight: $weight; }
+  }
+
+  // Text alignment responsive
+  .gr-text-left#{$suffix}    { text-align: left; }
+  .gr-text-center#{$suffix}  { text-align: center; }
+  .gr-text-right#{$suffix}   { text-align: right; }
+  .gr-text-justify#{$suffix} { text-align: justify; }
+  .gr-text-start#{$suffix}   { text-align: start; }
+  .gr-text-end#{$suffix}     { text-align: end; }
+
+  // Text transform responsive
+  .gr-uppercase#{$suffix}  { text-transform: uppercase; }
+  .gr-lowercase#{$suffix}  { text-transform: lowercase; }
+  .gr-capitalize#{$suffix} { text-transform: capitalize; }
+
+  // Line height responsive
+  @each $name, $value in $gr-leading {
+    .gr-leading-#{$name}#{$suffix} { line-height: $value; }
+  }
+
+  // Text decoration responsive
+  .gr-underline#{$suffix}    { text-decoration: underline; }
+  .gr-no-underline#{$suffix}  { text-decoration: none; }
+  .gr-line-through#{$suffix}  { text-decoration: line-through; }
+
+  // Font style responsive
+  .gr-italic#{$suffix}     { font-style: italic; }
+  .gr-not-italic#{$suffix} { font-style: normal; }
+
+  // Whitespace responsive
+  .gr-break-words#{$suffix} {
+    overflow-wrap: break-word;
+  }
+
+  .gr-truncate#{$suffix} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .gr-whitespace-nowrap#{$suffix} { white-space: nowrap; }
+  .gr-whitespace-pre#{$suffix}    { white-space: pre; }
+  .gr-whitespace-normal#{$suffix} { white-space: normal; }
+
+  // Font families responsive
+  .gr-font-sans#{$suffix}  { font-family: var(--gr-font-sans); }
+  .gr-font-serif#{$suffix} { font-family: var(--gr-font-serif); }
+  .gr-font-mono#{$suffix}  { font-family: var(--gr-font-mono); }
+}
+
+// Адаптивные варианты по ширине окна
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width >= $bp-value) {
+    @include gr-typography-scale('-#{$bp-name}');
+  }
+}
+
+// Контейнерные варианты — от ширины ближайшего предка с .gr-cq
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-media($bp-name) {
+    @include gr-typography-scale('-c#{$bp-name}');
+  }
+}

package/scss/_visibility.scss

@@ -0,0 +1,122 @@
+// Griffincss — Visibility Utilities
+// Display, visibility, and accessibility helpers
+
+@use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
+
+// Display. Флекс и грид сюда не входят: .gr-flex, .gr-inline-flex и .gr-grid
+// живут в ядре, вместе с остальной раскладкой и своими адаптивными
+// вариантами. Дубли .gr-flex-display / .gr-grid-display, разошедшиеся
+// с ядром только из-за запрета пересечения классов, удалены в 0.8.0.
+.gr-hidden        { display: none; }
+.gr-block         { display: block; }
+.gr-inline        { display: inline; }
+.gr-inline-block  { display: inline-block; }
+
+// Видимость без изъятия из потока: место под элемент сохраняется
+.gr-invisible { visibility: hidden; }
+.gr-visible   { visibility: visible; }
+
+// Overflow — по обеим осям и по каждой отдельно
+@each $gr-value in (auto, hidden, clip, scroll, visible) {
+  .gr-overflow-#{$gr-value}   { overflow: $gr-value; }
+  .gr-overflow-x-#{$gr-value} { overflow-x: $gr-value; }
+  .gr-overflow-y-#{$gr-value} { overflow-y: $gr-value; }
+}
+
+// Прокрутка внутри скруглённого блока. Полосу прокрутки Blink рисует
+// прямоугольником и по border-radius НЕ обрезает: у блока с overflow: auto
+// нижние (или боковые) углы срезаются полосой — скругление пропадает ровно
+// там, где полоса появилась. Свойство overflow тут бессильно, а clip-path
+// режет всю отрисовку элемента, полосу включительно.
+//
+// Радиус берётся из --gr-r — той самой переменной, которую публикуют
+// .gr-radius* (Этап 9). Без неё утилита не делает ничего: фолбэк 0 оставляет
+// прямые углы прямыми, вместо того чтобы скруглить блок, который скруглять
+// не просили.
+//
+//   <div class="gr-radius gr-overflow-x-auto gr-scroll-clip">…</div>
+//
+// Границы приёма. Углы обрезка возвращает, рамку — нет: полоса рисуется
+// поверх нижней границы своего элемента, и свойствами самого блока эту
+// границу не вернуть. Блоку с рамкой (а равно с внешней тенью, которую
+// clip-path тоже срежет) нужен внешний узел: рамка и радиус снаружи,
+// overflow внутри — тогда полосу обрежет обычный overflow: hidden.
+// Прокручиваемой области с tabindex контур фокуса возвращают отрицательным
+// outline-offset.
+.gr-scroll-clip {
+  clip-path: inset(0 round var(--gr-r, 0));
+}
+
+// Только для скринридера. clip: rect() заменён на clip-path: inset(50%) —
+// первое свойство объявлено устаревшим, второе даёт тот же результат.
+// Правила собраны в миксин: focusable-вариант применяет их же, но лишь
+// пока элемент не в фокусе.
+@mixin gr-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.gr-sr-only {
+  @include gr-visually-hidden;
+}
+
+// Скрыт, пока его не выбрали с клавиатуры. Так делается ссылка «к содержимому»
+// в начале страницы: мышью её не видно, по Tab она появляется.
+.gr-sr-only-focusable:not(:focus, :focus-within) {
+  @include gr-visually-hidden;
+}
+
+// Обратная операция: вернуть в поток элемент, скрытый на узких экранах
+.gr-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip-path: none;
+  white-space: normal;
+}
+
+// Адаптивный набор — один на оба вида запроса. Оконный вариант получает
+// суффикс брейкпоинта, контейнерный — тот же суффикс с буквой c; правила
+// описаны один раз, поэтому разойтись не могут.
+@mixin gr-visibility-scale($suffix) {
+  .gr-hidden#{$suffix} {
+    display: none;
+  }
+
+  .gr-block#{$suffix} {
+    display: block;
+  }
+
+  .gr-inline#{$suffix} {
+    display: inline;
+  }
+
+  .gr-inline-block#{$suffix} {
+    display: inline-block;
+  }
+}
+
+// Адаптивное скрытие по ширине окна
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width >= $bp-value) {
+    @include gr-visibility-scale('-#{$bp-name}');
+  }
+}
+
+// Контейнерное скрытие — от ширины ближайшего предка с .gr-cq
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-media($bp-name) {
+    @include gr-visibility-scale('-c#{$bp-name}');
+  }
+}

package/scss/griffincss-utils-scoped.scss

@@ -0,0 +1,38 @@
+// Griffincss Utils — версия, ограниченная областью .griffin
+// Утилитарные классы действуют только внутри элементов с классом .griffin,
+// что позволяет подключать библиотеку в чужую разметку без конфликтов.
+// Токены (из griffincss-core) объявляются вне @scope: :root должен остаться глобальным.
+//
+// Слой тот же, что и у обычной сборки, — griffincss.utils.
+//
+// Требует поддержки CSS @scope (Chrome 118+, Safari 17.4+, Firefox 128+).
+
+@use 'sass:meta';
+@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+
+// Весь вывод пакета — в слое griffincss.utils.
+@layer griffincss.utils {
+  @include meta.load-css('griffincss-core/scss/tokens');
+
+  // Тема — тоже вне @scope: атрибут data-gr-theme стоит на <html>,
+  // то есть заведомо снаружи области .griffin.
+  @include meta.load-css('griffincss-core/scss/theme');
+
+  // @keyframes внутри @scope недействительны — подключаются вне области.
+  @include meta.load-css('keyframes');
+
+  @scope (.griffin) {
+    @include meta.load-css('animations');
+    @include meta.load-css('border-radius');
+    @include meta.load-css('borders');
+    @include meta.load-css('colors');
+    @include meta.load-css('effects');
+    @include meta.load-css('interactivity');
+    @include meta.load-css('position');
+    @include meta.load-css('shadows');
+    @include meta.load-css('sizing');
+    @include meta.load-css('spacing');
+    @include meta.load-css('typography');
+    @include meta.load-css('visibility');
+  }
+}

package/scss/griffincss-utils.scss

@@ -0,0 +1,38 @@
+// Griffincss Utils — утилитарные классы
+// Отступы, типографика, цвета, размеры, границы, позиционирование,
+// тени, эффекты, интерактивность и переходы.
+//
+// Надстройка над griffincss-core: токены и карта брейкпоинтов берутся оттуда
+// (peer-зависимость), поэтому источник у них один на оба пакета. Собранный
+// griffincss-utils.css при этом самодостаточен — :root входит в него целиком,
+// подключать griffincss-core.css не требуется.
+//
+// Верхний слой библиотеки: утилиты выигрывают у ресета и сетки,
+// но проигрывают пользовательскому CSS вне слоёв.
+
+@use 'sass:meta';
+@layer griffincss.reset, griffincss.core, griffincss.ui, griffincss.utils, griffincss.style;
+
+// Весь вывод пакета — в слое griffincss.utils.
+@layer griffincss.utils {
+  @include meta.load-css('griffincss-core/scss/tokens');
+
+  // Тема подключается и здесь, а не только в ядре: слой
+  // griffincss.utils старше griffincss.core, поэтому переопределения темы,
+  // приехавшие только с griffincss-core.css, проиграли бы базовому :root
+  // из этой сборки — независимо от специфичности селектора.
+  @include meta.load-css('griffincss-core/scss/theme');
+  @include meta.load-css('keyframes');
+  @include meta.load-css('animations');
+  @include meta.load-css('border-radius');
+  @include meta.load-css('borders');
+  @include meta.load-css('colors');
+  @include meta.load-css('effects');
+  @include meta.load-css('interactivity');
+  @include meta.load-css('position');
+  @include meta.load-css('shadows');
+  @include meta.load-css('sizing');
+  @include meta.load-css('spacing');
+  @include meta.load-css('typography');
+  @include meta.load-css('visibility');
+}