.ui-swatch--accent .ui-swatch__light { background: #FE4A23; }
.ui-swatch--accent .ui-swatch__dark { background: #FE4A23; }
.ui-swatch--accent-hover .ui-swatch__light { background: #e53d18; }
.ui-swatch--accent-hover .ui-swatch__dark { background: #e53d18; }
.ui-swatch--accent-soft .ui-swatch__light { background: #fff1ec; }
.ui-swatch--accent-soft .ui-swatch__dark { background: rgba(254, 74, 35, 0.14); }
.ui-swatch--on-accent .ui-swatch__light { background: #ffffff; }
.ui-swatch--on-accent .ui-swatch__dark { background: #ffffff; }
.ui-swatch--ink .ui-swatch__light { background: #11183a; }
.ui-swatch--ink .ui-swatch__dark { background: #f1f3f8; }
.ui-swatch--ink-deep .ui-swatch__light { background: #0A0E27; }
.ui-swatch--ink-deep .ui-swatch__dark { background: #0A0E27; }
.ui-swatch--muted .ui-swatch__light { background: #6b7080; }
.ui-swatch--muted .ui-swatch__dark { background: #9aa3b5; }
.ui-swatch--faint .ui-swatch__light { background: #9a9ca8; }
.ui-swatch--faint .ui-swatch__dark { background: #7d8499; }
.ui-swatch--background .ui-swatch__light { background: #f8f9fa; }
.ui-swatch--background .ui-swatch__dark { background: #0e1226; }
.ui-swatch--background-dot .ui-swatch__light { background: #e1e5e8; }
.ui-swatch--background-dot .ui-swatch__dark { background: rgba(255, 255, 255, 0.07); }
.ui-swatch--surface .ui-swatch__light { background: #ffffff; }
.ui-swatch--surface .ui-swatch__dark { background: #151a33; }
.ui-swatch--border .ui-swatch__light { background: #e8e6e0; }
.ui-swatch--border .ui-swatch__dark { background: rgba(255, 255, 255, 0.1); }
.ui-swatch--border-strong .ui-swatch__light { background: #858a97; }
.ui-swatch--border-strong .ui-swatch__dark { background: rgba(255, 255, 255, 0.4); }
.ui-swatch--divider .ui-swatch__light { background: #efede8; }
.ui-swatch--divider .ui-swatch__dark { background: rgba(255, 255, 255, 0.06); }
.ui-swatch--hover .ui-swatch__light { background: #f7f6f3; }
.ui-swatch--hover .ui-swatch__dark { background: rgba(255, 255, 255, 0.06); }
.ui-swatch--online .ui-swatch__light { background: #2f9e5b; }
.ui-swatch--online .ui-swatch__dark { background: #2f9e5b; }
.ui-swatch--cream .ui-swatch__light { background: #f5f3ec; }
.ui-swatch--cream .ui-swatch__dark { background: #f5f3ec; }
.ui-swatch--warm-neutral .ui-swatch__light { background: #f4f4f1; }
.ui-swatch--warm-neutral .ui-swatch__dark { background: #f4f4f1; }
.ui-swatch--success .ui-swatch__light { background: #16a34a; }
.ui-swatch--success .ui-swatch__dark { background: #1DC959; }
.ui-swatch--info .ui-swatch__light { background: #0ea5e9; }
.ui-swatch--info .ui-swatch__dark { background: #6AB5FB; }
.ui-swatch--warning .ui-swatch__light { background: #f59e0b; }
.ui-swatch--warning .ui-swatch__dark { background: #FBB56A; }
.ui-swatch--error .ui-swatch__light { background: #dc2626; }
.ui-swatch--error .ui-swatch__dark { background: #FF5757; }
/* A logo or a file shown on its own background, fixed whatever the page's mode: the light files need the light surface. */
.ui-on-dark { background: #0A0E27; }
.ui-on-light, .ui-preview--light { background: #ffffff; }