Skip to content

Commit

Permalink
fix: numerious styling inconsistencies (#159)
Browse files Browse the repository at this point in the history
  • Loading branch information
PHILLIPS71 authored Jul 23, 2024
1 parent 48fcddc commit 9d111cc
Show file tree
Hide file tree
Showing 13 changed files with 117 additions and 39 deletions.
4 changes: 2 additions & 2 deletions packages/react/src/components/menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE
const Component: ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => {
const { as, children, className, size, status, ...rest } = props
const { as, children, className, size, color, ...rest } = props

const Element = as ?? MenuTrigger

const context = useMenu({ size, status })
const context = useMenu({ size, color })

const component = React.useMemo<Omit<MenuTriggerProps, 'children'>>(
() => ({
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/menu/use-menu.hook.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ type UseMenuProps = MenuVariantProps
type UseMenuReturn = ReturnType<typeof useMenu>

export const useMenu = (props: UseMenuProps) => {
const { size, status } = props
const { size, color } = props

const slots = React.useMemo(() => menu({ size, status }), [size, status])
const slots = React.useMemo(() => menu({ size, color }), [size, color])

return {
slots,
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/navigation/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@ const Component: ComponentType = React.forwardRef(

const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
() => ({
className: context.slots.navigation({ className }),
className: context.slots.navigation(),
...rest,
}),
[className, context.slots, rest]
[context.slots, rest]
)

return (
<NavigationContext.Provider value={context}>
<Element {...component} ref={ref}>
<div className={context.slots.wrapper()}>{children}</div>
<div className={context.slots.wrapper({ className })}>{children}</div>
</Element>
</NavigationContext.Provider>
)
Expand Down
24 changes: 23 additions & 1 deletion packages/react/src/components/select/SelectOption.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,29 @@ const Component: ComponentType = React.forwardRef(

return (
<Element {...component} ref={ref}>
{children}
{({ isSelected }: { isSelected: boolean }) => (
<>
{children}

{isSelected && (
<svg
aria-hidden="true"
className={slots.check()}
fill="none"
height="24"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
viewBox="0 0 24 24"
width="24"
>
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
<path d="M5 12l5 5l10 -10" />
</svg>
)}
</>
)}
</Element>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/select/SelectValue.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const Component: ComponentType = React.forwardRef(

const component = React.useMemo<SelectValueProps<TData>>(
() => ({
className: slots.placeholder({ className: className?.toString() }),
className: slots.value({ className: className?.toString() }),
...rest,
}),
[className, rest, slots]
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/components/breadcrumb.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const breadcrumb = tv({
item: [
'group',
'flex items-center',
'text-title',
'text-inherit',
'has-[:current]:opacity-80',
'has-[:disabled]:opacity-50 has-[:disabled]:pointer-events-none',
],
Expand Down
51 changes: 44 additions & 7 deletions packages/theme/src/components/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,68 @@ export const button = tv({
'border',
'transition-all duration-200',
'focus:outline-dashed focus:outline-offset-2 focus:outline-1',
'data-[pressed=true]:outline-dashed data-[pressed=true]:outline-offset-2 data-[pressed=true]:outline-1',
'disabled:opacity-50',
],
},
variants: {
color: {
transparent: {
button: ['text-white', 'border-transparent', 'focus:outline-shark'],
button: ['text-white', 'border-transparent', 'focus:outline-shark', 'data-[pressed=true]:outline-shark'],
},
neutral: {
button: ['text-white', 'bg-shark/80 hover:bg-shark', 'border-shark', 'focus:outline-shark'],
button: [
'text-white',
'bg-shark/80 hover:bg-shark',
'border-shark',
'focus:outline-shark',
'data-[pressed=true]:outline-shark',
],
},
brand: {
button: ['text-white', 'bg-brand/80 hover:bg-brand', 'border-brand', 'focus:outline-brand'],
button: [
'text-white',
'bg-brand/80 hover:bg-brand',
'border-brand',
'focus:outline-brand',
'data-[pressed=true]:outline-brand',
],
},
success: {
button: ['text-white', 'bg-success/80 hover:bg-success', 'border-success', 'focus:outline-success'],
button: [
'text-white',
'bg-success/80 hover:bg-success',
'border-success',
'focus:outline-success',
'data-[pressed=true]:outline-success',
],
},
info: {
button: ['text-white', 'bg-info/80 hover:bg-info', 'border-info', 'focus:outline-info'],
button: [
'text-white',
'bg-info/80 hover:bg-info',
'border-info',
'focus:outline-info',
'data-[pressed=true]:outline-info',
],
},
warning: {
button: ['text-white', 'bg-warning/80 hover:bg-warning', 'border-warning', 'focus:outline-warning'],
button: [
'text-white',
'bg-warning/80 hover:bg-warning',
'border-warning',
'focus:outline-warning',
'data-[pressed=true]:outline-warning',
],
},
danger: {
button: ['text-white', 'bg-danger/80 hover:bg-danger', 'border-danger', 'focus:outline-danger'],
button: [
'text-white',
'bg-danger/80 hover:bg-danger',
'border-danger',
'focus:outline-danger',
'data-[pressed=true]:outline-danger',
],
},
},
size: {
Expand Down
5 changes: 4 additions & 1 deletion packages/theme/src/components/chip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const chip = tv({
variants: {
color: {
neutral: {
chip: ['text-subtitle', 'bg-shark/20', 'border-subtitle'],
chip: ['text-subtitle', 'bg-shark/20', 'border-partition'],
},
brand: {
chip: ['text-brand', 'bg-brand/20', 'border-brand'],
Expand All @@ -25,6 +25,9 @@ export const chip = tv({
danger: {
chip: ['text-danger', 'bg-danger/20', 'border-danger'],
},
amber: {
chip: ['text-amber-500', 'bg-amber-500/20', 'border-amber-500'],
},
emerald: {
chip: ['text-emerald-500', 'bg-emerald-500/20', 'border-emerald-500'],
},
Expand Down
10 changes: 5 additions & 5 deletions packages/theme/src/components/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,23 +28,23 @@ export const input = tv({
group: ['text-info', 'border-info', 'focus-within:outline-info'],
},
warning: {
group: ['text-warning', 'border-warning', 'focus-within:outline-danger'],
group: ['text-warning', 'border-warning', 'focus-within:outline-warning'],
},
danger: {
group: ['text-danger', 'border-danger', 'focus-within:outline-warning'],
group: ['text-danger', 'border-danger', 'focus-within:outline-danger'],
},
},
size: {
sm: {
group: ['text-sm'],
input: ['h-8 min-h-8', 'placeholder:text-sm'],
input: ['min-h-8', 'placeholder:text-sm'],
},
md: {
group: ['text-base'],
input: ['h-10 min-h-10', 'placeholder:text-base'],
input: ['min-h-10', 'placeholder:text-base'],
},
lg: {
group: ['h-12 min-h-12', 'text-lg'],
group: ['min-h-12', 'text-lg'],
input: ['placeholder:text-lg'],
},
},
Expand Down
10 changes: 5 additions & 5 deletions packages/theme/src/components/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { tv } from 'tailwind-variants'
export const menu = tv({
slots: {
menu: [],
popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md'],
list: ['flex flex-col gap-1', 'p-1', 'outline-none'],
popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md', 'p-1'],
list: ['flex flex-col gap-1', 'outline-none'],
item: [
'flex tems-center',
'flex flex-row items-center gap-2',
'px-2 py-1',
'rounded-md',
'cursor-pointer',
Expand Down Expand Up @@ -36,7 +36,7 @@ export const menu = tv({
item: ['text-xl'],
},
},
status: {
color: {
neutral: {
item: ['hover:bg-middleground'],
},
Expand All @@ -59,7 +59,7 @@ export const menu = tv({
},
defaultVariants: {
size: 'md',
status: 'neutral',
color: 'neutral',
},
})

Expand Down
19 changes: 17 additions & 2 deletions packages/theme/src/components/navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { tv } from 'tailwind-variants'
export const navigation = tv({
slots: {
navigation: ['relative', 'flex', 'text-sm text-content', 'z-10'],
wrapper: ['relative', 'flex gap-3 md:gap-6', 'bg-middleground', 'z-10'],
wrapper: ['relative', 'flex gap-3 md:gap-4', 'bg-middleground', 'z-10'],
brand: ['flex flex-row justify-center flex-nowrap shrink-0'],
segment: ['flex gap-3', 'list-none'],
segment: ['flex gap-2', 'list-none'],
title: ['font-semibold'],
item: ['flex', 'select-none', 'transition-all duration-200', '[&_svg]:hover:text-brand'],
divider: ['bg-partition', 'border-partition'],
Expand Down Expand Up @@ -47,6 +47,7 @@ export const navigation = tv({
},
md: {},
lg: {},
xl: {},
},
variant: {
none: {},
Expand Down Expand Up @@ -89,6 +90,13 @@ export const navigation = tv({
wrapper: ['h-20'],
},
},
{
size: 'xl',
orientation: 'horizontal',
class: {
wrapper: ['h-24'],
},
},
{
size: 'sm',
orientation: 'vertical',
Expand All @@ -110,6 +118,13 @@ export const navigation = tv({
wrapper: ['w-72'],
},
},
{
size: 'xl',
orientation: 'vertical',
class: {
wrapper: ['w-80'],
},
},

// isBordered + Orientation
{
Expand Down
17 changes: 9 additions & 8 deletions packages/theme/src/components/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ export const select = tv({
'cursor-pointer',
'has-[:disabled]:opacity-50',
],
placeholder: [],
value: ['flex items-center gap-2'],
button: ['flex flex-row items-center justify-between', 'w-full', 'p-1.5', 'focus:outline-none'],
icon: ['shrink-0'],
check: ['text-inherit', 'h-5 w-5', 'ml-auto', 'shrink-0'],
popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md', 'w-[--trigger-width]'],
list: ['flex flex-col gap-1', 'p-1', 'outline-none'],
option: [
'flex tems-center',
'flex items-center gap-2',
'px-2 py-1',
'rounded-md',
'cursor-pointer',
Expand Down Expand Up @@ -50,27 +51,27 @@ export const select = tv({
status: {
neutral: {
select: ['border-partition'],
option: ['hover:bg-middleground'],
option: ['hover:bg-middleground', 'data-[selected=true]:bg-middleground'],
},
brand: {
select: ['border-brand'],
option: ['hover:bg-brand/20'],
option: ['hover:bg-brand/20', 'data-[selected=true]:bg-brand/20'],
},
success: {
select: ['border-success'],
option: ['hover:bg-success/20'],
option: ['hover:bg-success/20', 'data-[selected=true]:bg-success/20'],
},
info: {
select: ['border-info'],
option: ['hover:bg-info/20'],
option: ['hover:bg-info/20', 'data-[selected=true]:g-info/20'],
},
warning: {
select: ['border-warning'],
option: ['hover:bg-warning/20'],
option: ['hover:bg-warning/20', 'data-[selected=true]:bg-warning/20'],
},
danger: {
select: ['border-danger'],
option: ['hover:bg-danger/20'],
option: ['hover:bg-danger/20', 'data-[selected=true]:bg-danger/20'],
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/components/typography.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const typography = tv({
},
variant: {
subtitle: {
paragraph: ['text-xs', 'text-subtitle'],
paragraph: ['text-subtitle'],
},
},
},
Expand Down

0 comments on commit 9d111cc

Please sign in to comment.