origam 2.18.16 → 2.18.18

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 (38) hide show
  1. package/CHANGELOG.md +839 -0
  2. package/dist/src/assets/css/main.css +1 -1
  3. package/dist/src/assets/css/tokens/dark.css +150 -26
  4. package/dist/src/assets/css/tokens/light.css +75 -13
  5. package/dist/src/assets/scss/tokens/_dark.scss +150 -26
  6. package/dist/src/assets/scss/tokens/_light.scss +75 -13
  7. package/dist/src/components/Btn/OrigamBtn.vue +39 -2
  8. package/dist/src/components/Btn/OrigamBtnGroup.vue +5 -0
  9. package/dist/src/components/DataTable/OrigamDataTable.vue +1 -1
  10. package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue +3 -3
  11. package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue +11 -4
  12. package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue +1 -1
  13. package/dist/src/components/DataTable/OrigamDataTableRow.vue +6 -1
  14. package/dist/src/components/DataTable/OrigamDataTableRows.vue +3 -3
  15. package/dist/src/components/Grid/OrigamGrid.vue +19 -0
  16. package/dist/src/components/List/OrigamListItem.vue +7 -0
  17. package/dist/src/components/List/OrigamListSubheader.vue +5 -0
  18. package/dist/src/components/Pagination/OrigamPagination.vue +64 -2
  19. package/dist/src/components/Toolbar/OrigamToolbar.vue +58 -0
  20. package/dist/src/composables/Commons/defaults.composable.d.ts +51 -0
  21. package/dist/src/composables/DataTable/headers.composable.d.ts +4 -4
  22. package/dist/src/consts/EmptyState/empty-state.const.d.ts +2 -16
  23. package/dist/src/interfaces/Commons/installed-theme.interface.cjs +1 -0
  24. package/dist/src/interfaces/Commons/installed-theme.interface.d.ts +26 -0
  25. package/dist/src/interfaces/Commons/installed-theme.interface.js +0 -0
  26. package/dist/src/interfaces/Commons/semantic-tree.interface.cjs +1 -0
  27. package/dist/src/interfaces/Commons/semantic-tree.interface.d.ts +30 -0
  28. package/dist/src/interfaces/Commons/semantic-tree.interface.js +0 -0
  29. package/dist/src/interfaces/Commons/theme.interface.d.ts +1 -1
  30. package/dist/src/interfaces/EmptyState/empty-state.interface.d.ts +13 -0
  31. package/dist/src/interfaces/index.cjs +22 -0
  32. package/dist/src/interfaces/index.d.ts +2 -0
  33. package/dist/src/interfaces/index.js +2 -0
  34. package/dist/src/types/Commons/installed-theme.type.d.ts +2 -27
  35. package/dist/src/types/Commons/semantic-tree.type.d.ts +0 -29
  36. package/dist/src/types/tokens.type.d.ts +1 -1
  37. package/dist/src/utils/Commons/apply-theme.util.d.ts +1 -1
  38. package/package.json +1 -1
package/dist/src/assets/scss/tokens/_dark.scss CHANGED
@@ -324,6 +324,13 @@
324
324
  --origam-btn---opacity-disabled: var(--origam-opacity---50);
325
325
  --origam-btn---opacity-plain: var(--origam-opacity---70);
326
326
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
327
+ --origam-btn---overlay-opacity-active: 0.2;
328
+ --origam-btn---overlay-opacity-active-hover: 0.28;
329
+ --origam-btn--loader-skeleton---min-width: 96px;
330
+ --origam-btn--loader-skeleton---min-height: 36px;
331
+ --origam-btn__progress---linear-height: 3px;
332
+ --origam-btn__progress---linear-position: 0px;
333
+ --origam-btn__progress---linear-position-top: auto;
327
334
  --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
328
335
  --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
329
336
  --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -923,6 +930,18 @@
923
930
  --origam-toolbar__append---flex-basis: auto;
924
931
  --origam-toolbar__append---margin-inline-start: auto;
925
932
  --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
933
+ /* Toolbar + AppBar — #596. Same rule: every value is the literal the SCSS
934
+ already fell back to, so nothing moves on screen.
935
+ --origam-toolbar---btn-background-color-{hover,active},
936
+ --origam-appbar---backdrop-filter and --origam-layout---position-{left,right}
937
+ stay UNDECLARED on purpose — see the comments at their read sites in
938
+ OrigamToolbar.vue. */
939
+ --origam-toolbar---padding-inline: var(--origam-space---4);
940
+ --origam-toolbar---btn-background-color: rgba(0, 0, 0, 0);
941
+ --origam-toolbar---btn-color: currentColor;
942
+ --origam-toolbar---btn-border-radius: var(--origam-radius---md);
943
+ --origam-toolbar__wrapper---gap: var(--origam-space---3);
944
+ --origam-toolbar__title---color: currentColor;
926
945
  --origam-app---background-color: var(--origam-color__surface---default);
927
946
  --origam-app---color: var(--origam-color__text---primary);
928
947
  --origam-app---min-height: 100vh;
@@ -1646,6 +1665,12 @@
1646
1665
  --origam-pagination---input-width: var(--origam-space---10);
1647
1666
  --origam-pagination---input-padding-inline: var(--origam-space---2);
1648
1667
  --origam-pagination---label-gap: var(--origam-space---2);
