griffincss-utils 0.21.4 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "griffincss-utils",
-  "version": "0.21.4",
+  "version": "0.22.0",
   "description": "Griffincss Utils — утилитарные классы: отступы, типографика, цвета, видимость, скругления",
   "homepage": "https://gitverse.ru/BarneyScott/GriffinCSS",
   "repository": {
@@ -31,7 +31,7 @@
     "src/"
   ],
   "peerDependencies": {
-    "griffincss-core": "^0.21.4"
+    "griffincss-core": "^0.22.0"
   },
   "keywords": [
     "css",

package/scss/_border-radius.scss

@@ -38,8 +38,8 @@
 }
 
 // Предопределённые радиусы (шаг 0.25rem, от 0 до 16 = 4rem)
-$gr-radius-base: 0.25rem;
-$gr-radius-max: 16;
+$gr-radius-base: 0.25rem !default;
+$gr-radius-max: 16 !default;
 
 @for $i from 0 through $gr-radius-max {
   $val: $i * $gr-radius-base;

package/scss/_borders.scss

@@ -30,18 +30,18 @@
   }
 }
 
-// Стороны. Физические t/r/b/l остаются буквальными, логические s/e идут
-// рядом: в LTR они совпадают с l/r, в RTL меняются местами сами.
+// Стороны. Верх и низ (t/b) — физические: блочная ось в RTL
+// не разворачивается. Боковые — только логические s/e: в LTR они
+// совпадают с l/r, в RTL меняются местами сами. Физические l/r
+// удалены Этапом 36.
 $gr-border-sides: (
   t: top,
-  r: right,
   b: bottom,
-  l: left,
   s: inline-start,
   e: inline-end
-);
+) !default;
 
