💄(frontend) add a theme focus visible on BoxButton

We want to improve the accessibility of our BoxButton
component by adding a theme focus visible style.
This will help users who navigate using the
keyboard to easily identify which button is currently
focused.
To do so we have to move some theme styles to
the Box component to be able to use them in
BoxButton.

src/frontend/apps/impress/src/components/Box.tsx

@@ -36,7 +36,30 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $shrink?: CSSProperties['flexShrink'];
+  $theme?:
+    | 'primary'
+    | 'primary-text'
+    | 'secondary'
+    | 'secondary-text'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'greyscale';
   $transition?: CSSProperties['transition'];
+  $variation?:
+    | 'text'
+    | '000'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
   $zIndex?: CSSProperties['zIndex'];
@@ -73,6 +96,12 @@ export const Box = styled('div')<BoxProps>`
   ${({ $position }) => $position && `position: ${$position};`}
   ${({ $radius }) => $radius && `border-radius: ${$radius};`}
   ${({ $shrink }) => $shrink && `flex-shrink: ${$shrink};`}
+  ${({ $theme, $variation }) => {
+    if (!$theme || !$variation) {
+      return '';
+    }
+    return `color: var(--c--theme--colors--${$theme}-${$variation});`;
+  }}
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}

src/frontend/apps/impress/src/components/BoxButton.tsx

@@ -24,6 +24,9 @@ export type BoxButtonType = BoxType & {
  */
 const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
+    const theme = props.$theme || 'greyscale';
+    const variation = props.$variation || '400';
+
     return (
       <Box
         ref={ref}
@@ -37,10 +40,16 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           border: none;
           outline: none;
           font-family: inherit;
-
           color: ${props.disabled
-            ? 'var(--c--theme--colors--greyscale-400) !important'
-            : 'inherit'};
+            ? `var(--c--theme--colors--${theme}-400) !important`
+            : `inherit`};
+
+          &:focus-visible {
+            transition: none;
+            outline: 2px solid var(--c--theme--colors--${theme}-${variation});
+            border-radius: 1px;
+            outline-offset: 4px;
+          }
           ${$css || ''}
         `}
         {...props}

src/frontend/apps/impress/src/components/Text.tsx

@@ -15,29 +15,6 @@ export interface TextProps extends BoxProps {
   $textAlign?: CSSProperties['textAlign'];
   $textTransform?: CSSProperties['textTransform'];
   $size?: TextSizes | (string & {});
-  $theme?:
-    | 'primary'
-    | 'primary-text'
-    | 'secondary'
-    | 'secondary-text'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'greyscale';
-  $variation?:
-    | 'text'
-    | '000'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900'
-    | '1000';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;
@@ -50,8 +27,6 @@ export const TextStyled = styled(Box)<TextProps>`
   ${({ $size }) =>
     $size &&
     `font-size: ${$size in sizes ? sizes[$size as TextSizes] : $size};`}
-  ${({ $theme, $variation }) =>
-    `color: var(--c--theme--colors--${$theme}-${$variation});`}
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $ellipsis }) =>
     $ellipsis &&

src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx

@@ -80,6 +80,8 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
         }
         $direction="row"
         $gap="0.2rem"
+        $theme="danger"
+        $variation="600"
         $align="center"
       >
         <Icon