SwatchSpring contrast-repair example — September 16, 2026 (UTC)

This record contains synthetic themes, not customer data.

Scope: a scripted native Safari 26.5 session on macOS 26.5.1. CSS and JSON
were tested in separate guest windows. Import and baseline download ran
at 100% zoom; lock, repair, download, and reimport ran at 200% page zoom.
This is one session with two equivalent fixtures, not a general success rate.

Procedure for each format:
1. Paste the corresponding BEFORE source below into Import a theme.
2. Review and apply. Check Light and Dark mappings.
3. Lock background, surface/card, and primary in both modes. In JSON the
   mapped aliases resolve to shared palette sources; locks protect those sources.
4. Keep the repair text target at AA normal text (4.5:1).
5. Preview and apply repairs. Download the theme and the contrast report.
6. Compare the downloaded source with the AFTER source below, then reimport.
   Source exports do not carry editor locks; reimport verification covers values.

Observed for each fixture:
Before: 18 passing, 6 failing, 10 unchecked relationships.
After: 22 passing, 2 failing, 10 unchecked relationships.
All previously passing checks remained passing. The remaining failures were
Accent link on surface in Light and Dark. The two shared ink literals were
the only edited values. Other tokens, aliases, and metadata were retained.
All 24 checked after-repair ratios per format were independently recomputed
from exported HEX colors using sRGB relative luminance.

The initial downloads matched the input fixtures. After repair, the downloaded
CSS was compared by replacing only the two changed ink literals and asserting
all other bytes equal. For JSON, only the original ink values were restored
and the full parsed document compared. Reimport retained the repaired values
and the same result counts.

Limitations: this checks the named solid-color relationships, not a complete
site's accessibility. Unmapped values, alpha, expressions, out-of-sRGB colors,
gradients, and inactive controls were outside the contrast checks. No real
participant study, VoiceOver assessment, physical-phone test, or arbitrary
framework compatibility is established by this example. Application changes
may expand the checked pairs in a later version; these counts describe this
specific recorded session.

Copy only an individual source block into the importer, not this whole record.

===== CSS BEFORE =====

/* Synthetic failing theme. Keep imports and component rules in the consumer. */
:root {
 --ink: #aaaaaa;
 --foreground: var(--ink);
 --background: #ffffff;
 --card: #ffffff;
 --card-foreground: var(--ink);
 --primary: #234567;
 --primary-foreground: #ffffff;
 --primary-hover: #17334f;
 --on-primary-hover: #ffffff;
 --primary-pressed: #10253a;
 --on-primary-pressed: #ffffff;
 --accent: #ddeeff;
 --accent-foreground: #203040;
 --border: #666666;
 --input: var(--border);
 --ring: var(--primary);
 --disabled: #eeeeee;
 --on-disabled: #666666;
 --radius: 0.625rem;
 --custom-metadata: "preserve; this value";
}
.dark {
 --ink: #555555;
 --background: #222222;
 --card: #222222;
 --primary: #aabbcc;
 --primary-foreground: #111111;
 --primary-hover: #bbccdd;
 --on-primary-hover: #111111;
 --primary-pressed: #ccddee;
 --on-primary-pressed: #111111;
 --accent: #345678;
 --accent-foreground: #ffffff;
 --border: #999999;
 --disabled: #333333;
 --on-disabled: #999999;
}
@theme inline {
 --color-background: var(--background);
 --color-foreground: var(--foreground);
 --color-card: var(--card);
 --color-card-foreground: var(--card-foreground);
 --color-primary: var(--primary);
 --color-primary-foreground: var(--primary-foreground);
 --color-accent: var(--accent);
 --color-accent-foreground: var(--accent-foreground);
 --color-border: var(--border);
 --color-input: var(--input);
 --color-ring: var(--ring);
 --color-primary-hover: var(--primary-hover);
 --color-on-primary-hover: var(--on-primary-hover);
 --color-primary-pressed: var(--primary-pressed);
 --color-on-primary-pressed: var(--on-primary-pressed);
 --color-disabled: var(--disabled);
 --color-on-disabled: var(--on-disabled);
}

===== CSS AFTER =====

