Add new tailwind curved-* util for superellipses

Co-authored-by: Jamie <113370520+jamiebuilds-signal@users.noreply.github.com>

stylesheets/tailwind-config.css

@@ -1,7 +1,13 @@
+/**
+ * Copyright 2026 Signal Messenger, LLC
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
 @import 'tailwindcss' source(none);
 @import './tailwind-plugins/animate-general.css';
 @import './tailwind-plugins/animate-enter-exit.css';
 @import './tailwind-plugins/scrollbar.css';
+@import './tailwind-plugins/superellipse.css';
 
 @import '../ts/axo/_styles.css';
 

stylesheets/tailwind-plugins/scrollbar.css

@@ -4,8 +4,8 @@
  */
 
 /**
-  * Theme
-  */
+ * Theme
+ */
 
 @theme {
   --default-scrollbar-width: auto;
@@ -14,8 +14,8 @@
 }
 
 /**
-  * Properties
-  */
+ * Properties
+ */
 
 @property --tw-scrollbar-track {
   syntax: '*';
@@ -27,8 +27,8 @@
 }
 
 /**
-  * Utilities
-  */
+ * Utilities
+ */
 
 @utility scrollbar-track-* {
   /* prettier-ignore */

stylesheets/tailwind-plugins/superellipse.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright 2026 Signal Messenger, LLC
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@utility curved-* {
+  border-radius: calc(--value(--radius-*) * 1.15);
+  border-radius: calc(--value(integer) * 1.15px);
+  corner-shape: superellipse(1.25);
+}

ts/axo/_internal/AxoBaseDialog.dom.tsx

@@ -49,7 +49,7 @@ export namespace AxoBaseDialog {
   export const contentStyles = tw(
     'relative',
     'max-h-full min-h-fit max-w-full min-w-fit',
-    'rounded-3xl bg-elevated-background-primary shadow-elevation-3 select-none',
+    'curved-3xl bg-elevated-background-primary shadow-elevation-3 select-none',
     'outline-border-focused not-forced-colors:outline-0 not-forced-colors:focused:outline-[2.5px]',
     'data-[state=closed]:animate-exit data-[state=open]:animate-enter',
     'animate-scale-98 animate-translate-y-1',

ts/axo/_internal/AxoBaseMenu.dom.tsx

@@ -16,7 +16,7 @@ export namespace AxoBaseMenu {
     LEGACY_CONTEXT_MENU_Z_INDEX,
     'max-w-[300px] min-w-[200px]',
     'select-none',
-    'rounded-xl bg-elevated-background-tertiary shadow-elevation-3',
+    'curved-xl bg-elevated-background-tertiary shadow-elevation-3',
     isTestOrMockEnvironment() ||
       'animate-opacity-0 data-[state=closed]:animate-exit',
     'forced-colors:border',
@@ -40,7 +40,7 @@ export namespace AxoBaseMenu {
   // <Item/RadioItem/CheckboxItem/SubTrigger> (not Label/Separator)
   const navigableItemStyles = tw(
     labeledItemStyles,
-    'rounded-md type-body-medium',
+    'curved-md type-body-medium',
     'outline-0 data-[highlighted]:bg-fill-secondary-pressed',
     'data-[disabled]:text-label-disabled',
     'outline-0 outline-border-focused focused:outline-[2.5px]',