1668
+ /* Pagination — #596. rgba(0, 0, 0, 0) is the computed equivalent of the
1669
+ `transparent` literal the SCSS already fell back to for the active item's
1670
+ border, so nothing moves on screen. The three other --item--is-active
1671
+ channels and --origam-pagination---color-hover stay UNDECLARED on purpose
1672
+ — see the comments at their read sites in OrigamPagination.vue. */
1673
+ --origam-pagination__item--is-active---border-color: rgba(0, 0, 0, 0);
1649
1674
  --origam-table---background-color: var(--origam-color__surface---default);
1650
1675
  --origam-table---color: var(--origam-color__text---primary);
1651
1676
  --origam-table---font-size: var(--origam-font__size---md);
@@ -1724,7 +1749,7 @@
1724
1749
  --origam-data-table---width: 100%;
1725
1750
  --origam-data-table---border-collapse: separate;
1726
1751
  --origam-data-table---border-spacing: 0;
1727
- --origam-data-table__loading---opacity: var(--origam-opacity---50);
1752
+ --origam-data-table--loading---opacity: var(--origam-opacity---50);
1728
1753
  --origam-data-table__header---background-color: var(--origam-color__surface---raised);
1729
1754
  --origam-data-table__header---color: var(--origam-color__text---primary);
1730
1755
  --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -1748,11 +1773,11 @@
1748
1773
  --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
1749
1774
  --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
1750
1775
  --origam-data-table__row---mobile-column-min-height: 52px;
1751
- --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
1752
- --origam-data-table__cell---fixed-z-index: 1;
1753
- --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
1754
- --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
1755
1776
  --origam-data-table__cell---last-fixed-border-right-style: solid;
1777
+ --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
1778
+ --origam-data-table-cell--fixed---z-index: 1;
1779
+ --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
1780
+ --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
1756
1781
  --origam-data-table__footer---background-color: var(--origam-color__surface---default);
1757
1782
  --origam-data-table__footer---color: var(--origam-color__text---primary);
1758
1783
  --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -1767,14 +1792,15 @@
1767
1792
  --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
1768
1793
  --origam-data-table__footer--info---justify-content: flex-end;
1769
1794
  --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
1770
- --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
1771
- --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
1772
- --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
1773
- --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
1774
- --origam-data-table__empty---color: var(--origam-color__text---secondary);
1775
- --origam-data-table__empty---text-align: center;
1776
- --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
1777
- --origam-data-table__sortable---cursor: pointer;
1795
+ --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
1796
+ --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
1797
+ --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
1798
+ --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
1799
+ --origam-data-table-rows--no-data---text-align: center;
1800
+ --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
1801
+ --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
1802
+ --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
1803
+ --origam-data-table-header-cell--sortable---cursor: pointer;
1778
1804
  --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
1779
1805
  --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
1780
1806
  --origam-list---background: var(--origam-color__surface---default);
@@ -2406,6 +2432,16 @@
2406
2432
  --origam-grid---gap: var(--origam-grid---gap-md);
2407
2433
  --origam-grid---gap-lg: var(--origam-space---6);
2408
2434
  --origam-grid---gap-xl: var(--origam-space---8);
2435
+ --origam-grid---template-columns: none;
2436
+ --origam-grid---template-rows: none;
2437
+ --origam-grid---template-areas: none;
2438
+ --origam-grid---auto-flow: row;
2439
+ --origam-grid---auto-columns: auto;
2440
+ --origam-grid---auto-rows: auto;
2441
+ --origam-grid---align-items: stretch;
2442
+ --origam-grid---justify-items: stretch;
2443
+ --origam-grid---align-content: normal;
2444
+ --origam-grid---justify-content: normal;
2409
2445
  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
2410
2446
  --origam-skeleton---border-radius: var(--origam-radius---sm);
2411
2447
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -2527,6 +2563,32 @@
2527
2563
  --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
2528
2564
  --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
2529
2565
  --origam-tabs__indicator---height: var(--origam-border__width---2);
2566
+ /* Tabs — #596. Each value is exactly the literal (or token reference) the
2567
+ component SCSS already fell back to, so nothing moves on screen: the
2568
+ variant (--default / --pills / --underline) and item-state channels were
2569
+ simply never declared, so every theme edit to them was a no-op.
2570
+ --item--disabled---color and --item--hover---background-color keep their
2571
+ legacy hardcoded rgba(0, 0, 0, …) — that is what the DS renders today in
2572
+ BOTH themes, and swapping them for a semantic token would move the dark
2573
+ rendering, which is a design decision and not a token-wiring one.
2574
+ Declaring them here is what finally lets a theme fix that. */
2575
+ --origam-tabs--default---border-block-end-width: var(--origam-border__width---thin);
2576
+ --origam-tabs--default---border-block-end-color: var(--origam-color__border---subtle);
2577
+ --origam-tabs--underline---border-block-end-width: var(--origam-border__width---thin);
2578
+ --origam-tabs--underline---border-block-end-color: var(--origam-color__border---subtle);
2579
+ --origam-tabs--pills---background-color: rgba(0, 0, 0, 0);
2580
+ --origam-tabs--pills---gap: var(--origam-space---2);
2581
+ --origam-tabs--pills---padding: var(--origam-space---1);
2582
+ --origam-tabs__item--hover---color: currentColor;
2583
+ --origam-tabs__item--hover---background-color: rgba(0, 0, 0, 0.04);
2584
+ --origam-tabs__item--active---color: currentColor;
2585
+ --origam-tabs__item--active---background-color: rgba(0, 0, 0, 0);
2586
+ --origam-tabs__item--active---font-weight: var(--origam-font__weight---semibold);
2587
+ --origam-tabs__item--disabled---color: rgba(0, 0, 0, 0.38);
2588
+ --origam-tabs__item--disabled---background-color: rgba(0, 0, 0, 0);
2589
+ --origam-tabs__item--focus---outline-color: currentColor;
2590
+ --origam-tabs__item--pills--active---background-color: var(--origam-color__action--primary---bg);
2591
+ --origam-tabs__item--pills--active---color: var(--origam-color__action--primary---fg);
2530
2592
  --origam-tab-panels__panel---padding-block: var(--origam-space---4);