/* Synthetic failing theme. Keep imports and component rules in the consumer. */
:root {
 --ink: #767676;
 --foreground: var(--ink);
 --background: #ffffff;
 --card: #ffffff;
 --card-foreground: var(--ink);
 --primary: #234567;
 --primary-foreground: #ffffff;
 --primary-hover: #17334f;
 --on-primary-hover: #ffffff;
 --primary-pressed: #10253a;
 --on-primary-pressed: #ffffff;
 --accent: #ddeeff;
 --accent-foreground: #203040;
 --border: #666666;
 --input: var(--border);
 --ring: var(--primary);
 --disabled: #eeeeee;
 --on-disabled: #666666;
 --radius: 0.625rem;
 --custom-metadata: "preserve; this value";
}
.dark {
 --ink: #898989;
 --background: #222222;
 --card: #222222;
 --primary: #aabbcc;
 --primary-foreground: #111111;
 --primary-hover: #bbccdd;
 --on-primary-hover: #111111;
 --primary-pressed: #ccddee;
 --on-primary-pressed: #111111;
 --accent: #345678;
 --accent-foreground: #ffffff;
 --border: #999999;
 --disabled: #333333;
 --on-disabled: #999999;
}
@theme inline {
 --color-background: var(--background);
 --color-foreground: var(--foreground);
 --color-card: var(--card);
 --color-card-foreground: var(--card-foreground);
 --color-primary: var(--primary);
 --color-primary-foreground: var(--primary-foreground);
 --color-accent: var(--accent);
 --color-accent-foreground: var(--accent-foreground);
 --color-border: var(--border);
 --color-input: var(--input);
 --color-ring: var(--ring);
 --color-primary-hover: var(--primary-hover);
 --color-on-primary-hover: var(--on-primary-hover);
 --color-primary-pressed: var(--primary-pressed);
 --color-on-primary-pressed: var(--on-primary-pressed);
 --color-disabled: var(--disabled);
 --color-on-disabled: var(--on-disabled);
}

===== JSON BEFORE =====

{
  "$description": "Synthetic downstream JSON theme; preserve metadata and alias paths.",
  "palettes": {
    "ink": {
      "light": {
        "$type": "color",
        "$value": "#aaaaaa"
      },
      "dark": {
        "$type": "color",
        "$value": "#555555"
      }
    },
    "brand": {
      "light": {
        "$type": "color",
        "$value": "#234567"
      },
      "dark": {
        "$type": "color",
        "$value": "#aabbcc"
      }
    }
  },
  "themes": {
    "light": {
      "text": {
        "$type": "color",
        "$value": "{palettes.ink.light}"
      },
      "background": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "surface": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-surface": {
        "$type": "color",
        "$value": "{palettes.ink.light}"
      },
      "primary": {
        "$type": "color",
        "$value": "{palettes.brand.light}"
      },
      "on-primary": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "#17334f"
      },
      "on-primary-hover": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "primary-pressed": {
        "$type": "color",
        "$value": "#10253a"
      },
      "on-primary-pressed": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "accent": {
        "$type": "color",
        "$value": "#ddeeff"
      },
      "on-accent": {
        "$type": "color",
        "$value": "#203040"
      },
      "border": {
        "$type": "color",
        "$value": "#666666"
      },
      "focus": {
        "$type": "color",
        "$value": "{palettes.brand.light}"
      },
      "disabled": {
        "$type": "color",
        "$value": "#eeeeee"
      },
      "on-disabled": {
        "$type": "color",
        "$value": "#666666"
      },
      "spacing": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "dark": {
      "text": {
        "$type": "color",
        "$value": "{palettes.ink.dark}"
      },
      "background": {
        "$type": "color",
        "$value": "#222222"
      },
      "surface": {
        "$type": "color",
        "$value": "#222222"
      },
      "on-surface": {
        "$type": "color",
        "$value": "{palettes.ink.dark}"
      },
      "primary": {
        "$type": "color",
        "$value": "{palettes.brand.dark}"
      },
      "on-primary": {
        "$type": "color",
        "$value": "#111111"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "#bbccdd"
      },
      "on-primary-hover": {
        "$type": "color",
        "$value": "#111111"
      },
      "primary-pressed": {
        "$type": "color",
        "$value": "#ccddee"
      },
      "on-primary-pressed": {
        "$type": "color",
        "$value": "#111111"
      },
      "accent": {
        "$type": "color",
        "$value": "#345678"
      },
      "on-accent": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "border": {
        "$type": "color",
        "$value": "#999999"
      },
      "focus": {
        "$type": "color",
        "$value": "{palettes.brand.dark}"
      },
      "disabled": {
        "$type": "color",
        "$value": "#333333"
      },
      "on-disabled": {
        "$type": "color",
        "$value": "#999999"
      }
    }
  },
  "$extensions": {
    "projectMetadata": {
      "label": "preserve; this value",
      "spacing": {
        "$type": "dimension",
        "$value": "8px"
      }
    }
  }
}

===== JSON AFTER =====

