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

fix(module): stop using tailwind's shorthand arbitrary variable syntax (#2366)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
2024-10-14 10:42:26 +02:00
committed by GitHub
parent ea07dffdd5
commit dcce571cda
131 changed files with 3724 additions and 3724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
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: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-[--ui-text-muted] hover:data-[state=inactive]:text-[--ui-text] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme.transitions && 'transition-colors'],
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', 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-[calc(var(--ui-radius)*2)]',
list: 'bg-[var(--ui-bg-elevated)] rounded-[calc(var(--ui-radius)*2)]',
trigger: 'flex-1',
indicator: 'rounded-[calc(var(--ui-radius)*1.5)] shadow-sm'
},
link: {
list: 'border-[--ui-border]',
list: 'border-[var(--ui-border)]',
indicator: 'rounded-full'
}
},
@@ -32,12 +32,12 @@ export default (options: Required<ModuleOptions>) => ({
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position]',
indicator: 'left-0 w-[var(--radix-tabs-indicator-size)] translate-x-[var(--radix-tabs-indicator-position)]',
trigger: 'justify-center'
},
vertical: {
list: 'flex-col',
indicator: 'top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position]'
indicator: 'top-0 h-[var(--radix-tabs-indicator-size)] translate-y-[var(--radix-tabs-indicator-position)]'
}
},
size: {
@@ -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-[var(--ui-${color})]`,
trigger: `data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-${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-[var(--ui-bg-inverted)]',
trigger: 'data-[state=active]:text-[var(--ui-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-border-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-[var(--ui-${color})]`,
trigger: `data-[state=active]:text-[var(--ui-${color})] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-${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-[var(--ui-bg-inverted)]',
trigger: 'data-[state=active]:text-[var(--ui-text-highlighted)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
}
}],
defaultVariants: {