Merge pull request #635 from JonathanDeLaCruzEncora/feat/unify-focus-…

…ring 💄 Unify focus ring color with brand theme
liam-hq · Feb 10, 2025 · f7c727b · f7c727b
2 parents 3f564f5 + c5f0d44
commit f7c727b
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 18 deletions.
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/AppBar.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/AppBar.module.css
@@ -73,6 +73,10 @@
     var(--default-timing-function);
 }
 
+.iconWrapper:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .iconWrapper:hover {
   background-color: var(--pane-background-active);
 

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/AppBar.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/AppBar.tsx
@@ -24,7 +24,12 @@ export const AppBar: FC = () => {
         <TooltipProvider>
           <TooltipRoot>
             <TooltipTrigger asChild>
-              <a href="https://liambx.com" target="_blank" rel="noreferrer">
+              <a
+                href="https://liambx.com"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.iconWrapper}
+              >
                 <LiamLogoMark className={styles.logo} />
               </a>
             </TooltipTrigger>

diff --git a/.../packages/erd-core/src/components/ERDRenderer/AppBar/GithubButton/GithubButton.module.css b/.../packages/erd-core/src/components/ERDRenderer/AppBar/GithubButton/GithubButton.module.css
@@ -9,6 +9,10 @@
     var(--default-timing-function);
 }
 
+.iconWrapper:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .iconWrapper:hover {
   background-color: var(--pane-background-active);
 

diff --git a/...tend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.module.css b/...tend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.module.css
@@ -9,6 +9,10 @@
     var(--default-timing-function);
 }
 
+.iconWrapper:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .iconWrapper:hover {
   background-color: var(--pane-background-active);
 

diff --git a/...tend/packages/erd-core/src/components/ERDRenderer/AppBar/MenuButton/MenuButton.module.css b/...tend/packages/erd-core/src/components/ERDRenderer/AppBar/MenuButton/MenuButton.module.css
@@ -2,13 +2,18 @@
   display: grid;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-2);
-
+  padding: var(--spacing-1);
+  margin: 0 var(--spacing-2);
+  border-radius: var(--border-radius-base);
   &:hover .icon {
     color: var(--global-foreground);
   }
 }
 
+.wrapper:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .icon {
   width: 1.25rem;
   height: 1.25rem;

diff --git a/...erd-core/src/components/ERDRenderer/AppBar/ReleaseNoteButton/ReleaseNoteButton.module.css b/...erd-core/src/components/ERDRenderer/AppBar/ReleaseNoteButton/ReleaseNoteButton.module.css
@@ -9,6 +9,10 @@
     var(--default-timing-function);
 }
 
+.iconWrapper:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .iconWrapper:hover {
   background-color: var(--pane-background-active);
 

diff --git a/...DRenderer/ERDContent/TableNode/TableDetail/CollapsibleHeader/CollapsibleHeader.module.css b/...DRenderer/ERDContent/TableNode/TableDetail/CollapsibleHeader/CollapsibleHeader.module.css
@@ -9,6 +9,14 @@
   cursor: pointer;
 }
 