{
  "$description": "Synthetic downstream JSON theme; preserve metadata and alias paths.",
  "palettes": {
    "ink": {
      "light": {
        "$type": "color",
        "$value": "#767676"
      },
      "dark": {
        "$type": "color",
        "$value": "#898989"
      }
    },
    "brand": {
      "light": {
        "$type": "color",
        "$value": "#234567"
      },
      "dark": {
        "$type": "color",
        "$value": "#aabbcc"
      }
    }
  },
  "themes": {
    "light": {
      "text": {
        "$type": "color",
        "$value": "{palettes.ink.light}"
      },
      "background": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "surface": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-surface": {
        "$type": "color",
        "$value": "{palettes.ink.light}"
      },
      "primary": {
        "$type": "color",
        "$value": "{palettes.brand.light}"
      },
      "on-primary": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "#17334f"
      },
      "on-primary-hover": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "primary-pressed": {
        "$type": "color",
        "$value": "#10253a"
      },
      "on-primary-pressed": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "accent": {
        "$type": "color",
        "$value": "#ddeeff"
      },
      "on-accent": {
        "$type": "color",
        "$value": "#203040"
      },
      "border": {
        "$type": "color",
        "$value": "#666666"
      },
      "focus": {
        "$type": "color",
        "$value": "{palettes.brand.light}"
      },
      "disabled": {
        "$type": "color",
        "$value": "#eeeeee"
      },
      "on-disabled": {
        "$type": "color",
        "$value": "#666666"
      },
      "spacing": {
        "$type": "dimension",
        "$value": "8px"
      }
    },
    "dark": {
      "text": {
        "$type": "color",
        "$value": "{palettes.ink.dark}"
      },
      "background": {
        "$type": "color",
        "$value": "#222222"
      },
      "surface": {
        "$type": "color",
        "$value": "#222222"
      },
      "on-surface": {
        "$type": "color",
        "$value": "{palettes.ink.dark}"
      },
      "primary": {
        "$type": "color",
        "$value": "{palettes.brand.dark}"
      },
      "on-primary": {
        "$type": "color",
        "$value": "#111111"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "#bbccdd"
      },
      "on-primary-hover": {
        "$type": "color",
        "$value": "#111111"
      },
      "primary-pressed": {
        "$type": "color",
        "$value": "#ccddee"
      },
      "on-primary-pressed": {
        "$type": "color",
        "$value": "#111111"
      },
      "accent": {
        "$type": "color",
        "$value": "#345678"
      },
      "on-accent": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "border": {
        "$type": "color",
        "$value": "#999999"
      },
      "focus": {
        "$type": "color",
        "$value": "{palettes.brand.dark}"
      },
      "disabled": {
        "$type": "color",
        "$value": "#333333"
      },
      "on-disabled": {
        "$type": "color",
        "$value": "#999999"
      }
    }
  },
  "$extensions": {
    "projectMetadata": {
      "label": "preserve; this value",
      "spacing": {
        "$type": "dimension",
        "$value": "8px"
      }
    }
  }
}

===== VERIFICATION SUMMARY (artifact names and SHA-256 hashes) =====

{
  "css": {
    "baselineMatchesFixture": true,
    "previewOnlyDownloadUnchanged": true,
    "onlyListedSourceValuesChanged": true,
    "changes": [
      {
        "source": "light --ink",
        "before": "#aaaaaa",
        "after": "#767676"
      },
      {
        "source": "dark --ink",
        "before": "#555555",
        "after": "#898989"
      }
    ],
    "beforeFailures": 6,
    "afterFailures": 2,
    "previousPassesPreserved": true,
    "independentlyRecomputedReportPairs": 24,
    "remainingFailures": [
      "light/accent/surface",
      "dark/accent/surface"
    ],
    "artifacts": {
      "css-before.css": "a5785524e2eecb996808db83f1ef82a4f3d02909ce862e7ffeab93b7f73e160d",
      "css-after-review.css": "a5785524e2eecb996808db83f1ef82a4f3d02909ce862e7ffeab93b7f73e160d",
      "css-repaired.css": "b709347dfbf793fbd2dc8b72b29a32085451326024ca1ecfa2ec9eb844a63190"
    }
  },
  "json": {
    "baselineMatchesFixture": true,
    "previewOnlyDownloadUnchanged": true,
    "onlyListedSourceValuesChanged": true,
    "changes": [
      {
        "source": "palettes.ink.light",
        "before": "#aaaaaa",
        "after": "#767676"
      },
      {
        "source": "palettes.ink.dark",
        "before": "#555555",
        "after": "#898989"
      }
    ],
    "beforeFailures": 6,
    "afterFailures": 2,
    "previousPassesPreserved": true,
    "independentlyRecomputedReportPairs": 24,
    "remainingFailures": [
      "light/accent/surface",
      "dark/accent/surface"
    ],
    "artifacts": {
      "json-before.json": "0122569da833cd9ac8cc9cad006c2894d46b26576641557a68f51d6bcab9fe02",
      "json-after-review.json": "0122569da833cd9ac8cc9cad006c2894d46b26576641557a68f51d6bcab9fe02",
      "json-repaired.json": "53d516504b726d6c16123664d3e47ae8c58f706269494fc7b8fd3e70f2353104"
    }
  }
}