griffincss-utils 0.16.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "griffincss-utils",
+  "version": "0.16.0",
+  "description": "Griffincss Utils — утилитарные классы: отступы, типографика, цвета, видимость, скругления",
+  "homepage": "https://gitverse.ru/BarneyScott/GriffinCSS",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitverse.ru/BarneyScott/GriffinCSS.git",
+    "directory": "packages/utils"
+  },
+  "bugs": {
+    "url": "https://gitverse.ru/BarneyScott/GriffinCSS/issues"
+  },
+  "author": "Лазарев Михаил Юрьевич <bersi82@gmail.com>",
+  "license": "MIT",
+  "main": "dist/griffincss-utils.css",
+  "style": "dist/griffincss-utils.css",
+  "sass": "scss/griffincss-utils.scss",
+  "exports": {
+    ".": "./dist/griffincss-utils.css",
+    "./js": "./dist/griffincss-utils.js",
+    "./scoped": "./dist/griffincss-utils-scoped.css",
+    "./scss": "./scss/griffincss-utils.scss",
+    "./scss/*": "./scss/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "scss/",
+    "src/"
+  ],
+  "peerDependencies": {
+    "griffincss-core": "^0.16.0"
+  },
+  "keywords": [
+    "css",
+    "scss",
+    "sass",
+    "utilities",
+    "spacing",
+    "typography",
+    "griffincss"
+  ],
+  "scripts": {
+    "build": "npm run build:css && npm run build:scoped && npm run build:js",
+    "build:css": "sass scss/griffincss-utils.scss dist/griffincss-utils.css --load-path=../../node_modules --style=compressed --no-source-map",
+    "build:scoped": "sass scss/griffincss-utils-scoped.scss dist/griffincss-utils-scoped.css --load-path=../../node_modules --style=compressed --no-source-map",
+    "build:js": "terser src/griffincss-utils.js -c passes=3 -m --comments false --format \"preamble='/*! Griffincss Utils | MIT | https://gitverse.ru/BarneyScott/GriffinCSS */'\" --source-map \"url='griffincss-utils.js.map'\" -o dist/griffincss-utils.js"
+  }
+}

package/scss/_animations.scss

@@ -0,0 +1,82 @@
+// Griffincss — Transitions & Animation
+// Плавные переходы, их длительность и один-единственный keyframe.
+//
+// Полноценной библиотеки анимаций здесь нет и не планируется: fade, slide
+// и pulse — задача уровня приложения, а не фреймворка раскладки. Оставлен
+// gr-spin: индикатор загрузки нужен практически в каждом проекте.
+//
+// Всё содержимое модуля выключается при prefers-reduced-motion: reduce —
+// движение не убирается совсем (иначе ломаются состояния, завязанные
+// на конец перехода), а сжимается до неразличимого.
+
+.gr-transition {
+  transition: all var(--gr-transition);
+}
+
+.gr-transition-colors {
+  transition:
+    color var(--gr-transition),
+    background-color var(--gr-transition),
+    border-color var(--gr-transition),
+    fill var(--gr-transition),
+    stroke var(--gr-transition);
+}
+
+.gr-transition-opacity {
+  transition: opacity var(--gr-transition);
+}
+
+.gr-transition-transform {
+  transition: transform var(--gr-transition);
+}
+
+.gr-transition-shadow {
+  transition: box-shadow var(--gr-transition);
+}
+
+.gr-transition-none {
+  transition: none;
+}
+
+// Длительность. Перебивает часть токена --gr-transition, функция сглаживания
+// при этом сохраняется — она приходит из того же сокращённого свойства выше.
+@each $gr-ms in (75, 100, 150, 200, 300, 500, 700, 1000) {
+  .gr-duration-#{$gr-ms} {
+    transition-duration: #{$gr-ms}ms;
+  }
+}
+
+.gr-animate-spin {
+  animation: gr-spin 1s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-transition,
+  .gr-transition-colors,
+  .gr-transition-opacity,
+  .gr-transition-transform,
+  .gr-transition-shadow {
+    transition-duration: 0.01ms;
+  }
+
+  .gr-animate-spin {
+    animation-duration: 3s;
+  }
+}
+
+// Печать. Переход на бумаге не значит ничего, а вращающийся индикатор
+// печатается замершим в случайном положении. Блок стоит последним в модуле:
+// специфичность у него та же, что у правил выше, и решает порядок.
+@media print {
+  .gr-transition,
+  .gr-transition-colors,
+  .gr-transition-opacity,
+  .gr-transition-transform,
+  .gr-transition-shadow {
+    transition: none;
+  }
+
+  .gr-animate-spin {
+    animation: none;
+  }
+}