2531
2593
  --origam-tab-panels__panel---padding-inline: var(--origam-space---0);
2532
2594
  --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);
@@ -3224,6 +3286,13 @@
3224
3286
  --origam-btn---opacity-disabled: var(--origam-opacity---50);
3225
3287
  --origam-btn---opacity-plain: var(--origam-opacity---70);
3226
3288
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
3289
+ --origam-btn---overlay-opacity-active: 0.2;
3290
+ --origam-btn---overlay-opacity-active-hover: 0.28;
3291
+ --origam-btn--loader-skeleton---min-width: 96px;
3292
+ --origam-btn--loader-skeleton---min-height: 36px;
3293
+ --origam-btn__progress---linear-height: 3px;
3294
+ --origam-btn__progress---linear-position: 0px;
3295
+ --origam-btn__progress---linear-position-top: auto;
3227
3296
  --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
3228
3297
  --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
3229
3298
  --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -3823,6 +3892,18 @@
3823
3892
  --origam-toolbar__append---flex-basis: auto;
3824
3893
  --origam-toolbar__append---margin-inline-start: auto;
3825
3894
  --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
3895
+ /* Toolbar + AppBar — #596. Same rule: every value is the literal the SCSS
3896
+ already fell back to, so nothing moves on screen.
3897
+ --origam-toolbar---btn-background-color-{hover,active},
3898
+ --origam-appbar---backdrop-filter and --origam-layout---position-{left,right}
3899
+ stay UNDECLARED on purpose — see the comments at their read sites in
3900
+ OrigamToolbar.vue. */
3901
+ --origam-toolbar---padding-inline: var(--origam-space---4);
3902
+ --origam-toolbar---btn-background-color: rgba(0, 0, 0, 0);
3903
+ --origam-toolbar---btn-color: currentColor;
3904
+ --origam-toolbar---btn-border-radius: var(--origam-radius---md);
3905
+ --origam-toolbar__wrapper---gap: var(--origam-space---3);
3906
+ --origam-toolbar__title---color: currentColor;
3826
3907
  --origam-app---background-color: var(--origam-color__surface---default);
3827
3908
  --origam-app---color: var(--origam-color__text---primary);
3828
3909
  --origam-app---min-height: 100vh;
@@ -4546,6 +4627,12 @@
4546
4627
  --origam-pagination---input-width: var(--origam-space---10);
4547
4628
  --origam-pagination---input-padding-inline: var(--origam-space---2);
4548
4629
  --origam-pagination---label-gap: var(--origam-space---2);
4630
+ /* Pagination — #596. rgba(0, 0, 0, 0) is the computed equivalent of the
4631
+ `transparent` literal the SCSS already fell back to for the active item's
4632
+ border, so nothing moves on screen. The three other --item--is-active
4633
+ channels and --origam-pagination---color-hover stay UNDECLARED on purpose
4634
+ — see the comments at their read sites in OrigamPagination.vue. */
4635
+ --origam-pagination__item--is-active---border-color: rgba(0, 0, 0, 0);
4549
4636
  --origam-table---background-color: var(--origam-color__surface---default);
4550
4637
  --origam-table---color: var(--origam-color__text---primary);
4551
4638
  --origam-table---font-size: var(--origam-font__size---md);
@@ -4624,7 +4711,7 @@
4624
4711
  --origam-data-table---width: 100%;
4625
4712
  --origam-data-table---border-collapse: separate;
4626
4713
  --origam-data-table---border-spacing: 0;
4627
- --origam-data-table__loading---opacity: var(--origam-opacity---50);
4714
+ --origam-data-table--loading---opacity: var(--origam-opacity---50);
4628
4715
  --origam-data-table__header---background-color: var(--origam-color__surface---raised);
4629
4716
  --origam-data-table__header---color: var(--origam-color__text---primary);
4630
4717
  --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -4648,11 +4735,11 @@
4648
4735
  --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
4649
4736
  --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
4650
4737
  --origam-data-table__row---mobile-column-min-height: 52px;
4651
- --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
4652
- --origam-data-table__cell---fixed-z-index: 1;
4653
- --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
4654
- --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
4655
4738
  --origam-data-table__cell---last-fixed-border-right-style: solid;
4739
+ --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
4740
+ --origam-data-table-cell--fixed---z-index: 1;
4741
+ --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
4742
+ --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
4656
4743
  --origam-data-table__footer---background-color: var(--origam-color__surface---default);
4657
4744
  --origam-data-table__footer---color: var(--origam-color__text---primary);
4658
4745
  --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -4667,14 +4754,15 @@
4667
4754
  --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
