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

feat: uniformize components sizes (#68)

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-16 12:26:29 +02:00
committed by GitHub
parent 78e45600de
commit f302a15972
96 changed files with 1854 additions and 1720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/avatar.ts
View File

@@ -37,6 +37,6 @@ export default {
}
},
defaultVariants: {
size: 'sm'
size: 'md'
}
}

9
src/theme/badge.ts
View File

@@ -14,10 +14,9 @@ export default (config: { colors: string[] }) => ({
subtle: ''
},
size: {
xs: 'text-xs px-1.5 py-0.5',
sm: 'text-xs px-2 py-1',
md: 'text-sm px-2 py-1',
lg: 'text-sm px-2.5 py-1.5'
sm: 'text-xs px-1.5 py-0.5',
md: 'text-xs px-2 py-1',
lg: 'text-sm px-2 py-1'
}
},
compoundVariants: [...config.colors.map((color: string) => ({
@@ -52,6 +51,6 @@ export default (config: { colors: string[] }) => ({
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'sm'
size: 'md'
}
})

27
src/theme/button.ts
View File

@@ -21,35 +21,30 @@ export default (config: { colors: string[] }) => ({
link: ''
},
size: {
'2xs': {
xs: {
base: 'px-2 py-1 text-xs gap-x-1',
leadingIcon: 'size-4',
trailingIcon: 'size-4'
},
'xs': {
sm: {
base: 'px-2.5 py-1.5 text-xs gap-x-1.5',
leadingIcon: 'size-4',
trailingIcon: 'size-4'
},
'sm': {
md: {
base: 'px-2.5 py-1.5 text-sm gap-x-1.5',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
'md': {
lg: {
base: 'px-3 py-2 text-sm gap-x-2',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
'lg': {
xl: {
base: 'px-3.5 py-2.5 text-sm gap-x-2.5',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
'xl': {
base: 'px-3.5 py-2.5 text-base gap-x-2.5',
leadingIcon: 'size-6',
trailingIcon: 'size-6'
}
},
truncate: {
@@ -128,14 +123,10 @@ export default (config: { colors: string[] }) => ({
color: 'black',
variant: 'link',
class: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
size: '2xs',
square: true,
class: 'p-1'
}, {
size: 'xs',
square: true,
class: 'p-1.5'
class: 'p-1'
}, {
size: 'sm',
square: true,
@@ -143,11 +134,11 @@ export default (config: { colors: string[] }) => ({
}, {
size: 'md',
square: true,
class: 'p-2'
class: 'p-1.5'
}, {
size: 'lg',
square: true,
class: 'p-2.5'
class: 'p-2'
}, {
size: 'xl',
square: true,
@@ -169,6 +160,6 @@ export default (config: { colors: string[] }) => ({
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'sm'
size: 'md'
}
})

19
src/theme/checkbox.ts
View File

@@ -12,35 +12,30 @@ export default (config: { colors: string[] }) => ({
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
size: {
'2xs': {
xs: {
base: 'size-3',
container: 'h-4',
wrapper: 'text-xs'
},
'xs': {
sm: {
base: 'size-3.5',
container: 'h-4',
wrapper: 'text-xs'
},
'sm': {
md: {
base: 'size-4',
container: 'h-5',
wrapper: 'text-sm'
},
'md': {
base: 'size-[18px]',
lg: {
base: 'size-4.5',
container: 'h-5',
wrapper: 'text-sm'
},
'lg': {
xl: {
base: 'size-5',
container: 'h-6',
wrapper: 'text-base'
},
'xl': {
base: 'size-[22px]',
container: 'h-6',
wrapper: 'text-base'
}
},
required: {
@@ -73,7 +68,7 @@ export default (config: { colors: string[] }) => ({
}
])),
defaultVariants: {
size: 'sm',
size: 'md',
color: 'primary'
}
})

2
src/theme/chip.ts
View File

@@ -49,7 +49,7 @@ export default (config: { colors: string[] }) => ({
class: 'translate-y-1/2 -translate-x-1/2 transform'
}],
defaultVariants: {
size: 'sm',
size: 'md',
color: 'primary',
position: 'top-right'
}

13
src/theme/form-field.ts
View File

@@ -12,12 +12,11 @@ export default {
},
variants: {
size: {
'2xs': { root: 'text-xs' },
'xs': { root: 'text-xs' },
'sm': { root: 'text-sm' },
'md': { root: 'text-sm' },
'lg': { root: 'text-base' },
'xl': { root: 'text-base' }
xs: { root: 'text-xs' },
sm: { root: 'text-xs' },
md: { root: 'text-sm' },
lg: { root: 'text-sm' },
xl: { root: 'text-base' }
},
required: {
true: {
@@ -26,6 +25,6 @@ export default {
}
},
defaultVariants: {
size: 'sm'
size: 'md'
}
}

70
src/theme/input.ts
View File

@@ -10,47 +10,40 @@ export default (config: { colors: string[] }) => {
},
variants: {
size: {
'2xs': {
xs: {
base: 'text-xs gap-x-1 px-2 py-1',
leading: 'px-2',
trailing: 'px-2',
leading: 'pl-2',
trailing: 'pr-2',
leadingIcon: 'size-4',
trailingIcon: 'size-4'
},
'xs': {
sm: {
base: 'text-sm gap-x-1.5 px-2.5 py-1',
leading: 'px-2.5',
trailing: 'px-2.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leadingIcon: 'size-4',
trailingIcon: 'size-4'
},
'sm': {
md: {
base: 'text-sm gap-x-1.5 px-2.5 py-1.5',
leading: 'px-2.5',
trailing: 'px-2.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
'md': {
lg: {
base: 'text-sm gap-x-1.5 px-3 py-2',
leading: 'px-3',
trailing: 'px-3',
leading: 'pl-3',
trailing: 'pr-3',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
'lg': {
xl: {
base: 'text-sm gap-x-2.5 px-3.5 py-2.5',
leading: 'px-3.5',
trailing: 'px-3.5',
leading: 'pl-3.5',
trailing: 'pr-3.5',
leadingIcon: 'size-5',
trailingIcon: 'size-5'
},
'xl': {
base: 'text-base gap-x-2.5 px-3.5 py-2.5',
leading: 'px-3.5',
trailing: 'px-3.5',
leadingIcon: 'size-6',
trailingIcon: 'size-6'
}
},
variant: {
@@ -70,6 +63,9 @@ export default (config: { colors: string[] }) => {
},
loading: {
true: ''
},
type: {
file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:text-gray-400 file:outline-none'
}
},
compoundVariants: [...config.colors.map((color: string) => ({
@@ -86,52 +82,44 @@ export default (config: { colors: string[] }) => {
class: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
}, {
leading: true,
size: '2xs',
size: 'xs',
class: 'pl-7'
}, {
leading: true,
size: 'xs',
size: 'sm',
class: 'pl-8'
}, {
leading: true,
size: 'sm',
size: 'md',
class: 'pl-9'
}, {
leading: true,
size: 'md',
size: 'lg',
class: 'pl-10'
}, {
leading: true,
size: 'lg',
class: 'pl-11'
}, {
leading: true,
size: 'xl',
class: 'pl-12'
}, {
trailing: true,
size: '2xs',
class: 'pr-7'
class: 'pl-11'
}, {
trailing: true,
size: 'xs',
class: 'pr-8'
class: 'pr-7'
}, {
trailing: true,
size: 'sm',
class: 'pr-9'
class: 'pr-8'
}, {
trailing: true,
size: 'md',
class: 'pr-10'
class: 'pr-9'
}, {
trailing: true,
size: 'lg',
class: 'pr-11'
class: 'pr-10'
}, {
trailing: true,
size: 'xl',
class: 'pr-12'
class: 'pr-11'
}, {
loading: true,
leading: true,
@@ -147,7 +135,7 @@ export default (config: { colors: string[] }) => {
}
}],
defaultVariants: {
size: 'sm',
size: 'md',
color: 'white',
variant: 'outline'
}

8
src/theme/kbd.ts
View File

@@ -7,13 +7,13 @@ export default {
black: 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
},
size: {
xs: 'h-4 min-w-[16px] text-[10px]',
sm: 'h-5 min-w-[20px] text-[11px]',
md: 'h-6 min-w-[24px] text-[12px]'
sm: 'h-4 min-w-[16px] text-[10px]',
md: 'h-5 min-w-[20px] text-[11px]',
lg: 'h-6 min-w-[24px] text-[12px]'
}
},
defaultVariants: {
color: 'white',
size: 'sm'
size: 'md'
}
}

2
src/theme/navigation-menu.ts
View File

@@ -17,7 +17,7 @@ export default {
root: 'w-full items-center justify-between',
list: 'flex items-center min-w-0',
item: 'min-w-0',
link: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full'
link: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-0.5 after:mt-2 after:rounded-full'
},
vertical: {
root: 'flex-col',

21
src/theme/radio-group.ts
View File

@@ -17,47 +17,40 @@ export default (config: { colors: string[] }) => ({
indicator: `bg-${color}-500 dark:bg-${color}-400`
}])),
size: {
'2xs': {
xs: {
fieldset: 'gap-0.5',
base: 'size-3',
option: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
'xs': {
sm: {
fieldset: 'gap-0.5',
base: 'size-3.5',
option: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
'sm': {
md: {
fieldset: 'gap-1',
base: 'size-4',
option: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
'md': {
lg: {
fieldset: 'gap-1',
base: 'size-[18px]',
base: 'size-4.5',
option: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
'lg': {
xl: {
fieldset: 'gap-1.5',
base: 'size-5',
option: 'text-base',
container: 'h-6',
indicator: 'after:size-2'
},
'xl': {
fieldset: 'gap-1.5',
base: 'size-[22px]',
option: 'text-base',
container: 'h-6',
indicator: 'after:size-2'
}
},
disabled: {
@@ -73,7 +66,7 @@ export default (config: { colors: string[] }) => ({
}
},
defaultVariants: {
size: 'sm',
size: 'md',
color: 'primary'
}
})

41
src/theme/separator.ts
View File

@@ -27,12 +27,11 @@ export default (config: { colors: string[] }) => ({
}
},
size: {
'2xs': '',
'xs': '',
'sm': '',
'md': '',
'lg': '',
'xl': ''
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
type: {
solid: {
@@ -48,56 +47,48 @@ export default (config: { colors: string[] }) => ({
},
compoundVariants: [{
orientation: 'horizontal',
size: '2xs',
size: 'xs',
class: { border: 'border-t' }
}, {
orientation: 'horizontal',
size: 'xs',
size: 'sm',
class: { border: 'border-t-[2px]' }
}, {
orientation: 'horizontal',
size: 'sm',
size: 'md',
class: { border: 'border-t-[3px]' }
}, {
orientation: 'horizontal',
size: 'md',
size: 'lg',
class: { border: 'border-t-[4px]' }
}, {
orientation: 'horizontal',
size: 'lg',
class: { border: 'border-t-[5px]' }
}, {
orientation: 'horizontal',
size: 'xl',
class: { border: 'border-t-[6px]' }
}, {
orientation: 'vertical',
size: '2xs',
class: { border: 'border-s' }
class: { border: 'border-t-[5px]' }
}, {
orientation: 'vertical',
size: 'xs',
class: { border: 'border-s-[2px]' }
class: { border: 'border-s' }
}, {
orientation: 'vertical',
size: 'sm',
class: { border: 'border-s-[3px]' }
class: { border: 'border-s-[2px]' }
}, {
orientation: 'vertical',
size: 'md',
class: { border: 'border-s-[4px]' }
class: { border: 'border-s-[3px]' }
}, {
orientation: 'vertical',
size: 'lg',
class: { border: 'border-s-[5px]' }
class: { border: 'border-s-[4px]' }
}, {
orientation: 'vertical',
size: 'xl',
class: { border: 'border-s-[6px]' }
class: { border: 'border-s-[5px]' }
}],
defaultVariants: {
color: 'gray',
size: '2xs',
size: 'xs',
type: 'solid'
}
})

67
src/theme/slider.ts
View File

@@ -11,23 +11,20 @@ export default (config: { colors: string[] }) => ({
thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
}])),
size: {
'2xs': {
thumb: 'size-1.5'
},
'xs': {
thumb: 'size-2'
},
'sm': {
xs: {
thumb: 'size-3'
},
'md': {
sm: {
thumb: 'size-3.5'
},
md: {
thumb: 'size-4'
},
'lg': {
thumb: 'size-5'
lg: {
thumb: 'size-4.5'
},
'xl': {
thumb: 'size-6'
xl: {
thumb: 'size-5'
}
},
orientation: {
@@ -47,92 +44,68 @@ export default (config: { colors: string[] }) => ({
}
},
compoundVariants: [{
orientation: 'horizontal',
size: '2xs',
class: {
root: 'h-1.5',
track: 'h-px'
}
}, {
orientation: 'horizontal',
size: 'xs',
class: {
root: 'h-2',
track: 'h-0.5'
track: 'h-[6px]'
}
}, {
orientation: 'horizontal',
size: 'sm',
class: {
root: 'h-3',
track: 'h-1'
track: 'h-[7px]'
}
}, {
orientation: 'horizontal',
size: 'md',
class: {
root: 'h-4',
track: 'h-2'
track: 'h-[8px]'
}
}, {
orientation: 'horizontal',
size: 'lg',
class: {
root: 'h-5',
track: 'h-3'
track: 'h-[9px]'
}
}, {
orientation: 'horizontal',
size: 'xl',
class: {
root: 'h-6',
track: 'h-4'
}
}, {
orientation: 'vertical',
size: '2xs',
class: {
root: 'w-1.5',
track: 'w-px'
track: 'h-[10px]'
}
}, {
orientation: 'vertical',
size: 'xs',
class: {
root: 'w-2',
track: 'w-0.5'
track: 'w-[6px]'
}
}, {
orientation: 'vertical',
size: 'sm',
class: {
root: 'w-3',
track: 'w-1'
track: 'w-[7px]'
}
}, {
orientation: 'vertical',
size: 'md',
class: {
root: 'w-4',
track: 'w-2'
track: 'w-[8px]'
}
}, {
orientation: 'vertical',
size: 'lg',
class: {
root: 'w-5',
track: 'w-3'
track: 'w-[9px]'
}
}, {
orientation: 'vertical',
size: 'xl',
class: {
root: 'w-6',
track: 'w-4'
track: 'w-[10px]'
}
}],
defaultVariants: {
size: 'sm',
size: 'md',
color: 'primary'
}
})

58
src/theme/switch.ts
View File

@@ -4,7 +4,7 @@ export default (config: { colors: string[] }) => ({
base: 'peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
container: 'flex items-center',
thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
icon: 'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0',
icon: 'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 size-10/12',
wrapper: 'ms-2',
label: 'block font-medium text-gray-700 dark:text-gray-200',
description: 'text-gray-500 dark:text-gray-400'
@@ -15,47 +15,35 @@ export default (config: { colors: string[] }) => ({
icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
}])),
size: {
'2xs': {
base: 'h-3 w-5',
container: 'h-4',
thumb: 'size-2 data-[state=checked]:translate-x-2',
wrapper: 'text-xs',
icon: 'size-1'
},
'xs': {
base: 'h-4 w-7',
xs: {
base: 'w-7',
container: 'h-4',
thumb: 'size-3 data-[state=checked]:translate-x-3',
wrapper: 'text-xs',
icon: 'size-2'
wrapper: 'text-xs'
},
'sm': {
base: 'h-5 w-9',
sm: {
base: 'w-8',
container: 'h-4',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
wrapper: 'text-xs'
},
md: {
base: 'w-9',
container: 'h-5',
thumb: 'size-4 data-[state=checked]:translate-x-4',
wrapper: 'text-sm',
icon: 'size-3'
wrapper: 'text-sm'
},
'md': {
base: 'h-6 w-11',
lg: {
base: 'w-10',
container: 'h-5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
wrapper: 'text-sm'
},
xl: {
base: 'w-11',
container: 'h-6',
thumb: 'size-5 data-[state=checked]:translate-x-5',
wrapper: 'text-sm',
icon: 'size-4'
},
'lg': {
base: 'h-7 w-[52px]',
container: 'h-6',
thumb: 'size-6 data-[state=checked]:translate-x-6',
wrapper: 'text-base',
icon: 'size-5'
},
'xl': {
base: 'h-8 w-[60px]',
container: 'h-6',
thumb: 'size-7 data-[state=checked]:translate-x-7',
wrapper: 'text-base',
icon: 'size-6'
wrapper: 'text-base'
}
},
checked: {
@@ -88,6 +76,6 @@ export default (config: { colors: string[] }) => ({
},
defaultVariants: {
color: 'primary',
size: 'sm'
size: 'md'
}
})

15
src/theme/textarea.ts
View File

@@ -5,23 +5,20 @@ export default (config: { colors: string[] }) => ({
},
variants: {
size: {
'2xs': {
xs: {
base: 'text-xs gap-x-1 px-2 py-1'
},
'xs': {
sm: {
base: 'text-sm gap-x-1.5 px-2.5 py-1'
},
'sm': {
md: {
base: 'text-sm gap-x-1.5 px-2.5 py-1.5'
},
'md': {
lg: {
base: 'text-sm gap-x-1.5 px-3 py-2'
},
'lg': {
xl: {
base: 'text-sm gap-x-2.5 px-3.5 py-2.5'
},
'xl': {
base: 'text-base gap-x-2.5 px-3.5 py-2.5'
}
},
variant: {
@@ -50,7 +47,7 @@ export default (config: { colors: string[] }) => ({
}
],
defaultVariants: {
size: 'sm',
size: 'md',
color: 'white',
variant: 'outline'
}