package/scss/_border-radius.scss

@@ -0,0 +1,65 @@
+// Griffincss — Border Radius Cascade
+// Дочерние блоки автоматически получают меньший радиус,
+// пропорционально зазору от края родителя.
+// child_radius = max(0, --gr-r - --gr-p)
+//
+// --gr-r: border-radius контейнера (по умолчанию 0)
+// --gr-p: зазор между краем контейнера и ребёнком; из него выводится padding,
+//         поэтому JS для первого уровня не нужен вовсе
+//
+// Зазор один на все стороны: асимметричный padding (.gr-px-*, .gr-py-*
+// и односторонние) каскадом не поддержан — у него нет одного значения,
+// от которого считать радиус ребёнка.
+//
+// Обе переменные зарегистрированы через @property как ненаследуемые
+// (packages/core/scss/_tokens.scss): значение уровня объявляется на нём
+// самом, а вниз уходит публикация --gr-r-down и --gr-r-gap.
+//
+// <div class="gr-radius gr-radius-8" style="--gr-p: 16px">…</div>
+//
+// Вложенный .gr-radius без своего --gr-r даёт квадрат: радиус предка он
+// не копирует. Многоуровневый каскад без ручных значений достраивает
+// рантайм griffincss-utils.js.
+
+// Каскадный контейнер: зазор — источник, padding — следствие
+.gr-radius {
+  padding: var(--gr-p);
+  border-radius: var(--gr-r);
+
+  // Публикация вниз. Дети читают эти две, а не --gr-r/--gr-p: те
+  // намеренно не наследуются, иначе вложенный контейнер копировал бы
+  // радиус предка. Цикла тут нет — читаем одно имя, пишем другое.
+  --gr-r-down: var(--gr-r);
+  --gr-r-gap: var(--gr-p);
+}
+
+.gr-radius > :not(.gr-radius) {
+  border-radius: max(0px, calc(var(--gr-r-down, 0px) - var(--gr-r-gap, 0px)));
+}
+
+// Предопределённые радиусы (шаг 0.25rem, от 0 до 16 = 4rem)
+$gr-radius-base: 0.25rem;
+$gr-radius-max: 16;
+
+@for $i from 0 through $gr-radius-max {
+  $val: $i * $gr-radius-base;
+
+  .gr-radius-#{$i} {
+    --gr-r: #{$val};
+
+    border-radius: #{$val};
+  }
+}
+
+// Pill / полностью скруглённый
+.gr-radius-full {
+  --gr-r: 9999px;
+
+  border-radius: 9999px;
+}
+
+// Адаптивных вариантов у радиусов нет: скругление, меняющееся по ширине окна, —
+// редкий сценарий, а полная сетка -sm/-md/-lg/-xl стоила бы 68 лишних классов.
+// Когда он всё же нужен, --gr-r переопределяется своим медиа-запросом:
+//
+//   @media (width >= 768px) { .card { --gr-r: 1rem; } }

package/scss/_borders.scss