4668
4755
  --origam-data-table__footer--info---justify-content: flex-end;
4669
4756
  --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
4670
- --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
4671
- --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
4672
- --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
4673
- --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
4674
- --origam-data-table__empty---color: var(--origam-color__text---secondary);
4675
- --origam-data-table__empty---text-align: center;
4676
- --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
4677
- --origam-data-table__sortable---cursor: pointer;
4757
+ --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
4758
+ --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
4759
+ --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
4760
+ --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
4761
+ --origam-data-table-rows--no-data---text-align: center;
4762
+ --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
4763
+ --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
4764
+ --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
4765
+ --origam-data-table-header-cell--sortable---cursor: pointer;
4678
4766
  --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
4679
4767
  --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
4680
4768
  --origam-list---background: var(--origam-color__surface---default);
@@ -5305,6 +5393,16 @@
5305
5393
  --origam-grid---gap: var(--origam-grid---gap-md);
5306
5394
  --origam-grid---gap-lg: var(--origam-space---6);
5307
5395
  --origam-grid---gap-xl: var(--origam-space---8);
5396
+ --origam-grid---template-columns: none;
5397
+ --origam-grid---template-rows: none;
5398
+ --origam-grid---template-areas: none;
5399
+ --origam-grid---auto-flow: row;
5400
+ --origam-grid---auto-columns: auto;
5401
+ --origam-grid---auto-rows: auto;
5402
+ --origam-grid---align-items: stretch;
5403
+ --origam-grid---justify-items: stretch;
5404
+ --origam-grid---align-content: normal;
5405
+ --origam-grid---justify-content: normal;
5308
5406
  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
5309
5407
  --origam-skeleton---border-radius: var(--origam-radius---sm);
5310
5408
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -5426,6 +5524,32 @@
5426
5524
  --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
5427
5525
  --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
5428
5526
  --origam-tabs__indicator---height: var(--origam-border__width---2);
5527
+ /* Tabs — #596. Each value is exactly the literal (or token reference) the
5528
+ component SCSS already fell back to, so nothing moves on screen: the
5529
+ variant (--default / --pills / --underline) and item-state channels were
5530
+ simply never declared, so every theme edit to them was a no-op.
5531
+ --item--disabled---color and --item--hover---background-color keep their
5532
+ legacy hardcoded rgba(0, 0, 0, …) — that is what the DS renders today in
5533
+ BOTH themes, and swapping them for a semantic token would move the dark
5534
+ rendering, which is a design decision and not a token-wiring one.
5535
+ Declaring them here is what finally lets a theme fix that. */
5536
+ --origam-tabs--default---border-block-end-width: var(--origam-border__width---thin);
5537
+ --origam-tabs--default---border-block-end-color: var(--origam-color__border---subtle);
5538
+ --origam-tabs--underline---border-block-end-width: var(--origam-border__width---thin);
5539
+ --origam-tabs--underline---border-block-end-color: var(--origam-color__border---subtle);
5540
+ --origam-tabs--pills---background-color: rgba(0, 0, 0, 0);
5541
+ --origam-tabs--pills---gap: var(--origam-space---2);
5542
+ --origam-tabs--pills---padding: var(--origam-space---1);
5543
+ --origam-tabs__item--hover---color: currentColor;
5544
+ --origam-tabs__item--hover---background-color: rgba(0, 0, 0, 0.04);
5545
+ --origam-tabs__item--active---color: currentColor;
5546
+ --origam-tabs__item--active---background-color: rgba(0, 0, 0, 0);
5547
+ --origam-tabs__item--active---font-weight: var(--origam-font__weight---semibold);
5548
+ --origam-tabs__item--disabled---color: rgba(0, 0, 0, 0.38);
5549
+ --origam-tabs__item--disabled---background-color: rgba(0, 0, 0, 0);
5550
+ --origam-tabs__item--focus---outline-color: currentColor;
5551
+ --origam-tabs__item--pills--active---background-color: var(--origam-color__action--primary---bg);
5552
+ --origam-tabs__item--pills--active---color: var(--origam-color__action--primary---fg);
5429
5553
  --origam-tab-panels__panel---padding-block: var(--origam-space---4);
5430
5554
  --origam-tab-panels__panel---padding-inline: var(--origam-space---0);
5431
5555
  --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);
package/dist/src/assets/scss/tokens/_light.scss CHANGED
@@ -226,6 +226,13 @@
226
226
  --origam-btn---opacity-disabled: var(--origam-opacity---50);
227
227
  --origam-btn---opacity-plain: var(--origam-opacity---70);
228
228
  --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
229
+ --origam-btn---overlay-opacity-active: 0.2;
230
+ --origam-btn---overlay-opacity-active-hover: 0.28;
231
+ --origam-btn--loader-skeleton---min-width: 96px;
232
+ --origam-btn--loader-skeleton---min-height: 36px;
233
+ --origam-btn__progress---linear-height: 3px;
234
+ --origam-btn__progress---linear-position: 0px;
235
+ --origam-btn__progress---linear-position-top: auto;
229
236
  --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
230
237
  --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
231
238
  --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -825,6 +832,18 @@
825
832
  --origam-toolbar__append---flex-basis: auto;
826
833
  --origam-toolbar__append---margin-inline-start: auto;
827
834
  --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
