arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): implement --ui-radius CSS variable (#2341)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-09 14:28:29 +02:00
committed by GitHub
parent 68ee3f11ca
commit 057e86cfda
60 changed files with 2406 additions and 2292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/theme/input-menu.ts
View File

@@ -5,16 +5,16 @@ import input from './input'
export default (options: Required<ModuleOptions>) => {
return defuFn({
slots: {
base: () => ['rounded-md', options.theme.transitions && 'transition-colors'],
base: () => ['rounded-[calc(var(--ui-radius)*1.5)]', 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-[--radix-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]',
content: 'max-h-60 w-[--radix-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]',
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-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted: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-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[--ui-text] data-highlighted:text-[--ui-text-highlighted] data-highlighted:before:bg-[--ui-bg-elevated]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-[--ui-text-dimmed] group-data-highlighted: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 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-[--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',
tagsItemText: 'truncate',
tagsItemDelete: ['inline-flex items-center rounded-sm 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-[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'],
tagsItemDeleteIcon: '',
tagsInput: 'border-0 placeholder-[--ui-text-dimmed] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
},
@@ -36,7 +36,7 @@ export default (options: Required<ModuleOptions>) => {
base: ''
},
false: {
base: 'w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
base: 'w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
}
},
size: {