softer buttons

packages/website-ue/src/components/Button/index.module.css

@@ -27,9 +27,12 @@
     background-color: var(--accent-8);
   }
 
-  &[data-variant="surface"] {
+  &[data-variant="surface"],
+  &[data-variant="soft"] {
     background-color: var(--accent-3);
+  }
 
-    outline: var(--space-1) solid var(--accent-4);
+  &[data-variant="surface"] {
+    outline: var(--space-1) solid var(--accent-6);
   }
 }

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

@@ -6,7 +6,7 @@ import styles from "./index.module.css";
 export interface ButtonProps extends ComponentProps<"button"> {
   color?: Color;
   radius?: `${1 | 2 | 3}` | "max";
-  variant?: "solid" | "surface";
+  variant?: "solid" | "surface" | "soft";
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([

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

@@ -1,13 +1,7 @@
 import { classNames } from "../../core/ui/classNames";
-import type { Color } from "../../core/ui/color";
 import { Button, type ButtonProps } from "../Button";
 import styles from "./index.module.css";
 
-export interface IconButtonProps extends ButtonProps {
-  color?: Color;
-  variant?: "solid";
-}
-
 export function IconButton({ className, ...props }: ButtonProps) {
   return (
     <Button

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

@@ -79,8 +79,8 @@ function LineInner({ line, lines }: LineProps) {
       return (
         <Fragment key={stage.tech_name}>
           <IconButton
-            color="gray"
-            variant={isSelected ? "solid" : "surface"}
+            color={isSelected ? undefined : "gray"}
+            variant={isSelected ? "surface" : "soft"}
             radius="1"
             className={styles.stage}
             onClick={() => {