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/ui/button/button.tsx

@@ -64,7 +64,8 @@ export interface ButtonProps
   suffixStyle?: CSSProperties;
 
   tooltip?: TooltipProps['content'];
-  tooltipOptions?: Partial<Omit<TooltipProps, 'content'>>;
+  tooltipShortcut?: TooltipProps['shortcut'];
+  tooltipOptions?: Partial<Omit<TooltipProps, 'content' | 'shortcut'>>;
 }
 
 const IconSlot = ({
@@ -113,6 +114,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       contentStyle,
 
       tooltip,
+      tooltipShortcut,
       tooltipOptions,
       onClick,
 
@@ -129,7 +131,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
 
     return (
-      <Tooltip content={tooltip} {...tooltipOptions}>
+      <Tooltip content={tooltip} shortcut={tooltipShortcut} {...tooltipOptions}>
         <button
           {...otherProps}
           ref={ref}