Add new tailwind curved-* util for superellipses

This commit is contained in:
Jamie
2026-02-06 07:08:14 -08:00
committed by GitHub
parent 2398edf1b7
commit 3786123124
5 changed files with 25 additions and 9 deletions

View File

@@ -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';

View File

@@ -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 */

View File

@@ -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);
}

View File

@@ -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',

View File

@@ -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]',