origam 2.18.16 → 2.18.18

package/dist/src/assets/css/tokens/dark.css

@@ -324,6 +324,13 @@
   --origam-btn---opacity-disabled: var(--origam-opacity---50);
   --origam-btn---opacity-plain: var(--origam-opacity---70);
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
+  --origam-btn---overlay-opacity-active: 0.2;
+  --origam-btn---overlay-opacity-active-hover: 0.28;
+  --origam-btn--loader-skeleton---min-width: 96px;
+  --origam-btn--loader-skeleton---min-height: 36px;
+  --origam-btn__progress---linear-height: 3px;
+  --origam-btn__progress---linear-position: 0px;
+  --origam-btn__progress---linear-position-top: auto;
   --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
   --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
   --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -923,6 +930,18 @@
   --origam-toolbar__append---flex-basis: auto;
   --origam-toolbar__append---margin-inline-start: auto;
   --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
+  /* Toolbar + AppBar — #596. Same rule: every value is the literal the SCSS
+     already fell back to, so nothing moves on screen.
+     --origam-toolbar---btn-background-color-{hover,active},
+     --origam-appbar---backdrop-filter and --origam-layout---position-{left,right}
+     stay UNDECLARED on purpose — see the comments at their read sites in
+     OrigamToolbar.vue. */
+  --origam-toolbar---padding-inline: var(--origam-space---4);
+  --origam-toolbar---btn-background-color: rgba(0, 0, 0, 0);
+  --origam-toolbar---btn-color: currentColor;
+  --origam-toolbar---btn-border-radius: var(--origam-radius---md);
+  --origam-toolbar__wrapper---gap: var(--origam-space---3);
+  --origam-toolbar__title---color: currentColor;
   --origam-app---background-color: var(--origam-color__surface---default);
   --origam-app---color: var(--origam-color__text---primary);
   --origam-app---min-height: 100vh;
@@ -1646,6 +1665,12 @@
   --origam-pagination---input-width: var(--origam-space---10);
   --origam-pagination---input-padding-inline: var(--origam-space---2);
   --origam-pagination---label-gap: var(--origam-space---2);
+  /* Pagination — #596. rgba(0, 0, 0, 0) is the computed equivalent of the
+     `transparent` literal the SCSS already fell back to for the active item's
+     border, so nothing moves on screen. The three other --item--is-active
+     channels and --origam-pagination---color-hover stay UNDECLARED on purpose
+     — see the comments at their read sites in OrigamPagination.vue. */
+  --origam-pagination__item--is-active---border-color: rgba(0, 0, 0, 0);
   --origam-table---background-color: var(--origam-color__surface---default);
   --origam-table---color: var(--origam-color__text---primary);
   --origam-table---font-size: var(--origam-font__size---md);
@@ -1724,7 +1749,7 @@
   --origam-data-table---width: 100%;
   --origam-data-table---border-collapse: separate;
   --origam-data-table---border-spacing: 0;
-  --origam-data-table__loading---opacity: var(--origam-opacity---50);
+  --origam-data-table--loading---opacity: var(--origam-opacity---50);
   --origam-data-table__header---background-color: var(--origam-color__surface---raised);
   --origam-data-table__header---color: var(--origam-color__text---primary);
   --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -1748,11 +1773,11 @@
   --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
   --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
   --origam-data-table__row---mobile-column-min-height: 52px;
-  --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
-  --origam-data-table__cell---fixed-z-index: 1;
-  --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
-  --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
   --origam-data-table__cell---last-fixed-border-right-style: solid;
+  --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
+  --origam-data-table-cell--fixed---z-index: 1;
+  --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
+  --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
   --origam-data-table__footer---background-color: var(--origam-color__surface---default);
   --origam-data-table__footer---color: var(--origam-color__text---primary);
   --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -1767,14 +1792,15 @@
   --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
   --origam-data-table__footer--info---justify-content: flex-end;
   --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
