monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat:greyhaven redesign

Browse Source
This commit is contained in:
Nik L
2026-02-27 17:59:28 -05:00
parent a94f564ff0
commit 89370ba49f
9 changed files with 440 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/public/oc-theme-preload.js
View File

@@ -9,7 +9,7 @@
document.documentElement.dataset.theme = themeId
document.documentElement.dataset.colorScheme = mode
if (themeId === "oc-1") return
if (themeId === "oc-2") return
var css = localStorage.getItem("opencode-theme-css-" + themeId + "-" + mode)
if (css) {

2
packages/app/src/context/language.tsx
View File

@@ -192,7 +192,7 @@ export const { use: useLanguage, provider: LanguageProvider } = createSimpleCont
const [store, setStore, _, ready] = persisted(
Persist.global("language", ["language.v1"]),
createStore({
locale: detectLocale() as Locale,
locale: "en" as Locale,
}),
)

2
packages/app/src/context/layout.tsx
View File

@@ -161,7 +161,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
{ ...target, migrate },
createStore({
sidebar: {
opened: false,
opened: true,
width: DEFAULT_PANEL_WIDTH,
workspaces: {} as Record<string, boolean>,
workspacesDefault: false,

4
packages/ui/src/components/message-part.css
View File

@@ -97,8 +97,8 @@
white-space: pre-wrap;
word-break: break-word;
overflow: hidden;
background: var(--surface-base);
border: 1px solid var(--border-weak-base);
background: var(--surface-interactive-weak);
border: 1px solid #d95e2a22;
padding: 8px 12px;
border-radius: 6px;

426
packages/ui/src/styles/colors.css
View File

@@ -1,244 +1,196 @@
:root {
--gray-dark-1: #161616;
--gray-dark-2: #1c1c1c;
--gray-dark-3: #232323;
--gray-dark-4: #282828;
--gray-dark-5: #2e2e2e;
--gray-dark-6: #343434;
--gray-dark-7: #3e3e3e;
--gray-dark-8: #505050;
--gray-dark-9: #707070;
--gray-dark-10: #7e7e7e;
--gray-dark-11: #a0a0a0;
--gray-dark-12: #ededed;
--gray-light-1: #fcfcfc;
--gray-light-2: #f8f8f8;
--gray-light-3: #f3f3f3;
--gray-light-4: #ededed;
--gray-light-5: #e8e8e8;
--gray-light-6: #e2e2e2;
--gray-light-7: #dbdbdb;
--gray-light-8: #c7c7c7;
--gray-light-9: #8f8f8f;
--gray-light-10: #858585;
--gray-light-11: #6f6f6f;
--gray-light-12: #171717;
--gray-dark-alpha-1: #00000000;
--gray-dark-alpha-2: #ffffff08;
--gray-dark-alpha-3: #ffffff0f;
--gray-dark-alpha-4: #ffffff14;
--gray-dark-alpha-5: #ffffff1a;
--gray-dark-alpha-6: #ffffff21;
--gray-dark-alpha-7: #ffffff2b;
--gray-dark-alpha-8: #ffffff40;
--gray-dark-alpha-9: #ffffff63;
--gray-dark-alpha-10: #ffffff73;
--gray-dark-alpha-11: #ffffff96;
--gray-dark-alpha-12: #ffffffeb;
--gray-light-alpha-1: #00000003;
--gray-light-alpha-2: #00000008;
--gray-light-alpha-3: #0000000d;
--gray-light-alpha-4: #00000012;
--gray-light-alpha-5: #00000017;
--gray-light-alpha-6: #0000001c;
--gray-light-alpha-7: #00000024;
--gray-light-alpha-8: #00000038;
--gray-light-alpha-9: #00000070;
--gray-dark-1: #080804;
--gray-dark-2: #0e0e09;
--gray-dark-3: #161611;
--gray-dark-4: #20201a;
--gray-dark-5: #292924;
--gray-dark-6: #363630;
--gray-dark-7: #484842;
--gray-dark-8: #696963;
--gray-dark-9: #7b7b74;
--gray-dark-10: #93938c;
--gray-dark-11: #c5c5bd;
--gray-dark-12: #f2f2eb;
--gray-light-1: #fefef6;
--gray-light-2: #f9f9f1;
--gray-light-3: #f2f2eb;
--gray-light-4: #ecece4;
--gray-light-5: #e2e2da;
--gray-light-6: #d8d8d1;
--gray-light-7: #cbcbc4;
--gray-light-8: #b8b8b1;
--gray-light-9: #878780;
--gray-light-10: #75756e;
--gray-light-11: #585852;
--gray-light-12: #161611;
--gray-dark-alpha-1: #ffffff03;
--gray-dark-alpha-2: #ffffd10b;
--gray-dark-alpha-3: #ffffc516;
--gray-dark-alpha-4: #ffffdd1e;
--gray-dark-alpha-5: #fffff226;
--gray-dark-alpha-6: #fffffa31;
--gray-dark-alpha-7: #ffffff3f;
--gray-dark-alpha-8: #ffffff59;
--gray-dark-alpha-9: #ffffff67;
--gray-dark-alpha-10: #ffffff76;
--gray-dark-alpha-11: #ffffffb2;
--gray-dark-alpha-12: #fffffaf0;
--gray-light-alpha-1: #aaaa0003;
--gray-light-alpha-2: #24240007;
--gray-light-alpha-3: #2222000f;
--gray-light-alpha-4: #2c2c0017;
--gray-light-alpha-5: #1010001f;
--gray-light-alpha-6: #00000026;
--gray-light-alpha-7: #00000032;
--gray-light-alpha-8: #00000044;
--gray-light-alpha-9: #00000074;
--gray-light-alpha-10: #0000007a;
--gray-light-alpha-11: #0000008f;
--gray-light-alpha-12: #000000e8;
--gray-dark-1: #131010;
--gray-dark-2: #1b1818;
--gray-dark-3: #252121;
--gray-dark-4: #2d2828;
--gray-dark-5: #343030;
--gray-dark-6: #3e3939;
--gray-dark-7: #4b4646;
--gray-dark-8: #645f5f;
--gray-dark-9: #716c6b;
--gray-dark-10: #7f7979;
--gray-dark-11: #b7b1b1;
--gray-dark-12: #f1ecec;
--gray-light-1: #fdfcfc;
--gray-light-2: #f9f8f8;
--gray-light-3: #f1f0f0;
--gray-light-4: #e9e8e8;
--gray-light-5: #e2e0e0;
--gray-light-6: #dad9d9;
--gray-light-7: #cfcecd;
--gray-light-8: #bcbbbb;
--gray-light-9: #8e8b8b;
--gray-light-10: #848181;
--gray-light-11: #656363;
--gray-light-12: #211e1e;
--gray-dark-alpha-1: #82383803;
--gray-dark-alpha-2: #e6c6c60b;
--gray-dark-alpha-3: #edd5d516;
--gray-dark-alpha-4: #f2e1e11e;
--gray-dark-alpha-5: #f5e8e826;
--gray-dark-alpha-6: #f5e8e831;
--gray-dark-alpha-7: #f7ecec3f;
--gray-dark-alpha-8: #faf5f559;
--gray-dark-alpha-9: #faf5f467;
--gray-dark-alpha-10: #fbf5f576;
--gray-dark-alpha-11: #fcf9f9b2;
--gray-dark-alpha-12: #fdfbfbf0;
--gray-light-alpha-1: #55000003;
--gray-light-alpha-2: #25000007;
--gray-light-alpha-3: #1100000f;
--gray-light-alpha-4: #0c000017;
--gray-light-alpha-5: #1100001f;
--gray-light-alpha-6: #07000026;
--gray-light-alpha-7: #0b060032;
--gray-light-alpha-8: #04000044;
--gray-light-alpha-9: #07000074;
--gray-light-alpha-10: #0400009c;
--gray-light-alpha-11: #0700007e;
--gray-light-alpha-12: #020000df;
--smoke-dark-1: #131010;
--smoke-dark-2: #1b1818;
--smoke-dark-3: #252121;
--smoke-dark-4: #2d2828;
--smoke-dark-5: #343030;
--smoke-dark-6: #3e3939;
--smoke-dark-7: #4b4646;
--smoke-dark-8: #645f5f;
--smoke-dark-9: #716c6b;
--smoke-dark-10: #7f7979;
--smoke-dark-11: #b7b1b1;
--smoke-dark-12: #f1ecec;
--smoke-light-1: #fdfcfc;
--smoke-light-2: #f9f8f8;
--smoke-light-3: #f1f0f0;
--smoke-light-4: #e9e8e8;
--smoke-light-5: #e2e0e0;
--smoke-light-6: #dad9d9;
--smoke-light-7: #cfcecd;
--smoke-light-8: #bcbbbb;
--smoke-light-9: #8e8b8b;
--smoke-light-10: #848181;
--smoke-light-11: #656363;
--smoke-light-12: #211e1e;
--smoke-dark-alpha-1: #82383803;
--smoke-dark-alpha-2: #e6c6c60b;
--smoke-dark-alpha-3: #edd5d516;
--smoke-dark-alpha-4: #f2e1e11e;
--smoke-dark-alpha-5: #f5e8e826;
--smoke-dark-alpha-6: #f5e8e831;
--smoke-dark-alpha-7: #f7ecec3f;
--smoke-dark-alpha-8: #faf5f559;
--smoke-dark-alpha-9: #faf5f467;
--smoke-dark-alpha-10: #fbf5f576;
--smoke-dark-alpha-11: #fcf9f9b2;
--smoke-dark-alpha-12: #fdfbfbf0;
--smoke-light-alpha-1: #55000003;
--smoke-light-alpha-2: #25000007;
--smoke-light-alpha-3: #1100000f;
--smoke-light-alpha-4: #0c000017;
--smoke-light-alpha-5: #1100001f;
--smoke-light-alpha-6: #07000026;
--smoke-light-alpha-7: #0b060032;
--smoke-light-alpha-8: #04000044;
--smoke-light-alpha-9: #07000074;
--smoke-light-alpha-10: #0400009c;
--smoke-light-alpha-11: #0700007e;
--smoke-light-alpha-12: #020000df;
--yuzu-dark-1: #11120c;
--yuzu-light-1: #fdfdfb;
--yuzu-light-2: #fbfceb;
--yuzu-light-3: #f8fac5;
--yuzu-light-4: #f2f4a5;
--yuzu-light-5: #e9eb9a;
--yuzu-light-6: #dcde8e;
--yuzu-light-7: #cccd7e;
--yuzu-light-8: #b6b768;
--yuzu-light-9: #dcde8d;
--yuzu-light-10: #d2d384;
--yuzu-light-11: #7c7c2c;
--yuzu-light-12: #3d3d23;
--yuzu-dark-2: #181810;
--yuzu-dark-3: #262614;
--yuzu-dark-4: #313115;
--yuzu-dark-5: #3d3d18;
--yuzu-dark-6: #4a4a21;
--yuzu-dark-7: #5a5b2c;
--yuzu-dark-8: #6f6f36;
--yuzu-dark-9: #fdffca;
--yuzu-dark-10: #f4f6c1;
--yuzu-dark-11: #dbdda0;
--yuzu-dark-12: #eff1bd;
--yuzu-dark-alpha-1: #11910002;
--yuzu-dark-alpha-2: #f1f10008;
--yuzu-dark-alpha-3: #fafa3317;
--yuzu-dark-alpha-4: #fbfb2f23;
--yuzu-dark-alpha-5: #fbfb3730;
--yuzu-dark-alpha-6: #fcfc533e;
--yuzu-dark-alpha-7: #fafd6750;
--yuzu-dark-alpha-8: #ffff6f65;
--yuzu-dark-alpha-9: #fdffca;
--yuzu-dark-alpha-10: #fcfec7f6;
--yuzu-dark-alpha-11: #fdffb8db;
--yuzu-dark-alpha-12: #fdffc8f0;
--yuzu-light-alpha-1: #80800004;
--yuzu-light-alpha-2: #ccd90014;
--yuzu-light-alpha-3: #e1ea003a;
--yuzu-light-alpha-4: #dbe0015a;
--yuzu-light-alpha-5: #c8cd0065;
--yuzu-light-alpha-6: #b1b50071;
--yuzu-light-alpha-7: #9b9d0081;
--yuzu-light-alpha-8: #84860097;
--yuzu-light-alpha-9: #b1b60072;
--yuzu-light-alpha-10: #a2a4017b;
--yuzu-light-alpha-11: #616100d3;
--yuzu-light-alpha-12: #1e1e00dc;
--cobalt-dark-1: #091120;
--cobalt-dark-2: #0d172b;
--cobalt-dark-3: #0c2255;
--cobalt-dark-4: #0c2a74;
--cobalt-dark-5: #113489;
--cobalt-dark-6: #18409b;
--cobalt-dark-7: #204cb1;
--cobalt-dark-8: #2558d0;
--cobalt-dark-9: #034cff;
--cobalt-dark-10: #0038ee;
--cobalt-dark-11: #89b5ff;
--cobalt-dark-12: #cde2ff;
--cobalt-light-1: #fcfdff;
--cobalt-light-2: #f5faff;
--cobalt-light-3: #eaf2ff;
--cobalt-light-4: #daeaff;
--cobalt-light-5: #c8e0ff;
--cobalt-light-6: #b4d2ff;
--cobalt-light-7: #98bfff;
--cobalt-dark-alpha-1: #0011f211;
--cobalt-dark-alpha-2: #0048fe1c;
--cobalt-dark-alpha-3: #004dff49;
--cobalt-dark-alpha-4: #064dfd6b;
--cobalt-dark-alpha-5: #1157ff81;
--cobalt-dark-alpha-6: #1e62ff94;
--cobalt-dark-alpha-7: #2768feac;
--cobalt-dark-alpha-8: #2a6affcd;
--cobalt-dark-alpha-9: #034cff;
--cobalt-dark-alpha-10: #003bffed;
--cobalt-dark-alpha-11: #89b5ff;
--cobalt-light-8: #73a4ff;
--cobalt-dark-alpha-12: #cde2ff;
--cobalt-light-9: #034cff;
--cobalt-light-10: #0443de;
--cobalt-light-11: #1251ec;
--cobalt-light-12: #0f2b6c;
--cobalt-light-alpha-1: #0055ff03;
--cobalt-light-alpha-2: #0080ff0a;
--cobalt-light-alpha-3: #0062ff15;
--cobalt-light-alpha-4: #006fff25;
--cobalt-light-alpha-5: #0070ff37;
--cobalt-light-alpha-6: #0167ff4b;
--cobalt-light-alpha-7: #0061ff67;
--cobalt-light-alpha-8: #005aff8c;
--cobalt-light-alpha-9: #004afffc;
--cobalt-light-alpha-10: #0040ddfb;
--cobalt-light-alpha-11: #0044ebed;
--cobalt-light-alpha-12: #001e63f0;
--smoke-dark-1: #080804;
--smoke-dark-2: #0e0e09;
--smoke-dark-3: #161611;
--smoke-dark-4: #20201a;
--smoke-dark-5: #292924;
--smoke-dark-6: #363630;
--smoke-dark-7: #484842;
--smoke-dark-8: #696963;
--smoke-dark-9: #7b7b74;
--smoke-dark-10: #93938c;
--smoke-dark-11: #c5c5bd;
--smoke-dark-12: #f2f2eb;
--smoke-light-1: #fefef6;
--smoke-light-2: #f9f9f1;
--smoke-light-3: #f2f2eb;
--smoke-light-4: #ecece4;
--smoke-light-5: #e2e2da;
--smoke-light-6: #d8d8d1;
--smoke-light-7: #cbcbc4;
--smoke-light-8: #b8b8b1;
--smoke-light-9: #878780;
--smoke-light-10: #75756e;
--smoke-light-11: #585852;
--smoke-light-12: #161611;
--smoke-dark-alpha-1: #ffffff03;
--smoke-dark-alpha-2: #ffffd10b;
--smoke-dark-alpha-3: #ffffc516;
--smoke-dark-alpha-4: #ffffdd1e;
--smoke-dark-alpha-5: #fffff226;
--smoke-dark-alpha-6: #fffffa31;
--smoke-dark-alpha-7: #ffffff3f;
--smoke-dark-alpha-8: #ffffff59;
--smoke-dark-alpha-9: #ffffff67;
--smoke-dark-alpha-10: #ffffff76;
--smoke-dark-alpha-11: #ffffffb2;
--smoke-dark-alpha-12: #fffffaf0;
--smoke-light-alpha-1: #aaaa0003;
--smoke-light-alpha-2: #24240007;
--smoke-light-alpha-3: #2222000f;
--smoke-light-alpha-4: #2c2c0017;
--smoke-light-alpha-5: #1010001f;
--smoke-light-alpha-6: #00000026;
--smoke-light-alpha-7: #00000032;
--smoke-light-alpha-8: #00000044;
--smoke-light-alpha-9: #00000074;
--smoke-light-alpha-10: #0000007a;
--smoke-light-alpha-11: #0000008f;
--smoke-light-alpha-12: #000000e8;
--yuzu-dark-1: #140804;
--yuzu-dark-2: #1e0c06;
--yuzu-dark-3: #2d1107;
--yuzu-dark-4: #3e1607;
--yuzu-dark-5: #55210b;
--yuzu-dark-6: #6d2c10;
--yuzu-dark-7: #8c3d1c;
--yuzu-dark-8: #b75228;
--yuzu-dark-9: #d95e2a;
--yuzu-dark-10: #c84e15;
--yuzu-dark-11: #fc8a5e;
--yuzu-dark-12: #ffd2b4;
--yuzu-light-1: #fff8f3;
--yuzu-light-2: #fff0e8;
--yuzu-light-3: #ffe3d6;
--yuzu-light-4: #ffd2c1;
--yuzu-light-5: #fabea8;
--yuzu-light-6: #eea78d;
--yuzu-light-7: #e28b6a;
--yuzu-light-8: #d26a42;
--yuzu-light-9: #d95e2a;
--yuzu-light-10: #eb6e3c;
--yuzu-light-11: #982700;
--yuzu-light-12: #510000;
--yuzu-dark-alpha-1: #ff783c11;
--yuzu-dark-alpha-2: #ff6d371c;
--yuzu-dark-alpha-3: #9d3b1849;
--yuzu-dark-alpha-4: #9434116b;
--yuzu-dark-alpha-5: #a8411681;
--yuzu-dark-alpha-6: #bc4c1c94;
--yuzu-dark-alpha-7: #d05a2aac;
--yuzu-dark-alpha-8: #e46632cd;
--yuzu-dark-alpha-9: #d95e2aff;
--yuzu-dark-alpha-10: #d75417ed;
--yuzu-dark-alpha-11: #fc8a5eff;
--yuzu-dark-alpha-12: #ffd2b4ff;
--yuzu-light-alpha-1: #ff000003;
--yuzu-light-alpha-2: #ff00000a;
--yuzu-light-alpha-3: #ff000015;
--yuzu-light-alpha-4: #ff000025;
--yuzu-light-alpha-5: #e8000037;
--yuzu-light-alpha-6: #c500004b;
--yuzu-light-alpha-7: #b7000067;
--yuzu-light-alpha-8: #ad00008c;
--yuzu-light-alpha-9: #d95c27fc;
--yuzu-light-alpha-10: #eb6c39fb;
--yuzu-light-alpha-11: #901700ed;
--yuzu-light-alpha-12: #460000f0;
--cobalt-dark-1: #140804;
--cobalt-dark-2: #1e0c06;
--cobalt-dark-3: #2d1107;
--cobalt-dark-4: #3e1607;
--cobalt-dark-5: #55210b;
--cobalt-dark-6: #6d2c10;
--cobalt-dark-7: #8c3d1c;
--cobalt-dark-8: #b75228;
--cobalt-dark-9: #d95e2a;
--cobalt-dark-10: #c84e15;
--cobalt-dark-11: #fc8a5e;
--cobalt-dark-12: #ffd2b4;
--cobalt-light-1: #fff8f3;
--cobalt-light-2: #fff0e8;
--cobalt-light-3: #ffe3d6;
--cobalt-light-4: #ffd2c1;
--cobalt-light-5: #fabea8;
--cobalt-light-6: #eea78d;
--cobalt-light-7: #e28b6a;
--cobalt-light-8: #d26a42;
--cobalt-light-9: #d95e2a;
--cobalt-light-10: #eb6e3c;
--cobalt-light-11: #982700;
--cobalt-light-12: #510000;
--cobalt-dark-alpha-1: #ff783c11;
--cobalt-dark-alpha-2: #ff6d371c;
--cobalt-dark-alpha-3: #9d3b1849;
--cobalt-dark-alpha-4: #9434116b;
--cobalt-dark-alpha-5: #a8411681;
--cobalt-dark-alpha-6: #bc4c1c94;
--cobalt-dark-alpha-7: #d05a2aac;
--cobalt-dark-alpha-8: #e46632cd;
--cobalt-dark-alpha-9: #d95e2aff;
--cobalt-dark-alpha-10: #d75417ed;
--cobalt-dark-alpha-11: #fc8a5eff;
--cobalt-dark-alpha-12: #ffd2b4ff;
--cobalt-light-alpha-1: #ff000003;
--cobalt-light-alpha-2: #ff00000a;
--cobalt-light-alpha-3: #ff000015;
--cobalt-light-alpha-4: #ff000025;
--cobalt-light-alpha-5: #e8000037;
--cobalt-light-alpha-6: #c500004b;
--cobalt-light-alpha-7: #b7000067;
--cobalt-light-alpha-8: #ad00008c;
--cobalt-light-alpha-9: #d95c27fc;
--cobalt-light-alpha-10: #eb6c39fb;
--cobalt-light-alpha-11: #901700ed;
--cobalt-light-alpha-12: #460000f0;
--apple-dark-1: #0c140b;
--apple-light-1: #fafefa;
--apple-light-2: #f4fcf3;

164
packages/ui/src/styles/theme.css
View File

@@ -61,26 +61,26 @@
0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));
--shadow-xxs-border: 0 0 0 0.5px var(--border-weak-base, rgba(0, 0, 0, 0.07));
--shadow-xs-border:
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(22, 22, 20, 0.04),
0 1px 2px 0 rgba(22, 22, 20, 0.06), 0 1px 3px 0 rgba(22, 22, 20, 0.08);
--shadow-xs-border-base:
0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(22, 22, 20, 0.04),
0 1px 2px 0 rgba(22, 22, 20, 0.06), 0 1px 3px 0 rgba(22, 22, 20, 0.08);
--shadow-xs-border-select:
0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
0 0 0 3px var(--border-weak-selected, rgba(217, 94, 42, 0.29)),
0 0 0 1px var(--border-selected, rgba(217, 94, 42, 0.99)), 0 1px 2px -1px rgba(22, 22, 20, 0.25),
0 1px 2px 0 rgba(22, 22, 20, 0.08), 0 1px 3px 0 rgba(22, 22, 20, 0.12);
--shadow-xs-border-focus:
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(22, 22, 20, 0.25),
0 1px 2px 0 rgba(22, 22, 20, 0.08), 0 1px 3px 0 rgba(22, 22, 20, 0.12), 0 0 0 2px var(--background-weak, #F2F2EB),
0 0 0 3px var(--border-selected, rgba(217, 94, 42, 0.99));
--shadow-xs-border-hover:
0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
--shadow-xs-border-critical-base: 0 0 0 1px var(--border-critical-selected, #fc543a);
0 0 0 1px var(--border-weak-selected, rgba(217, 94, 42, 0.22)), 0 1px 2px -1px rgba(22, 22, 20, 0.04),
0 1px 2px 0 rgba(22, 22, 20, 0.06), 0 1px 3px 0 rgba(22, 22, 20, 0.08);
--shadow-xs-border-critical-base: 0 0 0 1px var(--border-critical-selected, #B43232);
--shadow-xs-border-critical-focus:
0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #fc543a),
0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
0 0 0 3px var(--border-critical-weak, rgba(180, 50, 50, 0.18)), 0 0 0 1px var(--border-critical-selected, #B43232),
0 1px 2px -1px rgba(22, 22, 20, 0.25), 0 1px 2px 0 rgba(22, 22, 20, 0.08), 0 1px 3px 0 rgba(22, 22, 20, 0.12);
--shadow-lg-border-base:
0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),
@@ -90,14 +90,14 @@
--text-mix-blend-mode: multiply;
/* OC-1 fallback variables (light) */
--background-base: #f8f7f7;
--background-base: #F0F0EC;
--background-weak: var(--smoke-light-3);
--background-strong: var(--smoke-light-1);
--background-stronger: #fcfcfc;
--background-strong: #F9F9F7;
--background-stronger: #F9F9F7;
--surface-base: var(--smoke-light-alpha-2);
--base: var(--smoke-light-alpha-2);
--surface-base-hover: #0500000f;
--surface-base-active: var(--smoke-light-alpha-3);
--surface-base-hover: #d95e2a18;
--surface-base-active: #d95e2a26;
--surface-base-interactive-active: var(--cobalt-light-alpha-3);
--base2: var(--smoke-light-alpha-2);
--base3: var(--smoke-light-alpha-2);
@@ -106,10 +106,10 @@
--surface-inset-strong: #1f000017;
--surface-inset-strong-hover: #1f000017;
--surface-raised-base: var(--smoke-light-alpha-1);
--surface-float-base: var(--smoke-dark-1);
--surface-float-base-hover: var(--smoke-dark-2);
--surface-raised-base-hover: var(--smoke-light-alpha-2);
--surface-raised-base-active: var(--smoke-light-alpha-3);
--surface-float-base: #D95E2A;
--surface-float-base-hover: #c84e15;
--surface-raised-base-hover: #d95e2a18;
--surface-raised-base-active: #d95e2a26;
--surface-raised-strong: var(--smoke-light-1);
--surface-raised-strong-hover: var(--white);
--surface-raised-stronger: var(--white);
@@ -122,7 +122,7 @@
--surface-brand-base: var(--yuzu-light-9);
--surface-brand-hover: var(--yuzu-light-10);
--surface-interactive-base: var(--cobalt-light-3);
--surface-interactive-hover: #e5f0ff;
--surface-interactive-hover: #FFE3D6;
--surface-interactive-weak: var(--cobalt-light-2);
--surface-interactive-weak-hover: var(--cobalt-light-3);
--surface-success-base: var(--apple-light-3);
@@ -164,12 +164,12 @@
--text-weak: var(--smoke-light-9);
--text-weaker: var(--smoke-light-8);
--text-strong: var(--smoke-light-12);
--text-invert-base: var(--smoke-dark-alpha-11);
--text-invert-weak: var(--smoke-dark-alpha-9);
--text-invert-weaker: var(--smoke-dark-alpha-8);
--text-invert-strong: var(--smoke-dark-alpha-12);
--text-invert-base: #ffffffdd;
--text-invert-weak: #ffffffaa;
--text-invert-weaker: #ffffff88;
--text-invert-strong: #ffffff;
--text-interactive-base: var(--cobalt-light-9);
--text-on-brand-base: var(--smoke-light-alpha-11);
--text-on-brand-base: #ffffff;
--text-on-interactive-base: var(--smoke-light-1);
--text-on-interactive-weak: var(--smoke-dark-alpha-11);
--text-on-success-base: var(--apple-light-10);
@@ -191,9 +191,9 @@
--text-on-brand-weak: var(--smoke-light-alpha-9);
--text-on-brand-weaker: var(--smoke-light-alpha-8);
--text-on-brand-strong: var(--smoke-light-alpha-12);
--button-primary-base: var(--smoke-light-12);
--button-secondary-base: #fdfcfc;
--button-secondary-hover: #faf9f9;
--button-primary-base: #D95E2A;
--button-secondary-base: #F9F9F1;
--button-secondary-hover: #F2F2EB;
--border-base: var(--smoke-light-alpha-7);
--border-hover: var(--smoke-light-alpha-8);
--border-active: var(--smoke-light-alpha-9);
@@ -243,13 +243,13 @@
--icon-weak-selected: var(--smoke-light-10);
--icon-weak-disabled: var(--smoke-light-6);
--icon-weak-focus: var(--smoke-light-9);
--icon-strong-base: var(--smoke-light-12);
--icon-strong-hover: #151313;
--icon-strong-active: #020202;
--icon-strong-selected: #020202;
--icon-strong-disabled: var(--smoke-light-8);
--icon-strong-focus: #020202;
--icon-brand-base: var(--smoke-light-12);
--icon-strong-base: #D95E2A;
--icon-strong-hover: #c84e15;
--icon-strong-active: #b04012;
--icon-strong-selected: #b04012;
--icon-strong-disabled: #e8a88c;
--icon-strong-focus: #c84e15;
--icon-brand-base: #D95E2A;
--icon-interactive-base: var(--cobalt-light-9);
--icon-success-base: var(--apple-light-7);
--icon-success-hover: var(--apple-light-8);
@@ -263,10 +263,10 @@
--icon-info-base: var(--lilac-light-7);
--icon-info-hover: var(--lilac-light-8);
--icon-info-active: var(--lilac-light-11);
--icon-on-brand-base: var(--smoke-light-alpha-11);
--icon-on-brand-hover: var(--smoke-light-alpha-12);
--icon-on-brand-selected: var(--smoke-light-alpha-12);
--icon-on-interactive-base: var(--smoke-light-1);
--icon-on-brand-base: #ffffff;
--icon-on-brand-hover: #ffffff;
--icon-on-brand-selected: #ffffff;
--icon-on-interactive-base: #ffffff;
--icon-agent-plan-base: var(--purple-light-9);
--icon-agent-docs-base: var(--amber-light-9);
--icon-agent-ask-base: var(--cyan-light-9);
@@ -309,19 +309,19 @@
--syntax-diff-delete: var(--ember-light-11);
--syntax-diff-unknown: #ff0000;
--markdown-heading: #d68c27;
--markdown-text: #1a1a1a;
--markdown-link: #3b7dd8;
--markdown-link-text: #318795;
--markdown-text: #161611;
--markdown-link: #D95E2A;
--markdown-link-text: #982700;
--markdown-code: #3d9a57;
--markdown-block-quote: #b0851f;
--markdown-emph: #b0851f;
--markdown-strong: #d68c27;
--markdown-horizontal-rule: #8a8a8a;
--markdown-list-item: #3b7dd8;
--markdown-list-enumeration: #318795;
--markdown-image: #3b7dd8;
--markdown-image-text: #318795;
--markdown-code-block: #1a1a1a;
--markdown-strong: #D95E2A;
--markdown-horizontal-rule: #878780;
--markdown-list-item: #D95E2A;
--markdown-list-enumeration: #982700;
--markdown-image: #D95E2A;
--markdown-image-text: #982700;
--markdown-code-block: #161611;
--border-color: #ffffff;
--border-weaker-base: var(--smoke-light-alpha-3);
--border-weaker-hover: var(--smoke-light-alpha-4);
@@ -329,8 +329,8 @@
--border-weaker-selected: var(--cobalt-light-alpha-4);
--border-weaker-disabled: var(--smoke-light-alpha-2);
--border-weaker-focus: var(--smoke-light-alpha-6);
--button-ghost-hover: var(--smoke-light-alpha-2);
--button-ghost-hover2: var(--smoke-light-alpha-3);
--button-ghost-hover: #d95e2a12;
--button-ghost-hover2: #d95e2a1a;
--avatar-background-pink: #feeef8;
--avatar-background-mint: #e1fbf4;
--avatar-background-orange: #fff1e7;
@@ -349,21 +349,21 @@
--text-mix-blend-mode: plus-lighter;
/* OC-1 fallback variables (dark) */
--background-base: var(--smoke-dark-1);
--background-weak: #1c1717;
--background-strong: #151313;
--background-stronger: #191515;
--background-base: #161614;
--background-weak: #2F2F2C;
--background-strong: #0e0e09;
--background-stronger: #161611;
--surface-base: var(--smoke-dark-alpha-2);
--base: var(--smoke-dark-alpha-2);
--surface-base-hover: #e0b7b716;
--surface-base-hover: #ffffd116;
--surface-base-active: var(--smoke-dark-alpha-3);
--surface-base-interactive-active: var(--cobalt-dark-alpha-2);
--base2: var(--smoke-dark-alpha-2);
--base3: var(--smoke-dark-alpha-2);
--surface-inset-base: #0e0b0b7f;
--surface-inset-base-hover: #0e0b0b7f;
--surface-inset-strong: #060505cc;
--surface-inset-strong-hover: #060505cc;
--surface-inset-base: #0e0e097f;
--surface-inset-base-hover: #0e0e097f;
--surface-inset-strong: #060604cc;
--surface-inset-strong-hover: #060604cc;
--surface-raised-base: var(--smoke-dark-alpha-3);
--surface-float-base: var(--smoke-dark-1);
--surface-float-base-hover: var(--smoke-dark-2);
@@ -381,7 +381,7 @@
--surface-brand-base: var(--yuzu-light-9);
--surface-brand-hover: var(--yuzu-light-10);
--surface-interactive-base: var(--cobalt-dark-3);
--surface-interactive-hover: #0a1d4d;
--surface-interactive-hover: #2D1107;
--surface-interactive-weak: var(--cobalt-dark-2);
--surface-interactive-weak-hover: var(--cobalt-light-3);
--surface-success-base: var(--apple-light-3);
@@ -451,8 +451,8 @@
--text-on-brand-weaker: var(--smoke-dark-alpha-8);
--text-on-brand-strong: var(--smoke-dark-alpha-12);
--button-primary-base: var(--smoke-dark-12);
--button-secondary-base: #231f1f;
--button-secondary-hover: #2a2727;
--button-secondary-base: #20201a;
--button-secondary-hover: #292924;
--border-base: var(--smoke-dark-alpha-7);
--border-hover: var(--smoke-dark-alpha-8);
--border-active: var(--smoke-dark-alpha-9);
@@ -503,11 +503,11 @@
--icon-weak-disabled: var(--smoke-light-4);
--icon-weak-focus: var(--smoke-light-9);
--icon-strong-base: var(--smoke-dark-12);
--icon-strong-hover: #f6f3f3;
--icon-strong-active: #fcfcfc;
--icon-strong-selected: #fdfcfc;
--icon-strong-hover: #f2f2eb;
--icon-strong-active: #fefef6;
--icon-strong-selected: #fefef6;
--icon-strong-disabled: var(--smoke-dark-8);
--icon-strong-focus: #fdfcfc;
--icon-strong-focus: #fefef6;
--icon-brand-base: var(--white);
--icon-interactive-base: var(--cobalt-dark-11);
--icon-success-base: var(--apple-dark-7);
@@ -568,19 +568,19 @@
--syntax-diff-delete: var(--ember-dark-11);
--syntax-diff-unknown: #ff0000;
--markdown-heading: #9d7cd8;
--markdown-text: #eeeeee;
--markdown-link: #fab283;
--markdown-link-text: #56b6c2;
--markdown-text: #f2f2eb;
--markdown-link: #fc8a5e;
--markdown-link-text: #ffd2b4;
--markdown-code: #7fd88f;
--markdown-block-quote: #e5c07b;
--markdown-emph: #e5c07b;
--markdown-strong: #f5a742;
--markdown-horizontal-rule: #808080;
--markdown-list-item: #fab283;
--markdown-list-enumeration: #56b6c2;
--markdown-image: #fab283;
--markdown-image-text: #56b6c2;
--markdown-code-block: #eeeeee;
--markdown-strong: #fc8a5e;
--markdown-horizontal-rule: #7b7b74;
--markdown-list-item: #fc8a5e;
--markdown-list-enumeration: #ffd2b4;
--markdown-image: #fc8a5e;
--markdown-image-text: #ffd2b4;
--markdown-code-block: #f2f2eb;
--border-color: #ffffff;
--border-weaker-base: var(--smoke-dark-alpha-3);
--border-weaker-hover: var(--smoke-dark-alpha-4);

10
packages/ui/src/theme/context.tsx
View File

@@ -35,7 +35,7 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
const tokens = resolveThemeVariant(variant, isDark)
const css = themeToCss(tokens)
if (themeId !== "oc-1") {
if (themeId !== "oc-2") {
try {
localStorage.setItem(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css)
} catch {}
@@ -54,7 +54,7 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
}
function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
if (themeId === "oc-1") return
if (themeId === "oc-2") return
for (const mode of ["light", "dark"] as const) {
const isDark = mode === "dark"
const variant = isDark ? theme.dark : theme.light
@@ -71,9 +71,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
init: (props: { defaultTheme?: string }) => {
const [store, setStore] = createStore({
themes: DEFAULT_THEMES as Record<string, DesktopTheme>,
themeId: props.defaultTheme ?? "oc-1",
colorScheme: "system" as ColorScheme,
mode: getSystemMode(),
themeId: props.defaultTheme ?? "oc-2",
colorScheme: "light" as ColorScheme,
mode: "light" as "light" | "dark",
previewThemeId: null as string | null,
previewScheme: null as ColorScheme | null,
})

160
packages/ui/src/theme/themes/oc-1.json
View File

@@ -4,25 +4,25 @@
"id": "oc-1",
"light": {
"seeds": {
"neutral": "#8e8b8b",
"primary": "#dcde8d",
"neutral": "#A6A69F",
"primary": "#D95E2A",
"success": "#12c905",
"warning": "#ffdc17",
"error": "#fc533a",
"error": "#B43232",
"info": "#a753ae",
"interactive": "#034cff",
"interactive": "#D95E2A",
"diffAdd": "#9ff29a",
"diffDelete": "#fc533a"
"diffDelete": "#B43232"
},
"overrides": {
"background-base": "#f8f7f7",
"background-base": "#F0F0EC",
"background-weak": "var(--smoke-light-3)",
"background-strong": "var(--smoke-light-1)",
"background-stronger": "#fcfcfc",
"background-strong": "#F9F9F7",
"background-stronger": "#F9F9F7",
"surface-base": "var(--smoke-light-alpha-2)",
"base": "var(--smoke-light-alpha-2)",
"surface-base-hover": "#0500000f",
"surface-base-active": "var(--smoke-light-alpha-3)",
"surface-base-hover": "#d95e2a18",
"surface-base-active": "#d95e2a26",
"surface-base-interactive-active": "var(--cobalt-light-alpha-3)",
"base2": "var(--smoke-light-alpha-2)",
"base3": "var(--smoke-light-alpha-2)",
@@ -31,10 +31,10 @@
"surface-inset-strong": "#1f000017",
"surface-inset-strong-hover": "#1f000017",
"surface-raised-base": "var(--smoke-light-alpha-2)",
"surface-float-base": "var(--smoke-dark-1)",
"surface-float-base-hover": "var(--smoke-dark-2)",
"surface-raised-base-hover": "var(--smoke-light-alpha-3)",
"surface-raised-base-active": "var(--smoke-light-alpha-4)",
"surface-float-base": "#D95E2A",
"surface-float-base-hover": "#c84e15",
"surface-raised-base-hover": "#d95e2a18",
"surface-raised-base-active": "#d95e2a26",
"surface-raised-strong": "var(--smoke-light-1)",
"surface-raised-strong-hover": "var(--white)",
"surface-raised-stronger": "var(--white)",
@@ -46,7 +46,7 @@
"surface-brand-base": "var(--yuzu-light-9)",
"surface-brand-hover": "var(--yuzu-light-10)",
"surface-interactive-base": "var(--cobalt-light-3)",
"surface-interactive-hover": "#E5F0FF",
"surface-interactive-hover": "#FFE3D6",
"surface-interactive-weak": "var(--cobalt-light-2)",
"surface-interactive-weak-hover": "var(--cobalt-light-3)",
"surface-success-base": "var(--apple-light-3)",
@@ -88,12 +88,12 @@
"text-weak": "var(--smoke-light-9)",
"text-weaker": "var(--smoke-light-8)",
"text-strong": "var(--smoke-light-12)",
"text-invert-base": "var(--smoke-dark-alpha-11)",
"text-invert-weak": "var(--smoke-dark-alpha-9)",
"text-invert-weaker": "var(--smoke-dark-alpha-8)",
"text-invert-strong": "var(--smoke-dark-alpha-12)",
"text-invert-base": "#ffffffdd",
"text-invert-weak": "#ffffffaa",
"text-invert-weaker": "#ffffff88",
"text-invert-strong": "#ffffff",
"text-interactive-base": "var(--cobalt-light-9)",
"text-on-brand-base": "var(--smoke-light-alpha-11)",
"text-on-brand-base": "#ffffff",
"text-on-interactive-base": "var(--smoke-light-1)",
"text-on-interactive-weak": "var(--smoke-dark-alpha-11)",
"text-on-success-base": "var(--apple-light-10)",
@@ -112,12 +112,12 @@
"text-on-warning-strong": "var(--smoke-dark-alpha-12)",
"text-on-success-weak": "var(--apple-light-6)",
"text-on-success-strong": "var(--apple-light-12)",
"text-on-brand-weak": "var(--smoke-light-alpha-9)",
"text-on-brand-weaker": "var(--smoke-light-alpha-8)",
"text-on-brand-strong": "var(--smoke-light-alpha-12)",
"button-primary-base": "var(--smoke-light-12)",
"button-secondary-base": "#fdfcfc",
"button-secondary-hover": "#faf9f9",
"text-on-brand-weak": "#ffffffcc",
"text-on-brand-weaker": "#ffffff99",
"text-on-brand-strong": "#ffffff",
"button-primary-base": "#D95E2A",
"button-secondary-base": "#F9F9F1",
"button-secondary-hover": "#F2F2EB",
"border-base": "var(--smoke-light-alpha-7)",
"border-hover": "var(--smoke-light-alpha-8)",
"border-active": "var(--smoke-light-alpha-9)",
@@ -167,13 +167,13 @@
"icon-weak-selected": "var(--smoke-light-10)",
"icon-weak-disabled": "var(--smoke-light-6)",
"icon-weak-focus": "var(--smoke-light-9)",
"icon-strong-base": "var(--smoke-light-12)",
"icon-strong-hover": "#151313",
"icon-strong-active": "#020202",
"icon-strong-selected": "#020202",
"icon-strong-disabled": "var(--smoke-light-8)",
"icon-strong-focus": "#020202",
"icon-brand-base": "var(--smoke-light-12)",
"icon-strong-base": "#D95E2A",
"icon-strong-hover": "#c84e15",
"icon-strong-active": "#b04012",
"icon-strong-selected": "#b04012",
"icon-strong-disabled": "#e8a88c",
"icon-strong-focus": "#c84e15",
"icon-brand-base": "#D95E2A",
"icon-interactive-base": "var(--cobalt-light-9)",
"icon-success-base": "var(--apple-light-7)",
"icon-success-hover": "var(--apple-light-8)",
@@ -187,10 +187,10 @@
"icon-info-base": "var(--lilac-light-7)",
"icon-info-hover": "var(--lilac-light-8)",
"icon-info-active": "var(--lilac-light-11)",
"icon-on-brand-base": "var(--smoke-light-alpha-11)",
"icon-on-brand-hover": "var(--smoke-light-alpha-12)",
"icon-on-brand-selected": "var(--smoke-light-alpha-12)",
"icon-on-interactive-base": "var(--smoke-light-1)",
"icon-on-brand-base": "#ffffff",
"icon-on-brand-hover": "#ffffff",
"icon-on-brand-selected": "#ffffff",
"icon-on-interactive-base": "#ffffff",
"icon-agent-plan-base": "var(--purple-light-9)",
"icon-agent-docs-base": "var(--amber-light-9)",
"icon-agent-ask-base": "var(--cyan-light-9)",
@@ -232,19 +232,19 @@
"syntax-diff-delete": "var(--ember-light-11)",
"syntax-diff-unknown": "#ff0000",
"markdown-heading": "#d68c27",
"markdown-text": "#1a1a1a",
"markdown-link": "#3b7dd8",
"markdown-link-text": "#318795",
"markdown-text": "#161611",
"markdown-link": "#D95E2A",
"markdown-link-text": "#982700",
"markdown-code": "#3d9a57",
"markdown-block-quote": "#b0851f",
"markdown-emph": "#b0851f",
"markdown-strong": "#d68c27",
"markdown-horizontal-rule": "#8a8a8a",
"markdown-list-item": "#3b7dd8",
"markdown-list-enumeration": "#318795",
"markdown-image": "#3b7dd8",
"markdown-image-text": "#318795",
"markdown-code-block": "#1a1a1a",
"markdown-strong": "#D95E2A",
"markdown-horizontal-rule": "#878780",
"markdown-list-item": "#D95E2A",
"markdown-list-enumeration": "#982700",
"markdown-image": "#D95E2A",
"markdown-image-text": "#982700",
"markdown-code-block": "#161611",
"border-color": "#ffffff",
"border-weaker-base": "var(--smoke-light-alpha-3)",
"border-weaker-hover": "var(--smoke-light-alpha-4)",
@@ -252,8 +252,8 @@
"border-weaker-selected": "var(--cobalt-light-alpha-4)",
"border-weaker-disabled": "var(--smoke-light-alpha-2)",
"border-weaker-focus": "var(--smoke-light-alpha-6)",
"button-ghost-hover": "var(--smoke-light-alpha-2)",
"button-ghost-hover2": "var(--smoke-light-alpha-3)",
"button-ghost-hover": "#d95e2a12",
"button-ghost-hover2": "#d95e2a1a",
"avatar-background-pink": "#feeef8",
"avatar-background-mint": "#e1fbf4",
"avatar-background-orange": "#fff1e7",
@@ -270,32 +270,32 @@
},
"dark": {
"seeds": {
"neutral": "#716c6b",
"primary": "#fab283",
"neutral": "#A6A69F",
"primary": "#D95E2A",
"success": "#12c905",
"warning": "#fcd53a",
"error": "#fc533a",
"error": "#B43232",
"info": "#edb2f1",
"interactive": "#034cff",
"interactive": "#D95E2A",
"diffAdd": "#c8ffc4",
"diffDelete": "#fc533a"
"diffDelete": "#B43232"
},
"overrides": {
"background-base": "var(--smoke-dark-1)",
"background-weak": "#1c1717",
"background-strong": "#151313",
"background-stronger": "#191515",
"background-base": "#161614",
"background-weak": "#2F2F2C",
"background-strong": "#0e0e09",
"background-stronger": "#161611",
"surface-base": "var(--smoke-dark-alpha-2)",
"base": "var(--smoke-dark-alpha-2)",
"surface-base-hover": "#e0b7b716",
"surface-base-hover": "#ffffd116",
"surface-base-active": "var(--smoke-dark-alpha-3)",
"surface-base-interactive-active": "var(--cobalt-dark-alpha-2)",
"base2": "var(--smoke-dark-alpha-2)",
"base3": "var(--smoke-dark-alpha-2)",
"surface-inset-base": "#0e0b0b7f",
"surface-inset-base-hover": "#0e0b0b7f",
"surface-inset-strong": "#060505cc",
"surface-inset-strong-hover": "#060505cc",
"surface-inset-base": "#0e0e097f",
"surface-inset-base-hover": "#0e0e097f",
"surface-inset-strong": "#060604cc",
"surface-inset-strong-hover": "#060604cc",
"surface-raised-base": "var(--smoke-dark-alpha-3)",
"surface-float-base": "var(--smoke-dark-1)",
"surface-float-base-hover": "var(--smoke-dark-2)",
@@ -312,7 +312,7 @@
"surface-brand-base": "var(--yuzu-light-9)",
"surface-brand-hover": "var(--yuzu-light-10)",
"surface-interactive-base": "var(--cobalt-dark-3)",
"surface-interactive-hover": "#0A1D4D",
"surface-interactive-hover": "#2D1107",
"surface-interactive-weak": "var(--cobalt-dark-2)",
"surface-interactive-weak-hover": "var(--cobalt-light-3)",
"surface-success-base": "var(--apple-dark-3)",
@@ -382,8 +382,8 @@
"text-on-brand-weaker": "var(--smoke-dark-alpha-8)",
"text-on-brand-strong": "var(--smoke-dark-alpha-12)",
"button-primary-base": "var(--smoke-dark-12)",
"button-secondary-base": "#231f1f",
"button-secondary-hover": "#2a2727",
"button-secondary-base": "#20201a",
"button-secondary-hover": "#292924",
"border-base": "var(--smoke-dark-alpha-7)",
"border-hover": "var(--smoke-dark-alpha-8)",
"border-active": "var(--smoke-dark-alpha-9)",
@@ -434,11 +434,11 @@
"icon-weak-disabled": "var(--smoke-light-4)",
"icon-weak-focus": "var(--smoke-light-9)",
"icon-strong-base": "var(--smoke-dark-12)",
"icon-strong-hover": "#f6f3f3",
"icon-strong-active": "#fcfcfc",
"icon-strong-selected": "#fdfcfc",
"icon-strong-hover": "#f2f2eb",
"icon-strong-active": "#fefef6",
"icon-strong-selected": "#fefef6",
"icon-strong-disabled": "var(--smoke-dark-8)",
"icon-strong-focus": "#fdfcfc",
"icon-strong-focus": "#fefef6",
"icon-brand-base": "var(--white)",
"icon-interactive-base": "var(--cobalt-dark-11)",
"icon-success-base": "var(--apple-dark-9)",
@@ -498,19 +498,19 @@
"syntax-diff-delete": "var(--ember-dark-11)",
"syntax-diff-unknown": "#ff0000",
"markdown-heading": "#9d7cd8",
"markdown-text": "#eeeeee",
"markdown-link": "#fab283",
"markdown-link-text": "#56b6c2",
"markdown-text": "#f2f2eb",
"markdown-link": "#fc8a5e",
"markdown-link-text": "#ffd2b4",
"markdown-code": "#7fd88f",
"markdown-block-quote": "#e5c07b",
"markdown-emph": "#e5c07b",
"markdown-strong": "#f5a742",
"markdown-horizontal-rule": "#808080",
"markdown-list-item": "#fab283",
"markdown-list-enumeration": "#56b6c2",
"markdown-image": "#fab283",
"markdown-image-text": "#56b6c2",
"markdown-code-block": "#eeeeee",
"markdown-strong": "#fc8a5e",
"markdown-horizontal-rule": "#7b7b74",
"markdown-list-item": "#fc8a5e",
"markdown-list-enumeration": "#ffd2b4",
"markdown-image": "#fc8a5e",
"markdown-image-text": "#ffd2b4",
"markdown-code-block": "#f2f2eb",
"border-color": "#ffffff",
"border-weaker-base": "var(--smoke-dark-alpha-3)",
"border-weaker-hover": "var(--smoke-dark-alpha-4)",

158
packages/ui/src/theme/themes/oc-2.json
View File

@@ -4,25 +4,25 @@
"id": "oc-2",
"light": {
"seeds": {
"neutral": "#8e8b8b",
"primary": "#dcde8d",
"neutral": "#A6A69F",
"primary": "#D95E2A",
"success": "#12c905",
"warning": "#ffdc17",
"error": "#fc533a",
"error": "#B43232",
"info": "#a753ae",
"interactive": "#034cff",
"interactive": "#D95E2A",
"diffAdd": "#9ff29a",
"diffDelete": "#fc533a"
"diffDelete": "#B43232"
},
"overrides": {
"background-base": "#f8f7f7",
"background-base": "#F0F0EC",
"background-weak": "var(--gray-light-3)",
"background-strong": "var(--gray-light-1)",
"background-stronger": "#fcfcfc",
"background-strong": "#F9F9F7",
"background-stronger": "#F9F9F7",
"surface-base": "var(--gray-light-alpha-2)",
"base": "var(--gray-light-alpha-2)",
"surface-base-hover": "#0500000f",
"surface-base-active": "var(--gray-light-alpha-3)",
"surface-base-hover": "#d95e2a18",
"surface-base-active": "#d95e2a26",
"surface-base-interactive-active": "var(--cobalt-light-alpha-3)",
"base2": "var(--gray-light-alpha-2)",
"base3": "var(--gray-light-alpha-2)",
@@ -31,10 +31,10 @@
"surface-inset-strong": "#1f000017",
"surface-inset-strong-hover": "#1f000017",
"surface-raised-base": "var(--gray-light-alpha-2)",
"surface-float-base": "var(--gray-dark-1)",
"surface-float-base-hover": "var(--gray-dark-2)",
"surface-raised-base-hover": "var(--gray-light-alpha-3)",
"surface-raised-base-active": "var(--gray-light-alpha-5)",
"surface-float-base": "#D95E2A",
"surface-float-base-hover": "#c84e15",
"surface-raised-base-hover": "#d95e2a18",
"surface-raised-base-active": "#d95e2a26",
"surface-raised-strong": "var(--gray-light-1)",
"surface-raised-strong-hover": "var(--white)",
"surface-raised-stronger": "var(--white)",
@@ -46,7 +46,7 @@
"surface-brand-base": "var(--yuzu-light-9)",
"surface-brand-hover": "var(--yuzu-light-10)",
"surface-interactive-base": "var(--cobalt-light-3)",
"surface-interactive-hover": "#E5F0FF",
"surface-interactive-hover": "#FFE3D6",
"surface-interactive-weak": "var(--cobalt-light-2)",
"surface-interactive-weak-hover": "var(--cobalt-light-3)",
"surface-success-base": "var(--apple-light-3)",
@@ -88,13 +88,13 @@
"text-weak": "var(--gray-light-9)",
"text-weaker": "var(--gray-light-8)",
"text-strong": "var(--gray-light-12)",
"text-invert-base": "var(--gray-dark-alpha-11)",
"text-invert-weak": "var(--gray-dark-alpha-9)",
"text-invert-weaker": "var(--gray-dark-alpha-8)",
"text-invert-strong": "var(--gray-dark-alpha-12)",
"text-invert-base": "#ffffffdd",
"text-invert-weak": "#ffffffaa",
"text-invert-weaker": "#ffffff88",
"text-invert-strong": "#ffffff",
"text-interactive-base": "var(--cobalt-light-9)",
"text-on-brand-base": "var(--gray-light-alpha-11)",
"text-on-interactive-base": "var(--gray-light-1)",
"text-on-brand-base": "#ffffff",
"text-on-interactive-base": "#ffffff",
"text-on-interactive-weak": "var(--gray-dark-alpha-11)",
"text-on-success-base": "var(--apple-light-10)",
"text-on-critical-base": "var(--ember-light-10)",
@@ -112,12 +112,12 @@
"text-on-warning-strong": "var(--gray-dark-alpha-12)",
"text-on-success-weak": "var(--apple-light-6)",
"text-on-success-strong": "var(--apple-light-12)",
"text-on-brand-weak": "var(--gray-light-alpha-9)",
"text-on-brand-weaker": "var(--gray-light-alpha-8)",
"text-on-brand-strong": "var(--gray-light-alpha-12)",
"button-primary-base": "var(--gray-light-12)",
"button-secondary-base": "var(--gray-light-1)",
"button-secondary-hover": "FFFFFF0A",
"text-on-brand-weak": "#ffffffcc",
"text-on-brand-weaker": "#ffffffaa",
"text-on-brand-strong": "#ffffff",
"button-primary-base": "#D95E2A",
"button-secondary-base": "#F9F9F1",
"button-secondary-hover": "#F2F2EB",
"border-base": "var(--gray-light-alpha-7)",
"border-hover": "var(--gray-light-alpha-8)",
"border-active": "var(--gray-light-alpha-9)",
@@ -167,13 +167,13 @@
"icon-weak-selected": "var(--gray-light-10)",
"icon-weak-disabled": "var(--gray-light-6)",
"icon-weak-focus": "var(--gray-light-9)",
"icon-strong-base": "var(--gray-light-12)",
"icon-strong-hover": "#151313",
"icon-strong-active": "#020202",
"icon-strong-selected": "#020202",
"icon-strong-disabled": "var(--gray-light-6)",
"icon-strong-focus": "#020202",
"icon-brand-base": "var(--gray-light-12)",
"icon-strong-base": "#D95E2A",
"icon-strong-hover": "#c84e15",
"icon-strong-active": "#b04012",
"icon-strong-selected": "#b04012",
"icon-strong-disabled": "#e8a88c",
"icon-strong-focus": "#c84e15",
"icon-brand-base": "#D95E2A",
"icon-interactive-base": "var(--cobalt-light-9)",
"icon-success-base": "var(--apple-light-7)",
"icon-success-hover": "var(--apple-light-8)",
@@ -187,10 +187,10 @@
"icon-info-base": "var(--lilac-light-7)",
"icon-info-hover": "var(--lilac-light-8)",
"icon-info-active": "var(--lilac-light-11)",
"icon-on-brand-base": "var(--gray-light-alpha-11)",
"icon-on-brand-hover": "var(--gray-light-alpha-12)",
"icon-on-brand-selected": "var(--gray-light-alpha-12)",
"icon-on-interactive-base": "var(--gray-light-1)",
"icon-on-brand-base": "#ffffff",
"icon-on-brand-hover": "#ffffff",
"icon-on-brand-selected": "#ffffff",
"icon-on-interactive-base": "#ffffff",
"icon-agent-plan-base": "var(--purple-light-9)",
"icon-agent-docs-base": "var(--amber-light-9)",
"icon-agent-ask-base": "var(--cyan-light-9)",
@@ -232,19 +232,19 @@
"syntax-diff-delete": "var(--ember-light-11)",
"syntax-diff-unknown": "#ff0000",
"markdown-heading": "#d68c27",
"markdown-text": "#1a1a1a",
"markdown-link": "#3b7dd8",
"markdown-link-text": "#318795",
"markdown-text": "#161611",
"markdown-link": "#D95E2A",
"markdown-link-text": "#982700",
"markdown-code": "#3d9a57",
"markdown-block-quote": "#b0851f",
"markdown-emph": "#b0851f",
"markdown-strong": "#d68c27",
"markdown-horizontal-rule": "#8a8a8a",
"markdown-list-item": "#3b7dd8",
"markdown-list-enumeration": "#318795",
"markdown-image": "#3b7dd8",
"markdown-image-text": "#318795",
"markdown-code-block": "#1a1a1a",
"markdown-strong": "#D95E2A",
"markdown-horizontal-rule": "#878780",
"markdown-list-item": "#D95E2A",
"markdown-list-enumeration": "#982700",
"markdown-image": "#D95E2A",
"markdown-image-text": "#982700",
"markdown-code-block": "#161611",
"border-color": "#ffffff",
"border-weaker-base": "var(--gray-light-alpha-3)",
"border-weaker-hover": "var(--gray-light-alpha-4)",
@@ -252,8 +252,8 @@
"border-weaker-selected": "var(--cobalt-light-alpha-4)",
"border-weaker-disabled": "var(--gray-light-alpha-2)",
"border-weaker-focus": "var(--gray-light-alpha-6)",
"button-ghost-hover": "var(--gray-light-alpha-2)",
"button-ghost-hover2": "var(--gray-light-alpha-3)",
"button-ghost-hover": "#d95e2a12",
"button-ghost-hover2": "#d95e2a1a",
"avatar-background-pink": "#feeef8",
"avatar-background-mint": "#e1fbf4",
"avatar-background-orange": "#fff1e7",
@@ -270,32 +270,32 @@
},
"dark": {
"seeds": {
"neutral": "#716c6b",
"primary": "#fab283",
"neutral": "#A6A69F",
"primary": "#D95E2A",
"success": "#12c905",
"warning": "#fcd53a",
"error": "#fc533a",
"error": "#B43232",
"info": "#edb2f1",
"interactive": "#034cff",
"interactive": "#D95E2A",
"diffAdd": "#c8ffc4",
"diffDelete": "#fc533a"
"diffDelete": "#B43232"
},
"overrides": {
"base": "var(--gray-dark-alpha-2)",
"base2": "var(--gray-dark-alpha-2)",
"base3": "var(--gray-dark-alpha-2)",
"background-base": "#101010",
"background-weak": "#1E1E1E",
"background-strong": "#121212",
"background-stronger": "#151515",
"background-base": "#161614",
"background-weak": "#2F2F2C",
"background-strong": "#0e0e09",
"background-stronger": "#161611",
"surface-base": "var(--gray-dark-alpha-2)",
"surface-base-hover": "#FFFFFF0A",
"surface-base-active": "var(--gray-dark-alpha-3)",
"surface-base-interactive-active": "var(--cobalt-dark-alpha-2)",
"surface-inset-base": "#0e0b0b7f",
"surface-inset-base-hover": "#0e0b0b7f",
"surface-inset-strong": "#060505cc",
"surface-inset-strong-hover": "#060505cc",
"surface-inset-base": "#0e0e097f",
"surface-inset-base-hover": "#0e0e097f",
"surface-inset-strong": "#060604cc",
"surface-inset-strong-hover": "#060604cc",
"surface-raised-base": "var(--gray-dark-alpha-3)",
"surface-float-base": "var(--gray-dark-1)",
"surface-float-base-hover": "var(--gray-dark-2)",
@@ -308,11 +308,11 @@
"surface-weak": "var(--gray-dark-alpha-4)",
"surface-weaker": "var(--gray-dark-alpha-5)",
"surface-strong": "var(--gray-dark-alpha-7)",
"surface-raised-stronger-non-alpha": "#1B1B1B",
"surface-raised-stronger-non-alpha": "#161611",
"surface-brand-base": "var(--yuzu-light-9)",
"surface-brand-hover": "var(--yuzu-light-10)",
"surface-interactive-base": "var(--cobalt-dark-3)",
"surface-interactive-hover": "#0A1D4D",
"surface-interactive-hover": "#2D1107",
"surface-interactive-weak": "var(--cobalt-dark-2)",
"surface-interactive-weak-hover": "var(--cobalt-light-3)",
"surface-success-base": "var(--apple-dark-3)",
@@ -429,11 +429,11 @@
"icon-weak-disabled": "var(--gray-light-4)",
"icon-weak-focus": "var(--gray-light-9)",
"icon-strong-base": "var(--gray-dark-12)",
"icon-strong-hover": "#F3F3F3",
"icon-strong-active": "#EBEBEB",
"icon-strong-selected": "#FCFCFC",
"icon-strong-hover": "#f2f2eb",
"icon-strong-active": "#ecece4",
"icon-strong-selected": "#fefef6",
"icon-strong-disabled": "var(--gray-dark-7)",
"icon-strong-focus": "#FCFCFC",
"icon-strong-focus": "#fefef6",
"icon-brand-base": "var(--white)",
"icon-interactive-base": "var(--cobalt-dark-11)",
"icon-success-base": "var(--apple-dark-9)",
@@ -493,19 +493,19 @@
"syntax-diff-delete": "var(--ember-dark-11)",
"syntax-diff-unknown": "#ff0000",
"markdown-heading": "#9d7cd8",
"markdown-text": "#eeeeee",
"markdown-link": "#fab283",
"markdown-link-text": "#56b6c2",
"markdown-text": "#f2f2eb",
"markdown-link": "#fc8a5e",
"markdown-link-text": "#ffd2b4",
"markdown-code": "#7fd88f",
"markdown-block-quote": "#e5c07b",
"markdown-emph": "#e5c07b",
"markdown-strong": "#f5a742",
"markdown-horizontal-rule": "#808080",
"markdown-list-item": "#fab283",
"markdown-list-enumeration": "#56b6c2",
"markdown-image": "#fab283",
"markdown-image-text": "#56b6c2",
"markdown-code-block": "#eeeeee",
"markdown-strong": "#fc8a5e",
"markdown-horizontal-rule": "#7b7b74",
"markdown-list-item": "#fc8a5e",
"markdown-list-enumeration": "#ffd2b4",
"markdown-image": "#fc8a5e",
"markdown-image-text": "#ffd2b4",
"markdown-code-block": "#f2f2eb",
"border-color": "#ffffff",
"border-weaker-base": "var(--gray-dark-alpha-3)",
"border-weaker-hover": "var(--gray-dark-alpha-4)",