feat(module): dynamic rounded-* utilities (#3906)

2026-01-14 20:19:34 +01:00 · 2025-04-16 15:57:32 +02:00
parent 4e39cc59f8
commit f9737c8f40
109 changed files with 6247 additions and 6245 deletions
--- a/src/runtime/index.css
+++ b/src/runtime/index.css
@@ -27,7 +27,7 @@
    --ui-border-accented: var(--ui-color-neutral-300);
    --ui-border-inverted: var(--ui-color-neutral-900);

-    --ui-radius: var(--radius-sm);
+    --ui-radius: 0.25rem;
    --ui-container: var(--container-7xl);
  }

--- a/src/templates.ts
+++ b/src/templates.ts
@@ -89,6 +89,14 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
  --color-old-neutral-900: ${colors.neutral[900]};
  --color-old-neutral-950: ${colors.neutral[950]};
  ${[...(options.theme?.colors || []).filter(color => !colors[color as keyof typeof colors]), 'neutral'].map(color => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join('\n\t')).join('\n\t')}
+
+  --radius-xs: calc(var(--ui-radius) * 0.5);
+  --radius-sm: var(--ui-radius);
+  --radius-md: calc(var(--ui-radius) * 1.5);
+  --radius-lg: calc(var(--ui-radius) * 2);
+  --radius-xl: calc(var(--ui-radius) * 3);
+  --radius-2xl: calc(var(--ui-radius) * 4);
+  --radius-3xl: calc(var(--ui-radius) * 6);
 }
 `
  })
--- a/src/theme/alert.ts
+++ b/src/theme/alert.ts
@@ -2,7 +2,7 @@ import type { ModuleOptions } from '../module'

 export default (options: Required<ModuleOptions>) => ({
  slots: {
-    root: 'relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5',
+    root: 'relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5',
    wrapper: 'min-w-0 flex-1 flex flex-col',
    title: 'text-sm font-medium',
    description: 'text-sm opacity-90',
--- a/src/theme/badge.ts
+++ b/src/theme/badge.ts
@@ -24,31 +24,31 @@ export default (options: Required<ModuleOptions>) => ({
    },
    size: {
      xs: {
-        base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-[calc(var(--ui-radius))]',
+        base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
        leadingIcon: 'size-3',
        leadingAvatarSize: '3xs',
        trailingIcon: 'size-3'
      },
      sm: {
-        base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))]',
+        base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
        leadingIcon: 'size-3',
        leadingAvatarSize: '3xs',
        trailingIcon: 'size-3'
      },
      md: {
-        base: 'text-xs px-2 py-1 gap-1 rounded-[calc(var(--ui-radius)*1.5)]',
+        base: 'text-xs px-2 py-1 gap-1 rounded-md',
        leadingIcon: 'size-4',
        leadingAvatarSize: '3xs',
        trailingIcon: 'size-4'
      },
      lg: {
-        base: 'text-sm px-2 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]',
+        base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
        leadingIcon: 'size-5',
        leadingAvatarSize: '2xs',
        trailingIcon: 'size-5'
      },
      xl: {
-        base: 'text-base px-2.5 py-1 gap-1.5 rounded-[calc(var(--ui-radius)*1.5)]',
+        base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
        leadingIcon: 'size-6',
        leadingAvatarSize: '2xs',
        trailingIcon: 'size-6'
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -3,7 +3,7 @@ import { buttonGroupVariant } from './button-group'

 export default (options: Required<ModuleOptions>) => ({
  slots: {
-    base: ['rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+    base: ['rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme.transitions && 'transition-colors'],
    label: 'truncate',
    leadingIcon: 'shrink-0',
    leadingAvatar: 'shrink-0',
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -10,7 +10,7 @@ export default (options: Required<ModuleOptions>) => ({
    gridRow: 'grid grid-cols-7',
    gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
    gridBody: 'grid',
-    headCell: 'rounded-[calc(var(--ui-radius)*1.5)]',
+    headCell: 'rounded-md',
    cell: 'relative text-center',
    cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted)', options.theme.transitions && 'transition']
  },
--- a/src/theme/card.ts
+++ b/src/theme/card.ts
@@ -1,6 +1,6 @@
 export default {
  slots: {
-    root: 'rounded-[calc(var(--ui-radius)*2)]',
+    root: 'rounded-lg',
    header: 'p-4 sm:px-6',
    body: 'p-4 sm:p-6',
    footer: 'p-4 sm:px-6'
--- a/src/theme/checkbox.ts
+++ b/src/theme/checkbox.ts
@@ -3,7 +3,7 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
  slots: {
    root: 'relative flex items-start',
-    base: 'shrink-0 flex items-center justify-center rounded-(--ui-radius) text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2',
+    base: 'shrink-0 flex items-center justify-center rounded-sm text-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2',
    container: 'flex items-center',
    wrapper: 'ms-2',
    icon: 'shrink-0 size-full',
--- a/src/theme/color-picker.ts
+++ b/src/theme/color-picker.ts
@@ -2,10 +2,10 @@ export default {
  slots: {
    root: 'data-[disabled]:opacity-75',
    picker: 'flex gap-4',
-    selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
-    selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
+    selector: 'rounded-md',
+    selectorBackground: 'w-full h-full relative rounded-md',
    selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
-    track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
+    track: 'w-[8px] relative rounded-md',
    trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
  },
  variants: {
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -10,7 +10,7 @@ export default (options: Required<ModuleOptions>) => ({
    group: 'p-1 isolate',
    empty: 'py-6 text-center text-sm text-(--ui-text-muted)',
    label: 'p-1.5 text-xs font-semibold text-(--ui-text-highlighted)',
-    item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
+    item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
    itemLeadingIcon: 'shrink-0 size-5',
    itemLeadingAvatar: 'shrink-0',
    itemLeadingAvatarSize: '2xs',
--- a/src/theme/context-menu.ts
+++ b/src/theme/context-menu.ts
@@ -2,11 +2,11 @@ import type { ModuleOptions } from '../module'

 export default (options: Required<ModuleOptions>) => ({
  slots: {
-    content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
+    content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
    group: 'p-1 isolate',
    label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)',
    separator: '-mx-1 my-1 h-px bg-(--ui-border)',
-    item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
+    item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
    itemLeadingIcon: 'shrink-0',
    itemLeadingAvatar: 'shrink-0',
    itemLeadingAvatarSize: '',
--- a/src/theme/drawer.ts
+++ b/src/theme/drawer.ts
@@ -33,7 +33,7 @@ export default (options: Required<ModuleOptions>) => ({
    },
    inset: {
      true: {
-        content: 'rounded-[calc(var(--ui-radius)*2)] after:hidden'
+        content: 'rounded-lg after:hidden'
      }
    }
  },
@@ -59,7 +59,7 @@ export default (options: Required<ModuleOptions>) => ({
    direction: 'top',
    inset: false,
    class: {
-      content: 'inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]'
+      content: 'inset-x-0 top-0 rounded-b-lg'
    }
  }, {
    direction: 'bottom',
@@ -71,7 +71,7 @@ export default (options: Required<ModuleOptions>) => ({
    direction: 'bottom',
    inset: false,
    class: {
-      content: 'inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]'
+      content: 'inset-x-0 bottom-0 rounded-t-lg'
    }
  }, {
    direction: 'left',
@@ -83,7 +83,7 @@ export default (options: Required<ModuleOptions>) => ({
    direction: 'left',
    inset: false,
    class: {
-      content: 'inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]'
+      content: 'inset-y-0 left-0 rounded-r-lg'
    }
  }, {
    direction: 'right',
@@ -95,7 +95,7 @@ export default (options: Required<ModuleOptions>) => ({
    direction: 'right',
    inset: false,
    class: {
-      content: 'inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]'
+      content: 'inset-y-0 right-0 rounded-l-lg'
    }
  }]
 })
--- a/src/theme/dropdown-menu.ts
+++ b/src/theme/dropdown-menu.ts
@@ -2,12 +2,12 @@ import type { ModuleOptions } from '../module'

 export default (options: Required<ModuleOptions>) => ({
  slots: {
-    content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
+    content: 'min-w-32 bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
    arrow: 'fill-(--ui-border)',
    group: 'p-1 isolate',
    label: 'w-full flex items-center font-semibold text-(--ui-text-highlighted)',
    separator: '-mx-1 my-1 h-px bg-(--ui-border)',
-    item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
+    item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
    itemLeadingIcon: 'shrink-0',
    itemLeadingAvatar: 'shrink-0',
    itemLeadingAvatarSize: '',
--- a/src/theme/input-menu.ts
+++ b/src/theme/input-menu.ts
@@ -5,16 +5,16 @@ import input from './input'
 export default (options: Required<ModuleOptions>) => {
  return defuFn({
    slots: {
-      base: () => ['rounded-[calc(var(--ui-radius)*1.5)]', options.theme.transitions && 'transition-colors'],
+      base: () => ['rounded-md', options.theme.transitions && 'transition-colors'],
      trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
      arrow: 'fill-(--ui-border)',
-      content: 'max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto',
+      content: 'max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto',
      viewport: 'divide-y divide-(--ui-border) scroll-py-1',
      group: 'p-1 isolate',
      empty: 'py-2 text-center text-sm text-(--ui-text-muted)',
      label: 'font-semibold text-(--ui-text-highlighted)',
      separator: '-mx-1 my-1 h-px bg-(--ui-border)',
-      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:not-data-disabled:text-(--ui-text-highlighted) data-highlighted:not-data-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:not-data-disabled:text-(--ui-text-highlighted) data-highlighted:not-data-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
      itemLeadingIcon: ['shrink-0 text-(--ui-text-dimmed) group-data-highlighted:not-group-data-disabled:text-(--ui-text)', options.theme.transitions && 'transition-colors'],
      itemLeadingAvatar: 'shrink-0',
      itemLeadingAvatarSize: '',
@@ -23,9 +23,9 @@ export default (options: Required<ModuleOptions>) => {
      itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
      itemTrailingIcon: 'shrink-0',
      itemLabel: 'truncate',
-      tagsItem: 'px-1.5 py-0.5 rounded-(--ui-radius) font-medium inline-flex items-center gap-0.5 ring ring-inset ring-(--ui-border-accented) bg-(--ui-bg-elevated) text-(--ui-text) data-disabled:cursor-not-allowed data-disabled:opacity-75',
+      tagsItem: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-(--ui-border-accented) bg-(--ui-bg-elevated) text-(--ui-text) data-disabled:cursor-not-allowed data-disabled:opacity-75',
      tagsItemText: 'truncate',
-      tagsItemDelete: ['inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-(--ui-text-dimmed) hover:text-(--ui-text) hover:bg-(--ui-bg-accented)/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
+      tagsItemDelete: ['inline-flex items-center rounded-xs text-(--ui-text-dimmed) hover:text-(--ui-text) hover:bg-(--ui-bg-accented)/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
      tagsItemDeleteIcon: '',
      tagsInput: ''
    },
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => {
  return {
    slots: {
      root: 'relative inline-flex items-center',
-      base: ['w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+      base: ['w-full rounded-md border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
      increment: 'absolute flex items-center',
      decrement: 'absolute flex items-center'
    },
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -4,7 +4,7 @@ import { buttonGroupVariantWithRoot } from './button-group'
 export default (options: Required<ModuleOptions>) => ({
  slots: {
    root: 'relative inline-flex items-center',
-    base: ['w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+    base: ['w-full rounded-md border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
    leading: 'absolute inset-y-0 start-0 flex items-center',
    leadingIcon: 'shrink-0 text-(--ui-text-dimmed)',
    leadingAvatar: 'shrink-0',
--- a/src/theme/kbd.ts
+++ b/src/theme/kbd.ts
@@ -1,5 +1,5 @@
 export default {
-  base: 'inline-flex items-center justify-center px-1 rounded-(--ui-radius) font-medium font-sans',
+  base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
  variants: {
    variant: {
      solid: 'bg-(--ui-bg-inverted) text-(--ui-bg)',
--- a/src/theme/modal.ts
+++ b/src/theme/modal.ts
@@ -22,7 +22,7 @@ export default {
        content: 'inset-0'
      },
      false: {
-        content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
+        content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-(--ui-border)'
      }
    }
  }
--- a/src/theme/navigation-menu.ts
+++ b/src/theme/navigation-menu.ts
@@ -6,7 +6,7 @@ export default (options: Required<ModuleOptions>) => ({
    list: 'isolate min-w-0',
    label: 'w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5',
    item: 'min-w-0',
-    link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+    link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
    linkLeadingIcon: 'shrink-0 size-5',
    linkLeadingAvatar: 'shrink-0',
    linkLeadingAvatarSize: '2xs',
@@ -18,7 +18,7 @@ export default (options: Required<ModuleOptions>) => ({
    linkLabelExternalIcon: 'inline-block size-3 align-top text-(--ui-text-dimmed)',
    childList: '',
    childItem: '',
-    childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start',
+    childLink: 'group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start',
    childLinkWrapper: 'flex flex-col items-start',
    childLinkIcon: 'size-5 shrink-0',
    childLinkLabel: 'font-semibold text-sm relative inline-flex',
@@ -26,10 +26,10 @@ export default (options: Required<ModuleOptions>) => ({
    childLinkDescription: 'text-sm text-(--ui-text-muted)',
    separator: 'px-2 h-px bg-(--ui-border)',
    viewportWrapper: 'absolute top-full left-0 flex w-full',
-    viewport: 'relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]',
+    viewport: 'relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]',
    content: 'absolute top-0 left-0 w-full sm:w-auto',
    indicator: 'absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200',
-    arrow: 'relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]'
+    arrow: 'relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-xs'
  },
  variants: {
    color: {
--- a/src/theme/pin-input.ts
+++ b/src/theme/pin-input.ts
@@ -3,7 +3,7 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
  slots: {
    root: 'relative inline-flex items-center gap-1.5',
-    base: ['rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors']
+    base: ['rounded-md border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors']
  },
  variants: {
    size: {
--- a/src/theme/popover.ts
+++ b/src/theme/popover.ts
@@ -1,6 +1,6 @@
 export default {
  slots: {
-    content: 'bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto',
+    content: 'bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto',
    arrow: 'fill-(--ui-border)'
  }
 }
--- a/src/theme/select.ts
+++ b/src/theme/select.ts
@@ -7,17 +7,17 @@ export default (options: Required<ModuleOptions>) => {
  return defuFn({
    slots: {
      root: () => undefined,
-      base: () => ['relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+      base: () => ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
      value: 'truncate pointer-events-none',
      placeholder: 'truncate text-(--ui-text-dimmed)',
      arrow: 'fill-(--ui-border)',
-      content: 'max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto',
+      content: 'max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto',
      viewport: 'divide-y divide-(--ui-border) scroll-py-1',
      group: 'p-1 isolate',
      empty: 'py-2 text-center text-sm text-(--ui-text-muted)',
      label: 'font-semibold text-(--ui-text-highlighted)',
      separator: '-mx-1 my-1 h-px bg-(--ui-border)',
-      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:not-data-disabled:text-(--ui-text-highlighted) data-highlighted:not-data-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:not-data-disabled:text-(--ui-text-highlighted) data-highlighted:not-data-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors'],
      itemLeadingIcon: ['shrink-0 text-(--ui-text-dimmed) group-data-highlighted:not-group-data-disabled:text-(--ui-text)', options.theme.transitions && 'transition-colors'],
      itemLeadingAvatar: 'shrink-0',
      itemLeadingAvatarSize: '',
--- a/src/theme/skeleton.ts
+++ b/src/theme/skeleton.ts
@@ -1,3 +1,3 @@
 export default {
-  base: 'animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)'
+  base: 'animate-pulse rounded-md bg-(--ui-bg-elevated)'
 }
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
    root: 'flex items-center gap-2',
    list: 'relative flex p-1 group',
    indicator: 'absolute transition-[translate,width] duration-200',
-    trigger: ['group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
+    trigger: ['group relative inline-flex items-center shrink-0 min-w-0 data-[state=inactive]:text-(--ui-text-muted) hover:data-[state=inactive]:not-disabled:text-(--ui-text) font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
    content: 'focus:outline-none w-full',
    leadingIcon: 'shrink-0',
    leadingAvatar: 'shrink-0',
@@ -19,9 +19,9 @@ export default (options: Required<ModuleOptions>) => ({
    },
    variant: {
      pill: {
-        list: 'bg-(--ui-bg-elevated) rounded-[calc(var(--ui-radius)*2)]',
+        list: 'bg-(--ui-bg-elevated) rounded-lg',
        trigger: 'flex-1 w-full',
-        indicator: 'rounded-[calc(var(--ui-radius)*1.5)] shadow-xs'
+        indicator: 'rounded-md shadow-xs'
      },
      link: {
        list: 'border-(--ui-border)',
--- a/src/theme/toast.ts
+++ b/src/theme/toast.ts
@@ -2,7 +2,7 @@ import type { ModuleOptions } from '../module'

 export default (options: Required<ModuleOptions>) => ({
  slots: {
-    root: 'relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none',
+    root: 'relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-lg ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none',
    wrapper: 'w-0 flex-1 flex flex-col',
    title: 'text-sm font-medium text-(--ui-text-highlighted)',
    description: 'text-sm text-(--ui-text-muted)',
--- a/src/theme/tooltip.ts
+++ b/src/theme/tooltip.ts
@@ -1,6 +1,6 @@
 export default {
  slots: {
-    content: 'flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-(--ui-radius) ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto',
+    content: 'flex items-center gap-1 bg-(--ui-bg) text-(--ui-text-highlighted) shadow-sm rounded-sm ring ring-(--ui-border) h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto',
    arrow: 'fill-(--ui-border)',
    text: 'truncate',
    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5`,
--- a/src/theme/tree.ts
+++ b/src/theme/tree.ts
@@ -6,7 +6,7 @@ export default (options: Required<ModuleOptions>) => ({
    item: '',
    listWithChildren: 'ms-4.5 border-s border-(--ui-border)',
    itemWithChildren: 'ps-1.5 -ms-px',
-    link: 'relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+    link: 'relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
    linkLeadingIcon: 'shrink-0',
    linkLabel: 'truncate',
    linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',