origam 2.18.15 → 2.18.17

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

@@ -139,6 +139,55 @@
   --origam-bracket-match--final---background-color: var(--origam-color__surface---raised);
   --origam-bracket-match--final---border-color: var(--origam-color__action--primary---bg);
   --origam-bracket-match--final---box-shadow: 0 2px 8px color-mix(in srgb, var(--origam-color__action--primary---bg) 24%, transparent);
+  /* Bracket — #592. Each value is the literal (or token reference) the
+     component SCSS already fell back to, so nothing moves on screen; what was
+     a component-local default becomes a real, per-mode, typed token channel.
+     DELIBERATELY ABSENT — the per-side border longhands
+     (---border-{top,right,bottom,left}-{width,color}, ---border-{block,inline}-width,
+     the four corner radii) and ---bracket-connector---stroke-color{,-winner}:
+     each falls back to the general knob declared here, and declaring a rung
+     would freeze that cascade at its root value. Measured in Chromium: setting
+     only ---border-width moves all four sides. See the notes at the read sites. */
+  --origam-bracket---background-color: transparent;
+  --origam-bracket---color: currentColor;
+  --origam-bracket-connector---stroke-dasharray: none;
+  --origam-bracket-connector---stroke-linecap: butt;
+  --origam-bracket-double---section-gap: 40px;
+  --origam-bracket-double-label---color: var(--origam-color__text---primary);
+  --origam-bracket-double-label---font-size: 0.75rem;
+  --origam-bracket-double-label---font-weight: 700;
+  --origam-bracket-double-label---letter-spacing: 0.08em;
+  --origam-bracket-double-label---margin-block-end: 12px;
+  --origam-bracket-double-label---text-transform: uppercase;
+  --origam-bracket-match---background-color: var(--origam-color__surface---default);
+  --origam-bracket-match---border-color: var(--origam-color__border---subtle);
+  --origam-bracket-match---border-width: 1px;
+  --origam-bracket-match---box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --origam-bracket-match--hover---border-color: var(--origam-color__border---default);
+  --origam-bracket-round-robin---cell-background: var(--origam-color__surface---default);
+  --origam-bracket-round-robin---cell-size: 56px;
+  --origam-bracket-round-robin---header-color: var(--origam-color__text---secondary);
+  --origam-bracket-round---match-gap: 24px;
+  --origam-bracket-round-title---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor---background-color: transparent;
+  --origam-bracket-competitor---color: currentColor;
+  --origam-bracket-competitor--forfeit---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor--hover---background-color: rgba(0, 0, 0, 0.04);
+  --origam-bracket-competitor--loser---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor--pending---color: var(--origam-color__text---secondary);
+  --origam-bracket-competitor--pending---font-style: italic;
+  --origam-bracket-competitor--winner---background-color: rgba(25, 118, 210, 0.08);
+  --origam-bracket-competitor--winner---color: currentColor;
+  --origam-bracket-competitor--winner---font-weight: 600;
+  --origam-bracket-seed---color: var(--origam-color__text---secondary);
+  --origam-bracket-score---color: currentColor;
+  --origam-bracket-advantage---background-color: var(--origam-color__action--primary---bg);
+  --origam-bracket-advantage---border-radius: 9999px;
+  --origam-bracket-advantage---color: var(--origam-color__action--primary---fg);
+  --origam-bracket-advantage---font-size: 0.6875rem;
+  --origam-bracket-advantage---font-weight: 700;
+  --origam-bracket-advantage---padding-block: 1px;
+  --origam-bracket-advantage---padding-inline: 6px;
   --origam-btn---background-color: var(--origam-color__action--secondary---bg);
   --origam-btn---color: var(--origam-color__action--secondary---fg);
   --origam-btn---background-color-hover: var(--origam-color__action--secondary---bgHover);
@@ -177,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);
@@ -259,6 +315,21 @@
   --origam-card__overlay---transition-duration: var(--origam-motion__duration---medium);
   --origam-card__overlay---transition-timing-function: var(--origam-motion__easing---standard);
   --origam-card__underlay---position: absolute;