-  --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
-  --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
-  --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
-  --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
-  --origam-data-table__empty---color: var(--origam-color__text---secondary);
-  --origam-data-table__empty---text-align: center;
-  --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
-  --origam-data-table__sortable---cursor: pointer;
+  --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
+  --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
+  --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
+  --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
+  --origam-data-table-rows--no-data---text-align: center;
+  --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
+  --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
+  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
+  --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
   --origam-list---background: var(--origam-color__surface---default);
@@ -2406,6 +2432,16 @@
   --origam-grid---gap: var(--origam-grid---gap-md);
   --origam-grid---gap-lg: var(--origam-space---6);
   --origam-grid---gap-xl: var(--origam-space---8);
+  --origam-grid---template-columns: none;
+  --origam-grid---template-rows: none;
+  --origam-grid---template-areas: none;
+  --origam-grid---auto-flow: row;
+  --origam-grid---auto-columns: auto;
+  --origam-grid---auto-rows: auto;
+  --origam-grid---align-items: stretch;
+  --origam-grid---justify-items: stretch;
+  --origam-grid---align-content: normal;
+  --origam-grid---justify-content: normal;
   --origam-skeleton---background-color: var(--origam-color__surface---overlay);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -2527,6 +2563,32 @@
   --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
   --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
   --origam-tabs__indicator---height: var(--origam-border__width---2);
+  /* Tabs — #596. Each value is exactly the literal (or token reference) the
+     component SCSS already fell back to, so nothing moves on screen: the
+     variant (--default / --pills / --underline) and item-state channels were
+     simply never declared, so every theme edit to them was a no-op.
+     --item--disabled---color and --item--hover---background-color keep their
+     legacy hardcoded rgba(0, 0, 0, …) — that is what the DS renders today in
+     BOTH themes, and swapping them for a semantic token would move the dark
+     rendering, which is a design decision and not a token-wiring one.
+     Declaring them here is what finally lets a theme fix that. */
+  --origam-tabs--default---border-block-end-width: var(--origam-border__width---thin);
+  --origam-tabs--default---border-block-end-color: var(--origam-color__border---subtle);
+  --origam-tabs--underline---border-block-end-width: var(--origam-border__width---thin);
+  --origam-tabs--underline---border-block-end-color: var(--origam-color__border---subtle);
+  --origam-tabs--pills---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs--pills---gap: var(--origam-space---2);
+  --origam-tabs--pills---padding: var(--origam-space---1);
+  --origam-tabs__item--hover---color: currentColor;
+  --origam-tabs__item--hover---background-color: rgba(0, 0, 0, 0.04);
+  --origam-tabs__item--active---color: currentColor;
+  --origam-tabs__item--active---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item--active---font-weight: var(--origam-font__weight---semibold);
+  --origam-tabs__item--disabled---color: rgba(0, 0, 0, 0.38);
+  --origam-tabs__item--disabled---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item--focus---outline-color: currentColor;
+  --origam-tabs__item--pills--active---background-color: var(--origam-color__action--primary---bg);
+  --origam-tabs__item--pills--active---color: var(--origam-color__action--primary---fg);
   --origam-tab-panels__panel---padding-block: var(--origam-space---4);
   --origam-tab-panels__panel---padding-inline: var(--origam-space---0);
   --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);
@@ -3224,6 +3286,13 @@
     --origam-btn---opacity-disabled: var(--origam-opacity---50);
     --origam-btn---opacity-plain: var(--origam-opacity---70);
     --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
+    --origam-btn---overlay-opacity-active: 0.2;
+    --origam-btn---overlay-opacity-active-hover: 0.28;
+    --origam-btn--loader-skeleton---min-width: 96px;
+    --origam-btn--loader-skeleton---min-height: 36px;
+    --origam-btn__progress---linear-height: 3px;
+    --origam-btn__progress---linear-position: 0px;
+    --origam-btn__progress---linear-position-top: auto;
     --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
     --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
     --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -3823,6 +3892,18 @@
     --origam-toolbar__append---flex-basis: auto;
     --origam-toolbar__append---margin-inline-start: auto;
     --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
