@vectoriox/iox-ui 5.25.0 → 5.26.0

package/src/design-core/design-apply.ts

@@ -1,7 +1,7 @@
 import { deriveBrandTokens } from './brand';
 import { SPEC_LEGACY_ALIASES } from './flavor-spec.generated';
 import { SWISS_FLAVOR } from './flavor';
-import { buildFlavorTokens } from './flavor-tokens';
+import { buildFlavorTokens, legacyFlavorTokens } from './flavor-tokens';
 import {
     FlavorRevertPlan, FlavorSeedOptions, FlavorSeedPlan, planFlavorRevert, planFlavorSeed, SeedBaseline, SeedExpectation, untouchedSeedRow,
 } from './flavor-seed';
@@ -28,6 +28,13 @@ export function designTokenRows(choices: DesignChoices): DesignTokenRow[] {
     return pack ? buildFlavorTokens(pack, { ...choices, flavorId: pack.id }) : [];
 }
 
+/** What a design wrote BEFORE DS9 (the look's own palette, the rows DS9 changed at their old values, the
+ *  accent derived against `bg` alone) — empty for an unknown pack. */
+export function legacyDesignTokenRows(choices: DesignChoices): DesignTokenRow[] {
+    const pack = flavorPackById(choices.flavorId);
+    return pack ? legacyFlavorTokens(pack, { ...choices, flavorId: pack.id }) : [];
+}
+
 /** What the F1/F2 Swiss seeding wrote: the four Swiss rows + the brand set derived from its seed. */
 function swissExpectations(seed: string | null): Map<string, SeedExpectation> {
     const rows: Array<Pick<DesignTokenRow, 'name' | 'value' | 'values'>> =
@@ -39,18 +46,22 @@ function swissExpectations(seed: string | null): Map<string, SeedExpectation> {
     return expectations(rows);
 }
 
-/** What a v2 pack writes at its OWN defaults, by pack id — computed once per id per caller. */
-function packDefaultsLookup(): (packId: string) => Map<string, SeedExpectation> | undefined {
-    const cache = new Map<string, Map<string, SeedExpectation> | undefined>();
+/** What a v2 pack writes at its OWN defaults, by pack id — today and before DS9 (a studio seeded then holds
+ *  the old defaults) — computed once per id per caller. */
+function packDefaultsLookup(): (packId: string) => ReadonlyArray<Map<string, SeedExpectation>> {
+    const cache = new Map<string, ReadonlyArray<Map<string, SeedExpectation>>>();
     return packId => {
         if (!cache.has(packId)) {
             const pack = isRetiredFlavorId(packId) ? undefined : flavorPackById(packId);
-            cache.set(packId, pack && pack.id === packId ? expectations(designTokenRows(packDesignChoices(pack.id))) : undefined);
+            const choices = pack && pack.id === packId ? packDesignChoices(pack.id) : null;
+            cache.set(packId, choices ? [expectations(designTokenRows(choices)), expectations(legacyDesignTokenRows(choices))] : []);
         }
-        return cache.get(packId);
+        return cache.get(packId) as ReadonlyArray<Map<string, SeedExpectation>>;
     };
 }
 
+const present = (list: ReadonlyArray<SeedExpectation | undefined>): SeedExpectation[] => list.filter((e): e is SeedExpectation => !!e);
+
 /**
  * What the PREVIOUS design wrote, as a baseline keyed by the row's own stamp: a row Swiss stamped is
  * judged against what Swiss wrote, every other row against `buildFlavorTokens` of the stored choices
@@ -66,14 +77,16 @@ function packDefaultsLookup(): (packId: string) => Map<string, SeedExpectation>
  */
 export function designBaseline(previous: StoredDesign): SeedBaseline {
     const retired = isRetiredFlavorId(previous.storedFlavorId);
-    const current = expectations(designTokenRows(retired ? packDesignChoices(previous.choices.flavorId) : previous.choices));
+    const wrote = retired ? packDesignChoices(previous.choices.flavorId) : previous.choices;
+    const current = expectations(designTokenRows(wrote));
+    const beforeTint = expectations(legacyDesignTokenRows(wrote));
     const swiss = swissExpectations(retired ? previous.storedSeed : null);
     const packDefaults = packDefaultsLookup();
     return (row: StoredDesignTokenRow) => {
         const stampedBy = SEED_STAMP.exec(row.source ?? '')?.[1];
         if (stampedBy === SWISS_FLAVOR.id) return swiss.get(row.name);
-        const ownDefault = stampedBy ? packDefaults(stampedBy)?.get(row.name) : undefined;
-        return [current.get(row.name), ownDefault].filter((e): e is SeedExpectation => !!e);
+        const ownDefaults = stampedBy ? packDefaults(stampedBy).map(m => m.get(row.name)) : [];
+        return present([current.get(row.name), beforeTint.get(row.name), ...ownDefaults]);
     };
 }
 
@@ -121,15 +134,18 @@ export function missingDesignRows(existing: ReadonlyArray<{ name: string }>, cho
 /**
  * The builder-load REPAIR (DS4.1): rows the design writes that are the machine's and nobody touched,
  * yet hold something other than the design's value, are rewritten — so an org heals on its next load
- * with no author action. Two shapes:
+ * with no author action. Three shapes:
  * - stamped by the current pack, light value exactly the pack's, dark half not: iox-cms dropped
  *   `values.dark` on every write from F0 to DS4 (`values` was an implicit relation), and a revert could
  *   leave the previous apply's dark behind;
  * - stamped by a v2 pack and still holding what THAT pack writes at its own defaults (its dark half
  *   possibly lost the same way) while the stored design says otherwise: an apply that judged the row
  *   edited (before 5.24.0, a lost dark half did) left it on the default — the six brand rows of a studio
- *   whose brand colour never reached its accent.
- * No author edit produces either shape — the Tokens panel edited the light value only, and since DS8 an
+ *   whose brand colour never reached its accent;
+ * - stamped by the current pack and still holding what the design wrote BEFORE DS9
+ *   (`legacyDesignTokenRows`): the contrast fixes — a 3:1 `line-strong`, a 3:1 focus ring, an
+ *   `accent-text` that reads on every ground — reach a studio that applied its look before them.
+ * No author edit produces any of these shapes — the Tokens panel edited the light value only, and since DS8 an
  * edit makes the row `source: user`, which this never touches.
  */
 export function designTokenRepairs(existing: ReadonlyArray<StoredDesignTokenRow>, choices: DesignChoices): FlavorSeedPlan['update'] {
@@ -137,6 +153,7 @@ export function designTokenRepairs(existing: ReadonlyArray<StoredDesignTokenRow>
     if (!pack) return [];
     const stamp = flavorSourceStamp(pack.id);
     const desired = new Map(designTokenRows(choices).map(r => [r.name, r]));
+    const beforeTint = expectations(legacyDesignTokenRows(choices));
     const packDefaults = packDefaultsLookup();
     const out: FlavorSeedPlan['update'] = [];
     for (const row of existing ?? []) {
@@ -145,8 +162,11 @@ export function designTokenRepairs(existing: ReadonlyArray<StoredDesignTokenRow>
         if (row.value === want.value && (row.values?.dark ?? '') === (want.values?.dark ?? '') && row.source === stamp) continue;
         const stampedBy = SEED_STAMP.exec(row.source ?? '')?.[1];
         const darkOnly = row.source === stamp && row.value === want.value;
-        const ownDefault = stampedBy ? packDefaults(stampedBy)?.get(row.name) : undefined;
-        if (!darkOnly && !(ownDefault && untouchedSeedRow(row, [ownDefault]))) continue;
+        const machineWrote = present([
+            ...(stampedBy ? packDefaults(stampedBy).map(m => m.get(row.name)) : []),
+            ...(stampedBy === pack.id ? [beforeTint.get(row.name)] : []),
+        ]);
+        if (!darkOnly && !untouchedSeedRow(row, machineWrote)) continue;
         out.push({ id: row._id, data: { value: want.value, values: want.values ?? {}, source: stamp, ...(want.group ? { group: want.group } : {}), ...(want.tier ? { tier: want.tier } : {}) } });
     }
     return out;

package/src/design-core/design-settings.ts

@@ -1,6 +1,6 @@
 import { SPEC_AXES, SPEC_FONT_ROLES } from './flavor-spec.generated';
 import { parseHexColor } from './brand';
-import { DesignChoices, DesignMode, FlavorPackV2, FontRoleToken, SPEC_FLAVORS } from './design-token.model';
+import { DesignChoices, DesignMode, FlavorPackV2, FontRoleToken, PRE_TINT_DEFAULT, SPEC_FLAVORS, TintId } from './design-token.model';
 import type { FlavorRevertSnapshot } from './flavor-seed';
 
 /**
@@ -30,6 +30,7 @@ export enum DesignConfigKey {
     Motion = 'motion',
     PillButtons = 'pillButtons',
     Mode = 'mode',
+    Tint = 'tint',
     Fonts = 'fonts',
     Revert = 'revert',
 }
@@ -121,6 +122,7 @@ export function resolveDesignChoices(partial: Partial<DesignChoices> | null | un
         motion: keyOf(SPEC_AXES.motions, asString(partial?.motion)) ?? pack.defaults.motion,
         pillButtons: asBoolean(partial?.pillButtons) ?? pack.defaults.pillButtons,
         mode: (MODES.includes(asString(partial?.mode) ?? '') ? asString(partial?.mode) : pack.defaults.mode) as DesignMode,
+        tint: keyOf(SPEC_AXES.tints, asString(partial?.tint)) ?? pack.defaults.tint,
         ...(fonts ? { fonts } : {}),
     };
 }
@@ -141,9 +143,14 @@ export function choicesForPack(flavorId: string, applied: DesignChoices | null |
     return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts });
 }
 
-/** A stored `settings.design` config → the resolved design. No row (or no config) → Crisp's defaults. */
+/**
+ * A stored `settings.design` config → the resolved design. No row (or no config) → Crisp's defaults. A
+ * row stored before DS9 has no `tint`: it was applied with the look's own palette, so it reads `neutral`
+ * (never the pack's new default — the studio's rows hold the palette, and nothing may repaint them unasked).
+ */
 export function readDesignConfig(config: ReadonlyArray<DesignConfigEntry> | null | undefined, hasRow = !!config): StoredDesign {
     const map = configMap(config);
+    const storedTint = asString(map.get(DesignConfigKey.Tint)) ?? (hasRow ? PRE_TINT_DEFAULT : null);
     const storedFlavorId = asString(map.get(DesignConfigKey.FlavorId));
     const storedSeed = asString(map.get(DesignConfigKey.BrandSeed));
     const choices = resolveDesignChoices({
@@ -155,6 +162,7 @@ export function readDesignConfig(config: ReadonlyArray<DesignConfigEntry> | null
         motion: map.get(DesignConfigKey.Motion) as DesignChoices['motion'],
         pillButtons: asBoolean(map.get(DesignConfigKey.PillButtons)) ?? undefined,
         mode: map.get(DesignConfigKey.Mode) as DesignMode,
+        tint: (storedTint ?? undefined) as TintId | undefined,
         fonts: map.get(DesignConfigKey.Fonts) as DesignChoices['fonts'],
     });
     return {
@@ -189,6 +197,7 @@ export function designConfigEntries(
         { key: DesignConfigKey.Motion, value: c.motion },
         { key: DesignConfigKey.PillButtons, value: String(c.pillButtons) },
         { key: DesignConfigKey.Mode, value: c.mode },
+        { key: DesignConfigKey.Tint, value: c.tint },
         ...(c.fonts ? [{ key: DesignConfigKey.Fonts, value: JSON.stringify(c.fonts) }] : []),
         ...(revert ? [{ key: DesignConfigKey.Revert, value: JSON.stringify(revert) }] : []),
     ];
@@ -200,6 +209,6 @@ export function sameDesignChoices(a: DesignChoices, b: DesignChoices): boolean {
     const y = resolveDesignChoices(b);
     return x.flavorId === y.flavorId && x.seed.toLowerCase() === y.seed.toLowerCase() && x.pairId === y.pairId
         && x.shape === y.shape && x.density === y.density && x.motion === y.motion
-        && x.pillButtons === y.pillButtons && x.mode === y.mode
+        && x.pillButtons === y.pillButtons && x.mode === y.mode && x.tint === y.tint
         && JSON.stringify(x.fonts ?? {}) === JSON.stringify(y.fonts ?? {});
 }

package/src/design-core/design-token.model.ts

@@ -41,6 +41,11 @@ export type ShapeId = keyof typeof SPEC_AXES.shapes;
 export type DensityId = keyof typeof SPEC_AXES.densities;
 export type MotionId = keyof typeof SPEC_AXES.motions;
 export type DesignMode = (typeof SPEC_AXES.modes)[number];
+/** Background tint (DS9): Neutral keeps the look's own palette; Subtle / Rich tint its neutrals with the brand. */
+export type TintId = keyof typeof SPEC_AXES.tints;
+export const TINT_IDS = Object.keys(SPEC_AXES.tints) as ReadonlyArray<TintId>;
+/** What a studio that stored its look BEFORE the tint existed wears: exactly the look's own palette. */
+export const PRE_TINT_DEFAULT: TintId = 'neutral';
 export type SchemeId = keyof typeof SPEC_SCHEMES;
 export type FontRoleToken = (typeof SPEC_FONT_ROLES)[number]['token'];
 
@@ -54,6 +59,9 @@ export interface DesignChoices {
     motion: MotionId;
     pillButtons: boolean;
     mode: DesignMode;
+    /** Absent = the pack's default (`defaults.tint`). `readDesignConfig` reads a row stored before DS9 as
+     *  `neutral` — the palette it was applied with. */
+    tint?: TintId;
     fonts?: Partial<Record<FontRoleToken, string>>;
 }
 
@@ -75,6 +83,19 @@ export interface FontPair {
     readonly families: ReadonlyArray<string>;
 }
 
+/** A flavor's own colour palette (the Neutral tint): every colour token, light + the dark values that differ. */
+export interface FlavorPalette {
+    readonly light: Readonly<Record<string, string>>;
+    readonly dark: Readonly<Record<string, string>>;
+}
+
+/** How a flavor takes the brand's tint: which neutral roles, how strongly, and its tinted paints. */
+export interface FlavorTintConfig {
+    readonly scale: number;
+    readonly roles: ReadonlyArray<string>;
+    readonly paints?: ReadonlyArray<string>;
+}
+
 /** A flavor exactly as the spec writes it. */
 export interface FlavorPackV2 {
     readonly id: string;
@@ -90,10 +111,15 @@ export interface FlavorPackV2 {
         readonly motion: MotionId;
         readonly pillButtons: boolean;
         readonly mode: DesignMode;
+        readonly tint: TintId;
     };
     readonly seed: string;
     readonly seeds: ReadonlyArray<string>;
     readonly pairs: ReadonlyArray<FontPair>;
+    readonly palette: FlavorPalette;
+    readonly tint: FlavorTintConfig;
+    /** What the contract wrote before DS9 for the rows DS9 changed at the Neutral tint (`legacyFlavorTokens`). */
+    readonly legacy: Readonly<Record<string, { readonly value: string; readonly dark?: string }>>;
     readonly tokens: ReadonlyArray<FlavorSpecToken>;
 }