+  /* Card — #593. Each value is the literal the component SCSS already fell back
+     to, so nothing moves on screen. --origam-card--loading---min-{width,height}
+     replace the ungrammatical flat --origam-card---loading-min-* the SCSS used
+     to read ("--loading" is a state modifier, so the grammar is the
+     --state---property form, not a flat suffix).
+     --origam-card__loader---overlay-background stays undeclared on purpose —
+     see the comment at its read site in OrigamCard.vue. */
+  --origam-card--loading---min-width: 240px;
+  --origam-card--loading---min-height: 120px;
+  --origam-card__asset---aspect-ratio: 16 / 9;
+  --origam-card__loader---min-height: 4px;
+  --origam-card__loader---min-height-skeleton: 200px;
+  --origam-card__loader---z-index: 3;
+  --origam-card__progress---linear-height: 4px;
+  --origam-card__progress---circular-margin: 24px auto;
   --origam-card__before---border-radius: inherit;
   --origam-card__before---bottom: var(--origam-space---0);
   --origam-card__before---content: "";
@@ -1564,7 +1635,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);
@@ -1588,11 +1659,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);
@@ -1607,14 +1678,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);
@@ -2258,6 +2330,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);
@@ -2787,6 +2869,98 @@
   --origam-chart-streamgraph__ribbon---opacity: 0.82;
   --origam-chart-streamgraph__axis-label---font-size: 0.6875rem;
   --origam-chart-streamgraph__axis-label---fill: #6b7280;