@@ -0,0 +1,93 @@
+// Griffincss — Borders
+// Ширина, стиль и стороны границы.
+//
+// Разделение обязанностей внутри пакета:
+//   _borders.scss       — сама граница (width / style / side);
+//   _colors.scss        — цвет (.gr-border-primary и прочие);
+//   _border-radius.scss — скругления с каскадом по вложенности.
+//
+// Ширина по умолчанию — токен --gr-border-width: режим для слабовидящих
+// поднимает её до 2px, не переписывая ни одного правила. Явные .gr-border-2
+// и старше остаются литеральными: их ширину выбрал автор разметки.
+//
+// Каждый класс ширины самодостаточен — задаёт и стиль, и цвет по умолчанию,
+// поэтому .gr-border-2 виден сам по себе. Классы цвета подключаются в точке
+// входа после этого модуля, так что .gr-border-2.gr-border-danger даёт
+// красную границу в 2px: побеждает более поздний border-color.
+
+// Ширина. Ноль вынесен отдельно: там сбрасывается вся граница целиком.
+.gr-border-0 {
+  border: 0;
+}
+
+.gr-border {
+  border: var(--gr-border-width, 1px) solid var(--gr-color-border);
+}
+
+@each $gr-width in (2, 4, 8) {
+  .gr-border-#{$gr-width} {
+    border: #{$gr-width}px solid var(--gr-color-border);
+  }
+}
+
+// Стороны. Физические t/r/b/l остаются буквальными, логические s/e идут
+// рядом: в LTR они совпадают с l/r, в RTL меняются местами сами.
+$gr-border-sides: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+  s: inline-start,
+  e: inline-end
+);
+
+// Ширина у стороны задаётся своим классом, а не парой .gr-border-l + .gr-border-4:
+// класс ширины пишет сокращённое свойство border и сбрасывает вместе с ним все
+// четыре стороны, так что «толстая граница слева» такой парой не получается.
+@each $gr-key, $gr-side in $gr-border-sides {
+  .gr-border-#{$gr-key} {
+    border-#{$gr-side}: var(--gr-border-width, 1px) solid var(--gr-color-border);
+  }
+
+  .gr-border-#{$gr-key}-0 {
+    border-#{$gr-side}: 0;
+  }
+
+  @each $gr-width in (2, 4, 8) {
+    .gr-border-#{$gr-key}-#{$gr-width} {
+      border-#{$gr-side}: #{$gr-width}px solid var(--gr-color-border);
+    }
+  }
+}
+
+// Оси — граница только по бокам либо только сверху и снизу.
+// Записаны логическими сокращениями: у оси обе стороны получают одно
+// и то же значение, поэтому направление письма результата не меняет,
+// а вместо двух объявлений выводится одно.
+$gr-border-axes: (
+  x: inline,
+  y: block
+);
+
+@each $gr-key, $gr-axis in $gr-border-axes {
+  .gr-border-#{$gr-key} {
+    border-#{$gr-axis}: var(--gr-border-width, 1px) solid var(--gr-color-border);
+  }
+
+  .gr-border-#{$gr-key}-0 {
+    border-#{$gr-axis}: 0;
+  }
+
+  @each $gr-width in (2, 4, 8) {
+    .gr-border-#{$gr-key}-#{$gr-width} {
+      border-#{$gr-axis}: #{$gr-width}px solid var(--gr-color-border);
+    }
+  }
+}
+
+// Стиль. Применяется поверх класса ширины: .gr-border .gr-border-dashed.
+@each $gr-style in (solid, dashed, dotted, double, none) {
+  .gr-border-#{$gr-style} {
+    border-style: $gr-style;
+  }
+}

package/scss/_colors.scss