+    /* Toolbar + AppBar — #596. Same rule: every value is the literal the SCSS
+       already fell back to, so nothing moves on screen.
+       --origam-toolbar---btn-background-color-{hover,active},
+       --origam-appbar---backdrop-filter and --origam-layout---position-{left,right}
+       stay UNDECLARED on purpose — see the comments at their read sites in
+       OrigamToolbar.vue. */
+    --origam-toolbar---padding-inline: var(--origam-space---4);
+    --origam-toolbar---btn-background-color: rgba(0, 0, 0, 0);
+    --origam-toolbar---btn-color: currentColor;
+    --origam-toolbar---btn-border-radius: var(--origam-radius---md);
+    --origam-toolbar__wrapper---gap: var(--origam-space---3);
+    --origam-toolbar__title---color: currentColor;
     --origam-app---background-color: var(--origam-color__surface---default);
     --origam-app---color: var(--origam-color__text---primary);
     --origam-app---min-height: 100vh;
@@ -4546,6 +4627,12 @@
     --origam-pagination---input-width: var(--origam-space---10);
     --origam-pagination---input-padding-inline: var(--origam-space---2);
     --origam-pagination---label-gap: var(--origam-space---2);
+    /* Pagination — #596. rgba(0, 0, 0, 0) is the computed equivalent of the
+       `transparent` literal the SCSS already fell back to for the active item's
+       border, so nothing moves on screen. The three other --item--is-active
+       channels and --origam-pagination---color-hover stay UNDECLARED on purpose
+       — see the comments at their read sites in OrigamPagination.vue. */
+    --origam-pagination__item--is-active---border-color: rgba(0, 0, 0, 0);
     --origam-table---background-color: var(--origam-color__surface---default);
     --origam-table---color: var(--origam-color__text---primary);
     --origam-table---font-size: var(--origam-font__size---md);
@@ -4624,7 +4711,7 @@
     --origam-data-table---width: 100%;
     --origam-data-table---border-collapse: separate;
     --origam-data-table---border-spacing: 0;
-    --origam-data-table__loading---opacity: var(--origam-opacity---50);
+    --origam-data-table--loading---opacity: var(--origam-opacity---50);
     --origam-data-table__header---background-color: var(--origam-color__surface---raised);
     --origam-data-table__header---color: var(--origam-color__text---primary);
     --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -4648,11 +4735,11 @@
     --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
     --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
     --origam-data-table__row---mobile-column-min-height: 52px;
-    --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
-    --origam-data-table__cell---fixed-z-index: 1;
-    --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
-    --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
     --origam-data-table__cell---last-fixed-border-right-style: solid;
+    --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
+    --origam-data-table-cell--fixed---z-index: 1;
+    --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
+    --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
     --origam-data-table__footer---background-color: var(--origam-color__surface---default);
     --origam-data-table__footer---color: var(--origam-color__text---primary);
     --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -4667,14 +4754,15 @@
     --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
     --origam-data-table__footer--info---justify-content: flex-end;
     --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
-    --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
-    --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
-    --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
-    --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
-    --origam-data-table__empty---color: var(--origam-color__text---secondary);
-    --origam-data-table__empty---text-align: center;
-    --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
-    --origam-data-table__sortable---cursor: pointer;
+    --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
+    --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
+    --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
+    --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
+    --origam-data-table-rows--no-data---text-align: center;
+    --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
+    --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
+    --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
+    --origam-data-table-header-cell--sortable---cursor: pointer;
     --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
     --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
     --origam-list---background: var(--origam-color__surface---default);
@@ -5305,6 +5393,16 @@
     --origam-grid---gap: var(--origam-grid---gap-md);
     --origam-grid---gap-lg: var(--origam-space---6);
     --origam-grid---gap-xl: var(--origam-space---8);
+    --origam-grid---template-columns: none;
+    --origam-grid---template-rows: none;
+    --origam-grid---template-areas: none;
+    --origam-grid---auto-flow: row;
+    --origam-grid---auto-columns: auto;
+    --origam-grid---auto-rows: auto;
+    --origam-grid---align-items: stretch;
+    --origam-grid---justify-items: stretch;
+    --origam-grid---align-content: normal;
+    --origam-grid---justify-content: normal;
     --origam-skeleton---background-color: var(--origam-color__surface---overlay);
     --origam-skeleton---border-radius: var(--origam-radius---sm);
     --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -5426,6 +5524,32 @@
     --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
     --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
     --origam-tabs__indicator---height: var(--origam-border__width---2);
