feat: command to run front and backend

package.json

@@ -7,8 +7,10 @@
   "packageManager": "bun@1.3.10",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
+    "dev:serve": "bun run --cwd packages/opencode --conditions=browser src/index.ts serve",
     "dev:desktop": "bun --cwd packages/desktop tauri dev",
     "dev:web": "bun --cwd packages/app dev",
+    "dev:all": "bun dev:serve & bun dev:web & wait",
     "typecheck": "bun turbo typecheck",
     "prepare": "husky",
     "random": "echo 'Random script'",

packages/app/public/oc-theme-preload.js

@@ -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) {

packages/app/src/context/language.tsx

@@ -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,
       }),
     )
 

packages/app/src/context/layout.tsx

@@ -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,

packages/ui/src/components/message-part.css

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

packages/ui/src/styles/colors.css

@@ -1,244 +1,196 @@
 :root {
-  --gray-dark-1: #161616;
+  --gray-dark-1: #080804;
-  --gray-dark-2: #1c1c1c;
+  --gray-dark-2: #0e0e09;
-  --gray-dark-3: #232323;
+  --gray-dark-3: #161611;
-  --gray-dark-4: #282828;
+  --gray-dark-4: #20201a;
-  --gray-dark-5: #2e2e2e;
+  --gray-dark-5: #292924;
-  --gray-dark-6: #343434;
+  --gray-dark-6: #363630;
-  --gray-dark-7: #3e3e3e;
+  --gray-dark-7: #484842;
-  --gray-dark-8: #505050;
+  --gray-dark-8: #696963;
-  --gray-dark-9: #707070;
+  --gray-dark-9: #7b7b74;
-  --gray-dark-10: #7e7e7e;
+  --gray-dark-10: #93938c;
-  --gray-dark-11: #a0a0a0;
+  --gray-dark-11: #c5c5bd;
-  --gray-dark-12: #ededed;
+  --gray-dark-12: #f2f2eb;
-  --gray-light-1: #fcfcfc;
+  --gray-light-1: #fefef6;
-  --gray-light-2: #f8f8f8;
+  --gray-light-2: #f9f9f1;
-  --gray-light-3: #f3f3f3;
+  --gray-light-3: #f2f2eb;
-  --gray-light-4: #ededed;
+  --gray-light-4: #ecece4;
-  --gray-light-5: #e8e8e8;
+  --gray-light-5: #e2e2da;
-  --gray-light-6: #e2e2e2;
+  --gray-light-6: #d8d8d1;
-  --gray-light-7: #dbdbdb;
+  --gray-light-7: #cbcbc4;
-  --gray-light-8: #c7c7c7;
+  --gray-light-8: #b8b8b1;
-  --gray-light-9: #8f8f8f;
+  --gray-light-9: #878780;
-  --gray-light-10: #858585;
+  --gray-light-10: #75756e;
-  --gray-light-11: #6f6f6f;
+  --gray-light-11: #585852;
-  --gray-light-12: #171717;
+  --gray-light-12: #161611;
-  --gray-dark-alpha-1: #00000000;
+  --gray-dark-alpha-1: #ffffff03;
-  --gray-dark-alpha-2: #ffffff08;
+  --gray-dark-alpha-2: #ffffd10b;
-  --gray-dark-alpha-3: #ffffff0f;
+  --gray-dark-alpha-3: #ffffc516;
-  --gray-dark-alpha-4: #ffffff14;
+  --gray-dark-alpha-4: #ffffdd1e;
-  --gray-dark-alpha-5: #ffffff1a;
+  --gray-dark-alpha-5: #fffff226;
-  --gray-dark-alpha-6: #ffffff21;
+  --gray-dark-alpha-6: #fffffa31;
-  --gray-dark-alpha-7: #ffffff2b;
+  --gray-dark-alpha-7: #ffffff3f;
-  --gray-dark-alpha-8: #ffffff40;
+  --gray-dark-alpha-8: #ffffff59;
-  --gray-dark-alpha-9: #ffffff63;
+  --gray-dark-alpha-9: #ffffff67;
-  --gray-dark-alpha-10: #ffffff73;
+  --gray-dark-alpha-10: #ffffff76;
-  --gray-dark-alpha-11: #ffffff96;
+  --gray-dark-alpha-11: #ffffffb2;
-  --gray-dark-alpha-12: #ffffffeb;
+  --gray-dark-alpha-12: #fffffaf0;
-  --gray-light-alpha-1: #00000003;
+  --gray-light-alpha-1: #aaaa0003;
-  --gray-light-alpha-2: #00000008;
+  --gray-light-alpha-2: #24240007;
-  --gray-light-alpha-3: #0000000d;
+  --gray-light-alpha-3: #2222000f;
-  --gray-light-alpha-4: #00000012;
+  --gray-light-alpha-4: #2c2c0017;
-  --gray-light-alpha-5: #00000017;
+  --gray-light-alpha-5: #1010001f;
-  --gray-light-alpha-6: #0000001c;
+  --gray-light-alpha-6: #00000026;
-  --gray-light-alpha-7: #00000024;
+  --gray-light-alpha-7: #00000032;
-  --gray-light-alpha-8: #00000038;
+  --gray-light-alpha-8: #00000044;
-  --gray-light-alpha-9: #00000070;
+  --gray-light-alpha-9: #00000074;
   --gray-light-alpha-10: #0000007a;
   --gray-light-alpha-11: #0000008f;
   --gray-light-alpha-12: #000000e8;
-  --gray-dark-1: #131010;
+  --smoke-dark-1: #080804;
-  --gray-dark-2: #1b1818;
+  --smoke-dark-2: #0e0e09;
-  --gray-dark-3: #252121;
+  --smoke-dark-3: #161611;
-  --gray-dark-4: #2d2828;
+  --smoke-dark-4: #20201a;
-  --gray-dark-5: #343030;
+  --smoke-dark-5: #292924;
-  --gray-dark-6: #3e3939;
+  --smoke-dark-6: #363630;
-  --gray-dark-7: #4b4646;
+  --smoke-dark-7: #484842;
-  --gray-dark-8: #645f5f;
+  --smoke-dark-8: #696963;
-  --gray-dark-9: #716c6b;
+  --smoke-dark-9: #7b7b74;
-  --gray-dark-10: #7f7979;
+  --smoke-dark-10: #93938c;
-  --gray-dark-11: #b7b1b1;
+  --smoke-dark-11: #c5c5bd;
-  --gray-dark-12: #f1ecec;
+  --smoke-dark-12: #f2f2eb;
-  --gray-light-1: #fdfcfc;
+  --smoke-light-1: #fefef6;
-  --gray-light-2: #f9f8f8;
+  --smoke-light-2: #f9f9f1;
-  --gray-light-3: #f1f0f0;
+  --smoke-light-3: #f2f2eb;
-  --gray-light-4: #e9e8e8;
+  --smoke-light-4: #ecece4;
-  --gray-light-5: #e2e0e0;
+  --smoke-light-5: #e2e2da;
-  --gray-light-6: #dad9d9;
+  --smoke-light-6: #d8d8d1;
-  --gray-light-7: #cfcecd;
+  --smoke-light-7: #cbcbc4;
-  --gray-light-8: #bcbbbb;
+  --smoke-light-8: #b8b8b1;
-  --gray-light-9: #8e8b8b;
+  --smoke-light-9: #878780;
-  --gray-light-10: #848181;
+  --smoke-light-10: #75756e;
-  --gray-light-11: #656363;
+  --smoke-light-11: #585852;
-  --gray-light-12: #211e1e;
+  --smoke-light-12: #161611;
-  --gray-dark-alpha-1: #82383803;
+  --smoke-dark-alpha-1: #ffffff03;
-  --gray-dark-alpha-2: #e6c6c60b;
+  --smoke-dark-alpha-2: #ffffd10b;
-  --gray-dark-alpha-3: #edd5d516;
+  --smoke-dark-alpha-3: #ffffc516;
-  --gray-dark-alpha-4: #f2e1e11e;
+  --smoke-dark-alpha-4: #ffffdd1e;
-  --gray-dark-alpha-5: #f5e8e826;
+  --smoke-dark-alpha-5: #fffff226;
-  --gray-dark-alpha-6: #f5e8e831;
+  --smoke-dark-alpha-6: #fffffa31;
-  --gray-dark-alpha-7: #f7ecec3f;
+  --smoke-dark-alpha-7: #ffffff3f;
-  --gray-dark-alpha-8: #faf5f559;
+  --smoke-dark-alpha-8: #ffffff59;
-  --gray-dark-alpha-9: #faf5f467;
+  --smoke-dark-alpha-9: #ffffff67;
-  --gray-dark-alpha-10: #fbf5f576;
+  --smoke-dark-alpha-10: #ffffff76;
-  --gray-dark-alpha-11: #fcf9f9b2;
+  --smoke-dark-alpha-11: #ffffffb2;
-  --gray-dark-alpha-12: #fdfbfbf0;
+  --smoke-dark-alpha-12: #fffffaf0;
-  --gray-light-alpha-1: #55000003;
+  --smoke-light-alpha-1: #aaaa0003;
-  --gray-light-alpha-2: #25000007;
+  --smoke-light-alpha-2: #24240007;
-  --gray-light-alpha-3: #1100000f;
+  --smoke-light-alpha-3: #2222000f;
-  --gray-light-alpha-4: #0c000017;
+  --smoke-light-alpha-4: #2c2c0017;
-  --gray-light-alpha-5: #1100001f;
+  --smoke-light-alpha-5: #1010001f;
-  --gray-light-alpha-6: #07000026;
+  --smoke-light-alpha-6: #00000026;
-  --gray-light-alpha-7: #0b060032;
+  --smoke-light-alpha-7: #00000032;
-  --gray-light-alpha-8: #04000044;
+  --smoke-light-alpha-8: #00000044;
-  --gray-light-alpha-9: #07000074;
+  --smoke-light-alpha-9: #00000074;
-  --gray-light-alpha-10: #0400009c;
+  --smoke-light-alpha-10: #0000007a;
-  --gray-light-alpha-11: #0700007e;
+  --smoke-light-alpha-11: #0000008f;
-  --gray-light-alpha-12: #020000df;
+  --smoke-light-alpha-12: #000000e8;
-  --smoke-dark-1: #131010;
+  --yuzu-dark-1: #140804;
-  --smoke-dark-2: #1b1818;
+  --yuzu-dark-2: #1e0c06;
-  --smoke-dark-3: #252121;
+  --yuzu-dark-3: #2d1107;
-  --smoke-dark-4: #2d2828;
+  --yuzu-dark-4: #3e1607;
-  --smoke-dark-5: #343030;
+  --yuzu-dark-5: #55210b;
-  --smoke-dark-6: #3e3939;
+  --yuzu-dark-6: #6d2c10;
-  --smoke-dark-7: #4b4646;
+  --yuzu-dark-7: #8c3d1c;
-  --smoke-dark-8: #645f5f;
+  --yuzu-dark-8: #b75228;
-  --smoke-dark-9: #716c6b;
+  --yuzu-dark-9: #d95e2a;
-  --smoke-dark-10: #7f7979;
+  --yuzu-dark-10: #c84e15;
-  --smoke-dark-11: #b7b1b1;
+  --yuzu-dark-11: #fc8a5e;
-  --smoke-dark-12: #f1ecec;
+  --yuzu-dark-12: #ffd2b4;
-  --smoke-light-1: #fdfcfc;
+  --yuzu-light-1: #fff8f3;
-  --smoke-light-2: #f9f8f8;
+  --yuzu-light-2: #fff0e8;
-  --smoke-light-3: #f1f0f0;
+  --yuzu-light-3: #ffe3d6;
-  --smoke-light-4: #e9e8e8;
+  --yuzu-light-4: #ffd2c1;
-  --smoke-light-5: #e2e0e0;
+  --yuzu-light-5: #fabea8;
-  --smoke-light-6: #dad9d9;
+  --yuzu-light-6: #eea78d;
-  --smoke-light-7: #cfcecd;
+  --yuzu-light-7: #e28b6a;
-  --smoke-light-8: #bcbbbb;
+  --yuzu-light-8: #d26a42;
-  --smoke-light-9: #8e8b8b;
+  --yuzu-light-9: #d95e2a;
-  --smoke-light-10: #848181;
+  --yuzu-light-10: #eb6e3c;
-  --smoke-light-11: #656363;
+  --yuzu-light-11: #982700;
-  --smoke-light-12: #211e1e;
+  --yuzu-light-12: #510000;
-  --smoke-dark-alpha-1: #82383803;
+  --yuzu-dark-alpha-1: #ff783c11;
-  --smoke-dark-alpha-2: #e6c6c60b;
+  --yuzu-dark-alpha-2: #ff6d371c;
-  --smoke-dark-alpha-3: #edd5d516;
+  --yuzu-dark-alpha-3: #9d3b1849;
-  --smoke-dark-alpha-4: #f2e1e11e;
+  --yuzu-dark-alpha-4: #9434116b;
-  --smoke-dark-alpha-5: #f5e8e826;
+  --yuzu-dark-alpha-5: #a8411681;
-  --smoke-dark-alpha-6: #f5e8e831;
+  --yuzu-dark-alpha-6: #bc4c1c94;
-  --smoke-dark-alpha-7: #f7ecec3f;
+  --yuzu-dark-alpha-7: #d05a2aac;
-  --smoke-dark-alpha-8: #faf5f559;
+  --yuzu-dark-alpha-8: #e46632cd;
-  --smoke-dark-alpha-9: #faf5f467;
+  --yuzu-dark-alpha-9: #d95e2aff;
-  --smoke-dark-alpha-10: #fbf5f576;
+  --yuzu-dark-alpha-10: #d75417ed;
-  --smoke-dark-alpha-11: #fcf9f9b2;
+  --yuzu-dark-alpha-11: #fc8a5eff;
-  --smoke-dark-alpha-12: #fdfbfbf0;
+  --yuzu-dark-alpha-12: #ffd2b4ff;
-  --smoke-light-alpha-1: #55000003;
+  --yuzu-light-alpha-1: #ff000003;
-  --smoke-light-alpha-2: #25000007;
+  --yuzu-light-alpha-2: #ff00000a;
-  --smoke-light-alpha-3: #1100000f;
+  --yuzu-light-alpha-3: #ff000015;
-  --smoke-light-alpha-4: #0c000017;
+  --yuzu-light-alpha-4: #ff000025;
-  --smoke-light-alpha-5: #1100001f;
+  --yuzu-light-alpha-5: #e8000037;
-  --smoke-light-alpha-6: #07000026;
+  --yuzu-light-alpha-6: #c500004b;
-  --smoke-light-alpha-7: #0b060032;
+  --yuzu-light-alpha-7: #b7000067;
-  --smoke-light-alpha-8: #04000044;
+  --yuzu-light-alpha-8: #ad00008c;
-  --smoke-light-alpha-9: #07000074;
+  --yuzu-light-alpha-9: #d95c27fc;
-  --smoke-light-alpha-10: #0400009c;
+  --yuzu-light-alpha-10: #eb6c39fb;
-  --smoke-light-alpha-11: #0700007e;
+  --yuzu-light-alpha-11: #901700ed;
-  --smoke-light-alpha-12: #020000df;
+  --yuzu-light-alpha-12: #460000f0;
-  --yuzu-dark-1: #11120c;
+  --cobalt-dark-1: #140804;
-  --yuzu-light-1: #fdfdfb;
+  --cobalt-dark-2: #1e0c06;
-  --yuzu-light-2: #fbfceb;
+  --cobalt-dark-3: #2d1107;
-  --yuzu-light-3: #f8fac5;
+  --cobalt-dark-4: #3e1607;
-  --yuzu-light-4: #f2f4a5;
+  --cobalt-dark-5: #55210b;
-  --yuzu-light-5: #e9eb9a;
+  --cobalt-dark-6: #6d2c10;
-  --yuzu-light-6: #dcde8e;
+  --cobalt-dark-7: #8c3d1c;
-  --yuzu-light-7: #cccd7e;
+  --cobalt-dark-8: #b75228;
-  --yuzu-light-8: #b6b768;
+  --cobalt-dark-9: #d95e2a;
-  --yuzu-light-9: #dcde8d;
+  --cobalt-dark-10: #c84e15;
-  --yuzu-light-10: #d2d384;
+  --cobalt-dark-11: #fc8a5e;
-  --yuzu-light-11: #7c7c2c;
+  --cobalt-dark-12: #ffd2b4;
-  --yuzu-light-12: #3d3d23;
+  --cobalt-light-1: #fff8f3;
-  --yuzu-dark-2: #181810;
+  --cobalt-light-2: #fff0e8;
-  --yuzu-dark-3: #262614;
+  --cobalt-light-3: #ffe3d6;
-  --yuzu-dark-4: #313115;
+  --cobalt-light-4: #ffd2c1;
-  --yuzu-dark-5: #3d3d18;
+  --cobalt-light-5: #fabea8;
-  --yuzu-dark-6: #4a4a21;
+  --cobalt-light-6: #eea78d;
-  --yuzu-dark-7: #5a5b2c;
+  --cobalt-light-7: #e28b6a;
-  --yuzu-dark-8: #6f6f36;
+  --cobalt-light-8: #d26a42;
-  --yuzu-dark-9: #fdffca;
+  --cobalt-light-9: #d95e2a;
-  --yuzu-dark-10: #f4f6c1;
+  --cobalt-light-10: #eb6e3c;
-  --yuzu-dark-11: #dbdda0;
+  --cobalt-light-11: #982700;
-  --yuzu-dark-12: #eff1bd;
+  --cobalt-light-12: #510000;
-  --yuzu-dark-alpha-1: #11910002;
+  --cobalt-dark-alpha-1: #ff783c11;
-  --yuzu-dark-alpha-2: #f1f10008;
+  --cobalt-dark-alpha-2: #ff6d371c;
-  --yuzu-dark-alpha-3: #fafa3317;
+  --cobalt-dark-alpha-3: #9d3b1849;
-  --yuzu-dark-alpha-4: #fbfb2f23;
+  --cobalt-dark-alpha-4: #9434116b;
-  --yuzu-dark-alpha-5: #fbfb3730;
+  --cobalt-dark-alpha-5: #a8411681;
-  --yuzu-dark-alpha-6: #fcfc533e;
+  --cobalt-dark-alpha-6: #bc4c1c94;
-  --yuzu-dark-alpha-7: #fafd6750;
+  --cobalt-dark-alpha-7: #d05a2aac;
-  --yuzu-dark-alpha-8: #ffff6f65;
+  --cobalt-dark-alpha-8: #e46632cd;
-  --yuzu-dark-alpha-9: #fdffca;
+  --cobalt-dark-alpha-9: #d95e2aff;
-  --yuzu-dark-alpha-10: #fcfec7f6;
+  --cobalt-dark-alpha-10: #d75417ed;
-  --yuzu-dark-alpha-11: #fdffb8db;
+  --cobalt-dark-alpha-11: #fc8a5eff;
-  --yuzu-dark-alpha-12: #fdffc8f0;
+  --cobalt-dark-alpha-12: #ffd2b4ff;
-  --yuzu-light-alpha-1: #80800004;
+  --cobalt-light-alpha-1: #ff000003;
-  --yuzu-light-alpha-2: #ccd90014;
+  --cobalt-light-alpha-2: #ff00000a;
-  --yuzu-light-alpha-3: #e1ea003a;
+  --cobalt-light-alpha-3: #ff000015;
-  --yuzu-light-alpha-4: #dbe0015a;
+  --cobalt-light-alpha-4: #ff000025;
-  --yuzu-light-alpha-5: #c8cd0065;
+  --cobalt-light-alpha-5: #e8000037;
-  --yuzu-light-alpha-6: #b1b50071;
+  --cobalt-light-alpha-6: #c500004b;
-  --yuzu-light-alpha-7: #9b9d0081;
+  --cobalt-light-alpha-7: #b7000067;
-  --yuzu-light-alpha-8: #84860097;
+  --cobalt-light-alpha-8: #ad00008c;
-  --yuzu-light-alpha-9: #b1b60072;
+  --cobalt-light-alpha-9: #d95c27fc;
-  --yuzu-light-alpha-10: #a2a4017b;
+  --cobalt-light-alpha-10: #eb6c39fb;
-  --yuzu-light-alpha-11: #616100d3;
+  --cobalt-light-alpha-11: #901700ed;
-  --yuzu-light-alpha-12: #1e1e00dc;
+  --cobalt-light-alpha-12: #460000f0;
-  --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;
   --apple-dark-1: #0c140b;
   --apple-light-1: #fafefa;
   --apple-light-2: #f4fcf3;

packages/ui/src/styles/theme.css

@@ -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 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(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    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 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(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    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 3px var(--border-weak-selected, rgba(217, 94, 42, 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 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(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+    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 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(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
+    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(0, 74, 255, 0.99));
+    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 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(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    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, #fc543a);
+  --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 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(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 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-strong: #F9F9F7;
-  --background-stronger: #fcfcfc;
+  --background-stronger: #F9F9F7;
   --surface-base: var(--smoke-light-alpha-2);
   --base: var(--smoke-light-alpha-2);
-  --surface-base-hover: #0500000f;
+  --surface-base-hover: #d95e2a18;
-  --surface-base-active: var(--smoke-light-alpha-3);
+  --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: #D95E2A;
-  --surface-float-base-hover: var(--smoke-dark-2);
+  --surface-float-base-hover: #c84e15;
-  --surface-raised-base-hover: var(--smoke-light-alpha-2);
+  --surface-raised-base-hover: #d95e2a18;
-  --surface-raised-base-active: var(--smoke-light-alpha-3);
+  --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-base: #ffffffdd;
-  --text-invert-weak: var(--smoke-dark-alpha-9);
+  --text-invert-weak: #ffffffaa;
-  --text-invert-weaker: var(--smoke-dark-alpha-8);
+  --text-invert-weaker: #ffffff88;
-  --text-invert-strong: var(--smoke-dark-alpha-12);
+  --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-primary-base: #D95E2A;
-  --button-secondary-base: #fdfcfc;
+  --button-secondary-base: #F9F9F1;
-  --button-secondary-hover: #faf9f9;
+  --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-base: #D95E2A;
-  --icon-strong-hover: #151313;
+  --icon-strong-hover: #c84e15;
-  --icon-strong-active: #020202;
+  --icon-strong-active: #b04012;
-  --icon-strong-selected: #020202;
+  --icon-strong-selected: #b04012;
-  --icon-strong-disabled: var(--smoke-light-8);
+  --icon-strong-disabled: #e8a88c;
-  --icon-strong-focus: #020202;
+  --icon-strong-focus: #c84e15;
-  --icon-brand-base: var(--smoke-light-12);
+  --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-base: #ffffff;
-  --icon-on-brand-hover: var(--smoke-light-alpha-12);
+  --icon-on-brand-hover: #ffffff;
-  --icon-on-brand-selected: var(--smoke-light-alpha-12);
+  --icon-on-brand-selected: #ffffff;
-  --icon-on-interactive-base: var(--smoke-light-1);
+  --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-text: #161611;
-  --markdown-link: #3b7dd8;
+  --markdown-link: #D95E2A;
-  --markdown-link-text: #318795;
+  --markdown-link-text: #982700;
   --markdown-code: #3d9a57;
   --markdown-block-quote: #b0851f;
   --markdown-emph: #b0851f;
-  --markdown-strong: #d68c27;
+  --markdown-strong: #D95E2A;
-  --markdown-horizontal-rule: #8a8a8a;
+  --markdown-horizontal-rule: #878780;
-  --markdown-list-item: #3b7dd8;
+  --markdown-list-item: #D95E2A;
-  --markdown-list-enumeration: #318795;
+  --markdown-list-enumeration: #982700;
-  --markdown-image: #3b7dd8;
+  --markdown-image: #D95E2A;
-  --markdown-image-text: #318795;
+  --markdown-image-text: #982700;
-  --markdown-code-block: #1a1a1a;
+  --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-hover: #d95e2a12;
-  --button-ghost-hover2: var(--smoke-light-alpha-3);
+  --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-base: #161614;
-    --background-weak: #1c1717;
+    --background-weak: #2F2F2C;
-    --background-strong: #151313;
+    --background-strong: #0e0e09;
-    --background-stronger: #191515;
+    --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: #0e0e097f;
-    --surface-inset-base-hover: #0e0b0b7f;
+    --surface-inset-base-hover: #0e0e097f;
-    --surface-inset-strong: #060505cc;
+    --surface-inset-strong: #060604cc;
-    --surface-inset-strong-hover: #060505cc;
+    --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-base: #20201a;
-    --button-secondary-hover: #2a2727;
+    --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-hover: #f2f2eb;
-    --icon-strong-active: #fcfcfc;
+    --icon-strong-active: #fefef6;
-    --icon-strong-selected: #fdfcfc;
+    --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-text: #f2f2eb;
-    --markdown-link: #fab283;
+    --markdown-link: #fc8a5e;
-    --markdown-link-text: #56b6c2;
+    --markdown-link-text: #ffd2b4;
     --markdown-code: #7fd88f;
     --markdown-block-quote: #e5c07b;
     --markdown-emph: #e5c07b;
-    --markdown-strong: #f5a742;
+    --markdown-strong: #fc8a5e;
-    --markdown-horizontal-rule: #808080;
+    --markdown-horizontal-rule: #7b7b74;
-    --markdown-list-item: #fab283;
+    --markdown-list-item: #fc8a5e;
-    --markdown-list-enumeration: #56b6c2;
+    --markdown-list-enumeration: #ffd2b4;
-    --markdown-image: #fab283;
+    --markdown-image: #fc8a5e;
-    --markdown-image-text: #56b6c2;
+    --markdown-image-text: #ffd2b4;
-    --markdown-code-block: #eeeeee;
+    --markdown-code-block: #f2f2eb;
     --border-color: #ffffff;
     --border-weaker-base: var(--smoke-dark-alpha-3);
     --border-weaker-hover: var(--smoke-dark-alpha-4);

packages/ui/src/theme/context.tsx

@@ -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",
+      themeId: props.defaultTheme ?? "oc-2",
-      colorScheme: "system" as ColorScheme,
+      colorScheme: "light" as ColorScheme,
-      mode: getSystemMode(),
+      mode: "light" as "light" | "dark",
       previewThemeId: null as string | null,
       previewScheme: null as ColorScheme | null,
     })

packages/ui/src/theme/themes/oc-1.json

@@ -4,25 +4,25 @@
   "id": "oc-1",
   "light": {
     "seeds": {
-      "neutral": "#8e8b8b",
+      "neutral": "#A6A69F",
-      "primary": "#dcde8d",
+      "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-strong": "#F9F9F7",
-      "background-stronger": "#fcfcfc",
+      "background-stronger": "#F9F9F7",
       "surface-base": "var(--smoke-light-alpha-2)",
       "base": "var(--smoke-light-alpha-2)",
-      "surface-base-hover": "#0500000f",
+      "surface-base-hover": "#d95e2a18",
-      "surface-base-active": "var(--smoke-light-alpha-3)",
+      "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": "#D95E2A",
-      "surface-float-base-hover": "var(--smoke-dark-2)",
+      "surface-float-base-hover": "#c84e15",
-      "surface-raised-base-hover": "var(--smoke-light-alpha-3)",
+      "surface-raised-base-hover": "#d95e2a18",
-      "surface-raised-base-active": "var(--smoke-light-alpha-4)",
+      "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-base": "#ffffffdd",
-      "text-invert-weak": "var(--smoke-dark-alpha-9)",
+      "text-invert-weak": "#ffffffaa",
-      "text-invert-weaker": "var(--smoke-dark-alpha-8)",
+      "text-invert-weaker": "#ffffff88",
-      "text-invert-strong": "var(--smoke-dark-alpha-12)",
+      "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-weak": "#ffffffcc",
-      "text-on-brand-weaker": "var(--smoke-light-alpha-8)",
+      "text-on-brand-weaker": "#ffffff99",
-      "text-on-brand-strong": "var(--smoke-light-alpha-12)",
+      "text-on-brand-strong": "#ffffff",
-      "button-primary-base": "var(--smoke-light-12)",
+      "button-primary-base": "#D95E2A",
-      "button-secondary-base": "#fdfcfc",
+      "button-secondary-base": "#F9F9F1",
-      "button-secondary-hover": "#faf9f9",
+      "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-base": "#D95E2A",
-      "icon-strong-hover": "#151313",
+      "icon-strong-hover": "#c84e15",
-      "icon-strong-active": "#020202",
+      "icon-strong-active": "#b04012",
-      "icon-strong-selected": "#020202",
+      "icon-strong-selected": "#b04012",
-      "icon-strong-disabled": "var(--smoke-light-8)",
+      "icon-strong-disabled": "#e8a88c",
-      "icon-strong-focus": "#020202",
+      "icon-strong-focus": "#c84e15",
-      "icon-brand-base": "var(--smoke-light-12)",
+      "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-base": "#ffffff",
-      "icon-on-brand-hover": "var(--smoke-light-alpha-12)",
+      "icon-on-brand-hover": "#ffffff",
-      "icon-on-brand-selected": "var(--smoke-light-alpha-12)",
+      "icon-on-brand-selected": "#ffffff",
-      "icon-on-interactive-base": "var(--smoke-light-1)",
+      "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-text": "#161611",
-      "markdown-link": "#3b7dd8",
+      "markdown-link": "#D95E2A",
-      "markdown-link-text": "#318795",
+      "markdown-link-text": "#982700",
       "markdown-code": "#3d9a57",
       "markdown-block-quote": "#b0851f",
       "markdown-emph": "#b0851f",
-      "markdown-strong": "#d68c27",
+      "markdown-strong": "#D95E2A",
-      "markdown-horizontal-rule": "#8a8a8a",
+      "markdown-horizontal-rule": "#878780",
-      "markdown-list-item": "#3b7dd8",
+      "markdown-list-item": "#D95E2A",
-      "markdown-list-enumeration": "#318795",
+      "markdown-list-enumeration": "#982700",
-      "markdown-image": "#3b7dd8",
+      "markdown-image": "#D95E2A",
-      "markdown-image-text": "#318795",
+      "markdown-image-text": "#982700",
-      "markdown-code-block": "#1a1a1a",
+      "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-hover": "#d95e2a12",
-      "button-ghost-hover2": "var(--smoke-light-alpha-3)",
+      "button-ghost-hover2": "#d95e2a1a",
       "avatar-background-pink": "#feeef8",
       "avatar-background-mint": "#e1fbf4",
       "avatar-background-orange": "#fff1e7",
@@ -270,32 +270,32 @@
   },
   "dark": {
     "seeds": {
-      "neutral": "#716c6b",
+      "neutral": "#A6A69F",
-      "primary": "#fab283",
+      "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-base": "#161614",
-      "background-weak": "#1c1717",
+      "background-weak": "#2F2F2C",
-      "background-strong": "#151313",
+      "background-strong": "#0e0e09",
-      "background-stronger": "#191515",
+      "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": "#0e0e097f",
-      "surface-inset-base-hover": "#0e0b0b7f",
+      "surface-inset-base-hover": "#0e0e097f",
-      "surface-inset-strong": "#060505cc",
+      "surface-inset-strong": "#060604cc",
-      "surface-inset-strong-hover": "#060505cc",
+      "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-base": "#20201a",
-      "button-secondary-hover": "#2a2727",
+      "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-hover": "#f2f2eb",
-      "icon-strong-active": "#fcfcfc",
+      "icon-strong-active": "#fefef6",
-      "icon-strong-selected": "#fdfcfc",
+      "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-text": "#f2f2eb",
-      "markdown-link": "#fab283",
+      "markdown-link": "#fc8a5e",
-      "markdown-link-text": "#56b6c2",
+      "markdown-link-text": "#ffd2b4",
       "markdown-code": "#7fd88f",
       "markdown-block-quote": "#e5c07b",
       "markdown-emph": "#e5c07b",
-      "markdown-strong": "#f5a742",
+      "markdown-strong": "#fc8a5e",
-      "markdown-horizontal-rule": "#808080",
+      "markdown-horizontal-rule": "#7b7b74",
-      "markdown-list-item": "#fab283",
+      "markdown-list-item": "#fc8a5e",
-      "markdown-list-enumeration": "#56b6c2",
+      "markdown-list-enumeration": "#ffd2b4",
-      "markdown-image": "#fab283",
+      "markdown-image": "#fc8a5e",
-      "markdown-image-text": "#56b6c2",
+      "markdown-image-text": "#ffd2b4",
-      "markdown-code-block": "#eeeeee",
+      "markdown-code-block": "#f2f2eb",
       "border-color": "#ffffff",
       "border-weaker-base": "var(--smoke-dark-alpha-3)",
       "border-weaker-hover": "var(--smoke-dark-alpha-4)",

packages/ui/src/theme/themes/oc-2.json

@@ -4,25 +4,25 @@
   "id": "oc-2",
   "light": {
     "seeds": {
-      "neutral": "#8e8b8b",
+      "neutral": "#A6A69F",
-      "primary": "#dcde8d",
+      "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-strong": "#F9F9F7",
-      "background-stronger": "#fcfcfc",
+      "background-stronger": "#F9F9F7",
       "surface-base": "var(--gray-light-alpha-2)",
       "base": "var(--gray-light-alpha-2)",
-      "surface-base-hover": "#0500000f",
+      "surface-base-hover": "#d95e2a18",
-      "surface-base-active": "var(--gray-light-alpha-3)",
+      "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": "#D95E2A",
-      "surface-float-base-hover": "var(--gray-dark-2)",
+      "surface-float-base-hover": "#c84e15",
-      "surface-raised-base-hover": "var(--gray-light-alpha-3)",
+      "surface-raised-base-hover": "#d95e2a18",
-      "surface-raised-base-active": "var(--gray-light-alpha-5)",
+      "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-base": "#ffffffdd",
-      "text-invert-weak": "var(--gray-dark-alpha-9)",
+      "text-invert-weak": "#ffffffaa",
-      "text-invert-weaker": "var(--gray-dark-alpha-8)",
+      "text-invert-weaker": "#ffffff88",
-      "text-invert-strong": "var(--gray-dark-alpha-12)",
+      "text-invert-strong": "#ffffff",
       "text-interactive-base": "var(--cobalt-light-9)",
-      "text-on-brand-base": "var(--gray-light-alpha-11)",
+      "text-on-brand-base": "#ffffff",
-      "text-on-interactive-base": "var(--gray-light-1)",
+      "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-weak": "#ffffffcc",
-      "text-on-brand-weaker": "var(--gray-light-alpha-8)",
+      "text-on-brand-weaker": "#ffffffaa",
-      "text-on-brand-strong": "var(--gray-light-alpha-12)",
+      "text-on-brand-strong": "#ffffff",
-      "button-primary-base": "var(--gray-light-12)",
+      "button-primary-base": "#D95E2A",
-      "button-secondary-base": "var(--gray-light-1)",
+      "button-secondary-base": "#F9F9F1",
-      "button-secondary-hover": "FFFFFF0A",
+      "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-base": "#D95E2A",
-      "icon-strong-hover": "#151313",
+      "icon-strong-hover": "#c84e15",
-      "icon-strong-active": "#020202",
+      "icon-strong-active": "#b04012",
-      "icon-strong-selected": "#020202",
+      "icon-strong-selected": "#b04012",
-      "icon-strong-disabled": "var(--gray-light-6)",
+      "icon-strong-disabled": "#e8a88c",
-      "icon-strong-focus": "#020202",
+      "icon-strong-focus": "#c84e15",
-      "icon-brand-base": "var(--gray-light-12)",
+      "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-base": "#ffffff",
-      "icon-on-brand-hover": "var(--gray-light-alpha-12)",
+      "icon-on-brand-hover": "#ffffff",
-      "icon-on-brand-selected": "var(--gray-light-alpha-12)",
+      "icon-on-brand-selected": "#ffffff",
-      "icon-on-interactive-base": "var(--gray-light-1)",
+      "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-text": "#161611",
-      "markdown-link": "#3b7dd8",
+      "markdown-link": "#D95E2A",
-      "markdown-link-text": "#318795",
+      "markdown-link-text": "#982700",
       "markdown-code": "#3d9a57",
       "markdown-block-quote": "#b0851f",
       "markdown-emph": "#b0851f",
-      "markdown-strong": "#d68c27",
+      "markdown-strong": "#D95E2A",
-      "markdown-horizontal-rule": "#8a8a8a",
+      "markdown-horizontal-rule": "#878780",
-      "markdown-list-item": "#3b7dd8",
+      "markdown-list-item": "#D95E2A",
-      "markdown-list-enumeration": "#318795",
+      "markdown-list-enumeration": "#982700",
-      "markdown-image": "#3b7dd8",
+      "markdown-image": "#D95E2A",
-      "markdown-image-text": "#318795",
+      "markdown-image-text": "#982700",
-      "markdown-code-block": "#1a1a1a",
+      "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-hover": "#d95e2a12",
-      "button-ghost-hover2": "var(--gray-light-alpha-3)",
+      "button-ghost-hover2": "#d95e2a1a",
       "avatar-background-pink": "#feeef8",
       "avatar-background-mint": "#e1fbf4",
       "avatar-background-orange": "#fff1e7",
@@ -270,32 +270,32 @@
   },
   "dark": {
     "seeds": {
-      "neutral": "#716c6b",
+      "neutral": "#A6A69F",
-      "primary": "#fab283",
+      "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-base": "#161614",
-      "background-weak": "#1E1E1E",
+      "background-weak": "#2F2F2C",
-      "background-strong": "#121212",
+      "background-strong": "#0e0e09",
-      "background-stronger": "#151515",
+      "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": "#0e0e097f",
-      "surface-inset-base-hover": "#0e0b0b7f",
+      "surface-inset-base-hover": "#0e0e097f",
-      "surface-inset-strong": "#060505cc",
+      "surface-inset-strong": "#060604cc",
-      "surface-inset-strong-hover": "#060505cc",
+      "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-hover": "#f2f2eb",
-      "icon-strong-active": "#EBEBEB",
+      "icon-strong-active": "#ecece4",
-      "icon-strong-selected": "#FCFCFC",
+      "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-text": "#f2f2eb",
-      "markdown-link": "#fab283",
+      "markdown-link": "#fc8a5e",
-      "markdown-link-text": "#56b6c2",
+      "markdown-link-text": "#ffd2b4",
       "markdown-code": "#7fd88f",
       "markdown-block-quote": "#e5c07b",
       "markdown-emph": "#e5c07b",
-      "markdown-strong": "#f5a742",
+      "markdown-strong": "#fc8a5e",
-      "markdown-horizontal-rule": "#808080",
+      "markdown-horizontal-rule": "#7b7b74",
-      "markdown-list-item": "#fab283",
+      "markdown-list-item": "#fc8a5e",
-      "markdown-list-enumeration": "#56b6c2",
+      "markdown-list-enumeration": "#ffd2b4",
-      "markdown-image": "#fab283",
+      "markdown-image": "#fc8a5e",
-      "markdown-image-text": "#56b6c2",
+      "markdown-image-text": "#ffd2b4",
-      "markdown-code-block": "#eeeeee",
+      "markdown-code-block": "#f2f2eb",
       "border-color": "#ffffff",
       "border-weaker-base": "var(--gray-dark-alpha-3)",
       "border-weaker-hover": "var(--gray-dark-alpha-4)",