feat: shadows for outlines

packages/website-ue/src/components/AvatarCard/index.css

@@ -12,8 +12,7 @@
     background-size: cover;
     background-position: center;
 
-    outline: var(--outline-interactive);
+    box-shadow: var(--shadow-interactive), var(--shadow-subtle);
-    box-shadow: var(--shadow-subtle);
   }
 
   .avatar-label {

packages/website-ue/src/components/AvatarCard/index.tsx

@@ -1,5 +1,4 @@
 import { useGameStrings } from "../../hooks/useGameStrings";
-import { useLocale } from "../../hooks/useLocale";
 import type { Avatar } from "../../protos/avatar";
 import { Text } from "../Text";
 import "./index.css";
@@ -9,7 +8,6 @@ interface Props {
 }
 
 export function AvatarCard({ avatar }: Props) {
-  const { locale } = useLocale();
   const profileAvatarEntityStrings = useGameStrings("ProfileAvatarEntity");
 
   return (

packages/website-ue/src/components/BaseStyles.astro

@@ -36,7 +36,6 @@ import "@fontsource-variable/roboto-flex";
     --weight-bold: 700;
     --weight-black: 900;
 
-    --outline-interactive: solid var(--space-1) var(--gray-5);
     --outline-focus: var(--space-1) solid var(--accent-6);
 
     --shadow-cavity:
@@ -44,11 +43,27 @@ import "@fontsource-variable/roboto-flex";
         var(--space-1) var(--black-a3),
       inset calc(var(--space-1) * sin(45deg) * -1)
         calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--white-a1);
+
     --shadow-bump:
       inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
         var(--space-1) var(--white-a3),
       inset calc(var(--space-1) * sin(45deg) * -1)
         calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
+
+    --shadow-outline-width: 1.5px;
+    --shadow-outline-width-negative: calc(var(--shadow-outline-width) * -1);
+
+    --shadow-interactive-background: 0 0 0 var(--shadow-outline-width)
+      var(--gray-6);
+    --shadow-interactive-shine: var(--shadow-outline-width-negative)
+      var(--shadow-outline-width-negative) var(--shadow-outline-width)
+      var(--white-a1);
+    --shadow-interactive-shadow: var(--shadow-outline-width)
+      var(--shadow-outline-width) var(--shadow-outline-width) var(--black-a4);
+    --shadow-interactive:
+      var(--shadow-interactive-shine), var(--shadow-interactive-shadow),
+      var(--shadow-interactive-background);
+
     --shadow-subtle: var(--space-1) var(--space-1) var(--space-4)
       var(--black-a11);
 

packages/website-ue/src/components/Navbar.astro

@@ -58,7 +58,7 @@ const { locale } = Astro.props;
 <div class="navbar">
   <div class="content">
     <div class="side">
-      <LinkI18n {locale} className="action" tabIndex={0}>
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
         <BlitzKitIcon className="icon" />
       </LinkI18n>
     </div>

packages/website-ue/src/components/TextField/index.css

@@ -9,8 +9,7 @@
   border-radius: var(--max-size);
 
   background-color: var(--gray-1);
-  outline: var(--outline-interactive);
+  box-shadow: var(--shadow-interactive), var(--shadow-cavity);
-  box-shadow: var(--shadow-cavity);
 
   font-size: var(--font-size-regular);
   color: var(--gray-11);

packages/website-ue/src/pages/[...locale]/avatars/_index.tsx

@@ -24,7 +24,7 @@ function Content({ skeleton }: ContentProps) {
 
   return (
     <div className="avatars">
-      {avatars.map((avatar) => (
+      {avatars.slice(0, 12).map((avatar) => (
         <AvatarCard key={avatar.name} avatar={avatar} />
       ))}
     </div>