835
+ /* Toolbar + AppBar — #596. Same rule: every value is the literal the SCSS
836
+ already fell back to, so nothing moves on screen.
837
+ --origam-toolbar---btn-background-color-{hover,active},
838
+ --origam-appbar---backdrop-filter and --origam-layout---position-{left,right}
839
+ stay UNDECLARED on purpose — see the comments at their read sites in
840
+ OrigamToolbar.vue. */
841
+ --origam-toolbar---padding-inline: var(--origam-space---4);
842
+ --origam-toolbar---btn-background-color: rgba(0, 0, 0, 0);
843
+ --origam-toolbar---btn-color: currentColor;
844
+ --origam-toolbar---btn-border-radius: var(--origam-radius---md);
845
+ --origam-toolbar__wrapper---gap: var(--origam-space---3);
846
+ --origam-toolbar__title---color: currentColor;
828
847
  --origam-app---background-color: var(--origam-color__surface---default);
829
848
  --origam-app---color: var(--origam-color__text---primary);
830
849
  --origam-app---min-height: 100vh;
@@ -1548,6 +1567,12 @@
1548
1567
  --origam-pagination---input-width: var(--origam-space---10);
1549
1568
  --origam-pagination---input-padding-inline: var(--origam-space---2);
1550
1569
  --origam-pagination---label-gap: var(--origam-space---2);
1570
+ /* Pagination — #596. rgba(0, 0, 0, 0) is the computed equivalent of the
1571
+ `transparent` literal the SCSS already fell back to for the active item's
1572
+ border, so nothing moves on screen. The three other --item--is-active
1573
+ channels and --origam-pagination---color-hover stay UNDECLARED on purpose
1574
+ — see the comments at their read sites in OrigamPagination.vue. */
1575
+ --origam-pagination__item--is-active---border-color: rgba(0, 0, 0, 0);
1551
1576
  --origam-table---background-color: var(--origam-color__surface---default);
1552
1577
  --origam-table---color: var(--origam-color__text---primary);
1553
1578
  --origam-table---font-size: var(--origam-font__size---md);
@@ -1628,7 +1653,7 @@
1628
1653
  --origam-data-table---width: 100%;
1629
1654
  --origam-data-table---border-collapse: separate;
1630
1655
  --origam-data-table---border-spacing: 0;
1631
- --origam-data-table__loading---opacity: var(--origam-opacity---50);
1656
+ --origam-data-table--loading---opacity: var(--origam-opacity---50);
1632
1657
  --origam-data-table__header---background-color: var(--origam-color__surface---raised);
1633
1658
  --origam-data-table__header---color: var(--origam-color__text---primary);
1634
1659
  --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -1652,11 +1677,11 @@
1652
1677
  --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
1653
1678
  --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
1654
1679
  --origam-data-table__row---mobile-column-min-height: 52px;
1655
- --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
1656
- --origam-data-table__cell---fixed-z-index: 1;
1657
- --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
1658
- --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
1659
1680
  --origam-data-table__cell---last-fixed-border-right-style: solid;
1681
+ --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
1682
+ --origam-data-table-cell--fixed---z-index: 1;
1683
+ --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
1684
+ --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
1660
1685
  --origam-data-table__footer---background-color: var(--origam-color__surface---default);
1661
1686
  --origam-data-table__footer---color: var(--origam-color__text---primary);
1662
1687
  --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -1671,14 +1696,15 @@
1671
1696
  --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
1672
1697
  --origam-data-table__footer--info---justify-content: flex-end;
1673
1698
  --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
1674
- --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
1675
- --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
1676
- --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
1677
- --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
1678
- --origam-data-table__empty---color: var(--origam-color__text---secondary);
1679
- --origam-data-table__empty---text-align: center;
1680
- --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
1681
- --origam-data-table__sortable---cursor: pointer;
1699
+ --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
1700
+ --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
1701
+ --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
1702
+ --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
1703
+ --origam-data-table-rows--no-data---text-align: center;
1704
+ --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
1705
+ --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
1706
+ --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
1707
+ --origam-data-table-header-cell--sortable---cursor: pointer;
1682
1708
  --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
1683
1709
  --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
1684
1710
  --origam-list---background: var(--origam-color__surface---default);
@@ -2322,6 +2348,16 @@
2322
2348
  --origam-grid---gap: var(--origam-grid---gap-md);
2323
2349
  --origam-grid---gap-lg: var(--origam-space---6);
2324
2350
  --origam-grid---gap-xl: var(--origam-space---8);
2351
+ --origam-grid---template-columns: none;
2352
+ --origam-grid---template-rows: none;
2353
+ --origam-grid---template-areas: none;
2354
+ --origam-grid---auto-flow: row;
2355
+ --origam-grid---auto-columns: auto;
2356
+ --origam-grid---auto-rows: auto;
2357
+ --origam-grid---align-items: stretch;
2358
+ --origam-grid---justify-items: stretch;
2359
+ --origam-grid---align-content: normal;
2360
+ --origam-grid---justify-content: normal;
2325
2361
  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
2326
2362
  --origam-skeleton---border-radius: var(--origam-radius---sm);
2327
2363
  --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -2443,6 +2479,32 @@
2443
2479
  --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
2444
2480
  --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
2445
2481
  --origam-tabs__indicator---height: var(--origam-border__width---2);
