diff --git a/stylesheets/tailwind-config.css b/stylesheets/tailwind-config.css index 0bdcf74e08..20727e1a23 100644 --- a/stylesheets/tailwind-config.css +++ b/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'; diff --git a/stylesheets/tailwind-plugins/scrollbar.css b/stylesheets/tailwind-plugins/scrollbar.css index 239d7432b6..ff1012db4a 100644 --- a/stylesheets/tailwind-plugins/scrollbar.css +++ b/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 */ diff --git a/stylesheets/tailwind-plugins/superellipse.css b/stylesheets/tailwind-plugins/superellipse.css new file mode 100644 index 0000000000..40658e12bf --- /dev/null +++ b/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); +} diff --git a/ts/axo/_internal/AxoBaseDialog.dom.tsx b/ts/axo/_internal/AxoBaseDialog.dom.tsx index 4a161636ea..f6a4f0dcb7 100644 --- a/ts/axo/_internal/AxoBaseDialog.dom.tsx +++ b/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', diff --git a/ts/axo/_internal/AxoBaseMenu.dom.tsx b/ts/axo/_internal/AxoBaseMenu.dom.tsx index 1c7d73c3bb..9476d6d904 100644 --- a/ts/axo/_internal/AxoBaseMenu.dom.tsx +++ b/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 { // (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]',