+  --origam-chart__annotation---font-size: 0.6875rem;
+  --origam-chart__annotation---font-weight: 600;
+  --origam-chart__annotation-callout---color: #ffffff;
+  --origam-chart__annotation-callout---font-size: 0.6875rem;
+  --origam-chart__annotation-callout---font-weight: 600;
+  --origam-chart__axis---stroke-width: 1;
+  --origam-chart__axis-line---color: var(--origam-color__border---subtle);
+  --origam-chart__body---min-width: 200px;
+  --origam-chart__box---fill-opacity: 0.25;
+  --origam-chart__box---stroke-width: 1.5;
+  --origam-chart__box-cap---stroke-width: 2;
+  --origam-chart__box-median---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__box-median---stroke-width: 2;
+  --origam-chart__box-outlier---fill-opacity: 0.7;
+  --origam-chart__box-whisker---stroke-width: 1.5;
+  --origam-chart__breadcrumb---color: var(--origam-color__text---secondary);
+  --origam-chart__breadcrumb---font-size: 0.8125rem;
+  --origam-chart__breadcrumb---gap: 8px;
+  --origam-chart__breadcrumb-back---background-color: transparent;
+  --origam-chart__breadcrumb-back---border-color: var(--origam-color__border---default);
+  --origam-chart__breadcrumb-back---border-radius: 4px;
+  --origam-chart__breadcrumb-back---color: currentColor;
+  --origam-chart__breadcrumb-back---hover-background-color: rgba(0, 0, 0, 0.05);
+  --origam-chart__breadcrumb-current---color: currentColor;
+  --origam-chart__breadcrumb-current---font-weight: 600;
+  --origam-chart__breadcrumb-link---color: var(--origam-color__action--ghost---fg);
+  --origam-chart__bullet-range---opacity: 0.55;
+  --origam-chart__bullet-target---stroke-width: 3;
+  --origam-chart__gauge-label---color: var(--origam-color__text---primary);
+  --origam-chart__gauge-label---font-size: 1.5rem;
+  --origam-chart__gauge-label---font-weight: 700;
+  --origam-chart__gauge-track---color: var(--origam-color__border---subtle);
+  --origam-chart__heatmap---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__heatmap---stroke-width: 0.5;
+  --origam-chart__heatmap-axis-label---color: var(--origam-color__text---secondary);
+  --origam-chart__heatmap-axis-label---font-size: 0.625rem;
+  --origam-chart__heatmap-label---color: #ffffff;
+  --origam-chart__heatmap-label---font-size: 0.5625rem;
+  --origam-chart__heatmap-label---font-weight: 600;
+  --origam-chart__heatmap-legend-label---color: var(--origam-color__text---secondary);
+  --origam-chart__heatmap-legend-label---font-size: 0.625rem;
+  --origam-chart__honeycomb---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__honeycomb---stroke-width: 2;
+  --origam-chart__honeycomb-label---color: #ffffff;
+  --origam-chart__honeycomb-label---font-size: 0.625rem;
+  --origam-chart__honeycomb-label---font-weight: 600;
+  --origam-chart__legend---side-gap: 8px;
+  --origam-chart__map---stroke-width: 1;
+  --origam-chart__map-legend-label---color: var(--origam-color__text---secondary);
+  --origam-chart__map-legend-label---font-size: 0.625rem;
+  --origam-chart-pictorial__axis---color: var(--origam-color__text---secondary);
+  --origam-chart-pictorial__axis---font-size: 0.6875rem;
+  --origam-chart-pictorial__label---color: var(--origam-color__text---primary);
+  --origam-chart-pictorial__label---font-size: 0.6875rem;
+  --origam-chart-pictorial__label---font-weight: 600;
+  --origam-chart__plot-band-label---font-size: 0.6875rem;
+  --origam-chart__plot-band-label---font-weight: 600;
+  --origam-chart__plot-line-label---font-size: 0.6875rem;
+  --origam-chart__plot-line-label---font-weight: 600;
+  --origam-chart__polar-bar---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__polar-bar---stroke-width: 1.5;
+  --origam-chart__polar-bar-label---color: var(--origam-color__text---primary);
+  --origam-chart__polar-bar-label---font-size: 0.6875rem;
+  --origam-chart__polar-bar-label---font-weight: 500;
+  --origam-chart__polar-bar-value-label---color: #ffffff;
+  --origam-chart__polar-bar-value-label---font-size: 0.625rem;
+  --origam-chart__polar-bar-value-label---font-weight: 600;
+  --origam-chart__pyramid---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__pyramid---stroke-width: 2;
+  --origam-chart__pyramid-label---font-size: 0.75rem;
+  --origam-chart__pyramid-label---font-weight: 500;
+  --origam-chart__pyramid-label--inside---color: #ffffff;
+  --origam-chart__pyramid-label--outside---color: var(--origam-color__text---primary);
+  --origam-chart__sankey-label---color: var(--origam-color__text---primary);
+  --origam-chart__sankey-label---font-size: 0.6875rem;
+  --origam-chart__sankey-label---font-weight: 500;
+  --origam-chart__sunburst---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__sunburst---stroke-width: 1.5;
+  --origam-chart__sunburst-label---color: #ffffff;
+  --origam-chart__sunburst-label---font-size: 0.625rem;
+  --origam-chart__sunburst-label---font-weight: 500;
+  --origam-chart__sunburst-label--leader---color: var(--origam-color__text---primary);
+  --origam-chart__sunburst-leader-line---color: var(--origam-color__text---secondary);
+  --origam-chart__sunburst-leader-line---width: 1;
+  --origam-chart__treemap---stroke-color: var(--origam-color__surface---default);
+  --origam-chart__treemap---stroke-width: 2;
+  --origam-chart__treemap-label---color: #ffffff;
+  --origam-chart__treemap-label---font-size: 0.6875rem;
+  --origam-chart__treemap-label---font-weight: 600;
+  --origam-chart__treemap-label--value---color: rgba(255, 255, 255, 0.85);
+  --origam-chart__treemap-label--value---font-size: 0.625rem;
+  --origam-chart__treemap-label--value---font-weight: 400;
   --origam-data-table-header-cell---color: var(--origam-color__text---primary);
   --origam-data-table-header-cell---background: var(--origam-color__surface---raised);
   --origam-data-table-header-cell__content---gap: var(--origam-space---1);

package/dist/src/components/Bracket/OrigamBracket.vue

@@ -821,6 +821,12 @@ defineExpose({
 		}
 
 		&__connector {
+			// ⛔ `---stroke-color` and `---stroke-color-winner` LEFT UNDECLARED (#592):
+			// both fall back to `--origam-bracket-match---border-color`, which #592
+			// declared, so the connector tracks the match box's border by default.
+			// Declaring the stroke tokens at `:root` would substitute that reference
+			// once at root and freeze the link — same mechanism as the long note in
+			// OrigamBracketMatch.vue's border block.
 			stroke: var(--origam-bracket-connector---stroke-color, var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12))));
 			stroke-width: var(--origam-bracket-connector---stroke-width, var(--origam-bracket-match---border-width, 1px));
 			stroke-dasharray: var(--origam-bracket-connector---stroke-dasharray, none);