2482
+ /* Tabs — #596. Each value is exactly the literal (or token reference) the
2483
+ component SCSS already fell back to, so nothing moves on screen: the
2484
+ variant (--default / --pills / --underline) and item-state channels were
2485
+ simply never declared, so every theme edit to them was a no-op.
2486
+ --item--disabled---color and --item--hover---background-color keep their
2487
+ legacy hardcoded rgba(0, 0, 0, …) — that is what the DS renders today in
2488
+ BOTH themes, and swapping them for a semantic token would move the dark
2489
+ rendering, which is a design decision and not a token-wiring one.
2490
+ Declaring them here is what finally lets a theme fix that. */
2491
+ --origam-tabs--default---border-block-end-width: var(--origam-border__width---thin);
2492
+ --origam-tabs--default---border-block-end-color: var(--origam-color__border---subtle);
2493
+ --origam-tabs--underline---border-block-end-width: var(--origam-border__width---thin);
2494
+ --origam-tabs--underline---border-block-end-color: var(--origam-color__border---subtle);
2495
+ --origam-tabs--pills---background-color: rgba(0, 0, 0, 0);
2496
+ --origam-tabs--pills---gap: var(--origam-space---2);
2497
+ --origam-tabs--pills---padding: var(--origam-space---1);
2498
+ --origam-tabs__item--hover---color: currentColor;
2499
+ --origam-tabs__item--hover---background-color: rgba(0, 0, 0, 0.04);
2500
+ --origam-tabs__item--active---color: currentColor;
2501
+ --origam-tabs__item--active---background-color: rgba(0, 0, 0, 0);
2502
+ --origam-tabs__item--active---font-weight: var(--origam-font__weight---semibold);
2503
+ --origam-tabs__item--disabled---color: rgba(0, 0, 0, 0.38);
2504
+ --origam-tabs__item--disabled---background-color: rgba(0, 0, 0, 0);
2505
+ --origam-tabs__item--focus---outline-color: currentColor;
2506
+ --origam-tabs__item--pills--active---background-color: var(--origam-color__action--primary---bg);
2507
+ --origam-tabs__item--pills--active---color: var(--origam-color__action--primary---fg);
2446
2508
  --origam-tab-panels__panel---padding-block: var(--origam-space---4);
2447
2509
  --origam-tab-panels__panel---padding-inline: var(--origam-space---0);
2448
2510
  --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);
package/dist/src/components/Btn/OrigamBtn.vue CHANGED
@@ -479,6 +479,13 @@ defineExpose({
479
479
  min-width: calc(var(--origam-btn---min-width, 64px) + var(--origam-btn---density, 0px));
480
480
  max-width: var(--origam-btn---max-width, 100%);
481
481
  height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
482
+ // ⛔ C2 (#597) — `--origam-btn---min-height` reste NON DECLARE, a dessein.
483
+ // Son repli est `calc(height + density)`, deux vars reglees PAR INSTANCE
484
+ // (`&--size-*` / `&--density-*` plus bas dans ce bloc). Une custom property
485
+ // est substituee SUR L'ELEMENT QUI LA DECLARE : une declaration `:root`
486
+ // figerait la hauteur minimale a la taille/densite racine et les props
487
+ // `size` / `density` cesseraient d'agir sur elle. Faux positif de la garde,
488
+ // qui compare des noms et non des chaines de repli.
482
489
  min-height: var(--origam-btn---min-height, calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px)));
483
490
  max-height: var(--origam-btn---max-height, 100%);
484
491
 