-// Ширина у стороны задаётся своим классом, а не парой .gr-border-l + .gr-border-4:
+// Ширина у стороны задаётся своим классом, а не парой .gr-border-s + .gr-border-4:
 // класс ширины пишет сокращённое свойство border и сбрасывает вместе с ним все
 // четыре стороны, так что «толстая граница слева» такой парой не получается.
 @each $gr-key, $gr-side in $gr-border-sides {
@@ -67,7 +67,7 @@ $gr-border-sides: (
 $gr-border-axes: (
   x: inline,
   y: block
-);
+) !default;
 
 @each $gr-key, $gr-axis in $gr-border-axes {
   .gr-border-#{$gr-key} {

package/scss/_colors.scss

@@ -1,68 +1,41 @@
 // 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)
-);
+//
+// Карты палитры вынесены в _palette.scss: те же имена нужны градиентам.
+// Форвард сохраняет публичную настройку — @use 'griffincss-utils/scss/colors'
+// with ($gr-accents: …) настраивает именно их.
+
+// Форвард стоит ПЕРЕД use: настройка снаружи (@use 'colors' with (…))
+// проходит через него, а @use подхватывает уже настроенный модуль.
+// В обратном порядке palette грузится ненастроенным, и настройка падает
+// сообщением «This module was already loaded».
+@forward 'palette';
+@use 'palette';
 
 // Background utilities
-@each $name, $hsl in $gr-grays {
+@each $name, $hsl in palette.$gr-grays {
   .gr-bg-#{$name} { background-color: hsl(#{$hsl}); }
 }
 
-@each $name, $hsl in $gr-accents {
+@each $name, $hsl in palette.$gr-accents {
   .gr-bg-#{$name} { background-color: hsl(#{$hsl}); }
 }
 
 // Text color utilities
-@each $name, $hsl in $gr-grays {
+@each $name, $hsl in palette.$gr-grays {
   .gr-text-#{$name} { color: hsl(#{$hsl}); }
 }
 
-@each $name, $hsl in $gr-accents {
+@each $name, $hsl in palette.$gr-accents {
   .gr-text-#{$name} { color: hsl(#{$hsl}); }
 }
 
 // Border color utilities
-@each $name, $hsl in $gr-grays {
+@each $name, $hsl in palette.$gr-grays {
   .gr-border-#{$name} { border-color: hsl(#{$hsl}); }
 }
 
-@each $name, $hsl in $gr-accents {
+@each $name, $hsl in palette.$gr-accents {
   .gr-border-#{$name} { border-color: hsl(#{$hsl}); }
 }
 

package/scss/_effects.scss

@@ -2,7 +2,7 @@
 // Прозрачность, вписывание медиа и пропорции блока.
 
 // Прозрачность
-$gr-opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
+$gr-opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1) !default;
 
 @each $gr-step, $gr-value in $gr-opacities {
   .gr-opacity-#{$gr-step} { opacity: $gr-value; }

package/scss/_filters.scss

@@ -0,0 +1,86 @@
+// Griffincss — Filters
+// Размытие, обесцвечивание и яркость; контраст с насыщенностью — по заказу.
+//
+// Суффиксов брейкпоинта и контейнера у модуля НЕТ и не будет — по той же
+// причине, что у трансформаций: приглушённый логотип выглядит одинаково
+// на любой ширине окна.
+//
+// Все функции живут в одном свойстве filter, поэтому класс задаёт
+// настраиваемое свойство, а собирающее правило склеивает их в значение:
+// иначе .gr-blur-2 и .gr-grayscale-100 затёрли бы друг друга.
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+
+$gr-blurs: (1: 2px, 2: 4px, 3: 8px, 4: 16px) !default;
+$gr-grayscales: (50: 0.5, 100: 1) !default;
+$gr-brightnesses: (75: 0.75, 90: 0.9, 110: 1.1, 125: 1.25) !default;
+
+// Контраст и насыщенность машинерия поддерживает полностью, но по умолчанию
+// не выводит: три группы Этапа 32 и без них выбирают бюджет утилит целиком,
+// а спрос на них ниже, чем на размытие и обесцвечивание. Пустая карта стоит
+// ноль байт; непустая включает и классы, и функцию в собирающем правиле:
+//
+//   @include meta.load-css('griffincss-utils/scss/filters', $with: (
+//     'gr-saturations': (0: 0, 150: 1.5)
+//   ));
+$gr-contrasts: () !default;
+$gr-saturations: () !default;
+
+// Имя функции CSS — оно же имя настраиваемого свойства: blur → --gr-blur.
+// Второго словаря для этого не нужно.
+$_gr-filters: (
+  blur: $gr-blurs,
+  grayscale: $gr-grayscales,
+  brightness: $gr-brightnesses,
+  contrast: $gr-contrasts,
+  saturate: $gr-saturations
+);
+
+// Нейтральное значение функции — то, при котором она ничего не делает.
+$_gr-neutral: (blur: 0, grayscale: 0, brightness: 1, contrast: 1, saturate: 1);
+
+// Перечень селекторов и значение filter собираются вместе: пустая карта
+// не даёт ни классов, ни своей функции.
+$_gr-filtered: ();
+$_gr-value: ();
+
+@each $gr-fn, $gr-steps in $_gr-filters {
+  @if list.length($gr-steps) > 0 {
+    $_gr-value: list.append($_gr-value, string.unquote('#{$gr-fn}(var(--gr-#{$gr-fn}))'), space);
+
+    @each $gr-step, $gr-item in $gr-steps {
+      $_gr-filtered: list.append($_gr-filtered, string.unquote('.gr-#{$gr-fn}-#{$gr-step}'), comma);
+    }
+  }
+}
+
+// Нейтральные значения в собирающем правиле — сброс наследования:
+// настраиваемые свойства наследуются, и вложенный .gr-grayscale-100
+// без сброса получил бы ещё и размытие предка. Правило стоит ДО
+// классов-значений: специфичность у них одна, решает порядок.
+//
+// Общий список селекторов, а не повтор объявления в каждом классе, —
+// по замеру: на девятнадцати правилах список стоит 287 Б gzip против
+// 311 Б у повтора. Значение из пяти функций длиннее, чем перечисление
+// селекторов, и выгоднее написать его один раз (у трансформаций
+// тот же замер дал обратный ответ — там значение короткое).
+#{$_gr-filtered} {
+  @each $gr-fn, $gr-steps in $_gr-filters {
+    @if list.length($gr-steps) > 0 {
+      --gr-#{$gr-fn}: #{map.get($_gr-neutral, $gr-fn)};
+    }
+  }
+
+  filter: $_gr-value;
+}
+
+@each $gr-fn, $gr-steps in $_gr-filters {
+  @each $gr-step, $gr-value in $gr-steps {
+    .gr-#{$gr-fn}-#{$gr-step} { --gr-#{$gr-fn}: #{$gr-value}; }
+  }
+}
+
+// Снять фильтр целиком — например, у потомка размытой подложки.
+.gr-filter-none { filter: none; }

package/scss/_gradients.scss

@@ -0,0 +1,80 @@
+// Griffincss — Gradients
+// Направление линейного градиента и три точки: from / via / to.
+//
+// Суффиксов брейкпоинта и контейнера у модуля НЕТ и не будет — довод тот же,
+// что у трансформаций и фильтров.
+//
+// Своей палитры у группы нет: цвет берётся из тех же карт, что и .gr-bg-*,
+// то есть из переменных --gr-hsl-*. Перенастроенная палитра меняет градиенты
+// вместе со всем остальным, а не отдельно от него.
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use 'palette';
+
+// Направление. Ключевые слова физические: градиент — геометрия фона,
+// а не строка текста, и от направления письма не разворачивается.
+$gr-gradient-directions: (
+  r: to right,
+  l: to left,
+  t: to top,
+  b: to bottom,
+  br: to bottom right,
+  tr: to top right
+) !default;
+
+// Цвета точек. Отдельная карта, а не вся палитра целиком: восемь цветов
+// на три точки — это 24 класса, а вся палитра акцентов дала бы 54 и вывела
+// utils за бюджет. Своей палитры у группы при этом нет: значения берутся
+// из тех же карт, что и .gr-bg-*, по именам.
+//
+// Имя, которого в палитре не оказалось, молча пропускается: перенастроивший
+// $gr-accents под свой бренд не получит .gr-from-primary, ссылающийся
+// в пустоту. Нужны свои имена — переопределяется $gr-gradient-colors,
+// механизм от этого не меняется.
+$_gr-picked: ("white", "black", primary, secondary, success, warning, danger, info);
+$_gr-colors: ();
+
+@each $gr-name in $_gr-picked {
+  $_gr-hsl: map.get(palette.$gr-grays, $gr-name);
+
+  @if not $_gr-hsl {
+    $_gr-hsl: map.get(palette.$gr-accents, $gr-name);
+  }
+
+  @if $_gr-hsl {
+    $_gr-colors: map.set($_gr-colors, $gr-name, $_gr-hsl);
+  }
+}
+
+$gr-gradient-colors: $_gr-colors !default;
+
+// Перечень направлений — он же перечень селекторов собирающего правила.
+$_gr-gradients: ();
+
+@each $gr-key, $gr-value in $gr-gradient-directions {
+  $_gr-gradients: list.append($_gr-gradients, string.unquote('.gr-gradient-to-#{$gr-key}'), comma);
+}
+
+// Собирающее правило. Прозрачные концы — не украшение, а сброс
+// наследования: настраиваемые свойства наследуются, и вложенный градиент
+// без своих точек перекрасился бы цветами предка. Правило стоит ДО
+// классов-значений: специфичность у них одна, решает порядок.
+#{$_gr-gradients} {
+  --gr-from: transparent;
+  --gr-via: initial;
+  --gr-to: transparent;
+
+  background-image: linear-gradient(var(--gr-gradient-dir), var(--gr-from), var(--gr-via, ) var(--gr-to));
+}
+
+@each $gr-key, $gr-value in $gr-gradient-directions {
+  .gr-gradient-to-#{$gr-key} { --gr-gradient-dir: #{$gr-value}; }
+}
+
+@each $gr-name, $gr-hsl in $gr-gradient-colors {
+  .gr-from-#{$gr-name} { --gr-from: hsl(#{$gr-hsl}); }
+  .gr-via-#{$gr-name} { --gr-via: hsl(#{$gr-hsl}),; }
+  .gr-to-#{$gr-name} { --gr-to: hsl(#{$gr-hsl}); }
+}

package/scss/_interactivity.scss

@@ -1,7 +1,7 @@
 // Griffincss — Interactivity
 // Курсор, приём событий указателя, выделение текста, прокрутка.
 
-$gr-cursors: (pointer, default, text, move, grab, grabbing, wait, progress, help, not-allowed);
+$gr-cursors: (pointer, default, text, move, grab, grabbing, wait, progress, help, not-allowed) !default;
 
 @each $gr-value in $gr-cursors {
   .gr-cursor-#{$gr-value} { cursor: $gr-value; }

package/scss/_palette.scss

@@ -0,0 +1,50 @@
+// Griffincss — Palette
+// Карты палитры: имена цветов и переменные-источники. Вывода у модуля нет —
+// только значения.
+//
+// Отдельным файлом, потому что карты нужны двум модулям: _colors.scss красит
+// фон, текст и границы, _gradients.scss берёт те же имена для точек градиента.
+// Пока карты лежали в _colors.scss, второй модуль мог достать их только
+// через @use — а тот повторял и весь вывод цветов, удваивая полтора килобайта.
+//
+// Публичный путь к настройке не менялся: _colors.scss форвардит этот модуль,
+// поэтому @use 'griffincss-utils/scss/colors' with ($gr-accents: …) работает
+// как прежде.
+
+// Нейтральная шкала (светлота по Фибоначчи)
+$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)
+) !default;
+
+// Акценты (шаг 72° по цветовому кругу)
+$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)
+) !default;

package/scss/_position.scss

@@ -7,7 +7,7 @@
 
 @use 'griffincss-core/scss/breakpoints' as bp;
 
-$gr-positions: (static, relative, absolute, fixed, sticky);
+$gr-positions: (static, relative, absolute, fixed, sticky) !default;
 
 @mixin gr-position-scale($suffix: '') {
   @each $gr-value in $gr-positions {
@@ -31,14 +31,16 @@ $gr-positions: (static, relative, absolute, fixed, sticky);
   inset-block: 0;
 }
 
-@each $gr-side in (top, right, bottom, left) {
+// Верх и низ — физические: блочная ось в RTL не разворачивается.
+@each $gr-side in (top, bottom) {
   .gr-#{$gr-side}-0    { #{$gr-side}: 0; }
   .gr-#{$gr-side}-auto { #{$gr-side}: auto; }
 }
 
-// Односторонние left/right остаются физическими намеренно: кнопка «закрыть»
-// в углу окна обязана держаться угла, а не начала строки. Привязку к строке
-// даёт логическая пара start/end — в LTR она совпадает с left/right.
+// Привязка к строке — логическая пара start/end: в LTR она совпадает
+// с left/right, в RTL меняется местами сама. Физические left/right
+// удалены Этапом 36; стороне, которая обязана быть физической
+// (угол окна при любом направлении письма), нужен свой CSS.
 @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; }

package/scss/_shadows.scss

@@ -6,7 +6,7 @@
 // в отдельный --gr-shadow-color в формате HSL-компонент: в тёмной теме
 // (Этап 5) меняется одна переменная, а не шесть готовых теней.
 
-$gr-shadows: (xs, sm, md, lg, xl, 2xl, inner);
+$gr-shadows: (xs, sm, md, lg, xl, 2xl, inner) !default;
 
 @each $gr-name in $gr-shadows {
   .gr-shadow-#{$gr-name} {

package/scss/_spacing.scss

@@ -34,33 +34,31 @@ $gr-spacing-steps: (0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16) !default;
     }
 
 
+    // Верх и низ — физические и остаются: блочная ось в RTL
+    // не разворачивается. Односторонние left/right удалены Этапом 36:
+    // начало и конец строки задают логические ms/me/ps/pe ниже.
     .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; }
-    }
+    // Адаптивные и контейнерные варианты добавлены Этапом 36: без них
+    // снятие физических классов забрало бы у потребителя односторонний
+    // отступ от брейкпоинта, а не перевело его на логический. Прирост
+    // замерен честной сборкой — +1 527 Б gzip при расчёте +1 645 правкой
+    // собранного файла: селекторы те же 400, но вперемешку со шкалой
+    // обратные ссылки gzip короче. Вместе с удалением физических
+    // классов размен уходит в минус.
+    .gr-ms-#{$i}#{$suffix} { margin-inline-start: $val; }
+    .gr-me-#{$i}#{$suffix} { margin-inline-end: $val; }
+
+    .gr-ps-#{$i}#{$suffix} { padding-inline-start: $val; }
+    .gr-pe-#{$i}#{$suffix} { padding-inline-end: $val; }
 
     // Осевые — одно логическое свойство вместо пары физических: в LTR
     // результат тот же, в RTL корректный, а объявлений вдвое меньше.
@@ -84,25 +82,15 @@ $gr-spacing-steps: (0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16) !default;
     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 — влево. Суффикс брейкпоинта —
+  // как у всей шкалы, с Этапа 36.
+  .gr-ms-auto#{$suffix} {
+    margin-inline-start: auto;
+  }
 