+    /* Tabs — #596. Each value is exactly the literal (or token reference) the
+       component SCSS already fell back to, so nothing moves on screen: the
+       variant (--default / --pills / --underline) and item-state channels were
+       simply never declared, so every theme edit to them was a no-op.
+       --item--disabled---color and --item--hover---background-color keep their
+       legacy hardcoded rgba(0, 0, 0, …) — that is what the DS renders today in
+       BOTH themes, and swapping them for a semantic token would move the dark
+       rendering, which is a design decision and not a token-wiring one.
+       Declaring them here is what finally lets a theme fix that. */
+    --origam-tabs--default---border-block-end-width: var(--origam-border__width---thin);
+    --origam-tabs--default---border-block-end-color: var(--origam-color__border---subtle);
+    --origam-tabs--underline---border-block-end-width: var(--origam-border__width---thin);
+    --origam-tabs--underline---border-block-end-color: var(--origam-color__border---subtle);
+    --origam-tabs--pills---background-color: rgba(0, 0, 0, 0);
+    --origam-tabs--pills---gap: var(--origam-space---2);
+    --origam-tabs--pills---padding: var(--origam-space---1);
+    --origam-tabs__item--hover---color: currentColor;
+    --origam-tabs__item--hover---background-color: rgba(0, 0, 0, 0.04);
+    --origam-tabs__item--active---color: currentColor;
+    --origam-tabs__item--active---background-color: rgba(0, 0, 0, 0);
+    --origam-tabs__item--active---font-weight: var(--origam-font__weight---semibold);
+    --origam-tabs__item--disabled---color: rgba(0, 0, 0, 0.38);
+    --origam-tabs__item--disabled---background-color: rgba(0, 0, 0, 0);
+    --origam-tabs__item--focus---outline-color: currentColor;
+    --origam-tabs__item--pills--active---background-color: var(--origam-color__action--primary---bg);
+    --origam-tabs__item--pills--active---color: var(--origam-color__action--primary---fg);
     --origam-tab-panels__panel---padding-block: var(--origam-space---4);
     --origam-tab-panels__panel---padding-inline: var(--origam-space---0);
     --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);

package/dist/src/assets/css/tokens/light.css

@@ -226,6 +226,13 @@
   --origam-btn---opacity-disabled: var(--origam-opacity---50);
   --origam-btn---opacity-plain: var(--origam-opacity---70);
   --origam-btn---overlay-opacity-hover: var(--origam-opacity---12);
+  --origam-btn---overlay-opacity-active: 0.2;
+  --origam-btn---overlay-opacity-active-hover: 0.28;
+  --origam-btn--loader-skeleton---min-width: 96px;
+  --origam-btn--loader-skeleton---min-height: 36px;
+  --origam-btn__progress---linear-height: 3px;
+  --origam-btn__progress---linear-position: 0px;
+  --origam-btn__progress---linear-position-top: auto;
   --origam-btn---box-shadow-elevated: var(--origam-shadow---md);
   --origam-btn---background-color-tonal: var(--origam-color__surface---overlay);
   --origam-btn---background-color-tonal-active: var(--origam-color__surface---raised);
@@ -825,6 +832,18 @@
   --origam-toolbar__append---flex-basis: auto;
   --origam-toolbar__append---margin-inline-start: auto;
   --origam-toolbar__append---margin-inline-end: var(--origam-space---2);