@@ -0,0 +1,88 @@
+// Griffincss — Color Utilities
+// HSL-based palette with background, text, and border utilities
+
+// Neutral gray scale
+$gr-grays: (
+  "white":   var(--gr-hsl-white),
+  gray-50:  var(--gr-hsl-gray-50),
+  gray-100: var(--gr-hsl-gray-100),
+  gray-200: var(--gr-hsl-gray-200),
+  gray-300: var(--gr-hsl-gray-300),
+  gray-400: var(--gr-hsl-gray-400),
+  gray-500: var(--gr-hsl-gray-500),
+  gray-600: var(--gr-hsl-gray-600),
+  gray-700: var(--gr-hsl-gray-700),
+  gray-800: var(--gr-hsl-gray-800),
+  gray-900: var(--gr-hsl-gray-900),
+  "black":   var(--gr-hsl-black)
+);
+
+// Accent colors
+$gr-accents: (
+  primary:          var(--gr-hsl-primary),
+  primary-light:    var(--gr-hsl-primary-light),
+  primary-dark:     var(--gr-hsl-primary-dark),
+  secondary:        var(--gr-hsl-secondary),
+  secondary-light:  var(--gr-hsl-secondary-light),
+  secondary-dark:   var(--gr-hsl-secondary-dark),
+  success:          var(--gr-hsl-success),
+  success-light:    var(--gr-hsl-success-light),
+  success-dark:     var(--gr-hsl-success-dark),
+  warning:          var(--gr-hsl-warning),
+  warning-light:    var(--gr-hsl-warning-light),
+  warning-dark:     var(--gr-hsl-warning-dark),
+  danger:           var(--gr-hsl-danger),
+  danger-light:     var(--gr-hsl-danger-light),
+  danger-dark:      var(--gr-hsl-danger-dark),
+  info:             var(--gr-hsl-info),
+  info-light:       var(--gr-hsl-info-light),
+  info-dark:        var(--gr-hsl-info-dark)
+);
+
+// Background utilities
+@each $name, $hsl in $gr-grays {
+  .gr-bg-#{$name} { background-color: hsl(#{$hsl}); }
+}
+
+@each $name, $hsl in $gr-accents {
+  .gr-bg-#{$name} { background-color: hsl(#{$hsl}); }
+}
+
+// Text color utilities
+@each $name, $hsl in $gr-grays {
+  .gr-text-#{$name} { color: hsl(#{$hsl}); }
+}
+
+@each $name, $hsl in $gr-accents {
+  .gr-text-#{$name} { color: hsl(#{$hsl}); }
+}
+
+// Border color utilities
+@each $name, $hsl in $gr-grays {
+  .gr-border-#{$name} { border-color: hsl(#{$hsl}); }
+}
+
+@each $name, $hsl in $gr-accents {
+  .gr-border-#{$name} { border-color: hsl(#{$hsl}); }
+}
+
+// Семантические цвета — единственные, которые переключаются темой.
+// Литеральные классы выше (.gr-bg-white, .gr-text-gray-900) остаются
+// буквальными по контракту: белое обязано быть белым в любой теме.
+// Разметку, которая должна жить по теме, пишут на этих классах.
+.gr-bg-page    { background-color: var(--gr-color-bg); }
+.gr-bg-surface { background-color: var(--gr-color-surface); }
+.gr-bg-raised  { background-color: var(--gr-color-surface-raised); }
+.gr-bg-sunken  { background-color: var(--gr-color-surface-sunken); }
+.gr-bg-accent  { background-color: var(--gr-color-accent); }
+
+.gr-text-ink           { color: var(--gr-color-text); }
+.gr-text-ink-secondary { color: var(--gr-color-text-secondary); }
+.gr-text-ink-muted     { color: var(--gr-color-text-muted); }
+.gr-text-ink-disabled  { color: var(--gr-color-text-disabled); }
+.gr-text-accent        { color: var(--gr-color-accent); }
+.gr-text-on-accent     { color: var(--gr-color-on-accent); }
+.gr-text-link          { color: var(--gr-color-link); }
+
+.gr-border-subtle { border-color: var(--gr-color-border); }
+.gr-border-strong { border-color: var(--gr-color-border-strong); }

package/scss/_effects.scss

@@ -0,0 +1,28 @@
+// Griffincss — Effects
+// Прозрачность, вписывание медиа и пропорции блока.
+
+// Прозрачность
+$gr-opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
+
+@each $gr-step, $gr-value in $gr-opacities {
+  .gr-opacity-#{$gr-step} { opacity: $gr-value; }
+}
+
+// Вписывание картинки или видео в отведённую рамку.
+// Ресет уже задаёт медиа display: block и max-width: 100%, поэтому здесь
+// остаётся только кадрирование.
+@each $gr-fit in (cover, contain, fill, none, scale-down) {
+  .gr-object-#{$gr-fit} { object-fit: $gr-fit; }
+}
+
+// Точка привязки кадра: у портретов обрезать снизу, а не по центру.
+@each $gr-pos in (center, top, right, bottom, left) {
+  .gr-object-pos-#{$gr-pos} { object-position: $gr-pos; }
+}
+
+// Пропорции блока
+.gr-aspect-square   { aspect-ratio: 1 / 1; }
+.gr-aspect-video    { aspect-ratio: 16 / 9; }
+.gr-aspect-wide     { aspect-ratio: 21 / 9; }
+.gr-aspect-portrait { aspect-ratio: 3 / 4; }
+.gr-aspect-auto     { aspect-ratio: auto; }

