From 89370ba49f0768b29f948492f9a45617d42d8d20 Mon Sep 17 00:00:00 2001 From: Nik L Date: Fri, 27 Feb 2026 17:59:28 -0500 Subject: [PATCH] feat:greyhaven redesign --- packages/app/public/oc-theme-preload.js | 2 +- packages/app/src/context/language.tsx | 2 +- packages/app/src/context/layout.tsx | 2 +- packages/ui/src/components/message-part.css | 4 +- packages/ui/src/styles/colors.css | 426 +++++++++----------- packages/ui/src/styles/theme.css | 164 ++++---- packages/ui/src/theme/context.tsx | 10 +- packages/ui/src/theme/themes/oc-1.json | 160 ++++---- packages/ui/src/theme/themes/oc-2.json | 158 ++++---- 9 files changed, 440 insertions(+), 488 deletions(-) diff --git a/packages/app/public/oc-theme-preload.js b/packages/app/public/oc-theme-preload.js index f8c710496..df7cf0eed 100644 --- a/packages/app/public/oc-theme-preload.js +++ b/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) { diff --git a/packages/app/src/context/language.tsx b/packages/app/src/context/language.tsx index 50cc302f4..b105a77ca 100644 --- a/packages/app/src/context/language.tsx +++ b/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, }), ) diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx index 71f0294e7..87057f19c 100644 --- a/packages/app/src/context/layout.tsx +++ b/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, workspacesDefault: false, diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index bea33ff54..7d4448833 100644 --- a/packages/ui/src/components/message-part.css +++ b/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); - border: 1px solid var(--border-weak-base); + background: var(--surface-interactive-weak); + border: 1px solid #d95e2a22; padding: 8px 12px; border-radius: 6px; diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css index 893f252aa..1d2b78dfa 100644 --- a/packages/ui/src/styles/colors.css +++ b/packages/ui/src/styles/colors.css @@ -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; diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index 832b43ec7..144ff3047 100644 --- a/packages/ui/src/styles/theme.css +++ b/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 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); diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx index c1c1637d6..caff46d63 100644 --- a/packages/ui/src/theme/context.tsx +++ b/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, - 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, }) diff --git a/packages/ui/src/theme/themes/oc-1.json b/packages/ui/src/theme/themes/oc-1.json index 03a67ee23..092f93037 100644 --- a/packages/ui/src/theme/themes/oc-1.json +++ b/packages/ui/src/theme/themes/oc-1.json @@ -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)", diff --git a/packages/ui/src/theme/themes/oc-2.json b/packages/ui/src/theme/themes/oc-2.json index 01ec1131a..3508b9f61 100644 --- a/packages/ui/src/theme/themes/oc-2.json +++ b/packages/ui/src/theme/themes/oc-2.json @@ -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)",