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

feat(module): define neutral utilities (#3629)

Browse Source 
Co-authored-by: Sébastien Chopin <atinux@gmail.com>
This commit is contained in:
Benjamin Canac
2025-04-21 15:20:53 +02:00
committed by GitHub
parent 2b315fd855
commit d49e0dadee
238 changed files with 14319 additions and 14046 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/theme/tabs.ts
View File

@@ -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-md 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-muted hover:data-[state=inactive]:not-disabled:text-default 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,12 +19,12 @@ export default (options: Required<ModuleOptions>) => ({
},
variant: {
pill: {
list: 'bg-(--ui-bg-elevated) rounded-lg',
list: 'bg-elevated rounded-lg',
trigger: 'flex-1 w-full',
indicator: 'rounded-md shadow-xs'
},
link: {
list: 'border-(--ui-border)',
list: 'border-default',
indicator: 'rounded-full'
}
},
@@ -99,29 +99,29 @@ export default (options: Required<ModuleOptions>) => ({
color,
variant: 'pill',
class: {
indicator: `bg-(--ui-${color})`,
trigger: `data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-${color})`
indicator: `bg-${color}`,
trigger: `data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}`
}
})), {
color: 'neutral',
variant: 'pill',
class: {
indicator: 'bg-(--ui-bg-inverted)',
trigger: 'data-[state=active]:text-(--ui-bg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-border-inverted)'
indicator: 'bg-inverted',
trigger: 'data-[state=active]:text-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted'
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'link',
class: {
indicator: `bg-(--ui-${color})`,
trigger: `data-[state=active]:text-(--ui-${color}) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-${color})`
indicator: `bg-${color}`,
trigger: `data-[state=active]:text-${color} focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
}
})), {
color: 'neutral',
variant: 'link',
class: {
indicator: 'bg-(--ui-bg-inverted)',
trigger: 'data-[state=active]:text-(--ui-text-highlighted) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)'
indicator: 'bg-inverted',
trigger: 'data-[state=active]:text-highlighted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
}
}],
defaultVariants: {