package/scss/_interactivity.scss

@@ -0,0 +1,26 @@
+// Griffincss — Interactivity
+// Курсор, приём событий указателя, выделение текста, прокрутка.
+
+$gr-cursors: (pointer, default, text, move, grab, grabbing, wait, progress, help, not-allowed);
+
+@each $gr-value in $gr-cursors {
+  .gr-cursor-#{$gr-value} { cursor: $gr-value; }
+}
+
+.gr-pointer-events-none { pointer-events: none; }
+.gr-pointer-events-auto { pointer-events: auto; }
+
+// Имя утилиты повторяет имя свойства — user-select, а не select: короткое
+// .gr-select занято элементом формы в griffincss-ui, и один корень на два
+// разных смысла вёрстальщику не помогает.
+@each $gr-value in (none, all, text, auto) {
+  .gr-user-select-#{$gr-value} { user-select: $gr-value; }
+}
+
+// Плавная прокрутка — только для тех, кто не просил уменьшить анимацию.
+// Класс объявлен всегда, иначе .gr-scroll-auto не смог бы его перебить.
+.gr-scroll-auto { scroll-behavior: auto; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .gr-scroll-smooth { scroll-behavior: smooth; }
+}

package/scss/_keyframes.scss

@@ -0,0 +1,11 @@
+// Griffincss — Keyframes
+// Отдельный файл, а не часть _animations.scss: внутри @scope правила
+// @keyframes недействительны, поэтому в scoped-сборке они подключаются
+// вне области видимости. Имена префиксованы gr-, чтобы не столкнуться
+// с анимациями проекта.
+
+@keyframes gr-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/_position.scss

@@ -0,0 +1,60 @@
+// Griffincss — Position
+// Схема позиционирования, привязка к краям и порядок наложения.
+//
+// Адаптивные варианты есть только у самой схемы: «липнет на десктопе,
+// обычный блок на мобильном» — рабочий сценарий, а вот z-index, меняющийся
+// по ширине окна, за всё время не понадобился ни разу.
+
+@use 'griffincss-core/scss/breakpoints' as bp;
+
+$gr-positions: (static, relative, absolute, fixed, sticky);
+
+@mixin gr-position-scale($suffix: '') {
+  @each $gr-value in $gr-positions {
+    .gr-#{$gr-value}#{$suffix} { position: $gr-value; }
+  }
+}
+
+@include gr-position-scale;
+
+// Привязка к краям
+.gr-inset-0    { inset: 0; }
+.gr-inset-auto { inset: auto; }
+
+// Оси записаны логическими свойствами: обе стороны у них равны, поэтому
+// направление письма результата не меняет, а объявлений вдвое меньше.
+.gr-inset-x-0 {
+  inset-inline: 0;
+}
+
+.gr-inset-y-0 {
+  inset-block: 0;
+}
+
+@each $gr-side in (top, right, bottom, left) {
+  .gr-#{$gr-side}-0    { #{$gr-side}: 0; }
+  .gr-#{$gr-side}-auto { #{$gr-side}: auto; }
+}
+
+// Односторонние left/right остаются физическими намеренно: кнопка «закрыть»
+// в углу окна обязана держаться угла, а не начала строки. Привязку к строке
+// даёт логическая пара start/end — в LTR она совпадает с left/right.
+@each $gr-key, $gr-side in (start: inset-inline-start, end: inset-inline-end) {
+  .gr-#{$gr-key}-0    { #{$gr-side}: 0; }
+  .gr-#{$gr-key}-auto { #{$gr-side}: auto; }
+}
+
+// Порядок наложения. Шаг 10 оставляет место для своих значений между
+// ступенями — их можно вписать, не трогая библиотеку.
+@each $gr-z in (0, 10, 20, 30, 40, 50) {
+  .gr-z-#{$gr-z} { z-index: $gr-z; }
+}
+
+.gr-z-auto { z-index: auto; }
+
+// Адаптивные варианты
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width >= $bp-value) {
+    @include gr-position-scale('-#{$bp-name}');
+  }
+}

