feat(FN-3043): formalize theme swatch sample contract
- Replace implicit theme swatch rendering with explicit sample definitions in the custom model dropdown styling - Add ThemeSelectorSwatchContract regression tests to lock the swatch contract and prevent visual drift - Restore workspace lint/typecheck gate behavior in onboarding-related settings flows - Document the explicit swatch sample contract in dashboard README and related onboarding prompt/context updates Fusion-Task-Id: FN-3043
This commit is contained in:
Fusion
@@ -696,10 +696,6 @@ html .column.drag-over * {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
overflow: hidden;
|
||||
--swatch-sample-1: var(--bg);
|
||||
--swatch-sample-2: var(--surface);
|
||||
--swatch-sample-3: color-mix(in srgb, var(--swatch-sample-1) 65%, var(--swatch-sample-2) 35%);
|
||||
--swatch-sample-4: color-mix(in srgb, var(--swatch-sample-2) 65%, var(--swatch-sample-1) 35%);
|
||||
}
|
||||
|
||||
.theme-option-swatch-sample {
|
||||
@@ -732,499 +728,697 @@ html .column.drag-over * {
|
||||
|
||||
/* Theme preview swatch colors */
|
||||
.theme-swatch-default {
|
||||
--bg: #0d1117;
|
||||
--surface: #161b22;
|
||||
--swatch-sample-1: #0d1117;
|
||||
--swatch-sample-2: #161b22;
|
||||
--swatch-sample-3: #58a6ff;
|
||||
--swatch-sample-4: #79c0ff;
|
||||
}
|
||||
|
||||
.theme-swatch-ocean {
|
||||
--bg: #0a1929;
|
||||
--surface: #132f4c;
|
||||
--swatch-sample-1: #0a1929;
|
||||
--swatch-sample-2: #132f4c;
|
||||
--swatch-sample-3: #4fc3f7;
|
||||
--swatch-sample-4: #00bcd4;
|
||||
}
|
||||
|
||||
.theme-swatch-forest {
|
||||
--bg: #0d2818;
|
||||
--surface: #1a472a;
|
||||
--swatch-sample-1: #0d2818;
|
||||
--swatch-sample-2: #1a472a;
|
||||
--swatch-sample-3: #4caf50;
|
||||
--swatch-sample-4: #2e7d32;
|
||||
}
|
||||
|
||||
.theme-swatch-sunset {
|
||||
--bg: #2d1f1f;
|
||||
--surface: #4a2c2c;
|
||||
--swatch-sample-1: #2d1f1f;
|
||||
--swatch-sample-2: #4a2c2c;
|
||||
--swatch-sample-3: #ff8a65;
|
||||
--swatch-sample-4: #ff7043;
|
||||
}
|
||||
|
||||
.theme-swatch-zen {
|
||||
--bg: #0c0c0c;
|
||||
--surface: #111111;
|
||||
--swatch-sample-1: #0c0c0c;
|
||||
--swatch-sample-2: #111111;
|
||||
--swatch-sample-3: #6b7b8c;
|
||||
--swatch-sample-4: #7a8590;
|
||||
}
|
||||
|
||||
.theme-swatch-berry {
|
||||
--bg: #1a0b2e;
|
||||
--surface: #2d1b4e;
|
||||
--swatch-sample-1: #1a0b2e;
|
||||
--swatch-sample-2: #2d1b4e;
|
||||
--swatch-sample-3: #c084fc;
|
||||
--swatch-sample-4: #ec4899;
|
||||
}
|
||||
|
||||
.theme-swatch-monochrome {
|
||||
--bg: #0d0d0d;
|
||||
--surface: #1a1a1a;
|
||||
--swatch-sample-1: #0d0d0d;
|
||||
--swatch-sample-2: #1a1a1a;
|
||||
--swatch-sample-3: #a3a3a3;
|
||||
--swatch-sample-4: #d4d4d4;
|
||||
}
|
||||
|
||||
.theme-swatch-slate {
|
||||
--bg: #1e293b;
|
||||
--surface: #334155;
|
||||
--swatch-sample-1: #1e293b;
|
||||
--swatch-sample-2: #334155;
|
||||
--swatch-sample-3: #60a5fa;
|
||||
--swatch-sample-4: #22d3ee;
|
||||
}
|
||||
|
||||
.theme-swatch-ash {
|
||||
--bg: #292524;
|
||||
--surface: #44403c;
|
||||
--swatch-sample-1: #292524;
|
||||
--swatch-sample-2: #44403c;
|
||||
--swatch-sample-3: #a8a29e;
|
||||
--swatch-sample-4: #d6d3d1;
|
||||
}
|
||||
|
||||
.theme-swatch-graphite {
|
||||
--bg: #18181b;
|
||||
--surface: #27272a;
|
||||
--swatch-sample-1: #18181b;
|
||||
--swatch-sample-2: #27272a;
|
||||
--swatch-sample-3: #94a3b8;
|
||||
--swatch-sample-4: #cbd5e1;
|
||||
}
|
||||
|
||||
.theme-swatch-ember {
|
||||
--bg: #18181b;
|
||||
--surface: #27272a;
|
||||
--swatch-sample-1: #18181b;
|
||||
--swatch-sample-2: #27272a;
|
||||
--swatch-sample-3: #f97316;
|
||||
--swatch-sample-4: #ef4444;
|
||||
}
|
||||
|
||||
.theme-swatch-rust {
|
||||
--bg: #0f0b09;
|
||||
--surface: #1a1410;
|
||||
--swatch-sample-1: #0f0b09;
|
||||
--swatch-sample-2: #1a1410;
|
||||
--swatch-sample-3: #e06830;
|
||||
--swatch-sample-4: #e88040;
|
||||
}
|
||||
|
||||
.theme-swatch-copper {
|
||||
--bg: #0e0c0a;
|
||||
--surface: #181410;
|
||||
--swatch-sample-1: #0e0c0a;
|
||||
--swatch-sample-2: #181410;
|
||||
--swatch-sample-3: #e89545;
|
||||
--swatch-sample-4: #f0a858;
|
||||
}
|
||||
|
||||
.theme-swatch-foundry {
|
||||
--bg: #0c0806;
|
||||
--surface: #15100c;
|
||||
--swatch-sample-1: #0c0806;
|
||||
--swatch-sample-2: #15100c;
|
||||
--swatch-sample-3: #ffab20;
|
||||
--swatch-sample-4: #ffc040;
|
||||
}
|
||||
|
||||
.theme-swatch-carbon {
|
||||
--bg: #0a0b0d;
|
||||
--surface: #111318;
|
||||
--swatch-sample-1: #0a0b0d;
|
||||
--swatch-sample-2: #111318;
|
||||
--swatch-sample-3: #6a9acf;
|
||||
--swatch-sample-4: #7ab0e0;
|
||||
}
|
||||
|
||||
.theme-swatch-sandstone {
|
||||
--bg: #1a1712;
|
||||
--surface: #241f18;
|
||||
--swatch-sample-1: #1a1712;
|
||||
--swatch-sample-2: #241f18;
|
||||
--swatch-sample-3: #d4a06a;
|
||||
--swatch-sample-4: #e0b080;
|
||||
}
|
||||
|
||||
.theme-swatch-lagoon {
|
||||
--bg: #0a1214;
|
||||
--surface: #101c1f;
|
||||
--swatch-sample-1: #0a1214;
|
||||
--swatch-sample-2: #101c1f;
|
||||
--swatch-sample-3: #50d8c0;
|
||||
--swatch-sample-4: #60e8d0;
|
||||
}
|
||||
|
||||
.theme-swatch-frost {
|
||||
--bg: #0c0e14;
|
||||
--surface: #121520;
|
||||
--swatch-sample-1: #0c0e14;
|
||||
--swatch-sample-2: #121520;
|
||||
--swatch-sample-3: #8ac8f8;
|
||||
--swatch-sample-4: #9ad8ff;
|
||||
}
|
||||
|
||||
.theme-swatch-lavender {
|
||||
--bg: #14101a;
|
||||
--surface: #1c1624;
|
||||
--swatch-sample-1: #14101a;
|
||||
--swatch-sample-2: #1c1624;
|
||||
--swatch-sample-3: #c8a0e8;
|
||||
--swatch-sample-4: #d8b0f0;
|
||||
}
|
||||
|
||||
.theme-swatch-neon-bloom {
|
||||
--bg: #120a18;
|
||||
--surface: #1a1024;
|
||||
--swatch-sample-1: #120a18;
|
||||
--swatch-sample-2: #1a1024;
|
||||
--swatch-sample-3: #f080d0;
|
||||
--swatch-sample-4: #ff90e0;
|
||||
}
|
||||
|
||||
.theme-swatch-sepia {
|
||||
--bg: #161210;
|
||||
--surface: #201a16;
|
||||
--swatch-sample-1: #161210;
|
||||
--swatch-sample-2: #201a16;
|
||||
--swatch-sample-3: #d8b878;
|
||||
--swatch-sample-4: #e8c888;
|
||||
}
|
||||
|
||||
.theme-swatch-silver {
|
||||
--bg: #27272a;
|
||||
--surface: #3f3f46;
|
||||
--swatch-sample-1: #27272a;
|
||||
--swatch-sample-2: #3f3f46;
|
||||
--swatch-sample-3: #94a3b8;
|
||||
--swatch-sample-4: #e2e8f0;
|
||||
}
|
||||
|
||||
.theme-swatch-high-contrast {
|
||||
--bg: #000000;
|
||||
--surface: #0a0a0a;
|
||||
--swatch-sample-1: #000000;
|
||||
--swatch-sample-2: #0a0a0a;
|
||||
--swatch-sample-3: #00ffff;
|
||||
--swatch-sample-4: #ffff00;
|
||||
}
|
||||
|
||||
.theme-swatch-industrial {
|
||||
--bg: #0c0c0c;
|
||||
--surface: #1a1a1a;
|
||||
--swatch-sample-1: #0c0c0c;
|
||||
--swatch-sample-2: #141414;
|
||||
--swatch-sample-3: #ff6b00;
|
||||
--swatch-sample-4: #ff8c00;
|
||||
}
|
||||
|
||||
.theme-swatch-solarized {
|
||||
--bg: #002b36;
|
||||
--surface: #073642;
|
||||
--swatch-sample-1: #002b36;
|
||||
--swatch-sample-2: #073642;
|
||||
--swatch-sample-3: #268bd2;
|
||||
--swatch-sample-4: #2aa198;
|
||||
}
|
||||
|
||||
.theme-swatch-factory {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #111111;
|
||||
--swatch-sample-1: #0a0a0a;
|
||||
--swatch-sample-2: #111111;
|
||||
--swatch-sample-3: #f59e0b;
|
||||
--swatch-sample-4: #06b6d4;
|
||||
}
|
||||
|
||||
.theme-swatch-ayu {
|
||||
--bg: #0f1419;
|
||||
--surface: #131d27;
|
||||
--swatch-sample-1: #0f1419;
|
||||
--swatch-sample-2: #131d27;
|
||||
--swatch-sample-3: #39bae6;
|
||||
--swatch-sample-4: #ffb454;
|
||||
}
|
||||
|
||||
.theme-swatch-one-dark {
|
||||
--bg: #282c34;
|
||||
--surface: #21252b;
|
||||
--swatch-sample-1: #282c34;
|
||||
--swatch-sample-2: #21252b;
|
||||
--swatch-sample-3: #61afef;
|
||||
--swatch-sample-4: #00e5ff;
|
||||
}
|
||||
|
||||
.theme-swatch-nord {
|
||||
--bg: #2e3440;
|
||||
--surface: #3b4252;
|
||||
--swatch-sample-1: #2e3440;
|
||||
--swatch-sample-2: #3b4252;
|
||||
--swatch-sample-3: #88c0d0;
|
||||
--swatch-sample-4: #81a1c1;
|
||||
}
|
||||
|
||||
.theme-swatch-dracula {
|
||||
--bg: #282a36;
|
||||
--surface: #21222c;
|
||||
--swatch-sample-1: #282a36;
|
||||
--swatch-sample-2: #21222c;
|
||||
--swatch-sample-3: #8be9fd;
|
||||
--swatch-sample-4: #00e5ff;
|
||||
}
|
||||
|
||||
.theme-swatch-gruvbox {
|
||||
--bg: #282828;
|
||||
--surface: #1d2021;
|
||||
--swatch-sample-1: #282828;
|
||||
--swatch-sample-2: #1d2021;
|
||||
--swatch-sample-3: #83a598;
|
||||
--swatch-sample-4: #d3869b;
|
||||
}
|
||||
|
||||
.theme-swatch-tokyo-night {
|
||||
--bg: #1a1b26;
|
||||
--surface: #16161e;
|
||||
--swatch-sample-1: #1a1b26;
|
||||
--swatch-sample-2: #16161e;
|
||||
--swatch-sample-3: #7aa2f7;
|
||||
--swatch-sample-4: #00e5ff;
|
||||
}
|
||||
|
||||
.theme-swatch-catppuccin-mocha {
|
||||
--bg: #1e1e2e;
|
||||
--surface: #181825;
|
||||
--swatch-sample-1: #1e1e2e;
|
||||
--swatch-sample-2: #181825;
|
||||
--swatch-sample-3: #89b4fa;
|
||||
--swatch-sample-4: #89dceb;
|
||||
}
|
||||
|
||||
.theme-swatch-github-dark {
|
||||
--bg: #0d1117;
|
||||
--surface: #010409;
|
||||
--swatch-sample-1: #0d1117;
|
||||
--swatch-sample-2: #010409;
|
||||
--swatch-sample-3: #58a6ff;
|
||||
--swatch-sample-4: #79c0ff;
|
||||
}
|
||||
|
||||
.theme-swatch-everforest {
|
||||
--bg: #2d353b;
|
||||
--surface: #272e33;
|
||||
--swatch-sample-1: #2d353b;
|
||||
--swatch-sample-2: #272e33;
|
||||
--swatch-sample-3: #7fbbb3;
|
||||
--swatch-sample-4: #e0c8a8;
|
||||
}
|
||||
|
||||
.theme-swatch-rose-pine {
|
||||
--bg: #191724;
|
||||
--surface: #1f1d2e;
|
||||
--swatch-sample-1: #191724;
|
||||
--swatch-sample-2: #1f1d2e;
|
||||
--swatch-sample-3: #c4a7e7;
|
||||
--swatch-sample-4: #ebbcba;
|
||||
}
|
||||
|
||||
.theme-swatch-kanagawa {
|
||||
--bg: #1f1f28;
|
||||
--surface: #16161d;
|
||||
--swatch-sample-1: #1f1f28;
|
||||
--swatch-sample-2: #16161d;
|
||||
--swatch-sample-3: #7e9cd8;
|
||||
--swatch-sample-4: #7e9cd8;
|
||||
}
|
||||
|
||||
.theme-swatch-night-owl {
|
||||
--bg: #011627;
|
||||
--surface: #01111d;
|
||||
--swatch-sample-1: #011627;
|
||||
--swatch-sample-2: #01111d;
|
||||
--swatch-sample-3: #82aaff;
|
||||
--swatch-sample-4: #addb67;
|
||||
}
|
||||
|
||||
.theme-swatch-palenight {
|
||||
--bg: #292d3e;
|
||||
--surface: #1e2235;
|
||||
--swatch-sample-1: #292d3e;
|
||||
--swatch-sample-2: #1e2235;
|
||||
--swatch-sample-3: #82aaff;
|
||||
--swatch-sample-4: #ffcb6b;
|
||||
}
|
||||
|
||||
.theme-swatch-monokai-pro {
|
||||
--bg: #2d2a2e;
|
||||
--surface: #252229;
|
||||
--swatch-sample-1: #2d2a2e;
|
||||
--swatch-sample-2: #252229;
|
||||
--swatch-sample-3: #78dce8;
|
||||
--swatch-sample-4: #ff6188;
|
||||
}
|
||||
|
||||
.theme-swatch-slime {
|
||||
--bg: #0a0e09;
|
||||
--surface: #0f150d;
|
||||
--swatch-sample-1: #0a0e09;
|
||||
--swatch-sample-2: #0f150d;
|
||||
--swatch-sample-3: #8aff40;
|
||||
--swatch-sample-4: #40e8a0;
|
||||
}
|
||||
|
||||
.theme-swatch-brutalist {
|
||||
--bg: #101010;
|
||||
--surface: #1d1d1d;
|
||||
--swatch-sample-1: #101010;
|
||||
--swatch-sample-2: #171717;
|
||||
--swatch-sample-3: #ff6a00;
|
||||
--swatch-sample-4: #ffd100;
|
||||
}
|
||||
|
||||
.theme-swatch-neon-city {
|
||||
--bg: #0d0d15;
|
||||
--surface: #171933;
|
||||
--swatch-sample-1: #0d0d15;
|
||||
--swatch-sample-2: #121326;
|
||||
--swatch-sample-3: #ff2d95;
|
||||
--swatch-sample-4: #00f0ff;
|
||||
}
|
||||
|
||||
.theme-swatch-parchment {
|
||||
--bg: #1b1712;
|
||||
--surface: #2f281f;
|
||||
--swatch-sample-1: #1b1712;
|
||||
--swatch-sample-2: #252019;
|
||||
--swatch-sample-3: #d08a4b;
|
||||
--swatch-sample-4: #be6e3c;
|
||||
}
|
||||
|
||||
.theme-swatch-terminal {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #121712;
|
||||
--swatch-sample-1: #0a0a0a;
|
||||
--swatch-sample-2: #0f120d;
|
||||
--swatch-sample-3: #33ff00;
|
||||
--swatch-sample-4: #8fff38;
|
||||
}
|
||||
|
||||
.theme-swatch-glass {
|
||||
--bg: #13111f;
|
||||
--surface: #362c52;
|
||||
--swatch-sample-1: #13111f;
|
||||
--swatch-sample-2: rgba(34, 27, 52, 0.78);
|
||||
--swatch-sample-3: #c86bff;
|
||||
--swatch-sample-4: #ff7aa8;
|
||||
}
|
||||
|
||||
.theme-swatch-horizon {
|
||||
--bg: #1c1e26;
|
||||
--surface: #16161c;
|
||||
--swatch-sample-1: #1c1e26;
|
||||
--swatch-sample-2: #16161c;
|
||||
--swatch-sample-3: #e59371;
|
||||
--swatch-sample-4: #f08c42;
|
||||
}
|
||||
|
||||
.theme-swatch-vitesse {
|
||||
--bg: #121817;
|
||||
--surface: #0d1210;
|
||||
--swatch-sample-1: #121817;
|
||||
--swatch-sample-2: #0d1210;
|
||||
--swatch-sample-3: #4c9a91;
|
||||
--swatch-sample-4: #dca561;
|
||||
}
|
||||
|
||||
.theme-swatch-outrun {
|
||||
--bg: #0a0a14;
|
||||
--surface: #0d0d1a;
|
||||
--swatch-sample-1: #0a0a14;
|
||||
--swatch-sample-2: #0d0d1a;
|
||||
--swatch-sample-3: #ff2d95;
|
||||
--swatch-sample-4: #b537f2;
|
||||
}
|
||||
|
||||
.theme-swatch-snazzy {
|
||||
--bg: #282a36;
|
||||
--surface: #1e1f29;
|
||||
--swatch-sample-1: #282a36;
|
||||
--swatch-sample-2: #1e1f29;
|
||||
--swatch-sample-3: #ff5c57;
|
||||
--swatch-sample-4: #5af78e;
|
||||
}
|
||||
|
||||
.theme-swatch-porple {
|
||||
--bg: #292d3e;
|
||||
--surface: #1e2030;
|
||||
--swatch-sample-1: #292d3e;
|
||||
--swatch-sample-2: #1e2030;
|
||||
--swatch-sample-3: #c792ea;
|
||||
--swatch-sample-4: #82aaff;
|
||||
}
|
||||
|
||||
.theme-swatch-espresso {
|
||||
--bg: #2c1f1a;
|
||||
--surface: #231813;
|
||||
--swatch-sample-1: #2c1f1a;
|
||||
--swatch-sample-2: #231813;
|
||||
--swatch-sample-3: #d4a574;
|
||||
--swatch-sample-4: #c17d56;
|
||||
}
|
||||
|
||||
.theme-swatch-mars {
|
||||
--bg: #1a1210;
|
||||
--surface: #140e0c;
|
||||
--swatch-sample-1: #1a1210;
|
||||
--swatch-sample-2: #140e0c;
|
||||
--swatch-sample-3: #c1440e;
|
||||
--swatch-sample-4: #e77d3d;
|
||||
}
|
||||
|
||||
.theme-swatch-poimandres {
|
||||
--bg: #1a1b26;
|
||||
--surface: #14151f;
|
||||
--swatch-sample-1: #1a1b26;
|
||||
--swatch-sample-2: #14151f;
|
||||
--swatch-sample-3: #89ddff;
|
||||
--swatch-sample-4: #5de4c7;
|
||||
}
|
||||
|
||||
/* Light mode swatch overrides */
|
||||
[data-theme="light"] .theme-swatch-factory {
|
||||
--bg: #f5f5f5;
|
||||
--surface: #ffffff;
|
||||
--swatch-sample-1: #f5f5f5;
|
||||
--swatch-sample-2: #ffffff;
|
||||
--swatch-sample-3: #d97706;
|
||||
--swatch-sample-4: #0891b2;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-ayu {
|
||||
--bg: #fafafa;
|
||||
--surface: #f3f3f3;
|
||||
--swatch-sample-1: #fafafa;
|
||||
--swatch-sample-2: #f3f3f3;
|
||||
--swatch-sample-3: #007acc;
|
||||
--swatch-sample-4: #ff8f40;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-zen {
|
||||
--bg: #f5f5f5;
|
||||
--surface: #fafafa;
|
||||
--swatch-sample-1: #f5f5f5;
|
||||
--swatch-sample-2: #fafafa;
|
||||
--swatch-sample-3: #5a6a7a;
|
||||
--swatch-sample-4: #6a757f;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-nord {
|
||||
--bg: #eceff4;
|
||||
--surface: #e5e9f0;
|
||||
--swatch-sample-1: #eceff4;
|
||||
--swatch-sample-2: #e5e9f0;
|
||||
--swatch-sample-3: #5e81ac;
|
||||
--swatch-sample-4: #5e81ac;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-dracula {
|
||||
--bg: #f8f8f2;
|
||||
--surface: #efeefa;
|
||||
--swatch-sample-1: #f8f8f2;
|
||||
--swatch-sample-2: #efeefa;
|
||||
--swatch-sample-3: #0097a7;
|
||||
--swatch-sample-4: #00bcd4;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-gruvbox {
|
||||
--bg: #fbf1c7;
|
||||
--surface: #f2e5bc;
|
||||
--swatch-sample-1: #fbf1c7;
|
||||
--swatch-sample-2: #f2e5bc;
|
||||
--swatch-sample-3: #076678;
|
||||
--swatch-sample-4: #8f3f71;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-tokyo-night {
|
||||
--bg: #e1e2e7;
|
||||
--surface: #d5d6db;
|
||||
--swatch-sample-1: #e1e2e7;
|
||||
--swatch-sample-2: #d5d6db;
|
||||
--swatch-sample-3: #3b5ea5;
|
||||
--swatch-sample-4: #00bcd4;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-catppuccin-mocha {
|
||||
--bg: #eff1f5;
|
||||
--surface: #e6e9ef;
|
||||
--swatch-sample-1: #eff1f5;
|
||||
--swatch-sample-2: #e6e9ef;
|
||||
--swatch-sample-3: #1e66f5;
|
||||
--swatch-sample-4: #04a5e5;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-github-dark {
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f8fa;
|
||||
--swatch-sample-1: #ffffff;
|
||||
--swatch-sample-2: #f6f8fa;
|
||||
--swatch-sample-3: #0969da;
|
||||
--swatch-sample-4: #0969da;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-everforest {
|
||||
--bg: #fdf6e3;
|
||||
--surface: #f4f0d9;
|
||||
--swatch-sample-1: #fdf6e3;
|
||||
--swatch-sample-2: #f4f0d9;
|
||||
--swatch-sample-3: #3a94a5;
|
||||
--swatch-sample-4: #83a08a;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-rose-pine {
|
||||
--bg: #faf4ed;
|
||||
--surface: #fffaf3;
|
||||
--swatch-sample-1: #faf4ed;
|
||||
--swatch-sample-2: #fffaf3;
|
||||
--swatch-sample-3: #907aa9;
|
||||
--swatch-sample-4: #b4637a;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-kanagawa {
|
||||
--bg: #edeadd;
|
||||
--surface: #e1ddd4;
|
||||
--swatch-sample-1: #edeadd;
|
||||
--swatch-sample-2: #e1ddd4;
|
||||
--swatch-sample-3: #4e76b5;
|
||||
--swatch-sample-4: #4e76b5;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-one-dark {
|
||||
--bg: #fafafa;
|
||||
--surface: #f0f0f0;
|
||||
--swatch-sample-1: #fafafa;
|
||||
--swatch-sample-2: #f0f0f0;
|
||||
--swatch-sample-3: #4078f2;
|
||||
--swatch-sample-4: #0184bc;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-night-owl {
|
||||
--bg: #f6f7f9;
|
||||
--surface: #eef0f4;
|
||||
--swatch-sample-1: #f6f7f9;
|
||||
--swatch-sample-2: #eef0f4;
|
||||
--swatch-sample-3: #2563eb;
|
||||
--swatch-sample-4: #5a9e2f;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-palenight {
|
||||
--bg: #f5f7fa;
|
||||
--surface: #ebeef5;
|
||||
--swatch-sample-1: #f5f7fa;
|
||||
--swatch-sample-2: #ebeef5;
|
||||
--swatch-sample-3: #3b6fcf;
|
||||
--swatch-sample-4: #c49020;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-monokai-pro {
|
||||
--bg: #faf8f5;
|
||||
--surface: #f0ece5;
|
||||
--swatch-sample-1: #faf8f5;
|
||||
--swatch-sample-2: #f0ece5;
|
||||
--swatch-sample-3: #2d8fa0;
|
||||
--swatch-sample-4: #c4405e;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-slime {
|
||||
--bg: #f2f7ea;
|
||||
--surface: #e6efda;
|
||||
--swatch-sample-1: #f2f7ea;
|
||||
--swatch-sample-2: #e6efda;
|
||||
--swatch-sample-3: #3d8f10;
|
||||
--swatch-sample-4: #1a8a6a;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-brutalist {
|
||||
--bg: #ece9e4;
|
||||
--surface: #f7f4ef;
|
||||
--swatch-sample-1: #ece9e4;
|
||||
--swatch-sample-2: #f7f4ef;
|
||||
--swatch-sample-3: #d9480f;
|
||||
--swatch-sample-4: #b8860b;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-neon-city {
|
||||
--bg: #f7f5ff;
|
||||
--surface: #f1edff;
|
||||
--swatch-sample-1: #f7f5ff;
|
||||
--swatch-sample-2: #f1edff;
|
||||
--swatch-sample-3: #cc166e;
|
||||
--swatch-sample-4: #008e9b;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-parchment {
|
||||
--bg: #f5f0e8;
|
||||
--surface: #efe7dc;
|
||||
--swatch-sample-1: #f5f0e8;
|
||||
--swatch-sample-2: #efe7dc;
|
||||
--swatch-sample-3: #a8562f;
|
||||
--swatch-sample-4: #8f4e2a;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-terminal {
|
||||
--bg: #e7f5dd;
|
||||
--surface: #deefd2;
|
||||
--swatch-sample-1: #e7f5dd;
|
||||
--swatch-sample-2: #deefd2;
|
||||
--swatch-sample-3: #2d6b14;
|
||||
--swatch-sample-4: #4c8f25;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-glass {
|
||||
--bg: #eceaf5;
|
||||
--surface: #ffffff;
|
||||
--swatch-sample-1: #eceaf5;
|
||||
--swatch-sample-2: rgba(255, 255, 255, 0.75);
|
||||
--swatch-sample-3: #9d40cf;
|
||||
--swatch-sample-4: #c74b7a;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-slate {
|
||||
--bg: #f1f5f9;
|
||||
--surface: #e2e8f0;
|
||||
--swatch-sample-1: #f1f5f9;
|
||||
--swatch-sample-2: #e2e8f0;
|
||||
--swatch-sample-3: #3b5ea5;
|
||||
--swatch-sample-4: #4f7090;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-ash {
|
||||
--bg: #fafaf9;
|
||||
--surface: #f5f5f4;
|
||||
--swatch-sample-1: #fafaf9;
|
||||
--swatch-sample-2: #f5f5f4;
|
||||
--swatch-sample-3: #5a6a7a;
|
||||
--swatch-sample-4: #768694;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-graphite {
|
||||
--bg: #fafafa;
|
||||
--surface: #f4f4f5;
|
||||
--swatch-sample-1: #fafafa;
|
||||
--swatch-sample-2: #f4f4f5;
|
||||
--swatch-sample-3: #6f7f90;
|
||||
--swatch-sample-4: #8a99aa;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-ember {
|
||||
--bg: #fafafa;
|
||||
--surface: #f4f4f5;
|
||||
--swatch-sample-1: #fafafa;
|
||||
--swatch-sample-2: #f4f4f5;
|
||||
--swatch-sample-3: #d9480f;
|
||||
--swatch-sample-4: #e8646a;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-rust {
|
||||
--bg: #f5efe8;
|
||||
--surface: #ebe3d8;
|
||||
--swatch-sample-1: #f5efe8;
|
||||
--swatch-sample-2: #ebe3d8;
|
||||
--swatch-sample-3: #a04020;
|
||||
--swatch-sample-4: #b85828;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-copper {
|
||||
--bg: #f3ede6;
|
||||
--surface: #e8e0d6;
|
||||
--swatch-sample-1: #f3ede6;
|
||||
--swatch-sample-2: #e8e0d6;
|
||||
--swatch-sample-3: #905820;
|
||||
--swatch-sample-4: #a87030;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-foundry {
|
||||
--bg: #f5f0e6;
|
||||
--surface: #ebe4d6;
|
||||
--swatch-sample-1: #f5f0e6;
|
||||
--swatch-sample-2: #ebe4d6;
|
||||
--swatch-sample-3: #c07808;
|
||||
--swatch-sample-4: #d08a10;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-carbon {
|
||||
--bg: #eef0f4;
|
||||
--surface: #e2e6ec;
|
||||
--swatch-sample-1: #eef0f4;
|
||||
--swatch-sample-2: #e2e6ec;
|
||||
--swatch-sample-3: #3a6090;
|
||||
--swatch-sample-4: #4878a0;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-sandstone {
|
||||
--bg: #f5f0e8;
|
||||
--surface: #ebe4d8;
|
||||
--swatch-sample-1: #f5f0e8;
|
||||
--swatch-sample-2: #ebe4d8;
|
||||
--swatch-sample-3: #a07040;
|
||||
--swatch-sample-4: #b08050;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-lagoon {
|
||||
--bg: #eef5f3;
|
||||
--surface: #e0ebe8;
|
||||
--swatch-sample-1: #eef5f3;
|
||||
--swatch-sample-2: #e0ebe8;
|
||||
--swatch-sample-3: #208070;
|
||||
--swatch-sample-4: #289080;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-frost {
|
||||
--bg: #f0f4f8;
|
||||
--surface: #e4eaf0;
|
||||
--swatch-sample-1: #f0f4f8;
|
||||
--swatch-sample-2: #e4eaf0;
|
||||
--swatch-sample-3: #3078a8;
|
||||
--swatch-sample-4: #4088b8;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-lavender {
|
||||
--bg: #f4f0f8;
|
||||
--surface: #e8e2f0;
|
||||
--swatch-sample-1: #f4f0f8;
|
||||
--swatch-sample-2: #e8e2f0;
|
||||
--swatch-sample-3: #8060a0;
|
||||
--swatch-sample-4: #9070b0;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-neon-bloom {
|
||||
--bg: #f8f0f8;
|
||||
--surface: #f0e4f0;
|
||||
--swatch-sample-1: #f8f0f8;
|
||||
--swatch-sample-2: #f0e4f0;
|
||||
--swatch-sample-3: #a03090;
|
||||
--swatch-sample-4: #b040a0;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-sepia {
|
||||
--bg: #f5f0e4;
|
||||
--surface: #ece4d4;
|
||||
--swatch-sample-1: #f5f0e4;
|
||||
--swatch-sample-2: #ece4d4;
|
||||
--swatch-sample-3: #907040;
|
||||
--swatch-sample-4: #a08050;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-silver {
|
||||
--bg: #fafafa;
|
||||
--surface: #f4f4f5;
|
||||
--swatch-sample-1: #fafafa;
|
||||
--swatch-sample-2: #f4f4f5;
|
||||
--swatch-sample-3: #6b7280;
|
||||
--swatch-sample-4: #9ca3af;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-horizon {
|
||||
--bg: #fdf0ed;
|
||||
--surface: #f9cec0;
|
||||
--swatch-sample-1: #fdf0ed;
|
||||
--swatch-sample-2: #f9cec0;
|
||||
--swatch-sample-3: #e8646a;
|
||||
--swatch-sample-4: #f08c42;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-vitesse {
|
||||
--bg: #f8f5f0;
|
||||
--surface: #efe9e0;
|
||||
--swatch-sample-1: #f8f5f0;
|
||||
--swatch-sample-2: #efe9e0;
|
||||
--swatch-sample-3: #3a8578;
|
||||
--swatch-sample-4: #c08040;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-outrun {
|
||||
--bg: #f0f0f5;
|
||||
--surface: #e8e8ef;
|
||||
--swatch-sample-1: #f0f0f5;
|
||||
--swatch-sample-2: #e8e8ef;
|
||||
--swatch-sample-3: #d02080;
|
||||
--swatch-sample-4: #9030c8;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-snazzy {
|
||||
--bg: #fafafa;
|
||||
--surface: #f0f0f2;
|
||||
--swatch-sample-1: #fafafa;
|
||||
--swatch-sample-2: #f0f0f2;
|
||||
--swatch-sample-3: #d04040;
|
||||
--swatch-sample-4: #30a050;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-porple {
|
||||
--bg: #f5f3f7;
|
||||
--surface: #eae7ef;
|
||||
--swatch-sample-1: #f5f3f7;
|
||||
--swatch-sample-2: #eae7ef;
|
||||
--swatch-sample-3: #9060d8;
|
||||
--swatch-sample-4: #4080c8;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-espresso {
|
||||
--bg: #f5ece4;
|
||||
--surface: #ebe1d6;
|
||||
--swatch-sample-1: #f5ece4;
|
||||
--swatch-sample-2: #ebe1d6;
|
||||
--swatch-sample-3: #a07050;
|
||||
--swatch-sample-4: #906040;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-mars {
|
||||
--bg: #f5ece6;
|
||||
--surface: #ebe0d4;
|
||||
--swatch-sample-1: #f5ece6;
|
||||
--swatch-sample-2: #ebe0d4;
|
||||
--swatch-sample-3: #a03010;
|
||||
--swatch-sample-4: #c06030;
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-poimandres {
|
||||
--bg: #f0f0f5;
|
||||
--surface: #e6e6ee;
|
||||
--swatch-sample-1: #f0f0f5;
|
||||
--swatch-sample-2: #e6e6ee;
|
||||
--swatch-sample-3: #4090c0;
|
||||
--swatch-sample-4: #30a090;
|
||||
}
|
||||
|
||||
/* Reset to defaults button */
|
||||
|
||||
Reference in New Issue
Block a user