+  /* Toolbar + AppBar — #596. Same rule: every value is the literal the SCSS
+     already fell back to, so nothing moves on screen.
+     --origam-toolbar---btn-background-color-{hover,active},
+     --origam-appbar---backdrop-filter and --origam-layout---position-{left,right}
+     stay UNDECLARED on purpose — see the comments at their read sites in
+     OrigamToolbar.vue. */
+  --origam-toolbar---padding-inline: var(--origam-space---4);
+  --origam-toolbar---btn-background-color: rgba(0, 0, 0, 0);
+  --origam-toolbar---btn-color: currentColor;
+  --origam-toolbar---btn-border-radius: var(--origam-radius---md);
+  --origam-toolbar__wrapper---gap: var(--origam-space---3);
+  --origam-toolbar__title---color: currentColor;
   --origam-app---background-color: var(--origam-color__surface---default);
   --origam-app---color: var(--origam-color__text---primary);
   --origam-app---min-height: 100vh;
@@ -1548,6 +1567,12 @@
   --origam-pagination---input-width: var(--origam-space---10);
   --origam-pagination---input-padding-inline: var(--origam-space---2);
   --origam-pagination---label-gap: var(--origam-space---2);
+  /* Pagination — #596. rgba(0, 0, 0, 0) is the computed equivalent of the
+     `transparent` literal the SCSS already fell back to for the active item's
+     border, so nothing moves on screen. The three other --item--is-active
+     channels and --origam-pagination---color-hover stay UNDECLARED on purpose
+     — see the comments at their read sites in OrigamPagination.vue. */
+  --origam-pagination__item--is-active---border-color: rgba(0, 0, 0, 0);
   --origam-table---background-color: var(--origam-color__surface---default);
   --origam-table---color: var(--origam-color__text---primary);
   --origam-table---font-size: var(--origam-font__size---md);
@@ -1628,7 +1653,7 @@
   --origam-data-table---width: 100%;
   --origam-data-table---border-collapse: separate;
   --origam-data-table---border-spacing: 0;
-  --origam-data-table__loading---opacity: var(--origam-opacity---50);
+  --origam-data-table--loading---opacity: var(--origam-opacity---50);
   --origam-data-table__header---background-color: var(--origam-color__surface---raised);
   --origam-data-table__header---color: var(--origam-color__text---primary);
   --origam-data-table__header---sort-icon-color: var(--origam-color__text---primary);
@@ -1652,11 +1677,11 @@
   --origam-data-table__row---transition-easing: var(--origam-motion__easing---standard);
   --origam-data-table__row---column-title-font-weight: var(--origam-font__weight---medium);
   --origam-data-table__row---mobile-column-min-height: 52px;
-  --origam-data-table__cell---fixed-background-color: var(--origam-color__surface---raised);
-  --origam-data-table__cell---fixed-z-index: 1;
-  --origam-data-table__cell---last-fixed-border-right-color: var(--origam-color__border---subtle);
-  --origam-data-table__cell---last-fixed-border-right-width: var(--origam-border__width---thin);
   --origam-data-table__cell---last-fixed-border-right-style: solid;
+  --origam-data-table-cell--fixed---background: var(--origam-color__surface---raised);
+  --origam-data-table-cell--fixed---z-index: 1;
+  --origam-data-table-cell--last-fixed---border-right-color: var(--origam-color__border---subtle);
+  --origam-data-table-cell--last-fixed---border-right-width: var(--origam-border__width---thin);
   --origam-data-table__footer---background-color: var(--origam-color__surface---default);
   --origam-data-table__footer---color: var(--origam-color__text---primary);
   --origam-data-table__footer---padding-block: var(--origam-space---2);
@@ -1671,14 +1696,15 @@
   --origam-data-table__footer--info---padding-inline: var(--origam-space---4);
   --origam-data-table__footer--info---justify-content: flex-end;
   --origam-data-table__footer---pagination-margin-inline-start: var(--origam-space---4);
