feat(component): shortcut style for tooltip (#7721)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/2e68337c-91f1-4ea7-8426-7fb33be02081.png)

- New `shortcut` prop for `<Tooltip />`
  - single key
      ```tsx
      <Tooltip shortcut="T" />
      ```
  - multiple
      ```tsx
      <Tooltip shortcut={["⌘",  "K"]} />
      ```
- Round tooltip's arrow
- Use new design system colors
- Replace some usage
  - App sidebar switch
  - Editor mode switch
  - New tab (new)

packages/frontend/component/src/utils/keyboard-mapping.ts

@@ -0,0 +1,10 @@
+import { isMacOS } from './platform';
+
+const macOS = isMacOS();
+
+export const getCommand = (cmd: '$mod' | '$shift' | '$alt' | string) => {
+  if (cmd === '$mod') return macOS ? '⌘' : 'Ctrl';
+  if (cmd === '$alt') return macOS ? '⌥' : 'Alt';
+  if (cmd === '$shift') return macOS ? '⇧' : 'Shift';
+  return cmd;
+};

packages/frontend/component/src/utils/platform.ts

@@ -0,0 +1,4 @@
+export function isMacOS() {
+  if (typeof navigator === 'undefined') return false;
+  return navigator.userAgent.indexOf('Mac') !== -1;
+}