npm - @feugene/granularity - Versions diffs - 0.13.0 → 0.16.0 - Mend

@feugene/granularity 0.13.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1223) hide show

package/dist/styles/themes/dark.css CHANGED Viewed

@@ -1,10 +1,13 @@
+/*
+ * СГЕНЕРИРОВАНО `yarn generate:tokens` из `tokens/*.json` — правки здесь потеряются.
+ * Менять значения и комментарии нужно в JSON, затем перегенерировать.
+ */
 /*
  * Тёмная тема. Канон — атрибут `[data-theme='dark']` на `<html>` (его ставит
- * `useTheme`/`initThemeEarly`). Селекторы `.theme-dark` и `.dark` — DEPRECATED-алиасы
- * для обратной совместимости; в новом коде используйте `[data-theme]`.
+ * `useTheme`/`initThemeEarly`). Селектор `.dark` оставлен для интеропа с
+ * class-стратегией Tailwind/UnoCSS: приложение может уже переключать тему им.
  */
 [data-theme='dark'],
-.theme-dark,
 .dark {
   /* Surface roles */
   --gr-bg: #0f172a;
@@ -14,15 +17,32 @@
   --gr-popover: #1e293b;
   --gr-popover-fg: #f8fafc;
   --gr-muted: #334155;
-  /* Симметрично light: минимум по фону `--gr-muted`/`--gr-secondary` (#334155).
-     Прежний #94a3b8 давал там 4.04, #aab6c7 даёт 5.04. */
+  /*
+   * Симметрично light: минимум по фону `--gr-muted`/`--gr-secondary` (#334155).
+   * Прежний #94a3b8 давал там 4.04, #aab6c7 даёт 5.04.
+   */
   --gr-muted-fg: #aab6c7;
   --gr-secondary: #334155;
   --gr-secondary-fg: #f1f5f9;
+  --gr-overlay-bg: rgb(2 6 23 / 0.65);
   --gr-brd: #334155;
   --gr-input: #334155;
   --gr-ring: #818cf8;
+  /* State roles */
+  --gr-disabled-bg: #273548;
+  --gr-disabled-fg: #64748b;
+  --gr-disabled-brd: #334155;
+  /*
+   * Ошибка валидации и декоративный тон `state="danger"` — разные вещи, хотя
+   * выглядят одинаково по умолчанию. Ссылка, а не копия hex: тема, поменявшая
+   * только `--gr-danger`, не обязана помнить про второй набор, а тема, которой
+   * нужен отдельный цвет ошибки, перекрашивает три роли и не трогает danger-тон.
+   */
+  --gr-invalid-brd: var(--gr-danger);
+  --gr-invalid-ring: var(--gr-danger);
+  --gr-invalid-text: var(--gr-danger-text);
   /* Action roles */
   /*
    * Primary был единственным тоном, выпадавшим из конвенции тёмной темы
@@ -30,21 +50,21 @@
    * оставался светло-тёмным индиго #6366f1 с белым текстом и проваливал сразу
    * все три роли — текст на фоне 4.00, текст на карточке 3.27, белый на
    * заливке 4.47. Светлый индиго с тёмным `-fg` даёт 6.38 / 5.23 / 6.38.
-   * Не indigo-400 (#818cf8): это ровно `--gr-info` тёмной темы, и solid-бейджи
-   * Primary и Info стали бы неотличимы.
+   * Не indigo-400 (#818cf8): в ту сторону лежит `--gr-info`, и увести primary
+   * туда значило бы вернуть слияние двух тонов, ради разведения которого info
+   * и перекрашен в синий.
    * Кнопок не касается: GrButton задаёт свой `--gr-button-primary-bg`.
    */
   --gr-primary: #9d8bfa;
   --gr-primary-fg: #0f172a;
   --gr-accent: #1e1b4b;
   --gr-accent-fg: #c7d2fe;
-  --gr-destructive: #ef4444;
-  --gr-destructive-fg: #ffffff;
   /* Status roles */
   --gr-success: #34d399;
   --gr-success-light: #064e3b;
   --gr-success-fg: #0f172a;
+  --gr-primary-text: #c7d2fe;
   --gr-success-text: #6ee7b7;
   --gr-warning: #fb923c;
   --gr-warning-light: #7c2d12;
@@ -54,10 +74,10 @@
   --gr-danger-light: #7f1d1d;
   --gr-danger-fg: #0f172a;
   --gr-danger-text: #fca5a5;
-  --gr-info: #818cf8;
-  --gr-info-light: #312e81;
+  --gr-info: #60a5fa;
+  --gr-info-light: #1e3a8a;
   --gr-info-fg: #0f172a;
-  --gr-info-text: #c7d2fe;
+  --gr-info-text: #bfdbfe;
   --gr-slate: #94a3b8;
   --gr-slate-light: #334155;
   --gr-slate-fg: #0f172a;
@@ -67,6 +87,47 @@
   --gr-azure-fg: #0f172a;
   --gr-azure-text: #bae6fd;
+  /*
+   * Solid fill roles
+   *
+   * Сплошная заливка кнопочного веса и её текст.
+   *
+   * В тёмной теме собственные значения нужны всем семи тонам: глобальные
+   * `--gr-{tone}` здесь — пастельные заливки под ТЁМНЫЙ текст, а кнопка обязана
+   * остаться насыщенной со светлой подписью.
+   *
+   * hover и active уводят заливку темнее, а не светлее: общая формула подмеса к
+   * `--gr-fg` в тёмной теме осветляла бы кнопку под курсором.
+   */
+  --gr-primary-solid: #595ce6;
+  --gr-primary-solid-hover: #5053dd;
+  --gr-primary-solid-active: #474acf;
+  --gr-primary-solid-fg: var(--gr-slate-0);
+  --gr-success-solid: #047857;
+  --gr-success-solid-hover: #036c4d;
+  --gr-success-solid-active: #025f44;
+  --gr-success-solid-fg: var(--gr-slate-50);
+  --gr-warning-solid: #c2410c;
+  --gr-warning-solid-hover: #b53b0a;
+  --gr-warning-solid-active: #9f3307;
+  --gr-warning-solid-fg: var(--gr-slate-50);
+  --gr-danger-solid: #b91c1c;
+  --gr-danger-solid-hover: #a91919;
+  --gr-danger-solid-active: #931515;
+  --gr-danger-solid-fg: var(--gr-slate-50);
+  --gr-info-solid: #1d4ed8;
+  --gr-info-solid-hover: #1e40af;
+  --gr-info-solid-active: #1e3a8a;
+  --gr-info-solid-fg: var(--gr-slate-50);
+  --gr-slate-solid: var(--gr-slate-600);
+  --gr-slate-solid-hover: var(--gr-slate-700);
+  --gr-slate-solid-active: var(--gr-slate-800);
+  --gr-slate-solid-fg: var(--gr-slate-50);
+  --gr-azure-solid: #0369a1;
+  --gr-azure-solid-hover: #075985;
+  --gr-azure-solid-active: #0c4a6e;
+  --gr-azure-solid-fg: var(--gr-slate-50);
   /* Data visualization roles */
   --gr-chart-1: #6366f1;
   --gr-chart-2: #34d399;
@@ -86,9 +147,8 @@
 }
 @supports not (color: color-mix(in srgb, #000 50%, #fff)) {
-  .theme-dark,
-  .dark,
-  [data-theme='dark'] {
+  [data-theme='dark'],
+  .dark {
     /* Action role fallbacks */
     --gr-primary-hover: #a494fa;
     --gr-primary-active: #ac9dfa;
@@ -96,8 +156,6 @@
     --gr-secondary-active: #535f70;
     --gr-brd-hover: #6e7987;
     --gr-brd-active: #8c94a0;
-    --gr-destructive-hover: #f05353;
-    --gr-destructive-active: #f06161;
     /* Status role fallbacks */
     --gr-success-hover: #44d6a1;
@@ -106,14 +164,11 @@
     --gr-warning-active: #fba35b;
     --gr-danger-hover: #f87c7c;
     --gr-danger-active: #f88787;
-    --gr-info-hover: #8b95f8;
-    --gr-info-active: #949ef9;
-    --gr-slate-hover: #9faec0;
-    --gr-slate-active: #aab7c8;
-    --gr-azure-hover: #4bc3f9;
-    --gr-azure-active: #5dcbf9;
-    /* Component semantic fallbacks */
-    /*--gr-category-tree-branch-line-active-color: #505b8c;*/
+    --gr-info-hover: #6cacfa;
+    --gr-info-active: #78b3fa;
+    --gr-slate-hover: #9caabd;
+    --gr-slate-active: #a4b1c3;
+    --gr-azure-hover: #47c2f8;
+    --gr-azure-active: #57c7f9;
   }
 }

package/dist/styles/themes/light.css CHANGED Viewed

@@ -1,3 +1,7 @@
+/*
+ * СГЕНЕРИРОВАНО `yarn generate:tokens` из `tokens/*.json` — правки здесь потеряются.
+ * Менять значения и комментарии нужно в JSON, затем перегенерировать.
+ */
 :root {
   /* Surface roles */
   --gr-bg: #f8fafc;
@@ -18,17 +22,30 @@
   --gr-muted-fg: #556275;
   --gr-secondary: #e2e8f0;
   --gr-secondary-fg: #1e293b;
+  --gr-overlay-bg: rgb(15 23 42 / 0.45);
   --gr-brd: #e2e8f0;
   --gr-input: #e2e8f0;
   --gr-ring: #6366f1;
+  /* State roles */
+  --gr-disabled-bg: #f1f5f9;
+  --gr-disabled-fg: #94a3b8;
+  --gr-disabled-brd: #e2e8f0;
+  /*
+   * Ошибка валидации и декоративный тон `state="danger"` — разные вещи, хотя
+   * выглядят одинаково по умолчанию. Ссылка, а не копия hex: тема, поменявшая
+   * только `--gr-danger`, не обязана помнить про второй набор, а тема, которой
+   * нужен отдельный цвет ошибки, перекрашивает три роли и не трогает danger-тон.
+   */
+  --gr-invalid-brd: var(--gr-danger);
+  --gr-invalid-ring: var(--gr-danger);
+  --gr-invalid-text: var(--gr-danger-text);
   /* Action roles */
   --gr-primary: #4f46e5;
   --gr-primary-fg: #ffffff;
   --gr-accent: #eef2ff;
   --gr-accent-fg: #3730a3;
-  --gr-destructive: #dc2626;
-  --gr-destructive-fg: #ffffff;
   /* Status roles */
   /*
@@ -37,11 +54,12 @@
    * при пороге AA 4.5 — а это solid-кнопки и бейджи (`grButtonStyles.ts`,
    * `grBadgeStyles.ts`). С `--gr-fg` получаем 7.04 и 6.37, и hover/active,
    * которые уводят заливку в тёмную сторону, остаются выше порога (5.30 / 4.79).
-   * В `dark.css` эти токены уже тёмные — там заливки светлее фона.
+   * В тёмной теме эти токены уже тёмные — там заливки светлее фона.
    */
   --gr-success: #10b981;
   --gr-success-light: #d1fae5;
   --gr-success-fg: #0f172a;
+  --gr-primary-text: #3730a3;
   --gr-success-text: #065f46;
   --gr-warning: #f97316;
   --gr-warning-light: #ffedd5;
@@ -51,10 +69,19 @@
   --gr-danger-light: #fee2e2;
   --gr-danger-fg: #ffffff;
   --gr-danger-text: #991b1b;
-  --gr-info: #5850ec;
-  --gr-info-light: #e0e7ff;
+  /*
+   * Синий, а не индиго. Прежний `#5850ec` отличался от `--gr-primary` на ΔE 4.3
+   * при пороге заметности около 2.3, а текстовые роли обоих тонов совпадали
+   * значением полностью — ссылка `tone="info"` и ссылка `tone="primary"`
+   * красились одинаково. Тон занял собственный участок палитры: он отличим и от
+   * `primary` (ΔE 21 в светлой теме, 29 в тёмной), и от `azure` (48 и 22).
+   * Замысел был такой и раньше — тёмная тема уже отказывалась брать indigo-400
+   * именно потому, что solid-бейджи primary и info стали бы неотличимы.
+   */
+  --gr-info: #2563eb;
+  --gr-info-light: #dbeafe;
   --gr-info-fg: #ffffff;
-  --gr-info-text: #3730a3;
+  --gr-info-text: #1e40af;
   --gr-slate: #475569;
   --gr-slate-light: #e2e8f0;
   --gr-slate-fg: #ffffff;
@@ -73,6 +100,55 @@
   --gr-azure-fg: #ffffff;
   --gr-azure-text: #075985;
+  /*
+   * Solid fill roles
+   *
+   * Сплошная заливка кнопочного веса и её текст.
+   *
+   * От роли без суффикса отличается порогом. `--gr-{tone}` рассчитан на 3:1 к
+   * фону страницы — это индикатор, граница, бейдж, — и текст на нём берётся из
+   * `-fg`, у светлых заливок тёмный. `-solid` рассчитан на 4.5:1 под СВЕТЛЫЙ
+   * текст: solid-кнопки всех тонов обязаны выглядеть одной семьёй, а бледно-
+   * зелёная кнопка рядом с тёмно-красной читается как ошибка вёрстки.
+   *
+   * Там, где глобальный тон уже достаточно тёмен, `-solid` — ссылка на него.
+   * Собственные значения нужны трём тонам: белый текст даёт 5.48 / 6.45 / 7.71
+   * на затемнённом success и 5.18 на затемнённом warning, тогда как глобальный
+   * `-fg` там тёмный и на той же заливке дал бы 3.26 и 3.45. Azure не чинится
+   * сменой `-fg` вовсе (см. примечание к `--gr-azure`).
+   *
+   * hover и active заданы значениями, а не общей формулой подмеса: они выбраны
+   * ступенями палитры, и формула сдвинула бы azure-active на 32 единицы канала.
+   */
+  --gr-primary-solid: var(--gr-primary);
+  --gr-primary-solid-hover: var(--gr-primary-hover);
+  --gr-primary-solid-active: var(--gr-primary-active);
+  --gr-primary-solid-fg: var(--gr-primary-fg);
+  --gr-success-solid: #047857;
+  --gr-success-solid-hover: #036c4d;
+  --gr-success-solid-active: #025f44;
+  --gr-success-solid-fg: var(--gr-slate-0);
+  --gr-warning-solid: #c2410c;
+  --gr-warning-solid-hover: #b53b0a;
+  --gr-warning-solid-active: #9f3307;
+  --gr-warning-solid-fg: var(--gr-slate-0);
+  --gr-danger-solid: var(--gr-danger);
+  --gr-danger-solid-hover: var(--gr-danger-hover);
+  --gr-danger-solid-active: var(--gr-danger-active);
+  --gr-danger-solid-fg: var(--gr-danger-fg);
+  --gr-info-solid: var(--gr-info);
+  --gr-info-solid-hover: var(--gr-info-hover);
+  --gr-info-solid-active: var(--gr-info-active);
+  --gr-info-solid-fg: var(--gr-info-fg);
+  --gr-slate-solid: var(--gr-slate);
+  --gr-slate-solid-hover: var(--gr-slate-hover);
+  --gr-slate-solid-active: var(--gr-slate-active);
+  --gr-slate-solid-fg: var(--gr-slate-fg);
+  --gr-azure-solid: #0369a1;
+  --gr-azure-solid-hover: #075985;
+  --gr-azure-solid-active: #0c4a6e;
+  --gr-azure-solid-fg: var(--gr-slate-0);
   /* Data visualization roles */
   --gr-chart-1: #4f46e5;
   --gr-chart-2: #10b981;
@@ -100,8 +176,6 @@
     --gr-secondary-active: #c0c7d0;
     --gr-brd-hover: #a3a9b5;
     --gr-brd-active: #838a97;
-    --gr-destructive-hover: #cc2526;
-    --gr-destructive-active: #bb2427;
     /* Status role fallbacks */
     --gr-success-hover: #10ac7a;
@@ -110,14 +184,11 @@
     --gr-warning-active: #d46419;
     --gr-danger-hover: #cc2526;
     --gr-danger-active: #bb2427;
-    --gr-info-hover: #5c60e1;
-    --gr-info-active: #5659d1;
-    --gr-slate-hover: #435062;
-    --gr-slate-active: #3d4a5b;
+    --gr-info-hover: #235ddc;
+    --gr-info-active: #2157cc;
+    --gr-slate-hover: #435064;
+    --gr-slate-active: #3e4b5f;
     --gr-azure-hover: #016fab;
     --gr-azure-active: #0268a0;
-    /* Component semantic fallbacks */
-    /*--gr-category-tree-branch-line-active-color: #c4cdf7;*/
   }
 }

package/dist/styles/tokens.css CHANGED Viewed

@@ -1,3 +1,7 @@
+/*
+ * СГЕНЕРИРОВАНО `yarn generate:tokens` из `tokens/*.json` — правки здесь потеряются.
+ * Менять значения и комментарии нужно в JSON, затем перегенерировать.
+ */
 :root {
   /* Foundations: neutral palette */
   --gr-slate-0: #ffffff;
@@ -17,6 +21,7 @@
   --gr-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
   /* Typography: font sizes */
+  --gr-text-2xs: 10px;
   --gr-text-xs: 12px;
   --gr-text-sm: 14px;
   --gr-text-base: 16px;
@@ -26,7 +31,44 @@
   --gr-text-3xl: 30px;
   --gr-text-4xl: 36px;
-  /* Typography: line heights */
+  /*
+   * Typography: control scale
+   *
+   * Шкала кеглей компонентов, живущих на `GrComponentSize` — контролов и всего,
+   * что стоит с ними в один ряд. Отдельная от контентной типографики по двум
+   * причинам. Первая: ступеней 13px и 11px там нет и быть не должно — это
+   * компромиссы плотности контрола, а не ступени текста. Вторая: шкала намеренно
+   * плотнее четырёх ступеней размера — каждый компонент выбирает из неё свои
+   * четыре. Основная лестница `xs…lg` (12/13/14/16) — у `GrInput`, `GrSelect`,
+   * `GrTextarea`, `GrTreeSelect`, `GrAutocomplete`, `GrNumberInput`, `GrInputTag`,
+   * `GrTable`, `GrLink`, `GrPopover`; на ступень мельче (`3xs…md`, 10/11/12/14)
+   * работают `GrTooltip`, `GrDataTable`, `GrBadge`, `GrRating`, `GrFormFile`.
+   * Совпадение значений с `--gr-text-*` не делает шкалы одной: плотность контролов
+   * меняется отдельно от кегля контентного текста.
+   */
+  --gr-control-text-3xs: 10px;
+  --gr-control-text-2xs: 11px;
+  --gr-control-text-xs: 12px;
+  --gr-control-text-sm: 13px;
+  --gr-control-text-md: 14px;
+  --gr-control-text-lg: 16px;
+  /*
+   * Typography: line heights
+   *
+   * Две разные вещи под одним префиксом, и различает их суффикс.
+   * Ступени (`xs`/`sm`/`base`) — абсолютные значения, парные одноимённым ступеням
+   * `--gr-text-*`: утилита `text-sm` в uno задавала кегль и межстрочный разом, и
+   * кегль, переведённый на токен в одиночку, отдал бы интервал на откуп `body`
+   * приложения. Коэффициенты (`tight`/`normal`/`relaxed`) — безразмерные, для
+   * текстовых блоков, где интервал задаётся отношением к кеглю, а не числом.
+   * Ступени заводятся по мере употребления: шкала без употребления — мёртвый груз.
+   */
+  --gr-leading-xs: 1rem;
+  --gr-leading-sm: 1.25rem;
+  --gr-leading-base: 1.5rem;
+  --gr-leading-xl: 1.75rem;
+  --gr-leading-3xl: 2.25rem;
   --gr-leading-tight: 1.25;
   --gr-leading-normal: 1.5;
   --gr-leading-relaxed: 1.625;
@@ -70,10 +112,26 @@
   --gr-bp-xl: 1280px;
   --gr-bp-2xl: 1536px;
+  /*
+   * Iconography: icon sizes
+   *
+   * Шкала размеров иконки (`GrIcon`). Значения совпадают со шкалой контролов
+   * (`xs…lg`) и живут токенами, а не литералами в компоненте: иконка обязана
+   * масштабироваться вместе с темой, а не вместе с пересборкой пакета.
+   * Произвольный размер задаётся числом прямо на компоненте — это escape-hatch,
+   * а не часть шкалы.
+   */
+  --gr-icon-size-xs: 14px;
+  --gr-icon-size-sm: 16px;
+  --gr-icon-size-md: 18px;
+  --gr-icon-size-lg: 20px;
   /* Shapes: radii and compatibility aliases */
   --radius: 0.5rem;
   --gr-radius-none: 0px;
+  --gr-radius-xs: 3px;
   --gr-radius-sm: 4px;
+  --gr-radius-control: 6px;
   --gr-radius-md: 8px;
   --gr-radius-lg: 12px;
   --gr-radius-xl: 16px;
@@ -93,7 +151,7 @@
   --gr-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
   /*
-   * Z-index layering scale.
+   * Layering: z-index scale
    *
    * Единый источник истины для слоёв всех компонентов, использующих `position: fixed`
    * поверх остального контента. Правило: чем выше в UI-стеке слой обязан оказаться,
@@ -104,9 +162,12 @@
    * Тосты — единственный слой, который обязан быть виден поверх абсолютно всего,
    * включая открытые модалки (это уведомление уровня приложения).
    */
+  --gr-z-bottom-nav: 850;
+  --gr-z-navbar: 900;
   --gr-z-dropdown: 1000;
   --gr-z-tooltip: 1050;
   --gr-z-modal: 1100;
+  --gr-z-loading: 1150;
   --gr-z-toast: 1200;
   /* Derived interaction formulas: action roles */
@@ -116,8 +177,6 @@
   --gr-secondary-active: color-mix(in srgb, var(--gr-secondary) 84%, var(--gr-fg));
   --gr-brd-hover: color-mix(in srgb, var(--gr-brd) 70%, var(--gr-fg));
   --gr-brd-active: color-mix(in srgb, var(--gr-brd) 55%, var(--gr-fg));
-  --gr-destructive-hover: color-mix(in srgb, var(--gr-destructive) 92%, var(--gr-fg));
-  --gr-destructive-active: color-mix(in srgb, var(--gr-destructive) 84%, var(--gr-fg));
   /* Derived interaction formulas: status roles */
   --gr-success-hover: color-mix(in srgb, var(--gr-success) 92%, var(--gr-fg));