feat: redesign toolbar & tweaks (#4387)

src/components/Card.tsx

@@ -3,15 +3,22 @@ import OpenColor from "open-color";
 import "./Card.scss";
 
 export const Card: React.FC<{
-  color: keyof OpenColor;
+  color: keyof OpenColor | "primary";
 }> = ({ children, color }) => {
   return (
     <div
       className="Card"
       style={{
-        ["--card-color" as any]: OpenColor[color][7],
-        ["--card-color-darker" as any]: OpenColor[color][8],
-        ["--card-color-darkest" as any]: OpenColor[color][9],
+        ["--card-color" as any]:
+          color === "primary" ? "var(--color-primary)" : OpenColor[color][7],
+        ["--card-color-darker" as any]:
+          color === "primary"
+            ? "var(--color-primary-darker)"
+            : OpenColor[color][8],
+        ["--card-color-darkest" as any]:
+          color === "primary"
+            ? "var(--color-primary-darkest)"
+            : OpenColor[color][9],
       }}
     >
       {children}

src/components/IconPicker.scss

@@ -22,7 +22,7 @@
     align-items: center;
     justify-content: center;
 
-    &:focus {
+    &:focus-visible {
       outline: transparent;
       background-color: var(--button-gray-2);
       & svg {

src/components/Island.scss

@@ -3,7 +3,7 @@
     --padding: 0;
     background-color: var(--island-bg-color);
     box-shadow: var(--shadow-island);
-    border-radius: 4px;
+    border-radius: var(--border-radius-lg);
     padding: calc(var(--padding) * var(--space-factor));
     position: relative;
     transition: box-shadow 0.5s ease-in-out;

src/components/LayerUI.tsx

@@ -19,7 +19,6 @@ import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
 import { Island } from "./Island";
-import "./LayerUI.scss";
 import { LoadingMessage } from "./LoadingMessage";
 import { LockButton } from "./LockButton";
 import { MobileMenu } from "./MobileMenu";
@@ -35,6 +34,9 @@ import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
 import { LibraryMenu } from "./LibraryMenu";
 
+import "./LayerUI.scss";
+import "./Toolbar.scss";
+
 interface LayerUIProps {
   actionManager: ActionManager;
   appState: AppState;
@@ -305,7 +307,12 @@ const LayerUI = ({
             <Section heading="shapes">
               {(heading) => (
                 <Stack.Col gap={4} align="start">
-                  <Stack.Row gap={1}>
+                  <Stack.Row
+                    gap={1}
+                    className={clsx("App-toolbar-container", {
+                      "zen-mode": zenModeEnabled,
+                    })}
+                  >
                     <LockButton
                       zenModeEnabled={zenModeEnabled}
                       checked={appState.elementLocked}
@@ -314,7 +321,9 @@ const LayerUI = ({
                     />
                     <Island
                       padding={1}
-                      className={clsx({ "zen-mode": zenModeEnabled })}
+                      className={clsx("App-toolbar", {
+                        "zen-mode": zenModeEnabled,
+                      })}
                     >
                       <HintViewer
                         appState={appState}

src/components/LibraryButton.tsx

@@ -16,18 +16,18 @@ const LIBRARY_ICON = (
 export const LibraryButton: React.FC<{
   appState: AppState;
   setAppState: React.Component<any, AppState>["setState"];
-}> = ({ appState, setAppState }) => {
+  isMobile?: boolean;
+}> = ({ appState, setAppState, isMobile }) => {
   return (
     <label
       className={clsx(
-        "ToolIcon ToolIcon_type_floating ToolIcon__library zen-mode-visibility",
+        "ToolIcon ToolIcon_type_floating ToolIcon__library",
         `ToolIcon_size_medium`,
         {
-          "zen-mode-visibility--hidden": appState.zenModeEnabled,
+          "is-mobile": isMobile,
         },
       )}
       title={`${capitalizeString(t("toolBar.library"))} — 0`}
-      style={{ marginInlineStart: "var(--space-factor)" }}
     >
       <input
         className="ToolIcon_type_checkbox"

src/components/LockButton.tsx

@@ -10,6 +10,7 @@ type LockIconProps = {
   checked: boolean;
   onChange?(): void;
   zenModeEnabled?: boolean;
+  isMobile?: boolean;
 };
 
 const DEFAULT_SIZE: ToolButtonSize = "medium";
@@ -42,10 +43,10 @@ export const LockButton = (props: LockIconProps) => {
   return (
     <label
       className={clsx(
-        "ToolIcon ToolIcon__lock ToolIcon_type_floating zen-mode-visibility",
+        "ToolIcon ToolIcon__lock ToolIcon_type_floating",
         `ToolIcon_size_${DEFAULT_SIZE}`,
         {
-          "zen-mode-visibility--hidden": props.zenModeEnabled,
+          "is-mobile": props.isMobile,
         },
       )}
       title={`${props.title} — Q`}

src/components/MobileMenu.tsx

@@ -64,8 +64,8 @@ export const MobileMenu = ({
         <Section heading="shapes">
           {(heading) => (
             <Stack.Col gap={4} align="center">
-              <Stack.Row gap={1}>
-                <Island padding={1}>
+              <Stack.Row gap={1} className="App-toolbar-container">
+                <Island padding={1} className="App-toolbar">
                   {heading}
                   <Stack.Row gap={1}>
                     <ShapesSwitcher
@@ -85,8 +85,13 @@ export const MobileMenu = ({
                   checked={appState.elementLocked}
                   onChange={onLockToggle}
                   title={t("toolBar.lock")}
+                  isMobile
+                />
+                <LibraryButton
+                  appState={appState}
+                  setAppState={setAppState}
+                  isMobile
                 />
-                <LibraryButton appState={appState} setAppState={setAppState} />
               </Stack.Row>
               {libraryMenu}
             </Stack.Col>

src/components/ToolIcon.scss

@@ -8,17 +8,7 @@
     position: relative;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    border-radius: var(--space-factor);
     user-select: none;
-
-    background-color: var(--button-gray-1);
-
-    &:hover {
-      background-color: var(--button-gray-2);
-    }
-    &:active {
-      background-color: var(--button-gray-3);
-    }
   }
 
   .ToolIcon--plain {
@@ -29,6 +19,20 @@
     }
   }
 
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    & + .ToolIcon__icon {
+      background-color: var(--button-gray-1);
+
+      &:hover {
+        background-color: var(--button-gray-2);
+      }
+      &:active {
+        background-color: var(--button-gray-3);
+      }
+    }
+  }
+
   .ToolIcon__icon {
     width: 2.5rem;
     height: 2.5rem;
@@ -38,7 +42,11 @@
     justify-content: center;
     align-items: center;
 
-    border-radius: var(--space-factor);
+    border-radius: var(--border-radius-lg);
+
+    & + .ToolIcon__label {
+      margin-inline-start: 0;
+    }
 
     svg {
       position: relative;
@@ -46,10 +54,6 @@
       fill: var(--icon-fill-color);
       color: var(--icon-fill-color);
     }
-
-    & + .ToolIcon__label {
-      margin-inline-start: 0;
-    }
   }
 
   .ToolIcon__label {
@@ -79,7 +83,7 @@
     margin: 0;
     font-size: inherit;
 
-    &:focus {
+    &:focus-visible {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
 
@@ -121,7 +125,7 @@
       }
     }
 
-    &:focus + .ToolIcon__icon {
+    &:focus-visible + .ToolIcon__icon {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
 
@@ -141,10 +145,6 @@
       background-color: transparent;
     }
 
-    &:focus {
-      box-shadow: none;
-    }
-
     .ToolIcon__icon {
       background-color: var(--button-gray-1);
       &:hover {
@@ -159,13 +159,6 @@
     }
   }
 
-  .ToolIcon.ToolIcon__lock {
-    margin-inline-end: var(--space-factor);
-    &.ToolIcon_type_floating {
-      margin-left: 0.1rem;
-    }
-  }
-
   .ToolIcon__keybinding {
     position: absolute;
     bottom: 2px;

src/components/Toolbar.scss

@@ -0,0 +1,112 @@
+@import "open-color/open-color.scss";
+
+@mixin toolbarButtonColorStates {
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    & + .ToolIcon__icon:active {
+      background: var(--color-primary-light);
+    }
+    &:checked + .ToolIcon__icon {
+      background: var(--color-primary);
+      --icon-fill-color: #{$oc-white};
+      --keybinding-color: #{$oc-white};
+    }
+    &:checked + .ToolIcon__icon:active {
+      background: var(--color-primary-darker);
+    }
+  }
+
+  .ToolIcon__keybinding {
+    bottom: 4px;
+    right: 4px;
+  }
+}
+
+.excalidraw {
+  .App-toolbar-container {
+    .ToolIcon_type_floating {
+      @include toolbarButtonColorStates;
+
+      &:not(.is-mobile) {
+        .ToolIcon__icon {
+          padding: 1px;
+          background-color: var(--island-bg-color);
+          box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 15%);
+          border-radius: 50%;
+          transition: box-shadow 0.5s ease, transform 0.5s ease;
+        }
+      }
+
+      .ToolIcon_type_radio,
+      .ToolIcon_type_checkbox {
+        &:focus-within + .ToolIcon__icon {
+          // override for custom floating button shadow
+          box-shadow: 0 0 0 2px var(--focus-highlight-color);
+        }
+      }
+    }
+
+    .ToolIcon.ToolIcon__lock {
+      margin-inline-end: var(--space-factor);
+      &.ToolIcon_type_floating {
+        margin-left: 0.1rem;
+      }
+    }
+
+    .ToolIcon__library {
+      margin-inline-start: var(--space-factor);
+    }
+
+    &.zen-mode {
+      .ToolIcon_type_floating {
+        .ToolIcon__icon {
+          box-shadow: none;
+          transform: scale(0.9);
+        }
+        .ToolIcon_type_checkbox:not(:checked):not(:hover):not(:active) {
+          & + .ToolIcon__icon {
+            svg {
+              fill: $oc-gray-5;
+              color: $oc-gray-5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .App-toolbar {
+    border-radius: var(--border-radius-lg);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 15%);
+
+    .ToolIcon {
+      &:hover {
+        --icon-fill-color: var(--color-primary-chubb);
+        --keybinding-color: var(--color-primary-chubb);
+      }
+      &:active {
+        --icon-fill-color: #{$oc-gray-9};
+        --keybinding-color: #{$oc-gray-9};
+      }
+
+      .ToolIcon__icon {
+        background: transparent;
+        border-radius: var(--border-radius-lg);
+      }
+
+      @include toolbarButtonColorStates;
+    }
+
+    &.zen-mode {
+      .ToolIcon__keybinding,
+      .HintViewer {
+        display: none;
+      }
+    }
+  }
+
+  &.theme--dark .App-toolbar .ToolIcon:active {
+    --icon-fill-color: #{$oc-gray-3};
+    --keybinding-color: #{$oc-gray-3};
+  }
+}

src/components/icons.tsx

@@ -15,8 +15,9 @@ import { THEME } from "../constants";
 
 const activeElementColor = (theme: Theme) =>
   theme === THEME.LIGHT ? oc.orange[4] : oc.orange[9];
-const iconFillColor = (theme: Theme) =>
-  theme === THEME.LIGHT ? oc.black : oc.gray[4];
+
+const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
+
 const handlerColor = (theme: Theme) =>
   theme === THEME.LIGHT ? oc.white : "#1e1e1e";