origam 2.18.17 → 2.18.18

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

@@ -930,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;
@@ -1653,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);
@@ -2545,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);
@@ -3848,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;
@@ -4571,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);
@@ -5462,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

@@ -832,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;
@@ -1555,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);
@@ -2461,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);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -930,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;
@@ -1653,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);
@@ -2545,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);
@@ -3848,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;
@@ -4571,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);
@@ -5462,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/scss/tokens/_light.scss

@@ -832,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;
@@ -1555,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);
@@ -2461,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);

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -629,12 +629,25 @@ defineExpose({
 		}
 
 		&--colored {
+			// ⛔ #596 — these two READ the `--primary` state tokens, not a
+			// `-colored` suffix. The sheets have always declared
+			// `--origam-pagination--primary---{background-color,color}` with
+			// exactly the values below as their value, while this block read
+			// `--origam-pagination---{background-color,color}-colored` — two
+			// grammars whose names never coincide, so the declaration was
+			// dormant and the fallback did all the work (the #550 defect
+			// shape). Renaming the READ side rather than duplicating the
+			// declaration keeps ONE grammar — `--{state}---{property}` — and
+			// matches `--origam-pagination--primary---box-shadow` three lines
+			// below, which this file already reads correctly. Rendering is
+			// unchanged: declared value == the fallback it replaces, in light
+			// and in dark.
 			--bg-base: var(
-				--origam-pagination---background-color-colored,
+				--origam-pagination--primary---background-color,
 				var(--origam-color__action--primary---bg)
 			);
 			--fg-base: var(
-				--origam-pagination---color-colored,
+				--origam-pagination--primary---color,
 				var(--origam-color__action--primary---fg)
 			);
 
@@ -651,6 +664,20 @@ defineExpose({
 
 		// Hover state — derived: 20 % darker than --bg-base.
 		// Consumer can override via --origam-pagination---background-color-hover.
+		//
+		// ⛔ #596 — `--origam-pagination---color-hover` STAYS UNDECLARED in the
+		// token sheets, deliberately. Its fallback is `var(--fg-base)`, and
+		// `--fg-base` is synthesised PER INSTANCE on `.origam-pagination`
+		// itself (line ~800, and repointed by `&--colored`). A custom
+		// property's computed value is its specified value with `var()`
+		// ALREADY substituted ON THE DECLARING ELEMENT — so a `:root`
+		// declaration of `var(--fg-base)` would be substituted where
+		// `--fg-base` does not exist, become guaranteed-invalid, and every
+		// read would fall straight back to the inline fallback again. The
+		// rendering would be byte-identical and the guard would go green on a
+		// channel that does nothing: a lie, not a fix. It therefore stays in
+		// `baseline/token-var-channels.json` as a known false positive — the
+		// guard compares NAMES, not fallback chains.
 		:deep(.origam-btn:hover:not(.origam-btn--active)) {
 			--origam-btn---background-color: var(
 				--origam-pagination---background-color-hover,
@@ -683,6 +710,41 @@ defineExpose({
 
 		// Active state — derived: 30 % darker than --bg-base.
 		// Consumer can override via the matching `is-active` vars.
+		//
+		// ⛔ #596 — of the four `--item--is-active---*` channels read below,
+		// only `---border-color` is declared in the token sheets (its fallback
+		// is the plain literal `transparent`). The other three STAY UNDECLARED
+		// on purpose, each for a measured reason:
+		//
+		//   • `---color` falls back to `var(--fg-base)` — synthesised per
+		//     instance, so a `:root` declaration is guaranteed-invalid and
+		//     inert (same mechanism as the hover block above). Worse, the
+		//     sheets carry a DORMANT near-twin under the other grammar,
+		//     `--origam-pagination__item---active-color:
+		//     var(--origam-color__action--primary---fg)` = WHITE. "Renaming"
+		//     that declaration onto this read — the #550 reflex — would paint
+		//     the active page label white on the untinted (transparent /
+		//     white) surface of uncolored mode: invisible. Exactly the
+		//     BottomNav trap: a name that reads right and inverts the render.
+		//
+		//   • `---background-color` is read TWICE with two DIFFERENT fallbacks
+		//     — `color-mix(… var(--bg-base), black 30%)` here, and
+		//     `var(--origam-color__neutral---200, #e6e6e6)` on the overlay
+		//     below. No single declaration preserves both, and its dormant
+		//     twin `--origam-pagination__item---active-background-color` is
+		//     `action--primary---bg`, which matches neither. The overlay value
+		//     is the one a user-reported defect was fixed to (652a770e, then
+		//     cb10d654) — re-pointing it is a design decision, not a wiring
+		//     one.
+		//
+		//   • `---active-overlay-opacity` is likewise read twice, with `1` on
+		//     the uncolored branch and `0` on the colored one — opposite
+		//     defaults by design, so no root value can hold both (its dormant
+		//     twin says `0.12`, which is neither).
+		//
+		// All three stay in `baseline/token-var-channels.json`. A theme can
+		// still set them: an override lands on an element inside the
+		// component, where `--bg-base` / `--fg-base` DO resolve.
 		&__item--is-active :deep(.origam-btn) {
 			--origam-btn---background-color: var(
 				--origam-pagination__item--is-active---background-color,

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -229,6 +229,22 @@ defineExpose({
 		// the toolbar's own gutter (16 px) with whatever the layout
 		// reserved on each side (defaults to 0 when no layout item is
 		// present, so the standalone case still gets the 16 px gutter).
+		//
+		// ⛔ #596 — `--origam-layout---position-{left,right}` STAY UNDECLARED
+		// in the token sheets, deliberately. They are not theme tokens: they
+		// are runtime MEASUREMENTS, written as INLINE STYLES on the layout
+		// root by `useCreateLayout`'s `layoutStyles` (and on main by
+		// `mainStyles`) from `mainRect`, via `LAYOUT_POSITION_VARS` — see
+		// `composables/Commons/createLayout.composable.ts`. Descendants
+		// inherit them from that element, which is how this toolbar receives
+		// them. Declaring them at `:root` would publish a themeable channel
+		// that the layout's inline style overrides on every real instance —
+		// dead by construction — and `LAYOUT_DEFAULT_OFFSET` already is the
+		// `0px` written below. The guard flags them only because it compares
+		// names against the SHEETS; `OrigamMain` reads the same four vars and
+		// is absent from the baseline solely because it declares its own
+		// `0px` block locally. They stay in
+		// `baseline/token-var-channels.json` as known false positives.
 		padding-inline-start: calc(
 			var(--origam-toolbar---padding-inline, 16px) +
 			var(--origam-layout---position-left, 0px)
@@ -267,6 +283,28 @@ defineExpose({
 		border-end-start-radius: var(--origam-toolbar---border-end-start-radius, 0);
 
 		background: var(--origam-toolbar---background);
+		// ⛔ #596 — `--origam-appbar---backdrop-filter` STAYS UNDECLARED in the
+		// token sheets, and that is a NAMING decision left open on purpose,
+		// not an oversight. Measured: the DS's canonical AppBar family is
+		// spelt with a hyphen — `--origam-app-bar---*`, 11 tokens declared in
+		// all four sheets and listed in `TTokenName`, every one of them
+		// DORMANT because `OrigamAppBar.vue` contains no `var(--origam-…)` at
+		// all and delegates its whole surface to this component. This read
+		// uses a THIRD spelling, `--origam-appbar---`, which is also the
+		// namespace `packages/marketing` adopted locally (7 themes set
+		// `--origam-appbar---bg`, read by `marketing/src/layouts/default.vue`;
+		// 5 of them additionally set `--origam-appbar---backdrop-filter`, and
+		// it does reach this line today).
+		// Declaring `none` here would engrave a SECOND grammar for one
+		// component into the public token surface, three lines from the
+		// `--origam-app-bar---*` block. The two defensible renames —
+		// `--origam-app-bar---backdrop-filter` (matches the authoring intent
+		// and marketing's naming) or `--origam-toolbar---backdrop-filter`
+		// (matches the component that actually reads it, per the
+		// `--origam-{component}---{property}` rule) — both break the 5
+		// marketing themes unless they move in the same commit, i.e. a
+		// cross-package decision. Left in `baseline/token-var-channels.json`
+		// until that call is made.
 		backdrop-filter: var(--origam-appbar---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-appbar---backdrop-filter, none);
 		box-shadow: var(--origam-toolbar---box-shadow);
@@ -471,6 +509,26 @@ defineExpose({
 		//
 		// Shape: rounded SQUARE (8 px), overrides Btn's default
 		// `&--icon { border-radius: 50% }`.
+		//
+		// ⛔ #596 — the two DERIVED channels,
+		// `--origam-toolbar---btn-background-color-{hover,active}`, STAY
+		// UNDECLARED in the token sheets. Their fallbacks are
+		// `color-mix(in srgb, var(--btn-bg-base), black {20,30}%)`, and
+		// `--btn-bg-base` is synthesised PER INSTANCE at the top of this block
+		// from `--origam-toolbar---btn-background-color` (which #596 DID
+		// declare, its fallback being the plain literal `transparent`). A
+		// custom property's computed value is its specified value with `var()`
+		// already substituted ON THE DECLARING ELEMENT, so a `:root`
+		// declaration of that `color-mix()` would be substituted where
+		// `--btn-bg-base` does not exist → guaranteed-invalid → every read
+		// falls back to the inline fallback anyway. Identical rendering, green
+		// guard, dead channel: a lie, not a fix. Freezing them to a static
+		// colour instead would be worse — it would sever the derivation from
+		// whatever base colour the consumer sets, which is the whole point of
+		// the block above. They stay in `baseline/token-var-channels.json` as
+		// known false positives; the guard compares NAMES, not fallback
+		// chains. A theme overriding them on the toolbar element itself (or
+		// deeper) still works, because `--btn-bg-base` resolves there.
 		:deep(.origam-btn:not(:hover):not(.origam-btn--active)) {
 			--origam-btn---background-color: var(--btn-bg-base);
 			--origam-btn---color: var(--btn-fg-base);