-    .gr-me-auto {
-      margin-inline-end: auto;
-    }
+  .gr-me-auto#{$suffix} {
+    margin-inline-end: auto;
   }
 }
 

package/scss/_transforms.scss

@@ -0,0 +1,78 @@
+// Griffincss — Transforms
+// Масштаб, поворот, сдвиг по осям и наведение с подъёмом.
+//
+// Суффиксов брейкпоинта и контейнера у модуля НЕТ и не будет. Довод и
+// прецедент те же, что у логических отступов в _spacing.scss: карточка
+// подскакивает под курсором одинаково на любой ширине окна, а девять
+// вариантов на класс съели бы бюджет утилит целиком.
+//
+// Свойства раздельные — scale, rotate, translate, а не общий transform:
+// три класса на одном элементе складываются, не затирая друг друга.
+
+// Масштаб: ключ — проценты в имени класса, значение — множитель.
+// Ступень 100 нужна, чтобы снять масштаб, доставшийся от другого класса.
+$gr-scales: (95: 0.95, 100: 1, 105: 1.05, 110: 1.1) !default;
+
+// Поворот в градусах. Каждая ступень даёт пару классов: .gr-rotate-6
+// и .gr-rotate--6 — знак пишется в имени так же, как в значении.
+$gr-rotations: (3, 6, 12, 45, 90) !default;
+
+// Сдвиг: ключ — ступень шкалы отступов, значение — длина. Тоже парами,
+// со знаком: подъём карточки — это .gr-translate-y--1.
+$gr-translates: (1: 0.25rem, 2: 0.5rem) !default;
+
+@each $gr-step, $gr-value in $gr-scales {
+  .gr-scale-#{$gr-step} { scale: $gr-value; }
+}
+
+@each $gr-deg in $gr-rotations {
+  .gr-rotate-#{$gr-deg} { rotate: #{$gr-deg}deg; }
+  .gr-rotate--#{$gr-deg} { rotate: -#{$gr-deg}deg; }
+}
+
+// Обе оси сдвига живут в одном свойстве translate, поэтому значение
+// приходит настраиваемыми свойствами: иначе .gr-translate-x-2
+// и .gr-translate-y-1 затёрли бы друг друга.
+//
+// Ноль по соседней оси — не украшение, а сброс наследования:
+// настраиваемые свойства наследуются, и вложенный .gr-translate-y-1
+// без сброса уехал бы вбок вслед за предком.
+//
+// Объявление повторяется в каждом классе, а не выносится в общий список
+// селекторов. Это решено замером, а не вкусом: на тринадцати правилах
+// общий список стоит 316 Б gzip против 300 Б у повтора — одинаковый
+// хвост правила сжимается лучше, чем перечисление разных селекторов.
+@mixin gr-shift($gr-x, $gr-y) {
+  --gr-tx: #{$gr-x};
+  --gr-ty: #{$gr-y};
+
+  translate: var(--gr-tx) var(--gr-ty);
+}
+
+@each $gr-step, $gr-value in $gr-translates {
+  .gr-translate-x-#{$gr-step} { @include gr-shift($gr-value, 0); }
+  .gr-translate-x--#{$gr-step} { @include gr-shift(-$gr-value, 0); }
+  .gr-translate-y-#{$gr-step} { @include gr-shift(0, $gr-value); }
+  .gr-translate-y--#{$gr-step} { @include gr-shift(0, -$gr-value); }
+}
+
+.gr-hover-lift { @include gr-shift(0, 0); }
+
+// Наведение. Только под (hover: hover) — действующее правило проекта:
+// на сенсорном экране :hover залипает после касания и снимается лишь
+// касанием в другом месте.
+//
+// Подъём идёт через --gr-ty, а не через translate напрямую: карточка,
+// уже сдвинутая по горизонтали, не теряет свой сдвиг под курсором.
+// Переход объявлен здесь же — класс обязан работать в одиночку.
+@media (hover: hover) {
+  .gr-hover-lift,
+  .gr-hover-grow { transition: translate var(--gr-transition), scale var(--gr-transition); }
+  .gr-hover-lift:hover { --gr-ty: -0.25rem; }
+  .gr-hover-grow:hover { scale: 1.03; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gr-hover-lift,
+  .gr-hover-grow { transition-duration: 0.01ms; }
+}

package/scss/_typography.scss

@@ -17,7 +17,7 @@ $gr-text-sizes: (
   4xl:  2.25rem,
   5xl:  3rem,
   6xl:  3.75rem
-);
+) !default;
 
 @each $name, $size in $gr-text-sizes {
   .gr-text-#{$name} { font-size: $size; }
@@ -45,7 +45,7 @@ $gr-text-rel-steps: (
   xl:   4px,
   2xl:  6px,
   3xl:  8px
-);
+) !default;
 
 @each $gr-name, $gr-delta in $gr-text-rel-steps {
   .gr-text-rel-#{$gr-name} {
@@ -70,19 +70,17 @@ $gr-weights: (
   "bold":       700,
   "extrabold":  800,
   "black":      900
-);
+) !default;
 
 @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; }
+// Стороны — только логические: start — начало строки, end — конец,
+// в RTL они меняются местами сами. Физические left/right удалены
+// Этапом 36 вместе с остальными односторонними классами.
 .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; }
@@ -99,7 +97,7 @@ $gr-leading: (
   normal: 1.5,
   relaxed: 1.625,
   loose:  2
-);
+) !default;
 
 @each $name, $value in $gr-leading {
   .gr-leading-#{$name} { line-height: $value; }
@@ -189,9 +187,7 @@ $gr-leading: (
   }
 
   // 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; }