@@ -848,6 +854,15 @@ defineExpose({
 			gap: 1px;
 		}
 
+		// ⛔ `--origam-bracket-round-robin---header-background` and
+		// `---cell-background-diag` LEFT UNDECLARED (#592): both fall back to
+		// `--origam-color__surface---subtle`, a name no token sheet declares (the DS
+		// has `sunken`, not `subtle`), so the literal `#f5f5f5` is what paints — in
+		// dark mode too. Choosing the replacement is a design decision, not a
+		// rename; see the note in OrigamBracketMatch.vue.
+		//
+		// NOTE also: no Variant of any Bracket story renders the round-robin layout,
+		// so these two channels have never been exercised by a spec either.
 		&__rr-corner {
 			background: var(--origam-bracket-round-robin---header-background, var(--origam-color__surface---subtle, #f5f5f5));
 		}

package/dist/src/components/Bracket/OrigamBracketMatch.vue

@@ -319,6 +319,19 @@ defineExpose({
 		border-color: var(--origam-bracket-match---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
 		border-radius: var(--origam-bracket-match---border-radius, 6px);
 
+		// ⛔ THE 14 PER-SIDE LONGHANDS BELOW ARE LEFT UNDECLARED ON PURPOSE (#592).
+		// Each falls back to the general knob above it (`---border-width`,
+		// `---border-color`, `---border-radius`), which #592 DID declare in the
+		// token sheets. That cascade is the feature: a theme sets the general
+		// token once and all four sides follow — measured in Chromium, setting
+		// only `---border-width: 5px` gives 5px on all four sides.
+		//
+		// Declaring a longhand would destroy it. A custom property is substituted
+		// ON THE ELEMENT THAT DECLARES IT, so a `:root` declaration of
+		// `---border-top-width: var(---border-block-width, var(---border-width, 1px))`
+		// resolves to `1px` AT ROOT and every descendant inherits that literal.
+		// A consumer then setting `---border-width: 3px` on a wrapper would move
+		// the shorthand and nothing else — the four sides would stay pinned at 1px.
 		border-block-width: var(--origam-bracket-match---border-block-width, var(--origam-bracket-match---border-width, 1px));
 		border-inline-width: var(--origam-bracket-match---border-inline-width, var(--origam-bracket-match---border-width, 1px));
 
@@ -421,7 +434,15 @@ defineExpose({
 			cursor: pointer;
 
 			&:hover {
-				background-color: var(--origam-bracket-match--hover---background-color, var(--origam-color__surface---elevated, #fafafa));
+				// ⛔ LEFT UNDECLARED (#592). Its fallback names
+			// `--origam-color__surface---elevated`, which NO token sheet declares —
+			// the DS vocabulary has `raised` and `sunken`, not `elevated`. So the
+			// literal `#fafafa` is what paints, in dark mode too. Declaring this
+			// token means choosing a semantic token on the strength of a name, which
+			// is the mistake #550 recorded on OrigamBottomNav. Pending the
+			// arbitration on the missing `surface---elevated` / `surface---subtle` /
+			// `text---tertiary` names — 13 such reads repo-wide, 5 in this family.
+			background-color: var(--origam-bracket-match--hover---background-color, var(--origam-color__surface---elevated, #fafafa));
 				border-color: var(--origam-bracket-match--hover---border-color, var(--origam-color__border---default, rgba(0, 0, 0, 0.24)));
 			}
 		}

package/dist/src/components/Btn/OrigamBtn.vue

@@ -479,6 +479,13 @@ defineExpose({
 		min-width: calc(var(--origam-btn---min-width, 64px) + var(--origam-btn---density, 0px));
 		max-width: var(--origam-btn---max-width, 100%);
 		height: calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px));
+		// ⛔ C2 (#597) — `--origam-btn---min-height` reste NON DECLARE, a dessein.
+		// Son repli est `calc(height + density)`, deux vars reglees PAR INSTANCE
+		// (`&--size-*` / `&--density-*` plus bas dans ce bloc). Une custom property
+		// est substituee SUR L'ELEMENT QUI LA DECLARE : une declaration `:root`
+		// figerait la hauteur minimale a la taille/densite racine et les props
+		// `size` / `density` cesseraient d'agir sur elle. Faux positif de la garde,
+		// qui compare des noms et non des chaines de repli.
 		min-height: var(--origam-btn---min-height, calc(var(--origam-btn---height, 36px) + var(--origam-btn---density, 0px)));
 		max-height: var(--origam-btn---max-height, 100%);
 
@@ -800,6 +807,15 @@ defineExpose({
 			// no longer forced to share one token. Themes that don't
 			// declare it fall straight through to the existing behaviour
 			// (their own `-background-color`), so this is additive only.
+			//
+			// ⛔ C2 (#597) — `--origam-btn---background-color-active` reste NON
+			// DECLARE, a dessein. Son repli est le bouton general
+			// `--origam-btn---background-color`, lui DECLARE dans les feuilles et
+			// surcharge par intention / variante sur l'element. Le declarer a
+			// `:root` y substituerait la couleur RACINE une fois pour toutes :
+			// l'etat actif d'un bouton `primary` repeindrait le gris secondaire.
+			// Non declare, le repli est evalue sur l'element et suit la couleur
+			// reelle du bouton — c'est une cascade voulue, pas un oubli.
 			&#{$this}--active {
 				background-color: var(--origam-btn---background-color-active, var(--origam-btn---background-color)) !important;
 				color: var(--origam-btn---color);
@@ -818,6 +834,27 @@ defineExpose({
 			}
 		}
 
+		// ⛔ C2 (#597) — les 5 tokens `ghost` lus ici restent NON DECLARES, a
+		// dessein, pour DEUX raisons independantes :
+		//
+		//  1. chaque repli est un `color-mix()` relatif a `currentColor` (ou a
+		//     `white`) : il doit etre evalue SUR LE BOUTON, dont la couleur
+		//     depend de l'intention. Une declaration `:root` le figerait a la
+		//     teinte racine et le verre prendrait la meme nuance partout.
+		//  2. `--origam-btn---background-color-ghost` est lu DEUX FOIS avec DEUX
+		//     replis differents (12 % ici, 18 % dans la branche
+		//     `@supports not (backdrop-filter)` plus bas). Le declarer
+		//     imposerait une seule valeur aux deux branches : c'est un choix de
+		//     design a arbitrer, pas une correction mecanique.
+		//
+		// Les jumeaux `--origam-btn--ghost---{background-color,color,
+		// background-color-hover}` existent bien dans les feuilles, mais ils ne
+		// portent PAS un voile relatif : `--origam-color__action--ghost---bg` vaut
+		// `rgba(0, 0, 0, 0)` (mesure, light.css:108) et `---bgHover` un neutre
+		// OPAQUE (`neutral---100`, light.css:109). Les cabler ici supprimerait donc
+		// le voile a 12 % au repos et le remplacerait par un aplat neutre au
+		// survol : changement de rendu, pas correction. Ils restent dormants —
+		// meme arbitrage.
 		&--variant-ghost {
 			background-color: var(
 				--origam-btn---background-color-ghost,
@@ -943,8 +980,8 @@ defineExpose({
 		// the skeleton's natural size unless we give it a sensible
 		// min-width / min-height.
 		&--loader-skeleton {
-			min-width: var(--origam-btn---loader-skeleton-min-width, 96px);
-			min-height: var(--origam-btn---loader-skeleton-min-height, 36px);
+			min-width: var(--origam-btn--loader-skeleton---min-width, 96px);
+			min-height: var(--origam-btn--loader-skeleton---min-height, 36px);
 
 			:deep(.origam-skeleton--rectangular) {
 				position: absolute;

package/dist/src/components/Btn/OrigamBtnGroup.vue

@@ -337,6 +337,11 @@ defineExpose({
 			box-shadow: none;
 		}
 
+		// ⛔ C2 (#597) — les 3 tokens `ghost` lus ici restent NON DECLARES, pour
+		// la meme raison que dans `OrigamBtn.vue` (voir le commentaire detaille
+		// devant son propre `&--variant-ghost`) : leurs replis sont des
+		// `color-mix()` relatifs a `currentColor`, qui doivent etre evalues sur
+		// l'element et non figes a `:root`.
 		&--variant-ghost {
 			background-color: var(
 				--origam-btn---background-color-ghost,

package/dist/src/components/Card/OrigamCard.vue

@@ -461,20 +461,20 @@ defineExpose({
 		&__overlay {
 			background-color: var(--origam-card__overlay---background-color, var(--origam-color__overlay---scrim));
 			border-radius: var(--origam-card__overlay---border-radius, inherit);
-			opacity: var(--origam-card__overlay---opacity, var(--origam-card---overlay-opacity, 0));
+			opacity: var(--origam-card__overlay---opacity, 0);
 			pointer-events: var(--origam-card__overlay---pointer-events, none);
 			position: var(--origam-card__overlay---position, absolute);
-			bottom: var(--origam-card__overlay---position-bottom, var(--origam-card---overlay-position-bottom, 0));
-			left: var(--origam-card__overlay---position-left, var(--origam-card---overlay-position-left, 0));
-			right: var(--origam-card__overlay---position-right, var(--origam-card---overlay-position-right, 0));
-			top: var(--origam-card__overlay---position-top, var(--origam-card---overlay-position-top, 0));
-			transition-property: var(--origam-card__overlay---transition-property, var(--origam-card---overlay-transition-property, opacity));
-			transition-duration: var(--origam-card__overlay---transition-duration, var(--origam-card---overlay-transition-duration, 0.2s));
-			transition-timing-function: var(--origam-card__overlay---transition-timing-function, var(--origam-card---overlay-transition-timing-function, ease-in-out));
+			bottom: var(--origam-card__overlay---position-bottom, 0);
+			left: var(--origam-card__overlay---position-left, 0);
+			right: var(--origam-card__overlay---position-right, 0);
+			top: var(--origam-card__overlay---position-top, 0);
+			transition-property: var(--origam-card__overlay---transition-property, opacity);
+			transition-duration: var(--origam-card__overlay---transition-duration, 0.2s);
+			transition-timing-function: var(--origam-card__overlay---transition-timing-function, ease-in-out);
 		}
 
 		&__underlay {
-			position: var(--origam-card__underlay---position, var(--origam-card---underlay-position, absolute));
+			position: var(--origam-card__underlay---position, absolute);
 		}
 
 		> * {
@@ -524,8 +524,8 @@ defineExpose({
 		}
 
 		&--loading {
-			min-width: var(--origam-card---loading-min-width, 240px);
-			min-height: var(--origam-card---loading-min-height, 120px);
+			min-width: var(--origam-card--loading---min-width, 240px);
+			min-height: var(--origam-card--loading---min-height, 120px);
 		}
 
 		&__loader {
@@ -565,6 +565,13 @@ defineExpose({
 			z-index: var(--origam-card__loader---z-index, 3);
 			min-height: 0;
 			border-radius: inherit;
+			// ⛔ LEFT UNDECLARED ON PURPOSE (#593). Declaring this token in the token
+			// sheets would substitute the `color-mix()` at `:root`, where
+			// `--origam-card---background` holds the root default — freezing the
+			// scrim to that one colour. Undeclared, the fallback is evaluated on THIS
+			// element, so the mix follows whatever background the card actually
+			// carries. Wiring it would cost that and buy a channel that
+			// `--origam-card---background` already covers.
 			background-color: var(--origam-card__loader---overlay-background, color-mix(in srgb, var(--origam-card---background) 62%, transparent));
 
 			:deep(.origam-progress--circular) {
@@ -650,34 +657,34 @@ defineExpose({
 			--origam-card---cursor: pointer;
 
 			&:before {
-				border-radius: var(--origam-card__before---border-radius, var(--origam-card---before-border-radius, inherit));
-				bottom: var(--origam-card__before---bottom, var(--origam-card---before-bottom, 0));
-				content: var(--origam-card__before---content, var(--origam-card---before-content, ""));
-				display: var(--origam-card__before---display, var(--origam-card---before-display, block));
-				left: var(--origam-card__before---left, var(--origam-card---before-left, 0));
-				pointer-events: var(--origam-card__before---pointer-events, var(--origam-card---before-pointer-events, none));
-				position: var(--origam-card__before---position, var(--origam-card---before-position, absolute));
-				right: var(--origam-card__before---right, var(--origam-card---before-right, 0));
-				top: var(--origam-card__before---top, var(--origam-card---before-top, 0));
-				transition: var(--origam-card__before---transition, var(--origam-card---before-transition, inherit));
-				opacity: var(--origam-card__before---opacity, var(--origam-card---before-opacity, 1));
-				z-index: var(--origam-card__before---z-index, var(--origam-card---before-z-index, -1));
+				border-radius: var(--origam-card__before---border-radius, inherit);
+				bottom: var(--origam-card__before---bottom, 0);
+				content: var(--origam-card__before---content, "");
+				display: var(--origam-card__before---display, block);
+				left: var(--origam-card__before---left, 0);
+				pointer-events: var(--origam-card__before---pointer-events, none);
+				position: var(--origam-card__before---position, absolute);
+				right: var(--origam-card__before---right, 0);
+				top: var(--origam-card__before---top, 0);
+				transition: var(--origam-card__before---transition, inherit);
+				opacity: var(--origam-card__before---opacity, 1);
+				z-index: var(--origam-card__before---z-index, -1);
 				box-shadow: var(--origam-card__before---box-shadow, var(--origam-card---before-box-shadow));
 			}
 
 			&:after {
-				border-radius: var(--origam-card__after---border-radius, var(--origam-card---after-border-radius, inherit));
-				bottom: var(--origam-card__after---bottom, var(--origam-card---after-bottom, 0));
-				content: var(--origam-card__after---content, var(--origam-card---after-content, ""));
-				display: var(--origam-card__after---display, var(--origam-card---after-display, block));
-				left: var(--origam-card__after---left, var(--origam-card---after-left, 0));
-				pointer-events: var(--origam-card__after---pointer-events, var(--origam-card---after-pointer-events, none));
-				position: var(--origam-card__after---position, var(--origam-card---after-position, absolute));
-				right: var(--origam-card__after---right, var(--origam-card---after-right, 0));
-				top: var(--origam-card__after---top, var(--origam-card---after-top, 0));
-				transition: var(--origam-card__after---transition, var(--origam-card---after-transition, inherit));
-				z-index: var(--origam-card__after---z-index, var(--origam-card---after-z-index, 1));
-				opacity: var(--origam-card__after---opacity, var(--origam-card---after-opacity, 0));
+				border-radius: var(--origam-card__after---border-radius, inherit);
+				bottom: var(--origam-card__after---bottom, 0);
+				content: var(--origam-card__after---content, "");
+				display: var(--origam-card__after---display, block);
+				left: var(--origam-card__after---left, 0);
+				pointer-events: var(--origam-card__after---pointer-events, none);
+				position: var(--origam-card__after---position, absolute);
+				right: var(--origam-card__after---right, 0);
+				top: var(--origam-card__after---top, 0);
+				transition: var(--origam-card__after---transition, inherit);
+				z-index: var(--origam-card__after---z-index, 1);
+				opacity: var(--origam-card__after---opacity, 0);
 				box-shadow: var(--origam-card__after---box-shadow, var(--origam-card---after-box-shadow));
 			}
 

package/dist/src/components/Chart/OrigamChartAxis.vue

@@ -137,6 +137,16 @@ const formatSecondaryY = (value) => {
 		stroke-width: var(--origam-chart__axis---stroke-width, 1);
 	}
 
+	/*
+	 * ⛔ `--origam-chart__axis-label---font-size` reste NON DECLARE dans les
+	 * feuilles (#591), volontairement : les huit lectures de la famille Chart
+	 * ne s'accordent pas sur leur repli — 0.75rem ici, dans Bullet (echelle
+	 * principale), Cartesian, Gauge et Radar ; 0.6875rem dans BoxPlot,
+	 * Candlestick et la seconde echelle de Bullet. Une declaration unique
+	 * changerait donc le rendu de l'un des deux camps. Trancher demande un
+	 * choix de design (valeur commune, ou second token pour l'echelle
+	 * secondaire) : remonte a l'utilisateur, pas cable en silence.
+	 */
 	.origam-chart__axis-label {
 		fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 		font-size: var(--origam-chart__axis-label---font-size, 0.75rem);

package/dist/src/components/Chart/OrigamChartBoxPlot.vue

@@ -726,19 +726,19 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		.origam-chart__grid-line {
-			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color__border---subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: 1;
 			stroke-dasharray: 4 4;
 		}
 
 		.origam-chart__axis-line {
-			stroke: var(--origam-chart__axis---stroke-color, var(--origam-color__border---default, #d1d5db));
+			stroke: var(--origam-chart__axis---color, var(--origam-color__border---default, #d1d5db));
 			stroke-width: 1;
 		}
 
 		.origam-chart__axis-label {
 			font-size: var(--origam-chart__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 		}
 
 		.origam-chart__box-rect {

package/dist/src/components/Chart/OrigamChartCandlestick.vue

@@ -611,14 +611,14 @@ const onSeriesToggle = (series, nextVisible) => {
 		}
 
 		&__grid-line {
-			stroke: var(--origam-chart__grid---stroke-color, var(--origam-color__border---subtle, #e5e7eb));
+			stroke: var(--origam-chart__grid---color, var(--origam-color__border---subtle, #e5e7eb));
 			stroke-width: var(--origam-chart__grid---stroke-width, 1);
 			fill: none;
 		}
 
 		&__axis-label {
 			font-size: var(--origam-chart__axis-label---font-size, 0.6875rem);
-			fill: var(--origam-chart__axis-label---fill, var(--origam-color__text---secondary, #6b7280));
+			fill: var(--origam-chart__axis-label---color, var(--origam-color__text---secondary, #6b7280));
 			user-select: none;
 			pointer-events: none;
 		}

package/dist/src/components/Chart/OrigamChartCartesian.vue

@@ -1475,7 +1475,7 @@ const pointAriaLabel = (path) => {
 		}
 
 		.origam-chart__annotation-callout-text {
-			fill: var(--origam-chart__annotation-callout---text-color, #ffffff);
+			fill: var(--origam-chart__annotation-callout---color, #ffffff);
 			font-size: var(--origam-chart__annotation-callout---font-size, 0.6875rem);
 			font-weight: var(--origam-chart__annotation-callout---font-weight, 600);
 			pointer-events: none;

package/dist/src/components/DataTable/OrigamDataTable.vue

@@ -440,7 +440,7 @@ defineExpose({
 			 * et un voile a 0.82 n'est plus un voile.
 			 ********************************************************/
 			&:deep(.origam-data-table-cell:not(.origam-data-table-header-cell)) {
-				opacity: var(--origam-data-table--loading---opacity, var(--origam-data-table__loading---opacity, 0.5));
+				opacity: var(--origam-data-table--loading---opacity, 0.5);
 			}
 		}
 	}

package/dist/src/components/DataTable/OrigamDataTableColumnCell.vue

@@ -115,13 +115,13 @@ defineExpose({
 
 		&--fixed {
 			position: sticky;
-			background: var(--origam-data-table-cell--fixed---background, var(--origam-data-table__cell---fixed-background-color, var(--origam-color__surface---raised)));
+			background: var(--origam-data-table-cell--fixed---background, var(--origam-color__surface---raised));
 			left: 0;
-			z-index: var(--origam-data-table-cell--fixed---z-index, var(--origam-data-table__cell---fixed-z-index, 1))
+			z-index: var(--origam-data-table-cell--fixed---z-index, 1)
 		}
 
 		&--last-fixed {
-			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)));
+			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));
 		}
 	}
 </style>

package/dist/src/components/DataTable/OrigamDataTableGroupHeaderRow.vue

@@ -142,12 +142,19 @@ defineExpose({
 
 <style lang="scss" scoped>
 	.origam-data-table-group-header-row {
-		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)));
-		color: var(--origam-data-table-group-header-row---color, var(--origam-data-table---group-header-row-color, var(--origam-color__text---primary)));
-		font-weight: var(--origam-data-table-group-header-row---font-weight, var(--origam-data-table---group-header-row-font-weight, 500));
+		background-color: var(--origam-data-table-group-header-row---background-color, var(--origam-color__surface---overlay));
+		color: var(--origam-data-table-group-header-row---color, var(--origam-color__text---primary));
+		font-weight: var(--origam-data-table-group-header-row---font-weight, 500);
 
 		&__column {
-			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)));
+			// ⛔ C2 (#597) — `--origam-data-table-group-header-row--depth` reste NON
+			// DECLARE, a dessein : ce n'est PAS un token de theme mais une DONNEE
+			// d'instance, ecrite en style inline par ce composant
+			// (`dataTableGroupHeaderRowStyles`, `props.item.depth`). La declarer
+			// dans les feuilles exposerait la profondeur d'un noeud comme un
+			// reglage de theme, et son repli `0` doit rester SANS UNITE : c'est un
+			// multiplicateur de `calc()`, `0px * 16px` serait invalide (#568).
+			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));
 		}
 	}
 </style>