diff --git a/apps/menu-bar/global.css b/apps/menu-bar/global.css index 7f684c3d..861064cb 100644 --- a/apps/menu-bar/global.css +++ b/apps/menu-bar/global.css @@ -1,3 +1,112 @@ +body { + background-color: var(--orbit-window-background); +} + +:not(input):not(textarea), +:not(input):not(textarea)::after, +:not(input):not(textarea)::before { + -webkit-user-select: none; + user-select: none; +} + +@media (prefers-color-scheme: light) { + /* Platform Color based on macOS Semantic Colors*/ + :root { + --label-color: #242424; + --secondary-label-color: #000000; + --tertiary-label-color: #000000; + --quaternary-label-color: #000000; + --link-color: #084fd1; + --placeholder-text-color: #000000; + --window-frame-text-color: #000000; + --selected-menu-item-text-color: #fffefe; + --alternate-selected-control-text-color: #fffefe; + --header-text-color: #000000; + --separator-color: #000000; + --grid-color: #e6e6e6; + --window-background-color: #e7e7e7; + --under-page-background-color: #838383; + --control-background-color: #fffefe; + --selected-content-background: #064ad9; + --unemphasized-selected-content-background-color: #d3d3d3; + --find-highlight-color: #ffff0a; + --alternating-content-background-color: #f1f2f2; + --text-color: #000000; + --text-background-color: #fffefe; + --selected-text-color: #000000; + --selected-text-background-color: #fac99f; + --unemphasized-selected-text-background-color: #d3d3d3; + --unemphasized-selected-text-color: #000000; + --control-color: #ffffff; + --control-text-color: #000000; + --selected-control-color: #fac99f; + --selected-control-text-color: #000000; + --disabled-control-text-color: #000000; + --keyboard-focus-indicator-color: #e45a08; + --control-accent-color: #007bff; + --highlight-color: #fffefe; + --shadow-color: #000000; + + --popover-background: #e6e7e7; + --orbit-window-background: #eaecec; + } +} + +@media (prefers-color-scheme: dark) { + /* Platform Color based on macOS Semantic Colors*/ + :root { + --label-color: #fffefe; + --secondary-label-color: #fffefe; + --tertiary-label-color: #fffefe; + --quaternary-label-color: #fffefe; + --link-color: #3486fe; + --placeholder-text-color: #fffefe; + --window-frame-text-color: #fffefe; + --selected-menu-item-text-color: #fffefe; + --alternate-selected-control-text-color: #fffefe; + --header-text-color: #fffefe; + --separator-color: #fffefe; + --grid-color: #fffefe; + --window-background-color: #252525; + --under-page-background-color: #1d1d1d; + --control-background-color: #161616; + --selected-content-background: #064ad9; + --unemphasized-selected-content-background-color: #363636; + --find-highlight-color: #ffff0a; + --alternating-content-background-color: #fffefe; + --text-color: #fffefe; + --text-background-color: #161616; + --selected-text-color: #ffffff; + --selected-text-background-color: #803c0e; + --unemphasized-selected-text-background-color: #363636; + --unemphasized-selected-text-color: #ffffff; + --control-color: #fffefe; + --control-text-color: #fffefe; + --selected-control-color: #803c0e; + --selected-control-text-color: #fffefe; + --disabled-control-text-color: #fffefe; + --keyboard-focus-indicator-color: #fd9d2e; + --control-accent-color: #007aff; + --highlight-color: #a4a4a4; + --shadow-color: #000000; + + --popover-background: #212121; + --orbit-window-background: #252928; + } +} + +:root { + --system-red-color: #fb2b2c; + --system-green-color: #30d33a; + --system-blue-color: #106afe; + --system-orange-color: #fc8d0d; + --system-yellow-color: #fecf0e; + --system-brown-color: #9b7b55; + --system-pink-color: #fb194c; + --system-purple-color: #4e45d8; + --system-gray-color: #85858b; +} + /* Fonts */ @font-face { src: url('src/assets/fonts/Inter/Inter-Regular.otf'); diff --git a/apps/menu-bar/src/components/AutoResizerRootView/index.web.tsx b/apps/menu-bar/src/components/AutoResizerRootView/index.web.tsx index 2f5de4dd..8c0b6ebe 100644 --- a/apps/menu-bar/src/components/AutoResizerRootView/index.web.tsx +++ b/apps/menu-bar/src/components/AutoResizerRootView/index.web.tsx @@ -45,7 +45,13 @@ const AutoResizerRootView = ({ }, [enabled, maxRelativeHeight]); return ( -