icons

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

@@ -30,22 +30,38 @@
     font-size: 2em;
   }
 
-  &[data-list-child="true"]:not(:first-child),
-  *:not(:first-child) > &[data-parent-list-child="true"] {
+  &[data-list-child="horizontal"]:not(:first-child),
+  *:not(:first-child) > &[data-parent-list-child="horizontal"] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
     border-left-width: var(--space-0);
   }
 
-  &[data-list-child="true"]:not(:last-child),
-  *:not(:last-child) > &[data-parent-list-child="true"] {
+  &[data-list-child="horizontal"]:not(:last-child),
+  *:not(:last-child) > &[data-parent-list-child="horizontal"] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
     border-right-width: var(--space-0);
   }
 
+  &[data-list-child="vertical"]:not(:first-child),
+  *:not(:first-child) > &[data-parent-list-child="vertical"] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    border-top-width: var(--space-0);
+  }
+
+  &[data-list-child="vertical"]:not(:last-child),
+  *:not(:last-child) > &[data-parent-list-child="vertical"] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    border-bottom-width: var(--space-0);
+  }
+
   svg,
   img {
     width: 1em;
@@ -60,6 +76,10 @@
 
   &[data-variant="solid"] {
     background-color: var(--accent-8);
+
+    &[data-high-contrast="true"] {
+      background-color: var(--accent-12);
+    }
   }
 
   &[data-variant="surface"],

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

@@ -10,8 +10,8 @@ export interface ButtonProps extends ComponentProps<"button"> {
   size?: "regular" | "minor" | "major";
   highContrast?: boolean;
 
-  listChild?: boolean;
-  parentListChild?: boolean;
+  listChild?: "horizontal" | "vertical";
+  parentListChild?: "horizontal" | "vertical";
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([