-  --origam-data-table---group-header-row-background-color: var(--origam-color__surface---overlay);
-  --origam-data-table---group-header-row-color: var(--origam-color__text---primary);
-  --origam-data-table---group-header-row-font-weight: var(--origam-font__weight---medium);
-  --origam-data-table---group-header-row-column-padding-inline-start-factor: var(--origam-space---4);
-  --origam-data-table__empty---color: var(--origam-color__text---secondary);
-  --origam-data-table__empty---text-align: center;
-  --origam-data-table---loading-row-color: var(--origam-color__text---secondary);
-  --origam-data-table__sortable---cursor: pointer;
+  --origam-data-table-group-header-row---background-color: var(--origam-color__surface---overlay);
+  --origam-data-table-group-header-row---color: var(--origam-color__text---primary);
+  --origam-data-table-group-header-row---font-weight: var(--origam-font__weight---medium);
+  --origam-data-table-group-header-row__column---padding-inline-start-factor: var(--origam-space---4);
+  --origam-data-table-rows--no-data---text-align: center;
+  --origam-data-table-rows--no-data---color: var(--origam-color__text---secondary);
+  --origam-data-table-rows--loading---color: var(--origam-color__text---secondary);
+  --origam-data-table-rows--skeleton---cell-padding: 4px 8px;
+  --origam-data-table-header-cell--sortable---cursor: pointer;
   --origam-data-table__sortable---icon-color: var(--origam-color__text---primary);
   --origam-data-table__sortable---icon-color-active: var(--origam-color__text---primary);
   --origam-list---background: var(--origam-color__surface---default);
@@ -2322,6 +2348,16 @@
   --origam-grid---gap: var(--origam-grid---gap-md);
   --origam-grid---gap-lg: var(--origam-space---6);
   --origam-grid---gap-xl: var(--origam-space---8);
+  --origam-grid---template-columns: none;
+  --origam-grid---template-rows: none;
+  --origam-grid---template-areas: none;
+  --origam-grid---auto-flow: row;
+  --origam-grid---auto-columns: auto;
+  --origam-grid---auto-rows: auto;
+  --origam-grid---align-items: stretch;
+  --origam-grid---justify-items: stretch;
+  --origam-grid---align-content: normal;
+  --origam-grid---justify-content: normal;
   --origam-skeleton---background-color: var(--origam-color__surface---overlay);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
@@ -2443,6 +2479,32 @@
   --origam-tabs__item---transition-easing: var(--origam-motion__easing---standard);
   --origam-tabs__indicator---color: var(--origam-color__action--primary---bg);
   --origam-tabs__indicator---height: var(--origam-border__width---2);
+  /* Tabs — #596. Each value is exactly the literal (or token reference) the
+     component SCSS already fell back to, so nothing moves on screen: the
+     variant (--default / --pills / --underline) and item-state channels were
+     simply never declared, so every theme edit to them was a no-op.
+     --item--disabled---color and --item--hover---background-color keep their
+     legacy hardcoded rgba(0, 0, 0, …) — that is what the DS renders today in
+     BOTH themes, and swapping them for a semantic token would move the dark
+     rendering, which is a design decision and not a token-wiring one.
+     Declaring them here is what finally lets a theme fix that. */
+  --origam-tabs--default---border-block-end-width: var(--origam-border__width---thin);
+  --origam-tabs--default---border-block-end-color: var(--origam-color__border---subtle);
+  --origam-tabs--underline---border-block-end-width: var(--origam-border__width---thin);
+  --origam-tabs--underline---border-block-end-color: var(--origam-color__border---subtle);
+  --origam-tabs--pills---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs--pills---gap: var(--origam-space---2);
+  --origam-tabs--pills---padding: var(--origam-space---1);
+  --origam-tabs__item--hover---color: currentColor;
+  --origam-tabs__item--hover---background-color: rgba(0, 0, 0, 0.04);
+  --origam-tabs__item--active---color: currentColor;
+  --origam-tabs__item--active---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item--active---font-weight: var(--origam-font__weight---semibold);
+  --origam-tabs__item--disabled---color: rgba(0, 0, 0, 0.38);
+  --origam-tabs__item--disabled---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item--focus---outline-color: currentColor;
+  --origam-tabs__item--pills--active---background-color: var(--origam-color__action--primary---bg);
+  --origam-tabs__item--pills--active---color: var(--origam-color__action--primary---fg);
   --origam-tab-panels__panel---padding-block: var(--origam-space---4);
   --origam-tab-panels__panel---padding-inline: var(--origam-space---0);
   --origam-tabs__panel---transition-duration: var(--origam-motion__duration---fast);