@@ -800,6 +807,15 @@ defineExpose({
800
807
  // no longer forced to share one token. Themes that don't
801
808
  // declare it fall straight through to the existing behaviour
802
809
  // (their own `-background-color`), so this is additive only.
810
+ //
811
+ // ⛔ C2 (#597) — `--origam-btn---background-color-active` reste NON
812
+ // DECLARE, a dessein. Son repli est le bouton general
813
+ // `--origam-btn---background-color`, lui DECLARE dans les feuilles et
814
+ // surcharge par intention / variante sur l'element. Le declarer a
815
+ // `:root` y substituerait la couleur RACINE une fois pour toutes :
816
+ // l'etat actif d'un bouton `primary` repeindrait le gris secondaire.
817
+ // Non declare, le repli est evalue sur l'element et suit la couleur
818
+ // reelle du bouton — c'est une cascade voulue, pas un oubli.
803
819
  &#{$this}--active {
804
820
  background-color: var(--origam-btn---background-color-active, var(--origam-btn---background-color)) !important;
805
821
  color: var(--origam-btn---color);
@@ -818,6 +834,27 @@ defineExpose({
818
834
  }
819
835
  }
820
836
 
837
+ // ⛔ C2 (#597) — les 5 tokens `ghost` lus ici restent NON DECLARES, a
838
+ // dessein, pour DEUX raisons independantes :
839
+ //
840
+ // 1. chaque repli est un `color-mix()` relatif a `currentColor` (ou a
841
+ // `white`) : il doit etre evalue SUR LE BOUTON, dont la couleur
842
+ // depend de l'intention. Une declaration `:root` le figerait a la
843
+ // teinte racine et le verre prendrait la meme nuance partout.
844
+ // 2. `--origam-btn---background-color-ghost` est lu DEUX FOIS avec DEUX
845
+ // replis differents (12 % ici, 18 % dans la branche
846
+ // `@supports not (backdrop-filter)` plus bas). Le declarer
847
+ // imposerait une seule valeur aux deux branches : c'est un choix de
848
+ // design a arbitrer, pas une correction mecanique.
849
+ //
850
+ // Les jumeaux `--origam-btn--ghost---{background-color,color,
851
+ // background-color-hover}` existent bien dans les feuilles, mais ils ne
852
+ // portent PAS un voile relatif : `--origam-color__action--ghost---bg` vaut
853
+ // `rgba(0, 0, 0, 0)` (mesure, light.css:108) et `---bgHover` un neutre
854
+ // OPAQUE (`neutral---100`, light.css:109). Les cabler ici supprimerait donc
855
+ // le voile a 12 % au repos et le remplacerait par un aplat neutre au
856
+ // survol : changement de rendu, pas correction. Ils restent dormants —
857
+ // meme arbitrage.
821
858
  &--variant-ghost {
822
859
  background-color: var(
823
860
  --origam-btn---background-color-ghost,
@@ -943,8 +980,8 @@ defineExpose({
943
980
  // the skeleton's natural size unless we give it a sensible
944
981
  // min-width / min-height.
945
982
  &--loader-skeleton {
946
- min-width: var(--origam-btn---loader-skeleton-min-width, 96px);
947
- min-height: var(--origam-btn---loader-skeleton-min-height, 36px);
983
+ min-width: var(--origam-btn--loader-skeleton---min-width, 96px);
984
+ min-height: var(--origam-btn--loader-skeleton---min-height, 36px);
948
985
 
949
986
  :deep(.origam-skeleton--rectangular) {
950
987
  position: absolute;
package/dist/src/components/Btn/OrigamBtnGroup.vue CHANGED
@@ -337,6 +337,11 @@ defineExpose({
337
337
  box-shadow: none;
338
338
  }
339
339
 
340
+ // ⛔ C2 (#597) — les 3 tokens `ghost` lus ici restent NON DECLARES, pour
341
+ // la meme raison que dans `OrigamBtn.vue` (voir le commentaire detaille
342
+ // devant son propre `&--variant-ghost`) : leurs replis sont des
343
+ // `color-mix()` relatifs a `currentColor`, qui doivent etre evalues sur
344
+ // l'element et non figes a `:root`.
340
345
  &--variant-ghost {
341
346
  background-color: var(
342
347
  --origam-btn---background-color-ghost,
package/dist/src/components/DataTable/OrigamDataTable.vue CHANGED
@@ -440,7 +440,7 @@ defineExpose({
440
440
  * et un voile a 0.82 n'est plus un voile.
441
441
  ********************************************************/
442
442
  &:deep(.origam-data-table-cell:not(.origam-data-table-header-cell)) {
443
- opacity: var(--origam-data-table--loading---opacity, var(--origam-data-table__loading---opacity, 0.5));
443
+ opacity: var(--origam-data-table--loading---opacity, 0.5);
444
444
  }
445
445
  }
446
446
  }
package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue CHANGED
@@ -115,13 +115,13 @@ defineExpose({
115
115
 
116
116
  &--fixed {
117
117
  position: sticky;
118
- background: var(--origam-data-table-cell--fixed---background, var(--origam-data-table__cell---fixed-background-color, var(--origam-color__surface---raised)));
118
+ background: var(--origam-data-table-cell--fixed---background, var(--origam-color__surface---raised));
119
119
  left: 0;
120
- z-index: var(--origam-data-table-cell--fixed---z-index, var(--origam-data-table__cell---fixed-z-index, 1))
120
+ z-index: var(--origam-data-table-cell--fixed---z-index, 1)
121
121
  }
122
122
 
123
123
  &--last-fixed {
124
- border-right: var(--origam-data-table-cell--last-fixed---border-right-width, var(--origam-data-table__cell---last-fixed-border-right-width, 1px)) var(--origam-data-table__cell---last-fixed-border-right-style, solid) var(--origam-data-table-cell--last-fixed---border-right-color, var(--origam-data-table__cell---last-fixed-border-right-color, var(--origam-color__border---subtle)));
124
+ border-right: var(--origam-data-table-cell--last-fixed---border-right-width, 1px) var(--origam-data-table__cell---last-fixed-border-right-style, solid) var(--origam-data-table-cell--last-fixed---border-right-color, var(--origam-color__border---subtle));
125
125
  }
126
126
  }
127
127
  </style>
package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue CHANGED
@@ -142,12 +142,19 @@ defineExpose({
142
142
 
143
143
  <style lang="scss" scoped>
144
144
  .origam-data-table-group-header-row {
145
- background-color: var(--origam-data-table-group-header-row---background-color, var(--origam-data-table---group-header-row-background-color, var(--origam-color__surface---overlay)));
146
- color: var(--origam-data-table-group-header-row---color, var(--origam-data-table---group-header-row-color, var(--origam-color__text---primary)));
147
- font-weight: var(--origam-data-table-group-header-row---font-weight, var(--origam-data-table---group-header-row-font-weight, 500));
145
+ background-color: var(--origam-data-table-group-header-row---background-color, var(--origam-color__surface---overlay));
146
+ color: var(--origam-data-table-group-header-row---color, var(--origam-color__text---primary));
147
+ font-weight: var(--origam-data-table-group-header-row---font-weight, 500);
148
148
 
149
149
  &__column {
150
- padding-inline-start: calc(var(--origam-data-table-group-header-row--depth, 0) * var(--origam-data-table-group-header-row__column---padding-inline-start-factor, var(--origam-data-table---group-header-row-column-padding-inline-start-factor, 16px)));
150
+ // ⛔ C2 (#597) — `--origam-data-table-group-header-row--depth` reste NON
151
+ // DECLARE, a dessein : ce n'est PAS un token de theme mais une DONNEE
152
+ // d'instance, ecrite en style inline par ce composant
153
+ // (`dataTableGroupHeaderRowStyles`, `props.item.depth`). La declarer
154
+ // dans les feuilles exposerait la profondeur d'un noeud comme un
155
+ // reglage de theme, et son repli `0` doit rester SANS UNITE : c'est un
156
+ // multiplicateur de `calc()`, `0px * 16px` serait invalide (#568).
157
+ padding-inline-start: calc(var(--origam-data-table-group-header-row--depth, 0) * var(--origam-data-table-group-header-row__column---padding-inline-start-factor, 16px));
151
158
  }
152
159
  }
153
160
  </style>
package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue CHANGED
@@ -209,7 +209,7 @@ defineExpose({
209
209
  }
210
210
 
211
211
  &#{$this}--sortable {
212
- cursor: var(--origam-data-table-sortable---cursor, var(--origam-data-table__sortable---cursor, pointer));
212
+ cursor: var(--origam-data-table-header-cell--sortable---cursor, pointer);
213
213
 
214
214
  &:hover {
215
215
  #{$this}__sort-icon {
package/dist/src/components/DataTable/OrigamDataTableRow.vue CHANGED
@@ -262,7 +262,12 @@ defineExpose({
262
262
  column-gap: 4px;
263
263
  display: grid;
264
264
  grid-template-columns: repeat(2, 1fr);
265
- min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table-row--mobile__column, var(--origam-data-table__row---mobile-column-min-height, 52px)));
265
+ // C2 (#597) — l'echelon intermediaire
266
+ // `var(--origam-data-table-row--mobile__column, …)` a ete RETIRE :
267
+ // le premier echelon est declare dans les feuilles (52px), donc il
268
+ // resout toujours et l'intermediaire etait inatteignable. Mesure
269
+ // avant/apres : `min-height` = 52px de part et d'autre.
270
+ min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table__row---mobile-column-min-height, 52px));
266
271
 
267
272
  &:not(:last-child) {
268
273
  border-bottom: 0;
package/dist/src/components/DataTable/OrigamDataTableRows.vue CHANGED
@@ -280,12 +280,12 @@ defineExpose({
280
280
  <style lang="scss" scoped>
281
281
  .origam-data-table-rows {
282
282
  &--no-data {
283
- text-align: var(--origam-data-table-empty---text-align, var(--origam-data-table__empty---text-align, center));
284
- color: var(--origam-data-table-rows--no-data---color, var(--origam-data-table__empty---color, var(--origam-color__text---secondary)));
283
+ text-align: var(--origam-data-table-rows--no-data---text-align, center);
284
+ color: var(--origam-data-table-rows--no-data---color, var(--origam-color__text---secondary));
285
285
  }
286
286
 
287
287
  &--loading {
288
- color: var(--origam-data-table-rows--loading---color, var(--origam-data-table---loading-row-color, var(--origam-color__text---secondary)));
288
+ color: var(--origam-data-table-rows--loading---color, var(--origam-color__text---secondary));
289
289
  }
290
290
 
291
291
  &--skeleton {
package/dist/src/components/Grid/OrigamGrid.vue CHANGED
@@ -216,6 +216,25 @@ defineExpose({
216
216
  grid-auto-columns: var(--origam-grid---auto-columns, auto);
217
217
  grid-auto-rows: var(--origam-grid---auto-rows, auto);
218
218
  gap: var(--origam-grid---gap, var(--origam-grid---gap-md));
219
+ // ⛔ C2 (#597) — `--origam-grid---column-gap` et `---row-gap` restent NON
220
+ // DECLARES, a dessein, et ils sont les SEULS de ce bloc dans ce cas
221
+ // (mesure : les 8 autres sont declares dans light.css, ces deux-la a 0).
222
+ //
223
+ // La difference n'est pas la forme du repli, c'est QUI le repli designe :
224
+ //
225
+ // - les 8 autres lisent LEUR PROPRE token, que `gridStyles` ci-dessus
226
+ // ecrit en style INLINE sur l'element. La declaration de l'element bat
227
+ // celle de `:root`, donc la prop continue d'agir et la declaration de
228
+ // feuille est inoffensive.
229
+ // - ces deux-ci lisent le token DU VOISIN en repli
230
+ // (`var(--origam-grid---column-gap, var(--origam-grid---gap))`), et
231
+ // c'est `--origam-grid---gap` — lui aussi ecrit inline par la prop
232
+ // `gap` — qui porte la valeur utile. Les declarer a `:root` ferait
233
+ // resoudre le premier echelon et la chaine NE CONSULTERAIT JAMAIS
234
+ // `---gap` : la prop `gap` cesserait d'agir sur les deux gouttieres.
235
+ //
236
+ // Faux positif de la garde, qui compare des noms et non des chaines de
237
+ // repli.
219
238
  column-gap: var(--origam-grid---column-gap, var(--origam-grid---gap));
220
239
  row-gap: var(--origam-grid---row-gap, var(--origam-grid---gap));
221
240
  align-items: var(--origam-grid---align-items, stretch);