Adjust focus and hover styles

LauraBeatris · LauraBeatris · commit 2ad4dc149de1 · 2025-11-12T19:34:39.000-03:00
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -63,43 +63,90 @@ const EnableOrganizationsPromptInternal = ({
                 gap: t.sizes.$2,
               })}
             >
-              {isEnabled ? (
-                <PromptSuccessIcon />
-              ) : (
-                <svg
+              <div
+                css={css`
+                  perspective: 1000px;
+                  position: relative;
+                  width: 1.25rem;
+                  height: 1.25rem;
+                  transform-style: preserve-3d;
+                  transition: transform 0.6s ease-in-out;
+                  transform: ${isEnabled ? 'rotateY(180deg)' : 'rotateY(0)'};
+
+                  @media (prefers-reduced-motion: reduce) {
+                    transition: none;
+                    transform: ${isEnabled ? 'rotateY(180deg)' : 'rotateY(0)'};
+                  }
+                `}
+              >
+                <span
+                  aria-hidden
                   css={css`
-                    width: 1.25rem;
-                    height: 1.25rem;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    backface-visibility: hidden;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                   `}
-                  viewBox='0 0 20 20'
-                  fill='none'
-                  xmlns='http://www.w3.org/2000/svg'
                 >
-                  <path
-                    opacity='0.2'
-                    d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
-                    fill='#EAB308'
-                  />
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
-                    fill='#EAB308'
-                  />
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
-                    fill='#EAB308'
-                  />
-                  <path
-                    fillRule='evenodd'
-                    clipRule='evenodd'
-                    d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
-                    fill='#EAB308'
+                  <svg
+                    css={css`
+                      width: 1.25rem;
+                      height: 1.25rem;
+                    `}
+                    viewBox='0 0 20 20'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <path
+                      opacity='0.2'
+                      d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
+                      fill='#EAB308'
+                    />
+                    <path
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
+                      fill='#EAB308'
+                    />
+                    <path
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
+                      fill='#EAB308'
+                    />
+                    <path
+                      fillRule='evenodd'
+                      clipRule='evenodd'
+                      d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
+                      fill='#EAB308'
+                    />
+                  </svg>
+                </span>
+
+                <span
+                  aria-hidden
+                  css={css`
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    backface-visibility: hidden;
+                    transform: rotateY(180deg);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  `}
+                >
+                  <PromptSuccessIcon
+                    css={css`
+                      width: 1.25rem;
+                      height: 1.25rem;
+                    `}
                   />
-                </svg>
-              )}
+                </span>
+              </div>
 
               <h1
                 css={[
@@ -281,7 +328,7 @@ const mainCTAStyles = css`
   width: 100%;
   height: 1.75rem;
   max-width: 14.625rem;
-  padding: 0.25rem 0.625rem;
+  padding: 0.375rem 0.625rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -292,15 +339,16 @@ const mainCTAStyles = css`
   user-select: none;
   min-width: 100%;
   color: white;
-  transition:
-    background 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
-    box-shadow 150ms cubic-bezier(0.2, 0.61, 0.1, 1),
-    border-color 150ms cubic-bezier(0.2, 0.61, 0.1, 1);
+  transition: all 120ms ease-in-out;
 
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 `;
 
 type PromptButtonVariant = 'solid' | 'outline';
@@ -330,10 +378,12 @@ const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
     }
 
     &:focus:not(:disabled) {
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
+      border: 1px solid rgba(115, 115, 115);
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
       box-shadow:
-        0 0 3px 0 rgba(253, 224, 71, 0) inset,
-        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+        0 0 0 4px rgba(255, 255, 255, 0.05),
+        0 0 3px 0 rgba(255, 255, 255, 0) inset,
+        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
         0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
         0 0 0 1px rgba(0, 0, 0, 0.12),
         0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
@@ -353,14 +403,14 @@ const PromptButton = ({ variant = 'solid', ...props }: PromptButtonProps) => {
         0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
     }
 
+    &:hover:not(:disabled) {
+      border: 1px solid rgba(115, 115, 115);
+    }
+
     &:focus:not(:disabled) {
-      box-shadow:
-        0px 0px 6px 0px rgba(255, 255, 255, 0.04) inset,
-        0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
-        0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
-        0px 0px 0px 1px rgba(0, 0, 0, 0.1),
-        0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);
-      border-color: rgba(118, 118, 132, 0.4);
+      border: 1px solid rgba(115, 115, 115);
+
+      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
     }
   `;
 
diff --git a/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -178,7 +178,12 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             })}
           >
             {success ? (
-              <PromptSuccessIcon />
+              <PromptSuccessIcon
+                css={css`
+                  width: 1rem;
+                  height: 1rem;
+                `}
+              />
             ) : claimed ? (
               <svg
                 width='1rem'
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -55,11 +55,10 @@ export const basePromptElementStyles = css`
   text-decoration: none;
 `;
 
-export function PromptSuccessIcon() {
+export function PromptSuccessIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
-      width='1rem'
-      height='1rem'
+      {...props}
       viewBox='0 0 16 17'
       fill='none'
       aria-hidden