package/scss/_shadows.scss

@@ -0,0 +1,19 @@
+// Griffincss — Shadows
+// Тени для передачи глубины интерфейса.
+//
+// Значения живут в токенах --gr-shadow-* (_tokens.scss ядра), поэтому
+// переопределяются пользователем без пересборки SCSS. Цвет вынесен
+// в отдельный --gr-shadow-color в формате HSL-компонент: в тёмной теме
+// (Этап 5) меняется одна переменная, а не шесть готовых теней.
+
+$gr-shadows: (xs, sm, md, lg, xl, 2xl, inner);
+
+@each $gr-name in $gr-shadows {
+  .gr-shadow-#{$gr-name} {
+    box-shadow: var(--gr-shadow-#{$gr-name});
+  }
+}
+
+.gr-shadow-none {
+  box-shadow: none;
+}

package/scss/_sizing.scss

@@ -0,0 +1,75 @@
+// Griffincss — Sizing
+// Ширина, высота и ограничители min/max.
+//
+// Дробные ширины записываются в разметке как есть: class="gr-w-1/2".
+// Слэш экранируется только в CSS-селекторе — писать его в HTML не нужно.
+//
+// Единицы вьюпорта — малые (svw/svh): они не учитывают исчезающие панели
+// мобильных браузеров, поэтому блок не «прыгает» при прокрутке, а .gr-w-screen
+// не вызывает горизонтальную прокрутку из-за ширины полосы прокрутки.
+
+@use 'griffincss-core/scss/breakpoints' as bp;
+@use 'griffincss-core/scss/container-mixins' as cq;
+
+$gr-widths: (
+  full:   100%,
+  screen: 100svw,
+  auto:   auto,
+  fit:    fit-content,
+  min:    min-content,
+  max:    max-content,
+  "1\\/2": 50%,
+  "1\\/3": 33.3333%,
+  "2\\/3": 66.6667%,
+  "1\\/4": 25%,
+  "3\\/4": 75%
+) !default;
+
+// Высот меньше: 100% у блока без заданной высоты родителя не значит ничего,
+// поэтому дробных вариантов здесь нет — их роль играет grid.
+$gr-heights: (
+  full:   100%,
+  screen: 100svh,
+  auto:   auto,
+  fit:    fit-content
+) !default;
+
+@mixin gr-sizing-scale($suffix: '') {
+  @each $gr-name, $gr-value in $gr-widths {
+    .gr-w-#{$gr-name}#{$suffix} { width: $gr-value; }
+  }
+
+  @each $gr-name, $gr-value in $gr-heights {
+    .gr-h-#{$gr-name}#{$suffix} { height: $gr-value; }
+  }
+}
+
+@include gr-sizing-scale;
+
+// Ограничители. Адаптивных вариантов не имеют: min/max по смыслу задают
+// рамку, одинаковую на всех ширинах, — меняют её обычно сами width/height.
+.gr-min-w-0    { min-width: 0; }
+.gr-min-w-full { min-width: 100%; }
+.gr-min-h-0    { min-height: 0; }
+.gr-min-h-full { min-height: 100%; }
+.gr-min-h-screen { min-height: 100svh; }
+
+.gr-max-w-none   { max-width: none; }
+.gr-max-w-full   { max-width: 100%; }
+.gr-max-w-page   { max-width: var(--gr-max-width); }
+.gr-max-h-full   { max-height: 100%; }
+.gr-max-h-screen { max-height: 100svh; }
+
+// Адаптивные варианты — только у width и height
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @media (width >= $bp-value) {
+    @include gr-sizing-scale('-#{$bp-name}');
+  }
+}
+
+// Контейнерные варианты — от ширины ближайшего предка с .gr-cq
+@each $bp-name, $bp-value in bp.$gr-breakpoints {
+  @include cq.gr-container-media($bp-name) {
+    @include gr-sizing-scale('-c#{$bp-name}');
+  }
+}