arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: use new syntax for css variables (#3258)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2025-02-07 11:24:14 +01:00
committed by GitHub
parent 8e7c52e1fb
commit 104852a55c
230 changed files with 12934 additions and 12958 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,15 +7,15 @@ export default (options: Required<ModuleOptions>) => {
slots: {
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-[var(--ui-border)]',
content: 'max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--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-[var(--ui-border)] scroll-py-1',
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',
viewport: 'divide-y divide-(--ui-border) scroll-py-1',
group: 'p-1 isolate',
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
label: 'font-semibold text-[var(--ui-text-highlighted)]',
separator: '-mx-1 my-1 h-px bg-[var(--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-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: ['shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]', options.theme.transitions && 'transition-colors'],
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: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: '',
itemLeadingChip: 'shrink-0',
@@ -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-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--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-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--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: ''
},
@@ -33,10 +33,10 @@ export default (options: Required<ModuleOptions>) => {
multiple: {
true: {
root: 'flex-wrap',
tagsInput: 'border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
tagsInput: 'border-0 bg-transparent placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
},
false: {
base: 'w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
base: 'w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
}
},
size: {
@@ -101,12 +101,12 @@ export default (options: Required<ModuleOptions>) => {
color,
multiple: true,
variant: ['outline', 'subtle'],
class: `has-focus-visible:ring-2 has-focus-visible:ring-[var(--ui-${color})]`
class: `has-focus-visible:ring-2 has-focus-visible:ring-(--ui-${color})`
})), {
color: 'neutral',
multiple: true,
variant: ['outline', 'subtle'],
class: 'has-focus-visible:ring-2 has-focus-visible:ring-[var(--ui-border-inverted)]'
class: 'has-focus-visible:ring-2 has-focus-visible:ring-(--ui-border-inverted)'
}]
}, input(options))
}