+.header:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
+.header:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 @media screen and (max-width: 767px) {
   .header {
     position: sticky;

diff --git a/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css b/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css
@@ -21,6 +21,10 @@
   color: var(--overlay-70);
 }
 
+.header:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .iconTitleContainer {
   display: grid;
   grid-auto-flow: column;

diff --git a/...end/packages/erd-core/src/components/ERDRenderer/Toolbar/FitviewButton/Fitview.module.css b/...end/packages/erd-core/src/components/ERDRenderer/Toolbar/FitviewButton/Fitview.module.css
@@ -3,7 +3,11 @@
   padding: var(--spacing-2, 8px) var(--spacing-1, 4px);
   align-items: center;
   gap: var(--spacing-2, 8px);
-
+  border-radius: var(--border-radius-base);
   color: var(--global-foreground, #fff);
   font-size: var(--font-size-2, 11px);
 }
+
+.menuButton:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
diff --git a/.../erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/OpenedMobileToolbar.module.css b/.../erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/OpenedMobileToolbar.module.css
@@ -49,6 +49,11 @@
   gap: var(--spacing-2, 8px);
   color: var(--global-foreground, #fff);
   font-size: var(--font-size-2, 11px);
+  border-radius: var(--border-radius-base);
+}
+
+.menuButton:focus-visible {
+  outline: 1px solid var(--primary-color);
 }
 
 .showMode {
@@ -64,11 +69,15 @@
   padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
   align-items: center;
   gap: var(--spacing-1half, 6px);
-
+  border-radius: var(--border-radius-base);
   color: var(--button-secondary-foreground, #fff);
   font-size: var(--font-size-3, 12px);
 }
 
+.showModeMenuButton:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .cheveron {
   display: flex;
   width: 12px;
@@ -94,3 +103,7 @@
   color: var(--button-secondary-foreground, #fff);
   font-size: var(--font-size-3, 12px);
 }
+
+.closeButton:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
diff --git a/...ackages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/OpenedMobileToolbar.tsx b/...ackages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/OpenedMobileToolbar.tsx
@@ -91,12 +91,14 @@ export const OpenedMobileToolbar: FC<Props> = ({
 
       <div className={styles.showMode}>
         <div className={styles.text}>show</div>
-        <button type="button" onClick={toggleShowModeMenu}>
-          <div className={styles.showModeMenuButton}>
-            {showModeLabel}
-            <div className={styles.cheveron}>
-              <ChevronDown color="var(--global-foreground, #fff)" />
-            </div>
+        <button
+          type="button"
+          onClick={toggleShowModeMenu}
+          className={styles.showModeMenuButton}
+        >
+          {showModeLabel}
+          <div className={styles.cheveron}>
+            <ChevronDown color="var(--global-foreground, #fff)" />
           </div>
         </button>
       </div>

diff --git a/...ackages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/ShowModeMenu.module.css b/...ackages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/ShowModeMenu.module.css
@@ -13,6 +13,11 @@
   align-items: center;
   gap: var(--spacing-1, 4px);
   align-self: stretch;
+  border-radius: var(--border-radius-base);
+}
+
+.backButton:focus-visible {
+  outline: 1px solid var(--primary-color);
 }
 
 .cheveron {
@@ -44,3 +49,7 @@
   color: var(--button-secondary-foreground, #fff);
   font-size: var(--font-size-3, 12px);
 }
+
+.closeButton:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/ShowModeMenu.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/ShowModeMenu.tsx
@@ -14,13 +14,15 @@ export const ShowModeMenu: FC<Props> = ({
 }) => {
   return (
     <div className={styles.wrapper}>
-      <button type="button" onClick={toggleShowModeMenu}>
-        <div className={styles.backButton}>
-          <div className={styles.cheveron}>
-            <ChevronLeft size={12} color="var(--global-foreground, #fff)" />
-          </div>
-          <div className={styles.text}>show</div>
+      <button
+        type="button"
+        onClick={toggleShowModeMenu}
+        className={styles.backButton}
+      >
+        <div className={styles.cheveron}>
+          <ChevronLeft size={12} color="var(--global-foreground, #fff)" />
         </div>
+        <div className={styles.text}>show</div>
       </button>
 
       <hr className={styles.divider} />

diff --git a/...packages/erd-core/src/components/ERDRenderer/Toolbar/TidyUpButton/TidyUpButton.module.css b/...packages/erd-core/src/components/ERDRenderer/Toolbar/TidyUpButton/TidyUpButton.module.css
@@ -3,7 +3,11 @@
   padding: var(--spacing-2, 8px) var(--spacing-1, 4px);
   align-items: center;
   gap: var(--spacing-2, 8px);
-
+  border-radius: var(--border-radius-base);
   color: var(--global-foreground, #fff);
   font-size: var(--font-size-2, 11px);
 }
+
+.menuButton:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
diff --git a/frontend/packages/ui/src/components/Button/Button.module.css b/frontend/packages/ui/src/components/Button/Button.module.css
@@ -7,6 +7,10 @@
   color: var(--button-primary-foreground);
 }
 
+.wrapper:focus-visible {
+  outline: 1px solid var(--button-primary);
+}
+
 .icon {
   display: flex;
   place-content: center;

diff --git a/frontend/packages/ui/src/components/IconButton/IconButton.module.css b/frontend/packages/ui/src/components/IconButton/IconButton.module.css
@@ -17,6 +17,10 @@
   }
 }
 
+.iconWrapper:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .icon {
   display: inline-flex;
   align-items: center;

diff --git a/frontend/packages/ui/src/components/Sidebar/Sidebar.module.css b/frontend/packages/ui/src/components/Sidebar/Sidebar.module.css
@@ -80,11 +80,21 @@
   background: var(--pane-background-hover);
 }
 
+.sidebarMenuButton:focus-visible {
+  outline: 1px solid var(--primary-color);
+}
+
 .sidebarMenuAction {
   position: absolute;
   top: 0;
   bottom: 0;
   right: var(--spacing-5);
+  border-radius: var(--border-radius-base);
+  padding: 0 var(--spacing-1, 4px);
+}
+
+.sidebarMenuAction:focus-visible {
+  outline: 1px solid var(--primary-color);
 }
 
 .sidebarMenuAction.showOnHover {